• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » CSS » Creating dynamic sidebar menu with Mysql and AdminLTE Bootstrap Template

Creating dynamic sidebar menu with Mysql and AdminLTE Bootstrap Template

By Sigit Prasetya Nugroho ∙ December 2, 2014 ∙ CSS, PHP ∙ 24 Comments

Share : TwitterFacebookTelegramWhatsapp

To create dynamic and exciting sidebar menu, you need a database for the storage and website templates that facilitate in making the layout (In this article, I use adminLTE bootstrap, read my other tutorial here or check adminLTE official website for more information).

how to create dynamic sidebar menu with mysql and adminLTE bootstrap

In this tutorial you will find information about creating and managing dynamic sidebar menu with mysql and adminLTE Bootstrap.

Table of Contents

  • 1  Creating Table menu with myqsl for dynamic sidebar menu 
  • 2  Creating PDO Class to connect php and mysql 
    • 2.1  Creating dynamic sidebar menu in adminLTE Bootstrap Template 

 Creating Table menu with myqsl for dynamic sidebar menu 

Add new table in your database with name dynamic_menu , copy this table structure below to you

Related Articles :

  • How To Upload Image Using PHP, AdminLTE Framework And JQuery Plugin For Beginner
  • Create a Sales Form / POS – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 5
  • Create Master Item / Product Form – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 4.
Column NameData typeLengthPrimary KeyNot nullauto increment
idtinyint3yesyesyes
parent_idtinyint3yes
titlevarchar100yes
urlvarchar100yes
menu_ordertinyint3yes
statustinyint1
leveltinyint1
iconvarchar100
descriptionvarchar150

Or run this mysql script with include example menu

