BINANGONAN CATHOLIC COLLEGE

Binangonan, Rizal
Information Technology Department

Course Title : Web Systems and Technologies

Course Code : ITELEC2

Credit Units : 2 units lecture, 1 unit laboratory

Contact Hours : 5 hours per week

Course Description : This course presents the comprehensive details of building a Web-based application, from building front-end with HTML
to invoking back end scripts with other scripts written in an open-source development tool such as PHP and database
using MySQL. It touches the implementation of data validation with a client-side scripting language. Such as JavaScript or
other up to date trends in web design and web development software. The course also ventures in web based
frameworks and live web hosting.

Pre-Requisite : IT123A/IT123B
Placement : Second Year, First Semester

Program Educational Objectives (PEO):

Three to five years after completing the Information Technology program, the graduates will:
1. Excel in their profession/career utilizing the knowledge acquired in the Information Technology courses;
2. Become effective collaborators and innovators in information technology, applying professional/technical skills and competencies to make a
positive impact on society; and
3. Be engaged in life-long learning and professional development through self-study, continuing education, or graduate and professional studies.

Student Outcomes (SO):

By the time of graduation, students will have the ability to:
a) Apply the knowledge of computing, science and mathematics appropriate to the discipline.
b) Understand best practices and standards and their applications.
c) Analyze complex problems and identify and define the computing requirements appropriate to its solution.
d) Identify and analyze user needs and take them into account in the selection, creation, evaluation and administration of computer-based systems.
e) Design, implement and evaluate computer-based systems, processes, components or programs to meet desired needs and requirements under
various constraints.
f) Integrate IT-based solutions into the under environment effectively.
g) Apply knowledge through the use of current techniques, skills, tools and practices necessary for the IT position.
h) Function effectively as a member or leader of a development team recognizing the different roles within a team to accomplish a common goal.
Page 1 of 7
 i) Assist in the creation of effective IT project plan.
j) Communicate effectively with the computing community and with society at large about complex computing activities through logical writing,
presentations, and clear instructions.
k) Analyze the local and global impact of computing information technology on individuals, organizations, and society.
l) Understand professional, ethical, legal, security and social issues and responsibilities in the utilization of information technology.
m) Recognize the need for and engage in planning self-learning and improving performance as a foundation for continuing professional development.

Course Learning Outcomes (CLO) and Relationship to Student Outcomes and Program Educational Outcomes
Course Learning Outcomes (CLO) Student Outcomes (SO) Program Educational Outcomes
(PEO)
CLO1 Illustrate the architecture and frameworks of web based a, b, g 1, 2
applications.

CLO2 Explain the importance of open source development tools in b, c, g 1, 3

creating Web-based applications and using HTML, CSS,
JavaScript, Bootstrap, and PHP.
CLO3 Familiarize with the functions and structures used in PHP and a, b, c 1, 2
implement complete scripts using PHP and MySQL syntax,
design and develop applications using a framework and present
in a web host.

Course Outline:
Course Teaching Learning Assessment Evaluation of Results
Timeframe Topics/Content Learning Activities Tasks
Outcomes
Week 1 1.0Orientation
5 hours 1.1 BCC Mission, Vision, Core values Know the
1.2 Orientation to Outcomes-Based Education, content of the
Institutional Outcomes, Program Educational OBE, Course Lecture/Interaction
Objectives, Program Outcomes and Course Outcomes Syllabi, Class
1.3 Classroom Requirements and Laboratory Policies Recitation
Guidelines
1.4 Grading System
Weeks 2-3 2.0 Understanding the elements of a web-based Direct Instruction
10 hours application.
2.1 Client-side component CLO 2 Guided Discussion Seat Work
2.2 Server-side component (PT 1)
2.3 Browsers Board Work
2.4 Web Servers
Program Assignment 1
3.0 Introduction to client-side scripting Demonstration (PT 1.1)
3.1 Interactive Web Applications
3.2 Scripts in Web Applications CLO 3 Accomplishment of
Page 2 of 7
 3.3 The role of Client-side scripting machine exercises Machine Problem
3.4 Capabilities and Limitations of Client-side No. 1
scripting (P 1)

4.0 Cascading Stylesheets

4.1 Introduction to CSS CLO 1 Do Machine Problem Written Work
4.2 CSS Syntax and Selections No. 1 (WW 1)
4.3 CSS Comments
4.4 Stylesheets
4.5 Backgrounds and Border Properties
Weeks 4-5 5.0 JavaScript
10 hours 5.1 Syntax, Statements
5.2 Comments, Variables
5.3 Operators CLO 1 Direct Instruction Written Work 50% of students got
5.4 Data Types (WW2) >=3.0 on a 5-point scale
5.5 Functions Guided Discussion
5.6 Objects
5.7 Scope Program
5.8 Event Demonstration
5.9 Strings CLO3 Machine Problem 60% of students got
5.10 Math, Random Board Work No. 2 >=3.0 on a 5-point scale
5.11 Dates (P 2)
5.12 Arrays
5.13 Switch, Loops,
5.14 Type Conversion
5.15 RegExp
6.0 Elements of client-side scripting
6.1 The Environment
6.2 The Browser API
6.3 The Document Object Model
7.0 Server-side scripting using PHP
7.1 Introduction to PHP
7.2 Installing PHP
7.3 Output the echo command CLO 2 Seat Work 60% of students got
7.4 Output using print (PT 2) >=3.0 on a 5-point scale
8.0 Basic PHP Syntax
8.1 Variables in PHP
8.2 Comments in PHP
8.3 PHP Operators
8.4 Arithmetic Operators
8.5 Assignment Operators
8.6 Comparison Operators
8.7 Logical Operators
Week 6 Direct Instruction Seat Work 60% of students got
3 hours 9.0 PHP Conditional Statements CLO 2 Guided Discussion (PT 2.1) >=3.0 on a 5-point scale
Page 3 of 7
 9.1 Conditional Statements
9.2 If… Else statement Program
9.3 Switch statement CLO 1 Demonstration, Written Work 50% of students got
9.4 The If Statement Board Work (WW 2) >=3.0 on a 5-point scale
9.5 The Switch Statement
9.6 Looping Statements CLO 3 Accomplishment of
machine exercises Machine Problem 60% of students got
No. 3 >=3.0 on a 5-point scale
Do Machine Problem (P 2.1)
No. 3
Week 6 50% of students
2 hours Prelim Exam Preliminary Exam got>=3.0 on a 5-point
scale
Week 7-8 10.0 Introduction to output formatting CLO 2 Direct Instruction Seat Work 60% of students got
10 hours 10.1 Formatting Output Guided Discussion (PT 3) >=3.0 on a 5-point scale
10.2 Selecting Pieces of Data Program
CLO 1 Demonstration, Written Work 50% of students got
11.0 Introduction to the Web Service, and Board Work (WW 3) >=3.0 on a 5-point scale
Databases using MySQL, Apache, XAMPP
11.1 Introduction to MySQL and Web Servers CLO 3 Accomplishment of
11.2 Installing / Connectivity to MySQL machine exercises Machine Problem 60% of students got
11.3 Testing PHP and MySQL to the web server No. 1 >=3.0 on a 5-point scale
Do Machine Problem (P 3)
No. 1
Week 9-10 12.0 Managing Databases in MySQL Direct Instruction
10 hours 12.1 Database Construction Guided Discussion
12.2 Database and Logins CLO 2 Seat Work 60% of students got
12.3 Creating a Table Program (PT 3.1) >=3.0 on a 5-point scale
12.4 Fields Demonstration,
12.5 Creating a Table with PHP Board Work
12.6 Inserting Information 60% of students got
Week 11 13.0 Introduction to database programming in PHP Accomplishment of Machine Problem >=3.0 on a 5-point scale
5 hours 13.1 Connecting to the Database CLO 3 machine exercises No. 2
13.2 Selecting the Database (P 3.1)
13.3 Executing Commands Do Machine Problem
13.4 Inserting Data No. 2
13.5 Displaying Data
50% of students got
Week 12 Midterm Exam
Midterm Exam >=3.0 on a 5-point
scale
Week 13- 14.0 Displaying data CLO 1 Direct Instruction Written Work 50% of students got
14 14.1 HTML Input (WW 4) >=3.0 on a 5-point scale
5 hours 14.2 Outputting Data Guided Discussion
14.3 Counting Rows
14.4 Setting up the Loop CLO 2 Program Assignment 1 60% of students got
Page 4 of 7
 14.5 Assigning the Data to Variables Demonstration, (PT 3.2) >=3.0on a 5-point scale
14.6 Combining the Script Board Work
Machine Problem
CLO 3 Accomplishment of No. 3
machine exercises (P 4) 60% of students got
>=3.0 on a 5-point scale
Do Machine
Problem No. 3
Week 15- 15.0 Updating & Deleting records CLO 1 Direct Instruction Written Work 50% of students got
16 15.1 Introduction (WW 5) >=3.0 on a 5-point scale
10 hours 15.2 The Update Script Guided Discussion
15.3 Displaying the Update Page
15.4 Updating the Database CLO 2 Program Assignment 60% of students got
15.5 Deleting Records Demonstration, (PT 3.3) >=3.0on a 5-point scale
15.6 Loops Board Work
Machine Problem
CLO 3 Accomplishment of No. 3
machine exercises (P 4.1) 60% of students got
>=3.0 on a 5-point scale
Do Machine
Problem No. 4
Weeks 17 16.0 Seminar in any of the following Web Based CLO 2 Direct Instruction Assignment 60% of students got
5 hours Technologies Application (PT 3.4) >=3.0on a 5-point scale
16.1 PHP Framework using Laravel
16.2 NodeJS CLO 3 Guided Discussion Machine Problem 60% of students got
16.3 AngularJS (P 4.2) >=3.0 on a 5-point scale
16.4 React
16.5 Bootstrap
Project Design, Presentation, and Review CLO3 Group Project Case Study 60% of students got
(P5) >=3.0 on a 5-point scale
Week 18 Final Exam Final Exam 50% of students got
>=3.0 on a 5-point
scale

Course Requirements:
1. Completion and submission of assignments and seat works.
2. Taking and passing all assessments and major examinations (Prelim, Midterm and Final term).
3. Demonstrate active participation in all classroom discussions and activities.

Page 5 of 7
Grading System:

Prelim Grade 30%

Class Standing 70%
Prelim Exam (CLO3) 30%
Midterm Grade 30%
Class Standing 70%
Midterm Exam (CLO3) 30%
Final Term Grade 40%
Class Standing 70%
Final Exam (CLO3) 30%

Final Grade 100%

Class Standing includes: (Prelim Term/Midterm)

Written Work (CLO1) - 30%
Performance Tasks (CLO2) - 20%
Product (CLO3) - 20%
Class Standing includes: (Final Term)
Written Work (CLO1) - 20%
Performance Tasks (CLO2) - 20%
Product (CLO3) - 30%

Textbook: See References

References:
1. Minnick, Jessica., Web design with HTML5 & CSS3 : comprehensive/, Cengage Learning,0117737, 006.6 .M665 2017 G
2. Bradford, Ronald, Effective MySQL : backup and recovery /, 113364005.7565 .B799 2012McGraw Hill Companies, Inc. 2012G
3. Gustafson, Aaron,Adaptive web design : crafting rich experiences with progressive enhancement /, 0116851 006.7 G982 2016 New
Riders, 2016 G
4. Geary, David M., Core HTML5 canvas :0110117, 006.66 .G292 2012, G
5. Bradford, Ronald, Effective MySQL : backup and recovery /113364, 005.7565 .B799 2012, McGraw Hill Companies, Inc. 2012G

Prepared by: Recommending Approval: Approved by:

Faculty Member Chairperson, BSIT/ACT Dean

Page 6 of 7
Page 7 of 7