Administration Unix - TP séance 09

À la fin de la séance, déposez votre fichier de réponses sur la page Ametice en suivant bien les instructions, même si vous n'avez pas fini la planche ; lorsque vous aurez terminé, vous pourrez re-déposer la version finale.

Mini-projet (2/3) : génération de pages html de miniatures

(suite de la planche TP8 avec le script miniatures.sh)

a) Recopiez le code html ci-dessous dans le fichier ./thumbnails/index.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Images de rep/</title>
  </head>
  <body>
    <h1>Images de rep/</h1>
    <p>Images :</p>
    <table>
      <tr>
        <td><img src="mini_fleur1.png" /></td>
        <td><a href="rep/fleur1.jpg">fleur1.jpg</a></td>
      </tr>
      <tr>
        <td><img src="mini_fleur2.png" /></td>
        <td><a href="rep/fleur2.jpg">fleur2.jpg</a></td>
      </tr>
    </table>
  </body>
</html>

Ouvrez avec votre navigateur la page

file://chemin/index.html

en remplaçant chemin par le chemin absolu du répertoire ./thumbnails et vérifiez que vous voyez bien les miniatures de 2 images.

Renommez ensuite index.html en old-index.html.

b) Dans le script miniatures.sh, rajoutez une fonction generer_page_html, qui prend en premier argument un répertoire d'images sources rep_src, et en second argument un répertoire d'images destinations rep_dest dans lequel il y a les miniatures.

La fonction génère un fichier index.html dans le répertoire rep_dest à l'aide d'un here-document, qui contient le code html de la question précédente.

Testez la fonction à la fin du script avec comme répertoire source le répertoire courant ".", et comme répertoire destination le répertoire "./thumbnails".

Vérifier que le nouveau fichier ./thumbnails/index.html donne le même résultat dans votre navigateur que dans la question précédente.

c) On peut déterminer le chemin absolu d'un répertoire dont on connaît le chemin relatif de cette façon :

chemin_absolu=$(cd "chemin_relatif" && pwd)

Au début de la fonction generer_page_html, déterminez le chemin absolu rep_srca de rep_src, puis remplacez dans le here-document les 4 occurrences de rep par ce chemin absolu.

Relancez le script et vérifiez l'effet avec votre navigateur en rechargeant la page ; en particulier, si vous cliquez sur les liens à droite des images, vous devriez cette fois voir l'image en pleine taille (avant cette opération il y avait une erreur de fichier introuvable).

d) Rajoutez une fonction generer_bloc_image, qui prend en argument le nom d'une image source img_src avec son chemin absolu.

La fonction affiche à l'aide d'un here-document le bloc html suivant :

  <tr>
    <td><img src="chemin_image_dest" /></td>
    <td><a href="chemin_absolu_image_src">nom_image_src</a></td>
  </tr>

en remplaçant :

"chemin_image_dest" par le nom de la miniature correspondante (obtenu avec la fonction donner_nom_miniature pour img_src) ;
"chemin_absolu_image_src" par img_src ;
"nom_image_src" par le nom obtenu en enlevant à img_src son chemin.

Appelez la fonction à la fin du script, en lui passant le chemin absolu de fleur1.jpg, puis comparez au bloc correspondant dans index.html.

e) En vous inspirant du cours (section 9.3.3.b), modifiez la fonction generer_page_html, de manière à insérer entre les balises <table> et </table>, pour chaque fichier du répertoire absolu source (en ignorant ceux qui ne sont pas une image), le bloc html obtenu en appelant la fonction generer_bloc_image.

Relancez le script, puis vérifiez dans le navigateur que cette fois-ci les 3 fleurs apparaissent bien, et que le lien à droite des miniatures permet d'afficher l'image correspondante en pleine taille.