Faire un formulaire PHP, HTML, CSS (3 sur 3)

I. Introduction au formulaire PHP

Ce tutorial fait suite à Faire un formulaire HTML, CSS, PHP (1 sur 3) et Faire un formulaire CSS, HTML, PHP (2 sur 3), donc commencez par ces parties 1 et 2 si vous souhaitez le suivre en entier.
Après avoir créé un formulaire en HTML, et appliquer des styles CSS sur celui-ci afin de le mettre en forme, nous allons maintenant voir le fichier traitement.php que nous avions mis dans le champ action lors de la création de notre formulaire HTML. Ce script PHP va traiter les données du formulaire et les insérer dans une base de données MySQL, nous allons voir comment.

II. Explications

1. Création de la table MySQL

Commencez par créer une table que vous nommerez "formulaire" et les champs suivants dans celle ci :

Faire un formulaire PHP image 1

Elle contient tous les champs nécessaires pour stocker les données du formulaire + un id qui est un numéro unique pour identifier chaque enregistrement qui sera inséré + un champ "date" dans lequel vous pourrez stocker la date à laquelle le formulaire a été soumis si vous le souhaitez. Pour voir comment faire tout cela avec Phpmyadmin, consultez phpmyadmin pour gérer vos bases MySQL.

2. Connexion à la base de données MySQL

Comme nous allons insérer les données du formulaire dans une base de données MySQL, nous allons commencer par nous connecter à celle-ci.
Commençons par définir quelques paramètres indispensable pour se connecter : le serveur, le nom d'utilisateur, le mot de passe, et le nom de la base de données.

// Parametres mysql à remplacer par les vôtres
define('DB_SERVER', 'localhost'); // serveur mysql
define('DB_SERVER_USERNAME', 'root'); // nom d'utilisateur
define('DB_SERVER_PASSWORD', 'motdepasse'); // mot de passe
define('DB_DATABASE', 'monsite'); // nom de la base

Sur une ligne en PHP, tout ce qui est précédé par un double slash // est pris comme un commentaire de code, donc vous mettez ce que vous voulez.
Remarquez aussi l'utilisation de la fonction define() qui permet de définir une constante (valeur qui ne changera jamais à la différence d'une variable)

Une fois ces valeurs constantes définies, vous allez vous connecter à votre serveur de base de données MySQL en utilisant la fonction mysql_connect() puis choisir une base de données à l'aide de mysql_select_db().

// Connexion au serveur mysql
$connect = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, 
DB_SERVER_PASSWORD)
or die('Impossible de se connecter : ' . mysql_error());
// sélection de la base de données
mysql_select_db(DB_DATABASE, $connect);

La ligne commençant par "or" peut vous paraître incompréhensible au premier abord. Si c'est le cas, sachez que le "or" est un "ou logique" et que la fonction mysql_connect() retourne vrai ou faux, suivant si elle réussit ou échoue. Ici si elle retourne "vrai", la ligne du "or" ne se sera pas exécutée. Mais si elle retourne "faux", la ligne sera exécutée et on écrira un message d'erreur avec l'erreur précise qui a eu lieu avec la fonction mysql_error().

3. Vérification du remplissage des champs

Nous allons maintenant vérifier que les champs obligatoire sont bien remplis, ce qui est une étape classique sur un formulaire.
Commençons avant par définir quelques variables :

$msg_erreur = "Erreur. Les champs suivants doivent être obligatoirement remplis :
<br/><br/>";
$msg_ok = "Votre demande a bien été prise en compte.";
$message = $msg_erreur;

La variable $msg_erreur contient le début du message d'erreur si un champ obligatoire n'est pas rempli. Nous lui ajouterons le nom des champs à remplir après. La variable $msg_ok contient pour sa part le message qui confirme que le formulaire a bien été envoyé et pris en compte.
Nous définissons aussi une variable $message qui prend pour le moment la valeur de $msg_erreur , vous comprendrez pourquoi par la suite.

En effet, nous allons maintenant vérifier que certains champs obligatoires (selon notre choix) sont bien remplis, et si ce n'est pas le cas, pour chaque champ non remplit nous allons ajouté son nom dans la variable $message. Cela nous permettra de l'afficher à l'utilisateur.
Pour vérifier cela, nous utiliserons la fonction PHP empty() qui retourne "vrai" si la variable passée en paramètre est vide, ou "faux" dans le cas contraire. Et pour ajouter le nom du champ vide dans la variable $message, nous allons concaténer les deux chaînes (concaténer veut dire ajouter bout à bout) à l'aide d'un ".=". Le point devant le "égal" permet d'ajouter la chaîne à la variable au lieu de remplacer.

if (empty($_POST['civilite']))
  $message .= "Votre civilité<br/>";
if (empty($_POST['nom'])) 
  $message .= "Votre nom<br/>";
if (empty($_POST['adresse'])) 
  $message .= "Votre adresse<br/>";
if (empty($_POST['codepostal'])) 
  $message .= "Votre code postal<br/>";
if (empty($_POST['ville'])) 
  $message .= "Votre ville<br/>";
if (empty($_POST['comments'])) 
  $message .= "Votre message<br/>";

4. Formatage et insertion des données en base de données MySQL

Si l'utilisateur n'a pas remplit correctement un des champs obligatoires, il vous faudra commencer par lui afficher le message d'erreur. Mais comment allons-nous savoir si c'est le cas ? Et bien c'est là que vous allez voir l'intérêt de la variable $message , elle sert à conserver la variable $msg_erreur intacte afin de faire une comparaison. L'idée est la suivante : "si le contenu de la variable $message et plus grand que celui de la variable $msg_erreur, c'est que nous venons d'ajouter des champs non remplis", et cela implique d'afficher l'erreur.

NB : nous aurions pu aussi revérifier que tous les champs obligatoires ne sont pas vides pour faire la même chose, mais cela va faire beaucoup d'appels à la fonction empty() que l'on peut éviter. Voilà ce que cela donne :

if (strlen($message) > strlen($msg_erreur)) {
  echo $message;
}

Par contre si les champs sont bien remplis, vous allez pouvoir insérer leurs valeurs dans la base de données MySQL. Mais avant toute chose, attention à la sécurité car un utilisateur peut mettre du code dans un champ et mettre à mal votre serveur MySQL (voir le tutorial Attaques par injection SQL). C'est pour cela que nous utiliserons la fonction mysql_real_escape_string() qui protège les données avant insertion et notamment les apostrophes, guillemets, etc.

} else {
  foreach($_POST as $index => $valeur) {
    $$index = mysql_real_escape_string(trim($valeur));
  }

La boucle foreach() va passer toutes la variables $_POST envoyées par le formulaire en revue. Pour chacune d'elle nous allons créer une variable spécifique avec $$index, nettoyer sa valeur avec trim() (en enlevant notamment les espaces de fin) et sécuriser sa valeur avec mysql_real_escape_string().

Exemple : pour la variable $_POST['adresse'] qui contiendra votre adresse entrée dans le formulaire et si $_POST['adresse'] = "45 rue de l'abbé ", cela va créer une variable $adresse dont la valeur sera "45 rue de l\'abbé".

Les données sont maintenant presque prêtes à être insérées dans la base de données. Il faut juste s'occuper des centre d'intérêts du formulaire avant. En effet pour ceux ci, il est possible de cocher plusieurs valeurs qui sont stockées dans une variable tableau. Or dans notre base de données, nous n'aurons qu'un champ pour les stocker (inutile d'en faire 4 à chaque fois pour en laisser la moitié de vide).
Nous allons donc concaténer les centres d'intérêts en les séparant d'une virgule puis un espace afin qu'ils tiennent sur une ligne.

$interets = $_POST['interets'];
$sqlinterets = '';
for ($i=0; $i<count($interets); $i++)
{
  $sqlinterets .= $interets[$i];
  $sqlinterets .= ', ';
}

Exemple : si la personne coche "sport" et "voyages" comme centres d'intérêt, $_POST['interets'] contiendra un tableau à deux éléments que nous parcourons et ajoutons chaque élément à la variable $sqlinterets. Au final, elle contiendra "sport, voyages, ".

Il ne reste plus qu'à insérer les données dans la table "formulaire" (ou autre nom de table à condition de la changer dans le code suivant) avec une requête sql de type "INSERT" et la fonction mysql_query().
Puis vous vérifierez sur la requête s'est bien effectuée avec la valeur de retour $res. Si c'est le cas, vous affichez $msg_ok, sinon vous affichez l'erreur qui a eu lieu dans MySQL.

  $sql = "INSERT INTO formulaire VALUES ('', '".$civilite."', '".$nom."', 
    '".$adresse."', '".$codepostal."', '".$ville."', '".$pays."', 
    '".$sqlinterets."', '".$comments."', now())";
  $res = mysql_query($sql);

  if ($res) {
    echo $msg_ok;
  } else {
    echo mysql_error();
 }

}

5. Le code final de traitement.php

Voici enfin le récapitulatif du code complet que nous venons de voir :

<?php
// Parametres mysql à remplacer par les vôtres
define('DB_SERVER', 'localhost'); // serveur mysql
define('DB_SERVER_USERNAME', 'root'); // nom d'utilisateur
define('DB_SERVER_PASSWORD', 'motdepasse'); // mot de passe
define('DB_DATABASE', 'telechargements'); // nom de la base
// Connexion au serveur mysql
$connect = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, 
DB_SERVER_PASSWORD) 
or die('Impossible de se connecter : ' . mysql_error());
// sélection de la base de données
mysql_select_db(DB_DATABASE, $connect);
$msg_erreur = "Erreur. Les champs suivants doivent être obligatoirement remplis:
<br/><br/>";
$msg_ok = "Votre demande a bien été prise en compte.";
$message = $msg_erreur;
// vérification des champs 
if (empty($_POST['civilite'])) 
  $message .= "Votre civilité<br/>";
if (empty($_POST['nom'])) 
  $message .= "Votre nom<br/>";
if (empty($_POST['adresse'])) 
  $message .= "Votre adresse<br/>";
if (empty($_POST['codepostal'])) 
  $message .= "Votre code postal<br/>";
if (empty($_POST['ville'])) 
  $message .= "Votre ville<br/>";
if (empty($_POST['comments'])) 
  $message .= "Votre message<br/>";

// si un champ est vide, on affiche le message d'erreur
if (strlen($message) > strlen($msg_erreur)) {

  echo $message;

// sinon c'est ok 
} else {

  foreach($_POST as $index => $valeur) {
    $$index = mysql_real_escape_string(trim($valeur));
  }

  $interets = $_POST['interets'];
  $sqlinterets = '';
  for ($i=0; $i<count($interets); $i++)
  {
    $sqlinterets .= $interets[$i];
    $sqlinterets .= ', ';
  }

  $sql = "INSERT INTO formulaire VALUES ('', '".$civilite."', '".$nom."', 
    '".$adresse."', '".$codepostal."', '".$ville."', '".$pays."',
    '".$sqlinterets."', '".$comments."', now())";
  $res = mysql_query($sql);

  if ($res) {
    echo $msg_ok;
  } else {
    echo mysql_error();
  }

}
?>

III. Conclusion du tutorial

Voilà, après avoir vu comment créer un formulaire HTML et mettre en forme celui-ci en CSS, vous venez de voir comment traiter les données du formulaire en PHP par l'exemple. Notez bien que le traitement des données dépendra de ce que vous voulez faire de celles-ci donc c'est à vous d'adapter et de piocher dans ce que vous venez de voir pour vous en servir à bon essient.

J'espère que vous aurez appris des choses à l'issu des ces trois tutoriaux, et si vous avez des questions, je vous répondrai avec plaisir sur le forum.