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>\Magento\Framework\Component\ComponentRegistrar::register(<br>
    \Magento\Framework\Component\ComponentRegistrar::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 Scommerce\Hello\Controller\Index; </p>
<p>class Index extends \Magento\Framework\App\Action\Action { </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 Magento\Hello\Block;</p>
<p>class Hello extends \Magento\Framework\View\Element\Template<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="Scommerce\Hello\Block\Hello" 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.

4 thoughts on “How to create module in Magento 2?

  1. hi
    got a question when I installed magento 2 and checked the files I didnt have the app/code/ do you create it your self with composer or something? I’m new to both magento and composer so any help would be appreciated.

    1. Hi Daniel, In Magento 2 all the Magento code is in \vendor\magento folder, app\code is for third party vendor modules. Hope it answers your query.

  2. Thanks for sharing this post, i was creating module and stuck in declaration of module, got help from your post. Keep up the good work, i would be working on next steps.

  3. Pingback: Add CSS and JS using PHP in Magento 2

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.