You May Like






Subscribe to RSS through Email:

Enter your email address:



Home arrow Article & Tutorial
Developing Module extension for Joomla 1.0.x & 1.5 Print E-mail
Tag it:
Delicious
Digg
RedDot
Spurl
Reddit
YahooMyWeb
Technorati
Stumble

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)
  • 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"
    Image
  2. Following screen will be shown:
    Image
  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).
    Image
  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"><!--
    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.

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

    Image

  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"
    Image
    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:
    Image

    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:
    Image
    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_as234 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:
    Image
    9.5. Click on "Save" button

  10. Well, now will be your turn to create the rest of the parameters we are going to add in:
     #Parameter Name
    Type
    Label
     DefaultDescription
    Opt.
    Value
    Opt.
    Desc

     1google_ad_channel
    text
    Ad Channel Fill in Ad Channel ID if you have one. Leave it blank if do not have.   
    2
    google_ad_typelist
    Ad Type
     text_imageSelect 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
    textLink 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
      
            
  11. We are almost there. Hang on. Your screen should be the same as shown below:

    Image

  12. That's All ! Now you can click on "Create" button.
  13. 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.
  14. After you select a folder and click on "Select" button, following message box will be shown on your screen:
    Image
  15. Congratulations ! You have created a module in Joomla.
  16. 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
  17. 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.
  18. You have created the same module but for different version.
  19. 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.vivociti.com/" target="_blank">YouCMSAndBlog IDE (Joomla Mod Plugin)</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" description="Fill in Google Adsense Publisher ID."/>
            <param name="google_ad_format" type="list" default="" label="Ad Format" description="Select Google Adsense 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 600 Skyscraper</option>
                    <option value="160x600_as">160 x 600 Wide Skyscraper</option>
                    <option value="120x240_as">120 x 240 Vertical Banner</option>
                    <option value="300x250_as">300 x 250 Medium Rectangle</option>
                    <option value="250x250_as">250 x 250 Square</option>
                    <option value="336x280_as">336 x 280 Large Rectangle</option>
                    <option value="180x150_as">180 x 150 Small Rectangle</option>
                    <option value="728x15_0ads_al">728 x 15 Adlink 4 links</option>
                    <option value="468x15_0ads_al">468 x 15 Adlink 4 links</option>
                    <option value="120x90_0ads_al">120 x 90 Adlink 4 links</option>
                    <option value="160x90_0ads_al">160 x 90 Adlink 4 links</option>
                    <option value="180x90_0ads_al">180 x 90 Adlink 4 links</option>
                    <option value="200x90_0ads_al">200 x 90 Adlink 4 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>
                    <option value="120x90_0ads_al_s">120 x 90 Adlink 5 links</option>
                    <option value="160x90_0ads_al_s">160 x 90 Adlink 5 links</option>
                    <option value="180x90_0ads_al_s">180 x 90 Adlink 5 links</option>
                    <option value="200x90_0ads_al_s">200 x 90 Adlink 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" default=" text_image" label="Ad Type" description="Select Ad Type">
                    <option value="text">Text only</option>
                    <option value="text_image">Text and image</option>
                    <option value="image">Image only</option>
            </param>
            <param name="google_color_border" type="text" default="EEF6FF" label="Border Color" description="Ad Border Color"/>
            <param name="google_color_bg" type="text" default="EEF6FF" label="Background Color" description="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 Plugin (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 blank if do not have.
    $google_ad_channel = $params->get('google_ad_channel');
    //Select Ad Type
    $google_ad_type = $params->get('google_ad_type');
    //Ad Border Color
    $google_color_border = $params->get('google_color_border');
    //Ad Background Color
    $google_color_bg = $params->get('google_color_bg');
    //Ad Link Color
    $google_color_link = $params->get('google_color_link');
    //Ad Text Color
    $google_color_text = $params->get('google_color_text');
    //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/>";
    ?>

  20. 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
  21. 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:
    Image
    On Joomla 1.0.x Administrator page:
    Image
  22. When you go to Joomla frontpage, your new created module should be displayed and working:
    Image
  23. 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 simplicity.
    //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':
            $google_ad_width = 468;  $google_ad_height = 60;       
            break;
        case '234x60_as':
            $google_ad_width = 234;  $google_ad_height = 60;       
            break;           
        case '120x600_as':
            $google_ad_width = 120;  $google_ad_height = 600;       
            break;       
      case '160x600_as':
            $google_ad_width = 160;  $google_ad_height = 600;       
            break;
        case '120x240_as':
            $google_ad_width = 120;  $google_ad_height = 240;       
            break;       
        case '300x250_as':
            $google_ad_width = 300;  $google_ad_height = 250;       
            break;       
        case '250x250_as':
            $google_ad_width = 250;  $google_ad_height = 250;       
            break;   
        case '336x280_as':
            $google_ad_width = 336;  $google_ad_height = 280;       
            break;
        case '180x150_as':
            $google_ad_width = 180;  $google_ad_height = 150;       
            break;
        case '728x15_0ads_al':
            $google_ad_width = 728;  $google_ad_height = 15;       
            break;
        case '468x15_0ads_al':
            $google_ad_width = 468;  $google_ad_height = 15;       
            break;
        case '120x90_0ads_al':
            $google_ad_width = 120;  $google_ad_height = 90;       
            break;
        case '160x90_0ads_al':
            $google_ad_width = 160;  $google_ad_height = 90;       
            break;
        case '180x90_0ads_al':
            $google_ad_width = 180;  $google_ad_height = 90;       
            break;   
        case '200x90_0ads_al':
            $google_ad_width = 200;  $google_ad_height = 90;       
            break;   
        case '728x15_0ads_al_s':
            $google_ad_width = 728;  $google_ad_height = 15;       
            break;   
        case '468x15_0ads_al_s':
            $google_ad_width = 468;  $google_ad_height = 15;       
            break;   
        case '120x90_0ads_al_s':
            $google_ad_width = 120;  $google_ad_height = 90;       
            break;   
        case '160x90_0ads_al_s':
            $google_ad_width = 160;  $google_ad_height = 90;       
            break;
        case '180x90_0ads_al_s':
            $google_ad_width = 180;  $google_ad_height = 90;       
            break;
        case '200x90_0ads_al_s':
            $google_ad_width = 200;  $google_ad_height = 90;       
            break;   
    }   

    ?>

    <script type="text/javascript"><!--
    google_ad_client = "<?php echo $google_ad_client; ?>";
    google_ad_width = <?php echo $google_ad_width; ?>;
    google_ad_height = <?php echo $google_ad_height; ?>;
    google_ad_format = "<?php echo $google_ad_format; ?>";
    google_ad_type = "<?php echo $google_ad_type; ?>";
    google_ad_channel = "<?php echo $google_ad_channel; ?>";
    google_color_border = "<?php echo $google_color_border; ?>";
    google_color_bg = "<?php echo $google_color_bg; ?>";
    google_color_link = "<?php echo $google_color_link; ?>";
    google_color_text = "<?php echo $google_color_text; ?>";
    google_color_url = "<?php echo $google_color_url; ?>";
    //-->
    </script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>

  24. Go back to your Joomla frontpage to see the result:
    Image

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.

 

  No Comments.

Discuss...
Next >



Subscribe To

 Subscribe in RSS

Follow me...

Top 10 Most Downloaded

HTML5 Games for Phone & Tablet

Job Vacancies