Jadi ceritanya ada waktu beberapa jam sebelum UKK dimulai, saya mulai belajar lagi tentang codeigniter dengan melanjutkan aplikasi yang terbengkalai beberapa bulan lamanya.
Saat terakhir kali saya belajar CI, saya ingin membuat Class Active secara otomatis pada sebuah website dynamis. Jadi kurang lebih seperti ini permasalahannya. Setiap kali kita mengunduh template untuk sebuah web, pasti sistem yang digunakan adalah website statis. Sehingga, script yang digunakannya pun tentu menyesuaikan hanya untuk tiap page tersebut. Seperti contoh dibawah ini.
Jika kita melihat dari dua gambar diatas, menu (sebelah kiri) memiliki tanda atau ciri yang memberikan informasi pada menu apa anda berada. Jika kita sedang berada pada halaman dashboard, maka menu dashboard akan dilingkari. Jika kita berada pada halaman inbox, maka menu inbox yang akan dilingkari, dan yang lainnya dibiarkan sama.
Jika kita melihat sourcecode dari template-nya, maka kita akan mengetahui bahwa menu tersebut memiliki class=”active” yang berfungsi untuk memberikan design tampak aktif pada menu tersebut. Namun masalahnya adalah, class tersebut secara default digunakan hanya untuk page tersebut, dan ketika kita membuka sourcecode page lain, maka letak class=”active” tersebut akan berbeda. Berikut contoh sourcecodenya :
Sourcecode untuk halaman Dashboard.html
<!-- BEGIN DASHBOARD --> <li> <a href="../../html/dashboards/dashboard.html"class="active" > <div class="gui-icon"><i class="md md-home"></i></div> <span class="title">Dashboard</span> </a></li> <!--end /menu-li --> <!-- END DASHBOARD --> <!-- BEGIN EMAIL --> <li class="gui-folder"> <a> <div class="gui-icon"><i class="md md-email"></i></div> <span class="title">Email</span> </a> <!--start submenu --> <ul> <li><a href="../../html/mail/inbox.html"><span class="title">Inbox</span></a></li> <li><a href="../../html/mail/compose.html" ><span class="title">Compose</span></a></li> <li><a href="../../html/mail/reply.html" ><span class="title">Reply</span></a></li> <li><a href="../../html/mail/message.html" ><span class="title">View message</span></a></li> </ul> <!--end /submenu --></li> <!--end /menu-li --> <!-- END EMAIL -->
Sourcecode untuk halaman Inbox.html
<!-- BEGIN DASHBOARD --> <li> <a href="../../html/dashboards/dashboard.html"> <div class="gui-icon"><i class="md md-home"></i></div> <span class="title">Dashboard</span> </a></li> <!--end /menu-li --> <!-- END DASHBOARD --> <!-- BEGIN EMAIL --> <li class="gui-folder"> <a> <div class="gui-icon"><i class="md md-email"></i></div> <span class="title">Email</span> </a> <!--start submenu --> <ul> <li><a href="../../html/mail/inbox.html" class="active"><span class="title">Inbox</span></a></li> <li><a href="../../html/mail/compose.html"><span class="title">Compose</span></a></li> <li><a href="../../html/mail/reply.html"><span class="title">Reply</span></a></li> <li><a href="../../html/mail/message.html"><span class="title">View message</span></a></li> </ul> <!--end /submenu --></li> <!--end /menu-li --> <!-- END EMAIL -->
Nah, jika kita membuat website dinamis, maka letak dari class=”active” tersebut haruslah menyesuaikan dengan page yang sedang dibuka agar fungsi “dinamis” tersebut memang dinamis.
Pada codeigniter, kita bisa memanfaatkan fasilitas URI Class. Fasilitas tersebut tidak sengaja saya temui ketika iseng membaca dokumentasi CI, karena saya kurang bisa memahami bahasa inggris, jadi silakan anda terjemahkan sendiri fungsi dan kegunaanya dari dokumentasi CI tersebut karena saya baru mencoba penerapannya hanya untuk masalah ini saja.
Jadi intinya adalah kita menggunakan class URI ini untuk membuat kondisi, kondisi yang membandingkan URL dimana kita berada dengan menu tersebut, ketika menu tersebut sama dengan URL, maka icon atau nama menu tersebut akan aktif dan memberi nilai class=”active” yang akan membedakannya dengan yang lain. Kurang lebih seperi ini sourcecodenya :
<p style="text-align: justify;">class="<?php if($this->uri->segment(1)=="dashboard"){echo "active";}?>" href="<?=base_url('dashboard')?>"</p> <p style="text-align: justify;">
Yang jika diimplementasikan akan menjadi seperti ini:
<!-- BEGIN DASHBOARD --> <li> <a class="<?php if($this->uri->segment(1)=="dashboard"){echo "active";}?>" href="<?=base_url('dashboard')?>"> <div class="gui-icon"><i class="md md-home"></i></div> <span class="title">Dashboard</span> </a></li> <!--end /menu-li --> <!-- END DASHBOARD --> <!-- BEGIN Akademik --> <li class="gui-folder"> <a> <div class="gui-icon"><i class="fa fa-book"></i></div> <span class="title">Akademik</span> </a> <!--start submenu --> <ul> <li><a class="<?php if($this->uri->segment(1)=="siswa"){echo "active";}?>" href="<?=base_url('siswa')?>" ><span class="title">Siswa</span></a></li> <li><a class="<?php if($this->uri->segment(1)=="pelajaran"){echo "active";}?>" href="<?=base_url('pelajaran')?>" ><span class="title">Pelajaran</span></a></li> <li><a class="<?php if($this->uri->segment(1)=="nilai"){echo "active";}?>" href="<?=base_url('nilai')?>" ><span class="title">Nilai</span></a></li> </ul> <!--end /submenu --></li> <!--end /menu-li --> <!-- END Akademik --> <p style="text-align: justify;">
Berikut penjelasan yang saya simpulkan setelah mempraktikannya.
Kode sumber tadi dibagi dua, adalah untuk Class dan Href. Mari kita fokuskan pada class-nya.
<p style="text-align: justify;">class="</p> <p style="text-align: justify;"><?php</p> <p style="text-align: justify;">if($this->uri->segment(1)=="dashboard") {</p> <p style="text-align: justify;">echo "active";</p> <p style="text-align: justify;">}</p> <p style="text-align: justify;">?>"</p> <p style="text-align: justify;">
$this->uri->segment(1) = berfungsi untuk memanggil URL pada level 1. Level dari URI ini bisa dibaca pada dokumentasinya.
Lalu, hasil dari pemanggilan tersebut akan dicocokan dengan alamat seharusnya (pada contoh diatas adalah “dashboard”) sehinggi ketika sama (true) akan memunculkan tulisan “active” yang nantinya akan menjadi nilai dari class itu sendiri. Atau ketika bernilai true, akan menjadi class=”active”.
Saya tidak memiliki latar belakang pendidikan yang cukup, sehingga cukup sulit memahaminya, tapi ketika dipraktikan ternyata tidak begitu sulit untuk dimengerti.
Semoga bermanfaat, terutama untuk para fans Atletico yang sakit hati atas kekalahan timnya dari Real Madrid di Final Liga Champions :lol:
Catatan 10 : Membuat Active Class pada Menu Secara Otomatis pada Codeigniter Jadi ceritanya ada waktu beberapa jam sebelum UKK dimulai, saya mulai belajar lagi tentang codeigniter dengan melanjutkan aplikasi yang terbengkalai beberapa bulan lamanya.