Home » Magento Extensions » Full tutorial: Step by Step how to create “Hello World” basic module in Magento

Full tutorial: Step by Step how to create “Hello World” basic module in Magento

In the previous article: Magento architecture, we understand that all functions of Magento were “modulized”, in other words, Magento is a set of modules perform different tasks. In this article, I will guide you to create a very basic “Hello World” module that contains full of major components that every Magento extension/module has.

Note: demo module is created in the local directory because Magento regularly releases new version (1.9.x now) and so, my code is not affected.

Before going into the main part, we need to disable the cache so that the changes in the new module will be displayed on the site without having to refresh the cache. To disable cache, go to Admin -> System -> Cache Management then select all cache and disable them.

After we finished necessary preparation, we will start to create a module named “Hello World” to the namespace is “Tutorialmagento”. Since this is the first module, so I will try to make everything as simple as possible so that you can understand. This module will print out the text “Hello world!” on frontend.

helloworld module magento example

Step 1: Create main folders of the module

First, we will create necessary folders that contain module files:

Step 2: Configuration file

Now we will create the configuration file for the module named Tutorialmagento_Helloworld.xml in the folder app / etc / modules

Explanation: This file will declare status of the module to Magento codePool system:

+ CodePool: local (code placed in the local folder, not community or core).

+ Active: true (module is active).

Step 3:

Create config.xml file in the directory app / code / local / tutorialmagento / HelloWorld / etc to declare the components of module to Magento system.

Explanation: In this configuartion file, we declared some information of the module:
+ Version: 1.0 – current version of the module
+ Module blocks are located in app/code/local/tutorialmagento/HelloWorld/Block (important, without this line we will be unable to use blocks of module)
+ Router or name of the module on frontend is helloworld
+ Frontend layout file is helloworld.xml

Step 4: Create blocks of the module “helloword”

Create file Helloworld.php in app/code/local/tutorialmagento/Helloworld with the following lines:

Step 5: Create template file helloworld.phtml

Create helloworld.phtml (template file) in app/design/frontend/default/default/template/helloworld with the following line:

Step 6: Layout file helloworld.xml

Create  helloworld.xml (layout file) in: app/design/frontend/default/default/layout

Explanation: In this layout file we just need to understand some of the following information:
+ Handle: helloworld_index_index
- Helloworld: router name (declared in the config.xml file)
- Index: controller name (not created controller: v)
- The last index is the action name (function in the controller index)
To understand the flow of Magento system, we will go into another tutorial but now we will simply understand that each handle is equivalent to the first link in magento. For example helloworld_index_index handle in this example it would be equivalent to http://yoursite.com/index.php/helloworld/index/index
+ block
- Type: path to the file block, in this example it is: “helloworld / helloworld” so the path to the block files is app/code/local/tutorialmagento/Hellowordl/Block/helloworld.

- Name: name of the block in the handle (to distinguish the block the other blocks)
- Template: this is the path to the template file that the other blocks map (link) to in this handle. After declaration like this, every template file using $this, the system will call the block HelloWorld (only in this handle).

Step 7:

Create IndexController.php in the directory app/code/local/tutorialmagento/helloworld/controllers

Why do I set the controller name as “index”? When users type in the shortened link in browser like this http://yoursite.com/helloworld, controller name and action name will be missing. In this case, the system will use IndexController  as the default controller and indexAction as default Action.
In the index action above, there’re only 2 commands:
+ $ This-> loadLayout (): used to load layout, block, template from layout files
+ $ This-> renderLayout (): render the interface from the block, according to the order that was preset in layout file

So we have just completed our very first module in Magento. Now we will see the results offline!
+ Copy source code directory to folder where you installed  Magento
+ Disable/refresh the cache before running
+ Visit the link http://yoursite.com/helloworld (with yoursite.com is your website, mine is localhost.com)
The result comes as below

helloworld module magento example

If you have any problems, feel free to leave inquries and I will respond immediately.
If find troubles while making the module, don’t worry, I have attached the modules files below, be happy!

About Brian Wilson

avatar
Brian is a freelance Magento developer with 5 years of experience with customizing Magento extensions, magento themes. He's interested in sharing Magento Tutorials to the community

19 comments

  1. avatar

    what hell this is not working Brian

  2. avatar

    thanks for this tutorial…..all thing are working but helloworld.phtml not working means template not showing…can u help me

  3. avatar

    After a few hours an a lot of googling I finally got this to work!

    I think the problem a lot of newbies have trying to get these ‘hello world’ tutorials to work is that the tutorials are written for an earlier version of Magento, but most folks will download the latest version (1.9) and the design directory defaults to ‘rwd/default’, not ‘default/default’.

    On top of that major issue, if you copy and paste from examples such as this, you end up with all kinds of errors.

    In this tutorial, don’t copy the ‘

    ', obviously, and  the configuration file has funny quotes in the 1st XML line, which will give a 404 page if you don't change them to real quotes.
  4. avatar

    Hey, I just downloaded your Hello Files, installed them and ‘nothing’ except Sorry 404 error. the Module ‘is’ visible in the Back-end. I’m using Magento 1.9.1 – a completely default install. I have so far tried about 5 different Helloworld tutorials and the best result I have achieved was ‘no text’ just the empty page (regardless of which url conbfig I try – it works only if I echo it directly from the controller – but then the default template does not load..
    I’m beginning to see why I was annoyed by Magento years ago – seems like its user friendliness has not improved much – gotta love Joomla!
    As viable suggestions as to why none of them seem to work for me would be much appreciated.
    Thnx…

  5. avatar

    These steps need a revisit as it doesn’t work in present condition. Hello world not printed or displayed on screen

  6. avatar

    Nice tutorial

  7. avatar

    Looking for a magento store developer. Please contact me if you can set-up a magento store to later use for a native mobile app

  8. avatar

    I am not getting 404 error but hello world string is not getting printed. Please help

  9. avatar

    Hi,
    I Followed above instruction. in output magento layout dispayed but instead of show helloworld it shows

    404 Not found 1 Whoops, our bad… error displayed guide me to resolve….

  10. avatar

    Hi,

    i followed all the above rules but it’s not working

  11. avatar

    Hi Brian ,
    There is a typo in step 6 and step 5 where the name of frontend are different. Also, this tutorial does not follow the standards of magento where first letter of module name should be in uppercase

  12. avatar

    I have follow all the instruction as you suggest in above. But unable to seeing out put.

  13. avatar

    i do not show template ??

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top