Je ne sais pas vous, mais je trouve que la recherche classique de notre CMS favoris ne retourne pas une présentation folichonne.
C'est la raison pour l'accueil j'ai dû, dans mon application professionnelle, modifier certains éléments pour présenter de manière plus sexy, les résultats de recherche retournés par joomia (Joomla content).
Dans cet article, je vous présente le résultat des travaux que j'ai entrepris sur la template dénommée protostar.
Pour effectuer cette personnalisation des résultats de recherche, je commence par hériter dans la termplate protostar, le composant com_search.
 
firefox P0fy9VO6V8
 
Désormais, si vous vous rendez dans votre répertoire de votre template, dans notre cas protostar, dans le sous répertoire template > protostar >  html > com_search, vous trouverez le fichier default_results.php.
explorer GU3wnreXv2
Vous l'aurez sans doute compris, c'est ce fichier qu'il faut hériter pour personnaliser l'affichage des résultats.
Vous le savez sûrement mais je tiens à lui rappeler, pour effectuer cet héritage, deux solutions s'offrent à vous :
  • soit vous vous rendez dans le répertoire présenté ci-dessus, en copiant com_search dans le répertoire de votre template,
  • soit vous utilisez l'option fournie par la console d'administration de Joomla afin de générer cet héritage. Désormais, si vous vous rendez dans votre sous répertoire du CMS, [dossier joomla]/template/[nom_de_votre_template]/html, vous allez retrouver un répertoire dénommé com_search. Et c'est dans les fichiers de ce répertoire que nous allons désormais travailler.
Désormais, ouvrons le fichier intitulé default_results.php. C'est effectivement ce fichier qui vous permet la présentation des résultats de recherche. Dans la version que j'utilise de Joomla, ce fichier contient certains commentaires vous permettant de comprendre ce qu'il se passe. Vous remarquerez 'ligne 16 par exemple que nous entrons dans une boucle qui permet de parcourir l'ensemble des résultats.
<?php foreach ($this->results as $result) : ?>
Dans cette boucle foreach, vous avez une classe qui vous permet d'identifier chacun des résultats. Je n'en dirai pas plus sur la partie technique, mais c'est à vous de voir ce qui se passe. Je ne peux que vous conseiller de commencer par faire, dans la boucle, un print_r de l'objet $result, c'est en effet dans cet objet que vous allez trouver l'ensemble des informations retournées par la classe générant les résultats.
Bien entendu, si vous n'avez pas bien analysé la documentation aupréalable concernant l'objet retourné, à savoir $this->results, je ne peux que vous encourager à simplement effectuer un print_r de ce résultat.
Vous avez donc désormais sous les yeux l'ensemble des résultats retournés par l'objet de recherche.
Sans rentrer trop dans les détails, vous pouvez vous rendre compte que chacun des objets retournés, sont "rangés" dans un tableau. Il vous est retourné un titre, un texte, une méta description, les données de type méta, la date de création, à quelle langue sont à attribués les résultats (Joomla est multilingue, ne l'oublions pas), la catégorie bien entendu, le texte, la section ou autrement dit à catégorie dans laquelle le résultat est rangé, et ce que Joomla appelle le slug c'est-à-dire la concaténation de l'id de l'objet suivi de l'alias de l'article, idem pour la catégorie, le texte de l'article, la référence de type href (c'est à dire le lien vers l'article) et enfin l'ensemble des champs personnalisés associés à cet article. La dernière propriété retournée étant le numéro d'ordre dans le tableau renvoyé.
un resultat de recherche
Maintenant que nous avons l'ensemble des résultats dans un tableau, il ne vous reste plus qu'à fabriquer, dans votre fichier que vous avez édité dans lequel nous avons fait notre print_r, une jolie présentation des résultats retournés.
afin d'afficher uniquement les résultats "complémentaires" que vous souhaitez voir afficher à votre page de recherche fournie par Joomla. Soyez créatif, rajoutez vos CSS et faites vous une jolie présentation personnalisée. Vous pouvez bien entendu, grâce aux objets du moteur Joomla, intégrer une nouvelle classe CSS afin de présenter votre page de recherche différemment.
En attendant le développement d'un plugin pour le CMS Joomla, sûrement à venir dans les semaines voires jours qui viennent, peut-être même aujourd'hui, et ce pour un besoin purement professionnel, j'ai cherché à comprendre comment dans un fichier PDF, était stockées les métadonnées. 
Sans vouloir offenser mes lecteurs, qui eux savent ce qu'est une métadonnées, je reviens rapidement sur la définition de ce terme. En informatique de manière générale mais aussi dans d'autres domaines, une métadonnée va regrouper un ensemble de données relatives non pas au contenu du document, mais à des données liées à son état, sa création, ses auteurs....
 D'après Wikipédia, une métadonnée est une donnée qui sert à définir ou à décrire une autre donnée, quel qu'en soit le support. Un exemple : associer à un fichier une date d'enregistrement ou une date de création, cette donnée n'est pas propre ou contenu du fichier, mais à l'objet fichier lui-même. C'est donc une métadonnée.
 
Dans le cas précis que j'ai à traiter, un fichier PDF permet la possibilité de sauvegarder quelques métadonnées. Parmi elles, on va retrouver :
  • la version du format PDF utilisé au cœur du fichier,
  • la date et l'heure de création du fichier,
  • l'auteur du fichier, 
  • le logiciel ayant généré le fichier PDF,
  • le sujet du fichier PDF,
  • la date et l'heure de dernière modification du fichier
  • un ensemble de termes associés au fichiers, que l'on pourrait associer à des vedettes matières
  • un titre du fichier, ( à ne pas confondre avec le nom du fichier !)
  • le producteur du fichier (noter que le producteur n'est pas l'auteur du fichier mais bien le logiciel ayant généré le fichier PDF)
  • le nombre de pages que le fichier contient
  • le nombre d'images que le fichier contient
  • et enfin le fait de savoir si le fichier est crypté ou non par un mot de passe.*
Noter toutefois, que le nombre d'images contenues dans le fichier n'est pas totalement une métadonnée au sens PDF du terme, mais une information que l'on retrouve tout à la fin du fichier PDF.
 
Je reviens sur ma dernière phrase, lorsque je parle de tout à la fin, il est bien entendu que je n'ai pas ouvert mon fichier PDF avec un lecteur de fichier PDF, mais bien avec un simple éditeur de texte, qui me permet de trouver ces informations. Si vous ouvrez un fichier PDF avec un simple éditeur de texte comme Notepad++ sous Windows ou texte Edit sur Mac, vous vous rendrez compte que des informations sont écrites en clair dans le fichier, et d'autres sont cryptées.
 
9oKTTQZH8v
 
En fait elles ne sont pas traitées en tant que telles, comme c'est un fichier au format binaire, de ce fait, un simple éditeur de texte ne peut pas les interpréter. Il faut un lecteur PDF. Cependant, comme des métadonnées doivent pouvoir être accessibles de l'extérieur du fichier, pour par exemple, être intégré dans un moteur de recherche, il faut bien que ces données soient lisibles. C'est la raison pour laquelle, toutes ces informations apparaissent en clair. Vous pourrez le remarquer en ouvrant un fichier PDF avec un simple éditeur de text (attention avec le bloc note, il y a une limite de taille de mémoire, pour faire cette opération. Préférez Notepad++)
La deuxième étape de mon travail a été de regarder dans ces données en clair, comment ces données sont structurées. Il s'avère que le format PDF est vraiment très bien fichu. Je vous encourage vraiment d'éditer un fichier PDF dans un éditeur de texte pour comprendre comment cela fonctionne. Et à toute première ligne du fichier PDF commençant par le symbole pour cent, permet de spécifier la version du format PDF utilisé.
En continuant et analyse ou plutôt la lecture d'un PDF dans un éditeur de texte, on se rend compte que il y a des caractères "cryptés". Juste avant et juste après ces grandes chaînes de caractère, nous avons la mention stream et endtream. Cette mention permet donc de dire à votre réacteur PDF attention à partir de là il faut interpréter le contenu comme un fichier binaire. Pour le moment j'ignore comment le lecteur PDF reconnaît le format et comment il l'interète (Un format JPG ne s'interpreter pas de la meme façon qu'un PNG). Je subodore qu'au moment de l'enregistrement de votre fichier binaire, comme une image, dans votre fichier PDF, l'utilitaire génère cette information dans un format spécifique imposé par la norme PDF pour pouvoir être lu par tous les lecteurs PDF. A moins que chacun des lecteurs PDF intègrent un "interpréteur" JPG, PNG...
 
J'ai continué visuellement le parcours de mon fichier PDF dans mon éditeur de texte, afin de trouver l'ensemble des chaînes de caractères qui pourrait m'intéresser. Dans ce cadre là, j'ai trouvé une dizaine de chaînes intéressantes. Je vous les détails dans mon code à la fin de cet article.
 
Ensuite, continuons de dérouler mon fichier PDF dans mon éditeur de texte, je suis arrivé sur des informations qui m'intéressent beaucoup plus. Nous trouvons par exemple le format d'encodage des caractères dans le fichier. Une information forte intéressante. 
 
pdf encoding
 
On parcourant le fichier, j'ai trouvé une dizaine de chaînes fortes intéressantes, qui sont pour l'ensemble d'entres elles,  des chaînes liées aux métadonnées, et pour d'autres des caractéristiques spécifiques liés au contenu du fichier PDF. Nous allons par exemple retrouver si le fichier PDF est un fichier crypté, avec une chaîne de caractère de protection, combien le fichier contient d'images, combien le fichier contient de pages, etc...
 
J'ai essayé d'extraire tous ces informations qui peuvent m'intéresser, mais peut-être qu'au cours de mon analyse de mon fichier PDF dans mon éditeur de texte, j'en ai oublier certaines. N'hésitez pas à me le dire !
 
Sans plus attendre, je vous conseille d'aller jeter un œil dans le code, afin de comprendre comment à l'aide d'expressions rationnelles (je suis en plein apprentissage, ca tombait à point), j'ai réussi à extraire les informations qui m'intéressent. Vous noterez que chacune des métadonnées sont formatés de la manière suivante : /tag meta (valeurs). En comme je ne maitrise encore pas les expressions rationnelles, je me suis aidé d'un superbe outil en ligne : regex101.  Attention toutefois, ne collez pas tout le PDF dans Regex101, cela ralentit de manière considérable les traitement. N'utilisez que la partie de code du PDF sur laquelle vous travaillez.
 
D'une manière générale, chacun des tag commence par une barre suivi du nom du tag que nous recherchons, suivi entre parenthèses de la valeur de son contenu. Il apparaît donc logique et super simple d'en extraire les informations à l'aide d'expressions rationnelles de la forme (je bosse en php)  $re = '/Author \((.*)\)/m'; .
 Je ne fais pas de cours ici sur les expressions régulières aussi appelé expressions rationnelles, mais je vous donne quand même le format d'une expression rationnelle que je vais applique à chacun des types de balises que je souhaite extraire :
 Preg_match_all($ma_chaîne, $pdf,$matches,PREG_OFFSET_CAPTURE);
 
L'ensemble des informations extraites à l'aide de cette expression régulière sont stockées dans un tableau, comme vous le voyez, prénommé $matches.
Et voilà, l'extraction des métadonnées et autres données intéressantes d'un fichier PDF se fait simplement à l'aide de ce genre d'expression rationnelle.
En récapitulant (en php, commentaire dans les phylactères):
  1. $nomFichier = 'PDF.pdf';
  2. $pdf = file_get_contents($nomFichier);
  3. $Tpdf = file($nomFichier);
  4. $re = '/Author \((.*)\)/m';
  5. preg_match_all($re, $pdf, $matches, PREG_SET_ORDER, 0);
  6. var_dump($matches);
 Voila, à partir de là, il reste quand même un peu de travail car les données récupérées par le var_dump sont à exploiter comme bon vous semble
Je pense que dans les prochains jours, un petit plugin va venir compléter cette information, ce plugin sera destiné à l'extraction de métadonner de fichier PDF à intégrer au CMS joomia
 
 
 

Suite à mon dernier article que j'ai posté cette semaine sur mon site, je me suis posé la question de savoir comment encore mieux associer Joomla avec le mapping d'image. Même si la technique, comme je le disais, reste assez ancienne, il s'avère que l'on peut faire des choses relativement sympathiques.

Dans cet article, je vais vous montrer ce que j'ai réussi à faire en associant d'une part un article Joomla Content, mais aussi le mapping d'image, le tout saupoudré de l'excellentissime composant édité par regualar lab : modal. Si vous ne connaissez pas cet outil, je rappelle qu'il sert à fabriquer de manière relativement simple et sans codage JavaScript, une fenêtre modale sur un hyperlien votre page Web. Pour plus d'explications, je ne peux que vous conseiller la lecture de son mode d'emploi et de sa présentation.
Mais revenons à notre sujet. Comme vous le voyez, je vous propose une image d'une personne, personne fictive car l'image a été générée depuis une intelligence artificielle de création de visage, et sur cette image j'ai fait pointer deux fenêtres modales sur les yeux de la personne. En cliquant sur chacun d'entre eux, vous pouvez vous rendre vers une page web que vous désirez point bien entendu, cela fonctionne très bien sur des liens internes de votre propre site web, toutefois, j'ai remarqué que sur des liens externes comme Facebook, l'éditeur Facebook interdit ce genre de lien. Ne me demandez pas pourquoi je n'en ai aucune idée.
 
Alors ce visage artificiel a t il de jolis yeux ? Cliquez dessus (ses yeux) pour voir

fakeface

 
Mais alors, comment ai-je pu faire ?
 
Après avoir généré mon image, sur le site https://generated.photos/, j'ai obtenu le visage d'une personne. A partir de l'accueil j'ai commencé à travailler mon mapping. Ce mapping, je l'ai travaillé avec utilitaire graphique intitulé Gimp, le pendant libre de Photoshop.
  1. Ouvrez votre image dans GIMP
  2. Puis au travers du menu images sous menu web
  3. Choisissez images cliquable web.
  4. Une fenêtre s'affiche, vous pouvez au moyen des outils en bleu, définir chacune des zones que vous souhaitez mapper
  5. pour chacune d'entre elles stipuler une URL particulière. Simple.

imagemap kj2OWa0da7

Alors, comment à partir de ceci, pourquoi faut-il mettre une URL alors que je souhaite avec Joomla, afficher une fenêtre modale ? Et la réponse elle est simple, le fait de mettre une URL va simplement vous permettre, dans votre code, de retrouver vos petits quand nous passerons à la phase de la fenêtre modale. C'est simplement ca
 
Une fois la définition de vos zones terminées, rendez-vous dans le menu Affichage puis sélectionner le sous-menu source, vous allez avoir l'intégralité de la source du mapping de votre image.
imagemap ErP8SrcxzR
 
Notez toutefois, une fois après avoir copié le code et collé dans le Joomla, que vous devez bien entendu remplacer l'attribut SRC de la balise img avec la bonne URL de votre bonne image désormais déposée sur votre serveur. En effet nous ne sommes plus en local il faut donc adapter le code.
 
Désormais, créons un nouvel article dans Joomla.  Je ne reviens pas sur la création d'un article dans Joomla, mais si jamais vous avez activé votre éditeur dans le mode wysiwyg dans vorte CMS favoris, passez tout de suite en mode code afin de coller le code que GIMP vous a généré et enregistrez votre article. 
 
Maintenant, nous avons la possibilité de mettre en place nos fenêtres modales par rapport au zones que nous avons défini dans GIMP en terme de mapping d'image. Je reviens rapidement sur l'utilisation de la fenêtre modale avec le composant que j'ai précité en début de cet article, une fenêtre modale, si nous analysons pas le code avec les short code. Le souci, c'est que dans notre article, il n'est pas forcément simple d'intégrer des shortcode modal avec le ou les zones de mapping de mon image. C'est la raison pour laquelle, après avoir déjà créé une image et étudié le code qui a été généré par Gimp, j'en ai ressorti les informations intéressantes. Notons notamment que pour avoir une fenêtre modale, il suffit de spécifier une classe particulière, et de donner des informations de type data dans la balise.
 
Je ne peux plus vous conseiller d'analyser le code afin d'en faire des copier-coller. Si vous regardez le code de mon exemple, vous trouverez une zone area avec les coordonnées spécifiées et générée par Gimp, dans cette zone nous lui disons que la forme de la zone  est un cercle et nous pointons sur une URL particulière. Nous passons aussi en paramètre une classe justement pour la fenêtre modale avec des informations de type data qui permettent de spécifier des spécifications de la fenêtre.
 
Je ne rentre pas dans ce détail, c'est l'outil modals qui s'occupe de tout ça.
 

image generee

modale

 Code implémenté (commentaire sur les zone souligné en pointillés) : 
<p><img src="/images/fakeface.jpg" alt="fakeface" usemap="#map" width="512" height="512" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p><map name="map">
		<!-- #$-:Image map file created by GIMP Image Map plug-in -->
		<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
		<!-- #$-:Please do not edit lines starting with "#$" -->
		<!-- #$VERSION:2.3 -->
		<!-- #$AUTHOR:Sébastien LHUILLIER-->
<area 
coords="189,247,53" 189,247,53 href="index.php/features/recettes-de-pains-2/item/474-galettes-de-pains" class="modal_link"
data-modal-iframe="true" data-modal-inner-width="95%" data-modal-inner-height="95%" data-modal-class-name="no_title"
/>


<area coords="321,252,47" shape="circle" href="https://sebastien-lhuillier.com/index.php/ffmpeg/ffmpeg-par-articles" /> <area coords="199,354,230,345,269,350,308,351,327,359,305,388,274,398,240,394,218,384,201,364" shape="poly" href="#bouche" /> </map></p>
 
 

Voila deux ans que j'ai découvert que Microsoft a développé son propre HTML (et wai), enfin si on peut dire HTML.

Exit le W3C, exit le html appris à l'école. Bienvenu dans l'utilisation de balises totalement inconnues, des propriétés de HTML inconnues elles aussi (mais propriiétaires à Microsoft), bref, les membres du W3C ne peuvent qu'hurler.  Seul IE sait interpréter le code !

Mais comment faire si l'on vous demande de tout recoder un grs site complet.... en deux jours max ?

Impossible ? Pas tout à fait. Enfin cela dépend ce qu'on appelle recoder. Et pour ce faire, j'ai utiliser une vielle connaissances du web que l'on ne retrouve plus tros : Le mapping.

La première étape a été de générer un code HTML de mapping avrc GIMP, simplement pour se remémorer les commandes à utiliser. C'est le cas de area.  Ca y est ca vous revient ?

Alors voila la méthode que j'ai utilisée, sale, très sale mais qui a le mérite de sauver les meubles en attendant la mise en prod de mon nouvel outil sous Joomla.

  1. J'ai fait des copie d'écrans de toutes les pages web.
  2. J'ai ouvert ces images dans Gimp
  3. Dans gimp, dans les filtres menu Filtres > Web > Image cliquable web, je définis l'ensemble des zones cliquables
  4. Dans chacun des zones définies, j'ai mis mes liens vers mes pages web (qui elles tournes sur les deux navigateurs... puisque ce sont des opies d'écran)
  5. ENfin, je génère toujours avec Gimp le code html du mapping a coller sur la page web, je joins l'image et j'upload tout ca sur le serveur

