Creating Block layout and Template

Creating Block Layout and Template In Magento

Step1. Telling Magento that we are creating new module

under app/etc/modules/ Veera_Pradeep.xml
<?xml version="1.0" encoding="UTF-8"?>

<!--
    Document   : Veera_Pradeep.xml
    Created on : December 26, 2011, 4:47 PM
    Author     : V.V.N.Pradeep
    Description:
        Purpose of the document follows.
-->
<config>
    <modules>
        <Veera_Pradeep>
            <active>true</active>
            <codePool>local</codePool>
        </Veera_Pradeep>
    </modules>
</config>
/*************************/

Step2. Binding all the folder 

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Document   : config.xml
    Created on : December 26, 2011, 5:31 PM
    Author     : V.V.N.Pradeep
    Description:
       Purpose of the document follows.

        This configuration is used to bind the all folder
        inside the Pradeep module.
-->
<config>
     <frontend>
        <routers>
            <pradeep>
                <use>standard</use>
                <args>
                    <module>Veera_Pradeep</module>
                    <frontName>pradeep</frontName>
                </args>
            </pradeep>
       </routers>
       <!-- Tell magento that we are going to use custom layout
       called pradeep.xml for this module -->
       <layout>
                <updates>
                    <pradeep>
                        <file>pradeep.xml</file>
                    </pradeep>
                </updates>
       </layout>
        <!-- End of layout tag -->
    </frontend>
    <global>
        <!-- This section is to bind the block with our module Pradeep -->
        <blocks>
            <pradeep>
            <class>Veera_Pradeep_Block</class>
            </pradeep>
        </blocks>
        <!-- End of blocks

        When you called
    <block type="pradeep/naga" name="pradeep" template="custom/welcome.phtml"/>
    inside your layout/pradeep.xml

    means you are calling the Naga.php (which is under pradeep/block module)
    file and instantiating the object & storing it under the name pradeep
    and then seting the template for our module
       -->
   </global>
</config>
/******************************/
Step3: Writng Controller
<?php
/*
 * @author  : V.V.N.Pradeep
 * @description --
 *    Purpose of the document follows.
 *  
 */
?>
<?php
class Veera_Pradeep_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();
    }
}
?>
/******************************/
Step4: Writng Block
<?php
/*
 * @author  : V.V.N.Pradeep
 * @description --
 *    Purpose of the document follows.
 *        To use custom define layout and template
 */
?>
<?php
class Veera_Pradeep_Block_Naga extends Mage_Core_Block_Template
{
   // this function generate the Mage_Core_Block_Template
    public function  _construct() {
       parent::_construct();
     }

     /*The above function is equalent to the below mention function
      *
      *
        public function __construct(){
          if ($this->hasData('template')) {
          $this->setTemplate($this->getData('template'));
         }
       }
      *
      *
      */
}
?>
/******************************/
Step5: Creating Layout
under app/design/frontend/base/default/layout/pradeep.xml
<?xml version="1.0" encoding="UTF-8"?>

<!--
 Document   : pradeep.xml
    Created on : December 27, 2011, 6:51 PM
    Author     : V.V.N.Pradeep
    Description:
        Purpose of the document follows.
        <remove name="right"/>
        <remove name="left"/>  is used to remove the left and right callouts

        Magaento By default provide 4types of template settings,
        1column.phtml,2columns-left.phtml,2columns-right.phtml,3columns.phtml

        You can create your own template settings also...

        you can find these phtml under

        app/design/frontend/base/default/template/page
-->
<layout version="0.1.0">
    <pradeep_index_index translate="label">
        <label>Welcome Page</label>
        <!-- Mage_Customer -->
        <remove name="right"/>
        <remove name="left"/>

        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="content">
            <block type="pradeep/naga" name="pradeep" template="custom/welcome.phtml"/>
        </reference>
    </pradeep_index_index>

</layout>
/******************************/
Step6: Creating Template
 under app/design/frontend/base/default/template/custom/welcome.phtml
<h1>Welocme to Veera Pradeep Blog</h1>

Output:

to see the output type the url into your browser

example:

http://demo.com/magento/pradeep/index/index