la programmation

Maîtriser les Templates Flask

Les templates, ou modèles en français, sont des éléments essentiels dans le développement d’applications web avec Flask. Ils permettent de séparer la logique métier de la présentation visuelle, ce qui favorise la maintenabilité et la lisibilité du code. Dans cet écosystème, Jinja2 est le moteur de templates par défaut utilisé avec Flask. Voici une explication approfondie sur la manière d’utiliser les templates dans les applications Flask.

Articles similaires

Structure de base d’un projet Flask

Avant d’aborder l’utilisation des templates, voyons rapidement la structure de base d’un projet Flask :

  1. Fichiers Principaux :

    • app.py : Le fichier principal où vous configurez et lancez votre application Flask.
    • requirements.txt : Pour lister toutes les dépendances du projet.

  2. Dossier des Templates :

    • templates/ : Ce dossier contient tous les fichiers HTML utilisés comme templates.

  3. Dossier des Statiques :

    • static/ : Contient les fichiers statiques tels que les feuilles de style CSS, les images et les scripts JavaScript.

Utilisation des Templates

  1. Création d’un Template :

    • Dans le dossier templates/, créez un fichier HTML pour votre template. Par exemple, accueil.html.
    • Vous pouvez y inclure du HTML valide ainsi que des balises Jinja2 pour dynamiser le contenu.

  2. Rendu d’un Template dans une Vue :

    • Dans votre application Flask, utilisez la fonction render_template pour rendre le contenu du template.
    • Par exemple : 
      python
      from flask import Flask, render_template

app = Flask(__name__)

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

  3. Passer des Données au Template :

    • Vous pouvez transmettre des données dynamiques au template en tant qu’arguments de la fonction render_template.
    • Par exemple : 
      python
      @app.route('/utilisateur/')
def profile_utilisateur(nom):
    return render_template('profile.html', nom=nom)

  4. Utilisation de Jinja2 dans les Templates :

    • Jinja2 offre des fonctionnalités puissantes pour dynamiser les templates. Voici quelques exemples :
      • Affichage de variables : {{ nom }}
      • Structures de contrôle : {% if condition %} ... {% endif %}
      • Boucles : {% for item in liste %} ... {% endfor %}
      • Filtres : {{ variable | filtre }}

  5. Inclure des Fichiers Partiels :

    • Vous pouvez inclure des morceaux de code réutilisables dans vos templates en utilisant l’extension {% include %} de Jinja2.
    • Par exemple, pour inclure un fichier de navigation : 
      html
      {% include 'navigation.html' %}

  6. Héritage de Templates :

    • Jinja2 prend en charge l’héritage de templates, ce qui permet de définir un template de base avec des blocs à remplir dans les templates enfants.
    • Par exemple, dans base.html : 
      html
      <html>
<head>
    <title>{% block title %}{% endblock %}title>
head>
<body>
    {% block content %}{% endblock %}
body>
html>
    • Puis, dans accueil.html : 
      html
      {% extends 'base.html' %}

{% block title %}Accueil{% endblock %}

{% block content %}
    <h1>Bienvenue sur notre site !h1>
{% endblock %}

En résumé, les templates dans Flask, grâce à Jinja2, offrent une manière efficace de créer des interfaces utilisateur dynamiques et réutilisables. En séparant la logique de présentation du reste de l’application, ils contribuent à rendre le code plus propre, maintenable et évolutif.

Plus de connaissances

Bien sûr, plongeons plus en profondeur dans l’utilisation des templates avec Flask :

1. Passage de Données au Template :

Dans les vues Flask, vous pouvez passer des données dynamiques aux templates en utilisant des arguments dans la fonction render_template. Ces données peuvent être sous forme de variables simples, de listes ou de dictionnaires. Par exemple :

python
@app.route('/utilisateur/')
def profile_utilisateur(nom):
    utilisateur = {'nom': nom, 'age': 30, 'ville': 'Paris'}
    return render_template('profile.html', utilisateur=utilisateur)

Dans le template profile.html, vous pouvez ensuite accéder à ces données comme ceci :

html
<h1>Profil de {{ utilisateur.nom }}h1>
<p>Âge : {{ utilisateur.age }}p>
<p>Ville : {{ utilisateur.ville }}p>

2. Utilisation de Structures de Contrôle :

Jinja2 permet l’utilisation de structures de contrôle telles que les déclarations if, for, etc. Cela vous permet de rendre vos templates dynamiques en fonction de la logique métier de votre application. Par exemple :

html
{% if utilisateur.age < 18 %}
    <p>Ce profil est pour un mineur.p>
{% else %}
    <p>Ce profil est pour un adulte.p>
{% endif %}

3. Boucles :

Les boucles sont également disponibles dans les templates Jinja2, ce qui vous permet de parcourir des listes ou des dictionnaires et de générer du contenu dynamique. Par exemple :

html
<ul>
{% for tache in liste_taches %}
    <li>{{ tache }}li>
{% endfor %}
ul>

4. Inclure des Fichiers Partiels :

Pour réutiliser du code HTML commun à plusieurs templates, vous pouvez inclure des fichiers partiels. Cela peut être utile pour des éléments tels que les en-têtes, les pieds de page, les barres de navigation, etc. Par exemple :

html
{% include 'header.html' %}

5. Héritage de Templates :

L’héritage de templates vous permet de créer une hiérarchie de templates, où un template principal définit la structure de base et les templates enfants étendent ce dernier en ajoutant ou en modifiant du contenu. Cela favorise la réutilisation du code et le maintien de la cohérence visuelle. Par exemple :

Template de base (base.html) :

html
html>
<html>
<head>
    <title>{% block title %}{% endblock %}title>
head>
<body>
    <header>
        {% block header %}
            <h1>Mon Site Webh1>
        {% endblock %}
    header>
    <main>
        {% block content %}{% endblock %}
    main>
    <footer>
        {% block footer %}
            <p>© 2024 Mon Site Webp>
        {% endblock %}
    footer>
body>
html>

Template enfant (accueil.html) :

html
{% extends 'base.html' %}

{% block title %}Accueil{% endblock %}

{% block content %}
    <h2>Bienvenue sur notre site !h2>
{% endblock %}

Conclusion :

Les templates avec Flask offrent une manière puissante et flexible de générer du contenu HTML dynamique. En utilisant les fonctionnalités de Jinja2 telles que le passage de données, les structures de contrôle, les boucles, l’inclusion de fichiers partiels et l’héritage de templates, vous pouvez créer des interfaces utilisateur riches et interactives tout en maintenant un code propre et organisé.

Bouton retour en haut de la page