Modul Pemrograman Web
Diunggah oleh
angga1997sdxModul Pemrograman Web
Diunggah oleh
angga1997sdx1
MODUL PEMROGRAMAN WEB
2
DAFTAR ISI
Module 1 Dasar-Dasar HTML 1
1.1 RINGKASAN 1
a Tag HTML Dasar 1
b Tag untuk pemformatan teks dasar 2
c Tag untuk tampilan ‘hasil keluaran komputer’ 2
d Tag untuk Citation, Quotation, dan Definisi 3
e Contoh tag untuk Entitas karakter 3
f Tag untuk List 4
1.2 LATIHAN 5
Module 2 Link, Frame dan table 11
2.1 RINGKASAN 11
2.2 LATIHAN 13
Module 3 Form dan Gambar 24
3.1 RINGKASAN 24
3.2 LATIHAN 25
Module 4 STYLESHEET 31
4.1 RINGKASAN 31
a Style 31
4.2 LATIHAN 31
Module 5 Dasar PHP 36
5.1 Ringkasan 36
5.2 latihan 36
Module 6 Kontrol Kondisi 41
6.1 Ringkasan 41
3
a Operator Aritmatika 41
b PHP Assignment Operators 41
c Operator Perbandingan 42
d Operator Increment / Decrement 42
e Operator Logika 43
f Operator String 43
6.2 Latihan 43
a Percabangan 44
b Perulangan 45
Module 7 Array 46
7.1 Ringkasan 46
7.2 Latihan 46
Module 8 Database 49
8.1 RIngkasan 49
8.2 Latihan 49
Module 9 Session dan security 55
9.1 Ringkasan 55
9.2 Latihan 55
a Login 55
b Session untuk proteksi halaman (admin.php) 56
c Logout (logout.php) 56
1
MODULE 1
DASAR-DASAR HTML
1.1 RINGKASAN
Dalam praktikum kali ini, Anda akan mempelajari penggunaan dari beberapa tag
dasar yang hampir akan selalu digunakan dalam setiap praktikum Anda nantinya.
Perhatikan daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman
HTML.
a Tag HTML Dasar
Start Tag NN IE W3C Kegunaan
<html> 3.0 3.0 3.2 Mendefinisikan sebuah dokumen html
<body> 3.0 3.0 3.2 Mendefinisikan isi/badan suatu dokumen
<h1>-<h6> 3.0 3.0 3.2 Mendefinisikan heading ke 1 s/d heading ke 6
<p> 3.0 3.0 3.2 Mendefinisikan sebuah paragraf
<br> 3.0 3.0 3.2 Menyisipkan sebuah line break
<hr> 3.0 3.0 3.2 Mendefinisikan sebuah garis horisontal
<!--> 3.0 3.0 3.2 Mendefinisikan komentar dalam kode sumber HTML
Setelah itu, Anda akan mempelajari penggunaan dari beberapa tag yang
digunakan dalam melakukan pemformatan tampilan halaman web supaya lebih sesuai
dengan keinginan atau agar lebih rapi dan terstruktur. Perhatikan beberapa daftar tag
di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapa
2
diantaranya telah dihilangkan dari daftar tag HTML standar, namun masih
memungkinkan untuk ditampilkan pada beberapa browser tertentu atau browser lama.
b Tag untuk pemformatan teks dasar
Start Tag NN IE W3C Kegunaan
<b> 3.0 3.0 3.2 Mendefinisikan teks tebal
<big> 3.0 3.0 3.2 Mendefinisikan teks yang lebih besar
<em> 3.0 3.0 3.2 Mendefinisikan teks yang dimiringkan
<i> 3.0 3.0 3.2 Mendefinisikan teks yang dimiringkan
<small> 3.0 3.0 3.2 Mendefinisikan teks yang lebih kecil
<strong> 3.0 3.0 3.2 Mendefinisikan teks tebal
<sub> 3.0 3.0 3.2 Defines subscripted text
<sup> 3.0 3.0 3.2 Mendefinisikan teks yang posisinya lebih ke atas
<ins> 4.0 4.0 Mendefinisikan teks yang bergaris bawah
<del> 4.0 4.0 Mendefinisikan teks yang hendak dihapus
c Tag untuk tampilan ‘hasil keluaran komputer’
Start Tag NN IE W3C Kegunaan
<code> 3.0 3.0 3.2 Mendefinisikan teks kode komputer
<kbd> 3.0 3.0 3.2 Mendefinisikan teks dari keyboard
<samp> 3.0 3.0 3.2 Mendefinisikan teks contoh kode komputer
<tt> 3.0 3.0 3.2 Mendefinisikan teks model teletype
3
<var> 3.0 3.0 3.2 Mendefinisikan sebuah variabel
<pre> 3.0 3.0 3.2 Mendefinisikan teks preformatted
d Tag untuk Citation, Quotation, dan Definisi
Start Tag NN IE W3C Kegunaan
<abbr> 4.0 Mendefinisikan suatu kependekan
<acronym> 4.0 4.0 Mendefinisikan suatu singkatan
<address> 4.0 4.0 3.2 Mendefinisikan suatu elemen alamat
<bdo> 4.0 Mendefinisikan arah teks
<blockquote> 3.0 3.0 3.2 Mendefinisikan quotation panjang
<q> 4.0 4.0 Mendefinisikan quotation pendek
<cite> 3.0 3.0 3.2 Mendefinisikan suatu kutipan
<dfn> 3.0 3.2 Mendefinisikan suatu istilah
e Contoh tag untuk Entitas karakter
Tampilan Deskripsi Nama Entitas Nomor Entitas
spasi kosong  
< kurang dari < <
> lebih dari > >
& dan (ampersand) & &
4
" tanda petik/kutip (quotation mark) " "
' koma atas (apostrophe) '
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
§ Section § §
© Copyright © ©
® registered trademark ® ®
× Multiplication × ×
÷ Division ÷ ÷
Ketika Anda menulis suatu dokumen, mungkin terkadang Anda menuliskan
kalimat dalam bentuk poin-poin yang menerangkan tentang suatu hal. Dalam suatu
halaman web, terkadang Anda juga ingin melakukan hal yang sama. Terdapat tag
khusus untuk penulisan dalam format poin-poin, perhatikan daftar di bawah ini.
f Tag untuk List
Start Tag NN IE W3C Kegunaan
<ol> 3.0 3.0 3.2 Mendefinisikan sebuah list ordered
<ul> 3.0 3.0 3.2 Mendefinisikan sebuah list unordered
<li> 3.0 3.0 3.2 Mendefinisikan sebuah item dalam list
<dl> 3.0 3.0 3.2 Mendefinisikan sebuah list definisi
5
<dt> 3.0 3.0 3.2 Mendefinisikan sebuah istilah list definisi
<dd> 3.0 3.0 3.2 Mendefinisikan sebuah keterangan list definisi
1.2 LATIHAN
Dalam modul ini Anda akan berlatih untuk menggunakan berbagai tag dasar
untuk pemrograman web menggunakan HTML. Ketikkan setiap kelompok tag dalam
sebuah file, simpan dalam folder Anda sendiri yang telah ditentukan, kemudian jalankan
di web browser yang telah terinstall. Ketikkan setiap kode sumber apa adanya terlebih
dahulu (termasuk spasi kosong). Perhatikan hasil tampilannya, kemudian belajar untuk
memodifikasi setiap kelompok tag untuk mengetahui maksud dari setiap baris tag
HTML yang Anda ketikkan. Jangan lupa untuk menyimpan setiap modifikasi Anda
sebelum menjalankan ulang di dalam browser.
Silakan mencoba juga tag yang masuk dalam kategori “dihilangkan”, untuk
melihat seperti apa tampilan yang dapat dimunculkan. Untuk entitas karakter, silakan
coba nomor entitas selain yang telah ada pada daftar di atas, untuk melihat entitas
karakter apa saja yang dapat digunakan dalam sebuah halaman web.
Bagian terakhir adalah list. List adalah salah satu komponen yang cukup sering
digunakan dalam suatu halaman Web. Dalam bentuk aslinya, mungkin sudah tidak
terlalu banyak digunakan lagi dan digantikan fungsinya dengan image (gambar), tetapi
ada perlunya juga Anda mengetahui list saat tidak memiliki gambar yang akan dijadikan
bullet.
1) Paragraf dan line break
1. <html>
2. <head>
3. <title>Belajar Web</title>
4. </head>
5. <body>
6. <p>
7. Paragraf ini
8. mengandung banyak spasi dan baris
9. dalam kode sumbernya,
10. tetapi browser
11. akan mengabaikannya.
12. </p>
6
13. <p>
14. Sedangkan yang ini memiliki spasi panjang.
15. </p>
16. <p align=”center”>
17.Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser An
da. Bila Anda mengubah ukuran window browser, jumlah baris dalam paragraf akan beru
bah.
18. </p>
19. <p align=”right”>
20. Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
21. </p>
22. </body>
23.
</html>
2) Background color dan heading
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body bgcolor="yellow">
6. <p>
7. Perhatikan bahwa halaman ini seharusnya berwarna kuning.
8. </p>
9. <h1>Ini adalah heading 1</h1>
10. <h2>Ini adalah heading 2</h2>
11. <h3>Ini adalah heading 3</h3>
12. <h4>Ini adalah heading 4</h4>
13. <h5>Ini adalah heading 5</h5>
14. <h6>Ini adalah heading 6</h6>
15.<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag
tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperlua n itu. </p>
16. <h1 align="center">Ini adalah heading 1</h1>
17. <p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>
18. </body>
19. </html>
3) Garis horisontal dan komentar tersembunyi
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6.<p>Tag hr mendefinisikan sebuah garis horisontal, default- nya adalah rata tengah:</p>
7. <hr color="green" >
8. <p align="left">Terdapat paragraf disini</p>
9. <hr width="80%" size="10" align="left">
10. <p align="right">Terdapat paragraf disini</p>
11. <hr width="400" size="6" align="right" color="red">
12. <center>
13. <p>Terdapat paragraf disini</p>
14. </center>
15. <!— Ini adalah komentar yang tidak akan ditampilkan di layar browser -->
16. </body>
17. </html>
7
4) Pemformatan teks
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <b>Teks ini tebal </b>
7. <br>
8. <strong> Teks ini juga tebal </strong>
9. <br>
10. <big> Teks ini hurufnya besar </big>
11. <br>
12. <em> Teks ini miring </em>
13. <br>
14. <i> Teks ini juga miring </i>
15. <br>
16. <small> Teks ini hurufnya kecil </small>
17. <br>
18. Teks ini berisi <sub> subscript </sub>
19. <br>
20. Teks ini berisi <sup> superscript </sup>
21. </body>
22. </html>
5) Teks yang di-preformat
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <pre>
7. Ini adalah
8. Teks yang di-preformat.
9. Preformat akan menampilkan spasi dan
10. line break apa adanya.
11. </pre>
12. <p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
13. <pre>
14. for i = 1 to 10
15. print i
16. next i
17. </pre>
18.
19. </body>
20. </html>
6) Arah teks dan quotation
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6.
7. <p>
8
8. Bila browser Anda mendukung kemampuan bi-
directional override (bdo), baris berikut ini akan dituliskan dari kanan ke kiri (r
tl):
9. </p>
10. <bdo dir="rtl">
11. Anggap saja ini tulisan bahasa Arab
12. </bdo>
13. <br>
14. Ini adalah contoh quotation panjang:
15. <blockquote>
16. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotatio
n panjang. Ini adalah quotation panjang. Ini adalah quotation panjang.
17. </blockquote>
18. Ini adalah contoh quotation pendek:
19. <q>
20. Ini adalah quotation pendek.
21. </q>
22. <p>
23. Menggunakan elemen blockquote, browser menyisipkan line break dan margin, tetap
i elemen q tidak akan menampilkan apapun yang khusus.
24. </p>
25.
26. </body>
27. </html>
7) List unordered dan ordered
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>Sebentuk list unordered:</h4>
7. <ul>
8. <li>Kopi</li>
9. <li>Teh</li>
10. <li>Susu</li>
11. </ul>
12. <br>
13. <h4>Sebentuk list ordered:</h4>
14. <ol>
15. <li>Kopi</li>
16. <li>Teh</li>
17. <li>Susu</li>
18. </ol>
19. </body>
20. </html>
8) Jenis-jenis list ordered
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>List bernomor:</h4>
7. <ol>
9
8. <li>Apel</li>
9. <li>Pisang</li>
10. <li>Lemon</li>
11. <li>Jeruk</li>
12. </ol>
13. <h4>List dengan huruf:</h4>
14. <ol type="A">
15. <li>Apel</li>
16. <li>Pisang</li>
17. <li>Lemon</li>
18. <li>Jeruk</li>
19. </ol>
20. <h4>List dengan huruf kecil:</h4>
21. <ol type="a">
22. <li>Apel</li>
23. <li>Pisang</li>
24. <li>Lemon</li>
25. <li>Jeruk</li>
26. </ol>
27. <h4>List dengan angka romawi:</h4>
28. <ol type="I">
29. <li>Apel</li>
30. <li>Pisang</li>
31. <li>Lemon</li>
32. <li>Jeruk</li>
33. </ol>
34. <h4>List dengan angka romawi kecil:</h4>
35. <ol type="i">
36. <li>Apel</li>
37. <li>Pisang</li>
38. <li>Lemon</li>
39. <li>Jeruk</li>
40. </ol>
41.
42. </body>
43. </html>
9) Jenis-jenis list unoredered
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>List dengan bullet berbentuk disc:</h4>
7. <ul type="disc">
8. <li>Apel</li>
9. <li>Pisang</li>
10. <li>Lemon</li>
11. <li>Jeruk</li>
12. </ul>
13. <h4>List dengan bullet berbentuk lingkaran:</h4>
14. <ul type="circle">
15. <li>Apel</li>
16. <li>Pisang</li>
17. <li>Lemon</li>
18. <li>Jeruk</li>
19. </ul>
20. <h4>List dengan bullet berbentuk kotak:</h4>
21. <ul type="square">
22. <li>Apel</li>
10
23. <li>Pisang</li>
24. <li>Lemon</li>
25. <li>Jeruk</li>
26. </ul>
27. </body>
28. </html>
10) List bersarang dan list definisi
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>Sebuah list bersarang:</h4>
7. <ul>
8. <li>Kopi</li>
9. <li>Teh
10. <ul>
11. <li>Teh hitam</li>
12. <li>Teh Hijau</li>
13. </ul>
14. </li>
15. <li>Susu</li>
16. </ul>
17. <br>
18. <h4>Contoh list definisi:</h4>
19. <dl>
20. <dt>Kopi</dt>
21. <dd>Minuman panas hitam</dd>
22. <dt>Susu</dt>
23. <dd>Minuman dingin putih</dd>
24. </dl>
25. </body>
26. </html>
11
MODULE 2
LINK, FRAME DAN TABLE
2.1 RINGKASAN
Situs web biasanya tidak hanya terdiri atas 1 halaman saja (homepage, halaman
awal/ pembuka). Bila suatu situs terdiri atas lebih dari 1 halaman, situs tersebut pasti
menggunakan hyperlink. Perhatikan bahwa tag untuk link memang hanya 1, tetapi
memiliki beberapa atribut tambahan agar link tersebut memberikan fungsi yang
berbeda. Untuk keperluan modifikasi tampilan agar link tidak hanya terlihat sebagai
link standar, nantinya akan disampaikan dalam materi khusus CSS. Tampilan link juga
dapat diubah sedikit lewat modifikasi tag <body> dalam suatu file HTML.
Start Tag NN IE W3C Kegunaan
<a> 3.0 3.0 3.2 Mendefinisikan sebuah anchor
Atribut Target Kegunaan
target="_blank" Memuat dokumen baru ke dalam window baru yang kosong
target="_self" Memuat dokumen baru ke dalam window yang sama dengan
anchor (default)
target="_parent" Memuat dokumen baru ke dalam parent frame (bila
menggunakan frame)
target="_top" Memuat dokumen baru ke dalam keseluruhan window browser (cara
yang umum digunakan untuk keluar dari frame)
12
Sebuah halaman web yang ditampilkan dalam suatu window browser dapat
dipecah dalam beberapa tampilan yang berbeda. Masing-masing bagian tampilan dapat
berisi sebuah tampilan dari file HTML, sehingga dalam satu window browser dapat
dibuka beberapa file HTML sekaligus. Untuk dapat menampilkan beberapa file HTML
dalam satu window browser, dibutuhkan tag untuk membuat window menjadi
beberapa bingkai (frame). Di bawah ini adalah tag untuk membentuk frame pada
window browser.
Start Tag NN IE W3C Kegunaan
<frameset> 3.0 3.0 4.0 Mendefinisikan sebuah himpunan frame
<frame> 3.0 3.0 4.0 Mendefinisikan sebuah sub window (sebuah frame)
Mendefinisikan sebuah bagian noframe untuk browser yang tidak dapat
<noframes> 3.0 3.0 4.0
menangani frame
<iframe> 6.0 3.0 4.0 Mendefinisikan sebuah inline sub window (frame)
Dalam suatu halaman web, pemformatan saja tidaklah cukup untuk membentuk
tampilan web yang rapi dan enak dipandang. Supaya tampilannya lebih terstruktur,
Anda dapat menggunakan tabel. Perhatikan tag-tag di bawah ini.
Start Tag NN IE W3C Kegunaan
<table> 3.0 3.0 3.2 Mendefinisikan sebuah tabel
<th> 3.0 3.0 3.2 Mendefinisikan sebuah header tabel
<tr> 3.0 3.0 3.2 Mendefinisikan suatu barisan dalam tabel
<td> 3.0 3.0 3.2 Mendefinisikan suatu sel dalam table
<caption> 3.0 3.0 3.2 Mendefinisikan sebuah caption untuk tabel
<colgroup> 3.0 4.0 Mendefinisikan sekelompok kolom dalam tabel
13
Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam
<col> 3.0 4.0
sebuah tabel
<thead> 4.0 4.0 Mendefinisikan suatu head tabel
<tbody> 4.0 4.0 Mendefinisikan suatu badan tabel
<tfoot> 4.0 4.0 Mendefinisikan suatu footer tabel
2.2 LATIHAN
Silakan mencoba kode-kode contoh pada modul ini, kemudian silakan mencoba
variasi penggunaannya. Gunakan alamat tujuan yang berbeda dari contoh yang ada. Bila
tidak terdapat koneksi ke Internet, gunakan alamat lokal saja terlebih dahulu. Alamat
lokal juga mempercepat akses Anda, sehingga hasilnya lebih cepat tampil di layar
monitor. Bila Anda ingin menggunakan halaman tujuan secara lokal, sebaiknya Anda
membuat file HTML tambahan dengan nama file yang disesuaikan agar dapat dipanggil.
Isi file HTML tambahan terserah Anda, yang penting bisa digunakan untuk
menunjukkan bahwa tag Anda bekerja seperti seharusnya.
Untuk mencoba kode HTML tentang frame, silakan menyiapkan file-file yang
diperlukan sesuai dengan nama-nama file yang telah disebutkan dalam contoh kode
dalam modul ini. Simpan di tempat yang sesuai dengan penunjukan frame Anda,
disarankan disimpan dalam folder yang sama tempat Anda menyimpan file definisi
frame.
Latihan menggunakan tabel mengharuskan Anda mencoba bentuk-bentuk yang
ada dalam contoh, kemudian silakan mencoba-coba sendiri variasi contoh dengan
menambahkan atau mengurangi sel dan isinya. Variasikan juga parameternya, agar
Anda tahu setiap bagian penentu tampilan tabel.
1) Link biasa, link gambar, link ke window baru, dan link internal
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
14
5. <body>
6. <p>
7. <a href="halaman.htm">
8. Teks ini</a> adalah sebuah link ke suatu halaman
9. dalam situs Web.
10. </p>
11. <p>
12. <a href="www.google.com">
13. Teks ini</a> adalah sebuah link ke halaman awal
14. Situs Google.
15. </p>
16. <p>
17. <a href="#C4">
18. Melompat ke bagian lain dalam halaman ini.
19. </a>
20. </p>
21. <p>
22. Anda dapat juga menggunakan gambar sebagai sebuah link:
23. <a href="linkgambar.htm">
24. <img border="0" src="tombol.gif" width="65" height="38">
25. </a>
26. </p>
27. <a href="baru.htm" target="_blank">halaman Berikutnya</a>
28. <p>
29. Bila Anda memberikan atribut target sebuah link menjadi "_blank",
30. Link tersebut akan membuka sebuah window browser baru.
31. </p>
32. <p>
33. <p> Ada tulisan disini (lakukan copy dan paste baris ini untuk baris berikutnya
) </p>
34. <p> Ada tulisan disini </p>
35. <p> Ada tulisan disini </p>
36. <p> Ada tulisan disini </p>
37. <p> Ada tulisan disini </p>
38. <p> Ada tulisan disini </p>
39. <p> Ada tulisan disini </p>
40. <p> Ada tulisan disini </p>
41. <p> Ada tulisan disini </p>
42. <p> Ada tulisan disini </p>
43. <p> Ada tulisan disini </p>
44. <p> Ada tulisan disini </p>
45. <p> Ada tulisan disini </p>
46. <p> Ada tulisan disini </p>
47. <a name="C4"><h2> Disinilah tujuan lompatan link internal anda </h2></a>
48. <p> Ada tulisan disini </p>
49. <p> Ada tulisan disini </p>
50. <p> Ada tulisan disini </p>
51. </body>
52. </html>
2) Link ke e-mail
<html>
<body>
</body>
15
</html>
3) Frameset (horisontal dan vertikal)
<html>
<frameset rows="50%,50%">
<frame src="frame1.htm">
<frameset cols="25%,75%">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</frameset>
</html>
4) Frameset dengan atribut no-resize = “true”
<html>
<frameset rows="50%,50%">
<frame noresize="true" src="frame1.htm">
<frameset cols="25%,75%">
<frame noresize="true" src="frame2.htm">
<frame noresize="true" src="frame3.htm">
</frameset>
</frameset>
16
</html>
5) Frame inline
<html>
<body>
<iframe src ="default.htm">
</iframe>
<p>Beberapa browser lama tidak mendukung iframe.</p>
<p>Bila browser yang Anda pakai sekarang tidak mendukung, iframe tak akan
terlihat.</p>
</body>
</html>
6) Membuat tabel
<html>
<body>
<p>
Setiap tabel dimulai dengan tag table.
Setiap baris tabel dimulai dengan tag tr.
Setiap data dalam tabel dimulai dengan tag td.
</p>
<h4>Satu baris satu kolom dengan border normal:</h4>
<table border="1">
17
<tr>
<td>100</td>
</tr>
</table>
<h4>Satu baris dan tiga kolom dengan border tebal:</h4>
<table border="8">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris dan tiga kolom dengan border sangat tebal:</h4>
<table border="15">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
18
</tr>
</table>
<h4>Tabel ini tidak memiliki border:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
7) Sel kosong dalam tabel
<html>
<body>
<table border="1">
<tr>
<td>Teks</td>
<td>Teks</td>
19
</tr>
<tr>
<td></td>
<td>Teks</td>
</tr>
</table>
<p>
Seperti yang Anda lihat, salah satu sel tidak memiliki border. Itu terjadi karena sel
tersebut kosong. Cobalah untuk menyisipkan sebuah spasi ke dalam sel tersebut. Ternyata
tetap saja tidak memiliki border.
</p>
<p>
Cara yang benar adalah dengan menyisipkan spasi non-breaking di dalam sel.
</p>
<p>Spasi non-breaking adalah sebuah entitas karakter. Bila Anda tidak mengetahui apa yang
disebut karakter entitas, baca kembali materi kuliah tentang hal tersebut.
</p>
<p>Entitas spasi non-breaking dimulai dengan tanda ampersand ("&"), kemudian
karakter-karakter "nbsp", dan diakhiri dengan semicolon (";")
</p>
<p>
</p>
</body>
</html>
20
8) Sel tabel yang diperlebar
<html>
<body>
<h4>Sel yang melebar dua kolom:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Sel yang melebar dua baris:</h4>
<table border="1">
<tr>
<th>Nama depan:</th>
<td>Bill Gates</td>
</tr>
<tr>
21
<th rowspan="2">Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
9) Menambahkan latar belakang ke tabel
<html>
<body>
<h4>Dengan warna latar belakang:</h4>
<table border="1" bgcolor="red">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
22
</table>
<h4>Dengan latar belakang gambar:</h4>
<table border="1" background="../bg.jpg">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Latar belakang pada sel:</h4>
<table border="1">
<tr>
<td bgcolor="red">Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td background="../bg.jpg">
Kedua</td>
<td>Baris</td>
</tr>
23
</table>
</body>
</html>
24
MODULE 3
FORM DAN GAMBAR
3.1 RINGKASAN
Bila Anda suatu ketika ingin memasukkan informasi ke suatu situs web, maka anda memerlukan
fasiiltas khusus untuk keperluan tersebut. Dalam HTML Anda dapat membuat tampilan halaman
untuk menerima masukan dari pengunjung situs, kemudian menyimpannya di situs Anda atau
langsung dimunculkan kembali sebagai suatu halaman. Disinilah perlunya menggunakan form.
Perhatikan tag di bawah ini.
Start Tag NN IE W3C Kegunaan
<form> 3.0 3.0 3.2 Mendefinisikan sebuah form untuk input dari pengunjung
<input> 3.0 3.0 3.2 Mendefinisikan sebuah field input
Mendefinisikan sebuah text-area (sebuah kontrol masukan teks jenis
<textarea> 3.0 3.0 3.2
multi-line)
<label> 4.0 4.0 Mendefinisikan sebuah label ke kontrol
<fieldset> 4.0 4.0 Mendefinisikan sebuah fieldset
<legend> 4.0 4.0 Mendefinisikan suatu caption untuk sebuah fieldset
<select> 3.0 3.0 3.2 Mendefinisikan sebuah list yang dapat dipilih (drop-down box)
<optgroup> 6.0 4.0 Mendefinisikan sebuah kelompok pilihan
<option> 3.0 3.0 3.2 Mendefinisikan sebuah pilihan dalam drop-down box
<button> 4.0 4.0 Mendefinisikan sebuah tombol
<isindex> Dihilangkan. Gunakan saja <input>
Anda tentu saja tidak ingin membuat halaman web yang hanya berisi teks saja. Agar halaman web
Anda lebih menarik, gunakan unsur grafis berupa gambar. Anda dapat
25
memanipulasi gambar dalam suatu halaman web sehingga menghasilkan berbagai efek. Tag di
bawah ini digunakan untuk keperluan tersebut.
Start Tag NN IE W3C Kegunaan
<img> 3.0 3.0 3.2 Mendefinisikan sebuah gambar
<map> 3.0 3.0 3.2 Mendefinisikan sebuah image map (peta gambar)
<area> 3.0 3.0 3.2 Mendefinisikan sebuah area di dalam suatu image map
3.2 LATIHAN
Disini Anda akan berlatih membuat form dengan segala obyeknya. Tetapi hanya
sekedar form untuk mengumpulkan data secara interaktif, tanpa memproses data
tersebut. Di bagian ini belum akan dibicarakan tentang pemrosesan data, oleh karena
itu silakan mencoba-coba setiap obyek dalam form saja, dengan berbagai cara
penempatannya yang memungkinkan.
Untuk dapat melihat gambar dalam halaman dokumen Anda, silakan
mempersiapkan terlebih dahulu gambar-gambar yang akan digunakan. Untuk gambar
bergerak, gunakan saja format animasi GIF. Untuk gambar diam, gunakan format sesuai
yang diperlihatkan dalam kode sumber contoh.
1) Field teks dan password
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <form>
7. Nama depan:
8. <input type="text" name="namadepan">
9. <br>
10. Nama belakang:
11. <input type="text" name="namabelakang">
12. <br>
13. Password:
14. <input type="password" name="password">
15. </form>
16. <p>
17. Perhatikan bahwa ketika Anda mengetikkan karakter-
karakter dalam suatu field password, browser akan menampilkan asterisk atau bullet
saja, bukannya karakter yang diketikkan.
18. </p>
19.
20. </body>
26
21. </html>
2) Checkbox dan tombol radio
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <form>
7. Saya memiliki sebuah sepeda:
8. <input type="checkbox" name="Sepeda">
9. <br>
10. Saya memiliki sebuah mobil:
11. <input type="checkbox" name="Mobil" value="ON">
12. <br>
13. Jenis kelamin Anda?
14. <br>
15. Pria:
16. <input type="radio" name="Sex" value="pria">
17. <br>
18. Wanita:
19. <input type="radio" name="Sex" value="wanita" checked>
20. </form>
21. <p>
22. Ketika seorang pengguna memberikan klik mouse pada sebuah tombol radio, tombol
tersebut terlihat diberi tanda cek, dan semua tombol lain yang berada dalam nama ya
ng sama akan kehilangan tanda cek-nya
23. </p>
24.
25. </body>
26. </html>
3) Kotak drop down dengan nilai default
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <form>
7.<select name="mobil">
8. <option value="volvo">Volvo
9. <option value="peugeot">Peugeot
10. <option value="fiat" selected>Fiat
11. <option value="jaguar">Jaguar
12. </select>
13. </form>
14. </body>
15. </html>
27
4) Tombol dan fieldset
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <fieldset>
7. <legend>
8. Informasi kesehatan:
9. </legend>
10. <form>
11. Tinggi <input type="text" size="3">
12. Berat <input type="text" size="3">
13. <br>
14. <input type="button" value="Ada tombol disini">
15. </form>
16. </fieldset>
17. <p>
18. Bila tidak terlihat adanya border di sekeliling form input, browser Anda su
dah terlalu lama.
19. </p>
20.
21. </body>
22. </html>
5) Form dengan field input dan tombol submit
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <form name="input" action="http://www.w3c.org/form_action.asp" method="get">
7. Masukkan nama depan Anda:
8. <input type="text" name="namadepan" value="Mickey">
9. <br>Masukkan nama belakang Anda:
10. <input type="text" name="namabelakang" value="Mouse">
11. <br>
12. <input type="submit" value="Submit">
13. </form>
14. <p>
15. Bila Anda meng-
klik tombol "Submit", Anda akan mengirim input yang dimasukkan lewat form di atas k
e pemroses yang bernama form_action.asp di situs w3c.
16. </p>
17. </body>
18. </html>
6) Mengirim e-mail dari suatu form
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
28
5. <body>
6. <form action="@" method="post" enctype="text/plain">
7.<h3>Form ini mengirim sebuah e-mail ke W3C.</h3>
8. Nama<br>
9. <input type="text" name="nama" value="Nama Anda" size="20">
10. <br>
11. Mail:<br>
12. <input type="text" name="mail" value="Mail Anda" size="20">
13. <br>
14. Komentar:<br>
15. <input type="text" name="komentar" value="Komentar Anda" size="40">
16. <br><br>
17. <input type="submit" value="Send">
18. <input type="reset" value="Reset">
19. </form>
20. </body>
21. </html>
7) Menyisipkan gambar latar belakang dan depan
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body background="background.jpg">
6. <h3>Lihatlah, ada gambar latar belakang!</h3>
7.<p>Baik file gambar dengan format gif maupun jpg dapat digunakan sebagai latar belakang HTML.</p>
8.<p>Bila gambar yang digunakan lebih kecil dari halaman situs, gambar akan ditam pilkan berulang-ulang
9. <p>
10. Sebuah gambar dari folder lokal:
11. <img src="gambar1.gif" width="144" height="50">
12. </p>
13. <p>
14. Gambar dari folder lain:
15. <img src="../images/gambar2.gif" width="33" height="32">
16. </p>
17. <p>
18. Mengambil gambar dari situs lain:
19. <img src="" width="73" height="68">
20. </p>
21. </body>
22.
23. </html>
8) Mengatur posisi gambar
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <p>
7. Sebuah gambar
8. <img src ="../images/contoh.gif" align="bottom" width="100" height="50">
9. di antara teks
10. </p>
29
11. <p>
12. Sebuah gambar
13. <img src ="../images/contoh.gif" align="middle" width="100" height="50">
14. di antara teks
15. </p>
16. <p>
17. Sebuah gambar
18. <img src ="../images/contoh.gif" align="top" width="100" height="50">
19. di antara teks
20. </p>
21. <p>Perhatikan bahwa default pengaturan adalah bottom (diletakkan di bagian bawa
h)</p>
22. <p>
23. Sebuah gambar
24. <img src ="../images/contoh.gif" width="100" height="50">
25. di antara teks
26. </p>
27. <p>
28. <img src ="../images/contoh.gif" width="100" height="50">
29. Sebuah gambar di depan teks
30. </p>
31. <p>
32. Sebuah gambar di belakang teks
33. <img src ="../images/contoh.gif" width="100" height="50">
34. </p>
35.
36. </body>
37. </html>
9) Menampilkan teks alternatif untuk gambar
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <img src="../images/gambar.gif" alt="Keterangan" width="32" height="32">
7. <p>
8. Browser text-
only hanya akan menampilkan teks dalam atribut "alt", yaitu Keterangan".
9. Perhatikan bahwa bilamana Anda membawa pointer mouse di atas gambar tersebut ma
ka teks alternatif akan ditampilkan.
10. </p>
11. </body>
12. </html>
10) Latar belakang dengan warna teks yang sesuai
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body bgcolor="#d0d0d0">
6. <p>
7. Paragraf ini terlihat enak dibaca karena menggunakan kombinasi warna latar bela
kang dan warna teks yang sesuai.
8. </p>
30
9. </body>
10.
11. </html>
11) Latar belakang dengan warna teks yang buruk
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body bgcolor="#ffffff" text="yellow">
6. <p>
7.Paragraf ini terlihat tidak nyaman dibaca karena menggunakan kombinasi warn a latar belakang dan warn
8. </p>
9. </body>
10.
11. </html>
31
MODULE 4
STYLESHEET
4.1 RINGKASAN
Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini
tiba saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk
keperluan tersebut, Anda dapat menggunakan style sheet/CSS. CSS tidak hanya dapat
membuat tampilan nampak lebih baik, tetapi dapat membuat pengembangan halaman
web menjadi jauh lebih efisien karena menghilangkan semua kesulitan yang muncul
pada halaman web biasa tanpa style.
a Style
Start Tag NN IE W3C Kegunaan
<style> 4.0 3.0 3.2 Mendefinisikan style dalam sebuah dokumen
<link> 4.0 3.0 3.2 Mendefinisikan relasi antara dua dokumen yang berhubungan
4.2 LATIHAN
Bagian ini mencakup penggunaan CSS untuk mengubah tampilan standar pada
halaman web Anda. Tidak semua tag style digunakan disini karena jumlahnya sangat
banyak, silakan Anda cari referensi lain sebagai tambahan untuk mempelajari CSS.
Seperti biasa, simpan file-file Anda dalam folder Anda sendiri, kemudian cobalah
langsung untuk melihat hasil setiap contoh, lalu ubahlah isinya untuk melihat variasi
tampilannya yang memungkinkan. Perhatikan bahwa semua contoh disini
menggunakan CSS internal, silakan Anda berlatih untuk mengubahnya menjadi CSS
eksternal. Gunakan sembarang gambar yang dapat Anda temui untuk contoh yang
memerlukan gambar (sesuaikan dulu dengan nama file dalam contoh).
32
1) Pengaturan latar belakang
1. <html>
2. <head>
3. <style type="text/css">
4. body{
5. background: #00ff00 url("gambar.gif") no-repeat fixed center;
6. }
7. </style>
8. </head>
9. <body>
10. <p>
11. <b>Catatan:</b>
12.Properti background-attachment dan background- position tidak bisa digunakan dalam browser Netscape
13. </p>
14. <p>Ada teks disini</p>
15. <p>Tuliskan sekehendak kalian</p>
16. <p>Terserah apa saja</p>
17. <p>Yang penting ada tulisannya</p>
18. </body>
19. </html>
2) Penanganan font
1. <html>
2. <head>
3. <style type="text/css">
4. p.normal {font-weight: normal; }
5. p.tebal {font-weight: bold; }
6. p.teballl {font-weight: 900; }
7. p.lengkap{
8. font: italic small-caps 900 12px arial;
9. }
10. </style>
11. </head>
12. <body>
13. <p class="normal">
14. Perhatikan paragraf ini</p>
15. <p class="tebal">
16. Bandingkan dengan paragraf diatasnya</p>
17. <p class="teballl">
18. Bandingkan yang ini juga</p>
19. <p class="lengkap">
20. Paragraf dengan semua atribut font dimasukkan</p>
21. </body>
22. </html>
3) Pembuatan border
1. <html>
2. <head>
3. <style type="text/css">
4. p.borderous {
5. border-style: double;
33
6. border-width: 5px 10px 1px medium;
7. border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
8. }
9. </style>
10. </head>
11. <body>
12. <p class="borderous">
13. <b>Catatan:</b> tidak didukung oleh internet explorer versi lama</p>
14. </body>
15. </html>
4) Pengaturan margin
1. <html>
2. <head>
3. <style type="text/css">
4. p.margin {margin: 2cm 4cm 3cm 80px}
5. </style>
6. </head>
7. <body>
8. <p>
9. Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja.
10. </p>
11. <p class="margin">
12. Bandingkan dengan tampilan paragraf ini. Coba Anda kecilkan ukuran window brows
er agar terlihat lebih jelas perbedaannya.
13. </p>
14. <p>
15. This is a paragraph
16. </p>
17. </body>
18. </html>
5) Mengatur padding pada sel tabel
1. <html>
2. <head>
3. <style type="text/css">
4. td {padding: 1.5cm}
5. td.value2 {padding: 0.5cm 2.5cm}
6. </style>
7. </head>
8. <body>
9. <table border="1">
10. <tr>
11. <td>
12.Ini adalah tabel dengan sel yang menggunakan padding sama pada setiap s isinya (1,5cm).
13. </td>
14. </tr>
15. </table>
16. <br>
17. <table border="1">
18. <tr>
19. <td class="value2">
34
20. Bandingkan dengan tampilan tabel ini. Padding atas dan bawah memiliki n
ilai 0,5cm, sedangkan padding kanan dan kiri nilainya 2,5cm.
21. </td>
22. </tr>
23. </table>
24. </body>
25. </html>
6) Menggunakan list
1. <html>
2. <head>
3. <style type="text/css">
4. ul {
5. list-style: square outside url("gambarkecil.gif");
6. }
7. </style>
8. </head>
9. <body>
10. <p>Disini Anda menggunakan gambar berukuran kecil sebagai bullet untuk list. Pr operti outside akan
11. <ul>
12. <li>Kopi</li>
13. <li>Teh</li>
14. <li>Coca Cola</li>
15. </ul>
16. </body>
17. </html>
7) Elemen latar depan dan latar belakang
1. <html>
2. <head>
3. <style type="text/css">
4. img.x1{
5. position:absolute;
6. left:0;
7. top:0;
8. z-index:1;
9. }
10. img.x2{
11. position:absolute;
12. left:0;
13. top:100;
14. z-index:-1;
15. }
16. </style>
17. </head>
18. <body>
19. <p><b>Catatan:</b> Netscape 4 tidak mendukung properti "z-index".</p>
20. <h1>Sepertinya Heading ini terhalang oleh gambar</h1>
21. <img class="x1" src="gambar.bmp" width="100" height="80">
22.<p>Nilai default z-index adalah 0. Z-
index 1 memiliki prioritas lebih tinggi, sedangkan Z-index –
1 memiliki prioritas lebih rendah.</p>
23. <p></p>
35
24. <img class="x2" src="gambar.bmp" width="100" height="80">
25. <p>Sekarang Anda bisa membandingkan dengan tampilan di bagian bawah ini. Apakah
masih terhalang gambar?</p>
26. </body>
27. </html>
8) Mengubah tampilan Link
1. <html>
2. <head>
3. <style type="text/css">
4. a:link {color: #ff0000}
5. a.one:visited {color: #0000ff}
6. a.one:hover {color: #ffcc00}
7. a.two:visited {color: #0000ff}
8. a.two:hover {font-size: 150%}
9. a.three:visited {color: #0000ff}
10. a.three:hover {background: #66ff66}
11. a.four:visited {color: #0000ff}
12. a.four:hover {font-family: fixedsys}
13. a.five:visited {color: #0000ff; text-decoration: line-through}
14. a.five:hover {text-decoration: overline}
15. </style>
16. </head>
17. <body>
18.<p>Gerakkan pointer mouse di atas link-
link di bawah ini untuk membuat link tersebut berubah tampilannya.</p>
19. <p><a class="one" href="hlm1.htm">Mengubah properti color</a></p>
20. <p><a class="two" href="hlm2.htm"> Mengubah properti font-size</a></p>
21.<p><a class="three" href="hlm3.htm"> Mengubah properti background- color</a></p>
22. <p><a class="four" href="hlm4.htm"> Mengubah properti font-family</a></p>
23. <p><a class="five" href="hlm5.htm"> Mengubah properti text-decoration</a></p>
24. </body>
25. </html>
36
MODULE 5
DASAR PHP
5.1 RINGKASAN
Pada modul-modul sebelumnya telah mempelajari client-side programming.
Pada modul ini dan seterusnya akan fokus untuk menggunakan server-side
programming yakni PHP. Akan tetapi untuk memformat keluaran tentu menggunakan
HTML dan CSS.
5.2 LATIHAN
Bagian ini mencakup penggunaan dasar tentang PHP seperti menampilkan text,
menampilkan HTML pada PHP, PHP dan HTML, komentar pada PHP, variabel, operasi
aritmatika, string dan manipulasi string. Simpanlah semua file-file dalam folder
tersendiri, cobalah dan pahami serta eksplorasi latihan-latihan yang diberikan pada
modul ini.
1) Ouput dengan PHP
<?php
echo "Hello World";
?>
2) PHP dengan HTML
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <?php
6. echo "Hello world";
7. ?>
8.
9. </body>
10. </html>
37
3) Komentar pada PHP
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <?php
6. // This is a single-line comment
7.
8. # This is also a single-line comment
9.
10. /*
11. This is a multiple-lines comment block
12. that spans over multiple
13. lines
14. */
15.
16. // You can also use comments to leave out parts of a code line
17. $x = 5 /* + 15 */ + 5;
18. echo $x;
19. ?>
20.
21. </body>
22. </html>
4) PHP Case Sensitive
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <?php
6. $color = "red";
7.
8. echo
echo "My
"My car is is
house " ." $color . "<br>";
. $COLOR . "<br>";
9.
10. echo
?> "My boat is " . $coLOR . "<br>"; 11.
13. </html>
12. </body>
5) Deklarasi Variabel
1. <?php
2. $txt = "Hello world!";
3. $x = 5;
$y = 10.5;
5. 4.
?>
38
6) Output Variabel 1
1. <?php
2. $txt = "W3Schools.com";
3. echo "I love $txt!";
4. ?>
7) Output Variabel 2
1. <?php
2. $txt = "W3Schools.com";
3. echo "I love " . $txt . "!";
4. ?>
8) Ouput Variabel 3 dengan operasi aritmatika
1. <?php
2. $x = 5;
3. $y = 4;
echo $x + $y;
5. 4.
?>
9) Mengetahui panjang string
1. <?php
2. echo strlen("Hello world!"); // outputs 12
3. ?>
10) Menghitung jumlah kata pada kalimat
1. <?php
echo str_word_count("Hello world!"); // outputs 2
3. 2.
?>
11) Membalikan String
1. <?php
2. echo strrev("Hello world!"); // outputs !dlrow olleH
3. ?>
39
12) Pencarian dalam string (Posisi)
1. <?php
2. echo strpos("Hello world!", "world"); // outputs 6
3. ?>
13) Mengganti Text
1. <?php
2. echo str_replace("world", "Dolly", "Hello world!"); // outputs Hello Dolly!
3. ?>
14) Fungsi (dasar)
1. <?php
2. function writeMsg() {
3. echo "Hello world!";
4. }
5.
writeMsg(); // call the function
7. 6.
?>
15) Fungsi dengan argumen
1. <?php
2. function familyName($fname) {
3. echo "$fname Refsnes.<br>";
4. }
5.
6. familyName("Jani");
7. familyName("Hege");
8. familyName("Stale");
9. familyName("Kai Jim");
familyName("Borge");
11.10.
?>
16) Fungsi dengan lebih dari satu argumen
1. <?php
2. function familyName($fname, $year) {
3. echo "$fname Refsnes. Born in $year <br>";
4. }
5.
6. familyName("Hege", "1975");
7. familyName("Stale", "1978");
40
8. familyName("Kai Jim", "1983");
9. ?>
17) Fungsi dengan nilai default pada argumen
1. <?php
2. function setHeight($minheight = 50) {
3. echo "The height is : $minheight <br>";
4. }
5.
6. setHeight(350);
7. setHeight(); // will use the default value of 50
8. setHeight(135);
9. setHeight(80);
10. ?>
18) Fungsi yang mengembalikan nilai
1. <?php
2. function sum($x, $y) {
3. $z = $x + $y;
4. return $z;
5. }
6.
7. echo "5 + 10 = " . sum(5, 10) . "<br>";
8. echo "7 + 13 = " . sum(7, 13) . "<br>";
9. echo "2 + 4 = " . sum(2, 4);
10. ?>
41
MODULE 6
KONTROL KONDISI
6.1 RINGKASAN
Pada praktikum kali ini, anda akan mempelajari kondisi dan perulangan pada PHP.
Tetapi, sebelumnya anda harus tahu operator-operator yang ada pada PHP seperti
operator aritmatika, assigment, perbandingan, logika dan sebagainya.
a Operator Aritmatika
Operator Name Example Result
+ Addition $x + $y Sum of $x and $y
- Subtraction $x - $y Difference of $x and $y
* Multiplication $x * $y Product of $x and $y
/ Division $x / $y Quotient of $x and $y
% Modulus $x % $y Remainder of $x divided by $y
** Exponentiation $x ** $y Result of raising $x to the $y'th
power (Introduced in PHP 5.6)
b PHP Assignment Operators
Assignment Same as... Description
x=y x=y The left operand gets set to the value of
the expression on the right
x += y x=x+y Addition
x -= y x=x-y Subtraction
x *= y x=x*y Multiplication
x /= y x=x/y Division
x %= y x=x%y Modulus
42
c Operator Perbandingan
Operator Name Example Result
== Equal $x == $y Returns true if $x is equal to $y
=== Identical $x === $y Returns true if $x is equal to $y, and they
are of the same type
!= Not equal $x != $y Returns true if $x is not equal to $y
<> Not equal $x <> $y Returns true if $x is not equal to $y
!== Not identical $x !== $y Returns true if $x is not equal to $y, or
they are not of the same type
> Greater than $x > $y Returns true if $x is greater than $y
< Less than $x < $y Returns true if $x is less than $y
>= Greater than or $x >= $y Returns true if $x is greater than or equal
equal to to $y
<= Less than or $x <= $y Returns true if $x is less than or equal to
equal to $y
d Operator Increment / Decrement
Operator Name Description
++$x Pre-increment Increments $x by one, then returns $x
$x++ Post-increment Returns $x, then increments $x by one
--$x Pre-decrement Decrements $x by one, then returns $x
43
$x-- Post-decrement Returns $x, then decrements $x by one
e Operator Logika
Operator Name Example Result
and And $x and $y True if both $x and $y are true
or Or $x or $y True if either $x or $y is true
xor Xor $x xor $y True if either $x or $y is true, but
not both
&& And $x && $y True if both $x and $y are true
|| Or $x || $y True if either $x or $y is true
! Not !$x True if $x is not true
f Operator String
Operator Name Example Result
. Concatenation $txt1 . $txt2 Concatenation of $txt1
and $txt2
.= Concatenation $txt1 .= $txt2 Appends $txt2 to $txt1
assignment
6.2 LATIHAN
Bagian ini mencakup kondisi dan perulangan, dimana mereka memiliki beberapa
style penulisan kode. Simpanlah semua file-file dalam folder tersendiri, cobalah dan
pahami serta eksplorasi latihan-latihan yang diberikan pada modul ini. Setiap style
perulangan dan kondisi diterapkan pada kasus yang berbeda.
44
a Percabangan
1) If Stement
1. <?php
$t = date("H");
3. 2.
4. if ($t < "20") {
5. echo "Have a good day!";
6. }
7. ?>
2) if…else statement
1. <?php
2. $t = date("H");
3.
4. if ($t < "20") {
5. echo "Have a good day!";
} else {
7. 6. echo "Have a good night!";
8. }
9. ?>
3) if…elseif…else statement
1. <?php
2. $t = date("H");
3.
4. if ($t < "10") {
5. echo "Have a good morning!";
6. } elseif ($t < "20") {
7. echo "Have a good day!";
} else {
9. 8. echo "Have a good night!";
10. }
11. ?>
4) Switch statement
1. <?php
2. $favcolor = "red";
3.
4. switch ($favcolor) {
5. case "red":
6. echo "Your favorite color is red!";
7. break;
8. case "blue":
9. echo "Your favorite color is blue!";
10. break;
45
11. case "green":
12. echo "Your favorite color is green!";
13. break;
14. default:
15. echo "Your favorite color is neither red, blue, nor green!";
16. }
17. ?>
b Perulangan
1) While
1. <?php
2. $x = 1;
3.
4. while($x <= 5) {
5. echo "The number is: $x <br>";
6. $x++;
7. }
8. ?>
2) do…while
1. <?php
2. $x = 1;
3.
4. do {
5. echo "The number is: $x <br>";
6. $x++;
7. } while ($x <= 5);
8. ?>
3) for
1. <?php
2. for ($x = 0; $x <= 10; $x++) {
3.echo "The number is: $x <br>"; 4. }
5. ?>
4) foreach
1. <?php
$colors = array("red", "green", "blue", "yellow");
3. 2.
4. foreach ($colors as $value) {
5. echo "$value <br>";
6. }
7. ?>
46
MODULE 7
ARRAY
7.1 RINGKASAN
Array merupakan variabel spesial yang dapat menampung lebih dari satu nilai
pada saat yang bersamaan. Pada array terdapat beberapa istilah umum yakni: (1)
variabel array, (2) key/index array dan (3) nilai array. Untuk membuat array dengan
mendeklarasikan variabel dan mengeset nilainya dengan array() seperti $mobil =
array(), dimana array() menandakan array kosong.
7.2 LATIHAN
Pada latihan ini mencakup pendeklarasian array, pengakesan array, panjang
array, array associative dan mutidemensional array.
1) Mendeklarasikan dan mengakses array
1. <?php
2. $cars = array("Volvo", "BMW", "Toyota");
3. echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
4. ?>
2) Mengetahui panjanga array
1. <?php
2. $cars = array("Volvo", "BMW", "Toyota");
3. echo count($cars);
4. ?>
3) Mengakses array melalui perulangan (loop)
1. <?php
2. $cars = array("Volvo", "BMW", "Toyota");
3. $arrlength = count($cars);
4.
5. for($x = 0; $x < $arrlength; $x++) {
6. echo $cars[$x];
7. echo "<br>";
8. }
47
9. ?>
4) Mendeklarasikan Associative array dan mengaksesnya
1. <?php
2. $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
3. echo "Peter is " . $age['Peter'] . " years old.";
4. ?>
5) Mengakses semua nilai associative array dengan perulangan
1. <?php
2. $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
3.
4. foreach($age as $x => $x_value) {
5. echo "Key=" . $x . ", Value=" . $x_value;
6. echo "<br>";
7. }
8. ?>
6) Array Multidimensi
1. <?php
$cars = array
3. 2. (
4. array("Volvo",22,18),
5. array("BMW",15,13),
6. array("Saab",5,2),
7. array("Land Rover",17,15)
8. );
9. for ($row = 0; $row < 4; $row++) {
10. echo "<p><b>Row number $row</b></p>";
11. echo "<ul>";
12. for ($col = 0; $col < 3; $col++) {
13. echo "<li>".$cars[$row][$col]."</li>";
14. }
15. echo "</ul>";
16. }
17. ?>
48
49
MODULE 8
DATABASE
8.1 RINGKASAN
Database digunakan untuk menyimpan data pada aplikasi. Database terdiri dari
satu atau banyak table dan setiap table terdiri dari baris dan kolom. Untuk
memanipulasi database, PHP memiliki perintah-perintah yang digunakan untuk meng-
eksekusi SQL.
8.2 LATIHAN
Latihan pada pada praktikum ini secaumum mencakup koneksi database,
menjalankan perintah SQL dan mengambil keluaran dari perintah tersebut.
1) Koneksi database
1. <?php
2. $servername = "localhost";
3. $username = "root";
4. $password = "";
5.
6. // Create connection
7. $conn = mysqli_connect($servername, $username, $password);
8.
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13. echo "Connected successfully";
14. ?>
2) Membuat database di PHP
1. <?php
$servername = "localhost";
3. 2.
$username = "username";
4. $password = "password";
5.
6. // Create connection
7. $conn = mysqli_connect($servername, $username, $password);
8. // Check connection
9. if (!$conn) {
50
10. die("Connection failed: " . mysqli_connect_error());
11. }
12.
13. // Create database
14. $sql = "CREATE DATABASE myDB";
15. if (mysqli_query($conn, $sql)) {
16. echo "Database created successfully";
17. } else {
18. echo "Error creating database: " . mysqli_error($conn);
19. }
20.
21. mysqli_close($conn);
22. ?>
3) Membuat Table di PHP
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. // sql to create table
15. $sql = "CREATE TABLE MyGuests (
16. id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
17. firstname VARCHAR(30) NOT NULL,
18. lastname VARCHAR(30) NOT NULL,
19. email VARCHAR(50),
20. reg_date TIMESTAMP
21. )";
22.
23. if (mysqli_query($conn, $sql)) {
24. echo "Table MyGuests created successfully";
25. } else {
26. echo "Error creating table: " . mysqli_error($conn);
27. }
28.
29. mysqli_close($conn);
30. ?>
4) Insert data pada table
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
51
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "INSERT INTO MyGuests (firstname, lastname, email)
15. VALUES ('John', 'Doe', '[email protected]')";
16.
17. if (mysqli_query($conn, $sql)) {
18. echo "New record created successfully";
19. } else {
20. echo "Error: " . $sql . "<br>" . mysqli_error($conn);
21. }
22.
23. mysqli_close($conn);
24. ?>
5) Mendapatkan ID dari data yang dimasukan
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. $conn
8. // Create connection
= mysqli_connect($servername, $username, $password, $dbname);
10.
9. if Check
// (!$conn) {
connection
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "INSERT INTO MyGuests (firstname, lastname, email)
15. VALUES ('John', 'Doe', '[email protected]')";
16.
17. if (mysqli_query($conn, $sql)) {
18. $last_id = mysqli_insert_id($conn);
19.echo
20. "New
} else { record created successfully. Last inserted ID is: " . $last_id;
22. }
21.echo "Error: " . $sql . "<br>" . mysqli_error($conn); 23.
25. ?>
24. mysqli_close($conn);
6) Eksekusi multiple Kueri
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
52
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "INSERT INTO MyGuests (firstname, lastname, email)
15. VALUES ('John', 'Doe', '[email protected]');";
16. $sql .= "INSERT INTO MyGuests (firstname, lastname, email)
17. VALUES ('Mary', 'Moe', '[email protected]');";
18. $sql .= "INSERT INTO MyGuests (firstname, lastname, email)
19. VALUES ('Julie', 'Dooley', '[email protected]')";
20.
21. if (mysqli_multi_query($conn, $sql)) {
22. echo "New records created successfully";
23. } else {
24. echo "Error: " . $sql . "<br>" . mysqli_error($conn);
25. }
26.
27. mysqli_close($conn);
28. ?>
7) Prepared Statement dan Bound Parameter
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname =
"myDB"; 6.
7. // Create connection
8. $conn = new mysqli($servername, $username, $password, $dbname);
9.
10. // Check connection
11. if ($conn->connect_error) {
12. die("Connection failed: " . $conn->connect_error);
13. }
14.
15. // prepare and bind
16. $stmt = $conn-
>prepare("INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)");
17. $stmt->bind_param("sss", $firstname, $lastname, $email);
18.
19. // set parameters and execute
20. $firstname = "John";
21. $lastname = "Doe";
22. $email = "[email protected]";
23. $stmt->execute();
24.
25. $firstname = "Mary";
26. $lastname = "Moe";
27. $email = "[email protected]";
28. $stmt->execute();
29.
30. $firstname = "Julie";
31. $lastname = "Dooley";
32. $email = "[email protected]";
33. $stmt->execute();
34.
35. echo "New records created successfully";
36.
37. $stmt->close();
53
38. $conn->close();
39. ?>
8) Select Data
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. // Create connection
8. $conn = mysqli_connect($servername, $username, $password, $dbname);
9. // Check connection
10. if (!$conn) {
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "SELECT id, firstname, lastname FROM MyGuests";
15. $result = mysqli_query($conn, $sql);
16.
17. if (mysqli_num_rows($result) > 0) {
18. // output data of each row
19. while($row = mysqli_fetch_assoc($result)) {
20.echo "id: " . $row["id"]. " -
Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
21. }
22. } else {
23. echo "0 results";
24. }
25.
26. mysqli_close($conn);
27. ?>
9) Hapus Data
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. $conn
8. // Create connection
= mysqli_connect($servername, $username, $password, $dbname);
10. if Check
9. // (!$conn) {
connection
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. // sql to delete a record
15. $sql = "DELETE FROM MyGuests WHERE id=3";
16.
17. if (mysqli_query($conn, $sql)) {
18. echo "Record deleted successfully";
19. } else
20. echo{ "Error deleting record: " . mysqli_error($conn);
22.
21. }
23. mysqli_close($conn);
54
24. ?>
25. <?php
26. $servername = "localhost";
27. $username = "username";
28. $password = "password";
29. $dbname = "myDB";
30.
31. // Create connection
32. $conn = mysqli_connect($servername, $username, $password, $dbname);
33. // Check connection
34. if (!$conn) {
35. die("Connection failed: " . mysqli_connect_error());
36. }
37.
38. // sql to delete a record
39. $sql = "DELETE FROM MyGuests WHERE id=3";
40.
41. if (mysqli_query($conn, $sql)) {
42. echo "Record deleted successfully";
43. } else {
44. echo "Error deleting record: " . mysqli_error($conn);
45. }
46.
47. mysqli_close($conn);
48. ?>
10) Ubah Data
1. <?php
2. $servername = "localhost";
3. $username = "username";
4. $password = "password";
5. $dbname = "myDB";
6.
7. $conn
8. // Create connection
= mysqli_connect($servername, $username, $password, $dbname);
10. if Check
9. // (!$conn) {
connection
11. die("Connection failed: " . mysqli_connect_error());
12. }
13.
14. $sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";
15.
16. if (mysqli_query($conn, $sql)) {
echo "Record updated successfully";
17. } else {
18.
19. echo "Error updating record: " . mysqli_error($conn);
20. }
21.
22. mysqli_close($conn);
23. ?>
55
MODULE 9
SESSION DAN SECURITY
9.1 RINGKASAN
Dalam suatu aplikasi, terdapat bagian-bagian yang hanya boleh diakes oleh
pengguna tertentu, dikarenakan terdapat data sensitive ataupun rahasia. Sehingga
untuk menjaga hal itu maka area tersebut perlu diproteksi hanya orang yang berhak
saja yang boleh mengakses data tersebut.
9.2 LATIHAN
Latihan ini mencakup pembuatan form login, proses login, session, set session,
proteksi halaman dan unset session.
a Login
1) Form Login (login.php)
1. <form action="proses-login.php" method="POST">
2. Username <input type="text" name="username" placeholder="Enter the username">
3. Password <input type="password" name="password" placeholder="Enter the password
">
4. <input type="submit" value="Login">
5. </form>
2) Proses Login (proses-login.php)
1. <?php
2. session_start();
3.
4. if($_POST['username'] == 'rofil' && $_POST['password'] == '12345'){
5. // Login process is by assining session variable
6. $_SESSION['login']= true;
7. $_SESSION['username'] = $_POST['username'];
8. echo "Login berhasil klik
9. <a href='admin.php'>Halaman Admin</a> untuk melihat data sensitif
10. atau <a href='logout.php'>logout</a> untuk keluar";
11. }else{
12. echo "Kombinasi username dan password salah. Silahkan login lagi!";
13. }
56
b Session untuk proteksi halaman (admin.php)
1. <?php
2. session_start();
3.
4. if(!isset($_SESSION['login']) && $_SESSION['login'] != true ){
5. echo "Anda tidak berhak mengakses halaman ini. Silahkan <a href='login.php'>log
in</a> terlebih dahulu";
6. }else{
7. echo "Ini halaman admin!! Informasi/halaman sensitif diletakan disini";
8. }
c Logout (logout.php)
1. <?php 3.
5.
2. unset($_SESSION['username']);
session_start();
4. echo
7. unset($_SESSION['login']);
"Sukses logout. Silahkan <a href='login.php'>login</a> untuk masuk kehalaman a dmin";
6.
Anda mungkin juga menyukai
- MODUL Web Programing Modul 1-10 (SFILEBelum ada peringkatMODUL Web Programing Modul 1-10 (SFILE77 halaman
- Modul 2 - Praktek-Web-Design TE 2019Belum ada peringkatModul 2 - Praktek-Web-Design TE 201911 halaman
- Adoc - Pub Modul Desain Web Teori Praktik HTML Css Dan JavascBelum ada peringkatAdoc - Pub Modul Desain Web Teori Praktik HTML Css Dan Javasc10 halaman
- UTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDFBelum ada peringkatUTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDF15 halaman
- PEMROGRAMAN WEB - Pertemuan 2 - Materi TambahanBelum ada peringkatPEMROGRAMAN WEB - Pertemuan 2 - Materi Tambahan25 halaman
- Pertemuan 1 - Pendahuluan Dan Dasar HTMLBelum ada peringkatPertemuan 1 - Pendahuluan Dan Dasar HTML52 halaman
- Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0Dari EverandMari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
- Adoc - Pub Modul Desain Web Teori Praktik HTML Css Dan JavascAdoc - Pub Modul Desain Web Teori Praktik HTML Css Dan Javasc
- UTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDFUTS - NOVIA KRISNA ISTIFARAH - 180312613017 - Off I PDF
- Pemrograman Python untuk Pemula: PemrogramanDari EverandPemrograman Python untuk Pemula: Pemrograman