Behind the scenes in Ecommerce

1
Behind the scenes in E-commerce
2
Using the Web for Commerce

• To purchase a good or service over the Web
  requires
• client (browser) software on the users PC
• server software on the Web server handles
  processing
• credit card is debited for amount of sale
• goods ordered from wholesaler or picked from
  warehouse
• merchant sends goods to customer

3
Example of processing a transaction
Credit card charged for purchase
Processing at fareastfoods.com
Order sent over Internet
Food shipped to customer
Food order generated
Food wholesaler ships food items
4
Client/Server Model

• The Web is a client/server model with browser as
  client software and various types of server
  software
• Server software can include Web server software,
  database server software, and application server
  software
• The same computer can be running two or more
  types of server software

5
Client and server-side Processing

• Processing can occur on both the client and the
  server
• Client-side processing occurs on the browser and
  can be used to validate input or perform
  calculations on input it cannot be used to
  access a database.
• Client-side processing is handled by Javascript
  or VBScript
• Server-side processing runs on server and can
  involve database access

6
Client/Server Model for Electronic Commerce
7
The purchase process

• 1. Using browser, buyer sends URL to server
• 2. Server sends a Web page back to browser
• 3. User fills in Web page with data using browser
  and sends back to the server
• 4. Server software processes the data. This may
  involve database access
• 5. Server sends back more HTML with the results
  of the processing
• This process may be repeated as necessary. This
  process is shown on the next slides

8
Processing Purchase Order
Server running server software
PC client running browser
1. Browser sends URL
9
Processing Purchase Order
Server running server software
PC client running browser
1. Browser sends URL
2. Server returns Web page
10
Processing Purchase Order
Server running server software
PC client running browser
1. Browser sends URL
2. Server returns Web page
3. Browser sends data
11
Processing Purchase Order
Server running server software
PC client running browser
1. Browser sends URL
2. Server returns Web page
3. Browser sends data
4. Browser processes data
Database access
12
Processing Purchase Order
Server running server software
PC client running browser
1. Browser sends URL
2. Server returns Web page
3. Browser sends data
4. Server processes data 5. Result returned to
browser
Database access
13
Server Technologies

• HTML is the primary method of communicating
  between browser and Web server
• In addition to HTML, other server software
  includes
• Active Server Pages (ASP)
• Personal Home Pages (PHP)
• Common Gateway Interface (CGI)
• Both ASP and PHP are scripting languages while
  CGI allows a program to run. Perl is often used
  to write CGI scripts

14
Accessing a database

• Regardless of the technology, it is usually
  necessary to access a database to
• Query for availability or price
• Update the inventory level
• Add new records or delete existing records
• In any case, the server software must create SQL
  statements and pass them to the database software

15
Java

• Object oriented language like C
• Portable network programs
• Program is compiled into Java bytecode that can
  run on any server or client in a network that has
  a Java virtual machine
• The Java virtual machine converts the bytecode
  into instructions that will run on the real
  computer hardware.
• Create applets with it which are sent to browser
  for execution

16
JavaScript and VBScript

• Javascript is Netscapes interpreted programming
  language
• VBScript is Microsofts version
• Both are easier and faster to code than Java but
  not as powerful
• Good for editing forms and running in Active
  Server Pages
• Can be embedded in HTML pages and interpreted by
  the Web browser

17
Introduction to Web Development
18
Types of Systems Development

• Mainframe
• All processing is on single host which is
  accessed through terminals
• development was originally offline and then
  through dumb terminals
• PCs
• Distributed processing using multiple independent
  machines
• Often connected over LAN to share data,
  information, and software
• Development emphasized ease of use and GUI

19
Types of Systems Development (Continued)

• Client/Server
• Processing is shared between client and server
  computers
• Systems development more complicated because
  developer must consider both client and server
• Development for Web is easier because standard
  client (browser) is used (some differences
  between Netscape and Explorer)
• Must develop server software to handle requests
  from browser and return appropriate response

20
Client and Server Side Development

• Client side development creates system that runs
  on browser
• Interfaces with user to check data input and make
  calculations
• Cannot access database on server
• Server side development creates system that runs
  on server
• Returns specific information to client as Web
  page
• Can access database to generate Web page

21
Javascript vs VBScript

• JavaScript and VBScript are programming languages
  integrated into HTML that work with HTML
• In general, Java and JavaScript have very little
  to do with one-another! The name JavaScript was a
  marketing ploy by Netscape and Sun.
