Affichage des données de formulaire en frontend à l'aide d'UP, plugin développé par lomart

Lors de mes fréquentations sur les forums de Crosstec, je tombe parfois sur des demandes particulières qui me donnent des idées. Aujourd'hui, j'ai envie de vous montrer une méthode d'affichage des données de formulaires inspirée d'un post sur ces sus-cités forums…

Niveau : Moyen
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4/5 : ✅

Je me suis dit que certains d'entre vous pourraient nécessiter ce type d'utilisation un jour ou l'autre et avant que j'oublie cette méthode (on ne rajeunit pas), je tenais à en rédiger l'article. Sait-on jamais…

Introduction

Nous avons déjà traité l'affichage des données de formulaire sur le frontend à l'aide de ContentBuilder, extension de Crosstec qui, étant en mesure de travailler avec BreezingForms, permet de créer des affichages avancés de données renseignées via un formulaire BreezingForms. Cette méthode permet également certaines interactions, à savoir l'affichage, l'édition des informations enregistrées, et ce, complètement géré par des permissions d'utilisateur. Pour plus d'informations, veuillez lire ce tutoriel.

Pour ceux qui ne nécessitent qu'un affichage des soumissions sans besoin d'édition, affichage conditionnel, etc., et que ces soumissions soient limitées à quelques champs, j'ai testé avec succès une solution alternative.

UP

UP est un plugin gratuit que son éditeur lomart qualifie de "Boîte à outil" (et il n'a pas tort), c'est-à-dire qu'il permet de très nombreuses actions dont vous pourrez trouver l'énumération et la documentation sur son site dédié.

UP propose une action nommée csv2table qui permet d'afficher le contenu d'un fichier .csv dans un article Joomla! à l'aide d'un "shortcode" dont chacun peut éditer les options. Pour cet exemple, j'irai au plus simple…

Contrainte

Tout ça semble bien simple une fois écrit, mais il y a une petite contrainte. Pour que UP puisse lire les données du formulaire BreezingForms depuis un fichier CSV, il faut que ce dit formulaire y écrive les données soumises.

Eh bien, BreezingForms étant un générateur avancé de formulaires, il permet l'insertion de scripts PHP et celui que nous allons lui intégrer dans cet exemple permettra justement l'écriture des valeurs soumises dans un fichier de ce type.

Création du formulaire

Pour cet exemple, créez un formulaire simple, nommez-le et ajoutez-y une page avec trois champs de type Champ texte :

1. Libellé = Nom / Nom = nom
2. Libellé = Code postal / Nom = cp
3. Libellé = Ville / Nom = ville

Rendez ces champs Requis et renseignez leur un message d'erreur en cas d'absence de renseignement. Enregistrez le formulaire.

Insertion du code PHP

Vous devez maintenant insérer le code PHP qui permettra la création du fichier data.csv s'il n'existe pas et d'y écrire les données soumises par le formulaire.

Dans le formulaire :

1. Activez l'onglet Avancé puis cliquez le bouton Plus d'options et enfin, activez l'onglet Envoyer des pièces.
2. Dans la partie Début de soumission, cliquez le bouton Personnalisé et dans la zone d'édition qui s'ouvre, insérez le code suivant :

   $this->execPieceByName("ff_InitLib"); // Initialise la bibliothèque BreezingForms
   
   $file = "includes/data.csv"; // On enregistre le chemin du fichier dans une variable (choisissez l'emplacement de votre fichier et adaptez le chemin relatif)
   
   $current = file_get_contents($file); // Ouvre le fichier s'il existe et lit le contenu
   
   // Ci-après, on enregistre les valeurs des champs de formulaire dans des variables
   $data1 = ff_getSubmit("nom");
   $data2 = ff_getSubmit("cp");
   $data3 = ff_getSubmit("ville");
   
   $current .=  "\n" .$data1 . ";" . $data2 . ";" . $data3; // formate les données, séparées par un ; dans la variable $current en débutant par un retour à la ligne
   
   file_put_contents($file, $current); // écrit les données dans le fichier

3. Enregistrez et sortez de l'édition pour revenir sur le formulaire
4. Enregistrez ce dernier une nouvelle fois.

Préparation du fichier "data.csv"

Selon l'exemple de ce tutoriel, dans le dossier includes de votre installation de Joomla, créer un fichier txt dans lequel vous insérez vos en-têtes de tableau, séparées par un point-virgule, comme ceci : Nom;Code postal;Ville
Enregistrez-le sous data.csv.

Préparation de l'article qui recevra les données

Créer un nouvel article Joomla!, paramétrez-le comme vous le désirez et ajoutez-y votre contenu.

Dans le corps de l'article, à l'emplacement où vous le souhaitez, vous insérez le code UP qui chargera les informations du fichier data.csv. Vous pouvez vous documenter sur le site de UP dont l'URL se trouve renseignée en début d'article. Pour cet exemple, je resterai simple… J'insère donc le code suivant dans l'article :
{up csv2table=includes/data.csv}
Nous devons également indiquer à UP de considérer la première ligne du fichier comme en-tête du tableau, corrigez le code précédent comme suit :
{up csv2table=includes/data.csv | header=Nom;Code postal;Ville}

Vérification

Enregistrez votre article, ouvrez votre page de formulaire et saisissez des informations puis validez. Rendez-vous sur votre article pour voir un tableau avec votre première entrée de formulaire affichée. Tout s'y trouve ? Vous avez réussi votre examen.

Test

Vous pouvez tester le formulaire ci-dessous, les informations seront enregistrées et affichées dans le tableau sous le formulaire.

Renseignez les 3 champs et validez. Les données sont écrites dans le fichier et la page est rechargée. Scrollez vers le bas pour voir votre soumission.
Bien que ces données ne soient pas enregistrées dans la base de données du site, elles le sont dans le fichier et sont affichées pour un maximum de 24 heures et ensuite effacées, n'hésitez pas à tester le formulaire avec des informations anonymes.