In the blog, we will discuss the topic of how to create a simple Hello World module in Magento 2 in order to help you have the clearest and easiest way to create it now.
We’re going to build a very simple module in Magento 2. When finished, the module’s output will say “Hello world!” in the block content on a custom frontend route.
To create the Hello World module, you need to follow the following steps for Magento 2 Module Development:
step 1: Create the folder of the Hello World module
step 2: Create etc/module.xml file
step 3: Create etc/registration.php file
Step 1: Create the folder of the Hello World module
In this demo, we have kept the Vendor name is Webiators & Module name is HelloWorld
Let’s take our module name to be “Webiators_HelloWorld”. First, we need Focus on the following guide to create the folders:
app/code/Webiators/HelloWorld
Step 2: Create etc/module.xml file
Next, we need to create an etc folder and add the module.xml file
app/code/Webiators/HelloWorld/etc/module.xml
Contents would be:
|
1 2 3 4 5 |
<?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="Webiators_HelloWorld" setup_version="1.0.0"> </module> </config> |
Step 3: Create etc/registration.php file
Next, we need to Create the etc/registration.php file
In this step, we will add registration.php as the following guide:
app/code/Webiators/HelloWorld/registration.php
Contents would be:
|
1 2 3 4 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Webiators_HelloWorld', __DIR__ ); |
Now, we will create a controller to test the module.
Before creating a controller, we will create a route for the HelloWorld module.
Route’s in magento are divided into 3 parts: Route frontname, controller and action as following example:
http:// Webiators .com/index.php/frontname/controller/action
To add a route, it is necessary to create a routes.xml file
app/code/Webiators/HelloWorld/etc/frontend/routes.xml
since this is a frontend route, we added it in the frontend/ folder else we need to add it to adminhtml/ folder
|
1 2 3 4 5 6 7 8 |
<?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 frontName="helloworld" id="helloworld"> <module name="Webiators_HelloWorld"/> </route> </router> </config> |
Content would be:
After defining the first part of the route, the URL will be displayed as:
http://helloworld/*
E.g: http://localhost/helloworld/*
Then, we will continue to create the controller and action
The folder and file you need to create are:
app/code/ Webiators /HelloWorld/Controller/Index/Test.php
Contents would be:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php namespace Webiators\HelloWorld\Controller\Index; class Test extends \Magento\Framework\App\Action\Action { protected $_pageFactory; public function __construct( \Magento\Framework\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $pageFactory) { $this->_pageFactory = $pageFactory; return parent::__construct($context); } public function execute() { echo "Hello World"; exit; } } |
After completed, please run the below-given commands to check the result.
|
1 2 3 4 5 6 |
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f php bin/magento cache:flush php bin/magento cache:clean php bin/magento indexer:reindex |
Your URL now should be as:
http://helloworld/index/test
After finish, all steps, the output Hello World should be displayed in your browser when you open the URL. We hope our guide is very useful and effective for you. Any questions, feel free to leave a comment below.
