Tutorial Ajax Part 1 - Load File atau Halaman Tanpa Refresh Dengan AJAX JQuery
SCRIPT KIDDIES - Pada awal diperkenalkan teknologi AJAX penggunaan AJAX masih susah dan ribet, sehingga jarang ditemui website yang menerapkan AJAX. Setelah munculnya JQuery keadaan menjadi sangat berubah. JQuery memilki fungsi khusus untuk menyederhanakan AJAX, sehingga penggunaan AJAX menjadi sangat mudah. Bahkan website yang menggunakan teknologi AJAX pun sudah tak terhitung jumlahnya. Salah satu contoh kita akan menggunakan salah satu fungsi JQuery yaitu load().
Sebelum melangkah lebih jauh alangkah baiknya sobat sudah mengetahui dasar - dasar dari JQuery dan Javascript. Sobat bisa belajar disini
CARA LOADFILE DENGAN AJAX JQUERY
JQuery mempunyai fungsi khusus untuk load file dari server dan menempatkanya pada suatu elemen HTML ( biasanya tag div ) . Fungsi tersebut yaitu load(). Fungsi ini dapat digunakan sebagai navigasi halaman untuk berpindah dari satu halaman ke halaman lain dengan AJAX. Format fungsi penulisan load adalah sebagai berikut.
$(selector).load(url, data, callback);Dilihat dari format di atas, fungsi load() memiliki 3 parameter yaitu url, data dan callback. Parameter url diisi alamat file yang ingin ditampilkan pada suatu elemen HTML. Parameter ini wajib disertakan. Paremeter data bersifat opsional, diisi dengan psangan key dan value yang dikirim ke server. Parameter callback juga bersifat opsional, diisi dengan fungsi yang akan dijalankan ketika file berhasil di-load.
Oke sekarang kita praktekkan. Silahkan buat folder dengan nama ajax di direktori server lokal sobat /var/www/html. Jangan lupa meletakkan library JQuery pada folder tersebut. Buat file load.php dengan skrip berikut.
load.php
<!DOCTYPE html>
<html>
<head>
<title>Load AJAX JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$('.konten').load($(this).attr('href'),
$(this).attr('data'), function(){
alert("File berhasil diload kang !");
});
return false;
});
});
</script>
</head>
<body>
<h2>Load File Dengan AJAX JQuery</h2>
<h3>www.script-kiddies.org</h3>
<a href="konten.php?tampil=halaman1">Halaman 1</a> |
<a href="konten.php" data="tampil=halaman2">Halaman 2</a> |
<a href="konten.php" data="tampil=halaman3">Halaman 3</a> |
<div class="konten"></div>
</body>
</html>Pada skrip di atas, kita membuat 2 link untuk membuka halaman 1, halaman 2 dan halaman 3 dimana isi halaman akan ditampilkan pada tag <div> dengan class .konten. Pada skrip JQuery di bagian <head>, kita atur tag <a> diklik kita panggul file untuk ditempatkan pada tag <div> dengan class .konten. Nama file yang dipanggil diambil dari nilai atribut href tag <a>. Jika file berhasil dipanggil, kita tampilkan pesan dengan fungsi alert() bahwa file berhasil di-load. Agar atribut href tidak berfungsi, maka pada skrip di atas ditambah perintah return false.
Jika diperhatikan pada skrip di atas, sebenarnya data yang dikirim ke server dapat dituliskan pada parameter url seperti yang ditunjukkan pada link pertama("konten.php?tampil=halaman1"). Namun, jika ingin mengikuti aturan yang disediakan oleh JQuery, maka data ditempakan pada paremeter data. Pada contoh di atas, parameter data diambil dari atribut data yang ditunjukkan pada link kedua dan ketiga (data="tampil=halaman2") (data="tampil=halaman3").
Agar skrip di atas berjalan, maka kita harus buat file yang kan di-load, yaitu file konten.php dengan skrip sebagai berikut :
konten.php
<?php
if ($_GET['tampil']=='halaman1') {
echo "Ini isi halaman 1 kang";
}elseif ($_GET['tampil']=='halaman2') {
echo "ini isi halaman 2 om";
}elseif ($_GET['tampil']=='halaman3') {
echo "Ini isi halaman 3 om";
}
?>Maksud dari skrip di atas yaitu, jika nilai tampil adalah "halaman1" ( Link pertama diklik ), maka akan tampil tulisan "Ini isi halaman 1 kang". Sedangkan , jika nilai data tampil adalah "halaman2" ( Link kedua diklik ), maka akan tampil tulisan "Ini isi halaman 2 om" begitu juga dengan halaman3 diklik maka akan tampil tulisan "Ini isi halaman 3 om". Jika dibuka pada browser hasilnya seperti gambar berikut.
KESIMPULAN
Kita berhasil membuat halaman dinamis tanpa perlu me-refreshnya yaitu dengan menggunakan fungsi load() yang akan menampilkan data berdasarkan atribut href, teknik biasa digunakan dalam membuat halaman admin tapi banyak juga yang menggunakanya di tampilan interface web. Bisa sobat hapus alert agar kinerja load lebih optimal. Sekian terima kasih
Tidak ada komentar :
Posting Komentar