Today we create a simple module in Magento 2. We display a simple message using the controller and using a custom layout. For display messages using a custom layout, we will need to create a custom frontend layout file in our module.
Let’s start by creating a simple module.
Step1. Create module directory
Go to the Magento app/code directory and create a directory with your vendor name. My vendor name is “CoolCodders”.
After creating the vendor directory, need to create a directory for the module. My module name is “FirstModule”.
My custom module directory path is like “MAGENTO_ROOT/app/code/CoolCodders/FirstModule”
Step2. Create module registration file
<?php
//file path: MAGENTO_ROOT/app/code/CoolCodders/FirstModule/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'CoolCodders_FirstModule',
__DIR__
);
Step3. Create module config file
<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/CoolCodders/FirstModule/etc/module.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="CoolCodders_FirstModule" setup_version="1.0.0" />
</config>Step4. Create custom frontend route config file
<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/CoolCodders/FirstModule/etc/frontend/routes.xml -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="first_module" frontName="first_module">
<module name="CoolCodders_FirstModule" />
</route>
</router>
</config>Step5. Create controller for display custom message without layout
<?php
//file path: MAGENTO_ROOT/app/code/CoolCodders/FirstModule/Controller/First/Index.php
namespace CoolCodders\FirstModule\Controller\First;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
class Index extends Action
{
public function __construct(Context $context)
{
return parent::__construct($context);
}
public function execute()
{
echo __("This is my first Magento 2 module");
}
}Step6. Install your module to magento
php bin/magento module:enable CoolCodders_FirstModule
php bin/magento setup:di:compile
php bin/magento setup:upgrade
php bin/magento setup:static-content:deployStep7. Check your first module message
Open this URL(http://your_magento_url/first_module/first/index) on your browser
Step8. Now we will display this message using Magento layout. So we need to some changes to our existing controller
<?php
//file path: MAGENTO_ROOT/app/code/CoolCodders/FirstModule/Controller/First/Index.php
namespace CoolCodders\FirstModule\Controller\First;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
class Index extends Action
{
public function __construct(Context $context)
{
return parent::__construct($context);
}
public function execute()
{
return $this->resultFactory->create(ResultFactory::TYPE_PAGE);
}
}Step9. Create layout file
<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/CoolCodders/FirstModule/view/frontend/layout/first_module_first_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="page.main.title">
<action method="setPageTitle">
<argument translate="true" name="title" xsi:type="string">First Module</argument>
</action>
</referenceBlock>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="message" template="CoolCodders_FirstModule::message.phtml" />
</referenceContainer>
</body>
</page>Step10. Create template file for display message
<?php
// file path: MAGENTO_ROOT/app/code/CoolCodders/FirstModule/view/frontend/templates/message.phtml ?>
<?= __("This is my first Magento 2.x Module"); ?>Clear Magento cache and check message with the same URL
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.
Good post.
Cheers