TRANSMETTRE DES DONNEES AU SERVEUR

Ressources matérielles : Poste de travail Windows / Linux Ubuntu
Ressources logicielles : Navigateur, éditeur de texte, serveur http pourvu du module PHP

Introduction

L'objectif ici est :

De transmettre au serveur des données entrées par l'utilisateur.
De traiter les données coté serveur, en utilisant le PHP.
De retourner les résultats au client pour les afficher.

Transmettre des données avec la méthode POST

Principe

Les données sont passées dans le corps de la requête HTTP, c'est à dire à l'intérieur de la requête envoyée vers la page.

Avec cette solution :

Les données n'apparaissent pas dans l'URL.
L'application fonctionne même si l'option JavaScript du navigateur n'est pas activée.
La page doit être rechargée pour afficher les résultats.

Premier exemple

Il s'agit ici d'entrer des données dans un formulaire et de les afficher dans une deuxième page. Tester l'exemple suivant.

Fichier index.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Entrez les dimensions d'un rectangle :</p>
    <form method="post" action="resultat.php">
      <p>Longueur = 
      <input type="text" name="longueur"> m</p>
      <p>Largeur =
      <input type="text" name="largeur"> m</p>
      <input type="submit" value="VALIDER">
    </form>
  </body>
</html>

Fichier resultat.php :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>        
    <?php
      $long=$_POST['longueur'];
      $larg=$_POST['largeur'];
      echo "La longueur du rectangle est : ";
      echo $long;
      echo "<br>Sa largeur est : ";
      echo $larg;
    ?>
    <a href="index.html">Recommencer</a>
  </body>
</html>

Deuxième exemple

Cette fois, les données subissent un traitement avant d'afficher la deuxième page. Seul le fichier resultat.php est modifié. Tester l'exemple suivant.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>        
    <?php
      $long=$_POST['longueur'];
      $larg=$_POST['largeur'];
      $aire=$long*$larg;
      $perimetre=$long*2+$larg*2;
      echo "<p>L'aire du rectangle est: ";
      echo $aire;
      echo " m<sup>2</sup></p>";
      echo "<p>Son périmètre est: ";
      echo $perimetre;
      echo " m</p>";
    ?>
    <a href="index.html">Recommencer</a>
  </body>
</html>

Validation du formulaire coté client

Avec Javascript

Maintenant, avant d'envoyer les données au serveur, on vérifie qu'elles sont correctes. Seul le fichier index.html est modifié. Naturellement, l'option JavaScript du navigateur doit être activée. Tester l'exemple suivant.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function verifier() {
        L=document.f.longueur.value;
        l=document.f.largeur.value;
        L=L*1;
        l=l*1;
        if (l>L) alert("La longueur est inférieure à la largeur!");
        else document.f.submit();
      }
    </script>
  </head>
  <body>
    <p>Entrez les dimensions d'un rectangle :</p>
    <form name="f" method="post" action="resultat.php">
      <p>Longueur = 
      <input type="text" name="longueur"> m</p>
      <p>Largeur =
      <input type="text" name="largeur"> m</p>
      <input type="button" value="VALIDER" onclick="verifier();">
    </form>
  </body>
</html>

Sans Javascript

Le HTML5 offre quelques solutions pour vérifier qu'un formulaire est correctement rempli. Ci-dessous, l'attribut "required" indique que le champ de saisie doit être complété avant d'envoyer le formulaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Entrez les dimensions d'un rectangle :</p>
    <form method="post" action="resultat.php">
      <p>Longueur = 
      <input type="text" name="longueur" required> m</p>
      <p>Largeur =
      <input type="text" name="largeur" required> m</p>
      <input type="submit" value="VALIDER">
    </form>
  </body>
</html>

Transmettre des données avec la méthode GET

Principe

Cette méthode permet de transmettre des données par le biais de l'URL.

Avec cette solution :

Les données apparaissent dans l'URL.
L'application fonctionne même si l'option JavaScript du navigateur n'est pas activée.
La page doit être rechargée pour afficher les résultats.

Exemple

Dans cet exemple, il s'agit de transmettre au serveur le numéro d'un pion et sa couleur. Tester l'exemple suivant.

Fichier index.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p><a href="resultat.php?pion=1&couleur=verte">
    Pion n<sup>o</sup>1 de couleur verte.</a></p>
    <p><a href="resultat.php?pion=1&couleur=rouge">
    Pion n<sup>o</sup>1 de couleur rouge.</a></p>
    <p><a href="resultat.php?pion=2&couleur=verte">
    Pion n<sup>o</sup>2 de couleur verte.</a></p>
    <p><a href="resultat.php?pion=2&couleur=rouge">
    Pion n<sup>o</sup>2 de couleur rouge.</a></p>
  </body>
</html>

Fichier resultat.php :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
      $pion=$_GET['pion'];
      $coul=$_GET['couleur'];
      echo "Vous avez choisi le pion n<sup>o</sup> ";
      echo $pion;
      echo " de couleur ";
      echo $coul;
    ?>
  </body>
</html>

Contrôle de la transmission

Il est possible de vérifier, avec la fonction "isset()", que les données ont été correctement transmises. Pour l'exemple précédent, cette vérification peut se traduire par le code ci-dessous.

if isset($_GET['pion']) $pion=$_GET['pion']; 
else echo "Numéro du pion non reçu.";
if isset($_GET['couleur']) $coul=$_GET['couleur'];
else echo "Couleur du pion non reçue.";

La variable $_REQUEST

Cette variable est un tableau associatif qui contient par défaut le contenu des variables $_GET, $_POST et $_COOKIE. Bien que pratique à utiliser, elle ne contrôle pas la provenance des données...

Il est possible d'écrire :

$valeur=$_REQUEST['ma_valeur']

A la place de :

$valeur=$_GET['ma_valeur']

Ou :

$valeur=$_POST['ma_valeur']

Autres solutions

Transmettre des données avec Ajax

Cette solution sera étudiée par la suite. Le grand avantage est que la page n'a pas besoin d'être rechargée pour afficher les résultats. Par contre, l'option JavaScript du navigateur doit nécessairement être activée.

Amélioration progressive et dégradation gracieuse

L'idée est d'obtenir une application pouvant fonctionner sans JavaScript, tout en profitant des possibilités de celui-ci s'il est activé, ce qui est le plus souvent le cas.

Amélioration progressive

On commence par créer un formulaire fonctionnant sans JavaScript, classiquement avec la méthode POST. On ajoute du comportement dessus avec JavaScript, qui prend la main sur l'événement submit et le remplace par un appel Ajax.

Dégradation gracieuse

Après avoir conçu l'application, on ajoute du code pour qu'elle fonctionne également dans les environnements dégradés, sans JavaScript pour une raison ou pour une autre (sécurité, accessibilité, matériel ancien, système embarqué...).

<script src="/application.js"></script>
<noscript>
  <form method="post" action="resultat.php">
    ...
  </form>
</noscript>

Mini projet

Les solides de Platon, au nombre de cinq, sont les seuls polyèdres réguliers.

Polyèdre

Tétraèdre

Cube

Octaèdre

Dodécaèdre

Isocaèdre

Volume

2. a³

a³

2. a³

(15 + 7 . 5) . a³

5 . φ² . a³

φ ≈ 1,618

Image

Créer une application web :

Demandant :
- Le type de polyèdre régulier.
- Son arête a, en mm.
Retournant la valeur du volume, en mm³.

Le calcul du volume devra être effectué par le serveur. Les données pourront être transmises au serveur par les méthodes GET ou POST, au choix.