How to Create a Simple Hello World Module for Magento 2

Create a Simple Hello World Module for Magento 2

Here’s a step-by-step guide on creating a basic Hello World module for Magento 2:

1. Setting Up the Module Folder:

Open your Magento 2 root directory using a terminal or code editor.
Navigate to the app/code directory. This is where you’ll create folders for your custom modules.
Inside app/code, create two new folders using your desired Vendor Name and Module Name. Magento uses a convention of <VendorName>/<ModuleName> for module structure.
For example, if your vendor name is MyCompany and the module name is HelloWorld, create folders named MyCompany and HelloWorld inside app/code.

2. Creating the Module Files:

Within your newly created module folder (MyCompany/HelloWorld in this example), create two folders named etc and view. These folders will store configuration files and frontend view files respectively.
Inside the etc folder, create a file named module.xml. This file defines basic information about your module.
Inside the view folder, create another folder named frontend. This folder will hold frontend-related files for your module.
Within the frontend folder, create two more folders named layout and templates.

3. Configuring the Module (module.xml):

Open the module.xml file in a text editor and paste the following code, replacing <VendorName> and <ModuleName> with your actual values:

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

This code defines the module name and its setup version.

4. Registering the Module (registration.php):

Still within the etc folder, create a new file named registration.php.
Paste the following code into the registration.php file, replacing <VendorName> and <ModuleName>:

PHP
<?php

declare(strict_types=1);

\Magento\Framework\Component\DependencyRegistrar::register(
    '<VendorName>/<ModuleName>',
    __DIR__
);

This code registers your module with Magento 2.

5. Creating the Controller (IndexController.php):

Navigate to the Controller folder within your module (app/code/<VendorName>/<ModuleName>/Controller). This folder might not exist yet, so create it if needed.
Inside the Controller folder, create a new file named IndexController.php.
Paste the following code into the IndexController.php file:

PHP
<?php

declare(strict_types=1);

namespace <VendorName>\<ModuleName>\Controller;

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

class IndexController extends Action
{
    /**
     * @var ResultFactory
     */
    private $resultFactory;

    public function __construct(
        Context $context,
        ResultFactory $resultFactory
    ) {
        $this->resultFactory = $resultFactory;
        parent::__construct($context);
    }

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

This code defines a simple controller class (IndexController) with an execute method that creates a basic page result.

6. Creating the Layout File (helloworld_index_index.xml):

Navigate to the layout folder within your module’s frontend folder (app/code/<VendorName>/<ModuleName>/view/frontend/layout).
Create a new file named helloworld_index_index.xml.
Paste the following code into the helloworld_index_index.xml file, replacing <VendorName> and <ModuleName>:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_schema.xsd">
  <layout name="<VendorName>_<ModuleName>::index_index">
    <body>
      <reference Container="main">
        <block class="<VendorName>\<ModuleName>\Block\Index" name="helloworld.message" template="<VendorName>_HelloWorld::helloworld.phtml" />
      </reference>
    </body>
  </layout>
</config>

Explanation of the changes:

We added the closing tags for <layout>, <body>, and <reference>.
Inside the <reference Container=”main”> tag, we added a new block element.
- This block element defines a new block class named <VendorName>\<ModuleName>\Block\Index and assigns it the alias helloworld.message.
- The block will use the template file named helloworld.phtml.

7. Creating the Template File (helloworld.phtml):

Navigate to the templates folder within your module’s frontend folder (app/code/<VendorName>/<ModuleName>/view/frontend/templates).
Create a new file named helloworld.phtml.
Paste the following code into the helloworld.phtml file:

HTML
<h1>Hello World!</h1>
This is a message from my custom Magento 2 module.

8. Running the Module:

After completing these steps, you can flush the Magento cache to ensure your changes are reflected. You can do this by running the following command in your terminal while navigating to the Magento 2 root directory:

Bash
php bin/magento cache:flush

Now, you can access your Hello World module by visiting a route like: http://your-magento-store.com/helloworld/index/index/ (replace http://your-magento-store.com with your actual store URL).

This should display the text “Hello World! This is a message from my custom Magento 2 module.” on your webpage.

Congratulations! You’ve successfully created a simple Hello World module for Magento 2.