TP 3 Formulaires Et Passage de Paramètres - Eleve - 2022

Interaction entre l'homme et la machine sur le web TD 3 : Formulaires et passage d'un paramètre 1ère NSI
TP 3 : Formulaires et passage d'un paramètre
I- Méthode GET pour passer la paramètres

→ 1ère étape : Exemple de code de formulaire
• Récupérez le code d'un formulaire simple en cliquant sur le lien suivant index.php - exemple 0
formulaire - Replit puis sur le bouton ''Fork'' en haut à droite du cadre central pour créer une copie sur
votre propre compte;
• Dans le code de cette page Web, identifiez la méthode d’envoi des données du formulaire. Quelle
est-elle ? _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
• Exécutez le code en cliquant sur le bouton '' Run '' pour voir la page Web correspondante qui
contient notamment un formulaire. Vous pouvez vérifier que si vous complétez le formulaire et
cliquez sur le bouton « Envoyer » une réponse de type « erreur 404 » est renvoyée par le serveur, ce
qui est tout à fait normal comme nous allons le voir par la suite.
• Revenez sur le code de la page du formulaire. Quelle est la valeur de l’attribut action du
formulaire ? _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Important :
La valeur de l’attribut action d’un formulaire est le nom du fichier (côté serveur)à qui le
navigateur doit envoyer les données du formulaire. Ce fichier est chargé de récupérer et de traiter
ces données.
Comme dans notre cas le fichier traitement_formulaire_GET.php n’existe pas, il est normal que le
serveur renvoie une erreur.
→ 2ème étape : Créons à présent le fichier qui traite les données du formulaire !
• Dans le projet replit ouvert, ajoutez un fichier en cliquant sur le bouton « Add file » (dans la bande
latérale gauche au-dessus de la liste des fichiers de votre replit ) et nommez-le
traitement_formulaire_GET.php
• Copiez ensuite le code ci-dessous dans ce fichier.
<?php
$nom= htmlspecialchars($_GET["nom"]);
$prenom= htmlspecialchars($_GET["prenom"]);
?>
<htmllang="fr">
<head>
<metacharset="UTF-8"/>
<title>Formulaire Test</title>
</head>
<body>
<h1>Passage de paramètres par la méthode GET</h1>
<p>Bonjour <?php echo$prenom. "". $nom; ?>, bienvenue sur mon site Web.</p>
</body>
</html>
Lycées Foch Rodez 1/4

Explications :
• La première partie du code PHP (4 première lignes) permet de récupérer les deux valeurs du
formulaire ayant pour attributs "nom"et "prenom". On les stocke dans deux variables PHP
appelées $nom et $prenom.
• Dans la deuxième partie du code PHP, on utilise l’instruction echopour écrire les valeurs des
variables $nom et $prenom dans la page Web qui sera renvoyée au client (celle affichée à l’écran).
→ 3ème étape : Envoi du formulaire et affichage de la page dynamique

• Une fois le code copié, cliquez à nouveau sur la page index.php, lancez le serveur Web en
cliquant sur '' Run '' puis ouvrez la page du formulaire dans un nouvel onglet en cliquant sur « Open in
a new tab » en haut à droite de votre page replit.
• Dans le nouvel onglet, remplissez le formulaire et cliquez sur le bouton « Envoyer » pour
soumettre le formulaire. Vérifiez que cette fois-ci le serveur a pu construire une page Web avec les
données du formulaire.
a) Quelle est l’URL de la page renvoyée par le serveur ?
____________________________________
b) Quels sont les paramètres et les valeurs passés au fichier traitement_formulaire_GET.php ?
____________________________________
c) Quel problème important constatez-vous ?
____________________________________
→ 4ème étape : Étude du type de requête
• Revenez à la page du formulaire (toujours dans le nouvel onglet) et lancez les Outils de
développement Web (Ctrl + Maj + I).
• Remplissez à nouveau le formulaire et envoyez les données.
• Vérifiez que la méthode de requête est bien de type GET. Observez dans la requête que les trois
paramètres ont été passés au serveur (comme ci-dessous).

II- Méthode POST pour passer les paramètres
→ 1ère étape : Modification des fichiers html et php

• Revenez sur votre projet replit. Dans le formulaire, pour utiliser la méthode POST, il suffit de
donner la valeur "post" à l’attribut method du formulaire. Modifiez donc ainsi votre formulaire !
• Modifiez également la valeur de l’attribut action et remplacez-la par
"traitement_formulaire_POST.php".
Remarque : Il reste maintenant à créer le fichier PHP traitement_formulaire_POST.php qui va

