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 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 Hello World module, you need to follow the following steps for Magento 2 Module Development:
step 1: Create the folder of Hello World module
step 2: Create etc/module.xml file
step 3: Create etc/registration.php file
step 4: Enable the module
Step 1: Create the folder of Hello World module
Module names in magento2 are divided into two part “VendorName_ModuleName”
e.g Magento_Search, Magento_Catalog or Webiators_Test
first part is the vendor and second part is the actual module.
Let’s take our module name to be “Webiators_HelloWorld”. First we need Focus on following guide to create the folders:
app/code/Webiators/HelloWorld
Step 2: Create etc/module.xml file
Next we need to create etc folder and add the module.xml file
app/code/Webiators/HelloWorld/etc/module.xml
Contents would be:
1 |
<!--?xml version="1.0"?--> |
Step 3: Create etc/registration.php file
Next we need to Create etc/registration.php file
In this step, we will add registration.php as following guide:
app/code/Webiators/HelloWorld/registration.php
Contents would be:
1 2 3 4 5 6 7 8 9 10 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Webiators_HelloWorld', __DIR__ ); |
Step 4: Enable the module
Finish the step 3, we have already created the HelloWorld module. And we will enable this module in this step
After create the module if you run the command as:
php bin/magento module:status
You should see the module is disable now:
List of disabled modules: Webiators _HelloWorld
Follow exact guide to enable the module right now, let run the command as:
php bin/magento module:enable Webiators _HelloWorld
Or other way, you can access the file:
app/etc/config.php
You will see a long list of modules there, just add your module as well
…
‘ Webiators _HelloWorld’ => 1,
…
Your module should be available now.
After this step, when you open your website in browser you will get an error saying
Please upgrade your database: Run bin/magento setup:upgrade from the Magento root directory.
Let run the command:
php bin/magento setup:upgrade
After complete,when you open your website in browser you will see the layout of the website is broken.
Please run the deloy command line to fix it.
php bin/magento setup:static-content:deploy
After deploy completed, you can also see your module from backend at System Configuration -> Advanced -> Disable Modules Output.
Now, we will create a controller to test module.
Before create a controller, we will create a route for 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 route, it is necessary to create routes.xml file
app/code/Webiators/HelloWorld/etc/frontend/routes.xml
since this is a frontend route, we added it in frontend/ folder else we need to add it to adminhtml/ folder
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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 is:
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 22 23 24 25 26 |
<?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 php bin/magento cache:clean to check result.
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.