Lec3

CPE5008 Lecture Three: 

CPE5008 Lecture Three Architectural Infrastructure of E-commerce

Learning Objectives: 

Learning Objectives Describing the fundamental infrastructure of E-Commerce: the Internet and the Web. Briefly review the systematic approach for building an E-commerce Website Explaining technologies available for both the client-side and server-side programming

Outline: 

Outline The Internet System analysis of website development Client side programming Server side programming

The Evolution of the Internet: 

The Evolution of the Internet History: The evolution of the Internet Innovation Institutionalization Commercialization 1961 - 1974 1975 - 1995 1995 - Now

The Evolution of the Internet: 

The Evolution of the Internet Innovation Phrase (1961-1974) Three fundamental building blocks for the Internet came into being: Packet-switching (1961 conceptualized, 1969, first packet switch) Client-Server computing (1973 Ethernet) TCP/IP (1974 Open Architecture) Other Significant Innovations APRANET(Advanced Research Projects Agency Network) project started (1966) E-mail 1972

The Evolution of the Internet: 

The Evolution of the Internet Institutionalization Phrase (1975-1995) Personal computer 1980 (Apple, IBM) In 1983, APRANET separated its military network from the civilian university part Telnet and FTP (1983) In 1986, NSFNet for interuniversity research HTML (Berners-Lee 1989) Mosaic Graphic Browser (1993) In 1995, The E-commerce I began.

The Evolution of the Internet: 

The Evolution of the Internet Commercialization Phrase (1995-Now) In 1995, Telcos and commercial carriers took over the backbone operation from NSF. E-commerce became the main economic inspiration for the development of the Internet In 1996, Internet2 Consortium formed In 1999, dotcoms reached its peak In 2000, dotcoms collapsed in stock market In 2001, E-commerce II began.

The Internet Technologies: 

The Internet Technologies Packet-switching Slicing digital messages into parcels called “packets”, sending the packets along different communication paths as they became available, and then reassembling the packets at the receiving side.

The Internet Technologies: 

The Internet Technologies TCP/IP What to do with packets on the Internet and how to handle them TCP is responsible for the error-free delivery of an entire message from a source computer to an addressed computer IP provides connectionless, best effort delivery routing of datagrams. Each IP datagram includes a source address, destination address, the raw data encapsulated for transmission and some error detection information

The Internet Technologies: 

The Internet Technologies Client/Server Computing Client PC Server Services Client program (browser) sends an HTTP request (GET command) asking for a web server file Server program (web server application program) sends an HTTP response message with the requested web page 2-Tier Client/Server Model

Protocols supporting the Internet: 

Protocols supporting the Internet HTTP: Request and Response SMTP(Simple Mail Transfer Protocol): used to send e-mail to a server POP(Post Office Protocol): used by the client to retrieve email from a server FTP(File Transfer Protocol): permit the user to transfer files from the server to their local computer, and vice versa. Telnet: (running remotely) a terminal emulation program allow you to attach yourself to a computer on the Internet that supports the Telnet protocol.

Internet Connection: 

Internet Connection Here we are talking internet connection for individual consumers. For businesses, there always have a variety of options with much higher speeds.

Intranets: 

Intranets Privately developed networks that operate within organizations Intranets operate as separate networks within the operations of the Internet Intranet

Extranets: 

Extranets Links businesses to their suppliers using Internet technology These networks are not always in the public domain One example is SITA supporting booking systems of most airline companies

Extranet & VPN: 

Extranet & VPN Intranet Extranet VPN Internet Firewall

What is the next on the Internet?: 

What is the next on the Internet? New trends of the Internet technology At the backbone: VHS routing (Gigabit Routers) VHS switching(ATM – Optical Switch) VHS transmission (Dense wavelength Division Multiplexing DWDM) For the last mile: Fiber To Home (wired) GSM - unlimited/144kbps 2.5G – (GPRS/CDMA) unlimited/384kbps 3G - unlimited/2Mbps Wi-Fi (802.11b) – 300ft/10Mbps Bluetooth – 30ft/720kbps

System Analysis for E-C site: 

System Analysis for E-C site Building a successful e-c site is a complex endeavor that requires a keen understanding of business, technology and systematic approaches.

System Development Life Cycle(SDLC): 

System Development Life Cycle (SDLC) System Analysis/Planning System Design System development (programming/coding) System Testing Deployment/ service delivery

System Analysis for E-C site: 

System Analysis for E-C site

Slide20: 

Client-Side Programming

Important factors on Client-side Web programming: 

