How to create a “HELLO WORLD” module in Magento 2?

In this blog post, we have explained how to easily create Hello World module in Magento 2. Take a note that the concept of local/ community/ core/ folders only existed in Magento 1 and we don’t use them in Magento 2.

Follow the below steps to create HELLO WORLD module

All of our custom modules in Magento 2 go under the app/code directory. The first step towards create module magento 2 is to create a folder inside your project directory named after the module. This will be where all the files related to the module will reside. The modules have a 2 part naming structure, i.e, Namespace/Module. This is so that the modules can be organized more efficiently. So, assuming our Namespace is “Codilar” and our first module will be called “HelloWorld”, the directory structure for our module is gonna be app/code/Codilar/HelloWorld/…

So now that we’ve established the directory structure, let’s make a simple module which will show “Hello World” on the content section of the page when we hit the URL “http://mywebsite.com/helloworld/”.

Ok first thing’s first. This is going to be our directory structure for the complete project

So lets start with the registration.php file.
app/code/Codilar/HelloWorld/registration.php

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

Every module must contain this file. This basically tells Magento “Please register my module, it’s name is Codilar_HelloWorld, which is the Namespace and the Module name underscore separated”.

Next we come to the etc/module.xml
app/code/Codilar/HelloWorld/etc/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="Codilar_HelloWorld" setup_version="0.0.1"/>
</config>

This file just contains some basic information about the module. Like the module name and module version.

Now the basic files absolutely necessary for any module to work are created. Next we would create a frontend route inside our etc/frontend/routes.xml file which would tell Magento to “Forward the request to our module’s controller whenever the URL is {{base_url}}/helloworld/

app/code/Codilar/HelloWorld/etc/frontend/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="Codilar_HelloWorld" />
</route>
</router>
</config>

Now we make the actual controller where the request would be routed.
app/code/Codilar/HelloWorld/Controller/Index/Index.php

<?php
/**
*
* @package magento2
* @author Codilar Technologies
* @license https://opensource.org/licenses/OSL-3.0 Open Software License v. 3.0 (OSL-3.0)
* @link https://www.codilar.com/
*/
namespace Codilar\HelloWorld\Controller\Index;

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

class Index extends Action {
/**
* @var PageFactory
*/
private $pageFactory;


/**
* Index constructor.
* @param Context $context
* @param PageFactory $pageFactory
*/
public function __construct(
Context $context,
PageFactory $pageFactory
)
{
parent::__construct($context);
$this->pageFactory = $pageFactory;
}


/**
* Execute action based on request and return result
*
* Note: Request will be added as operation argument in future
*
* @return \Magento\Framework\Controller\ResultInterface|ResponseInterface
* @throws \Magento\Framework\Exception\NotFoundException
*/
public function execute()
{
$page = $this->pageFactory->create();
return $page;
}
}

Now we make our layout file to handle the request
app/code/Codilar/HelloWorld/view/frontend/layout/helloworld_index_index.xml

<?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="Codilar\HelloWorld\Block\Hello" name="helloworld" template="Codilar_HelloWorld::hello.phtml" />
</referenceContainer>
</body>
</page>

The layout file basically “references” the “content” container, and inserts our own block Codilar\HelloWorld\Block\Hellointo it. And remember, blocks and templates always come in pairs. Hence our block also uses the template Codilar_HelloWorld::hello.phtml 

Now to create our block file
app/code/Codilar/HelloWorld/Block/Hello.php

<?php
/**
*
* @package magento2
* @author Codilar Technologies
* @license https://opensource.org/licenses/OSL-3.0 Open Software License v. 3.0 (OSL-3.0)
* @link https://www.codilar.com/
*/

namespace Codilar\HelloWorld\Block;

use Magento\Framework\View\Element\Template;

class Hello extends Template
{
public function getText() {
return "Hello World";
}
}

Notice that the block has a function getText() . The block’s function within Magento’s MVC architecture is to structure and provide data to the template which the template will then display

And now finally coming to the template file
app/code/Codilar/HelloWorld/view/frontend/templates/hello.phtml

<?php
/* @var \Starlabs\HelloWorld\Block\Hello $block */
?>
<label><?= __("Data retrieved from Block is ") ?></label>
<h1><?= $block->getText() ?></h1>

The template’s job is to fetch data from it’s relevant block (mentioned as an @var comment at the beginning of the template file) and display it accordingly. Ideally, the template should not be responsible for any logical decisions.

Well that’s about it. Now we just run the php bin/magento setup:upgrade command from our terminal to install our new module and then open our favourite browser and type http://mywebsite.com/helloworld/, and we should be able to see our template in action, like this.
Click here to download a zip copy of the above mentioned project