Thursday, January 5, 2017

Magento 2 Module Development

Here we are going to learn, how to develop a simple module in magento 2 and what are the pre requirements to develop a module. Here, we assume that you have successfully installed Magento 2 in your development environment.

After you have successfully installed Magento 2.0 in your development environment and it functions properly, there are two things which we recommend you to do:

Disable the System Cache:
  • Login to Magento admin section.
  • Goto System > Cache Management.
  • Select all types of caches available there.
  • Select Disable option from the dropdown on top left corner of table.
  • Click on submit button. It will disable all the cache in magento system.

Switch your Magento to Developer Mode:
  • Open your development environment terminal.
  • Move to the root location of your magento instance.
  • Run this command: php bin/magento deploy:mode:set developer.

All this information will help you to understand the new structure more easily. Now we will start to learn the module development step by step.

STEP 1: Create a module folder and necessary files to register the module.
In Magento 1.x, we have learned that module folder is created inside one of the code pools inside app/code/(community, core or local). But in Magento 2, no more code pools are available. Now , the module folder will be:


The Pragmatic folder is the module’s namespace, and Helloworld is the module’s name.
Note: If you don’t have the code folder in your app directory, create it manually.
After module folder we will create module.xml file inside app/code/Pragmatic/Helloworld/etc folder.

<?xml version="1.0"?>
<config xmlns:xsi=""
<module name="Pragmatic_Helloworld" setup_version="1.0.0">

And now we will create a registration.php file to register our module in Magento:


Now, Open your terminal and go to the Magento 2 root. Run the following command from terminal:

php bin/magento setup:upgrade

Now if you want to confirm that your module is registered in magento or not, login to magento admin and move to Stores → Configuration → Advanced → Advanced. Here you can see the list of all enabled module in Magento. One more place where you can check that your module is registered or not is app/etc/config.php. Check the array for the ‘Inchoo_Helloworld’ key, whose value should be set to 1.

STEP 2 : Create Router & Controller
Firstly we will define router by creating a routes.xml file inside app/code/Pragmatic/Helloworld/etc/frontend folder with following code:

<?xml version="1.0"?>
<config xmlns:xsi=""
<router id="standard">
<route id="hello" frontName="helloworld">
<module name="Pragmatic_Helloworld" />

Here we’re defining our frontend router and route with an id “helloworld”.The frontName attribute is going to be the first part of our URL.
In Magento 2 URL’s are constructed this way:


So in our example, the final URL will look like this: helloworld/index/index

Create index.php controller file inside app/code/Pragmatic/Helloworld/Controller/Index folder with following code:

namespace Pragmatic\Helloworld\Controller\Index;
use Magento\Framework\App\Action\Context;
class Index extends \Magento\Framework\App\Action\Action
protected $_resultPageFactory;
public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
$this->_resultPageFactory = $resultPageFactory;
public function execute()
$resultPage = $this->_resultPageFactory->create();
return $resultPage;

In Magento 1 each controller can have multiple actions, but in Magento 2 this is not the case. In Magento 2 every action has its own class which implements the execute() method.

STEP 3 : Create Block Here, we will create a simple Helloworld.php block file inside
app/code/Pragmatic/Helloworld/Block folderwith following code:

namespace Pragmatic\Helloworld\Block;
class Helloworld extends \Magento\Framework\View\Element\Template
public function getMessage()
return 'Hello World!';

In this block file, we have created a getMassage() method which will return a message ‘Hello World!’.

STEP 4 : Create Layout and Template file
We have seen in Magento 1.x layout file and template files are placed in a separate app/design/ folder, but in Magento 2 it is placed inside a new view folder which is placed in module folder only. Inside this we can have three folders namely: adminhtml, base or frontend.

The adminhtml folder is used for admin, the frontend folder is used for frontend and the base folder is used for both, admin & frontend files.

Here we will first create a helloworld_index_index.xml layout file inside app/code/Pragmatic/Helloworld/view/frontend/layout folder with following code:

<page xmlns:xsi=""
xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
<referenceContainer name="content">
<block class="Pragmatic\Helloworld\Block\Helloworld"
name="helloworld" template="helloworld.phtml" />

In our layout file, we have created a block inside content container and set the template file as helloworld.phtml file. Now we will create a template file inside
app/code/Pragmatic/Helloworld/view/frontend/template folder with following code:

<h1><?php echo $this->getMessage(); ?></h1>

$this variable is referencing our block class and we are calling the method getMessage() which is returning the string ‘Hello world!’.

Now, open your browser. Hit your You can see the message as below:


No comments:

Post a Comment