Joomla Jumpstart

In Part 1, you installed a module to the Joomla system. Part 2 will take you through the quick and simple process of installation and configuration of a component. Components are the dominant type of extension and form the backbone of much of the extensible functionality available to the Joomla CMS.

What is a component?

You've learned that modules are generally used to display information and occasionally accept some type of basic interaction, so they generally only have a single face (or interface) to show to the world. Components, in contrast, provide a great deal of user interactivity and typically feature one or more user interfaces. Let's take a look at a component that comes pre-installed with the system -- the News Feeds component.

The first thing you'll probably notice when using components is that they generally have a minimum of two interfaces: an Administrator interface and a front-end interface. The Administrator interface is used to configure the component and will include a manager interface that appears something like the one shown below. In the case of the News Feeds component, a list of feeds is displayed (in this case only a single feed). Clicking on an item in the list allows the selected feed to be configured.

The Administrator or back-end interface of a component looks much different from the front-end (as you can see below). The News Feeds component retrieves the stories from the RSS feed and displays them in a linked list. Unlike the back-end, the front-end doesn't allow a visitor to edit any of the feed settings or add new feeds.

Although this example shows only two interfaces (the Administrator and the single-feed front-end interface), the News Feeds component has several additional interfaces. From within the Administrator, the News Feed Managerlet's you add or edit feeds, but it also includes the Categories interface to create categories to organize the feeds. Additionally, the front-end provides two other interfaces that display the category organization of the feeds and allow the user to drill-down to find the types of feeds they want.

From the News Feeds example you should be able to clearly see that on the surface, components are much more powerful than modules. They also have a different method by which the user accesses them. While modules were simply set to a template position to appear on the site, a component requires a menu to address it. Let's install a sample module so you can understand more clearly.

Installing Guestbook

I've chosen a Guestbook component to provide an example installation. You can select another component if you'd like. The Guestbook component can be downloaded here:

Download the Guestbook component for Joomla 1.5

This component IS NOT for production use. It has no anti-spam or CAPTCHA technology to prevent machine posting. This is an example component that I describe how to build in chapter 6 of my book Professional Joomla!. If you want a guestbook component, check the Joomla Extensions Directory.

In the Joomla 1.5 Administrator interface, open the Extension Manager just like you did for the module installation in the previous article. In Joomla 1.0, you'll need to the use the Installer > Components menu option. Browse to the component and upload it. If successful, you should see the installation success message and the component description (as shown below).

Configuring the Guestbook

For most components, you will want to perform some type of configuration before you make them live on your site. Unlike modules where parameter settings are adjusted through the Module Manager, each component has its own interface in the Administrator. Select the Components menu and you will see the Guestbook option as shown below.

When you choose the Guestbook option, the manager interface will be displayed. For this simple component, all entries occur on the front-end for registered users. So far, there are no entries currently listed as you can see below. You need to create a method of accessing the front-end interface of the component before you can see the Administrator interface in action.

To allow access to the Guestbook, a menu item must be created to activate it. For simplicity, let's add a menu item link from the Main Menu to the component. Select Main Menu option from the Menus menu. The manager will display a list of all of the current menu items. Click on the New button in the upper-right corner of the display. You will see a list of menu item types. Click on the Guestbook component as shown below.

Set the title to Guestbook and make sure the menu item is published. Click the Save button to activate the menu. If you open a browser window to display your page, you should now see the menu item for accessing the component (as shown below).

Clicking on the menu item will take you to the front-end interface of the component. In the case of the Guestbook, you will be presented with an entry form where guestbook items can be posted (see below). Enter a sample message and click the Post Entry button.

The component will thank you for posting and present a link to return to the Guestbook. Although simple, this screen is a second interface for the front-end. Click on the link and you'll return to the main front-end interface and you can see the new entry has been added to the list above the entry form (as shown below).

Finally, let's return to the Administrator interface. Now if you select the Components > Guestbook option, the Guestbook Entries manager will display the entry that you just added as well as the creation date and the username of the person who added the entry. Click on the entry and you can edit the text and location -- something not possible from the front-end for this component (see below).

That's about it. You've seen how a component is installed, how the Administrator interface can be used to configure it, and how the front-end differs from the back-end interface. In the next article in this series, you'll learn how to install and configure a plug-in which is different from a module or component.