step by-step guide for magento module development. Hire dedicated magento 2 developers from mageguru with 5+ years experience, starting at just $18/hr to render highly robust, scalable and high-performance magento 2 compliment your business requisites.
3. 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.
4. 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]
5. – 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]
6. 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.
7. • 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:
8.
9. • 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:
11. 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:
12.
13. 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
14. 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>
16. – 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.
17. 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.
18. -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";
}
}
?>
19. -Now type the URL https://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
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.
20. /**
* 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.
21. 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.
24. -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
25. 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.
26. 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 �
It’s all simple and basic stuff relating to magento.
There is a lot to come ahead. Stay tuned till then.
27. Follow Us on Social Media
• https://plus.google.com/11731392778750
2991442
• https://www.facebook.com/MageGuru.co/
• https://twitter.com/mageguruco
• https://www.pinterest.com/mageguru/
• https://www.linkedin.com/company/mageg
uru/
• https://www.youtube.com/channel/UCIPw4
CAb47uqsA7nMfsJKgQ
