Flask Exercice 1

Exercice de Base : Création d'une Application Flask sur le Thème des Jeux Vidéo

Objectif

Dans cet exercice, vous allez créer une application Flask de base avec trois pages distinctes sur le thème des jeux vidéo. Chaque page aura sa propre route et sera rendue à l'aide de templates Jinja2. L'objectif est de vous familiariser avec la création de routes, le rendu de templates et la transmission de données dynamiques aux templates, y compris l'affichage de listes à l'aide de la balise for.

Instructions

Configuration de l'Environnement de Travail
- Assurez-vous d'avoir Python et Flask installés sur votre machine.
- Créez un nouveau répertoire pour votre projet et naviguez-y depuis votre terminal.
Création du Projet Flask
- Créez un fichier nommé app.py dans le répertoire de votre projet.
- Dans ce fichier, initialisez une application Flask.
Définir les Routes
- Créez trois routes dans votre application Flask : /, /about, et /games.
- Chaque route doit rendre un template Jinja2 correspondant.
Création des Templates
- Créez un dossier nommé templates dans le répertoire de votre projet.
- Dans ce dossier, créez trois fichiers HTML : home.html, about.html, et games.html.
Passer des Données aux Templates
- Pour chaque route, définissez des variables dynamiques que vous passerez aux templates.
- Les pages doivent afficher ces données dynamiques, y compris une liste de jeux vidéo sur la page /games.

Détails de l'Implémentation

1. Fichier `app.py`

Voici un exemple de ce à quoi devrait ressembler votre fichier app.py :

from flask import #...#

app = Flask(__name__)

@app.route(#...#)
def home():
    pass #...#

@app.route(#...#)
def about():
    pass #...#

@app.route(#...#)
def games():
    pass #...#

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

Dans ce code :

Nous avons défini trois routes (/, /about, /games).
Nous avons passé des chaînes de caractères et une liste (games_list) aux templates.

2. Templates HTML

Créez les fichiers suivants dans le dossier templates :

`home.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TTIRE DE LA PAGE</title>
</head>
<body>
    <h1>TITRE DE LA PAGE</h1>
    <p>MESSAGE</p>
    <nav>
        <a href="/">Accueil</a>
        <a href="/about">À Propos</a>
        <a href="/games">Nos Jeux</a>
    </nav>
</body>
</html>

`about.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TTIRE DE LA PAGE</title>
</head>
<body>
    <h1>TITRE DE LA PAGE</h1>
    <p>MESSAGE</p>
    <nav>
        <a href="/">Accueil</a>
        <a href="/about">À Propos</a>
        <a href="/games">Nos Jeux</a>
    </nav>
</body>
</html>

`games.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TTIRE DE LA PAGE</title>
</head>
<body>
    <h1>TITRE DE LA PAGE</h1>
    <p>MESSAGE</p>
    <ul>
        <!-- LISTE DES JEUX -->
    </ul>
    <nav>
        <a href="/">Accueil</a>
        <a href="/about">À Propos</a>
        <a href="/games">Nos Jeux</a>
    </nav>
</body>
</html>

Dans ce template :

Nous utilisons une boucle for de Jinja2 pour itérer sur chaque élément de la liste games et l'afficher dans une balise <li> à l'intérieur d'une liste non ordonnée <ul>.

Validation

Lancement de l'Application
- Dans le terminal, exécutez python app.py pour lancer le serveur de développement Flask.
Test des Routes
- Accédez à http://127.0.0.1:5000/ pour voir la page d'accueil.
- Naviguez vers http://127.0.0.1:5000/about pour voir la page "À Propos".
- Accédez à http://127.0.0.1:5000/games pour voir la liste des jeux vidéo.
Envoyez vos fichiers sur fichiers.ttrinfo.be dans le dossier -- Flask/Projet 01

Conclusion

En complétant cet exercice, vous aurez créé une application Flask de base avec trois pages distinctes, chacune ayant sa propre route et son propre template. Vous aurez également appris à passer et afficher des chaînes de caractères ainsi que des listes en utilisant Jinja2, rendant vos applications web interactives et dynamiques.

Télécharger en PDF

Liens utiles

Documentation Flask