51 Cargar DATOS DE PRODUCTO en el MODAL del Sistema de Ventas con (PHP y MySql)FullStack
Duración: 13 minDescripció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]:
| Campo | Alias de la BD utilizado en el Modal | Estructura |
|---|---|---|
| Código | codigo | col-md-2 [03:50] |
| Nombre | nombre_producto | col-md-6 [03:50] |
| Descripción | descripcion | Se ajusta para ocupar varias columnas [03:32] |
| Stock | stock_producto | col-md-3 [05:05] |
| Stock Mínimo | stock_minimo | col-md-3 [05:26] |
| Stock Máximo | stock_maximo | col-md-3 [05:36] |
| Fecha de Ingreso | fecha_ingreso | col-md-3 [06:25] |
| Precio Compra | precio_compra_producto | Se utiliza un alias específico para diferenciarlo del precio de la compra en sí [10:30] |
| Precio Venta | precio_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].
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! ❤️