Modul Desain Dan Pemograman Web 1 PDF

Modul 1
1. Materi Pokok.
a. Pengenalan tentang Program Berbasis Web.
b. Pengenalan tentang Pemrograman Berbasis Web.
2. Pengantar.
Pemrograman Web sendiri terdiri dari dua kata yaitu pemrograman
(proses / cara / pembuatan) dan Web yang artinya jaringan komputer yang terdiri
dari kumpulan situs internet yang menampilkan informasi seperti teks, gambar,
suara, animasi.
3. Tujuan Pembelajaran Mata Kuliah

a. Siswa dapat memahami dan mengerti tentang Program Berbasis Web.
b. Siswa dapat memahami dan mengerti tentang Pemrograman Berbasis Web.
4. Kemampuan Akhir Siswa

a. Siswa paham dan mengerti tentang Program Berbasis Web.
b. Siswa paham dan mengerti tentang Pemrograman Berbasis Web.
5. Kegiatan Belajar
Kegiatan belajar yang disampaikan kepada siswa pada mata kuliah
Pemrograman Web dan Desain Web 1 Modul 1 adalah sebagai berikut,
a. Pengenalan tentang Program Berbasis Web.
Materi berisikan pengertian dan penjelasan mengenai Program
berbasis Web,
Pengertian Web
Web atau lengkapnya www (world wide web) adalah sebuah koneksi
keterhubungan dokumen-dokumen yang tersimpan di internet dan diakses
menggunakan protokol HTTP (Hyper Text Transfer Protocol). Intinya
bahwa pengguna internet biasa memanfaatkan berbagai macam fasilitas
informasi dengan biaya murah tanpa harus datang langsung ketempatnya.
Informasi atau dokumen yang dapat diakses dapat berupa data teks, gambar
atau image, animasi , video, suara atau kombinasi diantaranya dan bahkan
komunikasi bias dilakukan secara langsung dengan suara dan video
sekaligus.[1]
Adapun cara kerja web dapat dilihat pada gambar 1.1 ,
Gambar 1. 1 cara kerja web

Keterangan cara kerja web yang terdapat pada gambar 1.1 adalah sebagai
berikut,
1. Informasi web disimpan dalam dokumen dalam bentuk halaman-
halaman web atau web page.
2. Halaman web tersebut disimpan dalam server web komputer.
3. Sementara dipihak user ada komputer yang bertindak sebagai
komputer klien dimana ditempatkan program untuk membaca
halaman web yang ada di server web (browser).
4. Browser membaca halaman web yang ada di server web.
Pengertian Website
Website adalah sejumlah halaman web yang memiliki topik saling
terkait, terkadang disertai pula dengan berkas-berkas gambar, video, atau
berkas lainnya. Website mempunyai fungsi yang bermacam-macam,
tergantung dari tujuan dan jenis website yang dibangun, tetapi secara garis
besar fungsi website menurut YM Kusuma Ardhana adalah sebagai Media
Promosi, Media Pemasaran, Media Informasi dan Media Pendidikan.[2]
Pengertian Program Berbasis Web
Program berbasis web adalah program yang disimpan dan dieksekusi
di lingkungan web server. Setiap permintaan yang dilakukan oleh user
melalui program klien (web browser) akan direspon oleh program berbasis
web dan hasilnya akan dikembalikan lagi ke hadapan user. Dengan program
berbasis web, halaman yang tampil di layar web browser dapat bersifat
dinamis, tergantung dari nilai data atau parameter yang dimasukan oleh
user. Komunikasi antara web browser dan program berbasis web dapat
digambarkan seperti berikut, [3]
Gambar 1. 2 program berbasis web

Seperti yang terlihat pada gambar 1.2, bahwa program berbasis web
dapat juga digunakan untuk mengakses file-file yang bersifat statis.
Program yang dapat berjalan dengan menggunakan basis teknologi web
atau browser. Program ini dibuat dengan menggunakan program server-
side. Server-side adalah script yang diolah di server. Script adalah program
yang ditulis dalam bahasa pemrograman khusus dan biasanya terdiri dari
serangkaian perintah. Script biasanya bekerja bila suatu program
dijalankan.[3]
Pengertian Web Browser
Secara umum web browser adalah sebuah program atau perangkat
lunak yang digunakan mengambil, menyajikan, dan melintasi berbagai
sumber informasi yang ada didalam jaringan internet (world wide web).
Sumber-sumber informasi yang dimaksud itu terdiri dari berbagai macam
bentuk seperti misalnya berupa halaman situs, gambar, video, infografis,
konten, dan lainnya.
Dalam menggunakan web browser pengguna dapat mengaksesnya
dengan sangat mudah dimana pengguna hanya perlu membuka program
berbasis web browser kemudian mengetikkan alamat atau situs yang dituju,
biasanya dengan menggunakan format www (world wide web) atau
mengetikkan url (uniform source locator) pada address bar dilaman web
browser. Setelah mengetikkan alamat yang dituju maka aplikasi web
browser akan mem-fetching atau mengambil data yang biasanya ditulis
dalam kode html. Alamat web atau url yang pengguna masukkan pada web
browser akan mengarah pada halaman yang dituju. Misalnya jika pengguna
memasukkan alamat url www.stmik-ikmi-cirebon.net maka web browser
akan mengakses protocol. Kemudian protocol yang ada pada alamat
tersebut akan mentransmisikan file dari web server menuju web browser,
selanjutnya domain stmik-ikmi-cirebon.web.id akan mengarahkan web
browser pada laman yang dituju dimana data tersebut tersimpan dalam web
server.
Adapun beberapa contoh dari web browser yaitu, Google Chrome, Mozilla
Firefox, Microsft Edge, Opera Mini dan lain sebagainya.
Pengertian Web Server
Web Server adalah sebuah software yang memberikan layanan
berbasis data dan berfungsi menerima permintaan dari hyper text transfer
protoco pada pengguna yang dikenal dengan nama web browser dan untuk
mengirimkan kembali yang hasilnya dalam bentuk beberapa halaman web
dan pada umumnya akan berbentuk dokumen hyper text markup
language.[2]
Fungsi utama dari web server adalah untuk mentransfer atau
memindahkan berkas yang diminta oleh pengguna melalui protokol
komunikasi tertentu. Oleh karena dalam satu halaman web biasanya terdiri
dari berbagai macam jenis berkas seperti gambar, video, teks, audio, file dan
lain sebagainya. Maka pemanfaatan web server berfungsi juga untuk
mentransfer keseluruhan aspek pemberkasan dalam halaman tersebut,
termasuk teks, gambar, video, audio, file dan sebagainya.[2]
Gambar 1. 3 web server
Pada saat pengguna mengakses sebuah halaman website pada web
browser pengguna akan meminta untuk dapat mengakses halaman tersebut.
Setelah meminta untuk dapat mengakses halaman tersebut, web browser
akan melakukan permintaan ke web server. Disinilah web server berperan,
web server akan mencarikan data yang diminta web browser, lalu
mengirimkan data tersebut ke web browser atau menolaknya jika ternyata
data yang diminta tidak ditemukan.
b. Pengenalan tentang Pemrograman Berbasis Web

Materi berisikan pengertian dan penjelasan mengenai Pemrogram
berbasis Web,
Pengertian Pemrograman Web
Pemrograman web atau dalam bahasa inggris web programming
terdiri dari dua kata yaitu pemrograman dan web. Pemrograman adalah
kumpulan instruksi atau perintah tertulis yang dibuat oleh manusia secara
logis untuk memerintahkan komputer agar melakukan langkah atau proses
tertentu dalam menyelesaikan suatu masalah. Pemrograman biasanya
menghasilkan sebuah program atau perangkat lunak yang dapat dijalankan
dengan mudah oleh orang lain tanpa harus mengetahui tahapan-tahapan
detail dalam melakukan proses yang ada di dalamnya.
Maka dapat disimpulkan bahwa pemrograman web adalah proses
membuat program komputer yang dapat digunakan/ditampilkan dengan
bantuan web browser. Contoh hasil pemrograman web adalah Flickr, Gmail,
Google Maps, dan juga Facebook.
Dengan Pemrograman web, halaman web yang semula hanya
menampilkan informasi, dapat lebih interaktif seperti dapat memberi
komentar dan menyimpannya, dapat kirim gambar, dapat melakukan
pencarian data, atau dengan kata lain dapat lebih memahami apa yang
sedang dibutuhkan.
Pemrograman web menghasilkan program-program yang memiliki
teknologi maju bahkan lebih pesat dari pemrograman lain (pemrograman
desktop) karena daya cakup penggunaannya lebih luas dan lebih efisien baik
dari biaya, waktu ataupun lainya.
Hal yang dapat dilakukan pada Pemrograman berbasis Web
1. Pemrograman web memungkinkan kita dapat membuat halaman web
yang dinamis dengan perintah-perintah yang cukup sederhana tapi dapat
menghasilkan informasi yang beragam.
2. Pemrograman web dapat melakukan interaksi sehingga pengguna dapat
memperoleh informasi yang sesuai/relevan seperti pencarian,
pengiriman data dll.
3. Pemrograman web dapat dihubungkan dengan berbagai macam basis
data/database seperti mysql, oracle, sql server dll
Bahasa yang digunakan pada Pemrograman Web
1. Bahasa Pemrograman HTML
HyperText Markup Language (HTML) adalah sebuah bahasa
markup yang digunakan untuk membuat sebuah halaman web dan
menampilkan berbagai informasi di dalam sebuah browser Internet.
HTML saat ini merupakan standar Internet yang didefinisikan dan
dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C).HTML berupa kode-kode tag yang menginstruksikan web
browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.
Sebuah file yang merupakan file HTML dapat dibuka dengan
menggunakan web browser.
2. Bahasa Pemrograman CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam
bahasa markup.Penggunaan yang paling umum dari CSS adalah untuk
memformat halaman web yang ditulis dengan HTML dan XHTML.
Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk
semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS
diatur oleh World Wide Web Consortium (W3C).
3. Bahasa Pemrograman Javascript
Javascript adalah bahasa scripting yang handal yang berjalan pada
sisi client. JavaScript merupakan sebuah bahasa scripting yang
dikembangkan oleh Netscape. Untuk menjalankan script yang ditulis
dengan JavaScript kita membutuhkan JavaScript-enabled browser yaitu
web browser yang mampu menjalankan JavaScript.
4. Bahasa Pemrograman PHP
Hypertext Preprocessor (PHP) adalah bahasa pemrograman script
yang paling banyak dipakai saat ini. PHP pertama kali dibuat oleh
Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama
FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang
digunakan untuk mengolah data form dari web. PHP banyak dipakai
untuk membuat situs web yang dinamis, walaupun tidak tertutup
kemungkinan digunakan untuk pemakaian lain.
Dikutip dari situs w3techs.com, berikut adalah market share
penggunaan bahasa pemrograman server-side untuk mayoritas website di
seluruh dunia,
Gambar 1. 4 market share penggunaan bahasa pemrograman web

Tools atau Alat yang dapat digunakan dalam Pemrograman Web
Tools atau alat sangat dibutuhkan dalam melakukan pemrograman
web karena tools atau alat ini tidak tersedia secara default dalam sistem
operasi, karenanya wajib meng-install-kan beberapa tools atau alat berikut
sebelum memulai pemograman web.
1. Aplikasi Server Package
Untuk dapat bekerja menggunakan PHP dan beberapa komponen
pendukungnya kita harus menginstall beberapa perangkat lunak antara
lain Apache, PHP, mySQL. Namun dewasa ini kita sudah tidak perlu di
repotkat lagi untuk mengistall itu semua satu per satu karena banyaknya
munculnya Aplikasi Server Package di mana aplikasi ini sudah mem-
bundel Apache, PHP, mySQL dalam satu paket installasi bahkan dalam
satu paket installasi ini juga sudah disertakan tools tambahan untuk
mempermudah memanage database yaitu phpMyAdmin. Ada beberapa
pilihan Aplikasi Server Package antara lain,
XAMPP
Gambar 1. 5 XAMPP
Tools ini memiliki kepanjangan nama X (Croos) Apache MySQL

PHP PhpMyAdmin, Tools ini di keluarkan oleh Bitnami, makna dari X
(Cross) sendiri memiliki arti bahwa Tools ini tersedia di beberapa
macam Operating System seperti Windows, Linux, OSX Tools ini
memiliki GUI yang familiar dan juga paling banyak di gunakan dalam
tutorial-tutorial yang berasal dari buku ataupun dari media internet,
tools ini memiliki derectory root didalam folder "htdocs".
LAMP
Gambar 1. 6 LAMP
Linux Apache MySQL PHP adalah Tool selanjutnya yang dapat

di install pada sistem operasi berbasis LINUX seperti Ubuntu, Mint,
BlankOn, TeaLinux OS, dan sebagainya. Tidak seperti tools
sebelumnya tool ini hanya memiliki Command Line
Interface (CLI), tool ini pun di install secara terpisah, tool ini memiliki
derectory root di dalam folder "www".
Wamp
Gambar 1. 7 WAMP
Wamp adalah aplikasi berikutnya, aplikasi yang hanya tersedia di sistem

operasi windows ini memiliki derectory root "www".
2. Text Editor & Browser
Selain Aplikasi Server Package, berhubungan dengan bahasa
pemerograman tentunya membutuhkan IDE (Integrated Development
Environment) sebagai lingkungan pengembang untuk mempermudah
menulis koding, ada banyak text editor yang tersedia baik dari vendor
OS yang kita gunakan adalah Notepad, Wordpad, gedit, kEdit. Adapun
beberapa text editor yang sering digunakan dan buatan pihak kertiga
atau bukan bawaan dari Sistem Operasi adalah Notepad++, Sublime
Text, Adobe Dreamweaver dan banyak lagi.
6. Latihan Soal dan Kunci Jawaban Latihan Soal

Materi berisikan latihan soal mengenai kegiatan belajar yaitu pengenalan
tentang program berbasis web dan pengenalan tentang pemrograman berbasis
web.
a. Latihan Soal
1. Apakah yang dimaksud tentang Program berbasis Web ?
2. Apakah yang dimaksud tentang Pemrograman berbasis Web ?
3. Bahasa apa saja yang dapat digunakan dalam melakukan Pemrograman
Web ?
4. Tools atau alat apa saja yang dapat digunakan dalam melakukan
pemrograman Web ?
b. Kunci Jawaban Latihan Soal
1. Program berbasis web adalah program yang disimpan dan dieksekusi di
lingkungan web server. Setiap permintaan yang dilakukan oleh user
melalui program klien (web browser) akan direspon oleh program
berbasis web dan hasilnya akan dikembalikan lagi ke hadapan user.
2. Pemrograman web atau dalam bahasa inggris web programming terdiri
dari dua kata yaitu pemrograman dan web. Pemrograman adalah
kumpulan instruksi atau perintah tertulis yang dibuat oleh manusia
secara logis untuk memerintahkan komputer agar melakukan langkah
atau proses tertentu dalam menyelesaikan suatu masalah. Pemrograman
biasanya menghasilkan sebuah program atau perangkat lunak yang
dapat dijalankan dengan mudah oleh orang lain tanpa harus mengetahui
tahapan-tahapan detail dalam melakukan proses yang ada di dalamnya.
3. Bahasa Pemrograman HTML, Bahasa Pemrograman CSS, Bahasa
Pemrograman Javascript, Bahasa Pemrograman PHP.
4. Aplikasi Server Package
a. XAMPP, X (Croos) Apache MySQL PHP PhpMyAdmin.
b. WAMP,
c. LAMP, Linux Apache MySQL PHP
Aplikasi Text Editor & Browser
7. Daftar Pustaka
[1] Supriyanto, Aji. 2007,Web dengan HTML dan XML Edisi Pertama.
Yogyakarta : Graha Ilmu
[2] Y, K, Ardhana. 2012,Dengan PHP : Membuat Website 30 Juta Rupiah.

Jakarta : Jasakom
[3] Raharjo, Budi. 2016,Modul Pemograman Web (HTML, PHP dan MySql)
Edisi Ketiga. Bandung : Modula
Modul 2
1. Materi Pokok.
a. Penjelasan materi tentang dasar-dasar HTML.
b. Penjelasan materi tentang Text Formatting, Image atau Gambar dan Link
atau Tautan pada HTML.
2. Pengantar.
HTML (Hypertext Markup Language) merupakan bahasa yang digunakan
untuk membangun halaman website.

a. Siswa dapat memahami dan mengerti tentang dasar-dasar HTML.
b. Siswa dapat memahami dan mengerti tentang Text Formatting, Image atau
Gambar dan Link atau Tautan pada HTML.

a. Siswa paham dan mengerti tentang dasar-dasar HTML.
b. Siswa paham dan mengerti tentang Text Formatting, Image atau Gambar
dan Link atau Tautan pada HTML.
5. Kegiatan Belajar
a. Penjelasan materi tentang dasar-dasar HTML.
Pengertian HTML
HTML (Hypertext Markup Language) merupakan bahasa yang
digunakan untuk membangun halaman website. HyperText adalah text yang
ditampilkan pada komputer atau alat elektronik lainnya dengan merujuk ke
text lainnya yang dapat diakses, biasanya dengan mengeklik mouse atau
menekan tombol tertentu. HyperText tidak terbatas pada text, tapi juga dapat
berisi tabel atau gambar. HyperText merupakan dasar dari struktur web.
Sedangkan Markup adalah kode yang diperlukan agar dapat dibaca oleh web
browser. Contoh tag atau elemen HTML adalah sebagai berikut,
<title> This is a title </title>
<title> (warna kuning) adalah, tag awal.
This is a title (warna merah muda) adalah, isi atau konten.
</title> (warna hijau) adalah, tag akhir atau penutup.
Tag penutup tidak harus selalu ada, terutama untuk tag-tag yang tidak
memiliki konten teks. Contohnya:
<img />, tag untuk menampilkan gambar
<hr />, tag untuk membuat garis horizontal
<br />, tag untuk loncat ke baris baru
Struktur Penulisan HTML
<!DOCTYPE html>
<html>
<head>
<title>Halaman 1</title>
</head>
<body>
<!– comment -->
<h1>Judul</h1>
<hr />
</body>
</html>
Doctype (warna hijau) digunakan untuk menginformasikan browser,
HTML versi apa yang digunakan. Contoh doctype adalah sebagai berikut,
1. HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. XHTML Basic 1.1 (quick reference):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
3. HTML 5
<!DOCTYPE HTML>
<html> (warna merah muda) merupakan root atau induk dari seluruh
tag html.
<head> (warna kuning),merupakan kepala dari halaman html, pada
bagian ini biasanya digunakan untuk elemen-elemen yang tidak ditampilkan
oleh browser.
<body> (biru muda) merupakan isi dari halaman website, apa pun
yang akan ditampilkan oleh browser, ditempatkan di bagian ini.
Tag pada HTML
1. Tag Heading, (warna kuning)
<h1> JUDUL </h1>
<h2> JUDUL </h2>
<h3> JUDUL </h3>
<h4> JUDUL </h4>
<h5> JUDUL </h5>
<h6> JUDUL </h6>
2. Tag Paragraph, (warna kuning)

<p>Dari 66.778 desa yang tersebar di Indonesia, baru sekitar 24.000
atau 36% di antaranya yang sudah terjangkau layanan telekomunikasi.
Sedangkan sisanya, 42.778 desa atau sekitar 64% di antaranya, masih
dalam tahap rencana pembangunan.</p>
<p>Demikian dipaparkan Eddy Kurnia, Head of Corporate
Communication Telkom. Rencana pembangunan ini akan digarap
Telkom bersama anak perusahaan selulernya, Telkomsel, dalam
program Universal Service Obligation (USO).</p>
Karakter khusus pada HTML
Dalam HTML dapat digunakan simbol tertentu yang dapat digunakan
untuk mewakili/mengganti suatu karakter. Berikut adalah karakter khusus
pada HTML.
Tabel 2. 1 karakter khusus pada HTML
Sebagai contoh, tag html menggunakan karakter < dan >. Maka, agar
browser dapat menampilkan karakter tersebut, digunakan simbol khusus,
yaitu < untuk karakter < dan > untuk karakter >.
b. Penjelasan materi tentang Text Formatting, Image atau Gambar dan
Link atau Tautan pada HTML
Text formatting
Yaitu melakukan pengaturan / konfigurasi pada teks yang akan
dijadikan isi dari sebuah halaman web. Pengaturan tersebut akan terlihat
secara real, sehingga apa yang diinputkan pada dokumen HTML akan
diperlihatkan oleh web browser. Pengaturan ini format dari teks meliputi
pengaturan heading (penjudulan pada sebuah teks / paragraf), alignment
(pengaturan align atau perataan pada suatu teks / paragraf), dan juga
pengaturan font (mengatur jenis, ukuran, dan warna font pada suatu teks /
paragraf). Tag text formatting adalah sebagai berikut
<font> </font>, mengubah jenis font, ukuran dan warna.
Attribut yang digunakan: color, face, size
Contoh:
<font color =“red” size = “10” face = “Arial”> STMIK IKMI CIREBON
</font>
Berikut adalah tag dari Text Formatting,
Tabel 2. 2 tag dari tag formatting
<b> Menebalkan Text
<big> Membesarkan Text
<em> Emphasized, Memiringkan Text
<i> Italic, Memiringkan Text
<small> Mengecilkan Text
<strong> Menebalkan Text. Text terlihat lebih kuat.
<sub> Subscript. Misalnya: H20
<sup> Superscript. Misalnya: 1000 Celcius
<del> Sebagai tanda teks yang dihapus/diperbaiki.
<ins> Sebagai tanda teks yang disisipkan.
<code> Teks Kode Komputer

<kbd> Teks Keyboard
<samp> Teks sample
<tt> Teletype
<var> Variabel
<pre> Preformat, menampilkan tulisan sesuai

dengan yang diketik.
<abbr> Abbreviation, Singkatan
<acronym> Akronim, singkatan yang membentuk kata

baru.
<address> Alamat
<bdo> Menentukan arah tulisan, atribut yang

digunakan: dir, dengan pilihan nilai atribut:
ltr dan rtl. Default bernilai ltr.
Contoh: <bdo dir=“rtl”>Isi Tulisan</bdo>
<blockquote> Digunakan untuk kutipan panjang
<q> Digunakan untuk kutipan pendek
<cite> Sitasi, Penghargaan
<dfn> Definisi
Gambar atau Image

Gambar (Bahasa Inggris: image) adalah kombinasi antara titik, garis,
bidang, dan warna untuk menciptakan suatu imitasi dari suatu objek–
biasanya objek fisik atau manusia. Dan cara menampilkan gambar pada
website menggunakan tag
<img>
Atribut yang dapat digunakan, antara lain: alt, src
Contoh Penggunaan:
<img src=“img/logo.jpg” alt=“Logo Ikmi” width=“300” height=“150” />
src (warna kuning), alamat file gambar yang akan ditampilkan.
alt (warna merah muda), teks alternatif yang ditampilkan jika file gambar
tidak ditemukan.
width (warna hijau), menentukan ukuran lebar gambar.
height (biru muda), menentukan ukuran tinggi gambar.
Link atau Tautan
Link (juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks
(hypertext) ke dokumen yang lain atau sumber lain. Seperti halnya suatu
kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan
sesuai dengan protokol akses, sebuah komputer dapat diminta untuk
memperoleh sumber yang direferensikan. Tujuan dibuatnya link adalah
sebagai jalan pintas atau shortcut menuju halaman atau website lain. Link
dapat berupa tulisan ataupun gambar. Membuat tautan(link) ke suatu alamat
website, atau ke suatu halaman website, menggunakan tag
<a>
Atribut yang dapat digunakan antara lain adalah href, target, title
Contoh link ke alamat suatu website:
<a href=“http://www.stimik-ikmi.ac.id” title=“Website Resmi IKMI”>
STIMIK IKMI CIREBON </a>
tref (warna biru muda) merupakan alamat situs atau file yang dituju.
target (warna hijau) dokumen/tab yang digunakan untuk membuka link
tersebut. “_blank” akan menyebabkan link dibuka pada tab baru.
title (warna kuning) tulisan yang akan ditampilkan saat penunjuk mouse
tepat berada di atas link.
Contoh link ke suatu halaman pada website yang sama:
<a href=“belajarweb3.html” target=“_blank” title=“Belajar Web
3”>Belajar Web 3</a>
Contoh link menggunakan gambar:
<a href=“ belajarweb 3.html” target=“_blank” title=“ Belajar Web
3”><img src=“logo_ikmi.jpg” alt=“Logo IKMI”/></a>
6. Latihan Soal dan Hasil Latihan Soal

Materi berisikan latihan mengenai kegiatan belajar yaitu penjelasan
materi tentang dasar-dasar html. penjelasan materi tentang text formatting,
image atau gambar dan link atau tautan pada html..
a. Latihan Soal
1. Buatlah sebuah file latihanhtml.html menggunakan text editor kemudian
tambahkan atau sisipkan,
<!DOCTYPE html>
<html>
<head>
<title> Latihan HTML </title>
</head>
<body>
<h1>Selamat Datang di STIMIK IKMI Cirebon</h1>
<hr>
<p>
Menjadi Universitas terdepan dibidang Teknologi Informasi &
Komputer, berwawasan Global dan menjadi pusat Unggulan
dibidang ilmu pengetahuan Teknologi dan seni yang mendukung
pembangunan nasional serta berorientasi pada kepentingan
masyarakat, bangsa dan Negara.
</p>
</body>
</html>
2. Berikutnya adalah melakukan text formatting pada latihan nomor 1
dengan menambakan atau menyisipkan,
<h1 align="center">Selamat Datang di STIMIK IKMI Cirebon</h1>
<p><font face="arial" color="red" size="4">
Komputer, berwawasan Global dan menjadi pusat Unggulan dibidang
ilmu pengetahuan Teknologi dan seni yang mendukung pembangunan
nasional serta berorientasi pada kepentingan masyarakat, bangsa dan
Negara.
</font></p>
Maka skrip akan menjadi,
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">Selamat Datang di STIMIK IKMI
Cirebon</h1>
<hr>

</font></p>
</body>
</html>
3. Selanjutnya adalah menambahkan gambar pada sebuah halaman HTML
dengan menambahkan atau menyisipkan, ( gambar berada didalam satu
folder dengan file latihanhtml.html )
<center><img src="logo_ikmi.jpg" width="100"
height="100"></center>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Cirebon</h1>
<hr>
</font></p>
</body>
</html>
4. Latihan yang berikutnya adalah memberikan link atau tautan pada
HTML, link internal dan link eksternal.
Pertama adalah menggunakan sebuah link internal pada sebuah halaman
HTML, dengan menambahkan skrip berikut,
<a name = "#atas">
Dan tombol link
<a href = "#atas"> Kembali ke Atas </a>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a name = "#atas">
Cirebon</h1>
<hr>
</font></p>
<center><p><a href = "#atas"> Kembali ke Atas
</a></p></center>
</body>
</html>
Yang kedua adalah menambahkan link eksternal, sebelumnya mari
buat lah sebuah file baru dengan nama linkeksternal.html kemudian
<a href = "linkeksternal.html"> ke Halaman Link Eksternal </a>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Link Eksternal</title>
</head>
<body>
Link Eksternal Berhasil !
</body>
</html>
Kemudian pada file latihanhtml.html tambahkan skrip link sebagai
berikut,
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a name = "#atas">
Cirebon</h1>
<hr>
</font></p>
<center><p>
<a href = "linkeksternal.html"> ke Halaman Link Eksternal </a>
<br>
<a href = "#atas"> Kembali ke Atas </a>
</p></center>
</body>
</html>
b. Hasil Latihan Soal
Gambar 2. 1 hasil latihan soal modul 2

Modul 3
1. Materi Pokok.
a. Penjelasan materi tentang List pada HTML.
b. Penjelasan materi tentang Tabel pada HTML.
2. Pengantar.
List item di gunakan untuk mengelompokkan data baik berurutan (ordered
list) maupun yang tidak berurutan (unordered list).
Tag <tabel> digunaka untuk membuat table dalam dokument HTML ,
bagian pokok dari tabel adalah cell yang didefinisikan dengan menggunakan
tag <td>. Berikutnya untuk membuat beberapa baris cell dalam table gunakan
tag <tr>.

a. Siswa dapat memahami dan mengerti tentang tentang List pada HTML.
b. Siswa dapat memahami dan mengerti tentang Tabel pada HTML.

a. Siswa paham dan mengerti tentang List pada HTML.
b. Siswa paham dan mengerti tentang Tabel pada HTML.
5. Kegiatan Belajar
a. Penjelasan materi tentang List pada HTML.
Pengertian List
List adalah bagian teks di dalam dokumen yang berisi daftar item dari
suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang
bertema kuliner, list dapat berupa daftar dari makanan dan minuman,
beserta harganya. List dapat juga berupa prosedur (urutan langkah-langkah)
dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara
berurutan dari langkah pertama sampai langkah terakhir. Berikut adalah
contoh list,
Gambar 3. 1 contoh list
Tipe daftar dalam dokumen HTML dibedakan menjadi tiga, yaitu :

1. Daftar berurutan (ordered list),
Ordered list merupakan list/daftar yang beraturan/berurutan.
Biasanya ditandai dengan adanya urutan nomor atau abjad. Urutan bisa
berarti juga sebagai sebuah skala prioritas. Contoh: sila-sila dalam
pancasila.
1. Ketuhanan Yang Maha Esa
2. Kemanusiaan yang Adil dan Beradab
3. Persatuan Indonesia
4. Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam
permusyawaratan/perwakilan
5. Keadilan sosial bagi seluruh rakyat Indonesia
Ordered list dalam aplikasi seperti Microsoft Office, dikenal
dengan istilah numbering dengan icon,
Gambar 3. 2 ordered list pada ms.word

Dalam website, struktur HTML yang digunakan untuk membuat
sebuah blok ordered list adalah sebagai berikut:
<ol>
<li> Ketuhanan Yang Maha Esa </li>
<li> Kemanusiaan yang adil dan berada b</li>
<li> Persatuan Indonesia </li>
<li> Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam
permusyawaratan/perwakilan </li>
<li> Keadilan sosial bagi seluruh rakyat Indonesia </li>
</ol>
Tag <ol> (warna kuning) adalah ordered list.
Tag <li> (warna biru muda) adalah list itemnya.
Berikut adalah atribut yang dapat digunakan pada ordered list,
Tabel 3. 1 atribut pada ordered list
2. Daftar tidak berututan (unordered list),

Unordered List merupakan kebalikan dari ordered list. Artinya,
poin-poin yang terdapat dalam sebuah list (daftar) tidak berurutan, juga
bisa diartikan tidak memiliki skala prioritas. Di dalam aplikasi seperti
Microsoft Word, dikenal dengan istilah bullets. Icon yang digunakan
adalah sebagai berikut,
Gambar 3. 3 unordered list pada ms.word

Struktur HTML untuk membuat sebuah blok unordered list
<ul>
<li> Kopi </li>
<li> Teh Manis </li>
<li> Mie Goreng </li>
<li> Jus Jeruk </li>
</ul>
Tag <ul> (warna kuning) adalah tag unordered list.
Tag <li> (warna biru muda) adalah list itemnya.
Berikut adalah atribut yang dapat digunakan pada tag <ul>,
Tabel 3. 2 atribut pada unordered list
Berikut adalah atribut yang dapat digunakan pada tag <li>,

Tabel 3. 3 atribut pada tag <li>
3. Daftar definisi (definition list).

Definition list adalah deskripsi dari item-item yang memiliki deskripsi.
<dl>
<dt>Healthy Juice</dt>
<dd>Jus kesehatan campuran dari buah-buahan dan sayuran
segar</dd>
<dt>Soda Gembira</dt>
<dd>Susu yang disajikan dengan soda</dd>
</dl>
Tag <dl> (warna kuning) adalah tag definition list.
Tag <dt> (warna hijau) adalah definition term atau istilah yang akan
didefinisikan.
Tag <dd> (warna biru muda) adalah definition description - penjelasan
dari istilah.
b. Penjelasan materi tentang Tabel pada HTML

Tabel adalah daftar yang berisi ikhtisar sejumlah data-data informasi
yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan
garis pembatas. Sementara bagan adalah gambaran/sketsa buram untuk
memperlihatkan atau menerangkan sesuatu. Tabel di dalam website dapat
digunakan untuk menyusun teks, gambar, link atau form ke dalam bentuk
kolom dan baris. Berikut adalah struktur table pada html,
<table width=“100%” border=“1”>
<caption>Data Penjualan</caption>
<tr>
<th>No.</th>
<th>Month</th>
<th>Sales volume</th>
<th>Reciept</th>
</tr>
<tr>
<td>1.</td>
<td>Januari</td>
<td>120</td>
<td>360000</td>
</tr>
<tr>
<td>2.</td>
<td>February</td>
<td>155</td>
<td>465000</td>
</tr>
<tr>
<td>3.</td>
<td>March</td>
<td>89</td>
<td>267000</td>
</tr>
</table>
Penjelasan akan didefinisikan dengan gambar table sebagai berikut,
Tabel 3. 4 penjelasan tentang tabel
Berikut adalah atribut pada tag <tabel> (warna kuning),

Tabel 3. 5 atribut pada tag <table>
Berikut adalah atribut dari tag <caption> (warna hijau), digunakan untuk
memberi judul/keterangan pada table.
Tabel 3. 6 atribut pada tag <caption>
Berikut adalah atribut dari tag <tr> (warna biru muda), digunakan untuk
mendefinisikan baris table.
Tabel 3. 7 atribut pada tag <tr>
Tag <th> (warna merah muda) dan <td> (tidak di warnai), tabel HTML
memiliki 2 jenis cell,
1. Header Cells, berisi informasi header. Tag yang digunakan adalah
<th>.
2. Standar Cells, berisi data. Tag yang digunakan adalah <td>.
Secara visual, <th> dan <td> dapat dibedakan. <th> biasanya
ditampilkan dengan teks tebal, dan menggunakan rataan (align) tengah.
Sementara <td> ditampilkan dengan teks biasa dan rataan kiri.
Berikut adalah atribut dari tag <th> dan <td>,
Tabel 3. 8 atribut pada tag <th> dan <td>
rowspan, digunakan untuk menggabungkan (merge) 2 cells ke bawah

(baris).
colspan, digunakan untuk menggabungkan 2 cells ke samping (kolom).

a. Latihan Soal
1. Latihan Soal List
Ordere list
Buatlah sebuah file dengan nama list.html kemudian tambahkan atau
sisipkan skrip berikut,
<!DOCTYPE html>
<html>
<head>
<title>List pada HTML</title>
</head>
<body>
<p><font face="arial" size="4">
Pancasila
<ol>
<li> Kemanusiaan yang adil dan beradab</li>
<li> Kerakyatan yang dipimpin oleh hikmat kebijaksanaan
dalam permusyawaratan/perwakilan </li>
</ol>
</body>
</html>
Unordered list
Untuk membuat sebuah unordered list maka tambahkan skrip berikut,
Prodi Pada STIMIK IKMI
<ul>
<li> S1 Teknik Informatika </li>
<li> D3 Manajemen Informasi </li>
<li> D3 Komputer Akuntansi </li>
</ul>
Maka keseluruhan skrip akan menjadi,
<!DOCTYPE html>
<html>
<head>
<title>List pada HTML</title>
</head>
<body>
Pancasila
<ol>
<li> Kemanusiaan yang adil dan beradab</li>
<li> Kerakyatan yang dipimpin oleh hikmat kebijaksanaan
dalam permusyawaratan/perwakilan </li>
</ol>
Prodi Pada STIMIK IKMI
<ul>
<li> S1 Teknik Informatika </li>
<li> D3 Manajemen Informasi </li>
<li> D3 Komputer Akuntansi </li>
</ul>
</body>
</html>
Definition list
Untuk membuat sebuah definition list maka tambahkan skrip berikut,
<p>
<DL>
<DT>HTML</DT>
<DD>Bahasa yang digunakan untuk menyusun Web</DD>
<DT>HTTP</DT>
<DD>Protokol yang dipakai untuk mentransfer
HTML</DD>
</DL>
2. Latihan Soal Tabel
Tabel sederhana
Buatlah sebuah file dengan nama table.html kemudian tambahkan atau
sisipkan,
<!DOCTYPE html>
<html>
<head>
<title>Latihan Soal Tabel</title>
</head>
<body>
<center>
<table border = "1">
<caption>daftar harga kedelai</caption>
<tr><th>nama</th>
<th>harga</th>
</tr>
<tr>
<td>red flash</td>
<td>35.000</td>
</tr>
<tr>
<td>red fire</td>
<td>60.000</td>
</tr>
<tr>
<td>fannie munson</td>
<td>60.000</td>
</tr>
</table>
</body>
</html>
Tabel menggunakan atribut rowspan dengan menambahkan atau
menyisipkan,
<p>
<caption>daftar wilayah dan kota / rowspan</caption>
<tr>
<td rowspan = "3">jawa tengah</td>
<td>semarang</td>
</tr>
<tr>
<td>kudus</td>
</tr>
<tr>
<td>solo</td>
</tr>
</table>
Tabel dengan menggunakan atribut colspan, tambahkan atau
sisipkan skrip berikut,
<p>
<caption>daftar target / colspan</caption>
<tr>
<th colspan = "2">area: jawa tengah</th>
</tr>
<tr>
<td>semarang</td>
<td>15.000</td>
</tr>
<tr>
<td>kudus</td>
<td>11.000</td>
</tr>
</table>
1. Latihan soal list.html
Gambar 3. 4 hasil latihan soal modul 3 soal 1 list.html
2. Latihan soal table.html
Gambar 3. 5 hasil latihan soal modul 3 soal 2 tabel.html

c. Tugas Latihan
Buatlah sebuah tabel seperti berikut,
Gambar 3. 6 tugas latihan modul 3

Modul 4
1. Materi Pokok.
Penjelasan materi tentang Form pada HTML.
2. Pengantar.
Form digunakan untuk menerima inputan dari user dan memproses hasil
inputan tersebut ke server.

Siswa dapat memahami dan mengerti tentang tentang Form pada HTML.

Siswa paham dan mengerti tentang Form pada HTML.
5. Kegiatan Belajar
Penjelasan materi tentang Form pada HTML.
Pengertian Form
inputan tersebut ke server. Penggunakan form yang hanya menggunakan
HTML saja tidak akan terlalu berguna. From biasanya hanya berupa interface
yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan
bahasa pemograman seperti JavaScript atau PHP, dan disimpan di dalam
database MySQL.
Perintah atau tag yang digunakan adalah <form> dan diakhiri dengan
tag </form>. Field-field yang berada diantaranya digunakan untuk menentukan
ukuran jenis dari masing-masing input field. Berikut ini dibahas beberapa
elemen yang dapat disertakan dalam suatu form.
Form HTML merupakan bagian dari dokumen HTML yang memuat
konten biasa, markup, elemen spesial yang disebut controls dan label-label pada
controls tersebut. User biasanya “melengkapi” sebuah formulir dengan
memodifikasi controls tersebut (memasukan teks, memilih item menu, dll)
sebelum mengirimkan formulir untuk diproses.
Tag yang digunakan adalah <form> dengan atribut sebagai berikut,
method -> post, get : metode yang digunakan untuk mengirim data.
action -> URI : alamat file yang digunakan untuk mengolah data yang dikirim
oleh form.
name -> text : nama elemen.
Contoh penggunaan tag <form>,
<form name=“form1” method=“post” action=“data.php”>
…
…
</form>
Jenis-jenis Form Controls pada HTML
1. Buttons, sebuah tombol. Buttons terdiri dari 3 jenis:
– submit buttons, untuk mengirim data formulir.
– reset buttons, untuk mengembalikan formulir ke kondisi awal (initial
values).
– push buttons, tidak memilki fungi khusus, namun dapat digunakan saat
dikombinasikan dengan client-side script seperti javascript.
Tag untuk control button adalah <button> dengan attribut sebagai berikut,
Tabel 4. 1 atribut pada control button
Berikut adalah contoh tag <button>,
a. Untuk submit (mengirim data):
<button name=“sbm” value=“sbm” type=“submit”>Kirim</button>
b. Untuk reset (mengembalikan ke kondisi awal):
<button name=“rst” value=“rst” type=“reset”>Reset</button>
c. Tombol biasa (tidak memiliki fungsi khusus):
<button name=“bt” value=“bt” type=“button”>Tombol Biasa</button>
2. Input, jenis controls yang digunakan untuk memperoleh data teks dari user.
Terdiri dari 2 jenis text input:
- Menggunakan <input> untuk satu baris teks.
- Menggunakan <textarea> untuk mendapatkan beberapa baris ( >1 ) teks.
Tag untuk satu baris teks menggunakan <input>. Akan tetapi, pada
dasarnya tag <input> memiliki beberapa type. Attribut <input> sebagai
berikut,
Tabel 4. 2 atribut pada control input
Beriku adalah contoh tag <input>,

a. Jenis text:
<input type=“text” name=“teks” value=“” size=“5” />
b. Jenis radio:
<input type=“radio” name=“radio1” value=“a” />A
<input type=“radio” name=“radio1” value=“b” />B
c. Jenis Checkbox:
<input type=“checkbox” name=“a1” value=“A1” />A1
<input type=“checkbox” name=“a2” value=“A2” />A2
Perbedaan Radio dan Checkbox:
a. Radio digunakan untuk pilihan yang menghendaki hanya satu opsi yang
dipilih.
Contoh: golongan darah, jenis kelamin.
b. Checkbox, user dapat memilih beberapa opsi dari pilihan yang
digunakan. Contoh: hobi.
Tag <textarea>digunakan untuk memperoleh data teks lebih satu
baris. Attribut yang dapat digunakan pada textarea adalah sebagai berikut,
Tabel 4. 3 atribut pada tag <textarea>
Berikut adalah contoh penggunan <textarea>,

<textarea name = “alamat” cols=“30” rows=“5” />
3. Menu menawarkan user beberapa pilihan yang dapat dipilih. Dalam
praktiknya, memiliki kesamaan fungsi dengan radio atau checkbox. Tag
yang digunakan sebagai menu adalah <select>, sedangkan opsi(item) yang
menjadi pilihannya ditandai dengan tag <option>.
Tag <select> attribut yang dapat digunakan pada select adalah sebagai
berikut,
Tabel 4. 4 atribut pada tag <select>
Tag <option> attribut yang dapat digunakan pada option adalah sebagai
berikut,
Tabel 4. 5 atribut pada tag <option>

materi tentang form pada html..
a. Latihan Soal
Buatlah sebuah file dengan nama form.html kemudian tambahkan skrip
awal html yaitu,
<html>
<head>
<title> </title>
<head>
<body>
</body>
</html>
Kemudian tambahkan skrip form input text, text area, radio, checkbox, dan
select sebagai berikut,
<!DOCTYPE html>
<html>
<head>
<title>Latihan Form pada HTML</title>
</head>
<body>
<h2>Formulir Mahasiswa</h2>
<form method="get" action="lihat_form_get.php" enctype="text/plain">
<fieldset>
<legend>Kolom Biodata</legend>
<table width="300">
<tr>
<td width="100">Nama</td>
<td><input type="text" size="30"
name="name" accesskey="n" tabindex="1"/></td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td><textarea name="alamat" cols="30"
rows="5" accesskey="a" tabindex="2"></textarea></td>
</tr>
<tr>
<td valign="top">Golongan Darah</td>
<td>
<input type="radio" name="goldar"
value="A" tabindex="3" />A<br />
value="B" tabindex="3" />B<br />
value="AB" tabindex="3" />AB<br />
value="O" tabindex="3" />O<br />
</td>
</tr>
<tr>
<td valign="top">Hobby</td>
<td>
<input type="checkbox"
name="hobby1" value="Sepakbola" tabindex="4" />Sepakbola<br />
name="hobby2" value="Menulis" tabindex="5" />Menulis<br />
name="hobby3" value="Fotografi" tabindex="6" />Fotografi<br />
<input type="checkbox" name="hobby4" value="Nggaada"
tabindex="6" />Ngga Punya Hobby<br />
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Informasi Akademik</legend>
<table>
<tr>
<td>NIM</td>
<td><input type="text" maxlength="8"
size="10" name="nim" value="" /></td>
</tr>
<tr>
<td>Program Studi</td>
<td>
<select name="programstudi">
<option value="Teknik
Informatika">Teknik Informatika</option>
<option value="Manajemen
Informatika">Manajemen Informatika</option>
Komputer">Teknik Komputer</option>
<option value="Komputer Akuntansi">Komputer
Akuntansi</option>
</select>
</td>
</tr>
</table>
</fieldset>
<button name="submit" type="submit"

value="kirim">Kirim</button>
<button name="reset" type="reset">Reset</button>
</form>
</body>
</html>
Gambar 4. 1 hasil latihan soal form

Modul 5
1. Materi Pokok.
Penjelasan materi tentang Frame pada HTML.
2. Pengantar.
Frame digunakan untuk membagi suatu halaman web menjadi beberapa
bagian.

Siswa dapat memahami dan mengerti tentang tentang Frame pada HTML.

Siswa paham dan mengerti tentang Frame pada HTML.
5. Kegiatan Belajar
Pemrograman Web dan Desain Web 1 Modul 5 adalah sebagaii berikut,
Penjelasan materi tentang Frame pada HTML.
Pengertian Frame
1. Frame digunakan untuk membagi suatu halaman web menjadi beberapa
bagian.
2. Beberapa bagian tersebut dapat digunakan untuk berbagai keperluan.
Adapun cara untuk membuat frame pada halaman web adalah dengan
menggunakan perintah,
<frameset> Atribut Frame </frameset>
Berikut adalah atribut-atribut yang dapat digunakaan pada frame,
Tabel 5. 1 atribut pada frame
Untuk membuat sebauah halaman web yang memiliki frame biasanya

akan dibuat satu halaman web utama yang memiliki frame ditambah dengan
file-file HTML lainnya yang digunakan sebagai sumber untuk frame tersebut.

materi tentang dasar-dasar html. penjelasan materi tentang frame pada html..
a. Latihan Soal
Buatlah sebuah file html dengan nama frame1.html, kemudian
tambahkan/sisipkan,
<html>
<body bgcolor="#008080">
<h1 align="center">
<font face="Arial"> Frame Pertama / frame1.html </font>
</h1>
</body>
</html>
Buat kembali file html dengan nama frame2.html, kemudian
tambahkan/sisipkan,
<html>
<body bgcolor="#ff0080">
<h1 align="center">
<font face="Arial"> Frame Kedua / frame2.html </font>
</h1>
</body>
</html>
Buatlah file html dengan nama frame3.html, kemudian tambahkan/sisipkan,
<html>
<body bgcolor="#aa00ff">
<h1 align="center">
<font face="Arial"> Frame Ketiga / frame3.html </font>
</h1>
</body>
</html>
Kemudian mari kita satukan halaman – halaman tersebut menjadi
frame pada suatu halaman web dengan menggunkan atribut frame rows,
buatlah file html dengan nama belajarframe1.html kemudian
tambahkan/sisipkan,
<html>
<frameset rows="80,*">
<frame src="frame1.html" name="atas" scrolling="no" noresize>
<frame src="frame2.html" name="bawah">
</frameset>
<html>
Dimana frame set yang digunakan adalah rows (warna kuning), dan
menaggil halaman yang telah dibuat sebelumnya dengan frame src (warna
biru muda).
Atau dapat juga dengan menggunkan atribut frame cols, buatlah
file html dengan nama belajarframe2.html kemudian tambahkan/sisipkan,
<html>
<frameset cols="200,*">
<frame src="frame1.html" name="kiri" scrolling="no" noresize>
<frame src="frame2.html" name="kanan">
</frameset>
<html>
Dimana frame set yang digunakan adalah cols (warna kuning), dan
menaggil halaman yang telah dibuat sebelumnya dengan frame src (warna
biru muda).
Gambar 5. 1 hasil latihan soal frame menggunakan frameset rows
Gambar 5. 2 hasil latihan soal frame menggunakan frameset cols

c. Tugas Latihan
Buatlah sebuah tampilan frame menggunakan frameset rows dan frame cols
seperti berikut,
Gambar 5. 3 tugas latihan frame

Modul 6
1. Materi Pokok.
Penjelasan materi tentang Marquee pada HTML.
2. Pengantar.
Tag marquee diperkenalkan oleh Microsoft IE, jadi tag tersebut bukan
merupakan bagian dari HTML maupun XHTML.

Siswa dapat memahami dan mengerti tentang tentang Marquee pada HTML.

Siswa paham dan mengerti tentang Marquee pada HTML.
5. Kegiatan Belajar
Pemrograman Web dan Desain Web 1 Modul 6 adalah sebai berikut,
Penjelasan materi tentang Marquee pada HTML.
Pengertian Marquee
Tag marquee diperkenalkan oleh Microsoft IE, jadi tag tersebut bukan
merupakan bagian dari HTML maupun XHTML. Jika ingin membuat website
yang mendukung HTML/XHTML maka kita harus menghindari penggunaan
tag ini dan mencari alternatif pengganti dengan menggunakan flash, animasi
atau javascript. Untuk membuat teks berjalan digunakan tag <marquee> dan
untuk menuliskan tag marquee kedalam dokumen HTML adalah seperti
berikut,
<marquee> konten </marquee>
Untuk konten kode diatas dapat juga dimasukkan gambar, links, embed
flash, iframe dsb. Untuk pengaturan tampilan dari konten tersebut dapat
menambahkan atribut-atribut pada tag marquee.
<marquee atribut>konten</marquee>
Dimana atribut-atribut dari marquee tersebut adalah sebagai berikut,
width, height, direction, behavior, scrolldelay, scrollamount, loop, bgcolor,
hspace, vspace, style, title, id, class, datafld, dataformats, datasrc, language,
truespeed.
Atribut-atribut untuk javascript onclick, ondblclick, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup, onkeydown,
onkeypress, onkeyup, onfocus, onstart.

materi tentang marquee pada html..
a. Latihan Soal
Berikut adalah bagaimana implementasi dari marquee, pertama
buatlah file marquee.html, kemudian buatlah dan sisipkan penulisan html
seperti biasa yaitu,
<html>
<head>
<title> </title>
</head>
<body>
<body>
</html>
Standar tag marquee tanpa atribut.
Tambahkan / sisipkan pada bagian body,
<marquee>Standar tag marquee tanpa atribut</marquee>
Maka Skrip akan menjadi,
<html>
<head>
<title> Belajar Marquee pada HTML </title>
</head>
<body>
<marquee>Standar tag marquee tanpa atribut</marquee>
<body>
</html>
Marquee dengan atribut direction
<marquee direction="up">marquee direction="up"</marquee>
<marquee direction="right">marquee direction="right"</marquee>
<marquee direction="down">marquee direction="down"</marquee>
<marquee direction="left">marquee direction="left"</marquee>
<html>
<head>
</head>
<body>
<marquee direction="up">marquee
direction="up"</marquee>
<marquee direction="right">marquee
direction="right"</marquee>
<marquee direction="down">marquee
direction="down"</marquee>
<marquee direction="left">marquee
direction="left"</marquee>
<body>
</html>
Marquee dengan atribut behavior
<marquee behavior="alternate">marquee behavior="alternate"</marquee>
<marquee behavior="scroll">marquee behavior="scroll"</marquee>
<marquee behavior="slide">marquee behavior="slide"</marquee>
<html>
<head>
</head>
<body>
<marquee behavior="alternate">marquee
behavior="alternate"</marquee>
<marquee behavior="scroll">marquee
behavior="scroll"</marquee>
<marquee behavior="slide">marquee
behavior="slide"</marquee>
<body>
</html>
Marquee dengan atribut scrolldelay
<marquee scrolldelay="100">marquee scrolldelay="100"</marquee>
<html>
<head>
</head>
<body>
<marquee scrolldelay="100">marquee
scrolldelay="100"</marquee>
<body>
</html>
Marquee dengan atribut scrollamount
<marquee scrollamount="10">marquee scrollamount="10"</marquee>

<html>
<head>
</head>
<body>
<marquee scrollamount="10">marquee
scrollamount="10"</marquee>
<body>
</html>
Marquee dengan atribut width
<marquee width="75%">marquee width="75%"</marquee>
<marquee width="30%">marquee width="30%"</marquee>

<html>
<head>
</head>
<body>
<marquee width="75%">marquee
width="75%"</marquee>
<marquee width="30%">marquee
width="30%"</marquee>
<body>
</html>
Marquee dengan atribut height
<marquee height="75%">marquee height="75%"</marquee>
<marquee height="30">marquee height="30"</marquee>
<html>
<head>
</head>
<body>
<marquee height="75%">marquee
height="75%"</marquee>
<marquee height="30">marquee height="30"</marquee>
<body>
</html>
Marquee dengan atribut bgcolor
<marquee bgcolor="red">marquee bgcolor="red"</marquee>
<marquee bgcolor="#ddd">marquee bgcolor="#ddd"</marquee>
<html>
<head>
</head>
<body>
<marquee bgcolor="red">marquee
bgcolor="red"</marquee>
<marquee bgcolor="#ddd">marquee
bgcolor="#ddd"</marquee>
<body>
</html>
Marquee dengan atribut style
<p> <marquee style="padding:4px;font-
size:160%;color:#0C9;background:#000;">Belajar HTML, CSS, Tips,
Triks dan Tutorial<br />
<span style="font-size:86%;;color:#ff3;">Fadhil M Basysyar - STIMIK
IKMI Cirebon</span></marquee> </p>
<html>
<head>
</head>
<body>
<p><marquee style="padding:4px;font-
size:160%;color:#0C9;background:#000;">Belajar HTML, CSS, Tips,
Triks dan Tutorial<br />
<span style="font-size:86%;;color:#ff3;">Fadhil M
Basysyar - STIMIK IKMI Cirebon</span></marquee></p>
</body>
</html>
Marquee dengan beberapa atribut
<p style="background: #366;text-align:center;padding:4px;font-
size:160%;color:#0fc;">
<marquee direction="left" scrollamount="5" width="40%"><<< STIMIK
IKMI CIREBON</marquee>
<marquee direction="right" scrollamount="5" width="40%">STIMIK
IKMI CIREBON >>></marquee><br />
<marquee behavior="alternate" width="80" style="font-size:14px;color:
#fff;" >Fadhil M Basysyar</marquee></p>

<html>
<head>
</head>
<body>
<p style="background: #366;text-
align:center;padding:4px;font-size:160%;color:#0fc;">
<marquee direction="left" scrollamount="5"
width="40%"><<< STIMIK IKMI CIREBON</marquee>
<marquee direction="right" scrollamount="5"
width="40%">STIMIK IKMI CIREBON >>></marquee><br />
<marquee behavior="alternate" width="80" style="font-
size:14px;color: #fff;" >Fadhil M Basysyar</marquee></p>
<body>
</html>
Marquee dengan mouseover atribut
<marquee onmouseover="this.stop();" onmouseout="this.start();">Text ini
akan berhenti jika mouse menghampiri.</marquee>
<html>
<head>
</head>
<body>
<marquee onmouseover="this.stop();"
onmouseout="this.start();">Text ini akan berhenti jika mouse
menghampiri.</marquee>
<body>
</html>
Marquee dengan gambar
Tambahkan / sisipkan pada bagian body, kemudian copy-kan gambar
dengan nama 1.jpg hingga 5.jpg
<marquee>
<img src="1.jpg" width="100" height="100" alt="Gambar
1" />
2" />
3" />
4" />
5" />
</marquee>

<html>
<head>
</head>
<body>
<marquee>
1" />
2" />
3" />
4" />
5" />
</marquee>
<body>
</html>
Atau dapat, tambahkan / sisipkan pada bagian body jika ingin membatasi
wilayah kemunculan gambar, kemudian copy-kan gambar dengan nama
1.jpg hingga 5.jpg
<marquee scrollamount="2" width="200" >
1" />
2" />
3" />
4" />
5" />
</marquee>
<html>
<head>
</head>
<body>
<marquee scrollamount="2" width="200" >
1" />
2" />
3" />
4" />
5" />
</marquee>
<body>
</html>
Gambar 6. 1 Marquee
Gambar 6. 2 Marquee
Gambar 6. 3 Marquee
Gambar 6. 4 Marquee
Gambar 6. 5 Marquee
Gambar 6. 6 Marquee
Gambar 6. 7 Marquee
Gambar 6. 8 Marquee
Gambar 6. 9 Marquee
Gambar 6. 10 Marquee
Modul 7
1. Materi Pokok.
a. Penjelasan materi tentang CSS.
b. Penjelasan materi tentang CSS pada HTML.
2. Pengantar.
CSS singkatan dari Cascading Style Sheets. Secara Bahasa Indonesia
berarti lembaran gaya yang mengalir ke bawah.

a. Siswa dapat memahami dan mengerti tentang CSS.
b. Siswa dapat memahami dan mengerti tentang CSS pada HTML.

a. Siswa paham dan mengerti tentang CSS.
b. Siswa paham dan mengerti tentang CSS pada HTML.
5. Kegiatan Belajar
a. Penjelasan materi tentang CSS.
HTML dirancang tidak ditujukan untuk mendesain sebuah halaman
web, tapi hanya untuk menampilkan konten saja. Pada HTML versi 3.2,
sudah diperkenalkan tag <font> yang digunakan untuk mengatur tampilan
sebuah teks, seperti jenis font yang digunakan, warna, dan ukuran. Tapi
dengan adanya tag ini proses development jadi lebih sulit, karena tag ini
harus ditambahkan/disisipkan di banyak halaman untuk mendapatkan
hasil style yang sama. Bayangkan ketika anda sudah memiliki banyak
halaman web, belasan atau puluhan, kemudian diharuskan untuk mengedit
beberapa style saja, misalnya ukuran font dan ingin semua halaman
mendapatkan perubahan yang konsisten atau sama. Maka kita harus
memperbaharui semua tag tersebut di setiap halaman satu per satu.
Untuk menaggulangi hal tersebut maka dibuatlah CSS, yang
memisahkan style dari halaman web, sehingga antara konten pada HTML
dan desain tampilan pada dokumen CSS dapat dikerjakan di tempat yang
berbeda. Dengan kata lain, dokumen HTML cukup berisi konten saja, dan
dokumen CSS dapat disematkan pada setiap dokumen
HTML agar semuanya menampilkan style yang sama dan konsisten.
b. Penjelasan materi tentang CSS pada HTML
CSS biasanya disimpan di dalam sebuah file dengan format .css dan
disematkan di dalam dokumen HTML untuk memberikan style pada
halaman tersebut. Meski demikian, kita tetap dapat menambahkan sintaks
CSS langsung di dalam dokumen HTML, di dalam tag
<style>
</style>
untuk mengakomodir penerapan style yang hanya digunakan di
dalam dokumen tersebut. Kita juga dapat menyematkan sintaks CSS
langsung di dalam atribut style pada suatu tag HTML untuk
menerapkan style yang hanya digunakan pada tag itu saja.
Berikut adalah penulisan contoh penulisan atau sintaks CSS,
h1 { text-align: center; color: red; }
h1 adalah selector
{ text-align: center; color: red; } adalah deklarasi
text-align adalah property,
center adalah value,
color adalah property, dan
red adalah value.
Selector adalah bagian CSS untuk merujuk elemen HTML yang ingin
dikenakan style. Ada beberapa jenis selector yang dapat kita gunakan untuk
memudahkan pekerjaan styling kita pada CSS, seperti selector element,
selector class, dan selector id yang nanti akan dijelaskan lebih lanjut.
Pada penulisan atau sintaks elemen yang dirujuk oleh sintaks CSS
adalah <h1>. Elemen <h1> ini akan buat agar penulisannya rata tengah,
maka diberi property text-align dengan value center. Property dan
value CSS dipisahkan dengan tanda titik dua (:). Kita dapat memberikan
lebih dari satu property style dengan memisahkan antar property dengan
tanda titik koma (;). property dan value disimpan di dalam kurung
kurawal { dan }.

a. Latihan Soal
1. Selector Body.
<!DOCTYPE html>
<html>
<head>
<title>Selector Body</title>
<style type="text/css">
body {
font-family : Geneva, Arial;
font-size : 20px;
text-align: center;
color : white;
BACKGROUND-COLOR : green; }
</style>
</head>
<body>
Cie Belajar CSS
</body>
</html>
2. Selector Bebas.
<!DOCTYPE html>
<html>
<head>
<title>Selector Bebas</title>
gbawah{
TEXT-DECORATION : underline;
}
</style>
</head>
<body>
<gbawah>Cie Belajar CSS</gbawah>
</body>
</html>
3. Margin CSS
<!DOCTYPE html>
<html>
<head>
<title>Selector Id</title>
body {
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm;
}
</style>
</head>
<body>
Pengaturan Margin Halaman (1cm,2cm,1cm,2cm)
</body></html>
4. Padding CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
body {
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
</style>
</head>
<body>
Text ini berada di tengah halaman , karna di lakukan pengaturan
halaman dengan menggunakan padding atas 10%, kanan 20%,bawah
40%,dan kiri 20%.
</body>
</html>
5. Selector Class.
<!DOCTYPE html>
<html>
<head>
<title>Selector Class</title>
.right {
text-align : right
}
</style>
</head>
<body>
<h2 class="right">STMIK IKMI Cirebon</h2>
<p class="right">Pemrograman Web</p>
</body>
</html>
6. Selector Id.
<!DOCTYPE html>
<html>
<head>
<title>Selector Id</title>
#inidia {
font-size: 20px;
text-decoration: underline;
color: blue;
font-family: Comic Sans MS;
}
</style>
</head>
<body id="inidia">
Cie Belajar CSS
</body>
</html>
7. CSS Background.
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
body {
background-image:
url("if.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
Gambar 7. 1 css selector body
Gambar 7. 2 css selector bebas

Gambar 7. 3 css margin
Gambar 7. 4 css padding
Gambar 7. 5 css selector class

Gambar 7. 6 css selector id
Modul 8
1. Materi Pokok.
a. Penjelasan materi tentang div id dan div class.
b. Penjelasan materi tentang implementasi styling dan positioning pada
markup div.
2. Pengantar.
div menunjukkan division (divisi atau bagian), yaitu generik blok konten
yang dapat digunakan sebagai kontainer (penampung) untuk meng-group
beberapa elemen menjadi satu.

a. Siswa dapat memahami dan mengerti tentang div id dan div class.
b. Siswa dapat memahami dan mengerti tentang implementasi styling dan
positioning pada markup div.

a. Siswa paham dan mengerti tentang div id dan div class.
b. Siswa paham dan mengerti tentang implementasi styling dan positioning
pada markup div.
5. Kegiatan Belajar
Penjelasan materi tentang div id dan div class.
Dalam perancangan template HTML, kita bisa mengelompokkan
berbagai tag HTML dalam satu kesatuan tertentu menggunakan tag
<div>...</div>. Biasanya, tag ini digunakan untuk mengelompokkan bagian
header, content, sidebar, footer, dan lainnya secara terpisah namun dalam
satu tampilan tertentu. Sebagai contohnya, saat kita membuka sebuah
halaman website atau blog. Maka kita akan dipertemukan dengan tampilan
yang biasanya berisi logo, slogan, nama website, menu dan lainnya pada
bagian atas. Nah, elemen tersebut biasanya dikelompokkan dalam sebuah
tag bernama Division (Div).
Div biasanya digunakan untuk membuat layer yang akan
memudahkan kita untuk membuat layout sesuai dengan design yang di
inginkan. Untuk membuat layer kita menggunakan tag div dan diberi
atribut id ataupun class.
Gambar 8. 1 div
Pengertian div id dan div class

Setiap tag sebenarnya bisa saja diberikan atribut id ataupun class.
Namun penggunaan atribut ini secara lumrah digunakan
untuk tag pengelompokan yakni pada Div.
id : Atribut ini digunakan untuk penamaan elemen pada html yang
memiliki karakteristik yang unik atau berbeda. Tidak diperkenankan ada
dua elemen yang memiliki ID yang sama. Salah penggunaan ID, maka akan
berdampak pada hasil tampilan web itu sendiri.
Contoh penggunaan atribut id,
<div id=”menuku”>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
class : Digunakan untuk memberikan penamaan elemen yang
memiliki karakteristik atau struktur yang dapat digunakan secara berulang-
ulang dalam tag HTML. Sebagai contohnya, silahkan perhatikan atribut
Class pada script HTML berikut ini,
<div class=”menu”>
<ul>
<li class=”menu-on”>Home</li>
<li>About Us</li>
<li class=”menu-on”>Contact Us</li>
</ul>
</div>
Dalam script di atas, terdapat dua Class yang sama dalam tag HTML
yang berbeda. Biasanya contoh ini digunakan saat kita akan memberikan
style css tertentu pada setiap tag yang diberikan Class menu-on atau yang
lainnya.
materi tentang dasar-dasar html. penjelasan materi tentang div / division atau
pengelompokan pada html..
a. Latihan Soal
Buatlah sebuah file html dengan nama belajar-div.html kemudian
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Div</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="nav">
MENU
</div>
<div class="main">
<div class="content">
<h2>Content</h2>
<p>Content Web</p>
</div>
<div class="sidebar">
<h2>Righr Sidebar</h2>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<center><p>Copyright © 2017
fadhil.m.basysyar@gmail.com</p></center>
</div>
</div>
</body>
</html>
Kemudian buatlah file .css dengan nama style.css unutk mempercantik dan
mengatur tampilan dari halaman belajar-div.html dan tambahakan atau
sisipkan,
* {margin:0}
body {
font-family:arial,segoe ui;
}
.wrap {
width:1000px;
margin:0 auto;
}
.header {
width:auto;
background:#09C;
padding:20px;
color:#fff;
}
.clear {clear:both}
.nav {
width:auto;
background:#000;
padding:5px 20px;
color:#FFF;
}
.main {
width:100%;
background:#6F9;
}
.content {
float:left;
width:66%;
background:#FF9;
padding:2%;
min-height:400px;
}
.sidebar {
float:right;
width:26%;
background:#6F9;
padding:2%;
}
.clear {clear:both}
.footer {
width:auto;
height:auto;
padding:5px 10px;
background:#333;
color:#fff;
}
Gambar 8. 2 hasil latihan soal

Modul 9
1. Materi Pokok.
Pengenalan materi tentang Java Script..
2. Pengantar.
Java Script adalah bahasa script yang berdasar pada objek yang
memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi
pemakai pada suatu dokumen HTML. Dimana objek tersebut dapat berupa
suatu window, frame, URL, dokumen, form, button atau item yang lain. Yang
semuanya itu mempunyai properti yang saling berhubungan dengannya dan
masing-masing memiliki nama, lokasi, warna nilai dan atribut lain.

Siswa dapat memahami dan mengerti tentang materi pengenalan Java Script.

Siswa paham dan mengerti tentang materi pengenalan Java Script.
5. Kegiatan Belajar
a. Penjelasan tentang materi pengenalan Java Script.
Pengertian Java Script
1. Java Script merupakan bahasa pemrograman web pada sisi client
(client-side) dan diimplementasikan sebagai bagian dari web browser.
2. Java Script dikembangkan dari ECMAScript yang distandarisasi oleh
Ecma International dalam spesifikasi ECMA-2622 2 dan ISO/IEC 1626.
3. Java Script menggunakan syntax yang dipengaruhi oleh bahasa C.
4. Java Script berbeda dengan bahasa pemrograman Java, meskipun Java
Script banyak meng-copy aturan penamaan Java.
5. Java Script merupakan bahasa yang digunakan untuk mengembangkan
framework seperti: jQuery, Mootools, Raphael, Prototype, dll.
Penggunaan Java Script pada HTML, Java Script dapat disisipkan pada
halaman website dengan menggunakan tag <script> seperti berikut ini,
<script type=“text/javascript”> //kode-kode javascript di sini </script>
Contoh penggunaan Java Script adalah sebagai berikut, buatlah file
javascr1.html, kemudian tambahkan / sisipkan,
<html>
<head>
<title> Belajar JavaScript 1 </title>
<script type="text/javascript">
document.write("JavaScript 1 !");
</script>
</head>
<body>
document.write("Cie Belajar JavaScript......");
</script>
</body>
</html>
Java Script dapat juga ditulis pada file yang terpisah dari file html-
nya, kemudian disisipkan menggunakan tag <script> seperti pada kode di
bawah ini,
<script type=“text/javascript” src=“namafile.js”></script>
Misal, pada file1.js berisi script seperti berikut,
Sementara pada file2.js berisi script berikut,
Untuk menyisipkan/menyertakan file-file tersebut pada halaman web,

berikut ini merupakan cara yang digunakan adalah sebagai berikut, (ditandai
dengan kotak berwarna biru)
Beberapa fungsi umum yang digunakan dalam Java Script, diantaranya,
Di mana x1, x2 dan x3 = String, Integer atau Array. Fungsi ini

digunakan untuk menuliskan HTML atau kode javascript ke dokumen.
Berikut adalah contoh dari document.write()
document.write(“STIMIK IKMI Cirebon”);
document.write(“Teknik Informatika”);
document.write(“Fadhil M Basysyar”);
Sedangkan document.writeln(),
Sebenarnya kegunaan fungsi document.writeln() hampir sama dengan

document.write(), tapi fungsi ini menambahkan karakter newline di setiap
akhir statement.
b. Penjelasan tentang Variabel, Konstanta, Tipe Data, Concatenation
pada Java Script
Pengertian Variabel dan Konstanta
Variabel merupakan “tempat” untuk menyimpan informasi sementara.
Informasi yang disimpan dalam variabel dapat berubah sesuai dengan
kebutuhan. Sementara itu, konstanta juga merupakan tempat untuk
menyimpan informasi, hanya saja nilai pada konstanta (idealnya) tidak
dapat diubah. Pada JavaScript, kondisi ini tergantung pada kemampuan
browser, karena meskipun telah didefinisikan sebagai konstanta, nilainya
dapat berubah.
Aturan Penamaan Variabel dan Konstanta
1. Nama variabel bersifat case-sensitif, artinya huruf besar dan huruf kecil
berpengaruh. Contoh: ikmi, Ikmi dan IKMI merupakan 3 buah variabel
yang berbeda.
2. Nama variabel harus diawali dengan huruf, $ atau _ (underscore).
3. Nama variabel tidak boleh diawali angka.
4. Nama variabel tidak boleh menggunakan keywords (kata-kata kunci)
yang memiliki fungsi atau arti khusus dalam JavaScript. Contoh: for, if,
while, dll.
5. Variabel didefinisikan dengan var, sementara konstanta didefinisikan
dengan const.
Berikut adalah contoh penamaan pada Java Script,
Pengertian Tipe Data

Tipe data adalah suatu kelompok yang mempunyai jenis-jenis
tertentu. Dengan kata lain, tipe data adalah sebuah cara yang digunakan
untuk menentukan jenis suatu data tersebut, kata lain dari hal ini ialah
"deklarasi variabel". Dalam bahasa pemrograman mempunyai banyak
jenis-jenis tipe data yang bisa digunakan.
1. Tipe Data Numerik
Tipe Data Numerik merupakan tipe data yang berbentuk angka, dimana
terbagi menjadi tipe data integer dan real/float.
a. Integer
Integer merupakan tipe data yang berupa bilangan bulat. Adapun
rangenya adalah sebagai berikut,
Tabel 9. 1 tipe data integer
Ukuran
Tipe Data Tempat Rentang Nilai
Byte 1 byte 0 s/d +255
Shortint 1 byte -28 s/d +127
Integer 2 byte -32768 s/d 32767
Word 2 byte 0 s/d 65535
2147483648 s/d
Longint 4 byte 2147483647
b. Real/Float
Real/Float adalah bilangan pecahan atau berkoma. Adapun rangenya
Tabel 9. 2 tipe data real/float
Ukuran
Tipe Data Tempat Rentang Nilai
real 6 byte 2.9 x 10-39 s/d 1.7 x1038
single 4 byte 1.5 x 1045 s/d 3.4 x 1038
double 8 byte 5.0 x 10-324 s/d 1.7 x 10308
3.4 x 10-4932 s/d 1.1 x

extended 10 byte 104932
comp 8 byte -9.2x 1018 s/d 9.2x 1018
2. Tipe Data Karakter (Char)

Char Merupakan tipe data yang hanya menyimpan satu digit angka atau
huruf. Contoh penggunaannya adalah :
Karakter huruf dari ‘a’ hingga ’z’, ’A’ hingga ’Z’
Karakter angka dari ‘0’ hingga ’9’
3. Tipe Data String
String adalah tipe data yang berbentuk barisan karakter baik angka,
huruf maupun simbol.
Contoh string : "P3rk3n4lk4n, N4m4 $4y4 R@n66@_$@putr@."
4. Tipe Data Boolean
Boolean adalah tipe data logika, dimana hanya mengenal dua buah nilai
1 atau 0, True atau False, Gelap atau Terang, Benar atau Salah. Dalam
penggunaannya, Boolean hanya memakai memori paling sedikit.
Pengertian Concatenation
Concatenation merupakan operasi penggabungan string dengan
string, number atau boolean dalam bahasa pemrograman. Setiap bahasa
pemrograman memiliki operator concatenation yang berbeda. JavaScript
menggunakan operator “+” untuk melakukan operasi concatenation.
Penggunaan concatenation adalah menggunakan operator “+” yang akan
berfungsi sebagai operator concatenation, jika salah satu atau lebih operand
yang akan digabungkan berupa string.

tentang pengenalan materi Java Script,
a. Latihan Soal
<html>
<head>
<title> Belajar JavaScript 1 </title>
alert("JavaScript 1 !");
var nama = prompt("Nama Anda");
alert("Selamat Datang : " + nama);
var tutup = confirm("Tutup Halaman ?")

if (tutup == true){
alert("Anda menekan tombol OK")
}else{
alert("Anda menekan tombol Cancel")
}
</script>
</head>
<body>
</body>
</html>


Modul 10
1. Materi Pokok.
Penjelasan materi tentang Pengenalan JQuery.
2. Pengantar.
JQuery adalah java script library, jQuery mempunyai semboyan “write less,
do more”. JQuery dirancang untuk memperingkas kode-kode java script.

Siswa dapat memahami dan mengerti tentang Pengenalan JQuery.

Siswa paham dan mengerti tentang Pengenalan JQuery.
5. Kegiatan Belajar
Penjelasan materi tentang Pengenalan JQuery.
JQuery adalah pustaka Java Script lintas-platform yang didesain untuk
menyederhanakan client-side scripting pada HTML. Dewasa ini, JQuery
merupakan pustaka Java Script yang paling populer, dengan 65% pemasangan
dari 10 juta situs web dengan pengunjung tertinggi. JQuery adalah gratis, dan
bersifat kode sumber terbuka dibawah lisensi MIT.
Sintaks pada JQuery didesain untuk memudahkan dalam navigasi sebuah
dokumen, pembuatan animasi, penanganan event, dan pengembangan aplikasi
berbasis Ajax. JQuery juga menyediakan kemampuan bagi para pengembang
untuk dapat membuat plug-in pada pustaka Java Script ini. Ini memungkinan
mereka untuk membuat abstraksi pada interaksi dan animasi tingkat-rendah,
efek lanjutan, serta tampilan widget yang dapat dimodifikasi. Pendekatan
modular pada JQuery memungkinkan kita dalam pembuatan halaman web yang
dinamis dan aplikasi berbasis web yang baik.
Sekumpulan fitur inti JQuery yakni pemilihan elemen DOM (Document
Object Model), transferal dan manipulasi dimungkinkan berkat adanya selector
engine yang bernama Sizzle (sejak versi 1.3), yang membuat sebuah "gaya
pemrograman baru", memadukan antara algoritma dan data struktur DOM.
Gaya ini dipengaruhi oleh arsitektur Java Script lainnya seperti YUI v3 dan
Dojo, yang nantinya menstimulasi pembuatan standar Selector API.
Microsoft dan Nokia mem-bundle JQuery pada platform mereka.
Microsoft mengikut sertakannya dengan Visual Studio di dalam pembuatan
ASP.NET AJAX dan framework ASP.NET MVC miliknya. Sementara itu,
Nokia meng-integrasikannya di dalam platform pengembangan widget web
Run-Time. JQuery juga telah digunakan di MediaWiki sejak versi 1.16.
JQuery pada intinya merupakan pustaka untuk memanipulasi DOM
(Document Object Model). Dom adalah struktur-pohon representasi dari semua
elemen yang terdapat dalam sebuah halaman web, dan JQuery
menyederhanakan sintaks untuk mencari, menyeleksi, dan memanipulasi
elemen-elemen DOM tersebut. Sebagai contoh, JQuery dapat digunakan untuk
mencari elemen dalam dokumen dengan properti tertentu (mis: semua elemen
dengan tag h1), mengubah satu atau lebih atribut tersebut (mis: warna,
keterlihatan), atau membuatnya merespon sebuah event (mis: ketika mouse
diklik).
JQuery juga menyediakan sebuah paradigma untuk penanganan event
yang diluar pemilihan dan manipulasi elemen dasar DOM (Document Object
Model). Event assignment dan event callback function dapat dilakukan dengan
hanya satu langkah atau satu baris kode. JQuery juga bertujuan menggabungkan
fungsional Java Script yang serting digunakan (mis: fade in dan fade out ketika
menyembunyikan elemen, animasi dengan memanipulasi property CSS).
Keuntungan menggunakan JQuery adalah:
a. Mendorong pemisahan antara Java Script dan HTML: Pustaka JQuery
menyediakan sintaks yang sederhana utnuk penambahan penanganan event
pada DOM (Document Object Model) dengan hanya menggunakan Java
Scipt, bukan justru menambah event atribut HTML untuk memanggil fungsi
Java Script. Inilah yang mendorong para pengembang untuk memisahkan
kode Java Script dari markup HTML
b. Keringkasan dan kejelasan: JQuery mempromosikan keringkasan dan
kejelasan kode dengan fitur seperti chainable function dan shorthand
function names.
c. Mengeliminasi ketidak kompatibilitasan antar peramban (browser): Engine
Java Script pada setiap peramban pastilah sedikit berbeda antara satu
dengan yang lainnya, jadi kode Java Script yang berjalan pada sebuah
peramban, bisa jadi tidak berjalan pada peramban yang lainnya. Seperti
toolkit Java Script lainnya, JQuery menangani seluruh ketidak konsistenan
antar peramban dan menyediakan antar-muka konsisten yang dapat bekerja
pada berbagai peramban yang berbeda.
d. Ekstensibel: Event baru, elemen-elemen, dan method dapat dengan mudah
ditambahkan dan kemudian dapat digunakan ulang sebagai sebuah plugin.

materi tentang pengenalan JQuery.
a. Latihan Soal
Download JQuery pada alamat https://jquery.com/download/.
Buatlah sebuah folder kemudian simpan file JQuery pada folder tersebut.
Efek Java Script.
1. Efek hide and show, buatlah sebuah file .html dengan penamaan
hidenshow.html kemudian tambahkan / sisipkan,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$(".hide").click(function(){
$(".p1").hide();
});
$(".show").click(function(){
$(".p1").show();
});
});
</script>
</head>
<body>
<center>
<div style="width:500px;text-align:center;border:1px solid
#B1B6D6;background-color:#E2E6FE;">
<p class="p1">Ini adalah contoh penggunaan effect Show/Hide
menggunakan effect JQuery, anda dapat mengembangkannya sesuai
kemampuan anda. Saya hanya memberikan contoh dasarnya
saja.Silakan anda klik tombol untuk mengetahui perbedaannnya.</p>
<p style="background-color:#B1B6D6;border-top:1px solid

#777;">
<button class="hide">Hide</button>
<button class="show">Show</button></p>
</div>
</center>
</body>
</html>
2. Efek slide up and slide down, buatlah sebuah file .html dengan
penamaan slide.html kemudian tambahkan / sisipkan,
<!DOCTYPE html>
<html>
<head>
<script>
$('.hide').click(function(){
$('.p1').slideUp(500)
});
$('.show').click(function(){
$('.p1').slideDown(500)
});
});
</script>
</head>
<body>
<center>
<p class="p1">Ini adalah contoh effect Slide pada JQuery,
anda dapat mencoba langsung dengan meng-klik tombol di bawah ini
silakan anda pahami.</p>
#777;">
<button class="hide">SlideeUp</button>
<button class="show">SlideDown</button></p>
</div>
</center>
</body>
</html>
3. Efek fade in and fade out, buatlah sebuah file .html dengan penamaan
fade.html kemudian tambahkan / sisipkan,
<!DOCTYPE html>
<html>
<head>
<script>
$('.hide').click(function(){
$('.p1').fadeOut('slow')
});
$('.show').click (function(){
$('.p1').fadeIn('slow')
});
});
</script>
</head>
<body>
<center>
<p class="p1">Ini merupakan contoh penggunaan Fade pada
JQuery, sekali lagi silakan anda pelajari dan pahami bagaimana
perbedaan antara yang satu dengan lainnya.</p>
#777;">
<button class="hide">FadeOut</button>
<button class="show">FadeIn</button></p>
</div>
</div>
</center>
</body>
</html>
4. Efek animate, buatlah sebuah file .html dengan penamaan animate.html
kemudian tambahkan / sisipkan,
<!DOCTYPE html>
<html>
<head>
<script>
$('#klik').click(function(){
var div = $('.contoh');
div.animate({left:'1000px',opacity:'0.5'},2000);
div.animate({height:'250px',opacity:'0.5'},2000);
div.animate({width:'250px',opacity:'1'},2000);
div.animate({height:'100px',opacity:'0.5'},2000);
div.animate({width:'100px',opacity:'1'},2000);
div.animate({fontSize:'20px'});
});
$('#stop').click(function(){
$('.contoh').stop(true);
});
});
</script>
</head>
<body>
<center>
<button id="klik">Klik Stat</button> <button
id="stop">Stop</button><br />
</center>
<div class="contoh" style="width:100px; height:100px;
background-color:#E2E6FE; border:1px solid #B1B6D6;
position:relative; text-align: center;">Animate JQuery
</div>
</body>
</html>
5. Efek callback, buatlah sebuah file .html dengan penamaan callback.html
<!DOCTYPE html>
<html>
<head>
<script>
$('.callback').click(function(){
$(this).hide('slow',function(){
alert('Ini adalah fungsi CallBack JQ');
});
});
});
</script>
</head>
<body>
<center>
<p class="callback">Fungsi CallBack : Klik kalimat ini dan Kalimat
ini akan hiden!!!</p>
</center>
</body>
</html>
6. Efek chaining, buatlah sebuah file .html dengan penamaan
chaining.html kemudian tambahkan / sisipkan,
<!DOCTYPE html>
<html>
<head>
<script>
$('.chaining').click(function(){
$(this).css('color','#06C').slideUp(1000).slideDown(1000);
});
});
</script>
</head>
<body>
<center>
<p class="chaining">Fungsi Chaining : Klik Me!!!</p>
</center>
</body>
</html>
Gambar 10. 1 hasil latihan soal 1


