Tutoriel Python - sommaire

Une application web avec Flask

Dans ce chapître nous allons réaliser une micro application web avec Flask.
J'emploie le terme "application" puisqu'il aura utilisation d'une base de données SQLite. Donc les pages web seront dynamiques !
La base de données interconnectée aux pages sera "animaux.db" (base déjà utilisée dans les chapitre 17 et 18 de ce tuto). N'hésitez pas à revoir ces chapitres pour rafraichir vos connaissances sur le langage SQL et sur les commandes Python pour manipuler les données de la base.

Afin de bien comprendre, je vous conseille d'essayer de réaliser sur votre PC cette application.

Travaux préalables

Créer à la racine de C: un nouveau dossier et nommez le "flask_sqlite".
Au sein de ce répertoire, créez deux dossiers : "static" & "templates".
Dans le répertoire "static" créez deux sous-dossiers : "css" et "images"

Pour gagner du temps vous allez réutiliser des fichiers qui existent dans le dossier "site_flask" (voir chapitre précédent).
Ainsi la feuille de style externe sera pratiquement identique.

Vous allez utiliser la base "animaux.db". Donc faites une copie de ce fichier à la racine de "c:\flask_sqlite".

Modifications de la base

Il faut maintenant modifier la copie de la base "animaux.db".

Modifications de la table "especes"

Il faut rajouter dans cette table deux colonnes :
• photo de type text
• e_description de type text

Procédure : à partir de l'onglet "structure de la base", il suffit faire un clic droit sur "especes" et de choisir "modifier une table" puis d'ajouter successivement deux lignes dans "éditer la définition de la table".
Surtout ne cocher pas NN pour les deux nouveaux champs puisque les deux nouvelles colonnes seront vides dans un premier temps ; il faut donc autoriser la valeur "None".

Modification de la structure de "taxons"

Il faut rajouter une colonne t_description de type text dans cette table.

Conseils

Il vous faudra éventuellement supprimer les vues existantes pour pouvoir modifier les structures des deux tables : c'est un bug de DB Browser ...

Une nouvelle vue

Après avoir modifié la structure des deux tables, créer une vue nommée "vue3".

Le code SQL de cette vue :
SELECT nom_espece, taxons.code as code, nom_taxon, photo FROM especes INNER JOIN taxons ON especes.code = taxons.code

Renseignez les champs "photo" dans la table "especes"

Chaque champ doit contenir le chemin vers la photo correspondante.

Test de requête

Testez la requête : "select nom_espece, code, photo, e_description from especes where code ='deca' "

Le rendu de cette requête : homard deca images/homard.jpg crevette grise deca images/crevette_grise.jpg bouquet deca images/bouquet.jpg étrille deca images/etrille.jpg tourteau deca images/tourteau.jpg araignée de mer deca images/araignee_mer.jpg langouste deca images/langouste.jpg cigale de mer deca images/cigale_mer.jpg langoustine deca images/langoustine.jpg pinnothère deca images/pinnothere.jpg crabe chinois deca images/crabe_chinois.jpg crabe vert deca images/crabe_vert.jpg crabe_japonais deca images/crabe_japonais.jpg

Je précise donc que les photos sont stockées dans le dossier "images".
Il n'est pas nécessaire de donner le chemin complet, donc d'écrire : "/static/images/nomPhoto.jpg".
Pourquoi ? Grâce à la méthode url_for() qui indiquera le repertoire principal : "static".

Le script flask "application.py"

Il comprend de nombreuses routes. from flask import Flask, render_template, request, url_for import sqlite3 app = Flask(__name__) @app.route('/') def accueil(): return render_template("index.htm") @app.route('/alpha') def alpha(): connexion = sqlite3.connect("animaux.db") curseur = connexion.cursor() curseur.execute("select * from vue3 order by nom_espece,code") resultat = curseur.fetchall() legende ="liste des espèces par ordre alphabétique" return render_template("liste.htm", lignes = resultat,titre=legende) @app.route('/taxon') def taxon(): connexion = sqlite3.connect("animaux.db") curseur = connexion.cursor() curseur.execute("select * from vue3 order by code, nom_espece ") resultat = curseur.fetchall() legende ="liste des espèces par taxon" return render_template("liste.htm", lignes = resultat, titre = legende) @app.route('/groupes') def groupes(): connexion = sqlite3.connect("animaux.db") curseur = connexion.cursor() curseur.execute("select code, nom_taxon from taxons order by code") resultat = curseur.fetchall() return render_template("groupes.htm", lignes = resultat) @app.route('/decapodes') def decapodes(): connexion = sqlite3.connect("animaux.db") curseur = connexion.cursor() sql = "select nom_espece, code, photo, e_description from especes where code ='deca' " curseur.execute(sql) resultat = curseur.fetchall() print(resultat) return render_template ("decapodes.htm", lignes = resultat) if __name__ == "__main__": app.run()

Notez que les codes des différentes routes se ressemblent beaucoup.
Dans chaque route une requête sélection ayant pour source : "vue3 / especes / taxons".
Les routes '/alpha' & '/taxon' redirigent vers le même template ("liste.htm") mais le contenu retourné est différent.

Les différentes templates

Le dossier "templates" va comprendre les différents documents HTML.

Le fichier "commun.htm"

C'est le modèle HTML dont vont hériter les différentes pages.
Ci-dessous je ne reprends que le code de la partie BODY (le code de la partie HEAD est identique au document "commun.htm" du chapitre précédent). ... <body> <header> <p class ="titre">Application pour gérer les espèces d'un milieu</p> </header> <nav> <a href = "/">Accueil</a> <a href = "/alpha">Liste des espèces classées par ordre alphabétique</a> <a href = "/taxon">Liste des espèces classées par taxon</a> <a href = "/groupes">Liste des différents taxons</a> <a href = "/decapodes">infos détaillées sur l'ordre des décapodes</a> </nav> <section> {% block content %} {% endblock %} </section> </body>

Concenant la partie HEAD, reportez vous au chapitre précédent !
Seule différence : le contenu de la balise TITLE.

Le document HTML "index.htm"

Cette page se contente d'afficher les traitements possibles ; elle est pour l'instant purement informative.

La page "liste.htm"

Cette page est appelée par les route "/alpha" mais aussi "/taxon".
Le code : {% extends "commun.htm" %} {% block content %} <h1>{{titre}}</h1> {% for ligne in lignes %} <p>Nom espèce :<b> {{ligne[0]}} </b> <br>appartient au taxon : {{ligne[2]}} {% endfor %} {% endblock %}

Notez la variable "titre" qui a pour origine "legende" du script.
Observez attentivement les routes "/alpha" et "/taxon" dans le script flask.
Dans les deux cas retour de la liste des espèces mais avec un critère de tri différent. La légende retournée est aussi différente.

La page "groupes.htm"

Cette page est appelée par la route "/groupes" qui retourne la liste des taxons. {% extends "commun.htm" %} {% block content %} <h1>Liste des différents taxons (clades)</h1> {% for ligne in lignes %} <p>code et nom du taxon :<b> {{ligne[0]}}</b> - {{ligne[1]}}</p> {% endfor %} {% endblock %}

La page "decapodes.htm"

La page est appelée par la route "/decapodes" qui retourne la liste des crustacés décapodes. {% extends "commun.htm" %} {% block content %} <h1>Liste des crustacés décapodes</h1> {% for ligne in lignes %} <h3>Nom espèce : {{ligne[0]}} </h3> <p><img src ="{{url_for('static', filename = ligne[2] )}}" class ="gauche" > <p>Description succincte de l'espèce : {{ligne[3]}}</p> {% endfor %} {% endblock %}

Notez l'instruction : <img src ="{{url_for('static', filename = ligne[2] )}}" class ="gauche" > Ainsi on affiche pour chaque espèce de décapode la photo correspondante.

Les fichiers dans le dossier "static".

Dans le sous-dossier "css" on trouve la feuille de style "style.css"

Cette feuille de style est pratiquement identique à celle conçue dans le chapitre précédent (site sur les mollusques).
Je ne vous communique donc que les ajouts : ... h3 {font-size : 1.2em; background : olive ; margin : 10px ;} li {color : navy; list-style-position : inside ; padding : 10px;} input, label, button {height : 30px ; margin : 10px 1% ; } nav a {display : block ; background : silver ; margin : 10px auto ; line-height : 20px; } p {padding : 5px; text-align : justify; font-size : 1em;} ...

