[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Serveur > Personnaliser son FTP > Lecture du tutoriel

Personnaliser son FTP

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

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 :

Comment ?
Le fichier .htaccess
Le code complet

Comment ?

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

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

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 /pages/ftp/HEADER.html ReadmeName /pages/ftp/FOOTER.html

HEADER.html contiendra le code de la page à placer avec l'arborescence, et FOOTER.html, ce qui vient après.

Voici un code possible pour HEADER.html :

Code : HTML

<!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">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<LINK REL="icon" TYPE="image/gif" HREF="/pages/ftp/favicon.gif">
<LINK REL="shortcut icon" TYPE="image/x-icon" HREF="/pages/ftp/favicon.ico" />
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<META NAME="author" CONTENT="S&eacute;bastien dlM">
<TITLE>FTP Viewer - Thunderseb</TITLE>
<STYLE TYPE="text/css">
  body { padding:0 ; margin:0 ; background: url("http://nayi.free.fr/pages/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; }
  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>.:: Thunderseb - 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 FOOTER.html :

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

IndexIgnore .htaccess Thumbs.db db 
IndexOptions SuppressHTMLPreamble FancyIndexing
IndexOrderDefault Ascending Description
IndexStyleSheet /pages/ftp/STYLE.css

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,/pages/ftp/pdf.gif) .pdf .PDF

Cette directive définit une icône (/pages/ftp/pdf.gif) 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

Ainsi, tous les fichiers portant l'extension .doc 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,/pages/ftp/dir_par.gif) .. AddIcon (DIR,/pages/ftp/dir.gif) ^^DIRECTORY^^

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

La description

Voilà pour ajouter une description à un dossier Parent Directory :

Code : Apache

1	AddDescription "Dossier parent" ..

Par contre, je n'ai pas trouvé comment modifier la description d'un dossier normal. Mais bon, ce n'est pas très important

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 /pages/ftp/file.gif

Chez certaines personnes, dont moi, le fichier HEADER.html ne s'affiche pas dans le listing. Je ne sais pas trop pourquoi. Si quelqu'un a une réponse, je me ferai un plaisir de la prendre en compte.

Le code complet

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

:

Code : Apache

HeaderName /pages/ftp/HEADER.html
ReadmeName /pages/ftp/FOOTER.html

IndexIgnore .htaccess Thumbs.db db thunderdev

IndexOptions SuppressHTMLPreamble FancyIndexing

IndexOrderDefault Ascending Description

AddIcon (IMG,/pages/ftp/image.gif) .svg .SVG .wmf .WMF 
AddIcon (IMG,/pages/ftp/gif.gif) .gif .GIF
AddIcon (IMG,/pages/ftp/jpg.gif) .jpg .JPG .jpeg .JPEG
AddIcon (IMG,/pages/ftp/png.gif) .png .PNG
AddIcon (IMG,/pages/ftp/bmp.gif) .bmp .BMP
AddIcon (IMG,/pages/ftp/psd.gif) .psd .PSD
AddIcon (IMG,/pages/ftp/ico.gif) .ico .ICO
AddIcon (IMG,/pages/ftp/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,/pages/ftp/video.png) .mov .MOV .avi .AVI .mpg .MPG .wmv .WMV .FLV .flv
AddDescription "Video / QuickTime"      *.mov *.MOV
AddDescription "Video / AVI"       *.avi *.AVI
AddDescription "Video / MPEG"     *.mpg *.MPG
AddDescription "Video / WMV"     *.wmv *.WMV
AddDescription "Video / Flash Video"     *.flv *.FLV

AddIcon (AUDIO,/pages/ftp/video.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,/pages/ftp/fla.png) .fla .FLA
AddIcon (FLA,/pages/ftp/as.png) .as .AS
AddDescription "Flash / FLA"       *.fla *.FLA
AddDescription "Flash / AS"         *.as  *.AS

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

AddIcon (TXT,/pages/ftp/txt.gif) .txt .TXT
AddDescription "Document / TXT" *.txt *.TXT

AddIcon (DOC,/pages/ftp/doc.jpg) .doc .DOC .rtf .RTF
AddDescription "Document / DOC" *.doc *.DOC *.rtf *.RTF

AddIcon (PHP,/pages/ftp/file.gif) .php .PHP .phtml .PHTML
AddDescription "Fichier Web / PHP" *.php *.PHP
AddDescription "Fichier Web / PHTML" *.phtml *.PHTML

AddIcon (HTM,/pages/ftp/web.jpg) .htm .html .HTM .HTML
AddDescription "Fichier Web / HTML" *.htm* *.HTM*

AddIcon (HTC,/pages/ftp/frontpage.jpg) .htc .HTC
AddDescription "Comportement IExplorer" *.htc* *.HTC*

AddIcon (CSS,/pages/ftp/txt.gif) .css .CSS
AddDescription "Feuille de style / CSS" *.css *.CSS
AddDescription "Javascript" *.js *.JS

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

AddIcon (ARCHIVE,/pages/ftp/archive.png) .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 (PAR,/pages/ftp/dir_par.gif) ..
AddIcon (DIR,/pages/ftp/dir.gif) ^^DIRECTORY^^
AddDescription "Dossier parent" ..

DefaultIcon /pages/ftp/file.gif

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

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité