Complete tutorial: Step by Step how to produce “Hello World” basic component in Magento

In the previous post: Magento architecture, we realize that all functions of Magento were “modulized”, in other words, Magento is a set of modules carry out different tasks. In this article, I am going to guide you to create a very basic “Hello World” module that contains filled with major components that every Magento extension/module has.

Note: demonstration module is created in the local directory site because Magento regularly produces new version (1. nine. x now) and so, the code is not affected.

Prior to going into the main part, we have to disable the cache so that the modifications in our new module will be shown on the site without having to refresh cache memory. To disable cache, visit Admin ->   Program ->   Cache Administration then select all refuge and disable them.

Right after we finished necessary preparing, we will start to create a element named “Hello World” towards the namespace is “Tutorialmagento”. Due to the fact that this is the first module, therefore i will try to make everything as basic as possible so that you can understand. This particular module will print out the textual content “Hello world! ” upon frontend.

Step one: Create main folders from the module

app\code\local\tutorialmagento\Helloworld

 

app\code\local\tutorialmagento\Helloworld\controllers

 

app\code\local\tutorialmagento\Helloworld\etc

 

app\code\local\tutorialmagento\Helloworld\etc\config.xml

 

app\code\local\tutorialmagento\Helloworld\Helper

 

app\code\local\tutorialmagento\Helloworld\Model

Step 2: Configuration document

Now we will create the actual configuration file for the component named Tutorialmagento_Helloworld. xml within the folder app / and so on / modules

<?xml version=”1.0″?>

<config>

<modules>

<tutorialmagento_Helloworld>

<active>true</active>

<codePool>local</codePool>

</tutorialmagento_Helloworld>

</modules>

</config>

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

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

+ Active: correct (module is active).
Step three:

Create config. xml record in the directory app or code / local and tutorialmagento / HelloWorld suggestions etc to declare the constituents of module to Magento system.

Step 3:

Create config. xml file in the directory site app / code or local / tutorialmagento and HelloWorld / etc in order to declare the components of element to Magento system.

</pre>

<?xml version="1.0"?>

<config>

<modules>

<tutorialmagento_Helloworld>

<version>0.1.0</version>

</tutorialmagento_Helloworld>

</modules>

<frontend>

<routers>

<helloworld>

<use>standard</use>

<args>

<module>tutorialmagento_Helloworld</module>

<frontName>helloworld</frontName>

</args>

</helloworld>

</routers>

<layout>

<updates>

<helloworld>

<file>helloworld.xml</file>

</helloworld>

</updates>

</layout>

</frontend>

<global>

<blocks>

<helloworld>

<class>tutorialmagento_Helloworld_Block</class>

</helloworld>

</blocks>

</global>

</config>

<pre>

Step 4 four: Create blocks of the component “helloword”

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

</pre>

<?php

class tutorialmagento_Helloworld_Block_Helloworld extends Mage_Core_Block_Template

{

/**

* prepare block's layout

*

* @return tutorialmagento_Helloworld_Block_Helloworld

*/

public function _prepareLayout()

{

return parent::_prepareLayout();

}

}

<pre>

Step 5: Produce template file helloworld. phtml

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

<?php echo $this->__('Hello world!') ?>

Step 6: Design file helloworld. xml

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

<?xml version="1.0"?>

<layout version="0.1.0">

 <helloworld_index_index>

 <reference name="content">

 <block type="helloworld/helloworld" name="helloworld" template="helloworld/helloworld.phtml" />

 </reference>

 </helloworld_index_index>

</layout>

Explanation: Within this layout file we simply need to understand some of the following info:
+ Handle: helloworld_index_index
-- Helloworld: router name (declared in the config. xml file)
- Index: controller title (not created controller: v)
- The last index may be the action name (function inside the controller index)
To understand the particular flow of Magento program, we will go into another guide but now we will simply realize that each handle is equivalent to the very first link in magento. For instance helloworld_index_index handle in this instance it would be equivalent to http://yoursite.com/index.php/helloworld/index/index
& block
- Type: road to the file block, within this example it is: “helloworld suggestions helloworld” so the path to typically the block files is app/code/local/tutorialmagento/Hellowordl/Block/helloworld.

- Name: name in the block in the handle (to distinguish the block another blocks)
- Template: this is actually the path to the template file that this other blocks map (link) to in this handle. Right after declaration like this, every theme file using $this, the device will call the prevent HelloWorld (only in this handle).

Step 7:

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

<?php

 

class tutorialmagento_Helloworld_IndexController extends Mage_Core_Controller_Front_Action

{

 /**

 * index action

 */

 public function indexAction()

 {

 $this->loadLayout();

 $this->renderLayout();

 }

}

The reason why do I set the control name as “index”? Whenever users type in the reduced link in browser such as this http://yoursite.com/helloworld, controller name as well as action name will be lacking. In this case, the system will use IndexController as the default controller and also indexAction as default Activity.
In the index action over, there’re only 2 instructions:
+ $ This->   loadLayout (): used to masse layout, block, template through layout files
+ dollar This->   renderLayout (): render the interface through the block, according to the order which was preset in layout data file

So we have just completed our own very first module in Magento. Now we will see the results off-line!
+ Copy source program code directory to folder to installed Magento
+ Disable/refresh the cache before running
and up. Visit the link (with yoursite. com is your website, my own is localhost. com)
The end result comes as below
For those who have any problems, feel free to keep inquries and I will react immediately.
If find problems while making the module, do not worry, I have attached the segments files below, be pleased!