Mini-blog : éditeur enrichi, personnalisation et installation complète

Dans notre précédent article consacré au mini-blog PHP/MySQL, nous avions enrichi notre première version avec deux fonctionnalités importantes : la gestion des images à la une et l’organisation des publications par catégories.

Le projet commençait ainsi à disposer d’une véritable structure éditoriale.

Nous avions toutefois annoncé une dernière étape avant de considérer notre mini-blog comme réellement abouti : améliorer son apparence générale, proposer un véritable éditeur de texte et rendre le projet facilement installable sur n’importe quel hébergement PHP/MySQL.

C’est désormais chose faite !

Une interface entièrement modernisée

Au fil des précédentes versions, de nouvelles fonctionnalités ont été ajoutées sans modifier profondément l’apparence du projet.

L’objectif de cette mise à jour était donc d’obtenir une interface plus cohérente entre la partie publique et l’administration.

La page d’accueil bénéficie désormais d’une présentation plus moderne avec des espacements mieux équilibrés, des cartes d’articles plus lisibles et une meilleure hiérarchisation des informations.

Les catégories prennent la forme de filtres facilement identifiables et les images occupent davantage de place afin de donner au blog un aspect plus éditorial.

L’ensemble reste bien entendu responsive, afin de conserver une consultation confortable sur ordinateur, tablette et smartphone.

L’administration a également été revue dans le même esprit.

Le tableau de bord, la gestion des articles, les catégories, les paramètres et les formulaires de rédaction utilisent maintenant une même identité graphique.

Nous obtenons ainsi un mini CMS beaucoup plus agréable à utiliser au quotidien.

Une véritable image à la une sur les articles

Nous avions déjà ajouté la possibilité d’associer une image à chaque publication.

Elle était utilisée dans la liste des articles, mais son intégration sur la page complète pouvait encore être améliorée.

Dans cette nouvelle version, lorsqu’une image est associée à une publication, celle-ci est affichée en grand au-dessus du contenu.

L’objectif est de reproduire le fonctionnement que l’on retrouve aujourd’hui sur la majorité des blogs et magazines en ligne.

Lors de la modification d’une publication, l’administration affiche également l’image actuellement utilisée. Le rédacteur peut alors choisir de la conserver, de la remplacer ou de la supprimer.

Un nouvel éditeur de texte enrichi

C’était probablement l’une des limitations les plus importantes des premières versions.

Jusqu’à présent, la rédaction d’un article reposait essentiellement sur un simple champ textarea.

Cela fonctionne parfaitement pour écrire quelques paragraphes, mais devient rapidement contraignant lorsque l’on souhaite mettre en forme un véritable article.

Nous avons donc développé un éditeur de texte enrichi directement intégré au mini-blog. Aucune plateforme externe n’est nécessaire et aucune bibliothèque lourde n’a besoin d’être installée.

Depuis la barre d’outils, le rédacteur peut maintenant modifier la mise en forme de son article : gras, italique, souligné, texte barré, taille du texte, police de caractères, couleur, alignement à gauche ou à droite, centrage, justification, listes, titres, citations ou encore liens. Pour un blog consacré à l’informatique, nous avons également ajouté la possibilité d’insérer facilement des blocs de code.

Il devient donc possible de rédiger un tutoriel complet directement depuis l’administration sans devoir écrire manuellement les balises HTML.

Des articles existants toujours compatibles

Changer d’éditeur ne devait évidemment pas rendre inutilisables les publications créées avec les premières versions. Le système conserve donc la compatibilité avec les anciens articles enregistrés sous forme de texte simple.

Le contenu peut être récupéré et repris dans le nouvel éditeur sans nécessiter de migration manuelle de la base de données. Cette compatibilité permet de mettre à jour un site existant beaucoup plus facilement.

Sécuriser le HTML produit par l’éditeur

Autoriser du contenu HTML dans un article nécessite cependant une précaution importante. Il ne serait pas prudent d’enregistrer puis d’afficher directement n’importe quel code envoyé depuis le formulaire.