Modul 11
1. Materi Pokok.
Penjelasan materi tentang pengenalan Bootstrap.
2. Pengantar.
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa
yang mengedapankan tampilan untuk mobile device (Handphone, smartphone
dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap
menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk
dikembangkan.

Siswa dapat memahami dan mengerti tentang pengenalan Bootstrap.

Siswa paham dan mengerti tentang pengenalan Bootstrap.
5. Kegiatan Belajar
Penjelasan materi tentang Pengenalan Bootstrap.
Bootstrap merupakan framework untuk membangun desain web secara
responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan
ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile
device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita
sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila di-
render oleh mobile browser maka tampilan dari web yang kita buat tidak bisa
beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis
ataupun statis.
Gambar 11. 1 icon pada bootstrap

Materi berisikan latihan mengenai kegiatan belajar yaitu penjelasan materi
pengenalan Bootstrap. Cara sederhana untuk memahami prinsip penggunaan
bootstrap
a. Download bootstrap, untuk segmen kali ini ekstrak file ke dalam folder
yang sudah kita sediakan.
b. Open folder, karena disitu baru tersedia directory css, fonts, dan js, maka
kita tambahkan index.html
a. Latihan Soal
Buatlah sebuah file dengan nama latihan.html kemudian tambahkan atau
sisipkan,
<!DOCTYPE html>
<html>
<head>
<title>My First Bootstrap project</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<header>
<hgroup>
<h1>Ini Adalah Project Pertama Menggunakan
Bootstrap</h1>
<h2>Menggunakan class css bootstrap</h2>
</hgroup>
</header>
</body>
</html>
Latihan membuat menu navbar beserta icon, buatlah sebuah file dengan
nama latihan2.html kemudian sisipkan atau tambahakan,
<!DOCTYPE html>
<html>
<head>
<title>My First Bootstrap project</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>

Modul 12
1. Materi Pokok.
Penjelasan tentang installasi XAMPP (Local Server).
2. Pengantar.
XAMPP merupakan singkatan dari Cross-Platform (X), Apache (A),
MySQL (M), PHP (P) dan Perl (P).

a. Siswa dapat melakukan installasi XAMPP (Local Server pada komputernya
masing-masing).
b. Siswa dapat menggunakan XAMPP (Local Server) untuk kepentingan
belajar dan membuat program berbasis web.

a. Siswa melakukan installasi XAMPP (Local Server pada komputernya
masing-masing).
b. Siswa menggunakan XAMPP (Local Server) untuk kepentingan belajar dan
membuat program berbasis web.
5. Kegiatan Belajar
a. Penjelasan tetang XAMPP (Local Server) dan cara installasi-nya.
XAMPP merupakan singkatan dari Cross-Platform (X), Apache (A),
MySQL (M), PHP (P) dan Perl (P). XAMPP dibuat selengkap itu dengan
tujuan memudahkan bagi para pengembang untuk membuat web server
lokal untuk tujuan pengujian. XAMPP menyediakan semua yang kita
butuhkan untuk membuat sebuah web server – server aplikasi (Apache),
database (MySQL), dan bahasa scripting (PHP). XAMPP juga cross-
platform, yang berarti bisa bekerja sama dengan baik di Linux, Mac dan
Windows. Karena sebagian besar penyebaran web server yang sebenarnya
(secara online) menggunakan komponen yang sama seperti XAMPP,
sehingga membuat transisi dari server lokal ke server online sangat mudah.
Langkah Installasi XAMPP
Adapun langkah – langkah melakukan installasi XAMPP adalah
sebagai berikut, pastikan tidak ada yang terlewatkan.
1. Download XAMPP.
Dalam modul ini saya menggunakan XAMPP Windows versi
3.2.1, mungkin sekarang sudah ada update terbaru dari XAMPP. Jika
anda menemukan XAMPP versi terbaru dari yang versi yang digunakan
pada modul ini, anda masih bisa mengikuti modul ini karena setahu saya
cara install XAMPP dari versi ke versi tidak ada perubahan yang
mencolok. XAMPP tersedia dalam tiga format file:
a. EXE
b. .7z – File 7zip
c. ZIP – Compressed file zip.
Dari ketiga format tersebut, yang paling mudah untuk diinstall
adalah yang format EXE, karena itu dalam tutorial ini akan
menggunakan format EXE.
Jika Anda ingin men-download yang versi 1.8.2, Anda dapat men-
download installer XAMPP versi tersebut dengan mengunjungi url
download berikut (warna kuning).
https://www.apachefriends.org/download.html
Gambar 12. 1 langkah installasi 1
2. Setelah file installer selesai di-download maka berikutnya adalah non-

aktifkan anti virus yang anda miliki baik anti virus tambahan atau pun
anti virus bawaan dari Sistem Operasi anda. Karena dapat menyebabkan
beberapa komponen dari XAMPP tidak dapat ter-install.
3. Jalankan installer XAMPP .exe yang telah anda download. (Khusus
untuk pengguna dengan Sistem Operasi Windows 7 anda akan melihat
jendela pop up, peringatan tentang User Account Control (UAC) yang
aktif pada sistem. Klik “OK” untuk melanjutkan instalasi.)
4. Setelah anda menjalankan installer XAMPP .exe maka akan tampil

seperti berikut, kemudian klik ‘Next’ untuk melanjutkan instalasi,
5. Setelah anda mengklik ‘Next’ maka, halaman berikutnya adalah anda

dapat memilih komponen yang ingin anda install. Pilih pilihan seperti
berikut dan klik ‘Next’,

6. Berikutnya pilih folder sebagai tempat XAMPP akan di-install-kan, di
folder ini akan menampung semua file aplikasi web kita, jadi pastikan
untuk memilih drive yang memiliki banyak ruang(space). Disini saya
menggunakan setting default yaitu ‘C:\xampp\’.
7. Berikutnya anda akan melihat promo untuk BitNami, sebuah toko

aplikasi untuk server perangkat lunak. Hapus kotak centang ‘Learn more
about BitNami for XAMPP’ seperti gambar berikut kemudian klik
‘Next’.
8. Setelah anda klik ‘Next’ maka sekarang Setup sudah siap untuk
menginstall XAMPP dan tunggu instaler untuk membongkar paket-nya
dan memasang komponen yang dipilih. Mungkin memakan waktu
beberapa menit. Nanti mungkin kita akan diminta untuk menyetujui
akses Firewall untuk komponen tertentu (seperti Apache) selama proses
instalasi silakan klik ‘Allow Access’.
9. Setelah semua ter-install maka proses installasi sudah selesai. Pilih
Kotak centang ‘Do you want to start the Control Panel now?’ untuk
membuka panel kontrol XAMPP, klik ‘Finish’ dan anda telah selesai
meng-install XAMPP.
b. Penjelasan tentang pengunaan XAMPP (Local Server)

XAMPP control panel memberi kita kontrol penuh atas semua
komponen XAMPP yang telah di Install. Kita dapat menggunakan Control
Panel untuk memulai / menghentikan modul yang berbeda, meluncurkan
Unix shell, membuka Windows explorer sampai melihat semua operasi
yang sedang berjalan di balik layar. Berikut ini adalah gambaran singkat
dari Control Panel. Untuk saat ini, kita hanya perlu tahu bagaimana untuk
memulai dan menghentikan server Apache.
Gambar 12. 8 keterangan penggunaan XAMPP
Keterangan dari nomor-nomor diatas adalah:

1. Nomor 1. Tempat Log semua aktifitas
2. Nomor 2. Alat untuk kontrol module XAMPP
3. Nomor 3. Menampilkan service yang sedang berjalan dibalik layar
4. Nomor 4. Membuka windows explorer
5. Nomor 5. Membuka Unix Shell
6. Nomor 6. Menampilkan semua proses dalam server
7. Nomor 7. Membuka panel konfigurasi
c. Pengujian XAMPP
Setelah anda melakukan instalasi XAMPP kemudian mempelajari
penggunaan dari XAMPP sekarang mari melakukan pengujian apakan
XAMPP yang anda install-kan sudah dapat dijalankan sebagai local server
dengan cara,
1. Pada Control Panel XAMPP, klik tombol ‘Start’ di bawah tulisan
‘Actions’ untuk modul Apache. Hal ini menginstruksikan XAMPP
untuk memulai webserver Apache.
2. Buka browser web dan pada address bar ketik: http://localhost atau
127.0.0.1.
Maka akan tampil, dan ini menunjukan bahwa anda telah berhasil
meng-install-kan XAMPP pada komputer anda.
Gambar 12. 9 pengujian XAMPP

Modul 13
1. Materi Pokok.
a. Penjelasan materi tentang dasar-dasar PHP.
b. Penjelasan materi tentang Variable pada PHP.
c. Penjelasan materi tentang Tipe Data dan Operator pada PHP.
d. Penjelasan materi tentang Konstanta pada PHP.
2. Pengantar.
PHP adalah singkatan dari "Hypertext Prepocessor", yaitu bahasa
pemrograman yang digunakan secara luas untuk penanganan pembuatan dan
pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.
PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994.

a. Siswa dapat memahami dan mengerti tentang dasar-dasar PHP.
b. Siswa dapat memahami dan mengerti tentang Variable pada PHP.
c. Siswa dapat memahami dan mengerti tentang Tipe Data dan Operator pada
PHP.
d. Siswa dapat memahami dan mengerti tentang Konstanta pada PHP.

a. Siswa memahami dan mengerti tentang dasar-dasar PHP.
b. Siswa memahami dan mengerti tentang Variable pada PHP.
c. Siswa memahami dan mengerti tentang Tipe Data dan Operator pada PHP.
d. Siswa memahami dan mengerti tentang Konstanta pada PHP.
5. Kegiatan Belajar
Pemrograman Web 1 Modul 13 adalah sebai berikut,
a. Penjelasan materi tentang dasar-dasar PHP.
Pengertian PHP
PHP adalah singkatan dari "Hypertext Prepocessor", yaitu bahasa
pemrograman yang digunakan secara luas untuk penanganan pembuatan
dan pengembangan sebuah situs web dan bisa digunakan bersamaan
dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun
1994. Pada awalnya PHP adalah singkatan dari "Personal Home Page
Tools". Selanjutnya diganti menjadi FI "Forms Interpreter". Sejak versi 3.0,
nama bahasa ini diubah menjadi "Hypertext Prepocessor" dengan
singkatannya "PHP". Berdasarkan survey Netcraft pada bulan Desember
1999, lebih dari sejuta website menggunakan PHP, di antaranya adalah
NASA, Mitsubishi, dan RedHat.
PHP sendiri adalah skrip yang menyatu dengan kode HTML dan
berjalan pada sisi server atau server side yang artinya semua sintaks yang
di masukan akan sepenuhnya dijalankan pada server sedangkan yang
dikirimkan kepada pengguna menggunakan web browser hanyalah hasilnya
saja. PHP pun dapat mengakses berbagai macam DBMS atau database
management system acces diantaranya MySql, Oracle dan masih banyak
lainnya.
Cara Kerja PHP
Gambar 13. 1 cara kerja PHP
Dapat dilihat pada gambar tersebut bahwa untuk membangun

sebuah situs web yang dinamis dan interaktif, maka ada beberapa hal yang
diperlukan yaitu Web Server, Database Server dan sebuah Skrip Interpreter
(dalam hal ini menggunakan PHP Interpreter). Adapun proses kerja yang
dapat dilihat pada gambar adalah sebagai berikut,
1. Client / pengguna melakukan request halaman web yang berisikan skrip
PHP.
2. Jika file yang di-request ditemukan, maka server akan meneruskannya
ke PHP Interpreter / Penerjemah PHP yang bekerja untuk menghasilkan
dokumen / halaman HTML berdasarkan skrip PHP. Jiks dalam skrip
tersebut terdapat permintaan terhadap database maka akan terjadi
proses query / pemanggilan data ke database server.
3. Dokumen HTML hasil interpretasi oleh PHP Interpreter dikembalikan
ke Web Server.
4. Web Server mengirimkan dokumen HTML (Respon) terhadap request
dari client / pengguna.
5. Web Browser akan menterjemahkan dokumen HTML yang dikirimkan
untuk dapat tampil pada layar Monitor / Display clien / pengguna.
Adapun cara penulisan PHP adalah sebagai berikut,
Cara pertama dalam menuliskan script PHP adalah dengan menggunakan,
1. <?
2. ….script PHP
3. ?>
Kemudian cara yang kedua dalam menuliskan script PHP adalah dengan
menggunakan,
1. <?php
2. ….script PHP
3. ?>
Dan cara yang ketiga dalam menuliskan script PHP adalah dengan
menggunakan,
1. <script language=”PHP”>
2. ….script PHP
3. </script>
Pemisah antar instruksi adalah tanda titik koma (;) dan untuk
membuat atau menambah komentar adalah (/*) komentar. Untuk
menuliskan script PHP ada dua cara yang sering digunakan yaitu
Embedded Script dan Non Embedded Script.
a. Embedded Script adalah script PHP yang disisipkan diantara tag-tag
dokumen HTML. Contoh penulisan dari Embedded Script sebagai
berikut,
1. <html>
2. <head>
3. <title>Embedded Script</title>
4. </head>
5. <body>
6. <?php
7. Echo “Hello word”;
8. ?>
9. </body>
10. </html>
b. Non Embedded Script adalah script PHP murni, tag HTML yang
digunakan untuk membuat dokumen merupakan bagian dari script PHP.
Contoh penulisan dari Non Embedded Script sebagai berikut,
1. <?php
2. echo”<html>”;
3. echo”<head>”;
4. echo”<title>Hello Word</title>”;
5. echo”</head>”;
6. echo”<body>”;
7. echo”<p>Hello</p>”;
8. echo”</body>”;
9. echo”</html>”;
10. ?>
Script yang dibuat dengan PHP disimpan dengan nama file dan diikuti
dengan ekstensi *.php, misalnya index.php. Bila script PHP diakses melalui
komputer local maka file PHP disimpan di folder htdocs (jika menggunakan
XAMPP) atau www (jika menggunakan WAMP) di web server.
Memulai Menggunkan PHP
Terdapat 3 hal yang diperlukan dalam membuat web menggunakan
PHP yaitu Web Server, Database Server dan PHP Interpreter. Web Server
yang digunakan diantaranya adalah Apache, Internet Information Services
(IIS), Personal Web Server (PWS) dll. Database Server yang dapat
digunakan diantaranya adalah MySql, Oracle, Interbase, Sql Server dll.
Setiap aplikasi tersebut dapat di-install secara terpisah, namun ada
sebuah paket yang telah menyediakan ketiga aplikasi tersebut pada sebuah
aplikasi yang disebut XAMPP kependekan dari X dan empat aplikasi yang
tersedia yaitu Apache, MySql, PHP, Perl. Dan untuk membuat suatu file
PHP anda memerlukan text editor seperti Notepad, Notepad++,Macromedia
DreamWeaver, PHP editor dll.
Dalam memulai PHP maka anda harus meng-install-kan XAMPP,
kemudian XAMPP harus dalam keadaan aktif dengan dengan meng-klik
Start Apache dan MySql (tanda panah merah).
Gambar 13. 2 memulai PHP

Kemudian jalankan web browser anda dan masukan link localhost/xampp,
maka akan tampil sebagi berikut dan XAMPP sudah dapat dijalankan pada local
komputer anda,
Gambar 13. 3 localhost
Website yang muncul sebenarnya berada pada folder,

C:\xampp\htdocs , jika anda meng-install XAMPP secara default. Sehingga
jika anda ingin membuat sebuah web maka simpan file tersebut pada folder
C:\xampp\htdocs.
Tag Pada PHP
Banyak cara untuk menyisipkan PHP dalam script HTML, ada
berbagai macam bentuk tag yang dapat digunakan, antara lain : • Cara I
<?php menandai awal tag ... ?> menandai akhir tag • Cara II <?
menandai awal tag ... ?> menandai akhir tag • Cara III <% menandai
awal tag ... %> menandai akhir tag Cara ini sama dengan tag pada ASP.
Opsi ini bisa dilakukan jika nilai asp_tags pada php.ini bernilai on. • Cara
IV <script language=”php”> menandai awal script ... </script> menandai
akhir script Namun untuk lebih mudahnya, kita akan menggunakan cara II
mulai sekarang dan seterusnya.
Ada kalanya kita sebagai pemrogram, karena banyaknya kode
program atau variabel dalam program, perlu menandai atau memberi
komentar pada program. Komentar pada program merupakan tulisan pada
program yang tidak dieksekusi. Pada PHP, ada 3 macam cara penulisannya,
1. /* komentar */ Tulisan apapun yang berada di antara ’/*’ dan ’*/’ akan
dianggap sebagai komentar. Cara seperti ini sangat berguna dan efisien
untuk pemberian komentar yang memakan banyak baris.
2. // komentar Tulisan di baris yang sama setelah ’//’ akan dianggap
sebagai komentar. Cara ini berguna untuk pemberian komentar singkat
yang tak lebih dari 1 baris saja.
3. # komentar Sama seperti ’//’, tulisan di baris yang sama setelah ’#’ akan
dianggap sebagai komentar. Cara ini berguna untuk pemberian
komentar singkat yang tak lebih dari 1 baris saja.
b. Penjelasan materi tentang Variable pada PHP.
Variabel adalah suatu pengenalan dalam program yang berfungsi
untuk menyimpan nilai secara sementara dan dapat diubah-ubah nilainya.
Untuk mendefinisikan variable pada PHP diawali dengan symbol dollar ($)
dan diikuti dengan nama pengenal (indentifier). Dan penulisannya adalah
sebagai berikut,
$nama_variabel = nilai;
Adapun aturan dalam penulisan membuat variable dalam PHP,
4. Tersusun dari karakter huruf, angka atau underscore ( _ ).
5. Tidak diperbolehkan mengandung spasi.
6. Karakter pertama nama pengenal haruslah dari karakter huruf atau
underscore.
7. Huruf besar dan kecil dibedakan atau sensitif.
Lingkup Variabel
1. Variabel global adalah variabel dan data di dalamnya dikenali oleh
seluruh bagian script. Suatu variabel yang dibuat pada bagian utama
script bukan pada bagian suatu fungsi, variabel-variabel ini akan bersifat
global. Untuk fungsi yang menggunakan variabel global, maka nama
variabel pada fungsi harus dideklarasikan global.
Contoh :
function test() {
global $var;
echo $var;
}
$var = 2;
test();
2. Variabel lokal merupakan variabel yang dideklarasikan pada suatu
fungsi, dan hanya dapat digunakan oleh fungsi tersebut.
3. Variabel Static Variabel static merupakan variabel lokal dalam fungsi
yang memungkinkan nilai terakhir di dalamnya dipertahankan. Sintaks
untuk deklarasi variabel static,
function namafungsi() {
static $namaVariabel = InitValue;
perintah perubaan $namaVariabel;
...
}
4. Variabel web merupakan variabel yang dihasilkan oleh PHP secara
otomatis, ketika ada request (permintaan) ke server yang mendukung
PHP. Contoh variabel web yaitu form isian dari user, baik dengan
metode POST maupun GET, selain itu ada pula SESSION, COOKIES
dan lain sebagainya. Topik ini akan dibahas nanti pada pengolahan data
form.
Untuk menampilakan data dapat digunakan print maupun echo.
Sintaks yang digunakan antara lain :
print(data); atau
print data; atau
echo(data); atau
echo data;
Kedua perintah baik print maupun echo adalah sama saja, tergantung
kebiasaan atau kesukaan anda dalam menggunakannya. Yang perlu
diperhatikan di sini adalah bahwa untuk data string gunakanlah aphostophe
(petik tunggal ‘) atau quote (petik ganda “). Namun untuk pencetakan
variabel, agar ditampilkan isinya, gunakan quote. Seperti pada contoh di
bawah ini.
Contoh :
<?php
$a = 10;
$b = “test”;
echo “Dengan quote -> ”;
echo “nilai $b ku $a ”;
echo “Dengan aphostrophe -> ”;
echo ‘nilai $b ku $a’
?>
Hasil dari script di atas adalah Dengan quote -> nilai test ku 10 Dengan
aphostrophe -> nilai $b ku $a.
c. Penjelasan materi tentang Tipe Data dan Operator pada PHP.
Tipe Data pada PHP
Berikut adalah tipe data yang dapat digunkan pada PHP,
1. Integer : terdiri dari bilangan positif dan negatif.
2. Float : angka pecahan.
3. String : terdiri dari huruf dan teks dengan tanda “ atau ‘
4. Objek : terdiri dari method atau data yang memiliki objek.
5. Array : sekumpulan data yang sejenis.
6. Boolean : terdiri dari pernyataan benar atau salah.
Operator pada PHP
Operator merupakan suatu tool/alat untuk keperluan manipulasi data.
Operator dapat dibedakan menjadi,
1. Operator Aritmetika
Tabel 13. 1 operator aritmatika
2. Operator String
Menggunakan ’.’ (tanda titik)
$a = "Hello ";
$b = $a . "World!";
// sekarang $b berisi "Hello World!"
Menggunakan ‘.=’ (tanda titik dan sama dengan)
$a = "Hello ";
$a .= "World!";
// sekarang $a berisi "Hello World!"
3. Operator Increment/Decrement
Tabel 13. 2 operator inc dan dec
4. Operator Logika
Tabel 13. 3 operator logika
5. Operator Ternary
Menggunakan tanda ’?’, dengan syntaks,
(ekspresi1) ? (ekspresi2) : (ekspresi3)
Operator ternary malakukan pengujian pada ekspresi1, jika hasilnya
TRUE, maka ekspresi 2 yang dijalankan, jika hasil ekspresi1 FALSE,
maka ekspresi3 yang dijalankan.
Contoh,
<?php
$a = 2;
$hasil = ($a<4) ? ($a*2) : ($a*3) echo ”$hasil”;
?>
Dari contoh di atas, maka hasil yang terlihat adalah 4, namun jika nilai
$a diganti 5, maka hasilnya adalah 15.
6. Operator Perbandingan
Tabel 13. 4 operator pembanding
7. Operator Assignment
Contoh,
$a = 4; //$a diisi dengan nilai 4
$a += 5; //sama dengan $a = $a + 5;
8. Operator Kontrol Error dengan memberikan tanda ’@’ pada ekspresi
PHP, maka pesan error yang dihasilkan oleh suatu ekspresi akan
diabaikan. Jika fitur track_error enable, maka setiap pesan error yang
diterima akan disimpan dalam variabel global $php_errormsg.
Contoh,
<?php
$my_file = @file ('non_existent_file')
or die ("Failed opening file: error was '$php_errormsg'");
?>
9. Operator Eksekusi hanya bekerja di lingkungan sistem operasi Linux
dan Unix, dengan web server yang digunakan adalah Apache. Operator
eksekusi menggunakan karakter `...perintah...` (perintah di antara
backticks), dimana hasilnya ditampung pada sebuah variabel dan
kemudian ditampilkan di halaman web.
d. Penjelasan materi tentang Konstanta pada PHP
Konstanta adalah suatu nilai dalam program. Konstanta tidak dapat
dirubah sewaktu program dijalankan, jika hal tersebut dilakukan maka akan
menyebabkan program error. Berikut adalah cara mendefinisikan
konstanta,
define( namapangenal,nilai_konstanta);
tentang dasar-dasar php. penjelasan materi tentang variable pada php, tipe data
pada php dan konstanta pada php.
a. Latihan Soal
1. Buatlah sebuah folder pengenalanphp kemudian buatlah file php
dengan nama belajarphp.php pada folder pengenalanphp. Dan
tambahkan / sisipkan,
<html>
<head>
<title> Pengenalan PHP </title>
</head>
<body>
<?php
echo 'Ciee Belajar PHP :D';
?>
</body>
</html>
2. Buatlah sebuah file pada folder yang sama dengan nama variable.php
<html>
<head>
<title> Pengenalan PHP Variable </title>
</head>
<body>
<?php
$nama = "Fadhil M Basysyar";
print("Nama : $nama");
?>
</body>
</html>
3. Buatlah sebuah file pada folder yang sama dengan nama konstanta.php
<html>
<head>
<title> Pengenalan PHP - Konstanta </title>
</head>
<body>
<?php
// Konstanta Judul = "Menghitung Luas Lingkaran"
define("judul","Menghitung Luas Lingkaran");
define("pi",3.14);
echo judul;
$r=21;
echo "<br> Jari-jari lingkaran adalah $r cm<br> \n";
$luas=pi*$r*$r;
echo "Maka Luas Lingkaran adalah $luas cm";
?>
</body>
</html>

Modul 14
1. Materi Pokok.
Penjelasan materi tentang Percabangan pada PHP.
2. Pengantar.
Percabangan adalah suatu mekanisme dari pernyataan yang akan
dikerjakan atau tidak, dan hal tersebut tergantung pada kondisi dari rumusan
yang dibuat.

Siswa dapat memahami dan mengerti tentang Percabangan pada PHP.

Siswa paham dan mengerti tentang Percabangan pada PHP.
5. Kegiatan Belajar
Penjelasan materi tentang Percabangan pada PHP.
Percabangan adalah suatu mekanisme dari pernyataan yang akan
dikerjakan atau tidak, dan hal tersebut tergantung pada kondisi dari rumusan
yang dibuat. Dalam bahasa pemrograman PHP di kenal dengan 2 cara
percabangan yaitu If dan Switch. Kebanyakan orang lebih menyukai
percabangan dengan menggunakan If karena variasinya lebih banyak tetapi
sebenarnya menggunakan Switch pun juga dapat dibuat banyak variasi bahkan
untuk skrip menggunakan Switch jauh lebih sederhana.
Pengertian Percabangan if
Percabangan menggunakan If ini secara garis besar sama saja hanya dalam
peng-kondisian-nya yang dibedakan. Berikut ini adalah bentuk percabangan
menggunakan If dengan 1 kondisi dan 1 statement. Skrip If berikut ini adalah
skrip yang paling sederhana hanya akan menyatakan nilai dari kondisi adalah
benar jika kondisi itu salah maka tidak akan muncul nilainya,
<?php
if (kondisi){
statement yang dijalankan jika kondisi benar
}
?>
Pengertian Percabangan if … else
menggunakan If dengan 1 kondisi dan 2 statement. Skrip percabangan If berikut
ini adalah skrip yang akan menampilkan nilai baik itu bernilai salah maupun
bernilai benar, karena jika bernilai benar maka statement ke-2 yang akan
ditampilkan. Berikut adalah penulisan dari percabangan If … else
<?php
if (kondisi){
jika kondisi benar maka akan menjalankan statement 1
}else{
jika kondisi salah maka akan menjalankan statement 2
}
?>
Pengertian Percabangan if … elseif … else
menggunakan If dengan banyak kondisi dan banyak statement. Skrip
percabangan If berikut ini adalah skrip yang akan menampilkan nilai baik itu
bernilai salah maupun bernilai benar, karena jika bernilai benar maka statement
ke-n yang akan ditampilkan. Berikut adalah penulisan dari percabangan If …
elseif … else,
<?
if (kondisi 1){
jika kondisi 1 benar jalankan statement 1
}else if (kondisi 2){
jika kondisi 2 benar jalankan statement2
}else if (kondisi 3){
jika kondisi 3 benar jalankan statement3
}else{
jika kondisi tidak ada yang benar jalankan statement ini
}
?>
Pengertian Percabangan Switch Case
Percabangan menggunakan switch .. case ini secara garis besar adalah
model percabangan dengan menggunakan switch hanya ada 1 bentuk syntax
jadi menggunakan berapa pun kondisi dan statement bentuknya akan sama
tinggal anda sesuai dengan kebutuhan. Berikut ini adalah bentuk percabangan
menggunakan switch .. case dengan banyak kondisi dan banyak statement.
Skrip percabangan switch .. case berikut ini adalah skrip yang akan
menampilkan nilai baik itu bernilai salah maupun bernilai benar, karena jika
bernilai benar maka statement ke yang akan ditampilkan. Berikut adalah
penulisan dari percabangan switch .. case,
switch (nilai_variable){
case kondisi 1:
jika kondisi 1 terpenuhi maka akan dijalankan statement 1 ;
break;
case kondisi 2:
jika kondisi 2 terpenuhi maka akan dijalankan statement 2 ;
break;
}
materi tentang percabangan pada PHP.
a. Latihan Soal
1. Buatlah file php didalam folder pada htdocs dengan nama cabangif.php,
berikutnya tambahkan / sisipkan,
<html>
<head>
<title> Pengenalan PHP 3 - Cabang</title>
</head>
<body>
<?php
$r=1994;
if($r==1994){
echo "Tahun Lahir Saya";
}
?>
</body>
</html>
2. Buatlah file php didalam folder pada htdocs dengan nama
cabangifelse.php, berikutnya tambahkan / sisipkan,
<html>
<head>
</head>
<body>
<?php
$kota = "Jakarta";
if($kota== "Jakarta"){
echo "ini adalah kota kelahiran saya";
}else{
echo "saya tidak lahir disana";
}
?>
</body>
</html>
Namun jika anda mengisikan variable kota dengan nama yang lain
seperti menggantinya menjadi Bandung (warna kuning) maka akan
tampil statement kedua yaitu “saya tidak lahir disana” seperti berikut,
<html>
<head>
</head>
<body>
<?php
$kota = "Bandung";
if($kota== "Jakarta"){
echo "ini adalah kota kelahiran saya";
}else{
echo "saya tidak lahir disana";
}
?>
</body>
</html>
cabangifelseif.php, berikutnya tambahkan / sisipkan,
<html>
<head>
</head>
<body>
<?php
$nilai=75;
if($nilai >= 80){
echo "Indeks Nilai Anda A";
}else if ($nilai >= 65 && $nilai <= 79){
echo "Indeks Nilai Anda B";
}else if ($nilai >= 45 && $nilai <= 64){
echo "Indeks Nilai Anda C";
}else{
echo "Mari Belajar Lebih Giat";
}
?>
</body>
</html>
cabangswitchcase.php, berikutnya tambahkan / sisipkan,
<html>
<head>
</head>
<body>
<?php
$kendaraan='mobil';
switch ($kendaraan){
case 'motor':
echo "ini adalah kendaraan roda 2";
break;
case 'mobil':
echo "ini adalah kendaraan yang rodanya 4 ada juga
yang rodanya 6 sih....";
break;
case 'kereta':
echo "ini adalah kendaraan yang roda
banyaaaaak......";
break;
}
?>
</body>
</html>
Gambar 14. 1 hasil latihan 1
Gambar 14. 2 hasil latihan 2.1
Gambar 14. 3 hasil latihan 2.2


Modul 15
1. Materi Pokok.
Penjelasan materi tentang Perulangan pada PHP.
2. Pengantar.
Perulangan atau dalam bahasa inggrisnya adalah loop, atau looping.
Dalam setiap bahasa pemrograman tentunya memiliki perulangan, terutama
perulangan pada php. Hal yang paling wajib dikuasai dalam bahasa
pemrograman yaitu perulangan. Banyak algoritma yang memerlukan proses
perulangan atau looping sebagai terwujudnya sarana algoritma seperti
menggunakan array, searching, sorting dan lain sebagainya.

Siswa dapat memahami dan mengerti tentang Perulangan pada PHP.

Siswa memahami dan mengerti tentang Perulangan pada PHP.
5. Kegiatan Belajar
Penjelasan materi tentang Perulangan pada PHP.
Pengertian Perulangan
Seperti namanya perulangan atau looping yaitu digunakan untuk
mempermudah melakukan proses yang berulang-ulang sesuai dengan
perintahnya. Contoh sederhananya adalah, apabila kita mengurutkan angka 1
sampai 100, maka hal yang paling mudah dalam pemrograman ialah dengan
menggunakan perulangan, yaitu dengan Algoritma menambahkan nilai 1 pada
setiap angka yang diulang. Misalnya dimulai dari angka 1, ditambah dengan 1
maka menghasilkan angka 2, dan seterusnya hingga mencapai 100.
Perulangan For pada PHP
Perulangan for digunakan untuk mengulang suatu pernyataan sebanyak
yang kita mau. Penggunaan perulangan for pada php yaitu dengan menentukan
kondisi jumlah atau nilai yang ingin diulang,
“variabel = nilai; variabel < batas; variabel++”
Berikut adalah penulisan yang umum digunakan untuk perulangan for,
for (kondisi1; kondisi2; kondisi3){
statement ; }
Dapat dilihat bahwa kondisi1 adalah inisialisai atau penentu dari nilai
awal, kondisi2 adalah perumusan kondisi dan kondisi3 adalah operasi penaikan
atau penurunan dari nilai awal.
Perulangan While pada PHP
Pernyataan while akan melakukan permroseskan terhadap penyataan yang
berdasarkan dari kondisi. Berikut adalah penulisan yang umum digunakan
untuk perulangan while,
while (kondisi) {
statement ; }
Adapun prinsip kerja dari perulangan while adalah pernyataan while akan
menguji kondisi yang dirumuskan, jika bernilai benar atau true maka statemen
yang berada dibawahnya akan dikerjakan sekali lagi. Namun jika kondisi
bernilai salah atau false maka perulangan akan berhenti.
Perulangan Do While pada PHP
Pernyataan do while memiliki prinsip kerja yang sama dengan pernyataan
while, hanya saja pernyataan do while akan menguji kondisi pada setiap akhir
pada perulangan. Berikut adalah penulisan yang umum digunakan untuk
perulangan do while,
do {
statement; }
while (kondisi);
Adapun prinsip kerja perulangan do while adalah akan mengerjakan
statement tanpa adanya syarat atau kondisi setelah statement dikerjan maka
barulah akan menguji syarat atau kondisi, jika kondisi bernilai benar atau true
maka program akan mengeksekusi statement sekali lagi dan bergitu seterusnya
hingga syarat atau kondisi akan bernilai salah atau false maka perulangan akan
berhenti.
Perulangan Foreach pada PHP
Jenis perulangan foreach pada PHP ini adalah yang paling berbeda dari
perulangan sebelumnya, yaitu perulangan foreach pada PHP ini berguna untuk
memecah isi array, atau lebih sederhananya ialah untuk menyederhanakan nilai
array agar dapat dibaca dengan mudah. Berikut adalah penulisan foreacch dan
contohnya,
foreach(Array as Key => Value){
# Code...
}
Contoh foreach,
<?php
$array = array('PHP', 'Python', 'Ruby');
foreach($array as $value){
echo $value . '<br />';
}
?>
tentang Perulangan pada PHP.
a. Latihan Soal
1. Perulangan menggunakan For
<?php
for($i = 1; $i <= 9; $i++){
echo $i . '<br />';
}
?>
Penjelasan,
$i = 1
Variabel $i memiliki nilai 1.
$i <= 9
Lalu disini akan melakukan batas perulangan variabel $i dengan
menggunakan operator perbandingan pada php.
$i++
Selanjutnya disinilah nilai $i akan berubah dengan menambahkan setiap
angka dimulai dari 1 ditambah dengan 1 dengan menggunakan metode
post-increment, tetapi looping pertama tidak akan terjadi proses
penambahan dan angka 1 akan tetap dicetak sebagai angka 1.
2. Perulangan menggunakan While
<?php
$i = 1;
while($i <= 9){
echo $i . '<br />';
$i++;
}
?>
Perulangan while mirip dengan for, namun untuk menentukan
kondisinya hanya dengan menggunakan operator perbandingan saja,
seperti pada contoh pada nomor 2 yaitu $i <= 9 adalah batas.
3. Perulangan menggunakan Do While
Perbedaan yang mendasar perulangan Do While dengan While adalah
dimana yang dilakukan adalah dengan mengeksekusi pernyataan
terlebih dahulu, setelah itu membaca kondisi.
<?php
$i = 1;
do{
echo $i . '<br />';
$i++;
}
while($i <= 9);
?>
Sebenarnya yang menentukan perhitungan adalah posisi operator post-
increment ($i++), yaitu variabel akan dicetak terlebih dahulu baru
ditambahkan nilai 1. Namun jika posisi post-increment ($i++) berada
diatas perintah cetak maka yang terjadi adalah program akan terlebih
dahulu menambahkan nilai satu pada variabel $i, seperti berikut,
<?php
$i = 1;
do{
$i++;
echo $i . '<br />';
}
while($i <= 9);
?>
Maka terjadi perubahan proses, yaitu nilai akan ditambahkan lebih dulu
maka akan menghasilkan angka 2 – 10, berbeda dengan sebelumnya.
Sehingga dapat disimpulkan bahwa hasil dari proses adalah bergantung
pada posisi operator post-increment.
4.
Gambar 15. 1 hasil latihan soal 1 dan 2

c. Tugas Latihan
Buatlah perulangan yang dan menghasilkan tampilan sebagai berikut.
Gambar 15. 3 tugas latihan

Modul 16
1. Materi Pokok.
Penjelasan materi tentang Array pada PHP.
2. Pengantar.
Array adalah sekumpulan elemen yang memiliki tipe data yang sama.

Siswa dapat memahami dan mengerti tentang Array pada PHP.

Siswa paham dan mengerti tentang Array pada PHP.
5. Kegiatan Belajar
Penjelasan materi tentang Array pada PHP.
Pengertian Array
Array adalah sekumpulan elemen yang memiliki tipe data yang sama. Di
dalam array, data tersimpan dengan menggunakan indeks untuk memudahkan
pencarian pada data. Indeks pada array dapat berupa angka atau pun huruf.
Index yang berbentuk angka disebut juga indexed array atay vector array.
Sedangkan indeks yang berbentuk huruf atau string disebut juga associative
array.
Agar mempermudah anda dalam memahamim array, maka array dapat
digambarkan seperti table berikut yang memiliki dua buah kolom,
Gambar 16. 1 tabel array 1
Dapat dilihat pada table bahwa yang dimksud dengan indexed atau pun
associative bukan lah sini atau value-nya namun key atau nama atributnya. Dan
value dari array juga dapat berbentuk array kembali (menjadi key atau nama
atribut dari array yang lain),
Gambar 16. 2 tabel array 2
Dapat dilihat bahwa value Mobil dan Motor menjadi key atau nama atribut dari
array mobil dan array motor, bentuk ini disebut Array Multidimensi atau
Multidimensional Array.
Berikutnya bagaimana cara penulisan array pada PHP, Array pada PHP
dapat ditulis dengan dua cara, yaitu menggunakan fungsi array() atau cukup
menggunakan [],
<?php
$kendaraan = array();
?>
Atau dengan,
<?php
$kendaraan = [];
?>
Dapat dilihat bahwa cara penulisan yang kedua menggunakan kurung [] mulai
dapat digunakan mulai PHP 5.4 keatas, sehingga jika kita yakin kode yang kita
buat akan dijalankan di PHP 5.4 keatas, maka lebih baik menggunakan kurung
[].
Jenis Array (Indexed dan Associative Array)
Berdasarkan key-nya, array pada PHP dapat dibagi menjadi dua jenis
yaitu Indexed Array (array berindex) dan Associative Array. Indexed array
berarti bahwa array tersebut memiliki key berupa angka yang berurutan, contoh
seperti pada gambar atau table pertama.
$kendaraan = ['Mobil', 'Sepeda', 'Motor', 'Truk', 'Bus'];
Pada tabel tersebut, index (key) dimulai dari angka 0, 1, dst… dimana 0 untuk
Mobil, 1 untuk Sepeda, dst. Angka awal index ini dapat kita ubah menjadi satu,
seperti pada contoh berikut,
$bulan = [1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei'];
Disamping itu anda juga dapat mendefinisikan indeks-nya sendiri, seperti pada
contoh berikut,
$kendaraan = ['Mobil', 'Motor', 5 => 'Sepeda', 'Truk', 'Bus'];
Sedangkan associative array berarti bahwa kita mendefinisikan sendiri
key atau nama atribut dari array tersebut, seperti pada gambar 1 tabel 1,
$user = [ 'id' => 786, 'pass' => 123, 'role' => 'admin' ];
Dapat dilihat bahwa, PHP menggunakan tanda => untuk memasangkan
key atau nama atribut dengan value-nya. Array selalu terdiri dari pasangan key
atau nama atribut dan value baik untuk associative array maupun indexed array.
Istilah key ini penting karena akan digunakan untuk memanggil value dari
array. Key atau nama atribut selalu berada disebelah kiri dan value selalu berada
disebelah kanan, pada contoh variabel $user diatas, yang berfungsi sebagai key
adalah id, pass, dan role, sedangkan yang berfungsi sebagai value adalah: 786,
123, dan admin.
Array Multidimensi
Array bisa memilki kedalaman yang tidak terbatas, yang sering disebut
array multidimensi, bisa dua dimensi, tiga dimensi, dst… Multidimensi disini
dapat dikatakan array didalam array, maksudnya adalah value dari suatu array
menjadi indeks dari array yang lain, sehingga value ini akan berbentuk array
juga. Kita terjemahkan array multidimensi seperti pada tabel sebelumnya,

materi tentang array pada php.
a. Latihan Soal
1. Indexed Array
Buatlah sebuah foldel pada directory C:\xampp\htdocs kemudian
tambahkan sebuah file .php dengan nama indexedarray.php dan
<html>
<head>
<title> Belajar Array </title>
</head>
<body>
<?php
$kendaraan = array("Mobil", "Sepeda", "Truk", "Motor",
"Bus");
echo "Jenis Kendaraan Darat Adalah " . $kendaraan[0] . ", "
. $kendaraan[1] . ", " . $kendaraan[2] . ", ". $kendaraan[3] . " dan ".
$kendaraan[4] . ".";
echo "<br> dan Jenis Kendaraan Masal Adalah " .
$kendaraan[4] . "." ;
?>
</body>
</html>
Dapat dilihat bahwa array mulai dari mobil hingga bus memiliki
key atau nama atribut dari 0 hingga 4 sama dengan tabel pertama pada
gambar pertama, dan untuk melakukan pemanggilan dari data array
anda hanya cukup memanggil nomor urut / key atau nama atributnya
saja.
2. Associative Array
Buatlah sebuah file associarray.php kemudian tambahkan / sisipkan,
<html>
<head>
</head>
<body>
<?php
$user = [ 'id' => 786, 'pass' => 123, 'role' => 'admin' ];
echo "Id anda Adalah " . $user['id'] . "<br>Password anda
adalah " . $user['pass'] . "<br>dan Hak Akses anda adalah " .
$user['role'] .".";
?>
</body>
</html>
Dapat dilihat bahwa anda dapat mendefinisikan key atau nama
atribut dari array yang anda miliki seperti id, pass, role dan hal ini sama
dengan table 2 pada gambar pertama, dan untuk melakukan
pemanggilan dari data array anda hanya cukup memanggil key atau
nama atributnya saja.
3. Array Multidimensi
Buatlah sebuah file multidimensi.php kemudian tambahkan / sisipkan,
<html>
<head>
</head>
<body>
<?php
$kendaraan = [
['Mobil' => ['merk' => 'Toyota', 'type' => 'Vios',
'year' => '2016']], // value mobil menjadi indeks
'Sepeda',
'Truk',
['Motor' => ['Honda', 'Yamaha', 'Suzuki']], // value
motor menjadi indeks
'Bus'
];
echo '<pre>'; print_r($kendaraan);
?>
</body>
</html>
Dapat dilihat bahwa anda dapat mendefinisikan value dari array yang
anda miliki seperti pada contoh yaitu mobil dan motor menjadi sebuah
array juga yang berisikan merk, type atau pun tahun dan untuk
melakukan pemanggilan dari data array anda hanya cukup memanggil
key atau nama atributnya saja yaitu kendaraan.
4. Array Multidimensi dan Menggunakan Perulangan Foreach
Untuk mengakses value dari array, maka kita gunakan key atau
nama atribut dari value yang penulisannya diapit dengan kurung siku [],
seperti pada contoh sebelumnya, begitu pula dengan array multidimensi.
Untuk lebih jelasnya buatlah sebuah file multiarray.php kemudian
<html>
<head>
</head>
<body>
<?php
$kendaraan = [
['Mobil' => ['merk' => 'Toyota', 'type' => 'Vios', 'year' =>
'2016']], // value mobil menjadi index
'Sepeda',
'Truk',
['Motor' => ['Honda', 'Yamaha', 'Suzuki']], // value motor
menjadi index
'Bus'
];
echo $kendaraan[0]['Mobil']['merk']; // Toyota
echo '<br><br>';
echo $kendaraan[1]; // Sepeda
echo '<br>';
echo $kendaraan[3]['Motor']; // Tercetak Array dan muncul
Warning karena hasilnya masih berbentuk array, dan array tidak bisa
di echo
echo '<br><br>';
echo $kendaraan[3]['Motor'][1]; // Yamaha
?>
</body>
</html>
Dapat dilihat bahwa anda dapat mendefinisikan value dari array yang
anda miliki seperti pada contoh yaitu mobil dan motor menjadi sebuah
array juga yang berisikan merk, type atau pun tahun dan untuk
melakukan pemanggilan dari data array anda hanya cukup memanggil
key atau nama atributnya saja yaitu kendaraan.
Cara lain untuk melakukan pemanggilan value pada array adalah
menggunakan perulangan foreach, dan untuk lebih jelasnya buatlah
sebuah file foreach.php dan tambahkan / sisipkan,
<html>
<head>
</head>
<body>
<?php
$mobil = ['merk' => 'Toyota', 'type' => 'Vios', 'year' =>
2016];
echo '
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>';
foreach ($mobil as $key => $value)
{
echo '<tr>
<td>'. $key .'</td>
<td>'. $value .'</td>
</tr>';
}
echo '</table>';
?>
</body>
</html>
Dapat dilihat bahwa pemanggilan dari data array anda hanya cukup
memanggil key atau nama atributnya saja kemudian pemanggilan
tersebut akan terus berulang hingga kondisi terpenuhi.


Modul 17
1. Materi Pokok.
Penjelasan materi tentang Fungsi pada PHP.
2. Pengantar.
Fungsi dibedakan atas : built in function, user defined function, external
function.

Siswa dapat memahami dan mengerti tentang Fungsi pada PHP.

Siswa paham dan mengerti tentang Fungsi pada PHP.
5. Kegiatan Belajar
Penjelasan materi tentang Fungsi pada PHP.
Pengertian Fungsi pada PHP
Fungsi merupakan serangkaian script/kode yang mempunyai kegunaan
khusus dan tertentu, seurutan atau serangkaian kode yang sering dipakai. Fungsi
digunakan untuk memudahkan proses pengembangan suatu aplikasi. Dalam
pengembangan script/kode program, pemrogram hanya melakukan perubahan
pada satu tempat. Fungsi pada PHP dibagi menjadi tiga yaitu,
Fungsi Built In
Fungsi yang telah disediakan oleh PHP dan pemrogram dapat langsung
memakainya (fungsi akar kuadrat, fungsi date, dll). Macam-macam fungsi Built
In adalah fungsi untuk array, fungsi untuk matematika, fungsi untuk string dan
pemrosesan file, fungsi tanggal, fungsi pemeriksaan tipe data, fungsi database,
fungsi web dan xml, fungsi untuk file dan lain lain. Contoh fungsi built in dapat
dilihat pada latihan soal 1.
Fungsi UDF (User Defined Function)
Fungsi yang dibuat oleh pemrogram, karena tidak ada fungsi built in yang
tersedia untuk menyelesaikan kebutuhan program. UDF dibuat dan diletakkan
dimana saja, sebaiknya diletakkan pada bagian paling atas script PHP agar
memudahkan proses debugging dalam tahap pembuatan dan pengembangan
program.
UDF sebaiknya diletakkan pada awal program, diletakkan pada bagian
<head>, walaupun pada dasar bebas diletakkan dimana saja. Dengan pelatakkan
fungsi pada bagian paling atas, maka eksekusi script dapat lebih cepat, karena
pada saat fungsi dibutuhkan maka fungsi tersebut sudah diload dan diparsing
oleh server, tetapi jika diletakkan dibawah, maka PHP akan membaca seluruh
file script terlebih dahulu harus melakukan interpretasi.
Deklarasi UDF
function namafungsi([parameter]){
statement .....;
statement......;
}
Contoh fungsi UDF dapat dilihat pada latihan soal 2.
Fungsi Eksternal
Merupakan daftar fungsi yang belum diaktifkan (di-link) dalam
keseluruhan modul PHP, fungsinya diletakkan pada library atau file yang
terpisah dari modul PHP. Fungsi ini dapat diaktifkan secara otomatis dengan
meregistrasikan pada file PHP.ini.
Apabila ada library fuction yang belum diaktifkan secara otomatis maka
pemanggilannya harus didahului dengan memberikan perintah secara eksplisit
untuk meload library dari fungsi eksternal tersebut berada supaya dapat
dipanggil atau digunakan oleh script PHP.
Fungsi String
Tabel 17. 1 fungsi string
Nama Fungsi Keterangan

Strlen() Digunakan untuk mengetahui jumlah karakter dalam suatu
string (teks)
Strstr() Mengambil suatu string mulai posisi setelah suatu substring,
case sensitive
Stristr() Strstr, tidak case sensitive
Strchr() Sama dengan strstr()
Substr() Digunakan untuk mengambil sebagian string
Trim() Menghilangkan spasi sebelum huruf pertama string dan sesudah
huruf terakhir string
Ltrim() Menghilangkan spasi sebelum huruf pertama string (kiri)
Rtrim() Menghilangkan spasi sesudah huruf terakhir string (kanan)
Strtolower() Seluruh string menjadi huruf kecil
Strtoupper() Seluruh string menjadi huruf kapital
Ucfirst() Awal string menjadi huruf kapital
Strrev() Membalik urutan string
Str_replace() Menganti sebagian string yang dicari dengan string lain
Strcmp() Membandingkan biner dua string, case sensitive

materi tentang fungsi pada PHP.
a. Latihan Soal
1. Fungsi Built In
<html>
<head>
<title> Fungsi Built In </title>
</head>
<body>
<p>
<?php
echo "Fungsi built-in Matematika <br>";
$a = pow(2,10); //Fungsi perpangkatan
$b = sqrt(100); //Fungsi akar
$c = ceil(4.25); //Pembulatan keatas
$d = floor(4.25); //Pembulatan kebawah
echo "2 pangkat 10 = $a <br>";
echo "akar 100 = $b <br>";
echo "ceil(4.15) = $c <br>";
echo "floor(4.25) = $d <br>";
?>
</p>
<p>
<?php
echo "Fungsi built-in Date & Time <br>";
$skr = date("d/m/Y");
echo "Sekarang adalah $skr <br>";
$waktu = date("h:i:s A"); //A menunjukkan AM
atau PM
echo "Jam menunjukkan pukul : $waktu";
?>
</p>
<p>
<?php
echo "Fungsi built-in String <br>";
$str = "Belajar PHP ternyata Menyenangkan";
echo strtolower($str); //Ubah huruf ke kecil semua
echo "<br>";
echo strtoupper($str); //Ubah huruf ke besar semua
echo "<br>";
echo str_replace("Menyenangkan","mudah
loh",$str); //Mengganti string
?>
</p>
</body>
</html>
2. Fungsi UDF
<html>
<head>
</head>
<body>
<p>
<?php
echo "Fungsi User defined Function - Berisi Nilai
Balik / Fungsi yang akan me-return sebuah atau beberapa nilai yang
merupakan hasil <br>";
function psgpjg ($pjg, $lbr) {
$luas = $pjg * $lbr;
return $luas;
}
$bil1 = 5;
$bil2 = 3;
echo "Luas persegi panjang dengan panjang 5 dan
lebar 3 =";
echo psgpjg($bil1,$bil2);
?>
</p>
<p>
<?php
echo "Fungsi Tanpa Parameter <br>";
function garis() {
echo "<hr>";
}
echo "Ini contoh fungsi yang tanpa parameter
<br>";
garis();
echo "Lihat perbedaan dengan fungsi yang dengan
parameter <br>";
garis();
?>
</p>
</body>
</html>

Modul 18
1. Materi Pokok.
Penjelasan materi tentang Modularisasi pada PHP.
2. Pengantar.
Modularisasi dalam pemrograman umum di lakukan dan sangat
diperlukan untuk mempermudah debugging dan pengembangan program.
Modularisasi sendiri berarti melakukan pembuatan program berdasarkan
modul-modul. Setiap modul di kembangkan untuk tujuan atau fungsi khusus.

Siswa dapat memahami dan mengerti tentang Modularisasi pada PHP.

Siswa paham dan mengerti tentang Modularisasi pada PHP.
5. Kegiatan Belajar
Penjelasan materi tentang Modularisasi pada PHP.
Pengertian Modularisasi
Modularisasi dalam pemrograman umum dilakukan dan sangat diperlukan
untuk mempermudah debugging dan pengembangan program. Modularisasi
berarti melakukan pembuatan program berdasarkan modul-modul. Setiap
modul dikembangkan untuk tujuan atau fungsi khusus. Modul dibuat secara
general (umum). Modul dapat berupa fungsi atau prosedur.
Require
Statement Require digunakan untuk membaca nilai variable dan fungsi-fungsi
dari sebuah file lain. Cara penulisan statement require adalah:
require(namafile);
Teknik ini cocok untuk membuat template (pola) yang memudahkan proses
pengembangan aplikasi dengan menggunakan pola tampilan. Misal dalam
membuat design web yang dilakukan dengan kerja tim, pola dan gambar-
gambar yang dibutuhkan dapat dibuat dengan teknik ini. Statement Require ini
tidak dapat dimasukkan diadalam suatu struktur looping misalnya while atau
for. Karena hanya memperbolehkan pemangggilan file yang sama tersebut
hanya sekali saja.
Include
Statement Include akan menyertakan isi suatu file tertentu. Include dapat
diletakkan di dalam suatu looping misalkan dalam statement for atau while.
Syntak penulisan :
include (namafile);
materi tentang modularisasi pada PHP.
a. Latihan Soal
Buatlah sebuah file dengan nama req.php kemudian tambahkan atau
sisipkan,
<?php
$a="Saya sedang belajar PHP";
function tulis($teks) {
echo "$teks";
}
?>
Buatlah sebuah file modular.php didalam folder yang sama dengan file
req.php kemudian tambahkan atau sisipkan,
<html>
<head>
</head>
<body>
<p>
<?php
echo "Required";
require("req.php"); //Akan dipanggil 1x saja
echo "<br>"; echo $a; //Mengambil nilai dari require
?>
</p>
</body>
</html>
Gambar 18. 1 hasil latihan soal modularisasi

Modul 19
1. Materi Pokok.
Penjelasan materi tentang pengolahan Form pada HTML dan PHP.
2. Pengantar.
Web menerima input dari user atau pengunjung menggunakan metode
GET atau POST. GET akan mengirimkan data bersama dengan URL,
sedangkan POST mengirimkannya secara terpisah.

Siswa dapat memahami dan mengerti tentang pengolahan Form pada
HTML dan PHP.

Siswa dapat memahami dan mengerti tentang pengolahan Form pada
HTML dan PHP.
5. Kegiatan Belajar
Penjelasan materi tentang pengolaha Form pada HTML dan PHP.
Pengertian Form
inputan tersebut ke server. Penggunakan form yang hanya menggunakan
HTML saja tidak akan terlalu berguna. From biasanya hanya berupa interface
yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan
bahasa pemograman seperti JavaScript atau PHP, dan dapat disimpan di dalam
database seperti MySQL.
Perintah atau tag yang digunakan adalah <FORM> dan diakhiri dengan
tag </FORM>. Field-field yang berada diantaranya digunakan untuk
menentukan ukuran jenis dari masing-masing input field.
Method Pengolahan Form
Method POST dan GET adalah method yang digunakan dalam halaman
html untuk mengirimkan parameter/data dari halaman masukan ke halaman
keluaran. Ada perbedaan antara metode pengiriman menggunakan method GET
dan POST. Jika dengan GET maka parameter akan ditampilkan di URL.
Sedangkan POST tidak ditampilkan di URL. Untuk data yang banyak, biasanya
digunakan POST, atau data yang tidak ingin dilihat misalkan data untuk login,
yang dikirimkan username dan password. Jika menggunakan GET maka
username dan password-nya bisa terlihat sehingga untuk login autentifikasi
digunakan method POST.
Jenis Inputan pada Form
1. Form Input Check Box
Checkbox digunakan untuk memberi beberapa pilihan kepada user,
sehingga user dapat memilih salah satu, lebih dari satu pilihan atau tidak
sama sekali.
<input type=checkbox name=name value=value>
<input type=checkbox name=name value=value checked>
2. Form Input File
Input File digunakan untuk melakukan input atau membuat masukan upload
file.
<input type=file name=name accept=mime type list>
3. Form Input Hidden
<input type=hidden name=name value=value>
4. Form Input Image
Input Image digunakan untuk melakukan input atau membuat masukan
upload file yang hanya dengan format gambar seperti jpg, png dan lainnya.
<input type=image name=name src="url">
<input type=image name=name src="url" align="alignment">
5. Form Input Password
<input type=password name=name>
<input type=password name=name maxlength=length>
<input type=password name=name size=size>
<input type=password name=name value=value>
6. Form Input Radio Button
Radio button digunakan membuat pilihan. user dapat memilih salah satu
pilihan yang tersedia, sehingga user tidak bisa memilih kurang atau lebih
dari satu pilihan yang disediakan.
<input type=radio name=name value=value>
<input type=radio name=name value=value checked>
7. Form Input Range
<input type=range name=name min=min max=max>
<input type=range name=name min=min> max=max value=value>
8. Form Input Reset
<input type=reset>
9. Form Input Submit
<input type=submit>
<input type=submit name=name>
<input type=submit value=value>
10. Form Input Button
<input type=button>
<input type=button name=name>
<input type=button value=value>
11. Form Input Text
Textbox digunakan untuk memasukkan data string sebanyak satu baris.
<input type=text name=name>
<input type=text name=name maxlength=length>
<input type=text name=name size=size>
<input type=text name=name value=value>
12. Form Select
<select name=name> option entries </select>
<select name=name multiple> option entries </select>
<select name=name size=size> option entries </select>
<select name=name src=url width=width height=height units=units> option
entries </select>
<option> content <option selected> content <option value=value> content
<option shape=shape>
materi tentang Pengolahan Form pada HTML dan PHP.
a. Latihan Soal
Buatlah sebuah halaman php dengan nama form.php kemudian tambahkan
atau sisipkan,
<!doctype html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<h2>Formulir Mahasiswa</h2>
<form method="get" action="lihat_form_get.php"
enctype="text/plain">
<fieldset>
<legend>Kolom Biodata</legend>
<table width="300">
<tr>
<td width="100">Nama</td>
<td><input type="text" size="30"
name="name" accesskey="n" tabindex="1"/></td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td><textarea name="alamat" cols="30"
rows="5" accesskey="a" tabindex="2"></textarea></td>
</tr>
<tr>
<td valign="top">Golongan Darah</td>
<td>
value="A" tabindex="3" />A<br />
value="B" tabindex="3" />B<br />
value="AB" tabindex="3" />AB<br />
value="O" tabindex="3" />O<br />
</td>
</tr>
<tr>
<td valign="top">Hobby</td>
<td>
name="hobby1" value="Sepakbola" tabindex="4" />Sepakbola<br />
name="hobby2" value="Menulis" tabindex="5" />Menulis<br />
name="hobby3" value="Fotografi" tabindex="6" />Fotografi<br />
<input type="checkbox" name="hobby4" value="Nggaada"
tabindex="6" />Ngga Punya Hobby<br />
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Informasi Akademik</legend>
<table>
<tr>
<td>NIM</td>
<td><input type="text" maxlength="8"
size="10" name="nim" value="" /></td>
</tr>
<tr>
<td>Program Studi</td>
<td>
<select name="programstudi">
Informatika">Teknik Informatika</option>
<option value="Manajemen
Informatika">Manajemen Informatika</option>
Komputer">Teknik Komputer</option>
<option value="Komputer Akuntansi">Komputer
Akuntansi</option>
</select>
</td>
</tr>
</table>
</fieldset>
<button name="submit" type="submit"

value="kirim">Kirim</button>
<button name="reset" type="reset">Reset</button>
</form>
</body>
</html>
Buatlah sebuah halaman tampil dari form dengan nama tampil_form.php
kemudian tambahkan atau sisipkan,
<!DOCTYPE html>
<html>
<head>
<title>Lihat Form Get</title>
</head>
<body>
<?php
echo "<h2>Data Mahasiswa</h2>";
echo "<hr>";
// Menampilkan Nama
$name=$_GET["name"];
echo 'Selamat Datang'.' '. $name . '.';
echo "<br>";
// Menampilkan Alamat
$alamat=$_GET["alamat"];
echo 'Alamat anda adalah di'.' '. $alamat . '.';
echo "<br>";
// Menampilkan Radio Golongan Darah

if (isset($_GET['submit'])) {
$goldar = $_GET['goldar'];
echo "Golongan Darah Anda adalah <b>$goldar</b>";
}
echo "<br>";
// Menampilkan Check Box Hobby

echo "Hobby Anda adalah :<br>";
if (isset($_GET['hobby1'])) {
echo "+ " . $_GET['hobby1'] . "<br>";
}
echo "+ " . $_GET['hobby2'] . "<br>";
}
echo "+ " . $_GET['hobby3'] . "<br>";
}
echo "+ " . $_GET['hobby4'] . "<br>";
}
}
echo "<h3>Informasi Akademik</h3>";

