Comp 2513 E-Commerce Infrastructure 1

Comp 2513Comp 2513

E-Commerce Infrastructure 1E-Commerce Infrastructure 1

Daniel L. Silver, Ph.D.Daniel L. Silver, Ph.D.

2001 Daniel L. Silver 2

ObjectivesObjectives

To describe the major architectural To describe the major architectural components of the Internet that form the components of the Internet that form the infrastructure for E-Commerceinfrastructure for E-Commerce

To discuss HTML – HyperText Markup To discuss HTML – HyperText Markup Language – the language of E-CommerceLanguage – the language of E-Commerce

References: Chapters 1 and 2 of SharmaReferences: Chapters 1 and 2 of Sharma


OutlineOutline

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

InternetInternet Intro to HTMLIntro to HTML


Business Evolution on the WebBusiness 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?What is an internet? Communication between two or more Communication between two or more

potentially heterogeneous networks (LANs)potentially heterogeneous networks (LANs)

The “Internet” is a set of standards for inter-The “Internet” is a set of standards for inter-network communicationsnetwork communications


The Client-Server ModelThe Client-Server Model Client – a machine that makes Internet requests for Client – a machine that makes Internet requests for

resources (printing, data, processing) resources (printing, data, processing) Server – a machine that performs tasks for clients Server – a machine that performs tasks for clients

on request and manages network resourceson request and manages network resources Communications protocol – a set of rules for two Communications protocol – a set of rules for two

or more entities to converseor more entities to converse

Client ServerComm.Protocol

Comm.Protocol


TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture

Transmission Control Protocol

Internet Protocol


TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture

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

Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)– Ensures the post card gets throughEnsures the post card gets through– Ensures the order of deliverEnsures the order of deliver– Handles errors and control flowHandles errors and control flow


Traditional Client-Server Traditional Client-Server Applications that use the InternetApplications 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 Data Encapsulation under TCP/IPTCP/IP


What is the Web?What is the Web?

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


Major Architectural Components Major Architectural Components of the Webof 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 WebComponents of the Web Website - a collection of files and associated Website - a collection of files and associated

software on a server (may run on client or server)software on a server (may run on client or server) Web Server – a software system that can field Web Server – a software system that can field

requests for website files (HTTP server) and requests for website files (HTTP server) and applications (Application Server)applications (Application Server)

Web Browser – a GUI client application (Netscape Web Browser – a GUI client application (Netscape Navigator, Internet Explorer) that facilitates access Navigator, Internet Explorer) that facilitates access to Website files and software for display of data, to Website files and software for display of data, video and audiovideo and audio

Database Server – provides an interface to a Database Server – provides an interface to a structure database for web applicationsstructure database for web applications


Components of the WebComponents of the Web

HTTP - HyperText Transfer ProtocolHTTP - HyperText Transfer Protocol URL - Universal Resource Locator for a file URL - Universal Resource Locator for a file

on the internet (www.acadiau.ca)on the internet (www.acadiau.ca) Webpage – a representation of information Webpage – a representation of information

understood by the browserunderstood by the browser HTML - HyperText Markup LanguageHTML - HyperText Markup Language

WC3 definitions WC3 definitions For a more user friendly resource:For a more user friendly resource:

http://www.pierobon.org/iis/index.htmhttp://www.pierobon.org/iis/index.htm


HTTPHTTPHyperText Transfer ProtocolHyperText 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


HTTPHTTPHyperText Transfer ProtocolHyperText Transfer Protocol

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

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

2.2. (a) Server responds with a status line (a) Server responds with a status line (eg. HTTP/1.1 200 OK) (eg. HTTP/1.1 200 OK) (b) Server sends header info to client about itself and requested (b) Server sends header info to client about itself and requested file file (server config., file format)(server config., file format)

(c) Server sends the requested data or optionally additional error (c) Server sends the requested data or optionally additional error informationinformation

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

… … Browser loads, interprets and displays page.Browser loads, interprets and displays page.For further info on HTTP see http://www.w3.org/Protocols/rfc2616/rfc2616.htmFor further info on HTTP see http://www.w3.org/Protocols/rfc2616/rfc2616.htmll

Client

Server

Internet

Internet


How is the Webpage Located?How is the Webpage Located?

URL – Universal Resource LocatorURL – Universal Resource Locator The address of an resource on the InternetThe address of an resource on the Internet

– http://www.acadiau.ca or http://eagle.acadiau.cahttp://www.acadiau.ca or http://eagle.acadiau.ca

– ftp://a.cs.uiuc.edu/ftp://a.cs.uiuc.edu/

– file://C:/Work/Acadia/1503.w01/index.htmlfile://C:/Work/Acadia/1503.w01/index.html

– <protocol>://<machine>:<port>/<file><protocol>://<machine>:<port>/<file>» Default port = 80Default port = 80

» Default file = index.htmlDefault file = index.html

– Machine = IP address. How does it get this?Machine = IP address. How does it get this?


What does an HTTP What does an HTTP Request/Response look like?Request/Response look like?

HTTP request headers:HTTP request headers: Request: GET, POST, PUT, DELETE, etcRequest: GET, POST, PUT, DELETE, etc Header - plain textHeader - plain text

– Info about the object (MIME etc)Info about the object (MIME etc)– Methods that can be processed by clientMethods that can be processed by client

Example of a Request Header:Example of a Request Header:GET GET /danstech/sample.html HTTP 1.0/danstech/sample.html HTTP 1.0

Accept: text/plainAccept: text/plainAccept: text/htmlAccept: text/htmlUser-Agent: Mozilla/2.0User-Agent: Mozilla/2.0<CR/LF><CR/LF>


HTTP Request/Response HTTP Request/Response Example you can try …Example you can try …

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

GET /danstech/index.jsp HTTP/1.0GET /danstech/index.jsp HTTP/1.0HTTP/1.1 200 OKHTTP/1.1 200 OKContent-Type: text/htmlContent-Type: text/htmlConnection: closeConnection: closeDate: Thu, 19 Sep 2002 12:40:54 GMTDate: Thu, 19 Sep 2002 12:40:54 GMTServer: Apache Tomcat/4.0.4 (HTTP/1.1 Connector)Server: Apache Tomcat/4.0.4 (HTTP/1.1 Connector)Set-Cookie: Set-Cookie:

JSESSIONID=ECECB564E60E795E0B2E86D330D76649;Path=/danstechJSESSIONID=ECECB564E60E795E0B2E86D330D76649;Path=/danstech<html><html><head><head><title>Danny's Car Shop</title> <title>Danny's Car Shop</title> ……</html>Connection closed by foreign host.</html>Connection closed by foreign host.


MIMEMIME HTTP uses a predefined set of document formats HTTP uses a predefined set of document formats

borrowed from eMail borrowed from eMail (actually, HTTP was modeled after (actually, HTTP was modeled after an eMail protocol)an eMail protocol)

MIME - Multipurpose Internet Mail ExtensionsMIME - Multipurpose Internet Mail Extensions Defines the content formatDefines the content format Content-type: <Content-type: <data type>/<subtype>data type>/<subtype>

– text/htmltext/html– text/plaintext/plain– image/gifimage/gif– video/mpegvideo/mpeg– application/mswordapplication/msword


A Web session is ConnectionlessA Web session is Connectionless TCP/IP is connection-orientedTCP/IP is connection-oriented But each HTTP request/response makes a But each HTTP request/response makes a

new connectionnew connection Potentially, each browser/server operation Potentially, each browser/server operation

is unaware of any related connectionsis unaware of any related connections Why do this? A sense of state is needed for Why do this? A sense of state is needed for

E-Commerce transaction processingE-Commerce transaction processing We’ll discuss this further next day!We’ll discuss this further next day!

HTML: A PrimerHTML: A Primer


HTMLHTML

HyperText Markup LanguageHyperText Markup Language – language used to represent webpageslanguage used to represent webpages

Markers call “tags” are used to specify how Markers call “tags” are used to specify how elements of page should be displayedelements of page should be displayed– <centre>Hello World!</centre><centre>Hello World!</centre>

Fixed vocabulary of tagsFixed vocabulary of tags Describes the structure of a document not Describes the structure of a document not

its specific layout its specific layout (layout may change size of (layout may change size of window and size of font)window and size of font)


HTMLHTML

HTML files end with either .html or .htmHTML files end with either .html or .htm Can be created byCan be created by

– A text editor (Wordpad, Notepad, vi)A text editor (Wordpad, Notepad, vi)– A Webpage editor (Netscape Composer)A Webpage editor (Netscape Composer)– A translation from another document format A translation from another document format

