Magento 2 – create simple adminhtml module
In this beginner tutorial I show you how to create a simple Magento 2 module. It defines a menu and displays a adminhtml page with user generated content. Based on this, you can start your own adminhtml extension.
Magento 2 – create simple adminhtml module
We start by defining files, that are needed for each module. If you work on a new Magento 2 installation, just create a folder called code under app:
Modules are organized into this folder. It is common, that you create a sub folder named by your company (I choose Magemaster) and then create a sub folder with name of your module (for this tutorial I use AdminSample). Just jump into your new module root folder (in my Example Magemaster/AdminSample) and now we can create files…
registration.php
1 2 3 4 5 6 | <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'CompanyName_ModuleName', __DIR__ ); |
composer.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { "name": "companyname/modulename", "description": "companyname modulename", "require": { "php": "~5.5.0|~5.6.0", "magento/magento-composer-installer": "*" }, "type": "magento2-module", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "extra": { "map": [ [ "*", "CompanyName/ModuleName" ] ] } } |
/etc/module.xml
1 2 3 4 | <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="CompanyName_ModuleName" setup_version="0.0.1" /> </config> |
Next we need to define Model and Helper folder, so now we have basic structure with no output and no action. This is a base setup. Save it to start from here for every new Magento 2 module.
Create custom adminhtml controller
A routes.xml file defines how to connect a given URL to a controller. Start by creating this file.
etc/adminhtml/routes.xml
1 2 3 4 5 6 7 8 | <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd"> <router id="admin"> <route id="companyname_modulename" frontName="companyname_modulename"> <module name="CompanyName_ModuleName" before="Magento_Backend" /> </route> </router> </config> |
Now we need to create a controller. We create a controller for backend (adminhtml). To do this create following file:
1 2 3 4 5 6 7 8 9 10 | <?php namespace CompanyName\ModuleName\Controller\Adminhtml\Settings; class Payment extends \Magento\Backend\App\Action { public function execute() { die("Admin 😉 - CompanyName\\AdminName\\Controller\\Adminhtml\\Settings\\Payment - execute() method"); } } |
Now you need to enable this module and upgrade everything. You need SSH connection
1 | php bin/magento setup:upgrade |
1 | php bin/magento module:enable CompanyName_ModuleName |
Menu item
The last thing to do is to add a menu item in your magento backend. This is simple, just create a new menu settings file:
etc/adminhtml/menu.xml
1 2 | <!--?xml version="1.0"?--> <menu>Â </menu> |
Now you have a backend controller that can be called from a magento menu. You see now a blank page with a message. Next step is to display meaningful things.
Create your first block
We will create your first block in Block/Adminhtml
1 2 3 4 5 6 7 8 9 10 | namespace CompanyName\ModuleName\Block\Adminhtml; use Magento\Backend\Block\Template; class Payment extends Template { public function greet() { return 'Hello world'; } } |
Now we will need a phtml file that uses this block and a layout which calls this file.This two files are:
view/adminhtml/layout/tenforthis_settings_payment.xml
1 2 | <!--?xml version="1.0"?--> SampleOne Title |
Conclusion
It is quite easy to create a simple Magento 2 module. You need to create appropriate setting *.xml files and create controller, model or helper classes. A good ressource for your own moduls is Magento module structure itself. Everything that is possible is already implemented there. Just search for a adminhtml button and try to find controller and study this code and the whole module.
