Magento 2 Create Module Tutorial

                 steps to create module in magento 2 (user friendly image descrition)

Step 1 :

First thing to know about the Difference between Magento 1.9(older versions) and Magento 2.0 :

       Differences between Magento 1.0-1.9 and Magento 2.0

Magento 1.0	Magento 2.0
Folder app/code includes subfolders: core, community, local	Folder app/code includes subfolders Magento and Zend. In Magento 1.0,  Magento and Zend are subfolders of the folder core
Codes created by developers are located at app/code/local or app/code/community	Codes created by developers are written directly in app/code. There is no difference between local and community
Module declaration file is a xml file in app/etc/modulesEg:  Module Checkout in Magento Core is declared in app/etc/modules/Mage_All.xml	Module declaration file is always module.xml which is written directly to folder etc in the moduleEg:  module Checkout in Magento Core is declared in app/code/Magento/Checkout/etc/module.xml
Layout and template are saved in folder app/designEg:  app/design/frontend/default/default/layout	Layout and template are saved in the folder “View” in the module. The folder is the same level with some folders like: Block, Controller, Helper, Model, etc. in the moduleEg:  app/code/Magento/Hello/view/frontend/layout

Above are some basic differences between Magento 1.0 and Magento 2.0 so that you can easily visualize the folder structure in Magento 2.0. Thus, making a simple module in Magento 2.0 is just a breeze. For deeper understand, move to the next part & practice.

Create a simple module in Magento 2.0

(Namespace: Magento, Module Name: Hello)

Example link on local host: http://localhost/magento20/hello/index/index

• Step 1:

Write the file module.xml in app/code/Magento/Hello/etc/module.xml to declare the module.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation=

"../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
   <module name="Magento_Hello" schema_version="0.0.1"/>
</config>

• Step 2:

– Create controller and action:

– Create the file Index.php in app/code/Magento/Hello/Controller/Index/Index.php

Folder Index plays the role of controller, while Index.php is action. The executive function of action Index is execute()

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

 

– Create a Block:

app/code/Magento/Hello/Block/Hello.php
namespace Magento\Hello\Block;
class Hello extends \Magento\Framework\View\Element\Template
{
public function _prepareLayout()
{
    return parent::_prepareLayout();
}
}

– Write configuration file: /app/code/Magento/Hello/etc/frontend/routes.xml

– In Magento 1.0, every information about router, events of frontend and backend is declared in Magento/Hello/etc/config.xml. However, in Magento 2.0, file config.xml only configures the default configuration value in tag <default>

+) Information about router of frontend will be reported in:

Magento/Hello/etc/frontend/routes.xml (it is similar to backend)

+) Event of frontend will be declared in: Magento/Hello/ect/frontend/events.xml  (it is similar to backend)

In the scope of a simple module, we only declare routers in Magento/Hello/etc/frontend/routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation=

"../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
<router id="standard">
    <route id="hello" frontName="hello">
        <module name="Magento_Hello" />
    </route>
</router>
</config>

</config>

• Step 3: Create a Frontend Template

– Write a layout file: app\code\Magento\Hello\view\frontend\layout\hello_index_index.xml

Name of layout file is really important in this step. It will be named after the structure:

router name_controlle namer_action name

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <body>     <referenceContainer name="content">         <block class="Magento\Hello\Block\Hello" name="hello" template="success.phtml">         </block>     </referenceContainer> </body> </page>

Then, we create a file success.phtml as reporting in layout file:

app\code\Magento\Hello\view\frontend\templates\success.phtml

<?php echo ‘Successful! This is a simple module in Magento 2.0′; ?>

• Step 4: Activate Magento_Hello extension in configuration file

– Open the file app/etc/config.xml

– In the array ‘module’, add the element: ‘Magento_Hello’ => 1,

You have known all the steps to write a simple module in Magento 2.0. When you run the link: http://localhost/magento20/hello/index/index the result will be shown as the following:

Thank you so much for following my tutorial.