ITC-226

Web Systems & Tech

Lecture 1
WEB FUNDAMENTALS

1
 Who am I?

“
Engr. Ambreen Akram
Senior Lecturer, Department of Computer
Science
MS(SE) Bahria University
BE(CIS) NED University of Engineering and
Technology
E-mail: ambreenakram.bukc@bahria.edu.pk
Office: Faculty Room#01(AI-Lab)
Course Objectives

✓ To focus on the technical aspects of web. It

covers the methodologies, techniques and tools
that are needed for the development of web
application.

✓ To give students hands-on training how to

build data driven web applications (web 2.0)
having rich user experience
Course outcomes
On successful completion of the course students will
be able to:
1. Develop a web application using server side
programming languages and components.
2. Apply the web engineering methodologies for
Web application development
3. Develop a component based web solution and
use UML diagrams to describe such a solution.
4. Identify and discuss the security risk of a Web
application.
 Resources

➢ Main
1. Programming the world wide web by Robert W.
Sebesta. 7th Edition , 2014
➢ References
1. Developing Web Applications, Ralph Moseley M.T.
Savaliya, second Edition, 2013
2. HTML5 covers CSS3, javascript,XML,XHTML,Ajax
,PHP, jQuery the black book , second edition ,
2016
3. Programming with Javascript by John David
Dionisio (2013)
The Course will Cover…
Understandings and learning the languages for
developing a web application
▪ Web fundamentals
▪ Html5 , XHtml ,DHtml
▪ CSS3
▪ JavaScript
▪ JQuery
▪ PHP
▪ MVC with PHP
▪ Data connectivity
▪ Web security
▪ Web services
Course Policy

➢ Attendance

○ Students are expected to attend all classes

○ Attendance is compulsory and will be taken
regularly.
○ Attendance for less than 80% of the lectures will
result in students being barred from taking the
Final Exam.
Course Policy

➢ Homework (Assignments)

○ Homework are due at the beginning of class,

○ Late homework will not be accepted,
○ All works have to be done independently,
○ Students handing in similar homework will
receive a grade of 0 (ZERO) and face possible
disciplinary actions.
Class Rules

○ Cell phones are restricted during class.

○ Cell phones must be turned off during
the lecture.
○ If your cell phone rings during class,
you may be asked to leave.
○ No discussion with each other during
lecture
○ Maintain discipline.
Course Material

➢ All course material, assignments , quizzes and

announcements will be uploaded on LMS
 Course Assessment

Assessment Criteria
○ Mid – Term 20%
○ Final Exam 50%
○ Quizzes 10%
○ Class Assignments/Team Project 20%
 Quizzes and Assignments
❑Quiz- 4 quizzes
◼ 2 before mid term
◼ 2 after mid term

❑Assignment- 4 assignments
◼ 2 before mid term
◼ 2 after mid term
Lecture Outline
➢ Web engineering
➢ Web applications
➢ Web Browser
➢ Internet
➢ Web Server
➢ Application Server
➢ Database Serve
➢ Web browser
➢ HTTP-Request/Response
➢ Web Architecture
➢ Client side VS Server side Scripting
WEB ENGINEERING

Web engineering refers to the process of designing,

developing, testing, and maintaining web
applications. It is a multidisciplinary field that involves
the use of various technologies and techniques to
create web-based software systems that meet specific
business or user needs.
WEB APPLICATION

A web application Is computer program that

