Web Engineering

CSE 414
 Web Engineering
Web Engineering is study of processes, concepts ,
methods and techniques used to create high
quality web applications

Web Engineering is the application of systematic

and computable approaches to cost effective
requirements analysis, design, implementation,
testing, operation, and maintenance of high-quality
Web applications.
Web Engineering
Web ≠ Internet
What is RSS?
• RSS stands for Really Simple Syndication
• RSS allows you to syndicate your site content
• RSS defines an easy way to share and view
headlines and content
• RSS files can be automatically updated
• RSS allows personalized views for different sites
• RSS is written in XML
Protocols and Ports
Protocols and Ports
Protocols and Ports
Difference between static and dynamic
websites
Difference between static and dynamic
websites
Web Technologies
Attribute of Web Application
Network intensive
• By its nature, a WebApp is network intensive. It
resides on a network and must serve the needs of
a diverse community of clients.
• WebApp may reside on the Internet (thereby
enabling open worldwide communication).
• Alternatively, an application may be placed on an
intranet (implementing communication across an
organization) or
• An Extranet (internetwork communication).
 Internet
1.Internet is wide network of computers and is
open for all.
2. Internet itself contains a large number of
intranets.
3.The number of users who use internet is
Unlimited.
4. The Visitors traffic is unlimited.
5.Internet contains different source of information
and is available for all.
 Intranet
1.Intranet is also a network of computers
designed for a specific group of users.
2. Intranet can be accessed from Internet
but
with restrictions.
3. The number of users is limited.
4. The traffic allowed is also limited.
5.Intranet contains only specific group
information.
 Attribute of Web Application
Content driven
• the primary function of a WebApp is to use
hypermedia to present text, graphics, audio,
and video content to the end user.
 Attribute of Web Application
Continuous evolution
• conventional application software that evolves
over a series of planned, chronologically spaced
releases,
• Web applications evolve continuously. It is
not unusual for some WebApps (specifically,
their content) to be updated on an hourly
schedule.
• Continual care and feeding allows a Web site to
grow (in robustness and importance).
 Attribute of Web Application
Immediacy
• Web-based applications have an immediacy
that is not found in any other type of
software.
• That is, the time to market for a complete web
site can be a matter of a few days or weeks.
• Developers must use methods for planning,
analysis, design, implementation, and testing
• That have been adapted to the compressed time
schedules required for WebApp development.
 Attribute of Web Application
Security
• Because WebApps are available via network
access, it is difficult, if not impossible, to limit the
population of end-users who may access the
application.
• In order to protect sensitive content and provide
secure modes of data transmission
• strong security measures must be
implemented throughout the infrastructure
• that supports a WebApp and within the
application itself.
 Attribute of Web Application
Aesthetics
• An undeniable part of the appeal of a
WebApp is its look and feel.
• When an application has been
designed to market or sell products or
ideas
• aesthetics may have as much to do
with success as technical design.
Characteristics of Web Application
• The Categories of Web Application are:
Informational
• Read-only content is provided with
simple navigation and links.
Download
• A user downloads information from
the appropriate server.
Characteristics of Web Application cont…
Interaction
• Communication among a community of users
occurs via chatroom, instant messaging.
Customizable.
• The user customizes content to specific needs.

User Input
• Forms-based input is the primary mechanism for
communicating need.
Characteristics of Web Application cont…
Transaction oriented.
• The user makes a request (e.g., places
an order) that is fulfilled by the
WebApp.
• The application provides a service to the
user (e.g., assists the user in determining a
mortgage payment).
Characteristics of Web Application cont…
Portal
• The application channels the user to other
Web content or services outside the
domain of the portal application.
• Database access. The user queries a
large database and extracts information.
• Data warehousing. The user queries a
collection of large databases and
extracts information.
 Quality Attribute
Web application quality
Usability
Usability defines how well the application meets the
requirements of the user and consumer by being
intuitive, easy to localize and globalize, providing good
access for disabled users, and resulting in a good overall
user experience.
• Global site understandability
• On-line feedback and help features
• Interface and aesthetic features
• Special features
 Quality Attribute cont…..
