How to build a Frontend View in Magento 2

In this article, we will discuss how to build a frontend view in Magento 2 by the following steps:

Step 1:  Register Customer View Module

Step 2: Form Controller action

Step 3: Form Layout File

Step 4: Form Block File

Step 5: Form a Template File

As you know to form a frontend view in Magento 1, we need to recognize about controller, layout, block and template. Outlook in Magento is quite related to Magento 1 but the configuration of each file is dissimilar. In this How to form a Frontend View in Magento 2, we will generate a frontend view with Custom View module.

Step 1:  Register Customer View Module

Here the following link explain you how to form a module in Magento:

https://www.Webnexs.com/magento-2-tutorial/how-to-form-a-module-in-magento-2/

Step 2: Form Controller action

  • Form an Action File:

app/code/Webnexs/CustomView/Index/Index.php

  • Add the content:
<?php

namespace Webnexs\CustomView\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();

 }

}

Step 3: Form Layout File

  • Dissimilar from Magento 1, Magento 2 use layout files inside module folder.
  • Layout directory: app/code/[NameSpace]/[ModuleName]/view/[Area]/layout
  • Form a layout file for Index action (step2):
  • app/code/Webnexs/CustomView/view/frontend/layout/customview_index_index.xml
  • Include content:
<?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="Webnexs\CustomView\Block\View" name="custom_view" template="Webnexs_CustomView::view.phtml" />

    </referenceContainer>

</page>
  • Note: Name of this layout file require to be this format: [route_id]_[controller_name]_[action_name].xml
  • Special: we can utilize layout file name is default.xml for the entire page in the area.

 Step 4: Form Block File

  • Block file add some logic function which will be used in the template file.
  • Directory: app/code/Webnexs/CustomView/Block/View.php
  • Include this content:
<?php

namespace Webnexs\CustomView\Block;

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

{

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

 {

 parent::__construct($context);

 }



 public function showCustomView()

 {

 return __('Hello Magento 2);

 }

}

Step 5: Form a Template File
  • Form template file:
  • app/code/Webnexs/CustomView/view/frontend/templates/customview/view.phtml
  • include content:
<?php

echo $block->showCustomView();

?>
<span style="font-weight: 400;"> </span>

I hope the above mentioned steps help you to build a Frontend View in Magento 2. If you have any concerns, please comment below and I will respond very soon.

Last Update: April 7, 2018  

March 14, 2018   188   Nandini R    Operations    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn