Débuter en programmation web - sommaire

Traiter les données du formulaire avec PHP

Transmettre des données à une page via l'URL

Dois-je vous rappeler que l'URL est la valeur de l'attribut href de la balise A.

Et bien sachez qu'il est possible d'ajouter à cette URL des données !

Visitez "mon site" et observez !
Surtout cliquez sur les liens : accueil, page1, page2 et page3

Le rendu dans un nouvel onglet

Dans chacune des pages (après clic sur le lien) il est affiché :

Site réalisé par
Darcheville Patrick

C'est possible car mon nom et mon prénom sont contenus dans l'URL de chaque lien.
Observons le code HTML des liens ! ... <nav> <a href ="index.php?nom=Darcheville&prenom=Patrick">Accueil</a> <a href ="page1.php?nom=Darcheville&prenom=Patrick">Page 1</a> <a href ="page2.php?nom=Darcheville&prenom=Patrick">Page 2</a> <a href ="page3.php?nom=Darcheville&prenom=Patrick">Page 3</a> </nav> ...

Donc si vous cliquez sur le premier lien, par exemple, vous affichez la page d'accueil et vous transmettez à cette page deux données.
En effet la valeur de l'attribut href comprend l'URL proprement dite (index.php) mais après un point d'interrogation deux paramètres : nom=Darcheville&prenom=Patrick ; donc deux données séparées par &.

On peut donc transférer vers la page cible autant de paramètres qu'on veut à condition d'écrire un "?" après le lien proprement dit et de séparer les données par le symbole "&".

Le code de l'une des quatre pages du site

Je rappelle que chaque page affiche :

Site réalisé par
Darcheville Patrick

A titre d'exemple je vous indique le code de la page "page1.php" (extraits) : ... <section> <h2>Première page du site</h2> <h3> <?php echo "Site réalisé par ". "<br>"; echo $_GET['nom'] . " " . $_GET['prenom'] ; ?> </h3> <p>Texte de la page. <br>Blablabla ... <br>Blablabla ... </p> </section> ...

Lorsque des données sont transmises via l'URL il y a automatiquement création dans la page cible du tableau associatif $_GET !

Modifier les données transmises

Je veux maintenant vous montrer que le visiteur peut modifier les données affichées dans la barre d'adresse.

Cliquez sur l'un des quatre liens !
Modifiez l'URL comme suit :
http://darchevillepatrick.info/php/index.php?nom=Dupont&prenom=Jacques
Et appuyez sur ENTER.
La page affiche désormais que le site a été réalisé par Dupont Jacques ...

Le rendu dans un nouvel onglet

Autre test ; cliquez sur l'un des quatre liens puis modifiez l'URL comme suit :
http://darchevillepatrick.info/php/index.php
Appuyez sur ENTER.
La page n'affiche plus de nom ni de prénom !

Transmettre des données avec un formulaire

Tests du site "les pages jaunes"

Par exemple allez sur le site "pagesjaunes" et renseignez le formulaire de la page d'accueil :
Saisir "hotel" et "Paris" puis cochez "proximité".
La barre d'adresse contient alors :
http://www.pagesjaunes.fr/annuaire/ chercherlespros?quoiqui=hotel&ou=paris&proximite=1

Si vous voulez connaître les hôtels sur Lille il vous suffit de modifier le texte dans la barre d'adresse :
http://www.pagesjaunes.fr/annuaire/ chercherlespros?quoiqui=hotel&ou=lille&proximite=1
Puis d'appuyer sur ENTER.

Si vous voulez connaître les restaurants sur Calais modifiez comme suit :
http://www.pagesjaunes.fr/annuaire/ chercherlespros?quoiqui=restaurant&ou=calais&proximite=1
Puis d'appuyer sur ENTER.

Ce qui veut dire que le formulaire du site "pagesjaunes" utilise la méthode GET !
Les données saisies apparaissent dans la barre d'adresse et peuvent être modifiées par le visiteur.

Le rendu "les pages jaunes"

Conclusion

Le formulaire proposé par le site les "pages jaunes" est basé sur la méthode GET !

Lorsque des données de formulaire sont envoyées avec la méthode GET ces données apparaissent dans la barre d'adresse et peuvent donc être modifiées par le visiteur.
Donc insérer des données dans les liens ou envoyer ces données de formulaire avec la méthode GET sont deux techniques qui aboutissent au même résulat : ces paramètres apparaissent dans la barre d'adresse et peuvent donc être modifiées par le visiteur !
Donc si vous devez adresser à une page un identifiant et un mot de passe surtout n'utilisez pas un formulaire basé sur la méthode GET !
Utilisez la méthode POST ; Avec cette méthode les données n'apparaissent jamais dans la barre d'adresse.

Un formulaire reposant sur la méthode POST

Vous devez concevoir un formulaire d'inscription à un site.

Dans un premier on va utiliser deux pages : l'une contenant le formulaire et une autre pour le traitement des données envoyées.

La page contenant le formulaire d'inscription

La page se nomme "inscription_form.php".
Elle pourrait avoir pour extension .htm puisqu'elle ne contient aucun code PHP. Mais il est plus simple que dans un site toutes les pages aient la même extension.

