Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Sujets que vous pourriez aussi aimer :
Parcourir les fichiers d'un dossier en PHP
Les
applications serveur capables de récolter les données de fichiers externes sont précieuses. Elles permettent d'enrichir leur contenu dynamiquement, de proposer des résultats restitués instantanément et d'importer des informations utiles. Nous avons déjà appris comment
accéder au contenu d'un fichier externe à partir de son chemin d'accès complet .
Mais le problème se corse lorsque le nom du ou des fichiers n'est pas connu. C'est pourquoi, dans cette formation en deux étapes, nous proposons premièrement d'apporter la solution permettant de
parcourir l'ensemble des fichiers d'un dossier . Dans un deuxième volet ensuite, nous exploiterons ces résultats pour parachever l'application du
diaporama Internet que nous avions conçue lors d'une formation Javascript .
En l'état, cette application est automatisée par le
code Javascript . Mais elle n'est pas dynamique. Elle n'est pas en mesure de considérer les nouvelles images ajoutées à la volée dans le sous dossier. Seul un code serveur peut questionner l'arborescence du disque. Il aura pour mission de transmettre ces informations au
code Javascript , pour inclure les nouvelles photos dans le
diaporama .
Sources et présentation de la problématique
Dans un premier temps, il est nécessaire de récupérer les travaux que nous avions aboutis en
Javascript .
La décompression conduit au fichier de la page Web principale. Il est nommé
index.php . C'est lui qui construit le
diaporama automatisé en fonction des images contenues dans le
sous dossier diaporama . Ces photos sont au nombre de huit et l'application actuelle n'est pas capable d'en considérer d'autres, sans intervention manuelle dans le
code Javascript . Nous allons bientôt le constater.
Mais avant cela et comme vous le savez, le projet doit être référencé dans l'interface d'
EasyPhp . Un nom doit lui être attribué. De même, son adresse issue de l'explorateur Windows doit être renseignée. Le
serveur Http doit être démarré. Le Database Server n'est pas utile dans cette application puisqu'aucune connexion aux bases de données MySql n'est prévue.
Une fois le projet ajouté, il apparaît dans la liste des applications serveur émulées par EasyPhp.
Cliquer sur son lien pour accéder à sa page d'accueil,
Nous retrouvons l'interface du diaporama automatisé que nous avions construite en
Javascript . Une petite barre d'outils est proposée sur la gauche de l'interface. Un bouton permet de démarrer l'animation du diaporama tandis qu'un autre permet de la stopper. Entre les deux, une zone de saisie fixe le délai de temporisation en secondes, à respecter entre chaque image à faire défiler.
Dans cette zone de saisie, taper le chiffre 4,
Puis, cliquer sur le bouton Lancer ,
Comme vous le constatez, toutes les 4 secondes, une nouvelle photo est affichée à la place de la précédente. Elles sont déroulées dans l'ordre proposé par le sous dossier diaporama. Lorsque la dernière image est atteinte, une boucle est enclenchée. L'animation reprend en effet depuis la première photo.
Cliquer sur le bouton Arrêter ,
Le diaporama se fige sur l'image en cours.
A la racine du dossier de décompression, cliquer droit sur le fichier index.php ,
Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad++,
Entre les lignes 73 et 77 pour un éditeur Notepad, vous notez la présence de cette petite barre d'outils. Elle est encapsulée dans un calque parent (Balise Div en Html) :
...
<div id='centre'>
<div id='barre'>
<input type='button' value='Lancer' onClick='demarrer()' style='background: linear-gradient( #555,#2C2C2C); margin-bottom:5px;' /><br />
<input type='text' id='minutage' value='2' onClick='this.value=''' /><br />
<input type='button' value='Arrêter' onClick='arreter()' style='background: linear-gradient( #555,#2C2C2C); margin-top:5px;' />
</div>
<div class='texte_photo' id='texteph' >Titre de laphoto</div>
...
Elle contient notamment le
bouton Lancer . Et ce dernier, comme vous le remarquez, appelle la fonction
Javascript demarrer , au clic. Cette fonction intervient plus bas dans la page, plus précisément à partir de la ligne 141 pour un éditeur Notepad :
...
function demarrer()
{
if(!isNaN(parseInt(document.getElementById('minutage').value)))
{
temporisation = document.getElementById('minutage').value*1000;
//Pour laisser le temps aux effets de se faire.
if(temporisation<2000)
temporisation=2000;
}
interval = setInterval(function(){
defiler('avant')}, temporisation);
}
...
Après avoir défini le délai en fonction de la saisie de l'internaute, elle appelle elle-même la
fonction defiler . Elle intervient juste en dessous à partir de la ligne 159. Cette fonction exploite des
tableaux de variables pour manipuler les photos à faire défiler. Et ces images sont recensées en variable publique, tout en haut de la section de script, à partir de la ligne 116 :
...
<script type='text/javascript' language='javascript'>
var chaine_img='01-place-de-grammat-lot.jpg; 02-vue-depuis-Rocamadour-lot.jpg; 03-place-de-cahors-lot.jpg; 04-vue-depuis-saint-cirq-lapopie-lot.jpg;'
chaine_img += '05-la-cluzas-haute-savoie.jpg; 06-luge-ete-la-cluzas-haute-savoie.jpg; 07-chateau-de-chambord-loir-et-cher.jpg; 08-les-gorges-du-verdon-alpes-de-haute-provence.jpg';
/*
chaine_img += ';09-le-grau-du-roi-gard.jpg; 10-le-pont-du-gard.jpg; 11-le-colorado-du-luberon.jpg; 12-la-dune-du-pilat-gironde.jpg';
*/
...
C'est cette chaîne qui est découpée en tableau de variables par la
fonction defiler . Comme vous l'avez compris, ces informations de fichiers étant écrites en dur dans le flux, elles ne peuvent être dynamiques. Si vous ajoutez de nouvelles photos dans le
dossier diaporama , vous devez compléter manuellement cette
variable Javascript pour y concaténer tous les nouveaux noms de fichiers.
Ce fonctionnement n'est pas envisageable pour une application serveur. C'est là que le
code Php doit intervenir. Il doit scruter le dossier à chaque chargement et reconstruire la liste des noms de fichiers. Cette chaîne devra alors être transmise au
code Javascript qui se chargera, comme il le fait déjà , de découper la variable, dynamique cette fois, pour isoler chaque photo à faire défiler. En revanche, il est très important que tout le diaporama soit géré par le
code Javascript . Ainsi c'est le code client, donc la machine de l'internaute qui est sollicitée et non le serveur. Nous équilibrons donc parfaitement les charges.
Parcourir les fichiers d'un dossier en PHP
Tout d'abord et comme vous le savez, la chronologie est importante dans une
page Html . Ce
code Php doit intervenir avant le
code Javascript . La variable des fichiers concaténés doit effectivement être transmise du serveur vers le client. Le code est relativement simple. Faut-il encore connaître les fonctions et les techniques.
Tout en haut de la page, avant la balise Html ouvrante, créer la section Php suivante :
<?php
$nom_dossier = 'diaporama/';
$dossier = opendir($nom_dossier);
while($fichier = readdir($dossier))
{
if($fichier != '.' && $fichier != '..')
{
echo $fichier.'<br />';
}
}
closedir($dossier);
?>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
...
Tout d'abord, nous mémorisons le chemin d'accès au sous dossier local concerné, dans la
variable $nom_dossier . Grâce à la
fonction Php opendir , nous chargeons ce dossier en mémoire sous forme de variable objet, stockée sous le
nom $dossier . Nous initions alors une
boucle while dans le but de parcourir tous les éléments qu'il recèle. C'est la
fonction Php readdir , avec la variable du dossier en paramètre, qui permet de récupérer tour à tour chaque fichier contenu, que nous stockons dans la
variable $fichier . A chaque passage dans la boucle, le pointeur de lecture étant placé sur l'élément suivant, il ne reste plus qu'à restituer le nom du fichier correspondant, grâce à la
fonction Php echo . Mais avant cela, nous excluons certains résultats. La
fonction Php readdir restitue le dossier en cours matérialisé par le point (.) et le dossier parent matérialisé par les deux points (..). Grâce à ce double test dans l'
instruction conditionnelle , nous les ignorons.
Lorsque la boucle prend fin, le dernier fichier est atteint. En conséquence, nous exploitons la
fonction Php closedir , avec la variable du dossier en paramètre, pour libérer la mémoire et donc les ressources empruntées.
Enregistrer les modifications et basculer sur le navigateur internet,
Rafraîchir la page avec la touche F5 du clavier,
Comme vous le constatez, les noms des huit fichiers effectivement contenus dans le
sous dossier diaporama , sont restitués les uns en dessous des autres. Cette restitution intervient en entête de page. La
fonction Php echo affiche son résultat en lieu et place. Et elle est écrite en entête de code. Mais elle consiste uniquement à réaliser un test temporaire.
Une sécurité brille néanmoins par son absence. Le diaporama est destiné à restituer l'affichage de fichiers images. Si des fichiers d'un autre type sont présents, ils seront proposés et conduiront au dysfonctionnement de l'application.
Copier le fichier index.php de la racine dans le sous dossier diaporama,
Puis, rafraîchir la page Web sur le navigateur,
Comme vous le constatez en effet, cet élément est proposé dans l'énumération, bien qu'il ne s'agisse pas d'un fichier image. Nous devons donc vérifier l'extension des fichiers parcourus. Nous pourrions exploiter les fonctions de traitement de chaînes que nous connaissons. Il s'agit en l'occurrence de
substr pour découper un texte et de
strripos pour trouver la position de la dernière occurrence cherchée, celle du point ici. Mais c'est aussi l'occasion de découvrir de nouvelles fonctions. La
fonction Php pathinfo requiert deux paramètres. Le premier est le nom du fichier sur lequel il s'agit d'obtenir des renseignements. Le second est l'attribut qui définit la nature de l'information à retourner. Avec la valeur PATHINFO_EXTENSION, cette fonction retourne l'extension du fichier.
Dans l'instruction conditionnelle, ajouter le critère suivant :
...
while($fichier = readdir($dossier))
{
if($fichier != '.' && $fichier != '..' && strtolower(pathinfo($fichier, PATHINFO_EXTENSION)) == 'jpg' )
{
echo $fichier.'<br />';
}
}
...
Nous vérifions simplement que l'extension retournée par cette fonction est bien le format
jpg . Nous prenons soin de l'encadrer dans la
fonction php strtolower pour réaliser une comparaison insensible à la casse.
Si vous enregistrez les modifications et rafraîchissez la page Web, vous constatez que le fichier index.php est exclu de l'énumération. Pourtant, il est bien présent dans le sous dossier diaporama.
Pour préparer les prochains travaux, nous devons concaténer ces noms de fichiers, séparés par un point-virgule, dans une chaine de caractères. C'est sur ce caractère remarquable en effet que le
code Javascript découpe l'information, pour placer chaque image dans une rangée indépendante d'un
tableau de variables . L'instruction echo faisait figure de test. Elle doit donc disparaître.
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 = '';
while($fichier = readdir($dossier))
{
if($fichier != '.' && $fichier != '..' && strtolower(pathinfo($fichier, PATHINFO_EXTENSION)) == 'jpg')
{
$chaine.= $fichier.';';
}
}
$chaine = trim($chaine,';');
echo $chaine;
closedir($dossier);
?>
...
Nous déclarons la
variable $chaine . A chaque passage dans la boucle, nous concaténons le nom de fichier précédent avec le suivant, en prenant soin de séparer l'information avec un point-virgule ($chaine.= $fichier.';'). Après la boucle, une fois tous les noms concaténés, nous exploitons la
fonction Php trim que nous avons déjà présentée. Avec le point-virgule en second paramètre, elle permet de supprimer sa dernière occurrence dans la chaîne concaténée, passée en premier paramètre. Le
code Javascript qui la réceptionnera ne doit pas considérer qu'il existe encore une image, à cause de ce point-virgule en trop. Puis, nous affichons temporairement ce résultat.
Enregistrer les modifications et basculer sur le navigateur Web,
Rafraîchir la page avec la touche F5 du clavier,
Comme vous le constatez, la chaîne est parfaitement reconstruite dynamiquement. Elle est prête à être transmise au
code client Javascript .
Récupérant les informations consolidées dynamiquement, le code client sera en mesure de générer un
diaporama désormais
dynamique , tout en équilibrant les charges. Il s'agit de la solution à développer dans le prochain volet.