Pages

Friday, 20 June 2014

Magento Developper’s Guide (Lesson 6) – Create a plugin in the backend

This tutorial is the 6th of many , if it’s not already done, i suggest you read to the tutorials starting with the summary of this series.

In this tutorial I will start by stopping listing you everything we have done since the beginning because it start to be a lot and it’s going to be boring (or to make you silly) ^ ^ So… you have done a complete plugin that runs on the front office, Today we will look at Back office. Your address book appears in the frontend, how to ensure that our form (which we created in the previous tutorial ) appears in the backoffice.

1 – Magento and administration

Before starting like a warrior on the code, let’s start by understanding how the administration of magento works.

First of all you have to know that in the admin plugin it is always the same, there will be a « code » part and a « template » part (the principle of MVC … separate the code and the view), the part code is found in the « code » folders of your plugin in a directory called Adminhtml. Thus, administration

Blocks of your plugin will be found in /app/code/local/Easylife/Test/Block/Adminhtml/

The controllers will be found in /app/code/local/Easylife/Test/controllers/Adminhtml/

And model is the same for the admin and the front part, of course we will not create a new one when it already existing)

For the backoffice part, you’ll search your templates and your layout in /app/design/adminhtml/default/Easylife/, once you are here, it’s the same as for the front, you have your file layout and your folder template where you store your layout and your respective templates.

2 – Hmm … 6th tutorials, it’s your turn : the first thing to do …?

Obviously you are used, we start by editing the config.xml file in our plugin, go to /app/code/local/Easylifeay/Test/etc/.
After <\frontend> and before <global> add:

<admin>
     <routers>
         <test>
            <use>admin</use>
            <args>
               <module>Easylife_Test</module>
               <frontName>admintest</frontName>
            </args>
         </test>
      </routers>
 </admin>
 <adminhtml>
   <layout>
      <updates>
          <test>
              <file>test.xml</file>
           </test>
      </updates>
   </layout>
   <menu>
      <test translate="title" module="adminhtml">
         <title>My plugins</title>
         <sort_order>100</sort_order>
         <children>
             <set_time>
                   <title>Adress book</title>
                   <action>admintest/adminhtml_index</action>
              </set_time>
          </children>
       </test>
    </menu>
</adminhtml>
A little explanation ?

<admin>
      <routers>
          <test>
             <use>admin</use>
             <args>
                <module>Easylife_Test</module>
                <frontName>admintest</frontName>
             </args>
          </test>
       </routers>
  </admin>

First we create an administration router, the tag is set to use the admin can say that it will be an administration plugin (as opposed to if we had used the standard value).

 To access to the admin part of our plugin, we define a shortcut to the url thanks to the attribute frontName that we make as « admintest ». To access our plugin we will therefore go to the URL: votresite.com/admintest/adminhtml_index

<adminhtml>
   <layout>
      <updates>
          <test>
              <file>test.xml</file>
           </test>
      </updates>
   </layout>
   <menu>
      <test translate="title" module="adminhtml">
         <title>My plugins</title>
         <sort_order>100</sort_order>
         <children>
             <set_time>
                   <title>Adress book</title>
                   <action>admintest/adminhtml_index</action>
              </set_time>
          </children>
       </test>
    </menu>
</adminhtml>

Then, we define that the layout used to load this plugin will be file test.xml who will be in the folder /app/design/adminhtml/default/Easylife/ layout/  Then thanks to the the tag menu we’re creating the menu for the administration.
The tag is easy to decode, it says:

Title: the title of the column (here « My plugins ») set_order: the order in the menu (here 100 to put it at the end) Then each children of this tag is a line of the menu. For each item children, there is a name and a link … In fact, each children menu is just a shortcut, if you will click on it, you are redirected to the page (in our example to yoursite.com/admintest/adminhtml_index )

3 – Create the controller of the admin part

Create the folder \app\code\local\Easylife\Test\controllers\Adminhtml\ and the file IndexController.php in it which will contain:

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

I don’t explain this file, you’ve already seen how it work in the previous tutorials

4 – Add the form in the admin interface

Now your plugin works and can be accessed via the menu, even if (for now) it does nothing.
To save time, copy your file that contains your form phtml to the admin of magento, take the file afficher.phtml located in /app/design/frontend/Easylife/theme/template/test/ and copy it to /app/design/ adminhtml /default/ Easylife/template/test/
in your form and add the following hidden field (required for security in magento)

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

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


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

As you have copied the template in your template admin directory, it combines the block from the front with your template admin and it works, you now have your form in the administration.

This is the end of this tutorial Congratulations !! you have reached the end of this tutorial. As always leave a comment message to say if you like this article or not and ask questions. It’s always nice when you have any questions.
 


Find the summery of this tutorial

No comments:

Post a Comment