51 Cargar DATOS DE PRODUCTO en el MODAL del Sistema de Ventas con (PHP y MySql)FullStack

Duración: 13 min
Módulo: 💰 Implementación y Registro del Módulo de Compras Lección 3 de 17

Descripción

Lección 51: Carga de Datos de Producto en el Modal (Módulo Compras) 📋🖼️

Este video continúa con la Lección 50 y se enfoca en completar la visualización de todos los datos del producto dentro del modal de detalles que se activa desde la tabla de listado de compras.

1. 📐 Diseño y Estructura del Modal

El instructor ajusta el diseño del modal para que sea más grande y pueda contener toda la información del producto de manera organizada [01:42]:

  • Tamaño del Modal: Se modifica la clase del modal a modal-lg (Large) o modal-xl (Extra Large) para dar más espacio.
  • Estructura de Columnas: Se utiliza el sistema de grilla de Bootstrap (row y col-md-X) para dividir la información de los productos en filas y columnas, haciendo que la vista sea limpia y legible [00:16].
  • Campos Deshabilitados: Todos los campos de entrada (<input>) se marcan como disabled [03:16]. Esto es crucial ya que el modal es solo para visualización y no debe permitir la edición de los datos del producto.

2. 📝 Carga de Datos del Producto

Se procede a cargar todos los campos seleccionados en la consulta del video anterior (Lección 50) dentro de los inputs del modal, utilizando el alias dato_compra [01:04]:

CampoAlias de la BD utilizado en el ModalEstructura
Códigocodigocol-md-2 [03:50]
Nombrenombre_productocol-md-6 [03:50]
DescripcióndescripcionSe ajusta para ocupar varias columnas [03:32]
Stockstock_productocol-md-3 [05:05]
Stock Mínimostock_minimocol-md-3 [05:26]
Stock Máximostock_maximocol-md-3 [05:36]
Fecha de Ingresofecha_ingresocol-md-3 [06:25]
Precio Compraprecio_compra_productoSe utiliza un alias específico para diferenciarlo del precio de la compra en sí [10:30]
Precio Ventaprecio_venta_producto[11:59]

3. 🏞️ Inserción de la Imagen del Producto

Se dedica una sección del diseño del modal a la imagen del producto para darle una mejor presentación [07:07]:

  • Ruta de la Imagen: Se utiliza la etiqueta <img> y se construye la URL dinámicamente, apuntando a la carpeta de imágenes (.../almacen/img_productos/) y concatenando el nombre de archivo guardado en el campo imagen de la consulta [08:12].
  • Estilo: Se ajusta el tamaño de la imagen con un ancho del 100% para que se adapte al contenedor [09:15].

4. Próxima Lección

La siguiente lección continuará mejorando la consulta en el controlador (listado_compras.php) para incluir las relaciones faltantes:

  • Relación con la tabla Categorías para mostrar el nombre de la categoría del producto.
  • Relación con la tabla Proveedores para mostrar los datos del proveedor.
  • Relación con la tabla Usuarios para mostrar quién registró la compra [12:23].