Hello World, or how to build the first module in Magento 2.1.5

Read this post to find out how to easily build your first module in Magento 2.1.5. By way of example, let me show you how to create a module that displays a “Hello World” message. To do this, we’ll use actions and a controller.

Prepare

We’ll use Magento v. 2.1.5 for this job. Before starting, look at the following two points, which may also be helpful in this and other tasks related to working with Magento 2.

1. Disabling the cache

Disabling the cache is very helpful in the process of building a new module. This will save you the trouble of flushing the cache each time you make a change and want to see the effects of your work.

How can you disable the cache?

Admin → System → Cache Management → check all and disable.

2. Magento developer mode

Enable the developer mode to view all errors related to the production of new code.

How can you disable the developer mode?

Go to the root directory and run the command:

$ php bin/magento deploy:mode:set developer

Create a module

Key configuration

Unlike the first version, in Magento 2 you put all modules in appropriate namespaces in the “app/code” directory, e.g. “app/code/Foo/Bar”, so your first step will be to create files to register a new module:

1. Create appropriate folders:

– app/code/Unity

– app/code/Unity/Helloworld

The Unity directory is the namespace, while Helloworld is the module name.

Note! – if you don’t have a code directory, create one.

2. After you’ve set up the folders, create the module.xml file in the app/code/Unity/Helloworld/etc directory and place the 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="Unity_Helloworld" setup_version="1.0.0"></module>
</config>

3. To register the module, create the registration.php file in app/code/Unity/Helloworld/directory and place the code there:

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

4. Open the terminal and, in the main magento directory, run the command:

$ php bin/magento setup:upgrade

To check if the module is installed correctly, in the Administration Panel go to:

Admin → Stores → Configuration → Advanced → Advanced, find the module and check its status.

Create a controller

1. First, define the router by creating the routers.xml file in the app/code/Unity/Helloworld/etc/frontend directory and use the code below:

<?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="Unity_Helloworld" />
        </route>
    </router>
</config>

Magento urls are created as: <frontName>/<controler_folder_name>/<controller_class_name>

So in our example, it will be:

helloworld/index/index

2. Now create actions.  In Magento 2, each controller can have only one action (the previous version allowed multiple actions). Create the Index.php file in app/code/Unity/Helloworld/Controller/Index,and add the following code:


&lt;?php
 
namespace Unity\Helloworld\Controller\Index;
 
use Magento\Framework\App\Action\Context;
 
class Index extends \Magento\Framework\App\Action\Action
{
    protected $_resultPageFactory;
 
    public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
    {
        $this-&gt;_resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }
 
    public function execute()
    {
        $resultPage = $this-&gt;_resultPageFactory-&gt;create();
        return $resultPage;
    }
}

Create a block

In this section, create a simple block using the “getText” method that will return a string of Hello World characters.

1. Create the Helloworld.php file in app/code/Unity/Helloworld/Block, and add the following code:


&lt;?php
namespace Unity\Helloworld\Block;
 
class Helloworld extends \Magento\Framework\View\Element\Template
{
    public function getText()
    {
        return 'Hello world!’;
    }
}

Create layout and template files

In Magento 2, layout and template files are kept in the module’s view directory. A directory can have three subdirectories: adminhtml, base and frontend.

• adminhtml – used for the Admin Panel

• frontend – used for changes visible to the client

• base – has default files for the above directories

1. First, create helloworld_index_index.xml in app/code/Unity/Helloworld/view/frontend/layout, and add the code below:

&lt;page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="1column"&gt;
    &lt;body&gt;
        &lt;referenceContainer name="content"&gt;
            &lt;block class="Unity\Helloworld\Block\Helloworld" name="helloworld" template="helloworld.phtml" /&gt;
        &lt;/referenceContainer&gt;
    &lt;/body&gt;
&lt;/page&gt;

2. Next, create the helloworld.phtml template file in app/code/Unity/Helloworld/view/frontend/templates,and add the code to it:

&lt;h1&gt;&lt;?php echo $this-&gt;getText(); ?&gt;&lt;/h1&gt;

Look at the result.

At helloworld/index/index in your browser you should see the following page:

Our Experts
/ Knowledge Shared

16.02.2021

Why Should You Develop Mobile Applications with AWS?

Mobile Solutions

Today’s mobile apps have a lot of requirements, increasingly in the areas of performance, scalability and, of course, cost-efficiency. In these areas, we need a sophisticated infrastructure to support the app.   After all, the frontend of the app is already based on the user’s hardware, but the backend is where we have the most control....

02.02.2021

The 7 Deadly Signs of Digital Debt

Industries

Previously, we spoke about the rising awareness of Digital Debt thanks to recent events. This time, we want to help point out the most common signs of Digital Debt in your own company or operations.  After all, there’s a good chance the issues that produce such debt have gradually become part of day-to-day business. So much so, in fact,...

26.01.2021

Digital Debt / The Business Killer That’s Spreading

Industries

Some businesses were happy with being offline… until they were not. Recent events have pushed the issue of digital debt into the cold light of day.  The hard truth is simple: companies and other entities have suddenly found themselves in a reality where offline operations are no longer the backbone to rely on. This shift was significantly...

Expert Knowledge
For Your Business

As you can see, we've gained a lot of knowledge over the years - and we love to share! Let's talk about how we can help you.

Contact us

<dialogue.opened>