Interaction formulaires React & CakePHP

Objectif & besoins

L’idée ici est que, lorsqu’un utilisateur modifie ces champs dans l’un des formulaires, les données soient automatiquement mises à jour dans l’autre. Cette synchronisation vise à garantir une meilleure cohérence entre les deux interfaces. Je travaillerai aussi sur l’amélioration de l’affichage de ces champs dans le formulaire CakePHP. Actuellement séparés par des points-virgules, je proposerai une version plus lisible : chaque entrée sur une ligne ou présentée sous forme de bulle avec une croix de suppression.


L’objectif était de permettre à la cliente d’avoir plusieurs moyens de contacter un fournisseur, surtout si celui-ci dispose de plusieurs adresses mail ou numéros professionnels.


Le formulaire React est destiné à la cliente, lorsqu'elle remplie de son côté le formulaire pour rajouter le fournisseurs sur son site, et le formulaire côté PHP est destiné aux fournisseurs qui eux pourront modifier ou supprimer certaines informations. D'où la nécessité de synchroniser les 2 formulaires et leurs champs.


Rajouter les champs dans le formulaire en CakePHP

Avant de commencer, il a fallut bien parcourir l'arborescence pour trouver tout les fichiers à modifier. Pour rajouter les champs dans le formulaires cakePHP, j'ai modifié le fichier supplier_edit.php.
J'ai également rajouter un petit message pour informer l'utilisateur des possibilités multiples.

Ici nous avons ajouté volontairement un champs visible et invisble,nous verrons à l'étape 3 pourquoi.


Assurer la synchronisation entre les 2 formulaires avec les nouveaux champs

Pour assurer la synchronisation entre le formulaire et les données stockées, on a ajouté dans le formulaire CakePHP des champs cachés portant les noms reconnus par le backend au moment de la soumission. Par exemple : dahan_emails_compl et dahan_phones_compl.
Ces champs servent à stocker les données au bon format pour les envoyer côté serveur (avec des ;). C’est dans le fichier SuppliersListener qu’on a ensuite précisé que ces champs devaient être exportés, c’est-à-dire pris en compte lors de l’enregistrement ou de la mise à jour des données du formulaire.



Du côté du formulaire React, chaque champ correspond à ces noms (ex. name="dahan_phones_compl"), ce qui permet une correspondance directe avec les champs cachés côté PHP. Ainsi, lors d’un enregistrement depuis React, les données sont bien enregistrées en base sous les bons noms — et inversement, lors d’un affichage depuis CakePHP, les valeurs stockées sont injectées dans les champs cachés.
Le code se trouve dans le fichier SupplierCustomView.



C’est ensuite le JavaScript qui vient lire les valeurs de ces champs cachés (souvent séparées par des points-virgules), pour les afficher à l’utilisateur sous forme de bulles dans un champ visible et interactif. Toute modification côté utilisateur est de nouveau retranscrite dans les champs cachés, assurant une synchronisation complète dans les deux sens.



Donc ici pour cette tâche je me suis essentiellement concentrée sur le formulaire CakePHP, l'enregistrement des données côté React avait déjà était fait, j'ai simplement rajouter a syncrinisation et la gestion du côté php.

Modifier la mise en forme des données multiples.

Pour jouer sur la partie design des infos multiples, il a fallut rajouter du css au sein d'une balise "<"style">", directement dans le fichier supplier_edit.php.





Résultats final de l'affichage



Le champs caché ici dans le formulaire permet donc d'enregistrer les données pour les envoyer au serveur, et le champs input visible lui, se concentre surtout sur l'UX et la possibilité de séparer les infos