Joomla Manual

Educators Guide to Content Management Systems Using
Joomla Open Source
A Modular Approach, Beginner Level
Copyright 2010
Educators Guide to Content Management Systems Using Joomla Open Source by Reina Sison-Gagno is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
To view a copy of the license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
The iSchools Project of The Philippines Commission on Information and Communications Technology Human Capital Development Group (CICT-HCDG) is not affiliated with or endorsed by the Joomla Project or Open Source Matters. The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.
About the iSchools Project

The iSchools Project is one of the flagship projects of the Commission on Information and Communications Technology (CICT). Recognized at the 3rd Government Technology Awards in Bali, Indonesia, the project aims to integrate Information and Communication Technology (ICT) in education. With an annual budget of P350 million, it has provided training modules and increased ICT access in public high schools, making it the most comprehensive initiative of its kind in the Philippines. Now on its 4th year of implementation, the iSchools Project has provided these services to 1,000 public high schools nationwide.
Icons by DryIcons http://dryicons.com
Cartoon from ProjectCartoonhttp://www.projectcartoon.com
CONTENTS
How to Use This Guide Module 1 Introduction

Introduction to Content Management Systems Introduction to Joomla Preparation of System and Development Tools
4 5
5 6 7
Module 2 Installation & Setup

Installation of Joomla 1.5.x Installation of Initial Extensions Global Configuration and Enabling SEF URLs
18
18 30
Module 3 Administration
Backup and Restore Extension Management User Management
Module 4 Content Management (Part 1)

Creation of Section Creation of Category Creation of Content Item Creation of Menu Item

Creation of Contact Form Change Front Page Layout Module Management
Conclusion
How to Use This Guide
Before you start with the modules, it is important that you know the technical requirements and are familiar with the conventions used in this guide.
TECHNICAL REQUIREMENTS
Make sure you have a reliable Internet connection because we need to download files from other websites. In rare cases wherein Internet connection is not available, you can use the bundled CD supplied together with this guide but be warned that the installer files are dated and may no longer be the latest release during your rollout. Use Ubuntu (or any of its variants) as the operating system. The instructions are specially made for systems using Ubuntu (version 10.04 is the latest release at the time of this writing). If you are using a Linux-based system other than Ubuntu, you can still follow the instructions in this guide but your mileage may vary the same rule applies to Windows-based and Macintosh-based systems. You have passed basic Laboratory Management training to be able to troubleshoot any server-related problems you might encounter during installation.
CONVENTIONS USED
A terminal icon means that you have to use command line instructions. Commands are rendered in bold Courier New fonts.
Educators Guide to Content Management Systems
Module 1 Introduction
For quite some time, website development has been the domain of programmers they knew how the system worked and were able to extend it with the required features as needed. Eventually website development became expensive to support and maintain until free and open source content management systems came along in the 2000s.
What do you need to accomplish?

For the first module, you need to understand what a content management system is and what it does. You will also be introduced to one of the most popular web-based content management systems. You will also receive instructions regarding what you need to do to prepare your server.
INTRODUCTION TO CONTENT MANAGEMENT SYSTEMS
A content management system (CMS; plural CMSes) is a set of interdependent procedures that collaborate and manage content on a website. It consists of a workflow that involves people who produce and maintain content. With computerization and digitization of information, the CMS has evolved into a Webbased application. To further understand what a CMS is, you would need to know its elements. First, it has the ability to store data in a content repository. Second, the CMS also provides workflow support for the people who manage the repository. While there are hundreds of tools to help you with
content management, it will fail if there is no workflow support. The CMS per se is not something you set up once and then leave, hope it will manage itself its success depends very much on the people who use it.
INTRODUCTION TO JOOMLA
(Just a question before I need to fiddle with the long paragraph below: Is it necessary for teachers who will be taught Joomla to know about its history? I feel that its too long and may actually get in the way of their training re: putting up CMS.
Joomla is a popular CMS that is both free and open source. It is written using the PHP scripting language with MySQL database server as its preferred choice for data storage. The official website is located at http://www.joomla.org
From Wikipedia, here is an excerpt of Joomlas history:
Joomla was the result of a fork of Mambo on August 17, 2005. At that time, the Mambo name was trademarked by Miro International Pvt Ltd, who formed a non-profit foundation with the stated purpose to fund the project and protect it from lawsuits. The Joomla development team claimed that many of the provisions of the foundation structure went against previous agreements made by the elected Mambo Steering Committee, lacked the necessary consultation with key stake-holders and included provisions that violated core open source values. The Joomla development team created a website called OpenSourceMatters.org to distribute information to users, developers, web designers and the community in general. A letter was written by the project leader which appeared on the announcements section of the public forum at mamboserver.com. A little more than one thousand people had joined the opensourcematters.org website within a day, most posting words of encouragement and support, and the website received the slashdot effect as a result. Miro CEO Peter Lamont gave a public response to the development team in an article titled The Mambo Open Source Controversy 20 Questions With Miro. This event created controversy within the free software community about the definition of open source. Forums at many other open source projects were active with postings for and against the actions of both sides. In the two weeks following Eddies announcement, teams were re-organized, and the community continued to grow. Eben Moglen and the Software Freedom Law Center (SFLC) assisted the Joomla core team beginning in August 2005, as indicated by Moglens blog entry from that date and a related OSM announcement. The SFLC continue to provide legal guidance to the Joomla project. On August 18, 2005, Andrew Eddie called for community input on suggested names for the project. The core team indicated that it would make the final decision for the project name based on community input. The core team eventually chose a name that was not on the list of suggested names provided by the community.
6
On September 1, 2005 the new name, Joomla, was announced. It is the Romanized spelling of the Swahili word jumla meaning all together or as a whole. On September 6, 2005, the development team called for logo submissions from the community, invited the community to vote on the logo preferred, and announced the communitys decision on September 22, 2005. Following the logo selection, brand guidelines, a brand manual, and a set of logo resources were then published on October 2, 2005 for the communitys use. Joomla won the Packt Publishing Open Source Content Management System Award in both 2006 and 2007. On October 27, 2008, PACKT Publishing announced Johan Janssens the Most Valued Person (MVP) for his work as one of the lead developers of the 1.5 Joomla Framework and Architecture. In 2009 Louis Landry received the Most Valued Person award for his role as Joomla architect and development coordinator. To this date, Joomla have been downloaded numerous times and deployed worldwide from personal to small business websites, to government agency websites and intranets.
PREPARATION OF SYSTEM AND DEVELOPMENT TOOLS

To prepare our Ubuntu desktop for web development, we need a web server compiled with a scripting language and a database server that will handle content data.
We will be installing Apache 2 (a commercial-grade open source web server), PHP 5 (a general-purpose scripting language), and MySQL 5 (a popular open source database server).
Apache with PHP and MySQL

Launch Synaptic Package Manager from System -> Administration located at the top menu of your desktop. 1. Type apache in the search box and the package manager will list all Apache-related packages.
Figure 1-1. The keyword apache typed inside the search box of Synaptic Package Manager.
2. You will need to install apache2.2-common. To do this, click on the box to the left of
the package name and select Mark for Installation.
Figure 1-2. The apache2.2-common package selected and marked for installation.
3. A dialog box will show a list of all related packages to the package that you selected. Click the Mark button to confirm the addition for installation.
Figure 1-3. A list of additional packages needed for the Apache installation.
4. The chosen packages are now highlighted in green on the screen with their checkboxes ticked.
Figure 1-4. Selected Apache packages are highlighted in green.
5. Delete the apache keyword and replace it with php5 in the search box.
Figure 1-5. The keyword php5 typed inside the search box of Synaptic Package Manager.
10
6. The package manager will list all PHP-related packages, just like what it did to Apache earlier. Do the same things as with the previous steps select and mark for installation, and if prompted for additional packages, confirm it.
Figure 1-6. The php5 package selected and marked for installation.
Figure 1-7. A list of additional packages needed for the PHP installation.
11
Figure 1-8. Selected PHP packages are highlighted in green.
7. Next, separately search for the keywords mysql-server and php5-mysql. As with the previous steps, you need to select the package and mark it for installation; confirm the installation for any additional packages as well.
Figure 1-9. The keyword mysql-server typed inside the search box of Synaptic Package Manager.
Inset: The keyword search for php5-mysql.
12
Figure 1-10. The mysql-server package selected and marked for installation.
Figure 1-11. A list of additional packages needed for the MySQL installation.
13
Figure 1-12. Selected MySQL packages are highlighted in green.
8. Now that we have selected all the required packages for our web and database
servers, we need to do its actual installation. Click Apply on the top of the page.
Figure 1-13. The Apply icon selected before installation of marked packages.
14
9. A dialog box will ask you to confirm installation of all marked packages. Click Apply
to start the installation process.
Figure 1-14. A dialog box confirming the installation of selected packages.
10. The installation starts by downloading all selected packages from the nearest
Ubuntu repository server. Please be patient as it may take awhile for all files to be downloaded.
Figure 1-15. The package manager downloads all selected packages.
15
11. Apache with compiled PHP will be installed without any user assistance except for
the MySQL installation. You will be prompted to enter a root password enter a password (it should be simple to remember but hard to crack) and click Forward.
Figure 1-16. A dialog box requesting for a root password in MySQL.
12. The next screen will request that you repeat the password that was entered in the previous screen. If the password matched, then it is confirmed and installation will continue. Otherwise, you will be prompted again for a new password.
Figure 1-17. A dialog box confirming the root password in MySQL.
16
13. Once the installation is done, you will see a dialog box notifying you that all packages have been installed in your computer. Close the dialog box and the Synaptic Package Manager.
Figure 1-18. A dialog box confirming installation of all required packages.
14. Next, we need to launch Terminal from Applications -> Accessories and enable the
PHP module for Apache.
Figure 1-19. The PHP module is enabled using a terminal window.
17
We then shift from the user directory to the Apache directory:
cd /etc/apache2
Then we enable the PHP module in Apache:
sudo a2enmod php5

And restart the server to effect the changes:
sudo /etc/init.d/apache2 restart

You can now close the terminal window:
Exit 15. Finally, we should test our web server. Launch your browser and in the location bar,
type http://localhost you should now see the words It works!
Figure 1-20. A browser window with the words It works!
With the required system and development tools installed and working in your desktop, you can now proceed to the next module.
18
Module 2 Installation & Setup

The second module will begin with the installation and setup of the core Joomla website. No special configuration will be done at this point except to prepare the website for use in the succeeding modules.
What do you need to accomplish?

For this module, we need to install Joomla 1.5.x inside our web root. Due to limited access permissions in the Ubuntu server, we have to create a symbolic link of the web root inside the user directory. This technique will limit the users within their own home directories but give them the right to install and maintain their websites. Likewise, we will present the installation as visual as possible and avoid giving command line instructions unless necessary.
After the default installation of the Joomla website, we will setup a few initial extensions that will come in handy when we start modifying the global configurations. Correspondingly, we will enable search engine-friendly (SEF) URLs as part of the default feature of the website. At the end of the module, your Joomla website should now be ready for basic administration and content management.
INSTALLATION OF JOOMLA 1.5.x

Launch your browser and type the URL to the Joomla website, as follows: http://www.joomla.org
1. Point your cursor to the Download Joomla image at the right side of the screen. Click
on the image and it will redirect you to the download page.
Figure 2-1. The Joomla website. A Modular Approach, Beginner Level
19
2. In the Download Joomla page, select the latest release and click on its link to
download the file. At the time of this writing, the current stable version is 1.5.20 choose the full package and not the upgrade package.
Figure 2-2. The Joomla download page.
3. A dialog box will pop up on the screen, asking you what to do with the file that you
are about to download. Choose Save File then click the OK button. The download will start immediately.
Figure 2-3. A dialog box confirming to save the file.
20
4. Next, launch a terminal window and create a symbolic link of the web root directory
inside the user directory. Then we will change its ownership from root to your user account.
Figure 24. A terminal window creating a symbolic link and deleting an unnecessary file.
Make sure you are in your user directory (replace user with your username):
cd /home/user
Then we will create the symbolic link of the web root and name it Website:
ln s /var/www/ Website
We will change the ownership of the directory from root to user (replace user with your username):
sudo chown user:user Website

Then we go inside the newly created directory:
cd Website
We then remove an unnecessary file (the index.html that displays the default It Works! page in the browser):
sudo rm index.html
You can now close the terminal window:
exit
21
5. A new directory named Website is created inside your user directory this is the
place where we will install the Joomla website.
Figure 2-5. A new Website directory is created in your user directory.
6. Go to your Downloads directory and locate the file named Joomla_1.5.20-StableFull_Package.zip double-click on the icon to launch the archive manager application.
Figure 2-6. The Joomla installer inside the Downloads directory.
22
7. The archive manager will present a list of files inside the zipped archive. Click on the
Extract button to start the extraction process.
Figure 2-7. The archive manager window with a list of the Joomla files.
8. You will be asked to select a destination folder. Choose the Website folder as the
target destination for the extracted files. Then click on the Extract button.
Figure 2-8. The selection of the directory where the installer files will be extracted.
23
A status of the extraction process will be displayed along with a success message afterwards. 9. Check on your Website folder to make sure the extracted files are indeed present. If
there are no files, then something must have gone wrong with the extraction process either it was extracted on the wrong target destination or there was no write permission on the target destination.
Figure 2-9. The extracted Joomla files inside the Website directory. 10. Go back to your browser and refresh the page. You should now see the first page of
the Joomla installer where it shows an option to select a language. Choose en-US English (US) then click the Next button on the upper right of the page.
Figure 2-10. The first page of the Joomla installation.

24
11. The next page is the Pre-Installation Check. Make sure that all system pre-requisites
have been met. In the case of the configuration file being unwriteable, you need to change the write permissions of the web root directory of the website.
Figure 2-11. The Pre-installation Check page with the unwriteable configuration file.
12. Go to your user directory and right-click on the Website folder. In the dropdown
menu, select Properties.
Figure 2-12. The Properties dialog box with the Permissions tab selected.
25
13. Click on the Permissions tab and change all Folder access to Create and delete
files; then click on Apply Permissions to Enclosed Files button. Finally, close the dialog box. Your folder permissions have been updated with the new configuration.
Figure 2-13. The Permissions tab with the required folder access.
14. To test the new folder permissions, refresh your page in the browser and it will now show that the configuration file is writeable.
Figure 2-14. The configuration file is writeable after the change in the folder access permissions.
To proceed with the installation, click the Next button on the upper right corner of the page.
26
15. The next page presents the license that Joomla is currently using (i.e., GNU General
Public License). You are advised to read it in its entirety and if you accept the license, click on the Next button.
Figure 2-15. The License page.
16. You will then proceed to configure the database connection settings. The database
type is mysql and the host name is localhost. Use root as the database username and the password that you entered during the MySQL installation as its password. Type school_cms as the database name this will be created when you click on the Next button.
Figure 2-16. The Database Configuration page.
27
17. The FTP Configuration page will be shown next and you do not need to do anything
with it because enabling FTP layer is a security risk. Click the Next button to go to the next page.
Figure 2-17. The FTP Configuration page.
18. The last form-based page in the installation is the Main Configuration page. In this
page, you need to enter your schools name as the site name and designate an administrators password. Likewise, do not load sample data nor restore/migrate backed up content because we are doing a clean install. Click Next to save the configurations.
Figure 2-18. The Main Configuration page.
28
Figure 2-19. A dialog box confirming that no sample data will be installed.
19. You have successfully installed Joomla if you see the Finish page; you have the
option to either view the frontend (Site) or view the backend (Admin) of the website.
Figure 2-20. The Finish page with warning to remove the installation directory.
29
20. Go back to the file manager and return to your websites root directory. Delete
(Right-click -> Move to Trash) the installation folder.
Figure 2-21. The installation folder (circled) inside a file directory window; ready to be deleted.
21. In your browser window, select the Site button to view the frontend of the website.
Figure 2-22. The frontend of the website.
Congratulations! You have a new Joomla-based website.
30
INSTALLATION OF INITIAL EXTENSIONS

Now that we have installed Joomla, we need to manage it from the admin panel. 1. If you are using Mozilla Firefox, open a new tab and access the Joomla admin panel
by entering http://localhost/administrator/ in the location bar. Login using admin as the username and your chosen password during installation.
Figure 2-23. The backend of the website.
2. Upon login, you will be taken to the dashboard. The main menu is on top, the quick icons are on the left while site statistics are on the right.
31
Figure 2-24. The dashboard in the admin panel.
1. efore we start installation of the first extension, let us make the required Joomla
directories writable by the system. In the top menu, go to Help -> System Info.
Figure 2-25. Navigate to System Info using the top menu in the admin panel.
2. Inside the System Info page, select the Directory Permissions link. It will show you
a page with a list of required Joomla directories and their statuses (unwriteable by default). To be able to successfully install extensions, we need these directories writable.
32
Figure 2-26. The System Info page showing contents of the Directory Permissions tab.
3. Using the list as a guide, go to your file browser and change the permissions.
Figure 2-27. Changing directory permissions in the file browser.
Navigate to the correct directory then Right-Click -> Properties -> Permissions. Make sure to change the values for Folder access to Create and delete files then click the Apply Permissions to Enclosed Files button. Close the dialog box afterwards. 4. Go back to the browser and refresh the System Info page you should now see that the first required directory is writable.
33
Figure 2-28. The System Info page refreshed with new permission status of the first required directory.
5. Repeat Step 5 until all required Joomla directories are writable. Once done, your System Info page should show the Writable status for all directories in the list.
Figure 2-29. The System Info page listing all required directories as writable.
6. We are now ready to install the first extension. In the top menu, go to Extensions ->
Install/Uninstall.
34
Figure 2-30. Navigate to Install/Uninstall using the top menu in the admin panel.
7. The Extension Manager page allows you to install it in three ways: [1] by uploading a package file, [2] by installing from a directory, and [3] by installing through a URL. For our tutorial, we will use the first type of installation.
Figure 2-31. The Extension Manager page.
8. By default, Joomla is using TinyMCE as its web-based editor. While this extension is cutting-edge, it lacks the necessary functions needed to accomplish feature-packed content creation. In this regard, we need to install an alternative known as Joomla Content Editor (JCE). Using your browser, go to http://www.joomlacontenteditor.net/downloads/editor and download the JCE Installation Package (includes both component and plugin). Save the installer.
35
Figure 2-32. The JCE download page.
9. After the download is finished, install the package inside the Joomla admin panel
click on the Browse button and retrieve your newly downloaded JCE installer. Then click the Upload File & Install button.
Figure 2-33. Installation of the JCE package file.
You will see a success status message upon successful installation of the extension.
36
Figure 2-34. The success status upon installation of the JCE extension.
10. We need to make JCE the default editor instead of TinyMCE. Go to Extensions ->
Plugin Manager to make the changes.
Figure 2-35. Navigate to Plugin Manager using the top menu in the admin panel.
37
Figure 2-36. The Plugin Manager page.
11. In the Plugin Manager page, locate TinyMCE in the list and disable it by clicking the green check icon. Once disabled, the icon should now be a red cross.
Figure 2-37. The TinyMCE plugin, enabled by default.
38
Figure 2-38. The TinyMCE plugin disabled.
Now that we have TinyMCE disabled, we are ready to make changes to the global configuration of the website.
39
GLOBAL CONFIGURATION AND ENABLING SEF URLS

The Global Configuration page handles the operational settings of the website. We will configure the following parameters: Default WYSWYG Editor Enable search engine-friendly (SEF) URLs with suffixes Global Site Meta Description Global Site Meta Keywords Time Zone
1. In the top menu, go to Site -> Global Configuration. The first configuration tab
controls [1] the Site Settings, [2] the SEO Settings, and [3] the Metadata Settings.
Figure 2-39. Navigate to Global Configuration using the top menu in the admin panel.
Under Site Settings, select JCE as the default web-based editor. In the SEO Settings, set to Yes the options for search engine-friendly URLs and addition of suffixes to the URLs. For Metadata Settings, change the default values of global meta description and keywords. Click the Apply icon on the upper right area of the page to save and continue editing the parameters.
40
Figure 2-40. The parameters for Site Settings and SEO Settings inside the Global Configuration page.
Figure 2-41. The success message after an update of the global configuration.
2. In the last configuration tab (click on the Server link), change the time zone to
UTC+8. Since the Philippines is not listed in the options, select the nearest country time zone in the list in this case, it is (UTC +8:00) Beijing, Perth, Singapore, Hong Kong. Then click on the Save icon on the upper right of the page to save and exit the configuration page.
41
Figure 2-42. The time zone parameter in the global configuration.
Basic global parameters have been edited and the site is now configured to use search engine-friendly URLs. You can now proceed to the next module.
42
Module 3 Administration
Now that we have covered the basics, the third module will discuss system administration with extension and user managements. We have a list of pre-selected Joomla extensions that need to be installed in every public school website. What do you need to accomplish? For this module, we need to learn basic Joomla system administration like backup and restore, installation of required extensions, and an overview of managing users in your website.
BACKUP AND RESTORE

A part of basic system administration includes backing up and restoring data and all websites are required to have at least one daily backup stored somewhere safe so that in cases of emergency, it can be restored. Download the latest version of Akeeba Backup at http://www.akeebabackup.com/download/official/akeeba-backup.html and install it in your Joomla admin panel.
Figure 3-1. The Akeeba Backup download page.
43
Figure 3-2. Installation of Akeeba Backup inside the Extension Manager.
Figure 3-3. The success message after the installation of Akeeba Backup.
Upon successful installation, navigate to the Akeeba Backup page using the top menu. Go to Components -> Akeeba Backup.
44
Figure 3-4. Navigate to Akeeba Backup using the top menu in the admin panel.
Start configuring the extension by clicking on the Configuration Wizard icon. It will run a series of benchmarks to determine compatibility and optimal settings for your website.
Figure 3-5. The Akeeba Backup extension page with the Configuration Wizard icon on the left side.
45
Figure 3-6. The Akeeba Backup benchmark tests.
After the benchmark tests are undertaken and if there are no errors reported, you can start your initial website backup. Click the Backup Now button.
Figure 3-7. The success page is shown after the benchmark tests which also features options to create an immediate backup or fine-tune a backup configuration.
A new backup page will be shown wherein you can enter additional information about the backup you are going to make. You can click the Backup Now button to start the backup process.
46
Figure 3-8. A new backup page is shown where you can enter additional backup information.
Figure 3-9. The backup process in progress.
A page indicating that you have successfully backed up data will be shown afterwards. It will feature options to manage the backup files or to view the backup logs.
47
Figure 3-10. The success page after a backup process with options to administer backup copies or view logs.
It is recommended that you should download a backup copy of your website and save it somewhere safe. You can do a weekly backup so that if something bad happens to your website, you can do a restore and lost only a weeks worth of content.
Figure 3-11. The Administer Backup Files page.
To download a backup copy, tick the checkbox on the left side of the backup you want. Then click on the Download icon on the upper right of the page.
48
Figure 3-12. Starting the download process of a backup copy.
Save the file. The output is in a JoomlaPack Archive (JPA) file format that can be restored using Akeeba Kickstart.
Figure 3-13. Download backup copy in JoomlaPack Archive (JPA) format.
For more information about backup restoration, check out Akeeba Kickstart at http://www.akeebabackup.com/software/akeeba-kickstart.html or read the documentation included in the CD that comes with this guide. Akeeba Kickstart, based on the developers website, allows you to extract the backup copy directly on the server and restore your site from there. Likewise, it is an easy way to port your website from one server to another.
49
For the initial backup, your backup copy is less than 10MB. When your website has more content, the file size will be bigger. In this case, it is advised to download the backup directly from the server via File Transfer Protocol (FTP) or use a browser that can handle large file downloads (e.g., Opera web browser with pause and resume download feature).
Figure 3-14. Dialog box prompting user on possible corruption of backup copy when downloaded from browser.
EXTENSION MANAGEMENT
Joomla has thousands of extensions available to end-users and they can be found at http://extensions.joomla.org. For uniformity of website features, we have pre-selected extensions that can be installed in your Joomla website. These extensions are: Phoca Gallery an image gallery http://www.phoca.cz/phocagallery http://www.phoca.cz/documentation/category/2-phoca-gallery-component Phoca Guestbook a simple guestbook with CAPTCHA system http://www.phoca.cz/phocaguestbook http://www.phoca.cz/documentation/category/3-phoca-guestbook-component Phoca Download a download manager http://www.phoca.cz/phocadownload http://www.phoca.cz/documentation/category/17-phoca-download-component
These extensions have their own documentation and will not be included in this guide to avoid redundancy. You are advised to read them online. You are not limited to these extensions, you may install as many as you like depending on your website requirements and needs.
50
Figure 3-15. Phoca Gallery extensions main page.
Figure 3-16. Phoca Guestbook extensions main page.
51
Figure 3-17. Phoca Download extensions main page.
Install these extensions in the Extension Manager of the Joomla admin panel. You can manage them by navigating through the top menu as follows: Components -> Phoca Gallery Components -> Phoca Guestbook Components -> Phoca Download
Figure 3-18. Newly added extensions can be managed through the Components section in the admin panel.
To show them in the frontend of the website, you would need to create links to these extensions. The tutorial for creation of menu links can be found in Module 4.
52
USER MANAGEMENT
As part of the administration tasks, you can manage your website users inside the Joomla admin panel.
1. In the top menu, go to Site -> User Manager.
Figure 3-19. Navigate to User Manager using the top menu in the admin panel.
2. The User Manager page lists all users currently registered and using the website (whether in the frontend, backend or both).
Figure 3-20. The User Manager page.
53
3. To add a new user, click the New icon in the upper right of the page.
Figure 3-21. By clicking the New icon, a new user can be added.
4. A page with varied user-related form fields will be displayed. Enter the required
information needed to create a new user then click Save.
Figure 3-22. The new user creation page.
5. You will be taken back to the main User Manager page with the newly-created user in the list.
54
Figure 3-23. The User Manager with the newly-created user listed in the page.
Disregard the Could not instantiate mail function error it simply means that an email cannot be dispatched to the new user because there is no mail server installed. If the website is deployed in a live production server, this functionality would work because most web servers have a mail server installed in the system.
6. To edit a users information or to change their password, tick the checkbox on the left
of the users name and click the Edit icon on the upper right. It will take you back to the user information form edit it then save.
Figure 3-24. The edit function in the User Manager.
55
7. To delete a user, tick the checkbox on the left of the users name and click the Delete
icon on the upper right.
Figure 3-25. The delete function in the User Manager.
8. To forcefully log out a user, tick the checkbox on the left of the users name and click
the Logout icon on the upper right.
Figure 3-26. The logout function in the User Manager.
Now that we have covered the basic administration of the website, you may proceed to the next module.
56
We will start the fourth module with an introduction to article elements (i.e., section, category and content item) and its creation inside the Joomla website. This module will start your foray into digital content management. For easy content creation and management, it is highly recommended that you have your website's sitemap ready as you will use this information to create article elements. What do you need to accomplish? In this module, we will learn how to create a section, a category, content and menu items. Likewise, we will tackle briefly an alternative to the default Joomla content creation facility.
CREATION OF SECTION
In Joomla, content are assigned under their respective sections and categories. They need to be defined before a content item can be saved. Here is the Joomla article content hierarchy: A section has one or many categories. A category belongs to only one section and has one or many content items. A content item belongs to only one section and one category.
We start content creation by creating a section.
1. Go to Content -> Section Manager. The Section Manager page will be displayed and
it lists all article sections.
57
Figure 4-1. The Section Manager page.
2. To add a new section, click the New icon in the upper right of the page.
Figure 4-2. By clicking the New icon, a new section can be added.
3. A page with varied section-related form fields will be displayed. Enter the following required information: Title: The title you want to use for the section. Alias: The alias you want to use for the section. It is a best practice to create an easy to follow, yet specific convention for aliases in all your website sections since Joomla uses this when creating search engine-friendly URLs. It is also best to use a dash instead of leaving spaces between words when creating an alias. Published: Set to Yes to make it open to all users. Selecting No will unpublish the section and make it unavailable for viewing on the website. Access Level: Set the access level of the section and it will only be accessible to users with the access level you selected. Default value is Public. The rest of the fields are optional. Click Save in the upper right of the page.
58
Figure 4-3. The new section creation page.
4. You will be taken back to the main Section Manager page with the newly-created section in the list.
Figure 4-4. The Section Manager with the newly-created section listed in the page.
5. To edit a section, tick the checkbox on the left of the sections title and click the Edit
icon on the upper right. It will take you back to the section information form edit it and save.
59
Figure 4-5. The edit function in the Section Manager.
6. To delete a section, tick the checkbox on the left of the sections title and click the
Delete icon on the upper right.
Figure 4-6. The delete function in the Section Manager.
7. To create a copy of an existing section, tick the checkbox on the left of the sections
title and click the Copy icon on the upper right.
60
Figure 4-7. The copy function in the Section Manager.
CREATION OF CATEGORY
The creation of a category is similar to the previous article element creation except that it needs to belong to a section before it can be saved.
1. Go to Content -> Category Manager. The Category Manager page will be displayed
and it lists all article categories.
Figure 4-8. The Category Manager page.
2. To add a new category, click the New icon in the upper right of the page.
61
Figure 4-9. By clicking the New icon, a new category can be added.
3. A page with varied category-related form fields will be displayed. Enter the following required information: Title: The title you want to use for the category. Alias: The alias you want to use for the category. It is best to create an easy to follow, yet specific convention for aliases in all your website categories since Joomla uses this when creating search engine-friendly URLs. It is also best to use a dash instead of leaving spaces between words when creating an alias. Published: Set to Yes to make it open to all users. Selecting No will unpublish the category and make it unavailable for viewing on the website. Section: Select the section you want the category to belong to. Access Level: Set the access level of the category and it will only be accessible to users with the access level you selected. Default value is Public. The rest of the fields are optional. Click Save in the upper right of the page.
62
Figure 4-10. The new category creation page.
4. You will be taken back to the main Category Manager page with the newly-created category in the list.
Figure 4-11. The Category Manager with the newly-created category listed in the page.
5. To edit a category, tick the checkbox on the left of the categorys title and click the
Edit icon on the upper right. It will take you back to the category information form edit it and save.
63
Figure 4-12. The edit function in the Category Manager.
6. To delete a category, tick the checkbox on the left of the categorys title and click the
Figure 4-13. The delete function in the Category Manager.
7. To create a copy of an existing category, tick the checkbox on the left of the
categorys title and click the Copy icon on the upper right.
64
Figure 4-14. The copy function in the Category Manager.
8. To move an existing category to another section, tick the checkbox on the left of the
categorys title and click the Move icon on the upper right.
Figure 4-15. The move function in the Category Manager.
9. A page with a selection of existing sections will be displayed choose the section
you want to move your category and click the Save icon on the upper right. If there are existing articles in the category that is being moved, they will be moved to the new section as well.
65
Figure 4-16. The move category page.
CREATION OF CONTENT ITEM

The creation of a content item is similar to the first two article elements creation except that is needs to belong to a section and a category before it can be saved.
1. Go to Content -> Article Manager. The Article Manager page will be displayed and it
lists all articles.
Figure 4-17. The Article Manager page.
66
2. To configure the global parameters of the articles, click on the Parameters icon on
the upper right of the page.
Figure 4-18. By clicking the Parameters icon, you can configure the global parameters of the articles.
A form will pop up from the page wherein various parameters can be set. Once finished with the configuration, click the Save button.
Figure 4-19. The global parameters pop-up page.
3. To add a new content item, click the New icon in the upper right of the page.
67
Figure 4-20. By clicking the New icon, a new article can be added.
4. A page with varied article-related form fields will be displayed. Enter the following required information: Title: The title you want to use for the article. Alias: The alias you want to use for the article. It is a best practice to create an easy to follow, yet specific convention for aliases in all your website articles since Joomla uses this when creating search engine-friendly URLs. It is also best to use a dash instead of leaving spaces between words when creating an alias. Published: Set to Yes to make it open to all users. Selecting No will unpublish the article and make it unavailable for viewing on the website. Front Page: Set to Yes if you want this article shown on the front page of the website. Default value is No. Section: Select the section you want the article to belong to. Category: Select the category you want the article to belong to. Access Level: Set the access level of the category and it will only be accessible to users with the access level you selected. Default value is Public. Main content body with web-based editor: Enter the full text of the article. You have the option to change fonts, add images and links. The rest of the fields are optional. Click Save in the upper right of the page.
68
Figure 4-21. The new article creation page.
5. You will be taken back to the main Article Manager page with the newly-created article in the list.
Figure 4-22. The Article Manager with the newly-created article listed in the page.
6. To edit an article, tick the checkbox on the left of the articles title and click the Edit
icon on the upper right. It will take you back to the article form edit it and save.
69
Figure 4-23. The edit function in the Article Manager.
7. To delete an article, tick the checkbox on the left of the articles title and click the
Trash icon on the upper right.
Figure 4-24. The delete function in the Article Manager.
Articles placed inside the trash bin can still be restored. Go to Content -> Article Trash and restore from there.
8. To create a copy of an existing article, tick the checkbox on the left of the articles title
and click the Copy icon on the upper right.
70
Figure 4-25. The copy function in the Article Manager.
9. To move an existing article to another section &/or category, tick the checkbox on the
left of the articles title and click the Move icon on the upper right.
Figure 4-26. The move function in the Article Manager.
10. A page with a selection of existing sections and categories will be displayed choose
the section/category you want to move your article and click the Save icon on the upper right.
71
Figure 4-27. The move article page.
11. To archive an article, tick the checkbox on the left of the articles title and click the
Archive icon on the upper right of the page. Consequently, archived articles can be unarchived too.
Figure 4-28. The archive function in the Article Manager.
An alternative to the default Joomla content creation facility is the K2 extension (http://www.getk2.org) it is a feature-packed content creation kit for Joomla. K2 allows the user to attach an image, an image gallery, a video, files, custom extended fields, and tags to an article.
72
CREATION OF MENU ITEM

Unlike the previous article elements, menu creation not only involves linking to articles but to components as well.
Go to Menus -> Main Menu. The Menu Item Manager page will be displayed and it lists all menus.
Figure 4-29. The Menu Item Manager page.
To add a new menu, click the New icon in the upper right of the page.
Figure 4-30. By clicking the New icon, a new menu can be added.
73
A page with different menu types will be displayed. Select Articles to create an article link or select the component name if you want to create a component link.
Figure 4-31. The menu item type page.
To link to an article, select Articles -> Article -> Article Layout.
Once you are done with your menu item type selection, you will be forwarded to a menu item page that have varied menu-related form fields. On the right panel under the Parameters (Basic) tab, click on the Select button. A page will pop-up and it will list all articles. Select the article you want linked with the menu you are creating.
Figure 4-32. The menu item page with the Select button about to be clicked.
74
Figure 4-33. The pop-up page listing all articles.
Enter a title and an alias and set all other parameters on the left panel of the page. Then click the Save icon on the upper right.
Figure 4-34. The new menu item creation page.
You will be taken back to the main Menu Item Manager page with the newly-created menu in the list.
75
Figure 4-35. The Menu Item Manager with the newly-created menu listed in the page.
Go to the frontend and refresh the browser. You should now see the newly-created menu item in the left sidebar of the page.
Figure 4-36. Newly-created menu item added on the left sidebar of the website.
Clicking on the new menu item takes you to the article it was linked to.
76
Figure 4-37. When the menu item is clicked, the article it was linked to is displayed.
To edit a menu item, tick the checkbox to the left of the menu items title and click the Edit icon on the upper right. It will take you back to the menu item form edit it and save.
Figure 4-38. The edit function in the Menu Item Manager.
To delete a menu item, tick the checkbox to the left of the menu items title and click on the Trash icon on the upper right.
77
Figure 4-39. The delete function in the Menu Item Manager.
To copy an existing menu item, tick the checkbox to the left of the menu items title and click the Copy icon on the upper right.
Figure 4-40. The copy function in the Menu Item Manager.
To move an existing menu item to another menu, tick the checkbox to the left of the menu items title and click the Move icon on the upper right.
78
Figure 4-41. The move function in the Menu Item Manager.
A page with a selection of existing menus will be displayed choose a menu you want to move the menu item and click the Move icon on the upper right.
Figure 4-42. The move menu item page.
To set a default menu item (when a user browses your site for the first time, this will be the first page that will be displayed it is likewise known as the home page), tick the checkbox on the left of the menu items title and click the Default icon on the upper right of the page.
79
Figure 4-43. The default menu item function in the Menu Item Manager.
We have finished part 1 of the content management. You may now proceed to the next module.
80
The fifth and final module covers the creation of a contact form, the modification of the front page layout and an overview of module management. What do you need to accomplish? In this module, we will learn how to create a contact form so that users of our website have a medium to send us their messages. Likewise, we will learn how to use a template to further customize the front page layout of our website. And finally, we will learn how to manage our websites modules.
CREATION OF CONTACT FORM

If article creation had a hierarchy, so does contact form creation, as follows: A contact category has one or many contact items. A contact item belongs to only one contact category.
We start contact form creation by creating a contact category.
1. Go to Components -> Contacts -> Categories. The Category Manager for contact
details page will be displayed and it lists all contact categories.
Figure 5-1. The Category Manager [Contact Details] page.
2. To add a new contact category, click the New icon in the upper right of the page.
81
Figure 5-2. By clicking the New icon, a new contact category can be added.
3. A page with varied contact category-related form fields will be displayed. Enter a title
and an alias. Set the Published and Access Level fields to Yes and Public respectively. The rest of the fields are optional. Click Save in the upper right of the page.
Figure 5-3. The new contact category page.
4. You will be taken back to the main Category Manager [Contact Details] page with the newly-created contact category in the list.
82
Figure 5-4. The Category Manager [Contact Details] with the newly-created contact category listed in the page.
5. To edit a contact category, tick the checkbox on the left of the contact categorys title
and click the Edit icon on the upper right. It will take you back to the contact category form edit it and save.
Figure 5-5. The edit function in the Category Manager [Contact Details] page.
6. To delete a contact category, tick the checkbox on the left of the contact categorys
title and click the Delete icon on the upper right.
83
Figure 5-6. The delete function in the Category Manager [Contact Details] page.
7. Now that we have a contact category, we are now ready to add a contact form. Click
on the Contacts link to open the contact items tab.
Figure 5-7. By clicking the Contacts link, the user will be redirected to the Contact Manager page.
8. The Contact Manager page will be displayed and it will list all contact items.
84
Figure 5-8. The Contact Manager page.
9. To configure the global contact parameters, click on the Parameters icon on the
upper right hand part of the page.
Figure 5-9. By clicking the Parameters icon, you can configure the global contact parameters.
A form will pop up from the page wherein various parameters can be set. Once finished with the configuration, click the Save button.
85
Figure 5-10. The global contact parameters pop-up page.
10. To add a new contact item, click the New icon in the upper right of the page.
Figure 5-11. By clicking the New icon, a new contact item can be added.
11. A page with varied contact item-related form fields will be displayed. Enter a name,
an alias, and an email address. Select a contact category then set Published to Yes and Access Level to Public. The rest of the fields are optional. Click Save in the upper right of the page.
86
Figure 5-12. The new contact item creation page.
12. You will be taken back to the main Contact Manager page with the newly-created contact item in the list.
Figure 5-13. The Contact Manager with the newly-created contact item listed in the page.
13. To edit a contact item, tick the checkbox on the left of the contacts name and click
the Edit icon on the upper right. It will take you back to the contact item form edit it and save.
87
Figure 5-14. The edit function in the Contact Manager.
14. To delete a contact item, tick the checkbox on the left of the contacts name and click
the Delete icon on the upper right.
Figure 5-15. The delete function in the Contact Manager.
15. Create a menu item linking to the Contacts component (see Module 4 Creation of
Menu Item). Refresh your browser you should now see the newly-created menu item on the left sidebar of the front page.
88
Figure 5-16. The menu item type page with Standard Contact Layout selected.
Clicking on the new menu item takes you to the contact form it was linked to.
Figure 5-17. Newly-created menu item for the contact form added to the left sidebar of the website. When the menu item is clicked, the contact form it was linked to is displayed.
CHANGE FRONT PAGE LAYOUT

To further customize our Joomla website, we should change the way it looks. For this enhancement, we will be dealing with templates.
89
1. Install the template (see Module 2 Installation of Initial Extensions) provided during
the rollout. After a successful installation, go to Extensions -> Template Manager. The Template Manager page will be displayed and it lists all available templates.
Figure 5-18. The Template Manager page.
2. Select the template name from the list and click on it. The succeeding page will show the template parameters page.
Figure 5-19. By clicking on the chosen templates name, the user will be redirected to the template parameters page.
90
3. Set the parameters according to your needs. Click Save on the upper right of the
page.
Figure 5-20. The template parameters page.
4. You will be taken back to the main Template Manager page after a successful
change of the template parameters. To enable the template in the front page, click on the radio button on the left of the templates name and click the Default icon on the upper right.
Figure 5-21. The default template function in the Template Manager.
5. Refresh your browser you should now see the new template on the front page.
91
Figure 5-22. The new template enabled on the front page.
MODULE MANAGEMENT
Now that we have a new template installed and enabled, we need to further enhance the front page by using modules.
1. Go to Extensions -> Module Manager. The Module Manager page will be displayed
and it lists all available modules.
Figure 5-23. The Module Manager page.
92
2. To add a new module, click the New icon in the upper right of the page.
Figure 5-24. By clicking the New icon, a new module can be added.
3. A page with different modules will be displayed. Select Login to add a login module.
Figure 5-25. The module selection page.
4. Once you are done with the module selection, you will be forwarded to a module edit page that have module-related form fields. Enter the following required information: Title: The title you want to use for the module.
93
Show Title: Set to Yes to show the module title in the front page. Selecting No will only show the module without the title. Enabled: Set to Yes to show the module in the front page. Selecting No will unpublish the module and make it unavailable for viewing on the website. Position: Select the position where you want the module placed in the website. Access Level: Set the access level of the module and it will only be accessible to users with the access level you selected. The default setting is Public.
Figure 5-26. The new module creation page.
The rest of the fields are optional. Click Save in the upper right of the page. 5. You will be brought back to the main Module Manager page with the newly-added module in the list.
94
Figure 5-27. The Module Manager with the newly-added module listed in the page.
6. Refresh your browser you should now see the Login module on the left sidebar of the front page.
Figure 5-28. The Login module on the left of the front page.
7. Go back to the Module Manager and add another module the Search module.
Instead of using the default left position, select right then save.
95
Figure 5-29. The Search module chosen on the module selection page.
8. Refresh your browser you should now see the Search module on the right sidebar of the front page.
Figure 5-30. The Search module on the right of the front page.
9. To edit a module, tick the checkbox on the left of the modules name and click the
Edit icon on the upper right. It will take you back to the module form edit it and save.
96
Figure 5-31. The edit function in the Module Manager.
10. To delete a module, tick the checkbox on the left of the modules name and click the
Figure 5-32. The delete function in the Module Manager.
11. To make a copy of an existing module, tick the checkbox on the left of the modules
name and click the Copy icon on the upper right.
97
Figure 5-33. The copy function in the Module Manager.
Congratulations! You have successfully customized your Joomla-based website. Consequently, you have finished all five basic Joomla tutorials good luck on managing your new website.
98
Conclusion
The training design for teaching Joomla to beginners is made up of five modules which considered the minimal technical competency of its end users. For actual rollout, these five modules can be grouped together and presented into a 3-day training session as follows: 3-DAY TRAINING DESIGN Day 1 Module 1 Introduction Module 2 Installation & Setup Day 2 Module 3 Administration Day 3 Module 4 Content Management (Part 1) Module 5 Content Management (Part 2) Due to time constraint of the rollouts, the training design in this guide covers only the basics. Advanced topics (e.g., security, template framework) may be written as another guide geared for more technical end users (i.e., system administrators, webmasters).
99
ACKNOWLEDGEMENT
Reine Sison-Gagno Author Robert JA Basilio Jr. Editor
100

Joomla Manual

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Joomla Manual

Hochgeladen von

Copyright:

Verfügbare Formate

Educators Guide to Content Management Systems Using

Joomla Open Source

A Modular Approach, Beginner Level

About the iSchools Project

Icons by DryIcons http://dryicons.com

Cartoon from ProjectCartoonhttp://www.projectcartoon.com

How to Use This Guide Module 1 Introduction

Module 2 Installation & Setup

Module 4 Content Management (Part 1)

Module 5 Content Management (Part 2)

A Modular Approach, Beginner Level

How to Use This Guide

Educators Guide to Content Management Systems

What do you need to accomplish?

INTRODUCTION TO CONTENT MANAGEMENT SYSTEMS

PREPARATION OF SYSTEM AND DEVELOPMENT TOOLS

Apache with PHP and MySQL

A Modular Approach, Beginner Level

Educators Guide to Content Management Systems

A Modular Approach, Beginner Level

Figure 1-4. Selected Apache packages are highlighted in green.

Educators Guide to Content Management Systems

A Modular Approach, Beginner Level

Figure 1-8. Selected PHP packages are highlighted in green.

Inset: The keyword search for php5-mysql.

Educators Guide to Content Management Systems

A Modular Approach, Beginner Level

Figure 1-12. Selected MySQL packages are highlighted in green.

Educators Guide to Content Management Systems

Figure 1-14. A dialog box confirming the installation of selected packages.

Figure 1-15. The package manager downloads all selected packages.

A Modular Approach, Beginner Level

Figure 1-16. A dialog box requesting for a root password in MySQL.

Figure 1-17. A dialog box confirming the root password in MySQL.

Educators Guide to Content Management Systems

Figure 1-18. A dialog box confirming installation of all required packages.

Figure 1-19. The PHP module is enabled using a terminal window.

A Modular Approach, Beginner Level

We then shift from the user directory to the Apache directory:

sudo a2enmod php5

sudo /etc/init.d/apache2 restart

Figure 1-20. A browser window with the words It works!

Educators Guide to Content Management Systems

Module 2 Installation & Setup

What do you need to accomplish?

INSTALLATION OF JOOMLA 1.5.x

Figure 2-1. The Joomla website. A Modular Approach, Beginner Level

Figure 2-2. The Joomla download page.

Figure 2-3. A dialog box confirming to save the file.

Educators Guide to Content Management Systems

sudo chown user:user Website

A Modular Approach, Beginner Level

Figure 2-5. A new Website directory is created in your user directory.

Figure 2-6. The Joomla installer inside the Downloads directory.

Educators Guide to Content Management Systems

A Modular Approach, Beginner Level

Figure 2-10. The first page of the Joomla installation.

A Modular Approach, Beginner Level

Educators Guide to Content Management Systems

Figure 2-15. The License page.

Figure 2-16. The Database Configuration page.

A Modular Approach, Beginner Level

Figure 2-17. The FTP Configuration page.