Pada video ini, kita akan membahas mengenai validasi. Setiap kali kita mendapatkan data dari pengguna, kita harus melakukan validasi dahulu terhadap data tersebut sebelum kita gunakan pada proses berikutnya. Ada beberapa cara untuk melakukan validasi. Yang pertama adalah validasi dari sisi front-end menggunakan HTML dan Javascript.

Validasi dari sisi front-end bisa berjalan lebih cepat karena script dijalankan langsung di browser pengguna. Tidak perlu menggunakan internet untuk koneksi ke server. Dan berhubung cepat, tentunya memberikan pengalaman yang lebih baik untuk pengguna.

Namun validasi dari sisi front-end juga memiliki kelemahan. Script yang kita tulis untuk validasi dapat diubah menggunakan browser. Selain itu browser juga dapat diatur agar tidak menjalankan JavaScript sama sekali. Atau bahkan ada browser yang memang tidak mendukung JavaScript.

Untuk memastikan agar script validasi berjalan sebagaimana mestinya, maka lebih baik validasi dilakukan dari sisi back-end. Dalam hal ini kita menggunakan bahasa pemograman PHP. Walaupun demikian, validasi back-end juga memiliki kekurangan, yaitu lebih lambat karena browser perlu menggunakan internet untuk menghubungi server dan mengirimkan data ke server. Selain itu, proses validasi juga dijalankan di server sehingga server membutuhkan lebih banyak resource.

Kalau pada video sebelumnya, kita menggunakan 2 file untuk memproses form. Yang pertama adalah form.php untuk meminta data dari pengguna. Kemudian datanya kita kirim ke file display.php untuk menampilkannya ke layar.

Pada saat kita menggunakan validasi, biasanya prosesnya sedikit berubah. Kita menggunakan form.php untuk menampilkan form dan meminta data dari pengguna. Kemudian datanya tetap kita kirim ke file yang sama, yaitu form.php. Mengapa ke file yang sama? Karena biasanya kalau terjadi kesalahan pada waktu validasi, maka kita perlu menampilkan kembali form beserta pesan kesalahannya.

Berikut adalah contoh kode validasi yang bertujuan untuk memastikan bahwa pengguna memasukkan data email-nya. Pertama kita inisialisasi dahulu variable $email untuk menyimpan nilai email dengan nilai awal string kosong. Kemudian kita inisialisasi juga variable $errors untuk menyimpan pesan error dari proses validasi, dengan nilai awal array kosong.

Kita hanya melakukan validasi pada saat data dari form dikirimkan dengan metode 'POST'. Oleh karena itu pertama kita periksa dahulu nilai dari $_SERVER['REQUEST_METHOD']. Apabila benar nilainya 'POST', barulah kita menjalankan kode validasi.

Untuk memeriksa apakah data email dari pengguna kosong atau tidak, kita menggunakan fungsi empty. Apabila tidak kosong, maka nilai data yang dikirim dari form kita simpan ke dalam variable $email. Apabila ternyata kosong, maka kita tambahkan pesan error 'Harap isi Email' ke dalam variable $errors dengan index email.

Kemudian kode pada form juga perlu kita ubah. Sebelum kita menampilkan label email, kita periksa dahulu apakah ada error dengan index 'email'. Apabila ada, maka kita tampilkan dalam div dengan kelas 'error'. Pada tag input, kita tambahkan attribute value, untuk menampilkan kembali data yang diisi oleh pengguna pada form sebelumnya.

Agar lebih jelas kita coba praktek. Kita buka lagi file form.php dari video sebelumnya, namun sudah saya modifikasi sedikit. Disini ada halaman registrasi dimana pengguna diminta untuk memasukkan data berupa email dan password. Perhatikan pada form terdapat attribute method dengan nilai post. Artinya data form nantinya akan dikirim menggunakan metode post. Form tidak memiliki attribute action, artinya nilai form nantinya akan dikirim ke alamat yang sama dengan sekarang yaitu form.php.

Tadi sudah dijelaskan bahwa validasi bisa dilakukan dari 2 sisi, yaitu dari sisi front end dan dari sisi back end. Kita coba dari sisi front end terlebih dahulu ya. Dari sisi front-end kita bisa melakukan validasi menggunakan kode HTML atau JavaScript. Namun berhubung untuk menulis JavaScript diperlukan kemampuan pemograman yang tidak dibahas dalam materi kita, maka di kesempatan ini kita mencoba untuk melakukan validasi menggunakan kode HTML.

Caranya gampang ya. Kita tinggal menambahkan atau mengubah attribute pada tag input. Sebagai contoh. Apabila kita ingin agar email harus diisi, kita tinggal tambahkan attribute required pada tag input-nya.

