Formulaire PHP de mise à jour des données

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 mise à jour en PHP

Dans cette formation, nous poursuivons les travaux initiés lors des formations précédentes. Nous avions réalisé l'insertion de données en base MySql par le biais d'un formulaire d'inscription. Nous avions permis l'authentification de l'internaute par le biais d'un formulaire d'identification sécurisé.

Depuis ce formulaire précisément, l'utilisateur saisit sa paire Identifiant/Mot de passe et la soumet au serveur, par clic sur un bouton. S'il elle est trouvée en base de données, le code Php ouvre un état de session et déverrouille les accès qui lui étaient refusés jusqu'alors. Dès lors il peut accéder à son formulaire de compte. Nous y avons débuté les travaux lors de la formation précédente. Nous avions prouvé la portabilité des variables de session durant la navigation. C'est l'une d'entre elles qui nous avait permis de restituer les informations de compte de l'utilisateur identifié, dans les champs du formulaire.

Sources et présentation de la problématique
Précisément depuis ce formulaire, nous devons désormais proposer à l'internaute de modifier et mettre à jour ses informations de compte. Il s'agit d'exécuter une requête Update sur la base de données MySql par le code PHP.



Une zone de texte vide a été ajoutée en bas à droite du formulaire. Nous l'exploiterons comme indicateur afin de réaliser les opérations de mises à jour seulement lorsque c'est nécessaire. Un utilisateur peut très bien accéder à son compte et cliquer sur le bouton Modifier, sans ne rien avoir changé. Dans ces conditions, le transfert ne doit pas avoir lieu. Et donc, la requête Sql ne doit pas être exécutée. Ainsi, le serveur n'est pas sollicité inutilement.

Désormais si l'internaute opère une modification dans l'un des champs, la mention Ok s'inscrit automatiquement dans cette petite zone de texte. Dans le cas contraire, elle reste vide. C'est cette indication qui doit nous autoriser à enclencher les actions côté serveur. Nous proposons de comprendre ce fonctionnement, au demeurant fort simple.

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

La décompression fournit de nombreuses sources accompagnées de ressources externes dans les sous dossiers. Le sous dossier bdd offre la petite base de données qu'il est nécessaire d'importer si vous n'avez pas suivi les formations précédentes. Il s'agira ensuite de configurer le compte utilisateur selon les informations contenues dans le fichier ouvrir.php, placé dans le sous dossier commun.

La page index.php fait référence au formulaire d'identification. La page compte.php est celle qui nous concerne pour le développement à suivre. C'est elle qui restitue les informations de compte, selon l'état de session créé depuis la page d'identification.

Comme nous l'avons appris au travers de la formation pour débuter la programmation en Php, ce projet doit être référencé dans l'interface d'EasyPhp. Pour cela, un nom doit lui être attribué. De même, l'adresse du dossier Windows doit être renseignée.

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

Dans le formulaire, à partir de la ligne 93 pour un éditeur Notepad, vous notez que chaque contrôle Html gère un évènement onChange.

<input type="text" name="nom" id="nom" maxlength="50" class="input_form" value='<?php echo $le_nom; ?>' onClick="saisie('Votre nom', this.id)" onMouseOut="retablir('Votre nom', this.id)" onblur="mev('Votrenom', this.id)" onChange="etat();"/>

Cet évènement est forcément détecté lorsqu'une modification est décelée dans la zone concernée. Et dans ce cas, nous appelons la fonction Javascript etat. Elle est inscrite un peu plus haut, à partir de la ligne 59 dans la section Javascript. Elle se contente de basculer l'indicateur d'état sur la mention Ok dans la petite zone de texte dédiée, d'identifiant atteste.

...
function etat()
{
document.getElementById("atteste").value = "ok";
}

</script>
...

Nous devons masquer cette zone de saisie. Elle est utile uniquement à des fins d'optimisation pour le développement.

• Atteindre la ligne 128 pour un éditeur Notepad,
• Ajouter l'attribut visibility réglé sur hidden dans le contrôle input d'identifiant atteste, grâce à sa propriété style,

