Joomla! 1.5: Quick Start Guide

Table of Contents

Table of Contents....2 Introduction.....3 XAMPP Setup....4 Download & Unzip Joomla!....6 Joomla! Installation.....8 Sections, Categories, and Articles...10 Users.....15 Web Links.....18 News Feeds....19 Menu.....20 Home.....20 Categories.....22 Contact.....25 Web Links.....28 News Feeds.....31 Search.....34 Modules.....37 Syndicate.....37 Login.....39 Newsflash.....41 Breadcrumbs.....44 Templates....46 Further Resources....49

Introduction

Hello there! Today, we are going to walk you through setting up your first Joomla! website. In this demonstration, you are going to help set up a website for a landscaping company. In your meeting with the company's president, he described that he would like a section dedicated to trees, another for bushes, and a final for grasses. He would like his own section that will be dedicated to company reports and such. The front page will be reserved for specific material. You also need a section for links, a search page, and a page dedicated to news feeds relevant to landscaping. The public relations director also requested that news feeds be made available for the front page. In this guide, you will be setting up a website to meet these needs in no time at all!

XAMPP Setup

In order to set up Joomla! for this website, you first need to have a server installed on which Joomla! can run. The easiest way to set up a server on your own computer is to use XAMPP. If you are installing Joomla! on a web host, please check out the Official Joomla 1.5 Installation Guide at http://help.joomla.org. Do not install the sample content and skip ahead to the Sections, Categories, and Articles chapter after your installation is complete. Note: The following instructions are based on a Windows install. Other operating systems will be similar but slightly different. Please refer to the XAMPP installation manual for your operating system. 1. Download the XAMPP installer for your version of Windows from the XAMPP website: http://www.apachefriends.org/en/xampp.html. 2. After downloading XAMPP, run the setup and follow the given instructions. Installing Apache and MySQL as services is recommended:
3. Once you have completed the installation, make sure that the installation was successful by visiting http://localhost/. If you have been successful, you should see the following screen:
4. Congratulations, XAMPP is now correctly installed; now let us go get Joomla! setup!
Download & Unzip Joomla!
Now that you are done setting up the server, it is time to download and unzip Joomla!. 1. First, we need to make a folder for Joomla!. Open the folder that you installed XAMPP into usually C:\XAMPP or C:\Program Files\XAMPP on Windows. 2. Open up the folder htdocs:
3. Create a new folder in htdocs titled joomla15. 4. Now we need to download the latest copy of Joomla! 1.5 from the net. Go to http:// www.joomla.org and scroll down the left hand side to find Download Latest and click on 1.5 to open the download page:
5. Then choose the file with the.zip ending:
6. After completing the download, use your favorite program to unzip the files into the joomla15 directory that we created:
Great! Now we are ready to setup Joomla!.

Joomla! Installation

Installing Joomla! is a simple thing. 1. First, go to http://localhost/joomla15. 2. Select your language on step 1 and press Next at the top. 3. Make sure that there are no red items on step 2 (if you set up with XAMPP, you should already be fine) and press Next to proceed. 4. Read over the license in step 3 and press Next. 5. On the Database Configuration page, enter the following details, then press Next:
6. Skip over step 5 and press Next to proceed to step 6. 7. Enter the site name Landscape Smart!, then the e-mail address and admin password of your choice. NOTE: DO NOT PRESS Install Sample Data! 8. Press Next to complete the installation.
9. IMPORTANT: Open up the location where you unzipped Joomla! (usually C:\XAMPP\htdocs\joomla15 or C:\Program Files\XAMPP\htdocs\joomla15) and delete the installation directory:
10. Return back to the installer and click on Site. If you completed the install successfully, you should now see a blank page ready for all your Joomla! content!
Sections, Categories, and Articles
One of the most important parts of a website is the content. Now that we have a blank site setup, let us get some articles on the site! Articles are sorted in two ways: sections and categories. Sections can contain numerous categories, and categories can contain numerous articles. 1. To add a section to your website, go to http://localhost/joomla15/administrator and log in with the username admin and the password you specified during the installation. 2. To begin managing sections, click on section manager:

3. Click on New on the Joomla! toolbar. 4. Insert a title and description for the section and then press Save on the toolbar. 5. Create as many sections as you need. Use sections to group generally similar items together into groups. For our landscaping site, add a section for Corporate and a section for Products. 6. Click on Content on the menu and select Category Manager when you are done with sections.
7. Follow the same steps to create categories, assigning each to one of the sections created above. Use categories for more specific groupings. For the Products section, create a category for Trees, Bushes, and one for Grasses. Under Corporate, create a President category:
8. Finally, we need to create some articles. Click on Content, then Article Manager, and select New from the toolbar. 9. This is the article screen. There are a lot of different things you can do here:
Add a title for the article, and put it into a section and category. You have the option to publish or un-publish your article, as well as the choice whether to display the article on the front page. The large box is for the article's contents.
You can use the page break button to divide the article into pages. You can use the read more to divide the article into the section to display in a summary view and full view. You can use the image button to insert an image into your article using the simple upload form in combination with Joomla!'s media manager.
10. For the landscaping website, create five different articles in each of our categories. Use the read more button to divide each article into introductory information and then full content. From each category, choose two items to display on the front page using the Front Page toggle switch:
11. When you are done typing each article, click Save to save it and return to the article manager, or Apply to save it and continue editing. If you selected yes for Front Page, then your article will show up on the home page: http://localhost/joomla15/:
Next, the company president as well as the public relations director and product manager are all going to need to be able to edit the website, so we need to create logins for them. 1. First, go to http://localhost/joomla15/administrator and log in with the username admin and the password you specified during the installation. If you are already logged in, go to the Site menu and select Control Panel. 2. Click on User Manager:
3. Click on New from the Joomla! toolbar.
4. Enter details for each user you wish to create. Give both the president and public relations director the group level Administrator so that they can make changes to the site. Give the product manager the Manager group level so that he can add products but not make changes to the website:
5. Press Save when you are done creating each user. 6. Next, we need to set up a way for visitors to the site to contact the president, PR director, and product manager. From the Components menu, select Contacts and then Categories. 7. Create a new category titled Corporate and press Save. 8. Click on the Contacts button and then press New.

9. Create four different contactsone for the president, one for the PR director, one for the product manager, and one for yourself: the web master. Be sure to include their e-mail addresses and positions within the company. Place each user inside of the Corporate category that we created earlier and link each contact to the user that we created earlier:

Web Links

In your briefing from the President, he wanted a section for links to landscaping resources. Let us go ahead and get that set up. 1. First, go to http://localhost/joomla15/administrator and log in with the username admin and the password you specified during the installation. If you are already logged in, you do not need to do this again. 2. From the Components menu, select Web Links and then Categories. 3. Press New and create a category for Landscape Information, then press Save. 4. Click on the Links button. 5. Click New to create a new link. Create links for information about landscaping information. Press Save to save your link. Add a few links to the Landscaping Information category. Web links are things such as:
http://www.joomla.org http://www.google.com http://www.deere.com

News Feeds

The president also requested a section to display news feeds from other landscape sites. 1. First, go to http://localhost/joomla15/administrator and log in with the username admin and the password you specified during the installation. If you are already logged in, you do not need to do this again. 2. From the Components menu, select News Feeds and then Categories. 3. Press New and create a category for Landscaping, then press Save. 4. Click on the Feeds button. 5. Click on New to add a news feed. Search around the Internet to find a few RSS feeds with landscaping information. Then name the feeds and add the URL of the RSS feed in the Link box. Make sure each is in the Landscaping category and choose the number of articles to display from this news feed. Some examples of news feeds may be:
http://www.joomla.org/index.php?option=com_jd-wp&Itemid=105&feed=rss2 http://consumer.einnews.com/rss/news/landscaping
6. Click Save when you are done to save the news feed. Add a few different news feeds to the Landscaping category.
Joomla! 1.5: Quick Start Guide 19
A website will not do you much good unless there is a menu to help users navigate to different pages. Joomla! has a built-in system for managing menus. This system is built around the three types of information in Joomla!components, modules, and plugins. If Components are the main information in Joomla! and are driven by menus. If you look at the front page of your site, you can see only the front page articles. The contact information, web links, news feeds, and articles not published on the front page are not visible. This is because each page displays one component at a time. Let us add the components we have already configured to the site: 1. First, go to http://localhost/joomla15/administrator and log in with the username admin and the password you specified during the installation. If you are already logged in, you do not need to do this again. 2. From the Menus menu, select Main Menu.

Already on the menu is the default Home link, which provides access to articles to which you have enabled the Front Page option. You can click on Home to edit many of its settings including the name of the home page as well as the number of articles that are displayed. 3. Click on Home to configure the home page. 4. In the Parameters - Basic area, there are a number of different options you can configure:
# Leading is the number of article intros to display on the front page with a read more link to see the entire article. These articles will stretch the entire width of the news box. # Intro is the number of article intros to display on the front page with a read more link to see the entire article. These articles will fill only the width of one column, not the entire page. Columns is the number of columns in which articles are display. # Links is the number of articles to display only as links at the bottom of the page.
5. In Parameters Advanced make sure that Show a Feed Link is enabled. This will make the front page accessible by an RSS news feed.
6. In Parameters System, enter a title for the page inside of the Page Title field. This will display in the browser's header as well as in the header for that page in the document. For this website, enter Landscape Smart to replace the Welcome to the Frontpage! text:
7. Click Save to finish setting up the home page. Go to http://localhost/joomla15 to see the results of your changes:

Categories

Next, we need to create four links to the Trees, Bushes, Grasses, and President categories that we created: 1. From the Menus menu, select Main Menu.
2. Click on New, select Articles and then Category Blog Layout.
3. Under Parameters Basic select one of the four categories we created. Name the menu item accordingly. Adjust the settings similarly to the Home item and make sure to include a feed link in Parameters Advanced. Title the page in Parameters System. You also may want to change the Primary Order to Title Alphabetical in Parameters - Advanced:
4. Click Save and check out the site for the results:
5. Repeat these steps for Bushes, Grasses, and President.

Contact

Next up, we need to add a link to the Contact Us page: 1. From the Menus menu, select Main Menu.
2. Select New, then click Contacts followed by Contact Category Layout:
3. Name the page Contact Us and select Corporate for the category. There is no need for a news feed from this page, so disable that option. Under Parameters System, make sure to name the page Contact Us:
Our next component is Web Links: 1. From the Menus menu, select Main Menu.
2. Click on New, select Web Links and then Category List Layout:
3. Name the page Web Links and select Landscape Information for the category. There is no need for a news feed from this page, so disable that option. Under Parameters System, make sure to name the page Web Links:
The next menu item we need to add is News Feeds: 1. From the Menus menu, select Main Menu.
2. Click on New, select News Feeds followed by Category Layout:
3. Name the page Landscaping Feeds and select Landscaping for the category. Under Parameters System, make sure to name the page Landscaping Feeds:

Search

The last menu item we need to create is the Search page: 1. From the Menus menu, select Main Menu.
2. Click on New, select Search and then Search:
3. Name the page Search. Under Parameters System, make sure to name the page Search:

Modules

The next type of content in Joomla! are modules. Modules are sections that lie in predefined boxes along each page around the main content. These boxes may be such things as left, right, or footer. The menu displayed on the front page is one example of a module. For this website, let us add a few helpful modules: 1. First, go to http://localhost/joomla15/administrator and log in with the username admin and the password you specified during the installation. If you are already logged in, you do not need to do this again. 2. From the Extensions menu, select Module Manager.

