Laravel AdminLTE – Admin interface template

Projects Inventory

2 months ago

Laravel AdminLTE is a popular open-source admin interface template built on the AdminLTE Bootstrap admin dashboard template. It provides a sleek and responsive layout for building admin panels and dashboards in Laravel applications. The template includes various UI components, widgets, and layouts, making it easy to create a professional-looking admin interface.

Key Features of Laravel AdminLTE:

Responsive Design: Built on Bootstrap, AdminLTE offers a fully responsive layout that looks great on various devices.

Variety of Components: Comes with a wide range of UI components, such as tables, charts, forms, and notifications.
Customizable: You can easily customize the look and feel of your admin interface by modifying the CSS and JavaScript files.
Multiple Layouts: Offers different layout options (e.g., boxed, fixed, sidebar collapse) to suit your application’s needs.
Integrated Plugins: Supports various plugins for added functionality, including data tables, charts, and more.

Installation

To get started with Laravel AdminLTE, follow these steps:

Install the Package: You can install Laravel AdminLTE via Composer:

composer require "almasaeed/admintlte=~3.0"

1

composer require "almasaeed/admintlte=~3.0"
Publish Assets: Publish the AdminLTE assets to your application:

php artisan vendor:publish --provider="AdminLTE\AdminLTETemplateServiceProvider"

1

php artisan vendor:publish --provider="AdminLTE\AdminLTETemplateServiceProvider"

Configure the Layout: You can set up your layout by editing the resources/views/layouts/app.blade.php file to include the AdminLTE styles and scripts. Here’s a basic example of how to structure the layout:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/plugins/fontawesome-free/css/all.min.css') }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
</head>
<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        @include('layouts.partials.header')
        @include('layouts.partials.sidebar')
        <div class="content-wrapper">
            @yield('content')
        </div>
        @include('layouts.partials.footer')
    </div>
    <script src="{{ asset('vendor/adminlte/plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

</head>

@include('layouts.partials.header')

@include('layouts.partials.sidebar')

@yield('content')

</div>

@include('layouts.partials.footer')

</div>

</body>

</html>

Create Partials: Create partial views for the header, sidebar, and footer to keep your layout organized. For example, you can create resources/views/layouts/partials/header.blade.php and resources/views/layouts/partials/sidebar.blade.php.

Creating an Admin Page

Once the AdminLTE layout is set up, you can create an admin page. Here’s how you can create a sample dashboard:

Create a Controller: Generate a controller for your admin dashboard:

php artisan make:controller Admin/DashboardController

1

php artisan make:controller Admin/DashboardController

Define a Method for the Dashboard: In the DashboardController, define a method to show the dashboard view:

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;

class DashboardController extends Controller
{
    public function index()
    {
        return view('admin.dashboard');
    }
}

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;

class DashboardController extends Controller

{

public function index()

{

return view('admin.dashboard');

}

Set Up Routes: In your routes/web.php file, define a route for the admin dashboard:

use App\Http\Controllers\Admin\DashboardController; Route::get('/admin/dashboard', [DashboardController::class, 'index'])->name('admin.dashboard');

1
2
3

use App\Http\Controllers\Admin\DashboardController;

Route::get('/admin/dashboard', [DashboardController::class, 'index'])->name('admin.dashboard');

Create the Dashboard View: Create a view file for the dashboard at resources/views/admin/dashboard.blade.php and use AdminLTE components:

@extends('layouts.app')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>150</h3>
                        <p>New Orders</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- More boxes as needed -->
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<h1 class="m-0">Dashboard</h1>

</div>

<p>New Orders</p>

</div>

</div>

</div>

</div>

@endsection

Conclusion

Laravel AdminLTE is an excellent choice for developers looking to build responsive and feature-rich admin panels for their Laravel applications. With its ready-made components and templates, you can create a polished admin interface quickly and efficiently.

Additional Considerations

Documentation: For more detailed instructions, examples, and component usage.
Customization: You can customize the AdminLTE theme and components to match your application’s branding and design requirements.

Key Features of Laravel AdminLTE:

Installation

Creating an Admin Page

Conclusion

Additional Considerations

Related Posts: