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

<div dir="ltr" style="text-align: left;" trbidi="on"> 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.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9euh4o00erHi6QjB-iGkpL6sFaWhZhp-KPM2eRhOSKeWjfwgWxXIMkTj-Q4ALBCHJ-peuVYcYjsI1jCXD8PfxVLMMb6fn87kD167bzspUR5onM1VPaSDCT0oiijK4RJyg7KZTLYC2_0/s1600/magento-tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9euh4o00erHi6QjB-iGkpL6sFaWhZhp-KPM2eRhOSKeWjfwgWxXIMkTj-Q4ALBCHJ-peuVYcYjsI1jCXD8PfxVLMMb6fn87kD167bzspUR5onM1VPaSDCT0oiijK4RJyg7KZTLYC2_0/s400/magento-tutorial.png" width="400" /></a></div> <br /><br />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.<br /><br />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.<br /><br />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.<br /> <br /><b>Step one: Create main folders from the module</b><br /> <br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-line" id="crayon-570f11a62416b272427157-1"> <span class="crayon-v">app</span><span class="crayon-sy">\</span><span class="crayon-v">code</span><span class="crayon-sy">\</span><span class="crayon-v">local</span><span class="crayon-sy">\</span><span class="crayon-v">tutorialmagento</span><span class="crayon-sy">\</span><span class="crayon-e">Helloworld</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62416b272427157-2">  </div> <div class="crayon-line" id="crayon-570f11a62416b272427157-3"> <span class="crayon-v">app</span><span class="crayon-sy">\</span><span class="crayon-v">code</span><span class="crayon-sy">\</span><span class="crayon-v">local</span><span class="crayon-sy">\</span><span class="crayon-v">tutorialmagento</span><span class="crayon-sy">\</span><span class="crayon-v">Helloworld</span><span class="crayon-sy">\</span><span class="crayon-e">controllers</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62416b272427157-4">  </div> <div class="crayon-line" id="crayon-570f11a62416b272427157-5"> <span class="crayon-v">app</span><span class="crayon-sy">\</span><span class="crayon-v">code</span><span class="crayon-sy">\</span><span class="crayon-v">local</span><span class="crayon-sy">\</span><span class="crayon-v">tutorialmagento</span><span class="crayon-sy">\</span><span class="crayon-v">Helloworld</span><span class="crayon-sy">\</span><span class="crayon-e">etc</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62416b272427157-6">  </div> <div class="crayon-line" id="crayon-570f11a62416b272427157-7"> <span class="crayon-v">app</span><span class="crayon-sy">\</span><span class="crayon-v">code</span><span class="crayon-sy">\</span><span class="crayon-v">local</span><span class="crayon-sy">\</span><span class="crayon-v">tutorialmagento</span><span class="crayon-sy">\</span><span class="crayon-v">Helloworld</span><span class="crayon-sy">\</span><span class="crayon-v">etc</span><span class="crayon-sy">\</span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-e">xml</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62416b272427157-8">  </div> <div class="crayon-line" id="crayon-570f11a62416b272427157-9"> <span class="crayon-v">app</span><span class="crayon-sy">\</span><span class="crayon-v">code</span><span class="crayon-sy">\</span><span class="crayon-v">local</span><span class="crayon-sy">\</span><span class="crayon-v">tutorialmagento</span><span class="crayon-sy">\</span><span class="crayon-v">Helloworld</span><span class="crayon-sy">\</span><span class="crayon-e">Helper</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62416b272427157-10">  </div> <div class="crayon-line" id="crayon-570f11a62416b272427157-11"> <span class="crayon-v">app</span><span class="crayon-sy">\</span><span class="crayon-v">code</span><span class="crayon-sy">\</span><span class="crayon-v">local</span><span class="crayon-sy">\</span><span class="crayon-v">tutorialmagento</span><span class="crayon-sy">\</span><span class="crayon-v">Helloworld</span><span class="crayon-sy">\</span><span class="crayon-v">Model</span></div> </div> <br /><b>Step 2: Configuration document</b><br /><br />Now we will create the actual configuration file for the component named Tutorialmagento_Helloworld. xml within the folder app / and so on / modules<br /> <br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-line" id="crayon-570f11a624175295954227-1"> <span class="crayon-ta"><?</span><span class="crayon-e">xml </span><span class="crayon-i">version</span><span class="crayon-o">=</span>”<span class="crayon-cn">1.0</span>″<span class="crayon-ta">?></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624175295954227-2"> <span class="crayon-o"><</span><span class="crayon-v">config</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624175295954227-3"> <span class="crayon-o"><</span><span class="crayon-v">modules</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624175295954227-4"> <span class="crayon-o"><</span><span class="crayon-v">tutorialmagento_Helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624175295954227-5"> <span class="crayon-o"><</span><span class="crayon-v">active</span><span class="crayon-o">></span><span class="crayon-t">true</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">active</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624175295954227-6"> <span class="crayon-o"><</span><span class="crayon-v">codePool</span><span class="crayon-o">></span><span class="crayon-v">local</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">codePool</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624175295954227-7"> <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">tutorialmagento_Helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624175295954227-8"> <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">modules</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624175295954227-9"> <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">config</span><span class="crayon-o">></span></div> </div> <br />Explanation: This particular file will declare position of the module to Magento codePool system:<br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> + CodePool: local (code placed in the neighborhood folder, not community or even core).</div> <br /> <br />+ Active: correct (module is active).<br />Step three:<br /><br />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.<br /> <br /><b>Step 3:</b><br /><br />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.<br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-line" id="crayon-570f11a624178391668397-1"> <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-e">pre</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-2"> <span class="crayon-ta"><?</span><span class="crayon-e">xml </span><span class="crayon-i">version</span><span class="crayon-o">=</span><span class="crayon-s">"1.0"</span><span class="crayon-ta">?></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-3"> <span class="crayon-o"><</span><span class="crayon-v">config</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-4"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">modules</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-5"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">tutorialmagento_Helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-6"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">version</span><span class="crayon-o">></span><span class="crayon-cn">0.1.0</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">version</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-7"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">tutorialmagento_Helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-8"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">modules</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-9"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">frontend</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-10"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">routers</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-11"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-12"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-st">use</span><span class="crayon-o">></span><span class="crayon-v">standard</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-st">use</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-13"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">args</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-14"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">module</span><span class="crayon-o">></span><span class="crayon-v">tutorialmagento_Helloworld</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">module</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-15"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">frontName</span><span class="crayon-o">></span><span class="crayon-v">helloworld</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">frontName</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-16"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">args</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-17"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-18"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">routers</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-19"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">layout</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-20"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">updates</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-21"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-22"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">file</span><span class="crayon-o">></span><span class="crayon-v">helloworld</span><span class="crayon-sy">.</span><span class="crayon-v">xml</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">file</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-23"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-24"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">updates</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-25"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">layout</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-26"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">frontend</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-27"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-m">global</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-28"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">blocks</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-29"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-v">helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-30"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-t">class</span><span class="crayon-o">></span><span class="crayon-v">tutorialmagento_Helloworld_Block</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-t">class</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-31"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">helloworld</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-32"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">blocks</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-33"> <span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-m">global</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624178391668397-34"> <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">config</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624178391668397-35"> <span class="crayon-o"><</span><span class="crayon-v">pre</span><span class="crayon-o">></span></div> </div> <br /><b>Step 4 four: Create blocks of the component “helloword”</b><br /><br />Create file Helloworld. php in app/code/local/tutorialmagento/Helloworld using the following lines:<br /> <br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-line" id="crayon-570f11a62417b077065906-1"> <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-e">pre</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-2"> <span class="crayon-o"><</span><span class="crayon-sy">?</span><span class="crayon-e">php</span></div> <div class="crayon-line" id="crayon-570f11a62417b077065906-3"> <span class="crayon-h"> </span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-4"> <span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">tutorialmagento_Helloworld_Block_Helloworld</span><span class="crayon-h"> </span><span class="crayon-r">extends</span><span class="crayon-h"> </span><span class="crayon-e">Mage_Core_Block_Template</span></div> <div class="crayon-line" id="crayon-570f11a62417b077065906-5"> <span class="crayon-sy">{</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-6"> <span class="crayon-h"> </span><span class="crayon-c">/**</span></div> <div class="crayon-line" id="crayon-570f11a62417b077065906-7"> <span class="crayon-c"> * prepare block's layout</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-8"> <span class="crayon-c"> *</span></div> <div class="crayon-line" id="crayon-570f11a62417b077065906-9"> <span class="crayon-c"> * @return tutorialmagento_Helloworld_Block_Helloworld</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-10"> <span class="crayon-c"> */</span></div> <div class="crayon-line" id="crayon-570f11a62417b077065906-11"> <span class="crayon-h"> </span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">_prepareLayout</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-12"> <span class="crayon-h"> </span><span class="crayon-sy">{</span></div> <div class="crayon-line" id="crayon-570f11a62417b077065906-13"> <span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-r">parent</span><span class="crayon-o">::</span><span class="crayon-e">_prepareLayout</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-14"> <span class="crayon-h"> </span><span class="crayon-sy">}</span></div> <div class="crayon-line" id="crayon-570f11a62417b077065906-15"> <span class="crayon-sy">}</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a62417b077065906-16"> <span class="crayon-o"><</span><span class="crayon-v">pre</span><span class="crayon-o">></span></div> </div> <br /><b>Step 5: Produce template file helloworld. phtml</b><br /><br />Create helloworld. phtml (template file) in app/design/frontend/default/default/template/helloworld with all the following line:<br /> <br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-line" id="crayon-570f11a62417d552041477-1"> <span class="crayon-ta"><?php</span><span class="crayon-h"> </span><span class="crayon-k ">echo</span><span class="crayon-h"> </span><span class="crayon-v">$this</span><span class="crayon-o">-></span><span class="crayon-e">__</span><span class="crayon-sy">(</span><span class="crayon-s">'Hello world!'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-ta">?></span></div> </div> <br /><b>Step 6: Design file helloworld. xml</b><br /><br />Generate helloworld. xml (layout file) in: app/design/frontend/default/default/layout<br /> <br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-line" id="crayon-570f11a624180048211366-1"> <span class="crayon-ta"><?</span><span class="crayon-e">xml </span><span class="crayon-i">version</span><span class="crayon-o">=</span><span class="crayon-s">"1.0"</span><span class="crayon-ta">?></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624180048211366-2"> <span class="crayon-o"><</span><span class="crayon-e">layout </span><span class="crayon-v">version</span><span class="crayon-o">=</span><span class="crayon-s">"0.1.0"</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624180048211366-3">  <span class="crayon-o"><</span><span class="crayon-v">helloworld_index_index</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624180048211366-4">  <span class="crayon-o"><</span><span class="crayon-e">reference </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"content"</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624180048211366-5">  <span class="crayon-o"><</span><span class="crayon-e">block </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"helloworld/helloworld"</span><span class="crayon-h"> </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"helloworld"</span><span class="crayon-h"> </span><span class="crayon-v">template</span><span class="crayon-o">=</span><span class="crayon-s">"helloworld/helloworld.phtml"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624180048211366-6">  <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">reference</span><span class="crayon-o">></span></div> <div class="crayon-line" id="crayon-570f11a624180048211366-7">  <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">helloworld_index_index</span><span class="crayon-o">></span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624180048211366-8"> <span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">layout</span><span class="crayon-o">></span></div> </div> <br />Explanation: Within this layout file we simply need to understand some of the following info:<br />+ Handle: helloworld_index_index<br />-- Helloworld: router name (declared in the config. xml file)<br />- Index: controller title (not created controller: v)<br />- The last index may be the action name (function inside the controller index)<br />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<br />& block<br />- 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.<br /><br />- Name: name in the block in the handle (to distinguish the block another blocks)<br />- 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).<br /> <br /><b>Step 7:</b><br /><br />Create IndexController. php in the directory app/code/local/tutorialmagento/helloworld/controllers<br /> <br /> <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-line" id="crayon-570f11a624183796209038-1"> <span class="crayon-o"><</span><span class="crayon-sy">?</span><span class="crayon-e">php</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624183796209038-2">  </div> <div class="crayon-line" id="crayon-570f11a624183796209038-3"> <span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">tutorialmagento_Helloworld_IndexController</span><span class="crayon-h"> </span><span class="crayon-r">extends</span><span class="crayon-h"> </span><span class="crayon-e">Mage_Core_Controller_Front_Action</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624183796209038-4"> <span class="crayon-sy">{</span></div> <div class="crayon-line" id="crayon-570f11a624183796209038-5">  <span class="crayon-c">/**</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624183796209038-6"> <span class="crayon-c"> * index action</span></div> <div class="crayon-line" id="crayon-570f11a624183796209038-7"> <span class="crayon-c"> */</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624183796209038-8">  <span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">indexAction</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div> <div class="crayon-line" id="crayon-570f11a624183796209038-9">  <span class="crayon-sy">{</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624183796209038-10">  <span class="crayon-sy">$</span><span class="crayon-r">this</span><span class="crayon-o">-></span><span class="crayon-e">loadLayout</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div class="crayon-line" id="crayon-570f11a624183796209038-11">  <span class="crayon-sy">$</span><span class="crayon-r">this</span><span class="crayon-o">-></span><span class="crayon-e">renderLayout</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div> <div class="crayon-line crayon-striped-line" id="crayon-570f11a624183796209038-12">  <span class="crayon-sy">}</span></div> <div class="crayon-line" id="crayon-570f11a624183796209038-13"> <span class="crayon-sy">}</span></div> </div> <br />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.<br />In the index action over, there’re only 2 instructions:<br />+ $ This->   loadLayout (): used to masse layout, block, template through layout files<br />+ dollar This->   renderLayout (): render the interface through the block, according to the order which was preset in layout data file<br /><br />So we have just completed our own very first module in Magento. Now we will see the results off-line!<br />+ Copy source program code directory to folder to installed Magento<br />+ Disable/refresh the cache before running<br />and up. Visit the link (with yoursite. com is your website, my own is localhost. com)<br />The end result comes as below<br />For those who have any problems, feel free to keep inquries and I will react immediately.<br />If find problems while making the module, do not worry, I have attached the segments files below, be pleased!</div>

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 ...

+ Read more »