Mise en ligne : Filezilla sans HTML [WEB04]

Cette exercice porte sur la mise en ligne de fichiers avec le logiciel Filezilla. Il s’agit d’effectuer des manipulations de fichiers et d’observer le résultat en ligne.

Consignes de l’exercice

Créez un dossier pour stocker vos fichiers sur le bureau (ou dans l’espace Documents) de votre ordinateur. Ce dossier sera le dossier racine local de votre site.

Dans le dossier racine local, créez un fichier .txt avec un peu de texte et nommez le exemple.txt.

Ouvrez le fichierexemple.txt dans un navigateur en local.

Afficher la solution

Solution :

Ouvrez votre navigateur et utilisez le menu Fichier / Ouvrir pour ouvrir le fichier texte ou faites glisser le fichier directement dans la fenêtre du navigateur.

Observez attentivement le contenu du champ adresse de votre navigateur. Que remarquez-vous ? Consultez ensuite les explications ci-dessous.

Afficher les explications

Explications :

L’adresse ne commence pas par le protocole http:// ou https://. Sur la plupart des navigateurs l’adresse commence par le protocole file:/// ce qui est normal puisque votre page n’est pas en ligne mais en local sur votre ordinateur (notez que le protocole est masqué sur certains navigateurs)
Si vous êtes sur Windows, l’adresse doit commencer par une lettre (qui peut changer), par exemple C: correspondant à un disque dur ou F: à une clé USB.
L’adresse est composée du chemin d’accès complet au fichier sur votre propre machine. Ce chemin d’accès sera donc probablement différent sur un autre ordinateur.
Le nom du fichier est indiqué explicitement tout à la fin de l’adresse.

À l’aide du client FTP Filezilla, mettez en ligne le fichier exemple.txt :

Connectez-vous à votre espace d’hébergement ;
Naviguez dans le dossier permettant de publier du contenu (généralement www ou public) de votre espace distant. Ce dossier sera le dossier racine distant.
Déposez le fichier.

