Sunday, February 13, 2011

Creating a simple module

Basic Hello World Module

 

A Joomla! 1.5 Module is in its most basic form two files: an XML configuration file and a PHP controller file. The XML configuration file contains general information about the module (as will be displayed in the Module Manager in the Joomla! administration interface), as well as module parameters which may be supplied to fine tune the appearance / functionality of the module. The PHP file provides the controlling logic for the module. A very simple "Hello World" module might looking something like this.
/modules/mod_hello_world/mod_hello_world.xml:
!!! Note: it is very important, that XML file name matches module name. Otherwise, installer will install the module, but Joomla wouldn't show parameters and additional info stored in XML.
 version="1.0" encoding="utf-8"?>
 type="module" version="1.5.0">
    
        >Hello World - Hello> 
 
    
        >Ambitionality Software LLC> 
 
    
        >2008-06-23> 
 
    
        >All rights reserved by Ambitionality Software LLC 2008.> 
 
    
        >GPL 2.0> 
 
    
        >info@ambitionality.com> 
 
    
        >www.ambitionality.com> 
 
    
        >1.0.0> 
 
    
        >Provides a basic "Hello World" notice>
 
    
        >
        
                 module="mod_hello_world">mod_hello_world.php>
                >index.html>
        >
 
    
         />
>
Basically, this XML file just lines out basic information about the module such as the owner, version, etc. for identification by the Joomla! installer and then provides optional parameters which may be set in the Module Manager and accessed from within the module's logic to fine tune its behavior. Additionally, this file tells the installer which files should be copied and installed. Notice that we DO NOT include a reference in the files section for the XML file.
/modules/mod_hello_world/mod_hello_world.php:

//don't allow other scripts to grab and execute our file
defined('_JEXEC') or die('Direct Access to this location is not allowed.');
?>

    Hello World
What happens when this module is loaded is that Joomla! includes (via the PHP include directive) the mod_hello_world.php file and stores the output into an output buffer which is then rendered onto the page output. This file would simply produce
Hello World
to the final page.
/modules/mod_hello_world/index.html:
 bgcolor="#FFFFFF">
This really just helps to ensure that a default page is displayed if direct access to the directory is attempted without listing all of the other files in the directory. It's not necessary, but is good practice.
To package this module for distribution and installation, simply zip the files together, e.g.,
% cd mod_hello_world
% zip mod_hello_world.zip mod_hello_world.php mod_hello_world.xml index.html
The resulting mod_hello_world.zip file may be uploaded and installed through the standard Joomla! 1.5 Extension Manager.

Real Joomla! 1.5 Style Module Implementation

