Modul Praktikum Pemrograman Web 2021/2022

Modul 2 : Table dan Form

KOMPETENSI :
Setelah menyelesaikan praktikum pada Modul 2, Praktikan diharapkan mampu
memahami dan mengaplikasikan penggunaan tag-tag dalam mendesain table &
form pada halaman 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 perbedaan rowspan dan colspan pada table?
2. Jelaskan perbedaan Method POST dan GET pada Form?
3. Berikan Contoh Syntax membuat table di SQL dan lakukan percobaan DML pada table
yang telah ada (cek kembali matakuliah basis datanya)!

Jawaban: Diuraikan menggunakan VLOG (Video Blogging/Video Tutorial), disertakan

contoh implementasinya. Tuliskan Linknya: ……………….
Catatan: Sebaiknya dikerjakan secara mandiri, kesamaan jawaban secara struktur
dianggap bekerjasama (tidak dinilai)!

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.

Laboratorium Rekayasa Perangkat Lunak | 10

 Modul Praktikum Pemrograman Web 2021/2022

Tag Keterangan Syntax Output

<table>… Mendefinisikan <table>
</table> Table <tr>
<caption>… Memberi Judul <th>No</th>
</caption> <th>Framework</th>
Pada Table
<th>Base</th>
<tr>…</tr> Membuat Baris </tr>
<tr>
Pada Table
<td>1</td>
<th>…</th> Membuat Sel <td>CodeIgniter &
Header Table Laravel</td>
<td>…</td> Membuat Sel <td>PHP</td>
Table </tr>
<tr>
<td>2</td>
<td>ReactJS &
VueJS</td>
<td>JavaScript</td>
</tr>
</table>

Tuliskan Link Hasil Percobaan (codepen.io): ,

https://codepen.io/VAUDILLA/pen/gOvMBEJ

Laboratorium Rekayasa Perangkat Lunak | 11

 Modul Praktikum Pemrograman Web 2021/2022

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

Laboratorium Rekayasa Perangkat Lunak | 12

 Modul Praktikum Pemrograman Web 2021/2022

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>
</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>

Tuliskan Link Hasil Percobaan (codepen.io): , https://codepen.io/VAUDILLA/pen/poabxmE

Laboratorium Rekayasa Perangkat Lunak | 13

Modul Praktikum Pemrograman Web 2021/2022

Laboratorium Rekayasa Perangkat Lunak | 14

 Modul Praktikum Pemrograman Web 2021/2022

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.

Laboratorium Rekayasa Perangkat Lunak | 15

 Modul Praktikum Pemrograman Web 2021/2022

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

 Modul Praktikum Pemrograman Web 2021/2022

Tag Attribute Value Syntax Output

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 method=”post”> Tag Form tidak memiliki
GET </form> output secara eksplisit.
action Lokasi dan
Nama File
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 | 17

 Modul Praktikum Pemrograman Web 2021/2022

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 Tag name=”prgrf”>
</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>.. Identifier Tag name=”matkul”>
</option>
<option>..
</option>
</select> value Nilai dari <option
Option yang value=”web”>
Web </option>
dimiliki
<option
value=”Java”>
Java</option>
</select>
size Ukuran dari <select
select box name=”matkul”
size=”5”>
yang
<option
membentuk
value=”web”>
list
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.

Laboratorium Rekayasa Perangkat Lunak | 18

 Modul Praktikum Pemrograman Web 2021/2022

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"/>
</td>
</tr>
</form>
</table>

OUTPUT

Tuliskan Link Hasil Percobaan (codepen.io): , https://codepen.io/VAUDILLA/pen/BaYzqXa

Laboratorium Rekayasa Perangkat Lunak | 19

 Modul Praktikum Pemrograman Web 2021/2022

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
1) Baca dan pahami semua tahapan praktikum dengan cermat.
2) Gunakan fasilitas yang disediakan dengan penuh rasa tanggung jawab.
3) Rapikan kembali setelah menggunakan komputer (mouse, keyboard, kursi, dll).
4) Perhatikan sikap anda untuk tidak mengganggu rekan praktikan lain.
5) 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_Stambuk.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.

Tuliskan Link Hasil Percobaan (codepen.io): ,https://codepen.io/VAUDILLA/pen/mdXEaEO

Laboratorium Rekayasa Perangkat Lunak | 20

 Modul Praktikum Pemrograman Web 2021/2022

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

Tuliskan Link Hasil Percobaan (codepen.io): ,………………………….

b. Table

- Tuliskan Link Hasil Percobaan (codepen.io): ,………………………….

Laboratorium Rekayasa Perangkat Lunak | 21

 Modul Praktikum Pemrograman Web 2021/2022

Kesimpulan Praktikum

Evaluasi Praktikum

Stamp (date) Result / Point Signature/Name

A = 85 – 100
A- = 80 – 84
B+ = 75 – 79
B = 70 – 74
B- = 65 – 69
C+ = 60 – 64
C = 50 – 59
Dosen : Ir. Dedy Atmajaya, S.Kom., M.Eng., MTA
Assisten :-
-

Stambuk : Email :
Nama : WA :

Catatan :

Laboratorium Rekayasa Perangkat Lunak | 22