A Quick Step-By-Step Guide for Magento 2 Module Development

Step-By-Step Guide for Magento 2 Module Development

A Module is an integral part of a program that is orientated towards backend logic and app’s workflow. It is a set of classes or routines that depends on works with Magento classes to add a unique feature to a Magento application. In an MVC-based application, all the controllers and models have their own individual folders. All these files are later combined based on their functionalities, which are known as Modules. As a professional Magento website development company, we specialize in custom Magento module development to help you add unique functionality to your Magento store. Here in this blog, we have discussed how you can create a Module in Magento 2. Hope you’ll find this quick step-by-step guide for Magento 2 module development useful!

But, before creating a module, you must first understand the differences in directory structure between Magento 1 and Magento 2. Code pools have been removed from the file structure in Magento 2. While in Magento 1, you can create modules in app/code/local, in Magento 2, you can create the module in app/code.

Things to Keep in Mind for Magento 2 Module Development

Before you jump to creating Magento 2 module, there are two things that you need to consider:

  • Disable Magento Cache

By disabling Magento cache during Module development, you can save a lot of time as you don’t need to manually flush the cache whenever any changes are made to the code.

Go to Admin → System → Cache Management → Choose all the types of cache and disable them.

  • Set Magento to Developer Mode

Setting Magento into a developer mode helps you to see all the errors shown by Magento. You can do this by opening your terminal and then going to the Magento 2 root. When you’ve reached there, you can run the following command:

php bin/magento deploy:mode:set developer

Now, let’s learn how to create a module in Magento 2.

Step-by-Step Instructions for Magento 2 Module Development

If you’re a Magento expert, you can follow the below-given steps to create a custom module in Magento 2. Else, you can hire Magento developers from a professional Magento website development company for the required custom module development.

Step 1: Module Setup

  1. First, create the below folders
  • app/code/MDG
  • app/code/MDG/Helloworld

Where MDG folder is the module’s namespace and our module’s name is Helloworld!

Please note that you will need to create the “code” folder manually if it is not present in the “app” directory.

2. Next, you need to create a module.xml file in the app/code/MDG/Helloworld/etc folder with the below-given 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="MDG_Helloworld" setup_version="1.0.0">
    </module>
</config>

3. To register the module, you need to create a registration/php file in the app/code/MDG/Helloworld folder using the below-given code:

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

4. Next, open the terminal and then go to the Magento 2 root. Implement the following command:

php bin/magento setup:upgrade

Note:

  • You need to make sure that your module is installed.
  • Go to Admin -> Stores -> Configuration -> Advanced -> Advanced.
  • Then, check if the module is there in the list.
  • If not, then open app/etc/config.php and check the array for the “MDG_Helloworld” key whose value must be 1.

Step 2: Create a Controller

1. For creating a controller, you need to define the router with routes.xml file in the app/code/MDG/Helloworld/etc/frontend folder using 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="helloworld" frontName="helloworld">
            <module name="MDG_Helloworld" />
        </route>
    </router>
</config>

After that, you will have to define the frontend router and router with an id “helloworld”. The Magento 2 URL syntax is <frontName>/<controler_folder_name>/<controller_class_name> and based on this, your URL will be helloworld/index/index.

2. Now, you need to create the Index.php file in the app/code/MDG/Helloworld/Controller/Index folder using the following code:

<?php
 
namespace MDG\Helloworld\Controller\Index;
 
use Magento\Framework\App\Action\Context;
use Magento\Framework\App\Action\Action;
use Magento\Framework\View\Result\PageFactory;
 
class Index extends Action
{
    protected $_resultPageFactory;
 
    public function __construct(
        Context $context,
        PageFactory $resultPageFactory
    )
    {
        $this->_resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }
 
    public function execute()
    {
        $resultPage = $this->_resultPageFactory->create();
        return $resultPage;
    }
}

In Magento 2, every action comes with its own class which runs the execute() method.

Step 3: Create a Block

You can start by creating a simple block class using the getHelloWorldTxt() method which will return the “Hello world” string.

  1. First, create a Helloworld.php file in the app/code/MDG/Helloworld/Block folder using the following code:
<?php
namespace MDG\Helloworld\Block;
 
use Magento\Framework\View\Element\Template;
 
class Helloworld extends Template
{
    public function getHelloWorldText()
    {
        return 'Hello world!';
    }
}

Step 4: Create a Layout and Template Files

Both Layout and Templates files should be placed in the view folder inside the module. You can include three subfolders inside the view folder: adminhtml, base, and frontend.

  1. To create a helloworld_index_index.xml file in the app/code/MDG/Helloworld/view/frontend/layout folder, use 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="MDG\Helloworld\Block\Helloworld" name="helloworld" template="helloworld.phtml" /> 
</referenceContainer> 
</body> 
</page>

Please note that every page comes with a layout handle. For your controller action, the layout handle is helloworld_index_index. For every layout handle, you can create a layout configuration file. In your layout file, you have added a block to the content container and set the template of your block to helloworld.phtml, which you’ll create in the next step.

2. Now, create a helloworld.phtml file in the app/code/MDG/Helloworld/view/frontend/templates folder

<h1><?php echo $this->getHelloWorldText(); ?></h1>
<!--  Display Text from block file -->

$this variable indicates your block class. Your created method getHelloWorldTxt() returns the string “Hello world!”

3. Lastly, open the /helloworld/index/index URL in the browser to check the output.

This is how you can create a custom Magento 2 module!

If you’re new to the world of Magento website development, you can always rely on our Magento 2 experts for the required technical assistance.

Wrapping Up

We hope that this guide helps you in your first custom Magento 2 module development journey. If you’re a newbie or happen to get stuck in between, you can always hire Magento developers from us who can help you create a custom module in Magento 2 without any hassle.

Frequently Asked Question

Frequently Asked Questions
Frequently Asked Questions

What is a Magento 2 module?

A module in Magento is a directory that has PHP and XML files such as blocks, helpers, models, and controllers that are associated with a particular feature. A Magento module is made of these software components including themes, language packages, and libraries.

What are the important steps to create a module in Magento 2?

You can follow the below-given steps to create a module in Magento 2:

  • First of all, create a new module folder
  • Next, create the etc/module. xml file
  • Then, create the registration. php file
  • Execute the bin/magento setup:upgrade script to install the newly created module.
  • Check if the created module is working perfectly.

What is the extension used for default Magento template files?

The extension for default Magento templates files is PHTML.

Leave a Reply

Your email address will not be published. Required fields are marked *