Lección: 54 Cargar productos en la página principal del curso de SISTEMA VETERINARIO (PHP y MySql) FullStack

54 Cargar productos en la página principal del curso de SISTEMA VETERINARIO (PHP y MySql) FullStack

Duración: 8 min

Módulo: 🌟 Mejora de la Experiencia y Visualización de Productos Lección 4 de 4

Descripción

🎬 Lección 54: Carga de Productos en la Página Principal 🖼️

Esta lección culmina el proceso de hacer que la sección de productos del sitio web público sea dinámica, reflejando el inventario del sistema de administración en tiempo real.

1. Dinamización de la Vista Pública

El instructor toma la estructura estática de la página principal y la transforma en código dinámico:

Título de Sección: Se cambia el título de la sección de "Nuestros Servicios" a "Nuestros Productos". [00:06]
Implementación del Bucle: Se identifica el código HTML de una única tarjeta de producto y se corta, dejando solo la estructura del Grid de Bootstrap (col-md-3). [01:21]
Bucle foreach: Se implementa un bucle foreach ($productos as $producto) que iterará tantas veces como productos existan en la base de datos, duplicando la estructura de la tarjeta para cada registro. [01:28]

2. Carga Dinámica de Datos

Se utiliza la variable $producto dentro del bucle para inyectar los datos reales del producto en cada tarjeta:

Imagen: Se construye la ruta completa de la imagen combinando la ruta pública base (/public/imagenes/productos/) con el nombre del archivo ($producto['imagen']), logrando que las imágenes carguen correctamente. [02:37]
Título: Se inserta el nombre_producto como el título de la tarjeta. [04:02]
Descripción: Se inserta el campo descripcion en el cuerpo de la tarjeta. [04:28]
Precio: Se muestra el precio_venta del producto, al cual se le da formato (color rojo y negrita) y se le concatena la moneda ("bolivianos"). [05:19]

3. Resultado y Próximos Pasos

La lección finaliza demostrando la funcionalidad completa:

Prueba en Vivo: Al registrar un nuevo producto ("Vacunas") en el panel administrativo, la página pública se actualiza automáticamente, mostrando inmediatamente los tres productos cargados (dos originales y las vacunas). [07:17]
Estado Final: El sistema ha logrado una integración FullStack, donde los datos ingresados en el área privada se reflejan instantáneamente en la interfaz pública.
Nota sobre Iconos: En esta sección, el diseño utiliza las imágenes reales de los productos cargados por el administrador para la visualización. Los iconos (como el de la cesta 🛒) fueron implementados en la lección anterior para dinamizar los widgets del Dashboard administrativo.

El siguiente módulo que se abordará será la Reserva de Citas 📅, el cual implicará la integración de un calendario con PHP para manejar horarios y disponibilidad. [08:01]

Hilari Web