CRUD

1. Flask

Flask es un framework web WSGI ligero (Web Server Gateway Interface). Está diseñado para que empezar sea rápido y fácil, con la capacidad de escalar a aplicaciones complejas. Comenzó como un simple agregado para Werkzeug y Jinja y se ha convertido en uno de los framework web de Python más populares.

2. Crear y Leer

$ git clone https://github.com/GermanXander/docker_iot.git

# branch CRUDa

# crud.py

Vemos que por ahora nuestra aplicación solo tiene dos funciones.
La función add_contact() recibe los datos de un nuevo contacto y los guarda en la base de datos.
La función principal (index) obtiene todos los registros de nuestra base de datos y se los pasa a la plantilla index.html.
Dentro de las plantillas se tiene accesso a los objetos config, request, session y g así como a las funciones url_for() y get_flashed_messages().

# index.html

Este es archivo base que heredarán todos los demás.

# layout.html

# docker/crud/Dockerfile

# compose.yaml

3. Detrás de un proxy

Para que nuestra aplicación funcione detrás de nginx debemos crear un archivo con las instrucciones para el proxy reverso. Para que Flask funcione correctamente detrás de un proxy se necesitan las instrucciones proxy_set_header.

# branch CRUDb

# docker/swag/nginx/proxy-confs/crud.subfolder.conf 

location /crud {
    return 301 $scheme://$host:10000/crud/;
}

location ^~ /crud/ {
    include /config/nginx/proxy.conf;
    include /config/nginx/resolver.conf;

    set $upstream_crud crud;
    set $upstream_port 8000;
    set $upstream_proto http;
    proxy_pass http://$upstream_crud:$upstream_port ;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Prefix /crud;

    rewrite /crud(.*) $1 break;
}

# crud.py

4. Eliminar

Agregamos una nueva entrada (ruta) a nuestra aplicación. En este caso para eliminar contactos de la base de datos. Esta acción se invoca desde el botón de borrar de la lista de contactos en la página web.

# branch CRUDc

# crud.py

Además de eliminar el registro en la base de datos informamos al usuario si la operación fue exitosa. Esto lo hacemos con el comando flash que envía un mensaje a la página a renderizar. En la plantilla destino debemos mostrar ese mensaje.

# docker/crud/templates/layout.html

5. Editar contacto

# Branch CRUDd

Para editar un contacto agregamos una función, en nuestra aplicación, que recibirá el ID del contacto a editar, busca la información del mismo en la base de datos y la envía a una nueva página web (plantilla).

esta página contiene un formulario para editar los datos. El formulario devuelve los datos editados a una función en el backend para que sean procesados

la función que recibe el request con los datos editados se encarga de insertar los mismos en la base de datos actualizando el registro con el ID correspondiente

6. Control de acceso

# Branch CRUDe

Para evitar que cualquiera pueda acceder a nuestros datos vamos a implementar un sistema que permita el uso solo a usuarios registrados.

Primero creamos un formulario para que los usuarios se registren.

El backend recibe los datos de registro y guarda en la base de datos el usuario y el hash de la contraseña.

Tambien debemos ofrecer una interfaz para iniciar sesión. Para ello existe una página de login que consiste en un formulario para ingresar usuario y contraseña

En el backend se procesa los datos del usuario que intenta iniciar sesión

Por último creanos una función para decorar todas las secciones restringidas a usuarios que iniciaron sesión

7. Bootstrap

1. en layout.html agregamos el link a css
2. body <div class="container pt-4">
3. en index.html 2 rows