Histoire d'un site #2 - Le blog

Histoire d'un site #2 - Le blog

Avoir un site personnel, c'est beau. Pouvoir s'y exprimer, c'est mieux. Une des choses que je souhaitais avoir sur mon site, était tout simplement un blog."Tout simplement" parce qu'on en voit partout, bien souvent propulsés par des moteurs clé en main tels que WordPress pour n'en citer qu'un. N'étant pas fan des choses préconçues, j'ai souhaité développer mon propre moteur de blog, car il me fallait une administration cohérente, modulable et évolutive. C'était aussi l'occasion pour moi de mettre en pratique mes connaissances au sujet de Symfony 2, à mon propre service. Il se trouve qu'ayant déjà développé un bundle (un module) rédactionnel pour Symfony 2 depuis un moment pour d'autre projets, je n'ai eu qu'à le reprendre et l'adapter.

Note : J'ai pensé aux éventuels lecteurs qui ne sont pas du milieu mais qui s'intéresseraient tout de même au processus de création du site. Tout est donc expliqué de la façon la plus claire possible. Un tag [ALERTE MOLDUS] vous indiquera de passer au paragraphe suivant, vous évitant ainsi un malaise sur un combo de terme technique incompréhensibles.

Le Blog : l'entrée en scène de Symfony 2

Symfony 2, framework PHP utilisé par ce site

Pourquoi faire son propre système plutôt que de prendre WordPress et de lui greffer ce qu'il me manque ? Eh bien, parce que je préfère coder la chose en question moi-même, ainsi je connais le code et je ne cherche pas quand je veux changer quelque chose. Par ailleurs, j'avais pour objectif d'avoir une navigation sans rechargement de page. Il était donc beaucoup plus simple de faire ma propre tambouille, plutôt que d'aller modifier le code des autres. Ainsi, la navigation sans rechargement n'a nécessité que la modification de quelques fichiers grâce à la modularité de Symfony 2.

Visuellement, qu'est-ce que ça donne ?

Pour le blog, tout comme pour la page d'accueil, je voulais quelque chose qui me ressemble, et donc, qui ne ressemble pas aux autres. La disposition peut choquer ou perturber à première vue, mais elle est réfléchie pour être ergonomique sur tous les support (ordinateur, mais aussi smartphone, tablette ou télévision) tout en occupant tout l'espace disponible sur l'écran. Quelle utilité d'avoir un grand écran si c'est pour afficher une page au milieu, en tout petit ? Le texte, c'est à dire le vrai contenu, est donc concentré à gauche, sur une largeur ne dépassant pas (en théorie) les 80 caractères par ligne, ce qui est la largeur conseillée pour lire aisément avec le moins de fatigue. L'image est à droite sur les écrans les plus grands, car si elle était sous le titre, ça ne prenait pas toute la largeur.

Lorsque l'on lis un article, on peut également y voir les commentaires, sous l'image à droite. Ainsi on peut lire l'article à gauche et les commentaires en rapport à droite, sans devoir aller tout en bas de la page pour voir les premiers commentaires. Pour l'aspect technique, j'y reviendrais plus tard.

Concrètement, ce qu'il y a sous le capot

Ce sont ici plusieurs milliers de lignes, en prévision d'une future éventuelle évolution du site, qui font fonctionner ce blog. Il faut toujours voir plus loin. Par exemple, ce blog est prévu pour pouvoir poster des articles avec plusieurs auteurs. Il y a également un système de versions basique (un peu comme Git et SVN en beaucoup plus simple), pratique quand on édite de longs articles et que l'on a modifié des choses qu'il ne fallait pas :) Le système n'est en fait pas un blog, mais un bundle rédactionnel générique qui peut servir à tout : faire des pages, un blog, un devblog, le tout en parallèle avec un flux RSS à chaque fois si on le veut.

