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

Magento 2 create frontend controller with template.

thumbnail

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:
app/code/[your_namespace]/[your_module]/Controller/[your_controller_name]/[your_controller_action]

In our case it’s:
app/code/PandaGroup/MyFirstController/Controller/Frontend/Index.php

The code inside:

<?php

  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:
app/code/[your_namespace]/[your_module]/etc/frontend/routes.xml

In our case it’s:
app/code/PandaGroup/MyFirstController/etc/frontend/routes.xml

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"/>
        </route>
    </router>
</config>

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:
app/code/[your_namespace]/[your_module]/Block/Index.php

In our case it’s:
app/code/PandaGroup/MyFirstController/Block/Index.php

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:
app/code/[your_namespace]/[your_module]/view/frontend/templates/index.phtml

In our case it’s:
app/code/PandaGroup/MyFirstController/view/frontend/templates/index.phtml

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:
app/code/[your_namespace]/[your_module]/view/frontend/layout/[modulename_controllername_actionname]

In our case it’s:
app/code/PandaGroup/MyFirstController/view/frontend/layout/myfirstcontroller_frontend_index.xml

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" />
    </referenceContainer>
</page>

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:
http://[yourhost.com]/[front_name]/[controller_name]/[action_name]

In our case:
http://<yourhost.com>/myfirstcontroller/frontend/index
or without index (you can miss last part of url only for index action)

http://<yourhost.com>/helloworld/frontend/

+1 (No Ratings Yet)
Loading...

Leave a Reply

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

*