➜ Instalación de Laravel y autenticación
Instalación de Laravel 12 y Configuración de Laravel UI | Configuraremos un sistema de autenticación para el proyecto Laratech utilizando Laravel 12 y el paquete oficial laravel/ui. Este paquete proporciona vistas y controladore
Índice
- Introducción
- Requisitos Previos
- Instalación de Laravel 12
- Autenticación con Laravel UI
- Resumen
- Tarea
Introducción
En esta lección, configuraremos un sistema de autenticación para el proyecto Laratech utilizando Laravel 12 y el paquete oficial laravel/ui. Este paquete proporciona vistas y controladores predefinidos para registro, inicio de sesión, cierre de sesión y restablecimiento de contraseñas, con Bootstrap como base para el diseño.
Objetivo: Implementar un sistema de autenticación funcional y personalizable para Laratech.
Requisitos Previos
Ver los requisitos para instalar el framework Laravel 12 en el capítulo 02
Instalación de Laravel 12
-
Crear el proyecto Laratech: En la terminal, crea un nuevo proyecto Laravel:
composer create-project laravel/laravel Laratech -
Navegar al directorio del proyecto:
cd Laratech -
Configurar el archivo .env:
-
Copia .env.example a .env:
cp .env.example .env -
Configura la conexión a la base de datos (ejemplo para MySQL):
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laratech_db DB_USERNAME=tu_usuario DB_PASSWORD=tu_contraseña
-
-
Generar la clave de la aplicación:
php artisan key:generate -
Probar el proyecto: Inicia el servidor:
php artisan serveVisita http://localhost:8000 para verificar la página de bienvenida de Laravel.
Autenticación con Laravel UI
El paquete laravel/ui facilita la implementación de autenticación. Sigue estos pasos:
Instalar laravel/ui
Instala el paquete ejecutando:
composer require laravel/ui
Genera los archivos de autenticación con Bootstrap:
php artisan ui bootstrap --auth
Este comando crea controladores, vistas y rutas para la autenticación.
Instalar dependencias de frontend
Instala las dependencias de Node.js y compila los assets:
npm install
npm run dev
Esto genera los archivos CSS y JavaScript en la carpeta public.
Ejecutar migraciones
Crea las tablas necesarias (como users) ejecutando:
php artisan migrate
Probar la autenticación
Verifica las rutas generadas en routes/web.php:
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Inicia el servidor Artisan:
php artisan serve
Inicia el servidor Npm:
npm run dev
Prueba las siguientes rutas:
- Registro: http://localhost:8000/register
- Inicio de sesión: http://localhost:8000/login
- Página principal: http://localhost:8000/home
Regístrate, inicia sesión y verifica el cierre de sesión.
Personalizar vistas
Las vistas están en resources/views/auth/. Por ejemplo, edita login.blade.php para añadir un título personalizado para Laratech:
<h1 class="text-center">Iniciar Sesión en Laratech</h1>
Personalizar redireccionamiento
Modifica el redireccionamiento tras iniciar sesión en app/Http/Controllers/Auth/LoginController.php:
protected $redirectTo = '/dashboard';
Asegúrate de crear la ruta y vista para /dashboard en routes/web.php:
Route::get('/dashboard', function () {
return view('dashboard');
})->name('dashboard');
Crea resources/views/dashboard.blade.php con contenido personalizado, por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Laratech - Dashboard</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Bienvenido a Laratech</h1>
<p>Este es tu panel de control.</p>
</div>
</body>
</html>
Resumen
En esta lección, configuramos un sistema de autenticación para Laratech usando Laravel 12 y laravel/ui. Aprendimos a:
- Instalar Laravel 12 y el paquete laravel/ui.
- Generar vistas y controladores de autenticación.
- Compilar assets con npm run dev y ejecutar el servidor con php artisan serve.
- Personalizar vistas y redireccionamientos.
- Probar las funcionalidades de registro, inicio y cierre de sesión.
Ejecutar php artisan serve y npm run dev simultáneamente es esencial para que el proyecto funcione correctamente durante el desarrollo.
Tarea
- Personaliza las vistas de autenticación en resources/views/auth/ para reflejar la identidad de Laratech (por ejemplo, añade un logo o cambia colores).
- Crea una ruta protegida /perfil que solo sea accesible para usuarios autenticados usando el middleware auth.
- Modifica el redireccionamiento tras el registro para que dirija a una página de bienvenida personalizada, como /welcome.
41063 visitas
Capítulo 5 – Roles de usuario y permisos »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar