Thursday, February 20, 2014

Building a basic Hello World module in Magento 1.8

To create a small "Hello World" module in Magento is very easy. This would require a Namespace (say, "Test") and ModuleName (say, "Helloworld"). Next follow these steps.

1. Create an XML file in app/etc/modules folder called "Test_Helloworld.xml". This name has a format {namespace name}{underscore}{module name}
   
  Write the following code in it :: 
  
  <?xml version="1.0"?>
 <config>
  <modules>
   <!-- Specify the NamespaceName_ModuleName -->
<Test_Helloworld>
     <!-- If we need to Disable it, we do it here -->
    <active>true</active>
    <!-- Which CodePool to Use -->
     <codePool>local</codePool>
</Test_Helloworld>
  </modules>
 </config>

  Magento has 3 codepools namely "core", "community" and "local". We won't be touching the "core", rather we would be creating our modules in "Community" or "local" codepool. If we choose "community", we need to change one line in the above XML to "<codePool>community</codePool>". Here we are creating modules in "local" folder.
  
  This XML is needed to tell Magento that we are going to add a new Module and this module's code can be found inside "local" codepool. Now we can see our new module to appear in the admin panel. In System > Configuration > Advanced > Advanced section, you'll that our new module is listed there.





2. Now, we need to create a folder with the Namespace name "Test" inside app/code/local folder

3. Next, we need to create a folder with Module Name "Helloworld" inside the "Test" folder

4. Now create 2 subfolders "controllers" and "etc" inside app/code/local/Test/Helloworld/

5. Next we need another configuration file called config.xml ( inside 'etc' folder ) where all the module's basic configuration will be stored. Here is the content for app/code/local/Test/Helloworld/etc/config.xml ::
   
  <?xml version="1.0" encoding="UTF-8"?>
  <config>
    <modules>
     <!-- Again, NamespaceName and ModuleName -->
     <Test_Helloworld>
      <!-- Not too much of importance here -->
      <version>1.0.0</version>
     </Test_Helloworld>
    </modules>
    
    <frontend>
     <routers>
     <!-- How we are going to access the module from front-end? Router name is "helloworld" -->  
       <helloworld> 
         <use>standard</use> 
           <args>
   <!-- Which module will start to work for the 'helloworld' router -->
              <module>Test_Helloworld</module> 
              <frontName>helloworld</frontName> 
           </args>
        </helloworld>
      </routers>
    </frontend>
  </config>

8. Next, we create the main controller IndexController.php inside app/code/local/Test/Helloworld folder. Check its content ::

  <?php
 class Test_Helloworld_indexController extends Mage_Core_Controller_Front_Action
 {
   // Default action 
   public function indexAction()
   {
     echo " <b>Index Action</b>";
   }
 
   // Another action called 'view'
   public function viewAction()
   {
     echo " <b>View Action</b>";
   }
 
 }
 ?>

Here, we have created a class with naming convention {NamespaceName}_{ModuleName}_{ControllerName}. Then we create two actions called "indexAction" ( which is default action ) and "viewAction". Check relationships between URLs and these actions below ..
     
http://localhost/magento/helloworld                :: Index Controller > index Action
http://localhost/magento/helloworld/index        :: Index Controller > index Action
http://localhost/magento/helloworld/index/view      :: Index Controller > view Action
http://localhost/magento/helloworld/index/view/index :: Index Controller > view Action
    
Check the Output below :




If we want to load default template and theme onto our page, the index Controller's actions must be changed as shown below :

<?php

class Test_Helloworld_indexController extends Mage_Core_Controller_Front_Action
{
  // Default action 
  public function indexAction()
  {
      $this->load_theme();
      echo " <b>[Index Action]</b>";
  }
 
  // Another action called 'view'
  public function viewAction()
  {
$this->load_theme();
echo " <b>[View Action]</b>";
  }
 
  // Another action 
  public function say_hiAction()
  {
$this->load_theme();
echo " <b>[Say_Hi Action]</b>";
  }
 
  // Private Function
  private function load_theme()
  {
$this->loadLayout();
$this->renderLayout();

// Print Template and Theme Information
echo "Current Theme Information : Package [" . Mage::getSingleton('core/design_package')->getPackageName() . "], Theme : [";

echo Mage::getSingleton('core/design_package')->getTheme('frontend') . "]";
  }
}
?>
  
 We have created a private function load_theme() which loads layout and renders it on the browser. It also prints the current Package and Theme name on the screen.
    
A new public function say_hiAction() has also been added. So if we call http://127.0.0.1/magento1.8/helloworld/index/say_hi, Index Controller's say_hiAction() function will be called. 
   
Check the Output below :





The Template and Theme information is printed at the top of the screen.  The statements $this->loadLayout()and $this->renderLayout() loads and renders the templates on the browser.

1 comment:

Adarsh Ediyottil said...

worked! thanks