Your First Steps in Joomla

  • Bintu Harwani

Abstract

 Chapter 2 looked in detail at the installation of the XAMPP framework and the Joomla package. While installing Joomla, you were prompted to specify the name of the Joomla web site you wanted to create (in this case, harwanibm.net). As a result, Joomla created a full-fledged web site that already contained menus, links, search boxes, articles, polls, news feeds, and so on; and all these features were functional. This automatically generated content can be updated, deleted, and added to at any time.

Keywords

Control Panel Category Manager Menu Item Main Menu Access Level 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.

 Chapter 2 looked in detail at the installation of the XAMPP framework and the Joomla package. While installing Joomla, you were prompted to specify the name of the Joomla web site you wanted to create (in this case, harwanibm.net). As a result, Joomla created a full-fledged web site that already contained menus, links, search boxes, articles, polls, news feeds, and so on; and all these features were functional. This automatically generated content can be updated, deleted, and added to at any time.

This chapter will cover the following:
  • A brief introduction to the Administrator interface

  • The home page: what it is and why it is important

  • The impact of templates on a Joomla web site

Note

As mentioned in  Chapter 2, the entire content of the web site so far is stored in the MySQL database named joomladb (although you could have called it anything), which you created when you installed Joomla. This is what is meant by a CMS: the whole web site is managed in one place, and what is a better place than a database?

Key Terms

Before you get started, there are two important terms that will crop up repeatedly throughout this book, so it will be useful to define them now: front end and back end (see Figure 3-1).
Figure 3-1.

Block diagram demonstrating the relation between front and back end

Front end refers to the web site; the part that’s accessed by users or visitors and that displays the content of the web site. The front end is called up by opening a browser window and pointing at the address. In this case, the address is http://localhost/joomlasite (remember that joomlasite was the folder in which you unpackaged Joomla, and at this stage you are dealing with the local server). The Business layer includes the business rules on the basis of which database is updated using the Data Access layer via executing SQL statements. The Back End represents the interface through which the Business and Data Access layers are managed, and hence the database. The front end of your Joomla web site will appear as shown in Figure 3-2.
Figure 3-2.

Default Joomla web site

The back end is the Administrator interface, which you use to manipulate the contents of your web site. It provides a Control Panel and other tools essential for maintaining the web site. To reach the Administrator interface, open a browser window and point it at the address http://localhost/joomlasite/administrator.

Elements of the Administrator Interface

As discussed in  Chapter 1, a CMS is a computer software system for organizing and managing documents, including web content. Because Joomla is a CMS, it provides a Control Panel and tools for you to manage your web site and its contents, and this Control Panel can be accessed by using the Joomla Administrator interface. To manage web site content, open your browser and point it at http://localhost/joomlasite/administrator to open the Joomla Administrator interface.

From now on, you will have two windows open on your computer system: one with the browser pointing at http://localhost/joomlasite (showing your Joomla web site), and the other pointing at http://localhost/joomlsite/administrator (displaying the administrator tools and managers). You will manage the web contents through the Administrator interface and then switch to the Joomla web site browser window and refresh it to see the effect of the changes made to the Joomla web site. You can also view your updated Joomla web site directly from the Administrator interface. The Preview link at the top right quickly opens up the home page of the Joomla web site in a new window (in Internet Explorer) or a new tab (in Firefox).

Before the Administrator interface opens, you will be prompted to log in, as shown in Figure 3-3. Enter the administrator name and password that you specified while installing Joomla.
Figure 3-3.

Login screen of the Administrator interface

The first screen contains a set of buttons for the various Joomla managers, which are collectively called the Control Panel, and menus to manage your web site contents (see Figure 3-4).
Figure 3-4.

Administrator screen displaying the Control Panel (managers) and menus

Some of the most important features of Joomla can be found in this panel, and you’ll spend a lot of time here. It is a sort of control tower for your web site, in which you can maintain its content and appearance. Each of the managers in the interface has a specific function, so let’s take a look at them and see what they can do.

Control Panel

In the Control Panel, you’ll find a menu bar that contains drop-down menu items allowing access to all the main Joomla functions. It also has a set of buttons that represent the most common actions, providing shortcuts to some of the menu items. Finally, it provides a utility toolbar at the top right that, among other things, allows you to view of the front end of your Joomla web site (the way it will appear to the user).

The Control Panel contains the following managers:
  • Add New Article

  • Article Manager

  • Category Manager

  • Media Manager

  • Menu Manager

  • Module Manager

  • User Manager

  • Global Configuration

  • Template Manager

  • Language Manager

Instead of running through all these managers sequentially, you’ll focus on those managers that will enable you to quickly get up and running and develop some content for your Joomla web site. Before creating the content, let’s take a look at the relationship between four key parts of Joomla that you’ll need to understand to get the most out of the Administrator interface: menu items, menus, categories, and articles.