Functionality
• Searching and retrieving capability
• Navigation and browsing features
• Application domain-related features
Reliability
• Correct link processing
• Error recovery
• User input validation and recovery
 Quality Attribute cont….
Efficiency
• Response time performance
• Page generation speed
• Graphics generation speed
 Quality Attribute cont…..
Maintainability
• Ease of correction
• Adaptability
Extensibility
• is a system design principle where the implementation
takes into consideration future growth.
• It is a systemic measure of the ability to extend a system
and the level of effort required to implement the extension.
• Extensions can be through the addition of new functionality
or through modification of existing functionality
The inventor of WWW

Sir Tim Berners-Lee

CSE414: WEB
ENGINEERING
Daffodil International University
OVERVIEW
▪ Course Policies-
▪ Zero Tolerance on Plagiarism
▪ Grading will be based on university policy

▪ Contact Details-
▪ Office –
▪ Cell – [Text Preferred]
▪ Email – [Write E-mail subject properly]

▪ Google Classroom Code - arld4o4

▪ BLC/Online Module Link- [Will be updated soon]
▪ More at, my google site
CONTENTS-
✔ Internet and the Web
✔ Client-Server Paradigm
LECTURE
OUTCOME
✔ Differentiate between Web and Internet
✔ Understand Client-Server Paradigm
✔ Select the appropriate tools
WEB ≠ INTERNET
▪ Internet
▪ A physical network of networks connecting billions of computers and other devices using
common protocols (TCP/IP) for sharing and transmitting information
▪ World Wide Web [Old]
▪ A collection of interlinked multimedia documents
(web pages stored on internet connected devices and accessed using a common
protocol (HTTP))
▪ Key distinction:
▪ The internet is hardware plus protocols while the world wide web is software plus
protocols
▪ The world wide web is an application using the internet to transmit information, just like
many others, for example, email, SSH, FTP
HISTORY(1/3)
▪ 1969: ARPANET (precursor of the Internet)
▪ 1971: First e-mail transmission, File Transfer Protocol
▪ 1972-1980:
▪ Vadic VA3400 modem (1,200 bit/s over phone network)
▪ RSA public-key cryptography
▪ EPSS/SERCnet (first UK networks between research institutions)

▪ 1981: IBM PC 5150

▪ 1982: TCP/IP standardized
▪ 1985 : FTP on TCP standardized
HISTORY(2/3)
▪ mid 1980s: Janet (UK network between research institutions
with 2 Mbit/s backbone and 64 kbit/s access links)
▪ 1986:U.S. Robotics HST modem (9600 bit/s) TCP/IP networks expand across the
world
▪ Late 1980s: TCP/IP networks expand across the world
▪ 1991:
▪ Janet adds IP service
▪ Gopher / World Wide Web
▪ GSM (second generation cellular network) digital, circuit switched network for full
duplex voice telephony
▪ 1995: First public releases of JavaScript and PHP
▪ 1997: World Wide Web slowly arrives on mobile phones
HISTORY(3/3)
▪ Current Applications:
▪ Communication via e-mail, Twitter, etc
▪ Joint manipulation of concepts and actions: Collaborative editing, Crowd sourcing, Wikis
(Wikipedia)
▪ E-Commerce: Online auctions and markets
▪ Social media, social networks,
▪ virtual learning environments
WHERE THE WEB WAS BORN
▪ “Tim Berners-Lee, a British scientist,
invented the World Wide Web (WWW) in
1989, while working at CERN. The Web
was originally conceived and developed to
meet the demand for automated
information-sharing between scientists in
universities and institutes around the
world.”
▪ Go to CERN’s official site
HOW THE WEB
BEGAN
▪ An image of the first page of Tim Berners-
Lee's proposal for the World Wide Web in
March 1989
WEB PROGRAMMING VERSUS APP
PROGRAMMING
▪ Web Programming relies on web browsers as means to render user interfaces that
are coded in HTML/CSS
▪ Web Programming relies on HTTP as the main protocol to exchange information
within a distributed system
▪ Web-based apps use a mix of server-side and client-side computing
▪ Web-based apps can be changed almost instantaneously and on a per-user / per-
use basis
▪ App Programming relies on directly coded ‘native’ interfaces (Swift/Java)
▪ App Programming can rely on arbitrary protocols to exchange information within
a distributed system
▪ Programmers have more flexibility and more control when developing
‘traditional’ apps
▪ It is not obvious which approach is better and in which situation
STATIC VS. DYNAMIC
WEBPAGES(2/2)
▪ DYNAMIC PAGE
▪ As the Web continues towards more and more online
services and e-commerce continues to grow, Web pages
must also provide dynamic content.
▪ Pages can be fluid, changeable (e.g., rotating banners,
inclusion of “real-time” data, etc.).
▪ Must be able to react to the user’s actions, request and process
info, tailor services.
▪ e.g., amazon.com, YouTube, any e-commerce website, online email
services, etc.
STATIC VS. DYNAMIC
WEBPAGES(1/2)
▪ STATIC WEBPAGE
▪ Many Web pages are still static in nature.
▪ Contents (text/links/images) are the same each time the webpage
is accessed.
▪ e.g., online documents, many personal homepages

