THE JOOMLA TRAINING MANUAL

TRIMO TRAINING & CONSULTING

2010
 TABLE OF CONTENTS
ABOUT THE AUTHOR........................................................................................................................................... 4

WHAT THIS MANUAL COVERS............................................................................................................................. 5

WHAT IS A CONTENT MANAGEMENT SYSTEM?................................................................................................... 6

WHAT IS JOOMLA?.............................................................................................................................................. 6

BENEFITS OF USING A CONTENT MANAGEMENT SYSTEM....................................................................................6

WHY USE JOOMLA TO DEVELOP WEBSITES?........................................................................................................ 6

HOW CONTENT MANAGEMENT SYSTEMS WORK................................................................................................. 7

INTRODUCTION.................................................................................................................................................. 8

PROJECT BRIEFING........................................................................................................................................................8

REQUIREMENTS.................................................................................................................................................. 9

DOWNLOADING THE JOOMLA INSTALLATION PACKAGE....................................................................................10

DOWNLOADING THE WAMP SERVER................................................................................................................. 14

DOWNLOADING FILEZILLA................................................................................................................................. 16

INSTALLING THE WAMP SERVER........................................................................................................................ 17

CREATING THE WEBSITE FOLDER....................................................................................................................... 26

EXTRACTING THE JOOMLA INSTALLATION PACKAGE.......................................................................................... 26

SETTING UP THE DATABASE.............................................................................................................................. 30

INSTALLING THE JOOMLA SYSTEM..................................................................................................................... 34

STEP 1: SELECT A LANGUAGE....................................................................................................................................... 35

STEP 2: PRE-INSTALLATION CHECK................................................................................................................................36
STEP 3: THE JOOMLA GNU LICENSE AGREEMENT............................................................................................................37
STEP 4: THE DATABASE CONFIGURATION........................................................................................................................38
STEP 5: FTP CONFIGURATION......................................................................................................................................39
STEP 6: MAIN CONFIGURATION....................................................................................................................................40
STEP 7: FINISHING OFF...............................................................................................................................................41

ORGANISING YOUR CONTENT - ADDING CONTENT TO YOUR JOOMLA WEBSITE.................................................44

SECTIONS AND CATEGORIES..................................................................................................................................46

SECTIONS.............................................................................................................................................................47
CATEGORIES.........................................................................................................................................................52
ARTICLES..............................................................................................................................................................58

MAKING YOUR FIRST JOOMLA WEBSITE............................................................................................................ 66

2
 STEP 1 – SET THE SITE NAME.................................................................................................................................68
STEP 2 – MAKE UNCATEGORISED PAGES...............................................................................................................69
STEP 3 – CREATE A SECTION..................................................................................................................................71
STEP 4 – CREATE THE CATEGORIES........................................................................................................................72
STEP 5 – ADD PAGES IN EACH COURSE..................................................................................................................73
STEP 6 – ADD LINKS TO THE MENU........................................................................................................................74
1: Add Links to the Uncategorized Content.........................................................................................................74
2: Add Links to the Course Pages.........................................................................................................................75
STEP 7 – CLEAN UP................................................................................................................................................ 76

EDITING ANY PAGE........................................................................................................................................... 77

CUSTOMIZING THE JOOMLA WEBSITE............................................................................................................... 78

INSTALLING A JOOMLA TEMPLATE........................................................................................................................78

SETTING A TEMPLATE AS THE DEFAULT.................................................................................................................81
CHANGING THE HEADER IMAGE OF A TEMPLATE.................................................................................................85

WEB LINKS........................................................................................................................................................ 86

INSERTING META TAGS..........................................................................................................................................87

INSERTING A READ MORE LINK..............................................................................................................................87
SETTING ADVANCED PARAMETERS.......................................................................................................................89

PROFESSIONAL BRIEFING.................................................................................................................................. 90

CONFIGURING YOUR JOOMLA WEBSITE FOR SEARCH ENGINE OPTIMIZATION...................................................91

PERFORMING SEARCH ENGINE OPTIMIZATION ON YOUR JOOMLA BASED WEBSITE...........................................93

CONFIGURING SEARCH ENGINE FRIENDLY URLS...............................................................................................................94

ENTERING METADATA INFORMATION.............................................................................................................................95
RE-WRITING THE PAGE TITLES.......................................................................................................................................96

UPLOADING YOUR WEBSITE TO A REMOTE HOST.............................................................................................. 97

INSTALLING FILEZILLA...................................................................................................................................... 101

CONNECTING TO YOUR REMOTE HOST............................................................................................................ 110

UPGRADING TO THE LATEST VERSION OF JOOMLA.......................................................................................... 112

THE IMPORTANCE OF UPGRADING JOOMLA...................................................................................................................112

STEPS FOR UPGRADING YOUR JOOMLA WEBSITE:...........................................................................................................112

EXTENDING THE FUNCTIONALITY OF A JOOMLA WEBSITE................................................................................113

WHERE TO GET MODULES, EXTENSIONS AND PLUG-INS.....................................................................................113

INSTALLING MODULES, EXTENSIONS OR PLUG-INS.............................................................................................113
CONFIGURING YOUR MODULES AND PLUG-INS..................................................................................................114

CONCLUSION.................................................................................................................................................. 116

FURTHER RESOURCES.................................................................................................................................................117

3
ABOUT THE AUTHOR

Elwyn Dhliwayo is an experienced writer of Joomla tutorials. He has also published a Search
Engine Optimization Guide, which has got excellent reviews. Over the last three years,
Elwyn has developed numerous websites, big and small – many of them using Joomla.

Elwyn is fascinated by the Web as a powerful and creative means of communication, and by
evolutionary software such as Joomla!, enabling anybody to create beautiful and user-
friendly websites without requiring any technical knowledge.

4
WHAT THIS MANUAL COVERS
 How to download, install and setup Joomla, including creating the MySQL database in
just a few simple steps – it’s much easier than you think! (How to install it manually
and in fact a shortcut which will allow you to install Joomla in a couple of minutes).
This is very important and takes you through all the configuration options in Joomla.
 Learn how to install and configure the Wamp Server.

 What Sections and Categories are, and how to create them in Joomla. Once you
learn this you’ll be able to accomplish any task related to content publishing.

 How to quickly configure the default template… it’s amazing how much time people
