[Up]

TP Web 1

Compréhension de HTTP

Ressources

Utilisation d'un proxy

L'objectif est d'observer les échanges HTTP entre client et serveur.

Téléchargez JProxy.
Positionnez les variables d'environnement Java comme nécessaire.
Lancez le script ./jproxy.sh.
Configurez votre navigateur pour qu'il effectue ses requêtes en passant par le proxy (par défaut, le proxy est sur le port 2008, et localhost semble être le nom de la machine sur laquelle tourne le proxy)
Dans le navigateur, ouvrez une page Web quelconque et observez les requêtes effectuées et les réponses du serveur.

Réponses

Les réponses sont affichées dans ce style là.

Quelle est la version de HTTP utilisée ? Le plus souvent HTTP/1.1
Requêtes :
- Quelle est la méthode de requête utilisée ? Probablement GET
- Sous quel nom s'est identifié votre navigateur ? Mozilla...
Réponses :
- Quel est le code de réponse du serveur ? 200
- Quel est le serveur et sa version ? Apache ou un autre.
- Quelle est la date de dernière modification du document ?

Hôtes virtuels

Les serveurs Web disc.inria.fr:80 et www.inria.fr:80 sont physiquement sur la même machine. Vous devez spécifier l'hôte cible dans chacune de vos requêtes HTTP :

Host: disc.inria.fr

Désactivez le proxy dans le navigateur.

Utilisation de `telnet`

telnet permet de communiquer avec un serveur sur un port donnée. Par défaut, les serveurs Web tournent sur le port 80. La commande telnet disc.inria.fr 80 permet donc d'initier une requête vers le serveur.

Envoyez une requête HTTP 1.1 GET à ce serveur. Quelles sont les informations situées dans l'en-tête HTTP de la réponse ?

Envoyez une requête HTTP 1.1 qui :

récupère la page /perso/philippe.poulard/cours/master/tp-web-1/requete.php sur ce serveur

> telnet www.inria.fr 80
GET /perso/philippe.poulard/cours/master/tp-web-1/requete.php HTTP/1.1
Host: disc.inria.fr

s'identifie comme étant le client (user agent) "INCONNU"

> telnet www.inria.fr 80
GET /perso/philippe.poulard/cours/master/tp-web-1/requete.php HTTP/1.1
Host: disc.inria.fr
User-Agent: INCONNU

Envoyez une requête HTTP 1.1 POST à ce serveur pour récupérer la page /perso/philippe.poulard/cours/master/tp-web-1/register.php en imitant un formulaire qui envoie les champs suivants :

Champs Valeur

NOM votre nom

PRENOM votre prénom

GROUPE votre groupe

Les lignes suivantes doivent être spécifiées :
```
Content-type: application/x-www-form-urlencoded
Content-length: nombre de caractères envoyés dans les données
```
Les champs à envoyer doivent être placés après les en-têtes HTTP (en ayant passé une ligne) sous la forme champs=valeur et séparés par des &.
```
> telnet www.inria.fr 80
POST /perso/philippe.poulard/cours/master/tp-web-1/register.php HTTP/1.1
Host: disc.inria.fr
Content-type: application/x-www-form-urlencoded
Content-length: 36

NOM=Poulard&PRENOM=Philippe&GROUPE=0
```
Comment faire pour que la requête passe par le proxy ?
```
> telnet localhost 2008
```
Pour que le proxy puisse acheminer la requête, il faut par ailleurs spécifier l'URL complète dans la requête HTTP :
```
POST http://disc.inriafr/perso/philippe.poulard/cours/master/tp-web-1/register.php HTTP/1.1
```

Champs	Valeur
NOM	votre nom
PRENOM	votre prénom
GROUPE	votre groupe

HTML

Vous pouvez créer sur votre compte des pages Web visibles depuis internet. Chaque utilisateur peut consulter ses propres pages sur http://www-mips.unice.fr/~votreLogin : le serveur Web va les chercher sur le répertoire ~/www.

Créez un répertoire ~/www et déposez-y un fichier HTML contenant un titre (balise <title>), un peu de texte et une image (balise <img>).
Consultez votre page avec un navigateur en passant par le serveur Web.

Vérifiez que votre page est bien conforme à HTML en utilisant le validateur HTML du W3C http://validator.w3.org/. Si aucune erreur n'est trouvée, ajoutez dans votre page le lien permettant de la vérifier automatiquement.

CSS

Inclusion de définitions de style : les styles se décrivent dans la balise <style> qui se place dans la balise <head>

<head>
    <syle type="text/css">
<!--

//-->
    </style>
</head>

Inclusion de fichiers de style : pour que les styles soient partagés par plusieurs documents HTML, il est plus commode de les externaliser dans un autre fichier et d'y faire référence :

