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

Publié par FOBEC dans CMS

Un chronomètre, des challenges et l'affichage des meilleurs scores sont prévus. Si ça vous intéresse, laissez moi un p'tit mot !!!

Publié par Quentin dans tuto

Merci pour ces petits codes java script qui me sont d'un grand secours pour mon TP :)

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 Fobec dans php5

a priori il manque simplement le R dans le nom de la constante
PDO::ATTR_ERRMODE en remplacement de PDO::ATT_ERRMODE

Publié par neuro dans CMS

exemple edifaint et trés interessant