COLLEGE OF ENGINEERING AND TECHNOLOGY
Notre Dame of Marbel University
City of Koronadal South Cotabato
SYLLABUS IN CS 166
COURSE NUMBER:
COURSE TITLE:
COURSE CREDIT:
PREREQUISITE:
PLACEMENT IN CURRICULUM:
CS 166
Advanced Web Development
3 credit hours
4th year standing
Bachelor of Science in Computer Science
FACULTY:
OFFICE:
CONTACT NUMBER OR EMAIL:
CONSULTATION TIME:
Mrs. Hajah T. Sueno, MSIT
Computer Studies Department
jai.sueno@yahoo.com
3:00 – 4:00 Mon - Sat
COURSE DESCRIPTION:
This course is offered for Bachelor of Science in Information Technology and Bachelor of Science in Computer Science senior students as an elective subject. This
exposes the students to advanced Web programming using Content Management Systems and its extensions, MySQL database. Moreover, this course will give
the students a good opportunity to learn and actually develop dynamic interactive web sites involving databases that are based on existing needs of the
community.
NDMU: Computer Studies Department
S.Y. 2013 - 2014
COURSE OBJECTIVES:
At the end of the course, the students should be able to:
 Understand the role of content management system
 Create Web sites that are functional and well designed
 Gather requirements for a corporate web application.
 Demonstrate an understanding of the issues posed by popular browsers and learn how to overcome them.
 Design an efficient, logical web program.
COURSE POLICIES/GUIDELINES
The students will be responsible for careful reading of their text book without which informed discussion each class meeting cannot take place. Class members contribute to
each other's learning through discussion, presentation, and sharing. The role of the professor will be that of a resource person and as such may once in a while include extended
elaboration of issues and topics.
Academic Integrity
Academic integrity is expected of all students. The attempt by any student to present as his/her own work which he/she has not produced is regarded by the faculty and
administration of NDMU as a serious offense. Students are considered to have cheated if they turn in an assignment written in whole or in part by someone else. Students are
guilty of plagiarism, intentional or not, if they copy from books, magazines, Internet, or other sources without identifying and acknowledging those sources or if they paraphrase
ideas from such sources without acknowledging them.
Students enrolled in this course who cheat on exams or quizzes or commit plagiarism, or copy another students work in any way, violate the Academic Integrity policy of the
University and will receive an F (0 points) on the test or assignment in question. In addition, they will be reported to the College Dean for appropriate sanction.
Attendance
Each session is very important to your learning so you should avoid being absent. Unexcused and/or chronic lateness and early exits will be counted as an "absence." Missing a
class does not excuse you from the work assigned. You will be expected to complete and submit any assignments before or at the beginning of the next class session.
Class Management
All students are expected to come to class on time. Use of cell phones is prohibited. Put cell phones in silent mode.
NDMU: Computer Studies Department
S.Y. 2013 - 2014
COURSE REQUIREMENTS
The following are the requirements for completion of this course.
Midterm/Final Examinations
Quizzes
Project
Grading: Grading will be as follows
Exam
Class Work
Quizzes
Project
Seatwork and Assignment
Laboratory Exercises
40 %
60 %
20 %
20 %
10 %
10 %
COURSE CONTENT
Objectives
Topics
At the end of the topic, the students
will be able to:
I. Grouping and Nesting
Selectors

A. Grouping Selectors
B. Nesting Selectors



Minimize the code by grouping
selectors.
Create a style using group
selectors
Create a style using nested
selectors
Design a page that uses styles
with group selectors and nested
selectors.
NDMU: Computer Studies Department
S.Y. 2013 - 2014
Strategies/ Activities




Lecture
Discussion
Sharing
Demonstration
Evaluation
Values Desired






Participation
Courtesy
Attentiveness
Cooperation
Patience
Creativity



Written quiz
Assignment
Hand-on Quiz
Time Frame
5 hrs
Objectives
At the end of the topic, the
students will be able to:






Set the height of an
element.
Set the height of an
element using percent.
Set the height of an
element using pixel.
Set the maximum and
minimum height and width
of an element.
Discuss the use of auto
and inherit values in a
style.
Design a page that uses
CSS dimension in an
element.
Topics
Strategies/ Activities
Values Desired
Evaluation
Time Frame
II. CSS Dimension
A. Set the Height Elements
B. Set the height of an element
using percent
C. Set the width of an element
using a pixel value
D. Set the maximum height of an
element
E. Set the maximum width of an
element
NDMU: Computer Studies Department
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
5 hrs
Objectives
At the end of the topic, the
students will be able to:





Hide/remove element/s
using display:none and
visibility:hidden.
Display element using
block and inline.
Make table element
collapse.
Create a styles using CSS
display and visibility.
Design a page that hide
and display element.
Topics
III.
A. CSS Display and Visibility
B. Hiding an Element
C. Block and Inline Element
D. Changing How an Element is
Displayed
E. Display an element as an inline
and block element
F. Make a Table element Collapse
G. Using
document.getElementById
H. CSS
NDMU: Computer Studies Department
Strategies/ Activities
Values Desired
Evaluation
Time Frame
CSS Display
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment

5 hrs
Objectives
Topics
At the end of the topic, the
students will be able to:
IV. CSS Positioning

A.
B.
C.
D.
E.
F.






Discuss how to position
element in a page.
Use static positioning in a
style.
Create styles that uses
fixed positioning of an
element in a page.
Create styles that uses
relative positioning of an
element in a page.
Create styles that uses
absolute positioning of an
element in a page.
Create styles that uses
overlap positioning of an
element in a page.
Design a page that uses
styles associated with CSS
positioning.
Static Positioning
Fixed Positioning
Relative Positioning
Absolute Positioning
Overlapping Elements
CSS Positioning Properties and
Values
G. Show overflow in an element
using scroll
 Overflow:auto
 Overflow:hidden
 Overflow:scroll
H. Change cursor property
NDMU: Computer Studies Department
S.Y. 2013 - 2014
Strategies/ Activities
 Lecture – Discussion
 Demonstration
Values Desired





Participation
Cooperation
Patience
Attentiveness
Creativity
Evaluation



Written quiz
Hands-on quiz
Assignment
Time Frame
5 hrs
Objectives
At the end of the topic, the
students will be able to:




Discuss how elements float
in a page.
Float elements next to
each other.
Float an image with border
and margins to the right or
left in a paragraph.
Float an image with a
caption to the right.
Float first letter of a
paragraph to the left.
Topics
V.
A. Floating Elements
B. Floating Elements Next to Each
Other
C. Turning off Float - Using Clear
D. Image with border and margins
that floats to the right in a
paragraph
E. Image with a caption that floats
to the right
F. Float first letter of a paragraph
float to the left
Creating a horizontal menu
NDMU: Computer Studies Department
Strategies/ Activities
Values Desired
Evaluation
Time Frame
CSS Float
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
10 hrs
Objectives
Topics
At the end of the topic, the
students will be able to:





Align block of elements
Center aligned using the
margin property.
Align an element to the
right or to the left using
the position property.
Align an element to the
right or to the left using
the float property.
Create styles that uses CSS
align properties.
Strategies/ Activities
Values Desired
Evaluation
Time Frame
VI. CSS Align
A. Horizontal Align
Aligning Block Elements
B. Center Aligning Using the margin
Property
C. Left and Right Aligning Using the
position Property
D. Left and Right Aligning Using the
float Property
NDMU: Computer Studies Department
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
7 hrs
Objectives
At the end of the topic, the
students will be able to:




Discuss the capabilities of
CMS
Differentiate the types of
Web CMS
 Offline processing
 Online processing

Hybrid systems
Discuss the advantages
and disadvantages
List the notable web CMS
Topics
Strategies/ Activities
Values Desired
Evaluation
Time Frame
VII. Introduction to CMS
A. Capabilities of CMS
B. Types of Web CMS
C. Advantages and Disadvantages
of CMS
D. List of Notable Web CMS
NDMU: Computer Studies Department
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration







Participation
Cooperation
Patience
Attentiveness
Creativity
Simplicity
Love of Work



Written quiz
Hands-on quiz
Assignment
5 hrs
Objectives
At the end of the topic, the
students will be able to:








Discuss Joomla CMS.
Describe the composition
of Joomla
Install Joomla on local host
by installing Joomla
quickstart and Xammp
Create Website Folder
Copy the Joomla Files
Configuring the Joomla
Web Installer.
Understand the Frontend
and Backend of Joomla
Discuss the Login as a
Super User and the Joomla
Control Panel
Topics
Strategies/ Activities
Values Desired
Evaluation
Time Frame
VIII. Overview of Joomla
A.
B.
C.
D.
E.
F.
What is Joomla CMS?
Compisition of Joomla
Installing Joomla
Creating Web site folder
Copy Joomla Files
Configuring Joomla Web
Installer
G. Joomla Interface

NDMU: Computer Studies Department
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
5 hrs
Objectives
Topics
At the end of the topic, the
students will be able to:













Create Categories
Create Categorized or
Uncategorized Articles
Insert Images/Graphics
Into Articles
Insert the Read More
Option Into Articles
Filter & Sort Articles
Feature Articles on the
Home Page
View Your Website
Set the Options for Articles
Install a Photo Gallery
Component
Create Folders for the
Photos
Upload the Photos
Add a Gallery Menu Item
Strategies/ Activities
Values Desired
Evaluation
Time Frame
IX. Creating Joomla Content
A. Joomla Categories
 Categorized
 Uncategirized
B. Inserting Images/Grapics into
Articles
C. Inserting Read More Option into
Articles
D. Filtering and Sorting Articles
E. Featuring Articles on the
Homepage
F. Viewing your Website
G. Installing Photo Gallery
component
H. Creating folders for photos
I. Uploading photos
J. Adding gallery menu
NDMU: Computer Studies Department
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
5 hrs
Objectives
Topics
At the end of the topic, the
students will be able to:





Add a Single Article Menu
Item
Add a List All Categories
Menu Item
Change the Layout From
Blog Layout
Add a Category List Menu
Item
Change the Menu Order
Strategies/ Activities
Values Desired
Evaluation
Time Frame
X. Adding Joomla Menu Items
A.
B.
C.
D.
E.
NDMU: Computer Studies Department
Adding single menu item
Adding list all categories
Changing Layout form blog
Adding category list menu item
Changing menu order
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
5 hrs
Objectives
Topics
At the end of the topic, the
students will be able to:









Discuss Component and its
uses
Discuss Modules, Plugins,
Templates, Language
Download and install
Joomla extensions.
Enable Module Position
Viewing
View the Module Positions
Change Module Positions
Log in From the Frontend
to Edit Content
Add the Search Module
Create an HTML Module
Strategies/ Activities
Values Desired
Evaluation
Time Frame
XI. Joomla Extensions and Types
A. What are Modules, Plugins,
Templates, Language?
B. Installing Joomla Extensions
C. Module Positioning
 Viewing
 Positioning
 Changing
D. Logging in from front-end to Edit
Content
E. Adding Search Module
F. Creating an HTML module
NDMU: Computer Studies Department
S.Y. 2013 - 2014
 Lecture – Discussion
 Demonstration





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
5 hrs
Objectives
Topics
At the end of the topic, the
students will be able to:












Install the Joomla Content
Editor
Reset the Editor Styling
Change the Editor to JCE
View the New Editor
Linking Articles Internally
Create External Weblinks
Create File Downloads
View Joomla Templates
Change the Default
Template for a Website
Preview a Joomla
Template
Install a Template
Change the Logo/Header
Strategies/ Activities
Values Desired
Evaluation
Time Frame
XII. Joomla Content Editor and
Joomla Templates
 Lecture – Discussion
 Demonstration
A.
B.
C.
D.
E.
F.
G.
H.
NDMU: Computer Studies Department
Installing Joomla Content Editor
Resetting editor Styling
Viewing New editor
Linking articles internally
Create file downloads
Installing Joomla Templates
Changing default template
Change Logo and Header
S.Y. 2013 - 2014





Participation
Cooperation
Patience
Attentiveness
Creativity



Written quiz
Hands-on quiz
Assignment
5 hrs
Objectives
Topics
At the end of the topic, the
students will be able to:
XIII. Publishing Joomla Site


A. Acquiring domain name
B. Uploading file to your website
online
C. Configuring config.php
D. Installing Joomla quickstart to
your website.


Acquire domain name
Upload files to a Web
hosting site
Configure config.php
Use Joomla installation file
and install to your website

NDMU: Computer Studies Department
S.Y. 2013 - 2014
Strategies/ Activities
 Lecture – Discussion
 Demonstration
 Project Presentation

Values Desired





Participation
Cooperation
Patience
Attentiveness
Creativity
Evaluation




Written quiz
Hands-on quiz
Assignment
Laboratory
exercises
Time Frame
5 hrs
CLASS MANAGEMENT
1. Basic Orientation of the Class Policy
 Attendance (for MWF – 10 absences, TTh – 7 absences). After the third absence, warning will be given. A student is required to present an
admit slip from the office.
 Orderliness and cleanliness of the classroom
 Start and end the class with a Prayer.
 School Uniform, School Id, with proper haircut
2. Students are encouraged to verify their grades if they have some questions.
REFERENCES
BOOKS
Rick Shreves (2010), Joomla! Bible, Wiley Publishing, Inc., Indianapolis, Indiana
Jennifer Marriott, Elin Waring (2011), Official Joomla! Book, Addison-Wesley Professional.
Steven Holzner, PhD, Nancy Conner, PhD (2009), Joomla for Dummies, Wiley Publishing, Inc., Indianapolis, Indiana
ELECTRONIC SOURCES
Joomla for Beginners, from http://docs.joomla.org/Beginners
Joomla 2.5 Beginners Guide, from http://magazine.joomla.org/issues/issue-feb-2012/item/677-Joomla-2-5-Beginner-s-Guide
Home and Learn free computer tutorials from www.homeandlearn.co.uk
W3schools from www.w3schools.com
HTS Learning Portal (2012), Materials and Resources, E-learning Portal for BSCS and BSIT Students, from www.jai-csdomain.com
NDMU: Computer Studies Department
S.Y. 2013 - 2014