THE UNIVERSITY OF LAHORE

Course Outline

CS-: WEB ENGINEERING

Fall-2024

Credit Hours (2+1)

2 session lectures (90 min each)
Weekly tuition pattern
1 Lab (180 min each)
Prerequisites:
Abdul Ghaffar (Course Instructor) and
Course Instructor Salman Irfan (Lab Instructor)
Syllabus Designed By

1- Course Description
The web has become a major delivery platform for a variety of complex and sophisticated
enterprise applications in several domains. In addition to their inherent multifaceted
functionality, these web applications exhibit complex behavior and place some unique demands
on their usability, performance, security and ability to grow and evolve. However, a vast majority
of these applications continue to be developed in an ad-hoc way, contributing to problems of
usability, maintainability, quality and reliability. While web development can benefit from
established practices from other related disciplines, it has certain distinguishing characteristics
that demand special considerations. In recent years, there have been developments towards
addressing these considerations. As an emerging discipline, web engineering actively promotes
systematic, disciplined and quantifiable approaches towards successful development of high-
quality, ubiquitously usable web-based systems and applications. In particular, web engineering
focuses on the methodologies, techniques and tools that are the foundation of web application
development and which support their design, development, evolution, and evaluation. Web
application development has certain characteristics that make it different from traditional
software, information system, or computer application development.
While web Engineering uses software engineering principles, it encompasses new approaches,
methodologies, tools, techniques, and guidelines to meet the unique requirements of web-based
applications
2- Objectives
Upon successful completion of the course, a student should be:
1. Be familiar with Web application development software tools and environments
currently available on the market.
2. Teach the concepts, principles and methods of Web engineering.
3. Build Web Applications that are scalable flexible to modify and easy to manage.

Page 1 of 8
The University of Lahore
 1. 3- Course Learning Outcomes (CLOs)
At the end of the course the students will be able to: Domain BT Level*

1. Be able to understand the concepts, principles and

C 2, 3
methods of Web engineering.
2. Be able to apply the concepts, principles, and
methods of Web engineering to Web Applications C 4, 5,6
development.
3. Learn how to design a static layout using web
A 2,3
designing skills
.4 Learn how to understand user requirements related to
P 2,3
web development project
* BT= Bloom’s Taxonomy, C= Cognitive domain, P= Psychomotor domain, A= Affective
domain
2. 4- Course Contents
HTML Introduction and basic tags (Tables, lists, images, forms and text formatting).
Introduction to css, Introduction to Cascading style sheets, Selectors, CSS Properties
(Background, Font, Text properties), CSS3 Properties (BOX model, Advance Selectors)
Margins, Padding, Borders, Media Queries in css.
Introduction to Responsive Designs in Bootstrap. Grid System layout and basic element
classes.
Introduction to Javascript, variables, loops, If statements, arrays, alert, confirm, prompt,
Javascripts HTML element manipulation, functions, Javascript Mouse Events. Introduction to
Jquery, Jquery Effect, Jquery Examples.
Introduction to Ajax, Ajax XMLhttp, Ajax Request, Ajax Response.
Introduction to React Js, HTML / JSX, component based architecture, class based components,
functional based components, React hooks, React component life cycle methods, Single page
routing, dynamic routing, protected routing, REST API integrations and global state
management.
Introduction to Node.js, Client-Server Architecture, REST APIs Development, API Testing Tools
(Postman), REST API methods (GET, POST, PUT, DELETE).
Role of MVC in Node.js, MVC Routing Static and Dynamic Routing Route Parameters
Named Routes Route Groups Introduction to Middlewares
MongoDB integration with Node.js, CRUD operations, user authentication and authorization,
server file upload.

3. 5- Teaching Methodology / Course Structure

Lectures, Written Assignments, Practical labs, Semester Project, Presentations
4. 6- Course Assesment
Sessional Exam, Home Assignments, Quizzes, Project, Presentations, Final Exam

Page 2 of 8
The University of Lahore
 5. 7- Text
6. Web Engineering: A Practitioner's Approach by Roger Pressman and David Lowe,
McGraw‐Hill, 2009.
7. Web 2.0 Architectures: What Entrepreneurs and Information Architects Need
to Know by James Governor, Dion Hinchcliffe, and Duane Nickull, O'Reilly,
2009.
3. Murach's PHP and MySQL
Book by Joel Murach and Ray Harris

