10 maj 2018

Magento 2: tworzenie kontrolera i menu w adminie

W poprzednim wpisie omówiono sposób tworzenia kontrolera na froncie. Dzisiaj pokaże jak w Magento 2 wygląda tworzenie kontrolera i menu w adminie.

Routing dla części admina działa na podobnej zasadzie co część frontowa. Mamy więc na przykład https://<magento_url>//admin/catalog/product/index/. Taki adres ma na początku tak zwany adamin uri, który można zdefiniować w konfiguracji. Trzy kolejne części to oczywiście nazwa frontu, nazwa kontrolera i nazwa akcji. Dodatkowo Magento 2 dodaje do takiego adresu parametr key, głównie w celu zapobiegania atakom CSRF.

Jak sprawdzić URI admina?

Aby sprawdzić, jakie URI ma nasza strona w adminie, możemy użyć komendy z konsoli Magento:

php bin/magento info:adminuri

1	php bin/magento info:adminuri

Samo URI docelowo jest konfigurowane w pliku app/etc/env.php.

Struktura katalogów

Dla potrzeby tego wpisu stworzyłam nowy moduł Anna_AdminController. Na początek utwórzmy następujące katalogi dla nowego modułu:

Anna\AdminController\Controller\Adminhtml — w nim tworzymy klasy akcji,
Anna\AdminController\Block\Adminhtml — klasy bloków, odpowiedzialne za dostarczenie danych do templaty,
Anna\AdminController\etc — konfiguracja modułu,
Anna\AdminController\etc\adminhtml — konfiguracja dla modułu dla obszaru adminhtml,
Anna\AdminController\view\adminhtml\templates — definicja templat widoku .phtml,
Anna\AdminController\view\adminhtml\layout — definicja layoutu strony.

Podstawy, jak utworzyć nowy moduł i jak go aktywować są szczegółowo omówione w tym wpisie.

Plik routes.xml

Podobnie, jak dla zwykłego kontrolera, tworzymy plik routes.xml, tylko że w katalogu /etc/adminhtml:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="firstadmincontroller" frontName="firstadmincontroller">
            <module name="Anna_AdminController"/>
        </route>
    </router>
</config>

<?xml version="1.0"?>

</route>

</router>

</config>

W dalszej części stworzymy obsługę dwóch akcji o nazwie index i page.

Tworzenie klasy akcji

Klasy akcji dla admina tworzymy w katalogu Controller\Adminhtml. Dodajemy folder, którego nazwa będzie odnosiła się do nazwy kontrolera i wewnątrz tego katalogu dodajemy naszą pierwszą klasę akcji, która będzie dziedziczyła po klasie Magento\Backend\App\Action:

<?php

declare(strict_types=1);

namespace Anna\AdminController\Controller\Adminhtml\First;

class Index extends \Magento\Backend\App\Action
{
    /**
     * Dispatch request
     *
     * @return \Magento\Framework\Controller\ResultInterface|\Magento\Framework\App\ResponseInterface
     * @throws \Magento\Framework\Exception\NotFoundException
     */
    public function execute()
    {
        $result = $this->resultFactory->create(
            \Magento\Framework\Controller\ResultFactory::TYPE_RAW
        );
        $result->setContents("<h1>Hello admin!</h1>");

        return $result;
    }
}

<?php

declare(strict_types=1);

namespace Anna\AdminController\Controller\Adminhtml\First;

class Index extends \Magento\Backend\App\Action

