Détails

Catégorie : Joomla QR

Cela fait maintenant plusieurs fois que je vois passer sur les différents groupes et forums, la question suivante : comment puis-je changer le style d'un élément dans une page web ? Ce tutoriel ne s'applique pas qu'à l'outil Joomla mais s'applique à n'importe quelle page web.

La réponse est extrêmement simple et la voici.

Détails

Catégorie : Joomla QR

Dans cet article, je vais répondre à ma problématique suivante. J'administre professionnellement un site Internet basé sur Joomla, dans lequel j'ai installé pas mal de composants, de plugins et de modules spécifiques, très souventt développés par mes soins bien entendu.

Ma problématique

Que va-t-on faire ?

Comment faire ?

1. Pour cela rendez-vous dans l'interface d'administration des templates au travers du menu extension -> templates -> templates.
2. Sélectionner dans la liste déroulante le terme administration pour accéder à notre template Isis qui est une template spécifique à l'administration de Joomla. Lorsque cette tempête apparaît, vous avez créé il y a substitution de comme content en sélectionnant l'élément article .
   
3. Lorsque votre substitution (oui on parle bien d'héritage dans la terminologie normale de développeurs) est créée, nous allons éditer ce fichier. Pour cela, rendez-vous dans le répertoire administrator -> template -> isis -> html -> com_content -> article. Vous allez vous retrouver avec un fichier nommé edit.php. éditez ce fichier et rendez-vous à la ligne 76 après la commande :

Détails

Catégorie : Joomla QR

Dans cet article et en relation avec l'article 880, je vais répondre à ma problématique suivante : j'administre professionnellement un site Internet basé sur Joomla, dans lequel j'ai installé pas mal de composants, de plugins et de modules spécifiques, très souvent développés par mes soins bien entendu.
À force d'écrire mes plugins spécifiques, et à force de développement, j'ai un peu de mal à me rappeler de tous les short-codes que je dois utiliser dans mon interface d'administration de rédaction de mes articles. Je vous rappelle que l'ensemble des plugins, mais vous voyez par vous-même en lisant mes articles, sont relativement très "métier".

Ma problématique

Que va-t-on faire ?

Nous allons combler un vide, mais aussi un manque ! En effet, sous le dernier champ note de version de la console d'administration de Joomla, il nous reste de la place pour écrire des informations. C'est à cet endroit que je vais rentrer l'ensemble des notes que je souhaite (a)voir sous les yeux. Comme la place est quand même relativement limitée, nous allons créer un div auquel nous allons appliquer un style particulier de type overflow-y pour avoir un ascenseur vertical et pouvoir se balader dans l'ensemble du div afin de voir toutes ces commandes qui m'intéressent. Pour la partie CSS je vous laisse faire, je ne me concentre ici que sur l'ajout de ce div.

Comment faire ?

Lorsque votre substitution (oui on parle bien d'héritage dans la terminologie normale de développeurs) est créée, nous allons éditer ce fichier. Pour cela, rendez-vous dans le répertoire [joomla] -> administrator -> template -> isis -> html -> com_content -> article. Vous allez vous retrouver avec un fichier nommé edit.php. éditez ce fichier et rendez-vous à la ligne 76 après la commande

<?php echo JLayoutHelper::render('joomla.edit.global', $this); ?>

afin de rajouter un simple include, commande php qui va intégrer un fichier externe à cette template. Ce qui donne, en reprenant la ligne ci-dessus :

<?php echo JLayoutHelper::render('joomla.edit.global', $this); ?>
<?php include('explications.php'); ?>

Contenu du XML contenant les explications

• un nom
• un tag (le shortcode du plugin)
• un explication bien entendu

Ainsi, un fichier XML pourrait être de la sorte :

<SEBexplication>
	<nom>SEOExplication</nom>
	<tag>{ici mon tag}</tag>
	<explications>Ce tag permet au plugin ... de ...</explications>
</SEBexplication>

 Le fichier explications.php

C'est ce fichier qui a pour rôle de "détecter" les fichiers d'explications dans le dossier Joomla. Il comprte le code suivant :

<?php

function scanAllDir($dir) {
  $result = [];
  foreach(scandir($dir) as $filename) {
    if ($filename[0] === '.') continue;
    $filePath = $dir . '/' . $filename;
    if (is_dir($filePath)) {
      foreach (scanAllDir($filePath) as $childFilename) {
		  
        $result[] = $filename . '/' . $childFilename;
		  
      }
    } else {
      $result[] = $filename;
    }
  }
  return $result;
}
	
        $files= scanAllDir(JPATH_BASE);
	echo '<div class="seb-admin-explications">';
	foreach($files as $unFichier)
	{
		if (strpos($unFichier, 'SEOExplication')>0)
		{
			$xml = simplexml_load_file($unFichier);
			//echo $unFichier;
			echo '<div class="nom">'.$xml->nom.'</div>';
			echo '<div class="tag">'.$xml->tag.'</div>';
			echo '<div class="explication">'.$xml->explications.'</div>'; } } echo '</div>'; >

 Libre à vous de styliser les class seb-admin-explications, nom, tag et explication pour que votre rendu soit + personnel. Je vous joins toutefosi le CSS utilisé dans mon cas :

.seb-admin-explications {
  border: 2px solid red;
  padding: 1%;
  border-radius: 5px;
  background-color: lightyellow;
}

.seb-admin-explications .nom {
  text-align: center;
  font-weight: bold;
}

.seb-admin-explications .tag {
  float: left;
  margin-right: 2%;
  color: blue;
  font-weight: bold;
}

 Notez que je n'ai pas de style particulier pour la class seb-admin-explications.explication

Détails

Catégorie : Joomla QR

La restauration 

Détails

Catégorie : Joomla QR

PJ1: modals.css.txt

Le besoin 

Aujourd'hui, nous allons voir comment procéder pour ajouter une fenêtre modale dans notre console d'administration du CMS joomla.

Ce besoin, certes très professionnel, j'en ai besoin pour pouvoir afficher du côté console d'administration, (sans écrire de composant !) un nom de fichier formaté et surtout normalisé. (nouis devons suivre une norme pour nommer nos fichiers de notre documentation

Pour générer ce nom, étant absolument très mauvais en Javascript, je n'ai pas intégré un code JavaScript à un élément Joomla comme un module ou un plugin, mais j'ai véritablement fait un simple fichier HTML, en me basant sur des exemples existants sur Internet. Comme disait Georges Brassens "&wmode=transparent" class="modal_link" data-modal-video="true" data-modal-iframe="true" data-modal-inner-width="95%" data-modal-inner-height="95%" data-modal-class-name="is_video no_title">qu'on ai 20 ans, qu'on soit grand père, quand on est c..."

Nous avons en effet fabriqué une norme de nom de fichier, chacun des fichiers que nous souhaitons mettre à disposition à nos utilisateurs doivent être normés ainsi. Cela permet, s'il y a personne ne connaît pas exactement le nom, de pouvoir quand même faire une recherche avec le moteur de recherche de Joomla RokAjaxSearch sur des morceau du nom du potentiel fichier recherché

Ma réalisation Joomla 

Avant toute chose, je tiens à préciser que ma template utilisée pour ma console d'administration est Isis.

Pour parvenir à répondre à mon besoin, voilà comment j'ai procédé :

 

1. J'ai commencé par faire un héritage, un fork, une extension, ou tout autre terme que vous souhaitez, du composant cpanel se trouvant dans le dossier de l'administration joomla 3
2. Ensuite, j'ai édité le fichier de vue suivant : administrator/templates/isis/html/com_panel/panel/default.php afin d'apporter les modifications à la lignes 16.
3. Je me suis rendu sur le site codepen.io afin de récupérer un exemple de fenêtre modale qui est écrite en pure CSS (ce qui évite d'avoir du javascript à trainer) : codepen.io/ldered/pen/DdeceW pour la fenêtre modale, j'intègre le CSS dans le fichier de template Isis administrator/isis/css/template.css, puis j'intègre ensuite dans le fichier default.php le code HTML correspondant.
4. Je procède à la modification du code HTML inutile de la description et récupérée dans le modèle de CSS, pour ne garder que les boutons.
5. Dans les fenêtres modales, j'intègre les fichiers HTML que je souhaite voir afficher. Comme ces fichiers de contiennent que du javascript, une iframe fait parfaitement l'affaire dans la modale. Étant donné qu'il n'y a aucun aller-retour sur le serveur puisque je suis en Javascript, je peux mettre tout ce que je veux dans mes fichiers. Et quand bien même j'aurais besoin d'un aller-retour avec le serveur, je pourrais utiliser la technologie JavaScript Ajax, donc basé côté client, pour combler mon besoin.
6. Enfin, je corrige où je modifie au besoin et à feuille de style intégrée, de manière à ce que l'intégration ne jure pas trop niveau infographie dans mon code.

Je vous conseille de retoucher le CSS car j'ai l'impression que les boutons natifs de joomla s'appliquent sur le CSS rajouté. Rien de grave mais le style change...

 

 

Détails

Catégorie : Joomla QR

Encore une question geek de développeur à la con ? Oui peut-être !

Ma problématique

Ma réalisation sur Joomla 

• /[GRANDE_CATEGORIE]/catégorie
• /[GRANDE_CATEGORIE]/catégorie/sous-famille

Réalisation du module

Détails

Catégorie : Joomla QR

Le besoin

Aujourd'hui nous allons voir comment ajouter un masque de saisie spécifique dans la console d'administration sur un champ personnalisé de type texte, que nous avons déjà créé dans joomla content.

Pour mettre en place ce champ préformaté, je m'appuie sur la bibliothèque jQuery de base, laquelle contient tout ce qu'il faut pour pouvoir spécifier un format de saisie à un champ de type input type = "text".

Principe de fonctionnement,  mise en œuvre

Avant toute chose, il faut connaître le principe de fonctionnement de la bibliothèque maskedit de jQuery pour comprendre mon raisonnement.

Avec la bibliothèque de Jquery, le principe est d'appliquer un masque de saisie à un champ texte, défini au moyen des champs personnalisés de Joomla, qui lui-même contient un id. Le plugin de base contenu dans la bibliothèque jQuery fonctionne de la manière suivante :

1. on récupère id du champ texte en inspectant le code :
   
2. on rajoute un petit bout de code jQuery qui va demander d'ajouter un masque de saisie à ce champ texte.

Mise en œuvre

Désormais que nous savons maintenant comment cela fonctionne, voilà la mise en œuvre que j'ai appliqué pour obtenir mon résultat.

Le premier point est un point de vérification et ne s'inscrit pas tellement dans ma mise en oeuvre. Bien entendu si vous savez que votre joomla intègre déjà la bibliothèque jQuery vous pouvez tout de suite passer au point 2.

1. Rendez-vous sur la page de votre console d'administration sur laquelle vous souhaiteriez que votre champs de type maskedit soit présent,
2. Afficher le code et regarder si la bibliothèque jQuery est présente ou non. La copie d'écran ci-dessous a été faite après le rajout de la bibliothèque JQuery.
   
   Dans mon cas elle l'était car dans Joomla 3 elle est fournie avec. A partir de Joomla 4, et à cause de l'arivée de Javascript 1.5 qui intègre en natif ce que JQuery apporte, JQuery n'est plus jointe à Joomla
3. Pour pouvoir intégrer des masques de saisie, nous utiliserons un plugin de JQuery (attention, ce n'est pas un plugin Joomla mais bien un plugin de la librairie JQuery !). Nous pourrions fabriquer un plugin Joomla spécifique pour charger ce plugin, mais pour gagner du temps, j'ai préféré l'intégrer directement dans ma template isis (attention, on travaille bien sur la template de la console d'administration !
     Bien entendu vous pouvez faire une substitution du fichier si vous le désirez, ceci est fortement conseillé, moi je ne l'ai pas fait.
4. Ajouter la ligne (35 sur la cope d'écran ci-dessus) qui fait un lien vers la bibliothèque du plugin jQuery utilisé. Dans mon cas, cette bibliothèque est télécharger "en local" sur mon serveur, ce dernier n'étant pas relié à Internet. Toutefois, vous pouvez pointer sur la bibliothèque distante. Personnellement, je suis pas fan car si un soucis arrive sur le fichier distant, votre masque ne fonctionne plus
   Quant à la librairie JQuery, il me semble qu'elle est absente dans joomla 4.
5. Ajouter la ligne suivante qui permet de faire un lien sur le plugin jQuery de type masque input.
   
   Bien entendu, cette bibliothèque, je lui ai au préalable téléchargée car je ne travaille pas sur un réseau connecté. Vous pouvez bien entendu faire un lien direct sur le serveur qui stocke cette librairie. Pour la charger, j'utilise :
   

   JHtml::_('script', 'jquery.maskinput.js', array('version' => 'auto','relative'=>true)); 

   Pour que cette ligne fonctionne, puisque nous ne spécifions pas de lien absolu, vous devez placer votre fichier js mentionné ci-dessus dans le répertoire Joomla administrateur template Isis JS :
   
6. Comme nous avons récupéré au point numéro 1 l'ID du champ que nous souhaitons formater, j'ai simplement rajouter le code dans la template d'administration Isis dans le fichier index.php Comme ce plugin doit être lancé à un moment donné, il faut bien lui dire de lancer. Pour faire ce lancement, dans mon fichier index.php dema template, j'ai rajouté le petit code de lancement suivant :
   
7. Dans le code précédent, vous aurez remarqué, j'ai bien spécifié le nom de mon champ ou plutôt son ID auquel je souhaite appliquer le masque de saisie dans le premier paramètre de la fonction jquery (pour mémoire, la fonction JQuery s'appelle $) auquel on adjoint la fonction mask (en JQuery, les fonctions s'enchainent, il faut le savoir) dans laquelle on passe en paramètre le format du masque.

Que faut il en retenir ?

1. La première des choses, c'est qu'une fois qu'on a compris le cheminement, ce qui m'a pris du temps je le reconnais, bah finalement ce n'est pas très compliqué
2. J'aurais pu pour garder "intacte" ma template et procéder au chargement de toutes ces bibliothèque au moyen d'un plugin. Ici j'ai fait "vite" mais pas très propre quand il faut maintenir du code. Tout ca, ça se discute je suis d'accord...
3. j'aurais aussi pu faire un fork/héritage/substitution du fichier d'index. D'un autre coté, corriger ce fichier permettra de le forker avec déjà l'intégration de la bibliothèque. Je dois dire que je reste perplexe entre le bien faire et les faire bien....

Détails

Catégorie : Joomla QR

Je me suis demandé, aujourd'hui, si notre CMS favori Joomla intégré en son cœur, un outil de templating intégré.

Rappel sur le templating

En effet, dans mon cas, je cherche simplement à créer des modèles et à les remplacer par d'autres chaînes de caractères. Pour l'instant je ne suis encore pas complètement certain du choix de mon outil de templating, l'avenir me le dira.

Détails

Catégorie : Joomla QR

Comment faire une surcharge de vos plugins ?

Comment faire une surcharge de module ou de composants ?

Détails

Catégorie : Joomla QR

Hier, je souhaitais trouver une solution simple pour pouvoir comptabiliser le nombre de téléchargement(s) que je vous mets à disposition dans les fichiers ZIP de mes codes-source.

Petit rappel sur glob

Application pratique avec up

Et y a-t-il d'autres avantages ?

Qu'est-ce que j'en tire ?