Kita coba jalankan. Disini ada form sederhana yang meminta kita untuk memasukkan data email dan password. Kita biarkan form dalam keadaan kosong dan langsung tekan tombol “Kirim Data". Kita dapat melihat bahwa focus berubah ke input email dan keluar tulisan “Please fill out this field". Jadinya kita harus mengisikan sesuatu pada email, barulah tombol “Kirim Data" dapat ditekan.

Selanjutnya kita juga bisa meminta agar browser memeriksa format dari email yang diberikan oleh pengguna. Formatnya harus benar, yaitu menggunakan simbol @, dan diikuti oleh domain emailnya. Nah, agar browser melakukan validasi format email seperti ini, kita tinggal mengganti nilai dari attribute type dari text menjadi email.

Kita coba jalankan ya. Sekarang kita tidak bisa memasukkan teks biasa seperti abc untuk menjadi email. Karena teks ini tidak memenuhi format email. Kita mesti memasukkan email lengkap seperti abc@gmail.com. Barulah tombol Kirim Data dapat ditekan.

Menulis kode validasi dari HTML ini lebih mudah ya. Karena hanya perlu menulis beberapa kata saja. Namun cara jalan kodenya tidak bisa kita custom. Sebagai contoh, pesan kesalahan pada saat format email salah ini dalam bahasa Inggris. Tidak bisa kita ubah menjadi bahasa Indonesia.

Kode validasi dari sisi front-end juga dapat berjalan dengan cepat. Karena langsung di eksekusi oleh browser pada saat kita menekan tombol Submit. Tidak perlu koneksi internet dan tidak perlu berhubungan ke server terlebih dahulu.

Namun sayangnya kode validasi dari sisi front-end dapat diubah oleh pengguna. Pengguna bisa mematikan JavaScript. Dan pengguna juga dapat mengubah kode apa pun yang berada di front-end. Sebagai contoh, kalau kita klik kanan dan pilih Inspect. Kita pilih tab Elements. Lalu kita cari input email. Kita ubah attribute type menjadi “text". Kode validasi format emailnya berhasil kita ubah. Dan sekarang kita bisa menggunakan form untuk mengirim kata “abc". Oleh karena itu, pada bagian back-end, kita wajib melakukan validasi lagi terhadap semua data yang dikirimkan oleh pengguna.

Semua kode validasi front-end kita hapus dahulu ya. Kita ubah kembali type menjadi “text" dan kita hilangkan kata required. Kita lanjutkan materi untuk melakukan validasi menggunakan backend.

Kode validasi biasanya ditambahkan di bagian paling atas dari file yang mengandung form. Kita tambahkan tag pembuka dan penutup php. Pertama kita lakukan inisialisasi terlebih dahulu untuk variable-variable yang akan digunakan untuk validasi. Kita tambahkan variable $email dengan nilai awal string kosong. Variable $email ini akan menampung nilai email yang dikirimkan oleh pengguna. Kemudian kita buat lagi variable $errors dengan nilai awal array kosong. Variable $errors akan menampung pesan error dari proses validasi.

Kode untuk melakukan validasi hanya dijalankan pada saat pengguna mengirimkan data dari form. Berhubung method yang digunakan oleh form adalah post. Maka kita periksa dahulu apakah metode request yang sedang digunakan adalah 'POST'. Caranya? Kita bisa memeriksa nilai dari variable $_SERVER['REQUEST_METHOD']. Bila nilainya adalah 'POST'. Barulah kita menjalankan kode validasi.

Apa saja yang perlu diperiksa dalam validasi? Sebagai contoh nilai email yang dikirimkan oleh pengguna tidak boleh kosong. Kita bisa memeriksanya dengan menggunakan fungsi empty. Apabila nilai email tidak kosong, maka kode untuk memeriksanya menjadi

  if(!empty($_POST['email']))

Bila nilainya benar tidak kosong, maka kita simpan menjadi variable $email.

  $email = $_POST['email'];

Selain itu, maka kita tambahkan pesan error dengan index 'email', yang isi pesannya adalah 'Harap isi email'.

  $errors['email'] = 'Harap isi email';

Kemudian di dalam tag form, sebelum tag label untuk email, kita tambahkan kode untuk menampilkan pesan error email. Kita periksa dahulu apakah ada error email dengan menggunakan kode:

Apabila ternyata ada, maka kita tampilkan pesan error-nya di dalam div dengan kelas 'error'. Nantinya teman-teman bisa mengatur style yang digunakan untuk menampilkan error.

Jangan lupa tambahkan tanda kurung kurawal penutup dari sintaks if diatasnya.

