Tutorial : création d'un blog

De Mozaic Framework.
Aller à : Navigation, rechercher

Nous allons enfin mettre les mains dans le cambouis et créer un blog rudimentaire !


Sommaire

Configuration de l'environnement

Après avoir décompressé l'archive dans votre répertoire web, il faut configurer l'accès à la base de données. Pour cela, ouvrez le fichier config/config.php.

define('DATABASE_DRIVER', 'mysqli');
define('DATABASE_SERVER', 'localhost');
define('DATABASE_USER', 'root');
define('DATABASE_PASSWORD', 'pass');
define('DATABASE_NAME', 'demo');
       
define('DEFAULT_APP', 'blog');

Ajustez les paramètres d'accès à la base, et définissez l'application par défaut : 'blog'. A ce stade, il n'est pas encore utile d'ouvrir l'application dans le navigateur, vous n'auriez qu'un beau message d'erreur.

Création des tables

Pour ce didacticiel très basique, nous allons avoir besoin de 2 tables : posts et comments.

CREATE TABLE `posts` (
  `pid` INT(11) NOT NULL,
  `title` VARCHAR(45) NOT NULL,
  `body` text NOT NULL,
  `date` datetime NOT NULL,
  `username` VARCHAR(45) NOT NULL,
  PRIMARY KEY (`pid`)
);


CREATE TABLE `comments` (
  `cid` INT(11) NOT NULL,
  `pid` INT(11) NOT NULL,
  `email` VARCHAR(45) NOT NULL,
  `website` VARCHAR(256) DEFAULT NULL,
  `body` text NOT NULL,
  `date` datetime NOT NULL,
  PRIMARY KEY (`cid`),
  KEY `comments_pid` (`pid`));


-- Clé étrangère des commentaires vers les posts
ALTER TABLE `comments`
  ADD CONSTRAINT `fk_comments_pid`
  FOREIGN KEY (`pid` )
  REFERENCES `posts` (`pid` )
  ON DELETE NO ACTION
  ON UPDATE NO ACTION,

  ADD INDEX `fk_comments_pid` (`pid` ASC) ;


-- Deux posts pour les tests de base :
INSERT INTO posts (pid, title, body, DATE, username) VALUES (1, 'Billet 1', 'Contenu du billet 1', '2012-03-05', 'Nico');
INSERT INTO posts (pid, title, body, DATE, username) VALUES (2, 'Billet 2', 'Contenu du billet 2', '2012-03-09', 'Roberto');

Création de l'application blog

Bien ! L'environnement est prêt; nous allons pouvoir mettre en place notre application. Créons un répertoire blog dans le répertoire apps

Dans ce dossier, nous allons créer notre config.xml rudimentaire :

<?xml version="1.0" encoding="UTF-8"?>
<app>
  <main-module>post</main-module>
</app>

Ici, nous indiquons simplement au système que le module par défaut du blog est post.

Création du module post

Sous notre dossier d'application blog, créons un dossier modules. Dans ce dossier, nous allons créer un fichier post.class.php, avec le contenu suivant :

<?php
class postModule extends BaseModule
{
  public function __construct()
  {
    parent::__construct();
    $this->defaultAction = "showall";
  }
}

?>

Dans le constructeur, nous indiquons au module que son action par défaut est showall. Cela signifie que si aucune action n'est spécifiée dans l'url, c'est showall qui sera appelée.

L'action showall : pour lister tous les posts

Nous allons donc créer la méthode showall_action() dans la classe PostModule :

    public function showall_action()
    {
        //Récupère les posts dans un tableau de tableaux associatifs
        $post_arr = db()->GetAll("Select * from posts order by date desc");

        //Traite le template : apps/blog/templates/post/showall.html
        return $this->processTemplateAuto(array("post_arr" => rto($post_arr)));
    }

L'opération est simple :

  • on va chercher l'ensemble des posts dans la table, et on met tout ça dans un tableau,
  • on traite le template en lui fournissant le tableau,
  • et enfin, on retourne le template traité au frontcontroller.
  • La fonction rto est purement pratique: adodb, quand on fait un GetAll, retourne un tableau de tableaux associatifs. rto(rows to objects) transforme ceci en tableau d'objets. Cela permet d'uniformiser l'écriture des templates an utilisant $post->xxxx

