Ina - Modul Web Programming 1

Modul Web Programming 1 1
KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Allah SWT, karena atas limpahan rahmat dan
karunianya sehingga modul Web Programming I ini dapat selesai dengan baik. Modul Web
Programming I ini disusun untuk memberikan materi bagi mahasiswa yang untuk
mempelajari matakuliah Web Programming I.
Terima kasih kepada semua pihak yang telah terlibat dan membantu dalam
penyusunan modul ini, terima kasih juga kepada rekan–rekan dosen dan semuanya yang tidak
bisa disebutkan satu persatu, yang selalu mendukung sehingga modul ini sdapat selesai sesuai
dengan tujuan yang ditetapkan.
Pada penyusunan modul ini masih terdapat banyak kekurangan. Untuk itu saran dan
kritik yang membangun sangat sangat membantu untuk dilakukan perbaikan dan
pengembangan modul di waktu yang akan datang.
Akhir kata penulis berharap semoga modul yang dibuat dapat dipergunakan sebaik-
baiknya dan menjadi referensi atau bahan rujukan untuk mahasiswa secara umum yang ingin
mempelajarinya.
Bandung, 1 Maret 2020
(Tim Penyusun)

DAFTAR ISI
Kata Pengantar 2
Daftar Isi 3
Ketentuan Tugas Project dan Tugas Mandiri 4
Pertemuan 1 Konsep Dasar Web 7
Pertemuan 2 Pengenalan HTML 12
Pertemuan 3 Pembuatan Tabel dan Form 23
Pertemuan 4 Mengatur Tampilan Dengan CSS 31
Pertemuan 5 Menambahkan Jquery pada Web 42
Pertemuan 6 Bootstrap 65
Pertemuan 7 Studi 86
Pertemuan 8 Ujian Tengah Semester 87
Pertemuan 9 Pengenalan PHP 88
Pertemuan10 Fungsi Modularitas PHP dan Percabangan 94
Pertemuan 11 Perintah Perulangan dan Array 101
Pertemuan 12 Studi Kasus 107
Pertemuan 13-15 Presentasi Project 108
Referensi 109

KETENTUAN TUGAS PROJECT
Ketentuan Tugas Project Mata Kuliah Web Programming I:
1. Tugas Project Dikerjakan dalam bentuk “Kelompok”, dengan jumlah anggota masing-
masing kelompok berjumlah maksimal 3 mahasiswa (dibuat fleksibel dan disesuaikan
dengan jumlah mahasiswa per kelas).
2. Tema Project akan ditentukan oleh dosen sehingga setiap kelompok berbeda satu
dengan yang lainnya
3. Isi Project Web Programming I berupa Video dan Website.
 Pada Video yang akan dibuat terdapat:
a. Pembukaan
b. Perkenalan (menjelaskan teor-teori yang digunakan).
c. Pembahasan fitur yang ada pada website
d. Penjelasan coding yang dibuat
e. Penutup (berisi kesimpulan)
 Pada Website terdiri dari :
a. Halaman Login
b. Halaman Register
c. Halaman CRUD (Tambah data, edit data, hapus data, tampil data)

KETENTUAN TUGAS MANDIRI
Tugas Mandiri dikerjakan secara “Individu“ oleh mahasiswa, yang terbagi
pengerjaannya yaitu, diluar kelas (dirumah) dan didalam kelas. Hasil pengerjaan tugas-tugas
mandiri mahasiswa menjadi poin untuk akumulasi Nilai Tugas bagi mahasiswa.
A. Tugas Mandiri Diluar Kelas (Dirumah)
1. Pada setiap pertemuan tatap muka dikelas, mahasiswa telah terlebih dahulu mempelajari
dan mengerjakan dirumah seluruh bahasan materi serta Latihan Soal pada minggu
selanjutnya.
2. Untuk mengetahui kapasitas kemampuan mahasiswa terhadap bahasan materi serta Tugas
Latihan Soal pada minggu yang telah dikerjakan mahasiswa dirumah sebelumnya, Dosen
Pengampu dapat menguji mahasiswa di kelas disaat pertemuan pembahasan minggu
tersebut dilakukan.
3. Tugas Mandiri Diluar Kelas terbagi menjadi Tugas 1 dan Tugas 3.
4. Pengumpulan Tugas 1 berada di Minggu ke-7, berisi hasil pengerjaan latihan soal pada
Minggu ke I hingga Minggu ke 5, yaitu Latihan 1 hingga Latihan 5. (Tugas 1 Memiliki
bobot penilaian 20% dari total 100% Nilai Tugas)
5. Pengumpulan Tugas 3 berada di Minggu ke-12, berisi hasil pengerjaan latihan soal pada
Minggu ke 9 hingga Minggu ke 10, yaitu Latihan 6 hingga Latihan 7. (Tugas 3 Memiliki
bobot penilaian 20% dari total 100% Nilai Tugas)
6. Latihan Soal pada minggu dikerjakan dengan hasil tampilan dan pengerjaan query sql
dapat di screenshot dan disalin melalui aplikasi Ms.word atau sejenisnya.
B. Tugas Mandiri Didalam Kelas
Tugas Mandiri didalam kelas terbagi menjadi Tugas 2 dan Tugas 4 dilakukan saat

perkuliahan memasuki bahasan Minggu ke-7 dan Minggu ke-12. Dengan masing-masing
bobot penilaian 30% dari total 100% Nilai Tugas.

PERTEMUAN 1
KONSEP DASAR WEB
Deskripsi :
Membahas konsep dasar dari web, melakukan instalasi Xampp dan Sublime Text.
Tujuan Pembelajaran :
1. Mahasiswa memahami konsep web dan perbedaan front end dan backend
2. Mahasiswa mengetahui unsur website
3. Mahasiswa melakukan instalasi xampp dan Sublime text secara mandiri
 Konsep Dasar Web
Menurut Sibero (2014:11) “World Wide Web atau yang dikenal juga dengan istilah
web adalah suatu sistem yang berkaitan dengan dokumen digunakan sebagai media untuk
menampilkan teks, gambar, multimedia dan lainnya pada jaringan internal. Web adalah suatu
layanan yang didapat oleh pemakai komputer yang terhubung ke internet. Web menyediakan
informasi bagi pemakai komputer yang terhubung ke internet,dari informasi yang gratis
sampai informasi yang komersial. Web juga dapat diartikan sebagai kumpulan halaman-
halaman yang digunakan untuk menampilkan informasi teks, gambar, animasi, video, suara
dan gabungan dari semuanya.
 Unsur unsur Web
Untuk menyediakan keberadaan sebuah website, maka harus tersedia unsur-unsur
penunjangnya, adalah sebagai berikut:
1. Nama domain (Domain name/URL – Uniform Resource Locator)
Pengertian Nama domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik
di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain
domain name adalah alamat yang digunakan untuk menemukan sebuah website pada dunia
internet. Contoh : http://www.baliorange.net, http://www.detik.com Nama domain
diperjualbelikan secara bebas di internet dengan status sewa tahunan. Nama domain sendiri
mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan

website tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz,
name, ws. Contoh nama domain ber-ekstensi lokasi Negara Indonesia adalah co.id (untuk nama
domain website perusahaan), ac.id (nama domain website pendidikan), go.id (nama domain
website instansi pemerintah), or.id (nama domain website organisasi).
2. Rumah tempat website (Web hosting)
Pengertian Web Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat
menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di
website. Besarnya data yang bisa dimasukkan tergantung dari besarnya web hosting yang
disewa/dipunyai, semakin besar web hosting semakin besar pula data yang dapat dimasukkan dan
ditampilkan dalam website. Web Hosting juga diperoleh dengan menyewa. Besarnya hosting
ditentukan ruangan harddisk dengan ukuran MB(Mega Byte) atau GB(Giga Byte). Lama
penyewaan web hosting rata-rata dihitung per tahun. Penyewaan hosting dilakukan dari
perusahaan-perusahaan penyewa web hosting yang banyak dijumpai baik di Indonesia maupun
Luar Negri
3. Bahasa Program (Scripts Program)
Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam website yang pada
saat diakses. Jenis bahasa program sangat menentukan statis, dinamis atau interaktifnya sebuah
website. Semakin banyak ragam bahasa program yang digunakan maka akan terlihat website
semakin dinamis, dan interaktif serta terlihat bagus. Beragam bahasa program saat ini telah hadir
untuk mendukung kualitas website. Jenis jenis bahasa program yang banyak dipakai para desainer
website antara lain HTML, ASP, PHP, JSP, Java Scripts, Java applets dsb. Bahasa dasar yang
dipakai setiap situs adalah HTML sedangkan PHP, ASP, JSP dan lainnya merupakan bahasa
pendukung yang bertindak sebagai pengatur dinamis, dan interaktifnya situs. Bahasa program
ASP, PHP, JSP atau lainnya bisa dibuat sendiri. Bahasa program ini biasanya digunakan untuk
membangun portal berita, artikel, forum diskusi, buku tamu, anggota organisasi, email, mailing
list dan lain sebagainya yang memerlukan update setiap saat.
4. Desain website
Setelah melakukan penyewaan domain name dan web hosting serta penguasaan bahasa program

(scripts program), unsur website yang penting dan utama adalah desain. Desain website
menentukan kualitas dan keindahan sebuah website. Desain sangat berpengaruh kepada penilaian
pengunjung akan bagus tidaknya sebuah website. Untuk membuat website biasanya dapat
dilakukan sendiri atau menyewa jasa website designer. Saat ini sangat banyak jasa web designer,
terutama di kota-kota besar. Perlu diketahui bahwa kualitas situs sangat ditentukan oleh kualitas
designer. Semakin banyak penguasaan web designer tentang beragam program/software
pendukung pembuatan situs maka akan dihasilkan situs yang semakin berkualitas, demikian pula
sebaliknya. Jasa web designer ini yang umumnya memerlukan biaya yang tertinggi dari seluruh
biaya pembangunan situs dan semuanya itu tergantung kualitas designer
 Front End dan Back End
Front End dan Back End adalah dua hal yang berkaitan dengan bagaimana sebuah website
maupun aplikasi dapat bekerja dan diakses oleh pengguna. Berkaitan dengan proses web development,
front end adalah apa yang pengguna lihat pada tampilan sebuah website. Sedangkan back end adalah
sistem di balik layar yang mengolah database dan juga server. Bagian front end sering pula disebut
sebagai "client-side" dan back-end disebut dengan "server-side". Orang yang mengelola front end dan
back end biasa disebut dengan panggilan Full Stack Developer, sedangkan apabila hanya salah satunya
saja, dapat disebut dengan Front End Developer dan Back End Developer. Dari segi peranan, Front End
Developer berperan mengembangkan tampilan situs dengan menggunakan bahasa pemrograman seperti
CSS (Cascading Style Sheets), HTML (Hypertext Markup Language), dan Javascript. Sedangkan untuk
Back End Developer bertugas memastikan bahwa sebuah situs dapat berfungsi dan diakses melalui
monitoring "di balik layar".
 Instalasi Xampp
Untuk pembelajaran pada modul Web Programming I ini menggunakan software

XAMPP. Untuk lebih lanjut mengenai berbagai produk xampp, silahkan kunjungi situs
https://www.apachefriends.org/index.html. Xampp merupakan suatu tools yang bersifat open
source yang sering dipergunakan untuk pengembangan aplikasi berbasis website yang
didalamnya sudah menyediakan paket seperti Apache, MySQL, MariaDB, PHP,
phpMyAdmin, FileZilla, Tomcat, Xampp Control Panel. Xampp sendiri telah tersedia juga
untuk platform Windows mauppun Linux.
Note :
Versi xampp yang digunakan dalam modul praktikum ini adalah xampp minimal versi
5.6.3 dengan extensi PHP telah mendukung mysqli dan server MariaDB.
1. Untuk memudahkan pembelajaran instalasi xampp berada pada Localdisk C:\, setelah
instalasi selesai pindahkan xampp control panel pada Taskbar Laptop/PC dengan cara
masuk ke Explore, lalu arahkan ke lokasi penyimpanan saat Instalasi (pada contoh, saat
instalasi memilih Lokasi di C:/xampp). Kemudian cari file aplikasi bernama xampp-
control, lalu klik kanan pada file tersebut dan pilih Pin to Taskbar, seperti gambar
dibawah ini:
2. Lalu periksa Xampp Control Panel dengan menjalankannya pastikan tab MySQL dan

Apache dalam kondisi Running.
3. Untuk memastikan kembali, silahkan buka web browser lalu ketikan dengan alamat
http://localhost/xampp/ , jika berhasil tampil halaman pembuka xampp maka instalasi
dikatakan berhasil pada Laptop/PC.
LATIHAN 1
a. Mahasiswa mempelajari dan mempraktikan seluruh bahasan materi

pada Pertemuan 2 (MySQL dan MariaDB) (Latihan Mandiri dirumah)
b. Mahasiswa mengerjakan Latihan Soal Pertemuan 2 dan akan
didemonstrasikan pada pertemuan berikutnya (Latihan Mandiri
dirumah, Hasil pengerjaan perintah SQL dan tampilan di screenshot
melalui MS.Word atau sejenisnya)

PERTEMUAN 2
Pengenalan HTML
Deskripsi :
Membahas tentang Bahasa Markup Languange (HTML)
1. Mahasiswa menggunakan media sublime txt untuk menulis script HTML
2. Mahasiswa mampu mengetahui pengertian dan fungsi tag pada HTML
 Pengenalan HTML
Hypertext Markup Language (HTML) adalah sebuah bahasa standar yang digunakan untuk
membuat sebuah halaman web serta menampilkan berbagai informasi yang ada di dalam sebuah
website. Sebenarnya HTML bukanlah sebuah bahasa pemrograman. Apabila di tinjau dari
namanya, HTML merupakan bahasa markup atau penandaan terhadap sebuah dokumen teks.
Tanda tersebut di gunakan untuk menentukan format atau style dari teks yang di tandai. HTML
sendiri dibuat oleh kolaborasi dari Caillau TIM dengan Berners Lee Robert (kolaborasi ini
sering disebut dengan "TIM Berners Lee") ketika mereka bekerja di CERN (sebuah lembaga
penelitian fisika energi tinggi di Jenewa, Swiss) pada tahun 1989. Bahasa ini kemudian
dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami
perkembangan yang sangat pesat.
Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih
baik dari versi sebelumnya. HTML disahkan sebagai suatu dokumen HTML standar setelah
mendapat persetujuan dari W3C (World Wide Web Consortium), sebuah organisasi
internasional yang mengatur standar world wide web (www) dunia. Setiap terjadi
perkembangan suatu versi HTML yang telah disetujui oleh W3C, maka browser-browser
seperti Mozilla Firefox dan Google Chrome pun harus memperbaiki diri agar bisa mendukung
kode-kode HTML yang baru tersebut. Sebab jika tidak, browser-browser tersebut akan
mengalami masalah dalam menampilkan halaman web yang diinginkan. Berikut merupakan
perkembangan HTML dari awal dibangun.
1. HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta
cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada
dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).
2. HTML versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk
menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat
memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari
adanya homepage interaktif.
3. HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut
juga sebagai HTML+ tidak bertahan lama dan segera digantikan
4. HTML versi 3.2.
5. HTML versi 4.01
HTML versi 4.01 memuat banyak sekali perubahan dan revisi dari pendahulunya.
Perubahan ini terjadi hamper di segala perintah-perintah HTML seperti table, image, link,
text, meta, imagemaps, dan form. XHTML versi 1.0 XHTML adalah bahasa markup
penerus dan pengembangan dari HTML yang memiliki kemampuan yang kurang lebih
mirip HTML, tapi dengan aturan sintaks yang lebih ketat, diluncurkan pada tahun 2000.
6. HTML versi 5.0
HTML5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan
penggabungan antara CSS, Java Script dengan HTML itu sendiri. Teknologi ini diluncurkan
pada tahun 2009. Fungsi HTML HTML telah mengubah dunia internet, kurang lebih berikut
adalah fungsi utama :
• Membuat, mendesain, dan mengontrol tampilan dari web page (halaman web) dan
isinya.
• Mempublikasikan dokument secara online sehingga bisa diakses seluruh dunia
• Membuat online form yang bisa digunakan untuk menangani pendaftaran dan
transaksi secara online.
• Menambahkan object – object seperti image, audio, video dan juga java applet
(aplikasi java seperti java game dll) dalam dokumen HTML.

 Tag HTML
Pad Dasarnya dalam membuat sebuah website, fokus pengerjaannya dapat dibagi
menjadi dua kategori, yaitu:
1. Elemen yang berfungsi untuk memberikan informasi atau mendeklarasikan dokumen
tersebut (HTML).
2. Elemen berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada
browser (CSS).
Dalam mempelajari HTML, ada dua alat bantu (tools) yang dibutuhkan, yaitu.
1. Browser
Browser merupakan software yang di install di mesin client (komputer kita sebagai
pengguna website) yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman
web. Contoh browser Internet Explorer, Mozila, Chrome, Opera dan masih banyak yang
lainya. Browser inilah yang akan digunakan untuk melihat tampilan hasil kode-kode yang
kita tulis nantinya.
2. Editor
Editor adalah program text editing biasa yang bisa digunakan untuk membuat
document HTML (Webpage/Halaman Web). Ada banyak HTML editor yang bisa anda
gunakan diantaranya: Ms FrontPage, Notepad, Notepad++, dreamweaver, bluefish,coffee
cup, php storm, sublime dll.
HTML berisi tag-tag beserta teks penjelasannya (plain text). HTML tags adalah
keyword (nama tag/nama elemen) yang dikurung dengan tanda kurung bersegi, contohnya
<buku>. Tag

HTML umumnya dibuat berpasangan dengan tag penutupnya, seperti <a> dan diikuti tag
penutup </a>. Namun aturan HTML tidak mewajibkan semua tag ditutup dengan tag
penutupnya karena tidak akan terjadi error, kecuali XHTML yang memang memiliki aturan
yang lebih ketat. Tetapi akan lebih baik bila kita selalu menggunakan tag penutup pada saat
membuat sebuah elemen, karena akan memudahkan kita untuk melihat dan mempelajari
struktur halaman web yang kita buat tersebut.
STRUKTUR DOKUMEN HTML
<!DOCTYPE ….> : deklarasi jenis teknologi HTML yang digunakan hanya untuk
membantu browser menampilkan halaman web dengan tepat
<html> ... </html> : tag pembuka dari dokumen HTML
<head> ... </head> : mendefinisikan informasi tentang dokumen tersebut
<title> ... </title> : memberikan judul pada dokumen HTML
<body> ... </body> : merupakan body dari dokumen HTML. Segala sesuatu yang
ingin ditampilkan di dokumen HTML disimpan dalam tag body
ini.
Catatan :
<!DOCTYPE html> untuk HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> untuk HTML

4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> untuk XHTML

1.0

Ikuti langkah berikut untuk membuat halaman website pertama anda.
1. Tuliskan dokumen HTML pada text editor, misalkan notepad.
2. Simpan HTML anda, pilih SAVE AS, lalu tulis nama file dengan diikuti .html.
3. Buka file HTML anda dengan cara double klik atau klik kanan, lalu pilih open with
sesuai dengan browser yang anda inginkan.
MENGENAL HTML
1. Atribut
Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa
instruksi seperti mengatur warna dari text, besar / kecil huruf dari text, dll.
Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”.
Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua tanda kutip (“).
Contoh:
<a href=http://www.ars.ac.id>ini adalah link</a>
href adalah nama dari atribut, dan http://www.ars.ac.id adalah value atau nilai dari atribut
tersebut. Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag
memiliki atribut, terutama atribut id dan class yang terutama dibutuhkan dalam manipulasi
halaman web menggunakan CSS maupun JavaScript.
2. Heading
Untuk membuat teks format judul bisa menggunakan tag heading. Tag heading terdiri dari
beberapa level, untuk lebih jelasnya lihat contoh di bawah ini:
<body>
<h1>Heading Level1</h1>
</body>
Berikut adalah hasil tampilan dari code di atas

3. Paragraf
Tag paragraf pada html adalah dibuka dengan <p> ditutup dengan </p>. lebih jelasnya
silahkan coba latihan pada contoh dibawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Latihan Paragraf</title>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Sebagai latihan Anda has
Lorem Ipsum bisabeen
menyalin kalimatnya
the industry's di www.lipsum.com
standard , kemudian
dummy text ever since the 1500s,
apabila </p>
tampilan
</body> paragraf teratur rata kanan (right), kiri (left), tengah (center) atau justify (rata
kanan kiri) , maka Anda bisa menambahkannya sebagai atribut. Sebagai contoh seperti
</html>
dibawah ini.
<p align=”justify” >

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>

4. Mengatur Format HTML
Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang ada pada
halaman tersebut sebelum di-klik.
Membuat Text Bold, Italic, Underline, Striketrue, Supersript dan Subscript
M<!DOCTYPE html>
L
<head>
<title>Mengatur Format HTML</title>
</head>
<body >
<b>Ini Text Bold</b><br>
<i>Ini Text Italic</i><br>
<u>Ini Text Underline</u><br>
<s>Ini Text Striketrue</s><br>
Text Superscript:
X<sup>2</sup><br> Text Subscript:
H<sub>2</sub>O <br>
</body>
</html>
5. Komentar
Berguna untuk membuat catatan pada halaman file html. Tag nya adalah
<! - - Masukkan komentar disini - - >
6. Link
Link adalah tujuan dari kata Hypertext dari HTML. Tujuan kata Hypertext dari HTML
adalah membuat sebuah text jika di-klik akan pindah ke halaman lainnya. HTML
menggunakan tag link untuk keperluan ini.
Tag link ditulis dengan <a>, singkatan cari anchor (jangkar)
Setiap tag link setidaknya memiliki sebuah atribut href. Dimana href akan berisi alamat
yang dituju. (href adalah singkatan dari hypertext reference). Silahkan buat kode seperti
dibawah ini.

<a href="http://www.ars.ac.id/" target="_blank">Menuju Ars Site</a>
Pada kode diatas terdapat atribut target=”_blank” yang berfungsi sebagai pembuka tab
baru apabila link diklik.
Ada 4 jenis pembuatan link dalam HTML:

