Create a new module
Create a new module (how to do this read in the previous article How to Create Module in Magento 2), for example, MageDirect_ModuleExample.
Add routes.xml file
To etc/frontend folder of your module add routes.xml file with next content:
1 2 3 4 5 6 7 8 9 10 | <!-- app/code/[VendorName]/[ModuleName]/etc/frontend/routes.xml --> <?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="magedirect_moduleexample" frontName="test"> <module name="MageDirect_ModuleExample" /> </route> </router> </config> |
Create the controller file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?php // app/code/[VendorName]/[ModuleName]/Controller/Index/Index.php namespace MageDirect\ModuleExample\Controller\Index; class Index extends \Magento\Framework\App\Action\Action { protected $_pageFactory; /** * @param \Magento\Framework\App\Action\Context $context * @param \Magento\Framework\View\Result\PageFactory $pageFactory */ public function __construct( \Magento\Framework\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $pageFactory ) { $this->_pageFactory = $pageFactory; return parent::__construct($context); } public function execute() { return $this->_pageFactory->create(); } } |
Your controller class must extend \Magento\Framework\App\Action\Action and must have function execute().
Clean cache
Clean cache with the following command:
1 | php bin/magento cache:clean |
Check URL
Navigate to the URL
1 2 | http://[yourhost]/frontName/actionPath/actionClass => http://[yourhost]/test/index/index or http://[yourhost]/test |
and you will get a new page:
As you can see, the requested path consists of three parts:
- frontName: unique value, that is set in routes.xml;
- actionPath: folder name inside Controller folder, default is index;
- actionClass: our action class, the default is index.
Now you can create the layout configuration file and the template for our page.
Create block file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php // app/code/[VendorName]/[ModuleName]/Block/Test.php namespace MageDirect\ModuleExample\Block; class Test extends \Magento\Framework\View\Element\Template { public function getStyles() { return 'color: #ff0000; font-size: 24px; font-style: italic;'; } } |
Create layout configuration file
Create layout configuration file and enter the following code:
1 2 3 4 5 6 7 8 9 10 | <!-- app/code/[VendorName]/[ModuleName]/view/frontend/layout/magedirect_moduleexample_index_index.xml --> <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="content"> <block class="MageDirect\ModuleExample\Block\Test" name="test" template="test.phtml"/> </referenceBlock> </body> </page> |
Here there is an important part: how to name the layout file. It should be
<router id>_<controller action path>_<controller action class>.xml
Add the template file
1 2 3 | <!-- app/code/[VendorName]/[ModuleName]/view/frontend/templates/test.phtml --> <h1 style="<?php echo $block->getStyles() ?>">MageDirect_ModuleExample</h1> |
Notice that in Magento 2 you should use $block rather than $this to call the block class methods.
Check result
That’s all, clean cache and check the result:
Lilya GogolevaMagento Developer
- Follow this tutorial to clear Magento cache with no efforts. Also, you will...
- This easy and effortless tutorial on how to create the new admin account in...
- If you don’t know how to create a custom cache type in Magento, this article...
- SSL is very important for every online store as it initiates a secure session...
- The sitemap is highly important in case you want to optimize your website for...
- Want to manage email templates in your Magento 2 store? Check our article and...
- Do you know how to create custom product type? We know! And would be glad to...
- Want to have a Magento 2 Multistore? Read how our team setups...