AdminLTE con Laravel 8 - PHP

AdminLTE es un popular tema de administración de código abierto construido con Bootstrap que fue creado originalmente por Abdullah Almsaeed. Este tema tiene muchas características geniales, como diseño receptivo, interfaz de usuario intuitiva, una gran cantidad de componentes y widgets, UI Charts, tablas y muchas otras características útiles.

En este tutorial, aprenderás cómo puedes integrar el tema AdminLTE en tu aplicación Laravel 8. Laravel es un popular framework de PHP para la construcción de aplicaciones web robustas y escalables. Laravel también es muy popular en la comunidad de desarrolladores de PHP por su sintaxis clara y fácil de entender, una gran cantidad de características útiles y su capacidad para simplificar tareas comunes de desarrollo web.

Paso 1: Configuración de Laravel 8

Antes de comenzar, asegúrate de tener instalado Laravel 8 y Composer en tu sistema. Abre tu terminal y ejecuta los siguientes comandos:

composer create-project laravel/laravel adminlte-demo
cd adminlte-demo
php artisan serve

Paso 2: Descargar e Instalar el Tema AdminLTE

AdminLTE puede ser descargado directamente desde la página oficial de GitHub. Para instalar el tema, simplemente copia la carpeta "AdminLTE-master" en la carpeta pública de tu aplicación Laravel.

Para hacer esto, ejecuta el siguiente comando en la ventana de terminal:

cp -r ~/Downloads/AdminLTE-master public/

Paso 3: Integrar AdminLTE con Laravel 8

Ahora que hemos descargado e instalado el tema, debemos integrarlo en nuestra aplicación Laravel.

Para hacer esto, primero debemos editar el archivo app.blade.php que se encuentra en resources/views/layouts/. Encuentra la siguiente línea en este archivo:

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

y reemplázalo con lo siguiente:

    <title>@yield('title')</title>

    <!-- Icon -->
    <link rel="icon" href="{{ asset('AdminLTE-master/dist/img/AdminLTELogo.png') }}" type="image/x-icon"/>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
          integrity="sha512-2wqbLdBlc0zC9lOE0fSw07AmjGZrY+Y3/hhQiIT72tvvGa49GXflGh5/5eInv9pVlN1HFgN1V7cJSIryMVH2w=="
          crossorigin="anonymous"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ asset('AdminLTE-master/dist/css/adminlte.min.css') }}">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
          rel="stylesheet">

Aquí hemos agregado algunas líneas de código para cargar los archivos CSS y JS necesarios desde nuestro tema. Además, hemos definido una sección de contenido @yield('title') que usaremos en nuestras vistas.

Luego, abre el archivo welcome.blade.php que se encuentra en resources/views/ y reemplaza su contenido con el siguiente código:

@extends('layouts.app')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

@section('css')
    <!-- Toastr -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
          integrity="sha512-nmhhdASgNXTV7iEzTY9bp1BnTeEBlCS2R/hRfsh/Fm+za7knC1bq3YrDIwcG/aolXv0xzt+/JSs3s4fzLuW8TQ=="
          crossorigin="anonymous"/>
@stop

@section('js')
    <!-- Toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
            integrity="sha512-QJ2BaIlvazi+TzcdvgN+rmI/bA6lPFU6e30P6sqGBC+vnWfmXoMn6xjc1m+4OT/MsWxrTACYT1T/oHPHe2LnRQ=="
            crossorigin="anonymous"></script>

    <script>
        $(function () {
            toastr.success('Hello World!');
        });
    </script>
@stop

En este archivo, hemos definido tres secciones de contenido @section:

• @section('title'): representa la etiqueta title en el archivo HTML generado.
• @section('content_header'): representa el encabezado de la página.
• @section('content'): representa el contenido de la página.

Además, hemos definido dos secciones más: @section('css') y @section('js'). En estas secciones, podemos cargar archivos CSS y JS adicionales necesarios para la aplicación.

Paso 4: Ejecutar la aplicación

Finalmente, podemos ejecutar nuestra aplicación Laravel y ver cómo se ve AdminLTE.

Para hacer esto, ejecute el siguiente comando en la terminal:

php artisan serve

Abre tu navegador web y visita http://127.0.0.1:8000/. Deberías ver el panel de adminstración de AdminLTE.

Conclusión

¡Felicidades! Ahora sabes cómo integrar el tema AdminLTE con tu aplicación Laravel 8. Este proceso es sencillo y fácil de seguir. Ahora puedes aprovechar los muchos componentes y widgets geniales que vienen con el tema AdminLTE para construir una aplicación web impresionante. ¡Que te diviertas!