Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Pemrograman Basis Data Berbasis Web

Presentasi serupa


Presentasi berjudul: "Pemrograman Basis Data Berbasis Web"— Transcript presentasi:

1 Pemrograman Basis Data Berbasis Web
Tulus Puguh W., S.Kom Facebook, E- mail :

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 Form  Textbox  Submit dan Reset  Checkbox  Radio button  Daftar Drop Down  Text Area

3 TABEL Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik

4 Tag yang diperlukan: <table> Atribut-atribut:

5 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:

6 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> </td><td>Amin A. Angkasa</td></tr> <tr><td>2</td><td> </td><td>Beni B. Bernardi</td></tr> </table> Tampilan:

7 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“> </td> <td width=“180” height=“50”>Amin A. Angkasa</td></tr> <tr><td width=“20”>2.</td> <td width=“80” height=“70”> </td> <td width=“180” height=“70”>Beni B. Bernardi</td></tr> </table>

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"> </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"> </td> <td align="left" valign="bottom" width="180" height="70">Beni B. Bernardi</td></tr> </table>

9 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"> </td> 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"> </td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td></tr> </table> </body>

10 Penggabungan baris/kolom:
Menggabungkan bbrp kolom menjadi 1: atribut colspan Menggabungkan bbrp baris menjadi 1: atribut rowspan Contoh Tampilan:

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"> </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><td width="20">2.</td> <td align="left" valign="middle" width="80" height="40"> </td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> </table>

12 Cellpading dan cellspacing:
 atribut cellpading: mengatur spasi antara border dengan tulisan  atribut cellspacing: mengatur spasi antar 2 buah sel Contoh Tampilan:

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"> </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><td width="20">2.</td> <td align="left" valign="middle" width="80" height="40"> </td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> </table>

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:

15 Textbox  Tag: <input>  Atribut-atribut:

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>

17 Submit dan Reset Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server Tombol Reset: digunakan ketika user inginmenghapus/mengosongkan semua masukan yang ditulis dalam form

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" </table> <input type="submit" value="Simpan" name="t1"> <input type="reset" value="Reset" name="t2"> </form> </body>

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>

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:

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>

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:

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>

24 Thanks..


Download ppt "Pemrograman Basis Data Berbasis Web"

Presentasi serupa


Iklan oleh Google