Chapter 7. Creating Our Own Modules

"Packing together all of our efforts."

In the previous chapter, we saw how we could modify our template to enhance its appearance, or to add some useful features. Though that didn't take us too much time, if we want to apply these features to another site we will need to re-do all the work again.

Repeating the process again can be a waste of time and effort. Wouldn't it be better to create a module packing that feature? That way we can use the fruit of our work in a convenient way.

After all, if you remember the first few chapters of our book, it was pretty easy to download and install all those extensions that we now have on our site.

In this chapter, we are going to build a simple module, just a tiny contact form. We will build a basic foundation, and then enhance it with some nice features. Sadly, we can't make a full, thorough guide. We would need almost three entire chapters for that; so we will concentrate on the basic things.

But don't worry, there are lots of resources on building Joomla! Extensions. For example, there is the Learning Joomla! 1.5 Extension Development book from Packt. However, let's take a look at the content of the chapter. In this chapter, we will:

  • Learn the basics of Joomla! module creation
  • Create a "Send us a question" module
  • Make a better form using JavaScript
    • Send the form using jQuery AJAX
    • Validate form fields using jQuery, and learn why it is important to validate
  • Pack and install our module

Interested? Then don't wait, start right away!

Learning the basics of Joomla! module creation

Building a basic Joomla! module is not that difficult. In fact it's quite easy. Just stay with me, and we will divide the task into some easy-to-follow steps. First of all, we need to create a folder for our module, for example, mod_littlecontact. This folder is where we will place all the files necessary for our module.

For example, one of the files we are going to need is the mod_littlecontact.php file, which is named exactly the same as the folder, but with a .php extension. Let's see what we need to put in it:

<?php
                    defined('_JEXEC') or die('Direct Access to this location is not allowed.'),
                    ?>
                    <h1>Just a simple contact form!</h1>
                

We will look at just the basics. First, defined('_JEXEC') checks whether the file has been included by Joomla! instead of being called directly. If it has been included by Joomla!, the _JEXEC constant would have been defined.

With this PHP file created we need to create another file, an XML one this time. We will call it mod_littlecontact.xml; notice that, again, the name is the same as the folder one. Just create the file, and after that we will place the following contents in it:

<?xml version="1.0" encoding="utf-8"?>
                    <install type="module" version="1.5.0">
                    <name>Little Contact Form</name>
                    <author>Jose Argudo Blanco</author>
                    <creationDate>2010</creationDate>
                    <copyright>All rights reserved by Jose Argudo Blanco.</copyright>
                    <license>GPL 2.0</license>
                    <authorEmail>[email protected]</authorEmail>
                    <authorUrl>www.joseargudo.com</authorUrl>
                    <version>1.0.0</version>
                    <description>A simple contact form</description>
                    <files>
                    <filename module="mod_littlecontact"> mod_littlecontact.php</filename>
                    </files>
                    </install>
                

Most of the contents of this XML file are quite easy to follow and very self-explanatory. In the files section, we have included all the files necessary for our module. Notice that we do not include the XML file itself.

With these two files created, we can give a try to this simple module. Copying this folder into our Joomla! modules folder won't work, as Joomla! requires us to install the extension through the Extensions | Install/Uninstall menu. So, what do we need to do? Just compress these two files into a ZIP file by using any tool of your liking. At the end we will need to have a mod_littlecontact.zip file with the following two files inside:

  • mod_littlecontact.php
  • mod_littlecontact.xml

Installing our module is done exactly as with any other modules. Go to the administrator screen of our site, then go to the Extensions | Install/Uninstall menu, search and select the file, and then click on Upload File & Install button.

If all goes OK, and it really should, we will be able to find our module listed in Extensions | Module Manager, as seen in the following screenshot:

Learning the basics of Joomla! module creation

We can click in the module name, just as we would do with any of the others. If we enter the administration panel of the module we will see a screen very much like the other modules, as Joomla! standardizes this screen. Just take a look at the Details zone, which will look like the next screenshot:

Learning the basics of Joomla! module creation

Here we can select the parameters we want, and enable the module. This time we will place it in the module_7 position of our template. Also note that the description is the one that we place in the module XML file:

<description>A simple contact form</description>
                

After we have enabled the module, we will be able to see it in the frontend, in the module position we have selected:

Learning the basics of Joomla! module creation

There's not too much for now, but it's working! Now we will enhance it and convert it into a contact form.

Note

Note that now that we have installed our module, a new folder will have been created into our Joomla! installation. We can find this folder in the modules folder, it will be called mod_littlecontact.

So now we have this structure on our Joomla! Site:

modules/
                    mod_littlecontact/
                    mod_littlecontact.php
                    mod_littlecontact.xml
                

Tip

As the module is already installed, we can modify these files, and we will be able to see the changes without needing to reinstall it.

We have just accomplished our first step; the basics are there, and now we can concentrate on making our modifications.

Note

You can find all this code in the code bundle, Chapter 7, in the folder called "Learning the basics". Take a look into it!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.55.198