• Link untuk menghubungkan antar halaman [ href=”index.html” ]
• Link untuk menghubungkan ke bagian halaman lain[ href=”index.html” target=”_blank”]
• Link untuk menghubungkan ke halaman website lain [ href=”http://www.google.com” ]
• Link untuk menghubungkan ke alamat email [ href=”mailto: ars@gmail.com” ]
7. Menambahkan gambar di HTML

Tag yang digunakan adalah <img> , dan butuh untuk menambahkan beberapa atribut
seperti :
<img src=”image.jpg” width=”300” height=”300” alt=”image in here” >
- Atribut src adalah singkatan dari source, adalah alamat dari gambar yang akan
ditampilkan.
- Atribut width adalah mengatur lebar gambar dan height adalah mengatur tinggi
gambar dalam pixel (px).
- Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk
keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau web
broser yang disetting untuk tidak menampilkan gambar
8. Membuat Garis
Tag hr digunakan untuk membuat garis pada dokumen HTML. Contoh:

<!DOCTYPE html>
<head>
<title>Membuat Garis</title>
</head>
<body>
<h1 align="right">Ini adalah garis</h1>
<hr align="right" width="60%" color="#FF0000" size="3">
</body>
</html>
9. Membuat List
Ada 3 jenis list dalam dokumen HTML yaitu:
1. OL (Ordered List) : <ol> </ol>

Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. List
yang ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail.
<!DOCTYPE html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>

Pada Ordered List “<ol>” secara default pengurutan akan diurutkan dengan angka. Jika
anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut
type pada tag <ol> contoh:

<ol type="A">
<li>Memasak</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
</ol>
Type pada ol antara lain : A, a, I, i, 1
2. UL (Unordered List) : <ul> </ul>

Unordered List merupakan pengurutan list dengan menggunakan symbol/bullet. Cara
membuatnya sama dengan Ordered List hanya saja tag <ol> diganti dengan tag <ul>.
Contoh:
<body>
<ul>
<li>Memasak</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
</ul>
</body>
Anda pun dapat menambahkan atribut untuk jenis atau type simbol pada <ul>, yaitu
antara lain : circle, disc, square
3. DL (Delete List) / List tanpa bullet : <dl></dl>

Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis
dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti dengan
<dl> lalu tag <li> diganti dengan <dd> contoh:
<body>
<dl >
<dd>Memasak</dd>
<dd>cuci piring</dd>
<dd>cuci baju</dd>
<dd>mandi</dd>
<dd>sarapan</dd>
<dd>berangkat sekolah</dd>
</dl>
</body>
LATIHAN SOAL PERTEMUAN 2
Buatlah dengan HTML gambar dibawah ini :

PERTEMUAN 3
PEMBUATAN TABEL DAN FORM
Deskripsi :
Membahas tag tag untuk membuat table dan membuat sebuah formulir pada halaman website
1. Mahasiswa mampu menggunakan tag untuk membuat table dengan baik
2. Mahasiswa mampu menggunakan tag untuk membuat form dengan baik
 Pembuatan Tabel
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap
kolom menunjukan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom
menunjukan kelompok data dalam satu kesatuan. Untuk membuat tabel pada HTML
menggunakan tag <table> dan di akhiri dengan tag </table> lalu di dalam sebuah tag <table> dan
tag </table> dimasukan tag <tr> dan </tr> yang bekerja sebagai baris pada tabel lalu di dalam
sebuah <tr> dan </tr> terdapat tag <td> dan </td> yang bekerja memberikan sebuah kolom pada
tabel. Untuk mengetahui garis tabel tersebut, kita menggunakan atribut 'border' pada tag table.
Contoh :
<!DOCTYPE html>
<head>
<title>web saya</title>
</head>
<body>
Daftar siswa
<table border="1">
<tr>
<td>No</td>
<td>Nama</td>
<td>Jenis kelamin</td>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>laki-laki</td>
</tr>
<tr>
<td>2</td>
<td>Indah</td>
<td>perempuan</td>
</tr>
</table>
</body>
</html>
Menggabungkan Kolom dan Baris Pada Tabel
Untuk menggabungkan kolom dalam halaman HTML yaitu dengan menggunakan

colspan. Contoh:
<!DOCTYPE html>
<head>
<title>Belajar Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">Colom yang di gabungkan</td>
</tr>
<tr>
<td>Colom 1, Baris 2</td>
<td>Colom 2, Baris 2</td>
</tr>
</table>
</body>
</html>
Untuk menggabungkan kolom dalam halaman HTML yaitu dengan menggunakan

rowspan. Contoh:
<!DOCTYPE html>
<head>
<title>Belajar Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Baris yang di gabungkan</td>
<td>Colom 2 , Baris 1</td>
</tr>
<tr>
<td >Colom 2, Baris 2</td>
</tr>
</table>
</body>
</html>

 Pembuatan Form
Form digunakan untuk input data/entri data. Di dalam HTML terdapat beberapa control
form yang dapat digunakan, seperti control text box, list box, password box, text area box,
radio button, check box, reset button, submit button, hidden field, file select. Untuk
membuat form dalam HTML kita cukup menambahkan tag <form>...</form> diantara tag
<body>...</body>, untuk lebih jelasnya lihat kode di bawah ini:
....
<body>
<form>
Control form yg digunakan
</form>
</body>
....
Ket: tanda titik2 (... ) maksudnya ada kode lain sebelum dan sesudah tag
body, seperti tag html, head, title dll.
Control Text Box
Untuk membuat control text box dalam HTML kita cukup menambahkan tag <input/> yang
disimpan di antara tag <form>...</form>. Contoh:
....
<form>
Nama:
<input type="text" size="20" name="nama" /> <br>
Alamat:
<input type="text" size="40" name="alamat" />
</form>
....

Maka hasilnya akan terlihat seperti gambar di bawah ini:
Kita bisa lihat tampilan form tidak rapih, supaya tampilan terlihat rapih maka kita harus
menyimpan control form dalam tabel. Contoh:
....
<form>
<table>
<tr>
<td>Nama</td>
<td>:<input type="text" size="20" name="nama"/></td>
</tr>
<tr>
<td>Alamat</td>
<td>: <input type="text" size="40" name="alamat"/></td>
</tr>
</table>
</form>
....
Ketika kode tersebut di tes maka tampilan form akan terlihat lebih rapi.
Control Text Area
Untuk membuat text area anda cukup menambahkan tag <textarea> diantara tag form.
....
<form>
Message : <br>
<textarea name="msg" cols="20" rows="4"></textarea>
</form>
....

Berikut adalah tampilan dari control text area
Control List Box

Untuk membuat list box anda dapat menggungakan tag <select> untuk lebih jelasnya
lihatlah kode di berikut ini.
....
<form>
Program :
<select name="program">
<option value="">Pilih Program</option>
<option value="Web Arsitektur">Web Arsitektur</option>
<option value="Mastering CMS">Mastering CMS</option>
<option value="Print Design">Print Design</option>
<option value="Multimedia dan Animasi">Multimedia Animasi</option>
</select>
</form>
....
Berikut adalah bentuk dari control list box...
Jika kita tambahkan atribut size pada tag <select> dengan ukuran 5, maka bentuk list box akan
berubah seperti gambar berikut

Control Radio Button
Anda dapat menggunakan tag <input> untuk membuat radio button, dengan
type=”radio”. Contoh:
....
<form>
Jenis Kelamin:
<input type="radio" name="jkl" value="Pria"/>
Pria
<input type="radio" name="jkl” value="Wanita"/>
Wanita
</form>
....
Berikut adalah bentuk dari radio button.
Control Check Box
Untuk membuat check box sama seperti membuat radio button, hanya atribut type
pada tag input diganti menjadi checkbox, untuk lebih jelasnya lihat kode di bawah ini.

....
<form>
Hoby :
<input type="checkbox" name="baca" value="Baca Buku"/> Baca Buku
<input type="checkbox" name="olga" value="Olah Raga"/> Olah Raga
<input type="checkbox" name="main" value="Main Game"/> Main Game
<input type="checkbox" name="hiking" value="hiking"/> Hiking
</form>
....
Jika di jalankan di browser akan tampil seperti gambar di bawah ini:
Control Password Box, Submit dan Reset Button
....
<form>
Password :
<input type="password" name="password" />
<br/><br/>
<button type="submit" >Submit</button>
<button type="reset" >Reset</button>
</form>
....
LATIHAN SOAL PERTEMUAN 3
Buatlah halaman registrasi mahasiswa.

PERTEMUAN 4
MENGATUR TAMPILAN DENGAN CSS
Deskripsi:
Membahas mengenai Cascading Style Sheet untuk melakukan pengaturan tampilan halaman website
Tujuan Pembelajaran:
1. Mahasiswa mampu menggunakan tag atau perintah CSS untuk merubah tampilan website
CSS (Cascading Style Sheet)

A. Sekilas Tentang CSS
1. Pengertian dan fungsi CSS

CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur
tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.
Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian
juga sebaliknya. Teknologi CSS dimaksudkan untuk mempermudah perancangan web
yang indah dan fleksibel. Fleksibilitas adalah hal yang tidak akan diperoleh jika
menggunakan HTML saja. Satu file CSS (*.css) dapat digunakan untuk banyak halaman,
sehingga perubahan desain visual untuk banyak halaman dapat dilakukan hanya melalui
modifikasi satu file CSS. CSS dapat kita gunakan dalam mengendalikan ukuran gambar,
warna teks, warna tabel, ukuran border, warna border,warna hyperlink, warna mouse
over, spasi antar paragraf, spasi antar teks,margin kiri, kanan, atas, bawah, dan parameter
lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk
mengatur tampilan dokumen. Dengan
adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format
yang berbeda.
2. Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian membentuk suatu hubungan layaknya
hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah

teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C
pada tahun1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas
browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan
standar CSS.
3. Kelebihan CSS
Adapun beberapa kelebihan CSS adalah sebagai berikut:
a. Memisahkan desain dengan konten halaman web.
b. Mengatur desain sefisien mungkin.
c. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada
CSS saja.
d. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
e. Lebih mudah didownload karena lebih ringan ukuran filenya.
f. Satu CSS dapat digunakan banyak halaman web
B. Struktur Penulisan CSS
Selector { Properties : Value; }
Keterangan: Selector digunakan untuk menentukan element mana yang akan diatur stylenya.
1. Jenis-Jenis Selector CSS

CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.
a. Class selector.
Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun.
Kita dapat membuat nama class dengan hampir semua nama apapun. Karena class selector
dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling
serbaguna. Penulisan class selector dalam CSS disimbolkan dengan tanda titik ( . ).
Contoh: Penulisan code di dalam dokumen HTML
....
<h3 class=’judul’>
Belajar Membuat Website
</h3>
....

Penulisan code dalam CSSnya
.judul{
Font : 12pt Impact;
}
Perlu di tekankan sekali lagi, sebuah selector class dapat digunakan pada lebih dari satu
tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag
HTML yang bisa memiliki style yang sama dalam satu halaman
b. ID Selector
Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi
penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.
Contoh:
Penulisan code dalam dokumen HTML

....
<div id=’footer’>
Copyright © Ars Traning - 2014
</div>
....
Penulisan code di CSSnya
#footer
{ color:
blue;
border: 1px solid black;
}
Sekali lagi di tekankan selector ID digunakan hanya untuk 1 elemen pada satu halaman web.
Misalnya saja ID #footer diatas hanya digunakan sekali karena dalam satu halaman web hanya
ada 1 header.

c. Tag selector
Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang
berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule
untuk mendefinisikan bagaimana suatu tag akan ditampilkan.
Contoh:
Penulisan code di dokumen HTML
....
<h1> Mengarungi Samudra PHP </h1>
<h1> Belajar HTML dan CSS </h1>
....
Penulisan code di CSSnya
h1{
font: 12pt Impact;
color:red;
}
2. Cara Penggunaan CSS
Ada 3 cara penggunaan CSS yaitu inline CSS, embedded CSS, external CSS.
a. Inline CSS
Inline CSS merupakan cara penggunaan CSS dengan menambahkan langsung di tag
dokumen HTML-nya sebagai atribut.
Contoh:
<p style="color:blue">
Membuattulisan warna biru
</p>
<p style="font-style:italic;">
Membuattulisanmiring
</p>

Penulisan CSS dengan cara inline ini di mulai dengan kata style lalu di ikuti dengan syntax
propert:value.
b. Embedded CSS
Embedded CSS merupakan cara penggunaan CSS yang disisipkan di dalam tag
<style>...</style>. Tag style tersebut disimpan di antara tag <head>...</head>
Contoh:
<!DOCTYPE html>
<head>
<style>
p{ color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
<p>Belajar Css Mudah</p>
<p>Pengaturan paragraf dengan menggunakan
CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf
Atau yang berada diantara </p>
<p>dan</p>
akan memiliki format yang sama
</body>
</html>
c. External CSS
Cara ini menggunakan file CSS yang dituliskan secara terpisah dengan dokumen html.
Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua
halaman web anda. Ada dua langkah yang harus dikerjakan untuk menggunakan CSS dengan
cara ini
1) Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan:
style.css, lalu tuliskan kode-kode CSS di dalam file tersebut.

P{
font-family:
arial; font-size:
small; }
h1 {
color: red; }
2) Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya
dengan memasukkan kode di bawah ini yang disisipkan diantara tag < head > dan <
/head >
....
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
....
Latihan CSS
Pada latihan kali ini , kita akan belajar membuat Table dengan css dan membuat
form dengan css :
1. CSS Table
a. Pertama-tama , buat file dengan nama css_table.html .
b. Lalu copy script yang ada di bawah ini kedalam file css_table.html

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>The padding Property</h2>
<p>This property adds space between the border and the content in a table.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Maka tampilan dari script diatas seperti di bawah ini :
2. CSS Form
a. Pertama-tama, buat file dengan nama css_form.html .
b. Lalu masukkan script di bawah ini ke dalam file css_form.html .
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-
box;
}
button {
width: 100%;
background-color:
#4CAF50; color: white;
padding: 14px 20px;
margin: 8px 0;

border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h3>CSS Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="province">Province</label>
<select id="province" name="province">
<option value="jakarta">DKI Jakarta</option>
<option value="jawa tengah">Jawa Tengah</option>
<option value="bali">Bali</option>
</select>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Maka ketika script di atas kita jalankan di browser , tampilan nya seperti di bawah ini :

3. CSS Flexbox
Fungsi dari CSS Flexbox adalah untuk mengatur perataan elemen-elemen yang
ada di dalamnya baik secara horizontal maupun vertical tanpa menggunakan float
dan position . Untuk menggunakan CSS Flexbox, pertama-tama silahkan buat file
baru dengan nama css_flex.html . Lalu copy script di bawah ini ke dalam file
tersebut .
<!DOCTYPE html>
<html>
<head>
<title>CSS Flex</title>
<style type="text/css">
.container{
display: flex;
display: -moz-
flex;
display: -webkit-flex;
background-color:
#00BFFF;
}
.contain{
background-color:
#00FA9A; width: 100px;
margin: 10px;
text-align: center;

font-family: arial;
line-height: 75px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="contain">1</div>
</div>
</body>
</html>
Maka hasilnya seperti di bawah ini :
Untuk lebih lengkap nya , teman-teman dapat mempeljari css di w3schools.com/Css agar
lebih mengenal apa saja yang bisa CSS lakukan serta apa saja property dan value-nya.

PERTEMUAN 5
MENAMBAHKAN JQUERY PADA WEB
Deskripsi:
Membahas perintah-perintah Jquery Dasar yang bisa ditambahkan pada halaman web
Setelah melakukan bagian ini mahasiswa mampu:
1. Mahasiswa mampu menggunakan perintah JQUERY dasar untuk membuat website
Lebih interaktif.
MENGENAL JQUERY
JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh
beberapa situs yang canggih nan terkenal seperti: Google, Facebook, Twitter, Youtube, Nokia
dan masih banyak lagi. Tidak hanya situs interlokal, lokal juga ada kok yang telah memakai
jQuery, contohnya:VivaNews, Studio 21, Kompas dan lain-lain. Selengkapnya bisa dilihat di
https://js.foundation/about/members.
Apa itu jQuery?
jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery
menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do more”.
Mengapa memilih jQuery?
Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara
lain:
o Kompatibel dengan hampir seluruh browser

o jQuery telah digunakan oleh website-website raksasa
o Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
o Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com
o Didukung oleh banyak komunitas
o Disupport oleh plugin yang lengkap
o Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb

o Open source atau Free
o jQuery lebih diminati oleh para developer web saat ini

Apa kemampuan yang dimiliki jQuery?
Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:
 Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

 Mempermudah modifikasi/perubahan tampilan halaman web.
 Mempersingkat Ajax (Asynchronous Javacsript and XML).
 Memiliki API (Application Programming Interface).
 Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
 Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
Bagaimana cara kerja jQuery?
Cara kerja jQuery dapat dijabarkan sebagai berikut, masih menggunakan contoh diatas sebagai
penjelasannya.
1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah
ditampilkan semua di halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});
2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan
class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi
Selector.

