Membuat script load halaman website dengan jquery ajax

Selamat berjumpa kembali dengan tutorial Media kreatif, kali ini kita akan mengulas kembali pembahasan tentang JQUERY AJAX, dimana kita akan menggunakan contoh - contoh sederhana yang akan coba kita terapkan dalam sebuah aplikasi sederhana.

 

Pada umumnya, ketika kita klik link pada sebuah halaman web, maka browser akan melakukan request pada server, dan keseluruhan halaman website tersebut akan diload kembali sesuai dengan permintaan dari browser pada web server. Dengan penggunaan AJAX, kita dapat menentukan bagian mana saja yang akan melakukan refresh, dimana masing - masing area dalam halaman website selanjutnya akan kita sebut dengan nama DOM ( Document Object Model )

Kita bisa melihat metode ini pada GMAIL dan Yahoo mail, dimana ketika kita klik link inbox, hanya pada bagian tertentu saja yang melakukan refresh untuk menampilkan data yang direquest melalui AJAX. Dalam hal ini, tentunya kita juga harus mempelajari event - event dalam javascript, seperti :

  1. ONCLICK » Ketika kursor mouse click pada area tertentu
  2. ONMOUSEOVER » Ketika kursor mouse berada diatas area tertentu
  3. ONMOUSEOUT » Ketika kursor mouse bergerak keluar dari area tertentu
  4. ONCHANGE » terjadi perubahan pada suatu kondisi, misalnya isi dari sebuah textbox, textarea, pilihan combobox dan lain - lain

Adapun langkah - langkah penerapan AJAX sederhana pada halaman website adalah sebagai berikut :

1. Membuat halaman utama sebagai template » index.php

Halaman ini bisa kita buat dengan HTML murni atau bisa juga dengan menggunakan PHP, karena halaman ini hanya akan digunakan sebagai tampilan utama website yang selanjutnya akan menjadi DOM untuk menampilkan halaman - halaman lain yang akan diload dengan menggunakan AJAX

<html>
	<head>
		<title>Membuat website berbasis JQUERY AJAX</title>
		<link rel="stylesheet" href="style.css" type="text/css"/>
		<script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
		<script type="text/javascript" src="ajax.js">//memanggil script ajax</script>
	</head>
	<body onload="tampilkan('home');">
		<div id="wrapper">
			<div id="header">
			Bagian header
			</div>
			
			<div id="content">
				<div id="left">
				<ul>
					<li><a name="#1" onclick="tampilkan('home');">Home</a></li>
					<li><a name="#2" onclick="tampilkan('php');">Tutorial PHP</a></li>
					<li><a name="#3" onclick="tampilkan('html');">Bahasa HTML</a></li>
					<li><a name="#4" onclick="tampilkan('ajax');">AJAX</a></li>
					<li><a name="#5" onclick="tampilkan('javascript');">Pemrograman Javascript</a></li>
					<li><a name="#7" onclick="tampilkan('xml');">XML</a></li>
					<li><a name="#8" onclick="tampilkan('media-kreatif');">Media Kreatif</a></li>
				</ul>
				</div>
				
				<div id="right">
					<div id="loader" style="display:none;">Loading ...</div>
				</div>
				
				<div id="clear" style="clear:both;"> </div>
			</div>
			
			<div id="footer">
				Bagian footer
			</div>
		</div>
	</body>
</html>

Sambil memperdalam pembelajaran tentang TAG DIV, maka halaman index.php diatas kita buat dengan menggunakan TAG DIV, sehingga layout website kita sudah tidak menggunakan TABEL lagi.

2. Membuat Script CSS » style.css

Script CSS ini mutlak diperlukan ketika membuat layout dengan menggunakan TAG DIV

body{
	font:normal 12px Tahoma,Verdana;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#wrapper{
	width:800px;
	border:silver 1px solid;
	margin-left:auto;
	margin-right:auto;
}
#header{
	height:300px;
	border-bottom:silver 1px solid;
}
#content{
	min-height:400px;
	padding:5px;
	border-bottom:silver 1px solid;
}
#content #left{
	width:180px;
	float:left;
}
#content #left ul{
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#content #left ul li{
	list-style:none;
}
#content #left ul li a{
	display:block;
	color:#000000;
	line-height:20px;
	cursor:pointer;
	background-color:#cecece;
	padding:0 0 0 10px;
	margin:0 0 2px 0;
}
#content #left ul li a:hover{
	color:#ff9900;
}
#content #right{
	width:600px;
	float:right;
}
#footer{
	height:50px;
	border-top:silver 1px solid;
}

3. Membuat script JQUERY AJAX » ajax.js

Script ajax.js yang akan kita gunakan dalam contoh kali ini cukup ringkas dan mudah - mudahan dapat dengan mudah dipahami oleh pembaca Media Kreatif,

