Exercice : Méthodes des formulaires et PHP [Spécialité NSI - Année 2025

Méthodes des formulaires et PHP

Avant toute chose...

Pour ces exercices, vous aurez besoin d'un accès à un serveur Web, exécutant PHP. Les modalités d'accès sont recensés sur cette page.

L'URL de l'espace web personnel de Prenom sera http://portail.lyc-la-martiniere-diderot.ac-lyon.fr/srv51/Prenom/

Attention, il faut bien le / à la fin de l'URL. Cela appellera automatiquement le fichier index.html.

Ces exercices sont progressifs et reprennent des éléments du cours.

Partie 1 : Paramètres des méthodes GET et POST

Pour les 3 premières questions, nous allons reprendre cette page HTML : ../html/theme5/form/

Question

Retrouver les paramètres envoyés du formulaire pour la méthode GET

Question

Retrouver les paramètres envoyés du formulaire pour la méthode POST

Question

Récupérer les codes sources (CTRL + u dans Firefox) :

de la page HTML contenant les formulaires, que vous nommerez index.html ;
de la page traitement, que vous nommerez traitement.php.

Ces 2 fichiers seront stockés localement dans votre dossier en cours.

Rajouter un champ formulaire de type password à votre page index.html,
Re-tester les 2 formulaires avec les 2 méthodes GET et POST.

Que constatez-vous ? Faites valider par votre enseignant !

Envoyez ces 2 fichiers sur le serveur web, puis appelez votre fichier index.html depuis votre navigateur.
Constatez le résultat.

ATTENTION, pour fonctionner, il faut que le navigateur ait le droit d'accéder aux 2 fichiers. Pour cela, sur les 2 fichiers, cliquez-droit (dans Filezilla) puis Doit d'accès au fichier, puis paramétrez comme ci-contre :

Modifications des attributs du fichier dans Filezilla

Question

Depuis le guichet d'authentification de l'Espace Numérique de Travail du lycée (page où l'on s'authentifie), analyser la requête d'authentification. De quelle méthode est-elle ? Que constatez-vous ? Est-ce normal ?

Indice

Utilisez le menu Réseau du Menu Développement Web, puis filtrez en analysant que les requêtes HTML.

Partie 2 : Initiation à PHP

On réalise quelques exercices pour bien comprendre le fonctionnement de PHP.

Question

Reprendre le code de la page intitulée Essai PHP disponible sur la page Initiation à PHP.

et créer un fichier essai.php

Essayer de l'ouvrir sur votre poste avec un navigateur Web. Que se passe-t-il ?
Déposer maintenant en ligne (par SFTP) le fichier sur votre espace web personnel (http://portail.lyc-la-martiniere-diderot.ac-lyon.fr/srv51/prenom/), prenez soin de glisser ce fichier dans un nouveau dossier, nommé essai par exemple.
Vérifier les permissions (Cf ci-dessous) sur le fichier envoyé, via un clic-droit puis Droits d'accès au fichier.
Ouvrir votre navigateur et entrer l'URL de la page.

Droits sur un fichier de l'espace web | Informations^[1]

Que visualisez-vous ?

Ouvrir le code source de la page HTML, retrouvez-vous le code PHP ?

Indice

L'URL de la page essai.php doit être http://portail.lyc-la-martiniere-diderot.ac-lyon.fr/srv51/prenom/essai.php où prenom doit être adapté...

Solution

On constate qu'il n'y a aucune trace de code PHP : le client n'a reçu que l'HTML fabriqué côté serveur.

Question

Je crée un fichier heure.php qui contient le texte ci-dessous:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Quelle heure ? </title>
    </head>
<body>
    <!-- le script php qui suit ajoutera un paragraphe avec l'heure. -->
    <?php
        $heure = date("H:i:s");
        echo "<p>PHP. Il est $heure.</p>";
    ?>
    <p>JS. Il est <span id="heureJS"></span>.</p>
<!-- le script js qui suit ajoutera l'heure dans le paragraphe ci-dessus. -->
<script>
    const heureJS = document.querySelector("#heureJS");
    let ladate = new Date();
    heureJS.textContent = ladate.toLocaleTimeString();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Quelle heure ? </title>
    </head>

<body>

    <!-- le script php qui suit ajoutera un paragraphe avec l'heure. -->
    <?php
        $heure = date("H:i:s");
        echo "<p>PHP. Il est $heure.</p>";
    ?>

    <p>JS. Il est <span id="heureJS"></span>.</p>

<!-- le script js qui suit ajoutera l'heure dans le paragraphe ci-dessus. -->
<script>
    const heureJS = document.querySelector("#heureJS");
    let ladate = new Date();
    heureJS.textContent = ladate.toLocaleTimeString();
</script>

</body>
</html>

J'envoie ce fichier sur un serveur aux États-Unis qui permet d'héberger des sites web.

Voilà ce que j'obtiens à l'affichage :

PHP. Il est 05:20:04.
JS. Il est 11:18:45.

PHP. Il est 05:20:04.

JS. Il est 11:18:45.

Pouvez-vous expliquer pourquoi les heures obtenues sont différentes ?

Envoyez ce script sur votre espace personnel pour valider son bon fonctionnement.

Solution

PHP est exécuté côté serveur : l'heure obtenue avec PHP est donc l'heure du serveur (qui se trouve aux États-Unis).
JS est exécuté côté client : l'heure obtenue avec JavaScript est l'heure de ma machine.

Partie 3 : Des paramètres dans l'URL

Rappelons que la méthode HTTP la plus utilisée est la méthode GET.

Nous allons faire ici quelques requêtes http avec la méthode GET et l'ajout de paramètres pour le code PHP dans l'URL.

Question

Écrire une page carre.php contenant le texte suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Paramètres</title>
    </head>
<body>
<?php
    $nombre = $_GET['entier'];
    $carre = $nombre * $nombre;
    echo "Le carré de $nombre est $carre."
?>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Paramètres</title>
    </head>

<body>

<?php
    $nombre = $_GET['entier'];
    $carre = $nombre * $nombre;
    echo "Le carré de $nombre est $carre."
?>

</body>
</html>

Déposez par SFTP cette page carre.php sur votre espace serveur (prenez soin de créer un dossier carre auparavant)
Ouvrez un navigateur et accédez à cette page. Qu'affiche-t-elle ?
Ajoutez maintenant à la fin de l'URL le texte "?entier=6". Qu'affiche maintenant votre page? Comment expliquez-vous cela?

Indice

Obtenez-vous 0, puis 36 ? Si oui, alors vous pouvez lire la réponse qui vous donne des éléments de compréhension.

Solution

Explications...

$_GET est une variable (dite variable super globale) de PHP, cette variable est un tableau associatif qui récupère les variables passées dans l'URL (on utilise en fait la méthode GET du protocole HTTP).

Remarque :

Un tableau associatif est proche de ce que l'on appelle dictionnaire en langage python

Lorsque l'URL se termine par "?entier=6", $_GET['entier'] a alors pour valeur 6 et le script affiche son carré.

Lorsque vous ajoutez "?entier=6" en fin d'URL et appuyez sur entrée, on rappelle que le recalcul de la page n'est pas fait en local sur votre machine. L'appui sur entrée crée une nouvelle requête HTTP, le serveur reçoit cette requête, calcule la page et la renvoie à votre machine. (consultez le code source de la page avec l'url sans paramètre puis avec paramètre)

Méthode :

Vous pouvez mieux comprendre ce qu'il se passe en utilisant l'onglet Réseau du Menu Développement Web de Firefox.

Question

Reprendre la page ../html/theme5/form/ et notamment le fichier traitement.php.

Faire en sorte qu'après appui sur le bouton Envoyer, la page vous affiche :

Bonjour Prénom Nom !

Bien sûr, Prénom et Nom seront pris dans le formulaire de la page HTML.

Partie 4 : Quel âge ?

On souhaite construire une page HTML avec un formulaire qui demande l'année de naissance à l'utilisateur et retourne son âge grâce à une page PHP.

La page de traitement PHP sera nommée age.php. Celle contenant le formulaire age.html. Les 2 fichiers seront déposés sur le serveur dans le dossier age.

En PHP, pour récupérer l'année en cours, on peut utiliser la fonction date de la manière suivante :

date("Y"); //retourne l'année en cours

date("Y"); //retourne l'année en cours

Question

Créer les 2 fichiers age.html et age.php et tester-les sur le serveur.

Indice

le fichier doit disposer de l'extension .php
l'instruction echo sert à afficher du texte dans la page
chaque variable doit avoir un nom commençant par le symbole $
la syntaxe d'une boucle for est très proche de la syntaxe utilisée en JavaScript
chaque instruction se termine par un ;
le code PHP est délimité par < ?php et ?>

Partie 5 : Mot de passe...

Les mots de passe sont une information sensible...

Question

Paul administre un site Web où les visiteurs peuvent créer un compte en informant un identifiant et un mot de passe.

Il compte créer un formulaire dans lequel il demandera l'identifiant et le mot de passe, informations qu'il enverra par la méthode POST à son serveur qui les enregistrera dans une base de données sans les modifier.

Expliquez pourquoi ce qu'il compte faire n'est pas recommandé.

Indice

Il faut s'intéresser à la façon de stocker ce mot de passe ; et proposer une solution bien meilleure...

Partie 6 : Amélioration de votre espace Web personnel...

Si vous avez terminé en avance, construire un fichier index.html que vous mettrez à la racine de votre espace web personnel et qui fera un lien vers tous les fichiers que vous avez générés durant cette séance. On pourra y adjoindre des styles CSS.

De même, vous avez réalisé de nombreux travaux HTML depuis le début de l'année, vous pouvez les mettre en ligne.