Artikel ini telah diupdate, mengatur active class hingga ke level submenu.

Bagi Anda yang pernah menggunakan menu bootstrap tentu anda akan akrab dengan class=”active” yang menjadikan tampilan menu aktif berbeda dengan menu yang tidak aktif. Pertanyaannya adalah bagaimana mengatur aktif menu pada bootstrap secara dinamis, sehingga menu aktif akan sesuai dengan menu yang dipilih?

Pada kesempatan kali ini kita akan membahas bagaimana cara mengatur tampilan menu dan submenu yang aktif menggunakan framework CSS Bootstrap. Topik bahasan akan kita bagi menjadi tujuh tahapan yang akan penulis tampilkan dalam bentuk tab sebagai berikut.

  1. Requirements, apa saja tools yang dibutuhkan
  2. Skenario, agar teman-teman mendapat gambaran besar apa sih yang akan kita buat
  3. Membuat file index.php
  4. Membuat array menu
  5. Menampilkan menu dan mengatur class active
  6. Menampilkan konten sesuai menu yang aktif
  7. Penutup

REQUIREMENTS

  • Komputer/ laptop teman-teman sudah terinstal minimal webserver Apache dan PHP versi 5 keatas. Jika belum, penulis merekomendasikan untuk menggunakan paket local development environment seperti XAMPPWAMPMAMPLAMP, atau Laragon (hanya tersedia untuk OS Windows).
  • Bootstrap. Di sini penulis masih menggunakan Bootstrap 3. Bootstrap versi berapapun tidak jadi masalah, karena konsepnya sama. Namun jika teman-teman masih ragu, penulis sudah menyiapkan aset yang akan kita gunakan pada tutorial kali ini. Silakan unduh di sini.
  • Text editor, seperti Notepad ++Sublime TextVisual Studio Code, dan lain sebagainya.

SKENARIO

Sesuai judul, kita akan membuat halaman web sederhana dimana kita akan memberikan nilai class=”active” terhadap menu dan submenu yang diklik dan menampilkan konten secara dinamis sesuai menu yang dipilih tadi.


Pertama kita siapkan folder project-nya dulu, penulis beri nama active_menu_bootstrap. Kemudian letakkan file-file Bootstrap di dalam folder aset. Selanjutnya kita akan membuat file index.php dan beberapa halaman yang merupakan isi dari masing-masing menu. Struktur foldernya dapat dilihat pada gambar di bawah ini.

MEMBUAT FILE INDEX.PHP

Buat file index.php dengan kode sebagai berikut.

Perhatikan baris :

  • 45 – 47, merupakan tag unordered list, tempat menu utama kita berada nantinya.
  • 57 – 59, terdapat tag div dengan class panel-body, tempat kita menampilkan isi halaman dari menu yang diklik.

Jika dijalankan melalui browser dengan alamat localhost/active_menu_bootstrap, maka hanya akan menampilkan navbar dan panel kosong.


Selanjutnya kita akan membuat array menu dengan PHP.

MEMBUAT ARRAY MENU

Array menu di sini adalah sekumpulan data menu yang akan kita gunakan sebagai menu utama di navbar. Berikut kodenya.
 

Penjelasan :

  • Paste kode $base dan array menu tersebut persis di bawah $judul_halaman (halaman index.php bagian atas).
  • Nilai dari variable $base di atas yaitu ?route=, merupakan parameter url yang nantinya akan digunakan untuk mengidentifikasi menu apa yang diklik, sekaligus memuat halaman dari menu tersebut. Contoh : jika klik menu home maka url akan menjadi localhost/active_menu_bootstrap/?route=home.  
  • Seperti yang kita ketahui, data array merupakan pasangan key dan value. Pada array menu di atas dapat kita baca bahwa key Home memiliki value home, sementara key Tutorial memiliki value berupa array lagi, yaitu key PHP dengan value php, key MySQL dengan value mysql, dan seterusnya. 
  • Dengan memahami struktur array menu tersebut kita dapat membuat dua kondisi untuk menampilkan menu.
  • Kondisi pertama, jika value-nya tidak berupa array, maka menu ini tidak memiliki submenu, dan kita tampilkan tanpa dropdown.
  • Kondisi kedua, jika value-nya berupa array,  maka menu tersebut memiliki submenu, dan akan kita tampilkan sebagai dropdown menu.
  • Data key akan kita gunakan sebagai label menu dan submenu, kemudian data value akan kita gunakan sebagai nilai dari parameter route.

