(For more resources on Joomla!, see here.)
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:
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:
He re 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:
There’s not too much for now, but it’s working! Now we will enhance it and convert it into a contact form.
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
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.
Creating a “Send us a question” module
One of the first things we are going to create is an empty index.html file; this will be used so that no one can take a look at the folder structure for the module. For example, imagine that our site is installed in http://wayofthewebninja.com. If we go to http://wayofthewebninja.com/modules/mod_littlecontact/ we will see something like the next image:
If we try to click on mod_littlecontact.php, we will see the following phrase:
Direct Access to this location is not allowed.
That’s because the code we added to our file is as follows:
<?php
defined('_JEXEC') or die('Direct Access to this location is not
allowed.');
?>
Of course, we don’t want people to be able to see which files we are using for our module. For this place, we used the empty index.html file mentioned in the modules/mod_littlecontact folder.
This way, if anyone tries to go to http://wayofthewebninja.com/modules/mod_ littlecontact/, they will see only an empty screen.
Good, now note that when we add any file, we need to reflect it on the mod_littlecontact.xml file in the files section:
<files>
<filename
module="mod_littlecontact">mod_littlecontact.php</filename>
<filename>index.html</filename>
</files>
This way, when we pack the file for install, the installation process will take this file into account, otherwise it will be left out.
Once we have done this, we are going to create another file, a CSS one this time, so we can put our styles in it. For this we are going to first create a new folder, also called css. It will be placed in modules/mod_littlecontact/. Inside that folder we will create a file called styles.css; this file also needs to be declared in the XML:
<filename>css/styles.css</filename>
In this modules/mod_littlecontact/css/styles.css file we are going to place the following code:
#littlecontact h1{
font-size: 18px;
border-bottom: 1px solid #ffffff;
}
But then, if we are to apply these styles, we need to load this CSS file. How are we going to do this? Open the modules/mod_littlecontact/mod_littlecontact.php file and modify it as follows:
<?php
defined('_JEXEC') or die('Direct Access to this location is not
allowed.');
JHTML::stylesheet('styles.css','modules/mod_littlecontact/css/');
?>
<div id="littlecontact">
<h1>Just a simple contact form!</h1>
</div>
There’s not much change here; we have enveloped our previous content in a DIV, with the littlecontact ID, so that we can target our styles. This is the easy part, but there’s also an important one, shown as follows:
JHTML::stylesheet('styles.css','modules/mod_littlecontact/css/');
We are using the JHTML::stylesheet method to create a link, in our header section, to our CSS file. In fact, if we check the source code on our frontend, we will see:
<link rel="stylesheet" href="/modules/mod_littlecontact/css/
styles.css" type="text/css" />
This way our stylesheet will be loaded, and our module will look like the next screenshot:
As we can see, our styles have been applied. The JHTML::stylesheet method is quite easy to use, the first parameter being the file and the second one being the path to the file.
Now we are going to prepare our simple form. Again we will modify our mod_littlecontact.php file, and now it will look more like the following:
<?php
defined('_JEXEC') or die('Direct Access to this location is not
allowed.');
JHTML::stylesheet('styles.css','modules/mod_littlecontact/css/');
?>
<div id="littlecontact">
<h1>Just a simple contact form!</h1>
<form action="index.php" method="post" id="sc_form">
<label>Your name:</label><br/>
<input type="text" name="your_name" value="" size="40"
class="sc_input"/><br/><br/>
<label>Your question:</label><br/>
<textarea name="your_question" class="sc_input" rows="5"
cols="30"></textarea><br/><br/>
<input type="submit" name="send" value="Send"
class="sc_button" />
</form>
</div>
This is a common HTML form. We need some styling here, just to make it look good. Let’s make the following minimal changes to our styles.css file:
#littlecontact h1{
font-size: 18px;
border-bottom: 1px solid #ffffff;
margin-bottom: 15px;
}
.sc_input{
border: 1px solid #3A362F;
}
.sc_button{
background-color: #3A362F;
border: 0;
color: #ffffff;
padding: 5px;
}
Most styles are new, and modifications to previous h1 styling have been marked. With this minimal change our module looks a bit better.
You can see it in the following screenshot:
