Halaman web yang bersifat dinamis dapat sangat berguna dan menghemat segala keperluan. contohnya untuk mengedit suatu halaman, kita hanya perlu mengeditnya di halaman itu saja. tanpa harus mengubah di semua halaman.
Untuk memulai pembuatan web dinamis, kita buat sebuah project di localhost (htdocs), misalnya sebuah project (folder) dengan nama “webdinamis“ (C:\xampp\htdocs\webdinamis). Kemudian buat sebuah file dengan nama index.php.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Halaman Web Dinamis Dengan PHP</title>
<!-- menghubungkan dengan file css -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- menghubungkan dengan file jquery -->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="content">
<header>
<h1 class="judul">WWW.AGUSSURATNA.NET</h1>
<h3 class="deskripsi">Membuat Halaman Web Dinamis Dengan PHP</h3>
</header>
<div class="menu">
<ul>
<li><a href="index.php?page=home">HOME</a></li>
<li><a href="index.php?page=tentang">TENTANG</a></li>
<li><a href="index.php?page=belajar">BELAJAR</a></li>
</ul>
</div>
<div class="badan">
<?php
if(isset($_GET['page'])){
$page = $_GET['page'];
switch ($page) {
case 'home':
include "halaman/home.php";
break;
case 'tentang':
include "halaman/tentang.php";
break;
case 'belajar':
include "halaman/belajar.php";
break;
default:
echo "<center><h3>Maaf. Halaman tidak di temukan!</h3></center>";
break;
}
}
else{
include "halaman/home.php";
}
?>
</div>
</div>
</body>
</html>
Penjelasan pada script :
<li><a href="index.php?page=home">HOME</a></li> <li><a href="index.php?page=tentang">TENTANG</a></li> <li><a href="index.php?page=belajar">BELAJAR</a></li>
Di sini kita mengalihkan halaman nya dengan menggunakan bantuan darimethod GET, di sini kita mengirim data GET dengan nama ‘page’, kemudian kita menangkap data page yang dikirim dan memeriksa isi dari GET page
yang dikirim dan meng-include halaman yang dituju.
Pada script :
<?php
if(isset($_GET['page'])){
$page = $_GET['page'];
switch ($page) {
case 'home':
include "halaman/home.php";
break;
case 'tentang':
include "halaman/tentang.php";
break;
case 'belajar':
include "halaman/belajar.php";
break;
default:
echo "<center><h3>Maaf. Halaman tidak di temukan!</h3></center>";
break;
}
}
else{
include "halaman/home.php";
}
?>Di sini kita cek dulu ada atau tidak nya GET page,
if(isset($_GET['page'])){Jika tidak ada maka halaman yang ditampilkan adalah halaman home.
include "halaman/home.php";
Jika ada data GET yang di kirim, kemudian kita cek lagi dengan bantuan switch case, jika halaman yang dicari tidak ada atau tidak sesuai maka akan ditampilkan pemberitahuan bahwa halaman tidak di temukan.
Yang selanjutnya kita buat file css agar tampilannya lebih menarik, dengan nama file style.css
body{
background-color:#f9f9f9;
font-size:16px
color:#444;
font-family: sans-serif;
}
.content{
width: 80%;
margin: 10px auto;
}
/*header*/
header{
background-color: white;
padding: 20px 10px;
border-radius: 5px;
border: 1px solid #f0f0f0;
margin-bottom: 10px;
}
header h1.judul,
header h3.deskripsi{
text-align: center;
}
/*menu navigasi*/
.menu{
background-color: rgb(34, 235, 174);
border: 1px solid #f0f0f0;
border-radius: 8px;
margin-bottom: 10px;
}
div.menu ul {
list-style:none;
overflow: hidden;
}
div.menu ul li {
float:left;
text-transform:uppercase;
}
div.menu ul li a {
display:block;
padding:0 20px;
text-decoration:none;
color:#2c2c2c;
font-family: sans-serif;
font-size:13px;
font-weight:400;
transition:all 0.3s ease-in-out;
}
div.menu ul li a:hover,
div.menu ul li a.hoverover {
cursor: pointer;
color:#fff;
}
div.badan{
background-color: white;
border-radius: 5px;
border: 1px solid #f0f0f0;
margin-bottom: 10px;
}
div.halaman{
text-align: center;
padding: 30px 20px;
}File index.php dan style.css tersebut merupakan kerangka dari halaman web dinamis yang ingin kita buat, selanjutnya kita tinggal membuat sebuah folder bernama “halaman” , di dalam folderkita akan letakkan halaman-halaman yang akan kita buat.
Halaman-halaman yang akan kita buat :
- home.php
- tentang.php
- belajar.php
home.php
<div class="halaman">
<h2>Halaman Utama</h2>
<p>Selamat datang di website kami, ini merupakan halaman utama pada tutorial cara Membuat Halaman Web Dinamis Dengan PHP</p>
</div>tentang.php
<div class="halaman">
<h2>Tentang Kami</h2>
<p>Ini adalah halaman tentang kami</p>
<p>Website kami merupakan situs yang menyediakan konten-konten untuk belajar komputer</p>
</div>belajar.php
<div class="halaman">
<h2>Halaman Belajar</h2>
<p>Ini adalah halaman Belajar, anda dapat mencari materi pembelajaran di sini</p>
</div>Berikut ini struktur file dari project yang kita buat :
Berikut adalah hasil dari halaman web dinamis yang telah kita buat dengan php, yang diakses pada browser dengan alamat localhost/webdinamis :
Selanjutnya kita coba klik pada menu tentang atau belajar, kemudian coba juga mengubah halaman url nya menjadi localhost/webdinamis/index.php?page=coba , maka akan muncul pemberitahuan bahwa halaman tidak di temukan.
Be the first to comment