Mempercantik Web Dengan AJAX dan Jquery Framework

(1)

Mempercantik Web

Dengan AJAX dan

Jquery Framework

By :

Departemen Ristek

Himpunan Mahasiswa Teknik Informatika

2010 - 2011

(2)

By Ristek Department 2010 - 2011

BAB 1

Mengenal AJAX dan JavaScript

Apa itu Ajax

Ajax (Asynchronous Javascript and XML) sesungguhnya bukanlah suatu bahasa

pemrograman, melainkan hanya suatu teknik yang memungkinkan untuk membuat

aplikasi web yang interaktif. Dengan menggunakan Ajax, aplikasi web dapat berinteraksi

dengan server di latar belakang sehingga tidak mempengaruhi halaman web secara

keseluruhan.

Apa yang bisa Dilakukan Ajax

Ajax memberikan pengaruh yang luar biasa dalam membangun sebuah aplikasi

web. Sebelum kehadiran ajax, kebanyakan aplikasi mengandalkan formulir untuk

berinteraksi dengan server. Pemakai harus mengklik suatu tombol Submit untuk

mengirim atau mendapatkan informasi dari server. Dengan menggunakan Ajax, berbagai

kejadian pada objek formulir dapat digunakan dengan untuk berinteraksi dengan server,

misalnya menvalidasi masukan pemakai terhadap isi database atau menampilkan data

sesuai dengan isi suatu kotak kombo.

(3)

By Ristek Department 2010 - 2011

Kelemahan Ajax

Tentunya tidak ada yang sempurna di dunia ini. Walaupun ajax menawarkan

keunggulan bila dibandingkan dengan aplikasi web tradisional. Namun, tetap saja ada

kelemahannya. Berikut ini adalah kelemahan atau masalah yang potensial yang sering

terjadi apabila kita menggunakan ajax.

1. Mesin pencari (search engine) bisa jadi tidak dapat mengindeks seluruh bagian

dalam halaman web.

2. Tombol Back pada browser menjadi tidak berfungsi.

3. Tidak semua browser mendukung Ajax.

4. Ajax menjadi tidak berfungsi kalau klien mematikan JavaScript

Apa itu JavaScript

JavaScript adalah bahasa skrip (bahasa yang kodenya ditulis menggunakan teks

biasa) yang ditempelkan pada dokumen HTML dan diproses pada sisi klien. Dengan

menggunakan JavaScript dimungkinkan untuk memvalidasi masukan – masukan pada

formulir sebelum formulir dikirim ke server. Selain itu, juga dimungkinkan untuk

mengimplementasikan tugas yang bersifat interaktif tanpa berhubungan dengan server.

Beberapa contoh yang bisa dilakukan melalui JavaScript :

1. Menampilkan jam lokal pada halaman web

2. Mengatur warna latar belakang halaman web

3. Mengganti gambar ketika pemakai menempatkan penunjuk mouse ke suatu

gambar

4. Memvalidasi keabsahan data yang dimasukkan oleh pemakai

5. Menandai semua data yang akan dihapus dengan cara memberi tanda centang

pada kotak cek. Hal seperti ini biasa disediakan pada pembaca email berbasis

web.

(4)

By Ristek Department 2010 - 2011

BAB 2

Pemrograman AJAX

Mengenal XMLHttpRequest

XMLHttpRequest merupakan object yang dirancang untuk memungkinkan

prmrogram melakukan permintaan HTTP dari suatu aplikasi. Objek XMLHttpRequest

inilah yang membuat JavaScript bisa meminta layanan ke server HTTP secara asinkron,

menerima tanggapan dari server, dan memperbaharui isi sebagian halaman web.

Pada Internet Explorer 6 dan sebelumnya, objek XMLHttpRequest dibentuk

melalui pernyataan :

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

Pada browser lain (misalnya Firefox dan Opera), objek XMLHttpRequest diciptakan

dengan cara seperti berikut :

xmlHttp = new XMLHttpRequest();

Agar skrip yang kita buat bisa berjalan pada berbagai jenis browser, kedua hal

tersebut harus ditangani. Hal itu bisa dilakukan dengan memanfaatkan pernyataan

try..catch.

Pernyataan try..catch mempunyai kaidah seperti berikut :

try

{

//kode yang bisa menghasilkan eksepsi(yang menimbulkan kesalahan)

}

catch(e)

{

//Kode yang akan dijalankan hanya kalau terjadi eksepsi pada bagian try

}

ajax1.html

<title>Mengenal Objek XMLHttpRequest</title> </head> <body> <script type="text/javascript"> var xmlHttp = null; try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { xmlHttp = new XMLHttpRequest(); }

(5)

By Ristek Department 2010 - 2011

catch(e) { } } //Cek isi xmlHttp if(xmlHttp == null)

