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

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