How To Create a Magento 2 Module

Posted on 10 February, 2017

At Emipro, we always aim to make the Magento community better, the first step to that will be building a simple Magento 2 extension. In this article, I will answer the first question every Magento 2 developer has in mind, How to develop a Magento 2 extension.

To understand how to create a Magento 2 extension, we are going to build a HelloWorld module. So, now we create a module with Namespace ‘Emipro’ and Module Name ‘HelloWorld

Here Emipro is the name of the company that developed the extension, HelloWorld is the name of the Magento 2 extension we are building at the moment.

Follow the simple step which are listed on below for create Magento 2 HelloWorld Extension.

Step 1 : So first of all we need to create the Emipro folder at app/code/Emipro and create another folder HelloWorld at app/code/Emipro/HelloWorld

After created the folders we need create a module.xml file in app/code/Emipro/HelloWorld/etc And paste the below code. And if your Namespace and Module name is different then don’t forgot to replace the “Emipro_HelloWorld” with your Namespace and Module Name.

 
1
2
3
4
5
6
<?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="Emipro_HelloWorld" schema_version="0.0.1" setup_version="0.0.1">
    </module>
</config>
  
 

This registers our module, we have no dependencies so we haven’t listed any… however if your module does have a dependency then we simply change the <module> part of our module.xml file to look like this:

 
1
2
3
4
5
6
7
8
..
<module name="Emipro_HelloWorld" schema_version="0.0.1" setup_version="0.0.1">
    <sequence>
        <module name="Magento_Eav"/>
        <module name="Magento_Directory"/>
    </sequence>
</module>    
..                     
 

Step 2 : Create app/code/Emipro/HelloWorld/registration.php file. And paste the below code. And if your Namespace and Module name is different then don’t forgot to replace the “Emipro_HelloWorld” with your Namespace and Module Name.

 
1
2
3
4
5
6
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Emipro_HelloWorld',
    __DIR__
);                         
 

Step 3 : Now we are going to create a frontend router. So, For that you need to create a routes.xml in app/code/Emipro/HelloWorld/etc/frontend/routes.xml And paste the below code. And if your Namespace and Module name is different then don’t forgot to replace the module name with your Module Name.

 
1
2
3
4
5
6
7
8
<?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="helloworld" frontName="helloworld">
            <module name="Emipro_HelloWorld"/>
        </route>
    </router>
</config>                        
 

The first section of the route string indicates which node Magento should look at to find the URL’s front Name. Then, the router ID shown which router we will use: frontend or adminhtml(the same like in Magento1). Pay attention that the front name is the first part of the URL and it should be unique.

 

Step 4 : Create a Controller action
Create the file Index.php in app/code/Emipro/HelloWorld/Controller/Index/Index.php. This will map to http://domain.com/helloworld/index/index
helloworld: front name
index: name of controller folder
index: name of action file – index.php
Each action is its own class extending \Magento\Framework\App\Action\Action. In every action file, there will be a method name execute() that will invoked when the action is called

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
namespace Emipro\HelloWorld\Controller\Index;
  
class Index extends \Magento\Framework\App\Action\Action
{
    /** @var  \Magento\Framework\View\Result\Page */
    protected $resultPageFactory;
    /**      * @param \Magento\Framework\App\Action\Context $context      */
    public function __construct(\Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory)     {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }
  
    /**
     * Blog Index, shows a list of recent blog posts.
     *
     * @return \Magento\Framework\View\Result\PageFactory
     */
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Emipro Hello World'));
        return $resultPage;
    }
}                  
 

Step 5 : Create a layout file in the following directory app\code\Emipro\Helloworld\view\frontend\layout\helloworld_index_index.xml

1
2
3
4
5
6
7
8
<?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="Emipro\HelloWorld\Block\HelloWorld" name="formbuilder" template="Emipro_HelloWorld::helloworld.phtml"/>
  </referenceContainer>
</body>
</page>                      

Step 6 : Let’ss create a block for our module. Create block file app/code/Emipro/HelloWorld/Block/HelloWorld.php

1
2
3
4
5
6
7
8
9
10
<?php
namespace Emipro\HelloWorld\Block;
  
class HelloWorld extends \Magento\Framework\View\Element\Template
{
    public function _prepareLayout()
    {
        return parent::_prepareLayout();
    }
}                      

Step 7 : Create a template file app/code/Emipro/HelloWorld/view/frontend/templates/helloworld.phtml

<h1 style="color: #1979C3;">Welcome to sample module.</h1>

Step 8 : Active Emipro_HelloWorld extension. We have two ways to active Emipro_Helloworld extension.

1. Directly edit file app/etc/config.xml In the array module, add the element: ‘Emipro_Helloworld’ => 1

2. Open Command line in folder root of magento and run both commands

php bin/magento setup:upgrade

php bin/magento cache:flush

For more informations about Magento 2 Useful Commands List Click Here and read our another technical note.

Now you know all the steps to write a simple module in Magento2. Run the following link
http://domain.com/helloworld/index/index, see the result will be shown like “Emipro Hello World” as a page title and “Welcome to sample module.” as a content.

I hope this Magento technical note helped you to understand some of the new concepts/structures in Magento 2 and see you again in our next Magento 2 technical note, which is “Create Custom Database Table in Magento 2”. Bookmark it for your future reference. Do comment below if you have any other questions or doubts creating a Magento 2 extension from scratch.

P.S. Do share this note with your team.


Mayank Zalavadia , eCommerce Project Manager
Magento Technical Notes

Post Your Review

X

Your Review has been posted

0 Comment(s)