Hello World on Magento 2

Hello Everyone, This is MO.

Whenever you start learning any new programming language all you have to do is start from the “Hello World” program. Similarly, this blog is completely for beginners to learn Magento2.

In this blog, we will teach you how to display HELLO WORLD in Magento 2  in two different ways.

Before that, there are some prerequisites that you have to know before going ahead

1. Magento 2 Module Creation

There are 2 ways to display Hello World in Magento 2

1. Using Template File (.phtml)
2. Without Template File (.phtml)

First, we will start displaying Hello World without a template file:

Step 1: Create a route file in /etc/frontend/routes.xml

<?xml version="1.0"?>
<!--
/**
* Mo_HelloWorld
*
* @category HelloWorld
* @package Mo_HelloWorld
* @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License, version 3 (GPL-3.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="Mo_HelloWorld"/>
        </route>
    </router>
</config>

We need to create the routes.xml file inside the /etc/frontend directory because this route should only be used in the front end, not in the backend.

The router-id should be standard because the router belongs to the frontend

Step 2: Create a controller file HelloWorld.php in app/code/Mo/HelloWorld/Controller

<?php
/**
 * Mo_HelloWorld
 *
 * @category HelloWorld
 * @package Mo_HelloWorld
 * @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License, version 3 (GPL-3.0)
 */
namespace Mo\HelloWorld\Controller\Index;

use Magento\Framework\App\ActionInterface;

class Index implements ActionInterface
{

    public function execute()
    {
        echo “Hello World”;
         die();
    }
}

?>

Since Magento 2.4 we can’t extend the controller with Action(Magento\Framework\App\Action\Action) because it is deprecated. So we have to implement the interface (Magento\Framework\App\ActionInterface)

Now run bin/magento se:up command with chmod -R 777 var/ pub/ generated/ permission command

Then you have to go to your browser and hit MAGENTO_BASE_URL/helloworld

This will display the hello world on a blank white screen.

Now we will Display Hello World using a template file.

Step 1: Create a route file in /etc/frontend/routes.xml

<?xml version="1.0"?>
<!--
/**
* Mo_HelloWorld
*
* @category HelloWorld
* @package Mo_HelloWorld
* @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License, version 3 (GPL-3.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="Mo_HelloWorld"/>
        </route>
    </router>
</config>

We need to create the routes.xml file inside the /etc/frontend directory because this route should only be used in the front end, not in the backend.

The router-id should be standard because the router belongs to the frontend

Step 2: Create a controller file HelloWorld.php in app/code/Mo/HelloWorld/Controller

<?php
/**
 * Mo_HelloWorld
 *
 * @category HelloWorld
 * @package Mo_HelloWorld
 * @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License, version 3 (GPL-3.0)
 */
namespace Mo\HelloWorld\Controller\Index;

use Magento\Framework\App\ActionInterface;
use Magento\Framework\View\Result\PageFactory;

class Index implements ActionInterface
{
    /**
     * @var PageFactory
     */
    private $pageFactory;

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

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

Since Magento 2.4 we can’t extend the controller with Action (Magento\Framework\App\Action\Action) because it is deprecated. So we have to implement the interface (Magento\Framework\App\ActionInterface)

Step 3: Create an XML file with the name helloworld_index_index.xml (routename_controllerdirectory_controllerclassname.xml) in app/code/Mo/HelloWorld/view/frontend/layout

<?xml version="1.0"?>
<!--
/**
* Mo_HelloWorld
*
* @category HelloWorld
* @package Mo_HelloWorld
* @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License, version 3 (GPL-3.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="Mo\HelloWorld\Block\HelloWorld" name="helloworld"
                   template="Mo_HelloWorld::helloworld.phtml"/>
        </referenceContainer>
    </body>
</page>

In this layout file, you will be specifying where actually you want to display hello world. 

The content container is already defined by Magento 2. So we will be using the same since the container is already defined.

    We need to use a reference container tag and there we need to create our own block so we will open the block tag and mention the class which you are creating in the block to provide data for your phtml and mention which phtml you are going to use to display and the name should be MoHelloworld::helloworld.phtml(VendorName_ModuleName::phtmlfile).

VendorName_ModuleName:: will go to your view/frontend/templates directory so if any directory is existing even after that you can mention that path after:: 

Step 4: create a block file HelloWorld.php in app/code/Mo/HelloWorld/Block

<?php
/**
 * Mo_HelloWorld
 *
 * @category HelloWorld
 * @package Mo_HelloWorld
 * @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License, version 3 (GPL-3.0)
 */
namespace Mo\HelloWorld\Block;

use Magento\Framework\View\Element\Template;

class HelloWorld extends Template
{
    /**
     * @return string
     */
    public function getHelloWorld()
    {
        return "Hello World";
    }
}
?>

Your Block class should need to extend the Magento\Framework\View\Element\Template and create a public method and return the hello world string from that method.

Step 5: Create a template file helloworld.phtml in app/code/Mo/HelloWorld/view/frontend/templates

<?php
/**
 * Mo_HelloWorld
 *
 * @category HelloWorld
 * @package Mo_HelloWorld
 * @license http://opensource.org/licenses/gpl-3.0.html GNU General Public License, version 3 (GPL-3.0)
 */
/* @var HelloWorld $block */
use Mo\HelloWorld\Block\HelloWorld;
?>
<h1><?= $block->getHelloWorld() ?></h1>
?>

Using PhpStorm’s Documentation mentions $block is a type of the Block class so that you will get the suggestions of all the methods available in that block.

Then call the method using your block inside any tag within <?= ?> tag to display a single line with no need of <?php echo “” ?> this statement.

Now run bin/magento se:up command with chmod -R 777 var/ pub/ generated/ permission command

Then you have to go to your browser and hit MAGENTO_BASE_URL/helloworld

This will display the hello world on the browser screen with the theme design.

Thank you for reading. Are you fascinated to know more about Magento, What are you waiting for? Check out the other blogs in the Magento section and follow us through Youtube and Instagram to know more about us.