Important factors on Client-side Web programming Major factors in client-side Web programming include: Downloading time Data validation (e.g. type checking) Usability of existing computer software measured by how easily and how effectively it can be used by a specific set of users, given particular kinds of support, to carry out a defined set of tasks, in a defined set of environments

Important factors on Client-side Web programming (cont.): 

Important factors on Client-side Web programming (cont.) Factors which make up a usable user interface: System feedback Consistency Error prevention Performance / efficiency User like / dislike Error recovery

Web page design and production: 

Web page design and production Major steps in Web page design and production: Define audiences and the information requirements Develop logical design of the Web site Develop the perceptual design Content creation Programming Posting and hosting the site

Index(Start) Page of a Site : 

Index(Start) Page of a Site Book Search Quick Search Advanced Search Book Category Account Maintenance Create Account Change Password Login Maintenance Login Logout Shopping Cart View Cart e-Payment

UI Design Process : 

UI Design Process

Overview of HTML: 

Overview of HTML Hypertext Markup Language (HTML) is a markup language for telling a Web browser how to format and display a Web page It is a subset of the Standard Generalized Markup Language (SGML) - a formal markup language for defining document format. HTML employs pre-defined tags to specify the format of a web page. For example, by putting the word “Italics” inside the <I></I> tag pairs (i.e., <I> Italics </I>), the word “Italics” will be displayed by the Web browser in Italics form.

HTML - Basic format: 

HTML - Basic format The basic structure of a HTML document is formed by the following tags: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”> <HTML> <HEAD> <TITLE>.... </TITLE> </HEAD> <BODY> ..... </BODY> </HTML>

Basic HTML tags and a simple example: 

Basic HTML tags and a simple example <html> <head> <title>A simple web page</title> </head> <body> <h1 align="center">First level heading</h1> <h2>Second level heading</h2> <p><font face="Courier" size="4">The font face is Courier and the font size is 15pt.</font></p> <p><font color="#FF0000">The font colour is red.</font></p> <p><em>The text is in italic form.</em></p> <p><u>The text is underlined.</u></p> <p><strong>The text is expressed in bold face.</strong></p> <p>This is^superscriptand this is_subscript.</p> <p><blink>This text is blinking.</blink></p> <hr> <p>This is a simple bullet list: <ul> <li>First item</li> <li>Second item</li> </ul> <p>This is a simple numbered list: <ol> <li>First item</li> <li>Second item</li> </ol> </body> </html> (PTO)

Snapshot of the example Web Page : 

Snapshot of the example Web Page

Links: 

Links Define by <A HREF …></A>, HREF gives the URL to be accessed The URL can be absolute or relative: <A HREF=http://www.vbs.com/Books/Art.html>Art</A> <A HREF=Science.html>Science</A> (at current directory) <A HREF=../Welcome.html></A> (go back one directory) <A HREF=/Welcome.html></A> (at the root) What are the differences? <A HREF=/directory/Welcome.html></A> <A HREF=directory/Welcome.html></A>

Images: 

Images There are two commonly used compressed image formats: GIF and JPEG GIF: Lossless compression Transparent Give 256 colors Support animation (animated GIF) Suitable for general-purpose images JPEG: Lossy compression Give “million of colors” Suitable for photos

Images (cont’d): 

Images (cont’d) Here is an example of the image tag using all the attributes: <IMG SRC = “VBS.gif” ALT=“logo” HEIGHT=“100” WIDTH=“100” ALIGN=“LEFT” BORDER=“1”> SRC: URL of the image ALT: image description during loading HEIGHT: height of the image WIDTH: width of the image BORDER: border size ALIGN: alignment method You can also create an image link, e.g., <A HREF=“VBS.html”><IMG SRC=“VBS.gif”></A>

ImageMap: 

ImageMap An image map is defined by using the <MAP></MAP> tag pair as follows. General format: <MAP NAME="map_ID"> <AREA SHAPE=”CIRCLE/RECT/POLY" COORDS="…" HREF="URL"> <AREA SHAPE=”CIRCLE/RECT/POLY" COORDS="…" HREF="URL"> … <AREA SHAPE=”CIRCLE/RECT/POLY" COORDS="…" HREF="URL"> </MAP>

ImageMap (cont.): 

ImageMap (cont.) The <AREA> tag is used to define the areas for the image map. As specified by the SHAPE attribute. Depending on the shape of the area, the boundary is specified by the respective coordinates as follows: Circle - SHAPE="CIRCLE" COORDS="x,y,r" where (x,y) defines the center and r is the radius of the circle. Rectangle: SHAPE="RECT" COORDS="xL,yL,xR,yR" where (xL,yL) and (xR,yR) define the top-left corner and bottom-right corner of the rectangle, respectively. Polygon: SHAPE="POLY" COORDS="x1,y1,x2,y2,…,xi,yi" where (x1,y1), (x2,y2), .., (xi,yi) specifies the n-th corners of the polygon. Usage: <IMG SRC="image_file" USEMAP="#map_ID”>

