Transcript Comp1503 Introduction to E

Comp 2513
E-Commerce Infrastructure 1
Daniel L. Silver, Ph.D.
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
 References: Chapters 1 and 2 of Sharma

2001
Daniel L. Silver
2
Outline
Following the business evolution on the web
 The major architectural components of the
Internet
 Intro to HTML

2001
Daniel L. Silver
3
Business Evolution on the Web
Processes
Functionality
Transactions
Web-enabled
applicatons
Interactivity
Dynamic web pages
Publishing
Static web pages
Time or Maturity
2001
Daniel L. Silver
4
What is an internet?

Communication between two or more
potentially heterogeneous networks (LANs)

The “Internet” is a set of standards for internetwork communications
2001
Daniel L. Silver
5
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
2001
Comm.
Protocol
Daniel L. Silver
Server
6
TCP/IP Protocol Architecture
Transmission Control Protocol
Internet Protocol
2001
Daniel L. Silver
7
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
2001
Daniel L. Silver
8
Traditional Client-Server
Applications that use the Internet
Telnet Window
FTP Client
eMail Client
TCP
IP
Network
Telnet Protocol
FTP
SMTP/POP
Internet
Physical
2001
Telnet Server
FTP Server
eMail Server
TCP
IP
Network
Physical
Daniel L. Silver
9
Data Encapsulation under TCP/IP
2001
Daniel L. Silver
10
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
2001
Daniel L. Silver
11
Major Architectural Components
of the Web
Client 1
Browser
Client 2
HTTP
TCP/IP
Server A
Internet
HTTP
Server
Browser
App.
Server
Database
Server
URL index.html
Server B
Server C
2001
Daniel L. Silver
12
Components of the Web




2001
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
Daniel L. Silver
13
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

WC3 definitions
2001
For a more user friendly resource:
http://www.pierobon.org/iis/index.htm
Daniel L. Silver
14
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
HTTP
Internet
Physical
2001
HTTP Server
TCP
IP
Network
Physical
Daniel L. Silver
15
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 client
Interne
(browser configuration, acceptable files)
(c) Client may send addition data (used by POST method)
t
(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
Server
… Browser loads, interprets and displays page.
For further info on HTTP see http://www.w3.org/Protocols/rfc2616/rfc2616.html
2001
Daniel L. Silver
16
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. How does it get this?
2001
Daniel L. Silver
17
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>
2001
Daniel L. Silver
18
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.
2001
Daniel L. Silver
19
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>
–
–
–
–
–
2001
text/html
text/plain
image/gif
video/mpeg
application/msword
Daniel L. Silver
20
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!

2001
Daniel L. Silver
21
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)
2001
Daniel L. Silver
23
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)
2001
Daniel L. Silver
24
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>
2001
Daniel L. Silver
25
Basic Syntax of HTML
Comments
 Background Color
 Text Formatting
 Lists
 Images
 Links to other documents
 Tables
 Frames

2001
Daniel L. Silver
26
HTML - Comments
General:
<!-- comment -- >
Examples:
<!-- This is a comment -- >
<!-- <title>My First Page</title> -- >
2001
Daniel L. Silver
27
HTML - Colours
By Color Name

black, red, white, yellow, olive, tan, blue, navy, green,
magenta, brown, turquoise
By Pigment Mix
<BODY BGCOLOR= '#0000ff'>






2001
#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
Daniel L. Silver
28
HTML- Text Formatting

bold
italics
underlined
typewriter

<font size=n> and </font>



<b> bold </b>
<i> italics </i>
<u> underlined </u>
<tt> typewriter </tt> .
This is going to be <font size = +3>BIG</font>

<font color=red size = -1>Combining color and
size</font>
2001
Daniel L. Silver
29
HTML - Fonts Types
Verdana
<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>
2001
Daniel L. Silver
30
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>
2001
Daniel L. Silver
31
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>
2001
Daniel L. Silver
32
HTML – Lists
Example:
Ordered Lists: <OL>
Unordered List: <UL>
2001
<HTML><HEAD></HEAD>
<BODY>
Apples
<UL>
<LI>Red
<LI>Green
</UL>
Mangoes
<UL type=square>
<LI>Green
<LI>Yellow
</UL>
</BODY>
</HTML>
Daniel L. Silver
33
HTML - Images
Various digital image formats can be
embedded with in HTML: .gif, .jpg
 Example

<BODY>
<H1>My new baby girl.</H1>
<IMG SRC=“NicoleSilver.jpg”>
</BODY>

See www.bellsnwhistles.com as source of
images and other objects.
2001
Daniel L. Silver
34
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> Daniel L. Silver
2001
35
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>
2001
Daniel L. Silver
36
Resources

HTML Guides:
www.cwru.edu/help/Help_www2.html
http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

A great interactive tutorial.
http://www.davesite.com/webstation/html/

Other how-to guides
http://htmlgoodies.earthweb.com/ http://look.html.tucows.com/

PowerHTML is a freeware editor for HTML:
http://library.thinkquest.org/16728/msie/powerhtml.html

Fun: Europe vs. Italy (Flash technology)
http://www.infonegocio.com/xeron/bruno/italy.html
2001
Daniel L. Silver
37
THE END
[email protected]