Skip to content
You are here: Home » Tutorial » AJAX » Aplikasi AJAX Dengan JQuery, Bag. 2

Aplikasi AJAX Dengan JQuery, Bag. 2

Oleh: Wahyu Wibowo |
June 28th, 2010 |
5 Comments »

JQuery memiliki cukup banyak fungsi yang berkaitan dengan request AJAX. Fungsi load() seperti yang telah kita bahas pada bagian pertama adalah salah satunya. Dibandingkan dengan fungsi lainnya, load() merupakan metode yang paling sederhana untuk mengambil data dari server.

Pada artikel tersebut saya memberikan contoh bagaimana cara memanggil fungsi load() dengan satu parameter saja yaitu URL. Ketika pernyataan $("#content").load("data.php") tersebut dieksekusi, server akan memberikan respon berupa status (success atau error) dan data yang diminta. Segera setelah respon diterima, fungsi load() akan mengupdate elemen dokumen web yang dimaksud.

Berikut ini format lengkap dari fungsi load tersebut:

.load(url, [data], [complete(responseText, textStatus, XMLHttpRequest)])

  • url, string yang berisi URL kemana request tersebut akan dikirimkan
  • data, objek atau string yang dikirim ke server bersama dengan request tersebut (opsional)
  • complete, fungsi yang akan dipanggil ketika respon diterima (opsional)

Untuk mengecek apakah status yang diterima pada aplikasi kedua tersebut success atau error, kita bisa mengubah pernyataan pada contoh tersebut menjadi seperti berikut ini:

$("#content").load("data.php", function(response, status, xhr){
   if (status == "error") alert("Maaf, terjadi error: " + xhr.statusText);
});

Jadi sekarang kode lengkap dari tampilan front-end tersebut adalah sebagai berikut:

<html>
<head>
   <title>Aplikasi Kedua</title>
   <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
      $("#update").click(function(e){
         $("#content").load("data.php", function(response, status, xhr){
            if (status == "error") alert("Maaf, terjadi error: " + xhr.statusText);
         });
         e.preventDefault();
      });
   });
   </script>
</head>
<body>
<input type="submit" value="Update" id="update" />
<div id="content"></div>
</body>
</html>

Cara mengetesnya sangat mudah, rename saja file data.php dengan nama lain, misalnya adata.php. Nah, sekarang jika kita mengklik tombol Update pasti akan muncul pesan error. Pada kasus ini error terjadi karena URL yang kita request tidak ada.

Aplikasi Ketiga

Pada contoh yang ketiga ini kita akan membuat aplikasi web yang lebih kompleks dibandingkan dengan 2 contoh sebelumnya. Kita akan membuat aplikasi kecil untuk menyimpan data ke database dan mengupdate tampilan front-end tanpa harus melakukan refresh.

1. Server Side Code

Kode pada sisi server ini bertugas untuk menangani request AJAX yang dikirimkan oleh client. Alur programnya cukup sederhana yaitu sebagai berikut:

  • Buat koneksi ke database
  • Jika ada data yang dikirimkan oleh client, simpan ke database
  • Terakhir, ambil data dari database dan tampilkan dalam format XML

Struktur database:

Pada contoh ini kita akan menggunakan database MySQL untuk menyimpan data. Kita memerlukan sebuah tabel dengan struktur sebagai berikut:

CREATE TABLE pesan(
   id int(7) NOT NULL auto_increment,
   nama varchar(50) NOT NULL,
   isi varchar(200),
   PRIMARY KEY (id)
);

Struktur XML

Output yang diberikan pada saat terjadi request AJAX adalah dokumen XML dengan format sebagai berikut:

<?xml version="1.0"?>
<response>
   <status>1</status>
   <pesan>
      <nama>Wahyu Wibowo</nama>
      <isi>Pemrograman AJAX itu sangat mengasyikkan</isi>
   </pesan>
   <pesan>
      <nama>Toni Gunawan</nama>
      <isi>Ternyata AJAX susahnya minta ampun</isi>
   </pesan>
</response>

Tag status kita tambahkan pada tampilan XML tersebut untuk memberikan tanda bahwa request AJAX tersebut berhasil. Selanjutnya, mengingat output yang dihasilkan berupa XML, maka kita perlu menambahkan atribut Content-type seperti terlihat pada contoh di bawah ini. Selain itu data yang dikirim oleh user perlu kita sanitasi dengan sedikit trik kecil agar lebih aman.

header("Content-type: text/xml");
header("Cache-Control: no-cache");
$conn = mysql_connect($host, $user, $pass);
mysql_select_db($dbname, $conn);
foreach ($_POST as $key => $value)
$$key = mysql_real_escape_string($value, $conn);

Berikut ini kode untuk menyimpan data yang dikirimkan user ke database.

