Unique Digital Design

Building Joomla components, the easy way

Posted under: Joomla

Joomla is our Content Management System (CMS) of choice here at Infused Design. It's simple to set up and customise, and is easy for our clients to get a handle on updating their own content. There is also a large array of add-ons, known as extensions, which enhance the core functionality and provide additional features such as contact forms, galleries and even full online shops.

Behind-the-scenes of Joomla 1.5 is a huge framework that covers all the aspects of displaying content, including component, module, plugin and database handlers. This can be a bit daunting at first, but fortunately there are some shortcuts. This article looks at creating custom Joomla components quickly and easily by bypassing most of the official framework.

A Joomla component essentially allows you to use custom PHP code on any page. At their core, they consist of just a PHP script and XML file. The XML file, also known as a "manifest" file, contains meta-information about the component, including its name, author and installation instructions.

It's easy to create a skeleton component that you can install and then develop in place. First, create an XML file named `com_myextension.xml`. In this file, put the following code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM "http://dev.joomla.org/xml/1.5/component-install.dtd">

<install type="component" version="1.5">
     <name>My Component</name>
     <description>My Joomla component that does some cool stuff</description>
     <administration>
         <menu>My Component</menu>
     </administration>
</install>

The text you put in the <name> tag determines the internal name of the component created. It will be converted to lowercase and all spaces removed. Thus, if you put "My Component" in the name element, Joomla will refer to it using `com_mycomponent`.

With just this XML file, you can already install your component! It won't be any use as it stands but give it a shot. Create a zip file called com_myextension.zip containing just the XML file and try installing it in Joomla. The folders `components/com_mycomponent` and `administrator/components/com_mycomponent` will be created, the component will be registered in the database and a menu item will appear in the Components menu of the admin area. You can even create a link to your component from the Menu Manager.

You will notice if you open the "Components > My Component" menu link in the admin section, or link to the component in the front-end, that you get a "404 Not Found" error. Our component doesn't really exist yet even though we told Joomla about it. The next step is to actually give the component something to display.

For a basic component this is incredibly simple: create a file called `mycomponent.php` under the `components/com_mycomponent` folder, and a file called `admin.mycomponent.php` under the `administrator/components/com_mycomponent` folder. These files simply get included at the relevant part of the page, so any content output will be displayed in your content area. If you leave the files blank, you will no longer get a 404 error, but instead your website's design template, with no content.

Put some simple HTML in each file and see what happens:

<p>Hello world!</p>

Remember I said it was really simple? It's true - you can stick any PHP code in here and it will be executed and displayed inside your content area. Try some simple PHP code:

<?php
$hi = 'Hello world!';
$len = strlen( $hi );
// reverse string and convert to uppercase
$hiRev = strrev( strtoupper( $hi ) );

echo "<p>$hi ($len characters)</p>";
echo "<p>$hiRev</p>";
?>

Normally you would want to connect to your database, read some files or generate content in some other method. That's outside the scope of this tutorial but we'll dive into it in a later post.