We will build a very simple module in Magento 2. When done, the module output will be "Hello world!" in a content block on a route customized in the frontend.

1. Prerequisite

Needless to say, you will need the latest Magento 2 version of 2.3. Before we start developing the Magento 2 module, there are two things people often forget and I recommend:

• Disable Magento cache :

Disabling the Magento cache during development will save you time because you have won the need to clear cache every time you change your code.

The easiest way to disbale the cache is to go to Admin → System → Cache Management → select all cache types and turn them off.

• Put Magento in developer mode :

You should put Magento in developer mode to make sure you see all the bugs that Magento is throwing at you.

To do this, open your terminal and go to root Magento 2. From there you run the following command:

2. Create module files and directories.

Module Setup

In Magento 2, modules are grouped by namespace and placed directly in the app / code directory.

So our first step is to create the module directory and the files needed to register the module.

1. Create the following directories:

• app / code / Magento_Ex
• app / code / Magento_Ex / Helloworld

The Magento_Ex folder is the module namespace, and Helloworld is the module name.

Note: If you do not have the code directory in your app directory, create it manually.

2. Now that we have a module directory, we need to create a module file in the app / code / Magento_Ex / Helloworld / etc directory with the following code:

3. To register the module, create the register.php file in the app / code / Magento_Ex / Helloworld directory with the following code:

4. Open your terminal and go to root Magento 2. Then run the following command

If you want to make sure the module is installed, you can go to Admin → Stores → Configuration → Advanced → Advanced and check if the module is in the list or you can open the /etc/config.php application and checks if an array exists for the keyword ‘Magento_Ex_Hellowworld’, and has the value set to 1.

Create a controller

1. First we need to define the route. To do this, create a route.xml file in the app / code / Magento_Ex / Helloworld / etc / frontend directory with the following code:

Here, we define a route and our route assigns an id of "helloworld" .

The frontName attribute will be the first part of our URL.

In Magento 2, URLs are built this way:

<frontName>/<controler_folder_name>/<control_group_name>

So in our example, the final URL would look like this:

hellowworld/index index

2. Now we create the index.php controller file in the app / code / Magento_Ex / Helloworld / Controller / Index directory with the following code:

In Magento 1, each controller can have many actions, but not in Magento 2. In Magento 2, every action has its own class that implements the execute() .

Create a block

We will create a simple block class with the getHelloWorldTxt() method that returns the string “Hello world”.

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

Create layout and template files

In Magento 2, layout and template files are placed in the view directory within your module. In the view directory, we can have three subdirectories: adminhtml , base and frontend .

The adminhtml directory is used for admin, the frontend directory is used for frontend and the base directory is used for both, admin and frontend.

1. First, we will create a file helloworld_index_index.xml in app / code / Magento_Ex / Helloworld / view / frontend / layout with the following code:

Each page has a layout layout and for our controller action, the layout handling is helloworld_index_index.xml. You can create a layout configuration file for all layout handling.

In our layout file, we added a block to the content container and set our block’s template helloworld.phtml, which this template will create in the next step.

2. Create a helloworld.phtml file in app / code / Magento_Ex / Helloworld / view / frontend / templates with the following code:

The $ this variable is pointing to our block class and is calling the getHelloWorldTxt () method, which returns a string “Hello world!”. Open the URL / helloworld / index / index in your browser and you will see a string “Helloworld!” appears on the screen.

Hopefully this article will help you understand more about the basic operations in Magento 2. Thank you for watching.