Menyimpan
Data ke database dengan Ajax
Sebelum mengikuti
langkah-langkah berikut, sebaiknya anda pelajari dulu materi tentang database
dan ajax. Di sini saya hanya memaparkan langkah-langkahnya saja. Sebelum masuk
ke coding, sebaiknya anda pastikan bahwa anda memiliki tabel database seperti
berikut :
Setelah tabel database di atas dibuat, berikut nya membuat
form kontak dengan membuka halaman kerja
.php baru lalu ketik script sperti di bawah ini :
<!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=utf-8" />
<title>Telepon Kami</title>
</head>
<body>
<form id="form1" name="form1"
action="simpan.php" method="post">
<fieldset>
<legend><strong> Hubungi
Kami</strong></legend>
<div id="content" style="width:300px"
align="center">
<label> Nama :
<input name="nama" type="text" id="nama"
maxlength="50"/> </label>
<p> <label> Alamat : <input name="alamat" type="text"
id="alamat" maxlength="50"/></label></p>
<p> <label> E-mail : <input name="email" type="text"
id="email" maxlength="50"/></label></p>
<p> <label> Telepon : <input name="telepon" type="text"
id="telepon" maxlength="50"/></label></p>
<p> <label> Pesan :
<textarea name="pesan" id="pesan"></textarea>
</label> </p>
<p><script type="text/javascript"
src="ajax.js"></script>
<input type="button" name="button"
value="save" onclick="sendData('simpan.php','content'); return
false;"/>
<input type="reset" name="reset"
value="Cancel"/></p>
</div>
</fieldset>
</form>
</body>
</html>
Script diatas saya simpan dengan nama
1.php, apabila sudah di simpan dan dijalankan di web browser akan tampil
seperti gambar berikut :
Langkah selanjutnya
adalah membuat javascript dan membuat function untuk menyimpan data ke
database. Buat dokumen baru dan letik script berikut :
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
sendData(handlePage,ElementID){
var
nama=document.getElementById('nama').value;
var
alamat=document.getElementById('alamat').value;
var
email=document.getElementById('email').value;
var
telepon=document.getElementById('telepon').value;
var
pesan=document.getElementById('pesan').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(nama==""){
alert("Masukkan
Nama terlebih dahulu!");
}else
if(alamat==""){
alert("Masukkan
Alamat Anda!");
}else
if(email==""){
alert("Masukkan E-mail Anda!");
}else
if(!filterEmail.test(email)){
alert("E-mail
Tidak Valid");
}else
if(telepon==""){
alert("Masukkan
Nomor Telepon Anda!");
}else
if(!filterPhone.test(phone)){
alert("Kesalahan
Nomor Telepon!");
}else
if(pesan==""){
alert("Mohon
masukkan Pesan Anda!");
}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='nama='+nama;
param+='&alamat='+alamat;
param+='&email='+email;
param+='&telepon='+telepon;
param+='&pesan='+pesan;
param+='&action=save';
xmlhttp.send(param);
}
}
}
Kemudian simpan text
script di atas dengan nama ajax.js (contoh) file ini harus dijadikan satu atau
1 folder dengan file 1.php.
Setelah selsai dengan
langkah-langkah di atas, silahkan buat dokumen baru lagi. Sekarang kita akan
buat dokumen yang digunakan untuk menyimpan data yang diinputkan ke dalam
database. Berikut script yang dapat diketik :
<?php
$conn=mysql_connect("localhost","root","");
mysql_select_db('data');
if($_POST['action']=='save'){
//validasi data
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];
$email=$_POST['email'];
$telepon=$_POST['telepon'];
$pesan=$_POST['pesan'];
settype($nama,'string');
settype($alamat,'string');
settype($pesan,'string');
//validasi email;
if(!preg_match('/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/',$email)){
echo 'E-mail Adress tidak Valid'; exit();
}
//validasi phone
if(!preg_match('/^[0-9]+$/',$telepon)){
}
//saving data
$query="INSERT INTO kontak
(nama,alamat,email,telepon,pesan) VALUES
('$nama','$alamat','$email','$telepon','$pesan')";
$hasil=@mysql_query($query);
if($hasil){
echo '<font color="green">DATA
Tersimpan</font>';
}else {
echo '<font color="red">Error</font>';
}
}
?>
</body>
</html>
Setelah selsai, anda
dapat menyimpan dokumen dengan nama simpan.php di direktori yang sama dengan
file 1.php dan ajax.js
