Diaporama Web dynamique en Php

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Diaporama dynamique en Php

Dans la formation Php précédente, nous avons appris comment accéder au contenu d'un dossier. Et nous avons été en mesure de restituer dynamiquement les fichiers qu'il contient. Nous devons exploiter ces connaissances pour produire un diaporama Web dynamique.



Le diaporama tel qu'il a été conçu, au cours d'une formation Javascript, est seulement automatisé pour l'instant. Les images sont considérées comme connues. Leurs noms sont concaténés dans une variable. Et c'est un code Javascript qui la découpe pour récupérer les images indépendamment et les faire défiler. Mais un code client n'est pas en mesure d'accéder aux dossiers et fichiers du disque. En conséquence, à ce stade, le diaporama ne peut pas évoluer en fonction des nouvelles photos ajoutées dynamiquement dans le dossier.

Sources et présentation de la problématique
Pour reprendre les travaux là où nous les avions laissés, nous devons commencer par récupérer les sources.

• Télécharger le fichier diaporama-automatise-php.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression conduit au fichier de la page Web principale, celui du diaporama. Il est nommé index.php. Il est accompagné de ses ressources externes dans les sous dossiers. Le dossier diaporama héberge les photos que le code Javascript fait défiler sur l'interface Web. Vous notez de même la présence des dossiers supplement et supplement2. Ils proposent des images supplémentaires. Nous les exploiterons pour les ajouter à la volée dans le dossier diaporama et juger du comportement de notre application.

Comme vous le savez, le projet doit être référencé dans l'interface d'EasyPhp. Un nom doit lui être attribué. Son adresse issue de l'explorateur Windows doit être renseignée. Le serveur Http doit être démarré pour émuler notre application. Le Database Server n'est pas utile ici, dans la mesure où aucune connexion à une base de données MySql n'est prévue. Une fois les informations renseignées, le projet apparaît dans la liste des applications émulées par EasyPhp.

• Cliquer sur le lien du projet pour atteindre sa page d'accueil,

Nous retrouvons l'interface Web de notre diaporama automatisé par le code Javascript. Si vous saisissez un délai et que vous cliquez sur le bouton Lancer, l'animation du diaporama démarre. Le bouton Arrêter permet de le stopper.

En haut de la page Web, vous remarquez la trace de nos travaux précédents. Ils avaient consisté à récupérer l'ensemble des noms de fichiers contenus dans le sous dossier diaporama, au chargement du code. Nous les avions concaténés dans une variable, en les séparant d'un caractère remarquable, le point-virgule. Et puis, nous avions affiché le contenu de cette variable grâce à la fonction Php echo.

Transmettre les fichiers du serveur au client
La variable Php contient donc les informations dynamiques sur les noms de fichiers. La variable Javascript qui se charge pour l'instant d'animer le diaporama, concatène des noms de fichiers de façon statique. En d'autres termes, elle n'est pas capable d'en considérer de nouveaux. Nous devons donc passer les informations de la variable Php au code Javascript. Le code existant prendra ensuite le relai pour dérouler le diaporama selon les informations transmises.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'ouvrir dans un éditeur comme le Notepad ++,

En entête de la page Html, vous notez la présence de la section Php que nous avons construite lors de la formation précédente. C'est ce code serveur qui scrute le sous dossier diaporama pour en extraire dynamiquement tous les noms de fichiers présents. La fonction Php echo permet de restituer la chaîne concaténée reconstruite. Il s'agissait d'un test à titre de confirmation.

• Dans la section de code Php, passer la ligne de l'instruction echo en commentaire,

<?php
$nom_dossier = 'diaporama/';
$dossier = opendir($nom_dossier);
$chaine = '';

while($fichier = readdir($dossier))
{
if($fichier != '.' && $fichier != '..' && strtolower(pathinfo($fichier, PATHINFO_EXTENSION)) == 'jpg')
$chaine .= $fichier.';';
}

$chaine = trim($chaine,';');
//echo $chaine;

closedir($dossier);
?>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
...

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Internet,
• Rafraîchir la page Web à l'aide de la touche F5 du clavier,

Le diaporama est toujours bien présent et fonctionnel. Mais les inscriptions en entête ont disparu. En revanche, la variable concaténant les noms de fichiers est bien conservée. Comme l'indique le code Php, elle se nomme $chaine. Et comme elle est déclarée et affectée en entête de la page Html, sa portée est publique. Cela signifie que dans la chronologie du code, elle est considérée comme connue de partout.

Nous connaissons l'astuce. Nous l'avons déjà mise en oeuvre. Elle consiste à affecter la variable Javascript au contenu de la variable Php, par imbrication de codes client et serveur.

• Revenir dans le code de la page index.php,
• Atteindre la section de script située à partir de la ligne 130 pour un éditeur Notepad,

En début de section, vous notez effectivement la déclaration et l'affectation de la variable Javascript chaine_img. Cette affectation est réalisée sur deux lignes. Et ces deux lignes doivent être neutralisées pour laisser place à l'affectation dynamique.

• Passer en commentaires les deux lignes de la variable chaine_img,
• Juste en dessous, ajouter l'affectation par le code serveur, comme suit :

...
</body>
<script type='text/javascript' language='javascript'>

/*
var chaine_img = '01-place-de-grammat-lot.jpg; ...'
chaine_img += '05-la-cluzas-haute-savoie.jpg; ...';
*/

var chaine_img = '<?php echo $chaine;?>';
...

Nous déclarons de nouveau la variable chaine_img. C'est par ce nom qu'elle est en effet reconnue dans la suite du code Javascript. Nous l'affectons au contenu de la variable dynamique Php. Pour cela, nous imbriquons une section Php dans les doubles côtes de l'affectation. La fonction echo permet de restituer son contenu pour le stocker dans la variable cliente.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Rafraîchir la page Web à l'aide de la touche F5 du clavier,
• Saisir un délai et cliquer sur le bouton Lancer,

Les images défilent et lorsque la huitième est atteinte, l'animation reprend depuis la première photo. En apparence, rien n'a changé. Pourtant le diaporama est désormais dynamique. Il se nourrit des images effectivement contenues dans le sous dossier diaporama. Et nous allons le prouver.

• Cliquer sur le bouton Arrêter pour stopper l'animation,
• A la racine du dossier de décompression, ouvrir le sous dossier supplement,
• Sélectionner ses quatre photos (CTRL + A),
• Puis, les copier (CTRL + C),
• Enfin, les coller (CTRL + V) dans le sous dossier diaporama,

Ce dernier propose désormais 12 images.

• Revenir sur le navigateur Web et rafraîchir la page (F5),
• Saisir un délai et cliquer sur le bouton Lancer pour démarrer le diaporama,

Comme vous le constatez, les quatre photos ont été intégrées dynamiquement, sans que nous soyons de nouveau intervenus dans le code. Et c'est désormais seulement à l'issue de la douzième que l'animation repart de la première.

• Cliquer sur le bouton Arrêter pour stopper l'animation,

Un problème existe cependant. Il est dû à la conception de l'application telle qu'elle a été prévue en Javascript. Et nous proposons de le démontrer en images.

• A la racine du dossier de décompression, ouvrir le sous dossier supplement2,
• Sélectionner les deux photos qui s'y trouvent (CTRL + A),
• Les copier (CTRL + C), puis les coller dans le sous dossier diaporama,

Ce dernier propose désormais 14 fichiers image.

• Revenir sur le navigateur Internet et rafraîchir la page (F5),
• Saisir un délai et cliquer sur le bouton Lancer pour démarrer l'animation,

Comme vous le constatez, lorsque le diaporama atteint le dernier carré d'images, les deux dernières miniatures apparaissent brisées. Ce phénomène est finalement parfaitement logique. Elles correspondent aux photos 15 et 16. Or le sous dossier diaporama n'en propose que 14. Mais l'application Javascript a été conçue pour raisonner sur des multiples de 4 photos.

Nous proposons une solution simple parmi tant d'autres. Lorsque le nombre de photos présentes dans le sous dossier diaporama n'est pas un multiple de 4, nous répétons la dernière image trouvée jusqu'à atteindre cette valeur.

• Cliquer sur le bouton Arrêter pour stopper l'animation du diaporama,
• Revenir dans le code de la page index.php, plus précisément en entête dans la section Php,

Nous avons besoin d'une variable capable de compter le nombre d'images réceptionnées dans le sous dossier.

• Adapter le code Php selon les instructions mentionnées en gras dans l'extrait ci-dessous :

<?php
$nom_dossier = 'diaporama/';
$dossier = opendir($nom_dossier);
$chaine = ''; $compteur=0;

while($fichier = readdir($dossier))
{
if($fichier != '.' && $fichier != '..' && strtolower(pathinfo($fichier, PATHINFO_EXTENSION)) == 'jpg')
{
$chaine .= $fichier.';';
$compteur++;
}
}

$chaine = trim($chaine,';');
echo $compteur;
//echo $chaine;

