Tutorial Create Dynamic Sidebar Menu on MySQL, Node.js, Express, AdminLTE For Beginner

How to easily create dynamic sidebar menu AdminLTE using node, express and Mysql. I have made several articles about how to create dynamic sidebar menu on adminLTE with the permissions of each user on PHP and MYSQL. For the implementation of the node.js, express.js and jade template engine is slightly different. The menu that can be accessed by each user will be stored in a session.

So that you can follow this tutorial very well, you should read my tutorial how to create a CRUD using node.js express.js, MySQL, and adminLTE from the previous article. Please follow this link

In addition, if you want to read the article how to create dynamic sidebar menu in adminLTE and PHP, please follow this link

Okay, let’s start the following tutorials:

1. Make sure you have created a MySQL database as node.js (read my previous articles). and sure to make 4 of the table named customer, r_menu, r_menu_sub and user as shown below:

Create Database Node Js Tutorial Create Dynamic Sidebar Menu On MySQL, Node.js, Express, AdminLTE For Beginner

2. Copy the following code to add new data to the table r_menu, r_menu_sub, and user table

r_menu table

r_menu_sub table

user table

3. Please download my previous project here, so you no longer need to create from scratch (Since this article is a continuation of the previous article).

4. Make sure your package.json as mine in the picture below so that the application can run properly.

Package.json Tutorial Create Dynamic Sidebar Menu On MySQL, Node.js, Express, AdminLTE For Beginner

5. Create a new module to check the value of the array (such as in_array function in PHP)

6. Edit routes index.js on folder routes/index.js and copy the following code

7. Edit sidebar.jade (views/layout/sidebar.jade) and copy the following code:

8. Add a session variable at each route. For example, I added a session variable on routes customers.js

Save and run the node server with following script

on Linux

DEBUG=expressproject:* npm start

and on windows

set DEBUG=myapp:* & npm start

Open your browser and run http://localhost:3000/login

User: test@test.com

Password: 123456

If successful, your main page will display as shown below:

Main Menu Tutorial Create Dynamic Sidebar Menu On MySQL, Node.js, Express, AdminLTE For Beginner

To try permissions menu, please change user_menu value in user table. The latest value is 1,4,6 change with 1,2,3 and check the result.

To download the entire project, please share the link below to get the download link

Thus an article about Tutorial Create Dynamic Sidebar Menu on MySQL, Node.js, Express, AdminLTE For Beginner, hope useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

7 Comments

 Add your comment
  1. Hi, thanks for this very interesting articles
    I’ve downloaded your code, install and run without problems
    But it does’nt work is i change the main folder from expressproject to myapp
    Are there some files to modify inside prj?

  2. About previous message i’ve solved.. my mistake ! but the prj does’nt start with this error:

    /Users/mauro/Documents/Webapp prj/expressproject/views/layout/sidebar.jade:20 18| li.header 19| | Main Navigation > 20| for row, index in session_store.sidebar 21| li.treeview 22| a(href=’#’) 23| != row.icon Cannot read property ‘sidebar’ of undefined

    TypeError: /Users/mauro/Documents/Webapp prj/expressproject/views/layout/sidebar.jade:20
    18| li.header
    19| | Main Navigation
    > 20| for row, index in session_store.sidebar
    21| li.treeview
    22| a(href=’#’)
    23| != row.icon

    Cannot read property ‘sidebar’ of undefined

    whats wrong ?

    • i put all menu and submenu parameter in session with name sidebar.Maybe there are steps left

      [php]
      if(nil+1 == rows.length)
      {
      session_store.sidebar = result;
      session_store.is_login = true;
      res.redirect(‘/customers’);
      }
      nil++;
      [/php]

      I hope fix your issue 🙂

  3. Sorry, which file need this new code to add ?

  4. I just found this code on line 75 of index.js

  5. i’ve used you original code..
    but i’ll try
    🙂

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.