How to Create a Custom Frontend View or Controller in Magento 2?

October 13, 2020

Tags Tips & Tutorial Programming guide magento tutorial for developers magento 2 tutorial magento 2 guide eCommerce developers guide create custom controller magento create controller in magento Create a Custom Frontend View or Controller in Magento 2 controller in magento

Today, we’re going to teach you guys how to create a custom frontend view or controller in Magento 2.

Although, the process of creating a custom frontend view or controller in Magento 2 is quite similar to Magento 1, the only major difference between the two is its file structure.

Magento 1, for example, allows defining multiple actions in a single action file, while in Magento 2, it is necessary to create multiple action files for different actions of the controller.

And in this tutorial, we will show you exactly how you can do that.

Steps to Create a Custom Frontend View or Controller in Magento 2

Step #1 - Create routes.xml file

First of all, you need to create a routes.xml file in the app/code/MageDelight/HelloWorld/etc/frontend/ folder and add the following code.

<?xml version="1.0" ?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">

    <router id="standard">

        <route frontName="helloworld" id="helloworld">

            <module name="MageDelight_HelloWorld"/>

        </route>

    </router>

</config>

Step #2 - Create a Controller file

After creating routes.xml file, you need to create a controller file “index.php” in the app/code/MageDelight/HelloWorld/Controller/Index/ folder and add the following code.

<?php

namespace MageDelight\HelloWorld\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action

{

    protected $_pageFactory;

    public function __construct(

       \Magento\Framework\App\Action\Context $context,

       \Magento\Framework\View\Result\PageFactory $pageFactory)

    {

       $this->_pageFactory = $pageFactory;

       return parent::__construct($context);

    }

    public function execute()

    {

       return $this->_pageFactory->create();

    }

}

Also read: How to Override Block, Model, and Controller in Magento 2?

Step #3 - Create a Layout file

Now, we will have to create a Layout file “helloworld_index_index.xml” in the app/code/MageDelight/HelloWorld/view/frontend/layout/ folder and add the following code.

<?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="MageDelight\HelloWorld\Block\Index" name="helloworld_index_index" template="MageDelight_HelloWorld::index.phtml" />

    </referenceContainer>

</page>

Step #4 - Create a Block file

Next, we need to create a Block file “Index.php” in the app/code/MageDelight/HelloWorld/Block/ folder and add the following code.

<?php

namespace MageDelight\HelloWorld\Block;

class Index extends \Magento\Framework\View\Element\Template

{

}

Step #5 - Create a Template file

Finally, we also need to create a template file “index.php” in the app/code/MageDelight/HelloWorld/view/frontend/templates/ folder and add the following code.