Modul Praktikum Pemrograman Web 2019/2020

Modul 2 : Table dan Form

KOMPETENSI :
Setelah menyelesaikan praktikum pada Modul 2, Praktikan diharapkan mampu memahami dan mengaplikasikan
penggunaan tag-tag dalam membangun table & form pada web.
TUJUAN INSTRUKSIONAL KHUSUS :
1. Praktikan dapat memahami tentang HTML Table dan HTML Form.
2. Praktikan dapat mengimplementasikan penggunaan HTML Table dan HTML Form ke dalam aplikasi.
TUGAS PENDAHULUAN
1. Jelaskan apa yang dimaksud dengan CSS!
2. Jelaskan 3 cara pemanggilan CSS serta tuliskan bentuk penggunaannya!
3. Jelaskan apa yang dimaksud dengan selector, declaration, property dan value pada CSS!
4. Jelaskan perbedaan selector tag, class dan id pada CSS serta berikan contoh penggunaannya!
TEORI DASAR :
1. HTML Table
Table adalah kumpulan elemen data yang diorganisir kedalam bentuk tabular (memiliki kolom
vertikal dan horizontal. Dalam HTML, table memiliki dua fungsi untuk mengatur informasi kedalam
bentuk tabular dan untuk mengatur tampilan atau tata letak (layout) dari suatu halaman atau bagian
halaman tertentu.

Gambar. 2.1 Struktur Table

1) Tag Table
Untuk membentuk sebuah table dalam HTML dibutuhkan instruksi-instruksi berupa tag- tag
dasar dalam membangun sebuah struktur table dalam Web. Berikut tag-tag dasar dalam
membangun struktur table pada Web menggunakan HTML.
Tag Keterangan Syntax Output
<table>…</table> Mendefinisikan <table>
Table <tr>
<caption>… Memberi Judul <th>No</th>
</caption> Pada Table <th>Framework</th>
<th>Base</th>
<tr>…</tr> Membuat Baris </tr>
Pada Table <tr>
<th>…</th> Membuat Sel <td>1</td>
Header Table <td>CodeIgniter &
<td>…</td> Membuat Sel Laravel</td>
Table <td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>ReactJS &
VueJS</td>
<td>JavaScript</td>
</tr>
</table>

Laboratorium Rekayasa Perangkat Lunak | 6

 Modul Praktikum Pemrograman Web 2019/2020

2) Attribute dan Value Pada Table

Pada tag table memiliki beberapa attribute khusus yang berbeda dari tag-tag HTML lainnya.
Dimana, attribute-attribute ini memiliki nilai-nilai tertentu. Berikut beberapa attribute dan value
yang terdapat pada tag table pada HTML.
Attribute Value
Border digunakan untuk membentuk garis pada table, semakin besar nilai dari attribute
maka semakin tebal pula garis luar yang terbentuk, attribute ini disertakan pada tag
<table>.
border Angka
Untuk mengatur lebar dan tinggi kolom pada table, dapat menggunakan attribut Height dan
Width, umumnya diletakkan pada tabel head maupun table data.
height Angka
width Angka
Attribut cellspacing untuk mengatur jarak antar kolom, dan cellpadding untuk mengatur
jarak antar kolom dengan data yang ada didalamnya, attribut ini disertakan.
pada tag <table>
cellspacing Angka
cellpadding Angka
Untuk mengatur warna latar sel pada table dapat menggunakan attribut bgcolor yang
disertakan pada tag table row, table head maupun table data, dimana nilai dari attribut ini,
berupa kode hex dari sebuah warna yang ditandai dengan simbol # maupun nama
warna dalam bahasa inggris.
Bgcolor Kode Hexa Ataupun Nama Warna
Untuk menggabungkan beberapa baris atau kolom, digunakan atribut colspan untuk
menggabungkan kolom dan rowspan untuk menggabungkan baris yang disertakan dalam
tag table head atau table data.
colspan Angka
rowspan Angka

Gambar 2.2 Contoh Penerapan Attribut Pada Tag-Tag Table

