How to create custom module in Magento 2

30 May, 2021

Today we create a simple module in Magento 2. We display a simple message using the controller and using a custom layout. For display message using a custom layout, Will need to create a custom frontend layout file in our module

Let's start by creating a simple module.


Step1. Create module directory

Go to Magento app/code directory and create a directory with your vendor name. My vendor name is "RS".

After creating the vendor directory, need to create a directory for the module. My module name is "FirstModule".

My custom module directory path is like "MAGENTO_ROOT/app/code/RS/FirstModule"

Step2. Create module registration file

        <?php
                //file path: MAGENTO_ROOT/app/code/RS/FirstModule/registration.php

                \Magento\Framework\Component\ComponentRegistrar::register(
                    \Magento\Framework\Component\ComponentRegistrar::MODULE,
                    'RS_FirstModule',
                    __DIR__
                );
        

Step3. Create module config file

        
        <?xml version="1.0"?>
        <!-- file path: MAGENTO_ROOT/app/code/RS/FirstModule/etc/module.xml -->

        <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
            <module name="RS_FirstModule" setup_version="1.0.0" />
        </config>
        

Step4. Create custom frontend route config file

        
        <?xml version="1.0"?>
        <!-- file path: MAGENTO_ROOT/app/code/RS/FirstModule/etc/frontend/routes.xml -->

        <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
            <router id="standard">
                    <route id="first_module" frontName="first_module">
                        <module name="RS_FirstModule" />
                    </route>
                </router>
        </config>
        

Step5. Create controller for display custom message without layout

        
        <?php
        //file path: MAGENTO_ROOT/app/code/RS/FirstModule/Controller/First/Index.php

        namespace RS\FirstModule\Controller\First;

        use Magento\Framework\App\Action\Action;
        use Magento\Framework\App\Action\Context;

        class Index extends Action
        {
                public function __construct(Context $context)
                {
                        return parent::__construct($context);
                }

                public function execute()
                {
                        echo __("This is my first Magento 2 module");
                }
        }
        

Step6. Install your module to magento

        
                php bin/magento module:enable RS_FirstModule
                php bin/magento setup:di:compile
                php bin/magento setup:upgrade
                php bin/magento setup:static-content:deploy
        

Step7. Check your first module message

Open this URL(http://your_magento_url/first_module/first/index) on your browser


Step8. Now we will display this message using Magento layout. So we need to some changes to our existing controller

        
        <?php
        //file path: MAGENTO_ROOT/app/code/RS/FirstModule/Controller/First/Index.php

        namespace RS\FirstModule\Controller\First;

        use Magento\Framework\App\Action\Action;
        use Magento\Framework\App\Action\Context;

        class Index extends Action
        {
                public function __construct(Context $context)
                {
                        return parent::__construct($context);
                }

                public function execute()
                {
                        return $this->resultFactory->create(ResultFactory::TYPE_PAGE);
                }
        }
        

Step9. Create layout file

        
                <?xml version="1.0"?>
                <!-- file path: MAGENTO_ROOT/app/code/RS/FirstModule/view/frontend/layout/first_module_first_index.xml --> 

                <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
                        <body>
                            <referenceBlock name="page.main.title">
                                <action method="setPageTitle">
                                    <argument translate="true" name="title" xsi:type="string">First Module</argument>
                                </action>
                            </referenceBlock>
                            <referenceContainer name="content">
                                <block class="Magento\Framework\View\Element\Template" name="message" template="RS_FirstModule::message.phtml" />
                            </referenceContainer>
                        </body>
                </page>
        

Step10. Create template file for display message

        
                <?php // file path: MAGENTO_ROOT/app/code/RS/FirstModule/view/frontend/templates/message.phtml  ?>
                <?= __("This is my first Magento 2.x Module"); ?>
        

Clear Magento cache and check message with the same URL

RAJU SADADIYA (MAGENTO DEVELOPER)