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

Publié par Amal dans tuto

pour moi j'ai créé une liste déroulante en liaisant avec la base de donnée déja existant mais la valeur sélectionné ne peut pas etre afficher jamais et...

Publié par vieux dans CMS

et comment ce le procurent ton ?

Publié par Franzi dans java

Bonjour,
Le code est simple et compile, après être entré dans public void connect, il n'effectue pas this.session.get.transport et s'arrête. Sous eclipse avec Tomcat, j'ob...

Publié par robbie dans tuto

desole pour le message en multiple j'ai eu un ptit beug

Publié par ali dans logiciel

it is very good i am very happy becose for hand cap helpn tha is a good work