Now that was easy...too easy. In fact, that was pretty much the simplest form of a module possible. In reality a module will probably be doing something much more substantial. Let's assume that our modules are going to be more complex - we need to take advantage of the MVC (Model View Controller) design pattern and consider using the following file layout for a "Hello World 2" module instead:
/modules/mod_hello_world2/index.html
/modules/mod_hello_world2/mod_hello_world2.php
/modules/mod_hello_world2/mod_hello_world2.xml
/modules/mod_hello_world2/helper.php
/modules/mod_hello_world2/en-GB.mod_hello_world2.ini
/modules/mod_hello_world2/tmpl/index.html
/modules/mod_hello_world2/tmpl/default.php
The differences to note here are that there are three additional files beyond what the "Hello World" module had, namely helper.php, tmpl/default.php, and the en-GB.mod_hello_world2.ini file. The purpose in adding the first two files is two-fold. Firstly, we separate the module's logic into the helper.php file to ensure that all of the thinking and data access is performed here and separate out the module's presentation / template into the tmpl/default.php file (the (X)HTML). I argue that this is just good programming - separating logic from presentation. There is a second advantage to this, however, which is that it will allow the HTML / presentation to be overridden easily by any Joomla! 1.5 template for optimal integration into any site. (Overriding module and component presentation in templates is beyond the scope of this article, however it should be addressed as it's really useful).
Let's take a look at what these files might look like and discuss what's going on.
/modules/mod_hello_world2/mod_hello_world2.php:

//no direct access
defined('_JEXEC') or die('Direct Access to this location is not allowed.');
 
// include the helper file
require_once(dirname(__FILE__).DS.'helper.php');
 
// get a parameter from the module's configuration
$userCount = $params->get('usercount');
 
// get the items to display from the helper
$items = ModHelloWorld2Helper::getItems($userCount);
 
// include the template for display
require(JModuleHelper::getLayoutPath('mod_hello_world2'));
?>
The important differences to note are that (1) we include a helper file which will be the work-horse of our logic and data access and (2) once we have our data, we just load a template which will use our data and render it as it sees fit.
/modules/mod_hello_world2/mod_hello_world2.xml
 version="1.0" encoding="utf-8"?>
 type="module" version="1.5.0">
    
        >Hello World 2 - Hello> 
 
    
        >Ambitionality Software LLC> 
 
    
        >2008-06-23> 
 
    
        >All rights reserved by Ambitionality Software LLC 2008.> 
 
    
        >GPL 2.0> 
 
    
        >info@ambitionality.com> 
 
    
        >www.ambitionality.com> 
 
    
        >1.0.0> 
 
    
        >Provides a random listing of registered users>
 
    
        >
        
                 module="mod_hello_world2">mod_hello_world2.php>
                >index.html>
                >helper.php>
                >tmpl/default.php>
                >tmpl/index.html>
        >
 
    >
        
         tag="en-GB">en-GB.mod_hello_world2.ini>
    >
 
    
        >
        
                 name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="PARAMMODULECLASSSUFFIX" />
 
        
                 name="@spacer" type="spacer" default="" label="" description="" />
 
        
         name="usercount" type="text" default="5" label="LABEL USER COUNT" description="DESC USER COUNT" />
    >
>
The main differences to note here are that we have added a language file reference (we could have added more) and we added some parameters.
/modules/mod_hello_world2/helper.php:

defined('_JEXEC') or die('Direct Access to this location is not allowed.');
 
class ModHelloWorld2Helper
{
    /**
     * Returns a list of post items
    */
    public function getItems($userCount)
    {
        // get a reference to the database
        $db = &JFactory::getDBO();
 
        // get a list of $userCount randomly ordered users 
        $query = 'SELECT a.name FROM `#__users` AS a ORDER BY rand() LIMIT ' . $userCount  . '';
 
        $db->setQuery($query);
        $items = ($items = $db->loadObjectList())?$items:array();
 
        return $items;
    } //end getItems
 
} //end ModHelloWorld2Helper
?>
This helper class (note that it is named for the module name so that it doesn't collide with other class names) simply retrieves a list of all users in the database and randomly selects a subset of those based upon the number supplied as $userCount.
/modules/mod_hello_world2/tmpl/default.php:
 defined('_JEXEC') or die('Restricted access'); // no direct access ?>
 echo JText::_('RANDOM USERS'); ?>
    foreach ($items as $item) { ?>
  • echo JText::sprintf('USER LABEL', $item->name); ?> } ?>
Here we simply create an unordered HTML list and then iterate through the items returned by our helper (in mod_hello_world2.php), printing out a message with each user's name.
/modules/mod_hello_world2/en-GB.mod_hello_world2.ini:
LABEL USER COUNT=User Count
DESC USER COUNT=The number of users to display
RANDOM USERS=Random Users for Hello World2
USER LABEL=%s is a randomly selected user
Here we simply identify strings which appear in the module configuration file and the module template which appear in JText::_ or JText::sprintf statements. This allows someone to easily write a new language file without editing any of the HTML or code for the module.
Now all we have to do is zip up these files, as in:
% pwd
/somesite/modules/mod_hello_world2
% zip -r ../mod_hello_world2.zip *
% ls ..
mod_hello_world2.zip
The resulting mod_hello_world2.zip file is ready for installation and distribution. When the ZIP file is installed, the en-GB.mod_hello_world2.ini file is copied to /language/en-GB/en-GB.mod_hello_world2.ini and is loaded each time the module is loaded. All of the other files are copied to the /modules/mod_hello_world2 subfolder of the Joomla! installation.

Joomla! 1.5 Database installation usage

Modules should in general not interact with the database except for normal operations (SELECT, UPDATE, INSERT, DELETE). But in some cases it might be needed to ALTER or even CREATE tables, even though it is not recommended. There is no common practice to this, but here is one way of doing just that:
Add a module parameter that to the manifest:
 group="advanced">
                 name="is_installed" type="radio" default="0" label="Is module installed?" description="Only use this if you know the consequences! Click No to recreate database">
                         value="0">No>
                         value="1">Yes>
                >
        >

Then you can use the parameter to switch the state. Since the module parameters is already loaded from the database at this point, any overhead should not be noticable this way.
// put this in the module function. 
function myModuleReInstall() {
        if (!$params->get('is_installed')) {
                $database =& JFactory::getDBO();
                $query = "CREATE TABLE IF NOT EXISTS `example` ( `id` INT, `data` VARCHAR(100) );";
 
                $database->setQuery($query);
                $result = $database->query();
 
                $params->set('is_installed', 1);
        }
}
This is meant as an example and it can be extended in various ways. However - If you do that, you should also ask yourself if this is the right way to do things. Components do have real installers and this could be the best solution even though a module can be quicker to do.

Creating a basic Joomla! template

Introduction

The purpose of this tutorial is to serve as an introduction to creating Joomla! templates. It will cover the essential files and code needed to create a basic template. The code is presented so it can be cut and pasted with very little modification needed.

Setting up a directory structure

To make the most basic template, create a new folder in the "templates" folder. Name this folder after your template i.e. "mynewtemplate".
Using a text editor create the files "index.php" and "templateDetails.xml"
To keep things organized, make 2 new folders called "images" and "css". Inside the "css" folder create a file called "template.css".
Although it is fine to place all your CSS code directly in your "index.php" file to start, many web developers prefer to place their CSS code in a separate file that can be linked from multiple pages using the "link" tag.
This is the most basic practical setup.
Outline of folder and file structure:
  • mynewtemplate/
    • css/
      • template.css
    • images/
    • index.php
    • component.php
    • templateDetails.xml
     

    Creating a basic templateDetails.xml file

    The templateDetails.xml file is essential. Without it, your template won't be seen by Joomla!. The file holds key "metadata" about the template.
    Lets look at an example:

     version="1.0" encoding="utf-8"?>
    
     version="1.5" type="template">
            >mynewtemplate>
            >2008-05-01>
            >John Doe>
            >john@example.com>
            >http://www.example.com>
            >John Doe 2008>
            >GNU/GPL>
            >1.0.2>
            >My New Template>
            >
                    >index.php>
                    >component.php>
                    >templateDetails.xml>
                    >template_thumbnail.png>
                    >images/background.png>
                    >css/template.css>
            >
            >
                    >breadcrumb>
                    >left>
                    >right>
                    >top>
                    >user1>
                    >user2>
                    >user3>
                    >user4>
                    >footer>
            >
    >
    So, as you can see, we have a set of information between markup tags ( the ). Your best approach is to cut and paste this into your "templateDetails.xml" file and change the relevant bits (such as ).
    The part should contain all the files that you use - you possibly don't know what they are called yet - don't worry update it later.
    Leave the positions as they are - these are a common set so you will be able to switch easily from the standard templates.

    Creating a basic index.php file

    The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place PHP code where the content of your site should go. Here is the bare-bones code ready for you to cut and paste.
    Lets start at the top:
     defined( '_JEXEC' ) or die( 'Restricted access' );?>
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    "http://www.w3.org/1999/xhtml" 
       xml:lang="language; ?>" lang="language; ?>" >
    The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.
    Now the header for real:
    
    include type="head" />
    "stylesheet" href="baseurl ?>/templates/system/css/system.css" type="text/css" />
    "stylesheet" href="baseurl ?>/templates/system/css/general.css" type="text/css" />
    "stylesheet" href="baseurl ?>/templates/template?>/css/template.css" type="text/css" />
    
    The first line gets Joomla to put the correct header information in. This includes the page title, meta information as well as system JavaScript. The rest creates links to two system style sheets and to your own style sheet (if it's named template.css and is located in the css folder).

    Now for the main body:
    
    include type="modules" name="top" /> 
    include type="component" />
    include type="modules" name="bottom" />
    
    Amazingly, this will suffice! Yes, its a very basic layout, but it will do the job. Everything else will be done by Joomla!. Note: you will need to ensure your menu is set to go into the "top" module position.
    Finish it off - one last bit:
    Full template source code:
    
    
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
       xml:lang="language; ?>" lang="language; ?>" >
    
    
    
    
    
     
    
    
    
    
    HINT: there are a couple of ways you can preview your index page as you put it together, either insert the styles into the head of the index page or directly link it to the style sheet you will be using temporarily. You can remove these links before packaging the file.

    Packaging the template for installation

    A directory with several loose files is not a convenient package for distribution. So the final step is to make a package. This is a compressed archive containing the directory structure and all the files. The package can be in ZIP format (with a .zip extension), in TAR-gzip format (with a .tar.gz extension), or in TAR-bz2 format (with a .tar.bz2 extension).
    If your template is in a directory mytemplate/ then to make the package you can connect to that directory and use commands like:
  • tar cvvzf ../mytemplate.tar.gz *
  • zip -a -r ..\mytemplate.zip *.*

Note to Mac OS X users

Note to template developers using Mac OS X systems: the Finder's "compress" menu item produces a usable ZIP format package, but with one catch. It stores the files in AppleDouble format, adding extra files with names beginning with "._". Thus it adds a file named "._templateDetails.xml, which Joomla 1.5.x can sometimes misinterpret. The symptom is an error message, "XML Parsing Error at 1:1. Error 4: Empty document". The workaround is to compress from the command line, and set a shell environment variable "COPYFILE_DISABLE" to "true" before using "compress" or "tar". See the AppleDouble article for more information.
To set an environment variable on a Mac, open a terminal window and type:
export COPYFILE_DISABLE=true
Then in the same terminal window, change directories into where your template files reside and issue the zip command. For instance, if your template files have been built in a folder in your personal directory called myTemplate, then you would do the following:
cd myTemplate
zip -r myTemplate.zip *


Conclusion 

You should now have created a template that works. It won't look like much yet. The best thing to do now is start experimenting with the layout.

Saturday, January 15, 2011

Sunday, April 18, 2010

CKForms

4939_ckforms.gif
CKForms is a Joomla 1.5 native component to generate Forms without any development knowledge. CKForms can save data in
Database and export them to CSV format.
Fields can be validated as text, number, date and email. A File upload field is available. Forms created can be backup
and restored easily with one click. An HTML Editor is available and a Captcha code can be used to secure the forms. A plug-in and a module are available to display forms. The layout can be customized with CSS, custom text inserted between fields. Data saved can be displayed in the Front-end interface.

/* Important LFI and SQL security fix */
/* New Plug-in to display front-end data */
/* CKForms is now on Twitter */
/* New Forum for CKForms Component */

/** Bugs fixed **
- Fix the display of warning message when save data for forms created in previous releases
- Fix blank form et loose of data when captcha code is wrong
- Fix read only parameter for "Date" fields
- Add translation feature for text "registered at"
- Fix bad characters displayed in the CKForms modules
- Fix display of datepicker translation
- Fix display data saved for no option selected
- Fix duplicate process forget forms options and fields options
- Fix -> for e-mail clients
- Fix restore problem for backup before 1.3.4 release
- Fix display data (empty records)
- Fix multiple forms display in plug-in
- Fix notice display messages
- Important LFI and SQL security fix


/** New features **

- Change javascript Framework from JQuery to Mootools (native in Joomla)
- New error message - more detailled (if no custom message)
- Sort data saved in backend and frontend
- If text result empty and redirection empty, the page is redirected to the home page
- new backup/restore procedure
- Add filter to search in saved data
- Add connected user info in text field
- Plug-in to display data in an article
- Hidden field with the article ID with the Plug-In
- Display data record détail in Front-End page
- Choose the fields than can be saved
- Forward form data to the redirect URL

Download CKForms

JForms

Using JForms you can make beautiful and effective forms.

Following are the JForm features

* Single screen form creation using Easy WYSIWYG (Drag-n-drop) Form editor.
* A variaty of form elements:
* HTML elements that allows the user to have HTML within the form.
* Joomla! User Info Element that collects data about the user from Joomla! Database.
* Ability to define validation rules for different form elements.
* Ability to define who has the permission to fill any given form.
* Ability to define default (Pre-selected) value for most of form elements.
* IP Tracking.
* AJAX based Records manager featuring control over what fields to display and a simple keyword search.
* Generated forms are accessible and compliant with xHTML standards.
* Everything is validated on the both client-side and server-side.
* Ability to send submissions to any number of E-mails.
* Ability to send users confirmatory messages.
* Customizable E-mail messages.


download Jform

Saturday, February 20, 2010

EnyTheme Eny Image Slider

EnyTheme Eny Image SliderEnyTheme Eny Image Slider

You have seen it, or something very much like it at the Apple site (Apple/Mac); it is a slideshow that allows you to set breakpoints to the slider which makes it easy to group up to 25 images into separate sections.

Break Up In Groups

It lends itself perfectly to showcase your VirtueMart products or your articles in a clearly structured presentation; and it comes with no less than 15 color styles and if that was not enough, go ahead and make your own, the Photoshop PSD files are included.

It's very easy to use and also very simple to set up: (1) Install the module, (2) Pick the module position you want it to be displayed (like any other Joomla module); (3/4) then all you need to do is link the images (up to 25) with their corresponding destination URL (an article or product for instance) and (5) Last but not least set up to five tab names and their breakpoints in percentage.

ARI Soft's Image Magnifer

ARI Magnifier Review
ARI Magnifier Review
ARI Magnifier Review
ARI Magnifier Review

ARI Soft's Image Magnifer is an interesting plugin that let you show thumbnails of large images in your articles without using popups or liteboxes.

ARI Magifier is a Joomla 1.0 and 1.5 plugin that brings a nice magnification effect to your article images.

Just by mousing over the images you will see a magnifying glass effect that can be really useful if the source image is really large.

The plugin gives you the option to use a specific image as a thumbnail or better yet, just specify the source image and the plugin will create a highquality thumbnail of your original image automatically.

The plugin options are very basic, standard thumbnail width and/or height, thats it. That is all you need.

And these two options can be overridden when you add the image to your article via inline parameters.

The parameters included are source image (mandatory), source thumbnail (if you don't want to use the automatic thumbnail option), thumbnail width and thumbnail height.

Just add a single line of plugin/mambot code, in its simlest form all you need to use is:

{arimagnify src="/images/stories/largeimage.jpg"}

...and that will display your large image in your article (sample pictures).

If you specify a thumbnail size (as an inline parameter or just using your preset plugin defaults) as 500pxls wide, and the large image is 1000pxls wide, you will have a magnification of 2x. The larger the image and the smaller the thumbnail, the greater the magnification and effect.

This can be a very useful plugin depending of your website content. A website about cars, clothes, fashion or girls (blushing...) could certainly use this function to get away from using popup images or liteboxes for greater details to their smaller thumbnails.

The plugin also work with VirtuMart and is crossbrowser friendly with Firefox, Internet Explorer 6/7, Opera and Safari support.

You can buy this as a standalone plugin or (as we recommend) you can buy their ARI Smart Content component and get so much more for just a little more money.