How to create a basic module in Magento 2 – Sample 1

We’re going to construct a quite simple module in Magento 2. When completed, the module’s output will say “Hello world!” in the block content material on a customized frontend route.

Prerequisites

Needless to say, you will have the newest Magento 2 version which is at present 2.1. If you want any assist with the Magento 2 set up we now have a nice article concerning this specific subject (*2*).

Before we start a Magento 2 module improvement, there are two issues folks typically neglect and we advocate you to do:

1. Disable Magento cache

Disabling Magento cache throughout improvement will prevent a while since you received’t want to manually flush the cache each time you make modifications to your code.

The easiest method to disable cache is to go to Admin → System → Cache Management → choose all cache varieties and disable them.

2. Put Magento into a developer mode

You ought to put Magento into a developer mode to be sure that you see all of the errors Magento is throwing at you.

In order to do this, open your terminal and go to the Magento 2 root. From there it’s best to run the next command:

php bin/magento deploy:mode:set developer

Creating the module recordsdata and folders

Module setup

If you will have used the Magento 1 version, you’re used to the time period code pools – group, core and native folders which reside in the app/code folder. In Magento 2, there aren’t any extra code pools. Modules are grouped by namespace and positioned straight in the app/code folder.

So our first step is to create the module folder and mandatory recordsdata required to register a Magento module.

1. Create the next folders:

• app/code/simplemagento
• app/code/simplemagento/Helloworld

The simplemagento folder is the module’s namespace, and Helloworld is the module’s name.

Note: If you don’t have the code folder in your app listing, create it manually.

2. Now that we now have a module folder, we’d like to create a module.xml file in the app/code/simplemagento/Helloworld/etc folder with the next code:

<?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="simplemagento_Helloworld" setup_version="1.0.0">
    </module>
</config>

3. To register the module, create a registration.php file in the app/code/simplemagento/Helloworld folder with the next code:

<?php
 
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'simplemagento_Helloworld',
    __DIR__
);

4. Open your terminal and go to the Magento 2 root. Run from there the next command:

php bin/magento setup:upgrade

If you need to make it possible for the module is put in, you’ll be able to go to Admin → Stores → Configuration → Advanced → Advanced and examine that the module is current in the checklist or you’ll be able to open app/etc/config.php and examine the array for the ‘simplemagento_Helloworld’ key, whose worth ought to be set to 1.

Creating a controller

1. First we’d like to outline the router. To do this, create a routes.xml file in the app/code/simplemagento/Helloworld/etc/frontend folder with the next code:

<?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 id="helloworld" frontName="helloworld">
            <module name="simplemagento_Helloworld" />
        </route>
    </router>
</config>

Here we’re defining our frontend router and route with an id “helloworld”.

The frontName attribute goes to be the primary a part of our URL.

In Magento 2 URL’s are constructed this means:
<frontName>/<controler_folder_name>/<controller_class_name>

So in our example, the ultimate URL will appear like this:

helloworld/index/index

2. Now we create the Index.php controller file in the app/code/simplemagento/Helloworld/Controller/Index folder with the next code:

<?php
 
namespace simplemagentoHelloworldControllerIndex;
 
use MagentoFrameworkAppActionContext;
 
class Index extends MagentoFrameworkAppActionAction
{
    protected $_resultPageFactory;
 
    public function __construct(Context $context, MagentoFrameworkViewResultPageFactory $resultPageFactory)
    {
        $this->_resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }
 
    public function execute()
    {
        $resultPage = $this->_resultPageFactory->create();
        return $resultPage;
    }
}

In Magento 1 every controller can have a number of actions, however in Magento 2 this shouldn’t be the case. In Magento 2 each action has its personal class which implements the execute() method.

Creating a block

We’ll create a easy block class with the getHelloWorldTxt() method which returns the “Hello world” string.

1. Create a Helloworld.php file in the app/code/simplemagento/Helloworld/Block folder with the next code:

<?php
namespace simplemagentoHelloworldBlock;
 
class Helloworld extends MagentoFrameworkViewElementTemplate
{
    public function getHelloWorldTxt()
    {
        return 'Hello world!';
    }
}

Creating a structure and template recordsdata

In Magento 2, structure recordsdata and templates are positioned in the view folder inside your module. Inside the view folder, we will have three subfolders: adminhtml, base and frontend.
The adminhtml folder is used for admin, the frontend folder is used for frontend and the bottom folder is used for each, admin and frontend recordsdata.

1. First we’ll create a helloworld_index_index.xml file in the app/code/simplemagento/Helloworld/view/frontend/structure folder with the next code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
    <body>
        <referenceContainer name="content">
            <block class="simplemagentoHelloworldBlockHelloworld" name="helloworld" template="helloworld.phtml" />
        </referenceContainer>
    </body>
</page>

Every web page has a structure hand and for our controller action the structure deal with is helloworld_index_index. You can create a structure configuration file for each structure deal with.

In our structure file we now have added a block to the content material container and set the template
of our block to helloworld.phtml, which we’ll create in the following step.

2. Create a helloworld.phtml file in the app/code/simplemagento/Helloworld/view/frontend/templates folder with the next code:

<h1><?php echo $this->getHelloWorldTxt(); ?></h1>

$this variable is refrencing our block class and we’re calling the method getHelloWorldTxt() which is returning the string ‘Hello world!’.

And that’s it. Open the /helloworld/index/index URL in your browser and it’s best to get one thing like this: