MVC and routing in Magento
Learn how Magento's MVC architecture uses frontName, controllerName, and actionName for efficient URL routing and custom route creation.
Lesson Content
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.