Joomla! Documentation™

Developing a Basic Component

Let's create a Hello World! component. All file name and path references in this tutorial are relative to the directory you are developing your extension in.

Basic frontend

With your favorite editor, create a file site/helloworld.php containing the following text, yes, it is very simple but its purpose is simply to demonstrate where the entry point of the component is. After all, this is part 01.

When Joomla! looks for a component it will look at the option variable given in the url, in our case this will be option=com_helloworld. This means that Joomla! will look in the components directory for a folder named com_helloworld and load the file helloworld.php contained within that directory.

site/helloworld.php

Hello World!

Basic backend

You might at this point think to yourself, why are we creating a backend file when this part of the tutorial is only supposed to cover the frontend ? The answer to that question is simple, all configuration is done in the Administrator -- even though it is displayed for visitors in the frontend.

Joomla! will also automatically create a menu item for your component in the backend "Components" menu when the component is installed. In order to not make that link point to a page not found, we will give it a file to point to by creating a minimal backend.

With your favorite editor, create a file admin/helloworld.php containing the following text

admin/helloworld.php

Hello Admins!

Installation manifest

In order for our extension to be recognized by Joomla! we also need to provide an installation xml file, also called the manifest. Open up helloworld.xml in your favorite editor and add the following piece of code.

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.6.0" method="upgrade">

	<name>Hello World!</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>June 2011</creationDate>
	<author>John Doe</author>
	<authorEmail>john.doe@example.org</authorEmail>
	<authorUrl>http://www.example.org</authorUrl>
	<copyright>Copyright Info</copyright>
	<license>License Info</license>
	<!--  The version string is stored in the components table -->
	<version>0.0.1</version>
	<!-- The description is optional and defaults to the name -->
	<description>Description of the Hello World component ...</description>

	<!-- Note the folder attribute: This attribute describes the folder
		to copy FROM in the package to install therefore files copied
		in this section are copied from "site/" in the package -->
	<files folder="site">
		<filename>index.html</filename>
		<filename>helloworld.php</filename>
	</files>

	<administration>
		<menu>Hello World!</menu>
		<!-- Note the folder attribute: This attribute describes the folder
			to copy FROM in the package to install therefore files copied
			in this section are copied from "admin/" in the package -->
		<files folder="admin">
			<filename>index.html</filename>
			<filename>helloworld.php</filename>
		</files>
	</administration>

</extension>

As we can see, there is a lot of markup here. This is pretty much a minimal extension manifest and we will try to explain the most important bits and pieces. First off, we notice that we have an administration section, using our reasoning skills this pretty much means that whats outside the administration section is for the site application. This is not the full truth but pretty close to it.

The <files> tag has an attribute folder which specifies which folder to look for the files in inside our extension package. Our top level extension structure has two folders site and admin. So what this tag does is tell the Joomla! installer which files to copy and to where.

Inside our administration section we also have a <menu> tag which simply decides which name we want to put in the Components menu in the backend when the component is installed. If we do not provide this ourselves, Joomla! will simply make a name for us based on the component name.

Additional files

In order to stay in sync with the Joomla! conventions, and to not allow misconfigured web servers to allow directory listings in our component, we also need to add the following index.html file to every folder we create within our extension structure. The purpose of this file is to simply show a blank page if someone attempts to see the directory contents by using the absolute url.

index.html

<!DOCTYPE html><title></title>

Testing your component

You can test this basic component by putting index.php?option=com_helloworld or administrator/index.php?option=com_helloworld in your browser address bar and it should show you the text that you put into the entry point files for each application respectively.

Installing your component

If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the filesin the correct places inside your Joomla! installation, and the "Discover" option within the extension manager will install it, when selected.

After installlation will notice that the Hello World component is visible in the administrator site of your Joomla! installation under the Components menu.

Packaging an installation zip file

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

File listing

• helloworld.xml
• site/helloworld.php
• site/index.html
• admin/index.html
• admin/helloworld.php

Download this part

com_helloworld-part01.zip

Articles in this series

This tutorial is supported by the following versions of Joomla!

• Introduction
• Part 01 - Developing a Basic Component
• Part 02 - Adding a view to the frontend
• Part 03 - Adding a menu item type to the frontend
• Part 04 - Adding a model to the frontend
• Part 05 - Adding options to menu items
• Part 06 - Using a database
• Part 07 - Basic backend
• Part 08 - Adding language translation
• Part 09 - Adding actions to backend
• Part 10 - Adding decorations to the backend
• Part 11 - Adding validation
• Part 12 - Adding categories
• Part 13 - Adding component options
• Part 14 - Adding ACL
• Part 15 - Adding a script file