TP3 – Administration d'un petit site Web

Introduction

L'objectif de ce TP est de mettre en application les notions étudiées dans les cours et TD précédents, à savoir les notions :

• de chemins absolus et relatifs dans une arborescence de dossiers et de fichiers ;
• de commandes écrites dans un terminal pour manipuler cette arborescence.

L'application de ces notions se fera sur un problème concret qu'un informaticien peut aisément rencontrer dans une entreprise : l'administration d'un petit site Web, c'est à dire, le déplacement et la modification de l'arborescence de ce site et des pages qui le composent.

Exercices

Commencez par créer un dossier ~/Documents/L1/ISE/TP3 pour stocker les fichiers et dossiers utilisés dans les exercices suivants.

Exercice 1 – Déplacement d'un petit site web

Il s'agit dans cette exercice de déplacer un petit site web d'un dossier d’origine vers un autre dossier sur le disque. Il faudra veiller à maintenir les liens que contiennent les pages HTML vers les images externes.

Voici l'arborescence de ce site :

SiteSmileys/
  ├── des_images/
  │   ├── encore_des_images/
  │   │   ├── smileyF.png
  │   │   └── smileyG.png
  │   ├── et_encore/
  │   │   ├── smileyH.png
  │   │   └── smileyI.png
  │   ├── smileyD.png
  │   └── smileyE.png
  ├── image/
  │   └── smileyB.png
  ├── page1.html
  └── une_autre_image/
      └── smileyC.png
  

Étape 1 – visionnage d'une page Web

Visionner la page web page1.html qui se trouve dans le dossier : /home/IntroSysEx/TP3/SiteSmileys/

1. D'abord en vous déplaçant dans le dossier SiteSmileys et en lançant la commande : firefox page1.html
2. Ensuite, depuis votre dossier racine ( cd ~)

Étape 2 – rapatriement du site Web

Vous pouvez visionner l'arborescence du site web en lançant la commande : tree /home/IntroSysEx/TP3/SiteSmileys/

L'objectif est de ramener ce site web dans votre arborescence personnelle. Veuillez suivre les étapes suivantes :

1. créer un dossier SiteSmileysAMoi dans le dossier TP3 ;
2. déplacez-vous dedans ;
3. copier le fichier page1.html dans ce dossier ;
4. visionnez la page web et constatez qu'il manque des images ;
5. créez un dossier image et copiez l'image smileyB.png dedans ;
6. rafraîchissez la page dans le navigateur et constatez que l'image smileyB.png s'affiche ;
7. opérez de manière similaire pour copier l'image smileyC.png dans l'arborescence afin qu'elle s'affiche dans la page web ;
8. continuez pour ramener tous les dossiers et images du site web.

Étape 3 – rapatriement rapide du site Web

La copie du site web en « local » peut être effectuée d'une manière beaucoup plus rapide.

1. Placez-vous dans le dossier TP3 ;
2. copiez toute la sous-arborescence d'un coup avec la commande :
   cp -r /[chemin]/SiteSmileys ./SiteSmileysCopié
   (rappel : ./ indique le dossier courant)
3. vérifiez que la page web page1.html s'affiche correctement.

Exercice 2 – Modification d'un petit site Web

L'objectif est ici de ré-organiser l'arborescence du site web et de répercuter ces changements dans les pages HTML pour que les images continuent à s'afficher correctement.

Étape 1 – Créer une seconde copie du site web

Procéder comme à l'étape 3 de l'exercice précédent, mais en copiant le site dans le dossier TP3/SiteSmileysModifié.

Étape 2 – Ré-organisation de l'arborescence du site Web

Créez, renommez et déplacez les dossiers et fichiers pour que l'arborescence du site soit la suivante :

SiteSmileysModifié/
  ├── images/
  │   ├── autres_images/
  │   │   ├── smileyF.png
  │   │   ├── smileyG.png
  │   │   ├── smileyH.png
  │   │   └── smileyI.png
  │   ├── smileyA.png
  │   ├── smileyB.png
  │   ├── smileyC.png
  │   ├── smileyD.png
  │   └── smileyE.png
  └── pages/
      └── page1.html
  

Etape 3 – Modification des liens vers les images dans la page Web

Éditez la page web page1.html avec l'éditeur gedit. Modifier les chemins vers les images afin qu'ils pointent bien vers les images contenues dans la nouvelle arborescence.

Attention : Les chemins doivent être relatifs. C'est à dire qu'ils doivent commencer par "./" ou "../" (et ni par "/", ni par "~").

Etape 4 – Ajout d'une seconde page Web

