Développement rapide

Pour ce premier exemple, nous allons créer un site web très simple, avec 2 pages. La première va afficher une liste d'articles, la seconde va afficher l'article demandé.

Principe général

L'idée principale de Temma est de permettre le développement de sites constitués d'URL du type :

http://www.site.com/controller/action/p1/p2/p3
						

Les URL sont découpées en 3 parties :

  • Le nom du contrôleur, un objet qui va être instancié à la réception de la requête.
  • Le nom de l'action, une méthode de cet objet qui va être appelée.
  • Un nombre variable de paramètres, que cette méthode va pouvoir utiliser.

Après avoir exécuté l'action qui prépare les données, l'affichage proprement dit se fait grâce à un fichier de template nommé d'après l'action, placé dans un répertoire nommé d'après le contrôleur.

Evidemment, il est possible de modifier les comportements par défaut. Un contrôleur peut choisir de lire des données reçues en POST au lieu − ou en plus − de celles reçues en paramètre GET. Une action peut définir un template spécifique à utiliser, voire même définir un type de vue complètement différent (qui génèrera du XML au lieu du HTML, par exemple).

Configuration

La première chose à faire est de créer le fichier de configuration du projet. Il s'agit du fichier etc/temma.json. L'installation de Temma fournit des exemples de fichiers, mais voici le contenu de celui que nous allons utiliser :

01 {
02     "application": {
03         "dataSources": {
04             "_db": "mysqli://user:passwd@localhost/mybase"
05         },
06         "rootController": "ArticlesController"
07     },
08     "loglevels": {
10         "finebase": "ERROR",
11         "temma": "WARN"
12     }
13 }
						

Ligne 4 : Configuration de la connexion à la base de données. Pensez à mettre l'identifiant, le mot de passe, le nom de machine et le nom de la base que vous aurez créée.
Ligne 6 : La directive rootController sert à définir le contrôleur racine du site, c'est-à-dire celui qui répondra quand on se connectera à l'adresse suivante :

http://www.my-example-site.com/
						

> Pour en savoir plus sur le fichier temma.json, vous pouvez lire la documentation sur la configuration.

Modèle

Avant tout, nous allons créer une table dans la base de données. Vous devez exécuter la requête suivante sur votre base :

CREATE TABLE articles (
    id     INT UNSIGNED AUTO_INCREMENT,
    title  TINYTEXT,
    text   MEDIUMTEXT,
    author TINYTEXT,
    PRIMARY KEY (id)
);
						

Nous allons ensuite y mettre des données :

INSERT INTO articles (title, text, author)
VALUES ('Premier article',   'Texte du premier article',   'John'),
       ('Second article',    'Texte du second article',    'Bob'),
       ('Troisième article', 'Texte du troisième article', 'John');
						
Contrôleur

Nous allons écrire notre premier contrôleur. Un contrôleur est un objet qui reçoit les connexions et les gère pour envoyer des données en retour.
Les contrôleurs ont des actions, et chaque action peut recevoir des paramètres.

Notre contrôleur se nommera ArticlesController. Il va contenir deux méthodes principale, execList() (pour afficher la liste des articles) et execShow() (pour afficher un article seul). S'y ajoutera la méthode execIndex() dont le seul rôle est de recevoir des connexions sur la racine du site et de les rediriger vers la liste des articles.

Dans le répertoire controllers/ de votre projet, créez un fichier nommé ArticlesController.php.

01 <?php
02 
03 /** Contrôleur de gestion des articles. */
04 class ArticlesController extends \Temma\Controller {
05     /** Indique que le framework doit créer automatiquement la DAO. */
06     protected $_temmaAutoDao = true;
07 
08     /** Action racine, utilisée quand aucune action n'est demandée explicitement. */
09     public function execIndex() {
10         // redirection vers la liste des articles
11         $this->redirect('/articles/list');
12     }
13 
14     /** Action qui affiche la liste des articles. */
15     public function execList() {
16         // récupération de la liste d'articles depuis la base de données
17         $articles = $this->_dao->search();
18 
19         // la liste d'article est rendue disponible pour le template
20         $this->set('articles', $articles);
21     }
22 
23     /**
24      * Action qui affiche le contenu complet d'un article.
25      * @param  int  $id  L'identifiant de l'article.
26      */
27     public function execShow($id) {
28         // récupération du contenu de l'article depuis la base de données
29         $article = $this->_dao->get($id);
30 
31         // on vérifie si l'article demandé existe ou non
32         if (!$article) {
33             // l'article n'existe pas, on redirige vers la liste des articles
34             $this->redirect('/article/list');
35         } else {
36             // l'article existe, on transmet les données au template pour affichage
37             $this->set('article', $article);
38         }
39     }
40 }
41 
42 ?>
						

