BAB 8 FORM HANDLING DAN VALIDASI

Pemrograman Web

115

BAB 8 FORM HANDLING DAN VALIDASI Suatu aplikasi banyak menerima masukan/input data dari pengguna, misalkan ketika registrasi kesuatu website atau ketika login pada halaman email dan sebagainya. Untuk memungkinkan hal tersebut diperlukan suatu antarmuka pada klien dalam bentuk form HTML dan suatu mekanisme untuk penanganan data yang dikirim oleh pengguna pada sisi server. Form handling ialah suatu mekanisme untuk menangani suatu masukan dari form yang dikirim oleh pengguna. Form handling berhubungan dengan metode yang dikirim dan bagaimana menangani pengiriman data berdasarkan metode yang digunakan. Pada bab ini akan membahas mengenai form HTML dan elemennya beserta implementasinya, juga form handling baik data teks maupun file.

8.1 Prosedur 1. Buka aplikasi XAMPP 2. Jalankan Apache dengan mengklik tombol start dan pastikan Apache berjalan dengan memperhatikan indikator warna background tulisan Apache menjadi hijau.

3. Buatlah direktori dan beri nama sesuai dengan nama anda, contoh rofil , kemudian didalam direktori tersebut buatlah direktori modul-8

4. Direktori modul-8 tempat meletakan file-file program pada buku ini

8.2 Form Dalam aplikasi web adakalanya kita memerlukan inputan atau masukan dari pengguna. Untuk melakukan hal itu kita dapat memanfaatkan form HTML. Form HTML terdiri dari tag-tag seperti
, , dan <select> yang mana penggunaannya disesuaikan berdasarkan data yang akan dikoleksi. Berikut ialah format dari form HTML: 1. <form action="TUJUAN" method="METODE"> 2. // ELEMEN - ELEMEN FORM 3. </form><br /> <br /> Dimana TUJUAN ialah file php untuk memproses masukan misalkan proses.php, sedangkan METODE merupakan metode yang digunakan untuk mengirim data tersebut (pada buku ini kita membahas dua metode yakni GET dan POST).<br /> <br /> Rofilde Hasudungan, S. Kom., M. Sc<br /> <br /> Pemrograman Web<br /> <br /> 116<br /> <br /> Untuk membuat form menggunakan tag <form> dan diakhiri dengan tag penutup </form>. Berikut ialah atribut dari tag <form>:<br /> <br /> Tabel 8.1 Atribut Tag Form Atribut<br /> <br /> Deskripsi<br /> <br /> action method<br /> <br /> Tujuan dari form ketika dikirim. Metode yang digunakan untuk mengirim. Terdapat dua method yakni GET dan POST Digunakan ketika form terdapat inputan berupa upload file. Nilai dari atribut ini dapat berisi multipart/form-data<br /> <br /> enctype<br /> <br /> Contoh dari form ialah sebagai berikut:<br /> <br /> 1. Buatlah file baru dan simpan dengan nama latihan-1.php pada direktori yang telah ditentukan. 2. Kemudian, ketikan kode dibawah ini: 1. 2. 3. 4. 5. 6. 7.<br /> <br /> <form action="proses.php" method="POST"> Nama <input type="text" name="nama"> <br> Jenis Kelamin <input type="radio" name="kelamin" value="pria"> Pria <input type="radio" name="kelamin" value="pria"> Wanita <br> <input type="submit" value="Simpan"> 8. </form><br /> <br /> 3. Buka web browser dan arahkan pada kode diatas. 4. Jika tidak ada kesalahan, maka luarannya akan seperti berikut<br /> <br /> 5. Jika anda klik tombol simpan, maka akan tampil sebagai berikut:<br /> <br /> Rofilde Hasudungan, S. Kom., M. Sc<br /> <br /> Pemrograman Web<br /> <br /> 117<br /> <br /> Hal ini dikarenakan, pada atribut action pada form ialah proses.php sedangkan file ini tidak ada, sehingga menampilkan object not found dan/atau Error 404. Untuk memproses form diatas maka buatlah file dengan nama proses.php seperti dijelaskan pada langkah selanjutnya. 6. Buat file baru dan simpan dengan nama proses.php sesuai dengan form action pada langkah1. Kemudian ketikan kode berikut: 1. 2. 3. 4. 5.<br /> <br /> <pre> <?php print_r($_POST); ?> </pre><br /> <br /> Perhatikan pada kode form pada langkah 1, metode yang digunakan untuk mengirim data ialah POST sehingga pada sisi server menggunakan Global Variable $_POST. Variabel $_POST ialah variabel array sehingga seperti ditunjukan pada langkah ke-3 kita dapat mengoutput-kan isinya dengan menggunakan perintah print_r(). 7. Kemudian, ulangi langkah 4, kemudian isi data misalkan kolom nama diisi dengan Rasmus L. dan kelamin dipilih Pria, maka setelah mengklik tombol Simpan, luarannya akan sebagai berikut:<br /> <br /> Rofilde Hasudungan, S. Kom., M. Sc<br /> <br /> Pemrograman Web<br /> <br /> 118<br /> <br /> Perhatikan bahwa variabel $_POST merupakan array asosiatif, dimana index/key merupakan nama dari elemen form, sedangkan data/value dari setiap index ialah merupakan inputan klien.<br /> <br /> 8.3 Element Form a. Masukan Text (text, password, textarea) Form HTML menerima masukan berupa teks dalam beberapa elemen form HTML, yakni masukan berupa teks satu baris (tipe=text), teks banyak baris (textarea), dan berupa masukan teks yang dienkripsi (tipe=password).<br /> <br /> Input text digunakan untuk menerima masukan dalam bentuk text dengan panjang kira-kira satu kalimat. Input text memiliki tag <input> dengan atribut type="text" yang menandakan itu ialah input text. Contoh penggunaan input text misalkan untuk menampung nilai nama, alamat, hobi dan lainnya yang memiliki karakter yang tidak terlalu panjang.<br /> <br /> Tabel 8.2 Atribut umum pada Masukan teks Atribut<br /> <br /> Penjelasan<br /> <br /> Contoh<br /> <br /> name<br /> <br /> Merupakan nama dari masukan Memberikan petunjuk singkat yang mendeskripsikan nilai yang diinginkan Nilai dari elemen form yang dikirim untuk diproses Menentukan jumlah baris pada textbox Menentukan jumlah kolom pada textbox<br /> <br /> name="username" placeholder = "Masukan username anda"<br /> <br /> placeholder value rows (texarea) cols (textarea)<br /> <br /> value="ramus" cols=30 rows=8<br /> <br /> Rofilde Hasudungan, S. Kom., M. Sc<br /> <br /> Pemrograman Web<br /> <br /> 119<br /> <br /> Contoh implementasi dari atribut pada Tabel 8.2 ialah sebagai berikut: 1) Buat file baru dan simpan dengan nama latihan-2.php pada direktori yang telah ditentukan. 2) Pada latihan-2.php, ketikan kode sesuai dengan berikut: 1. 2. 3. 4. 5. 6. 7. 8.<br /> <br /> <form action="proses.php" method="post"> Nama <input type="text" name="nama"> <br> Alamat <input type="text" name="alamat" value="Kalimantan Timur" placeholder="Alamat Anda?"> <br> Username <input type="text" name="username" placeholder="Masukan Username"> <br> Password <input type="password" name="password" placeholder="Masukan Password”> <br> Deskripsi Diri <textarea rows="8" cols="9" placeholder="Masukan Deskripsi Diri Anda">

