Cet article fait partie du tutoriel "Développer un composant MVC pour Joomla 4.x". Il est conçu pour être un tutoriel de programmation à suivre, donc si vous n'avez pas lu les parties précédentes du tutoriel, il est recommandé de le faire.

Votre premier composant

Dans cet article, nous verrons comment créer et installer un composant Joomla! de base, que nous appellerons de manière inventive le composant "Hello World".

Pour commencer, vous devez d'abord utiliser votre gestionnaire de fichiers préféré pour créer un répertoire pour le composant Hello World !. Ce répertoire peut être situé n'importe où sur votre système de fichiers, tant qu'il se trouve en dehors du répertoire d'installation de Joomla!. Pour cet exemple, nous nommerons le répertoire com_helloworld (le préfixe com signifie "composant" et helloworld est le nom de notre composant). C'est une excellente façon de gérer plusieurs projets en même temps ! Techniquement, nous pouvons nommer ce dossier comme bon nous semble, mais il est toujours judicieux d'utiliser des noms significatifs !

Ensuite, à l'intérieur de ce répertoire, nous devons créer quelques fichiers. Comme ce composant aura à la fois une partie avant (visible aux visiteurs du site) et une partie arrière (utilisée par les administrateurs du site), nous aurons besoin de deux sous-dossiers. Créez un sous-dossier appelé 'site' et un autre appelé 'admin'. Encore une fois, nous pouvons les appeler comme bon nous semble, car nous indiquerons à Joomla! où se trouvent nos fichiers et où ils doivent être placés dans l'installation de Joomla! via notre fichier manifeste que nous allons créer. En utilisant votre gestionnaire de fichiers préféré, créez les fichiers suivants. Au fur et à mesure que vous créez les fichiers, ajoutez le code source de chaque fichier, qui peut être trouvé dans les détails du fichier.

1 helloworld.xml

Un fichier manifeste XML qui indique à Joomla! comment installer notre composant.

2 admin/services/provider.php Indique à Joomla! comment initialiser le composant.
3 admin/src/Controller/DisplayController.php Le contrôleur MVC pour la page "Hello World" avec laquelle nous allons commencer.
4 admin/src/View/Hello/HtmlView.php La vue MVC pour la page "Hello World" avec laquelle nous allons commencer.
5 admin/tmpl/hello/default.php Le modèle HTML/PHP pour la page "Hello World".
 

Détails du fichier

helloworld.xml

Il s'agit d'un fichier manifeste qui décrit le composant et sa configuration à Joomla! Il est utilisé lors de l'installation pour copier les fichiers du composant dans les emplacements corrects, déclencher l'installation de la base de données, configurer l'espace de noms PHP du composant, etc ...

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" method="upgrade">
<!--  L'attribut 'version' pour la balise 'extension' n'est plus utilisé. -->

    <name>Hello World</name>
    <!-- Les éléments suivants sont facultatifs et exempts de contraintes de formatage. -->
    <creationDate>December 2020</creationDate>
    <!-- Auteur fictif, n'hésitez pas à le remplacer partout où vous le voyez.-->
    <author>John Smith</author>
    <authorUrl>https://smith.ca</authorUrl>
    <copyright>John Smith</copyright>
    <license>GPL v3</license>
    <!--  The version string is recorded in the components table -->
    <version>0.0.1</version>
    <!-- The description is optional and defaults to the name -->
    <description>
        A hello world component!
    </description>

    <!-- Il s'agit de l'espace de noms PHP sous lequel le code de l'extension est organisé. Il devrait suivre ce format :
    
    Vendor\Component\ComponentName

    "Vendor" can be your company or your own name
    
   "Vendor" peut être le nom de votre entreprise ou votre propre nom.

La section "ComponentName" DOIT correspondre au nom utilisé partout ailleurs pour votre composant. Quel que soit le nom de ce fichier XML, l'espace de noms doit correspondre (en ignorant la casse).
    -->
    <namespace path="src/">JohnSmith\Component\HelloWorld</namespace>
            
    <administration>
        <!-- Le lien qui apparaîtra dans le menu "Composants" du panneau d'administration : -->
        <menu link="index.php?option=com_helloworld">Hello World</menu>
        <!-- Liste des fichiers et dossiers à copier. Notez l'attribut 'folder'. C'est le nom du dossier dans votre package de composant à partir duquel effectuer la copie : -->
        <files folder="admin/">
            <folder>services</folder>
            <folder>src</folder>
            <folder>tmpl</folder>
        </files>
    </administration>

</extension>

 

`admin/services/provider.php` est un fichier spécial qui indique à Joomla! comment initialiser le composant, c'est-à-dire quels services il nécessite et comment ils doivent être fournis.

<?php

defined('_JEXEC') or die;