Ligne 4 : Les contrôleurs doivent être nommés avec le suffixe Controller, et doivent hériter de l'objet \Temma\Controller.

Ligne 6 : Le contrôleur contient un attribut protégé nommé _temmaAutoDao, qui indique à Temma qu'il doit créer automatiquement une DAO (Data Access Object, object d'accès à la base de données), qui servira à lire ou écrire dans la base de données. Cet objet est une instance de type \Temma\Dao, qui est automatiquement configurée pour accéder à la table articles (d'après le nom du contrôleur).
Pour le moment, sachez juste que cet objet propose une méthode search() qui retourne la liste de toutes les entrées de la table articles, et une méthode get() qui retourne un élément à partir de son identifiant.
> Pour en savoir plus sur l'utilisation de la base de données et les DAO, vous pouvez lire la documentation sur la couche «modèle».

Les noms de toutes les actions doivent être préfixés par exec.

Ligne 9 : L'action racine est gérée par la méthode execIndex().
Ligne 11 : L'internaute est redirigé vers la page listant les articles.
Cette action répondra aux deux URLs suivantes :

http://www.my-example-site.com/
http://www.my-example-site.com/articles
						

Dans cet exemple, les deux actions principales utilisent l'objet DAO pour récupérer des données. Ces données sont ensuite passées aux templates grâce à la méthode set.

Ligne 15 : L'action list est gérée par la méthode execList().
Ligne 17 : L'objet DAO est utilisé pour récupérer les données de tous les articles.
Ligne 20 : Les données sont transmises au template en utilisant la méthode privée set().
Cette action répondra à l'URL suivante :

http://www.my-example-site.com/articles/list
						

Ligne 27 : L'action show est gérée par la méthode execShow(), qui prend en paramètre l'identifiant de l'article à afficher.
Ligne 29 : L'objet DAO est utilisé pour récupérer les données de l'article à partir de son identifiant.
Ligne 32 : L'existence de l'article demandé est vérifiée.
Ligne 34 : Si l'article n'existe pas, l'internaute est redirigé vers la liste des articles.
Ligne 37 : Si l'article existe, les données de l'article sont transmises au template en utilisant la méthode privée set().
Par exemple, si on veut voir l'article numéro 2, on se connectera sur l'URL suivante :

http://www.my-example-site.com/articles/show/2
						

> Pour en savoir plus sur les contrôleurs et les actions, vous pouvez lire la documentation sur les contrôleurs.

Template

Temma utilise le moteur de templates Smarty, qui est très répandu et dont la syntaxe est très facile à comprendre.

Nous allons créer deux templates, un pour chaque action.
Dans le répertoire templates/ du projet, créez un sous-répertoire nommé articles (du nom du contrôleur).

Dans ce sous-répertoire, créez un fichier nommé list.tpl:

01 <html>
02 <body>
03     <ul>
04         {* boucle sur la liste des articles *}
05         {foreach from=$articles item=article}
06 
07             {* ajout d'un lien vers l'article *}
08             <li><a href="/articles/show/{$article.id}">{$article.title}</a></li>
09 
10         {/foreach}
11     </ul>
12 </body>
13 </html>
						

Ce template sera appelé automatiquement lorsque sera exécutée l'action execList().

Ligne 5 : Une boucle foreach passe en revue chaque élément de la liste $articles, créant à chaque fois une variable $article.
Ligne 8 : À chaque tour de boucle, un lien est créé, dont l'intitulé est le titre de l'article pointé.

Nous allons créer un second template. Pour cela, ajoutez un fichier show.tpl, toujours dans le sous-répertoire articles.

01 <html>
02 <body>
03     {* affichage du titre de l'article *}
04     <h1>{$article.title}</h1>
05 
06     {* affichage de l'auteur de l'article *}
07     <h2>par {$article.author}</h2>
08 
09     <p>
10         {* affichage du texte de l'article *}
11         {$article.text}
12     </p>
13 </body>
14 </html>
						

Ce template sera appelé automatiquement lorsque l'action execShow() sera exécutée.

Il se contente de créer un flux HTML contenant les informations provenant de l'article récupéré :
Ligne 4 : Le titre de l'article est placé dans une balise h1.
Ligne 7 : Le nom de l'auteur est placé dans une balise h2.
Ligne 11 : Le texte de l'article est placé dans un paragraphe (balise p).

À noter : Vous aurez remarqué que les informations provenant de la base de données (titre, texte, nom de l'auteur) sont écrites telles quelles dans les pages HTML. Cela peut provoquer des erreurs si elles contiennent des caractères spéciaux. Pour en savoir plus sur ce sujet, vous pouvez lire la documentation sur l'échappement de caractères en Smarty.

Vous connaissez maintenant les bases de la création d'un projet en utilisant le framework Temma. Bravo !

< Installation automatique

Foire aux questions >