Membuat Menu Navigasi Pada Website Dengan PHP

Posted by Admin on

Friday, May 25, 2018

Pada pemrograman dasar PHP kita mengenal pembuatan file PHP yang sesuai dengan peruntukannya. Aplikasi yang dibuat dengan php dapat menjadi lebih efisien jika kita membuatnya dengan meminimalkan sesuatu yang berulang. Sebuah website minimal terbagi atas tiga komponen utama yaitu header, content dan footer. Dimana biasanya bagian yang tetap adalah header dan footer, sedangkan bagian yang berubah adalah bagian content.

Header dan footer dapat kita buat secara terpisah agar pada saat kita membuat banyak content, file header dan footer tersebut dapat di include kan kedalam file content. Pembuatan navigasi merujuk pada menu yang tersedia pada aplikasi tersebut. Menu yang jelas membantu user untuk dengan mudah menuju dari satu halaman ke halaman lain tanpa harus menebak-nebak halaman yang dibuka.

Bentuk yang sederhana dan efisien seperti dropdown menu menjadi solusi untuk memanfaatkan ruang yang minimal untuk menampung menu dalam jumlah yang banyak. Hal ini juga membantu dalam mengelompokan menu-menu berdasarkan kesamaannya.

Pertama kali kita buat terlebih dahulu file index.php dari aplikasi yang ingin dibangun. Dimana pada file ini terdapat header dan footer yang bersifat statis.

index.php

<?php
include "function.php";
?>
<!DOCTYPE html>
<html>
<head>
 <title>Membuat Menu Navigasi Pada Website Dengan PHP</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<h1>Membuat Menu Navigasi Pada Website Dengan PHP</h1>
<hr>

<div class="menu">
<ul id="navigasi">
 <li><a href="index.php">Home</a></li>
 <li><a href="index.php?m=about">About</a></li>
 <li><a href="#">News</a>
  <ul>
   <li><a href="index.php?m=international">International</a></li>
   <li><a href="index.php?m=national">National</a></li>
  </ul>
 </li>
</ul>
</div>

<div class="content">
<?php
//menampilkan content yang diinginkan
$file = content($_GET['m']);
include "page/$file";

?>
</div>

<div class="footer">
Copyright &copy; 2018 - <a href="www.belajarwebpedia.com">www.belajarwebpedia.com</a>
</div>

</body>
</html>

Kemudian kita buat function.php untuk melakukan filter konten yang ditampilkan

function.php

<?php

function content($m)
{
 $cek = trim($m);
 if($cek == "") { $file = "beranda.php"; }
 if($cek == "about") { $file = "about.php"; }
 if($cek == "international") { $file = "international.php"; }
 if($cek == "national") { $file = "national.php"; }
 return $file;
}
?>

fungsi content() digunakan untuk menampilkan kontent berdasarkan menu yang dipilih oleh pengguna. berikut contoh file about.php

about.php

<hr>
<b>User Profil</b>
<hr>

<div style="width: 200px; float: left;">
<img src="images/profil.jpg" width="200" height="240">
</div>
<div style="float: left;">
<table width="100%" cellpadding="5">
 <tr>
  <th width="120" align="left">Name</th>
  <td>: John Doe</td>
 </tr>
 <tr>
  <th width="120" align="left">Department</th>
  <td>: Marketing</td>
 </tr>
 <tr>
  <th width="120" align="left">Email</th>
  <td>: john.doe@hismail.com</td>
 </tr>
 <tr>
  <th width="120" align="left">Phone</th>
  <td>: 0123456789</td>
 </tr>
</table>
</div>

<hr style="clear: both">

konten lain dapat dilihat pada file yang dapat di download dibawah nanti.

untuk membuat menu dropdown dapat menggunakan css dibawah ini. simpan dengan nama style.css

style.css

body {
 font-family: verdana;
 font-size: 0.85em;
}

.menu {
 display: block;
 background-color:#00A6BB;
 height:46px;
}

.content {
 clear: both;
 padding:5px 0;
 min-height: 200px;

}

.footer {
 clear: both;
 margin-top:10px;
 background-color: #eee;
 padding:10px 8px;
}

#navigasi {
 position:relative;
 line-height:30px;
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
}

#navigasi a {
 display:block;
 padding:8px 16px;
 background-color:#00A6BB;
 color:#fff;
 text-decoration:none;
}

#navigasi a:hover {
 background-color:#00BCD4;
 color:#fff;
}

#navigasi li {
 position:relative;
 float:left;
}

#navigasi ul {
 position:absolute;
 display:none;
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
}

#navigasi li ul a{
 width:12em;
 height:auto;
 float:left;
}

#navigasi li:hover ul{
 display:block;
}

#navigasi li:hover ul ul{
 display:none;
}

.news {
 background: #ddd;
}

.judul {
 padding: 4px;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 font-weight: bold;
}
.sinopsis {
 padding: 4px;
 margin-bottom: 5px;
}

file dasar yang dibutuhkan secara umum sudah selesai, berikut adalah struktur keseluruhan file dalam aplikasi ini:

Untuk sourcecode lengkap dapat di download melalui link dibawah ini:

DEMO | DOWNLOAD