Step-by-Step Magento Custome Module Development

In this article, step by step, we are going to create our first custom module in magento. Here I assume that, you have already completed the installation of the magento, caching and compilation is turned off and have basic knowledge of the magento module’s directory structure and file system.

Before we start with the actual magento module development, let’s have a bird’s eye view on typical magento directory structure:

- webroot [magento project root directory]

 - app [contains code pools, design, configuration, localization and Mage.php files]

- code [contains the code files]

- community [third party modules]

- core [magento core modules]

- local [local modules]

- design [contains modules templates and layout files]

- adminhtml [contains the templates and layout of admin area]

- frontend [contains the templates and layout of front area]

- install [contains installation files]

- etc [contains the system and modules configuration files]

- local.xml
- config.xml
- modules [module configuration files]

- locale [contains the localization files]

- Mage.php [main entry point of magento framework]

- js [javascript library files]

- lib [external libraries include varien, zend framework, etc.]

- media [contains product, cms images, etc]

- skin [contains the css and js file based on the theme]

- var [contains the system generated directories like cache, report, sessions etc]

- cron.sh [cron to make task automatically]

- index.php [main entry point for php application]

The first question that comes to our mind is where to put our modules’ directories and files – we have three choices: a) in the community directory b) in the core directory c) in the local directory, all three are located under the app directory. In magento these are called code pools.

Let’s have a quick overview of the code pools,

• Core - The core directory contains the core modules which come with magento community edition release. My advice is to never make direct changes into any of the files in this directory, because when it’s time to upgrade magento to a newer version, all the changes you made will disappear.
• Community - The community codepool contains the modules from third party developers either downloaded from the magento connect store or installed manually. You should place modules code in this directory if you are planning to upload the module to magento connect store.
• Local - We put all our projects’ specific modules into the local directory, create one if it is not already present in the code directory.

So, for our HelloWorld module I am going to create files and directories under the local codepool. You can use the community codepool too for this purpose. But before that, let’s see which are the major components of a simple magento module development.

Magento module comprises of the following parts:

• Block - Block files are used to fetch the data and display it on the template files.
• Model - The model files contains the business logic
• Controllers - Controllers handles the incoming request and renders the pages according to the routes defined in the layout files.
• Helper - Helper files, as the name suggest contains, the common code required in the whole module like (validations, image processing, etc.).
• Etc - etc directory contains the module configuration files which are in xml format. Basically there are two main files. config.xml and system.xml.
• Sql - sql directory contains the database query files which are in need for that module.

With this a module in magento should also follow the standard Naming Conventions, which is likeCompanyname_Modulename as in our case it will be Multidots_HelloWorld.

So, let’s do it:

Step 1: Go to the app/etc/modules directory and create the Multidots_HelloWorld.xml file and paste the below code in the file:

    
      
         true
         local
      
    

This XML file tells magento that our module is placed under local codepool and it’s status is active.

You can verify the status of the module in magento admin panel from: System >> Configuration.

From the left sidebar Under the Advanced section click on the Advanced tab, click on DisableModules Output section to expand it, search for the Multidots_HelloWorld module.

If the module is not listed here, please check the Multidots_HelloWorld.xml file or clear the cache from System >> Cache Management.

If there isn’t any problem, then you can see the module enabled; see the below screenshot:

Step 2: Now as our module is enabled on the magento site, next we will start creating the required files and directories one by one.

Firstly, under the local codepool, you need to create the directory with name Multidots, under that create directory HelloWorld.

It will be like /webroot/app/code/local/Multidots/HelloWorld

Step 3: Next we will create etc directory under the app/code/local/Multidots/HelloWorld and create XML file with name config.xml under the etc directory. This file will tell magento everything about the structure of our module.

Put the below code in the config.xml file:

  
    
      0.1.0
    
  
  
    
      
        standard
        
          Multidots_HelloWorld
          helloworld
        
      
    
  

  
    
     admin
     
      Multidots_HelloWorld
      admin_helloworld
     
    
  

- Let’s understand the purpose behind each tag used in this file, /config> is main configuration tag which contains all other tags.

- Next one is /modules> tag, in which we have to put our module tag which will be like /Companyname_ModuleName> and the version of the module in the /version> tag. the module upgradation and versioning is managed on the value in this tag.

- Under the /frontend> tag, there is one element /routers>, and it contains the /helloworld> tag which identifies our module in the magento system.

- /use> will tell magento which router we are using, it can be standard, admin or default.

- tag contains the information about our module and the value in the tag will be used to access our module on frontend.

In our case it will be http://website.com/index.php/helloworld/

There is tag which also contains the same tags we have used in the tag, which is used for the admin configuration of our module.

Step 4 : Till now we have told magento about our module, now let’s do some action, in this step we are going to create a controller file.

Head to /webroot/app/code/local/Multidots/HelloWorld/controllers directory.

-Create IndexController.php file in the controllers directory and put the below code snippet in the file.

-Now type the URL http://website.com/index.php/helloworld/ in your browser and see the magic.

Very easy, wasn’t it 

Here we have created our controller file which inherits its code from the core magento Class Mage_Core_Controller_Front_Action, it is the base front controller file.

-By when we type the module name after the index.php in the browser it will call the Index Action of the IndexController, that means http://website.com/index.php/helloword/ is similar to http://website.com/index.php/helloworld/index/index/.

-To be more confident let’s create another action. Add the below code after the index action in theIndexController.php file.

/**

* Done it again
*
* @access public
* @return void
*/
public function doneintagainAction() {

echo "done it again....!!!!";
}

-Now, type the URL http://website.com/index.php/helloworld/index/doneintagain/, we have created another action successfully. You can add as many action you want in the controller file.

This is it for the frontend part, now let’s see how to create and access the admin part of our module.

Step 5: I am sure you have noticed the below configuration portion in the config.xml file we created in the Step 3 of this tutorial:

  
    
      admin
        
          Multidots_HelloWorld
          admin_helloworld
        
    
  

-This portion in the config.xml file tells magento the name of the router we are going to use in the admin side, which is described as admin_helloword.

-Now, head to the path /webroot/app/code/local/Multidots/HelloWorld/controllers and  create the Adminhtml directory.

-In the config.xml file put the below code after the

tag:

  
    
      Multidots_HelloWorld_Helper
    
  


 
   
     
     100
    
      
        
        0
        admin_helloworld/adminhtml_index
      
    
   
 

-The above XML part in the config.xml file is required for the admin part. The configuration in the tag will be available for both the frontend and the admin panel.

- tag specifies the path of the helper class in our module.

Step 6: Head to the path /webroot/app/code/local/Multidots/HelloWorld/. Create a new Helper directory there, and in the Helper directory create Data.php file, in the Data.php file add the below code:

The helper class is used to render the menu in the admin panel, which is generated by the XML code in the tags  in the config.xml file

Step 7 : In the Adminhtml directory create IndexController.php file and put the below code snippet in that file.

-Here we have created a controller file which extends the core magento admin Controller file and created an index action same as we had done in the front end part.

Step 8: Now log into your admin panel on the main navigation bar. You will see the new menu Helloworld:

click on the Hello World menu and you will see the message on your monitor screen.

That’s it guys, you have done it