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 E-Commerce

Outline

• Following the business evolution on the web• The major architectural components of the

Internet• Intro to HTML

Business Evolution on the Web

Publishing

Time or Maturity

Functionality Interactivity

Transactions

Processes

Static web pages

Dynamic web pages

Web-enabled applicatons

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 ServerComm.Protocol

Comm.Protocol

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

Physical

Network

TCP

IP

Physical

Network

TCP

IPInternetInternet

Telnet Window Telnet Server

FTP Client FTP Server

eMail Client eMail ServerSMTP/POP

FTP

Telnet Protocol

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

InternetInternet

Browser

DatabaseServer

Client 1

Server A

Server BServer C

URL

HTTPTCP/IP

Browser

Client 2 HTTPServer

App.Server

index.html

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

HTTPHyperText Transfer Protocol

Physical

Network

TCP

IP

Physical

Network

TCP

IPInternetInternet

Web Browser HTTP ServerHTTP

The application protocol of the WebThe application protocol of the Web Like FTP it is layered on top of Like FTP it is layered on top of TCP/IPTCP/IP

HTTPHyperText Transfer Protocol

There is a 3 step process per transaction:Browser accepts request from keyboard …1. (a) Client locates & sends an HTTP request for a webpage

(b) Client sends optional header info to server about client (browser configuration, acceptable files)(c) Client may send addition data (used by POST method)

2. (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

3. If HTTP 1.0, by default server breaks the connectionIf HTTP 1.1, server can let client break connection

… Browser loads, interprets and displays page.

Client

Server

Internet

Internet

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.0Accept: text/plainAccept: text/htmlUser-Agent: Mozilla/2.0<CR/LF>

HTTP Request/Response Example you can try …

> telnet eagle.acadiau.ca 8080Trying 131.162.201.7...Connected to eagle.acadiau.ca.Escape character is '^]'.

GET /danstech/index.jsp HTTP/1.0HTTP/1.1 200 OKContent-Type: text/htmlConnection: closeDate: Thu, 19 Sep 2002 12:40:54 GMTServer: 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• We’ll 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 - ColoursBy 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 <b> bold </b> • italics <i> italics </i> • underlined <u> underlined </u> • typewriter <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 TypesVerdana

<font size=+2 face="Verdana">Verdana</font>Arial

<font size=+2 face="Arial">Arial</font>Helvetica

<font size=+2 face="Helvetica">Helvetica</font>Impact

<font size=+2 face="Impact">Impact</font>Comic Sans MS

<font size=+2 face="Comic Sans MS">Comic Sans MS</font>

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

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

Example:<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 – LinksDisplay 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>