Formulaire d'inscription en Php et Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Formulaire d'inscription en Javascript et PHP

Cette formation Php est la suite logique de la précédente. Nous y avons appris à créer une base de données MySql simple. Dans cette base, nous avons ajouté une table. Et dans cette table, nous avons construit tous les champs que nous avons typés. Nous n'avons pas oublié d'ajouter la clé primaire pour référencer chaque enregistrement de façon unique. Ces champs sont prévus pour accueillir les informations d'inscription d'un internaute.



C'est pourquoi, nous récupérons le formulaire que nous avions conçu en Javascript lors d'une formation. Celui-ci réalise tous les contrôles de saisie côté client. La machine de l'internaute est ainsi sollicitée à la place du serveur distant. Si les informations tapées sont validées par le code Javascript, nous devons enclencher un traitement Php. Celui-ci doit récolter les informations pour les inscrire en base de données. Plus précisément, nous devons enrichir la table que nous avons créée lors de la formation précédente. Il s'agit donc de faire la correspondance entre les champs du formulaire et les champs de la table. Pour cela, nous allons bâtir une requête Sql action Insert Into. Nous avions appris à créer ces requêtes en VBA Access notamment. Cette requête devra être exécutée par le code Php.

Sources et présentation de la problématique
Dans un premier temps, nous devons commencer par récupérer les sources offrant la structure Html et Javascript du formulaire d'inscription.

• Télécharger le fichier formulaire-inscription-php.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression conduit au fichier de la page Web principale, nommée index.php. Elle est accompagnée de ses ressources externes dans les sous dossiers.

Le sous dossier js propose le script externe, nommé v_inscr.js. Il renferme toutes les fonctions Javascript qui sont appelées pour contrôler les saisies de l'internaute sur le formulaire. Bien sûr, ce script externe est ajouté en référence dans le code du formulaire, celui de la page index.php.

Le sous dossier commun renferme les pages de code Php communes. Elles sont imbriquées chronologiquement dans la construction grâce à la fonction Php include. Nous avions compris son intérêt et l'avions apprise lors d'une formation. Nous exploiterons notamment les fichiers ouvrir.php et fermer.php. Le premier doit permettre d'établir la connexion à la base de données. Le second doit permettre de fermer cette connexion, une fois les transactions réalisées. Son appel intervient donc fort logiquement en fin de page.

Comme nous l'avions appris aussi, ce projet doit être référencé dans EasyPhp pour être émulé. Mais tout d'abord, les deux serveurs virtuels doivent être démarrés.

• Ouvrir l'interface d'EasyPhp,
• Cliquer sur le bouton Start du serveur http,
• Puis, cliquer sur le bouton Start du serveur de base de données (Database),
• Cliquer ensuite sur le bouton add directory sous la liste des projets référencés,
• Saisir un nom dans la zone Working directory name,
• Coller l'adresse Windows du projet dans la zone Working directory path,
• Enfin, cliquer sur le bouton Save,

Le projet étant référencé, il apparaît désormais dans la liste.

• Cliquer sur son lien pour atteindre la page d'accueil,

Nous y découvrons le formulaire Javascript présenté par la capture au tout début de cette formation.

• Cliquer sur son bouton Valider,

Vous voyez apparaître la mention : Le formulaire n'est pas complet, dans le cadre supérieur.

Ces données, lorsqu'elles seront validées par le code client, devront donc être réceptionnées côté serveur en Php pour réaliser l'insertion en base de données. Nous devons donc commencer par établir la connexion. Souvenez-vous, nous avions créé la table inscr dans la base de données bd_gestion.

• Revenir sur l'interface d'EasyPhp,
• Cliquer sur le bouton Open pour le module MySql,

Nous accédons ainsi à l'interface d'administration PhpMyAdmin.

• Dans le volet de gauche, cliquer sur la base de données bd_gestion,

Nous déployons ainsi son affichage.

• Cliquer alors sur le symbole + en regard de sa table inscr,
• Puis, cliquer sur son lien Colonnes,

Nous accédons à la liste de ses champs, tels que nous les avons typés et créés lors de la formation précédente.



Ces noms de champs sont importants. Nous devrons les désigner dans la requête Sql pour y insérer les informations d'inscription qu'ils attendent.

Cette base de données est protégée par un compte administrateur.

• Cliquer sur l'onglet Privilèges en haut de l'interface de PhpMyAdmin,

Il s'agit de l'utilisateur moimeme pour le serveur local. Souvenez-vous, comme nous l'avions déjà mentionné, vous devrez mettre à jour ces informations de connexion, dans le fichier de code Php, en fonction des données de votre hébergeur, lors de la mise en production.

