45 kasus Ajax

Belajar Ajax dengan prototype.js

BY A BU AISYAH , ON MA RCH 5 TH , 2 008

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

30

Submit form sederhana dengan ajax menggunakan mootools

Saat ini ajax merupakan teknologi dalam bidang web yang sedang naik daun. Load yang lebih cepat karena tidak perlu meload semua halaman menjadi salah satu keunggulan dari teknologi ajax ini. Saat membuatwebsite direktori saya coba untuk menerapkan teknologi ajax ini pada website tersebut. Emang tidak semua menggunakan ajax tetapi hanya pada form daftarkan website saya gunakan teknologi ajax untuk mensubmit form tersebut. Saya menggunakan mootools sebagai framework javascript yang cukup mudah untuk digunakan. Kamu dapat membaca postingan ini untuk mengenal lebih jauh tentang mootols. Kamu dapat mendownload mootools di sini. Ada dua cara yang dapat kita digunakan untuk mensubmit form dengan ajax menggunakan mootools. Sebelum membahas kedua cara tersebut hal yang perlu disiapkan adalah file untuk form dan file action. Contoh file form adalah sebagai berikut. 1 <div id="response"></div> 2 <form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;"> 3 <label for="name">Nama: </label> 4 <input name="name" size="30" id="name" type="text" /> 5 6 <label for="name">Alamat email: </label> 7 <input name="email" size="30" id="email" type="text" /> 8 <input name="task" id="task" value="Submit" type="submit" /> 9 </form>

