70 Login personalizado en el Sistema de Reserva de Citas Medicas con LARAVEL(PHP-MySql) FullStack

Duración: 10 min
Módulo: ⏰ Horarios y Lógica de Disponibilidad Lección 11 de 11

Descripción

🎨🔒 Lección 70: Implementación de un Login Personalizado para el Sistema

Esta lección se enfoca en personalizar la vista de Inicio de Sesión (login.blade.php) de Laravel, reemplazando la interfaz genérica con un diseño que se integre al estilo visual de la nueva plantilla pública (AdminLTE).

⚙️ 1. Reemplazo de la Vista de Login

Para lograr una interfaz más profesional y coherente, se reutiliza una plantilla de AdminLTE.

  • Plantilla Base: Se selecciona un modelo de login predefinido de la plantilla AdminLTE [00:45].
  • Migración de Código: El contenido HTML de la plantilla de AdminLTE se copia y se pega en el archivo login.blade.php de Laravel, eliminando el diseño anterior [01:21].
  • Reintegración de Funcionalidad: Los campos del formulario de la plantilla se ajustan para utilizar las etiquetas y las directivas de Blade del formulario de login original de Laravel (para campos como email y password) [02:48].

🖼️ 2. Estilización y Diseño de la Vista

Se aplican estilos para que la página de login coincida con la plantilla web principal.

  • Fondo Personalizado: Se aplica la imagen de fondo utilizada en la plantilla principal a la etiqueta <body> de la vista de login mediante CSS en línea [03:36].
    • Se utilizan propiedades CSS como background-repeat: no-repeat, background-size: 100% 100vh y background-attachment: fixed para asegurar que la imagen cubra toda la pantalla de forma estática [00:04:09 - 00:04:46].
  • Ajustes de Layout:
    • Se añade la marca "Sis Medical" y el título "Inicio de Sesión" a la interfaz [04:52].
    • Se utiliza form-group y la clase col-md-12 en los campos de correo electrónico y contraseña para que ocupen todo el ancho y se vean más limpios [00:07:19 - 00:07:44].
    • Los textos y etiquetas se traducen al español (ej. "correo electrónico" y "contraseña") [07:53].
    • El botón de ingreso se extiende usando la clase btn-block [08:53].

🔑 3. Verificación de Funcionamiento

  • Prueba Final: Se verifica que, a pesar de los cambios de diseño, la funcionalidad de ingreso y el cierre de sesión se mantengan operativos y lleven al usuario al panel de administración [09:30].

Siguiente Paso: La próxima lección se centrará en aplicar un diseño personalizado similar a la vista de Registro de Usuarios.