Magento Module Development - Part 2 - layout and blocks

We will continue on the same module developed last time at http://magentoexpertforum.com/showth...-1-Get-started

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.

HTML Code:

---

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

HTML Code:

---

<?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 Code:

---

<?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 Code:

---

<?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 Code:

---

<?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 Code:

---

<?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 Code:

---

<?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 Code:

---

<?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 http://www.yourmagneto.com/index.php...r_view/history. Set 3 columns layout for this page and in the content block display the text “Its Working”.