Comment afficher plusieurs pages dans une seule?

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.

Une question qui me revient assez souvent est : "Comment afficher plusieurs pages en une seule?" ou "Comment afficher du contenu différent sans changer de page?" ou "Comment changer le contenu d'un <div> sans changer de page?", etc...

  • La première méthode qui me vient en tête et sans trop se compliquer la tâche est l'utilisation des frames.
  • La seconde méthode serait l'utilisation d'un tableau en PHP.
  • La troisième méthode serait l'utilisation de l'ajax et notamment XmlHTTPRequest pour créer un objet.

Dans ce tutoriel, nous allons voir la 2ieme méthode pour 2 raisons :

  1. Il existe déjà un cours sur les frames.
  2. Je suis pour le moment bien trop nul en ajax bhouu!

Bon, c'est partit ...

Dans un premier, j'utilise un design (bhaa ouai, tant qu'à faire ^^) que vous trouverez ici -> Exemple d'une page créée avec du CSS. Non seulement c'est plus jolie et en plus vous comprendrez mieux le positionnement du code PHP qui va suivre .

Nous allons donc partir de la structure XHTML suivante qui sera contenu dans un fichier nommé index.php :

<!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" lang="fr-fr"> <head>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>Titre de la page</title> <style type="text/css" media="screen"> @import url( style.css ); </style>   </head>   <body> <div id="moncadre">   <div id="cadrehaut"> <h1>Titre de 1er niveau</h1> </div>   <div class="cadredumenudroite">   <h1>Navigation</h1> <ul> <li><a class="menu" href="#">Lien 0</a></li> <li><a class="menu" href="#">Lien 1</a></li> <li><a class="menu" href="#">Lien 2</a></li> <li><a class="menu" href="#">Lien 3</a></li> </ul>   </div>   <div class="cadrecentrale"> <h1>Titre 1er niveau</h1> <p>Texte de la page</p> </div>   <div class="footer"> <p>Texte du pied de page</p> </div>   </div> </body> </html>

Nous allons dans un premier temps créer un simple tableau en PHP :

<?php
 
//Tableau numéroté
$tableau = array(
"Créer un site",
"Apprendre le PHP",
"Apprendre le XHTML"
);
?>

