How to create module in Magento 2?

Before we start talking about how to create module in Magento 2, let’s first see what are the key differences between Magento 1 and Magent 2 module creation

Difference Number 1

In Magento 1, you have app/code/core, local and community whereas in Magento 2 you have everything in app/code/ where all the folders with their namespaces are created like Magento, Zend, Scommerce etc. By default, you will see all the Magento core code is in /vendor/magento folder.

Difference Number 2

In Magento 1, you register your module using /app/etc/module/Namespace_ModuleName.xml whereas in Magento 2, you create module.xml under app/code/Namespace/ModuleName/etc/module.xml, app/code/Namespace/ModuleName/composer.json and app/code/Namespace/ModuleName/registration.php

Difference Number 3

In Magento 1, you separate out designs in  app/design/frontend/default/default/layout or app/design/frontend/default/default/template folders whereas in Magento 2, you create everything in your module folder itself like app/code/Namespace/Module/view/layout or app/code/Namespace/Module/view/templates

Difference Number 4

In Magento 1, you declare global, frontend and adminhtml events in app/code/community/Namespace/Module/etc/config.xml whereas in Magento 2, you declare global events in app/code/Namespace/Module/etc/events.xml, frontend events in app/code/Namespace/Module/etc/frontend/events.xml and app/code/Namespace/Module/etc/adminhtml/events.xml

Difference Number 5

In Magento 1, you override blocks, controllers and model classes in app/code/community/Namespace/Module/etc/config.xml whereas in Magento 2, you override blocks, controllers and model classes in app/code/Namespace/Module/etc/di.xml

Difference Number 6

In Magento 1, you create route for your admin or frontend controller in app/code/community/Namespace/Module/etc/config.xml whereas in Magento 2, you create route for your frontend controller in app/code/Namespace/Module/etc/frontend/routes.xml and admin controller in app/code/Namespace/Module/etc/adminhtml/routes.xml

Now you know the key differences between Magento 1 and Magento 2 for creating module, let’s crack on with creating Magento 2 module -:

Step 1 – Create folder app/code/Scommerce/Hello

Step 2 – Create module.xml in app/code/Scommerce/Hello/etc/, registration.php and composer.json

module.xml

<br>
&lt;?xml version="1.0"?&gt;<br>
&lt;!-- /** * Copyright © 2018 Scommerce Mage. All rights reserved. * See COPYING.txt for license details. */ --&gt;<br>
&lt;config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"&gt;<br> &lt;router id="admin"&gt;<br> &lt;route id="hello" frontName="hello"&gt;<br> &lt;module name="Scommerce_Hello"/&gt;<br> &lt;/route&gt;<br> &lt;/router&gt;<br>
&lt;/config&gt;<br>

composer.json

<br>
{<br> "name": "scommerce/hello",<br> "description": "Scommerce Hello Module for Magento 2.0",<br> "require": {<br> "php": "~5.5.0|~5.6.0|~7.0.0",<br> "magento/module-store": "*",<br> "magento/module-backend": "*",<br> "magento/framework": "*"<br> },<br> "type": "magento2-module",<br> "license": "GPL-3.0",<br> "authors": [<br> {<br> "name": "Scommerce",<br> "email": "core@scommerce-mage.co.uk"<br> }<br> ],<br> "autoload": {<br> "files": [<br> "registration.php"<br> ],<br> "psr-4": {<br> "Scommerce\Hello\": ""<br> }<br> }<br>
}<br>

registration.php

<br>
&lt;?php<br>
/**<br> * Copyright © 2018 Scommerce Mage. All rights reserved.<br> * See COPYING.txt for license details.<br> */</p>
<p>MagentoFrameworkComponentComponentRegistrar::register(<br> MagentoFrameworkComponentComponentRegistrar::MODULE,<br> 'Scommerce_Hello',<br> __DIR__<br>
);<br>

Step 3 – Create routes.xml in app/code/Scommerce/Hello/etc/frontend/

routes.xml

<br>
&lt;?xml version="1.0"?&gt;<br>
&lt;!-- /** * Copyright © 2018 Scommerce Mage. All rights reserved. * See COPYING.txt for license details. */ --&gt;<br>
&lt;config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"&gt;<br> &lt;router id="standard"&gt;<br> &lt;route id="hello" frontName="hello"&gt;<br> &lt;module name="Scommerce_Hello"/&gt;<br> &lt;/route&gt;<br> &lt;/router&gt;<br>
&lt;/config&gt;</p>
<p>

Step 4 – Create Controller/Index folders in app/code/Scommerce/Hello/

Step 5 – Create index.php in app/code/Scommerce/Hello/index.php

<br>
&lt;?php<br>
/**<br>
* Copyright © 2018 Scommerce Mage. All rights reserved.<br>
* See COPYING.txt for license details.<br>
*/<br>
namespace ScommerceHelloControllerIndex; </p>
<p>class Index extends MagentoFrameworkAppActionAction { </p>
<p> public function execute() {<br> $this-&gt;_view-&gt;loadLayout();<br> $this-&gt;_view-&gt;getLayout()-&gt;initMessages();<br> $this-&gt;_view-&gt;renderLayout();<br> }<br>
}<br>

Step 6 – Create Block folder in app/code/Scommerce/Hello/

Step 7 – Create hello.php in app/code/Scommerce/Hello/hello.php

<br>
&lt;?php<br>
/**<br> * Copyright © 2018 Scommerce Mage. All rights reserved.<br> * See COPYING.txt for license details.<br> */</p>
<p>namespace MagentoHelloBlock;</p>
<p>class Hello extends MagentoFrameworkViewElementTemplate<br>
{<br> public function _prepareLayout()<br> {<br> return parent::_prepareLayout();<br> }<br>
}<br>

Step 8 – Create view/frontend/layout folders in app/code/Scommerce/Hello/

Step 9 – Create hello_index_index.php in app/code/Scommerce/Hello/view/frontend/layout/

<br>
&lt;?xml version="1.0"?&gt;<br>
&lt;!-- /** * Copyright © 2015 Scommerce Mage. All rights reserved. * See COPYING.txt for license details. */ --&gt;<br>
&lt;page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"&gt;<br>
&lt;body&gt;<br> &lt;referenceContainer name="content"&gt;<br> &lt;block class="ScommerceHelloBlockHello" name="hello" template="hello.phtml"&gt;<br> &lt;/block&gt;<br> &lt;/referenceContainer&gt;<br>
&lt;/body&gt;<br>
&lt;/page&gt;<br>

Step 10 – Create templates folders in app/code/Scommerce/Hello/view/frontend/

Step 11 – Create hello.phtml in app/code/Scommerce/Hello/view/frontend/templates

<br>
&lt;?php<br>
/**<br>
* Copyright © 2018 Scommerce Mage. All rights reserved.<br>
* See COPYING.txt for license details.<br>
*/ </p>
<p>echo 'Congratulations you have built your first Magento 2 module using controller, block, layout, templates etc.';<br>

Step 12 – Run the following command to register your module

php bin/magento setup:upgrade

or

Edit /etc/config.php and add Scommerce_Hello =>1 in modules array

Hope this article helped you in some way. Please leave us your comment and let us know what do you think? Thanks.

Discover more from WHO WILL CARE eCommerce

Subscribe now to keep reading and get access to the full archive.

Continue reading