Rosihan Ari's Blog

Membuat Loading Data AJAX Ala Facebook Dengan PHP

September 23rd, 2010 | by rosihanari |  Cetak Artikel

Anda kenal dengan image di bawah ini?

Ya… bagi Anda yang merupakan Facebooker, tentu image di atas tidak asing lagi. Image tersebut muncul sewaktu proses loading data di Facebook yang mana scriptnya menggunakan AJAX.

Pada artikel kali ini, saya akan mencoba memaparkan cara membuat script AJAX untuk menampilkan data dengan menggunakan image di atas sebagai tanda loadingnya ala Facebook.

OK, dalam studi kasus ini saya akan mencoba menampilkan data mahasiswa berdasarkan jenis kelaminnya (laki-laki atau perempuan) menggunakan AJAX. Adapun skenarionya cukup sederhana yaitu, user diminta memilih jenis kelaminnya melalui sebuah combobox kemudian data mahasiswa berdasar jenis kelamin tersebut akan muncul. Anda bisa melihat contoh tampilannya di http://rosihanari.net/ajaxfb. Oya, jika Anda coba untuk membuka contoh tersebut, terkadang image loadingnya tidak muncul. Hal ini disebabkan karena data sudah terload dengan cepat. Hal ini terjadi jika koneksi internet di tempat Anda sangat cepat atau data yang diload jumlahnya sedikit/kecil. Namun jika data yang diload banyak atau koneksinya lambat, maka tanda loading ini akan muncul.

Nah, kita mulai saja membuat contoh script AJAX tersebut. Pertama kita siapkan dulu sampel data mahasiswanya. Ini dia contoh tabel dan recordnya.

CREATE TABLE `mhs` (
  `nim` varchar(10),
  `namamhs` varchar(30),
  `alamat` text,
  `sex` varchar(1),
  PRIMARY KEY  (`nim`)
);

INSERT INTO `mhs` VALUES ('M001', 'AGUS', 'SOLO', 'L');
INSERT INTO `mhs` VALUES ('M002', 'BUDI', 'KUDUS', 'L');
INSERT INTO `mhs` VALUES ('M003', 'CICI', 'SEMARANG', 'P');
INSERT INTO `mhs` VALUES ('M004', 'DEDI', 'BOYOLALI', 'L');
INSERT INTO `mhs` VALUES ('M005', 'ENI', 'SOLO', 'P');
INSERT INTO `mhs` VALUES ('M006', 'FIFI', 'SOLO', 'P');
INSERT INTO `mhs` VALUES ('M007', 'GURUH', 'YOGYAKARTA', 'L');

Kemudian kita buat script untuk menampilkan data mahasiswa berdasarkan jenis kelaminnya. Sebagai catatan penting, script yang akan kita buat ini nanti harus bisa membaca jenis kelamin yang ditentukan melalui parameter GET. Sebagai contoh, misalkan kita akan menampilkan data mahasiswa yang berjenis kelamin Laki-laki, maka script tersebut kita panggil dengan http://…../mhs.php?jenis=L demikian pula jika ingin menampilkan data mahasiswa yang Perempuan, maka kita panggil dengan http://…/mhs.php?jenis=P. Mengapa harus demikian? ya… karena script mhs.php berparameter jenis kelamin ini nantinya akan diakses atau dipanggil oleh script AJAX nya secara asynchronous.

OK, sekarang kita buat script mhs.php nya yang berfungsi untuk menampilkan data mahasiswa berdasarkan jenis kelaminnya.

mhs.php

<?php

// koneksi ke mysql
mysql_connect("dbhost", "dbuser", "dbpass");
mysql_select_db("dbname");

// membaca parameter jenis kelamin
$jenis = $_GET['jenis'];

//query SQL untuk mencari mahasiswa berjenis kelamin tertentu
$query = "SELECT * FROM mhs WHERE sex = '$jenis'";
$hasil = mysql_query($query);

