Reading list Switch to dark mode

    How to Create Hello World Module in Magento 2

    Updated 23 February 2024

    How to Create a hello world extension in Magento 2 ( adobe commerce )

    You can get the setup guide from https://cloudkul.com/blog/magento-2-4-5-installation-on-ubuntu-22-04/

    In Magento2 there is a drastic change in the structure of the code. All the code pools are removed and also the Skin directory. There are many changes related to the theme folder as well. To understand how the structure of Magento2 works, let us check it by creating a simple hello module.

    Before starting the code section, let us create the directory structure we need.

    app/code/Webkul/Hello
    app/code/Webkul/Hello/etc
    app/code/Webkul/Hello/etc/frontend
    app/code/Webkul/Hello/Controllers
    app/code/Webkul/Hello/view/frontend/layout
    app/code/Webkul/Hello/view/frontend/templates

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Now, as we have the directory structure ready, we will now create the file as per the module requirement in the given sequence:

    1.First, we have to create the module registration  file named registration.php in app/code/Webkul/Hello

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

    2.Then we have to create the module configuration file named module.xml in app/code/Webkul/Hello/etc

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
        <module name="Webkul_Hello" setup_version="2.0.0">
        </module>
    </config>

    3. Now, we will create a route configuration file named routes.xml in app/code/Webkul/Hello/etc/frontend

    <?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="hello" frontName="hello">
                <module name="Webkul_Hello" />
            </route>
        </router>
    </config>

    4. As we have defined the route now, we will create the controller file. In Magento2, we need to create separate file for each action under the controller folder.

    In our case we will create Index.php file in app/code/Webkul/Hello/Controller/Index

    In every action file there will be a method name excute() that will be invoked when the action is called.

    <?php
    namespace Webkul\Hello\Controller\Index;
    
    use Magento\Framework\App\Action\Action;
    use Magento\Framework\App\Action\Context;
    use Magento\Framework\View\Result\PageFactory;
    
    /**
     * Webkul Hello Landing page Index Controller.
     */
    class Index extends Action
    {
        /**
         * @var PageFactory
         */
        protected $_resultPageFactory;
    
        /**
         * @param Context     $context
         * @param PageFactory $resultPageFactory
         */
        public function __construct(
            Context $context,
            PageFactory $resultPageFactory
        ) {
            $this->_resultPageFactory = $resultPageFactory;
            parent::__construct($context);
        }
    
        /**
         * Hello Landing page.
         *
         * @return \Magento\Framework\View\Result\Page
         */
        public function execute()
        {
            $resultPage = $this->_resultPageFactory->create();
            // Set title of page
            $resultPage->getConfig()->getTitle()->set(__('Sample module in Magento 2 by Webkul'));
            return $resultPage;
        }
    }

    5. Further, we will create a Block file named Hello.php in app/code/Webkul/Hello/Block

    <?php
    namespace Webkul\Hello\Block;
    
    /*
     * Webkul Hello Block
     */
    
    class Hello extends \Magento\Framework\View\Element\Template
    {
        /**
         * @return $this
         */
        protected function _prepareLayout()
        {
            return parent::_prepareLayout();
        }
    
        /**
         * getContentForDisplay
         * @return string
         */
        public function getContentForDisplay()
        {
            return __("Successful! This is a sample module in Magento 2 by webkul.");
        }
    }

    6. Now, as we have our Controller and Block ready, we will create layout file named hello_index_index.xml in app/code/Webkul/Hello/view/frontend/layout

    Here we will create separate file for each action in layout.

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceContainer name="content">
                <block class="Webkul\Hello\Block\Hello" name="hello" template="success.phtml" />
            </referenceContainer>
        </body>
    </page>

    7. Further, we will create our phtml file that will be called named success.phtml in app/code/Webkul/Hello/view/frontend/templates

    <h2><?php echo $block->getContentForDisplay(); //method call from block ?></h2>

    8. Finally, as all our module files are created now we will install our module by run following commands from magento root directory.

    $ php bin/magento setup:upgrade
    $ php bin/magento cache:clean
    $ php bin/magento cache:flush

    9. Now our module installed properly.

    We can check the out put using www.domain.com/hello/index

    10. Output page display as following

    output

    Download sample code form github

    You may visit other Magento 2 tutorials on webkul blog. We also offer end-to-end services on Magento 2 and We are an Adobe commerce partner as well. Also, you may Hire Magento Developer for dedicated customization services.

    Thanks ­čÖé

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    3 comments

  • Anu
    • abhishek (Moderator)
  • priyatosh ojha
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home