Creating a Hello World Joomla 3 Component

In this tutorial we are going to create a Hello World component for Joomla 3.3. When we say, “create a component“, we mean:

1. Create the files for the component
2. Install the component
3. View the component on the front end of the website

Creating the files for the Hello World component

1. Within your Components folder, create a folder named com_helloworld
2. Within your new com_helloworld folder, create a blank file named helloworld.xml
3. Within your new com_helloworld folder, create helloworld.php with the following code:

   <?php  echo "Hello World";

   That’s it! We’ve just setup the following structure:
   • com_helloworld/helloworld.xml
   • com_helloworld/helloworld.php

Installing our Hello World component

1. Log into your Joomla admin dashboard
2. In the top menu, click Extensions and then click Extension Manager
3. In the left menu, click the Discover link
4. In the top menu, click the Discover button
5. You will see com_helloworld show up in the list of avaialble extensions. Click the checkbox to the left of it, and then click the Install button in the top menu.You will see a few Warnings and Messages at the top of the page:

   • JInstaller: :Install: Cannot find Joomla XML setup file
   • Component Install: The XML file did not contain an administration element
   • Discover install failed: 10005

   For now, we will ignore these messages. We’re doing very barebones testing, and our component is missing a few things, which in turn is triggering these messages to show.

Viewing our Hello World component

To see the Hello World component in action, visit your Joomla website and add the following at the end of your url:
index.php?option=com_helloworld

For example:
https://example.com/index.php?option=com_helloworld

When going to this url, Joomla will execute the helloworld component. It should look something similar to the screenshot to the right.

What have we learned?

option=com_component identifies the component to load

If you set the option variable in the URL to com_something, Joomla will see this as a request to load that component.

https://example.com/index.php?option=com_helloworld

Looking at the URL above, Joomla knows we are requesting the com_helloworld component to load. Joomla looks for this component in this folder: /components/com_helloworld

The first file loaded is component.php

If you specify ?option=com_helloworld in your URL, Joomla will load files from /components/com_helloworld. Within that folder, Joomla will then load helloworld.php.

Case Matters – use lowercase

Use all lowercase when [1] naming your component’s folder and [2] calling it in the URL.

For example, do not name your folder com_HelloWorld. Also, do not use uppercase in your URL, like the following:

https://example.com/index.php?option=com_HelloWorld

Dashes and Underscores are acceptable

In our testing, in addition to naming the component “com_helloworld”, we tested:

• com_hello–world – uses a dash
• com_hello_world – uses an underscore

In both situations, the components worked – so it’s safe to say you can use dashes and underscores when setting up your component’s name.

Uninstalling

If you followed along with our tutorial thus far, when you attempt to uninstall this component:

1. The component files will be deleted successfull, however
2. The component will still linger in the database. Simply use a tool like phpMyAdmin to remove the component from your _extensions table to clean if from your site.