Tutorial kali ini memasang jquery untuk menampilkan halaman lain tanpa refresh sehingga browser hanya memproses pada daerah
tertentu saja pada bagian web yang di refresh sehingga bisa menghemat penggunaan bandwidth.
Cara ini sama dengan menggunakan Javascript / AJAX, karena
JQuery sendiri adalah perkembangan dari Javascript dan AJAX.
JQuery sendiri adalah kumpulan AJAX yang digabungkan menjadi sebuah
kerangka yang siap digunakan oleh pengembang web newbie tanpa harus
mengetahui Javascript secara mendalam.
Yang dibutuhkan dalam coding kali ini cuma memasang jquery kemudian sedikit pengetahuan dari javascript.
Langsung saja contohkan dalam html.
<html>
<head>
<title>Load tanpa refresh</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" >
</script>
<script type="text/javascript">
$(document).ready(
function(){
$("#klikdata").click(function(){
$("#tampung").load("halaman2.html");
});
}
);
</script>
</head>
<body>
<center>
<h5>Dibawah ini adalah tempat menampilkan data dari file halaman2.html</h5>
<a href="#" id="klikdata">Tampil Data</a><br />
<div id="tampung"></div>
</center>
</body>
</html>
Kode file halaman2.html
<html>
<head>
</head>
<body>
test halaman 2
</body>
</html>
Sedikit penjelasan dari kode diatas, di file index.html haruslah
disertakan atau di masukan Jquery.js anda bisa mendownload atau bisa
menggunakan source online sebagai contoh yaitu di googleapi seperti kode
diatas.
Selanjutkan pada index.html dibuat script untuk menjalankan jquery
disitu dideklarasikan $(document).ready(); untuk menjalankan jquery jika
halaman sudah dalam keadaan ready atau sudah di proses sepenuhnya.
Kemudian dideklarasikan #klikdata maksudnya adalah elemen yang memiliki
id klik data, dalam contoh yaitu tag a, maka ketika di klik akan
melakukan perintah berikutnya yaitu memproses di elemen #tampung atau
elemen yang memiliki id tampung sebuah data dari file halaman2.html.
Selain dari file html, jquery juga bisa memproses file lain seperti php, txt,dll dan yang di load berupa text biasa.
2 Comments
terima kasih gan, it's work
ReplyDeleteoke gan
Delete