Integrar una plantilla AdminLTE en Laravel - Parte 2

Desde un Sidebar y Menús desplegables hasta Blade Components personalizables para formularios, incluyendo Select2, DateRange y InputColor, entre otros. ¿Estás listo para integrar esta plantilla de administración gratuita en tus proyectos de Laravel y superar las expectativas de tus clientes? ¡No esperes más para empezar!

Requisitos

Si no han visto la primera parte, pueden chequearlo aquí. De todas maneras les dejo el repositorio con el que pueden empezar en el siguiente enlace (el branch es section-1).

Agregar un nuevo item en el Menu

Nos dirigimos al archivo de configuración config/adminlte.php y en la sección del menú agregamos el nuevo item, en este caso será una página llamada Eventos con el ícono de un edificio sacado de font-awesome versión 5.

1'menu' => [
2    ...
3    [
4        'text'       => 'Eventos',
5        'icon'       => 'fas fa-building',
6        'url'        => '/events',
7    ],
8],

Ahora vamos a crear la ruta “/events” en el archivo routes/web.php.

 1Route::middleware('auth')->group(function () {
 2    Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
 3    Route::get('/profile', function () {
 4        return view('profile');
 5    })->name('profile');
 6 
 7    Route::get('/events', function () { 
 8        return view('events');
 9    })->name('events');
10});

Seguimos con la creación de la vista blade resources/views/events.blade.php con las secciones que hereda del layout.

 1@extends('adminlte::page')
 2 
 3@section('title', 'AdminLTE')
 4 
 5@section('content_header')
 6    <h1 class="m-0 text-dark">Eventos</h1>
 7@stop
 8 
 9@section('content')
10 
11@endsection

Ya tenemos creado un nuevo item en el menu con una vista personalizada.

Agregar un submenú en el item.

En este caso tenemos que agregar un item en el arreglo que será el que tenga a los items hijos. Por ejemplo hemos creado al item padre Eventos que contendrá a dos items hijos que serán “Lista de eventos” y “Registrar evento”.

 1'menu' => [
 2    ...
 3    [
 4        'text'       => 'Eventos',
 5        'icon'       => 'fas fa-building',
 6        'submenu'    => [ 
 7            [
 8                'text' => 'Lista de eventos',
 9                'url' => '/events'
10            ],
11            [
12                'text' => 'Registrar evento',
13                'url' => '/events/create'
14            ],
15        ]
16    ],
17    ...
18],

Procedemos a registrar la nueva ruta del registrar evento en el routes/web.php

 1Route::middleware('auth')->group(function () {
 2    Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
 3    Route::get('/profile', function () {
 4        return view('profile');
 5    })->name('profile');
 6 
 7    Route::get('/events', function () {
 8        return view('events');
 9    })->name('events');
10 
11    Route::get('/events/create', function () { 
12        return view('events-create');
13    })->name('events.create');
14});

Ahora creamos la nueva vista resources/views/events-create.blade.php

 1@extends('adminlte::page')
 2 
 3@section('title', 'AdminLTE')
 4 
 5@section('content_header')
 6    <h1 class="m-0 text-dark">Registrar Evento</h1>
 7@stop
 8 
 9@section('content')
10 
11@endsection

y listo ya tenemos un submenú personalizado.

Componentes Blade

La plantilla nos ofrece muchos componentes blade el cual podemos reutilizar en las páginas de la aplicación. Aquí te muestro algunas.

Formularios

En nuestra página de registrar event resources/views/events-create.blade.php vamos a insertar el siguiente formulario dentro de la sección content.

 1@section('content')
 2    <div>
 3        <div class="row">
 4            <x-adminlte-input name="name" label="Nombre" placeholder="Nombre del evento"
 5                              fgroup-class="col-md-6"/>
 6        </div>
 7        <div class="row">
 8            <x-adminlte-textarea name="description" label="Descripción" placeholder="Descripción del evento"
 9                                 fgroup-class="col-md-6"/>
10        </div>
11        <div class="row">
12            <x-adminlte-select name="status" label="Estado" fgroup-class="col-md-6">
13                <x-slot name="prependSlot">
14                    <div class="input-group-text bg-gradient-info">
15                        <i class="fas fa-building"></i>
16                    </div>
17                </x-slot>
18                <option>Seleccione</option>
19                <option>Borrador</option>
20                <option>Publicado</option>
21            </x-adminlte-select>
22        </div>
23        <div class="row">
24            <div class="form-group col-md-6">
25                <x-adminlte-button label="Registrar" theme="primary" icon="fas fa-save"/>
26            </div>
27 
28        </div>
29    </div>
30@endsection

