Membuat loading ala facebook dengan PHP

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.

view sourceprint?

1.CREATE TABLE `mhs` (

2.`nim` varchar(10),

3.`namamhs` varchar(30),

4.`alamat` text,

5.`sex` varchar(1),

6.PRIMARY KEY  (`nim`)

7.);

1.INSERT INTO `mhs` VALUES ('M001', 'AGUS', 'SOLO', 'L');

2.INSERT INTO `mhs` VALUES ('M002', 'BUDI', 'KUDUS', 'L');

3.INSERT INTO `mhs` VALUES ('M003', 'CICI', 'SEMARANG', 'P');

4.INSERT INTO `mhs` VALUES ('M004', 'DEDI', 'BOYOLALI', 'L');

5.INSERT INTO `mhs` VALUES ('M005', 'ENI', 'SOLO', 'P');

6.INSERT INTO `mhs` VALUES ('M006', 'FIFI', 'SOLO', 'P');

7.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

01.<?php

02. 

03.// koneksi ke mysql

04.mysql_connect("dbhost", "dbuser", "dbpass");

05.mysql_select_db("dbname");

06. 

07.// membaca parameter jenis kelamin

08.$jenis = $_GET['jenis'];

09. 

10.//query SQL untuk mencari mahasiswa berjenis kelamin tertentu

11.$query = "SELECT * FROM mhs WHERE sex = '$jenis'";

12.$hasil = mysql_query($query);

13. 

14.// jika data hasil pencarian ada maka tampilkan tabel dan datanya

15.if (mysql_num_rows($hasil) > 0)

16.{

17.echo "<table border='1'>";

18.echo "<tr><th>NIM</th><th>NAMA</th><th>ALAMAT</th><th>JENIS KELAMIN</th></tr>";

19.while ($data = mysql_fetch_array($hasil))

20.{

21.echo "<tr><td>".$data['nim']."</td><td>".$data['namamhs']."</td><td>".$data['alamat']."</td><td>".$data['sex']."</td></tr>";

22.}

23.echo "</table>";

24.}

25.// jika data yang dicari tidak ditemukan

26.else echo "Data tidak ditemukan";

27. 

28.?>

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

01.<html>

02.<head>

03.<script type="text/javascript">

04. 

05.function ajax()

06.{

07.// membuat obyek XMLHttpRequest

08.if (window.XMLHttpRequest)

09.{

10.// untuk IE7+, Firefox, Chrome, Opera, Safari

11.xmlhttp=new XMLHttpRequest();

12.}

13.else

14.{

15.// untuk IE6, IE5

16.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

17.}

18. 

19.// membaca jenis kelamin yang dipilih melalui combobox

20.var pilih = document.getElementById("jenisKelamin").value;

21. 

22.// menjalankan atau melakukan request script mhs.php?jenis=... secara asynchronous

23.xmlhttp.open("GET","mhs.php?jenis=" + pilih);

24. 

25.// membaca respon

26.xmlhttp.onreadystatechange=function()

27.{

28.// jika request data telah sukses dan data hasil request sudah selesai diload

29.// maka tampilkan data mahasiswa

30.if (xmlhttp.readyState==4 && xmlhttp.status==200)

31.{

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

33.}

34.// jika belum, maka tampilkan image loadingnya

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

36.}

37. 

38.// mengirim request ke server

39.xmlhttp.send();

40.}

41. 

42.</script>

43.</head>

44.<body>

45.<h1>Ajax Loading Ala Facebook</h1>

46. 

47.Pilih Jenis Kelamin

48.<select id="jenisKelamin" onchange="ajax()">

49.<option value="L">Laki-laki</option>

50.<option value="P">Perempuan</option>

51.</select>

52.<br>

53.<div id="showdata">

54.</div>

55. 

56.</body>

57.</html>

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

1.<div id="showdata">

2.</div>

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

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

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

1.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.


sumber :  http://blog.rosihanari.net