How to Create a Simple Module in Magento 2?

In today’s post, we will be teaching you how to create a simple module in Magento 2. A Module, in Magento 2, is basically a group of directories that consists of controllers, blocks, models, and helpers, which are needed to build a specific store feature.

To put it simply, whenever you need to add a customized functionality on a Magento 2 based online store, you need to create a custom module to meet your online store’s requirements.

Now, in order to create a Magento 2 Module, you need to first install Magento 2 in your system.

Here’s an easy-to-follow tutorial on How to Install Magento 2 using Composer in case if you’ve not yet installed Magento 2.

Prerequisites for Creating a Simple Module in Magento 2

• Directory for the module
• Configuration for the module
• Registration for the module
• Front-end router file
• Controller file
• Block file
• Front-end layout file
• Front-end template file
• Install setup and Enable module

So, these are the steps we need to take in order to create a simple module in Magento 2. Let’s get started!

Directory for the module

In order to create a simple Magento 2 module, firstly we need to set up the structure of the module.

And for that, we need to create the following Folders in app/code.

MD: namespace name
Helloworld: module name
Controller: Controls the flow of the module action
Block: Contains the PHP file of the module
etc: Configuration related file of the module.
etc/frontend: front-end router file will be available here.
view/frontend/layout: frontend layout (XML) file will be available here.
view/frontend/template: frontend template (.phtml) file.

Configuration for the module

The next step is to set the configuration for our module.

In order to that, we need to create module.xml file in the following directory – app/code/MD/Helloworld/etc

Now, paste the following code into the module.xml file.

<?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="MD_Helloworld" schema_version="0.0.1" setup_version="0.0.1">
</module>
</config>

Registration of Module

Now, we need to perform the registration of our module.

To do this, we need to create a registration.php file in app/code/MD/Helloworld and paste the following code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'MD_Helloworld',
__DIR__
);

Front-end router file

The front-end router file is basically required to set a router name for the front page to be able to access it from the front side.

So, let’s create the routes.xml file in app/code/MD/Helloworld/etc/frontend and add the following code:

<?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="MD_Helloworld"/>
</route>
</router>
</config>

Controller File

Once you’ve created the front-end router file, it’s time to move forward and create a Controller file, which will be used to execute the action of our module.

So, let’s go ahead and create index.php file in app/code/MD/Helloworld/Controller/Index and paste the following code for executing the module’s action.

<?php
namespace MD\Helloworld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
/**
* @var \Magento\Framework\View\Result\PageFactory
*/
protected $resultPageFactory;
/**
* @param \Magento\Framework\App\Action\Context $context
* @param \Magento\Framework\View\Result\PageFactory resultPageFactory
*/
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
)
{
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Default customer account page
*
* @return void
*/
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend(__('Welcome to MD Helloworld module'));
return $resultPage;
}
}
?>

Once you’ve pasted the code, it’s time we check the output via the following URL: http://domain.com/helloworld/index/index

Block file

The block file will basically contain PHP view classes.

So, let’s create a file name called helloworld.php inside app/code/MD/Helloworld/Block directory with the following code:

<?php
namespace MD\Helloworld\Block;
class Helloworld extends \Magento\Framework\View\Element\Template
{
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $data = []
)
{
parent::__construct($context, $data);
}
public function getHelloworldData()
{
return 'MD Helloworld block file call successfully';
}
}
?>

Front-end Layout File

Now, we need to call block function as well as execute some design codes.

So, let’s create a helloworld.html file inside the app/code/MD/Helloworld/view/frontend/templates directory and add the below code.

<?php echo $block->getHelloworldData(); ?>

Install Setup and Enable Module

We’re now almost there to creating a simple module in Magento 2.

All that’s left to do is setup the module. And for that, we need to execute the following command:

php bin/magento setup:upgrade

Once it’s done, we need to check the module status:

php bin/magento module:enable MD_Helloworld

And now finally, we need to clean and flush the cache using the following commands:

php bin/magento cache:clean
php bin/magento cache:flush

And it’s done! Let’s now open the browser and see if this works or not.

Open this URL – http://domain.com/helloworld/index/index

This should do the trick.

Final Words…

So, you have now finally learned how to create a simple module in Magento 2. We hope that you found this post useful and in case you’ve any queries or face any difficulties, you can definitely contact us and we would be more than happy to help you out.