MENAMPILKAN MENU DAN MENGATUR CLASS ACTIVE

Melanjutkan STEP 4, kita akan menampilkan menu berdasarkan array menu dengan metode perulangan atau looping, seperti kode berikut.

Penjelasan :

  1. Baris ke 2, memulai perulangan array menu, sehingga kita bisa mengakses key dan value-nya
  2. Di dalam kondisi perulangan ini kita membuat dua kondisi, yang pertama jika value-nya bukan array (baris ke 4 s.d 9), dan yang kedua jika value-nya berupa array (baris ke 10 s.d 23).
  3. Baris ke 6, membuat variable $route dan menentukan nilainya. Jika terdapat $_GET[‘route’] (parameter route di url), maka nilainya adalah $_GET[‘route’]. Jika tidak ada maka nilainya adalah home.
  4. Baris ke 7, membuat variable $active dan menentukan nilainya. Jika nilai variable $route sama dengan $value, maka aktifkan menu tersebut (menambahkan class=”active”).
  5. Baris ke 8, menampilkan menu biasa (tanpa dropdown).
  6. Untuk kondisi kedua, yaitu jika value-nya berupa array, penjelasannya lebih kurang sama seperti di atas, hanya saja kita menampilkan menu dropdown. Plus… kita melakukan perulangan lagi untuk menampilkan data submenu dan dan menentukan class active-nya (baris ke 16 s.d 20).
  7. Paste-kan kode tersebut persis di bawah tag <ul class=”nav navbar-nav navbar-right”> pada halaman index.php

 

Jika sudah, coba jalankan di browser dengan alamat localhost/active_menu_bootstrap. Berikut tampilannya.

Gambar di atas berisi 2 screenshot dimana gambar pertama (paling atas) adalah tampilan dari url localhost/active_menu_bootstrap. Dapat kita lihat bahwa secara default (parameter route masih kosong), menu Home ditandai sebagai aktif, sesuai dengan poin nomor 3 penjelasan di atas.

Kemudian screenshot kedua, ketika kita mengklik submenu MySQL, maka url berubah menjadi localhost/active_menu_bootstrap/?route=mysql, menu Tutorial dan submenu MySQL juga ditandai sebagai aktif.

Sampai di sini kita sudah berhasil mengatur tampilan menu dan submenu yang aktif secara dinamis. Selanjutnya kita akan menampilkan halaman dari menu yang dipilih, sehingga ketika klik menu Home maka yang muncul adalah halaman Home, dan seterusnya.

MENAMPILKAN KONTEN SESUAI MENU YANG AKTIF

Seperti yang dijelaskan pada step sebelumnya, variable $route memuat informasi menu apa yang sedang aktif. Variable ini juga akan kita gunakan untuk menampilkan halaman isi dari menu yang aktif tersebut.

Konsepnya sederhana, kita hanya perlu membuat halaman dengan nama file yang sama dengan menu yang ada (lihat screenshot struktur folder pada STEP 2).

Kemudian salin kode berikut persis di bawah tag <div class=”panel-body”> pada halaman index.php untuk memuat halaman tersebut.

Coba jalankan di browser dan klik sebarang menu untuk uji coba.

Sampai di sini kita sudah menyisipkan kode untuk array menu, menampilkan menu, dan memuat halaman yang sesuai dengan menu aktif. Berikut kode index.php lengkapnya.
 

 

PENUTUP

Sampai di sini penulis harap teman-teman sudah berhasil membuat sebuah website sederhana dengan fitur menu dengan class active dan konten halaman yang dinamis.

Penulis juga sudah menyiapkan source code dan halaman demo dari topik bahasan kita ini dan dapat diunduh pada tautan di bawah ini. Semoga bermanfaat, Wassalamualaikum Warahmatullahi Wabarakatuh.