Developing Module Extension for Joomla 1.5 and Joomla 1.6

Developing Module extension for Joomla 1.0.x & 1.5

In this tutorial sequel I will demonstrate and guide you how to develop a Module extension for

Joomla 1.0.x and Joomla 1.5.x.

For efficiency and to save time, we will use Joomla Module Generator / Wizard plugin for

YouCMSAndBlog IDE which you can download from Download section at VivoCiti.com.

For you who use other editors, I believe you should still be able to follow this tutorial.

Let's start !

Module extension in Joomla is very simple to develop yet flexible. Flexible is because Module extension can be positioned in anywhere at your Joomla website, i.e. top of the front page or every page, left, right, bottom or user defined positions (user 1, user 2, and so on).

When will you decide to develop a Joomla Module A module can be developed for:

• a simple text output (for instance: displaying out static information or displaying dynamic information by retrieving some data from database)

• to display widgets from third parties (for instance: Amazon, Google Adsense, Statistic, services such as Yahoo Weather etc)

You will not try to develop a Module extension to handle:

• Modify page's content (i.e. filtering content's words, removing, adding new paragraphs, etc) because this sort of features will be more appropriate handled by Joomla Plugin extension which we will go through in next tutorial series

• Provides pages interface for user to input some data, defining a complicated flow from one page interface to another page interface because this sort of features will be handled more nicely and easier by a Joomla component extension.

A Google Adsense Module for Joomla 1.0.x and Joomla 1.5.x Online marketing is getting hotter nowadays. I think it will be good idea if I can show you how easily we can develop this module and how fast to do it if you decided to use Joomla Module Generator / Wizard plugin as I will show below:

1. Launch YouCMSAndBlog IDE and click on "PlugIn" menu and select "Joomla Module Generator"

2. Following screen will be shown:

3. You can easily type in all nessesaries information about this new module by following below

screenshot (on Module Name, Author, Author Email, Author URL, CopyRight, Author , License and Description textbox you can fill in with your own information).

4. For Joomla version we are going to develop for this moment let's use Joomla 1.5.x by clicking

on "Joomla Version" listbox to select "1.5.x" 5. For "File List" section we will not add any files so we will skip this box. 6. We will add several dynamic parameters to our Module in order to let our users to be able to

change them from Joomla Administrator page. But before that, let's me explain the background what sort of parameters we want to add. Following is Google Adsense code that we want to integrate into our Joomla website:

<script type="text/javascript">

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/ show_ads.js">

</script>

Let's put attention on all part which I have made it bold. You do not want to hard code those parameters in your module. Especially for "google_ad_client" which is your Google Adsense Publisher ID. You want to develop a module so you can share it with other Joomla users and let them using your proudly created module for Adsense. So how do we provide a flexibility for them to change all those bold part dynamically ? Well, this is where Joomla parameter come to help. And we will provides those parameters so our users can set their own Google Adsense publisher ID, text color, ad format and so on after they install this module at their Joomla CMS website. Let's go back to YouCMSAndBlog editor screen again. We are going to create those parameters in following steps.

7. Click on "Add Parameter" button and Add Parameter screen will be shown up

8. Let's start by adding the first parameter, "google_ad_client" which is equal to Google Adsense Publisher ID: 8.1. Fill in all information as shown in screenshot below, under "Type" section you can select "Text"

8.2. For "Default Value" text field, you can fill it with any default value if you wish to, i.e. your own Adsense Publisher ID. 8.3. Click on "Save" button and you will return to previous screen

9. Next parameter will be : "google_ad_format". Since Google Adsense provides various Adsense format, we will provide the same by using another type of parameter in Joomla, which is List. 9.1. Click on "Add Parameter" again and fill in required information as shown in screenshot below, under "Type" section you can select "List" and another section below will be displayed below it to let you define all options for this parameter type:

9.2. Now you can click on "Add" button to start adding options for "google_ad_format" List parameter. Let's add the first option as shown by screen below:

You can click on "Default" checkbox if you want this option to be the default option displayed later on Joomla admnistrator page. 9.3. I will let you try to add next options for this parameter by following a table below and I will wait for you till you finish adding all option to "google_ad_format" parameter with List type. If you want to modify option you have added, you can just double clicking on the option listed in Option Listbox and the same option form wil l be displayed for you to modify its value. By the way, here the complete options for you to add in. (while I take a coffee break :) ) :

Option Value Option Description

468x60_as 468 x 60 Banner

234x60_as 234 x 60 Half Banner

120x600_as 120 x 600 Skyscraper

160x600_as 160 x 600 Wide Skyscraper

120x240_as 120 x 240 Vertical Banner

300x250_as 300 x 250 Medium Rectangle

250x250_as 250 x 250 Square

336x280_as 336 x 280 Large Rectangle

180x150_as 180 x 150 Small Rectangle

468x15_0ads_al 468 x 15 Adlink 4 links





728x15_0ads_al_s 728 x 15 Adlink 5 links






10. 9.4. All right, after you add the last option, 200x90_0ads_al_s, your finishing screen should be the same as mine as shown below:

9.5. Click on "Save" button

11. Well, now will be your turn to create the rest of the parameters we are going to add in:

# Parameter Name Type Label Default Description Opt. Opt.

Value Desc

1 google_ad_channel text Ad Channel

Fill in Ad Channel ID if you have one. Leave it blank if do not have.

2 google_ad_type list Ad Type text_image

Select Ad Type

text Text only

text_image Text and image

image Image only

3 google_color_border text Border Color

EEF6FF Ad Border Color

4 google_color_bg text Background Color

EEF6FF Ad Background Color

5 google_color_link text Link Color 121a28 Ad Link Color

6 google_color_text text Text Color 819d26 Ad Text Color

7 google_color_url text URL Color 121a28 Ad URL Color

12. We are almost there. Hang on. Your screen should be the same as shown below:

13. That's All ! Now you can click on "Create" button. 14. Joomla Module Generator will ask you to select a destination folder to generate modAdsense

module's folder with its XML file and its PHP file. I will leave it to you to select your own local folder.

15. After you select a folder and click on "Select" button, following message box will be shown on your screen:

16. Congratulations ! You have created a module in Joomla. 17. Let's go to the folder you have selected as a destination and look for "modAdsense" folder.

Under this new folder, you will find two new generated file: mod_Adsense.xml and mod_Adsense.php

18. Got impressed ? Do not close Joomla Module Generator / Wizard Form yet. Remember we have generated a module for Joomla 1.5.x right ? Let's try to generate a Joomla Module for

Version 1.0.x by changing two fields on the screen: o Change Module Name Textbox from "mod_Adsense" to "mod_Adsense10" o Click on "Joomla Version" listbox to select "1.0.x" o Remove existing "mod_Adsense.php" from File List listbox by clicking on "Remove"

button next to the listbox. (For your information: we did not add this file before, it is added automatically by Module Generator when we clicked on "Create" button)

o You can click on "Create" button again and repeat Step 13 to 14. 19. You have created the same module but for different version. 20. Let's verify your generated files with mine as I show below for Joomla Module Version 1.5.x:

mod_Adsense.xml:

<?xml version="1.0" encoding="utf-8"?>

<install type="module" version="1.5.x">

<name>mod_adsense</name>

<author>Sunento Wu</author>

<authorEmail></authorEmail>

<authorUrl>http://vivociti.com</authorUrl>

<creationDate>Oct-28-2007</creationDate>

<copyright>Sunento Wu</copyright>

<license></license>

<version>1.0</version>

<description>

<![CDATA[

<p><h2>modAdsense</h2></p>

<p></p>

<p>Generated by: <a href="http://www.vivoci ti.com/"

target="_blank">YouCMSAndBlog IDE (Joomla Mod Plugi n)</a></p>

]]></description>

<files>

<filename

module="mod_adsense">mod_adsense.php</filename>

</files>

<params>

<param name="google_ad_client" type="text" default="pub-

00000000000000" label="Adsense Publisher ID" descri ption="Fill

in Google Adsense Publisher ID."/>

<param name="google_ad_format" type="list" default=""

label="Ad Format" description="Select Google Adsens e Format to

display">

<option value="728x90_as">728 x 90

Leaderboard</option>

<option value="468x60_as">468 x 60

Banner</option>

<option value="234x60_as">234 x 60 Half

Banner</option>

<option value="120x600_as">120 x 60 0

Skyscraper</option>

<option value="160x600_as">160 x 60 0 Wide

Skyscraper</option>

<option value="120x240_as">120 x 24 0 Vertical

Banner</option>

<option value="300x250_as">300 x 25 0 Medium

Rectangle</option>

<option value="250x250_as">250 x 25 0

Square</option>

<option value="336x280_as">336 x 28 0 Large

Rectangle</option>

<option value="180x150_as">180 x 15 0 Small

Rectangle</option>

<option value="728x15_0ads_al">728 x 15 Adlink 4

links</option>

<o ption value="468x15_0ads_al">468 x 15 Adlink 4

links</option>


links</option>


links</option>

<option value="180 x90_0ads_al">180 x 90 Adlink 4

links</option>


links</option>

<option value="728x15_0ads_al_s">728 x 15 Adlink

5 links</option>

<option value="468x15_0ads_al_s" >468 x 15 Adlink

5 links</option>


5 links</option>


5 links</option>

<option value="180x90_0ads_al_s">18 0 x 90 Adlink

5 links</option>


5 links</option>

</param>

<param name="google_ad_channel" type="text" default=""

label="Ad Channel" description="Fill in Ad Channel ID if you

have one. Leave it blank if do not have."/>

<param name="google_ad_type" type="list" de fault="

text_image" label="Ad Type" description="Select Ad Type">

<option value="text">Text only</opt ion>

<option value="text_image">Text and

image</option>

<option value="image">Image only</o ption>

</param>

<param name="google_color_border" type="tex t"

default="EEF6FF" label="Border Color" description=" Ad Border

Color"/>

<param name="google_color_bg" type="text"

default="EEF6FF" label="Background Color" descripti on="Ad

Background Color"/>

<param name="google_color_link" type="text"

default="121a28" label="Link Color" description="Ad Link

Color"/>

<param name="google_color_text" type="text"

default="819d26" label="Text Color" description="Ad Text

Color"/>

<param name="google_color_url" type="text"

default="121a28" label="URL Color" description="Ad URL Color"/>

</params>

</install>

mod_Adsense.php:

<?php

/*

* @author Sunento Wu

* Email :

* URL : http://vivociti.com

* Description :

*

* Generated By : YouCMSAndBlog IDE Joomla Module Pl ugin

(http://vivociti.com)

*

***/

/// no direct access

defined('_JEXEC') or die('Restricted access');

//Get parameters

//Fill in Google Adsense Publisher ID.

$google_ad_client = $params->get('google_ad_client' );

//Select Google Adsense Format to display

$google_ad_format = $params->get('google_ad_format' );

//Fill in Ad Channel ID if you have one. Leave it b lank if do

not have.

$google_ad_channel = $params->get('google_ad_channe l');

//Select Ad Type

$google_ad_type = $params->get('google_ad_type');

//Ad Border Color

$google_color_border = $params->get('google_color_b order');

//Ad Background Color

$google_color_bg = $params->get('google_color_bg');

//Ad Link Color

$google_color_link = $params->get('google_color_lin k');

//Ad Text Color

$google_color_text = $params->get('google_color_tex t');

//Ad URL Color

$google_color_url = $params->get('google_color_url' );

echo "Zip the generated module files (xml and php). <br/>Login

to Joomla admin to deploy this modAdsense module<br />";

echo "Congrats and have a good time developing with Joomla

<br/>";

?>

21. You can try to zip those two files: o For Joomla 1.5.x user, you may zip mod_adsense.php and mod_adsense.xml to

mod_adsense.zip o For Joomla 1.0.x user, you may zip mod_adsense10.php and mod_adsense10.xml to

mod_adsense10.zip 22. Deploy it through Joomla Administrator page. After deployed succesfully you can click on

mod_adsense (for Joomla 1.5.x) or mod_adsense10 (for Joomla 1.0.x) and your screen should be the same as shown below: On Joomla 1.5.x Administrator page:

On Joomla 1.0.x Administrator page:

23. When you go to Joomla frontpage, your new created module should be displayed and working:

24. All right you can finish the rest by copy and paste below source code to mod_adsense.php. I

guess it is easy to understand and I will not be longwinded explaining :)

//below is our customised / additional source code to get width

and height.

//you may use regular expression or explode for sim plicity.

//here using switch statement for clarity

switch ($google_ad_format) {

case '728x90_as':

$google_ad_width = 728; $google_ad_height = 90;

break;

case '468x60_as':


break;

case '234x60_as':


break;

case '120x600_as':


break;

case '160x600_as':


break;

case '120x240_as':


break;

case '300x250_as':


break;

case '250x250_as':


break;

case '336x280_as':


break;

case '180x150_as':


break;

case '728x15_0ads_al':


break;



break;



break;



break;



break;



break;

case '728x15_0ads_al_s':


break;



break;



break;



break;



break;



break;

}

?>

<script type="text/javascript">

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/ show_ads.js">

</script>

25. Go back to your Joomla frontpage to see the result:

That's all about Joomla Module Generator / Wizard Plugin. You can download the full module for Joomla 1.5.x and Joomla 1.0.x here (http://vivociti.com/component/option,com_remository/Itemid,40/func,select/id,8/)

Hope it is useful for you. And if it is yes, please Digg It or tag it to del.icio.us through small icons link on top right corner of this article. Share it with others.

See you for the next tutorial series. We will go through development of Joomla plugin or mambot. And some other Module tutorial but for next time, I will explain how to deal with database queries by using Joomla internal Database helper class.

Hopefully for Plugin tutorial in next tutorial series, I can demonstrate to you by using YouCMSAndBlog new plugin, a Joomla Plugin & Mambo Generator / Wizard for Joomla 1.5 and Joomla 1.0.x

So stay tune and do not forget to subscribe to VivoCiti's newsletter for you who have not done so.

Documents

Developing Module Extension for Joomla 1.5 and Joomla 1.6