Quelques précisions importantes :
Le dossier racine distant est l’équivalent sur le serveur du dossier racine présent sur votre ordinateur. Il contient donc tous les fichiers d’un site et est qualifié de distant car accessible via Internet. Celui qui est présent sur votre ordinateur sera quant à lui qualifié de dossier racine local. Pour que tout fonctionne correctement, s’il peuvent avoir un nom différent (par exemple : dossier_racine (pour le local) et www (pour le distant), leur contenus doivent être parfaitement identiques.

Avec votre navigateur, consultez la version en ligne du fichier exemple.txt.

Afficher la solution

Solution :

Pour consulter le fichier en ligne, vous devez saisir manuellement l’adresse de votre page web dans le champ de votre navigateur réservé à cet effet.

Champ adresse d'un navigateur — Champ adresse d’un navigateur

Comparez l’adresse que vous venez de saisir avec l’adresse locale précédente. Quelles sont les différences et les points communs ?

Afficher la solution

Solution :

La seconde adresse commence généralement par le protocole http:// il s’agit donc bien d’une adresse Internet classique (ou distante). Sur certains navigateurs, le protocole http:// est masqué par défaut. Pour vous en assurer, vous pouvez le rajouter manuellement et valider avec la touche Entrée, la page devrait se recharger et le protocole sera masqué à nouveau.
L’adresse est composée du nom de domaine du serveur (ex : alwaysdata.net).
Comme pour un fichier local, le nom du fichier est indiqué explicitement tout à la fin de l’adresse.

Modifiez la page exemple.txt pour y ajouter un paragraphe contenant le texte de votre choix.

Remplacez le fichier en ligne par la nouvelle version que vous venez de modifier et consultez vos modifications en ligne.

Sur le serveur, dans le dossier racine distant, créez un nouveau dossier et déplacer le fichier exemple.txt à l’intérieur.

Affichez à nouveau la version en ligne du fichier exemple.txt dans votre navigateur.

Affichez le contenu de votre dossier racine local. Est-ce que les extensions de fichiers sont visibles ? Si vous ne savez pas ce que c’est, consultez l’explication ci-dessous.

Afficher les explications

Les extensions de fichiers :

L’extension d’un fichier est l’indication à la fin du nom d’un fichier permettant d’indiquer à quel type de fichier nous avons affaire. Les pages web doivent normalement se terminer par l’extension de fichier .html. Il est indispensable de voir les extensions de fichiers lorsque vous construisez un site web. Vous devez systématiquement connaître l’extension exacte de vos fichiers afin d’être en mesure, par exemple, de distinguer les fichiers avec l’extension .jpeg ou .jpg qui sont toutes les deux valides ou encore .html et .htm.

Par défaut, les extensions de fichiers sont masquées sur Windows et Mac Os X. Ce qui peut évidemment nous poser problème…

Seulement si les extensions de fichiers n’étaient pas visibles à la question précédente, paramétrez votre système d’exploitation pour affichez les extensions de fichiers (.jpg, .png par exemple).

Afficher la procédure

Afficher les extensions des fichiers :

– Windows 7, Windows Vista :

Ouvrez une fenêtre de l’explorateur de fichiers (ouvrez n’importe quel dossier ou fenêtre de Windows).
Cliquez sur l’onglet Organiser.
Sélectionnez Options des dossiers et de recherche.
Cliquez sur l’onglet Affichage.
Décochez la case Masquer les extensions des fichiers dont le type est connu.

– Windows 10 :

Ouvrez une fenêtre de l’explorateur de fichiers (ouvrez n’importe quel dossier ou fenêtre de Windows).
Ouvrez l’onglet Affichage.
Cliquez sur Options.
Dans la boite de dialogue qui s’affiche, ouvrez l’onglet Affichage.
Dans la liste Paramètres avancés, décochez la case Masquer les extensions des fichiers dont le type est connu.
Validez par OK.

– Mac Os X :

Allez dans le Finder (cliquez sur le bureau).
Affichez les préférences, Menu Finder / Préférences.
Ouvrez l’onglet Options avancées.
Cochez la case Afficher toutes les extensions de fichiers.

Sur le serveur, s’il existe un fichier index.html dans votre dossier racine distant, supprimez-le.

Dans le champ adresse du navigateur, supprimez le nom du fichier à la fin de l’adresse et validez.

Si vous obtenez une erreur, c’est plutôt une bonne nouvelle, cela signifie que la liste des fichiers n’est pas visible par défaut, mais vous allez devoir traiter la question suivante…

Si vous n’avez pas d’erreur et que la liste des fichiers présents dans votre dossier racine distant s’affiche alors vous pouvez sauter la question suivante.

Facultatif en fonction de la question précédente. Nous allons faire une petite manipulation pour changer un paramètre du serveur, suivez scrupuleusement les consignes suivantes :

Créez un nouveau fichier txt dans votre dossier racine local et nommez-le htaccess.
Modifier le fichier en question pour lui ajouter EXACTEMENT le texte suivant : Options +Indexes. ATTENTION à ne pas ajouter d’espaces en trop !
Enregistrez le fichier.
Déposez le fichier dans votre dossier racine distant.
Renommez le fichier pour lui donner EXACTEMENT le nom suivant .htaccess (il suffit d’ajouter un point au début du nom du fichier et s’assurer de ne pas avoir d’extension).
Vous devriez maintenant être en mesure de consulter la liste des fichiers de votre site.
Si vous obtenez une erreur 500 Internal Server Error, c’est que vous avez probablement fait une erreur dans le contenu du fichier.

Afficher l’explication en vidéo

Explication en vidéo :

Renommez le fichier exemple.txt en index.html, placez-le sur le serveur et affichez-le dans votre navigateur.

Essayez de consulter la liste des fichiers dans votre navigateur comme nous l’avons fait précédemment…

Afficher l’explication

Explications :

La page index.html est toujours chargée par défaut lorsque aucune page n’est indiquée explicitement dans l’adresse URL. Quelque soit les paramètres du serveur il n’est donc plus possible de consulter la liste des fichiers du dossier.

La page d’accueil d’un site web va donc toujours s’appeler index.html (ou index.php).

Supprimez la page index.html du serveur.

Déconnectez Filezilla du serveur.

Utilisez le Gestionnaire de sites pour enregistrer l’accès au serveur dans Filezilla. Vous pouvez vous aider de l’article suivant pour traiter les questions suivantes Utiliser les options avancées de Filezilla. Vous devez paramétrer l’accès au serveur avec :

Le dossier racine de votre site comme dossier local par défaut.
Le dossier de votre site sur le serveur comme dossier distant par défaut.
Dans les options avancées, cochez la case Comparaison de dossier.

Utilisez le Gestionnaire de sites pour vous connecter au serveur. Si votre paramétrage est correct, vous devriez avoir le dossier de votre site local à gauche et le dossier de votre site distant à droite.

Sauf mention contraire*, l'article Mise en ligne : Filezilla sans HTML [WEB04] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.