Magento 2 Create View: Controller, Blocks, Layout, Template
In Magento 2, the view refers to the user interface (UI) elements that are responsible for rendering the output of a request. In other words, the view is responsible for displaying the data to the user. The view is made up of templates, blocks, and layout files, and it communicates with the controller to fetch the necessary data to display.
Understanding Magento 2 Directory Structure
The first step in creating a view in Magento 2 is to understand its directory structure. Magento 2 uses a modular architecture where each module has its own directory structure. Here’s the typical directory structure of a Magento 2 module:
You may also know
How to create a module in Magento 2
How to create CRUD in Magento 2
GDBlogger/DemoModule |-- Block/ | |-- Sample.php |-- Controller/ | |-- Index/ | | |-- Index.php |-- view/ | |-- frontend/ | | |-- layout/ | | |-- templates/
To create View in Magento 2
- Create a Controller
- Create layout file .xml
- Create block
- Create template file .phtml
Create Controller
You need to create the controller, to call the layout file.
Directory
app/code/GDBlogger/DemoModule/Controller/Index/Display.php
Code of Display.php
<?php
namespace GDBlogger\DemoModule\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();
}
}
This code defines a controller class Display in the Magento 2 module GDBlogger\DemoModule. The controller class extends the base class \Magento\Framework\App\Action\Action which is a basic class for defining an action controller in Magento 2.
The class has two methods, __construct and execute.
The __construct method is used to initialize the dependencies required by the class. It receives two parameters, the \Magento\Framework\App\Action\Context object and a \Magento\Framework\View\Result\PageFactory object. The context object provides access to the HTTP request and response objects, among other things. You use the Page Factory to create and render pages.
The execute method is the main method for the action controller. This method creates and returns a page using the _pageFactory->create() method.
In summary, this controller class creates and returns a page using the Magento 2 Page Factory.
Create a layout file .xml
In Magento 2, a layout file is an XML file that defines the structure of a page and the blocks that it contains. The file is responsible for defining the position of blocks, the structure of the blocks, and the templates used for rendering the blocks.
The Magento 2 layout system uses the layout file to render pages. It reads the layout file and builds a hierarchy of blocks that render the page. The blocks can be standard blocks provided by Magento 2, or custom blocks created by a developer.
Each layout file associated with a specific page or action, and you can use multiple layout files to build a single page. For example, you can use one layout file to define the header structure, another layout file to define the footer structure, and another layout file to define the main content area structure.
Directory
app/code/GDBlogger/DemoModule/view/frontend/layout/routename_index_display.xml
Code of routename_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="GDBlogger\DemoModule\Block\Display" name="display" template="GDBlogger_DemoModule::index.phtml" />
</referenceContainer>
</page>
The file starts with the declaration of the XML version and the namespace for the XML schema. The <page> tag defines the root element of the layout file. The layout attribute of the <page> tag defines the basic layout structure for the page. In this case, you set the layout structure to “1 column,” which means the page will have a single-column layout.
The <referenceContainer> tag defines a reference to a container in the layout. In this case, you name the reference container “content,” which is a standard container in Magento 2 that defines the main content area of a page.
The <block> tag defines a block in the layout. The class attribute of the <block> tag defines the PHP class that implements the block. The name attribute of the <block> tag defines the name of the block, which is used to reference the block in the layout. The template attribute of the <block> tag defines the template file that is used to render the block. In summary, this layout XML file defines a single-column layout with a block named “display” that is implemented by the GDBlogger\DemoModule\Block\Display class and rendered using the template file index.phtml. The block is placed in the “content” reference container, which is the main content area of the page.
Create Block
The Block in Magento 2 is part of the Model-View-Controller (MVC) architecture of the platform. The role of the Block is to define the logic and behaviour of blocks in Magento 2.
In Magento 2, blocks are responsible for generating the HTML output of a page. The Block folder contains the PHP classes that define the blocks and their behaviour. The block classes retrieve and process data, interact with the layout and other parts of the system, and define the content and structure of the blocks.
The templates associated with the block classes render the HTML output of the blocks. They contain HTML and placeholders for dynamic data, which the block classes fill with processed data.
Directory
app/code/GDBlogger/DemoModule/Block/Display.php
Code of Display.php
<?php
namespace GDBlogger\DemoModule\Block;
class Display extends \Magento\Framework\View\Element\Template
{
public function __construct(\Magento\Framework\View\Element\Template\Context $context)
{
parent::__construct($context);
}
public function showData()
{
return __('Welcome To GDBlogger');
}
}
This code defines a block class named “Display” in the namespace “GDBlogger\DemoModule\Block”. The block class extends the base class \Magento\Framework\View\Element\Template, which is a base class for block classes in Magento 2.
The constructor of the class takes an instance of the \Magento\Framework\View\Element\Template\Context class as an argument. This class provides access to various context information such as the request object, the layout object, and the cache instance. The constructor passes the context object to the parent constructor to ensure that it is available for use in the block.
The block class also defines a public method named “showData”, which returns the string “Welcome To GDBlogger”. The template associated with the block can call this method to display the text in the front end of the Magento 2 store.
This block class can be used to render the content of a page in Magento 2. The block class and the template associated with it can be referenced in a layout XML file to specify the placement of the block in the layout of a page. The block class can also retrieve and process data, interact with other parts of the system, and define the content and structure of the block.
Create template file
In Magento 2, the template file is to define the visual appearance of a block. A template file contains HTML code and placeholders for dynamic data. The block class associated with the template processes the data and fills the placeholders.
The template file defines the structure and appearance of the content of a block. It can include HTML elements, such as headings, paragraphs, images, and tables, as well as dynamic data, such as product names, prices, and descriptions. The block class associated with the template supplies the dynamic data.
Directory
app/code/GDBlogger/DemoModule/view/frontend/templates/index.phtml
Code of Index.phtml
<?php /** * @var \GDBlogger\DemoModule\Block\Display $block */ echo $block->showData();
This code is a template file in Magento 2, typically written in PHP and used to display dynamic data in the front end of a Magento 2 store.
The first line is a PHP comment with a type hint, indicating that the variable $block is an instance of the \GDBlogger\DemoModule\Block\Display class.
The next line is a PHP echo statement, which outputs the result of calling the showData method on the $block object. The showData method returns a string “Welcome To GDBlogger”, as defined in the block class. This template file is associated with the \GDBlogger\DemoModule\Block\Display block class. When a page that references this block and template is requested, the block class retrieves and processes the data, and the template displays the data in the front end of the Magento 2 store.
Test
To test view is working, open your browser and navigate to the following Url:
http://yourhost.com/routename/index/index
OR
http://yourhost.com/routename/
On this page, you will see the message ‘Welcome To GD Blogger’ that you called in the block and template file.
I hope this guide will be helpful to you. Please do not hesitate to contact us through the comments section if you have any further questions.
