Transcript Application - University Of Worcester

COMP3121
E-Business Technologies
Richard Henson
University of Worcester
November 2009
Week 6 – Server-Side Scripting
and Shopping Cart Design

Objectives:
 Understand the structure of server script code linking
to a HTML form for the purpose of database
interaction
 Use a rapid development environment to create a
server script that will extract/display data from a
specified database held on a specified web server
 Explain the essential components of a shopping cart
Defining the Language to be
Interpreted or Compiled

At the start of the script, the language used should be
defined like this:
 <%@ LANGUAGE=ScriptingLanguage %>
 @ - is a processing directive to IIS about how to
process an .asp or .aspx file
 the actual language name has to be correctly
included e.g.:
» <%@ LANGUAGE= JavaScript %>
» <%@ LANGUAGE= VBScript %>
» <%@ LANGUAGE= C %>
“Include” files (.inc)


Extra code in a text file that can be linked to a
particular page using the Server-Side
#INCLUDE (SSI) Directive
Can reduce site maintenance time and
increase code reuse
 the same .inc file can be used with multiple asp(x)
pages

Syntax for .inc:
 Place the #INCLUDE directive and either
“VIRTUAL” or “FILE” keyword inside what would
normally be HTML comment tags
» e.g: <!--#include
file="common/copyright.inc"-->
Including other files with aspx

Allowing code from .inc and other types of files
in asp(x) pages
 allows a modular development approach

.inc extension is a convention only – other
suffixes can be used for files containing source
code
 e.g. .css files used the same principle (but slightly
different syntax)
 Constants and Variables files for a particular script
can be included:
» e.g. mmhttpdb.js (to support java objects used by
Dreamweaver for database connections to aspx files)
The global.asa file (ASP)

This was an asp construct analogous to
using .inc files for including otherwise
unlisted events, objects, and even other
.inc files for use with a .asp file

Each application would be allowed one
global.asa file, normally in its root folder
Global.asax
(.net equivalent of global.asa)


As with global.asa, this file is optional
However, it is more secure and works in
a different way to global.asa:
 ASP.NET is configured so that any direct
URL request for the Global.asax file is
automatically rejected
» external users therefore cannot download or view
the code in it
 at run time:
» Parsed
» compiled into a dynamically generated .NET
Framework class (type HttpApplication)
Use of Multiple
Scripting languages

Within the .asp or .aspx code, the HTML
<SCRIPT> tag and its LANGUAGE
 RUNAT attributes (where code is executed)
optionally added

Syntax:
 <SCRIPT LANGUAGE=ScriptingLanguage
RUNAT=Server>
 script goes here…
 </SCRIPT>

Similar to the syntax used by client behaviours
Keeping it simple!

Several Programming Language declarations
could be made on a single page…
 not recommended!!!
 not even recommended for different pages in the
same application…
 Why not?
» makes the ASP.net engine load multiple scripting engines
» has to then perform more work to determine which piece of
script should be sent to which scripting engine!
» reduces the responsiveness and scalability of the application
Use of Comments in aspx files

ALWAYS a good idea:
makes the script easier to understand

Server-side script comments are NOT
sent to the browser
contrast with HTML comments!

