Admin Dashboard + PHP + Laravel MDB Pro component

Bootstrap 5 integration with PHP & Laravel

MDB Integration - Admin Dashboard built with the latest Bootstrap 5, PHP, Laravel & Material Design 2.0

Live preview

Prerequisites


Installation

Once you've downloaded our template, navigate to the project folder and run following commands in the terminal:

  1. composer dump-autoload
  2. composer install
  3. npm install
  4. cp .env.example .env

Database configuration


1. Create a database

For the application to work correctly, you need to create a new MySQL database. For the purposes of this guide, we named it mdb_admin_dashboard_laravel, but you can use your custom database name here.

In this instruction we won't get into details about MySQL databases and how to set them up - you can learn more here:


2. Configure connection

To connect to a database, we need to configure the connection parameters in the .env file:


            DB_CONNECTION=mysql
            DB_HOST=127.0.0.1
            DB_PORT=3306
            DB_DATABASE=mdb_admin_dashboard_laravel
            DB_USERNAME=root
            DB_PASSWORD=
          

Replace username and password values with your credentials. If you created database with a custom name in the first step, paste it in the DB_DATABASE field. Otherwise, leave the default mdb_admin_dashboard_laravel name.


3. Migrations

Now, when everything is set, we can run automatic migrations to create the required tables and columns in the database.

In your terminal run:

 php artisan migrate 

Once you refresh your database, you should see new tables and columns.


4. Seeding

Laravel includes a simple method that allow to seed your database with test data.

In your terminal run:

 php artisan db:seed 

Once you refresh your database, you should see test data.


Run the application

Now it's time to run our app. In your console run the following command:

 php artisan serve 

Note: The app will start on port 8000.


Usage

Our template provides several functionalities for your app out of the box:


1. Login / Logout

The full version of the application is available only to a logged-in user (admin user also has access to the users management panel). The application uses cookies based authentication.

After logout, cookies will be deleted and user will be redirected to the login/register page.


2. Registration

You can add new user by completing the registration form. To create an user with admin priveleges, you need to manually add the user with a specific role_id to the users table in the database.


3. User Profile

Each user can update his profile (avatar, username, password) by submitting the form in the User Profile view.


4. User Management (admin only)

User with the admin privileges can update information about other users.


Defaults

The application seeds the default data when applying initial migration. You can change the default settings in the database/seeders/DatabaseSeeder.php file.


1. Users

By default, the seeder will create five normal users with random data and one admin user with following credentials:


            {
              name: "Admin",
              email: "admin@mdbootstrap.com",
              password: "mdbootstrap",
              roleId: 1
            }
          

2. Roles

  • Admin (id: 1)
  • User (id: 2)

3. Traffic Data

Five randomly generated entries used in chart and table in the Dashboard view.


Backend features


1. Models

Models available in your app out of the box:

  • Users
  • Role
  • TrafficData

2. Controllers

Controllers:

  • LoginController - user login management
  • RegisterController - user registration management
  • DashboardController - rendering dashboard view
  • ProfileController - rendering user profile view, profile data updates management
  • UsersController - rendering admin panel view, user data updates management

Frontend features


1. Views

Views for your application:

  • Index - Login and register forms
  • Dashboard - General Dashboard
  • UserProfile - User data and password management
  • UserManagement - Admin panel

2. Public folder

  • /mdb - MDB 5 files
  • /js - js files for views
  • /css - css files for views