Syndicate

This is the module manager page. From here, you can manage which modules display on each page. First off, let us add a module to show the RSS feed that we created for the front page: 3. Click on New, then select Syndicate and click Next:
4. Type a name for the syndicate box. Select a position to display your syndicate module in: usually left or right. For this module, the default template has a special syndicate section. These sections are defined in the template, which we will get to next. Under menu assignments, choose Select Menu Item(s) from the List in order to pick the pages on which the syndicate module will be available:
5. Click Save and check out the site for the results:
Great! Now, let us add a login box so that the users we set up earlier can easily access the site. 1. From the Extensions menu, select Module Manager.

2. Click on New, then select Login and click Next:
3. Configure this module with the name Login and choose the left position. This will display the module immediately below the menu. We do want this module to appear on all pages, so there is no need to change these settings:

Newsflash

For another module, let us add a Newsflash module. This module displays a random article from a specific category. For this demonstration, the Newsflash module will display news from the president: 1. From the Extensions menu, select Module Manager.
2. Click on New, then select Newsflash and click Next:
3. Name the module Latest News and choose the Top position in order to display this next to the logo. Choose the President category to display updates from the president in this module. Make the title linkable so that the reader can view the full article after clicking on the title and mark Yes in Article Title to show the title of the article:

Breadcrumbs

Let us add one final module, the Breadcrumbs module. This module helps users navigate the site. 1. From the Extensions menu, select Module Manager. 2. Click on New, then select Breadcrumbs and click Next:
3. Name the module Breadcrumbs but disable the title in the Show Title setting. Leave the rest of the settings the same:
4. Click Save and check out the site for the results. Navigate around to different pages to see how the breadcrumbs change:

Templates

Templates allow you to define the look and feel of your Joomla! website. Joomla! ships with two default templates, but many more can be found at Joomla.org. 1. First, go to http://localhost/joomla15/administrator and log in with the username admin and the password you specified during the installation. If you are already logged in, you do not need to do this again. 2. From the Extensions menu, select Template Manager. The template selected with the star is the current template. To change to a different template, select the template you wish to use and click on Default. For the landscaping website, the rhuk_milkyway template will fit well:
3. Click on rhuk_milkyway in order to edit some of the settings for the template. Because this is a landscaping website, let us change the color scheme to green:
4. Take a look to see how the look and feel of the site has changed:

5. Next, on the edit page, click on Edit HTML in order to adjust the template itself. 6. Remember when we put modules in? Each module was placed into a specific section. These sections are defined in the template. For example, the top position is defined by this code: <jdoc:include type="modules" name="top" />.

Further Resources

With all of this completed, and only a short amount of work with Joomla!, you have a professional looking web page that meets all of the requirements from the company. In no time at all, you will be getting a nice big pay check for doing just a few hours of work on the website! Chances are, you are going to want to go further and do more with Joomla!. Check out some of these resources to help you further your Joomla! experience:
http://forum.joomla.org Sign up for the forums, search, and ask questions, even helping others if you are able! http://help.joomla.org Find more documentation and training information. http://extensions.joomla.org Find lots of very cool extensions to further enhance your Joomla! websites. http://www.joomla.org Find a way to give something back to the community!

Enjoy!

Preface
Thank you for deciding to read this book. I have written this book for you to learn Joomla! 1.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 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, I 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 today morning, you will be able to make any type of Joomla! websites by tomorrow evening. So tell everyone youre busy, order some pizza and drinks, and learn Joomla!

License

This book is licensed under the Creative Commons Attribution 2.5 India License. For more details, go to http://creativecommons.org/licenses/by/2.5/in/
Installing Joomla! Creating your first Joomla! website : Baboons Creating your second Joomla! Site : Engineering College Changing the Template Uploading the website to a web hosts server

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 convert your own computer into a web server, and Install Joomla on it. Hence, Installing Joomla on your computer requires you to do these two things first. I will show you how to do all these three. But If you already have a web server with PHP and MySQL installed on your computer, skip the first step and follow the 2nd and 3rd.
1) Install Web Server with PHP and MySQL
2) Create MySQL Database & Account

3) Install Joomla!

Installing a Web Server using XAMPP
Installing a web server used to be a pain, especially because you had to manually configure it to run PHP. But not any more, thanks to XAMPP a 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! Download a copy of XAMPP from www.apachefriends.org/en/xampp.html. There are different versions available for different operating systems such as Windows XP, Vista, Linux, Mac, Solaris etc. Select the one according to your operating system, and install it. To start XAMPPs Apache server and Mysql, go to Start->All Programs ->Apache Friends -> XAMPP Control Panel and click on the start buttons for Apache and MySQL.

Creating MySQL Database & Account
To create a MySQL database and account for installing Joomla!, you can use a web application called PhpMyAdmin. This comes bundled with XAMPP, so you dont have to get it separately. To use PhpMyAdmin, just start your browser & open http://localhost/phpmyadmin Step 1 : Create a Database Step 2 : Add a MySQL user
Go to PhpMyAdmin and on the front page, you will see a field to create a new database. Enter a name for this database and then click Create. I have named my database database_for_joomla. You can have any name, but you have to remember this name because we will be using it later while installing Joomla!
Go to PhpMyAdmin and on the front page, click on Privileges. Then click on Add a new User, and fill up the form to create a user. Select Host name as localhost Grant all privileges to this user by ticking on the checkboxes or clicking on the Check all button. I have created user named joomla_user with password joomla.

Installing Joomla! 1.5

Now that you have a web server ready with PHP and MySQL along with an account that you just created, lets install the Joomla! CMS. Download the latest version of Joomla! from joomla.org using the download link on the homepage. Save the zip file in root directory of your web server. This should be C:\xampp\htdocs\ since you have installed the web server using XAMPP. Make a folder joomlabeta in this directory and extract the archive in it. Now, you can access this folder from your web browser using the path localhost/joomlabeta.So open your browser, and type this address localhost/joomlabeta in it. You will be shown the
installation screen of Joomla! The first step lets you select the language for installation. Click Next, and you will be shown a screen with all the settings of your web server and whether they are good for Joomla!. Click Next to proceed.
The third step is just a license agreement that you have to agree. Click Next. The fourth step is specifying the database settings, including the database, username, and password. Use the following settings Database Type : mysql Host Name : localhost User Name : joomla_user (if you had used a different name while creating the MySQL user, specify it here) Password : joomla (or the one you had set for that user ) Database Name : database_for_joomla ( or the one you had created if you used a different name ) In this step, you provided the details of MySQL database to Joomla!. Joomla! will use this database to store all the content and other information.
It is recommended that you use this database solely for this installation of Joomla!. You can create more databases for other applications. You will later come to know that it is much easier to transfer your website from your computer to a web host (or a web host to another web host) if you keep a separate database.

The fifth step is for specifying FTP setting to Joomla!. But since we are installing Joomla! on a local computer, say no to FTP and click next. The sixth step is for specifying the Site name and a password for the administrator. So fill the form with a name for the site, your e-mail address, and an administrator password. While in this step, you have to click on the Install Sample Data button so that your website will initially has 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 to finish the installation. Congratulations! You successfully Joomla! 1.5 on your computer. installed
Before you can start using this Joomla! site, you have to delete the directory named installation from Joomla!s folder. Deleting this folder is a security measure, just to make sure that nobody else reinstalls Joomla! using this folder.

Exploring the Front-end

