Create a New Page

Create a page that returns json with one parameter.

Who is this video for?

  • Developers

Steps to add a page

  • Create a module
  • Add a routes.xml file
  • Add a controller (action) file

Steps to create a module

  • 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

Video content

Number three, 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’ll need to create a new controller. In Magento 2, a controller is file located in a specific place, which responds to a specific route.
A route in Magento 2 is a standard URL that consists of three parts, the front name, the controller name, and the action name.
We’ll look at how those three parts of the URL correspond to a certain file. So the steps we need to take to add a new page are one, create a new module, two, add a routes.xml file, and three, add a controller or action file.
Let’s go through each step, one, create a new module. We will a new module called “Learning Hello Page.” Now create two files, “Learning Hello Page Registration,” and “Learning Hello Page Etsy Module.xml.” Step two, 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, front end and admin html, has a corresponding, merged routes.xml file, which is merged from the Etsy/area/routes.xml file from every module.
That routes.xml file contains information about all registered routes and front names. Recall that a front name 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 front name. Now, since we’re working in the front end area, we’ll add the Etsy front end routes.xml file for our learning homepage module.
We added a new route here called “Learning,” no, it does not have to match the module name, and a new front name. Often, the route and the front name are the same, for example, “Catalog,” but it is not required. But if Magento 2 sees a URL like “Test/chunk2/chunk3,” it will check whether our module “Learning Hello Page” has a folder “Controller/Chunk2” and an action file “Chunk3.php.” Our route will be “Test/Page/View.” Step three, add a controller or action file, let’s add the controller now. Let’s create an action file called “Controller Page View.php.” Note, we created a JSON type page.
This can be seen in the result factory that we specify in our constructor.
In order to activate our module and our page, we should run the Magento setup upgrade.
Now we need to verify that “Learning Hello Page” is present in the output.
If you examine the test/page/viewpage, you should see message “Hello World.” This is because we returned a result JSON object, Magento 2 has different result objects for different cases, result page for a regular page, for a 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 later, which would require activation to use the page result object. -

Useful resources

Frontend developer guide