E-Commerce Infrastructure

Objectives
To describe the major architectural
components of the Internet that form
the infrastructure for E-Commerce
To discuss HTML Hypertext Markup
Language the language of ECommerce

Outline
Following the business evolution on
the web
The major architectural components
of the Internet
Intro to HTML

Business Evolution on the

Web
Processes

Functionality

Transactions

Web-enabled
applicatons

Interactivity
Dynamic web pages

Publishing
Static web pages
Time or Maturity

What is an internet?
Communication between two or more
potentially heterogeneous networks
(LANs)

The Internet is a set of standards for

inter-network communications

The Client-Server Model

Client a machine that makes Internet requests
for resources (printing, data, processing)
Server a machine that performs tasks for
clients on request and manages network
resources
Communications protocol a set of rules for
two or more entities to converse

Client

Comm.
Comm.
Protocol
Protocol

Server

TCP/IP Protocol Architecture

Transmission Control Protocol

Internet Protocol

TCP/IP Protocol Architecture

Internet Protocol (IP) like a postcard
that contains:
Destination address (131.162.201.7)
Return address
Block of data (content)

Transmission Control Protocol (TCP)

Ensures the post card gets through
Ensures the order of deliver
Handles errors and control flow

Traditional Client-Server
Applications that use the
Internet
Telnet Window
FTP Client
eMail Client
TCP
IP
Network
Physical

Telnet Protocol
FTP
SMTP/POP

Internet
Internet

Telnet Server
FTP Server
eMail Server
TCP
IP
Network
Physical

Data Encapsulation under

TCP/IP

What is the Web?

A class of applications that use the
Internet plus a lot of new
technologies and standards that
facilitate access to resources
managed by servers connected to the
Internet:
Hardware: Servers
Software: Browsers, Servers
Protocols: HTTP, HTML, MIME

Major Architectural
Components of the Web
Client 1
Browser
Client 2

HTTP
TCP/IP
Internet
Internet

Browser

Server A
HTTP
Server

App.
Server

URL index.html
Server B
Server C

Database
Server

Components of the Web

Website - a collection of files and associated
software on a server (may run on client or
server)
Web Server a software system that can
field requests for website files (HTTP server)
and applications (Application Server)
Web Browser a GUI client application
(Netscape Navigator, Internet Explorer) that
facilitates access to Website files and
software for display of data, video and audio
Database Server provides an interface to a
structure database for web applications

Components of the Web

HTTP - HyperText Transfer Protocol
URL - Universal Resource Locator for
a file on the internet
(www.acadiau.ca)
Webpage a representation of
information understood by the
browser
HTML - HyperText Markup Language

HTTP
HyperText Transfer Protocol
The application protocol of the Web
Like FTP it is layered on top of TCP/IP

Web Browser
TCP
IP
Network
Physical

HTTP

Internet
Internet

HTTP Server
TCP
IP
Network
Physical

HTTP
HyperText Transfer Protocol
There is a 3 step process per transaction:
Browser accepts request from keyboard
1.

2.

3.

Client

(a) Client locates & sends an HTTP request for a

webpage
(b) Client sends optional header info to server about Interne
Interne
client (browser configuration, acceptable files)
(c) Client may send addition data (used by POST method)tt
(a) Server responds with a status line (eg. HTTP/1.1 200
OK)

(b) Server sends header info to client about itself and

requested file (server config., file format)
(c) Server sends the requested data or optionally
additional error information
If HTTP 1.0, by default server breaks the connection
If HTTP 1.1, server can let client break connection

Browser loads, interprets and displays page.

Server

How is the Webpage

Located?
URL Universal Resource Locator
The address of an resource on the
Internet
http://www.acadiau.ca or http://eagle.acadiau.ca
ftp://a.cs.uiuc.edu/
file://C:/Work/Acadia/1503.w01/index.html

<protocol>://<machine>:<port>/<file>
Default port = 80
Default file = index.html

Machine = IP address.

What does an HTTP

Request/Response look like?
HTTP request headers:
Request: GET, POST, PUT, DELETE, etc
Header - plain text
Info about the object (MIME etc)
Methods that can be processed by client

Example of a Request Header:

GET /danstech/sample.html HTTP 1.0
Accept: text/plain
Accept: text/html
User-Agent: Mozilla/2.0
<CR/LF>

HTTP Request/Response
Example you can try
> telnet eagle.acadiau.ca 8080
Trying 131.162.201.7...
Connected to eagle.acadiau.ca.
Escape character is '^]'.

GET /danstech/index.jsp HTTP/1.0

HTTP/1.1 200 OK
Content-Type: text/html
Connection: close
Date: Thu, 19 Sep 2002 12:40:54 GMT
Server: Apache Tomcat/4.0.4 (HTTP/1.1 Connector)
Set-Cookie:
JSESSIONID=ECECB564E60E795E0B2E86D330D76649;Path=/danstech
<html>
<head>
<title>Danny's Car Shop</title>

