Aller au menu - Aller au contenu

Icône Utilisation d'un moteur de templates : Gagatemplate

Par Avatar gaga26
Mise à jour : 22/08/2008
Difficulté : Facile Facile
63 visites depuis 7 jours , classé 640/777
Bonjour à vous, amis zéros.

Dans ce mini-tuto, je vais essayer de vous apprendre à utiliser un système de templates, plus précisément Gagatemplate.

Si les fonctions de ce script ne vous suffisent pas, allez voir du côté de Talus'TPL (il y a un tuto sur le sdz) ou Smarty. Smarty est un moteur de templates très complet, trop à mon goût, car il ralentit considérablement le temps d'exécution.

Dans ce tuto, je considère que vous connaissez les bases du HTML, du PHP (variables, conditions, boucles, includes, ...) et de MySQL.

Image utilisateur
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Qu'est-ce qu'un système de templates ?

Loin de moi l'idée d'avoir la flemme d'écrire, mais je trouve cet extrait très bien rédigé. :-°

Citation : Extrait de phpcodeur.net
"template" est un mot anglais qui peut se traduire par modèle ou gabarit. Le principe est de séparer le code php de la mise en page html ; le code php dans un fichier, la mise en page contenant les balises html dans un autre fichier. On se retrouve alors avec, d'un côté, le script qui fait tout ce qu'il a à faire (ex : récupération de données dans une base de données, traitement?), et d'un autre côté, la mise en page avec des zones prédéfinies où seront placées les données générées par le script. L'avantage évident est de pouvoir travailler uniquement sur la mise en page, sans modifier quoi que ce soit dans le code php et inversement, ou de diviser efficacement le travail à faire, le programmeur s'occupant uniquement de la partie scripting, et le designeur, de la mise en page.

Image utilisateur


Pour résumer, un moteur de templates réunit la partie PHP et la partie HTML / CSS d'une page web.

Mais alors, il faudra créer deux pages pour n'en faire qu'une au final ! o_O

Oui et non, car une partie HTML peut être utilisée pour différentes parties PHP et vice-versa, mais oui, en général il en faut toujours deux.
Retour en haut

Avantages et inconvénients

Inconvénients



Nobody's perfect. Comme toute chose, un moteur de templates a des points faibles. :D

Temps d'exécution



C'est le principal défaut qu'on reproche souvent aux systèmes de templates : ils ralentissent plus ou moins le temps d'exécution. Il y en a certains qui tiennent sur quelques dizaines de lignes de code, mais d'autres comme Smarty (la version normale, pas la light) sont de vraies usines à gaz, comme on dit. :lol: Je ne critique pas du tout les codeurs de ce script, ils font un travail remarquable, ils en font peut-être même trop, c'est ce qui fait que leurs codes sont assez lourds.

Messages d'erreurs



Un autre problème est l'affichage des erreurs, mais là encore, tout dépend du script. Certains se font muets comme des taupes alors que d'autres génèrent une erreur fatale à la moindre anomalie !

Avantages



Après les inconvénients, voici venu le tour des avantages. ;)

Séparation du code HTML/CSS et PHP



Le code est beaucoup plus propre et on s'y retrouve plus facilement. De plus, c'est très utile lors d'un travail d'équipe, les codeurs PHP peuvent modifier leurs codes sans affecter ceux des codeurs HTML / CSS, et inversement. C'est, d'après moi, la fonction la plus intéressante. ;)

Avoir plusieurs designs



On peut très bien le faire sans, mais c'est plus facile avec. Il suffit de mettre un dossier en variable pour avoir un tout autre code HTML / CSS. Il en va de même pour les langues ! ;)

Mettre en cache des pages



Cette fonction est très utile pour économiser des ressources serveur, par exemple pour une page de news qui change très peu. Cela peut aussi être utilisé pour actualiser un message toutes les x secondes, par exemple pour une signature aléatoire du livre d'or de votre site.

Attention, tous les systèmes de templates ne possèdent pas forcément un module de mise en cache.
Retour en haut

Installer Gagatemplate

Téléchargement



Rendez-vous sur la page de téléchargement de Gagatemplate et sélectionnez le fichier de votre choix ; je vous conseille la version 4.x qui est légèrement plus compliquée que les versions antérieures mais qui offre de bien meilleures performances.

Installation



Décompressez le dossier à la racine de votre site. Ajoutez le dossier cache s'il n'existe pas, et ouvrez-le en écriture pour que le moteur y ait accès. Créez aussi un dossier templates s'il le faut, c'est lui qui contiendra vos fichiers templates, pas besoin de l'ouvrir en écriture.

Pour la version 2.0 uniquement, il n'est pas nécessaire d'ajouter le dossier templates_c.

Au final, vous devriez avoir une arborescence des fichiers comme suit :
  • cache/
  • libs/
    • debug.php
    • gaga.class.php
  • templates/
  • templates_c/
Retour en haut

Un système de news : Partie PHP

Comme exemple d'utilisation, je vais vous montrer comment réaliser un système de news facilement.

Commencez par créer un fichier news.php à la racine de votre site.

Déclarer le moteur de templates



Il faut commencer par inclure et déclarer Gagatemplate. Pour ce faire, nous allons créer la variable $tpl qui en quelque sorte contiendra le moteur de templates. C'est ce qu'on appelle une instance.
Code : PHP
1
2
3
<?php
include('libs/gaga.class.php');
$tpl = new gagatemplate();//nous n'avons pas besoin de définir de dossier, vu que nous sommes à la racine du site, pour plus d'infos, consultez la doc


On déclare les variables



On déclare les variables à l'aide de la fonction assign().
Code : PHP
1
2
3
4
5
6
7
8
<?php
$req = mysql_query('SELECT COUNT(*) as nb FROM news');
$nb_news = mysql_fetch_assoc($req);
 
$tpl->assign(array(
    'titre_page' => 'News <-> Mon_site.com',
    'timestamp' => time(),
    'nb_news' => $nb_news['nb']));


On récupère les infos depuis la base de données



La table d'exemple est très simple, voici comment la reproduire :
Code : SQL
1
2
3
4
5
6
7
CREATE TABLE `news` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`titre` VARCHAR( 100 ) NOT NULL ,
`pseudo` VARCHAR( 30 ) NOT NULL ,
`texte` TEXT NOT NULL ,
`date` DATETIME NOT NULL
)

Pour faire quelques essais, insérez manuellement une ou deux news directement depuis PhpMyAdmin. :)

