You can achieve this by building a custom module. So our first step is to create a module folder and the necessary files required to register a Magento module.
Create the following folders:
app/code/YourCompany
app/code/YourCompany/YourModule
The YourCompany folder is the module’s namespace, and YourModule is the module’s name.
Note: If you don’t have the code folder in your app directory, create it manually.
Now that we have a module folder, we need to create a module.xml file in the app/code/YourCompany/YourModule/etc folder with the following code:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="YourCompany_YourModule" setup_version="1.0.0">
</module>
</config>
To register the module, create a registration.php file in the app/code/YourCompany/YourModule folder with the following code:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'YourCompany_YourModule',
__DIR__
);
- Open your terminal and go to the Magento 2 root. Run from there the following command:
php bin/magento setup:upgrade
If you want to make sure that the module is installed, you can go to Admin → Stores → Configuration → Advanced → Advanced and check that the module is present in the list or you can open app/etc/config.php and check the array for the ‘YourCompany_YourModule’ key, whose value should be set to 1.
Creating a controller
- First we need to define the router. To do this, create a routes.xml file in the app/code/YourCompany/YourModule/etc/frontend folder with the following code:
<?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="yourmodule" frontName="yourmodule">
<module name="YourCompany_YourModule" />
</route>
</router>
</config>
Here we’re defining our frontend router and route with an id “yourmodule”.
The frontName attribute is going to be the first part of our URL.
In Magento 2 URL’s are constructed this way:
<frontName>/<controler_folder_name>/<controller_class_name>
So in our example, the final URL will look like this:
yourmodule/index/index
- Now we create the Index.php controller file in the
app/code/YourCompany/YourModule/Controller/Index folder with the following code:
<?php
namespace YourCompany\YourModule\Controller\Index;
use Magento\Framework\App\Action\Context;
class Index extends \Magento\Framework\App\Action\Action
{
protected $_resultPageFactory;
public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
{
$this->_resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
$resultPage = $this->_resultPageFactory->create();
return $resultPage;
}
}
In Magento 1 each controller can have multiple actions, but in Magento 2 this is not the case. In Magento 2 every action has its own class which implements the execute() method.
Creating a block
We'll create a simple block class with the getHelloWorldTxt() method which returns the “Hello world” string.
- Create a Helloworld.php file in the app/code/YourCompany/YourModule/Block folder with the following code:
<?php
namespace YourCompany\YourModule\Block;
class Helloworld extends \Magento\Framework\View\Element\Template
{
public function getHelloWorldTxt()
{
return 'Hello world!';
}
}
Creating a layout and template files
In Magento 2, layout files and templates are placed in the view folder inside your module. Inside the view folder, we can have three subfolders: adminhtml, base and frontend.
The adminhtml folder is used for admin, the frontend folder is used for frontend and the base folder is used for both, admin and frontend files.
- First we will create a yourmodule_index_index.xml file in the
app/code/YourCompany/YourModule/view/frontend/layout folder with the following code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
<body>
<referenceContainer name="content">
<block class="YourCompany\YourModule\Block\Helloworld" name="helloworld" template="helloworld.phtml" />
</referenceContainer>
</body>
</page>
Every page has a layout hand and for our controller action the layout handle is yourmodule_index_index. You can create a layout configuration file for every layout handle.
In our layout file we have added a block to the content container and set the template
of our block to helloworld.phtml, which we will create in the next step.
- Create a
helloworld.phtml file in the app/code/Inchoo/Helloworld/view/frontend/templates folder with the following code:
<h1><?php echo $this->getHelloWorldTxt(); ?></h1>
$this variable is refrencing our block class and we are calling the method getHelloWorldTxt() which is returning the string ‘Hello world!’.
And that’s it. Open the /yourmodule/index/index URL in your browser
