Membuat Halaman Dinamis PHP dengan Load AJAX

halo teman teman dumenity, selamat datang kembali di panduan panduan pemrogramman laman, oke kali ini kita akan Belajar Membangun Halaman Dinamais dengan Load AJAX. Seperti yang kita tahu AJAX adalah teknologi dari Javascript yang gunanya bagi bertukar data, mengirm data, dan berkomunikasi data dari client ke server tanpa mereload halamannya.

yups biasanya di PHP kita membangun halaman dinamis ini nah kao sekarang ini kita bikin dengan AJAX. pertama-tama tama kita bikin 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>
<fitur class=mb-3>
<ul>
<li><a class=fitur id=home href=#>Home</a></li>
<li><a class=fitur id=about href=#>About</a></li>
<li><a class=fitur id=contact href=#>Contact</a></li>
</ul>
</fitur>
<div class=tampil>

</div>


</div>
</div>
</div>

</body>
</html>

lalu setelah itu bikin 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 bikin modifikasi css nya seperti berikut.

*{padding: 0;margin: 0;}
fitur ul{
display: block;
list-style-type: none;
margin-bottom: 20px;
}
fitur li{
display: inline-block;
}
fitur a{
padding: 20px;
cursor: pointer;
}
fitur 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;
}