COLLEGE OF ENGINEERING AND TECHNOLOGY

Notre Dame of Marbel University

City of Koronadal South Cotabato

SYLLABUS IN CS 166

COURSE NUMBER: CS 166

COURSE TITLE: Advanced Web Development
COURSE CREDIT: 3 credit hours
PREREQUISITE: 4th year standing
PLACEMENT IN CURRICULUM: Bachelor of Science in Computer Science

FACULTY: Mrs. Hajah T. Sueno, MSIT

OFFICE: Computer Studies Department
CONTACT NUMBER OR EMAIL: jai.sueno@yahoo.com
CONSULTATION TIME: 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 40 %
Class Work 60 %
Quizzes 20 %
Project 20 %
Seatwork and Assignment 10 %
Laboratory Exercises 10 %

COURSE CONTENT

Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame

At the end of the topic, the students I. Grouping and Nesting
will be able to: Selectors
 Lecture  Participation  Written quiz 5 hrs
 Minimize the code by grouping A. Grouping Selectors  Discussion  Courtesy  Assignment
selectors. B. Nesting Selectors  Sharing  Attentiveness  Hand-on Quiz
 Create a style using group  Demonstration  Cooperation
selectors  Patience
 Create a style using nested  Creativity
selectors
 Design a page that uses styles
with group selectors and nested
selectors.

NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the II. CSS Dimension
students will be able to:
A. Set the Height Elements  Lecture – Discussion  Participation  Written quiz
 Set the height of an B. Set the height of an element  Demonstration  Cooperation  Hands-on quiz 5 hrs
element. using percent  Patience  Assignment
 Set the height of an C. Set the width of an element  Attentiveness
element using percent. using a pixel value  Creativity
 Set the height of an D. Set the maximum height of an
element using pixel. element
 Set the maximum and E. Set the maximum width of an
minimum height and width element
of an element.
 Discuss the use of auto
and inherit values in a
style.
 Design a page that uses
CSS dimension in an
element.

NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the III. CSS Display
students will be able to:
A. CSS Display and Visibility  Lecture – Discussion  Participation  Written quiz
 Hide/remove element/s B. Hiding an Element  Demonstration  Cooperation  Hands-on quiz
using display:none and C. Block and Inline Element  Patience  Assignment  5 hrs
visibility:hidden. D. Changing How an Element is  Attentiveness
 Display element using Displayed  Creativity
block and inline. E. Display an element as an inline
 Make table element and block element
collapse. F. Make a Table element Collapse
 Create a styles using CSS G. Using
display and visibility. document.getElementById
 Design a page that hide H. CSS
and display element.

NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives
At the end of the topic, the
students will be able to:
 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.
NDMU: Computer Studies Department
Topics Strategies/ Activities Values Desired Evaluation Time Frame
IV. CSS Positioning
 Lecture – Discussion  Participation  Written quiz
A. Static Positioning  Demonstration  Cooperation  Hands-on quiz 5 hrs
B. Fixed Positioning  Patience  Assignment
C. Relative Positioning  Attentiveness
D. Absolute Positioning  Creativity
E. Overlapping Elements
F. CSS Positioning Properties and
Values
G. Show overflow in an element
using scroll
 Overflow:auto
 Overflow:hidden
 Overflow:scroll
H. Change cursor property
S.Y. 2013 - 2014
 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.
NDMU: Computer Studies Department
Topics Strategies/ Activities Values Desired Evaluation Time Frame
V. CSS Float
A. Floating Elements  Lecture – Discussion  Participation  Written quiz
B. Floating Elements Next to Each  Demonstration  Cooperation  Hands-on quiz 10 hrs
Other  Patience  Assignment
C. Turning off Float - Using Clear  Attentiveness
D. Image with border and margins  Creativity
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
S.Y. 2013 - 2014
 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the VI. CSS Align
students will be able to:
A. Horizontal Align  Lecture – Discussion  Participation  Written quiz
 Align block of elements Aligning Block Elements  Demonstration  Cooperation  Hands-on quiz 7 hrs
 Center aligned using the B. Center Aligning Using the margin  Patience  Assignment
margin property. Property  Attentiveness
 Align an element to the C. Left and Right Aligning Using the  Creativity
right or to the left using position Property
the position property. D. Left and Right Aligning Using the
 Align an element to the float Property
right or to the left using
the float property.
 Create styles that uses CSS
align properties.

NDMU: Computer Studies Department S.Y. 2013 - 2014

 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  Lecture – Discussion  Participation  Written quiz