echo "<hr>";
// Menampilkan NIM
$nim=$_GET["nim"];
echo 'Nomor Induk Mahasiswa Anda adalah '.' '. $nim . '.';
echo "<br>";
// Select
$programstudi = $_GET['programstudi'];
echo "Program Studi Anda adalah $programstudi";
}
echo "<br>";
?>
</body>
</html>
c. Tugas Latihan
Buatlah sebuah form dengan pengolahannya menggunakan method post.

Modul 20
1. Materi Pokok.
Penjelasan materi tentang Session pada PHP.
2. Pengantar.
PHP mempunyai session (catatan aktivitas) yang digunakan untuk
menjaga / memelihara informasi akses dari seorang pengakses / pemakai
aplikasi web. Session memungkinkan pelacakan akses pemakai, pangaturan
pemakaian aplikasi oleh pemakai dan meningkatkan layanan situs web.

Siswa dapat memahami dan mengerti tentang tentang Session pada PHP.

Siswa paham dan mengerti tentang Session pada PHP.
5. Kegiatan Belajar
Penjelasan materi tentang Session pada PHP.
Pengertian Session
Dalam PHP, session merupakan data yang disimpan dalam suatu server
yang dapat digunakan secara global pada server tersebut, dimana data tersebut
merujuk ke user/client tertentu. Contoh penggunaan session adalah ketika user
telah login di halaman tertentu, maka ketika membuka halaman lain, php akan
mengingat bahwa user tersebut telah login, contoh ketika kita telah login pada
Google, maka setiap kali kita membuka layanan Google seperti GMail, Google
Drive, dll pada tab berbeda, maka kita akan selalu dalam keadaan login, kecuali
kita buka dengan browser yang berbeda. Contoh lain ketika web ecommerce
merekam keranjang belanja user, maka ketika pindah ke halaman pembayaran,
daftar belanja masih terekam.
Penjelasan tentang cara kerja Session
Ketika kita memulai session dengan menjalankan perintah session_start()
maka PHP akan menjalankan perintah baik pada server maupun pada
client/user.
Cara kerja Session pada sisi Server
Dari sisi server php akan membuat file yang disebut file session yang
diawali dengan sess_ dan diikuti dengan id session, dimana id session tersebut
mereferensikan id session yang ada di browser client. Nilai id session adalah:
a. Jika browser mengijinkan penggunaan cookie, maka id session berupa
angka acak sebanya 26 karakter hexadecimal.
contoh: 1g7vcm79tg4869tp8u53gldl02
b. Jika browser tidak mengijinkan penggunaan cookie
Jika nama session ada di url, maka nilai id session sama dengan id yang ada
di url.
contoh: http://stmik.ikmi.ac.id?page=login&PHPSESSID=1234
maka is session yang digunakan adalah 1234, sehingga nama file session
yang dibuat sess_1234. Namun jika id session tidak ada di url, maka PHP
akan membuat file dengan id session sama seperti sebelumnya yaitu 26
karakter hexadesimal, file ini akan dibuat setiap kali perintah
session_start() dijalankan, dan tidak ada referensi ke user/client.
Kemudian dimana PHP menyimpan file session tersebut ?
File tersebut secara default disimpan didalam direktori temporary dimana letak
direktory ini tergantung dari masing-masing sistem operasi yang digunakan.
Untuk mengetahui dimana PHP menyimpan file session, dapat menggunakan
perintah: session_save_path()
Misalnya dengan membuat file session.php dan simpan ke dalam folder aplikasi
yang sedang dibangun, selanjutnya tuliskan kode berikut,
<?php
echo session_save_path();
?>
Ketika dijalankan file tersebut pada komputer yang menggunakan sistem
operasi windows, maka contoh output yang dihasilkan adalah C:\xampp\tmp\
(tergantung pada system oerasi dan direktori yang digunakan), jika membuka
direktori tersebut, disana kita temukan banyak file .tmp, cari nama dengan
awalan sess_ , file tersebut merupakan file session.
Gambar 20. 1 session sisi server
Cara kerja Session pada sisi Client / User

a. Jika browser mengijinkan penggunaan cookie
Membuat file cookie dengan nama default yaitu PHPSESSID dengan nilai
(value) id session, lokasi penyimpanan file tersebut berbeda beda tergantung
jenis browser yang digunakan, untuk google chrome lokasi cookie berada
di
C:\Users\<NAMAUSER>\AppData\Local\Google\Chrome\UserData\Defa
ult
dengan nama file cookie, namun kita tidak dapat membukanya secara
langsung, melainkan harus menggunakan SQLite, kita dapat membaca
isinya melalui Chrome Developer Tools, yaitu pada tab resources bagian
cookies, contoh seperti gambar berikut,
Gambar 20. 2 session sisi client/user

Jika dibandingkan antara Gambar 20.1 dan Gambar 20.2 terdapat
kesamaan nilai yaitu 1g7vcm79tg4869tp8u53gldl02 yang merupakan ID
Session, dengan ID ini, maka setiap kali user mengunjungi situs yang sama
dan dengan browser yang sama, maka server akan selalu menggunakan
data-data yang ada di file sess_1g7vcm79tg4869tp8u53gldl02.
b. Jika browser tidak mengijinkan penggunaan cookie
Jika nama session berada di url, maka PHP akan membuat referensi id
session sesuai dengan yang ada di URL.
contoh: http://stmik.ikmi.ac.id?page=login&PHPSESSID=1234
maka php akan menggunakan data session pada file session sess_1234 . Jika
ID session tidak ada di URL maka data session hanya dapat digunakan di
halaman tersebut saja.
Modul 21
1. Materi Pokok.
a. Penjelasan materi tentang membuat (Create) database, tabel pada
database dan membuat data pada tabel dan database.
b. Penjelasan materi tentang membaca atau menampilkan (Read) database,
tabel pada database dan membaca atau menampilkan data pada tabel dan
database.
c. Penjelasan materi tentang memperbaharui (Update) database, tabel pada
database dan memperbaharui data pada tabel dan database.
d. Penjelasan materi tentang menghapus (Delete) database, tabel pada
database dan menghapus data pada tabel dan database.
2. Pengantar.
CRUD adalah singkatan dari Create Read Update Delete , yang sering
digunakan pada aplikasi-aplikasi pengolahan data yang kebanyakan
mengguanakan fungsi CRUD didalamnya . Fungsi ini digunakan untuk
membuat data, menampilkan atau membaca data ,menghapus data, serta
memperbaharui data.

