« Programmation PHP/Exemples/Sommaire » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
(:Julien:) (discussion | contributions)
→‎Explications : argh, tout s'appelle "page", l'id du css, la var en php, le param du get et le bout de page html.
(:Julien:) (discussion | contributions)
Ligne 42 : Ligne 42 :
<div id="page">
<div id="page">
<?php
<?php
if (isset($_GET['page'])) $page=$_GET['page']; else $page='1';
if (isset($_GET['page'])) $numero=$_GET['page']; else $numero='1';
require 'page'.$page.'.html';
require 'page'.$numero.'.html';
?>
?>
</div>
</div>

Version du 2 mars 2009 à 15:41

Un sommaire simple

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

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

  • 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 server 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

  • 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