[comment]: # aside:1

[comment]: # ({b311df1e-8fe7205c})
# Erstellen eines Moduls (Tutorial)

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

[comment]: # ({98067368-5fb5b83a})
Dies ist ein Schritt-für-Schritt-Tutorial, das zeigt, wie man ein einfaches Zabbix-Frontend-Modul erstellt.
Sie können alle Dateien dieses Moduls als ZIP-Archiv herunterladen: [MyAddress.zip](../../../../assets/en/devel/modules/examples/MyAddress.zip).

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

[comment]: # ({5fe8674d-5ce71b9d})
### Was Sie erstellen werden

In diesem Tutorial erstellen Sie zunächst ein Frontend-Modul, das einen neuen Menübereich *My Address* hinzufügt, und wandeln es anschließend in ein [fortgeschritteneres](#part-iii---module-action) Frontend-Modul um, das eine HTTP-Anfrage an *https://api.seeip.org* sendet und die Antwort - die IP-Adresse Ihres Computers - auf einer neuen Seite im neu erstellten Menübereich *My Address* anzeigt. So wird das fertige Modul aussehen:

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

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

[comment]: # ({a5c86d2c-8c2bcd9e})
### Teil I - Neuer Menübereich

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

[comment]: # ({9c416cbb-1d4de634})
##### Ein leeres Modul zum Zabbix Frontend hinzufügen

1. Erstellen Sie ein Verzeichnis *MyAddress* im Verzeichnis *modules* Ihrer Zabbix Frontend-Installation (zum Beispiel *zabbix/ui/modules*).

2. Erstellen Sie eine Datei *manifest.json* mit den grundlegenden Metadaten des Moduls (siehe die Beschreibung der unterstützten [Parameter](../file_structure/manifest)).

**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. Wechseln Sie im Zabbix Frontend zu *Administration → General → Modules* und klicken Sie auf die Schaltfläche *Scan directory*.

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

4. Suchen Sie in der Liste nach dem neuen Modul *My IP Address* und klicken Sie auf den Hyperlink "Disabled", um den Status des Moduls von "Disabled" auf "Enabled" zu ändern (falls das Modul nicht aufgeführt ist, siehe Abschnitt [Fehlerbehebung](/manual/extensions/frontendmodules#installation)).

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

Das Modul ist nun im Frontend registriert. Es ist jedoch noch nicht sichtbar, da Sie die Funktionalität des Moduls noch definieren müssen.
Sobald Sie Inhalte zum Modulverzeichnis hinzufügen, sehen Sie die Änderungen im Zabbix Frontend sofort nach dem Aktualisieren der Seite.

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

[comment]: # ({64c4a481-d88b8114})
##### Einen Menüabschnitt erstellen

1. Erstellen Sie eine Datei *Module.php* im Verzeichnis *MyAddress*.

Diese Datei implementiert eine neue Klasse *Module*, die die Standardklasse *CModule* erweitert.
Die Klasse *Module* fügt einen neuen Menüabschnitt *My Address* in das Hauptmenü ein.

Die Methode *setAction()* legt eine Aktion fest, die beim Klicken auf den Menüabschnitt ausgeführt wird.
Zu Beginn können Sie die vordefinierte Aktion *userprofile.edit* verwenden, die die Seite *User profile* öffnet.
In [Teil III](#part-iii---module-action) dieses Tutorials erfahren Sie, wie Sie eine benutzerdefinierte Aktion erstellen.

**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
Sie können `'userprofile.edit'` durch andere Aktionen ersetzen, zum Beispiel `'charts.view'` (öffnet benutzerdefinierte Diagramme), `'problems.view'` (öffnet *Monitoring → Problems*) oder `'report.status'` (öffnet den Bericht *System information*).
:::

3. Aktualisieren Sie das Zabbix Frontend. Unten im Zabbix-Hauptmenü gibt es jetzt einen neuen Abschnitt *My Address*.
Klicken Sie auf *My Address*, um die Seite *User profile* zu öffnen.

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

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

[comment]: # ({89dbfda8-5c3fc480})
### Teil II – Änderung der Position des Menüabschnitts

In diesem Teil verschieben Sie den Menüabschnitt *Meine Adresse* in den Abschnitt *Überwachung* und fügen ihm dann ein verschachteltes Menü hinzu.
Dadurch können Benutzer vom Menüabschnitt *Überwachung → Meine Adresse* auf zwei Untermenüseiten zugreifen.

1. Öffnen und bearbeiten Sie die Datei *Module.php*.

**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')
->findOrAdd(_('Monitoring'))
->getSubmenu()
->insertAfter(_('Discovery'),
(new CMenuItem(_('My Address')))->setAction('userprofile.edit')
);
}
}
```

2. Aktualisieren Sie das Zabbix-Frontend. Erweitern Sie den Menüabschnitt *Monitoring* und beachten Sie, dass sich der Abschnitt *My address* jetzt unter dem Abschnitt *Discovery* befindet.

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

3. Um verschachtelte Seiten zum Menüabschnitt *My Address* hinzuzufügen, öffnen und bearbeiten Sie die Datei *Module.php* erneut.

Dieser Schritt erstellt zwei Unterabschnitte:

- *Externe IP*, die eine neue „my.address“-Aktion ausführt, die in den nächsten Schritten definiert wird;
- *Benutzerprofil*, das die vordefinierte „userprofile.edit“-Aktion ausführt, um die Seite „Benutzerprofil*“ zu öffnen.

Beachten Sie, dass Sie für das verschachtelte Menü zusätzlich zu den in den vorherigen Schritten verwendeten Klassen, die Klasse *CMenu* verwenden müssen.

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

```php
<?php

namespace Modules\MyAddress;

use Zabbix\Core\CModule,
APP,
CMenu,
CMenuItem;

class Module extends CModule {

public function init(): void {
APP::Component()->get('menu.main')
->findOrAdd(_('Monitoring'))
->getSubmenu()
->insertAfter(_('Discovery'),
(new CMenuItem(_('My Address')))->setSubMenu(
new CMenu([
(new CMenuItem(_('External IP')))->setAction('my.address'),
(new CMenuItem(_('User profile')))->setAction('userprofile.edit')
])
)
);
}
}
```

4. Aktualisieren Sie das Zabbix-Frontend. Beachten Sie, dass der Menüabschnitt *My address* jetzt ein Menü der dritten Ebene mit zwei Seiten enthält - *External IP* und *User profile*.

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

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

[comment]: # ({6061bdad-8798eff6})
### Teil III - Modulaktion

Eine Aktion wird in zwei Dateien implementiert - *actions/MyAddress.php* und *views/my.address.php*.
Die Datei ***actions/MyAddress.php*** übernimmt die Implementierung der Geschäftslogik, während die Datei ***views/my.address.php*** für die Ansicht verantwortlich ist.

1. Erstellen Sie ein Verzeichnis *actions* im Verzeichnis *MyAddress*.

2. Erstellen Sie eine Datei *MyAddress.php* im Verzeichnis *actions*.

Die Aktionslogik wird in der Klasse *MyAddress* definiert.
Diese Aktionsklasse implementiert vier Funktionen: *init()*, *checkInput()*, *checkPermissions()* und *doAction()*.
Das Zabbix Frontend ruft die Funktion *doAction()* auf, wenn die Aktion angefordert wird.
Diese Funktion ist für die Geschäftslogik des Moduls verantwortlich.

::: noteimportant
Die Daten müssen als assoziatives Array organisiert sein.
Das Array kann mehrdimensional sein und beliebige Daten enthalten, die von der Ansicht erwartet werden.
:::

**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. Erstellen Sie ein neues Verzeichnis *views* im Verzeichnis *MyAddress*.

4. Erstellen Sie eine Datei *my.address.php* im Verzeichnis *views* und definieren Sie die Modulansicht.

Beachten Sie, dass die Variable `$data` in der Ansicht verfügbar ist, ohne dass sie speziell definiert werden muss.
Das Framework übergibt das assoziative Array automatisch an die Ansicht.

**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. Die Modulaktion muss in der Datei *manifest.json* registriert werden. Öffnen Sie *manifest.json* und fügen Sie ein neues Objekt `actions` hinzu, das Folgendes enthält:

-   den Aktionsschlüssel mit dem Aktionsnamen in Kleinbuchstaben (a-z) und mit durch Punkte getrennten Wörtern (zum Beispiel `my.address`);
-   den Namen der Aktionsklasse (`MyAddress`) als Wert für den Schlüssel `class` des Objekts `my.address`;
-   den Namen der Aktionsansicht (`my.address`) als Wert für den Schlüssel `view` des Objekts `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. Aktualisieren Sie das Zabbix Frontend. Klicken Sie auf *My address → External IP*, um die IP-Adresse Ihres Computers anzuzeigen.

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

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