3) Buka web browser dan jalankan latihan-2.php, maka luarannya seperti ditunjukan pada Gambar 8.1

Gambar 8.1 Luaran Contoh Form Elemen Teks

b. Pilihan (Checkbox, Radio dan Dropdown)

Rofilde Hasudungan, S. Kom., M. Sc

Pemrograman Web

120

Suatu masukan dapat berupa pilihan, baik pilihan tunggan ataupun pilihan jamak (multiple choice). Selain itu terdapat juga dropdown yang digunakan untuk pilihan baik difungsikan menjadi pilihan tunggal ataupun pilihan jamak. Berikut ialah beberapa atribut dasar dari checkbox dan radio button:

Tabel 8.3 Atribut Pada checkbox dan radio button Atribut

Penjelasan

Contoh

name

Merupakan nama dari masukan Nilai dari elemen form yang dikirim untuk diproses

name="username"

value checked

Digunakan untuk pemilihan

value="rasmus" checked=true atau hanya checked saja

Contoh: 1.
2. Jenis Kelamin: 3. Pria 4. Wanita
5. Syarat-Syarat: 6. KTP 7. SKCK 8. Bebas Narkoba 9. Data Saya Telah Benar 10. 11.

Kode 8.1 Elemen form radio dan checkbox

Menghasilkan sebagai berikut:


Pemrograman Web

121

Gambar 8.2 Contoh luaran untuk elemen form radio dan chexbox