▪ HyperText Markup Language (HTML) and Cascading Style

Sheets (CSS) are used to specify text, image, and page
format, along with styling the page for various effects
(backgrounds, colors, table layout, page margins, etc.).
DISTRIBUTED SYSTEM
▪ Also known as distributed computing
▪ System with multiple components
▪ Located on different machines that communicate and coordinate actions
▪ Appear as a single coherent system to the end-user.
▪ Benefits and challenges of distributed systems
▪ Computing happens independently on each node
▪ easy and generally inexpensive to add additional nodes and functionality as necessary

▪ Fault-tolerant as they can be made up of hundreds of nodes that work together

▪ The system generally doesn’t experience any disruptions if a single machine fails

▪ Efficient because work loads can be broken up and sent to multiple machines
TYPES OF DISTRIBUTED
SYSTEMS
▪ Client-server—Clients contact the server for data, then format it and display it to
the end-user. The end-user can also make a change from the client-side and
commit it back to the server to make it permanent.
▪ Peer-to-peer—There are no additional machines used to provide services or
manage resources. Responsibilities are uniformly distributed among machines in
the system, known as peers, which can serve as either client or server.
▪ Three-tier—Information about the client is stored in a middle tier rather than on
the client to simplify application deployment. This architecture model is most
common for web applications.
▪ n-tier—Generally used when an application or server needs to forward requests
to additional enterprise services on the network.
CLIENT-SIDE
PROGRAMMING(1/2)
▪ Can download program with a webpage, execute the program on
the client’s machine.
▪ Simple, generic, but sometimes insecure (e.g. cross-site scripting
attacks).
▪ JavaScript
▪ A scripting language for Web pages, developed by Netscape in 1995.
▪ Uses a C++/Java-like syntax, so familiar to many programmers, but simpler.
▪ JavaScript is good for adding dynamic features to Web page, controlling forms,
and the GUI.
▪ Requires users to have this technology enabled on their browsers.
CLIENT-SIDE
PROGRAMMING(2/2)
▪ Jquery
▪ first released in 2006, is a JavaScript library to help with cross-browser
compatibility issues.
▪ Java applets
▪ Can define small, special-purpose programs in Java called applets.
▪ Provides (almost) full expressive power of Java (but with more overhead).
▪ Good for data-heavy tasks or more complex tasks such as graphics
SERVER-SIDE
PROGRAMMING(1/2)
▪ Can store a program on a web server, and supply a link from a webpage to
execute that program. And you can also accept input from a user in terms of
“filling in blanks” and/or file upload(s), etc.
▪ The process of doing this can be more complex, requires server privileges, but
can still be (mostly) secure with proper precautions.
▪ Common Gateway Interface (CGI) programming
▪ Programs are written to conform to the CGI.
▪ When a webpage submits, the data from the page is sent as input to the CGI
program. CGI program executes on the server and sends its results back to
browser as a webpage.
▪ Good if computation is large/complex or requires access to private data.
SERVER-SIDE
PROGRAMMING(2/2)
▪ Other server-side programming technologies include:
▪ Active Server Pages (ASP)
▪ Java Servlets
▪ PHP (You will learn this one in this course!)
▪ Server Side Includes
▪ Ajax (using JavaScript on the client side too)
▪ Some of these are vendor-specific alternatives to CGI (such as Microsoft’s ASP).
▪ They often provide many of the same capabilities as CGI programs but use HTML-like
tags (such as PHP).
▪ Some of these technologies might require functionality to be enabled in the client’s
browser (e.g. Ajax)
CLIENT-SERVER PARADIGM
▪ You already know this from CSE313: Computer Networks
▪ Let’s revisit,
▪ Server program sends copies of documents on request
▪ Requires computer on Internet and server software always running
▪ Client program sends message to server to request copy of document
▪ Clients and servers communicate via TCP/IP
▪ Client and server may establish "persistent connection" so that all pages after first arrive
more quickly
▪ More…
 Security
