Basic Joomla: Creating the ABC Website Mr. Jun Dolor

Outline Joomla defined Setting Up/ Installing Joomla Sections, Categories and Articles Managing Users Managing Web Links Managing News Feeds Managing Menus for categories, contacts, web links and news feeds Adding the Search Box Managing Modules for syndicate, login, news flash and breadcrumbs Managing Templates

Joomla Defined: Joomla is an award-winning content management system (CMS), for building Web sites and powerful online applications Features that made Joomla popular includes ease-of-use and extensibility Joomla is an open source solution that is freely available to everyone CMS: A content management system is software that keeps track and organizes resources on the website Resources includes text, graphics, video or just about anything accessible on websites

Setting Up Joomla Requirements to run Joomla Packages available: Apache Web Server PHP MySQL Packages available: LAMP (Linux Apache MySQL PHP) WAMP (Windows Apache MySQL PHP) MAMP (MacOS Apache MySQL PHP) Note: For the duration of the training, it is assumed that WAMP is the package installed Download Joomla/ Place in root directory

Download Joomla/ Place in root directory Browse Joomla website at www.joomla.org Look for Download button Click and save to local computer Note: Package in .zip format will be saved to local computer Extract the .zip package Note: This will extract contents to a folder named Joomla Copy the extracted folder to root directory of web server Note: For WAMP, the directory path is c:\wamp\www Start WAMP services Open a browser On the address bar, enter “localhost/joomla” Note: This will start the installation of Joomla

Installing Joomla On the first step of the installation, the language to be used is to selected. Select language en-US and click Next The second step is displayed, Go over the Pre-Install Check to see that all items except Display Errors are in green Click Next The third step brings the GNU review Go over the agreement

Installing Joomla- Part 2 The fourth step is displayed; enter parameters as follows: Host: localhost Username: root Database Name: ABC_Joomla Note: During installation process, user may enter and database name of his/ her choice Note: For purposes of discussion, “ABC_Joomla” is used Click Next The fifth step is displayed This sets the FTP settings Click Next to skip

Installing Joomla- Part 3 The sixth step is displayed; enter parameters as follows: Site Name: ABC Company Your Email: <<use your personal email>> Admin Password: <<use password of your choice>> Note: Do not click Install Sample Date; the discussion will provide the data Click Next

Installing Joomla- Part 4 The installation is just about finished As instructed by Joomla, go to the desktop, look for the directory path of the Joomla installation and remove the “Installation” folder Note: On WAMP installation the directory path is c:\wamp\www\joomla From the desktop, switch back to the browser and click “Site” link Note: This now brings the Joomla managed website

Sections, Categories, Articles Joomla organizes information in the heirarchy: Section >> Category >> Articles Example 1: Section: Products Categories under Products: MP3 Player, Mobile Phone Articles Under MP3: iPod, Creative Zen Micro Articles under Mobile Phone: Nokia, iPhone

Sections, Categories, Articles- Part 2 Example 2: Section: Car Categories under Car: Honda, Toyota Articles under Honda: Civic, Accord, Jazz On the browser, open a new tab and go to Joomla administration login of the website Enter “localhost/joomla/administrator” Enter username “admin” and password specified in step six of the installation Once the login verifies the username/ password, the Control Panel is displayed

Sections, Categories, Articles- Part 3 Switch to the Section Manager Click “Section Manager” on the Control Panel Pull down the “Content” menu and select “Section Manager” Add the sections: “Corporate” “Product” Note: To switch back to the Control Panel, pull down the “Site” menu and select “Control Panel”

Sections, Catergories, Articles- Part 4 Switch to the Category Manager If in the Control Panel, click “Category Manager”, or: Pull down the “Content” menu and select “Category Manager” Under the section “Products”, add the categories: “Mobile Phone” “MP3 Player” “Game Console” Under the section “Corporate”, add the categories: “President” “About the Company” Note: To switch back to the Control Panel, pull down the “Site” menu and select “Control Panel”

Sections, Categories, Articles- Part 5 Switch to the Article Manager If in the Control Panel, click “Article Manager”, or: Pull down the “Content” menu and select “Article Manager” Under the category “Mobile Phone”, add the following articles: “Nokia” “Samsung” “Sony Ericsson” “Motorola” “iPhone”

Section, Categories, Articles- Part 6 Under the category “MP3 Player”, add the following articles: “iPod” “Creative Zen Micro” “MSI Mega Player 530” “RCA H116” “iRiver H10” Under the category “Game Console”, add the articles: “Microsoft X-Box 360” “Atari 2600” “Nintendo 64” “Playstation 2” “PSP”

Section, Categories, Articles- Part 7 Under the category “President”, add the article “News from the President” Under the category “About the Company” add the articles: “Background” “Mission/ Vision” “Location” Note: Select any two from each category from the section “Products” for display on home page Note: To switch back to the Control Panel, pull down the “Site” menu and select “Control Panel”

Managing Users and Contacts Aside from the admin, Joomla allows for creation of users who can modify the contents: Pull down the “Site” menu and select “User Manager” Create the following users with their levels: President: Admin PR Director: Admin Production Manager: Manager Note: In a later section, a login will be created for the users

Managing Users and Contacts- Part 2 Contacts provide a means of web visitors to send messages to the users Pull down the “Components” menu, point to “Contacts” and select “Categories” Create category “Corporate” Click “Contacts” tab Create the following contacts with the category “Corporate” “President” “PR” “Prod Manager” Note: Be sure to link to corresponding user Note: In a later section, a “Contact Us” link will be created for the contacts

Managing Web Links Joomla provides a means for creating links to external websites Pull down the “Components” menu, point to “Web Links” and select “Categories” Create the category “Partners” Click “Links” tab Create at least three website links under the category “Partners” Note: In a later section, a “Our Partners” link will be created for the web links

Managing News Feeds Joomla provides a way to display updated contents from other websites thru rss Pull down the “Components” menu, point to “News Feeds” and select “Categories” Create the category “Phil News” Click “Feeds” tab Create the “Inquirer” feed under the category “Phil News” Open the website www.inquirer.net on a new tab on the browser Click the “RSS” link Click any RSS option available Copy the url Switch back to the Joomla Administration Paste in the “Link” field Note: In a later section, a “Local News” link will be created for the news feed

Managing Home Menu At the moment, only the “Home” link can be found on the menu Joomla provides a way to manage menus Pull down the “Menus” menu and select “Main Menu” Click “Home”

Managing Home Menu- Part 2 Parameters (Basic) are as follows: Leading: Number of article intros to display on the front page with a “read more” link to see the entire article. These articles stretches the entire width of the news box. Intro: Number of article intros to display on the front page with a “read more” link to see the entire article. These articles fills only the width of one column, not the entire page. Columns: Number of columns in which articles are to display Links: Number of articles to display only as links at the bottom of the page

Managing Home Menu- Part 3 Parameters (Advanced) Select “Show Feed Link” Parameters (System) Select “Yes” on Show Page Title Change Page Title to “ABC Info”

Managing Category Menu Pull down “Menus” menu Select “Main Menu” Click “New” Select “Articles” Select “Category Blog Layout” Parameters (Basic) Title: “About ABC Co” Select category “About the Company” Repeat the procedure for the categories in “Product” section

Managing Contacts Menu Pull down “Menus” menu Select “Main Menu” Click “New” Click “Contacts” Click “Contact Category Layout” Provide the name “Contact Us” Parameters (Basic) Select category “Corporate” Select “No” on Show Feed Link Parameters (System) Change Page Title to “Contact Us”

Managing Web Links Menu Pull down “Menus” menu Select “Main Menu” Click “New” Click “Web Links” Click “Contact Category Layout” Provide the name “Our Partners” Parameters (Basic) Select category “Partners” Select “No” on Show Feed Link Parameters (System) Change Page Title to “Our Partners”

Managing News Feeds Menu Pull down “Menus” menu Select “Main Menu” Click “New” Click “News Feeds” Click “Contact Category Layout” Provide the name “Local News” Parameters (Basic) Select category “Phil News” Select “No” on Show Feed Link Parameters (System) Change Page Title to “Local News”

Adding the Search Box Pull down “Menus” menu Select “Main Menu” Click “New” Click “Search” Provide the name “Local News” Parameters (System) Change Page Title to “Search the site”

Managing Syndicate Module Modules are sections that lie in pre-defined boxes along each page around the main content Pull down the “Extensions” menu and select “Module Manager” Click New Select “Syndicate”, click Next Name: “RSS” Position: “Syndicate” Menu Assignment: All except “Search”, “News Feeds”, “Web Links”, and “Contacts”

Managing Login Module Pull down the “Extensions” menu and select “Module Manager” Click New Select “Login”, click Next Title: “Login” Position: “Left”

Managing News Flash Module Pull down the “Extensions” menu and select “Module Manager” Click New Select “Login”, click Next Title: “Latest News” Position: “Top” Select category “News from the President” Title Linkable: “Yes” Show Title: “Yes”

Managing Breadcrumbs Module Pull down the “Extensions” menu and select “Module Manager” Click New Select “Breadcrumbs”, click Next Title: “Breadcrumbs” Disable Title: “Yes” Position: “breadcrumbs”

Managing Templates Pull down the “Extensions” menu and select “Template Manager” Check “rhuk_milkyway” Change color scheme to green Save and preview Click HTML Note: <jdoc:include type=“module” name=“top” /> tag defines positions for position-name Set template to beez: Note: this template is layout in CSS