Publié le 04/04/2011
Auteur fobec
Réseaux sociaux
0 partages
0 tweets
0 plus
4 commentaires

Les principes d'un systeme de template HTML

Un template, appelé également gabarit, est une manière de construire ses pages HTML. Dans l'esprit de l'architecture MCV, le principe est de séparer le code PHP proprement dit de la mise en forme HTML. Ainsi l'interface d'un site peut être changée à volonté en adoptant un autre template sans pour autant modifier une ligne de code.
Afin d'illustrer le principe, l'exemple utilise 3 fichiers: un gabarit HTML, une class moteur de template et un fichier php contrôleur.

Gabarit HTML contact.tpl

La mise en page et les styles sont regroupés dans un gabarit HTML. Les données qui seront affichées à l'internaute sont balisées avec les caractères {}.
<html>
<head>
<title>Fiche de {NAME}</title>
</head>
<body>
<table>
  <tr>
    <td>Nom</td>
    <td>{NAME}</td>
  </tr>
  <tr>
    <td>Prenom</td>
    <td>{FNAME}</td>
  </tr>
  <tr>
    <td>Telephone</td>
    <td>{CALLNUMBER}</td>
  </tr>
</table>
</body>
</html>

Moteur de template TPLEngine.php

Class du moteur de template regroupant les fonctions de chargement du template et d'ajout de valeurs à afficher.
<?php
/**
 * Moteur de template basique
 * Stocker et remplacer les champs dans la page HTML
 * 
 * @author Fobec 2011
 */
class TPLEngine {
   /**
     * @var string the template buffer
     */
    protected $output="";
 
    /**
     * @var array tableau des couples champs/valeurs
     */
    private $dataset=array();
 
    /**
     * Charger le template à partir d'un fichier
     *
     * @param string $_file nom complet du fichier à ouvrir
     */
    public function load($_file) {
        $this->dataset=array();
 
        if (!file_exists($_file)) {
            throw new Exception("File $_file not found !!!");
        }
 
        $this->output=file_get_contents($_file);
    }
 
    /**
     * Magic : fixer les couples champs/valeur
     *
     * @param string $name nom du champs
     * @param string $value valeur
     */
    public function  addValue($key, $value) {
        if (isset($this->dataset[$key])) {
            $this->dataset[ $key ].="\n".$value;
        } else {
            $this->dataset[ $key ] = $value;
        }
    }
 
    /**
     * Assembler la page HTML pour l'affichage
     * @return string code HTML
     */
    public function   __toString() {
        $this->parse();
      //  $this->deleteUnusedTags();
        return $this->output;
    }
 
    /**
     * Remplacer les champs par la valeur pour l'ensemble du dataset
     */
    private function parse() {
        foreach ($this->dataset as $key  => $val) {
            $this->output=str_replace("{".$key."}", $val,  $this->output);
        }
    }
}
?>

Génération d'une page HTML

Les étapes de génération d'une page HTML sont:
- ouverture du gabarit HTML contact.tpl,
- ajout des valeurs à afficher (les données peuvent être chargées à partir de la base de données),
- remplacement des champs balisées {} par les données à afficher.
<?php
require_once 'tplengine.php';
 
$tplengine=new TPLEngine();
$tplengine->load("contact.tpl");
$tplengine->addValue('NAME', 'Duchemin');
$tplengine->addValue('FNAME', 'Georges');
$tplengine->addValue('CALLNUMBER', '12 34 56 78 90');
 
echo $tplengine;
?>

Points forts du système de template

Clarté du code: le code PHP est bien plus clair. La maintenance et les évolutions logiciel sont facilitées,

Performance: en séparant le gabarit du code PHP, un développeur et un webdesigner peuvent travailler en même temps sur le projet,

Flexibilité: modifier l'apparence d'une page web devient chose facile car seul le gabarit HTML sera modifié. De plus, il existe de nombreux templates à télécharger sur le web, par exemple pour le CMS WordPress.

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.
avatar Do

Publié par Do

le 06/04/2011 à 09:49:43

Et lorsque l'on a un recordset a parcourir ? Que faut-il passer a la vue ? ligne par ligne ou un tableau ? ?
Le PHP est a lui seul deja un systeme de template :
>?php
echo $titre;
?>

Est-il judicieux de surcharger le traitement en terme de code (addValue...) et en terme de machine (parser la vue).

avatar Fred

Publié par Fred

le 07/04/2011 à 14:32:06

J'suis d'accord avec Do, PHP est deja un moteur de template.
Disons que le moteur de template permet de separer le code de la vue pour les debutants qui ont besoin qu'on leur impose des bornes..
.
Un bon developpeur, avec de l'experience, placera dans sa vue le code de presentation est uniquement ici. Les debutants sont souvent tentes d'y mettre l'acces a la BD, des calculs, etc.

avatar stam

Publié par stam

le 04/11/2011 à 17:18:20

Le code est interessant. Que doit contenir le fichier index ?

avatar Fobec

Publié par Fobec

le 04/11/2011 à 17:22:54

En fait, une page index est construite de la même manière que l'exemple test.php.

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
tuto - webmaster
Mise a jour
04/04/2011
Visualisation
vu 3666 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 261 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Loualfcha dans CMS

Je n'arrive pas &Atilde;&nbsp; installer le logiciel<br>Message d'erreur: DeleteFile a &Atilde;&copy;chou&Atilde;&copy;; code 5<br>Acc&Atilde;&um...

Publié par Coll dans java

Excuse moi, mais pourrais tu expliquer un peu plus precisement ce que tu fais lorsque tu convertis en gris je comprends l'idee mais pas ce que chaque action fait precisement et le cacth a la fin. Parc...

Publié par steev dans java

Bjr,
je voudrai savoir comment mettre le son en pause?
aussi comment faire qr qu'il tourne tjr?

Publié par nicolasterraes dans tuto

bonjour,
je ne comprends pas cette tape:

Les liens vers les feuilles de style et les fichier js sont declares dans les pages HTML. Modifiez les balises meta ainsi:
Feuille de style:
d...

Publié par Romaingineer dans tuto

Question un peu similaire celle de nicolasterraes.

Je ne trouve pas de ligne dans wpcontentthemes, j'en trouve 2 ou trois dans WP includes mais qui utilsent la fonction echo...

Du coup...