traiter les données du formulaire !
• Ajoutez un fichier à votre projet en cliquant sur le bouton « Add file » dans la fenêtre de gauche
des fichiers. Nommez ce nouveau fichier traitement_formulaire_POST.php
• Copiez dans ce nouveau fichier le code du fichier précédent traitement_formulaire_GET.php et
remplacez seulement tous les '' $_GET '' par des '' $_POST ''.
→ 2ème étape : Exécution du formulaire modifié
• Revenez sur le fichier index.html et lancez le serveur en cliquant sur '' Run '' puis ouvrez la page du
formulaire dans un nouvel onglet (Open in a new tab).
• Complétez le formulaire, recopiez ci-dessous les informations que vous avez complétées dans le
formulaire, puis cliquez sur le bouton « Envoyer » pour transmettre les données au serveur.
Votre nom :
Votre prénom :
Votre mot de passe :
• Avec la méthode POST, les paramètres sont-ils toujours transmis au fichier cible via l’URL ?
________________________________
→ 3ème étape : Étude de la requête avec les outils de développement Web

• Revenez à la page du formulaire (toujours dans le nouvel onglet) et lancez les Outils de
développement Web (Ctrl + Maj + I).
• Remplissez à nouveau le formulaire et envoyez les données.
• Vérifiez que la méthode de requête est bien de type POST.
• Observez dans la requête que les trois paramètres ont été passés au serveur (onglet « Requête »
avec Firefox et dans la partie « Form Data » avec Chrome, voir ci-dessous).
Remarque :Les données du formulaire ont été envoyés par le serveur dans le corps de la requête.

a) Quelle est la chaîne transmise dans le corps de la requête à l'étape 2 ?
b) Le problème relevé dans la première partie de la question c à l'étape 3 est-il totalement contourné ?
Pourquoi ?
c) En observant l’en-tête de la requête réalisée juste au-dessus avec les outils de développement, complétez les en-
têtes suivants de la requête.
Host :
Content-type :
Explications :
• Avec cette méthode, les paramètres sont transmis au serveur dans le corps de la
requête HTTP. La méthode POST permet d’envoyer du contenu long à un serveur.
• Le type du corps du message envoyé (ici application/x-www-form-urlencoded)
indique un passage de paramètres utilisant la syntaxe d’URL.
• La longueur du contenu en octets (ici 40) correspond à la longueur de la chaîne
« nom=Lerdorf&prenom=Rasmus&mdp=phpcreator » contenant 40 caractères, chacun
étant codé sur un octet. Notez qu’avec des caractères spéciaux la longueur du contenu en
octets n’est plus égale au nombre de caractères de la chaîne transmise car les caractères
spéciaux peuvent être codés sur 1, 2, 3 ou 4 octets.
III- Application :
Travail individuel à rendre dans l'onglet devoir de Teams au pus tard le mercredi 5 mai.
Créez un nouveau replit au format '' PHP Web Server ''.

Copiez-y le fichier index.php du formulaire établi dans le '' TP 2 Formulaires '' ou créez un nouveau
formulaire.
Écrivez le fichier PHP permettant d'afficher la page dynamique utilisant les réponses du questionnaire
que vous avez créé. Pas de fichier CSS attendu dans ce projet.
Critères à valider dans ce mini projet :

• dans le formulaire entrer des réponses type texte et type mail ;
• utiliser au moins un bouton radio ;
• utiliser au moins une liste d'options ;
• utiliser un bouton envoyer ;
• utiliser la méthode POST pour réaliser un affichage dynamique reprenant les réponses aux
questions du formulaire ;
• le thème de votre page dynamique est en lien avec votre premier projet HTL /CSS/JS :
votre formulaire s'adresse à des visiteurs de l'ENT du lycée Foch qui s'intéressent à la présentation de
la spécialité NSI (humour bien choisi accepté) pour compléter le travail effectué en amont et proposer
un accueil personnalisé évidemment sans utiliser les informations trop personnelles (numéro de carte
bleue par exemple -) ).
Place à votre créativité !

TP 3 Formulaires Et Passage de Paramètres - Eleve - 2022

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP 3 Formulaires Et Passage de Paramètres - Eleve - 2022

Transféré par

Droits d'auteur :

Formats disponibles

Interaction entre l'homme et la machine sur le web TD 3 : Formulaires et passage d'un paramètre 1ère NSI

TP 3 : Formulaires et passage d'un paramètre

I- Méthode GET pour passer la paramètres

Lycées Foch Rodez 1/4

→ 3ème étape : Envoi du formulaire et affichage de la page dynamique

a) Quelle est l’URL de la page renvoyée par le serveur ?

b) Quels sont les paramètres et les valeurs passés au fichier traitement_formulaire_GET.php ?

c) Quel problème important constatez-vous ?

→ 4ème étape : Étude du type de requête

Lycées Foch Rodez 2/4

II- Méthode POST pour passer les paramètres

→ 1ère étape : Modification des fichiers html et php

Remarque : Il reste maintenant à créer le fichier PHP traitement_formulaire_POST.php qui va

→ 2ème étape : Exécution du formulaire modifié

→ 3ème étape : Étude de la requête avec les outils de développement Web

Lycées Foch Rodez 3/4

a) Quelle est la chaîne transmise dans le corps de la requête à l'étape 2 ?

Créez un nouveau replit au format '' PHP Web Server ''.

Critères à valider dans ce mini projet :

Lycées Foch Rodez 4/4

Vous aimerez peut-être aussi