Un site web avec Flask

Dans ce chapitre nous allons réaliser un site web statique avec Flask-Python. Il s'agit d'un site statique : aucune base de données est n'adossée ; donc le contenu des pages est identique pour tous les visiteurs.

une feuille de style commune aux différents templates
manipulation d'images
création d'un sous-dossier "static" pour stocker images et feuilles de style.

Objet du site

Ce site porte sur la biologie aquatique 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 et céphalopodes.

index.htm : page d'accueil
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 ...

5 fichiers d'extension .htm (un template pour chaque page) 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 sous-dossiers : "static" & "templates".
Dans le répertoire "static" créez deux sous-dossiers : "css" & "images".

À la racine du dossier "mollusques" enregistrez script "mollusques.py".

La feuille de style externe

Il serait stupide d'avoir une feuille de style dans chaque page. Il faut externaliser le CSS : créer une 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; }
}

Bonne révision sur le "responsive design" (adapter la présentation à tous les écrans) !

media-queries

si l'écran 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 l'écran 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 bien sûr 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 (plus de 1000px de large) :

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 (moins de 1000px de large) :

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.

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 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 ... 
<br>Chez les bivalves la fécondation est externe. Un Bénitier (le plus gros des mollusques) ...
<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 ...
<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 %}

Le script "mollusques.py"

Il doit être enregistré à la racine du répertoire "mollusques".
Il est ici fort simple car il n'y a pas à proprement parlé de traitement ...

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()

N'oubliez pas d'importer la méthode url_for.
Les codes des différentes routes se ressemblent et sont très succints : rediriger vers un template.

À vous de bosser !

Récupérez les 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 extrait les fichiers vous les enregistrez au bon emplacement dans le dossier "mollusques".
Il ne vous reste plus qu'à produire le script et les templates.

Tests

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 différents liens.

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 ... ...

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