utilizes web browsers and web technology to
perform tasks over the internet.
What is internet?
The Internet is a worldwide collection of computers and
computer networks that links billions of computers used by
businesses, government, educational institutions,
organizations, and individuals using modems, phone lines,
television cables, satellite links, fiber-optic connections, and
other communications devices and media .
What is internet?
➢ The Internet was developed in the 1960s by the
Department of Defense Advanced Research Projects
Agency (ARPA).
➢ ARPANET (as the Internet was originally called) had
only four nodes on it and sent its first message in
1969.
➢ Today’s Internet has millions of nodes on thousands of
networks.
➢ A network is a collection of two or more computers that
are connected to share resources and information.
Web Browser
A web browser (commonly referred to as a browser)
is a software application for retrieving, presenting, and
traversing information resources on the World Wide
Web for example IE, Firefox, Chrome etc.
Web Server
A web server is a computer serving HTTP( Hypertext
Transfer Protocol) requests. This typically refers to
a computer running web server software such as
Apache or Microsoft IIS(Internet Information Services)
Application Server

An application server is a computer that hosts

and execute web application which may be
created in PHP,ASP.NET Ruby on Rail or some
other web development technology.
Database Server
A database server is a computer that is devoted to running
a Database Management System (DBMS) such as MySQL.
Oracle or SQL sever that is being used by web application.
Web Application Examples
WWW = World Wide Web
➢ World Wide Web is a subset of he internet.
➢ In 1994, Burners Lee helped found the world wide web
Consortium(W3C) .
➢ The World Wide Web, also called the Web, is the part of the
Internet that supports multimedia and consists of a collection of
linked documents.
➢ To support multimedia, the Web relies on the
Hypertext Transfer Protocol (HTTP), which is a set
of rules for exchanging text, graphic, sound, video,
and other multimedia files.

➢ The linked documents, or pages of information, on

the Web are known as Web pages.
URL(Uniform Resource Locator)
➢ Without a universal addressing mechanism, it would be
impossible to navigate to a site, and page linking would
not be feasible
➢ Uniform Resource Locators (URLs) are used to identify
Web pages — basically a URL is a web address
➢ URLs have 2 components:
○ Protocol
○ IP Address
IP Addresses and DNS
➢ Every computer connected to the Internet must have a
unique IP address, no matter whether it’s a client or a
server (or both)
➢ An IP address is just a number that identifies a host on
the Internet. Example:
▪ 212.171.218.34 or 144.214.5.218
▪ The Domain Name System (DNS) is a database that
▪ matches IP addresses to host names
Cont…
➢ The Domain Name System (DNS) translates host
names into IP addresses, which are then used by
TCP to establish connections between HTTP clients
and servers.
➢ Domain names are administered in such a way
that they are guaranteed to be unique.

WWW.GOOGLE. COM
Host Domain
Name Name
TOP LEVEL DOMAINS
Network Models

➢ OSI Model
OSI model prescribes the steps
needed to transfer data over a
network and it is very specific in
it, defining which protocol is
used at each layer and how.
➢ TCP/IP Model
TCP/IP Model-Transition Control
Protocol/Internet Protocol
➢ A protocol is a set of rules that governs the
communications between computers on a network.
➢ The TCP/IP model was created in the 1970s by the
Defense Advance Research Project Agency (DARPA).
Like the OSI model.
➢ It consists of four layers: Network Access, Internet,
Transport, and Application.
TCP/IP Model

➢ Application Layer
The application layer is concerned with providing network services
to applications. There are many application network processes
and protocols that work at this layer, including HTTP, SMTP and
FTP.
➢ Transport Layer
This layer is concerned with the transmission of the data. The two
main protocols that operate at this layer are TCP and UDP(User
Datagram Protocol).
TCP/IP Model
➢ Internet Layer
This is the layer that contains the packet construct that will be
transmitted. This takes the form of the Internet Protocol (IP) which
describes a packet that contains a source IP Address, destination
IP Address and the actual data to be delivered.

➢ Network Layer
Link layer is lowest layer that is responsible for the physical
transmission across the media and logical links.it handles issues
like packet creation, transmission, error detection, reception and
more.
 OSI Model-Model-Open Systems