Seul hic, je n'ai pas trouvé en CSS un équivalent à a:visited sur une image. De ce fait, on ne voit pas si l'utilisateur a déjà cliqué sur un "faux" lien (car oui sr ma copie d'écran j'ai aussi des hyperliens textes)

Si vous aussi ca vous permet de sauver  des meubles....

dimanche, 21 août 2022 08:00

Module d'affichage des articles sans tags

Écrit par

Je ne sais pas vous, ou si c'est du faiit que je sois issu d'un monde parfait en terme d'ergonomie (euh, mac OS parfait ? oui ! et j'assume) mais j'aime reproduire des fonctionnalités dans mes application qui restent utiles. Je ne pense même pas simplement lancer une requete SQL sur PHPMyadmin sur mon serveur juste pour lister les articles Joomla non taggés. Bon je dois aussi dire que je n'ai pas accès à phpmyadmin sur mon environnement pro. Du coup, j'écris mes modules qui me lancent mes requetes désirées.

Icic, la requête (écrite non sans mal) permet de lister les articles non taggés. Elle ressemble à ca (j'ai mis les explications dans des phylactères) : 

 
select DISTINCT (doc_content.id), doc_content.title
FROM doc_content
left join doc_contentitem_tag_map on doc_contentitem_tag_map.core_content_id=doc_content.id
where doc_contentitem_tag_map.core_content_id is null  J'ai trouvé en faisant une rétro analyse du contenu de la base de données, j'aurais du mal a expliquer, mais un message est intéressant ici : https://forum.joomla.org/viewtopic.php?t=866399
order by doc_content.id desc";
 
Je crois bien qu'en fait j'ai expliqué le plus gros, tout le reste est de l'affichage de résultats issus de la requete. Remarquez toutefois, je m'améliore, je n'affiche pas les résultats dans le contrôleur masi dans la vue (comme quoi des fois...) !
 
 

Encore une fois, je ne vais pas vous pouvoir vous montrer d'exemple puisque je n'utilise pas sur mon site l'ensemble Joomla Content, au profit de K2.

Mais dans mon cadre professionnel où je privilmégie les choses simples, donc natives, je ne fais que du Joomla content.

C'est la raison pour laquelle j'ai écrit ce petit module qui vous permet de lister les articles d'un site Joomla, classé par ordre alphabétique, mais surtout avec une rupture sur la première lettre du titre de article. Pour ceux qui l'ignoreraient, une rupture et le moment où, dans une liste issue généralement d'une base de données, une et une seule information d'un enregistrement change.

Dans notre cas, le changement, c'est-à-dire la rupture, se fait sur la première lettre du titre de l'article. En d'autres termes, vous allez avoir classé, avec une organisation par première lettre, l'ensemble de tous vos articles Joomla content, avec en en-tête pour chacun des groupes affichés, la première lettre ou plutôt le premier caractère du titre de l'article (le titre de l'article pouvant commencé par un chiffre, un caractères UTF-8 type icones,.... ou autre. Le module recherchant toutes ces informations automatiquement, si la première lettre de l'alphabet commence par un caractère comme une double cote, vous allez avoir dans votre liste, un groupe d'articles dont en tête sera une double cote. Bien que fonctionnel, ce module nécessite toutefois une bonne manipulation des données et notamment des titres des articles pour que le rendu soit logique et cohérent.

Encore une fois, l'excellentissime site internet sur lequel vous vous trouvez n'étant pas basé sur du Joomla content mais du K2, je ne peux que vous mettre des copies d'écran car je n'ai aucune donnée permettant d'afficher un exemple.
 
premierelettres
dimanche, 07 août 2022 12:00

QRCode autonome (sans webservice)

Écrit par

Après avoir regardé sur la JED les différents modules gratuits de générateur de QR Code, et après les avoir bien entendu téléchargé et analysé un tout petit peu le code de ces modules, je suis fort surpris de voir que beaucoup d'entre eux faisaient appel à un web service externe ! 

Qu'elle ne fut pas ma surprise d'apprendre et de voir ceci, lorsque l'on sait qui existe des bibliothèques PHP toutes faites permettant de générer des codes 3D.

Fort de ce constat, je m'empresse de regarder sur l'excellent site PHPClasses si quelqu'un n'aurait pas déjà écrit une classe toute faite permettant la génération de QR Code de manière autonome et sans connexion au net. bah oui, tout le monde ne bosse pas avec un e connexion internet ! loin de là.

Cette absence de connexion me donne une problématique supplémentaire : je dois, moi, oui oui bien moi, travailler sans API !!! Vous avez bien lu !!!  C'est quand même fort pour LE gars qui s'amuse sur son site web avec !

Partant de ce constat, et donc sans que l'on soit tributaire d'un web service externe, je me suis mis à intégrer une bibliothèque PHP permettant la génération d'une image de ce type.

Le gros avantage à cette méthode, c'est que nous ne dépendons plus d'un web service externe, si ce dernier vient à tomber en panne, votre site continue de fonctionner de manière tout à fait normal puisque la bibliotheque reste sur VOTRE serveur ! Sans compter, comme je le disais, en cas de non connexion au net... ca continue de marcher

Nous allons donc voir dans ce module comment implémenrter et la bibliothèque génératrice du QR code. Je ne rentrerai pas dans le détail de la bibliothèque car je n'en suis pas auteur, mais je vais vous expliquer comment je l'ai intégré grâce à mes commentaires.

Encore un point. Est ce que je triche ? Oui un peu je l'avoue car les QRCodes sont généré en tant que fichiers puis affichés dans la page. Ils devraient être affichés à la volée. Cela dit, chose que je n'ai pas faite, il suffit de supprimer les fichiers générés dans le code du module.

 

samedi, 23 juillet 2022 09:47

Sticky notes (Post-it) pour Joomla

Écrit par

Dans le cadre de mes attributions professionnelles, je dois gérer un ensemble de données cohérent autour de différents matériels.

Un matériel est en constitué de plusieurs éléments. Parmi ces éléments, peuvent se trouver des notes utilisateurs. On en arrive à notre module que je vous présente aujourd'hui.
Vous avez compris, sur un article Joomla content, je souhaite rajouter des notes. Ces notes sont ni plus ni moins qu'un champ personnalisé Joomla content, au format répétable.
Ce format est défini dans la liste des formats possibles des champs personnalisés. Il vous permet pour un champ donné, de proposer à l'utilisateur l'insertion de plusieurs éléments. En d'autres termes, c'est une relation 1-N d'une base de données. Notons toutefois que dans Joomla, il n'y a pas cette relation directe au niveau de la base de données, puisque c'est dans un gros champ texte que Joomla stock l'ensemble des informations au format Json !

Première étape, création de notre champ personnalisé répétable

La première étape de notre système et de créer un champ personnalisé Joomla, tel que défini dans la copie d'écran ci-dessous, qui est un champ de type répétable.
description champs repetable
 
Dans la notion de répétabilité, nous allons simplement stocker un champ que j'intitule... note, de type "éditeur", dans lequel le format html va être filtré (proessus interne qui vire les balise inutiles ou dangeureses).
Je reviens rapidement  sur le type éditeur, ce n'est pas un type de base de données mais bien un type de formulaire que nous devons présenter à l'utilisateur. Dans ce cadre, c'est un format wisiwig, éditeur de type "Word", qui va être présenté à l'utilisateur.
 
Une fois la description du champ terminé et enregistré, n'oubliez pas d'affecter une catégorie auquel vous souhaitez que ce champ apparaisse, vous aurez la possibilité dans la zone "administrateur" de Joomla, de pouvoir créer autant de fiches de ce type pour un enregistrement donné, pour un article donné si je reprends les termes Joomla
 
Désormais, notre structure Joomla des données est prête et fonctionnelle, commençons par créer un article de la catégorie dans laquelle nous avons spécifié l'affichage de ce champ.
 

Création de l'article

Lorsque je crée un nouvel article, j'ai un onglet chant qui apparaît. En fonction de la configuration du champ répétable que vous avez créé, le nom de cet onglet peut changer.
 
Dans cet onglet, vous avez la possibilité de créer autant de notes que vous le souhaitez puisque le champ est rééptable.
Pour créer une note, il vous suffit de cliquer dans la petite icône verte avec une signe plus. Vous allez avoir un éditeur WISIWYG qui va apparaître, vous pouvez saisir vos premières notes.
 
Si une deuxième note doit être saisie, vous avez la possibilité de cliquer sur l'un des boutons verts permettant de créer une nouvelle note. Remarquez aussi, que vous avez une croix sur fond bleu qui vous permet d'organiser vos notes dans l'ordre que vous désirez. Je ne reviens pas sur le bouton moins sur fond rouge qui vous permet simplement de supprimer la note correspondant à la ligne que vous avez envisagée.
 
boutonsss
 
Le module que j'ai écrit, va rechercher le champ que j'ai intitulé note, que vous devez aussi intitulé note pour que ce module reste fonctionnel sur votre site.
 
Dans le cas où vous souhaitez changer le nom de ce champ, il vous suffit de changer le nom de la variable dans le fichier helper.php, sur la ligne 33. Attention, selon la mise en page de votre éditeur de code, le numéro de ligne peut varier. C'est dans la ligne élément du dernier foreach du fichier helper.php.
 
Dans le paquet je fourni en téléchargement, je vous joins un fichier CSS permettant d'appliquer un style post-it sur l'ensemble des notes que nous avons créées. C'est la raison pour laquelle dans le fichier lelper.php (je mets toujours malheureusement mon code HTML dans le helper alors que je sais qu'il faut le mettre ailleurs), j'ai pris que style fourni dans le CSS fourni dans le package.
 
Si vous suivez régulièrement mes articles, vous serez que je suis absolument nul en infographie. C'est la raison pour et accueil, pour utiliser la notion de post-it, rendons à César ce qui appartient à Jules, je me suis inspiré de post-it déjà créé, trouvé sur le site codepen et écrit par Dillon Brady sous la référence EzRoZQ.
 

Revenons à l'utilisation

Désormais, il vous suffit de créer autant de champ de type note que vous souhaitez afficher de notes sur votre module, affecter ce module à article sur lequel vous souhaitez voir apparaître vos post-it, puis d'enregistrer le tout. Vos notes apparaissent ainsi lorsque comme vous le désirez point je vous laisse bien entendu ici un exemple.
 
Enccore une fois, ce module est spécifiquement développé pour Joomla Content. Mon sité étant piloté par K2, je ne peux que vous joindre une copie d'écran du résultat.
 
Module post it pour Joomla
dimanche, 31 juillet 2022 08:27

Ruban

Écrit par

Je vous propose aujourd'hui un module ruban que j'ai spacifiquement écrit pour la template Protostar. N'utilisant pas cette template sur ce site, il ne fonctionne pas ici. 

L'idée est de placer dans la coin gauche des pages un module qui affiche de manière diagonale, un texte. Ce texte est placé sur fond rouge mais vous pouvez changer tout le CSS fourni.

 

 

BANNER

samedi, 23 juillet 2022 00:00

Table tri

Écrit par

j'en rêvais, et je n'ai fait... non sans mal !

Totalement ignorant en Javascript, je me suis lancé un défi de fabriquer un tableau des articles, triables et filtrables. Alors, ce module est à prendre toutefois avec des pincettes et si vous souhaitez adapter et corriger le code, n'hésitez pas et faites moi remonter vos améliorations... car j'en ai vu un que je n'arrive pas à résoudre. Je sais, je n'ai pas honte ed présenter un outil buggé car le bug n'intervient pas souvent.

Alors voila, je recherchais à afficher une liste d'articles Joomla Content (la démo va donc pas être simple ici étant sous k2) avec la possibilité de trier, afficher les articles et faire des recherches par "colonnes".

Administration

Ce module n'est pas à mettre dans les mains des personnes ignorant le langage SQL. En  effet, l'idée est de travailler avec une très grande souplesse avec cet outil, ainsi, l'ensemble des valeurs affichées est le résultat d'une simple requete SELECT en SQL, dans laquelle l'utilisateur pourra intérroger la base de données de Joomla. Cela rend l'outil super souple car n'importe quel composant (Jevent, K2, Joomla content....) peut être interrogé et ses données retournées. Cerise sur le gâteau : la requete n'est pas dans le code mais dans l'interface d'administraion du module.

A contrario, cet outil permet de maitriser, via SQL, les jointures, les selects... afin de retourner que ce que l'informaticien souhaite.

Voila comment se présente l'interface d'administration de l'outil

desc module admin

Sur cette copie d'écran, vous retrouverez toute la très simple configuration du module ! Rien n'est complexe (même si les champs sont - trop ? - nombreux), les champs à remplir sont ceux sur lesquels sont basés le plugin JQuery Fancytable proposant l'affichage des résultats !

Le résultat

Comme je vous le disais, je n'ai aucun article Joomla content sur mon site donc pas simple de présenter un résultat autre que par copie d'écran sur laquel, qui plus est, le suis obligé de flouter des données. Mais si comme moi, vous utilisez K2 ou autre chose, il vous suffit d'adapter la requête SQL.

resultat

Je commente ce que l'on voit :

  • tabletri : c'est le nom du module que je n'ai pas masqué dans la console d'administration de Joomla
  • "ceci est la légende" : C'est la chaine de caractère légendant le tableau. On peut aussi dire que c'est le titre du tableau
  • Identifiant, titre, Alias... : ce sont les titres du tableau, configurés dans la console d'adminitration (j'avais essayé de passer par des alias dans la requete SQL mais sans succès). Ces noms de colonne sont simplement séparés par le symbole : (qui ne peut dont être utilisé dans le titre de la colonne)
  • (champs/rectangles) : fitres de recherches
  • (chaque ligne) (floutées) : ce sont les résultats de la requête

Alors l'outil est largement perfectible, je le sais. Notament sur la partie client en jquery. Mais encore une fois, ne maitrisant pas ces technos, je travaille pas mal par tatonnement et analyse de code (ici le plugin JQuery utilisé pour ce résultat) que je sais déchiffdrer mais je n'ai pas la prétention de dire que je sais le lire.

Je vous joins mon module en PJ, si vous le retravaillez, ce sera avec grand plaisir que le mentionnerai ici les personnes qui se sont basées sur mon module pour le rentre perfectible. En encore une fois, je doute qu'il soit fort utile sur internet, mais sur une "application" métier Joomla en interne, la vision n'est pas la même !

 

 

 

Page 1 sur 15