:::: MENU ::::

Magento 2 create a module or extension

In start of learning Magento 2 every developer must need to learn how to create a simple module or extension. But before start it you must have initial knowledge of Php too. Here it is easy way to create the extension or module in magento 2. In this custom module we have to learn how to create router,controller,block,xml layout and phtml files. Combination of these file will make a simple Hello World module. That will listed in admin module list and show the output on fronteend So lets start the fun learning of magento 2. Before we start playing with magento 2 we must do these tasks disabled cache from admin panel or you can do it via command (php bin/magento cache:disable) and set the developer mode on by following command (php bin/magento deploy:mode:set developer).
Note: Check code folder in your app directory. If not have code folder then create it.

First Step:

First step is register your module with registration.php . The file location will be

app/code/QaisarSatti/HelloWorld/registration.php

<?php
/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'QaisarSatti_HelloWorld',
__DIR__
);

Second Step:

Create module.xml file. In this file you will define your module name and version. The file location will be

app/code/QaisarSatti/HelloWorld/etc/module.xml

<?xml version="1.0"?>
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/ -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="QaisarSatti_HelloWorld" schema_version="0.0.1" setup_version="0.0.1"/>
</config>

Third Step:

Create the block file.The file location will be

app/code/QaisarSatti/HelloWorld/Block/HelloWorld.php

<?php
/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

namespace QaisarSatti\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{
public function _prepareLayout()
{
parent::_prepareLayout();
$this->pageConfig->getTitle()->set(__('First Hello World Module'));
return $this;
}
}

Fourth Step:

Create the controller file.The file location will be

app/code/QaisarSatti/HelloWorld/Controller/Index/Index.php

<?php
/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

namespace QaisarSatti\HelloWorld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
public function execute()
{
$this->_view->loadLayout();
$this->_view->renderLayout();
}
}

Fifth Step:

Create frontend router. Here you will declare your frontName make sure it is unique name.

app/code/QaisarSatti/HelloWorld/etc/frontend/routes.xml

<?xml version="1.0"?>
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/ -->
<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="QaisarSatti_HelloWorld" />
</route>
</router>
</config>

Sixth Step:

Create frontend template file.

app/code/QaisarSatti/HelloWorld/view/frontend/templates/HelloWorld.phtml

<?php
/**
* Catalog Product Rewrite Helper
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/

echo 'Hello World';
?>

Seventh Step:

Add frontend layout handle for your router. First letter will be your frontName as you mention in your router.xml file (helloworld) then your folder name (index) then in the last your controller name (Index).

app/code/QaisarSatti/HelloWorld/view/frontend/layout/helloworld_index_index.xml

<?xml version="1.0"?>
<!--/**
* Simple Hello World Module
*
* @category QaisarSatti
* @package QaisarSatti_HelloWorld
* @author Muhammad Qaisar Satti
* @Email [email protected]
*
*/ -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="QaisarSatti\HelloWorld\Block\HelloWorld" name="HelloWorld" template="QaisarSatti_HelloWorld::HelloWorld.phtml"></block>
</referenceContainer>
</body>
</page>

Now your simple hello world module is complete. You can do following step to activate this module.

php bin/magento module:enable QaisarSatti_HelloWorld

You can see the output of module front page by http::yoururl/helloworld

Github Links

Author: Qaisar Satti
Category: Magento 2
Last Modified: July 12, 2018


8 Comments

    • Reply qaisarsatti |

      Really appreciated. Surely you’ll like other blog posts as well.
      Stay tuned, There is a lot coming in next few days.

    • Reply qaisarsatti |

      Really appreciated. Surely you’ll like other blog posts as well.
      Stay tuned, There is a lot coming in next few days.

  • Reply Francesco Romano |

    Sono d’accordo con lei, la ringrazio per l’assistenza in materia. Come sempre, tutti i semplicemente brillante.

  • Reply usacuuch |

    Hi my friend! I want to say that this article is awesome, nice written and include approximately all important infos. I like to see more posts like this.

  • Reply borvestinkral |

    Good – I should certainly pronounce, impressed with your website. I had no trouble navigating through all the tabs and related information ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. Reasonably unusual. Is likely to appreciate it for those who add forums or something, web site theme . a tones way for your client to communicate. Nice task..

So, what do you think ?