Kamis, Juli 24, 2008

var Prototype.js ={efek : 'Javascript Semakin Mudah!'}

Dengan semakin booming-nya (baca: Meledak) Web 2.0, saat ini banyak sekali bermunculan library-library Javascript yang menawarkan kemudahan untuk DHTML dan AJAX seperti JQuery, Prototype, Script.acu.lo.us, openRico, Dojo dan masih banyak lagi yang lainnya. Ketika saya mulai mengembangkan Senayan, aplikasi berbasis web untuk automasi perpustakaan, saya mulai mendalami lagi Javascript dan salah satu library Javascript yang bikin saya "kepincut" dan saya gunakan pada Senayan adalah Prototype yang dikembangkan pertama kali oleh Sam Stephenson.

Jujur saya tertarik pertama kali dengan Prototype karena kemudahan dalam pemrosesan request AJAX-nya. Yang kedua dan tidak kalah pentingnya adalah kemampuannya yang Cross-Browser, ga perlu repot-repot lagi kita nambahin logic untuk nge-cek browser yang ribet. Prototype compatible dengan hampir semua browser populer yang ada di muka bumi ini macam Mozilla Firefox, Opera, Konqueror, Safari, dan juga browser paling "menakjubkan" (baca: Suckss!) di muka bumi ini, Internet Explorer.

Dulu saya berpikir Javascript tu bahasa pemrograman paling "dodol" a.k.a "nyebelin" a.k.a "brengsek". Tetapi sejak munculnya library Prototype dan dukungan DOM serta AJAX pada semua browser sudah menjadi standar perlahan-lahan saya berubah pikiran, "Javascript Semakin Cakep dan Sangat Diperlukan untuk semakin membuat aplikasi web setara dengan aplikasi Desktop". Dengan adanyan Prototype hidup semakin mudah, pemrosesan DHTML yang Cross-Browser juga menjadi sangat mudah dilakukan. Kita bisa dengan mudah me-modifikasi style CSS pada suatu element secara interaktif lalu mengubah konten element tersebut secara interaktif dengan mudah hanya dengan menggunakan 1 baris kode!

Tentunya ga enak kalo saya sesumbar disini tapi ga ngasih contoh. Aturan utama untuk menggunakan Prototype adalah meng-include file library Prototype terlebih dahulu di halaman HTML kita (sangat disarankan di dalam tag HEAD).

<html><head>
<script type="text/javascript" src="libjs/prototype.js"></script>
</head>

Sekarang kita coba melakukan Request AJAX dengan menggunakan Prototype:

<div id="ajaxContainer">&nbsp;</div>
<script type="text/javascript">
// URL request AJAX yang kita ingin ambil datanya
var ajaxURL = 'ajax_response.php';
// lakukan request AJAX dengan membuat instance Ajax.Request
new Ajax.Request(url, { method: 'get',
  onSuccess: function(ajaxObject) {
    // ambil text hasil response AJAX
    var ajaxResponseText = ajaxObject.responseText;
    // Prototype memudahkan kita dalam mengupdate konten suatu element dengan method "update". Dibawah ini element <div> dengan id "ajaxContainer" akan diupdate konten-nya dengan hasil response AJAX
    var ajaxContainer = $('ajaxContainer').update(ajaxResponseText);
  },
  onFailure: function(ajaxObject) {
    alert('Terjadi Error pada Request AJAX ke URL : ' + ajaxURL);
  } 
});
</script>

Pada kode di atas apabila request AJAX berhasil dilakukan maka element <div> akan diisikan dengan text response AJAX, tetapi apabila request AJAX gagal dilakukan (onFailure), maka akan muncul alert yang memberitahu bahwa request AJAX gagal dilakukan. Sangat mudah bukan? Wow tapi nanti dulu!! masih ada yang lebih keren! bagaimana kalau kita mau hasil dari AJAX-nya bukan teks biasa tetapi hasilnya berupa HTML yang akan langsung kita include-kan di halaman web kita? Disinilah fungsi kelas Ajax.Updater akan sangat menolong hidup kita (ciaaa.. illaahh) :

