How to create a view for our Magento2 module ?

This tutorial is the 3rd in a long series of magento2 tutorials . It will be updated as the platform evolves. Today you will now learn how to create a View and its actions under Magento2. If you do not know magento (v1) it does not matter, I'll talk about it of course but it is not necessary to know the magento platform (v1) to master this tutorial on magento2. In the previous tutorial we saw how to create a controller for magento2 for our extension! We will now see how to associate a view (a template) with our action! For that, we will leave the files of our previous tutorial.

Add our folders "view" of the module

We will create a "view" folder at the root of the /Pfay/Contacts module. It is this folder which will contain all the layout (files indicating the layout of the "block" to be displayed in magento2 and the templates (note that magento2 now uses the template engine "Twig", we will return later). Will contain a folder "frontend", which itself will contain 2 folders "layout" (which will contain layouts) and "templates" (which will contain the files of the templates) For those who know magento (v1) you know more or less That will contain these last 2 files.

Add phtml template file

Create a "test_index.phtml" file in the /Pfay/Contacts/view/frontend/templates/ directory with the following contents:


<div id="contactslist">
    my contact list
</div>

The goal of this tutorial will be to display a html content in this file when we will be on our action contacts/test/index (see the previous tutorial).

Add a Layout file for our action

We will now link our action with our controller and our template. To do this create the file "contacts_test_index.xml" (be carrefull of the '<id_of_the_route>_<name_of_the_controller>_<name_of_the_action> ) in the /Pfay/Contacts/view/frontend/layout/ directory wich contains the following xml 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">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
    </body>
</page>

The name of the file if very important. For the route contacts/test/index we have to named our layout file "contacts_test_index.xml" for magento2 to retreive automatically our layout file from the Action. you just have to replace "/" of the url of our action by "_" and you obtains the name of the layout file.
What is this file for ?


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

This instruction is to tell magento2 that we will update the layout of this action with the 1column template.


<body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
</body>

- referenceBlock allow magento2 to get the block with the corresponding name (here "content").
- block allow magento2 to add a new block, here this block will use the logic class "Magento\Framework\View\Element\Template", and will be named "contactForm" it will also use the template file "test_index.phtml" wich is in the Pfay_Contacts module.

This XML bloc of code allows you to create a bloc in the "content" area of the website and it will use the contactlist.phtml file we've created before.
Note that here we use the class "Magento\Framework\View\Element\Template" which ic the core class which allows to display a phtml template without having a special logic behind.

Edit our Action to get le layout

In fact, I have a bit of a lie to simplify things, in order to fetch the layout file, magento2 needs to load it with the loadLayout() method. And it display it with the renderLayout() function.
Magento developers (v1) are already used to using these functions;)
Edit your file /Pfay/Contacts/Controller/Test/Index.php like this :


namespace Pfay\Contacts\Controller\Test;
class Index extends \Magento\Framework\App\Action\Action
{
    public function execute()
    {
       $this->_view->loadLayout();
       $this->_view->renderLayout();
    }
}

And now you can access your template via the previous url as in tutorial 1: http://www.magento2.lan/contacts/test/ or www.magento2.lan /contacts/test/index/.
It does not work for you? Get the sources of this tutorial and find your error easier by downloading the code at the bottom of this tutorial.

You now know how to Add a view related to the action of your magento2 controller ... Congratulations!

As usual, if you liked this tutorial, and you want it to continue, take a premium account...it allows me to get coffee and a spotify premium account when writing ;) Do not hesitate to ask your questions in the comments (for those who share the article), I will try to answer quickly. Good luck at all for the continuation of these tutorials on magento2!

Available documents for this article :

Code

Books that can help you :

Article BackHow to create a controller and its actions in Magento2 Next itemCreate a block in magento2