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.