a. Siswa dapat memahami dan mengerti tentang membuat (Create) database,
tabel pada database dan membuat data pada tabel dan database.
b. Siswa dapat memahami dan mengerti tentang membaca atau menampilkan
(Read) database, tabel pada database dan membaca atau menampilkan data
pada tabel dan database.
c. Siswa dapat memahami dan mengerti tentang memperbaharui (Update)
database, tabel pada database dan memperbaharui data pada tabel dan
database.
d. Siswa dapat memahami dan mengerti tentang menghapus (Delete)
database, tabel pada database dan menghapus data pada tabel dan database.
a. Siswa paham dan mengerti tentang membuat (Create) database, tabel pada
database dan membuat data pada tabel dan database.
b. Siswa paham dan mengerti tentang membaca atau menampilkan (Read)
database, tabel pada database dan membaca atau menampilkan data pada
tabel dan database.
c. Siswa paham dan mengerti tentang memperbaharui (Update) database,
tabel pada database dan memperbaharui data pada tabel dan database.
d. Siswa paham dan mengerti tentang menghapus (Delete) database, tabel
pada database dan menghapus data pada tabel dan database.
5. Kegiatan Belajar
Pemrograman Web CRUD adalah sebagai berikut,
a. Penjelasan materi tentang (Create) database, tabel pada database dan
membuat data pada tabel dan database.
Pengertian Database
Basis data (database) adalah kumpulan data yang disimpan secara
sistematis di dalam komputer yang dapat diolah atau dimanipulasi
menggunakan perangkat lunak (program aplikasi) untuk menghasilkan
informasi.
Komponen Basis Data (Database)
1. Perangkat Keras (Hardware)
Komputer, memori, storage (Harddisk), peripheral, dll.
2. Sistem Operasi (Operating System)
Program yang menjalankan sistem komputer, mengendalikan resource
komputer dan melakukan berbagai operasi dasar sistem komputer.
3. Basis Data (Database)
Menyimpan berbagai obyek database (struktur tabel, indeks,dll)
4. DBMS (Database Management System)
Perangkat lunak yang memaintain data dalam jumlah besar.
5. Pemakai (User)
Para pemakai database.
6. Aplikasi (perangkat lunak) lain.
Program lain dalam DBMS.
Pengertian Database Management System
DBMS adalah singkatan dari Database Management System yaitu
sistem penorganisasian dan sistem pengolahan database pada
komputer. DBMS atau database management system ini merupakan
perangkat lunak (software) yang dipakai untuk membangun basis data yang
berbasis komputerisasi.
Bahasa pada Database
Cara komunikasi diatur dalam suatu bahasa khusus yang telah ditetapkan
oleh DBMS.
Contoh: SQL, dBase, QUEL, dsb.
Bahasa database, dibagi dalam 2 bentuk:
1. Data Definition Language (DDL)
Digunakan dalam membuat tabel baru, indeks, mengubah tabel,
menetukan struktur tabel, dsb.
2. Data Manipulation Language (DML)
a. Digunakan dalam memanipulasi dan pengambilan data pada
database.
b. Manipulasi data, dapat mencakup:
- Pemanggilan data yang tersimpan dalam database (query)
- Penyisipan/penambahan data baru ke database
- Penghapusan data dari database
- Pengubahan data pada database
Tipe data yang sering digunkan pada DBMS
Constraint
Constraint adalah batasan atau aturan yang ada pada table.
1. NOT NULL
Suatu kolom yang didefinisikan dengan constraint NOT NULL tidak
boleh berisinilai NULL. Kolom yang befungsi sebagai kunci primer
(primary key) otomatis tidak boleh NULL.
2. UNIQUE
Mendefinisikan suatu kolom menjadi bersifat unik, artinya antara satu
data dengan data lainnya namanya tidak boleh sama, misal alamat email.
3. PRIMARY KEY
Constraint PRIMARY KEY membentuk key yang unik untuk suatu
table.
4. FOREIGN KEY
FOREIGN KEY constraint didefinisikan pada suatu kolom yang ada
pada suatu table, dimana kolom tersebut juga dimiliki oleh table yang
lain sebagai suatu PRIMARY KEY, biasa dipakai untuk
menghubungkan antara 2 tabel.
Membuat Database pada MySql
1. Jalankan web browser kemuadian ketikan url
http://localhost/phpmyadmin.
2. Buatlah database baru kemudian berikan nama pada database yang
akan dibuat.
3. Kemudian input-kan nama tabel berikut atribut yang ingin anda

sesuaikan.
Membuat Koneksi PHP pada Database MySql
Buatlah sebuah file dengan nama koneksi.php kemudian tambahkan atau
sisipkan,
<?php
// buat koneksi dengan database mysql
$host = "localhost";
$user = "root";
$pass = "";
$name = "mahasiswa";
$link = mysqli_connect($host,$user,$pass,$name);
// periksa koneksi, tampilkan pesan kesalahan jika gagal
if(!$link){
die ("Koneksi dengan database gagal: ".mysqli_connect_errno().
" - ".mysqli_connect_error());
}
?>
Membuat Form input PHP
Buatlah sebuah file dengan nama input.php kemudian tambahkan atau
sisipkan,
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
}
.container{
width: 400px;
margin: auto;
}
</style>
</head>
<body>
<h1>Input Data</h1>
<div class="container">
<form id="form_mahasiswa" action="input_proses.php"
method="post">
<fieldset>
<legend>Input Data Mahasiswa</legend>
<p>
<label for="nim">NIM : </label>
<input type="text" name="nim" id="nim" placeholder="Contoh:
12345678">
</p>
<p>
<label for="nama">Nama : </label>
<input type="text" name="nama" id="nama">
</p>
<p>
<label for="kelamin">Jenis Kelamin : </label>
<input type="radio" name="kelamin" value="Pria" />Pria</>
<input type="radio" name="kelamin" value="Wanita"/>Wanita<br
/>
</p>
<p>
<label for="prodi" >Program Studi : </label>
<select name="prodi" id="prodi">
<option value="Sarjana">Sarjana</option>
<option value="Diploma 3">Diploma 3</option>
</select>
</p>
<p>
<label for="jurusan">Jurusan : </label>
<select name="jurusan" id="jurusan">
<option value="Teknologi Informasi">Teknologi
Informasi</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Sistem Informasi Akuntansi">Sistem Informasi
Akuntansi</option>
</select>
</p>
<p>
<label for="tgl_lahir">Tanggal Lahir : </label>
<input type="text" name="tgl_lahir" id="tgl_lahir"
placeholder="Contoh: 1994-12-12">
</p>
</fieldset>
<p>
<input type="submit" name="input" value="Tambah Data">
</p>
</form>
</div>
</body>
</html>
Membuat proses input PHP
Buatlah sebuah file dengan nama input_proses.php kemudian tambahkan
atau sisipkan,
<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'koneksi.php';
// mengecek apakah tombol input dari form telah diklik

