Creating a Hello World Joomla 3 Component
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:
- Create the files for the component
- Install the component
- View the component on the front end of the website
Creating the files for the Hello World component
- Within your Components folder, create a folder named com_helloworld
- Within your new com_helloworld folder, create a blank file named helloworld.xml
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:
Installing our Hello World component
- Log into your Joomla admin dashboard
- In the top menu, click Extensions and then click Extension Manager
- In the left menu, click the Discover link
- In the top menu, click the Discover button
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:
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.
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  naming your component's folder and  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:
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.
If you followed along with our tutorial thus far, when you attempt to uninstall this component:
- The component files will be deleted successfull, however
- 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.
‹Section 1: I'm Learning Joomla Component Development! - My Introduction
›Section 3: How to add a Default View to your Joomla 3 Component
Joomla Community Google+ Hangout #3
June 3rd, 2014
Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!
Support Center Login
Social Media Login
to create a Joomla 3 Component
|3.||Views - default|
|4.||Views - new|
|8.||Models - new|
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,
2014-09-04 2:51 am
off course its simplest tutorial i ever seeen for joomla component development,very nice effort,keep it up
2014-11-10 8:18 am
Best start-with-no-knowledge tutorial for Joomla Component creation I have ever seen! Good work - keep on going!
2015-01-06 11:22 am
i need a componet like this
2015-01-06 11:40 am
Unfortunately, I am unaware of another component that is similar to this. If that component has what you need in it, I recommend simply using that.
2015-04-27 10:24 am
great :) thank you for your tutorial. Hope you make it more than :D