Les Pseudo Frames

Pourquoi utiliser des frames?

Comme je le disais, les frames permettent de mettre en place un découpage d'une page en plusieurs autres. Ceci permet de régler certains problèmes de maintenances d'un site. En effet lorsqu'un menu apparaît sur de nombreuses pages, il peut être fastidieux de le modifier sur chacune de ces pages.

Grâce aux frames, il est possible de n'avoir ce menu que sur une seule page. Les autres pages du site seront toujours affichées accompagnées de ce menu grâce à un système de cadres.

Cependant, les frames posent un certain nombre de problèmes.

Pourquoi ne pas utiliser les frames?

En règle générale, il est bon de développer un site Web en respectant une norme la plus strict et la plus récente possible. Le XHTML 1.0 Strict est un bon exemple, et cette norme interdit l'utilisation des frames ou frameset. Ceci n'explique pas pourquoi faut-il se priver des frames mais constitue déjà un premier argument.

Les frames posent tout une série de problèmes :

Des problèmes d'accessibilité

Un certain nombre de navigateurs sont incapables d'interpréter les frames. En les utilisant, vous réduisez ainsi le nombre potentiel de visiteurs que votre site pourrait accueillir.

De référencement

On sait aujourd'hui que les bot des différents moteurs de recherche existant sur le Web ne sont pas vraiment friant des frames. De plus, un visiteur qui cliquera sur un résultat d'une recherche pourra arriver directement sur une page sans avoir les frames affichées. Il perdra ainsi le menu et, là, aucune chance pour qu'il visite d'autre pages de votre site.

Il existe bien un moyen de régler ce second problème à l'aide de java script, mais on en revient alors à des problèmes d'accessibilité.

Les frames posent encore d'autre problèmes, une petite recherche vous en donnera certainement la liste complète. Nous avons vu ici les principaux.

Pour palier aux problèmes des frames, il nous faut une solution qui apporte les mêmes avantages sans les inconvénients bien sur. C'est justement là qu'interviennent les pseudo frames. Il s'agit d'un système qui consiste à construire une page à partir de plusieurs fichiers mais côté serveur uniquement. Ainsi, le mécanisme est totalement invisible pour le client qui ne verra qu'une page correctement construite et sans frame.

Pour ce faire, nous allons devoir utiliser un langage côté serveur. PHP satisfera parfaitement ce besoin, mais il faut tout de même savoir que n'importe quel autre langage côté serveur pourra faire l'affaire suivant le même principe.

Fichiers et arborescence

Classiquement, on retrouve pour une page quatre parties biens distinctes :

L'en-tête (header)
Le pied de page (footer)
Le menu
Le contenu de la page

On aura donc 3 fichiers qui seront systématiquement les mêmes pour toutes les pages d'un site, à savoir :

header.html (L'en-tête)
footer.html (Le pied de page)
menu.html (Le menu)

Et un quatrième fichier sera utilisé pour construire une page, il ne s'agira pas du même fichier en fonction de la page que l'on souhaite afficher. Pour structurer un peu l'arborescence de notre site, ou pourra créer deux répertoires. L'un contenant les fichier communs à toute les pages du site et l'autre contenant les différents fichiers qui contiendront les contenus des pages. Ces répertoires pourront être nommés respectivement includes (du verbe To Include (inclure) de l'anglais) et pages.

En plus de ces répertoires et fichiers, il nous faudra un fichier supplémentaire qui contiendra les instructions de constructions de la page à partir des différents fichiers. Nous utiliserons pour cela un fichier index.php placé à la racine de notre arborescence.

On obtiendra donc l'arborescence suivante :

index.php
includes/
- header.html
- footer.html
- menu.html
pages/
- accueil.html
- autre.html
- etc.html

Bien entendu, d'autres arborescences pourront être mises en place mais celle-ci satisfera la majorité des cas.

Contenu des fichiers

