Submit data dengan JQuery

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, siapkan tabel dengan struktur dibawah ini :


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
)

Tulis javascript pada tab head


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
}

selanjutnya siapkan file 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.

Pengin baca manual JQuery ??? klik sini

Source code lengkapnya juga ada disini

Selamat berexplorasi🙂

dikutip dari Mas Chandra Jatnika (T-10)

%d blogger menyukai ini: