Un site web avec Flask

Dans ce chapître je vais vous montrer comment réaliser un micro site web avec le framework Flask.
J'emploie l'expression "site web" et non pas "application web" car il n'y a pas de base de données connectée, donc les pages sont statiques.

Objet du site

Ce site porte sur la biologie marine. Il s'agit d'un tutoriel sur l'embranchement des mollusques.
L'embranchement des mollusques comprend trois principales classes : gastéropodes, bivalves & céphalopodes.

index.htm : généralités sur l'embranchement
gasteropodes.htm
bivales.htm
cephalopodes.htm

HEADER : en-tête de page
NAV : zone de navigation
SECTION : contenu spécifique à chaque page

Les divisions HEADER & NAV sont identiques dans les différentes pages.

Les différentes dossiers et fichiers nécessaires au développement

Évoquons la structure de notre site.

Quatre pages mais beaucoup plus de fichiers !

Il y aura 5 documents HTML : un document par page et un cinquième qui sert de modèle HTML.
Une feuille de style externe est aussi nécessaire.
De nombreuses images sont intégrées dans les différentes pages.
Il faut aussi un script Python-Flask.

Créer à la racine de C: un nouveau dossier et nommez le "site_flask".
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"

La feuille de style externe

Dans le dossier "css" créez une feuille de style nommée "style.css".
Le code de la feuille de style externe : @media screen { * {font-family : arial ; text-decoration : none ; color : navy ; margin :0px ; padding :0px;} body {min-height : 100vh; } img.grand {display : block ; width : 90% ; margin : 10px auto ; } img.centre {display : block ; width : 60% ; margin : 10px auto; } img.gauche {margin : 5px 1% ; vertical-align : top ; width : 30% ; } img.gauche:hover {transform : scale(2); } h1,h2{text-align : center; line-height : 40px; } h1 {font-size : 1.4em; background : navy ; margin : 15px; color : white} h2 {font-size : 1.2em; background : skyblue ; margin : 10px ;} nav a {display : block ; background : silver ; line-height : 30px; text-align : center; margin : 10px auto ; } p {padding : 5px; text-align : justify; } p.titre {text-align : center; font-size : 200%; line-height : 100px; text-shadow : 5px 5px 5px gray;} header, nav, section{background : turquoise ; margin-top : 10px; } } @media screen and (min-width: 1001px) { *{font-size : 18px; } body {width : 1000px ; margin : 10px auto; } header {float : left ; width : 100%; } nav {float : left ; width : 24%; } section {float : right ; width : 74% ; } } @media screen and (max-width: 1000px) { * {font-size : 16px; } body { width : 100%; } header, nav, section {width : 100%; float : left; } }

media-queries

si le terminal a au moins 1001px de large la page fait 1000 pixels de large ; la division HEADER occupe toute la largeur et en dessous la zone NAV est positionnée à gauche et la zone SECTION est positionnée à droite
si le terminal a moins de 1000 pixels de large la page fait 100% de large et les trois divisions sont les unes sous les autres

Il existe aussi des effets visuels : les images de petite taille (classe "gauche") sont agrandies sur survol (img.gauche:hover {transform : scale(2); })

Rappel : il existe dans mon site un : tuto sur CSS3 qui traite entre autres des "media queries".

Les images

Les fichiers jpg et png sont stockés dans le dossier static/images.

Les documents HTML

Ils sont, comme d'habitude, stockés dans le dossier templates (dossier à la racine de "site_flask").

Le document "commun.htm"

Ce fichier comprend le code commun à toutes les pages du site.
Pour toutes les pages la partie HEAD et les divisions HEADER & NAV de la partie BODY sont identiques.
Donc tout ce code HTML commun doit être écrit une seule fois dans un fichier HTML.
Par contre le code de la division SECTION diffère selon les pages.

Le code de "commun.htm"

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les mollusques</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" >
<meta name="description" content="
Micro site sur l'embranchement des mollusques.
Généralités sur l'embranchement. 
Les différentes classes du phylum :  gastéropodes, bivalves & céphaloopodes.
" />
</head>
<body>
	<header>
		<p class ="titre">Les mollusques</p>
	</header>
	<nav>
		<a href = "/">Accueil</a>
		<a href = "/gaste">Les gastéropodes</a>
		<a href = "/biva">Les bivalves</a>
		<a href = "/cepha">Les céphalopodes</a>
	</nav>
<section>
	{% block content %}
	{% endblock %}
</section>

Notez la valeur de l'attribut href de la balise link : {{url_for('static', filename ='css/style.css')}}.
Pour faire appel à des fichiers stockés dans le répertoire "static" Flask propose la méthode url_for().
Cette méthode, disponible au niveau des templates, génère une URL à partir des paramètres transmis.
Dans l'exemple l'url générée est : "/static/css/style.css"

Pour les éléments A de NAV chaque valeur de href correspond à la route. J'aurais pu employer également la méthode url_for().

La division SECTION ne contient qu'une instruction "block content" ...

La page "index.htm"

Grâce aux media queries le rendu est différent selon qu'il s'agit d'un écran de plus ou de moins 1000px de large.

Aperçu de la page sur un grand écran :

Les divisions NAV & SECTION sont côte à côte mais sous la division HEADER.

Aperçu de la page sur un petit écran :

Les trois divisions sont les unes sous les autres ; chacune occupant toute la largeur de la page.

Le code de la page "index.htm"

{% extends "commun.htm" %}

