[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> PHP
> Langage, bibliothèques et fonctions
> Lecture du tutoriel
Utilisation d'un moteur de templates : Gagatemplate
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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.
Ici je présente Gagatemplate, car c'est moi qui l'ai codé, je le connais donc très bien. Si les fonctions de ce script ne vous suffisent pas, allez voir du côté de 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 (PhpMyAdmin compris).
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 coté, 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 coté, 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.
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 !
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.
Inconvénients
Nobody's perfect. Comme toute chose, un moteur de templates a des points faibles.
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.
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.
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/
- templates/
- templates_c/
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 : PHP1
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 : PHP1
2
3
4
5
6
7
8
9 | <?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',
'date' => date('d/m/Y'),
'heure' => date('H:i'),
'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 : SQL1
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 : PHP1
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 : PHP1
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.
Les erreurs, c'est toujours tout bête...
Voilà pour la partie PHP ; si vous ne comprenez pas bien une fonction, allez faire un tour du côté de
la documentation Gagatemplate.
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 : HTML1 | <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 !
Je suis tout à fait d'accord, mais là, c'est pour l'exemple.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11 | <h1>{titre_page}</h1>
<p class="menu"><include file="menu.tpl" /></p>
<p style="text-align:center;">Bonjour, nous sommes le {date} et il est {heure},
<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.
Toutefois, je vous laisse vous débrouiller si vous désirez faire une section d'administration des news.
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
33 | <?
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',
'date' => date('d/m/Y'),
'heure' => date('H:i'),
'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 : HTML1 | <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, nous sommes le {date} et il est {heure},
<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>
|
Voici la liste complète des méthodes, variables et balises de Gagatemplate version 4 si vous désirez aller plus loin.
Liste des variables
| Variables | Description |
|---|
| templates_dir |
définit le dossier des fichiers templates |
| compile_dir |
définit le dossier des fichiers compilés |
| cache_dir |
définit le dossier des fichiers mis en cache |
| compile |
définit si le fichier doit être recompilé ou pas |
| cache |
définit si le cache est activé ou pas |
| cache_time |
définit le temps de mise en cache en secondes |
| error_display |
définit si les messages d'erreur doivent être affichés ou pas |
Liste des balises
| Balises | Description |
|---|
| {var} |
sera remplacée par la variable correspondante |
| foreach |
permet d'explorer un bloc |
| <include file="" /> |
inclut un fichier dans un autre |
| if |
etablit une condition |
| else |
condition : sinon |
| elseif |
condition : ou si ... |
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 : PHP1
2 | $theme = $_COOKIE['theme'];
$tpl->assign('design', $theme);
|
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 : PHP1
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. ^^
|
- 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.
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
la documentation ou, si cela ne suffit pas,
le forum qui lui est dédié, j'y suis très présent.
Gaga26
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
699 Zéros connectés |
8 requêtes |
0.2466s (0.2326s)
