Magento Module Development Series – Part5- Module – Blocks and Layouts

In the last tutorial we created a very simple module, to display hello world. In this tutorial we will display hello world using, magento layout and blocks.

We will continue on the same module developed last time.

There are few changes to make to the existing config.xml file. Since now we are using layouts, we will create our own layout file for our module. Lets name our module’s layout file as test.xml. We will place it in our theme/layout folder.

<?xml version="1.0"?>
<config>
	<modules>
		<Excellence_Test>
			<version>0.1.0</version>
		</Excellence_Test>
	</modules>
	<frontend>
		<routers>
			<test>
				<use>standard</use>
				<args>
					<module>Excellence_Test</module>
					<frontName>test</frontName>
				</args>
			</test>
		</routers>
		<layout>  <!-- New Section Added -->
			<updates>
				<test>
					<file>test.xml</file> <!-- This is name of the layout file for this module -->
				</test>
			</updates>
		</layout>
	</frontend>
	<global>
		<blocks>
			<test>
				<class>Excellence_Test_Block</class>
			</test>
		</blocks>
		<helpers>
			<test>
				<class>Excellence_Test_Helper</class>
			</test>
		</helpers>
	</global>
</config>

Now create the test.xml file in your theme layout folder. Like in my case its app/design/frontend/default/default/layout/test.xml or if you have create your own theme, put the layout file there. Here are the contents of the file.

<?xml version="1.0"?>
<layout version="0.1.0">
    <test_index_index>
        <reference name="content">
            <block type="test/test" name="test" template="test/test.phtml" />
        </reference>
    </test_index_index>
</layout>

The explanation of this layout file is given previously here. So the block we used is “test/test” which equal class Excellence_Test_Block_Test and phtml file used is test/test.phtml
So we will create a phtml file in location app/design/frontend/default/default/templates/test/test.phtml

<?php
	echo $this->getContent(); 
?>

In the file, we are calling a function getContent(); this function is to be declared in the block Test.php block file. As we have seen previous, the $this variable here is actually an object of our block class, which we define as ‘type’ in our layout.xml. Just to confirm you write below code in your phtml file.

<?php echo get_class($this); ?>

The output should be Excellence_Test_Block_Test.
Now create the file Test.php at location app/code/local/Excellence/Test/Block/Test.php

<?php
class Excellence_Test_Block_Test extends Mage_Core_Block_Template
{
	public function getContent()
	{
		return "Hello World";
	}
}

Now, to call all these layouts we need to make some changes in the IndexController.php

<?php
class Excellence_Test_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
		$this->loadLayout();  //This function read all layout files and loads them in memory
		$this->renderLayout(); //This function processes and displays all layout phtml and php files.
    }
}

Open the url www.your-magento.com/test/ again and it will again print ‘helloword’. But this time, it will print it using the 3columns layout instead of a white screen before.

Controllers and URL’s

In this section I will explain how URL’s, controllers and actions are related.
Any url in magento is comprise of 3 parts e.g www.you-magento.com/test/index/index, www.you-magento.com/test/view/edit. Ff a url doesn’t have 3 part, you need to put in index yourself for example.
www.you-magento.com/test actually means www.you-magento.com/test/index/index
and
www.you-magento.com/test/view actually means www.you-magento.com/test/view/index

The 3 part of a URL basically means <module>/<controller>/<action> and this same format in used in layout.xml files as well.
The <module> comes from the value given in the <fontend> tag in config.xml file. <controller> is the name of the controller file like if IndexContrller.php (index), if ViewController.php (view). <action> this is the function name inside the controller file. For ex. indexAction(); viewAction(); testAction();

Here are few more examples. Let take the current module developed.
URL: www.you-magento.com/test/view/detele
For this url to work we have to create a ViewController.php

<?php
class Excellence_Test_ViewController extends Mage_Core_Controller_Front_Action
{
    public function deleteAction()
    {
		$this->loadLayout();     		
$this->renderLayout(); 	
    }
}

Another URL: www.you-magento.com/test/view_index/xyz for this
we will have to create a Folder called View as sub folder of controllers and then create a IndexController.php

<?php
class Excellence_Test_View_IndexController extends Mage_Core_Controller_Front_Action
{
    public function xyzAction()
    {
		$this->loadLayout();     		
$this->renderLayout(); 	
    }
}
Exercise:
Create a new module with frontend name as test. And your module should have URL www.yourmagneto.com/index.php/test/user_view/history. Set 3 columns layout for this page and in the content block display the text “Its Working”.
  • anand kumar

    Nice One…But i unable to see the content in the front end,please provide this module zip file ..its more help for us to learn

  • Ravi

    Im not able to see output.

  • Saturnino Harris

    This is a bit late, but if you’re unable to see even the “default” layout check to see if

    $this->loadLayout();

    $this->renderLayout();

    is included in your indexAction method.

    To see the changes for your layout, put everything from test.xml into local.xml in the theme layout folder (nothing has called for test.xml, whilst local is always included at the end).

  • Choco Titi

    you’re my life saver. I spent 2 days on this tutorial and couldn’t make it work. If only I could read your comment earlier. Thanks a lot.

  • Bhavesh Thakrar

    I am creating different js files in skin/frontend/base/default/js/. Now i want to call/link in index action of index controller. How i can do this ?

  • Shailesh

    For those who are unable to see the output or getting a black output.

    Just change the directory name “templates” to “template”.

    And stop finding a black cat in dark room.

  • Thanks a lot, this is a really good instruction. The explanation is clear and detailed. Helped me a lot!

  • amol

    i have seen header and footer but not hello world