Vous allez créer une seconde page web pages/autre_page/page2.html qui sera une version modifiée de page1.html. En effet, page2.html ne contiendra que la ligne centrale du tableau de smileys (affichant les trois images smileyD.png, smileyE.png et smileyF.png).

Voici un cheminement pour mener cette étape à bien :

1. créer le dossier autre_page ;
2. placez-y page2.html qui est pour l'instant une copie de page1.html ;
3. éditez de code HTML de page2.html pour ne garder que la ligne centrale du tableau ;
   (dans un tableau HTML, une ligne commence par la balise <tr> et se termine par la balise </tr>, alors que les balises <td> introduisent chaque cellule de la ligne.)
4. modifier les chemins vers les images déjà existantes dans l'arborescence.

Etape 5 – Ajout de liens hypertextes entre les deux pages Web

Cliquer sur un lien hypertexte permet de remplacer la page Web courante dans le navigateur par une autre ressource (généralement une autre page Web).

Un lien est introduit dans une page Web avec la balise <a> comme ceci :

<a href="chemin_vers_la_ressource">texte du lien</a>

L'objectif de cette étape est d'ajouter un lien hypertexte sous les tableaux dans les deux pages du site :

1. ajoutez un lien hypertexte dans page1.html qui pointe vers page2.html ;
2. et vice et versa, un lien dans page2.html qui pointe vers page1.html.

Si les liens fonctionnent bien, vous pouvez faire des allers-retours entre ces pages.

Exercice 3 – Écriture d'un script de copie du site Web

Nous allons automatiser le rapatriement du site Web à la façon de l'étape 2 de l'exercice 1 (fichier par fichier) en écrivant un script qui rassemblera toutes les commandes nécessaires.

Étapes de modification d'une ébauche de script

1. Sauvegardez l'ébauche de script ci-dessous dans le fichier TP3/scripts/cp_site_smileys.sh :
   1. créer un dossier scripts dans TP3
   2. créer le fichier vide cp_site_smileys.sh avec la commande :
      gedit scripts/cp_site_smileys.sh &
      (le caractère & est nécessaire pour pouvoir continuer à utiliser la console sans quitter gedit)
   3. copiez-collez le code du script dedans.
   4. enregistez le fichier (ctrl+s)
2. Ajoutez-y toutes les commandes qui permettent de rapatrier le site original ( /home/IntroSysEx/TP3/SiteSmileys) dans un dossier SiteSmileysScripté créé dans le dossier courant.

#!/bin/bash
echo "| Script de copie du site SiteSmileys"
echo "|   Auteur(s) : Nom1 et Nom2"
echo ""
echo "-- Nettoyage du dossier courant"
rm -fr ./SiteSmileysScripté

echo "-- Création du répertoire SiteSmileysScripté"
mkdir ./SiteSmileysScripté

echo "-- Création de l'arborescence"
cd ./SiteSmileysScripté
mkdir ./image
#[... Complétez ici...]

echo "Debug: dossier courant : "$(pwd)

#- Décommenter la ligne suivante si vous voulez afficher l'arborescence créée
#tree ../SiteSmileysScripté

echo "-- Copie des fichiers dans l'arborescence"
cp /home/IntroSysEx/TP3/SiteSmileys/page1.html .
cp /home/IntroSysEx/TP3/SiteSmileys/image/smileyB.png ./image
#[... Complétez ici...]

#- Décommenter la ligne suivante si vous voulez afficher l'arborescence créée
#tree ../SiteSmileysScripté

Pour utiliser ce script, placez-vous dans le dossier dans lequel vous voulez rapatrier le site et lancez la commande :

bash [chemin_jusqu'au_script]/cp_site_smileys.sh

Exercice 4 – Écriture d'un script de création de l'arborescence du TP2

Maintenant que vous savez rassembler des commandes dans un script, vous allez automatiser la création de l'arborescence complète du TP2.

En d'autres termes, après l'exécution d'un script arbo_propriete.sh (stocké dans le dossier ~/Documents/L1/ISE/TP3), vous devrez trouver une arborescence de racine ./PropriétéScriptée identique à celle obtenue à la fin de l'exercice 1 du TP2.

Étapes

1. Dans le dossier ~/Documents/L1/ISE/TP3, créez un fichier arbo_propriete.sh avec l'éditeur de texte gedit en y copiant/collant les 12 premières lignes du script cp_site_smileys.sh de l'exercice 3.
2. Dans ce script, remplacez le dossier de travail ./SiteSmileysScripté en ./PropriétéScriptée.
3. Complétez le script jusqu'à obtenir l'arborescence contenant la propriété de l'exercice 1 du TP2 :
   • tous les dossiers ;
   • tous les liens ;
   • les fichiers en place dans les bons dossiers ;
   • et l'archive Camion_déménagement.tgz supprimée.