Reading list Switch to dark mode

    Magento 2 Development 15: Admin Menu and Controller

    Updated 7 March 2024

    We have been working on the front-end for a very long time. Now let’s implement similar functionality for admin too. In this blog, we will create an admin menu and controller.

    Route

    If you recall, when we were creating a controller for front-end. The first thing that we created was routes.xml. For admin, we need to create the route file in etc/adminhtml/routes.xml

    Code for etc/adminhtml/routes.xml file

    <?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="blogmanager" frontName="blog">
                <module name="Webkul_BlogManager" />
            </route>
        </router>
    </config>

    As you can see it is very similar to the front-end one. The only thing we have changed here is the router id.

    Unlike in the front-end, in admin, we can not directly enter urls in the browser because admin urls are secured with a secret key by Magento by default.

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    15MU7kh

    Admin Menu

    So we need to create a menu first. To create the menu we need to create menu.xml as etc/adminhtml/menu.xml

    Code for etc/adminhtml/menu.xml file

    <?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="Webkul_BlogManager::blogmanager" translate="title" title="Blog Management" module="Webkul_BlogManager" sortOrder="10" resource="Webkul_BlogManager::blogmanager"/>
            
            <add id="Webkul_BlogManager::manage" translate="title" title="Manage" module="Webkul_BlogManager" sortOrder="10" resource="Webkul_BlogManager::manage" parent="Webkul_BlogManager::blogmanager" action="blog/manage/index"/>
        </menu>
    </config>

    Here we have added the menus under the menu tag with add tag. The first menu with the title “Blog Management” is the parent menu and inside that parent menu we have added a child menu with the title “Manage”.

    The id attribute is to give a unique identification for the menu. In the translate attribute, we have mentioned that we want to translate the title. With the title attribute, we can manage the menu’s label. In the module attribute, we mention the module name with which this menu is related. We can position the menus with the sortOrder attribute.

    The resource attribute is related to Access Control List (ACL). It is required when we create different admin roles. We will see about ACL in detail in the later part of this series.

    If the menu is a child menu of some menu then we need to mention the parent menu’s id in the parent attribute.
    With the action attribute, we give the URL that we want to browse when this menu is clicked. It should be in frontName/controllerName/actionName format.

    If you check on the admin side you will see our menu as,

    2021-03-02_20-14

    Controller

    Now let’s create the controller file. For all the controller files related to admin, we need to create an Adminhtml folder under the Controller folder. To create the index action we need to create the Controller/Adminhtml/Manage/Index.php file,

    Code for Controller/Adminhtml/Manage/Index.php file file

    <?php
    namespace Webkul\BlogManager\Controller\Adminhtml\Manage;
    
    use Magento\Backend\App\Action;
    use Magento\Backend\App\Action\Context;
    use Magento\Framework\View\Result\PageFactory;
    
    class Index extends Action
    {
        /**
         * @var Magento\Backend\App\Action\Context
         */
        protected $context;
    
        /**
         * @var Magento\Framework\View\Result\PageFactory
         */
        protected $resultPageFactory;
    
        /**
         * Dependency Initilization
         *
         * @param Context $context
         * @param PageFactory $resultPageFactory
         */
        public function __construct(
            Context $context,
            PageFactory $resultPageFactory
        ) {
            parent::__construct($context);
            $this->resultPageFactory = $resultPageFactory;
        }
    
        /**
         * Provides content
         *
         * @return \Magento\Framework\View\Result\Page
         */
        public function execute()
        {
            $resultPage = $this->resultPageFactory->create();
            $resultPage->setActiveMenu('Webkul_BlogManager::manage');
            $resultPage->getConfig()->getTitle()->prepend(__('Manage Blog'));
            return $resultPage;
        }
    
        /**
         * Check Autherization
         *
         * @return boolean
         */
        public function _isAllowed()
        {
            return $this->_authorization->isAllowed('Webkul_BlogManager::manage');
        }
    }

    All the actions in admin will extend \Magento\Backend\App\Action class. The content of execute function is very straightforward. We have set our menu as active by providing the id in the setActiveMenu function. And we have also set the page title.

    The _isAllowed() method is used for ACL purposes. Here we pass the resource id in isAllowed function.

    Now if you click on the menu it should redirect to the index page,

    2021-03-02_20-22


    Folder Structure,

    Selection_116

    Next Blog -> Magento 2 Development 16: uiComponent and di.xml

    Previous Blog -> Magento 2 Development 14: CSS and JS

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home