Comp 2513 ECommerce Infrastructure 1

1
Comp 2513E-Commerce Infrastructure 1

• Daniel L. Silver, Ph.D.

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

3
Outline

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

4
Business Evolution on the Web
Processes
Functionality
Web-enabled applicatons
Transactions
Interactivity
Dynamic web pages
Publishing
Static web pages
Time or Maturity
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

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

Comm. Protocol
Server
Client
7
TCP/IP Protocol Architecture
Transmission Control Protocol
Internet Protocol
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

9
Traditional Client-Server Applications that use
the Internet
Telnet Protocol
Telnet Window
Telnet Server
FTP
FTP Server
FTP Client
SMTP/POP
eMail Client
eMail Server
TCP
TCP
IP
IP
Internet
Network
Network
Physical
Physical
10
Data Encapsulation under TCP/IP
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

12
Major Architectural Components of the Web
Client 1
Browser
HTTP TCP/IP
Server A
Database Server
HTTP Server
App. Server
Internet
Client 2
Browser
index.html
URL
Server B
Server C
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

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.ht
  m

15
HTTPHyperText Transfer Protocol

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

HTTP
Web Browser
HTTP Server
TCP
TCP
IP
IP
Internet
Network
Network
Physical
Physical
16
HTTPHyperText Transfer Protocol

• There is a 3 step process per transaction
• Browser accepts request from keyboard
• (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)
• (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.
• For further info on HTTP see http//www.w3.org/Pr
  otocols/rfc2616/rfc2616.html

Client
Internet
Server
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
• ltprotocolgt//ltmachinegtltportgt/ltfilegt
• Default port 80
• Default file index.html
• Machine IP address. How does it get this?

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
• ltCR/LFgt

19
HTTP Request/Response Example you can try

• gt 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 124054 GMT
• Server Apache Tomcat/4.0.4 (HTTP/1.1 Connector)
• Set-Cookie JSESSIONIDECECB564E60E795E0B2E86D330D
  76649Path/danstech
• lthtmlgt
• ltheadgt
• lttitlegtDanny's Car Shoplt/titlegt
• lt/htmlgtConnection closed by foreign host.

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 ltdata typegt/ltsubtypegt
• text/html
• text/plain
• image/gif
• video/mpeg
• application/msword

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
• Well discuss this further next day!

22
HTML A Primer
23
HTML

• HyperText Markup Language
• language used to represent webpages
• Markers call tags are used to specify how
  elements of page should be displayed
• ltcentregtHello World!lt/centregt
• Fixed vocabulary of tags
• Describes the structure of a document not its
  specific layout (layout may change size of window
  and size of font)

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)

25
A Basic HTML Document
ltHTMLgt ltHEADgtltTITLEgtFirst Pagelt/TITLEgtlt/HEADgt ltBOD
Y BGCOLOR '0000ff'gt lt!-- ltBODY BGCOLOR
'ff0000'gt --gt ltFONT FACE"Arial, Helvetica"
COLOR'FFFFFF'gt ltCENTERgt I'm quite hyper -
even the language I speak is Hyper-Text-Markup-Lan
guage ltBgt - Viveklt/Bgt lt/CENTERgt
lt/FONTgt lt/BODYgt lt/HTMLgt
26
Basic Syntax of HTML

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

27
HTML - Comments

• General
• lt!-- comment -- gt
• Examples
• lt!-- This is a comment -- gt
• lt!-- lttitlegtMy First Pagelt/titlegt -- gt

28
HTML - Colours

• By Color Name
• black, red, white, yellow, olive, tan, blue,
  navy, green, magenta, brown, turquoise
• By Pigment Mix
• ltBODY BGCOLOR '0000ff'gt
• 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
• ltBODY BGCOLOR '00ff00'gt is very green
• ltBODY BGCOLOR '880088'gt is purple

29
HTML- Text Formatting

• bold ltbgt bold lt/bgt
• italics ltigt italics lt/igt
• underlined ltugt underlined lt/ugt
• typewriter ltttgt typewriter lt/ttgt .
• ltfont sizengt and lt/fontgtThis is going to be
  ltfont size 3gtBIGlt/fontgt
• ltfont colorred size -1gtCombining color and
  sizelt/fontgt

30
HTML - Fonts Types

• Verdanaltfont size2 face"Verdana"gtVerdanalt/font
  gt
• Arial
• ltfont size2 face"Arial"gtAriallt/fontgt
• Helveticaltfont size2 face"Helvetica"gtHelvetica
  lt/fontgt
• Impactltfont size2 face"Impact"gtImpactlt/fontgt
• Comic Sans MSltfont size2 face"Comic Sans
  MS"gtComic Sans MSlt/fontgt

31
HTML- Text Positioning

• Paragraph ltpgt and lt/pgtltpgtThis is a new
  paragraph.lt/pgt
• Line break ltbrgt
• We would prefer the following ltbrgt
• Centering ltcentergt and lt/centergt
• ltcentergtltbgtI am boldly centeredlt/bgtlt/centergt
• Verbatim ltpregt and lt/pregt
• ltpregt This will appear exactly as seen
• here without any .. Changes lt/pregt

32
HTML - Headings

• ltHTMLgt
• ltHEADgtltTITLEgtSize Tagslt/TITLEgtlt/HEADgt
• ltBODYgt
• ltFONT FACE"Arial, Helvetica"gt
• ltH1gt This is size H1 lt/H1gtltBRgt
• ltH2gt This is size H2 lt/H2gtltBRgt
• ltH3gt This is size H3 lt/H3gtltBRgt
• ltH4gt This is size H4 lt/H4gtltBRgt
• lt/FONTgt
• lt/BODYgt
• lt/HTMLgt

33
HTML Lists
Example ltHTMLgtltHEADgtlt/HEADgt ltBODYgt Apples
ltULgt ltLIgtRed ltLIgtGreen lt/ULgt Mangoes
ltUL typesquaregt ltLIgtGreen ltLIgtYellow
lt/ULgt lt/BODYgt lt/HTMLgt

• Ordered Lists ltOLgt
• Unordered List ltULgt

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.

ltBODYgt ltH1gtMy new baby girl.lt/H1gt ltIMG
SRCNicoleSilver.jpggt lt/BODYgt
35
HTML Links
Display in current browser window ltHTMLgtltHEADgtlt/H
EADgt ltBODYgt ltA HREF'First.html'gtLink to
First.htmllt/Agt lt/BODYgt lt/HTMLgt
Display in a new browser window ltHTMLgtltHEADgtlt/HEA
Dgt ltBODYgt ltA HREFFirst.html
targetanotherFramegt Link to
First.htmllt/Agt lt/BODYgt lt/HTMLgt
36
HTML- Tables
ltHTMLgt ltHEADgtlt/HEADgt ltBODYgt ltTABLE
BORDER'2'gt ltTHgtColumn 1lt/THgtltTHgtColumn
2lt/THgt ltTRgt ltTDgtCell 1lt/TDgtltTDgtCell
2lt/TDgt lt/TRgt ltTRgt ltTDgtCell
3lt/TDgtltTDgtCell 4lt/TDgt lt/TRgt lt/TABLEgt
lt/BODYgt lt/HTMLgt
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 guideshttp//htmlgoodies.earthweb.co
  m/ 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//ww
  w.infonegocio.com/xeron/bruno/italy.html

38
THE ENDdanny.silver_at_acadiau.ca