Create a New Page
In this video on how to create a new page, we’ll create a page which returns JSON with one parameter: the message “HELLO WORLD!”
To add a new page in Magento 2, you need to create a new controller. In Magento 2, a controller is a file located at a specific place which responds to a specific route. A route in Magento 2 is a standard URL that consists of three parts:
We’ll look at how those three parts of a route correspond to a certain file.
So the steps we need to take to add a new page are:
- Create a new module.
- Add a routes.xml file.
- Add a controller (action) file.
To create a module, you need to complete the following high-level steps:
- Create the module folder.
- Create the etc/module.xml file.
- Create the registration.php file.
- Run the “bin/magento setup:upgrade” script to install the new module.
- Check that the module is working.
Let’s go through each step.
Create a new module
We will create a new module called
$ cd <magento2_root>/app/code $ mkdir Learning $ mkdir Learning/HelloPage
Now create two files:
Add a routes.xml file
Before we create the file, let’s take a brief look at how routing works in Magento 2. Each area (in our case, frontend and adminhtml) has a corresponding merged
routes.xml file, which is merged from the
etc/<area>/routes.xml file from every module. That
routes.xml file contains information about all registered routes and frontNames. Recall that a frontName is the first part of a route.
So, we should register it in the
routes.xml file and associate it with a module. It is possible to have multiple modules associated with one route, so we can create pages under the catalog
Now, since we’re working in the frontend area, we’ll add the
etc/frontend/routes.xml file for our
We added a new route here called “learning” (note it does not have to match the module name) and a new
frontName. Often the route and
frontName are the same – for example, “catalog” – but it is not required.
When Magento 2 sees a URL like
test/chunk2/chunk3, it will check whether our module
Learning_HelloPage has a folder,
Controller/Chunk2, and an action file,
Our route will be
Add a controller (action) file
Let’s add the controller now.
$ cd <magento2_root>/app/code/Learning/HelloPage $ mkdir Controller $ mkdir Controller/Page
Let’s create an action file
Note we created a JSON-type page. This can be seen in the results factory that we specify in our constructor. In order to activate our module and our page we should run the Magento setup upgrade:
$ cd <magento2_root> $ php bin/magento setup:upgrade
Now we need to verify that
Learning_HelloPage is present in the output. If you examine the
/test/page/view page, you should see the message:
This is because we returned a
ResultJson object. Magento 2 has different result objects for different cases – ResultPage for a regular page, Forward result, and so on.
We used a JSON result here because the goal was to illustrate how to create a new page, not to dig into the view layer, which would require activation to use the Page result object.