How to Create Block,Layout,Template in Magento2 with Example ?How to Create Controller in Magento2 with Example ?
Hello Friends My name is Vishal Prajapati.Today we learn about how to create new Block,Layout,Template in Magento2.
Please follows below steps
1. We have to create folder as mention below location.
"app/code/MSG/HelloWorld"
2. We have to create "module.xml" file inside etc folder.
"app/code/MSG/HelloWorld/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="MSG_HelloWorld" setup_version="1.0.0">
</module>
</config>
3. We have to create "registration.php" file at below location.
"app/code/MSG/HelloWorld/registration.php"
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'MSG_HelloWorld',
__DIR__
);
4. We have to create "composer.json" file at below location.
"app/code/MSG/HelloWorld/composer.json"
{
"name": "msg/helloworld",
"description": "Magento Study Guide HelloWorld",
"require": {
"php": "~7.3.0||~7.4.0"
},
"type": "magento2-module",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"MSG\\HelloWorld\\": ""
}
}
}
5. Create "routes.xml" file
"app/code/MSG/HelloWorld/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 frontName="helloworld" id="hw">
<module name="MSG_HelloWorld"/>
</route>
</router>
</config>
We can see "frontName" in above code which means keyword we are using in url.
We can see "id" in above code which means file name we are using for layout. filename should be.
{router_id}_{controller_name}_{action_name}.xml.
6. Create New Controller
"app/code/MSG/HelloWorld/Controller/Index/Index.php"
<?php
namespace MSG\HelloWorld\Controller\Index;
class Index 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()
{
return $this->_pageFactory->create();
}
}
7. Create Layout file
"app/code/MSG/HelloWorld/view/frontend/layout/hw_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" layout="1column">
<head>
<title>MSG Create Block,Layout,Template in Magento2</title>
</head>
<body>
<referenceContainer name="content">
<block class="MSG\HelloWorld\Block\Index" name="helloworld_display" template="MSG_HelloWorld::helloworld.phtml" />
</referenceContainer>
</body>
</page>
8. Create Block file
"app/code/MSG/HelloWorld/Block/Index.php"
<?php
namespace MSG\HelloWorld\Block;
class Index extends \Magento\Framework\View\Element\Template
{
public function __construct(\Magento\Framework\View\Element\Template\Context $context)
{
parent::__construct($context);
}
public function HelloWorld()
{
return __('Hello World');
}
}
9. Create template phtml file
"app/code/MSG/HelloWorld/view/templates/helloworld.php"
<?php
/**
* @var \MSG\HelloWorld\Block\Display $block
*/
echo $block->HelloWorld();
10. We can run Command in Console for clear cache.
php bin/magento set:up
php bin/magento s:s:d -f
No comments