Membangun Website dengan AJAX dan PHP

Menyimpan data ke database dengan AJAX
Pada tutorial sebelumnya anda telah belajar ...
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
        //user menggunakan browser selain ...
data yang dkirim ke database. Parameter ElementID diisi dengan ID dari element HTML tempat
response dari server akan ditam...
Latihan Menyimpan Data ke Database dengan AJAX
Untuk lebih memperjelas pemahaman anda bagaimana cara menyimpan data ke dat...
<label>Phone :
<input name="phone" type="text" id="phone" maxlength="20" />
</label>
</p>
<p>
<label>Message :
<textarea n...
// JavaScript Document
//file ajax.js

function getXMLHttpRequest(){
       if(window.ActiveXObject){
                retu...
if(xmlhttp.status==200){
                                obj.innerHTML=xmlhttp.responseText+'<br>'+form;
                 ...
//validasi email;
if(!preg_match('/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/',$email)){
echo 'Ivalid Ema...
Upcoming SlideShare
Loading in …5
×

Menyimpan Data Ke Database Dengan Ajax Dan PHP

7,045 views
6,944 views

Published on

Untuk menyimpan data ke database ada tiga langkah yang perlu anda lakukan : 1. Bentuk XMLHttpRequest object, 2. Kirim data yang akan disimpan ke database dengan method send dari XMLHttpRequest, dan 3. Buat handle Page untuk menyimpan data ke database. Pada tutorial sebelumnya anda telah belajar bagaimana mengirim data ke server dengan AJAX. Jika anda telah mengerti dengan tutorial sebelumnya dan telah berhasil melakukan contoh yang diberikan maka untuk mengerti tutorial ini akan sangat mudah bagi anda. Untuk menyimpan data ke database dengan ajax anda hanya memerlukan beberapa langkah ke depan. Pada tutorial sebelumnya anda telah diberikan sebuah contoh bagaimana mengirim data ke web server dan menampilkan data yang dikirim. Untuk menyimpan data ke database, langkah-langkah yang dilakukan hampir sama dengan contoh sebelumnya. Anda tinggal mengubah script yang digunakan untuk menangani data yang dikirim, yang semula hanya untuk menampilkan data yang dikirim dengan mambahkan script untuk menyimpan data ke database.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,045
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
335
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Menyimpan Data Ke Database Dengan Ajax Dan PHP

  1. 1. Membangun Website dengan AJAX dan PHP Menyimpan data ke database dengan AJAX Pada tutorial sebelumnya anda telah belajar bagaimana mengirim data ke server dengan AJAX. Jika anda telah mengerti dengan tutorial sebelumnya dan telah berhasil melakukan contoh yang diberikan maka untuk mengerti tutorial ini akan sangat mudah bagi anda. Untuk menyimpan data ke database dengan ajax anda hanya memerlukan beberapa langkah ke depan. Pada tutorial sebelumnya anda telah diberikan sebuah contoh bagaimana mengirim data ke web server dan menampilkan data yang dikirim. Untuk menyimpan data ke database, langkah-langkah yang dilakukan hampir sama dengan contoh sebelumnya. Anda tinggal mengubah script yang digunakan untuk menangani data yang dikirim, yang semula hanya untuk menampilkan data yang dikirim dengan mambahkan script untuk menyimpan data ke database. Sebagai contoh, misalkan anda memiliki sebuah form seperti di bawah. First name : þÿ Save 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. function getXMLHttpRequest(){ //jika user menggunak IE if(window.ActiveXObject){ Oleh : Ellyx Christian www.toturial.net63.net
  2. 2. 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 / Sending 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 Oleh : Ellyx Christian www.toturial.net63.net
  3. 3. 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 menggunakan database anda dapat menggunakan script seperti di bawah : <?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"; } } ?> Oleh : Ellyx Christian www.toturial.net63.net
  4. 4. 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. Fields Tipe data Keterangan id_contact int(10) Primary key auto_increment first_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> Oleh : Ellyx Christian www.toturial.net63.net
  5. 5. <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 : Oleh : Ellyx Christian www.toturial.net63.net
  6. 6. // 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){ Oleh : Ellyx Christian www.toturial.net63.net
  7. 7. 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'); Oleh : Ellyx Christian www.toturial.net63.net
  8. 8. //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 contoh 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. Sampai di sini saya akhiri Tutorial Membangun Website dengan AJAX dan PHP, pokok bahasan Menyimpan data ke database dengan AJAX. Pada tutorial selanjutnya akan dibahas cara Membaca data dari database dan menampilkannya dengan AJAX . Jika ada suatu pertanyaan atau ada yang tidak anda mengerti dari tutorial, ini anda bisa bertanya melalui forum. Tidak lupa saya juga memohon maaf jika ada sesutu yang salah. Teruslah untuk mencoba serta rajin untuk berlatih dan terus belajar. Oleh : Ellyx Christian www.toturial.net63.net

×