Come utilizzare modelli in un’applicazione Flask

Tutorial
Flask Python

L’autore ha selezionato il Fondo per il Software Libero e Open Source per ricevere una donazione nell’ambito del programma Write for DOnations.

Introduzione

Flask è un framework web leggero per Python che fornisce utili strumenti e funzionalità per la creazione di applicazioni web nel linguaggio Python.

Quando si sviluppa un’applicazione web, è fondamentale separare la logica di business dalla logica di presentazione. La logica di business gestisce le richieste degli utenti e comunica con il database per costruire una risposta appropriata. La logica di presentazione riguarda come i dati vengono presentati all’utente, tipicamente utilizzando file HTML per costruire la struttura di base della pagina di risposta e stili CSS per modellare i componenti HTML. Ad esempio, in un’applicazione di social media, potresti avere un campo nome utente e un campo password che vengono visualizzati solo quando l’utente non è loggato. Se l’utente è loggato, invece, visualizzi un pulsante di logout. Questa è la logica di presentazione. Se un utente inserisce il proprio nome utente e password, puoi utilizzare Flask per eseguire la logica di business: estrai i dati (nome utente e password) dalla richiesta, logga l’utente in caso di credenziali corrette o rispondi con un messaggio di errore. Come viene visualizzato il messaggio di errore sarà gestito dalla logica di presentazione.

In Flask, puoi utilizzare il linguaggio di templating Jinja per rendere i template HTML. Un template è un file che può contenere sia contenuto fisso che dinamico. Quando un utente richiede qualcosa dalla tua applicazione (come una pagina index o una pagina di login), Jinja ti permette di rispondere con un template HTML dove puoi utilizzare molte funzionalità che non sono disponibili nell’HTML standard, come variabili, istruzioni if, cicli for, filtri e ereditarietà dei template. Queste funzionalità ti permettono di scrivere pagine HTML facili da mantenere in modo efficiente. Jinja esclude automaticamente l’HTML per prevenire attacchi di Cross-Site Scripting (XSS).

In questo tutorial, costruirai una piccola applicazione web che renderizza diversi file HTML. Utilizzerai variabili per passare dati dal server ai template. L’ereditarietà dei template ti aiuterà a evitare la ripetizione. Utilizzerai la logica nei template come condizionali e cicli, userai filtri per modificare il testo e utilizzerai il toolkit Bootstrap per stilizzare la tua applicazione.

Prerequisiti

Passo 1 — Rendering di un Modello e Uso di Variabili

Assicurati di aver attivato il tuo ambiente e di avere Flask installato, poi puoi iniziare a costruire la tua applicazione. Il primo passo è mostrare un messaggio di benvenuto ai visitatori sulla pagina index. Utilizzerai la funzione helper render_template() di Flask per servire un modello HTML come risposta. Vedrai anche come passare variabili dal lato della tua applicazione ai tuoi template.

Prima, nella directory flask_app, apri un file chiamato app.py per la modifica. Usa nano o il tuo editor di testo preferito:

  1. nano app.py

Aggiungi il seguente codice all’interno del file app.py:

flask_app/app.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello():
    return render_template('index.html')

Salva e chiudi il file.

In questo blocco di codice, importi la classe Flask e la funzione render_template() dal pacchetto flask. Utilizzi la classe Flask per creare un’istanza dell’applicazione Flask chiamata app. Poi definisci una funzione vista (che è una funzione Python che restituisce una risposta HTTP) chiamata hello() utilizzando il decoratore app.route(), che converte una funzione regolare in una funzione vista. Questa funzione vista usa la funzione render_template() per rendere un file modello chiamato index.html.

Successivamente, dovrai creare il file modello index.html in una directory chiamata templates all’interno della tua directory flask_app. Flask cerca i modelli nella directory templates directory, che è chiamata templates, quindi il nome è importante. Assicurati di essere all’interno della directory flask_app ed esegui il seguente comando per creare la directory templates:

  1. mkdir templates

