How to Create Hello World Module in Adobe Commerce (Magento 2)

How to Create a hello world extension in Adobe Commerce (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 Magento 2 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 Magento 2 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

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. For this 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

Download sample code form github

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

Thanks 🙂