APRENDE FLASK [Parte 2] – Templates, condicionantes y bucles

Consigue gratis tu cuenta

Curso de Python 3

En este curso de programación en Python 3 aprenderás lo fundamental para poder hacer tus propios proyectos. ¿Quieres saber cómo empezar a programar? ¡Apúntate a este curso!

Comenzar ahora
flask2

En este nuevo tutorial sobre la serie FLASK vamos a aprender a usar templates predefinidos que nos permitirán mostrar nuestros datos adecuadamente. Además aprenderemos a usar condicionantes y bucles que nos permitirán dinamizar nuestros prototipos de web.

Poniéndonos en contexto, hasta ahora hemos creado una pequeña aplicación que ejecuta un servidor web con el mensaje "Hola amigos de Geeky Theory!". El código que hemos usado para esto lo podemos encontrar en el primer tutorial de esta serie.

from flask import Flask
app = Flask(__name__)
 
@app.route('/')
def hello_world():
    return 'Hola amigos de Geeky Theory!'
 
if __name__ == '__main__':
    app.run(host='0.0.0.0')

 Templates

Los templates o plantillas en español, nos serán útiles a la hora de hacer un prototipado dinámico. Así pues, vamos a crear una carpeta llamada templates y vamos a almacenar en su interior un archivo llamado index.html con el siguiente contenido.

mkdir templates
cd templates/
nano index.html

index.html

<html>
  <head>
    <title>{{ titulo }} - Mi web de prototipado</title>
  </head>
  <body>
      <h1>Hola, {{ usuario.nombre }}!</h1>
  </body>
</html>

Podemos observar que el archivo index.html es un archivo html normal pero con la diferencia de que hemos marcado algunos bloques de caracteres especiales para sobre-escribirlos más tarde con los parámetros que queramos. Así pues, una vez que tengamos nuestro primer template escrito, vamos a ver como sustituir esos bloques de caracteres especiales por los datos que queramos mostrar.

Volviendo al archivo hello.py vamos a importar en primer lugar, la clase render_template del modulo flask.

from flask import render_template

Seguidamente, vamos a crear dentro de la función hello_world dos variables que contengan el nombre de la web y un diccionario con el nombre de usuario que queremos mostrar. Por último, renderizamos el template sobre-escribiendo los bloques especiales por las variables creadas. El resultado final es este:

from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    titulo = "GeekyFlask"
    usuario = {'nombre': 'Alejandro'}
    return render_template('index.html',
                           titulo=titulo,
                           usuario=usuario)

if __name__ == '__main__':
    app.run(host='0.0.0.0')

Si ejecutamos el script python y visitamos la web, nos aparecerá el mensaje "Hola, Alejandro".

Condicionantes y bucles en los templates

Flask nos permite dinamizar nuestra web con el uso de bloques especiales en nuestras plantillas, pudiendo usar condiciones como if-else o bucles como for:

if-else

<html>
  <head>
    {% if titulo %}
    <title>{{ titulo }} - Mi web de prototipado</title>
    {% else %}
    <title>Bienvenido a mi web de prototipado</title>
    {% endif %}
  </head>
  <body>
      <h1>Hola, {{ usuario.nombre }}!</h1>
  </body>
</html>

En este template se hace uso de un if-else para comprobar si la variable titulo está disponible para renderizarse, en caso de que lo este se sobre-escribirá en su bloque especifico.

for

Para hacer uso de bucles for en Flask, vamos a crear una lista de diccionarios donde almacenaremos diferentes usuarios. Así pues sustituiremos la variable usuario por la siguiente lista de diccionarios.

usuario = [
{'nombre': 'Alejandro'},
{'nombre': 'Miguel'},
{'nombre': 'Mario'},
{'nombre': 'Osmary'},
{'nombre': 'Dachi'},
{'nombre': 'Lúis'},
{'nombre': 'Aldo'}
]

Y cambiamos el archivo index.html por el siguiente:

<html>
  <head>
    {% if titulo %}
    <title>{{ titulo }} - Mi web de prototipado</title>
    {% else %}
    <title>Bienvenido a mi web de prototipado</title>
    {% endif %}
  </head>
  <body>
      {% for user in usuario %}
      <h1>Hola, {{ user.nombre }}!</h1>
      {% endfor %}
  </body>
</html>

El resultado si ejecutamos la aplicación web y navegamos hasta nuestra dirección será una lista de saludos a nuestros nombres.

Y esto es todo por hoy, en el siguiente tutorial, vamos a aprender a generar llamadas get post para hacer aún más interesante nuestro pequeño prototipado web.

Fuente


¿Quieres seguir aprendiendo?