Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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 / =====

<file python app.py>
#! /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)
</file>
==== 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**.

<WRAP center round info>
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()**.
</WRAP>

    * le code à ajouter avec les fonctions **redirect()** et **url_for** :
<code python>
  return redirect(url_for('index'))
</code>
    * à la place de 
<code python>
  return render_template('index.html')
</code>
====== Utilisation de la liste de tâches dans la page index.html ======
<file python 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>
</file>
===== 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 ====

<WRAP center round info>
  * [[.:flask_01|Activité : Utiliser le framework Flask pour créer un site Web dynamique]]
</WRAP>
Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Outils de la page
