Introduction to

Web Engineering
(Summer 2023)
Credit hours: 3+1
Prerequisites
•
Motivation to Learn
•
Object Oriented Programming (OOP)
Course Learning Outcome(Tentative)
• Engineering Knowledge
– Define the concepts relating to World Wide Web
• Design/Development of solutions
– Use design and development techniques for developing user
centric and/or data-driven Web applications
• Investigation
– Apply implementation strategies provided by various modern
frameworks for creating Web applications
• Modern Tool Usage
– Design Static and Dynamic Websites and applications using
modern tools and frameworks
Topics to be covered
Theory Practical
• Introduction to Web & Web
applications
• Client Side
– HTML5
– Static content – CSS3
– Styling to static content
– Reading and Storing static content – Bootstrap
– Dynamic content
– Managing dynamic content
– Jquery
• Server Side – AngularJS
– Content generation
– Reading and storing dynamic content – PHP
– Passing content within apps
– Laravel
 Grading(Tentative)
• Theory (75%)
– Quizzes: 12%
– Assignments: 10%
– Final Report: 8%
– MSE: 30%
– ESE: 40%
• Lab (25%)
– In-Lab Work: 70%
– Group Project: 30%
 Class Rules (1/2)
• No verbal consultations during the class
• No personal comments
• Do not disturb the class
• If something is not clear, do tell!!
• If you have question, do not hesitate.
• Read the course outline(Uploaded on LMS)
• Course Contents
– Available on LMS
– Will contain limited information only, so better to
consult online and secondary resources as well.
 Class Rules (2/2)
• Plagiarism and Academic Dishonesty are strictly prohibited
• No submission via email
• Late Day Policy
– Total late days: 3
– Can be used for assignments, final report, and project only
– No consolidation among group members
– No swapping/sharing
– Use self tracking during the course
– Final count will be done at the end of the course (by me)
– No penalty for consuming a late day
– Each day consumed beyond the allocated late days -> -2% from overall
score in assignments, Final report, and project; until all reach 0.
 Contact
• Fahad.satti@seecs.edu.pk
• Consulting Hours:
– Monday (3pm-5pm) or by appointment
Lecture # 1

About Internet & WWW Concepts

"The Internet is not a thing, a place, a single technology, or
a mode of governance. It is an agreement. "
John Gage, Director of Science, Sun Microsystems, Inc.

World Wide Web & Internet

• The internet is a network of computer networks worldwide
– Internet is a global network of computers.
– Who owns it?
– Each computer has a unique IP address in the form of nnn.nnn.nnn.nnn
• Each nnn is a number from 0 to 255 What is this scheme
called?
• The WWW organizes Internet resources using hypertext to link
related documents/files.
– Application running on top of the Internet
– Follows the Client-Server architecture
– Clients access resources via browser
– Server hosts the resources

https://www.submarinecablemap.com/
 Who defines the Web Standards?
• The World Wide Web Consortium (W3C) is an
international community that develops open
standards to ensure the long-term growth of
the Web.
• http://www.w3.org/
 Accessing web pages HTTP =
Hyper Text
Transfer
Protocol
• Static
– the contents don’t change (unless they’re edited).
– Web pages (text files) and other needed objects (e.g. images) are stored as files on the
web server and are retrieved as needed in response to HTTP requests

Client Server
HTTP Request
URL Content (HTML),
Web Files Style (CSS),
Browser Action (JS)
Server
HTTP Response

Client Server
HTTP Request Process
• Dynamic
URL Text, Image,
Video…
Web
–Browser
Web pages and other content is generated by an application server or script evaluator
Server Process
– Content is generated
HTTP Response dynamically
Files DB
 Client - Server communications (1/2)
• Client = Web Browser

• Type the URL in the web browser.

– If the URL contains a domain name, the
browser first connects to a domain name
server and retrieves the corresponding IP
address for the web server.

• The web browser connects to the web

server and sends an HTTP request (via
the protocol stack) for the desired web
page.

• The web server receives the request

and checks for the desired page.
– If the page exists, the web server sends it.
– If the server cannot find the requested page,
it will send an HTTP 404 error message. URL =
Uniform
Resource
Locator
Self-Study: https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/
 Client - Server communications (2/2)
• The web browser receives the page back
What is this mechanism called?
and the connection is closed.
a) Connection less, b) Stateless, c) TCP, d) UDP
• The browser then parses through the
page and looks for other page elements
it needs to complete the web page.
– These usually include images, videos,
applets, etc.
– In a webpage these typically exist as a
Hyperlink

• For each element needed, the browser

makes additional connections and HTTP
requests to the server.

• When the browser has finished loading

all images, videos, etc. the page will be
completely loaded in the browser
window.
 Components of Web Browser
• UI (User Interface)
– Part of the browser that the user interacts with.
• Rendering Engine Rendering Engine
– Responsible for displaying the content of a web page
– converts HTML, CSS, and JavaScript into a visual presentation. HTML CSS
• JavaScript Interpreter
– executes JavaScript code within the browser
– dynamic content and interactions on web pages.
Standard
• Networking DOM
DOM Tree Style Rules
– manages the communication between the browser and servers
• UI Backend
– provides the basic infrastructure for the UI, including rendering Stylized DOM Tree
widgets, handling input events, and supporting system
graphics.
• Data Storage Layout
– Provides storage mechanisms such as cookies, local storage, Builder
and cache, which allow the browser to store data on the user's
device.
• Browser Extension/Plug-in Support Painter UI
– enables the use of additional features and functionalities
through extensions or plugins

