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 : Oui

 

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 "couteau suisse" (et il n'a pas tord), 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.

Et bien BreezingForms étant un générateur avancé de formuliares, il permet l'insersion 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

bfToTxtToUp 01bfToTxtToUp 02

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 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.

NomCode postalVille
Exemple 112345BreezingForms City
Le fichier sera remis à zéro dans
 heures
 minutes
 secondes

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

Les commentaires sont réservés aux membres enregistrés. Si vous êtes membre, veuillez vous connecter sinon, n'hésitez pas à vous enregistrer !

Considérez un don!

Vous avez trouvé des réponses à vos questions, les tutoriels disponibles vous ont aidé à monter votre formulaire et vous souhaitez m'être reconnaissant pour le contenu attractif de ces pages ?

paypal btn

Via PayPal ou Stripe.

Vos dons m'aident à maintenir le site et à vous proposer encore plus de tutoriels pour vous aider encore d'avantage.

x