La partie la plus compliquée du blog a en fait été la recherche... ce petit champ anodin dans la barre à droite. Ça n'est pas vraiment la recherche en elle même qui a posé problème, mais les moyens techniques nécessaires pour que cela fonctionne de façon efficace et correcte. [ALERTE MOLDUS] Doctrine 2 (l'ORM fourni de base avec Symfony 2) fait fonctionner sa base de donnée MySQL sous InnoDB. Or, pour faire de la recherche FULLTEXT il faut MyISAM... sauf depuis MySQL 5.6 qui prend en charge InnoDB FTS permettant d'effectuer des recherches FULLTEXT. Le soucis a été d'installer MySQL 5.6 sur le serveur car il n'est pas dans les dépôts officiels de Debian et la procédure n'est pas simple tandis que je ne suis pas administrateur système. Bref voilà, ça m'a pris trois jours car j'ai tenté plusieurs choses, notamment l'installation de MariaDB qui est un fork de MySQL, avec une version 10 sensé être équivalente à la 5.6 de MySQL à une seule exception... le support d'InnoDB FTS.

Les Commentaires

Un fil de commentaires

Que serait un blog sans commentaires ? Un lieu d'échange à une seule direction ? Ça n'est plus vraiment de l'échange. Mais je me suis fait la réflexion suivante au moment de développer les commentaires : on ne commente pas forcément qu'un article de blog, on peut commenter n'importe quel contenu. C'est pour cela que les commentaires sont en fait un module complètement indépendant. J'ai donc un système de fils de commentaires, chaque fil ayant son identifiant, et j'affiche un flux de commentaires en fonction de son identifiant.

Design des commentaires

Je n'ai pas poussé bien loin l'apparence en elle-même. Les réponses ne sont pas indentées pour que ce ne soit pas trop le bazar avec le responsive. Les choses qui on été travaillées sont la dynamique du système et notamment la possibilité de poster et répondre en asynchrone (sans rechargement de page et sans bloquer la navigation de façon générale), à l'image du reste du site. A part qu'ici, le module étant séparé, seule la zone de commentaires est rechargée et non toute la page. On arrive donc à un jeu de poupées russes, puisque le site lui-même est dynamique ce qui donne : Redaction (Blog) > Article > Commentaire, le tout étant imbriqué et rechargé indépendamment au moment voulu.

Les avatars

Pour continuer dans l'idée de dynamisme du site, l'avatar est chargé en live au moment où l'email est entré dans le formulaire. L'astuce est simple : le site va chercher le Gravatar qui correspond à l'email rentré au moment où il est saisi. [ALERTE MOLDUS] L'avatar étant un Gravatar, il suffit d'avoir le hash md5 de l'adresse email pour avoir l'url de l'avatar. Ainsi j'ai cherché un bout de JavaScript qui faisait ça, et je l'ai adapté tel que ça aurait été fait côté serveur : un jeu d'enfant !

Des commentaires oui, mais combien ?

Le seul bémol a été d'afficher le nombre de commentaires. J'ai dû passer par une manipulation coté blog, en marge du système en lui-même, pour lier les deux modules. [ALERTE MOLDUS] Un simple COUNT en SQL, mais qui m'aura bien trituré l'esprit. Le tout étant entouré d'une capture d'exception (bloc try-catch) le bundle du blog reste indépendant, juste que le nombre de commentaires sera toujours nul si le bundle commentaires n'est pas à ses côtés.

Vous en savez maintenant un peu plus sur ce blog. N'hésitez pas à poser vos questions en commentaire et à partager l'article si vous l'avez trouvé intéressant. À demain pour l'article suivant dans la série Histoire d'un site !

Votre gravatar
Gravatar de Dadjah Dadjah
f916jan6f23cb 221Greetings from Floride ! Je suis sennuie c3a0 moirur au travail alors jai dc3a9cidc3a9 de consulter votre site web sur mon iphone pendant la pause dc3a9jeuner. I amour la connaissance fournir ici et ne peut pas attendre pour prendre un coup doeil quand je rentre c3a0 la maison. Je suis choquc3a9 c3a9tonnc3a9 surpris c3a0 quel point rapide vite votre blog chargc3a9 sur mon portable .. Je ne suis pas mc3aame en utilisant WIFI, 3G juste .. Quoi quil en soit Quoi quil en soit, Vous trc3a8s bon Blog | | 122
Répondre