Creating a Magento 2 Extension

When any developer starts learning about Magento 2, it is extremely important that they know exactly what it takes to create a simple extension. By now you know that you can’t get into it without having some basic know-how of PHP. Don’t worry though, I’m going to cover a clean and simple way of creating a Magento 2 extension or module.

While making this custom extension you will learn how to create a controller, router, block, PHTML files and XML layouts. A blend of these said files will help generate a simple module for Hello World will reflect on the frontend and will be listed in the list containing admin modules.

Before We Start…

Let’s get all our preparations out of the way.

• Go to the Admin Panel and Disable Cache or do it through the command (php bin/magento cache:disable) 
• Enable the Developer Mode with this command (php bin/magento deploy:mode:set developer)

Note: In your App directory check the code folder, if you don’t have such a folder the go ahead and create one.

Without any more wait, let’s just get to the fun part.

Step #1:

With registration.php register yourmodule. Set the file location as:

app/code/Addify/HelloWorld/registration.php

<?php
/**
* Addify Hello World Module
*
* @category Addify
* @package Addify_HelloWorld
* @author Addify
*
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Addify_HelloWorld',
__DIR__
);

Step #2:

Make a file and name it module.xml. Define your module version and name in this file. Set the file location as:

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

Step #3:

<?xml version="1.0"?>
<!--/**
/**
* Addify Hello World Module
*
* @category Addify
* @package Addify_HelloWorld
* @author Addify
*
*/ -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Addify_HelloWorld" schema_version="1.0.0" setup_version="1.0.0"/>
</config>

Make a block file. Set the file location as:

app/code/Addify/HelloWorld/Block/HelloWorld.php

<?php
/**
* Addify Hello World Module
*
* @category Addify
* @package Addify_HelloWorld
* @author Addify
*
*/
namespace Addify\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{
public function _prepareLayout()
{
parent::_prepareLayout();
$this->pageConfig->getTitle()->set(__('Addify Hello World Module'));
return $this;
}
}

Step #4:

Make a controller file. Set the file location as:

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

<?php
/**
* Addify Hello World Module
*
* @category Addify
* @package Addify_HelloWorld
* @author Addify
*
*/
namespace Addify\HelloWorld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
public function execute()
{
$this->_view->loadLayout();
$this->_view->renderLayout();
}
}

Step #5:

Make a frontend router and set your frontName here. You want to make sure that your name is clear and unique.

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

<?xml version="1.0"?>
<!--/**
* Addify Hello World Module
*
* @category Addify
* @package Addify_HelloWorld
* @author Addify
*
*/ -->
<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="Addify_HelloWorld" />
</route>
</router>
</config>

Step #6:

Make a file for the frontend template.

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

<?php
/**
* Addify Hello World Module
*
* @category Addify
* @package Addify_HelloWorld
* @author Addify
*
*/
echo 'Hello World';
?>

Step #7:

Now, incorporate a frontend layout handle. This is for your router. The First Letter should be your frontName which you have already set in your router.xml file (helloworld). After the frontName, fill in your folder name (index) and follow that with your controller name (Index).

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

<?xml version="1.0"?>
<!--/**
* Addify Hello World Module
*
* @category Addify
* @package Addify_HelloWorld
* @author Addify
*
*/ -->
<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="Addify\HelloWorld\Block\HelloWorld" name="HelloWorld" template="Addify_HelloWorld::HelloWorld.phtml"></block>
</referenceContainer>
</body>
</page>

This completes your simple hello world module. To activate this module, just follow this last step.

php bin/magento module:enable Addify_HelloWorld

To view the module’s output on the front page follow http::yoururl/helloworld