Comment Utiliser les Formulaires Web dans une Application Flask

Tutoriels

Flask Python

L’auteur a sélectionné le Fonds libre et open source pour recevoir une donation dans le cadre du programme Write for DOnations.

Introduction

Les formulaires web, tels que les champs de texte et les zones de texte, permettent aux utilisateurs d’envoyer des données à votre application pour les utiliser afin d’effectuer une action ou d’envoyer des zones de texte plus importantes à l’application. Par exemple, dans une application de médias sociaux, vous pourriez offrir aux utilisateurs une boîte où ils peuvent ajouter du nouveau contenu à leurs pages. Un autre exemple est une page de connexion, où vous donneriez à l’utilisateur un champ de texte pour entrer son nom d’utilisateur et un champ de mot de passe pour entrer son mot de passe. Le serveur (votre application Flask dans ce cas) utilise les données soumises par l’utilisateur et les accepte s’il s’agit de données valides, ou répond avec un message comme Identifiants invalides! pour informer l’utilisateur que les données qu’il a soumises ne sont pas correctes.

Flask est un framework web Python léger qui fournit des outils et des fonctionnalités utiles pour créer des applications web en langage Python. Dans ce tutoriel, vous allez construire une petite application web qui montre comment utiliser des formulaires web. L’application aura une page pour afficher les messages stockés dans une liste Python, et une page pour ajouter de nouveaux messages. Vous utiliserez également message flashing pour informer les utilisateurs d’une erreur lorsqu’ils soumettent des données invalides.

Prérequis

Un environnement de programmation Python 3 local, suivez le tutoriel pour votre distribution dans Comment installer et configurer un environnement de programmation local pour Python 3 série. Dans ce tutoriel, nous appellerons le répertoire du projet flask_app.
Une compréhension des concepts de base de Flask, tels que les routes, les fonctions de vue et les templates. Si vous n’êtes pas familier avec Flask, consultez Comment créer votre première application web avec Flask et Python et Comment utiliser les templates dans une application Flask.
Une compréhension des concepts de base de HTML. Vous pouvez consulter notre série de tutoriels Comment créer un site web avec HTML pour des connaissances de base.

Étape 1 — Affichage des Messages

Dans cette étape, vous allez créer une application Flask avec une page d’index pour afficher des messages stockés dans une liste de dictionnaires Python.

Ouvrez d’abord un nouveau fichier appelé app.py pour édition :

nano app.py

Ajoutez le code suivant à l’intérieur du fichier app.py pour créer un serveur Flask avec une seule route :

flask_app/app.py

from flask import Flask, render_template

app = Flask(__name__)

messages = [{'title': 'Message One',
             'content': 'Message One Content'},
            {'title': 'Message Two',
             'content': 'Message Two Content'}
            ]

@app.route('/')
def index():
    return render_template('index.html', messages=messages)

Enregistrez et fermez le fichier.

Dans ce fichier, vous importez d’abord la classe Flask et la fonction render_template() depuis le package flask. Ensuite, vous utilisez la classe Flask pour créer une nouvelle instance d’application appelée app, en passant la variable spéciale __name__, nécessaire pour que Flask configure certains chemins en arrière-plan. Le rendu des templates est abordé dans le tutoriel Comment Utiliser des Templates dans une Application Flask.

Vous créez ensuite une liste Python globale appelée messages, qui contient des dictionnaires Python. Chaque dictionnaire a deux clés : title pour le titre du message, et content pour le contenu du message. Il s’agit d’un exemple simplifié d’une méthode de stockage de données ; dans un scénario réel, vous utiliseriez une base de données qui sauvegarde définitivement les données et vous permet de les manipuler plus efficacement.

Après avoir créé la liste Python, vous utilisez le décorateur @app.route() pour créer une fonction de vue appelée index(). Dans celle-ci, vous retournez un appel à la fonction render_template(), qui indique à Flask que la route doit afficher un modèle HTML. Vous nommez ce modèle index.html (vous le créerez plus tard) et vous passez une variable appelée messages à celui-ci. Cette variable contient la liste messages que vous avez précédemment déclarée en tant que valeur et la rend disponible pour le modèle HTML. Les fonctions de vue sont abordées dans le tutoriel Comment Créer Votre Première Application Web en Utilisant Flask et Python 3.

