Menyimpan Data ke Database dengan Ajax

Dikesempatan ini saya akan mencoba  menyajikan Tutorials cara menyimpan data ke database menggunakan AJAX dan PHP sebagai jembatannya. Saya beranggapan anda telah memiliki dasar-dasar PHP dan javascript. Saya akan mencoba menjelaskannya langkah demi langkah agar mudah dimengerti. Baiklah saya akan mulai dengan menjelaskan bagaimana menyimpan data dengan cara klasik dengan menggunakan php (tanpa ajax).

Jika anda memiliki sebuah tabel dalam database MYSQL, misalnya nama tabel anda adalah "customer_tb" dan nama database anda adalah "customer_db". Table anda (customer_tb) digunakan untuk menyimpan data customer, dengan struktur misalnya seperti dibawah ini.

Nama Field Tipe Data
email varchar(20) *
first_name varchar(50)
last_name varchar(50)
address text
gender char(1)

Jika anda menggunakan PHP untuk menyimpan data ke dalam tabel maka setidaknya anda akan menggunakan form seperti dibawah ini:

Email
First Name
Last Name
Address
Gender
 

Script dari form diatas misalnya sperti di bawah ini:

Script Form:

<form id="form1" name="form1" method="post" action="save_data.php">
<table width="100%" border="0" cellpadding="0">
<tr>
<td width="38%">Email</td>
<td width="62%"><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>First Name </td>
<td><input name="fname" type="text" id="fname" /></td>
</tr>
<tr>
<td>Last Name </td>
<td><input name="lname" type="text" id="lname" /></td>
</tr>
<tr>
<td>Address</td>
<td><label>
<textarea name="address" id="address"></textarea>
</label></td>
</tr>
<tr>
<td>Gender</td>
<td><select name="gender" id="gender">
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</table>
</form>

dari script form di atas terlihat bahwa setiap anda menyimpan data dengan menekan tombol submit ada akan memanggil sebuah file yang namanya "save_data.php". Setidaknya file save_data.php ini akan berisi script php seperti di bawah ini:

File save_data.php :

//file save_data.php
<?php
$email=$_POST['email'];
$first_name=$_POST['fname'];
$last_name=$_POST['lname '];
$address=$_POST['address'];
$gender=$_POST['gender'];
//konneksi ke data base
$conn= mysql_connect("localhost","root","root"); //host, user name, password
mysql_select_db("customer_db");
$query="insert into customer_tb('email','first_name','last_name','address','gender')values('$email','$first_name','$last_name', '$address','$gender')";
mysql_query($query,$conn);
echo "Data Tersimpan";
?>

dengan melakukan hal di atas untuk menyimpan, setiap kali anda menyimpan data dengan menekan tombol submit maka browser akan meload file save_data.php berkali kali. Untuk menghindarinya anda dapat menggunakan ajax. Anda hanya perlu melakukan sedikit perubahan pada cara di atas . Pertama buatlah sebuah file dengan nama "ajax.js " dan ketikkan script dibawah ini:

File ajax.js

var sendReq = getXmlHttpRequestObject();
var _documentid='content';
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.');
}
}
function doSaveCustomer(){
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
sendReq.open("POST", 'save_data.php', true);
sendReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
sendReq.onreadystatechange =function() {
if (sendReq.readyState == 4 && sendReq.status == 200) {
alert(sendReq.responseText);
}
}
var param = 'email=' + document.getElementById('email').value;
param += '&fname=' + document.getElementById('fname').value;
param += '&lname=' + document.getElementById('lname').value;
param += '&address=' + document.getElementById('address').value;
param += '&gender=' + document.getElementById('gender').value;
sendReq.send(param);
document.getElementById(_documentid).innerHTML = 'Loading....';
document.getElementById('email').value='';
document.getElementById('fname').value='';
document.getElementById('lname').value='';
document.getElementById('address').value='';
}
}

Langkah selanjutnya adalah mengubah script form anda menjadi sperti dibawah ini :

Script Form baru:

<script type="text/javascript" src="ajax.js"></script>
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0">
<tr>
<td width="38%">Email</td>
<td width="62%"><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>First Name </td>
<td><input name="fname" type="text" id="fname" /></td>
</tr>
<tr>
<td>Last Name </td>
<td><input name="lname" type="text" id="lname" /></td>
</tr>
<tr>
<td>Address</td>
<td><label>
<textarea name="address" id="address"></textarea>
</label></td>
</tr>
<tr>
<td>Gender</td>
<td><select name="gender" id="gender">
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="button" name="Submit" value="Submit" onclick="doSaveCustomer(); return false;" /></td>
</tr>
</table>
</form>

Langkah terakhir adalah "SELAMAT MENCOBA". Saya berharap semoga tutorial ini bermanfaat untuk anda. Jika ada sesuatu yang salah syla mohon maaf yang sebesarnya.