Les serveurs peuvent être configurés pour afficher le contenu d'un répertoire qui n'a pas de fichier d'index à rendre. Le résultat est généralement moins que visuellement spectaculaire:
Nous pouvons en prendre le contrôle nous-mêmes en répliquant cette fonctionnalité avec PHP.
- Créez un fichier d'index (
.index.phpen commençant par le point) qui lit les fichiers dans le répertoire et les sort dans une table - Créer un
.htaccessfichier qui sert ce fichier comme index - Faites charger le fichier d'index dans CSS et d'autres ressources qui sont également précédées d'un point (masqué)
Le PHP suivant lit le répertoire des fichiers et affiche un tableau stylisé de leur nom, type de fichier et taille de fichier. Il applique également un nom de classe dans lequel appliquer des icônes pour les différents types de fichiers principaux (voir CSS).
Directory Contents "; $class="dir"; ) else ( $class="file"; ) // Cleans up . and… directories if($name==".")($name=". (Current Directory)"; $extn=" ";) if($name=="… ")($name="… (Parent Directory)"; $extn=" ";) // Print 'em print(" "; $size=" "); ) ) ?>
Filename Type Size (bytes) Date Modified
$name $extn $size $modtime
Les ressources chargées dans ce fichier d'index sont le premier script de tri de table sortable.js et un fichier .style.css. (Rappelez-vous que faire précéder les fichiers d'un point rend invisible dans la plupart des systèmes d'exploitation et n'apparaîtra pas non plus dans votre répertoire de fichiers (bon)). Voici ce CSS:
* ( padding:0; margin:0; ) body ( color: #333; font: 14px Sans-Serif; padding: 50px; background: #eee; ) h1 ( text-align: center; padding: 20px 0 12px 0; margin: 0; ) h2 ( font-size: 16px; text-align: center; padding: 0 0 12px 0; ) #container ( box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5); position: relative; background: white; ) table ( background-color: #F3F3F3; border-collapse: collapse; width: 100%; margin: 15px 0; ) th ( background-color: #FE4902; color: #FFF; cursor: pointer; padding: 5px 10px; ) th small ( font-size: 9px; ) td, th ( text-align: left; ) a ( text-decoration: none; ) td a ( color: #663300; display: block; padding: 5px 10px; ) th a ( padding-left: 0 ) td:first-of-type a ( background: url(./.images/file.png.webp) no-repeat 10px 50%; padding-left: 35px; ) th:first-of-type ( padding-left: 35px; ) td:not(:first-of-type) a ( background-image: none !important; ) tr:nth-of-type(odd) ( background-color: #E6E6E6; ) tr:hover td ( background-color:#CACACA; ) tr:hover td a ( color: #000; ) /* icons for file types (icons by famfamfam) */ /* images */ table tr td:first-of-type a(href$=".jpg.webp"), table tr td:first-of-type a(href$=".png.webp"), table tr td:first-of-type a(href$=".gif"), table tr td:first-of-type a(href$=".svg"), table tr td:first-of-type a(href$=".jpeg.webp") ( background-image: url(./.images/image.png.webp); ) /* zips */ table tr td:first-of-type a(href$=".zip") ( background-image: url(./.images/zip.png.webp); ) /* css */ table tr td:first-of-type a(href$=".css") ( background-image: url(./.images/css.png.webp); ) /* docs */ table tr td:first-of-type a(href$=".doc"), table tr td:first-of-type a(href$=".docx"), table tr td:first-of-type a(href$=".ppt"), table tr td:first-of-type a(href$=".pptx"), table tr td:first-of-type a(href$=".pps"), table tr td:first-of-type a(href$=".ppsx"), table tr td:first-of-type a(href$=".xls"), table tr td:first-of-type a(href$=".xlsx") ( background-image: url(./.images/office.png.webp) ) /* videos */ table tr td:first-of-type a(href$=".avi"), table tr td:first-of-type a(href$=".wmv"), table tr td:first-of-type a(href$=".mp4"), table tr td:first-of-type a(href$=".mov"), table tr td:first-of-type a(href$=".m4a") ( background-image: url(./.images/video.png.webp); ) /* audio */ table tr td:first-of-type a(href$=".mp3"), table tr td:first-of-type a(href$=".ogg"), table tr td:first-of-type a(href$=".aac"), table tr td:first-of-type a(href$=".wma") ( background-image: url(./.images/audio.png.webp); ) /* web pages */ table tr td:first-of-type a(href$=".html"), table tr td:first-of-type a(href$=".htm"), table tr td:first-of-type a(href$=".xml") ( background-image: url(./.images/xml.png.webp); ) table tr td:first-of-type a(href$=".php") ( background-image: url(./.images/php.png.webp); ) table tr td:first-of-type a(href$=".js") ( background-image: url(./.images/script.png.webp); ) /* directories */ table tr.dir td:first-of-type a ( background-image: url(./.images/folder.png.webp); )Afficher les fichiers de téléchargement de démonstration
RAPPELEZ-VOUS: le fichier .zip peut sembler vide, mais ce n'est pas le cas. Les fichiers sont tous précédés d'un point. Affichez-les dans un éditeur de fichiers qui vous montre les fichiers «cachés».
Un merci spécial à Cliff White.
Mise à jour de novembre 2012: la démo et les fichiers téléchargeables ont été mis à jour pour (1) montrer plus de tailles de fichiers lisibles par l'homme (2) avoir des pages d'erreur