Pindah Halaman Tanpa Reload dengan Ajax

Hallo teman-teman, kali ini kita akan belajar cara pindah halaman tanpa reload dengan Ajax. Jadi biasanya pada suatu website teman-teman pasti melihat ada beberapa menu pada navbar website. Ketika kalian ingin mengunjungi menu yang lain, maka browser akan mereload ulang isi konten yang lama dengan konten baru yang akan ditampilkan. Dengan metode Ajax ini, kalian bisa merubah isi tampilan kontenya tanpa mereload browsernya. Ini merupakan kelebihan dari Ajax. Agar tidak bingung mari kita mulai prakteknya. Teman-teman bisa ikut beberapa code dibawah ini. Pertama buat dahulu tampilan awalnya.

index.php

<html>
	<head>
		<title>Ajax</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="menu">
			<a href="home">Home</a>
			<a href="profil">Profil</a>
			<a href="kontak">Kontak</a>	
		</div>
		
		<div id="konten">
			
		</div>
		<script>
			$(document).ready(function(){
				// halaman default
				$('#konten').load('home.php');

				// fungsi yang mengatur konten mana yang akan ditampilkan
				$('#menu a').click(function(){
					// mengambil data dari href
					var hal = $(this).attr('href');
					// konten akan diisi oleh menu yang dipilih sesuai dengan isi dari href yang dipilih
					$('#konten').load(hal+'.php');
					return false;
				});
			});
		</script>
	</body>
</html>

<html>

<head>

</head>

<body>

<a href="profil">Profil</a>

<a href="kontak">Kontak</a>

</div>

</div>

$(document).ready(function(){

// halaman default

$('#konten').load('home.php');

// fungsi yang mengatur konten mana yang akan ditampilkan

$('#menu a').click(function(){

// mengambil data dari href

var hal = $(this).attr('href');

// konten akan diisi oleh menu yang dipilih sesuai dengan isi dari href yang dipilih

$('#konten').load(hal+'.php');

return false;

});

</script>

</body>

</html>

Code diatas adalah halaman web utamanya, dimana terdapat 3 buah menu dan konten. Namun disini kontennya belum kita isi. Maka dari itu kita buat isi untuk kontenya secara terpisah. Ikuti code dibawah ini.

home.php

<h1>Hallo</h1>
<p>Ini adalah halaman HOME</p>

1 2	<h1>Hallo</h1> <p>Ini adalah halaman HOME</p>

profil.php

<h1>Hallo</h1>
<p>Ini adalah halaman PROFIL</p>

1 2	<h1>Hallo</h1> <p>Ini adalah halaman PROFIL</p>

kontak.php

<h1>Hallo</h1>
<p>Ini adalah halaman KONTAK</p>

1 2	<h1>Hallo</h1> <p>Ini adalah halaman KONTAK</p>

Setelah selesai membuat untuk isi kontenya, maka kalian bisa coba jalankan pada browser dan lihat hasilnya.

Pada saat kalian klik menu profile atau kontak, maka isi kontenya akan berubah tetapi halaman browser melakukan reload ulang. Itu karena script dibawah ini.

// fungsi yang mengatur konten mana yang akan ditampilkan
$('#menu a').click(function(){
   // mengambil data dari href
   var hal = $(this).attr('href');

  // konten akan diisi oleh menu yang dipilih sesuai dengan isi dari href yang dipilih
  $('#konten').load(hal+'.php');
  return false;
});

// fungsi yang mengatur konten mana yang akan ditampilkan

$('#menu a').click(function(){

// mengambil data dari href

var hal = $(this).attr('href');

// konten akan diisi oleh menu yang dipilih sesuai dengan isi dari href yang dipilih

$('#konten').load(hal+'.php');

return false;

});

Keunggulanya adalah web terasa lebih cepat sehingga user akan tidak perlu menunggu lama untuk melihat isi konten pada website kita.

Sekian pembahasan mengenai cara pindah halaman tanpa reload dengan Ajax. Semoga bermanfaat.

index.php

Facebook DUMET School

Categories