Formulaire du compte utilisateur authentifié

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


Sujets que vous pourriez aussi aimer :


Formulaire de compte utilisateur

Les démonstrations à suivre s'inscrivent dans la suite logique des formations Php amorcées sur les techniques d'inscription et d'identification. Dans les formations précédentes, nous avons appris des notions fort intéressantes. En premier lieu, nous avons réalisé l'insertion d'internautes en base de données. Pour cela, nous avons exploité un formulaire Web client que nous avions conçu en Javascript. Nous avons réceptionné ces données côté serveur et exécuté une requête action Insert Into en Php. C'est ainsi que nous avons réussi l'ajout dynamique de données.



Et puis, nous avons appris à interroger cette base de données à la recherche de la paire identifiant/mot de passe d'un utilisateur inscrit. Pour cela, nous avons exploité une autre application Web cliente que nous avions développée en Javascript. Il s'agit d'un formulaire d'identification sécurisée anti-capture de saisie, grâce à l'inscription du mot passe avec un pavé numérique. Nous avons réceptionné ces données côté serveur. Nous les avons exploitées dans une clause Where d'une requête SQL sélection, à la recherche de la paire dans la base de données. Nous avons exécuté cette requête par le code Php. A réception des informations, nous avons ouvert l'accès de l'internaute identifié, grâce à un état de session. Ce dernier porte la valeur de la clé primaire pour son enregistrement en base de données. C'est cette valeur qui doit lui permettre d'accéder à ses informations de compte.

Vous le constaterez, en bas de page figure un jeu des trois icônes permettant de conduire vers les rubriques annexes. La troisième est barrée interdisant l'accès à la page des informations personnelles, tant que l'internaute n'est pas reconnu.

Tel que nous l'avions réalisé lors de la formation précédente :

• Si nous tapons un identifiant enregistré en base de données, dans la première zone de saisie : tatouille@free.fr,
• Si nous inscrivons son mot de passe associé : 122333, à l'aide du pavé numérique,
• Enfin, si nous cliquons sur le bouton Valider pour soumettre ces informations au serveur,

Nous constatons qu'un PostBack est généré. Dès lors, l'accès semble déverrouillé en bas de page. L'icône est débarrassée de son symbole de sens interdit. En effet, c'est l'application que nous avons développée dans la formation précédente.

La paire identifiant/mot de passe est réceptionnée côté serveur par le code Php. Elle est exploitée dans une clause Where d'une requête SQL sélection à la recherche de correspondance dans la base de données bd_gestion. Comme cette paire est trouvée, la requête récupère la valeur du champ de la clé primaire. Cette dernière est stockée dans l'état de session, désormais attaché à l'internaute fraîchement identifié. Jusqu'à sa déconnexion, cette valeur le suivra dans sa navigation.



Désormais, si nous cliquons sur cette icône en pied de page, nous basculons sur une interface semblable à celle du formulaire d'inscription. Mais sa fonction est de permettre la modification des données. Comme vous le remarquerez, à ce stade le formulaire est neutre. C'est l'enjeu de cette formation. Grâce à la variable de session, au chargement de la page, nous devons exécuter une requête Sql à la recherche de cette clé primaire dans la base de données, pour restituer toutes les informations liées et les inscrire dans les champs respectifs.



Sources pour le développement
Ces sources sont riches et nous proposons de les récupérer avec les développements associés. Bien sûr, vous devez avoir suivi la formation sur la création de la base de données MySql. Mais elle est elle aussi proposée dans le package à télécharger.

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

Comme vous le constatez, la décompression conduit au fichier de la page Web principale. Il est nommé index.php. Il correspond au formulaire d'identification tout à fait fonctionnel. Il est accompagné de ses pages annexes. Il s'agit du formulaire d'inscription et du formulaire de compte utilisateur.

Les sous dossiers offrent les ressources externes dont les scripts Javascript, pour les fonctions de contrôle de saisie, sur le formulaire d'inscription. Le sous dossier commun stocke toutes les portions communes de code Php, imbriquées les unes dans les autres, grâce à l'instruction Php Include. Nous ne revenons pas sur ces constructions que nous avons explicitées et démontrées en détail dans les deux formations précédentes.

Le sous dossier bdd offre la petite base de données bd_gestion des inscrits. Il convient donc de l'importer dans PhpMyAdmin si elle est manquante. Vous devrez créer le compte utilisateur disposant des privilèges d'accès pour le code PHP.

• Double cliquer sur le sous dossier commun pour l'ouvrir,
• Cliquer droit sur le fichier ouvrir.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad ++,

<?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 !!!");

$url_en_cours = $_SERVER['REQUEST_URI'];
...

Comme vous le remarquez, ces informations de connexion y sont révélées. Les trois paramètres de la fonction Php mysqli_connect sont dans l'ordre : le nom d'hôte, le nom d'utilisateur et le mot de passe associé. Il en résulte la chaine de connexion stockée sous le nom de variable liaison. Nous l'exploiterons pour exécuter nos requêtes.

Porter une variable de session
Nous proposons tout d'abord d'accéder au code précédent du formulaire d'identification.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

C'est le code de la section Php située en entête de page qui nous intéresse. <?php
include("commun/entete.php");

if(isset($_POST["identifiant"]) && $_POST["identifiant"]!="")
{
$_SESSION["utilisateur"]="";
$lid = $_POST["identifiant"];
$le_mp = $_POST["motPasse"];

$requete = "SELECT inscr_num FROM inscr WHERE inscr_mail='".$lid."' AND inscr_mp='".$le_mp."'";
$retours = mysqli_query($liaison, $requete);
$retour = mysqli_fetch_array($retours);

if($retour["inscr_num"]!="")
$_SESSION["utilisateur"] = $retour["inscr_num"];
}
?>

<script language="javascript" src="js/paire_id.js"></script>
...

Nous y notons le test réalisé pour la réception des données après la soumission du formulaire. La requête tente de récupérer les données sur cette paire transmise. Si elle retourne un résultat (if($retour["inscr_num"]!="")), nous initialisons la variable de session sur la valeur de la clé primaire restituée. C'est cette variable de session qui, comme nous l'avions démontré dans la construction, déverrouille l'accès aux informations de compte.

Nous proposons tout d'abord de vérifier que cette valeur est portable. Pour cela, nous devons commencer par accéder au code de la page concernée par notre développement. Il s'agit du formulaire des informations personnelles de compte.

• A la racine du dossier de décompression, cliquer droit sur le fichier compte.php,
• Dans le menu contextuel, choisir de l'ouvrir avec le Notepad ++,

En entête, vous notez la réplique du code Php ayant servi à l'insertion des données depuis le formulaire d'inscription. Nous devrons adapter ce dernier et notamment sa requête Sql. Il s'agira désormais d'une requête mise à jour, soit d'une requête Update. Son objectif n'est pas de créer un nouvel enregistrement. Elle doit mettre à jour les informations d'un enregistrement existant. Mais ce travail concerne la prochaine formation. Dans un premier temps, nous devons être en mesure de vérifier la portabilité de la variable de session.

• Passer en commentaire le code à l'intérieur de l'instruction conditionnelle,
• Puis, juste au-dessus, réaliser un test sur l'existence de la variable de session,

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

$inscr_num = "";
if(isset($_SESSION["utilisateur"]))
{
$inscr_num = $_SESSION["utilisateur"];
}

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);
*/
}
?>
...

Comme toujours, c'est la fonction Php isset qui permet de tester l'existence de la variable qui lui est passée en paramètre.

• Atteindre le calque d'identifiant message, plus bas dans le code de la page,

Le code que nous y trouvons consistait à confirmer ou infirmer le succès de l'inscription. Il ne concerne plus cette page de compte.

• Supprimer le code situé dans la section Php de cette balise,
• Le remplacer par le test suivant sur la variable de session,

...
<div id="message">
<?php
echo $inscr_num;
?>
</div>
...

Avant d'opérer et de constater les résultats, nous proposons de prendre quelques repères.

• Enregistrer les modifications et revenir sur l'interface d'EasyPhp,
• Cliquer sur le bouton Open du module MySql pour accéder à PhpMyAdmin,
• Dans le volet de gauche, déployer l'arborescence de la base de données bd_gestion jusqu'à afficher le contenu de sa table,

Pour un test concluant, nous choisissons d'agir sur l'utilisateur Arlette Hamalibou. Nous devons l'identifier avec la paire arlette@sfr.fr / 899123. Il doit en résulter la clé primaire 4 inscrite en variable de session et restituée sur la page de compte.

• Basculer sur le navigateur Web et accéder à la page d'identification,
• Saisir l'identifiant arlette@sfr.fr,
• Inscrire le mot de passe 899123 avec les boutons du pavé,

Comme vous le remarquez, le mot de passe est fort logiquement encodé.

• Cliquer sur le bouton Valider pour soumettre ces informations et procéder à l'identification,

Le PostBack a lieu en effet. L'accès aux informations de compte est toujours déverrouillé. L'utilisateur est donc bien reconnu. La requête Sql est un succès.

• En bas de page, cliquer sur la troisième icône, celle de droite,

Comme vous le remarquez, nous parvenons à restituer l'information de la clé primaire pour l'internaute identifié. Nous le suivons à la trace et sommes en mesure de lui proposer une navigation personnalisée. La variable de session demeure donc fort logiquement au fil de la navigation de l'internaute.

Récupérer les informations de base de données
Nous devons exploiter cette valeur en clause Where d'une requête SQL sélection. La correspondance doit être faite sur le champ inscr_num. L'objectif est de restituer toutes les informations liées à l'internaute authentifié.

• Revenir dans le code de la page compte.php,
• Dans la première instruction conditionnelle, sous l'affectation de la variable de session, ajouter les instructions suivantes :

...
$inscr_num = "";
if(isset($_SESSION["utilisateur"]))
{
$inscr_num = $_SESSION["utilisateur"];

$requete = "SELECT * FROM inscr WHERE inscr_num=".$inscr_num.";";
$retours = mysqli_query($liaison,$requete);
$retour = mysqli_fetch_array($retours);

if($retour["inscr_num"]!="")
{
$la_civilite = $retour["inscr_civilite"];
$le_nom = utf8_encode($retour["inscr_nom"]);
$le_prenom = utf8_encode($retour["inscr_prenom"]);
$la_naissance = $retour["inscr_date"];
$le_mail = $retour["inscr_mail"];
$le_mp = $retour["inscr_mp"];
}
}
...

Nous aurions d'ailleurs pu prélever les lignes que nous avions codées pour la page identification. Les adaptations sont en effet mineures.

La requête consiste donc à sélectionner tous les champs (*) de la table inscr (FROM inscr) pour lesquels la clé primaire (inscr_num) est égale à la valeur transmise dans l'état de session ($inscr_num). Comme il s'agit d'une donnée numérique, nous ne l'encadrons pas de simples côtes comme nous l'avions fait dans la clause Where de la formation précédente. Comme toujours, nous exécutons cette requête grâce à l'instruction Php mysqli_query. Nous lui passons la chaîne de connexion en premier paramètre et la requête en second.

Puis, nous exploitons la fonction Php mysqli_fetch_array. Cette dernière agit sur la variable ayant stocké les résultats de la requête sélection exécutée. Elle permet de découper les informations en tableau de variables, selon les noms de champs réceptionnés depuis la base de données. La variable retour ainsi affectée est donc transformée en tableau de variables à la volée. C'est ainsi que nous pouvons accéder à chaque champ après avoir vérifié que la requête a bien produit un résultat (if($retour["inscr_num"]!="")). Ce résultat correspond aux données de l'internaute identifié. Nous stockons toutes ses informations dans des variables respectives déclarées à la volée.

Dans le formulaire d'inscription, nous avions exploité la fonction Php Utf8_decode pour insérer les données en base de données. Nous étions ainsi en conformité avec le système d'encodage défini. Pour la restitution sur la page Web et la bonne interprétation des caractères latins, nous exploitons cette fois la fonction Php Utf8_encode. Seuls les champs accueillant potentiellement des accents sont traités.

Nous proposons de réaliser un essai avant de restituer ces informations dans les champs respectifs du formulaire.

• Atteindre le calque d'identifiant message et adapter son code comme suit :

...
<div id="message">
<?php if(isset($retour["inscr_num"]))
echo $la_civilite." - ".$le_nom." - ".$le_prenom." - ".$la_naissance." - ".$le_mail." - ".$le_mp;
?>
</div>
...

Bien entendu, nous commençons par tester l'existence des résultats de la requête sur l'un de ses champs. Puis, nous concaténons les informations dans une instruction Php echo pour les afficher en lieu et place.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page du formulaire de compte à l'aide de la touche F5 du clavier,

Comme vous le constatez, en témoigne le calque message, nous sommes bien parvenus à récupérer toutes les informations attachées au compte de l'utilisateur authentifié. Il s'agit maintenant de les placer aux bons endroits, soit dans les contrôles Html respectifs.

• Revenir dans l'éditeur de code de la page compte.php,
• Puis, passer en commentaire le code Php du calque message,

Il s'agit de réaliser des imbrications classiques de code dynamique Php dans le code statique Html. Pour les zones de saisie, soit les contrôles input de type text, c'est la propriété value qui nous intéresse. C'est elle qui permet d'affecter le contenu d'une zone de texte.

• Répliquer les adaptations notées en gras dans le code Html livré ci-dessous,

...
<div class="div_input_form">
<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" <?php if($la_civilite=="Madame"){ ?> selected <?php } ?>>Madame</option>
<option value="2" <?php if($la_civilite=="Monsieur"){ ?> selected <?php } ?>>Monsieur</option>
</select>
</div>
<div class="div_input_form">
<input type="text" name="nom" id="nom" maxlength="50" class="input_form" value='<?php echo $le_nom; ?>'... />
</div>
<div class="div_input_form">
<input type="text" name="prenom" id="prenom" maxlength="50" class="input_form" value='<?php echo $le_prenom; ?>'... />
</div>
<div class="div_input_form">
<input type="text" name="date_n" id="date_n" maxlength="50" class="input_form" value='<?php echo $la_naissance; ?>' ... />
</div>
<div class="div_input_form">
<input type="text" name="mail_inscr" id="mail_inscr" maxlength="150" class="input_form" value='<?php echo$le_mail; ?>'... />
</div>
<div class="div_input_form">
<input type="text" name="cmail_inscr" id="cmail_inscr" maxlength="150" class="input_form" value='<?php echo $le_mail; ?>' ... />
</div>
<div class="div_input_form">
Votre mot de passe : entre 5 et 10 chiffres<br />
<input type="password" name="mp_inscr" id="mp_inscr" maxlength="10" class="input_form" value="<?php echo $le_mp; ?>" ... />
</div>
<div class="div_input_form">
Confirmer le mot de passe :<br />
<input type="password" name="mp_conf" id="mp_conf" maxlength="10" class="input_form" value="<?php echo $le_mp; ?>" ... />
</div>
...

Les valeurs de chacun des champs deviennent donc dynamiques. Nous ne faisons pas de test avant insertion cette fois-ci. Nous partons du principe fort logique que si cette page est affichée, c'est que l'utilisateur est bien identifié. L'accès est en effet verrouillé le cas échéant. Vous avez noté la construction spécifique pour la liste déroulante. Elle consiste à ajouter dynamiquement l'attribut statique Html selected selon la valeur mémorisée dans la variable la_civilite. C'est ainsi qu'elle restituera automatiquement la bonne donnée à l'affichage.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page du formulaire de compte à l'aide de la touche F5,

Comme vous le constatez, nous avons franchi cette première étape avec succès. Toutes les informations attachées à l'internaute identifié, sont restituées dans les champs respectifs du formulaire. Dans la prochaine étape, il s'agira de permettre la modification de ces données pour la mise à jour des informations en base de données.



Si vous vous identifiez avec un autre compte et que vous affichez le formulaire des informations personnelles, vous constatez avec satisfaction, qu'elles lui sont attachées.