Orderform details

General

The PizzeRIA orderform is an abstract online pizza orderform: no prices are listed, no personal or payment information is required for ordering and most important: no real pizzas can be ordered in this demo.
To be able to track the order in the PizzeRIA evaluation, an order number is given at checkout.

Each pizza configuration can have up to 6 different toppings, thus allowing 64 unique configurations.
 

Usability

  • Both mouse and keyboard input can be used to control the application.
  • Buttons are customized: They respond not only to the space key, but also to the enter/return key.
  • All checkboxes and numeric steppers in the orderform datagrid are keyboard accessible. The input field of the numeric steppers is restricted to numbers up to a value of 9.
  • Immediate feedback messages (alert/error) are generated in the following situations to create a rich user experience:
    • when the order contains identical pizza configurations;
    • when the sum of identical pizza configurations exceeds the predefined maximum of 9;
    • when the user wants to reset the orderform;
    • when cookies are disabled at checkout;
    • when the internet connection fails at checkout.

Technical details and further reading

General

Screenwidth dependent autosize (applies to orderform & evaluation)

A custom scale/scroll class is used to automatically adapt to different window sizes. When a browser window is resized to a width smaller than the application width, the application is instantly scaled down to a certain point, then scrolled. This changeover point is made screenwidth dependent and prevents small texts becoming unreadable.

Present settings (orderform application width= 834 pixels, evaluation application width= 923 pixels):

  • screenwidth larger than 1024 pixels: changeover point at 800 pixels;
  • screenwidth between 800 and 1024 pixels: changeover point at 600 pixels;
  • screenwidth between 600 and 800 pixels: changeover point at 400 pixels.


Flash Player caching (applies to orderform & evaluation)

To reduce application size and speed download time, the new Flash Player cache for Adobe components is used. This persistent player cache enables base components and libraries of the Flex framework to be stored locally and then be used by any SWF from any domain (Flash Player 9.1.1.115 or higher required).
Further reading:
http://livedocs.adobe.com/flex/3/html/help.html?content=rsl_09.html
 

Drupal 6 as backend (applies to orderform & evaluation)

The PizzeRIA Server handles storage and retrieval of raw order data. During ordering the server also takes care of login/cookie handling and order authentication.

Drupal 6 software is used as a backend. The Drupal Content Management Framework comes with built in login/cookie handling, HMAC authentication and a database abstraction layer. Drupal is also designed to allow new features and custom behavior to be added by third party modules.

In the PizzeRIA demo the following Drupal modules are used: Views, CCK, AMFPHP and Services.
Further reading:
Drupal homepage: http://www.drupal.org
Drupal overview: http://drupal.org/node/265726
 

Data Transfer

Raw data backend1 (applies to orderform & evaluation)

Order data is sent as a sequence of 4-digit numbers to increase transferrate.
Further reading:
Raw data backend1
 

Hash Message Authentication Code (HMAC)

To verify both the data integrity and authenticity during data-transfer to the PizzeRIA server, the HMAC mechanism is used. This is a message authentication code involving a cryptographic hash function in combination with a secret key. The security of such a mechanism depends upon cryptographic strength of the underlying hash function, on the size and quality of the key and the size of the hash output length in bits. HMAC could also be used to identify different orderforms on different servers.
Further Reading:
HMAC in Flex: http://ntt.cc/2008/12/06/as3corelib-tutorial-how-to-use-hmac-class-in-flex.html
HMAC: http://www.faqs.org/rfcs/rfc2104.html
 

AMF gateway (applies to orderform & evaluation)

The Adobe Messaging Format is used for fast data communication between Flex and the server backend. AMF encodes remote procedure calls (RPC) into a compact binary representation that can be transferred over a HTTP/HTTPS protocol. AMF implementations exist for PHP, Coldfusion, Java, Perl, .NET, Ruby and Python.
 

This PizzeRIA demo uses AMFPHP, the PHP AMF implementation, on the server side. Integration with Drupal 6 is accomplished with the help of the Drupal modules AMFPHP and Services.

Order data is transferred using the HTTP protocol. In data sensitive applications the order data could be sent encrypted or over a SSL connection to enhance security.

Further reading:
What the hell is AMF? http://theflashblog.com/?p=414
Zend_Amf: http://www.zendframework.com/manual/en/zend.amf.html
Census - RIA Data Loading benchmarks for AMF, SOAP, XML and JSON: http://www.jamesward.com/census/
Security information: http://theflashblog.com/?p=419
 

Cookies

A cookie based session-ID is used during the actual ordering. Ordering is setup as a four-step-process:

  • checking connection/verifying origin of orderform (using HMAC);
  • logging in (with application name and password);
  • saving raw order data;
  • logging out.