Données des formulaires - Enregistrer, visualiser, exporter 

Ce tuto est encore en construction !!

Pour compléter le tuto consacré à la mise en place d'un formulaire, nous allons voir à présent comment stocker les données reçues par formulaire et les visualiser. Effectivement, il est souvent utile de conserver les informations que les visiteurs vous ont fournies.

Je rajouterai également une petite partie consacrée à la création d'un fichier .txt pour exporter les données vers une autre application.

Pour cela, nous allons utiliser deux modules : FormBrowser + FormBuilder. Assurez-vous en conséquence d'avoir téléchargé et installé ces deux modules avant de commencer.

Stocker les données du formulaire

1. Tout d'abord, nous allons rajouter une fonction à notre formulaire afin que les données soient stockées dans la base de données. Je vous rappelle qu'à l'installation de CMS Made Simple, une base de données SQL a été créée. Nous allons donc rajouter une fonction pour que les données soient enregistrées dans une table de cette base de données. Rassurez-vous, ça se fait en un click, aucun besoin de parler le SQLien !

On reprend notre formulaire, enfin celui dont nous voulons enregistrer les données. Soit menu Extentions→Form Builder, on clique sur le formulaire qui nous intéresse. Sous le tableau récapitulatif :

On va cliquer en bas à gauche sur "Add New Field".

2. Dans la nouvelle fenêtre, sous le champ Field Name, on donne un nom au champ, par exemple "Enregistrement", "Storage". N'utilisez pas d'accent !

3. Dans le champ du dessous, intitulé Field Type, choisir dans la liste déroulante "*Store results in Database". Vous devriez obtenir cela :

4. Cliquez sur Add, vous voyez à présent dans le tableau récapitulatif apparaître ce nouveau champ.

5. Voilà c'est tout, à présent, toutes les données qui seront fournies par vos visiteurs seront enregistrées dans une table de la base de données. Normalement, la table concernée se nomme "cms_module_fb_resp_val". Vous pouvez y accéder via PHPmyAdmin par exemple.

Visualiser les données du formulaire

Vous allez me dire, c'est bien joli tout ça mais n'y a-t-il un moyen plus sexy pour visualiser mes données ? Oui oui bien sûr, vous pouvez même permettre à vos visiteurs de les visualiser si cela vous chante. Pour cela nous allons utiliser FormBrowser !

N'utilisez FormBrowser qu'une fois votre formulaire terminé et prêt à être utilisé. Si vous modifier votre formulaire, détruisez le browser qui lui est associé et recommencez la manipulation. C'est ce qui ressort des tests que j'ai effectués et des topics des forums.

Faites ATTENTION également, si vous désirez être le seul à visualiser les données, vous devez protéger la page sur laquelle elles apparaîtront. Je ne traite pas de cet aspect dans ce tuto, il fera l'objet d'un des prochains tutoriels que vous trouverez sur ce blog. Je vous conseille, si vous n'avez pas encore exploré cette fonction, de créer simplement une nouvelle page qui n'apparaîtra pas dans le menu (voir le tuto "Ajout de contenu") pour tester FormBrowser.

Allez, après ces recommandations, allons-y !

1. Assurez que votre formulaire correspond bien à vos besoins, qu'il est inséré dans une page et évidemment qu'il contient un champ d'enregistrement des données (voir plus haut). En effet, si vous voulez tester l'enregistrement et la visualisation, il vaut mieux que le formulaire soit utilisable !

2. Menu Contenu -> Form Browser. Cliquez sur "Add new FormBrowser".

2. Dans l'onglet FormBrowser, le premier, on va compléter les champs.

Le premier champ "Browser Name" : indiquez un nom pour celui-ci.
Le deuxième champ "Browser Alias" : indiquez un alias.
Le troisième champ "CSS class for Browser" : il est déjà rempli, vous pouvez le laisser par défaut ainsi et y revenir plus tard si cela vous est utile.
Le quatrième champ : "Form to Browse" : choisissez dans la liste déroulante le formulaire dont vous désirez visualiser les données.

Cliquez ensuite sur "Add Browser". Une nouvelle fenêtre apparaît :

Vous voyez que tous les champs de votre formulaire apparaissent maintenant sous la colonne "Field Name" (la première) et que vous pouvez choisir l'ordre d'affichage de vos champs à l'aide des listes déroulantes en face de chaque champ. Attention, la numérotation commence effectivement à 0 ! Si vous ne voulez pas faire apparaître un champ, choisissez dans la liste déroulante "Do not display".

Là je vous laisse vous amuser un peu. Ne vous inquiétez pas, de toute manière, vous pourrez venir modifier ces paramètres plus tard.

3. Explorez également les autres onglets que je ne vais pas traiter ici. Je compléterai si besoin et en fonction de vos remarques et commentaires.

Dans l'onglet "User side options", vous verrez que vous pouvez permettre à ceux qui visualiseront les pages d'éditer, ajouter et supprimer les enregistrements. Au vu des tests que j'ai effectués, la fonction "supprimer" fonctionne très bien. J'ai quelques problèmes avec "edit" et "add", je reviendrai dessus plus tard.

4. N'oubliez pas de sauver à chaque onglet !

5. Une fois les paramètres définis, il vous suffit d'indiquer dans le gabarit de la page où vous allez visualiser les données le tag faisant appel au browser que vous venez de créer, par exemple {cms_module module='FormBrowser' browser='visitor'}.

6. Pour tester, remplissez quelques fois votre formulaire pour créer des enregistrements dans la base de données et voyez le résultat !

Quelque chose comme ceci :

 Peut-être remarquerez-vous que les colonnes s'affichent plusieurs fois dans votre extrait de base de données. Dans ce cas, retournez dans FormBrowser et dans l'onglet "List Template", supprimer le code que j'ai surligné ci-dessous :

Cela devrait régler votre problème !

Exporter les données d'un formulaire

Maintenant, vous aimeriez exporter les données pour les utiliser dans une autre application, de type Excel, Access. FormBuilder permet la création d'un fichier plat de type text uniquement, d'après ce que j'ai pu constater.

La méthode la plus simple :

1. Menu Extentions -> FormBuilder. Cliquez sur le formulaire concerné. Assurez-vous que le champ "*Save Results in Database" est déjà créé. Si ce n'est pas le cas, suivez la procédure expliquée plus haut.

2. En bas à droite, Add New Field, remplissez les champs et choisissez comme type de champ dans la liste déroulante l'option "*Write Results to Flat File".

A présent, tous les données seront écrites dans un fichier de type texte, enregistré sous le répertoire "output" du module FormBuilder. Ce fichier est atteignable à l'adresse: /modules/FormBuilder/output/nomdufichier.txt.

 Le fichier texte ne se créé par automatiquement. Vous devez donc créer avec votre bloc-notes un fichier, l'enregistrer au format .txt et le placer dans le répertoire /modules/FormBrowser/output !

Vous pouvez modifier l'affichage de votre fichier en modifiant les templates dans l'onglet "Advanced Settings" du champ.

Il ne vous reste plus qu'à faire un lien sur le site (dans une page protégée bien sûr si vous ne voulez pas que tout le monde y ait accès) pour permettre le téléchargement du fichier plat. Celui-ci est ensuite facilement utilisable dans une autre application.