32 FORMULARIO PARA EL REGISTRO DE PRODUCTOS en el Sistema de Ventas con (PHP y MySql) FullStack
Duración: 14 minDescripción
Lección 32: Diseño del Formulario de Registro de Productos (FullStack PHP/MySQL) 🎨
Esta lección se enfoca en la creación de la interfaz de usuario (vista) para el registro de nuevos productos, organizando los numerosos campos necesarios en un formulario limpio y estructurado.
1. 🏗️ Preparación de la Vista de Registro
Se inicia el proceso de creación del formulario de registro de productos (create.php) [01:11]:
- Reutilización del Código: Se copia la estructura del formulario de registro de roles (roles/create.php) para mantener la coherencia del diseño del sistema.
- Ajuste del Título: Se actualiza el encabezado a "Registro de un Nuevo Producto" [01:35].
- Ampliación del Contenedor: Dado que la tabla de productos tiene 12 campos que deben ser llenados, el contenedor principal del formulario se extiende para ocupar las 12 columnas completas (col-md-12) [02:13].
2. 📋 Estructura del Formulario con Columnas
Para gestionar la gran cantidad de campos, se utiliza la cuadrícula de Bootstrap, dividiendo el formulario en filas (row) y columnas (col-md-4) para un diseño de tres columnas por sección:
| Campo | Tipo de Input | Ubicación en el Formulario |
|---|---|---|
| Código | text | Columna 1 |
| Categoría | (Se definirá en la próxima lección) | Columna 2 [11:35] |
| Nombre del Producto | text | Columna 3 [03:43] |
| Usuario | text (Se llenará automáticamente) | Columna 1 (Siguiente Fila) [13:11] |
| Stock | number | Columna 2 [04:45] |
| Stock Mínimo | number | Columna 3 [05:23] |
| Stock Máximo | number | Columna 1 (Siguiente Fila) [05:35] |
| Precio Compra | number | Columna 2 [06:01] |
| Precio Venta | number | Columna 3 [06:11] |
| Fecha de Ingreso | date | (Se utiliza el tipo date de HTML para un selector de calendario) [06:32] |
3. ✨ Integración de Iconos Elegantes e Imagen
Se dedican secciones especiales para los campos de descripción e imagen, buscando optimizar el espacio:
- Descripción del Producto: Se utiliza un elemento textarea en lugar de un input para permitir ingresar textos más largos, configurado inicialmente con dos filas (rows="2") [11:02].
- Carga y Previsualización de Imagen:
- Se crea una sección de 9 columnas para el formulario y 3 columnas para la imagen, permitiendo un espacio visible para la previsualización [08:23].
- Se añade un input de tipo file para la carga de la imagen [11:55].
- (Nota: La lógica para la previsualización de la imagen antes de guardar y los iconos elegantes para las acciones serán implementadas en videos posteriores) [14:00].
El resultado es un formulario intuitivo y organizado que facilita al usuario la entrada de todos los datos complejos del producto.
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! ❤️