Menambahkan CSS class active Pada Menu Sesuai Route yang di Akses di Laravel 5

Hal seperti menambahkan class=”active” di menu navigasi di dalam sistem yang kita buat sudah menjadi hal yang wajib untuk di aplikasikan karena akan sangat menambah UX pada sistem kita. Ini pertama kalinya saya menggunakan Laravel, saya menggunakannya ketika Laravel masih versi 5.1.*. Dan ketika artikel ini ditulis Laravel sudah versi 5.2.*. Di dalam sistem yang saya buat saya menggunakan template admin gratis yaitu AdminLTE. Dan menu navigasi di template tersebut menyediakan class active untuk menu yang sedang aktif.

Disini permasalahan dimulai, saya ingin mengintegrasikan class active tersebut ketika Route yang bersangkutan sedang diakses (sedang aktif). Setelah berselancar di dunia maya, akhirnya saya menemukan cara yang bagi saya DRY(Don’t Repeat Yourself) dan tidak WET(Write Everything Twice), yaitu menggunakan custom Helper pada Laravel.

Langsung saja kita mulai bagaimana langkah-langkahnya untuk menambahkan CSS class active pada menu di Laravel 5.

Langkah Pertama

Membuat file baru, yaitu file helper yang kita sudah bahas tadi.

• Buat folder baru di dalam folder /app, kita buat saja namanya Helpers.
• Masuk ke dalam folder Helpers, buat file baru bernama Helper.php.

Setelah langkah diatas selesai lanjutkan dengan paste code ini ke dalam file Helper.php

function set_active($uri, $output = ‘active’)
{
 if( is_array($uri) ) {
   foreach ($uri as $u) {
     if (Route::is($u)) {
       return $output;
     }
   }
 } else {
   if (Route::is($uri)){
     return $output;
   }
 }
}

Sedikit penjelasan mengenai fungsi diatas. Ada 2 parameter yang di set untuk fungsi set_active($uri, $output). Pada parameter pertama, kita membutuhkan URI yang sedang aktif(atau bisa nama route dan saya lebih menyarankan menggunakan nama route), yaitu kita harus memasukannya secara manual. Jadi contohnya seperti ini set_active(‘/home’) atau dalam bentuk Array set_active([‘/home’, ‘/about’]). Atau jika menggunakan nama route akan menjadi seperti ini set_active(‘home.index’) dan jika menggunakan Array menjadi seperti ini set_active([‘home.index’, ‘about.index’]).

Dan juga kita menggunakan Facade Route::is() untuk mengetahui uri yang sedang diakses(sedang aktif). Dan jika route yang diakses sesuai dengan route yang kita set sebagai parameter maka akan mengembalikan nilai true.

Pada parameter kedua yaitu nama CSS class yang ingin kita tambahkan, secara default saya tulis “active” tapi bisa diubah sesuai dengan kebutuhan anda.

Kita lanjutkan ke langkah kedua yaitu bagaimana cara menggunakan helper yang kita buat tadi.

Langkah Kedua

Cara termudah dan akan saya gunakan terus adalah dengan mendaftarkan Custom Helper yang kita buat tadi ke file composer.json. Ok, berikut langkah-langkahnya:

1. Buka file composer.json dan tambahkan kode ini pada blok autoload.

"files": [
   "app/Helpers/Helper.php"
]

Jadi file composer akan terlihat seperti ini:

"autoload": {
   "classmap": [
      "database"
   ],
   "psr-4": {
      "App\\": "app/"
   },
   "files": [
     "app/Helpers/Helper.php"
   ]
},

2. Setelah itu, buka Terminal kita jalankan perintah compsercomposer dump-autoload

Tadaaaaa… Selesai, file Custom Helper kita otomatis akan di-load. Kalau kurang yakin coba kita buktikan dengan membuka file autoload_files.php di folder /vendor/composer/autoload_files.php

Final. Langkah Terakhir

Saatnya kita gunakan custom helper yang kita buat tadi pada template Blade kita 😄

Saya sudah sebutkan tadi saya menggunakan AdminLTE Template jadi pada HTML saya terlihat seperti ini.

Ok caranya cukup mudah bukan? Cukup memanggil set_active(‘nama.route’) pada file template kita. Ok sip

Hasilnya menjadi seperti ini.

Ok sekian yang bisa saya bagikan. Jangan lupa untuk klik like & share ya jika bermanfaat.