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

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

Descripci贸n

Lecci贸n 28: CRUD de Categor铆as con Modales (Introducci贸n a AJAX) 鈿欙笍

Este video marca la transici贸n en el desarrollo del sistema de ventas hacia el uso de ventanas modales y la tecnolog铆a AJAX para la gesti贸n de datos. El enfoque inicial es el m贸dulo de Categor铆as, necesario para clasificar los productos del almac茅n.

1. 馃搵 Adaptaci贸n del Listado de Categor铆as

El listado de categor铆as se configura reutilizando el c贸digo del m贸dulo de roles:

  • Creaci贸n de Controlador: Se crea el directorio y el archivo de controlador para el listado de categor铆as (listado_categorias.php) [06:20].
  • Consulta SQL: El controlador ejecuta una consulta SELECT * FROM categorias y almacena el resultado en la variable $categorias_datos [07:04].
  • Vista (index.php): La vista se adapta para mostrar la lista de categor铆as, utilizando el campo nombre_categoria en el foreach para listar los registros existentes [09:41].

2. 馃拵 Implementaci贸n de Modales y AJAX

Se introduce el uso de modales (ventanas emergentes) y la librer铆a jQuery/AJAX para las operaciones CRUD, lo que permite interactuar con la base de datos sin recargar la p谩gina:

a. Modal de Creaci贸n

  • Incorporaci贸n del Modal: Se copia el c贸digo de un modal de la plantilla AdminLTE y se a帽ade a la vista index.php de categor铆as [11:16].
  • ID y Bot贸n:
    • Se renombra el ID del modal a modal_create para identificarlo [15:52].
    • Se crea un bot贸n "Agregar Nuevo" que abre este modal [15:35].
  • Formulario: Dentro del cuerpo del modal, se crea un formulario simple para registrar el Nombre de la Categor铆a [16:16].

b. Configuraci贸n para AJAX

  • Preparaci贸n de jQuery: Se recomienda mover la inclusi贸n de la librer铆a jQuery del footer al HEAD para garantizar que est茅 disponible antes de que se ejecute cualquier script de AJAX [11:51].
  • Manejo del Bot贸n: Se asigna el ID btn_create al bot贸n "Guardar Categor铆a" [18:59].
  • Funci贸n click: Se utiliza JavaScript/jQuery para capturar el evento click del bot贸n, verificando que la l贸gica (en este caso, un simple alert) se ejecute correctamente [19:10].

El video concluye con la estructura lista para comenzar a enviar datos mediante la funci贸n AJAX en la siguiente lecci贸n, logrando que el registro de nuevas categor铆as se realice de forma as铆ncrona [20:00].