My PHP Tutorials > Print>PHP AJAX jQuery http://www.myphptutorials.

com/tutorials/print-35

PHP AJAX jQuery

Tutorial PHP AJAX jQuery ini merupakan versi kedua dari Tutorial AJAX JQuery. Tutorial kedua ini
dibuat karena ada banyak yang tidak mengerti dengan tutorial versi pertama. Sebelum mengikuti tutorial ini
silahkan download jQuery di jQuery.com.

Seperti dijelaskan sebelumnya di Tutorial AJAX JQuery. AJAX memerlukan XMLHttpRequest Object untuk
dapat me-request sebuah halaman web secara Asynchronous. Untuk membentuk object XMLHttpRequest
dijelaskan di Tutorial Dasar Dasar Ajax. Dengan adanya jQuery anda tidak perlu lagi memikirkan kode
javascript untuk membentuk object XMLHttpRequest. jQuery akan membuatkannya untuk anda. Sebelum
mulai menggunakan jQuery AJAX anda perlu tahu sedikit tentang jQuery Selector.

jQuery Selector

Ada beberapa jQuery selector yang akan digunakan ditutorial ini.

Selector ID.
contoh: $("#nama"), setara dengan document.getElementById('nama'), untuk memilih element html dengan
id="nama".
Selector Class.
contoh: $(".red"), pengganti document.getElementsByClassName('red'), untuk memilih semua element
dengan class="red".
Selector Element.
contoh: $("div"), setara dengan document.getElementsByTagName('div'), untuk memilih semua element div.
Untuk lebih jelas silahkan kunjungi dokumentasi jQuery.

Menyimpan Data ke Database dengan jQuery AJAX

Misalkan anda memiliki sebuah database dengan nama 'example', dengan sebuah tabel 'pegawai' dengan
struktur seperti berikut:

untuk menyimpan data pegawai ke table di atas tentunya anda memerlukan sebuah html form seperti:

<form name="form1" id="form1" action="" method="post">

<p>NIP: <input type="text" name="nip" id="nip"/></p>
<p>Nama: <input type="text" name="nama" id="nama"/></p>
<p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">
<option value="L">Laki Laki</option>
<option value="P">Perempuan</option>

1 of 5 3/23/2011 3:42 PM
My PHP Tutorials > Print>PHP AJAX jQuery http://www.myphptutorials.com/tutorials/print-35

</select></p>
<p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>
<p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>
<p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>
</form>

tanpa menggunakan jQuery anda akan membutuhkan kode javascript panjang berikut.

<form name="form1" id="form1" action="" method="post">

<p>NIP: <input type="text" name="nip" id="nip"/></p>
<p>Nama: <input type="text" name="nama" id="nama"/></p>
<p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">
<option value="L">Laki Laki</option>
<option value="P">Perempuan</option>
</select></p>
<p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>
<p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>
<p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>
</form>
<div id="loading"></div>
<script type="text/javascript">
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");}
}
function simpanPegawai(){
var xmlhttp = getXMLHttpRequest();
/*simpan.php adalah file php yang meng-handle proses menyimpan data*/
xmlhttp.open('POST', 'simpan.php', true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
document.getElementById('loading').innerHTML = 'loading...';
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
document.getElementById('loading').innerHTML = xmlhttp.responseText;
}
}
}
var data = 'nip='+document.getElementById('nip').value;
data += '&nama='+document.getElementById('nama').value;
data += '&jenis_kelamin='+document.getElementById('jenis_kelamin').value;
data += '&tgl_lahir='+document.getElementById('tgl_lahir').value;
data += '&alamat='+document.getElementById('alamat').value;
xmlhttp.send(data);
}
</script>

dan tentunya file simpan.php untuk menyimpan data ke database.

<?php
/*file simpan.php*/
mysql_connect("localhost", "user", "password");
mysql_select_db("example");

mysql_query("insert into pegawai set nip='".$_POST['nip']."',

nama='".$_POST['nama']."', jenis_kelamin='".$_POST['jenis_kelamin']."',
tgl_lahir='".$_POST['tgl_lahir']."', alamat='".$_POST['alamat']."'");

2 of 5 3/23/2011 3:42 PM
My PHP Tutorials > Print>PHP AJAX jQuery http://www.myphptutorials.com/tutorials/print-35

echo 'Data telah disimpan';

?>

sekarang coba bandingkan dengan menggunakan jQuery.

<form name="form1" id="form1" action="" method="post">

<p>NIP: <input type="text" name="nip" id="nip"/></p>
<p>Nama: <input type="text" name="nama" id="nama"/></p>
<p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">
<option value="L">Laki Laki</option>
<option value="P">Perempuan</option>
</select></p>
<p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>
<p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>
<p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>
</form>
<div id="loading"></div>
<!-- sesuaikan dengan file jquery yang anda download -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function simpanPegawai(){
$("#loading").html('loading...');
$.post('simpan.php', $("form").serialize(), function(hasil){
$("#loading").html(hasil);
});
}
</script>

bisa dilihat perbedaan yang signifikan, tanpa jQuery membutuhkan 28 baris (13-14) kode javascript,
sedangkan dengan jQuery hanya dibutuhkan 9 baris (14-22) kode javascript. Dibaris 14 ditambahkan library
jQuery, kemudian di function savePegawai() baris ke-17 untuk menampilkan kata 'loading...' kepada user.
Baris 18-20 adalah pengganti baris 24-39 kode sebelumnya yang tanpa jQuery. function jQuery $.post (bisa
juga dengan jQuery.post) memiliki 3 parameter
$.post(url,data,callback_function);
url: diisi dengan url yang direquest, dalam hal ini adalah file simpan.php;
data: diisi dengan data yang dikirim ke server, kode di atas menggunakan function jQuery.serialize() untuk
mengisi parameter ini. Function jQuery.serialize() mengkodekan (Encode) semua element form beserta value
masing masing menjadi sebuah string data untuk dikirim ke server;
callback_function: diisi dengan function yang dipanggil setelah proses request selesai.

Menampilkan Data dengan jQuery AJAX

Untuk menampilkan data, pertama yang harus dibuat adalah file php untuk membaca data dari database.
Misalnya seperti kode php di bawah.

<?php
/*file tampil.php*/
mysql_connect("localhost", "user", "password");
mysql_select_db("example");
?>
<table>
<tr>
<td>NIP</td>
<td>Nama</td>

3 of 5 3/23/2011 3:42 PM
My PHP Tutorials > Print>PHP AJAX jQuery http://www.myphptutorials.com/tutorials/print-35

<td>Jenis kelamin</td>
<td>TGL Lahir</td>
<td>Alamat</td>
</tr>
<?php
$query = mysql_query("select * from pegawai");
while($pegawai = mysql_fetch_array($query)){
echo '<tr>';
echo '<td>'.$pegawai['nip'].'</td>';
echo '<td>'.$pegawai['nama'].'</td>';
echo '<td>'.$pegawai['jenis_kelamin'].'</td>';
echo '<td>'.$pegawai['tgl_lahir'].'</td>';
echo '<td>'.$pegawai['alamat'].'</td>';
echo '</tr>';
}
?>
</table>

Selanjutnya adalah menggunakan AJAX untuk request file tampil.php di atas. Tanpa jQuery anda akan
membuat kode javascript seperti:

<a href="javascript:loadData()">Load Data</a>

<div id="pegawai"></div>
<script type="text/javascript">
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");}
}
function loadData(){
var xmlhttp = getXMLHttpRequest();
document.getElementById('pegawai').innerHTML = 'loading...';
xmlhttp.open('GET', 'tampil.php', true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
document.getElementById('pegawai').innerHTML = xmlhttp.responseText;
}
}
}
xmlhttp.send(null);
}
</script>

Sedangkan dengan menggunakan jQuery anda hanya membutuhkan kode javascript singkat di bawah:

<a href="javascript:loadData()">Load Data</a>

<div id="pegawai"></div>
<!-- sesuaikan dengan file jquery yang anda download -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function loadData(){
$("#pegawai").load('tampil.php');
}
</script>

Bisa dilihat perbedaan yang sangat siginifikan antara menampilkan data dengan jQuery AJAX dibandingkan

4 of 5 3/23/2011 3:42 PM
My PHP Tutorials > Print>PHP AJAX jQuery http://www.myphptutorials.com/tutorials/print-35

dengan tanpa jQuery. Tanpa jQuery membutuhkan 22 baris (3-24) kode javascript, sedangkan dengan jQuery
hanya dibutuhkan 6 baris. Untuk menampilkan data dengan jQuery AJAX, digunakan function jQuery.load();
function jQuery.load() memiliki dua parameter:
.load(url, [callback_function]);
url: diisi dengan url yang ingin direquest, dalam hal ini adalah file tampil.php;
callback_function: function yang dipanggil setelah proses selesai, parameter ini optional, bisa tidak diisi.
function ini setara dengan function jQuery.get().

Rangkuman

Dengan jQuery hanya dibutuhkan menulis sedikit kode javascript, sesuai dengan slogan jQuery "write less, do
more". jQuery menyediakan library library AJAX yang selengkapnya bisa dilihat di http://api.jquery.com
/category/ajax/. Untuk menyimpan data ke database (lebih umum mengirim data server) dengan AJAX
digunakan function jQuery.post(). Untuk menampilkan data (merequest data dari server/melakukan http
request get) dengan AJAX digunakan function jQuery.load() atau jQuery.get().

Referensi

http://jquery.com/
Dokumentasi jQuery
Dokumentasi jQuery AJAX

MyPHPtutorials by I Putu Ellyx Christian is licensed under a Creative Commons Attribution-

NonCommercial-ShareAlike 3.0 Unported License

5 of 5 3/23/2011 3:42 PM