Les langages de programmation du Web

Précédent Sommaire 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Suivant

11. Les formulaires HTML et leurs traitements par un langage serveur

Application : Calcul du carré d'un nombre

Nous nous intéresserons à une application Web qui demande un nombre puis calcule son carré.

Cette application Web sera décomposée en deux pages :

a) Formulaire HTML

La première page permet la saisie des informations (ici un nombre) :

wampserver

Il s'agit d'un simple formulaire en langage HTML (balises <form> et <input>).
L'action sur le bouton Envoyer provoque la transmission des données du formulaire vers une nouvelle page.

b) Traitement des données

La deuxième page traite les données (ici test de validité, calcul et affichage du carré) :

wampserver

Cette page nécessite un script en langage serveur (PHP, CGI...).

Méthode POST et méthode GET

La transmission des données d'une page à l'autre peut se faire de deux manières :

- Avec la méthode GET, les données sont passées directement dans l'URL. Par exemple :

http://unepageweb.php?Nom=Dubois&Prenom=Camille&Age=18
Ici, trois variables sont transmises : la variable Nom qui contient l'information Dubois, etc.

- La méthode POST est plus discrète comme nous le verrons par la suite.

Un formulaire HTML qui utilise la méthode POST

Localisation c:/wamp/www/isn/saisie_nombre_post.html
URL http://localhost/isn/saisie_nombre_post.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Formulaire en HTML5</title>
    </head>

    <body>
        <h2>Calcul du carré</h2>
        <form method="post" action="calcul_carre_post.php">
            Valeur : <input type="text" name="Nombre" autofocus required><br><br>
            <input type="submit" value="Envoyer">
        </form>
    </body>
</html>

Quand on appuie sur le bouton Envoyer, le texte présent dans le champ de saisie est envoyé à la page calcul_carre_post.php par la méthode POST (l'information est transmise dans une variable qui se nomme Nombre).

Voir

php Traitement du formulaire en PHP (méthode POST)

Localisation c:/wamp/www/isn/calcul_carre_post.php
URL http://localhost/isn/calcul_carre_post.php

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Traitement du formulaire en PHP</title>
    </head>

    <body>
        <h2>Résultat</h2>
<?php
// on vérifie que la variable existe et que c'est bien un nombre
if (isset($_POST["Nombre"]) && is_numeric($_POST["Nombre"]))
{
    $nombre = $_POST["Nombre"];
    $resultat = $nombre*$nombre;
    print "<p>Le carré de <strong>$nombre</strong> est <strong>$resultat</strong></p>";
}
else
{
    print "<p>Valeur invalide !</p>";
}
?>
    </body>
</html>

En PHP, le nom des variables commence par le signe dollar $.
$_POST["Nombre"] est une variable particulière qui contient la valeur passée au script courant via la méthode POST.
La fonction isset() détermine si une variable est définie (elle retourne alors TRUE).
La fonction is_numeric() détermine si une variable est de type numérique (elle retourne alors TRUE).

Remarque : il est important de tester la validité des informations provenant d'un formulaire car il s'agit d'une faille de sécurité bien connue.

Un formulaire HTML qui utilise la méthode GET

Dans le formulaire HTML, il faut simplement remplacer :

<form method="post" action="calcul_carre_post.php">

par :

<form method="get" action="calcul_carre_get.php">

Localisation c:/wamp/www/isn/saisie_nombre_get.html
URL http://localhost/isn/saisie_nombre_get.html

php Traitement du formulaire en PHP (méthode GET)

Dans le script PHP, il faut simplement remplacer :

$_POST["Nombre"];

par :

$_GET["Nombre"];

$_GET["Nombre"] est une variable particulière qui contient la valeur passée au script courant via les paramètres d'URL (méthode GET).

Localisation c:/wamp/www/isn/calcul_carre_get.php
URL http://localhost/isn/calcul_carre_get.php

Voir

On peut utiliser le script PHP sans passer par le formulaire, ce qui est fort pratique.
Par exemple, pour calculer le carré de 12,348 il suffit de saisir dans la barre d'adresse du navigateur :

http://localhost/isn/calcul_carre_get.php?Nombre=12.348

Voir

python Script CGI-Python

Formulaire HTML avec la méthode POST

Par rapport au fichier saisie_nombre_post.html, il faut remplacer :

<form method="post" action="calcul_carre_post.php">

par :

<form method="post" action="../cgi-bin/calcul_carre.py">

Formulaire à placer ici : c:/wamp/www/isn/saisie_nombre_post2.html

Dans la barre d'adresse de votre navigateur :
http://localhost/isn/saisie_nombre_post2.html

wampserver

Formulaire HTML avec la méthode GET

Formulaire à placer ici : c:/wamp/www/isn/saisie_nombre_get2.html

Dans le fichier saisie_nombre_get.html, il faut modifier par la ligne suivante :

<form method="get" action="../cgi-bin/calcul_carre.py">

wampserver

pythonTraitement avec un script CGI-Python

Le script CGI-Python est à placer dans ce répertoire particulier : c:/wamp/bin/apache/apache2.2.22/cgi-bin/calcul_carre.py

Cela marche aussi bien pour la méthode POST que pour la méthode GET :

#! c:/Python27/python.exe
# -*- coding: utf-8 -*-

print "Content-Type: text/html\n"

import cgi

print """<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Traitement du formulaire en CGI-Python</title>
    </head>

    <body>
        <h2>Résultat</h2>"""

form = cgi.FieldStorage()

# on vérifie que la variable existe
if form.has_key("Nombre"):

    nombre = form["Nombre"].value

    try:
        # on vérifie que c'est bien un nombre
        nombre = float(nombre)
    except:
        print "<p>Valeur invalide !</p>"
    else:
        resultat = nombre*nombre
        print "<p>Le carré de <strong>",nombre,"</strong> est <strong>",resultat,"</strong></p>"

else:
    print "<p>Valeur invalide !</p>"

print """</body>
</html>"""

wampserver

wampserver

Exercices

Exercice 1 Calcul de la racine carrée

1) Par la méthode GET
Ecrire le formulaire HTML (formulaire_racine_carree_get.htm) et le script de traitement (calcul_racine_carree_get.php).

2) Même travail avec la méthode POST (formulaire HTML formulaire_racine_carree_post.htm et script de traitement calcul_racine_carree_post.php).

Bibliographie : Fonctions mathématiques

Exercice 2 Surface et périmètre d'un rectangle

Avec la méthode POST, écrire le formulaire HTML (formulaire_rectangle.htm) et le script de traitement (calcul_rectangle.php).
Le formulaire possèdera deux champs de saisie que vous nommerez Longueur et Largeur.

Exercice 3 Résolution de l'équation du second degré : ax² + bx + c = 0
Avec la méthode POST, écrire le formulaire HTML (formulaire_equation.htm) et le script de traitement (resolution_equation.php).