Bootstrap 5 integration with Node.js & Express.js
MDB Integration - Admin Dashboard built with the latest Bootstrap 5, Node.js, Express.js & Material Design
Admin Dashboard integration build with the latest Bootstrap 5, Node.js and Express.js. Various examples of implementation, backend and frontend functions, and much more.
Before starting the project make sure to install the following utilities:
To install the project please follow these steps:
- Download and unzip an Advanced package
Run the terminal in
/integrations/admin-dashboard-node-expressdirectory, placed inside the package
npm installin the terminal
To operate the database we will need a web server utility. We recommend XAMPP. Keep in mind that only Apache and MySQL modules are necessary. Here's the guide:
- Install XAMPP and run as an administrator
- Make sure that Appache and MySQL modules are running
- MySQL should work on port 3306 (it's the default option)
Move to the
phpmyadminpage (Admin button in the MySQL section) and create a new database called
If you want to change MySQL db config, please update the .env file in the admin dashboard
root directory. It contains the configuration of your database and app port. The defaults
Run the application
To run the project please follow these steps:
- Run the terminal in
npm startin the terminal
Application should create some default database records and return the message:
Server is running on port 3000.
- You can now open the
http://localhost:3000/page in the browser
Main view (not logged in user):
Panel with the login form for already registered users. By default there are two users:
- email: firstname.lastname@example.org, password: mdbootstrap, role: Admin
- email: email@example.com, password: mdbootstrap, role: User
- Panel with the registration form with client and server side validation.
Dashboard view (logged in user):
Sample content with some SEO statistics. The last chart and table are filled with the data
from the MySQL table called
Sidenav with links to
User management (only with Admin role)pages
- Navbar with user avatar and logout button
My profile page:
- Section with user data (name, avatar) with an edit option
- Section with user password change
User management page (only with Admin role):
- Section with all users data
- Ability to remove any user
- Ability to change roles
By default the application creates three MySQL tables:
Each of the above tables is populated with sample content by default. There are two users (firstname.lastname@example.org, email@example.com), two roles (Admin, User), and five random traffic data records for the SEO dashboard.
In this application we use Sequelize. Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more. The documentaion can be found here
Models are the essence of Sequelize. A model is an abstraction that represents a table in your database. In Sequelize, it is a class that extends Model. The model tells Sequelize several things about the entity it represents, such as the name of the table in the database and which columns it has (and their data types. A model in Sequelize has a name. This name does not have to be the same name of the table it represents in the database. Usually, models have singular names (such as User) while tables have pluralized names (such as Users), although this is fully configurable.
In our project there are three model classes: User, Role, TrafficData.
Routes and controllers:
A route is a section of Express code that associates an HTTP verb (GET, POST, PUT, DELETE, etc.), a URL path/pattern, and a function that is called to handle that pattern. There are several ways to create routes. In our app we used the express.Router middleware as it allowed us to group the route handlers for a particular part of a site together and access them using a common route-prefix. Controllers represent methods which are used for adding model functionalities, such as creating, updating or deleting instances.
Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next. Middleware functions can perform the following tasks:
- Execute any code
- Make changes to the request and the response objects
- End the request-response cycle
- Call the next middleware function in the stack
If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging.
MDB UI KIT:
The project includes our ui kit, with which you can build basic views very quickly. Almost all application layouts were built with the MDB admin dashboard templates.
Views and Layouts:
All frontend content is placed in the
views directory. There are two main pages
(index, dashboard) and five more layouts (footer, navbar, sidenav, seo-dashboard,
user-profile, user-management). Thanks to EJS we can show some content conditionally (e.g.
depending on the user's role).