Connexion S'inscrire

Connectez-vous

Login *
Mot de passe *
Se souvenir de moi

Créer un compte

Les champs marqués d'un astérisque (*) sont requis.
Nom *
Login *
Mot de passe *
Vérification mot de passe *
Email *
Vérification email *
Captcha *

Création d'un composant Joomla (partie 31) Module


Dans cette partie, nous allons créer un module pour notre composant com_djguitariste afin de permettre d'afficher un guitariste à n'importe quelle position de notre template. Ce tutoriel est fait suite à la série de tutoriels sur la création de composant Joomla. mais il peut être appliqué à n'importe quel autre composant. Cliquer ici pour commencer depuis le début.

1 - Introduction

Nous voulons créer un module pour afficher un guitariste à une position donnée sur n'importe quelle page du site. Jusqu'à présent, pour voir un guitariste, il faut passer par les pages de notre composant. Un module permet de briser cela mais avec la possibilité de choisir un emplacement parmi les positions disponibles dans notre template. Pour voir les différentes positions disponibles dans votre template, suivez le tutoriel suivant: Comment visualiser les différentes positions disponibles dans votre template Joomla!. Ce tutoriel se passe au côté client donc vous ne devez pas être dans le dossier administrator.

 

2 - Structure

Tous les modules au côté client sont dans le dossier modules qui se trouve à la racine de votre site Joomla. Chacun des modules est dans un sous-dossier nommé selon la syntaxe mod_nom-du-module (mod underscore nom-du-module). Nous allons nommé notre module mod_djguitariste. Donc commençons par créer le sous-dossier mod_djguitariste dans le dossier modules. Chaque dossier de module doit contenir au moins 2 fichiers: un fichier XML et un fichier PHP portant le même nom que le module (mod_djguitariste.xml et mod_djguitariste.php). Le fichier  XML comme dans le cas de tous les extensions Joomla permet de donner des informations à propos de l'extension (type d'extension, date, nom du créateur, copyright...) et de lister les différents fichiers à charger lors de l'installation. C'est aussi dans ce fichier que nous allons définir les paramètres de configuration de notre module. Nous ajouterons aussi un sous-dossier tmpl qui va contenir les différents calques de vue (dans ce tutoriel, nous aurons juste un calque de vue qui sera nommé default.php). Dans certains cas, on peut avoir du CSS, du Javascript, des images et même des classes PHP dans le dossier d'un module mais nous n'en avons pas besoin pour celui-ci.

Donc l'architecture de notre module devrait ressembler à ceci:

 Nous ajouterons aussi 2 fichiers de langue dans le dossier language/fr-FR/. Ces fichiers porteront les noms fr-FR.mod_djguitariste.ini et fr-FR.mod_djguitariste.sys.ini.

3 Le fichier mod_djguitariste.xml

En haut de ce fichier, nous allons décrire notre extension, ensuite, nous allons définir ses différents fichiers pour que Joomla les charge lors de l'installation et après suivront les paramètres de configuration. 

Les paramètres de notre module sont:

guitariste_id: l'ID du guitariste à afficher

char_limit: Le nombre maximum de caractères  qu'on veut afficher si la biographie est trop longue.

show_link: afficher ou non le lien vers la page détail du guitariste

layout: choix du calque de vue (layout) même si dans notre cas, nous n'en avons qu'un.

item_id: l'Itemid d'un élément du menu qui sera utiliser pour l'affichage de la page du guitariste (si vous appliquez ce tutoriel à un autre composant, peut-être que vous n'en avez pas besoin. Dans ce cas, vous pouvez l'enlever du fichier XML). Je vous conseille fortement de choisir la page qui liste les guitariste sinon vous aurez peut-être besoin de modifier le fichier router.php.

moduleclass_sfx: sert à rajouter un suffixe au nom de la classe qui sera appliquée à la balise DIV qui contiendra tout le contenu (voir default.php pour plus de clarté). 

Voici le contenu du fichier mod_djguitariste.xml:

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="3.0" client="site" methode="upgrade">
  <name>mod_djguitariste</name>
  <author>Docteur Joomla</author>
  <creationDate>Février 2018</creationDate>
  <authorEmail>Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.</authorEmail>
  <authorUrl>www.docteurjoomla.org</authorUrl>
  <version>1.0.0</version>
  <description>MOD_DJGUITARISTE_XML_DESCRIPTION</description>
  
  <files>
    <filename module="mod_djguitariste">mod_djguitariste.php</filename>
    <folder>tmpl</folder>
  </files>
  
  <languages>
    <language tag="fr-FR">fr-FR.mod_djguitariste.ini</language>
    <language tag="fr-FR">fr-FR.mod_djguitariste.sys.ini</language>
  </languages>

  <config>
    <fields name="params">
      <fieldset name="basic">

      <field name="guitarist_id" type="sql"
        label="MOD_DJGUITARISTE_SELECT_GUITARIST"
        query="SELECT id, name FROM #__djguitariste_items"
        key_field="id"    
        value_field="name"
        required="true"
        header="MOD_DJGUITARISTE_SELECT_FIRST_OPTION"
      />
      
      <field name="char_limit" type="integer" default="100"
        first="50" last="500" step="25"
        label="MOD_DJGUITARISTE_CHAR_LIMIT_LABEL"
        description="MOD_DJGUITARISTE_CHAR_LIMIT_DESC"
        />
        
      
      <field
        name="show_link"
        type="radio"
        label="MOD_DJGUITARISTE_FIELD_SHOW_LINK_LABEL"
        description="MOD_DJGUITARISTE_FIELD_SHOW_LINK_DESC"
        class="btn-group btn-group-yesno"
        default="1">
        <option value="1">JSHOW</option>
        <option value="0">JHIDE</option>
      </field>
      
      <field
        name="layout"
        type="list"
        label="MOD_DJGUITARISTE_FIELD_LAYOUT_LABEL"
        description="MOD_DJGUITARISTE_FIELD_LAYOUT_DESC"
        >
        <option value="default.php">JDEFAULT</option>
      </field>
      
      <field
        name="item_id"
        type="menuitem"
        label="MOD_DJGUITARISTE_MENU_LABEL"
        description="MOD_DJGUITARISTE_MENU_DESC"
        required="true"
        />
      </fieldset>
      
      <fieldset name="advanced">
        <field
          name="moduleclass_sfx"
          type="textarea" rows="3"
          label="COM_MODULES_FIELD_MODULECLASS_SFX_LABEL"
          description="COM_MODULES_FIELD_MODULECLASS_SFX_DESC"
        />
      </fieldset>
    </fields>
  </config>
</extension> 

4 - Le fichier mod_djguitariste.php

Dans ce fichier, nous allons premièrement récupérer les différents paramètres de configuration du module, ensuite nous passerons par le modèle DJGuitaristeModelGuitariste (guitariste.php) pour récupérer les informations du guitariste. À la fin, nous chargeons le calque de vue correspondant au paramètre layout.

Voici le contenu du fichier mod_djguitariste.php :

<?php

defined('_JEXEC') or die;

$char_limit   = $params->get('char_limit', 100);
$guitarist_id = $params->get('guitarist_id');
$show_link    = $params->get('show_link');
$layout       = $params->get('layout');
$item_id      = $params->get('item_id');

$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8');

JModelLegacy::addIncludePath(JPATH_SITE.'/components/com_djguitariste/models', 'DJGuitaristeModel');

if((int)$guitarist_id){
  $model = JModelLegacy::getInstance('Guitariste', 'DJGuitaristeModel', array('ignore_request'=>true));    
  $guitariste = $model->getItem((int)$guitarist_id);  
}

//On charge la vue seulement si le guitariste existe
if($guitariste){
  require JModuleHelper::getLayoutPath('mod_djguitariste', $params->get('layout', 'default.php'));
}

5 - Le fichier default.php

Ce fichier doit être placer dans le dossier tmpl et c'est dans ce fichier qu'est défini le code HTML de l'affichage de notre module. Comme mentionné en haut, nous allons faire une concatenation du nom de la classe du DIV global avec la valeur venant du paramètre moduleclass_sfx.

Voici le contenu de ce fichier:

<?php
defined('_JEXEC') or die;

?>
<div class="djguitariste<?php echo $moduleclass_sfx; ?>">
  <h3><?php echo $guitariste->name; ?></h3>
  
  <?php if(!empty($guitariste->youtube_video)): ?>
    <div class="ytvideo">
      <iframe width="280" height="115" src="https://www.youtube.com/embed/<?=$guitariste->youtube_video;?>" frameborder="0" allowfullscreen></iframe>
    </div>
  <?php endif; ?>
  
  <h4><?php echo JText::_('MOD_DJGUITARISTE_BIOGRAPHY'); ?></h4>
  <?php if(strlen($guitariste->biography) > $char_limit): ?>
    <?php echo substr($guitariste->biography, 0 , $char_limit).'...'; ?>
  <?php else: ?>
    <?php echo $guitariste->biography; ?>
  <?php endif; ?>
  
  <?php if($show_link): ?>
    <div class="readmore">
      <a href="/<?php echo JRoute::_("index.php?option=com_djguitariste&view=guitariste&catid=".$guitariste->catslug."&id=".$guitariste->slug.'&Itemid='.$item_id); ?>">
        <?php echo JText::_('MOD_DJGUITARISTE_READMORE'); ?>
      </a>
    </div>
  <?php endif; ?>
</div>

6 - Les fichiers de langue

Ajoutons les fichiers fr-FR.mod_djguitariste.ini et fr-FR.mod_djguitariste.sys.ini dans le dossier language/fr-FR/. Le fichier .sys.ini est utilisé lors de l'installation du module. L'autre fichier est celui qui est utilisé lorsque nous créons une instance du module et lorsque le module est affiché sur le site (en Front End).

Le fichier fr-FR.mod_djguitariste.sys.ini contient:

; @date        2018-02-13
; @author      Docteur Joomla
; @note        All ini files need to be saved as UTF-8


MOD_DJGUITARISTE="Guitariste"
MOD_DJGUITARISTE_XML_DESCRIPTION="Le module 'mod_djguitariste' affiche le guitariste choisi dans le composant de gestion des guitaristes (com_djguitariste)."
MOD_DJGUITARISTE_LAYOUT_DEFAULT="Défaut"

Le fichier fr-FR.mod_djguitariste.ini contient:

; @date        2018-02-13
; @author      Docteur Joomla
; @note        All ini files need to be saved as UTF-8

MOD_DJGUITARISTE="Guitariste"
MOD_DJGUITARISTE_XML_DESCRIPTION="Le module 'mod_djguitariste' affiche le guitariste choisi dans le composant de gestion des guitaristes (com_djguitariste)."
MOD_DJGUITARISTE_LAYOUT_DEFAULT="Défaut"
MOD_DJGUITARISTE_FIELD_SHOW_LINK_LABEL="Lien \"Lire la suite...\""
MOD_DJGUITARISTE_FIELD_SHOW_LINK_DESC="Afficher un lien vers la page détails du guitariste"
MOD_DJGUITARISTE_SELECT_GUITARIST="Le Guitariste"
MOD_DJGUITARISTE_SELECT_FIRST_OPTION="Sélectionnez le guitariste"
MOD_DJGUITARISTE_CHAR_LIMIT_LABEL="Nombre de caractères"
MOD_DJGUITARISTE_CHAR_LIMIT_DESC="Sélectionnez le nombre de caractères à afficher"
MOD_DJGUITARISTE_FIELD_LAYOUT_LABEL="Affichage"
MOD_DJGUITARISTE_FIELD_LAYOUT_DESC="Sélectionnez le layout"

MOD_DJGUITARISTE_BIOGRAPHY="Biographie"
MOD_DJGUITARISTE_READMORE="En savoir plus..."

MOD_DJGUITARISTE_MENU_LABEL="Menu"
MOD_DJGUITARISTE_MENU_DESC="Choisir un élément de menu pour le lien lire la suite"

 

7 -  Fichier d'installation

Commençons par créé un dossier nommé mod_djguitariste sur le bureau ou à un emplacement de votre choix. Copiez y tous les fichiers et dossier du module qui devraient être les suivants: 

Sélectionnez tout contenu du dossier puis faites un clic droit sur l'un des éléments sélectionnés et ensuite Envoyer vers >> Dossier compressé. Renommez le fichier mod_djguitariste_1.0.zip et voilà.

Vous pouvez installer ce module sur votre site Joomla mais rassurez que le composant com_djguitariste soit installé.

8 - Affichage 

Après avoir installé le module, vous pouvez cliquez sur le menu Extensions et ensuite sur Modules pour accéder à la page de gestion des modules. Cliquez sur le bouton nouveau et sélectionnez Guitariste dans la liste des modules.

La page de configuration devrait ressembler à ceci:

N'oubliez pas de sélectionner une position pour l'affichage de votre module. 

Vous pouvez télécharger ce module un peu plus bas sur cette page.

Si vous avez des questions, vous pouvez utiliser le formulaire de contact de ce site ou servir de notre page Facebook.

Lire la suite...

 

 


  • Dernière modification le mercredi, 13 juin 2018 16:28
  • 242
Docteur Joomla

Après plus de 10 ans d'expérience en Joomla, je lance ce Blog pour partager mes connaissances avec les autres développeurs Joomla.