Je vais ici vous présenter l’exemple de site codé basique codé en PHP, qui fait partie de mon guide sur le développement d’un site basique.
Nous partons du code déjà présenté ici: https://github.com/AlexandreBaumann/projets-tutos/tree/main/tuto-html-css . Nous voulons sortir les éléments récurrents, le head, header et footer, dans des fichiers dédiés d’une part et créer des pages articles et contact d’autre part. On finira donc avec index.php, contact.php, plusieurs pages d’articles, head.php, header.php et footer.php. Mais avant cela, il faut lancer le serveur.
Installer MAMP
En gros le principe est le suivant: le code PHP est un code backend, c’est-à-dire qu’il a besoin d’être traité par un serveur. Le navigateur ne le lit pas, contrairement à javascript. Il y a plusieurs logiciels permettant de créer un serveur en quelques clics: MAMP, XAMP, WAMP … J’ai choisi MAMP, qui est vraiment facile à utiliser et intuitif.
Vous l’installez, vous lancer le serveur, vous placez vos fichiers dans le répertoire « htdocs » [rq: j’ai préféré le mettre dans un sous-dossier « site1 », vu que je compte en faire plusieurs, mais ça ne change rien], vous tapez localhost/ dans votre navigateur préféré puis votre site s’affiche (ou les sous-répertoires dedans, comme ce que j’ai fait).
Les fichiers récurrents: head, header et footer
C’est le plus simple, on prend le code des head, header et footer, et on les met dans des fichiers extérieurs. Ensuite, dans la page html, on les remplace par: include ‘header.php’;. [rq: on peut même aller plus loin et inclure tout le haut du code dans header.php et tout le bas dans footer.php, mais ça me semblait un peu laid pour cet exemple] On obtient un rendu strictement équivalent, mais c’est beaucoup plus pratique pour créer plusieurs pages.
Notez que la balise « title » est un peu spéciale. En effet, elle devra être modifiée pour chaque page ! En outre, nous aimerions utiliser le titre dans le texte, pour créer le H1. Nous allons donc imaginer une variable « $title » comme s’afficher entre les balises de titres : « <?php echo $title; ?> » Une variable est une sorte de boite dans lesquelles on va ranger une valeur. Ici, elle n’est pas définie, elle est vide. Il faudra la définir avant d’appeler le fichier head.php avec include, comme ci-contre.
<?php
$title = "Monsupertitre";
include 'head.php';
?>[Parenthèse: au premier essai, les images étaient cassées. C’est parce que j’avais utilisé comme chemin d’accès /image.jpg. En effet, le navigateur va alors chercher à la racine du serveur, pas dans le répertoire où se trouve le document. Je l’ai réparé en enlevant le slash : image.jpg.]
Création d’autres pages
On va créer plusieurs autres pages. Tout d’abord, on va se faire un template, qu’on va dupliquer. Pour cela, rien de plus simple: on récupère ce bloc de code ci-contre, qui va automatiquement intégrer la structure de la page. On peut directement créer le contenu qu’on veut ensuite !
Notez qu’on va insérer procéduralement le H1 de la page en allant chercher le titre qu’on aura renseigné dans le head (echo est une fonction qui affiche un texte).
Pour le contenu, je ne me suis pas cassé la tête, j’ai repris celui de mon blog : https://www.discoverthegreentech.com/ . On a donc 6 articles de blog. Tout d’abord, on va la styliser un peu en faisant une division « #contenu-articles » qui englobe le reste du contenu de l’article. Comme pour la page d’accueil, on ne veut pas que l’affichage dépasse 1000px de large. On veut aussi garder des marges sur les côtés.
Pour la page contact, on va mettre un petit formulaire (inactif pour l’instant).
<!DOCTYPE html>
<html lang="en">
<head>
<?php
$title = "";
include 'head.php';
?>
</head>
<body>
<header>
<?php
include 'header.php';
?>
</header>
<main>
<div id="contenu-articles">
<h1> <?php echo $title ?> </h1>
</div>
</main>
<footer>
<?php
include 'footer.php';
?>
</footer>
</body>
</html>L’injection procédurale des cartes
Maintenant, on va passer à la partie un peu difficile: l’injection procédurale des cartes. On veut que les articles s’affichent procéduralement en page d’accueil: pour chaque article, on va avoir une fonction qui insérera l’image, le titre et un petit texte (comme ce qui était affiché dans la page HTML d’exemple). Pour cela, on va utiliser des tableaux. Cela permet de stocker plusieurs variables portant sur un même objet. [en « vrai » on utiliserait, pour cela, une base de données, mais je préfère réserver cela pour la partie suivante]
Pour cela, on va créer un ficher boucle.php, qui va contenir la fonction de type foreach appelée « boucle » ci-contre.
C’est un type de fonction itérative, qui se répètent tant que leur condition est remplie. Il y en a d’autres: les fonction switch parcourent une liste de possibilité, les fonctions « if … else » sont les plus courantes, mais pour parcourir un tableau, on utilise plutôt foreach (« pour chaque »).
Voilà sa traduction: pour chaque élément ($item) du tableau entré en paramètre ($items) [les noms sont arbitraires, on pourrait les appeler plop et carabistouille c’est pareil], écrire (echo) les éléments entre ‘ ‘. Parmi ceux-ci, il y aura notamment les propriétés « image », « titre », « url » [le chemin, pour rendre la carte cliquable et parcourir le site] et « extrait » de l’élément.
Ensuite, on va créer ce tableau, qu’on va appeler $articles. je vous mets le schéma, avec comme exemple notre article sur Seabased.
Le résultat final :
Bon, le problème est évident: la longueur variable des titres et des extraits fout le bordel. Pour le régler, il va falloir modifier la fonction boucle.
On aimerait limiter la longueur et ajouter « … » s’il est trop long.
function boucle($items) {
foreach ($items as $item) {
echo '
<div class="article">
<a href="' . $item['url'] . '">
<img src="' . $item['image'] . '" alt="' . $item['titre'] . '"> </a>
<div>
<h3><a href="' . $item['url'] . '">' . $item['titre'] . '</a></h3>
<p>' . $item['extrait'] . '</p>
</div>
</div>
';
}
}
------
$articles = [
[
'image' => 'seabased.jpg',
'titre' => 'Seabased: énergie houlomotrice',
'extrait' => 'Seabased est une entreprise suédoise fondée en 2001 commercialisant des fermes d’énergie houlomotrices.'
'url' => 'seabased.php'
],
];On va, pour cela, lui adjoindre la fonction mb_substr() pour tronquer les chaînes de caractères à une longueur maximale. Elle prend en paramètre, dans l’ordre, la chaîne d’origine, le point de départ (« offset ») et la longueur de la sous-chaîne à extraire.
La longueur de la sous-chaine va être définie dans une variable en début de fichier, vu qu’elle va être appelée plusieurs fois [$longMaxTitre et $longMaxExtrait ]. Ensuite, on doit retravailler les titres et extraits. Le résultat va être les variables $titreCourt et $extraitCourt.
Pour chacune d’elles, on applique la fonction mb_substr(), avec en paramètre la chaine initiale (ex: $item[‘titre’]), le point de départ (le début, donc 0) et la longueur maximale (ex: $longMaxTitre).
On veut aussi rajouter les « … ». On va le faire avec une simple condition « if », selon laquelle si la longueur de la chaine initiale est supérieure à la longueur maximale, on ajoute « … ».
Notez l’utilisation d’un opérateur un peu particulier : « .= ». Cela permet de concaténer deux chaines de caractères (+= ne marcherait qu’avec des nombres). C’est l’équivalent d’écrire « $extraitCourt = $extraitCourt = $extraitCourt . ‘…’;« . Voyez que c’est moins pratique.
Voilà le résultat :
function boucle($items) {
$longMaxTitre = 20; // Longueur maximale du titre
$longMaxExtrait = 100; // Longueur maximale de l'extrait
foreach ($items as $item) {
$titreCourt = mb_substr($item['titre'], 0, $longMaxTitre);
if (mb_strlen($item['titre']) > $longMaxTitre) {
$titreCourt .= '...';
}
$extraitCourt = mb_substr($item['extrait'], 0, $longMaxExtrait);
if (mb_strlen($item['extrait']) > $longMaxExtrait) {
$extraitCourt .= '...';
}
echo '
<div class="article">
<a href="' . $item['url'] . '">
<img src="' . $item['image'] . '" alt="' . $titreCourt . '">
</a>
<div>
<h3><a href="' . $item['url'] . '">' . $titreCourt . '</a></h3>
<p>' . $extraitCourt . '</p>
</div>
</div>
';
}
}La page contact
On va faire un petit formulaire basique, avec quelques champs, un peu de style, et voilà (je détaillerai le code des formulaires en général ailleurs). On va juste rappeler la principale ligne : « <form action= »gestion_contact.php » method= »post » id= »formulaire »> »
L’url définie dans action est la page qui va gérer l’envoi de données. La « method » décrit le type de requête qui va être expédiée. Il y en a de plusieurs types, notamment GET. J’y dédierai un article spécifique.
Ensuite, on va faire la page de gestion des données. Pour la démonstration, on va juste attraper les données envoyées, les stocker dans des variables, puis les afficher (voir code ci-contre).
Notez que ce formulaire n’est connecté à aucune base de donnée, les informations ne sont pas stockées. Néanmoins, vous voyez déjà qu’on peut les appréhender à ce niveau.
<?php
// Récupérer les données du formulaire
$prenom = $_POST['prenom'];
$nom = $_POST['nom'];
$email = $_POST['email'];
$message = $_POST['message'];
// Stocker les données dans un tableau associatif
$contact_info = [
'prenom' => $prenom,
'nom' => $nom,
'email' => $email,
'message' => $message,
];
// Afficher les données pour vérification (à des fins de débogage)
echo '<pre>';
print_r($contact_info);
echo '</pre>';
?>
Épilogue
A ce stade, il manque surtout à faire les filtres. Néanmoins, cela nécessite du javascript, nous le verrons plus tard.
Voilà, vous avez déjà une ébauche de ce à quoi ressemble un site internet en PHP. Nous avons déjà vu beaucoup de choses et rencontré plusieurs difficultés. Surtout, on voit déjà apparaître une « dette technique », c’est-à-dire des problèmes qui devront être résolus et dont la résolution sera de plus en plus difficile à mesure que le projet avance:
- La gestion des fichiers est clairement chaotique (voir ci-contre): les éléments, images, articles, pages et styles sont mélangés tous ensemble. C’est pratique pour faire des références sans se prendre la tête, mais c’est horrible pour naviguer. Typiquement, il faut séparer ces différents ensembles.
- La méthode de stockage des articles est évidemment temporaire: il faudra utiliser une base de données.
Entre parenthèses, on note que l’intégration des pages prend un certain temps: il faut baliser tout proprement, trouver l’adresse de l’image, sans se tromper, etc. On sent bien l’utilité des CMS (content management system) comme WordPress, qui automatisent beaucoup de choses et facilitent le balisage.