Successivamente, apri un file chiamato index.html all’interno della directory templates per la modifica. Il nome index.html qui non è un nome standard richiesto; puoi chiamarlo home.html o homepage.html o qualsiasi altro nome se lo desideri:

  1. nano templates/index.html

Aggiungi il seguente codice HTML all’interno del file index.html:

flask_app/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskApp</title>
</head>
<body>
    <h1>Hello World!</h1>
    <h2>Welcome to FlaskApp!</h2>
</body>
</html>

Qui, hai impostato un titolo, aggiunto un messaggio Hello World! come intestazione H1 e creato un messaggio Welcome to FlaskApp! come intestazione H2.

Salva e chiudi il file.

Mentre sei nella tua directory flask_app con l’ambiente virtuale attivato, informa Flask dell’applicazione (app.py nel tuo caso) utilizzando la variabile d’ambiente FLASK_APP e imposta la variabile d’ambiente FLASK_ENV su development per eseguire l’applicazione in modalità sviluppo e ottenere accesso al debugger. Usa i seguenti comandi per farlo (su Windows, usa set invece di export):

  1. export FLASK_APP=app

  2. export FLASK_ENV=development

Quindi, esegui l’applicazione utilizzando il comando flask run:

  1. flask run

Con il server di sviluppo in esecuzione, visita il seguente URL utilizzando il tuo browser:

http://127.0.0.1:5000/

Vedrai che il titolo della pagina è impostato su `FlaskApp`, e i due titoli sono HTML renderizzati.

Nelle applicazioni web, spesso è necessario passare dati dai file Python della tua applicazione ai template HTML. Per dimostrare come fare questo nell’applicazione, passerari una variabile contenente la data e l’ora UTC correnti al template index, e visualizzerai il valore della variabile nel template.

Lascia il server in esecuzione e apri il tuo file `app.py` per la modifica in un nuovo terminale:

  1. nano app.py

Importa il modulo datetime dalla libreria standard di Python e modifica la funzione `index()` in modo che il file appaia come segue:

flask_app/app.py
import datetime
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello():
    return render_template('index.html', utc_dt=datetime.datetime.utcnow())

Salva e chiudi il file.

Qui hai importato il modulo `datetime` e passato una variabile chiamata `utc_dt` al template `index.html` con il valore di `datetime.datetime.utcnow()`, che è la data e l’ora UTC correnti.

Successivamente, per visualizzare il valore della variabile nella pagina index, apri il file `index.html` per la modifica:

  1. nano templates/index.html

Modifica il file in modo che appaia come segue:

flask_app/templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskApp</title>
</head>
<body>
    <h1>Hello World!</h1>
    <h2>Welcome to FlaskApp!</h2>
    <h3>{{ utc_dt }}</h3>
</body>
</html>

Salva e chiudi il file.

Hai aggiunto un’intestazione H3 con il delimitatore speciale `{{ ... }}` per stampare il valore della variabile `utc_dt`.

Apri il tuo browser e visita la pagina index:

http://127.0.0.1:5000/

Vedrai una pagina simile all’immagine seguente:

Hai ora creato una pagina indice con un modello HTML nella tua applicazione Flask, renderizzato un modello e passato e visualizzato un valore variabile. Successivamente eviterai la ripetizione del codice utilizzando l’ereditarietà dei template.

Passo 2 — Utilizzo dell’Ereditarietà dei Template

In questo passo, creerai un template base con contenuti che possono essere condivisi con gli altri tuoi template. Modificherai il tuo template index per ereditare dal template base. Quindi, creerai una nuova pagina che servirà come pagina About della tua applicazione, dove gli utenti possono trovare ulteriori informazioni sulla tua applicazione.

Un template base contiene componenti HTML che sono tipicamente condivisi tra tutti gli altri template, come il titolo dell’applicazione, le barre di navigazione e i piè di pagina.

Per prima cosa, apri un nuovo file chiamato base.html per la modifica all’interno della directory dei template:

  1. nano templates/base.html

Scrivi il seguente codice all’interno del tuo file base.html:

flask_app/templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">FlaskApp</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

Salva e chiudi il file.

