WEB

DEVELOPMENT
WITH JOOMLA

www.joomla.org

WEB DEVELOPMENT WITH JOOMLA

Table of Contents
UNIT 1 :
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson

UNIT 2 :
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson
Lesson

UNIT 3 :
Lesson
Lesson
Lesson
Lesson

UNIT 4 :
Lesson
Lesson
Lesson
Lesson

Page Number

1:
2:
3:
4:
5:
6:
7:

WEBSITE CONTENT MANAGEMENT..................

Introduction to Joomla .............................................
Using Template
...........................................
Working with Content ...........................................
Working with Image
...........................................
Section and Categories .........................................
Creating Menus
..........................................
Other Utilities of Joomla ........................................

3
5
26
34
41
48
54
56

1:
2:
3:
4:
5:
6:
7:

WEBSITE CONTENT ENHANCEMENT................ 64

Planning the Design ................................................ 66
Components and Elements of a Template ............ 75
Creating Template from Scratch ............................. 79
Joomla Extension in Dreamweaver ......................... 88
Creating the CSS Layout Template ........................ 92
Creating the XML File .............................................. 120
Create a Template Thumbnail ................................. 122

1:
2:
3:
4:

SOCIAL NETWORKING WEB DEVELOPMENT .. 127

Introduction to Social Networking Sites ................... 130
Planning and Designing the Website ...................... 133
Building the Social Networking Website ................. 142
Building the SNW (Part II) ....................................... 145

1:
2:
3:
4:

E-COMMERCE WEB DEVELOPMENT ............... 153

E-Commerce Basic Concepts ................................. 156
Sample Store and Virtuemart .................................. 159
Project Planning - Planning the e-Store................... 162
Building the e-Store
............................................ 162

REFERENCES ................................................................................ 178

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 2

WEB DEVELOPMENT WITH JOOMLA

Course Description:
The course removes the myth behind web development. It presents web development as
something that is for everyone and not only the experts. The course makes use of
JOOMLA, an open source Content Management System as a platform for making and
maintaining a website. Students are expected to learn to organize their thought and
materials into a presentable website for school, business or personal use.

What would they know?

Students get familiar with website terms, Joomla extensions and user account

What can they do?

Students are able to manipulate common Joomla features

What habits will they form?

Students give high importance to proper style and develop creativity in developing website

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 3

WEB DEVELOPMENT WITH JOOMLA

ESTABLISHED GOAL :
Students will demonstrate understanding of the Process and delivery of a quality website
for his/her school, business or personal use through:
Creativity and Innovation NETS 1d identify trends and forecast possibilities.
Communication and Collaboration NETS 2b communicate information and ideas effectively
to multiple audiences using a variety of media and formats.
Research and Information Fluency NETS 3c & d evaluate and select information sources
and digital tools based on the appropriateness to specific tasks; process data and report results.
Critical Thinking, Problem-Solving & Decision Making NETS 4d use multiple processes
and diverse perspectives to explore alternative solutions.
Digital Citizenship NETS 5b exhibit a positive attitude toward using technology that supports
collaboration, learning, and productivity.
Technology Operations and Concepts NETS 6b select and use applications effectively and
productively.

ESSENTIAL UNDERSTANDING :
The learners will understand that managing an existing school website needs to undergo
evaluation to modify the web content and layout
The learners will understand that website content can be from different resources to meet the
needs of the viewers

KNOWLEDGE AND SKILLS:

The learners will know the Joomla terms, control panel icons, elements, and extensions.
Joomla screen and Types of users with their access and permission. Steps in; setting and
changing a default template and it's layout, modifying a content and content layout, inserting an
image. Adding, deleting and renaming a section and category. Creating and linking a menu
The learners will be able to define important terms used in Joomla, familiarize the elements,
control panel icons, Joomla extensions, Joomla screen and types of user account. Identify the
procedures or methods in modifying a content and content layout; setting and changing a
default template and it's layout; inserting an image; adding, deleting and editing content ,
section, category and menu choose and use the best information resources, procedure and
styles when developing or modifying a website

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 4

WEB DEVELOPMENT WITH JOOMLA

Lesson 1: INTRODUCTION TO JOOMLA

Joomla- What and Why
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). 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.
If you have a website and want to be able to change the content of that site easily and / or
frequently, Joomla could be a good choice for you. With Joomla, you can log in to the site and edit
the site directly in your browser. You can add new pages and these pages will automatically be
added to all navigation.
What is Joomla!?
Joomla! is a open source web Content Management System(CMS) that is very easy to setup for
beginner.
Why Joomla!?
Joomla! is very simple and easy to use. Well, you might say that Wordpress is so much easier, but
Joomla! has more functionality than Wordpress(solely for blogging). Simply say, Joomla! is totally
for nonprogrammer that want to learn web development with less effort to professional web
developer like you.

Why use Joomla!?

Because open source matters.

Who uses Joomla!?

Joomla! is used for corporate website portal, online commerce, small business websites, nonprofit
and organizational websites, government applications, school and religious website, government
application, personal and family homepage, communitybased portals, magazines and newspapers
and many more.
Developer used it for integrated ecommerce systems, inventory control systems, data reporting
tools custom product catalogs, complex business directories, reservation systems, communication
tools, application bridges and many more.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 5

WEB DEVELOPMENT WITH JOOMLA

HOW TO INSTALL JOOMLA? (source: Deodilyn Villanueva)
APPLICATION TOOLS NEEDED:
1. JOOMLA! 1.5x or Latest Version
2. XAMPP 1.7.x or Latest Version
3. MICROSOFT WINDOWS XP or Latest Version
STEP BY STEP PROCEDURE FOR INSTALLING JOOMLA:
1. Install the XAMPP
2. Extract the Joomla zip package to XAMPP directory in htdocs folder. For Example,
C:\xampp\htdocs\joomla
3. Open any web browsers e.g. Mozilla Firefox or Google Chrome and type the following:
//localhost/phpmyadmin
Then create your database.

4. After Creating your database, Now we are going to install Joomla, which is very simple:
1. Open a web browser (ie, Firefox). At the address bar type http://localhost/joomla (joomla is
my folder for joomla package). This will redirect you to the Joomla Web Installation which the
first step is choosing the suitable language.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 6

WEB DEVELOPMENT WITH JOOMLA

2. Now, press next until your reach step 4(Database).

Fill the box:

Host Name = localhost
User Name = root
Password = your mysql pass ( in this case, I Leave as blank or No password)
Database name = joomla

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 7

WEB DEVELOPMENT WITH JOOMLA

3. Click Next until you reach step 6(Configuration).

Fill in the box:

Site Name = Anything
Your Email = Anything
Admin pass(important)
Confirm admin pass
Click Install Sample Data before you continue. This is for beginner to play
around.
4. Click next and you will be notified to delete the installation directory. Delete it
from the same folder you are currently working (Joomla!\Installation)

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 8

WEB DEVELOPMENT WITH JOOMLA

After you delete it, click Admin on the top right. You will be redirected to this
page. Use your password that you created last step and login with user admin.

DELETE THIS FOLDER

5. Now try to visit http://localhost/joomla! on your web browser. By default, Joomla! use
rhuk_milkway template. You will see this template on \Joomla!\templates directory.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 9

WEB DEVELOPMENT WITH JOOMLA

6. This is what you will see inside the admin page.

As you can see, Joomla! Content Management System is very complex but user friendly.
This is the introduction to Joomla!. In next Lesson, we are going to see more on how to do
some styling on Joomla!. Until then, play around with the CMS so you can get the feeling
and the idea on how to use this open source CMS. rs.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 10

WEB DEVELOPMENT WITH JOOMLA

JOOMLA TERMS AND CONTROL PANEL ICONS
Joomla! is very rich in applications for Content Management System. This part of lesson will
introduce to you one of the Joomla main core. Its very important to know this, so you will know
what type of website that you going to make later.
MODULES
Modules are the blocks that you normally see in the left and the right hand
columns. Modules can sometimes appear in other places as well, in fact,
there are numerous module positions available for you to place your
modules. The available module positions are determined by the template
(more on templates later), so while in theory you have a lot of module
positions available, not all of them are always coded into the template and
your module will just not appear if you select a position that hasnt really been catered for.
The safe module positions are left, right, top, bottom and sometimes user1.
So what are modules exactly?
Modules are contained pieces of functionality such as a Login Box, or a Poll, or a Search
box. The whole menu system is also controlled through modules; in fact, each menu that
you see is contained within a module.

MENU

MODULES

MENU
The above screenprint is a menu grouping. Once at the top (Also called TOPMENU), the
MAINMENU and the USERMENU, at the bottom.
Joomla comes pre-installed with 4 menu groupings the three mentioned above, and one
called OTHERMENU. The point is just that you can actually create as many menu groupings
as you want, since these menu groupings are nothing other than Modules.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 11

WEB DEVELOPMENT WITH JOOMLA

CONTENT
The most important thing to know
about your content is that it is
organized in Sections, Categories
and Content Items.
So at the top we get Sections. Each
Section
can
have
multiple
Categories, and each Category has
multiple Content Items. Content Items are ultimately what you will see on your web pages.
Your content is published through a menu item, as we already mentioned. So you can
decide whether you want to show a section, with all its categories, or a category, with all its
content items, or the content items directly.
The relationship between Sections, Categories and Content Items is very straightforward,
simple and rigid. In other words, there arent any options of letting a Content Item belong to
more than one Category, or more than one Category to a Section.
Joomlas Back End Screen
Before we can access the Joomla Administration Home page we must login first.
Below is the Login Screen.

After successful login the Joomla Administrator HomePage will display on your screen. As
shown below.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 12

WEB DEVELOPMENT WITH JOOMLA

The Control Panel Icons
Control Panel is part of the opening screen of
Joomlas Back End.
Add New Article. This will take you to
the new content creating page where
you can create new content, select a
section and category and then save
the content.
Article Manager. This will take you
directly to the Content Items Manager
where you can manage all your
current Content Item.

Front page Manager. This icon can manage all of the articles.

Section Manager. This icon can create new sections, and publish/unpublish current ones.

Category Manager: This icon directs you to the Category Manager. Where you can
create a new categories and publish/unpublish current ones. You can also change which
section each category is published in.
Media Manager: This icon will allow you to manage files on your web server. You can
delete existing files or upload different ones from your hard drive. You can also create
new directories on your web servers file system.
User Manager: This icon can create new users, delete existing, change password, and
even change with WYSISWYG editor the user has the access too.
Language Manager: This icon will allow you to manage installed languages by setting
one to be the desire default.
Global Configuration: This icon has parameters that, when adjusted will effect your
entire joomla site.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 13

WEB DEVELOPMENT WITH JOOMLA

CONTENT ITEM (ARTICLE) EDITOR
Below is the Content Item (article) Editor Screen:

This is particularly useful if your content on the front end does not look the same as in your
backend editor. The problem is normally that your backend editor does not show the
following:
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 14

WEB DEVELOPMENT WITH JOOMLA

p> </p> This is a paragraph with a space in. If you are getting unexplained gaps between
your paragraphs on the front end, these are normally the culprit. You can delete these with
no particular harm, as long as you delete the full <p>.... up to the </p>

JOOMLA ELEMENTS AND EXTENSIONS

As you see, Joomla consists of various extensions of plug-ins, components, modules, languages
and templates. You can see this by pointing to Extension > Install/Uninstall manager from the
admin page.
Extensions:

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 15

WEB DEVELOPMENT WITH JOOMLA

Components
Components is the main core of Joomla. Its the advanced and complex extension inside. Joomla!.
Its like an application inside an OS. When there is a request to the Joomla! Powered website, these
components will render the specified main page. Components are the major portion of your page as
it is driven by a menu item and every menu item runs a component.
If you installing a component, you also probably installing module. (From admin page point to
Component on the top menu)

Module
A more lightweight and flexible Extension used for page rendering is a Module.Modules are used
for small bits of the page that are generally less complex and able to be seen across different
Components.
Modules are like little mini-applets that can be placed anywhere on your site.
The default of Modules are:
Site Module and Administrative Module
Plugins
Also known as mambots, these extension will handle every event that was triggered by other
extensions that was registered to. Most likely, you will ignore this most of the time. (From the admin
page point to Extension > Plugin Manager)

Templates
Simple extension. Template is easy to build and it will help a lot in customizing the website.
(From the admin page point to Extension > Template Manager)
Note: This is the basic thing that you should know inside Joomla!.
Summary:
Component: mini-application to render the main page body
Module: renders small html blocks on any page
Plugin: changes code behavior dynamically (renamed from mambot)
Language: provides language translation

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 16

WEB DEVELOPMENT WITH JOOMLA

Joomla User Types Account

Introduction to the Joomla 1.5 user access levels
Joomla has a lot of flexibility in allowing users access to write, edit and publish articles. In
Joomla terminology an article is a page in your website. In other words, if you can use an email
editor like Outlook Express you can publish pages to your website....but only if the Administrator
gives you access.
Within Joomla there are various access levels that restrict who can add content or access
restricted information such as a download page. The access levels are as follows:
There are four (4) Front-end groups available:
1. Registered
This group allows the user to login to the Frontend interface. Registered users can't
contribute content, but this may allow them access to other areas, like a forum or download
section if your site has one. Joomla 1.5 doesn't allow you to create different groups of
registered user so if you have a forum and a download section any registered user will be
able to access both. This may change with version 1.6.
There are some extentions available that claim to expand this functionality but great caution
should be taken when testing these.
2. Author
This group allows a user to post content, usually via a link in the User Menu. They
can submit new content, select options to show the item on the front page and select dates
for publishing but they cannot directly publish any content. When content is submitted by an
Author level user, they receive the message, Thanks for your submission. Your submission
will now be reviewed before being posted to the site. They can edit only their own articles
but only when that article has been published and is visible.
3. Editor
This group allows a user to post and edit any not just their own content item from the
Frontend. They can also edit content that has not been published. Still, Editor users cannot,
publish or change the publishing status of any articles, even their own.
4. Publisher
This group allows a user to post, edit and publish anynot just their own content item
from the Front-end. Publishers can review all articles, edit and change publishing options
but the can also determine when an article is ready for publication, making it visible to
Registered, Author and the Unregistered Public (depending on what visibility was chosen in
the article, of course!)
There are three (3) Administration section groups that allow access to Joomla:
1. Manager
This group allows access to content creation and other system information from the
Backend. Think of Manager users as Publishers, with Backend access. They can log in
through the Administrator interface, but their rights and access are generally restricted to
content management. They can create or edit any content, access to some Backend only
features like adding, deleting and editing Sections and Categories, editing the Front Page
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 17

WEB DEVELOPMENT WITH JOOMLA

and Menus, but they dont have any access to the Mechanics of Joomla, like user
management or the ability to install components or modules. Note that if a Manager logs in
through the Frontend interface, theyre treated just like a Publisher, with the same rights and
access.
2. Administrator
This group allows access to most administration functions. An Administrator user has
all the privileges on the back end of a Manager, but they also have access to set options on,
and install/delete components, modules and bots, User Manager access and can view the
site statistics. What they cannot do however is change, edit or install Site Templates or
make any changes to the sites Global configuration options. On login through the Frontend,
they are treated as Publishers, just like the Manager users. Interesting to note; when an
Administrator accesses the User Manager list, they will see all users at their access level or
below; in other words they can modify any user EXCEPT a Super Administrator in fact,
they will not even see Super Administrator accounts in the list! Also, they cannot create
additional Super Administrator level accounts, only a Super Admin can do that.
3. Super Administrator
This group allows access to all administration functions. Only another Super
Administrator can create or edit a Super Administrator user account. Full access to ALL
AREAS is given to Super Administrators, and once created they cannot be deleted
EVEN BY ANOTHER SUPER ADMIN! (Users with access directly to the MySQL database
may be able to manually delete these users, but it is not for the timid and can result in a full
lockout!)
Because of this, give a bit of thought to who you need to grant this highest level of
access to. Super Admins, while they cannot delete another SA can block the user from
logging in or change the password on another SA account. Like the other Backend user
accounts, SAs are treated as Publishers when they login through the Frontend interface.

Content Access Classification:

In Joomla! Content is classified by who can view/access it. There are three levels of Content
Access Classification:

Public - open to all visitors to the web site.

Registered - restricted to all seven Registered User Groups of the web site.
Special - restricted to all User Groups except Guest and Registered.

The Special Classification uses the individual Group's authority levels to determine precisely what
Special Access is actually permitted.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 18

WEB DEVELOPMENT WITH JOOMLA

How To Create New Users In Joomla 1.5.x or Latest version (source: Scott Cameron)
Description:
If you want to have multiple people being able to login and work as an administrator for Joomla you
will need to add new users (with admin privileges). If you want to have all your content private and
only allow certain people to be able to login and view the content then you will need to make
Registered users. You can allow user registrations but that is not part of manually creating users
so that wont be covered in this tutorial.
Step By Step Guide:
Step 1) Login to Joomla,
Step 2) From the Control Panel page (the page that is loaded when you first login) you can
either click on the User Manger icon on the page or select Site from the top horizontal
menu and click on User Manager.

Once the User Manager page loads you will be able to see a list of all the current
members of your site. If it is a fresh install you should only see a single user which is
the Super Administrator.
Step 3) From the User Manager page click the New button from the top right.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 19

WEB DEVELOPMENT WITH JOOMLA

Step 4) Now there are a few details you need to enter, most of them are self explanatory so
Ill only explain in detail the ones that may not be clear. To start off simply enter the Name,
Username, E-mail and password for the new user.

Step 5) Next you need to choose the group for the new user. If you want to make this user
only have access to your Registered content then select the group Registered. If you
want them to be able to submit articles and not have access to any of the control panel side
of Joomla set them to one of Author, Editor or Publisher. Lastly if you want them to have
Admin access set them to either Manager, Administrator or Super Administrator. For more
information on which on you can click on the Help icon from the top right.

Step 6) Under Parameters you need to select a few more things, for Registered users you
can skip this and just click save (unless you want to select a Front-end Language for them
and a Time Zone but doesnt matter too much). For Admins and Authors (Editors and
Publishers included) you will want to select a User Editor, naturally there will only be one
editor to choose from (and the option no editor but if you install new Editors through the
extensions installer you will have more options here. To start with just select Tiny MCE
Editor.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 20

WEB DEVELOPMENT WITH JOOMLA

Step 7) Now click the Save icon from the top right and your done.

Additional Information:
You can create as many users as you like, you can also set up user registrations so that
people can freely register to your website. If you plan on being the only person editing your website,
writing content, etc then if you create users they will likely only need to be set to Registered users.
Another benefit of creating users is the ability to create a temporary admin account if you
need to give someone access to the admin section of your website. This would be times when you
hire someone to do some kind of work on your website or if you need help with something and they
need access. You should never give out a Super Administrator account as you cannot delete them
and that person will always have admin access to your site. published to the Front Page.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 21

WEB DEVELOPMENT WITH JOOMLA

Brain Power
NAME:

Lesson 1: Seatwork 1

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

A. Control Panel Icons

Match Column A to Column B. Write the letter of your answer on the space provided
for.
Column A

Column B

a. allows creation, publication and deletion of

sections
___ 1.

b. directs the user to the Contents Item Manager

where content items are managed
___ 2.

c. takes the user to the new content creating

page where new contents are created
___ 3.

d. allows creation, publication and deletion of

categories and their transfer to another section
___ 4.

e. organizes files and their directories in the web

server file system

____ 5.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 22

WEB DEVELOPMENT WITH JOOMLA

___ 6.

f. manages all the articles to be published in the

home page of the website

___ 7.

g. allows creation, publication and deletion of

users as well as change in password and WYSIWYG
editor

___ 8.

h. sets parameters and affects the users website

if adjustments are made

___ 9.

i. allows installation of languages and setting up

the default language of the website

___ 10.

j. allows creation, publication and deletion of

menus

B. Joomla Key Terms

Match Column A to Column B. Write the letter of your answer on the space provided for.
Column A
___ 1. Guests
___ 2. Component
___ 3. Mambots
___ 4. Menu
___ 5. Modules

Column B
a. changes code behavior dynamically
b. are visitors to Joomla which can browse
limited contents of website
c. contain pieces of functions such as Login
Box, Poll or Search Box
d. the largest and most complex of the
Extension types and are like mini-applications
that render the main body of the page
e. contains the group names of the content of
the website

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 23

WEB DEVELOPMENT WITH JOOMLA

Brain Power
NAME:

Lesson 1: Seatwork 2

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Identify the following types of user and Joomla screen.
__________ 1. allows access to most administration functions but cannot change, edit or install Site
Templates or make any changes to the sites Global configuration options.
__________ 2. allows a user to post and edit any not just their own content item from the Front-end
but also edit content that has not been published.
__________ 3. can create or edit a Super Administrator user account.
__________ 4. can't contribute content, but this may allow them access to other areas, like a forum
or download section if your site has one.
__________ 5. they can submit new content, select options to show the item on the front page and
select dates for publishing but they cannot directly publish any content.
__________ 6. can review all articles, edit and change publishing options.
__________ 7. allows access to content creation and other system information from the Back-end.

__________ 8.

___________ 9.

___________ 10.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 24

WEB DEVELOPMENT WITH JOOMLA

Lesson 1: Activity 1
NAME: _______________________________ DATE:_____
GRADE AND SECTION:__________________ Score: _______

List down the extensions used in the following websites.

1. http://www.demon-clothing.co.uk/

2. http://www.aquaticanswers.co.uk/

3. http://www.tacticalmilitaryandsportswatches.co.uk/

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 25

WEB DEVELOPMENT WITH JOOMLA

Lesson 2: USING TEMPLATE