{%  block content %}
		<h1>Les mollusques - généralités</h1>
		<img class ='grand' src = "{{url_for('static', filename ='images/mollusques.jpg')}}" >
		
		<p>Il s'agit d'un embranchement essentiellement aquatique même s'il existe quelques espèces de mollusques terrestres 
		tels l'Escargot et la Limace.
		<br>Les mollusques sont des animaux qui ont un corps mou protégé par un manteau qui sécrète souvent une coquille. 
		<br>Les mollusques n'ont pas de pattes mais disposent d'un large pied pour le déplacement (ou l'enfouissement).
		<br>Ils ont une langue râpeuse (dotée de dents) : la radula.</p>	
{% endblock %}

L'instruction {% extends "commun.htm" %} permet d'inclure le code de "commun.htm" dans cette page, c'est ce qu'on appelle l'héritage. Si vous connaissez le langage PHP c'est l'équivalent des instructions require() & include()
Grâce à l'héritage le code de la page "index.htm" est des plus succinct et se résumé à l'héritage et au code de la division SECTION.

Cette page intégre une image ; notez la valeur de l'attribut src : {{url_for('static', filename ='images/mollusques.jpg')}}
Donc la méthode url_for() permet de générer le chemin complet vers l'image, ici : "/static/images/mollusque.jpg".

La page "gasteropodes.htm"

{% extends "commun.htm" %}
{%  block content %}
		<h1>Les Gastéropodes</h1>
		<h2>Présentation</h2>
		<p>Les gastéropodes sont des brouteurs grâce à leur langue râpeuse (radula). Mais attention n'en déduisez pas qu'ils sont tous herbivores. 
		Car si certains broutent des algues, d'autres broutent des animaux fixés (éponges, cnidaires, etc.). 
	
		<p>Ci-dessous schéma anatomique d'un gastéropode : 
		<img src ="{{url_for('static', filename ='images/gasteropode_schema.png')}}" class ="centre" >
		
		<h2>Galerie photos de quelques gastéropodes marins : bigorneau, buccin et nasse</h2>
		<p><img class ="gauche" src ="{{url_for('static', filename ='images/bigorneau.jpg')}}" > 
	<img class ="gauche" src ="{{url_for('static', filename ='images/buccin.jpg')}}" >
	<img class ="gauche" src ="{{url_for('static', filename ='images/nasse.jpg')}}" >
{% endblock %}

Toujours l'héritage du fichier "commun.htm".
Notez que les images sont affectées de la classe "gauche".
Sur survol une image voit sa taille doubler grâce à la règle de style :
img.gauche:hover {transform : scale(2); }

La page "bivalves.htm"

{% extends "commun.htm" %}
{%  block content %}
	<h1>Les bivalves</h1>
	<h2>Présentation de la classe</h2>
	<p>Les Bivalves (ou lamillibranches) sont posés sur le fond ou fixés ou fouisseurs (s'enfoncent dans le sable à marée basse). 
	<br>Chez les Lamellibranches la tête (donc la radula) a disparu. Par contre les branchies sont très développées. 
	<br>Ce sont des animaux filtreurs se nourrissant de plancton.
	<br>Ainsi la Moule commune peut filtrer entre 45 et 70 litres d'eau par jour ... L'eau entre par un siphon inhalant puis passe par les branchies qui retiennent 
	l'oxygène et les particules nutritives et ressort par le siphon exhalant.
	<br>Chez les bivalves la fécondation est externe. Un Bénitier (le plus gros des mollusques) peut émettre 50 millions de gamètes en une vingtaine de minutes ...
	<p>Ci-dessous schéma anatomique d'un bivalve : 
	<img src ="{{url_for ('static',filename ='images/bivalve_schema.gif') }}" class ="centre">
	<h2>Galerie photos de bivalves aquatiques : coque, moule zébrée et coquille Saint-Jacques</h2>
	<p><img class ="gauche" src ="{{url_for('static', filename = 'images/coque.jpg') }}" >
<img class ="gauche" src ="{{url_for('static', filename ='images/moule_zebree.jpg') }}" >
<img class ="gauche" src ="{{url_for('static', filename ='images/saint_jacques.jpg')}}" >
{% endblock %}

Aucune nouveauté par rapport à la page précédente.
J'utilise toujours la méthode url_for() pour générer le chemin complet vers chaque image.

La page "cephalopodes.htm"

{% extends "commun.htm" %}
{%  block content %}
		<h1>Les Céphalopodes</h1>
		<p>Les Céphalopodes constituent la classe la plus évoluée des mollusques. Le pied s'est transformé en tentacules pour la capture de proies. 
		<br>Ce sont de redoutables carnivores. La tête comprend deux yeux performants. La bouche dispose d'un bec puissant.
		<br>Les espèces les plus connues sont : la Seiche, le Calmar (ou encornet), le Poulpe (ou Pieuvre).
		<p>Ci-dessous schéma anatomique d'un céphalopode : 
		<img src ="{{url_for('static',filename ='images/cephalopode.gif')}}" class ="centre">
		
		<h2>Galerie photos : calmar, poulple et seiche</h2>
		<p><img src ="{{url_for('static', filename ='images/calmar.jpg')}}" class ="gauche" >
<img src ="{{url_for('static', filename ='images/poulpe.jpg')}}" class ="gauche" >
<img src ="{{url_for('static', filename ='images/seiche.jpg')}}" class ="gauche" >
{%  endblock %}

Rien de nouveau dans le code ; toujours l'emploi systématique de la méthode url_for() pour générer les chemins vers les images.

Le script "application.py"

Il doit être enregistré à la racine du répertoire "site_flask".
Il est ici fort simple en raison du nombre très limité de pages et au fait qu'il n'y a pas de traitements de données mais simplement affichage des différents documents HTML.
Le script : from flask import Flask, render_template, request, url_for app = Flask(__name__) @app.route('/') def accueil(): return render_template("index.htm") @app.route('/gaste') def gaste(): return render_template("gasteropodes.htm") @app.route('/biva') def biva(): return render_template("bivalves.htm") @app.route('/cepha') def cepha(): return render_template("cephalopodes.htm") if __name__ == "__main__": app.run()

Les codes des différentes routes se ressemblent ; affichage d'un template.

Récupération des fichiers correspondant à ce site

Vous pouvez récupérer les fichiers sous forme d'un zip.
Dossier compressé de "site_flask"

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
Remarque : par défaut, le serveur HTTP intégré à Flask fonctionne sur le port 5000.

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville