Magento 2 module development trends increase rapidly, that’s why we are writing about “How to create a simple module in Magento 2“. Needless to say, you will need the latest Magento 2.x version. If you need any help with the Magento 2 installation, you can refer our article “How to install Magento 2”.

If you are familiar with Magento 1.x version, you’re used to the term code pools – community, core and local folders. The module is a directory that contains block, controller, models, helpers, etc that are related to a specific business features.

In Magento 2, there are no more code pools. Modules are grouped by namespace and placed directly in the app/code folder with "app/code/<Vendor>/<ModuleName>" format.

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

Now we will follow this steps to create a simple module which work on Magento 2 and display “Welcome to Magento2!“.

Step 1: Create a directory for the module like above format.

app/code/<Vendor>
app/code/<Vendor>/<ModuleName>

Sample:-
app/code/Titech
app/code/Titech/Welcomemage

The Titech folder is the module’s namespace, and Welcomemage is the module’s name.

Step 2: Declare module by using configuration file module.xml

Now that we have a module folder, we need to create folder etc and add module.xml. Magento 2 looks for configuration information for each module in that module’s etc directory.

app/code/<Vendor>/<ModuleName>/etc/module.xml

Sample:-
app/code/Titech/Welcomemage/etc/module.xml

And add the following code into it.

Step 3: Register module by registration.php

All Magento 2 module must be registered in the Magento system through the Magento ComponentRegistrar class. To register the module, create a registration.php file in the app/code/<Vendor>/<ModuleName>/ folder with the following code.

Sample:-
app/code/Titech/Welcomemage/registration.php

Step 4: Enable the module

Now we have to enable/register the module in Magento 2 environment. Before doing this, we must check to make sure Magento has recognize our module or not.

Open your terminal and go to the Magento 2 root. Run from there the following command:
php bin/magento module:status

You will see this in the result:
List of disabled modules:
Titech_Welcomemage

This means the module has recognized by the system, but it is still disabled. To enable run the below command:
php bin/magento module:enable Titech_Welcomemage

The module has enabled successfully if you saw this result:
The following modules has been enabled:
– Titech_Welcomemage

If its the first time you enable this module, Magento 2 require to check and upgrade module database. We need to run this command:
php bin/magento setup:upgrade

If you want to make sure that the module is installed, you can go to Admin → Stores → Configuration → Advanced → Advanced and check that the module is present in the list
or
you can open app/etc/config.php and check the array for the ‘Titech_Welcomemage‘ key, whose value should be set to 1.

Step 5: Define Routers for the module.

The Router is used to assign a URL to a corresponding controller and action. In the Magento 2 system, a request URL has the following format:

http://domain.com/<frontName>/<controller_name>/<action_name>
<frontName>/<controler_folder_name>/<controller_class_name>

To define a route for frontend area, create a routes.xml file in the app/code/<Vendor>/<ModuleName>/etc/frontend folder and add following code:

Sample:-
app/code/Titech/Welcomemage/etc/frontend/routes.xml

After define the route, the frontName attribute is going to be the first part of our URL. The URL path to our module can be access via: http://domain.com/welcomemage/*

Step 6. Create controller and action.

In this step, we will create controller and action to display “Welcome to Magento2!“. Now we will choose the URL for this action. Let assume that the final URL will be: http://domain.com/welcomemage/index/index

So the file we need to create is:

Sample:-
app/code/Titech/Welcomemage/Controller/Index/Index.php

You can access the same via http://domain.com/welcomemage/index/display.

In Magento 1.x each controller can have multiple actions, but in Magento 2 this is not the case. In Magento 2 every action has its own class which implements the execute() method.

Step 7. Create a block.

Create a block file Welcomemage.php in app/code/<Vendor>/<ModuleName>/Block folder with the getWelcomeTxt() method which return the “Welcome to Magento2!” sting.

Sample:-
app/code/Titech/Welcomemage/Block/Welcomemage.php

Step 8. Creating a layout and template files.

As you know in Magento 1.x, layout and template files are placed in app/design/ folder. But in Magento 2, layout and templates are placed in the view folder inside the module. Inside the view folder, we can have three subfolders: adminhtml, base and frontend.

The adminhtml folder is used for admin, the front-end folder is used for front-end and the base folder is used for both, admin and front-end files.

app/code/<Vendor>/<ModuleName>/view/

Sample:-
app/code/Titech/Welcomemage/view/

(a) We will create a welcomemage_index_index.xml file in the app/code///view/frontend/layout folder with the following code:

Sample:-
app/code/Titech/Welcomemage/view/frontend/layout/welcomemage_index_index.xml

Every page has a layout hand and for our controller action the layout handle is welcomemage_index_index. You can create a layout configuration file for every layout handle.

(b) We will create welcomemage.phtml file in the app/code/<Vendor>/<ModuleName>/view/frontend/templates folder, which we set the template of our block in our layout file.

app/code/Titech/Welcomemage/view/frontend/templates/welcomemage.phtml

Add the below code to the file :

$this variable is refrencing our block class and we are calling the method getWelcomemageTxt() which is returning the string ‘Welcome to Magento2!’.

Now you can see the result.
Open the URL <path-to-project>/welcomemage/index/index in your browser.

If you have any question or doubt while creating the module in Magento 2.x or you need any other customized extension for your store, you can contact our team of Magento development experts anytime and they will assist you with the optimized solution.

 

My name is Sreejith Gopinath and I am a full-stack Web Application Developer and Software Developer, currently living in TI Technologies. I have a Bachelor of Science in Computer Science from Cusat, and my primary focus and inspiration for my studies is Web Development. In my free time, I study human computer interface and the psychology of human computer interaction. I am both driven and self-motivated, and I am constantly experimenting with new technologies and techniques. I am very passionate about Web Development, and strive to better myself as a developer, and the development community as a whole.