Formulaires

Le HTML seul ne permet pas d’interactivité avec l’utilisateur : une page Web écrite en HTML est « statique » : à part quelques effets rendus possible depuis la version 5 de HTML, son contenu ne varie pas en fonction des caractéristiques de la demande (tous les internautes qui demandent la page reçoivent le même contenu).

À l’inverse, une page web dynamique est générée à la demande et son contenu varie en fonction des caractéristiques de la demande (heure, adresse IP de l’ordinateur du demandeur, formulaire rempli par le demandeur, etc.) qui ne sont connues qu’au moment de sa consultation.

Pour obtenir des pages dynamiques, il faut utiliser des langages tiers (Javascript, PHP, Python/Jinja, …).

Pourquoi des pages dynamiques ?

Le premier besoin en termes d’interactivité, c’est de donner la possibilité à l’utilisateur d’envoyer des données au serveur. C’est déjà ce qu’il fait en saisissant une URL, mais ce n’est pas particulièrement convivial …

Exemples de formulaires :

  • authentification par identifiant et mot de passe
  • recherche d’informations
  • filtrage de données

Dans chaque cas, la page qui s’affichera ensuite dépendra de ce que l’utilisateur a renseigné dans le formulaire.

Exemples :

  • authentification par identifiant et mot de passe
    → une page avec le nom de l’utilisateur, …
  • recherche d’informations
    → une page avec les résultats de la recherche
  • filtrage de données
    → une page avec une partie seulement des données

 

Formulaire en HTML

Sur de nombreuses pages web, des formulaires sont utilisés que ce soit pour une authentification par identifiant et mot de passe ou pour une recherche d’informations. Le formulaire est un élément codé en HTML, en voici un exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <form method="get" action="action.php">
    <label for="ident">Votre identifiant</label> :
    <input type="text" name="identifiant" id="ident"/>
    <input type="submit" value="Envoyer"/>
  </form>
</html>

 

Un formulaire se trouve contenu dans une balise <form>…</form> .

Parmi les attributs de cette balise, on ajoute la méthode HTTP utilisée (ici GET) et l’URL qui sera demandé lors de l’envoi du formulaire (action.php).

Ensuite, grâce à une balise <input … /> , on crée deux objets :

  • un champ de type texte (ligne 3)
  • et un bouton pour valider le formulaire (ligne 4).

Le champ de texte est précédé d’un label (balise <label>…</label>) référencé par ident . Cette référence est utilisée dans les attributs du champ de type texte (id= »ident » ) afin qu’un clic sur ”Votre identifiant” place le curseur dans le champ de texte correspondant. name= »identifiant » permet de définir une variable qui recevra le texte entré dans le champ et qui sera transmise à action.php .

Activité
  • Copier/coller ce code dans un fichier HTML et l’ouvrir avec un navigateur.
  • Remplir le champ de texte et valider : que se passe-t-il ? Pourquoi ?
  • Observer la barre d’adresse du navigateur. Que constate-t-on de particulier en observant l’URL ?
[/private role="administrator"]

Après Validation : erreur (le fichier action.php n’existe pas

Dans la barre d’adresse, pas de protocole http, mais file:// à la place ==> pas de requete dans la console

[/private]

Tous les détails sur les formulaires

 

Méthodes HTTP GET ou POST

Lors de l’utilisation de la méthode GET dans un formulaire, les données sont transmises en clair dans la barre d’adresse du navigateur. Dans les faits, on obtient action.php?identifiant=<texte entré>.

Cela pose des problèmes de sécurité. En effet, au lieu du type « text », on peut utiliser le type « password ». Lors de l’entrée du mot de passe, les lettres sont remplacées par des points. Mais lors de l’envoi des données, le mot de passe apparaît en toutes lettres dans la barre d’adresse !

La méthode POST transmet les données dans le corps de la requête : les données sont donc moins visibles.

Activité

Modifier l’attributAttribut Un attribut est un identifiant (un nom) décrivant une information stockée dans une base. Les attributs correspondent aux colonnes si la relation à laquelle il appartient est représentée sous forme de table. method du formulaire et repérer à l’aide des outils de développement de Firefox, dans les deux cas (GET et POST) l’emplacement des données transmises.

 

 

Gestion des données

Pour gérer les données provenant du formulaire, on utilise un script PHP action.php .

PHP
PHP (Hypertext Preprocessor), est un langage de programmation libre, principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n’importe quel langage interprété de façon locale.

PHP est un langage impératif orienté objet.

Le langage PHP a été créé en 1994 par Rasmus Lerdorf pour son site web.

Dans du code HTML, les scripts PHP doivent être intégrés dans une balise <?php … ?> .

Le code le plus simple possible est le suivant :

<html>
<body>
  <?php
  echo $_POST['identifiant'];
  ?>
</body>
</html>

Activité

Copier/coller ce code dans un fichier nommé action.php et placé dans le même répertoire que le fichier HTML précédent.

 

On suppose que la méthode utilisée dans l’envoi du formulaire est POST. Grâce à PHP, on peut alors récupérer le texte et l’afficher.

PHP est un langage de script exécute au niveau du serveur. Celui-ci doit évidemment accepter de gérer le PHP. Pour tester le formulaire et le script en local, on peut installer WAMP sous Windows, MAMP sous Mac OS X ou LAMP sous Linux.

AMP est l’acronyme de Apache (serveur web), MySQL (gestionnaire de base de données), PHP.

Il existe une version portable de WAMP : UwAMP

 

Activité

Réaliser une page HTML contenant un formulaire permettant de saisir :

  • un identifiant : champ de type text
  • un mot de passe : champ de type password
  • un bouton pour valider : type submit

La validation de ce formulaire doit entrainer l’exécution d’un script PHP qui génère une page HTML qui affiche :

  • « Bienvenue <identifiant> ! » si l’authentification a réussi
  • « Échec d’authentification » dans le cas contraire

ATTENTION : pour des raisons évidentes de sécurité, les identifiants d’authentification ne doivent pas figurer en clair dans l’URL !

Le(s) couple(s) identifiant/mot de passe corrects seront mémorisés dans des variables dans le script PHP.

Petites choses utiles en PHP

En PHP, les variables sont précédées du symbole $  et les instructions finissent par ; :

$var1 = 124;
$x = "Sans blague !";

Pour créer un tableau associatif (type array ) au format clés/valeurs en PHP (un peu comme les dictionnaires en Python) :
$array = [
    "clé1" => "valeur1",
    "clé2" => "valeur2",
    ...
    ];

Pour construire une structure conditionnelle en PHP :
if ($a > $b) {
  echo "Glop !"
  }
else {
  echo "Pas Glop !"
  }

 

Sources : https://cache.media.eduscol.education.fr/file/NSI/77/1/RA_Lycee_G_NSI_ihm_interaction_client_serveur_1170771.pdf
https://perso.univ-lyon1.fr/olivier.gluck/Cours/Supports/LIFASR2/LIFASR2-CM4.pdf

Vous aimerez aussi...

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

code