Laravel 11 - How to Integrate AdminLTE v3
Laravel 11 - How to Integrate AdminLTE v3
In this tutorial, we will discuss how to integrate AdminLTE v3 in Laravel 11, covering installation, setup, and customization to create a sleek, responsive admin dashboard for your application with ease.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide explains how to integrate the AdminLTE theme into a Laravel project. It begins with setting up a fresh Laravel project and installing the AdminLTE package. After configuring the theme and adding authentication scaffolding, a custom Blade layout is created to apply AdminLTE to the dashboard. Sidebar links, including a Posts page, are added by modifying the configuration file. A route and view for the Posts page are set up, and the project is run to view the AdminLTE theme in action on the dashboard and Posts page.
Step # 1 : Create fresh Laravel project.
If Laravel is installed globally, run the following command to create a new project named adminlte.
laravel new adminlte
Or
Otherwise, if Laravel is not installed globally, use Composer.
composer create-project laravel/laravel --prefer-dist adminlte
After running the command, follow these prompts.
- Would you like to install the starter kit? — Select none.
- Select the testing framework. — Choose Pest.
- Select the database for your application. — Choose mysql.
- Run the default database migration? — Select yes.
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to the project's root directory.
cd c:xampp/htdocs/adminlte
Step # 3 : Install the AdminLTE package.
Run the following command to install the AdminLTE package.
composer require jeroennoten/laravel-adminlte
This pulls in the necessary files, setting up AdminLTE as your admin panel.
Step # 4 : Setup the AdminLTE Theme.
Run the following command to install the theme.
php artisan adminlte:install
This command sets up AdminLTE by generating configuration files, publishing JS and CSS assets, and creating Blade templates. Once executed, the config/adminlte.php file will be available for customization.
Step # 5 : Install Laravel UI Auth Scaffolding.
First, install Laravel UI and set up Bootstrap authentication scaffolding by running.
composer require laravel/ui
php artisan ui bootstrap --auth
During the process, if prompted with:
The Controller.php file already exists. Do you want to replace it? — Select yes.
Next, compile the frontend assets.
npm install && npm run dev
After that, open another Git Bash instance, navigate to your project directory, and replace the authentication views with AdminLTE’s versions by running.
php artisan adminlte:install --only=auth_views
Step # 6 : Let's run the project.
Start the development server by running.
php artisan serve
Now, access the Register page at (http://127.0.0.1:8000/register) and create a user.
Once the user is created, you'll be redirected to the default dashboard page.
Step # 7 : Create a Master layout using the AdminLTE Theme.
Create a new file named master.blade.php in the resources/views/layouts folder (path: resources/views/layouts/master.blade.php) and use the following code to set up your layout.
@extends('adminlte::page')
{{-- Extend and customize the browser title --}}
@section('title')
{{ config('adminlte.title') }}
@hasSection('subtitle') | @yield('subtitle') @endif
@stop
{{-- Extend and customize the page content header --}}
@section('content_header')
@hasSection('content_header_title')
<h1 class="text-muted">
@yield('content_header_title')
@hasSection('content_header_subtitle')
<small class="text-dark">
<i class="fas fa-xs fa-angle-right text-muted"></i>
@yield('content_header_subtitle')
</small>
@endif
</h1>
@endif
@stop
{{-- Rename section content to content_body --}}
@section('content')
@yield('content_body')
@stop
{{-- Create a common footer --}}
@section('footer')
<div class="float-right">
Version: {{ config('app.version', '1.0.0') }}
</div>
<strong>
<a href="{{ config('app.company_url', '#') }}">
{{ config('app.company_name', 'My company') }}
</a>
</strong>
@stop
{{-- Add common Javascript/Jquery code --}}
@push('js')
<script>
$(document).ready(function() {
// Add your common script logic here...
});
</script>
@endpush
{{-- Add common CSS customizations --}}
@push('css')
<style type="text/css">
{{-- You can add AdminLTE customizations here --}}
/*
.card-header {
border-bottom: none;
}
.card-title {
font-weight: 600;
}
*/
</style>
@endpush
This layout provides a customizable page title and header, a common footer displaying version and company details, and sections for adding custom JavaScript and CSS modifications.
To use the AdminLTE theme, update the home.blade.php file with the following code.
@extends('layouts.master')
{{-- Customize layout sections --}}
@section('subtitle', 'Dashboard')
@section('content_header_title', 'Dashboard')
@section('content_header_subtitle', 'Welcome')
{{-- Content body: main page content --}}
@section('content_body')
<p>Code Shotcut, Welcome to this beautiful admin panel.</p>
@stop
{{-- Push extra CSS --}}
@push('css')
{{-- Add here extra stylesheets --}}
{{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@endpush
{{-- Push extra scripts --}}
@push('js')
<script> console.log("Hi, We are using the Laravel-AdminLTE package!"); </script>
@endpush
This code sets the subtitle and content header for the dashboard page, displays a welcome message in the main content body, and allows you to add extra custom stylesheets and scripts.
Now, you will be able to see the AdminLTE theme in action.
The sidebar links in the AdminLTE panel, such as Pages, Profile, or Change Password, require corresponding routes in your Laravel application. To demonstrate how to define and make these links functional, let’s create a new link for Posts as an example.
Create a Blade file named posts.blade.php and update it as shown below. Save it in the (path: resources/views/posts.blade.php).
@extends('layouts.master')
{{-- Customize layout sections --}}
@section('subtitle', 'Posts')
@section('content_header_title', 'Posts')
@section('content_header_subtitle', '')
{{-- Content body: main page content --}}
@section('content_body')
<p>Code Shotcut, Welcome to the Posts page.</p>
@stop
{{-- Push extra CSS --}}
@push('css')
{{-- Add here extra stylesheets --}}
{{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@endpush
{{-- Push extra scripts --}}
@push('js')
<script> console.log("Hi, We are using the Laravel-AdminLTE package!"); </script>
@endpush
This file sets the title and content header for the Posts page, displays a welcome message in the content body, and allows adding extra stylesheets and scripts if needed.
To add the Posts link to the sidebar, access the adminlte.php configuration file located at config/adminlte.php. Then, go to the menu sidebar items section and add the following details for the posts.
[
'text' => 'pages',
'url' => 'admin/pages',
'icon' => 'far fa-fw fa-file',
'label' => 4,
'label_color' => 'success',
],
//Add Posts details.
[
'text' => 'Posts',
'url' => 'admin/posts',
'icon' => 'far fa-fw fa-file',
'label_color' => 'success',
],
This will add a new Posts link to the sidebar, set the icon and URL for the Posts page, and apply a success color to the label.
Create a route for the Posts page by adding the following code.
Route::get('admin/posts', function () {
return view('posts');
});
Now, you should be able to access the Posts page.
Access the adminlte.php configuration file located at config/adminlte.php to modify the title. Change the following.
From
'title' => 'AdminLTE 3',
'title_prefix' => '',
'title_postfix' => '',
To
'title' => 'Code Shotcut',
'title_prefix' => '',
'title_postfix' => '',
You can replace Code Shotcut with any title you prefer.
Conclusion
By following this process, you can successfully integrate the AdminLTE theme into your Laravel project, providing a sleek and responsive admin panel. The integration includes customizable layouts, sidebar navigation, and user authentication views, enhancing both the visual appeal and functionality of your application. AdminLTE’s pre-built components and styles help streamline the development of a user-friendly interface, while the flexibility to customize further ensures that your project meets your specific requirements. This setup not only improves the user interface but also prepares your application for future updates and enhancements.
For more details, refer to the AdminLTE documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments