FlaskApp

{{tag>dev python flask templates jinja2}} ====== Flask : Utilisation des templates ====== ===== Généralités ===== Grossièrement, le **template** est une page web à trous. Il contient des sections invariantes en HTML/javascript directement interprétables par le navigateur web et des sections dynamiques ou non remplies désignées **placeholders**. Le contenu des **placeholders** est généré par l'application à l'exécution pour obtenir un comportement dynamique. **Flask** s'appuie sur le moteur **Jinja2** pour la gestion des templates. Plusieurs éléments syntaxiques sont disponibles pour délimiter les sections à l'attention du moteur de templates : * ''%%{{ }}%%'' Affiche le résultat du code Python (balises HTML échappées) ; * ''%%{% %}%%'' Code Python à interpréter ; * ''%%{# #}%%'' Commentaires.





    
    FlaskApp


    {# Affiche le contenu de la variable msg comme titre #}
    {{ msg }}
    Welcome to FlaskApp!

===== Rendu du template ===== Pour pouvoir générer la partie dynamique du template via le framework Flask, on utilise la fonction helper ''render_template()''. Effectuer le rendu du template, c'est générer le contenu des placeholders pour produire une page web complète pouvant être retournée au client. Par défaut, le framework Flask est paramétré pour rechercher les templates dans le sous-dossier ''./templates'' de l'application.


from flask import Flask, render_template

# ... 

@app.route('/')
    def supply_index() -> str:
        msg = "Hello World !!!"
        return render_template('index.html', msg=msg)

Flash utilise la notion de routes pour associer une ou plusieurs URL à une fonction Python en charge de produire une vue, un résultat exploitable par le client (une page web). confère [[dev:python:flask:routage]] ===== Objets accessibles depuis le template ===== A l'intérieur des templates les objets suivants sont disponibles : * **config** ; * **request** ; * **session** ; * **g** (variables globales). Les fonctions **url_for()** et **get_flashed_messages()** sont également disponibles. ===== La fonction helper url_for() ===== Si les liens vers les autres pages sont définis en dur dans les templates, ils deviendront invalides lorsque les routes de l'application Flask seront modifiées. C'est pourquoi il est recommandé d'utiliser la fonction helper **''url_for()''** pour définir les liens vers les autres pages/actions. L'argument à fournir est un **nom fonction** associée à la vue ( associée à une route de l'application Flask). Dans notre projet Flask, on a une fonction nommée par exemple ''create_universe'' :


@app.route('/create/universe', methods=['GET', 'POST'])
def create_universe():
    if request.method == 'POST':
...

Cette fonction est associée à la route ''/create/universe''. Dans notre template si on souhaite créer le lien vers cette page on peut produire le code suivant :


...
 +
...

===== Héritage ===== La notion d'héritage appliquée au template va permettre de **factoriser** le code. La factorisation augmente la qualité du code et simplifie la maintenance. * On définit un template parent contenant des **placeholders** ; * Chaque enfant héritant du document parent devra définit le contenu des **placeholders** ; * En général on définit un document ''base.html'' contenant la structure générale du site/application web ; * Chaque enfant complète les placeholders pour produire la réponse (la page web complète à retourner au client). Un exemple de document parent avec en surbrillance la définition des placeholders :





  
  {% block title %}{% endblock %}
  
  
  
  
  


  
    
  
  
    
    Accueil
    Aide
    A propos
  
  
    {% block content %}{% endblock %}

Un exemple de document enfant :


{% extends 'base.html' %}
{#
  Hérite du template "base.html"
  doit redéfinir les placeholders : "title" et "content"
#}

{% block content %}
  
      
  
  
    {% block title %} Accueil {% endblock %}
    {{ msg }}
  
  
      
  
{% endblock %}

Dans le template enfant, le block "title" est défini à l'intérieur du block "content" : C'est parfaitement supporté par le moteur de template et cela permet de factoriser : le texte "Accueil" sera utilisé à la fois pour le titre de niveau 1 et pour le titre du document HTML dans le template parent. La [[#rendu_du_template|définition de la route dans l'application Flask]] reste inchangée. ===== Boucles et conditions ===== Le moteur de template supporte la boucle ''for'' avec la syntaxe suivante :


{% extends 'base.html' %}
{#
  Hérite du template "base.html"
  doit redéfinir les placeholders : title et content
#}

{% block content %}
  
      
  
  
    {% block title %} Accueil {% endblock %}
    {{ msg }}
    
    
      {% for comment in comments %}
        
            {{ comment }}
        
      {% endfor %}
  
  
      
  
{% endblock %}

La variable comments devra être fournie par la vue au template :


    @app.route('/')
    @app.route('/home')
    def supply_index() -> str:
        msg = "Hello World !!!"
        comments = [
            "commentaire 1",
            "commentaire 2",
            "commentaire 3",
            "commentaire 4",
        ]
        return render_template('index.html', msg=msg, comments=comments)

La structure conditionnelle ''if'' est supportée avec la syntaxe suivante :


{% extends 'base.html' %}
{#
  Hérite du template "base.html"
  doit redéfinir les placeholders : title et content
#}

{% block content %}
  
      
  
  
    {% block title %} Accueil {% endblock %}
    {{ msg }}
    
    
      {% for comment in comments %}
        {% if loop.index % 2 == 0 %}
          {% set bg_color = '#e6f9ff' %}
        {% else %}
          {% set bg_color = '#eee' %}
        {% endif %}
        
            {{ comment }}
        
      {% endfor %}
  
  
      
  
{% endblock %}

===== Filtres Jinja2 ===== Les filtres Jinja permettent d'appliquer des transformations/opérations sur les variables directement depuis les templates : on peut par exemple passer un texte en majuscules en appliquant le filtre ''upper''. La syntaxe à utiliser est ''%%{{ var | filtre }}%%''



  
  {{ comment | upper }}

Le filtre ''safe'' est important à connaître : il permet d'autoriser l'interprétation du code HTML provenant des variables. En effet, par défaut, le code contenu dans les variables est échappé par le moteur Jinja2 pour éviter les attaques de type **XSS**((Cross Site Scripting))


{# Ici les balises sont échappées par le moteur Jinja : elles seront affichées comme du texte #}
{{ "CECI NE PRODUIRA PAS UN SOUS-TITRE" }}

{# le filtre safe permet d'interpréter les balises et de produire un titre HTML #}
{{ "SOUS TITRE" | safe }}

Les valeurs saisies ou retournées par l'utilisateur devraient être systématiquement échappées pour limiter les risques d'injection XSS (confère [[https://flask.palletsprojects.com/en/stable/quickstart/#html-escaping|Échappement HTML]]). ===== Formater la date dans le template ===== Le plus simple est d'appeler la méthode **''strftime()''** sur l'objet de type datetime :



  {{ universe.created_on.strftime('%d-%m-%Y') }}

===== Références ===== * [[https://www.digitalocean.com/community/tutorials/how-to-use-templates-in-a-flask-application|Comment utiliser les templates dans une application Flask (digitalocean.com) (en)]] * [[https://stackoverflow.com/questions/4830535/how-do-i-format-a-date-in-jinja2|Formater une date dans un template Jinja2 (stackoverflow.com) (en)]]