Tips Membuat Active Menu Dinamis Dengan PHP Include

Fungsi PHP Include sangat memudahkan developer dalam mengembangkan web sehingga pekerjaan menjadi lebih efisien. Bayangkan jika kita mendesain sebuah web yang memiliki 50 halaman dengan menu navigasi yang sama, tiba-tiba kita harus meng-update beberapa bagian. Maka kita harus mengupdate menu di 50 halaman yang berbeda juga.

Nah dengan PHP Include, kita cukup mengedit satu halaman utamanya saja dan semua halaman lain akan otomatis diperbarui. Namun bagaimana kita menandai sebuah menu itu aktif/sedang terpilih atau tidak jika kita menggunakan fungsi ini?

Unique ID dan Simple If Else

Solusinya adalah dengan memberikan setiap halaman yang berbeda sebuah ID atau penanda. Dan di file menu utama dibuat beberapa logika perbandingan sederhana yang akan memanggil class active. Sederhananya, jika halaman yang aktif adalah halaman kontak, maka echo-kan class active.

Demo Source Code

Agar lebih mudah, kita akan menggunakan contoh menu dari Ryan Bishop. Pertama-tama, buatlah file search.php, upload.php, location.php dan contact.php sebagai halaman utama kita. Sekarang, disemua file tersebut, masukan baris kode berikut:

<?php $thisPage = ""; ?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title><?php echo $thisPage; ?></title>

   <link rel="stylesheet" type='text/css' href="http://fonts.googleapis.com/css?family=Strait" >
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="title">
   <h1>Halaman <?php echo $thisPage; ?></h1>
</div>

<?php include "navigasi.php"; ?>
</body>
</html>

Seperti yang Anda lihat pada kode diatas, di baris pertama ada sebuah variabel $thisPage yang tidak memiliki nilai atau kosong. Variabel inilah yang nanti akan menjadi ID di setiap halaman.

Catatan: Untuk kode CSS-nya silahkan Anda download di link source code yang ada.

Lalu di setiap halaman yang ada isikanlah variabel tersebut dengan kata yang sesuai. Jika halaman search.php maka isikan kata “Search”. Jika halaman upload.php maka isikan kata “Upload” dan seterusnya. Kira-kira seperti ini:

<?php $thisPage = "Search"; ?>

Diatas kode penutup </body> ada sebuah kode PHP yang akan meng-include file navigasi kita.

Kita sudah memiliki beberapa halaman dengan ID yang berbeda. Sekarang saatnya membuat navigasi utamanya. Buatlah file baru dengan nama navigasi.php. Lalu tulis kode berikut di dalamnya:

<div class="menu-container">
  <div class="nav">
      <div class="settings"></div>
  </div>
  <div class="menu">
      <ul>
        <li <?php if($thisPage == "Search") echo "class='active'"; ?>><a href="#"><img src="img/search.png"><p>Search</p></a></li>
        <li <?php if($thisPage == "Upload") echo "class='active'"; ?>><a href="#"><img src="img/upload.png"><p>Upload</p></a></li>
        <li <?php if($thisPage == "Location") echo "class='active'"; ?>><a href="#"><img src="img/location.png"><p>Location</p></a></li>
        <li <?php if($thisPage == "Contacts") echo "class='active'"; ?>><a href="#"><img src="img/contacts.png"><p>Contacts</p></a></li>
      </ul>
  </div>
</div>

Coba perhatikan masing-masing kode baris li di kode di atas. Di sana ada kode logika perbandingan PHP sederhana yaitu jika variabel $thisPage sesuai dengan halaman yang dibuka, maka akan di-echo-kan class="active". Simple bukan?