B. Types of Web CMS  Demonstration  Cooperation  Hands-on quiz 5 hrs
C. Advantages and Disadvantages  Patience  Assignment
of CMS  Attentiveness
D. List of Notable Web CMS  Creativity
 Simplicity
 Love of Work

NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the VIII. Overview of Joomla
students will be able to:
A. What is Joomla CMS?  Lecture – Discussion  Participation  Written quiz
 Discuss Joomla CMS. B. Compisition of Joomla  Demonstration  Cooperation  Hands-on quiz 5 hrs
 Describe the composition C. Installing Joomla  Patience  Assignment
of Joomla D. Creating Web site folder  Attentiveness
 Install Joomla on local host E. Copy Joomla Files  Creativity
by installing Joomla F. Configuring Joomla Web
quickstart and Xammp Installer
 Create Website Folder G. Joomla Interface
 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


NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the IX. Creating Joomla Content
students will be able to:
A. Joomla Categories  Lecture – Discussion  Participation  Written quiz
 Create Categories  Categorized  Demonstration  Cooperation  Hands-on quiz 5 hrs
 Create Categorized or  Uncategirized  Patience  Assignment
Uncategorized Articles B. Inserting Images/Grapics into  Attentiveness
 Insert Images/Graphics Articles  Creativity
Into Articles C. Inserting Read More Option into
 Insert the Read More Articles
Option Into Articles D. Filtering and Sorting Articles
 Filter & Sort Articles E. Featuring Articles on the
 Feature Articles on the Homepage
Home Page F. Viewing your Website
 View Your Website G. Installing Photo Gallery
 Set the Options for Articles component
 Install a Photo Gallery H. Creating folders for photos
Component I. Uploading photos
 Create Folders for the J. Adding gallery menu
Photos
 Upload the Photos
 Add a Gallery Menu Item


NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the X. Adding Joomla Menu Items
students will be able to:
A. Adding single menu item  Lecture – Discussion  Participation  Written quiz
 Add a Single Article Menu B. Adding list all categories  Demonstration  Cooperation  Hands-on quiz 5 hrs
Item C. Changing Layout form blog  Patience  Assignment
 Add a List All Categories D. Adding category list menu item  Attentiveness
Menu Item E. Changing menu order  Creativity
 Change the Layout From
Blog Layout
 Add a Category List Menu
Item
 Change the Menu Order

NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives
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
NDMU: Computer Studies Department
Topics Strategies/ Activities Values Desired Evaluation Time Frame
XI. Joomla Extensions and Types
A. What are Modules, Plugins,  Lecture – Discussion  Participation  Written quiz
Templates, Language?  Demonstration  Cooperation  Hands-on quiz 5 hrs
B. Installing Joomla Extensions  Patience  Assignment
C. Module Positioning  Attentiveness
 Viewing  Creativity
 Positioning
 Changing
D. Logging in from front-end to Edit
Content
E. Adding Search Module
F. Creating an HTML module
S.Y. 2013 - 2014
 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the XII. Joomla Content Editor and
students will be able to: Joomla Templates
 Lecture – Discussion  Participation  Written quiz
 Install the Joomla Content  Demonstration  Cooperation  Hands-on quiz 5 hrs
Editor A. Installing Joomla Content Editor  Patience  Assignment
 Reset the Editor Styling B. Resetting editor Styling  Attentiveness
 Change the Editor to JCE C. Viewing New editor  Creativity
 View the New Editor D. Linking articles internally
 Linking Articles Internally E. Create file downloads
 Create External Weblinks F. Installing Joomla Templates
 Create File Downloads G. Changing default template
 View Joomla Templates H. Change Logo and Header
 Change the Default
Template for a Website
 Preview a Joomla
Template
 Install a Template
 Change the Logo/Header

NDMU: Computer Studies Department S.Y. 2013 - 2014

 Objectives Topics Strategies/ Activities Values Desired Evaluation Time Frame
At the end of the topic, the XIII. Publishing Joomla Site
students will be able to:
 Lecture – Discussion  Participation  Written quiz
 Acquire domain name A. Acquiring domain name  Demonstration  Cooperation  Hands-on quiz 5 hrs
 Upload files to a Web B. Uploading file to your website  Project Presentation  Patience  Assignment
hosting site online   Attentiveness  Laboratory
 Configure config.php C. Configuring config.php  Creativity exercises
 Use Joomla installation file D. Installing Joomla quickstart to
and install to your website your website.


NDMU: Computer Studies Department S.Y. 2013 - 2014

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