Joomla! Installation 

Notice: The following steps will guide you through the installation process that will enable you to build a site using Joomla!. These instructions are valid only after your instructor has added a joomla folder to your student web folder.

1. Open Internet Explorer or Firefox. Go to hs-web-class/web_students/yourlastname_yourfirstname/joomla.  (ex, hs-web-class/web_students/smith_tom/joomla)
    
2. Language. Select your language (English - US). Press the Next button.
    
3. Pre-Installation check. If there are no red items on this page press the Next button.
    
4. License. Read over the license and then press the Next button.
    
5. Database configuration: (use the following values)
   • Database type: mysql
   • Host Name: localhost
   • User Name: joomla_user
   • Password: joomla_pass
      
6. Database Name: use your school username that you use in class to login (This will cause the computer to create a database with your username on the mysql server. Come back to see me if you actually want to know what this means.)
    
7. FTP Configuration: this section does not apply to our classroom web server type so you can just press the Next button to skip this screen.
    
8. Main Configuration:
   • Site Name: enter a name such as ‘Lawless Joomla Tutorial’. (don't worry, this can be changed later when you are building your site)
   • Confirm the Admin E-mail Address and Password: use any personal email account that you already have such as a Gmail account and your usual school password.
   • Press the Next button
   • Press the OK button in the dialog box that says "No sample data or other..."
      
9. Load Sample Data, Restore, or Migrate Backed Up Content. Press the Next button to skip this screen.
    
10. Warning Message. Delete the installation folder. To delete the installation folder you can use any previous site (css tutorial, bio, fan club, or mixed media)  that you created previously using Dreamweaver.
    • Minimize (but do not close) the browser (IE or FF).
    • Open Dreamweaver
    • Open any previously completed site.
    • Connect to the web server and then display the remote server folders exactly as if you were going to FTP items to the site on the web server.
    • Find the joomla folder.
    • Open the joomla folder and locate the installation folder.
    • Select the installation folder and delete it.
    • Disconnect from the web server and exit Dreamweaver.
       
11. Return to the browser (IE or FF).
     
12. Locate and press the Site button. You are now viewing your empty web site. To create the content (web pages) for the site you will need to use the Content Management System (CMS) that is built in to Joomla!.
     
13. Enter your site's admin area. In any browser (FF, IE) go to: hs-web-class/web_students/yourlastname_yourfirstname/joomla/administrator/
     
14. Login to the admin area.
    • Admin Login name: admin (this is the default login name and it can't be changed)
    • Admin Password: (should be your usual school password if you followed the directions)
       
15. After finishing the installation of Joomla! you should return to the Joomla! Assignment.

Uploading a Template

1. From the Extensions menu select Install/Uninstall.
2. In the Upload package File area press the Browse... button.
3. Navigate to J: Lawless/Hand-Out/Web Design/joomla templates
4. Select a template and press the Open button
5. Press the Upload File & Install button.

Changing the Default Template of your web site

1. From the Extensions menu select Template Manager.
2. Select the option button for the template you wish to use.
3. Press the Default button

Create an Article

1. From the Content menu choose Article Manager. Press the New button.
   
    
2. Give the Article a title. Leave the Alias blank (the computer will fill this in when you save the article). Choose the appropriate Section. Choose the appropriate Category. Set the Published option button to Yes.
   
   (NOTICE: IF THIS ARTICLE IS TO BE ON THE FRONT PAGE OF THE SITE then set the Front Page option button to Yes and the Section to Uncategorised. After finishing the front page article you should return to the Joomla! Assignment.)
   
   
    
3. In the text editing area write (or paste) your article. Include at least one image.
   
    
4. Press the Save button.
    
5. After adding the four articles return to the Joomla! assignment.

Upload an Image
 

1. First, find images for your project. Right-click on an image from the Internet and save the image somewhere on your computer. The desktop is a good place to save the image because it will make it easy to find during the next steps.
    
2. From the Site menu choose Media Manager. Open the Stories folder (by default Joomla! places all web article images in this folder)
   
    
3. To keep your photos organized you will want to keep them in folders. In the New Folder text area, enter an appropriate name for a new folder that will hold your images. For example if my pictures are about winged aircraft then I might want to name the folder winged_aircraft. Press the Create Folder button.
   
   
    
4. Click on the folder you just created to open it.
    
5. Click on the Browse button located near the bottom of the page.
    
6. Browse to your images, select an image and press the Start Upload button. A copy of the image is now placed on the web server in the folder you created. The image you see is a miniature (thumbnail) of the image. If you click on the thumbnail image it will display a full size version.
   
   
    
7. To include an image in a Section, Category or Article you will need to leave the Media Manager and return to either the Section Manager, Category Manager or Article Manager. Select the section, category or article that will have the image. Place the cursor in the text editor where you want to insert an image. Press the Image button located in the bottom left corner of the text editor.
   
   
   
   Navigate to the image to be inserted into the web page. Set the image URL by clicking once on the image.  Add a title if desired and select the Caption button. Press the Insert button.
   
    
8. When finished with the Section, Category or Article description, press either Apply or Save. (Apply will save the work but lets you remain in the editing area. Save will save the work and leave the editing area.)
   
   
    

Joomla! - Making Menus

Main Menu

By default Joomla! starts with a main menu. It will already have a Home menu item. You will add links (menu items) into the main menu for each Section, Category or Article in your web site.

The image below shows the relationship of the Sections, Categories and Articles created for the Joomla demo site. These are the items that will be used to create the menu.

From the Menus menu select Menu Manager. Press the Menu Item(s) icon...

...to enter the Menu Item Manager.

Working with Menu Items

Each menu item that you create will be linked to either a Section, Category or Article.
 

1. Press the New button. Select the Internal Link item. Select the Articles link. If the link will be directed to a Section then choose the Section Layout item. If the link will be directed to a Category then choose the Category List Layout. If the link will be directed to an Article then choose the Article Layout.
   
    
2. Enter a title for the Section Layout menu item. This is the name that will appear in the menu. For example, Fixed Wing is a Section in the All About Aircraft site so Fixed Wing would be an appropriate entry. Leave the Alias blank (auto-filled by computer when you save). Leave the Link blank (auto-filled by computer when you save). Display in Main Menu (the only menu in our site). Select (click) the appropriate Parent Item. If the link is to a Section the Parent Level is Top. If the link is to a Category the Parent Item to select would be the Section that the Category belongs to. If the link is to an Article then the Parent Item would be the Category that the Article belongs to. Select Yes for Published. Select Public for Access Level. Select Parent Window with Browser Navigation for On Click, Open in:.
    
3. On the right side of the screen select the Parameters (Basic) panel.
   • If the link is to an Article then select from the dropdown an article you wrote.
   • If the link is to a Category then select from the dropdown a Category you created.
   • If the link is to a Section then select from the dropdown a Section you created.
     
      
      
4. On the right side of the screen select the Parameters (System) panel. Enter a page title. This is the name that will appear in the title bar of the browser.
   
    
5. Press the Save button.
    
6. After adding the menu items return to the Joomla! assignment.

Modules

A Module is a tool that allows you to place menus, login forms, polls and other elements on the web site. With a Module you can set where and when an element will appear. Each menu, poll or other various items that you want to appear on your site will need to be assigned to a Module.

1. From the Extensions choose the Module Manager. Press the New button.
   
    
2. Select the type of Module that corresponds to the element it will hold. For example, a Menu Module will hold a menu element and a Poll Module will contain a Poll element. If you press the Option button in front of the Module type, then you will need to press the Next button. If you click on the name of the Module type, the computer will automatically move to the next screen.
   
    
3. Fill in the Details area as follows:
   • Title: give the Module a name that corresponds to the element it is assigned to. The title will appear above the module on the web page if the Show Title option is Yes.
   • Position: (may depend on the template you are using)
     • left: module will appear on left side of page.
     • right: module will appear on right side of page.
     • user3: module will appear in nav bar near the top of the page.
   • Order: the order that the module will appear in on the page with the other modules on that page.
   • Access Level: Public (available for all users), Registered (available for registered users only)
      
     
      
4. Fill in the Menu Assignment area as follows:
   • For the Menus options choose one of these:
     • All: module will appear on every page in the site (mostly used for menu modules)
     • None: module will not appear in the site
     • Select Menu Item(s) from the list: Then from the Menu Selection: use the option key and click on each menu item on which you would like to have the module appear. For the Poll Module that is being placed in your Joomla! project select Home so that the Poll only appears on the home page of the site.
        
        
5. Fill in the Parameters area as follows:
   • In the Module Parameters select the poll from the Poll drop-down item.
     
      
6. After adding the module return to the Joomla! assignment.

Create a Section

Sections are a way of grouping together areas of your web site. For example, if you were building a web site about aircraft you might have a section of the site that has information about aircraft with fixed wings (not balloons or helicopters). You could name this section Fixed Wing. You may have another area of the site that has information about helicopters. You could name this section Rotary Wing.

Image 1: Web page displaying the Section Description for the Rotary Wing Section

1. From the Content menu choose Section Manager.
2. Press the New button.
   
    
3. Give the Section a title. For example, Rotary Wing from the example described above would be a Section title. Leave the Alias blank. Published should be left on Yes so that it is visible to the public. Access Level should be Public so that anyone who visits the site can see the section. Do not select an image or image position.
   
    
4. Give the Section a Description. The description will be typed (or pasted) into something called a text editor. It is essentially a mini word processor. The description is the text and images that will appear on the web page when someone visits your Section page. In Image 1 near the top of this page you will see the section description text about rotary aircraft and an image of a helicopter. To make this project less time consuming please feel free to copy text information (not images) found on the Internet and paste it into the text editor area. If images do get pasted along with the text please delete them. There is a better way to add images that you will learn in the next step.
   
   
    
5. Add at least one image to the description. (see Uploading Images section above)
    
6. Press the Save button.
    
7. After adding the three sections required for this project return to the Joomla! assignment.

Create a Category

Categories are a way of breaking Sections into smaller groups. Using our aircraft site for example, the Fixed Wing section could be broken into aircraft with Propellars and aircraft with Jet engines. The Lighter Than Air section could have the categories Helium Filled Balloons and Hot Air Balloons.

Image 1: The Propeller Category of the Fixed Wing Section

1. From the Content menu choose Category Manager. Press the New button.
   
    
2. Give the Category a Title. For example, Propeller. Leave the Alias empty (the computer fills this in when you save). Published should be Yes. Choose the appropriate Section from the dropdown list. (Fixed Wing in this example because the Propeller Category is a part of the larger Fixed Wing Section). The Category Order can be left as it is currently. Access Level should be left on Public so that all visitors to your site will be allowed to see the Caetgory Description. Do not add a Category Image. Since we have not selected a Category Image we can Ignore the Image Position .
   
    
3. Give the Category a Description. The description will be typed (or pasted) into the text editor. The description is the text and images that will appear on the web page when someone visits your Category web page. To make this project less time consuming please feel free to copy text information (not images) found on the Internet and paste it into the text editor area. If images do get pasted along with the text please delete them.
   
    
4. Add at least one image to the description. (see Uploading Images section above)
5. Press the Save button.
6. After adding the six categories return to the Joomla! assignment.

Adding a Login Module will allow you to register users (members) for the site. The registered users may be granted access to areas in the site that are not available to nonmembers.

To add a Login Module:

1. From the Extensions menu select Module Manager. Press the New button.
   
    
2. Press the Login link to continue or select the option button for Login and press the Next button.
   
    
3. Details area:
   • Title: Member Login (or something similar)
   • Show Title: Yes
   • Enabled: Yes
   • Position: (generally Right or Left works best)
     
     
      
4. In the Menu Assignment area:
   • Select the option for Select Menu Item(s) from the List
   • In the Menu Selection area click on the Home menu item (this choice means that the login item will appear only on the home page of the web site)
     
      
5. Press the Save button.
    
6. After adding the login module return to the Joomla! assignment.

Creating a Poll
 

1. From the Components menu choose Polls. Press the New button.
   
    
2. Give the Poll a title. The title is generally a question of some sort. Choose a lag time. Use a short time such as 5 so that you can vote often to test the poll in the web site.
   
    
3. In the Options area, enter each of the possible responses to the poll.
   
    
4. Press the Save button.
    
5. After adding the poll return to the Joomla! assignment.