To understand the goal of this app, please see the project description.

The suggested server side infrastructure is PHP and a MySQL DB, but you could implement your own web service on any infrastructure. The client app runs on all newer mobile platforms. If the client browser supports HTML5 Web Storage, you're usually good to go.

The app relies heavily on JavaScript. All navigation pages exist in the same HTML file in order to enable smooth page transitions. It was designed with performance in mind; once downloaded, the app utilizes HTML5 Appcache to store all resources in order to make subsequent page visits load faster. It makes only tiny REST/JSON calls to the server-side script, making performance as good as possible on slow mobile connections.

File breakdown

The project consists of two key files: index.htm, which contains the client-side code, and kioskservicejquery.php, which contains the server-side PHP script.
As a bonus I've included kioskservicejquerystub_en.php - a server-side stub file that may come in handy for testing the client code without having to worry about server-side database issues.
Every other file in the repository serves to support index.htm in one way or another.

Required DB schema


Bold columns are required.

Example of the kiosk_products table:

The last row has its active flag set to 0, so it won't show up in the menu. It is only kept for data integrity reasons.

Example of the data that the app will produce in kiosk_purchases:

The first two rows are purchases from the menu (kiosk_products). The last row represents a purchase of a custom product. I've renamed the "number_of" column to "quantity" in the provided code.

Deployment procedure

Getting this up and running basically comes down to:

  1. Copy the contents of the repository to a PHP/MySQL environment.

  2. Create the required DB tables and specify your database credentials in kioskservicejquery.php - or start off by using the stub back-end (kioskservicejquerystub_en.php).

  3. In index.htm, edit the serverUrl variable to point to the server-side script (line 24).

  4. Consider compressing the client-side code in order to save bandwidth. I've had success using
    Choose x/html in the list.
    Choose ISO-8859-1.
    Check "Never strip quotes" under "HTML Tags ..."
    Click Compress. This will produce a lean file with code comments stripped out.

Finally, don't forget to increment the revision number (line 2) in kiosk.manifest so that browsers will refresh their cache.


Wiki: Home

Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:

No, thanks