• VBScript was Microsofts answer to Javascript and
  is based on the popular Visual Basic language
• Either Javascript or VBScript can be used for
  client or server side scripting
• VBScript does not work on Netscape but Javascript
  will work on Explorer
• We will use VBScript in this course--Javascript
  is very similar

22
Interaction Between Browser and Server

• User sends request for Web page using URL. May
  send along data in a form.
• Server receives request. At the least, it sends
  HTML page matching the URL. It may also act on
  the data to send more information or carry out
  transaction.
• Browser interprets the HTML page HTML is a
  formatting language that uses tags to instruct
  the browser how to display text or graphics
• Web is stateless protocol there is no
  continuous interaction between client and server
  like with FTP

23
Applications of Client Side Script

• Web page responds to or reacts directly with user
  interaction through HTML Form elements, eg, input
  fields, text areas, buttons, radio buttons, etc.
• Distributing a small amount of database
  information directly from the Web page
• You need to control the Web page appearance based
  on user selections
• You want to preprocess data before submission to
  the server.

24
Client Side Script cant ...

• Set or retrieve browser preferences
• launch an application on client computer
• read or write files on client computer
• Extract text content from HTML page
• Do much of anything on server computer

25
Server Side Script

• You can enhance client/server interaction using
  Perl script to access the CGI (Common Gateway
  Interface) but programming for CGI is difficult
  to do
• Instead we will use Active Server Pages (pages
  with .asp extension)
• ASP pages interpret requests and data from
  browser and return appropriate Web pages
• ASP are text files and can be written in either
  Javascript or VBScript
• When you look at the source for the page
  generated by an ASP page, you dont see the
  underlying script code--just the resulting HTML

26
Using PWS

• Personal Web Server is MS software that can
  downloaded for free and used to test your HTML
  and ASP pages
• It creates a folder called Inetpub with a sub
  folder called wwwroot all HTML and ASP pages
  should be stored in sub folders under wwwroot
• Go to Windows Explorer and create a folder under
  wwwroot using your name as the folder name
• Go to Notepad and create a text file as shown on
  the next page

27

• My Default Web page
• My default Web page
• Your Name goes here/center
• 
  My E-mail address
• 
  
• Links to ASP Pages

28
Using PWS (Cont.)

• Save this file as default.asp in the folder you
  created under wwwroot(be sure and enter file name
  in quotation marks to avoid saving it as a .txt
  file.)
• Open Internet Explorer and enter a URL of
  http//localhost/yourfoldername
• You should now see the Web page you just created.

29
Working with Active Server Pages
30
Active Server Pages

• An Active Server Page is text document sitting on
  the server with an asp extension
• It may contain html but usually also contains
  VBScript that generates or selects html pages
  that are sent to the browser
• The instructions in the asp page must be
  interpreted by the Web server software to create
  the page that is sent to the browser
• Viewing the page from the browser will only show
  the resulting html--no script is shown

31
Creating an ASP with VBScript

• Go into Notepad and enter the text shown on the
  next page
• Save the text file as Welcome.asp into your
  folder

32
Hell
o and Welcome Dim ftsize, ftcolor for ftsize 1 to 7 size Hello and Welcome!
It is )) ,. The time is now ,

33
Linking to the ASP Page

• Retrieve default.asp into Notepad and add the
  following line prior to the existing last line
  and resave it
• Welcome ASP Page
• Enter the same URL in IE as before (or refresh
  the page in IE) and click on the link to
  welcome.asp
• You should see output similar to that on the next
  page

34
(No Transcript)
35
ASP Pages (cont.)

• If you use ViewSource with the output, you
  should see only the corresponding HTML
• The ASP page, welcome.asp, has generated the html
  and thats what you are seeing
• The ASP code is shown again on the next page, but
  with comments to help you understand it
• Note that ALL VBScript is surrounded by
  to let server know this is script that needs to
  be executed
• Compare this to resulting html source you saw
  earlier

36
Let the server know you
are using VBScript Hello and
Welcome ftsize, ftcolor Declare variables ftsize and
ftcolor for ftsize 1 to 7 Repeat a loop
with ftsize going from 1 to 7 Set the html tag equal
to values 1 to 7 Hello and Welcome!
Font
size applies to this text Go on to next
value of ftsize It is weekdayname(weekday(date)) ,.
Determine day of week The time is now , Determine time

37
Server Side Programming
38
Introduction to Server Side Programming

