PROCESO DE GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
FORMATO GUÍA DE APRENDIZAJE – MATERIAL DE APOYO
CONEXIÓN A BASES DE DATOS DESDE PYTHON
Material Apoyo Cargar Imágenes de los Productos
Continuando con el proyecto de la Aplicación web de la Tienda vamos a revisar como
cargar al servidor una imagen de cada producto a la hora de registrar un producto.
Para iniciar se recomienda instalar la librería WERKZEUG, para utilizarla en lo relacionado
con información de los archivos que se cargan al servidor.
En el archivo Python importar la librería werkzeug y os para el tratamiento de archivos.
Agregar al código del archivo [Link] la siguiente configuración para indicar cuál es la
carpeta donde se van a cargar las fotos de los productos.
GFPI-F-135 V01
Modificar la función de agregar un producto en la aplicación así: En el cuadrio rojo está
el código que recibe de la vista un campo llamado fileFoto que representa la imagen del
producto la cuál la debemos cargar al servidor.
Ahora hay que modificar el html del formulario que permite agregar el producto para
incorporar un control de tipo file así:
Y en la parte del encabezado del formulario agregar la propiedad enctype así:
GFPI-F-135 V01
La vista quedaría así:
Proceso Listar los productos incluyendo la imagen
Modificar el html de la vista de la siguiente forma:
GFPI-F-135 V01
En el código anterior se agregar dos columnas: una para mostrar la imagen y otra para
realizar dos acciones de las cuales una es para editar y la otra para eliminar. En la línea 31
de la imagen podemos ver como agregamos en la columna de la tabla un elemento html
img para mostrar la imagen, teniendo en cuenta que la imagen de cada producto tiene
como nombre el código del producto con la extensió[Link]. Visualmente se ibserva así:
Proceso Eliminar un producto
Sin ustedes observan en la línea 24 de la siguiente imagen, se está agregando un evento
click al elemento el cual llama a una función eliminar donde se pasa el código del producto.
Dicha función eliminar debe estar en un archivo javascript.
GFPI-F-135 V01
Código en el archivo [Link]
La función eliminar abre una ventana modal la cual tiene un botón con una etiqueta a con
un id llamado rutaEliminar el cual se modifica para que al dar clic llame a la ruta llamada
eliminar.
GFPI-F-135 V01
Código html de la ventana modal que se encuentra en el archivo donde se listan los
productos:
Ahora el código de la ruta eliminar en la aplicación Python
Como ustedes pueden observar el código anterior se agrega en la línea 127 eliminar la
imagen del producto.
GFPI-F-135 V01
Proceso Editar el Producto:
En el formulario del editar el producto también se agrega un campo de tipo file así como se
realizó en el formulario de agregar.
Al formulario se le agregó un campo oculto para guardar ahí el código del producto por si
se modifica también el código.
GFPI-F-135 V01
Código proceso editar el producto en el archivo [Link]: Si al actualizar sube una nueva
imagen, se elimina la que hay y se carga una nueva. Si no cambia el código del producto
pero si sube una nueva imagen entonces se renombra el archivo.
GFPI-F-135 V01
Para finalizar en el archivo de javascript [Link] se ha incorporado una función que permite
validar la extensión de un archivo y su tamaño, el cual puede ser utilizado para cualquier
tipo d archvo que se quiera cargar en un servidor.
La función anterior se llama cuando se selecciona un archivo así:
Espero les sirva como apoyo.
CONTROL DEL DOCUMENTO
Nombre Cargo Dependencia Fecha
Autor (es) César Marino Cuéllar Chacón Instructor CIES-NEIVA 6-12-2021
GFPI-F-135 V01