Step 1

The Basics

Developing a component for Joomla! can be a difficult and complex undertaking. The more complicated the functionality you require, the more complex your code must be to achieve the desired results. This example is designed to give you a basic understanding of how a component is created.

Because Joomla! can now give your component the ability to use the Auto Updater, this will be added to the later steps in this tutorial. But first, it's important to get an understanding of the basics.

The files for Step 1 of this tutorial can be found here:
https://github.com/Smart-Website/hello-world/tree/step-1

Unzip the files to review them on your local machine.

The first thing you will notice is the file structure. When you create a component for Joomla!, it's a wise idea to put the files for your component in a directory that is named to coincide with your component. In this case, the root directory of our component is com_helloworld. Inside that directory you will notice a file named helloworld.xml and two additional directories. One named 'site' and the other 'admin'. These other directories will contain the files that make your component work. Files that will function on the public part of the site go in the '/site' directory, while the ones for the administrative functions of your component will go in the '/admin' directory. Reasonably straightforward, no?

You'll also notice index.html files in each directory. This is a standard practice. If you'd like to know more about this, I'd suggest this article:
http://stackoverflow.com/questions/8337060/blank-index-html-in-cms-softwares-instead-of-htaccess

For the first step of this tutorial, we're keeping things very simple. There is only one working file in both the 'Site' and 'Admin' directories. They each contain a file named helloworld.php. For time time being, we don't even need to use the php tags in our files.

/site/helloworld.php is comprised of the single line of text:
Front-end for Hello World!

While /admin/helloworld.php is simply:
This will become the Hello World Administration Section

The thing that makes it all come together is the manifest file. Since the other two files in this step of the tutorial are very basic, let's get into some of the details of the manifest.

The Manifest File

The manifest file is an XML file that outlines the parameters of the component. As you work through this tutorial, you will see changes to the manifest file as the component grows in complexity. So don't worry about all of the details just yet. We'll go through them as the tutorial progresses, but here's the basics.

An XML file must always start with the following code in the very first line.
<?xml version="1.0" encoding="utf-8"?>

Customarily below that is the developer information. In the file that is used in the example for Step 1 the developer information is: 

The  operators are used to show that this is a comment. These can be used anywhere in the XML code to comment what each section does.

XML is similar to HTML because it's structure is based on tags. When creating the manifest file for an extension, it must be stated in the tag. The one for Step 1 in this tutorial looks like this:
<extension type="component" version="3.3.6">

The type="component" because that is what we are creating.
The version="3.3.6" is the version of Joomla that the component is created for

Nested inside the tag is all of the information the component needs to function. One of the first things that usually goes in the manifest file is the information that will be read by Joomla! and is often been referred to as metadata. For Step 1, ours looks like this:
<name>Hello World!</name>

<creationDate>November 2014</creationDate>
<author>John Doe</author>
<authorEmail>[email protected]</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

Feel free to change this information to suit your needs. There are additional tags that can be used in this section, but for now let's just keep it simple. As was mentioned, XML is similar to HTML. Notice each tag has an opening and a closing. Just like HTML, the closing tag is identical to the opening tag with the exception of the '/'. Just as with HTML, improperly closing a tag will cause your component to misbehave. In this specific instance it will prevent your component from being installed.

Immediately following the metadata section I've put in a version tag:

<version>0.0.1</version>

This is to help keep track of the version of the component you are working on. The metadata and version information can be seen when you look up the component in the Joomla! Admin under Extensions->Extension Manager->Manage. Therefore it's important to use them.

After the version tag comes the description tag:

<description>Description of the Hello World component ...</description>

This description only shows after the successful completion of the component's installation.

After that comes the folder/file list. First it is common to list the files that will be visible on the front-end of the website, as follows:


<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
</files>

Following that we'll put in the files for the Admin
<administration>


<files folder="admin">

<filename>index.html</filename>
<filename>helloworld.php</filename>
</files>
</administration>

You'll notice that the format is identical to the files that will be read for the front end of the site. the difference is that the code is nested inside the <administration> tag.

All that is necessary now is to close the extension tag with:
</extension>

If you haven't done so already, download the files
https://github.com/Smart-Website/hello-world/tree/step-1

Unzip the files and review them on your local machine. You can also open the Extension Manager in Joomla! and Install the zip file to install the component.

Thanks for taking the time to review this tutorial. To learn more please continue on to Step 2 where we'll build on our component using the Model View Controller.

Step 1 - Smart-Website/com_helloworld GitHub Wiki

The Basics

Step 1

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️