waste simply because they don’t know how to really configure the template correctly.

 How to quickly change templates – this one will save you a lot of time.

 How to configure your Joomla website for SEO purposes? Knowing this can eliminate
many headaches when you start optimizing your site for search engines – using the
wrong configuration can totally destroy your site in search engines, and you may
never even know why!

 How to setup access level for different types of users – so that you’ll know how to
specifically give access and control for each type of users.

 How to add images… you can do some VERY interesting things with this.

 How to add static content items (this is so easy when you know how!).

 How to setup Contact Management (this is very important so that you can have
separate contact information for registered and unregistered users).

 How to setup your blog. Search engines love blogs. You can use blogs to get tons of
organic traffic to your site.

 Learn about Modules, Extensions and Plugins including brief description of each item.

 How to select which Modules to use and why. Publishing must-have modules for
improved functionality. Modules are extremely powerful and so simple to use once
you know how!

 Performing Search Engine Optimization on your website.

 How to upload files from Local Host to a Remote Host.

5
What is a Content Management System?
A content management system is a web based application used to manage the content of a
website; it is designed to make it easy for non-technical users to add, edit, delete and
manage content on a website.

What is Joomla?
Joomla is an award-winning open source content management system, which enables you
to build powerful web applications and websites.

Benefits of using a Content Management System

 Automatically generate navigation elements.
 Make content searchable and indexable.
 Keep track of users, their permissions and settings.
 Easily publish and un-publish articles and modules.

Why use Joomla to develop websites?

 Joomla is usually easier to get up and running and tends to have a quicker learning
curve.
 Joomla tends to have better looking templates and a friendlier community, even
towards beginner users.
 Joomla is open source, and freely available. In other words, you don’t need to pay a
cent to use Joomla to develop websites.

6
HOW CONTENT MANAGEMENT SYSTEMS WORK

The web pages as they are seen by users on the Internet.

(Front End)

Database Website Administrator

(Back End)

A content management system is built on a centralized database. The Administrator logs in

to the Back End of the website, to add, edit, delete and manage the website content. The
content is then stored in the site’s database. When a user types the web address into the

7
browser, the system retrieves the content from the database and assembles it on a web
page, presenting it to the user’s browser.

Introduction
Hello there! Today, we are going to walk you through setting up your first Joomla! website.
In this demonstration, you are going to set up a website for the Web Design Course.

Project Briefing
In your meeting with the Company's President, he described that he would like a website
with 5 sections dedicated to:

 Training

 Frequently Asked Questions (FAQs)

 Updates

 Links

 News

1. A Home Page.

2. A Web Form for clients to be able to order the Training.

3. Contact Us Page for website visitors to be able to send them e-mail from the
website.

4. A Search Facility.

The Company president has supplied the information as text documents and put the images
in a folder named images. These files are on your Resourse CD, in a folder named Exercise
Files.

In this Manual, you will be setting up a website to meet these needs in no time at all! I have
created a Site Structure in the form of a Table. Its located in your Exercise Files. Print it
right away and have it next to you as you start developing your website.

8
REQUIREMENTS
These are the tools that you need to develop and set-up a Joomla website. Attached to this
manual, is a Resource CD that contains all the Requirements and the Exercise Files you’ll
need to complete the Joomla Training Course.

 Joomla is a database driven system, it requires a MySQL database to run.

 Computer – Joomla performs faster on a relatively fast server.
 Download the newest version of Joomla (The Joomla Installation Package).
 WAMP – A web server for development of a Joomla website on a local machine.
 FileZilla – A program to upload the finished Joomla website onto the Internet.
 Graphics Editing Software – To edit your website images.
 Text Editor – To edit all your scripts within the Joomla system (Notepad).

NB: Create a New Folder on your Desktop and re-name it to Requirements,

before proceeding. This is the folder you’ll use to store all the Software that
you’ll download. We shall explain in detail, how to install each package. Just
follow the Steps in this Manual (one at a time).

9
DOWNLOADING THE JOOMLA INSTALLATION PACKAGE
You can download the latest version of Joomla here: http://www.joomla.org/download.html

Select the 1.5.22 Full Package, by clicking on the ZIP link next to the Installation
Package. The dialogue box should appear automatically.

The Upgrade Package is used to upgrade your Joomla version to a more recent one. You
shall learn in detail how to upgrade a Joomla website later in this Manual.

10
When the dialogue box appears, click on Save. You’ll then be asked to specify a location to
save the file. Select the Requirements Folder you created on the Desktop and click Save.

11
Specify the location to save the Joomla Installation Package. Make sure it’s the
Requirements Folder you created on the Desktop and click Save.

The Joomla Installation Package is then saved in the Requirements Folder on your Desktop.
12
When you’ve successfully downloaded the Joomla Installation Package onto your computer,
the next step is to download the WAMP Server.

13
DOWNLOADING THE WAMP SERVER
You will be able to download the latest version of the WAMP Server by pointing your
browser to this address: http://www.wampserver.com/

Click on the right hand flag (British Flag)

Click on Downloads

Select the 32 bit package. Right click on the yellow bar and select download file.

Now it opens a file to say Run or Save the file is called tenet.dl.sourceforge.net. Choose
save, and store the file in the requirements folder.

14
Click on Download WampServer 2.0i, then you’ll be re-directed to the Source Forge website
where you’ll be able to download the WAMP Server Installation Package. Save it in the same
location as your Joomla Installation Package, that is, Requirements Folder on your Desktop.

DOWNLOADING FILEZILLA
 FileZilla is the program for uploading a website onto the Internet.

15
You can download the FileZilla program on the FileZilla Website:

http://filezilla-project.org/download.php?type=client

Select the Installation Package that suits your machine, that is, if you’re working on a
Windows Operating System on your computer, you must select the package under
Windows. If you’re using a Mac or Linux, then you select the appropriate Installation
Package.

I’m using a Windows Operating System, so I will select the Windows Installation Package
(FileZilla_3.4.0_win32-setup.exe) Recommended.

Note: you will be re-directed to the Source Forge website, where you’ll download the
FileZilla Installation Package. Save it in the requirements folder on your Desktop.

NB: A yellow bar may appear at the top of your browser. Right click on it and select
download file.

