13 – Login con AJAX ( 👨💻 PHP y MYSQL 💻)

Duración: 28 min
Módulo: 👤 Módulo de Usuarios, Login y Control de Sesiones Lección 2 de 17

Descripción

Lección 13 – Login con AJAX ( 👨💻 PHP y MYSQL 💻)

¡En esta lección crucial, implementarás el sistema de login real para tu Sistema de Parqueo! 🔒 Tu instructor te guiará para que tu aplicación se comunique con la base de datos a través de AJAX, verificando las credenciales de usuario de forma dinámica y sin recargar la página. ¡Prepárate para dar un gran salto en la seguridad e interactividad de tu sistema! ✨

En esta Lección Estratégica Aprenderás a:

  • Incluir el Archivo de Configuración de Base de Datos ⚙️
    • En el controlador control_login.php, asegurarás la conexión a la base de datos incluyendo el archivo config.php [00:48]. Esto es vital para que el controlador pueda interactuar con MySQL.
  • Construir la Consulta SQL para el Login 🔍
    • Diseñarás una sentencia SQL SELECT para verificar las credenciales del usuario. Esta consulta buscará en la tabla usuarios (creada en la lección anterior) un registro que coincida con el email, el password y que tenga un estado activo (estado = 1) [02:48].
    • Probarás esta consulta directamente en phpMyAdmin para entender su funcionamiento y asegurar que recupera los datos correctos [03:18].
  • Ejecutar la Consulta con PDO en PHP 🚀
    • En control_login.php, utilizarás la conexión PDO para preparar y ejecutar la consulta SQL. Esto incluye:
      • Crear una variable para almacenar la consulta SQL.
      • Utilizar prepare() para preparar la sentencia SQL.
      • Vincular las variables de usuario y contraseña (recibidas por $_POST desde AJAX) a los parámetros de la consulta [06:05].
      • Ejecutar la consulta con execute().
  • Recuperar y Procesar los Resultados 📊
    • Almacenarás los resultados de la consulta en una variable, utilizando fetchAll() para obtener todos los registros encontrados [10:05].
    • Iterarás sobre los resultados con un bucle foreach para acceder a los datos de cada usuario encontrado (ej. id, nombres, email, password_user) [11:07].
  • Validar Credenciales y Mostrar Mensajes Dinámicos
    • Compararás el email y la contraseña introducidos por el usuario con los datos recuperados de la base de datos [14:58].
    • Implementarás una lógica condicional (if-else) para determinar si las credenciales son correctas.
    • Si el login es exitoso, el controlador enviará un mensaje de éxito (ej. <div class="alert alert-success">Usuario Correcto</div>).
    • Si hay un error (credenciales incorrectas o usuario inactivo), enviará un mensaje de error (ej. <div class="alert alert-danger">Error al introducir sus datos</div>) [20:05].
    • Estos mensajes se mostrarán dinámicamente en el div de respuesta de tu modal de login, sin recargar la página, gracias a la funcionalidad de AJAX que ya tienes implementada.
  • Validación de Campos Vacíos en el Frontend 📝
    • Aprenderás a añadir validaciones en tu script de JavaScript para evitar que el usuario intente iniciar sesión con campos vacíos [22:20].
    • Utilizarás un alert en el modal para notificar al usuario (ej. "Debe introducir su usuario" o "Debe introducir su contraseña").
    • Implementarás focus() para que el cursor se posicione automáticamente en el campo que requiere atención [25:46], mejorando la usabilidad.

Al finalizar esta lección, habrás construido un sistema de login robusto y dinámico para tu Sistema de Parqueo. La autenticación se realizará consultando directamente la base de datos, y los mensajes de respuesta se mostrarán en tiempo real, brindando una experiencia de usuario eficiente y segura. ¡Tu aplicación ahora tiene una puerta de entrada inteligente! 💪