August 2008
2008-08 Joomla! Community Magazine
Joomla! Community Magazine - Learning
Introductory: Learning Joomla! using Sample Data
All you need for this lesson is available in each Joomla! download
Of all of the resources available to help a new user learn Joomla!, my favorite is the Joomla! Sample website. Why? Because it lets you see how a working site is built. With the sample website, you can see how the site is written in Joomla! and how it looks to the user. You can also make changes to the site and see what the changes do. In this article we will take a tour of the Joomla! sample website and see what it can teach us about Joomla!.
Installing the Sample Website
Before we can work with the sample website, we need to install it. If you have your own PC, the simplest thing is to install it locally, using a local web server such as XAMPP. If you haven't already done this, you can find detailed instructions in the Joomla! Quickstart Guide. Follow the instructions for installing XAMPP and installing Joomla!. Be sure to install Joomla! version 1.5.5 or later.
When you install Joomla!, you will create a directory under the "htdocs" directory that will serve as the home directory for this Joomla! installation (for example, "htdocs/joomla15"). You can have as many different local Joomla! installations as you want. You just re-install Joomla! using a separate directory and a separate database name (entered in Step 4 of Installation) for each Joomla! site you want to create. For example, I have several local Joomla! sites, with names like "joomla155test" and "joomla155sample". I use the same name for the directory and the database.
For our example, use "joomla155sample" for the directory and database names.
In the Quickstart Guide, you are instructed to not install the sample database, but of course we do want to do this. So, when you get to Step 6 in the Joomla! installation press the "Install Sample Data" button shown below:
The system will work for a moment (while the database is loaded with the sample data) and then the button name will change as shown below:
At this point, you can continue with the Joomla! installation process. Press Next and the sample website is ready to go. Remember to delete the installation folder, as instructed by the installation wizard.
Explore the Front End and Back End
Now we're ready to have some fun. In Joomla!, we talk about the "front end" and "back end". The front end is what the user of the website will see when browsing the site. The back end is the set of screens that the administrator (that's you!) will use to build and maintain the site. We installed Joomla! in a directory called "joomla155sample". To navigate to the front end, we just point our browser to the URL "http://localhost/joomla155sample". You should see the screen below:
To navigate to the back end, just add "/administrator" to the end of the front-end URL -- in our example, "http://localhost/joomla155sample/aministrator". You will get a login screen, as shown below:
When you installed Joomla!, a user called "admin" was created for you with the password you entered in during step 6 of the installation wizard. Use that username and password to log in, and you should see the screen shown below:
At this point, take a minute to explore the front end and back end. The front end is a working website with a lot of useful content about Joomla!. In the back end, you see seven menus across the top, each with multiple options underneath. Also in the back end, notice the "Preview" link in the upper right corner. That allows you to open the front end of the site in a separate browser tab or window.
Our First Change
Now, fasten your seat belt. We're going to completely change the look of our site. Go to the back end (the screen shown previously) and select Extensions / Template Manager, as shown below:
This will display the Template Manager screen shown below:
Select the "JA_Purity" template by checking the circle and press the "Default" button in the upper-right toolbar. The star in the "Default" column will move next to the "JA_Purity" template.
If you still have the front end of the site open in your browser, press the "Home" link. If you don't have the front page open, you can press the "Preview" link in the upper right of the back-end screen. In either case, you should see the screen shown below:
If you look carefully, you will see that this site has exactly the same content and menus as the original site. However, it looks completely different! With Joomla!, the content of the site, the structure of the site, and the look of the site are all independent of each other. So you can change one without changing the others. Here we just completely changed the look without affecting anything else in the site. If you like, go back to the Template Manager and try the "beez" template. Again, you will see that the look of the site changes dramatically but the content and structure remain the same. When you're done, change back to the "JA_Purity" template. We'll use that template for the rest of the article.
Bonus: Sample Website Contains Useful Information!
At this point, you might want to explore another bonus of the sample website -- the articles it contains have a lot of great information in them! For example, click the link "Extensions" under the "Key Concepts" menu. This gives you a great overview of some of the important terminology in Joomla!. Take a minute to read this before we continue. Also, in case you were still wondering, select the "Joomla! License" link in the "Main Menu". This explains the licensing and, yes, it really is free!
Some Jargon Explained
One of the challenges when learning something new is to understand the jargon. It might be helpful to think of a website as a magazine. The main content are the articles. In addition, there might advertisements, pictures, page numbers, color coding, and other items that make up the page. In a Joomla! website, the content is usually one or more articles. But it can also include things like web links, contacts, and news feeds. Modules in Joomla! are typically the small things around the articles, like menus, the login form, "Who's Online", and advertisements.
As we saw earlier, in Joomla! the template controls the layout of the page and the colors, fonts, and other graphic elements. Each menu option in Joomla! is called a "menu item". Each menu item takes you to a different page, like a page in a magazine, with different content and possibly different modules. Finally, when you work with Joomla!, you will see a lot of "parameters". These are settings that give you a fine degree of control over different Joomla! elements.
Menus and Menu Items
Almost every Joomla! website has at least one menu to let the user navigate around the site. Menus in Joomla! can be a little confusing at first. Each menu has three parts: (1) the Menu name; (2) one or more Menu Items; and (3) one or more Menu Modules.
To see how this works, let's return to the back end of the sample website and look at the Main Menu. First, we'll navigate to Menus / Menu Manager to see the screen shown below:
This list all of the menus defined in the site. If we click on the Title for "Main Menu", we'll see the Menu - Edit screen shown below:
There isn't much to this screen. We just define the menu and give it a name and a title.
There are two different ways to navigate to the Menu Items: (1) click on the Menu Item(s) icon in the Menu Manager (not the Menu Title!) or select the desired menu from the "Menus" menu -- for example, Menus / Main Menu, as shown below:
For some reason, when I was first learning Joomla!, I had difficulty finding the Menu Item Manager. I would click the Menu Title and go to the Menu Manager instead of the Menu Item Manager. Then I would be confused because it didn't show the menu items. Very annoying!
Note that the "*" next to Main Menu indicates that this is the menu that contains the home page.
Using one of the methods above, navigate to the Menu Item Manager for the Main Menu. The screen should display as shown below:
This one screen is a gold mine of useful information. For Joomla! newcomers, there is probably more here than you can absorb at one time. But you will use the screen a lot when working with Joomla!, so you will get to know it well.
As you would expect, the Menu Item column lists each option in the menu. In this case we have 9 options. The Default column is very important. This shows the page (or menu item) that will be loaded when a user navigates to the site's URL. Every Joomla! site must have one default menu item. Let's try changing the Default to the "Joomla! Overview" item by selecting it's check box and then pressing the "Default" button in the upper right toolbar. Now the Joomla! Overview should have the gold star in its Default column, as shown below:
Now, open a new browser window and navigate to your URL -- in our case "http://localhost/joomla155sample". You should be taken to the Joomla! Overview page instead of the Home page. This points out an important fact that can be confusing: the default menu item can be any menu item you like. The sample site use a "Front Page" layout as the Default menu item, but it is not required. Before going on, go back and change the Default back to the Home page.
The next column indicates whether a menu item is "Published". You can have menu items on a menu but "unpublish" them so they are not visible to users. Why would you do this? Perhaps you are making a change to the site and don't want this menu item to be visible until you have finished. Or perhaps you are removing this option but want to keep it around in case you want to add it back.
The Order column does just what you would expect -- determine the order that the items appear in the menu. You can use the little green arrows to move items up or down. Or you can enter in order numbers in the boxes and then press the disk icon in the column header to change the order based on the new numbers.
Access Level determines who can see the menu items. These are all "Public", so any user can see them. We'll see Access Levels in action later, when we discuss user logins.
Perhaps the most important column is the Type column. Each menu item has a specific type or "layout". This is where you decide what kind of page you want this menu to link to. This is also where having the sample website really helps, because you can see the different layouts in action. The first item, Home, uses a Front Page layout. Open the sample site and look at the home page. Notice that there are five articles in the center portion of the page. The first article spans the entire area and the remaining articles are located in two columns. This type of layout is also referred to as a "blog" layout. In Joomla!, there are three types of blog layouts: Front Page, Section, Category.
Go back to the Menu Item Manager in the back end and look at item #7, "The News". This is a "Category / Blog" layout. In the front end, navigate to "The News" link on the Main Menu. Notice that it is similar to the Front Page -- the first article spans the columns and the remaining articles are in two columns.
This is a great time to introduce parameters into the picture. Remember that we said that parameters are a way to make Joomla! more flexible. Suppose you wanted to change the blog layout? Could you do this? Yes! And very easily. Again, go to the Menu Item Manager in the back end and this time we'll make a change to "The News" page. Click on the Menu Item "The News" and you should see the Menu Item: [Edit] screen shown below:
This screen has a lot of stuff on it and can be a little intimidating, but the great thing is that you can try different things and see how they work. Let's say we want our blog layout to have the first two articles to span both columns, instead of one. Click on the "# Leading" field in the upper right and change the value to "2". Press "Save" in the toolbar.
Now, go back to the front end. You will need to refresh the page to see the change, so navigate back to the Home page and then back to "The News". And now, the first two articles span both columns.
Let's go back to the back end and look at an important feature of Joomla! -- the online help. Again, click on "The News" Menu Item in the Menu Item Manager screen to get back to the Menu Item: [Edit] screen. This time, click on the Help button in the toolbar. The screen below will display:
Every Joomla! screen has a related Help screen. This help screen is one of the largest, since it documents all of the different Menu Item Types (or "layouts") available in Joomla!. You might want to take a few minutes just to look through this. These different layouts are some of the most important tools in your web-building toolbox that Joomla! gives you. Most of these layouts are used in the sample website, so you can see what they look like (in the front end) and how they are defined (in the back end). Which layouts you use in your website of course will depend on what type of site you are building. Is it helpful to be familiar with the different layouts available so you know what you have to work with.
Also, keep in mind that Joomla! is an open system that is designed to be extended. Developers around the world have written hundreds of programs called "Extensions" that add specific functionality to Joomla!. For example, some extensions add even more layout options for you, putting more tools in your toolbox. So, for many Joomla! web designers, the core Joomla! package is a starting point, not an ending point.
Menu Modules
Looking at the Menu Item Manager screen, we can see that we have listed the options for the menu and determined the type of page that will display when that option is selected. But have we defined everything about the menu? For example, what will the menu look like? Where on the page will it be displayed? Will it be shown on all the pages or just selected pages?
These decisions are made when we create the menu module. To me, this was a confusing part of Joomla!, since it might seem to make more sense to define everything about a menu in one place. However, once you get used to it, it makes sense. And it turns out that there are good reasons for having menu modules defined separately from menu items.
In the back end, press the Close button to return to the Menu Item Manager. Then select Extensions / Module Manager to open the Module Manager, shown below:
As mentioned earlier, modules in Joomla! are the small "gadgets" usually around the outside of the main content area of the page. There are 20 different types of modules that come with Joomla!, and, as with layouts, installing an extension often adds one or more additional modules. Menus are one of these types.
Click on the "Main Menu" Module Name to open the Module: [Edit] screen shown below:
And here we can see the answers to our questions about the Main Menu. What will it look like is determined by the "Menu Style", in this case "List". Where it will display on the page is determined by the "Position", in this case "left". And which pages will it show on is determined in the "Menu Assignment", in this case "All" menu items. One other very important thing to note is the "Menu Name". This is how we assign the menu (from the Menu Manager) to the menu module.
Let's look at two other menus. Press "Close" to return to the Module Manager. As you can see, there are a lot of modules defined in the sample website. This is great, because it gives us a lot of examples to learn from. But right now, we just want to see menu modules. Look at the "Type" column on the right side of the screen. This is the Joomla! system name for the module. For menus, it is "mod_mainmenu". Now, look at the "Select Type" drop-down list on the right side above the columns. Select "mod_mainmenu", as shown below:
Notice that now the Module Manager only shows the six menus. This is handy when you're just working with one type of module. You can list all module types just by selecting "Select Type" from the list. You can also filter on other columns: Template, Position, and Published State.
Click on the "Top Menu". Here we can see that this menu is located in the position called "user3". Where is position "user3"? You may remember that earlier, we saw that the Joomla! template determines the layout of the page. So it would make sense that the positions will be different on every template. So how do we know where a position is for a given template? Glad you asked! Joomla! has an easy way to see the template positions for any page. Just add the code "?tp=1" to the end of the URL. So, for example, go back to the front end and enter the URL "http://localhost/joomla155sample?tp=1". You will see the display shown below:
Each rectangle with the red print indicates a template location. Scroll down to the bottom of the page to see more locations. This is a great trick, and works with any Joomla! website. (For fun, try the URL "http://joomla.org/?tp=1".)
Go back to the back-end Module: [Edit] screen and press "Close". Open the "Example Pages" menu, again, by clicking the title). Notice the Menu Assignment area, shown below:
This menu only shows on some menu items (or pages) and not on others. It shows on the Example Pages menu item in the "ExamplePages" menu and on all of the individual menu items under the "ExamplePages" menu. Let's go to the front end to see how this works. Select the Example Pages link from the Home page. Now we see the Example Pages menu. Select any of the Example Pages menu items and the Example Pages menu is still visible. This allows the user to navigate easily within this part of the site, for example, from one example page to another. This type of assignment pattern is very common when you want a menu to show only for a subsection of the site.
Adding an Article
If you have an active, dynamic website, you will be adding new content frequently. Let's see how we might add a new article to the front page of the sample website. Press "Close" on the Module: [Edit] screen to return to the Module Manager. Select Content / Article Manager. The Article Manager screen will display as shown below:
First, notice that this screen is in many ways similar to the other "Manager" screens we have seen. For example, in the upper right is another set of filters that allows you to display only selected articles in the list. We're going to add a new article. To do that, press the "New" button in the toolbar.The Article: [New] screen will display as shown below:
Type in "My New Article" for the title, click "Yes" for "Front Page". In the Section drop-down list box, select "Uncategorized". This will automatically set the Category also to "Uncategorized". We'll talk about sections and categories a little later on. Type in some text for the article, and you're screen should appear as shown below:
Press the "Save" button in the upper right toolbar to return to the Article Manager. Now, go to the front end of the site and navigate to the Home page (which happens to be also a front page layout). Our new article should be the first article on the page, and the other articles will all be moved down one, as shown below:
Also, the article that used to appear last on the page (called "Only one edit window! ...) now appears as a link at the bottom of the page, under "More Articles...". We also get a set of navigation buttons ("Start", "Prev", and so on). These are shown below:
The front page and other blog and list layouts in Joomla! include functionality that makes it easy to put lots of content on pages with easy navigation. Also, as we saw, we can fine tune a lot of the functionality using the built-in parameters. Let's return to the back end and remove our new article. Find the "Front Page" column in the Article Manager for the new "My First Page" article. The green check indicates that this article is published to the Front Page. Click on the check icon and it will change to a red "X". This indicates that the article is not published to the front page.
In the front end, navigate to the Home page again (or refresh your browser) to see the change. The new article disappears and the other articles move up. Scroll to the bottom of the page and notice that the "Next" and other navigation buttons are gone, since they are no longer needed. If you think about it, you can see that Joomla! is doing a lot of cool stuff behind the scenes to make it very easy to manage the front-page articles.
Sections and Categories
Sections and categories can be very confusing to new Joomla! users. The first point to understand is that sections contain categories and categories contain articles. In other words, categories and under sections. The second point to understand is that they are optional. You can build a complete site without using sections or categories. So, why use them? There are two main reasons.
The first reason to use sections and categories is to able to use blog and list layouts. We just saw how the front page is a very handy way of presenting a dynamic group of articles. What if we want to have something like a front page, but limited to articles on one subject? Or what if we want to have more than one such page, like one for articles on dogs, another for cats? Sections and categories allow us to do just that.
To see this, let's go back to the Article Manager in the back end and click on "My First Article" to open it for editing. Recall that earlier we saw that the main menu item called "The News" used a "Category / Blog" layout for the category called "Latest" in the section called "News". Let's assign our new article to this section and category using the drop-down list boxes, as shown below:
Now, press the "Save" button and let's go back to the front end. What do you think should change? Navigate to the "The News" menu item in the main menu and, as you no doubt expected, our new article is the first one on the page. Note that blog layouts default to the newest article first, but the parameters allow you to choose a number of ways to order the articles, including ordering them manually any way you like.
What if you don't intend to use blog or list layouts to show articles on similar subjects? Should you still use sections or categories? If you will have a large number of articles, the answer might still be yes. If you go back to the Article Manager screen in the back end, you can see that there are filters for both Section and Category. Click on the "Select Category" filter and select "Latest" in the drop-down list box, as shown below:
Notice that now you only see the six articles (including our new article) that are assigned to this category. So sections and categories can be handy to help you keep your articles organized. Plus, using them gives you the possibility of using blog or list layouts in the future.
User Registration and Login
With Joomla!, we can add advanced functionality to our site very easily, because the programming is already done for us. A common requirement for many sites is to allow users to register and login to the site. Perhaps there are areas of the site that will be available only to logged in users. Perhaps we want some users to be able to add or edit articles or other content.
The sample website provides a great example of how to add this feature to our website. In the front end, navigate to the home page and notice the login form on the left side, below the menus, as shown below:
This little form has a great deal of functionality built into it. The "Remember Me" box allows a user to be logged in automatically on future visits to the site. The "Forgot your password" and "Forgot your username" links will send a user their username or password via e-mail (not that any of us would forget a password!). The "Create an account" allows a user to self-register, with the ability to validate the account via e-mail. That's a lot of functionality in a little space!
What did the Joomla! web designer have to do to add this functionality to the site? Let's go to the back end and find out. As we discussed earlier, the small items around the content area are normally modules, so let's navigate to Extensions / Module Manager. We'll use the "Select Type" filter to select the "mod_login" type, as shown below:
This will display the Login Form, as shown below:
Click on the "Login Form" module name to open the module for editing. This will display the Module: [Edit] screen, as shown below:
As with the menu module we saw earlier, in this form we tell Joomla! where on the page to show the login module (the "left" position) and on which pages or menu items (only the Home menu item). If you compare this screen with the Module: [Edit] screen we saw earlier, you will see that the left-hand side ("Details" and "Menu Assignment" sections) is the same and that the right-hand side ("Parameters" section) is different. Every module has to be put in a position on the page and assigned to menu items. Beyond that, each module has different parameters that allow you to fine-tune it's behavior. If you like, take a minute to look at the Module Parameters for the "mod_login" module. If you hover the mouse on a field, a pop-up help message displays, as shown below:
Often, this message is enough to tell you what to do. You can also press the Help icon in the toolbar to display a complete help screen in a separate browser window. So, this module is added to the site just by filling out this simple screen. Doing this adds sophisticated user login functionality to the site.
Next, let's go back to the front end and see how this works. Navigate to the home page and login with the username "admin" and your admin password. You are taken back to the home page, but with some differences. First, notice the new icon next to each article, as shown below:
The edit icon to the left of the title allows you to edit the article from the front end. Let's look at it. Click on the edit icon and the screen below shows:
This opens the article for editing. This is a very important feature of Joomla! and CMS software in general. Authorized users can add and change the content of the website just by navigating to the site and logging in, and without having to access the back end.
The other change to the page is a new User Menu, as shown below:
This menu gives you some important options. Navigate to the "Your Details" page. Here you can change information about your account, such you name, e-mail, and password. Notice also that you can select a back-end and front-end language. Joomla! comes in many different languages, and different users can even use different languages.
Next, navigate to the "Submit an Article" link. Here an authorized user can add an article to the website. The "Submit a Web Link" allows an authorized user to add a web link to the site.
Now let's look at how this is accomplished in the back end. We already saw that the login was added using the "mod_login" module. What about the User Menu? In the back end, navigate to Menus / User Menu to display the screen below:
Notice that the Access Level for the menu items is either "Registered" or "Special". This is why you cannot see this menu unless you are logged in to the site. In this case, only users who are registered on the site can use the "Your Details" or "Logout" menu items. "Special" is a higher access that in this case allows users to navigate to the "Submit and Article" and "Submit a Web Link" pages. This security is built into Joomla!. All we have to do to use it is pick an Access Level for each menu item. There are many other places in Joomla! where you can set access levels, for example to restrict access to articles or links.
In the "Type" column, notice that a special layout is being used for each of these menu items. Again, Joomla! comes with built-in layouts to support each of these tasks, and the sample website shows us how to use them.
More Cool Modules
Before we finish, let's take a look at some more cool functionality that comes built into Joomla!. In the back end, navigate to the Module Manager by selecting Extensions / Module Manager. Let's look at all of the modules that are used in the sample website. Set the four filters as shown below:
This will display the list of 19 modules, as shown below:
The sample website is a gold mine of examples for how to use modules. In addition to the menus and login modules we have already seen, we have examples of 10 different modules: banners, footer, polls, who's online, random image, syndication, news flash, latest news, most read (popular), and search. With a little detective work, you can see how each module displays and what it does.
You can also use the online help to learn more about all of the available modules. From the Module Manager screen, press the "New" icon in the toolbar to show the screen below:
This is a list of all 20 of the available module types in Joomla!. Press the Help key to display the Help file as shown below:
(Note that there are also modules for the Administrator (back end) area of Joomla!. Normally it is not necessary to change the Joomla! back end, so we won't worry about those.)
Press the "Site Module" link to display the Help screen for the Site modules, shown below:
Here you can see example screenshots and read detailed documentation for all 20 module types.
A Great Learning Resource
In this article, we've explored the front end and back end of the Joomla! sample website. We've used it to learn about menus, layouts, articles, modules, and more. The great thing is that we can see what the site does on the front end and see the inner workings on the back end. The website provides examples of many of the Joomla! features that we will need to use to build our own websites. Once we understand the workings of the sample website, we are well on our way to a good understanding of Joomla!.
