¶ Présentation de Flask
Dans cette activité, nous allons mettre en place d'un serveur HTTP à l'aide du module Flask.
Flask est un micro-framework open-source permettant de mettre en place un serveur web de manière très simple.
¶ Installation du module
Si Flask n'est pas installé, il suffit d'exécuter la commande ci-dessous.
pip install flask
À partir de cette étape, le module Flask est installé.
¶ Partie 1 - Mise en place du serveur
¶ Le programme de base
Question 1 - Dans votre répertoire personnel, créer un nouveau dossier nommé flask. Ce dossier contiendra tous nos fichiers de cette activité.
Question 2 - Créer un nouveau fichier nommé serveur.py et saisissez le code ci-dessous.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def test():
return '<h1>Bienvenue en NSI ! Le serveur fonctionne !</h1>'
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
Question 3 - Lancer l'exécution de ce programme. Normalement, le serveur se met en route et des informations s'affichent dans la console.
Voici quelques détails sur ces informations présentes dans la console :
- Le message n'a pas d'erreur et indique que le serveur fonctionne correctement.
- Le serveur est accessible depuis l'adresse de loopback
127.0.0.1depuis le port5000. - D'autres ordinateurs peuvent accéder à ce serveur grâce à la seconde adresse IP indiquée.
Question 4 - Pour vérifier le bon fonctionnement de notre serveur, ouvrir un navigateur et entrer l'adresse http://127.0.0.1:5000 dans la barre d'adresse.
À cette étape, vous devez obtenir une page web avec un message de bienvenue.
¶ Analyse du premier programme
Voici quelques indications sur les lignes qui composent le programme ci-dessus.
- Étape 1 : Importation du module Flask.
from flask import Flask
- Étape 2 : Création d'un objet Flask nécessaire au bon fonctionnement de l'application.
app = Flask(__name__)
- Étape 3 : Ajout d'un décorateur. C'est une instruction qui précède une fonction et qui va fournir des indications supplémentaires.
Dans notre cas, le décorateur détermine l'URL à joindre pour exécuter la fonction en dessous.
@app.route('/')
- Étape 3 : Création d'une fonction qui sera exécutée lorsqu'une connexion sera faite depuis l'URL indiquée dans le décorateur.
Cette fonction retourne du code HTML qui sera visible sur la page web.
def test():
return '<h1>Bienvenue en NSI ! Le serveur fonctionne !</h1>'
- Étape 4 : Ajout des deux lignes permettant de lancer le serveur.
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
¶ Création d'une nouvelle page
On souhaite créer une nouvelle page accessible depuis l'URL http://127.0.0.1:5000/informations.
Question 5 - Écrire une nouvelle fonction et son décorateur afin de créer cette nouvelle page. Cette page affichera quelques informations sur vous :
- Votre nom.
- Votre prénom.
- Votre date de naissance.
Question 6 - Enregistrer vos modifications et redémarrer le serveur pour prendre en compte la création d'un nouveau chemin.
Ensuite, utiliser un navigateur et rendez-vous sur votre nouvelle page à l'adresse http://127.0.0.1:5000/informations.
¶ Partie 2 - La récupération d'informations issues d'un formulaire
Pour l'instant, notre serveur affiche des pages web, mais il n'est pas encore possible de récupérer des informations de l'utilisateur. Nous allons découvrir cela.
¶ Le formulaire HTML
Dans un premier temps, nous avons besoin d'une page HTML avec un formulaire.
Question 7 - Dans votre dossier flask, créer un nouveau fichier nommé formulaire.html.
Question 8 - Copier et coller le code ci-dessous dans votre fichier formulaire.html. Ce code affiche un formulaire simple composé de 3 champs :
- Nom.
- Prénom.
- Mot de passe.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Connexion</h1>
<form method="GET" action="http://127.0.0.1/connexion">
<p>Nom :</p>
<input type="text" name="nom">
<p>Prénom :</p>
<input type="text" name="prenom">
<p>Mot de passe : </p>
<input type="text" name="password"><br><br>
<input type="submit" value="Valider"/>
</body>
</html>
Voici quelques indications sur ce formulaire :
- Les données sont transmises au serveur selon la méthode
GET. - Les noms des variables qui contiennent les données sont :
nom,prenometpassword. - Le formulaire envoie ses données à la cible
http://127.0.0.1/connexion.
¶ Récupérer les données avec Flask
Comme indiqué précédemment, les données de notre formulaire sont transmise au serveur à l'adresse http://127.0.0.1/connexion.
¶ Au niveau du décorateur
Il est alors possible de les récupérer en créant un décorateur et une fonction associée à /connexion. Le décorateur peut prendre plusieurs formes selon les méthodes utilisées :
- Pour la méthode
GET:
@app.route("/test", methods=['GET'])
- Pour la méthode
POST:
@app.route("/test", methods=['POST'])
- Pour plusieurs méthodes à la fois :
@app.route("/test", methods=['POST', 'GET', 'HEAD'])
¶ Au niveau de la fonction
Dans la fonction associée à l'URL, il est possible de récupérer les données du formulaire. Pour cela, on utilise deux instructions qui dépendent de la méthode utilisée :
- Pour la méthode
GET:
from flask import request
email = request.args.get('email')
- Pour la méthode
POST:
from flask import request
email = request.form['email']
Dans cet exemple, on récupère la valeur du champ email dans une variable python email. Il est alors possible d'effectuer n'importe quelles opérations avec la variable email.
Question 9 - Écrire une fonction et un décorateur permettant de récupérer les valeurs des champs nom, prenom et password du fichier formulaire.html
- Cette fonction sera associée au décorateur
/connexion - On utilise la méthode
GET - La fonction retourne un message de bienvenue personnalisé avec le nom et le prénom de l'utilisateur. Ce message sera visible dans le navigateur.
Question 10 - Vérifier le bon fonctionnement de votre serveur. Vous devez obtenir un résultat proche de la vidéo ci-dessous.
Question 11 - Modifier le formulaire HTML et utiliser maintenant la méthode POST.
Question 12 - Créer une nouvelle fonction qui effectue la même chose en utilisant cette fois la méthode POST.
¶ Amélioration 1
On souhaite maintenant vérifier si l'utilisateur possède le bon mot de passe pour se connecter.
Pour cela, on stocke le mot de passe dans le programme du serveur dans une variable MOT_DE_PASSE="NSI".
Question 13 - Modifier votre programme afin que le serveur autorise l'accès aux utilisateurs ayant le bon mot de passe.
- En cas de succès, un message de bienvenue est affiché avec le nom de l'utilisateur
- En cas d'échec, un message d'erreur est affiché
¶ Amélioration 2
Les utilisateurs doivent maintenant s'identifier à l'aide d'un login et d'un mot de passe. Leur nom et prénom ne sont plus utilisés.
On stocke sur le serveur l'ensemble des utilisateurs autorisés dans une liste de dictionnaires. Chaque dictionnaire est composé d'une clef login et password.
Question 14 - Modifier le formulaire et votre programme afin d'utiliser un login et un mot de passe pour se connecter au site.
- Il faut vérifier que le login et le mot de passe de l'utilisateur sont bien présents dans le dictionnaire des personnes autorisées.
- En cas de succès, un message de bienvenue est affiché avec le nom de l'utilisateur
- En cas d'échec, un message d'erreur est affiché