Skip to content
Follow us on Twitter or subscribe to this
website by email or with the RSS feed
You are here: Home » Programming » Teknik Dasar AJAX Dengan Mootools

Teknik Dasar AJAX Dengan Mootools

Oleh: Wahyu Wibowo |
May 29th, 2009 |
6 Comments »

Bagi Anda yang sering membuat aplikasi web, tentu tak asing lagi dengan library Yahoo User Interface (YUI) dan Google Web Toolkit (GWT). Keduanya merupakan framework yang cukup populer. Selain kedua framework tersebut, masih banyak framework AJAX lain yang bisa Anda temukan di Internet. Salah satunya yang akan dibahas di sini yaitu Mootools.

Sama seperti YUI dan GWT, Mootools ini juga framework AJAX yang berorientasi obyek, hanya saja lebih sederhana sintaksnya dan ukuran file library-nya lebih kecil. Joomla adalah contoh software open source yang menggunakan Mootools ini.

Library Mootools bisa didownload secara gratis dari situs berikut ini. Versi terakhir saat tulisan ini dibuat adalah versi 1.2.1.

Dasar-dasar Mootools

Pada umumnya JavaScript dipakai untuk menjalankan sesuatu ketika sebuah kejadian (event) terjadi misalnya saat tombol diklik, form disubmit, checkbox diklik dan sebagainya.

Contohnya adalah sebagai berikut.

<html>
<head>
   <script>
   function clickMe()
   {
      alert('Terima kasih, Anda telah mengklik link ini');
   }
   </script>
</head>
<body>
<a href="#" onclick="clickMe()">Klik di sini</a>
</body>
</html>

Jika dieksekusi dan link tersebut diklik, fungsi clickMe akan dijalankan dan akan muncul sebuah kotak kecil. Dengan Mootools, Anda bisa membuat fungsi yang serupa namun dengan struktur yang lebih terorganisir.

<html>
<head>
   <script src="mootools.js"></script>
   <script>
   window.addEvent('domready', function () {
      $('clickMe').addEvent('click', function(e){
         e.stop();
         alert('Terima kasih, Anda telah mengklik link ini');
      });
   });
   </script>
</head>
<body>
   <a href="#" id="clickMe"">Klik di sini</a>
</body>
</html>

Mungkin Anda penasaran, apa bedanya dengan skrip yang pertama? Jika dijalankan hasilnya sama seperti skrip sebelumnya.

Mootools mempunyai sebuah event khusus yang dinamakan domready. Event ini berfungsi untuk menangani kejadian ketika Document Object Model (DOM) diakses.

Nah, di dalam domready inilah Anda bisa menuliskan fungsi-fungsi lain untuk menangani event tertentu seperti klik, submit, drag-drop dan sebagainya.

Untuk menangkap event yang dihasilkan oleh suatu object HTML, Anda bisa menggunakan fungsi dollar ($) dengan parameter berupa ID object tersebut. Dalam contoh di atas yaitu $(‘clickMe’).

(bersambung)

Post to Twitter Tweet This Post to Delicious Delicious Post to Digg Digg This Post to Facebook Facebook Post to MySpace MySpace Post to StumbleUpon Stumble This

Artikel Terkait:

POST BANNER

Bagaimana Komentar Anda?

Monggo kalau Anda mau mengomentari tulisan di atas! Bertanya atau mengkritik juga boleh, tapi jangan terlalu menyakitkan :).

  • Rosalina | June 23rd, 2009 jam 5:38 pm

    Maaf, mau tanya gimana yah cara memulai menggunakan mootools?? saya mau ambil skripsi tentang mootools, tpai bingung bagian mana yg mau dibahas?? Fungsi-fungsinyakah?? thx b4 (bisa bales ke email aja ga yah??)

  • Wahyu Wibowo | June 23rd, 2009 jam 9:46 pm

    Konsultasikan saja dengan dosen pembimbingnya, jangan dengan saya. Saya juga bingung mau jawab apa nih mbak… :-)

  • Rosalina | June 25th, 2009 jam 3:14 pm

    Wakakkakaka, dosennya juga keliatannya masih bingung neh mas :)

  • Wahyu Wibowo | June 25th, 2009 jam 6:44 pm

    Wah kompak kalau gitu. Kata orang tua dulu, kalau bingung jongkok saja… :-)

  • hendra | July 22nd, 2009 jam 9:34 am

    Makasih banget artikelnya. sangat membantu..di tunggu loh, artikel laennya ttg Mootools ;)

  • Stiksa Eureka | August 10th, 2009 jam 5:46 am

    kalo buat skripsi bagusnya ambil contoh kasus, misalnya penngunaan ajax pada facebook. Yakin para dosen pembimbing dan penguji bakal tertarik

Tinggalkan Pesan