After receiving a good feedback on Magento 2.0 installation, FME developers were asked to show the basic steps for creating a simple module for Magento 2.0. To give the viewers a clearer picture, FME has decided to post a step by step blog for creating Magento 2.0 module. The primary objective of this post is to help customers understand the new and improved concepts/structures Magento 2.0 developers encounter.
With the upcoming version getting closer, Magento 2.0 needs to be understood the best way possible before changes are made. For creating a simple extension you must first consider integrating controller, block and view. You can start by putting FME extensions on the content block.
The new thing that you will come across at first while developing an extension in Magento 2.0, is the absence of the code pool. What you now have is app/code/. We are going to initiate by creating the following directory app/code/FME/Test/etc/module.
1. Create a module.xml in app/code/FME/Test/etc/module.xml to declare the module.
2. Create registration.php in app/code/FME/Test/registration.php<?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="FME_Test" schema_version="0.0.1" setup_version="0.0.1"/> </config>
3. Create Controller And Action Of Module Create the file Index.php in app/code/FME/Test/Controller/Index/Index.php Index controller folder, while Index.php is action. The executive function of action Index is execute()<?php \Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE,'FME_Test',__DIR__);
4. Now Create A Block File in app/code/FME/Test/Block/Test.php<?php /** * Test Controller * * @category FME * @package FME_Test * @author Fme Extensions Development Company * */ namespace FME\Test\Controller\Index; class Index extends \Magento\Framework\App\Action\Action { public function execute() { $this->_view->loadLayout(); $this->_view->renderLayout(); } }
5. Create front-end router configuration file /app/code/Magento/Test/etc/frontend/routes.xml In magento 2 declaration of controller is differ from magento 1.x. in Magento 2.0, file config.xml only configures the default configuration value in tag <default> Information about controller of frontend will be reported in: Magento/Test/etc/frontend/routes.xml<?php * Test Block * * @category FME * @package FME_Test * @author Fme Extensions Development Company * */ namespace FME\Test\Block; class Test extends \Magento\Framework\View\Element\Template { public function _prepareLayout() { parent::_prepareLayout(); $this->pageConfig->getTitle()->set(__('FME Test')); return $this; } }
5. Create Layout and Template file for front-end Create file app\code\FME\Test\view\frontend\layout\test_index_index.xml Name of layout file is really important In Magento 2 For every action you must create a layout file. Router name_controlle namer_action name<?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="standard"> <route id="test" frontName="test"> <module name="FME_Test" /> </route> </router> </config>
After that create template file app\code\Magento\Test\view\frontend\templates\test.phtml<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"?> <body> <referenceContainer name="content"?> <block class="FME\Test\Block\Test" name="test" template="FME_Test::test.phtml"></block?> </referenceContainer?> </body?> </page?>
In Magento 2 there are 2 ways to activate module. One is edit to config.php file (old method)<?php echo 'My First Module in Magento 2'; ?>
- Open the file app/etc/config.php
- In the module array, add ‘FME_Test’ => 1,
- php bin/magento module:enable --clear-static-content FME_Test, after that
- php bin/magento setup:upgrade