HTML Table: 

HTML Table The table tag is <TABLE ....> ... </TABLE> The row tag is <TR ...> ... </TR> The heading tag is <TH ...> ...</TH> The data cell tag is <TD ...>... </TD> Fig. 3.4 shows an example of a simple table incorporating the table tags and other common attributes.

Table Example: 

Table Example

What are HTML Frames?: 

What are HTML Frames? Frames enable the display of multiple web pages within a single browser window. The frameset tag is used to specify the frame layout: <FRAMESET> .... </FRAMESET> The common attributes are: ROWS=“r1”, “r2” .... “rm” (m rows) COLS=“c1”, “c2”.... “cp” (p columns) The sizes can be set in terms of pixels or a percentage.

More about frame size: 

More about frame size Browsers use * to allocate the available space. For example: <FRAMESET COLS=“*, *”> Set the two columns evenly <FRAMESET COLS=“*, 2*”) The width of the right frame is two times that of the left frame. What does <FRAMESET ROWS=“50,*,2*”> mean?

Specifying frame content: 

Specifying frame content The tag is: <FRAME ....> Common attributes are: SRC : URL of the source HTML page NAME : a name for identification purpose FRAMEBORDER : indicates whether a border is used MARGINWIDTH : left and right margins MARGINHEIGHT : top and bottom margins SCROLLING : indicates whether a scroll bar is used NORESIZE : do not allow users to change the frame size

A nested frame example : 

A nested frame example <HTML> <FRAMESET ROWS="20%,80%"> <FRAME NAME="BANNER_FRAME" SRC=BANNER.html> <FRAMESET COLS="30%,70%"> <FRAME NAME="INDEX_FRAME" SRC=INDEX.html> <FRAME NAME="CONTENT_FRAME" SRC=CONTENT.html> </FRAMESET> </FRAMESET> </HTML>

A nested frame example (Fig. 3.5) : 

A nested frame example (Fig. 3.5)

Implementing navigation (cont’d): 

Implementing navigation (cont’d) Use the target attributes to control navigation: “_self” display in the current frame “_blank” display in a new window “_top” eliminate all frames Define the default TARGET in the base tag of the document head e.g., <BASE TARGET=“main”>

Forms: 

Forms Forms are important to any E-commerce application New Customer Registration Customer Login Shopping Cart Payment Info Collection Marketing Survey

What are HTML Forms?: 

What are HTML Forms? Forms are generally used to obtain data from the client for submission to the server. Typically, a program in the server is invoked to process the data, possibly with the assistance of the backend system. The result (in most cases, an HTML file) will then be passed to the web client by using the HTTP.

HTML Forms - general format: 

HTML Forms - general format General format: <FORM ACTION=“Program URL” METHOD=“GET or POST”> Form input elements Regular HTML content </FORM> ACTION: URL of the program for processing the form data METHOD: methods for passing data to the server: GET: attach at the end of the URL POST: embed in the HTTP request message

Common HTML Form elements: 

Common HTML Form elements Common HTML Form elements include: Textbox <INPUT TYPE=“Text” …> Password textbox <INPUT TYPE=“PASSWORD” …> Checkbox <INPUT TYPE=“CHECKBOX” …> Radio button <INPUT TYPE=“RADIO” …> Submit button <INPUT TYPE=“SUBMIT” …> File input field <INPUT TYPE=“FILE” …> Hidden form field <INPUT TYPE=“HIDDEN” …> Textarea <TEXTAREA NAME=“…” …> Select menu <SELECT …> <OPTION> selection1</OPTION> <OPTION>selection2</OPTION> </SELECT>

Cascading Style Sheets (CSS): 

Cascading Style Sheets (CSS) In HTML 4.0, Cascading Style Sheet (CSS) is available to separate the style from the structure By using CSS, a single style sheet can be applied to several web pages requiring the same style There are three types of CSS, namely external style sheets; embedded style sheets; inline style sheets.

What is JavaScript?: 

What is JavaScript? JavaScript is a scripting language proposed by Netscape to enhance the functions of HTML It is often called an Object-oriented (OO) scripting language with syntax looking like Java It can be used to produce interactive and dynamic Web pages It is supported by most commonly-used browsers including MS. IE and Netscape’s Navigator. Unlike the server-side programs, a JavaScript code is included in an HTML document and executed on the client-side For details, refer to Netscape's site on JavaScript (http://developer.netscape.com/docs/manuals/index.html).

