En este tema, aprenderemos cómo renderizar plantillas HTML utilizando Jinja2, el motor de plantillas que viene integrado con Flask. Jinja2 nos permite crear plantillas dinámicas que pueden incluir variables, bucles y condicionales, lo que facilita la creación de contenido HTML dinámico.
¿Qué es Jinja2?
Jinja2 es un motor de plantillas para Python que permite a los desarrolladores separar la lógica de la aplicación del diseño de la interfaz de usuario. Con Jinja2, podemos insertar variables y lógica de control directamente en nuestros archivos HTML.
Características de Jinja2:
- Variables: Permite insertar variables en las plantillas.
- Filtros: Permite modificar el valor de las variables.
- Estructuras de Control: Soporta bucles y condicionales.
- Macros: Permite definir fragmentos reutilizables de plantillas.
Configuración Básica
Antes de comenzar a trabajar con plantillas, necesitamos asegurarnos de que Flask esté configurado para encontrarlas. Por defecto, Flask busca las plantillas en un directorio llamado templates en el directorio raíz de la aplicación.
Estructura de Directorios
my_flask_app/
│
├── app.py
├── templates/
│ ├── index.html
│ └── about.html
└── static/
├── css/
├── js/
└── images/Creando una Plantilla Básica
Vamos a crear una plantilla HTML básica llamada index.html en el directorio templates.
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>Bienvenido a {{ title }}</h1>
<p>{{ message }}</p>
</body>
</html>En esta plantilla, estamos utilizando dos variables: title y message. Estas variables serán proporcionadas por nuestra aplicación Flask.
Renderizando la Plantilla en Flask
Para renderizar una plantilla en Flask, utilizamos la función render_template proporcionada por Flask.
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html', title='Mi Aplicación Flask', message='¡Hola, Mundo!')
if __name__ == '__main__':
app.run(debug=True)En este ejemplo, la función home renderiza la plantilla index.html y pasa las variables title y message a la plantilla.
Uso de Variables en Plantillas
Las variables en Jinja2 se delimitan con {{ }}. Puedes pasar cualquier tipo de dato a las plantillas, incluyendo cadenas, números, listas y diccionarios.
Ejemplo con Listas y Diccionarios
Vamos a modificar nuestra plantilla y nuestra ruta para trabajar con listas y diccionarios.
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>Bienvenido a {{ title }}</h1>
<p>{{ message }}</p>
<h2>Usuarios:</h2>
<ul>
{% for user in users %}
<li>{{ user.name }} - {{ user.email }}</li>
{% endfor %}
</ul>
</body>
</html>app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
users = [
{'name': 'Alice', 'email': '[email protected]'},
{'name': 'Bob', 'email': '[email protected]'},
{'name': 'Charlie', 'email': '[email protected]'}
]
return render_template('index.html', title='Mi Aplicación Flask', message='¡Hola, Mundo!', users=users)
if __name__ == '__main__':
app.run(debug=True)En este ejemplo, estamos pasando una lista de diccionarios a la plantilla y utilizando un bucle for para iterar sobre los usuarios y mostrarlos en una lista HTML.
Estructuras de Control en Jinja2
Jinja2 soporta varias estructuras de control, como condicionales y bucles.
Condicionales
Podemos utilizar condicionales para mostrar contenido basado en ciertas condiciones.
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>Bienvenido a {{ title }}</h1>
<p>{{ message }}</p>
<h2>Usuarios:</h2>
<ul>
{% for user in users %}
<li>{{ user.name }} - {{ user.email }}</li>
{% else %}
<li>No hay usuarios disponibles.</li>
{% endfor %}
</ul>
</body>
</html>En este ejemplo, si la lista users está vacía, se mostrará el mensaje "No hay usuarios disponibles."
Ejercicio Práctico
Ejercicio 1: Crear una Página de Acerca de
- Crea una nueva plantilla llamada
about.htmlen el directoriotemplates. - La plantilla debe incluir un título y un párrafo con información sobre la aplicación.
- Crea una nueva ruta en
app.pypara renderizar la plantillaabout.html.
Solución
templates/about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Acerca de</title>
</head>
<body>
<h1>Acerca de</h1>
<p>Esta es una aplicación web creada con Flask.</p>
</body>
</html>app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
users = [
{'name': 'Alice', 'email': '[email protected]'},
{'name': 'Bob', 'email': '[email protected]'},
{'name': 'Charlie', 'email': '[email protected]'}
]
return render_template('index.html', title='Mi Aplicación Flask', message='¡Hola, Mundo!', users=users)
@app.route('/about')
def about():
return render_template('about.html')
if __name__ == '__main__':
app.run(debug=True)Conclusión
En esta sección, hemos aprendido cómo utilizar Jinja2 para renderizar plantillas en Flask. Hemos visto cómo pasar variables a las plantillas, utilizar estructuras de control y crear contenido dinámico. En el próximo módulo, exploraremos cómo trabajar con archivos estáticos en Flask.
¡Continúa practicando y experimentando con Jinja2 para dominar la creación de plantillas dinámicas en tus aplicaciones Flask!
Curso de Desarrollo Web con Flask
Módulo 1: Introducción a Flask
- ¿Qué es Flask?
- Configuración de tu Entorno de Desarrollo
- Creando tu Primera Aplicación Flask
- Entendiendo la Estructura de una Aplicación Flask
Módulo 2: Conceptos Básicos de Flask
- Enrutamiento y Mapeo de URLs
- Manejo de Métodos HTTP
- Renderizando Plantillas con Jinja2
- Trabajando con Archivos Estáticos
Módulo 3: Formularios y Entrada de Usuario
Módulo 4: Integración de Bases de Datos
- Introducción a Flask-SQLAlchemy
- Definiendo Modelos
- Realizando Operaciones CRUD
- Migraciones de Base de Datos con Flask-Migrate
Módulo 5: Autenticación de Usuarios
- Registro de Usuarios
- Inicio y Cierre de Sesión de Usuarios
- Hashing de Contraseñas
- Gestión de Sesiones de Usuario
Módulo 6: Conceptos Avanzados de Flask
- Blueprints para Aplicaciones Grandes
- Manejo de Errores
- Páginas de Error Personalizadas
- Registro y Depuración
Módulo 7: APIs RESTful con Flask
- Introducción a las APIs RESTful
- Creación de Endpoints RESTful
- Manejo de Datos JSON
- Autenticación para APIs
Módulo 8: Despliegue y Producción
- Configuración de Flask para Producción
- Despliegue en Heroku
- Despliegue en AWS
- Monitoreo y Optimización del Rendimiento
Módulo 9: Pruebas y Mejores Prácticas
- Pruebas Unitarias con Flask
- Pruebas de Integración
- Cobertura de Pruebas
- Mejores Prácticas para el Desarrollo con Flask