30
décembre 07Web templates
Le gabarit
Avant toute chose, si vous n’êtes pas familier avec la notion de gabarit (ou de template), vous pouvez faire un tour ici.
Nous allons commencer par créer une page HTML simple. Seulement, nous allons prendre soin de séparer la structure de la page du contenu spécifique à la langue. En effet, comme nous souhaitons obtenir un résultat multilingue, il est nécessaire de spécifier quel sera les contenus traduits. Pour cela, nous allons utiliser une syntaxe particulière (et arbitraire), qui nous permettra d’isoler une balise, correspondant à un type de contenu. Au hasard :
@@{balise}@@Maintenant, veillons à choisir une balise par bloc de texte à traduire. On pourrait établir une charte de nommage de la façon suivante :
@@{id-de-la-div_identifiant-explicite}@@Donc, par exemple :
@@{menu_home}@@Ainsi, chaque balise sera unique et facilement retrouvable. On obtient alors un résultat semblable à cela (pour rester sur l’exemple du menu) :
[...]
<div id="menu"><a href="./">{menu-home}<a/> |
<a href="presentation/">{menu-presentation}</a> |
<a href="creations/">{menu-crea}</a> |
<a href="contact/">{menu-contact}</a> |
<a href="liens/">{menu-liens}</a></div>
[...]On enregistre le fichier final dans un répertoire spécifique (include/tpl/ par exemple). Si vous le désirez, vous pouvez lui donner une autre extension que .html. Par exemple, mes fichiers sont habituellement en .tpl. Reproduisez la même opération pour toutes les pages que vous souhaitez traduire.
Le fichier XML
LÃ encore, quelques infos sur le format XML ici.
Créons maintenant notre fichier XML qui accueillera les traductions du contenu de notre site. Je vous propose une arborescence du type
<balise> <fr>Texte en français</fr> <en>Texte en anglais</en> </balise>
Ce qui donnerait quelque chose comme ça :
<?xml version="1.0" encoding="utf-8"?> <traduction> <!-- Le menu --> <menu-home> <fr>home</fr> <en>home page</en> </menu-home> <menu-presentation> <fr>présentation</fr> <en>about me</en> </menu-presentation> [...]
Veillez bien à utiliser les mêmes noms de balises que celles que vous avez créées dans vos templates.
Le code PHP
Maintenant que nous disposons de la structure HTML de nos pages d’un côté et du contenu multilingue de l’autre, il nous faut mélanger les deux. Pour cela, nous allons passer le code HTML à la moulinette et repérer toutes les balises (entre {}).
On ouvre le fichier .tpl et le récupère sous la forme d’une grande chaine de caractères :
$template = file_get_contents("include/tpl/".$_GET['page'].".tpl");
On ouvre le fichier xml (attention, PHP5) :
$xml = simplexml_load_file("include/xml/trad_".$_GET['page'].".xml");
On parcourt notre chaîne $template et on stocke dans un tableau $balise toutes les balises repérées dans le code HTML :
preg_match_all("/{(.*)}/", $template, $balise);
On parcourt ce tableau. Pour chacune des balises, on va trouver dans le fichier XML le nœud correspondant à ce contenu. Ainsi, on peut récupérer la traduction dans la langue voulue (stockée en session par exemple). On stocke celle-ci dans un autre tableau (ici $contenu_html) :
foreach ($balise[1] as $ligne) { $champ = $xml->xpath("//".$ligne); $contenu_html[] = utf8_decode($champ[0]->$_SESSION['lang']); }
On dispose donc de deux tableaux différents. Dans le premier ($balise), toutes nos balises du template. Dans le second ($contenu_html), son contenu traduit. Il nous suffit de reprendre le code HTML du template (la chaine $template) et d’y remplacer les balises par leur traduction :
echo str_replace($balise[0],$html_val,$template);
Et voilà ! Pour afficher la page (home par exemple), appelez index.php?page=home. Vous stockerez le template dans include/tpl/home.tpl et la traduction dans include/xml/trad_home.xml.



… 2 ans et demi après…
Ou alors, utilisez Smarty !
http://www.smarty.net/
Valentin le 29 juin 2010 Ã 10:19
Hiya every one, cool board I have found It incredibly helpful & its helped me a great deal
I hope to give something back & guide other people like this website has helped me
_________________
jailbreak iphone 4.0
Esoxytetvieve le 27 juillet 2010 Ã 20:27