31 LISTADO DE PRODUCTOS CON TABLAS RELACIONADAS en el Sistema de Ventas con (PHP y MySql) FullStack

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

Descripci贸n

Lecci贸n 31: Listado de Productos (Read) y Validaci贸n de Categor铆as 馃摑

Este video marca la transici贸n del curso al m贸dulo de Almac茅n e introduce la complejidad de las consultas a m煤ltiples tablas relacionadas (Inner Join) en PHP y MySQL. Adem谩s, se a帽ade una capa crucial de validaci贸n front-end al CRUD de categor铆as.

1. 鈿欙笍 Implementaci贸n del Listado de Productos (Operaci贸n Read)

Se comienza a desarrollar la vista principal del m贸dulo de Almac茅n, cuyo objetivo es mostrar un listado completo de los productos con sus datos relacionados:

  • Preparaci贸n de la Estructura: Se reutiliza el boilerplate del listado de categor铆as para crear la vista del listado de productos (index.php en el m贸dulo Almac茅n) y su respectivo controlador en PHP [01:19].
  • Consulta Avanzada (Inner Join a 3 Tablas): La clave de esta lecci贸n es la consulta SQL, que debe mostrar informaci贸n de tres tablas simult谩neamente:
    1. almacen (datos del producto).
    2. categorias (para obtener el nombre de la categor铆a, no solo su ID) [09:30].
    3. usuarios (para obtener el email del usuario que registr贸 el producto) [13:28].
  • Visualizaci贸n en la Tabla: La tabla HTML se configura para desplegar todos los campos del producto, incluyendo datos esenciales como el c贸digo, stock, precios y la imagen (mostrada con la etiqueta <img> a 50px) [18:16].

2. 鈿狅笍 Validaci贸n de Campos Requeridos (Categor铆as)

Se soluciona un problema cr铆tico en el m贸dulo anterior: permitir que se guarden o actualicen categor铆as con el campo vac铆o. Se implementa una validaci贸n en el front-end usando jQuery:

  • Detecci贸n de Vac铆o: En los scripts de los modales de creaci贸n y actualizaci贸n, se a帽ade una estructura if que verifica si la variable nombre_categoria est谩 vac铆a (== '') [22:34].
  • Mensaje de Alerta: Si el campo est谩 vac铆o, se detiene el env铆o de AJAX y se ejecutan dos acciones cruciales:
    1. Se muestra el mensaje de error (Este campo es requerido) cambiando su estilo CSS a display: block [23:28].
    2. Se aplica el m茅todo .focus() para llevar autom谩ticamente el cursor al campo de texto, guiando al usuario [23:05].
  • Aplicaci贸n a Modales: Esta l贸gica se aplica de forma separada y din谩mica a los scripts de los modales de registro y actualizaci贸n de categor铆as, asegurando que no se guarden datos nulos [27:37].

Esta lecci贸n refuerza la importancia de la integridad de los datos (validaci贸n) y la complejidad de las relaciones de tablas para obtener informaci贸n completa.