8. 8- Reference Materials
1. Programming PHP Book by Rasmus Lerdorf
2. Learning PHP, MySQL & JavaScript: With JQuery, CSS & HTML5 Book by
Robin Nixon.
3. Mastering Laravel Book by Christopher John Pecoraro

9- Course Duration
This course will be held twice a week of 1.5 hours class duration.
10- Course style
The course will be delivered in a classroom environment.
9. 11- Additional Course Requirement
In addition to the objectives of this course, students are expected to gain skills to model
and verify the real time case studies of the concurrent systems using automatic model
checking tools.
10. 12- Course Outline
The lecturers are supposed to complete the following topics/sub-topics before the
mid/final term examination as prescribed in the course outline below:

Course Delivery Plan

Overview of Basic Conventions in Web Engineering
Introduction to Web Engineering

Introduction to Web: HTTP, HTTPS, FTP, URL,

Lecture 1
Week # 1 Web Browser, Web Server, SMTP Server, ISP, Hyperlink, DNS
An Overview about HTML (Basic Tags)
Closed and Opened Tags Difference, Hello World program in
HTML
Introduction to HTML coding
Lecture 2 Tables, Listings, Div, Span etc.

Page 3 of 8
The University of Lahore
 Images, ordered and un-ordered list tags
HTML5 forms, GET and POST data
Different types of input tags
Introduction to Coding in Css
Introduction to Cascading style sheets
Selectors, CSS Properties (Background,
Font, Text properties)
Lecture 3

CSS3 Properties (BOX model, Advance Selectors)Margins,

Padding, Borders
Week # 2
Other methods to implement Css positioning
Introduction to Responsive Css and Bootstrap
Introduction to Different Layouts of Mobile screens
Practical examples of media
Lecture 4 queries
Introduction to Bootstrap
Introduction to Bootstrap grid system
Introduction to coding in javascript
Introduction to Javascript, variables, loops
If statements, arrays, alert, confirm, prompt
Lecture 5 Javascripts HTML element manipulation
Week # 3 Javscript functions, Javascript Mouse Events

Set and Map Data Structure, array’s functions (for each, map,
Lecture 6 filter, find, reduce) array destructuring
Objects, Object Destructuring, Array of Objects, JSON.

Document Object Model (DOM), DOM

Lecture 7 Manipulation, DOM Selectors,
Week # 4 Introduction jQuery, jQuery history, jQuery Competitors

Introduction to React Js, Component based Architecture, Folder

Lecture 8
Structure, Comparison with Angular and Vue Js

Week # 5
Lecture 9
React Js installation, npm, React Js directory structure

Page 4 of 8
The University of Lahore
 Lecture 10
Class based components and functional based components, set
state in class-based component

Lecture 11
JSX
Week # 6 Introduction to JSX, JSX vs HTML, Component rendering,
Conditional rendering

Lecture 12 Component level state management using use state, button click
event

Lecture 13
Component based Folder Structure, Functional Component Usage,
class vs functional component, react props, passing props to
Week # 7
Functional component

React Life Cycle Methods

Lecture 14 Class-based component life cycle, functional-based component
lifecycle method

Lecture 15 Introduction To State Management

Week # 8 Local State Management

Lecture 16
Global state management
Lecture 17 Single Page App Routing using react-router-dom
Week 9
Lecture 18 Dynamic routing

Week 10
Mid Term
Introduction to Node.js, client server architecture, request response
Lecture 19
Week 11 life cycle
Lecture 20 REST APIs, CRUD REST APIs, API Testing Tool (Postman),

Page 5 of 8
The University of Lahore
 JSON

MongoDB installation, connecting MongoDB with Nodejs

Lecture 21
application using mongoose, saving a new document in MongoDB
Week 12
CRUD operations in MongoDB with Node.js, Dynamic Routing,
Lecture 22
Route parameters
CRUD REST API Integrations
Lecture 23
Week 13 Full Stack CRUD Application – 1 (Create, Read All), AJAX
Lecture 24 Full Stack CRUD Application – 2 (Read Specific, Update, Delete)
Lecture 25 Node.js User authentication, password encryption
Week 14
Lecture 26 Node.js Role base Access Control (RBAC)
Lecture 27 Protected Routing in Node.js
Week 15
Lecture 28 Protected Routing in React Js
Lecture 29 Environment variables in Node.js and React Js
Week 16
Lecture 30 Deployment
Final Examination

