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 1.7.3 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 1.7 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 which 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. But 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! 

2   

Contents
Installing Joomla ............................................................................................................................................................................. 6  Install a Local Web Server using XAMPP or WAMP ............................................................................................................................... 7  Installing Joomla 1.7 ............................................................................................................................................................................... 8  Basics of Joomla .................................................................................................................................................................................... 11  Your First Joomla site: Cattle  ........................................................................................................................................................ 12  . 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  Step #7: Cleanup & Fine Tuning  ........................................................................................................................................................... 34  . Using a Template .......................................................................................................................................................................... 37  Uploading the site on a web server ............................................................................................................................................... 39  7‐step procedure ................................................................................................................................................................................... 41  To conclude .................................................................................................................................................................................. 48 

3   

Appendices with hints and tips ..................................................................................................................................................... 49  Appendix 1 – Display errors ................................................................................................................................................................... 49  Appendix 2 ‐ Install another language for control Panel/Site/Content ................................................................................................. 49  Appendix 3 ‐ Remove the Font Size box ................................................................................................................................................. 50  Appendix 4 ‐ Using the Trash ................................................................................................................................................................. 50  Appendix 5 – Use Extensions from Internet ........................................................................................................................................... 51  Appendix 6 – Place a module inside an article ...................................................................................................................................... 51  Index ............................................................................................................................................................................................ 52 

 

4   

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/ 

5   

Installing Joomla 
  Joomla is a web application written using PHP, and hence it needs a 'web server' to run.    To make a Joomla Website available on the World Wide Web, you need to host it on a web host.  But to learn Joomla, you can (temporarily) convert your own computer into a web server, and Install Joomla on  it. It is also great to do experiments before implementing on your site once it is published on a real server.    Hence, installing Joomla on your computer requires you to do install a local server first.  If you already have a web server with PHP and MySQL installed on your computer, you may simply skip the first  step.   

     

 

6   

Install a Local Web Server using XAMPP or WAMP 
  Installing a web server used to be a pain, especially because you had to manually configure it to run PHP. But  not anymore, thanks to 'XAMPP' ‐ free software that 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. There are  different versions available for different operating systems such as  Windows XP, Vista, Linux, Mac, Solaris etc. Select the correct version  for your computer and install it.    To start XAMPP's Apache server and MySQL, go to Start‐>All Programs  ‐>Apache Friends ‐> XAMPP Control Panel and click on the 'Start'  buttons for Apache and MySQL.    For automatic start during your learning period you may click the 'Svc'  buttons for Apache and MySQL.    If on day 2 your website doesn't work, you probably forgot to re‐start XAMPP!    As alternative (especially if XAMPP runs awfully 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 1.7 
  Now that you have a web server ready with PHP and MySQL, let's install the Joomla CMS. Download the latest  version of Joomla from joomla.org using the 'download' link on the homepage. Download the zip file to  'C:\xampp\htdocs\' since you have installed the web server using XAMPP.  Note: If you use WAMP you should use 'C:\wamp\www\'    Make a folder 'joomla17' in this directory and extract the archive in it. Now, you can access this folder from  your web browser using the path 'localhost/joomla17'. So open your browser and type the address  'localhost/joomla17' in it. You will be shown the installation screen of Joomla.  Note. This document assumes that you use folder 'joomla17' for your Joomla installation. If you install Joomla in  another folder, read that folder name instead of Joomal17!    The first screen lets you select the language for installation (not for Joomla itself!). Choose your language and  click 'Next', and you will be shown the second screen with all the settings of your web server and whether they  are good for Joomla If you see a red on for display errors see appendix 1. Click 'Next' to proceed. 
 

The third screen is a license agreement that you have to agree to. Click 'Next'. 
 

The fourth screen is specifying the database settings, including the database, username, and password. Use the  following settings:  • Database Type: MySql  • Host Name: localhost  • User Name: root  • Password: leave this field empty, otherwise you will get an error message!  • Database name: 'joomla17'  • Table prefix: accept the proposed prefix 
 

Click 'Next'. 
8   

The fifth screen 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'.    The sixth screen is to specify the Site name and a password  for the administrator. So fill the form with a name for the  site, your e‐mail address, an admin name ('admin' is OK  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 which you can edit or delete.  After clicking on that button, you are shown a message  'Sample data installed successfully'. Now click on 'Next'.            The seventh screen: click 'Remove Installation Folder' to minimize the chance of being hacked.  If you wish to use another language than English, click 'Joomla in your own language?' to install support for  your language. This will guide you to the language packs which you may install (also see appendix 2).    Click on 'Site' to view the sample data.    Congratulations! You successfully installed Joomla 1.7 on your computer! 

9   

Exploring the Front‐end 
  Now that you have successfully  installed Joomla, you can always  access the website by typing the  address 'localhost/joomla17' in  your web browser. This is 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  • The administrative back‐end of Joomla allows you to edit this content or add  new content.  • Whenever a visitor visits the website, the front‐end shows him this content  from the database.                      Hence, managing a Joomla site is mainly about logging into the administrative panel and adding or editing  content.    So, when you see a Joomla powered website, its front‐end shows you some content from the database.  All the data, right from the links in the menu to the information about users is stored in the database.  The administrative interface lets you edit this database, hence 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/joomla17' and you should be able to access the administrative interface of the website  by pointing your browser to 'localhost/joomla17/administrator'.    Select any topic for making your first website. We're 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 our 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 administrative back‐end of the site by pointing your browser to  http://localhost/joomla17/administrator/.    Log in with username as 'admin' and the administrator password that you had set while installing this Joomla.  You will be shown the cool administrative interface of your Joomla site.    Click on the 'Global Configuration' button. You will see a form with different fields.  Now, use the 'Site Name' Field to specify the name or your site, which is 'Cattle' in our case. 

    Now, click on the 'Save & Close' button at the top right. You will see a message 'Configuration was successfully  saved'.  Click 'View Site' at the top right. Depending on your browser settings you may see the text 'Cattle' in your  browser.  If you see many lines with error messages like 'Strict Standards: Non‐static method JLoader...' then see  Appendix 1 to change display_errors.    Congratulations on doing the first modification to your site! 

13   

Step #2: Create Pages 
  Our Cattle website will have 4 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 administrative interface  (joomla17/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  'Add New Article'.    Fill in the title for the page ("Home"), leave Alias empty (it  will be filled in for you), select the 'category' as  'Uncategorised'.  Then add some text in the Article Text box starting with  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. Click on the 'new' button on the top right to  create a new article.     
14   

For the 2nd page 'Word Origin', 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 like 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 may browse and upload it. 
 

When you are ready click 'Save & New' to directly create a new article. In this way, make the remaining two  pages.    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. 
 

So, 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 on  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.    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 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/joomla17', 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 Administrator screen click on Article Manager and in the top right hand corner choose 'Options'. Here  we can set the default values for articles. We also have the possibility to override these default values for each  separate article when we edit it.    Change 'Show Title', 'Show Category', 'Show Parent', 'Show Publish Date',  'Show Icons',  'Show Print Icon', 'Show email icon' and 'Show Hits' to 'Hide'  and click 'Save'. When your mouse hovers about the option text, an  explanation is shown. 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 can write  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/joomla17', 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,  but it has too many things in it. These  'things' are called 'modules' and are shown  in the picture. The only required module is  'Main Menu' (however with less menu  items) and 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 administrative back‐end  of the site by pointing the browser to  'localhost/joomla17/administrator' and log  in. Now go to 'Extensions'‐>'Module  Manager' using the menu. 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 some 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! 

19   

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 page to be shown when you see the website.    Go to the administrative back‐end, and open the menu manager for 'main menu' by going to  'Menus'‐>'Main Menu' in the menu.    You will be shown a list of all the links currently seen in the main menu and the tree structure  with the submenus.    To make our 'Home' page default, select it using the tick box and click on the 'Home' button on the top right.  Now, you will note that a small star appears in the Home column. Make the 'home' link THAT YOU CREATED  BEFORE as the default. It should be somewhere at the bottom of the list.    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 for the ones  pointing to the 4 pages that you created and then click on the 'unpublish' button.    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, but if you have a cool logo for the Cattle website, choose 'Extensions'‐>'Template  Manager' which will show various templates. The template we now use is 'Beez2 ‐ default'. Click that name and  you may edit various settings. In the right hand column next to the current 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 '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 which you can edit any time by logging into the  administrative back‐end 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 administrator control page 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 back‐end, 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'.  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\joomla17 and erase all files and folders in this folder. If you use WAMP, erase all  content in C:\WAMP\www\joomla17.  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 back‐end 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 really easy. Go to the administrative back‐end of the site by pointing your browser to  http://localhost/joomla17/administrator (or where ever you installed Joomla for this exercise!).  Log in with username as 'admin' and the administrator password that you had set while  installing this Joomla. You will be shown the cool administrative interface of your Joomla  site.  Click on the 'Global Configuration' button. You will see a form with different fields.  Now, use the 'Site Name' Field to specify the name or your site, which is 'Bhide College of  Engineering' in our case.   

    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 which 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 administrative interface  (joomla17/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 isn't any link in the  menu pointing 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 but 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.    You may now jump to Step #6 and add menu links to these pages, or continue to the next step and make the  rest of the content. 
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 administrative panel, or by  using the menu through 'Content' ‐> 'Category Manager'. Note that you can return to the  main page or the 'control panel' of administrative back‐end 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.    Write the name for the category as 'Departments' and go down and write a description for this category in the  'Details' 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'. The approach is  like what we did before when adding an article.  Just 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' either from the control panel  (i.e. the main page of administrative back‐end) or by using 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.  Select 'departments' in the Parent box, 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 a new category  immediately, rather than going via the  Category Manager.    Now, also make the categories 'Electrical Engineering' and 'Civil Engineering' and 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 have to specify the category. Refer to step #3 if you forgot how to add a page/article. 
30   

Below is how we created the 'Faculty' page of the Mechanical Engineering department.   

    In the same fashion make the remaining four articles 'Facilities', 'Projects', 'Faculty' and another 'Projects'!  Make sure that you select the proper category for each page. 
31   

Step #6: Add Links in the Menu 
Once you create all the different pages for each department, it's time to add links to all the content in the  menu.    1: Add Links to the Uncategorised Content    Login into the administrative panel. Go to  'Menus' ‐>'Main Menu' in the menu, then click  on 'Add New Menu Item'.    Take the following four steps:  1. Specify the menu type: Click on 'Select'  in 'Menu Item Type'. 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' (it is actually the only option now).    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, also 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 of 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. Start with 'Mechanical Engineering':  step 1, in the box select under 'Articles' select  'List of Categories', in step 2, pick the category  'Mechanical Engineering' from the category list  and fill in "Mechanical Engineering". In step 4,  select 'Departments' so that the menu item  'Mechanical Engineering' is a submenu under  'Departments'. Do the same for the 2 other  categories.    Add the remaining 5 articles in the same fashion. In step 1 choose 'Single Article', 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 the departments.    With the small blue arrows in the column 'Ordering', you may manipulate 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 Management',  click the Options button and hide 'Show Title', 'Show Category', 'Show Parent', 'Show Publish Date' and 'Show  Hits' and click 'Save'. By the way, if you wish to hide or show he title is a matter of personal preference. We  prefer do have the title within the article/category text, but you others prefer to have no title text in the article  itself and to show the Article or Category Title.    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 under 'Status'.  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 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 Administrator 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 web based administrative interface.    But first, let's enable more options in the WYSIWYG text editor! This editor is a 'plug‐in' ‐ small programs that  make life easier for us. Choose 'Extensions'‐>'Plug‐in Manager', 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. 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   

Using a Template 
  A Joomla template provides a design for Joomla to use for displaying the content ‐ lay‐out, fonts, colours,  location of logo  etc. Using another template does not change its contents. However in some cases it may be  that some modules are simply not shown due to different or missing location definitions... 
 

As an experiment, go to 'Extensions'‐>'Template Manager'. You see the templates that are in the installation  package of Joomla ‐3 are for the website, 2 are for the administration 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. 
 

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  description. Many templates only have a few items that you can change.    Special: To change the banner you should navigate to C:\xampp\htdocs\joomla17\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\joomla17\templates\beez5\index.php.    There are many websites that give you free and paid Joomla templates which you can use on your site. You can  go to joomla.org and do a search for 'free templates', and you will get many templates to use.    One word of warning: if you use a template designed for Joomla 1.5, it may or it may not work within Joomla  1.7! Just try... You may always go back to the template that worked...   
37   

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 administrative interface, and go to 'Extensions'‐>'Install/Uninstall'. You  may download the template to your PC and install it from there, but we may also use the URL above: in the  'Install from URL' box, type 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 1.7 template. To customize it, just go to the folder where it  is installed, and make changes to images, CSS files, etc. as per your skills.    Now that we have the site ready, let's see how to upload it on a web server on the internet.   

38   

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. We have shown the following steps using a  free web host that provides cpanel/vistapanel, which is a management console for administrating web hosting  accounts. You can use any web host that offers similar services.    If you have the option, specify another login name than 'admin' and make sure you have 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 was supplied with. 

39   

 

40   

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. 

41   

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

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

 

43   

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

Step 5: Change the local Joomla Website configuration as per the web hosting account and database details    Go to C:\xampp\htdocs\joomla17\. 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 var var var var var
   

$log_path = 'C:\\xampp\\htdocs\\joomla17\\logs'; $tmp_path = 'C:\\xampp\\htdocs\\joomla17\\tmp'; $host = 'localhost'; $user = 'joomla_user'; $db = 'database_for_joomla'; $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  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 var var var var var
 

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

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

45   

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.   

 
46   

 

  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 Administrative panel of your  website, just add /administrator to the website's  URL. From here you may edit your site as usual. 

47   

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! 

48   

Appendices with hints and tips 
  Appendix 1 – Display errors    To correct display errors like 'Strict Standards: Non‐static method JLoader...', open c:\xampp\php\php.ini (with  Wordpad or Notepad) 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 'French_fr‐FR_1.7.3_lang_pack'.  From the Administrator 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 'Installed ‐ Site' you will now see  French as extra language to choose from. Set the language you prefer with the   symbol. You may do the  same for 'Installed ‐ Administrator'. 
 

Under 'Content' you should click 'New' and  enter the following: 'Title': "French", 'Title  Native': "Français", 'URL Language Code': "fr",  'Image prefix': "fr", 'Language Tag': "fr‐FR". 
 

To make a multi‐language web site requires  quite some work! Please check the various  tutorials for version 1.7.3 on Internet.   

49   

Appendix 3 ‐ Remove the Font Size box    If you use the beez5 template go to C:\xampp\htdocs\joomla17\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\joomla17\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.  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 page) and  menu items (from the Menu Manager pages). 

50   

Appendix 5 – Use Extensions from Internet    On Internet many extensions are available to add functionality to your website, functions that are not normally  available within Joomla.  As an example there is a standard contact form to use in 'Contact Us', but you may wish to use another one.    On site http://extensions.joomla.org/extensions/contacts‐and‐feedback/contact‐forms/8219 you may find a  simple contact form 'Rapid Contact'. Download it to your PC and then install 'mod_rapid_contact16 .zip' using  the 'Extension Manager'. See the next Appendix below how to use it.    Note: Not all extensions are safe! Please check http://docs.joomla.org/Vulnerable_Extensions_List\ for security  information of many extensions.    Appendix 6 – Place a module inside an article    As an example, let's use "Rapid Contact" (see previous Appendix) in an article.    First, start 'Extensions'‐>'Plug‐in Manager' and make sure that 'Content – Load Modules' is enabled.  Then start 'Module Manager' and edit 'Rapid Contact'. Fill in a Title and a unique name for 'Position' e.g.  "rapidcontact" (one word!). Also specify the email recipient on the right hand side.    Now, add a new Article or Category and enter the text "{loadposition rapidcontact}" (including the brackets,  without the quotes!). This will find the Rapid Contact module and place it there where you entered the text!  Please note that sending an email from this module won't work from within XAMPP or WAMP because there is  no email module installed...   

51   

Index 
 

Apache  Article Manager  Add New Article  options  Article options  Back‐end  Banner  Beez2  Beez5  Breadcrumbs  Categories options  Category Manager  options  Contact Form  Contact Us  cpanel  Create web site  Display errors  Editor ‐ TinyMCE  Extension Manager  Font Size box  Front‐end  FTP  Home  Language pack  Loadposition  Login box  Logo  format 
 

7, 49  14, 27  14  18  34  11  37  16, 20, 37, 50  37, 50  34  35  28  36  35, 51  35  39  23  8, 49  36  49  21, 50  11  39  34  9, 49  51  34  20  37  52   

Menu  Add Menu Item  Menu‐path within the site  Module  inside article  Module Manager  MySQL  Options  override global options  PHP  Save & New  Security  Slogan  Structure of the site  Style  Template  Template Manager  Text editor ‐ TinyMCE  Trash  Uncategorised Pages  Upload to server  WAMP  Website  Multiple Websites  on‐line/off‐line  WYSIWYG  XAMPP  You are here: 

15  16, 17, 32  34  19  51  19, 34  6, 8, 39  18, 34, 35, 36  36  6, 39  15, 29, 35  39, 51  20  24  14  37  20  36  50  26  39  7, 8, 23  23  25  36  7  34 

Sign up to vote on this title
UsefulNot useful