Magento 2 Development 12: Admin Menu and Controller

 

We have been working on front-end for 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 controller for front-end. First thing that we created was routes.xml. For admin we need to create the route file in etc/adminhtml/routes.xml

<?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. Only thing we have changed here is the router id.

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

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

<?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 menu tag with add tag. The first menu with title “Blog Management” is the parent menu and inside that parent menu we have added a child menu with title “Manage”.

The id attribute is to give a unique identification for the menu. In translate attribute we have mentioned that we want to translate the title. With the title attribute we can manage the menu’s label. In module attribute we mention the module name with which this menu is related. We can position the menus with 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 later part of this series.

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

If you check in admin side you will see our menu as,

Controller

Now let’s create the controller file. For all the controller files related to admin, we need to create a Adminhtml folder under the Controller folder. To create the index action we need to create the Controller/Adminhtml/Manage/Index.php 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

{

public $context;

public $resultPageFactory;

public function __construct(

Context $context,

PageFactory $resultPageFactory

) {

parent::__construct($context);

$this->resultPageFactory = $resultPageFactory;

}

public function execute()

{

$resultPage = $this->resultPageFactory->create();

$resultPage->setActiveMenu('Webkul_BlogManager::manage');

$resultPage->getConfig()->getTitle()->prepend(__('Manage Blog'));

return $resultPage;

}

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 setActiveMenu function. And we have also set the page title.

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

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

Folder Structure,