On récupère les infos et on fait une boucle avec :
Code : PHP
1
2
3
4
5
<?php
$req = mysql_query('SELECT pseudo, titre, texte, DATE_FORMAT(date, "%d/%c/%Y %H:%i") date FROM news ORDER BY date DESC');
while($data = mysql_fetch_assoc($req))
{
...


On déclare les blocs



On déclare les blocs à l'aide de la fonction assign_array(). On peut comparer un bloc à une boucle.
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php
$req = mysql_query('SELECT pseudo, titre, texte, DATE_FORMAT(date, "%d/%c/%Y %H:%i") date FROM news ORDER BY date DESC');
while($data = mysql_fetch_assoc($req))
{
    $tpl->assign_array('list_news', array(
        'pseudo' => $data['pseudo'],
        'titre' => $data['titre'],
        'texte' => $data['texte'],
        'dateheure' => $data['date']));
}

Vous remarquerez que j'ai mis le préfixe list_. Je fais ceci pour éviter qu'il y ait confusion entre une variable simple et un bloc. Si j'avais mis nb_news comme nom, la variable nb_news déclarée plus haut dans le code aurait été écrasée.

Compilation et affichage du résultat



Maintenant que nous avons déclaré toutes les variables, il ne reste plus qu'à afficher le résultat. Vu que les news ne changent pas souvent, je vous conseille de mettre en cache (par défaut 60 secondes), mais ce n'est pas obligatoire.
Code : PHP
1
2
3
4
<?php
$tpl->cache_time = 300; //on met le cache à 5 minutes (300 sec)
$tpl->cache = true; //active la mise en cache
$tpl->parse('news.tpl'); //affichage du fichier template "templates/news.tpl"


Très important : lors des essais, ne mettez pas la mise en cache, sinon vous devrez attendre 5 minutes à chaque fois !!! Il m'est arrivé de me creuser la tête un bon moment avant de voir que j'avais activé la mise en cache. :colere2: Les erreurs, c'est toujours tout bête... :p


Voilà pour la partie PHP ; si vous ne comprenez pas bien une fonction, allez faire un tour du côté de la documentation Gagatemplate. ^^
Retour en haut

Un système de news : Partie HTML

Maintenant que nous en avons fini avec le PHP, il ne nous reste plus qu'à mettre en place le HTML. Pour ce faire, créez un fichier news.tpl dans le dossier templates/ qui se trouve à la racine de votre site. Commençons par y mettre le code de base.
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>News</title>
</head>
 
<body>
<h1><!-- ici le titre --></h1>
<!-- Ici, notre page -->
</body>
</html>


Créez aussi une page menu.tpl dans le dossier templates/ qui servira de menu et qui pourra être incluse dans toutes les autres pages ; de cette manière, il n'y aura pas besoin de récrire le code à chaque fois.
Code : HTML
1
<a href="index.php">Accueil</a> - <a href="news.php">News</a> - <a href="forum.php">Forum</a>


On déclare nos variables et on inclut le menu



On inclut le fichier menu.tpl à l'aide de la balise <include file="" />. On déclare les variables qui seront remplacées par le moteur de templates à l'aide de la balise {var}. On accorde news enregistrée(s) à l'aide d'une condition. Vous allez me dire que c'est débile, autant définir une variable déjà accordée dans le code PHP ! o_O Je suis tout à fait d'accord, mais là, c'est pour l'exemple. :D

Remarquez aussi l'utilisation de la balise <function name="functionName"/> qui vous permet d'appeler une fonction PHP depuis le template. Ici nous mettons en forme la date en fonction du timestamp déclaré dans le PHP.
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<h1>{titre_page}</h1>
 
<p class="menu"><include file="menu.tpl" /></p>


<p style="text-align:center;">Bonjour, voici la date : <function name="date" string="d/m/Y h:i:s" var="$timestamp" />
<if cond="$nb_news == 0 || $nb_news == 1"><!-- Je met ce code car le site du zéro bug si j'utilise est_plus_grand_que, mais vous pouvez très bien le remplacer chez vous. -->
il y a {nb_news} news enregistrée
<else />
il y a {nb_news} news enregistrées
</if>
</p>


On déclare le bloc



Comme dans le PHP, il faut maintenant déclarer notre bloc dans le HTML à l'aide de la balise foreach.
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<foreach var="$list_news" as="x">
<table align="center">
    <tr>
        <th>{x[titre]}</th>
    </tr>
    <tr>
        <td>
            <div style="text-align: justify">Par {x[pseudo]} le {x[dateheure]}</div>
            {x[texte]}
        </td>
    </tr>
</table>
</foreach>


Voilà : c'est déjà terminé ; avouez que ce n'était pas si dur. :lol: Toutefois, je vous laisse vous débrouiller si vous désirez faire une section d'administration des news. :euh:
Retour en haut

Le code final

news.php


Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?
mysql_connect('localhost', 'root', ''); // Connexion à MySQL
mysql_select_db('test'); // Sélection de la base test
 
include('libs/gaga.class.php');//inclusion du moteur
$tpl = new gagatemplate();//déclaration de l'instance
 
$req = mysql_query('SELECT COUNT(*) as nb FROM news');
$nb_news = mysql_fetch_assoc($req);//récupération du nombre de news
 
$tpl->assign(array(//déclaration des variables
    'titre_page' => 'News <-> Mon_site.com',
    'timestamp' => time(),
    'nb_news' => $nb_news['nb']));
 
$req = mysql_query('SELECT pseudo, titre, texte, DATE_FORMAT(date, "%d/%c/%Y %H:%i") date FROM news ORDER BY date DESC');
while($data = mysql_fetch_assoc($req))//récupération des news
{
    $tpl->assign_array('list_news', array(//déclaration des variables du bloc "news"
        'pseudo' => $data['pseudo'],
        'titre' => $data['titre'],
        'texte' => $data['texte'],
        'dateheure' => $data['date']));
}
 
mysql_close();//fermeture de la connexion sql
 
$tpl->cache_time = 300; //on met le cache à 5 minutes (300 sec)
//!\Mise en cache seulement lorsque les essais sont terminés !!!
//$tpl->cache = true; //activation de la mise en cache
$tpl->parse('news.tpl');//compilation du fichier "templates/news.tpl"
?>


templates/menu.tpl


Code : HTML
1
<a href="index.php">Accueil</a> - <a href="news.php">News</a> - <a href="forum.php">Forum</a>


templates/news.tpl


Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>News</title>
</head>
 
<body>
<h1>{titre_page}</h1>
 
<p class="menu"><include file="menu.tpl" /></p>
 
<p style="text-align:center;">Bonjour, voici la date : <function name="date" string="d/m/Y h:i:s" var="$timestamp" />
<if cond="$nb_news == 0 || $nb_news == 1">
il y a {nb_news} news enregistrée
<else />
il y a {nb_news} news enregistrées
</if>
</p>
 
<foreach var="$list_news" as="x">
<table align="center">
    <tr>
        <th>{x[titre]}</th>
    </tr>
    <tr>
        <td>
            <div style="text-align: justify">Par {x[pseudo]} le {x[dateheure]}</div>
            {x[texte]}
        </td>
    </tr>
</table>
</foreach>
</body>
</html>
Retour en haut

Toutes les méthodes, variables et balises

Voici la liste complète des méthodes, variables et balises de Gagatemplate version 4 si vous désirez aller plus loin.

Liste des fonctions
FonctionDescription
gagatemplate() pour déclarer le moteur de templates
assign() pour déclarer une ou plusieurs variables
assignArray() pour déclarer un bloc
parse() pour compiler et afficher un fichier template
cleanCompileDir() vide le dossier des fichiers compilés
cleanCacheDir vide le dossier des fichiers mis en cache
debug() affiche un popup avec la page de débugage
delCache() permet de supprimer le cache d'un fichier
isntInCache() permet de savoir si un fichier n'est plus en cache ou pas


Liste des variables
VariablesDescription
tplDir définit le dossier des fichiers templates
compileDir définit le dossier des fichiers compilés
cacheDir définit le dossier des fichiers mis en cache
forceCompile définit si le fichier doit être recompilé ou pas
cache définit si le cache est activé ou pas
cacheTime définit le temps de mise en cache en secondes
display définit s'il faut afficher ou pas les fichiers compilés


Liste des balises
BalisesDescription
var pour afficher une variable
foreach permet d'explorer un bloc
include inclut un fichier dans un autre
condition permet les conditions dans les templates
function permet d'utiliser une fonction définie dans le php
commentaire permet d'ajouter des commentaires dans les templates
Retour en haut

Idées d'améliorations

Maintenant que vous savez utiliser un système de templates, rien ne vous empêche de poursuivre votre apprentissage tout seul avec ces quelques idées d'améliorations.

  • Comme suggéré plus haut, faire une partie d'administration des news.
    Un peu long à montrer ici !
  • Mettre le lien de vos fichiers CSS dans une variable pour permettre le multi-design.
    Secret (cliquez pour afficher)
    Code : PHP
    1
2
    $theme = $_COOKIE['theme'];
$tpl->assign('design', $theme);

    Code : HTML
    1
    <link href="templates/design/{design}/style.css" rel="stylesheet" title="{design}" type="text/css" />

  • Parser un fichier template selon la langue de l'utilisateur.
    • Secret (cliquez pour afficher)
    Code : PHP
    1
2
3
4
5
    $lang = $_SESSION['lang'];
if(is_file('templates/'.$lang.'/presentation.tpl'))
    $tpl->parse($lang.'/presentation.tpl');
else
    exit('ERROR : No file for your language !'); //Tout le monde peut comprendre ça. ^^
  • Afficher un petit message s'il n'y a aucune news
    • Secret (cliquez pour afficher)
    Code : HTML
    1
2
3
4
5
6
7
    <foreach var="$list_news" as="x">
<table align="center">
    [...]
</table>
<foreachelse />
    <div align="center">Il n'y a encore aucune news</div>
</foreach>
  • Et si vous êtes bon codeur, motivé et que les fonctions déjà existantes ne vous suffisent pas, épluchez le code source et modifiez-le à votre guise. Ce script est libre, ce qui signifie que vous pouvez en faire ce que vous voulez. Néanmoins, si vous postiez un petit message sur le forum, pour me parler de vos améliorations, j'en serais très heureux. :D
Retour en haut

Q.C.M.

Que fait un moteur de templates ?
A quoi peut être comparé un bloc ?
Quel fichier sera compilé, si dans le PHP, j'écris ceci ? Code : PHP
1
$tpl->parse('modules/news/index.tpl');

Statistiques de réponses au QCM

Retour en haut
Voilà, j'espère que je ne vous ai pas fait perdre votre temps et que vous aurez appris quelque chose d'utile aujourd'hui.

Si vous avez un problème avec Gagatemplate, n'hésitez pas à visiter le wiki avec la documentation ou, si cela ne suffit pas, le forum qui lui est dédié, j'y suis très présent.

Gaétan
Retour en haut

Partager

Retour en haut
54 commentaires pour "Utilisation d'un moteur de templates : Gagatemplate"
Note moyenne : 3.79 / 4 (14 votes)
Pseudo Commentaire
Hors ligne gaga26 # Posté le 29/07/2009 à 14:27:56
Autant que faire se peut
Avatar

Avis : Très bon

Études : Ecole d'Ingénieurs et d'Architectes de Fribourg

 Citation : isagaw
Dans la version 5 (je n'ai pas essayé les anciennes), tu as renommé ta méthode assign_array en assignArray, du coup tes exemples et ta documentation sont faux.


En effet, j'avais déjà fait la rétro-compatibilité pour clean_compile_dir(), clean_cache_dir() et bien d'autre, mais assign_array() m'avait échappé, c'est réglé.

Merci du commentaire
 
Hors ligne matheod # Posté le 01/03/2010 à 22:33:04

Avatar

 pfiou perso j'ai trouvé le système de langue de la version 5 intéréssant mais bon étant donné que dans un exemple tout con que j'ai testé ca me plombé ma phrase j'ai abandonné !
(j'avais un truc du genre _(fdsfsd{test}sdffs)_ et un assign("test","lol") et la phrase fdsfsdlolsdffs, n'apparaissait pas :-(
Un jeux original qui change des mmorpg tout en en gardant le thème : League Of legend!

Un contrôle parentale sur le site du zero pour les admins ?
Image utilisateur
 
Hors ligne gaga26 # Posté le 06/03/2010 à 13:53:16
Autant que faire se peut
Avatar

Avis : Très bon

Études : Ecole d'Ingénieurs et d'Architectes de Fribourg

 Citation : matheod
pfiou perso j'ai trouvé le système de langue de la version 5 intéréssant mais bon étant donné que dans un exemple tout con que j'ai testé ca me plombé ma phrase j'ai abandonné !
(j'avais un truc du genre _(fdsfsd{test}sdffs)_ et un assign("test","lol") et la phrase fdsfsdlolsdffs, n'apparaissait pas :-(

Cela doit venir du fait qu'on ne peut pas mettre de variable dans les textes de langue. De plus, as-tu bien utilisé la classe Gagatranslate et non Gagatemplate ?

J'ai un peu abandonné Gagatranslate ces derniers temps, mais j'ai actuellement besoin de traduire un site. Le projet va donc repartir. ;)
 
Hors ligne keke21410 # Posté le 15/07/2010 à 11:15:08
"Belong to web"
Avatar

Ville : Ancey
Pays : France métropolitaine

 Excellent ce tuto (et ce template :) ) il est claire qu'avec ce système pour coder, c'est beaucoup plus simple de s'y retrouver et de faire des modifications :)

Merci de nous le faire découvrir et de l'avoir crée :)
Image utilisateur
#LGDF: Golmote vaincra !
[Projet] Un magazine du zér0 [Projet] site web jeux pokemon
Mon avatar te plais pas ? Cliques ici pour le changer !
Image utilisateur
 
Hors ligne Mikilo # Posté le 18/11/2010 à 19:28:37
Lintury Under Construction...
Avatar

Avis : Décevant

Bonjour à tous,

Voilà, j'utilise ce moteur pour un projet, j'avais besoin d'un nouveau moteur simple à utiliser et performant.
Je me suis donc penché sur le moteur Gagatemplate.

Mais au fil du temps, un problème s'est posé.
Le moteur n'évolue pas, j'aurai rien à dire dessus si le moteur était clean, mais il est encore truffé d'erreur.

Ce moteur est simple et rapide quand on développe des choses simples.

J'ai eu plusieurs cas où un bug survient de je-ne-sais-où et que de notre côté, on n'en sache pas plus.
Ce qui m'amène à dire que je ne conseillerai pas ce moteur, et que je ne continuerai plus à l'utiliser, du moins pour mes projets futurs.

Au sujet des bugs rencontrés, le premier était l'affichage d'une variable entre crochet. Je l'ai posté sur le forum, depuis il n'y a jamais eu de réponse.
Le 2e gros bug que j'ai eu, c'est un bout de code HTML qui faisait planter l'affichage lors du parsing.

Mikilo
-=[Mikilo]=-
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.