Tutorial CodeIgniter : Membuat TreeView Menu Dengan Sumber Data Dari Database

Tumben mood saya jelek (baca:galau) di awal minggu ini, yaw gak beda jauh lah dengan wajah saya ini. Pikiran bercabang kemana-mana antara kerjaan, tugas kampus, laporan-laporan, rencana untuk skripsi dan yang terakhir rencana untuk pulang ke kampung. Kalau sudah seperti ini, saya punya trik jitu yaitu boci alias bobok ciang :p. Setelah bangun dari boci, akhirnya saya menemukan permasalahannya. Ternyata sangat sederhana, yaitu saya merasa tertekan dengan kegiatan kemarin yang hanya diisi dengan kejar tayang postingan tentang design pattern dan sekarang saya sedang berada di titik kejenuhan. Maka dari itu, pada postingan kali ini saya akan membagikan sebuah postingan tentang cara Membuat TreeView Menu Dengan Sumber Data Dari Database di CodeIgniter. Berhubung kemarin juga ada pengunjung yang request tentang tutorial seperti ini, maaf yaw baru sekarang sempat saya action :). Untuk membuat sebuah treeview menu sebenarnya cukup sederhana, kita tinggal menggunakan sebuah contoh treeview menu yang banyak disediakan gratis di internet. Masalah pun muncul, ketika kita ingin membuat sebuah treeview menu yang dinamis dalam artian tanpa batasan child dan parent. Dulu saya sempat menemukan sebuah library tree menu yang memang dibuat untuk diterapkan di codeigniter atau tanpa codeigniter (coding manual). Library ini didalamnya sudah terdapat javascript yang berfungsi untuk mem-parsing data hasil query database ke bentuk array, yang selanjutnya di parsing lagi ke format html. Kita langsung aja ke contoh penerapannya, cekidot gan….

1. Ini saya coba di CodeIgniter sesuai permintaan pengunjung blog. Kita buat dulu sebuah controler dengan nama parent_child dan ketikkan kode di bawah ini.

class Parent_Child extends CI_Controller {

	function __construct()
	{
		parent::__construct();
		$this->load->library('tree');
		$this->load->model('p_c_model');
	}

	function index()
	{
		$data["menu"] = $this->p_c_model->tampil_menu();
		$this->load->view('menu/home',$data);
	}
}

2. Sekarang kita beralih ke class model, disini query-nya juga sangat sederhana yaitu menyeleksi beberapa field dari tabel menu.

Class p_c_model extends CI_Model {

	function __construct()
	{
		parent::__construct();
	}

    function tampil_menu()
	{
		$q = $this->db->query();
		return $q;
	}
}

3. Yang terakhir kita buat sebuah view untuk menampilkan tree menu dari database. Dan jangan lupa, copy file library Tree.php ke folder libraries aplikasi.

	$this->tree->setFolderImage('asset/images/');
	$this->tree->addToArray(100,'Contents Category',0);
	foreach($menu->result_array() as $rows) {
		$this->tree->addToArray($rows['id_menu'], $rows['menu'],$rows['parent'], base_url().'web/'.$rows['id_menu']);
	}

	$this->tree->writeCSS();
	$this->tree->writeJavascript();
	$this->tree->drawTree();

Library Tree ini sangat membantu kita untuk mebuat sebuah tree menu dengan data yang dinamis dan cara penggunaanya juga sangat mudah. Dulu sebelum bertemu dengan library tree menu ini, saya membuat sendiri tree menu secara manual dan bisa ditebak terkendala ketika data induk (parent) serta data anak (child) yang makin bertambah banyak. OK deh, sekian dulu postingan saya kali ini dan mudah-mudahan bermanfaat untuk kita semua.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like]Download Aplikasi[/to_like]

8 comments

  1. nisha Reply

    Saya masih baru dalam programming. Saya ada menggunakan code treeview yang anda tunjukkan. Ia sangat membantu, cuma saya ada masalah apabila, jika tiada data dlm DB, akan dipaparkan error, pada fail tree.php line 245. Di mana harus saya letakkan if statement supaya jika tiada data dlm DB, akan dipaparkan ‘Tiada Maklumat’ ?

    Harap dapat membantu..Terima kasih..

    • Gede Lumbung Post authorReply

      terima kasih atas review dari library tree ini, sangat berguna untuk saya dan rekan-rekan yang lainnya… 🙂

  2. gung gus Reply

    gede, mau tanya library tree itu library tree dari mana yah? darimana saya dapat memperolehnya? Terimakasih.

  3. danamon Reply

    base_url().’web/’.$rows[‘id_menu’]

    fungsi web/ itu buat apa ya mas?

  4. azmi Reply

    gan saya nemu error kayak gini..

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined property: CI_Loader::$tree

    Filename: views/welcome_message.php

    Line Number: 7

    Fatal error: Call to a member function setFolderImage() on a non-object in C:\xampp\htdocs\app\application\views\welcome_message.php on line 7

    ini file view.php saya

    tree->setFolderImage(‘tree->addToArray(100,’Contents Category’,0);
    foreach($menu->result_array() as $rows) {
    $this->tree->addToArray($rows[‘id_menu’], $rows[‘menu’],$rows[‘parent’], base_url().’web/’.$rows[‘id_menu’]);
    }

    $this->tree->writeCSS();
    $this->tree->writeJavascript();
    $this->tree->drawTree();
    ?>