Magento 2

HOW TO CREATE A SIMPLE MODULE IN MAGENTO 2

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
 
 
<?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="../../../../../../lib/internal/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
 
helloword: front name
index: name of controller folder
index: name of action file – index.php
 
Each action is its own class extending MagentoFrameworkAppActionAction. In every action file, there will be a method name excute() that will involked when the action is called
 
<?php
namespace Ves\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->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" layout="1column" 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"></block>
    </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
{
  public function _prepareLayout()
  {
  return parent::_prepareLayout();
  }
}
 
Step7: Create a template file app/code/Ves/HelloWorld/View/frontend/templates/helloworld.phtml
 
 
<h1 style="color:#f1703d"> Welcome to Magento 2 </h2>

Step 8: Active Ves_HelloWorld extension We have two ways to active Ves_Helloworld extension 1. Directly edit file app/etc/config.xml: 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

1 Bình luận

  1. buy nói:

    Can women take should buy viagra online for men, viagra bad side effects .

Trở về
  • Magento plug-ins
  • Magento plug-ins

    Magento2 gave very good concept called Plugin   we can do what ever after and before core function and also we have...

  • HOW TO CREATE MENU IN MAGENTO 2 ADMIN
  • HOW TO CREATE MENU IN MAGENTO 2 ADMIN

    magento-2-admin- menu My previous tutorial show you how to create a simple module in Magento 2, learn more here: http://www.venustheme.com/how-to-create-magento-2-module/....