Modul Ajar Praktikum Pemrograman Web

BAB V
PEMROSESAN FORM DAN VALIDASI

A. TUJUAN
 Memahami konsep dasar transfer data dari form HTML.
 Mampu menangani masukan data dari form HTML.
 Mampu melakukan inisiasi nilai pada elemen-elemen form HTML.
 Mampu memahami tentang pemrosesan validasi form.

B. ALOKASI WAKTU
4 JS (4 x 50 menit)

C. PETUNJUK
 Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan.
 Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
 Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur.
 Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas.

D. DASAR TEORI
1. Pemrosesan Form
Pemrosesan form (form processing) merupakan operasi mendasar pada aplikasi
web. Dalam konteks pengembangan aplikasi web dinamis, langkah ini pasti akan
dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu diperlukan
sekali form isian dan cara pemrosesannya. Begitu pula halnya ketika administrator
ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung. Intinya,
keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi
web yang interaktif.
Pada aplikasi web, teknik pengiriman form dapat dilakukan melalui tiga metode:
POST, GET, dan kombinasi keduanya. Dalam konteks PHP, parameter-parameter
GET dapat dibaca melalui superglobal $_GET, sedangkan POST melalui $_POST.
Selain itu, keduanya juga dapat dibaca menggunakan $_REQUEST.

2. Validasi Form
Validasi form merupakan hal yang harus diperhatikan dalam pembuatan web.
Untuk melakukan validasi bisa menggunakan Javascript maupun PHP script.
Perbedaannya dari keduanya, jika Javascript akan diproses disisi client, PHP script
akan diproses disisi server.

3. Komponen Form HTML

<FORM ACTION=action base> form tags </FORM>
Form <FORM METHOD=method> form tags </FORM>
<FORM ENCTYPE=media type> form tags </FORM>

© 2022 Jurusan Rekayasa Perangkat Lunak 1

 Modul Ajar Praktikum Pemrograman Web

<FORM ACTION=action base TARGET="target window name"> form tags

</FORM>
<FORM SCRIPT=URL> form tags </FORM>

Note: target window name diisikan berupa:

_blank
_self
_parent
_top
<INPUT TYPE=CHECKBOX NAME=name VALUE=value>
Check Box
<INPUT TYPE=CHECKBOX NAME=name VALUE=value CHECKED>
File <INPUT TYPE=FILE NAME=name>
Hidden <INPUT TYPE=HIDDEN NAME=name VALUE=value>
<INPUT TYPE=PASSWORD NAME=name>
<INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length>
Password
<INPUT TYPE=PASSWORD NAME=name SIZE=size>
<INPUT TYPE=PASSWORD NAME=name VALUE=value>
<INPUT TYPE=RADIO NAME=name VALUE=value>
Radio Button
<INPUT TYPE=RADIO NAME=name VALUE=value CHECKED>
Reset <INPUT TYPE=RESET>
<INPUT TYPE=SUBMIT>
Submit <INPUT TYPE=SUBMIT NAME=name>
<INPUT TYPE=SUBMIT VALUE=value>
<INPUT TYPE=BUTTON>
Button <INPUT TYPE=BUTTON NAME=name>
<INPUT TYPE=BUTTON VALUE=value>
<INPUT TYPE=TEXT NAME=name>
<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>
Text
<INPUT TYPE=TEXT NAME=name SIZE=size>
<INPUT TYPE=TEXT NAME=name VALUE=value>
<SELECT NAME=name>
Select <OPTION VALUE=value> content </OPTION>
</SELECT>
<TEXTAREA NAME=name COLS=columns ROWS=rows>
Text Area content
</TEXTAREA>

E. LATIHAN
1. Menangani Masukan Data
Sebagaimana diketahui, kita dapat menggunakan metode GET atau POST untuk
mengirim informasi ke kode PHP.

Contoh pengaksesan data dengan menggunakan metode GET diperlihatkan sebagai

berikut:

© 2022 Jurusan Rekayasa Perangkat Lunak 2

Modul Ajar Praktikum Pemrograman Web

Simpan kode program di atas dengan nama misalnya demo_get.php. Pada contoh di
atas, ada beberapa hal penting yang perlu diperhatikan:
 Nilai $_SERVER['PHP_SELF'] (variabel superglobal) menyatakan
bahwa form akan ditangani oleh current script.
 Nilai get pada atribut method menyatakan bahwa transfer data
menggunakan metode GET.
 Untuk mendapatkan nilai variabel, kita memanfaatkan superglobal $_GET.
Untuk mengetahui bagaimana kode program bekerja menangani transfer data,
jalankan dari browser.

Begitu kita mengisikan nilai dan melalukan submisi form, maka nama variabel
beserta nilai yang kita isikan tadi akan ditampilkan pada alamat URL. Sebagai
contoh, hasilnya diperlihatkan pada Gambar 1.

Gambar 1. Menangani data melalui metode GET

© 2022 Jurusan Rekayasa Perangkat Lunak 3

Modul Ajar Praktikum Pemrograman Web