A menu item appears as a link on a web site that, when selected, displays some kind of information. Several menu items are collectively placed under one menu heading. In other words, a menu is a collection of several menu items.

Information in a web site can be divided among categories and any level of subcategories. Suppose that you want to display information about electronic and clothing products on your web site, where electronic products consist of subcategories such as Camera and Cell Phone; and clothing products consist of subcategories such as Men and Women. In that case, you need to create two categories for your web site: Electronics and Clothing. The Electronics category will have two subcategories to start with (Camera and Cell Phone), and the Clothing category will have two subcategories (Men and Women), as shown in Figure 3-5.
Figure 3-5.

Electronics and Clothingcategorieswith two subcategories each

To display information for different types of clothing (for the Men category), you can create one or more articles and link them with the Men category of the Clothing category. An article is a web page that can contain text, images, and animations to provide information about a product or service. You can create several articles for a category. A category can have any number or level of subcategories (also known as child categories), and each category and subcategory can store one or more articles.

Using the Category, Article, and Menu Managers

Before you begin creating a web site, here is a quick introduction to the Article, Category, and Menu Item Managers:
  • Article Manager: Articles contain the actual information or content that you want your web site visitors to see. An article comprises text and may also include images and other multimedia content.

  • Category Manager: To manage articles and to handle them with ease, they are categorized into categories. A category is a title that groups related articles. By accessing a category, you access all the articles within it.

  • Menu Manager: This manager enables you to create and manage menus and menu items. By selecting the respective menu item, the web site visitor can access the desired content in your site.

Let’s make a web site that looks something like the one shown in Figure 3-6. As shown in the figure, you’ll add a new menu item, New Electronics Products arrival. When selected, this menu item will display the Camera subcategory of the Electronics category.
Figure 3-6.

Menu item displaying the Camera subcategory of the Electronics category

Note

Joomla provides several default categories and articles in your web site to give you an idea of how they are related. You can unpublish any of them to remove them from the web site and create your own contents instead.

Let’s Make This

Before you get started, here is a brief overview of what your example web site will look like and how it will function. Though you can create several categories in your web site, for this exercise you’ll keep it simple and just create one of each: a Camera subcategory inside an Electronics category. When your visitors select the Camera category, they will see the list of articles in that category, as shown in Figure 3-7.
Figure 3-7.

List of articles in the Camera category

Again, to keep the example simple, you’ll also just display a single article when the Camera category is selected: “Latest Cameras.” When the article title is selected, it will display the content of that article, as shown in Figure 3-8.
Figure 3-8.

Content of the “Latest Cameras” article

To create some simple content for your example web site, you can use two managers found in the Control Panel: the Category Manager and the Article Manager. To create this simple content, follow these steps:
  1. 1.

    Create the Electronics category using the Category Manager.

     
  2. 2.

    Create the Camera subcategory in the Electronics category using the Category Manager. The Electronics category will be the parent category of the Camera category.

     
  3. 3.

    Create an article (“Latest Cameras”) in the Camera category using the Article Manager.

     
  4. 4.

    Create a menu item (New Electronics Products arrival) using the Menu Manager and linking it to the Electronics category.

     

Creating a Category with the Category Manager

To build the Electronics category for your web site using the Category Manager, click the Category Manager button in the Control Panel. The Category Manager will open, as shown in Figure 3-9. Notice that each manager window has a title in a consistent location to help you locate your position in the Joomla environment. Most managers also have a similar toolbar button layout and behavior. The Category Manager, as the name suggests, is used to manage categories, which entails the following:
  • Creating new categories.

  • Editing or deleting existing categories. A category cannot be deleted unless it is empty (i.e., before deleting any category, you have to first erase all its categories along with their contents so that you don’t delete a category by mistake).

  • Copying a category, along with its articles from one category to another. When copying a category, you’ll be prompted to specify the category to which the selected category’s contents are to be copied.

  • Publishing or unpublishing a selected category. If you unpublish a category, its articles will no longer be visible on your web site.

  • Setting the order (sequence) that the category will be displayed on the home page.

  • Setting the Access level of the category (i.e., deciding whether the articles of the category can be viewed publicly or are meant to be viewed by only a specific group of users).

  • Displaying the number of subcategories in each category.

Figure 3-9.

Category Manager

The Category Manager toolbar contains several buttons that provide quick access to several functions. Table 3-1 gives a brief description of Category Manager toolbox tools.
Table 3-1.

Brief Explanation of the Category Manager Toolbar

Tool

Description

New

Used to add a new category.

Edit

Edits the selected category. Used to modify the category’s information.

Published

Shows whether the category is currently in the published or unpublished state. A check mark indicates that the category is published (i.e., its subcategories and their corresponding articles will be visible on the web site), and a red X indicates that the category is unpublished. To publish any category(ies), select from the list and click this button.

Unpublish

Select the required number of categories from the list and click this button to unpublish them.

Archive

Select the required number of categories from the list and click this button to move them to the archive.