<div id="ajaxContainer">&nbsp;</div>
<script type="text/javascript">
// URL untuk request AJAX
varajaxURL = "ajax_updater_response.php"
// parameter GET atau POST yang ingin kita sertakan pada request
var reqParams = "param1=Nilai+Param+1&param2=Nilai+Param+2"
// method pengiriman request, bisa GET, POST atau bahkan PUT
var reqMethod = 'post';
// ID element yang akan menampung HTML hasil response Ajax.Updater
var ajaxContainer = 'ajaxContainer';
// Buat instance Ajax.Updater
new Ajax.Updater(ajaxContainer, ajaxURL, {
  method: reqMethod, parameters: reqParams
});
</script>

Misalkan pada file "ajax_updater_response.php" mengandung kode PHP yang menghasilkan HTML seperti ini :

<?php
// pastikan bener-bener hasilnya HTML
header("Content-type: text/html");
$sql_q = $mysql->query("SELECT * FROM someSQLtable WHERE name LIKE '%".$mysql->escape_string($_POST['param1'])."%'
   LIMIT 100");
// loop data dan tampilkan dalam tabel HTML
echo '<table class="datalist">';
while ($sql_d = $sql_q->fetch_row()) {
    echo '<tr>';
    echo '<td>'.$sql_d[0].'</td>';
    echo '<td>'.$sql_d[1].'</td>';
    echo '<td>'.$sql_d[2].'</td>';
    echo '</tr>';

}
echo '</table>';
?>

Mantapp! Gampang bener yak!! Trus, trus bagaimana kalo gw mau hasil respons AJAX-nya berupa JSON biar gw bisa proses lagi rie? Yahhhhh itu mah gampang!! begini caranyan :

<div id="ajaxContainer">&nbsp;</div>
<script type="text/javascript">
// URL request AJAX yang kita ingin ambil datanya
var ajaxURL = 'ajax_response.php';
// lakukan request AJAX dengan membuat instance Ajax.Request
new Ajax.Request(url, { method: 'get',
  onSuccess: function(ajaxObject) {
    // ambil text hasil response AJAX dan strip space di kiri dan kanan string biar ga ganggu
    var ajaxResponseText = ajaxObject.responseText.strip();
    // Convert hasil response AJAX ke objek JSON dengan menggunakan method evalJSON() milik Prototype!
    var ajaxJSON = ajaxResponseText.evalJSON();
    // Proses object JSON anda di bawah ini
    ...
  },
  onFailure: function(ajaxObject) {
    alert('Terjadi Error pada Request AJAX ke URL : ' + ajaxURL);
  } 
});
</script>

Pada halaman response AJAX "ajax_response.php" mengandung kode seperti ini :

<?php
header("Content-type: text/javascript");
$sql_q = $mysql->query("SELECT * FROM someSQLtable WHERE name LIKE '%".$mysql->escape_string($_POST['param1'])."%'
   LIMIT 100");
// loop data dan simpan dalam Array
$array_rows = array();
while ($sql_d = $sql_q->fetch_row()) {
    $array_rows[] = $sql_d;
}
// encode ke dalam bentuk JSON
echo json_encode($array_rows);
?>

Oke segitu dulu deh posting saya mengenai AJAX di Prototype, insya ALLAH nanti akan saya bahas lebih lanjut lagi penggunaan Prototype untuk membuat dynamic AJAX drop-down yang populer itu. Silahkan anda mendownload dan coba menggunakan Prototype sekarang juga, "Javascript never been these easy!!".

4 komentar:

Aryo Satyo Ramadhani mengatakan...

thanks sharingnya ya

Saif mengatakan...

Oww thx
tp kalw di Bloger, Profil kta bisa pake JavaScript ga?
Klaw FS bisa ga?
cz temen gw ad yg kalw masuk kee Profile-nya ad tulisan "selamat datang"
stau gw itu pake JavaScript
n gw tanya langsung k dia.. n katanya seh pake JavaScript
tp dia g bsa ajarin k gw
cz dia dah pindah k Thailand!

ajarin gw!!

Ihsanul mengatakan...

dah nyoba JQuery mas? top markotoph dah.

chrisno mengatakan...

wah ..nice posting nie..
thanks scriptnya..:D

o iya jng lupa mampir kesini