Joomla is a powerful CMS and widely used for many web applications like shopping cart, blogs , classifieds etc.This tutorial gives a brief details about the smallest unit(Module) in the joomla .How to create Joomla Module that are compatible for most of the version. Joomla module development tutorial provides a guide line for creating modules for Joomla 1.6, Joomla 1.7 , Joomla 2.5 and Joomla 3.

The Joomla 1.5 version is older and now Joomla stops its support, so here I am not explaining an out dated version of Joomla modules creation. The Joomla module is a smallest code unit that can be used in different places and call multiple time in a single template view also Joomla module have lot of options Joomla providing like parameters page rendering conditions etc.

We can start from the beginning How to create Joomla module or How to Joomla Module Development tutorial learn step by step.Here i just explain the Joomla module development tutorial with one sample module Its a social networking plugin that gives the administrator to give the follow urls from back end and it will appear on the template position.

Joomla module development tutorial

First of all create a folder with mod_socialnetworking name and have the following folder and file structure.

mod_socialnetworking.xml
mod_socialnetworking.php
index.html
helper.php
---tmpl/default.php //create a folder tmpl inside your mod_socialnetworking folder
---assets/images/social_icons.png //create a folder assets inside your mod_socialnetworking folder
---assets/css/mod_socialnetworking.css
---tmpl/index.html

Then inside your mod_socialnetworking.xml have the following code.

<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.7">
<name>Social Networking plugin</name>
<author>Jobin Jose</author>
<version>1.7.0</version>
<description>Social Networking plugin.</description>
<files>
<filename>mod_socialnetworking.xml</filename>
<filename module="mod_socialnetworking">mod_socialnetworking.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
<filename>assets/images/social_icons.png</filename>
<filename>assets/css/mod_socialnetworking.css</filename>
<filename>tmpl/index.html</filename>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field name="face_book_link" type="text" default="" label="Face Book Link " description="Face Book Link" size="60"/>
<field name="face_book_link_yes" type="radio" default="1" label="DisplayFB Link" description="DisplayFB Link">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
<field name="twitter_link" type="text" default="" label="Twitter Link " description="Twitter Link" size="60"/>
<field name="twitter_link_yes" type="radio" default="1" label="Display Twitter Link" description="Display Twitter Link">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
<field name="linkedin_link" type="text" default="" label="Linked In Link " description="Linked In Link" size="60"/>
<field name="linkedin_link_yes" type="radio" default="1" label="Display LinkedIn Link" description="Display LinkedIn Link">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
<field name="pinrest_link" type="text" default="" label="Pinterest Link " description="Pinterest Link" size="60"/>
<field name="pinrest_link_yes" type="radio" default="1" label="Display Pinterest Link" description="Display Pinterest Link">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
<field name="yelp_link" type="text" default="" label="Yelp Link " description="Yelp Link" size="60"/>
<field name="yelp_link_yes" type="radio" default="1" label="Display Yelp Link" description="Display Yelp Link">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
<field name="google_map_link" type="text" default="" label="Google Map Link " description="Google Map Link" size="60"/>
<field name="google_map_link_yes" type="radio" default="1" label="Display Google Map Link" description="Display Google Map Link">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
<field name="face_book_like" type="text" default="" label="Face Book Like " description="Face Book Like" size="60" />
<field name="face_book_like_yes" type="radio" default="1" label="Display FB Like Link" description="Display FB Like Link">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
</fieldset>
</fields>
</config>
<params></params>
</install>

And in your mod_socialnetworking.php have the following codes.

defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( dirname(__FILE__).DS.'helper.php' );
$SocialNetWrokingParams = modHomeSocialNetworking::getData($params);
require( JModuleHelper::getLayoutPath( 'mod_socialnetworking' ) );

And in your helper.php have the following code.

class modHomeSocialNetworking
{
function getData(&$params){
$SocialNetWrokingParams = array();
$SocialNetWrokingParams['face_book_link'] = $params->get( 'face_book_link' );
$SocialNetWrokingParams['twitter_link'] = $params->get( 'twitter_link' );
$SocialNetWrokingParams['linkedin_link'] = $params->get( 'linkedin_link' );
$SocialNetWrokingParams['pinrest_link'] = $params->get( 'pinrest_link' );
$SocialNetWrokingParams['yelp_link'] = $params->get( 'yelp_link' );
$SocialNetWrokingParams['google_map_link'] = $params->get( 'google_map_link' );
$SocialNetWrokingParams['face_book_like'] = $params->get( 'face_book_like' );
//display params
$SocialNetWrokingParams['face_book_link_yes'] = $params->get( 'face_book_link_yes' );
$SocialNetWrokingParams['twitter_link_yes'] = $params->get( 'twitter_link_yes' );
$SocialNetWrokingParams['linkedin_link_yes'] = $params->get( 'linkedin_link_yes' );
$SocialNetWrokingParams['pinrest_link_yes'] = $params->get( 'pinrest_link_yes' );
$SocialNetWrokingParams['yelp_link_yes'] = $params->get( 'yelp_link_yes' );
$SocialNetWrokingParams['google_map_link_yes'] = $params->get( 'google_map_link_yes' );
$SocialNetWrokingParams['face_book_like_yes'] = $params->get( 'face_book_like_yes' );
return $SocialNetWrokingParams;
}
}

And Finally in your default.php file have the following code.

<?php // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::root()."modules/mod_socialnetworking/assets/css/mod_socialnetworking.css");
?>
<div class="social_share_plugin">
<div class="follow_us">
<h6 class="font10">FOLLOW US</h6>
<ul class="social">
<?php if($SocialNetWrokingParams['face_book_link_yes']==1):?>
<li class="facebook"><a href="<?php echo $SocialNetWrokingParams['face_book_link'];?>" target="_blank"></a></li>
<?php endif; ?>
<?php if($SocialNetWrokingParams['twitter_link_yes']==1):?>
<li class="twitter"><a href="<?php echo $SocialNetWrokingParams['twitter_link'];?>" target="_blank"></a></li>
<?php endif; ?>
<?php if($SocialNetWrokingParams['linkedin_link_yes']==1):?>
<li class="likedin"><a href="<?php echo $SocialNetWrokingParams['linkedin_link'];?>" target="_blank"></a></li>
<?php endif; ?>
<?php if($SocialNetWrokingParams['pinrest_link_yes']==1):?>
<li class="pinit"><a href="<?php echo $SocialNetWrokingParams['pinrest_link_yes'];?>" target="_blank"></a></li>
<?php endif; ?>
<?php if($SocialNetWrokingParams['yelp_link_yes']==1):?>
<li class="yelp"><a href="<?php echo $SocialNetWrokingParams['yelp_link'];?>" target="_blank"></a></li>
<?php endif; ?>
<?php if($SocialNetWrokingParams['google_map_link_yes']==1):?>
<li class="locate"><a href="<?php echo $SocialNetWrokingParams['google_map_link'];?>" target="_blank"></a></li>
<?php endif; ?>
</ul>
<div class="clear"></div>
</div>
<?php if($SocialNetWrokingParams['face_book_like_yes']==1){?>
<div class="like_us">
<h6 class="font10">LIKE US</h6>
<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo $SocialNetWrokingParams['face_book_like'];?>e&amp;width=75&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=165519893567731" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
</div>
<?php } ?>
</div>

The assets folder should have the share_icon image and css file for your Joomla module. and the index.html is just for prevent direct access.

Joomla Module Development tutorial

Then finally just zip your folder structure and install via Joomla extension menu. upload your zip file and install the module after that just enable the module and set your template position.

Joomla Module Development tutorial

Yes you have done Joomla Module Development tutorial and its compatible for Joomla 1.6+ version are you happy ? 🙂 🙂 🙂

Would you like to download the module ?