Create your first module in Magento 2

ITdeation Technologies LLP, Nausif Maredia

New to Magento 2?

Here's the guide on “How to create your very first module in Magento 2?

Folder structure of our basic module.

Add code inside app/code/{{Vendor Name}}/{{Module Name}}

For example,

app/code/Itdeation/HelloWorld/

To get a list of modules pre-installed after installing Magento 2, run following command in terminal

php bin/magento module:status

To get the module listed, create following two files

  •  registration.php

  • module.xml

1. Create Registration

First, register the module by adding registration.php file here

app/code/Itdeation/HelloWorld/registration.php

Add following code in registration.php

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Itdeation_HelloWorld',
    __DIR__
); 


2. Create Module xml

Add file module.xml here

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

Add following code to module.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Itdeation_HelloWorld" setup_version="0.0.1"> 
    </module>
</config> 

Now run following command again

php bin/magento module:status



Our module is now listed under disabled modules.

Run following command to enable it

php bin/magento module:enable Itdeation_HelloWorld

And then upgrade the module by running following command

php bin/magento setup:upgrade


3. Create a Router

Module is now enabled, let's print “Hello World” on front-end.

Define a router to hit a custom url.

Create routes.xml here

Itdeation/HelloWorld/etc/frontend/routes.xml

Add following code in routes.xml

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

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

The frontName attribute is going to be the first part of our URL.

In Magento 2 URL’s are formed as:

<frontName>/<controller_folder_name>/<controller_class_name>

So in our example, the URL will look like this:

helloworld/index/index

4. Create a Controller

Let's create Index.php here,

Itdeation/HelloWorld/Controller/Index/Index.php
Add below code in Index.php

<?php

namespace Itdeation\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->_resultPageFactory  =$resultPageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultPage = $this->_resultPageFactory->create();
        return $resultPage;
    }
}




5. Create a Block

Create a block that will return "Hello World" string to be rendered on screen.

Create a HelloWorld.php file here

Itdeation/HelloWorld/Block/HelloWorld.php
Add following code to HelloWorld.php

<?php
namespace Itdeation\HelloWorld\Block;

class HelloWorld extends \Magento\Framework\View\Element\Template
{
    public function getHelloWorldString()
    {
        return 'Hello World';
    }
}



Create a phtml file to call the above block and get the Hello World string.


6. Create phtml file

Create view.phtml here

Itdeation/HelloWorld/view/frontend/templates/view.phtml

Add following code to view.phtml

<?php echo $block->getHelloWorldString(); ?>


7. Create a layout

Create a layout file to tell magento which controller to use and which view and block files to use on hitting url.

Create layout file helloworld_index_index.xml here

Itdeation/HelloWorld/view/frontend/layout/helloworld_index_index.xml

Add below code in helloworld_index_index.xml

<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="Itdeation\HelloWorld\Block\HelloWorld" name="helloworld" template="view.phtml" />
        </referenceContainer>
    </body>
</page>

Clean the cache by running below command in terminal

php bin/magento cache:flush

Hit the following url in browser

helloworld/index/index

Here's the output on frontend.



Voila! You have successfully created your first module in magento 2.