El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

En aquest tema, aprendrem com Flask utilitza Jinja2 per renderitzar plantilles HTML. Jinja2 és un motor de plantilles per a Python que permet generar HTML dinàmic de manera senzilla i eficient. Amb Jinja2, podem inserir variables, aplicar lògica condicional, iterar sobre col·leccions i molt més dins dels nostres fitxers HTML.

Conceptes Clau

Plantilles HTML: Fitxers HTML que contenen marcadors de posició per a dades dinàmiques.
Jinja2: Motor de plantilles que Flask utilitza per renderitzar HTML.
Renderització: El procés de combinar una plantilla amb dades per generar HTML final.

Estructura Bàsica d'una Plantilla Jinja2

Una plantilla Jinja2 és un fitxer HTML amb marcadors de posició per a dades dinàmiques. Aquests marcadors de posició es defineixen amb doble claudàtor {{ }} per a variables i {% %} per a instruccions de control.

Exemple de Plantilla Bàsica

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Benvingut, {{ username }}!</h1>
    <p>Aquesta és una pàgina renderitzada amb Jinja2.</p>
</body>
</html>

Renderització de Plantilles amb Flask

Configuració del Directori de Plantilles

Per defecte, Flask busca les plantilles HTML en un directori anomenat templates dins del directori principal de l'aplicació. Assegura't de crear aquest directori i col·locar-hi les teves plantilles.

Exemple de Codi

A continuació, es mostra com renderitzar una plantilla des d'una ruta en Flask:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', title='Pàgina Principal', username='Joan')

if __name__ == '__main__':
    app.run(debug=True)

En aquest exemple, la funció render_template carrega la plantilla index.html i substitueix els marcadors de posició {{ title }} i {{ username }} amb les dades proporcionades.

Control de Flux amb Jinja2

Lògica Condicional

Jinja2 permet utilitzar instruccions condicionals dins de les plantilles.

Exemple

{% if user.is_authenticated %}
    <p>Benvingut, {{ user.username }}!</p>
{% else %}
    <p>Si us plau, inicia sessió.</p>
{% endif %}

Bucles

També podem iterar sobre col·leccions amb bucles for.

Exemple

<ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

Filtratge i Funcions

Jinja2 proporciona una sèrie de filtres i funcions per manipular dades dins de les plantilles.

Exemple de Filtres

<p>Data actual: {{ current_date | date('d/m/Y') }}</p>

Exemple de Funcions

<p>Longitud de la llista: {{ items | length }}</p>

Exercicis Pràctics

Exercici 1: Crear una Plantilla Bàsica

Crea un fitxer templates/welcome.html amb el següent contingut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Benvingut, {{ username }}!</h1>
    <p>Aquesta és una pàgina de benvinguda.</p>
</body>
</html>

Modifica la ruta principal de la teva aplicació Flask per utilitzar aquesta plantilla:

@app.route('/welcome')
def welcome():
    return render_template('welcome.html', title='Benvinguda', username='Maria')

Exercici 2: Utilitzar Lògica Condicional i Bucles

Crea un fitxer templates/dashboard.html amb el següent contingut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Tauler de Control</h1>
    {% if user.is_authenticated %}
        <p>Benvingut, {{ user.username }}!</p>
        <ul>
            {% for task in tasks %}
                <li>{{ task }}</li>
            {% endfor %}
        </ul>
    {% else %}
        <p>Si us plau, inicia sessió per veure les teves tasques.</p>
    {% endif %}
</body>
</html>

Modifica la ruta corresponent en la teva aplicació Flask:

@app.route('/dashboard')
def dashboard():
    user = {'is_authenticated': True, 'username': 'Joan'}
    tasks = ['Comprar llet', 'Enviar correu', 'Preparar reunió']
    return render_template('dashboard.html', title='Tauler de Control', user=user, tasks=tasks)

Conclusió

En aquest tema, hem après com utilitzar Jinja2 per renderitzar plantilles HTML amb Flask. Hem vist com inserir variables, aplicar lògica condicional i iterar sobre col·leccions dins de les plantilles. També hem practicat amb exercicis per reforçar aquests conceptes. En el proper tema, explorarem com treballar amb fitxers estàtics en Flask.

Renderització de Plantilles amb Jinja2

Introducció

Conceptes Clau

Estructura Bàsica d'una Plantilla Jinja2

Exemple de Plantilla Bàsica

Renderització de Plantilles amb Flask

Configuració del Directori de Plantilles

Exemple de Codi

Control de Flux amb Jinja2

Lògica Condicional

Exemple

Bucles

Exemple

Filtratge i Funcions

Exemple de Filtres

Exemple de Funcions

Exercicis Pràctics

Exercici 1: Crear una Plantilla Bàsica

Exercici 2: Utilitzar Lògica Condicional i Bucles

Conclusió

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask