How To Create Module In Magento 2.0 in simple

Happy to see you guys again!

After publishing How to install Magento 2, I got many questions related to updates & changes in Magento 2.0 compared with the previous version.

So, today I decide to write a blog post with a specific example in order that you will have a clearer picture: How to create a simple module in Magento 2.0.

Hope you will find it interesting.

Now, let’s go.

Resource for you:

How to create a Magento 2 theme

Learn everything of Magento 2 with Magento 2 tutorial – Learning from the scratch

Magento extensions / Magento 2 extensions

Magento Affiliate Module/ Magento Affiliate Software

Magento Module Development

Or if you can’t do it yourself, you could hire a Magento developer.

1. Create module in Magento 1.0

In Magento 2 create module is easier in comparison with Magento 1.

(Namespace: Magento, Module Name:  Hello)

Firstly, I want to mention about way to create a simple module in Magento 1.0 so that you can make a comparison between this version with the upcoming one: Magento 2.0. Yes, we have to understand how to create Magento 1.x module before going to create Magento 2 module!

Example link on local host:  http://localhost/magento20/hello/index/index 

• Step 1:   Declare your module in folder:  app/etc/

In the first step of this Magento 2 module tutorial, you have to declare your module in folder:

<?xml version="1.0"?>
<config>
         <modules>
                <Magento_Hello>
                        <active>true</active>
                        <codePool>local</codePool>
                </Magento_Hello>
         </modules>
</config>

• Step 2:  Module configuration

In the step 2 of this Magento 2 module development, you have too

– Creat a controller : app/code/local/Magento/Hello/controllers/IndexController.php

class Magento_Hello_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
     $this->loadLayout();
     $this->renderLayout();
    }
}

– Creat a block :  app/code/local/Magento/Hello/Block/Hello.php

class Magento_Hello_Block_Hello extends Mage_Core_Block_Template
{
  // write function here
}

– Creat a configuration file config.xml :  app/code/local/Magento/Hello/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
       <Magento_Hello>
           <version>0.1.0</version>
       </Magento_Hello>
   </modules>
   <global>
   </global>
   <frontend>
       <routers>
           <magento_hello>
               <use>standard</use>
               <args>
                   <module>Magento_Hello</module>
                   <frontName>hello</frontName>
               </args>
           </magento_hello>
       </routers>
<layout>
           <updates>
               <hello>
                   <file>hello.xml</file>
               </hello>
           </updates>
       </layout>
   </frontend>
   <global>
 <blocks>
           <hello>
               <class>Magento_Hello_Block</class>
           </hello>
       </blocks>
   </global>
</config>

• Step 3:  Create a Frontend Template

In step 3 of this Magento 2 module tutorial, you have to create a front end template:

– Write a file layout : app/design/frontend/default/default/layout/hello.xml

<layout version="0.1.0">
    <hello_index_index>
      <reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
      </reference>
      <reference name="content">
 <block type="hello/hello" name="hello" template="hello/hello.phtml"/>
      </reference>
   </hello_index_index>
</layout>

– Push/Place content to file template hello.phtml

“This is a simple module in Magento 1.0”

When you access url http://localhost/magento20/hello/index/index, the browser will display: “This is a simple module in Magento 1.0”

Above is the first part of this post, now to continue with this Magento 2 module development post, we will see:

2. Differences between Magento 1.0 and Magento 2.0

We are going to create  Magento 2 module, we have already understand how to create a Magento 1.x module now in this Magento 2 theme development tut we need to make sense:

What are the differences between Magento 1.x and Magento 2?  Here is the Magento 1.x vs Magento 2 comparison table:

Magento 2 vs Magento 1.x comparison:

In this Magento 2 module tutorial, I give you some basic differences between Magento 1.0 and Magento 2.0 so that you can easily visualize the folder structure in Magento 2.0. Thus, creating a Magento 2 module is just a breeze. For deeper understand, move to the next part & practice in this Magento 2 module development :

3. Create module in Magento 2.0 in simple

Voila, You have already not only know how to build a module in Magento 1.x but also understand the basic differences between Magento 1.x and Magento 2, Now we start to create our first Magento 2 module!

(Namespace: Magento, Module Name: Hello)

Example link on local host: http://localhost/magento20/hello/index/index

• Step 1:

In the first step of this Magento 2 module development, you have to write the file module.xml in app/code/Magento/Hello/etc/module.xml to declare the module.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
   <module name="Magento_Hello" schema_version="0.0.1"/>
</config>

• Step 2: 

In step 2 of this Magento 2 module development you have to create many things:

– Create controller and action:

– Create the file Index.php in app/code/Magento/Hello/Controller/Index/Index.php

Folder Index plays the role of controller, while Index.php is action. The executive function of action Index is execute()

namespace Magento\Hello\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
  public function execute()
{
     $this->_view->loadLayout();
       $this->_view->getLayout()->initMessages();
    $this->_view->renderLayout();
}
}

– Create a Block:

app/code/Magento/Hello/Block/Hello.php
namespace Magento\Hello\Block;
class Hello extends \Magento\Framework\View\Element\Template
{
public function _prepareLayout()
{
    return parent::_prepareLayout();
}
}

– Write configuration file: /app/code/Magento/Hello/etc/frontend/routes.xml

– In Magento 1.0, every information about router, events of frontend and backend is declared in Magento/Hello/etc/config.xml. However, in Magento 2.0, file config.xml only configures the default configuration value in tag <default>

+) Information about router of frontend will be reported in:

Magento/Hello/etc/frontend/routes.xml (it is similar to backend)

+) Event of frontend will be declared in: Magento/Hello/ect/frontend/events.xml  (it is similar to backend)

In the scope of a simple module, we only declare routers in Magento/Hello/etc/frontend/routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
<router id="standard">
    <route id="hello" frontName="hello">
        <module name="Magento_Hello" />
    </route>
</router>
</config>

• Step 3: Create a Frontend Template

In Magento 2 module development, the most interesting part is creating front-end template:

– Write a layout file: app\code\Magento\Hello\view\frontend\layout\hello_index_index.xml

Name of layout file is really important in this step. It will be named after the structure:

router name_controlle namer_action name

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Magento\Hello\Block\Hello" name="hello" template="success.phtml">
        </block>
    </referenceContainer>
</body>
</page>

Then, we create a file success.phtml as reporting in layout file:

app\code\Magento\Hello\view\frontend\templates\success.phtml

<?php echo ‘Successful! This is a simple module in Magento 2.0’; ?>

• Step 4: Activate Magento_Hello extension in configuration file

This is the final step in this Magento 2 module development:

– Open the file app/etc/config.xml

– In the array ‘module’, add the element: ‘Magento_Hello’ => 1,

You have known all the steps to write a simple module in Magento 2.0. When you run the link: http://localhost/magento20/hello/index/index the result will be shown as the following:

FINISH!!!!

Above is an ultimate guide about How to create Magento 2 module step by step – The most detail and clear tutorial on the Internet ever about Magento 2 module tutorial.

Thank you so much for following my tutorial. To never miss any helpful guide to Magento 2.0, subscribe to our blog post by leaving your email below.
[mc4wp_form]

If you have any questions, drop a comment below so that I can help you 🙂

[WpProQuiz 1]

Test more.