(Source: http://docs.joomla.org/Introduction_to_Joomla!_templates)
What is the purpose of a template?
A template controls the overall look and layout of a site. It provides the framework that brings
together common elements, modules and components as well as providing the cascading style
sheet for the site. Both the front-end and the back-end of the site have templates.
When Joomla! is first installed several templates are automatically included. You can find many
more templates at other websites. Some are available without charge under various licenses, and
some are for sale. In addition, there are many developers available who can make custom
templates. You can also make your own template.
Templates are managed with the Template Manager, which is located on the Extensions menu in
the back-end (administrator) area of your site.

Why does Joomla! use templates? [A real beginners guide!]

The way Joomla! is designed separates out the key tasks involved in producing a website for
efficient maintenance of the software. One of these tasks is to create the aesthetic (the look, feel
and layout) of the site. This includes making decisions such as which content elements
(components, modules and plugins) you may want to place in any given page.
When producing a web page, the location of most elements will stay the same (menus, banner
locations, sidebars etc.). Additionally, you will want to create the same look (fonts, header styles,
colour scheme etc.) for every page. For some parts of the site you may want to alter the general
feel to indicate a different purpose for those pages (such as a blog section). A little planning is
required for this, but once you have settled on the overall layout for your site, you then have the
task of producing each page of content.
And thats where the template comes in. You can either write all the code for each page separately,
or use a template for each major section of your site so that when you want to create a new page
you simply fill in the blanks.
Step by Step Guide Using Joomla Templates
1. Use one of the templates supplied with Joomla!
2. Download one of the many free offerings from the Internet.
3. Pay for one to be modified or produced from scratch if your needs cannot be met any other
way.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 26

WEB DEVELOPMENT WITH JOOMLA

What can you do with a template?
A template is used to manipulate the way content is delivered to a web browser or screen reader.
Here are some ways you can employ this on your Joomla!-powered site.

Layout
The template is the place where the design of the main layout is set for your site.
This includes where you place different elements (components, modules, and plugins),
which are responsible for different types of content. For example: The various menus (you
can chose from existing options and create your own) Advertising banners Polls The main
body of the page (you can select from different styles such as typical blog layout, a news
article, etc.)
If the template is designed to provide choices, you can also "dynamically" alter the
content placement on your site, perhaps putting the main menu on the right or left side of
the screen.

Color Scheme
Using CSS within the template design, you can change the colors of your
backgrounds, text, links or just about anything that you could within your ordinary (X)HTML
code.

Images and Effects

You can also control the way images are displayed on the page, and even create
flash-like effects or include AJAX applications such as drop-down menus.

Fonts
The same applies to fonts. The designs for these are all set within the template's
CSS file(s) to create a uniform look across your entire site, which makes it fantastically easy
to change the whole look just by altering one or two files rather than every single page.

Browser Specific Solutions

A template can be designed to alter how it displays on different web browsers,
allowing you to take full advantage of the latest developments without making your site
inaccessible to those who are not able to run "up-to-the-minute" system upgrades (such as
certain companies who limit what software their employees can use).

Templates supplied with Joomla!

The following templates are supplied with a default installation of Joomla! 1.5:

Milky Way (this is the default template).

See also: Customising the Milky Way template

Beez
See also: Customising the Beez template

JA Purity
See also: Customising the JA Purity template
Switching templates
To change the default Template for the Site (Front-end) or Administrator (Back-end), follow these
steps:
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 27

WEB DEVELOPMENT WITH JOOMLA

Log in to the Administrator (Back-end).

Click on: Extensions -> Template Manager

You will now see the Template Manager screen.

Note: If you do not see Template Manager listed as an option on the Extensions menu, then it is most likely because
you are not logged in as a Super Administrator. Only Super Administrators will see this menu item.

From here you manage your templates for Front-end and Back-end. The default view shows your
installed Front-end templates. The default template for the Front-end is marked with a star; in the
image below it is rhuk_milkyway.
To change the default template to beez:

click the radio button left from the template name to select it;

click "Default" on the toolbar;

the star changes from rhuk_milkyway to beez and you are done.

Assigning more than one template for the Front-end

Joomla! gives you the option of switching between two or more templates on the Front-end. This is
done with "Menu Assignment", so you can set different templates for each menu or only a menu
item.
Click on: Extensions -> Template Manager
You see your installed templates, now choose a template which is not set as your default one. Click
on the template name or hit the radio button to the left of the template name, and click "Edit" on the
toolbar. You now see the page "Template: [ Edit ]", click the radio button "Select from List" in the
"Menu Assignment" block and choose the menu items on which the template will be shown. Click
"Save" on the toolbar and youre done.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 28

WEB DEVELOPMENT WITH JOOMLA

Installing a template
Install via Admin Panel (packed template file)
Log into the back-end of your site (www.your-site.com/administrator/)
Click on: Extensions -> Install/Uninstall

You see the page "Extension Manager"

From here you can install your Templates, Plugins, Modules, Components and Languages. You
have three options:

Upload Package File - (select a package from your PC, upload and install it)
Install from Directory - (enter the path where the package is located on your server)
Install from URL - (enter the URL to the package)

Here, we choose the first method: Upload Package File

Select the package from your PC and click the button "Upload File & Install"

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 29

WEB DEVELOPMENT WITH JOOMLA

If the package contains no errors you are done and get a success message like the one below.

Install via FTP (unpacked template file)

Templates can also be installed via FTP without packaging them. Simply select the template folder
on your PC and upload it to your server, using your favorite FTP software. Be sure you upload the
template folder to the directory: /path_to_joomla/templates/ - where /path_to_joomla/ is the location
of your Joomla! installation on the server. This method is mostly used when you have created a
template yourself, and do not want to have to package it to install the template, or if you want to
upload more than one template at once.
Note: Do not try to use FTP to install Components, Modules and Plugins if you are a beginner/novice. These
items need database entries which have to be inserted manually if you bypass the package installer.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 30

WEB DEVELOPMENT WITH JOOMLA

Lesson 2: Activity 1
NAME: _______________________________ DATE:_____
GRADE AND SECTION:__________________ Score: _______

Evaluate the following websites based on the given check list.

1. http://www.demon-clothing.co.uk/
1. Employ scannable text and meaningful sub-headings
2. Use meaningful graphics, not just pictures of models
3. Have small graphics whenever possible to reduce download time
4. Lessens the usage of graphics as links or content
5. Have a well-organized site
6. Use text-based navigation
7. Frozen font sizes and low contrast between text and background
8. Non-standard JavaScript links
9. Flash navigation
10. Browser Incompatibility
11. Frozen layouts with fixed page widths
12. Page titles with low search engine visibility
2. http://www.aquaticanswers.co.uk/
1. Employ scannable text and meaningful sub-headings
2. Use meaningful graphics, not just pictures of models
3. Have small graphics whenever possible to reduce download time
4. Lessens the usage of graphics as links or content
5. Have a well-organized site
6. Use text-based navigation
7. Frozen font sizes and low contrast between text and background
8. Non-standard JavaScript links
9. Flash navigation
10. Browser Incompatibility
11. Frozen layouts with fixed page widths
12. Page titles with low search engine visibility

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 31

WEB DEVELOPMENT WITH JOOMLA

3. http://www.tacticalmilitaryandsportswatches.co.uk/

1. Employ scannable text and meaningful sub-headings

2. Use meaningful graphics, not just pictures of models
3. Have small graphics whenever possible to reduce download time
4. Lessens the usage of graphics as links or content
5. Have a well-organized site
6. Use text-based navigation
7. Frozen font sizes and low contrast between text and background
8. Non-standard JavaScript links
9. Flash navigation
10. Browser Incompatibility
11. Frozen layouts with fixed page widths
12. Page titles with low search engine visibility

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 32

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 2: Lab Exercises 1

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Using Template Manager Downloading and Installing Templates, Set
Default Templates
Instructions:
1. Let the student to visit any of the listed sites below for them to download 5
Joomla Template Design for version 1.5.
a. www.joomlashack.com
b. www.siteground.com
2. Install the 5 templates.
a. Go to Extensions > Install/Uninstall
b. Click Browse look for your downloaded template.
c. Click Open
d. Click Upload File and Install
3. Check the Installed Templates
a. Go to Extensions > Template Manager
b. Click Template-site
c. Select from your newly installed template as your Default Template
4. Preview

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 33

WEB DEVELOPMENT WITH JOOMLA

Lesson 3: WORKING WITH CONTENT

(source: Deodilyn Villanueva)

Adding Articles in Joomla

1. Log into your Joomla installation as the owner account.
2. The main screen will look similar to the following:

3. Click Add New Article.

4. From here, you can add the text of the article in the text field, customize it to your liking, add
an alias (similar to a short URL for the article), and configure further options on the right
hand side of the page such as when to publish, when to stop publishing, who the article is
visible to, etc.
5. If you wish to preview the article before it goes live, click Preview. Otherwise,
click Save and the article is pushed live to the site.

Save
Title
Title Alias
Section

Category

Type your Article here!

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 34

WEB DEVELOPMENT WITH JOOMLA

Editing Articles in Joomla
In the top horizontal tool bar, go to; Content > Article Manager. This will open a window with all
the articles that you have published. If you have a lot of articles you can sort or filter them by
section and category to make them easier to find.

2. Choose the article you wish to edit and click it to open it.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 35

WEB DEVELOPMENT WITH JOOMLA

3. Edit the article as you would with any word editing program. After you have finished editing the
article scroll to the top of the page and click the save button. Open your site and you will see your
article modifications have been published to the web.

SAVE

That's it! You have completed editing an article in Joomla.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 36

WEB DEVELOPMENT WITH JOOMLA

Brain Power
NAME:

Lesson 3: Seatwork 3

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Arrange the following steps in order.

Creating Articles in Joomla
____ Fill up the Title field, the Alias is optional, select Uncategorized under Section and
Category.
____ Go to Content > Article Manager from the top admin menu.
____ From the top admin menu, click on [New].
____ The last step is to save this article by clicking on the [Save] button.
____ Log into the back-end of your site.
____ In the option buttons under Published and Frontpage choose Yes.

Editing an Article
____ Log into the back-end of your site.
____ Make the necessary changes and click the Save button.
____ Check the checkbox of the title of the article you want to edit then click Edit.
____ In the Control Panel window click Article Manager.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 37

WEB DEVELOPMENT WITH JOOMLA

Lesson 3: Lab Exercises 2

HANDS ON
NAME:

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Using Add New Content Icon

Instructions:
1. Select the New Content Icon
2. Title: Prayer for My Friend
3. Section: News
4. Category: Latest News
5. Type the poem below
Prayer For My Friend
by Kay McKee
You look at yourself
But its not good enough
All your prides on the shelf
I wish youd take it back off
Always wanting to be
Something youre not
You would be so free
If you liked what you got
Those other girls
That you want to be
With their pretty blond curls
Are taking you from me
Now youre cutting you wrists
Because its the latest trend
Im not calling it quits
Not losing my best friend
6. Save

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 38

WEB DEVELOPMENT WITH JOOMLA

Lesson 3: Lab Exercises 3

HANDS ON
NAME:

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Editing an Article
Instructions:
1. In Menu Bar click Content
2. Select All Content Items
3. Open Lab Exercises 2
4. Type the continuation of the poem Prayer For My Friend
Coz I cant just go on
Letting you slip away
Until youre all gone
But all I can do is pray
So my prayer for you
Is that you find who you are
Take a minute or two
And just look at the scars
Left on your arm
That then you could see
They are causing you harm
With what they want you to be
That you will take my hand
That is extended to you
So I can help you to stand
And help you get through
You have heard my prayer
And all I can say to defend
That we were such a good pair
No matter what, youre still my best friend
5. Select the tab Link to Menu Link this to Poem Menu under Main Menu
6. Save
7. Preview
Assignment: Make a short story about your Last Summer

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 39

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 3: Lab Exercises 4

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Adding and Editing an Article

Instructions:
1. In Menu Bar click Content
2. Select Article Manager
3. Click Add New Icon
4. Title: Trending News
5. Section: News
6. Category: Latest News
7. Type the following: Eight Driving ITs in the Future
A new study from Accenture, billed as Accenture Technology Vision 2011, identifies eight
trends that are remaking IT and helping it reshape the business landscape, with a focus on
driving business performance and growth. We took a look around the corner and saw a
world of IT that barely resembles what enterprise computing looks like today, said Gavin
Michael, managing director of R&D and alliances at Accenture. The role of technology is
changing; it is no longer in a support role. Instead, it is front and center driving business
performance and enriching peoples lives like never before. Many of the trends and
technologies Accenture identifies are familiar at this point, including social media and cloud
computing; others, like the waning era of the application, are less well-known. The real value
of the report lies with insights on taking advantage of these technology shifts to gain business
intelligence and business value and doing so before your competitors figure out what
comes next.

8. SAVE and Preview

9. In Menu Bar click Content
10. Select Article Manager
11. Select Title: Trending News
12. Click Edit Icon
13. Section: News
14. Category: Latest News
15. Replace the Title: Summer Time
16. Type your short story about your Summer Vacation.
17. Select the tab Link to Menu Link this to Top Menu under Main Menu
12. Save and Preview

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 40

WEB DEVELOPMENT WITH JOOMLA

Lesson 4: WORKING WITH IMAGE

How to Insert an Image into an Article
(source: http://writenowdesign.com/joomla-website-design)
Important - This procedure requires that you have JCE Content Editor (http://www.joomlacontenteditor.net/) installed.
Generally, images cannot be wider than 500px. Check with your website designer if you don't know the maximum width for your
article images. If you need to add an image larger than 500px, see To add a pop-up image to a Joomla article.

1. In an open article, add a new paragraph.

To add a new paragraph, put your cursor at the end of an existing paragraph and
click Enter. If the paragraph is a heading 1, 2, etc, on the Format menu,
click Paragraph.

2. With your cursor in the new, blank paragraph, click Insert/Edit Image.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 41

WEB DEVELOPMENT WITH JOOMLA

3. Click the images folder and then click the image you want to use.

Note - If you want to upload an new image, from the image directory, click Upload and then
navigate to the file on your local machine.

4. Add the following settings to the Image Manager dialog box.

- In the Description box, enter a description. Title and Description can be the
same. Use something descriptive to help search engines.
- In the Title box, enter a title. Title and Description can be the same. Use
something descriptive to help search engines.
- In the VSpace box, delete the text.In the HSpace box, delete the text.
5. Click the Advanced tab and change the following settings:
- In the Style box, delete ALL text.
- In the Class List, select img-border.
Note: "img-border" and others are css styles I created in my editor.css file.
- If you want the image to float left of the text, place your cursor in the text paragraph
where you want to start the float and select img-border-fl from the Class List.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 42

WEB DEVELOPMENT WITH JOOMLA

Image Floated to the Left

6. If you want the image to float right of the text, place your cursor in the text
paragraph where you want to start the float and select img-border-fr from
the Class List.

Image Floated to the Right

7. Click Insert to add the image.
8. (Optional) If you want to add a caption:
- Add a paragraph below the image.
- Type the caption text.
- With your cursor in the caption paragraph, in the Styles box, select Caption.

JCE Joomla Content Editor: Style Selector

9. Click Apply and then in a different browser screen, open that page on your live
website to see the changes.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 43

WEB DEVELOPMENT WITH JOOMLA

Lesson 4: Lab Activity 2

NAME: _______________________________ DATE:_____
GRADE AND SECTION:__________________ Score: _______

1. Open your previous articles:

a. Prayer for My Friend
b. Dad's Blessings
2. Research and download images or pictures on the Internet which are related
to the articles you created.

3. In article Prayer for My Friend, insert the picture you have downloaded
using the Image Tab.

4. In article Dad's Blessings, insert the picture you have downloaded using
the Media Manager.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 44

WEB DEVELOPMENT WITH JOOMLA

Lesson 4: Lab Exercises 3

HANDS ON
NAME:

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Insert a Picture (Using Image Tab)
Instructions:
1. Click Add New Article
2. Title: Prayer
3. Section: News
4. Category: Latest News
5. Choose Yes in the option button for Published and Front Page
6. Text: Prayer is the Key that opens and closes our day.
7. Format: Heading 1
8. Click Image Tab
9. From Gallery Images select the Key.jpg
10. Click the Insert button
11. Save

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 45

WEB DEVELOPMENT WITH JOOMLA

Lesson 4: Lab Exercises 4

HANDS ON
NAME:

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Insert a Picture (Using Media Manager)

Instructions:
1. Let the students surf the net and download 4 pictures of Garfield or any
character of their choice. (15 mins.)
2. To upload Photos
a. In the Control Panel click Media Manager
b. Create a Folder by typing the name of your folder at the Create Folder
Directory bar
c. Click Create Folder button
d. Click your created folder
e. Click Browse. Select a picture / image. Click Open.
f. Click Start Upload
3. In the Control Panel click Add New Article
a. Title: My Garfield or the name of the character of your choice
b. Section: News
c. Category: Latest News
d. Choose Yes in the option button for Published and Front Page
e. Text: Garfield or the name of your character
f. Format: Heading 1
g. Save
4. Insert the 4 pictures
a. Go back to Media Manager
b. Go to your folder
c. Right click the picture and choose Copy Image Location
e. Go back to your article
f. Click the Insert/Edit Image icon
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 46

WEB DEVELOPMENT WITH JOOMLA

g. Paste the URL address at the Image URL bar. Click Insert
h. Resize the picture according to the desired size
I. Save

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 47

WEB DEVELOPMENT WITH JOOMLA

Lesson 5: SECTIONS AND CATEGORIES

Overview in Joomla sections categories and articles
(source: http://docs.joomla.org/)
This lesson will provide you with an overview to how sections, categories, articles and menu
items all fit together to make a Joomla 1.5 site.
Joomla! Uses a logical approach to manage the web sites structure and present web site
content to the visitor.The diagram demonstrates the basic concept for how sections, categories,
articles and menu items relate to each other to form a logical structure to enable you to manage
your web site and for visitors to locate information more efficiently.
Sections
Sections are used to manage or structure your
categories in a logical order. You cannot create
a category without first creating a section to
store the category in. You are not limited to just
one section, depending how complex your
Joomla website is you may wish to create a
number of sections in order to structure your
site.
Categories
Categories are used to store and manage
articles. Each category must be associated with
a section. You are not limited to just creating
one category you can create different categories
and associate them with a specific section.
Articles
Articles are stored in categories or they can be outside a category using the uncategorized feature.
Articles can only be Associated with one category and not multiple categories

Menu items
Menu items are designed to help visitors navigate to specific articles, categories or sections.
When you create a menu item you can link directly to a section, category or uncategorized article.
Menu items are not just limited to linking to sections, categories or uncategorized articles.
You can create a menu item to link to a 3rd party component or the built in components like
contacts, poll, search plus much more.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 48

WEB DEVELOPMENT WITH JOOMLA

Creating a section and category hierarchy

1. Navigate to Content > Section Manger

2. When the new page loads, click the New button

3. Enter the following fields:

(1) Title: The name of the section. This will show as page headings if you have the
settings to show this.
(2) Alias: (Optional) A unique name for the section, not shown on any pages
(3) Published: Select Yes to enable the section for use on the website or No to
disable the use
(4) Access Level: Determines who in your site can use this section. Public is
everybody, Registered is anyone who has an account with your site and Special are
managers and above
(5) Image: (Optional) A selection of images for the section, if used, it will show on
pages
(6) Image Position: Relative to the Title
(7) Description: (optional) Describe what the section is and what it is used for. While
it is optional, it is recommended, especially when you have a number of
administrators looking after your website. They will know what the section is then for

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 49

WEB DEVELOPMENT WITH JOOMLA

4. When you have finished with the fields, click the Save button

5. You will now see your title in the list

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 50

WEB DEVELOPMENT WITH JOOMLA

CATEGORIES
6. Now we can create our Categories and place them under the Section. Navigate
to Content > Category Manager

7. Click on the New button

8. Fill out the fields in the same manner as we did in step #3 above:
(1)Title: The name of the Category. This is what will show on the pages if needed
(2)Alias: (optional) A unique name for the Category. It is not shown anywhere. If left
blank, Joomla! will fill it in automatically
(3)Published: Select Yes to enable the category, No to disable it
(4)Section: This is where the Hierarchy comes into play. Select the Section title that
you created earlier

(5)Category order: While there are no fields showing at the moment, when you
place your second category in under the section, you can select the order of the
categories here
(6)Access Level: Set to who you want to see the category, Public is everybody,
Registered is everybody who has registered to your site and Special are manager
access and up
(7)Image: (Optional) displays and Image next to the Category Title on the web pages
with the Category Title Showing
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 51

WEB DEVELOPMENT WITH JOOMLA

(8) Image Location: Where the image is located relative to the title
(9) Description: (optional) Describe what the Category is and what it is used for.
While this is optional, it is recommended in case other site administrators try to use
the Category

9. When all fields have been completed, click the Save button

10. When you go to the Article Manager and select the Section that you created, the
category list will show the Categories assigned to that Section

11. Repeat steps 6 - 9 to add more Categories to your Section.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 52

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 5: Lab Exercises 5

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Creating a Section and Category
Instructions:
1. Create the following Section
About Me
My Family
My Friends
My Interest
2. Create a category of the following:
Categories:

Link to the following sections:

Me

About Me

Family

My Family

New Closest Friends

My Friends

New Found Friends

My Friends

Old Friends

My Friends

Songs

My Interest

Performers

My Interest

Movies

My Interest

Actors/Actresses

My Interest

Animae Characters

My Interest

Computer Games

My Interest

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 53

WEB DEVELOPMENT WITH JOOMLA

Lesson 6: CREATING MENUS

Joomla! Allows you to create many menu, each menu is a group that contains many menu
item. The menu will be displayed on the front page through the module menu. By default Joomla!
Already have a menu called Main Menu, you can use this menu or create other menus.
Creating Menu in Joomla
Log in to the Joomla! Administrator Back-end.
You can access the Menu Manager page either by pressing the Menu Manager button on
the Control Panel or by clicking Menus -> Menu Manager on the toolbar menu. The Menu
Manager screen opens.
Click the New toolbar button. The New/Edit Menu screen opens.

Menu Toolbar

Complete the fields as required:

Create new Menu

Unique Name: The identification name used by Joomla! to identify this menu. It must be
unique. Spaces are not recommended. This displays under module parameters when
editing the module.
Title: A proper title for the menu. This is used to identify the menu the Menu Manager in the
backend.
Description: A description of the menu, useful for your own reference.
Module Title: The title that will be given to the mod_mainmenu module in the Module
Manager. This will be the published title or name which displays in the front-end (if you tick
yes to show title in the Module Details when editing the module via the Module Manager).
This will only be displayed when creating a new menu. However it can be edited in the
Module Manager in the back-end after the module has been created. If left blank, a module
will not be created and you will not be able to show this menu in the Front-end.
Click the Save toolbar button to create the new menu. To leave without saving click the
Cancel toolbar button. You can now add new items to the newly created menu. All new
menus default to disabled when first created.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 54

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 6: Lab Exercises 6

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Creating a Menu
Instructions:
1. Create the following Menu Items under the MainMenu:
a. About Me
b. My Family
c. My Friends
d. My Interest
2. Link the menu items to their respective Sections.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 55

WEB DEVELOPMENT WITH JOOMLA

Lesson 7: OTHER UTILITIES OF JOOMLA

(source: http://www.guidedhelp.net/joomlacentral/joomla-guides/joomla-extensions-explained)

Joomla's Built-in Modules

Joomla! comes with several built-in modules out of the box, all of which can be found within the
Module Manager.
Here we display a list and small overview of each module included with Joomla!:
Advertisement
The advertisement module shows advertisements that have been configured within the module,
along with the built in banner manager component. This can show a combination of wording or
banners or both.
Archive
The Archive module will show a list of any articles that have been archived, arranged by month.
Banners
The Banners module shows advertisements with images, with a specified URL that will take the
visitor to the URL set. All banners are configured in the Banner Manager, with the banner module
allowing you to choose from any banners available.
Breadcrumbs
Breadcrumbs are links that display the location of where you are within a site, along with the
pathway links that allow you to jump to each parent area right back to the home page.
Feed Display
The feed display module allows you to show RSS feeds from other sites, within the module itself.
Footer
The footer module is designed to show the Joomla! copyright information at the bottom of the pages
that it is published on. You cannot customize the Joomla! copyright information within this module.
Login Form
The Login Form Module displays a username and password login form and allows a previously
registered user of your website to log into the site. It also displays a link to retrieve a forgotten
password. If user registration is enabled (in the Global Configuration settings) it also allows users to
register with your website.
Newsflash
The Newsflash Module can display either a random article or a fixed number of articles in a
horizontal or vertical format.
Polls
The Polls Module complements the Polls Component and is used to display any Polls that have
been configured using the Polls Component, by selecting a specific Poll to display in the Poll
Module.
Popular
The popular module displays a list of the most popular articles on your site (articles with the most
hits).
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 56

WEB DEVELOPMENT WITH JOOMLA

Search
The search module displays a search box that allows your website visitors to search your website.
Statistics
The statistics module displays some information on: Server information (for security reasons it is
best not to enable this), Site information, Hit counter which will all help show how many users your
site has, the amount of hits it receives and more. Apart from boasting about the number of its or
visitors it is hard to see what benefit this would have to your website.
Syndication
The syndication module adds an RSS button to your pages and allows your website visitors to
subscribe to and read feeds from your website.
Who's Online
The Who's online module simply just displays the amount of visitors that are currently on your
website comprising of guests and members and if chosen also the member names.
EDITOR PLUGINS
Joomla! editor plugins are what really allows you to create and edit the content that you display on
your website. They can be thought of as word processors built into your website, allowing for great
control over how your content is formatted, using a WYSIWYG (What You See Is What You Get)
format.
No Editor - This loads a basic text entry field.
TinyMCE 2.0 - TinyMCE is a platform-independent Web-based JavaScript HTML WYSIWYG Editor
control.
XStandard Lite 2.0 - XStandard is the leading standards-compliant WYSIWYG editor Plugin for
desktop
applications
and
browser-based
content
management
systems
(IE/Mozilla/Firefox/Netscape).
By default, the XStandard Lite 2.0 editor plugin is unpublished. None these editor plugins can be
uninstalled.
JCE is the most popular 3rd party content editor extension which is highly recommended, with lots
of great features and ease of use.
EDITOR XTD PLUGINS
Joomla! XTD (extended) plugins offer more control over your content and do this by adding
additional buttons below the editor plugins (WYSIWSYG editors).
Image - Displays a button to make it possible to insert images into an Article. Displays a popup
allowing you to configure an image's properties and upload new image files.
PageBreak - Provides a button to enable a pagebreak to be inserted into an Article. A popup allows
you to configure the settings to be used.
Readmore - Enables a button which allows you to easily insert the Read more... link into an Article.
SEARCH PLUGINS
The Joomla! search plugins enable Joomla! search to index and display the content and structure of
your website (articles, contacts, categories, sections etc.).
Content - Enables searching of all Articles.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 57

WEB DEVELOPMENT WITH JOOMLA

Weblinks - Enables searching of Web Links Component.
Contacts - Enables searching of the Contact Component.
Categories - Enables searching of Category information.
Sections - Enables searching of Article Section information.
News feeds - Enables searching of News Feeds.
The entire core Joomla! search plugins are enabled by default. Typically when a visitor searches
your site it is mainly the content areas that they are searching for, and therefore disabling the other
core search plugins may be beneficial to have a cleaner looking search results page.
SYSTEM PLUGINS
The Joomla! system plugins perform actions at various points in the execution of the PHP code that
powers Joomla!
SEF - Adds SEF support to links in the document. It operates directly on the HTML and does not
require a special tag.
Debug - Provides debug information.
Legacy - Provides Legacy Support for older versions of Joomla!
Cache - Provides page caching.
Log - Provides System Logging.
Remember Me - Provides Remember Me! Functionality.
Backlink - The Backlink Plugin provides support for legacy Joomla! 1.0.x links. It redirects old style
URLs and document links to the correct Joomla! 1.5 targets.
USER PLUGINS
Joomla! user plugins perform various actions at different times with respect to users. These actions
can include logging users in and out of the website.
User - Joomla! - Handles Joomla!'s default User synchronisation.
XML-RPC PLUGINS
Joomla! XML-RPC plugins allow other external systems to interact with Joomla! such as the
Blogger API, Akeeba Remote Backup, Movable Type API and so on.
XML-RPC - Joomla! - Joomla! XML-RPC API.
XML-RPC - Blogger API Blogger XML-RPC API.
The importance of Joomla! plugin order
There are some best practices when it comes to Joomla! plugins and learning about plugin order
can help make your website faster and less prone to errors.
The purpose of Joomla! plugins is to affect the way that Joomla! works, displays content,
authenticates users, processes user logins, SEO and so on. Plugins are executed in the order that
they are in as listed in the Plugin Manager (within the Administrator panel, 'Extension' -> Plugin
Manager). Therefore if a specific plugin is before other plugins then it may not be able to process
their results which can result in an inefficient or even semi-broken website.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 58

WEB DEVELOPMENT WITH JOOMLA

Customising the Login Form module

What does the Login Form module do?
The Login Form module presents site visitors with a form with
username

and

password

fields.

If

the

user

enters

valid

username/password combination they will be granted access to

additional resources on your website. Which additional resources they
will have access to can be configured separately.
Once logged in, the Login Form module presents the user with a
Logout button. Logged in users who are inactive for a predetermined
period of time will be automatically logged out.
To be visible to site visitors the Login Form module must be enabled
and assigned to one or more web pages on your Joomla! site.
The Login Form module will appear in whatever module position it is assigned to in the current
template. It is also possible to have a Login Form that will appear in place of regular content when a
Menu Item is clicked.

To change the Login Form module settings

To change settings which control the information shown in the Login Form module and some
aspects of its behaviour, do this:
1. Log in to the Administrator back-end.
2. Click the Extensions > Module Manager menu item.
3. From the list of Modules find the one called "Login Form". There may be several pages of
Modules listed so you might need to look on subsequent pages. You can make the search
easier by clicking the drop-down list containing Select Type and clicking the "mod_login"
item (they are listed in alphabetical order).
4. Click the Module Name, ie. Login Form.
5. You will see the "Module: [Edit]" screen which contains three groups of fields: Details, Menu
Assignment and Parameters.
6. Make the changes you need to make.
7. Click the Save or Apply toolbar button to implement the new settings:
The Save toolbar button will save your changes and return you to the Module list
screen.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 59

WEB DEVELOPMENT WITH JOOMLA

The Apply button will save your changes but leave you in the Module Edit screen.
8. You should see a blue message: "Item saved." which confirms that your changes have been
saved.
To enable the Login Form module

If you wa nt certain (authorised) visitors to your website to be able to log in and view additional
resources, then you must enable the Login Form module. To enable the Login Form module either:
1. change the Enabled status to Yes (green symbol) on the Module Manager screen; or
2. click the Login Form module name in Moduel Manager screen to display module's details,
change Enabled radio button to Yes and Savechanges.
To assign the Login Form module to selected web pages
You can make the Login Form module appear on one or more pages by assigning it to selected
Menu Items. This is done using the fields in the Menu Assignment group on the Module Edit screen.

Menus: Is a radio button field with the following options:

All: The Login Form module will appear on all screens.
None: The Login Form module will not appear on any screens.
Select Menu Item(s) from the List: The Login Form module will appear on those screens
selected in the Menu Selection field.
Menu Selection: Shows a list of all the Menus and Menu Items from which one or more
may be selected. This field is only used if the Menus field is set to Select Menu Item(s)
from the List. To select more than one Menu Item on the list, you Shift-click to select a
range of items, or Control-click to select or deselect individual items.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 60

WEB DEVELOPMENT WITH JOOMLA

To customize the information shown in the Login Form module
The information shown in the Login Form module can be customized from the Module Edit screen.
The following list describes the various settings that will change the appearance of the Login Form
module.
Title: Changes the title shown for the Login Form module if Show Title is set to Yes.
The default is "Login Form".
Show Title:
If Yes then the Title will be shown at the top of the Login Form. This is the default.
If No then the Title will not be shown at the top of the Login Form.
Pre-text: This text will be shown above the Login Form but below the Title. It may
contain HTML markup.
Post-text: This text will be shown below the Login Form. It may contain HTML markup.
Greeting:
If Yes then a simple greeting message is shown above the Logout button once the
user is logged in. For example, it might say "Hi, Joe Bloggs". This is the default.
If No then no greeting message is shown above the Logout button
.Name/Username: Determines whether the user's real name or the user's username is
shown as part of the simple greeting message. Additionally, the "Create an account" link will
only be shown if the Allow User Registration field in Global Configuration is set to Yes.

How to Create a Poll in the Poll Manager

1.
2.
3.
4.
5.
6.
7.
8.
9.

Log in to the Administrator back-end.

Click the Components> Polls menu item. You should see the Poll Manager screen.
Click the New toolbar button to create your poll.
Type the question that you wish to poll in the Title field .
Type an abbreviated title of your poll in the Alias field.
Change, if desired, the number of seconds between votes for each user in the Lag field.
Select the No or Yes radio button to publish or not your poll.
Type in the Options fields the possible choices for the answers of your poll.
Click the Save or Apply toolbar button to implement the new settings:

The Save toolbar button will save your changes and return you to the Poll Manager.

The Apply button will save your changes but leave you in Poll [Edit]. You can then
click Close if no other changes has been made or Save to leave this screen to return
back to the Poll Manager.

You should now see the title of your Poll in the Poll Manager table. If you need to edit it, you can
either double click the Poll Title or select the Poll by checking the check mark box and then click
the Edit the toolbar button.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 61

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 7: Lab Exercises 7

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Creating Polls
Instructions:
1. Go to Components and click Polls.
2. Click New in the Poll Manager.
3. Title: Where do you buy your vegetables?
Option 1: Supermarket
Option 2: Produce Stand
Option 3: Farmer's Market
Option 4: I grow my own
4. Save and Publish.
5. To add the Poll:
a. Click Extensions and choose Module Manager.
b. Click New and Select Poll.
c. In the module parameter of Poll, select the title of the Poll you
created.
d. Type Quick Vote for the Title Position: Right
e. Save.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 62

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 7: Lab Exercises 8

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Creating a Login Form

Instructions:
1. Click Extensions and select Module Manager.
2. Click New and choose Login.
3. Title: Login
4. Save.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 63

WEB DEVELOPMENT WITH JOOMLA

Course Description:
The course removes the myth behind web development. It presents web development as
something that is for everyone and not only the experts. The course makes use of
JOOMLA, an open source Content Management System as a platform for making and
maintaining a website. Students are expected to learn to organize their thought and
materials into a presentable website for school, business or personal use.

What would they know?

Students are oriented with Layout Template Terms and possible application programs in layouting

What can they do?

Students are able to layout Joomla templates

What habits will they form?

Students develop innovation in enhancing websites out of an existing one

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 64

WEB DEVELOPMENT WITH JOOMLA

ESTABLISHED GOAL :
Students will demonstrate understanding of the process, developing and designing
of a quality and effective school website through:
Creativity and Innovation NETS 1a&b apply existing knowledge and ideas to come up
with a new design. Create their original design as a means of personal or group expression.
Research and Information Fluency NETS 3a & b plan strategies to, organize, evaluate,
and use information from a variety of sources and media.
Digital Citizenship NETS5b exhibit a positive attitude toward using technology
that supports collaboration, learning, and productivity.
Technology Operations and Concepts NETS 6b use different applications
effectively and productively.

ESSENTIAL UNDERSTANDING :
The learners will understand that Strategic plan will generate a desirable result.
The learners will understand that The design of the website will greatly affect the interest
of people viewing it.

KNOWLEDGE AND SKILLS:

The learners will know the Planning the Design - Conceptualization and Planning,
Principles of Design. Components and Elements of a Template - Key Terms: Template,
components, elements, layouts. Creating Template from Scratch - Steps in designing
layout using GIMP. Joomla extensions in Dreamweaver, Creating a CSS layout template
Creating the XML file and Creating the Template Thumbnail

The learners will be able to Conceptualize the design of their Templates applying the
principles of design. Define the different components and elements of a template. Explain briefly the technical terms used in the unit. Create templates from scratch, Use
Joomla extensions in Dreamweaver, Identify the elements of CSS template and Create a
CSS layout template, Create an XML file of the templates then upload and use them for
your website. Create the template as thumbnail

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 65

WEB DEVELOPMENT WITH JOOMLA

Lesson 1: PLANNING THE DESIGN

Introduction to Web Design
Web Design
Web design is a process of conceptualization, planning, modeling, and execution of electronic
media content delivery via Internet in the form of technologies (such as markup languages) suitable
for interpretation and display by a web browser or other web-based graphical user interfaces
(GUIs).
The intent of web design is to create a web site (a collection of electronic files residing on one or
more web servers) that presents content (including interactive features or interfaces) to the end
user in the form of web pages once requested.
Such elements as text, forms, and bit-mapped images (GIFs, JPEGs, PNGs) can be placed on the
page using HTML, XHTML, or XML tags. Displaying more complex media (vector graphics,
animations, videos, sounds) requires plug-ins such as Flash, QuickTime, Java run-time
environment, etc. Plug-ins are also embedded into web pages by using HTML or XHTML tags.
Improvements in the various browsers' compliance with W3C standards prompted a widespread
acceptance of XHTML and XML in conjunction with Cascading Style Sheets (CSS) to position and
manipulate web page elements. The latest standards and proposals aim at leading to the various
browsers' ability to deliver a wide variety of media and accessibility options to the client possibly
without employing plug-ins.
Typically web pages are classified as static or dynamic.
Static pages dont change content and layout with every request unless a human (web master or
programmer) manually updates the page.
Dynamic pages adapt their content and/or appearance depending on the end-users input or
interaction or changes in the computing environment (user, time, database modifications, etc.)
Content can be changed on the client side (end-user's computer) by using client-side scripting
languages (JavaScript, JScript, Actionscript, media players and PDF reader plug-ins, etc.) to alter
DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side
scripting languages (PHP, ASP, Perl, Coldfusion, JSP, Python, etc.). Both approaches are usually
used in complex applications.
With growing specialization within communication design and information technology fields, there is
a strong tendency to draw a clear line between web design specifically for web pages and web
development for the overall logistics of all webbased services.
Web site design
A Web site is a collection of information about a particular topic or subject. Designing a web site is
defined as the arrangement and creation of web pages that in turn make up a web site. A web page
consists of information for which the web site is developed. A web site might be compared to a
book, where each page of the book is a web page.
There are many aspects (design concerns) in this process, and due to the rapid development of the
Internet, new aspects may emerge. For non-commercial web sites, the goals may vary depending
on the desired exposure and response. For typical commercial web sites, the basic aspects of
design are:
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 66

WEB DEVELOPMENT WITH JOOMLA

The content: The substance and information on the site should be relevant to the site and should
target the area of the public that the website is concerned with.
The usability: the site should be user-friendly, with the interface and navigation simple and
reliable.
The appearance: the graphics and text should include a single style that flows throughout, to show
consistency. The style should be professional, appealing and relevant.
The visibility: the site must also be easy to find via most, if not all, major search engines and
advertisement media.
A web site typically consists of text and images. The first page of a web site is known as the Home
page or Index. Some web sites use what is commonly called a Splash Page. Splash pages might
include a welcome message, language or region selection, or disclaimer. Each web page within a
web site is an HTML file which has its own URL. After each web page is created, they are typically
linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led
to shorter attention spans and more demanding online visitors and this has resulted in less use of
Splash Pages, particularly where commercial web sites are concerned. Once a web site is
completed, it must be published or uploaded in order to be viewable to the public over the internet.
This may be done using an FTP client. Once published, the web master may use a variety of
techniques to increase the traffic, or hits, that the web site receives. This may include submitting the
web site to a search engine such as Google or Yahoo, exchanging links with other web sites,
creating affiliations with similar web sites, etc.
Multidisciplinary requirements
Web site design crosses multiple disciplines of information systems, information technology and
communication design. The web site is an information system whose components are sometimes
classified as front-end and back-end. The observable content (e.g. page layout, user interface,
graphics, text, audio) is known as the front-end. The back-end comprises the organization and
efficiency of the source code, invisible scripted functions, and the server-side components that
process the output from the front-end. Depending on the size of a Web development project, it may
be carried out by a multi-skilled individual (sometimes called a web master), or a project manager
may oversee collaborative design between group members with specialized skills.
. (Article source: http://en.wikipedia.org/wiki/Web_design)

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 67

WEB DEVELOPMENT WITH JOOMLA

SAMPLE SCHOOL WEBSITES

Tarlac Christian College Official School Website - http://www.tarlacchristiancollege.com/homepage/

Don Mariano Marcos Memorial Stae University Official Website - http://www.dmmmsu.edu.ph/

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 68

WEB DEVELOPMENT WITH JOOMLA

What are Website conceptualisation/planning?
Conceptualising a website communication solution is the most important part of creating a
project. Usually, a project is divided into the processes of planning, implementation and launching
the website solution.
It is only a good concept that enables the achievement of the originally set goals, meeting our target
groups' requirements and implementing the project with an optimal use of resources.
A solution conceived in such a manner provides users with an optimal user experience.
What we Need to Plan?
In the planning process, we first define project goals, which mean we assign faces, names
and ages to target groups and create a complete list of their requirements.
We create an IT architecture and functionality specifications on the basis of these contextual
outlines.
We establish the available company resources (human resources, content and IT) in the
company, which are to be included in the website solution.
Why we need to Plan?
At the design stage, we divide the user experience of target groups by constructing models
of distributing communication elements throughout the website.
We draw up an interactive and graphic design of the user interface and define the course of
project implementation as well as the required resources.
Even the best designers produce successful products only if their designs solve the right
problems. A wonderful interface to the wrong features will fail. (Jakob Nielsen)

HOW ARE WE GOING TO COME UP A GOOD PLAN?

1. IT Architecture Planning
IT architecture is an outline of the distribution of a website's content and functionality and
their inter-connections. It unites all the available contents and communication points and the user
data created on them, as well as any data linked from the background IT systems.
Good IT architecture provides an optimal organisation of contents and user data for the
simplest management and supplementation of the website solution possible by using a Content
Management System (CMS). IT infrastructure includes the website solution in all language
varieties.
2. User Experience Planning
Planning the user experience is about forming the users interaction with a website solution
or system. A user's experience on a website is a key factor when it comes to influencing the user's
decisions on the suppliers offering. This proves even truer as the user communicates with the
supplier in different environments and situations without personal contact, and the experience
acquired on the website is the only sense of the suppliers attitude towards customers the user can
experience.
The formation of user experience follows the typical user's path through a website and
optimally allocates navigation, content and other interactive elements with regard to the points on
the path the user is taking. With this, the formation of user experience determines the method which
is the most clear and intuitive for the user and which provides them the opportunity to achieve a
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 69

WEB DEVELOPMENT WITH JOOMLA

goal or implement a task as fast as possible. This is the reason why they are positioned at a certain
point of view and structure. In the process of design, the user experience is tailored to different
target groups.
A well-designed user experience enables:

Improvement of a systems practicability and user efficiency

A decrease in the number of functionalities and interactions which do not contribute to the
achievement of the users goals
A clear definition of guidelines for the graphic design of the user interface and for the
implementation of a website or application

On the basis of IT architecture, we design navigation, content and functional elements of the
website solution for users. In these elements, we set out to construct model web pages for every
standard view of the website solution and then optimise user experience for each target group
found in these models. By attending to the entire user experience, designers can create a rich,
sensory experience, which helps to immerse users and encourage them to become fully involved in
the site and its message ... Through immersion, the user experiences joy and satisfaction: Positive
qualities that will be transferred to your brand.
Design
Until recently, graphic design mostly communicated how people see other people, but these
borders expanded with the transition to digital world. Static images are now combined to form films
and sound can be added. Time and space where and when something happens have become
two extremely important factors in the process of planning and designing for an interactive
environment.
Graphic images and elements accompany us at every step in todays world and represent one of
the key factors in establishing integral communication. A properly managed graphic message will
communicate important information to people faster, and website design is of key importance for
accurate positioning within a certain industry. Web design wraps personal requirements in the field
of aesthetics and usability into an organised and balanced product which integrates the worlds of
art, architecture, technology, literature, music and sound, philosophy, psychology and humanity.
The goal of this multidisciplinarity is the optimal use of all available tools to bring a message or a
product to the target group of users or customers more quickly. Design in the digital environment
further increases this speed as it can make use of several human senses at once. Above all, it
brings interactivity (communication in two or more directions) into the communication processes.
Good web design stands for the ability to combine various methods of communication and the
channels used by these methods. Since the digital universe is a place where all these technologies
and dimensions are in constant movement, the ability to perceive and adjust to these changes is
essential to successfully reach the target groups and goals of a certain project.
Different Kinds of Website
A website is a collection of web pages, images, videos or other digital resources that are
addressed with a common domain name or IP address on an Internet Protocol network. A web site
is hosted on at least one web server, accessible via the Internet or a private local area network. A
web page is a set of contents arranged on the web pages using Hypertext Markup Languages like
HTML, XHTML. All publicly accessible web sites collectively constitute the World Wide Web.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 70

WEB DEVELOPMENT WITH JOOMLA

The pages of a web site can usually be accessed from a simple Uniform Resource Locator (URL).
The first page of the website is called the homepage, which is connected to all inner pages. Though
most of the website is freely available but some websites require subscription to access.
For example: business sites, news sites, academic journal sites, gaming sites, message boards,
web-based e-mail, services, social networking web sites, and real-time stock market site.
On the basis of function websites can be classified in four major categories:
Personal website
Commercial website
Government website
Non-profit organization website

OVERVIEW OF THE DESIGN

DESIGN AND COLOUR
The elements and principles of design are the building blocks used to create a work of art.
The elements of design can be thought of as the things that make up a painting, drawing, design
etc. Good or bad - all paintings will contain most of if not all, the seven elements of design.
The Principles of design can be thought of as what we do to the elements of design. How
we apply the Principles of design determines how successful we are in creating a work of art.
THE ELEMENTS OF DESIGN
LINE: Line can be considered in two ways. The linear marks made with a pen or brush or
the edge created when two shapes meet.
SHAPE: A shape is a self contained defined area of geometric or organic form. A positive
shape in a painting automatically creates a negative shape.
DIRECTION: All lines have direction - Horizontal, Vertical or Oblique. Horizontal suggests
calmness, stability and tranquility. Vertical gives a feeling of balance, formality and
alertness. Oblique suggests movement and action
SIZE: Size is simply the relationship of the area occupied by one shape to that of another.
TEXTURE :Texture is the surface quality of a shape - rough, smooth, soft hard glossy etc.
Texture can be physical (tactile) or visual.
COLOUR: Also called Hue
VALUE :Value is the lightness or darkness of a colour. Value is also called Tone
THE PRINCIPLES OF DESIGN
BALANCE
Balance in design is similar to balance in physics

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 71

WEB DEVELOPMENT WITH JOOMLA

A large shape close to the center can be balanced by a small shape close to the edge. A
large light toned shape will be balanced by a small dark toned shape (the darker the shape
the heavier it appears to be)
GRADATION
Gradation of size and direction produce linear perspective. Gradation of color from warm to
cool and tone from dark to light produce aerial perspective. Gradation can add interest and
movement to a shape. A gradation from dark to light will cause the eye to move along a
shape.

REPETITION
Repetition with variation is interesting, without variation repetition can become monotonous.

The five squares above are all the same. They can be taken in and understood with a single
glance.

When variation is introduced, the five squares, although similar, are much more interesting
to look at. They can no longer be absorbed properly with a single glance. The individual
character of each square needs to be considered.
If you wish to create interest, any repeating element should include a degree of variation.
CONTRAST
Contrast is the juxtaposition of opposing elements eg. opposite colors on the color wheel red / green, blue / orange etc. Contrast in tone or value - light / dark. Contrast in direction horizontal / vertical.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 72

WEB DEVELOPMENT WITH JOOMLA

HARMONY
Harmony in designing is the visually satisfying effect of combining similar, related elements.
eg. adjacent colors on the color wheel, similar shapes etc.
DOMINANCE
Dominance gives a design interest, counteracting confusion and monotony. Dominance can
be applied to one or more of the elements to give emphasis

UNITY
Relating the design elements to the idea being expressed in a website reinforces the
principal of unity.

(Article source: http://www.johnlovett.com/test.htm)

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 73

WEB DEVELOPMENT WITH JOOMLA

Brain Power
NAME:

Lesson 1: Exercises 1

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

CONCEPTUALIZATION AND PLANNING

1. What is Conceptualization? Why We need to plan in Making our Website?:

2. Enumerate the four Major Categories of a Website

3. How are you going to come up a good plan in Making your personal Website?

4. What are the Elements of Design?

5. Enumerate the Principles of Design

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 74

WEB DEVELOPMENT WITH JOOMLA

Lesson 2: COMPONENTS AND ELEMENTS OF A TEMPLATE

KEY TERMS TO REMEMBER: TEMPLATES, COMPONENTS, ELEMENTS AND LAYOUTS
What Is a Joomla Template?
A Joomla template is a series of files within the Joomla CMS that control the presentation of the
content. The Joomla template is not a website; it's also not considered a complete website design.
The template is the basic foundation design for viewing your Joomla website. To produce the effect
of a "complete" website, the template works hand in hand with the content stored in the Joomla
databases. An example of this can be seen in Figure 9.1.

Figure 9.1 Template with and without content

Figure 9.1, Fig. A, shows the template in use with sample content. Fig B shows the template as it
might look with a raw Joomla installation with little or no content. The template is styled so that
when your content is inserted, it will inherit the stylesheet defined in the template such as link
styles, menus, navigation, text size, and colors to name a few.
WHAT IS COMPONENT?
A component is a kind of Joomla! extension. Components are the main functional units of
Joomla!; they can be seen as mini-applications. They are usually displayed in the center of the main
content area of a template (depending on the template).
Most components have two main parts: an administrator part and a site part. The site part is
what is used to render pages when being called during normal site operation. The administrator part
provides an interface to configure and manage different aspects of the component and is accessible
through the Joomla! administrator application.
Joomla! comes with a number of core components, like the content management system,
contact forms and Web Links.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 75

WEB DEVELOPMENT WITH JOOMLA

ELEMENTS IN JOOMLA
Element is a fast loading template series for Joomla, featuring CSS suckerfish drop-out
menus and 10 collapsible module positions.
This design is ideal for e-commerce, blogs, business services and other sites which require
more attention to typography, layout, clean graphics, and colors giving your site a professional and
controlled look.
Key Feature Overview
* XHTML valid/Tableless Search Engine Optimized
Element will perform better in search engines and be accessible to more viewers.
* CSS drop-down menu
CSS rather than JavaScript help more of your site get indexed by search engines.
* Integrated typography
Clean typography gives a professional look, critical to establishing your credibility and
gaining visitor trust.
* 10 fully collapsible module positions
No complicated module placement with too many choices.
Element's layout is easy to understand so you can set up your site in less time.
* 4 color module color options
Coordinated color schemes seperate well designed sites from bad ones. You don't have to
concern yourself with color, Element has 4 combinations for your modules, all easily
selectable in the backend.
LAYOUTS OF JOOMLA
The layout and content positioning of your Joomla website is defined by the Joomla
template you currently use. Below you can see a screenshot that represents the basic items,added
by the default Joomla template. You will find a short explanation of each item under the image. This
will help you understand better the structure and key concepts of a Joomla website layout and how
to change it.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 76

WEB DEVELOPMENT WITH JOOMLA

The available positions in Joomla are defined by the template you are using. In this tutorial we will
show the positions 1-10 in one of Joomla's default templates which is included in the official
installation package. To change the position of a certain module, you can access it from
the Extensions -> Module Manager page and then change its "Position" setting. Some of the
most commonly used position names are top, user1 to user6, left, right, header, footer,
breadcrumb, andnewsflash.
1. In the "top" position of the Joomla website the "Banners" and "Newsflash" modules are
placed by default.
The Banners module allows you to upload images that link to a desired URL. You
can define your banners from Components -> Banners and then display the selected items
by publishing the "Banners" module from the Extensions -> Module Manager page in your
Joomla administrative area.
The Newsflash module displays a single random article, or a number of articles in a
horizontal or vertical configuration. From your Joomla administration area you can select a
category of articles that will be displayed by this module.
2. The "Top menu" module is published into the "user3" position by default. You can easily
create and manage menus from the Menus -> Menus Manager page. You can then set
your "Top menu" module to display the menu you have just created
3. The "Breadcrumbs" module is placed into the "breadcrumb" position. It is a convenient
navigation method which displays the current page you are on and the full "path" to it. If you
are in a page called "Sample Page" that is under the main menu, the "Breadcrumbs" will
display Home -> Sample Page. Using Breadcrumbs is very useful especially when you have
multi-level menus.
4. The "Search" module is published in the "user4" position of the template. It gives your users
the option to search within the content of your website.
5. Several modules are published into the "left" position of the template. In this position you
can publish vertical menus, login forms and many other modules depending on your
particular needs.
6. The "Latest News" module is published into the "user1" position of the template. It displays
the most recently added articles from the selected category or from all categories. In
addition, you can specify the number of displayed articles depending on your preferences.
7. The "Popular" module is published into the "user2" position of the template. It will display a
selected number of articles that are visited the most. You can either select a category from
which the articles will be displayed or you can set the module to display the most visited
articles in the entire site.
8. This is the main part of your website. Here are the newest articles you have set to be
displayed on the front page.
9. A "Polls" module is published into the "right" position of the template. You can create the
actual polls from the Components -> Pollspage in the administrative back-end of your
Joomla application. Once you have created your Polls, you can choose which one to be
displayed on your website by editing the preferences of the "Polls" module from the
"Module manager".
10. "Banners" and "Footer" modules are displayed in the "footer" position of the template. You
can use the "Footer" module to display useful links, your copyright and other useful
information at the bottom of your page.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 77

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 2: Lab Exercises 1

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

CREATE OUR FIRST LAYOUT
Designing Manual Template Layout
Instructions:
1. Using paper and pen, design own template with the following:
a. Main Menu
b. Main Body
c. Users Login
d. Search Box
e. Header
f. Footer
2. Be very specific about the color, font, font size, font face, font style, alignment,
images/graphics, animation (if necessary),etc.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 78

WEB DEVELOPMENT WITH JOOMLA

Lesson 3: CREATING TEMPLATE FROM SCRATCH

STEPS IN CREATING TEMPLATE FROM SCRATCH USING GIMP
NOTE: In Creating you need to Install the Open Source Graphics/Image Application Program
GIMP (Any Version of GIMP )

1. Conceptualize the Deisgn of Your Template.

2. Identify the Template Components and Elements.
Knowing the components will help us organize the structure of our template. The first two are the
most important components of a template that must match exactly:
1.
2.
3.
4.
5.

index.php
templateDetails.xml
template_thumbnail.png
css/template_css.css
images/logo.png

Below are the major elements of a template:

1. Main Body
2. Modules/Modules Position
3. Identify where to place the elements

4. Design your layout in GIMP

Here are some steps in creating a web layout in GIMP.
(Resources: http://gimp-tutorials.net/websitetutorial)
Step 1
Create a new Image 780x1000
Step2
Fill the background with the colour #ededed using the fill bucket tool.
Step 3
Create a new layer and name it 'Header'.
Step 4
Use the Rectangle select tool and Drag across the full width which is 780x and a height of
125x use the Ruler as guides.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 79

WEB DEVELOPMENT WITH JOOMLA

Step 5
Now Select the Fill with Gradient tool and pick the FG to BG (RGB) Gradient and add the
color 000000 for FG and BG to 3a4146
Step 6
Now Drag from top to bottom make sure the line perfectly straight.

It should look like this now

For the logo will create a simple text as a logo with some reflection effect.
Step 7
Add text Gimp-tutorials.net with size 30px and font 'Trebuchet MS Bold' you can try your
own name and fonts of course :)
Step 8
Now to create the reflection duplicate the text name it logo reflection and place it below the
original one
Step 9
Using the flip tool will flip the logo reflection layer vertically

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 80

WEB DEVELOPMENT WITH JOOMLA

Step 10
Select the logo reflection layer and tick the 'Keep the Transparency box'.
Step 11
Use the Gradient fill tool and select 'FG to transparency' and change the color of the FG to
3a4146
Step12
Now drag from bottom to top several time to fad-out the bottom part of the reflection logo
text.

Step 13
Top Navigation bar, Create new Layer and use the rectangle selection tool to drag to the full
width of 780x and hight of 20x

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 81

WEB DEVELOPMENT WITH JOOMLA

Step 14
Now using th gradient fill pick FG to BF (RGB) Gradient and add the color 0276cf for FG and
BG to 82c9ff, apply the gradient from bottom to top as shown below

Now for the tabs, Create a new layer and name it Tab.
Step 15
Use the rectangle tool and draw a rectangle 105px wide and 8px high again use the Ruler
for guidance.
Step 16
now right click on the tab and go to Select>rounded and change the Radius% to 45.
Step 17
Now use the Gradient fill using th same colors as the nav bar,0276cf for FG and BG to
82c9ff.
Step 18
Now drag from bottom to top make sure you start from around 225px on the ruler and end at
125x on the ruler, or else the tab wont blend in with the nav bar very well, you you can see
how i started and ended the fill line in the picture below keeping on trying till its perfect, i did
:D

it should look like this

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 82

WEB DEVELOPMENT WITH JOOMLA

Step 19
Duplicate the Tabs 3 times, rename them to stay organized
and space them out like this

Step 20
now we would like to Centre the tabs, will do that by clicking on all the chain looking icons in
the layer dialog/window

Step 21
now add text for each tab, ill type in home,products,contacts,about.
its a good Idea to save your work right now using the XFC format to be on the safe side.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 83

WEB DEVELOPMENT WITH JOOMLA

Now time to create the left bar, it's going to be simple clean sidebar that works well with
CSS Based sites, we will place it to the left side of the layout.
Step 22
Create new Layer, name it 'left menu bar"
Step 23
use the rectangle selection tool and draw a 200px and 950x high selection which will go all
the way to the bottom then fill it with the colour #232323
Step 24
chain link the tabs as well as the text and move it so its aligned like this

Step 25
Now to Create the line separators for the left menu bar, create a new layer, name it Line,
Zoom in to about 300% so you can see, draw a rectangle thats 1px high and almost the
width of the menu the then fill with the color 232222
Step 26
Draw another line and use the color 4e4c4c.
This is how it looks zoomed in at 200%

Step 26
Duplicate 7 of the lines layer and space them out like this.
Step 27
Add some light Gradient effect to the background first
Create a new layer name it 'gradient effect' then draw a
205px rectangle and fill it from bottom to top with the
colour #ededed for FG and #ffffff for BF.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 84

WEB DEVELOPMENT WITH JOOMLA

Step 28
Create another layer and do the same for the bottom part of the body but this time draw
from top to bottom.

Now the main layout design is done, time to add some basic content, will need some nice
photography touch going in there, one of my favorite free stock image sites is
http://www.stockvault.net/ its 100% free! it wont cost you even a penny :P. head over there
and download a suitable picture
.
here is the what i used

You can download it from here

http://www.stockvault.net/details.php?gid=98&sgid=&sgid=&pid=6296
Step 29
open your new downloaded photography image and select the Scale tool and resize it from
1500 x 1835px to 1024x705, because the image is too big will only want a nice scene of it,
so grab the select tool and drag across to about 569x width and 179x height from the
desired scene/area,then extract/cut it by pressing CTRL+C then going to our website tutorial
window and pressing CTRL+V to paste it, align and place it under the the header as shown
below.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 85

WEB DEVELOPMENT WITH JOOMLA

Step 30
now will add text links to the left menu, so grab the text tool type in about 5-6 words and
align it perfectly in the middle of the divider lines.
Step 31
Repeat this to the other dividers and always make sure its aligned perfectly, alignment is
everything when it comes to graphic design, this is how it should look

Step 32
Again grab the text tool add a few paragraphs and place it in the centre of the empty space
make sure all sides have equal space to get it perfectly aligned.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 86

WEB DEVELOPMENT WITH JOOMLA

Step 33
Now the footer usually would have just the copywriter text with maybe an extra nav links, i
just added the Gimp mascot that can be found on gimp.org and a small text of gimptutorials.net url.

That's it you have a full template All done with Gimp :) It will work with the right website
hosting.
Changed the text logo to suite the site
more, its always good to experiment
different fonts to get that perfect look.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 87

WEB DEVELOPMENT WITH JOOMLA

Lesson 4: JOOMLA EXTENSION IN DREAMWEAVER

What is Dreamweaver Extension?
Dreamweaver Extensions allow third-party developers to create custom extensions that install into
Dreamweaver. The installation files are MXP files. To install an MXP file, you simple double click it.
The Macromedia Extension Manager will install the extension.

What is Joomla Dreamweaver Extension?

Joomla Dreamweaver Extension is an MXP file, which is the format used for Dreamweaver
Extensions. The extension will install the Joomla solutions toolbar in Dreamweaver. The Joomla
solutions toolbar will make creating new Joomla templates much easier.
HOW TO INSTALL JOOMLA DREAMWEAVER EXTENSION
1.
2.
3.

4.

5.
6.

Download the Joomla Dreamweaver Extension (an .mxp file)

Double-click the MXP file. You should message that extension installed successfully. The
Extension Manger window will open.
After installing the extension, you need to make sure it is turned on in the Extension
Manager. If the Extension Manager did not open in the previous step, open the Extension
Manager. Go to StartPrograms and in the Macromedia programs start the Macromedia
Extension Manager.
Because the Extension Manager is used to administer extensions for all Macromedia
applications installed on your computer, make sure that Dreamweaver is selected in the
applications drop down list at the top of the Extension Manager.
In the On/Off column, place a check next to the Joomla extension.
If Dreamweaver was already running, restart Dreamweaver so it can load the new
extension.
ScreenShot:

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 88

WEB DEVELOPMENT WITH JOOMLA

How to use Joomla Dreamweaver extension
Using the Joomla Dreamweaver Extension will save you a lot of time when creating new Joomla
templates. To get started, you will create a new PHP document in Dreamweaver (because all
Joomla templates must be PHP files):
1.
2.
3.

4.

5.

Start Dreamweaver.
Create a new PHP document. Click FileNew and then select Dynamic Page and PHP.
Click the Create button. A new PHP document will open in Dreamweaver.
Delete all the default code that Dreamweaver added to the new PHP document. Will do not
need it, because we will create all the basic code using the Joomla Dreamweaver
Extension.
Now it is time to use your new extension. Make sure the toolbar for the extension is visible.
Click Window and place a checkmark next to Insert so that toolbars used to insert code
snippets are visible. If you still do not see the toolbar for the Joomla Dreamweaver
Extension, select the drop down on the Insert toolbar and choose Joomlasolutions. To see
all Insert toolbars, select Show as Tabs instead of selecting Joomlasolutions. Then
Joomlasolutions will be one of many tabs on the Insert toolbar.
Place your cursor in the empty PHP document. Click the Insert Head Code icon on the
Joomlasolutions toolbar. All head code for a Joomla template will be added to your new
PHP document.

Here is a screenshot showing the Joomlasolutions toolbar that was added using the Joomla
Dreamweaver Extension. The Joomlasolutions toolbar has many icons for adding everything you
need in the standard Joomla template. In this screenshot, the Insert Head Code icon was selected
to add the head code for a Joomla template.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 89

WEB DEVELOPMENT WITH JOOMLA

How to convert index.html to index.php through inserting the Joomla Element codes?

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 90

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 4: Lab Exercises 2

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

(Convert HTML file to PHP file)

Instructions:
1. Download Template for Joomla
2. Create your own folder make sure your directory structure looks like this:

3. Back-up the HTML file

4. Rename the HTML file to PHP file
5. Modify its content and add the PHP scripts.
6. Save your work as index.php in your folder.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 91

WEB DEVELOPMENT WITH JOOMLA

Lesson 5: CREATING CSS LAYOUT TEMPLATE

What is CSS?
CSS is an acronym for Cascading Style Sheets.
What can I do with CSS?
CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts,
colors, margins, lines, height, width, background images, advanced positions and many other
things.
HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more
accurate and sophisticated. CSS is supported by all browsers today.
What is the difference between CSS and HTML?
HTML is used to structure content. CSS is used for formatting structured content.
Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented
the World Wide Web, the language HTML was only used to add structure to text. An author could
mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such
as <h1> and <p>.
As the Web gained popularity, designers started looking for possibilities to add layout to online
documents. To meet this demand, the browser producers (at that time Netscape and Microsoft)
invented new HTML tags such as for example <font> which differed from the original HTML tags by
defining layout - and not structure.
This also led to a situation where original structure tags such as <table> were increasingly being
misused to layout pages instead of adding structure to text. Many new layout tags such as <blink>
were only supported by one type of browser. "You need browser X to view this page" became a
common disclaimer on web sites.
CSS was invented to remedy this situation by providing web designers with sophisticated layout
opportunities supported by all browsers. At the same time, separation of the presentation style of
documents from the content of documents, makes site maintenance a lot easier.
Which benefits will CSS give me?
CSS was a revolution in the world of web design. The concrete benefits of CSS include:

control layout of many documents from one single style sheet;

more precise control of layout;
apply different layout to different media-types (screen, print, etc.);
numerous advanced and sophisticated techniques.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 92

WEB DEVELOPMENT WITH JOOMLA

CREATING CSS LAYOUT FROM SCRATCH
(Article source: http://www.subcide.com/articles/creating-a-css-layout-from-scratch)

TheDesign
Below is the design we will be using as the basis of this lesson. Our mission is to slice this puppy up
using nothing but XHTML, CSS, and a few images:
First we need to identify the main structural elements of the design, so that we know how to
structure our HTML document.
The web is very heavily based around rectangles, and we need to remember that when dividing up
our design. These main divisions we make will end up being <div> tags. A <div> is basically a
rectangular container that we can position using CSS.
The diagram below shows how we will divide the design.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 93

WEB DEVELOPMENT WITH JOOMLA

We have identified 5 major elements:
1.
2.
3.
4.
5.

Main Navigation
Header
Content
Sidebar
Footer

Default HTML Template

I have created a basic HTML document that I use as a starting point for all my websites. If you do
not understand what a particular line of code means, hold your mouse over that line for an
explanation.
Copy the template and paste it into your HTML editor of choice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style> <style
type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
Save this as index.html in your websites root (htdocs) directory.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 94

WEB DEVELOPMENT WITH JOOMLA

The structure of your website directories should be like so:

Setting the canvas

As youll notice in the design, everything on our page is 760px wide or less, and nothing floats
outside that width. What we are going to do is create a container for our page that is 760px wide,
and centered in the middle of the page. Our 5 main elements will be placed inside this container.
Between the <body> </body> tags, create a <div> with an id=page-container attribute:
<body>
<div id="page-container">
Hello world.
</div>
</body>
And thats all the HTML we need for our container. Onto the CSS.
Create a new blank text file, and save it as master.css in the /css/ directory.
Create a new rule in the stylesheet to select the page-container:
#page-container {
}
The # in front of the id tells the browser that we are selecting an id. For a class we would use a.
instead eg: .page-container { }.
An id is a unique identifier that we use for things that are only going to occur once on the page. So
for headers, footers, navigation, etc we use id's, and for any recurring elements like links we should
use classes, which can occur multiple times on the same page.
We won't be able to see the changes we are making to this <div>, because it is transparent by
default. So the first thing we will do is make the background of the div red, to give us a visible
indicator of what we are doing:
#page-container {
background: red;
}
You should see something like this across the full width of your browser:

First we should set a width of 760px on this div.

#page-container {
width: 760px;
background: red;
}
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 95

WEB DEVELOPMENT WITH JOOMLA

Refresh the page in your browser to see the rule being applied.
Next we want to center this div. This is done by setting the margins on it to auto. When the left and
right margins are set to auto, they will even each other out and the div will sit in the center of its
container.
#page-container {
width: 760px;
margin: auto;
background: red;
}
Now you should have a centered red 760px wide block with Hello World. written in it. But its sitting
about 8px away from the top/sides of the browser.
This is because the html and body tags have default margins and/or padding on nearly all browsers.
So we need to write a CSS rule to reset the margins and padding on the html and body tags to
zero. Add this rule to the very top of your css file:
html, body
{
margin: 0;
padding: 0;
}
A comma in between CSS selectors stands for or, so here the rule will be applied to the html tag
or the body tag. Because both exist on the page, it will be applied to both.
Brilliant, now our box is where it should be. Note that as more content is added to this div, it will
automatically change its height to fit whatever content is placed inside it.

The Major Elements

We need to add 5 divs, all with individual ids that describe their purpose. These divs will
correspond to the major areas of the design we identified in Step 2. Replace the Hello World. text
with the divs below. Just for now well also put text inside the divs for easy visual identification
when we view the page.
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 96

WEB DEVELOPMENT WITH JOOMLA

Your page should now look something like this:

Without CSS, the divs will be arranged from top to bottom, one under the other, in the same order
as they are in the code. This is usually refered to as the flow of the document.
So lets use the information we have to make our divs the correct size.
Remove the red background from the #page-container, and add a new rule for #main-nav.
Set the background of the main nav to red so we can see it, and set its height to 50px:
#page-container {
width: 760px;
margin: auto;
}
#main-nav {
background: red;
height: 50px;
}
Notice we didnt specify the width of the div. This is because by default, a div will stretch to fill its
parent container, which in this case, is our #page-container div that was set to 760px wide.
Do the same thing for the header div, using the height we got in step one. Make this one blue.
#header {
background: blue;
height: 150px;
}
While were at it, lets do the footer. The footer can be orange.
Remember when writing your stylesheet, that you should group your styles together. So all the
header styles would go together. All the footer styles would be together, and all the navigation
styles would be together. Also I find it helps to structure them in a similar order to the HTML, so
header near the top, footer near the bottom.
#footer {
background: orange;
height: 66px;
}

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 97

WEB DEVELOPMENT WITH JOOMLA

Now the next 2 divs are slightly different. The heights are dependent on the content thats inside
them, so we wont set a height. Lets make them dark green, and green. Put the rules in between the
header and the footer rules in the css. This makes them easier to find once the stylesheet gets
larger.
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
If all has gone well, you should have a page that looks like this:

Floats
Floats can be a tricky concept to get your head around. Basically a float is an element that is
aligned against the left or right side of its container. (for more detail, read maxdesigns in
depth introduction to floats).
In the case of this website, we are going to float our sidebar-a div to the right, with a width of 280px.
Add the following to your CSS:
#sidebar-a {
float: right;
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 98

WEB DEVELOPMENT WITH JOOMLA

width: 280px;
background: darkgreen;
}
You have now successfully floated your first div, and you should now have a page that looks like
this:

Just for testing purposes, replace the text in the content div to this:
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

Notice that the text in the content div wraps around the floated sidebar div, as shown below:
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 99

WEB DEVELOPMENT WITH JOOMLA

This isnt what we want. We want the content div to sit alongside the sidebar div, with its right edge
against the left edge of the sidebar.
An easy way to achieve this in a float layout like this is to put a right margin on our content div that
is the same width as our sidebar, in this case 280px. This will push the right edge of the content
away from the right edge of the page-container.
#content {
margin-right: 280px;
background: green;
}
Great, weve almost got the float layout sussed. But theres one more thing we need to consider
what happens if the sidebar div is taller than the content div?
Lets see. Copy and paste this text into the sidebar div:
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

Thats not what we want at all. The reason the footer hasnt moved down is because the sidebar is
floated right.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 100

WEB DEVELOPMENT WITH JOOMLA

Explanation: By default, any floated element will not push down elements that are below it. This is
because floated elements are not considered part of the document flow. Its like they are on
another layer floating above the other elements, and becuase of this, it cant effect their positions.
What can we do to fix this problem? Introducing the clear css property.
Add this to your stylesheet:
#footer {
clear: both;
background: orange;
height: 66px;
}
When an element has the clear property assigned, if it comes into contact with a float it is placed
right below where that float ends. You can specify if it is effected by only left floats or only right
floats, in this case we could use either right or both. Well use clear: both just to be safe.

AdditionalStructure
Now that we have the base layout divs in place, we can add the rest of the structure that will make
up the bare bones of this website.
The main things we still need to add are:

Navigation Links
Headings (Site Headings and Content Headings)
Content
Footer Information (copyright info, credits, and alternative navigation)

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 101

WEB DEVELOPMENT WITH JOOMLA

In order to start implementing these things without breaking the page layout, we will create a helpful
little class called hidden.
Add this near the top of your stylesheet, after the body tag definition:
hidden {
display: none;
}
What this means is now we can set any element in the site to have the class hidden, and it wont
show on the page at all. This will come in handy later. You can forget about it for now.
Lets talk about headings.
Headings in an HTML document are defined by the tags <h1> through to <h6> in order of
importance to the document. For example, <h1> for the website name, <h2> for the primary
headings (ie page name), <h3> for secondary headings, etc
Well add an <h1> inside our Header div, and set it to the name of the company, Enlighten Designs
in this case.
<div id="header">
<h1>Enlighten Designs</h1>
</div>
If you refresh your page you will notice that Enlighten Designs has come up in big letters inside the
header, but there is also now a lot of white space around the heading. This is caused by the default
margins on <h1> tags. So we need to strip the margins and padding by doing this:
h1 {
margin: 0;
padding: 0;
}
Now well add the navigation. The ins and outs of how the navigation will work can be rather
complicated, and will be addressed fully in its own section later on.
Hindsight Note: Using Definition Lists as navigation is terrible practice. Im not going to be
revisionist and rewrite the tutorial, but just be aware that in production sites you should always use
unordered lists for navigation. Using dls in the first place was just a lazy way of getting around
some IE bugs that only affected unordered lists.
The navigation will be structured as a definition list (<dl>) with individual ids relevant to each
navigation item on each definition term (<dt>). These Definition terms will have links to our major
sections inside them. If that sounds confusing, just add this code to your main-nav div:
<div id="main-nav">
<dl>
<dt id="about"><a href="#">About</a></dt>
<dt id="services"><a href="#">Services</a></dt>
<dt id="portfolio"><a href="#">Portfolio</a></dt>
<dt id="contact"><a href="#">Contact
Us</a></dt>
</dl>
</div>
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 102

WEB DEVELOPMENT WITH JOOMLA

In easy to understand terms, the <dl> acts as a container, the <dt>s are unique identifiers for each
navigation item, and the links arelinks.
We use the unique ids later when we come to make this navigation look like it should, with its sexy
image rollovers. But more on that later.
If you refresh, youll notice it looks a bit ugly, so for now, well just hide the navigation we added,
with the hidden class we made earlier.
<div id="main-nav">
<dl class="hidden">
<dt id="about"><a href="#">About</a></dt>
<dt id="services"><a href="#">Services</a></dt>
<dt id="portfolio"><a href="#">Portfolio</a></dt>
<dt id="contact"><a href="#">Contact
Us</a></dt>
</dl>
</div>
And like *that*, it was gone
Now well jump down to the footer because its relatively easy. There are 2 parts to the footer, the
copyright info and credits on the left, and the alternative site navigation on the right.
We want the alternate navigation to float right, like we did with the sidebar and the content, so well
put that in the div first. In theory you should be able to float divs regardless of where they are in the
source, but bugs in IE make this difficult, so for now, any floated items should come first in the
source order.
Place it in a div with a unique id like so:
<div id="footer">
<div id="altnav">
<a href="#">About</a> <a href="#">Services</a> <a href="#">Portfolio</a> <a href="#">Contact Us</a> <a href="#">Terms of Trade</a>
</div>
</div>
Underneath that div, we will add the copyright and credits text.
<div id="footer">
<div id="altnav">
<a href="#">About</a> <a href="#">Services</a> <a href="#">Portfolio</a> <a href="#">Contact Us</a> <a href="#">Terms of Trade</a>
</div>
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 103

WEB DEVELOPMENT WITH JOOMLA

Copyright Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/">Enlighten
Hosting</a> and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>
And thats the footer done for now. Just to make sure youre doing fine, this is what your site should
look like:

Moving onto the main content area, lets add the content. Im ripping this content directly off the
design in step 2. Use <h2> tags for the headings About and Contact Us. Enclose the paragraphs
in <p></p> tags, and use <br /> for line breaks.
<div id="content">
<h2>About</h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider
that specialises in front and back end development. To view some of the web
sites we have created view our portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any
questions or would like more information about the services we provide
please feel free to contact us.</p>
<h2>Contact Us</h2>
<p>Phone: (07) 853 6060<br />
Fax: (07) 853 6060<br />
Email: <a
href="mailto:[email protected]">[email protected]</a><br />
P.O Box: 14159, Hamilton, New Zealand</p>
<p><a href="#">More contact information</a></p>
</div>
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 104

WEB DEVELOPMENT WITH JOOMLA

Refresh your page youll notice there is more of that white space popping up around the content div.
This is because of the default margins on the <h2> tags and the <p> tags.
We need to strip their margins and padding. However, we dont want to do this to every single
paragraph tag or secondary heading thats going to be on the website. To do this we need to use
child CSS selectors.
All elements in HTML have a parent, child relationship to one another. If tag a is inside tag b,
then tag b is the parent of tag a. In the code above, our <h2> tags and our <p> tags are both
children of the #content div.
If we want to select the child elements of a specific parent, we separate them with a space, like the
example below:
#content
h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}
So the above rules tell the browser to apply these styles ONLY to <h2>s and <p>s that are child
elements of the #content div.
Some Basic Text Styles
Sweet jesus! Are you sick of looking at those awful background colors or what?!
Get rid of them. Rip them all out except for the red navigation.
That looks a little better, but the text still looks horrible. Lets set a global font family, color, and size
to use as a nice base. The font attributes we set on the body will automatically inherit down to any
other text in the site unless specifically overridden with another style. Make a new CSS rule just
before the hidden class near the top of the stylesheet:
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666
;
background: #ffffff;
}
The stuff above is pretty self explanatory
.
If everything is going according to plan, you should be looking at something like this:

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 105

WEB DEVELOPMENT WITH JOOMLA

What this needs is some padding to separate those blocks of content from each other.
According to the design, the gap below the content headings is roughly 15px, and the gaps below
each paragraph are around 15px. So lets grab those 2 css rules we made earlier and apply
padding-bottom rules to them:
#content
h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p
{
margin: 0;
padding: 0;
padding-bottom: 15px;
}
We also need 25px of padding around the whole content div, and the whole padding div, giving
them some space to breath.
This part SHOULD be easy. In theory you would just set padding: 25px; on the divs, but sadly, due
to problems in Internet Explorer, we cant do this.
There are 2 possible ways to tackle this problem, one involves writing some funky CSS Hacks to
hide certain css rules from one browser, while showing it to another, but because padding is
something we use a lot, were going to do it the other way.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 106

WEB DEVELOPMENT WITH JOOMLA

The other way is to insert an additional div inside the divs which we want padded, and set their
class to padding. Padding is the only thing that will be applied to these padding divs.
The reason this works is that the padding divs dont have a set width. As a rule, try not to add
padding and a static width or height on the same element.
<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida
enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas
in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada
enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas
vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget,
placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse
platea dictumst.
</div>
</div>
Do the same for the content div.
Now in the stylesheet we will create 2 new rules, shown here in green:
#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
#content .padding {
padding: 25px;
}
Using the same method as we did before, we have selected only the elements with a
class=padding that are children of the #sidebar-a, or #content divs.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 107

WEB DEVELOPMENT WITH JOOMLA

The leading (vertical space between lines of text) on the content text and sidebar text should be
larger, according to the graphic draft. In CSS, leading is set with the line-height attribute. Lets add a
line height of 18px:
#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}
#content {
margin-right: 280px;
line-height: 18px;
}
Moving on, the heading <h2>s that we added look pretty ugly. Because the font they are using isnt
a web font, we are going to have to replace them with images. Create 2 images like the ones below,
and put them in the /images/headings/ directory

Replace the heading text with these images, but remember to keep the <h2> tags around the image
tags, and remember to put alt attributes on the images. Alt attributes are designed to display as an
alternative to the image if a user is viewing the page in a browser that does not support images, or
has images turned off. It is also useful for search engine spiders, as they cannot understand
images.
<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>
<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact
Us" /></h2>
Its starting to take shape. You should be looking at something like this:

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 108

WEB DEVELOPMENT WITH JOOMLA

The Header
To implement the header, we need to get the background image applied to the header div, replace
the Enlighten Designs heading with a graphical logo, and position it in the correct place on the
header (the dark grey bar to the right).
First create 2 images like the ones below (or just save these ones):

/images/general/logo_enlighten.gif

/images/headers/about.jpg
The first part is easy. Set a background image in the CSS using the format below:
#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
The background property that we just used is actually a shorthand property which allows us to
specify the background color, image, image position, and how the image repeats, all in one
property. Weve set the background to the same shade of orange as the header uses just so that
the page doesnt look too bland if the user doesnt have images enabled in their browser. Paths to
images in your CSS file are relative to the CSS file, not the html page. This is why the ../ is required
in the path above.
Now replace the Enlighten Designs text with the logo image. Again, remember to keep the <h1>
and put a descriptive alt attribute.
<div id="header">
<h1><img src="images/general/logo_enlighten.gif"
width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 109

WEB DEVELOPMENT WITH JOOMLA

Now we have to position it on the right where it should be. Well do this by floating the <h1> to the
right, and then using margin-top and padding-right properties to get the position exact. Add the
following to the <h1> rule in your stylesheet:
h1 {
margin: 0;
padding: 0
;
float: right;
margin-top: 57px;
padding-right: 31px;
}

The reason we used padding-right instead of margin-right is because margins can often trigger
weird bugs in IE if used in certain places.
Footer
First we need to make the text look right. The design shows very light grey (#c9c9c9) Tahoma 10px
text. Im sure you can figure this one out yourselves, but for the sake of copy/paste:
#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9
;
}

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 110

WEB DEVELOPMENT WITH JOOMLA

And to change the link color (and remove the link underline) we add this:
#footer a {
color: #c9c9c9;
text-decoration: none;
}
But the links need some way to stand out when you mouse over them, so well make them turn
orange on hover:
#footer a:hover {
color: #db6d16;
}
Weve also got to add a 1 pixel top border on the footer div, set some padding, and make the lineheight 18px (increasing the leading). Because we are setting padding on the footer div, we will
remove the height property to stop the padding/width/height bug I mentioned earlier. We dont really
need height on this div anyway:
#footer {
clear: both;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
The last thing left to do is float the alternate navigation to the right. Note that floated elements must
have a width specified to work properly, so set the width to slightly larger than the nav actually
needs, and set the text alignment to right so the text sits where it should.
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 111

WEB DEVELOPMENT WITH JOOMLA

The Navigation
Lets start out easy. Remove the red background in the css, and show the navigation by removing
the hidden class on the definition list.
The method of image rollovers we are going to use for this menu is a 100% CSS solution. The
basic premise behind it is to position the items in a definition list next to each other (side by side)
hide the text on them, and use CSS to change the background image depending on what state the
button is in (rollover, normal, or selected).

For each of the 4 nav items we need to create an image like the one above. The first 3rd of the
image is the normal state, the second is the mouseover state, and the third is the selected state.
The animated gif below shows how this will work:

Hopefully you have some kind of understanding of how this works from the diagram above. Lets
make our 4 nav images.
Save them in /images/nav/

Now im going to do my best to explain the CSS behind this block by block, bear with me.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 112

WEB DEVELOPMENT WITH JOOMLA

Replace your #main-nav rule with the code below:
/* Main Navigation */
#main-nav { height: 50px; }
#main-nav dl { margin: 0; padding: 0; }
This sets the main-nav div height to 50px, and strips all margins from the data list.
/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
This is a hack that does 2 things, sets the left padding of the main-nav to 11px (so its bumped in
slightly like the design shows), and fixes a bug on IE5/mac.
#main-nav dt { float: left; }
This sets the definition titles (our individual nav item containers) to float left, which stacks them left
to right, instead of one under the other.
#main-nav dt a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}
Sets the link to the same dimensions as its surrounding container, and hides the text using the
overflow property.
#main-nav dt a:hover {
background-position: 0 -50px;
}
Sets the background position to move up 50px when a link is hovered.
#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav dt#services,
#main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); }
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 113

WEB DEVELOPMENT WITH JOOMLA

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
Sets the individual widths of each nav item, and the paths to each image.
Now if all your images are named as they are above, and are saved in the correct place, your
navigation should work.
Last thing we need to do to make the navigation work, is to get the selected button states to show
up when you are on the corresponding page.
We need to add some new css, and modify some existing css to achieve this. Add this CSS below
the rest of your navigation CSS:
body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -100px;
}
This large CSS selector checks to see what class the body tag has, and then sets the background
position of the correct navbar. So if you wanted the about navbar to be selected, you would set a
class=about on the body tag. Lets do that now:
Now the problem we have, is that we also want the header image to change based on what section
we are viewing. So we need to modify the #header rule like so:
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
Now when you create pages for your other sections, youd just change the class on the body from
about, to say, contact, set up a css rule pointing to the correct header image, and youre done.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 114

WEB DEVELOPMENT WITH JOOMLA

MODIFYING CSS LAYOUT TEMPLATE
Your Joomla web site uses CSS to keep the text, background colors, module header colors,
headings, etc the same throughout your site. If you want to change the color of your content
headings, your text, or background page color, you would do this from the CSS file. You can also
change the colors of your links, the background of your menus, or the name of image files that
show up.
The HTML tells your template where to pull modules in, and includes the footer text on your
template (depending on your template). If you want to change the footer text on your template, this
is the place to do it. Also, some templates have some alternate options in the HTML file such as
making your template right justified, centered, or left justified. Some also allow you to change whole
color schemes from the HTML file.
How to edit your CSS file in your Joomla web site:
1) Log in to the Administrator back-end.
2) In the row of menus across the top, go to "Extensions"
3) Choose template manager in the drop down menus
4) Choose Site templates in the menu that slides out to the side
5) When the page loads, put a check mark in the box next to your default template.
6) Click "Edit CSS" in the top right hand corner.
7) Make the changes to your CSS file that you wish to
8) Click the disk icon to save.
How to edit your HTML file in your Joomla web site :
1) Log in to the Administrator back-end.
2) In the row of menus across the top, go to "Extensions"
3) Choose template manager in the drop down menus
4) Choose Site templates in the menu that slides out to the side
5) When the page loads, put a check mark in the box next to your default template.
6) Click "Edit HTML" in the top right hand corner.
7) Make the changes to your html file that you wish to
8) Click the disk icon to save.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 115

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 5: Lab Exercises 2

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

MAKE A HOME FOR OUR TEMPLATE
Instructions:
1. Open your Joomla account
2. GO TO EXTENSIONS AND CLICK THE TEMPLATE
3. Click the css code format and type the sample xml format.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 116

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 5: Lab Exercises 3

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Adjust the Style Sheet

Modifying CSS
Instructions:
1. Go to your downloaded Template folder, open the template_css.css.
2. Edit the CSS template by replacing some of the images located in its code.
(Dont forget to place your preferred pictures on the images folder.)
3. Save your work and zip it and install it in Joomla.
4. Set it as the default template.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 117

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 5: Lab Exercises 4

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Adjust the Style Sheet

Creating the appropriate CSS template

Instructions:
1. Go to your downloaded Template folder, open the styles.css file.
2. Copy it inside the CSS folder that your have created .
3. In the styles.css file, edit the contents of the code especially the url for the
images instead of url (images/image_name.gif) it should be:
url(../images/bg.gif).
4. Save it as template_css.css in the css folder that you have created.
5. Zip your folder and install it in Joomla

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 118

WEB DEVELOPMENT WITH JOOMLA

Lesson 6: CREATING THE XML FILE

What does XML stand for?
eXtensible Markup Language
Language
XML is a language to define other languages: it is in fact a meta-language.
Mark-up
This informs us that the structuring elements of that language will be tags, like used in HTML: a tag
name enclosed in brackets: <ATag>.
eXtensible
XML is not a language (which is by definition fixed) but a meta-language. XML is a set of rules that
a language must respect in order to be XML conformant. Therefore you can define your own markup language, and make it to evolve at your envy.
Where does XML come from?
In a nutshell, XML was first developed to make SGML usable for Web purposes. SGML is a very
large and complicated norm (thousands of pages). XML is kind of a subset of SGML, but at the
same time has more restrictive rules, so that parsers and transformers working on XML are faster
and more easy to implement.
XML is more easy than SGML
XML was aimed to Web applications but proved useful for plenty of other applications
XML is a W3C recommendation to which are attached other recommendations as XPath, XPointer,
XLink, DOM, XSL, SVG, etc.
So, what is it used for?
XML solves your problems
XML stores your data
XML makes the coffee
XML gives meaning to your data
The key point is this last one. Meta-Data is your friend. That's the door open to true inter-operability
and re-usability at low costs.
Another key concept is the clear separation between the data and the way it is rendered or
displayed. In XML you put the data and any meta-data to identify this data. Then on a stylesheet
you will define the way a particular type of data is rendered.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 119

WEB DEVELOPMENT WITH JOOMLA

What does XML look like?
XML looks like HTML but is NOT HTML.
<page id="acronym">
<title>
What does <acronym>XML</acronym> stands for?
</title>
<para>eXtensible Mark-up Language.
These are some more precision, in reverse
order:</para>
<para>This is another piece of text
for the needs of that presentation.</para>
</page>
What we generally see of XML is its flat version. Indeed XML data is structured like a tree. The root
element being here <page>...</page>. One must always keep in mind the tree structure of an XML
document. It is another key of XML data. Here, the element <title>...</title> is not simply a <title>,
but a children of <page> and the first preceding sibling of <para>...
What do I need to write XML?
First of all it is necessary to define your language or the tags that will be allowed in your
XML. This information is stored in a DTD (Document Type Definition). You can create your own or
choose an existing DTD. If data as to be stored in your format by a lot of people it is a good idea to
write an interface.
Finally you need your data to be rendered. That implies the creation of a stylesheet, that will
define the transformation of your data into a common display format like HTML or PDF. You can
also decide to export the data to another system like a database.
What does a DTD look like?
A DTD simply defines the nodes of the XML tree, Which parents accept which children, and the
attributes associated to each elements.
<!-- Main DTD defining the structure of a presentation -->
<!-- Content elements -->
<!ENTITY % content "image|items|listing">
<!-- The root element -->
<!ELEMENT presentation (title,abstract,page*)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT abstract (para*)>
<!ELEMENT page ((title,abstract?),(para|section|%content;)*)>
<!ATTLIST page id ID #REQUIRED>
<!ELEMENT section (title,(para|%content;)*)>
<!ELEMENT para (#PCDATA|%content;)*>
<!ELEMENT image EMPTY>
<!ATTLIST image name CDATA #REQUIRED>
<!ELEMENT items (item+)>
<!ELEMENT item (para+)>
<!ELEMENT listing (#PCDATA)>

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 120

WEB DEVELOPMENT WITH JOOMLA

HOW TO CREATE THE XML FILE?

Below is the code for the file. Just type it in Dream weaver or Notepad, replace the words
that are emphasized with the proper information and save it as templateDetails.xml :
<?xml version="1.0" encoding="iso-88598859-1"?>
<mosinstall type="template" version="1.0.0">
<name>template_name</name>
<creationDate>date</creationDate>
<author>author_name</author>
<copyright>copyright_info</copyright>
<authorEmail>author_email</authorEmail>
<authorUrl>author_url</authorUrl>
<version>template_version</version>
<description> template_description</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/image_filename</filename>
<filename>images/image_filename</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>

Lesson 7: CREATE A TEMPLATE THUMBNAIL

What is a Template Thumbnail?
A model or guide for comparisons. It Is a miniature view of your template,
How to Create a Template Thumbnail?
To create a thumbnail, take a screen shot of the mockup you made previously. Resize this
screenshot to approximately 200px by 200px. Then save this as template_thumbnail.png in the
template directory.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 121

WEB DEVELOPMENT WITH JOOMLA

Final Procedure in Making your Joomla Template

1. Review the directory structure.
2. Zip the entire template directory and name it as template_name.zip
3. Install. Put your template on a test drive. This will enable you to know if your template
works and if not, this way you will be able to debug your template.
4. Finishing Touches on Joomla environment allows you to enhance the template to
make it more suitable to your preferred website.

Quick Guide in creating a template

1. Design a layout in GIMP then slice it and save as index.html
2. Make a directory structure
3. Convert the index.html to index.php using the Dream weaver extensions
4. Create a CSS template and name it template_css.css
5. Make an XML file ( templateDetails.xml )
6. Create a template_thumbnail.png
7. Zip the template directory

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 122

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 6: Lab Exercises 1

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Making the XML file

Instructions:
1. Using your downloaded Template folder, create an XML file for the template.
2. Together with the handouts, open Dreamweaver or your Text Editor and start
encoding the tags for the XML file.
3. Type in the necessary information and save it as templateDetails.xml in your
folder.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 123

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 7: Lab Exercises 1

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Making the Template Thumbnail

Instructions:
1. Using your downloaded Template folder, create a template thumbnail for the
template.
2. Take a screen shot of the template you made previously.
Resize this screenshot to approximately 200px by 200px.
3. Then save this as template_thumbnail.png in the template directory.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 124

WEB DEVELOPMENT WITH JOOMLA

HANDS ON
NAME:

Lesson 7: Lab Exercises 1

_______________________________ DATE:_____

GRADE AND SECTION:__________________ Score: _______

Package the Template

Instructions:
1. Upon completing your new template, follow the final steps in
Creating a Template ( See, Final Procedure in Making your Joomla Template)
2. Package and Install your newly template to your Joomla Site.
(If Doesnt Work, Review and debug your template)
3. Make your new template as Default Joomla Template

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 125

WEB DEVELOPMENT WITH JOOMLA

Course Description:
The course removes the myth behind web development. It presents web development as
something that is for everyone and not only the experts. The course makes use of
JOOMLA, an open source Content Management System as a platform for making and
maintaining a website. Students are expected to learn to organize their thought and
materials into a presentable website for school, business or personal use.

What would they know?

Students understand template and module settings, basic functions and plug-ins

What can they do?

They can conceptualize and create a school website using the theories learned

What habits will they form?

Students give respect to the school through making an attractive school website and
develop website that promotes goodwill to its community

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 126

WEB DEVELOPMENT WITH JOOMLA

ESTABLISHED GOAL :
Learners will demonstrate understanding on the process and delivery of a quality and
effective Social Networking Site through:
Creativity and Innovations (NETS 1a,b) - apply existing knowledge to generate new ideas,
products, or processes; create original works as a means of personal or group expression
Communication and Collaboration (NETS 2a,b,d) - interact, collaborate, and publish with peers,
experts, or others employing a variety of digital environments and media; communicate information
and ideas effectively to multiple audiences using a variety of media and formats; contribute to
project teams to produce original works or solve problems
Research and Information Fluency (NETS 3a,b,c,d) - plan strategies to guide inquiry, locate,
organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and
media; evaluate and select information sources and digital tools based on the appropriateness to
specific tasks and process data and report results
Critical Thinking, Problem Solving, and Decision Making (NETS 4 a,b,c,d) - identify and define
authentic problems and significant questions for investigation; plan and manage activities to
develop a solution or complete a project; collect and analyze data to identify solutions and/or make
informed decisions; use multiple processes and diverse perspectives to explore alternative
solutions
Digital Citizenship (NETS 5 a,b,c,d ) - advocate and practice safe, legal, and responsible use of
information and technology; exhibit a positive attitude toward using technology that supports
collaboration, learning, and productivity; demonstrate personal responsibility for lifelong learning;
exhibit leadership for digital citizenship
Technology and Concepts (NETS 6 a,b,c,d) - understand and use technology systems; select
and use applications effectively and productively; troubleshoot systems and applications; transfer
current knowledge to learning of new technologies.

ESSENTIAL UNDERSTANDING :
The learners will understand Understanding the needs and wants of your target clients
and/or markets in an online community will help you conceptualize a good and quality
design for a social networking site which can help you save time and effort in building a
website.
The learners will understand that Building a social networking site offers endless positive
and negative opportunities for you to develop your knowledge and skills as a web developer,
web master and in business in an online community.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 127

WEB DEVELOPMENT WITH JOOMLA

KNOWLEDGE AND SKILLS:

The learners will know the Basic Concepts of Social Networking

(1) Key terms - social networking site, web development, web applications, web
programmer/ web developer (2) Core Characteristics of a Social Networking Sites (3) Best
Practices in Designing a Social Networking Site (4) User Centered Design (5) Ethical and
Legal Behavior in Conceptualizing and Designing a Website for a Social Networking Site.
The learners will know the How to conceptualize a design for a Social Networking Site
(1) Creating a Story Board for the Website (2) Design Preparation (3) Design Analysis (4)
Story Board for website
The learners will know theHow to build a Social Networking Site
(1) The Social Networking Site Content (2) Newsroom and Calendar Activities
The learners will know the Community Builder
(1) Add Community Builder in the website (2) Community builder components and module
(3) Community builder plug-ins

The learners will be able to Explain the difference between web development and web
applications; web designer and web developer/ programmer; Explain what is a social networking
site and its use or functions in an online community; Identify the characteristics of Social
Networking Sites; Compare the best practices used in the leading social networking sites and usercentered design; Apply ethical and legal behavior in designing social networking sites. Use story
board technique in conceptualizing a social networking website; Explain the principles of design in
conceptualizing and designing an effective and user-friendly social networking site; Apply correct
procedure in designing and developing a social networking website; Create appropriate content for
a social networking site; Create newsroom for the site; Add calendar of activities for the site; Use
appropriate functional modules; Give details about a search box module; Add a search box;
Explain what and when to use Community Builder; Create and setup a user registration box using
community builder; Create and setup a photo gallery using community builder; Create and setup
down-loadable documents in the site using community Builder; Setup a forum or bulletin board
using Fireboard CB; Identify the types and classes of Plug-ins; Add plug-ins

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 128

WEB DEVELOPMENT WITH JOOMLA

Lesson 1: INTRODUCTION TO SOCIAL NETWORKING SITES

What Is Social Networking?
Social Networking. . . It's the way the 21st century communicates today.
Social networking is the grouping of individuals into specific groups, like small rural communities or
a neighborhood subdivision, if you will. Although social networking is possible in person, especially
in the workplace, universities, and high schools, it is most popular online.
This is because unlike most high schools, colleges, or workplaces, the internet is filled with millions
of individuals who are looking to meet other people, to gather and share first-hand information and
experiences about cooking, golfing, gardening, developing friendships or professional alliances,
finding employment, business-to-business marketing and even groups sharing information about
the end of the Mayan calendar and the Great Shift to arrive December 21, 2012. The topics and
interests are as varied and rich as the story of our universe.
When it comes to online social networking, websites are commonly used. These websites are
known as social sites. Social networking websites function like an online community of internet
users. Depending on the website in question, many of these online community members share
common interests in hobbies, religion, or politics. Once you are granted access to a social
networking website you can begin to socialize. This socialization may include reading the profile
pages of other members and possibly even contacting them.
CORE CHARACTERISTICS OF SOCIAL NETWORKING

USER BASED
Before social networks like Facebook or MySpace became the norm, websites were based
on content that was updated by one user and read by Internet visitors. The flow of
information was in a single direction, and the direction of future updates was determined by
the webmaster, or writer.
INTERACTIVE
This means that a social network is not just a collection of chat rooms and forums anymore.
Websites like FACEBOOK are filled with network-based gaming applications, where you can
play poker together or challenge a friend to a chess tournament.
COMMUNITY - DRIVEN
This means that just like communities or social groups around the world are founded on the
fact that members hold common beliefs or hobbies, social networks are based on the same
principle. Within most modern online social networks today, you'll find sub-communities of
people who share commonalities, such as alumni of a particular high school, or an animal
welfare group.
Relationships
The more relationships that you have within the network, the more established you are
toward the center of that network.
Emotion Over Content
The social network actually provides users with emotional security and a sense that no
matter what happens, their friends are within easy reach.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 129

WEB DEVELOPMENT WITH JOOMLA

What is User Centered Design?
Is a philosophy and set of methods focused on designing for and involving end users in
application development to achieve high-quality user experiences and high-quality
SAP(Systems, Application and Products) products.
UCD results in more usable and satisfying systems, making SAP software more effective,
efficient, easy to learn, pleasant to use, and predictable in essence, a high-quality user
experience, contributing to high-quality products, and ultimately, more sales, market share,
and revenue for SAP.
UCD is based on four fundamental principles:
1) Focus on real end users.
2) Validate requirements and designs.
3) Design, prototype, and develop iteratively.
4) Understand and design for the holistic user experience.

Phase 1 Understand Users

The SAP UCD process relies on iterative user research to understand users and
their needs.
To ensure that end users and their needs are sufficiently understood, the first phase
examines the user population, their work, and their needs.
Phase 2 Define Interaction
First, all the user research conducted is organized and summarized in a user
research synthesis, leading to user profiles, work activities, and requirements for the
intended user populations.
The use cases show steps to accomplish task goals and the data needed to perform
interactions.
Phase 3 Design UI (User Interface)
Evolving directly from the interaction definition. Product scope and interface
organization are clear from the high-level information organization, and UI
components are clear from use case steps and data.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 130

WEB DEVELOPMENT WITH JOOMLA

KWHL
K

What We Know

What We Want to Find Out

How Can We Learn More

What We Learned

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 131

WEB DEVELOPMENT WITH JOOMLA

Lesson 2: PLANNING AND DESIGNING THE WEBSITE

Benefits of Social Networking Sites
A social networking site can be a good way to make connections with people with similar interests
and goals. They can be a way to connect with or "meet" people that a student may not have had the
opportunity to beforeincluding other students, staff, faculty and even alumni.
Thanks to social networking sites, meeting someone in person has become a thing of the past.
"Poking" has become the new handshake. Making friends and renewing old ones is easy. Thus,
meeting people and staying connected with classmates and friends is a major benefit of social
networking sites.
Social networking sites offers campus surveys, "party" or event listings and other information that
communicates the "pulse" of a campus culture. Therefore, they can be a great way to understand
and stay connected to your campus community as a whole.
Some social networking sites offer advertising to its subscribers. Whether a student creates a
"party" for an upcoming event or pays the $5 for 10,000 "hits" for an ad, Facebook is a great way to
advertise as a student organization, club, Greek chapter, team, etc.
Most importantly, social networking sites offers students the opportunity to create a positive selfimage. The profiles gives you a chance to create the image of themselves that you want people to
see by putting you best qualities "out there." This shows that you care about you reputation and (to
a certain extent) what people think about youwhether its you peers, University faculty and
administrators, or future employers.
How to Stay Safe
Evaluate your social networking account and postingshow do you feel about your employers
seeing what you have posted? How about your parents or grandparents?
Do not post private information, including your cell phone number, home address, class schedule,
social plans, etc. unless you are prepared for anyone to find you/track you down, any time of the
day or night. Do not post anything that might be embarrasing to you in a potential employment
situation. People have been denied work because of information found on social networking sites.
Utilize the "Privacy" settings on your Facebook accountyou can adjust your privacy settings so as
to control who has access to your personal information.
Google your name to see how your name or identity is being used. Search for your name on sites
like
WhitePages and
SuperPages. If you want to remove your listing, look for relevant links
usually towards the bottom of the page.
Be prepared to answer questions about your social networking page or other social account in job
interviews. It has become common for interviewers to ask applicants, "Are you on a social
networking site?" and "What is on your profile?" Be prepared to either decline the question or
answer honestly because employers will most likely look at your social networking account
themselves if they haven't already.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 132

WEB DEVELOPMENT WITH JOOMLA

Guides in the Process of Planning and Designing the Website:
1. Design the Look and Feel plus template
2. Identify professional needs of the members. (Draw sequence diagram on how the website is
used for each need)
3. Identify Social Needs of the Members. . (Draw sequence diagram on how the website is
used for each need)
4. Identify Organizations officers needs in managing the group. . (Draw sequence diagram on
how the website is used for each need)
5. Sequence Diagram or Storyboard

CUSTOMIZING A TEMPLATE
How to Customize Joomla Templates
This lesson, we will be learning how templates work and how to customize a template to
match the look and feel of the site you want. Before we can customize our template, we have to
know how the Joomla templating system works.
In the Administrator Control panel under Extensions -> Template Manager you will see
that Joomla ships with a few templates. You can get your pages to use whichever template you
want by setting that template as the default by using the Default button. If you want your site to use
a mixture of templates, it can be done as follows. By using the Default and Assign buttons, you can
get each of your page to use the template you want. For example,

Joomla's template manager

To create a brand new look for you site, you want to duplicate one of the templates and put it on
this list here. Make you new template the default template for all your pages. And then start altering
that new template. That way, you do not alter the templates that shipped with Joomla.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 133

WEB DEVELOPMENT WITH JOOMLA

1. Duplicate the template folder in Templates and give the folder the same name as your template
name.
2. Alter the templateDetails.xml.
3. Upload to webhost.
4. You should see your new template in Template Manager. Make that as default with no other
assignment in any other templates.
5. You can edit the HTML and CSS of this template with the Edit HTML and Edit CSS buttons in
the Template Manager.
6. Edit HTML and replace all instance of the old template path with your new template path.
7. Module Manager (Extensions -> Site Module ) will tell you which module will be published in
which position.

Joomla's module manager

The second parameter indicate display style:

0 = (default display) Modules are displayed in a column table.
1 = display in horizontal table.
-1 = raw output
-2 = Modules are displayed using div
-3 = Modules are displayed in a format that allows,
for example, stretchable rounded corners.
The Function reference will provide more detail.

8. If you want to apply a style only to a particular page or component (say the contact page),
you can do the following at the top of your index.php file.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 134

WEB DEVELOPMENT WITH JOOMLA

<?php if ( $_REQUEST['option'] == com_contact ) { ?>
<style type=text/css>
.contentheading {display: none}
</style>
<?php } ?>
If you dont know the exact name of your request object, you can find out by inserting
<?php echo $_REQUEST['option']; ?>
into your template index.php file or look at the query string.
9. If you want to do something only when you are on the front page, do the following in index.php
<?php if ($option == com_frontpage) { ?>
<! your stuff to do when on front page>
<?php } ?>
10. If you want to change the wording of a text string in the user interface, you can often find the
define constant in language/english.php.
11. There is difference between modules and forms. For example, the code for the login module is
located in \modules\mod_login.php whereas the code for the login form is located
in\components\com_login\. Do not confuse the two. Otherwise you start changing the code for
one and it doesnt seem to have any effect on the other that you are looking at.
12. If you need to change the body background-color of the design, it is best to use the CSS rule in
the internal CSS style sheet of index.php rather then alter the background color of the external style
sheet. This is because altering the background color of the external style sheet will cause the story
edit panel to have that background color.
13. Whatever you do, dont take out the
<?php mosMainBody(); ?>
from the template. This controls the display of the main content.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 135

WEB DEVELOPMENT WITH JOOMLA

NAME: ____________________________________
GRADE AND SECTION: _______________________

DATE: ___________
SCORE: __________

HANDS ON #2: ACTIVITY SHEET

(ACTIVITY GUIDE)

TASKS:
CREATE AN ARTICLE INTO YOUR SITE. [USE THE ARTICLES]
ORGANIZE THE CONTENT AND CREATE MENUS.
:
ORGANIZE THE SECTIONS BASED ON ITS CATEGORY.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 136

WEB DEVELOPMENT WITH JOOMLA

I.T Skills Checklist Web Development

(JOOMLA)
Instruction: Put a check on what skill/action did you use and write how many times did
you do that action.

Creating
Articles/Menus

NEW

NEW TITLE

ALIAS

PUBLISHED

DESCRIPTION

Alias

Published

SAVE

Section
Manager

Category
Manager

Article
Manager

Add

Add

Section

Category

Title

SAVE

Menu Manager

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 137

WEB DEVELOPMENT WITH JOOMLA

NAME: ____________________________________
GRADE AND SECTION: _______________________

DATE: ___________
SCORE: __________

HANDS ON #3: ACTIVITY SHEET

(ACTIVITY GUIDE)

TASKS:
First, create a newsroom from your articles (Each
Categories)
Secondly, from that newsroom create your calendar of
activities (ex. Meetings, Business Lunch, Presentation of
Proposals)

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 138

WEB DEVELOPMENT WITH JOOMLA

I.T Skills Checklist Web Development

(JOOMLA)
Instruction: Put a check on what skill/action did you use and write how many times did
you do that action.

Skills

NEW

NEW TITLE

PUBLISHED

DESCRIPTION

Title

Alias

Published

ALIAS

SAVE

Section
Manager

Category
Manager

Article
Manager

Add

Add

Section

Category

New

New

Manage

Manage

Manage

Event

Date

Categories

Sections

Articles

SAVE

Menu
Manager
Creating
Newsrooms
Creating
Calendar

Save

of
Activities

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 139

WEB DEVELOPMENT WITH JOOMLA

NAME: ____________________________________
GRADE AND SECTION: _______________________

DATE: ___________
SCORE: __________

QUIZ

Written Assessment
Skills

Yes No Comments

Adding a Newsroom
Did you use your old article?
Did you use Newsroom section?

Did you organize them based on its Category?

Did you modify each News according to its DATE?
Did you insert any images on each newsroom?

Adding Calendar of Activities

Did you use JEvent?

Did you organize your news based on your Calendar of Activities?

Did you arrange events?
Is JEvent components are Helpful to your website?

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 140

WEB DEVELOPMENT WITH JOOMLA

Lesson 3: BUILDING THE SOCIAL NETWORKING WEBSITE

Creating a School Website
What is a school website? It is a website that shows information about the school, its activities,
person in-charge, etc. Below is an excerpt from Wikipedia regarding school website:
A school website is any website built, designed, and maintained by or for a school. Many school
websites share certain characteristics, and some educators have developed guidelines to help
schools create the best and most useful websites they can.
Possible functions of a school website include:
Displaying student projects
Providing information on homework and current class assignments
Directing visitors to other resources on the web
Providing a forum for teachers, administrators, students, and parents to exchange
information such as news and calendars of events
Introducing people who don't know much about the school (such as parent or students who
are considering moving into the district, community members who don't have children, and
teachers seeking employment) to its current events and general culture
Having a school website helps the students, faculty and staff alike be aware with the events that
takes place and will take place in the school. The questions are:
How can I create a school website?
What are the common functionalities that can be included in the website?
The common functionality / extensions that might be included in the website are:
1. User Registration
2. Event Calendar
3. Polls
4. Staff directory
5. Email newsletters
6. Forms
7. RSS
8. Sitemap
9. Downloadable documents
Now that we are aware of the extensions that will exist in the school website, we must now install
the proper template for the webpage.
Let us use the Education Template provided in the CD under the JS_Education Folder.
After installing the template, let us preview the module positions so that we will know the proper
placement of the content that we will create later.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 141

WEB DEVELOPMENT WITH JOOMLA

The Education Template has eight available module positions:
1. top
2. inset
3. left
4. right
5. user1
6. user2
7. user3
8. footer

inset
top
left

User1

right

User2

User3
footer

How can we place the search box in the inset module position?
1. Go to the Modules Menu then choose Site Modules.
2. In the Site modules, click on Search
-or- Click the radio button of Search then choose Edit.
3. Set the position on Inset and type search on the Module Class Suffix
textbox under the Parameters section.
4. Save the changes made.
Next important part that we need to consider is the menu. A school website is likely to have a lot of
sections and categories in order for it organize its contents so it is ideal for it to have submenus
that link to different contents.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 142

WEB DEVELOPMENT WITH JOOMLA

Organizing your menu is the same with altering the existing menu on the template and adding
effects on it. But this time let us use the drop down effect for the website.
What are the steps in creating a horizontal drop down menu?
1. Setup the main menu so that links we want to drop down. This can be done by setting the
parent item.
2. We need to install an additional module (extended menu) in order for the effect to be
visible.
3. After installing the Extended Menu Module, configure its settings. Make sure that the
parameter settings are correct. Dont forget to unpublished the original main menu module.
4. Save the changes.
The next step in creating the school website is adding content. Using your knowledge in modifying
the front page, youll be able to populate the page with the relevant information per section and
category.
The Footer is another part of the webpage. It may contain menus, ads or specific information
regarding the creator of the website. This depends on the preference of the designer or creator of
the website.
Adding Basic Functionality to the School Website
1. User Registration
We could have three specific categories: Guest (for parents), Users (students and teachers),
and Administrator (webmaster)
2. Events Calendar
This is an additional component that you could add on your school website. There are two
suggested calendar components that could be downloaded from the Joomla website:
Events Calendar/JEvents JCalPro
3. Downloadable Documents
This might include the course descriptions, hard copy of newsletters, forms, students work.
There are two main extensions recommended for your site, namely:
DOCMan
ReMOSitory
4. Polls
This is a default function of Joomla. You can modify the contents through the module
settings.
5. Staff Directory
This function can be achieved through the Joomla Contacts component.

6. Email Newsletters
This function is very important in a school website. It makes the communication easy for the
users of the website. Here are the suggested email components:
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 143

WEB DEVELOPMENT WITH JOOMLA

Letterman
Anjel
Yanc
MosListMessenger
Acajoom

7. RSS
RSS stands for Real Simple Syndication. It allows you to provide information from the
website and information from the other website through the use of RSS Feeds.
8. Forms
These are the critical part of the website. It allows you gather information from the visitors.
Below are the suggested extensions:
FacileForms performs
Phil Taylors Phil-A-Form
9. Sitemap
This is very important part of the website. It contains links to all the pages of the website.
Suggested extensions:
Joomap
samSiteMap
The suggested extensions are available at www.joomla.org under the extensions menu.

Lesson 4: BUILDING THE SOCIAL NETWORKING WEBSITE (PART II)

Creating a Social Website
A social website is a site that allows the users to interact with other existing website. The
social website could either be: internal or external. Internal refers to a private type of social
networking while external type is open to the public. It has a feature, that is, the ability to
create groups that share common interests or affiliations, upload videos, and hold
discussions in forums.
In order for us to start making such website, we will use the default installed Joomla and add
a component named Community Builder.
What is Community Builder?
Community Builder is an additional component to Joomla which enhanced registration
workflows, user lists, connection paths between users, admin defined tabs and user profiles,
image upload, front-end workflow management, integration with other components, like
PMS, Newsletter, Forum, Galleries.
How to Use Community Builder?
1. Install the comprofiler.zip via the Administration Panel using the Components Install /
Uninstall section. If completely installed this will be displayed:

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 144

WEB DEVELOPMENT WITH JOOMLA

2. Install the necessary module like cblogin.zip. This will replace the existing Login form of
Joomla.
3. After installing CB Login module, its your choice to install the other module given like the
Moderation module and CB Online module.
4. Add a new User Menu item named CB User List as a URL pointing to:
index.php?option=com_comprofiler&task=usersList
This will eventually support the searchable user list functionality which is configured via the
List Management backend menu item. The actual menu item backend setup screen should
look something like the following figure.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 145

WEB DEVELOPMENT WITH JOOMLA

5. Add the CB Profile
Select Menu then User Menu from your Joomla website administration panel
Select the New Item button and you will see the Details TAB of the
Add Menu Item : Component panel
Choose Component from the Select a Component to Add:
item list then press the Next button
Select the Community Builder item from the Component: list
Populate the Name: field with CB Details
Select Top from the drop down list of the Parent Item: field
Select Registered from the drop down list of the Access: field
Select the Yes radio button for the value of the Published: field
Click on the Save icon
6. Activate the CB Login Module
Go to Site Module Manager from Joomla Administration Panel
Verify if the CB Login module is set for public viewing.
Disable the default Login provided with Joomla through choosing the Unpublish
button.
Now that Community Builder is set up, we can now proceed to the things that we need to
consider: Configuration, Fields, Lists, Plug-ins, and Tabs.
Configuration
This involves the overall workflow of the community builder. You can edit the information
according to your preferences.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 146

WEB DEVELOPMENT WITH JOOMLA

Fields
These are the information regarding a user. Through Field Manager, you will edit what
particular information will be displayed.

Lists

Plug-Ins
There are different Plug-in types. Community Builder supports currently:
Language plug--ins
User plug-ins
Template plug-ins
There are special classes of plug-ins:
Core plug-ins (starting with cb.)
Private Messaging plug-ins (starting with pms.)

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 147

