In this tutorial 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:
• com_helloworld/helloworld.xml
• com_helloworld/helloworld.php
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: 10005For 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:
- 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.
very nice
very short , but very good
Great.Thanks
great
Great Tutorial..For Beginners
awesome explanation..
great 🙂 thank you for your tutorial. Hope you make it more than 😀
i need a componet like this
https://smartorderonline.com/smartorder-multi.php
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.
Best start-with-no-knowledge tutorial for Joomla Component creation I have ever seen! Good work – keep on going!
Excellent tutorial keep it up (y)
off course its simplest tutorial i ever seeen for joomla component development,very nice effort,keep it up
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,