1
2
3
4
5
6
7
8
9
10
11
12
CREATE TABLE `dynamic_menu` (
  `id` tinyint(3) unsigned NOT NULL AUTO_INCREMENT,
  `parent_id` tinyint(3) unsigned NOT NULL DEFAULT '0',
  `title` varchar(100) NOT NULL DEFAULT '',
  `url` varchar(100) NOT NULL DEFAULT '',
  `menu_order` tinyint(3) unsigned NOT NULL DEFAULT '0',
  `status` tinyint(1) DEFAULT '1',
  `level` tinyint(1) DEFAULT NULL,
  `icon` varchar(100) DEFAULT NULL,
  `description` varchar(150) DEFAULT NULL,
  PRIMARY KEY (`id`)
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (1,0,'Home','',1,1,0,'fa fa-dashboard',NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (3,0,'Setup','#',5,1,2,'fa fa-sitemap',NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (5,0,'Administrator','#',6,1,1,'fa fa-shield',NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (6,5,'User','/form/fdatauser.php',1,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (2,3,'Setup Kategori','/form/fkategori.php',2,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (4,0,'Invent','/form/fdataasset.php',2,1,0,'fa fa-plus-square',NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (35,5,'Office Setup','/form/fperusahaan.php',3,1,2,'',NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (33,0,'Report','/form/flaporan.php',4,1,0,'fa fa-bar-chart-o',NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (36,31,'Transaction History','/form/fdatatransaksi.php',7,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (34,3,'Brand Setup','/form/fmerk.php',4,0,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (41,31,'Refund Transaction','/form/fpengembalian.php',5,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (38,3,'Category Setup','/form/fgolongan.php',1,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (39,31,'Sales Transaction','/form/fpenjualan.php',3,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (40,31,'Purchase Transaction','/form/fpeminjaman.php',4,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (42,3,'Type Setup','/form/fjenis.php',3,0,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (43,31,'Others Transaction','/form/flainlain.php',6,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (44,0,'Process','/form/fproses.php',3,1,1,'fa fa-spinner',NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (45,4,'Invent Setup','/form/fdataasset.php',1,1,1,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (46,4,'Bopi Setup','/form/fbopi.php',2,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (47,5,'Log user','/form/floguser.php',2,1,1,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (48,5,'Admin tool','/form/adminform.php',4,1,2,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (49,33,'Lastmonth Report','/form/flaporanlama.php',1,1,0,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (50,4,'Taka Setup','/form/ftaka.php',3,1,1,NULL,NULL);
insert  into `dynamic_menu`(`id`,`parent_id`,`title`,`url`,`menu_order`,`status`,`level`,`icon`,`description`) values (51,4,'Invent Data','/application/data-invent/',1,1,0,NULL,NULL);

Explanation

Column NameDescription
idId menu , auto increment
parent_idEvery menu has parent_id
titleMenu title
urllink url to your page
menu_orderorder menu
status1 or 0 value for active or deactive
levelUser level
iconbootstrap menu icon
descriptionTitle description

 Creating PDO Class to connect php and mysql 

Create php file as pdo_db.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
class core_db extends PDO{
    private $engine;
    private $host;
    private $database;
    private $user;
    private $pass;
 
    private $result;    
 
    public function __construct()
        {
        $this->engine   = 'mysql';
        $this->host     = 'localhost';
        $this->database = 'mydatabase';
        $this->user     = 'root';
        $this->pass     = '';
 
        $dns = $this->engine.':dbname='.$this->database.";host=".$this->host;
        parent::__construct( $dns, $this->user, $this->pass );
    }  
 
        public function getResult()
        {
       return $this->result;
   }
}
 
?>

 Creating dynamic sidebar menu in adminLTE Bootstrap Template 

In adminLTE code, we will find code below to create sidebar menu

1
2
3
<aside class="left-side sidebar-offcanvas">
..............
</aside>

Change these code with my code below to creating dynamic sidebar menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<aside class="left-side sidebar-offcanvas">
                <section class="sidebar">
                    <div class="user-panel">
                        <div class="pull-left info">
                        <p>Your company name</p>
                            <p>Welcome , </p>
                            <p>[Usename]</p>
                            <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                        </div>
                    </div>
                    <form action="#" method="get" class="sidebar-form">
                       <div class="footer">
                          <button type="submit" class="btn bg-olive btn-block">Logout</button>
                        </div>
                    </form>
 
<?php
require_once('pdo_db.php');
$database= new core_db;
$hasil=$database->query('SELECT id as menu_item_id, parent_id as menu_parent_id, title as menu_item_name,concat("/foldername",url)as url,menu_order,icon FROM menu ORDER BY menu_order');
    $refs = array();
    $list = array();
    while($data = $hasil->fetch(PDO::FETCH_ASSOC))
    {
        $thisref = &$refs[ $data['menu_item_id'] ];
        $thisref['menu_parent_id'] = $data['menu_parent_id'];
        $thisref['menu_item_name'] = $data['menu_item_name'];
$thisref['url'] = $data['url'];
$thisref['icon'] = $data['icon'];
        if ($data['menu_parent_id'] == 0)
        {
            $list[ $data['menu_item_id'] ] = &$thisref;
        }
        else
        {
            $refs[ $data['menu_parent_id'] ]['children'][ $data['menu_item_id'] ] = &$thisref;
        }
    }
    function create_list( $arr ,$urutan)
    {
if($urutan==0){
       $html = "\n<ul class='sidebar-menu'>\n";
}else
{
$html = "\n<ul class='treeview-menu'>\n";
}
        foreach ($arr as $key=>$v)
        {
            if (array_key_exists('children', $v))
            {
                $html .= "<li class='treeview'>\n";
$html .= '<a href="#">
                                <i class="'.$v['icon'].'"></i>
                                <span>'.$v['menu_item_name'].'</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>';
 
                $html .= create_list($v['children'],1);
                $html .= "</li>\n";
            }
            else{
$html .= '<li><a href="'.$v['url'].'">';
if($urutan==0)
{
$html .= '<i class="'.$v['icon'].'"></i>';
}
if($urutan==1)
{
$html .= '<i class="fa fa-angle-double-right"></i>';
}
$html .= $v['menu_item_name']."</a></li>\n";}
        }
        $html .= "</ul>\n";
        return $html;
    }
    echo create_list( $list,0 );
?>
                </section>
            </aside>

You can modify my code as you wish, if any question about how to create dynamic sidebar menu in adminLTE bootstrap, please leave comment 🙂

Another CSS Related Post :

  • Free Simple Admin Dashboard Bootstrap 4 By Seegatesite
  • 4 Best Sites To Download School And Education Icons Sets
  • How to Make a Shake Effect Validation Like the WordPress Login Form
  • [CSS] How To Fixed Select2 Responsive Width
  • Upgrade Responsive Bootstrap Table Using Footable Plugin
  • How To Centering And Make Full Width Youtube Iframe On Blog Article

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for Eneko AnasagastiEneko Anasagasti says

    May 25, 2015 at 1:24 pm

    Thank you for sharing this code!
    There is a small typo in the query ….FROM menu ORDER BY menu_order’);
    should be ….FROM dynamic_menu ORDER BY menu_order’); instead.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 26, 2015 at 9:11 am

      thx u 🙂

      Reply
  2. Avatar for ahmadahmad says

    February 18, 2016 at 10:54 am

    i want to know how to set user permission view for certain module

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      February 19, 2016 at 2:21 am

      hello ahmad, i create tutorial how to set user permissions view for certain module here

      How To Create User Permissions View To Dynamic Sidebar Menu AdminLTE

      hope resolve your problem 🙂

      Reply
  3. Avatar for ekaperintisekaperintis says

    March 10, 2016 at 11:21 am

    Terima kasih tutorialnya, bermanfaat buat saya.

    mungkin dikoreksi kali querynya kurang tepat ya harusnya diganti tabelnya jangan menu, khawatir bagi yang baru belajar kebingungan kenapa tidak bisa running.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      March 15, 2016 at 8:26 am

      terimakasih atas sarannya 🙂

      Reply
  4. Avatar for tomtom says

    July 18, 2016 at 2:16 pm

    many thanks for your work
    I found that it doesn’t add active class to the submenu after it was clicked.
    thanks again

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      July 18, 2016 at 2:44 pm

      yes, i didnt add active class to submenu.. you can add new class with jquery

      example : $("#menux").find("li.menu2").addClass("active")

      Reply
      • Avatar for LokmanLokman says

        October 21, 2016 at 11:27 am

        Bro. can you help to give the full code for this?

        Reply
        • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

          October 24, 2016 at 1:59 am

          Just follow these step.. Its easy and simple. 🙂

          Reply
  5. Avatar for dannydanny says

    December 8, 2016 at 3:54 am

    Mohon petunjuknya gan.
    Itu kan sub menu nya punya class ‘treeview-menu’ yah
    Kalo di template yang sub menu class nya beda-beda seperti class ‘second-level’ , ‘third-level’, ‘fourth-level’ , gimana yah caranya. saya coba utak-utik kok stuck. yang harusnya di level 1, masuk ke level 2, karena dia punya sub menu lagi. mohon arahannya, thank you

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 8, 2016 at 7:34 am

      Maksut anda multilevel ? didalam sub menu terdapat submenu lagi ?

      mungkin baca yang ini aja https://seegatesite.com/how-to-create-user-permissions-view-to-dynamic-sidebar-menu-adminlte/ , lebih komplit, tetapi saya belum membuat artikel yang pake PDO.

      di artikel yang saya berikan pada link diatas, saya membuat 2 tabel, yaitu tabel menu dan tabel sub_menu. Untuk merubah treeview-menu tambahkan field baru untuk menampung nama class pada tabel menu. Silahkan di baca-baca dl aja artikel yang https://seegatesite.com/how-to-create-user-permissions-view-to-dynamic-sidebar-menu-adminlte/ . Kalo ada waktu akan saya bikinkan yang multilevel dengan PDO. 🙂

      Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 8, 2016 at 8:51 am

      Sudah saya bikinkan tutorialnya, silahkan download disini.
      cara membuat dinamik menu dan multilevel menggunakan PDO
      url : mediafire.com/?iaao2g9blb9gsee
      pass : seegatesite.com

      Cuman saya belum membuat artikel diweb ini. semoga membantu

      Reply
  6. Avatar for AgusAgus says

    December 10, 2016 at 5:29 am

    Mohon bantuannya, bagaimana membuat menu dinamis seperti diatas bila menggunakan mysqli?

    Menurut agan, untuk menu bertingkat/multilevel baiknya menggunakan 1 tabel saja atau pakai 2 tabel (tbl menu dan tbl submenu).. Terima kasih sebelumnya.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 10, 2016 at 7:40 am

      Baca artikel ini https://seegatesite.com/how-to-create-user-permissions-view-to-dynamic-sidebar-menu-adminlte/ mungkin dapat membantu anda.

      Menurut saya pribadi saya lebih suka menggunakan 2 tabel seperti link yang telah saya berikan diatas. Untuk penggunaan dengan PDO, artikel sedang saya bikin 🙂

      Reply
  7. Avatar for AfriAfri says

    December 11, 2016 at 4:51 pm

    Mau nanya, kalau dengan menggunakan metode diatas ingin dibuat hak usernya seperti https://seegatesite.com/how-to-create-user-permissions-view-to-dynamic-sidebar-menu-adminlte/ bagaimana mas Sigit? Jadi hak user atas menu disimpan pada tabel usernya seperti tutorial yang di link barusan… Mohon bantuannya…

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      December 12, 2016 at 2:52 am

      iya… hak akses menu usernya disimpan di table user. Id submenunya dipisahkan dengan koma. Kemudian ketika melakukan looping sub menu , cek masing2 id sub menu apakah ada field user.

      Catatan : hak akses user yang di simpan di table user dipisahkan dengan koma. Cara aksesnya , silahkan gunakan fungsi explode pada PHP untuk dsimpan dalam array. Kemudian cek array tersebut dengan fungsi in_array

      Semoga menjawab pertanyaan 🙂

      Reply
  8. Avatar for ThienThien says

    October 27, 2017 at 4:41 pm

    Why the php code break after ‘->’ operator at $hasil=$database ->
    idk why but entire query string is not operated as well

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      October 29, 2017 at 5:34 am

      sory i didnt understand, where is your error ?

      Reply
      • Avatar for ThienThien says

        October 30, 2017 at 3:29 pm

        i’m using IntelliJ and MS SQL SERVER 2014, and the php code break after
        $database= new core_db;
        $hasil=$database->
        the “>” symbol right there is known as html element close, idk how to fix that :'(

        Reply
        • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

          October 31, 2017 at 4:53 am

          hello,
          change

          1
          $database = new core_db;

          with

          1
          $database= new core_db();

          hope fix your problems 🙂

          Reply
  9. Avatar for NilNil says

    November 23, 2017 at 2:11 am

    Hey, Thanks for the tutorial.

    Does the same applies if I am using the Top Navegation instead? or do i have to chane anything?

    Thanks

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 23, 2017 at 4:42 am

      Absolutely yes,

      Read another article

      https://seegatesite.com/dynamic-menu-adminlte-and-dashboard-page-tutorial-build-point-of-sale-with-php-pdo-mysql-and-jquery-part-2/

      to create dynamic top navigation menu adminlte

      🙂

      Reply
  10. Avatar for lekblekb says

    February 26, 2018 at 10:56 am

    thanks

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for lekbThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com