58 PASANDO DATOS DEL PROVEEDOR en el SISTEMA DE VENTAS(PHP y MySql) FullStack
Duración: 12 minDescripción
Lección 58: Finalización de la Transferencia de Datos del Proveedor y Estilizado 🎨💾
Esta lección se centró en completar la funcionalidad de transferencia de datos del proveedor al formulario de registro de compra y en aplicar un estilizado visual para mejorar la usabilidad, destacando la información clave del inventario.
1. Ajustes de Diseño y Usabilidad del Formulario ✨
Antes de la programación, se realizaron ajustes para asegurar una presentación limpia y funcional de los datos del proveedor:
- Estructura de Columnas: Se reorganizaron los inputs de los datos del proveedor en una estructura de columnas 4x3 (4 columnas por 3 filas) para aprovechar el espacio horizontal [00:00].
- Campos Deshabilitados: Todos los campos de datos del proveedor se marcaron como disabled (deshabilitados) para evitar cualquier edición accidental, ya que estos campos solo tienen fines de visualización y consulta [01:28].
- Estilo Uniforme: Se aplicó un estilo a toda la sección de datos del proveedor, como una reducción en el tamaño de fuente a 12 píxeles, mejorando la compactación visual del formulario [02:30].
2. Transferencia de Datos del Proveedor (AJAX/jQuery) ➡️
Se implementó el script de jQuery para que, al hacer clic en el botón "Seleccionar", los datos de la fila de la tabla del modal se extraigan y se inyecten en el formulario:
- Identificación: Se utilizó el selector de ID #btn_seleccionar_proveedor más el ID único del proveedor para activar la función click [03:53].
- Variables y Asignación: Se extrajeron los datos clave de la fila (Nombre, Celular, Teléfono, Empresa, Email, Dirección) y se usó la propiedad .val() para asignarlos a los inputs correspondientes en el formulario principal [04:42].
- Cierre Automático del Modal: Al completarse la transferencia de datos, el modal se oculta automáticamente usando el comando .modal('hide') [06:54].
3. Destacando la Información Crítica (Stock Actual) ⚠️
Para guiar al usuario sobre la información más relevante de cara a la compra, se aplicó un estilo distintivo al campo de Stock Actual del producto:
- Énfasis Visual: El input que muestra la cantidad de stock actual del producto (id_stock) se estilizó con un fondo de color amarillo (background-color: yellow;) [10:32].
- Propósito: Este resalte visual sirve como una advertencia o foco, indicando al usuario la cantidad actual de inventario antes de ingresar la nueva cantidad de compra, lo cual será clave para la lógica de actualización del stock en la siguiente lección.
4. Próximos Pasos ⏭️
Con la selección de Producto y Proveedor finalizada, el formulario está listo para la fase de guardado. El siguiente video abordará el envío de toda la información al controlador de PHP, donde se ejecutará la lógica de guardado en la base de datos y la actualización automática del stock del producto [11:27].
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! ❤️