Home » Blog » Dev notes » Magento 2 create frontend controller with template.

Magento 2 create frontend controller with template.


In this topic, we will show you how to add frontend and adminhtml controllers. 

Notice: Creating the module tutorial is here.

STEP 1. Create a controller file

At first, you should create the controller file. In this example, there will be only code that renders a template.
The file should have path like this pattern:

In our case it’s:

The code inside:


  namespace PandaGroup\MyFirstController\Controller\Frontend;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

* Class Index
* @package PandaGroup\MyFirstController\Controller\Frontend
class Index extends Action
     * @var PageFactory $pageFactory
    protected $pageFactory;

     * Index constructor.
     * @param Context $context
     * @param PageFactory $pageFactory
    public function __construct(
            Context $context,
            PageFactory $pageFactory
    ) {
    $this->pageFactory = $pageFactory;
        return parent::__construct($context);

         * @return \Magento\Framework\App\ResponseInterface|\Magento\Framework\Controller\ResultInterface|\Magento\Framework\View\Result\Page
    public function execute()
        return $this->pageFactory->create();

STEP 2. Create routes.xml file

Secondly, you should create xml file where you define name, id and module name.

The file should be like this example path:

In our case it’s:

The code inside:

<?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="myfirstcontroller" id="myfirstcontroller">
            <module name="PandaGroup_MyFirstController"/>

Notice: Make sure, that router id is standard.

STEP 3. Create block file

The next step will be to create a block PHP file. Here you can add functions that you can exec in the template (the connection with the template will be added in the next step).

The file should be like this example path:

In our case it’s:

The code inside:

<?php namespace PandaGroup\MyFirstController\Block;

use Magento\Framework\View\Element\Template;

* Class Index
* @package PandaGroup\MyFirstController\Block
class Index extends Template

STEP 4. Create template file

In this step, we will create a .phtml template file, where you can build your html to render.

The file should be like this example path:

In our case it’s:

The code inside:

<h1>Yay, my first controller in M2 works!</h1>

STEP 5. Create a layout file

In this step, we will connect block file with template.

The file should be like this example path:

In our case it’s:

The code inside:

<?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="PandaGroup\MyFirstController\Block\Index" name="myfirstcontroller_frontend_index" template="PandaGroup_MyFirstController::index.phtml" />

And that’s all. Now you can flush your cache if you created the new module you need to make setup upgrade. After that, you can see if everything works.

The pattern for url path:

In our case:
or without index (you can miss last part of url only for index action)


+1 (No Ratings Yet)

Leave a Reply

Your email address will not be published. Required fields are marked *