Create a simple module in Magento 2 – Part 2

In the previous post Create a simple module in Magento 2 , I’ve explained how to install a module and get the controller working . This post is a continuation of it. If you haven’t gone through it, kindly follow it and install the module first.

Following files will be added/modified in this tutorial:
  • Amitshree/Helloworld/Controller/Index/Index.php
  • Amitshree/Helloworld/Block/Helloworld.php
  • Amitshree/Helloworld/view/frontend/layout/helloworld_index_index.xml
  • Amitshree/Helloworld/view/frontend/templates/hello.phtml

In this post I’ll cover how to load a template  and use block classes on front store to show content from it.

Once your setup is done following Create a simple module in Magento 2 , please update you controller file with following content

<?php namespace Amitshree\Helloworld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
    protected $resultPageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
      }
    public function execute()
    {
        $result = $this->resultPageFactory->create();
        return $result;
    }
}

Here $resultPageFactory is an instance of \Magento\Framework\View\Result\PageFactory and when create() is called on this class, it returns an instance of \Magento\Framework\View\Result\Page which is used to load the respective layout .

Every frontend controller should extends \Magento\Framework\App\Action\Action to allow front controller to call dispatch method  Magento\Framework\App\FrontController::dispatch()which will finally call execute() method on line $result = $this->execute();  of controller action class .

What does actually happen when we load the url website.com/helloworld/

The request  url website.com/helloworld/ is same as

When the page loads all config files are combined dynamically and when there is a request of any such url, it is searched through these config files and once frontName is found, it will be mapped to it’s corresponding module. In our case when website.com/helloworld/index/index/  is requested , frontName helloworld is found and mapped to our module Amitshree_Helloworld, then next index is matched to folder inside Controller directory and last index is the the action controller i.e controller class.

Now let’s create our block class Block/Helloworld.php with following content

<?php

namespace Amitshree\Helloworld\Block;

class Helloworld  extends \Magento\Framework\View\Element\Template
{

    public function __construct(\Magento\Framework\View\Element\Template\Context $context)
    {
        parent::__construct($context);
    }

    public function anyFunction()
    {
        return __("Hello from Block file.");
    }
}

Every block in Magento 2 must extend from Magento\Framework\View\Element\Template and we have added a method anyFunction() which we will call from our template file.

Now let’s create our layout file helloworld_index_index.xml in view/frontend/layout/ folder.  So, when we will load the url website.com/helloworld/ , it will look for this layout file, load the layout and render html content accordingly.

Content fo xml file will be

<?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="Amitshree\Helloworld\Block\Helloworld" name="helloworld" template="Amitshree_Helloworld::hello.phtml"/>
    </referenceContainer>
</page>

Here,  it is mentioned that

  • The layout of the page will be 1column.
  • Our block will be rendered in the content section of the page.
  • Block class is Amitshree\Helloworld\Block\Helloworld and a unique block name is helloworld.
  • The template which will be used is hello.phtml from our module Amitshree_Helloworld.

Now create the template file hello.phtml in view/frontend/templates/ folder with following code.

<p>Hii, from template file.</p>
<?php echo $block->anyFunction(); ?>

Here, we are calling anyFunction() method using $block object which refers to our block class Helloworld.

That’s all. Now clear cache and load url website.com/helloworld/ and you should be able to see following output.

Hii, from template file.
Hello from Block file.

Leave a Reply