Magento 2 Module
Magento

Magento 2 Hello World Module Tutorial (Step-by-Step)

Chapter: Magento 2 Hello World Module (Acesofetch)

This chapter explains how to create a basic Magento 2.4.5 module.
A module is the foundation of Magento customization. Every feature in Magento
is built as a module.

You will learn how to create:
Module Registration, Routes, Controller, Layout, and Template.
This is the minimum structure required for a working frontend module.

⭐ Final Module Structure


app/code/Acesofetch/HelloWorld/
│
├── registration.php
├── etc/
│   ├── module.xml
│   └── frontend/
│       └── routes.xml
├── Controller/
│   └── Index/
│       └── Index.php
├── view/
│   └── frontend/
│       ├── layout/
│       │   └── helloworld_index_index.xml
│       └── templates/
│           └── hello.phtml

⭐ Step 1: registration.php


<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Acesofetch_HelloWorld',
    __DIR__
);

⭐ Step 2: module.xml


<?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="Acesofetch_HelloWorld" setup_version="1.0.0"/>
</config>

⭐ Step 3: routes.xml


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

This creates the URL:
/helloworld

⭐ Step 4: Controller


<?php

namespace Acesofetch\HelloWorld\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{
    protected $resultPageFactory;

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

    public function execute()
    {
        return $this->resultPageFactory->create();
    }
}

⭐ Step 5: Layout File


<?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="Magento\Framework\View\Element\Template"
                   name="helloworld.block"
                   template="Acesofetch_HelloWorld::hello.phtml" />
        </referenceContainer>
    </body>
</page>

⭐ Step 6: Template File


<div class="acesofetch-hello">
    <h1>Hello World from Acesofetch Magento Module!</h1>
    <p>This is a custom Magento 2 frontend module.</p>
</div>

⭐ Step 7: Enable the Module


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

⭐ Access the Module


http://yourdomain.com/helloworld

📌 How Magento Loads It

  • routes.xml defines the URL
  • Controller executes
  • Layout loads block
  • Block loads template
  • Template renders HTML

📌 Core Understanding

Modules create features.
Controllers handle requests.
Layouts structure pages.
Templates render output.

Leave a Reply

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