if (isset($_POST['input'])) {
// membuat variabel untuk menampung data dari form
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$kelamin = $_POST['kelamin'];
$prodi = $_POST['prodi'];
$jurusan = $_POST['jurusan'];
$tgl_lahir = $_POST['tgl_lahir'];
// jalankan query INSERT untuk menambah data ke database
$query = "INSERT INTO mahasiswa VALUES (NULL, '$nim', '$nama',
'$kelamin','$prodi','$jurusan','$tgl_lahir')";
$result = mysqli_query($link, $query);
// periska query apakah ada error
if(!$result){
die ("Query gagal dijalankan: ".mysqli_errno($link).
" - ".mysqli_error($link));
}
}
// melakukan redirect (mengalihkan) ke halaman index.php
header("location:index.php");
?>
b. Penjelasan materi tentang membaca atau menampilkan (Read)
database, tabel pada database dan membaca atau menampilkan data
pada tabel dan database
informasi. Berikut adalah bagaimana menampilkan informasi pada
database, buatlah sebuah file dengan nama index.php dimana ini akan
menjadi halaman utama pada program web crud ini, kemudian tambahkan
atau sisipkan,
<?php
// memanggil file koneksi.php untuk melakukan koneksi database
?>
<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css' media='screen'/>
</head>
<body>
<h1>Tabel Biodata Mahasiswa</h1>
<center><a href="input.php">Input Data &Gt; </a>
<br/>
<table border="1">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Program Studi</th>
<th>Jurusan</th>
<th>Tanggal Lahir</th>
<th>Aksi</th>
</tr>
</center>
<?php
// jalankan query untuk menampilkan semua data diurutkan berdasarkan
nim
$query = "SELECT * FROM mahasiswa ORDER BY nim ASC";
//mengecek apakah ada error ketika menjalankan query
if(!$result){
die ("Query Error: ".mysqli_errno($link).
}
//buat perulangan untuk element tabel dari data mahasiswa

$no = 1; //variabel untuk membuat nomor urut
// hasil query akan disimpan dalam variabel $data dalam bentuk array
// kemudian dicetak dengan perulangan while
while($data = mysqli_fetch_assoc($result))
{
// mencetak / menampilkan data
echo "<tr>";
echo "<td>$no</td>"; //menampilkan no urut
echo "<td>$data[nim]</td>";
echo "<td>$data[nama]</td>";
echo "<td>$data[kelamin]</td>";
echo "<td>$data[prodi]</td>";
echo "<td>$data[jurusan]</td>";
echo "<td>$data[tgl_lahir]</td>";
// membuat link untuk mengedit dan menghapus data
echo '<td>
<a href="edit.php?id='.$data['id'].'">Edit</a> /
<a href="hapus.php?id='.$data['id'].'"
onclick="return confirm(\'Anda yakin akan menghapus
data?\')">Hapus</a>
</td>';
echo "</tr>";
$no++; // menambah nilai nomor urut
}
?>
</table>
</body>
</html>
c. Penjelasan Meteri tentang memperbaharui (Update) database, tabel
pada database dan memperbaharui data pada tabel dan database.
database, buatlah sebuah file dengan nama edit.php, kemudian tambahkan
atau sisipkan,
<?php
// memanggil file koneksi.php untuk membuat koneksi
// mengecek apakah di url ada nilai GET id
if (isset($_GET['id'])) {
// ambil nilai id dari url dan disimpan dalam variabel $id
$id = ($_GET["id"]);
// menampilkan data mahasiswa dari database yang mempunyai id=$id
$query = "SELECT * FROM mahasiswa WHERE id='$id'";
// mengecek apakah query gagal
if(!$result){
die ("Query Error: ".mysqli_errno($link).
}
// mengambil data dari database dan membuat variabel" utk menampung
data
// variabel ini nantinya akan ditampilkan pada form
$data = mysqli_fetch_assoc($result);
$nim = $data["nim"];
$nama = $data["nama"];
$kelamin = $data["kelamin"];
$prodi = $data["prodi"];
$jurusan = $data["jurusan"];
$tgl_lahir = $data["tgl_lahir"];
} else {
// apabila tidak ada data GET id pada akan di redirect ke index.php
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
}
.container{
width: 400px;
margin: auto;
}
</style>
</head>
<body>
<h1>Edit Data</h1>
<div class="container">
<form id="form_mahasiswa" action="edit_proses.php"
method="post">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<fieldset>
<legend>Edit Data Mahasiswa</legend>
<p>
<label for="nim">NIM : </label>
<input type="text" name="nim" id="nim" value="<?php echo $nim
?>">
</p>
<p>
<label for="nama">Nama : </label>
<input type="text" name="nama" id="nama" value="<?php echo
$nama ?>">
</p>
<p>
<label for="kelamin">Jenis Kelamin : </label>
<input type="radio" name="kelamin" value="Pria" />Pria</>
<input type="radio" name="kelamin" value="Wanita"/>Wanita<br
/>
</p>
<p>
<label for="prodi" >Program Studi : </label>
<select name="prodi" id="prodi">
<option value="Sarjana">Sarjana</option>
<option value="Diploma 3">Diploma 3</option>
</select>
</p>
<p>
<label for="jurusan">Jurusan : </label>
<select name="jurusan" id="jurusan">
<option value="Teknologi Informasi">Teknologi
Informasi</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Sistem Informasi Akuntansi">Sistem Informasi
Akuntansi</option>
</select>
</p>
<p>
<label for="tgl_lahir">Tanggal Lahir : </label>
<input type="text" name="tgl_lahir" id="tgl_lahir" value="<?php
echo $tgl_lahir ?>">
</p>
</fieldset>
<p>
<input type="submit" name="edit" value="Update Data">
</p>
</form>
</div>
</body>
</html>
Berikutnya adalah membuat file edit_proses.php dimana fungsinya adalah
untuk melakukan update pada database,
<?php
// mengecek apakah tombol edit telah diklik
if (isset($_POST['edit'])) {
// buat koneksi dengan database
include("koneksi.php");
// membuat variabel untuk menampung data dari form edit
$id = $_POST['id'];
$nim = $_POST['nim'];
$nama = $_POST['nama'];
$kelamin = $_POST['kelamin'];
$prodi = $_POST['prodi'];
$jurusan = $_POST['jurusan'];
$tgl_lahir = $_POST['tgl_lahir'];
//buat dan jalankan query UPDATE
$query = "UPDATE mahasiswa SET nim = '$nim', nama='$nama',
kelamin='$kelamin', prodi='$prodi', jurusan='$jurusan',
tgl_lahir='$tgl_lahir' WHERE id='$id'";
//periksa hasil query apakah ada error
if(!$result) {
die ("Query gagal dijalankan: ".mysqli_errno($link).
}
}
//lakukan redirect ke halaman index.php
?>
d. Penjelasan Meteri tentang menghapus (Delete) database, tabel pada
database dan menghapus data pada tabel dan database
database, buatlah sebuah file dengan nama hapus.php, kemudian tambahkan
atau sisipkan,
<?php
// buka koneksi dengan MySQL
include("koneksi.php");
//mengecek apakah di url ada GET id
if (isset($_GET["id"])) {
// menyimpan variabel id dari url ke dalam variabel $id
$id = $_GET["id"];
//jalankan query DELETE untuk menghapus data
$query = "DELETE FROM mahasiswa WHERE id='$id' ";
$hasil_query = mysqli_query($link, $query);
//periksa query, apakah ada kesalahan
if(!$hasil_query) {
die ("Gagal menghapus data: ".mysqli_errno($link).
}
}
// melakukan redirect ke halaman index.php
?>
e. Latihan Soal dan Hasil Latihan Soal
Hasil Latihan Soal
Mempublikasikan Website
Mempublikasikan website ke internet, menggunakan web hosting gratis
Bersifat online dan dapat diakses kapan saja dan dimana saja. Berikut adalah
langkah dalam mempiblikasikan web yang anda punya menggunakan web hosting
gratis,
1. Kunjungi alamat web http://www.0fees.us/,
2. Mendaftar / Sign Up, ditunjukan oleh tanda panah merah
3. Mengisikan form pendaftaran dengan data diri anda, dan klik tombol
register setelah selesai
4. Maka anda akan diminta untuk konfirmasi email anda, dan akan tampil
5. Masuk kedalam email anda dan anda akan mendapatkan email seperti pada
gambar berikut, kemudian klik pada link yang diberikan tanda panah,
6. Kemudian akan tampil loading konfigurasi dan tunggu lah hingga tampil
seperti gambar berikut, (simpan tampilan seperti berikut untuk anda
mengetahui dan membantu mengingat akun anda)
Atau anda akan mendapatkannya pada email anda,

7. Selanjutnya masuk kedalam control panel dengan mengakses,
cpanel.0fees.us
8. Setelah anda mengisikan username dan password yang anda dapat pada
tampilan seperti pada nomor 6, dan meng-klik login maka akan tampil,
9. Masuk kedalam Online File Manager tanda panah merah,
10. Maka akan tampil sebagai berikut, masuk kedalam folder htdocs ditandai
dengan tanda panah merah,
11. Kemudian Upload kan web yang anda publish dengan meng-klik tombol
upload ditandai dengan tanda panah merah,
12. Setelah semua file berhasil di upload maka akses web dengan link yang anda
miliki seperti, http://tshirako.0fees.us/

Modul Desain Dan Pemograman Web 1 PDF

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Desain Dan Pemograman Web 1 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul 1

3. Tujuan Pembelajaran Mata Kuliah

4. Kemampuan Akhir Siswa

Gambar 1. 1 cara kerja web

Gambar 1. 2 program berbasis web

b. Pengenalan tentang Pemrograman Berbasis Web

Gambar 1. 4 market share penggunaan bahasa pemrograman web

Tools ini memiliki kepanjangan nama X (Croos) Apache MySQL

Linux Apache MySQL PHP adalah Tool selanjutnya yang dapat

Wamp adalah aplikasi berikutnya, aplikasi yang hanya tersedia di sistem

6. Latihan Soal dan Kunci Jawaban Latihan Soal

[2] Y, K, Ardhana. 2012,Dengan PHP : Membuat Website 30 Juta Rupiah.

3. Tujuan Pembelajaran Mata Kuliah

4. Kemampuan Akhir Siswa

2. Tag Paragraph, (warna kuning)

<b> Menebalkan Text

<big> Membesarkan Text

<em> Emphasized, Memiringkan Text

<i> Italic, Memiringkan Text

<small> Mengecilkan Text

<strong> Menebalkan Text. Text terlihat lebih kuat.

<sub> Subscript. Misalnya: H20

<sup> Superscript. Misalnya: 1000 Celcius

<del> Sebagai tanda teks yang dihapus/diperbaiki.

<ins> Sebagai tanda teks yang disisipkan.

<code> Teks Kode Komputer

<samp> Teks sample

<pre> Preformat, menampilkan tulisan sesuai

<abbr> Abbreviation, Singkatan

<acronym> Akronim, singkatan yang membentuk kata

<bdo> Menentukan arah tulisan, atribut yang

<blockquote> Digunakan untuk kutipan panjang

<q> Digunakan untuk kutipan pendek

<cite> Sitasi, Penghargaan

Gambar atau Image

6. Latihan Soal dan Hasil Latihan Soal

<p><font face="arial" color="red" size="4">

Gambar 2. 1 hasil latihan soal modul 2

3. Tujuan Pembelajaran Mata Kuliah

4. Kemampuan Akhir Siswa

Gambar 3. 1 contoh list

Tipe daftar dalam dokumen HTML dibedakan menjadi tiga, yaitu :

Gambar 3. 2 ordered list pada ms.word

2. Daftar tidak berututan (unordered list),

Gambar 3. 3 unordered list pada ms.word

Berikut adalah atribut yang dapat digunakan pada tag <li>,

3. Daftar definisi (definition list).

b. Penjelasan materi tentang Tabel pada HTML

Berikut adalah atribut pada tag <tabel> (warna kuning),

rowspan, digunakan untuk menggabungkan (merge) 2 cells ke bawah

6. Latihan Soal dan Hasil Latihan Soal

Gambar 3. 4 hasil latihan soal modul 3 soal 1 list.html

2. Latihan soal table.html

Gambar 3. 5 hasil latihan soal modul 3 soal 2 tabel.html

Gambar 3. 6 tugas latihan modul 3

3. Tujuan Pembelajaran Mata Kuliah

4. Kemampuan Akhir Siswa

Beriku adalah contoh tag <input>,

Berikut adalah contoh penggunan <textarea>,

6. Latihan Soal dan Hasil Latihan Soal

<button name="submit" type="submit"

Gambar 4. 1 hasil latihan soal form