How to Create Module in Magento 2 in 4 simple steps

265

In this post, we will show you how to create module in Magento 2 which is a group of folders that include controllers, blocks, models, and helpers to build a specific store feature module. Simply, whenever you need to add new functions to your Magento 2 online store, you need to create a module in Magento 2 to meet these requirements.

Here is an easy-to-follow guide on How to create a custom module in Magento 2. 

How to create module in Magento 2

Modules in Magento 2 will be placed in the app/code directory of a Magento installation, following the format app/code/<Vendor>/<ModuleName>. Follow these steps to create module Magento 2 simply and display Hello World.

Step 1: Create the folder of Hello World module

To create a module in Magento 2, we need to create the Folder in app/code with

• BSS: vendor name
• Helloworld: module name
• Controller: Controls the flow of the module action
• Block: Contains the PHP file of the module
• etc: Configuration related file of the module.
• etc/frontend: front-end router file will be available here.
• view/frontend/layout: frontend layout (XML) file will be available here.
• view/frontend/template: frontend template (.phtml) file.

Step 2: Create a configuration for the module

After having the folders, we need to set the configuration for our module.

Create module.xml file in the following address – app/code/BSS/Helloworld/etc

Then, use the following code to config the module:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="BSS_Helloworld" schema_version="0.0.1" setup_version="0.0.1">
</module>
</config>

Step 3: Create registration of module

In the next step, we need to create a registration module. 

Before that, we create a registration.php file in app/code/BSS/Helloworld with the following code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'BSS_Helloworld',
__DIR__
);

Create Front-end router file

A basic requirement to set a router name for the front page to be able to access it from the front side is the front-end router file. Thus, we must create the routes.xml file in app/code/BSS/Helloworld/etc/frontend.

<?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="helloworld" frontName="helloworld">
<module name="BSS_Helloworld"/>
</route>
</router>
</config>

Create Controller File

After creating the Front-end router file, we need to create a Controller file to execute the action of our module.

In app/code/BSS/Helloworld/Controller/Index, create index.php file and paste this code:

<?php
namespace BSS\Helloworld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
/**
* @var \Magento\Framework\View\Result\PageFactory
*/
protected $resultPageFactory;
/**
* @param \Magento\Framework\App\Action\Context $context
* @param \Magento\Framework\View\Result\PageFactory resultPageFactory
*/
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
)
{
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Default customer account page
*
* @return void
*/
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend(__('Welcome to BSS Helloworld module'));
return $resultPage;
}
}
?>

To check the output, use the URL: http://domain.com/helloworld/index/index 

Block file

Next step, create the block file to contain the PHP view class. 

In app/code/BSS/Helloworld/Block, create a file name called helloworld.php:

<?php
namespace BSS\Helloworld\Block;
class Helloworld extends \Magento\Framework\View\Element\Template
{
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $data = []
)
{
parent::__construct($context, $data);
}
public function getHelloworldData()
{
return 'BSS Helloworld block file call successfully';
}
}
?>

Front-end Layout File

Then, create a helloworld.html file inside the app/code/BSS/Helloworld/view/frontend/templates to call the block function and perform some design codes with this command:

<?php echo $block->getHelloworldData(); ?>

Step 4: Install setup and enable the module

You almost complete to create a module in Magento 2, the last step is only setup it. Do it with the following command: 

php bin/magento setup:upgrade

Then, check the module status:

php bin/magento module:enable BSS_Helloworld

To complete, clean and flush cache with this code:

php bin/magento cache:clean
php bin/magento cache:flush

It’s done. Open http://domain.com/helloworld/index/index  and check whether it works or not. 

Conclusion

Above is the entire guide to help you create module in Magento 2. Hopefully, with this guide, you can easily create your own Hello World module for the first time. If you still get the error, carefully check the steps above to see if you did it correctly. Need more than that to enhance your store, we are always here to support you.