1 / 25

Pemrograman Basis Data Berbasis Web

Pemrograman Basis Data Berbasis Web. Pertemuan Ke-3 (HTML Lanjut [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

carlos-armstrong
Download Presentation

Pemrograman Basis Data Berbasis Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML Lanjut [1]) S1 Teknik Informatika - Unijoyo

  2. 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 (mengatur spasi antar sel dan dalam sel) • Form • Textbox • Submit dan Reset • Checkbox • Radio button • Daftar Drop Down • Text Area S1 Teknik Informatika - Unijoyo

  3. TABEL Fungsi: • Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca • Mengatur tampilan homepage agar lebih menarik S1 Teknik Informatika - Unijoyo

  4. Tag yang diperlukan: <table> • Atribut-atribut: S1 Teknik Informatika - Unijoyo

  5. Membuat tabel sederhana: • Tag yang diperlukan: • Membuat baris: <tr> (table row) • Membuat kolom: <td> (table data) Contoh: <table border="1"> <tr><td>Basis Data</td><td>Matematika Diskrit</td></tr> <tr><td>PBD WEB</td><td>ADBO</td></tr> </table> Tampilan: S1 Teknik Informatika - Unijoyo

  6. Menambahkan judul tabel: • Judul tabel: <caption> • Judul baris/kolom: <th> (table header) Tampilan: S1 Teknik Informatika - Unijoyo

  7. Mengatur lebar dan tinggi suatu tabel: Atribut: widthdan height Nilai: • ukuran % (max 100%) • ukuran pixel Tampilan: S1 Teknik Informatika - Unijoyo

  8. 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

  9. Membuat warna pada tabel: • Atribut: bgcolor Tampilan: 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> S1 Teknik Informatika - Unijoyo

  10. Penggabungan baris/kolom: • Menggabungkan bbrp kolom menjadi 1: atribut colspan • Menggabungkan bbrp baris menjadi 1: atribut rowspan Contoh Tampilan: S1 Teknik Informatika - Unijoyo

  11. 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

  12. Cellpading dan cellspacing: • atribut cellpading: mengatur spasi antara border dengan tulisan • atribut cellspasing: mengatur spasi antar 2 buah sel Contoh Tampilan: S1 Teknik Informatika - Unijoyo

  13. 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

  14. 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: S1 Teknik Informatika - Unijoyo

  15. Textbox • Tag: <input> • Atribut-atribut: S1 Teknik Informatika - Unijoyo

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. 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

  22. Text Area Fungsi: • Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar • Tag: <textarea> • Atribut-atribut: S1 Teknik Informatika - Unijoyo

  23. 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

  24. Summary • 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. S1 Teknik Informatika - Unijoyo

  25. Daftar Pustaka • 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. S1 Teknik Informatika - Unijoyo

More Related