Transcript Single-File Pages - University of Worcester

COMP3121
E-Business Technologies
Richard Henson
University of Worcester
November 2010
Week 6: Server Scripting and
Forms Design for Shopping Carts

Objectives:
 Contrast between HTML & asp.net server code; code
in file and code behind asp.net pages
 Understand the structure of asp.net web controls that
link to databases
 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
 Use web applications appropriately to improve web
traffic to a website
Defining the Language to be
Interpreted or Compiled

Language definition (essential start to script):
 <%@ LANGUAGE=ScriptingLanguage %>
 where @ - is a processing directive to the web
server 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# %>
Use of Comments within files

ALWAYS a good idea:
 makes the script easier to understand

Server-side scripts should be commented
 NOT sent to the browser, so no excuse!
 HTML comments are processed, however…
» slows things down & uses resources

Convention used depends on the language…
Use of Comments within files

Apostrophe for VBScript
 ‘This is a VBScript comment

Two slashes for JScript
 //This is a JScript comment

Three slashes for C#
 /// <summary>
 /// The myClass class represents an
arbitrary class
 /// </summary>

For learning C# without using books, try:
 http://www.softsteel.co.uk/tutorials/cSharp/cont
ents.html
HTML and Web forms
 HTML
forms 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
 Web forms are asp.net constructs
easily created using .net toolbox in VWD
Care with mapping of data
within a HTML 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
“extra code” files

Several ways of including extra code via
a further text file
called within that particular page
useful for portability of code
can also reduce site maintenance time and
increase code reuse
allows a modular development approach
Server-Side #Include (SSI)
Directive
.inc file
 can be used with multiple asp(x) pages
 syntax:

» place the #INCLUDE directive and either
“VIRTUAL” or “FILE” keyword inside what would
normally be HTML comment tags, and then
=“filename”
» e.g: <!--#include
file="common/copyright.inc"-->
Using “Code Behind”

From asp.net v2 onwards, Microsoft
encouraged the use of separate code pages
and HTML pages for server side development
 code page saved with a different filename

Advantage:
 Web page designer works on the HTML-based
page
 .net developer works on the “code behind
“Classes” and The Code
Behind model

As previously described, but worth
repeating…
 when an ASP.NET page is requested and renders
markup to a browser
 at run time, ASP.NET generates and compiles one
or more classes that actually perform the tasks
required to run the page

This means that the code that runs is not
solely the code that you created for the page
“Classes”
and The
Code
Behind
model
Generating and Running the
Page Class Code

An ASP.NET page runs as a unit, combining:
 the server-side elements in a page, such as
controls
 with the event-handling code you have written (or
had written for you…)

The class or classes that the compiler creates
depends on whether the page uses the
single-file model or the code-behind model
 no need to pre-compile pages into assemblies!
Generating and Running the
Page Class Code

ASP.NET dynamically compiles & runs pages
the first time they are requested by a user
 IF…any changes are subsequently made
» either to the page
» or resources the page depends on
 THEN… the page is automatically recompiled

ASP.NET also supports precompilation of a
Web site (both single-file and code-behind
page models):
 to enhance performance
 to perform error checking
 to support site deployment
Single-File Pages

The HTML, server-side elements, and
event-handling code are all kept in a
single .aspx file
when the page is compiled:
» EITHER the compiler either generates and
compiles a new class that derives from the base
Page class
» OR a custom base class defined with the Inherits
attribute of the @ Page directive.
Single-File Pages
Example:
» if a new ASP.NET Web
page named SamplePage1
is created in application
root directory
» then a new class named
ASP.SamplePage1_aspx
is derived from the Page
class
Single-File Pages

IF inside an application subfolder, subfolder
name is used as part of the generated class
» contains declarations for the controls in the .aspx page
» contains the event handlers and other custom code

After page generation…
» generated class is compiled into an assembly
» assembly loaded into the application domain
» page class instantiated & executed to render output to the
browser


IF page changes & would affect the generated
class (e.g. adding controls/modifying code)
THEN
» compiled class code is invalidated
» a new class is generated
Including other files with aspx

Other suffixes can also be used for
different types of static code:
e.g. .css files (same principle, slightly
different syntax)
e.g. constants and variables files for a
particular script type:
» e.g. mmhttpdb.js (supports java objects used by
Dreamweaver for database connections to aspx
files)
Global.asax
(.net equivalent of global.asa)

An optional way of including otherwise unlisted
events, objects, with application aspx scripts
 normally placed in root folder

More secure than & works in a different way to
global.asa:
 .NET configured so that any direct URL
request for Global.asax automatically rejected
» external users therefore cannot download or view
the code in it
 Parsed at run time & compiled
» dynamically generated .NET class (HttpApplication)
Use of Multiple
Scripting languages

HTML <SCRIPT> tag and its LANGUAGE
added within the .asp or .aspx code
 RUNAT attributes (where code is executed)
optionally added

Syntax:
 <SCRIPT LANGUAGE=ScriptingLanguage
RUNAT=Server>
 script…
 </SCRIPT>

Similar syntax used for embedded client code
Keeping it simple!

Multiple languages not recommended on a
single page!!!
 but the syntax allows this…

Not even recommended for different pages in
the same application…
 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

Apostrophe for VBScript
 ‘This is a VBScript comment

Two slashes for JScript
 //This is a JScript comment

Three slashes for C#
 /// <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…
 object: part of the library of files available to the
whole application
 component: a number of objects
