Activité : afficher une liste de Todo

L'affichage d'une liste de tâches consiste :

au serveur de fournir la liste des tâches avec la page index.html ;

à la page index.html d'afficher autant de tâches qu'il y en a dans la liste.

Modification de la vue /

#! /usr/bin/python # -*- coding:utf-8 -*- from flask import Flask, render_template, request, redirect, url_for app = Flask(__name__) #taches : dictionnaire (tableau associatif) de tâches taches=[] #id : identifiant de la tache id = 1 @app.route('/') def index(): return render_template('index.html', taches=taches) @app.route('/ajout', methods=['POST']) def ajout(): # utiliser les variables globales taches et id global taches, id vartache = request.form['tache'] taches.append({"id":id, "libelle":vartache}) #incrémenter id pour la prochaine tâche id = id + 1 return redirect(url_for('index')) if __name__ == '__main__': app.run(debug=True, port=5005)

Explications

la vue /ajout redirige maintenant vers la vue /. Pour cela, il faut importer deux autres modules redirect et url_for ;

Le dictionnaire taches contient une liste de trois taches qui est passée au template index.html.

Il existe déjà une route pour afficher la page index.html : Cette route est '/' : je peux alors utiliser la fonction redirect() pour faire une redirection vers cette page ; comme il est déconseillé d'écrire plusieurs fois la même route dans une application, je vais faire une redirection en indiquant le nom de la vue 'index' plutôt que la route ; J'utilise le nom de la vue 'index' avec la la fonction url_for()* pour transformer cette vue en une adresse exploitable (une route) par redirect().

* le code à ajouter avec les fonctions **redirect()** et **url_for** :

return redirect(url_for('index'))

à la place de

return render_template('index.html')

Utilisation de la liste de tâches dans la page index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Application Todo</title> </head> <body> <h1>Todo liste</h1> <div>Ajouter une nouvelle tâche : <form action="/ajout" method="POST"> <input type="text" name="tache"> <input type="submit"></div> </form> </div> <div> <ul> {% for tache in taches %} <li><input type="checkbox">{{tache.libelle}}</li> {% endfor %} </ul> </div> </body> </html>

Explications

L'affichage de toutes les tâches de la liste se fait en utilisant %%{%%% et %%%}%% :

une seul ligne avec la balise <li> suffit,

l'information de la liste est affichée en utilisant %%tache.libelle%%

Retour à l'activité : Utiliser le framework Flask pour créer un site Web dynamique

Activité : Utiliser le framework Flask pour créer un site Web dynamique