Membuat Multi Level Menu (3 Level) pada CodeIgniter
Jumat, 07 Maret 2014 | 17:00:44 WIB | Dibaca: 65683 Kali
Multilevel Menu CodeIgniter
Semua Tutorial
Tutorial Codeigniter
TI-STMIKNH.COM, Kali ini penulis akan berbagi tentang membuat Multi Level Menu pada CodeIgniter, disini penulis mencoba mengikuti referensi dari gedelumbung.com (thanks gan). Pada Tutorial gedelumbung.com menggunakan penerapan fungsi rekursif, dan kita akan menggunakan metode yang sama hanya akan berbeda pada databasenya.
Karena kita akan menggunakan fungsi rekursif, ada baiknya kita memahami terlebih dahulu apa itu Rekursif. Rekursif merupakan salah satu metode algoritma yang kerap digunakan dalam membuat perulangan, seperti halnya iterasi for, repeat .. until, do.. while, dsb. Perbedaannya adalah dalam sifatnya yang memanggil dirinya sendiri, baik secara langsung ataupun melalui metode yang lainnya. Ciri masalah yang dapat diselesaikan secara rekursif adalah masalah itu dapat direduksi menjadi satu atau lebih masalah-masalah serupa yang lebih kecil.
Karena disini kita akan membuat menu sampai Level ke 3 (Main Menu, Submenu, Sub Submenu) kita membutuhkan 3 Tabel yaitu menu, submenu dan subsubmenu dan 1 tabel menu_position.
1. Membuat Tabel (menu, submenu, subsubmenu)
CREATE TABLE `menu` (
`id_menu` int(5) NOT NULL auto_increment,
`id_parent` int(5) NOT NULL default '0',
`id_position` int(3) NOT NULL,
`nama_menu` varchar(30) NOT NULL,
`link` varchar(100) NOT NULL,
`aktif` enum('Y','N') NOT NULL,
`urutan` int(3) NOT NULL,
PRIMARY KEY (`id_menu`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=127 ;
--
-- Dumping data for table `menu`
--
INSERT INTO `menu` VALUES (124, 0, 2, 'Tentang STMIK NH', 'berita/kategori/1/berita-daerah', 'Y', 0);
INSERT INTO `menu` VALUES (125, 0, 2, 'Gallery', 'berita/detail/4/bupati-zumi-zola-serahkan-bantuan-2-unit-kapal-30-gt-dan-dana-pump', 'Y', 0);
INSERT INTO `menu` VALUES (126, 0, 2, 'Hubungi Kami', 'galeri/detailalbum/5/training-motivasi-ukm-forkalam-alkahfi-stmik-nh-jambi-2012', 'Y', 0);
-- --------------------------------------------------------
--
-- Table structure for table `menu_position`
--
CREATE TABLE `menu_position` (
`id_posisi` int(4) NOT NULL auto_increment,
`nama_posisi` varchar(100) NOT NULL,
`keterangan` text NOT NULL,
`username` varchar(100) NOT NULL,
`tgl_upload` date NOT NULL,
PRIMARY KEY (`id_posisi`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
--
-- Dumping data for table `menu_position`
--
INSERT INTO `menu_position` VALUES (2, 'Top Menu Main Menu', 'Top Menu warna biru', 'ngadmin', '2013-09-05');
INSERT INTO `menu_position` VALUES (4, 'Bottom Menu', 'Menu Bawah', 'ngadmin', '2013-09-05');
INSERT INTO `menu_position` VALUES (5, 'Left Menu (Menu Kiri)', 'Pilih Menu Kiri', 'admin', '2014-02-25');
INSERT INTO `menu_position` VALUES (6, 'Right Menu (Menu Kanan)', 'Pilih Menu Kanan', 'admin', '2014-02-25');
-- --------------------------------------------------------
--
-- Table structure for table `submenu`
--
CREATE TABLE `submenu` (
`id_submenu` int(5) NOT NULL auto_increment,
`nama_submenu` varchar(50) character set latin1 collate latin1_general_ci default NULL,
`link_submenu` varchar(100) character set latin1 collate latin1_general_ci default NULL,
`id_menu` int(5) NOT NULL,
`publish` enum('Y','N') NOT NULL default 'Y',
PRIMARY KEY (`id_submenu`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=143 ;
--
-- Dumping data for table `submenu`
--
INSERT INTO `submenu` VALUES (142, 'Sambutan Ketua', 'galeri/detailalbum/5/training-motivasi-ukm-forkalam-alkahfi-stmik-nh-jambi-2012', 124, 'Y');
INSERT INTO `submenu` VALUES (141, 'Program Studi', 'berita/kategori/2/berita-pemerintahan', 124, 'Y');
INSERT INTO `submenu` VALUES (139, 'Galeri Video', 'berita/detail/5/sebelas-pns-terjaring-razia', 126, 'Y');
INSERT INTO `submenu` VALUES (138, 'Galeri Photo', 'tutorial/detail/14/membuat-hit-counter-beritaartikel-pada-codeigniter', 126, 'Y');
-- --------------------------------------------------------
--
-- Table structure for table `subsubmenu`
--
CREATE TABLE `subsubmenu` (
`id_subsubmenu` int(5) NOT NULL auto_increment,
`nama_subsubmenu` varchar(50) character set latin1 collate latin1_general_ci default NULL,
`link_subsubmenu` varchar(100) character set latin1 collate latin1_general_ci default NULL,
`id_menu` int(5) NOT NULL,
`id_submenu` int(11) NOT NULL,
`publish` enum('Y','N') NOT NULL default 'Y',
PRIMARY KEY (`id_subsubmenu`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;
--
-- Dumping data for table `subsubmenu`
--
INSERT INTO `subsubmenu` VALUES (16, 'Prodi Manajemen Informasi', 'tutorial/detail/15/menampilkan-pagination-kategori-beritaartikel-ala-bootstrap-pada-code-igniter', 124, 141, 'Y');
INSERT INTO `subsubmenu` VALUES (14, 'Prodi Sistem Informasi', 'berita/kategori/1/berita-daerah', 124, 141, 'Y');
INSERT INTO `subsubmenu` VALUES (15, 'Prodi Teknik Informatika', 'profil/detail/34/fasha-bawa-puluhan-pejabat-bimtek-ke-solok', 124, 141, 'Y');
2. Code pada Folder Controller: buat file home.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class home extends CI_Controller {
public function __construct ()
{
parent::__construct();
$this->load->helper(array("html","form","url","text"));
$this->load->database();
}
public function index()
{
$data["judulapp"]="TI-STMIKNH.COM Media Sharing Mahasiswa TI STMIK Nurdin Hamzah Jambi";
$data['menu'] = $this->getMenu2(2,"");
$this->load->view("v_home",$data);
}
private function getMenu2($parent,$hasil){
$w = $this->db->query("SELECT * from menu where id_position='".$parent."'");
if(($w->num_rows())>0)
{
$hasil .= "<ul id='nava'> ";
}
foreach($w->result() as $h)
{
$hasil .= "<li><a href=".$h->link."> ".$h->nama_menu."</a><ul>";
$wa= $this->db->query("SELECT * from submenu where id_menu='".$h->id_menu."'");
foreach($wa->result() as $ha)
{
$hasil .= "<li><a href=".$ha->link_submenu."> ".$ha->nama_submenu."</a><ul>";
$waa= $this->db->query("SELECT * from subsubmenu where id_submenu='".$ha->id_submenu."'");
foreach($waa->result() as $haa)
{
$hasil .= "<li><a href=".$haa->link_subsubmenu."> ".$haa->nama_subsubmenu."</a></li>";
}
$hasil .= " </ul></li>";
}
$hasil .= " </ul></li>";
$hasil = $this->getMenu2($h->id_menu,$hasil);
}
if(($w->num_rows)>0)
{
$hasil .= "</ul>";
}
return $hasil;
}
}
?>
3. Code pada Folder View: buat v_home.php
<html lang="en"> <head> <title><?php echo $judulapp; ?></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <base href="<?php echo base_url(); ?>"/> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'> <link href="<?php echo base_url(); ?>style/css/menu.css" rel="stylesheet"> <link href="<?php echo base_url(); ?>style/css/greatbg.css" rel="stylesheet"> <script src="<?php echo base_url(); ?>style/js/jquery-1.8.0.min.js" type="text/javascript"></script> <link rel="shortcut icon" href="<?php echo base_url(); ?>style/images/favicon.ico"> </head> <body> <div id="great-bg"> <div id="list"> <div id="templatemo_topmenu"> <div id="menu" class="js-active"><div class='imglogo'><a href='./'><img src='style/images/logo-small.png' ></a></div> <?php echo $menu; ?> </div> </div> <div class="list1">Teknik Informatika - Sekolah Tinggi Manajemen Informatika dan Komputer Nurdin Hamzah</div> <div class="list2"><br>Media Informasi/Publikasi Program Studi Teknik Informatika STMIK-NH<br>Website ini merupakan Media Alternatif Sharing antar Mahasiswa, semoga bisa membantu<br>rekan-rekan sekalian baik Mahasiswa Aktif maupun Alumni STMIK Nurdin Hamzah</div> <div class="list3"><br> <div id="menu_icon"> <div class="main"> <ul id="panel"> <li class="icon data"> <a class="link" href="http://elearning.stmiknh.ac.id/"> <div></div> </a> <span><b>e-Learning</b> </span> </li> <li class="icon sertifikasi"> <a class="link" href="http://eperpus.stmiknh.ac.id/"> <div></div> </a> <span><b>Perpustakaan </b><br>Online</span> </li> <li class="icon beasiswa"> <a class="link" href="http://nilai.stmiknh.ac.id/"> <div></div> </a> <span><b>Informasi Nilai</b><br>Online</span> </li> <li class="icon pengumuman"> <a class="link" href="http://puslabkom.stmiknh.ac.id/"> <div></div> </a> <span><b>Pusat Laboratorium </b><br>Komputer</span> </li> </ul> </div> <div class="main"> <ul id="panel"> <li class="icon petasekolah"> <a class="link" href="http://ejurnal.stmiknh.ac.id/"> <div></div> </a> <span><b>Jurnal</b><br>Akademik</span> </li> <li class="icon gallery"> <a class="link" href="http://einfo.stmiknh.ac.id/"> <div></div> </a> <span><b>Informasi </b><br>Akademik</span> </li> <li class="icon statistik"> <a class="link" href="http://skripsi.stmiknh.ac.id/"> <div></div> </a> <span><b>Pengajuan </b><br> Judul Skripsi<br>(PJS) Online</span> </li> <li class="icon kritik"> <a class="link" href="http://wisuda.stmiknh.ac.id/"> <div></div> </a> <span><b>Pendaftaran</b><br>Wisuda</span> </li> </ul> </div> </div> </div> </div> </div> </body> </html>
Sumber: ti-stmiknh.com