Comment afficher plusieurs pages dans une seule?
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 :
- Il existe déjà un cours sur les frames.
- Je suis pour le moment bien trop nul en
ajax
!
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>
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 balisesVoir un exem
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>


Signaler une erreur
Comment contrôler et vérifier une url
Codes PHP
Pagination page par page



