Kamis, 05 Januari 2012

Membuat loading ala facebook dengan PHP

Anda kenal dengan image di bawah ini?
AJAX Loading Facebook
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.
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.
AJAX Loading Facebook
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 &amp;amp;amp;amp;&amp;amp;amp;amp; 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
◄ Newer Post Older Post ►