• With Server Side Programming
• 1. Browser sends URL to server
• 2. Server sends the Web page back to browser
• 3. User fills in Web page with data using browser
  and sends to ASP page on the server
• 4. ASP page processes the data and sends back
  more HTML with the results of the processing
• This process is shown on the next slide

39
Server Side Processing
1. Browser sends URL
2. Server sends Web page
3. Browser sends data
4. Server returns results
PC client running browser
Server running Web software and ASP
40
Sending Data to Server

• The Input Form objects (textboxes, radio buttons,
  and so on) are used to send data to server when
  Submit button clicked
• The names of the objects are critical because
  they are link between Web page form and ASP page
• On the ASP page that is the object of the Action
  parameter in the Form tag, the Request object
  links the Web page object names to VBScript
  variables, eg, for txtName, the statement might
  be
• Name Request(txtName)
• In this case, the variable Name is set equal to
  whatever was entered in the txtName textbox on
  the Web page

41
Processing Input Data

• Once the data has been transferred from the
  textboxes or other input objects on the Web page
  to variables on the ASP page, processing can
  begin.
• Processing is handled by VBScript
• The Response.write() VBScript object can be used
  to write the results back to the browser without
  having to intermingle HTML and VBScript
• For example,
• Response.Write(The name is Name )
• will echo then name back to the browser in
  boldface.

42
Processing Orders

• Assume we want to process an order for Waters
  End Clothing. The order will consist of the name
  of the Item and the number ordered.
• The input will be from a simple HTML page like
  that shown on the next page in design and source
  code forms.
• Note the input object names--txtItem and txt
  Quantity and the ASP page being
  referenced--OrderAmt.Asp.

43
HTML Order Form
Order Form in Design Mode
Order form in Source Mode
44
Using ASP to Process Order Data

• To process the order data from the Web page
  created earlier, we need to create the
  OrderAmt.asp file
• This can be done using VID through FileNew
  FileASP Page
• The options are the same as with an HTML page
  except that Quick View does not work
• We will be primarily working in Source mode to
  create the ASP page.

45
Using ASP to Process Order Data (Cont.)

• Assume that the price must be determined using
  the item name and then multiplied by the quantity
  to find the sales amount.
• The shipping charge is then computed as 5 plus
  0.03 of the sales amount
• The invoice amount is then computed as the sales
  amount plus shipping charge
• All amounts are then displayed on browser
• The necessary ASP page is shown on the next slide
  with the output on the next one.

46
Code to process Order data
47
Output from ASP Page
48
Working with Databases
49
The Database Connection

• Working with databases on a server using ASP is
  fairly straightforward and involves these steps
• 1. Connect the ASP page to the database on the
  server
• 2. Use the input from the Web page to construct a
  SQL query
• 3. Run the query against the database to create
  the Recordset consisting of the records that
  match the query
• 4. Display or process records in recordset
• We will use the Vintage Video Case as an example

50
Vintage Videos

• A video store that only rents old videos, ie,
  pre-1990
• Only one copy of each video in stock
• Has a data base with Members, Videos, and Rental
  tables
• Wants to make it possible for customers to rent
  videos online and pick them up later
• Service will only be available before 10 am
  (prior to store opening)

51
Online Rental System (cont)

• Server must create separate pages for users and
  admin
• User pages must allow user to select videos or
  search for particular names or types or to join
  the stores club
• Admin pages must allow management to add, delete,
  and edit database as well as see listing of those
  renting a video online
• We will only consider user pages here.

52
Vintage Video Relational Database
53
User Operations

• 1. Choose to log in if already a member or to
  become a new member
• 2. If not a member, must enter personal data on
  html page and submit to save in clubs database
• 3. If already a member, enter telephone number to
  access available videos
• 4. Search videos by exact name, partial name, or
  type (comedy, drama, etc.)

54
User Operations (cont.)

• 5. Only unrented videos should be displayed
• 6. Once video is selected, click on it to rent it
  by adding
• a. users telephone number
• b. video ID number
• c. date due
• to rental table in database and mark it as
  rented in Videos table
• 7. Send user back to selection page.

55
Initial Page

• Two hyperlink options are displayed
• Login if already a user (link to login.asp)
• Become a user (link to newmember.html--not
  discussed here)
• To demonstrate working with a database, lets
  first assume the user is already a member
• We will come back to new member registration
  later
• The login page and source code are shown on the
  next slide

56
Login Page
Login.asp source code. Note that the textbox is
named txtTelNumber and this page refers to
Findmember.asp
57
Making the Connection

