30 CRUD - UPDATE CATEGOR脥AS con MODALS en el Sistema de Ventas con (PHP y MySql) FullStack

Duraci贸n: 21 min
M贸dulo: 馃摝 Gesti贸n de Productos y Categor铆as Lecci贸n 5 de 15

Descripci贸n

Lecci贸n 30: CRUD - Actualizaci贸n de Categor铆as con Modales y AJAX 馃攧

Este video se centra en la implementaci贸n de la funcionalidad de Actualizaci贸n (Update) para las categor铆as, completando as铆 las operaciones b谩sicas de la gesti贸n del m贸dulo de categor铆as.

1. 馃帹 Implementaci贸n del Modal de Actualizaci贸n

Se modifica el listado de categor铆as para incorporar la acci贸n de edici贸n a trav茅s de una ventana modal:

  • Bot贸n de Edici贸n: Se reemplaza el bot贸n de edici贸n tradicional por uno que activa un nuevo modal llamado modal_update [01:48].
  • Dise帽o del Modal: Se copia el c贸digo del modal de creaci贸n, se le cambia el t铆tulo a "Actualizaci贸n de la Categor铆a", y se le aplica un estilo CSS diferente (color verde) para distinguirlo del modal de creaci贸n (azul) [04:09].
  • Formulario: El formulario del modal de actualizaci贸n incluye un campo de texto para el nombre de la categor铆a y un bot贸n de "Actualizar" con el ID btn_update [04:31].

2. 馃啍 Identificaci贸n Din谩mica de Elementos (ID 脷nicos)

El punto m谩s importante es asegurar que cada bot贸n y modal sea 煤nico dentro del bucle foreach que lista las categor铆as. Esto se logra concatenando el ID de la Categor铆a (id_categoria) al nombre del elemento:

  • Modal 脷nico: El ID del modal se define como modal_update + id_categoria (ej. modal_update3) [08:21].
  • Bot贸n 脷nico: El data-target del bot贸n de edici贸n se configura de manera similar para que coincida con el ID 煤nico del modal [09:09].
  • Input y Script 脷nicos: El input del formulario y la funci贸n de JavaScript/jQuery tambi茅n deben ser 煤nicos (ej. nombre_categoria3, btn_update3) para que la l贸gica de AJAX sepa exactamente qu茅 elemento modificar y qu茅 bot贸n ha sido presionado [10:46].

3. 馃捑 L贸gica de Actualizaci贸n con AJAX

La actualizaci贸n se realiza de forma as铆ncrona, siguiendo la misma l贸gica del registro:

  1. Captura de Clic: La funci贸n de jQuery captura el evento click del bot贸n btn_update (con su ID 煤nico) [11:13].
  2. Obtenci贸n de Par谩metros: Se leen dos valores esenciales:
    • El nuevo valor del nombre de la categor铆a desde el input [13:31].
    • El id_categoria (obtenido desde el ID 煤nico del bot贸n/script) [12:01].
  3. Llamada AJAX: Se utiliza AJAX para enviar estos dos par谩metros al nuevo controlador [14:41].
  4. Controlador PHP: Se crea el controlador update_de_categorias.php [14:26], el cual recibe el nuevo nombre y el ID de la categor铆a, y ejecuta la sentencia SQL UPDATE categorias SET nombre_categoria = ?, fecha_hora_update = ? WHERE id_categoria = ? [17:58].

Al completar la operaci贸n, el controlador redirecciona forzadamente la p谩gina para que el listado se refresque y muestre el nombre de la categor铆a actualizado [18:40].