Articulos publicados: 75 Visitas hoy: 45,102
Aviso del sistema de notificaciones de Pirulug Tech.

Autenticación en Laravel con Bootstrap y Gestión de Usuarios

Publicado en Autenticación, Bootstrap, Desarrollo Web, Laravel, PHP, Tutoriales por pirulug.

Lectura del Articulo

Laravel es uno de los frameworks PHP más utilizados para construir aplicaciones modernas. Una de las tareas más comunes al iniciar un proyecto es implementar un sistema de autenticación. Aunque hoy en día existen paquetes como Breeze o Jetstream, el paquete Laravel UI sigue siendo una opción ligera y directa, sobre todo si queremos integrar Bootstrap rápidamente.

Instalación de Laravel con Laravel UI y Bootstrap

Para comenzar, creamos un nuevo proyecto en Laravel:

composer create-project laravel/laravel proyecto
cd proyecto

Luego instalamos el paquete Laravel UI:

composer require laravel/ui

Generamos las vistas de autenticación con Bootstrap:

php artisan ui bootstrap --auth

Finalmente instalamos las dependencias de frontend y compilamos los assets:

npm install && npm run dev
php artisan migrate

Con esto ya tenemos login, registro, recuperación de contraseña y un layout con Bootstrap.

Desactivar el registro de usuarios

Si no queremos que cualquiera se registre en el sistema, podemos desactivar la ruta de registro. Para ello editamos routes/web.php y reemplazamos la configuración de rutas de autenticación por:

Auth::routes(['register' => false]);

De esta manera el formulario y la acción de registro quedan bloqueados. Si además no queremos mostrar el enlace de registro en la navegación, podemos eliminarlo de la vista layouts/app.blade.php.

Mostrar todos los usuarios en el Home

En lugar de mostrar solo un mensaje de bienvenida, podemos usar la página de inicio para listar los usuarios registrados. Para esto, editamos el controlador HomeController:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class HomeController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index(Request $request)
    {
        $search = $request->input('search');

        $users = User::when($search, function ($query, $search) {
                        return $query->where('name', 'like', "%{$search}%")
                                     ->orWhere('email', 'like', "%{$search}%");
                    })
                    ->orderBy('id', 'desc')
                    ->paginate(5);

        return view('home', compact('users', 'search'));
    }
}

Con este código podemos buscar usuarios por nombre o correo electrónico, y mostramos los resultados con paginación.

Vista con tabla y barra de búsqueda

En resources/views/home.blade.php reemplazamos el contenido con lo siguiente:

@extends('layouts.app')

@section('content')
<div class="container">
    <h3 class="mb-4">Lista de Usuarios</h3>

    <form method="GET" action="{{ route('home') }}" class="mb-3 d-flex">
        <input type="text" name="search" class="form-control me-2"
               placeholder="Buscar por nombre o email" value="{{ $search ?? '' }}">
        <button class="btn btn-primary" type="submit">Buscar</button>
    </form>

    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-striped">
                <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Email</th>
                        <th>Creado</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td>{{ $user->id }}</td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->created_at->format('d/m/Y') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center">No se encontraron usuarios</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="d-flex justify-content-center">
                {{ $users->appends(['search' => $search])->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

Ahora, al iniciar sesión en el sistema, veremos una tabla con todos los usuarios registrados, con opción de buscarlos y navegar por páginas.

Conclusión

Laravel UI con Bootstrap sigue siendo una forma rápida y práctica de tener un sistema de autenticación básico en Laravel. Además, personalizar la página de inicio para mostrar y administrar usuarios es un buen primer paso para extender la aplicación según las necesidades del proyecto.

Comentarios de los Lectores (0)

No hay comentarios aun. ¡Se el primero en comentar!

Escribir un Comentario