Contact Us
  • +917984575681
  • info@softhealer.com

Create A Simple Module In Magento 2

Create Magento 2 Module

As you may know, we have just released Magento 2 Brand module a few days ago. This is our first module upgraded from Magento 1.9.x to Magento 2. You can find more detail, features of Brand Magento2. Today, we will guide you how to create a simple magento 2 module step by step. Although, it is a details guide with all necessary steps to create module in Magento, that’s worthy for reading.

Before creating the module, it’s necessary to understand the differences in directory structure between the two versions of Magento. In Magento 2 directory structure, code pools are removed from the code-base file structure. Now all the modules are grouped by vendor. Hence, We can create modules right inside the app/code directory.

Differences between Magento1.0 and Magento2.0

In Magento2 there is a drastic change in structure of the code. To understand how to create a module in Magento2, we list the differences between these two versions of magento as bellow:

Create a simple module in Magento2

We create module with Namespace is Ves and Module Name is HelloWorld

Step1: we need create a module.xml file in app/code/Ves/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=”Ves_HelloWorld” setup_version=”1.0.0″></module></config>


Step2: Create app/code/Ves/HelloWorld/registration.php file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE,‘Ves_HelloWorld’,__DIR__);

Step3: Create a frontend router in app/code/Ves/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=”Ves_HelloWorld”/></route></router></config>

The first section of the route string indicates which node Magento should look at to find the URL’s front Name

Then, the router ID shown which router we will use: frontend or adminhtml(the same like in Magento1). Pay attention that the front name is the first part of the URL and it should be unique.

Step4: Create a Controller action

Create the file index.php in app/code/Ves/HelloWorld/Controller/Index. This will map to http://localhost/magento2/helloworld/index/index

helloworld: front nameindex: name of controller folderindex: name of action file – index.php

Each action is its own class extending \Magento\Framework\App\Action\Action. In every action file, there will be a method name excute() that will involked when the action is called

<?php
namespace Ves\HelloWorld\Controller;

class Index extends \Magento\Framework\App\Action\Action
{
/**
* @var \Magento\Framework\View\Result\PageFactory
*/
protected $resultPageFactory;

public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}

/**
* Blog Index, shows a list of recent blog posts.
*
* @return \Magento\Framework\View\Result\PageFactory
*/
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend(__(‘Ves HelloWorld’));
return $resultPage;
}

}

Step5:  Create a layout file in the following directory app\code\Ves\Helloworld\view\frontend\layout\helloworld_index_index.xml

<?xml version=”1.0″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
<body>
<referenceContainer name=”content”>
<block class=”Ves\HelloWorld\\Block/HelloWorld” name=”ves.helloworld” template=”helloworld.phtml”/>
</referenceContainer>
</body>
</page>

Step6: Lets create a block for our module. Create block file app/code/Ves/HelloWorld/Block/HelloWorld.php

<?php
namespace Ves\Helloworld\Block;

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

}

Step7: Create a template file app/code/Ves/HelloWorld/view/frontend/templates/helloworld.phtml

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

Step8: Active Ves_HelloWorld extension

We have two ways to active Ves_Helloworld extension:

1. Directly edit file app/etc/config.php: In the array module, add the element: ‘Ves_Helloworld’ => 1





























2. Open Command line in folder root of magento and run commands
php bin/magento setup:upgrade































You have known all the steps to write a simple module in Magento2. When you run the link:

http://localhost/magento2/helloworld/index/index, the result will be shown as the following


Help & Support

You will get free support and assistance in case of any issues

Email Help About Us Skype