Nous savons (si vous avez lu le tutoriel sur l'utilisation des tableaux) que ce tableau nous ressort comme résultat :

Array
(
    [0] => Créer un site
    [1] => Apprendre le PHP
    [2] => Apprendre le XHTML
)

Nous savons également que pour parcourir un tableau, on utilise la fonction "foreach" et, c'est de cette façon que nous allons pouvoir créer des liens hypertexes.

<?php
 
//On boucle le tableau
foreach($tableau AS $variable_au_pif => $valeur)
{
    echo '<li><a class="menu" title="'.$valeur.'" href="index.php?id='.$variable_au_pif.
'">'.$valeur.'</a></li>';
}
?>

Dans cette exemple, on utilise la clée du tableau et sa valeur pour créer un lien. Ce lien contiendra donc comme identifiant en paramêtre la clée du tableau ...
En gros, la boucle ci-dessus va nous donner le résultat suivant :

<li><a class="menu" title="Créer un site" href="index.php?id=0">Créer un site</a></li>
<li><a class="menu" title="Apprendre le PHP" href="index.php?id=1">Apprendre le PHP</a>
</li>
<li><a class="menu" title="Apprendre le XHTML" href="index.php?id=2">Apprendre le XHTML
</a>
</li>
Vous constaterez que tout les liens utilisent une seule et unique page "index.php"...

Comme les liens contiennent des variables qui sont également les clées de notre tableaux, il va falloir effectuer des contrôle sur celles-ci pour éviter quelques désagréments.

//On évite que les petits malins fassent joujou avec la variable en plaçant des balises  
HTML dans l'url
$toto = htmlspecialchars($_GET["id"]);   //Si la variable est vide ou quelle correspond à la variable $_SERVER['REQUEST_URI'] if($_SERVER['REQUEST_URI'] == "/" or $_SERVER['REQUEST_URI'] == "/index.php") { //On redirige pour éviter la page vide et le duplicate header('location:index.php?id=0'); }

Explication :
Nous savons que pour afficher du contenu dans notre page, nous utilisons les clées de notre tableau passées en paramêtre dans les url générées. Le problème, c'est que si une personne arrive sur cette page par le biais de http://votre-site.com ou http://votre-site.com/index.php, aucun paramêtre n'est utilisé ... donc, rien ne s'affiche!! C'est pour cette raison que l'on compare l'url grâce à la variable d'environnement $_SERVER['REQUEST_URI'] pour effectuer une redirection vers la première page et notamment celle utilisant la clée numérotée "0".

Ensuite, pour afficher un contenu différent selon la clée, on utilise simplement des conditions :

<?php
if ($toto == 0)
{
    echo 'Texte 1';
}
elseif ($toto == 1)
{
    echo 'Texte 2';
}
elseif ($toto == 2)
{    
   echo 'Texte 3';
}
?>

On peut également appeler des includes :

<?php
if ($toto == 0)
{
    include("page-1.php");
}
elseif ($toto == 1)
{
    include("page-2.php");
}
elseif ($toto == 2)
{    
   include("page-3.php");
}
?>

Bref, c'est vous qui voyez !

Histoire de "sécuriser" un peut plus la chose, on va ajouter une petit et dernière condition qui va permettre de contrôler que la variable passé dans l'url (donc la clée) est bien de type numérique :

<?php
//Si la variable n'est pas de type numérique
if(!is_numeric($toto))
{
echo 'Petit malin ... tu n\'as rien d\'autre à faire que jouer avec mes variables!!';
}
elseif ($toto == 0)
{
    echo 'Texte 1';
}
elseif ($toto == 1)
{
    echo 'Texte 2';
}
elseif ($toto == 2)
{    
   echo 'Texte 3';
}
?>

Dans l'ordre, voici le résultat d'une telle page :

<?php
 
//Tableau numéroté
$tableau = array(
"Créer un site",
"Apprendre le PHP",
"Apprendre le XHTML"
);
 
//On évite que les petits malins fassent joujou avec la variable en plaçant des balises 
HTML dans l'url
$toto = htmlspecialchars($_GET["id"]);   //Si la variable est vide ou quelle correspond à la variable $_SERVER['REQUEST_URI'] if($_SERVER['REQUEST_URI'] == "/" or $_SERVER['REQUEST_URI'] == "/index.php") { //On redirige pour éviter le duplicate header('location:index.php?id=0'); } ?> <!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" lang="fr-fr"> <head>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title><?php if ($toto == 0) { echo $tableau[0]; } elseif ($toto == 1) { echo $tableau[1]; } elseif ($toto == 2) { echo $tableau[2]; } ?></title>   <style type="text/css" media="screen"> @import url( style.css ); </style> </head>     <body>   <div id="moncadre"> <div id="cadrehaut">   <h1><?php if ($toto == 0) { echo $tableau[0]; } elseif ($toto == 1) { echo $tableau[1]; } elseif ($toto == 2) { echo $tableau[2]; } ?></h1> </div>   <div class="cadredumenudroite"> <h1>Navigation</h1> <ul> <?php   //On boucle le tableau foreach($tableau AS $variable_au_pif => $valeur) { echo '<li><a class="menu" title="'.$valeur.'" href="index.php?id='.$variable_au_pif.
'">'
.$valeur.'</a></li>'; } ?> </ul> </div>   <div class="cadrecentrale">   <?php //Si la variable n'est pas de type numérique if(!is_numeric($toto)) { echo 'Petit malin ... tu n\'as rien d\'autre à faire que jouer avec mes variables!!'; } elseif ($toto == 0) { echo '<h1>'.$tableau[0].'</h1>
<p>Vous êtes sur la page : <strong><a title="'
.$tableau[0].'" href="'.$_SERVER
[
'REQUEST_URI'].'">'.$tableau[0].'</a></strong>.</p>'; } elseif ($toto == 1) { echo '<h1>'.$tableau[1].'</h1>
<p>Vous êtes sur la page : <strong><a title="'
.$tableau[1].'" href="'.$_SERVER
[
'REQUEST_URI'].'">'.$tableau[1].'</a></strong>.</p>'; } elseif ($toto == 2) { echo '<h1>'.$tableau[2].'</h1>
<p>Vous êtes sur la page : <strong><a title="'
.$tableau[2].'" href="'.$_SERVER
[
'REQUEST_URI'].'">'.$tableau[2].'</a></strong>.</p>'; } else { echo '<p>Il n\'y a rien à voir ici!</p>'; } ?>   </div>     <div class="footer"> <p>Texte du pied de page</p>   </div>   </div>   </body> </html>
Voir un exem
Voir/déposer un commentaire (13) | Signaler un problème