1. COMP3121 E-Business Technologies Richard Henson University of Worcester November 2010

2. Week 6: Server Scripting and Forms Design for Shopping Carts n 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

3. Defining the Language to be Interpreted or Compiled n Language definition (essential start to script):     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.: » »

4. Use of Comments within files n n ALWAYS a good idea:   makes the script easier to understand n n Server-side scripts should be commented   NOT sent to the browser, so no excuse!   HTML comments are processed, however… » »slows things down & uses resources n n Convention used depends on the language…

5. Use of Comments within files n n Apostrophe for VBScript   ‘ This is a VBScript comment n n Two slashes for JScript   //This is a JScript comment Three slashes for C#   ///   /// The myClass class represents an arbitrary class   /// n n For learning C# without using books, try:   http://www.softsteel.co.uk/tutorials/cSharp/cont ents.html http://www.softsteel.co.uk/tutorials/cSharp/cont ents.html

6. HTML and Web forms n 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 n Web forms are asp.net constructs  easily created using.net toolbox in VWD

7. Care with mapping of data within a HTML 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

8. HTML forms Input-Output syntax n ACTIONpoints the form to a URL that will accept the supplied information and do something with it 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

9. HTML forms Input-Output syntax n METHODtells the form how to send its data fields back to the script: 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)

10. 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

11. “extra code” files n n 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

12. Server-Side #Include (SSI) Directive n n.inc file n n can be used with multiple asp(x) pages n n syntax: » »place the #INCLUDE directive and either “VIRTUAL” or “FILE” keyword inside what would normally be HTML comment tags, and then =“filename” » »e.g:

13. Using “Code Behind” n 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 n Advantage:  Web page designer works on the HTML-based page .net developer works on the “code behind

14. “Classes” and The Code Behind model n 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 n This means that the code that runs is not solely the code that you created for the page

15. “Classes” and The Code Behind model

16. Generating and Running the Page Class Code n 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…) n 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!

17. Generating and Running the Page Class Code n 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 n 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

18. Single-File Pages n 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. @ Page@ Page

19. 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

20. Single-File Pages n 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 n 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 n IF page changes & would affect the generated class (e.g. adding controls/modifying code) n THEN »compiled class code is invalidated »a new class is generated

21. Including other files with aspx n n 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)

22. Global.asax (.net equivalent of global.asa) An optional way of including otherwise unlisted events, objects, with application aspx scripts An optional way of including otherwise unlisted events, objects, with application aspx scripts  normally placed in root folder n 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)

23. Use of Multiple Scripting languages n n HTML tag and its LANGUAGE added within the.asp or.aspx code   RUNAT attributes (where code is executed) optionally added n n Syntax:     script…   n n Similar syntax used for embedded client code

24. Keeping it simple! n n Multiple languages not recommended on a single page!!!   but the syntax allows this… n n 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

25. Use of Comments in aspx files n n Apostrophe for VBScript   ‘ This is a VBScript comment n n Two slashes for JScript   //This is a JScript comment Three slashes for C#   ///   /// The myClass class represents an arbitrary class   /// n n If you wish to learn C#, try:   http://www.softsteel.co.uk/tutorials/cSharp/cont ents.html http://www.softsteel.co.uk/tutorials/cSharp/cont ents.html

26. “Components” and “Objects” n 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 n Microsoft provide a library of COM components  IIS ASP environment was mostly COM components! n Dreamweaver’s Extension Manager made it very easy to add COM components to the Dreamweaver environment…

27. Advantages of Components n 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 database based on the parameter “user account” n 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

28. Using COM in aspx files n n 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!) n 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 n Microsoft therefore reluctant to give up a good thing and encouraged using COM+ with.net   http://msdn2.microsoft.com/en-us/library/bb735856.aspx http://msdn2.microsoft.com/en-us/library/bb735856.aspx

29. Objects 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  Using RAD tools, 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

30. Potential Problems of Scripting in the RAD Environment… n A lot can go wrong during development… n 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

31. Potential Problems of Scripting in the RAD 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)

32. VBScript objects (ADOs) and IIS asp environment n Code has to be managed and executed to become machine code for the CPU n With server scripts, achieved through web server n 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

33. 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

34. 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…

35. 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

36. 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

37. 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:  Syntax for creation:  can be invoked with the aid of “runat=“server”  long list of these in Dreamweaver MX Insert/asp.net objects

38. Extracting data from a Database n Database tables and fields need to be carefully mapped to  HTML Forms  Web Forms n Essential to use MDAC  Databases change  Scripting changes  latest MDAC version always recommended! n Normally used in association with tables to present the data appropriately on the screen

39. Compiled code for interfacing with Access (and other) databases n 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 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!

40. 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  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

41. Selection of Server Behaviours (.net Controls) n First things first:  select an appropriate language for the dynamic page as it is created… »VB, VB.net, php, cf, C# n Then make the toolbox visible…  A number of server behaviours are provided to assist with database access

42. Standard.net Server Behaviours n Datasets  local fields taken from remote tables n Insert/Update/Delete record n Command  esp. useful for embedding SQL statements n Repeat Region  display a series of records on a single form

43. More Standard.net Server Behaviours n DataGrid & DataList n DataSet  show/navigate region  show/navigate paging n Dynamic text  list/menu/textfield/checkbox/radio buttons…

44. Using Server Behaviours written in asp.net n The RAD environment can write the code… n 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

45. Using Server Scripting to Create a Shopping System n Product Information stored on database n Script connects to database n Products can all be displayed on a page n 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…

46. 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...

47. 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 n Scripts to manipulate data n Connectivity string(s) to enable scripts to interact with database n SQL statements to query the table(s)

48. “Click to buy” Scripting n 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 n The system is also used to manage on-line payment via secure link to an on-line banking service

49. What makes a successful on-line B2C E-commerce site? n One that attracts customers  And retains customers… n Principles of good design well established  web pages appropriately designed  shopping system user-friendly & works efficiently n Successful e-commerce websites save the vendor an awful lot of money!  problem: high initial cost  gain: potentially huge ROI

50. What makes a successful on-line B2C E-commerce site? n 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

51. B2C E-commerce: Keeping the customer satisfied… n 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) n Huge potential cost saving, but the screen interface must be designed FOR THE CUSTOMER!!! n If the customer is not comfortable with it, they may not buy… and may not return

52. Importance of Consistent Page Design n Not talking about artistic merit, etc… n Psychology experiments show that people prefer a consistent layout between pages n Also essential in on-line shopping sites n Achieved by using:  HTML Page Templates & Cascading style sheets  Asp.net Master Pages & page “themes”..

53. Justifying the Cost of a Shopping Cart System n 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 n business objectives n regulatory requirements

54. Business Benefits of B2C n Can generate more sales…  increase revenue n 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…

55. Internet Marketing n Huge growth area…  Whole conferences devoted to e.g. “Technologies for Marketing” n 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… n Best ways to attract visitors:  use search engines effectively  advertise URL effectively using a diverse range of media

56. Promoting the well-designed Website n The business will not get any benefits from increase in sales if there are no visitors  however excellent the site may be… n MANY ways to maximise the number of visitors to a site… n Suggestions? Group Activity…

57. Technologies for Improving Hit Rate n 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 n Example: ASP Sheriff »provide more features for the site n Any number of possibilities

58. Effective Use of Search Engines n 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 n right keywords MUST be presented to the spiders

59. Effective Use of Search Engines (2) n Objective: keeping the site in the top ten n Search engines like Google monitor websites: n Longer-term ranking also based on:  hit rate  number, and activity, of external links on site n Technologies available to help boost rankings  Whole new discipline of e-marketing…