Welcome back to Rohan’s article. In this article, we will learn about how to create simple module in Magento 2. There are whole system based on module structure. The whole Magento code is divided into small modules. As we know, Modules is directory which contains Blocks, Controllers, Modules, Helper, etc.
In many cases, we need to apply some customization or develop new functionality. So, we need to develop custom module. Basically, Magento 2 custom modules available in app/code directory with format of app/code/VendorName/ModuleName.
Before create simple module, you can take reference here about how to install Magento 2 using composer.
Now, we’ll discuss about Magento 2 create simple module steps and follow it to create module. So, Let’s start.
- 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
Directory for the module
For create simple module, we need to setup structure of the module. So, Let’s now create folders in app/code.
RH : 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
First of all, Create module.xml file in app/code/RH/Helloworld/etc And paste the below code :
<?xml version="1.0"?>
<!--
/**
* Created By : Rohan Hapani
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="RH_Helloworld" schema_version="0.0.1" setup_version="0.0.1"></module>
</config>
Registration of Module
After that, Registration of the module is must be required. So, create registration.php file in app/code/RH/Helloworld/ and paste the below code :
<?php
/**
* Created By : Rohan Hapani
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'RH_Helloworld',
__DIR__
);
Front-end router file
Then, Front-end router file is used for set router name of the front page to access at front side. So, create routes.xml file in app/code/RH/Helloworld/etc/frontend and paste the below code
<?xml version="1.0"?>
<!--
/**
* Created By : Rohan Hapani
*/
-->
<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="RH_Helloworld"/>
</route>
</router>
</config>
Controller file
Controller file is used for execute action of the module. So, create Index.php file in app/code/RH/Helloworld/Controller/Index and paste the below code :
<?php
/**
* Created By : Rohan Hapani
*/
namespace RH\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);
}
/**
* Hello World Action Page
*
* @return void
*/
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend(__('Welcome to RH Helloworld module'));
return $resultPage;
}
}
You can see this action’s output by execute this url : http://domain.com/helloworld/index/index
Block file
Block file contains PHP view classes. So, create Helloworld.php file in app/code/RH/Helloworld/Block and paste the below code :
<?php
/**
* Created By : Rohan Hapani
*/
namespace RH\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 'RH Helloworld block file call successfully';
}
}
?>
Front-end layout file
This file is frontend layout file. Create helloworld_index_index.xml file in app/code/RH/Helloworld/view/frontend/layout and paste the below code :
<?xml version="1.0"?>
<!--
/**
* Created By : Rohan Hapani
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Template" name="knockoutexe" template="RH_Helloworld::helloworld.phtml" />
</referenceBlock>
</body>
</page>
Here, file name should be like modulename_foldername_actionname.xml. So, here in this module file name is helloworld_index_index.xml
Front-end template file
Now, create helloworld.phtml file in app/code/RH/Helloworld/view/frontend/templates which is used to call block function and also some designing codes.
<h3>
<?php echo $block->getHelloworldData(); ?>
</h3>
Install setup and Enable module
Now, all things of module are ready. So, it’s time for setup module. To setup module first time, we need to execute this below command :
php bin/magento setup:upgrade
For check the module status :
php bin/magento module:enable RH_Helloworld
At last, clean and flush cache :
php bin/magento cache:clean
php bin/magento cache:flush
Now, open the browser and execute URL : http://domain.com/helloworld/index/index
I hope this blog is easy to understand about create a simple module in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution