Mempercantik Web
advertisement
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.
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
<html>
<head>
<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();
}
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
<html>
<head>
<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" />
<br />
<br />
Info: <br />
<script type="text/javascript">
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>
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>
<input type="button" value="Klik Saya"
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>
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>
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)
{
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
<html>
<head>
<title>Contoh Mengirimkan Variabel</title>
<script type="text/javascript" src="ajax.js">
</script>
<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);
}
</script>
</head>
<body>
<form>
Nama Anda:
<input type="text" name="textnama" id="nama"/>
<br />
<input type="button" value="Klik Saya"
onclick="prosesData('ucapan.php', 'id_info');" />
</form>
<div id="id_info">Kalau Anda mengklik tombol di atas
suatu info muncul di sini</div>
</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!");
?>
By Ristek Department 2010 - 2011
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 :
<script type="text/javascript"
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
<html>
<head>
<title>Contoh Ajax dengan Jquery</title>
<script type="text/javascript" src=" jquery-1.4.2.min.js ">
</script>
<script type="text/javascript">
function prosesData()
{
$("#id_info").load("info.txt");
}
</script>
</head>
<body>
<input type="button" value="Klik Saya"
onclick="prosesData();" />
<div id="id_info">Kalau Anda mengklik tombol di atas
suatu info muncul di sini</div>
</body>
</html>
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
<html>
<head>
<title>Contoh Kirim Variabel Ajax JQuery</title>
<script type="text/javascript" src=" jquery-1.4.2.min.js ">
</script>
<script type="text/javascript">
function prosesData()
{
var name = $("#nama").val();
$.get("ucapan.php",{nama: name}, function(data) {
$("#id_info").html(data);
});
}
</script>
</head>
<body>
By Ristek Department 2010 - 2011
<form>
Nama Anda:
<input type="text" name="textnama" id="nama"/>
<br />
<input type="button" value="Klik Saya"
onclick="prosesData();" />
</form>
<div id="id_info">Kalau Anda mengklik tombol di atas
suatu info muncul di sini</div>
</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();
By Ristek Department 2010 - 2011
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
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
By Ristek Department 2010 - 2011
jQuery Slide - slideDown, slideUp
jquery_slidedown.html
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
<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;
}
</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">Show Panel</p>
</body>
</html>
jquery_slideup.html
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
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
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hide();
$("div").click(function(){
$("p").fadeIn(4000);
});
});
</script>
</head>
<body>
<div>CLICK ME AWAY!</div>
<p>If you click on the box above, it will be removed.</p>
</body>
</html>
jquery_fadeout.html
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
$(this).fadeOut(4000);
});
});
</script>
</head>
<body>
<div style="background:yellow;width:200px">CLICK ME AWAY!</div>
By Ristek Department 2010 - 2011
<p>If you click on the box above, it will be removed.</p>
</body>
</html>
jquery_fadeto.html
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>
<body>
<div style="background:yellow;width:300px;height:300px">
<button>Click to Fade</button>
</div>
</body>
</html>
By Ristek Department 2010 - 2011
Referensi
Abdul Kadir, Mastering Ajax dan PHP, Andi, Yogyakarta, 2009.
W2Schools, Jquery Tutorials, www.w3schools.com
By Ristek Department 2010 - 2011