$("#foto")
$(".sembunyi")
$(".tampil")
3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap

elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan
memunculkan kembali gambar.
$(".sembunyi").click(function()
{
$("#foto").hide("slow");
)};
Dengan memahami cara kerja jQuery, semoga lebih mempermudah untuk mempelajari.
MEMAHAMI SELECTOR
Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan

operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemn tersebut. Adapun
elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
1. Nama Tag
2. Id
3. Class
Untuk mengetahui bagaimana cara selector dalam memilih elemen-elemen tersebut, akan
disajika beberapa contoh sederhana pada bagian berikutnya.
 Selector Tag
Cara menggunakan selector tag adalah dengan langsung menyebut nama tag
elemennya.

 Selector Id
Cara menggunakan Selector id adalah dengan menyertakan tanda kres (#) sebelum
nama elemennya.
 Selector Class
Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum
nama elemennya. Latihan-latihan berikut untuk menjelaskan teori diatas.
Latihan 1
<!DOCTYPE html>
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">
$("document").ready(function ()
{ alert("Masuk ke halaman
web");
});
</script>
</body>
</html>

Latihan 2
<!DOCTYPE html>
<html>
<head>
<title>Membuat Alert</title>
</head>
<body>
<input type="submit" value="click me"/>

$("input").click(function(){ alert("hello jquery!");
});
});
</script>
</body>
</html>
Berikut hasilnya :

Latihan 3
<!DOCTYPE html>
<html>
<head>
<title>LATIHAN 3</title>
</head>
<body>
<p id="p1">Ini Isi Paragraf 1</p>

$("document").ready(function(){
$("#p1").css("color","red");
$("#p3").css("color","pink");
});
</script>
</body>
</html>
Berikut hasilnya :

<!DOCTYPE html>
<html>
<head>
<title>Latihan 4</title>
.merahkuning {
color: red;
font-weight: bold;
background-color :yellow;
padding: 3px;
}
.kuninghitam {
color: Yellow;
background-color: black;
}
</style>
</head>
<body>
<h1>Judul buku kuliah pemrograman web</h1>
<ol id="judul">
<li class="subl">Pemrograman PHP</li>
<li>Database mysql</li>
<li class="subl">Mempercantik web dengan jquery</li>
</ol>

$("#judul").addClass("merahkuning");
$(".sub1").addClass("kuninghitam");
});
</script>
</body>
</html>

EVENTS
Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan
dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi
tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi
terhadapnya setelah diklik (click) atau setelah klik 2x (dblclik), setelah mouse berada
diatas objek (hover), dan sebagainya.
A. Event Click()
Event click dijalankan setelah terjadi klik pada suatu elemen yang telah
ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Event Click</title>
</head>
<body>
<a href="http://www.ars.ac.id">
Klik di sini untuk menuju halaman ARS
</a>
$('a').click(function ()
{ alert("Selamat datang di ARS
");
});
});
</script>
</body>
</html>

B. Event dblclick()
Event dblclick akan dijalankan setelah terjadi klik 2x pada suatu elemen yang
telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>LATIHAN DOUBLE CLICK</title>
div {
background: yellow;
width: 60px;
height: 60px;
float: left;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Klik 2 kali pada setiap kotak untuk mengubah warna</p>
<div></div>
<div></div>
<div></div>

$("div").dblclick(function () {
$(this).css({background:"red"});
});
});
</script>
</body>
</html>
C. Event mouseover()
Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang
ditentukan.
D. Event mouseleave()
Event mouseleave akan dijalankan ketika kursor mouse meninggalkan elemen
yang ditentukan.
Untuk lebih jelasnya penggunaan event mouseover dan mouseleave, perhatikan skrip
berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>LATIHAN MOUSE OVER DAN MOUSE LEAVE</title>
div {
background: yellow;
width: 60px;
height: 60px;
float: left;

margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Klik 2 kali pada setiap kotak untuk mengubah warna</p>
<div></div>
<div></div>
<div></div>
<div></div>

$("div").mouseover(function () {
$(this).css({background:"red"});
});
$("div").mouseleave(function () {
$(this).css({background:"yellow"});
});
});
</script>
</body>
</html>
EFFECTS
Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen,

menggerakan elemen, dan menganimasikan elemen tersebut.
A. Efek Fade()
Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahan-lahan,
biasanya digunakan untuk transisi/pergantian suatu objek dengan objek yang lain, sehingga
transisinya terlihat lebih halus. Ada 3jenis efek fade, yaitu fadeln, fadeOut, dan fadeTo. Untuk
lebih jelasnya, lihat contoh sederhana pada skrip berikut;

<!DOCTYPE html>
<html>
<head>
<title> Efek Fade In, Fade Out dan Fade to</title>
#kotak {
width: 250px;
height: 180px;
background: yellow;
border : 2px solid black;
}
</style>
</head>
<body>
<div id="kotak"></div><br/>
<button class="fadeout">Fade Out</button>
<button class="fadein">Fade In</button>
<button class="fadeto3">Fade To 0.3</button>

$(".fadeout").click(function(){
$("#kotak").fadeOut("slow");
});
$(".fadein").click(function(){
$("#kotak").fadeIn("slow");
});
$(".fadeto3").click(function(){
$("#kotak").fadeTo("9000",0.3);
});
});
</script>
</body>
</html>

Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kotak berwarna kuning dan tiga
buah tombol. Coba klik tombol fade out, maka kotak akan menghilang, kemudian coba klik
tombol fade in untuk menampilkan kotak kembali. Dan terakhir coba klik tombol fade to 0.3,
maka kotak akan terlihat pudar warnanya. Kita juga bisa mengatur waktu untuk efek fade dengan
menggunakan fungsi set time Out,misalnya dalam waktu3detik, maka elemen teksnyaakan
menghilang dari pandangan. Untuk lebih jelasnya, simak skrip berikut:
Sekarang coba jalankan skrip diatas maka akan tampil sebuah kotak berwarna kuning terang
dengan teks berwarna hitam dan pada waktu 3detik kotak dan teks akan menghilang secara
perlahan-lahan.
B. Efek slide()
Efek slide digunakan untuk menghilangkan atau menampilkan elemen seperti membuka/menutup
sesuatu. Ada tiga jenis slide, yaitu SlideUp, SlideDown, dan SlideToggle. Untuk lebih jelasnya,
lihat contoh pada skrip berikut:
<!DOCTYPE html>
<html>
<head>
<title>EFEK SLIDE</title>
div.pesan{
height: 120px;
display: none;
}
div.pesan,
p.flip{ margin:
0px; padding:
0px; text-align:
center;
background: lightyellow;
border: 1px solid black;
}
</style>
</head>
<body>

<div class="pesan">
<p>
sukses bukanlah kunci kebahagiaan
kebahagiaanlah kunci kesuksesan
</p>
jika senantiasan melakukan segala sesuatu dengan penuh cinta,maka anda
akan sukses
</div>
<p class="flip">
Tampilkan/sembunyikan pesan
</p>
<script type="text/javascript"src="jquery-3.3.1.min.js"></script>
$(".flip").click(function(){
$(".pesan").slideToggle("slow");
});
});
</script>
</body>
</html>
Pada Skrip diatas, kita hanya menggunakan sebuah fungsi slide, yaitu slideToggle yang berfungis
menberikan efek slide apabila pada eleen belum ada efek slidenya, sedangkan menghilangkan
efek slide apabila pada elemen tersebut sudah ada efek slidenya, jadi fungsi slideToggle
mencakup dua buah fungsi slide lainnya, yaitu slideUp dan slideDown.
Sekarang, coba jalankan skrip diaas, maka akan tampil teks Tampilkan/Sembunyikan pesan,
coba klik pada teks tersebut, maka akan tampil pesan dengan efek slide.