La maggior parte del codice in questo file è HTML standard, un titolo, alcuni stili per i link di navigazione, una barra di navigazione con due link, uno per la pagina index e uno per la pagina About non ancora creata, e un <div> per il contenuto della pagina. (I link non funzionano ancora; il prossimo passo dimostrerà come collegarsi tra le pagine).

Tuttavia, le seguenti parti evidenziate sono specifiche del motore di template Jinja:

  • {% block title %} {% endblock %}: Un blocco che funge da segnaposto per un titolo. Più tardi lo utilizzerai in altri template per fornire un titolo personalizzato per ogni pagina della tua applicazione senza riscrivere l’intera sezione <head> ogni volta.

  • {% block content %} {% endblock %}: Un altro blocco che verrà sostituito da contenuto a seconda del template figlio (un template che eredita da base.html) che lo sovrascriverà.

Ora che hai un template base, puoi approfittarne utilizzando l’ereditarietà. Apri il file index.html:

  1. nano templates/index.html

Quindi sostituisci il suo contenuto con il seguente:

flask_app/templates/index.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Index {% endblock %}</h1>
    <h1>Hello World!</h1>
    <h2>Welcome to FlaskApp!</h2>
    <h3>{{ utc_dt }}</h3>
{% endblock %}

Qui, utilizzi il tag `{% extends %}` per ereditare dal template `base.html`. Poi lo estendi sostituendo il blocco `content` nel template base con ciò che è contenuto nel blocco `content` nel blocco di codice precedente.

Questo blocco di contenuto contiene un tag `<h1>` con il testo `Index` all’interno di un blocco titolo, che a sua volta sostituisce il blocco `title` originale nel template `base.html` con il testo `Index` in modo che il titolo completo diventi `Index - FlaskApp`. In questo modo, puoi evitare di ripetere lo stesso testo due volte, poiché funziona sia come titolo della pagina che come intestazione che appare sotto la barra di navigazione ereditata dal template base.

Poi hai alcune altre intestazioni: un’intestazione `<h1>` con il testo `Hello World!`, un’intestazione `<h2>` e un’intestazione `<h3>` contenente il valore della variabile `utc_dt`.

L’ereditarietà dei template ti dà la possibilità di riutilizzare il codice HTML che hai in altri template (`base.html` in questo caso) senza doverlo ripetere ogni volta che è necessario.

Salva e chiudi il file e aggiorna la pagina index nel tuo browser. La pagina apparirà come segue:

Successivamente, creerai la pagina About. Apri il file `app.py` per aggiungere una nuova route:

  1. nano app.py

Aggiungi la seguente route alla fine del file:

flask_app/app.py

# ...
@app.route('/about/')
def about():
    return render_template('about.html')

Qui utilizzi il decoratore app.route() per creare una funzione vista chiamata about(). In essa, restituisci il risultato della chiamata alla funzione render_template() con il nome del file modello about.html come argomento.

Salva e chiudi il file.

Apri un file modello chiamato about.html per la modifica:

  1. nano templates/about.html

Aggiungi il seguente codice al file:

flask_app/templates/about.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} About {% endblock %}</h1>
    <h3>FlaskApp is a Flask web application written in Python.</h3>
{% endblock %}

Qui, erediti dal modello base utilizzando il tag extends, sostituisci il blocco content del modello base con un tag <h1> che funge anche da titolo della pagina, e aggiungi un tag <h3> con alcune informazioni sull’applicazione.

Salva e chiudi il file.

Con il server di sviluppo in esecuzione, visita la seguente URL utilizzando il tuo browser:

http://127.0.0.1:5000/about

Vedrai una pagina simile alla seguente:

Nota come la barra di navigazione e parte del titolo siano ereditate dal modello base.

Ora hai creato un modello base e l’hai utilizzato nella tua pagina index e nella pagina about per evitare la ripetizione del codice. I link nella barra di navigazione non fanno nulla a questo punto. Nel prossimo passaggio, imparerai come collegare tra le route nei tuoi modelli correggendo i link della barra di navigazione.

Passo 3 — Collegare tra le Pagine