document.write("Browser tidak mendukung XMLHttpRequest");

else

document.write("Browser mendukung XMLHttpRequest"); </script>

</body> </html>

Tampilan pada Firefox :

Mengenal Metode getElementById()

Metode ini berguna untuk mendapatkan sebuah elemen yang berada dalam

dokumen HTML. Metode ini mensyaratkan elemen yang dicari memiliki suatu ID.

myid.html

<title>Contoh Penggunaan ID</title> </head>

<body>

textJS: <input type="text" name="textJS" id="id_js" value="JavaScript" />

<br />

textPHP: <input type="text" name="textPHP" id="id_php" value="PHP" />

var obj = document.getElementById("id_js"); document.write("name = " + obj.name + "<br />"); document.write("id = " + obj.id + "<br />"); document.write("type = " + obj.type + "<br />"); document.write("value = " + obj.value + "<br />"); </script> </body> </html>

(6)

By Ristek Department 2010 - 2011

Mengenal Properti innerHTML

innerHTML merupakan properti milik objek DOM yang digunakan untuk

menampilkan teks yang berasal dari server. Penggunaannya :

objek.innerHTML = teks;

jam.html

<html> <head> <title>Contoh innerHTML</title> <script type="text/javascript"> function tampilkanInfo() {

var sekarang = new Date(); var jam = sekarang.getHours(); var menit = sekarang.getMinutes(); var detik = sekarang.getSeconds();

if (jam < 10) jam = "0" + jam; if (menit < 10) mnit = "0" + menit; if (detik < 10) detik = "0" + detik;

var pesan = "Anda mengklik terakhir kali jam " + jam + ":" + menit + ":" + detik; var obj = document.getElementById("id_info"); obj.innerHTML = pesan; } </script> </head> <body> <form>

(7)

By Ristek Department 2010 - 2011

onclick="tampilkanInfo()" /> </form>

<div id="id_info">Kalau Anda mengklik tombol di atas suatu info muncul di sini</div>

</body> </html>

(8)

By Ristek Department 2010 - 2011

Membuat Aplikasi Ajax

info.txt

File ini berasal dari server.

Jika Anda menjumpai tulisan ini,

Berarti aplikasi Ajax Anda sudah bekerja

ajax.html

<html> <head> <title>Contoh Ajax</title> <script type="text/javascript"> var xmlHttp = buatObjekXmlHttp(); function buatObjekXmlHttp() {

var obj = null;

if (window.ActiveXObject)

obj = new ActiveXObject("Microsoft.XMLHTTP"); else

if (window.XMLHttpRequest) obj = new XMLHttpRequest();

// Cek isi xmlHttp if (obj == null) document.write(

"Browser tidak mendukung XMLHttpRequest"); return obj;

}

function ambilData(sumber_data, id_elemen) {

if (xmlHttp != null) {

var obj = document.getElementById(id_elemen); xmlHttp.open("GET", sumber_data); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { obj.innerHTML = xmlHttp.responseText; } } xmlHttp.send(null); } } </script> </head> <body>

<input type="button" value="Klik Saya"

onclick="ambilData('info.txt', 'id_info')" /> <div id="id_info">Kalau Anda mengklik tombol di atas suatu info muncul di sini</div>

</body> </html>

(9)

By Ristek Department 2010 - 2011

PHP dan Ajax

ajax.js

var xmlHttp = buatObjekXmlHttp(); function buatObjekXmlHttp() {

var obj = null;

if (window.ActiveXObject)

obj = new ActiveXObject("Microsoft.XMLHTTP"); else

if (window.XMLHttpRequest) obj = new XMLHttpRequest();

// Cek isi xmlHttp if (obj == null) document.write(

"Browser tidak mendukung XMLHttpRequest"); return obj;

}

function ambilData(sumber_data, id_elemen) {

(10)

By Ristek Department 2010 - 2011

if (xmlHttp != null) {

var obj = document.getElementById(id_elemen); xmlHttp.open("GET", sumber_data); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { obj.innerHTML = xmlHttp.responseText; } } xmlHttp.send(null); } }

kirimvar.html

<title>Contoh Mengirimkan Variabel</title> <script type="text/javascript" src="ajax.js"> </script>

function prosesData(sumber_data, id_elemen) {

var elemen_nama = document.getElementById("nama"); var nama_user = elemen_nama.value;

var url = sumber_data + "?nama=" + nama_user; ambilData(url, id_elemen); } </script> </head> <body> <form> Nama Anda:

<input type="button" value="Klik Saya"

onclick="prosesData('ucapan.php', 'id_info');" /> </form>

</body> </html>

ucapan.php

<?php

header("Cache-Control: no-cache, must-revalidates"); header("Expires: Mon, 26 Jul 1997 00:00:00 GMT");