C. Show Dan Hide Password Dengan Jquery
Show hide password adalah fitur untuk menampilkan password yang di ketik . Jika
biasanya pada form , pada saat mengetikan password , hanya akan muncul pola titik atau
bintang , maka dengan Jquery kita dapat melihat password yang sudah kita ketik .
<!DOCTYPE html>
<html>
<head>
<title>Show Hide Form Password Dengan JQuery</title>
<script type="text/javascript" src=”jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Show Hide Form Password Dengan JQuery</h1>
<div class="kotak">
<form>
<input class="form-password" type="password">
<br/>
<br/>
<input type="checkbox" class="form-checkbox"> Show password
<br/>
<br/>
<input class="form-submit" type="submit" value="Login">
</form>

</div>
$('.form-checkbox').click(function()
{ if($(this).is(':checked')){
$('.form-password').attr('type','text');
}else{
$('.form-password').attr('type','password');
}
});
});
</script>
</body>
</html>
Sekarang coba jalankan skrip di atas , maka hasil dari skrip tersebut seperti di bawah ini

Memasang Plugin Jquery Slider
Salah satu yang membuat website menjadi menarik adalah adanya slide show atau slider.
Slider , bisa didapatkan dari plugin jquery. Jadi kita tinggal mengambil kodenya lalu di paste
pada website. Penulis akan mencontohkan mengambil plugin slider dari
http://responsiveslides.com/. berikut langkah – langkahnya :
1. Buka website http://responsiveslides.com/

2. Klik tombol Download the latest version from github yang terletak di paling bawah
3. Buat folder dengan nama slider_jquery
4. Ekstrak file yang sudah di download ke dalam folder slider_jquery
5. Buat file index.html di dalam folder slider_jquery
6. Buka file demo.html di dalam folder demo

7. Copy kode yang berada diantara <head> … </head> pada file demo.html , lalu paste script
tersebut di antara <head> … </head> pada file index.html yang sudah di buat

<head>
<meta charset="utf-8">
<title>ResponsiveSlides.js · Responsive jQuery slideshow</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="responsiveslides.css">
<link rel="stylesheet" href="demo/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
</head>
8. Copy kode slider yang berada di antara <body> … </body> pada file demo.html , , lalu
paste script tersebut di antara <body> … </body> pada file index.html yang sudah dibuat
<body>
<h1 style="text-align: center; color: white;">Slider JQuery</h1>
<br>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="demo/images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<p class="caption">This is another caption</p>
</li>
<li>
<p class="caption">The third caption</p>
</li>
</ul>
</div>
</body>
9. Lalu pada tag <head>.....</head> , tambahkan script di bawah ini

