Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1
Tabel Membuat tabel sederhana Menambahkan judul tabel Mengatur lebar dan tinggi suatu tabel Perataan dalam tabel Membuat warna pada tabel Penggabungan baris/kolom Cellpading dan cellspacing Form Textbox Submit dan Reset Checkbox Radio button Daftar Drop Down Text Area D3 Manajemen Informatika - Unijoyo 2
Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik D3 Manajemen Informatika - Unijoyo 3
Tag yang diperlukan: <table> Atribut-atribut: Border Width Height Bgcolor Background Color Align Valign Rowspan Colspan Atribut Cellspacing dan cellpadding Fungsi Menentukan ukuran border/garis tabel Menentukan lebar tabel Menentukan tinggi tabel Menentukan background tabel Menentukan gambar yang digunakan untuk background tabel Untuk mengatur warna suatu sel dalam tabel Mengatur bentuk perataan horisontal Mengatur bentuk perataan vertikal Menggabungkan beberapa baris Menggabungkan beberapa kolom Mengatur spasi antar sel dan spasi dalam sel D3 Manajemen Informatika - Unijoyo 4
Tag yang diperlukan: Membuat baris: <tr> (table row) Membuat kolom: <td> (table data) Contoh: <table border="1"> <tr><td>baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr> <tr><td>baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr> </table> Tampilan: D3 Manajemen Informatika - Unijoyo 5
Judul tabel: <caption> Judul baris/kolom: <th> (table header) Contoh: <table border="1"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>no</th><th>npm</th><th>nama</th></tr> <tr><td>1</td><td>06.100.001</td><td>amin A. Angkasa</td></tr> <tr><td>2</td><td>06.100.002</td><td>beni B. Bernardi</td></tr> </table> Tampilan: D3 Manajemen Informatika - Unijoyo 6
Atribut: width dan height Nilai: ukuran % (max 100%) ukuran pixel Contoh: <table border="1" width= 50% > <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>no</th> <th>npm</th> <th>nama</th></tr> <tr><td width= 20 >1.</td> <td width= 80 height= 50 >06.100.001</td> <td width= 180 height= 50 >Amin A. Angkasa</td></tr> <tr><td width= 20 >2.</td> <td width= 80 height= 70 >06.100.002</td> <td width= 180 height= 70 >Beni B. Bernardi</td></tr> </table> Tampilan: D3 Manajemen Informatika - Unijoyo 7
horisontal: atribut align à utk <caption>, <tr>, <td> dan <th> vertikal: atribut valign à utk <tr>, <td> dan <th> Contoh: <table border="1" align="center"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>no</th><th>npm</th><th>nama</th></tr> <tr><td align="center" width="20">1.</td> <td align="center" valign="middle" width="80" height="50">06.100.001</td> <td align="right" valign="top" width="180" height="50">amin A. Angkasa</td></tr> <tr><td width="20">2.</td> <td align="left" valign="top" width="80" height="70">06.100.002</td> <td align="left" valign="bottom" width="180" height="70">beni B. Bernardi</td></tr> </table> Tampilan: D3 Manajemen Informatika - Unijoyo 8
Atribut: bgcolor Contoh: <body bgcolor="purple"> <font size="3" face="arial" color="yellow"> <table border="2" bgcolor="white" align="center"> <caption align="bottom"> <b> Tabel Daftar Mahasiswa </b> </caption> <tr bgcolor="yellow"> <th>no</th><th>npm</th><th>nama</th></tr> <tr bgcolor="cyan"><td align="center" width="20">1.</td> <td align="left" valign="middle width="80" height="40">06.100.001</td> <td align="left" valign="middle width="180" height="40">amin A. Angkasa</td></tr> <tr><td bgcolor="blue" width="20">2.</td> <td bgcolor="red" align="left" valign="middle" width="80" height="40">06.100.002</td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">beni B. Bernardi</td></tr> </table> </body> Tampilan: D3 Manajemen Informatika - Unijoyo 9
Menggabungkan bbrp kolom menjadi 1: atribut colspan Menggabungkan bbrp kolom menjadi 1: atribut rowspan Contoh Tampilan: D3 Manajemen Informatika - Unijoyo 10
Script HTML: <table border="1" bgcolor="white" align="center"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">no</th> <th rowspan="2">npm</th> <th rowspan="2">nama</th> <th colspan="2">nilai</th> </tr> <tr bgcolor="gray"><th>uts</th> <th>uas</th> </tr> <tr><td align="center" width="20">1.</td> <td align="left" valign="middle" width="80" height="40">06.100.001</td> <td align="left" valign="middle" width="180" height="40">amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> <tr><td width="20">2.</td> <td align="left" valign="middle" width="80" height="40">06.100.002</td> <td align="left" valign="middle" width="180" height="40">beni B. Bernardi</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> </table> D3 Manajemen Informatika - Unijoyo 11
atribut cellpading: mengatur spasi antara border dengan tulisan atribut cellspasing: mengatur spasi antar 2 buah sel Contoh Tampilan: D3 Manajemen Informatika - Unijoyo 12
Script HTML: <table border="1" bgcolor="white" align="center cellpadding="10" cellspacing="12"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">no</th> <th rowspan="2">npm</th> <th rowspan="2">nama</th> <th colspan="2">nilai</th> </tr> <tr bgcolor="gray"><th>uts</th> <th>uas</th> </tr> <tr><td align="center" width="20">1.</td> <td align="left" valign="middle" width="80" height="40">06.100.001</td> <td align="left" valign="middle" width="180" height="40">amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> <tr><td width="20">2.</td> <td align="left" valign="middle" width="80" height="40">06.100.002</td> <td align="left" valign="middle" width="180" height="40">beni B. Bernardi</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> </table> D3 Manajemen Informatika - Unijoyo 13
Fungsi: Menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server Standar penulisan: <form method= post/get action=... >... </form> Atribut: Atribut Fungsi Method Action Name Value Type Metode pengiriman data ke file tujuan (POST atau GET) Aksi yang akan dilakukan jika user menekan tombol Submit Memerikan nama tiap masukan Memberikan nilai suatu masukan Tipe form yang akan digunakan D3 Manajemen Informatika - Unijoyo 14
Tag: <input> Atribut-atribut: Atribut type=["text" "password"] name value size maxlength Fungsi Menentukan jenis field masukan Text, submit, password Menentukan nama untuk field sehingga dapat dirujuk nantinya Memberi nilai suatu input mengatur lebar field secara horisontal, berapa huruf maksimal yang dapat ditampilkan menentukan jumlah maksimum huruf (karakter) yang dapat dimasukkan D3 Manajemen Informatika - Unijoyo 15
Contoh: <body> <b>login: <b> <br> <form method="post"> <table> <tr> <td>user:</td> <td><input type="text" name="user" size="20"></td></tr> <tr> <td>password:</td> <td><input type="password" name="password" size="20"></td></tr> </table> </form> </body> Tampilan: D3 Manajemen Informatika - Unijoyo 16
Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form D3 Manajemen Informatika - Unijoyo 17
Contoh: <body> <b>data Pengunjung: <b> <br> <form method="post" action="data.html"> <table> <tr> <td>nama:</td> <td><input type="text" name="nama" size="20"></td></tr> <tr> <td>alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr> </table> <input type="submit" value="simpan" name="t1"> <input type="reset" value="reset" name="t2"> </form> </body> Tampilan: D3 Manajemen Informatika - Unijoyo 18
Fungsi: Untuk memberi beberapa pilihan kepada user Contoh: <form method="post"> Bacaan yang Anda sukai: <br> <input type="checkbox" name="bacaan" value="novel"> Novel <br> <input type="checkbox" name="bacaan" value="koran"> Koran <br> <input type="checkbox" name="bacaan" value="majalah"> Majalah <br> <input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br> </form> Tampilan: D3 Manajemen Informatika - Unijoyo 19
Fungsi: Untuk memberi (hanya) satu pilihan kepada user Contoh: <form method="post"> Apakah Anda setuju dengan kenaikan SPP: <br> <input type="radio" name="opsi" value="ya"> Ya <br> <input type="radio" name="opsi" value="tidak"> Tidak <br> <input type="radio" name="opsi" value="ragu"> Ragu-ragu <br> </form> Tampilan: D3 Manajemen Informatika - Unijoyo 20
Fungsi: Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja) Contoh: <form method="post"> Jurusan: <br> <select name="jurusan"> <option value="tinf"> Teknik Informatika <br> <option value="mi"> D3 Manajemen Informatika <br> <option value="ti"> Teknik Industri <br> </select> </form> Tampilan: D3 Manajemen Informatika - Unijoyo 21
Fungsi: Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar Tag: <textarea> Atribut-atribut: Atribut Fungsi Rows Columns Wrap=["off" "virtual" "physical"] Menetukan lebar kotak komentar Menentukan tinggi kotak komentar Menentukan fitur word wrapping D3 Manajemen Informatika - Unijoyo 22
Contoh: <html> <head> <title> Penggunaan Text Area </title> </head> <body> <b>komentar: <b> <br> <form method="post"> <textarea rows="10" cols= 40" wrap="physical" name="komentar"> </textarea><br> </html> Tampilan: D3 Manajemen Informatika - Unijoyo 23
Pemakaian Tabel dalam halaman web dapat membuat informasi tampil secara terstruktur, ringkas dan mudah dibaca serta membuat tampilan web menjadi lebih menarik. Form digunakan untuk menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server. D3 Manajemen Informatika - Unijoyo 24
Chris Bates [2006]. Web Programming: Building Internet Applications, Third Edition, John Wiley & Sons Ltd, England. Husni [2007]. Pemrograman Database Berbasis Web, Graha Ilmu, Yogyakarta. Sebesta, R.W. [2002], Programming the World Wide Web, Addison Wesley. Sutarman, S.Kom [2003]. Membangun Aplikasi Web dengan PHP dan MySQL, Graha Ilmu, Yogyakarta. D3 Manajemen Informatika - Unijoyo 25