(MS Word to HTML)(MS Word to HTML)


A Basic HTML DocumentA Basic HTML Document

<HTML>

<HEAD><TITLE>First Page</TITLE></HEAD>

<BODY BGCOLOR= '#0000ff'>



<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 HTMLBasic Syntax of HTML

CommentsComments Background Color Background Color Text Formatting Text Formatting ListsLists ImagesImages Links to other documentsLinks to other documents TablesTables FramesFrames


HTML - CommentsHTML - Comments

General:General:

<!-- comment -- ><!-- comment -- >

Examples:Examples:

<!-- This is a comment -- ><!-- This is a comment -- >

<!-- <title>My First Page</title> -- ><!-- <title>My First Page</title> -- >


HTML - ColoursHTML - ColoursBy Color NameBy Color Name bblacklack, , redred, , whitewhite, , yellowyellow, , oliveolive, , tantan, , blueblue, , navynavy, , greengreen, ,

magentamagenta, , brownbrown, , turquoise turquoise

By Pigment MixBy Pigment Mix

<BODY BGCOLOR= '#0000ff'> ##rrrrggggbbbb rr,rr, is the amount of red in the colour is the amount of red in the colour (00 is (00 is

none and FF is a lot) none and FF is a lot) gggg is the amount of green is the amount of green bbbb is the amount of blue is the amount of blue <BODY BGCOLOR= '#00ff00'> is very is very greengreen <BODY BGCOLOR= '#880088'> is is purplepurple


HTML- Text FormattingHTML- Text Formatting boldbold <b> bold </b> <b> bold </b> iitalicstalics <i> italics </i> <i> italics </i> underlinedunderlined <u> underlined </u> <u> underlined </u> ttypewriterypewriter <tt> typewriter </tt> .<tt> typewriter </tt> .

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

<font color=red size = -1>Combining color and <font color=red size = -1>Combining color and size</font>size</font>


HTML - FontsHTML - Fonts Types Types

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

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

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

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

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


HTML- Text PositioningHTML- Text Positioning

Paragraph: Paragraph: <p> and </p><p> and </p><p>This is a new paragraph.</p><p>This is a new paragraph.</p>

Line break: Line break: <br><br>

We would prefer the following: <br>We would prefer the following: <br> Centering:Centering: <center> and </center><center> and </center>

<center><b>I am boldly centered</b></center><center><b>I am boldly centered</b></center> VerbatimVerbatim: : <pre> and </pre><pre> and </pre>

<pre> This will appear exactly as seen <pre> This will appear exactly as seen here without any …… ….. Changes </pre>here without any …… ….. Changes </pre>


HTML - HeadingsHTML - Headings

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


HTML – ListsHTML – Lists

Ordered Lists: <OL>Ordered Lists: <OL>

Unordered List: <UL>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 - ImagesHTML - Images Various digital image formats can be embedded with in HTML: .gif, .jpgVarious digital image formats can be embedded with in HTML: .gif, .jpg ExampleExample

See www.bellsnwhistles.com as source of images and other objects.See www.bellsnwhistles.com as source of images and other objects.

<BODY><H1>My new baby girl.</H1><IMG SRC=“NicoleSilver.jpg”></BODY>


HTML – LinksHTML – 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- TablesHTML- 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>


ResourcesResources HTML Guides: HTML Guides:

www.cwru.edu/help/Help_www2.htmlwww.cwru.edu/help/Help_www2.html http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

A great interactive tutorial.A great interactive tutorial.http://www.davesite.com/webstation/html/ http://www.davesite.com/webstation/html/

Other how-to guidesOther how-to guideshttp://htmlgoodies.earthweb.com/ http://look.html.tucows.com/ http://htmlgoodies.earthweb.com/ http://look.html.tucows.com/

PowerHTML is a freeware editor for HTML:PowerHTML is a freeware editor for HTML:http://library.thinkquest.org/16728/msie/powerhtml.htmlhttp://library.thinkquest.org/16728/msie/powerhtml.html

Fun: Europe vs. Italy (Flash technology)Fun: Europe vs. Italy (Flash technology)http://www.infonegocio.com/xeron/bruno/italy.htmlhttp://www.infonegocio.com/xeron/bruno/italy.html

THE ENDTHE END

[email protected]@acadiau.ca

Documents

Comp 2513 E-Commerce Infrastructure 1