Aller au contenu

Formulaires et PHP

L'objectif de ce travail est de comprendre le principe des formulaires HTML et de leur traitement côté serveur via le langage PHP.

Un formulaire HTML!

Les formulaires HTML sont des structures classiques du WEB dès lors qu'il s'agit de saisir des informations personnelles à la création d'un compte par exemple:

Les balises HTML qui définissent ce formulaire sont données ci-après.

Premier formulaire

  1. Créer un dossier site_web
  2. Recopier le code suivant dans notepad++ et l'enregistrer sous le nom index.html dans le dossier précédent
  3. Ouvrez ensuite ce fichier avec votre navigateur favori.
Code HTML pour les formulaires
🌍 Code HTML
<!DOCTYPE html>
<html>
<body>

<h2>Compléter les informations suivantes</h2>
<div>
<form>
  <label for="fname">Nom:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Prénom:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br>
  <label for="age">Âge:</label><br>
  <input type="number" id="age" name="age_saisi" ><br>
  <input type="radio" id="html" name="sexe" value="H">
  <label for="html">Masculin</label><br>
  <input type="radio" id="css" name="sexe" value="F">
  <label for="css">Féminin</label><br>
</form>
</div>
</body>
</html>

Vous remarquerez que les zones de saisies (balises input) ont plusieurs types: du texte à saisir, des boutons radios à cocher ou encore des nombres... mais il en existe bien d'autres (password, email, ...).

Les balises input ont des attributs: type pour le ... type, id pour les identifier et agir sur eux via du CSS ou du JS, puis name et value que nous évoquerons plus tard.

Notre formulaire est très archaïque: ajoutons un peu de CSS!

Second formulaire plus stylé

  1. Recopier le code CSS ci-après dans notepad++ et l'enregistrez-le sous le nom mon_style_formulaire.css dans le dossier site_web.

  2. Modifier le fichier index.html en ajoutant l'instruction:

    🌍 Code HTML
    <HEAD>
  <link href="mon_style_formulaire.css" rel="stylesheet" type="text/css"> 
</HEAD>
    au bon endroit

  3. Pensez à enregistrez puis rafraîchir la page du navigateur pour oberver les effets de style.

