[Fabrik] Utilisation de formulaires personnalisés dans Joomla

Joomla est un Système de Gestion de Contenu ou SGC (CMS pour Content Management System en anglais) très puissant qui bénéficie de très nombreuses fonctionnalités grâce à l'apport de modules. Il en est un qui est particulièrement puissant pour créer des formulaires en ligne : il s'agit de Fabrik.

Site officiel : https://fabrikar.com/

Autre site traitant de Fabrik : https://hg-map.fr/astuces/38-astuces-fabrik?showall=1

Remarque : Ce site personnel tourne aussi sous Joomla même si je n'ai pas besoin de beaucoup de fonctionnalités car il n'y a pas d'interactions avec d'autres membres.

Voici un exemple d'utilisation détaillant la conception d'un formulaire permettant à des écoles de saisir des données dans le cadre d'un projet départemental USEP.

I- Contexte et besoins :

• Des classes volontaires d'un département participent à un projet USEP pour lequel chacune d'elle devra faire remonter la distance totale parcourue par leurs élèves lors d'une séance finale clôturant tout un travail sur la course de durée. L'objectif est de cumuler toutes les distances pour au moins "faire le tour du monde" soit 40.000 km.
• Cette remontée se fera à travers un formulaire de saisie accessible sur le site Internet départemental de l'USEP 11 tournant sous Joomla. Pour ne pas compliquer les choses, la saisie pourra se faire sans avoir à s'inscrire sur le site (à approfondir cependant ...) mais via un formulaire indirect pour éviter que n'importe qui puisse intervenir (mais ça sera toujours possible avec possibilité d'actes malveillants... c'est la contre-partie de l'accès facilité).
• Il faut donc que l'on puisse additionner toutes les distances saisies par les classes pour connaître le kilométrage global réalisé dans le cadre de ce projet. Il faut aussi que la distance globale s'affiche de façon dynamique, c'est-à-dire qu'à chaque nouvelle saisie, cette information soit automatiquement mise à jour (pour éventuellement dire où on en est, où est-ce qu'on se trouve sur la Terre...).

II- Choix de Fabrik :

• Il existe d'autres CCK (pour Content Construction Kit) comme les modules FlexiContent, SEBLOD permettant de créer des formulaires mais comme je connaissais déjà Fabrik que j'avais déjà utilisé pour des inscriptions à une AG en ligne, je n'ai pas voulu repartir sur un nouvel outil.
• Fabrik est très très puissant (avec de nombreux plugins) et personnalisable mais la contrepartie est qu'il est difficile à maîtriser surtout si l'on veut proposer fonctionnalités avancées.
• Fabrik fonctionne avec des listes qui correspondent aux tables des bases de données. Chaque champ correspond à un élément. Ces listes sont peuplées via des formulaires. Les formulaires ne permettent que de faire des saisies. Si on veut visualiser les données, on ira voir les listes.
   

III- Formulaire de saisie :

• Pour bien séparer les données, j'ai créé une nouvelle base de données sur l'hébergement avec phpMyAdmin intitulée "usep11_course-monde" ainsi qu'un utilisateur dédié.
  Je l'ai ensuite renseignée dans Fabrik et testé la connexion :
   
  
   
• Le formulaire doit être accessible à tout le monde pour ajouter des données, il faut donc un niveau d'accès "Public" pour ajouter des données.
• Comme le département compte 350 écoles publiques sur 7 circonscriptions, pour faciliter la saisie, les utilisateur⋅rice⋅s devront d'abord renseigner la circonscription, ce qui aura pour effet de restreindre le nombre d'écoles affichées.
  On va donc créer une liste "Circonscriptions" avec une clé primaire internalid "circo_id" et un champ "circo_nom" :
   
  
  
  
  Remarque : le champ "date-time" étant imposé à la création en internalid, on va le modifier en champ "jdate" afin d'avoir les dates et heures d'enregistrement en agissant sur les paramètres par défaut dans l'onglet "Date Formats" (voir la capture ci-contre).
  On choisira un format "d-m-Y H:i:s".
  On mettra par défaut la date du jour dans les 2 champs "Default to current date" et "Always return today's date".
  
  Tout ceci sera utile par la suite pour obtenir dans un champ calculé, la date et l'heure du dernier enregistrement qu'on pourra afficher dans le compteur.
  
  
   
• On va importer un fichier .csv pour créer une liste "Listes des écoles" avec là aussi une clé primaire internalid "ecole_id", son nom complet, son UAI, ... ainsi que, et c'est essentiel, un champ "circo_id" correspondant aux valeurs "circo_id" de la table "circonscriptions" :
  
  
   
• On crée une 3e liste (c'est elle qui est au coeur du processus) qui contiendra les saisies des différentes classes avec un élément "circo" de type "databasejoin" et alimenté par la liste "circonscriptions" pour que les utilisateur⋅rice⋅s aient une liste déroulante avec les 7 circonscriptions. Il y a aussi 2 éléments "cascadingdropdown" permettant de n'afficher les données qu'en fonction de la circo et de l'école choisies (je détaillerai plus bas) :
  
  
   
• Au final, nous avons les 3 listes suivantes :
  
  
   

IV- Paramétrage des différents éléments du formulaire de saisie :

A - Les listes déroulantes

• Élément "circo" qui affiche une liste déroulante pour choisir la circonscription, basé sur le plugin "databasejoin" :
   
   
• Élément "ecole" qui n'affiche que les écoles qui sont dans la circo choisie, basé sur le plugin "cascadingdropdown" :
  
  
   Et dans l'onglet "Surveiller" :
  
   
• Élément "courriel_ecole" qui affiche le courriel de l'école choisie, basé sur le plugin "cascadingdropdown" :
  
  
   Et dans l'onglet "Surveiller" :
  
  
   

B - Les champs calculés

Ces champs calculés sont utiles pour l'envoi de leurs informations dans les courriels de notification mais aussi pour le compteur final a implémenter dans un article ou un module spécial sur la page d'accueil (voir plus tard).

• Élément "km_somme" pour totaliser les distances et le nombre de coureurs, basé sur le plugin "calc" et en allant dans l'onglet "Plus" :
   
  
   En mettant dans la zone de calcul cette expression (le 3 dans la 1ère ligne correspond à l'ID de connexion à la base de données dans Fabrik) :

  $db=FabrikWorker::getDbo(false,3);
  $db->setQuery("SELECT SUM(km_nb) FROM saisies_classes");
  $a=$db->loadResult();
  return $a;

   On indique aussi dans le paramètre "Calculer au chargement" : Oui
  
  
  Dans l'onglet "Accès" de l'élément, on choisit "Enregistrer dans la base de données" :
  
  

• On fait la même chose pour l'élément "nb_coureurs_somme", ce qui permettra d'afficher le nombre total de coureur⋅euse⋅s avec le code PHP suivant :
  

  $db=FabrikWorker::getDbo(false,3);
  $db->setQuery("SELECT SUM(nb_coureurs) FROM saisies_classes");
  $a=$db->loadResult();
  return $a;

•  Même principe pour l'élément "nb_classes_somme", ce qui permettra d'afficher le nombre total de classes avec le code PHP suivant :
  

  $db=FabrikWorker::getDbo(false,3);
  $db->setQuery("SELECT COUNT(classe) FROM saisies_classes");
  $a=$db->loadResult();
  return $a;

• Même principe pour l'élément "nb_écoles_somme", ce qui permettra d'afficher le nombre total d'écoles (une école pouvant avoir plusieurs classes participantes) avec le code PHP suivant :
  

  $db=FabrikWorker::getDbo(false,3);
  $db->setQuery("SELECT COUNT(DISTINCT ecole) FROM saisies_classes");
  $a=$db->loadResult();
  return $a;

• Pour l'afficher dans le compteur, on crée aussi un champ calculé "date_dernier_ajout" qui contiendra la date et l'heure du dernier enregistrement en se basant sur l'élément "date_time". Voilà le code que l'ai utilisé :
  

  //Récupération de la date et de l'heure pour la mettre en forme
  $MomentDernierAjout='{saisies_classes___date_time}';
  $DateDernierAjout=date("d-m-Y",strtotime($MomentDernierAjout));
  $HeureDernierAjout=date("H:i:s",strtotime($MomentDernierAjout));
  $MomentDernierAjout= $DateDernierAjout .' à '. $HeureDernierAjout;
  //var_dump($MomentDernierAjout);
  //exit;
  
  //Mise à jour de tous les enregistrements existants de la base de données
  $myDb = FabrikWorker::getDbo(false,3);
  $myQuery = $myDb->getQuery(true);
  $myQuery->update('saisies_classes')->set('date_dernier_ajout = "' . $MomentDernierAjout.'"');
  $myDb->setQuery($myQuery);
  $myDb->execute();
  
  //Écriture de la variable dans cet enregistrement
  $a=$MomentDernierAjout;
  return $a;

 Remarque : les 2 lignes commentées dans le code ci-dessus (elles commencent par "//" pour les ignorer) sont des lignes de débogages qui m'ont permis de contrôler le contenu de la variable $MomentDernierAjout.

C - Éléments en lien avec le courriel personnel

• L'élément "notif_courriel" est basé sur le plugin "yesno" qui affiche 2 boutons radio Oui-Non. Par défaut, cet élément est sur "Non". Cet élément permet d'afficher le champ "courriel_perso" mais aussi d'envoyer un courriel de notification (voir partie D suivante).
  
   Si on choisit "Oui" pour ce champ, cela permettra d'afficher le champ "courriel-perso" par le biais de règles Javascript. On se place donc sur l'onglet Javascript à gauche.
  
  
  Ici on a 3 règles JavaScript :
  - une "on load" pour le chargement du formulaire qui cache l'élément "courriel_perso" car par défaut "notif_courriel" est sur "Non" ("notif_courriel" != "1").
  - une "on click" quand on clique sur sur "Oui" ("notif_courriel" == "1") pour afficher l'élément "courriel_perso".
  - une "on click" quand on on clique sur "Non" ("notif_courriel" != "1") pour masquer l'élément "courriel_perso".
  
  
• L'élément "courriel_perso" permet de renseigner l'adresse de courriel de l'enseignant⋅e ayant rempli le formulaire afin de recevoir un courriel de confirmation. On va imposer que l'adresse de courriel soit en @ac-montpellier.fr. Pour cela on va sur l'onglet "Validations" à gauche et on choisit l'action "regex". Pour le paramètre "Valider caché" on met "Non" sinon on aura une erreur si le champ "courriel_perso" est caché :
   
    
  Plus bas, on saisit cette règle dans le champ "Expression régulière" (ne pas oublier au début et à la fin le signe / ):
  

  /^[a-zA-Z0-9]+([-._]?[a-z0-9]+)*@ac\-montpellier\.fr$/

D - Envoi automatique de courriels après enregistrement de la saisie

Lorsqu'on enregistre le formulaire, on va envoyer automatiquement des courriels pour informer différentes personnes de cette nouvelle saisie. Pour cela, on va éditer le formulaire et aller sur l'onglet "Plug-ins" dans lequel on utilisera 2 fois le plugin "email" :
 

• On ajoute le plugin "email" pour l'envoi de courriel lorsqu'on enregistre un formulaire au responsable ainsi qu'à l'école :
  
  
  
  
• Dans l'onglet "To", on indique les adresses des personnes qui recevront systématiquement le courriel.
  On a aussi rajouté le placeholder faisant référence au champ du courriel de l'école "{saisies_classes___courriel_ecole}" pour que le courriel soit aussi envoyé à l'école.
  
  
• On se place dans l'onglet "Options" où on indique :
  - l'expéditeur,
  - l'objet du courriel dans lequel on peut utiliser des placeholders pour savoir quelle école est concernée "{saisies_classes___ecole}" et le nombre de km courus "{saisies_classes___km_nb}"
  - on indique l'article servant de modèle au courriel et contenant lui aussi les placeholders avec les renseignements saisis (voir ci-dessous).
  - NE PAS OUBLIER de mettre dans le champ "Message Text", le placeholder {content}.

•  Exemple du contenu du modèle d'article (auquel on peut adjoindre des images aussi) :
  

  Une saisie pour le projet USEP "Courir autour du monde" vient d'être réalisée.
  École : {saisies_classes___ecole}
  Classe : {saisies_classes___classe}
  Circo : {saisies_classes___circo}
  Courriel perso enseignant⋅e : {saisies_classes___courriel_perso}
  Date de la course : {saisies_classes___date_course}
  Nombre de coureur⋅euse⋅s : {saisies_classes___nb_coureurs}
  Nombre de km validés : {saisies_classes___km_nb}
  
  Statistiques globales après cette dernière saisie :
  {saisies_classes___km_somme} validés par
  {saisies_classes___nb_coureurs_somme} coureur⋅euse⋅s
  de {saisies_classes___nb_classes_somme} classes
  dans {saisies_classes___nb_ecoles_somme} écoles.
  
  Info pour les responsables USEP uniquement :
  Pour voir ou corriger la saisie si nécessaire, cliquer sur ce lien {fabrik_editlink}
  ou aller à l'adresse suivante {fabrik_editurl}.

• Le 2e plugin "email" sera envoyé conditionnellement en fonction de l'élément "notif_courriel". Tous les réglages seront identiques en dehors de l'adresse à laquelle envoyer le courriel "{saisies_classes___courriel_perso}" ainsi que la condition validant l'envoi ou pas de ce courriel :
  

  return '{saisies_classes___notif_courriel_raw}' == 1;

• REMARQUE : Il est tout à fait possible de créer d'autres notifications courriels conditionnelles qui seront envoyées spécifiquement aux conseiller⋅ère⋅s pédagogique de chaque circonscription en fonction justement de l'appartenance de la classe à une école de la circonscription.
  Par exemple pour envoyer un courriel à la CPC de la circonscription de Lézignan, on mettra cette condition où l'ID de la circo de Lézignan vaut 4 :
  

  return '{saisies_classes___circo_raw}' == 4;

   

V- L'affichage de la liste :

Il est possible d'afficher la liste des saisies ainsi que des totaux comme le nombre de saisies, la somme des kilomètres parcourus, la moyenne etc... Contrairement aux champs calculés (voir plus haut), ces calculs ne sont pas récupérables. Ils restent cependant intéressants.

•  Pour chaque élément (ou champ), il est possible d'afficher au bas de la liste différents calculs. Pour cela, il faut éditer l'élément et aller dans la partie à gauche "Paramètres de la vue de liste", onglet "Calculs" et activer et renommer les calculs qui nous intéressent :
  
  
• Il est aussi possible de fractionner les calculs (par circonscription par exemple).
• Une des fonctionnalités intéressantes est aussi de filtrer rapidement les données.
• Il est aussi possible de modifier la largeur des colonnes, l'alignement du texte en agissant sur le CSS :
  
   

VI- Intégrer des données dans un article ou un module :

Sources : https://hg-map.fr/astuces/38-astuces-php-sur-le-cck-fabrik?start=1
http://fabrikar.com/forums/index.php?wiki/content-plugin/#embedding-lists

Pour afficher les résultats en temps réel, j'ai créée un module de contenu personnalisé (mod_custom) sans oublier d'activer le plugin de contenus dans ses options. J'ai placé ce module dans une position en haut de la page d'accueil.
Remarque : s'il faut faire des modifications dans les CSS, il faut aller dans le dossier ".../templates/purity_iii/local/css" et modifier le fichier "template.css".

• Exemple de code pour afficher les statistiques (contenues sur le 1er enregistrement sinon il faudrait rajouter le paramètre "rowid=") :

{fabrik view=element list=3 element=saisies_classes___km_somme} parcourus par
{fabrik view=element list=3 element=saisies_classes___nb_coureurs_somme} coureurs et coureuses de
{fabrik view=element list=3 element=saisies_classes___nb_classes_somme} classes dans
{fabrik view=element list=3 element=saisies_classes___nb_ecoles_somme} écoles.

•  Code pour récupérer la date et l'heure de la dernière saisie (contenues sur le 1er enregistrement comme ci-dessus) :

Dernier ajout le {fabrik view=element list=3 element=saisies_classes___date_dernier_ajout}

 Ensuite j'ai mis en forme dans le module, toutes ces données dans un tableau, en rajoutant des liens hypertextes vers la liste :

Voici le résultat final :