In this blog, we will discuss how we can Create Block and phtml in Magento 2 for rendering the page.
In our previous blog, we have discussed Create a Controller in Magento 2. If you have not read that blog yet then read that blog and continue with this blog. Because we need a controller to display the page in the frontend
Create a view for the frontend.
1. Create a Controller file
We need a Controller to call our layout file. So, Create a controller and paste the below code.
PATH: app/code/Rk/SimpleModule/Controller/Index/Index.php
<?php
namespace Rk\SimpleModule\Controller\Index;
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();
}
}
2. Create a layout file.
The layout file is used to define the structure of our page which displays on the frontend. Like which CSS we want to add or which js we want to add which blog goes to footer and which phtml file will render in the content area.
Layout filename is a combination of route id, controller and action. router_id_controller_action.xml
Create simplemodule_index_index.xml and paste the below code.
PATH:app/code/Rk/SimpleModule/view/frontend/layout/simplemodule_index_index.xml
<?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="Rk\SimpleModule\Block\Index\Index" name="index.index" template="Rk_SimpleModule::index/index.phtml"/>
</referenceContainer>
</body>
</page>
3. Create a Block File.
A block file is used to get data from the model or from the helper to display in the phtml file as per the need by calling block function in the phtml file.
create Index.php file and paste the below code.
PATH: app/code/Rk/SimpleModule/Block/Index/Index.php
<?php
namespace Rk\SimpleModule\Block\Index;
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);
}
public function getWelcomeMessage()
{
return "Welcome to the Magento Blog.";
}
}
4. Create a template file.
In our last step, we will create a template file to display our data in frontend. For that create template file which we have defined in our layout XML. Create index.phtml and paste below code.
PATH:app/code/Rk/SimpleModule/view/frontend/templates/index/index.phtml
<?php /** * @var $block \Rk\SimpleModule\Block\Index\Index */ ?> <h2><?php echo $block->getWelcomeMessage()?></h2>
For more details about the how Magento manage block layout and templates you can visit Magento Dev Docs
Hope you find this Tutorial is helpful. Do comment if you face any issue or Contact me If you want any help or customization in your existing Project or Extension.
