Aujourd'hui, nous allons voir comment j'ai réussi, malgré mon incompétence notoire dans le langage Javascript, mais grâce à l'aide apportée des membres du groupe Joomla! Lorraine Groupe sur Facebook, comment j'ai réussi dans un article Joomla, à intégrer un petit formulaire web dont l'unique but est de la manipulation de chaînes de caractères et le tout en Javascript uniquement, évitant un aller-retour serveur.

Problématique 

Le besoin que j'ai eu cette semaine et que je vous fais partager dans cet article, et très simple : dans le cadre de mes fonctions de documentaliste, nous avons établi avec ma hiérarchie, une manière de présenter à nos utilisateurs, les documents dont ils ont besoin. Cette présentation, je l'ai suggéré avec mes besoins de documentalistes mais aussi d'informaticien. Je m'explique :
Notre système d'information repose, dans certains cas, par une liaison RTC. Cette liaison RTC, comme son nom l'indique, ne permet pas facilement le transfert de gros documents. C'est la raison pour laquelle, sur la documentation que je gère, je dois spécifier entre autres les informations de poids du fichier dont l'utilisateur est susceptible de télécharger. Parmi les autres informations, que je peux qualifier de métadonnées, se trouvent aussi, hormis le poids, le nom de l'auteur du document et sa référence interne.
Comme tout bon informaticien de formation, j'aime à ce que mes données soient homogénes et présentées de manières uniforme. C'est la raison pour laquelle, nous avons convenu d'une présentation uniforme sous la forme de liste à puce.
Pour chacune des lignes d'un groupe de puces, nous avons quatre informations essentielles à délivrer à l'utilisateur. Il arrive toutefois que certaines d'entre elles nous soient inconnues, dans ce cas nous mentionnons l'absence d'information.
En effet, beaucoup de vieux documents ont été générés au format PDF, à une époque où les comptes utilisateurs de notre système d'exploitation de nos utilisateurs n'étaient pas nominatifs. Maintenant qu'il le sont, les logiciels de génération PDF vont récupérer dans le compte de l'OS le nom de l'uutilisateur. A l'époque, il y a 15 20 ans, voire plus, ce n'était pas toujours le cas. C'est la raison pour laquelle certains documents affichent comme nom d'utilisateur une chaîne vide. Ou pire, le nom de la machine.
Quoi qu'il en soit, nous devons spécifier cette information même si elle paraît absurde. Bien entendu, mentionner cette donnée permet, dans le cas où l'utilisateur souhaite une information complémentaire, de contacter directement la personne si elle est toujours présente dans notre structure.

Implémentation de la fonctionnalité

Je ne m'en suis jamais caché, je suis une véritable buse dans le langage JavaScript.
Et comme je l'ai déjà dit ici je n'aime pas ce langage, bien que je reconnaisse qu'il soit parfois non inintéressant.
Comme cette fonctionnalité repose sur affichage d'un formulaire, en mode code (dans l'editeur WYSIWYG de Joomla), j'ai écrit mon formulaire HTML présentant à l'utilisateur les informations que je souhaite qu'il renseigne. Pour information, le principal utilisateur de cette fonctionnalité, c'est moi.
Voici donc une copie d'écran du formulaire que je vais avoir à renseigner :
 
Javascrpt dans un article Joomla
 

Intégration dans ma template Joomla protostar

Une fois mon code écrit dans un fichier html pur et dur, comme le cœur même javascript est intégré dans une fonction que j'ai écrite, ceci de manière volontaire, je suis allé récupérer le contenu de cette fonction, et je l'ai collée dans la partie JavaScript de mon Joomla.
 
firefox yRxIhoAHt5
 
Ainsi, nous retrouvons cette fonction dans le fichier de la template qui a pour rôle des gérer ces fonctionnalités JavaScript. Dans mon cas, pour trouver le nom de ce fichier, je suis allé voir une source du HTML d'une page de mon site, pour voir dans les en-têtes (balise <head>)si un fichier à l'extension Js était appelé à un endroit particulier. Et comme ma template protostar est relativement bien faite, j'ai trouvé des appels à des fichiers externes JavaScript déjà présents.
J'ai donc édité mon fichier index.php, et j'ai dupliquié une ligne qui fait appel à à un fichier js externe. Une fois avoir enregistré ma personnalisation de ma template, je me suis rendu dans la création d'un nouvel article dans la console d'administration de Joomla, afin de coller le code que j'avais écrit sur une page html pure et dur dans un environnement totalement étanche à Joomla.
firefox 5q2sHhpW3B
 
Ainsi, j'ai collé mon code directement dans un article. Jj'aurais pu bien entendu le coller dans un module de manière à le réutiliser ultérieurement. Il se trouve que je n'en aurai pas besoin. Comme ce code est uniquement destiné au gestionnaire du site, j'ai donc affecté cet article à un accès administrateur uniquement.
Une fois l'article créé et surtout enregistré, je suis retourné dans le front office de Joomla et j'ai effectué mes tests de fonctionnement.
 
Et bien entendu, tout fonctionnait.

Mon Github

slhuilli1's GitHub repositories