Web et HTTP

Licence Informatique, semestre 6

Jean-Marc LecarpentierPascal Vanier

Enseignement des technologies du Web

 

Web et HTTP

Notes de cours

Travail personnel

Objectifs

Prendre en main le serveur web fourni par l'université, et expérimenter avec l'exécution de PHP côté serveur.

Exercice 1 — Mise en place de l’environnement de travail : Hello world #

Fonctionnement de l'espace personnel

Le département met à votre disposition un espace personnel sur le web. Son fonctionnement est expliqué sur cette page de la FAQ du département, de manière un peu technique. Cliquez sur le bouton ci-dessous pour en lire un résumé très incomplet, mais qui se veut plus accessible pour les non-initié·e·s.

Votre espace personnel se divise en deux parties :

  • une partie publique, à l'adresse https://NUMETU.users.info.unicaen.fr/, accessible par le monde entier : vous pouvez y héberger des pages personnelles. La partie publique n'est pas activée par défaut, il faut en faire la demande (en justifiant d'un véritable besoin).
  • une partie privée, à l'adresse https://dev-NUMETU.users.info.unicaen.fr/, accessible uniquement par etupass/persopass (sauf à l'intérieur de l'université). Cet espace est dédié au développement : c'est là que vous devez faire les TP.

Attention : tout ce qui est publié dans votre espace personnel l'est sous votre entière responsabilité.

Cet espace personnel est hébergé sur un serveur web. Pour y publier des pages, il faut les transférer sur le serveur. Pour cela, plusieurs solutions sont possibles : utiliser un client SFTP ou monter l'espace personnel sur votre machine. Ces deux possibilités sont détaillées dans la section « Connexion au serveur » de la FAQ : allez la lire.

Sur le serveur, votre espace est dans le répertoire /users/NUMETU/. Il contient plusieurs répertoires, dont en particulier :

  • www-prod correspond à la partie publique de votre site,
  • www-dev correspond à la partie privée de votre site,
  • private est inaccessible depuis le web (on y met des fichiers contenant des mots de passe, par exemple),
  • tmp contient les fichiers temporaires (upload).

Pour information, votre espace personnel a une interface web d'administration, à l'adresse https://NUMETU.users.info.unicaen.fr/myadmin/, qui permet notamment de consulter les messages d'erreur du serveur. Pour finir, la FAQ contient pas mal d'autres informations, notamment techniques ; assurez-vous de l'avoir consultée avant de poser des questions.

Questions

  1. Accédez au répertoire www-dev de votre espace personnel sur le serveur et créez-y un fichier index.html (s'il n'y en a pas déjà un).
  2. Ouvrez-le avec votre éditeur favori (si vous ne savez pas lequel choisir, prenez Geany, simple et relativement complet et léger).
  3. Écrivez n'importe quoi dedans, par exemple Hello world. Enregistrez.
  4. Ouvrez Firefox (on n'utilisera que Firefox dans ce module) et rendez vous à l'URL https://dev-NUMETU.users.info.unicaen.fr/. Vous devriez voir ce que vous avez écrit dans le fichier. Si ce n'est pas le cas, demandez de l'aide.
  5. Retournez dans l'éditeur et essayez d'utiliser des balises HTML dans index.html, comme h1, em, strong, p, etc. (liste de tous les éléments HTML5) et regardez le résultat.
  6. Dans Firefox, expérimentez le raccourci « Control-u » pour afficher le code source de la page. Essayez sur d'autres pages du web. Cette fonction est également accessible dans le menu contextuel (clic droit).
  7. Renommez le fichier index.html en hello.html et actualisez la page dans le navigateur : que se passe-t-il et pourquoi ?
  8. Créez un répertoire test dans www-dev. Vous devriez le voir apparaître dans le listing si vous actualisez la page https://dev-NUMETU.users.info.unicaen.fr/ dans le navigateur. Observez bien comment la barre d'adresse du navigateur est modifiée si vous cliquez sur test, ou sur le fichier hello.html. Assurez-vous d'avoir compris que le serveur sert le contenu de www-dev à la racine de votre site dev-NUMETU.users.info.unicaen.fr : n'hésitez pas à demander des explications à votre chargé·e de TP si ce n'est pas clair pour vous !

Attention à bien organiser votre serveur web, et attention aussi à ne pas y mettre tous vos fichiers, mais seulement ceux qui ont des raisons d'y être !

Exercice 2 — Premiers pas avec PHP côté serveur #

Cet exercice vise à vous familiariser avec les pages dynamiques et le fonctionnement de PHP. Pour rappel, une page PHP est un script, qu'il faut exécuter pour en voir le résultat. C'est le serveur qui exécute le script quand un client y accède via HTTP : si vous essayez d'ouvrir une page PHP locale avec votre navigateur, ça ne fonctionnera pas (le navigateur vous proposera probablement de la télécharger).

Exécution d'un script par le serveur

  1. Créez un script PHP hello.php contenant le code suivant :
    <?php
    echo "Hello\n";
    echo "<strong>\n";
    echo "World!\n";
    
    Exécutez-le dans un terminal : trois lignes doivent s'afficher.
  2. Copiez le script dans votre www-dev, et allez à l'URL https://dev-NUMETU.users.info.unicaen.fr/hello.php. Qu'est-ce qui s'affiche ? Quelles sont les différences par rapport au terminal, et pourquoi ?
  3. Affichez la source de la page (dans Firefox, clic-droit puis « Afficher la source », ou Ctrl-U). Que voyez-vous :
    • le contenu du fichier PHP, ou bien
    • les trois lignes qu'affichait le terminal ?
    ⇒ Que signifie le terme « source » ici ?
  4. Le navigateur peut-il savoir que la page a été générée par un script PHP ?
  5. Que se passe-t-il si vous faites une erreur dans le script ?
  6. Que se passe-t-il si vous écrivez quelque chose (par exemple TEST) avant le <?php ? (Enlevez-le après avoir testé, sinon la suite ne marchera pas !)

Accès au contexte HTTP depuis le script

Le serveur ne se contente pas d'exécuter le script PHP : il lui fournit diverses informations sur la requête HTTP, effectuée par le client, qui a conduit à cette exécution. D'autre part, le script ne se contente pas d'écrire le corps de la réponse HTTP : il peut demander au serveur de renvoyer tel champ d'en-tête, ou même tel code de statut.

  1. Ajoutez la ligne suivante juste avant le premier echo :
    http_response_code(404);
    . Elle permet de changer le code de statut de la réponse HTTP.
  2. Actualisez la page : vous ne devriez voir aucune différence ! En revanche, si vous actualisez après avoir ouvert l'onglet « Réseau » des outils développeur (raccourci Ctrl-Shift-E), vous devriez constater que la réponse envoyée est bien une 404.
  3. Ajoutez la ligne suivante juste en-dessous de l'autre :
    header("Content-Type: text/plain");
    et actualisez la page. Que se passe-t-il, et pourquoi ? Cliquez sur la réponse HTTP dans l'onglet « Réseau », pour voir les en-têtes de la réponse : voyez-vous la différence avec ou sans cette ligne ?
  4. PHP refuse de modifier l'en-tête de la réponse HTTP après avoir commencé à en écrire le corps. Vérifiez cela en lui faisant afficher quelque chose avant l'appel à http_response_code (et enlevez-le après avoir testé).
  5. Avec une fonction de debug type var_export, affichez le résultat de la fonction getallheaders(), et comparez à ce que vous voyez dans l'onglet « Réseau ».
  6. Avec une fonction de debug type var_export, affichez le contenu de la variable $_GET (attention à l'underscore) : il devrait être vide. Que se passe-t-il si vous modifiez la barre d'adresse afin d'aller à l'URL
    https://dev-NUMETU.users.info.unicaen.fr/hello.php?toto=12&blabla=truc
     ?
  7. Optionnel : faire en sorte que la page s'affiche « en mode texte » si on passe dans l'URL la valeur texte au paramètre mode, et en « mode visuel » (HTML interprété) sinon.

Exercice 3 — L’automate cellulaire élémentaire sur le web #

Mise en place

  1. Retrouvez le script rule-110.php fait aux TP précédents. Peu importe, pour l'instant, si vous avez terminé le TP 4 : l'important est que le script affiche quelques générations de l'automate. Lancez-le dans un terminal pour vous assurer que c'est le cas.
  2. Copiez le script sur votre serveur web, et accédez-y via HTTP dans un navigateur. Est-il bien exécuté ? Le résultat visuel est-il correct ?
  3. Affichez la source de la page (dans Firefox, clic-droit puis « Afficher la source », ou Ctrl-U) : vous devriez retrouver l'affichage du terminal (sauf si vous avez utilisé le PausingTerminalDisplayer de la fin du TP4 : si c'est votre cas, comprenez-vous pourquoi ça ne marche pas ?).
  4. Pour que le résultat visuel soit correct, une solution est d'utiliser l'élément HTML pre. Le faire.

Retour au TP 4

Attention : avant de continuer cet exercice, il faut d'abord terminer l'exercice du TP 4 (sans les questions optionnelles et la partie « Améliorations », bien sûr). Si vous êtes en difficulté et que vous n'avez pas le temps d'aller plus loin, ce n'est pas bien grave.

Une vue HTML

  1. Si ce n'est déjà fait, faire en sorte que l'affichage « navigateur-compatible » soit géré par un HtmlDisplayer (même s'il ne s'agit que de rajouter un élément pre autour de la sortie terminal).
  2. Faire en sorte que le code HTML de la page généré par le HtmlDisplayer soit valide HTML5. NB: il est interdit d'afficher des choses en-dehors du HtmlDisplayer, lui seul doit avoir la main sur l'affichage !

Paramétrage de l'automate via l'URL

  1. Faire en sorte que la taille du monde et le nombre de générations soient configurables via des paramètres d'URL nbCells et nbGenerations.
  2. Ajouter un paramètre d'URL pour qu'on puisse choisir la règle d'évolution à utiliser.
  3. Ajouter un paramètre d'URL pour configurer la proportion de cellules vivantes dans l'état initial (il faut avoir fait la partie « Monde aléatoire » du TP 3)

Un même script pour le terminal et le web

On peut remarquer que le cœur du programme, c'est-à-dire la représentation du monde et la gestion de l'évolution, n'a pas changé depuis qu'on a mis notre script sur le web. C'est normal, car il s'agit du modèle, de la « logique métier » du programme. Seuls l'affichage et la façon de récupérer les paramètres ont changé. On va rendre ça encore plus explicite en faisant en sorte que notre script puisse être utilisé à la fois dans un terminal et sur le web, sans qu'on ait à le modifier.

La fonction php_sapi_name() renvoie le nom du SAPI (Server Application Programming Interface) utilisé. Si le script est exécuté dans un terminal, la fonction renvoie la chaîne 'cli' (pour Command Line Interface) ; sinon, il y a un paquet de valeurs possibles, mais on pourra supposer pour simplifier que dans tous les autres cas le script est exécuté par un serveur web.

  1. Écrire un script qui affiche « Vous êtes dans un terminal » lorsqu'on l'exécute en ligne de commande, et « Vous êtes sur le web » lorsqu'on y accède via HTTP.
  2. Modifier rule-110.php pour que le script fonctionne aussi bien dans le terminal que sur le web.
  3. Si ce n'est déjà fait, faire la partie « Paramètres du script » dans le TP 3. Bien sûr, cette partie ne concerne que l'exécution du script dans le terminal : sur le web, ce sont les paramètres d'URL qui sont utilisés.
  4. Vérifiez auprès de votre chargé·e de TP que votre code est propre (bien factorisé notamment).

Si vous avez fini…

Retournez voir la partie « Améliorations » de l'exo du TP 3. NB : pour la toute dernière question, on pourra avoir envie d'implémenter un ImageDisplayer, mais cela pourra nécessiter de complexifier un peu le code du Simulator.