Lección: 16 LOGIN FORMULARIO en PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack

16 LOGIN FORMULARIO en PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack

Duración: 19 min

Módulo: 🔐 Autenticación, Sesiones y Base de Datos (Back-End Core) Lección 2 de 11

Descripción

🎬 Lección 16: Formulario de Login e Implementación de Variables Globales (PHP y MySql) 🔗

La lección aborda la configuración fundamental del proyecto para garantizar que todos los estilos y scripts de la plantilla AdminLTE se carguen correctamente, independientemente de la ruta donde se encuentre el archivo.

1. Creación de Variables Globales de Configuración 💾

Para una buena práctica de programación y para resolver los enlaces rotos de la plantilla, se crea un archivo de configuración central:

Archivo config.php: Se crea dentro de una nueva carpeta llamada app/ para almacenar todas las variables de configuración del sistema (conexión a DB, URLs, etc.). [00:23]
Variable de URL Base ($URL): Se define la URL base del proyecto (ej. http://localhost/sistema_de_veterinario/). Esta variable se utilizará para construir todas las rutas de recursos del sistema, facilitando la migración a un servidor público. [00:56]
Constante Global de Nombre (APP_NAME): Se utiliza la función define() de PHP para crear una constante global que almacena el nombre del proyecto, la cual se usa para el título de la página. [03:11]

2. Enlace de la Plantilla AdminLTE ⚙️

Se corrige la apariencia del formulario de login en el archivo login/index.php asegurando el correcto enlace a los recursos de AdminLTE:

Inclusión del Archivo: El archivo app/config.php se incluye al inicio de la vista de login para acceder a la variable $URL. [01:33]
Rutas Dinámicas: Se reemplazan todas las rutas estáticas (<link> y <script>) por rutas dinámicas que inician con la variable PHP $URL y la ruta relativa a los archivos de la plantilla (ej. public/templates/adminlte/...), resolviendo los errores de carga. [04:47]

3. Personalización del Formulario de Login 🎨

Una vez aplicados los estilos, se personaliza el contenido del formulario:

Título y Mensaje: Se modifican los textos del formulario (ej. "Sistema de Ingreso" e "Ingresa tus datos"). [09:27]
Logotipo: Se añade una imagen o logo representativo del sistema veterinario en la parte superior del formulario, ajustando su tamaño y centrándolo. [13:23]
Campos y Botones:
- Se añaden etiquetas (<label>) explícitas para los campos de entrada: Correo electrónico y Contraseña. [15:21]
- Se añaden dos botones principales de ancho completo (width: 100%): Ingresar (color primario) y Cancelar (color secundario). [17:04]

El video concluye explicando la lógica del login: al presionar "Ingresar", el formulario enviará los datos a un controlador que consultará la base de datos para validar las credenciales antes de mostrar el panel de administración. [18:26]

Hilari Web