Site icon webarchers

How to create a module in Magento 2

Nitin Sharma

Hello Magento developer,

I can see what brings you here. You are in between Magento 2 module development. So, in order to create a module in Magento 2, you must follow the guide, the directory structure and requirements checklist provided by Magento.

Here, I am with a post, full of knowledge and stepwise instructions in terms of creating your own custom Magento 2 module.

The steps below will lead you to your own custom module:

Table of contents:

  1. Create the folder structur for module.
  2. Create module.xml file.
  3. Create /registration.php file
  4. Enable the module
  5. Create routes.xml file
  6. Create Controller
  7. Create Layout file
  8. Create Block file
  9. Create template file

Step1: Folder Structure:

Before proceeding I want to share the folder structure for better understanding. In order to create custom module in magento 2 your folder structure should match the structure below.

Although, you can use desired company/provider name and use desired name for you custom module.

In my case my provider name is “WebArchers” and my module name is “PDFInvoice”.

You can choose any name for these two folders. All you codes will be based on these two names, so pay extra attention while you write your codes.

Step 2: Create etc/module.xml file

Location ——>  app/code/WebArchers/PDFInvoice/etc/module.xml

Create a file named module.xml on above location and use the following code there:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

    <module name="WebArchers_PDFInvoice" setup_version="1.0.0">

    </module>

</config>

Step 3: Create /registration.php file

Location ——>  app/code/WebArchers/PDFInvoice/registration.php

After creation of module.xml you need to register it. So create registration.php file in above location with following content:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'WebArchers_PDFInvoice',
    __DIR__
);

Step 4: Enable the module

That’s all required for a module creation. We are going to enable our module in this step. After that we will use this module to show our content on frontend.

Note: if you are on localhost go to your xampp/php folder and replace bin/magento from above commands with C:\xampp\htdocs\MagentoFolder\bin\magento

Run these command:

php bin/magento module:enable WebArchers_PDFInvoice

and then

php bin/magento setup:upgrade

and then ( only if you are not in development mode)

php bin/magento setup:static-content:deploy

Step 5: Create frontend routes.xml file

Location ——–> app/code/ WebArchers /PDFInvoice/etc/frontend/routes.xml

The Magento 2 URL syntax is <frontName>/<controler_folder_name>/<controller_class_name> and according to this, our URL will be pdfinvoice/index/index.

<?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 frontName="pdfinvoice" id="pdfinvoice">

            <module name="WebArchers_PDFInvoice"/>

        </route>

    </router>

</config>

Step 6: Create Controller

Location———-> app/code/WebArchers/PDFInvoice/Controller/Index/Index.php

Next we create a index.php at above location.

<?php

namespace WebArchers\PDFInvoice\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action

{

                protected $_pageFactory;

                public function __construct(

                                \Magento\Framework\App\Action\Context $context,

                                \Magento\Framework\View\Result\PageFactory $pageFactory)

                {

                                $this->_pageFactory = $pageFactory;

                                return parent::__construct($context);

                }




                public function execute()

                {

                                echo "Hello World";

                                return $this->_pageFactory->create();

                }

}

Step 7: Create Layout file

Location ——> app/code/yourVendor/PDFInvoice/view/frontend/layout/pdfinvoice_index_index.xml

Now create a layout file at above location and name exact in same style with the below content.

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

    <referenceContainer name="content">

        <block class="WebArchers\PDFInvoice\Block\Index" name="pdfinvoice_index_index" template="WebArchers_PDFInvoice::index.phtml" />

    </referenceContainer>

</page>

Step 8: Create Block file

Location———-> app/code/WebArchers/PDFInvoice/Block/Index.php

Whatever function you create here, will be accessible to your phtml file directly. So, create an index.php file at above location with the below content.

<?php

namespace WebArchers\PDFInvoice\Block;

class Index extends \Magento\Framework\View\Element\Template

{




}

Step 9: Create template file

Location——–> app/code/yourVendor/PDFInvoice/view\frontend\templates/index.phtml

This file will show your html content to the frontend.

<h2>You have done it!</h2>

Upgrade setup

php bin/magento setup:di:compile

Clean cache

php bin/magento cache:clean

go to url

http://yourhost/pdfinvoice/

If you face any issue while creating module, feel free to leave the problem in comment section.

Till then,

Happy Coding 🙂

Exit mobile version