Tutorial: Magento2 – Hello World

The current Magento2 version is 2.0.0.0-dev45 and I would like to build a simple HelloWorld! extension. I guess the current version isn’t that different to Magento1 and maybe it doesn’t make that much sense to write this right now, but I just want to show the little difference in this moment.

The source tree

|- app
   |- code
      |- Lesti
         |- HelloWorld
            |- Block
               |- Hello.php
            |- controllers
               |- IndexController.php
            |- etc
               |- config.xml
            |- Helper
               |- Data.php
            |- locale
               |- de_DE
                  |- Lesti_HelloWorld.csv
            |- view
               |- frontend
                  |- layout
                  |  |- helloworld_index_index.xml
                  |- helloworld.phtml

Let’s start with the Lesti/HelloWorld/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Lesti_HelloWorld>
            <version>2.0.0.0</version>
            <active>true</active>
            <depends>
                <Mage_Core/>
            </depends>
        </Lesti_HelloWorld>
    </modules>
</config>

That is mostly everything we need for a modul in Magento. The main part is the same as in Magento1, but now we also have the active and the depends tag in config.xml. I did write a post about it. Let’s add a controller to Magento. Here is Lesti/HelloWorld/controllers/IndexController.php.

<?php
class Lesti_HelloWorld_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        echo 'Hello World!';
    }
}

To find this controller Magento needs a router in config.xml. Please add the frontend tag in Lesti/HelloWorld/etc/config.xml.

<?xml version="1.0"?>
<config>
    <!-- ... -->
    <frontend>
        <routers>
            <helloworld>
                <use>standard</use>
                <args>
                    <module>Lesti_HelloWorld</module>
                    <frontName>helloworld</frontName>
                </args>
            </helloworld>
        </routers>
    </frontend>
</config>

Mostly the same as in Magento1. We need a unique tag for our router (helloworld) a module and a frontName. The frontName is the first part of the uri. In my example http://magento.dev/helloworld. Please don’t forget to refresh the cache or disable the cache and now you should see this in your browser.

Hello World!

But that isn’t thing we wanted. We can’t see anything from Magento layout. So let’s add the render the layout in the controller Lesti/HelloWorld/controllers/IndexController.php.

<?php
class Lesti_HelloWorld_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();
    }
}

The browser should show a blank Magento page without any HelloWorld!. Let’s edit the layout and add our own block. Please create file Lesti/HelloWorld/view/frontend/layout/helloworld_index_index.xml.

<?xml version="1.0"?>
<layout version="0.1.0">
    <helloworld_index_index translate="label" type="page">
        <label>Hello World Home Page</label>
        <reference name="content">
            <block type="Lesti_HelloWorld_Block_Hello" name="helloworld" template="Lesti_HelloWorld::helloworld.phtml">
            </block>
        </reference>
    </helloworld_index_index>
</layout>

In Magento1 we had to show Magento thw path to layout files. Magento2 is seaching for this files named by view/layout/<frontName>_<controller>_<action>.xml. The content of the xml is mostly the same in Magento1. Just one feature I have found in this moment, but won’t show in this tutorial. You can add a parent attribute to helloworld_index_index tag and your xml file will extend from a parent file. I guess very useful. We only add a block. The type isn’t as in Magento1 relative to any block tag in config.xml. Now we put the hole class in it. The template attribute needs just the module seperated with :: from the template file. Magento2 will find your template file in your layout directory. I would prevere a seperated template directory, but Magento2 doesn’t make such a rule. Let’s create Lesti/HelloWorld/Block/Hello.php.

<?php
class Lesti_HelloWorld_Block_Hello extends Mage_Core_Block_Template
{
    public function getWelcome()
    {
        $date = new Zend_Date();
        $hour = (int) $date->toString('HH');
        if ($hour >= 6 && $hour < 12) {
            return Mage::helper('Lesti_HelloWorld_Helper_Data')->__('Good Morning World!');
        } elseif ($hour < 24) {
            return Mage::helper('Lesti_HelloWorld_Helper_Data')->__('Hello World!');
        } else {
            return Mage::helper('Lesti_HelloWorld_Helper_Data')->__('Good Night World!');
        }
    }
}

With blocks the same, Magento2 didn’t need anymore a guided tag in config.xml to find a block, cause we put the hole class into the layout file. I put a little bit idiotic logic into the block just to show what can be done in such a block. We only want to have string with a message, the message changes with the current day time. We want to translate everything that comes to the user. Magento uses helper to translate. Magento1 also did need a helpers tag in config.xml, but Magento2 just want the hole class name to find a helper. Please create Lesti/HelloWorld/Helper/Data.php

<?php
class Lesti_HelloWorld_Helper_Data extends Mage_Core_Helper_Abstract
{
 
}

The same thing as in Magento1. The helper just needs to extend from Mage_Core_Helper_Abstract. We have to show Magento were to find the translations in Lesti/HelloWorld/etc/config.xml.

<?xml version="1.0"?>
<config>
    <!-- ... -->
    <frontend>
        <!-- ... -->
        <translate>
            <modules>
                <Lesti_HelloWorld>
                    <files>
                        <default>Lesti_HelloWorld.csv</default>
                    </files>
                </Lesti_HelloWorld>
            </modules>
        </translate>
    </frontend>
</config>

Here just one translation into german in Lesti/HelloWorld/locale/de_DE/Lesti_HelloWorld.csv

"Good Morning Magento!","Guten Tag Magento!"
"Hello World!","Hallo Magento!"
"Good Night Magento!","Gute Nacht Magento!"

Now we just have to add your template file Lesti/HelloWorld/view/frontend/helloworld.phtml.

<h1><?php echo $this->getWelcome(); ?></h1>

That’s all. If you clean the cache and refresh the browser, you should see something like that.

helloworld

Like I said in the beginning of the post, there aren’t that much changes at the current time and many things are almost missing. I guess the frontend will become it’s big changes. Maybe with the next version of Magento2.

Download?

github

3 thoughts on “Tutorial: Magento2 – Hello World”

  1. Hello Gordon,

    Thanks for the example. I’ve tried it and some things are incorrect, maybe you can change them.

    * The /view/frontend/ structure in The Source Tree is incorrect, this is how it is supposed to look:
    |- view
    |- frontend
    |- layout
    | |- helloworld_index_index.xml
    |- helloworld.phtml
    The path in your documentation is correct.

    * The /locale/en_US/Lesti_HelloWorld.php is a .csv file, so it has to be Lesti_HelloWorld.csv. You also refer to it as Lesti/HelloWorld/locale/de_DE/Lesti_HelloWorld.xml instead of Lesti_HelloWorld.csv.

    But again, thanks for helping me with my first Magento2 extension!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>