Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Aplikasi AJAX Dengan JQuery

Diunggah oleh

Reza Wiguna
28 tayangan5 halaman
contoh ajax

Hak Cipta

© Attribution Non-Commercial (BY-NC)

Format Tersedia

DOCX, PDF, TXT atau baca online dari Scribd

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini
contoh ajax

Hak Cipta:

Attribution Non-Commercial (BY-NC)
Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
28 tayangan5 halaman

Aplikasi AJAX Dengan JQuery

Diunggah oleh

Reza Wiguna
contoh ajax

Hak Cipta:

Attribution Non-Commercial (BY-NC)
Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
dari 5

Aplikasi AJAX Dengan JQuery

Boleh dibilang saat ini hampir semua aplikasi berbasis web dikembangkan dengan teknologi AJAX. Google Docs adalah salah satu contohnya. Kalau kita lihat, sepintas tampilan interface-nya mirip sekali dengan aplikasi desktop. Kecepatannya dalam merespon permintaan data dari user pun cukup lumayan, tidak kalah bila dibandingkan dengan aplikasi desktop pada umumnya. Itu semua bisa terjadi berkat adanya teknologi AJAX. Nah, pada artikel kali ini saya ingin sekali membahas secara lebih detail betapa mudahnya mengembangkan aplikasi web yang dilengkapi dengan fitur AJAX didalamnya menggunakan framework JQuery. Apa Sih Sebenarnya AJAX Itu? Istilah AJAX pertama kali dikemukakan oleh Jesse James Garrett dalam artikelnya yang berjudul AJAX: A New Approach to Web Applications. Dalam artikel tersebut ia mengatakan bahwa AJAX sebenarnya bukanlah teknologi pemrograman web yang berdiri sendiri tetapi kombinasi dari beberapa teknologi web yang sudah lebih dulu populer, yaitu XHTML/CSS, Document Object Model (DOM), XMLHttpRequest, dan JavaScript. Pada tulisan ini saya tidak akan menguraikan lebih lanjut apa yang dimaksud dengan AJAX tersebut. Jika Anda ingin mengetahui lebih dalam silakan baca artikel aslinya pada alamat URL berikut. Apa Itu JQuery? Barangkali Anda belum pernah mendengar istilah JQuery sebelumnya. JQuery adalah framework JavaScript yang menyediakan berbagai fungsi yang berguna untuk memudahkan pengembangan aplikasi berbasis web dengan teknologi AJAX. JQuery bisa didownload secara gratis dari situs berikut ini. JQuery merupakan salah satu library JavaScript yang cukup populer dan dipakai oleh banyak sekali situs Internet, seperti Google, Amazon, Microsoft, Twitter, Best Buy dan masih banyak lagi situs yang lainnya. Disamping itu berbagai proyek open source pun banyak yang memakai library ini, misalnya saja WordPress, DotNetNuke, Drupal, Trac dan TextPattern. Selain JQuery masih banyak library JavaScript lainnya, yaitu misalnya Prototype, Scriptaculous, Mootools, Google Web Toolkit, Yahoo User Interface dan sebagainya.

Sebelum mempelajari lebih jauh tentang JQuery ini, ada baiknya jika Anda memahami terlebih dahulu beberapa teknik dasar pemrograman JavaScript. Kita tidak akan membahas materi tersebut di artikel ini, namun jika Anda belum paham JavaScript Anda bisa mempelajari tutorial menarik pada URL berikut ini. Aplikasi Pertama Pada contoh yang pertama ini saya ingin menunjukkan betapa mudahnya memanipulasi tampilan halaman HTML dengan JQuery. Kita akan menyisipkan teks pada halaman web dan mengubah warna hurufnya. Dengan JQuery kita bisa melakukan hal tersebut dengan satu baris kode saja, yaitu sebagai berikut: $("div.content").append("Halo, apa kabar").css("color", "red"); Berikut ini kode lengkap dari aplikasi web tersebut. <html> <head> <title>Aplikasi Pertama</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div.content").append("Halo, apa kabar").css("color", "red"); }); </script> </head> <body> <div class="content"></div> </body> </html>