• The first step in the process is to connect the
  asp page to the database.
• If you are working on the server, you can do this
  by defining a Databasebase Source Name (DSN) for
  the database using the Control Panel.
• However, if you are not working on the server,
  this can be difficult. So, instead, we will use
  the code shown on the next page--DBConnect.asp to
  do this.

58
DBConnect.asp Source

• )
• Dim ConnectionString
• ConnectionString "DBQ" DBLocation
  "DriverMicrosoft Access Driver (.mdb) All
  one line
• Set DatabaseConnection createObject("ADODB.Conne
  ction")
• 'Create database connection object
• DatabaseConnection.Open(ConnectionString) 'Open
  database
• End sub
• This is a sub procedure which carries out a
  specific action. You dont need to understand it
  to use it!!
• You only need to give it a connection variable
  and the database location
• Create this page in Notepad and save it as
  DBConnect.asp

59
Using the Include Tag

• Since we will need to connect to the database
  from each ASP page, we need to include this code
  on each page
• However, we can do this with the Include Tag
• In our case, we can include DBConnect.asp by
  entering at
  the top of the FindNumber.asp page after the
  Option Explicit statement
• Note you can include code that is not a sub
  procedure right where it would go in the source

60
Finding the Location of the Database

• Note that the ConnectToDB sub assumes you know
  the physical location of the database--something
  you may not know if its on a distant server
• However, we can use the following statement to
  find the physical location (assuming the database
  name is vintage.mdb)
• DatabaseLocation server.MapPath("vintage.mdb")
• We can now pass this variable to the sub
  DBConnect as the second variable

61
Code for FindMember.asp Page

• Here is the code for FindMember.asp to connect to
  the database

ASP
Select Video Page Members, DatabaseLocation, RS, SQLStmt, dim
TableName, ThePhonenumber, Name DatabaseLocation
server.MapPath("vintage.mdb") Find database
ConnectToDB Conn, Databaselocation 'Make
connection to it
62
Constructing SQL Statement

• To find if the phone number entered on the Login
  page matches that of a member, we need to run an
  SQL query
• Specifically, we need set a variable equal to the
  phone number and then incorporate it in the
  query, ie,
• ThePhoneNumber Request(TelNumber)
• Next, we need to write the query, insuring that
  the phone number variable is enclosed in
  apostrophes since it is a text field. The SQLStmt
  variable is set equal to the query
• SQLStmt "Select from " TableName " Where
  _ Phone_Number " "'" ThePhoneNumber "'"
• If the Where clause does not involve a text
  field, the variable is not enclosed in
  apostrophes (but is enclosed in pound signs if it
  is a Date type).

63
Executing the SQL Statement

• To execute the statement, we need to use the Conn
  connection string (object) created by the
  ConnectToDB sub
• This is accomplished by setting the RS
  (Recordset) object equal to the Conn.Execute
  method, ie,
• Set RS Conn.Execute(SQLStmt)
• After this is done, the records (if any) are in
  the RS recordset object (the Set statement
  creates an object)

64
Processing the Matching Records

• Since any matching records are now in the RS
  recordset object, we can process them by working
  with this object
• First, we can test whether there are any records
  in RS, by checking whether or not we are the EOF
  (End of File) record in the data base. If we are,
  the recordset is empty otherwise,we can process
  the records.
• If rs.eof then Recordset empty
• response.write(There is nobody with that
  telephone number!
  )
• response.write(To try again, click login.asp here)
• response.write(
  )
• response.write(To join, click newmember.asphere)
• response.end
• Else Recordset has at least one record

65
Displaying Information

• We can now display the members name and
  terminate the If-Then-Statement
• Name RS(Name)
• Response.write(Hello Name)
• End if
• The entire code for FindMember.asp is shown on
  the next slide

66
Members, DatabaseLocation, rs, SQLStmt,
Name DatabaseLocation server.MapPath("vintage.md
b") 'This finds the database Connecttodb conn,
Databaselocation ThePhoneNumber
request("TelNumber") SQLStmt "Select from
Members" " Where Phone_Number " _ "'"
ThePhoneNumber "'" Set rs Conn.Execute(SQLStmt
) If rs.eof then response.write ("There is
nobody with that telephone number
")
response.write("To try again, click login.asp here
")
response.write("To join, click newmember.asp here")
response.end Else Name rs("Name")
Response.Write("Hello " Name
"") End If