<< Retour au sommaire

 

PHP, élaborration d’un album photos

 

 

 

Le sommaire :

1.      Introduction.

2.      Les pages :

2.1  Au préalable,

2.2  Le code de la page index.php

2.3  Le code de la page conseils.php

2.4  Les pages album.php & photo.php :

2.4.1        à savoir…

2.4.2        Le code de la page album.php

2.4.3        Le code de la page photo.php

3.      Le WEBMASTER est-il satisfait ?

4.      Essai & téléchargement.

 

 

1. Introduction

 

Histoire de mettre en application une partie de la programmation vue ici dans ce site, je vous propose la création d’un album photos.

Cette « mini application » va utiliser le XHTML et bien sûr, du PHP.

 

L’intérêt de ce module de site et qu’il présente la plus grande des facilités concernant la mise à jour de l’album photos. En effet, le WEBMASTER peut tout simplement ajouter une photo par un simple « copier-coller » dans le dossier adéquat.

Bon, je mens un « petit peu », car il faut également ajouter une ligne dans un fichier texte qui joue en quelle que sorte le rôle de base de données.

Ce fichier texte s’intitule « liste.txt », et donc, il contient une ligne par photo.

Chacune des lignes est composée de 3 données, :

1.      Le nom de la photo,

2.      Le titre de la photo,

3.      La description de la photo.

 

Ces 3 données spécifique à une seule photo doivent être séparées par un point virgule…

 

Lorsque l’album sera lancé, la fonction « file » ira extraire le contenu de ce fichier afin de l’affecter dans un tableau, une variable indicée PHP.

Du coup, cette « variable tableau » de 2 dimensions va contenir des lignes, une ligne par photo, et pour chacune des lignes, 3 cases correspondant aux 3 informations spécifiques à la photo.

 

Formidable, une boucle va donc afficher le contenu de la variable dans un tableau XHTML.

Chaque titre de photo sera affiché sous forme de lien hypertexte afin de pouvoir faire afficher la photo par l’intermédiaire d’un simple clic sur le titre.

 

Facile !

 

2. Les pages

 

2.1 Au préalable

 

La première page, c’est la page d’accueil du site.

Ah oui au fait, le site ? Je l’ai baptisé « SUPER SITE ».

Nous avons donc à la base un dossier qui s’intitule « SUPER-SITE ».

 

Dans ce dossier, plaçons la page « index.php » qui va jouer le rôle de page d’accueil.

Bon, dans l’exercice que je vais vous présenter, les pages sont toutes rattachées à un fichier de style CSS qui est stocké dans le sous dossier « Images ».

Le fichier CSS quant à lui, s’intitule « fact1111.css », il a été créé dans « Microsoft FrontPage 2002 ».

Voyons maintenant un peu la structure…

L’index affiche 2 liens hypertextes :

  1. Ouvrir l’album photos,
  2. Conseils de navigation.

 

Concernant le deuxième choix, c’est-à-dire « Conseils de navigation », pas grand-chose à dire, si ce n’est que la page ouverte s’intitule « conseils.php » et qu’elle affiche quelques lignes d’informations concernant la navigation dans notre modeste application baptisée « Super Site ».

 

D’ailleurs, ces 2 pages, « index.php » et « conseils.php » n’ont finalement pas de code PHP, elles ne contiennent que du code XHTML.

 

On les regarde ?

Ok, mais avant cela, je vous donne une dernière indication, à leur ouverture, les pages exécutent des petits sons aux formats « wav » ou « mp3 » qui sont stockés dans le sous dossier intitulé « audio ».

 


2.2 Le code de la page 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" xml:lang="fr" >

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>SUPER SITE</title>

<!-- un petit son pour le démarrage de la page -->

<bgsound src="audio/accueil.mp3" loop="infinite" />

<!--mstheme--><link rel="stylesheet" href="images/fact1111.css" />

<meta name="Microsoft Theme" content="factory 1111">

</head>

<body>

<table border="2">

<caption>Page d'accueil</caption>

<tr><td>

Bienvenue sur le site des supers doués !<br />

Vous êtes dans le sommaire du site, veuillez valider le lien de votre choix.</td></tr>

<tr><td>

<a href="album.php">

Ouvrir l'album photos du site

</a></td></tr>

<tr><td>

<a href="conseils.php">

Conseils de navigation<br />

Cliquez ici &gt;&gt;

</a></td></tr>

</table>

<p text-align="center">

<img src="images/note-de-musique.jpg" boreder="1" alt="Note de musique" />

</p>

</body>

</html>

 


2.3 Le code de la page conseils.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" xml:lang="fr" >

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>SUPER SITE</title>

<!-- Un petit son aussi dans cette page ! -->

<bgsound src="audio/aide.wav" />

<!--mstheme--><link rel="stylesheet" href="images/fact1111.css" />

<meta name="Microsoft Theme" content="factory 1111">

</head>

<body>

<!-- Affichage d'un lien pour revenir à l'index -->

<p>

<a href="index.php">

&lt;&lt; Retour page précédente

</a></p>

<hr />

<h1>Conseils de navigation</h1>

<p>

Vous venez d'arriver dans la page de conseils depuis la page d'accueil de :<br />

<span class="rose">SUPER SITE !</span>

<br /><br />

Depuis la page d'accueil, vous pouvez afficher la liste des photos en validant le lien :<br />

<strong>Ouvrir l'album photos.</strong><br />

  La nouvelle page qui apparaîtra alors à l'écran sera l'album photos.<br />

La liste des photos sera affichée dans un tableau, et pour chacune des photos, une brève description vous sera indiquée.<br />

Pour visualiser une photo, rien de plus simple, validez le nom de la photo...<br />

La photo sera ensuite affichée dans une page, un lien vous permettra de revenir dans l'album !<br />

<em>Bonne visite</em>

</p>

</body>

</html>

 


2.4 album.php & photo.php

 

2.4.1 à savoir…

 

Voici maintenant les pages les plus intéressantes !

La page album.php, à l’ouverture, extrait le contenu du fichier texte « liste.txt » par l’intermédiaire de la fonction « file ».

Voici la ligne :

$fichier = file("liste.txt");

 

C’est donc la variable $fichier qui contient désormais le contenu de « liste.txt », notre « rigolote base de données »…

Je rappelle d’ailleurs que dans ce fichier « liste.txt », se trouvent les lignes qui indiquent les informations nécessaires sur les photos.

Une ligne par photo, 3 infos par ligne, le « nom de la photo », « Un titre » et « une description ».

Ces 3 données sont séparées par un point virgule, le « point virgule » est donc un caractère dit séparateur.

  1. Le « nom de la photo » sera utilisé par la balise « img » afin d’afficher la photo.
  2. Le « titre » sera utilisé dans le sommaire des photos, c’est lui qui sera le lien, donc dans la page « album.php », mais aussi dans la page qui affichera la photo lorsque l’utilisateur aura cliqué sur le lien, comme titre dans la balise « title », et dans l’attribut « alt » de la balise « img ». J’en profite pour vous signaler que cette page s’intitulera « photo.php ».
  3. La « description » sera utilisé dans le sommaire des photos pour accompagner le lien, donc dans la page « album.php », mais aussi dans la page qui affichera la photo lorsque l’utilisateur aura cliqué sur le lien, comme description affichée juste au-dessous de la photo dans une balise « p ».

 

Toutefois, il faut comprendre un aspect technique important…

Dans la page « album.php », lorsque l’on affiche les liens des photos, il faut passer en paramètre Les 3 données de la photo correspondante.

 

Du coup, la page « photo.php » pourra récupérer ces 3 données par l’intermédiaire de la récupération de données de type « get ».

 

Bon, dernière précision, les photos sont de format « jpg » et sont stockées dans le sous dossier intitulé « photos ».

 


2.4.2 Le code de la page album.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" xml:lang="fr" >

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>L'album photos</title>

