Application Template

This page provides a functional skeleton for a new CMEM Web application. It assumes that your application will involve input from an HTML form, validation of that input, and server-side processing that returns results formatted in HTML, which is then displayed below the input. The form below implements this basic functionality -- submit some data to see it work.

Follow These Steps:

  1. Copy
    • Copy this wiki topic to a new wiki topic ('More topic actions -> Copy topic'). Choose a topic name that begins with 'Analysis' (e.g. AnalysisPrimerSelection).
    • Download the my_application.css and my_application.js files attached to this topic and attach them to the new topic.
  2. Interface
    • Plan your interface using a grid (8 rows by 5 columns).
    • Edit the styling in my_application.css to change the dimensions of rows and columns and other cosmetic properties, such as borders and colors.
    • Copy and paste from the 'Example widgets' section as needed.
    • Make adjustments to your form attributes to perform client-side validation. See the examples below.
  3. Application
    • Design your server-side program to receive the input submitted through the form and return HTML-formatted results.
    • Most any programming language can be used. There is an attached template program written in Perl.
    • It is essential to have rigorous server-side validation in your application.
  4. Documentation
    • Click on the help next to the application name. This is a link that will create a new help topic for your application.
  5. Release
    • Delete these directions and make any other final cosmetic changes.
    • Adjust the citation line under the application name so that you can be credited for your contribution.
    • You will need to coordinate with MartyBrandon to load the application onto the server.

Example widgets

Copy and paste widgets from this section for your application.



yes no

Form Validation

Client-side form validation can be implemented by editing the attributes of your form widgets.


Make a value required:
  <input type="text" name="myInput" size="20" class="foswikiInputField required" value="" />

Make a value a required email address:
  <input type="text" name="myInput" size="20" class="foswikiInputField required email" value="" />
Also works for 'date'.

Set a minimum length:
  <input type="text" name="myInput" size="20" class="foswikiInputField" minlength="2" value="" />
Also works for 'maxlength'.


See the JQuery Validate plugin website for more information.

Application Name help

Citing this application:
Jones, John; Smith, Sally 2010. Application Name,

Input: A2 A3 A4 A5
B2 B3 B4 B5
C1 C2 C3 C4 C5
D1 D2 D3 D4 D5
E1 E2 E3 E4 E5
F1 F2 F3 F4 F5
G1 G2 G3 G4 G5
H1 H2 H3 H4 H5


I Attachment Action Size Date Who Comment
my_application.csscss my_application.css manage 1 K 25 Feb 2010 - 21:32 UnknownUser Skeleton CSS file that defines layout and style. Copy and modify this to suit your needs.
my_application.jsjs my_application.js manage 984 bytes 26 Feb 2010 - 00:47 UnknownUser Javascript providing client-side validation and AJAX remote procedure call. manage 3 K 18 Aug 2009 - 18:41 UnknownUser Skeleton of perl executable that will be called by the form. Copy and modify this.
Topic revision: r1 - 12 Feb 2016, MartyBrandon

POLG Server

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback