Sur un site avec plusieurs pages, on a des éléments communs (bannière, menu, structure, métadonnées, etc.), et des éléments qui changent de page en page.
Faire un fichier HTML distinct pour chaque page, en recopiant le contenu commun, est une violation du principe DRY (don't repeat yourself)
toute modification des éléments communs est fastidieuse et comporte un grand risque d'introduire des erreurs et incohérences.
Ce qu'il faut faire : écrire chaque morceau une et une seul fois
Pour cela, il faut séparer les parties spécifiques à chaque page (le contenu) des parties communes (le squelette des pages)
Pour cela, on s'est servi de PHP, un langage fait pour écrire des scripts qui sont exécutés par le serveur web pour générer du HTML
Principe de base de notre architecture : chaque « page » se contente de mettre des informations dans des variables (informations qui sont spécifiques à cette page) puis fait appel au script squelette, qui affiche le squelette HTML en comblant les trous avec le contenu des variables
Pour une illustration très simple, voir le corrigé de l'exercice sur le Royaume-Uni
Après plusieurs améliorations sur le site des poèmes, on était arrivé à cette version (archive du code), dans laquelle on avait modifié l'organisation des répertoires.
Voici le détail de la structure des répertoires de la dernière version du site des poèmes :
poemes/ |-- index.php (la page d'accueil) |-- automne.php (page de « Chanson d'automne ») |-- boheme.php (page de « Ma Bohème ») |-- bois.php (page de « Dans les bois ») |-- correspondances.php (page de « Correspondances ») |-- screen.css (feuille de style) |-- images/ (images utilisées dans le HTML) | |-- baudelaire.jpg | |-- nerval.jpg | |-- rimbaud.jpg | `-- verlaine.jpg `-- squel/ (les squelettes et leurs éléments) |-- defaut.squel.php (le squelette par défaut) |-- poeme.squel.php (le squelette d'une page de poème) `-- fragments/ (les morceaux communs à plusieurs squelettes) |-- debut.frg.php (le haut de page des squelettes) `-- fin.frg.php (le bas de page des squelettes)
include) un squelette après avoir rempli les variables nécessairesinclude)On voit que c'est déjà assez complexe, et on n'a que cinq pages très simples.
Pour un vrai site, il y aura plus d'images, plus de fichiers CSS, plein d'images utilisées dans le CSS, des polices, des fichiers JavaScript… Et encore plus de confusion entre les pages, les squelettes et les fragments
Il est vital de bien ranger ses répertoires ! Et pour ça il faut s'y entraîner dès maintenant.
Dans l'exemple précédent, un seul fichier CSS ⇒ tout va bien
En pratique c'est assez rare même pour de petits sites, et les fichiers CSS utilisent eux-mêmes d'autres fichiers
on va mettre tout ça dans un répertoire skin (ou autre…) consacré à la présentation (maquette, décoration…) du site
Une façon de voir les choses est que si on enlève ce répertoire, le site fonctionne toujours et le contenu est toujours accessible.
poemes/ |-- index.php |-- automne.php |-- boheme.php |-- bois.php |-- correspondances.php |-- skin/ (ressources de présentation du site) | |-- screen.css (feuille de style pour écran) | `-- print.css (feuille de style pour impression) |-- images/ (images utilisées dans le HTML) `-- squel/ (les squelettes et leurs éléments)
Rappel : certaines images sont du contenu et vont dans le HTML, d'autres sont plutôt de la décoration et sont appelées via CSS
Le choix n'est pas toujours très tranché ; au final c'est vous qui décidez
… mais il est en tout cas important de bien ranger les images en fonction de leur utilisation
On aura donc un répertoire images dans le répertoire skin
poemes/ |-- index.php |-- automne.php |-- boheme.php |-- bois.php |-- correspondances.php |-- skin/ (ressources de présentation du site) | |-- screen.css (feuille de style pour écran) | |-- print.css (feuille de style pour impression) | `-- images/ (images utilisées dans le CSS) | |-- fond.jpg (image de fond) | `-- icone.png (une icône de décoration) |-- images/ (images utilisées dans le HTML) `-- squel/ (les squelettes et leurs éléments)
Une conséquence importante : dans les fichiers CSS, on saura toujours où chercher les images : background: url("images/fond.jpg"); (jamais besoin de réfléchir au chemin relatif à prendre pour atteindre l'image)
boheme.php ressemblait à ça :
<?php
$titre = "Ma bohème";
$auteur = "Arthur Rimbaud";
$image = "rimbaud.jpg";
$infos_publication = 'publié en octobre 1870';
$texte = "
<p>Je m’en allais, les poings dans mes poches crevées ;<br />
Mon paletot aussi devenait idéal ;<br />
J’allais sous le ciel, Muse ! et j’étais ton féal ;<br />
Oh ! là là ! que d’amours splendides j’ai rêvées !</p>
<p>Mon unique culotte avait un large trou.<br />
— Petit Poucet rêveur, j’égrenais dans ma course<br />
Des rimes. Mon auberge était à la Grande-Ourse ;<br />
— Mes étoiles au ciel avaient un doux frou-frou.</p>
<p>Et je les écoutais, assis au bord des routes,<br />
Ces bons soirs de septembre où je sentais des gouttes<br />
De rosée à mon front, comme un vin de vigueur ;</p>
<p>Où, rimant au milieu des ombres fantastiques,<br />
Comme des lyres, je tirais les élastiques<br />
De mes souliers blessés, un pied près de mon cœur !</p>
";
include("squel/poeme.squel.php");
?>
On a bien séparé le squelette et le contenu qui varie de page en page
Une solution est d'écrire ces fragments de HTML dans des fichiers séparés et d'en récupérer le contenu depuis PHP avec la fonction file_get_contents, qui prend le contenu d'un fichier et le met dans une variable
boheme.frg.html ne contient que le texte du poème :
<p>Je m’en allais, les poings dans mes poches crevées ;<br />
Mon paletot aussi devenait idéal ;<br />
J’allais sous le ciel, Muse ! et j’étais ton féal ;<br />
Oh ! là là ! que d’amours splendides j’ai rêvées !</p>
<p>Mon unique culotte avait un large trou.<br />
— Petit Poucet rêveur, j’égrenais dans ma course<br />
Des rimes. Mon auberge était à la Grande-Ourse ;<br />
— Mes étoiles au ciel avaient un doux frou-frou.</p>
<p>Et je les écoutais, assis au bord des routes,<br />
Ces bons soirs de septembre où je sentais des gouttes<br />
De rosée à mon front, comme un vin de vigueur ;</p>
<p>Où, rimant au milieu des ombres fantastiques,<br />
Comme des lyres, je tirais les élastiques<br />
De mes souliers blessés, un pied près de mon cœur !</p>
boheme.php, on peut remplir la variable $texte simplement avec
$texte = file_get_contents("boheme.frg.html");
Ça revient exactement au même que précédemment, mais le HTML est plus facile à manipuler, et notre page PHP ne contient quasiment plus que des informations, pas directement du contenu.
Si vous avez du mal avec l'architecture, vous pouvez ignorer ce slide et le précédent, et remplir les variables directement, ça marche aussi très bien.
Si on utilise la méthode des fragments HTML, il faudra un répertoire de plus pour contenir les fragments de contenu.
poemes/ |-- index.php (la page d'accueil) |-- automne.php (page de « Chanson d'automne ») |-- boheme.php (page de « Ma Bohème ») |-- bois.php (page de « Dans les bois ») |-- correspondances.php (page de « Correspondances ») |-- fragments/ (les fragments HTML, utilisés pour remplir les variables) | |-- automne.frg.html (le texte de « Chanson d'automne ») | |-- boheme.frg.html (le texte de « Ma Bohème ») | |-- bois.frg.html (le texte de « Dans les bois ») | `-- correspondances.frg.html (le texte de « Correspondances ») |-- images/ (images utilisées dans le HTML) | |-- baudelaire.jpg | |-- nerval.jpg | |-- rimbaud.jpg | `-- verlaine.jpg |-- skin/ (ressources de présentation du site) | |-- screen.css (feuille de style pour écran) | |-- print.css (feuille de style pour impression) | `-- images/ (images utilisées dans le CSS) | `-- PD-icon.png (icône « domaine public ») `-- squel/ (les squelettes et leurs éléments) |-- defaut.squel.php (le squelette par défaut) |-- poeme.squel.php (le squelette d'une page de poème) `-- fragments/ (les morceaux communs à plusieurs squelettes) |-- debut.frg.php (le haut de page des squelettes) `-- fin.frg.php (le bas de page des squelettes)
On a encore mieux séparé la structure du contenu, et on a bien organisé nos fichiers
Pour avoir une vraie architecture de site, il faudrait que le serveur web n'appelle que la page index.php, en lui
fournissant l'URL demandée par l'internaute ; le script générerait alors la page du poème demandé en fonction de l'URL
on peut alors utiliser une base de données et générer les pages à la volée
Sera vu en parcours dev