Ensuite, créez un dossier templates dans votre répertoire flask_app où Flask recherche les modèles, puis ouvrez un fichier de modèle appelé base.html, qui contiendra le code que les autres modèles hériteront pour éviter la répétition de code :

mkdir templates
nano templates/base.html

Ajoutez le code suivant à l’intérieur du fichier base.html pour créer le modèle de base avec une barre de navigation et un bloc de contenu :

flask_app/templates/base.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        .message {
            padding: 10px;
            margin: 5px;
            background-color: #f3f3f3
        }
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">FlaskApp</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

Enregistrez et fermez le fichier.

Ce modèle de base contient tout le code HTML standard dont vous aurez besoin pour réutiliser dans vos autres modèles. Le bloc title sera remplacé pour définir un titre pour chaque page, et le bloc content sera remplacé par le contenu de chaque page. La barre de navigation comporte deux liens, l’un pour la page d’index où vous utilisez la fonction d’aide url_for() pour lier à la fonction de vue index(), et l’autre pour une page À propos si vous choisissez d’en inclure une dans votre application.

Ensuite, ouvrez un modèle appelé index.html. C’est le modèle que vous avez référencé dans le fichier app.py:

nano templates/index.html

Ajoutez le code suivant à celui-ci :

flask_app/templates/index.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Messages {% endblock %}</h1>
    {% for message in messages %}
        <div class='message'>
            <h3>{{ message['title'] }}</h3>
            <p>{{ message['content'] }}</p>
        </div>
    {% endfor %}
{% endblock %}

Enregistrez et fermez le fichier.

Dans ce code, vous étendez le modèle base.html et remplacez le contenu du bloc content. Vous utilisez un titre <h1> qui sert également de titre.

Vous utilisez une boucle for Jinja dans la ligne {% for message in messages %} pour parcourir chaque message dans la liste messages. Vous utilisez une balise <div> pour contenir le titre et le contenu du message. Vous affichez le titre dans un titre <h3> et le contenu dans une balise <p>.

Tout en étant dans votre répertoire flask_app avec votre environnement virtuel activé, indiquez à Flask l’application (app.py dans ce cas) en utilisant la variable d’environnement FLASK_APP :

export FLASK_APP=app

Ensuite, définissez la variable d’environnement FLASK_ENV sur development pour exécuter l’application en mode développement et avoir accès au débogueur. Pour plus d’informations sur le débogueur Flask, consultez Comment gérer les erreurs dans une application Flask. Utilisez les commandes suivantes pour ce faire (sous Windows, utilisez set au lieu de export) :

export FLASK_ENV=development

Ensuite, exécutez l’application :

flask run

Avec le serveur de développement en cours d’exécution, visitez l’URL suivante à l’aide de votre navigateur :

http://127.0.0.1:5000/

Vous verrez les messages de la liste messages affichés sur la page d’index :

Maintenant que vous avez configuré votre application web et affiché les messages, vous aurez besoin d’un moyen pour permettre aux utilisateurs d’ajouter de nouveaux messages à la page d’index. Cela se fait via des formulaires web, que vous configurerez à l’étape suivante.

Étape 2 — Configuration des formulaires

Dans cette étape, vous allez créer une page dans votre application qui permet aux utilisateurs d’ajouter de nouveaux messages à la liste des messages via un formulaire web.

Laissez le serveur de développement en cours d’exécution et ouvrez une nouvelle fenêtre de terminal.

Tout d’abord, ouvrez votre fichier app.py :

nano app.py

Ajoutez la route suivante à la fin du fichier :

flask_app/app.py

# ...

@app.route('/create/', methods=('GET', 'POST'))
def create():
    return render_template('create.html')

Enregistrez et fermez le fichier.