<!-- Lecture d'un fond de musique en boucle -->

<bgsound src="audio/album.wav" loop="infinite" />

<!--mstheme--><link rel="stylesheet" href="images/fact1111.css" />

<meta name="Microsoft Theme" content="factory 1111">

</head>

<body>

<table border="2">

<caption>L'album photos</caption>

<tr><th colspan="2">

<!-- Affichage d'un lien pour revenir à l'index -->

<a href="index.php">

&lt;&lt; Retour page d'accueil

</th></tr>

<tr><th colspan="2">

Pour visualiser l'une des photos présentées ci-après, veuillez cliquer sur le titre de la photo de votre choix.

</th></tr>

<tr><th>Photos</th><th>Descriptions</th></tr>

<!-- Affichage de la liste des photos, une ligne de 2 colonnes par photo -->

<?php

// extraction du contenu du fichier texte "liste.txt"

$fichier = file("liste.txt");

// Création de la boucle qui traite à chaque itération une ligne du résultat de l'extraxtion

for($i=0;$i<count($fichier);$i=$i+1) {

// Extraction de la ligne courante de l'extraxtion de base dans le tableau $album

$album = explode(";",$fichier[$i]); ?>

<tr><td>

<!-- Affichage du lien et de la description, passage en paramètres des 3 données de la photo dans le lien -->

<a href="photo.php?NomPhoto=<? echo $album[0]; ?>&amp;TitrePhoto=<? echo $album[1]; ?>&amp;DescriptionPhoto=<? echo $album[2] ?>">

<? echo $album[1]; ?>

</a></td><td>

<? echo $album[2]; ?>

 

</td></tr> <? } ?>

</table>

</body>

</html>

 

2.4.3 Le code de la page photo.php

 

<?php

// Récupération des 3 données de la photo à afficher par le biais de la méthode get

extract ($_GET,EXTR_OVERWRITE);

// N'oublions pas que les photos sont dans le sous dossier intitulé "photos" !

// alors faisons le nécessaire

// Rajoutons le chemin devant le nom de la photo

$NomPhoto = "audio/".$NomPhoto; ?>

<!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" xml:lang="fr" >

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<!-- affichage du titre de la photo dans la barre de titre de la page -->

<title>

<?php

echo $TitrePhoto; ?>

</title>

<!-- Lecture d'un son, un flash d'appareil photo, ça tombe bien -->

<bgsound src="audio/flash.wav" />

<!--mstheme--><link rel="stylesheet" href="images/fact1111.css" />

<meta name="Microsoft Theme" content="factory 1111">

</head>

<body>

<h1>Affichage de la photo sélectionnée</h1>

<hr />

<p text-align="center">

<!-- affichage de la photo sélectionnée -->

<img src="<? echo $NomPhoto; ?>" alt="<? echo $TitrePhoto; ?>" boreder="1">

</p>

<hr />

<p>

Description :<br />

<?php echo $DescriptionPhoto; ?>

</p>

<hr />

<p>

<a href="album.php">

&lt;&lt; Page précédente

</a></p>

</body>

</html>

 


3. Le Webmaster est-il satisfait ?

 

Bien sûr que oui !

Lorsqu’il voudra rajouter une photo à son site, il n’aura qu’à faire un « copier-coller » de la photo dans le dossier « photos ».

Ensuite, dans le fichier texte « liste.txt », il n’aura qu’à rajouter l’identification de la nouvelle photo, voici un exemple :

Webmaster.jpg;Un Webmaster;Portrait d'un Webmaster qui sourit avec une bière à la main, il est heureux car il n'a pas grand chose à faire

 

4. Essai & téléchargement

 

Il est temps maintenant d’essayer l’exercice en ligne !

 

Voir en ligne >>

 

Pour télécharger l’exercice au complet ?

 

Télécharger >>

 

Pour télécharger un modèle vierge afin que vous puissiez créer votre propre album photos ?

 

Télécharger >>

 

Philippe BOULANGER