APLICACION WEB

CRUD CON PYTHON

Juan David Gonzalez Monroy – 34066

1. necesitamos un servidor de bases de datos, puede ser Xampp, o cualquier servidor que
deseen, en mi caso usare SQLyog, creamos nuestra tabla donde ingresaremos nuestros
usuarios.

2. Creamos una carpeta donde se almacenarán nuestros componentes para el crud.

3.Desde VisualCode abrimos la carpeta que creamos en el paso anterior.

4. Instalamos algunas extensiones necesarias y complementos del visualCode para poder
realizar nuestro crud.

BootStrap v4 Snippets

Flask Snippets

flask-Snippets

Jinja2 Snippet Kit

5. Instalación de paquetes, vamos a la pestaña “terminal”

Instalación de MySQL

Instalación de jinja2

6. Iniciando la aplicación, creamos nuestro archivo .py en la carpeta del proyecto

7. Creamos carpeta dentro del sistema empleados “templates” y dentro de la carpeta

creamos otra carpeta llamada “empleados” y dentro de esta carpeta creamos un archivo
llamado “index.html”

8. Dentro del archivo “index.html” escribimos “hsb4” (corresponde a una extensión que
hemos instalado en pasos atrás” esto nos traerá unas líneas de código.
9. Ingresamos al archivo .py y generamos nuestro código para que lo que hicimos en html
se pueda mostrar.

10 ejecutamos nuestra app para ver que esté funcionando con el comando Python app.py

Copiamos el running y abrimos en un navegador de internet.

11. Conexión a base de datos.

En el archivo .py importamos nuestra librería para la conexión a bases de datos MYSQL

Adecuamos el código para realziar la conexión a la base de datos.

Insertamos un registro en nuestra tabla

Agregamos un insert dentro de nuestra sentencia sql y ejecutamos nuestro programa.

Y miramos en nuestra tabla, la inserción del registro

12. estructuras html créate y edit

Creamos en la carpeta empleados dos archivos html para el créate y el edit.

Escribimos le código para probar un método post para el créate y poder agregar datos
desde el html.

Creamos la ruta para llamar nuestro template créate

Envió a la base de datos el formulario.

Agregamos al render template el request

Agregamos método para recibir la información del post

Ejecutamos y hacemos el envio

13. guardar imágen en carpeta UPLOADS

Creamos carpeta llamada “uploads” dentro de la carpeta del sistema.

Importamos el datatime para poder renombrar la foto y diferenciar por fecha.

Agregamos el código para renombrar y cambiamos en la sentencia sql

Ejecutamos y una vez ejecutado, revisamos en la carpeta uploads la imagen.

Mostrar registros de la tabla en la pagina INDEX

Creamos el código para cambiar el insert por un select e imprimimos para ver si trae la
información de los registros.
14. Mostrar los datos en html

En el archivo.py agregamos datos de empleado en el retorno

Agregamos nuestra tabla en index.html por medio de tablas

15. Eliminar datos de la tabla.

En el archivo index.html habilitamos el botón para eliminar por medio del id

Modificamos por medio de una etiqueta.

Creamos el método destroy

Agregamos la librería redirect para que una vez eliminemos el registro siga en la pagina
que estábamos
16. Recuperación de datos para editar.

Habilitamos el botón editar en nuestro index.html

Creamos el método para editar.

Agregamos en el archivo edit.html el formulario para imprimir el registro a editar.

17. Guardar la actualización

Creamos el método update

En el archivo edit.html agregamos el envió de datos para poder hacer el update en SQL
18. Modificar Foto.

Agregamos código de validación para cambiar y eliminar foto de la carpeta uploads

Importamos librería de sistema operativo

18. Borrar fotos en uploads

Agregamos al método destroy el código para borrar de la carpeta física la imagen

19. Incluir Archivos header y footer

Creamos dos archivos html en la carpeta templates

Agregaos código de cabecera y pie de pagina respectivamente

Agregamos el código a cada html(créate y edit)
20. Mostrar Fotos

Importamos la librería para poder mostrar las fotos

Agregamos el método para poder ver la foto y direccionarla

Modificamos en index.html para poder ver la imagen

21. Empezamos a validar mensajes de error, estilo de botones y formularios para asi poder
culminar nuestro aplicativo Crud.