COMP3241COMP3241E-Commerce TechnologiesE-Commerce Technologies

Richard HensonRichard Henson

University of WorcesterUniversity of Worcester

OctoberOctober 20142014

Week 5: Server Scripting, and Week 5: Server Scripting, and Shopping Cart SystemsShopping Cart Systems

Objectives:Objectives: Relate data modelling to server-side development Relate data modelling to server-side development Create product pages that can pass on dataCreate product pages that can pass on data Explain the use of asp.net web controls with HTML to Explain the use of asp.net web controls with HTML to

allow parameter passing between pages allow parameter passing between pages

Resolving the Products-Resolving the Products-Customers relationshipCustomers relationship

Many databases have failed through Many databases have failed through lack of knowledge of entity modelling…lack of knowledge of entity modelling…

Product Customer

many:many relationship…!!!

Link Entity…Link Entity… ““Many:many” relationshipMany:many” relationship

Option 1: “programme” as OO database from Option 1: “programme” as OO database from scratch to allow repeats (!)scratch to allow repeats (!)

Option 2: use Relational Database…Option 2: use Relational Database…» not allowed: use “link” entities until no many:many leftnot allowed: use “link” entities until no many:many left

Product XYZ (order?) Customer

Is one more entity enough?Is one more entity enough?

One customer makes the orderOne customer makes the orderCan make multiple ordersCan make multiple orders1:many relationship1:many relationship

One or more One or more products make up the products make up the orderorderproduct and order product and order stillstill many:many many:many

Product & Order Product & Order need a further entity need a further entity between them…between them…

Shopping Cart EntitiesShopping Cart Entities

All of this needs to be reflected in All of this needs to be reflected in shopping cart database design…shopping cart database design…

Why? (discuss…)Why? (discuss…)

Possible basic data (entity) Possible basic data (entity) model for a Shopping Systemmodel for a Shopping System

customer

Order line

orderproduct

No entityrelationships shown! Where does

Shopping Cart fit?

Possible Data Model with Possible Data Model with entities/attributes addedentities/attributes added

Field names may Field names may vary but the principle vary but the principle is the same…is the same…

Field names must Field names must match with server match with server script variablesscript variables

Testing the Logical Design Testing the Logical Design with Physical Data…with Physical Data…

ERM may work on paper…ERM may work on paper…But easy to get the logic wrong…But easy to get the logic wrong…

Test with practical working modelTest with practical working modelcreate database tablescreate database tableslink, according to your ERMlink, according to your ERMpopulate the tables with trial data of an populate the tables with trial data of an

appropriate formatappropriate formatmake sure all is still consistent…make sure all is still consistent…

Creating the Physical Database Creating the Physical Database from a Logical Designfrom a Logical Design

Popular options for small(ish) databases:Popular options for small(ish) databases:Microsoft AccessMicrosoft Access

» only Access 2000 onwards properly SQL compliantonly Access 2000 onwards properly SQL compliantMySQL (open source)MySQL (open source)

» originally shareware for Unixoriginally shareware for Unix» also for Windowsalso for Windows

Popular options for larger databases:Popular options for larger databases:SQLServerSQLServerORACLEORACLE

Essential attributes Essential attributes for Orders Entityfor Orders Entity

All entities in an entity model…need a primary keyneed a foreign key to link with an attribute

in another entity» which attributes in orders?

Essential attributes for Essential attributes for Orderline EntityOrderline Entity

Primary key attribute? Foreign key to link to another entity…

again… which one?

Each orderline contains other data that needs to be recorded to complete the order. Which other attributes are needed?

Completing the Data modelCompleting the Data model

Server scripts will use data from one/more entitiesessential that attributes for entities correctly

identified

How can any gaps in the data model be filled in? important that this is completed before

programming the scripts begins…

Role of Server Scripting in Role of Server Scripting in creating Product Pagescreating Product Pages

Server scripts with appropriate Server scripts with appropriate embedded SQL required for:embedded SQL required for:picking the right data out of the remote picking the right data out of the remote

databasedatabasewriting data to the appropriate locations in writing data to the appropriate locations in

HTML pages on the local client browserHTML pages on the local client browserManaging a temporary store in memory on Managing a temporary store in memory on

the local machinethe local machine

Local storage of “remote” dataLocal storage of “remote” data Asp.net supports local storage of data through Asp.net supports local storage of data through

datasets (arrays) datasets (arrays) in protected memoryin protected memory simply a local copy of various data fields held on simply a local copy of various data fields held on

one or more data tables on the remote databaseone or more data tables on the remote database each field becomes a variable in local memoryeach field becomes a variable in local memory

The The dataset fields dataset fields map directly onto the fields map directly onto the fields in the remote databasein the remote database new data can therefore always be stored locally until new data can therefore always be stored locally until

the appropriate server command is made that writes the appropriate server command is made that writes it to the remote databaseit to the remote database

The Dataset Display The Dataset Display (one record from database)(one record from database)

As you have seen, Visual Studio facilitates As you have seen, Visual Studio facilitates selection of controls creating local datasets selection of controls creating local datasets associated with a server-based databaseassociated with a server-based database

Also helps generate scripts for display of Also helps generate scripts for display of dataset data on a HTML page…dataset data on a HTML page… further control(s) can be used to create a HTML further control(s) can be used to create a HTML

table for displaying a single recordtable for displaying a single record a navigation bar object can then be added and a navigation bar object can then be added and

used to navigate to other recordsused to navigate to other records

HTML forms & HTML tag nestingHTML forms & HTML tag nesting

HTML forms work at the client end…HTML forms work at the client end…collect data in a structured waycollect data in a structured waylocal storage through form fields:local storage through form fields:

» pre-defined data type (parameter)pre-defined data type (parameter)

» specific field name (parameter)specific field name (parameter)

Note syntax (within <body>):Note syntax (within <body>):» <div><form><repeater><itemtemplate><table><div><form><repeater><itemtemplate><table>

» </table></itemtemplate></repeater></form></div></table></itemtemplate></repeater></form></div>

Mapping of data Mapping of data within a HTML formwithin a HTML form

HTML form structure:HTML form structure: text boxes/fieldnames for adding datatext boxes/fieldnames for adding data Get/Post tells page where to send the dataGet/Post tells page where to send the data button(s) to trigger the sending of data to the button(s) to trigger the sending of data to the

location specified by get or post…location specified by get or post…

Data added to the form can be sent to:Data added to the form can be sent to: email addressemail address URL of a web serverURL of a web server

HTML forms Input-Output syntax HTML forms Input-Output syntax

Basic structure: <form> … </form>Basic structure: <form> … </form> ACTIONACTION parameterparameter points to a URL that will points to a URL that will

accept the supplied information and do accept the supplied information and do something with itsomething with it it is up to the web server at that website to deduce it is up to the web server at that website to deduce

the type of script from its suffixthe type of script from its suffix

the web server then needs to use appropriate the web server then needs to use appropriate software to process itsoftware to process it

HTML forms Input-Output syntaxHTML forms Input-Output syntax

METHODMETHOD parameter tells the form how parameter tells the form how to send its data fields back to the script:to send its data fields back to the script:POST sends all the information from the POST sends all the information from the

form separately from the URL stringform separately from the URL string» could be used with mailtocould be used with mailto

GET attaches the information from the form GET attaches the information from the form to the end of the URL string (max 255 to the end of the URL string (max 255 characters)characters)

Modular Development association Modular Development association of “code” files with HTMLof “code” files with HTML

Existing Existing goodgood code recycled whenever code recycled whenever possible… possible… useful for portability (no point in rewriting…)useful for portability (no point in rewriting…) used in conventional HTML e.g. cssused in conventional HTML e.g. css

Several additional ways to use text Several additional ways to use text files/source code with .aspx pages:files/source code with .aspx pages: SSI Include global.asaxSSI Include global.asax ““code behind” code behind”

aspx also allows “ready to run” compiled codeaspx also allows “ready to run” compiled code ““toolbox” controls & “assemblies”toolbox” controls & “assemblies”

The Server-Side #Include The Server-Side #Include (SSI) Directive(SSI) Directive

Saved as a .inc file Saved as a .inc file used with multiple asp(x) pagesused with multiple asp(x) pages

Syntax:Syntax:» #INCLUDE directive and either “VIRTUAL” or #INCLUDE directive and either “VIRTUAL” or

“FILE” keyword placed inside what would normally “FILE” keyword placed inside what would normally be HTML comment tags, with file=“filename”be HTML comment tags, with file=“filename”

» e.g.: e.g.: <!--#include <!--#include file="common/copyright.inc"-->file="common/copyright.inc"-->

Using Server Scripting to Using Server Scripting to Create online Shopping SystemCreate online Shopping System

““Click to buy”Click to buy” product Information stored on databaseproduct Information stored on database script connects to databasescript connects to database products can be displayed on a page or as aeries products can be displayed on a page or as aeries

of categoriesof categories

Recording/monitoring of clicking behaviour to Recording/monitoring of clicking behaviour to simulate buying…simulate buying… coded into the product page & shopping cartcoded into the product page & shopping cart shopping system “logic” needs to be right…shopping system “logic” needs to be right…

WebXel “Shopping Cart” controlWebXel “Shopping Cart” control ““ready assembled” web control…ready assembled” web control…

sets up the fields that will be used to store sets up the fields that will be used to store the shopping datathe shopping data

Could have been set up as a series of Could have been set up as a series of code behind filescode behind fileslot of coding as source code…lot of coding as source code…why bother anyway if already perfected?why bother anyway if already perfected?code needs to be used by many .aspx pagescode needs to be used by many .aspx pages

““Shopping Cart” assemblyShopping Cart” assembly More secure than source codeMore secure than source code

accessed by multiple .aspx pages…accessed by multiple .aspx pages…needs to be as fast as possible!needs to be as fast as possible!

Structure: assemblies added to the Structure: assemblies added to the App_Data folderApp_Data folderneed to be formally included with a page need to be formally included with a page