if (!empty($nama))
{
   mysql_query("INSERT INTO pesan (nama, isi)
      VALUES ('" . $nama . "', '" . $isi . "')");
}

Setelah proses penambahan data selesai, selanjutnya semua data ditampilkan dalam format XML dengan cara sebagai berikut:

$pesan = mysql_query("SELECT * from pesan", $conn);
if (mysql_num_rows($pesan) == 0) $status = 2;
else $status = 1;
echo "<?xml version=\"1.0\"?>\n";
echo "<response>\n";
echo "\t<status>$status</status>\n";
while ($row = mysql_fetch_array($pesan))
{
   echo "\t<pesan>\n";
   echo "\t\t<nama>$row[nama]</nama>\n";
   echo "\t\t<isi>$row[isi]</isi>\n";
   echo "\t</pesan>\n";
}
echo "</response>";

Itulah sedikit penjelasan mengenai kode pada sisi server dengan PHP. Kode selengkapnya bisa Anda download dari alamat URL yang terdapat pada bagian bawah artikel ini. Sedikit tambahan, pada dokumen XML kita bisa mendefinisikan sendiri tag yang akan kita pakai. Jadi pada kasus ini Anda bisa juga bereksperimen dengan mengganti tag-tag di atas dengan tag yang Anda bikin sendiri.

2. Client Side Code

Berbeda dengan contoh aplikasi sebelumnya, pada aplikasi ini kita akan memakai fungsi $.ajax untuk melakukan request ke server. Pada tampilan front-end ini kita akan membuat sebuah form yang berisi dua buah kotak input dan satu tombol Kirim.

Perlu diketahui bahwa saat user mengklik tombol Kirim akan terjadi sebuah event pada form tersebut, yaitu onSubmit. Nah, pada event itulah kita akan menuliskan definisi fungsi $.ajax tersebut dengan cara sebagai berikut:

$("#formdata").submit(function(e){
// code
});

Secara garis besar ada dua prosedur pada sisi client ini yaitu:

  • Prosedur untuk mengirim request AJAX
  • Prosedur untuk melakukan parsing dokumen XML yang diterima dari server

Biar ada gambaran sedikit mengenai tampilan front-end tersebut, berikut ini saya kutipkan potongan kode HTML pada sisi client ini.

<div id="d1">
<form id="formdata">
Nama: <input type="text" name="nama" id="nama" />
Isi Pesan: <input type="text" name="isi" id="isi" />
<input type="submit" value="Kirim" />
</form>
</div>
<div id="d2"></div>

Pada tampilan front-end ini pada saat user mengklik tombol Kirim data pada form tersebut akan dikirimkan ke server dengan mode AJAX. Selanjutnya server akan mengirimkan kembali semua data yang tersimpan pada database dalam bentuk XML.

Berikut ini prosedur untuk melakukan request AJAX tersebut:

$("#formdata").submit(function(e){
   $.ajax({
      url: "proses_data.php",
      type: "POST",
      dataType: "XML",
      data: {nama: $("#nama").val(), isi: $("#isi").val()},
      success: function(xml) {
         updateList(xml);
      }
   });
   e.preventDefault();
});

Fungsi updateList(xml) pada potongan kode di atas merupakan prosedur untuk melakukan parsing dokumen XML yang diterima dari server dan menampilkannya pada tag DIV dengan ID d2. Adapun kode pada fungsi tersebut adalah sebagai berikut:

function updateList(xml)
{
   if ($("status", xml).text() == "1")
   {
      $("#d2").empty();
      tmp = "<table border=\"1\">";
      tmp += "<tr><th>Nama</th><th>Isi Pesan</th></tr>";
      $("pesan", xml).each(function(id){
         pesan = $("pesan", xml).get(id);
         tmp += "<tr><td>" + $("nama", pesan).text() + "</td>";
         tmp += "<td>" + $("isi", pesan).text() + "</td></tr>";
      });
      tmp += "</table>";
      $("#d2").append(tmp);
   }
}

(bersambung)

Download Source Code

Tulisan Terkait:

Bagaimana Komentar Anda?

Monggo kalau Anda mau mengomentari tulisan di atas! Bertanya atau mengkritik juga boleh, tapi jangan terlalu menyakitkan :).

  • PANGERAN | November 30th, 2010 jam 7:10 pm

    SUNGGUH ILMU YANG BERMANFAAT,,,

    tapi mas mw tnya,,buat ngeslide foto2 gmn yah caranya?biar enteng gag berat

  • Wahyu Wibowo | January 17th, 2011 jam 10:43 am

    @pangeran, biar enteng cari library JavaScript lainnya yang lebih kecil dari jQuery

  • denny | February 24th, 2011 jam 12:43 am

    wah, koq link downloadnya dah gk isa ya ;(

  • Wahyu Wibowo | April 18th, 2011 jam 11:33 am

    @denny, bisa kok

  • heru | November 21st, 2011 jam 11:38 am

    …artikel bagus mas….mudah untuk di mengerti… trims.

Tinggalkan Pesan