How to Integrate Laravel With AdminLTE Bootstrap Dashboard

In this tutorial we shall learn how to integrate Laravel with AdminLTE Bootstrap Dashboard, AdminLTE Bootstrap Dashboard is an Open Source admin dashboard and control panel which provides a range of responsive, reusable, and commonly used components.
We shall create a new laravel project, integrate AdminLTE in our laravel project and display the demo page showing AdminLTE dashboard.

  • let’s get started with coding
  • Creating new Laravel Project

  • Open your command prompt and navigate to the directory where you want place your project.
  • Create your project by typing.
  • laravel new project

  • app is the name of your project.
  • Alternatively you can use composer to createnew laravel project by running the following in command prompt.
  • To test your laravel project. Run the following in your command prompt.
  • Serving New Laravel Project

  • The next thing to do is to set authentication key.
  • Type the following.
  • php artisan key generate

    Downloading AdminLTE dashboard

  • Click here to download the AdminLTE Dashboard.
  • When the download is complete unzip the folder.
  • AdminLTE directory Struture

    Intergrating AdminLTE with Laravel

  • In your laravel project create a new folder under public and name it assets. app => public => assets.
  • Inside the the assets folder create two other folder namely css and js.
  • Copy the following css and js files from you AdminLTE to your Laravel new created css and js folders.
    AdminLTE/bootstrap/css/bootstrap.min.css => laravel/public/assets/css/
    AdminLTE/dist/css/AdminLTE.min.css => laravel/public/assets/css/
    AdminLTE/dist/css/skins/_all-skins.min.css => laravel/public/assets/css/

    AdminLTE/plugins/jQuery/jquery-2.2.3.min.js => laravel/public/assets/js/
    AdminLTE/bootstrap/js/bootstrap.min.js => laravel/public/assets/js/
    AdminLTE/dist/js/app.min.js => laravel/public/assets/js/

    Loading AdminLTE css and js in our Laravel Project

  • Create a new file under resources/views and name it master.blade.php
  • This file loads all the css and js.
  • Copy and Paste the code below in your master.blade.php
  • Demo Page to show AdminLTE

  • Create a new file in your views name it demo.blade.php.
  • Copy and paste the code below.
  • Create a route to load our demo page

  • Open web.php locate under routes folder
  • Copy and Paste the code below.
  • That’s all let’s now run our project.
  • In your command prompt navigate to your project and type
  • Serving New Laravel Project

  • Open your browser and type localhost:8000/demo and you will see the following output.
  • Integrating Laravel With AdminLTE Bootstrap Dashboard

  • To download the source code click here
  • If you have need more help or have question do comment below.