▪ Identification
▪ Confidentiality
▪ Authentication
▪ Integrity
▪ Non-Repudiation
▪ Availability
▪ Reliability
▪ Accountability
▪ Access Control
Web Attacks
• Cross-site scripting (XSS). That involves an attacker uploading a piece of malicious
script code onto your website that can then be used to steal data or perform other
kinds of mischief. Although this strategy is relatively unsophisticated, it remains quite
common and can do significant damage.
• SQL Injection (SQLI). This happens when a hacker submits destructive code into an
input form. If your systems fail to clean this information, it can be submitted into the
database, changing, deleting, or revealing data to the attacker.
• Path traversal. Also resulting from improper protection of data that has been
inputted, these web-server attacks involve injecting patterns into the web-server
hierarchy that allow bad actors to obtain user credentials, databases, configuration
files, and other information stored on hard drives.
• Local File Inclusion. This relatively uncommon attack technique involves forcing the
web application to execute a file located elsewhere on the system.
• Distributed Denial of Service (DDoS) attacks. Such destructive events happen when
an attacker bombards the server with requests. In many cases, hackers use a network
of compromised computers or bots to mount this offensive. Such actions paralyze
your server and prevent legitimate visitors from gaining access to your services.
Protection Against Attack
• Automated vulnerability scanning and security testing. These programs help you to
find, analyze, and mitigate vulnerabilities, often before actual attacks occur. Investing
in these preventive measures is a cost-effective way to reduce the likelihood that
vulnerabilities will turn into cyber disasters.
• Web Application Firewalls (WAFs). These operate on the application layer and use
rules and intelligence about known breach tactics to restrict access to applications.
Because they can access all layers and protocols, WAFs can be highly effective
gatekeepers when it comes to shielding resources from attack.
• Secure Development Testing (SDT). This instruction is designed for all security team
members, including testers, developers, architects, and managers. It provides
information about the newest attack vectors. It assists the task force in establishing a
baseline and developing a practical, dynamic approach to preventing website attacks
and minimizing the consequences of breaches that cannot be stopped.
AN EXERCISE
▪ Pick some of your favorite websites and try to identify
▪ the static components
▪ the dynamic components
▪ Which sites are using JavaScript?
▪ Which are using Java applets?
▪ Which are using server-side elements such as CGI programs?

▪ READINGS
▪ http://cgi.csc.liv.ac.uk/~ullrich/COMP519/notes/lect01.pdf
▪ https://cgi.csc.liv.ac.uk/~martin/teaching/comp519/NOTES/overview.pdf
REFERENCES
▪ https://home.cern/science/computing/birth-web/short-history-web
▪ https://www.cs.purdue.edu/homes/bxd/inter/tableOfContents.html
ACKNOWLEDGEMENT
▪ This module is designed and created with the help from following sources-
▪ https://cgi.csc.liv.ac.uk/~ullrich/COMP519/
▪ http://www.csc.liv.ac.uk/~martin/teaching/comp519/

▪ My sincere grattitude to Professor Hustadt and Professor Martin for their support
and materials.
▪ Following lecture materials also use different sources including this and will be
mostly mentioned at reference section.