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 5105 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 267 articles
|BIO_PSEUDO|
Commentaires récents

Publié par traitstone dans CMS

c'est bou et tres bon chose

Publié par mohamed dans php5

code comment publier tous les ficher en php5 et html5

Publié par samir dans CMS

merci

Publié par pat59 dans CMS

j espere que le jeu vas fonctionner car vous le donnez mais il est bloqué snifff

Publié par Christof dans CMS

Je pense qu'il y a un problème au niveau de l'affectation du longint "Color" dans la
variable de type byte "r". A mon avis, cela risque de provoquer une erreur de
vé...