Mempercantik Web Dengan AJAX dan Jquery Framework

Mempercantik Web Dengan AJAX dan Jquery Framework

By : Departemen Ristek Himpunan Mahasiswa Teknik Informatika 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.

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.


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 Mengenal Objek XMLHttpRequest <script type="text/javascript"> var xmlHttp = null; try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { xmlHttp = new XMLHttpRequest(); }


catch(e) { } } //Cek isi xmlHttp if(xmlHttp == null) document.write("Browser tidak mendukung XMLHttpRequest"); else document.write("Browser mendukung XMLHttpRequest");

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 Contoh Penggunaan ID textJS:
textPHP:

Info:
<script type="text/javascript"> var obj = document.getElementById("id_js"); document.write("name = " + obj.name + "
"); document.write("id = " + obj.id + "
"); document.write("type = " + obj.type + "
"); document.write("value = " + obj.value + "
");


Mengenal Properti innerHTML innerHTML merupakan properti milik objek DOM yang digunakan untuk menampilkan teks yang berasal dari server. Penggunaannya : objek.innerHTML = teks;

jam.html Contoh innerHTML <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; }


onclick="tampilkanInfo()" />

Kalau Anda mengklik tombol di atas suatu info muncul di sini


Membuat Aplikasi Ajax

info.txt File ini berasal dari server. Jika Anda menjumpai tulisan ini, Berarti aplikasi Ajax Anda sudah bekerja ajax.html Contoh Ajax <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); } }


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) {


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 Contoh Mengirimkan Variabel <script type="text/javascript" src="ajax.js"> <script type="text/javascript"> 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); }
Nama Anda:


ucapan.php



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 : <script type="text/javascript" src="lib/jquery-1.4.2.min.js">

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 Contoh Ajax dengan Jquery <script type="text/javascript" src=" jquery-1.4.2.min.js "> <script type="text/javascript"> function prosesData() { $("#id_info").load("info.txt"); }


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 Contoh Kirim Variabel Ajax JQuery <script type="text/javascript" src=" jquery-1.4.2.min.js "> <script type="text/javascript"> function prosesData() { var name = $("#nama").val(); $.get("ucapan.php",{nama: name}, function(data) { $("#id_info").html(data); }); }


Nama Anda:


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();


var tgl = $("#tgl").val(); var no = $("#no").val(); $.get("ucapan.php",{nama: name, nomor: no}, function(data) { $("#id_info").html(data); });

addr:

alamat,

tgl:

tgl,

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 <script type="text/javascript" src="jquery-1.4.2.min.js"> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); });
If you click on the "Hide" button, I will disappear.


jQuery Slide - slideDown, slideUp jquery_slidedown.html <script type="text/javascript" src="jquery-1.4.2.min.js"> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; }

Because time is valuable, we deliver quick and easy learning.

At W3Schools, you can study everything you need to learn, in an accessible and handy format.

Show Panel

jquery_slideup.html <script type="text/javascript" src="jquery-1.4.2.min.js"> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); <style type="text/css"> div.panel,p.flip { margin:0px;


padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; }

Because time is valuable, we deliver quick and easy learning.

At W3Schools, you can study everything you need to learn, in an accessible and handy format.

Hide Panel

jQuery Fade - fadeIn, fadeOut, fadeTo jquery_fadein.html <script type="text/javascript" src="jquery-1.4.2.min.js"> <script type="text/javascript"> $(document).ready(function(){ $("p").hide(); $("div").click(function(){ $("p").fadeIn(4000); }); });
CLICK ME AWAY!

If you click on the box above, it will be removed.

jquery_fadeout.html <script type="text/javascript" src="jquery-1.4.2.min.js"> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function(){ $(this).fadeOut(4000); }); });
CLICK ME AWAY!


If you click on the box above, it will be removed.

jquery_fadeto.html <script type="text/javascript" src="jquery-1.4.2.min.js"> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); }); });


Referensi Abdul Kadir, Mastering Ajax dan PHP, Andi, Yogyakarta, 2009. W2Schools, Jquery Tutorials, www.w3schools.com


Mempercantik Web Dengan AJAX dan Jquery Framework

Recommend Documents