Aller au menu - Aller au contenu

Personnaliser le skin de son FTP

Informations sur le tutoriel

Avatar
Auteur : Thunderseb
Difficulté : Débutant (1 / 5)
Visualisations : 32 292


Plus d'informations Plus d'informations
Si vous aussi vous voulez modifier l'affichage de votre FTP, vous avez trouvé le bon tutoriel :) .

Quand je parle de FTP, je pense à l'arborescence qui vous sert à naviguer dans vos répertoires et vos fichiers sur votre espace Web : le listing des fichiers généré par Apache.

Je sais que pour les puristes l'utilisation de FTP est abusive, mais je trouve que ça résume bien le tout et que c'est plus facile de dire FTP que "listing des fichiers généré par Apache".

[Voilà, c'était pour la petite précision]
Sommaire du tutoriel :
Icône du chapitre

Comment ?

En général, votre FTP ressemble à ceci :

Image utilisateur


Je vais vous expliquer comment le modifier de façon à donner quelque chose de plus "joli", comme ceci par exemple :

Image utilisateur


Pour obtenir ce résultat, nous allons devoir modifier (ou créer) le fichier .htaccess qui se trouve à la racine de votre espace Web. La mise en page se fera en HTML. Et je vous le dis tout de suite, votre code ne sera pas valide, parce que le code HTML que génère Apache pour afficher le squelette de l'arborescence est invalide (il y a des balises dans un élément PRE).

Le fichier .htaccess

A la racine de votre hébergement (dans le dossier de base), créez un fichier .htaccess. Si vous en avez déjà un, nous allons le modifier.

Header et footer



Commencez par écrire ces 2 lignes :

Code : Apache
1
2
HeaderName /ftp/head.htm
ReadmeName /ftp/foot.htm


head.htm contiendra le code de la page à placer avant l'arborescence, et foot.htm, ce qui vient après.

Je ne comprends pas bien à quoi servent ces deux fichiers... tu peux expliquer ?


Quand vous naviguez dans votre FTP, Apache génère la liste des fichiers du répertoire que vous visitez. Cette liste va alors être ajoutée au code de head.htm. A tout cela, le code de foot.htm sera ajouté, ce qui donnera au final une page complète. Voici ce que ça peut donner :

Code : HTML
1
2
3
4
5
<!--  code de head.htm -->

<PRE>Code du listing génér par Apache</PRE>

<!-- code de foot.htm -->


Voici un code possible pour head.htm



Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>FTP Viewer</TITLE>
<SCRIPT TYPE="text/javascript" SRC="/ftp/script.js"></SCRIPT>
<STYLE TYPE="text/css">
    body { padding: 0; margin: 0; background: url("http://nayi.free.fr/ftp/latte.gif") repeat-x top #EEEEEE; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #494949; }
    pre { background: #FFFFFF; margin: 20px; margin-top: 0px; padding-bottom: 5px; padding-left: 10px; border: 1px solid #AAAAAA; padding-bottom: 15px; }
    pre img { margin-top: 10px; margin-bottom: -10px; border: none; }
    img { border: none; }
    hr { display: none; }
    a, a:link, a:active, a:visited { font-weight: bold; color: #494949; }
    a:hover { color: #DAA520; }
    h1 { text-align: center; font-size: 12px; margin: 0; padding: 0; }
</STYLE>
</HEAD>
<BODY>
<H1>.:: FTP Viewer ::.</H1>


Les balises sont en majuscule, car dans le code que apache générera, il sera en majuscule. C'est pour harmoniser le tout. Je n'aime pas le désordre, donc j'ai décidé de tout mettre en majuscule ^^


Voici un code possible pour foot.htm



Code : HTML
1
2
</BODY>
</HTML>


Oui, je sais, c'est très long... Le code de l'arborescence sera inséré par Apache entre ces 2 fichiers.

Quelques directives



Maintenant, ajoutez ce code :

Code : Apache
1
2
3
IndexIgnore .htaccess Thumbs.db db 
IndexOptions SuppressHTMLPreamble FancyIndexing
IndexOrderDefault Ascending Description


  • IndexIgnore : Cette directive précise quels fichiers ne seront pas affichés dans l'arborescence. Ici, j'ai choisi de cacher mes .htaccess, Thumbs.db ainsi que les fichiers .db.
  • IndexOptions : C'est la directive qui permet d'ajouter des options. Moi j'ai ajouté deux options : SuppressHTMLPreamble et FancyIndexing.
    • SuppressHTMLPreamble : c'est l'option qui va dire à Apache de ne pas générer lui-même le code du header et du footer (puisque c'est nous qui le faisons)
    • FancyIndexing : l'affichage des répertoires est en mode intelligent. C'est en fait le mode complet, celui généralement par défaut.
  • IndexOrderDefault Ascending Description : Cela signifie que le répertoire est classé par description. Le contraire d'ascending est descending. Vous pouvez aussi classer le répertoire par taille (size) ou par nom (name).
  • IndexStyleSheet (à parti d'Apache 2.2.2) : Grâce à cette directive, vous pouvez spécifier une feuille de style .css à charger.


Autres options d'IndexOptions



Je n'ai utilisé que deux options, les plus utiles. Mais il en existe d'autres, les voici :

  • L'option SuppressLastModified sert à enlever la colonne Last Modified.
  • L'option SuppressDescription sert à enlever la colonne Description.
  • L'option SuppressSize sert à enlever la colonne Size.
  • L'option SuppressColumnSorting sert à enlever les liens au dessus des colonnes pour changer l'ordre et le type de classement.
  • L'option IconsAreLinks sert à faire devenir l'icône un lien.
  • L'option IconWidth sert à définir la largeur des icônes en pixel (par défaut de 32).
    Exemple: IconWidth=32.
  • L'option IconHeight sert à définir la hauteur des icônes (elle doit être la même que la largeur).
    Exemple: IconHeight=32.
  • L'option FoldersFirst (v.2.0.23 au moins. Mais il semblerait que ça fonctionne sous Apache 1.3) sert à afficher les répertoires en premier (par défaut dans l'explorateur Windows.
  • L'option NameWidth sert à définir la largeur de la colonne Name. En mettant une étoile (*), la colonne prend la largeur du plus grand nom.
    Exemple: NameWidth=* ou NameWidth=50.
  • L'option DescriptionWidth (v.2.0.23 au moins) sert à définir la largeur de la colonne Description. Idem que pour NameWidth.
    Exemple: DescriptionWidth=* ou DescriptionWidth=50.
  • L'option IgnoreClient sert à ignorer le client: il ne peux plus choisir comment classer le répertoire en cliquant sur le nom des colonnes.
  • L'option SuppressIcon (v.2.0.23 au moins) permet de supprimer les icônes.
  • L'option SuppressRules (v.2.0.23 au moins) permet de supprimer les balises <hr /> du document (Apache en met deux: une sous les noms de colonnes et l'autre sous le contenu du répertoire).
  • L'option SuppressColumnSorting est remplacée par l'option IgnoreClient dans la version 2.0.23. Elles ont le même effet.
  • L'option HTMLTable (v.2.0.23 au moins, option expérimentale) permet d'inscrire le répertoire dans un tableau HTML. Cela peut-être très pratique.
  • L'option ScanHTMLTitles permet de remplacer la description par le nom du fichier/dossier.
  • L'option XHTML (v.2.0.49 au moins) permet de forcer l'utilisation de XHTML
    Ne change que les balises <img> en <img /> si l'option SupressHTMLPreamble est activée. Sinon, c'est radical: tout est mis dans une liste à puces, il y a deux doctype (ils en font un peu trop) et les balises sont écrites en minuscules.
  • L'option IgnoreCase permet d'ignorer la casse : Par défaut, les fichiers sont triés de A à Z puis de a à z, le fichier Zozor.sdz viendra avant ahah.txt. Avec cette option activée, les majuscules sont ignorées, ahah.txt vient avant Zozor.sdz.
  • L'option ShowForbidden permet d'afficher les fichiers normalement cachés.
  • L'option TrackModified (v.2.0.23 au moins) sert à afficher la date de dernière modification.


Ajout une icône



Pour ajouter une icône à un type de fichier, il suffit d'utiliser cette directive :

Code : Apache
1
AddIcon (IMG,/ftp/pdf.png) .pdf .PDF


Cette directive définit une icône (/ftp/pdf.png) qui sera attribuée aux fichiers portant l'extension .pdf ainsi qu'à ceux portant l'extension .PDF.

IMG est le texte alternatif affiché si l'image n'est pas chargée.

Ajout d'une description



Dans le listage du contenu d'un répertoire, il y a une colonne Description, qui décrit chaque type de fichier. Voici comment modifier ce texte.

Code : Apache
1
AddDescription "Document Word"       *.doc *.DOC *.docx *.DOCX


Ainsi, tous les fichiers portant l'extension .doc (ou .docx) auront comme description Document Word, au même titre que les fichiers affublés de l'extension, .DOC.

Le cas des dossiers



Et pour un dossier, je fais comment ?


L'icône



Ah, c'est très simple, faites comme ceci :
Code : Apache
1
2
AddIcon (PAR,/ftp/icons/dir_par.png) ..
AddIcon (DIR,/ftp/icons/dir.png) ^^DIRECTORY^^


La première directive est faite pour les dossiers avec le lien Parent Directory (dont le chemin est ..). La deuxième sert tout simplement pour les dossiers normaux ;)

La description



Voilà pour ajouter une description aux dossiers :

Code : Apache
1
2
AddDescription "Dossier parent" ..
AddDescription "Répertoire" */


L'icône par défaut



Voici, pour finir, la directive qui permet d'attribuer une icône à un fichier, si il n'en a pas une spécialement définie :

Code : Apache
1
DefaultIcon /ftp/icons/file.png

Le code complet

Comme je suis gentil, je vais vous donner le code de mon fichier .htaccess :) :

Code : Apache
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
HeaderName /ftp/head.htm
ReadmeName /ftp/foot.htm

IndexIgnore .htaccess Thumbs.db db _notes
IndexOptions SuppressHTMLPreamble FancyIndexing FoldersFirst IgnoreCase
IndexOrderDefault Ascending Description

AddIcon (IMG,/ftp/icons/image.gif) .svg .SVG .wmf .WMF 
AddIcon (IMG,/ftp/icons/gif.gif) .gif .GIF
AddIcon (IMG,/ftp/icons/jpg.gif) .jpg .JPG .jpeg .JPEG
AddIcon (IMG,/ftp/icons/png.gif) .png .PNG
AddIcon (IMG,/ftp/icons/psd.gif) .psd .PSD
AddIcon (IMG,/ftp/icons/ico.gif) .ico .ICO
AddIcon (IMG,/ftp/icons/tif.png) .tif .TIF .tiff .TIFF

AddDescription "Image PNG"       *.png *.PNG
AddDescription "Image JPG"       *.jpg *.JPG
AddDescription "Image BMP"       *.bmp *.BMP
AddDescription "Image SVG"       *.svg *.SVG
AddDescription "Image GIF"       *.gif *.GIF
AddDescription "Image WMF"       *.wmf *.WMF
AddDescription "Image PSD"       *.psd *.PSD
AddDescription "Image ICO"       *.ico *.ICO

AddIcon (VIDEO,/ftp/icons/wmp.png)  .mov .MOV .avi .AVI .mpg .MPG .wmv .WMV
AddDescription "Video QuickTime"    *.mov *.MOV
AddDescription "Video AVI"          *.avi *.AVI
AddDescription "Video MPEG"         *.mpg *.MPG
AddDescription "Video WMV"          *.wmv *.WMV

AddIcon (AUDIO,/ftp/icons/wmp.png) .wma .mp3 .mp4 .midi .mid .WMA .MP3 .MP4 .MIDI .MID
AddDescription "Audio MP3"     *.mp3 *.MP3
AddDescription "Audio MP4"     *.mp4 *.MP4
AddDescription "Audio WMA"     *.wma *.WMA
AddDescription "Audio MIDI"    *.mid *.midi

AddIcon (FLA,/ftp/icons/fla.gif)      .fla
AddIcon (AS,/ftp/icons/as.gif)        .as
AddIcon (FLV,/ftp/icons/flv.gif)      .flv
AddDescription "Fichier Flash Video" *.flv
AddDescription "Projet Flash"         *.fla
AddDescription "Fichier ActionScript"          *.as

AddIcon (SWF,/ftp/icons/swf.png)    .swf
AddDescription "Animation Flash"       *.swf

AddIcon (TXT,/ftp/icons/txt.png) .txt
AddDescription "Fichier de texte brut" *.txt

AddIcon (DOC,/ftp/icons/word.png) .doc .rtf .docx
AddDescription "Document Word" *.doc *.rtf *.docx

AddIcon (DOC,/ftp/icons/powerpoint.png) .ppt .pptx
AddDescription "Présentation PowerPoint" *.ppt *.pptx

AddIcon (DOC,/ftp/icons/excel.png) .xls .xlss
AddDescription "Feuille de calcul Excel" *.xls *.xlsx

AddIcon (PHP,/ftp/icons/php.gif) .php .phtml
AddDescription "Page Web PHP" *.php
AddDescription "Page Web PHP" *.phtml

AddIcon (HTM,/ftp/icons/web.gif) .htm .html .HTM .HTML .xhtml .XHTML
AddDescription "Page Web HTML" *.htm *.HTM
AddDescription "Fichier HTML Compilé" *.chm
AddIcon (HTC,/ftp/icons/chm.gif) .chm

AddIcon (HTC,/ftp/icons/ini.png) .htc
AddDescription "Comportement IExplorer" *.htc

AddIcon (CSS,/ftp/icons/css.png) .css
AddDescription "Feuille de style CSS" *.css
AddIcon (CSS,/ftp/icons/js.png) .js
AddDescription "Fichier Javascript" *.js
AddIcon (CSS,/ftp/icons/xml.png) .xml
AddDescription "Fichier XML" *.xml

AddIcon (EXE,/ftp/icons/exe.png) .exe .EXE
AddDescription "Exécutable" *.exe *.EXE

AddIcon (PDF,/ftp/icons/pdf.png) .pdf .PDF
AddDescription "Document Adobe PDF" *.pdf *.PDF

AddIcon (ARCHIVE,/ftp/icons/archive.gif) .jar .zip .rar .arj .arc .tar .targz .gz
AddDescription "Archive ZIP" *.zip *.ZIP
AddDescription "Archive RAR" *.rar *.RAR
AddDescription "Archive ARJ" *.arj *.ARJ
AddDescription "Archive ARC" *.arc *.ARC
AddDescription "Archive TAR" *.tar *.TAR
AddDescription "Archive JAR" *.jar *.JAR
AddDescription "Archive GZ" *.gz *.GZ
AddDescription "Archive TARGZ" *.targz *.TARGZ

AddIcon (C,/ftp/icons/c.gif) .c
AddDescription "Fichier C" *.c
AddIcon (H,/ftp/icons/h.gif) .h
AddDescription "Fichier d'ent-tête" *.h
AddIcon (VCPROJ,/ftp/icons/vcproj.gif) .vcproj
AddDescription "Projet Visual C++" *.vcproj

AddIcon (PAR,/ftp/icons/dir_par.png) ..
AddIcon (DIR,/ftp/icons/dir.png) ^^DIRECTORY^^
AddDescription "Dossier parent" ..
AddDescription "Répertoire" */

DefaultIcon /ftp/icons/txt.png


Vous pouvez aussi réutilisez les icones que j'utilise. Elles se trouvent ici.
Sinon, voici un aperçu de mon FTP. C'est aussi là que se trouvent les fichiers qui le composent.

Voilà, ayez un beau FTP ;)

Merci à biohazard2 qui m'a aidé à rédiger ce tutoriel ;)

Informations sur le tutoriel

Retour en haut Retour en haut

Créé : Le 21/12/2006 à 18:13:24
Modifié : Le 15/02/2009 à 16:15:48
Avancement : 100%
Licence : Copie non autorisée

68 commentaires