Creating Magento Module - tutorial - part 2 - beginners

Compatibility: Magento 1

This is the second tutorial in the tutorial series "Creating new Magento module". In previous tutorial we created a "Hello World" module, which displays "Hello World!!!" when going to www.magento.local/helloworld. In this tutorial we will extend our "Hello World" module to show the "Hello World!!!" surrounded by the website's design and not just on blank page.

For this we need to perform the 3 following steps:

• inside the file app/code/local/Mypackage/Helloworld/controllers/IndexController.phpreplace the indexAction method with the following:

  public function indexAction()
  {
      $this->loadLayout();
      $this->renderLayout();
  }
  

  This will cause Magento to load and render the layout of the website. Currently it will load the standard components like header, footer and content box.
• replace the content of app/code/local/Mypackage/Helloworld/etc/config.xmlwith:

  <?xml version="1.0"?>
  <config>
      <modules>
          <Mypackage_Helloworld>
              <version>1.0.0</version>
          </Mypackage_Helloworld>
      </modules>
      <frontend>
          <routers>
              <mypackage_helloworld>
                  <use>standard</use>
                  <args>
                      <module>Mypackage_Helloworld</module>
                      <frontName>helloworld</frontName>
                  </args>
              </mypackage_helloworld>
          </routers>
          <layout>
              <updates>
                  <mypackage_helloworld>
                      <file>mypackage_helloworld.xml</file>
                  </mypackage_helloworld>
              </updates>
          </layout>
      </frontend>
  </config>
  

  you can see that we added the "layout/updates" tags. Those tags tell Magento that it should include the mypackage_helloworld.xml file inside the design directory.
• create the file app/design/frontend/default/default/layout/mypackage_helloworld.xml (if you have custom design, you should create the file app/design/frontend/<custom_package>/<custom_theme>/layout/mypackage_helloworld.xml, replacing the <custom_package> and <custom_theme> with the name of the custom package and theme. To check out which custom package and theme your Magento is using, go to the admin panel, "System->Configuration->Design", don't forget to ensure that the store you are using is chosen on the left, in the "Current Configuration Scope" dropdown. In the "Package" section you will see the custom package name, and in the "Themes->Layout"you will see the name of the custom theme that is used by the store.) in the contents of the file put the following:

  <?xml version="1.0"?>
  <layout version="0.1.0">
      <mypackage_helloworld_index_index>
          <reference name="content">
              <block type="core/template" template="helloworld/nicetemplate.phtml" />
          </reference>
      </mypackage_helloworld_index_index>
  </layout>
  
  

  this will tell Magento that on the URL www.magento.local/helloworld (which is for Magento same as www.magento.local/helloworld/index/index) Magento should nest the template "helloworld/nicetemplate.phtml" inside the content block.
• create the file app/design/frontend/default/default/template/helloworld/nicetemplate.phtml (in the case you have custom design, you should create the file app/design/frontend/<custom_package>/<custom_theme>/template/helloworld/nicetemplate.phtml) in the contents of the file put the following:

  Hello World!!!
  

  This is the template that Magento will put inside the content block. Thus, we should see the "Hello World!!!" text written somewhere in the middle of the page, under the header and above the footer, surrounded with the default design components.

Now clear the cache, go to www.magento.local/helloworldand you should see the "Hello World!!!" surrounded with the default design.

If you see this - great job! If not, write us in the comments, and we will help you.