10 – USANDO JQUERY EN EL PROYECTO ( 👨💻 PHP y MYSQL 💻)

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

Descripción

Lección 10 – USANDO JQUERY EN EL PROYECTO ( 👨💻 PHP y MYSQL 💻)

¡Es hora de inyectar dinamismo y reactividad a tu Sistema de Parqueo! 🚀 En esta lección, te sumergirás en el uso de jQuery para hacer que la interacción con tu interfaz sea mucho más fluida. Tu instructor te guiará para preparar el terreno para las llamadas AJAX que harán tu login (y otras funcionalidades) sin recargas.

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

  • Preparando el Escenario para AJAX 💡
    • Recordarás la importancia de AJAX para un login que no refresque toda la página [00:32], agilizando las respuestas y mejorando la experiencia del usuario. Para ello, jQuery es una pieza fundamental.
  • Verificando la Integración de jQuery
    • Te asegurarás de que la librería jQuery.js esté correctamente referenciada en tu proyecto dentro de la carpeta public/js [01:21].
  • Iniciando tu Primer Script en JavaScript (con jQuery) 📝
    • Crearás una etiqueta <script> donde empezarás a escribir tu código JavaScript. Como primera prueba, lanzarás un alert para verificar que tu script se ejecuta correctamente [01:43].
  • Asignando un Identificador al Botón de Login 🆔
    • En tu botón "Ingresar" del modal de login, añadirás un atributo id con el valor btn_ingresar [02:48]. Este id será clave para que jQuery pueda "escuchar" los eventos de este botón.
  • Detectando Eventos con jQuery: El click del Botón 👆
    • Aprenderás a usar la sintaxis de jQuery para seleccionar tu botón por su id (#btn_ingresar) y adjuntarle un evento click [03:10]. Dentro de este evento, se ejecutará una función cada vez que el botón sea presionado, lo que te permitirá controlar la lógica del login.
  • Recuperando Valores de los Campos del Formulario 📥
    • Asignarás atributos id a los campos de texto del usuario (#txt_usuario) [05:21] y la contraseña (#txt_password_user) [06:53] en tu modal de login.
    • Utilizarás jQuery para obtener los valores introducidos en estos campos usando el método .val() y los almacenarás en variables JavaScript [05:14].
    • Realizarás pruebas con alert() para verificar que los valores se están recuperando correctamente [05:51].

Al finalizar esta lección, habrás sentado las bases para la interactividad de tu Sistema de Parqueo. Con jQuery funcionando, tu proyecto está listo para dar el salto a las peticiones AJAX en la siguiente fase, permitiendo una experiencia de usuario fluida y sin interrupciones. ¡Estás a punto de hacer tu aplicación mucho más dinámica! 💪