Dalam menginput data, sisi keamanan untuk memfilter data yang diinput adalah yang paling penting, karena tidak semua user dapat memasukan data dengan benar. Oleh karena itu butuh sebuah validasi yang baik sebelum data tersebut dimasukan ke dalam database.

Validasi yang baik menurut pengalaman saya adalah validasi yang disusun secara berlapis baik dari sisi client/user dan dari sisi server, pada prakteknya sebelum data pada form di kirim ke server maka JavaScript akan memfilter data tersebut lalu mengirimkan ke server apabila data itu sudah benar, dan ini yang disebut validasi dari sisi client/user. Lalu pada sisi server pun (misal: PHP) juga melakukan validasi yang sama seperti JavaScript sebelum akhirnya data masuk ke database.

Ada yang cukup merepotkan dari teori diatas yaitu JavaScript (sisi client) dan PHP (sisi server) harus melakukan validasi yang sama. Misalnya saja dalam memeriksa inputan email, JavaScript dan PHP harus menyiapkan fungsi yang sama untuk memeriksa format alamat email apakah sudah benar atau tidak, cukup merepotkan bukan?

Kalau ditanya validasi mana yang paling ampuh antara sisi client dan server maka jawaban saya adalah sisi server, karena JavaScript bisa saja di non aktifkan dengan bantuan browser sehingga validasi dari sisi client bisa dilewatkan begitu saja. Namun kelemahan dari sisi server adalah user harus rela menunggu loading halaman ketika proses berlangsung.

Solusi dari saya adalah JavaScript disini tidak berfungsi sebagai validasi inputan namun hanya berfungsi sebagai pengantar data ke proses PHP dengan metode AJAX sehingga user tidak harus menunggu loading halaman lalu apabila user non aktifkan JavaScript maka proses tetap berlangsung walau harus loading halaman. Solusi tools untuk melakukan seperti ini adalah JQuery dengan bantuan plugin Ajax Form.

Pertama-tama siapkan table “guestbook” pada database anda (salin script di bawah):

CREATE TABLE `guestbook` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 30 ) NOT NULL ,
`email` VARCHAR( 30 ) NOT NULL ,
`message` VARCHAR( 255 ) NOT NULL ,
`submitdate` DATETIME NOT NULL
)

Buat form sederhana dengan script seperti ini.

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

<form name="formGuestBook" action="proses.php" method="post" onsubmit="return submitForm(this);">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Name</td>
    <td>:</td>
    <td><input name="name" type="text" size="30" /></td>
  </tr>
  <tr>
    <td>Email</td>
    <td>:</td>
    <td><input name="email" type="text" size="30" /></td>
  </tr>
  <tr valign="top">
    <td>Pesan</td>
    <td>:</td>
    <td><textarea name="message" cols="40" rows="3"></textarea></td>
  </tr>
  <tr valign="top">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="submit" name="submit" value="Submit" />
      <input type="reset" value="Cancel" /></td>
  </tr>
</table>
</form>

Pada tab HEAD di tambahkan script ini

9
10
11
12
13
14
15
16
17
18
19

   function submitForm(form){
    $(form).ajaxSubmit({
	  success: function(response){ // jika proses pada server selesai
	  	if(response.indexOf('Terima kasih') > -1){ // jika response mengandung kata "Terima kasih"
		 alert(response);
		 $(form).clearForm(); // mengosongkan semua inputan
		}else alert('Error: '+response);
	  }
	}); /// end ajax submit
  	return false; // untuk mencegah form mengirim langung data ke proses.php
   }

Lalu siapkan script PHP dengan nama “proses.php“.

<?
	extract($_POST);
	if(!empty($name) && !empty($email) && !empty($message)){
	  if(valid_email($email)){
		mysql_connect('localhost','root','');
		mysql_select_db('test');
		$SQL = "INSERT INTO guestbook VALUES('','$name','$email','$message',now())";
		if(mysql_query($SQL)) echo 'Terima kasih atas pesan anda';
		else echo 'Maaf, data gagal diinput';
	  }else echo 'Email Tidak Valid';
	}else echo 'Lengkapi Form';
 
 
	function valid_email($address){
		return ( ! preg_match("/^([a-z0-9+_-]+)(.[a-z0-9+_-]+)*@([a-z0-9-]+.)+[a-z]{2,6}$/ix", $address)) ? FALSE : TRUE;
	}
?>

Fungsi ajaxSubmit bawaan plugin Ajax Form dengan otomatis mengirim inputan dari form ke proses.php seperti layaknya submit biasa namun kali ini tanpa ada loading halaman. Dengan kemudahan seperti itu maka anda tidak harus repot mempersiapkan data sebelum dikirim ke server.

Baca juga manual dari Ajax Form disini.

Untuk melihat demo langsung dari script diatas disini.

Untuk download script diatas disini.

Semoga artikel ini dapat membantu dan menambah wawasan… Terima kasih… ^_^