How to Create Simple Extensions in Magento 2 How to Create Simple Extensions in Magento 2

Before creating the extension, it is very important to know what the difference is between Magento 1 and Magento 2, because we have to create the modules right inside the app/code directory. In Magento 2 there was a momentous change in the structure of the code, the directory is structured in such a way that code pools are removed from the code-base file structure.

 

First of all, the readers must know what the difference is between Module and Extension. Basically, there is not much difference between them except that “Module” is the technical term that we use for anything we define in app/etc/modules and “Extension” is the marketing term for the published community modules. Or you can say any code that extends the functionality of Magento but itself is not a theme.

 

To know how to create extension one must know the answer of the following question.

 

What are the points that differentiate Magento 2 from Magento 1?

 

These are some features and specifications which can lead to a definitive answer:

 

In 1.x In 2.0
The folder app/code includes:

Core, community and local subfolders. In these folders one can create modules

Here the modules are grouped by vendor, thus the creation of M 2.0 deleted those three subfolders and one can create modules directly under the directory app/code
The module declaration file was a .xml (say: module_brand.xml ) file in app/etc/module The module declaration file was also .xml file but under one vendor name

Example: app/code/VendorName/ModuleName/etc/module.xml

The layout and template files for the front end is saved in the folder app/design/frontend The layout and template is saved in new folder View in each folder module
Skin files are saved in skin folder whereas JS files are saved in js folder The skin files are saved in app/code/VendorName/ModuleName/view/frontend|adminhtml/web/css

Whereas the JS files are stored in folder

app/code/VendorName/ModuleName/view/frontend|adminhtml/web/js

 

Now if you have clear concept of the differences between these two versions of Magento you are ready to go to create your Hello World Extension. We are focusing here to create Hello World extension in Magento 2 only.

 

Creating Extension in Magento 2

 

We are creating a module with Namespace “Cloudways” and Module Name is “HelloWorld”.

These are some steps to follow to create module in Magento 2.

 

Step1: First we need to create Module Declaration file named module.xml in app/code/Cloudways/Helloworld/etc

 

<?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=”Cloudways_HelloWorld” setup_version=”1.0.0″>

   </module>

</config>

 

Step 2: Creating Registration.php File in app/code/Cloudways/Helloworld/

 

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

   \Magento\Framework\Component\ComponentRegistrar::MODULE,

   ‘Cloudways_HelloWorld’,

   __DIR__

);

 

Step 3: Creating Routes.xml  File in app/code/Cloudways/Helloworld/etc/frontend/routes.xml

 

<?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=”Cloudways_HelloWorld”/>

       </route>

   </router>

</config>

 

The first section of the file…

 

noNamespaceSchemaLocation=”urn:magento:framework:App/etc/routes.xsd

 

…shows the node Magento should look to find the URL’s front Name.

 

The second part of the file  <router id=”standard”> shows which router we will use, either frontend or adminhtml. frontName=”helloworld” should be unique as it is the first part of the URL.

Step 4: Creating a Controller Action

 

Here we are creating the action file name action.php

This file is created in folder index (app/code/Cloudways/HelloWorld/Controller/index). This will let you go to http://localhost/magento2/helloworld/index/action

Where ;

helloworld is the front name

index is the name of controller folder

action is the name of the action file in our case index.php

<?php

namespace Cloudways\HelloWorld\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action {

   /** @var  \Magento\Framework\View\Result\Page */

   protected $resultPageFactory;

   /**      * @param \Magento\Framework\App\Action\Context $context      */

   public function __construct(\Magento\Framework\App\Action\Context $context,

       \Magento\Framework\View\Result\PageFactory $resultPageFactory) {

       $this->resultPageFactory = $resultPageFactory;

       parent::__construct($context);

   }

   /**

* Blog Index, shows a list of recent blog posts.

*

* @return \Magento\Framework\View\Result\PageFactory

*/

   public function execute()

   {

    $resultPage = $this-&gt;resultPageFactory-&gt;create();

    $resultPage->getConfig()->getTitle()->prepend(__(‘Cloudways HelloWorld’));

    return $resultPage;

   }

}

Each and every action has its own class extension and in our case it is class Action extends \Magento\Framework\App\Action\Action. As you can see there is a function above  public function execute(){} which is involved in every action class. This function is invoked whenever an action is called.

Step 5: Creating a Layout File Layout.xml

in app/code/Cloudways/Helloworld/View/frontend/layout/layout.xml

 

<?xml version=”1.0″?>

<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=”Cloudways\HelloWorld\Block\HelloWorld” name=”lofformbuilder-toplinks” template=”Cloudways_HelloWorld::helloworld.phtml”/>

 </referenceContainer>

</body>

</page>

 

Step 6: Creating a Block File HelloWorld.Php

in app/code/Cloudways/HelloWorld/Block/HelloWorld.php

 

<?php

namespace Cloudways\HelloWorld\Block;

class HelloWorld extends \Magento\Framework\View\Element\Template

{

public function _prepareLayout()

{

return parent::_prepareLayout();

}

}

 

Step 7: creating a template file helloworld.phtml

in app/code/Cloudways/HelloWorld/View/frontend/templates/helloworld.phtml

 

<h1 style=”color: #f1703d;”> Welcome to Your Magento 2 Store</h1>

 

Step 8: Extension Cloudways_HelloWorld Is Activated

 

This is the most important step of the tutorial. There are two ways to activate it. We will tell you both.

  1. To activate directly through the config file in app/etc/config.xml add a new element Cloudways_HelloWolrd => 1 in the array  module.

 

  1. Through the command prompt. Open command line in root folder of Magento and type the following command there, as shown below. Php bin/magento setup:upgarde

After following the above steps just open the action file in your browser in my case it is  http://localhost/magento2/helloworld/index/action and you will have your final output.

Conclusion

This tutorial was about how to create an Extension in Magento 2 and it leads you well throughout, if I may assume so. Also it has cleared the major points of the difference between the both versions of Magento, and between extension and module.

So what are you waiting for? Start making new extensions for your stores and  feel free to add comment below if you want to give any feedback or want to ask question.

Wajid Hussain is specialized in Magento development, the e-commerce platform he has been working with since 2011.

No comments so far.

Be first to leave comment below.

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