// jika data hasil pencarian ada maka tampilkan tabel dan datanya
if (mysql_num_rows($hasil) > 0)
{
   echo "<table border='1'>";
   echo "<tr><th>NIM</th><th>NAMA</th><th>ALAMAT</th><th>JENIS KELAMIN</th></tr>";
   while ($data = mysql_fetch_array($hasil))
   {
      echo "<tr><td>".$data['nim']."</td><td>".$data['namamhs']."</td><td>".$data['alamat']."</td><td>".$data['sex']."</td></tr>";
   }
   echo "</table>";
}
// jika data yang dicari tidak ditemukan
else echo "Data tidak ditemukan";

?>

Nah… setelah Anda buat script di atas, cobalah Anda akses script tersebut melalui browser dengan contoh URL misalnya http://…/mhs.php?jenis=L untuk menampilkan mahasiswa laki-laki. Jika dari pemanggilan script tersebut muncul tampilan seperti di bawah ini, maka scriptnya berjalan dengan sukses.

Lakukan hal yang sama untuk perempuan untuk mengecek scriptnya.

Selanjutnya, kita akan buat halaman index atau halaman utama yang di dalamnya nanti terdapat combo box untuk memilih jenis kelamin mahasiswa dan script AJAX untuk memanggil script mhs.php tersebut secara asynchronous.

Ini dia scriptnya…

index.php

<html>
<head>
<script type="text/javascript">

  function ajax()
  {
     // membuat obyek XMLHttpRequest
     if (window.XMLHttpRequest)
     {
        // untuk IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
     }
     else
     {
       // untuk IE6, IE5
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }

     // membaca jenis kelamin yang dipilih melalui combobox
     var pilih = document.getElementById("jenisKelamin").value;

     // menjalankan atau melakukan request script mhs.php?jenis=... secara asynchronous
     xmlhttp.open("GET","mhs.php?jenis=" + pilih);

     // membaca respon
     xmlhttp.onreadystatechange=function()
     {
        // jika request data telah sukses dan data hasil request sudah selesai diload
        // maka tampilkan data mahasiswa
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
           document.getElementById("showdata").innerHTML = xmlhttp.responseText;
        }
        // jika belum, maka tampilkan image loadingnya
        else document.getElementById("showdata").innerHTML = "<img src='facebook.gif'>";
     }

     // mengirim request ke server
     xmlhttp.send();
  }

</script>
</head>
<body>
   <h1>Ajax Loading Ala Facebook</h1>

   Pilih Jenis Kelamin
   <select id="jenisKelamin" onchange="ajax()">
     <option value="L">Laki-laki</option>
     <option value="P">Perempuan</option>
   </select>
   <br>
   <div id="showdata">
   </div>

</body>
</html>

Keterangan:

Bila Anda perhatikan pada script index.php di atas terdapat bagian

<div id="showdata">
</div>

Bagian itulah yang nantinya akan digunakan sebagai tempat untuk menampilkan data mahasiswa hasil request melalui perintah

document.getElementById("showdata").innerHTML = xmlhttp.responseText;

Namun, jika proses request belum selesai maka pada bagian tersebut nantinya akan diisi dengan image loading

document.getElementById("showdata").innerHTML = "<img src='facebook.gif'>";

Oya, Anda dapat memperoleh image loading ala Facebook nya di http://rosihanari.net/ajaxfb/facebook.gif. Tinggal disave saja imagenya dan taruh di dalam folder yang sama dengan script mhs.php dan index.php di atas.

OK, mudah bukan membuatnya?? Jika Anda ingin mencoba image loading yang lain silakan buat sendiri melalui situs http://ajaxload.info.

Baca Juga Artikel Terkait

Membuat Countdown Menuju Tanggal dan Waktu Tertentu Dengan AJAX

Membuat Buku Tamu dengan Akun Facebook (Bag 3)

Membuat Buku Tamu dengan Akun Facebook (Bag 2)

Membuat Buku Tamu dengan Akun Facebook (Bag 1)

Menjalankan Script PHP Untuk SMS Gateway Tanpa Autorefresh Dengan AJAX

Kata kunci: ajax - ajax php mysql - ajax script - facebook - php script -