Membuat Halaman Dinamis PHP dengan Load AJAX

halo teman teman dumenity, selamat datang kembali di tutorial tutorial pemrogramman website, oke kali ini kita akan Belajar Membuat Halaman Dinamais dengan Load AJAX. Seperti yang kita tahu AJAX merupakan teknologi dari Javascript yang gunanya untuk bertukar data, mengirm data, dan berkomunikasi data dari client ke server tanpa mereload halamannya.

yups biasanya di PHP kita membuat halaman dinamis ini nah kao sekarang kita buat dengan AJAX. pertama tama kita buat dahulu struktur HTML dan sekalian kita pasang JQuery AJAX nya. berikut struktur HTML nya.

<!DOCTYPE html>
<html>
	<head>
		<title> Halaman Dinamis AJAX </title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="description" content="Demo project with jQuery">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
	</head>
	<body>
		<div class="container mt-5">
			<div class="row">
				<div class="col">
					<menu class="mb-3">
						<ul>
							<li><a class="menu" id="home" href="#">Home</a></li>
							<li><a class="menu" id="about" href="#">About</a></li>
							<li><a class="menu" id="contact" href="#">Contact</a></li>
						</ul>
					</menu>
					<div class="tampil">
						
					</div>


				</div>
			</div>
		</div>
		
	</body>
</html>

lalu setelah itu buat file home.php, about.php dan contact.php. yang isi nya seperti berikut.

home.php

<div>
	<h2>Halaman Home</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel deserunt ipsa veritatis, temporibus. Maiores quis ad consectetur voluptatibus architecto, nulla ea praesentium optio, harum, nostrum illum rem aspernatur veniam non.</p>
</div>

about.php

<div>
	<h2>Halaman About</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus facere velit magni dicta, corporis quod doloremque. Rerum cumque distinctio magnam, natus neque inventore earum placeat! Architecto, numquam natus consectetur odit!</p>
</div>

contact.php

<div>
	<h2>Halaman Contact</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugiat dolorum suscipit nemo odio, unde sit modi ipsum dignissimos temporibus quod qui! Non eum deleniti doloribus dolore, fuga nulla minima.</p>
</div>

setelah itu kita buat custom css nya seperti berikut.

*{padding: 0;margin: 0;}
menu ul{
	display: block;
	list-style-type: none;
	margin-bottom: 20px;
}
menu li{
	display: inline-block;
}
menu a{
	padding: 20px;
	cursor: pointer;
}
menu a:hover{
	text-decoration: none;
}
.tampil{
	border: 1px solid grey;
	padding: 10px;
}
.border-item{
	border-bottom:1px solid #fff;
	border-left:1px solid grey;
	border-top:1px solid grey;
	border-right:1px solid grey;
}

dan tampilannya pun seperti berikut