Majik Graphics Web Design

Joomla 1.0.x Tutorial Bookshelf

This set of tutorials shows how to install a complete Joomla site. Screenshots are provided for each step.

The tutorials illustrate the installation using a Windows XP desktop and a Unix web server. Since the desktop is only used for transfering and editing files, and most of the actual setup takes place in a browser, these tutorials should be useful for users of other operating systems than Windows, since the operations will be similar.

The tutorials can be viewed in any modern browser. Javascript is required for some functions, such as search.

The tutorials are meant to provide step by step instruction for beginners, although there are a few basic prerequisites:

1. Readers should understand basic computer functions including how to download and install software
2. Readers should understand what a computer file is, and how to copy and delete files
3. Readers should have at least a very basic understanding of what HTML is.

Number #2 seems to be a stumbling block for many computer users who have picked up computer knowledge without any formal training. If you don't know exactly what a computer file is, check out this set of computer beginner tutorials. Knowing the basics of files makes a lot of other computer knowledge much easier to understand.

Joomla is a web application that makes it easy for groups of people to build a website.

In fact Joomla is so easy to use that it is a good tool for even a single individual to use when building a web site.

Applications like Joomla are called "Content Management Systems" (CMS). You can read more about CMS at Wikipedia .

Two of the other more popular CMS applications are Plone and Drupal . Joomla is probably the easiest to use and best supported of the more popular CMS applications.

Installing Joomla is simple. It basically involves the following steps:

1. Get the Joomla package
2. Unzip it and transfer the files to your site
   -or-
   Transfer the package to your site and unzip and untar it
3. Run the install program from your browser
4. Modify some file permissions on your server
5. Copy the config file to your server
6. Delete the install directory

This tutorial will cover the first two steps, and the next tutorial in the series will cover the rest of the steps.

Joomla is a PHP program. Your server needs to have PHP installed. The installation tutorials will show how to install Joomla on a Unix based machined with PHP installed. Most hosting providers that are running Unix have accounts available with PHP installed.

In this tutorial, we will finish setting up Joomla. You'll first need to get a mysql login from your hosting provider. Mysql is an open source database. Most hosting providers provide a simple means of setting up a mysql database on your server. You'll need to set up the database, and then save the database name, the database username and the database password.

After that, completing installation is very simple. We're going to

1. Change some file permissions
2. Enter the database information
3. Copy the configuration file to the server
4. Delete the install directory

And then we're done with the base installation.

This set of tutorials is demonstrating installing Joomla into an actual site with preexisting content. The site is NYCircuits Inc, a New York city software consultancy. This is a comparatively simple corporate site, so we want to change the template to something more streamlined than the default template.

There are a number of template libraries for Joomla. There are many free templates, and also templates for which a fee is charged. For a list of template sites, see the first tutorial in this series, or search for "Joomla templates" in Google or another search engine.

Let's get the site basically setup with minimal content. The first step is just to unpublish the modules that we don't want to display. This is a simple matter of looking at a list of modules and clicking on an "unpublish" icon.

First for this site we want to remove the Newsflash item from the top of the page.

Scrolling down to the bottom we see that there is a notice about Joomla. We'll remove that. However, this notice is not contained in a module but is in a php file.

For the next step, we'd like to change the design of the header area a bit, including changing the graphic. Here's the site as it looks now.

Here's the site as it looks now.

We need to make a few more changes to index.php. The logo image isn't centered, and there is too much space wasted at the top.

What's left in the design to fix?

The menu items are a bit crowded. Let's space them out a bit.

The previous tutorial had quite a number of steps. Often, installing a template is considerably simpler, but the previous tutorial demonstrated making a number of fixes to the template.

At this point you have all of the knowledge not only to edit a template but to create your own.

Let's review what was learned in the previous tutorial.

We have finished the basic design of the site, now we just need to add content.

Since Joomla works by tying content to menu items, we only need to figure out

1. what menu items we want
2. what we want to have displayed for each menu item.

We only have one menu at the moment, the main menu on the left, so we just need to figure out what entries we want there, and what should show when a menu item is clicked on.

Here is our new site as it looks at this stage of development. We've choosen a new template and edited it. We've also removed modules we don't need. All of the site content at this point is just default filler content inserted by the Joomla installer.

We're ready to start adding some of our own content to the site. First we'll add the content, and then we'll add the menu items to point to it. We need to add the content before we can create the menu items.

Here we are back in the Joomla Administrator page.

We've added a new Section and Category. We're now ready to start creating content items.

Choose Content By Section - Services - Services Items.

We'll now add a menu item to point to the article (regular content item) that we just created. In the Joomla Administrator, choose Menu - Menu Manager.

Here's another look at the site we have so far. There are items on the Home page that are added by the installer. Let's remove those.

In the last tutorial, we removed all the content we didn't want, but now the home page is empty.

Looking at our Home page, we see that the Latest News component is showing the same list of items as is displayed on our Home page.

In our last tutorial we added an entry in the News section. We now want to add a menu entry in a main menu called News, pointing to a list of all of our news items.

First, let's return to the Content Items Manager and add another news item so that our list won't just have one item.

Here you can see that one more item has been added.

We only need to add one more menu entry, and we'll have the minimum amount of content to launch our site. We need to add a contact page. We'll use the Contact Component for this.

A Joomla Component is generally something that gets displayed in the content area of the page and that is more than just some text and pictures. Our menu item is going to point to a component rather than pointing to an article or a list of articles.

We now have the minimum amount of content and design finished to take the site live to the public.

Here's the site currently at the www.nycircuits.com address:

Joomla! is a powerful platform, but the default installation represents only a fraction of the power of Joomla. Many Joomla! extensions exist thanks to a design that makes it easy to create new Joomla components and then add them to an existing installation.

This set of tutorials will cover some of the most useful Joomla! extensions.

For a categorized, comprehensive directory  of extensions with reviews and ratings, see http://extensions.joomla.org/

This tutorial will cover installation and use of the OpenSEF component.

SEF = "Search Engine Friendly". The OpenSEF component creates easy-to-read URLs.

A URL is a web page address. (URL = "Uniform Resource Locator")

Right now, our new Joomla site has URLs that look like this:

http://www.nycircuits.com/index.php?option="com_content"&task="view"&id="12"&Itemid="26"

We'd like the above URL to look more like

http://www.nycircuits.com/about_xsl.htm

OpenSEF allows us to create these "Search Engine Friendly" URLs.

OpenSEF can be found at www.open-sef.org.

Here's the OpenSEFConfiguration screen again.

Here is our site at the current stage of development.

It looks a bit bare. We'd like to add some more graphics to the main page.

Adding graphics to the site content is much easier with the JCE (Joomla Content Editor) Component, a replacement for the default editor. The JCE  is much more powerful and easy to use than the built-in Joomla editor.

In this tutorial we'll get an introduction to the JCE in action, by showing how easy it is to add graphics to content with the JCE.

Here's another look at the home page as it is now. We'd like to add some graphics to the content items on the front page.

Here we at the Joomla Extensions Directory again. We

1. searched for "Joomap"
2. found a listing for "Joomap"
3. will download the component.

This component will automatically build a sitemap for us. We don't have a lot of pages yet, but as we add content, the sitemap is a nice feature to have. A sitemap ensures that users - and search engines - can easily reach any page on your site.