Magento’s MVC & Routing Mechanism
Want to learn everything about M2?
Quickly learn and reference all Magento programming basics, concepts & patterns, even with no prior experience.
Detailed Look at Magento's URL Anatomy
When you look at a URL for any Magento page, you might see a URL like https://magento.test/customer/account/create
.
Magento follows a Model-View-Controller design pattern, also known as MVC. The Controller part of that pattern in Magento follows a very structured format, as each of the parts of the URL help decide where to route requests.
These three main parts of the URL make up the frontName
, controllerName
and actionName
, and form the core of Magento’s URL routing pattern.
Let’s understand how this works by creating our own frontName
, controllerName
, actionName
combo.
Create a route
The frontName
is the start of the request, and relates back to a specific module. Route files are defined with XML, but we also must specify the area of the route. Magento has two main areas: frontend
and adminhtml
. The frontend
deals with the frontend instance of Magento, and adminhtml
deals with anything admin-related. Since we want to respond to requests on the frontend of our Magento instance, we’ll create a folder within the etc
directory named frontend
.
Then, let’s create a new file in the frontend
directory named routes.xml
. This will again follow a specific format for the root config
node. Within it, we will define a router
and related route
. Route accepts two attributes, id
and frontName
. We’ll set both of these to jumpstart
, since we want to listen to requests at /jumpstart
.
Then we’ll let Magento know which module is responsible for this route by creating a module
node within it, with the name
set equal to our module in that string format, Macademy_Jumpstart
:
<?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="jumpstart" frontName="jumpstart"> <module name="Macademy_Jumpstart"/> </route> </router> </config>
Now that we have a route set up, we can set up our controller to respond to it.