function tampilkan(halaman){
	$('#loader').fadeIn('slow'); //area untuk loading
	$.ajax({
		//Alamat url harap disesuaikan dengan lokasi script pada komputer anda
		url	     : 'http://localhost/tutorial/content.php',
		//type pengiriman data POST, GET
		type     : 'POST',
		//Data yang akan di ambil oleh ajax
		dataType : 'html',
		//Variabel - variabel yang akan dikirimkan oleh AJAX
		data     : 'content='+halaman,
		success  : function(jawaban){
			//Jika request AJAX berhasil, maka DOM akan di isi dengan jawaban hasil Request
			$('#content #right').html(jawaban);
		},
	})
}

4. Membuat script pemroses request » content.php

Script ini kita asumsikan sebagai halaman pemroses yang akan menampilkan data - data sesuai dengan request yang dikirimkan melalui AJAX. Adapun isi dari script content sebenarnya hanya berupa kata - kata biasa yang kita tempatkan pada suatu kondisi IF seperti terlihat pada contoh dibawah:

<?php
if($_POST['content']=='home'){
?>
<p>
Kami merupakan perkumpulan beberapa mahasiswa ITN Malang yang memiliki persamaan tujuan untuk dapat saling berbagi ilmu terutama dalam bidang IT. Berangkat dari persamaan tujuan tersebut, maka kami dirikan Media Kreatif ini sebagai sarana penujang dan sebagai media penyaluran minat dan bakat.</p>
<p>
<?php
}
else if($_POST['content']=='php'){
?>
<p>
	PHP (PHP Hypertext Preprocessor) merupakan bahasa pemrograman berbasis website opensource. PHP sangat populer di kalangan programer website di karenakan beberapa hal berikut :</p>
<?php
}
else if($_POST['content']=='html'){
?>
<h3 class="title">
	Belajar bahasa HTML</h3>
<p>
<?php
}
else{
?>
Menampilkan konten lainnya, data yang ditampilkan pada script content ini bisa mengambil dari database seperti yang dilakukan pada umunya, yaitu dengan menambahkan script koneksi, kemudian membuat query untuk mengakses tabel tertentu
<?php
}
?> 

Pada script index.php diatas terdapat link yang memuat event javascript seperti terlihat berikut ini:

<li><a name="#1" onclick="tampilkan('home');">Home</a></li>
<li><a name="#2" onclick="tampilkan('php');">Tutorial PHP</a></li>
<li><a name="#3" onclick="tampilkan('html');">Bahasa HTML</a></li>
<li><a name="#4" onclick="tampilkan('ajax');">AJAX</a></li>
<li><a name="#5" onclick="tampilkan('javascript');">Pemrograman Javascript</a></li>
<li><a name="#7" onclick="tampilkan('xml');">XML</a></li>
<li><a name="#8" onclick="tampilkan('media-kreatif');">Media Kreatif</a></li>

Artinya, jika kita klik link Home, maka javascript akan memanggil fungsi tampilkan dimana isi dari parameter yang dikirimkan adalah "home", sehingga script content akan mendapatkan kiriman data dengan method POST yang berisi kata "home" sehingga akan masuk pada kondisi pertama yaitu :

if($_POST['content']=='home'){

Maka akan diberikan jawaban " Kami merupakan perkumpulan dst " dan jawaban tersebut akan diambil oleh AJAX untuk di injectkan pada DOM #content #right pada script index.php seperti terlihat pada script ajax.js berikut :

$('#content #right').html(jawaban);
//Jawaban akan dimasukkan pada TAG DIV dengan ID "right" yang berada didalam TAG DIV dengan ID "content"

 

Untuk lebih jelasnya tentang pembelajaran diatas, silahkan download contoh aplikasinya pada link download yang sudah kami sediakan dibawah. Lakukan perubahan pada script ajax.js terutama pada bagian url untuk menyesuaikan dengan lokasi script pada komputer anda. Jika ingin mencoba tanpa melakukan perubahan, silahkan buat folder dengan nama tutorial pada direktory web server anda kemudian copy script - script diatas pada folder tersebut, selanjutnya anda tinggal buka brwser dan ketik alamat :

http://localhost/tutorial/index.php

 

Download script halaman website ajax


Komentar pembaca

nanangs widodomass saya mau tanya, kalau directory nya disimpan pada web server, konfigurasi pada bagian ini (http://localhost/tutorial/index.php) gimana ya? saya sudah coba rubah pada bagian urlnya berulang kali gagal terus. mohon bantuannya dengan sangat, dan diberikan contohnya. sebelumnya saya ucapkan terima kasih... posting pada :2013-11-12 11:08:58
chephzcukup mudah dipahami. thanksposting pada :2014-08-29 16:19:18
Alif Benden Arnadomakasih banyak mas ,, sangat membantu ,, ini yang lagi saya cariposting pada :2014-11-03 23:05:53
         
     
         
 
         
   
         
   
 

Tulis komentar