Ajax & PHP : Menyimpan Data ke Database dengan AJAXFeb 20, 2010 oleh MyPHPtutorials | 2875 kali dibaca sejak Dec 26, 2010 |     

    Level: Menengah

Di tutorial Ajax & PHP : Menyimpan Data ke Database dengan AJAX ini anda akan belajar menyimpan data ke database mysql dengan ajax. Untuk menyimpan data ke database dengan ajax, ada tiga langkah yang perlu anda lakukan :

1. Bentuk XMLHttpRequest object,2. Kirim data yang akan disimpan ke database dengan method send dari XMLHttpRequest, dan3. Buat handle Page untuk menyimpan data ke database.

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

 

First name : 

Last name :   

 Code Form :<form id="form1" name="form1" method="post" action="handle_data.php">First name : <input name="first_name" type="text" id="first_name" /><p>Last name : <input name="last_name" type="text" id="last_name" /><input type="button" name="Button" value="Save" /></p></form>

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.

view plain copy to clipboard print TryIt ?

1. function getXMLHttpRequest(){  2.     //jika user menggunak IE  3.     if(window.ActiveXObject){  4.         return new ActiveXObject("Microsoft.XMLHTTP");   

5.     }else if(window.XMLHttpRequest){  6.         //user menggunakan browser selain IE  7.         return new XMLHttpRequest();  8.     }else { alert("Status : can not create XMLHttpRequest Ob

ject"); }   9. }  

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 formvar first_name=document.getElementById('first_name').value;var last_name=document.getElementById('last_name').value; //cek apakah first_name dan last_name tidak kosongif(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 :

view plain copy to clipboard print TryIt ?

1. #php open tag  2. <?php   3.  $f_name=$_POST['first_name'];  4.     $l_name=$_POST['last_name'];  5.     //cek apakah keduanya tidak kosong  6.     if($f_name=="" || $l_name==""){  7.         echo "Maaf data tidak lengkap";   8.     } else{  9.         settype($f_name,'string');  10.         settype($l_name,'string');  11.         //buat koneksi ke database  12.         $conn=mysql_connect("dbHost","dbUser","dbPass");  13.         mysql_select_db("namaDatabase");  14.         //simpan first name dan last name, misal ke tabel t_nam

a  15.         $query="insert into t_name(first_name, last_nam

e)values('$f_name', '$l_name')";   16.         $hasil=mysql_query($query);  17.         //jika berhasil menyimpan data   18.         if($hasil){  19.         echo "Data telah disimpan";   20.         }else{ echo "Error, tidak bisa meyimpan data";}  

 21.     }  22. ?>  

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 namat_contact dan dengan struktur seperti berikut.

Fields Tipe data Keteranganid_contact int(10) Primary key auto_incrementfirst_name varchar(50)  last_name varchar(50)  email varchar(50)  phone varchar(20)  message text  

 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.jsfunction 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 datafunction 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 inputif(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.

Catatan : Perhatikan dengan baik setiap kata yang dicetak tebal dan diberi warna yang berbeda. Setiap warna yang sama memiliki hubungan dan saling terkait.

Sumber : myphptutorial.com