In questo passaggio, imparerai come collegare tra le pagine nei tuoi template utilizzando la funzione helper url_for(). Aggiungerai due link alla barra di navigazione nel tuo template di base, uno per la pagina indice e uno per la pagina About.

Prima apri il tuo template di base per la modifica:

  1. nano templates/base.html

Modifica il file in modo che appaia come segue:

flask_app/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('hello') }}">FlaskApp</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

Qui, utilizzi la speciale funzione url_for() che restituirà l’URL per la funzione vista che gli fornisci. Il primo link si collega alla route della funzione vista hello() (che è la pagina indice). Il secondo link si collega alla route della funzione vista about(). Nota che passi il nome della funzione vista, non la route (/ o /about).

L’uso della funzione url_for() per costruire URL ti aiuta a gestire meglio gli URL. Se codifichi gli URL in modo rigido, i tuoi link si romperanno se modifichi le route. Con url_for() puoi modificare le route e garantire che i link continueranno a funzionare come previsto. La funzione url_for() si occupa anche di altre cose come l’escape dei caratteri speciali.

Salva e chiudi il file.

Ora vai alla pagina indice e prova i link nella barra di navigazione. Vedrai che funzionano come previsto.

Hai imparato a utilizzare la funzione url_for() per collegarti ad altre route nei tuoi template. Successivamente, aggiungerai alcune istruzioni condizionali per controllare cosa viene visualizzato nei tuoi template in base a condizioni che imposti, e utilizzerai i loop for nei tuoi template per visualizzare gli elementi delle liste.

Passo 4 — Uso di Condizionali e Loop

In questo passo, utilizzerai le istruzioni if nei tuoi template per controllare cosa visualizzare in base a determinate condizioni. Utilizzerai anche i loop for per attraversare liste Python e visualizzare ciascun elemento della lista. Aggiungerai una nuova pagina che mostra i commenti in una lista. I commenti con un numero di indice pari avranno uno sfondo blu, e i commenti con un numero di indice dispari saranno visualizzati con uno sfondo grigio.

Per prima cosa, creerai una route per la pagina dei commenti. Apri il tuo file app.py per la modifica:

  1. nano app.py

Aggiungi la seguente route alla fine del file:

flask_app/app.py

# ...

@app.route('/comments/')
def comments():
    comments = ['This is the first comment.',
                'This is the second comment.',
                'This is the third comment.',
                'This is the fourth comment.'
                ]

    return render_template('comments.html', comments=comments)

Nella route sopra, hai una lista Python chiamata comments che contiene quattro elementi. (Questi commenti di solito provengono da un database in uno scenario reale piuttosto che essere codificati come hai fatto qui.) Restituisci un file template chiamato comments.html nell’ultima riga, passando una variabile chiamata comments contenente la lista al file template.

Salva e chiudi il file.

Successivamente, apri un nuovo file comments.html all’interno della directory templates per la modifica:

  1. nano templates/comments.html

Aggiungi il seguente codice al file:

flask_app/templates/comments.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
        <div style="padding: 10px; background-color: #EEE; margin: 20px">
            <p style="font-size: 24px">{{ comment }}</p>
        </div>
        {% endfor %}
    </div>
{% endblock %}

Qui, estendi il template base.html e sostituisci il contenuto del blocco content. Innanzitutto, utilizzi un’intestazione <h1> che funge anche da titolo della pagina.

Utilizzi un ciclo for di Jinja nella riga {% for comment in comments %} per scorrere ogni commento nella lista comments (che viene memorizzata nella variabile comment). Visualizzi il commento nel tag <p style="font-size: 24px">{{ comment }}</p> allo stesso modo in cui visualizzeresti normalmente una variabile in Jinja. Indichi la fine del ciclo for utilizzando la parola chiave {% endfor %}. Questo è diverso dalla costruzione dei cicli for di Python perché non ci sono indentazioni speciali nei template di Jinja.

Salva e chiudi il file.

Con il server di sviluppo in esecuzione, apri il tuo browser e visita la pagina dei commenti:

http://127.0.0.1:5000/comments

Vedrai una pagina simile alla seguente:

