¶ Partie 1 - Utilisation des templates
Mettre du code HTML dans une fonction Python, ce n'est pas très propre et adapté si l'on souhaite construire de grosses pages. Pour cela, on peut utiliser des templates.
¶ Définition
Les templates sont des fichiers dans lequel on vient écrire du code HTML. Mais comment leur transmettre des données ?
Les templates sont également composés de petits morceaux de code, qui vont être remplacés par la valeur de certaines variables et permettant ainsi de générer les pages HTML pour les utilisateurs.
Flask utilise le moteur de template
Jinja, qui permet de générer les pages HTML grâces aux templates.
¶ Mise en place des templates
¶ Les pages HTML
Pour fonctionner, les templates doivent impérativement être situés dans le dossier /templates présent à la racine de votre site. Votre application doit avoir une arborescence de fichiers proche de celle ci-dessous.
Ensuite, il suffit de créer votre template dans le dossier /templates. Voici un exemple de template.
<!DOCTYPE html>
<html lang = "fr">
<head>
<title>Espace de connexion</title>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "/static/style.css">
</head>
<body>
<h1>Hello world !</h1>
<p>La variable texte : {{ texte }}</p>
<p>
La variable liste : {{ liste[0] }} ou {{ liste }}
</p>
<p>
La variable dictionnaire {{ dico["cle1"] }} ou {{ dico["cle2"] }} ou {{ dico }}
</p>
</body>
</html>
- Les données du serveur sont affichables sur la page à l'aide des symboles
{{ }}. Par exemple, l'instruction{{ texte }}sera remplacée par le contenu de la variabletexte. - Les noms des variables sont définis depuis le serveur
¶ Les fichiers externes
Si vous ou souhaitez ajouter une feuille de style CSS, un fichier Javascript ou des images, il faut impérativement les placer dans le dossier /static.
Ensuite, pour les importer dans le template, il faut utiliser la syntaxe ci-dessous :
<script src="{{ url_for('static', filename='script.js') }}"></script></head>
¶ Le serveur
Pour générer une page HTML à l'aide un template dans une fonction, on utilise l'instruction render_template. Voici son fonctionnement :
from flask import render_template
@app.route('/')
def fonction_1():
return render_template("index.html", texte="un mot", liste=[7, 2], dico= {"cle1": 12, "cle2": (1, 2)})
- La fonction
render_templateprend au moins 1 paramètre, le nom du fichier template - Les paramètres suivants correspondent aux variables à transmettre aux templates.
¶ Les instructions des templates
Les templates avec le moteur graphique jinja offrent de nombreuses possibilités. On peut utiliser des structures de contrôles au sein des templates afin d'élaborer des pages plus complexes.
- Les boucles
for
<body>
{% for i in range(5) %}
<p>{{ i }}</p>
{% enfor %}
</body>
<body>
{% for valeur in liste %}
<p>{{ valeur }}</p>
{% enfor %}
</body>
- Les
if
<body>
{% if valeur %}
<p>La valeur est vraie</p>
{% else %}
<p>La valeur est fausse</p>
{% endif %}
</body>
- Les affectations de variables
<body>
{% set a = 2 %}
{% set b = 5 %}
{% set c = a + b %}
</body>
Question 15 - Modifier votre programme afin d'utiliser les templates. Votre application sera composée de 3 templates :
- La page de connexion.
- La page de confirmation de connexion.
- La page d'erreur de connexion.
¶ Partie 2 - La technologie AJAX
¶ Le fonctionnement classique
Pour l'instant, nous avons découvert comment envoyer des données sur un serveur à l'aide d'une requête et de données issues d'un formulaire.
Cette méthode fonctionne parfaitement, mais elle possède un mécanisme bien précis: La page HTML est rechargée à chaque fois que l'on envoie les données du formulaire vers le serveur.
En effet, avec ce fonctionnement, chaque envoi de données issues d'un formulaire entraîne la transmission et l'affichage d'une nouvelle page HTML (réponse du serveur). L'utilisateur doit attendre l'arrivée de la réponse pour effectuer d'autres manipulations sur la page.
Nous allons donc voir comment il est possible de remédier à ce problème, notamment grâce à la technologie AJAX
¶ La technologie AJAX
AJAX est une méthode utilisant différentes technologies du web permettant d'effectuer des requêtes à un serveur web de manière asynchrone et, en conséquence, de modifier partiellement la page web affichée sur le poste client sans avoir à afficher une nouvelle page complète.
Cette architecture informatique permet de construire des applications Web et des sites web dynamiques interactifs.
Ajax est l'acronyme d'Asynchronous Javascript And XML.
¶ Principe d'AJAX
Le principe de fonctionnement d'AJAX est assez simple. Pour envoyer ou récupérer des données au serveur, on utilise un programme écrit Javascript. Ce programme est importé dans la page Web et peut être exécuté à n'importe quel moment (appuis d'un bouton, chargement d'une page, clic sur un bloc...)
Ensuite, lors de son exécution, le programme récupère les données des différents champs et envoie en arrière-plan des demandes au serveur Web à l'aide d'une requête. Ensuite, sans rechargement de page, il modifie le contenu de la page HTML.
Lors des requêtes et des réponses du serveur, il n'y a plus de tranmission de pages HTML complètes, car la page n'est pas rechargée. Seules les données sont tranmises. Pour cela, on utlise le format de données JSON.
¶ Envoyer des données avec le JSON
Les données entre le serveur et le client sont transmises au format JSON. C'est un format texte dont la syntaxe utilise un ensemble de clé/valeur. Elle se rapproche fortement de l'écriture des dictionnaires en python.
{
"utilisateurs" :
[
{
"prenom" : "Paul"
"age" : 42,
},
{
"prenom" : "Pierre"
"age" : 17,
}
]
}
Avec Python, il est assez simple de convertir une liste de dictionnaire en JSON.
import json
dico = [{"nom":"Michel", "age":30}, {"nom":"Alain", "age":40}]
r = json.dumps(dico)
Avec Flask, il est possible de renvoyer une réponse HTTP avec uniquement des données aux formats JSON.
@app.route('/json')
def test():
return Response(json.dumps(dico), mimetype="application/json")
¶ Mise en place d'une application utilisant AJAX
On souhaite construire une page HTML permettant d'afficher et d'ajouter des utilisateurs. Cette page contient :
- Deux champs :
nometage. Les champs ne sont pas dans un formulaire. - Un bouton
Ajouter - La liste des utilisateurs
Les informations des utilisateurs sont stockées sur le serveur dans une liste de dictionnaires.
dico = [{"nom":"Michel", "age":30}, {"nom":"Alain", "age":40}]
¶ Mise en place du serveur
Question 1 - Mettre en place un serveur Flask permettant d'afficher cette page web sur l'adresse 127.0.0.1/inscription. On peut retrouver 2 étapes :
- Création du template
inscription.htmlcorrespondant à la page web. La page HTML doit se trouver dans le dossiertemplates. - Construction du serveur web afin d'associer une route à l'URL
/inscription
Question 2 - Créer une nouvelle fonction qui répondra à la route /get_utilisateurs. Cette fonction renvoie l'ensemble des utilisateurs du dictionnaire principal au format JSON. En effet, les utilisateurs sont stockés dans une liste de dictionnaires.
N'hésitez pas à revenir un peu plus haut et relire la documentation : ici
dico = [{"nom":"Michel", "age":30}, {"nom":"Alain", "age":40}]
Question 3 - Afin de tester votre requête, entrer l'URL http://127.0.0.1:5000/get_utilisateurs dans un navigateur. Vous devez obtenir la liste des utilisateurs au format JSON.
¶ Mise en place d'AJAX
Maintenant, il faut s'intéresser à la récupération des données en utilisateur AJAX depuis la page WEB.
Question 1 - Dans un dossier static, créer un nouveau fichier nommé script.js. Ce fichier contiendra l'ensemble de nos programmes écrit en Javascript.
Pour rappel, voici la structure minimale d'un fichier Javascript.
document.addEventListener("DOMContentLoaded", main);
function main(){
}
Question 2 - Importer votre fichier script.js dans le fichier inscription.html à l'aide de la ligne suivante :
<script src="{{ url_for('static', filename='script.js') }}"></script>
Question 3 - Pour effectuer des requêtes AJAX à l'aide de Javascript, nous allons utiliser le module axios. Pour importer ce module, il faut ajouter la ligne suivante dans le fichier inscription.html entre les balises <head>.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Question 4 - Dans le fichier Javascript, ajouter et compléter la fonction afficher_liste_utilisateurs. Cette fonction effectue 2 actions :
-
Elle récupère les utilisateurs au format JSON à l'aide d'une requête
GETet du moduleaxios -
Elle modifie la page HTML afin d'ajouter des nouveaux éléments dans la liste.
function afficher_data(){
axios.get('http://127.0.0.1:5000/get_utilisateurs').then( function (response){
let utilisateurs = response.data
/* SUITE DU PROGRAMME */
}
})
}
Question 5 - Ajouter une ligne dans la fonction main afin d'exécuter la fonctionafficher_data dès le chargement de la page.
À partir de ce moment, la page doit afficher l'ensemble des utilisateurs déjà inscrits.
Question 6 - Dans le fichier Javascript, écrire une fonction ajouter_utilisateur qui permet d'ajouter un nouvel utilisateur dont les informations sont indiquées dans les champs nom et age.
Voici les étapes de cette fonction :
- Récupérer la valeur des champs
nometage. - Construire le dictionnaire de données
- Envoyer les données à l'aide d'une requête POST et le module
axios - Mettre à jour les données en rappelant la fonction
afficher_data
Voici les instructions à utiliser pour effectuer une requête GET à l'aide du module axios
data = {
nom : nom,
age: age
}
axios.post('http://127.0.0.1:5000/add_utilisateur', data).then(function (response) {} )
Question 7 - Sur le serveur, ajouter la route /add_utilisateur qui répond aux requêtes POST et qui permet d'ajouter un nouvel utilisateur dans la liste de dictionnaires. Voici le début de la fonction.
app.route("/add_utilisateur", methods=['POST'])
def add():
data= request.get_json()
age = data['age']
nom= ...
# À compléter
return json.dumps({'success':True}), 200, {'ContentType':'application/json'}
- La dernière ligne du programme permet de retourner le code de status 200.
À partir de ce moment, votre application doit être fonctionnelle.
¶ Projet
L'objectif de ce projet est de construire une petite application web de TODO-List en utilisant HTML, le framework Flask et Javascript.
¶ Les différentes fonctionnalités
Une tâche peut être définie au minimum par :
- Son titre
- Sa catégorie
- Sa date limite
- Son état (Faite ou non)
Dans un premier temps, on stockera les tâches dans une liste de dictionnaire. On essayera ensuite de les stocker dans un fichier CSV présent sur le serveur.
La meilleure solution serait d'utiliser une base de donnée, mais il faudra attendre la terminale NSI
Voici les fonctionnalités à mettre en place :
- Affichage des tâches
- Ajout d'une tâche à faire
- Modification d'une tâche
- Suppression d'une tâche
¶ Interface utilisateur
- L'utilisateur doit pouvoir ajouter une tâche et voir ses tâches en cours sur la même page HTML
- Évolution : Chaque tâche est associée à une case à cocher indiquant si celle-ci est réalisée ou non