Now that you have successfully installed Joomla!, you can access the website by typing the address localhost/joomlabeta in your web browser. This is the default Joomla! site with the sample content. I 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. Vote in the poll, and see the result. Search for something using the search box. Create PDFs of articles using the small PDF icon on the top right of any article. Note the different ways in which content is accessed and presented. Clicking on Joomla! License link in the left menu will display a page with the Joomla! license. This page is like a static page on a website. Clicking on The News link in the main menu will show introductions of different articles, along with a read more link which shows the full article. This is similar to a blog, because different articles are shown on the same page Clicking on More about Joomla! will show you a list of categories, each having a short description. Selecting a category will show you a list of all the articles in that category. You ca click on these to read the full articles. The poll is shown in a sidebar. When you vote in the poll, the results are shown in the main content area.

Basics of Joomla!

Joomla! is a Content Management System, which means that it is a system for managing different types of content.

Front-end

www.sitename.com
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.

Database

Administration
www.sitename.com/administrator
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 has shown 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.
Your First Joomla! site : Baboons
Now that you have installed Joomla! on your computer, lets 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/joomlabeta and you should be able to access the administrative interface of the website by pointing your browser to localhost/joomlabeta/administrator. Select any topic for making your first website. Im choosing the topic Baboons. If you dont know already, baboons are animals similar to monkeys. So lets quickly create a website about baboons. Wikipedia has lots of more info about baboons: see http://en.wikipedia.org/wiki/Baboons for more information. I have used this info in the pages of this site that we are making. This website will be very simple, and just consist of 4 pages. This is how we will do the website in 4 easy steps:
Set the site name Create Pages Make Menu links to those pages Remove all Unwanted Stuff on the site
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/joomlabeta/administrator/ or sitename/administrator if you have installed Joomla in a different path. Log in with username as admin and the administrator password that you had set while installing this Joomla. You will be shown the cool administrative interface of your Joomla! site. 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 Baboons in my case.

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

Step #2: Create Pages

Our baboons website will have 4 pages about baboons. These are: 1. 2. 3. 4. Home How Baboons Look Social life of Baboons Types of Baboons It is very easy to create such pages. Just go to the administrative interface (sitename/administrator) if you arent 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 New.
Fill in the title for the page, the content in the page select the section and category as Uncategorized, and click on the save button at the top right. After saving the page, you will be taken to Article Manager where you can edit any article, delete any article, or make new articles. Click on the new button on the top right for creating a new page. In this way, make all the four pages.
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. But to insert images, use the Image button at the bottom left of the rich text box. Note that these pages created by you are not visible on the website. I they will be visible only after we create a menu link for them. Now that we have all the 4 pages ready, lets move on to the next step and create menu links for those pages.

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.
For this website, we will use the main menu. In the administrative interface (sitename/administrator), go to Menus->Top Menu using the menu. Here, you will see a list of all links that are already present in the main menu.
Now, click on the new button at the top right to create a new menu link for one of our pages. You will be shown a list of menu item types. 1. Click on articles, because we want this menu link to link to an article. 2. Click on Standard Article Layout when the articles list expands. This means that the full article has to be shown when the link is clicked. Now you will be taken to a screen where you have to specify the name for this link and the article you want it to point to. Our first link is for the Home Page, hence write the title and alias as Home.

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 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 baboon website, just save it in C:\xampp\htdocs\joomlabeta\templates\rhuk_milkyway\images or whatever the root folder of your web server with the name mw_joomla_logo.png hence replacing the current logo.
Here we are, with our custom baboon website with 4 pages which you can edit any time by logging into the administrative back-end and going to article manager.
Hope you enjoyed making it !

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. Uncategorized 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 uncategorized. 2. Categorized Content Categorized content also refers to pages, but these pages belong to a structure, which is made up of sections and categories. A section contains different categories, which in turn contain pages of content which are also called Cars content items. (Section) The adjoining figure shows an example of a site having information about different Hatchbacks Sedans cars. Cars is a section, (Category) (Category) having two categories Hatchbacks and Sedans.These categories have a Maruti Santro City Corolla page for each car in that (Content Item) (Content Item) (Content Item) (Content Item) category.
Making your second Joomla! Website
Lets make a cool college website using the Joomla! that you just installed. Think of an imaginary college. Ill name my imaginary college Bhide College of Engineering ;) Before making any Joomla! website, you need to decide upon the structure of the website. We will have the following structure for our college website. I strongly recommend that you draw this structure on paper by hand, and it will be much easier to make the site. Whenever I make a website or web app, I first draw a structure on a piece of paper. It makes things very easy. So heres the structure:
Bhide College of Engineering

(Uncategorized)

About Us

The Principal

After you clicked the save button, you are taken to the Article Manager, where you can manage all the articles/pages/content. You will see the page that you just created is one of the many articles listed on this page. If you want to edit any page, just click on its
name or select it using the tick box and click the edit button. Use the New button to create the other 2 pages, i.e. the Home and The Principal pages. You can now jump to step#6 and add menu links to these pages, or continue to the next step and make the rest of the content.
Step #3: Create a Section
Creating a section is very easy. You need to go to Section Manager, which you can do by clicking on the Section Manager button on the main page of administrative panel, or by using the menu through Content -> Section Manager. Note that you can return to the main page or the control panel of administrative back-end using the menu through Site -> Control Panel. Once you are in the Section Manager, you will see a list of all the existing sections. Just click on the New button to create a new section. Write the name for the section as Departments, and go down and write a description for this section in the Details rich text field. You can write the description as This section contains all the information about the different departments in our college. Just write any description, and click on Save button. You will see that the section is added in the list. You can edit the description or change the name of the section whenever you want by coming back to the Section manager
I suggest you have a look at the site structure that we have designed, and tick the thinks that we have finished. Now lets go ahead and create the categories.
Step #4: Create the Categories
You can create categories by going to Category Manager either from the control panel (i.e. the main page of administrative back-end) or by using the menu through Content -> Category Manager. Now, we just have to create a category for each department of our college. To do this, click on the New button Write the name of the category (i.e. the name of the department) as the title. And select the section as 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 details box. Then click on the save button. You will be taken back to the category manager. Repeat the process for all the departments.

Step #5: Add pages in each dept.
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 categorized pages the same way you created the uncategorized pages. Only difference is that you have to specify the section and category. Refer the second paragraph of step #2 if you forgot how to add a page/article. This is how I created the The Faculty page of Mechanical Engineering department.
Make sure that you select the proper section and category for the page.
Step #6: Add Links in the Menu
Once you create all the different pages for each department, its time to add links to all the content in the menu.
1: Add Links to the Uncategorized Content
Login into the administrative panel Go to menu ->Main Menu in the menu. Click on the new button on the top-right Click on Article in the Internal Link List The list will expand. Click on Article Layout in the Article sub-list Write the title of the link in the title field. To select the article to link to, click on the select button. A box will appear named Article Selection. Just click on the row that has the name of the article/page you want to link. The Select Article field will now show the name of that article
Now, click on the Save button at the top
right. Repeat the process for other links.
2: Add Links to the Department pages
These links are special. We will create a link in the menu for each department. When someone clicks on this link, he will be shown a list of all the pages of that department, i.e. all the content items belonging to that category which represents the department. So basically we need to make links that list all the articles in a category. Lets make these links. If you havent already, go to menu manager for main menu as you did earlier by logging into the admin and going to menu->main menu Click on the new button Click on Articles in the Internal Links list The list will expand. Click on Category List Layout in the Category sub-list.
In the Menu Item Parameters box at the right, select the proper category.
Below that box, there are 2 more boxes which are currently minimized but can be expanded by clicking on the name. Click on the Save button on the top right. If you visit the site now, you will see the link in the menu, and upon clicking it you will see a list of all the articles/pages belonging o that department.