Etablir la connexion à une base de données
Sans plus attendre donc, nous proposons de créer la chaîne de connexion nécessaire pour accéder aux informations de base de données.

• Dans le dossier de décompression, double cliquer sur le sous dossier commun pour l'ouvrir,
• Puis, cliquer avec le bouton droit de la souris sur le fichier ouvrir.php,
• Dans le menu contextuel, choisir de l'éditer avec un éditeur comme le Notepad++,

Comme vous le remarquez, la chaîne de connexion existe déjà. Elle est cependant neutralisée par les commentaires.

• Supprimer les commentaires en effaçant les symboles /* et */,

Nous exploitons donc l'instruction Php mysqli_connect qui requiert trois arguments. Dans l'ordre, il s'agit de l'adresse du serveur ou du nom d'hôte, du nom d'utilisateur créé et de son mot de passe associé. Cette chaîne de connexion est alors mémorisée dans une variable. Elle se nomme liaison. Nous devons mettre à jour ces paramètres. Le nom d'hôte est déjà correct.

• Remplacer le nom d'utilisateur par moimeme,
• Remplacer le mot de passe par mm127eM,

Comme vous le constatez, c'est ensuite l'instruction Php mysqli_select_db qui permet d'établir la connexion à la base de données qui lui est passée en paramètre, en fonction de ces informations de connexion.

• Remplacer le nom de la base de données par bd_gestion,

Le premier paramètre fait référence à la chaîne de connexion. Il est correct en l'état.

<?php
// Initialisation de la connexion
$liaison = mysqli_connect("127.0.0.1", "moimeme", "mm127eM") or die ("Accès à la base de donnée impossible !!!");
mysqli_select_db($liaison, "bd_gestion") or die ("Accès à la base de donnée impossible !!!");
?>

Cette chaîne de connexion pourra désormais être exploitée à l'identique pour toutes les pages du site nécessitant une connexion à la base de données. C'est d'ailleurs la raison pour laquelle elle figure dans un fichier externe, afin de pouvoir être imbriquée à loisir grâce à l'instruction include.

• Enregistrer les modifications (CTRL + S),

Avant de chercher à exploiter les données du formulaire pour les inscrire dans la table MySql, nous devons prévoir de fermer la connexion avec le fichier fermer.php.

• Dans le sous dossier commun, cliquer droit sur le fichier fermer.php,
• Dans le menu contextuel, choisir de l'éditer avec le Notepad,

Là aussi, vous constatez la présence de l'instruction neutralisée par les commentaires.

• Supprimer les commentaires,

<?php
mysqli_close($liaison);
?>

Ce code peut en effet être exécuté désormais, puisque la chaîne de connexion a bien été initialisée et mémorisée sous le nom de variable liaison. Et c'est elle que nous utilisons en paramètre de l'instruction Php mysqli_close afin de fermer les connexions ouvertes.

• Enregistrer les modifications (CTRL + S),
• Basculer sur le navigateur Web et rafraîchir la page du formulaire d'inscription (F5),

Elle se recharge à l'identique sans mentionner la moindre erreur, attestant que la connexion a réussi. En cas d'échec, Php vous en informe en effet. Souvenez-vous, les fichiers ouvrir.php et fermer.php sont imbriqués dans la construction. Ils sont donc appelés au chargement de la page index.php, soit du formulaire.

Réceptionner les données du formulaire
Avant d'inscrire les informations de l'internaute en base de données, nous devons commencer par les réceptionner comme nous l'avons appris grâce à l'instruction Php $_POST. Ces traitements doivent être opérés dans le fichier principal.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'éditer dans le Notepad,

Tout d'abord vous remarquez l'imbrication de la page entete.php tout en haut du code, grâce à l'instruction include. Elle propose les balises nécessaires à la construction Html ainsi que l'appel du fichier ouvrir.php pour initialiser la connexion que nous venons de mettre à jour.

<?php
include("commun/entete.php");
?>

En bas de page, vous notez l'imbrication du fichier pied.php. Celui-ci propose toutes les balises Html fermantes pour que la page soit bien formée ainsi que l'appel du fichier fermer.php pour fermer les connexions ouvertes.

<?php
include("commun/pied.php");
?>

Notre jeu de construction est donc bien ficelé.

En tête de code, juste après l'instruction include, il s'agit d'ajouter les lignes permettant de réceptionner les valeurs transmises. Un test sur l'une des données suffit. Grâce à la sécurité Javascript, si le formulaire est soumis, cela signifie que toutes les données ont été contrôlées et donc transmises.

• Dans la section Php en entête de code, juste après l'instruction include, ajouter les lignes suivantes :

<?php
include("commun/entete.php");

if(isset($_POST["nom"]))
{
$la_civilite = $_POST["civilite"]==1?"Madame":"Monsieur";
$le_nom = utf8_decode(addslashes($_POST["nom"]));
$le_prenom = utf8_decode(addslashes($_POST["prenom"]));
$la_naissance = $_POST["date_n"];
$le_mail = $_POST["mail_inscr"];
$le_mp = utf8_decode(addslashes($_POST["mp_inscr"]));
}
?>
<script language="javascript" type="text/javascript">
...

Le test est réalisé dans une instruction conditionnelle Php. Il vérifie l'existence de la valeur transmise grâce à la fonction Php isset. C'est le contrôle du nom qui est vérifié. Si cette donnée existe, nous en déduisons que tous les champs ont été remplis et transmis. Nous récupérons la valeur de chacun d'entre eux, toujours grâce à l'instruction Php $_POST, en désignant leurs noms respectifs en paramètre. Extrait du formulaire d'inscription :

...
<div class="div_input_form">
<input type="text" name="nom" id="nom" maxlength="50" ... />
</div>
<div class="div_input_form">
<input type="text" name="prenom" id="prenom" maxlength="50" ... />
</div>
<div class="div_input_form">
<input type="text" name="date_n" id="date_n" maxlength="50" ... />
</div>
...

Chaque donnée est stockée dans une variable nommée explicitement.

Nous exploitons la fonction Php addslashes pour ajouter un caractère d'échappement, l'antislash, devant chaque caractère spécial problématique pour l'insertion en base de données. Il s'agit de l'apostrophe ici en l'occurrence. La fonction utf8_decode est importante pour rester en conformité avec le système d'encodage de la base de données, à cause des accents et caractères latins à gérer. La forme contractée de l'instruction conditionnelle est intéressante elle aussi pour optimiser le code.

$la_civilite = $_POST["civilite"]==1?"Madame":"Monsieur";

Elle est similaire dans de nombreux langages. Si la valeur retournée vaut 1 (?), nous stockons le texte Madame et Monsieur dans le cas contraire (:). En effet, la liste déroulante du formulaire associe des informations numériques (value) aux textes affichés :

<select id="civilite" name="civilite" onChange="Javascript:if(this.value>0){ b_civilite=true; } else { b_civilite=false; }">
<option value="0">Civilité</option>
<option value="1">Madame</option>
<option value="2">Monsieur</option>
</select>

A titre d'essai, nous proposons de restituer ces données dans le calque supérieur d'identifiant message. Mais faut-il encore avoir pu réceptionner ces données. Et pour ce faire, le formulaire doit être soumis, ce qui n'est pas le cas pour l'instant.

• Dans la fonction Envoyer du script Javascript, supprimer les commentaires devant l'instruction permettant la soumission du formulaire,

...
function envoyer()
{
if(b_civilite==true && b_nom==true && b_prenom==true && b_date==true && b_mail==true && b_mp)
{
document.getElementById("message").innerText = "Envoi serveur";
document.getElementById("inscription").submit();
}
Else
...

Cette façon de procéder est particulièrement intéressante dans la mesure où la soumission n'est réalisée que sur ordre Javascript, une fois que le contrôle de validité est assuré. Avec un bouton de type submit, notre formulaire aurait été soumis dans tous les cas, ce que nous ne souhaitons pas ici.

Ensuite il convient de restituer ces données transmises dans le calque d'identifiant message.

• Dans le calque d'identifiant message, remplacer l'information de texte statique par la section de code Php suivante :

...
<div id="message">
<?php
if(isset($_POST["nom"]))
echo $la_civilite." - ".$le_nom." - ".$le_prenom." - ".$la_naissance." - ".$le_mail." - ".$le_mp;
else
echo "Tous les champs sont obligatoires";
?>
</div>
...

Si les données ont bien été transmises (isset($_POST["nom"])), alors nous choisissons de les afficher concaténées grâce à l'instruction Php echo. En effet, en entête de code, nous venons de finaliser les instructions permettant de les réceptionner. Or, le chargement d'une page est chronologique.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Recharger la page du formulaire,
• Renseigner toutes les informations demandées,

Souvenez-vous, les mails doivent être conformes et identiques. Les mots de passe doivent correspondre et proposer entre 5 et 10 caractères. La date doit être inscrite au format date. Tout cela Javascript s'en assure au fur et à mesure de la frappe.

• Cliquer sur le bouton Envoyer pour soumettre les données du formulaire,

Et comme vous le remarquez, toutes les informations sont restituées dans le calque supérieur, attestant qu'elles ont parfaitement été récoltées. Ne vous souciez pas du caractère spécial à la place de l'accent. Il est l'oeuvre de la fonction utf8_decode pour la conformité de l'encodage avant l'insertion en base de données MySql.

Précisément, il s'agit désormais d'inscrire ces informations dans la table inscr de la base bd_gestion.

Inscription en base de données
En PHP, c'est l'instruction mysqli_query qui permet d'exécuter une requête Sql. Elle demande deux paramètres. Dans l'ordre, il s'agit de la chaîne de connexion que nous avons initialisée, reconnue sous le nom de variable liaison. En second paramètre, il s'agit de lui passer la syntaxe Sql de la requête à exécuter.

• Dans la section Php en entête de code, ajouter les deux lignes suivantes dans l'instruction conditionnelle :

<?php
include("commun/entete.php");

if(isset($_POST["nom"]))
{
$la_civilite = $_POST["civilite"]==1?"Madame":"Monsieur";
$le_nom = utf8_decode(addslashes($_POST["nom"]));
$le_prenom = utf8_decode(addslashes($_POST["prenom"]));
$la_naissance = $_POST["date_n"];
$le_mail = $_POST["mail_inscr"];
$le_mp = utf8_decode(addslashes($_POST["mp_inscr"]));

$requete = "INSERT INTO inscr(inscr_civilite, inscr_nom, inscr_prenom, inscr_date, inscr_mail, inscr_mp) VALUES
('".$la_civilite."', '".$le_nom."', '".$le_prenom."', '".$la_naissance."', '".$le_mail."', '".$le_mp."');";
$retours = mysqli_query($liaison, $requete) or die ("problème avc la requète ".$requete);
}
?>

Nous construisons la syntaxe de la requête Sql que nous mémorisons dans la variable requete. Cette syntaxe est classique et conforme à ce que nous avons déjà appris avec Access notamment. La clause Insert Into annonce qu'il s'agit d'une requête ajout. Elle est suivie du nom de la table concernée (inscr). Puis sont énumérés tous les champs de la table, dans lesquels les données doivent être insérées (inscr_civilite, inscr_nom, inscr_prenom, inscr_date, inscr_mail, inscr_mp). La clause Values annonce l'énumération des informations qu'il s'agit d'ajouter. Elles doivent être énumérées dans le même ordre bien sûr. Nous les énonçons donc en les concaténant à la partie statique de la syntaxe. Il s'agit en effet de faire référence aux variables ayant récolté les données du formulaire. Comme il s'agit d'informations textuelles, elles doivent être encadrées de côtes. C'est pourquoi une simple côte intervient avant la double côte fermante et une autre après la double côte ouvrante ('".$la_civilite."').

Cette requête est alors passée en deuxième paramètre de l'instruction mysqli_query. Le premier paramètre est la chaîne de connexion. Elle renseigne donc sur la base de données qu'il s'agit d'atteindre. Le résultat de cette action est booléen. Il vaut 1 si l'insertion s'est déroulée correctement. Cette valeur est stockée dans la variable retours que nous proposons d'exploiter.

Dans le code du calque d'identifiant message, nous souhaitons informer l'internaute sur le résultat de son inscription.

• Adapter son code comme suit :

<?php
if(isset($_POST["nom"]))
{
if($retours==1)
echo "Vous êtes désormais inscrit(e) sur le site";
else
echo $la_civilite." - ".$le_nom." - ".$le_prenom." - ".$la_naissance." - ".$le_mail." - ".$le_mp;
}
else
echo "Tous les champs sont obligatoires";
?>
</div>

N'oubliez pas les accolades désormais nécessaires pour borner l'instruction conditionnelle if.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Recharger la page et renseigner intégralement le formulaire,
• Enfin, cliquer sur le bouton Envoyer pour transmettre les valeurs et les inscrire,

Vous constatez l'apparition du message de confirmation. Si vous ouvrez la table de la base de données, vous remarquez que les informations y ont été correctement insérées. Nous n'avons pas mentionné le champ de la clé primaire dans la requête puisqu'il est auto-incrémenté. A la prochaine inscription, il se verra donc affecté d'une unité supplémentaire.



A ce stade, nous ne vérifions pas que le mot de passe est déjà utilisé. Chaque chose en son temps. De toutes façons, nous proposerons des authentifications sur la paire Mail et MP.

Enfin et il s'agit d'une précision importante, nous devrions normalement envoyer un mail de confirmation à l'internaute. Et c'est seulement au clic sur ce lien de confirmation que l'inscription définitive doit être opérée. Nous le verrons en temps voulu, lorsque nous aurons acquis les notions manquantes.