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
– 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
– Click Next
 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