using <#include…. >using <#include…. >.dll suffix standard for “C” dynamic linked .dll suffix standard for “C” dynamic linked

librarieslibraries

Preparation: pre-compiledPreparation: pre-compiled

Not only has someone written the C# Not only has someone written the C# code for the shopping cart…code for the shopping cart…it has already been compiled as well!it has already been compiled as well!resulting assembly found on RH’s website resulting assembly found on RH’s website

as as WebXelCart.dllWebXelCart.dll Contains dataset fields used with Contains dataset fields used with

specific field and parameter namesspecific field and parameter namesneed to mesh with corresponding fields on:need to mesh with corresponding fields on:

» product pages…product pages…» cart display pagecart display page

““Click to buy” Scripting and Click to buy” Scripting and HTML codeHTML code

Product page(s) usually need to be capable of Product page(s) usually need to be capable of displaying multiple recordsdisplaying multiple records

associated ProductID value for a row relates to the associated ProductID value for a row relates to the database record displayeddatabase record displayed

Of all available web controls…Of all available web controls…

““Repeater” achieves this display most effectivelyRepeater” achieves this display most effectively

Effect of “Click to Buy”Effect of “Click to Buy”

The “add” function is built into a pre-written The “add” function is built into a pre-written page called AddfromDatabase.aspx page called AddfromDatabase.aspx

Page has no HTML (and therefore no Page has no HTML (and therefore no display…) but it triggers an SQL query to:display…) but it triggers an SQL query to: pick up a variable value chosen by the “click”pick up a variable value chosen by the “click” send the value to the server as ProductIDsend the value to the server as ProductID collect the product description and price fieldscollect the product description and price fields save all three values to the datasetsave all three values to the dataset

Passing the Product ID Passing the Product ID ParameterParameter

Product Page

Add from DB scripts

Product ID value sent as e.g. “ProdID”

fields extracted from remote database

Shopping Cart

Remote DB

“click”

Parameter Passing Parameter Passing between Pages (1)between Pages (1)

How How cancan a click on a hyperlink… a click on a hyperlink…send a parameter to a server database send a parameter to a server database add a series of correct values to the add a series of correct values to the

shopping cart? ? ?shopping cart? ? ?

Parameter Passing (2)Parameter Passing (2)

Simple (!) Simple (!) the page uses HTML “get” logic based on a the page uses HTML “get” logic based on a

hyperlink used with “?”hyperlink used with “?”variable name defined in “get” partvariable name defined in “get” part

» corresponds to the primary key in “products”corresponds to the primary key in “products”

Role of hyperlink:Role of hyperlink: picks up the primary key valuepicks up the primary key value allocates this value to the variable used to get the allocates this value to the variable used to get the

data from the database e.g. ProdIDdata from the database e.g. ProdID

““Add to Cart” controlAdd to Cart” control Cart logic to make “click to cart” actually Cart logic to make “click to cart” actually

happen…happen… other values such as quantity added to the dataset other values such as quantity added to the dataset

(default setting normally 1)(default setting normally 1) dataset record will be equivalent to an “orderline”dataset record will be equivalent to an “orderline” values for other products can then be stored in the values for other products can then be stored in the

same dataset but with different orderline valuessame dataset but with different orderline values

In any case, the result should be a display of In any case, the result should be a display of the shopping cart contentsthe shopping cart contents

Displaying the Cart ContentsDisplaying the Cart Contentscart.aspxcart.aspx

Another carefully designed web page that Another carefully designed web page that displays the cart contents and does some displays the cart contents and does some simple calculationssimple calculations uses a repeater and an HTML table to display uses a repeater and an HTML table to display

products data (like “products” page)products data (like “products” page) differences from “products”…differences from “products”…

» data displayed from the cart not the products tabledata displayed from the cart not the products table

» line total and grand total fields used to display each line total and grand total fields used to display each item total, and sum total of all line totalsitem total, and sum total of all line totals

Typical development “errors”…Typical development “errors”…

MUCH can go wrong…!!!MUCH can go wrong…!!!

Before embarking on shopping cart development, Before embarking on shopping cart development, make sure…make sure… all local/remote web server settings are correctall local/remote web server settings are correct screen fields and db fields use the same formatscreen fields and db fields use the same format

» mustn’t use “reserved words” or punctuation, inc spacesmustn’t use “reserved words” or punctuation, inc spaces users have sufficient access rights to write to the users have sufficient access rights to write to the

databasedatabase» this especially includes the “IIS process” userthis especially includes the “IIS process” user

Major adjustments may be needed in response to Major adjustments may be needed in response to a minor change in design…a minor change in design… all the more reason to get the design right…all the more reason to get the design right…

Anything else?Anything else?

One other thing that still need to be One other thing that still need to be covered theoretically is the asp.net covered theoretically is the asp.net environment and how “controls” are environment and how “controls” are created, and assembled…created, and assembled…

Next week… (!)Next week… (!)

Thanks for listening…Thanks for listening…

Over the next few weeks, we’ll Over the next few weeks, we’ll work on the coding to put this work on the coding to put this into practice… into practice…