Self-Study: http://taligarsiel.com/Projects/howbrowserswork1.htm
 Web Browser Market Share
• "The pure and simple truth is rarely pure and never simple.“ -
Oscar Wilde

https://gs.statcounter.com/browser-market-share
 Universal Resource Location (URL)
http://tug.org:80/texshowcase/cheat.pdf

Path
Protocol
Port
(Scheme)
Host Name Filename

HTTP / HTTPS 80 is the

common Common filenames
webserver such as index.php,
port so it is Index.html are also
omitted omitted and handled
by the web server
 IP addresses
• IP addresses can be
– permanent also called static
• Good for static resources such as web servers, application servers, and others
• Once set, the IP cannot be used by anyone else
– temporary also known as dynamic
• Typically used by ISPs and corporate networks
• Provided via DHCP
• Good, when people use laptops and move around
• Every time you connect, you may receive a new IP address

DHCP = Dynamic Host

Configuration
ISP = Internet Service
Protocol
provider
 Domain Names and Address Resolution
• To connect from computer A to computer B an IP
address is used
• Usually people do not use IP addresses directly to
access other computers
• As a rule names like www.seecs.edu.pk are used
because they are easier to remember
• Domain Name system or DNS distributed database is
used to map names to IP addresses
 DNS: Domain Name System
• DNS is a distributed database of computers’ names
and their corresponding IP addresses
• DNS servers are used to host the DNS database and
software to use it
• Since the DNS database is too large to be stored on
any specific computer only a subset of the database
is usually kept on any DNS server
 Internet hierarchy

PK …………….. FR UA US

ORG GOV EDU COM NET MIL

SEECS MIT IBM Apple

Library Sub-Website
 DNS Working
The computer requesting a name resolution will be re-directed 'up' the hierarchy until a DNS
server is found that can resolve the domain name in the request.
DNS

Client DNS
Hostname DNS
URL

Browser The job of the

DNS server is to
map the name DNS
IP Address
to an IP address

This request happens with

the IP address
If the DNS server can not resolve the
Server domain request (because it does not
HTTP Request have it in its part of the database) then
it redirects the request to a different
Web
DNS server
Server
HTTP Response
 Protocol Stack

My computer Your computer

Application Application

TCP TCP

IP IP

Hardware Hardware

INTERNET (Transmission Channel)

 Internet Protocol
• In order to send a message from one computer
to another computer we make use of Protocols
( even though we do not see them ).
• There are several layers of protocols which we
call Protocol Stack because they are built on top
of each other.
• The protocol stack used on the Internet is
referred to as the TCP/IP protocol stack because
of the two major communication protocols used.
 Protocol Layers
• Application Protocol Layer is specific to applications, for example, HTTP, E-
mail, FTP, etc.
• Transmission Control Protocol Layer directs packets to a specific
application on a computer using a port number ( more about port
numbers below).
• Internet Protocol Layer IP directs packets to a specific computer using an
IP address.
• Hardware Layer converts binary packet data to network signals and back
(e.g. Ethernet network card, modem for phone lines, etc.)

Application
TCP
IP
Hardware
 Sending a message from computer A to B
 The message would start at the top of the protocol stack on your
computer and work its way downward.
 If the message to be sent is long, each stack layer that the
message passes through may break the message up into smaller
chunks of data.
 This is because data sent over the Internet is sent in manageable
chunks. On the Internet, these chunks of data are known as
packets.
 Sending a message from computer A to B
 The packets would go through the Application Layer and continue
to the TCP layer.
 Each packet is assigned a port number.
 Ports will be explained later, but suffice to say that many
programs may be using the TCP/IP stack and sending messages.
 We need to know which program on the destination computer
needs to receive the message because it will be listening on a
specific port.
Sending a message from computer A to B
 After going through the TCP layer, the packets proceed to the IP
layer. This is where each packet receives it's destination address.
 Now that our message packets have a port number and an IP
address, they are ready to be sent over the Internet.
 The hardware layer takes care of turning our packets into
electronic signals and transmitting them over the phone line.

Application Application
TCP TCP
IP IP
Hardware Hardware

INTERNET (Transmission Channel)

 Sending a message from computer A to B
• ISP’s router examines the address of each packet and decides where to
send it ( usually to another router)
• Once the packet reaches the destination computer the process works
upward and the packets are reassembled.
• Note that all the extra information such as port and address numbers are
stripped from the packets
 Application protocols (HTTP)
• Hypertext Transfer Protocol or HTTP is used by web servers and
browsers
• HTTP is a stateless text based protocol
• HTTP is an application level protocol
• Web servers usually use port 80 by default
 Application Protocols: (FTP)

• File Transfer Protocol or FTP

• FTP is used to send files between computers
• FTP is connection based protocol
• FTP can transfer either text or binary data
• Login is required
• Port 20/21 is usually used
 Transmission Control Protocol (TCP)
• TCP is responsible for routing application protocols to the correct
application on the destination computer
• TCP is a connection-oriented, reliable, byte stream service
• The job of TCP is to get data from application to application
reliably!
Thank You