Help us understand the problem. What is going on with this article?

How to create Frontend view

Frontend view

In this topic, we will learn about View in Magento 2 including Block, Layouts, and Templates. In the previous topic, we create route and controller. As you know, a View will be used to output the representation of the page.
In Magento 2, The view is built by three paths:
- block
- layout
- template
We will find how it works by building the simple view for the module we created In the previous topic

Create a controller

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

Karabiner/HelloMagento2/Controller/SomethingElse/Index.php
<?php

namespace Karabiner\HelloMagento2\Controller\SomethingElse;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{
    /**
     * @var PageFactory
     */
    private $pageFactory;

    public function __construct(Context $context, PageFactory $pageFactory)
    {
        parent::__construct($context);
        $this->pageFactory = $pageFactory;
    }

    /**
     * call Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index layout
     */
    public function execute()
    {
        return $this->pageFactory->create();
    }

}

Create a Layout file (.xml)

The Layout is the major path of view layer in the Magento 2 module. The layout file is an XML file that will define the page structure and will be located in {MAGENTO_DIRECTORY}/view/{area}/layout/ folder. The Area path can be frontend or adminhtml(admin dashboard) which defines where the layout will be applied.

the layout file will have name as format: {router_id}{controller_name}{action_name}.xml.

When a 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/Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index.xml

app/code/Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index.xml
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Karabiner\HelloMagento2\Block\SomethingElse" name="hello_magento2_display" 
                   template="Karabiner_HelloMagento2::hello_world.phtml" />
        </referenceContainer>
    </body>
</page>

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

Create Block file

Block class: HelloMagento2\HelloMagento2\Block\SomethingElse
Block class is class which provides data to the template file.

Template file: Karabiner_HelloMagento2::hello_world.phtml
the filename has two parts:
1. Karabiner_HelloMagento2: refer to Karabiner/HelloMagento2/view/frontend/templates
2. hello_world.phtml: location inside the above folder location it could be SomethingElse/hello_world.phtml.

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

Create a template file

Create a template file called hello_world.phtml

app/code/Karabiner/HelloMagento2/view/frontend/templates/hello_world.phtml
Insert the following code:

app/code/Karabiner/HelloMagento2/view/frontend/templates/hello_world.phtml
<?php

/**
 * @var \Karabiner\HelloMagento2\Block\SomethingElse $block
 */
?>

<?= $block->sayHi() ?>

In the layout file, we define the template by Karabiner_HelloMagento2::hello_world.phtml. It means that Magento will find the file name hello_world.phtml in the templates folder of module Karabiner_HelloMagento2. The template folder of the module isapp/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 sayHi() in Block. It’s done,

after any change on layout or phtml we should run cache:clean command line

MAGENTO_DIRECTORY
bin/magento cache:clean

please access this page again (http://[MAGENTO_URL]/custom_router_name/somethingelse) and see the result.

block-created.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした