Integrar una Plantilla AdminLTE en Laravel 9

En todo proyecto se requiere usar componentes como menus, botones, formularios, tablas, notificaciones, etc. Habrán dos caminos, el primero es el que construyamos de cero y personalicemos cada componente lo cual nos tomará más tiempo, y lo segundo es que podamos usar una plantilla como AdminLTE que nos trae ya todo listo para utilizar.

¿Qué es AdminLTE?

AdminLTE es una plantilla de diseño de administrador de código abierto y de alta calidad. Es una de las plantillas más populares y ampliamente utilizadas para el desarrollo de aplicaciones web de administración.

Requisitos Previos

Requerimientos:

• Laravel ≥ 6.x
• PHP ≥ 7.2

Primero instalaremos el siguiente paquete oficial de Laravel para tener un sistema de autenticación.

1composer require laravel/ui && php artisan ui bootstrap --auth

Ahora instalaremos nuestras dependencias javascript que acabamos de descargar.

1npm install && npm run dev

Ejecutaremos las migraciones para crear las tablas en nuestra base de datos.

1php artisan migrate

Con esto tendríamos las siguientes páginas por el momento

Instalación

Ahora vamos a utilizar el paquete laravel-adminlte que nos trae ya toda la integración lista entre la plantilla AdminLTE y Laravel.

Descargamos e instalamos el paquete con este comando:

1composer require jeroennoten/laravel-adminlte

El paquete nos permite ver un informe de los módulos que queremos instalar, podemos ver el informe con el siguiente comando:

1php artisan adminlte:status

El resultado será el siguiente:

Según el informe no tenemos instalado ningún módulo aún, así que procederemos a instalarlos todos.

1php artisan adminlte:install —type=full

Cuando se esté ejecutando el proceso nos pedirá si queremos reemplazar las vistas que han sido generadas por el sistema de autenticación que instalamos por las de la plantilla AdminLTE, así que le daremos que “yes” a todos.

Según la documentación necesitamos instalar el plugin iCheck Bootstrap ya que esa página contiene ese check en el “Recordarme”. 

1php artisan adminlte:plugins install --plugin=icheckBootstrap

Si queremos ver todos los plugins que trae la plantilla y que quizá necesitemos en algún momento, ejecutamos el siguiente comando

1php artisan adminlte:plugins

El resultado será el siguiente:

Prueba

Vamos a probar la página de registro de usuario.

¡Ya tenemos nuestra aplicación Laravel con la plantilla AdminLTE integrada!

Ahora podemos beneficiarnos de todos los componentes que la plantilla incluye, vamos a probar insertando algunos componentes en nuestra página inicial que se encuentra en la ruta /resources/views/home.blade.php. Aquí insertaremos los siguientes componentes:

Alerts

 1@extends('adminlte::page')
 2 
 3@section('title', 'AdminLTE')
 4 
 5@section('content\_header')
 6    <h1 class="m-0 text-dark">Dashboard</h1>
 7@stop
 8 
 9@section('content')
10    <div class="row">
11        <div class="col-12">
12            <div class="card">
13                <div class="card-body">
14                    <p class="mb-0">You are logged in!</p>
15                </div>
16            </div>
17        </div>
18        <div class="col-12">
19            <h5>Alerts</h5>
20            <x-adminlte-alert theme="light" title="Tip">
21                Light theme alert!
22            </x-adminlte-alert>
23            <x-adminlte-alert theme="dark" title="Important">
24                Dark theme alert!
25            </x-adminlte-alert>
26            <x-adminlte-alert theme="primary" title="Primary Notification">
27                Primary theme alert!
28            </x-adminlte-alert>
29            <x-adminlte-alert theme="secondary" icon="" title="Secondary Notification">
30                Secondary theme alert!
31            </x-adminlte-alert>
32            <x-adminlte-alert theme="danger" title="Danger">
33                Danger theme alert!
34            </x-adminlte-alert>
35        </div>
36    </div>
37@stop

Cards

 1<div class="col-12">
 2    <h5>Cards</h5>
 3    <x-adminlte-card title="Dark Card" theme="dark" icon="fas fa-lg fa-moon">
 4        A dark theme card...
 5    </x-adminlte-card>
 6    <x-adminlte-card title="Lightblue Card" theme="lightblue" theme-mode="outline"
 7                     icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info"
 8                     removable>
 9        A removable card with outline lightblue theme...
10    </x-adminlte-card>
11    <x-adminlte-card title="Purple Card" theme="purple" icon="fas fa-lg fa-fan" removable collapsible>
12        A removable and collapsible card with purple theme...
13    </x-adminlte-card>
14    <x-adminlte-card title="Success Card" theme="success" theme-mode="full" icon="fas fa-lg fa-thumbs-up"
15                     collapsible="collapsed">
16        A collapsible card with full success theme and collapsed...
17    </x-adminlte-card>
18    <x-adminlte-card title="Info Card" theme="info" icon="fas fa-lg fa-bell" collapsible removable maximizable>
19        An info theme card with all the tool buttons...
20    </x-adminlte-card>
21</div>

Conclusiones

Como hemos podido ver la plantilla AdminLTE es muy útil ya que nos provee de muchos componentes y plugins, además que nos permite configurar algunas opciones. Si quieren conocer más pueden dirigirse a la documentación del paquete.