Belajar Ajax dengan prototype.js

by Abu Aisyah on Mar.05, 2008, under Catatanku, Ngoprek, Programming

Ya ya, saya tahu ini basi, tapi paling tidak ini adalah pengalaman saya secara pribadi yang baru tahu bentuk makhluk yang namanya AJAX. Tapi bukan Ajax Andsterdam loh, saya nggak suka ama Ajax. Sukanya ama AC Milan.

Ajax singkatan dari “Asynchronous Javascript and XML“. Adalah sebuah teknologi yang memungkinkan kita bekerja di web secara realtime. Yap, itulah pengertian Ajax menurut saya (maklum bahasa Inggris lemah). Dan sebelumnya saya melihat sebuah script yang membingungkan. Maklum saya itu orangnya kepengen cepet dan nggak pengen yang lambat.

Dalam hal ini masalah coding ajax. Terus terang saya sendiri orangnya aplikatif. Tidak faham dengan script yang panjang. Dan mending diberitahukan cara tercepat untuk memulai dan menggunakannya. Dan et voila, hal itu terjawab sudah dengan menggunakan prototype.js. Script ini bisa anda ambil di wordpress. Saya sengaja nggak memberikan link download-annya, karena anda bisa download wordpress sendiri.

Petunjuk dan manualnya bisa dilihat di sini. Saya mulai dengan membuat sebuah halaman agar tampak terlihat realtime. Karena tempat saya bekerja ini adalah distributor pulsa, maka mau tak mau kita harus tahu antrian yang saat ini ada. Entah itu tidak diproses ataupun sedang diproses oleh server.

Kasusnya seperti ini. Misalnya saat ini ada berapa antriankah di server?
Script sederhananya adalah sebagai berikut:
lihatjmlantrian.php
<?php //connection $query = "select count(*) as jml from purchase where status < ".$_GET['st']; $rs = mysql_query($query); $rjml = mysql_fetch_object($rs); $jml = $rjml->jml; mysql_free_result; echo $jml; ?>

Cukup dengan kode di atas kita sudah bisa tahu berapa jumlah antrian yang belum terproses di dalam database. Misalnya status antrian itu adalah 0 untuk menunggu dan 1 untuk sedang diproses. Dan 2-6 untuk status yang lain. Maka kita hanya akan mendapatkan data antrian yang menunggu dan sedang diproses.

Kemudian kita membuat script untuk memanggilnya. Sangat mudah.
panggil.php
<?php //header, connection,function ?> <script type='text/javascript' src="js/prototype.js"></script> <h2>Jml Antrian</h2><span id="jmlantrian">(loading....)</span> <?php //footer ?> <script language='javascript'> new Ajax.PeriodicalUpdater( 'jmlantrian','lihatjmlantrian.php?st=2', { method:'get',frequency:5,decay:2 } ); </script>

Ada beberapa fungsi pada Ajax, yaitu Ajax.Request yaitu tujuan murni dari ajax, yang berupa requester. Kemudian ada Ajax.Responder, Ajax.Updater, Ajax.Option, dan ada Ajax. PeriodicalUpdater. Dan kali ini saya menggunakan Ajax.PeriodicalUpdater yang berguna untuk menampilkan refresh halaman secara terus menerus. Dan ini berguna bagi kasus seperti diatas. Yah…semuanya bisa di download di situs yang sudah saya sebutkan tadi. Mulai dari prototype-nya, API-nya, sekaligus documentasinya. Tinggalkan koding yang berbelit-belit, saatnya menggunakan resource yang sudah ada.

Share on Facebook

:ajax, javascript

10 Comments for this entry

c0kr3x
April 30th, 2008 on 4:44 pm
salam kenal dari lug-stikom,

saya juga sempat menggunakan prototype untuk salah satu project. namun sekarang lagi asyik pake mootools (mootools.net).
Jauhari
September 5th, 2008 on 1:45 pm
wah jadi ingin coba
bobby
March 16th, 2009 on 7:52 pm
assalamualaikum…

bisa minta contoh source code tentang salah satu contoh program/project yang menggunakan AJAX agar bisa dapat saya pelajari dan kembangkan lagi….

Tidak bermaksud untuk mencontek tp sbg bahan pembelajaran..

terima kasih
huda
March 25th, 2009 on 7:01 pm
keren-keren, makasih tutorialnya inisangat membantu…kapan2 mampir ya..
joko
April 20th, 2009 on 8:50 am
copy paste dr website orang koq ngaku web-programmer, hasil karyanya ada masih pake template wordpress sama joomla

you’re web-designer

Pekerjaan saya emang web programmer. Urusan saya pake template wordpress sama joomla apakah dilarang? Toh banyak juga koq web-programmer yang pake.
Abdellah Dev
June 5th, 2009 on 12:58 pm
Take it easy ajah. Gak penting disebut web programmer or web designer. yang penting manfaat. But memang kritik ada perlunya diperhatikan. Btw, semua yang nulis program, tetep ajah bisa disebut programmer, entah tingkatnya seberapa.

And, kalo menurut ane, yang penting produktivitas. Biar copy paste asal nggak dilarang & lebih produktif, lebih baik daripada bikin prog sendiri project nggak kelar2 <– kerjaanya programmer eksperiment, orientasinya eksperimen daripada nyelesain project (spt saya )
wafi
July 5th, 2009 on 9:23 am
lam kenal smua
bukankah yang terbaik itu yang bermanfaat buat kite
nasir-hawkeye22
September 7th, 2009 on 12:16 pm
Akhirnya, ketemu juga script buat auto refresh..
thanks yach,

My best regards to you..
Hepi Zilpatta
January 24th, 2010 on 8:54 am
ga nyangka aja ada orang indonesia yang bisa kasih tutorial yang bagus banget dan sangat produktif tentunya. Gue dah susah-susah cari artikel inggris, akhirnya ketemu juga versi indonesia.

Success for you,
Blogger Karo
January 30th, 2010 on 2:59 am
coba dulu tutorialnya