<head>
    <link rel="stylesheet" type="text/css" href="mesStyles.css">
</head>

Exemple :

.title {
    font-family: Verdana, Helvetica;
    font-size: 16pt;
    background-color: rgb(255,123,34);
    text-anchor: widdle;
}
a { text-decoration: none }
a:hover { text-decoration: underline }

Utilisation :

<p class="title">Le titre</p>

Voir http://www.w3schools.com/css/default.asp pour plus de détail.

Créez une page web qui utilise une CSS externe. Visualisez la avec et sans feuille de style.
Essayez votre page avec la feuille de style de votre voisin.

Formulaire

Créez un formulaire utilisant la méthode POST qui permet de demander 2 nombres à l'utilisateur (NOMBRE1 et NOMBRE2) et envoie les données au script http://disc.inria.fr/perso/philippe.poulard/cours/master/tp-web-1/submit.php.

<form action="http://disc.inria.fr/perso/philippe.poulard/cours/master/tp-web-1/submit.php" method="POST">
    Nombre 1 : <input type="text" name="NOMBRE1"><br>
    Nombre 2 : <input type="text" name="NOMBRE2"><br>
    <input type="submit" value="Envoyer">
</form>

Créez le même formulaire utilisant la méthode GET.

<form action="http://disc.inria.fr/perso/philippe.poulard/cours/master/tp-web-1/submit.php" method="GET">
    Nombre 1 : <input type="text" name="NOMBRE1"><br>
    Nombre 2 : <input type="text" name="NOMBRE2"><br>
    <input type="submit" value="Envoyer"><
</form>

Quelle est la différence ? Les données envoyées sont visibles dans l'URL.

Javascript

Voir http://www.w3schools.com/js/default.asp.

Reprenez le formulaire précédent ; ajoutez un bouton permettant d'afficher la somme de 2 nombres entrés par l'utilisateur. Pour forcer le transtypage en nombre d'une variable, utiliser "j - 0". Pour accéder à la valeur d'un champ de formulaire, utiliser document.nomFormulaire.nomChamp.value.

<script language="Javascript">
    function somme() {
        var N1 = document.nombres.NOMBRE1.value - 0;
        var N2 = document.nombres.NOMBRE2.value - 0;
        document.nombres.SOMME.value = N1 + N2;
    }
</script>
<form name="nombres">
    Nombre 1 : <input type="text" name="NOMBRE1"><br>
    Nombre 2 : <input type="text" name="NOMBRE2"><br>
    Somme : <input type="text" name="SOMME"><br>
    <input type="button" value="Additionner" onclick="somme();">
</form>

Vérifiez avec Javascript que les données saisies par l'utilisateur sont correctes (sont bien des nombres). On vous donne ce squelette HTML que vous pouvez enregistrer et modifier.
```
<html>
  <head>
    <title>Un calcul</title>
    <script language="javascript">
      function valide() {
        var a = document.formulaire.NOMBRE1.value;
        var b = document.formulaire.NOMBRE2.value;
        if (isNaN(a) || isNaN(b)) {
          alert("Une des 2 valeurs saisies n'est pas un nombre");
          return false;
        } else {
          return true;
        }
      }
    </script>
  </head>
  <body>
    <h1>Un calcul</h1>
    <form name="formulaire" onsubmit="return valide();" method="POST"
      action="http://disc.inria.fr/perso/philippe.poulard/cours/master/tp-web-1/submit.php">
        Donnez un nombre : <input name="NOMBRE1" type="text"><br/>
        Et un autre : <input name="NOMBRE2" type="text"><br/>
        <input type="submit" value="Envoyer">
    </form>
  </body>
</html>
```
Question : si votre page s'assure que les données transmises au serveur sont bien des nombres, faut-il que le programme sur le serveur les revérifie à nouveau, ou est-ce inutile ? Les contrôles réalisés par le navigateur permettent seulement d'éviter de solliciter le serveur inutilement. Mais ces contrôles n'empêchent pas un utilisateur mal intentionné de soumettre des mauvaises données soit en fabriquant un formulaire, soit directement en transmettant les données comme vous savez le faire par telnet. Le programme côté serveur DOIT faire les contrôles requis par l'application.
Créez une page web avec une image dont la source change quand l'utilisateur passe le pointeur de la souris dessus, et revient à l'original quand le pointeur n'est plus dessus. Utilisez la fonction onmouseover avec un tag a qui entoure l'image.
```
<a href="#"
    onmouseover='document.images[0].src="image2.gif"'
     onmouseout='document.images[0].src="image1.gif"'><img src="image1.gif"></a>
```