Cette route /create possède le paramètre methods avec le tuple ('GET', 'POST') pour accepter à la fois les requêtes GET et POST. GET et POST sont des méthodes HTTP. Par défaut, seules les requêtes GET sont acceptées, qui sont utilisées pour récupérer des données, comme demander une page d’index ou une page À propos au serveur. Les requêtes POST sont utilisées pour soumettre des données à une route spécifique, ce qui change souvent les données sur le serveur.

Dans cet exemple, vous allez demander la page create en utilisant une requête GET. La page Create contiendra un formulaire web avec des champs de saisie et un bouton Soumettre. Lorsqu’un utilisateur remplit le formulaire web et clique sur le bouton Soumettre, une requête POST est envoyée à la route /create. Vous y traitez la requête, validez les données soumises pour vous assurer que l’utilisateur n’a pas soumis un formulaire vide, et l’ajoutez à la liste messages.

La fonction de vue create() ne fait actuellement qu’une seule chose : rendre un modèle appelé create.html lorsqu’elle reçoit une requête GET normale. Vous allez maintenant créer ce modèle, puis modifier la fonction pour gérer les requêtes POST à l’étape suivante.

Ouvrez un nouveau fichier de modèle appelé create.html:

nano templates/create.html

Ajoutez le code suivant à celui-ci:

flask_app/templates/create.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Add a New Message {% endblock %}</h1>
    <form method="post">
        <label for="title">Title</label>
        <br>
        <input type="text" name="title"
               placeholder="Message title"
               value="{{ request.form['title'] }}"></input>
        <br>

        <label for="content">Message Content</label>
        <br>
        <textarea name="content"
                  placeholder="Message content"
                  rows="15"
                  cols="60"
                  >{{ request.form['content'] }}</textarea>
        <br>
        <button type="submit">Submit</button>
    </form>
{% endblock %}

Enregistrez et fermez le fichier.

Dans ce code, vous étendez le modèle base.html et remplacez le bloc content par un titre <h1> qui sert de titre à la page. Dans la balise <form>, vous définissez l’attribut method sur post afin que les données du formulaire soient envoyées au serveur sous forme de requête POST.

Dans le formulaire, vous avez un champ de saisie de texte nommé title; c’est le nom que vous utiliserez dans l’application pour accéder aux données du formulaire de titre. Vous donnez à la balise <input> une valeur de {{ request.form['title'] }}. Cela est utile pour restaurer les données saisies par l’utilisateur afin qu’elles ne soient pas perdues en cas de problème. Par exemple, si l’utilisateur oublie de remplir la zone de texte content obligatoire, une requête est envoyée au serveur et un message d’erreur sera renvoyé en réponse, mais les données du titre ne seront pas perdues car elles seront enregistrées dans l’objet global request et peuvent être consultées via request.form['title'].

Après le champ de saisie du titre, vous ajoutez une zone de texte nommée content avec la valeur {{ request.form['content'] }} pour les mêmes raisons mentionnées précédemment.

Enfin, vous avez un bouton Soumettre à la fin du formulaire.

Maintenant, avec le serveur de développement en cours d’exécution, utilisez votre navigateur pour accéder à la route /create:

http://127.0.0.1:5000/create

Vous verrez une page « Ajouter un nouveau message » avec un champ de saisie pour le titre du message, une zone de texte pour le contenu du message et un bouton Soumettre.

Ce formulaire envoie une requête POST à votre fonction de vue create(). Cependant, il n’y a pas de code pour gérer une requête POST dans la fonction pour le moment, donc rien ne se passe après avoir rempli le formulaire et l’avoir soumis. À l’étape suivante, vous allez gérer la requête POST entrante lorsqu’un formulaire est soumis. Vous vérifierez si les données soumises sont valides (non vides) et ajouterez le titre et le contenu du message à la liste messages.

Étape 3 — Gestion des requêtes de formulaire

Dans cette étape, vous allez gérer les requêtes de formulaire côté application. Vous accéderez aux données du formulaire que l’utilisateur soumet via le formulaire que vous avez créé à l’étape précédente et vous les ajouterez à la liste des messages. Vous utiliserez également message flashing pour informer les utilisateurs lorsqu’ils soumettent des données invalides. Le message flash ne sera affiché qu’une seule fois et disparaîtra à la prochaine requête (si vous naviguez vers une autre page par exemple).

Ouvrez le fichier app.py pour édition :

nano app.py

Tout d’abord, vous importerez les éléments suivants du framework Flask :

L’objet global request pour accéder aux données de la requête entrante qui seront soumises via le formulaire HTML que vous avez construit à l’étape précédente.
La fonction url_for() pour générer des URLs.
La fonction flash() pour afficher un message lorsqu’une requête est traitée (pour informer l’utilisateur que tout s’est bien passé, ou pour les informer d’un problème si les données soumises ne sont pas valides).
La fonction redirect() pour rediriger le client vers un autre emplacement.

Ajoutez ces imports à la première ligne du fichier :

flask_app/app.py

from flask import Flask, render_template, request, url_for, flash, redirect

# ...

La fonction flash() stocke les messages flash dans la session du navigateur du client, ce qui nécessite la définition d’une clé secrète. Cette clé secrète est utilisée pour sécuriser les sessions, qui permettent à Flask de se souvenir des informations d’une requête à une autre, comme le passage de la page de nouveaux messages à la page d’index. L’utilisateur peut accéder aux informations stockées dans la session, mais ne peut les modifier que s’il possède la clé secrète, vous ne devez donc jamais permettre à quiconque d’accéder à votre clé secrète. Voir la documentation de Flask sur les sessions pour plus d’informations.

La clé secrète doit être une chaîne de caractères aléatoires longue. Vous pouvez générer une clé secrète en utilisant le module os avec la méthode os.urandom(), qui retourne une chaîne de bytes aléatoires adaptée à un usage cryptographique. Pour obtenir une chaîne de caractères aléatoires avec cette méthode, ouvrez un nouveau terminal et lancez l’interpréteur interactif Python en utilisant la commande suivante :

python

Dans l’interpréteur interactif Python, importez le module os de la bibliothèque standard et appelez la méthode os.urandom() comme suit :

import os
os.urandom(24).hex()

Vous obtiendrez une chaîne similaire à la suivante :

Output
'df0331cefc6c2b9a5d0208a726a5d1c0fd37324feba25506'

Vous pouvez utiliser la chaîne obtenue comme votre clé secrète.

Pour définir la clé secrète, ajoutez une configuration SECRET_KEY à votre application via l’objet app.config. Ajoutez-la directement après la définition de app avant de définir la variable messages :

flask_app/app.py


# ...
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your secret key'


messages = [{'title': 'Message One',
             'content': 'Message One Content'},
            {'title': 'Message Two',
             'content': 'Message Two Content'}
            ]
# ...

Ensuite, modifiez la fonction de vue create() pour qu’elle ressemble exactement à ce qui suit :

flask_app/app.py

# ...

@app.route('/create/', methods=('GET', 'POST'))
def create():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']

        if not title:
            flash('Title is required!')
        elif not content:
            flash('Content is required!')
        else:
            messages.append({'title': title, 'content': content})
            return redirect(url_for('index'))

    return render_template('create.html')

Dans l’instruction if, vous assurez que le code qui suit n’est exécuté que lorsque la requête est une requête POST via la comparaison request.method == 'POST'.

Vous extrayez ensuite le titre et le contenu soumis de l’objet request.form qui vous donne accès aux données du formulaire dans la requête. Si le titre n’est pas fourni, la condition if not title serait remplie. Dans ce cas, vous affichez un message à l’utilisateur pour les informer que le titre est requis en utilisant la fonction flash(). Cela ajoute le message à une liste de messages flash. Vous afficherez plus tard ces messages sur la page dans le cadre du modèle base.html. De même, si le contenu n’est pas fourni, la condition elif not content sera remplie. Si c’est le cas, vous ajoutez le message 'Content is required!' à la liste des messages flash.

Si le titre et le contenu du message sont correctement soumis, vous utilisez la ligne messages.append({'title': title, 'content': content}) pour ajouter un nouveau dictionnaire à la liste messages, avec le titre et le contenu fournis par l’utilisateur. Ensuite, vous utilisez la fonction redirect() pour rediriger les utilisateurs vers la page d’index. Vous utilisez la fonction url_for() pour lier à la page d’index.

