PHP : faciliter la maintenance d'un site web avec la fonction include

En tirant parti de la fonction dynamique include, quelques astuces de conception permettent de rendre la maintenance d'un site web bien plus aisée. L'idée étant d'isoler les contenus récurrents dans des fichiers.

Comme nous l’avons vu dans l’article Pourquoi optimiser un site web ?, améliorer la vitesse de chargement des pages d’un site à au moins quatre impacts directs : le nombre de visiteurs (et par effet de levier le référencement), un manque à gagner économique et un impact environnemental réel. Ensuite, nous avons vu dans l’article Optimiser l’utilisation des images d’une page web comment améliorer la performance du poste le plus gourmand en ressources inutiles, les images, avec la prétention de réduire, parfois, de plus de 75% le volume global.

Pour poursuivre la série, je vous propose maintenant des astuces de conception avec lesquelles il sera bien plus aisé de maintenir votre site.

Astuces simples pour les fichiers

Dans ce chapitre, je vais évoquer l’optimisation de site Web, mais plutôt sous l’angle de la facilité de maintenance et d’évolution.

En effet, la plupart des pages adoptent une conception très similaire avec l’incontournable succession du <head> puis du <body>.

<head>

l'ensemble des balises <meta>,
un titre et une description,
les appels aux fichiers CSS externes,
les appels aux fichiers JavaScript externes,
le code d'initialisation JavaScript

<body>

l'en tête de la page,
le breadcrumb (ou chemin de fer),
le contenu, souvent organisé par colonnes et/ou blocs d'informations,
le pied de page.

Si vous utilisez PHP, ce qui est le cas de 78,5% des sites[1], vous pouvez tirer un grand profit de la fonction include ! Pour rappel, cette fonction permet d’insérer, sans interprétation préalable, un fichier dans un autre. Si vous êtes prêt à transformer vos fichiers statiques HTML en fichiers dynamiques PHP, voyons comment nous pouvons très simplement améliorer la maintenance.

Note : Bien entendu, des fonctions équivalentes existent pour d’autres langages interprétés au niveau du serveur, alors consultez les documentations, l’adaptation ne devant certainement pas vous poser grand problème.

Pour le bloc <head>

A partir de la figure précédente, nous pouvons identifier des éléments communs à toutes les pages, au niveau des balises <meta>, des appels CSS et JavaScript ainsi que du code d’initialisation.

Tous ces éléments peuvent avantageusement être regroupés dans un fichier include/metaHeader.inc.php, appelé de manière générique et permettant ainsi de regrouper les constantes qui seront, de fait, plus faciles à maintenir sans erreur.

Pour le bloc <body>

Toujours à partir de la même figure de référence, il est possible d’identifier des éléments récurrents et statiques comme :

l’en-tête de page qui se déplace dans un fichier include/htmlHeader.inc.php,
la colonne de gauche, souvent associée à un menu, qui se retrouve dans le fichier include/htmlBodyLeft.inc.php,
la colonne de droite, souvent associée à de la publicité, un nuage de tags (etc.) qui s’exporte dans le fichier include/htmlBodyRight.php,
le pied de page, pour le copyright, les liens de contact (etc.) qui se place dans le fichier include/htmlFooter.inc.php.

En adoptant cette démarche, la structure de la page se simplifie :

<html> 
   <head>
        <?php include("include/metaHeader.inc.php"); ?>
        <!-- les éléments spécifiques de la page -->
        <title>...</title>
        <meta name="description" content="..." />
        <meta name="keywords" content="..." />
        <link href="css/maPage.css" rel="stylesheet" type="text/css" />
        <style>
              /* Ne contient que les éléments spécifiques */
              ...
        </style>
        <script src="scripts/..." type="text/javascript"></script>
        <script type="text/javascript">
              /* Ne contient que les éléments spécifiques */
              ...
        </script>
   </head>
   <body>
        <!-- en-tête -->
        <?php include("include/htmlHeader.inc.php"); ?>
        <!-- le spécifique -->
        ...
        <!-- breadcrumb -->
        ...

        <!-- colonne gauche -->
        <?php include("include/htmlBodyLeft.inc.php"); ?>
        <!-- le spécifique -->
        ...

        <!-- colonne centrale -->
        ...

        <!-- colonne droite -->
        <?php include("include/htmlBodyRight.inc.php"); ?>
        <!-- le spécifique -->
        ...
   </body>
</html>

Et, par exemple, pour le contenu du fichier include/metaHeader.inc.php, nous pouvons avoir :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Expires" content="never" />
<meta http-equiv="Cache-Control" content="public" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta name="distribution" content="global" />
<meta name="robots" content="Index,Follow" />
<meta name="country" content="France" />
<meta name="language" content="french" />
<meta name="copyright" content="..." />
<meta name="email" content="...@monsite.fr" />
<meta name="author" content="..." />
<meta name="designer" content="..." />
<meta name="publisher" content="..." />

<link rel="shortcut icon" href="shortcut.ico" type="image/x-icon" />
<link rel="icon" href="icon.png" type="image/png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="alternate" type="application/rss+xml" title="..." href="..." />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="..." rel="stylesheet" type="text/css" />
<script src="scripts/default.min.js" type="text/javascript"></script>
<script src="..." type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    /* code d'initialisation */
    ...
</script>

À ce stade, vous avez compris comment rationaliser votre structure de fichiers afin d'améliorer grandement la maintenance, sans qu'il soit nécessaire d'illustrer les fichiers include/html_xxx_.inc.php.

Avec cette approche, le fichier include/html_xxx_.inc.php étant appelé par une source PHP, vous pouvez aussi y associer des personnalisations contextuelles à partir d’informations obtenues depuis Apache.
L’exemple ci-dessous est un point de départ pour récupérer des informations de session, des informations concernant le navigateur de l’internaute, le script appelé ainsi que toute variable transmise. Ensuite, c’est du développement classique.

<?php

/*===================================================================
   SESSION
  (nécessite que ce script soit appelé en premier dans la page)
===================================================================*/
session_start();

// Transfo. des variables de session en variables PHP
if (isset($_SESSION)) {
   while (list($key, $value) = each($_SESSION))
         $$key = stripslashes($value);
} 

/*===================================================================
PARAMETRES
===================================================================*/

// Informations utilisateur / navigateur
define("_USER_AGENT",         $_SERVER['HTTP_USER_AGENT']);
define("_USER_LANGUAGE",      $_SERVER['HTTP_ACCEPT_LANGUAGE']);
define("_USER_ENCODING",      $_SERVER['HTTP_ACCEPT_ENCODING']);

// Informations page web appelée
define("_DOC_ROOT",           $_SERVER['DOCUMENT_ROOT']);
define("_DOC_FILENAME",       $_SERVER['SCRIPT_FILENAME']);
define("_DOC_QUERY_STRING",   $_SERVER['QUERY_STRING']);
define("_DOC_URI",            $_SERVER['REQUEST_URI']);
define("_DOC_SCRIPT",         $_SERVER['SCRIPT_NAME']);

/*===================================================================
VARIABLES TRANSMISES
===================================================================*/
// Pour assurer la compatibilité avec les versions inférieures à 4.1.0
if (!empty($_POST))  { $HTTP_POST_VARS = $_POST; }
if (!empty($_GET))   { $HTTP_GET_VARS = $_GET; }

// Transfo. des variables de l'URI et de formulaires en variables PHP
if (isset($HTTP_POST_VARS)) {
   while (list($key, $value) = each($HTTP_POST_VARS))
         $$key = stripslashes($value);
}
if (isset($HTTP_GET_VARS)) {
   while (list($key, $value) = each($HTTP_GET_VARS))
         $$key = stripslashes($value);
}

/*===================================================================
Code à partir d'ici
==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v==v=*/
 
?>

La suite du travail de rationalisation ne devrait vous demander que peu d'effort pour être adapté à votre site.

Ce que nous venons d’évoquer est parfaitement applicable à des sites "simples", en prenant garde à ne pas faire d’amalgame entre la notion de simplicité et le nombre de pages. Dans le cas de sites bien plus complexes, cette approche n’est pas forcément pertinente et il sera bien plus efficace de s’appuyer sur des gestionnaires de templates[1] plus évolués. Dans cette logique, un premier pas peut-être réalisé avec des solutions comme WordPress, Joomla ou Drupal. Vous pouvez vous faire une idée des CMS[2] les plus utilisés sur W3Techs.

Conclusion

Avec ce nouvel article, vous disposez de pistes sérieuses pour l’amélioration de la structure de votre site. Combinez cela avec tous les éléments déjà abordés et vous pourrez vous vanter d’avoir très largement contribué à l’optimisation de votre site web.

Impatient de connaitre la suite ? Alors rendez-vous très rapidement pour reprendre notre fil rouge de l’optimisation !

[1] http://w3techs.com/technologies/overview/programming_language/all

[2] modèles

[3] Content Management System : gestionnaire de contenu

A lire aussi :

Introduction : Pourquoi optimiser un site web ?
Pratique : Comment situer la performance de son site Web ?
Pratique : Optimiser les images d'une page web : traiter les images
Pratique : Optimiser les images d’une page web : intégration HTML
Pratique : Optimisation web : organiser le code JavaScript et CSS
Pratique : Comment réduire le poids du code JavaScript et CSS
Pratique : Performance web : optimiser son code HTML et CSS
Pratique : PHP : faciliter la maintenance d'un site web avec la fonction include
Pratique : Comment optimiser la performance d'un site web côté serveur