Magento 2- Hello World – Layout/Blocks

So in our previous blog we have shown text using controller but now we will show it through our template file by using layout and block, and this is the recommended way. We will be using the module created in previous blog W3solver_Helloworld

Step1

Now we will be replacing the controller execute function code so that we can call layout file and render the output. In Magento 2 we do not have Mage class to initialize block, model, helper, here we use dependency injection i.e, whatever functions we want to use we will be injecting those classes through constructor such as we did in below code by injecting ‘PageFactory’

 W3solver/Helloworld/Controller/Hello/Index.php 
<?php
namespace W3solver\Helloworld\Controller\Hello;

 class Index extends \Magento\Framework\App\Action\Action
{
    protected $_resultPageFactory;
    
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory)
    {
        $this->_resultPageFactory = $resultPageFactory;  
        return parent::__construct($context);
    }
     
    public function execute()
    {
        return $this->_resultPageFactory->create(); 
    } 
}

Step 2

Now we will be creating our layout file, in Magento 2 for every route layout file is different, the handle in magento1 are now converted to a separate new files in Magento2. We have one default.xml file where we can put code which needs to be called for all action. All of our layout file stays at

view/frontend/layout

Path of our layout file is

W3solver/Helloworld/view/frontend/layout/helloworld_hello_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">       
    <referenceContainer name="content">
        <block template="hello.phtml" class="W3solver\Helloworld\Block\Hello" name="hello"/>
    </referenceContainer>
</page>

Step 3

Above file tells the template to be used and block class name, thus in this step we will create our block class and template file. Here we have set some text so that we can retrieve it in our template

W3solver/Helloworld/Block/Hello.php
namespace W3solver\Helloworld\Block;

class Hello extends \Magento\Framework\View\Element\Template {
    public function __construct(
    \Magento\Framework\View\Element\Template\Context $context
    ) {
        parent::__construct($context);
    }

    protected function _prepareLayout()
    {
        $this->setText('Hello World');
    }
}

In Magento2 all template file reside in view/frontend/templates folder. Our template file path will be

W3solver/Helloworld/view/frontend/template/hello.phtml
<?php echo $block->getText(); ?>

If everything is followed correctly then you must be able to get the text through template, just drop in your comments if you have any issues.

Leave a Comment.