Basic structure of JavaScript: 

Basic structure of JavaScript A JavaScript code is embedded between the <SCRIPT> and </SCRIPT> tags as follows: <HTML> <HEAD> <TITLE>HTML file with JavaScript code</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--- Put the JavaScript code here. //--> </SCRIPT> </HEAD> <BODY> … </BODY> </HTML>

Sample JavaScript: Hello World: 

Sample JavaScript: Hello World A sample Javascript example: Hello World <HTML> <HEAD> <TITLE>JavaScript Hello World</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("<HR ALIGN='left' WIDTH=80%><BR>"); document.write("<H1>JavaScript : Hello World!!</H1><BR>"); document.write("<HR ALIGN='left' WIDTH=80%><BR>"); document.write("Current URL is: "); document.write(location.toString()); document.write("<BR>Current time is: "); document.write(Date()); //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Sample JavaScript : Hello World : 

Sample JavaScript : Hello World

Form Validation using JavaScript: 

Form Validation using JavaScript <Form action=“next.asp” method=“post” onSubmit=“return validation(this)”> <p>Name:<input type=“text” Name=“name” size=“20”></p> <p>Registered: <input type=“radio” Name=“register”> Not Registered: <input type=“radio” Name=“register”></p> <p>Email:<input type=“text” Name=“email” size=“32”></p> <input type=“Submit” Name=“submit” value=“Submit”> </Form>

Validation Requirements: 

Validation Requirements Users have to enter the Name; Users have to specify if they are registered or not. The E-mail address has to be something like: ***@****

JavaScript for Validation: 

JavaScript for Validation <SCRIPT LANGUAGE="JavaScript"> <!– function validation(thisForm) { if (thisForm.name.value==“”){ alert(“Please input your name!”); return false; } if(thisForm.register[0].status==false && thisForm.register[1].status==false){ alert(“Indicate your status!”); return false; } if(thisForm.email.value.indexOf(‘@’)==-1){ alert(“Please input a valid email address.”); return false; } return true; } //--> </SCRIPT>

Slide55: 

Server-Side Programming

Three-Tier Model: 

Three-Tier Model

Active Server Page (ASP): 

Active Server Page (ASP) ASP is a "scripting" technique that runs on Web servers rather than Web clients.This contrasts with VBScript and JavaScript which run on web clients. It basically generates dynamic HTML documents for the Web client. Execution of the ASP code by the server returns the corresponding HTML document to the client.

ASP Server-side Scripting Working Model: 

ASP Server-side Scripting Working Model

ASP Seven Object Model: 

ASP Seven Object Model  HTTP Request  HTTP Document Web Browser Web Server  HTTP Request  HTTP Document Application Object Session Object Request Object Response Object Server Object ASPError Object

Server Object: 

Server Object Provide a home to a miscellaneous ragbag of properties and methods that can be used by any Active Server Page. Examples Convert a virtual path to a physical path on the server. Server.MapPath(“.”) Create an instance of an Object component Server.CreateObject(“ADODB.Connection”) Server.CreateObject(“ADODB.Recordset”)

Application Object: 

Application Object Allow the developer to have some control over the application as a whole. Examples Perform some startup processing on starting or some cleaning on ending in global.asa <Script Language=“VBScript” Runat=“Server”> Sub Application_OnStart ‘…startup processing End Sub Sub Application_OnEnd ‘…cleaning processing End Sub </Script>

Session Object: 

Session Object Each client’s unique interactions with the application is called a Session. Examples Perform some startup processing on starting or some cleaning on ending in global.asa <Script Language=“VBScript” Runat=“Server”> Sub Session_OnStart ‘…startup processing End Sub Sub Session_OnEnd ‘…cleaning processing End Sub </Script> Store info that can be accessed throughout the session

Request and Response Object: 

Request and Response Object Request Object Collections QueryString (GET method) <Form action=“QS.asp” method=“GET”> First Name:<Input type=text name=firstName> <br> Last Name:<Input type=text name=lastName> <br> <Input type=“submit” value=“Login”> </Form> http://…/QS.asp?firstName=Yandong&lastName=Fan <% Dim strUserFirstName,strUserLastName strUserFirstName=Request.QueryString(“firstName”) strUserLastName=Request.QueryString(“lastName”) Response.Write strUserFirstName & ” “ & strUserLastName %>

Request and Response Object: 