Ora utilizzerai l’istruzione condizionale if nei tuoi template visualizzando i commenti con un indice numerico dispari con uno sfondo grigio e i commenti con un indice numerico pari con uno sfondo blu.

Apri il file template comments.html per la modifica:

  1. nano templates/comments.html

Modificalo in modo che appaia come segue:

flask_app/templates/comments.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index % 2 == 0 %}
                {% set bg_color = '#e6f9ff' %}
            {% else %}
                {% set bg_color = '#eee' %}
            {% endif %}

            <div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

Con questa nuova modifica, hai aggiunto un’istruzione if nella riga {% if loop.index % 2 == 0 %}. La variabile loop è una variabile speciale di Jinja che ti fornisce accesso a informazioni sul ciclo corrente. Qui utilizzi loop.index per ottenere l’indice dell’elemento corrente, che inizia da 1, non da 0 come nelle liste Python.

L’istruzione if verifica se l’indice è pari utilizzando l’operatore %. Controlla il resto della divisione dell’indice per 2; se il resto è 0 significa che l’indice è pari, altrimenti l’indice è dispari. Utilizzi il tag {% set %} per dichiarare una variabile chiamata bg_color. Se l’indice è pari, la imposti a un colore bluastro, altrimenti, se l’indice è dispari, imposti la variabile bg_color a grigio. Poi utilizzi la variabile bg_color per impostare un colore di sfondo per il tag <div> che contiene il commento. Sopra il testo del commento, utilizzi loop.index per visualizzare l’indice corrente in un tag <p>.

Salva e chiudi il file.

Apri il browser e visita la pagina dei commenti:

http://127.0.0.1:5000/comments

Vedrai la tua nuova pagina dei commenti:

Questa è stata una dimostrazione di come utilizzare l’istruzione if. Ma puoi ottenere lo stesso effetto utilizzando l’helper speciale loop.cycle() di Jinja. Per dimostrarlo, apri il file comments.html:

  1. nano templates/comments.html

Modificalo per apparire come segue:

flask_app/templates/comments.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            <div style="padding: 10px;
                        background-color: {{ loop.cycle('#EEE', '#e6f9ff') }};
                        margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

Qui, hai rimosso l’istruzione if/else e utilizzato l’helper loop.cycle('#EEE', '#e6f9ff') per alternare tra i due colori. Il valore di background-color sarà #EEE una volta e #e6f9ff un’altra.

Salva e chiudi il file.

Apri la pagina dei commenti nel tuo browser, aggiornala e vedrai che questo ha lo stesso effetto dell’istruzione if.

Puoi utilizzare le istruzioni if per vari scopi, inclusa la gestione di ciò che viene visualizzato sulla pagina. Ad esempio, per visualizzare tutti i commenti tranne il secondo, puoi utilizzare un’istruzione if con la condizione loop.index != 2 per filtrare il secondo commento.

Apri il template dei commenti:

  1. nano templates/comments.html

E modificalo per apparire come segue:

flask_app/templates/comments.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment }}</p>
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}

Qui, utilizzi {% if loop.index != 2 %} per mostrare solo i commenti che non hanno l’indice 2, il che significa tutti i commenti tranne il secondo. Utilizzi anche un valore hard-coded per il colore di sfondo invece dell’helper loop.cycle() per semplificare le cose, e il resto non è cambiato. Termini l’istruzione if utilizzando {% endif %}.

Salva e chiudi il file.

Aggiorna la pagina dei commenti e vedrai che il secondo commento non è visualizzato.

Ora devi aggiungere un link che porti gli utenti alla pagina dei Commenti nella barra di navigazione. Apri il template base per la modifica:

  1. nano templates/base.html

Modifica il contenuto del tag <nav> aggiungendo un nuovo collegamento <a>:

flask_app/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('hello') }}">FlaskApp</a>
        <a href="{{ url_for('comments') }}">Comments</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

Qui, utilizzi l’helper url_for() per collegarti alla funzione di visualizzazione comments().

Salva e chiudi il file.

La barra di navigazione avrà ora un nuovo collegamento che punta alla pagina dei commenti.

