Guide to Create a Module in Magento 2

guide to create a module in Magento 2

Are you seeking the way of creating a Module in Magento 2? Today, we’ll guide you how to to create a module in Magento 2. We hope you will enjoy them and make use of it easily!

To create a flexible module is very difficult, but we have a simple tutorial about creating a simple module in Magento 2. Hope that this tutorial could help you in first step. 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

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

Guide to create a module in Magento 2

Create a module in Magento2

Step 1: Create configuration files.

– Create file: app/code/Tutorial/Example/etc/module.xml (Purpose: This file will declare your module) and insert this following code into it:

  1.  <?xml version=“1.0”?>
  2.  <config xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=“..
  3. /../../../../lib/internal/Magento/Framework/Module/etc/module.xsd”>
  4.       <module name=“Tutorial_Example” setup_version=“1.0.0”>
  5.  
  6.       </module>
  7. </config>

– Create file: app/code/Tutorial/Example/etc/frontend/routes.xml (Purpose: The router of your module for frontend will be declared here):

  1. <?xml version=“1.0”?>
  2. <config xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=“..
  3. /../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd”>
  4.       <router id=“standard”>
  5.               <route id=“example” frontName=“example”>
  6.                          <module name=“Tutorial_Example” />
  7.                </route>
  8.         </router>
  9.  </config>

Step 2: Create controller, layout and template files.

After creating the configuration files, we will start with controller, layout and template files.

– Create the controller file: app/code/Tutorial/Example/Controller/Index/Index.php and put this code:

  1. <?php
  2.  
  3. namespace Tutorial\Example\Controller\Index;
  4.  
  5. use Magento\Framework\App\Action\Context;
  6. use Magento\Framework\View\Result\PageFactory;
  7.  
  8. class Index extends \Magento\Framework\App\Action\Action
  9. {
  10.         /**
  11.           * @param Context $context
  12.           * @param PageFactory $resultPageFactory
  13.            */
  14.           public function __construct(
  15.                     Context $context,
  16.                      PageFactory $resultPageFactory
  17.             )
  18.             {
  19.                      parent::__construct($context);
  20.                      $this->resultPageFactory = $resultPageFactory;
  21.              }
  22.  
  23.              public function execute()
  24.              {
  25.                       $resultPageFactory = $this->resultPageFactory->create();
  26.  
  27.                        // Add page title
  28.                        $resultPageFactory->getConfig()->getTitle()->set(__(‘Example module’));
  29.  
  30.                       // Add breadcrumb
  31.                       /** @var \Magento\Theme\Block\Html\Breadcrumbs */
  32.                       $breadcrumbs = $resultPageFactory->getLayout()->getBlock(‘breadcrumbs’);     
  33.                        $breadcrumbs->addCrumb(‘home’,
  34.                                  [
  35.                                           ‘label’ => __(‘Home’),
  36.                                            ‘title’ => __(‘Home’),
  37.                                             ‘link’ => $this->_url->getUrl()
  38.                                   ]
  39.                              );
  40.                              $breadcrumbs->addCrumb(‘tutorial_example’,
  41.                                        [
  42.                                                 ‘label’ => __(‘Example’),
  43.                                                  ‘title’ => __(‘Example’)
  44.                                         ]
  45.                                   );
  46.  
  47.                                   return $resultPageFactory;
  48.                         }
  49. }
  50.  

– Create the layout file: app/code/Tutorial/Example/view/frontend/layout/example_index_index.xml

  1. <?xml version=“1.0” encoding=“UTF-8”?>
  2. <page xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” layout=“3columns”
  3. xsi:noNamespaceSchemaLocation=“../../../../../../../lib/internal/Magento/Framework/View/Layout/
  4. etc/page_configuration.xsd”>
  5.         <body>
  6.                    <referenceContainer name=“content”>
  7.                             <block class=“Magento\Framework\View\Element\Template” name=“tutorial_example_block”
  8. template=“Tutorial_Example::index.phtml” />
  9.                  </referenceContainer>
  10.           </body>
  11. </page>

– Create the template file: app/code/Tutorial/Example/view/frontend/templates/index.phtml

            <h1><?php echo __(‘This is an example module!’) ?></h1>

Step 3: Activate the module in the configuration file of Magento 2

We will active this module by opening app/etc/config.php file then add this line into it:

Then open the Command in Windows (or the Terminal in Linux and MAC OS). Go to your Magento root folder and run this command line to install your module:

bin\magento setup:upgrade

Finally, clear the Magento cache then access with url http://localhost/magento2/example/index/index/ 

Visit Magesolution blog to never miss any updates  or tutorials about Magento 2.0

7743 Total Views 1 Views Today