Excepté le fichier index.php, tout les autres fichiers devront être remplis avec le code html qui compose les pages de votre site. Cependant, vous ne devrez pas y placer exactement le même contenu que si vous aviez utilisé des frames. En effet, il ne faudra pas placer les en-têtes de pages dans chacun des fichiers mais seulement dans header.html. Un exemple sera certainement plus parlant :

includes/header.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Le titre de la page</title>
  <link rel="stylesheet" type="text/css" href="/dotclear/themes/CodeWeb/style.css" media="screen" 
</head>
<body>

Comme nous l'avons déjà vu, notre script index.php vas se charger de construire une seule page à partir des fichiers que nous avons énuméré. Il ne s'agit donc plus de créer plusieurs pages et de les afficher dans des cadres. Ainsi, le code d'en-tête (<head>) ne devra se trouver que dans le fichier header.html et dans aucun autre. De même, le code qui sera destiné à fermer le <body> et <html> ne devra se trouver que dans le fichier footer.html.

includes/footer.html

</body>
</html>

Notre menu pourra être formé d'une simple liste :

includes/menu.html

<ul id="menu">
  <li><a href="index.php">Accueil</a></li>
  <li><a href="index.php?page=autre">Autre</a></li>
</ul>

Il ne nous restera ensuite plus qu'a créer autant de pages que nous le souhaitons dans le répertoire pages. Le minimum serait une page index.html qui sera celle qui sera affichée par défaut. C'est à dire lorsque la page demandée au script index.php ne correspond à aucune page connue ou lorsqu'aucune page n'est demandée. On créera ici une page supplémentaire nommée autre.html pour coller au menu que je vous proposé en exemple.

pages/index.html

<h1>Accueil</h1>
<p>Bienvenue sur l'accueil.</p>

pages/autre.html

<h1>Autre</h1>
<p>Une autre page.</p>

Construction de la page

Comme nous l'avons vu, c'est le script index.php placé à la racine de notre arborescence qui sera chargé de construire une page à partir de tout les fichiers dont il dispose. Ainsi, pour afficher une page on fera toujours appel au fichier index.php avec un paramètre page dans l'URL (méthode GET). On pourra ensuite lire ce paramètre dans notre script via la variable $_GET['page'].

Par exemple, pour afficher la page autre.html, on utilisera le lien suivant : http://www.site.com/index.php?page=autre Il s'agit du second lien proposé dans le menu d'exemple.

index.php

<?php
 
  // On définit une liste de pages autorisées au moyen d'un tableau
  // Vous devrez ajouter toutes les pages se trouvant dans le répertoire
  // pages pour les rendre accessibles.
  // Vous pouvez également automatiser la génération de ce tableau
  // en lisant le contenu du répertoire pages/
  $pagesOk = array('index','autre');
 
  // On commence par lire la page demandée
  // Si ce n'est pas vide
  if(!empty($_GET['page']))
    // On lit la valeur demandée
    $page = $_GET['page'];
  else
   // Sinon on utiliser index comme page par défaut
   $page = 'index';
 
  // On vérifie que la page demandée se trouve dans les pages autorisées
  if(!in_array($page,$pagesOk))
  {
 
    // Elle n'y est pas, dans ce cas on peut renvoyer une erreur 404
    header("HTTP/1.0 404 Not Found");
 
    // On stop l'exécution du script ici
    exit;
 
  }
 
  // Arrivé ici, on sait que la page demandée existe forcément.
  // On va donc pouvoir commencer la construction de la page.
 
  // On commence par inclure l'entête
  require('./includes/header.html');
 
  // Puis le menu
  require('./includes/menu.html');
 
  // On inclut la page demandée
  require('./pages/'.$page.'.html');
 
  // On inclut enfin le pied de page
  require('./includes/footer.html');
 
?>

Pour aller plus loin

Protéger vos répertoires contre les accès directes