13- Assessment Criteria

ASSESSMENT CRITERIA
No. Assessment Percentage
1. Quiz/ Assignment 20%
2. Midterm 20%
3. Final 40%
4. Class Presentation 0%
5. Lab (Task + Project) 20 % (15+5) %
Total 100%

14- Attendance Requirements

Page 6 of 8
The University of Lahore
You are expected to attend all lectures, seminars, tutorials, and lab sessions or any other
classroom activity announced. Where you fail to attend classes, you cannot expect the
lecturer to brief you on what you have missed. You are responsible for your attendance,
not the academic staff. Attendance at tutorials and lab sessions will be strictly monitored,
and failure to attend will be taken into account.
Note: Minimum of 75% Attendance in lectures/lab sessions/seminars (if any) are
required for a student to sit in the Final-Term examination.
Etiquette: Please keep all cell phones turned OFF during class. If your activities during
class are deemed disruptive, you will be asked to leave.
a. 15- Submission and Collection of Assignment
All assignments should be handed in at the beginning of the class sessions when they are
due. All assignments may be handed back during scheduled classes.
16- General Information
Students are required to be familiar with the university code conduct, and to abide by its
terms and conditions.
16.1 Copying of Copyright Material by Student
A condition of acceptance as a student is the obligation to abide by the University’s
policy on the copying of copyright material. This obligation covers photocopying of any
material using the University’s photocopying machines, and the recording off air, and
making subsequent copies, of radio or television broadcasts, and photocopying textbooks.
Students who flagrantly disregard University policy and copyright requirements will be
liable to disciplinary action under the Code of Conduct.
16.2 Academic Misconduct
Please refer to the Code of Conduct for definitions and penalties for Academic
Misconduct, plagiarism, collusion, and other specific acts of academic dishonesty.
Academic honesty is crucial to a student's credibility and self-esteem, and ultimately
reflects the values and morals of the University as a whole. A student may work together
with one or a group of students discussing assignment content, identifying relevant
references, and debating issues relevant to the subject. Academic investigation is not
limited to the views and opinions of one individual, but is built by forming opinion based
on past and present work in the field. It is legitimate and appropriate to synthesize the
work of others, provided that such work is clearly and accurately referenced. Plagiarism
occurs when the work (including such things as text, figures, ideas, or conceptual
structure, whether verbatim or not) created by another person or persons is used and
presented as one’s own creation, unless the source of each quotation or piece of borrowed
material is acknowledged with an appropriate citation. Encouraging or assisting another
person to commit plagiarism is a form of improper collusion and may attract the same
penalties. To prevent Academic Misconduct occurring, students are expected to
familiarize themselves with the University policy, the Subject Outline statements, and
specific assignment guidelines. Students should also seek advice from Subject Leaders on
acceptable academic conduct.
16.3 Guidelines to Avoid Plagiarism

Page 7 of 8
The University of Lahore
Whenever you copy more than a few words from any source, you must acknowledge that
source by putting the quote in quotation marks and providing the name of the author. Full
details must be provided in your bibliography. If you copy a diagram, statistical table,
map, etc., you must acknowledge the source. The recommended way is to show this
under the diagram. If you quote any statistics in your text, the source should be
acknowledged. Again full details must be provided in your bibliography. Whenever you
use the ideas of any other author you should acknowledge those, using the APA
(American Psychological Association) style of referencing.
Students are encouraged to co-operate, but collusion is a form of cheating. Students may
use any sources (acknowledged of course) other than the assignments of fellow students.
Unless your Subject Leader informs you otherwise, the following guideline should be
used: Students may work together in obtaining references, discussing the content of the
references and discussing the assignment, but when they write, they must write alone
16.4 Referencing For Written Work
Referencing is necessary to acknowledge others' ideas, avoid plagiarism, and allow
readers to access those others’ ideas. Referencing should:
1. Acknowledge others' ideas
2. Allow readers to find the source
3. Be consistent in format and
4. Acknowledge the source of the referencing format
To attain these qualities, the school recommends use of either the Harvard or American
Psychological Association style of referencing, both of which use the author/date.
16.5 Referencing Standards
APA style referencing
17- Approval

Checked by, Approved by,

Page 8 of 8
The University of Lahore