...
<div class="div_input_form">
<input type="button" name="valid_inscr" id="valid_inscr" class="input_form" value="Modifier" onclick="envoyer()" />
</div>
<div class="div_input_form">
<input type="text" id="atteste" name="atteste" value="" style="width:100px; margin-right:10px; margin-top:10px; visibility:hidden;"/>
</div>
</form>
...

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Cliquer sur le lien du projet depuis EasyPhp pour accéder au formulaire d'identification,
• Taper l'identifiant tatouille@free.fr dans la première zone de saisie,
• Inscrire le mot de passe 122333 à l'aide des boutons chiffrés,
• Cliquer sur le bouton Valider pour identifier l'internaute,
• En pied de page, cliquer sur la troisième icône pour accéder au formulaire de compte,

Comme vous le constatez, le contrôle de test a disparu. Il est pourtant bien présent mais invisible. Et cet état n'empêche pas le code d'accéder à ses propriétés, comme celle de son contenu.

• Cliquer sur le bouton Modifier en bas à gauche du formulaire,

A ce stade en effet, rien n'empêche de soumettre les données bien qu'aucune modification n'ait été opérée. Le PostBack a été généré et donc les informations ont transité sur le serveur.

Certes le formulaire est conforme, rempli en bonne et due forme. Les fonctions Javascript de contrôles de validité en attestent. Nous devons donc ajouter une contrainte supplémentaire, sur le contenu de la zone d'identifiant atteste.

• Revenir dans le code de la page compte.php,
• Atteindre la fonction Javascript envoyer située en ligne 45 pour un éditeur Notepad,

...
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
{
document.getElementById("message").innerText = "Le formulaire n'est pas complet";
}
}
...

Comme vous le constatez, le formulaire est soumis (méthode Javascript submit) si et seulement si, toutes les zones de saisies ont été contrôlées et validées. Ce sont les variables booléennes retournées par le script externe qui en attestent.

• Dans la clause if de cette fonction, ajouter le critère suivant :

...
if(document.getElementById("atteste").value == "ok" && 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();
}
...

Désormais, bien que les données soient considérées comme conformes, si aucune modification n'est détectée, la soumission n'est pas déclenchée. Nous devons donc adapter le message destiné à l'internaute.

• Dans la branche else de l'instruction if, adapter le message de retour comme suit :

...
else
{
document.getElementById("message").innerText = "Le formulaire n'est pas complet ou aucune modification n'a été détectée";
}
...

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Recharger la page en validant sa barre d'adresse avec la touche Entrée,
• Puis, cliquer directement sur le bouton Modifier,

Comme vous le remarquez, plus aucune action n'est entreprise. Le chemin est barré par le code Javascript. Le serveur n'est pas sollicité inutilement. Le message destiné à l'internaute est suffisamment clair pour l'aiguiller.

• Modifier l'année de naissance 1984 en 1985 par exemple,
• Puis, cliquer sur le bouton Modifier,

Cette fois, un Postback est généré. Les données ont donc été transmises au serveur. Mais elles ne sont pas encore traitées à ce stade. En conséquence, la modification n'est pas prise en compte.

Réception côté serveur des données du formulaire
Puisque la maîtrise du transfert des informations est maintenant assurée, nous devons commencer par établir le code Php permettant de les réceptionner.

• Revenir dans le code de la page compte.php,

La mise à jour doit intervenir avant la restitution pour que les informations soient proposées avec les modifications réalisées.

• Dans la section Php en entête de code, couper (CTRL + X) l'instruction conditionnelle pour laquelle nous avions passé les lignes en commentaires,
• Coller ce bloc tout en haut, juste après l'instruction include,

Pour la réception, un test sur l'existence de l'une des données suffit en effet. Si l'une d'entre elles a été transmise, toutes l'ont été.

• Supprimer les commentaires à l'intérieur du bloc if précédemment collé,

Nous conservons donc le contrôle unique d'existence sur le champ d'attribut name : nom. Nous conservons les déclarations et affectations de variables. Souvenez-vous, la fonction Php addslashes permet d'ajouter un caractère d'échappement, l'antislash, devant chaque caractère problématique pour l'insertion en base de données. Il s'agit en l'occurrence de l'apostrophe qui est employée pour encadrer les informations textuelles dans les syntaxes. La fonction utf8_decode permet de caler l'encodage en conformité avec l'interclassement défini dans la base de données.

• Adapter la syntaxe de la requête Sql et ajouter l'instruction de retour, comme indiqué par les lignes en gras dans cet extrait de code :

<?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 = "UPDATE inscr SET inscr_civilite='".$la_civilite."', inscr_nom='".$le_nom."', inscr_prenom='".$le_prenom."'
,inscr_date='".$la_naissance."', inscr_mail='".$le_mail."', inscr_mp='".$le_mp."' WHERE inscr_num=".$_SESSION["utilisateur"].";";
$retours = mysqli_query($liaison, $requete) or die ("problème avc la requète ".$requete);
$modif = mysqli_affected_rows($liaison);
}

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

Il s'agit d'une syntaxe classique pour une requête de mise à jour telle que nous l'avons apprise avec Access notamment. C'est l'instruction UPDATE suivie du nom de la table qui permet de l'initier. Puis, après l'instruction SET suivent tous les champs énumérés pour lesquels il s'agit de réaliser les affectations sur les nouvelles valeurs. Les variables sont toutes encadrées de simples côtes dans la syntaxe concaténée. Tous les champs de la table sont en effet déclarés comme des Varchar. Il s'agit donc de textes. Il est très important de ne pas omettre la clause WHERE. Le cas échéant, tous les enregistrements de la table sont impactés. Nous devons agir sur l'enregistrement de l'utilisateur identifié. Il est reconnu par sa clé primaire portée par la variable de session. Nous l'exploitons donc pour l'égalité à vérifier dans la clause WHERE.

Ensuite, nous l'exécutons comme toujours grâce à la fonction Php mysqli_query. Nous lui passons la chaîne de connexion en premier paramètre. Cette dernière est initialisée dans le fichier ouvrir.php. Et celui-ci est imbriqué dans la construction des pages. Nous lui passons la syntaxe de la requête Update à exécuter en second paramètre. Nous utilisons ensuite une nouvelle fonction Php de base de données. Elle se nomme mysqli_affected_rows. Comme son nom l'indique, elle retourne le nombre d'enregistrements affectés par la mise à jour. Un seul doit être modifié. Elle doit donc retourner le chiffre 1.

Nous devons exploiter le résultat stocké dans la variable de retour $modif pour informer l'internaute en cas de succès. Il s'agit d'inscrire l'information dans le calque d'identifiant message. Mais celui-ci est réinitialisé par le code Javascript situé en bas de page. Ce traitement doit donc intervenir chronologiquement après.

• Dans la section inférieure du code Php, avant l'appel de la page pied.php, ajouter le code suivant :

...
</script>

<?php

if (isset($modif) && $modif==1)
?>
<script language="javascript" type="text/javascript">
document.getElementById("message").innerText = "Les modifications ont été opérées avec succès - Vous êtes à jour";
</script>

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

Il s'agit d'une imbrication classique de code dynamique serveur et de code statique Javascript. Lorsque le test est vérifié sur la variable de retour pour la requête, la main est passée à une instruction Javascript. Elle se charge d'inscrire l'indication de succès dans le calque d'identifiant message.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Recharger la page du formulaire Web en validant sa barre d'adresse par la touche Entrée,
• Modifier par exemple le prénom,
• Puis, valider ce changement en cliquant sur le bouton Modifier,

Ainsi, nous transmettons les données au serveur pour exécuter la requête de mise à jour.



Comme vous le constatez, le message de succès apparaît. Le formulaire devrait être vidé suite au PostBack. Mais nous avons conservé le code de la formation précédente, consistant à recharger les données de l'internaute, en fonction de sa clé primaire mémorisée dans la session. Et comme ces instructions interviennent après l'exécution de la requête de mise à jour, toutes les informations actualisées, sont chargées au dernier indice.

Si toutefois nous en doutions, nous pourrions consulter la table inscr de la base de données bd_gestion.

• Dans EasyPhp, cliquer sur le bouton Open pour ouvrir PhpMyAdmin,
• Dans le volet de gauche, déployer l'arborescence de la base de données et de sa table,

Pour l'enregistrement concerné, repéré par sa clé primaire, vous notez la présence de la modification désormais archivée. Nous avons donc bâti un formulaire capable de mettre à jour les informations de compte d'un utilisateur authentifié.