35 SUBIR IMAGEN DEL PRODUCTO desde el FORMULARIO del Sistema de Ventas con (PHP y MySql)FullStack
Duración: 18 minDescripción
Lección 35: Validación y Subida de Imágenes de Productos (FullStack) 🛡️🖼️
Esta lección es fundamental ya que corrige dos deficiencias críticas del registro de productos: la integridad de los datos (validación) y la gestión de archivos (subida de imágenes al servidor).
1. ⚙️ Validación en el Formulario (Frontend)
Se implementa la validación de campos requeridos directamente en la vista (create.php) para guiar al usuario antes de enviar la información al controlador [00:47]:
- Atributo required: Se añade el atributo required a los campos que no deben ser nulos, basándose en la estructura de la base de datos (por ejemplo: nombre, stock, precio_compra, precio_venta, y fecha_ingreso) [03:13].
- Campos Opcionales: Campos como descripcion, stock_minimo, stock_maximo, e imagen se dejan como opcionales, permitiendo que el producto se registre sin ellos [03:54].
2. 📁 Configuración para la Subida de Archivos
Para que PHP pueda procesar la imagen enviada, es necesario un ajuste en la etiqueta <form>:
- Propiedad enctype: Se añade la propiedad enctype="multipart/form-data" al formulario. Esta propiedad es obligatoria para enviar cualquier archivo (imagen, audio, documentos, etc.) al servidor a través de una solicitud HTTP POST [05:44].
3. 🖼️ Lógica de Subida de Imagen (Controlador)
En el controlador (almacen/create.php), se utiliza la superglobal $_FILES para gestionar el archivo de imagen:
A. Nombramiento Único del Archivo
Para evitar que dos imágenes con el mismo nombre se reemplacen en el servidor, se genera un nombre de archivo único antes de guardarlo:
- Concatenación de Tiempo y Nombre: El nombre final del archivo se construye concatenando la fecha y hora exacta (AAAA/MM/DD/HH:MM:SS) con el nombre original del archivo. Esto asegura que cada archivo tenga un identificador único en el servidor [07:06].
B. Traslado del Archivo
Una vez definido el nombre, el archivo se mueve a su destino final:
- Directorio de Destino: Se crea la carpeta img/productos dentro del proyecto para almacenar permanentemente todas las imágenes [09:11].
- Función move_uploaded_file(): Se utiliza la función nativa de PHP para mover el archivo de su ubicación temporal a la ruta de destino definida (../../almacen/img/productos/) [10:24].
C. Inserción en la Base de Datos
- Actualización del INSERT: La consulta INSERT se ajusta para guardar en la columna imagen el nombre de archivo único que se acaba de generar (no el nombre original) [10:53].
4. 🚀 Visualización del Producto Final
Con las correcciones implementadas:
- El sistema registra el producto correctamente.
- La imagen se guarda en el servidor.
- El listado de productos (index.php) se actualiza para enlazar la imagen almacenada con la ruta correcta del directorio (URL/almacen/img/productos/nombre_unico_de_archivo.ext) [14:16].
El sistema queda listo para las siguientes operaciones CRUD (Editar y Eliminar).
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! ❤️