Un site web dynamique avec Flask

Dans le chapitre précédent nous avons réalisé une site statique. Dans ce chapitre je vous propose un site web dynamique car adossé à un base de données. Donc chaque visiteur bénéficiera de contenus personnalisés en fonction des choix que ce dernier a effectué.

Le site

Il a pour objectif de gérer les espèces animales (faune) d'un milieu aquatique.
Une base de données SQLite est adossée à ce site.

Dans ce chapitre je développe le volet "visiteur" de cette application : l'internaute peut consulter les informations, faire des recherche d'espèces par nom ou par taxon mais il lui est impossible de modifier la base de données (ajouts, modifications, suppressions).

La base de données "faune.db"

Cette base comprend deux tables.
Elle s'inspire de "animaux.db" (voir chapitre 17) mais comprend des colonnes supplémentaires.

Relation entre les tables

Une espèce appartient à un taxon et un seul ; un taxon comprend 1 à N espèces.
les colonnes "especes.code" & "taxons.code" sont les champs de jointure.

La table "taxons"

Deux colonnes : code, nom_taxon.
Son contenu :

hydr	hydraires	
medu	méduses	
acti	actinies	
cten	cténaires	
plat	vers plats	
anne	annélidés	
biva	bivalves	
chit	chitons	
gast	gastéropodes	
ceph	céphalopodes	
deca	décapodes	
amph	amphipodes	
cart	poissons cartilagineux	
osse	poissons osseux	
agna	agnathes

La table "especes"

Cinq colonnes : id, nom_espece, code, photo, e_descripton.
Son contenu : 1 homard deca images/homard.jpg 4 crevette grise deca images/crevette_grise.jpg 5 bouquet deca images/bouquet.jpg 6 étrille deca images/etrille.jpg 7 tourteau deca images/tourteau.jpg 8 araignée de mer deca images/araignee_mer.jpg 20 roussette cart images/roussette.jpg 21 raie bouclée cart images/raie_bouclee.jpg 30 langouste deca images/langouste.jpg 31 cigale de mer deca images/cigale_mer.jpg 32 langoustine deca images/langoustine.jpg 35 pinothère deca images/pinnothere.jpg 37 crabe chinois deca images/crabe_chinois.jpg 66 crabe vert deca images/crabe_vert.jpg 67 crabe_japonais deca images/crabe_japonais.jpg 68 aiguillat cart images/aiguillat.jp 77 requin pélerin cart images/ 78 requin taureau cart images/ 79 requin taupe cart images/ 82 dalhia de mer acti images/ 83 lamproie marine agna images/

Notez que le champ "photo" ne contient pas d'image (c'est impossible dans une BD) mais le chemin relatif vers cette image.
Certaines espèces n'ont pas encore d'image liée.
De nombreux espèces observées dans ce milieu n'ont pas encore été saisies par l'administrateur du site.

Une vue

Cette vue (requête sélection sauvegardée) associe à chaque ligne de "especes" une ligne de "taxons".

CREATE VIEW "vue3" AS SELECT nom_espece, taxons.code as code, nom_taxon, photo 
FROM especes 
INNER JOIN taxons 
ON especes.code = taxons.code

Conseils

Interface DB Browser for SQLite
Manipuler en Python une BD SQLite

Structure du dossier "appli_web_faune"

Ce dossier a une structure identique à celle du site web statique (voir chapitre précédent).

La feuille de style nommée "style.css"

Je suis parti de la feuille de style de l'application "appli_web_mollusques" (chapitre précédent) et je me suis contenté de rajouter quelques règles de style en plus :

	h3 {font-size : 1.2em; background : olive ; margin : 10px ;}
	ul,ol {margin : 10 px ; color : navy; list-style : inside;  }
	input, label, button {height : 30px ; margin : 10px 1% ; }

Revoyez éventuellement le chapitre précédent : Un site web statique avec Flask

Le sous-dossier "images"

Pour chaque espèce il doit y avoir une photo ; toutes les photos sont au format JPG.

exemple 1 : 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 liée est : "araignee_mer.jpg"
De façon générale : pas de lettres accentuées, ni de majuscules, ni d'espaces mais des 'underscores'

Liste des images dans ce dossier

Présentation du volet 'visiteur' de l'application

L'internaute doit pouvoir afficher :

la liste des espèces du milieu par ordre alphabétique
la liste des espèces du mileu classés par taxon
les fiches espèces pour le taxon qu'il a sélectionné auparavant
la liste des taxons

La composante "vues" du site

Le programme se nomme "faune.py".
Je ne présente qu'un extrait du script : les différentes routes. N'oubliez pas d'importer le module sqlite3.

...
@app.route('/')
# sélection d'un taxon 
def index():
    connexion = sqlite3.connect("faune.db")
    curseur = connexion.cursor()	
    curseur.execute("select code, nom_taxon from taxons order by code")
    resultat = curseur.fetchall()
    connexion.close()
    return render_template("index.htm", lignes = resultat)           
	
@app.route('/especes_alpha')
# liste des espèces par ordre alphabétique
def especes_alpha():
    connexion = sqlite3.connect("faune.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)
    connexion.close()
	
@app.route('/especes_taxon')
# liste des espèces par taxon
def especes_taxon():
    connexion = sqlite3.connect("faune.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)
    connexion.close()
	
@app.route('/taxons')
# liste des taxons
def taxons():
    connexion = sqlite3.connect("faune.db")
    curseur = connexion.cursor()	
    curseur.execute("select code, nom_taxon from taxons order by code")
    resultat = curseur.fetchall()
    return render_template("taxons.htm", lignes = resultat)
    connexion.close()
	
@app.route('/fiches', methods =["POST"])
def fiches():
    connexion = sqlite3.connect("faune.db")
    curseur = connexion.cursor()	
    choix = request.form['choix']
    sql = "select nom_espece, code,nom_taxon, photo, e_description from vue3 where code =?"
    curseur.execute(sql,(choix,))
    resultat = curseur.fetchall()
    return render_template("fiches.htm", lignes = resultat)
    connexion.close()
...

Notez que deux vues appelent le même template ("liste.htm") mais avec des paramètres différents ... Donc un même template peut afficher plusieurs pages web !
Observez dans chaque vue le code des requêtes sélection. Pour la vue "fiches()", il s'agit d'une requête paramétrée ; paramètre saisi dans le formulaire du template "index.htm".

Les templates

Le template "commun.htm"

C'est le template 'parent', les autres templates héritent de "commun.htm"

Le code (pensez à dérouler)

<!DOCTYPE html>
<html lang ="fr">
<head><title>Biodiversité</title>
<meta charset = 'utf-8'>
<link  rel = "stylesheet"  href ="{{url_for('static', filename ='css/style.css')}}" >
<meta name="viewport" content=	"width=device-width, user-scalable=yes" >
</head>
<body>
<header>
	<p class ="titre">Application pour gérer les espèces d'un milieu aquatique</p>
</header>
<nav>
		<a href = "/">Choix d'un taxon</a>
		<a href = "/especes_alpha">Liste des espèces classées par ordre alphabétique</a>
		<a href = "/especes_taxon">Liste des espèces classées par taxon</a>
		<a href = "/taxons">Liste des différents taxons</a>
</nav>
<section>
	{% block content %}
	{% endblock %}
</section>
</body></html>

Observez bien les liens ; chaque attribut href a pour valeur une route.
On retrouve la fonction url_for() pour générer des URL.

Le template "liste.htm"

Il sera utilisé pour afficher la liste des espèces par ordre alphabétique OU la liste des espèces par taxon.

Le code (pensez à dérouler)

{# Un même template pour générer deux pages web !  #}

{% 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 syntaxe du commentaire dans un template et l'héritage du fichier "commun.htm".

Le template "taxons"

Le code (à dérouler)

{# liste des taxons (clades) #}
% 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 %}

Notez le commentaire et l'héritage de "commun.htm".

Le template "index.htm"

Ce template contient un formulaire qui permet de sélectionner le code d'un taxon.
Observez attentivement le code pour construire la liste déroulante du formulaire. Le contenu de cette liste est fourni par la route "/".
La valeur sélectionnée dans cette liste sert de paramètre pour la route "/fiches".

Le code (à dérouler)

{# choix d'un taxon #}
{% extends "commun.htm" %}

{%  block content %}
<h2>Sélection d'un taxon</h2>
<form action = "{{ url_for('fiches')}}" method="post" >
	<label>liste des taxons</label>
        <select name = "choix">
			{% for ligne in lignes %}
				<option value ={{ligne[0]}}>{{ligne[1]}} </option>
			{% endfor %}
		</select>
        <button type="submit">Validation</button>
    </form> 
{% endblock %}

Le formulaire contient une liste déroulante nommée "choix".
La valeur sélectionnée dans la liste est envoyée vers la vue "fiches" : ...form action = "{{ url_for('fiches')}}"

Le template "fiches.htm"

Le code (à dérouler)

{# fiches espèces pour le taxon sélectionné #}

{% extends "commun.htm" %}

{%  block content %}
	<h1>Fiches espèces pour le taxon sélectionné</h1>
	{% for ligne in lignes %}
		<h3>Nom espèce : {{ligne[0]}}  appartient au clade {{ligne[2]}}</h3>
		<p><img src ="{{url_for('static', filename = ligne[3] )}}" class ="gauche" >
		<p>Description succincte de l'espèce : {{ligne[4]}}</p>
	{% endfor %}
{% endblock %}

Essayez de recréer ce site dynamique

Créez un nouveau dossier à la racine de C: et nommez le "appli_web_faune".
Comme pour le chapitre précédent créez les sous-dossiers "templates" & "static".

Fichiers à télécharger

la base de données 'faune.db'
version compressée du sous-dossier 'static'

Les rendus que vous devez obtenir

Captures d'écran après avoir saisi "localhost:5000" dans la barre d'URL puis avoir sélectionné "décapodes" dans la liste déroulante.

Sur un grand écran (PC)

Les divisions NAV & SECTION sont de front.

Sur un petit écran (tablette)

Les divisions NAV & SECTION sont l'une en en dessous de l'autre.

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Python et le développement web

Python et les jeux vidéos

Python et l'IA

Tutoriel Python - recherche

L'auteur : Patrick Darcheville

Un site web dynamique avec Flask

Le site

La base de données "faune.db"

Relation entre les tables

La table "taxons"

La table "especes"

Une vue

Conseils

Structure du dossier "appli_web_faune"

La feuille de style nommée "style.css"

Le sous-dossier "images"

Liste des images dans ce dossier

Présentation du volet 'visiteur' de l'application

L'internaute doit pouvoir afficher :

La composante "vues" du site

Les templates

Le template "commun.htm"

Le code (pensez à dérouler)

Le template "liste.htm"

Le code (pensez à dérouler)

Le template "taxons"

Le code (à dérouler)

Le template "index.htm"

Le code (à dérouler)

Le template "fiches.htm"

Le code (à dérouler)

Essayez de recréer ce site dynamique

Fichiers à télécharger

Les rendus que vous devez obtenir

Sur un grand écran (PC)

Sur un petit écran (tablette)