$nama = $_GET["nama"];

if (!empty($nama))

print("Hai, $nama. Selamat belajar"); else

print("Hai. Tolong isi nama Anda, ya!"); ?>

(11)

(12)

By Ristek Department 2010 - 2011

BAB 3

Jquery Framework

Apa itu Jquery

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada

interaksi antara JavaScript dan HTML. Untuk bisa menggunakan jquery terlebih dahulu

kita tempelkan library jquery ke dalam program kita, contoh penggunaannya seperti

berikut :

src="lib/jquery-1.4.2.min.js"></script>

Write Less, Do More

Itulah prinsip jquery. Jquery memiliki pemrograman Ajax yang simpel namun

sangat kuat. Berikut sintaks untuk meload data dari server atau dengan kata lain

pemrograman ajax dengan jquery :

$(selector).load(url,{data},callback)

Keterangan :

(selector) Elemen HTML yang akan digunakan

(url) alamat url dari data yang akan di load

(data) variabel dan nilainya yang akan dikirimkan ke server (url)

(callback) Fungsi yang akan di eksekusi ketika data server telah selesai di proses dan di

unduh.

ajax_jquery.html

<title>Contoh Ajax dengan Jquery</title>

</body> </html>

(13)

By Ristek Department 2010 - 2011

Mengirimkan Variabel dengan Jquery

Untuk mengirimkan suatu variabel dari klien ke server dalam aplikasi web ada

dua cara yaitu secara GET atau POST. Dalam jquery pun juga terdapat method tersebut

yang berfungsi untuk mengakses suatu file atau mengirimkan variabel ke server. Untuk

sintaksnya sebagai berikut :

$.get(url,data,callback,type) $.post(url,data,callback,type)

Contoh program :

kirimvar_jquery.html

<title>Contoh Kirim Variabel Ajax JQuery</title>

{

var name = $("#nama").val();

$.get("ucapan.php",{nama: name}, function(data) { $("#id_info").html(data); }); } </script> </head> <body>

(14)

By Ristek Department 2010 - 2011

<form> Nama Anda:

</form>

</body> </html>

Penanganan Formulir dengan Jquery

Mungkin akan ribet penulisan skripnya jika kita harus menambahkan banyak

variabel yang dikirimkan ke server ketika menghadapi formulir, misal pada registrasi.

Pada registrasi, tentunya kita harus mengirimkan variabel seperti nama, alamat, tanggal

lahir, no. Telepon, dan lain – lain. Akan sangat merepotkan ketika kita harus mengetik

skrip berikut :

var name = $("#nama").val(); var alamat = $("#addr").val();

(15)

By Ristek Department 2010 - 2011

var tgl = $("#tgl").val(); var no = $("#no").val();

$.get("ucapan.php",{nama: name, addr: alamat, tgl: tgl, nomor: no}, function(data) {

$("#id_info").html(data);

});

Dalam jquery mempunyai sebuah tag yang dapat menghandel semua variabel dalam form

dengan mengetikkan 1 tag, yaitu :

$('form').serialize()

Efek Animasi dengan Jquery

Jquery sendiri menyediakan beberapa efek untuk memperindah tampilan web.

Berikut ini adalah beberapa efek dari jquery yang akan kita bahas :

Efek

Keterangan

$(selector).hide()

Menyembunyikan elemen HTML yang dipilih

$(selector).show()

Memunculkan elemen HTML yang dipilih

$(selector).slideDown() Slide Down(show) elemen HTML yang dipilih

$(selector).slideUp()

Slide Up(hide) elemen HTML yang dipilih

$(selector).FadeIn()

Menimbulkan efek Fade in pada elemen HTML yang dipilih

$(selector).FadeOut()

Menimbulkan efek Fade out pada elemen HTML yang dipilih

$(selector).FadeTo()

Menimbulkan efek Fade out dengan opacity yang dikirimkan

(sebagai parameter) pada elemen HTML yang dipilih

jQuery Hide dan Show

jquery_hideshow.html

<p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button>

(16)

By Ristek Department 2010 - 2011

jQuery Slide - slideDown, slideUp

jquery_slidedown.html

<p>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>

</div> <p class="flip">Show Panel</p> </body> </html>

jquery_slideup.html

(17)

By Ristek Department 2010 - 2011

padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } </style> </head> <body> <div class="panel">

<p>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>

</div> <p class="flip">Hide Panel</p> </body> </html>

jQuery Fade - fadeIn, fadeOut, fadeTo

jquery_fadein.html

<p>If you click on the box above, it will be removed.</p> </body>

</html>

jquery_fadeout.html

(18)

By Ristek Department 2010 - 2011

<p>If you click on the box above, it will be removed.</p> </body>

</html>

jquery_fadeto.html

(19)