Le code de la page (extraits) : ... <style> form {width : 96% ; margin :auto ; } label, input {width : 40% ; display : inline-block ; margin :10px ; } input:valid {color : green ; } input:invalid {color : red; } ... <form action = "inscription_trait.php" method ='post'> <p class ="remarque">Vous devez saisir deux fois votre identifiant et deux fois le mot de passe ! </p> <label>Tapez votre identifiant (adresse mail) : </label> <input type = "email" required placeholder = "n'oubliez pas @" name ='mail1'> <label>Confirmez votre identifiant (adresse mail) : </label> <input type = "email" required placeholder = "n'oubliez pas @" name ='mail2'> <label>Saisissez votre mot de passe :</label> <input type = "password" required pattern ='[A-z]{6,8}' maxlength ='8' placeholder = 'entre 6 et 8 lettres non accentuées' name ='passe1'> <label>Confirmez le mot de passe retenu :</label> <input type = "password" required pattern ='[A-z]{6,8}' maxlength ='8' placeholder = 'entre 6 et 8 lettres non accentuées' name ='passe2'> <label></label><button type = 'submit'> connexion</button> </form> ...

Observez bien la feuille de style !
Emploi des pseudo-classes :valid et :invalid.
Tant qu'une saisie dans un champ est invalide (saisie ne correspondant pas au type ou au gabarit (défini dans l'attribut pattern) elle apparaît en rouge ; dès que la saisie est correcte elle apparaît en vert.

Observez désormais le code du formulaire !
Les données sont envoyées dans la page "inscription_trait.php" avec la méthode POST.
Le formulaire comprend quatre champs car il faut saisir deux fois l'identifiant (une adresse mail) et deux fois le mot de passe.
Emploi des attributs HTML : required, pattern, placeholder.
Soumission des données avec un bouton de type submit donc tant que les quatre champs ne sont pas correctement remplis (champs vides ou invalides) la soumission est bloquée.

Le code de la deuxième page - celle traitant les données

La page se nomme "inscription_trait.php" mais j'espère que vous l'aviez deviné (valeur de l'attribut action du formulaire dans la première page).
Ci-dessous le code PHP de cette page : ... <h3> <?php if($_POST['mail1']==$_POST['mail2'] and $_POST['passe1']==$_POST['passe2']) { echo "vous êtes inscrits !" . "<br>"; echo "votre identifiant est : " .$_POST['mail1']. "<br>"; echo "votre mot de passe est : " .$_POST['passe1']. "<br>"; echo "notez ces paramètres !" . "<br>"; // ajout d'un enregistrement dans la table des inscrits } // fin if else { echo "erreur de saisie !" . "<br>"; echo "les idenfiants et/ou les mots de passe sont différents !" . "<br>"; } // fin else ?> </h3> ...

Le code PHP complète les contrôles de saisie HTMl5.

Pour que la saisie soit correcte il faut non seulement que les deux premiers champs contiennent des adresses mails valides mais il faut aussi que ces deux adresses soient strictement identiques.
De même il faut que les deux derniers champs aient aussi un mot de passe identique.
Ce sont ces contrôles qu'effectue la routine PHP puisque HTML est incapable de faire des comparaisons.

Le traitement PHP est cependant incomplet. Si les données saisies sont valides il faut créer un nouvel enregistrement dans la table des inscrits. Il faut donc en PHP appeler une requête SQL de type action qui commence par le mot clé INSERT. Le SQL est évoqué plus loin dans ce tuto.

Le rendu dans un nouvel onglet

Notez bien qu'après une soumission réussie c'est la page "inscription_trait.php" qui s'affiche.
Remarquez aussi que les paramètres saisis (et en particulier le mot de passe) n'apparaissent plus dans la barre d'URL car envoi des données avec la méthode POST.

Une seule page !

On peut mettre dans un même page le formulaire et le traitement.
L'extension de la page unique doit obligatoirement être .php.
Ci-dessous ce qui change : ... <body> <form action = "#" method ='post'> ... <h3> <?php if(isset($_POST['mail1'])) { ... ?> ...

Il faut modifier la valeur de l'attribut action de la balise form ; # signifie "même page".
Le reste du code du formulaire est inchangé.

Pour la routine PHP il faut intégrer le code précédent dans un test basé sur la fonction isset afin d'éviter l'affichage d'un message d'erreur éventuel tant que le tableau $_POST n'existe pas ; message qui pourrait pertuber le visiteur.

Le rendu dans un nouvel onglet

Récupérer les valeurs saisies dans un groupe de cases à cocher

Je vous propose un formulaire qui vous demande d'indiquer vos couleurs préférées via un groupe de cases à cocher.

Le code de la page unique (formulaire et PHP dans la même page) : ... <form name ="f" action ="#" method = "post" style ="width : 80%; margin: auto; border : 2px solid black;"> <p>Quelle est votre couleur préférée ; vous pouvez cocher plusieurs cases.</p> <input type="checkbox" name="gout[]" value="rouge" >Rouge <br> <input type="checkbox" name="gout[]" value="vert">Vert<br> <input type="checkbox" name="gout[]" value="bleu" >Bleu <br> <input type="checkbox" name="gout[]" value="noir">Noir <br> <input type="checkbox" name="gout[]" value="jaune">Jaune <br> <input type="checkbox" name="gout[]" value="autres" checked >Autre couleur <br> <br> <input type ="submit" value ="validez" name ="valider"><br> </form> <?php if(isset($_POST['gout'])) { echo "<hr>"; echo "Vos couleurs préférées : " . "<br>"; foreach($_POST['gout'] as $valeur) {echo $valeur . "<br>";} } ?> ...

A propos du code du formulaire.
Notez la valeur de l'attribut action. J'aurais pu indiquer le nom de la page "cases_a_cocher.php"
Le nom d'un groupe de cases à cocher doit être celui d'un tableau puisque on peut saisir plusieurs valeurs. Ici gout[] voir aucune ...

A propos du script.

Le script PHP est lancé dès que le tableau associatif $_POST['gout'] est créé (lors de la soumission) grâce à un test. Sinon vous auriez un message d'erreur qui peut être pertubant pour le visiteur ...
Ce script comprend une boucle qui parcourt ledit tableau et affiche donc la valeur des caches cochées.

Le rendu dans un nouvel onglet