[comment]: # aside:1

[comment]: # ({b311df1e-8fe7205c})
# Créer un module (tutoriel)

[comment]: # ({/b311df1e-8fe7205c})

[comment]: # ({98067368-5fb5b83a})
Il s'agit d'un tutoriel étape par étape qui montre comment créer un module frontal Zabbix simple.
Vous pouvez télécharger tous les fichiers de ce module sous forme d'archive ZIP : [MyAddress.zip](../../../../assets/en/devel/modules/examples/MyAddress.zip).

[comment]: # ({/98067368-5fb5b83a})

[comment]: # ({5fe8674d-5ce71b9d})
### Ce que vous allez créer

Au cours de ce tutoriel, vous allez d'abord créer un module d'interface qui ajoute une nouvelle section de menu *My Address*, puis le convertir en un [module d'interface plus avancé](#part-iii---module-action) qui effectue une requête HTTP vers *https://api.seeip.org* et affiche la réponse - l'adresse IP de votre ordinateur - sur une nouvelle page dans la nouvelle section de menu *My Address* créée.

Voici à quoi ressemblera le module terminé :

![](../../../../assets/en/devel/modules/tutorials/module/my_address_finished.png){width="600"}

[comment]: # ({/5fe8674d-5ce71b9d})

[comment]: # ({a5c86d2c-8c2bcd9e})
### Partie I - Nouvelle section de menu

[comment]: # ({/a5c86d2c-8c2bcd9e})

[comment]: # ({9c416cbb-1d4de634})
##### Ajouter un module vide à l'interface Zabbix

1. Créez un répertoire *MyAddress* dans le répertoire *modules* de votre installation de l'interface Zabbix (par exemple, *zabbix/ui/modules*).

2. Créez un fichier *manifest.json* avec les métadonnées de base du module (voir la description des [paramètres](../file_structure/manifest) pris en charge).

**ui/modules/MyAddress/manifest.json**

```json
{
    "manifest_version": 2.0,
    "id": "my-address",
    "name": "My IP Address",
    "version": "1.0",
    "namespace": "MyAddress",
    "description": "My External IP Address."
}
```

3. Dans l'interface Zabbix, accédez à la section *Administration → General → Modules* et cliquez sur le bouton *Scan directory*.

![](../../../../assets/en/devel/modules/tutorials/widget/scan_dir.png)

4. Repérez le nouveau module *My IP Address* dans la liste et cliquez sur le lien hypertexte "Disabled" pour modifier l'état du module de "Disabled" à "Enabled" (si le module n'apparaît pas dans la liste, consultez la section [troubleshooting](/manual/extensions/frontendmodules#installation)).

![](../../../../assets/en/devel/modules/tutorials/module/module_register.png){width="600"}

Le module est maintenant enregistré dans l'interface. Cependant, il n'est pas encore visible, car vous devez encore définir sa fonctionnalité.
Une fois que vous ajoutez du contenu au répertoire du module, les modifications apparaîtront immédiatement dans l'interface Zabbix après actualisation de la page.

[comment]: # ({/9c416cbb-1d4de634})

[comment]: # ({64c4a481-d88b8114})
##### Créer une section de menu

1. Créez un fichier *Module.php* dans le répertoire *MyAddress*.

Ce fichier implémente une nouvelle classe *Module* qui étend la classe par défaut *CModule*.
La classe *Module* insérera une nouvelle section de menu *My Address* dans le menu principal.

La méthode *setAction()* spécifie une action à exécuter lors du clic sur la section de menu.
Pour commencer, vous pouvez utiliser l'action prédéfinie *userprofile.edit*, qui ouvrira la page *User profile*.
Dans la [partie III](#part-iii---module-action) de ce tutoriel, vous apprendrez à créer une action personnalisée.

**ui/modules/MyAddress/Module.php**

```php
<?php

namespace Modules\MyAddress;

use Zabbix\Core\CModule,
    APP,
    CMenuItem;

class Module extends CModule {

    public function init(): void {
        APP::Component()->get('menu.main')
            ->add((new CMenuItem(_('My Address')))
            ->setAction('userprofile.edit'));
    }
}
```

:::noteclassic
Vous pouvez remplacer `'userprofile.edit'` par d'autres actions, par exemple `'charts.view'` (ouvre les graphiques personnalisés), `'problems.view'` (ouvre *Monitoring → Problems*), ou `'report.status'` (ouvre le rapport *System information*).
:::

3. Actualisez l'interface Zabbix. Une nouvelle section *My Address* apparaît désormais en bas du menu principal de Zabbix.
Cliquez sur *My Address* pour ouvrir la page *User profile*.

![](../../../../assets/en/devel/modules/tutorials/module/my_address_top_menu.png){width="600"}

[comment]: # ({/64c4a481-d88b8114})

[comment]: # ({89dbfda8-5c3fc480})
### Partie II - Changement d'emplacement de la section de menu

Dans cette partie, vous allez déplacer la section du menu *Mon adresse* vers la section *Surveillance*.
En conséquence, les utilisateurs pourront accéder à deux pages de sous-menu à partir de la section de menu *Surveillance → Mon adresse*.

1. Ouvrez et modifiez le fichier *Module.php*.

**ui/modules/MonAdresse/Module.php**

```php
<?php

namespace Modules\MyAddress;
    APP,
    CMenuItem ;

class Module extends CModule {

    class Module extends CModule {
        APP::Component()->get('menu.main')
            ->findOrAdd(_('Surveillance'))
                ->getSous-menu()
                    ->insertAfter(_('Discovery'),
                        (new CMenuItem(_('My Address')))->setAction('userprofile.edit')
                    );
    }
}
```

2. Actualisez l'interface Zabbix. Développez la section du menu *Surveillance* et observez que la section *Mon adresse* se trouve désormais sous la section *Découverte*.

![](../../../../assets/en/devel/modules/tutorials/module/my_address_monitoring.png){width="600"}

[comment]: # ({/89dbfda8-5c3fc480})

[comment]: # ({6061bdad-8798eff6})
### Partie III - Action du module

Une action est implémentée dans deux fichiers - *actions/MyAddress.php* et *views/my.address.php*.
Le fichier ***actions/MyAddress.php*** prend en charge l'implémentation de la logique métier, tandis que le fichier ***views/my.address.php*** est responsable de la vue.

1. Créez un répertoire *actions* dans le répertoire *MyAddress*.

2. Créez un fichier *MyAddress.php* dans le répertoire *actions*.

La logique de l'action sera définie dans la classe *MyAddress*.
Cette classe d'action implémentera quatre fonctions : *init()*, *checkInput()*, *checkPermissions()* et *doAction()*.
L'interface Zabbix appelle la fonction *doAction()* lorsque l'action est demandée.
Cette fonction est responsable de la logique métier du module.

::: noteimportant
Les données doivent être organisées sous forme de tableau associatif.
Le tableau peut être multidimensionnel et peut contenir toutes les données attendues par la vue.
:::

**ui/modules/MyAddress/actions/MyAddress.php**

```php
<?php

namespace Modules\MyAddress\Actions;

use CController,
    CControllerResponseData;

class MyAddress extends CController {

    public function init(): void {
        $this->disableCsrfValidation();
    }

    protected function checkInput(): bool {
        return true;
    }

    protected function checkPermissions(): bool {
        return true;
    }

    protected function doAction(): void {
        $data = ['my-ip' => file_get_contents("https://api.seeip.org")];
        $response = new CControllerResponseData($data);
        $this->setResponse($response);
    }
}
```

3. Créez un nouveau répertoire *views* dans le répertoire *MyAddress*.

4. Créez un fichier *my.address.php* dans le répertoire *views* et définissez la vue du module.

Notez que la variable `$data` est disponible dans la vue sans avoir besoin d'être définie explicitement.
Le framework transmet automatiquement le tableau associatif à la vue.

**ui/modules/MyAddress/views/my.address.php**

```php
<?php

(new CHtmlPage())
    ->setTitle(_('The HTML Title of My Address Page'))
    ->addItem(new CDiv($data['my-ip']))
    ->show();
```

5. L'action du module doit être enregistrée dans le fichier *manifest.json*. Ouvrez *manifest.json* et ajoutez un nouvel objet `actions` qui contient :

-   la clé de l'action avec le nom de l'action écrit en minuscules (a-z) et avec les mots séparés par des points (par exemple, `my.address`) ;
-   le nom de la classe d'action (`MyAddress`) comme valeur de la clé `class` de l'objet `my.address` ;
-   le nom de la vue de l'action (`my.address`) comme valeur de la clé `view` de l'objet `my.address`.

**ui/modules/MyAddress/manifest.json**

```json
{
    "manifest_version": 2.0,
    "id": "my-address",
    "name": "My IP Address",
    "version": "1.0",
    "namespace": "MyAddress",
    "description": "My External IP Address.",
    "actions": {
        "my.address": {
            "class": "MyAddress",
            "view": "my.address"
        }
    }
}
```

6. Actualisez l'interface Zabbix. Cliquez sur *My address → External IP* pour voir l'adresse IP de votre ordinateur.

![](../../../../assets/en/devel/modules/tutorials/module/my_address_finished.png){width="600"}

[comment]: # ({/6061bdad-8798eff6})