Un site web avec Flask

Dans le précédent chapitre nous avons créé de nombreux templates mais ceux-ci n'avaient aucun rapport logique entre eux. L'objectif était simplement de vous montrer le rôle des templates : gérer les entrees/sorties ou en d'autres termes les saisies et les affichages.

Maintenant je vais vous montrer comment réaliser un site web avec le framework Flask. Il s'agira d'un site statique car aucune base de données est n'adossée.Ce qui signifie qu'il faut une intervention de l'administrateur du site pour que le contenu des pages évolue.

Objet du site

Ce site porte sur la biologie marine et plus précisèment sur l'embranchement des mollusques.
L'embranchement des mollusques qui appartient au règne animal, comprend trois principales classes : gastéropodes, bivalves & céphalopodes.

index.htm : page d'accueil & 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 ont un contenu identique dans les quatre 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 fichiers .htm : un template pour chaque page (donc quatre) et un cinquième template contenant le code commun à toutes les pages.
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 "mollusques".
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 racine du dossier "mollusques" il y aura le script "mollusques.py".

La feuille de style externe

Il serait stupide d'avoir une feuille de style interne dans chaque page.
Il faut externaliser le CSS : feuille de style externe.

Dans le dossier "static/css" créez une feuille de style nommée "style.css".

Le code du fichier "style.css" :

@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 le CSS qui traite entre autres des "media queries" : Tutoriel CSS3

Les images

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

Les templates

Ils sont toujours stockés dans le dossier templates (dossier à la racine de "mollusques").

Le template "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 commun doit être écrit une seule fois dans un template.
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 aussi la méthode url_for().

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

Le template "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 :

Site statique avec Flask

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

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

Site statique avec Flask

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

Le code "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 très succinct et se résumé à l'héritage de "commun.htm" 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".
Et oui, un moteur de template est un générateur de HTML.

Le template "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); }

Le template "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.

Le template "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 chaque chemin vers l'image.

Le script "mollusques.py"

Il doit être enregistré à la racine du répertoire.
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.

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 et sont très succints : affichage simplement d'un template.

Conclusion

Récupération des fichiers correspondant à ce site

Vous pouvez récupérer le contenu du dossier "static" sous forme d'un zip.
Dossier "mollusques/static"

Après avoir installé le fichier décompressé sur votre PC dans un nouveau dossier, vous devrez écrire les templates (dans le sous-dossier "templates") et le script ("mollusques.py") à la racine.

Testez

Ouvrez le dossier "mollusques" ; double-cliquez sur "mollusques.py".
Le terminal windows s'affiche et précise que le serveur web local tourne sur le port 5000.
Basculez sur le navigateur et tapez dans la barre d'URL : localhost:5000
Puis vous naviguez entre les pages du site en cliquant sur les liens comme n'importe quel site.

Le code HTML généré par le moteur de recherche

Sélectionnez la page "les bivalves" ; faites un clic droit et sélectionnez "inspecteur" (pour accéder aux outils de développement) ; sélectionnez l'onglet "sources" .

Un code HTML standard s'affiche ! <!DOCTYPE html> <html lang ="fr"> <head> <title>Les mollusques</title> <meta charset = 'utf-8'> <link rel = "stylesheet" href ="/static/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> <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 ... ...

J'ose espérer que vous avez compris. Les instructions dans les différents templates permettent au moteur de template "Jinja" de générer du HTML standard.

Traduction

Tutoriel Python - sommaire

Débuter en Python

Python - approfondissements

Tutoriel Python - recherche

L'auteur : Patrick Darcheville