Create a block in magento

We previously created a magento plugin. In this lesson, we will learn how to create and display a magento block on the frontend.

How does a magento blocks works ?

For now, your module is a bit "simple", you can perform treatments but its usefulness is limited. We will now display content using a template via a block ;) The controller call the layout to find out what to display. In this layout you insert blocks that are actually a kind of "mini controller" (which will for example retrieve a list of films). These blocks uses templates to display their information. Now that you understand how it works, the only way to really understand it, is to do it. Let's go!

Step 1: Call the layout in the controller

reminder : Your module is located in /app/code/local/Pfay/Films/. So the module name is Films and it is in the namespace Pfay Now go open up your controller: /app/code/local/Pfay/Films/controllers/IndexController.php And edit it as follows:

class Pfay_Films_IndexController extends Mage_Core_Controller_Front_Action
{
     public function indexAction()
     {
          $this->loadLayout();
          $this->renderLayout();
     }

      public function mamethodeAction()
      {
          echo ‘test mamethode’;
      }
}

As you can see, I added in my action index, two small lines. These lines go for what to display when you arrive on this action (by going to the url http://votresite.com/films/index).

   $this->loadLayout();    //wich elements to get ?
   $this->renderLayout();   //render it ! 
   

There is nothing more to do on the controller. We tell the controller to check information in the layout, let's see what happens on the side of the layout ...

Step 2: Declare items to be displayed with the Layout

. Before you can use the Layout (and there if you read the previous tutorials you start guessing the following...), it must be configured in config.xml , so magento magento will be able to use it. The config.xml is located in the/etc directory of your module. Open it and add in <frontend> :

<layout>
   <updates>
        <pfay_films>
             <file>pfay_films.xml</file>
         </pfay_films>
    </updates>
</layout>

This small snippet of xml code will declare your pfay_films.xml as the layout of your Films module (because it is in your config.xml "Films" module) Now declare the folder where the Blocks are : In <config> add:

<global>
     <blocks>
         <pfay_films>
              <class>Pfay_Films_Block</class>
         </pfay_films>
      </blocks>
</global>

In <global> you declare your Blocks path, it is the same principe as you did with the Model and the Helpers (later we will see what is a helper). You said that the Class of your Blocks for this module will be in the Block directory of your module. Important Note: In Magento when you declare your classes, your class name is the path to that file, so your block Pfay_Films_Block_List is located at the following directory : /app/code/local/Pfay/Films/Block/List.php

Now that the config.xml file is configured and magento is able to find our layout and our blocks, let's see what happens on the side of the Layout! The layout: If you recall, in the first lesson of the course, we saw that a module contains some code part and a template part and there are located in two different places in magento. The layout is part of the "template" area, we said in our module config.xml that it's called pfay_films.xml Now go to the directory layout in your Magento theme. In our example, the template used in magento will be in the following directory: \app\design\frontend\pfay\theme\ (Be careful to set up your theme in SYSTEM> SETUP> DESIGN if not use de default theme path, but it's a bad practice). We'll create a Layout pfay_films.xml in the \app\design\frontend\pfay\theme\layout\ Create this file as it:

<layout version="0.1.0">
     <default>
          <reference name="content">
          </reference>
      </default>

      <routeurfrontend_index_index>
           <reference name="content">
                <block type="pfay_films/monblock"  name="afficher_monbloc" template="pfay_films/afficher.phtml" />
           </reference>
      </routeurfrontend_index_index>
</layout>

I can not explain how it works, if you do not understand this code I advise you to read the designer's guide of magento and be perfected with layout and templates before continuing this course. But I'm going to remind you what are some piece of code...just in case ;)

     <routeurfrontend_index_index>
         …
     </routeurfrontend_index_index>
     

To indicate Magento what blocks to add to what page, we create the Layout! This layout is made of section which represents pages (like routeurfrontend_index_index)
Inside these pages are added some blocks. A page route is written as follows: " router name"_"name module"_"action name" So when we want to access our http://votresite.com/films/index, the action is defined in the config.xml, the router name will be able to point to /films, we know that the controller called in this case will be check the IndexController.php , and the method will be called IndexAction. The page will be in the layout represented by the tag: routeurfrontend_index_index A route code in the layout is called a "handler", it's unique for a page (combinaison of routeur name + controller name + action name). And we will insert in the handle this ligne of code representing a new block:

      <block type="pfay_films/monblock"  name="afficher_monbloc"  template="pfay_films/afficher.phtml" />
      

That mean for magento "creates a block that you go look in the Films module that will be called "monblock" and use the template "afficher.phtml" which will be in the folder "pfay_films" of the template folder.

Step 3: Create the block

Now, create the block " monblock ", so go to the folder that you set in the config.xml to store your blocks (app/code/local/Pfay/Films/Block/ ) and create the file Monblock.php inside. This file will contain:

class Pfay_Films_Block_Monblock extends Mage_Core_Block_Template
{
     public function methodblock()
     {
         return ‘informations de mon block !!’ ;
     }
}

This file is a type of class Block (Mage_Core_Block_Template) with methodblock() method that returns a sentence (of type String)

Step 4: Create the template

Now go to the \app\design\frontend\pfay\theme\template\ (or in the template directory of your theme) And create a "pfay_films" directory inside with a afficher.phtml file. This file will contain:

    echo $this->methodblock();
    

How does it work?

We have defined a type of block "pfay_films/monblock" in the layout, which uses our afficher.phtml template, we can access (in afficher.phtml) the methods of our block through $this.
Now go http://votresite.com/films/index and you will see your site with content as a text: "My information block !!

You can insert a block with this template in any page of your site. Our example is simple because the goal is to understand how Magento works. Our block is not really useful in the real world yet. A block is generally used to make treatments like list the last 5 products, display a contact form,...some blocks that you would be happy to insert in several places on your site just by giving a small line in the layout. Now you understand how usefull is a block and how to create one ;) That lesson is very important because in magento everything is made with blocks...

That is the end of this tutorial, I hope this tutorial has you more, feel free to leave comments if you have questions or constructive feedback ;)