Menampilkan Menu Hirarki menggunakan Code Igniter

Wiw, udah sekian lama ga apdet blog. Bahan sih banyak, tapi ga sempet saking sibuknya koding.. *sok sibuk* Well, berawal dari chatting tadi sama temen yang pengen bikin recursive mode buat struktur menu yang hirarki, jadilah hari ini saya akan posting tentang bagemana caranya Menampilkan Struktur Menu yang Hirarki menggunakan Code Igniter. Cukup yang simpel-simpel aja yah.

Untuk tutorial ini, Saya anggap kita sudah punya database MySQL, dengan dua tabel yaitu Tabel ms_moduls dan Tabel ms_menus. Dan anggap saja Anda sudah tau caranya untuk mengatur setting database di CI. Kalau digambarkan, struktur dan relasi kedua tabel tadi itu bisa dilihat di gambar di bawah ini.

tabel ms_moduls dan ms_menus

Untuk menampilkan Modul dan Menu dalam bentuk seperti gambar berikut, yang pasti kita harus buat 3 macam File. Satu untuk Model, satu untuk View dan satu lagi untuk Controller.

Tampilan Menu Hirarki

Langkah-langkah yang harus dilakukan adalah:

Buat file controller dengan nama menu_hirarki.php. Isi dengan kode berikut:


<?php
class Menu_hirarki extends Controller {
function Menu_hirarki()
{
parent::Controller();
$this->load->database();
$this->load->model('model_menu');
}
function index()
{
$data['moduls'] = $this->model_menu->get_moduls();
$data['menus']  = $this->model_menu->get_menus();
$this->load->view('view_menu',$data);
}
}
?>

Buat file Model dengan nama model_menu.php. Isi dengan kode berikut:


<?php
class Model_menu extends Model { 
 function Model_menu()
 {
 parent::Model();
 } 
 function get_moduls()
 {
 $this->db->order_by('stack');
 $query = $this->db->get('ms_moduls');
 return $query->result();
 } 
 function get_menus()
 {
 $this->db->order_by('stack');
 $query = $this->db->get('ms_menus'); 
 return $query->result();
 }
}
?>

Buat file View dengan nama view_menu.php. Isi dengan kode berikut:


<html>
<head>
<title>Tampilan Menu Hirarki</title>
</head>
<body>
 <h1>Tampilan Menu Hirarki</h1>
 <table width='100%' cellpadding='5' cellspacing='5'>
 <tr>
 <td valign='top'>
 <?php
 foreach($moduls as $modul):
 ?>
 <h2><? echo $modul->name; ?></h2>
 <div class="sidemenu">
 <?php
 foreach($menus as $menu):
 if($menu->modul_id == $modul->id)
 {
 ?>
 <p><a href="yourLink"><?echo $menu->name;?></a></p>
 <?
 }
 endforeach;
 ?>
 </div>
 <?
 endforeach;
 ?>
 </td>
 </tr>
 </table>
</body>
</html>

Untuk css dapat diletakkan di dalam file view_menu.php di dalam Head.


<style>
 body {
  background-color: #fff;
  margin:auto;
  font-family: Lucida Grande, Trebuchet, Verdana, Sans-serif;
  font-size:11px;
  color: #4F5155;
  width:300px;
 }
 a {
  color: #003399;
  background-color: transparent;
  font-weight: normal;
 }
 a:hover {color:#CF682F} 
 h1 {
  color: #444;
  background-color: transparent;
  border-bottom: 1px solid #ACBEDD;
  font-size: 22px;
  font-weight: bold;
  margin: 24px 0 2px 0;
  padding: 5px 0 6px 0;
 }
 h2 {
  color: #fff;
  background-color: #ACBEDD;
  background-repeat: repeat;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 5px 5px 5px 5px;
 }
 .sidemenu {
  margin: 0 0 15px 0;
  padding: 5px 5px 5px 5px;
  border: 1px solid #ACBEDD;
  border-top: none;
  font-size:11px;
 } 
</style>

Panggil controller menu_hirarki.php untuk melihat hasilnya. Misalnya, jika webroot di localhost Anda bernama “MyWebRoot”, maka panggil controller dengan alamat: http://localhost/MyWebRoot/index.php/menu_hirarki/

Tadaaa…

Selamat mencoba ya, semoga sukses