29 CRUD - CATEGORÍAS CONTROLLERS con MODALS en el Sistema de Ventas con (PHP y MySql) FullStack
Duración: 16 minDescripción
Lección 29: CRUD - Controladores de Categorías con Modales y AJAX 🔄
Este video continúa con la implementación de la función de creación de categorías, demostrando cómo enviar datos del formulario modal a un controlador de PHP utilizando AJAX (jQuery) para evitar la recarga de la página.
1. 💻 Configuración de la Interfaz (Vista index.php)
Se preparan los elementos de la vista para la comunicación asíncrona:
- Captura de Datos: Se asigna un id al campo de texto (input) del formulario:
- id="nombre_categoria" [01:56]
- Contenedor de Respuesta: Se crea un div vacío en la vista para recibir y mostrar mensajes de éxito o error enviados desde el controlador:
- id="respuesta" [06:45]
2. 📝 Lógica de Envío de Datos con jQuery/AJAX
En el script de jQuery dentro de la vista (index.php), se define la lógica para enviar el dato:
Obtención de Valor: El valor del campo de texto se rescata y se almacena en una variable de JavaScript:
JavaScript
let nombre_categoria = $("#nombre_categoria").val();
[02:12]
Definición del Controlador: Se establece la ruta al nuevo archivo de procesamiento en PHP:
JavaScript
let url = "app/controles/categorias/registro_de_categorias.php";
[04:29]
Llamada AJAX: Se utiliza el método $.get para enviar la información por el método GET al controlador, pasando la variable como parámetro:
JavaScript
$.get(url, {nombre_categoria: nombre_categoria}, function(datos){ // Muestra la respuesta del controlador en el div con ID "respuesta" $("#respuesta").html(datos); });
[04:46]
3. 🛡️ Creación del Controlador (Archivo registro_de_categorias.php)
Se crea el controlador que recibe, procesa e inserta el dato en la base de datos:
- Inclusión de Conexión: Se incluye el archivo de configuración y conexión a la base de datos [07:59].
Recepción de Datos: El valor enviado por AJAX se recibe en PHP usando el array $_GET:
PHP
$nombre_categoria_recibido = $_GET["nombre_categoria"];
[08:16]
- Consulta de Inserción (Sentencia Preparada): Se utiliza una sentencia preparada (similar a las vistas anteriores) para insertar el nuevo registro en la tabla categorias [09:52].
Redirección y Refresco: Una vez insertado el registro, para asegurar que la tabla de la vista index.php se actualice con la nueva categoría, el controlador de PHP incluye un script de JavaScript que fuerza la recarga de la página principal de categorías:
PHP
// Código PHP después de la inserción exitosa ?> <script> window.location.href = "<?php echo $url_base; ?>/categorias"; </script> <?php
[13:50]
Al finalizar, la inserción de una nueva categoría se realiza desde el modal, la página se recarga automáticamente para mostrar el dato recién agregado, y el proceso se considera completado para la operación Create del CRUD [14:28].
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
