Comp1503 Introduction to E-Commerce Technology

standguideNetworking and Communications

Oct 26, 2013 (4 years and 18 days ago)

93 views

Comp 2513


E
-
Commerce Infrastructure 1

Daniel L. Silver, Ph.D.

2001

Daniel L. Silver

2

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

3

Outline


Following the business evolution on the web


The major architectural components of the
Internet


Intro to HTML


2001

Daniel L. Silver

4

Business Evolution on the Web

Publishing

Time or Maturity

Functionality

Interactivity

Transactions

Processes

Static web pages

Dynamic web pages

Web
-
enabled

applicatons

2001

Daniel L. Silver

5

What is an internet?


Communication between two or more
potentially heterogeneous networks (LANs)







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

2001

Daniel L. Silver

6

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

Server

Comm.

Protocol

2001

Daniel L. Silver

7

TCP/IP Protocol Architecture

Transmission Control Protocol

Internet Protocol

2001

Daniel L. Silver

8

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

9

Traditional Client
-
Server
Applications that use the Internet

Physical

Network

TCP

IP

Physical

Network

TCP

IP

Internet

Telnet Window

Telnet Server

FTP Client

FTP Server

eMail Client

eMail Server

SMTP/POP

FTP

Telnet Protocol

2001

Daniel L. Silver

10

Data Encapsulation under TCP/IP

2001

Daniel L. Silver

11

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

12

Major Architectural Components
of the Web

Internet

Browser

Database

Server

Client 1

Server A

Server B

Server C

URL

HTTP

TCP/IP

Browser

Client 2

HTTP

Server

App.

Server

index.html

2001

Daniel L. Silver

13

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


2001

Daniel L. Silver

14

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



For a more user friendly resource:





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


2001

Daniel L. Silver

15

HTTP

HyperText Transfer Protocol

Physical

Network

TCP

IP

Physical

Network

TCP

IP

Internet

Web Browser

HTTP Server

HTTP



The application protocol of the Web



Like FTP it is layered on top of TCP/IP

2001

Daniel L. Silver

16

HTTP

HyperText 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 connection


If HTTP 1.1, server can let client break connection

… Browser loads, interprets and displays page.

For further info on HTTP see
http://www.w3.org/Protocols/rfc2616/rfc2616.htm
l


Client

Server

Interne
t

2001

Daniel L. Silver

17

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

18

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

19

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

20

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


2001

Daniel L. Silver

21

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

2001

Daniel L. Silver

23

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

24

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

25

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

26

Basic Syntax of HTML


Comments


Background Color


Text Formatting


Lists


Images


Links to other documents


Tables


Frames

2001

Daniel L. Silver

27

HTML
-

Comments

General:

<!
--

comment
--

>

Examples:

<!
--

This is a comment
--

>

<!
--

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

>


2001

Daniel L. Silver

28

HTML
-

Colours

By Color Name


b
lack
,
red
,
white
,
yellow
,
olive
,
tan
,
blue
,
navy
,
green
,
magenta
,
brown
,
turquoise

By Pigment Mix




<BODY BGCOLOR= '#0000ff'>


#
rr
gg
bb



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

2001

Daniel L. Silver

29

HTML
-

Text Formatting


bold




<b> bold </b>


i
talics




<i> italics </i>


underlined



<u> underlined </u>


t
ypewriter



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



2001

Daniel L. Silver

30

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

31

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

32

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

33

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>


2001

Daniel L. Silver

34

HTML
-

Images


Various digital image formats can be
embedded with in HTML: .gif, .jpg


Example






See
www.bellsnwhistles.com

as source of
images and other objects.

<BODY>

<H1>My new baby girl.</H1>

<IMG SRC=“NicoleSilver.jpg”>

</BODY>


2001

Daniel L. Silver

35

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>


2001

Daniel L. Silver

36

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

37

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

THE END


danny.silver@acadiau.ca