Code CSS pour les formulaires
CSS
input[type=text]{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #FF0000;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=number]{
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-flex;
  border: 1px solid #0000FF;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=radio]{
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-flex;
  border: 1px solid #0000FF;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
h2{
  color:Tomato;
}

Vous devrier obtenir quelque chose qui ressemble à cela:

On fait quoi maintenant?

Une fois les données saisies, il faut les envoyer au serveur qui va certainement les stocker dans une base de données, concept que nous ne développerons pas ici (compétences d'un élève de terminale).

Il peut aussi traiter ces informations saisies en vous envoyant une page HTML formatée: c'est en particulier le rôle du langage PHP que de proposer un affichage dynamique en fonction des données que vous lui avez transmis!

Le langage PHP

Le langage PHP est un langage de programmation principalement utilisé pour produire des pages Web dynamiques via un serveur web.

Nous allons donc faire un peu de PHP, ce qui vous permettra d'agrandir la liste des langages de programmation rencontrés cette année. Mais nous nous contenterons des routines les plus simples...

Installer un serveur PHP

Nous pourrions installer un serveur Python qui traitera alors des scripts écrits dans ce langage, nous l'avons déjà fait ici.

Mais nous allons utiliser une architecture très classique: WAMP

Wamp

WAMP est un acronyme informatique: Windows, Apache, MySQL, PHP

Si vous connaissez bien Windows, Apache est le serveur WEB qui répond aux requêtes des clients, le langage de script PHP sert la logique et MySQL gère les base de données.

Nous allons utiliser UWAMP un version légère installée sur vos machines. Il n'y a rien à faire à part démarrer le serveur... Nous y reviendrons plus tard.

Définir les pages PHP

pages PHP

Si les fichiers HTML utilisent le langage PHP, ils doivent alors porter l'extension php

Ainsi le fichier index.html doit-il s'appeler dorénavant index.php même s'il ne contient pas encore du code php.

Changer l'extension

Changer l'extension du fichier index.html en index.php

Envoyer les données du formulaires

Vous effectuez une requête sur le serveur WEB pour obtenir la ressource d'accueil index.php qui contient le formulaire.

Les données saisies dans le formulaire vont être envoyées à une page traitement.php qui va traiter ces informations et construire une page HTML personnalisée que le serveur va vous renvoyer:

image

Pour indiquer que c'est le fichier traitement.php qui va traiter les demandes, il faut modifier le code HTML du fichier index.php.

Modifier le code du fichier index.php

Modifier les balises du formulaires comme indiqué ci-dessous.

Code à modifier
Modification des balises form
<form action="traitement.php" method="get"> 
<label for="fname">Nom:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Prénom:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<label for="age">Âge:</label><br>
<input type="number" id="age" name="age_saisi" ><br>
<input type="radio" id="html" name="sexe" value="H">
<label for="html">Masculin</label><br>
<input type="radio" id="css" name="sexe" value="F">
<label for="css">Féminin</label><br>
<input type="submit" value="Envoyer les données"> 
</form>

À l'appui de la touche Envoyer des données, les valeurs saisies sont communiquées au fichier traitement.php qui va alors construire une nouvelle page en fonction de ces valeurs.

Quelle méthode?

Deux méthodes sont disponibles pour envoyer des données:

  • la méthode GET qui permet d'envoyer les données dans l'URL
  • la méthode POST qui permet d'envoyer les données dans le corps de la requête

Vous pourrez tester les deux méthodes un peu plus tard pour saisir la différence.

Mon premier fichier php

  1. Avec notepad++, créer un fichier PHP et enregistrez-le dans le dossier site_web sous le nom traitement.php.
  2. Copiez-y le contenu du code PHP proposé ci-après.
Code à modifier
traitement.php
<HTML>
<HEAD>
<!-- ************************NOM de la Page *************************************-->
<TITLE> Site de bienvenu </TITLE>
<!-- ************************Utilisation d'une feuille de style *************************************-->
<link href="mon_style_formulaire.css" rel="stylesheet" type="text/css"> 
</HEAD>
<BODY >
<center>
<div>
<?php
$nom = $_GET['fname'];
$prenom = $_GET['lname'];
$age = $_GET['age_saisi'];
$civ = $_GET['sexe']
?>
<h1>
<?php
if($civ == 'F'){
echo 'Bonjour Madame, ';
}
else{
echo 'Bonjour Monsieur, ';
}
?></h1>
<h1> <?php echo $nom." ".$prenom ; ?> </h1>
<h2>Ton âge est: <?php echo $age." ans";?>  </h2>
</center>
</div>
</BODY>
</HTML>

Dans un premier temps, le PHP récupère les valeurs de tous les champs du formulaire envoyées par la méthode GET pour les stocker dans des variables PHP qui commençent par le symbole $.

Puis la méthode echo largement utilisée, retourne des éléments HTML personnalisés.

Warning

Toutes les commandes php se terminent par un ;. Leur oubli est source d'erreur.

Testez!

À ce stade vous devriez avoir dans le dossier site_web, trois fichiers:

  • le fichier index.php
  • le fichier traitement.php
  • le fichier mon_style_formulaire.css

Respectez bien les étapes suivantes pour utiliser la technologie php.

Étape n°1: Lancer le serveur

Lancer le serveur UWAMP, vous devriez obtenir après quelques secondes, un truc qui ressemble à cela:

image

Étape n°2: Déposer votre site dynamique

Appuyer sur le bouton dossier www et pas un autre!

image

Dans la fenêtre qui s'ouvre, copier dans le dossier www, le dossier site_web que vous avez créé.

Étape n°3: Consulter votre site

Appuyer sur le bouton Navigateur www et pas un autre!

Un navigateur s'ouvre avec l'url localhost. Il faut comprendre que votre machine héberge à la fois le client qui effectue la requête vers un site web via le navigateur et aussi le serveur dont l'adresse IP est 127.0.0.1. Son nom DNS est alors localhost.

image

Cliquez sur le seul dossier site_webet votre page d'index devrait apparaître. Complétez alors les champs du formulaire et soumettez-le au php( en appuyant sur le bouton vert...)

Vous remarquerez alors que les valeurs saisies ont été ajoutées à l'URL:

image

Méthode GET

Avec la méthode GET, les valeurs saisies apparaissent en clair dans l'URL

On peut utiliser la méthode POST. Pour cela, il faut remplacer:

  • dans le fichier index.php, l'attribut method de la balise <form> par POST au lieu de GET
  • dans le fichier traitement.php, toutes les instructions $_GET par $_POST.

Méthode POST

Avec la méthode POST, les données saisies sont envoyées dans le corps de la requête et sont alors moins visibles.

Voilà pour la découverte de PHP...

Le coin des exercices

Pour savoir si vous avez compris les manipulations précédentes, vous pouvez réaliser les exercices suivants.

Calcul de périmètre

Écrire un formulaire qui permet de saisir la longueur et la largeur d'un rectangle et qui retourne à l'envoi des valeurs, le périmètre et l'aire de ce rectangle.

Calcul de moyenne

Écrire un formulaire qui permet de saisir les notes obtenues en maths, H.G, français puis technologie et qui retourne à l'envoi des valeurs, la moyenne obtenue.