Membangun Website Cantik Dengan Ajax dan JQuery

Kita tentu sudah biasa mengakses Google, Facebook, Youtube, Yahoo, WordPress, dan website-website terkemuka di dunia lainnya. Website-website tersebut akan terasa lebih interaktif, lebih sederhana tapi tetap cantik, dan familiar layaknya kita membuka aplikasi desktop atau windows. Ke-elegan-an website tersebut tentu didukung oleh suatu bahasa pemrograman website modern yang saat ini memang sedang berkembang dan semakin digunakan oleh website lainnya.  Bahasa pemrograman tersebut adalah AJAX dan lebih lanjut disederhanakan oleh JQuery. Apa itu AJAX dan apa itu JQuery?

Ajax singkatan dari Asynchronous Javascript And XML bukanlah suatu bahasa pemrograman baru yang berdiri sendiri seperti PHP, ASP, HTML dan lainnya. Tetapi lebih merupakan kolaborasi dari berbagai bahasa pemrograman yang sudah ada sejak dulu. Ajax merupakan kombinasi dari bahasa XHTML, CSS, XML, DOM , dan Javascript. Sehingga Ajax lebih merupakan strategi dan teknik dari pada bahasa program. Yaitu teknik loading data dari server dengan menggunakan kemampuan yang dimiliki oleh Javascript.  Bila kita membuat website dengan Ajax maka secara nalar, kita harus menguasai bahasa-bahasa pemrograman yang dibutuhkannya seperti disebut di atas. Walah… menguasai satu bahasa saja gak kelar apalagi menguasai sekian banyak bahasa pemrograman. Nanti dulu, mari kita lanjutkan perbincangan ini.

JQuery adalah suatu koleksi fungsi-fungsi yang siap pakai dari Javascript, sehingga meskipun kita tidak menguasai pemrograman JavaScript, kita bisa menggunakannya untuk aplikasi website dengan mudah, layaknya kita merakit komputer PC, semua spare part sudah disediakan oleh pabrik, kita tinggal merakit saja. Kode atau fungsi JQuery sudah disediakan dan kita tinggal download dari sumbernya di JQuery lalu menggunakannya sesuka hati, karena bersifat open source. JQuery akan memudahkan dan menyederhanakan kita dalam membangun website sistem Ajax seperti Facebook dan yang lainnya.

Apa saja yang perlu disiapkan untuk membuat website cantik dengan JQuery? Yang perlu disiapkan adalah  Mozilla Firefox sebagai browsernya karena yang paling kompatibel dengan JQuery ini, Webserver, kumpulan kode dari JQuery.

Download file jquery-1.4.js dan juga cari file main.css dari jquery.com  lalu tempatkan di dalam folder website kita atau jika di localhost sebagai latihan tempatkan file tersebut di folder tertentu misalnya folder jquery/

Bagaimana cara menggunakan JQuery?

Dalam latihan ini saya mengandaikan kita sudah biasa dengan oprak-oprek website, baik di localhost maupun di remote server dan kita sudah punya script yang running, akan lebih baik jika script tersebut dari MMG karena akan lebih mudah untuk latihan. Tapi kita juga bisa membuat satu halaman baru untuk latihan.

Buat file php dengan nama jamku.php, ketikkan di dalam file tesebut kode berikut ini:

<?PHP
/* MMG Malang Indonesia */

date_default_timezone_set("ASIA/JAKARTA");
$clock =date("H:i:s");
?>
<HTML>
<HEAD>
<link rel="stylesheet" href="jquery/main.css" type="text/css" />
<script src="jquery/jquery-1.4.js"></script>
<script>
 $(document).ready(function() {
 setInterval(function() {
 $('#divshow').load('jamku.php?acak='+ Math.random());
 }, 1000);
 });
</script>
</HEAD>
<BODY>
<div class="demo" style="width: 150px;" align="center">
<div id="divshow"><?PHP echo"$clock WIB"?></div>
</DIV>
</BODY
</HTML>
<?PHP
?>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: