ITC501

Vaishali K.
 Marks Distribution - Theory

■ Theory – 80 Marks
■ Avg of 2 Tests – 20 Marks

■ Total -- 100 Marks

Vaishali K.
 Marks Distribution - Lab

■ Oral /Practical – 25 Marks

■ Term Work – 25 Marks
■ Total – 50 Marks

Vaishali K.
 Marks Distribution - Lab

■ Oral /Practical – 25 Marks

■ Term Work – 25 Marks
■ Total – 50 Marks

Vaishali K.
 Mini Project – 2 A Web Based
Business Model
Marks Distribution - Lab
■ Oral /Practical – 25 Marks
■ Term Work – 25 Marks
■ Total – 50 Marks

Vaishali K.
 Syllabus
■ Web Programming Fundamentals
■ JavaScript
■ React Fundamentals
■ Advance React
■ NodeJS
■ Express

Vaishali K.
 Text Books
■ 1. Rediscovering JavaScript, Master ES6, ES7, and ES8, By Venkat
Subramaniam · 2018

■ 2. Learning React Functional Web Development with React and

Redux, Alex Banks and Eve Porcello, O’Reilly

■ 3. Learning Redux, Daniel Bugl, Packt Publication

■ 4. Learning Node.js Development, Andrew Mead, Packt Publishing

■ 5. RESTful Web API Design with Node.js 10, Valentin Bojinov, Packt
Pub.

■ References: 1. Web Development with Node and Express, Ethan

Brown, O’Reilly

Vaishali K.
CHAPTER 1

Web Programming
Fundamentals

Vaishali K.
 History
⚫ Information has been stored for future
references.
⚫ Duplication is required for security
⚫ Communication to other places
⚫ Computer - information storage & transfer
is required.

Vaishali K.
 Key Concepts
⚫ When information is collected &
stored there is a need for
duplication as well as
communication to other places.

Vaishali K.
 History of Internet
⚫ In 1960, US organization called Defense
Advanced Research Projects Agency
(DARPA) later shortened to ARPA was
formed.
⚫ Terms like “global village” and “packet
switching” were used.
⚫ 1967: Interface Message Processor (IMP)
came into existence which functions as an
interface between a computer and the wide
area network (WAN).
⚫ 1969: All the technologies were culminated
into ARPANET, first wide area packet
switched network.
Vaishali K.
 History of Internet
⚫ ARPANET ran under a control program
called the Network control Program (NCP).
⚫ Later on NCP was replaced by TCP/IP.

Vaishali K.
Vaishali K.
Vaishali K.
Vaishali K.
Vaishali K.
 What is Internet
⚫ Internet or internetworking refers to a
wide network through which computers
are interconnected globally with one
another and capable of sharing resources
among themselves.

⚫ Interconnection of computers and

computer networks using TCP/IP
communication protocol.

⚫ Transport Control Protocol/ Internet

Protocol (TCP/IP).
Vaishali K.
Vaishali K.
Vaishali K.
 What is WWW
⚫ World Wide Web (WWW)
commonly known as Web, is a
service that runs on the
internet & helps you to view
web pages, which are linked by
hyperlinks & URL with the
help of web browsers

Vaishali K.
The WWW
⚫ Tim Berners-Lee , in 1980 investigated how
computer could store information with
random links
⚫ In 1989 ,he proposed the idea of a global
hypertext space in which any network
accessible information could be referred to by
a single “Universal document Identifier”
⚫ In 1990 this idea was expanded with the
program called “Worldwide Web” ie. Browser ,
web server, HTML,URL.
⚫ In 1994 , he formed World Wide Web
Consortium(W3C)where company
&Organization can discuss& agree on new
Vaishali K.
common computer Protocol.
 Web System Architecture

Vaishali K.
Vaishali K.
Domain Name System
⚫ Users deal with the host names rather than
IP addresses.
⚫ These names are arranged in a hierarchical
structure which is nothing but domain.

Vaishali K.
Vaishali K.
 Open System Interconnection
(OSI) Model

Vaishali K.
Vaishali K.
Vaishali K.
 The TCP/IP Model

Vaishali K.
Application Protocols
⚫ All applications use TCP/IP to provide
communication services.
⚫ The data delivered by TCP/IP must be
formatted according to application
protocols.
⚫ A number of Internet Application
protocols are available:

Vaishali K.
 Application Protocols
⚫ HTTP: Hypertext Transfer Protocol
⚫ FTP: File Transfer Protocol
⚫ SMTP: Simple Mail Transfer Protocol
⚫ TFTP: Trivial File Transfer Protocol
⚫ RIP: Routing Information Protocol
⚫ IMAP: Internet Message Access Protocol.

