AJAX dengan jquery Part 1 Oleh: Cecep Yusuf Kali ini saya akan share tutorial AJAX dengan jquery. Dengan menggunakan jquery, penggunaan AJAX akan jauh menjadi lebih mudah. Penjelasan Kali ini saya akan share tutorial AJAX yang pertama di Jagocoding.com dengan menggunakan jquery. Bagi yang belum tahu apa itu jquery, silakan baca artikel ini: http://jagocoding.com/tutorial/16/mengenal_jquery_apa_itu_jquery. AJAX adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Dengan menggunakan jquery, "memainkan" AJAX menjadi lebih mudah, karena jquery sudah menyediakan function-function siap pakai untuk AJAX dan manipulasi DOM (dipakai untuk response/timbal balik ketika AJAX dijalankan). OK langsung saja kita mulai tutorialnya. Untuk deklarasi AJAX dengan menggunakan jquery adalah dengan memanggil function.ajax(). Bentuk scriptnya adalah: $.ajax(); Tetapi script di atas tidak akan berfungsi karena kita tidak meletakkanya setelah DOM ready dan tidak mempunyai option yang dibutuhkan untuk request. Adapun option dan method yang dibutuhkan dalam AJAX memakai jquery antara lain: 1. URL, menentukan alamat URL mana yang akan direquest oleh HTTP Request (AJAX) 2. type, tipe request yang akan dijalankan, apakah POST atau GET 3. BeforeSend, event yang dilakukan ketika HTTP Request akan diproses 4. Complete, event yang dilakukan ketika HTTP Request selesai dijalankan, namun tidak melihat apakah request sukses atau gagal 5. Success, event yang dilakukan ketika HTTP Request selesai dan berhasil dijalankan dan
mempunyai nilai balik yaitu data hasil request 6. Data, data yang dikirim ke server ketika request dan diolah di server. Data ini akan diperlakukan berdasarkan 2 type yang ditentukan, yaitu GET atau POST. Sebenarnya masih ada options yang lain, tetapi yang perlu diketahui dan biasa dipakai adalah yang di atas tersebut. Untuk pemanggilan options tersebut, caranya dengan memasukkan ke dalam function ajax tadi berbentuk struktur objek javascript. Contoh: url: "lakukan_proses.php", type: "POST", data: $('#form').serialize(), beforefilter: function(){ $('#loading').show(); }, $('#loading').hide(); } Di atas adalah contoh penggunaan AJAX sederhana yang melakukan request ke file lakukan_proses.php, data yang dikirim adalah inputan dari sebuah form yang mempunyai id form (ingat selection id dengan CSS, sama aja). Sebelum proses dijalankan, tampilkan gambar loading, kemudian setelah request selesai dijalankan dan membawa timbal balik html, maka sembunyikan loading, dan tampilkan alert yang berisi html timbal balik (response) dari server. Tutorial Ok, langsung aja kita praktik membuat aplikasi sederhana menggunakan PHP dan AJAX jquery. Setelah server Apache dijalankan, silakan buat sebuah folder beserta file index.php di dalamnya, misalnya nama folder adalah "ajax". Simpan index.php di dalam folder ajax, dan simpan di dalam server webroot kamu, misalnya di xampp\htdocs\. Sekarang, isikan file index.php tersebut dengan kode di bawah ini: <html> <head> <title>contoh AJAX</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <button id="tombol">klik di sini!</button> </body> </html>
Pada tahap ini, kamu sudah membuat suatu halaman HTML sederhana yang berisi sebuah tombol bertuliskan "Klik di sini!". Kita akan melakukan sesuatu dengan tombol ini. Tetapi sebelumnya, buatlah satu buah file bernama proses.php dan simpan satu folder dengan file index.php tersebut. Isi dari file proses.php adalah: <?php echo "HELLO DUNIA!"; Kita akan mencoba me-request file proses.php dari file index.php dengan menggunakan metode AJAX. Tambahkan kode berikut ini sebelum tag penutup </head>. <script> $().ready(function(){ $('#tombol').click(function(){ url: "proses.php", } </script> Selamat, Kamu sudah membuat aplikasi berbasis AJAX yang paling sederhana di dunia. Saya heran, kenapa semua programming pasti yang diajarkan pertama adalah menampilkan tulisan Hello World. Apapun itu, gak masalah, yang penting kita bisa melakukannya hehe.. Jika kamu mengikuti tutorial dengan benar, maka ketika kamu klik tombol tersebut maka akan muncul tulisan Hello World berdasarkan isi dari proses.php. parameter html adalah response hasil request pada file proses.php. Oke kita sekarang akan lanjutkan tutorial tadi dengan menambahkan status loading di atas tombol :) Tambahkan span loading di atas tombol: <span id="loading" style="display:none">loading...</span><br /> Span tersebut ditambahin style display = none yang artinya span loading tidak ditampilkan. Nanti span ini akan tampil ketika kita klik tombol dan akan kembali menghilang. Setelah itu, ubah script ajax tadi menjadi sebagai berikut: url: "proses.php", beforesend: function(){ $('#loading').show(); },
} $('#loading').hide(); Kode yang ditambahkan adalah function beforesend dan penanganan loading. beforesend adalah event/kejadian di mana request akan dikirim (pre-request), dan saat itu program menampilkan span yang idnya adalah loading dengan menggunakan function show(). Kemudian, setelah sukses dan sebelum alert ditampilkan, maka sembunyikan tulisan loading tersebut (hide). Tulisan loading akan cepat menghilang kembali karena kamu menjalankannya di lokal :D, requestnya sangat cepat. Hehe.. Kode lengkap untuk /ajax/index.php adalah sebagai berikut: <html> <head> <title>contoh AJAX</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $().ready(function(){ $('#tombol').click(function(){ url: "proses.php", beforesend: function(){ $('#loading').show(); }, $('#loading').hide(); } </script> </head> <body> <span id="loading" style="display:none">loading...</span><br /> <button id="tombol">klik di sini!</button> </body> </html> OK paling itu saja untuk kali ini, kebetulan saya lagi ada pekerjaan dulu. Tunggu tutorial berikutnya yaa.. :) ~ Cheyuz@Jagocoding.com
Stand By With Me, cheyuz@jagocoding.com Tentang Penulis Cecep Yusuf Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.com