L3 MIAGE TP 5 (2 séances) I. Mirbel & M. Winter
L3Web Persistance AJAX Année 2017-2018

Objectifs du TP

Un navigateur de fichiers

Étape 1 : Communication client / serveur

Soient les fichiers HTML, Javascript et Php suivants :

<!------------------          client.html          ------------------>

<html>
  <head>
    <script src="./client.js"></script> 
  </head>

  <body>
    <input type="text" onchange="ask(this.value)"/>
    <div id="rep"><b>Réponse ici ...</b></div>
  </body>
</html>


//////////////////////////     client.js     ////////////////////////// 

function ask(str) {
   xmlhttp=new XMLHttpRequest();      
   xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         document.getElementById("rep").innerHTML=xmlhttp.responseText;
      }
   }
   xmlhttp.open("GET","serveur.php?q="+str,true);
   xmlhttp.send();
}


// -------------------------- serveur.php -------------------------- //

<?php
$q=$_GET["q"];
echo($q+3);
?>

Lire, recopier, exécuter et comprendre le fonctionnement de cet exemple de communication entre le serveur écrit en PHP et le client écrit en HTML et Javascript.

Étape 2 : Récupération du contenu d'un répertoire

Modifier le code exécuté à l'étape 1 pour permettre :

Le format d'échange entre le serveur et le client sera JSON. Il faudra donc utiliser, du côté du serveur, la méthode PHP json_encode() pour encoder le résultat et la méthode javascript JSON.parse() du côté du client pour récupérer la réponse envoyée par le serveur et l'intégrer au document HTML (l'arbre DOM).

Le résultat renvoyé par le serveur devra être placé dans une table HTML donc chaque ligne contiendra un des éléments contenus par le répertoire analysé (fichier ou sous-répertoire).

Lors de l'affichage du résultat, les fichiers devront être distingués des sous-répertoires par une couleur d'affichage différente.

N'oubliez pas d'afficher dans la table résultat le répertoire courant (.) et le répertoire père (..).

Étape 3 : Navigation dans les répertoires

Modifier votre code afin de permettre la navigation dans les répertoires. Pour cela, il faut distinguer le traitement des fichiers de celui des répertoires. Chaque élément de la table HTML correspondant à un répertoire devra réagir à l'événement onclick. La réaction sera un nouvel appel au serveur avec le nom du répertoire en question et l'affichage du contenu de ce répertoire en réponse.

Pour cela, il sera nécessaire, pour chaque ligne de la table HTML contenant un répertoire, dans le code HTML de cette ligne, d'associer à l'évènement onclick la déclaration de la fonction javascript qui sera exécutée au moment du clic. Cette fonction devra, au moment de son appel, exploiter des informations renvoyées par le serveur au moment de la construction du document HTML : les noms des sous-répertoires. Aussi, afin de conserver ces informations dans le contexte d'exécution de la fonction associée à l'évènement onclick de chaque ligne de la table HTML, il faudra écrire par exemple :

elem.onclick=(
(function(i){ 
   return function(){
      // appel de la fonction javascript d'inspection d'un répertoire
   }
})
(i));

Dans cet exemple, la variable i permet d'exploiter le contexte d'exécution au moment de l'appel de la fonction en réaction à l'évènement onclick.

Étape 4 : Affichage du contenu des fichiers texte, image et son

Commencer par modifier la structure de votre page afin qu'elle soit constituée d'une table HTML contenant deux colonnes : dans celle de gauche est affiché le contenu du répertoire ; dans celle de droite sera affiché le contenu du fichier.

Puis modifier votre code afin de rendre les fichiers cliquables. Pour cela, dans la fonction que vous allez écrire en réponse à l'événement onclick, afin de neutraliser le comportement standard lors d'un clic sur un lien hypertexte, vous pouvez écrire :

if (event.button<=1) {
   try{
      // appel de la fonction javascript de traitement d'un fichier
   } finally {
  event.stopPropagation();
  event.preventDefault();
   }
}

Traitement des fichiers de type texte : Le contenu du fichier est affiché dans la colonne de gauche lorsque l'on clique sur le nom du fichier dans la colonne de droite. Le fichier étant sur le serveur, c'est le serveur qui doit lire le contenu du fichier et le renvoyer au client. La fonction PHP int readfile(string $filename) pourra être utilisée pour cela.

Traitement des fichiers de type image : Modifier votre code de façon à ce que le contenu des fichiers contenant des images (extensions jpg, jpeg, png, gif par exemple) soit traité. La différence entre l'affichage d'un fichier texte et l'affichage d'une image réside dans la façon de construire le résultat. Pour un fichier image, il faudra insérer un élément de type IMG dans le document HTML. Il faudra également renseigner l'attribut source de cet élément en explicitant l'appel au serveur (src="serveur.php?...").

Traitement des fichiers de type son : Modifier votre code de façon à ce que le contenu des fichiers audio soit également pris en considération. Pour cela, il faut insérer dans le document HTML un élément de type AUDIO dont vous préciserez l'attribut src de la même façon que pour les images. L'attribut controls devra avoir la valeur true afin de permettre l'affichage dans la partie droite de la table HTML d'un élément de contrôle du son (start, stop, ...).

Pensez à utliser les expressions régulières pour reconnaître les fichiers de type texte des fichiers de type image, des fichiers de type audio.

(bonus) Étape 5 : Affichage de la première page des documents pdf

Pour permettre l'affichage de la première page des documents pdf (toujours en réponse à l'évènement onclick), commencer par downloader pdf.js et pdfwrap.js. Puis dans votre fonction javascript de traitement des fichiers, pour un fichier pdf, il faut :


Année 2017-2018 TP Web Persistance L3 MIAGE UNS I. Mirbel & M. Winter