Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationEventAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.


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


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)
        $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

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 
        <referenceContainer name="content">
            <block class="Karabiner\HelloMagento2\Block\SomethingElse" name="hello_magento2_display" 
                   template="Karabiner_HelloMagento2::hello_world.phtml" />

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

Insert the following code:


 * @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

bin/magento cache:clean

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


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
Help us understand the problem. What are the problem?