Learn Joomla Fast 2.5.4

Related Interests

Rating and Stats

Document Actions

Share or Embed Document

Description: The original 'Learn Joomla! 1.5 Fast!' was a great introduction to Joomla! 1.5 by Saurabh R. Bhide. However, some things are outdated and it needed some additions. Therefore I decided to produce a ...

The original 'Learn Joomla! 1.5 Fast!' was a great introduction to Joomla! 1.5 by Saurabh R. Bhide. However, some things are outdated and it needed some additions. Therefore I decided to produce a major re-write for version 2.5.4 with corrections, updates and additions

The original 'Learn Joomla! 1.5 Fast!' was a great introduction to Joomla! 1.5 by Saurabh R. Bhide.

This is a re‐write for version 2.5.4 with corrections, updates and additions by Tinus van de Wouw.

Thank you for deciding to read this book. We have written this book for you to learn Joomla 2.5 as fast as
possible.

This book is meant to be read cover‐to‐cover, and all you have to do is read a page, do what it says, and go
ahead. After completing all the tasks in the book, you will be a fluent Joomla user, ready to make typical
content websites.

When I first came across Joomla, I found it easy to install, but a bit difficult to learn the administration. Even
more difficult to learn was how to customize the site as per my requirements. There were many tutorials out
there that explained different tasks, but not a single one that explained how to install, modify and administer a
Joomla website as per my needs. Hence, I learned Joomla the harder way by trying out different tutorials,
experimenting different buttons in the administration, and seeing what happens. I gradually became fluent in
making and administrating Joomla websites. However, the bad part is this whole process took 6 months!

Now, we have written this book in such a way that you will learn all that within a single weekend, or 2 days. If
you have started reading this book this morning, you will be able to make any type of Joomla websites by
tomorrow evening.

So, tell everyone you're busy, order some pizza and drinks, and learn Joomla!

The original book about version 1.5 is licensed under the Creative Commons Attribution 2.5 India License. For
more details, go to http://creativecommons.org/licenses/by/2.5/in/

5

Installing Joomla

Joomla is a web applicatio
on written using PH
HP, and hence it neeeds a 'web server' to run.

World Wide Web, yyou need to host it on a web host.
To make a Joomla Websitee available on the W
Howeveer, to learn Joomla,, you can (temporaarily) convert your o
own computer into
o a web server, and
d Install
Joomla on it. It is also greaat to do experiments before implementing on your site o
once it is published
d on a real
server.

Hence, installing Joomla o
on your computer requires you to do install a local server first.
If you already have a web server with PHP an
nd MySQL installed
d on your computer, you may simply sskip the first
step.

6

Install a Local Web Server using XAMPP or WAMP

Installing a web server used to be difficult, especially because you had to manually configure it to run PHP.
But not anymore, thanks to 'XAMPP'! This free software installs an Apache Web Server, PHP and MySQL or
your computer and configures these three to work together. All you have to do is download it and install!

From www.apachefriends.org/en/xampp.html (change the
'en' to 'fr' for the French version) you may download XAMPP.
Different versions are available for different operating
systems such as Windows XP, Vista, Linux, Mac, Solaris etc.
Select the correct version for your computer and install it as
you would install any program.

To start XAMPP's Apache server and MySQL, run "xampp‐
control.exe in the XAMPP folder, or go to Start ‐> All Programs
‐> Apache Friends ‐> XAMPP Control Panel.
Then click on the 'Start' buttons for Apache and MySQL.

If on day 2 your website does not work, you probably forgot to
re‐start XAMPP!

For automatic start during your learning period, you may click
the 'Svc' buttons for Apache and MySQL.

As alternative, (especially if XAMPP runs very slow as happens on some computers) you may
install WAMP from http://www.wampserver.com.en/. During install, accept all defaults.

If WAMP is no longer needed you should uninstall the program to minimize memory usage
and start‐up time.

7

Installing Joomla 2.5 on your PC

Now that you have a web server ready with PHP and MySQL, let's install the Joomla CMS.
First, in Explorer manoeuvre to 'C:\xampp\htdocs\' and make a folder 'joomla25' (Note: If you use WAMP you
should use 'C:\wamp\www\ and make the folder there)'
Download the latest version of Joomla from joomla.org using the 'download' link on the homepage ‐ also
download an update if present. Then unpack the zip file(s) to the Joomla25 directory that you just made.

Now, you can access this folder from your web browser using the path 'localhost/joomla25'. So open your
browser and type the address 'localhost/joomla25' in it. You will be shown the installation screen of Joomla.
Note. This document assumes that you use folder 'joomla25' for your Joomla installation. If you install
Joomla in another folder, use that folder name instead of Joomal25!

Screen 1 'Choose Language' lets you select the language for the installation (not for Joomla
itself!). Choose your language and click 'Next' to see the next screen.

Screen 2 'Pre‐installation Check' shows all the settings of your web server and whether they are OK for Joomla.
If you see a red on for display errors see appendix 1. Click 'Next' to proceed.

Screen 3 'License' is a license agreement that you have to agree to. Click 'Next'.

Screen 5 'FTP Configuration' is for specifying FTP setting to Joomla. But since we are installing Joomla on
a local computer, say 'no' to 'Enable FTP layer' and click 'next'.

Screen 6 'Main configuration' is to specify the Site name and
a password for the administrator.
So fill the form with an appropriate name for the site, your
e‐mail address, an admin name ('admin' is OK for now) and
an administrator password.

While in this step, you should click on the 'Install Sample
Data' button so that your website will initially have some
sample data (or content) that you can edit or delete.
After clicking on that button, the button text will change to
'Sample data installed successfully'.

Now click on 'Next'.

Screen 7 'Finish'. Here you must click 'Remove Installation Folder' to minimize
the chance of being hacked. Do this first.

If you wish to use Joomla in another language than English, click 'Joomla in your own language?' to install
support for your language. This will guide you to the language packs that you may install (also see appendix 2).

Click on 'Site' to view the sample data or 'Administrator' to go to the login page of the Control Panel.

Now that you have successfully
installed Joomla, you can always
access the website by typing the
address 'localhost/joomla25' in
your web browser.
The figure to the right shows the
default Joomla site with the sample
content.

We will show you how to modify
this site according to your needs in
the following chapters.
Right now, just browse the site,
clicking on different buttons and
trying them out.

It is also very instructive to read the
'Getting Started' and 'Using
Joomla!' pages.

10

Basics of Joomla

Joomla is a 'Content Management System' (CMS), which means that it is a system for
managing different types of content.
• All content is stored in the database
• Whenever a visitor visits the website, the front‐end shows him specific content

from the database.
• The administrative back‐end of Joomla allows you to edit the content or add

new content. Throughout this document we will call this the 'Control Panel'.

Hence, managing a Joomla site is mainly about logging into the Control Panel and adding or editing content in
the database.

So, when you see a Joomla powered website, its front‐end shows you some content from the database.
The database contains all data, from the links in the menu to the information about users.
The Control Panel (administrative interface) lets you edit this database, giving you total control over the site.

11

Your First Joomla site: Cattle

Now that you have installed Joomla on your computer, let's create your first Joomla website.

If you have installed Joomla exactly the way shown above, your website should be accessible by pointing the
browser to 'localhost/joomla25'. You should also be able to access the Control Panel of the website by
pointing your browser to 'localhost/joomla25/administrator'.

You may select any topic for making your first website, but we've choosing the topic 'Cattle' or Cows. Wikipedia
has a special page about cattle: see http://en.wikipedia.org/wiki/cattle. We will use the information in the Wiki
pages to practice how to make your first web site.
This website will be very simple, and just consist of 4 pages.

We will make the website in 4 easy steps:

12

Step #1: Set the Site Name

This is really easy. Go to the Control Panel by
pointing your browser to
http://localhost/joomla25/administrator/.

Log in with username 'admin' and the administrator
password that you had set while installing this
Joomla. You will be shown the cool Control Panel of
your Joomla site. The layout depends on the
available screen resolution.

Click on the 'Global Configuration'
button.
You will see a form with different fields.

Now, find the field 'Site Name' and specify the name or your site,
which is 'Cattle' in our case.

Next, click on the 'Save & Close' button (the top right hand side of the
screen). You will see a message 'Configuration was successfully saved'.

Click 'View Site' at the top right. Depending on your browser settings, you may or
may not see the text 'Cattle' in your browser.
Note: If you see many lines with error messages rather than a decent screen, please see Appendix 1.

Congratulations on doing the first modification to your site!
13

Step #2: Create Pages

For our Cattle website will make four pages about Cattle. These are:
1
Home
2
Word Origin
3
Economy
4
Health

It is very easy to create such pages. Just go to the Control Panel (joomla25/administrator) if
you are not there 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
'Add New Article'.

Fill in the title for the page ("Home"),
leave Alias empty (it will be filled in for you) and select
the 'category' as 'Uncategorised'.

Then add some text in the Article Text box starting with
the text "Home Page". Select (highlight) 'Home Page' and
choose 'Heading 1' as style.
Click on the 'Save & Close' button at the top right.

You will be now taken to 'Article Manager' from where
you can edit any article, delete any article or make new
articles. Here, click on the 'new' button on the top right
to create a new article.

14

For the 2nd page 'Word Origin', again, fill in the menu name and choose 'uncategorized'. Then, simply copy the
relevant part form Wiki and paste it in the text box.

Note that Joomla lets you write the articles/pages using a rich text editor, as shown in the above picture. This
means that you can make the text appear the way you want it. Use this rich text editor just as if you would use
any word processing software.

As for the first article, select (highlight) the title "Word Origin" and choose the style 'Heading 1'.

To insert images, you should use the 'Image' button at the bottom left of the rich text box. If a suitable image is
not yet in your database (see the list) then you should first upload it.

When you are ready click 'Save & New' to directly create a new article. In the same way, make the two other
pages 'Economy' and 'Health'.

Note that the four pages that created are not yet visible on the website! They will become visible only after
we create a menu link for them.

Now that we have all the four pages ready, let's move on to the next step and create menu links for those
pages.
15

Step #3: Make Menu Links

There are different menus in a Joomla website, and you can add links to the newly created pages in any of
these menus. On the sample site home page we can see three different menus – these are defined in the used
Beez2 'template'.

16

Now, choose Menus ‐> Main Menu, and then click on 'Add New Menu Item' to create a new menu link for one
of our pages.

In the new screen you should take the following four steps for each menu item.

1. Choose what kind of item you want to add to the menu.

Click on 'Select' next to the Menu Item Type box.
Now a new box appears where you should choose
the type of menu item. Under the heading 'Articles'
click on 'Single Article'.

2. Choose the specific item you want to add

On the right hand side under 'Required Settings' click on the
box 'Select/Change'. Now you will see a list of articles on
multiple pages. Find 'Home' (with today's date!) and click it.

3. Enter the menu title as it appears on the screen.

Enter "Home" in the Menu Title box.

4. Specify the menu location i.e. where in the menu structure this item should appear.

Under 'Menu Location' make sure that 'Main Menu' is selected
and in 'Parent Item' choose 'Menu Item Root'.

Now, in the top right hand corner click 'Save and Close' and...
you will see an error message! Another menu item with the same alias exists! Continue from step 2 above but
in step 3 also enter "home‐cattle" in the 'alias' box and click 'Save and Close'.

You now return to the menu manager where you can see the current structure of the Main Menu.
17

If you visit your Joomla website now by pointing your browser to 'localhost/joomla25', there
will be two 'home' links in the main menu. The second one is the one that you just created.
Click on it, and you will be shown the home page that you had made previously.

Well, not quite! There is extra information about the Category ('uncategorised'), publish date,
writer of the article and the number of hits. Also the title is shown, where we also inserted a
menu title in the article. Before we will make the other menu items, we will change this.

From the Control Panel click on 'Article Manager' and in the top right hand corner, choose 'Options'. Here we
can set the default values for articles. We may override these default values for each separate article when we
create or edit an article.

Change the following items to 'Hide': 'Show Title', 'Show Category', 'Show
Parent', 'Show Author', 'Show Publish Date', 'Show Icons', 'Show Print Icon',
'Show email icon' and 'Show Hits'. When your mouse hovers about the option
text, an explanation is shown. Then click 'Save'.
When you look at the page again (press F5 to update the page), you will see
that the extra info is gone.

Now, repeat the steps above to create menu links for the other three pages. You may use any
name for the links, but realize that there may be an item with the same alias...

The main menu will now look like the figure on the right.

Now we have the four pages ready with some content in them and menu links pointing at
them. However, we still need to clean the page:
1 All items that are not related to our Cattle information should be cleaned up.
2 When the site is visited through 'localhost/joomla25', the 'home' page that you
created should be shown.
3 All other links from the menu should be removed.

18

Step #4 Remove all unwanted stuff

The figure shows the page as it is right now, too
many things are on the page.
These 'things' are called 'modules' and are shown
in the picture. The only required module is 'Main
Menu' (however with less menu items), the others
are not required by our Cattle website. So let's hide
them.

To hide unnecessary modules showing on the
page, go to the control panel via
'localhost/joomla25/administrator' and log in.
Now, click 'Module Manager' or use the menu: go
to 'Extensions' ‐> 'Module Manager'. The 'Module
Manager' lets you manage all the modules.

There you will see the first page with 20 of the
currently installed modules on the site. The three
pages (selectable at the bottom) contain about 50 items in total. You may select a page at the bottom in the
page select bar:

Now use the tick box at the top to select all modules on the page, but make sure you
uncheck 'Main Menu' and 'This Site' and then click on the 'Unpublish' button at the
top right. Doing this will hide all modules except both menu modules. When you're
done click 'view site' to see the result!

Now let's clean up the main menu and hide all the links other than the ones pointing to our 4 pages, and also
make the 'home' page that you created as the default home page to be shown when you see the website.

19

Go to the Control Panel, and open the menu manager for 'main menu' by going to
'Menus' ‐> 'Main Menu' in the menu.

A new screen appears that shows a list of all the links
currently available in the main menu (see right).
You also see the tree structure with the submenus.

To make the new 'Home' page default, first find the
'home' link that you created before ‐ it should near the bottom of
the list. Then select it by using the tick box and then click on
(the Home button, top right).
Please notice the small star in the Home column and double‐check.

To clean up the menu and remove all the links other than required, just do like you did for the modules, select
all the menu links which are not required, and 'unpublish' them, i.e. select all the links except the ones pointing
to the 4 pages that you created and then click on the 'unpublish' button. Double‐check in the 'Status' column.

Tip: Changing the Logo and Slogan

The Joomla logo that you see on the top left of every page on the website is a part of a 'template' ‐ we will go
into this in detail later. If you have a cool logo for the Cattle website, first, reduce its size so that its height is 30‐
50 pixels. A GIF file with transparent background is preferred.

Choose 'Extensions' ‐> 'Template Manager', which will show various
templates. Click 'Beez2 ‐ default', the template we now use is, and you
may edit various settings. In the right hand column, near 'Logo', click
'Select'. Below the images click 'Browse' to choose your logo, then 'Start
Upload', so it appears in the images. Click it and then click 'Insert'.

Lastly, change 'Site Description' (a nice place for a slogan) to "Heart for Cattle" and click 'Save & Close'.

Click 'View Site' to see the new logo and slogan.
20

Here we are, with our custom Cattle website with 4 pages that you can edit any time by logging into the
Control Panel and going to 'article manager'.

To finish things off you may delete the Font Size box at the top. It is not something that can be done easily via
the Control Panel and the procedure can be found in Appendix 3.

We hope you enjoyed making the Cattle website!

21

How Content is Stored

The content in Joomla is the pages of information to be shown on the website. There are 2 types of content:
categorized and uncategorized.

1. Uncategorised Content
This refers to plain pages that are shown on the website. You can edit these using the Control Panel and
add as many of them as you want. These pages do not belong to any category hence they are termed as
'uncategorised'.

2. Categorised Content
Categorised content also refers to pages, but
these pages belong to a structure, which is
made up of categories and articles.
A 'category' may contains other 'categories'
and 'articles', which contain pages of content
so they are also called 'content items'.

There are no limitations the number of levels
and you may use categories and articles on
the same "level".
The figure shows an example of a site having
information about different cars. 'Cars' is a category, having two other categories 'Hatchbacks' and
'Sedans'
These categories have a page for each car in that category.

22

Making your second Joomla Website
We will normally create a web site in 7 steps:

Step #1: Make a drawing of the structure of the site

Step #2: Set the site name

Step #3: Create the uncategorised pages (Home, About Us, etc...)

Step #4: Create all categories

Step #5: Add pages/content items in these categories

Step #6: Add links for all this stuff in the menu

Step #7: Cleanup & Fine Tuning

We will follow these 7 steps to make a web site of a college....

For this exercise, you should re‐install Joomla.
First, go to C:\XAMPP\htdocs\joomla25 and erase all files and folders in this folder. If you use WAMP, erase all
content in C:\WAMP\www\joomla25.
Then use the installation instructions as described on pages 8/9, however this time without the sample data!

If you wish, you may also install Joomla in another directory e.g. "college". So, first make a new directory called
C:\XAMPP\htdocs\college and install Joomla there. Just remember that in this case you should use
"localhost/college" to view the site and "localhost/college/administrator" to start the Control Panel.

In this fashion you may actually work on multiple websites in parallel! Each requires its own folder and
installation procedure.
23

Step #1: Make a drawing of the structure of the site

Let's make a cool college website using the Joomla instance that you just installed. Think of an imaginary
college. We'll name this imaginary college 'Bhide College of Engineering'.
Before making any Joomla website, you need to decide upon the structure of the website. We strongly
recommend that you draw this structure on paper by hand, and it will be much easier to make the site.
So, here's the structure:

24

Step #2: Set the site name

This is easy. Go to the Control Panel of the site by pointing your browser to
http://localhost/joomla25/administrator (or where ever you installed Joomla for this exercise!).
Log in with your username and the password that you had set while installing this Joomla.
You will be shown the cool Control Panel of your Joomla site.
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 in our case is 'Bhide
College of Engineering'.

Note that on this page you may also place your site on‐line/off‐line and change the off‐line message.

Next, click on the 'Save & Close' button at the top right. You will see a message 'Configuration successfully
saved'. You may also see that the title of browser now contains your site name. Congratulations on doing the
first modification to your site!

25

Step #3: 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 that you may need to edit sometimes. These are:

• Home
• About Us
• The Principal

It is very easy to create such uncategorised content. Just go to the Control Panel
(joomla25/administrator) if you aren't there 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 'Add New
Article' button.

Fill in the title for the page, specify 'category' as
'Uncategorised', add some article text, give the
text 'About Us' the style 'Heading 1' click on the
'Save & Close' 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
that points to this page.
We will add links in the menu later (Step #6).

26

After you clicked the 'Save & Close' button, you are taken to the 'Article Manager', where you can manage all
the articles/pages/content. You will now see the page that you just created is the only article. Later, other
articles you create will be added here.

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 Principal' pages. Ensure you add a title to
the article text and choose 'Heading 1' as style.

Also make the 'Contact Us' page where you should add some names and telephone numbers. When you add an
email ID, it will automatically turn into an email link. To make a more special Contact Us page, see later under
step #7.

If you wish you may now jump to Step #6 and add menu links to these pages so you can check them out and
return here later, or you may now continue to the next step and make the rest of the content first.
27

Step #4: Create all Categories

Creating a category is very easy. You need to go to 'Category Manager', which you can do by
clicking on the 'Category Manager' button on the main page of Control Panel, or by using
the menu through 'Content' ‐> 'Category Manager'.
Note: You can return to the main page or the Control Panel by clicking 'Administration' in
the top. You may also use the menu through 'Site' ‐> 'Control Panel'.

Once you are in the 'Category Manager', you will see a list of all the existing categories. Just click on the 'New'
button to create a new category.

Categories should be made "top down", so start with the category that is highest in the structure. So, we start
with 'Departments'.
Write the name for the category as 'Departments' and go down and write a description for this category in the
'Description' rich text field. First, write a heading "Departmental Details" (Style: Heading1). Then enter a
description e.g. 'This section contains all the information about the different departments in our college'. We
just do the same as what we did before, when we added an article.
Write any description, and click on 'Save & Close' button. You will see that the category is added in the list. You
can edit the description or change the name of the category whenever you want by coming back to the
'Category manager'.

We suggest you have a look at the site
structure that we have designed, and
tick it off all items that are finished with
a checkmark.

Now, let's make the other categories!

28

You can create categories by going to 'Category Manager'. Start from the Control Panel or
use the menu through 'Content' ‐> 'Category Manager', then click 'New'.
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 department) as title.
Now, in the Parent box, select 'Departments'
as this category is a department.
Refer to the chart if you are getting confused.

Write a small description of the department in
the 'Description' box.

Then click on the 'Save & Close' button. You
will be taken back to the category manager.
Repeat the process for all the departments

Tip: You may also use 'Save & New' to save the
category and start to make a new category
immediately, rather than going via the
Category Manager.

Now, also make the categories 'Electrical Engineering' and 'Civil Engineering', both with 'Departments' as
parent. Also check how the Category Manager page shows the tree structure of the categories.

29

Step #5: Add articles in the categories

Now that we have made a category for each department, each department needs 2 or 3 pages for displaying
information about the department. For example, the mechanical engineering department needs 3 pages
1
Faculty: A page about all the teachers in the department
2
Facilities: A page to show off all the labs and machinery
3
Projects: A page to show off all the cool projects done by students in this dept.

You can create the categorised pages the same way you created the uncategorised pages. The only difference
is that you now have to specify the category. Refer to step #3 if you forgot how to add a page/article.
Below is how we created the 'Faculty' page of the Mechanical Engineering department.
30

In the same fashion make the remaining four articles: 'Facilities', 'Projects' for Mechanical Engineering and
'Faculty' and 'Projects' for Electrical Engineering.

Make sure that you select the proper category for each page.

31

Step #6: Add Links in the Menu
Once you created 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 Uncategorised Content

Login into the Control Panel.
Go to 'Menus' ‐> 'Main Menu' in the menu,
then click on 'Add New Menu Item'.

For each menu link we will take the following
four steps (also see page 17):
1. Specify the menu type: Click on 'Select' in
'Menu Item Type'. A box appears. In the
box, under 'Articles' select 'Single Article'.
The box will close.
2. Specify the menu item: On the right hand side click 'Select/Change'. Choose 'Home' in the articles list
3. Enter the Menu Title: Enter "Home" in the 'Menu Title' field.
4. Specify the menu location: In this case there is no parent in the menu structure, so under 'Parent Item'
select 'Menu Item Root'.

Now click 'Save & Close' to save the menu link. Click 'View Site' to see the result of adding your first menu item!

When adding menu items it is a good idea to tick off the menu links in our diagram...

We work our way down in the menu layers, so we define the five root menu items first, following the first 3
steps above.

When adding the category 'Departments' in step 1, in the box select 'List all Categories' (under 'Articles'), then
in step 2, obviously, pick the category 'Departments' from the category list and use 'Departments' in step 3.
32

2: Add Links to the Department pages

These links are made with the same 4 steps as the first menu item above. We have 8 menu items with a specific
parent: 3 categories and 5 articles.

We will first create a link in the menu for
each category. Click 'New' and start with
'Mechanical Engineering'.

1. In the box select under 'Articles' select
'List all Categories'
2. Pick the category 'Mechanical
Engineering' from the category list
3. Fill in "Mechanical Engineering".
4. Select 'Departments' so that the menu
item 'Mechanical Engineering' is a
submenu under 'Departments'.

Make the other two categories in the same way.
Also, add the remaining 5 articles in the same fashion. In step 1 choose 'Single Article', in step 2 pick the right
article ‐ also see the column category. In step 4 pick the menu where the article belongs to, e.g. for article
'Faculty' select 'Mechanical Engineering'.

Now click 'View Site' and you will see the main menu as we created it. However, we wish to have the menu
item 'Contact Us' to appear after 'Departments'. To move a menu item do as follows.

With the small blue arrows in the column 'Ordering', you may move menu items in the menu tree. Click on the
blue 'Move Down' arrow next to 'Contact Us' and hey presto, it moves down indeed!
In the same way you may change the order of the departments and the articles easily.

When you are happy with the menu structure, let's clean up the information we don’t need!

33

Step #7: Cleanup & Fine Tuning

First, double check if the 'Home' link of this site as the 'default' link. Go to 'Menus' ‐> 'main menu' in the top
menu of admin panel. If all is well, there should be a symbol in the 'Home' column. If not, click the checkmark
before home and then the symbol in the top right hand of the page.

Now, we should disable some article options to prevent unnecessary information. Go to 'Article Manager', click
the Options button and hide 'Show Title', 'Show Category', 'Show Parent', 'Show Author', 'Show Publish Date'
and 'Show Hits' and click 'Save'.
By the way, if you wish to hide or show the title is a matter of personal preference.
We prefer to have the title within the article/category text, but others prefer
to have no title text in the article itself and to show the Article or Category
Title. It is, however, strongly advised to be consistent within your web design
to avoid confusion!

There is a login box on the page. This is a module that we may disable. Go to
the Module Manager and check the tick box before 'Login Form', then click
'Unpublish'. Note the red symbol in the 'Status' column.
While we are at it ‐ there is also a module called 'Breadcrumbs' ‐ this shows
the text 'You are here:' and the menu‐path within the site. You may want
to unpublish this too.

On the Home page you will still see both the Menu title as well as the
heading from the article text. Choose 'Menus' ‐> 'Main Menu'. Click
'Home', then on the right hand side, click 'Page Display Options' and
choose 'no' for 'Show Page Heading'. Then as usual 'Save & Close'.

34

If on the web site you click 'Departments' in the main menu, you will see that there is a description of the
subcategories and an article count. In addition you will see
the description of 2 links to the departments, rather than 3!

First, to make the extra info disappear, go to the Category
Manager, there click 'Options' and under tab 'Categories' hide
'Subcategories Descriptions' and '# Articles in Category'.

To show all 3 categories, click 'Show' for Empty Categories.
There are no articles added for 'Electrical Engineering' (hence
it is considered empty), but we do have information in the
Category page!

Make a special 'Contact Us' page

In the Control Panel click 'Components' ‐> 'Contacts' ‐> 'Contacts' (to the right), then click 'New'. Now add a
contact: first enter a Name. On the right hand side click 'Contact Details' and fill in name, email, street name
and number and city. You may also find a photo of the contact and insert it. Click 'Save & New' and add another
contact in the same way.

Now add this to the main menu: 'Menus' ‐> 'Main Menu' ‐> 'Add Menu Item'. As usual, first, choose a menu
item type ‐ now from the selection screen choose 'List Contact in a Category'. Specify the title ("Contact Us"),
then 'Save & Close'. You will get an error message: specify an alias and click 'Save & Close' again.

Now choose View Site to check the result on the second Contact Us menu item. You will see the two persons
you entered ‐ click on one of the name to see the contact form!

35

To Edit Any Page...

The beauty of content management systems is that content once written can be changed any time by the
webmaster using the Control Panel.

But first, let's enable more options in the WYSIWYG text editor that you used! This editor is a 'plug‐in' ‐ small
programs that make life easier for us. Choose 'Extensions' ‐> 'Plug‐in Manager' and a new page opens. Click
'Editor ‐ TinyMCE' and then, on the right hand side, for 'Functionality' choose 'Extended'. 'Save & Close'. Now
you have many more options to manipulate the Article and Category text!

Now that we have a website for our engineering college, you can change the contents of any page easily. Go to
the article manager (by now you know how to do that!) and click the page you want to edit from the list. And
there you go, you are shown all the settings and content of that page that you can edit and save.

You may experiment with the various 'Options' settings in the Article Manager and the Category Manager. You
see, there are many options and it may be overwhelming at first. Just experiment with them to see the effect
and after a while you will feel comfortable to find what you need.

When editing an article, you may also set options only for that page. Here you can decide to overrule the global
settings as set on the Articles Menu page. Similarly, when editing a Category, you may also overrule the global
settings as set on the Categories Menu page.

36

Extensions
Extensions literally extend the functionality of Joomla for the visitor of your website, or for
yourself as web designer. Extensions are Components, Modules, Plug‐ins and Templates.

Components provide new functionality to Joomla such as Banners, Contacts, RSS feeds, Web
links. Once made, you may add components to pages, categories or menus in your website.
Open the menu item 'Components' for a list (see the right‐hand figure)

Modules give viewers of a website useful information or interactive functions.
Examples are 'Articles most read', 'login', 'main menu', polls ‐ also see page 19.
From the control panel, click on 'Module Manager' to edit, publish or unpublish various modules.

Plug‐ins make life easier for you as web designer ‐ they add no functionality for the viewer
of your website. A good example is the WYSIWYG editor TinyMCE.
In the menu, click 'Extensions' ‐> 'Plug‐in Manager' to see a list of plug‐ins.

Templates define what your website will look like. See the next section for a more extensive description.
Use Extensions from Internet

On Internet, many extensions are available. As an exercise let's install 'Rapid Contact', which is an
alternative for the built‐in contact form 'Contact Us'. First, download it from the following link:
http://extensions.joomla.org/extensions/contacts‐and‐feedback/contact‐forms/8219.

Then start 'Extension Manager'. Choose "Upload
Package File" and browse to the location of the
downloaded file, then click 'Upload & Install'.
You will see a message "Installing Module was Successful".

37

Note: Not all extensions are safe! Please check http://docs.joomla.org/Vulnerable_Extensions_List for security
information of many extensions.

See Appendix 2 for another example how you can use the extension manager to install a language pack.

Place a module inside an article

Now of course you wish to use this module in an article! Let's insert "Rapid Contact" in an article.

First go to 'Extensions' ‐> 'Plug‐in Manager' and make sure that 'Content – Load Modules' is enabled!

Start 'Extensions' ‐> 'Module Manager' and edit 'Rapid
Contact'. Fill in a Title and a unique name for 'Position' e.g.
"rapidcontact" (one word, no quotes).
Also check its Status is set to 'Published'.
Under 'Menu Assignment' choose 'On all pages' and on the
right hand side specify the email recipient. 'Save & Close'.

Now, open the Article or Category where you want to insert the module and
type the text {loadposition rapidcontact} (including the brackets). 'Save & Close'.
This will find the Rapid Contact module and place it where you entered the text!

Note 1: If you cut&paste the text {loadposition rapidcontact} rather than type
the text, unwanted HTML may be included causing it not to work.

Note 2: Sending an email from this module won't work from within XAMPP or
WAMP because there is no email module installed...

The next section 'Using a Template' gives you an example how you can install and activate a template.

38

Using a Template

A Joomla template provides a design for Joomla that is used to display the content ‐ lay‐out, fonts, colours,
location of logo, menus etc. Using another template doesn't change its contents, it changes the way it looks.
Note: it may happen that some modules are simply not visible due to different or missing location definitions.

As an experiment, from the Control Panel click 'Template Manager' (or from the menu choose 'Extensions' ‐>
'Template Manager'). You will see the templates that are in the installation package of Joomla: 3 templates for
the website and 2 templates for the Control Panel.

The template 'Beez2' is the template currently in use (see the in the 'Default' column). Tick the checkbox in
front of 'Beez5', then click 'Make Default'. Note that the symbol now moves to 'Beez5'. Next, see what the
website now looks like.

Often you may change a few characteristics of the template. In the 'Template Manager', click on 'Beez5'. On the
right hand side under 'Advanced Options' you may for instance change the logo (300 x 35 pixels), the site title
and the description. Many templates only have a few items that you can change.

Special: To change the banner you should navigate to C:\xampp\htdocs\joomla25\templates\beez5\images\.
Open 'fruits.jpg' in your favourite image editor, and make whatever changes you want. Save it back with the
same name and extension, format 1050 x 180 pixels.
Unfortunately the location and name of the banner file differs for each template. It may be found in 'index.php'
in the template directory, in this case C:\xampp\htdocs\joomla25\templates\beez5\index.php.

There are many websites that give you free and paid Joomla templates which you can use on your site. For
instance, check out joomla24.com that has over 3000 free templates.

One word of warning: if you use a template designed for a previous version of Joomla (1.0, 1.5, 1.6 or 1.7), it
may or it may not work within Joomla 2.5! Just try... You may always go back to the template that worked!

39

Let's try out a free template from company Pixelpoint Creative. The name of the template is 'Gratis' and it is
available at http://www.pixelpointcreative.com/downloads/finish/53‐gratis/116‐gratis‐template.html
To install the template, login into the Control Panel and go to 'Extensions' ‐> 'Extension Manager'.
You may download the template to your PC and install it from there as shown in the previous section, but we
may also use the URL above: in the 'Install from URL' box, copy the above URL.

Click 'Install'. Joomla will automatically download and install the template. You will get a success message and a
screenshot of the template.

Now, let's set this template as the default template. As before, go to 'Extensions' ‐> 'Template Manager' in the
top menu. Select the Gratis template using the tick box at the left of its name and
then click on the 'Make Default' button at the top right.
Now view your website. It will now look like the screenshot that you had just seen.

You can use this same method to install any Joomla 2.5 template. To customize it, just go to the folder where it
is installed, and make changes to images, CSS files, etc. If you are not comfortable with those terms, we would
advise not to customize templates.

Let's face it: there is always something not quite right with the template you use! If you want your own unique
template, there is nice (but not free) program that you may use to design your own template. It is called
'Artisteer' ‐ use Google it to find it.

40

Some other topics

Security

Joomla is very secure, however, hackers are always targeting websites, so you should take some measures.
First, do not use 'admin' as user name and use a long, difficult to guess password, preferable with some non‐
standard characters.
Also, only use extensions that are safe! Check out http://docs.joomla.org/Vulnerable_Extensions_List before
you install any extension.
There is a lot more to say about security e.g. see http://docs.joomla.org/Category:Security_Checklist.

Search Engine Optimization (SEO)

You want your site to be found by Google and other search engines. Search engines continuously scan websites
using 'robots' and check out a special field on the website, called 'Metadata'. You may add keywords in these
Metadata to provide to search engines.
From the Control Panel click 'Global Configuration'.

Under 'Metadata Settings' enter a good description for the
site and keywords you want to be found on.

The 'Robots' settings determine if they should stop their
search at the home page (don't follow links on the page) and
if the home page should or should not be indexed in the
search engines result.

SEO is a complex subject and even books are written on SEO!

41

Uploading the site on a web server

To make your website available on the internet, you need to upload it on a web host's server. To upload and
setup your Joomla website on a web host's server, the web host must offer these 3 services:

1. PHP
2. MySQL
3. FTP

Joomla requires PHP and MySQL, and the FTP feature lets you upload files to their server using the FTP
software.

You can search the web for web hosts that provide these features. Many web hosts today already provide pre‐
installation of Joomla, which makes things much easier for you!

Each web host is different. Below we'll show the steps using a free web host that provides cpanel/vistapanel ‐
this is a management console for administrating web‐hosting accounts. You can use any web host that offers
similar services.

For your website administration, if you have the option, do NOT specify 'admin' as login name, but your own
name or alias and use a long, difficult to guess password to make it more difficult for bad guys to hack your site.
It is a good idea to check http://docs.joomla.org/Category:Security_Checklist to maximize the security of your
site.

Once you register, activate your account and login, you will be supplied with the following details. The next
page shows the details I (Saurabh) was supplied with.

42

43

7‐step procedure

Print out the details of your account if you can, because you will need to refer to them several times.
Now, we have to copy our local Joomla Website to the server. This will be done in 7 steps. Each step is
essential. Let's list out the steps first and then I'll show each step in detail.

1
Login into the Cpanel of the server
2
Create a database on the server
3
Export the database from your computer
4
Import the database in the server
5
Change the configuration file of the local website as per your account's details
6
Login into the server using an FTP program
7
Upload the Joomla website on the server using FTP

Now, let's see how to perform each step, and your website will be online in a few minutes!

Step 1: Login into the Cpanel of the server

Refer to the account settings provided to you by the server, and you will
find a link to your Cpanel. In my case, the link is cpanel.example.com .
Log in with the Cpanel username and password given in the account
details.

44

Step 2: Create a database on the server
Once you are logged into the Cpanel, click on the 'MySQL databases' link in the databases list. You can enter
any name for the new database.
As name for the new database "database_for_joomla" was entered.
You can enter any name. Your name will be modified by the system
with some computer‐generated prefix.

The real name is shown
when you click the 'create
database' button. Remember or write down this name. As you can
see in the picture, I got a name
'zoka_1988637_database_for_joomla'

Step 3: Export the Joomla database from your computer.

Open your local PHPmyAdmin by going to
localhost/phpmyadmin (or wherever your local
phpmyadmin is).

In the databases list, select the database in which you
have installed Joomla. In my case, it is
'database_for_joomla'.

Once you select the database, you will be taken to the
control screen of that database.

45

Now you will see a button named 'Export' in the top
tabs. Click it.

You will be presented with all the settings to export the database. Forget about the rest of the settings. Just tick
on the 'save as file' box and click on 'Go'.

Your browser will give you an SQL file
which you have to store on your computer.
Remember where you store it, because you
have to give it to the server's
PHPmyAdmin.
Ok, you are done with the third step.'

46

Step 4: Import the database in the server

Go to the cpanel of the web host and click on 'phpMyAdmin' in the Databases'
list. Then, click on the link for connecting to this database.
You will be taken to the web host's phpMyAdmin.

Click on the 'Import' button on the top tab.

Click on the 'Choose' button and select the
file that you had saved in step#3.
Click on 'Go', and you will be presented with
a success message.

47

Step 5: Change the local Joomla Website configuration as per the web hosting account and database details

Go to C:\xampp\htdocs\joomla25\. First, make a backup copy of 'configuration.php' and then edit it, for
instance with WordPad. This file has a list of variable names and values, for example: var $editor = 'tinymce';

The $log_path will now be the 'document root' path as given by the web host appended with /logs in
case of Unix‐based web hosts, and \logs in case of windows‐based web hosts. The value for $host will
be the 'MySQL Hostname' as given by the web host
The value for $user will be the 'MySQL Username' as given by the web host
The value for $db will be the name of the database you created in step 4 above
The value for $password will be the 'MySQL Password' as given by the web host

You need FTP software to upload the site. We recommend 'FileZilla', free FTP client software. It is available for
windows, Mac and Linux.

You can download it from http://filezilla‐project.org/download.php?type=client

After downloading and installing the software, open it and enter the FTP details given to you by the web host in
the top bar and say Quickconnect.

Step 7: Upload the Joomla Website on the server using FTP

Now that you have logged into the server, you will be shown the directory structure on the server in the right
column, and your local computer's folder structure in the left column.

49

First, go to the folder in which Joomla is stored on
your computer in the left column, and then
double click on the htdocs folder on the right
column to enter in the htdocs folder. You now
have to transfer all the files of Joomla in this
htdocs folder.

Doing this is very simple. Just select all the Joomla
files in the left column, right‐click on the selection,
and click on 'upload'.

The transfer will take lots of time, since there are
thousands of files that need to be transferred.

Viewing and editing your website

Finally, your website is uploaded and ready to use
on the internet. All you have to do now is go to
the URL of your website, and you will see it in
action!

To open the Joomla Control Panel of your website,
just add /administrator to the website's URL. From
here you may edit your site as usual.

50

To conclude

Going ahead..
Now that you know how to build a basic website using Joomla, you can explore the limitless possibilities Joomla
has to offer.
Subscribe to the http://joomla.org/ blog, read more advanced documentation on the website, and build
complex websites!

Printing this document
Save paper! If you really wish to print this document, print 2 pages on one side (can easily be done with
Acrobat Reader) and print double‐sided.

Comments and suggestions
If you have comments or suggestions for this book, please feel free to write to joomla@vdwouw.net.

Final Words
Thank you for reading this book. We hope you have as much fun reading it as we had making it!
And above all: HAVE FUN!

51

Appendices with hints and tips

Appendix 1 – Display errors (especially for v 1.7)

To correct display errors like 'Strict Standards: Non‐static method JLoader...', edit c:\xampp\php\php.ini and
change display_errors = On to display_errors = Off
Stop and then restart Apache via the xampp control panel for the new settings to take effect.

Appendix 2 ‐ Install another language for Control Panel/Site/Content

Download a language pack from http://community.joomla.org/translations/joomla‐16‐translations.html.
For this exercise, we will assume the 'French_fr‐FR_1.7.3_lang_pack' ‐ others go in the same fashion.

From the Control Panel click 'Extension
Manager', 'Browse' to the download location
and then click 'Upload & Install'.

Next, from the top menu choose 'Extensions' ‐> 'Language Manager'. Under the tab 'Installed ‐ Site' you may
set the language you prefer with the symbol. You may do the same for 'Installed ‐ Administrator'.

Making multi‐language web site is not easy and
beyond the scope of this introduction. Please
check the various tutorials on Internet!
52

Appendix 3 ‐ Remove the Font Size box

If you use the beez5 template, go to C:\xampp\htdocs\joomla25\templates\beez5\ and in file index.php delete
line 32:
$doc ‐> addScript($this ‐> baseurl.'/templates/beez5/javascript/md_stylechanger.js', 'text/javascript', true);

If you use the beez2 template, then do the same in folder C:\xampp\htdocs\joomla25\templates\beez20\

Appendix 4 ‐ Using the Trash

Some errors result from the fact that a file with the same alias is still in the Trash. But to delete (or restore) files
from the trash is not intuitive!

Go to 'Article Manager', then find the filter box '‐Select Status‐' and in the drop‐down
box, choose 'Trashed'. Now you will see all trashed articles and from here you may
restore the article (click tick box, then choose the green 'Publish' button) or delete it
forever (select and click 'Empty Trash').
When you see no more articles, change the filter 'Trashed' back to '‐Select Status‐' and
you will see all your articles again.

In the same fashion you may process trashed categories (do the same on the Category Manager) and menu
items (from the Menu Manager).