Usando estos componentes blade tenemos la siguiente vista así ahorrándonos tiempo en darle los estilos.

Plugin Select2

La librería select2 nos permite tener un componente en el cual podemos escoger varias opciones pero con algunas funciones adicionales como un buscar lo cual nos podría servir si es que tenemos varias opciones.

Primero instalamos el plugin con el siguiente comando.

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

Obtendremos el siguiente mensaje exitoso.

Luego agregamos el plugin en nuestro archivo de configuración config/adminlte.php.

 1'plugins' => [
 2    ...
 3    'Select2' => [
 4        'active' => true, 
 5        'files' => [
 6            [
 7                'type' => 'js',
 8                'asset' => true, 
 9                'location' => '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js',
10            ],
11            [
12                'type' => 'css',
13                'asset' => true, 
14                'location' => '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css',
15            ],
16            [
17                'type' => 'css',
18                'asset' => true, 
19                'location' => 'vendor/select2-bootstrap4-theme/select2-bootstrap4.min.css',
20            ],
21        ],
22    ],
23    ...
24],

Agregamos un nuevo select en nuestra vista resources/views/events-create.blade.php que será el tipo de evento.

 1@section('content')
 2    <div>
 3        <div class="row">
 4            <x-adminlte-input name="name" label="Nombre" placeholder="Nombre del evento"
 5                              fgroup-class="col-md-6"/>
 6        </div>
 7        <div class="row">
 8            <x-adminlte-textarea name="description" label="Descripción" placeholder="Descripción del evento"
 9                                 fgroup-class="col-md-6"/>
10        </div>
11        <div class="row">
12            <x-adminlte-select name="status" label="Estado" fgroup-class="col-md-6">
13                <x-slot name="prependSlot">
14                    <div class="input-group-text bg-gradient-info">
15                        <i class="fas fa-building"></i>
16                    </div>
17                </x-slot>
18                <option>Seleccione</option>
19                <option>Borrador</option>
20                <option>Publicado</option>
21            </x-adminlte-select>
22        </div>
23        <div class="row"> 
24            <x-adminlte-select2 name="type" label="Tipo"
25                                data-placeholder="Seleccione" fgroup-class="col-md-6">
26                <x-slot name="prependSlot">
27                    <div class="input-group-text bg-gradient-info">
28                        <i class="fas fa-building"></i>
29                    </div>
30                </x-slot>
31                <option value=""></option>
32                <option>Concierto</option>
33                <option>Fútbol</option>
34                <option>Teatro</option>
35                <option>Standup Comedy</option>
36                <option>Festival</option>
37                <option>Museo</option>
38 
39            </x-adminlte-select2>
40 
41        </div>
42        <div class="row">
43            <div class="form-group col-md-6">
44                <x-adminlte-button label="Registrar" theme="primary" icon="fas fa-save"/>
45            </div>
46 
47        </div>
48    </div>
49@endsection

¡Listo ya tenemos la librería select2 para utilizarla en nuestro proyecto!. Para más información ver la documentación.

Plugin InputDate

Al formulario le falta la fecha del evento así que para eso usaremos el plugin InputDate, para ello ejecutaremos el siguiente comando.

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

Obtendremos el siguiente mensaje exitoso.

Luego agregamos el plugin en nuestro archivo de configuración config/adminlte.php.

 1'plugins' => [
 2    ...
 3    'TempusDominusBs4' => [ 
 4        'active' => true,
 5        'files' => [
 6            [
 7                'type' => 'js',
 8                'asset' => true,
 9                'location' => 'vendor/moment/moment.min.js',
10            ],
11            [
12                'type' => 'js',
13                'asset' => true,
14                'location' => 'vendor/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js',
15            ],
16            [
17                'type' => 'css',
18                'asset' => true,
19                'location' => 'vendor/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css',
20            ],
21        ],
22    ],
23    ...
24],

