11 – USANDO AJAX EN EL PROYECTO ( 👨💻 PHP y MYSQL 💻)

Duración: 17 min
Módulo: 🎨 Interfaz de Usuario, Bootstrap y Funcionalidades Básicas Lección 7 de 7

Descripción

Lección 11 – USANDO AJAX EN EL PROYECTO ( 👨💻 PHP y MYSQL 💻)

¡Es hora de llevar la interactividad de tu Sistema de Parqueo al siguiente nivel con AJAX! 🚀 En esta lección, te sumergirás en la implementación de peticiones asíncronas para que tu aplicación se comunique con el servidor sin necesidad de recargar la página. Tu instructor te guiará para que tu login (y futuras funcionalidades) ofrezcan una experiencia de usuario fluida y moderna.

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

  • Actualizar tu Librería jQuery para Compatibilidad con AJAX 🔄
    • Descubrirás que la versión "slim" de jQuery que se integró previamente podría causar errores con AJAX [01:09].
    • Aprenderás a descargar la versión completa de jQuery 3.5.1 desde su sitio oficial [01:25] y a actualizar la referencia en tu proyecto, asegurando la compatibilidad con todas las funcionalidades de AJAX.
  • Crear el Controlador de Login 🔑
    • Organizarás tu código creando una nueva carpeta llamada login dentro de tu proyecto.
    • Dentro de login, crearás un archivo crucial: control_login.php [03:19]. Este será el "cerebro" que procesará las credenciales enviadas desde el formulario.
  • Implementar la Petición AJAX con jQuery 🌐
    • Dentro de la función click del botón "Ingresar" que creaste en la lección anterior, añadirás el código jQuery para realizar una petición AJAX:
      • Definirás la URL del controlador (login/control_login.php) al que se enviarán los datos [04:12].
      • Especificarás el método de envío (en este caso, POST) [04:47].
      • Empaquetarás las variables de usuario y contraseña (usuario, password_user) para enviarlas al controlador [05:04].
      • Definirás una función success que se ejecutará cuando la petición AJAX reciba una respuesta del controlador, capturando esos datos en una variable [05:47].
    • Realizarás una prueba inicial con un alert() para confirmar que la información se envía correctamente al controlador [06:11].
  • Recibir Datos en el Controlador PHP 📥
    • En control_login.php, aprenderás a recibir las variables de usuario y contraseña enviadas por AJAX a través del método $_POST [07:10].
    • Comprobarás que el controlador está recibiendo la información correctamente imprimiéndolas [08:37].
  • Mostrar Respuestas Dinámicas en el Modal 💬
    • Crearás un elemento div en tu modal de login con un id (por ejemplo, id="respuesta") [13:45]. Este será el contenedor donde se mostrarán los mensajes de éxito o error.
    • Aprenderás a usar jQuery para seleccionar este div ($("#respuesta")) y actualizar su contenido HTML (.html(datos)) con la respuesta que el controlador PHP envíe [14:21].
    • Implementarás una lógica condicional simple en el controlador (if-else) para simular la verificación de credenciales (ej. si el usuario es nadie@gmail.com) [12:51].
    • Basado en esta condición, el controlador imprimirá un mensaje de éxito (<div class="alert alert-success">Usuario Correcto</div>) o de error (<div class="alert alert-danger">Usuario Incorrecto</div>), que se mostrará instantáneamente en el modal sin recargar la página.

Al finalizar esta lección, habrás implementado con éxito la comunicación asíncrona en tu Sistema de Parqueo. Las peticiones AJAX te permitirán crear una experiencia de usuario fluida y eficiente, donde las interacciones ocurren en tiempo real y sin interrupciones visuales. ¡Tu aplicación es ahora verdaderamente dinámica! 💪