Create A Block/Layout In Magento 2

Hello Everyone, Welcome to my blog. First of all for those people who don’t know anything about me please checkout this link for more information. 

If you want to connect with me or want to share your view or anything, please feel free to write a comment below or write me an email on my email id i.e ranade.ashish11@gmail.com. I will definitely try to address all your queries. Let’s get started.

This blog is continuation with the previous topic that is working with Magento 2 controller. In my previous post, I have created a controller which will handle the request and sends response to the frontend. 

In this post we are going to discuss, how we can use the layout files and template files. Please find the following steps that we are going to follow.

1. Create a layout file.
2. Create a block class.
3. Create a template file to render our data.

Create A Layout File 

A web page can be considered as a collection of layout, containers and blocks, whereas, layout represents the structure of a page and containers are the placeholders. Blocks represent the UI controls. If you need more information about the layouts please checkout this link

In my previous post I have created a controller and returned a response. We can set the different types of responses based on our requirements. Like, JSON, HTML, TEXT etc. You can find all these values in Magento\Framework\Controller\ResultFactory class. 

const TYPE_JSON     = 'json';
const TYPE_RAW      = 'raw';
const TYPE_REDIRECT = 'redirect';
const TYPE_FORWARD  = 'forward';
const TYPE_LAYOUT   = 'layout';
const TYPE_PAGE     = 'page';
/**#@-*/
/**#@-*/
protected $typeMap = [
    self::TYPE_JSON     => Result\Json::class,
    self::TYPE_RAW      => Result\Raw::class,
    self::TYPE_REDIRECT => Result\Redirect::class,
    self::TYPE_FORWARD  => Result\Forward::class,
    self::TYPE_LAYOUT   => \Magento\Framework\View\Result\Layout::class,
    self::TYPE_PAGE     => \Magento\Framework\View\Result\Page::class,
];

So, once we set the response from our controller, Magento will check the layout handler in Namespace/ModuleName/view/frontend/layout directory (currently we are working on the frontend area). Magento tries to locate the file based on the route_id, controllerName and the action name that we have set in our route.xml file. I.e <route_id>_<controllername>_<actionname>. In this case our route_id is firstmodule, our controller name is index and the action name is also an index. So, our file name should be firstModule_index_index.xml. 

Create firstmodule_index_index.xml file inside Ashish\FirstModule\view\frontend\layout directory. Add the following content in your layout handle file.

<?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="Ashish\FirstModule\Block\Index" name="firstmodule" template="Ashish_FirstModule::index.phtml" />
    </referenceContainer>
</page>

Magento has different containers for different parts of the web page like content, columns.top etc. that is completely based on where we want to display our content. Right now we have chosen the content as a reference container, so our content will be displayed at the center of the page.

Create A Block Class

We have defined the block class attribute as Ashish\FirstModule\Block\Index this class will help to render the desired data in our template file. We can write functions which will fetch the data from the database and returns to the template file but, that topic is beyond the scope of this post. Create Index.php in Ashish\FirstModule\Block directory and add the following content. 

<?php
namespace Ashish\FirstModule\Block;
class Index
    extends \Magento\Framework\View\Element\Template {
}

All the block classes must be extended from \Magento\Framework\View\Element\Template class as a part of Magento rendering system.

Create A Template File

Now, it’s time to create our layout file. Create index.phtml file inside Ashish\FirstModule\view\frontend\template directory with following content 

 <h1>Welcome to ASolutions.co.in</h1>

After creating the template file our folder structure should look like this.

Now, navigate to your magento root directory and run the following command

Php bin\magento setup:upgrade
Php bin\magento cache:flush

After running these commands, you need to hit the following url from your web browser.

http://<your-domain-name>/firstmodule and you will be able to see the following page.

If you are not able to see distorted view please run the following command.

 Php bin\magento setup:static-content:deploy 

You can also find this code on my GitHub account. Feel free to leave a comment below. Let me know what you think about this blog. Good bye for now and happy coding 🙂

[post-views]