Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter

Selamat datang kembali di website tips dan trik Dumet School, pada artikel sebelum nya kita sudah belajar tentang Cara Akses Controller Di Dalam View. Yang sudah kita terapkan untuk menampilkan menu parent dan child nya, di artikel kali ini kita akan lanjutkan belajar tentang Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter.

Masih berkaitan dengan menu parent dan menu child, ada beberapa kasus yang mana kita membuat menu secara dinamis. Biasa nya kita butuhkan menu dengan 3 level, dan untuk menampilkan nya kita looping sebanyak 3 kali. Tentu hal ini sangat kurang efektif jika menu lebih dari 3 level maka kita perlu melakukan pemanggilan query dan looping kembali untuk menampilkannya.

Bayangkan jika menu lebih dari 4 atau 5 level, tentu ini sangat mengganggu sekali dan membuat kita selalu update menu. Kali ini kita akan membuat fungsi untuk menampilkan menu secara dinamis, tidak peduli berapapun levelnya.

Baik langsung saja kita implementasikannya, kita siapkan datanya

Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter

Kemudian pada model kita lakukan pemanggilan query

public function get_menu(){

        $this->db->select('*');
        $this->db->from('tbl_menu');
        $this->db->where('parent_id', 0);

        $categories = $this->db->get()->result();
        $i=0;
        foreach($categories as $p_cat){
            $categories[$i]->sub = $this->get_sub_menu($p_cat->id_pcategory);
            $i++;
        }
        return $categories;
    }

Pada fungsi get_menu() kita melakukan pemanggilan query yang hanya parent_id nya dengan nilai 0, kemudian langsung kita lakukan looping di dalamnya dan kita return semua hasilnya. Selanjutnya tinggal kita buat lagi fungsi untuk menu child nya, yang mana kita sudah memberikan fungsi get_sub_menu() kita buat fungsi nya juga di dalam model yang sama

public function get_sub_menu($id){

        $this->db->select('*');
        $this->db->from('tbl_menu');
        $this->db->where('parent_id', $id);

        $categories = $this->db->get()->result();
        $i=0;
        foreach($categories as $p_cat){
            $categories[$i]->sub = $this->get_sub_menu($p_cat->id_pcategory);
            $i++;
        }
        return $categories;       
    }
Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter

Selanjutnya kita akan panggil di dalam controller nya

public function fetch_menu($data){

			$menu1 = "";
		foreach($data as $menu){
			$menu1 .= "<li><a href=".site_url('parent-menu/'.$menu->slug).">".$menu->category_name."</a>";

			if(!empty($menu->sub)){

				$menu1 .= "<ul>";

				$menu1 .= $this->fetch_sub_menu($menu->sub);

				$menu1 .= "</ul>";
			}
			$menu1 .= '</li>';
		}
		return $menu1;

	}

Pada controller kita membuat fungsi fetch_menu() yang di dalam nya kita lakukan looping untuk menampilkan menu parent nya, kemudian kita juga akan membuat fungsi untuk menampilkan child menu nya.

public function fetch_sub_menu($sub_menu){
		$sub = "";
		foreach($sub_menu as $menu){

			$sub .= "<li><a href=".site_url('child-menu/'.$menu->id).">".$menu->name_menu."</a>";
			
			if(!empty($menu->sub)){

				$sub .= "<ul>";

				$sub .= $this->fetch_sub_menu($menu->sub);

				$sub .= "</ul>";
			}		
			$sub .= '</li>';
		}
		return $sub;
	}
Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter

Kemudian tinggak kita panggil di dalam fungsi index() dan kita tampilkan pada view nya

public function index(){	
		$menu = $this->main_model->get_menu();
		$data['menu'] = $this->fetch_menu($menu);
		$this->load->view('welcome_message',$data);
	}
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>
<body>
	<h2>Cara Membuat Fungi Menu Dinamis Dengan Codeigniter</h2>
	<ul>
		<?php echo $menu; ?>
	</ul>
</body>
</html>

Maka hasilnya seperti gambar di bawah ini

Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter

Lalu kita akan coba tambahkan child menu nya sebanyak 4 level

Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter

Maka hasilnya seperti gambar di bawah ini

Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter

Bagaimana, mudah sekali bukan..??

Tampilan akan menyesuaikan dengan databasenya, dan juga level menu sudah dinamis. Pada contoh di atas saya masukkan data menu sampai level 4, jika teman – teman ingin menambah levelnya silahkan tambah pada database table nya. Secara otomatis tampilan dinamis sesuai parent nya, baik sekian pada artikel kali ini tentang Cara Membuat Fungsi Menu Dinamis Dengan Codeigniter. Tentu kita akan jumpa kembali pada artikel selanjutnya, terimakasih dan sampai jumpa.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.