» a mini-application in its own right
» any instance of a component must be explicitly created before it
can be used

Microsoft provide a library of COM components
 IIS ASP environment was mostly COM components!

Dreamweaver’s Extension Manager made it
very easy to add COM components to the
Dreamweaver environment…
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…
 VB source code so slow & easy to hack
 couldn’t be directly used with .net (even VB.net used a
slightly different syntax!)

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
Objects

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
 Using RAD tools, 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 RAD 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 RAD 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)
VBScript objects
(ADOs) and IIS asp environment



Code has to be managed 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 scripts for 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:
 here’s where the “web controls” come in useful
 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
Extracting data
from a Database

Database tables and fields need to be
carefully mapped to
 HTML Forms
 Web Forms

Essential to use MDAC
 Databases change
 Scripting changes
 latest MDAC version always recommended!

Normally used in association with tables to
present the data appropriately on the screen
Compiled code for interfacing with
Access (and other) databases

All started with ActiveX Data Objects (ADO)
 script connectivity for Microsoft Access
 Gave rise to the MDAC Microsoft technology that provided
connectivity to any ODBC or OLE DB data source
 Remember… ActiveX = compiled code; source can be written
in a variety of languages

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
 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
Selection of
Server Behaviours (.net Controls)

First things first:
select an appropriate language for the
dynamic page as it is created…
» VB, VB.net, php, cf, C#

Then make the toolbox visible…
A number of server behaviours are provided
to assist with database access
Standard .net
Server Behaviours

Datasets
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
More Standard .net
Server Behaviours

DataGrid & DataList

DataSet
show/navigate region
show/navigate paging

Dynamic text
list/menu/textfield/checkbox/radio
buttons…
Using Server Behaviours
written in asp.net


The RAD environment can write the code…
However, before running through a real web
server, the developer must make sure the
structure of the site is right:
 remote site must map to localhost as defined within
IIS
 remote folder must contain a \bin or \App_Data
folder which must contain the assembly(ies) that will
convert the .aspx code into executable code:
 remote site must contain a web.config file that maps
to the database in the “remote” folder
Using Server Scripting to
Create a Shopping System




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
 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
What makes a successful
on-line B2C E-commerce site?

One that attracts customers
 And retains customers…

Principles of good design well established
 web pages appropriately designed
 shopping system user-friendly & works efficiently

Successful e-commerce websites save the
vendor an awful lot of money!
 problem: high initial cost
 gain: potentially huge ROI
What makes a successful
on-line B2C E-commerce site?

A site will retain customers if it works
well… at fulfilment and after-sales
service
keeps customer informed
keeps customer & order data secure
doesn’t lose customer data
» or sell it to e-marketing companies…
Keeps in regular contact with customer via
email
B2C E-commerce: Keeping
the customer satisfied…

All transaction data has to be presented
digitally on-screen…
 order forms (no opening envelopes and processing
an order from paper)
 invoices (no need to print them, put them into
envelopes, or send them off by post)


Huge potential cost saving, but the screen
interface must be designed FOR THE
CUSTOMER!!!
If the customer is not comfortable with it, they
may not buy… and may not return
Importance of Consistent
Page Design
Not talking about artistic merit, etc…
 Psychology experiments show that
people prefer a consistent layout
between pages
 Also essential in on-line shopping sites
 Achieved by using:

HTML Page Templates & Cascading style
sheets
Asp.net Master Pages & page “themes”..
Justifying the Cost of a
Shopping Cart System

Many ways to create a shopping cart
system:
 how does the business know what is good
value for money?
 Internet or cloud-based systems may look
attractive…
» may appear to be cheaper
» may appear to manage everything for the business
» how well does outsourcing fit with


business objectives
regulatory requirements
Business Benefits of B2C

Can generate more sales…
 increase revenue

BUT how can B2C e-commerce cut costs?
 data input is done by the customer
» help from the shopping pages and shopping cart
 data output is presented directly on the screen
 cuts greatly on administration…
Internet Marketing

Huge growth area…
 Whole conferences devoted to e.g. “Technologies
for Marketing”

In the early days of e-commerce, the rate of
hits on website WAS the value of the
company (!)
 now revised downwards, but same principle
applies…
» formula based on (say) every tenth visitor will be a customer…

Best ways to attract visitors:
 use search engines effectively
 advertise URL effectively using a diverse range of
media
Promoting the well-designed
Website

The business will not get any benefits
from increase in sales if there are no
visitors
however excellent the site may be…
MANY ways to maximise the number of
visitors to a site…
 Suggestions? Group Activity…

Technologies for
Improving Hit Rate

Many applications available
 Some very simple
»
»
»
»
counters
meta name generators
date/time/special effects, etc. (client end)
links to code located on other sides (e.g weather forecast)
 Others more sophisticated: two categories:
» watch/record visitor behaviour

Example: ASP Sheriff
» provide more features for the site

Any number of possibilities
Effective Use of Search Engines

Objective: to use appropriate
techniques to cause the search engine
display your site in its “top ten”
Search Engine “spiders”
» crawl round the net looking out for keywords in web
pages
» retrieve keywords and corresponding URLs
» take keywords back to the search engine database
» Program automatically adds the lists of keywords to
the database

right keywords MUST be presented to the spiders
Effective Use of
Search Engines (2)



Objective: keeping the site in the top ten
Search engines like Google monitor websites:
Longer-term ranking also based on:
 hit rate
 number, and activity, of external links on site

Technologies available to help boost rankings
 Whole new discipline of e-marketing…