Le contenu passe donc par un système de nettoyage avant son enregistrement. Seules les balises nécessaires à la rédaction sont conservées.

Le principe est de permettre la mise en forme voulue par le rédacteur tout en supprimant les éléments potentiellement dangereux, notamment les scripts ou certains attributs HTML indésirables.

Il s’agit d’une différence importante par rapport à notre première version, dans laquelle tout le contenu était systématiquement affiché avec htmlspecialchars(). L’éditeur enrichi nécessite désormais de trouver un équilibre entre possibilités de mise en forme et sécurité.

Une nouvelle rubrique « Paramètres »

Autre nouveauté importante : les informations générales du blog ne sont plus directement inscrites dans plusieurs fichiers PHP. Une nouvelle page Paramètres est accessible depuis l’administration. Elle permet notamment de définir le nom du site et sa description. Ces informations sont ensuite utilisées automatiquement dans l’interface publique et dans l’administration.

Cela signifie qu’une personne qui récupère notre projet n’a plus besoin de rechercher dans le code chaque occurrence de « Mini Blog » pour personnaliser son installation. Le projet devient ainsi beaucoup plus facilement réutilisable.

Gestion des balises META

La page Paramètres permet également d’agir sur plusieurs informations destinées aux moteurs de recherche. On peut notamment définir une description générale du site, les mots-clés, l’auteur ainsi que les directives destinées aux robots d’indexation.

Ces informations sont intégrées automatiquement dans la partie <head> des pages. Pour une page d’article, une description spécifique peut également être générée à partir du contenu de la publication.

Nous avons aussi prévu les principales informations Open Graph, utilisées notamment lorsque l’adresse d’une page est partagée sur certains réseaux sociaux ou services de messagerie. Il ne s’agit évidemment pas d’un système SEO aussi poussé que celui d’un CMS spécialisé, mais ces fonctions couvrent déjà les besoins d’un petit blog personnel ou associatif.

Personnaliser l’icône du site

Nous sommes allés un peu plus loin dans la personnalisation. Dans la page Paramètres, une section consacrée à l’identité visuelle permet maintenant de sélectionner l’icône représentant le site.

Plutôt que d’imposer définitivement notre symbole représentant du code, plusieurs icônes provenant d’une bibliothèque sont proposées. On retrouve par exemple des symboles correspondant au développement, au terminal, aux ordinateurs, aux processeurs, aux serveurs, aux bases de données, au cloud, à la sécurité ou encore à Git.

Un blog consacré au développement pourra ainsi utiliser une icône de code tandis qu’un site parlant principalement de réseaux pourra sélectionner une représentation plus adaptée. Si vous souhaitez utiliser ce projet pour un autre sujet que l’informatique, les catégories d’icônes et le texte est modifiable dans le code.

Choisir la couleur de l’icône

L’utilisateur peut également modifier directement la couleur d’arrière-plan de l’icône. Un sélecteur de couleur permet de choisir la teinte désirée sans toucher au CSS. Un aperçu est affiché directement dans les paramètres afin de visualiser le résultat avant même d’enregistrer les modifications.

Cette personnalisation est ensuite utilisée sur la partie publique, dans l’administration et sur la page de connexion.

Une administration plus pratique

La modernisation de l’administration ne se limite pas à son apparence. Le tableau de bord présente maintenant rapidement les informations principales du blog, comme le nombre d’articles et de catégories. Des raccourcis donnent accès aux fonctions les plus utilisées.

Une rubrique Mon compte permet également à l’administrateur de modifier ses informations de connexion sans avoir à intervenir directement dans la base MySQL.

Quelques améliorations de sécurité

Cette refonte était également l’occasion de revoir certains comportements hérités du projet initial. Les suppressions d’articles et de catégories ne reposent plus simplement sur une URL contenant un identifiant.

Elles utilisent maintenant des requêtes POST accompagnées d’un jeton CSRF. Ce mécanisme réduit le risque qu’une action d’administration soit déclenchée depuis une page extérieure à l’insu de l’utilisateur connecté.