Agregamos el componente del plugin en nuestra vista resources/views/events-create.blade.php que será la fecha del evento.

 1@section('content')
 2    <div>
 3        <div class="row">
 4            <x-adminlte-input name="name" label="Nombre" placeholder="Nombre del evento"
 5                              fgroup-class="col-md-6"/>
 6        </div>
 7        <div class="row">
 8            <x-adminlte-textarea name="description" label="Descripción" placeholder="Descripción del evento"
 9                                 fgroup-class="col-md-6"/>
10        </div>
11        <div class="row">
12            <x-adminlte-select name="status" label="Estado" fgroup-class="col-md-6">
13                <x-slot name="prependSlot">
14                    <div class="input-group-text bg-gradient-info">
15                        <i class="fas fa-building"></i>
16                    </div>
17                </x-slot>
18                <option>Seleccione</option>
19                <option>Borrador</option>
20                <option>Publicado</option>
21            </x-adminlte-select>
22        </div>
23        <div class="row">
24            <x-adminlte-select2 name="type" label="Tipo"
25                                data-placeholder="Seleccione" fgroup-class="col-md-6">
26                <x-slot name="prependSlot">
27                    <div class="input-group-text bg-gradient-info">
28                        <i class="fas fa-building"></i>
29                    </div>
30                </x-slot>
31                <option value=""></option>
32                <option>Concierto</option>
33                <option>Fútbol</option>
34                <option>Teatro</option>
35                <option>Standup Comedy</option>
36                <option>Festival</option>
37                <option>Museo</option>
38 
39            </x-adminlte-select2>
40 
41        </div>
42        <div class="row"> 
43            @php
44                $config = ['format' => 'YYYY-MM-DD'];
45            @endphp
46            <x-adminlte-input-date name="date" label="Fecha" :config="$config" placeholder="Seleccione"
47                                   fgroup-class="col-md-6">
48                <x-slot name="prependSlot">
49                    <div class="input-group-text bg-gradient-info">
50                        <i class="fas fa-calendar"></i>
51                    </div>
52                </x-slot>
53            </x-adminlte-input-date>
54        </div>
55        <div class="row">
56            <div class="form-group col-md-6">
57                <x-adminlte-button label="Registrar" theme="primary" icon="fas fa-save"/>
58            </div>
59 
60        </div>
61    </div>
62@endsection

¡Listo ya tenemos el plugin de la fecha para utilizarla en nuestro proyecto!. Para más información ver la documentación

Datatable

Ahora vamos a mostrar una lista de los eventos que tengamos en nuestra base de datos, para ello vamos a seguir la documentación de Laravel y crear nuestra migration, model y factory de nuestra entidad Eventos.

Para crear esas 3 clases lo ejecutamos con el siguiente comando:

1php artisan make:model Event -mf

• make:model “Nombre”: crea el modelo de la entidad eventos.
• -m: crea la migración para la entidad eventos.
• -f: crea el factory para la entidad eventos.

Obtenemos el siguiente mensaje exitoso.

Primero agregamos las columnas en nuestra migración creada.

 1public function up()
 2{
 3    Schema::create('events', function (Blueprint $table) {
 4        $table->id();
 5 
 6        $table->string('name');
 7        $table->text('description');
 8        $table->string('status');
 9        $table->string('type');
10        $table->date('date');
11 
12        $table->timestamps();
13    });
14}

Ejecutamos la migración.

1php artisan migrate

Si verificamos en nuestra base de datos tendremos creada la tabla events con las siguientes columnas:

Ahora vamos a editar nuestro factory database/factories/EventFactory.php para poder crear registros de prueba de manera automática.

 1public function definition()
 2{
 3    return [
 4        'name' => fake()->text(30),
 5        'description' => fake()->text(200),
 6        'status' => fake()->randomElement(['Borrador', 'Publicado']),
 7        'type' => fake()->randomElement(['Concierto', 'Fútbol', 'Teatro', 'Standup Comedy', 'Festival', 'Museo']),
 8        'date' => fake()->date()
 9    ];
10}

Para insertar nuestros registro de prueba tenemos que invocar nuestra clase factory y lo haremos mediante Laravel Tinker que nos permite ejecutar código php de manera sencilla, muy útil cuando queremos probar algo rápido.

Ingresamos a tinker con el siguiente comando.

1php artisan tinker

Dentro de tinker ejecutamos el siguiente código.