INSTALLING THE WAMP SERVER

Browse to the Requirements Folder on your Desktop and double-click on the WAMP Server
Installation Package. The installation should begin immediately.

The contents of the Requirements Folder should be:

1. FileZilla Installation Package,

2. Joomla Installation Package and

16
3. WAMP Server Installation Package, as shown below.

When you double click the Wamp Server Installation Package, a dialogue box will appear.
Click on Run.

When you double-click on the WAMP Server Installation Package, a dialogue box will appear,
similar to the one shown below. Click Next.

17
Read the License Agreement for the WAMP Server and select I accept the agreement.
Then click on Next to continue.

18
Select Destination location for the WAMP Server, by default, it installs in the C drive under
the Folder WAMP.

19
Select the additional Tasks such as Adding icons to your Desktop and Task Bar. Select
everything and click Next.

20
Once you’re ready to install, click on the Install button to start the WAMP Server
Installation Process.

21
Installation – The WAMP Server will then begin to install on your computer.

22
During the installation process, you’ll be requested to choose a default browser to use with
the WAMP Server. If you’re not sure, just click Open. A dialogue box will appear, just click
open.

23
Complete the WAMP Server installation by clicking on Finish. Select Launch WAMP Server 2
now, to launch the WAMP Server soon after installation.

24
Close the requirements folder after installation.

To manually start the WAMP Server, click on the WAMP Server icon on your Task Bar at the
bottom right corner and select Start All Services.

CREATING THE WEBSITE FOLDER

Go to my my computer, open the C drive, go to wap, open it, open www. Create a new
folder for your website and re-name it to Web Design Course.
25
How to create the folder?

Click on My Computer > Select Local Disk (C:) > Open the folder wamp > Browse to the
www folder, create a new folder and re-name it to Web Design Course.

EXTRACTING THE JOOMLA INSTALLATION PACKAGE

Browse to the Requirements Folder on your Desktop, and select the Joomla Installation
Package by left clicking it once. Right-Click on it and select Extract files.

To browse a directory, click on the (+) next to it to view the contents.

A dialogue box as one shown below will appear, requesting you to select a path to extract
the files to. Browse to your website folder in the WWW Directory, the address on the
destination path should be as follows:

C:\wamp\www\Web Design Course

26
When you’ve selected your website folder, click on OK. The Joomla files will then be
extracted to the website folder. During the extraction of the Joomla Files, the screenshot
below is what appears.

27
When extraction is complete, Browse to C:\wamp\www\Web Design Course, and check
if the Joomla Files have been extracted to the website folder. It should look like the
screenshot below.

28
Now the next step will be to set-up the Database for the website on the WAMP Server.

SETTING UP THE DATABASE

Check the following before setting up the database:

 Check if you have a web browser installed on your computer.

 Check if the WAMP Server has been started.

29
To start the WAMP Server manually, click on the WAMP Server icon on your Task Bar at the
bottom right corner and select Start All Services.

Then open your web browser and type in http://localhost. You should see the WAMP
Server Home Page, as shown below.

30
Select phpmyadmin under Your Aliases. Enter a database name (webdesigncourse) in
the Create New Database box and then click on Create. The server will then create your
new database.

31
The next step is to install the Joomla System. The Joomla Web Installer will guide you
through the set-up process. We shall examine in detail, each step in the installation process.
Follow the steps as they are presented in this Manual and you will not go wrong.

INSTALLING THE JOOMLA SYSTEM

Open your web browser and type in http://localhost. Making sure that the WAMP Server
is running.

32
The WAMP Server Home Page will appear. Select Web Design Course under Your
Projects.

The Joomla Web Installer will start automatically and guide you through the installation
process of the Joomla Content Management System.

33
Step 1: Select a Language
If you’re not sure what this means, just click Next.

Step 2: Pre-Installation Check

If any of the items are not supported (marked as No), your system will not meet the
minimum requirements for installation. Please take appropriate actions to correct the errors.
Failure to do so could lead to your Joomla! Installation not functioning properly.

34
Make sure the recommended settings are well configured. These are the recommended
settings for PHP in order to ensure full compatibility with Joomla!. Joomla! will still operate
even if your settings do not match.

Step 3: The Joomla GNU License Agreement

Read through the Joomla Licence. It’s quite straight forward and click Next.

35
Step 4: The Database Configuration
This stage entails you to specify the database settings for your website. Enter the
information below:

Host Name: localhost

36
User: root

Password: (leave blank)

Database Name: joomlawebsite

The host name is set to localhost because the website is being developed on the local
machine. The default user on localhost is root and there is no password. The database name
is the one we created under Setting Up the Database.

After entering the database settings click Next.

Step 5: FTP Configuration

On the FTP Configuration Page, select no and click Next.

37
Step 6: Main Configuration
This is where you now specify the following:

1. Site Name – This will be the name of the website being developed (type in Web
Design Course).

38
 2. Your e-mail address – This will be the e-mail address of the website super
administrator.

3. Admin Password – Enter the password and confirm it in the appropriate fields. This
will be the password that you will use to login to the Administrator Control Panel at
the end of the installation.

When you have entered the details, click Next. A dialogue box as shown below will appear,
saying no sample data has been installed. Just click OK. Do not install sample data, because
we will add our own content from scratch.

Step 7: Finishing Off

This is the final stage of the Installation process. At this stage, the Joomla Installation is
now complete. All you need to do now is to browse to the website folder and delete the
installation folder from your website folder. The path is C:\wamp\www\Web Design
Course

39
Make sure you delete the installation directory (folder) within your website folder (Web
Design Course). A snapshot of the folder you must delete is shown below.

40
When you’ve deleted the Installation Folder, go back to your browser and click on Site, to
view the new website you’ve just created.

The newly created website should look should look like the one shown below:

41
42
ORGANISING YOUR CONTENT - ADDING CONTENT TO YOUR
JOOMLA WEBSITE
We will now start adding content to our new website and creating the Navigation (Menu
Items).

 You will learn how to organize your content using Sections and Categories

 You will learn how to create Articles,

 You will learn how to create Menus.

Before you can add, edit or delete anything in Joomla, you’ve to first log-in to the
Administration Panel in order to gain access to the back-end of the website.

To login, open your browser (ensuring that the WAMP Server is already running) and type in
http://localhost/Web Design Course/administrator/

43
Enter your Username and Password to log-in.

Username: admin

Password: admin

This is the back-end of the Joomla website once you’ve successfully logged-in. A screenshot
is shown below:

44
SECTIONS AND CATEGORIES

One of the most important parts of a website is the Content. Now that we have a blank
website set-up, let’s get some articles on the website. Articles are sorted in two ways:
Sections and Categories. Sections can contain numerous Categories, and Categories can
contain numerous Articles.

The Joomla architecture requires that every article belong to a Section and a Category
(unless you make it uncategorized). Because of that, before you start creating the sections
and categories, you need to think of the names that you might need. Think of a section as
being a drawer in a filing cabinet, a category as the folder inside the filling cabinet and
articles as the documents inside the folder. That is a good guideline to creating your
sections and categories.

Make “Products” a Section and “Goods” and “Services” the Categories. Then create one
page for each product and place it under the “Goods” Category and all services on their own
page and place each of those pages under the “Services” Category. That way you can keep
your site organized for when you are ready to create the menus.

45
SECTIONS
To create a Section, simply go to the Content Menu button at the top left hand corner and
select “Section Manager” as shown below:

46
The Section Manager page will appear immediately as shown below. Once on the page, click
the “New” button on the Joomla Toolbar. You will be taken to the New Section page with
several options, where you will create the new section.

47
When the New Section page opens, enter the Title, Description and insert an image for the
Section Description (if necessary). When you’re done click “Save” to create the new section.

To insert an Image in your Section Description, click the image button at the bottom of the
Description Box. A dialogue Box will appear showing all the images and folders within the
48
Images Folder inside the Media Manager. Now click on the image you wish to insert, align it
to a suitable position (using the Align drop down list) and then click on “Insert”.

However, if you wish to insert your own image, use the Browse Button. A dialogue Box will
appear, requesting you to choose the File to Upload as shown below:

49
Browse to the location of the image and select it and then click Open. When you are done,
click Start Upload, to upload the image onto the Joomla System.

Once your image has been uploaded into Joomla, it will appear amongst the images. Now
select it and click “Insert”. The image will then be inserted into the Section Description.
When you’re done, click “Save” to create the Section.

CATEGORIES
From the content menu, you can also get to Categories. Since they are subcategories of
sections, they work in a similar way, and you should also add a Title, but this time you must
50
also select a Section for the Category. All the other fields are optional and not necessary for
the functioning of the site.

When you select Category Manager under the Content Menu, the Category Manager will
open. In this window you will be able to create a new category.

At the top right hand corner of the Category Manager Window, click” New”. The Category
Edit Window will open, where you will be able to specify the Category Title, Category
Description and also include an Image in your Category Description (if necessary).

51
In the Category Edit Window, enter the Title of the Category you wish to create in the Title
Box. If necessary, also include the Category Description in the Discription Box as shown
below:

52
Now create the Categories for the Sections you created earlier on. Make sure you assign the
category to the appropriate Section.

To insert an Image in your Category Description, click the image button at the bottom of the
Description Box. A dialogue Box will appear showing all the images and folders within the
53
Images Folder inside the Media Manager. Now click on the image you wish to insert, align it
to a suitable position (using the Align drop down list) and then click on “Insert”.

However, if you wish to insert your own image, use the Browse Button. A dialogue Box will
appear, requesting you to choose the File to Upload as shown below:

54
Browse to the location of the image and select it and then click Open. When you are done,
click Start Upload, to upload the image onto the Joomla System.

Once your image has been uploaded into Joomla, it will appear amongst the images. Now
select it and click “Insert”. The image will then be inserted into the Category Description.

55
When you’re done, click “Save” to create the Category. Follow these steps to create all the
Categories for your Web Design Course website. Refer to the Site Structure in your Exercise
Files.

56
ARTICLES
Now that you have your sections and categories created, we can start adding some real
content to the website.

To create an article, go to “Content Menu” at the top left hand corner and select “Article
Manager”, the Article manager page will open automatically, where you’ll be able to create
your new article.

57
When the Article Manager Window has opened, click “New” at the top right hand corner of
the page.

58
The New Article Page will open immediately, where you will:

 Add an Article Title.

 Select a Section.

 Select a Category.

 Publish / Unpublish an Article.

 Show / Hide an Article on the Front Page.

 Insert Meta Tags.

 Insert a Read more link.

 Set Advanced Parameters.

The page has an in-built feature called a WYSIWYG (What You See Is What You Get)
editor, which you can use to format text, insert images, insert links, insert custom HTML
code and set your header Tags (H1, H2, H3……). What that means is that whatever you do
on this page will be translated by the Joomla software into HTML which can be read by web
browsers as a web page.

59
Start by adding the title. The alias is not necessary. Then select a Section and Category for
the Article (which is why you had to create them first). You can then add the text and
images in either view, the standard WYSIWYG viewer or directly to the HMTL (by clicking
the little HTML icon).

Some articles such as Home Page and About Us do not fall under a particular Section or
Category, hence you have to select ” Uncategorised” for both the Section and Category.

Only the Article that appears on the Front page should have the Front Page set to “Yes”, the
rest should have the Front Page set to ”No” because they are not our Home Page. Unless if
you want to display more than one article on the Front Page.

To add a new article to the website, click on Article Manager. The article manager window
should appear, as shown below:

60
At the top of your right hand corner, select New. You’ve to enter a few details before you
can add or store the page.

 Title – This will be the name of your article.

 Whether the article will display on the FrontPage or not.

 Whether or not to Publish the article.

A new article is automatically created by the Joomla system and presented to your screen
as shown below:

61
In the Title box enter Home Page. Under the Section, select Uncategorised. Then to
Publish the Page, select Yes for Published. Since the Home Page is the Front Page of your
website, select Yes for Front Page. The Category should be left on Uncategorised. Finally
enter the Home Page text and click Save.

The Home Page text is provided in the Exercise Files > Content inside
your Resource CD. Make sure you assign every article under the appropriate
Section and Category. Refer to the Site Structure in your Exercise Files.

The Article Manager will then appear with only one article (Home Page), as shown below:

62
Note that the Home Page is Published and the Front Page is also set to Yes. This means that
the article we’ve just created is published and will appear on the front page of the website.

Now open your browser and type in http://localhost/Web Design Course, you should see the
Front Page with the text that you inserted in the Home Page. You’ve successfully created
the Home Page of your website. The Front Page should now look like the one shown below:

63
So we can safely conclude that when creating an article in Joomla, you have to specify the
Title, Section, Category, Publish and Front Page parameters.

You learnt about Sections and Categories in the Chapter (ORGANISING YOUR CONTENT).

Follow the Steps for CREATING AN ARTICLE IN JOOMLA, and make the articles for the
rest of the pages.

IMPORTANT: For all the articles that you create for your website (excluding Home
Page), you should set Front Page to No (since the articles must not show on the
Front Page of our website). We only want the Hope Page content to appear on the
Front Page.

MAKING YOUR FIRST JOOMLA WEBSITE

Let’s make a cool Training Centre website from the Joomla! that you just installed. Think of
an imaginary training centre. I’ll name my imaginery training centre Trimo Training And
Consulting.

64
Before making any Joomla website, you need to decide upon the structure of the website.
We will have the following structure for our training centre website. I strongly recommend
you draw this structure on paper by hand, and it will be much easier to make the site.
Whenever I make a website, I first draw a structure on a piece of paper. It makes things
very easy. So here is a structure:

Uncategorized Home Page

The Director

Special Contact Us Form

Modules you’ll work with are: Who’s Online, Search, Login.

Now that we have a structure in mind, we will create the site in 6 steps:

 Set the Site Name.

 Create the uncategorized pages (Home Page, The Director etc)

 Create the Section (Courses)

 Create the Category for each Course.

65
  Add pages/content items for these Categories.

 Add links for all this stuff on the Menu.

STEP 1 – SET THE SITE NAME

This is really easy. Go to the administrative back-end of the site by pointing your browser to
http://localhost/Web Design Course/administrator/ or ”sitename/administrator‟ if you have
installed Joomla in a different path.

Log in with username as “admin‟ and the administrator password that you had set while
installing this Joomla. You will be shown the cool administrative interface of your Joomla!
site.

66
Click on the “Global Configuration”button. You will see a form with different fields.

Now, use the “Site Name” Field to specify the name or your site, which is “Trimo Training
and Consulting” in my case.

Now, click on the “Save” button at the top right. You will see a message “The Configuration
Details have been updated”. You will also see that the title of browser now contains your
site name. Congratulations on doing the first modification to your site!

STEP 2 – MAKE UNCATEGORISED PAGES

As laid out in the site structure, our website will have 3 pages that do not belong to any
category, and are simple plain pages which you may need to edit sometimes. These are:

Home

The Director

It is very easy to create such uncategorized content. Just go to the

administrative interface (sitename/administrator) if you aren‟t there

67
already, and click on the “Add New Article” Button. You can also do this by going to
“Content”->‟Article Manager‟ in the menu and clicking on the “New” button.

Fill in the title for the page, the content in the page select the “section” and “category” as

“Uncategorized”, and click on the “save” button at the top right.

Congratulations! You just created your first page! Right now this page is not visible on the
website front-end, because there is no link in the menu pointing to this page. We will add
links in the menu later.

After you clicked the “save” button, you are taken to the “Article Manager”, where you can
manage all the articles/pages/content. You will see the page that you just created is one of
the many articles listed on this page. If you want to edit any page, just click on its name or
select it using the tick box and click the “edit” button. Use the “New” button to create the
other 2 pages, i.e. the “Home” and “The Director” pages. You can now jump to Step 6 and
add menu links to these pages, or continue to the next step and make the rest of the
content.
68
STEP 3 – CREATE A SECTION

Creating a section is very easy. You need to go to “Section Manager”,

which you can do by clicking on the “Section Manager” button on the
main page of administrative panel, or by using the menu through
“Content” -> ‟Section Manager‟. Note that you can return to the main
page or the „control panel‟ of administrative back-end using the menu
through “Site” -> “Control Panel”.

Once you are in the “Section Manager”, you will see a list of all the
existing sections. Just click on the “New” button to create a new section. Write the name for
the section as “Courses”, and go down and write a description for this section in the
“Details” rich text field. You can write the description as “This section contains all the
information about the different departments in our college”. Just write any description, and
click on “Save” button. You will see that the section is added in the list. You can edit the

69
description or change the name of the section whenever you want by coming back to the
“Section Manager”.

I suggest you look at the site structure that we have designed, and tick the things that we
have finished. Now lets go and create the Categories.

STEP 4 – CREATE THE CATEGORIES

You can create categories by going to "Category Manager" either

from the Control Panel (i.e. the main page of administrative back-
end) or by using the menu through "Content" -> "Category
Manager". Now, we just have to create a category for each
department of our college. To do this, click on the "New" button
Write the name of the category (i.e. the name of the course) as the
title. And select the "Section" as "Courses", as this category is a
course. Refer to the chart if you are getting confused.

Write a small description of the department in the "Details" box. Then click on the "Save"
button. You will be taken back to the Category Manager. Repeat the process for all the
courses.

70
STEP 5 – ADD PAGES IN EACH COURSE

Now that we have made a Category for each Course, each course needs 2 or 3 pages for
displaying information about the course. For example, the Coffin and Casket Course needs 3
pages:

1. Coffins: A page with information on the Coffin making course.

2. Caskets: A page to show information on the Ordinary Casket course.

3. Dome caskets: A page to show information on the Dome Casket course.

You can create the categorized pages the same way you created the uncategorized pages.
Only difference is that you have to specify the Section and Category. Refer to the second
paragraph of Step 2 if you forgot how to add a page/article. This is how I created the
"Coffin" page of Coffins and Caskets courses.

71
Make sure you select the appropriate Section and Category for each page.

STEP 6 – ADD LINKS TO THE MENU

Once you create all the different pages for each department, it's time to add links to all the
content in the menu.

1: Add Links to the Uncategorized Content

Login into the administrative panel

Go to “Menu” ->”Main Menu” in the menu.

Click on the "New" button on the top-right

Click on “Article” in the “Internal Link” List

72
The list will expand.

Click on “Article Layout” in the “Article” sub-list

Write the title of the link in the "Title" field.

To select the article to link to, click on the "select" button.

A box will appear named "Article Selection". Just click on the row that has the name of the
article/page you want to link. The "Select Article" field will now show the name of that
article Now, click on the "Save" button at the top right. Repeat the process for the other
links.

2: Add Links to the Course Pages

These links are special. We will create a link in the menu for each course. When someone
clicks on this link, he will be shown a list of all the pages of that course, i.e. all the content
items belonging to that category which represents the course. So basically we need to make
links that list all the articles in a Category. Let's make these links.

If you haven't already, go to menu manager for main menu as you did earlier by logging
into the admin and going to “menu”->”Main Menu”

Click on the "New" button

Click on "Articles" in the "Internal Links" list

73
The list will expand. Click on "Category List Layout" in the "Category" sub-list.

In the "Menu Item Parameters" box at the right, select the proper category.

Below that box, there are 2 more boxes which are currently minimized but can be expanded
by clicking on the name. Click on the "Save" button on the top right.

If you visit the site now, you will see the link in the menu,
and upon clicking it you will see a list of all the
articles/pages belonging o that department.

STEP 7 – CLEAN UP

Now disable all the menu items other than the ones needed for this website.

First set the "Home" link of this site as the "Default" link. Go to "Menu" -> "Main Menu" in
the top menu of Admin Panel, select all the menu items that are not required for this site,
and click on the "Disable" button. Note that when we click on the "Coffins and Caskets" link
on the menu, lots of stuff other than the pages in the dept. are shown. Actually all we need
are the page names. So let's remove everything else.

Go to Menus->Main Menu->Coffins and Caskets. This page has all the facilities to edit the
settings for the menu item. Now you just have to change the parameters for this link item.
At the right, the "Parameters"- basic box should be already expanded.

74
Do the following settings:

In "Parameters" – basic box

 Table Headings : HIDE

 Filter : HIDE

In "Parameters" – advanced box

 Display Select : HIDE

In "Parameters" – component box

 Author Name : HIDE

 Hits : HIDE

These settings will make the page look like this:

There you go, the website is done.

EDITING ANY PAGE

The beauty of content management systems is that content once written can be changed
any time by the webmaster using the web based administrative interface.

You can change the contents of any page easily by going to the article manager.

Log into the administrative interface and click on the “Article Manager‟ button. Click the
page you want to edit from the list that is displayed. And there you go, you are shown all
the settings and content of that page which you can edit and save.

75
When editing any page/link/section/category, the above 5 buttons should be available in the
top right corner. They perform the following functions:

Preview: Shows you a preview of how the content that you have written will show in the
browser.

Save: Save the changes you have made to the page/link/section/category and close this
editing screen.

Apply: Save the changes you have made to the page/link/section/category and keep this
editing screen open.

Close: Close the editing screen without saving the changes made.

CUSTOMIZING THE JOOMLA WEBSITE

 You’ll learn how to install a Joomla Template.

 You’ll also learn how to change the Default Template for your website.

INSTALLING A JOOMLA TEMPLATE

There are many free Joomla Templates on the Internet, which are available for download.
Make sure you download the appropriate template that is compatible with your Joomla
version. Usually templates are downloaded and installed as a compressed file (ZIP).

76
To install a new template, login to the administration panel of your website, select
Extensions, click Install/Uninstall.

The Extension manager window will open. Under Upload Package File, click Browse and
locate the Joomla Templated ZIP file on your computer and click Open.

77
78
To install the Template, click Upload and Install. The template will then be installed on your
website. But before, it can appear on the Front End, you’ve to set the template as the
Default.

SETTING A TEMPLATE AS THE DEFAULT

79
Select Extensions, and click Template Manager. The Template Manager window will
appear immediately.

Within the Template Manager window, select the radio button next to the Template you’ve
just installed and click on the Default button. This will set your installed template as the
Default website template.

80
To preview what the site looks like after installing the new template, click on the Preview
button at the top right corner of your administration panel. This will open in a new window.

Your site should now look like the one shown below:

81
This is what the site looked like, before installing the Template.

82
We can safely conclude that by installing and changing the Template of a Joomla website,
you can give the site a completely new look and feel. However, some templates will require
you to change the Header image and Favicon Icon for your site to look professional and suit
your business.

CHANGING THE HEADER IMAGE OF A TEMPLATE

83
This process will require a Graphics Editing Software. I strongly recommend Adobe
Fireworks, a powerful graphics editing software package. However, if you don’t have it, you
can still accomplish this using Paint image editing software which is in-build the Windows
Operating System.

Process

Browse to the website folder,

Click the templates folder,

Open the folder name of the template you installed.

In the template folder, open the images folder.

Locate the header image and open it with your graphics editing siftware.

Change it to suit your needs, and save the file. When you’re done, go back to your web
browser and hit the refresh button. You should see the new header appearing on your
website.

84
WEB LINKS
In your briefing from the President, he wanted a section for links to Joomla Resources and
External Links.

Let us go ahead and get that set up.

1. First, go to http://localhost/Web Design Course/administrator and log in with the

username “admin” and the password you specified during the installation. If you are
already logged in, you do not need to do this again.

2. From the “Components” menu, select “Web Links” and then “Categories”

3. Press “New” and create a category for “External Links” then press “Save”

4. Click on the “Links” button.

5. Click “New” to create a new link. Create links for www.trimo.co.za, www.joomla.org,
www.seo-web-design-experts.co.za. Enter the Title and URL for the Link before you
Save.

85
INSERTING META TAGS
While on the New Article Page, click on the ”Metadata Information” on the right hand side of
the page.

You can now add a Description of the Article, Keywords to identify the Article and as
well as the Author. The Robots box is used to restrict search engines from indexing your
article (you can leave it blank).

INSERTING A READ MORE LINK

The “Read more” button is used if you want people to read a short preview of the article and
have to click on the read more link read the rest of the article. It is particularly useful if you
have very long articles.

Basically, to insert a read more link, select where you want the preview to end, click on it
and then click on the “Read more” button. The Joomla System will automatically add some
code to the article to create the “Read more” button.

86
The read more link will appear as a red dotted line inside the article. However in the front
end, the read more link will appear as a text link.

When the user clicks on the read more link, the whole article is displayed in the browser.

It is also useful if you are using a blog display and don’t want a list of complete articles to
display on the same page.

SETTING ADVANCED PARAMETERS

87
You will also notice that there are several advanced parameters you can modify such

 Displaying the name of the author

 Displaying PDF, Print and Email Icons that usually appear on the upper right hand
side of Joomla articles much more.

Basically you can Hide/Show an item, set an option to Yes/No, or Use Global.

These parameters determine what appears together with your article on the front end of the
website. For example, setting PDF, Print and Email icons to Show, will display these icons at
the top right hand corner of your page.

1. PDF icon – It enables users to save an article on your website as a PDF file.

2. Print icon – Enables users to easily print an article on your website.

3. Email icon – makes it easy for the website users to email the article to a friend from
your website.

88
PROFESSIONAL BRIEFING
Sections, Categories and Articles on a Joomla website vary depending on the Project
Specifications and the Size of the website. The bigger a website is, the more Sections
and Categories it is likely to have.

The Web Designer will determine how to structure the website, once the Project
Specification has been presented to him/her.

It is therefore important to create a good structure for the website, to allow easy
navigation. When you realize that the website has become considerably too large for users
to navigate, it is important to include a Search Facility. This will enable users to quickly
locate the information they need on your website, making it very user friendly.

STEPS TO TAKE WHEN BUILDING A JOOMLA

WEBSITE

 The steps presented below, are what an average to advanced Joomla Web Designer
follows when creating a website. However, the steps may differ, depending on the
specifications of the project.

 When you get stuck during the building of your website, be sure to visit our website:
wwww.joomlatrainingcourse.co.za. We have a members only Section, which
gives detailed information on the problems encountered during set up, developing
and uploading of a Joomla website and the solutions to such problems.

Step 1 – Determine the Sections and Categories for the website.

Step 2 – Create the Sections and Categories.

Step 3 – Create the Articles for the website, placing them under the appropriate Sections
and Categories.

Step 4 – Create the Menus for the content of the website.

Step 5 – Preview the site in a web browser.

Step 6 – Customize your Joomla website by installing a Template.

Step 7 – Configure your website for Search Engine Optimization.

Step 8 – Perform Search Engine Optimization on your individual pages.

Step 9 – Upload your website to a Remote Host on the Internet.

89
CONFIGURING YOUR JOOMLA WEBSITE FOR SEARCH ENGINE
OPTIMIZATION
When you’ve logged in to the Administration Panel, select Site at the top left hand corner
and click Global Configuration.

90
Under SEO Settings, select Yes for Search Engine Friendly URLs. Search Engine
Friendly URLs will transform the URLs of your pages from something like this:

http://www.yoursite.com/index.php?
option=com_mtree&task=listcats&cat_id=1922&Itemid=35

To something that looks like this:

http://www.yoursite.com/index.php/about-us

Or

http://yoursite.com/index.php/about-us.html, If you choose to add a suffix to the

URL (that’s the .html part). That will only work in some hosts if you use an Apache
mod_rewrite, hence that option. The best way to find out is just to try without it, and if you
have problems, change that option to yes. You can even have it so there is no index.php in
the URL.

91
PERFORMING SEARCH ENGINE OPTIMIZATION ON YOUR
JOOMLA BASED WEBSITE
Search Engine Optimization (SEO) is the process of improving the visibility of a website
on Search Engines using natural “organic” listings.

Steps to follow when Optimizing a Joomla website for Search Engines

Configure Search Engine Friendly URLs.

Enter Metadata Information (Description and Keywords) for each page.

Re-write the Page Titles.

For a Training Workshop Course and Manual on Search Engine Optimization, visit:

www.seo-web-design-experts.co.za

92
Configuring Search Engine Friendly URLs
Login to the Administration Panel of your Joomla website, select Site at the top left
corner, click Global Configuration. Under SEO Setting, select yes for Search Engine
Friendly URLs. Click Save to apply the changes you’ve made.

93
Entering Metadata Information
While logged in as Administrator, click on the Content Menu, select Article Manager and
open the article you wish to enter metadata for. On the right panel, under Metadata
Information enter the Description and Keywords in the appropriate textboxes and click
Save, to apply the changes you’ve made.

94
Re-writing the Page Titles
Select the Menus Menu, click on Main Menu, and select a menu item. When the menu
item opens, select Parameters (System), enter a Page Title of your choice in the Page
Title textbox and set Show page Title to No. Click Save to apply the changes you’ve
made.

95
UPLOADING YOUR WEBSITE TO A REMOTE HOST
Before you upload your website to a remote host, you’ve to first export your Database
and then modify the configuration.php file.

Exporting your MySQL Database

Start your web browser and type in http://localhost

On the WAMP Server Home Page select phpmyadmin under Your Aliases.

PHPMyAdmin will open up immediately, displaying all the databases on localhost. Select
your Database on the left hand panel.

96
When you select your database, the database tables will be displayed as shown below:

97
At the top of your database tables, select Export. The Export database window will appear
immediately.

98
Scroll down to the Save as file option, select it and click Go.

A download dialogue box will appear, requesting you to save the sql file. Click Save. Another
dialogue box will appear where you have to specify the location to save your database.
Select Desktop and click Save. The webdesigncourse.sql file is then saved on your Desktop.
This is the file that contains all your database tables. You’ll have to Import it on your remote
hosts’ Control Panel.

In order to be able to upload your website to a remote host, you need to download FileZilla
(Downloading FileZilla - http://filezilla-project.org/download.php?type=client) and install it
on your local computer. The FileZilla installation package is also available in the Resource
CD supplied with this Manual.

99
INSTALLING FILEZILLA
Browse to the Requirements folder on your Desktop, select the FileZilla Installation Package.
A dialogue box like the one shown below will appear, click on Run. Note: the dialogue may /
may not appear, depending on the setting of your computer.

The FileZilla License Agreement will be displayed, read through it and click I Agree.
100
Choose the Installation Option you prefer.

101
  All users – this option will make the FileZilla program accessible to all the users of
your computer.

 Administrator – this option will make the FileZilla program accessible only to the
administrator of the computer, and will not be accessible to all the other users of
your computer.

Its best to leave this part unchanged and click Next. Unless you’re sure of what you’re
doing.

Choose Components you would like to install.

102
 Select all components here. This will increase the accessibility of your FileZilla
program.

 When you’ve selected the components, click Next.

103
Choose Install Location – Now you’ve to specify the destination folder for your FileZilla
installation. By default, the destination is set to C:\Program Files\FileZilla FTP Client. Click
Next.

Choose Start Menu Folder – Select the Start Menu folder for the FileZilla Client shortcuts
and Click Install.
104
The FileZilla program will begin to install on your computer, this will take a few second,
depending on the speed and specifications of your computer.

105
Launching the FileZilla Client, when the installation has completed successfully, a dialogue
box will appear as shown below. Select Start FileZilla now and click Finish to launch the
FileZilla program.

106
When you’ve launched the FileZilla program, it will open in a new window as shown below.
Your Internet Service Provider will supply you with the FTP Details, which you need to be
able to connect to your Remote Host using FileZilla.

107
Connecting to your Remote Host
Requirements:

 FTP Details i.e. Host, Username and Password.

 An Internet Connection (active).

108
Start FileZilla, making sure you have an Internet Connection. Enter the Host (usually it is
the domain name www.yourdomain.com or ftp.yourdomain.com ), Username and
Password. Click Quickconnect to connect to your Remote Host.

The right panel is the Remote Host and the left panel is the Local Host. The process involves
copying all the website files on the Local Host to a Remote Host on the Internet. Make sure
your Local Host panel displays the files on your local website on (C:\wamp\www\Web
Design Course). Select all the files for your website on localhost, right click and select
Upload.

The files will begin to be uploaded onto the Remote Host. Make sure that the upload process
is not interrupted by anything.

109
When the upload is done, FileZilla will display a message “Directory Listing Successful” as
shown on the snapshot below.

UPGRADING TO THE LATEST VERSION OF JOOMLA

Upgrading Joomla is fairly simple and straight forward, below are the steps to safely
upgrade your Joomla website. If it causes problems, you can always revert back to the old
version, since you’ll be having a back-up of your website.

110
The Importance of Upgrading Joomla
 It safeguards your website from unauthorized access, since some of the Joomla
Updates, are meant to fix security issues.

 It fixes some bugs within the Joomla system that you might not know about.

 It improves the performance and functionality of your Joomla website.

Steps for Upgrading Your Joomla website:

Back Up your website and MySQL database.

Download the Upgrade Package from the joomla.org website:

http://www.joomla.org/download.html

Unzip the Joomla Upgrade Package on your computer.

Connect to your remote host using FileZilla.

Upload the files in the Upgrade Package folder, making sure you overwrite similar
files on the Remote Host.

Open your browser, enter your website URL and test your website. If it still displays
error messages, re-upload the files. Make sure that the upload process is not
interrupted at all.

EXTENDING THE FUNCTIONALITY OF A JOOMLA WEBSITE

Joomla is so powerful that you can actually implement E-Commerce, Forums, Login System,
Banners, Tracking Systems and much more on your website, by simply downloading,
installing and configuring the appropriate Plug-in, Module or Extension.

111
There are thousands of Extensions, Modules and Plug-ins on the joomla.org website. Some
are actually Free for public download.

 You will learn how to extend the functionality of a Joomla website using Plug-ins,
Modules, and Extensions.

 You will get information on the most handy, useful plug-ins, modules and extensions
that you will need to build top notch, professionally looking websites.

WHERE TO GET MODULES, EXTENSIONS AND PLUG-

INS
 They are available on the joomla.org website (both free and commercial).

 When you go on joomla.org, type in the module, extension or plug-in name in the
search box. A lot of them will be listed. You can read through the reviews of each
and choose the one that suits you.

INSTALLING MODULES, EXTENSIONS OR PLUG-INS

The process of installing a module, extension, and plug-in is similar to the one of installing a
Template. The difference comes in the enabling of the module, extension or plug-in.

Login to the back-end of the Joomla website.

On the top left menu, select Extensions. A drop down menu will appear.

Click Install/Uninstall. The Extension Manager window will appear.

Browse for the Module, Extension or plug-in you wish to install from your computer.

Click Upload and Install.

When you’ve successfully installed the module, plug-in or extension, configure it to suit your
needs.

CONFIGURING YOUR MODULES AND PLUG-INS

You can change the Module / Plug-in parameters, title and publish or enable them on
suitable positions. However, you’ll have to experiment on several positions before choosing
the one that suits you.

112
Joomla has a set of great modules in-built (login, whos online, search, latest news etc),
which you can use to extend the functionality of your website. At the top menu of your
administration panel, select Extensions, a drop down menu will appear click Module
Manager. In the module manager, click New on the top right menu. Select and open the
module you wish to enable. Change the position and click Apply. Preview the site in a
browser and see what the site looks likes now.

113
114
CONCLUSION
Like most interfaces with a lot of features, Joomla can seem to have a long learning curve,
due to all of its features and all its possible configurations. The task is much less time
consuming that it seems, especially if you set yourself to master one feature at a time. In
no time you can have an easy to update dynamic site that can also grow with you.

Changing the look and feel of the website and adding features to it can be done in minutes
and major configuration changes can be done by changing a few files. If you’ve ever
considered using Joomla, I hope this guide inspires you to give it a try, and I hope it helps
to make your new CMS experience a much easier one.

If you ever run into any problems using Joomla, please ask for help at
www.joomlatrainingcourse.co.za or visit the Joomla Forum on the www.joomla.org website.

115
FURTHER RESOURCES
With all of this completed, and only a short amount of work with Joomla!, you have a
professional looking web page that meets all of the requirements from the company. In no
time at all, you will be getting a nice big pay check for doing just a few hours of work on the

website! Chances are, you are going to want to go further and do more with Joomla!. Check
out some of these resources to help you further your Joomla! experience:

 http://www.joomlatrainingcourse.co.za – The Home Page for the Joomla

Training Course.

 http://forum.joomla.org – Sign up for the forums, search, and ask questions,

even helping others if you are able!

 http://help.joomla.org – Find more documentation and training information.

 http://extensions.joomla.org – Find lots of very cool extensions to further

enhance your Joomla! websites.

 http://www.joomla.org – Find a way to give something back to the community!

Enjoy!

Joomla!

116