closedir($dossier);
?>
...

Nous déclarons la nouvelle variable $compteur. Nous l'initialisons à zéro. Par défaut, nous considérons qu'aucune photo n'a encore été trouvée. Nous ajoutons les accolades de l'instruction conditionnelle pour pouvoir y intégrer l'incrémentation de la variable ($compteur++). Après la boucle, grâce à l'instruction echo, nous testons la cohérence de la valeur ainsi consolidée.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Rafraîchir la page Web à l'aide de la touche F5 du clavier,

Comme vous le remarquez, nous parvenons à stocker et restituer le nombre de fichiers contenus dans le sous dossier.

Désormais, nous devons prélever le nom du dernier fichier recensé dans le sous dossier. Puis, nous devons l'ajouter à la suite dans la chaîne concaténée, autant de fois que nécessaire pour atteindre un multiple de 4.

• Revenir dans le code de la page index.php,
• Adapter la section Php selon les instructions mentionnées en gras dans l'extrait ci-dessous :

<?php
$nom_dossier = 'diaporama/';
$dossier = opendir($nom_dossier);
$chaine = ''; $compteur=0; $dernier_fichier='';

while($fichier = readdir($dossier))
{
if($fichier != '.' && $fichier != '..' && strtolower(pathinfo($fichier, PATHINFO_EXTENSION)) == 'jpg')
{
$chaine .= $fichier.';';
$dernier_fichier = $fichier;
$compteur++;
}
}

$chaine = trim($chaine,';');

$compteur = ceil($compteur/4)*4 - $compteur;
if($compteur>0)
{
for($i=0;$i<$compteur;$i++)
{
$chaine.= ';'.$dernier_fichier;
}
}
echo $chaine;

closedir($dossier);
?>
...

Nous déclarons tout d'abord la variable $dernier_fichier. A chaque passage dans la boucle, nous lui affectons le nom du fichier en cours. Comme il est écrasé à chaque reprise, une fois la boucle terminée, nous obtenons le nom du dernier fichier.

Après la boucle, nous retravaillons la variable $compteur. L'objectif est de calculer la différence avec un multiple de 4, permettant de combler les photos manquantes. Nous divisons le nombre de photos par 4 ($compteur/4). De cette valeur calculée, nous prélevons la partie entière directement supérieure, grâce à la fonction Php ceil. En multipliant ce résultat par 4, nous obtenons donc le multiple directement supérieur au nombre de photos contenues dans le sous dossier. Nous réalisons la différence de ce multiple avec le nombre d'images. Nous en déduisons donc le nombre de photos manquantes.

Sur cette différence, si elle n'est pas nulle (if($compteur>0)), nous entamons une boucle permettant de concaténer dans la chaîne, le dernier fichier image, autant de fois que nécessaire pour rejoindre le prochain multiple de 4. Enfin et comme toujours, nous affichons ce résultat grâce à la fonction Php echo.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page Internet à l'aide de la touche F5 du clavier,

Comme vous le constatez, le nom de la dernière photo est ajouté deux fois à la fin de la variable Php. Nous stockons ainsi 16 noms de fichiers dans la variable. 16 est bien un multiple de 4.

• Saisir un délai et cliquer sur le bouton Lancer pour démarrer le diaporama,

Cette fois, lorsque le dernier carré d'images est atteint, plus aucune miniature brisée n'est proposée. Certes, la dernière photo est répétée. Mais de cette manière, le diaporama est complètement automatisé et dynamique. Il réagit parfaitement, quel que soit le nombre d'images contenues dans le sous dossier.

• Cliquer sur le bouton Arrêter pour stopper l'animation,
• Revenir dans le code de la page index.php,
• Passer la ligne de l'instruction echo en commentaire,

Pour une application ficelée, il conviendrait de précharger toutes les images du diaporama dans le cache du navigateur. C'est d'ailleurs ce que faisait le code Javascript de l'application automatisée. Une variable image est déclarée pour chaque photo à précharger.

...
<script language='javascript' type='text/javascript'>

var i1 = new Image;
var i2 = new Image;
var i3 = new Image;
...
i1.src = 'diaporama/01-place-de-grammat-lot.jpg';
i2.src = 'diaporama/02-vue-depuis-Rocamadour-lot.jpg';
i3.src = 'diaporama/03-place-de-cahors-lot.jpg';
...

Ce code statique doit devenir dynamique en tenant compte des informations récoltées par le code PHP. Néanmoins et quant à nous, nous avons réussi à aboutir l'application du diaporama dynamique pour le Web.