Contoh Penerapan Attribut Pada Tag-Tag Table
<table border="1" cellspacing="1" cellpadding="8">
<caption>Jadwal Kuliah</caption>
<tr> <th rowspan="2">Jam</th><th colspan="6">Hari</th> </tr>
<tr>
<th>Senin</th> <th>Selasa</th>
<th>Rabu</th> <th>Kamis</th>
<th>Jum'at</th> <th>Sabtu</th>

Laboratorium Rekayasa Perangkat Lunak | 7

 Modul Praktikum Pemrograman Web 2019/2020

</tr>
<tr>
<td>07:00-08:00</td>
<td rowspan="2" bgcolor="#00DEAD">Praktikum Web</td>
<td></td><td></td><td></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
</tr>
<tr>
<td>08:00-09:00</td>
<td rowspan="2" bgcolor="#00DEAD">Praktikum Java</td>
<td rowspan="3" bgcolor="#0DEAD0">Java Lanjut</td>
<td></td>
</tr>
<tr>
<td>09:00-10:00</td> <td></td>
<td rowspan="2" bgcolor="#00DEAD">Praktikum Jaringan</td>
</tr>
<tr>
<td>10:00-11:20</td>
<td></td>
<td></td>
</tr>
<tr bgcolor="yellow" >
<td>11:20-13:00</td>
<td colspan="6">Ishoma</td>
</tr>
<tr>
<td>13:00-14:00</td>
<td rowspan="2" bgcolor="#0DEAD0">Web</td>
<td></td>
<td></td>
<td rowspan="2" bgcolor="#0DEAD0">Jaringan</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td>14:00-15:00</td>
<td></td>
<td></td>
</tr>
</table>

Laboratorium Rekayasa Perangkat Lunak | 8

 Modul Praktikum Pemrograman Web 2019/2020

2. HTML FORM
Form adalah suatu bagian di dalam halaman web yang berfungsi untuk mengizinkan pengguna
mengirimkan data ke web server. Dengan kata lain, form berperan sebagai user interface (antar-muka)
atau media untuk berkomunikasi antara user dengan web server. Untuk membangun sebuah form terdapat
beberapa tag yang digunakan, seperti tag form, input, select, textarea dan button.

Gambar 2.3 Contoh Penerapan Form

1) Element-Element Pada HTML FORM
Untuk membangun sebuah formulir atau form pada web, dibutuhkan beberapa tag yang
membentuk struktur form. Dengan tag form sebagai tag utama yang membentuk struktur form
yang kemudian didalam elemen form tersebut terdapat beberapa tag untuk membangun kontrol
pengguna berupa interface yang siap menerima permintaan atau request seperti tag input.
Sebelum melangkah kedalam daftar tag yang digunakan untuk membangun sebuah form, berikut
ini struktur tag input yang umum digunakan untuk membangun kontrol pengguna.

Gambar 2.4 Struktur Tag Input

Diatas merupakan gambar yang membentuk struktur kontrol berupa inputan text yang
akan ditampilkan pada web browser pengguna. Dimana terdapat attribut wajib yakni attribut
type dan name pada tag-tag yang digunakan sebagai form kontrol. Berikut ini daftar tag yang
digunakan untuk membangun sebuah form pada halaman web beserta attribut dan value yang
wajib disertakan dalam membentuk sebuah form.

Laboratorium Rekayasa Perangkat Lunak | 9

 Modul Praktikum Pemrograman Web 2019/2020

Tag Attribut Value Syntax Output

e
Tag Form merupakan tag utama yang digunakan untuk mengambil request dari pengguna bertindak
sebagai “pembungkus” elemen-elemen inputan yang terdapat didalamnya. Tag Form memiliki attribut
wajib berupa method untuk mendefinisikan metode pengiriman data dan action yang mendefinisikan aksi
yang merujuk kepada lokasi pengolahan data pada form. [Materi Method dan Action akan dibahas terpisah
pada Modul PHP]
<form>…</form> method POST <form Tag Form tidak memiliki output
GET method=”post” secara eksplisit.
action Lokasi dan >
Nama File </form>
Aksi
Tag Input digunakan untuk membangun kontrol form atau interface (antar-muka) untuk mengambil
request dari pengguna yang selanjutnya akan diproses oleh web server. Tag input memiliki attribut wajib
berupa type yang mendefinisikan tipe kontrol dan tag name yang mendefinisikan nama dari sebuah form
kontrol yang akan bertindak sebagai nama yang menampung data atau variable secara implisit.
<input/> type text <input
type=”text”/>
number <input
type=”number”/>
radio <input
type=”radio”/>
checkbox <input
type=”checkbox”/
>
file <input
type=”file”/>
password <input
type=”password”/
>
email <input
type=”email”/>
reset <input
type=”reset”/>
submit <input
type=”submit”/>
button <input
type=”button”/>
range <input
type=”range”/>
color <input
type=”color”/>

