CMS homemade, partie 1

Créer un CMS rudimentaire est une bonne occasion de comprendre le comportement des CMS en général. A partir de quelques scripts, on peut créer une méthode simple permettant d’ajouter des contenus sans plus passer par le codage de pages html.

Objectifs du CMS

Tout Cms possède sa propre logique et ses objectifs. Comme la plupart des CMS existant, celui-ci possède un but général

- Afficher des pages en html/css correct
- Pouvoir ajouter facilement images en galerie et des pièces jointes
- Être léger et compréhensible dans son usage
- Ajouter du contenu doit se faire sans devoir coder
- La navigation se crée et s’update automatiquement

De plus, le nôtre aura les caractéristiques limitatives suivantes :
- Pas de base de données
- Un seul niveau d’arborescence

Un contenu stocké sous forme de dossier

Dans ce CMS, chaque page est stockée dans le site sous la forme d’un dossier, contenant un fichier texte nommé "info.txt" qui contient le titre et le texte de la page, une illustration générale de la page nommée "icone.jpg", des images éventuelles qui seront affichées sous forme de galerie, puis le reste des pièces jointes, comme des pdf, des zip, etc.
Le contenu minimal d’un dossier est le fichier texte lui-même.
Tous les dossiers seront stockés dans un dossier général appelé "contenus".

Commencer par le graphisme

Tout commence par le code html + css (norme HTML5) d’une page type. Dans la plupart des CMS, cette page s’appelle un template. Il peut être téléchargé ici.

Le dossier, basé sur initializr, contient ceci :

- Un dossier CSS contenant des css de reset et la css "main.css" dans laquelle se trouve le code de base du template.
- Une favicon
- Un dossier img, avec l’unique image actuelle
- La page index.html, qui nous sert de gabarit
- Le dossier JS qui contient jquery et la page "main.js"
- La police libre de droit Montserrat

Cela donne ceci :

Installer sur le serveur local

Nous allons rapidement transformer ce template en machinerie à afficher des contenus. Pour cela il faut le déposer dans le dossier de travail du serveur local, dans notre cas, Mamp.

Une fois déposé, nous allons transformer le fichier .html en fichier .php pour que le serveur Apache exécute le code que nous y placerons. Il suffit pour cela de renommer. Cette opération ne provoque dans l’immédiat aucun changement dans la page.

Ajouter les fonctionnalités PHP

Ce didacticiel n’est pas orienté sur la programmation en php, aussi j’ai codé une page prête à l’emploi, de 80 lignes, qui sera le moteur central du CMS. Nous expliquerons son fonctionnement brièvement, mais encore une fois ce n’est pas le propos central, je ne rentrerais donc pas dans les détails. Le fichier est court et commenté, pour les curieux.
Télécharger le fichier et placez-le dans le dossier de notre CMS.

Nous allons pouvoir charger ce fichier au début de la page, pour que les fonctions soient disponibles dans la page en rajoutant en première ligne du fichier index.php :

<?php include("inc-fonctions.php"); ?>

La fonction include permet de copier le contenu d’un fichier dans un autre, à l’endroit où il est appellé. Cette opération est donc exactement le même que si on copiait/collait le contenu du fichier inc-fonctions.php à l’intérieur du fichier index.php.

Rôle des fonctions du fichier "inc-fonctions.php"

Le fichier contient deux fonctions.
Une fonction est un bloc de code qui est exécuté chaque fois qu’on l’appelle. Comme un majordome à qui on demande "James, un café s’il vous plait" et qui à chaque fois produit l’ensemble des gestes qui vous permettent d’avoir sur la table la tasse demandée.
Le code de la fonction contient donc le code qui doit être exécuté chaque fois que la fonction est appelée par son nom.

Ces deux fonctions sont donc :
La fonction "liste_dossiers("où")", qui renvoie la liste des dossiers présents à l’endroit spécifié par l’adresse "où", sous la forme d’une liste, un "array" en langage php.

La fonction "lit_dossier("lequel","court ou complet")", qui renvoie sous forme d’array toute l’information que contient un dossier :
- titre
- texte
- adresse du dossier
- l’illustration générale

Si "complet" est spécifié, l’array contiendra en plus :
- les images de galerie
- les vidéos, sons et autres pièces jointes triées par type.

Avec ces deux fonctions et un peu de code, nous allons pouvoir rendre notre site minimal fonctionnel.

Ajouter du contenu
Pour pouvoir tester l’utilisation des fonctions, nous devons maintenant créer un contenu, soit deux dossiers avec un peu de contenu.
Pour l’exemple, voici deux dossiers contenus dans le dossier "contenu" à télécharger ici. L’arborescence de notre cms ressemble maintenant à ceci :

Lister les dossiers présents

Maintenant que nous avons du contenu, nous allons utiliser la première fonction, "liste_dossier()" pour lister ces fameux dossiers. Pour cela, nous allons placer en dessous de l’include quelques lignes supplémentaires :

<?php
include("inc-fonctions.php");

$arbo=liste_dossiers("contenu/");
print_r($arbo);
?>

Ce code charge dans une variable du nom de $arbo le produit de la fonction liste_dossiers("contenu/"), qui est le dossier où se trouve précisement les contenus.
La fonction renvoie en fait un array, la liste d’adresse des dossiers trouvés.
La commande "print_r($arbo) va nous permettre de visualiser le contenu de cet array.

Une fois la page rechargée à travers le serveur local, on peut voir dans le code source de la page le résultat suivant :

Print_r nous montre que l’array contient deux résultats, l’adresse des deux dossiers contenus dans le dossier "contenu". Le dossier lui-même est d’ailleurs dans l’adresse.

C’est vers ces adresses que pointeront les liens de la navigation, mais nous voulons lister dans la navigation les titres des pages, pas simplement le nom du dossier. Il faut donc maintenant lire le contenu de chacun des dossiers pour rechercher les informations utiles, ici le nom de la page. C’est là que la deuxième fonction intervient.

Nous allons remplacer le code dans la navigation (le tag "nav") par celui-ci :

           <nav class="colonne demi slogan">
               <ul>
<?php
foreach($arbo as $dossier){
   $info=lit_dossier($dossier, 'court');
   echo "<li><a href='?page=".$dossier."'>".$info['titre']."</a></li>";
}
?>
               </ul>
           </nav>

Ce code est un peut plus technique mais il est court.
- foreach() est une fonction qui permet de passer en revue une liste (un array), élément par élément. C’est ce qu’on appelle une boucle, qui va se répéter autant de fois que quelque chose se trouve à l’intérieur. Dans notre cas, elle se répétera deux fois pour le moment.

A l’intérieur de la boucle, on appelle la fonction "lit_dossier($dossier, ’court’)" et on stocke le résultat de son travail dans une variable du nom de $info.
A ce stade, $info contient le titre, le texte et l’icone éventuelle de la page. Il ne nous reste plus qu’à afficher les informations qui nous intéressent : le titre, contenu dans $info[’titre’].

$info est une array d’un type spécial, appelé "array associative", avec des clés (par exemple ’titre’) associées à des valeurs (par exemple "bienvenue !"). Voir l’article sur les arrays sur le site de php francophone.

La boucle affiche donc un élément html li contenant un lien pour chaque dossier trouvé.

Les liens sont dans le désordre, mais il suffit de renommer les dossiers "1-home" et "2-galerie" pour que ce soit réglé.

La navigation est donc créée automatiquement, mais il ne se passe rien quand on clique sur les liens.
En fait, si, quelque chose change : l’url dans la barre de navigation. Chaque lien se termine par un truc comme " ?page=contenu/home" Et ça, en fait c’est le début de la magie de php : on va pouvoir récupérer cette information et afficher le contenu demandé par le clic grâce à ce qu’on appellera "l’analyse de la requête en GET".

Il est temps ici d’écrire la deuxième partie de ce didacticiel.