Chapter 3. First Steps – Getting to Know Joomla!

Congratulations! You have just installed Joomla. This means you can now step into Joomla and start using one of the most exciting and powerful web building tools available today. Before you begin building your own site in the next chapter, let's take some time to get acquainted with the way Joomla works. The system has a clean, user-friendly interface that's easy to learn and fun to work with. You'll be amazed at how fast you can perform content management magic with just a few clicks. This chapter introduces you to Joomla's basic functions.

In this chapter, you will cover the following topics:

• Getting acquainted with the Joomla way of building and maintaining websites

• Exploring the user interface and trying out the main screens and toolbars

• Examining the example Joomla website that you've installed and understanding the main features and special functions that Joomla offers out of the box

• Getting your feet wet and trying out some of the most...

Building websites the Joomla! way

If you're new to Joomla and Content Management Systems (CMS), you'll find creating sites using a CMS takes a bit of getting used to. Even if you have some experience building websites, you'll have to adapt to a different way of working. However, it's certainly worth the effort, and Joomla will make it easy on you—really! Before we explore the example site you installed in the previous chapter, we'll have a brief look at just what's so different about building websites with Joomla.

As you may know, ages ago—at least before 2005, when Joomla came to be—most websites were handcrafted. Creating a website meant creating pages. For every new web page, you had to create a separate HTML document. You would design a basic page layout and reuse that over and over again, adding new pages and adapting the layout to fit the type of content. Whatever tool you used—Adobe (then Macromedia) Dreamweaver, Microsoft FrontPage, or maybe a plain text editor—you would be designing...

Introducing the frontend and backend – the Joomla! interface

Okay, so how do you get to build the website you want using Joomla's set of building blocks? How do you get the main content area to show content the way you want to? How do you work with modules? To answer these questions, we'll first have a look at the Joomla interface, which is the workspace that contains all the tools and controls you'll need for any web building magic.

The following screenshot shows the two faces of the example Joomla site you installed in the previous chapter—the frontend and the backend:

Your workspace – the backend

Joomla is a web application. It's a software tool that's installed on a web server and is accessed through a browser. Creating and managing a site with Joomla is an online activity. Wherever you are, if you have Internet access, you can log in to the Joomla administration interface to manage your site.

This means every Joomla site has a staff entrance that your site visitors will never get to see...

Exploring the frontend – the website as the user sees it

Let's first take a closer look at the elements of the default home page of the example Joomla site. This will give you a good overview of the different modules that Joomla features out of the box.

The home page is shown in the following screenshot:

In the preceding screenshot, you can see what the home page looks like after you've installed Joomla with the Learn Joomla sample data. As you can see, the example is focused on presenting quite a lot of information, and the home page is pulling the reader towards the content through introductory text and different menus. There's one main image—the header image that stays unchanged on all pages.

The preceding screenshot of the home page shows the following elements:

• Search box (1): The search results are shown in the main content area

• Top Menu (2): This is a menu at the top of the page

• Header image (3): This area displays a selected image on one or more pages

• Main body of the home page (4...

Time for action – touring the example site

Let's take a closer look at the demo site and see some real-life examples of page layouts. You'll see how the content in the main body and the modules in the surrounding content area change depending on the menu hyperlink that you select:

1. Enter the URL of your site (for example, http://www.mysite.com) in your web browser. If in Chapter 2, Getting Joomla! Up and Running, you installed Joomla into another folder, the URL will be http://www.mysite.com/otherfoldername. You'll recognize the home page, as displayed in the following screenshot. The main body (outlined in the following screenshot) consists of introductory text for four articles.

   

2. Let's explore how the layout changes on a different page. In the About Joomla! menu, click on Getting Started. You'll notice that the main body displays just one article, which is the most common type of page content. Login Form isn't displayed on this page. Again, the main body is outlined in the following screenshot...

Administering your site in the backend

The backend is the cockpit of your website. It's the administration interface that allows you to manage your site. It's organized neatly, so you should learn to find your way around it pretty fast. We'll have a closer look at the backend interface right now.

Time for action – logging in to the backend

To enable you to get a closer look at the administrative interface of Joomla, let's see how you can access the backend of the site and enter Joomla's Control Panel:

1. In the address bar of the browser, enter the address of your website and add /administrator to it. If your site is http://www.mysite.com, type http://www.mysite.com/administrator in the address bar.

2. You've already had a short look at this page after you installed Joomla in the previous chapter—it is the secret entrance to your site. You'll see a login prompt as shown in the following screenshot:

   

3. Enter your username and the password you entered when installing Joomla (see also Chapter 2, Getting Joomla! Up and Running). Click on the Log in button.

4. After you've successfully entered your credentials, you'll enter the actual administration interface: the backend home page, Control Panel. This interface provides access to all of the functions that you need as a site administrator, such as adding...

Getting your feet wet – start administering your site

We have had a first look at the Control Panel screen layout and the main backend toolbars. You're probably curious to try out how the thing actually works! I'll test your patience just a little more. First, we'll make some more sense of Control Panel and find out what you really need to know to get started on this impressive toolbox. After all, its main menu bar consists of seven menu options with more than 40 submenu items. That's a wealth of CMS power—but it's also quite daunting.

We won't go into all of the menu items and their capabilities here; rather, you'll learn how to use the important menu options as you go along building your site in the next chapters. For now, let's go ahead and see what the primary functions are.

The three types of backend tasks

Roughly, the seven options in the Control Panel menu bar consist of three clusters. Some you'll use on a daily basis, while some you'll only have to deploy every now and then. In the...

Time for action – publishing your first article

To begin with the publishing of an article, let's perform the following steps:

1. Navigate to Content | Article Manager.

2. In the toolbar, click on the New button (the green one with the plus sign).

3. Alternatively, you can use the fly-out menu Content | Article Manager | Add New article. This will take you to the Article Manager: Add New Article screen even faster. Otherwise, you can skip steps 1 and 2 by just clicking on the Add New Article quick icon in Control Panel. You'll notice that in Joomla, there are often several ways available to navigate to the desired option.

4. In the Article Manager: Add New Article screen, fill out the Title field as shown in the following screenshot. Enter a title (for example, My first article) and type some article text in the text editor box. Any text will do; for now, we're just playing around in the example site.

   

5. Leave the Category drop-down box as it is; it's okay to have this article assigned to the Sample Data-Articles...

Time for action – adding a module to the site

You are logged in to the backend of the site and want to add a block with links to the most read articles on the site. Let's add this block (or as Joomla calls it, a module):

1. Navigate to Extensions | Module Manager and click on New. A list of available module types will be displayed, as shown in the following screenshot:

   

2. Click on the name of the module type you want to add, Most Read Content.

3. The Module Manager: Module Most Read Content screen opens. This is where you manage the settings of this module. Change the details as follows:

   • Title: In this field, enter the title that will appear above the list of hyperlinks, for example, Popular.

   • Position: In this option, select the location on the page where the module is displayed. Click on Type or Select a Position to display a drop-down list containing all available positions. Scroll down until you see the positions for Protostar, which is the current site template. Now select Right [position-7], which...

Time for action – setting Joomla! preferences

When browsing the Joomla backend, you may have noticed that after a certain amount of idle time, Joomla will ask you to log in again. By default, Joomla kicks you out when you've been logged in for 15 minutes without any activity. When developing a site, it can be quite annoying to have to log in every time you return to your desk with a fresh cup of coffee. Let's change this with the Session Lifetime setting in the Joomla preferences:

1. From Control Panel, navigate to System | Global Configuration. You can also click on the Global Configuration shortcut in the Configuration menu on the left-hand side of Control Panel. (Remember, you can always jump to Control Panel by clicking on the little Joomla logo in the top left-hand corner of any backend screen.)

2. Global Configuration is divided into Site settings, System settings, Server settings, Permissions, and Text Filters. Click on the System tab to show the appropriate settings panel, as shown in the...

Summary

In this chapter, you learned what's special about building websites with Joomla, what the frontend of your site can look like, and how to use the backend control panel.

You've seen what the differences are between static websites and websites built the Joomla way. A Joomla-powered website is a collection of building blocks that are dynamically constructed from the database.

The frontend of the website—the site as your visitor experiences it—is constructed out of different building blocks. The central part of the page is called the main body; the surrounding blocks are called modules.

Joomla offers a great number of options to present information in the central content area, the main body. Moreover, you can combine the main body with almost any combination and number of modules in the header, in the footer, in the left-hand side column, and the right-hand side column.

Every Joomla site has a backend, Control Panel, to administer your site. When you log into the backend, you can manage...