Lección: 40 CRUD - READ de PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack

40 CRUD - READ de PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack

Duración: 14 min

Módulo: 📦 CRUD Completo de Productos y Relaciones de Tablas Lección 3 de 13

Descripción

🎬 Lección 40: CRUD - Lectura (READ) de Productos

El objetivo principal de esta lección es enlazar la tabla tabla_productos con la vista Index.php para listar los productos registrados.

1. Preparación de la Interfaz y Datos 📋

Definición de Columnas: Se actualizan los encabezados de la tabla (Index.php) para reflejar los campos del producto, incluyendo:
- N°
- Código
- Nombre del Producto
- Descripción
- Imagen 🖼️ (el principal elemento visual a listar)
- Stock
- Precio Compra
- Precio Venta
- Fecha de Ingreso
- Acciones (Botones de Show, Eliminar y Update) [01:06]
Ingreso Manual de Prueba: Se inserta un producto de prueba ("Croquetas") manualmente en la base de datos, incluyendo una URL de imagen temporal y el ID de usuario, para tener datos que mostrar en la vista. [03:03]

2. Implementación del Controlador (READ) ⚙️

Creación del Controlador: Se crea el archivo listado_de_productos.php dentro de la carpeta del controlador (app/controller/productos). [07:07]
Lógica de Lectura: El controlador ejecuta una consulta SQL SELECT * FROM tabla_productos para traer todos los registros de la tabla. El resultado se guarda en una variable de sesión llamada productos para que la vista pueda acceder a ellos. [07:46]
Despliegue de Datos: En la vista Index.php se utiliza un bucle foreach para iterar sobre la variable de sesión y generar una fila (<tr>) por cada producto. [08:18]
- Se implementa una variable contador ($contador) que se incrementa en cada iteración para mostrar el número correlativo de la lista. [08:47]

3. Inclusión de Elementos Visuales e Íconos ✨

El instructor se asegura de que el listado sea funcional y visualmente informativo:

Visualización de Imagen: En lugar de mostrar la URL de la imagen como texto, se envuelve la variable dentro de una etiqueta <img> para mostrar la imagen directamente en la tabla. [12:05]
Ajuste de Icono/Imagen: Para que la imagen del producto no rompa el diseño de la tabla, se le asigna un tamaño máximo de width: 100px a la etiqueta <img>, escalando correctamente la visualización del producto. [12:25]
Íconos de Acciones: La última columna, "Acciones", se reserva para los botones que representan las funcionalidades pendientes del CRUD: Ver (Show), Editar (Update) y Eliminar (Delete). Aunque los botones están vacíos por ahora, el espacio y el concepto de los iconos de acción están definidos. [11:38]

Con esta lección, el listado de productos queda configurado y listo para trabajar en la siguiente etapa, que es la creación de un formulario para registrar productos (CREATE).

Hilari Web