J'ai rajouté des styles pour les balises H3, les items de liste à puces et les éléments de formulaire.
Comme pour la version précédente les pages sont "responsives" et il y a un effet visuel pour les images sur survol.

Le sous-dossier "images"

Pour chaque espèce il doit y avoir une photo. Toutes les images sont au format JPG.
Le nom de la photo par rapport au nom de l'espèce doit être logique.
Exemple : si le nom de l'espèce est "crevette grise" le nom de la photo correspondante est "crevette_grise.jpg"
Exemple 2 : si le nom de l'espèce est "araignée de mer" le nom de la photo ad hoc est : "araignee_mer.jpg"
Donc jamais de lettres accentuées, ni de majuscules, ni d'espaces dans les noms des photos.

Liste des images dans ce dossier

Notez que toutes les images ont le même type (jpg), pas de lettres accentuées, par de majuscules, pas d'espaces.
Mais surtout le nom de la photo est logique par rapport au nom de l'espèce.

Aperçu de l'application

Aperçu de la page "decapodes.htm" sur un grand écran

La photo associée à chaque espèce est affichée ; on peut l'agrandir en la survolant (comme pour le site "mollusques" ; voir chapitre précédent).
On voit que les champs "e_description" ne sont pas encore renseignés : valeur retournée = None.

Critiques de cette application

Pourquoi ne pourrait-on pas obtenir les fiches détaillées pour d'autres taxons que les crustacés décapodes ???

Il faudrait alors :
• renommer la route "/decapodes" en "/un_taxon"
• dans cette nouvelle route, la requête sélection simple devrait devenir une requête paramétrée
• créer un formulaire permettant au visiteur de saisir ce paramètre
• renommer le template "decapodes.htm" en "un_taxon.htm"

La version améliorée de l'application

Modification dans "application.py"

La route "/deca" est renommée "/un_taxon" ... @app.route('/un_taxon', methods =["POST"]) def un_taxon(): connexion = sqlite3.connect("animaux.db") connexion.row_factory =sqlite3.Row curseur = connexion.cursor() choix = request.form['choix'] sql = "select nom_espece, code, photo, e_description from especes where code =?" curseur.execute(sql,(choix,)) resultat = curseur.fetchall() return render_template("un_taxon.htm", lignes = resultat) ...

Cette route sera appelée par le formulaire contenu désormais dans "index.htm".

Notez dans le code:
• deuxième argument de la méthode @app.route() : methods =["POST"]
• instruction connexion.row_factory =sqlite3.Row pour pouvoir utiliser les noms des champs (à la place de leur indice)
• récupération de la valeur saisie dans le formulaire de la page "index.htm" : choix = request.form['choix']
• exécution d'une requête sélection paramétrée ; le paramètre a été saisi dans le formulaire.
• redirecton vers "un_taxon.htm"

Modification des templates

La page "index.htm"

Cette page contient désormais un formulaire avec un champ de saisie nommé "choix".
La valeur saisie dans ce champ sera le paramètre de la requête sélection.
Notez bien les attributs de la balise FORM : route et méthode.

Le document modèle "commun.htm"

Un petit changement au niveau de NAV.

La page "un_taxon.htm"

C'est le nouveau nom de la page "decapodes.htm". Il faut aussi apporter quelques corrections au code initial.
Code de "un_taxon.htm" : {% extends "commun.htm" %} {% block content %} <h1>Liste des espèces pour le taxon sélectionné</h1> {% for ligne in lignes %} <h3>Nom espèce : {{ligne['nom_espece']}} </h3> <p><img src ="{{url_for('static', filename = ligne['photo'] )}}" class ="gauche" > <p>Description succincte de l'espèce : {{ligne['e_description']}}</p> {% endfor %} {% endblock %}

Les noms des champs remplacent leur indice.
Attention les champs "photo" de la table "especes" ne doivent pas être à NULL car le paramètre "filename" de la méthode url_for() doit avoir une valeur sinon plantage !

Le rendu