Check In

Select the required number of categories from the list and click this button to close them and mark them as Check In. No editing can be performed on the opened category. In an opened state, a category is blocked from use by other administrators. To make it editable, a category needs to be closed and marked as Check In.

Trash

Moves the selected category(ies) to the trash.

Batch

Used to apply batch processing on a set of selected categories. To copy or move certain selected categories or to apply actions such as assigning tags, setting the language, setting the Access level, and so on for a set of categories, select them from the list and click the Batch button. A pop-up dialog box will open, as shown in Figure 3-10. The action selected from the combo box(es) will be applied on the selected categories as a batch.
Figure 3-10.

Dialog box for performing batch processes on the selected categories

Rebuild

Rebuilds the category table. Usually used when several operations are performed on categories and you want to see the outcome of those operations in the category list.

Help

Clicking this button will open the new browser window and navigate to the online help files related to the active topic.

Options

Opens the Article Manager Options screen. Select the Categories tab in that screen to display options (see Figure 3-11) that can be used to configure Category Manager.
Figure 3-11.

Configuring Categories globally

 

You can use the parameters to do the following:

•Change the layout of the site

•Show or hide the category title, description, and image

•Determine the number of subcategory levels to be displayed

•Show or hide empty categories

•Show or hide the subcategories’ text and description

•Determine the count of the articles in a category

•Show or hide category tags

Below the toolbar, the Category Manager shows a Search box that can be used for searching categories. You can type a word or phrase into the Search box and then click the magnifying glass icon to display the list of categories that match the entered phrase. To clear the screen and display the full list of categories, click the Clear button. The Search tools button applies more filters (see Figure 3-12) to display the desired categories precisely. The filters are as follows:
  • Select Max Levels: Determines the number of levels of categories to display.

  • Select Status: Displays the categories that match the selected status —whether they are published, unpublished, archived, or trashed. It is also very useful for searching inactive categories.

  • Select Access: Displays the categories that match the selected Access level. The Access level can be Guest, Public, Super Users, Registered, or Special. The Access level represents a group that is authorized to view and access the given category (you will learn about Access levels later in this chapter).

  • Select Language: Displays the categories that match the language chosen from this combo box.

  • Select Tag: Displays the categories that match the selected tag. Tags are the keywords that define and distinguish the categories from the rest.
    Figure 3-12.

    Category Manager showing combo boxes for advanced search

The Sort Table By button helps to display the categories sorted in ascending or descending order of the selected column of the category. For example, if you select the Title ascending option from the combo box, the categories will be sorted in the ascending order of the titles. Also, you can sort any column by clicking the column header. The last combo box determines the number of categories to display in the table. The default value displayed in the combo box is 20 and has values in multiples of 5. You can use it to display 5, 10, or 15 categories in the table. You can alter the default value of the categories to be displayed by changing the List Length parameter in the Global Configuration Manager.

Note

To reset any of the preceding filters, change the combo box back to its default setting.

The main content area of the screen displays a table that shows all the categories in a Joomla site. The usage of each column is the following:
  • Vertical double arrows: Shows the order in which the category items are displayed on the page of the web site and enables you to change their order. You can click the arrows to change the sort order. You can also click and hold the three squares (to the left of the checkbox column) and drag the category to change its order location in the Category Manager.

  • Check boxes: Click a check box to select a category. Check boxes are used to apply batch action on several categories collectively. Simply click the check boxes of the desired categories and select the required tool from the toolbar.

  • Status: A green check mark indicates that a category is published. Click this check box to toggle the state of the category between published and unpublished.

  • Title: Displays the full name of the category. Click the category title to open it in edit mode.

  • Access: Displays the Access level set for the category (i.e., which level of users can access the category). The Access levels are as follows:
    • Guest: Content with this Access level is for users who are not logged in.

    • Public: Content with this Access level can be seen by all people, whether logged in or not. This is the default Access level for all Menu Items, Articles, Categories and Modules.

    • Registered: Content with this Access level can be seen by only those users who are logged in.

    • Special: Content with this Access level can be seen only by users with author status or higher (you will learn more about Access levels later).

    • Super User: Content with this Access level is meant only for super users, who are the only users who can access or edit the content.

  • Language: Displays the languages in which the category is available.

  • ID: Displays the system–generated ID number of the category as defined in the database.

To create a new category, click the New button in the toolbar at the top left of the Category Manager to create a new category. A screen displays, in which you specify information for the new category, as shown in Figure 3-13. On this screen, you can specify a variety of information for the category, including the Title, Access level, Image, and Description.
Figure 3-13.

Page for creating a new category

Note

Categories are generally used to categorize articles into groups so that you can easily search and manage desired articles.