Untuk mengerti mengenai ini masukan berupa teks ikuti langkah berikut: 1) Buat file baru dan simpan dengan nama latihan-3.php pada direktori yang telah ditentukan. 2) Pada latihan-3.php, ketikan kode sesuai dengan Kode 8.1. 3) Buka web browser dan jalankan latihan-3.php, maka luarannya seperti ditunjukan pada Gambar 8.2

Elemen form lain yang berkaitan dengan pemilihan ialah dropdown. Berbeda dengan radio button ataupun checkbox, dimana semua pilihan ditampilkan pada layar, elemen form ini menampilkan elemen dalam pilihan dropdown. Element ini dapat digunakan baik untuk pemilihan yang bersifat single choice ataupun multiple choices dengan cara memberikan atribut multiple pada tag <select>. Berikut ialah atribut dasar dari elemen dropdown:

Tabel 8.4 Atribut pada dropdown tag <select> dan tag

Contoh 1.
2. Pekerjaan : 3. <select name="pekerjaan" placeholder="Pilih Pekerjaan Anda"> 4. 5. 10. 11. 12. 13.
14. 15.

Kode 8.2 Elemen form dropdown untuk single choice dan multiple choices

Sehingga menjadi sebagai berikut:

Gambar 8.3 Contoh luaran untuk form elemen dropdown pada single choice dan multiple choices

Untuk mengerti mengenai ini masukan berupa teks ikuti langkah berikut:


Pemrograman Web

123

1) Buat file baru dan simpan dengan nama latihan-4.php pada direktori yang telah ditentukan. 2) Pada latihan-4.php, ketikan kode sesuai dengan Kode 8.2. 3) Buka web browser dan jalankan latihan-4.php, maka luarannya seperti ditunjukan pada Gambar 8.3

c. Elemen Hidden Kadang kita ingin mengirimkan suatu masukan secara tersembunyi, misalkan token untuk tambahan keamanan, ataupun berupa tanggal kapan suatu form dikirim. Untuk keperluan ini kita dapat memanfaatkan elemen Form hidden. Elemen form ini memiliki format yang sangat sederhana yakni: 1.

Dimana atribut yang ada hanya type dan value. Atribut type diisi dengan hidden dan value diisi dengan data yang dikirim secara tersembunyi. Berikut ialah contohnya:

1) Buatlah file baru dan simpan dengan nama latihan-5.php pada direktori yang telah ditentukan. 2) Ketikan kode sebagai berikut: 1. 2. 3. 4.

"> Nama 5.

3) Buka web browser dan jalankan latihan-5.php. Jika tidak ada kesalahan maka akan tampil sebagai berikut:


Pemrograman Web

124

4) Jika dilihat pada tampilan diatas data tanggal tidak tampak pada layar web browser. Namun, jika kita melihat source code di google chrome dengan klik kanan view page source maka akan terlihat bahwa data tersebut terlihat seperti gambar berikut:

d. Tombol/Button (SUBMIT dan RESET) Pada form-form yang telah dibuat sebelumnya Anda menemukan pada bagian akhir terdapat button/tombol yang digunakan untuk mengirim data. Tombol tersebut disebut dengan tombol submit yang ditandai dengan atribut type="submit". Pada form HTML terdapat dua jenis tombol/button yakni: 1) Tombol submit, digunakan sebagai trigger pengiriman data 2) Tombol reset, digunakan untuk mengatur masukan kembali kenilai asalnya. Kedua tipe tombol tersebut memiliki tiga atribut penting seperti pada tabel berikut:

Tabel 8.5 Atribut Button Atribut

Penjelasan

Contoh

name type

Merupakan nama dari masukan Merupakan tipe elemen Nilai dari elemen form yang dikirim untuk diproses

name="username" Type= reset atau type= submit

value

value="ramus"

Untuk lebih memahami konsep dan fungsi tombol pada form HTML ikuti langkah berikut: 1) Buat file baru dan simpan dengan nama latihan-6.php pada direktori yang telah ditentukan. 2) Kemudian, ketikan kode form HTML berikut:


Pemrograman Web

125

1. 2. 3. 4. 5.

Elemen Button

Nama:
Telpon:
Alamat:
6. Kelamin: 7. Pria 8. Wanita
9. 10. 11.

3) Buka web browser dan jalan kode tersebut. Jika tidak ada kesalahan maka akan menampilkan sebagai berikut:

4) Coba ubah data, misalkan sebagia berikut:


Pemrograman Web

126

5) Jika anda klik tombol Reset maka data pada form masukan akan kembali kebentuk awal seperti gambar pada langkah ke-3

8.4 Contoh Form a. Form Biodata b. c.

Form 2 Form Login

Disuatu website umumnya terdapat form yang digunakan untuk proses otentikasi atau disebut dengan form login. Form ini umumnya terdiri dari masukan berupa username dan password. Berikut ialah langkah-langkah membuat form login: 1. Buatlah file baru dan simpan dengan nama form-login.php 2. Kemudian, ketikan kode berikut: 1. 2. 3. 4.

Username Password 5.

3. Buka web browser dan arahkan pada form-login tersebut. Jika tidak ada kesalahan maka luarannya seperti berikut:


Pemrograman Web

127

4. Klik tombol Login, maka data akan dikirim ke proses.php yang telah dibuat sebelumnya dan menampilkan data yang telah dimasukan.

8.5 Form Handling Form handling fokus pada penanganan data yang telah dikirim dengan menggunakan form. Penanganan form lebih kepada mengambil data-data yang dikirimkan. Pengambilan data yang dikirim bergantung pada metode yang digunakan. Terdapat dua metode yang sering digunakan yakni GET dan POST.

Tabel 8.6 Perbandingan metode GET dan POST GET Bookmarked Cached

Dapat di bookmark Dapat di-cached

Encoding type

application/x-wwwformurlencoded

History

Ukuran data Batasan Tipe Data

Parameter masih tertinggal/tersimpan pada histori Meletakan data pada URL, sedangkan data yang dikirim melalui URL terbatas (Maksimum 2KB) Hanya Karakter ASCII

POST Tidak dapat di-bookmark Tidak dapat di-cached application/x-www-form-urlencoded atau multipart/form-data. Encoding multipart digunakan untuk mengirim file binary Tidak tersimpan pada histori

Tidak ada batasan

Tidak ada batasan termasuk file


Pemrograman Web

128

GET kurang aman karena data dikirim bagian dari URL dan terdapat pada histori Data terlihat karena terdapat pada URL

Security Visibility

Lebih aman dari GET, karena data tidak terdapat pada URL, data histori dan cached Data tidak tampak pada URL

1) Buat file baru dan simpan dengan nama form-biodata.php pada diretkori yang telah ditentukan. 2) Kemudian, ketikan kode berikut:
Nama
Telpon
Kelamin Pria 6. Wanita
7. Deskripsi diri:
8. 9.

1. 2. 3. 4. 5.

Perhatikan: pada baris ke-1 method yang digunakan ialah metode POST 3) Buat file baru lagi dan simpan dengan nama proses-biodata.php pada direktori yang telah ditentukan 4) Kemudian pada proses-biodata.php ketikan kode berikut 1. 2. 3. 4. 5.

= = = =

$_POST['nama']; $_POST['telpon']; $_POST['kelamin']; $_POST['deskripsi'];

6. echo $nama, $telpon, $kelamin, $deskripsi; 7. ?>

Perhatikan: pada langkah ke-2 metode yang digunakan ialah POST, sehingga untuk mengambil datanya harus juga via post melalui GLOBAL VARIABEL $_POST, seperti pada baris ke-2, ke-3, ke-4 dan ke-5. 5) Buka web browser dan arahkan pada file form-biodata tersebut. 6) Isi masukan dan tekan tombol kirim dan perhatikan luarannya.


Pemrograman Web

129

8.6 Handling File Upload Handling file upload sedikit berbeda dengan handling pada data teks. Hal ini karena melibatkan beberapa proses, yakni mengambil data file dan memindahkannya pada direktori yang telah ditentukan. Upload file, memerlukan encoding yang berbeda yakni multipart/formdata yang harus didefinisikan pada atribut enctype pada tag
dengan format berikut: File // ELEMEN FORM YANG LAIN

1. 2. 3. 4.

Sedangkan untuk mengambil file yang telah diunggan dengan menggunakan variabel global $_FILES, dimana memiliki beberapa index/kunci 1. $_FILES['NAMA_FILE_UPLOAD']['tmp_name'] merupakan file upload 2. $_FILES['NAMA_FILE_UPLOAD']['name'] merupakan nama file yang diupload

Handling form upload ialah dengan memindahkan file yang telah diunggah kedirektori yang telah dispesifikasikan dengan menggunakan perintah move_uploaded_file(FILE, LOKASI TUJUAN) atau move_uploaded_file($_FILES['NAMA_FILE_UPLOAD']['tmp_name'], $_FILES['NAMA_FILE_UPLOAD']['name']).

