Programmation PHP/Exemples/Sommaire

Un livre de Wikilivres.
Aller à : navigation, rechercher
Programmation PHP
Programmation PHP
Plan
Modifier ce modèle

Un sommaire simple[modifier | modifier le wikicode]

Imaginons un site Web composé de 4 pages entre lesquelles on peut naviguer grâce à un sommaire. Notre sommaire est par exemple à gauche de l'écran et contient 4 liens hypertextes : page 1, page 2, page 3 et page 4. A droite de l'écran, le contenu principal de la page change en fonction de la page affichée. Par contre notre sommaire apparaît lui sur chacune des pages.

Le programme en php[modifier | modifier le wikicode]

Fichier index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Sommaire en PHP !</title>
  <style type="text/css">
  #sommaire
  {
  position:absolute;
  background-color:cyan;
  left:10px;
  width:100px;
  }
 
  #page
  {
  position:absolute;
  background-color:#AAAAAA;
  left : 200px;
  width:500px;
  height:500px;
  }
  </style>
  </head>
  <body>
 
    <div id="sommaire">
	<h3>Sommaire</h3>
        <a href="index.php?page=1">Page 1</a><br/>
	<a href="index.php?page=2">Page 2</a><br/>
	<a href="index.php?page=3">Page 3</a><br/>
	<a href="index.php?page=4">Page 4</a><br/>
    </div>
 
    <div id="page">
        <?php
        if (isset($_GET['page'])) $numero=$_GET['page']; else $numero='1';
        require 'page'.$numero.'.html';
        ?>
    </div>
 
  </body>
</html>

fichier page1.html

<h1>Page 1</h1>
bla bla bla

fichier page2.html

<h1>Page 2</h1>
ble ble ble

fichier page3.html

<h1>Page 3</h1>
bli bli bli

fichier page4.html

<h1>Page 4</h1>
blo blo blo

Explications[modifier | modifier le wikicode]

  • Dans ce programme, la page est découpée en 2 parties : à gauche une partie ayant comme id sommaire et à droite une page ayant comme id page.
  • La partie « sommaire » utilise le style #sommaire de la feuille de style et la partie « page », le style #page.
  • Le sommaire est constitué de 4 liens hypertextes appelant respectivement index.php?page=1, index.php?page=2, index.php?page=3 et index.php?page=4. Lorsqu'on met un point d'interrogation après l'URL d'une page, cela signifie qu'on donne une valeur à un paramètre et qu'on envoie cette information au serveur par la méthode GET. Lorsqu'on clique sur l'un des 4 liens hypertextes, on appelle à chaque fois la même page index.php mais à chaque fois la valeur du paramètre nommé page change : il vaut 1, 2, 3 ou 4 selon le lien cliqué.
  • Dans la partie « page » de index.php, la valeur du paramètre page est récupérée de l'url cliquée en écrivant $_GET['page']. Ce paramètre peut très bien ne pas exister : ceci a lieu notamment la première fois qu'on appelle notre page index.php. Dans ce cas, la fonction isset() permet de savoir si une variable existe. La ligne
if (isset($_GET['page']))$numero=$_GET['page']; else $numero='1';
récupère la valeur du paramètre page et la place dans la variable $numero. Si ce paramètre n'existe pas $numero vaut 1.
  • La fonction require'nom_du_fichier'; permet d'insérer un fichier à cet endroit dans le code. Le server insère donc page1.html ou page2.html ou page3.html ou page4.html en fonction de la valeur du paramètre page (et de la variable numero).
  • Notre sommaire est terminé.

Capture d'écrans[modifier | modifier le wikicode]

  • La page initiale :

Fichier:Sommaire-1.jpg

  • on clique sur page 2 :

Fichier:Sommaire-2.jpg

  • on clique sur page 3 :

Fichier:Sommaire-3.jpg

  • on clique sur page 4 :

Fichier:Sommaire-4.jpg