For the Title, enter the name for your new category: Electronics. Alias is a sort of secondary name for the category that is used internally by Joomla. You can leave it blank here (and anywhere else); Joomla will fill it in automatically, or you can give it your own meaningful name. If you specify it, it must be lowercase, and it cannot contain any spaces (hyphens are the only allowed symbol and should be substituted for spaces). The alias is used in search engine–friendly (SEF) URLs (which help search engines display your web site content and also help you control the text that you want to appear in the URL). For this exercise, enter Electronics for the alias.

In the Description text box, you can enter a few lines to describe the category. You can also insert an image into the description using the Image button at the bottom. Click the Image button, and you’ll be presented with the images available in the Media Manager. Joomla provides some images by default, but you can also upload your own images into the Media Manager.

Note

The Media Manager is used to maintain web site images. All the images are stored and maintained in joomla_root/images (extensions, plug-ins, and templates keep their images in their own image directories). The Images directory already contains some default subdirectories containing images. Using the Media Manager, you can upload images from other directories into the joomla_root/images folder and you can also delete any undesired images.

It is very easy to upload new images into the Media Manager. Just click the Browse button in the Upload area, as shown in Figure 3-14, to locate the folder that contains the image file to upload (preferably in PNG or JPG format). Assuming that you have an electronics.jpg file on your local drive, select the image file.
Figure 3-14.

Uploading new images in Media Manager

Note

Images can be uploaded and added to the site through FTP. But in case you don’t have FTP access to the web server, Media Manager is preferred. It is usually best to upload all the images, videos, documents, and other files that you will use on your web site to the Media Manager before creating the web site contents because all the content can be accessed from the Media Manager while developing the site.

When you select an image thumbnail, the URL of the image will be displayed in the Image URL field. In the Image Description field, you can enter a short description of the image. In the Image Title field, enter the title of the image, which will be displayed when a visitor hovers the mouse over the image. After entering information for the image, when you click the Start Upload button, the image will be uploaded to the Joomla images/stories folder, and a Completed message will appear to show that the uploading is done. You want the Electronics category to be represented by an image, so (assuming that you have an image called electronics1.jpg in your local drive), upload it into the Media Manager. Also, enter the information of the Electronics category, as shown in Figure 3-15.
Figure 3-15.

Creating a new category called Electronics

From the Parent drop-down list, select the category to which you want the current category (Electronics) to belong. Select the No Parent option because you want the Electronics category to be at the top of the hierarchy. In the Tags box, type in the unique tags to represent the electronics category. Let’s assign the tags electronics, camera, and cell phone.

Set the Status to Published to make the category visible on the web site (unpublished categories don’t appear), and set the Access level to Public to make the category accessible to anyone. Set Access level to Public to make the category visible to all users of the web site.

In the Language combo box, select the language to be assigned to this category: leave it at the default language (All/English (UK)). In the Note box, you can assign a small text note related to the new category. In the Version Note box, enter an optional note for this version of the category. For example, you can assign the 1.0 version to this category. When modified, assign version 1.1 to this category to show that it is the enhanced version of 1.0.

Below the Title box is the Publishing link. When clicked, it will display the information related to creating and modifying the category. The page (see Figure 3-16) will also prompt for other information as listed here:
  • Created Date: Displays the date and time the category was first created. The date and time are generated and entered by the system automatically.

  • Created by: Displays the user who created this category.

  • Modified Date: Displays the date and time when this category was last modified. Again, they are generated and entered by the system automatically.

  • Modified by: Displays the user who made the last modification.

  • Hits: Displays the number of hits for this category.

  • ID: Displays the unique ID of the category.

  • Meta Description (Optional): Enter a small description of the category that usually appears in the results of search engines.

  • Meta Keywords (Optional): Enter a comma-separated list of keywords to describe the category. Previously, search engines used meta keywords while searching content on the web, but now search engines have become more intelligent, so meta keywords are not useful.

  • Author: Enter the author of this category.

  • Robots: Choose the option that helps make your site visible to search engines. The available options are Use Global/Index, Follow/No index, Follow/Index, and No follow/No index, No follow. Here are the meanings of Index and Follow:
    • Index: Determines whether you want a search engine to index the contents of this page.

    • Follow: Determines whether you want a search engine to follow and crawl the links on this page.

Figure 3-16.

Page displaying Publishing information of the category

To modify permissions related to the current Electronics category, click the Permissions link. Permissions are usually inherited from the Global Configuration settings, but you can override them through the Permissions link. Short descriptions of the combo boxes shown on the page (see Figure 3-17) follow:
  • Create (Inherited/Allowed/Denied): Determines whether to allow or deny Create permission for users in the Public group

  • Delete (Inherited/Allowed/Denied): Determines whether to allow or deny Delete permission for users in the Public group

  • Edit (Inherited/Allowed/Denied): Determines whether to allow or deny Edit permission for users in the Public group

  • Edit State (Inherited/Allowed/Denied): Determines whether to allow or deny Edit State permission for users in the Public group

  • Edit Own (Inherited/Allowed/Denied): Determines whether to allow or deny Edit Own permission for users in the Public group

