Hello Everyone,
In this blog, we will learn about how to create a simple Hello World module in Magento 2.
A module is a set of directories that includes controller, block, helper that are required to build store features.
This simple module can display “Welcome to HelloWorld module.” and “Hello World!” in the browser.
Without wasting your time, let us guide you straight away. Follow the easy step
given below to Create Hello World Module in Magento 2.
STEPS FOR CREATE HELLO WORLD MODULE IN MAGENTO 2
Step 1: Create folder under app/code
You can set the name of the module as “<Vendor_Extension>”. In this example we kept the Vendor name as Vendor and Module name as Extension.
app/code/Vendor/Extension
Step 2: Create registration.php file
This file is used to register the module.
app/code/Vendor/Extension/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
‘Vendor_Extension’,
__DIR__
);
Step 3: Create module.xml file
This file is used to configure the module.
app/code/Vendor/Extension/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=”Vendor_Extension” setup_version=”1.0.0″>
</module>
</config>
Step 4: Create routes.xml file
This is a frontend router file to set the router name.
app/code/Vendor/Extension/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=”Vendor_Extension” />
</route>
</router>
</config>
Step 5: Create Controller file Index.php
This is a Controller file and has an execute() method, this method is called when action is performed.
app/code/Vendor/Extension/Controller/Index/Index.php
<?php
namespace Vendor\Extension\Controller\Index;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
class Index extends Action
{
/**
* @var PageFactory
*/
protected $_resultPageFactory;
/**
* @param Context $context
* @param PageFactory $resultPageFactory
*/
public function __construct(
Context $context,
PageFactory $resultPageFactory
) {
$this->_resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
$resultPage = $this->_resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__(‘Welcome to HelloWorld module.’));
return $resultPage;
}
}
Step 6: Create block file HelloWorld.php
This is a block file used to call functions in our template file.
app/code/Vendor/Extension/Block/HelloWorld.php
<?php
namespace Vendor\Extension\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{
/**
* @return $this
*/
protected function _prepareLayout()
{
return parent::_prepareLayout();
}
/**
* getContentForDisplay
* @return string
*/
public function getMessage()
{
return __(“Hello World!”);
}
}
Step 7: Create layout file helloworld_index_index.xml
This file is required to call our phtml file.
app/code/Vendor/Extension/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=”Vendor\Extension\Block\HelloWorld” name=”helloworld” template=”helloworld.phtml” />
</referenceContainer>
</body>
</page>
Step 8: Create a template file helloworld.phtml
This file is used to represent the frontend view and shows the output.
app/code/Vendor/Extension/view/frontend/templates/helloworld.phtml
<h2><?php echo $block->getMessage();?></h2>
Step 9: Finally run the below commands.
$ php bin/magento setup:upgrade
$ php bin/magento cache:clean
$ php bin/magento cache:flush
Step 10: Now run the module by typing the following command in the frontend.
URL -{{Site_Base_Url}}/helloworld/index/index
Step 11: Output:
Final Thoughts:
So this was the easiest way which we have told you in this blog. This is
how you can Create a Simple Hello World Module in Magento 2. Hope you
liked the blog.
So quickly go to the comment box and tell me how you like this blog?
Stay tuned with us on our site to get new updates of Magento.
Thanks for reading and visiting our site.