{"id":830,"date":"2023-11-16T18:48:39","date_gmt":"2023-11-16T13:18:39","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=830"},"modified":"2023-11-16T18:48:39","modified_gmt":"2023-11-16T13:18:39","slug":"magento-2-create-a-simple-hello-world-module","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/magento-2-create-a-simple-hello-world-module\/","title":{"rendered":"Magento 2 Create a Simple Hello World Module"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to create a simple Hello World module in Magento 2.<\/p>\n\n\n\n

A module is a set of directories that includes controller, block, helper that are required to build store features.<\/p>\n\n\n\n

This simple module can display \u201cWelcome to Magecurious HelloWorld module.\u201d and \u201cHello World!\u201d in the browser.<\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step\u00a0given below to Create Hello World Module in Magento 2.<\/p>\n\n\n\n

STEPS FOR CREATE HELLO WORLD MODULE IN MAGENTO 2<\/strong><\/h2>\n\n\n\n

Step 1: Create folder under app\/code<\/strong><\/p>\n\n\n\n

You can set the name of the module as \u201c<Vendor_Extension>\u201d. In this example we kept the Vendor name as Vendor and Module name as Extension.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension<\/strong><\/p>\n\n\n\n

Step 2: Create registration.php file<\/strong><\/p>\n\n\n\n

This file is used to register the module.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/registration.php<\/strong><\/p>\n\n\n\n

<?php<\/p>\n\n\n\n

\\Magento\\Framework\\Component\\ComponentRegistrar::register(<\/p>\n\n\n\n

    \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,<\/p>\n\n\n\n

    ‘Vendor_Extension’,<\/p>\n\n\n\n

    __DIR__<\/p>\n\n\n\n

);<\/p>\n\n\n\n

Step 3: Create module.xml file<\/strong><\/p>\n\n\n\n

This file is used to configure the module.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/etc\/module.xml<\/strong><\/p>\n\n\n\n

<?xml version=”1.0″?><\/p>\n\n\n\n

<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module\/etc\/module.xsd”><\/p>\n\n\n\n

    <module name=”Vendor_Extension” setup_version=”1.0.0″><\/p>\n\n\n\n

    <\/module><\/p>\n\n\n\n

<\/config><\/p>\n\n\n\n

Step 4: Create routes.xml file<\/strong><\/p>\n\n\n\n

This is a frontend router file to set the router name.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/etc\/frontend\/routes.xml<\/strong><\/p>\n\n\n\n

<?xml version=”1.0″?><\/p>\n\n\n\n

<config xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:App\/etc\/routes.xsd”><\/p>\n\n\n\n

    <router id=”standard”><\/p>\n\n\n\n

        <route id=”helloworld” frontName=”helloworld”><\/p>\n\n\n\n

            <module name=”Vendor_Extension” \/><\/p>\n\n\n\n

        <\/route><\/p>\n\n\n\n

    <\/router><\/p>\n\n\n\n

<\/config><\/p>\n\n\n\n

Step 5: Create Controller file Index.php<\/strong><\/p>\n\n\n\n

This is a Controller file and has an execute() method, this method is called when action is performed.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/Controller\/Index\/Index.php<\/strong><\/p>\n\n\n\n

<?php<\/p>\n\n\n\n

namespace Vendor\\Extension\\Controller\\Index;<\/p>\n\n\n\n

use Magento\\Framework\\App\\Action\\Action;<\/p>\n\n\n\n

use Magento\\Framework\\App\\Action\\Context;<\/p>\n\n\n\n

use Magento\\Framework\\View\\Result\\PageFactory;<\/p>\n\n\n\n

class Index extends Action<\/p>\n\n\n\n

{<\/p>\n\n\n\n

    \/**<\/p>\n\n\n\n

     * @var PageFactory<\/p>\n\n\n\n

     *\/<\/p>\n\n\n\n

    protected $_resultPageFactory;<\/p>\n\n\n\n

    \/**<\/p>\n\n\n\n

     * @param Context     $context<\/p>\n\n\n\n

     * @param PageFactory $resultPageFactory<\/p>\n\n\n\n

     *\/<\/p>\n\n\n\n

    public function __construct(<\/p>\n\n\n\n

        Context $context,<\/p>\n\n\n\n

        PageFactory $resultPageFactory<\/p>\n\n\n\n

    ) {<\/p>\n\n\n\n

        $this->_resultPageFactory = $resultPageFactory;<\/p>\n\n\n\n

        parent::__construct($context);<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    public function execute()<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

        $resultPage = $this->_resultPageFactory->create();<\/p>\n\n\n\n

        $resultPage->getConfig()->getTitle()->set(__(‘Welcome to Magecurious HelloWorld module.’));<\/p>\n\n\n\n

        return $resultPage;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Step 6: Create block file HelloWorld.php<\/strong><\/p>\n\n\n\n

This is a block file used to call functions in our template file.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/Block\/HelloWorld.php<\/strong><\/p>\n\n\n\n

<?php<\/p>\n\n\n\n

namespace Vendor\\Extension\\Block;<\/p>\n\n\n\n

class HelloWorld extends \\Magento\\Framework\\View\\Element\\Template<\/p>\n\n\n\n

{<\/p>\n\n\n\n

    \/**<\/p>\n\n\n\n

     * @return $this<\/p>\n\n\n\n

     *\/<\/p>\n\n\n\n

    protected function _prepareLayout()<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

        return parent::_prepareLayout();<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    \/**<\/p>\n\n\n\n

     * getContentForDisplay<\/p>\n\n\n\n

     * @return string<\/p>\n\n\n\n

     *\/<\/p>\n\n\n\n

    public function getMessage()<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

        return __(“Hello World!”);<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Step 7: Create layout file helloworld_index_index.xml<\/strong><\/p>\n\n\n\n

This file is required to call our phtml file.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/view\/frontend\/layout\/helloworld_index_index.xml<\/strong><\/p>\n\n\n\n

<?xml version=”1.0″?><\/p>\n\n\n\n

<page xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd”><\/p>\n\n\n\n

    <body><\/p>\n\n\n\n

        <referenceContainer name=”content”><\/p>\n\n\n\n

            <block class=”Vendor\\Extension\\Block\\HelloWorld” name=”helloworld” template=”helloworld.phtml” \/><\/p>\n\n\n\n

        <\/referenceContainer><\/p>\n\n\n\n

    <\/body><\/p>\n\n\n\n

<\/page><\/p>\n\n\n\n

Step 8: Create a template file helloworld.phtml<\/strong><\/p>\n\n\n\n

This file is used to represent the frontend view and shows the output.<\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/view\/frontend\/templates\/helloworld.phtml<\/strong><\/p>\n\n\n\n

<h2><?php echo $block->getMessage();?><\/h2><\/p>\n\n\n\n

Step 9: Finally run the below commands.<\/strong><\/p>\n\n\n\n

$ php bin\/magento setup:upgrade<\/p>\n\n\n\n

$ php bin\/magento cache:clean<\/p>\n\n\n\n

$ php bin\/magento cache:flush<\/p>\n\n\n\n

Step 10: Now run the module by typing the following command in the frontend.<\/strong><\/p>\n\n\n\n

URL -{{Site_Base_Url}}\/helloworld\/index\/index<\/p>\n\n\n\n

Step 11: Output:<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Final Thoughts:<\/strong><\/h2>\n\n\n\n

So this was the easiest way which we have told you in this blog. This is <\/p>\n\n\n\n

how you can Create a Simple Hello World Module in Magento 2. Hope you <\/p>\n\n\n\n

liked the blog.<\/p>\n\n\n\n

So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n

Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n

Thanks for reading and visiting our site.<\/p>\n\n\n

How useful was this post? <\/p>

Click on a star to rate it! <\/p>

  • <\/i> <\/li>
  • <\/i> <\/li>
  • <\/i> <\/li>
  • <\/i> <\/li>
  • <\/i> <\/li> <\/ul> <\/div>

    <\/p>