Le dossier consacré aux images téléversées bénéficie également d’une configuration empêchant l’exécution directe de scripts PHP. Nous conservons naturellement les contrôles déjà mis en place dans l’article précédent : vérification du type MIME réel des images, limitation de leur taille et génération d’un nom de fichier aléatoire.

Un projet désormais installable sur un nouvel hébergement

Jusqu’ici, notre mini-blog était surtout présenté comme un projet pédagogique que nous faisions évoluer étape par étape. Pour cette dernière version, nous avons voulu aller plus loin en fournissant une archive réellement utilisable par quelqu’un qui découvre le projet aujourd’hui.

Le ZIP contient donc maintenant le site complet ainsi qu’un fichier database.sql. Ce fichier permet de créer toute la structure nécessaire : utilisateurs, articles, catégories et paramètres.

Il n’est donc plus nécessaire d’installer successivement les différentes versions présentées dans nos articles précédents. Une nouvelle installation peut directement partir de cette édition complète.

Installer le mini-blog

L’installation reste volontairement simple. Il suffit de créer une base de données MySQL depuis son hébergeur, d’importer le fichier database.sql avec un outil comme phpMyAdmin, puis d’indiquer les informations de connexion à la base dans le fichier de configuration du projet. Les fichiers du mini-blog peuvent ensuite être envoyés sur le serveur par FTP ou depuis le gestionnaire de fichiers de l’hébergeur.

Une fois le site en ligne, il suffit de se connecter à l’administration et de modifier immédiatement le compte administrateur fourni avec l’installation. La rubrique Paramètres permet ensuite de renseigner le véritable nom du site, ses META et son identité graphique.

Une base volontairement simple

Un CMS complet propose évidemment des milliers de fonctions supplémentaires : extensions, thèmes, gestion avancée des médias, rôles utilisateurs, commentaires, révisions des contenus ou encore API. Notre mini-blog poursuit un autre objectif.

Il permet de comprendre concrètement comment sont assemblées les principales briques d’un site dynamique : authentification, administration, formulaires, base de données, téléversement de fichiers, éditeur de contenu, paramètres et affichage public.

Le code reste suffisamment compact pour être étudié et modifié. C’est également une bonne base pour développer ensuite son propre projet.

Les principales fonctions de cette version finale

Cette édition comprend désormais :

• une interface responsive et modernisée ;
• une administration complète ;
• la création, la modification et la suppression des articles ;
• un éditeur de texte enrichi ;
• les images à la une ;
• la gestion des catégories et leur filtrage ;
• une page de paramètres ;
• la personnalisation du nom et de la description du site ;
• la gestion des principales balises META ;
• une bibliothèque d’icônes avec choix de la couleur ;
• la gestion du compte administrateur ;
• plusieurs protections CSRF ;
• la sécurisation du téléversement des images ;
• une base MySQL complète fournie sous forme de fichier SQL ;
• une archive prête à être installée sur un serveur PHP/MySQL.

Conclusion

Nous arrivons au terme de cette série consacrée à la création de notre mini-blog.

Nous étions partis d’une application PHP/MySQL très simple permettant uniquement à un administrateur de publier un titre et quelques lignes de texte. Au fil des articles, le projet s’est enrichi d’images, de catégories, d’une meilleure interface publique puis d’un véritable environnement de rédaction.

Cette dernière mise à jour lui apporte ce qui lui manquait pour devenir un petit projet réellement réutilisable : une interface moderne, un éditeur enrichi, une configuration centralisée, une personnalisation graphique et surtout une installation complète à partir d’une seule archive.

Et naturellement, rien n’empêche de continuer à le faire évoluer dans une prochaine série 😉

Nos futures idées : recherche d’articles, pagination, gestion de plusieurs administrateurs, brouillons, programmation des publications, commentaires ou encore génération d’un flux RSS pourraient parfaitement constituer les prochaines fonctionnalités de notre mini CMS.