Guía práctica para utilizar loops en plantillas HTML con Jinja y Flask
Cuando trabajamos en aplicaciones web que requieren la presentación dinámica de datos, la capacidad de generar contenido HTML de forma repetitiva es fundamental. Los frameworks como Flask permiten utilizar Jinja, un potente motor de plantillas que facilita la creación de páginas dinámicas en HTML, gracias a sus bloques de control de flujo, como los bucles (`for` loops).
En esta guía, te enseñaré cómo utilizar loops en plantillas HTML con Jinja y Flask para iterar sobre datos y mostrarlos en una tabla de manera eficiente.
¿Qué es Jinja?
Jinja es un motor de plantillas para Python que se utiliza principalmente con Flask (aunque también puede usarse en otros contextos). Jinja te permite integrar código Python en tus plantillas HTML y facilita la creación de páginas dinámicas al permitir la inclusión de variables, bloques condicionales y bucles.
Algunos conceptos clave de Jinja son:
- Variables: Jinja permite insertar datos dinámicos en el HTML usando sintaxis como `{{ variable }}`.
- Estructuras de control: Puedes usar condicionales (`if`, `else`, etc.) y bucles (`for`, `while`, etc.) dentro de tus plantillas para controlar la lógica de la página.
¿Qué es Flask?
Flask es un micro-framework en Python que permite crear aplicaciones web rápidamente. Una de las características más importantes de Flask es su integración con Jinja, que nos permite generar contenido dinámico para nuestras páginas web.
Creación de un loop con Jinja en una plantilla HTML
Uno de los casos más comunes donde utilizamos bucles en nuestras plantillas es al renderizar datos tabulares, como un listado de movimientos financieros, productos de una tienda, o cualquier otra colección de datos que necesitamos mostrar en filas y columnas.
Ejemplo práctico: Renderizar una tabla de movimientos financieros
Vamos a crear un ejemplo en el que iteramos sobre una lista de movimientos financieros (descripción, monto, tipo y fecha) y mostramos esos datos en una tabla HTML utilizando un bucle `for` de Jinja.
Paso 1: Estructura de proyecto
Vamos a suponer que tenemos la siguiente estructura de proyecto en Flask:
/my_app
/templates
movimientos.html
app.py
Paso 2: Configuración básica de Flask en `app.py`
Primero, creamos un archivo `app.py` que servirá nuestra aplicación Flask y los datos de ejemplo para renderizar en la plantilla.
from flask import Flask, render_template
app = Flask(__name__)
# Datos de ejemplo: una lista de movimientos (descripción, monto, tipo, fecha)
movimientos = [
("Compra de insumos", 200.50, "Egreso", "2024-09-29"),
("Venta de producto", 150.75, "Ingreso", "2024-09-30"),
("Pago de servicios", 100.00, "Egreso", "2024-10-01"),
("Intereses ganados", 50.00, "Ingreso", "2024-10-02")
]
@app.route('/')
def mostrar_movimientos():
# Renderiza la plantilla movimientos.html y pasa los datos de movimientos
return render_template('movimientos.html', movimientos=movimientos)
if __name__ == "__main__":
app.run(debug=True)
Explicación del código:
- Flask: Creamos una instancia de la aplicación con `Flask(__name__)`.
- movimientos: Esta lista contiene datos de movimientos financieros. Cada elemento de la lista es una tupla con cuatro campos: descripción, monto, tipo y fecha.
- mostrar_movimientos(): Esta función maneja la ruta `'/'`, renderiza la plantilla HTML (`movimientos.html`), y pasa la lista `movimientos` a la plantilla.
Paso 3: Crear la plantilla HTML `movimientos.html`
Dentro de la carpeta `/templates`, creamos un archivo llamado `movimientos.html`, donde utilizaremos el bucle `for` de Jinja para iterar sobre los movimientos y mostrarlos en una tabla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movimientos Financieros</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>Listado de Movimientos Financieros</h1>
<table>
<thead>
<tr>
<th>#</th>
<th>Descripción</th>
<th>Monto</th>
<th>Tipo</th>
<th>Fecha</th>
</tr>
</thead>
<tbody>
{% for movimiento in movimientos %}
<tr>
<th scope="row">{{ loop.index }}</th> <!-- Índice del movimiento -->
<td>{{ movimiento[0] }}</td> <!-- Descripción -->
<td>{{ movimiento[1] }}</td> <!-- Monto -->
<td>{{ movimiento[2] }}</td> <!-- Tipo (Ingreso/Egreso) -->
<td>{{ movimiento[3] }}</td> <!-- Fecha -->
</tr>
{% else %}
<tr>
<td colspan="5">No hay movimientos para mostrar</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
Explicación del código:
- `{% for movimiento in movimientos %}`: Aquí estamos usando el bucle `for` de Jinja para iterar sobre la lista `movimientos` que pasamos desde Flask. Por cada elemento en `movimientos`, se genera una fila `<tr>` en la tabla.
- `{{ loop.index }}`: Jinja proporciona la variable especial `loop.index` que representa el índice del elemento actual dentro del bucle. Esto es útil para enumerar los elementos de manera secuencial.
- `{{ movimiento[0] }}`, `{{ movimiento[1] }}`, etc.: Estas variables acceden a los distintos elementos de cada tupla en la lista `movimientos`. Por ejemplo, `movimiento[0]` es la descripción, `movimiento[1]` es el monto, y así sucesivamente.
- `{% else %}`: Este bloque se ejecuta si el bucle `for` no encuentra ningún elemento en la lista `movimientos`. En este caso, muestra una fila con el mensaje "No hay movimientos para mostrar".
Paso 4: Ejecutar la aplicación
Ahora puedes ejecutar tu aplicación Flask con el siguiente comando:
python app.py
Luego, accede a la aplicación en tu navegador mediante `http://127.0.0.1:5000/`, y verás la tabla con los movimientos financieros renderizados dinámicamente.
¿Qué puedes hacer con los bucles en Jinja?
Los bucles en Jinja no solo son útiles para generar tablas, también puedes utilizarlos para generar listas, galerías de imágenes, menús de navegación, y cualquier otro tipo de contenido dinámico. Aquí hay algunas cosas que puedes hacer con los bucles:
1. Bucles anidados: Puedes anidar bucles dentro de otros bucles para crear tablas más complejas o estructuras jerárquicas.
{% for grupo in grupos %}
<ul>
{% for elemento in grupo %}
<li>{{ elemento }}</li>
{% endfor %}
</ul>
{% endfor %}
2. Uso de `loop.index` y `loop.length`: Puedes usar las variables especiales `loop.index` (índice del loop comenzando en 1) y `loop.length` (número total de elementos) para crear elementos numerados o hacer verificaciones dentro del bucle.
3. Condicionales dentro de bucles: Puedes agregar condicionales dentro de los bucles para controlar el contenido dinámico.
{% for movimiento in movimientos %}
<tr>
<td>{{ movimiento.descripcion }}</td>
<td>{{ movimiento.monto }}</td>
<td>
{% if movimiento.monto > 0 %}
Ingreso
{% else %}
Egreso
{% endif %}
</td>
</tr>
{% endfor %}
Los bucles en Jinja son una herramienta poderosa que permite crear contenido dinámico en tus plantillas HTML. Al combinarlos con Flask, puedes construir aplicaciones web que muestran datos de forma eficiente y organizada. Hemos visto cómo crear una tabla que lista movimientos financieros, pero esta técnica se puede aplicar a una gran variedad de escenarios. Con un buen entendimiento de Jinja y Flask, podrás hacer que tus aplicaciones sean más dinámicas, interactivas y funcionales.
Hay mucho más contenido sobre Python para ti
Puedes conocer todo el contenido que comparto en mi perfil de LinkedIn
Puedes descargar GRATIS mi manual completo en pdf de Python Rápido