{

/**

* Dispatch request

* @return \Magento\Framework\Controller\ResultInterface|\Magento\Framework\App\ResponseInterface

* @throws \Magento\Framework\Exception\NotFoundException

public function execute()

{

$result = $this->resultFactory->create(

\Magento\Framework\Controller\ResultFactory::TYPE_RAW

);

$result->setContents("<h1>Hello admin!</h1>");

return $result;

}

W wyniku dostaniemy białą stronę z dużym napisem „Hello admin!„. Kolejnym krokiem będzie teraz stworzenie menu, które będzie zawierało link do naszej akcji.

Tworzenie menu

Teraz dodajmy menu, którego definicja powinna się znaleźć w pliku Anna\AdminController\etc\adminhtml\menu.xml:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>

        <add id="Anna_AdminController::level1"
             title="First Admin Controller"
             translate="title"
             module="Anna_AdminController"
             sortOrder="20"
             resource="Magento_Backend::content"
        />

        <add id="Anna_AdminController::action1"
             title="Action 1"
             module="Anna_AdminController"
             sortOrder="10"
             action="firstadmincontroller/first/index"
             parent="Anna_AdminController::level1"
             resource="Magento_Backend::content"
        />

        <add id="Anna_AdminController::action2"
             title="Action 2"
             module="Anna_AdminController"
             sortOrder="10"
             action="firstadmincontroller/first/page"
             parent="Anna_AdminController::level1"
             resource="Magento_Backend::content"
        />

    </menu>
</config>

<?xml version="1.0"?>

<menu>

<add id="Anna_AdminController::level1"

title="First Admin Controller"

translate="title"

module="Anna_AdminController"

sortOrder="20"

resource="Magento_Backend::content"

<add id="Anna_AdminController::action1"

title="Action 1"

module="Anna_AdminController"

sortOrder="10"

action="firstadmincontroller/first/index"

parent="Anna_AdminController::level1"

resource="Magento_Backend::content"

<add id="Anna_AdminController::action2"

title="Action 2"

module="Anna_AdminController"

sortOrder="10"

action="firstadmincontroller/first/page"

parent="Anna_AdminController::level1"

resource="Magento_Backend::content"

</menu>

</config>

Zamieściłam również definicję dla drugiej akcji, którą zdefiniujemy później. Przyjrzyjmy się bliżej tej konfiguracji. Do głównego elementu menu dodajemy poszczególne części menu za pomocą elementu <add>. Oto pełna lista jego atrybutów:

id — jej wartość to dowolna unikalna nazwa, w przykładzie stworzyliśmy nazwę przy użyciu konwencji Magento: nazwa modułu (tutaj Anna_AdminController) następnie „::„, po czym krótki opis co dany moduł robi (małymi literami).
title — tekst ten będzie widział użytkownik naszego menu.
module — atrybut powinien odpowiadać naszemu modułowi, tutaj Anna_AdminController.
sortOrder — kolejność wyświetlania elementu.
resource — wartość tego atrybutu odnosi się do nazwy reguły ACL (definiowany w pliku /etc/acl.xml danego modułu). Wykorzystana w przykładzie reguła Magento_Backend::content, pochodząca z innego modułu. Dzięki temu możemy określić jakie elementy użytkownik może widzieć oraz mieć dostęp.
parent — odniesienie do elementu rodzica.

Zauważ, że pierwszy element <add> określony w konfiguracji nie ma atrybutu action. Według konwencji najwyższy poziom menu nie posiada hiperłącza, ale stanowi kontener, gdzie składowane są poszczególne linki. W przykładzie dwa elementy menu odwołują się do niego poprzez ustawienie atrybutu parent, który otrzymuje wartość id tego kontenera.

Przykład jak stworzyć własną regułę acl i zastosować ją do menu znajdziesz w tym wpisie.

Strona admina wykorzystująca gotowy layout

Dodajmy najpierw naszą akcję Page:

<?php

declare(strict_types=1);

Namespace Anna\AdminController\Controller\Adminhtml\First;

class Page extends \Magento\Backend\App\Action
{
    /**
     * Dispatch request
     *
     * @return \Magento\Framework\Controller\ResultInterface|\Magento\Framework\App\ResponseInterface
     * @throws \Magento\Framework\Exception\NotFoundException
     */
    public function execute()
    {
        $resultPage = $this->resultFactory->create(\Magento\Framework\Controller\ResultFactory::TYPE_PAGE);

        return  $resultPage;
    }
}

<?php

declare(strict_types=1);

Namespace Anna\AdminController\Controller\Adminhtml\First;

class Page extends \Magento\Backend\App\Action

{

/**

* Dispatch request

* @return \Magento\Framework\Controller\ResultInterface|\Magento\Framework\App\ResponseInterface

* @throws \Magento\Framework\Exception\NotFoundException

public function execute()

{

$resultPage = $this->resultFactory->create(\Magento\Framework\Controller\ResultFactory::TYPE_PAGE);

return $resultPage;

}

Dołączać bloki możemy podobnie jak w części frontowej. Mimo wszystko zaleca się, aby interfejs admina budować na tak zwanych komponentach UI. Na początek należy się zapoznać się z takimi tematami jak:

Tworzenie tabel w bazie danych oraz modeli CRUD,
Tworzenie grida,
Formularz edycji.

Wróćmy do omawianego modułu. W naszym module, w katalogu view/adminhtml/layout potrzebujemy utwórz plik firstadmincontroller_first_page.xml o następujące zawartości:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
             <!-- template from \Anna\AdminController\view\adminhtml\templates\firstcontroller\index.phtml -->
            <block class="Anna\AdminController\Block\Adminhtml\Hello" name="first_admin_controller_hello" template="Anna_AdminController::firstcontroller/index.phtml"/>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

Na podstawie powyższej konfiguracji potrzebujemy utworzyć klasę bloku Anna\AdminController\Block\Adminhtml\Hello w katalogu Anna\AdminController\Block\Adminhtml. Standardową klasą, po której powinien dziedziczyć nasz blok dla obszaru admina, jest klasa Magento\Backend\Block\Template. Plik templaty tworzymy w katalogu Anna\AdminController\view\adminhtml\templates\firstcontroller, gdzie umieszczamy plik index.phtml z zawartością.

Teraz możemy zobaczyć naszą stronę w akcji.

2 komentarze

Magento 2: Tworzenie grida w adminie za pomocą komponentu UI - Web Porgramming
18 września 2023 @ 13:01

[…] Dodawanie routingu w adminie i tworzenie menu zostało szerzej omówione w tym wpisie. […]

Dodanie akcji do istniejącego kontrolera w Magento 2 - Web Programming
15 stycznia 2024 @ 03:02

[…] w jaki sposób skonfigurować kontrolera i jego akcje — zarówno dla obszaru frontend jak i admina. W tym wpisie przedstawię dodanie akcji do istniejącego kontrolera w Magento […]

Magento 2: tworzenie kontrolera i menu w adminie

Jak sprawdzić URI admina?

Struktura katalogów

Plik routes.xml

Tworzenie klasy akcji

Tworzenie menu

Strona admina wykorzystująca gotowy layout

Related Posts

Docker: Nazwa kontenera jest używana przez inny kontener

Magento 2: Object Manager

Magento 2: Wstęp do REST API

2 komentarze

Leave a Reply Close