Request and Response Object Request Object Collections Form (POST method) <Form action=“FORM.asp” method=“POST”> First Name:<Input type=text name=firstName> <br> Last Name:<Input type=text name=lastName> <br> <Input type=“submit” value=“Login”> </Form> <% Dim strUserFirstName,strUserLastName strUserFirstName=Request.Form(“firstName”) strUserLastName=Request.Form(“lastName”) Response.Write strUserFirstName & ” “ & strUserLastName %>

Slide65: 

Migrating to ASP.NET

ASP .NET Page Class: 

ASP .NET Page Class When a ASP.NET page (Web Form) is requested, the components that make up the page are complied into a class at the runtime. The .aspx file The .NET class file containing the Behind-code Any user controls used by the page The page class can then be instantiated any time a request is made by the client. In ASP, when an ASP page is executed, the server would simply start at the top and split scripts from HTML text. (a linear model)

ASP .NET Page Class (Cont’d): 

ASP .NET Page Class (Cont’d) ASP.NET is a even-driven model Server Round-trip Server controls. Post-backs on events of onClick and onChange Page ViewState Post-back is stateless, the server does not retain any info about the client request; The ViewState contains the state of all user controls through a hidden form field.

ASP.NET Server Controls: 

ASP.NET Server Controls HTML server control <a runat=“server” …> HtmlAnchor <button runat=“server” …> HtmlButton <input type=“submit” …> HtmlInputButton …… ASP.NET Web Form Control ASP.NET rich controls Calendar Control AdRotator Control

Slide69: 

Basic Web Controls

Slide70: 

Web Form User Name: Birth Date: Password: Repeat Password: Register

Creating the form in VS .NET: 

Creating the form in VS .NET On the File menu, point to New and Project Project types: Visual C# projects Project Templates: ASP .NET Web app Location: http://localhost:1900/RegisterForm Set the layout as GridLayout Add Input Controls Set the TextMode of two passwords to Password

Creating the form in VS .NET(Cont’d): 

Creating the form in VS .NET (Cont’d) Add labels in front of each text box. Adjust the font, color, and the layout as you want.

Form Validation: 

Form Validation RequiredFieldValidator Control <asp:TextBox runat=“server” ID=“txtName” /> <asp:RequiredFieldValidator runat=“server” ControlToValidator=“txtName” ErrorMessage=“Name is reuired” Display=“dynamic”>*</asp:ReuiredFieldValidator> RangeValidator Control <asp:TextBox runat=“server” ID=“DayOff” /> <asp:RangeValidator runat=“server” Display=“dynamic” ControlToValidate=“DayOff” MinimumValue=“08/05/05” MaximumValue=“20/07/05”>*</asp:RangeValidator> RegularExpressValidator Control <asp:TextBox runat=“server” ID=“Email” /> <asp:RegularExpressValidator runat=“server” Display=“dynamic” ControlToValidate=“Email” ValidationExpression=“\S+@\S+\.\S+” ErrorMessage=“E-mail is not in a valid format!”>* </asp:RegularExpressValidator>

Form Validation(Cont’d): 

Form Validation (Cont’d) CompareValidator Control <asp:TextBox runat=“server” ID=“age” /> <asp:CompareValidator runat=“server” ControlToValidator=“age” ValueToCompare=“18” ErrorMessage=“You must at least 18 years old” Type=“integer” Operator=“GreaterThanEqual” Display=“dynamic”>*</asp:ReuiredFieldValidator> ValidationSummary Control <asp:RangeValidator runat=“server” ID=“ValidationSum” ShowSummary=“true” ShowMessageBox=“true” DisplayMode=“BulletList” HeaderText=“<b>Summary of errors</b>” />

Slide75: 

How to do form validation in VS .NET using Validation Controls?

Slide76: 

Web Form User Name: Birth Date: Password: Repeat Password: Register * * *

RequiredField Validation for User Name input: 

RequiredField Validation for User Name input From the toolbox, drag a RequiredFieldValidator control next to the txtName. Select the control and set properties as followings: Set the font, color as you want Repeat the same procedure for other fields required input.

Password Compare Validation for User Name input: 

Password Compare Validation for User Name input From the toolbox, drag a CompareValidate control next to the txtPasswordRepeat. Select the control and set properties as followings: Set the font, color as you want

Slide79: 

How to retrieve the registration info after the user submits the form? private void btnRegister_Click(object sender, System.EventArgs e) { Session["name"]=txtName.Text; Session["birthdate"]=txtBirthDate.Text; Session["password"]=txtPassword.Text; Response.Redirect("formProcess.aspx"); } In the registration page:

Slide80: 

Feedback to the user In the formProcess.aspx page: private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here lblName.Text=(string)Session["name"]; lblDOB.Text=(string)Session["birthdate"]; } Of course the information is also available for storing in a database

Slide81: 

End of Lecture Three