How To Create View: Block, Layouts, Templates in Magento 2?

In this blog we will learn about View in Magento 2 including Block, Layouts and Templates. As you know, a View will be use to output representation of the page. In Magento 2, View is built by three path: block, layout and template. We will find how it work by building the simple module Hello World using View path.

To create view in Magento 2, you need to follow the following steps:

Step 1: Create controller

Firstly, We will create a controller to call the layout file .xml

app/code/Webiators/HelloWorld/Controller/Index/Display.php

1	app/code/Webiators/HelloWorld/Controller/Index/Display.php

namespace Webiators\HelloWorld\Controller\Index;

Class Display 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();
	}
}

namespace Webiators\HelloWorld\Controller\Index;

Class Display 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();

}

We have to declare the PageFactory and create it in execute method to render view.

Step 2: Create layout file .xml

The Layout is the major path of view layer in Magento 2 module. The layout file is a XML file which will define the page structure and will be locate in {module_root}/view/{area}/layout/ folder. The Area path can be frontend or adminhtml which define where the layout will be applied.

There is a special layout file name default.xml which will be applied for all the page in it’s area. Otherwhile, the layout file will have name as format:

{router_id}_{controller_name}_{action_name}.xml

1	{router_id}_{controller_name}_{action_name}.xml

You can understand the layout in detail in this Magento topic , and the instruction of a layout structure.

When rendering page, Magento will check the layout file to find the handle for the page and then load Block and Template. We will create a layout handle file for this module:

File:

app/code/Webiators/HelloWorld/view/frontend/layout/helloworld_index_display.xml

1	app/code/Webiators/HelloWorld/view/frontend/layout/helloworld_index_display.xml



<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Webiators\HelloWorld\Block\Display" name="helloworld_display" template="Webiators_HelloWorld::sayhello.phtml" />
    </referenceContainer>
</page>

<?xml version="1.0"?>

</referenceContainer>

</page>

In this file, we define the block and template for this page:

Block class: Webiators\HelloWorld\Block\Display

Template file: Webiators_HelloWorld::sayhello.phtml

name: It is the required attribute and is used to identify a block as a reference

Step 3: Create block

The Block file should contain all the view logic required, it should not contain any kind of HTML or CSS. A Block file is supposed to have all applications view logic.

Create a file:

app/code/Webiators/HelloWorld/Block/Display.php

1	app/code/Webiators/HelloWorld/Block/Display.php

Contents would be:



<?php
namespace Webiators\HelloWorld\Block;
class Display extends \Magento\Framework\View\Element\Template
{
	public function __construct(\Magento\Framework\View\Element\Template\Context $context)
	{
		parent::__construct($context);
	}

	public function sayHello()
	{
		return __('Hello World');
	}
}

<?php

namespace Webiators\HelloWorld\Block;

class Display extends \Magento\Framework\View\Element\Template

{

public function __construct(\Magento\Framework\View\Element\Template\Context $context)

{

parent::__construct($context);

}

public function sayHello()

{

return __('Hello World');

}

Every block in Magento 2 must extend from Magento\Framework\View\Element\Template. In this block, we will define a method sayHello() to show the word “Hello World”. We will use it in the template file.

Step 4. Create a template file

Create a template file call sayhello.phtml

app/code/Webiators/HelloWorld/view/frontend/templates/sayhello.phtml

1	app/code/Webiators/HelloWorld/view/frontend/templates/sayhello.phtml

Insert the following code:



<?php

/**
 * @var \Webiators\HelloWorld\Block\Display $block
 */

echo $block->sayHello();

<?php

/**

* @var \Webiators\HelloWorld\Block\Display $block

echo $block->sayHello();

In the layout file, we define the template by Webiators_HelloWorld::sayhello.phtml. It mean that Magento will find the file name sayhello.phtml in templates folder of module Webiators_HelloWorld. The template folder of the module is

app/code/{vendor_name}/{module_name}/view/frontend/templates/.

1	app/code/{vendor_name}/{module_name}/view/frontend/templates/.

In the template file, we can use the variable $block for the block object. As you see, we call the method sayHello() in Block. It’s done, please access to this page again (http:///domain.com/helloworld/index/display) and see the result.

Hello World

If any doubts please ask in the Comments Section. I’d be happy to help you to solve your queries.

Hit 5 Stars if you find this post helpful

5 (based on 1 Reviews)