Pseudo-templates

Note (24 août 2001) : la méthode décrite ici s'appelait auparavant "Pseudo-frames autrement". J'ai modifié le nom pour "Pseudo-templates". D'une part, cette appelation permet de distinguer plus facilement les différentes méthodes, et d'autre part, elle est plus adaptée puisque, d'une certaine manière, on peut considérer que cette méthode repose sur l'utilisation d'un fichier de template, dont le langage serait directement php.

Introduction

La méthode de développement proposée ici a pour objectif de faciliter la construction de sites web en php. C'est une alternative à la méthode des pseudo-frames utilisée sur de nombreux sites, ainsi qu'a la méthode de templates.

Les principes fondateurs sont :

Eviter au développeur de coder en dur partout les éléments qui sont communs a toutes les pages du site (liens de navigation, images de titre, structure générale etc…)
Permettre de coder simplement le HTML des pages
Garder un fonctionnement " normal " des url (une page visible par l’utilisateur = une vraie url .php)
Séparer le code qui génère l’intérieur d’une page du code qui fait tout l’habillage ainsi que les traitements impératifs (vérification de droits, etc…)

Principe

Le principe fondamental est de dire qu’une page HTML est divisée en plusieurs zones.

Imaginons par exemple un site sans frames dont la structure assez classique serait la suivante :

Dans le code HTML, on aurait différentes instructions correspondant aux différentes zones :

<html>
<head><title>Titre de la page</title></head>
<body>
<table width=100%>
<tr><td collspan=2><img src=ImageTitre.gif></td></tr>
<tr>
<td width=150><!—Ici se trouverait le code de la partie navigation--></td>
<td><!—Ici se trouverait le code du contenu--></td>
</tr>
</table>
</body>
</html>

En principe, la position des différents bloc est assez semblable sur l’ensemble des pages du site, ce qui oblige a recopier dans tous les fichiers le style du tableau.

On propose maintenant de découper la page en zones, puis de définir chaque zone dans une fonction ou une variable, puis d’appeler ces élément au fur et a mesure de la construction de la page.

Utilisation basique

En reprenant l’exemple ci dessus, nous supposerons que la navigation et l’image de titre sont des éléments statiques du site.

Nous allons donc suivre le schéma suivant :

Déclarer une fonction, que nous appellerons gContenu(), qui effectuera l’affichage du code à l’écran
Ecrire le code qui placera le contenu au bon endroit.

Concrètement, si on le faisait dans un seul fichier, on aurait :

Index.php :

<?
function gContenu()
{
echo " Mon contenu de page "
}
?>
<html>
<head><title>Titre de la page</title></head>
<body>
<table width=100%>
<tr><td collspan=2><img src=ImageTitre.gif></td></tr>
<tr>
<td width=150><!—Ici se trouverait le code de la partie navigation--></td>
<td>
<? gContenu() ?>
</td>
</tr>
</table>
</body>
</html>

Cet exemple n’est pas très utile, mais il montre le fonctionnement global du système. On voit bien en effet que la fonction va placer le texte de la fonction à l’endroit ou celle-ci est appelée.

Tirer parti du fonctionnement du parseur php

Le parseur php possède un particularité importante, c’est qu’il autorise à fermer les balise php pour insérer du code html, au sein même de la définition d’une fonction.

En pratique, la fonction :

<?
function gContenu()
{
echo " Bonjour a tous "
}
?>

est identique à :

<?
function gContenu()
{
?>Bonjour a tous<?
}
?>

L’énorme intérêt de cette méthode, c’est qu’il devient très simple de coder de gros pavés de HTML insérés dans une fonction. On n’a plus de problèmes de quotes a insérer un peu partout.

function gContenu()
{
echo " <table width=\"200\"><tr><td bgcolor=\"green\">Bonjour</td></tr></table> "
}

devient :

function gContenu()
{
?>
<table width="200"><tr><td bgcolor="green">Bonjour</td></tr></table>
<?
}

Ce qui est nettement plus lisible.

Les fonctions permettent donc de saisir très facilement des grandes quantités de HTML. On garde la simplicité de saisie du code HTML normal, avec en plus la possibilité de positionner rapidement ce code dans la page.

