Interaction client-serveur

Introduction

  1. Qu'est-ce serveur Web ?
  2. Qu'est-ce qu'une requête ?
  3. Qu'est-ce que le protocole HTTP ?
  1. ...
  2. ...
  3. ...

Mise en place d'un serveur

  1. Dans le dossier www (voir explorateur de fichier) modifier index.html en y mettant le contenu suivant :
    2. <!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Mon serveur</title>
	</head>
	<body>
		<p> Vous venez de mettre en place un serveur</p>
	</body>
</html>
  2. Tapez dans la barre d'adresse d'un navigateur : localhost.

Explication du "localhost"



"localhost" indique que le serveur et le client se trouvent sur la même machine (on parle de machine locale).
Normalement, la barre d'adresse devrait être renseignée avec l'adresse du serveur Web : https://framasoft.org/fr/



Comment interagissent le client et le serveur ?



  1. le client (le navigateur Web) envoie une requête HTTP vers un serveur Web
  2. le serveur fabrique une page HTML avec les informations écrites en PHP, en Python, Java, JavaScript...
  3. le serveur Web envoie la page nouvellement créée au client
  4. le client recoit la page HTML et l'affiche dans le navigateur Web


Découverte du PHP

  1. Supprimer le fichier index.html
  2. Créer le fichier index.php avec pour contenu :
    3. <?php
$heure = date("H:i:s");
echo '<h1>Bienvenue sur mon site</h1>
      <p>Il est '.$heure.'</p>';
?>
  3. Tapez dans la barre d'adresse : localhost.


Au moment de la requête (c'est à dire l'instant où vous avez appuyé sur entrée) , le serveur a exécuté le programme contenu dans index.php , la page HTML a été générée et envoyée au client (c'est à dire le navigateur).



Avec le navigateur, visualisez le code source contenant la réponse du serveur.
Que constatez-vous ?
...


Le code source envoyé par le client au serveur (index.php) est différent du code source envoyé par le serveur au client. (Relire la phrase deux fois !)



Application : Création d'un formulaire

Méthode GET

  1. Créer un fichier index.html contenant le code :
    2. <!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Le formulaire</title>
	</head>
	<body>
		<form action="formulaire.php" method="get">
				<label>Identifiant</label> : <input type="text" name="identifiant" />
				<label>Mot de passe </label> : <input type="password" name="mdp" />
				<input type="submit" value="Envoyer" />
		</form>
	</body>
  2. Créer un fichier formulaire.php contenant le code :
    3. <?php
    $id=$_GET['identifiant'];
    $mdp=$_GET['mdp'];
    echo "<p> Bonjour ".$id.". Nous vous rappelons votre mot de passe : ".$mdp.". </p>";
?>
  3. Tapez localhost dans la barre d'adresse d'un navigateur et tester le formulaire.


localhost déclenche une requête vers le serveur qui fabrique la page html puis l'envoie au client. Cette page est alors affichée dans le navigateur.

"Envoyer" déclenche une nouvelle requête HTTP vers le serveur : les informations saisies dans le formulaire sont envoyées vers le serveur par la méthode GET.

Le serveur fabrique une nouvelle page et que les informations saisies dans le formulaire sont envoyées vers le serveur par la méthode POST.



  1. Après avoir envoyer le formulaire, recopier le contenu de la barre d'adresse.
  2. Modifier l'url, on mettant petit à la place du prénom et poisson à la place du nom puis valider.
  3. Quel est l'inconvénient de la méthode GET?

Google maps

La méthode GET est utilisée par google maps.
L'adresse : https://www.google.fr/maps/@50.4880672,2.8555391,17z permet d'afficher la carte du lieu de coordonnées GPS :
Latitude : 50.4880672
Longitude :2.8555391
zoom : 17

  1. Modifier le zoom ( par exemple 12).
  2. Mettre en place un formulaire avec 3 champs (Latitude, longitude et zoom ) et un bouton (Envoyer) qui génère un lien vers la carte du lieu souhaité.

La méthode POST

  1. Dans le fichier index.html remplacer method="get" par method="post".
  2. Dans le fichier formulaire.php remplacer $_GET par $_POST.
  1. Après avoir compléter et envoyer le formulaire, recopier le contenu de la barre d'adresse.
  2. Quel est la différence par rapport à la méthode GET?
BILAN sur la différence entre la méthode POST et la méthode GET :
...
... à vous ...
...


Voir les requete en direct

Requetes en direct