Interconnection
1. Application-The layer provides a means for the user
to access information on the network through an
application. This layer is the main interface for users to
interact with the application and therefore the network.
2. Presentation-The role of this layer is to convert incoming
and outgoing data on the network into a readable
presentation format.
3. Session-defines how to establish and terminate a
session between the two systems.
4. Transport-used for managing the packages of data and
the delivery of these packets to the correct location.
5. Network- used for creating the address and the route
of the data, this therefore ensures that the information
gets to the right place.

6. Data link-The role of this layer is to create links across

a network; this is done by gathering information and
transferring data in the forms of frames.

7. Physical layer- responsible for sending bit stream

(electrical signals, light pulse, radio waves) through the
network. It provides physical devices including cables,
cards, interfaces. (USB, Bluetooth, Ethernet physical
layer etc).
Protocol
❑ SMTP - Simple Mail Transfer Protocol - A protocol for e-mail
messages on the Internet
❑ FTP - File Transfer Protocol - a protocol that is used to transfer
and manipulate files on the Internet
❑ HTTP – Hyper Text Transfer Protocol - An Internet-based
protocol for sending and receiving webpages
❑ ICMP- Internet Control Message Protocol- used to report
problems with delivery of IP datagrams within an IP network.
❑ TCP -reliable transmission protocol and it guarantees that the
proper data transfer will take place
❑ UDP- This is a connectionless, “unreliable” service that does not
provide ordered delivery of packet contents.
HTTP
HTTP stands for Hypertext Transfer Protocol. It is used
to access data on the WWW (World Wide Web). It is a
protocol which governs the communication between the
client and server.
There are three important features of HTTP:

1. HTTP is Connectionless
After a request is made, the client disconnects from the
server and waits for a response. The server must re-
establish the connection after it processes the request.
2. HTTP is Media Independent
Any type of data can be sent by HTTP as long as both
the client and server know how to handle the data
content.

3. HTTP is Stateless
This is a direct result of HTTP being connectionless.
The server and client are aware of each other only
during a request. Afterwards, each forgets the other.
For this reason neither the client now the browser can
retain information between different requests across the
web pages.
Working
➢ A browser contacts a server to establish a
TCP connection with it.
➢ The HTTP software on the client sends a request to the
server. The HTTP software on the server interprets this
request and sends the response to the client.
➢ HTTP Commands:
❑ GET : Request by a client to obtain a web page from
the server.
❑ PUT : Request by a client to store a web page on the
server.
❑ POST : Request by a client to update contents of a web
page on the server.
❑ DELETE: Request by a client to remove a web page
from the server.
Multitier Applications Architecture
Web-based applications are often multitier applications
(sometimes referred to as n-tier applications) that divide
functionality into separate
Presentation Tier (Top Tier)
The top-most level of the application is the user interface. The
main function of the interface is to translate tasks and results
the something that user can understand(GUI)

Logic Tier (Middle Tier)

This layer coordinates the application, processes commands,
makes logical decision and calculations. It also moves and
process data between the two surrounding layers.

Data Tier (Bottom Tier)

Here information stores and retrieved from database or file
system. The information is then passed back to the logic layer
and then eventually back to user.
 Client-Side vs Server-Side
Scripting
A script is a set of instructions. For Web pages they
are instructions either to the Web browser (client-
side scripting) or to the server (server-side
scripting).
Client Side Scripting
The client is the system on which the Web browser is running.
JavaScript is the main client-side scripting language for the Web.
Client-side scripts are interpreted by the browser. The process
with client-side scripting is:
o the user requests a Web page from the server
o the server finds the page and sends it to the user
o the page is displayed on the browser with any scripts running
during or after display
Example: JAVA, HTML, C SS etc.
 Server-Side Scripting
o The server is where the Web page and other content lives.
The server sends pages to the user/client on request. The
process is:
o the user requests a Web page from the server
o the script in the page is interpreted by the server creating or
changing the page content to suit the user and the occasion
and/or passing data around
o the page in its final form is sent to the user and then cannot
o Example: PHP, ASP.NET & Ruby on Rails