How to create a Hello world extension in Magento2

May 7, 2013   //   by kdecom   //   magento-extension, magento2, magento2-tutorial  //  2 Comments

What is Magento2?

Magento is a one of the best available Open source with a lot of featured E commerce platform. Best thing about the magento is it is designed to to be completely extendable. Specially magento 2 is the more better and more secure version and best thing in magento2 is it use jQuery instead of prototype.

Main concept for this extension is just to understand new magento2 folder structure and this is one step to start the developing magento2 extension.

How to create a Hello world extension in Magento2

If you don’t have a Magento2 Code base please¬†download¬†it from here.

First of all I will show you what is the new folder structure for the magento2 extension.

 

magento2-extension-folder-stucture-with-file

So now all code goes inside one folder structure which i prefer is an good idea then the all other magento previous version.

Now we are start creating files for the magento2 Hello World Extension.

First of all we will create a config file for magento2 which goes inside the

etc/config.xml

Create a file with below content.

<?xml version="1.0"?>
<config>
    <modules>
        <Kdecom_HelloWorld>
            <version>1.0.0.0</version>
            <active>true</active>
        </Kdecom_HelloWorld>
    </modules>
    <frontend>
        <routers>
            <helloworld>
                <use>standard</use>
                <args>
                    <module>Kdecom_HelloWorld</module>
                    <frontName>hello-world</frontName>
                </args>
            </helloworld>
        </routers>
        <layout>
            <updates>
                <helloworld module="Kdecom_HelloWorld">
                    <file>layout.xml</file>
                </helloworld>
            </updates>
        </layout>
    </frontend>
</config>

First

<modules>
    <Kdecom_HelloWorld>
        <version>1.0.0.0</version>
        <active>true</active>
    </Kdecom_HelloWorld>
</modules>

This block of code is just to enable and disabled your extension and specify your extension version.

<routers>
    <helloworld> <!-- This tag not that important but it has to be unique -->
        <use>standard</use>
        <args>
            <module>Kdecom_HelloWorld</module>
            <frontName>hello-world</frontName>
        </args>
    </helloworld>
</routers>

Route Xml Tag is used in magento2 to understand which controller i should get execute.
So from above route when you execute 
http://SITENAME/index.php/hello-world that will execute our module IndexController with IndexAction.

Another Example??
http://SITENAME/index.php/hello-world/CONTROLLER/ACTION-NAME (i hope it make sense) If not then don't worry you will see  an similar example in this module.
<layout>
    <updates>
        <helloworld module="Kdecom_HelloWorld">
            <file>layout.xml</file>
        </helloworld>
    </updates>
</layout>

This will defined our layout.xml file but now path for your layout file is been changed to /view/frontend/layout.xml

but if you have it like this  <file>kdecom/layout.xml</file> then it will look for your file inside the /view/frontend/kdecom/layout.xml
Next Step

Create a layout file which goes inside the view/frontend/layout.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <hello_world_index translate="label" type="page" parent="default">
        <label>Kdecom Hello World</label>
        <reference name="content">
            <block type="Kdecom_HelloWorld_Block_Index"  name="hello_world_index" template="index.phtml"/>
        </reference>
    </hello_world_index>
    <hello_world_test translate="label" type="page" parent="default">
        <label>Kdecom Hello World New Controller Action</label>
        <reference name="content">
            <block type="Kdecom_HelloWorld_Block_Index"  name="hello_world_test" template="test.phtml"/>
        </reference>
    </hello_world_test>
</layout>

Next Step is to create a IndexController.php file which goes inside the

controllers/IndexController.php

class Kdecom_HelloWorld_IndexController extends Mage_Core_Controller_Front_Action {
    public function indexAction() {
        $this->loadLayout();
        $this->loadLayout('hello_world_index');
        $this->renderLayout();
    }
    public function testAction() {
        $this->loadLayout();
        $this->loadLayout('hello_world_test');
        $this->renderLayout();
    }

}

Next Step :- Create a index.phtml file which goes inside the

view/frontend/index.phtml

echo $this->getHelloWorld();

Next Step:- Create a Index.php file which goes inside the

class Kdecom_HelloWorld_Block_Index extends Mage_Catalog_Block_Product_Abstract {

    public function getHelloWorld() {
        return "Hello World";
    }

    public function getHelloWorldTest() {
        return "Hello World Test Action";
    }

}

Next Last Step:-

Create test.phtml file

echo $this->getHelloWorldTest();

As Soon as you finished all the above step then you should try to check if your module works fine or not.

http://YOURSITENAME/index.php/hello-world

In my case it was

Live Demo

http://www.kdecom.com/mage2/helloworld

http://www.localhost.com/mage2/index.php/hello-world/

Here is what i am seeing in my screen.

magento2-hello-world-output-index-action

This will execute controller testAction ..

Live Demo

http://www.kdecom.com/mage2/helloworld/index/test

http://YOURSITENAME/index.php/hello-world/index/test

http://www.localhost.com/mage2/index.php/hello-world/index/test

Here is what i am seeing in my screen.

magento2-hello-world-output-test-action

If anyone has any problem please comment below to say any words.

 

[freebiesub download=” http://www.kdecom.com/wp-content/uploads/2013/05/kdecom-helloworld.zip”]

2 Comments

  • Hi Sir,

    Thanks for quick reference for magento module development but it’s not working on my side I have just download your code and put inside my community folder and access like this

    http://localhost/mag/helloworld

    Note: I am running this on my localhost mag is site name (folder name).

    It’s given me 404 error message. Please give me your valuable guidance then i can learn magento module development.

    I am looking forward to yo.

    Thanks
    Rehan

    • Hi Rehan,

      first of all are you trying to developed in Magento 2? version or latest magento 1.8 version?

      thanks

Leave a comment

css.php