Create admin panel using laravel-AdminLTE package

Hello coders, Today i will show you how to create admin panel in laravel. We will use most famous free AdminLTE theme for this tutorial. AdminLTE theme comes in a laravel package so it’s very easy and quick to setting up admin panel in laravel with AdminLTE theme.

Setup Laravel and Database configuration

Lets start by creating brand new laravel project using below artisan command.

composer create-project --prefer-dist laravel/laravel lara-admin

This command will create new laravel project.

Setup database credentials in .env file

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

Now run migration using migration artisan command. This migration command will generate database tables from migrations.

php artisan migrate

Install AdminLTE package

Now we will use AdminLTE package for AdminLTE theme. Require the package using composer

composer require jeroennoten/laravel-adminlte

If you are using below laravel 5.5 then you need to add service provider to providers in config/app.php

JeroenNoten\LaravelAdminLte\ServiceProvider::class,

Laravel 5.5 and its above version uses Package Auto-Discovery, so doesn’t require you to manually add the ServiceProvider.

Now publish the public assets.

php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets

Next, We will create authentication pages (Login, Register, Forgot Password and Reset Password) in our app. This package ships with a make:adminlte command that behaves exactly like make:auth (introduced in Laravel 5.2) but replaces the authentication views with AdminLTE style views. Run below command (Try this only above laravel 5.2).

php artisan make:adminlte

This command will generate authentication pages with AdminLTE style views.

Registration Page

Login Page

Here we will make some route changes in routes/web.php file.

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return redirect('login');
});

Auth::routes();

Route::group(['middleware' => 'auth'], function () {
    Route::get('logout', '\App\Http\Controllers\Auth\[email protected]');
});

Theme Configuration

Next, publish configuration file using below command.

php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config

This will create a new configuration file adminlte.php under config/ directory. You can change template skin, title, menu etc. from config/adminlte.php file.

Lets configure menu first. Here we need only two menu items dashboard and users.

config/adminlte.php

<?php

...

'menu' => [
    'MAIN NAVIGATION',
    [
        'text'        => 'Dashboard',
        'url'         => 'dashboard',
        'icon'        => 'file',
    ],
    [
        'text'        => 'Users',
        'url'         => 'user',
        'icon'        => 'users',
    ],
],

...

After updating config/adminlte.php file. run below two command. So all the changes will visible in browser.

php artisan config:clear
php artisan cache:clear

Create Dashboard

Now, lets create Admin folder under app/Http/Controllers directory.

Next, we will create dashboard controller which contains important data like graphs, count-box etc. In our app dashboard we will show only count box. Lets create DashboardController using below artisan command.

php artisan make:controller Admin/DashboardController

app/Http/Controllers/Admin/DashboardController.php

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;

class DashboardController extends Controller
{
    
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
     public function index() 
     {
         $users = User::count();
         return view('admin.dashboard', ['users' => $users]);
     }

}

Now create a view file dashboard.blade.php  in resources/views/admin directory.

To use the template, create a blade file and extend the layout with @extends('adminlte::page')

dashboard.blade.php

@extends('adminlte::page')

@section('title', 'Dashboard | Lara Admin')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
  <div class="row">
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-aqua">
        <div class="inner">
          <h3>{{ $users }}</h3>
          <p>Users</p>
        </div>
        <div class="icon">
          <i class="ion ion-stats-bars"></i>
        </div>
        <a href="/user" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
  </div>
@stop

Add dashboard route in routes/web.php file.

<?php

...

Route::group(['middleware' => 'auth'], function () {
    ...
    Route::get('/dashboard', 'Admin\Da[email protected]')->name('dashboard');
    ...
});

This will create a dashboard with count box shown as below image. You can access your app dashboard using http://127.0.0.1:8000/dashboard

Create User Listing

Next, we will create UserController using below artisan command.

php artisan make:controller Admin/UserContoller

UserConroller.php

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Datatables;
use App\User;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $users = User::all();
        return view('admin.user.list', ['users' => $users]);
    }
}

Now lets create list.blade.php file in resources/views/admin/user directory.

list.blade.php

@extends('adminlte::page')

@section('title', 'Users | Lara Admin')

@section('content_header')
    <h1>Users</h1>
@stop

@section('content')
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          @if(Session::has('message'))
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
          @endif     
        </div>
        <div class="box-body">
          <table id="laravel_datatable" class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Updated At</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($users as $user)
                <tr>
                  <td>{{ $user->id }}</td>
                  <td>{{ $user->name }}</td>
                  <td>{{ $user->email }}</td>
                  <td>{{ $user->created_at }}</td>
                  <td>{{ $user->updated_at }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
@stop

@section('js')
<script>
  $(document).ready( function () {
    $('#laravel_datatable').DataTable();
  });
</script>
@stop

Now add user access route in web.php file.

routes/web.php

<?php

...

Route::group(['middleware' => 'auth'], function () {
    ...
    Route::get('/user', 'Admin\[email protected]');
    ...
});

Now access http:://127.0.0.1:8000/user in your app. This will show user listing as shown below image.

Update Post Authentication Routes

By default, after successful authentication, user redirect to /home page. But we need to redirect them on /dashboard page. So we need to change as below in respected files.

app/Http/Controllers/Auth/LoginController.php

/**
 * Where to redirect users after login.
 *
 * @var string
 */
protected $redirectTo = '/dashboard';

app/Http/Controllers/Auth/RegisterController.php

/**
 * Where to redirect users after registration.
 *
 * @var string
 */
protected $redirectTo = '/dashboard';

This will redirect on dashboard page after successful authentication.

Download Code

You can download code from github

Conclusion

You can make more changes in template as per your requirement from its official documentation. I hope that you may like this tutorial on create admin theme in laravel using laravel-AdminLTE package. Please share with your friends. Thank you.