Como instalar Admin Lte en un proyecto de Laravel con Jetstream

Laravel es un framework gratuito de código abierto que se utiliza para hacer desarrollos web a la medida, ya que es uno de los más poderosos hoy en día, Laravel está basado en el MVC modelo vista controlador realizado en el lenguaje de programación PHP.

Admin LTE como lo dice su documentación oficial, es una plantilla para panel administrativo completamente gratis y de código abierto realizada con Bootstrap un framework FrontEnd hecho por Twitter, asi que la manera de implementarlo es demasiado sencillo, con el fin de tener un diseño limpio, además de reutilizar código.

¿Buscas una integración fácil y rápida para admin lte con Laravel? bien, para iniciar con el proyecto creamos una instalación limpia de Laravel.

Paso numero 1: Instalamos Laravel

Creamos un nuevo proyecto de Laravel con la siguiente instrucción, recuerda que para usar este comando al crear nuevos proyectos debemos ejecutar primero

composer global require laravel/installer

Y ahora si ya podemos hacer uso de Laravel New como se muestra a continuación

Laravel new MiProyecto

Paso Numero 2: Instalamos Laravel JetsTream

Laravel Jetstream es un sistema de autenticación para facilitar todo el sistema de login dentro de un proyecto de Laravel, desde login, resetear password, cambio de contraseña etc. para hacer la instalación de este paquete en Laravel ejecutamos la siguiente línea en una consola de Windows..

composer require laravel/jetstream

Una vez instalado el paquete Laravel jetstream procedemos a instalar Laravel Livewire, ejecutando de igual manera el siguiente comando.

php artisan jetstream:install livewire

Con el siguiente paso descargamos todos los paquetes necesarios.

Npm install

Como siguiente paso nos vamos con el comando

Npm run dev

Paso numero 3: Creamos la base de datos

Antes de ejecutar las migraciones, tenemos que crear nuestra base de datos, para esto nos vamos a phpmyadmin y creamos una base de datos.

Paso numero 4: Ejecutamos las migraciones

Una vez creada la base de datos, ahora si podemos correr las migraciones para que se nos creen las tablas necesarias con el siguiente comando.

Php artisan migrate

Paso numero 5: Instalamos admin Lte

Ahora si es hora de instalar la plantilla Admin Lte, como primer paso nos vamos al repositorio oficial

https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Installation

y empezamos con el siguiente comando

composer require jeroennoten/laravel-adminlte

Una vez descargado el paquete lo instalamos

php artisan adminlte:install

Si quieres reemplazar las vistas puedes usar este comando, esto es opcional.

php artisan adminlte:install --only=auth_views

Paso numero 6: Creamos controlador y ruta

Creamos un controlador y una ruta para el administrador,

Php artisan make:controller admin/IndexController 

y la ruta de la siguiente manera

use App\Http\Controllers\admin\IndexController;

Route::group(['prefix'=> 'admin'],function(){

Route::get('Panel-Administrativo', [IndexController::class, 'index'])->name('dashboard');

});

Así podrán entrar de esta manera localhost/admin/Panel-Administrativo

Paso numero 7: Restringimos el acceso

Para darle mayor seguridad debemos añadir el middleware auth al controlador para que solo los usuarios autenticados puedan acceder, así que nos vamos a controlador admin/IndexControler y podemos lo siguiente

 public function __construct()
    {
        $this->middleware(['auth']);
    }
       public function index()
    {
        return view('web.admin.index');
    }

No olvidemos de crear la carpeta web/admin y el archivo index.blade.php que es donde debemos poner o siguiente

@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
    <h1>Dashboard</h1>
@stop
@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop
@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop
@section('js')
    <script> console.log('Hi!'); </script>
@stop

Paso numero 8: Redirigimos el inicio de sesión

Una vez que el usuario a puesto los datos de logeo será re direccionado al home del panel administrativo, para que esto suceda tenemos que hacer lo siguiente: nos vamos a app\Providers\RouteServiceProvider y cambiamos lo siguiente

public const HOME = '/admin/Panel-Administrativo';

Paso numero 9: Modificamos el menú

Las modificaciones del menú de Laravel admin Lte se hacen en el archivo adminlte que lo podemos encontrar en config/adminlte en a línea 220 para abajo, si tienes alguna duda o te has perdida en el tutorial te dejo el video...