$
("#slider4").responsiveSlid
es({ auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
Maka hasil dari script di atas seperti di bawah ini :

Memasang Plugin Jquery Pop Up Fancybox
Langkah – langkah menggunakan plugin jquery pop up fancybox adalah
1. Buka website Fancybox : http://fancybox.net/ , lalu download
2. Buat folder dengan nama fancybox

3. Ekstrak file yang di download kedalam folder fancybox
4. Copy semua yang ada di folder jquery fancybox kecuali index.html, paste di folder
fancybox
5. Buat file dengan nama index.html pada folder fancybox

6. Buka file index.html pada folder jquery fancybox
7. Copy kode yang berada di antara <head> …. </head>, lalu paste di antara tag head pada
file index.html anda
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-
1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-
3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css"
media="screen" />
<link rel="stylesheet" href="style.css" />
</head>
8. Lalu copy kode untuk menampilkan pop up galeri di dalam tag <body>, paste di tempat
yang sudah disiapkan
<body>
<div id="content">
<h2 align="center">Popup Fancybox</h2>
<br>
<p>
Galeri Ars <br />
<a rel="example_group" href="example/9_b.jpg" title="Lorem ipsum
dolor sit amet"><img alt="" src="example/9_s.jpg" /></a>
<a rel="example_group" href="example/10_b.jpg" title=""><img alt=""

src="example/10_s.jpg" /></a>
<a rel="example_group" href="example/11_b.jpg" title=""><img alt=""

src="example/11_s.jpg" /></a>
<a rel="example_group" href="example/12_b.jpg" title=""><img

class="last" alt="" src="example/12_s.jpg" /></a>
</p>
</div>
</body>

9. Kemudian , pada bagian tag head , tambhkan script di bawah ini :
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray,
currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' +
currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
Berikut hasil dari script di atas

PERTEMUAN 6
BOOTSTRAP
Deskripsi:
Membahas mengenai framework bootstrap dan penggunaaanya
1. Mahasiswa mampu membuat website dengan memanfaatkan framework bootstrap
Bootstrap adalah CSS Framework untuk membangun Website dengan lebih cepat, serta
Responsive untuk berbagai resolusi, baik Desktop, Tablet, dan Smartphone. Dengan berbagai
fitur-fitur yang lengkap serta tampilan yang menarik, kita dapat membangun layout Website
lebih cepat. Implementasi latihan bootstrap ini, menggunakan teks editor bluefish atau notepad+
+.
A. Download Bootstrap
Download Bootstrap di http://getbootstrap.com/

CSS Framework yang di download adalah versi 4.0.0

B. Instalasi Bootstrap
1. Download JQuery di https://code.jquery.com/jquery-3.2.1.slim.min.js
File JQuery ini wajib ada karena function Javascript yang ada di Bootstrap diambil
dari jQuery.
2. Pada saat klik link https://code.jquery.com/jquery-3.2.1.slim.min.js, tampil kode

javascript, untuk menyimpannya pilih semua kodenya atau select all atau ctrl+a
kemudian copas ke file baru di editor dan simpan dengan nama file jquery-
3.2.1.slim.min.js.
3. Download Poper di:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
File Poper ini juga wajib ada karena function Javascript yang ada di Bootstrap juga
diambil dari Poper.
4. Pada saat klik link
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js,
lakukan langkah yang sama seperti di langkah ke-2 tadi, hanya saja nama filenya
disimpan dengan nama poper.js.
5. Hasil download bootstrap masih dalam keadaan .zip , maka perlu di ekstrak terlebih
dahulu. Simpan dengan nama folder latihanbootstrap.
6. Pindahkan file jquery-3.2.1.slim.min.js dan poper.js ke folder js yang berada

di folder latihanbootstrap.
7. Jadi struktur foldernya seperti ini :

8. Selanjutnya buatlah file index.html, simpan di folder latihanbootstrap. Lalu
isikan kode seperti beikut ini :

<!DOCTYPE html>
<html>
<head>
<title>Latihan Bootstrap</title>

<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>




<script type="text/javascript" src="js/ jquery-1.11.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
9. Dari langkah no. 1 hingga no. 8, kita bisa menggunakan alternatif lain dalam
pemanggilan file-file pendukung Bootstrap. Yaitu dengan menggunakan link file
secara online. Jadi kita tidak perlu download Bootstrap, hanya saja cara ini harus
terkoneksi dengan internet.
Untuk CSS Bootstrap:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

Untuk Jquery, Poper, dan Javascript Bootstrap:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
Bootstrap merupakan css framework pertama yang membuat website responsive untuk versi
mobile. Biasanya pada smartphone terdapat fitur perbesar layar atau zooming. Agar bootstrap
dapat menyesuaikan dengan fitur tersebut maka perlu ditambahkan kode ini dalam tag <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Sebaliknya , Anda dapat menonaktifkan kemampuan zooming pada perangkat mobile dengan
menambahkan atribut user-scalable=no di meta tag tersebut. contoh :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-

scale=1, user-scalable=no">

C. Layout
Komponen dan opsi untuk meletakkan suatu proyek Bootstrap, termasuk kontainer
pembungkus, sistem grid yang kuat, objek media yang fleksibel, dan kelas utilitas yang
responsif.
4. Container
Container adalah elemen tata letak paling dasar dalam Bootstrap dan diperlukan saat
menggunakan sistem grid defaul. Pilih dari container berukuran tetap responsif (artinya
perubahan lebar maksimal pada setiap titik istirahat) atau lebar cairan (artinya 100% lebar
sepanjang waktu).
Bootstrap menyediakan 2 tampilan layout yaitu fixed atau fluid (sidebar atau fullwidth).
Pada fixed menggunakan presentase pixel (px) sedangkan fluid menggunakan presentase persen
(%).
a. FIXED
<div class="container">
...
</div>
b. FLUID
<div class="container-fluid">
...
</div>

5. Grid System
Grid system adalah sebuah layout user interface yang berbentuk kotak – kotak seperti
grid. Kotak – kotak tersebut digunakan pada layout bootstrap agar desain tampak rapid an enak
dipandang. Sebenarnya yang perlu diperhatikan dalam membuat grid sistem ini adalah
class=”row” dan class=”col…”. Untuk membuat grid dibutuhkan baris dan kolom. Nah class row
inilah bertindak sebagai baris sedangkan class col sebagai kolom. Selengkapnya silahkan pelajari
lebih lanjut di https://getbootstrap.com/docs/4.0/layout/grid/.
Berikut terdapat gambar untuk pengaturan grid pada berbagai resolusi.
D. Content
Content merupakan kumpulan perubahan CSS elemen-spesifik dalam satu file bootstrap
untuk memberikan dasar yang elegan, konsisten, dan sederhana dalam membangun sebuah web.

1. Tipografi
a.Heading
<h1>h1. Bootstrap heading</h1>
b. Display
<h1
Heading
class="display-1">Display
1</h1>
<h1 class="display-2">Display 2</h1>
c. Lead
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis
mollis, est non commodo luctus.
</p>
Untuk lebih selengkapnya, bisa dilihat di link

ini https://getbootstrap.com/docs/4.0/content/typography/.
2. Image
Dokumentasi dan contoh untuk memilih gambar menjadi perilaku responsif (sehingga
tidak menjadi lebih besar dari elemen induknya) dan menambahkan gaya ringan kepada mereka-
semuanya melalui kelas.
a.Responsive Images
<img src="..." class="img-fluid" alt="Responsive image">

b. Image Thumbnails
<img src="..." alt="..." class="img-thumbnail">
c. Aligning Images
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
3. Tabel
<table>
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Jenis Kelamin</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Danny Julian Pratama</td>
<td>Putussibau</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>Regia Susanti</td>
<td>Garut</td>
<td>Perempuan</td>
</tr>
<tr>
<td>Dika Alamsyah</td>
<td>Yogyakarta</td>
<td>Laki-laki</td>
</tr>
</tbody>
</table>

Beberapa class pada table :
- class="table"
- class="table table-dark"
- class="table table-striped "
- class="table table-striped table-dark"
- class="table table-bordered "
- class="table table-bordered table-dark"
- class="table table-hover"
- class="table table-sm"
- class="table table-sm table-dark"
- class="table table-sm"
Beberapa class yang bisa ditambahkan pada tag thead:
- class="thead-dark"
- class="thead-light"
Lebih lengkapnya bisa kunjungi pada link ini,

https://getbootstrap.com/docs/4.0/content/tables/.
E. Components
Component adalah bagian-bagian dari perlengkapan Bootstrap untuk memppercantik
tampilan perlengkapan default dari HTML.
a. Alert
Alert adalah salah satu komponen untuk memberikan pesan umpan balik kontekstual
untuk tindakan pengguna biasa dengan sedikit pesan peringatan yang tersedia dan fleksibel.

<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
b. Badge
Badge merupakan dokumentasi dan contoh untuk lencana, komponen hitungan dan
pelabelan kecil dari Bootstrap.
<h1>Example heading <span class="badge badge-secondary">New</span></h1>


ini https://getbootstrap.com/docs/4.0/components/badge/.

c. Breadcrumb
Beradcumb berfungsi untuk menunjukkan lokasi halaman saat ini dalam hirarki
navigasi yang secara otomatis menambahkan pemisah melalui CSS.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>

ini https://getbootstrap.com/docs/4.0/components/breadcrumb/.
d. Buttons
Buttons merupakan gaya tombol kustom Bootstrap untuk tindakan dalam form, dialog,
dan lainnya dengan dukungan untuk berbagai ukuran.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

ini https://getbootstrap.com/docs/4.0/components/buttons/.
e. Cards
Cards merupakan penyedia kontainer konten yang fleksibel dan dapat diperluas
dengan berbagai varian dan pilihan.

<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Judul Postingan </h5>
<p class="card-text">Some quick example text to build on the card title
and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Selengkapnya </a>
</div>
</div>

ini https://getbootstrap.com/docs/4.0/components/card/.
f. Collapse
Collapse adalah beralih visibilitas konten di seluruh proyek Anda dengan beberapa
kelas dan plugin JavaScript kami.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#collapseExample" aria-expanded="false" aria-
controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore
wes anderson cred nesciunt sapiente eaproident.
</div>
</div>

ini https://getbootstrap.com/docs/4.0/components/collapse/.

g. Dropdowns
Dropdowns adalah peralihan hamparan kontekstual untuk menampilkan daftar tautan
dan lebih banyak lagi dengan plugin Dropdown Bootstrap.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#collapseExample" aria-expanded="false" aria-
controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore
wes anderson cred nesciunt sapiente ea proident.
</div>
</div>

ini https://getbootstrap.com/docs/4.0/components/dropdowns/.
h. Forms
Form Bootstrap merupakan ontoh dan pedoman penggunaan untuk gaya kontrol form,
opsi tata letak, dan komponen khusus untuk membuat berbagai macam bentuk form.

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your
email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

ini https://getbootstrap.com/docs/4.0/components/forms/.
i. Input Groups
Input Groups berfungsi untuk mudah dalam memperluas bentuk form dengan
menambahkan teks, tombol, atau kelompok tombol di kedua sisi input tekstual, pilihan
khusus, dan input file ubahsuaian.

<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-
label="Username" aria-describedby="basic-addon1">
</div>

<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<label for="basic-url">Your vanity URL</label>

<span class="input-group-text" id="basic-
addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-
describedby="basic-addon3">
</div>

<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest
dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>

ini https://getbootstrap.com/docs/4.0/components/input-group/.
j. Jumbotron
Jumbotron adalah komponen Bootstrap yang ringan dan fleksibel untuk menampilkan
gaya unit dalam suatu konten.
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style
component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out
within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>

ini https://getbootstrap.com/docs/4.0/components/jumbotron/.
k. List Groups
List Groups adalah komponen yang fleksibel dan kuat untuk menampilkan serangkaian
konten. Modifikasi dan perpanjang untuk mendukung hampir semua konten di
dalamnya.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>

ini https://getbootstrap.com/docs/4.0/components/jumbotron/.

l. Modal
Modal adalah fitur dari JavaScript Bootstrap untuk menambahkan dialog ke situs Anda
untuk lightbox, pemberitahuan pengguna, atau konten khusus sepenuhnya.
<div class="modal" tabindex="-1" role="dialog">

<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

ini https://getbootstrap.com/docs/4.0/components/modal/.
m. Navs
Navs adalah dokumentasi dan contoh bagaimana menggunakan komponen navigasi
yang disertakan oleh Bootstrap.

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<a class="nav-link" href="#">Link</a>
</li>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

ini https://getbootstrap.com/docs/4.0/components/navs/.
n. Navbar
Navbar adalah dokumentasi dan contoh untuk header navigasi yang kuat dan
responsif. Hampir mirip dengan Navs, hanya saja Navbar lebih fokus untuk menu
navigasi bagian atas. Navbar ini sudah termasuk dukungan untuk branding, navigasi,
dan banyak lagi.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>

ini https://getbootstrap.com/docs/4.0/components/navbar/.
o. Pagination
Pagination merupakan dokumentasi dan contoh untuk menampilkan pagination untuk
menunjukkan serangkaian konten terkait ada di beberapa halaman.
<nav aria-label="Page navigation example">

<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
ntuk lebih selengkapnya, bisa dilihat di link

ini https://getbootstrap.com/docs/4.0/components/pagination/.

PERTEMUAN 7
STUDI KASUS DDL DAN DML
TUGAS 2
a. Soal Studi Kasus dibuat oleh Dosen Pengampu Mata Kuliah dan
dikerjakan oleh mahasiswa secara individu di kelas
b. Soal terdiri dari kombinasi pembahasan HTML, CSS, BOOTSTRAP
dan JQUERY
c. Soal akan disampaikan pada pertemuan 7.

PERTEMUAN 8
UJIAN TENGAH
SEMESTER
Pertemuan 8 Ujian Tengah Semester

PERTEMUAN 9
PENGENALAN PHP
Deskripsi :
Membahas cara penggunaan Graphic User Interface phpMyAdmin.
1. Mahasiswa mampu mengetahui Bahasa pemrograman PHP
2. Mahasiswa mengetahui operator pada Bahasa pemrograman PHP
Php merupakan salah satu bahasa pemrograman yang bayak digunakan oleh developer
untuk mengembagkan suatu system informasi. Dia antaranya adalah di kalangan Pendidikan,
perkantoran, kesehatan, dan lain sebagainya. Secara sederahana PHP adalah Bahasa
pemrograman script server-side yang di desain untuk perkembangan web dan juga PHP bias
diguankan sebagai Bahasa pemrogrman umum.
Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan
rekursif, yakni kata dimana kepanjangannya terdiri dari singkatatan itu sendiri. PHP bersifat
open source sehingga banyak digunakan untuk proyek open source.
Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP
pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama
Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah
data formulir dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakan PHP/FI
dengan perilisan kode sumber ini menjadi terbuka, maka banyak pemrograman yang tertarik
untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0 dimana intreperter sudah diimplementasi dengan
pemrogrmana C. dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan
kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi
lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis
interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP
diubah menjadi akronim berulang PHP: Hypertext Preprocessing.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal
dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21.
Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks
tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP
mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek
ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma
berorientasi objek. Server web bawaan ditambahkan pada versi 5.4 untuk mempermudah
pengembang menjalankan kode PHP tanpa menginstall software server.
Versi terbaru dan stabil dari bahasa pemograman PHP saat ini adalah versi 7.0.16 dan 7.1.2
yang resmi dirilis pada tanggal 17 Februari 2017.
Kenapa Belajar PHP?

Mungkin diluar sana banyak sekali bahasa pemrograman yang di tawarkan untuk di

kembangkan. Namun pembelajaran dibuku ini memberikan sebuah pilihan untuk para pemula
yang belum kenal dengan pemrograman bisa memilih dan belajar bagaimana belajar dengan
PHP.
Berikut mengapa kita harus belajar PHP:
1. Gratis

Artinya siapa saja bisa menggunakan bahasa pemrograman ini, dan banyak domain
menggunakan PHP mudah untuk diguanakan.
2. Cross Platform
Artinya di guankan di berbagasi system operasi, mulai dari windows, linux dan mac.
3. Mendukung banyak database

PHP telah banyak mendukung database untuk pengembangannya, seperti Frontbase mSQL,
Direct MS-SQL, MySQL, ODBC, Oracle, Ovrimos, PostgresSQL, SQL Lite, dan lain-lain.
4. On The Fly
Artinya dapat membuat dokumen text, word, exel, pdf, menciptakan images dan flas, dan lain
sebagainya.
Karakteristik PHP
Berikut karakteristik pada pemrograman PHP,
a) Extension harus .php
Setiap sintak / skrip PHP harus disimpan dengan extention .php, misal test.php. Jika
didalam file .php tidak ada skrip PHP tidak menjadi masalah akan tetap diproses misal
didalam file .php isinya hanya skrip html saja maka akan tetap di proses.
b) Sintax harus ditulis dalam dilementer atau sering disebut dengan tag PHP
Sintak PHP tidak akan perjalan atau tidak akan diproses jika sintak tersebut tidak diletakan
didalam delimenter php yaitu
<?php dan ?>.
<?php //pembuka
//Disini sintak PHP
?> //penutup
c) Sintak PHP mengikuti bahasa induknya bahasa C
Seperti pada artikel sejarah php awalnya PHP merupakan sebuah program yang dibuat
menggunakan bahasa C untuk menanganai sebuh form untuk koneksi ke database.
sehingga sintak PHP hampir sama dengan baha C, seperti case sensitive dan diakhiri tanda
; disetiap akhir dari sintak.
d) PHP dapat diguankan bersamaan dengan HTML
PHP karana merupakan bahasa pemograman khusus untuk web maka sangat dengan
mudah digunakan bersmaan dengan html, baik tag html didalam PHP atau sebaliknya.
e) PHP merupakan bahasa server side scripting
Artinya perlu penerjemah atau kompilasi dari sisi server. Salah satu software yang
mendukung PHP adalah apache2.
f) PHP Open Source
PHP dapat digunakan secara gratis dan bebas dikembangkan.
g) PHP Multi Platform
Dapat dijalankan diberbagai platfrom OS seperti linux, windows, dan mac yang membuat
bahasa pemograman ini banyak diminati.
Perisapan Lingkungan PHP

Untuk bekerja dengan PHP, perlu beberapa aplikasi yang dibutuhkan, yaitu

1. Web server (Apache, IIS, Personal Web Server/PWS)
2. PHP server ( dapat di download di php.net )
3. Database Server (MySQL dan lain-lain)
4. Web editor (Sublime Text, Visual Studi Code)
Untuk menggunakan tools aplikasi yang didalam nya sudah terdapat web server (Apache),
PHP Server, dan MYSQL yang terintegrasi menjadi satu. Tools tersebut dapat diinstal di PC
sebagai saran belajar PHP. Salah satu contohnya adalah XAMPP yang bisa dijalankan di
windows, LAMP yang bisa diajalankan di Linuk, dan lain -lain.
Instal Text Editor untuk PHP

Banyak tools yang menyediakan untuk text editor php, misalnya seperti notepade,
notepade++, sublime text, visual studio code, dreamweaver, dan lain sebagainya. Silahkan pilih
salah satunya saja . untuk instalannya silahkan cek di google.com karena sudah banyak sekali
tutorialnya.
Sintax PHP
Secara sederhana sintax penulisan PHP sangat simple yaitu :
>?php
//syntax php di letakkan disini …
//kode php di akhiri Degnan titik koma ‘;’
?>
Untuk mengetikkan baris code php, maka anda perlu mengapitnya dengan tag <?php dan
di akhir dengan ?> karena di luar dari itu php engine tidak menganggapnya sebagai script php,
melainkan hanya html biasa. Sebagai contoh kita akan menggunakan php, untuk menampilkan
kalimat "Hallo dunia PHP?!" kita cukup membuka notepad, lalu ketikan seperti ini di notepad :
<?php
Echo”Hallo dunia PHP?! “;
?>
Maka akan muncul tampilan seperti berikut ini

 Variable
