Build your professional website using Joomla! 1.5 – Part 1

Scope:

This article is part of a series of articles on Joomla!. The article introduces users to the concept of Content Management System (CMS) in general and Joomal!, in particular. The article provides a step-by-step approach to getting Joomla!, installing it, and using it to develop a website, without writing a single line of code. Though some advanced topics have been discussed, in brief, they are out of scope of this article. The advanced topics are intended to be covered in subsequent articles in this series.

Target audience:

• People and organisations who are into CMS domain and want to know what Joomla!, an Open Source CMS, has to offer
• People who do not have the website development skill and wants to develop a professional website within couple of days

By-line:

Author is a freelance consultant and trainer with empower consultancy & service Pvt. Ltd.(http://www.empowerconsultancy.in) Support for Joomla! articles, including this one, can be found at http://joomlatoday.blogspot.com/. You can also send your queries directly to him at ajit.kumar@empowerconsultancy.in

Introduction to Joomla!

In one line – Joomla! is a Web Content Management System (CMS).

A CMS is a system, which allows you to manage and administer your content. A content may comprise of employee data in Enterprise Resource Planning (ERP) system, accounts detail in a Financial system, customer information in (Customer Relationship Management) CRM system, etc. All these systems have their own way of managing the content and all of them fall under the wide spectrum of CMS domain. Joomla! as a Web CMS allows individuals and enterprises to manage their Website content.

Installing Joomla!

• Download the 1.5 (latest stable) release from the Joomla! download URL mentioned in References
• Download and install XAMPP on Linux from the XAMPP download URL mentioned in References. XAMPP comes with the MySQL database and Apache Web server, which will be used to run Joomla!
• Follow the XAMPP installation and operational instructions to install and operate XAMPP as it is outside the scope of this article.
• Extract joomla into the /htdocs/joomla15 folder. You can use any folder name other than joomla15
• Run XAMPP
• Start MySQL and Apache Web server services in XAMPP
• Enter the following URL in the browser:

http://localhost/joomla15/installation/index.php

The Joomla! Installation page must come up as shown in Figure 1: Joomla! Installation

Step 1: Language

Select the language of your choice and click on Next button on the top-right corner

Step 2: Pre-installation Check

Make sure that there is a Yes next to each item. If No appears next to any item, you will have to take the necessary action to correct the problem. If all the pre-requisites are met, click on Next button on the top-right corner

Step 3: License

Accept the license and click on Next button on the top-right corner

Step 4: Database

This is where you need to specify your database detail. If you are a database user, you know what I am talking about. If you are not a database person, still, you don’t have to worry. Follow these steps to, first; create a database for your Joomla! Installation:

Steps to create a database

• Download phpMyAdmin from internet
• Extract it in /htdocs/phpmyadmin
• Stop Apache and MySql services in XAMPP, if they are already running
• Start Apache and MySql services in XAMPP
• Enter the following URL in the browser:

http://localhost/phpmyadmin/
You shall see a page shown in Figure 2: phpMyAdmin Main Page

• Enter joomla15 as the new database name in the Create new database text field and select utf8_unicode_ci from the drop-down list next to it
• Click on Create button to create the joomla15 database in MySQL
• A success message showing that the database has been created will appear as shown in Figure 3: Database created in MySQL

Now, that you have created the database, go back to the Joomla! Installation screen and specify the following database detail:

On the Basic Settings, enter the following detail:

Database Type – mysql

Host Name – localhost

User Name – root

Password -

Database Name – joomla15

Figure 4: Database Configuration

Click on Next button on the top-right corner

Step 5: FTP Configuration

Specify the FTP account detail in case you need it otherwise you can safely skip this configuration for this article. Click on Next button on the top-right corner

Step 6: Configuration

• Enter the following detail:

Site Name – (e.g. EventOrg)

You E-mail - (e.g. ajit.kumar@eventorg.com)

Admin Password - a valid password

Confirm Admin Password - valid password specified above

Install Default Sample Data is checked, by default.

Click on Install Sample Data button

Figure 5: Sample Data Installed

• Click on Next button on the top-right corner

Step 7: Finish

This completes the Joomla! 1.5 installation.

You will see the greeting message with the administrator login detail, a important security related message, and two icons – Site and Admin – on the top-right corner.

Figure 6: Installation Complete

-------------------- Note ---------------------

Note that the administrator user id is admin

Delete /htdocs/joomla15/installation folder. This is required for security reason. Unless this folder is deleted, Joomla! page will not allow further activity. It is also indicated on the installation page as shown in Figure 6.

-------------------- Note ---------------------

Joomla! Installation process creates two interfaces. These are indicated by the Site and Admin icons on top-right corner. Site provides you a front-end interface to view your web-site content, and Admin provides you a back-end interface to administer your web-site content.

Front end (Site)

Let us take a look at your default Web site, first. Click on the Site button on the top-right corner.

Figure 7: Default Site Layout

On your default web-site, there are three different categories of areas:

• Menus
• Contents
• Logo Area

Menus

Menus provide the navigation support to a web-site. Joomla! has three kinds of menu in the example web-site. You can add as many menus to your site as you wish.

• Top menu – This appears on the top of the page. The items are aligned horizontally. Usually, this menu is created to provide quick and direct access to the important site content. For a business organisation, this menu may contain items like Services, Products, Contact Us, About Us, Client list, etc. which is important for the business.

• Main Menu – This appears on the left-hand sidebar. It is the main navigation area of the site. It is created to provide navigational links to the complete site content. This, usually, should have more links than the Top Menu. Links like, Articles, Blogs, Forums, Reviews, etc. may appear only in Main Menu for many organisations. This menu should appear on all the pages at the same position.

• Other Menu – This is an additional menu, which can be added based on the site content and context.

• User Menu – This menu appears when a registered user logs into the site. E.g. things like, a registered user can write a blog after he/she logs into the site, can be facilitated by user menu.

Contents

Following are the different ways Joomla! generates site contents:

• Static content – This is the simplest way of creating a site content. But, as the name suggest, the content is static. Once written and published it will not change until it is re-edited. The content will not vary based on time and context. Static content is created using the Article Manager under Content menu on the Joomla! administrator page. The static content is also called un-categorised content as it does not have any section & category associated with it. A content can appear on the Front page if the Yes radio button is selected next to Front Page while creating the article in Article Manager. There is a one-to-one relationship between static content item and the page on the site.

• Dynamic content – Dynamic content is organised using section and category. Content item is in category and the category is in a section. You can have multiple categories for a section.

• Component content – On the Joomla! administrator page, you can see a Components menu. The items in this menu are the components, which are installed in your Joomla! installation. E.g. Banner, Search, News Feeds, etc. Components are small applications, which are displayed in the main content area of the web page when they are linked with a menu item.

• Module content – Unlike Static, dynamic, and component contents, module content can appear anywhere on you web page. Most of the times you will see them on the top, bottom, and sides. Joomla! installation comes along with many modules, such as, menus, Login Form, Polls, etc.

Logo area

This appears on the top of the page. It should contain the logo and the punch line of your organisation.

Back end (Administration)

Though the default site looks great, in 100% cases, it will require the customisation of the content to suit your requirement. The customisation may include changing the logo, changing the menus, changing the static content, removing some modules, adding new modules, etc. Joomla! provides a administrator page to control and manage your site content.

To go to the administrator page, click on the Admin button on the top-right corner on the installation page or enter the following URL in your browser:

http://localhost/joomla15/administrator/

Figure 8: Joomla! Administrator Login panel

The URL will display a Joomla! Administrator Login panel as shown in Figure 8. Specify the administrator’s username and password, which you had noted down during the installation, and click on Login button to login into the administrator page. On successful login, you will see the page as shown in Figure 9.

Figure 9: Joomla! administration page

The Administrator page will show your site name (e.g. EventOrg in this case), which you had specified during the installation process. Take some time to explore the menus the other options available on this page and try to relate the entries (sections, categories, articles, front page, etc.) and their content with your web-site content.

Now that we are kind of explored the administrator page, let us get into the real thing. Let us see how you can customise your web-site.

The very first thing which comes in your mind when you look at the default site is that – “I don’t like this, I don’t like that”. So, let us do some planning and clearly jot down what changes you want to make to the default site and, say, following is the list of changes you have come up with and the customisation actions I have identified:

Changes	Customisation action
Site look-n-feel needs to be different	Find a different Joomla! template, installing it, and using it for the site
Main menu must have the following options: Home Services The News Web Links News Feeds	Remove the following items from Main Menu: Joomla! Overview Joomla! License More about Joomla! FAQ Add the following menu item to Main Menu: Services
Change About Joomla! To About EventOrg on the top menu	Change the Top Menu item name
No polling, please!	Un-publish/Remove the Polls module
Replace the front page content with my content	Change the front page static content

Great! Now that we have the requirements clarified and actions identified, it’s time to get started with the real action.

Installing new template

There are numerous free as well as commercial templates available on the internet. You can choose one template which matches with the look-n-feel (colour and content placement) that you have in your mind. Let us say, we finalise- a template from http://www.siteground.com/joomla-hosting/joomla-templates.htm URL.

Install the template of your choice by following these steps:

• Download the template

• On the Joomla! Administrator page Click on Extensions->Install/Uninstall menu option

• Upload Package File

o Specify the Package File and click on Upload File & Install button

Figure 10: Install Template Success

Click on Extensions->Template Manager menu option and verify that your newly installed template appears in the list.

Figure 11: View Installed Template

On the Site tab select the radio button next to the new template and click on Default button. A star will appear in the Default column of new template entry.

Now, access the http://localhost/joomla15/ URL from the browser. Your site is now using the new template of your choice.

Figure 12: Site with new template

Changing Main Menu

• Go to the Joomla! Administrator page

• Click on Menus menu item and choose Main Menu option

• Select the following entries:

o Joomla! Overview

o Joomla! License

o More about Joomla!

o FAQ

And click on Unpublish button on the top. A red coloured cross will appear in the Published column of the above listed entries.

Figure 13: Menu Item Manager after item un-publish

The unpublished items do not appear on the site.

• Before we add a new menu entry, we need to create a static content to hold the content for the Services page.

o Create section

§ On the Joomla! administration page, click on Content menu item and choose Section Manager option

§ Click on New button on top to create a new section

· Title – Services

· Alias – services

· Published – Yes

· Access level – Public

§ No description is needed. Click on Save button on top

o Create category

§ On the Joomla! administration page, click on Content menu item and choose Category Manager option

§ Click on New button on top to create a new category

· Title – Services

· Alias – services

· Published – Yes

· Section - Services

· Access level – Public

o No description is needed. Click on Save button on top

o Create article

§ On the Joomla! administration page, click on Content menu item and choose Article Manager option

§ Click on New button on top to create a new article

· Title – Services

· Alias – services

· Section – Services

· Published – Yes

· Front Page – No

· Category – Services

§ Add the content and click on Save button on top

• Add the following entry:

o Services

By following these steps:

o On the Menus->Main Menu page, click on New button to add an entry

o Expand Articles under Internal Link in Select Menu Item Type

o Click on Article Layout under Article

o Enter the following detail:

§ Title – Services

§ Alias – services

§ Display in – Main Menu

§ Parent Item - Top

§ Published – Yes

§ Order – 1 (Home) (Services will appear after Home)

§ Access Level – Public

§ On Click, Open In – Parent Window with Browser Navigation

o On the right-hand side, in the Parameters – Basic, enter the following detail:

§ Select Article – Services

o Leave the other Parameters settings to default and click on Save button on top

o If you want, you can change the order of the menu items in Top Menu by clicking on up-arrow or down-arrow in the Order column

o Click on Save button on top

Change About Joomla! To About EventOrg on the top menu

• Go to the Joomla! Administrator window

• Click on Menus menu item and choose Top Menu option

• Click on About Joomla! Entry

• Change the Title to About EventOrg and click on Save button

No polling, please!

• Go to the Joomla! Administrator window

• Click on Components menu item and choose Poll option

• Select the check box next to the Joomla! Is used for? and click on Unpublish button on the top

Replace the front page content with my content

• Go to the Joomla! Administrator window

• Click on Content menu item and choose Front Page Manager option

• Click on Welcome to Joomla!

• Edit the content and click on Save button on top

Well, this is it! We are done with our customisation. Now, if you access your site it will reflect all your changes.

Figure 14: Site after customisation

If you click on Services in the Main Menu, your services content will show up.

Figure 15: Services

Congratulations! you are ready to launch your site.

Adding new Extensions

Many a times, the default Joomla! installation will not have the required components and modules suiting you site needs. E.g. you are launching a Event Organisation site, which demands a Event Calendar, which is not available as part of default installation. Similarly, default installation provides certain components/modules but you are not contented with it. E.g. default installation provides a JoomlaBoard as the forum component but you prefer FireBoard. In these situations, you will have to find suitable Joomla! extensions, install them, and use them on your web site.

Let us take your site requirement. As EventOrg, you need to have an event calendar on your site. After exploring the Joomla! extensions, say, you have selected JEvents extension.

Installing a JEvents extension for event calendar

• Download the JEvents installation packages from http://joomlacode.org/gf/project/jevents/frs/ URL

Figure 16: JEvents download item list

• On the Joomla! Administrator page, click on Extensions menu and select Plugin Manager option

• Search for the text – legacy. Search result will show a plug-in by name System-Legacy with a red cross in the Enabled column. This shows that the plug-in is not enabled.

• Click on the red cross to enable the plug-in. You will see a green tick in the Enabled column showing that the plug-in is enabled

• Click on Extensions and choose Install/Uninstall menu option

• Browse through your file system, select the bot_events_search1.4.3beta_joomla1.5 archive, and click on Upload File & Install button

Figure 17: Install Plug-in Success

• Repeat the previous step for the followings:

o mod_events_cal_1.4.3beta.zip

o mod_events_latest_1.4.3beta.zip

o mod_events_legend_1.4.3beta.zip

o com_jevents1.4.3beta.zip

Figure 18: Install Component Success

The JEvents extension is installed and is ready for use.

Showing the event calendar on the site

Now, let us say that, I want to display the event calendar below the Advertisement on the right-hand side.

• Click on Extensions and choose Module Manager option

Browse through the list and you will find the three modules related to events, which you recently installed

Figure 19: JEvents disabled

• Enable these three modules by clicking on the red cross in the respective Enabled column.

• Default position is left. Change this to right as we want to display the event calendar on the right-hand side.

Now go back and access your site URL.

Wow! a nice event calendar appears on the right-hand side below the Advertisement module as shown in Figure 20.

Figure 20: Site with new Event Calendar

This brings us to the end of this article. We journeyed through the basics of Joomla!, installing Joomla!, customising it, and adding new extensions to it. In the subsequent parts, we will discuss some advanced topics on Joomla!, like, creating your own template, moving site from development to production, Joomla! architecture, APIs and how to write your own extensions, etc.

References

XAMPP Download - http://www.apachefriends.org/en/xampp.html

Joomla! 1.5 Download - http://www.joomla.org/

Free Joomla! 1.5 Templates

http://www.freecmstemplates.com/joomla.php

http://www.siteground.com/joomla-hosting/joomla-templates.htm

Joomla! extensions page

http://extensions.joomla.org/