Create a backend module on the backoffice

In this tutorial I'll start by stop listing everything we have done from the beginning because it starts to do a lot and it's going to become heavy ^^ but basically you have already made a complete module that runs on frontoffice, today we will look at the backoffice ! (The admin interface). Your movies list appears in frontend, how to ensure that our form (that we created in the previous tutorial) displays in the backoffice? Ready ? Ok let's go ...

1- Magento and administration

Before getting as a warrior in the code, let's start by understanding how the magento backend works. For the admin part of the module it is the same as for the frontend, there will be some "code" part and "template" part (the principle of the MVC remember ?to separate the code and the view), the code part is found in the "code" folder of your magento module. It is in a directory called Adminhtml. So : - The Blocks of your backend module will be located in/app/code/local/Pfay/movies/Block/Adminhtml/ - The controllers will be found in/app/code/local/Pfay/movies/controllers/Adminhtml/ And the model is the same for the admin part and the front part, of course we will not recreate it to do the same operations (fetch information in db). For the backoffice part, you pick your template and layout in your /app/design/adminhtml/default/Pfay/ directory. Once you're here, it's the same as on the front, you have your layout and your template where you store your layout XMl files and your templates phtml files respectively.

2. Hmm ... 6th tutorials, your turn: first thing to do ...

? Obviously you usually begins by editing the file config.xml of our module, go to /app/code/local/Pfay/Films/etc/. In <config> add :

   <admin>
       <routers>
           <films>
              <use>admin</use>
              <args>
                 <module>Pfay_Films</module>
                 <frontName>adminfilms</frontName>
              </args>
           </films>
        </routers>
   </admin>
   <adminhtml>
     <layout>
        <updates>
            <films>
                <file>pfay_films.xml</file>
             </films>
        </updates>
     </layout>
     <menu>
        <films translate="title" module="adminhtml">
           <title>Mes Films</title>
           <sort_order>100</sort_order>
           <children>
               <set_time>
                     <title>Liste de films</title>
                     <action>adminfilms/adminhtml_index</action>
                </set_time>
            </children>
         </films>
      </menu>
  </adminhtml>

A little explanation?

 <admin>
     <routers>
        <films>
            <use>admin</use>
            <args>
              <module>Pfay_Films</module>
              <frontName>adminfilms</frontName>
            </args>
         </films>
     </routers>
 </admin>
 

First we create an Administration router. It'll use "admin", so it will be a router dedicated to the backend interface To access to the admin section of our module, we define a shortcut with the url through the frontName : "adminfilms". To access our module via http, we will go to: http://votresite.com/adminfilms/adminhtml_index.

<adminhtml>
      <layout>
         <updates>
             <films>
                <file>pfay_films.xml</file>
             </films>
         </updates>
      </layout>
      <menu>
        <films translate="title" module="adminhtml">
            <title>My Movies</title>
            <sort_order>100</sort_order>
            <children>
               <set_time>
                  <title> Manage my movies </title>
                  <action>adminfilms/adminhtml_index</action>
               </set_time>
           </children>
        </films>
    </menu>
 </adminhtml>
 

Then we define the layout file for the admin interface. It will be the pfay_films.xml file which will be located in the /app/design/adminhtml/default/Pfay/layout/ directory. Then through the menu section of the XML, is created the Admin menu. The tag appears to be quite explicit: Title: the title of column (here "My Movies") set_order: order in the menu (here 100 to put it in last position) Then every children of this tag is a line in this menu entry and for each menu entry, there is a name and a link ... In fact, every children's menu is just a shortcut when you will click on it, you will be redirected to the action of the controller you define in the XML. (in our example to http://votresite.com/adminfilms/adminhtml_index)

3- Create the controller of the movies admin module

Create the \app\code\local\Pfay\Films\controllers\Adminhtml\ and in it, the IndexController.php file that contains:

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

I will not explain this file in this lesson, you have seen how it works in the previous tutorials about controllers, it's exactly the same but this time it is used for the admin section of your magento module.

4- Add the form in the admin section

Now your module works and you can access it through the menu. Of course for the moment, it does nothing.... To go faster, copy your phtml file that contains your form to the admin magento, take afficher.phtml file located in
/app/design/frontend/pfay/theme/template/pfay_films/
and copy the
in/app/design/adminhtml/default/Pfay/template/pfay_films/
Add the following hidden field into your form (required for security in the magento admin):

<input name="form_key" type="hidden" value="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>" />

Now, change the layout pfay_films.xml in/app/design/adminhtml/default/Pfay/layout/like this:

<?xml version="1.0" ?>
<layout version="0.1.0">
  <films_adminhtml_index_index>
     <reference name="content">
             <block type="pfay_films/monblock"  name="afficher_monbloc" template="films/afficher.phtml"/>
      </reference>
   </films_adminhtml_index_index>
</layout>

As you copied the template in your template admin directory, it works, you now have your form in the administration.

This is the end of this tutorial, Congratulations you have succeeded. Try to repeat this tutorial and edit new fields.

As always leave a message in the comments, this is always fun and if you have any questions feel free to ask. You can download the code to compare with yours if you are stuck with this tutorial.