This tutorial series, Joomla 3 component development, is currently in progress...

In this tutoial 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:
http://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.

http://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:

http://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.
Continued Education in Course How to create a Joomla 3 Component
You are viewing Section 2: Creating a Hello World Joomla 3 Component
I'm Learning Joomla Component Development! - My Introduction
How to add a Default View to your Joomla 3 Component
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

n/a Points
2014-09-04 2:50 am
IT is extremely simple,so i cant suggest you to improve it,however for mature example you can make its 2nd part,something like pro part etc,
n/a Points
2014-09-04 2:51 am

off course its simplest tutorial i ever seeen for joomla component development,very nice effort,keep it up

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

2 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!