Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML Lanjut [1]) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1
Sub Pokok Bahasan: 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 S1 Teknik Informatika - Unijoyo 2
TABEL Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik S1 Teknik Informatika - Unijoyo 3
Tag yang diperlukan: <table> Atribut-atribut: Atribut Border Width Height Bgcolor Background Color Align Valign Rowspan Colspan Cellspacing dan cellpadding Menentukan lebar tabel Menentukan tinggi tabel Fungsi Menentukan ukuran border/garis 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 S1 Teknik Informatika - Unijoyo 4
Membuat tabel sederhana: 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: S1 Teknik Informatika - Unijoyo 5
Menambahkan judul tabel: 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: S1 Teknik Informatika - Unijoyo 6
Mengatur lebar dan tinggi suatu tabel: 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: S1 Teknik Informatika - Unijoyo 7
Perataan dalam tabel: 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: S1 Teknik Informatika - Unijoyo 8
Membuat warna pada tabel: 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: S1 Teknik Informatika - Unijoyo 9
Penggabungan baris/kolom: Menggabungkan bbrp kolom menjadi 1: atribut colspan Menggabungkan bbrp baris menjadi 1: atribut rowspan Contoh Tampilan: S1 Teknik 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> S1 Teknik Informatika - Unijoyo 11
Cellpading dan cellspacing: atribut cellpading: mengatur spasi antara border dengan tulisan atribut cellspacing: mengatur spasi antar 2 buah sel Contoh Tampilan: S1 Teknik 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> S1 Teknik Informatika - Unijoyo 13
FORM 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 Method Action Name Value Type Fungsi 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 S1 Teknik Informatika - Unijoyo 14
Textbox Tag: <input> Atribut-atribut: name value size maxlength Atribut type=["text" "password" ] Menentukan jenis field masukan Text, submit, password Menentukan nama untuk field sehingga dapat dirujuk nantinya Memberi nilai suatu input Fungsi mengatur lebar field secara horisontal, berapa huruf maksimal yang dapat ditampilkan menentukan jumlah maksimum huruf (karakter) yang dapat dimasukkan S1 Teknik 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: S1 Teknik Informatika - Unijoyo 16
Submit dan Reset 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 S1 Teknik 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: S1 Teknik Informatika - Unijoyo 18
Checkbox 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: S1 Teknik Informatika - Unijoyo 19
Radio button 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: S1 Teknik Informatika - Unijoyo 20
Daftar Drop Down 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: S1 Teknik Informatika - Unijoyo 21
Text Area 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 S1 Teknik 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: S1 Teknik Informatika - Unijoyo 23