33 CARGAR CÓDIGO E IMAGEN EN EL FORMULARIO en el Sistema de Ventas con (PHP y MySql) FullStack
Duración: 18 min
Módulo: 📦 Gestión de Productos y Categorías
Lección 8 de
15
Descripción
Lección 33: Carga Automática de Código y Previsualización de Imagen en el Formulario de Productos 🛠️
Esta lección se enfoca en añadir funcionalidad dinámica al formulario de registro de productos, automatizando campos clave y mejorando la experiencia del usuario con la previsualización de imágenes.
1. 🔢 Generación Automática del Código de Producto
El campo del código del producto se desactiva (disabled) y se rellena automáticamente utilizando una función PHP para asegurar un formato secuencial y uniforme:
- Función PHP ceros(): Se utiliza una función personalizada en PHP que recibe un número y un parámetro de longitud deseada (por ejemplo, 5 dígitos). La función calcula cuántos ceros se necesitan para completar la longitud y los añade como prefijo [02:17].
- Contador del Próximo ID: Para obtener el número que sigue en la secuencia, se llama al controlador de listado de productos y se utiliza un bucle foreach para contar el número de registros existentes. A ese conteo se le añade +1 para determinar el ID del próximo producto a registrar [05:54].
- Formato Final: El código final se muestra en el campo con un prefijo fijo (ej. P-) concatenado con los ceros y el número de secuencia (ej. P-00002) [03:45].
2. 🗄️ Carga de Categorías y Usuarios
Se implementan los datos de las categorías y el usuario responsable en sus respectivos campos:
- Categorías (Select/Combobox):
- Se utiliza un elemento <select> de HTML para el campo de categoría [07:41].
- Se llama al controlador que lista las categorías y se usa un bucle foreach para llenar dinámicamente cada opción <option> del select [09:15].
- El value de cada opción almacena el ID de la categoría (que es lo que se guarda en la base de datos), mientras que el texto visible es el Nombre de la Categoría [11:10].
- Usuario Registrador: El ID del usuario que ha iniciado sesión se extrae de la variable de $_SESSION y se inserta automáticamente en el campo de usuario [16:12]. Este campo también se deshabilita para evitar modificaciones.
3. 🖼️ Previsualización de Imágenes (Usabilidad y Experiencia de Usuario)
Para mejorar la experiencia del usuario y darle confianza sobre qué imagen está cargando, se implementa un script de JavaScript que permite la previsualización de la imagen seleccionada antes de enviarla al servidor [12:25]:
- HTML Requerido: Se utiliza un input de tipo file con el ID file y un elemento de salida (etiqueta output) con el ID idList donde se mostrará la imagen [14:15].
- Función JavaScript: El script captura el evento de selección de archivo en el input y, utilizando la API FileReader, lee el archivo seleccionado. Luego, inserta una etiqueta <img> con el source del archivo dentro del elemento output [13:07].
- Diseño: La imagen se configura para que ocupe el 100% del ancho de su contenedor, manteniendo su proporción [15:17].
💡 Nota sobre Iconos Elegantes: Aunque el video no se centra en la adición de librerías de iconos, los tipos de input se ajustan a number (para stock y precios) y date (para fechas) [16:58]. Estos tipos de campo nativos proveen controles y validaciones elegantes por defecto en el navegador.
Lecciones
🚀 Preparación, Login y Sesiones Seguras
Lección 7. 06 Como DESTRUIR SESION DEL USUARIO en el Sistema de Ventas con(PHP y MySql)FullStack
8 min
Lección 9. 08 Adaptando nuestra PLANTILLA para el Sistema de Ventas con (PHP y MySql) FullStack
18 min
👤 CRUD de Usuarios y Roles (Seguridad Lógica)
Lección 2. 10 CRUD - READ lectura de USUARIOS del Sistema de Ventas con (PHP y MySql) FullStack
18 min
Lección 3. 11 Formulario de NUEVO USUARIO en el Sistema de Ventas con (PHP y MySql) FullStack
11 min
📦 Gestión de Productos y Categorías
Lección 1. 26 MÓDULO PRODUCTOS Y CATEGORÍAS en el Sistema de Ventas con (PHPyMySql) FullStack
18 min
Lección 3. 28 CRUD - CATEGORÍAS con MODALS en el Sistema de Ventas con (PHP y MySql) FullStack
20 min
Lección 14. 39 DELETE PRODUCTOS desde el FORMULARIO del Sistema de Ventas con (PHP y MySql)FullStack
12 min
🚚 Módulo de Proveedores y Configuración
Lección 5. 45 ACTUALIZAR PROVEEDORES del Sistema de Ventas con (PHP y MySql) FullStack PARTE 1
14 min
💰 Implementación y Registro del Módulo de Compras
Lección 3. 51 Cargar DATOS DE PRODUCTO en el MODAL del Sistema de Ventas con (PHP y MySql)FullStack
13 min
Lección 5. 53 CARGAR datos del PROVEEDOR en el MODAl en el SISTEMA DE VENTAS(PHP y MySql)FullStack
15 min
🔄 Mantenimiento y Actualización de Compras
Lección 4. 69 MOSTRAR EL DETALLE DE LA COMPRA DEL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 1
13 min
Lección 6. 71 ACTUALIZAR DATOS DE LA COMPRA DEL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 1
15 min
Lección 8. 73 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 1
9 min
Lección 9. 74 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 2
9 min
Lección 10. 75 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 3
8 min
Lección 11. 76 CONTROLLER ACTUALIZAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 4
5 min
Lección 14. 79 CONTROLLER PARA ELIMINAR COMPRA EN EL SISTEMA DE VENTAS (PHPyMySql) FullStack PARTE 3
14 min
Lección 15. 80 COMMIT PARA COMPARTIR EL CODIGO FUENTE DEL SISTEMA DE VENTAS (PHPyMySql) FullStack
9 min
💳 Preparación para Ventas y Clientes
Lección 2. 82 Modelo para el CARRITO de VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
9 min
Lección 5. 85 Formulario de VENTAS y CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack Parte 1
8 min
Lección 6. 86 Contador de VENTAS AUTOMÁTICO en el SISTEMA DE VENTAS (PHP y MySql) FullStack Parte 2
8 min
🛒 Lógica del Carrito y Clientes Dinámicos
Lección 8. 95 CALCULANDO LOS TOTALES del CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack
12 min
Lección 13. 100 CALCULAR el cambio del TOTAL A PAGAR en el SISTEMA DE VENTAS (PHP y MySql) FullStack
8 min
Lección 14. 101 PREPARANDO DATOS para guardar VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
9 min
Lección 15. 102 Agregar NUEVO CLIENTE en VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
9 min
🧾 Cierre de Venta y Control de Inventario
Lección 1. 104 GUARDAR VENTA en la tabla VENTAS en el SISTEMA DE VENTAS (PHP y MySql) FullStack
12 min
Lección 2. 105 ACTUALIZANDO STOCK segun el CARRITO en el SISTEMA DE VENTAS (PHP y MySql) FullStack
18 min
Lección 3. 106 ACTUALIZANDO STOCK y GUARDAR VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
17 min
Lección 5. 108 DATOS COMPLETOS DE LA VENTA GUARDADA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
19 min
Lección 6. 109 Acción MOSTRAR datos de la VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
8 min
Lección 7. 110 Acción MOSTRAR datos de la VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Lección 8. 111 Acción DELETE datos de la VENTA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Lección 12. 115 Controller BORRAR venta y carrito en el SISTEMA DE VENTAS (PHP y MySql) FullStack
13 min
📄 Facturación Profesional (TCPDF) y Dashboard Final
Lección 1. 118 Diseñando el encabezado de la FACTURA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Lección 2. 119 Diseñando el encabezado de la FACTURA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
10 min
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
