Category Archives: E-commerce

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.