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.
Step # 1 : Create fresh Laravel project with Breeze Auth.
Two commands to create fresh laravel project.
Global Command : laravel new adminlte
Or use
Non Global Command : composer create-project laravel/laravel --prefer-dist adminlte
After running one of the above commands, you'll be prompted.
Would you like to install the starter kit?
Select none.
After selecting none, you'll be asked about testing framework.
Select Pest.
After selecting Pest, you'll be asked to select the database for your application.
Select mysql.
After selecting MySql, you'll be asked if you want to run the default database migration.
Select yes
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
Git Bash : cd c:xampp/htdocs/adminlte
Step # 3 : Install the AdminLTE package.
Run the following command.
Command : composer require jeroennoten/laravel-adminlte
Step # 4 : Install the theme.
Run the following command.
Command : php artisan adminlte:install
This command creates configuration files, publishes JS and CSS assets, and generates Blade templates. After running it, the config/adminlte.php file will be available.
Step # 5 : Install Laravel UI Auth Scaffolding.
Run the following commands to install Laravel UI and Bootstrap auth scaffolding.
Command : composer require laravel/ui
Command : php artisan ui bootstrap --auth
During the process, you'll be prompted with:
The [Controller.php] file already exists. Do you want to replace it?
Select yes.
Next, run the following command to compile your fresh scaffolding.
Command : npm install && npm run dev
Now, open another instance of Git Bash and access the project.
Finally, replace the views by running:
Command: php artisan adminlte:install --only=auth_views
Step # 6 : Let's run the project.
Command : php artisan serve
Access the Register page at (http://127.0.0.1:8000/register) and create a user.
Once created, you will 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 create the 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
Update the home.blade.php file with the following code to use the AdminLTE theme
@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
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. Let’s create a new link for Posts as an example to understand how to define it properly and make it functional.
Create a Blade file named posts.blade.php and update it as shown below. (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
Access the adminlte.php configuration file (located at config/adminlte.php), then go to the menu sidebar items and add the details for the posts as shown below.
[
'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',
],
Create a route for the posts page.
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.
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.
For more details please refer to the package 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