Enregistrez et fermez le fichier.

Maintenant, naviguez vers la route /create en utilisant votre navigateur web :

http://127.0.0.1:5000/create

Remplissez le formulaire avec un titre de votre choix et du contenu. Une fois que vous soumettez le formulaire, vous verrez le nouveau message listé sur la page d’index.

Enfin, vous afficherez les messages flash et ajouterez un lien pour la page « Nouveau Message » à la barre de navigation dans le modèle base.html pour avoir un accès facile à cette nouvelle page. Ouvrez le fichier de modèle base :

nano templates/base.html

Modifiez le fichier en ajoutant une nouvelle balise `<a>` après le lien FlaskApp dans la barre de navigation à l’intérieur de la balise `<nav>`. Ensuite, ajoutez une nouvelle boucle `for` juste au-dessus du bloc `content` pour afficher les messages flash sous la barre de navigation. Ces messages sont disponibles dans la fonction spéciale `get_flashed_messages()` que Flask fournit. Ensuite, ajoutez un attribut de classe appelé `alert` à chaque message et donnez-lui quelques propriétés CSS à l’intérieur de la balise `<style>`:

flask_app/templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        .message {
            padding: 10px;
            margin: 5px;
            background-color: #f3f3f3
        }
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }

        .alert {
            padding: 20px;
            margin: 5px;
            color: #970020;
            background-color: #ffd5de;
        }

    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">FlaskApp</a>
        <a href="{{ url_for('create') }}">Create</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% for message in get_flashed_messages() %}
            <div class="alert">{{ message }}</div>
        {% endfor %}
        {% block content %} {% endblock %}
    </div>
</body>
</html>

Enregistrez et fermez le fichier, puis rechargez `https://127.0.0.1:5000` dans votre navigateur. La barre de navigation aura maintenant un élément « Créer » qui pointe vers la route `/create`.

Pour voir comment les messages flash fonctionnent, allez sur la page « Créer », et cliquez sur le bouton Soumettre sans remplir les deux champs. Vous recevrez un message qui ressemble à ceci:

Retournez à la page d’index et vous verrez que les messages flash sous la barre de navigation disparaissent, même s’ils sont affichés dans le cadre du modèle de base. Si ce n’étaient pas des messages flash, ils seraient également affichés sur la page d’index, car elle hérite également du modèle de base.

Essayez de soumettre le formulaire avec un titre mais sans contenu. Vous verrez le message « Le contenu est requis ! ». Cliquez sur le lien FlaskApp dans la barre de navigation pour revenir à la page d’index, puis cliquez sur le bouton Retour pour revenir à la page Créer. Vous verrez que le message de contenu est toujours là. Cela ne fonctionne que si vous cliquez sur le bouton Retour, car il enregistre la requête précédente. Cliquer sur le lien Créer dans la barre de navigation enverra une nouvelle requête, qui efface le formulaire, et par conséquent, le message flash disparaîtra.

Vous savez maintenant comment recevoir les entrées de l’utilisateur, comment les valider et comment les ajouter à une source de données.

Note :
Les messages que vous ajoutez à la liste messages disparaîtront chaque fois que le serveur sera arrêté, car les listes Python sont uniquement enregistrées en mémoire. Pour enregistrer vos messages de manière permanente, vous devrez utiliser une base de données comme SQLite. Consultez Comment utiliser le module sqlite3 en Python 3 pour apprendre à utiliser SQLite avec Python.

Conclusion

Vous avez créé une application Flask où les utilisateurs peuvent ajouter des messages à une liste de messages affichés sur la page d’index. Vous avez créé un formulaire Web, traité les données soumises par l’utilisateur via le formulaire et les avez ajoutées à votre liste de messages. Vous avez également utilisé des messages flash pour informer l’utilisateur lorsqu’ils soumettent des données invalides.

Si vous souhaitez en savoir plus sur Flask, consultez les autres tutoriels de la série Flask.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-web-forms-in-a-flask-application