Hai utilizzato istruzioni if nei tuoi template per controllare cosa visualizzare in base a determinate condizioni. Hai utilizzato cicli for per scorrere liste Python e visualizzare ciascun elemento della lista, e hai imparato della variabile speciale loop in Jinja. Successivamente, utilizzerai i filtri Jinja per controllare come vengono visualizzati i dati delle variabili.

Passo 5 — Utilizzare i Filtri

In questo passo, imparerai come utilizzare i filtri Jinja nei tuoi template. Utilizzerai il filtro upper per convertire i commenti aggiunti nel passo precedente in maiuscolo, utilizzerai il filtro join per unire una sequenza di stringhe in una singola stringa, e imparerai come rendere il codice HTML affidabile senza eseguirne l’escape utilizzando il filtro safe.

Per prima cosa, convertirai i commenti nella pagina dei commenti in maiuscolo. Apri il template comments.html per la modifica: 

  1. nano templates/comments.html

Modificalo in modo che appaia come segue:

flask_app/templates/comments.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}

Qui, hai aggiunto il upper filtro utilizzando il simbolo pipe (|). Questo modificherà il valore della variabile comment per essere in maiuscolo.

Salva e chiudi il file.

Con il server di sviluppo in esecuzione, apri la pagina dei commenti con il tuo browser:

http://127.0.0.1:5000/comments

Puoi vedere che i commenti sono tutti in maiuscolo dopo aver applicato il filtro.

I filtri possono anche accettare argomenti tra parentesi. Per dimostrarlo, utilizzerai il filtro join per unire tutti i commenti nella lista comments.

Apri il template dei commenti:

  1. nano templates/comments.html

Modificalo in modo che appaia come segue:

flask_app/templates/comments.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
        <hr>
        <div>
            <p>{{ comments | join(" | ") }}</p>
        </div>
    </div>
{% endblock %}

Qui hai aggiunto un tag <hr> e un tag <div> dove unisci tutti i commenti nella lista comments utilizzando il filtro join().

Salva e chiudi il file.

Aggiorna la pagina dei commenti e vedrai una pagina simile alla seguente:

Come puoi vedere, la lista comments è visualizzata con i commenti separati da un simbolo pipe, che è ciò che hai passato al filtro join().

Un altro filtro importante è il filtro safe, che ti consente di visualizzare HTML affidabile nel browser. Per illustrare questo, aggiungerai del testo contenente un tag HTML al tuo modello di commenti utilizzando il delimitatore {{ }} di Jinja. In uno scenario reale, questo verrebbe fornito come variabile dal server. Quindi modificherai l’argomento join() per essere il tag <hr> invece del simbolo della barra verticale.

Apri il modello dei commenti:

  1. nano templates/comments.html

Modificalo in modo che appaia come segue:

flask_app/templates/comments.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
        <hr>
        <div>
            {{ "<h1>COMMENTS</h1>" }}
            <p>{{ comments | join(" <hr> ") }}</p>
        </div>
    </div>
{% endblock %}

Qui, hai aggiunto il valore "<h1>COMMENTS</h1>" e cambiato l’argomento di join al tag <hr>.

Salva e chiudi il file.

Aggiorna la pagina dei commenti e vedrai una pagina simile alla seguente:

Come puoi vedere, i tag HTML non sono stati renderizzati. Questa è una funzionalità di sicurezza in Jinja, perché alcuni tag HTML possono essere dannosi e potrebbero portare a un attacco di Cross Site Scripting (XSS). Dovresti consentire solo HTML affidabile da renderizzare nel browser.

Per renderizzare i tag HTML sopra, apri il file del modello dei commenti:

  1. nano templates/comments.html

Modificalo aggiungendo il filtro safe:

flask_app/templates/comments.html
{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index != 2 %}
                <div style="padding: 10px;
                            background-color: #EEE;
                            margin: 20px">
                    <p>#{{ loop.index }}</p>
                    <p style="font-size: 24px">{{ comment | upper }}</p>
                </div>
            {% endif %}
        {% endfor %}
        <hr>
        <div>
            {{ "<h1>COMMENTS</h1>" | safe }}
            <p>{{ comments | join(" <hr> ") | safe }}</p>
        </div>
    </div>
{% endblock %}