date <input
type=”date”/>

Laboratorium Rekayasa Perangkat Lunak | 10

 Modul Praktikum Pemrograman Web 2019/2020

Tag TextArea digunakan untuk memasukkan text yang dapat menerima data dalam jumlah karakter yang
lebih banyak bahkan dalam bentuk paragraf, karakteristiknya sama dengan inputan tipe text, hanya saja
kontrol inputannya lebih besar dari biasanya.
<textarea>… name Nama Untuk <textarea
</textarea> Identifier name=”prgrf”>
Tag </textarea>
Tag Select digunakan untuk memasukkan inputan berupa combo-box yang merepresentasikan data dalam
bentuk list atau daftar pilihan. Sama seperti elemen-elemen yang tedapat dalam form, attribut wajib pada
tag select adalah name, untuk membentuk sebuah list-box maka perlu ditambahkan attribut size. Kemudian,
untuk menambahkan data pada elemen combo-box atau list-box yang akan dipilih, diperlukan tag option.
<select> Name Nama Untuk <select
<option>..</option> Identifier name=”matkul”
<option>..</option> Tag >
</select> value Nilai dari <option
Option yang value=”web”>
dimiliki Web </option>
<option
value=”Java”>
Java</option>
</select>
size Ukuran dari <select
select box name=”matkul”
yang size=”5”>
membentuk <option
list value=”web”>
Web </option>
<option
value=”Java”>
Java</option>
</select>

2)Penggunaan Table Untuk Layout Form

Seperti yang telah dijelaskan sebelumnya, table dapat digunakan untuk mengatur layout
atau tata-letak dari sebuah halaman web. Dimana, didalam elemen table berisi elemen-elemen
dari form. Berikut ini contoh penggunaan table untuk layouting form.
Syntax
<table cellspacing="11" align="center">
<caption>Silahkan Login Terlebih Dahulu</caption>
<form>
<tr>
<td>Username</td>
<td><input type="text" name="username"/> </td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Login"/>
<input type="reset" value="Reset"/>

Laboratorium Rekayasa Perangkat Lunak | 11

 Modul Praktikum Pemrograman Web 2019/2020

</td>
</tr>
</form>
</table>
OUTPUT

PRAKTIKUM MANDIRI
1. Peralatan
Perangkat komputer / PC / Laptop / Notebook .
Sistem operasi Windows / Linux (optional Mac OS)
Aplikasi Visual Studio Code / Atom / SublimeText / phpStorm IDE
2. Prosedur
a) Baca dan pahami semua tahapan praktikum dengan cermat.
b) Gunakan fasilitas yang disediakan dengan penuh rasa tanggung jawab.
c) Rapikan kembali setelah menggunakan komputer (mouse, keyboard, kursi, dll).
d) Perhatikan sikap anda untuk tidak mengganggu rekan praktikan lain.
e) Pastikan diri anda tidak menyentuh sumber listrik.
3. Kegiatan Praktikum
1) Buka text editor / IDE yang akan digunakan.
2) Buat file baru kemudian simpan file tersebut
dengan nama “Modul2_Web.html”
3) Kerjakan percobaan pada sub modul 1 dan 2
pada file yang telah dibuat diatas . Kemudian
lanjutkan untuk membuat form berikut.
4) Setelah percobaan selesai, tutup semua
perangkat lunak yang telah digunakan.
5) Matikan PC dan Rapikan meja praktikum.

Laboratorium Rekayasa Perangkat Lunak | 12

 Modul Praktikum Pemrograman Web 2019/2020

EVALUASI PRAKTIKUM
1. Tampilan Form dan Table Seperti Di bawah Ini
a. Form

b. Table

Laboratorium Rekayasa Perangkat Lunak | 13