[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)
Dans le navigateur, ouvrez une page Web quelconque et observez les requêtes effectuées et les réponses du serveur.

Quelle est la version de HTTP utilisée ?
Requêtes :
- Quelle est la méthode de requête utilisée ?
- Sous quel nom s'est identifié votre navigateur ?
Réponses :
- Quel est le code de réponse du serveur ?
- Quel est le serveur et sa version ?
- 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
- s'identifie comme étant le client (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 &.
Comment faire pour que la requête passe par le proxy ?

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.
Créez le même formulaire utilisant la méthode GET. Quelle est la différence ?

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.
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.
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 ?
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.