Step #7: Cleanup

Now disable all the menu items other than the ones needed for this website, just like you did in the first website. First set the home link of this site as the default link. Go to menu -> main menu in the top menu of admin panel, select all the menu items that are not required for this site, and click on the disable button. Note that when we click on the mechanical engineering departments link on the menu, lots of stuff other than the pages in the dept. are shown.
Actually all we need are the page names. So lets remove everything else. Go to menus->main menu->mechanical department. This page has all the facilities to edit the settings for the menu item. Now you just have to change the parameters for this link item. At the right, the Parameters- basic box should be already expanded.
Do the following settings: In parameters basic box o Table Headings : HIDE o Filter : HIDE In parameters advanced box o Display Select : HIDE In parameters component box o Author Name : HIDE o Hits : HIDE These settings will make the page look like this:
There you go, the second website is done.

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. Now that we have a website for our engineering college, you can change the contents of any page easily by going to the article manager. Log into the administrative interface and click on the Article Manager button. Click the page you want to edit from the list that is displayed. And there you go, you are shown all the settings and content of that page whih you can edit and save.
When editing any page/link/section/category, the above 5 buttons should be available in the top right corner. They perform the following functions : Preview : Shows you a preview of how the content that you have written will show in the browser. Save : Save the changes you have made to the page/link/section/category and close this editing screen. Apply : Save the changes you have made to the page/link/section/category and keep this editing screen open. Close : close the editing screen without saving the changes made.

Using a Template

A Joomla! template provides a design for Joomla! to use for displaying the content. If you are a web designer, you can turn your own web designs into joomla! templates. But since this book is for non-technical people, we will discuss only about using freely available templates on the web. 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. Lets try out a template from a company rockettheme. The name of the template we are going to use is Novus. It is available at : http://joomlacode.org/gf/download/frsrelease/6418/20469/rt_novus_j15.tgz A template is an extension of the Joomla! system. To install the template we just downloaded, login into the administrative interface, and got to Extensions->Install/Uninstall In the top menu. 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, lets set this template as the default template. Go to Extensions->Template Manager in the top menu. This template manager lets you select the default template for your site. Select the rt_novus template using the radio button at the left of its name, and then click on the default button at the top right. You will note that the small star icon identifying the default template has moved to the right of rt_novus. Now view your website. It will now look like the screnshot of the template that you had just seen. Now lets do the final step of customizing your site, that is changing the images. Go to C:\xampp\htdocs\joomlabeta\templates\rt_novus_j15\images or whatever directory you have installed your web server. There are 2 files you will need to replace with your own. 1. inset-banner.jpg 2. logo.png Open these files in your favourite image editor, and make whatever changes you want.Save them back with the same names and extensions. Now view your website in your browser and hit refresh. There you go, the website is ready !
You can use this same method to install any joomla! 1.5 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, lets see how to upload it on a web server on the internet.
Uploading the site on a web server
To make your website available on the internet, you need to uplaod it on a web hosts server. To upload and setup your joomla! website on a web hosts server, the web host must offer these 3 services : PHP MySQL 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. I 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. 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.

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 5 steps. Each step is essential. Lets list out the steps first and then Ill show each step in detail. 1. 2. 3. 4. 5. 6. 7. Login into the Cpanel of the server Create a database on the server Export the database from your computer Import the database in the server Change the configuration file of the local website as per your accounts details Login into the server using an FTP software Upload the Joomla! website on the server using FTP
Now, lets 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.
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. I entered database_for_joomla ad the name for the new database. You can enter any name. Your name will be modified my 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 above, 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 installed. 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. 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 servers PHPmyAdmin.
Ok, you are done with the third step.

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 it needs to transfer.

Viewing your website

Finally, you 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 websites URL.

Going ahead.

Now that you know 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!

Final Words

Thank you for reading this book. I hope you liked it.