</html>Connection closed by foreign host.

MIME
HTTP uses a predefined set of document
formats borrowed from eMail (actually, HTTP
was modeled after an eMail protocol)

MIME - Multipurpose Internet Mail

Extensions
Defines the content format
Content-type: <data type>/<subtype>

text/html
text/plain
image/gif
video/mpeg
application/msword

A Web session is
Connectionless

TCP/IP is connection-oriented
But each HTTP request/response makes
a new connection
Potentially, each browser/server
operation is unaware of any related
connections
Why do this? A sense of state is needed
for E-Commerce transaction processing
Well discuss this further next day!

HTML: A Primer

HTML
HyperText Markup Language
language used to represent webpages

Markers call tags are used to specify

how elements of page should be
displayed
<centre>Hello World!</centre>

Fixed vocabulary of tags

Describes the structure of a document
not its specific layout (layout may change
size of window and size of font)

HTML
HTML files end with either .html or
.htm
Can be created by
A text editor (Wordpad, Notepad, vi)
A Webpage editor (Netscape Composer)
A translation from another document
format (MS Word to HTML)

A Basic HTML Document

<HTML>
<HEAD><TITLE>First Page</TITLE></HEAD>
<BODY BGCOLOR= '#0000ff'>
<!-- <BODY BGCOLOR= '#ff0000'> -->
<FONT FACE="Arial, Helvetica" COLOR='#FFFFFF'>
<CENTER>
I'm quite hyper - even the language I
speak is Hyper-Text-Markup-Language <B> - Vivek</B>
</CENTER>
</FONT>
</BODY>
</HTML>

Basic Syntax of HTML

Comments
Background Color
Text Formatting
Lists
Images
Links to other documents
Tables
Frames

HTML - Comments
General:
<!-- comment -- >
Examples:
<!-- This is a comment -- >
<!-- <title>My First Page</title> -- >

HTML - Colours
By Color Name

black, red, white, yellow, olive, tan, blue,

navy, green, magenta, brown, turquoise

By Pigment Mix

<BODY BGCOLOR= '#0000ff'>

#rrggbb
rr, is the amount of red in the colour (00 is
none and FF is a lot)
gg is the amount of green
bb is the amount of blue
<BODY BGCOLOR= '#00ff00'> is very green
<BODY BGCOLOR= '#880088'> is purple

HTML- Text Formatting

bold
italics
underlined
typewriter

<b> bold </b>

<i> italics </i>
<u> underlined </u>
<tt> typewriter </tt> .

<font size=n> and </font>

This is going to be <font size = +3>BIG</font>

<font color=red size = -1>Combining

color and size</font>

HTML - Fonts Types

Verdana
<font size=+2
Arial
<font size=+2
Helvetica
<font size=+2
Impact
<font size=+2
Comic Sans MS
<font size=+2
MS</font>

face="Verdana">Verdana</font>
face="Arial">Arial</font>
face="Helvetica">Helvetica</font>
face="Impact">Impact</font>
face="Comic Sans MS">Comic Sans

HTML- Text Positioning

Paragraph: <p> and </p>

<p>This is a new paragraph.</p>

Line break:
<br>
We would prefer the following: <br>
Centering: <center> and </center>
<center><b>I am boldly
centered</b></center>
Verbatim: <pre> and </pre>
<pre> This will appear exactly as
seen
here without any .. Changes </pre>

HTML - Headings
<HTML>
<HEAD><TITLE>Size Tags</TITLE></HEAD>
<BODY>
<FONT FACE="Arial, Helvetica">
<H1> This is size H1 </H1><BR>
<H2> This is size H2 </H2><BR>
<H3> This is size H3 </H3><BR>
<H4> This is size H4 </H4><BR>
</FONT>
</BODY>
</HTML>

HTML Lists
Example:

Ordered Lists:
<OL>
Unordered List:
<UL>

<HTML><HEAD></HEAD>
<BODY>
Apples
<UL>
<LI>Red
<LI>Green
</UL>
Mangoes
<UL type=square>
<LI>Green
<LI>Yellow
</UL>
</BODY>
</HTML>

HTML - Images
Various digital image formats can
be embedded with in HTML: .gif,
.jpg
<BODY>
<H1>My new baby girl.</H1>
<IMG SRC=NicoleSilver.jpg>
</BODY>

HTML Links
Display in current browser window:
<HTML><HEAD></HEAD>
<BODY>
<A HREF='First.html'>Link to First.html</A>
</BODY>
</HTML>
Display in a new browser window:
<HTML><HEAD></HEAD>
<BODY>
<A HREF=First.html
target=anotherFrame>
Link to First.html</A>
</BODY>
</HTML>

HTML- Tables
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE BORDER='2'>
<TH>Column 1</TH><TH>Column 2</TH>
<TR>
<TD>Cell 1</TD><TD>Cell 2</TD>
</TR>
<TR>
<TD>Cell 3</TD><TD>Cell 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>