Kita coba jalankan ya. Kita coba Kirim Data kosong. Maka kita mendapatkan pesan error 'Harap Isi Email'. Sedangkan kalau kita mengirimkan email 'abc', maka kita tidak mendapatkan pesan error. Namun perhatikan bahwa nilai 'abc' yang kita kirim menjadi hilang. Sedangkan seharusnya nilai tersebut dituliskan ulang sebagai email.

Kita kembali ke kode. Untuk menulis ulang nilai email, maka kita mesti ke tag input milik email. Kemudian kita tambahkan attribute value dengan nilai yang diambil dari variable $email.

Kita simpan dan jalankan ulang. Kalau kita mengirimkan data kosong, maka kita mendapatkan pesan kesalahan 'Harap isi email'. Sedangkan kalau kita mengirimkan email 'abc', maka tidak ada pesan kesalahan namun nilai 'abc' tetap ditulis kembali di dalam input email.

Nah, untuk validasi yang lebih baik, seharusnya pada backend kita memeriksa apakah format email yang dikirimkan sudah benar atau belum, seperti yang dilakukan pada frontend sebelumnya. Namun untuk melakukan hal ini, kita mesti menggunakan regular expression, sementara materinya masih belum pernah kita pelajari. Jadi untuk saat ini kita tidak melakukan pemeriksaan format dari nilai emailnya.

Sebagai latihan dari video ini, tambahkan kode validasi untuk memeriksa password. Pengguna tidak boleh mengirimkan password kosong. Caranya mirip dengan cara menambahkan validasi pada email ya. Teman-teman tinggal tambahkan lagi kodenya namun untuk password. Pause terlebih dahulu video ini dan coba kerjakan pada komputer masing-masing. Nantinya kita akan kembali untuk membahas solusi dari latihan ini.

Oke, kita akan mengerjakan soal latihan. Pertama kita tambahkan dahulu variable untuk menampung nilai password. Kita beri nama $password dan kita beri nilai awal string kosong.

Kemudian jika method yang digunakan adalah 'POST', maka kita pastikan bahwa nilai password tidak kosong. Bila tidak kosong maka kita simpan nilainya ke dalam variable $password. Sedangkan kalau kosong, maka kita tambahkan $errors['password'] dengan pesan 'Harap isi password'.

Kita ke bagian bawah, sebelum tag label untuk password. Kita tambahkan kode PHP untuk memeriksa apabila ada $errors dengan index password. Maka kita tampilkan pesan errornya menggunakan tag div dengan kelas error.

Kemudian pada tag input, kita tambahkan attribute value dengan nilai yang diambil dari variable $password.

Kita simpan dan kita coba jalankan. Kalau kita mengirimkan form kosong, maka kita mendapatkan pesan error 'Harap isi email' dan 'Harap isi password'. Namun kalau kita isi email admin, dan password admin123, maka kita tidak mendapatkan pesan error. Sedangkan kedua input kembali diisi dengan nilai sebelumnya.

Nah, untuk bagian validasi cukup sampai disini. Nantinya di video berikutnya kita akan menuliskan data yang dikirimkan oleh pengguna ke dalam file. Setelah itu kita pindah ke file display.php untuk membaca data dari file dan menampilkannya kembali ke layar.

Namun sebelum melanjutkan, kita periksa dahulu apakah kode kita sudah aman dari XSS? Kita coba view source ya. Kita lihat ke tag input. Apa pun yang kita masukkan sebagai email akan menjadi nilai di dalam attribute value. Perhatikan bahwa setelah nilai, ada tanda kutip penutup dan tanda penutup tag. Setelah itu menjadi teks HTML.

Kalau misalkan nilai email kita ubah menjadi “>

Hello

. Kita coba kirim data. Maka sekarang kita memiliki judul Hello. Kalau kita lihat ke source. Kita bisa melihat bahwa nilai attribute value dan tag input tertutup, sehingga tag h1 bisa berdiri sendiri sebagai tag baru. Artinya kode kita masih rentan terhadap serangan XSS.

Kita coba lagi ya. Misalkan kita tulis email “><script>alert('Hello')</script>. Maka script kita dieksekusi sebagai JavaScript. Artinya sudah positif ya, kita bisa terkena serangan XSS.

Untuk mengatasi hal ini, maka ingat kembali materi video sebelumnya ya. Pada saat kita ingin menampilkan kembali semua input yang berasal dari user, kita harus menggunakan fungsi htmlspesialchars. Termasuk pada saat kita ingin menampilkan input pada attribute value. Jadi pada input untuk email dan password, kita tambahkan function htmlspecialchars.

Kita simpan dan refresh browser. Sekarang kita coba lagi untuk memasukkan script. Dan ternyata sudah aman ya. Karena sudah diamankan oleh fungsi htmlspesialchars.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.