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](https://qiita.com/moaazfarag/private/e71527ae826947de51d9), 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](https://qiita.com/moaazfarag/private/e71527ae826947de51d9)
## Create a controller
Firstly, We will create a controller to call the layout file .xml

```php: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

```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:

```php: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 is`app/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 

```bash: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/e270e9e0-e70a-c2c4-1fcb-327aebde34a0.png)