Magento 2 Module Development - Simple Hello World Module

Magento 2 Module development or Magento 2 Hello World trends is increase rapidly while Magento release official version. That why we - Mageplaza - are wring about a topic that introduces how to create a simple Module.

As you know, the module is a directory that contains blocks, controllers, models, helper, etc - that are related to a specific business feature. The etc folder contains admin ACL, admin menu, configuration . In Magento 2, modules will be live in app/code directory of a Magento installation, with this format: app/code/<Vendor>/<ModuleName>. Now we will follow this steps to create a simple module which work on Magento 2 and display Hello World.

Basic Topics

• Create Controller
• Create Model
• Create View
• Admin Menu
• Configuration
• Admin Grid

Create Hello World module for Magento 2

To create Hello World module, you need to complete the following high-level steps:

• Step 1: Create the folder of Hello World module
• Step 2: Create etc/module.xml file
• Step 3: Create etc/registration.php file
• Step 4: Enable the module

Step 1: Create the folder of Hello World module

Name of the module is defined as VendorName_ModuleName. First part is name of the vendor and last part is name of the module: For example: Magento_HelloWorld, Mageplaza_PdfInvoice. Focus on following guide to create the folders:

  app/code/Mageplaza/HelloWorld

Step 2: Create etc/module.xml file.

Then, it is necessary to create etc folder and add the module.xml file

  app/code/Mageplaza/HelloWorld/etc/module.xml

Contents would be:

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

Step 3: Create etc/registration.php file

In this step, we will add registration.php as following guide:

  app/code/Mageplaza/HelloWorld/registration.php

Contents would be:

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

Step 4: Enable the module

Finish the step 3, we have already created the HelloWorld module. And we will enable this module in this step

After create the module if you run the command as:

  php bin/magento module:status

You should see the module is disable now:

List of disabled modules: Mageplaza_HelloWorld

Follow exact guide to enable the module right now, let run the command as:

  php bin/magento module:enable Mageplaza_HelloWorld

Or other way, you can access the file:

  app/etc/config.php

You will see a long list of modules there, just add your module as well

  ...
  'Mageplaza_HelloWorld' => 1, 
  ...

Your module should be available now.

After this step, when you open your website in browser you will get an error saying

Please upgrade your database: Run bin/magento setup:upgrade from the Magento root directory.

Let run the command:

  php bin/magento setup:upgrade

After complete,when you open your website in browser you will see the layout of the website is broken.

Please run the deloy command line to fix it.

php bin/magento setup:static-content:deploy

After deploy completed, you can also see your module from backend at System Configuration -> Advanced -> Disable Modules Output.

Now, we will create a controller to test module.

Before create a controller, we will create a route for HelloWorld module.

Route’s in magento are divided into 3 parts: Route frontname, controller and action as following example:

http://mageplaza.com/index.php/frontname/controller/action

To add route, it is necessary to create routes.xml file

app/code/Mageplaza/HelloWorld/etc/frontend/routes.xml

since this is a frontend route, we added it in frontend/ folder else we need to add it to adminhtml/ folder

Content would be:

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

After defining the first part of the route, the URL will be displayed as:

  http://<yourhost.com>/helloworld/*

E.g: http://localhost/helloworld/*

Then, we will continue to create the controller and action

The folder and file you need to create is:

app/code/Mageplaza/HelloWorld/Controller/Index/Test.php

Contents would be:

<?php
namespace Mageplaza\HelloWorld\Controller\Index;

class Test 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";
		exit;
	}
}

After completed, please run php bin/magento cache:clean to check result.

Your URL now should be as:

 http://<yourhost.com>/helloworld/index/test

After finish all steps, the output Hello World should be displayed in your browser when you open the URL. We hope our guide is very useful and effective for you. Any questions, feel free to leave a commend below. In the next tutorial, you will learn how to create a controller.