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:

1. <form name="form1" id="form1" action="" method="post">  
2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
5.  <option value="L">Laki Laki</option>  
6.  <option value="P">Perempuan</option>  
7. </select></p>  
8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
11. </form>  

tanpa menggunakan jQuery anda akan membutuhkan kode javascript panjang berikut.

1. <form name="form1" id="form1" action="" method="post">  
2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
5.  <option value="L">Laki Laki</option>  
6.  <option value="P">Perempuan</option>  
7. </select></p>  
8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
11. </form>  
12. <div id="loading"></div>  
13. <script type="text/javascript">  
14. function getXMLHttpRequest(){  
15.  if(window.ActiveXObject){  
16.  return new ActiveXObject("Microsoft.XMLHTTP");   
17.  }else if(window.XMLHttpRequest){  
18.  return new XMLHttpRequest();  
19.  }else {alert("Status : can not create XMLHttpRequest Object");}   
20. }  
21. function simpanPegawai(){  
22.  var xmlhttp = getXMLHttpRequest();  
23. /*simpan.php adalah file php yang meng-handle proses menyimpan data*/  
24.  xmlhttp.open('POST', 'simpan.php', true);  
25.  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
26.  document.getElementById('loading').innerHTML = 'loading...';  
27.  xmlhttp.onreadystatechange=function(){  
28.  if(xmlhttp.readyState == 4){  
29.  if(xmlhttp.status == 200){  
30.  document.getElementById('loading').innerHTML = xmlhttp.responseText;  
31.  }  
32.  }  
33.  }  
34.  var data = 'nip='+document.getElementById('nip').value;  
35.  data += '&namanama='+document.getElementById('nama').value;  
36.  data += '&jenis_kelaminjenis_kelamin='+document.getElementById('jenis_kelamin').value;  
37.  data += '&tgl_lahirtgl_lahir='+document.getElementById('tgl_lahir').value;  
38.  data += '&alamatalamat='+document.getElementById('alamat').value;  
39.  xmlhttp.send(data);  
40. }  
41. </script>  

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

1. <?php  
2. /*file simpan.php*/  
3. mysql_connect("localhost", "user", "password");  
4. mysql_select_db("example");  
5.   
6. mysql_query("insert into pegawai set nip='".$_POST['nip']."',  
7.  nama='".$_POST['nama']."', jenis_kelamin='".$_POST['jenis_kelamin']."',  
8.  tgl_lahir='".$_POST['tgl_lahir']."', alamat='".$_POST['alamat']."'");  
9. echo 'Data telah disimpan';  
10. ?>  

sekarang coba bandingkan dengan menggunakan jQuery.

1. <form name="form1" id="form1" action="" method="post">  
2. <p>NIP: <input type="text" name="nip" id="nip"/></p>  
3. <p>Nama: <input type="text" name="nama" id="nama"/></p>  
4. <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin">  
5.  <option value="L">Laki Laki</option>  
6.  <option value="P">Perempuan</option>  
7. </select></p>  
8. <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p>  
9. <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p>  
10. <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p>  
11. </form>  
12. <div id="loading"></div>  
13. <!-- sesuaikan dengan file jquery yang anda download -->  
14. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
15. <script type="text/javascript">  
16. function simpanPegawai(){  
17.  $("#loading").html('loading...');  
18.  $.post('simpan.php', $("form").serialize(), function(hasil){  
19.  $("#loading").html(hasil);  
20.  });  
21. }  
22. </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.

1. <?php  
2. /*file tampil.php*/  
3. mysql_connect("localhost", "user", "password");  
4. mysql_select_db("example");  
5. ?>  
6. <table>  
7.  <tr>  
8.  <td>NIP</td>  
9.  <td>Nama</td>  
10.  <td>Jenis kelamin</td>  
11.  <td>TGL Lahir</td>  
12.  <td>Alamat</td>  
13.  </tr>  
14.  <?php  
15.  $query = mysql_query("select * from pegawai");  
16.  while($pegawai = mysql_fetch_array($query)){  
17.  echo '<tr>';  
18.  echo '<td>'.$pegawai['nip'].'</td>';  
19.  echo '<td>'.$pegawai['nama'].'</td>';  
20.  echo '<td>'.$pegawai['jenis_kelamin'].'</td>';  
21.  echo '<td>'.$pegawai['tgl_lahir'].'</td>';  
22.  echo '<td>'.$pegawai['alamat'].'</td>';  
23.  echo '</tr>';  
24.  }  
25.  ?>  
26. </table>  

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

1. <a href="javascript:loadData()">Load Data</a>  
2. <div id="pegawai"></div>  
3. <script type="text/javascript">  
4.  function getXMLHttpRequest(){  
5.  if(window.ActiveXObject){  
6.  return new ActiveXObject("Microsoft.XMLHTTP");  
7.  }else if(window.XMLHttpRequest){  
8.  return new XMLHttpRequest();  
9.  }else {alert("Status : can not create XMLHttpRequest Object");}  
10.  }  
11.  function loadData(){  
12.  var xmlhttp = getXMLHttpRequest();  
13.  document.getElementById('pegawai').innerHTML = 'loading...';  
14.  xmlhttp.open('GET', 'tampil.php', true);  
15.  xmlhttp.onreadystatechange = function(){  
16.  if(xmlhttp.readyState == 4){  
17.  if(xmlhttp.status == 200){  
18.  document.getElementById('pegawai').innerHTML = xmlhttp.responseText;  
19.  }  
20.  }  
21.  }  
22.  xmlhttp.send(null);  
23.  }  
24. </script>  

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

1. <a href="javascript:loadData()">Load Data</a>  
2. <div id="pegawai"></div>  
3. <!-- sesuaikan dengan file jquery yang anda download -->  
4. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  
5. <script type="text/javascript">  
6. function loadData(){  
7.  $("#pegawai").load('tampil.php');  
8. }  
9. </script>  

Bisa dilihat perbedaan yang sangat siginifikan antara menampilkan data dengan jQuery AJAX dibandingkan 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().