Trabajando con formularios en Flask.
Ejemplo de Formulario usando el método POST.
La manera habitual en la que enviaremos información a las páginas de nuestra aplicación web será usando los formularios definidos en Html5. Usaremos los métodos GET y POST de los que ya hablamos anteriormente en Flask 8. Peticiones Http y métodos GET y POST . Vamos a repasar estos conceptos.
En este ejemplo práctico construiremos una vista que funcione como calculadora. Usaremos una plantilla en la que pediremos dos números y un operador (suma, resta, multiplicación y división). Según el operador que se elija se mostrará el resultado correspondiente. Usaremos primero el método POST para enviar el formulario y posteriormente haremos lo mismo con el método GET.
El primer paso será construir el directorio de trabajo de la manera habitual:
Luego crearemos una plantilla base que llamaremos base.html que usaremos para definir nuestra plantilla, la cual contendrá el código de la calculadora. Estará situada en la carpeta "templates". En este ejemplo no habrá ningún archivo css con los que el directorio static estará vacío.
base.html
Creamos dentro del directorio "templates" un archivo llamado "formulario_post.html" que contendrá el código html del ejemplo. Voy a poner el código y luego comentamos el funcionamiento.
formulario_post.html
Línea 1: importamos el archivo base.html que es la plantilla padre la cual contiene la estructura básica html sobre la que trabajaremos. Es una especie de copia y pega del código de esta plantilla padre en la hija.
línea 3: usamos el bloque que definirá el titulo de la plantilla con la que estamos trabajando.
Línea 5-32: Aquí va la parte principal del programa. Como antes, utilizaremos un bloque de contenido que insertará todo el código dentro del contenido que hemos especificado en la plantilla base.html.
Lo primero definimos un formulario. Este se enviará con el método "POST" a la página principal de nuestro proyecto. (127.0.0.1:5000/). Esta URL se obtiene con el método url_for de la función "calculadora_post" que definiremos luego en el archivo "inicio.py".
En el formulario primeramente aparecen dos campos de texto donde se introducirán los números que participarán en la operación. Después va el código de una lista desplegable donde irá el tipo de operación que queremos realizar (suma, resta, multiplicación y división). Y para finalizar ponemos un botón que enviará nuestro formulario.
Pasamos a describir inicio.py:
Línea 1-2: Aquí comenzamos importando las diferentes bibliotecas de flask que necesitamos y construimos la aplicación.
Línea 4: Definimos con el decorador la ruta principal de nuestra aplicación. La que se llamará nada mas que ejecutes el programa. (localhost:5000/). También le decimos que a esta URL se le puede llamar tanto con el método "GET" como con el "POST". Cuando se aceda a esta vista por primera vez, nada más que ejecutes el programa se utilizará el método Get (el que llama a las páginas en Flask por defecto).
Construimos la Función calculadora_post y utilizamos el método request.method para saber con que método se está llamando a la vista.
Es este punto te ánimo a que ejecutes la aplicación y vamos viendo como funciona el programa.
(miEntornoVirtual) user@ubuntu:~/Escritorio/nFlask/11$ python inicio.py
* Serving Flask app "inicio" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 164-357-938
127.0.0.1 - - [31/Jul/2020 18:35:09] "GET / HTTP/1.1" 200 -
En el momento que la ejecutas, se intenta cargar la página de inicio y como Flask llama a las vistas con el método GET el condicional de la línea 6 se activa y en consecuencia se renderiza la plantilla "formulario_post.html". Deberías ver algo como esto:
Rellenamos el primer número con, por ejemplo, un 3 y el segundo número con, por ejemplo, un 2. Elegimos la operación a realizar, yo escogeré la suma y le damos al botón enviar. En el formulario hemos dicho que cuando se envíe, lo haga con el método "POST" y a la página principal. Esto hará que se ejecute el condicional de la línea 8.
Utilizamos el método request.form.get para obtener el primer y segundo número, así como el tipo de operación. Ten en cuenta que lo que retorna este método es un diccionario:
{"primer_numero": "3", "segundo_numero":"2", "operacion": "+"}
en el que tanto la clave como el valor asociado son de tipo string. Como luego vamos a realizar operaciones con los números necesitamos convertirlo en eso, en números con los que se pueda operar. Es por ello el uso de la instrucción int( ... ), para convertir los números texto en números para operar.
Ahora le decimos al programa que intente (try) ejecutar el siguiente código y si no lo consigue por que haya algún error (except) que muestre el mensaje "no se ha podido realizar la operación". Esto ocurrirá si por ejemplo intentas dividir algo por cero.
Lo que hay dentro de la instrucción Try sirve para decidir cual es la operación a realizar con los números en base al valor retornado por request.form.get("operación") que puede ser +,-,* o /. Finalmente si se ha podido realizar la operación se envía el resultado mediante una variable y se renderiza la página "formulario_post.html" de nuevo.
Ejemplo de Formulario usando el método GET
No es nada habitual pero vamos a ver el mismo programa, en este caso enviando la información del formulario usando el método GET. En este caso tenemos que modificar ligeramente tanto el archivo inicio.py como la plantilla "formulario_post.html".
En este último voy a cambiar el nombre para que no haya confusiones a "formulario_get.html", también le cambio el texto del bloque del título a "Calculadora método GET" y el formulario enviara la información a la dirección url de la función calculadora_get utilizando el método GET.
formulario_get.html
En el archivo inicio.py hay que cambiar alguna cosa más. Esto se debe a que ahora al acceder a la ruta de inicio localhost:5000/ siempre lo hacemos con el método GET por lo que no nos vale el condicional que utilizamos antes que diferenciaba cuando accediamos con GET y cuando con POST. En este caso debemos determinar cuando acedemos a la ruta directamente y cuando lo hacemos porque el formulario envía argumentos a esa dirección.
Al usar el método GET el formulario enviará argumentos a la página de inicio. Por lo tanto vamos a utilizar el condicional junto con el método request.args para saber cuando ocurre una cosa u otra.
Si es la primera vez que hemos accedido, es decir que no acedemos a través del formulario, la URL no tendrá ningún tipo de argumentos, por lo que si utilizamos:
len(request.args) este será igual a cero, no habrá argumentos. Nota: La instrucción len( .. ) nos da la longitud de la cadena que contiene.
Por tanto si accedemos con el método GET y la longitud de request.args es cero entonces mostramos una plantilla con el formulario.
Si por el contrario (... else) es el formulario el que envía los datos o argumentos a la URL esta instrucción nos devolverá una longitud igual a 3 ya que contiene un diccionario con los elementos enviados por el formulario (numero uno, dos y operación). Por tanto el programa realizará los cálculos con los número enviados, en base a la operación seleccionada y volverá a llamar a la plantilla "formulario_get.html" para mostrar el resultado. Para recuperar los elementos de ese diccionario que contiene los valores que hemos enviado usamos la instrucción:
request.args.get( "...elemento a recuperar del formulario (name)...")
inicio.py
Al ejecutar el programa fíjate como en la URL aparece ahora, junto con la dirección, los datos enviados lo que es propio del método GET.
No obstante cuando enviemos información con formularios debemos siempre usar el método POST. Si no es así, y optamos por el método GET y por tanto enviamos información en la URL, deberíamos usar al menos RUTAS DINAMICAS para enviar la información del formulario:
@app.route("/calculadora/<num1>/<num2>/<operacion>", methods=["get"])
def calculadora_var(operador,num1,num2):
y no de la forma que hemos visto en este ejemplo.
Puede obtener más información sobre como definir formularios en html5 en https://developer.mozilla.org/es/docs/Learn/HTML/Forms
No hay comentarios:
Publicar un comentario