32 FORMULARIO PARA EL REGISTRO DE PRODUCTOS en el Sistema de Ventas con (PHP y MySql) FullStack

Duración: 14 min
Módulo: 📦 Gestión de Productos y Categorías Lección 7 de 15

Descripció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:

CampoTipo de InputUbicación en el Formulario
CódigotextColumna 1
Categoría(Se definirá en la próxima lección)Columna 2 [11:35]
Nombre del ProductotextColumna 3 [03:43]
Usuariotext (Se llenará automáticamente)Columna 1 (Siguiente Fila) [13:11]
StocknumberColumna 2 [04:45]
Stock MínimonumberColumna 3 [05:23]
Stock MáximonumberColumna 1 (Siguiente Fila) [05:35]
Precio CompranumberColumna 2 [06:01]
Precio VentanumberColumna 3 [06:11]
Fecha de Ingresodate(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.