[comment]: # translation:outdated

[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]: # ({b971a521-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 section de menu *My Address* nouvellement créée.
Voici à quoi ressemblera le module terminé :

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

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

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

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

[comment]: # ({9c416cbb-1d4de634})
##### Ajouter un module vide au frontend Zabbix

1. Créez un répertoire *MyAddress* dans le répertoire *modules* de votre installation du frontend 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 le frontend Zabbix, accédez à la section *Administration → Général → 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 l’hyperlien "Disabled" pour changer le statut du module de "Disabled" à "Enabled" (si le module n’est pas répertorié, consultez la section [résolution des problèmes](/manual/extensions/frontendmodules#installation)).

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

Le module est maintenant enregistré dans le frontend. Cependant, il n’est pas encore visible, car vous devez encore définir la fonctionnalité du module.
Une fois que vous aurez ajouté du contenu au répertoire du module, vous verrez immédiatement les changements dans le frontend Zabbix après avoir actualisé la page.

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

[comment]: # ({db062f15-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 *CModule* par défaut.
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 d'un clic sur la section de menu.
Pour commencer, vous pouvez utiliser l'action prédéfinie *userprofile.edit*, qui ouvrira la page *Profil utilisateur*.
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 *Surveillance → Problèmes*), ou `'report.status'` (ouvre le rapport *Informations système*).
:::

3. Actualisez l'interface Zabbix. Il y a maintenant une nouvelle section *My Address* en bas du menu principal de Zabbix.
Cliquez sur *My Address* pour ouvrir la page *Profil utilisateur*.

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

[comment]: # ({/db062f15-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*** s'occupe de 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()*.
Le frontend 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 la définir spécifiquement.
Le framework passe 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é d'action avec le nom de l'action écrit en minuscules (a-z) et avec des mots séparés par des points (par exemple, `my.address`) ;
- le nom de la classe d'action (`MyAddress`) comme valeur pour la clé `class` de l'objet `my.address` ;
- le nom de la vue d'action (`my.address`) comme valeur pour 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 *Mon adresse → IP externe* pour voir l'adresse IP de votre ordinateur.

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

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