Convention:
Apostrophe for VBScript
» e.g. `This is a VBScript comment
Use of Comments in aspx files

Two slashes for JScript
//This is a JScript comment

Three slashes for C#
 but the comment line(s) must be preceded and
succeeded by three slash XML tags e.g.
» /// <summary>
» /// The myClass class represents an arbitrary
class
» /// </summary>

If you wish to learn C#, try:
 http://www.softsteel.co.uk/tutorials/cSharp/cont
ents.html
“Components” and “Objects”

Very similar and easily confused…
 a built-in object is part of the library of files available
to the whole application
 a component usually contains a number of objects
» a mini-application in its own right

Microsoft provide a library of COM components
» The IIS ASP environment was mostly COM components!

However…
 an instance of a component must be explicitly
created before it can be used
 Dreamweaver Extension Manager made it easy to
add components to the Dreamweaver environment,
so they were readily available to .asp files…
Advantages of Components

A component encapsulates a set of business
functionality
 can be either compiled or scripted
 e.g. a query component might retrieve a customer's
order history from a database based on the
parameter “user account”

ASP components allowed developers to
provide the same sophisticated business logic
in Web sites that was available in applications
 many third party COM components were developed
Using COM in aspx files

BIG disadvantage of COM (later COM+)
components…
 can’t be directly used with .net
 VB source code so slow & easy to hack

But popular with developers…
 provided consistent, reusable functionality
 easy to maintain and share
 could be modified or enhanced without affecting the rest
of the application

Microsoft therefore reluctant to give up a good
thing and encouraged using COM+ with .net
 http://msdn2.microsoft.com/en-us/library/bb735856.aspx
The Dreamweaver
“Application Object”

A series of chunks of server script code that
will together provide web functionality
 available in a number of languages
» asp, asp.net
» Php, cold fusion
 code added to a dynamic HTML page “at the click
of a mouse button”

Several objects usually used together to
create a useful web application e.g.
 data capture form and sending data to database
 presentation of data from a database
Potential Problems of Scripting in
the Dreamweaver Environment…


A lot can go wrong during development…
Scripting language needs to be defined at the
start of the page
 dynamic “new” pages provide a range of options

Application objects can:
 be inserted in the wrong place…
 themselves become muddled
» partly written in HTML
Potential Problems of Scripting in
the Dreamweaver Environment…
(continued)

Embedded server script code can be
dependent on a link to a database
 that link needs to be functioning correctly
 database field types must correspond with script
equivalents
 if the database changes significantly, the script
must accommodate the field, etc. changes…
» roll out carefully
» may be easier to recreate the object, or even the whole page(s)
HTML forms – a summary


Work at the client end:
collect data in a structured way
store data as pre-defined type in with
specific field name on the local machine
It would be too easy to blindly let
Dreamweaver do all of this for you!
 Some application objects do contain the HTML
forms as well to work with the scripts…
 BUT… cannot be guaranteed, if something new
is being developed
Care with mapping of data
within the form

Essential to know how HTML forms work
 provides a useful aid to identifying errors
 may need to create them from scratch, and
drag/drop fields into the boxes

Fieldnames & data added to the form can
be:
 sent direct to an email address
» useful for sending orders for products by email
 sent to a web server for storage in a simple
datafile or relational database
» useful for e.g. automated storage of orders
HTML forms Input-Output syntax

ACTION points the form to a URL that
will accept the supplied information and
do something with it
it is up to the web server at that website to
deduce the type of script from its suffix
the web server then needs to use
appropriate software to process it
HTML forms Input-Output syntax

METHOD tells the form how to send its
data fields back to the script:
POST sends all the information from the
form separately from the URL string
» could be used with mailto
GET attaches the information from the form
to the end of the URL string (max 255
characters)
HTML form/server script application
case study: “orderform”

The application was required to…
 receive structured data passed from the form
 send data to and from the lines of a text file in a
particular folder (WHICH NEEDED TO EXIST!
THINKING AHEAD ALWAYS A GOOD IDEA…)
 add delimiters to separate the fields within a record
and stored the record as a text file
 extract and display the completed contents of the
file

All had to be achieved through VBScript code
VBScript objects
(ADOs) and IIS asp envionment



Code has to be magaged and executed to
become machine code for the CPU
With server scripts, achieved through web
server
IIS web server environment has five
particularly useful VBScript objects that can
be evoked in asp scriptsfor interaction with
data :
 Session, Application, Request, Server, Response
ASP VBScript Objects in ASP.net

Session
 maintains user information across multiple web
page requests
 information kept for the duration of a user's session
 a good place to store data specific to the user

Sessions in ASP.NET use a Session ID (32-bit
long integer)
 generated by ASP.net engine for uniqueness
 other variables easily added:

Session(“username”) = “Joseph Bloggs”

Session(“color”) = “Blue”
 all stored in memory as hash tables including “timeout” value
 Session(“variable”) can then be used to call up data
ASP VBScript Objects in ASP.net

Application
 used to share information among all users of the
Web application
 a good place to store anything common to the
application such as:
» database connection strings
» frequently used lookup lists
» environment information

ASP.net Applications have an Application ID
32-bit long integer generated as for session obj
 Application variables generated in a similar way to
asp.net session variables…
ASP VBScript Objects in ASP.net

Request – the only way asp could retrieve the
input data entered by the user in the input fields in
the page
 used to access information passed from the browser
when requesting a Web page
 handles HTML form fields, client certificate information,
and cookies

In ASP.NET, HttpRequest class fulfils this function
 an instance (object) called Request created by default
in all the pages
 provides various methods and properties for using the various
information related to a web request
 however.. ASP.NET also provides an event handling
mechanism & web controls to access user inputs
ASP VBScript Objects in ASP.net

Response – exact opposite of request
 sends information back to the browser
 includes dynamic Web pages and cookies
as well as instructions that redirect the
browser to another URL

In asp.net, the equivalent is the class
HttpResponse
 as with “Request” there is an easier way in
asp.net using event handling and web
controls
ASP VBScript Objects in ASP.net

Server
 mainly used with CreateObject to instantiate
objects in asp scripts

Much more sophisticated treatment in
asp.net:
 wide range of “web controls”
 Syntax for creation: <asp:control_name …...code…. />
 can be invoked with the aid of “runat=“server”
 long list of these in Dreamweaver MX Insert/asp.net objects
Use of asp VBScript ADOs in
orderform.asp script…

Works well to demonstrate basic asp scripting
using VBScript
 first create/open & close
 then read & write

Two VBScript procedures used to create text
file variable “sFile”
 CreateFileObject
 CreateTextFile

Unfortunately, like other aspects of VB6, these
procedures do not easily correspond with .net…
Extracting data
from a Database

Limitation of text files – a lot of
processing needed to extract individual
fields
no storage system requiring retrieval and
query would use a text file – too inflexible!
a relational database is the usual solution
database tables and fields need to be
carefully mapped (using MDAC) to HTML
forms and tables they will be used in
conjunction with
Compiled code for interfacing with
Access (and other) databases

All started with ActiveX Data Objects (ADO)
 provided script connectivity to Microsoft Access
 Gave rise to the MDAC Microsoft technology that provided
connectivity to any ODBC or OLE DB data source
 Remember… ActiveX = compiled code, doesn’t have to be
written in VB

ADO allows integration of E-Commerce
applications with legacy accounting and
fulfilment systems
» any changes in an inventory or pricing database will be
reflected in the Web application immediately
» no need to change any code!
Scripting and Database
Connectivity

Focus design on accessing the database as
little as possible e.g.
 issue one query to retrieve common data such as
list box entries
 store the results in Application object variables
 this is preferable to repeatedly issuing the same
database query...

Consider de-normalizing the database
 performance of Web applications can be improved
by reducing the number of joins in SQL statements
Selecting appropriate
Dreamweaver
Server Behaviours

Need first to select an appropriate language for
the dynamic page when created
 VB, VB.net, php, cf, C#

Then two options to add server-side code:
 Insert menu/asp.net objects
 Server Behaviour palette

A number of standard server behaviours are
provided to assist with database access
Standard Dreamweaver
Server Behaviours

Recordsets (asp), or Datasets (.net)
local fields taken from remote tables

Insert/Update/Delete record

Command
esp. useful for embedding SQL statements

Repeat Region
display a series of records on a single form
Standard Dreamweaver
Server Behaviours
DataGrid & DataList
 DataSet

show/navigate region
show/navigate paging
Dynamic text
 Web Controls:

list/menu/textfield/checkbox/radio
buttons…
Server Behaviours
written in asp.net


As with other scripting languages,
Dreamweaver writes the code
However, the developer must make sure the
structure is right:
 remote site must map to localhost as defined within
IIS
 remote folder must contain a \bin folder which must
contain the file that will convert the .aspx code into
executable code:

DreamweaverControls.dll - deployed as an application “component”
 remote site must contain a web.config file that maps
to the database in the “remote” folder
Using Dreamweaver Scripts to
Create Shopping Pages




Product Information stored on database
Script connects to database
Products can all be displayed on a page
If products are divided into categories…
 A different page can be used to store products of
different category

But how can users “click to buy”?
 this is where the shopping cart comes in very
handy…
A Shopping System front end
(Home Page & Product Pages)

Entirely web-driven:
essential to have a home page (shop
window)
» attractive (marketing!)
» should link to product categories
» category pages link to product pages

Product pages should include:
» image/description of product
» price
» an option to buy...
Shopping System Back End
(server-based systems only)

Database with tables for product,
transaction, and possibly customer
data
usually held on a remote web server
Scripts to manipulate data
 Connectivity string(s) to enable scripts
to interact with database
 SQL statements to query the table(s)

“Click to buy” Scripting

Better known as the shopping cart system
 back end provides scripts, etc. to cover all
aspects of a transaction including data storage
 front end interfaces with product pages and uses
product selection to pass information to the cart
 cart itself provides details of the transaction:
» Cart data used to create an on-line order and on-line invoice,
and send an order to an email address

The system is also used to manage on-line
payment via secure link to an on-line
banking service
Installing The Cart
from a .mxp file


Even this can go wrong!
You generally need to install the behaviour
itself before you install the patch
 otherwise you may get java script errors with
Dreamweaver…


If you do get java errors, just uninstall the
extension and start again
You’ll know when you have a correctly
installed Charon Cart because the
behaviours will appear either as menu
options or on a tool bar
WebXel

Available as .mxp
 free to download from webxel website




Provides five “controls” that can be used
to create a shopping cart system
Controls all written in asp.net C#
Designed for use with Dreamweaver
A “Perfect” choice for assignment 2 (!)
 but if you find anything better…
The Cart and the
Products database


Whichever cart is chosen, the cart fields will
need to “match” corresponding fields in the
products table of your database
Example: WebXel requires the following five
field recordset:
 Product ID
 Product Description
 Price
 Quantity (added by customer)
 Unique Key (autonumber)

It needs to be able to pick up three of these
fields from the product database…
How a typical cart creates and
stores the line totals & order total

If only one product is selected…
 the line total cost is calculated (cost * quantity)
 Order total becomes equal to line total
 a record including this value is written to the
recordset
 the record is stored as a “session cookie”

If more than one product is selected, the line
totals need to be added together
 order total becomes the result of the addition
How can a click on the
product update the cart?

The simple answer is that the clicking
behaviour is converted to cart data
 this is the main purpose of the various server
behaviours associated with the cart
 essential that the cart behaviour is included with
each product page
 if you use Dreamweaver “split screen” when
developing product/category pages you will be
able to see the code as well as the screen design
» you will therefore be able to check for yourself that the
behaviour has been included with that page
Displaying the Cart data

The data in the cart recordset/dataset
 is stored as a session cookie

Need to be copied…
 to a HTML table created by the server behaviour
which is usually known as “the cart”


Good design will enable this to happen at any
point in the shopping system, even if the cart
cookie is empty (i.e. has no records)
The displayed cart should provide an option to
delete records from the cart e.g. an order line
 and the cart values should be updated
automatically on the cart display