COMP 3121 E-Business Technologies Richard Henson University of

COMP 3121 E-Business Technologies Richard Henson University of Worcester November 2009

Week 6 – Server-Side Scripting and Shopping Cart Design n 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 n At the start of the script, the language used should be defined like this: Ø <%@ LANGUAGE=Scripting. Language %> Ø @ - 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= Java. Script %> » <%@ LANGUAGE= VBScript %> » <%@ LANGUAGE= C %>

“Include” files (. inc) n n 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 n Syntax for. inc: Ø Place the #INCLUDE directive and either “VIRTUAL” or “FILE” keyword inside what would normally be HTML comment tags » e. g:

Including other files with aspx n Allowing code from. inc and other types of files in asp(x) pages Ø allows a modular development approach n . 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 n Each application would be allowed one global. asa file, normally in its root folder n

Global. asax (. net equivalent of global. asa) n n 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 Http. Application)

Use of Multiple Scripting languages n Within the. asp or. aspx code, the HTML <SCRIPT> tag and its LANGUAGE Ø RUNAT attributes (where code is executed) optionally added n Syntax: Ø <SCRIPT LANGUAGE=Scripting. Language RUNAT=Server> Ø script goes here… Ø </SCRIPT> n Similar to the syntax used by client behaviours

Keeping it simple! n 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 n ALWAYS a good idea: Ømakes the script easier to understand n Server-side script comments are NOT sent to the browser Øcontrast with HTML comments! n Convention: ØApostrophe for VBScript » e. g. `This is a VBScript comment

Use of Comments in aspx files n Two slashes for JScript Ø//This is a JScript comment n Three slashes for C# Ø but the comment line(s) must be preceded and succeeded by three slash XML tags e. g. » /// <summary> » /// The my. Class class represents an arbitrary class » /// </summary> n If you wish to learn C#, try: Ø http: //www. softsteel. co. uk/tutorials/c. Sharp/cont ents. html

“Components” and “Objects” n 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 n Microsoft provide a library of COM components » The IIS ASP environment was mostly COM components! n 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 n 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 databased on the parameter “user account” n 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 n BIG disadvantage of COM (later COM+) components… Ø can’t be directly used with. net Ø VB source code so slow & easy to hack n 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 n Microsoft therefore reluctant to give up a good thing and encouraged using COM+ with. net Ø http: //msdn 2. microsoft. com/en-us/library/bb 735856. aspx

The Dreamweaver “Application Object” n 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” n 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… n n 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 n 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) n 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 n n 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 n 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 n 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 n 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 n 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” n 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 n All had to be achieved through VBScript code

VBScript objects (ADOs) and IIS asp envionment n n n 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 n 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 n 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, Http. Request 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 Http. Response · 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 Create. Object 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… n Works well to demonstrate basic asp scripting using VBScript Ø first create/open & close Ø then read & write n Two VBScript procedures used to create text file variable “s. File” Ø Create. File. Object Ø Create. Text. File n Unfortunately, like other aspects of VB 6, these procedures do not easily correspond with. net…

Extracting data from a Database n 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 n All started with Active. X 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… Active. X = compiled code, doesn’t have to be written in VB n 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 n 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 n Need first to select an appropriate language for the dynamic page when created Ø VB, VB. net, php, cf, C# n Then two options to add server-side code: Ø Insert menu/asp. net objects Ø Server Behaviour palette n A number of standard server behaviours are provided to assist with database access

Standard Dreamweaver Server Behaviours n Recordsets (asp), or Datasets (. net) Ølocal fields taken from remote tables Insert/Update/Delete record n Command n Øesp. useful for embedding SQL statements n Repeat Region Ødisplay a series of records on a single form

Standard Dreamweaver Server Behaviours Data. Grid & Data. List n Data. Set n Øshow/navigate region Øshow/navigate paging Dynamic text n Web Controls: n Ølist/menu/textfield/checkbox/radio buttons…

Server Behaviours written in asp. net n n 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: n Dreamweaver. Controls. 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 n n 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 n 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) n Entirely web-driven: Øessential to have a home page (shop window) » attractive (marketing!) » should link to product categories » category pages link to product pages n Product pages should include: » image/description of product » price » an option to buy. . .

Shopping System Back End (server-based systems only) n Database with tables for product, transaction, and possibly customer data Øusually held on a remote web server Scripts to manipulate data n Connectivity string(s) to enable scripts to interact with database n SQL statements to query the table(s) n

“Click to buy” Scripting n 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 n 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 n n 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… n n 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

Web. Xel n Available as. mxp Ø free to download from webxel website n n 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 n n Whichever cart is chosen, the cart fields will need to “match” corresponding fields in the products table of your database Example: Web. Xel requires the following five field recordset: Ø Product ID Ø Product Description Ø Price Ø Quantity (added by customer) Ø Unique Key (autonumber) n 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 n 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” n 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? n 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 n The data in the cart recordset/dataset Ø is stored as a session cookie n Need to be copied… Ø to a HTML table created by the server behaviour which is usually known as “the cart” n n 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