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

12. Application : Calcul du carré d'un nombre : 2 pages en 1

Nous allons reprendre l'application du chapitre précédent, mais en n'utilisant qu'une seule page.
Pour cela, il faut que le formulaire HTML transmette les informations vers la même page.

phpScript PHP avec la méthode POST

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

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Calcul du carré d'un nombre</title>
    </head>

    <body>

<?php
// on vérifie que la variable existe
if (isset($_POST["Nombre"]))
{
    print "<h2>Résultat</h2>";
    // on vérifie que c'est bien un nombre
    if (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>";
    }
}
else
{
    // on affiche le formulaire
    ?>
    <h2>Calcul du carré</h2>
        <form method="post" action="carre.php">
            Valeur : <input type="text" name="Nombre" autofocus required><br><br>
            <input type="submit" value="Envoyer">
        </form>
    <?php
}
?>
    </body>
</html>

Quand le script reçoit la variable Nombre par la méthode POST, cela veut dire que la variable a été envoyée par le formulaire. Le script va alors calculer et afficher le résultat.
Quand le script ne reçoit rien par la méthode POST, on affiche le formulaire.

Voir

pythonScript CGI-Python avec la méthode POST

Script CGI-Python à placer dans ce répertoire particulier : c:/wamp/bin/apache/apache2.2.22/cgi-bin/carre.py

Dans la barre d'adresse de votre navigateur :
http://localhost/cgi-bin/carre.py

#! 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>Calcul du carré d'un nombre</title>
    </head>

    <body>"""

form = cgi.FieldStorage()

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

    print "<h2>Résultat</h2>"
    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:
    # on affiche le formulaire

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

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

wampserver

wampserver

Exercices

Exercice 1 Calcul de la racine carrée

Ecrire le script racine_carree.php qui permet de saisir un nombre puis d'afficher sa racine carrée.
On ajoutera un bouton Retour en bas de la page du résultat.

Exercice 2 Page Web avec mot de passe

On désire restreindre l'accès à une page Web pagesecrete.php par l'utilisation d'un mot de passe.
Pour cela, créer un formulaire avec une zone de saisie de type "password" et un bouton Connexion.
Dans la partie privée, on placera un bouton Déconnexion pour retourner à la page d'authentification.

Bibliographie : HTML <input> type Attribute