2  

Learn Joomla! Fast! For version 2.5.4   

Preface  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!  Note: To improve readability we removed the '!' from Joomla! 

3  

Contents

Installing Joomla ............................................................................................................................................................................. 6 

Install a Local Web Server using XAMPP or WAMP ............................................................................................................................... 7 

Installing Joomla 2.5 on your PC ............................................................................................................................................................ 8 

Exploring the Front‐end ........................................................................................................................................................................ 10 

Basics of Joomla .................................................................................................................................................................................... 11 

Your First Joomla site: Cattle ......................................................................................................................................................... 12 

Step #1: Set the Site Name ................................................................................................................................................................... 13 

Step #2: Create Pages ........................................................................................................................................................................... 14 

Step #3: Make Menu Links .................................................................................................................................................................... 16 

Step #4 Remove all unwanted stuff ..................................................................................................................................................... 19 

Tip: Changing the Logo and Slogan ...................................................................................................................................................... 20 

How Content is Stored .................................................................................................................................................................. 22 

Making your second Joomla Website ............................................................................................................................................ 23 

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

Step #2: Set the site name .................................................................................................................................................................... 25 

Step #3: Make Uncategorised Pages .................................................................................................................................................... 26 

Step #4: Create all Categories .............................................................................................................................................................. 28 

Step #5: Add articles in the categories ................................................................................................................................................. 30 

Step #6: Add Links in the Menu ............................................................................................................................................................ 32 1: Add Links to the Uncategorised Content ..................................................................................................................................... 32 2: Add Links to the Department pages ............................................................................................................................................ 33 

4  

Step #7: Cleanup & Fine Tuning ............................................................................................................................................................ 34 Make a special 'Contact Us' page ..................................................................................................................................................... 35 

Extensions .................................................................................................................................................................................... 37 

Use Extensions from Internet ................................................................................................................................................................ 37 

Place a module inside an article ............................................................................................................................................................ 38 

Using a Template .......................................................................................................................................................................... 39 

Some other topics ......................................................................................................................................................................... 41 

Security .................................................................................................................................................................................................. 41 

Search Engine Optimization (SEO) ......................................................................................................................................................... 41 

Uploading the site on a web server ............................................................................................................................................... 42 

7‐step procedure ................................................................................................................................................................................... 44 

To conclude .................................................................................................................................................................................. 51 

Appendices with hints and tips ..................................................................................................................................................... 52 

Appendix 1 – Display errors (especially for v 1.7) .................................................................................................................................. 52 

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

Appendix 3 ‐ Remove the Font Size box ................................................................................................................................................. 53 

Appendix 4 ‐ Using the Trash ................................................................................................................................................................. 53 

Index ............................................................................................................................................................................................ 54 

 

5  

License                        

 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/ 

 

Insta Joomla  To makHoweveJoomla server.  Hence, If you astep.   

  

lling Joomla

is a web applicatio

e a Joomla Websiteer, to learn Joomla,on it. It is also grea

installing Joomla olready have a web 

 

on written using PH

e available on the W, you can (temporaat to do experimen

on your computer rserver with PHP an

6 

HP, and hence it nee

World Wide Web, yarily) convert your ots before impleme

equires you to do ind MySQL installed

 

eds a 'web server' 

you need to host itown computer intonting on your site o

nstall a local served on your compute

to run. 

 on a web host. o a web server, andonce it is published

r first. r, you may simply s

d Install d on a real 

skip the first 

 

7  

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.  

8  

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 4 'Database Configuration' is specifying the database settings, including the database, username, and password. Use the following settings: 

• Database Type: MySql (not MySqli!) • Host Name: localhost • User Name: root • Password: leave this field empty, otherwise you will get an error message! • Database name: joomla25 • Table prefix: accept the proposed prefix (is different for each installation) 

 

Click 'Next'. 

9  

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.  

Congratulations! You successfully installed Joomla 2.5 on your computer! 

10  

Exploring the Front‐end  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. 

11  

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.  

12  

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: 

 

13  

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! 

14  

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.  

15  

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. 

16  

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'.

  

17  

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. 

18  

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. 

 

19  

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.  

20  

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. 

21  

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! 

22  

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. 

 

23  

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.

24  

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: 

 

25  

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! 

26  

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).  

27  

  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. 

28  

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!    

29  

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. 

30  

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. 

31  

 

  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. 

32  

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. 

33  

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!  

34  

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'.   

35  

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!  

36  

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.  

37  

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".  

38  

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.

39  

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!  

40  

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.    

41  

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!     

42  

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. 

43  

   

44  

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.    

45  

 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.   

 

46  

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.'  

47  

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.  

48  

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';  

You will need to change the following lines of this file:  

var $log_path = 'C:\\xampp\\htdocs\\joomla25\\logs'; var $tmp_path = 'C:\\xampp\\htdocs\\joomla25\\tmp'; var $host = 'localhost'; var $user = 'joomla_user'; var $db = 'database_for_joomla'; var $password = 'password';

 

as per the details of your web hosting account.  

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 

 

Hence, our new configuration file will look like this:  

var $log_path = '/home/vol4/freezoka.com/zoka_1988637/htdocs/logs'; var $tmp_path = '/home/vol4/freezoka.com/zoka_1988637/htdocs/tmp'; var $host = 'sql107.example.com'; var $user = 'zoka_1988637'; var $db = 'zoka_1988637_database_for_joomla';

var $password = 'the mysql password';  

That's it, we're done with the fifth step. 

49  

Step 6: Login into the server using an FTP program  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.  

  

50  

 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. 

51  

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! 

52  

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'.  

Under tab 'Content' you should click 'New' and enter the following: 'Title': "French (fr)", 'Title Native': "Français", 'URL Language Code': "fr", 'Image prefix': "fr", 'Language Tag': "fr‐FR". Then 'Save & Close'.  Making multi‐language web site is not easy and beyond the scope of this introduction. Please check the various tutorials on Internet! 

53  

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);  

Also, further down, find the text "<div id="fontsize"></div>" and delete it.  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).    

54  

Index  

Add New Article  14 Apache  7, 52 Article Manager  14, 27 Article Manager Options  18, 34 

Banner  39 Beez2 ‐ Beez 5 Template  16, 20, 39, 53 Breadcrumbs  34 category  22 Category  14 Category Manager  28, 29 Category Manager Options  35, 36 

Components  37 Contact Form  35 Contact Us Page  35 Control Panel  9, 11, 13, 28 Cpanel  42 Create web site  23 Display errors  8, 52 Editor ‐ TinyMCE  36 Extensions  37 Extension Manager  37, 40, 52 

Font Size box  21, 53 Front‐end  11 FTP  42 Home  34 Language pack  9, 52 Loadposition  38 Login box  34 Logo  20, 39 

Menu ‐ Add Menu Item  16, 17, 32 Menu ‐ move menu item  33 Menu‐path within the site  34 Metadata  41 Module  19 Module Inside an article  38 

Module Manager  19, 34 Modules  37 MySQL  6, 8, 42 Options  18, 34, 35, 36 Override global options  36 

PHP  6, 42 Plug‐in  36, 37, 38 Search Engine Optimization (SEO)  41 Security  38, 41, 42 Slogan  20 Structure of the site  24 Template  16, 20, 37, 39 Template Manager  20, 39 

Text editor ‐ TinyMCE  36 Trash  53 Uncategorised Pages  26 Upload to server  42 WAMP  7, 8, 23 Website on‐line/off‐line  25 Work on Multiple Websites  23 WYSIWYG  36 XAMPP  7 You are here ('breadcrumbs')  34