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 save time, we will use Joomla Module Generator / Wizard plugin for YouCMSAndBlog IDE which you can download from Download section at VivoCiti. 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)

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:

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).

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"

For "File List" section we will not add any files so we will skip this box.

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"><!--google_ad_client = "pub-00000000000000";google_ad_width = 160;google_ad_height = 600;google_ad_format = "160x600_as";google_ad_type = "text_image";google_ad_channel = "6539407920";google_color_border = "EEF6FF";google_color_bg = "EEF6FF";google_color_link = "121a28";google_color_text = "819d26";google_color_url = "121a28";//--></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.

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

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

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 will 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

728x15_0ads_al

728 x 15 Adlink 4 links

468x15_0ads_al

468 x 15 Adlink 4 links

120x90_0ads_al

120 x 90 Adlink 4 links

160x90_0ads_al

160 x 90 Adlink 4 links

180x90_0ads_al

180 x 90 Adlink 4 links

200x90_0ads_al

200 x 90 Adlink 4 links

728x15_0ads_al_s

728 x 15 Adlink 5 links

468x15_0ads_al_s

468 x 15 Adlink 5 links

120x90_0ads_al_s

120 x 90 Adlink 5 links

160x90_0ads_al_s

160 x 90 Adlink 5 links

180x90_0ads_al_s

180 x 90 Adlink 5 links

200x90_0ads_al_s

200 x 90 Adlink 5 links

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

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.Value

Opt.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

BackgroundColor

EEF6FF

Ad BackgroundColor

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

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

That's All ! Now you can click on "Create" button.

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.

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

Congratulations ! You have created a module in Joomla.

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

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:

Change Module Name Textbox from "mod_Adsense" to "mod_Adsense10"

Click on "Joomla Version" listbox to select "1.0.x"

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)

You can click on "Create" button again and repeat Step 13 to 14.

You have created the same module but for different version.

Let's verify your generated files with mine as I show below for Joomla Module Version 1.5.x:mod_Adsense.xml:

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/>";?>

You can try to zip those two files:

For Joomla 1.5.x user, you may zip mod_adsense.php and mod_adsense.xml to mod_adsense.zip

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

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:

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

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 :)

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 . 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.