Misalkan dalam PHP kita akan menyimpan suatu nilai berupa angka atau string dalam
suatu variable, caranya adalah membuat nama variable terlebih dahulu kemudian diberikan
suatu assigmnet pada nilai yang di inginkan. Perhatikan sintaxs berikut ini;
$nama_variabel = nilai;
Note : jangan lupa tanda dollar ($)
Contoh:
<?php
$hello = “Hello World”;
$sebuah_bilangan = 4;
$bilanganYangLain = 8;
Dari contoh di atas tampak bahwa dalam PHP, nama variable tidak perlu dideklarasikan
terlebih dahulu seperti halnya bahasa pemrogrman C/C++.
Ada beberapa aturan dalam penamaan variable yaitu :
- Nama variable harus diawali dengan huruf atau underscore( _ )
- Nama variable hanya boleh dituliskan dengan alpha numeric a-z, A-Z,)-9 dan underscore
- Nama variable yang terlebih dahulu dari satu kata, dapat dipisahkan dengan underscore
 Echo
Seperti yang kita lihat pada contoh-contoh kode PHP sebelumnya, bahwa printah echo
digunakan untuk menampilkan teks ke dalam browser. Suatu teks atau string dapat
dituliskan di browser dengan langsung dituliskan dalam echo yang diapit oleh tanda petik
ganda (quotes) atau menyimpan string atau teks terlebih dahulu dalam suatu variable
kemudian dituliskan dalam echo. Berikut contohnya:
<?php
$StringKu = “Hello”;

Echo” $StringKu;
Echo”<h1>I Love using PHP!</h1>”;
 Operator
- Operator Aritmatika
Berikut ini adalah table operator aritmatik, makna dan contohnya
Operator Makna Contoh
+ Pejumlahan 2+4
- Pengurangan 6–3
* Perkalian 2*2
/ Pembagian 10 / 2
% Modulus 43 % 10
Contoh :
<?php
$penjumlahan = 2 + 4;
$pengurangan = 6 - 2;
$perkalian = 5 * 3;
$pembagian = 15 / 3;
$modulus = 5 % 2;
echo "Menampilkan penjumlahan: 2 + 4 = ".$penjumlahan."<br>";
echo "Menampilkan pengurangan: 6 - 2 = ".$pengurangan."<br>";
echo "Menampilkan perkalian: 5 * 3 = ".$perkalian."<br>";
echo "Menampilkan pembagian: 15 / 3 = ".$pembagian."<br>";
echo "Menampilkan modulus: 5 % 2 = " . $modulus.";
?>
- Operator Perbandingan
Perbandingan digunakan untuk menguji hubungan antara nilai dan atau variabel. Operator ini
digunakan dalam suatu statement bersyarat yang selalu menghasilkan nilai TRUE atau
FALSE.
Misalkan:
$x = 4; $y = 5;
berikut ini adalah beberapa contoh penggunaan operator perbandingan dan hasilnya.
Operator Makna Contoh Hasil
== Sama dengan $x == $y False
!= Tidak sama dengan $x != $y True
< Lebih kecil dari $x < $y True
> Lebih besar dari $x > $y False
<= Lebih kecil atau sama dengan dari $x <= $y True
>= Lebih besar atau sama dengan dari $x >= $y False

PERTEMUAN 10
FUNGSI MODULARITAS PHP DAN
PERCABANGAN
Deskripsi :
Membahas tentang Modularitas PHP dan Percabangan
Setelah selesai membahas bab ini mahasiswa mampu :
1. Menggunakan perintah percabangan pada PHP
2. Menggunakan modularitas pada PHP
 Modularitas
Suatu program yang baik seharusnya program yang besar dipecahkan menjadi program-
program yang kecil yang selanjutnya disebut modul. Modul-modul kecil tersebut dapat
dipanggil sewaktu-waktu diperlukan. Dalam PHP juga sudah mendukung konsep tersebut

yang selanjutnya diberinama modularitas. Kita dapat menyisipkan isi suatu file/modul lain
ke dalam file/modul tertentu.
- Include ()
Untuk memudahkan pemahaman, diberikan contoh berikut. Misalkan kita akan membuat
menu link sejumlah 4 buah yaitu index, about, links, dan contact pada setiap halaman
web yang kita buat. Teknik yang digunakan adalah membuat menu link dalam suatu
modul tersendiri kemudian modul tersebut dipanggil pada setiap halaman web yang
diinginkan terdapat menu link di dalamnya.
menu.php
<html>
<body>
<a href="index.php">Home</a> -
<a href="about.php">About Us</a> -
<a href="links.php">Links</a> -
<a href="contact.php">Contact Us</a> <br>
index.php
<?php
include("menu.php");
?>
<p>Ini adalah halaman index</p>
</body>
</html>
about.php
<?php
include("menu.php");
?>
<p>Ini adalah halaman about</p>
</body>
</html>
Dari teknik di atas tampak adanya kemudahan dalam membuat halaman web. Dalam hal
ini, kita tidak perlu membuat menu link di setiap halaman web yang ada. Bayangkan
seandainya kita punya halaman web sejumlah 100 buah yang kesemuanya ingin diberi
menu link tanpa menggunakan teknik di atas, tentu hal tersebut sangat merepotkan.
Meskipun secara teknis, kode pembangun web dipecah dalam modul-modul, namun
ketika di browser akan terlihat menyatu. Berikut ini adalah kode HTML yang dihasilkan
oleh browser ketika membuka halaman web index.php
<html>
<body>
<a href="index.php">Home</a> -
<a href="about.php">About Us</a> -
<a href="links.php">Links</a> -
<a href="contact.php">Contact Us</a> <br>
<p>Ini adalah halaman index</p>
</body>

</html>
- Require()
Cara penggunaan maupun fungsi dari require() sama dengan include(). Jadi apa
perbedaannya? Sebaiknya mana yang kita gunakan? Perhatikan contoh berikut ini.
<?php
include("noFileExistsHere.php");
echo "Hello World!";
?>
dengan asumsi bahwa file noFileExistxHere.php tidak ada.

Maka dengan menggunakan include() akan dihasilkan tampilan:
Warning: main(noFileExistsHere.php): failed to open stream: No such file or directory in
include.php on line 2
Warning: main(): Failed opening 'noFileExistsHere.php' for inclusion
(include_path='.:/usr/lib/php:/usr/local/lib/php') in include.php on line 2
Hello World
Selanjutnya kita akan gunakan require().
<?php
require("noFileExistsHere.php");
echo "Hello World!";
?>
dan hasilnya
Warning: main(noFileExistsHere.php): failed to open stream: No such file or directory
in require.php on line 2
Fatal error: main(): Failed opening required 'noFileExistsHere.php'
(include_path='.:/usr/lib/php:/usr/local/lib/php') in require.php on line 2
Bandingkan kedua hasil di atas, khususnya yang tercetak merah. Pada include(), error
yang dihasilkan hanya berupa Warning saja dan statement berikutnya masih dapat
dijalankan. Hal ini terlihat bahwa teks Hello World! Masih ditampilkan di browser.
Sedangkan pada require(), error yang dihasilkan berupa Fatal Error. Dengan demikian
statement selanjutnya tidak akan dijalankan.
 Percabanan PHP
- Statement If …
Sintaks dari statement tersebut dalam PHP adalah
if (syarat)
{
statement1;
statement2;
.
.

}
Untuk menyatakan syarat, biasanya digunakan operator perbandingan. Apabila syarat

bernilai TRUE maka statement-statement yang diapit dengan tanda kurung kurawal akan
dijalankan. Bentuk lain dari sintaks IF adalah
if (syarat)
{
statement1;
statement2;
.
.
}
else
{
statement3;
statement4;
.
.
}
Untuk sintaks kedua di atas, statement3, statement4, dst akan dijalankan apabila syarat
bernilai FALSE.
Contoh:
<?
$my_name = "nada";
if ($my_name == "nada")
{
echo "Your name is ".$my_name."!"<br>";
}
echo "Welcome to my homepage!";
?>
<?
$number = 3;
if ($number == 4)
{
echo "Benar";
}
else
{
echo "Salah";
}
?>
Terdapat pula bentuk sintaks berikutnya dari IF … yaitu dengan ditambahkan elseif
if (syarat1)
{

statement11;
statement12;
.
.
}
elseif (syarat2)
{
statement21;
statement22;
.
.
}
.
.
else
{
statement1;
statement2;
.
.
}
Jika syarat1 bernilai TRUE, maka statement11, statement12 dst akan dijalankan. Sedangkan
jika syarat1 FALSE maka selanjutnya akan dicek untuk syarat2. Jika syarat2 TRUE maka
statemen21, statement22, dst akan dijalankan, sedangkan jika syarat2 FALSE akan dicek
syarat berikutnya (jika masih ada). Statement1, statement2, dst baru akan dijalankan apabila
semua syarat sebelumnya bernilai FALSE.
Contoh:
<?php
$karyawan = "Bob";
if($karyawan == "Tanner")
{
echo "Hello Tanner!";
}
elseif($karyawan == "Bob")
{
echo "Hello Bob!";
}
else
{
echo "Hello!";
}
?>
- Statement SWITCH
Sintaks dari statement ini adalah

switch (variabel)
{
case option1:
statement11;
statement12;
.
.
break;
case option2:
statement21;
statement22;
.
.
break;
.
.
default:
statementdefault1;
statementdefault2;
.
.
break;
}
Pada sintaks di atas, nilai dari variabel akan dicek pada setiap option yang ada (terletak di
bagian case). Jika ada option yang sama dengan nilai variabel, maka statement-statement di
bawah option tersebutlah yang akan dijalankan. Bagian default adalah optional (boleh ada,
boleh tidak).
Contoh:
<?php
$tujuan = "Tokyo";
echo "Biaya Perjalanan Menuju $tujuan adalah ";
switch ($tujuan){
case "Las Vegas":
echo " $500";
break;
case "Amsterdam":
echo " $1500";
break;
case "Egypt":
echo " $1750";
break;
case "Tokyo":
echo " $900";
break;
case "Caribbean Islands":

echo " $700";
break;
}
?>
Contoh:
<?php
$tujuan = "New York";
echo "Biaya Perjalanan Menuju $tujuan adalah ";
switch ($tujuan){
case "Las Vegas":
echo " $500";
break;
case "Amsterdam":
echo " $1500";
break;
case "Egypt":
echo " $1750";
break;
case "Tokyo":
echo " $900";
break;
case "Caribbean Islands":
echo " $700";
break;
default:
echo " $100";
break;
}
?>
LATIHAN 7
a. Mahasiswa mempelajari dan mempraktikan seluruh bahasan materi

pada Pertemuan 11 (Fungsi Join Lanj.) (Tugas Mandiri dirumah)
b. Mahasiswa mengerjakan Latihan Soal Pertemuan 11 (Tugas Mandiri
dirumah, Hasil pengerjaan perintah SQL dan tampilan di screenshot
melalui MS.Word atau sejenisnya)

PERTEMUAN 11
PERINTAH PERULANGAN DAN ARRAY
Deskripsi :
Membahas cara penggunaan perintah perulangan pada PHP dan Fungsi Array pada PHP
Setelah selesai membahas bab ini mahasiswa mampu :
1. Menggunakan perintah perulangan
2. Menggunakan array
 Perulangan
- Statement WHILE
Statement ini digunakan untuk mengerjakan suatu statement secara berulang-ulang sampai
suatu syarat dipenuhi. Sintaksnya adalah
while (syarat)
{
statement;
statement;
.
.
}
Pada sintaks di atas, selama syarat bernilai TRUE maka statement-statement di dalam while
akan terus dijalankan secara berulang-ulang. Perulangan baru akan berhenti apabila syarat
bernilai FALSE. Sebelum statement yang diulang-ulang dilakukan, terlebih dahulu akan
dicek syarat nya apakah bernilai TRUE atau FALSE. Apabila TRUE maka statement akan