1.

Buatlah direktori dengan nama upload

2.

Buat dua file kosong dan simpan file pada direktori yang ditentukan pada direktori htdocs dengan nama form-upload.php dan proses-upload.php.

3.

Ketikan dan simpan kode berikut pada form-upload.php

2. Gambar 3. 4.
4. Ketikan dan simpan kode berikut pada proses-upload.php: 1.


Pemrograman Web

130

1. 5. 5.

Buka web browser dan arahkan pada form-upload.php, maka akan menampilkan tampilan web sebagai berikut

Setelah mengklik tombol Choose File maka akan keluar window untuk memilih file yang akan diunggah seperti gambar berikut

6.

Klik tombol Choose File dan pilih file yang akan di-upload. Kemudian klik tombol Simpan untuk memproses upload.


Pemrograman Web

7.

131

Jika berhasil maka akan menampilkan pesan sebagai berikut:

8.7 Validasi Data Validasi data ialah suatu proses untuk mengecek apakah suatu data yang dikirim via form HTML sesuai dengan spesifikasi yang telah ditentukan. Spesifikasi yang dimaksud misalkan apakah suatu inputan memiliki nilai, atau sesuai dengan format yang telah ditentukan. Untuk mendefinisikan spesifikasi dari suatu inputan dapat dicek dengan percabangan.

Beberapa hal yang bisa divalidasi : 1. Nilai kosong 2. Nilai berupa angka 3. Minumum angka atau maksimum angkan dan Rentang angka tertentu 4. Kesesuaian antar masukan 5. Panjang karakter 6. File, Ukuran File, Tipe File

Berikut ialah contoh form dengan spesifikasi form memiliki masukan berupa a. Nama, harus diisi b. Foto, harus diisi c. Alamat, harus diisi d. Jenis kelamin, harus diisi e. Umur, harus diisi dan harus angka serta lebih dari 17 tahun f.

Username, harus diisi dan panjangnya minimal 7 karakter

g. Password, harus diisi dan panjangnya minimal 7 karakter h. Retype Password, harus diisi dan harus sama dengan Password


Pemrograman Web

132

Untuk melakukan validasi dari form seperti spesifikasi diatas, ikuti langkah berikut: 1) Buatlah file baru dan simpan dengan nama form-registrasi.php pada direktori yang telah ditentukan. 2) Kemudian, ketikan kode berikut: 1. 2. 3. 4. 5.

8. 9. 10. 11. 12. 13. 14.

Form Registrasi

Nama:
Foto:
6. Alamat
7. Kelamin: Pria Wanita
Umur:
Username:
Password:
Retype Password:
15.

3) Buat file baru untuk handling form diatas dan simpan nama proses-registrasi.php pada direktori yang telah ditentukan. 4) Kemudian, ketikan kode berikut: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.


Pemrograman Web

21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48.

133

$errors[] = "Jenis Kelamin Harus Dipilih"; } if(is_numeric($umur) && $umur > 17) { $errors[] = "Umur Harus Angka dan Harus lebih dari 17 Tahun"; } if(strlen($username) >=7) { $errors[] = "Username Harus Lebih dari 7 Karakter"; } if(strlen($password) >=7) { $errors[] = "Password Harus Lebih dari 7 Karakter"; } if($ulangi_password != $password) { $errors[] = "Password dan Retype Password Harus Sama"; } if(count($errors) > 0){ // JIKA ADA ERRORS foreach($errors as $error) { echo "
", $error, "
"; } } else { // JIKA TIDAK ADA ERRORS // Upload FILE move_uploaded_file($file_foto, $nama_foto); // Tampilkan Data echo "Nama: ", $nama, "
", "Alamat: ", $alamat, "
"; echo "Kelamin: ", $kelamin, "
", "Umur: ", $umur, "
"; echo "Username: ", $username, "
"; echo "Foto: "; } ?>

5) Buka web browser, maka akan tampilan sebagai berikut:


Pemrograman Web

134

6) Coba isi dengan data yang sesuai dengan ketentuan, misalkan sebagai berikut:

7) Isi data tersebut dengan benar, maka ketika mengklik tombol Registrasi akan menampilkan sebagai berikut:


Pemrograman Web

135

8) Lakukan percobaan, misalkan dengan tidak mengisi datanya, maka akan menampilkan pesan sebagai berikut:

8.8 Tugas


BAB 8 FORM HANDLING DAN VALIDASI

Recommend Documents

Elemen Button

Form Registrasi