Ajax & PHP : Menyimpan Data ke Database dengan AJAX

Sebagai contoh, misalkan anda memiliki sebuah form seperti di bawah.

Untuk menyimpan "First Name" dan "Last Name " yang dinputkan user dari form di atas, maka yang perlu anda lakukan adalah :

1. Bentuk XMLHttpRequest object,
2. Kirim First name dan Last name yang diinputkan pada form di atas ke web server,
3. Simpan First name dan Last name yang dikirim ke database dengan PHP.

1. Membentuk XMLHttpRequest Object

Untuk membentuk XMLHttpRequest Object kita dapat menggunakan function yang telah kita buat pada tutorial pertama, seperti di bawah.

function getXMLHttpRequest(){
	//jika user menggunak IE
	if(window.ActiveXObject){
	    return new ActiveXObject("Microsoft.XMLHTTP"); 
	}else if(window.XMLHttpRequest){
	    //user menggunakan browser selain IE
	    return new XMLHttpRequest();
	}else { alert("Status : can not create XMLHttpRequest Object"); } 
}

2. Mengirim First Name dan Last Name ke Web Server

Untuk mengirim First name dan Last name yang dinputkan oleh user pada form di atas, anda dapat melakukan langkah yang sama seperti pada tutorial kedua (Mengirim Data ke Web Server). Tetapi anda perlu melakukan validasi dari input yang diberikan oleh user. Anda dapat menggunakan script seperti di bawah.

var xmlhttp=getXMLHttpRequet(); 
function sendData(handlePage,ElementID){
	//mengambil nilai dari element form
	var first_name=document.getElementById('first_name').value;
	var last_name=document.getElementById('last_name').value; 
	//cek apakah first_name dan last_name tidak kosong
	if(first_name==""){
		alert("Please Input First Name"); 
	}else if(last_name==""){
		alert("Please Input last name"); 
	} else{
		var obj=document.getElementById(ElementID);
		obj.innerHTML="Sending Data Please wait....";
		if(xmlhttp.readyState==4 || xmlttp.readyState==0){
		xmlhttp.open("POST",handlePage,true);
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
		obj.innerHTML=xmlhttp.responseText;
		} 
		}
		var dataToSend="first_name="+first_name;
		dataToSend+="&last_name="+last_name;
		xmlhttp.send(dataToSend); 
		}
	}
}

fungsi sendData di atas menggambil dua parameter handelPage dan ElementID. Parameter handlePage diisi dengan nama file di server yang akan menangani data yang dikirim dan menyimpan data yang dkirim ke database. Parameter ElementID diisi dengan ID dari element HTML tempat response dari server akan ditampilkan.

3. Menyimpan First name dan Last name ke Database

Untuk menyimpan data ke database, dalam kasus ini menyimpan First nama dan Last name, anda akan menggunakan script PHP, misalkan file "save_data.php". File "save_data.php" ini akan menjadi parameter handlePage pada function sendData di atas. Tetapi perlu anda ingat, bahwa data dikirim ke server menggunakan JavaScript, seperti anda ketahui javascript akan didownload oleh web browser dan semua orang yang menggunakan website anda dapat melihat script anda dan tentunya dapat mengubah script anda. Perlu juga anda ketahui, website dengan Ajax sangat mudah untuk dilakukan SQL Injection karena JavaScript yang digunakan untuk mengirim data dapat diubah oleh setiap orang. Oleh karenanya, data yang dikirim ke server perlu di validasi kembali setelah sampai di server dengan bahasa pemrograman server side seperti PHP. Pada contoh ini, untuk menyimpan data ke database anda dapat menggunakan script seperti di bawah :

#php open tag
<?php 
 $f_name=$_POST['first_name'];
	$l_name=$_POST['last_name'];
	//cek apakah keduanya tidak kosong
	if($f_name=="" || $l_name==""){
		echo "Maaf data tidak lengkap"; 
	} else{
		settype($f_name,'string');
		settype($l_name,'string');
		//buat koneksi ke database
		$conn=mysql_connect("dbHost","dbUser","dbPass");
		mysql_select_db("namaDatabase");
		//simpan first name dan last name, misal ke tabel t_nama
		$query="insert into t_name(first_name, last_name)values('$f_name', '$l_name')"; 
		$hasil=mysql_query($query);
		//jika berhasil menyimpan data 
		if($hasil){
		echo "Data telah disimpan"; 
		}else{ echo "Error, tidak bisa meyimpan data";} 
	}
?>

Latihan Menyimpan Data ke Database dengan AJAX

Untuk lebih memperjelas pemahaman anda bagaimana cara menyimpan data ke database dengan AJAX, anda akan diajak untuk berlatih. Pada latihan ini anda akan membuat sebuah contact form dan menyimpan data yang diinput oleh user dengan menggunakan Ajax. Pada contoh ini saya asumsikan anda memiliki sebuah tabel pada database anda dengan nama t_contact dan dengan struktur seperti berikut.

Langkah I. Membuat HTML Form

Pertama buatlah sebuah document baru dengan text editor anda, dan buat sebuah HTML form dengan script di bawah.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <title>Contact Us - Contoh Tutorial Ajax</title> 
</head> 
<body> 
 <form id="form1" name="form1" method="post" action="">
 <fieldset>
 <legend><strong>Contact Us</strong></legend> 
 <div style="width:300px;" align="right" id="content"> 
 <label>First Name : <input name="first_name" type="text" id="first_name" maxlength="50" /></label> 
 <p> <label>Last Name : <input name="last_name" type="text" id="last_name" maxlength="50" /> </label> </p> 
 <p> <label>Email : <input name="email" type="text" id="email" maxlength="50" /> </label> </p> 
 <p> <label>Phone : <input name="phone" type="text" id="phone" maxlength="20" /> </label> </p>
 <p> <label>Message : <textarea name="message" id="message"></textarea> </label> </p> 
 <p> <input type="button" name="Button" value="Save" /> 
 <input type="reset" name="Reset" value="Cancel" /> </p> 
 </div> 
 </fieldset> 
 </form> 
</body> 
</html>

Simpan dengan nama file contact.php di direktory web server anda. Script di atas untuk membentuk sebuah form seperti berikut.

Langkah II. Membuat File Javascript untuk Membentuk XMLHttpRequest

Langkah selanjutnya adalah membuat JavaScript untuk membentuk XMLHttpRequest dan membuat function untuk mengirim data ke server. Buat kembali document baru dengan text editor anda dan ketik script berikut :

// JavaScript Document
//file ajax.js
function getXMLHttpRequest(){
	if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		return new XMLHttpRequest(); 
	}else alert("Status : Can not create XMLHttpRequest Object");
}

var xmlhttp=getXMLHttpRequest();
//function to send data
function sendData(handlePage,ElementID){
	var fname=document.getElementById('first_name').value;
	var lname=document.getElementById('last_name').value;
	var email=document.getElementById('email').value;
	var phone=document.getElementById('phone').value;
	var message=document.getElementById('message').value;
	var filterEmail=/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
	var filterPhone=/^[0-9]+$/;
	//validate user input
	if(fname==""){
		alert("Input First Name First!");
	}else if(lname==""){
		alert("Input last name first!");
	}else if(email==""){
		alert("Please input email first!");
	}else if(!filterEmail.test(email)){
		alert("Incorrect email address");
	}else if(phone==""){
		alert("Please input phone first!");
	}else if(!filterPhone.test(phone)){
		alert("Incorrect phone number!");
	}else if(message==""){
		alert("Please input message first!");
	}else{
	//data valid 
	if(xmlhttp.readyState==4 || xmlhttp.readyState==0){
		var obj=document.getElementById(ElementID);
		var form=obj.innerHTML;
		obj.innerHTML='Saving data, please wait..';
		xmlhttp.open('POST',handlePage,true);
		xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4){
		if(xmlhttp.status==200){
		obj.innerHTML=xmlhttp.responseText+'<br>'+form;
		}else{
		alert('Error : '+xmlhttp.statusText);
		}
		}
	}
	var param='first_name='+fname;
	param+='&last_name='+lname;
	param+='&email='+email;
	param+='&phone='+phone;
	param+='&message='+message;
	param+='&action=save';
	xmlhttp.send(param);
	}

	}

}

Kemudian simpan dengan nama ajax.js di directory yang sama dengan file contact.php yang dibuat sebelumnya.

Langkah III. Membuat handlePage dan Menyimpan Data

Setelah selesai dengan langkah I dan II, selanjutnya adalah membuat handlePage untuk menangani data yang dikirim dan menyimpan data yang dikirim ke database. Perlu anda ingat, walaupun sebelum data dikirim telah divalidasi dengan javascript anda harus kembali melakukan validasi setelah data sampai di server dengan server side scripting seperti PHP. Ingat jangan pernah percaya kepada user anda dan jangan pernah percaya dengan apa yang diinputkan oleh user serta jangan percaya dengan apa yang dikirim oleh web browser anda. Sekarang buatlah sebuah document baru dengan text editor dan ketikkan script berikut.

<?php
/*file save_data.php*/
	$conn=mysql_connect("localhost","db-user","db-psw"); /*sesuiakn dengan komputer anda*/ 
	mysql_select_db('nama-database'); /*sesuikan dengan komputer anda */ 
	if($_POST['action']=='save'){
	 //validasi data
	 $fname=$_POST['first_name'];
	 $lname=$_POST['last_name'];
	 $email=$_POST['email'];
	 $phone=$_POST['phone'];
	 $message=$_POST['message'];
	 settype($fname,'string');
	 settype($lname,'string');
	 settype($message,'string');
	 //validasi email;
	 if(!preg_match('/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/',$email)){
	 echo 'Ivalid Email Address'; exit();
	 }
	 //validasi phone
	 if(!preg_match('/^[0-9]+$/',$phone)){
	 echo 'Invalid phone number'; exit();
	 }
	 //saving data
	 $query="INSERT INTO t_contact (first_name,last_name,email,phone,message) VALUES ('$fname','$lname','$email','$phone','$message')";
	 $hasil=@mysql_query($query);
	 if($hasil){
	 echo '<font color="green">DATA HAS BEEN SAVED</font>';
	 }else {
	 echo '<font color="red">Error, CAN NOT SAVE DATA</font>';
	 }
	}
?>

setelah selesai simpan dengan nama save_data.php di directory yang sama dengan file contact.php.

Langkah IV. Finishing

Setelah selesai membuat ketiga file di atas, sekarang buka kembali file contact.php dan edit pada bagian yang diberi warna biru seperti berikut :

<input type="button" name="Button" value="Save" />

menjadi

<script type="text/javascript" src="ajax.js"></script>
<input type="button" name="Button" value="Save" onclick="sendData('save_data.php','content'); return false;" />

Sekarang anda simpan kembali file contact.php dan coba hasilnya menggunakan browser anda. Jika anda telah melakukkanya dengan benar maka tidak akan ada masalah. Jika anda menemui masalah dengan contoh ini anda dapat mendownload tutorial ini dan mempelajarinya lagi.

Daftar Rujukan

Babin lee. 2007. Beginning Ajax with PHP: From Novice to Professional. United State : Apress.
Ullman Larry. 2008. Building a Web Site with Ajax: Visual QuickProject Guide. United State: Peachpit Press