Figure 3-17.

Page for setting permissions related to the current category

To represent the Electronics category with an image, select the Options link in the Category Manager. A dialog box to select the image displays (see Figure 3-18).
Figure 3-18.

Options tab

When the Select button of the Image field is selected, Media Manager will open, and you can find the electronics1.jpg image that you just uploaded in it. Select the electronics1.jpg image and click the Insert button to assign the image to the Electronics category (see Figure 3-19).
Figure 3-19.

Selecting the electronics1.jpg image file for the Electronics category

In the Category Manager, the toolbar at the top shows the tool buttons as listed here:
  • Save: Saves the category without exiting from the workspace. Usually used to save the work.

  • Save & Close: Saves the new category and exits the workspace.

  • Save & New: Saves the new category, closes the current workspace, and opens another New Category workspace to add another category.

  • Cancel: Cancels the current task and exits the workspace.

  • Help: Opens the browser and displays online help files related to the active screen.

After inserting the necessary information for the new category, click the Save & Close button in the toolbar to save it. The newly created Electronics category will be displayed in the Category Manager, as shown in Figure 3-20.
Figure 3-20.

A new Electronics category isadded tothe Category Manager

Creating a Camera Subcategory

Now that you’ve created a category, repeat the procedure to create a subcategory called Camera for the Electronics category. While creating a subcategory of any category, just mention the category name in the Parent combo box. To declare the Camera category as a subcategory of the Electronics category, its Parent combo box should be set to point at the Electronics category, as shown in Figure 3-21.
Figure 3-21.

Creating a Camera subcategory for the Electronics category

Enter the details of the Camera subcategory (refer to Figure 3-18). Assuming that you have the camera1.jpg file in your local drive and you have uploaded it into the Media Manager, assign that image (camera1.jpg) to the Camera subcategory by clicking the Options link, as you did for the Electronics category. Click the Save & Close button to save the Camera subcategory. The Category Manager will display the newly created Camera subcategory (see Figure 3-22).
Figure 3-22.

Category Manager showing the Electronics and Camera categories

Now that you have created a category and a subcategory, it is time to create an article.

Creating an Article with Article Manager and Publishing It in a Category

Articles contain the actual information or content that you want your web site visitors to see. Besides text, articles can contain images and other multimedia content. The information in your articles may appear on the home page of the web site so that visitors can view the article directly on opening the web site or it may appear when a visitor selects a particular menu item or link on the web site.

Note

Joomla extensions extend the functionality of Joomla web sites. There are five types of extensions: Components, Modules, Plugins, Templates, and Languages. Each of these extensions handles a specific function. A plug-in is used to add small functions to an existing component or module. For example, a search plug-in can be used to search a desired product from a shopping cart component, and a bookmark plug-in can be used to place bookmarks on the desired content. A component is an independent application (having its own functionality, database, and presentation). Adding a component to your web site is like adding an application. Examples of components are shopping carts and guest books. Modules are meant for adding new features to an existing component (application) of your web site (e.g., you might add a login module or a digital counter module to your shopping cart component).

Because you’ll be displaying some content that provides information about new cameras, you’ll write an article and attach it to the Camera category. To do so, you need to open the Article Manager, so either select the Content ➤ Article Manager menu option or click the Article Manager button in the Control Panel. The Article Manager will open and display a list of articles under different categories (provided by Joomla in the default web site), as shown in Figure 3-23.
Figure 3-23.

Article Manager

As its name suggests, the Article Manager is used to manage articles. It contains tools with which users of certain groups (e.g., administrators) can add new articles, edit existing articles, unpublish the article(s) (making them disappear from the web site), move or copy the articles from one category to another, and so on.

The Article Manager table contains some important information about each article, such as the author of the article, the Access level (which sets whether the article is for public view or only for users belonging to certain groups), whether the article should be displayed on the home page (the first page of the web site), the date the article was created, and the number of times it has been accessed by visitors.

To add a new article, you can either click the New button from the toolbar or click the Add New Article button in the Control Panel. An editor box will appear, which allows you to type the content for the article, as shown in Figure 3-24. In the Title box, specify Latest Cameras as the name of the article. For the Alias, specify latest-cameras. Set the Published option to Yes to make the article visible on the web site. Set the Home page option to No because you don’t want the article to appear directly on the opening screen of your web site, but only when a menu item is selected on the web site. From the category drop-down list, choose Camera.
Figure 3-24.

Creating a new article

Note

While adding an article, you must specify a category in which the article will be displayed.

The editor provides formatting tools for formatting your text and a variety of buttons that allow you to perform various tasks. If you’re used to using a word processing application, you’ll find the buttons here fairly straightforward. However, I’ll quickly run through a few of the ones that may be unfamiliar to you: the buttons for inserting images, page breaks, and read-more links.

There are two buttons for inserting images into articles: the Image button in the TinyMCE editor toolbar (see Figure 3-25) and the Image button at the bottom left of the editor (refer to Figure 3-24).
Figure 3-25.

Image button in the TinyMCE editor

The button in the editor toolbar is bit difficult to use because it requires the URL of the image to insert and it doesn’t allow you to add new images in the Media Manager. When you click the Image button in the toolbar, the Insert/Edit Image dialog box displays, as shown in Figure 3-26.
Figure 3-26.

Insert/edit image dialog box

In the Source field, you can specify the URL of an image available on the Internet, and you can also specify the URL of an image already uploaded to the Media Manager. Assuming that an image called cam1.jpg already exists in the Media Manager, you can insert it by specifying its URL here as c:\xampp\htdocs\joomlasite\images/stories/cam1.jpg and then clicking OK.

On the other hand, if you select the Image button at the bottom of the editor, you’ll see a screen like the one shown in Figure 3-14. This dialog box allows you to upload new images to the Media Manager and insert selected images into the article.

This dialog box provides a list of predefined images (the images that are provided by Joomla as well as those that you have uploaded). It also provides an Upload interface to upload the images from other directories into the Media Manager’s Images directory (the directory in which all the images for the web site are kept, except for templates and third-party modules, which will be discussed later). The uploaded images can be inserted into the article.

The Page break button at the bottom left of the editor (refer to Figure 3-24) places a dotted line in the article as you are editing it. When viewing your web site, the visitor is shown only the part of the article up to the page break line, and a Next Page link is shown at the end of the page. The portion of the article after the page break is displayed when the Next Page link is clicked, and it runs until the next page break or the end of the article.

The Read More button is used when you have a large article and you want to display a brief summary or introduction of the article first and then include a link for the reader to read more. If interested, the reader can click the Read More link to see the whole article.

After entering the information for your article, click Save & Close to save it. The message Successfully Saved Article will appear, and the article name will be listed in the Article Manager, as shown in Figure 3-27.
Figure 3-27.

The “Latest Cameras” article addedtothe Article Manager

Creating a Menu Item to Access the Category

A menu item is a link that appears on the web site that users can select to see the desired information. There are two steps to create a menu:
  1. 1.

    Create the menu.

     
  2. 2.

    Create a module for the menu.

     
To create a menu, open the Menu Manager by clicking its button in the Control Panel. A range of menus is provided by Joomla by default (see Figure 3-28), and each menu is a collection of certain menu items. Every menu item is defined as a specific menu item type, and it is the menu item type that decides what kind of information the menu item is supposed to display (explained in detail in  Chapter 7).
Figure 3-28.

Menu Manager

You can create a menu item in any of the menus in the Menu Manager. Let’s create a menu item in the Main Menu. Just click the Main Menu title and you’ll see all the menu items under the Main Menu that are provided by Joomla (see Figure 3-29).
Figure 3-29.

Menu items under the Main Menu

To add a new menu item, click the New button. You’ll see a screen for specifying the menu type, as shown in Figure 3-30. The menu type plays a major role in deciding how to display the information (i.e., when the menu item is selected, whether to display the article directly, to display all the article titles of a particular category, or to display all the categories of the site or subcategories of a particular category).
Figure 3-30.

Page for creating a new menu item in the Main Menu

If the user selects the menu type that displays all the article titles of a particular category, the article contents will be displayed when the user selects the article title. If the user selects the menu type that displays all the subcategories of a particular category, the user must select the category title to see the list of articles under any category.

The list in Figure 3-31 shows that menu items can point to a variety of contents, including articles, contacts, news feeds, and so on.
Figure 3-31.

List of menu types

Let’s see the available options in the Article node. Select the Articles node, and you’ll be presented with the options shown in Figure 3-32.
Figure 3-32.

Expanding the Articles node

Select the Category Blog menu type, which will display all the subcategories of the selected category. When a subcategory is selected, it will display the list of articles in that subcategory; when the title of an article is selected, it will display the information stored in that article. After selecting Category Blog, you’ll be presented with a screen for specifying the rest of information of the menu item (see Figure 3-33).
Figure 3-33.

Specifying the menu item information

In the Title field, enter the menu item that you want to appear in the Main Menu: in this case, New Electronics Products arrival. The alias is optional. The text in the Link field appears automatically and is dependent on the menu type selected. This text lets the menu item know which object it is linked to; it cannot be edited. From the Display In drop-down list, select the menu in which this menu item is supposed to appear. In this case, select Main Menu.

In the Parent Item list box, select the menu item that will act as a parent of the menu item that you are creating (used when creating submenu items). In this case, select Top because you want to create an independent menu item. Set the Published option to Yes to make it visible on the web site. Order is for setting the sequence of the menu item in the Main Menu. Leave it at the default so that the menu item will appear as the last position in the Main Menu. Set the Access level to Public to make the menu item publicly accessible.

After you enter the information as described (refer to Figure 3-33), click Save & Close to save the menu item. The menu item will be saved and added to the menu item list, as shown in Figure 3-34. Notice that it displays Articles ➤ Category Blog below the title, which means that the menu item will display all the subcategories of the specified category.
Figure 3-34.

Menu item created

Viewing the Contents

Now that you’ve performed all the steps to create the web site contents, it is time to see the result. Open the browser window pointing to your web site and refresh it, or just click the Preview button at the top right of the Menu Item Manager. On the front end, you’ll find that the menu item New Electronic Products Arrival appears in the Main Menu. Select this menu item; it will display the subcategories under the Electronics category and the number of articles that these categories have, as shown in Figure 3-35.
Figure 3-35.

Menu item displayingthe Electronics category and its subcategories

Select the Camera subcategory of the Electronics category; the description titles of all the articles under this category will be displayed, as shown in Figure 3-36.
Figure 3-36.

Article under the Camera category

Select the link for the “Latest Cameras” article; its content will be displayed on the screen, as shown in Figure 3-37.
Figure 3-37.

Displaying the article content

Because you selected Category Blog for the menu item type (refer to Figure 3-33), you first got the subcategory (Camera) of the selected category (Electronics) on selecting the New Electronic Products Arrival menu item from the Main Menu. When you selected the Camera subcategory, the title of the article (“Latest Cameras”) in that category was displayed, and when you selected the article title, the information stored in that article was displayed. But you can always change the menu type to display the kind of information that you want to be displayed when clicking the menu item

Working with the Home Page

The home page is the first welcome page when you open any web site. It can be any other page also, but usually it is the first page of the web site (see Figure 3-38).
Figure 3-38.

Home page

The articles that you see in Figure 3-38 are provided by Joomla by default. Open the Article Manager from the Control Panel to see the list of sample articles that are provided by default (see Figure 3-39).
Figure 3-39.

Article Manager showing default articles displayed on the home page

Suppose that you want the three articles “Your Template,” “Your Modules,” and “About your home page” to be removed from the home page. Just select the check boxes of these three articles and click the Unpublish button in the toolbar. You’ll find that the check mark in the Published column of the selected articles changes to a red X, which means that these articles will no longer be shown on the home page (see Figure 3-40).
Figure 3-40.

Unpublishing unwantedcontents

To see the effect in your web site, open the web site browser window and click the Refresh button. You’ll see the result in which all the articles except those that you set to Unpublish are visible.

Okay, you now have a basic web site, but it doesn’t look very exciting yet. The easiest way to change the appearance of a Joomla site is by applying a template. There are hundreds of templates available that cover every kind of design, so I’m sure you’ll find something that suits you. For now, though, you’ll start by looking at the templates that came preinstalled with Joomla.

Applying a Different Template

A template is the predefined structure that gives a dynamic look to a web site. A template consists of cascading style sheets (CSS) and a layout that defines the positions of components and modules in it. When a template is applied to a web site, the location of the modules and components are relocated according to the layout in it, and the styles are applied to the content of the web site.

By default, Joomla provides two front-end templates and two administrative templates. The front-end templates determine the appearance of the web content; and the administrative templates determine the appearance of the administrative interface that the administrator uses to create web content, upload images, and install extensions. The two front-end templates provided are protostar and Beez3; the back-end templates are isis and Hathor. You can see these templates in the Template Manager that you can open from the Control Panel (see Figure 3-41).
Figure 3-41.

Template Manager showing different built-in styles

Besides using these templates, you can also add templates to the system through the Extension Manager. Some templates are available for free and some require a payment. You can even create your own custom templates if you have knowledge of PHP programming.

Click the Templates tab in the Template Manager to have a detailed look and feel of installed templates, as shown in Figure 3-42.
Figure 3-42.

Template Manager showing different templates

The default home page appears in the applied front-end templates styles. The default applied template for the frontend is marked with a star. You can see in the figure that protostar–Default is applied to the home page by default. The protostar template is very simple and uses Bootstrap to make it easily adjust to various screens of mobile devices without applying major style sheet modifications. The home page in protostar–Default appears in Figure 3-43.
Figure 3-43.

Home page with protostar template applied

Let’s change the default template for the home page to Beez3. To do so, click the check box to the left of the style (Beez3–Default) and click the Default tool button in the toolbox at the top. The star changes from protostar to Beez3.

Switch to the browser window that is displaying your web site (the one pointing at http://localhost/joomlasite) and click Refresh. The effect of the template on the Joomla web site will appear, as shown in Figure 3-44. Notice that the location of the modules and contents has changed, and the CSS present in the current template have changed the appearance of the web site altogether.
Figure 3-44.

Home page with Beez3 template applied

You can also download third-party templates and create your own templates (these will be covered in later chapters). As an introduction, this is enough for you to know about templates.

After this quick start on how to create content in your Joomla web site, let’s take a look at the rest of the buttons available in the Control Panel. You can use this chapter for reference if you ever need a reminder of what the various managers do.

Other Control Panel Managers

There are a number of other managers in the Control Panel that haven’t been covered yet, including the Module Manager, the User Manager, Global Configuration, the Template Manager, and the Language Manager. They are described in the following sections.

Module Manager

The Module Manager is a collection of several independent executable units in which each executable unit can be a collection of any of the following:
  • Menus

  • Popular articles or related articles

  • Advertisements, banners, or random images

The main benefit of collecting several related items in a module is to gain better control. For example, you could make a module become invisible on the web site (which would be easier than unpublishing the individual items), apply a CSS style uniformly to all items in a module, change its Access level or position, and so on. By default, Joomla provides several built-in modules, and you can add more using the Module Manager. When you open the Module Manager, the list of modules present in it is displayed, as shown in Figure 3-45.
Figure 3-45.

Module Manager showing built-in modules

Language Manager

The Language Manager is used to manage the installed languages. You can define the default language for your web site with this manager. This is the language used in the Administrator interface. The example Language Manager in Figure 3-46 shows that only one language is currently displayed (English), but you can always install more languages by using the Extensions Install/Uninstall option.
Figure 3-46.

Language Manager

User Manager

The User Manager is used to manage users. A user might be a simple visitor who is registered at your web site, an employee of your organization, or even you. When you create users, you assign them to groups that decide the permissions assigned to them (e.g., whether they can edit or add new articles to the web site, or only view them). With the User Manager, you can create users, delete existing users, edit user information (password, e-mail ID, group membership, etc.), block existing users from accessing the web site, and so on. The User Manager displays a list of all the current users, as shown in Figure 3-47. The table in the User Manager displays the following information:
  • Username (the ID with which the user logs in).

  • User status (whether the user is logged in or logged out).

  • User state (whether the user is enabled or blocked).

  • User group: A user can be assigned any of the groups described following. Each group has certain privileges assigned to it that define the limits or rights of the user in that group. The groups, in ascending order of their privileges, are as follows:
    • Registered: Users of this group cannot edit or submit articles, and can access only the contents that are assigned the Registered Access level.

    • Author: Users of this group can submit new articles, but these articles must be approved by a member of the Publisher group or higher. Users of this group cannot edit existing articles.

    • Editor: Users of this group can submit new articles or edit existing articles. The articles must be approved by a member of the Publisher group or higher.

    • Publisher: Users of this group can submit, edit, and publish articles.

    • Manager, Administrator, and Super Administrator: Users of this group can do all the previous actions, and they can also log into the back end for better control over the web site.

  • User ID.

  • Date when the user last visited the site.
    Figure 3-47.

    User Manager

Global Configuration

Global Configuration is used for specifying certain configuration settings that can have a deep impact on the overall appearance and operation of your web site. Most of the settings listed in Global Configuration are automatically configured during the installation and that you can modify per your requirements. For example, you can change the Location Settings if you are in a different time zone. You can perform a variety of functions for your web site with this tool, such as these:
  • Specify the web site metadata that is used by search engines to locate your web site. Metadata contain keywords that describe your web site.

  • Specify the lifetime of the session. The session is created when a user logs into your site and is deleted when that user logs out. When you specify the lifetime of the session, the session is deleted automatically after the specified time. The lifetime is important for visitors who forget to log out of the web site. By default, the value of the Session Lifetime field is 15 minutes, and the user is automatically logged out if there is no activity during this time period. (While working on the exercises in this book, I suggest increasing this time limit to avoid having to log in repeatedly.)

  • Specify the mail settings to indicate the mailer to use for e-mailing (e.g., PHP, Sendmail, SMTP, etc.). If you use SMTP as a mail server, you can also specify the SMTP username and password. Specifying the mail settings is required if you want to send and receive e-mail from your web site.

  • Allow or disallow new user registration on your web site.

  • Enable or disable web services (e.g., Google Search, Google Maps, etc.). Web services are facilities provided in the form of web methods that can be invoked by your application to add more functionality to your web site. For example, invoking Google Search will allow your visitors to search the Net from your site, and they will get exactly the same output that they would get while searching from Google.

  • Allow or disallow the FTP facility. If FTP is allowed, you can specify the FTP username and password here.

  • Specify the location of media files and temporary files.

  • Specify the database name (to store the contents of your web site), its type, and its hostname.

Summary

This chapter gave you an introduction to the managers of the Control Panel found in the Administrator interface. You learned how to publish and unpublish articles from the home page of the web site, and how to change the default template used by your web site.

In the next chapter, you will learn about the Media Manager. You will also learn how to create banner categories, enter information for banner clients, and create a banner for a client. Finally, you will learn to use the Banner module to display a banner on your web site

Copyright information

© Bintu Harwani 2015

Authors and Affiliations

  • Bintu Harwani
    • 1
  1. 1.RajasthanIndia

Personalised recommendations