Puoi vedere che puoi anche concatenare filtri come nella riga <p>{{ comments | join(" <hr> ") | safe }}</p>. Ogni filtro viene applicato al risultato del filtraggio precedente.

Salva e chiudi il file.

Aggiorna la pagina dei commenti e vedrai che i tag HTML sono ora renderizzati come previsto:

Avviso: L’uso del filtro safe su HTML proveniente da fonti di dati sconosciute può esporre la tua applicazione a attacchi XSS. Non utilizzarlo a meno che il HTML che stai rendendo non provenga da una fonte affidabile.

Per ulteriori informazioni, consulta l’elenco dei filtri incorporati di Jinja.

Ora hai imparato a utilizzare i filtri nei tuoi modelli Jinja per modificare i valori delle variabili. Successivamente, integrerai il toolkit Bootstrap per stilizzare la tua applicazione.

Passo 6 — Integrazione di Bootstrap

In questo passaggio, imparerai come utilizzare il toolkit Bootstrap per stilizzare la tua applicazione. Aggiungerai una barra di navigazione Bootstrap nel modello di base che apparirà in tutte le pagine che ereditano dal modello di base.

Il toolkit Bootstrap ti aiuta a stilizzare la tua applicazione rendendola più attraente visivamente. Ti aiuterà anche a incorporare pagine web responsive nella tua applicazione web in modo che funzioni bene sui browser mobili senza dover scrivere il tuo codice HTML, CSS e JavaScript per raggiungere questi obiettivi.

Per utilizzare Bootstrap, dovrai aggiungerlo al modello di base in modo da poterlo utilizzare in tutti gli altri modelli.

Apri il tuo template base.html per la modifica:

  1. nano templates/base.html

Modificalo in modo che assomigli a questo:

flask_app/templates/base.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>{% block title %} {% endblock %} - FlaskApp</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('hello') }}">FlaskApp</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="{{ url_for('comments') }}">Comments</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url_for('about') }}">About</a>
            </li>
        </ul>
        </div>
    </div>
    </nav>
    <div class="container">
        {% block content %} {% endblock %}
    </div>

    <!-- Optional JavaScript -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

  </body>
</html>

La maggior parte del codice sopra è boilerplate Bootstrap necessario per utilizzarlo. Hai alcuni tag meta, un link al file CSS di Bootstrap nella sezione <head>, e in fondo hai un link a JavaScript opzionale. Le parti evidenziate del codice contengono codice Jinja spiegato nei passaggi precedenti. Nota come utilizzi specifici tag e classi CSS per dire a Bootstrap come visualizzare ogni elemento.

Nel tag <nav> sopra, hai un tag <a> con la classe navbar-brand, che determina il link del brand nella barra di navigazione. All’interno del tag <ul class="navbar-nav">, hai elementi regolari della barra di navigazione all’interno di un tag <a> in un tag <li>.

Per saperne di più su questi tag e classi CSS, vedi i componenti Bootstrap.

Salva e chiudi il file.

Con il server di sviluppo in esecuzione, apri la pagina index con il tuo browser:

http://127.0.0.1:5000/

Vedrai una pagina simile a questa:

Ora puoi utilizzare i componenti Bootstrap per stilizzare gli elementi nella tua applicazione Flask in tutti i tuoi template.

Conclusione

Ora sai come utilizzare i template HTML nella tua applicazione web Flask. Hai utilizzato variabili per passare dati dal server ai template, adottato l’ereditarietà dei template per evitare ripetizioni, incorporato elementi come le condizioni if e i cicli for, e collegato tra diverse pagine. Hai imparato a utilizzare i filtri per modificare il testo e visualizzare HTML affidabile, e hai integrato Bootstrap nella tua applicazione.

Se desideri leggere ulteriori informazioni su Flask, dai un’occhiata alla pagina del tema Flask.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-templates-in-a-flask-application