Hello World
This post we will show you How to create Hello World Module in Magento 2.
As for Magento 2 Structure, all you should know all custom modules reside in the folder app/code, local and community are has been removed in Magento 2.
In this post you will know how to create a new custom module, create route and display “Hello world“
Step 1: Create the module’s folder.
In Magento 2 module name is divided into two part “Namespace_ModuleName“, the first part is the vendor name and second part is module name, folder path should be “Namespace/ModuleName“, let take our module name to be “Solution_HelloWorld”.
app/code/Solution/HelloWorld
Step 2: Create module.xml, define the module name and version.
All module need a file named “module.xml”, let create it in our module.
app/code/Solution/HelloWord/etc/module.xml
Contents are:
<?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="Solution_HelloWorld" setup_version="1.0.0"/>
</config>
Code language: HTML, XML (xml)Absolutely, you need more two files are registration.php and composer.json
- app/code/Solution/HelloWorld/registration.php: contents are
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Solution_HelloWorld',
__DIR__
);
Code language: HTML, XML (xml)- app/code/Solution/HelloWorld/composer.json: content would be
{
"name": "solution/module-helloworld",
"description": "",
"type": "magento2-module",
"license": "proprietary",
"authors": [
{
"name": "Solution Tutorials",
"email": "[email protected]"
}
],
"minimum-stability": "dev",
"require": {},
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"Solution\\HelloWorld\\": ""
}
}
}
Code language: JSON / JSON with Comments (json)Step 3: Enabling the module and review the module status.
All done the module is ready, now you need to enable this module, from Magento root directory, please run
bin/magento module:enable Solution_HelloWorld;
Code language: JavaScript (javascript)or you can view module name if you run the command
bin/magento module:status;
Code language: JavaScript (javascript)the result should be
List of disabled modules:
Solution_Hello
Code language: PHP (php)Step 4: Setup upgrade for updating the config.php
After bin/magento module:enable Solution_HelloWorld; you need to run bin/magento setup:upgrade;
bin/magento setup:upgrade;
Let check your module on app/etc/config.xml
you will see a long list of modules there, just add your module as well
'Solution_HelloWorld' => 1
Code language: PHP (php)Step 5: Create a Controller and Route.
Now we need a URL that you can show “Hello World”, Route and Controller in Magento is another way to create custom URL in Magento 2.
Route:– In Magento 2 Route can be defined in [Module Path]/etc/frontend/routes.xml, this file to define frontend route can access without Login as Admin.
<?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="solution" id="solution">
<module name="Solution_HelloWorld"/>
</route>
</router>
</config>
Code language: HTML, XML (xml) Controller
– Create controller [domain-url]/solution/helloworld/ as solution is frontName is defined at routes.xml
namespace Solution\HelloWorld\Controller\Helloworld;
class Index extends \Magento\Framework\App\Action\Action
{
protected $resultPageFactory;
/**
* Constructor
*
* @param \Magento\Framework\App\Action\Context $context
* @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
*/
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Execute view action
*
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
return $this->resultPageFactory->create();
}
}
Code language: PHP (php)Now you can access to [your domain]/solution/helloworld/ to view the result
Step 6: Create a Layout & Block for the controller.
This is the final advanced step, let create a block and define it on your layout to echo “Hello World” or you can return “Hello World” on your controller.
- Create your layout view/frontend/layout/solution_helloworld_index.xml
Content are:
<?xml version="1.0" ?>
<page layout="1column" 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="Solution\HelloWorld\Block\Helloworld\Index"
name="helloworld.index" template="Solution_HelloWorld::helloworld/index.phtml"/>
</referenceContainer>
</body>
</page>
Code language: HTML, XML (xml)- Let create Solution\HelloWorld\Block\Helloworld\Index block.
<?php
namespace Solution\HelloWorld\Block\Helloworld;
class Index extends \Magento\Framework\View\Element\Template
{
/**
* Constructor
*
* @param \Magento\Framework\View\Element\Template\Context $context
* @param array $data
*/
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
}
Code language: HTML, XML (xml)- Absolutely Block needs template: Solution_HelloWorld::helloworld/index.phtml => view/frontend/templates/helloworld/index.phtml
<h2>Hello World</h2>
Let Flush the cache and access [your domain]/solution/helloworld/
Thank for reading.
