Home / Blog / Create a Page in Magento 2
Create a Page in Magento 2

Create a Page in Magento 2

  • Anna KoshevaAnna Kosheva
  • July 28, 2022

    July 28, 2022

A page in Magento 2 is a result of an Action Controller execution. Each controller either returns HTML content or redirects to another controller for further processing. In this lesson, we will create a Page, that shows a JSON message in a browser when it has been accessed via a custom route.

Before we begin

For this tutorial, I’ve created the MageMastery_FirstPagemodule with the registration.php and module.xml files. And the module has been successfully registered with the bin/magento setup:upgrade CLI command.

The registration.php file:

The module.xml file:

<?xml version=”1.0″?>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” 

        xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module/etc/module.xsd”>

    <module name=”MageMastery_FirstPage” />

</config>

For more information about module creation and registration, please refer to the previous lesson A Module in Magento 2.

Registering a new route

To create a new page in Magento 2, which is accessible via a browser, two files have to be created in a Magento 2 module. The first file is routes.xml. The file is responsible for providing information to Magento 2 where to look for a particular controller module’s name and additional rules to match a URI.

The second file is a controller class, that should be executed and process the incoming request.

Let’s go ahead and create a new routes.xmlfile under the MageMastery/FirstPage/etc/directory.

Configuration in Magento 2

The configuration can be provided for the two different areas: frontend and admin html areas. There is also a default that is used to provide a configuration for both areas.

For the storefront configuration changes, we have to add a new frontend directory inside the MageMastery/FirstPage/etc/directory. We will talk more about the admin html directory in the upcoming lessons.

If you haven’t created the etc/frontend directory this is the right time to do it.

The routes.xml file

Inside the etc/frontend directory let’s create the routes.xml configuration file. All routes configuration files from all Magento 2 registered modules including the MageMastery/FirstPagemodule will be merged and provided for execution.

The routes.xml initial file state:

<?xml version=”1.0″?>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” 

  xsi:noNamespaceSchemaLocation=”urn:magento:framework:App/etc/routes.xsd”>

</config>

Magento 2 Open Source provides so-called routers, and each router has its identifier. We are not going to go deeply into the router implementation just now. We are going to use the standard router that is identified as “standard”. This is what you see in the code below:

<?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”>

        </router>

</config>

Inside the standard router node, we can add routes configuration. Each route is responsible for providing a front name that is used to match the route with a request URL. Also, the route should provide a module name, that includes an action controller class.

The route configuration for the MageMastery_FirstPagemodule and the magemastery front name looks as follows:

Note the id argument of the route. It has to be unique across the Magento 2 application. The recommended naming convention for the route id is a lower-case module name e.g. magemastery_firstpageto ensure uniqueness.

Let’s see the final state of the routes.xml file:

<?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 id=”magemastery_firstpage” frontName=”magemastery”>

            <module name=”MageMastery_FirstPage” />

        </route>

    </router>

</config>

Magento 2 standard router reads the route configuration that starts with the Mage Mastery request URI part, finds a module name with the name MageMastery_FirstPage, and will check for a controller, which can process the request.

A controller in a module is the second bit or file to be created in this lesson.

Action Controller

All controllers of a module should be located in a directory called Controller. There is another directory level that should exist inside the Controllerdirectory before the class can be located. For this lesson, we are going to create a Page directory in the Controller.

Inside the Page directory, let’s create the View.php file.

As a result, you should have the following module structure.

The View.php file is a MageMastery\FirstPage\Controller\Page\Viewclass. The View class should extend the Magento\Framework\App\Action\Action class.

The Actionclass requires providing implementation of the execute()method. Once Magento 2 will resolve the route it will trigger the View::execute()method. The execute()method’s logic should be added to render something on the front end. For this lesson, we are going to return a JSON response with the message.

To return anything from the execute()method, there is a resultFactoryvariable that is provided to us from the Actionparent class. The create()method of the Magento\Framework\Controller\ResultFactoryclass creates an instance of a Magento\Framework\Controller\Result\Jsonclass. The Jsonclass then can be used to convert an array into a JSON and return from the execute()method.

$jsonResult = $this->resultFactory->create(ResultFactory::TYPE_JSON);

We can use the $jsonResult to set an array with the key message and the value to be  My First Page.

$jsonResult->setData([

    ‘message’ => ‘My First Page’

]);

The resulting code of the View controller class looks as follows:

<?php

declare(strict_types=1);

namespace MageMastery\FirstPage\Controller\Page;

use Magento\Framework\Controller\Result\Json;

use Magento\Framework\App\Action\Action;

use Magento\Framework\Controller\ResultFactory;

class View extends Action

{

    public function execute()

    {

        /** @var Json $jsonResult */

        $jsonResult = $this->resultFactory->create(ResultFactory::TYPE_JSON);

        $jsonResult->setData([

            ‘message’ => ‘My First Page’

        ]);

        return $jsonResult;

    }

}

To result in a browser, the Magento 2 configuration cache has to be cleaned. The cache cleanup can be done with the Magento CLI command cache: clean. The command has to be executed from the Magento 2 project root directory.

bin/magento cache:clean

Navigate to the http://magento2ce.magemastery.net/magemastery/page/viewurl, where the magento2ce.magemastery.net domain name can be a different one, depending on what domain name you provided during the Magento 2 installation.

Let’s have a closer look at /magemastery/page/view path for the page. The first part is the Mage Mastery, this is a front name that is configured in the routes.xml file. The pageis the name of a directory Page inside which there is a Viewclass. The View::execute()method returns the JSON object.

Was it useful? Share with friends and colleagues!

  • Anna KoshevaAnna Kosheva
  • July 28, 2022

    July 28, 2022

Sign up and don't miss our awesome Mage Mastery lessons and updates!

Related Posts
1
Dec

Magento 2 Quick Start: Installation using Composer

The tutorial is for those who are looking to get a experience on how to install Magento 2 Open Source on a local development environment. A step-by-step video guide for developers.
23
Mar

CMS Block and Page in Magento 2

In this tutorial we will reveal the difference between CMS Page and Block in Magento 2.
22
Jul

How to Configure Varnish 6 and nginx with ssl for Magento 2

In this tutorial, we are going to set up and configure Varnish Cache with nginx and SSL (https) certificate for a Magento 2 Open Source.
If you like this blog post, you may want to watch
Start: March 28, 2021
Intermediate
 
Max Pronko
Web Icon20 lessons
Clock Icon15 hours
Adobe Certified Professional — Magento Commerce Developer Study Group is an 10-week (1.5 hours/week) instructor-led study group. This study group will help PHP and JavaScript developers evaluate their readiness and prepare for the Adobe Certified Professional — Magento Commerce Developer exam.
Start: March 15, 2021
Advanced
 
Max Pronko
Web Icon80 lessons
Clock Icon15 hours
Magento 2 Development Workshop is for those who want to practice and learn how to implement Magento 2 extensions. During the workshop, you will have lots of homework, practical exercises, video lessons, and theory that will give you the required skills for your Magento 2 job.
2022 © Made with ❤ by Max Pronko