p4bl0's blog

Vous avez certainement remarqué la présence d'un nouvel onglet intitulé "Shared" dans le menu. Il pointe vers http://shared.p4bl0.net/. Dans cette article je vais expliquer comment réaliser un système de partage de fichiers tel que celui ci, vous verrez que ce n'est pas compliqué :-)



Voyons d'abord la fonction PHP qui permet de générer l'arborescence, ensuite nous verrons le css et le javascript nécessaire, et enfin nous verrons une petite astuce à utiliser.

1/ Le PHP

Sans plus tarder, voici le code de la fonction :
Comme vous le voyez, la fonction prend deux arguments. Le premier est un pattern pour la fonction php glob(), le second n'est pas obligatoire, c'est une liste avec les nom de fichiers et/ou dossier qu'il ne faut pas afficher.
Parcourons maintenant le code ligne par ligne.

• À la ligne 3, on regarde si la variable d'environnement SHARED existe, sinon, on lui donne la valeur 0. Cette variable nous servira plus tard pour le javascript. On utilise une vairable d'environnement pour que sa valeur soit accessible depuis n'importe où, même avec les appels récursifs de la fonction (quand la fonction fait appel à elle même).
• À la ligne 4 on utilise la fonction glob() qui nous renvoie dans la variable $files la liste des fichiers correspondant au pattern $folder que l'on a passer en argument à la fonction share.
• Dans les lignes 5 à 7 on vérifie si la listes de fichiers que contient $files n'est pas vide. Si elle l'est on affiche un message disant que le dossier est vide.
• Ensuite, si la liste $files n'est pas vide, on utilise la boucle foreach qui est très pratique pour parcourir les listes et les tableaux. Chaque fichier contenu dans la liste $files sera stocké dans la variable $file jusqu'au prochain tour de la boucle. La boucle se fini quand on a parcouru toute la liste.
• À la ligne 9 on utilise la fonction explode() avec comme séparateur '/' sur la variable $file et on stock le résultat dans $filename, puis on remplace le contenu de $filename par le dernier élément de la liste renvoyée par explode() : c'est le nom du fichier ou du dossier.
• À la ligne 10 on vérifie que le nom du fichier ou dossier contenu dans $filename n'est pas dans la liste des fichiers et/ou dossiers à ne pas afficher. Si il n'y est pas...
• À la ligne 11 on regarde si $file contient un nom de dossier ou de fichier.
• À la ligne 12 : si c'est un dossier, on affiche en gras son nom avec un + devant. Le + est contenu dans un span qui a pour id "signx" où x est la valeur de $_ENV['SHARED'], cela nous permettra de remplacer le + par un - facilement en JavaScript. Le signe est le nom du dossier sont contenu dans une balise a qui a un seul attribut onclick qui appel la fonction JavaScript toogleFolder avec comme argument la valeur de $_ENV['SHARED'].
• À la ligne 13 on ouvre une div qui a pour class "folder" et pour id "folderx" où x est la valeur de $_ENV['SHARED'], comme tout à l'heure pour le signe, cela nous permettra d'y accéder facilement en JavaScript.
• À la ligne 14 la fonction share fait appel à elle même sur le dossier contenu dans $file.
• À la ligne 15 on referme la div.
• Lignes 16 à 20 : sinon $file contient un fichier, donc on affiche son nom et sa taille (obtenue avec la fonction filesize()). Le nom du fichier est un lien vers le fichier. Cela permettra aux visiteurs de le visualiser dans leur navigateur ou de le télécharger en appuyant sur la touche alt en même temps qu'ils cliquent sur le lien.
• Puis jusqu'à la fin on ferme les blocks ouvert précédemment.

Voilà pour le code PHP. Voyons maintenant le code CSS et le code JavaScript.

2/ Le CSS

Le code CSS ne nécessite pas vraiment d'explication, si vous en avez besoin demandez dans les commentaires ;-).

3/ Le JavaScript

Vous verrez que le code de la fonction toogleFolder() est très simple. Cette fonction permet d'afficher / cacher le contenu d'un dossier en cliquant sur son nom.
C'est la que nous sert la valeur de $_ENV['SHARED'] : souvenez vous que c'est ce que nous passons en argument à la fonction (code PHP, ligne 12). Et grâce à ça et à docuement.getElementById() on peut facilement connaître l'état (affiché ou caché) d'un dossier.
La fonction vérifie donc l'état de la div qui à our id "folderx" où x est la valeur de id, l'argument de la fonction toogleView().
Si le dossier et caché, on l'affiche et on met un - à la place du + dans le span qui a pour id "signx" où x est la valeur de id, l'argument de la fonction toogleView().
Si le dossier est afficher, on le cache et on remplace le - par un +.

4/ La petite astuce

Cette astuce concerne le fichier .htaccess. Elle permettra si vous le désirez d'interdire au visiteur de lister le contenu des répertoires qui sont dans le dossier partagé. Le principe c'est qu'on va rediriger le visiteur vers la page qui partage les fichiers si l'URL à laquelle il tente d'accéder n'est pas un vrai fichier.
Pour faire ça on va utiliser le mod_rewrite d'Apache.
À la première ligne on active la réécriture d'URL, à la seconde on vérifie si l'URL demandé n'est pas un fichier et si elle ne l'ai pas, la ligne 3 redirige vers la page de partage (la mienne dans l'exemple).

Et voilà ! Vous pouvez voir le résultat ici, et écoutez au passage les superbes sonneries pour téléphones portables que nous a concocté Didier Super.

P.S.: Si vous êtes chez Free, vous ne pouvez ni utiliser la fonction glob() ni le mod_rewrite d'Apache. Il vous est toutefois possible de créer un partages de fichiers similaires si vous le désirez en utilisant les fonctions opendir(), readdir() et closedir() à la place de la fonction glob()