Sebelum mempraktekkan contoh pada tulisan ini, Anda harus mendownload JQuery terlebih dahulu. Pada contoh ini teks Halo, apa kabar akan disisipkan pada dokumen web pada saat loading

selesai. Berikutnya warna font-nya diubah menjadi merah. Sangat mudah, karena tujuan JQuery memang untuk menyederhanakan penulisan kode JavaScript. Pada JQuery kita menggunakan fungsi $() untuk menentukan elemen pada dokumen web yang akan kita manipulasi. Fungsi ini mempunyai kegunaan yang sama seperti document.getElementById(). Hanya saja pada fungsi $() selain ID kita juga bisa menggunakan beberapa selektor CSS dan XPath lainnya. Untuk menghindari agar kode JavaScript tidak dieksekusi secara langsung pada saat proses rendering HTML, maka kita perlu menyisipkan kode jQuery tersebut pada blok fungsi $(document).ready(). Dengan cara ini kode jQuery yang kita buat akan dieksekusi setelah loading halaman web selesai. Aplikasi Kedua Pada contoh aplikasi pertama di atas kita hanya memanipulasi sedikit tampilan HTML saja, dan itu sebenarnya belum bisa dikatakan sebagai aplikasi AJAX karena tidak ada request AJAX di dalamnya. Nah, untuk aplikasi kedua ini kita akan mencoba menyisipkan request AJAX pada aplikasi yang akan kita buat. Kita akan membuat sebuah aplikasi sederhana yang berguna untuk mengambil data secara acak dari server. Ada dua tipe kode program yang harus kita buat yaitu Client Side Code (HTML dan jQuery) dan Server Side Code (PHP). 1. Client Side Code (HTML dan jQuery) Kita mulai dengan membuat tampilan front-end yang berisi kode HTML dan jQuery. Pada sisi client inilah kita akan menuliskan kode HTML dan jQuery untuk melakukan request data ke server dan mengupdate tampilan front-end sesuai dengan data yang diterima. Berikut ini isi dari elemen body pada tampilan front-end kita buat. <input type="submit" value="Update" id="update" /> <div id="content"></div> Pada aplikasi ini kita akan menempatkan data yang kita terima dari server pada sebuah elemen DIV dengan ID content. Sedangkan untuk melakukan request data ke server kita akan menggunakan event onClick pada button Update. Dengan jQuery kita bisa menuliskan kode tersebut sebagai berikut:

$("#update").click(function(e){ $("#content").load("data.php"); e.preventDefault(); }); Fungsi load() merupakan salah satu fungsi pada jQuery yang berguna untuk meminta data dari server dengan mode AJAX. Harap diperhatikan bahwa setiap elemen dengan atribut ID harus diawali dengan tanda #. Pada kasus di atas yaitu #update dan #content. Kode lengkap dari tampilan front-end ini adalah sebagai berikut: <html> <head> <title>Aplikasi Kedua</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#update").click(function(e){ $("#content").load("data.php"); e.preventDefault(); }); }); </script> </head> <body> <input type="submit" value="Update" id="update" /> <div id="content"></div> </body> </html>

2. Server Side Code (PHP) Kode pada sisi server berfungsi untuk memberikan respon atas permintaan client yang dikirimkan melalui jQuery tadi. Ada beberapa tipe data yang bisa diberikan kepada client sebagai tanggapan, yaitu teks, HTML, XML atau kode script (JSON). Pada contoh ini kita akan menggunakan data teks. Berikut ini kode pada sisi server (data.php): <?php header("Cache-Control: no-cache"); $data = array("Indonesia", "Singapura", "Malaysia", "Thailand", "Filipina", "Jepang", "Korea Selatan", "Hongkong", "Myanmar", "India", "Kamboja", "Pakistan", "Bangladesh"); echo 'Negara di Asia: ' . $data[rand(0, count($data)-1)]; ?>

Anda mungkin juga menyukai