There are many applications/services in wide use

on Internet, called application level protocols.
These protocols are defined at the application
layer in OSI reference model

Vaishali K.
 Protocols
⚫ Protocol is a set of rules or an agreement
that specifies a common language that
computers on a network use for
communication with other computers.
⚫ Ethernet: used to transfer information on a
LAN.

⚫ Internet Protocol (IP): provides communicable

address of/to computers. Computers identify
each other by the IP addresses.

⚫ Transport Control Protocol (TCP): guarantees

reliable, proper delivery of data from the
sender to the receiver.
Vaishali K.

⚫ File transfer protocol (FTP): used to connect

 Protocols
⚫ Hypertext Transport Protocol (HTTP): this
protocol is used to retrieve Web pages
from a Web server.

⚫ Simple Mail Transfer Protocol (SMTP): this

protocol is used for email transmissions.

Vaishali K.
Web System Architecture Type

⚫ 1) Single-Tier Architecture
⚫ 2) Two-Tier Architecturee
⚫ 3) Three-Tier Architecture
⚫ 4) N-Tier Architecture
 Single Tier Architecture
⚫ All Layer in a single computing devices.
⚫ Adv:
User
⚫ Easy to manage Interface
⚫ Data is more secure . Processing
Logic
⚫ Data stored on same machine.
Data
⚫ Dis-Adv: Storage &
Access
⚫ Scaling not possible.
⚫ No means of sharing data.
Traditional Host Systems
A Central Processing System (Mainframe) provides all processing.
Local Terminals are responsible for display and user input.
Local Terminals do not contain any intelligent processing capabilities.
2 Tier Architecture
Adv: Less network resources
Disadv: Changes are not allowed
Constraints on database
Req connection
u est

Resp
onse

Database
Management +
Transaction
Mgmt
Presentation
Logic + Business Fat Client-Thin Server
Logic
Web System Architecture or
Client/Server Architecture
⚫ Two Tier Architecture

Vaishali K.
 3-Tiered Systems

Database
Management

Business Logic
Presentation Logic
Client/Server Architecture
⚫ Three Tier Architecture

Vaishali K.
3 Tier Architecture
⚫ Advantage:
⚫ Changes in Business logic is possible
⚫ Scalable
⚫ No modification at client-side even if database
location or database is changed.
⚫ It is possible to change content of one tier
without having to make changes in other tier.
⚫ Parallel development of application is possible
⚫ High performance due to parallel processing.
3 Tier Architecture
⚫ Dis-Advantage:
⚫ More processing on the web server.
⚫ More Complex structure
⚫ Difficult to setup and maintain
N –Tier Architecture
•N-Tiered architecture: Various components that make up the application
are logically separated or distributed across network.
•Client 🡪🡪 Server 🡪🡪 Server 🡪🡪 Database
N –Tier Architecture
• Front end (Client):
• Viewed and manipulated by the users.
• It can live in a Web browser or a standalone application.
• Presents customized information to clients
requirements.
• Servlets and JSP is used as Front end development.
• Middle:
• Contains business logic Ex: Discounts.
• It may contain two sub-tiers:
• Web Tier – It handles communication to client.
• EJB Tier – It manages business logic and access to corporate
data.
• Backend (Database):
• Provides access to various corporate data stores
(Databases, E-Mail system…)
N-Tier Architecture
Advantage :
Reduced Complexity & Easy to Maintain
Interoperable
Flexibility
Scalable
Universal Resource Locator

Transfer protocol://
Servername.domain / Directories
/Subdirectories /Filename.filetpe.

Vaishali K.
Retrieving Data from the Web
⚫ Data can be retrieved using the address of
the file.
⚫ Address is called as URL (Uniform
Resource Locator)

Vaishali K.
Retrieving Data from the Web
⚫ Protocol Identifier: It lets the computer
know how to process the information it
receives.
⚫ Domain name/ IP address: address of the
computer (server) that is hosting the site
and storing the documents.
⚫ Path: directory/ file specification.

Vaishali K.
 How the Web Works?
⚫ User clicks on document link on the browser.
⚫ Browser reads the URL and recognizes
different parts of it.
⚫ The client contact the Web server (through an
appropriate port number) and requests the
file.
⚫ The server retrieves the file from its storage
device.

Vaishali K.
How the Web Works?
⚫ The server sends the results of the request
to web browser, usually in the form of a
HTML document.
⚫ The browser reads the HTML codes,
format the documents.

Vaishali K.
Web Browsers
⚫ Graphical Browsers –text, image, video,
audio
⚫ Text Browsers-text

