Le système de template de FSB
Chef du projet FSB
- Age : 22 ans
- Messages : 14196
- Inscrit : 16 Septembre 2004
[size=18]> Introduction_______________________///[/size]
(Note : J'ai à la base fait ce tutorial pour phpBB mais comme le système de template est similaire je l'ai adapté à FSB, n'hésitez pas à me MP en cas d'incohérence, j'ai essayer de tout adapter mais des erreurs peuvent toujorus persister).
Vous allez à travers ce tutorial apprendre à utiliser le système de template de FSB, ce système pourra vous servir tout d'abord à cerner le fonctionement de FSB, vous pourrez de plus utiliser ce système pour vos applications webs personnelles. Si vous comptez faire des MODS vous devez avoir compris ce tutorial. Bien entendu vous devez avoir au minimum des bases en PHP.
[size=18]> Qu'est ce qu'un template?___________///[/size]
Beaucoup d'entre vous se demandent sà»rement à quoi peut bien servir un template et de quoi il s'agit au juste. En fait dans un système de template une page que vous voyez est générée au minimum à l'aide de deux fichiers. Le premier fichier est le fichier qui va récupérer toutes les données, variables, etc... il s'agira du fichier .php. Le seconde fichier sera le fichier template (.tpl dans le cadre de FSB) et il sera composé exclusivement de HTML. Les variables récupérées dans le fichier .php seront parsées vers le .tpl, et la fusion des deux fichiers donnera la page que vous voyez.On a ainsi séparé le cà´té programmation et le cà´té graphique en deux fichiers distincts.
L'intérêt d'un tel système est d'une part la possibilité d'insérer d'autres templates sans avoir à modifier le code, mais aussi d'avoir un site bien hiérarchisé.
L'inconvénient étant les temps de chargements plus longs.
Nous allons maintenant approfondir l'étude des templates, on se lance dans le cà´té programmation!
[size=18]> Le systeme de template de FSB____///[/size]
Avant de pouvoir programmé avec le système de FSB il vous faut le fichier includes/functions/class_tpl.php téléchargeable dans une release (la plus récente possible) de FSB. Il vous suffira d'inclure ce fichier dans toutes les pages utilisant le système de template à l'aide de la commande d'inclusion
include('class_tpl.php');
Admettons pour ce tutorial que vous avez un fichier test.php à la racine de votre site et un fichier template/test_body.tpl dans un répertoire template/. Avant de pouvoir commencer à utiliser le template il va falloir créer une instance de cette façon:
// Instance
$template = new Template("template/");
Une fois ce code mis nous allons pointer vers le fichier .tpl concerné en ajoutant un modèle:
// Modèle
$template->set_filenames( array('body' => 'test_body.tpl') );
Votre page .php aura donc toujours un code dans ce style là :
include('class_tpl.php');
// Instance
$template = new Template("repertoire_ou_se_trouve_votre_fichier.tpl/");
// Modèle
$template->set_filenames( array('body' => 'fichier.tpl.') );
Après ces quelques petites notions nous allons pouvoir attaquer l'intéressant, la manipulation et le parsage des variables du .php au .tpl.
[size=18]> Vos premieres variables parsees_____///[/size]
Vous devez maintenant vous demander comment faire pour relier votre fichier .php à votre fichier .tpl. Considérons les deux même fichiers test.php et test_body.tpl que tout à l'heure situés dans les même emplacements. Vous avez une variable $var qui contient le texte "hello". Voici la marche à suivre pour afficher votre texte:
Dans le fichier test.php:
<?php
include('class_tpl.php');
// Instance
$template = new Template("repertoire_ou_se_trouve_votre_fichier.tpl/");
// Modèle
$template->set_filenames( array('body' => 'fichier.tpl.') );
// On défini la variable $var avec sa valeur 'hello'
$var = "hello";
// on prépare les variables à être parsées
$template->assign_vars( array(
'VARIABLE' => $var
));
// On parse les variables
$template->pparse('body');
?>
Dans le fichier template/test_body.tpl:
<html>
[...]
<body>
{VARIABLE}
</body>
</html>
>> Vous obtenez le mot 'hello' qui s'affiche, content de vous? Vous allez sà»rement me dire que c'est beaucoup de boulot pour pas grand chose, mais en PHP il faut voir large 
Maintenant que vous avez compris comment parser simplement des variables nous verrons dans le prochain tutorial (à la suite sur ce topic) comment créer des blocs et les exploiter pour les boucles ou la dissimulation de donnée.
Cause Im as free as a bird now, And this bird you can not change. - Freebird - Lynyrd Skynyrd
There's someone in my head but it's not me. - Brain damage - Pink Floyd
I said baby, you know Im gonna leave you. - Babe I'm gonna leave you - Led Zeppelin
Father ? yes son, I want to kill you - The end - The Doors
Chef du projet FSB
- Age : 22 ans
- Messages : 14196
- Inscrit : 16 Septembre 2004
[size=18]> L'utilisation des blocs_______________///[/size]
Dans la première partie du tuto nous avons appris à parser simplement des variables de .php au .tpl. Mais que faire si vous ne voullez pas forcément faire passer de variables tout en préservant le code HTML de votre fichier.tpl ? C'est là que l'utilisation des blocs intervient, suivant si vous les avez "activer" ou non le bloc affichera ou non le code à l'intérieur de ses balises.
[size=18]> Creer un bloc______________________///[/size]
Considérons à nouveau les fichiers test.php et template/test_body.tpl, pour commencer mettez le code récurent au début de la page test.php à savoir:
include('class_tpl.php');
// Instance
$template = new Template("repertoire_ou_se_trouve_votre_fichier.tpl/");
// Modèle
$template->set_filenames( array('body' => 'fichier.tpl.') );
Nous allons maintenant généré un bloc, la syntax est casiment la même que le parsage de variable au détail prèt que nous allons utiliser une autre fonction qui accepte un argument en plus, le nom du bloc. En voici la syntax:
$template->assign_block_vars('nom_du_bloc', array(
'VARIABLE_1' => $var_1,
(...)
'VARIABLE_n' => $var_n
));
Cette fonction parsera toutes les variables qu'elle appel dans le bloc du fichier .tpl entouré des balises spéciales:
<!-- BEGIN nom_du_bloc -->
code HTML
<!-- END nom_du_bloc -->
Ainsi le bloc situé entre ces deux balises commentaires spéciales n'apparaitra que si la fonction créant le bloc est appelée dans le .php. Il vous suffira ainsi de placer cette fonction dans une structure conditionelle pour cacher ou non le bloc. Pour vous faire comprendre l'application de ce système on va prendre un exemple de FSB: les liens sur les forums et sujets permettant de revenir sur l'index, sur le forum ou le sujet..
[size=18]> Exemple___________________________///[/size]
Commençons par ouvrir le fichier ./themes/IceCold/header.tpl, trouvez ensuite cette partie du code:
<a href="{U_INDEX}">{NOM_SITE} - {L_INDEX}</a>
<!-- BEGIN liens_pages -->
{liens_pages.LIENS}
<!-- END liens_pages -->
Tout d'abord observons les variables {U_INDEX} et {L_INDEX}. D'après le premier cours vous devinerez qu'elles auront été parsées dans le fichier .php corespondant (à savoir includes/header_forum.php). Elles corespondent respectivement à la destination du lien et à la variable de la langue du texte utilisé. Etant donné qu'il s'agit de variable à la structure identique à celle vue dans la première partie (du type {VARIABLE}) elles ont été parsées à l'aide de la fonction:
$template->assign_vars( array( ... ));
Et étant donné la présence des balises délimitant le bloc liens_pages on sait qu'il y a eu l'utilisation de la fonction
$template->assign_block_var('liens_pages' ,array( ... ));
Sans ouvrir le fichier includes/header_forum.php on peut déjà se faire une idée de ce à quoi ressemble le fichier, on peut en faire facilement une première approche juste avec le fichier template:
<?php
include('class_tpl.php');
// Instance
$template = new Template("themes/IceCold/");
// Modèle
$template->set_filenames( array('body' => 'header.tpl.') );
// Parsage des variables
$template->assign_vars( array(
'L_INDEX' => $variable_de_langue,
'U_INDEX' => $variable_contenant_une_URL
));
// Si le membre n'est pas connecté on affiche le bloc
if ( $page_a_des_liens )
{
$template->assign_block_vars('liens_pages', array());
}
// On parse les variables
$template->pparse('body');
?>
Faà®tes le test vous même dans des fichiers à part.
voilà une première approche des blocs et de leur utilité, dans la prochaine partie nous essaierons de voir comment générer avec des boucles des blocs de codes dans le template
Cause Im as free as a bird now, And this bird you can not change. - Freebird - Lynyrd Skynyrd
There's someone in my head but it's not me. - Brain damage - Pink Floyd
I said baby, you know Im gonna leave you. - Babe I'm gonna leave you - Led Zeppelin
Father ? yes son, I want to kill you - The end - The Doors
Chef du projet FSB
- Age : 22 ans
- Messages : 14196
- Inscrit : 16 Septembre 2004
[size=18]> Variables de blocs__________________///[/size]
Nous avons vu dans la partie précédente que nous pouvions cacher de simples variables dans un bloc, et activer celui ci pour afficher ou non ces variables. Avant d'attaquer les boucles nous allons voir qu'il est possible de déclarer des variables spécifiques à un bloc dans la fonction de création de bloc, à savoir:
$template->assign_block_vars('bloc', array());
Si vous voulez créer des variables dans ce bloc il vous suffit de les parser de la mêem façon que pour le parsage de base, c'est à dire de cette façon:
$template->assign_block_vars('bloc', array(
'VARIABLE_1' => $variable_1,
'VARIABLE_2' => $variable_2
));
Les deux seules et grosses différences qu'il se passe, sont que ces variables ne sont valables que dans le bloc o๠elles sont appelées, et sont précédées d'un préfixe dans le ficher template. Ainsi nos deux variables parsées dans le .php seront récupérées de cette façon dans le .tpl:
<!-- BEGIN bloc -->
{bloc.VARIABLE_1}
{bloc.VARIABLE_2}
<!-- END bloc -->
[size=18]> Imbriquer des blocs_________________///[/size]
Après avoir lu tout ça vous savez sur le bout des doigts comment créer des blocs, vous programmez donc tranquillement votre petite page et puis vous vous rendez compte que vous aimeriez faire apparaà®tre ou non une partie de la page suivant si la personne est connectée ou pas. pas de problème vous créez un bloc comme vu dans le tutorial un peu plus haut. Puis vous aimeriez bien en plus créer un bloc dans ce bloc qui ne soit visible que par les admins. La solution serait donc de créer un bloc admin dans le bloc is_logged. Y-a-t'il des restrictions à tenir compte pour ce genre de cas de figure? oui il y en a et nous allons voir lesquelles.
Lorsque vous imbriquez des blocs entre eux vous devez voir une sorte de hiérarchie entre les blocs, quelques chose du style:
bloc1 >> bloc 2 >> bloc3 >> bloc4 etc...
Ce qui veut dire que vous avez un bloc1, que dans ce bloc se trouve un bloc2, dans celui ci un bloc3, etc... Soit une relation de parenté entre les blocs. Cette relation de parenté entre les blocs doit être visible si vous déclarez vos variables dans vos blocs.
Admettons par exemple que nous définissons des variables pour le bloc parent is_logged puis d'autres pour le bloc fils admin voici comment procédé du cà´té .php:
$template->assign_block_vars('is_logged', array(
'VARIABLE_1' => $variable_1
));
$template->assign_block_vars('is_logged.admin', array(
'VARIABLE_2' => $variable_2
));
Vous remarquerez que pour créer le bloc admin dans le bloc is_logged il faut le nommer is_logged.admin. Maintenant le code du cà´té .tpl:
<!-- BEGIN is_logged -->
{is_logged.VARIABLE_1}
<!-- BEGIN admin -->
{is_logged.admin.VARIABLE_2}
<!-- END is_logged.admin -->
<!-- END is_logged -->
La seconde restriction va un peu de soi, vous devez imbriquer correctement vos blocs. Ainsi le code suivant est faux:
<!-- BEGIN bloc_1 -->
<!-- BEGIN bloc_2 -->
<!-- END bloc_1 -->
<!-- END bloc_2 -->
Voilà , vous savez donc maintenant tout ce qu'il faut savoir sur les blocs, nous allons dans la prochaine partie attaquer les boucles.
Cause Im as free as a bird now, And this bird you can not change. - Freebird - Lynyrd Skynyrd
There's someone in my head but it's not me. - Brain damage - Pink Floyd
I said baby, you know Im gonna leave you. - Babe I'm gonna leave you - Led Zeppelin
Father ? yes son, I want to kill you - The end - The Doors
Chef du projet FSB
- Age : 22 ans
- Messages : 14196
- Inscrit : 16 Septembre 2004
[size=18]> Les boucles_______________________///[/size]
Voici la dernière partie du tutorial sur les templates, cette partie s'adresse un peu plus pour des personnes maniant un peu le PHP tout de même, notamment les boucles telles que while() ou for(). Afin de vous expliquer comment générer des boucles nous allons prendre un exemple pour FSB; nous allons généré la liste des membres (sans pagination de plusieurs page, simplement une liste des membres).
Pour commencer un peu de PHP rapidement, nous allons récupérer les données de la table membres, sachant que le nom de la table users avec son préfixe est contenu dans la constante TABLE_MEMBRES (je vais utiliser le système de classe de FSB, mais sachez tout de même que $bdd->requete corespond à mysql_query() et que $bdd->tableau() correspond à mysql_fetch_assoc()):
// On prend les valeurs de la table users
$sql = 'SELECT membre_id, membre_login FROM ' . TABLE_MEMBRES;
$result = $bdd->requete($sql);
while ( $user = $bdd->tableau($result) )
{
// On effectue une boucle pour récupéré les valeurs lignes par ligne
}
On a créé le squelette de la boucle qui va afficher ligne par ligne la liste des membres, tout cela n'est que du simple PHP, maintenant nous allons appliquer cela au système de template, voilà le code:
// On prend les valeurs de la table membres
$sql = 'SELECT membre_id, membre_login FROM ' . TABLE_MEMBRES;
$result = $bdd->requete($sql);
while ( $user = $bdd->tableau($result) )
{
$template->assign_block_vars('user', array(
'ID' => $user['membre_id'],
'NAME' => $user['membre_login']
));
}
et dans le fichier .tpl:
<table>
<!-- BEGIN user -->
<tr>
<td>{user.ID}</td>
<td>{user.NAME}</td>
</tr>
<!-- END user -->
</table>
Si vous avez suivi les parties précédentes cet exemple doit vous parler de lui même, l'utilisation des boucles est tout ce qu'il y a de plus simple
[size=18]> Conclusion________________________///[/size]
J'espère qu'à travers ce tutorial vous avez enfin compris comment programmer avec le système de template de FSB, vous allez désormais pouvoir ajouter des variables dans votre forum ou même commencer à programmer vos propres MODS.
Cause Im as free as a bird now, And this bird you can not change. - Freebird - Lynyrd Skynyrd
There's someone in my head but it's not me. - Brain damage - Pink Floyd
I said baby, you know Im gonna leave you. - Babe I'm gonna leave you - Led Zeppelin
Father ? yes son, I want to kill you - The end - The Doors
Chef du projet FSB
- Age : 22 ans
- Messages : 14196
- Inscrit : 16 Septembre 2004
[size=18]> Ajouts specifiques a FSB__________________///[/size]
Cete partie du tutorial ne concerne que le forum FSB, les parties precedentes du tutorial sont valables pour FSB mais cette partie traite d'options specifiques a ce forum. Les principaux changements sont le systeme de cache, la gestion tres simple de switch, les blocs conditionels et l'utilisation de code PHP.
[size=18]> Les switchs______________________________///[/size]
Un switch est une sorte de bouton, qui est soit allume soit eteint. Par exemple si on cree un switch ayant pour nom "test", avec dedans du code HTML, ce code n'apparaitra que si le bouton "test" est active. Avec le systeme basic de phpBB pour creer un switch il faut forcement passer par un block, ce qui est assez lourd car suivant la position de ce block dans s'autres blocks il faudra modifier aussi du cote PHP l'activation du switch. Le systeme de FSB permet de gerer tres simplement un switch, si on reprend notre switch "test", du cote .tpl le code devra etre :
<!-- IFEXIST test -->
mon code HTML
<!-- ENDIF -->
et pour activer le switch, dans le .php il sufira de faire :
$tpl->create_block('test');
Il est fortement conseille d'utilise cette methode pour faire des simples switchs pour trois raisons :
- Tout d'abord car le fait de voir un IFEXIST dans le template sera bien plus parlant, et de suite on verra qu'on a affaire a un switch.
- Ensuite car les switchs sont utilisables quelque soit leur position dans un block.
- Enfin car la facon de parser un switch est plus propre que de parser switch fait avec un block. En effet l'ancienne methode avec les blocks fait appel a une boucle qui ne possede qu'un seul passage, tandis que l'utlisation des nouveaux switchs fait appel simplement a une condition if ().
[size=18]> Les blocks conditionels__________________///[/size]
Le second ajout du template FSB, et pas des moindres, est la possibilite d'utiliser des blocks conditionels directement dans le template. Les 4 instructions disponibles sont :
- <!-- IF condition --> : cette instruction executera le code qui suit si condition est vrai.
- <!-- ELSE --> : cette instruction doit necessairement etre precedee d'une instruction <!-- IF condition -->. Si l'instruction IF n'est pas verifiee, alors le code apres le ELSE le sera.
- <!-- ELSEIF condition --> : Combinaison d'un IF et d'un ELSE.
- <!-- ENDIF --> : Fermer une condition.
Voici quelques exemples d'utilisation :
<!-- IF 5 == 5 -->
Cette condition est verifiee, on affiche ce code ici
<!-- ENDIF -->
un peu plus pousse :
<!-- IF 5 == 5 -->
Cette condition est verifiee, on affiche ce code ici
<!-- ELSE -->
Sinon on affiche cette partie
<!-- ENDIF -->
encore plus pousse :
<!-- IF 5 == 5 -->
Cette condition est verifiee, on affiche ce code ici
<!-- ELSEIF 4 == 5 -->
Si cette condition est verifie et que la premiere ne l'est pas, on affiche ce code
<!-- ELSE -->
Sinon on affiche cette partie
<!-- ENDIF -->
Bien entendu les exemples sont assez basiques et les conditions ne veulent rien dire, nous allons voir maintenant comment utilise des variables tres utiles pour notre template.
[size=18]> Les variables de condition__________________///[/size]
Toutes les variables que vous avez parser pour votre systeme de template sont accessible dans les conditions, admettons par exemple que vous parsez deux variables TEST1 et TEST2 :
$tpl->assign_vars( array(
'TEST1' => 10,
'TEST2' => "salut"
));
comme vu au tout debut du tutorial, ces variables seront affichables comme ceci : {TEST1} {TEST2}. Neanmoins telles qu'elles vous ne pouvez pas les utiliser dans des conditions. Pour pouvoir les utiliser dans des conditions vous devez les utiliser de cette facon : [TEST1] [TEST2]. Voici un exemple :
<!-- IF [TEST1] > 5 -->
La variable test1 est bien plus grande que 5, elle vaut {TEST1}
<!-- ENDIF -->
Ou bien
<!-- IF [TEST2] == "ciao" -->
Bonne soiree
<!-- ELSEIF [TEST2] == "salut" -->
Salut a vous
<!-- ELSE -->
Hello ^^
<!-- ENDIF -->
Vous pouvez bien entendu utiliser les variables des boucles dans vos conditions, par exemple :
<!-- BEGIN block -->
Cool je suis dans un block lol
<!-- IF [block.VARIABLE] == 20 && [block.VARIABLE2] == 13 -->
Condition dans une boucle
<!-- ENDIF -->
<!-- END block -->
Il existe deux variables speciales tres utiles que vous pouvez utiliser. Il s'agit de [n]ITERATION[/b] et COUNT_ITERATION.
La variable ITERATION vous donne acces au nombre de tour actuel de la boucle, ca corespond en quelque sorte a la variable $i dans une boucle for (). Vous pouvez ainsi directement dans le .tpl gerer des affichages un tour sur deux, par exemple :
<!-- BEGIN block -->
Ceci est un simple block
<IF [block.ITERATION] % 2 -->
ce code s'affichera tous les tours pairs
<!-- ELSE -->
Ce code s'affichera tous les tours impaires
<!-- ENDIF -->
La variable COUNT_ITERATION vous donne acces au nombre de tour total de la boucle en question, prenons un exemple un peu plus pousse avec comme exemple le .php aussi :
for ($i = 0; $i < 5; $i++)
{
$tpl->assign_block_vars('block', array());
}
<!-- BEGIN block -->
Ce block comporte {block.COUNT_ITERATION} tours, nous en sommes actuellement au {block.ITERATION} <br />
<!-- END block -->
ce qui affichera :
Citation
Ce block comporte 5 tours, nous en sommes actuellement au 0
Ce block comporte 5 tours, nous en sommes actuellement au 1
Ce block comporte 5 tours, nous en sommes actuellement au 2
Ce block comporte 5 tours, nous en sommes actuellement au 3
Ce block comporte 5 tours, nous en sommes actuellement au 4
Voila comment utiliser les variables dans les conditions ainsi que les deux variables speciales. Voyons maintenant un peu plus rapidement les dernieres specificites du template FSB.
[size=18]> Inclure du code template dans un autre__________________///[/size]
Voici tres rapidement une explication sur l'inclusion de code .tpl dans un autre. Il existe une commande <!-- INCLUDE_TPL file.tpl --> permettant d'inclure le code du fichier .tpl specifie avant le parsage. Voici en gros ce qu'il va se passer. Prenons deux fichiers, file1.tpl et file2.tpl :
<b>Ceci est un test</b>
<!-- INCLUDE_TPL file2.tpl -->
<i>Incluons un autre template</i>
<u>Je suis le code de file2.tpl</u>
Juste avant la compilation du template, tous les INCLUDE_TPL seront transformes par leur code respectif. Ainsi on obtiendra ce resultat juste avant le parsage :
b>Ceci est un test</b>
<u>Je suis le code de file2.tpl</u>
<i>Incluons un autre template</i>
[size=18]> Utiliser du code PHP__________________///[/size]
Voici tres rapidement comment utiliser du code PHP dans un template
<b>Le timestamp actuel est de :
<!-- BEGIN_PHP -->
echo time();
<!-- END_PHP -->
</b>
L'exemple est simple, mais immaginez toute la puissance de pouvoir utiliser du PHP dans ses templates, tout est personalisable a souhait et les template peuvent tous etres plus uniques les uns que les autres.
[size=18]> Gestion du systeme de cache__________________///[/size]
Un court paragraphe sur le systeme de cache de template. Au lieu d'instancier simplement votre classe, vous pouvez lui ajouter un second parametre $cache_path. Ce parametre est le chemin du dossier dans lequel votre fichier .tpl sera mis en cache. Psr exemple :
$tpl = new Tpl('themes/IceCold/', 'cache/');
le dossier en question DOIT etre CHMODer en 777. Le systeme de cache va enregistre des hybrides entre .tpl et .php, afin de ne pas devoir recompiler a chaque chargement de page, et va simplement inclure a chaque fois le nouveau fichier cree. Le fichier du cache ne sera mis a jour que si vous touchez a votre fichier .tpl, si cependant vous modifiez des donnes du cote .php uniquement, il faudra veiller a uploader aussi le .tpl pour le rafrachissement du cache (cette derniere phrase s'adresse surtout aux moddeurs).
Pour toute question suplementaire sur cette derniere partie merci de vous rendre sur
http://www.fire-soft-board.com. Vous trouverez le fichier de template modifie a partir des archives RC3 de FSB.
Cause Im as free as a bird now, And this bird you can not change. - Freebird - Lynyrd Skynyrd
There's someone in my head but it's not me. - Brain damage - Pink Floyd
I said baby, you know Im gonna leave you. - Babe I'm gonna leave you - Led Zeppelin
Father ? yes son, I want to kill you - The end - The Doors
|
|
24 Avril 2005, 15:04