Un site web statique 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 n'est n'adossée). Donc le contenu des pages est identique pour tous les visiteurs.

une feuille de style commune aux différents templates
création d'un sous-dossier "static" pour stocker images et feuilles de style
manipulation d'images
hiérarchie des templates et notion d'héritage
génération dynamique d'URL
ajouts de commentaires dans les templates

Vous serez surpris par la "légèreté" des templates du fait de l'héritage.

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

Créez un nouveau dossier à la racine de C: et nommez le "appli_web_mollusques.

Les pages web

index.htm : page d'accueil
gasteropodes.htm
bivales.htm
cephalopodes.htm

HEADER : en-tête de page ; contenu identique dans toutes les pages
NAV : zone de navigation ; contenu identiques dans toutes les pages
SECTION ; contenu spécifique à chaque page

Arborescence du dossier "appli_web_mollusques"

La structure de ce répertoire devient complexe.

mollusques.py
templates : 
	parent.htm	
	index.htm
	bivalves.htm
	cephalopodes.htm
	gasteropodes.htm
static : 
	css :
		style.css 
	images :
		bigorneau.jpg
		...

Deux sous-dossiers à la racine de "appli_web_mollusques" : templates & static
le répertoire "static" contient à son tour les dossiers : css & images

Étude des différents fichiers de cette application (sauf les templates)

La feuille de style externe

Il serait stupide d'avoir une feuille de style dans chaque template. Il faut externaliser le CSS : créer une feuille de style externe et la ranger dans le sous-dossier "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 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 "flotte" à gauche et la zone SECTION "flotte" à 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 des effets visuels :
img.gauche:hover {transform : scale(2); } : les images de petite taille (classe "gauche") sont agrandies sur survol.

Le script "mollusques.py" (composante 'vues')

Il s'agit de la composante "Vues" de l'application.
Ce programme est bien sûr enregistré à la racine du répertoire "appli_web_mollusques".
Le script est simple il n'y a pas véritablement de traitement ; chaque vue se contente d'afficher un template.

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

Importations : n'oubliez pas d'importer la fonction url_for() de flask.
La fonction url_for() génère dynamiquement une URL.
Elle évite d’écrire directement les chemins relatifs vers les images en particulier ; chemins relatifs qui peuvent être complexes.

Les templates

Il y a désormais une hiérarchie des templates.
Les templates "index.htm, bivalves.htm, cephalopodes.htm, gasteropodes.htm" héritent du template (bien nommé) "parent.htm".
On dit que ces quatre templates sont "enfants" de "parent.htm".

Le template "parent.htm"

Ce document comprend le code commun à toutes les pages du site.

Le code (à dérouler)

<!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 %}
	{# code fourni par un template 'enfant' #}
	{% endblock %}
</section>

link rel = "stylesheet" href ="{{url_for('static', filename ='css/style.css')}}" : génèration de l'URL : "../static/css/style.css"
a href = "/">Accueil : chaque valeur de href correspond à une route
{% block content %} : la balise "block content" indique que du code sera fourni par un template "enfant"
{% endblock %} : la balise "block content" est une balise double, elle doit être fermée
{# code fourni par un template 'enfant' #} : un commentaire dans un template flask donc avec syntaxe djinja

Le template "index.htm"

C'est la page d'accueil du site ; il est "enfant" par rapport à "parent.htm".

Le code "index.htm" (à dérouler)

{% extends "parent.htm" %}
{# héritage de parent.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 %}

{% extends "parent.htm" %} : "index.htm" hérite de "parent.htm"
{# héritage de parent.htm #} : un commentaire avec la syntaxe djinja
{% block content %} : début du code spécifique à ce template
img class ='grand' src = "{{url_for('static', filename ='images/mollusques.jpg')}}" : génèration du chemin relatif vers l'image
{% endblock %} : l'élément "block content" doit être fermé

Le template "gasteropodes.htm"

Ce template est aussi un "enfant" de "parent.htm".

Le code (à dérouler)

{% extends "parent.htm" %}
{# héritage de parent.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 %}

{% extends "parent.htm" %} : héritage du fichier "parent.htm" pour le contenu des divisions HEADER & NAV
toujours la balise "block content" pour indiquer le début du code spécifique à ce template Ne pas oublier de fermer cette balise double
toujours utilisation de la méthode url_for() pour générer les différents chemins relatifs vers les images

Le template "bivalves.htm"

Le code (à dérouler)

{% extends "parent.htm" %}
{# héritage de parent.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 %}

Le template "cephalopodes.htm"

Le code (à dérouler)

{% extends "parent.htm" %}
{# héritage de parent.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 rendu de cette application

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 d'accueil sur un grand écran (plus de 1000px de large)

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)

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

À vous de "bosser" !

Pour vous familiariser avec toutes les nouveautés syntaxiques abordées dans ce chapitre, je vous invite à recréer ce site web sur votre PC puis à le tester en local.
à cette fin, je vous commmunique la version compressée du dossier "static" (donc les images et la feuille de style).
Version compressée du dossier "static"

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 statique avec Flask

Le site

Les pages web

Arborescence du dossier "appli_web_mollusques"

Étude des différents fichiers de cette application (sauf les templates)

La feuille de style externe

Le code du fichier "style.css"

Le script "mollusques.py" (composante 'vues')

Les templates

Le template "parent.htm"

Le code (à dérouler)

Le template "index.htm"

Le code "index.htm" (à dérouler)

Le template "gasteropodes.htm"

Le code (à dérouler)

Le template "bivalves.htm"

Le code (à dérouler)

Le template "cephalopodes.htm"

Le code (à dérouler)

Le rendu de cette application

Aperçu de la page d'accueil sur un grand écran (plus de 1000px de large)

Aperçu de la page sur un petit écran (moins de 1000px de large)

À vous de "bosser" !