Fenomena Ajax yang menjanjikan pengembangan aplikasi web menjadi lebih dinamis dan interaktif membuat para developer pun terus menerus melakukan eksperimen. JavaScript yang menjadi unsur dasar Ajax pun terus menerus dikembangkan dan hampir seluruh website sudah pasti menggunakan JavaScript untuk membuat setiap halamannya lebih hidup dan menarik.

Yang membuat Ajax menarik adalah kita dapat mengupdate satu atau lebih dari element di halaman web kita tanpa perlu reload halaman. Bila reload dapat dihindarkan tentunya kita berhemat waktu pengambilan data.

Seiring berkembangnya Ajax, banyak pertanyaan dan usulan muncul kepada saya tentang bagaimana kalau kita buat saja 1 web yang seluruh fasilitasnya merupakan Ajax, jadi tidak ada lagi berpindah-pindah halaman karena semua proses dilakukan pada 1 file. Bagaimana mungkin? namun di dalam prinsip saya “kalau tidak dicoba maka belum boleh bilang tidak mungkin” bukan?? ^_^

Disini saya punya tips dasar membuat website berpindah-pindah halaman/proses dengan Ajax dan kita akan lakukan semua proses di 1 file saja yaitu index.html.

Pertama-tama siapkan 2 buah halaman (atau lebih) untuk menjadi sample content yang akan bergantian di load sesuai request dari index.html.

1
2

<h2>Hello this is content 1</h2>
Loren in sum sit amet this is just a sample text for web development loren in sum sit amet this is just a sample text for web development loren in sum sit amet this is just a sample text for web development.

1
2
3
4
5
6

<h2>This is content 2</h2>
<?
	foreach($_SERVER as $key=>$value){
		echo $key . ' : ' . $value . '<br />';
	}
?>

Lalu buat file index.html dengan isi sederhana seperti ini:

39
40
41
42
43
44
45
46
47

 <table width="80%" border="1">
  <tr valign="top">
   <td width="15%">
    <a href="javascript:loadModule('content1')">Content 1</a><br />
    <a href="javascript:loadModule('content2')">Content 2</a>
   </td>
   <td width="85%" id="tdContent"></td>
  </tr>
 </table>

Sebelum melanjutkan topik, saya akan jelaskan apa pengertian module disini dan bagaimana 1 file dapat memproduksi berbagai module, jawabannya adalah kita bermain di lokasi dokumen (document.location). Coba perhatikan URL berikut:

http://yourweb/index.html#content1
http://yourweb/index.html#content2

Pada url diatas string ‘content1′ dan ‘content2′ adalah nama module dan apabila url ini dipanggil akan ada JavaScript yang mendeteksi nama module dari lokasi dokumen (URL) dan akan mengeksekusi perintah-perintah yang harus dikerjakan apabila module ini dipanggil. Cukup jelas??

Untuk memanipulasi lokasi dokumen (URL) dan mendapatkan nama module tersebut saya sudah menyediakan class sederhana dan simpan nama class tersebut dengan nama document.class.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var T10Doc = Class.create({
 _splitLocation: function(){
	var docLoc = new String(document.location);
	return docLoc.split('#'); // pecah lokasi document berdasar karakter '#'
 },
 getModule: function(){
	var arr = this._splitLocation();
	if(arr.length == 2) 
	 return arr[1]; // nama module adalah string setelah karakter '#'
	else return null;
 }, 
 saveModule: function(moduleName){
	var arr = this._splitLocation();
	/*
	  	Apabila sebelumnya sudah ada nama module maka ganti nama module
		tersebut dengan nama module baru namun apabila lokasi dokumen
		tidak terdapat nama module maka tambahkan #namamodule setelah 
		string lokasi dokumen
	*/
	if(arr.length == 2) document.location = arr[0]+'#'+moduleName;
	else document.location += '#'+moduleName;
 }
});

Langkah terakhir adalah sisipkan script di bawah ini diantara tag head index.html yang telah anda buat sebelumnya:

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script language="javascript" src="prototype.js"></script>
<script language="javascript" src="document.class.js"></script>
<script language="javascript">
 var doc = new T10Doc();
 function loadModule(moduleName){
 	switch(moduleName){
		case 'content1' : 
			// load content 1 dan tampilkan isinya pada element yang disediakan
			new Ajax.Updater('tdContent','content1.htm',{method: 'GET'}); break; 
		case 'content2' : 
			// load content 2 dan tampilkan isinya pada element yang disediakan
			new Ajax.Updater('tdContent','content2.php'); break; 
		default: 
			// apabila nama module tidak terdefinisi, kosongkan isi element
			$('tdContent').update('&nbsp;'); 
	}
	doc.saveModule(moduleName); // ubah url menjadi [lokasi dokumen]#[nama module]
 }
 window.onload = function(){ 
   	/*
		Apabila browser di refresh dan terdapat nama module pada lokasi dokumen
		maka eksekusi module tersebut. Fungsi doc.getModule() untuk mendapatkan
		nama module saat ini.
	*/
 	loadModule(doc.getModule()) 
 }  
</script>

Hasilnya adalah ketika anda menekan salah satu link content maka ada 2 hal yang terjadi yaitu isi dari kolom sebelah kanan berubah sesuai content yang ditentukan dan URL (lokasi dokumen) anda pun berubah dan menyimpan nama module dengan format [lokasi dokumen]#[nama module]. Apabila anda refresh halaman anda, maka url tidak akan berubah dan dengan sendirinya module terakhir sebelum anda me-refresh browser akan tereksekusi kembali.

Untuk melihat demo dari artikel ini anda dapat melihat di link ini.

Download contoh aplikai lengkap dari artikel ini di link ini.

Semoga artikel saya ini dapat membantu anda dan menambah wawasan anda…Terima kasih… ^_^