dan contoh file action adalah sebagai berikut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <?php if( $_POST ){ if( trim($_POST['name']) == '' ){ echo 'Silahkan masukkan nama Anda.'; } elseif( trim($_POST['email']) == '' ){ echo 'Silahkan masukkan alamat email Anda.'; } else{ // kamu dapat melakukan aksi di sini, misal-nya masukin ke database atau yang lain. echo 'Terima kasih telah mengisi form. Berikut adalah data Anda:'; echo 'Nama Anda: '.$_POST['name']; echo 'Email Anda: '.$_POST['email']; } } ?>

1. Cara pertama adalah menggunakan fungsi javascript Cara ini adalah dengan membuat fungsi javascript untuk melakukan action ketika form disubmit. Contoh fungsi tersebut adalah:

1. Cara pertama adalah menggunakan fungsi javascript Cara ini adalah dengan membuat fungsi javascript untuk melakukan action ketika form disubmit. Contoh fungsi tersebut adalah: 1 function submit_form(){ var fn = function(){ 2 $('task').disabled=false; 3 4 $('response').removeClass('ajax-loading').addClass('response'); 5 } 6 var html = "Harap menunggu..."; 7 8 $('response').removeClass('response').addClass('ajax-loading').setHTML(html); $('task').disabled=true; 9 var options = {}; 10 11 options['update'] = 'response'; // id div yang akan di tulisi response dari action 12 options['onComplete'] = fn; options['evalScripts'] = false; //jika respon mengandung javascript berikan nilai true 13 14 $('form').send(options); 15 }

Jika menggunakan cara ini maka kamu harus menambahkan onsubmit=submit_form(); return false; pada form kamu. Contohnya sebagai berikut. 1 <form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;"> 2 </form> 2. Cara kedua adalah menggunakan window.domready Cara ini adalah menambahkan event submit pada form menggunakan domready. Contohnya sebagai berikut. 1 window.addEvent('domready', function(){ $('form2').addEvent('submit', function(e){ 2 e = new Event(e).stop(); 3 var fn = function(){ 4 $('task2').disabled=false; 5 6 $('response2').removeClass('ajax-loading').addClass('response'); 7 }; 8 var html = "Harap menunggu..."; 9 10 $('response2').removeClass('response').addClass('ajax-loading').setHTML(html); $('task2').disabled=true; 11 12 var options = {}; 13 14 options['onComplete'] = fn; 15 options['update'] = 'response2'; 16 $('form2').send(options); 17 }); 18 });

Jika kamu menggunakan cara ini maka kamu harus menambahkan id pada form, misalnya 1 <form action="action.php" method="post" name="form2" id="form2"> 2 </form> Kamu dapat melihat contoh penerapan metode tersebut di sini. Atau kamu juga dapat mengunduh contoh tersebut di sini.

12
(Posting ulang, sebelumnya sudah pernah di posting di ruangkecil.or.id) AJAX PART I memanfaatkannya dalam pengembangan web.

MAR

Istilah AJAX technology belakangan ini sering terdengar dalam pengembangan aplikasi web, berikut sedikit gambaran tentang AJAX dan cara

AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul AJAX: A New Approach To Web Applications. AJAX bukan merupakan bahasa pemrograman baru, namun hanya sebuah tehnik pemanfaatan Javascript dalam mengontrol class object XMLHttpRequest untuk me-Refresh / mengupdate content dalam halaman web tanpa melakuan Reload keseluruhan halaman web seperti pada Metoede Tradisional, AJAX sendiri merupakan singkatan dari Asynchronous JavaScript And XML. Kelebihan utama AJAX sendiri terletak pada pemanfaatan class object XMLHttpRequest untuk berkomunikasi dengan Web Server dalam melakukan request content, berikut pengunaan Javascript dalam membuat class object XMLHttpRequest : Untuk membuat class object pada browser Firefox, Safari, IE7, Mozila, dsb. oAJAX = new XMLHttpRequest(); Untuk membuat class object pada browser IE versi terbaru. oAJAX= new ActiveXObject('MSXML2.XMLHTTP'); Untuk membuat class object pada browser IE versi lama. oAJAX = new ActiveXObject('Microsoft.XMLHTTP'); Untuk dapat berjalan pada semua browser (Cross Browser), kita dapat mengabungkan kesemua script tersebut kedalam sebuah function pembuat class object XMLHttpRequest seperti berikut : function createRequest(){ var oAJAX = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { oAJAX = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { oAJAX = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { oAJAX = false; } } @end @*/ if (!oAJAX && typeof XMLHttpRequest != 'undefined') { oAJAX = new XMLHttpRequest(); } if (!oAJAX){ alert("Error saat membuat XMLHttpRequest!"); }else{ alert("XMLHttpRequest sukses dibuat!"); } return oAJAX; } Mula-mula function diatas akan mencoba membuat class object XMLHttpRequest dengan sintaks IE versi terbaru, jika gagal maka akan di coba mengunakan sintaks pd IE versi sebelumnya jika masih gagal maka akan di coba mengunakan sintaks pembuatan pada browser Mozila, Firefox dsb. Dengan pengabungan diatas di pastikan class object XMLHttpRequest akan terbentuk dan function akan mengembalikan class object yang telah berhasil dibuat (kecuali ada ada browser baru Untuk view example demo click disini Setelah object XMLHttpRequest terbentuk selanjutnya kita dapa menanfaatkan object tersebut untuk berkomunikasi dengan server, berikut contoh pemanfaatan class object XMLHttpRequest untuk meminta content data dari server. Untuk merequest data dari server pada contoh berikut di gunakan functionrequestContent yang akan di panggil saat sebuah link di click, detail script function yang digunakan seperti berikut : function requestContent(){ oRequest = createRequest(); var url = "dataLoad.html"; // Buka komunikasi dengan server oRequest.open("GET", url, true); // menunggu respon dari server // jika sudah di dapat respon dari server, maka hasil respon akan di tampilkan pada DIV dengan ID="divContent" oRequest.onreadystatechange = function () { .

document.getElementById("divContent").innerHTML=" Menunggu Respon server

";

if (oRequest.readyState == 4) { // baca data respon dari server var response = oRequest.responseText; document.getElementById("divContent").innerHTML = response; } }

oRequest.send(null); } Function diatas pertama kali akan membuat class object XMLHttpRequest dengan memanfaatkan function createRequest() yang ada sebelumnya, hasil pembuatan object akan di tampung kedalam variabel object oRequest. setelah object XMLHttpRequest terbentuk, berikut akan dilakukan komunikasi dengan request dengan server untuk meminta data dari file dataLoad.html dengan GET method. Sintaks open request sebagai berikut : oXML.open(, , );

o o o o o

methode : POST atau GET url_file : lokasi URL file yang akan di request async_status : TRUE atau FALSE catatan Asynchronous status: Status TRUE : Javascript akan melanjutkan proses secara normal sementara menunggu respon dari server diterima Status FALSE: akan menunggu hingga respon dari server, selama respon belum di dapat proses yang ada berikutnya akan di hold hingga respon dari server di terima. Setelah melakukan request kepada server function akan menunggu respon dari server oRequest.onreadystatechange selama menggu respon dari server, bagian script berikut pd function akan dijalankan document.getElementById("divContent").innerHTML=" Menunggu Respon server

"; if (oRequest.readyState == 4) { // baca data respon dari server var response = oRequest.responseText; document.getElementById("divContent").innerHTML = response; } } ReadyState status: 0: uninitialized > Open status belum dijalankan 1: loading > Status request belum di jalankan 2: loaded > Status request sudah di kirimkan, dan menunggu respon dari server. 3: interactive > Respon dari server sedang dalam proses download. 4: completed > Respon data dari server telah selesai di download. Function akan menunggu hingga status respon dari server oRequest.readyState == 4, nilai 4 tersebut berarti respon telah selesai diberikan oleh server, setelah respon selesai di kirimkan hasil respon di tampung kedalam variabel bernamaresponse, proses menampung data respon ini mengunakan sintaks berikut : var response = oRequest.responseText;

Dan selanjutnya data hasil respon di tampilkan pada div dengan namadivcontent yang telah di persiapkan sebelumnya, untuk menampilkan hasil respon ini mengunakan bantuan DOM (document object model) berikut : document.getElementById("divContent").innerHTML = response; Untuk view example demo click disini Sampai disini baru terlihat pemanfaatan Javascript dalam mengunakan object XMLHttpRequest saja, data yang di berikan oleh server masih berupa file content statis dan belum memanfaatkan XML data respon.

Mendeteksi event keystroke pada textbox dengan menggunakan Ajax

Dec 21 2007
Ditulis oleh Dhimas Ronggobramantyo Kategori: Ajax Dibaca 10276 kali

Langsung lihat komentar

Judulnya mungkin agak aneh, karena saya sendiri bingung apa judul yang cocok. Jadi jika anda memiliki form pendaftaran pada suatu website dan terdapat field username atau email yang tentu saja isinya tidak boleh sama dengan yang sudah terdaftar. Nah kita melakukan pengecekan username secara langsung pada saat form masih diisi dengan menggunakan Ajax. Untuk gampangnya silahkan anda lihat apa yang akan kita buat disini.

Oke, anda sudah lihat yang akan kita buat kan? Sebelumnya pastikan anda paham mengenaidasar-dasar Ajax terlebih dahulu. Teknik mengetahui apakah username sudah terdaftar apa belum dengan mengugnakan Ajax akan mempermudah pengunjung yang ingin mendaftar di website anda. Kita memanfaatkan atribut javascript onkeyup pada textbox untuk memanggil fungsi Javascriptnya. Oh iya kita memerlukan PHP untuk melakukan

pengecekan apakah username sudah terdaftar apa belum.

Form Pendaftaran

Pertama-tama kita buat form pendaftarannya terlebih dahulu. Dan didalam tersebut kita pasang fungsi Ajaxnya. Oke sekarang cobalah kode berikut dan simpan dengan nama formajax.html:

<html> <head> <script language="javascript"> var XMLHTTPRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp"); } function getusername(dataSource) { if (XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { if (XMLHttpRequestObject.responseText == "terdaftar") { var target = document.getElementById("target"); target.innerHTML = "<div>Maaf, username <b>"+input.value+"</b> sudah dipakai, silahkan pilih yang lain.</div>"; } else { var target = document.getElementById("target"); target.innerHTML = "<div>OK</div>"; } } } XMLHttpRequestObject.send(null); } } function cekusername(keyEvent) { keyEvent = (keyEvent) ? keyEvent: window.event; input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement; if (keyEvent.type == "keyup") { var target = document.getElementById("target"); target.innerHTML = "<div></div>";

if (input.value) { getusername("cekusername.php?qu=" + input.value); } } } </script> </head> <body> <h4>Silahkan isi Username "dhimas" dan cobalah isi dengan username lainnya</h4> <form> Username: <input type="text" name="username" onkeyup ="cekusername(event)" /><Br /> <div id="target"><div> </form> </body> </html>

Sekarang saya akan jelaskan terlebih dahulu mengenai formajax.html. Pertama-tama pada awal script kita memiliki:

var XMLHTTPRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp"); }

Itu merupakan fungsi dasar Ajax untuk membuat XMLHttpRequest. saya sudarh pernah menerangkan hal ini pada artikel saya mengenai dasar-dasar Ajax. Jadi anda baca lagi, saya tidak akan menerangkannya lagi. Setelah itu terdapat fungsi function getusername(dataSource) Nah fungsi ini

untuk mengambil hasil dari file PHP kita dan menampilkannya di dalam div yang kita inginkan. Fungsi ini dipanggil belakangan karena itu nanti saja akan saya terangkan. Kemudian kita memiliki fungsi function cekusername(keyEvent) , nah ini merupakan fungsi untuk mengecek event kita pada

form tersebut.

Pada form dibagian bawah kita memanggil fungsi tersebut melalui atribut onkeyup ="cekusername(event)" . Ini berarti ketika kita menulis sesuatu di field Username, ketika tombol terangkat maka fungsi cekusername(event) dijalankan. Nah pada fungsicekusername(event) terdapat kode input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement; , ini berarti kita membuat variabelinput yang isinya adalah text yang sudah kita masukkan. Setelah itu kita cek jika tombol terangkat (dengan kode if

(keyEvent.type == "keyup") {) maka kita panggil fungsigetusername("cekusername.php?qu=" + input.value); . Yang

berarti kita memanggil fungsi getusername dengan mengirimkan file php yang akan kita panggil untuk melakukan pengecekan. Nah sekarang kita buat

file phpnya dulu. Buatlah file php dengan nama cekusername.php dan isilah dengan kode berikut ini:

<? $username=$_GET["qu"]; if ($username=="dhimas"){ echo "terdaftar"; } else { echo "ok"; } ?>

Pada fungsi getusername kita menyimpan file PHP kita kedalam variabel datasource dan kita memanggil file PHP kita dengan kode XMLHttpRequestObject.open("GET", dataSource); . Didalam file PHP kita melakukan pengecekan sederhana apakah variabel quisinya dhimas. Jika ya kita tampilkan text "terdaftar" jika tidak kita tampilkan text "ok".

Misal kita akan menulis "dhimas". Maka ketika kita baru mengetik huruf "d", maka semua fungsi dijalankan dan XMLHttpRequestObject.open("GET", dataSource); memanggil file cekusername.php dengan isi cekusername.php?qu=d, kemudian di cek di PHP dan karena "d" tidak sama dengan "dhimas" maka hasilnya adalah teks "ok". Kemudian baru kita cek if

(XMLHttpRequestObject.responseText == "terdaftar") yang berarti jika teks yang ditampilkan "terdaftar" maka kita akan tampilkan
pesan bahwa username dhimas sudah terdaftar didalam div yang memiliki id target.

Karena teks yang ditampilkan adalah "ok" maka yang dijalankan adalah kode berikutnya yaitu menampilkan teks "OK" didalam div yang memiliki id target. Kemudian kita meneruskan mengetik "h", proses tersebut kemudian diulangi kembali, hingga kita mengetik "dhimas" yang didalam kode PHP menghasilkan teks "terdaftar"

Anda bisa bayangkan betapa berat proses yang dijalankan. Pada praktek sesungguhnya, didalam file PHP nya anda melakukan pengecekan ke database mysql apakah username yang diketikkan sudah ada di database atau belum. Bagaimana pusing? tentu saja, karena Ajax memang rumit.
Jika anda membuat aplikasi pendaftaran registrasi yang sesungguhnya, anda tetap harus melakukan pengecekan username menggunakan pemrograman server seperti PHP, ASP dll. Baru jika anda sudah membuatnya anda bisa tambahkan pemanis dengan membuat pengecekan tambahan menggunakan Ajax. Gunakan Ajax hanya sebagai pelengkap.

Silahkan dicoba dan alangkah baiknya sebelum mencoba anda mengerti dasar-dasarnya dulu, karena 90% kode diatas merupakan dasar dari Ajax. Jika anda pusing istirahat dulu sebentar, kemudian coba lagi pelan-pelan karena Ajax bukan sesuatu yang mudah untuk dipelajari.

Submit Form Dengan Ajax Menggunakan jQuery

Posted on 17:05 in PHP, Tutorial, ajax, jQuery | 80,038 views | 208 Comments Kalau sebelumnya saya sudah menulis tentang cara menampilkan halaman menggunakan Ajax (menggunakan fungsiload() pada jQuery), maka kali ini adalah contoh penggunaan Ajax untuk mengirimkan data dalam sebuah form dan memprosesnya. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses. Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya. Script pada file ajaxform.html nya adalah sbb:

1 $(document).ready(function() { 2 $().ajaxStart(function() { 3 4 $('#loading').show(); 5 $('#result').hide(); }).ajaxStop(function() { 6 7 $('#loading').hide(); 8 $('#result').fadeIn('slow'); 9 }); 10 $('#myForm').submit(function() { 11 12 $.ajax({ 13 type: 'POST', url: $(this).attr('action'), 14 data: $(this).serialize(), 15 success: function(data) { 16 17 $('#result').html(data); 18 } 19 }) return false; 20 21 }); 22 })
Untuk mengimplementasikan Ajax, pada file form.html ini saya menggunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya sbb:

type: jenis request yang dipakai, bisa POST atau GET url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb
menggunakan $(this).attr('action')

data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize() success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file
proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id="result" ) Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<?php //validasi if (trim($_POST['nim']) == '') { $error[] = '- NIM harus diisi'; } if (trim($_POST['nama']) == '') { $error[] = '- Nama harus diisi'; } if (trim($_POST['tempat_lahir']) == '') { $error[] = '- Tempat Lahir harus diisi'; } //dan seterusnya if (isset($error)) echo } else { /* jika maka */ { '<b>Error</b>: <br />'.implode('<br />', $error); data mau dimasukkan ke database, perintah SQL INSERT bisa ditulis di sini

$data = ''; foreach ($_POST as $k => $v) { $data .= "$k : $v<br />"; } echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>'; echo '<br />'; echo $data; } die(); ?>

Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html

Shoutbox Sederhana Berbasis Ajax

Posted on 10:34 in PHP, Tutorial, ajax, jQuery | 33,165 views | 69 Comments Ini adalah contoh cara mengimplementasikan tutorial Form Ajax Menggunakan jQuery untuk membuat sebuah shoutbox sederhana. Setidaknya contoh ini bisa lebih berguna daripada hanya sekedar menampilkan data yang barusan disubmit, seperti pada contoh tutorial tersebut. Data yang disubmit dari form akan dimasukkan ke dalam database MySQL. Untuk itu perlu dibuat database dan tabelnya. Cukup 1 buah tabel saja supaya simple. Rancangan tabelnya seperti ini:

1 CREATE TABLE `shoutbox` ( `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, 2 `name` varchar(47) NOT NULL, 3 `url` varchar(151) NOT NULL, 4 `message` varchar(254) NOT NULL, 5 `tanggal` datetime NOT NULL, 6 `ip` varchar(31) NOT NULL, 7 PRIMARY KEY (`id`) 8 9 ) ENGINE=MyISAM;
Proses pada form shoutbox ini sama seperti tutorial form sebelumnya, hanya saja di sini ada penambahan query INSERT ke database, dan setelah data berhasil disimpan ada query SELECT untuk menampilkan data. Demo shoutbox ini bisa anda lihat di sini.

PHP AJAX jQuery

Nov 12, 2010 oleh Ellyx Christian | 5257 kali dibaca sejak Dec 26, 2010 |

Level: Menengah Tutorial PHP AJAX jQuery ini merupakan versi kedua dari Tutorial AJAX JQuery. Tutorial kedua ini dibuat karena ada banyak yang tidak mengerti dengan tutorial versi pertama. Sebelum mengikuti tutorial ini silahkan download jQuery di jQuery.com. Seperti dijelaskan sebelumnya di Tutorial AJAX JQuery. AJAX memerlukan XMLHttpRequest Object untuk dapat me-request sebuah halaman web secara Asynchronous. Untuk membentuk object XMLHttpRequest dijelaskan di Tutorial Dasar Dasar Ajax. Dengan adanya jQuery anda tidak perlu lagi memikirkan kode javascript untuk membentuk object XMLHttpRequest. jQuery akan membuatkannya untuk anda. Sebelum mulai menggunakan jQuery AJAX anda perlu tahu sedikit tentang jQuery Selector.

jQuery Selector
Ada beberapa jQuery selector yang akan digunakan ditutorial ini. Selector ID. contoh: $("#nama"), setara dengan document.getElementById('nama'), untuk memilih element html dengan id="nama". Selector Class. contoh: $(".red"), pengganti document.getElementsByClassName('red'), untuk memilih semua element dengan class="red". Selector Element. contoh: $("div"), setara dengan document.getElementsByTagName('div'), untuk memilih semua element div. Untuk lebih jelas silahkan kunjungi dokumentasi jQuery.

Menyimpan Data ke Database dengan jQuery AJAX

Misalkan anda memiliki sebuah database dengan nama 'example', dengan sebuah tabel 'pegawai' dengan struktur seperti berikut:

untuk menyimpan data pegawai ke table di atas tentunya anda memerlukan sebuah html form seperti:

view plaincopy to clipboardprint

TryIt?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

<form name="form1" id="form1" action="" method="post"> <p>NIP: <input type="text" name="nip" id="nip"/></p> <p>Nama: <input type="text" name="nama" id="nama"/></p> <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin"> <option value="L">Laki Laki</option> <option value="P">Perempuan</option> </select></p> <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p> <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p> <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p> </form>

tanpa menggunakan jQuery anda akan membutuhkan kode javascript panjang berikut.

view plaincopy to clipboardprint

TryIt?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.

<form name="form1" id="form1" action="" method="post"> <p>NIP: <input type="text" name="nip" id="nip"/></p> <p>Nama: <input type="text" name="nama" id="nama"/></p> <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin"> <option value="L">Laki Laki</option> <option value="P">Perempuan</option> </select></p> <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p> <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p> <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p> </form> <div id="loading"></div> <script type="text/javascript"> function getXMLHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else {alert("Status : can not create XMLHttpRequest Object");} }

21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41.

function simpanPegawai(){ var xmlhttp = getXMLHttpRequest(); /*simpan.php adalah file php yang meng-handle proses menyimpan data*/ xmlhttp.open('POST', 'simpan.php', true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); document.getElementById('loading').innerHTML = 'loading...'; xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ document.getElementById('loading').innerHTML = xmlhttp.responseText; } } } var data = 'nip='+document.getElementById('nip').value; data += '&namanama='+document.getElementById('nama').value; data += '&jenis_kelaminjenis_kelamin='+document.getElementById('jenis_kelamin').value; data += '&tgl_lahirtgl_lahir='+document.getElementById('tgl_lahir').value; data += '&alamatalamat='+document.getElementById('alamat').value; xmlhttp.send(data); } </script>

dan tentunya file simpan.php untuk menyimpan data ke database.

view plaincopy to clipboardprint

TryIt?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

<?php /*file simpan.php*/ mysql_connect("localhost", "user", "password"); mysql_select_db("example"); mysql_query("insert into pegawai set nip='".$_POST['nip']."', nama='".$_POST['nama']."', jenis_kelamin='".$_POST['jenis_kelamin']."', tgl_lahir='".$_POST['tgl_lahir']."', alamat='".$_POST['alamat']."'"); echo 'Data telah disimpan'; ?>

sekarang coba bandingkan dengan menggunakan jQuery.

view plaincopy to clipboardprint

TryIt?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.

<form name="form1" id="form1" action="" method="post"> <p>NIP: <input type="text" name="nip" id="nip"/></p> <p>Nama: <input type="text" name="nama" id="nama"/></p> <p>Jenis Kelamin: <select name="jenis_kelamin" id="jenis_kelamin"> <option value="L">Laki Laki</option> <option value="P">Perempuan</option> </select></p> <p>Tanggal Lahir: <input type="text" name="tgl_lahir" id="tgl_lahir"/></p> <p>Alamat: <textarea name="alamat" id="alamat"></textarea></p> <p><input type="button" value="Save" onclick="simpanPegawai(); return false;"/></p> </form> <div id="loading"></div> <!-- sesuaikan dengan file jquery yang anda download --> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> function simpanPegawai(){ $("#loading").html('loading...'); $.post('simpan.php', $("form").serialize(), function(hasil){ $("#loading").html(hasil); }); } </script>

bisa dilihat perbedaan yang signifikan, tanpa jQuery membutuhkan 28 baris (13-14) kode javascript, sedangkan dengan jQuery hanya dibutuhkan 9 baris (14-22) kode javascript. Dibaris 14 ditambahkan library jQuery, kemudian di function savePegawai() baris ke-17 untuk menampilkan kata 'loading...' kepada user. Baris 18-20 adalah pengganti baris 24-39 kode sebelumnya yang tanpa jQuery. function jQuery $.post (bisa juga dengan jQuery.post) memiliki 3 parameter $.post(url,data,callback_function); url: diisi dengan url yang direquest, dalam hal ini adalah file simpan.php; data: diisi dengan data yang dikirim ke server, kode di atas menggunakan function jQuery.serialize() untuk mengisi parameter ini. Function jQuery.serialize() mengkodekan (Encode) semua element form beserta value masing masing menjadi sebuah string data untuk dikirim ke server; callback_function: diisi dengan function yang dipanggil setelah proses request selesai.

Menampilkan Data dengan jQuery AJAX

Untuk menampilkan data, pertama yang harus dibuat adalah file php untuk membaca data dari database. Misalnya seperti kode php di bawah.

view plaincopy to clipboardprint

TryIt?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

<?php /*file tampil.php*/ mysql_connect("localhost", "user", "password"); mysql_select_db("example"); ?> <table> <tr> <td>NIP</td> <td>Nama</td> <td>Jenis kelamin</td>

11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26.

<td>TGL Lahir</td> <td>Alamat</td> </tr> <?php $query = mysql_query("select * from pegawai"); while($pegawai = mysql_fetch_array($query)){ echo '<tr>'; echo '<td>'.$pegawai['nip'].'</td>'; echo '<td>'.$pegawai['nama'].'</td>'; echo '<td>'.$pegawai['jenis_kelamin'].'</td>'; echo '<td>'.$pegawai['tgl_lahir'].'</td>'; echo '<td>'.$pegawai['alamat'].'</td>'; echo '</tr>'; } ?> </table>

Selanjutnya adalah menggunakan AJAX untuk request file tampil.php di atas. Tanpa jQuery anda akan membuat kode javascript seperti:

view plaincopy to clipboardprint

TryIt?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24.

<a href="javascript:loadData()">Load Data</a> <div id="pegawai"></div> <script type="text/javascript"> function getXMLHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else {alert("Status : can not create XMLHttpRequest Object");} } function loadData(){ var xmlhttp = getXMLHttpRequest(); document.getElementById('pegawai').innerHTML = 'loading...'; xmlhttp.open('GET', 'tampil.php', true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ document.getElementById('pegawai').innerHTML = xmlhttp.responseText; } } } xmlhttp.send(null); } </script>

Sedangkan dengan menggunakan jQuery anda hanya membutuhkan kode javascript singkat di bawah:

view plaincopy to clipboardprint

TryIt?

1. 2. 3. 4. 5. 6. 7. 8. 9.

<a href="javascript:loadData()">Load Data</a> <div id="pegawai"></div> <!-- sesuaikan dengan file jquery yang anda download --> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> function loadData(){ $("#pegawai").load('tampil.php'); } </script>

Bisa dilihat perbedaan yang sangat siginifikan antara menampilkan data dengan jQuery AJAX dibandingkan dengan tanpa jQuery. Tanpa jQuery membutuhkan 22 baris (3-24) kode javascript, sedangkan dengan jQuery hanya dibutuhkan 6 baris. Untuk menampilkan data dengan jQuery AJAX, digunakan function jQuery.load(); function jQuery.load() memiliki dua parameter: .load(url, [callback_function]); url: diisi dengan url yang ingin direquest, dalam hal ini adalah file tampil.php; callback_function: function yang dipanggil setelah proses selesai, parameter ini optional, bisa tidak diisi. function ini setara dengan function jQuery.get().

Rangkuman
Dengan jQuery hanya dibutuhkan menulis sedikit kode javascript, sesuai dengan slogan jQuery "write less, do more". jQuery menyediakan library library AJAX yang selengkapnya bisa dilihat di http://api.jquery.com/category/ajax/. Untuk menyimpan data ke database (lebih umum mengirim data server) dengan AJAX digunakan function jQuery.post(). Untuk menampilkan data (merequest data dari server/melakukan http request get) dengan AJAX digunakan function jQuery.load() atau jQuery.get().

Referensi

http://jquery.com/ Dokumentasi jQuery Dokumentasi jQuery AJAX