- ¿Por qué no deberías construir HTML como cadenas?
- ¿Qué es un motor de plantillas?
- ¿Cómo usar Jinja2 en Flask?
- Sintaxis básica de Jinja2
- Caso práctico: Mostrar una lista de cursos
En esta lección, veremos cómo generar HTML desde el backend de manera eficiente y segura en Flask. En lugar de devolver HTML como una simple cadena, aprenderemos a usar templates para organizar mejor nuestras vistas y facilitar el mantenimiento del código.
¿Por qué no deberías construir HTML como cadenas?
Mira este ejemplo. Supongamos que estamos creando una página web para mostrar un curso en Flask. Una forma directa y tentadora sería hacer algo así:
@app.route('/courses/<name>/')
def courses_show(name):
course = get_course(name)
return '''
<html>
<head>
<title>''' + course.name + '''</title>
</head>
<body>
<h1>''' + course.name + '''</h1>
<div>''' + course.body + '''</div>
</body>
</html>
'''
❌ Aquí van algunos problemas:
- Es inseguro: puede exponer tu sitio a ataques como XSS si no haces una limpieza adecuada.
- Es difícil de mantener: cuando la página tiene cientos de líneas de HTML, encontrar errores o hacer cambios se vuelve una pesadilla.
- Se vuelve propenso a errores de sintaxis, especialmente con comillas.
- No tienes separación entre la lógica de Python y el diseño de la página.
- Es casi imposible reutilizar partes comunes de HTML (como el encabezado o el pie de página).
Por eso existen los sistemas de plantillas (templating engines).
¿Qué es un motor de plantillas?
En Flask usamos uno que ya viene integrado: Jinja2.
.html organizados en carpetas y usar Python solo para enviar los datos que se deben mostrar.
¿Cómo usar Jinja2 en Flask?
Primero debes importar la función render_template:
from flask import render_template
Esta función se encarga de buscar y cargar un archivo HTML desde la carpeta templates, y reemplazar dentro de él los datos que le pases.
⏬ Veamos un ejemplo:
@app.route('/users/<id>')
def users_show(id):
return render_template(
'index.html', # archivo dentro de la carpeta templates
name=id # estás pasando la variable name al template
)
En este caso, necesitamos tener un archivo templates/index.html que podría verse así:
<!-- templates/index.html -->
<h1>Hello, {{ name }}</h1>
Al visitar http://localhost:8000/users/nick, Flask reemplazará {{ name }} por nick, y mostrarás:
<h1>Hello, nick</h1>
Eso es lo básico de cómo funciona un template: envías variables desde Flask y las usas con {{ nombre_variable }} en HTML.
Sintaxis básica de Jinja2
Jinja2 tiene elementos especiales para que puedas controlar la lógica dentro del HTML sin escribir puro Python.
| Símbolo | Descripción |
|---|---|
{{ ... }} |
Muestra el valor de una variable |
{% ... %} |
Controla la lógica: bucles, condiciones |
{# ... #} |
Comentarios que no se muestran |
Por ejemplo, si tienes una lista de cursos y quieres mostrarlos, puedes hacer un bucle así:
<!-- templates/courses.html -->
<table>
{% for course in courses %}
<tr>
<td>{{ course.id }}</td>
<td>{{ course.name }}</td>
</tr>
{% endfor %}
</table>
El bloque {% for %} se comporta como un for en Python: recorre cada elemento de la lista courses y lo saca como course en cada vuelta.
Caso práctico: Mostrar una lista de cursos
Vamos a ver un ejemplo de la vida real implementando un handler (vista) en Flask y un template que muestra una lista de cursos.
Código del handler en Flask:
@app.route('/courses/')
def courses_index():
courses = get_courses() # Supongamos que esto devuelve una lista de diccionarios con los cursos
return render_template(
'courses/view.html',
courses=courses # Pasamos la lista al template
)
Archivo del template (templates/courses/view.html):
<!-- templates/courses/view.html -->
<table>
{% for course in courses %}
<tr>
<td>{{ course.id }}</td>
<td>{{ course.name }}</td>
</tr>
{% endfor %}
</table>
Y esto nos da algo así en el navegador:
Aquí Jinja2 recorre todos los cursos y genera automáticamente las filas de la tabla. Mucho más limpio, modular y mantenible que concatenar strings.
Resumen
- Construir HTML directamente en Python usando strings es inseguro, difícil de mantener y genera errores fácilmente.
- Para manejar HTML de forma más ordenada, Flask usa Jinja2 como su motor de plantillas.
- Con
render_template(), puedes cargar un archivo HTML y pasarle las variables que serán reemplazadas. - En los templates se usa
{{ variable }}para mostrar datos, y{% %}para lógica como bucles o condiciones. - Separar el diseño del código hace tu proyecto más organizado, fácil de mantener, y mucho más escalable.
Trabajo independiente
- Agrega un manejador para ver la página del usuario
- Crea una plantilla para esto en templates/users/show.html. Muestra en ella el identificador del usuario y su apodo
- Haz una solicitud a la página /users/5
- Intenta cambiar el número
Aplicación de referencia
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