⚫ Web Pages
⚫ Static
⚫ Dynamic
⚫ Active web pages- active-x control

Vaishali K.
Web Browsers
⚫ Internet Explorer
⚫ Firefoxt

Web Servers -
⚫ Apache (Public Domain)
⚫ MS Internet Information Services

Vaishali K.
Static Web pages

Vaishali K.
Dynamic web pages

Vaishali K.
HTTP
⚫ Hyper Text Transfer Protocol
⚫ Establishing a TCP/IP connection to
WWW server
⚫ Sending a request from the client to the
server
⚫ Returning a response from the server to
the client
⚫ Closing the connection

⚫ GET http://www.mysite.com/info.html HTTP/1.0

Vaishali K.
 Web Web
Browser Server

Request
GET/file/newdir/myimage
HTTP/1.1
Accept : image/gif
Accept : image/jpeg

HTTP/1.1 200 OK
Date : Mon, 19-12-12
15:58:20,GMT
Server : MyServer
Content – length :3010

…..Actual Data

Vaishali K.
Response
HTTP Request Method
• GET is used to request data from a specified resource.

• POST is used to send data to a server to create/update a

resource.

• PUT is used to send data to a server to create/update a

resource.

• HEAD is almost identical to GET, but without the

response body.

• DELETE method deletes the specified resource.

Vaishali K.
Hypertext transfer protocol secure
• Secure version of HTTP

• Primary protocol used to send data between a web

browser and a website

• Encrypted in order to increase security of data transfer

• Particularly important when users transmit sensitive

data, such as by logging into a bank account, email
service

Vaishali K.
Hypertext transfer protocol secure

Vaishali K.
Hypertext transfer protocol secure
• HTTPS uses an encryption protocol to encrypt communications.

• The protocol is called Transport Layer Security (TLS), although

formerly it was known as Secure Sockets Layer (SSL).

Vaishali K.
Hypertext transfer protocol secure
• Secure version of HTTP

• Primary protocol used to send data between a web

browser and a website

• Encrypted in order to increase security of data transfer

• Particularly important when users transmit sensitive

data, such as by logging into a bank account, email
service

Vaishali K.
Cookies
⚫ Internet cookies are small pieces of
information in text format that are
downloaded to your computer when you
visit many Web sites. The cookie may
come from the Web site itself or from the
providers of the advertising banners or
other graphics that make up a Web page

⚫ C:\Documents and
Settings\Administrator\Cookies
⚫ Internet explorer – tools—internet
option-settings –view files
Vaishali K.
 Cross Browser Compatibility
issue

Incorrect (or no) DOCTYPE

The so called Doctype should always be the very
first line in your html. It looks something like
this:
<!DOCTYPE html>
No CSS Reset
Did you know that every browser comes with a
different set of internal, basic CSS styles which
apply if the current website does not override
Vaishali K.
them?
Vendor Specific CSS Styles -
 Opacity:
-moz-opacity: 0.6;opacity: 0.6; So to make sure
your code works in
all browsers you’ll need to add the unprefixed
version alongside all prefixed one’s to make sure
it get’s picked up by all browsers. But how many
prefixes are there:
-ms for Microsoft (Internet Explorer)
-moz
Vaishalifor
K. Mozilla Foundation (Firefox)
Lack of Valid HTML / CSS
Avoid padding with widths
Margins / border inconsistencies
Image Rendering
Image border
Font size and style

Vaishali K.
W3C Validators
• The W3C validators are hosted on
server technology donated by HP, and
supported by community donations.
It help us to build better tools for a
better web.
• Premium service checks the entire
website and evaluates its conformance
with W3C open standards to identify
those
Vaishali K. portions of your website that
need your attention.
Web Site Design Issues
Planning a Web Site Objective and Goals
Audience
Organizing Content
Publishing a Web Site
Function of Web Server

Vaishali K.
 Objective and Goals

• Why is it important for you to have a

website?
• What are your objectives?
• How will you measure success?
• Whom do you envision as your core users?
• What do you want those users to gain by
visiting your website?
• What do you want users to do after or while
they're on your website?
How
•Vaishali K. does your idea for a website compare
Vaishali K.
Vaishali K.
Publishing of web site
Web space hosting Package
Web space Feature
Web space Traffic

Vaishali K.
Function of web servers
⚫ Hardware is computer on which web site is
hosted
⚫ Software is program that runs on server
machine

⚫ Apache HTTP server

⚫ Microsoft IIS
⚫ Ngnix
Lighttpd
⚫Vaishali K.
Vaishali K.