Tree Menu Dinamis Dengan PHP MySQL dan JSTree

Assalamualakum wr.wb...

Hai blogger semua, kesempatan ini saya akan sharing cara membuat Three Menu Dinamis Dengan PHP MySQL dan JSTree.

Tampilan menu berbentuk pohon atau sering disebut tree menu dapat membuat menu yang begitu banyak lebih terlihat sedrhana, Cara ini banyak digunakan oleh para pengembang aplikasi atau pengembang software.

Oleh karena itu saya rasa share tutorial untuk membuat tree menu bisa bermanfaat buat yang membutuhkan, terutama bagi yang baru belajar pertman kali.

Tidak usah berlama lama langsung saja kita praktek.

Pertama buat database baru dengan nama dynamicmenu dan tabel baru dengan nama simmenu. Database dynamicmenu ini yang nanti akan kita gunakan untuk menyimpan tabel simmenu dan tabel simmenu ini yang akan kita gunakan untuk menampung seluruh data menu yang akan kita buat.

Pertanyaannya kenapa kita mengunakan tabel tidak ditulis manual saja pada sourcecode?

Alasannya dengan cara disimpan pada database ini atau tabel kita bisa membuat setting menu lebih dinamis. Kita bisa membuat relasi tabel dengan hak acess tiap pengguna. Dibandingkan dengan menyimpan langsung pada code program, Cara ini jauh lebih sederhana dan lebih mudah.

Detail silahkan download detail pada tombol dibawah.

Baca Juga:

Selanjutnya buat projek baru dengan susunan direktory seperti gambar berikut.

File DBConnection kita gunakan untuk melakukan koneksi dengan database dan tabel yang sebelumnya kita sudah buat. Oh iya untuk design tabel dan susunan field atau isi data bisa kamu langusng download saja pada file dibawah, jika di tulis disini rasanya akan terlalu panjang.

Source Code DBConnection.php


class DBConnection {

    //put your code here
    private $host = "localhost";
    private $dbName = "dynamicmenu";
    private $usr = "root";
    private $pwd = "root";

    public function getConnection() {
        try {
            $conn = new PDO("mysql:host=$this->host;dbname=$this->dbName", $this->usr, $this->pwd);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        } catch (PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
        }
        return $conn;
       
    }
   

}

File MenuDao.php akan kita gunakan untuk melakukan manipulasi database diantaranya select, insert update dan delete kalau orang sering bilang CRUD. Cara ini mungkin bagi kamu yang tidak biasa mengunakan OOP akan sedikit bikin pusing, tapi jika sudah biasa cara ini malah membuat program kita menjadi lebih terstruktur. Tiap hal yang berhubungan dengan data acess object akan dilakukan disini (tidak ada select pada halaman tampilan).
Code MenuDao.php


class MenuDao {

    private $connection;

    //put your code here
    public function __construct() {
        $con = new DBConnection();
        $this->connection = $con->getConnection();
    }
    
    function __destruct() {
        $this->connection =null;
    }
    
    public function getMenuById() {
        try {
            $listmenu = array();
            $sql = "select * from simmenu where is_active=1 order by ordered";
            $stmt = $this->connection->prepare($sql);
            $stmt->execute();
            foreach ($stmt->fetchAll() as $k => $v) {
                $menu = new Menu();
                $menu->setMenuId($v['menu_id']);
                $menu->setMenuName($v['menu_name']);
                $menu->setParent($v['parent']);
                $menu->setIcon($v['icon']);
                $menu->setLink($v['link']);
                $listmenu[] = $menu;
            }
            return $listmenu;
        } catch (Exception $exc) {
            echo $exc->getTraceAsString();
        }
    }

}

File Menu.php kita gunakan untuk menampung objek menu, nantinya setiap process baik mengambil data atau mengirim data akan selalu melibatkan objek ini.
Code Menu.php


class Menu {
    //put your code here
    private $menuId;
    private $menuName;
    private $parent;
    private $icon;
    private $link;
    private $selected;
    
    function getSelected() {
        return $this->selected;
    }

    function setSelected($selected) {
        $this->selected = $selected;
    }
    
    function getMenuId() {
        return $this->menuId;
    }

    function getMenuName() {
        return $this->menuName;
    }

    function getParent() {
        return $this->parent;
    }

    function getIcon() {
        return $this->icon;
    }

    function getLink() {
        return $this->link;
    }

    function setMenuId($menuId) {
        $this->menuId = $menuId;
    }

    function setMenuName($menuName) {
        $this->menuName = $menuName;
    }

    function setParent($parent) {
        $this->parent = $parent;
    }

    function setIcon($icon) {
        $this->icon = $icon;
    }

    function setLink($link) {
        $this->link = $link;
    }

}

File index.php nah pada file ini baru akan dilakukan process penggabungan semuanya dari file-file yang suah kita buat sebelumnya sekaligus kita tampilkan hasilnya.
code index.php


    require_once './config/DBConnection.php';
require_once './model/Menu.php';
require_once './dao/MenuDao.php';
$menudao = new MenuDao();
$menuById = $menudao->getMenuById();
//untuk mendapatkan menu
function has_children($rows, $id) {
    foreach ($rows as $row) {
        if ($row->getParent() == $id)
            return true;
    }
    return false;
}

function build_menu($rows, $parent = 0) {
    $result = "";
    foreach ($rows as $row) {
        if ($row->getParent() == $parent) {
            if ($row->getLink() == "") {
                $result .= "
{$row->getMenuName()}";
            } else {
                $result .= "
getLink()}')\">{$row->getMenuName()}";
            }
            if (has_children($rows, $row->getMenuId()))
                $result .= build_menu($rows, $row->getMenuId());
            $result .= "
";
        }
    }
    $result .= "
";

    return $result;
}

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :