Warning: Use of undefined constant nom_chapitre - assumed 'nom_chapitre' (this will throw an Error in a future version of PHP) in /home/maths/www/sio/www/cours_php/menu.php on line 7
Introduction Tableaux Boucles Variables Conditions E/L fichier Les fonctions Requêtes préparées Les dates Pratiques pseudo-frame Session Template

Mise en page

Pré-requis:Include (cours)

Mise en page

Comme vous allez vite vous en rendre compte, les fonctions d'inclusion peuvent aider à la mise en page d'un site Internet.

Cela tient à la simple constatation qu'une page Internet est généralement constituée d'un entête (un bandeau supérieur laissant apparaître le nom/logo du site et éventuellement un menu), d'un menu gauche, d'une page centrale, éventuellement d'un menu droit et d'un pied de page (contenant généralement une ligne de copyright). Bref... Une page d'un site classique ressemble fortement à un tableau dont le code HTML serait

Généralement, d'une page à l'autre du site, seul le contenu de la zone centrale varie, d'où les deux solutions de mise en page suivantes...

Pré-requis:Les formulaires (cours)

Pseudo-frames

Partant des précédentes constatations, une solution au problème de mise en page, consiste à créer un script (chargé de construire le tableau décrit précédemment) acceptant un paramètre permettant de définir le contenu de la zone centrale.

<html>
<body>
<table width="100%">
<tr bgcolor="lightblue"><td colspan="3" align="center">Placez ici, l'entête de votre site</td></tr>
<tr><td bgcolor="yellow">Placez ici, votre menu gauche<br />
    <a href="?page=0">Accueil</a><br />
    <a href="?page=1">Page 1</a><br />
    <a href="?page=2">Page 2</a><br />
    </td>
    <td width="100%" align="center">
<?php
    // Ici, c'est la zone centrale

    // Récupération du paramètre GET avec PHP>=4.1
    // (avec valeur par défaut=0) .
    if (isset($_GET["page"])) $page = $_GET["page"];
    else $page = 0;

    // Contenu dépendant de la valeur du paramètre
    switch ($page) {
        case 1 : echo "Vous avez sélectionné la page 1"; break;
        case 2 : echo "Vous avez sélectionné la page 2"; break;
        default : echo "Bienvenue sur la page d'accueil"; break;
    }

?>
    </td>
    <td bgcolor="yellow">Placez ici, votre menu droit</td>
</tr>
<tr bgcolor="lightblue">
    <td colspan="3" align="center">Placez ici, le pied de page de votre site</td>
</tr>
</table>
</body>
</html>

Vous pouvez tester ce bout de code ici

Grâce à l'utilisation de l'instruction switch, le contenu du cadre principal de la page varie donc bien en fonction du paramètre donné sans que la structure du site ne varie.

Remarques:

Vous noterez que le menu gauche, ici, se résume à préciser la valeur du paramètre.
Ce script frames.php deviendrait vite illisible s'il y avait de nombreuses pages affichant bien plus qu'une unique ligne de texte.

Pour palier au problème soulevé par ce dernier point, il suffit de faire appel à l'instruction include(). Ceci permet en effet, d'inclure dynamiquement tel ou tel script contenant le code HTML (et PHP) de la zone centrale.

C'est ce que nous allons voir immédiatement

Pseudo-frames (avec include)

Avec l'utilisation d'include(), le script précédent devient

<html>
<body>
<table width="100%">
<tr bgcolor="lightblue"><td colspan="3" align="center">Placez ici, l'entête de votre site</td></tr>
<tr><td bgcolor="yellow">Placez ici, votre menu gauche<br />
    <a href="?page=0">Accueil</a><br />
    <a href="?page=1">Page 1</a><br />
    <a href="?page=2">Page 2</a><br />
    </td>
    <td width="100%" align="center">
<?php
    // Ici, c'est la zone centrale

    // Récupération du paramètre GET avec PHP>=4.1
    // (avec valeur par défaut=0) .
    if (isset($_GET["page"])) $page = $_GET["page"];
    else $page = 0;

    // Contenu dépendant de la valeur du paramètre
    switch ($page) {
        case 1 : include("frames_page1.php"); break;
        case 2 : include("frames_page2.php"); break;
        default : include("frames_page0.php"); break;
    }

?>
    </td>
    <td bgcolor="yellow">Placez ici, votre menu droit</td>
</tr>
<tr bgcolor="lightblue">
    <td colspan="3" align="center">Placez ici, le pied de page de votre site</td>
</tr>
</table>
</body>
</html>

avec

Bienvenue sur la page d'accueil<br />
<i>(version include)</i>

Bienvenue sur la page 1<br />
<i>(version include)</i>

Bienvenue sur la page 2<br />
<i>(version include)</i>

Remarques:

Pour changer l'aspect général du site, il suffit de modifier le script frames_02.php et c'est tout.

Les plus futés d'entre vous, auront vite remarqué qu'il est possible de remplacer le bloc switch par un unique appel

include($page);

où $page contiendrait directement le chemin du fichier à inclure.

Cela est tout à fait possible mais ATTENTION cela est également extrêmement risqué si vous ne prenez pas toutes les mesures appropriées. Il serait alors en effet possible à quiconque de saisir sa propre valeur pour $page pour pouvoir faire exécuter par VOTRE serveur un bout de code écrit par une autre personne (et pouvant donc contenir des instructions préjudiciables à la bonne santé de votre site). Ce "hacker en herbe" peut au choix préciser dans $page l'URL d'une page de l'un de ses sites qui retourne un bout de code PHP ou bien, plus vicieux, il peut faire pointer $page sur un des fichiers de VOTRE site mais, fichier, dont il peut altéré le contenu (ex: fichier stockant un livre d'or, fichier de log, etc...) et donc y insérer du code PHP.

Si vous optez pour cette option, veillez donc bien à faire un contrôle poussé sur $page pour n'autoriser qu'un nombre restreint de page (limiter à une zone bien définie de votre site).

Nous vous déconseillons donc d'utiliser les pseudo-frames, à la place, utilisez plutôt la technique de l'en-tête et pied de page que nous décrivons au chapitre suivant.

En-tête et pied de page (header et footer)

Nous l'avons vu, une page Internet ressemble généralement à

ce qui, en utilisant l'instruction include() peut s'écrire

<?php
    include("frames_header_inc.php");
?>
    
<?php
    include("frames_footer_inc.php");
?>

</td>
<td></td>
</tr>
<tr><td colspan="3"></td></tr>
</table>
</body>
</html>

Les fichiers frames_header_inc.php et frames_footer_inc.php constituent alors la structure du site, tandis que le fichier frames_03.php, déclinable à l'infini, en constitue son contenu.

Remarques:

Pour changer l'aspect général du site, il suffit de modifier les scripts d'en-tête et de pied de page.
Chaque page du site doit inclure l'en-tête et le pied de page.
Nous n'avons pas cette fois, le problème de l'utilisation d'une URL avec un paramètre.

Cette façon de faire est assez répandue, vous trouverez ainsi de nombreux scripts tout fait (ex: phorum) vous proposant d'indiquer les noms de vos fichiers d'entête et de pied de page afin de s'inclure parfaitement dans votre site. Pensez donc à en faire de même pour vos scripts.

Hadek site