use Joomla\CMS\Dispatcher\ComponentDispatcherFactoryInterface;
use Joomla\CMS\Extension\ComponentInterface;
use Joomla\CMS\Extension\MVCComponent;
use Joomla\CMS\Extension\Service\Provider\ComponentDispatcherFactory;
use Joomla\CMS\Extension\Service\Provider\MVCFactory;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;
use Joomla\DI\Container;
use Joomla\DI\ServiceProviderInterface;

return new class implements ServiceProviderInterface {
    
    public function register(Container $container): void {
        $container->registerServiceProvider(new MVCFactory('\\JohnSmith\\Component\\HelloWorld'));
        $container->registerServiceProvider(new ComponentDispatcherFactory('\\JohnSmith\\Component\\HelloWorld'));
        $container->set(
            ComponentInterface::class,
            function (Container $container) {
                $component = new MVCComponent($container->get(ComponentDispatcherFactoryInterface::class));
                $component->setMVCFactory($container->get(MVCFactoryInterface::class));

                return $component;
            }
        );
    }
};
 

`admin/src/Controller/DisplayController.php`

Le contrôleur MVC pour notre première vue, "hello". À mesure que notre composant devient plus complexe, le contrôleur d'une page gérera la récupération du modèle, les soumissions de formulaire, etc. Ici, il définit simplement sa vue par défaut et laisse le reste à son parent.

<?php

namespace JohnSmith\Component\HelloWorld\Administrator\Controller;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2020 John Smith. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

/**
 * Default Controller of HelloWorld component
 *
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 */
class DisplayController extends BaseController {
    /**
     * The default view for the display method.
     *
     * @var string
     */
    protected $default_view = 'hello';
    
    public function display($cachable = false, $urlparams = array()) {
        return parent::display($cachable, $urlparams);
    }
    
}
 

`admin/src/View/Hello/HtmlView.php`

Il s'agit de l'objet de vue MVC pour notre première page. Le rôle d'un objet de vue est de gérer la configuration d'un modèle de vue - sélectionner une mise en page, récupérer JavaScript, générer des barres d'outils, etc. Pour simplement charger notre page "hello world", nous déléguerons le travail d'initialisation de la vue à Joomla!

<?php

namespace JohnSmith\Component\HelloWorld\Administrator\View\Hello;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2020 John Smith. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

/**
 * Main "Hello World" Admin View
 */
class HtmlView extends BaseHtmlView {
    
    /**
     * Display the main "Hello World" view
     *
     * @param   string  $tpl  The name of the template file to parse; automatically searches through the template paths.
     * @return  void
     */
    function display($tpl = null) {
        parent::display($tpl);
    }

}

 

`admin/tmpl/hello/default.php`

Ce fichier contient le modèle de la page. Il est utilisé pour rendre la page en utilisant la configuration effectuée par l'objet de vue.

Lorsqu'aucune mise en page spécifique n'est demandée pour une vue, Joomla! chargera le modèle du fichier default.php, c'est pourquoi nous utilisons ce nom de fichier.

<?php

/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2020 John Smith. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE
 */

 // No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2>Hello world!</h2>

 

Installation du composant Joomla!

L'installation du composant se fait généralement en suivant ces étapes :

1. **Archivage :** Regroupez tous les fichiers du composant dans une archive, comme un fichier ZIP.

2. **Panneau d'administration Joomla! :** Connectez-vous au panneau d'administration de votre site Joomla!.

3. **Gestionnaire d'extensions :** Accédez à l'onglet "Extensions" dans le panneau d'administration, puis sélectionnez "Gestionnaire d'extensions".

4. **Téléchargement :** Sélectionnez l'onglet "Installer" et téléchargez le fichier d'archive ZIP contenant votre composant.

5. **Installation :** Cliquez sur le bouton "Installer" pour installer le composant depuis le fichier ZIP.

6. **Vérification :** Une fois l'installation terminée, vérifiez si le composant apparaît dans la liste des extensions installées.

7. **Configuration :** En fonction du composant, vous pourriez avoir besoin de le configurer via le gestionnaire d'extensions ou d'autres paramètres spécifiques au composant.

8. **Vérification sur le site :** Accédez à la partie frontale de votre site Joomla! et assurez-vous que le composant fonctionne comme prévu.

N'oubliez pas de consulter la documentation spécifique à votre composant pour des instructions détaillées d'installation et de configuration.

Tester le composant

Une fois que le composant est installé, cliquez sur la section "Composants" dans le menu à gauche du panneau d'administration. Vous devriez maintenant voir un nouveau lien sous cette section intitulé "Hello World". C'est le lien détaillé dans le fichier manifeste du composant. Si vous cliquez dessus, vous devriez voir la page "Hello World".

Félicitations ! Vous avez créé votre premier composant Joomla ! Maintenant, commençons à le rendre utile.