En l'état, un visiteur peut toujours se rendre dans l'arborescence de votre site, et plus particulière dans le répertoire pages ou encore includes. Il pourra donc visualiser n'importe quel page seule. Pour pallier à ce problème, il vous suffira de placer dans chacun des deux répertoires un fichier nommé .htaccess et contenant les instructions suivantes :

deny from all

Vos répertoires seront ainsi totalement inaccessibles publiquement. Ils le resteront bien sur via FTP et pour votre script index.php.

Réécriture d'URL

Il pourrait être intéressant de simuler l'existence de chacune des pages sur notre site. En effet, ceci facilite généralement la mémorisation des URL et améliore le référencement. Pour ce faire, nous allons exploiter une fonctionnalité offerte par Apache. Il s'agit de la réécriture d'URL, aussi appelée URL Rewriting en anglais. Il faut savoir que cette fonctionnalité est désactivées sur certaines formules d'hébergement, le plus souvent les gratuites. A vous de tester.

Pour mettre en oeuvre cette fonctionnalité, placez un fichier nommé .htacces à la racine de votre arborescence. Placez-y les instructions suivantes :

# On active la réécriture d'URL
RewriteEngine on

# On définit une seule règle de réécriture
RewriteRule (.*)\.html index.php?page=$1 [L]

Vous pourrez alors utiliser directement l'URL suivante pour afficher la page autre avec l'en-tête, le menu et le pied de page : http://www.site.com/autre.html. Le serveur appellera en fait index.php?page=autre de façon totalement invisible pour le visiteur.

Lister automatiquement les pages autorisées

Plutôt que de créer une liste figée dans votre script index.php, vous pouvez également générer dynamiquement la liste des pages autorisées en lisant le contenu du répertoire pages. Le script index.php pourra alors contenir les instructions suivantes :

<?php
 
  // On initialise la liste des pages valides à un tableau vide
  $pagesOk = array();
 
  // On ouvre le répertoire des pages
  $pagesDir = opendir('./pages/');
 
  // On lit le répertoire
  while($file = readdir($pagesDir))
  {
 
    // On vérifie qu'il s'agit bien d'un fichier
    // et que son extension est bien .html
    if( is_file($file) && substr($file,-4,4)=='.html')
 
      // Si c'est bien le cas, on ajoute la page à la liste des pages autorisées
      $pagesOk[] = $file;
  }
 
  // On commence par lire la page demandée
  // Si ce n'est pas vide
  if(!empty($_GET['page']))
    // On lit la valeur demandée
    $page = $_GET['page'];
  else
   // Sinon on utiliser index comme page par défaut
   $page = 'index';
 
  // On vérifie que la page demandée se trouve dans les pages autorisées
  // La liste contient désormais l'extension des fichiers, on ajoute donc '.html'
  // a la variable $page à contrôler.
  if(!in_array($page.'.html',$pagesOk))
  {
 
    // Elle n'y est pas, dans ce cas on peut renvoyer une erreur 404
    header("HTTP/1.0 404 Not Found");
 
    // On stop l'exécution du script ici
    exit;
 
  }
 
  // Arrivé ici, on sait que la page demandée existe forcément.
  // On va donc pouvoir commencer la construction de la page.
 
  // On commence par inclure l'entête
  require('./includes/header.html');
 
  // Puis le menu
  require('./includes/menu.html');
 
  // On inclut la page demandée
  require('./pages/'.$page.'.html');
 
  // On inclut enfin le pied de page
  require('./includes/footer.html');
 
?>

A noter que la fonction glob() pourra également servir à créer la liste des pages autorisées.

On pourra également mettre en place un système de cache permettant de sauvegarder la liste des pages autorisées plutôt que de chercher à la reconstruire pour chaque appel.

Conclusion

Une fois ce système en place, vous pouvez simplement modifier les fichier d'en-tête (header.html), de menu (menu.html) et de pied de page (footer.html). Ces modifications seront automatiquement répliquées sur l'ensemble des pages qui composent votre site.

Code-Web.org