Magento, Magento 2

Create a simple module in Magento 2

Create a simple module in Magento 2

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.

  1. Directory for the module
  2. Configuration for the module
  3. Registration for the module
  4. Front-end router file
  5. Controller file
  6. Block file
  7. Front-end layout file
  8. Front-end template file
  9. 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 🙂

Tagged ,