Les templates

Un template, c'est un modèle de page html, dans lequel on peut injecter des variables. Il existe plusieurs moteurs de templates pour PHP, comme le bien connu [Smarty http://www.smarty.net], que j'ai longtemps utilisé. Seulement, avant Smarty 3, la notion d'héritage n'existait pas, ce qui était très handicapant. J'ai fait un peu le tour des moteurs disponibles, et je me suis arrêté sur [Dwoo http://dwoo.org]. Visiblement, j'ai bien fait. En plus de supporter l'héritage, Dwoo est plus rapide et bien moins gourmand en ressources :)

Nous allons commencer par un template très simple, sans parler d'héritage pour le moment.

Dans le répertoire du module post, créons un dossier templates, et dans ce dernier, un dossier post (le nom du module).

Nous y créons le fichier showall.html, avec le contenu suivant :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tous les posts !</title>
  </head>
 
  <body>
    {foreach $post_arr post}
               
    <div class="post">
      <div>{$post->title} (posté le {$post->date} par {$post->username})</div>
      <div>{$post->body}</div>
    </div>
               
    {/foreach}
                               
  </body>
</html>


On peut difficilement faire plus léger. C'est une page HTML5, avec un en-tête et un corps. Remarquez les balises spéciales {foreach}{/foreach}. En fait on va boucler sur tous les éléments du tableau $post_arr (celui qu'on a envoyé depuis le module) et afficher leurs champs dans des éléments html.

Ouvrons maintenant notre navigateur, et allons sur http://localhost/mozaic/www/index.php

La page générée est la suivante (détail du body) :

<body>
                               
  <div class="post">
    <div>Billet 2 (posté le 2012-03-09 00:00:00 par Roberto)</div>

    <div>Contenu du billet 2</div>
  </div>
               
                               
  <div class="post">
    <div>Billet 1 (posté le 2012-03-05 00:00:00 par Nico)</div>
    <div>Contenu du billet 1</div>
  </div>
                               
</body>

Cool ! Par contre, tout ça manque un peu de mise en page et de style...

Dwoo et l'héritage de templates

Nous allons mettre en place une feuille de style pour arranger un peu la présentation. Créons le fichier www/blog/css/blog.css.

Créons maintenant la page principale, dont toutes nos pages vont hériter : apps/blog/templates/master.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                {resource "css" "blog/css/blog.css"}

                {block "head"}{/block}
               
                <title>Blog</title>
        </head>
        <body>

                <div id="blogtitle">Mon magnifique blog</div>

                <div>{block "content"}Contenu par défaut{/block}</div>
               
        </body>
</html>

La balise {resource}, elle, permet de générer automatiquement les <link> et <script> pour lier des fichiers externes css et javascript. En fait, je suis surtout une grosse feignasse et j'en avais assez de taper les balises complètes à chaque fois, au risque de faire des erreurs...

Les éléments {block} sont des éléments que les descendants peuvent redéfinir. Dans notre cas, nous allons modifier le template showall pour qu'il hérite de master.html, en redéfinissant le bloc "content". Allez sur http://dwoo.org pour plus d'informations.


Voici donc notre showall.html adapté :

{extends "../master.html"}

{block "content"}
        {foreach $post_arr post}
               
        <div class="post">
                <div class="title">{$post->title} (posté le {$post->date} par {$post->username})</div>
                <div class="body">{$post->body}</div>
        </div>
               
        {/foreach}
       
{/block}

Concernant le blog.css dont je parlais tout à l'heure, le voici :

body
{
        background-color: #444444;
        color: #DDDDDD;
        font-family: sans-serif;
        font-size: 12px;
}

#blogtitle
{
        text-align: center;
        font-size: 16px;
        margin-bottom: 30px;
}

.post
{
        margin-bottom: 25px;
}

.post .title
{
        font-size: 16px;
        color: #BBBBBB;
}

a
{
        color: #BBBBBB;
}

.post .body
{
        padding-left: 20px;
        padding-right: 20px;
        text-align: justify;
}

Résultat

Blog css.png


Aller plus loin

Tutorial partie 2: créer des posts dans notre blog

Outils personnels
Espaces de noms
Variantes
Actions
Navigation
Boîte à outils