Our brands

[ NEW UPDATE] How To Create A Simple Module In Magento 2 | Latest Magento 2 Release

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: http://www.venustheme.com/theme/ves-brand-2-0/. 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.

I. 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:

magento 2 structure of the code

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




    
    


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



Step3: Create a frontend router in app/code/Ves/HelloWorld/etc/frontend/routes.xml




    
        
            
        
    


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 name
index: name of controller folder
index: 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


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->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

	


 
  
   
  
 


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



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


Welcome to Magento 2

Step 8: 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

ves_helloworld_active

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

cmd

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
result

Magento 2 Extensions are created as an example

Share this Post!

Alena Dao
Alena Dao
“Good marketing makes the company look smart. Great marketing makes the customer feel smart.”

4 Comments

  1. dzung December 17, 2015 at 1:57 pm - Reply

    Hi,
    I don’t see ‘code’ folder in ‘app’ .
    Do I have to manually create this folder.
    In ‘app’ directory, i see ‘design’ and ‘etc’ folder only.

    Thanks

  2. Rahul Anand December 31, 2015 at 1:31 pm - Reply

    Nice tutorial. Good to start.

  3. ram January 7, 2016 at 6:41 pm - Reply

    Hi,

    i have got following error when i running this module….

    Fatal error: Declaration of Ves\HelloWorld\Controller\Index\Index::execute() must be compatible with Magento\Framework\App\ActionInterface::execute(Magento\Framework\App\RequestInterface $request) in D:\Xampp\htdocs\magento2dev\app\code\Ves\HelloWorld\Controller\Index\Index.php on line 25

    can u provide solution for this issue that will be very helpful…thanks for your great tutorial…..

Leave a Reply to Alena Dao Cancel reply

Your email address will not be published.