A Complete Tutorial on Magento 2 Module Development

“Hello World” is where a new programmer is born! 😄
Starting with the ABCD of Magento 2 development, hello world module is mandatory!

So, here I am, with a post for newbies to create a simple module in Magento 2, for hello world. Magento 2 module development is a stepwise process and needs to be done with some prerequisites conditions.

Follow the below tutorial and create your own basic module in Magento 2!

Things to take care of before you create a custom module in Magento 2:

Switch to developer mode: Switch to developer mode in order to see every error Magento is throwing at you. Use the below command:

Learn more about the Magento 2 Modes

Method for Magento 2 Module Development:

1. Module Setup
2. Creating a Controller
3. Creating a Block
4. Creating a Layout and Template Files

Getting to each step,

1. Module Setup

   1. Create the below folders
      1. app/code/Meetanshi
      2. app/code/Meetanshi/Helloworldwhere Meetanshi folder is the module’s namespace and our module’s name is Helloworld!Note: You’d be required to create the “code” folder manually if it is not in the “app” directory.
   2. Create a module.xml file in the app/code/Meetanshi/Helloworld/etc  folder with the below 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="Meetanshi_Helloworld" setup_version="1.0.0"> </module> </config>

      1 2 3 4 5 6

      <?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="Meetanshi_Helloworld" setup_version="1.0.0">     </module> </config>

   3. Create a registration/php file in the app/code/Meetanshi/Helloworld folder to register the module. Implement the below code:
      
      <?php \Magento\Framework\Component\ComponentRegistrar::register(     \Magento\Framework\Component\ComponentRegistrar::MODULE,     'Meetanshi_Helloworld',     __DIR__ );

      1 2 3 4 5 6 7

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

   4. Open the terminal and go to the Magento 2 root. Run the below command
      
      php bin/magento setup:upgrade

      1	php bin/magento setup:upgrade

      Note: Make sure if your module is installed. Go to Admin > Stores > Configuration > Advanced > Advanced. Check if the module is present in the list. Else, open app/etc/config.php and check the array for the “Meetanshi_Helloworld” key whose value must be 1.

2. Creating a Controller

   1. Define the router with routes.xml file in the app/code/Meetanshi/Helloworld/etc/frontend folder with the below 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="Meetanshi_Helloworld" /> </route> </router> </config>

      1 2 3 4 5 6 7 8 9

      <?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="Meetanshi_Helloworld" />         </route>     </router> </config>

      We define the frontend router and router with an id “helloworld”. The Magento 2 URL syntax is <frontName>/<controler_folder_name>/<controller_class_name> and according to this, our URL will be helloworld/index/index.

       

   2. Create the Index.php file in the app/code/Meetanshi/Helloworld/Controller/Index folder with the below code:
      <?php namespace Meetanshi\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;     } }

      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   namespace Meetanshi\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 has its own class which implements the execute() method.

3. Creating a block

   Create a simple block class with the getHelloWorldTxt() method which returns the “Hello world” string.

   1. Create a Helloworld.php file in the app/code/Meetanshi/Helloworld/Block folder with the below code:
      
      <?php namespace Meetanshi\Helloworld\Block; use Magento\Framework\View\Element\Template; class Helloworld extends Template {     public function getHelloWorldText()     {         return 'Hello world!';     } }

      1 2 3 4 5 6 7 8 9 10 11 12

      <?php namespace Meetanshi\Helloworld\Block;   use Magento\Framework\View\Element\Template;   class Helloworld extends Template {     public function getHelloWorldText()     {         return 'Hello world!';     } }

4. Creating a layout and template files

   Layout files and templates are placed in the view folder inside the module. We can have three subfolders inside the view folder: adminhtml, base, and frontend.

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

      1 2 3 4 5 6 7

      <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="Meetanshi\Helloworld\Block\Helloworld" name="helloworld" template="helloworld.phtml" /> </referenceContainer> </body> </page>

       

      Every page has a layout hand. For our controller action, the layout handle is helloworld_index_index. You may 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 create in the next step.

   2. Create a helloworld.phtml file in the app/code/Meetanshi/Helloworld/view/frontend/templates folder
      <h1><?php echo $this->getHelloWorldText(); ?></h1> <!--  Display Text from block file -->

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

      $this variable refers to our block class. Our method getHelloWorldTxt() returns the string “Hello world!”

Open the /helloworld/index/index URL in the browser to check the below output.

That’s it with the custom Magento 2 module development!

Hopefully, the post helps you go through the first Magento 2 module development stage! If you get stuck in the between, make sure to solve your doubts using the Comments section below. I’d be happy to help 🙂

Do rate the post with 5 stars!

Thank you.