Este es un tutorial que muestra el paso a paso para crear un m¨®dulo frontend b¨¢sico de Áú»¢¶Ä²©. Puede descargar todos los archivos de este m¨®dulo en un archivo ZIP:MiDireccionIP.zip.
Durante este tutorial, usted primero debe construir un m¨®dulo frontend que adicione una nueva secci¨®n en el men¨² My Address y luego convertirla en un m¨¢s avanzado m¨®dulo frontend que haga una petici¨®n HTTP a https://api.seeip.org y mostrar la respuesta - la direcci¨®n IP de su computador - en una nueva p¨¢gina in la reci¨¦n creada secci¨®n del men¨² My Address. A continuaci¨®n, se observa como se ver¨ªa el m¨®dulo creado:
Cree el directorio ²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô en el directorio ³¾¨®»å³Ü±ô´Ç²õ de su instalaci¨®n del frontend de Áú»¢¶Ä²© (por ejemplo, zabbix/ui/modules).
Cree el archivo manifest.json con los metadatos b¨¢sicos del m¨®dulo (consulte la descripci¨®n de los ±è²¹°ù¨¢³¾±ð³Ù°ù´Ç²õ compatibles).
ui/modules/²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô/manifest.json
{
"manifest_version": 2.0,
"id": &±ç³Ü´Ç³Ù;³¾¾±-»å¾±°ù±ð³¦³¦¾±¨®²Ô&±ç³Ü´Ç³Ù;,
"name": "Mi direcci¨®n IP",
"version": "1.0",
"namespace": "²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô",
"description": "Mi direcci¨®n IP externa".
}
El m¨®dulo ya est¨¢ registrado en el frontend. Sin embargo, a¨²n no es visible, ya que a¨²n debe definir su funcionalidad. Una vez que agregue contenido al directorio del m¨®dulo, ver¨¢ los cambios inmediatamente en el frontend de Áú»¢¶Ä²© al actualizar la p¨¢gina.
Este archivo implementa una nueva clase Module que extiende la clase CModule predeterminada. La clase ²Ñ¨®»å³Ü±ô´Ç insertar¨¢ una nueva secci¨®n de men¨² Mi direcci¨®n en el men¨² principal.
El m¨¦todo setAction() especifica una acci¨®n que se ejecutar¨¢ al hacer clic en la secci¨®n del men¨². Para empezar, puede utilizar la acci¨®n predefinida userprofile.edit, que abrir¨¢ la p¨¢gina Perfil de usuario. En la parte III de este tutorial, aprender¨¢ c¨®mo crear una acci¨®n personalizada.
ui/modules/MyAddress/Module.php
<?php
namespace Modules\MyAddress;
use Áú»¢¶Ä²©\Core\CModule,
APP,
CMenuItem;
m¨®dulo de clase extiende CModule {
class Module extends CModule {
public function init(): void {
APP::Component()->get('menu.main')
->add((new CMenuItem(_('My Address')))
->setAction('userprofile.edit'));
}
}
Puede reemplazar 'userprofile.edit'
con otras acciones, por ejemplo, 'charts.view'
(abre gr¨¢ficos personalizados), 'problems.view'
(abre Monitoreo ¡ú Problemas), o 'report.status'
(abre el informe Informaci¨®n del sistema).
En esta parte, mover¨¢ la secci¨®n del men¨² Mi direcci¨®n a la secci¨®n Monitoreo y luego le agregar¨¢ un men¨² anidado.. Como resultado, los usuarios podr¨¢n acceder a dos p¨¢ginas de submen¨² desde la secci¨®n del men¨² Monitoreo ¡ú Mi direcci¨®n.
ui/modules/MyAddress/Module.php
<?php
namespace Modules\MyAddress;
use Áú»¢¶Ä²©\Core\CModule,
APP,
CMenuItem;
class Module extends CModule {
public function init(): void {
APP::Component()->get('menu.main')
->findOrAdd(_('Monitoring'))
->getSubmenu()
->insertAfter(_('Discovery'),
(new CMenuItem(_('Mi direcci¨®n')))->setAction('userprofile.edit')
);
}
}
Una acci¨®n se implementa en dos archivos: actions/MyAddress.php y views/my.address.php. El archivo actions/MyAddress.php se encarga de la implementaci¨®n de la l¨®gica de negocio, mientras que el archivo views/my.address.php es responsable de la vista.
Cree un directorio actions en el directorio MyAddress.
Cree un archivo MyAddress.php en el directorio actions.
La l¨®gica de negocio se definir¨¢ en la clase MyAddress. Esta clase "action" implementar¨¢ cuatro funciones: init(), checkInput(), checkPermissions() y doAction(). La interfaz de Áú»¢¶Ä²© llama a la funci¨®n doAction() cuando se solicita la acci¨®n. Esta funci¨®n es responsable de la l¨®gica de negocio del m¨®dulo.
Los datos deben organizarse como una matriz asociativa. La matriz puede ser multidimensional y contener cualquier dato esperado por la vista.
ui/modules/MyAddress/actions/MyAddress.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);
}
}
Cree un nuevo directorio views en el directorio MyAddress.
Cree un archivo my.address.php en el directorio views y defina la vista del m¨®dulo.
Tenga en cuenta que la variable $data
est¨¢ disponible en la vista sin definirla espec¨ªficamente. El framework pasa autom¨¢ticamente la matriz asociativa a la vista.
ui/modules/MyAddress/views/my.address.php
<?php
(new CHtmlPage())
->setTitle(_('The HTML Title of My Address Page'))
->addItem(new CDiv($data['my-ip']))
->show();
actions
que contenga:my.address
);MyAddress
) como valor para la clave class
del objeto my.address
;my.address
) como valor para la clave view
del objeto my.address
.ui/modules/²Ñ¾±¶Ù¾±°ù±ð³¦³¦¾±¨®²Ô/manifest.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"
}
}
}