Chapitre 6: Formulaire d'une page web

Création du formulaire avec la balise <form>

Les formulaires sont un moyen de récupérer des données à partir du client pour les passer à l'application serveur.

Dans le fichier html, on utilise la balise <form> en y ajoutant l'attribut method qui permet d'indiquer quel est le type de requête HTTP.

<form method="get">

    <label for="nom">Entrez votre nom: </label>
    <input type="text" name="nom" required>
  
    <label for="email">Entrez votre email: </label>
    <input type="email" name="email" required>
  
    <input type="submit" value="Enregistrer">
  
</form>

Méthode HTTP GET

Cette méthode permet de récupérer des données depuis le serveur. Elle place les paramètres du formulaire dans l'adresse url après validation.

http://chemin/fichier.html?nom=James&email=james%40cameron.com

Méthode HTTP POST

Cette méthode demande à ce que le serveur accepte les données qui lui sont transmises cette fois-ci dans le corps de la requête http, sans les encoder dans l'url cette fois-ci.

Une requête POST est habituellement envoyée via un formulaire HTML et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut enctype de l'élément <form>:

• application/x-www-form-urlencoded : les valeurs sont encodées sous forme de couples clé-valeur séparés par '&', avec un '=' entre la clé et la valeur. Les caractères non alphanumériques sont percent encoded.

article POST sur MDN

Traitement de la requête par le serveur

La plupart des sites utilisent php pour la programmation de l'application serveur, mais nous allons utiliser python car vous le connaissez et qu'il est installé sur vos ordinateurs.

Le dépôt du code est disponible à l'adresse suivante: https://github.com/heoinfo/flask-csv

Grâce au framework flask on lance un serveur qui affiche à sa racine une page web qui liste des utilisateurs lus à partir d'un fichier csv.

L'ajout d'un utilisateur se fait grâce à un formulaire situé dans la page pages/index.html.

<!-- Formulaire d'ajout d'élève -->
<form action="/" method="post">
<fieldset class="form-group">
    <legend>Ajouter un élève</legend>
    <!-- les attributs name sont récupérés par le serveur
    lors de la soumission du formulaire avec la méthode POST -->
    <input type="text" name="nom" placeholder="Nom" />
    <input type="text" name="prenom" placeholder="Prénom" />
    <input type="text" name="classe" placeholder="Classe" />
    <button type="submit" class="btn btn-info">Enregistrer</button>
</fieldset>
</form>

On utilise la méthode HTTP POST et on ajoute l'attribut action qui indique quel script côté serveur va récupérer les valeurs du formulaire, ici la racine du site: /.

Du côté serveur le fichier flask-csv.py s'occupe de servir les pages html en les générant grâce au framework flask.

Le serveur ne sert qu'une page, grâce à la fonction index_page qui est exécutée lorsque l'on navigue à la racine du site, on lui indique d'accepter les requêtes POST.

flask-csv.py
@app.route('/', methods=['POST'])
def index_page():
    ...

Si on détecte une soumission de formulaire par la méthode POST, on récupère les données du formulaire stockées dans la variable request.form puis on les ajoute à la variable globale data qui stocke toutes les données.

def index_page():
    # on utilise la variable global data
    global data
    if request.method == 'POST':
        # on récupère les données du formulaire
        post_data = request.form
        # on les ajoute à la variable global data
        data = data.append(post_data, ignore_index=True)
    

Enfin, on stocke les données dans le fichier csv puis on affiche la page index.html avec les nouvelles données.

@app.route('/', methods=['POST'])
def index_page():
    ...
    if request.method == 'POST':
        ...
        data.to_csv(CSV_FILE, index=False)
        return render_template("index.html", data=data)