Skip to main content

Create View: Controller, Block, Layout and Template In Magento2

Create View: Controller, Block, Layout and Template In Magento2



The Magento2 view is created by combining different files. View is a combination of Controller, Block, Template and Layout files. 


In this blog, we’ll discuss how to create a view in Magento2. We’ll cover the following points:- 

  1. Create Controller 

  2. Create Layout

  3. Create Block

  4. Create Template 


Step 1 :- Create Controller


Firstly, we’ll create a Controller, the role of the controller in rendering view is to create an object of pagefactory class that is used to initialize the layout. 


Create Index.php inside Vendor/Module/Controller/Index


<?php

namespace Vendor\Module\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();

   }

}


Here, pageFactory is used to load the layout. 


Step 2 :-  Create Layout


Create a layout file inside Vendor/Module/view/frontend/layout, naming format for the layout file is routeid_controllername_actionname.xml. In my case it is blogs_index_index.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="Vendor\Module\Block\Data" name="blog_data" template=”Vendor_Module::display.phtml" />

   </referenceContainer>

</page>


Layout file defines the structure of the view and connects and block and template file together. 

Here, 

referenceContainer is used when you want to put your container in an already existing container then we have to create a referenceContainer for that. (We’ll discuss referenceContainer and referenceBlock in the next blog). 


Block is used to connect both PHP class file and template file together. Define the block class file path in the class attribute.  


Name is used as a reference of the block class. 


Template is used to define the template file of the view, format is :- Vendor_Module::filename.phtml. 


We’ve added a block and template file inside a reference container. 


Step 3 :- Create Block


Block files are created inside the Vendor/Module/Block folder. Block is a PHP class file which contains all the logic's which we have to use in our phtml file. Every block file extends Magento\Framework\View\Element\Template class. 


Create Data.php inside Vendor/Module/Block 


<?php

namespace Vendor\Module\Block;

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

{

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

   {

       parent::__construct($context);

   }

 

   public function displaydata()

   {

       return __('View in Magento2');

   }

}


We can call block inside a phtml file using $block. 


Step 4 :- Create Template 


Create display.phtml inside Vendor/Module/view/frontend/template. Phtml file contains both php and html code. 

We can call the block file inside phtml file using $block->functionname(); 


<?php

 

/**

* @var \Vendor\Module\Block\Data $block

*/

 

echo $block->displaydata();







Firstly. We’ve to create a controller to load the layout, then it loads the layout file in which we’ve defined the block and template file. We can call the block functions in a phtml file and this is how we can create a custom view in Magento2.


Labels:

Comments

Post a Comment

Popular posts from this blog

Magento2 CLI

Magento2 CLI  Back after a long break! Starting again with this blog because I found it the most important to understand if we are doing the magento development as magento commands play the most important role here. It really helps us a lot if we know that lĺwhich command we need to run on this action or after any changes.  Let’s start with the basic commands that we use a lot of times during our development.  cache:clean or cache:flush php bin/magento cache:clean Or  php bin/magento  cache:flush Both of these commands are used to clean the cache of Magento2 so that your new changes can be reflected to your store.  Using cache:clean it deletes all the enabled cache of magento2. Disabled caches are not affected with cache:clean but if you are doing cache:flush then it purges all the cache storage of magento wherever its enabled or disabled or it even deletes all the third party cache along with the magento cache.  If you are doing any changes in admin configuration, layout xml file, u
Post a Comment
Read more

How EAV Model Works in Magento2?

                         How EAV Model Works in Magento2?  EAV Model stands for Entity-Attribute-Value is a very important concept of magento2 to understand how the attributes of entities are stored and works in magento2.  EAV Model is described as :-  Entity - Entity refers to the data items such as customers,orders,catalog,category etc.  Attribute - Attributes of the entities like price is an attribute of the product(entity) is referred here is an attribute. Value - A value of the attribute as $20 is a value for price attribute is referred here is a value.  Use of EAV Model EAV(Entity-Attribute-Value) is used to create new attributes of entities such as products, categories etc. With the use of eav models we don’t need to change the structure of the core tables of attributes thus it increases the scalability of the system.  Let’s have a look at how eav works in Magento2 -  Eav model used many several tables to store the data of the entity attributes. The top most table for the e
Post a Comment
Read more

Plugins in Magento2

Plugins in Magento2 Unlike Magento1, Magento2 introduces a whole new concept of Plugins or Interceptor. A plugin or interceptor is used to change the behaviour of the method of any class without affecting the actual class. This is a very powerful way to customize the core classes of Magento2.  Plugins are one of the customization methods in Magento2. In plugins, there is a design pattern called “Interception” which means “Inserting code dynamically without changing original class behaviour” and this is what plugins exactly do in Magento2. Plugins modify the behaviour of a plugin class function by intercepting a function call and adding code before, after and around that function’s call.  Plugins are used with public methods only.  Declaring Plugins To declare plugins in Magento2, we have to create di.xml according to the specific area.  Create di.xml inside Vendor/Module/etc for global.   < config >     < type name = "{ObservedType}" >       < plugin name
Post a Comment
Read more