Avec un " require " de plus

On l’a vu, l’idée initiale était de ne pas recoder partout la navigation et l’allure générale du site. " require " va nous permettre de répondre a ces besoins, en autorisant l’inclusion d’un fichier dans lequel nous allons définir l’allure.

En pratique, on va avoir :

MaPage.php

<?
function gContenu()
{
// Quelques traitements éventuels en php
?>
< !—Tout mon code HTML-->
<?
// D’autres traitements s’il y a besoin
}

require " Modele.php "
?>

Modele.php

<html>
<head><title>Titre de la page</title></head>
<body>
<table width=100%>
<tr><td collspan=2><img src=ImageTitre.gif></td></tr>
<tr>
<td width=150><!—Ici se trouverait le code de la partie navigation--></td>
<td><? gContenu() ?></td>
</tr>
</table>
</body>
</html>

A partir de maintenant, on peut faire autant de page sur la même strcuture que " MaPage.php " avec la déclaration de la fonction gContenu(). L’affichage sera géré automatiquement dans le fichier Modele.php, la navigation toujours a la même place, et le contenu toujours dans la même colonne.

Si l’on voulait ajouter d’un seul coup une colonne sur toutes les pages d’un site reposant sur ce principe, il suffirait de changer le fichier Modele et d’ajouter une colonne au tableau. De même, un lien modifié dans la partie " Navigation " serait immédiatement modifié sur toutes les pages.

Aller plus loin

Il est souvent pratique de mettre en place une gestion automatique du titre de la page (le <title> html). Avec cette technique, il suffirait de déclarer une variable : gTitle que l’on initialise dans la page :

MaPage.php

<?
gTitle = " Une page comme ça ";

function gContenu()
{
// Quelques traitements éventuels en php
?>
< !—Tout mon code HTML-->
<?
// D’autres traitements s’il y a besoin
}

require " Modele.php "
?>

Modele.php

Notons au passage qu’on a utilisé une variable et non plus une fonction, dans la mesure ou les instructions de titre ne sont pas du HTML, et ne contiennent donc pas de quotes. L’intérêt de récupérer les informations dans une variable est de pouvoir effectuer des tests comme c’est le cas ici avant d’afficher le titre.

On peut déclarer autant de variables et de fonctions que l’on souhaite de cette manière. Cette technique fonctionne pour la génération de HTML, mais elle peut aussi servir pour tous les traitements qui sont effectués dans toutes les pages du site.

Par exemple pour la génération de statistiques :

Dans chaque fichier principal, on déclare une variable gStat, auquel on donne une valeur correspondant a la page par ex : gStat = " Page d’accueil "
Dans le fichier Modele, on commence par un bout de script qui inscrit la valeur de gStat dans une base de données, avec l’heure etc…

Il est bien évidemment possible de faire dans la fonction gContenu n’importe que traitement de base de données, d’interrogation, etc…

Pour rendre le code plus lisible, il est plutot recommandé d’utiliser un prefixe sur les variables et fonctions destinées a l’affichage, c’est ici la lettre " g " comme " global ".

Conclusion

Cette manière de coder permet de mettre en place très simplement des sites homogènes, sans avoir a recopier les mêmes éléments dans toutes les pages.

Dans la mesure ou les fichiers du site ne contiennent plus que le cœur de la page, elle permet aussi de mieux structurer les développements, et de s’y retrouver plus facilement.

Le fonctionnement des urls reste parfaitement transparent, ce qui est un grand avantage, surtout pour tout ce qui concerne la génération des statistiques.

On peut étendre cette méthode de beaucoup :

Créer plusieurs fonctions de contenu gContenuA et gContenuB que l’on peut appeler alternativement, ou fournir un parametre lors de l’appel a gContenu() pour modifier son comportement
Créer plusieurs fichiers de Modele, si le site comporte plusieurs sections d’aspect très distincts (ou 1 fichier pour la lecture a l’écran, un fichier pour l’impression)
Ajouter de nombreuses variables dans les pages, pour gérer de la sécurité, des rôles, des sessions, ….