MyBlog - Mise en place du modèle
De Patchwork.
Sommaire |
Introduction
Cette deuxième étape de la conception de notre application va consister en la mise en place du modèle, et donc la mise en place de la base de données de notre application.
Pour être compréhensible et cohérent, nous allons commencer par récapituler les fonctionnalités de base que notre application devra implémenter. Pour cela, rien de tel qu'une pincée d'UML (Unified Modeling Language).
La construction du modèle va se faire en deux étapes. D'abord, récapitulation des « Use cases » qui résument en quelques mots toutes les actions pouvant être effectués par les différents acteurs de notre application, puis détail des attributs que chacun des objets que notre application manipulera devra posséder, qui seront résumés en un diagramme de classe.
Commencons donc par les "use cases" !
Use cases, ou cas d'utilisation !
Voilà les fonctionnalités que je vous propose d'implémenter :
- Un utilisateur peut écrire un article
- Un utilisateur peut modifier ou supprimer un article
- Un utilisateur peut supprimer un commentaire
- Un visiteur peut lire les articles
- Un visiteur peut écrire un commentaire en réaction à un article
- Un visiteur peut lire les autres commentaires
Si vous êtes familier au sujet de conception de base de données, vous aurez donc remarqué que notre base comprendra pour le départ 3 tables : les tables user, article et comment.
Un conseil que je donnerais est de toujours privilégier la langue anglaise dans vos constructions de BDD et dans vos codes ou commentaires de codes. C'est premièrement une bonne méthode pour se familiariser avec cette langue, et cela rendra votre code plus lisible.
Définition des tables de la base
Ensuite, pour chaque table et donc chaque type d'objets, nous allons devoir définir ses attributs. Commençons par l'utilisateur.
Un utilisateur possède généralement :
- un id unique
- un nom
- un prénom
- un pseudo
- un mot de passe
- une date de création.
Un article possède :
- un id unique,
- l'id de son auteur,
- un titre,
- un contenu (content),
- une date de rédaction/publication
- une date d'édition ou de dernière édition.
Un commentaire possède :
- un id unique,
- l'id de l'article auquel il est rattaché,
- un pseudo d'auteur,
- une adresse mail de l'auteur
- et une date de rédaction
Si nous résumons tout cela par un diagramme de classes UML, nous obtenons quelque chose du genre :
Ce que je vous propose afin de terminer cet article, est de vous fournir un fichier SQL modèle contenant la base de données que nous allons utiliser tout le long de ce tutoriel, afin que nous soyons synchronisés sur notre structure de base. Ce fichier contient de plus différentes entrées d'article et de commentaires, qui nous permettront de tester les fonctions d'affichage de nos listes sans difficulté.
Cliquer ici pour télécharger le script SQL à enregistrer et importer dans votre SGBD
Ce fichier est à importer dans votre SGBDR préféré, afin que nous puissions accéder facilement aux données par la suite.
Mise en place de la connexion à la base de données
Dans cette troisième partie, nous allons mettre en place notre connexion à la base de données, et modifier le fichier d'index de notre application dans le but d'afficher les articles déjà présents dans la base. Cela nous permettra de présenter et d'expliquer comment se découpe les fichiers que nous devons personnaliser, et quels sont les rôles des fichiers déjà présents.
Pour commencer, ouvrez le fichier config.patchwork.php du dossier "app/" présent à la racine de votre application. Il devrait normalement être composé de base comme suit:
<?php //Configuration example $CONFIG += array( 'debug_allowed' => true, );Ce fichier est le fichier de configuration de base de notre application. Dans ce fichier doivent être initialisés toutes les variables que nous souhaitons partager globalement. Pour information la ligne actuellement présente :
'debug_allowed' => trueactive la boîte de débug que nous avons découvert dans le coin supérieur gauche de la fenêtre de notre navigateur dans l'article précédent. Nous allons maintenant modifier ce fichier afin de configurer notre connexion à la base de données, en utilisant par défaut le driver MDB2 pour MySQL.
NOTE DE NG : ajouter instructions pour installer MDB2 ?
<?php $CONFIG += array( 'DSN' => 'mysql://user:password@localhost/myblog', 'debug_allowed' => true, );Dans cette nouvelle version de ce fichier, la ligne la plus intéressante est la ligne suivante:
'DSN' => 'mysql://user:password@localhost/myblog',Vous devez adapter cette ligne à vos informations de connexion à la base, remplacez donc user par votre nom d'utilisateur MySQL, et password par votre mot de passe d'accès à la base SQL.
Modification de la classe d'index
Mise en place de l'Agent Index
Maintenant, nous allons vérifier que notre connexion à la base de données est correctement réalisée. Pour cela, nous allons modifier les fichiers d'index (template et agent) afin d'y afficher les articles actuellement présents dans le fichier SQL que nous vous avons fournis. Patchwork étant basé sur le concept de "une classe, une page", notre page d'index est actuellement constituée d'une classe, ou Agent, présente dans le répertoire "app/class/agent", dans laquelle se trouve le code suivant:
class agent_index extends agent { function compose($o) { $o->who = 'World'; return $o; } }La fonction compose() est la fonction qui est appelée dès que l'accès à une page est demandée par un client via la saisie de l'URL correspondante dans son navigateur. C'est donc la fonction que nous allons surcharger en priorité pour récupérer les éléments dans la base et donc permettre au template (ou modèle) de les afficher. Dans ce code de base, un attribut 'who' ayant pour valeur 'World' est associé à la variable $o. Cette variable $o est une variable standard qui peut être accédée dans le template correspondant à la classe index. Remplacez donc votre agent index par le code suivant:
<?php class agent_index extends agent { function compose($o) { $sql = "SELECT title, content, DAY(created_at) AS day, MONTH(created_at) AS month, YEAR(created_at) AS year FROM article ORDER BY id DESC"; $o->articles = new loop_sql($sql); $o->who = 'World'; return $o; } }Nous avons donc surchargé la méthode compose() de l'agent index pour lui permettre de récupérer dans la base de données les informations relatives à nos articles, et avons injecté ces informations dans notre variable $o, afin de les transmettre au template. La fonction loop_sql qui est utilisée dans ce code est une fonction implémentée dans Patchwork qui sérialise automatiquement dans un tableau les informations récupérées via la variable $sql contenant la requête SQL adaptée.
Mise en place du template Index
Regardons maintenant le code originel du template de l'index, présent dans le dossier "app/public/__/". Tout fichier de template doit posséder l'extension.ptl pour être correctement analysé par Patchwork, le fichier qui nous intéresse est donc le fichier index.ptl
<!-- AGENT 'header' title="Hello !" --> Hello {d$who} ! <!-- AGENT 'footer' -->
Ce code très limité se contente d'inclure les fichiers header.ptl et footer.ptl appartenant de base au framework (qui sont initialement vides), et d'afficher également la variable $who qui a été passé au template via la variable de classe $o.
Pour afficher correctement le contenu de la boucle sérialisée contenant les articles présents en base, remplacez également votre index.ptl par le contenu suivant:<!-- AGENT 'header' title="Hello !" --> <h1>Bienvenue sur mon blog !</h1> <h2>Hello {d$who} !</h2> <!-- IF $articles --> <!-- LOOP $articles --> <h3>{$title}</h3> <p>{$content}</p> <p>Ecrit le {$day}-{$month}-{$year}</p> <!-- END:LOOP --> <!-- END:IF --> <!-- AGENT 'footer' -->Ce code contient une boucle conditionnelle délimitée par le IF et le END:IF vérifiant l'existence de la variable $articles, ainsi qu'une boucle de parcours de la variable $articles, délimitée par les mot-clés LOOP et END:LOOP. Les accolades {} sont utilisées pour préciser que nous travaillons sur un attribut de la boucle que nous parcourons, et non sur une variable de template "classique".
Une fois arrivé à cette étape, vous devriez obtenir un résultat équivalent à la copie d'écran suivante, affichant les différentes entrées d'article, sans aucun style et donc en HTML pur (pour l'instant :) ):
Conclusion
Dans cet article nous avons commencé par mettre en place un schéma de base de données qui nous permettra d'implémenter toutes les fonctionnalités désirées ! Comme vous l'aurez sûrement noté, la base de données proposée est très simplifiée, cela afin de nous permettre de rapidement nous tourner vers la technique, et de nous laisser la possibilité d'approfondir plus tard certains sujets sans offrir trop d'informations dès le départ. N'hésitez par contre pas à réfléchir à d'autres fonctionnalités qui pourraient être intéressantes, je pense par exemple à la catégorisation ou au tag des articles.
Nous avons également découvert la principe de la séparation Agent/Template, et eu un aperçu très rapide des fonctionnalités que Patchwork implémente et nous propose donc à l'utilisation, comme la sérialisation des données SQL ou des méthodes de parcours de boucles intuitives.
L'article suivant portera sur l'implémentation de notre première fonctionnalité, qui sera la rédaction et la publication d'un article via un formulaire classique. Cet article sera plus long que les deux premiers, mais beaucoup plus instructif, car nous découvrirons enfin l'ensemble des concepts à la base de Patchwork !
< -- Précédent - Création du projet -- Suivant - Formulaire d'ajout d'un article -->