Si vous avez saisi "localhost:5000" (en guise d'URL) vous accédez à la page "index.htm".

Nouvel aperçu de cette page sur un grand écran :

Vous n'avez plus qu'à saisir "deca" ou "osse" ou "biva" dans le champ unique du formulaire.
Remarque : pour connaitre les codes des différents taxons il suffit de cliquer sur le lien légendé "liste des différents taxons".

Version définitive

Problème : pour ajouter de nouvelles espèces il faut toujours utiliser DB Browser puisque l'ajout n'est pas prévu dans l'application.
Un formulaire d'ajout dans l'application serait donc souhaitable ...

Un nouveau template : "ajout_especes.htm"

Notez l'attribut action qui dirige vers la fonction "ajout_espece" du script.
La saisie du code (code taxon) se fait via une liste déroulante (liste statique).

Un nouveau lien dans "commun.htm"

J'ai rajouté un lien vers la route "/nouvelle_espece" qui affiche la page "ajout_espece.htm".

Nouvelles routes dans le script "application.py"

Il faut rajouter à "application.py" deux nouvelles routes.
Les insertions dans le script sont donc les suivantes : @app.route('/nouvelle_espece') def nouvelle_espece(): return render_template("ajout_espece.htm") @app.route('/ajout_espece',methods = ['POST']) def ajout_espece(): nom = request.form['nom'] code = request.form['code'] photo = request.form['photo'] description = request.form['description'] connexion = sqlite3.connect("animaux.db") connexion.row_factory =sqlite3.Row curseur = connexion.cursor() sql ="INSERT INTO especes (nom_espece, code, photo, e_description) VALUES (?,?,?,?)" curseur.execute(sql,(nom,code,photo,description)) connexion.commit()

Une route pour afficher le formulaire de saisie dans la table "especes" : "/nouvelle_espece".
La deuxième route crée un nouvel enregistrement dans la table "especes" à partir des données saisies dans le template "ajout_espece.htm".
Attention il s'agit d'une requête de type INSERT et comme toute requête qui modifie la base, elle doit être confirmée par une commande "connexion.commit()".

Aperçu de la page "ajout_espece.htm"

Ultimes modifications de l'application

La saisie du code taxon via une liste déroulante, c'est bien. Mais il serait préférable que cette liste déroulante soit dynamique c'est à dire basée sur la table "taxons" afin que toute modification dans cette source soit répercutée dans la liste.
En fait c'est pas très compliqué à réaliser, comme je vais vous le montrer ci-dessous.

La route "/nouvelle_espece" doit être enrichie

Nouveau code de cette route : @app.route('/nouvelle_espece') def nouvelle_espece(): connexion = sqlite3.connect("animaux.db") curseur = connexion.cursor() sql = "select code, nom_taxon from taxons order by code" curseur.execute(sql) resultat = curseur.fetchall() return render_template("ajout_espece.htm",lignes = resultat)

Il faut produire le contenu de la liste déroulante : colonnes code & nom_taxon de la table "taxons", lignes triées par "code".

La page "ajout_espece.htm"

Il faut aussi modifier le code de cette page.
Code qui construit une liste déroulante dynamique : ... <select name = "code"> {% for ligne in lignes %} <option value ={{ligne[0]}}>{{ligne[1]}} </option> {% endfor %} </select> ...

Et oui, une simple boucle permet de construire les items de la liste.

Aperçu de la version définitive de "ajout_espece.htm

Si vous rajoutez une ligne dans la table "taxons", la liste déroulante du formulaire sera automatiquement modifiée.

Améliorer "index.htm"

Dans la foulée je vais améliorer le formulaire de cette page : remplacer la zone de texte par une liste déroulante dynamique.
Il faut donc modifier la fonction "accueil" de la route "/".
Je ne communique pas le code car vous devriez être capable de le reconstituer si vous avez lu attentivement ce chapitre.

À vous de "bosser"

Vous allez enrichir l'application : ajout à la table "taxons".

Il faut donc :
• ajouter des routes dans "application.py" : "/nouveau_taxon" & "/ajout_taxon"
• nouveau lien dans le menu général : "ajout dans la table 'taxons' "
• nouveau template : "ajout_taxon.htm"

Si vous avez compris tout ce qui précède vous n'aurez aucune difficulté.

Récupération des fichiers correspondant à cette application

Vous pouvez récupérer les fichiers sous forme d'un zip.
dossier compressé "flask_sqlite"

Après avoir installé le fichier décompressé sur votre PC il suffira de double-cliquer sur "application.py" pour lancer le serveur python. Puis vous basculez sur le navigateur et tapez en guise d'url : localhost:5000
En effet, par défaut, le serveur HTTP intégré à Flask fonctionne sur le port 5000.