De son nom de code « It’s a kind of Magic », voici le compte-rendu du projet de PHP réalisé courant 2009. Ce projet est comme vous le voyez ce site lui-même avec quelques petites améliorations.
1- Présentation du sujet
Il s’agissait de réaliser un blog en langage PHP5. Pourvu d’une architecture Modèle Vue Contrôleur, ce blog devait respecter quelques spécificités telles :
- design pattern MVC
- la généricité de l’architecture
- la généricité de la couche DAO
- le soin apporté à l’ergonomie surtout pour la gestion des tags
- les commentaires / indentations / qualité du code (XHTML/CSS aussi)
- automatisation de l’écriture des relations 1-n et n-n au niveau des classes métier
- gestion d’utilisateurs via la BDD
- intégration d’un langage de templates
- mise en place d’un système d’url rewriting
- contrôle des données de formulaire/sécurité
- intégration d’un filet RSS
- intégration d’un éditeur WYSIWYG en ligne dans la partie rédaction des POSTS
- mise en place d’un pager
2- Présentation du travail réalisé
Le travail que nous avons réalisé respecte bien la plupart des conditions demandées. D’autres fonctionnalités (détaillées plus loin) ont été ajoutées. La seule condition qui n’a pas respectée est la modération des commentaires à priori. Cette fonctionnalité n’a pas été jugée utile dans la mesure où ce n’est pas une fonctionnalité courante sur Internet. Aussi nous voulions créer un blog qui colle au plus près des exigences du web, et en particulier du web2. Cette fonctionnalité est prévue, mais n’a pas été implémentée par nos soins.
Notre blog se compose donc des spécificités demandées suivantes :
- Un système de post classée par date de publication décroissante.
- Un système de commentaires pour chaque post.
- Un pager (numéros de pages en bas).
- Un système de flux RSS global (posts du blog) et par post (avec les commentaires).
- Un système de gestion des droits utilisateurs : Visiteur, Abonné, Modérateur, et Administrateur.
- Un nuage de tags.
- Un système de présentation des archives du blog (anciens posts).
- La présence de tags (mots-clés) pour les posts.
- Un système de réécriture d’URL (Url Rewriting).
- Un WYSIWYG (tinymce) pour la rédaction des posts et des commentaires.
Auxquelles nous avons ajouté :
- Un édito paramétrable.
- Un système facilitant la recherche des posts (barre de recherche).
- Des liens sociaux pour chaque post.
- Un avatar pour chaque utilisateur.
- La modification de la configuration du site en ligne.
- L’affichage/masquage des modules (barre de recherche, édito, archives, nuage de tags).
- La gestion complète des utilisateurs.
- La possibilité de gérer son profil.
- La possibilité de mettre le blog dans la langue que l’on veut (Fichiers XML).
- La gestion de la configuration dans un fichier XML.
- La sécurisation du blog.
- La gestion complète du CSS du blog, dans des fichiers séparés pour facilité la modification.
- Le chargement des JavaScripts, Métas, CSS à la volée pour gagner en rapidité.
- La modification des titres et descriptions de pages pour le référencement.
- La validité XHTML 1.1 de l’ensemble du blog.
- Le fonctionnement du site sous tous les navigateurs à jour.
- Une recherche des tags avec auto complétion dans la création d’un post.
Ces fonctionnalités seront détaillées plus loin.
3- Outils utilisés
Photoshop CS4 a été utilisé pour réalisé le thème du blog ainsi que la plupart des images.
Notepad++ a été utilisé pour programmer le blog.
Une base de données MySQL et WAMP ont été utilisés pour faire fonctionner le blog.
Le moteur de template Smarty a été intégré au blog.
Tinymce est utilisé comme WYSIWYG.
KFM est utilisé comme explorateur de fichiers (accessible dans la partie administrateur seulement).
L’API Scriptaculous a été utilisée pour quelques effets.
Glassbox a été utilisé pour créer une fenêtre d’alerte lors de l’insertion d’un commentaire.
WP-Cumulus, un plugin pour WordPress qui affiche un nuage de tags en Flash, a été intégré au blog.
Des scripts et hacks CSS ont permis d’avoir une parfaite mise en page sur tous les navigateurs.
SyntaxHighlighter est intégré à TinyMCE pour la coloration syntaxique du code dans un post.
4- Choix techniques
Des choix techniques ont été faits lors de la conception de ce blog.
Le principal choix s’est porté sur la programmation de la couche Data Access Layer. Ainsi, nous utilisons un Object Relation Mapping (ORM) unique.
Une Factory s’occupe de fournir une connexion à la base de données. Une classe abstraite Sgbd est étendue par une classe spécialisée en fonction du type de base de données et implémente les méthodes CRUD (Create/Read/Update/Delete).
L’ORM fait appel aux méthodes de la classe dérivée de Sgbd et manipule les objets métiers.
Ces objets métiers ont comme attributs, les champs correspondants dans la base de données (au nom près). Une ligne de la base de données correspond à un objet métier.
Notre choix a été de ne pas leur permettre de s’autogérer. Ainsi l’ORM gère tous les objets métier, et lui seul peut les modifier, créer, supprimer. Il est le seul maître.
Un objet métier ne peut que fournir ou recevoir le contenu de ses attributs. Par contre, il est apte à appeler l’ORM pour fournir des valeurs qu’il ne peut pas trouver seul.
C’est le principe du lazy loading. Il s’agit de charger des objets ou des attributs seulement lorsqu’on le demande, afin de gagner en performance.
Ainsi, chaque post peut fournir ses propres tags et commentaires sur ce principe.
5- Réalisation
Le blog est réalisé avec une architecture Modèle Vue Contrôleur (MVC). Chaque objet dispose de son propre contrôleur spécialisé. Le contrôleur principal orchestre le tout.
5.1 – Contrôleur Principal
Le contrôleur principal (index.php) charge le fichier de configuration config.inc.php qui contient le chemin absolu du blog. Ensuite, il charge la classe abstraite BaseControleur et le moteur de templates Smarty. On charge ensuite la configuration du blog qui est contenu dans le fichier config.xml.
Puis, on charge le fichier de langue contenu dans un fichier XML dans le répertoire lang/, nommé lang_PREFIX.xml avec PREFIX égal au préfixe de la langue. (Exemple : fr = France, en = Anglais, …).
On charge ensuite les fichiers CSS et JavaScript communs à toutes les pages puis on démarre une session pour les comptes utilisateurs.
Pour les utilisateurs, il y a trois niveaux :
- 0 = Compte abonné (simple utilisateur authentifié)
- 1 = Modérateur (peut modérer les commentaires)
- 2 = Administrateur (Gère l’ensemble du site)
Chaque requête que reçoit le contrôleur principal est traitée comme suit :
- Si un paramètre objet est renseigné, on tente de charger son contrôleur correspondant, sinon on charge le contrôleur par défaut (le contrôleur de l’objet index).
- Si un paramètre action est renseigné, on tente d’appeler la méthode correspondante, sinon on appelle la méthode par défaut index().
Pour finir, le contrôleur principal créé l’affichage. Il charge les modules s’ils sont activés dans la configuration du blog. Puis, il affiche la vue.
Les objets qui peuvent être passés en argument sont : commentaire, post, user, tag, et config.
La classe BaseControleur contient la seule méthode abstraite index(). Les contrôleurs spécialisés dérivent toutes de cette classe, et implémentent la méthode index().
5.2 – L’Object Relation Mapping
La classe ORM du blog implémente les méthodes suivantes :
- Instance() : méthode statique qui permet de récupérer une instance de l’objet ORM. La classe ORM se comporte comme un singleton.
- Create() : méthode qui créé un objet.
- Delete() : méthode qui détruit un objet.
- DeleteAll() : méthode qui détruit tous les objets d’une classe.
- Find() : méthode qui effectue une recherche d’objets. Soit avec un objet en argument, soit avec une fin de requête SQL du type : « from CLASS where id = 2 ».
- Retrieve() : méthode qui retourne un objet avec la clé donnée en paramètre.
- Count() : méthode qui effectue un comptage.
- GetColumnsTable() : méthode privée qui retourne les colonnes d’une table (passée en paramètre) de la base de données.
Cette classe ORM construit les requêtes SQL et utilise un objet Sgbd pour effectuer les requêtes.
5.3 – La classe Sgbd
La classe abstraite Sgbd implémente les méthodes CRUD : Create, Read, Update, Delete.
Une classe spécialisée pour une base de données hérite de cette classe abstraite. Par exemple, la classe Mysql utilisée pour une base de donnes MySQL.
5.4 – Flash, CSS et JavaScript
Les fichiers JavaScript, CSS et Flash sont chargés dynamiquement selon ce que l’on affiche.
Le style CSS est découpé pour facilité son appel et sa modification. Des hacks CSS ont été utilisés pour avoir la même présentation du blog quelque soit le navigateur utilisé.
Les fichiers JavaScript ont été compressés pour gagner en rapidité de chargement. Si le JavaScript est désactivé, le blog continue de fonctionner sans aucuns soucis.
Flash est utilisé pour le nuage de tags. S’il est désactivé, un autre nuage de tags s’affichera.
5.5 – Le moteur de templates Smarty
Smarty a été utilisé comme moteur de templates. Des fonctions Smarty ont été écrites pour pallier certaines lacunes de Smarty.
La fonction urlRewrite qui permet de réécrire un texte sous forme d’une url « stripée ».
La fonction noAccent permet de supprimer les accents d’une chaîne de caractères.
5.6 – Accès à la base de données et sécurité
Deux utilisateurs de base de données sont nécessaires :
- READER : utilisateur qui ne peut effectuer que du SELECT et du INSERT (pour les commentaires).
- WRITER : utilisateur qui peut effectuer toutes les opérations de lecture, création, modification et suppression sur les tables.
Ceci permet d’accroitre la sécurité du blog.
On effectue aussi de multiples contrôles, que ce soit sur les paramètres passés en arguments, ou qui sont destinés à être insérés dans la base de données.
Une sécurité supplémentaire est présente dans le fichier .htaccess. Elle se charge d’éliminer toutes les tentatives malveillantes qui peuvent être effectuées en manipulant l’url du blog.
6- Améliorations et conclusion
Des améliorations sont à faire sur ce blog. Premièrement, résoudre le problème du code HTML tronqué. En effet, une spécificité du sujet était de tronquer le texte de présentation d’un post à 512 caractères. Or, du code HTML est enregistré en base de données (pour la mise en forme). Ainsi les 512 caractères ne sont pas 512 caractères de texte pur. Et lorsqu’on tronque à 512 caractères, des balises peuvent être coupées. Même si ce problème est en parti résolu grâce à la manipulation d’expressions régulières, le problème peut survenir (ce qui provoque un mauvais affichage du blog et une non-validation w3c).
Deuxièmement, protéger le fichier de configuration XML. Ce fichier est lisible par tout le monde, il suffit de trouver le chemin qui y mène. Je n’ai pas trouvé la manière de le protéger sachant que le contrôleur principal doit nécessairement pouvoir y accéder…
Les améliorations citées ci-dessus ont bien sûr été faites depuis la mise en ligne de ce site 
.
La conception de ce projet a été réalisé par mes soins.
La relecture du code, sa documentation et surtout le design du site ont été réalisés par Geoffrey Soubrier.
Related Posts
Blog MVC – It’s a Kind of Magic
De son nom de code « It’s a kind of Magic », voici le compte-rendu du projet de PHP réalisé courant 2009. Ce projet est comme vous le voyez ce site lui-même avec quelques petites améliorations.
1- Présentation du sujet
Il s’agissait de réaliser un blog en langage PHP5. Pourvu d’une architecture Modèle Vue Contrôleur, ce blog devait respecter quelques spécificités telles :
- design pattern MVC
- la généricité de l’architecture
- la généricité de la couche DAO
- le soin apporté à l’ergonomie surtout pour la gestion des tags
- les commentaires / indentations / qualité du code (XHTML/CSS aussi)
- automatisation de l’écriture des relations 1-n et n-n au niveau des classes métier
- gestion d’utilisateurs via la BDD
- intégration d’un langage de templates
- mise en place d’un système d’url rewriting
- contrôle des données de formulaire/sécurité
- intégration d’un filet RSS
- intégration d’un éditeur WYSIWYG en ligne dans la partie rédaction des POSTS
- mise en place d’un pager
2- Présentation du travail réalisé
Le travail que nous avons réalisé respecte bien la plupart des conditions demandées. D’autres fonctionnalités (détaillées plus loin) ont été ajoutées. La seule condition qui n’a pas respectée est la modération des commentaires à priori. Cette fonctionnalité n’a pas été jugée utile dans la mesure où ce n’est pas une fonctionnalité courante sur Internet. Aussi nous voulions créer un blog qui colle au plus près des exigences du web, et en particulier du web2. Cette fonctionnalité est prévue, mais n’a pas été implémentée par nos soins.
Notre blog se compose donc des spécificités demandées suivantes :
- Un système de post classée par date de publication décroissante.
- Un système de commentaires pour chaque post.
- Un pager (numéros de pages en bas).
- Un système de flux RSS global (posts du blog) et par post (avec les commentaires).
- Un système de gestion des droits utilisateurs : Visiteur, Abonné, Modérateur, et Administrateur.
- Un nuage de tags.
- Un système de présentation des archives du blog (anciens posts).
- La présence de tags (mots-clés) pour les posts.
- Un système de réécriture d’URL (Url Rewriting).
- Un WYSIWYG (tinymce) pour la rédaction des posts et des commentaires.
Auxquelles nous avons ajouté :
- Un édito paramétrable.
- Un système facilitant la recherche des posts (barre de recherche).
- Des liens sociaux pour chaque post.
- Un avatar pour chaque utilisateur.
- La modification de la configuration du site en ligne.
- L’affichage/masquage des modules (barre de recherche, édito, archives, nuage de tags).
- La gestion complète des utilisateurs.
- La possibilité de gérer son profil.
- La possibilité de mettre le blog dans la langue que l’on veut (Fichiers XML).
- La gestion de la configuration dans un fichier XML.
- La sécurisation du blog.
- La gestion complète du CSS du blog, dans des fichiers séparés pour facilité la modification.
- Le chargement des JavaScripts, Métas, CSS à la volée pour gagner en rapidité.
- La modification des titres et descriptions de pages pour le référencement.
- La validité XHTML 1.1 de l’ensemble du blog.
- Le fonctionnement du site sous tous les navigateurs à jour.
- Une recherche des tags avec auto complétion dans la création d’un post.
Ces fonctionnalités seront détaillées plus loin.
3- Outils utilisés
Photoshop CS4 a été utilisé pour réalisé le thème du blog ainsi que la plupart des images.
Notepad++ a été utilisé pour programmer le blog.
Une base de données MySQL et WAMP ont été utilisés pour faire fonctionner le blog.
Le moteur de template Smarty a été intégré au blog.
Tinymce est utilisé comme WYSIWYG.
KFM est utilisé comme explorateur de fichiers (accessible dans la partie administrateur seulement).
L’API Scriptaculous a été utilisée pour quelques effets.
Glassbox a été utilisé pour créer une fenêtre d’alerte lors de l’insertion d’un commentaire.
WP-Cumulus, un plugin pour WordPress qui affiche un nuage de tags en Flash, a été intégré au blog.
Des scripts et hacks CSS ont permis d’avoir une parfaite mise en page sur tous les navigateurs.
SyntaxHighlighter est intégré à TinyMCE pour la coloration syntaxique du code dans un post.
4- Choix techniques
Des choix techniques ont été faits lors de la conception de ce blog.
Le principal choix s’est porté sur la programmation de la couche Data Access Layer. Ainsi, nous utilisons un Object Relation Mapping (ORM) unique.
Une Factory s’occupe de fournir une connexion à la base de données. Une classe abstraite Sgbd est étendue par une classe spécialisée en fonction du type de base de données et implémente les méthodes CRUD (Create/Read/Update/Delete).
L’ORM fait appel aux méthodes de la classe dérivée de Sgbd et manipule les objets métiers.
Ces objets métiers ont comme attributs, les champs correspondants dans la base de données (au nom près). Une ligne de la base de données correspond à un objet métier.
Notre choix a été de ne pas leur permettre de s’autogérer. Ainsi l’ORM gère tous les objets métier, et lui seul peut les modifier, créer, supprimer. Il est le seul maître.
Un objet métier ne peut que fournir ou recevoir le contenu de ses attributs. Par contre, il est apte à appeler l’ORM pour fournir des valeurs qu’il ne peut pas trouver seul.
C’est le principe du lazy loading. Il s’agit de charger des objets ou des attributs seulement lorsqu’on le demande, afin de gagner en performance.
Ainsi, chaque post peut fournir ses propres tags et commentaires sur ce principe.
5- Réalisation
Le blog est réalisé avec une architecture Modèle Vue Contrôleur (MVC). Chaque objet dispose de son propre contrôleur spécialisé. Le contrôleur principal orchestre le tout.
5.1 – Contrôleur Principal
Le contrôleur principal (index.php) charge le fichier de configuration config.inc.php qui contient le chemin absolu du blog. Ensuite, il charge la classe abstraite BaseControleur et le moteur de templates Smarty. On charge ensuite la configuration du blog qui est contenu dans le fichier config.xml.
Puis, on charge le fichier de langue contenu dans un fichier XML dans le répertoire lang/, nommé lang_PREFIX.xml avec PREFIX égal au préfixe de la langue. (Exemple : fr = France, en = Anglais, …).
On charge ensuite les fichiers CSS et JavaScript communs à toutes les pages puis on démarre une session pour les comptes utilisateurs.
Pour les utilisateurs, il y a trois niveaux :
- 0 = Compte abonné (simple utilisateur authentifié)
- 1 = Modérateur (peut modérer les commentaires)
- 2 = Administrateur (Gère l’ensemble du site)
Chaque requête que reçoit le contrôleur principal est traitée comme suit :
- Si un paramètre objet est renseigné, on tente de charger son contrôleur correspondant, sinon on charge le contrôleur par défaut (le contrôleur de l’objet index).
- Si un paramètre action est renseigné, on tente d’appeler la méthode correspondante, sinon on appelle la méthode par défaut index().
Pour finir, le contrôleur principal créé l’affichage. Il charge les modules s’ils sont activés dans la configuration du blog. Puis, il affiche la vue.
Les objets qui peuvent être passés en argument sont : commentaire, post, user, tag, et config.
La classe BaseControleur contient la seule méthode abstraite index(). Les contrôleurs spécialisés dérivent toutes de cette classe, et implémentent la méthode index().
5.2 – L’Object Relation Mapping
La classe ORM du blog implémente les méthodes suivantes :
- Instance() : méthode statique qui permet de récupérer une instance de l’objet ORM. La classe ORM se comporte comme un singleton.
- Create() : méthode qui créé un objet.
- Delete() : méthode qui détruit un objet.
- DeleteAll() : méthode qui détruit tous les objets d’une classe.
- Find() : méthode qui effectue une recherche d’objets. Soit avec un objet en argument, soit avec une fin de requête SQL du type : « from CLASS where id = 2 ».
- Retrieve() : méthode qui retourne un objet avec la clé donnée en paramètre.
- Count() : méthode qui effectue un comptage.
- GetColumnsTable() : méthode privée qui retourne les colonnes d’une table (passée en paramètre) de la base de données.
Cette classe ORM construit les requêtes SQL et utilise un objet Sgbd pour effectuer les requêtes.
5.3 – La classe Sgbd
La classe abstraite Sgbd implémente les méthodes CRUD : Create, Read, Update, Delete.
Une classe spécialisée pour une base de données hérite de cette classe abstraite. Par exemple, la classe Mysql utilisée pour une base de donnes MySQL.
5.4 – Flash, CSS et JavaScript
Les fichiers JavaScript, CSS et Flash sont chargés dynamiquement selon ce que l’on affiche.
Le style CSS est découpé pour facilité son appel et sa modification. Des hacks CSS ont été utilisés pour avoir la même présentation du blog quelque soit le navigateur utilisé.
Les fichiers JavaScript ont été compressés pour gagner en rapidité de chargement. Si le JavaScript est désactivé, le blog continue de fonctionner sans aucuns soucis.
Flash est utilisé pour le nuage de tags. S’il est désactivé, un autre nuage de tags s’affichera.
5.5 – Le moteur de templates Smarty
Smarty a été utilisé comme moteur de templates. Des fonctions Smarty ont été écrites pour pallier certaines lacunes de Smarty.
La fonction urlRewrite qui permet de réécrire un texte sous forme d’une url « stripée ».
La fonction noAccent permet de supprimer les accents d’une chaîne de caractères.
5.6 – Accès à la base de données et sécurité
Deux utilisateurs de base de données sont nécessaires :
- READER : utilisateur qui ne peut effectuer que du SELECT et du INSERT (pour les commentaires).
- WRITER : utilisateur qui peut effectuer toutes les opérations de lecture, création, modification et suppression sur les tables.
Ceci permet d’accroitre la sécurité du blog.
On effectue aussi de multiples contrôles, que ce soit sur les paramètres passés en arguments, ou qui sont destinés à être insérés dans la base de données.
Une sécurité supplémentaire est présente dans le fichier .htaccess. Elle se charge d’éliminer toutes les tentatives malveillantes qui peuvent être effectuées en manipulant l’url du blog.
6- Améliorations et conclusion
Des améliorations sont à faire sur ce blog. Premièrement, résoudre le problème du code HTML tronqué. En effet, une spécificité du sujet était de tronquer le texte de présentation d’un post à 512 caractères. Or, du code HTML est enregistré en base de données (pour la mise en forme). Ainsi les 512 caractères ne sont pas 512 caractères de texte pur. Et lorsqu’on tronque à 512 caractères, des balises peuvent être coupées. Même si ce problème est en parti résolu grâce à la manipulation d’expressions régulières, le problème peut survenir (ce qui provoque un mauvais affichage du blog et une non-validation w3c).
Deuxièmement, protéger le fichier de configuration XML. Ce fichier est lisible par tout le monde, il suffit de trouver le chemin qui y mène. Je n’ai pas trouvé la manière de le protéger sachant que le contrôleur principal doit nécessairement pouvoir y accéder…
Les améliorations citées ci-dessus ont bien sûr été faites depuis la mise en ligne de ce site
.
La conception de ce projet a été réalisé par mes soins.
La relecture du code, sa documentation et surtout le design du site ont été réalisés par Geoffrey Soubrier.
Related Posts