Building an eBusiness: Internet and Web Programming

1
Building an e-Business Internet and Web
Programming

• Reference
• e-Business e-Commerce for Managers, 1/e,
  Deitel, Deitel, and Steinbuhler (ISBN
  0-13-032364-0)

2
Objectives

• To understand the concept of a multitier
  application model.
• Client the top-tier and its role.
• Web Server the middle-tier and its role.
• Date the bottom-tier and its role.
• To understand how the documents used in an
  e-Business site are related to each other.

3
Bug2Bug.com

• A fictitious e-business sells books online.
• Small inventory of books.
• Publishes the contents of its database (i.e.,
  book descriptions) on the web.
• Visitors to the Web site can purchase any one of
  these books.
• Storefront model for their bookstore Customers
  can add books to their shopping cart with the
  simple click of a button.

4
Three-tier Architecture
5
Top Tier

• The User Interface

6
Technologies Used

• Hypertext Markup Language (HTML) marks up text,
  audio, images and video for the Web. At present,
  HTML is the most popular technology for marking
  up Web content. HTML defines the structure and
  layout of a Web page.
• JavaScript is a programming language (also called
  a scripting language) that is often used to make
  Web pages more interactive and dynamic.
  JavaScript programs are embedded in HTML
  documents and interpreted by the Web browser.
  Bug2Bug.com uses JavaScript to validate user
  input at check out.
• Extensible Markup Language (XML) is a markup
  language for describing and structuring data. XML
  differs from HTML in many ways, including its
  use. Bug2Bug.com uses XML to markup a list of
  books on back order (i.e., not available yet).
• XML documents are not intended to be rendered
  directly by a Web browser. Extensible Stylesheet
  Language (XSL) defines the rules for transforming
  an XML documents data into renderable data.
  Bug2Bug.com uses XSL to transform the XML
  document into an HTML document.

7
Middle Tier

• The Server

8
Middle Tier

• Operation
• Accepts request from top tier (client)
• Gets data from bottom tier (database)
• Responds to client
• Usually returns HTML
• Implements business logic (e.g., credit-card
  number verification) and presentation logic to
  control interactions between users and data.

9

• Usually most complex tier
• In our case (Bug2Bug.com)
• Use ASP to query database for data
• Mark it up as HTML
• Send to client

10
Active Server Pages (ASP)

• ASP
• Dynamically create HTML documents
• Files have .asp extension
• Can have HTML and scripting code (VBScript,
  JavaScript)

11
How ASP works

• Communication via the HTTP protocol
• Server receives a clients HTTP request
• Loads requested page
• HTML documents are static documents
• All clients see same content when requesting same
  page
• ASP sends dynamic Web content to the client
• Server processes request (often interacts with a
  database)
• Returns the results to the client (usually as
  HTML)

12

• A HTTP request type (request method) is POST
• Sends client form data to Web server
• POST request posts form contents to the end of
  HTTP request
• HTTP request has info about server, client,
  connection, authorization, etc.
• ASP objects
• Allow programmer to talk to client and server

13
Some built-in ASP objects
14
Technologies Used

• Active Server Pages (ASP) are server-side text
  files that are executed in response to a client
  request from a Web server. Bug2Bug.com uses
  Active Server Pages to process client requests
  for documents.
• Microsoft VBScript is a programming language used
  in Active Server Page documents. VBScript is the
  most popular language for programming Active
  Server Pages. Bug2Bug.com uses VBScript to
  implement its Active Server Pages.
• ASP does not provide any features for accessing a
  database. Microsoft provides a collection of
  objectscalled ActiveX Data Objects (ADO)that
  ASP documents use to access databases.
  Bug2Bug.com uses ADO in its ASP pages to retrieve
  each books information.
• Structured Query Language (SQL) describes a
  database interaction such as querying for data or
  updating existing data.

15
Bottom Tier

• Database

16
Technologies Used

• Microsoft Access, a database management system to
  store book information. This database contains a
  single table that is populated with book
  information such as title, price, etc.
• From this database, the book information is
  retrieved and marked up as HTML. We use Active
  Server Pages (ASP) and a programming technology
  called ActiveX Data Objects (ADO) to access and
  retrieve book information from the database.

17
Access database (Products table)
18
Home page (Welcome.html)

• The electronic front door of the store.
• Clicking the Enter button requests the Active
  Server page book.asp (next slide).

19
List of available books (books.asp)

• The web server executes books.asp, which
  retrieves the book information from the database
  and formats the data with HTML.
• When the user clicks a book title, one of three
  ASP pages (book1.asp, book2.asp, book3.asp) is
  requested.

20
Visual Basic information page (book1.asp)

• The shopping cart is managed by two ASP pages
  addToCart.asp and viewCart.asp.
• The user can either click the Add to Cart button
  to add the book to their shopping cart or click
  the View Cart button to view the contents of
  their shpping cart.

21
Add to Cart

• The addToCart.asp ASP writes the book information
  to a text file called a cookie on the client
  machine. This cookie stores the items that the
  user adds to the shopping cart.
• The addToCart.asp ASP then redirects (i.e.,
  changes the Web page displayed in the browser)
  the user to viewCart.asp.

22
Contents of the shopping cart (viewCart.asp)

• viewCart.asp retrieves the cookies contents and
  creates HTML to render the shopping cart.
• Subtotals are displayed for each book in the cart
  as well as a total for all books in the shopping
  cart.
• The user can either check out by clicking Check
  Out or return to the book list by clicking Book
  List.

23
User attempting to submit order with empty field
(order.html)

• Check out allows the users to purchase the books
  by requesting the order.html document.
• order.html is a form that users fills outs to
  complete the order.
• JavaScript code is embedded into this HTML
  document to check for validity of the user input.

24
User trying to submit order with State field
empty (order.html)
25
User attempting to check-out form with an invalid
state abbreviation (order.html)
26
Order confirmation (process.asp)

• If all input to the order.html form is valid, the
  form is sent as part of the request for
  process.asp.

27
Backordered Books

• The last link of books.asp, labelled Other
  Publications requests backorder.xml an XML
  document that marks up a few of the pbulications
  that are currently not available.

28
Table of books on back order (backOrder.xml)
29
Shopping cart documents and their interactions

• The dashed line between backorder.xml and
  books.xsl indicates that backorder.xml references
  book.xsl. When backorder.xml is requested,
  book.xsl will automatically be requested as well.
  
• The browser uses book.xsl to transform the XML
  data to HTML.

30
Summary of Bug2Bug.coms documents