Step-by-Step Guide for Magento Module Development

Magento is leading the Ecommerce realm and one of the core reasons behind it is the vast community of Magento Developers. Magento community edition is released with all the basic required features to set up a working e-commerce store for any business.

But, what if you want to build your own custom module or extension in magento? What are the basic necessary steps to be followed by the developer to create a working magento module, both on the front end area as well as in the admin area?

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]

Like several other popular PHP frameworks, magento also follows the MVC [Model View Controller pattern] structure for handling the requests that are coming inwards. But the major point which segregates it from others is the  module configuration and request handling using the layout and config xml files.

Here I am going to create a simple HelloWorld module with simple page on front side and menu and page in admin side too; so folks, lets get started.

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 code pool 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 code pool. You can use the community code pool 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:

Magento module comprises
  • 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 like Companyname_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:

Magento module comprises
<?xml version="1.0"?>
<config>
    <modules>
      <Multidots_HelloWorld>
         <active>true</active>
         <codePool>local</codePool>
      </Multidots_HelloWorld>
    </modules>
</config>

This XML file tells magento that our module is placed under local code pool 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 Disable Modules 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:

Cache Management

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 code pool, you need to create the directory with name Multidots, under that create directory HelloWorld.

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

Magento module
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:
<?xml version="1.0"?>
<config>
  <modules>
    <Multidots_HelloWorld>
      <version>0.1.0</version>
    </Multidots_HelloWorld>
  </modules>
  <frontend>
    <routers>
      <helloworld>
        <use>standard</use>
        <args>
          <module>Multidots_HelloWorld</module>
          <frontName>helloworld</frontName>
        </args>
      </helloworld>
    </routers>
  </frontend>
<admin>
  <routers>
    <helloworld>
     <use>admin</use>
     <args>
      <module>Multidots_HelloWorld</module>
      <frontName>admin_helloworld</frontName>
     </args>
    </helloworld>
  </routers>
</admin>
</config>

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

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

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

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

– <args> tag contains the information about our module and the value in the <frontName> tag will be used to access our module on frontend.

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

There is <admin> tag which also contains the same tags we have used in the <frontend> 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.
Magento module
-Create IndexController.php file in the controllers directory and put the below code snippet in the file.
<?php

class Multidots_HelloWorld_IndexController extends Mage_Core_Controller_Front_Action{

   /**
   * Index action
   *
   * @access public

   * @return void
   */
   public function indexAction() {

   echo "Huhh...., I knew you can do it!!!n";

    echo "Let's do it in proper way, you konow... ;) :D :P";

   }
}
?>
-Now type the URL https://website.com/index.php/helloworld/ in your browser and see the magic.
Hello World
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 https://website.com/index.php/helloword/ is similar to https://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 the IndexController.php file.
/**

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

echo "done it again....!!!!";
}
-Now, type the URL https://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>
  <routers>
    <helloworld>
      <use>admin</use>
        <args>
          <module>Multidots_HelloWorld</module>
          <frontName>admin_helloworld</frontName>
        </args>
    </helloworld>
  </routers>
</admin>
-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 <frontName>admin_helloword</frontName>.
-Now, head to the path /webroot/app/code/local/Multidots/HelloWorld/controllers and  create the Adminhtml directory.
Magento module in HelloWorld project controllers

-In the config.xml file put the below code after the </admin> tag:

<global>
  <helpers>
    <helloworld>
      <class>Multidots_HelloWorld_Helper</class>
    </helloworld>
  </helpers>
</global>
<adminhtml>
 <menu>
   <helloworld module="helloworld">
     <title>HelloWorld</title>
     <sort_order>100</sort_order>
    <children>
      <helloworld module="helloworld">
        <title>Hello World</title>
        <sort_order>0</sort_order>
        <action>admin_helloworld/adminhtml_index</action>
      </helloworld>
    </children>
   </helloworld>
 </menu>
</adminhtml>

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

-<helpers> 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:
<?php

 class Multidots_HelloWorld_Helper_Data extends Mage_Core_Helper_Abstract {

}
The helper class is used to render the menu in the admin panel, which is generated by the XML code in the tags <adminhtml> in the config.xml file
Step 7 : In the Adminhtml directory create IndexController.php file and put the below code snippet in that file.
<?php

class Multidots_HelloWorld_Adminhtml_IndexController extends Mage_Adminhtml_Controller_Action {

  /**
  * Admin controller index action
  *
  * @access public
  * @return void
  */

  public function indexAction() {

  echo 'hello world in the admin side..!!!'. '';

  }
}
-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:
Magento admin panel

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

Hello world message
That’s it guys, you have done it 🙂
It’s all simple and basic stuff relating to magento.
There is a lot to come ahead. Stay tuned till then.
If you guys have any query please feel free to ask and put your doubts in the comments section below. If you need you can also download the code from our github channel, here is the link.
Avatar for Multidots
Author: Multidots
Multidots is full service enterprise software development company with services revolving around consulting, enterprise-grade custom application development, custom mobile and cloud applications to automated and manual testing. We are proud to have served mid-sized to large enterprises including Fortune 500 Companies in our clientele.

20 Comments

Leave a Reply

How can we help you?

Submit your Business Enquiry here and we will get in touch shortly.

Quick Contact