390 likes | 504 Vues
This document outlines the architectural components critical to the infrastructure of E-Commerce. It explains the role of the Internet in enabling business processes, client-server models, and crucial protocols, notably TCP/IP. Additionally, it delves into HTML's significance as the markup language for web applications. Key topics include the evolution of web business processes, the intricacies of HTTP requests and responses, and the functionality of various servers including database and web servers. This content serves as a foundational guide for understanding E-Commerce architecture.
E N D
Comp 2513E-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 Daniel L. Silver
Outline • Following the business evolution on the web • The major architectural components of the Internet • Intro to HTML Daniel L. Silver
Business Evolution on the Web Processes Functionality Web-enabled applicatons Transactions Interactivity Dynamic web pages Publishing Static web pages Time or Maturity Daniel L. Silver
What is an internet? • Communication between two or more potentially heterogeneous networks (LANs) • The “Internet” is a set of standards for inter-network communications Daniel L. Silver
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 Daniel L. Silver
TCP/IP Protocol Architecture Transmission Control Protocol Internet Protocol Daniel L. Silver
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 Daniel L. Silver
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 Daniel L. Silver
Data Encapsulation under TCP/IP Daniel L. Silver
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 Daniel L. Silver
Major Architectural Components of the Web Client 1 Browser HTTP TCP/IP Server A HTTP Server App. Server Database Server Internet Client 2 Browser index.html URL Server B Server C Daniel L. Silver
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 Daniel L. Silver
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 Daniel L. Silver
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 Daniel L. Silver
HTTPHyperText Transfer Protocol Client 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/Protocols/rfc2616/rfc2616.html Internet Server Daniel L. Silver
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? Daniel L. Silver
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> Daniel L. Silver
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. Daniel L. Silver
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 Daniel L. Silver
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! Daniel L. Silver
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) Daniel L. Silver
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) Daniel L. Silver
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> Daniel L. Silver
Basic Syntax of HTML • Comments • Background Color • Text Formatting • Lists • Images • Links to other documents • Tables • Frames Daniel L. Silver
HTML - Comments General: <!-- comment -- > Examples: <!-- This is a comment -- > <!-- <title>My First Page</title> -- > Daniel L. Silver
HTML - Colours By 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 Daniel L. Silver
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> Daniel L. Silver
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 SansMS</font> Daniel L. Silver
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> Daniel L. Silver
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> Daniel L. Silver
HTML – Lists Example: <HTML><HEAD></HEAD> <BODY> Apples <UL> <LI>Red <LI>Green </UL> Mangoes <UL type=square> <LI>Green <LI>Yellow </UL> </BODY> </HTML> Ordered Lists: <OL> Unordered List: <UL> Daniel L. Silver
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> Daniel L. Silver
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
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> Daniel L. Silver
Resources • HTML Guides: www.cwru.edu/help/Help_www2.htmlhttp://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.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 Daniel L. Silver