WEB DEVELOPMENT WITH JOOMLA

Plug-Ins

Tabs

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 148

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 1

Extending User login and information

Instructions: Follow the steps below on how to install Community Builders.

1. Install the comprofiler.zip
2. Install the necessary module like cblogin.zip.
3. Install moderation module and CB Online module.
4. Add a new User Menu item named CB User List
5. Add the CB Profile
6. Activate the CB Login Module

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 149

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 2

Setting Up a Forum or Bulletin Board among Members
Hands on Activity

Steps on how to set-up fireboard (Creating Forum)

A. Steps in Installing the component, setup of database tables, and
loading sample data
1. fire up your Admin
2. select Installers => Components
3. browse for file and Install
4. select Components => Fireboard Forums
5. select Apply for Clean Installation
6. select Compoents => FireBoard Forums
7. select Load Sample Data
B. Steps on how to set up the Fireboard CB Plug-in
1. still in Admin
2. select Components => Community Builder => Plugin Management
3. select Install Plugin
4. select Publish the new Plugin
C. Steps on how to link
1. still in Admin
2. select Menu => mainmenu
3. select New
4. select Component
5. select Next
6. select Fireboard Forum
7. select Save

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 150

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 3

Managing Historical Information
Hands on Activity
Steps on how to install Joomlawatch components
1. Log into the Joomla administration
2. Choose Installers->Components
3. Click "Browse..."
4. Choose the com_joomlawatch.zip you downloaded
5. Click "Upload File & Install"
6. You should see the Installation procedure and the "Installation finished".
Steps on how to install Joomlawatch module
1. Choose Installers->Modules
2. Click "Browse..."
3. Choose the mod_joomlawatch.zip you downloaded
4. Click "Upload File & Install"
5. Choose Modules->Site modules
6. Find JoomlaWatch and click the "X" icon to make it switch from unpublished to
published
7. Click the JoomlaWatch link, and choose where this module would appear.
The default are right, left, bottom.. but make sure this position appears in your
template.
It's also recommended to switch the "Show title" to No.
Pages/Items -> MenuItem Link(s) has to be "All".
8. Click the "Save" icon and check whether your site shows the joomlawatch
icon.
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 151

WEB DEVELOPMENT WITH JOOMLA

Course Description:
The course removes the myth behind web development. It presents web development as
something that is for everyone and not only the experts. The course makes use of
JOOMLA, an open source Content Management System as a platform for making and
maintaining a website. Students are expected to learn to organize their thought and
materials into a presentable website for school, business or personal use.

What would they know?

Students gain ideas on E-Commerce

What can they do?

They can setup and customized E-Commerce Website

What habits will they form?

Students develop entrepreneurial mindset by promoting business-oriented website

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 152

WEB DEVELOPMENT WITH JOOMLA

ESTABLISHED GOAL :
Learners will demonstrate understanding of the process and delivery of a quality ecommerce
website through:
Creativity and Innovations (NETS 1a,b,c and d ) - apply existing knowledge to generate new
ideas, products, or processes; create original works as a means of personal or group
expression; use models and simulations to explore complex systems and issues; identify trends
and forecast possibilities
Communication and Collaborations (NETS 2a,b and d) - interact, collaborate, and publish
with peers, experts, or others employing a variety of digital environments and media;
communicate information and ideas effectively to multiple audiences using a variety of media
and formats; contribute to project teams to produce original works or solve problems.
Research and Information Fluency (NETS 3a,b,c, and d) - plan strategies to guide inquiry;
locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of
sources and media; evaluate and select information sources and digital tools based on the
appropriateness to specific tasks; process data and report results
Critical Thinking, Problem Solving and Decision Making (NETS 4a,b,c and d) - identify
and define authentic problems and significant questions for investigation; plan and manage
activities to develop a solution or complete a project; collect and analyze data to identify
solutions and/or make informed decisions; use multiple processes and diverse perspectives to
explore alternative solutions
Digital Citizenship (NETS 5a,b,c, and d) - advocate and practice safe, legal, and
responsible use of information and technology; exhibit a positive attitude toward using
technology that supports collaboration, learning, and productivity; demonstrate personal
responsibility for lifelong learning; exhibit leadership for digital citizenship.
Technology and Operation Concepts (6a, b, c and d) - understand and use technology
systems; select and use applications effectively and productively; troubleshoot systems and
applications; transfer current knowledge to learning of new technologies.

ESSENTIAL UNDERSTANDING :
The learners will understand Efficient application of concepts, strategies and techniques
in conceptualizing, designing and developing a good E-Commerce Website helps in
increasing the sales of products and/or quality services
The learners will understand Appropriateness and correct use of procedures and
techniques in setting-up components of E-Commerce Website creates an effective Estore.
The learners will understand Resourcefulness and sensitivity to the needs and wants of
the consumers will add a good impact and market to the e-store site.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 153

WEB DEVELOPMENT WITH JOOMLA

KNOWLEDGE AND SKILLS:

The learners will know the E-Commerce and E-Commerce Website; Characteristics of
a Good E-Commerce Website; Virtuemart Shopping Cart; Procedure and techniques to
install/upload a Virtuemart; How to display the products at the Frontpage; How to go to
Virtuemart backend; Procedures on how to add product functions: -Adding Categories,
Deleting Categories, Adding a Product, Editing a Product, Deleting a Product, Adding
Shopper Group and Deleting Shopper Group
The learners will know the Procedures on how to add a Manufacturer Functions;
Procedure on how to add Tax computation;Procedure on how to add Shipping; Explain
E-Commerce and the issues included; Evaluate an e-store; Functions; Procedure on
how to add Payment; System; Procedure on how to add a Shopping Cart; Procedure on
how to broadcast the website - Where to host your website, How to upload website

The learners will be able to Explain the use of Virtue Shopping Cart; Upload VirtueMart; Display
products at the Frontpage; Open/Access VirtueMarts Backend; Add categories, Delete
categories, Add a product,Delete a product, Edit a product, Delete a product, Add a shopper
group, Delete a shopper group, Add a Manufacturer Category, Delete a Manufacturer Category,
Add Tax Computation module, Add Payment System, Add Shopping Cart, Upload a website,

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 154

WEB DEVELOPMENT WITH JOOMLA

Lesson 1: E-COMMERCE BASIC CONCEPTS

Introduction to E-Commerce
E-commerce (electronic commerce or EC) is the buying and selling of goods and services on the
Internet, especially the World Wide Web. In practice, this term and a newer term, e-business, are
often used interchangeably. For online retail selling, the term e-tailing is sometimes used.
E-commerce can be divided into:

E-tailing or "virtual storefronts" on Web sites with online catalogs, sometimes gathered into a
"virtual mall"

The gathering and use of demographic data through Web contacts

Electronic Data Interchange (EDI), the business-to-business exchange of data

E-mail and fax and their use as media for reaching prospects and established customers
(for example, with newsletters)

Business-to-business buying and selling

The security of business transactions

The Philippines E-Commerce Law Republic Act No. 8792

AN ACT PROVIDING FOR THE RECOGNITION AND USE OF ELECTRONIC
COMMERCIAL AND NON -COMMERCIAL TRANSACTIONS AND DOCUMENTS, PENALTIES
FOR UNLAWFUL USE THEREOF AND FOR OTHER PURPOSES
(source: http://www.digitalfilipino.com/the-philippines-e-commerce-law-republic-act-no-8792)

Different Models of E-commerce

(source: http://www.quality-web-programming.com/blog/different-models-of-e-commerce/)

1. Business-to-Business (B2B) is one of the major forms of e commerce. Here the seller and the
buyer participate as business entities. Here the business is carried out the same way a
manufacturer supplies goods to a wholesaler.
2. Business-to-Consumer (B2C) In this case transactions take place between consumers and
business houses. Here individuals are also involved in the online business transactions.
3. Consumer-to-Consumer (C2C) model is applicable when the business transaction is carried
between two individuals. But for this type of e commerce, the individuals require a platform or an
intermediary for business transactions.
4. Peer-to-Peer (P2P) is another model of e-commerce. This model is technologically more sound
than the other e commerce models. During this type of transactions, people can share computer
resources. Here it is not required to use a common server; instead a common platform can be used
for the transactions.
5. With technological advancements, the business transactions can be done through mobile
devices. The latest model for e commerce is the M-Commerce. The e commerce sites can be
specially optimized and programmed so that they can be viewed and used through mobiles. Here
two mobile users can contact each other to carry out the business transactions.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 155

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 1 Lab Exercise # 1

E- Commerce
Instructions:
1. Visit at least 3 business sites. Observer the environment.
2. List down the following information:
Business name
Product line
Physical address
Contact number
Website address.
3. Compare each business site.
4. Place your observation in a sheet of paper

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 156

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 1 Lab Exercise # 2

Understanding the Business
Instructions:
1. Let the student view at least 4 business sites
(2-Service-Oriented Business and 2-Retail Service Business)
2. Observe their common components (menus) of its site.
3. Write down your observation and comment which is better and why?
4. Write down your answer on your note book.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 157

WEB DEVELOPMENT WITH JOOMLA

Lesson 2: SAMPLE E-STORE AND VIRTUEMART

WHAT IS VIRTUEMART?
(source: http://virtuemart.net/)

VirtueMart is an Open Source E-Commerce solution to be used together with a Content Management System
(CMS) called Joomla!. Joomla! and VirtueMart are written in PHP and can be used in typical PHP/MySQL
environments.

How to Install Virtuemart?

(Source: Deodilyn Villanueva)

Virtuemart is a component. To install a component follow the steps below:

Extensions>>Install/Uninstall>>Browse the file
(com_virtuemart_2.0.0.zip)>>Upload File and Install

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 158

WEB DEVELOPMENT WITH JOOMLA

The computer will prompt if it is successfully installed. Then click success.
Check the virtuemart at the Components Menu>>Virtuemart>>Choose Install Sample Data
Warning: do not interrupt the process of Sample Data
How to display the Products at the Frontpage?
Create a Menu for virtuemart:
Menu>>Mainmenu>>Component>>Next>>Enter Name of the Menu
(Ex. Shop)>>component (Virtuemart)
How to go to Virtuemart backend?
Components>>Virtuemart

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 159

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 2 Lab Exercise # 1

Tools for an E-Store

VirtueMart installation
Instructions:
1. Access the component virtuemart.
2. Install the VirtueMart including the data sample.
3. Explore the back-end and front-end of VirtueMart

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 160

WEB DEVELOPMENT WITH JOOMLA

Lesson 3: PROJECT PLANNING PLANNING THE E-STORE

GUIDE IN THE PROCESS OF PLANNING THE E-STORE
1. Design a look and feel plus template
2. Define the scope of Products and Categories
3. Draw Sequence Diagram - How the website is used by different buyers
4. Draw the Sequence Diagram How the website is used by sellers
5. Identify what reports the seller and buyer will need to monitor products sales, and other
items
6. Drafting of Test Plan and Data to be use in testing
7. Customizing a Template and Making Test plan

Lesson 4: BUILDING THE E-STORE

HOW TO MODIFY AND CUSTOMIZE E-STORE
A. Product Customization:
How to Add Categories?
Product Categories>>Click New Icon >>Fill-in information>>Save

How to Delete Categories?

Product Categories>>Select Category Name>>Delete
How to Add a Product?
Product >>New Icon Product>>Product Information>>Product
Status>>Product Dimension and Weight>>Product Image>>
Product Related>>Save

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 161

WEB DEVELOPMENT WITH JOOMLA

How to Edit a Product?

Product>>Product List>> Select Product Name>>Edit Item>>Save
How to Delete a Product?
Product>>Product List>> Select Product Name>>Delete

B. Shoppers Customization:
Add Shopper Group
Shop Menu>>Shop New >>Fill-in the Information>>Save

Delete Shopper Group

Shopper Menu>>List Shopper Group>>Delete
Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 162

WEB DEVELOPMENT WITH JOOMLA

C. Manufacturer Customization:
Adding a Manufacturer Category
Manufacturer Menu>>Manufacturer Categories>> New >> Fill-in the information>>Save

Deleting a Manufacturer Category

Manufacturer Menu>>List Manufacturer Category>>Select Category Name>>Delete

D. Tax Customization:
Product Menu>>Tax and Calculations Rules>>New Icon>>Fill-in information>>Save

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 163

WEB DEVELOPMENT WITH JOOMLA

E. Shipping Customization:
Create Shipper:
Shop Menu>>Shipment Methods>> New Icon>> Fill-in information>>Save

Creating a Shipping Rate

Shipping Menu>>Create Shipping Rate>>Fill-in information>>Save

Other Extension used in e-Commerce:

Payment system
SAMPLE 1
Site: http://www.24link.co.uk/
Description:
PCSBOT is a mambot that works in
conjunction with the PCS component
to allow you to charge credits to
access any content item.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 164

WEB DEVELOPMENT WITH JOOMLA

SAMPLE 2
Site: http://www.joomlaware.com/
Description:
MamboCHARGE-PLUS
gives you powerful features right out of
the box, plus its extensible! You can build
your own transaction Handlers and plug
them right into Mambo CHARGE-PLUS to
enable eCommerce like never before.

Shopping cart
SAMPLE 1

Site: http://www.openfreeway.org/
Description:
Freeway is an advanced Open Source
eCommerce platform which extends beyond
selling only products to selling a wide range
of services including appointments and
bookings, event ticketing and subscriptions.

SAMPLE 2

Site: www.sstreamtv.com
Description:
A Simple module that allows guest to promote
and sell products and services using any
payment gateway code. Simply add your
image and it will automatically resize your jpeg
and a description price and paste your cart
code.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 165

WEB DEVELOPMENT WITH JOOMLA

Broadcast your website
a.) Where to host your website?
There are a lot of sites that offers web hosting services on the net, here are some of those
sites:
www.smbizhosting.com
www.forayweb.com
www.simplyjoomla.com
b.) How to upload your website?
There are two ways in uploading your site:
1. Upload on your localhost computer
2. Upload on web host server
Upload on your localhost computer
1. Login to your site using the backend.
2. Go to installers>templates-site.
3. Click on browse button, and locate your template.
4. Select your template, and then click on Open button.
5. Click on upload file, and then install.
Upload on web host server
1. Look for the host provider that supports SQL, CSS, or let say Joomla.
2. Visit your chosen host provider, and register online.
3. Check your email for your admin account. (Login and Password)
4. Visit your host provider using the supplied World Wide Web site.
5. Login using the given admin account.
6. Upload your template using your favorite file transfer protocol or FTP tool.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 166

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 1

Tools for an E-Store

Create a Menu for VirtueMart

Instructions:
Think of a product that you want to sell and think of a Company name that
you want to name your Shop it must be related to your product.

1. Access your Joomla.

2.Create a menu name for your e-commerce.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 167

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 2

Using Virtue Mart

Instructions:
1. Open or access the folder Victorias Secret Products
2. Create 3 Categories namely:
Lotion
Shampoo
Perfume
Each category must have a picture related to the category
3. Unpublished the unnecessary categories

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 168

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 3

Using Virtue Mart

Instructions:
Think of a business you want to put up. Download the products that are needed for
your business. It must have 3 related categories and on each category must have at
least 10 products.

1. Use the net to search for a product of your choice.

2. Create 3 categories (it must have a related picture)
3. On each category place 10 products complete with Product Information (SKU,
product name, price, etc.) & Product Status.
4. The currency style must be PHP.
5. Prices can be just an imagination or fabricated but every product must be
different price/amount from one another

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 169

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 4

Handling Customer Support

Instructions: Create a Database folder for your aticket at phpmyadmin

1. To do it type the address below at the address bar.

2. http://localhost/phpmyadmin
3. Name your database with your lastname
4. Change the collation to utt8_unicode_ci
5. Click create.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 170

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 5

Handling Customer Support
Installation of aticket
Instructions:
1. Extract the aticket zip file
2. Rename aticket with your lastname & copy it inside the htdocs.
3. In the address bar type http://localhost/aticket/install
4. In the Database Name type the name of the database folder you have just
created a while ago.
5. In Database User Name type root.
6. Do not fill-up or type anything in the Database Password.
7. Click Submit.
8. Type your password at the Admin Password
9. Check all the e-mail addresses.
10. Remove the install folder from your aticket folder.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 171

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 6

Handling Customer Support
Using aticket
Instructions:
Create 5 different categories..

Lesson 4 Lab Exercise # 7

Handling Customer Support
Using aticket
Instructions:
Create 5 different groups that are related with the categories.

Lesson 4 Lab Exercise # 8

Handling Customer Support
Using aticket
Instructions:
Create 5 different representatives that are related with groups and categories.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 172

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 9

Handling Customer Support

Link your aticket in your joomla

Instructions:
1. Open your joomla.
2. Create a menu for your aticket. In a New Menu Item select Link-Url
3. Type the Url address of your aticket
4. Link the Menu in your VirtueMart Menu

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 173

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 10

Launching my store
Instructions:
Let the student surf the net and search for a web hosting service. Ask them to write at least
8 (5 commercial web hosting and 3 free web hosting) web hosting service.
Following the format below:
1. Web host Company Name
2. Web Hosting Package
3. Fee per month

Web host Company

Name

Web hosting Package

Fee per month

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 174

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 11

Launching my store
Instructions:
Now, let us try to sign up to www.myownfreeweb.com as our free web host provider.

1. Go to the said address

2. Sign in
3. Avail the Free web hosting
4. Save the your Account Details

Important: Before you sign in be sure that you have a gmail e-mail account.

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 175

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 12

Launching my store
Installing and Uploading files in FileZilla
Instructions:
A. Installing FileZilla.
1. Download FileZilla at http://www.filehippo.com or access it from your teacher.
2. Double left click.
3. A dialog box appears on your screen. Check everything.
B. Upload File (joomla & aticket)
1. Select File
2. Site Manager
3. New site
1. Host - Copy FTP Address
2. Log on Type Normal
3. User Paste your username
4. Password Paste your password
4. Click Connect
5. Click htdocs folder
6. Select the file you want and drag it at the Remote Site
7. Check the uploaded files at the Vista Panel

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 176

WEB DEVELOPMENT WITH JOOMLA

NAME:________________________________________DATE:___________
YEAR & SECTION:______________________________SCORE:__________

Lesson 4 Lab Exercise # 13

Launching my store
Database File Transfer. Exporting and Importing Database Files of Joomla and aticket

Instructions:
A. Exporting Database Files
1. Go to Localhost/phpmyadmin
2. Look for the database folder and click on it
3. Click Export
4. Click SQL
5. Click Save as
6. Go
7. Ok
B. Import the exported database folder
B.1. Create a database folder in your Cpanel
1. Create a database in your CPANEL
2. Go to Database Management
3. Select MySQL Databases
4. Type the database folder name
5. Click Create Database
B.2. Importing database folder
1. Go to your database folder
2. Click the admin ( for you to go to phpmyadmin)
3. Click Import
4. Click Browse
5. Select file to be imported
6. Click OK
7. Click Go

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 177

WEB DEVELOPMENT WITH JOOMLA

http://docs.joomla.org/
http://docs.joomla.org/Introduction_to_Joomla!_templates
http://www.guidedhelp.net/joomlacentral/joomla-guides/joomla-extensions-explained
http://writenowdesign.com/joomla-website-design
http://www.digitalfilipino.com/the-philippines-e-commerce-law-republic-act-no-8792
http://www.quality-web-programming.com/blog/different-models-of-e-commerce/
http://virtuemart.net/
http://www.subcide.com/articles/creating-a-css-layout-from-scratch
http://gimp-tutorials.net/websitetutorial
http://en.wikipedia.org/wiki/Web_design

Making IT Works for You

2012 GENETIC COMPUTER INSTITUTE-NORTH LUZON: Unauthorized reproduction is prohibited

Page 178