dijalankan. Sedangkan apabila FALSE, perulangan akan langsung berhenti. Dengan kata lain,
statement dalam WHILE bisa jadi tidak akan pernah dilakukan, yaitu apabila syaratnya
langsung bernilai FALSE.
Contoh:
<?
$harga_sikat = 1500;
$jumlah_sikat = 10;
echo "<table border=\"1\" align=\"center\">";
echo "<tr><td><b>Jumlah Sikat</b></td>";
echo "<td><b>Harga</b></tr></td>";
while ( $jumlah_sikat <= 100 )
{
echo "<tr><td>";
echo $jumlah_sikat;
echo "</td><td>";
echo "Rp. ".$harga_sikat * $jumlah_sikat;
echo "</td></tr>";
$jumlah_sikat = $jumlah_sikat + 10;
}
echo "</table>";
?>
Kode di atas akan menampilkan hasil di browser berupa tabel yang berisi jumlah sikat dan
harganya, dengan asumsi harga sebuah sikat adalah Rp. 1.500. Jumlah sikat yang ditampilkan
adalah kelipatan 10 dengan batas sampai 100 buah.
- Statement FOR
Statement FOR mirip dengan WHILE yang memiliki sintaks berikut ini
for (inisialisasi counter; syarat; increment/decrement counter)
{
statement;
.
.
}
Untuk memperjelas pemahaman tentang FOR, berikut ini adalah contoh kode dengan for
untuk menghasilkan tampilan yang sama dengan contoh while sebelumnya (tentang jumlah
sikat dan harganya). Coba bandingkan dengan kode contoh while sebelumnya.
Contoh:
<?
$harga_sikat = 1500;
echo "<table border=\"1\" align=\"center\">";
echo "<tr><td><b>Jumlah Sikat</b></td>";
echo "<td><b>Harga</b></td></tr>";
for ($jumlah_sikat = 10; $jumlah_sikat <= 100; $jumlah_sikat+=10)
{
echo "<tr><td>";

echo $jumlah_sikat;
echo "</td><td>";
echo "Rp. ".$harga_sikat * $jumlah_sikat;
echo "</td></tr>";
}
echo "</table>";
?>
- Statement Foreach
Misalkan Anda punya data berupa array assosiatif yang akan diproses secara berulang-ulang,
maka PHP menyediakan statement foreach yang mudah digunakan.
Sintaksnya adalah:
foreach(variabelarray as kunci => value)
{
statement;
.
.
}
Sebagai contoh, misalkan Anda memiliki 5 orang karyawan dengan usianya masing-masing
yang ditulis dalam kode PHP sebagai berikut
$UsiaKaryawan["Lisa"] = "28";
$UsiaKaryawan["Jack"] = "16";
$UsiaKaryawan["Ryan"] = "35";
$UsiaKaryawan["Rachel"] = "46";
$UsiaKaryawan["Grace"] = "34";
Berikut ini adalah contoh kode PHP yang akan menampilkan semua karyawan beserta
usianya dengan menggunakan foreach.
<?php
$UsiaKaryawan["Lisa"] = "28";
$UsiaKaryawan["Jack"] = "16";
$UsiaKaryawan["Ryan"] = "35";
$UsiaKaryawan["Rachel"] = "46";
$UsiaKaryawan["Grace"] = "34";
foreach($UsiaKaryawan as $Nama => $umur)
{
echo "Nama Karyawan: $Nama, Usia: $umur"." th <br>";
}
?>
- Statement Do While
Statement ini merupakan bentuk modifikasi dari WHILE. Sintaksnya adalah sebagai berikut
Do

{
statement;
.
.
}
while (syarat);
Coba bandingkan dengan sintaks WHILE sebelumnya. Dilihat dari posisi statement yang
diulang, posisi statement yang diulang pada DO WHILE terletak di atas syarat. Dengan
demikian, sebelum syarat dicek TRUE atau FALSE nya, statement akan dikerjakan terlebih
dahulu. Sedangkan pada WHILE, sebelum statement yang diulang dikerjakan, terlebih
dahulu syarat akan dicek. Prinsip kerja DO WHILE sama dengan WHILE yaitu statement
akan terus dikerjakan selama syarat bernilai TRUE dan perulangan akan berhenti apabila
FALSE. Perhatikan contoh berikut ini yang membandingkan DO WHILE dengan WHILE
Contoh:
<?php
$kue = 0;
while($kue > 1)
{
echo "Mmmmm...Aku suka kue! Nyam..nyam..nyam..";
}
?>
<?
$kue = 0;
do
{
echo "Mmmmm... Aku suka kue! Nyam..nyam..nyam..";
} while ($kue > 1);
?>
Pada kode WHILE, teks "Mmmm…. " dst tidak akan ditampilkan karena syaratnya langsung
bernilai FALSE (perulangan berhenti). Sedangkan pada DO WHILE, teks akan ditampilkan
dahulu kemudian perulangan berhenti (syarat bernilai FALSE).
 Array
Dalam PHP, index untuk array dapat berupa numerik dan dapat pula berupa satu nilai atau
sering disebut Degnan array assosiatif.
- Array Berindeks Numerik
Sintaks umum untuk menyatakan suatu array berindeks numerik beserta nilainya adalah
$nama_array[$key] = value;
Dalam hal ini $key berupa bilangan bulat mulai dari 0, 1, 2, …

Contoh:

$karyawan[0] = "Bob";
$karyawan[1] = "Sally";
$karyawan[2] = "Charlie";
$karyawan[3] = "Clare";

Sedangkan berikut ini adalah contoh untuk menampilkan nilai dari suatu array berindeks
numerik.
<?
$karyawan[0] = "Bob";
$karyawan[1] = "Sally";
$karyawan[2] = "Charlie";
$karyawan[3] = "Clare";
echo "Berikut ini adalah 2 orang karyawan saya, yaitu ". $karyawan[0] . " & " .
$karyawan[1];
echo "<br>Dua orang karyawan saya yang lain adalah ". $karyawan[2] . " & " .
$karyawan[3];
?>
- Array Assosiatif
Untuk array assosiatif, sintaksnya sama dengan array berindeks numerik namun
perbedaannya adalah pada $key. Pada array assosiatif, $key dapat berupa suatu string.
Berikut ini adalah
Contohnya
$gaji["Bob"] = 2000;
$gaji["Sally"] = 4000;
$gaji["Charlie"] = 600;
$gaji["Clare"] = 0;
dan berikut ini adalah contoh kode untuk menampilkan nilai dari array assosiatif
<?
$gaji["Bob"] = 2000;
$gaji["Sally"] = 4000;
$gaji["Charlie"] = 600;
$gaji["Clare"] = 0;
echo "Bob digaji - $" . $gaji["Bob"] . "<br>";
echo "Sally digaji - $" . $gaji["Sally"] . "<br>";
echo "Charlie digaji - $" . $gaji["Charlie"] . "<br>";
echo "dan Clare digaji - $" . $gaji["Clare"];
?>
TUGAS 3
c. Hasil pengerjaan Latihan 6 Minggu ke 9 hingga Latihan 7 Minggu ke

10, dikumpulkan dalam bentuk softcopy pada Minggu ke 12.
d. Hasil pengerjaan perintah SQL dan tampilan di screenshot melalui
MS.Word atau sejenisnya

PERTEMUAN 12
STUDI KASUS PHP
TUGAS 4
a. Dosen Pengampu Mata Kuliah dapat menggunakan soal yang terdapat

pada bab ini, atau soal dapat menggunakan hasil ciptaan Dosen
Pengampu Mata Kuliah
b. Soal terdiri dari kombinasi pembahasan perintah modularitas,
percabangan, perulangan dan array

PERTEMUAN 13-15
PRESENTASI
PROJECT
Pertemuan 13-15 Presentasi Project

REFERENSI
1. Anhar. 2010. Panduan Menguasai PHP & MySQL Secara Otodidak. Jakarta: Mediakita.
2. Fathansyah. 2015. Basis Data Revisi Kedua. Bandung. Informatika Bandung.
3. Indrajani. 2014. Pengantar Sistem Basis Data Case Study All In One. Jakarta. PT Elex Media
Komputindo.
4. Kadir, Abdul. 2008. Tuntunan Praktis Belajar Database Menggunakan MySQL. Yogyakarta: Andi

Ina - Modul Web Programming 1

Diunggah oleh

Informasi Dokumen

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

Ina - Modul Web Programming 1

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Web Programming 1 1

Bandung, 1 Maret 2020

Modul Web Programming 1 2

Modul Web Programming 1 3

Ketentuan Tugas Project Mata Kuliah Web Programming I:

masing kelompok berjumlah maksimal 3 mahasiswa (dibuat fleksibel dan disesuaikan

dengan jumlah mahasiswa per kelas).

dengan yang lainnya

3. Isi Project Web Programming I berupa Video dan Website.

 Pada Video yang akan dibuat terdapat:

b. Perkenalan (menjelaskan teor-teori yang digunakan).

c. Pembahasan fitur yang ada pada website

d. Penjelasan coding yang dibuat

e. Penutup (berisi kesimpulan)

 Pada Website terdiri dari :

Modul Web Programming 1 4

Tugas Mandiri dikerjakan secara “Individu“ oleh mahasiswa, yang terbagi

A. Tugas Mandiri Diluar Kelas (Dirumah)

Pengampu dapat menguji mahasiswa di kelas disaat pertemuan pembahasan minggu

3. Tugas Mandiri Diluar Kelas terbagi menjadi Tugas 1 dan Tugas 3.

Minggu ke I hingga Minggu ke 5, yaitu Latihan 1 hingga Latihan 5. (Tugas 1 Memiliki

bobot penilaian 20% dari total 100% Nilai Tugas)

bobot penilaian 20% dari total 100% Nilai Tugas)

dapat di screenshot dan disalin melalui aplikasi Ms.word atau sejenisnya.

B. Tugas Mandiri Didalam Kelas

Modul Web Programming 1 5

bobot penilaian 30% dari total 100% Nilai Tugas.

Modul Web Programming 1 6

 Konsep Dasar Web

dan gabungan dari semuanya.

 Unsur unsur Web

Untuk menyediakan keberadaan sebuah website, maka harus tersedia unsur-unsur

penunjangnya, adalah sebagai berikut:

1. Nama domain (Domain name/URL – Uniform Resource Locator)

internet. Contoh : http://www.baliorange.net, http://www.detik.com Nama domain

mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan

Modul Web Programming 1 7

website instansi pemerintah), or.id (nama domain website organisasi).

2. Rumah tempat website (Web hosting)

3. Bahasa Program (Scripts Program)

list dan lain sebagainya yang memerlukan update setiap saat.

Modul Web Programming 1 8

designer. Semakin banyak penguasaan web designer tentang beragam program/software

biaya pembangunan situs dan semuanya itu tergantung kualitas designer

 Front End dan Back End

monitoring "di balik layar".

Untuk pembelajaran pada modul Web Programming I ini menggunakan software

Modul Web Programming 1 9

https://www.apachefriends.org/index.html. Xampp merupakan suatu tools yang bersifat open

didalamnya sudah menyediakan paket seperti Apache, MySQL, MariaDB, PHP,

untuk platform Windows mauppun Linux.

Modul Web Programming 1 10

http://localhost/xampp/ , jika berhasil tampil halaman pembuka xampp maka instalasi

dikatakan berhasil pada Laptop/PC.

a. Mahasiswa mempelajari dan mempraktikan seluruh bahasan materi

Modul Web Programming 1 11

Modul Web Programming 1 12

Modul Web Programming 1 13

Modul Web Programming 1 14

STRUKTUR DOKUMEN HTML

<!DOCTYPE html> untuk HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> untuk HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> untuk XHTML