Untuk tujuan yang sama, kita sekarang akan mencoba menggunakan pendekatan
metode POST.

Dalam konteks PHP, parameter-parameter GET dapat dibaca melalui superglobal

$_GET, sedangkan POST melalui $_POST. Selain itu, keduanya juga dapat dibaca
menggunakan $_REQUEST.

Latihan Kecil
Bagaimana jika metode GET ditangani dengan superglobal $_POST; dan
sebaliknya, metode POST ditangani dengan $_GET? Jelaskan!

Coba manfaatkan $_REQUEST untuk menggantikan fungsi $_GET atau $_POST.

Sebagai tambahan, kita juga dapat mengidentifikasi jenis metode request dengan
memanfaatkan elemen REQUEST_METHOD milik superglobal $_SERVER.

© 2022 Jurusan Rekayasa Perangkat Lunak 4

Modul Ajar Praktikum Pemrograman Web

2. Prefilling Text Field

Begitu form disubmisi, normalnya nilai elemen-elemen form akan di-reset (atau
dikosongkan). Adapun jika diperlukan, kita sebenarnya juga dapat menahan agar
nilainya tetap ada di dalam elemen, misalnya text field.

3. Menangani Nilai Radio Button

 Mendapatkan Nilai Radio Button
Pada prinsipnya, cara mendapatkan nilai radio button tak ubahnya elemen text field.

© 2022 Jurusan Rekayasa Perangkat Lunak 5

Modul Ajar Praktikum Pemrograman Web

Latihan Kecil
Bagaimana memberikan nilai default pada koleksi radio button?

 Prefilling Radio Button

Untuk menginisiasi nilai item radio button, kita perlu melakukan per item yang ada.
Artinya, identifikasi akan dilakukan untuk setiap item guna mengetahui apakah item
terkait dipilih atau tidak.

© 2022 Jurusan Rekayasa Perangkat Lunak 6

Modul Ajar Praktikum Pemrograman Web

4. Menangani Nilai Seleksi

Cara menangani data-data dari elemen seleksi sebenarnya tak ubahnya data dari
radio button. Ini tentu dengan asumsi bahwa item yang bisa dipilih hanya satu saja.

Latihan Kecil
Buat kode program untuk penanganan seleksi dengan menambahkan preselecting.

5. Menangani Nilai Check Box

Khusus dalam penanganan check box, kita akan melibatkan tipe data array (lebih
jelasnya akan dibahas di pertemuan selanjutnya). Bagaimanapun, item check box
normalnya boleh dipilih lebih dari satu.

© 2022 Jurusan Rekayasa Perangkat Lunak 7

Modul Ajar Praktikum Pemrograman Web

Latihan Kecil
Buat kode program untuk penanganan check box dengan menambahkan preselecting.

6. Validasi Form
a. Berbasis Javascript

© 2022 Jurusan Rekayasa Perangkat Lunak 8

 Modul Ajar Praktikum Pemrograman Web

b. Berbasis PHP Script

F. TUGAS PRAKTIKUM
Buat aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username
dan Password. Gunakan variabel di PHP untuk mensimulasikan verifikasi data yang
dimasukkan.

Spesifikasi:
 Terdapat scripting JavaScript untuk validasi awal (field tidak boleh kosong,
masukan id dan password harus huruf).
 Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama
(id)
 Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai field adalah string.

© 2022 Jurusan Rekayasa Perangkat Lunak 9

 Modul Ajar Praktikum Pemrograman Web

 Jika nilai id dan password sesuai dengan pre-defined value di variabel, munculkan
pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan
pesan kegagalan.

Gambar 2. Demo login form

G. STUDI KASUS
Buatlah halaman web untuk penjualan notebook dengan ketentuan:
1. Produk: menggunakan checkbox
2. ID Customer, Nama, Email, Alamat: menggunakan textbox
3. Member: menggunakan radio button
4. Pembayaran: menggunakan select box yang terdiri atas VISA, Master Card, Debit
BCA

Lakukan validasi sebagai berikut:

Produk : tidak boleh kosong
ID Customer : bilangan, tidak boleh kosong
Nama : tidak boleh kosong
Email : sesuai format email, tidak boleh kosong
Alamat : tidak boleh kosong

© 2022 Jurusan Rekayasa Perangkat Lunak 10

Modul Ajar Praktikum Pemrograman Web

Hitung total harga yang harus dibayar customer sehingga bisa menampilkan seperti
berikut ini: Jika customer sebagai member maka akan mendapatkan diskon sebesar 10%.

© 2022 Jurusan Rekayasa Perangkat Lunak 11

 Modul Ajar Praktikum Pemrograman Web

DAFTAR RUJUKAN

 Modul Ajar Praktikum Pemrograman Web Teknik Elektro UM

 Modul 3 Internet Programming : PHP 3, http://lecturer.eepis-its.edu/~zenhadi/kuliah/
InternetProgramming/Prakt%20Modul%20PHP%203.pdf

© 2022 Jurusan Rekayasa Perangkat Lunak 12