Membuat Menu Active pada Codeigniter 4


 

Pada postingan kali ini saya akan membagikan sebuah tips sederhana namun sangat penting untuk diterapkan didalam sebuah project web kita yaitu tentang "Membuat Menu Active pada Codeigniter 4". Seperti yang kita ketahui, menu active atau menu dinamis merupakan salah fitur yang sangat penting untuk diterapkan karena akan membantu para pengguna aplikasi mengetahui halaman mana yang sedang mereka akses. Baiklah mari kita praktekan kedalam project codeigniter 4 kita masing-masing.

Catatan : Untuk postingan kali ini saya tidak akan menjelaskan tahapan penginstallan codeigniter 4 dari awal, akan tetapi langsung saya impelemntasikan kedalam project yang saya sudah buat sebelumnya. Saya asumsikan bahwa, teman-teman mengunjungi postingan ini karena ingin mencari referensi mengenai menu active.

Untuk membuat menu active pada project codeigniter 4, maka teman-teman dapat langsung menerapkannnya kedalam halaman menu atau sidebar teman-teman. Namun ini merupakan alternatif yangs saya tawarkan, jika teman-teman memiliki alternatif lain yang lebih simpel ya silahkan...

Pertama, kita buka file menu kita lalu tambahkan kode PHP dibagian paling atas kodingan kita. Lihat gambar berikut ini.

silahkan salin kode PHP dibawah ini.

 

kedua, silahkan cari kodingan menu kita lalu tambahkan kodingan untuk memanggil variabel $active didalamnya, lalu sesuaikan dengan url teman-teman semua. Perhatikan gambar dibawah ini.


 

keyword yang kita masukkan kedalam function $active disesuaikan dengan segment URL teman-teman semua. Sebagai contoh, ketika segment URL ke-1 diarahkan ke /home, maka kita tampilkan class 'active' di menu dashboard. Begitupun seterusnya. Maka jika teman-teman berhasil akan mendapatkan menu active dan dinamis pada setiap halaman. Sebagai contoh adalah pada project saya dibawah ini.


Full source codenya bisa kalian lihat dibawah ini.


Baiklah, sekian postingan kali ini, semoga bermanfaat. Selamat belajar semoga sukses. Amin!.


Post a Comment

Post a Comment (0)

Previous Post Next Post