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.
How to Create a Module in Magento 2
Step 1. Create the Directory for the module
Step 2. Configuration for the module
Step 3. Register the created module
Step 4. Create Front-end router file
Step 5. Create Controller file
Step 6. Create Block file
Step 7. Create Front-end layout file
Step 8. 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!
Step 1. Create the Magento 2 Module Directory
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.
Step 2. 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>
Step 3. Register the created 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__ );
Step 4. Create 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>
Step 5. Create 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
Step 6. Create a 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';
}
}
?>
Step 7. Create a 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(); ?>
Step 8. 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.
Also read: How to Create EAV Module in Magento 2: Step-by-Step Tutorial?
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.