1App\Models\Event::factory()->count(50)->create()

Para comprobar que ha funcionado vemos la tabla events en nuestra base de datos.

Ahora que ya tenemos información de prueba podemos usar el plugin de Datatable.

Instalamos el plugin con el siguiente comando.

1php artisan adminlte:plugins install --plugin=datatables --plugin=datatablesPlugins

Obtenemos el siguiente resultado.

Vamos a editar el código de la ruta /events en el archivo routes/web.php para escribir la lógica donde obtendremos los eventos de la base de datos y la devolveremos a la vista resources/views/events.blade.php.

 1<?php
 2 
 3use App\Models\Event;
 4use Illuminate\Support\Facades\Auth;
 5use Illuminate\Support\Facades\Route;
 6 
 7/*
 8|--------------------------------------------------------------------------
 9| Web Routes
10|--------------------------------------------------------------------------
11|
12| Here is where you can register web routes for your application. These
13| routes are loaded by the RouteServiceProvider within a group which
14| contains the "web" middleware group. Now create something great!
15|
16*/
17 
18Route::get('/', function () {
19    return view('welcome');
20});
21 
22Auth::routes();
23 
24Route::middleware('auth')->group(function () {
25    Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
26    Route::get('/profile', function () {
27        return view('profile');
28    })->name('profile');
29 
30    Route::get('/events', function () { 
31        // Obtenemos los eventos de la base de datos
32        $events = Event::all();
33 
34        // Asignamos la cabecera de nuestro datatable
35        $heads = [
36            'ID',
37            'Nombre',
38            'Descripción',
39            'Estado',
40            'Tipo',
41            'Fecha'
42        ];
43 
44        // Retornamos la vista con las 2 variables creadas anteriormente
45        return view('events', compact('events', 'heads'));
46    })->name('events');
47 
48    Route::get('/events/create', function () {
49        return view('events-create');
50    })->name('events.create');
51});

Ahora nos vamos a la vista resources/views/events.blade.php y agregamos el componente datatable.

 1@extends('adminlte::page')
 2 
 3@section('title', 'AdminLTE')
 4 
 5@section('content_header')
 6    <h1 class="m-0 text-dark">Eventos</h1>
 7@stop
 8 
 9@section('content') 
10    <x-adminlte-card title="Lista de Eventos">
11        <div class="card-body">
12            <x-adminlte-datatable id="table1" :heads="$heads" striped head-theme="dark" with-buttons>
13                @foreach($events as $event)
14                    <tr>
15                        <td>{{ $event->id }}</td>
16                        <td>{{ $event->name }}</td>
17                        <td>{{ $event->description }}</td>
18                        <td>{{ $event->status }}</td>
19                        <td>{{ $event->type }}</td>
20                        <td>{{ $event->date }}</td>
21                    </tr>
22                @endforeach
23            </x-adminlte-datatable>
24        </div>
25    </x-adminlte-card>
26@endsection

Si entramos a nuestra vista por el navegador veremos lo siguiente.

Cards

Los cards son muy útiles cuando queremos mostrar cierta información al usuario, por ejemplo en este caso usaremos el componente de cards de la plantilla para la vista que hemos creado previamente donde listamos los eventos, para ello cambiaremos lo siguiente en nuestra vista resources/views/events.blade.php.

 1@section('content')
 2    <x-adminlte-card title="Lista de Eventos"> 
 3        <div class="card-body">
 4            <x-adminlte-datatable id="table1" :heads="$heads" striped head-theme="dark" with-buttons>
 5                @foreach($events as $event)
 6                    <tr>
 7                        <td>{{ $event->id }}</td>
 8                        <td>{{ $event->name }}</td>
 9                        <td>{{ $event->description }}</td>
10                        <td>{{ $event->status }}</td>
11                        <td>{{ $event->type }}</td>
12                        <td>{{ $event->date }}</td>
13                    </tr>
14                @endforeach
15            </x-adminlte-datatable>
16        </div>
17    </x-adminlte-card> 
18@endsection

Ahora tenemos el componente card en nuestra página.

¡Felicitaciones! Has aprendido cómo integrar la plantilla de administración AdminLTE en Laravel y cómo aprovechar al máximo sus componentes para crear aplicaciones web más eficientes y tener a tu cliente satisfecho.