Complete Guide to Beginners: Magento 2 Admin Controller, Layout, Menu, ACL

In this tutorial, I am going to walk through how to create Admin Controller, Layout, Admin Menu, ACL. This tutorial I have specifically created for beginners who recently started working with Magento 2.

Source Code can be downloaded from below Github link https://github.com/skar2019/AdminInterface

Magento devdocs Link: https://devdocs.magento.com/guides/v2.3/ext-best-practices/extension-coding/example-module-adminpage.html

Follow the mentioned steps to create a Magento module.

Step 1: Define your module

File: module.xml

Path : app/code/Magento4u/AdminInterface/etc/module.xml

<?xml version="1.0"?>

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

Step 2 : Register your module

File: registration.php

Path: app/code/Magento4u/AdminInterface/registration.php

<?php
/**
 * Magento4u AdminInterface module registration
 * @package Magento4u\AdminInterface
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magento4u_AdminInterface',
    __DIR__
);

Step 3: Create Admin Router

File: routes.xml

Path: app/code/Magento4u/AdminInterface/etc/adminhtml/routes.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="admininterface" frontName="admininterface">
            <module name="Magento4u_AdminInterface"/>
        </route>
    </router>
</config>

Step 4: Create an Admin menu

File: menu.xml

Path: app/code/Magento4u/AdminInterface/etc/adminhtml/menu.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Magento4u_AdminInterface::admininterface_parent" title="Magento4u AdminInterface" translate="title" module="Magento4u_AdminInterface" sortOrder="20"  resource="Magento4u_AdminInterface::admininterface_parent"/>
        <add id="Magento4u_AdminInterface::admininterface_child" title="AdminInterface Display" action="admininterface/index/index" translate="title" module="Magento4u_AdminInterface" sortOrder="10" parent="Magento4u_AdminInterface::admininterface_parent" resource="Magento4u_AdminInterface::admininterface_child" />
    </menu>
</config>

Step 5: Create ACL

File: acl.xml

Path: app/code/Magento4u/AdminInterface/etc/acl.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento4u_AdminInterface::admininterface_parent" title="Magento4u AdminInterface" translate="title">
                    <resource id="Magento4u_AdminInterface::admininterface_child" title="AdminInterface Display" translate="title"/>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Step 5 : Create Admin Controller

Path : app/code/Magento4u/AdminInterface/Controller/Adminhtml/Index/Index.php

<?php

namespace Magento4u\AdminInterface\Controller\Adminhtml\Index;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\Controller\ResultInterface;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{

    /**
     * Authorization level of a basic admin session
     *
     * @see _isAllowed()
     */
    const ADMIN_RESOURCE = 'Magento4u_AdminInterface::admininterface_child';

    /**
     * Index constructor.
     * @param Context $context
     * @param PageFactory $resultPageFactory
     */
    public function __construct(
        Context $context,
        PageFactory $resultPageFactory
    )
    {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    /**
     * Execute action based on request and return result
     * @return ResponseInterface|ResultInterface|void
     */
    public function execute()
    {
        $this->_view->loadLayout();
        $this->_setActiveMenu('Magento4u_AdminInterface::product_onboarding_widget');
        $this->_view->getPage()->getConfig()->getTitle()->set(__('Admin Interface Display'));
        $this->_view->renderLayout();
    }
}

Step 6 : Create block class

Path : Magento4u\AdminInterface\Block\Adminhtml\Display.php

<?php

namespace Magento4u\AdminInterface\Block\Adminhtml;

use Magento\Backend\Block\Template;
use Magento\Backend\Block\Template\Context;

class Display extends Template
{

    /**
     * Display constructor.
     * @param Context $context
     */
    public function __construct(
        Context $context
    )
    {
        parent::__construct($context);
    }

}

Step 7 : Create Layout XML

Path : app/code/Magento4u/AdminInterface/view/adminhtml/layout/admininterface_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento4u\AdminInterface\Block\Adminhtml\Display" name="admininterface_display" template="Magento4u_AdminInterface::display.phtml"/>
        </referenceContainer>
    </body>
</page>

Step 8 : Create PHTML file

Path : app/code/Magento4u/AdminInterface/view/adminhtml/templates/display.phtml

This is the content from a phtml file

Step 9: Activate the module

After creating all these files run below command in the Magento root directory

php bin/magento setup:upgrade

php bin/magento setup:di:compile

Step 10: Validate ACL entry are created or not

• Navigate to Magento Admin –> System –> User Roles –> Select Any Role

• Then Click on –> Role Resources –> Resource Access –> Select Custom

• Then Check those 2 ACL entry ‘Magento4u AdminInterface’ and ‘AdminInterface Display’

• Save the role

Step 11: Validate Admin

Log in to Admin and you are expected to see the module has added an admin menu in the Left Panel

Step 12: Final Validation

Access the newly created URL, the pattern for any URL in Magento is

<router frontName>/<controller folder name>/<controller name>

In our case, URL would be

http://<magento admin URL>/<magneto admin front name>/admininterface/index/index/

Please let me know if you face any difficulty, when you create your module.