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 |
| varchar(20) * | |
| first_name | varchar(50) |
| last_name | varchar(50) |
| address | text |
| gender | char(1) |
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> </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:<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> </td>
<td><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</table>
</form>
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:<?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";
?>
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 :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='';
}
}
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> </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.
<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> </td>
<td><input type="button" name="Submit" value="Submit" onclick="doSaveCustomer(); return false;" /></td>
</tr>
</table>
</form>
![[Image: 2012-11-08+02.30.12.jpg]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE1yn4AoXEvPQGcEmT-5iP3EwB8SSuVuT2sZnjilHrudboxbUk7QEbO6oHqcJm3_3CW4vDelH8yI4uOHiVFXpkhuqkvy-CStCAJRA4jWn2ApEggXuqw-bUNMiO0lLVxPHiNh530ksmmpJh/s280/2012-11-08+02.30.12.jpg)
![[Image: 1.PNG]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohP8QfsC6CYhWUAk4tY9ndJLW-cgBDL3YNmx7uxEinSn8ME0KsbWIUwQvvI7j_a22nkVZcScsdXVzh5nFdcLurb24hukg4Dgyk5Ol_8kFipjdTD7aThkOlNu1uqXEjOGCehWqdxkdASmE/s320/1.PNG)
![[Image: 1.PNG]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFDkEs0TkRYLSCSs7IYbBCgm9BsxvEebi2vsCK5qDucPdxZmVXYRO49WkDy44Vcx0dFioh9qHzC4XtfpX2Odh9vHEar-UUsb2vYS8wH_jzESTIUFNDH9ULNIkfK3in76rEBY0BcqjhI2OE/s280/1.PNG)
![[Image: 2.PNG]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzlg4KwpTOmz2bIn1KkUG5YpBxsmRLpcD93-jLMeQ3ea5vlyH5VbILbanF73d0KG2H8J_fRggl0vRjO4GyMCM-FTcE90kN_QyyJsggOLkzrpX5vHJeTHDS2WJUVy7U8kWbGfFbNQGIHH4/s280/2.PNG)
![[Image: 3.PNG]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg746jiCr66jxZ_M1XBCd0_fv_on_LrCwFaIEXHtFTHVx5HRf3YkiDbw2BjD-RvYkaTpb6jU73V45tGTAO-Z3wSAX-G5T-qhVswWp37O5IPBlhvFjs_vZsnAJj2v7IM22088b9s6z3Z-iFG/s280/3.PNG)
![[Image: 4.PNG]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU6cEngYpA0GZYUS3eGGEokXX1mmi3HVeSRuoBzAxT0pEmHwLyQtF_UZM-yfB19AkUOdSOc9lrQtVpy88h6e1482O3z3nA_SbaIxx6keSCQDFHEkwvL6XdVEXo22oK9AZPM4usrS5CDriq/s280/4.PNG)
