Admin LTE for Admin Panel in LARAVEL with admin login features

Introduction

This tutorial will guide you through setting up an Admin LTE template for an admin panel in a Laravel application, complete with admin login features. Admin LTE is a popular open-source admin dashboard template that provides a responsive layout, making it a great choice for building administrative interfaces. By the end of this guide, you will have a functional admin panel integrated with Laravel.

Step 1: Setting Up Laravel

1. Install Laravel:

   • Ensure you have Composer installed on your machine.
   • Run the following command to create a new Laravel project:

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

2. Navigate to the Project Directory:

   cd admin-panel
   

3. Start the Development Server:

   php artisan serve
   

   • Your application will be accessible at http://localhost:8000.

Step 2: Install Admin LTE

1. Download Admin LTE:

   • Clone the Admin LTE repository from GitHub or download it from the official website.
   • You can use the command:

     git clone https://github.com/Colorlib/AdminLTE.git
     

2. Move Admin LTE Files:

   • Copy the dist folder from the downloaded Admin LTE into your Laravel public directory, renaming it to adminlte.

3. Link CSS and JS:

   • Open your resources/views/welcome.blade.php file and link the Admin LTE CSS and JS files:

     <link rel="stylesheet" href="{{ asset('adminlte/css/adminlte.min.css') }}">
     <script src="{{ asset('adminlte/js/adminlte.min.js') }}"></script>
     

Step 3: Create Authentication

1. Install Laravel Breeze for Authentication:

   • Run the following command to install Laravel Breeze:

     composer require laravel/breeze --dev
     

   • Then, run the installation command:

     php artisan breeze:install
     

2. Run Migrations:

   • Execute the migration command to set up the necessary tables:

     php artisan migrate
     

3. Set Up Routes:

   • In your routes/web.php, ensure you have the following routes for authentication:

     Route::get('/dashboard', [DashboardController::class, 'index'])->middleware('auth');
     

Step 4: Create Admin Dashboard

1. Create Dashboard Controller:

   • Generate a new controller:

     php artisan make:controller DashboardController
     

2. Implement the Index Method:

   • Open DashboardController.php and add the following code:

     public function index()
     {
         return view('dashboard');
     }
     

3. Create Dashboard View:

   • Create a new Blade view file resources/views/dashboard.blade.php and use Admin LTE components:

     @extends('layouts.app')
     
     @section('content')
     <div class="container">
         <h1>Admin Dashboard</h1>
         <!-- Your Admin LTE code here -->
     </div>
     @endsection
     

Step 5: Test Your Application

1. Run Your Application:
   • Ensure your server is running and navigate to http://localhost:8000/register to create a new user.
   • After registration, log in and check your admin dashboard at http://localhost:8000/dashboard.

Conclusion

You have successfully set up an Admin LTE admin panel in Laravel with authentication features. You can now customize your dashboard further by adding widgets, charts, and additional functionality as needed. Explore the Admin LTE documentation for more components and layout options to enhance your admin panel.