Usando `render_template` en Flask: Cómo Renderizar Plantillas HTML
En Flask, una de las características más poderosas es su capacidad para generar y renderizar dinámicamente contenido HTML a través de la función `render_template()`. Esta función te permite separar la lógica de tu aplicación de la presentación visual, facilitando la creación de interfaces de usuario atractivas y dinámicas.
En este post, aprenderás qué es `render_template()`, cómo funciona y por qué es esencial en el desarrollo de aplicaciones web con Flask.
¿Qué es `render_template()`?
`render_template()` es una función proporcionada por Flask que te permite renderizar archivos de plantilla HTML utilizando un motor de plantillas llamado Jinja2. Con `render_template()`, puedes insertar dinámicamente datos en tus páginas web y reutilizar plantillas para evitar la duplicación de código.
Una plantilla en Flask no es solo HTML estático, sino que puede incluir código de Jinja2 que le permite hacer cosas como:
- Mostrar datos dinámicos (por ejemplo, nombres de usuarios, datos de bases de datos).
- Controlar la lógica de la interfaz (por ejemplo, bucles, condicionales).
- Heredar de otras plantillas para mantener consistencia entre las páginas.
¿Cómo funciona `render_template()`?
El flujo básico de trabajo con `render_template()` es simple:
1. Crear un archivo de plantilla HTML: Este archivo contiene el HTML y el código Jinja2 que se va a renderizar.
2. Llamar a `render_template()` desde tu función de vista: Aquí es donde pasas los datos a la plantilla que quieres renderizar.
Veamos un ejemplo básico:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
Explicación del código
- `@app.route('/')`: Define la ruta de la página de inicio.
- `render_template('index.html')`: Renderiza el archivo `index.html` que está almacenado en el directorio de plantillas. Flask buscará automáticamente los archivos HTML dentro de una carpeta llamada `templates`.
Configuración de la Carpeta de Plantillas
Por convención, Flask busca las plantillas HTML en una carpeta llamada `templates` que debe estar en el mismo nivel que tu archivo principal. Para el ejemplo anterior, debes tener una estructura de archivos similar a esta:
mi_app/
│
├── main.py
└── templates/
└── index.html
Dentro de `index.html` puedes escribir HTML puro, pero también puedes aprovechar el poder de Jinja2 para crear contenido dinámico. Aquí un ejemplo básico de un archivo `index.html`:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Flask</title>
</head>
<body>
<h1>¡Bienvenido a Flask!</h1>
<p>Este es un ejemplo básico de una plantilla.</p>
</body>
</html>
Pasando Datos a la Plantilla
Una de las principales ventajas de usar `render_template()` es que puedes pasar datos desde tu aplicación Python directamente a las plantillas. Esto te permite generar contenido dinámico según los datos disponibles en tu aplicación.
Aquí hay un ejemplo donde se pasa el nombre de un usuario a la plantilla:
@app.route('/usuario/<nombre>')
def usuario(nombre):
return render_template('usuario.html', nombre=nombre)
Y en el archivo `usuario.html`:
<!DOCTYPE html>
<html lang="es">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página del Usuario</title>
</head>
<body>
<h1>¡Hola, {{ nombre }}!</h1>
</body>
</html>
En este caso, cuando un usuario visita la URL `/usuario/Juan`, Flask pasará el valor `Juan` como parámetro a la plantilla `usuario.html`, y la página mostrará "¡Hola, Juan!".
Renderizando Datos Más Complejos
No estás limitado a pasar solo strings a `render_template()`. También puedes pasar listas, diccionarios, objetos y otros tipos de datos. Veamos un ejemplo donde pasamos una lista de usuarios:
@app.route('/usuarios')
def usuarios():
lista_usuarios = ['Ana', 'Carlos', 'Laura', 'Mario']
return render_template('usuarios.html', usuarios=lista_usuarios)
Y en la plantilla `usuarios.html`:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Usuarios</title>
</head>
<body>
<h1>Usuarios Registrados</h1>
<ul>
{% for usuario in usuarios %}
<li>{{ usuario }}</li>
{% endfor %}
</ul>
</body>
</html>
En este ejemplo, se está usando el control de flujo de Jinja2, como el bucle `for`, para iterar sobre la lista de usuarios y mostrarlos en una lista desordenada (`<ul>`).
Plantillas Heredadas y Extensión
Flask te permite extender plantillas, lo que es útil para evitar la repetición de código. Por ejemplo, puedes tener una plantilla base para el layout de tu sitio web, y luego otras plantillas específicas que hereden de esta base.
Ejemplo de una plantilla base `base.html`:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Mi Sitio Web{% endblock %}</title>
</head>
<body>
<header>
<h1>Cabecera del sitio</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>Pie de página</p>
</footer>
</body>
</html>
Luego, puedes crear una nueva plantilla `pagina.html` que extienda esta base:
{% extends "base.html" %}
{% block title %}Página Específica{% endblock %}
{% block content %}
<h2>Bienvenido a la Página Específica</h2>
<p>Este es un contenido especial para esta página.</p>
{% endblock %}
De esta manera, puedes reutilizar el mismo layout en diferentes partes de tu sitio web sin duplicar el código.
Renderizando con Condicionales
Además de los bucles, Jinja2 también permite condicionales en las plantillas. Aquí un ejemplo básico de cómo usar un `if` para mostrar contenido dependiendo de una variable:
@app.route('/perfil/<nombre>')
def perfil(nombre):
es_admin = nombre == 'admin'
return render_template('perfil.html', nombre=nombre, es_admin=es_admin)
Y en la plantilla `perfil.html`:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfil de Usuario</title>
</head>
<body>
<h1>Perfil de {{ nombre }}</h1>
{% if es_admin %}
<p>Tienes acceso de administrador.</p>
{% else %}
<p>Eres un usuario regular.</p>
{% endif %}
</body>
</html>
En este ejemplo, la página mostrará un mensaje diferente si el usuario es un administrador o no.
`render_template()` es una herramienta esencial en Flask que te permite crear aplicaciones web dinámicas y escalables. Al separar la lógica del servidor de la presentación visual, puedes mantener un código más limpio, reutilizable y fácil de mantener. Aprender a utilizar `render_template()` y Jinja2 te proporcionará un gran poder para crear interfaces web dinámicas y personalizadas.
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
