HR Guide to the Internet: |
Designing a Client
Based Salary Survey
Where will the data be stored? Data storage is a significant problem in a client based application. If the survey is small enough to be completed in one session (in less than an hour) and contains just a single web page for the questionnaire, then data will not need to be stored by the client application. Once the questionnaire form has been completed, it will be submitted for storage and analysis.
If your survey contains more than one web page for the questionnaire or may need to be completed by individuals over more than one session, then you will need a process for storing the user's responses from one session to the next or for combining the data entered on several different web pages. There are two ways of performing this function. You can store the data directly on the user's web browser or you can store a reference to the data on the users web browser.
The first method is faster but has a memory size limitation of approximately 4,000 bytes (i.e., characters). In plain English, the data you are storing cannot exceed a total of 4,000 characters. If you can complress your survey data to fit within this limitation then this technique may be a viable option for you.
The other method of data storage involves the use of a pointer to the data. This technique can only be used if you have access to a web server and can write CGI applications. In essense, this method uses a CGI application to store the data. The data is referenced using a key that is stored in both the CGI database and on the client web browser. This key should be a randomly generated string of characters to prevent someone from accessing the CGI's database. Also, the CGI should check for access and deny access from any location other than the associated client based software.
Example of Data Storage in Client Based Application |
In the above example, the program used to store and retrieve the data was written in JavaScript. This scripting language allows for complex computer programs to be embedded within the HTML code. The code to save the data consists of two parts: 1) collection of the data from the fields in the form--the 'SaveThis' function, and 2) storage of this result on the client browser--the 'setCookie' function. The value from each field in the form is stored in a character string separated by apostrophies. Both functions are shown below.
function SaveThis() { var rv=''
for(var i=0; i<document.JS1.length;
i++) rv+=document.JS1.elements[i].value+'*'
setCookie('DemoData',rv,10)
}
function setCookie(name, value, days) { var today = new
Date();
var expire = new Date();
expire.setTime(today.getTime() +
1000*60*60*24*days);
document.cookie = name + "="
+ escape(value)
+ ((expire == null) ? "" :
("; expires=" +
expire.toGMTString()))
}
The code to retrieve the data also consists of two parts: 1) retrieval of the stored data--the 'getCookie' function, and 2) parsing the retrieved string into the form field elements--the 'RetrieveThis' function. Both functions are shown below.
function getCookie(Name) { var search = Name
+ "="
offset =
document.cookie.indexOf(search)
offset += search.length
end =
document.cookie.indexOf(";", offset)
if (end == -1)
end=document.cookie.length
return
unescape(document.cookie.substring(offset, end))
}
function RetrieveThis() { var rv=''
rv=getCookie('DemoData')
Values=rv.split('*')
for(var i=0; i<document.JS1.length;
i++) document.JS1.elements[i].value=Values[i]
}
The functions shown above are primitive forms and can be easily expanded as needed.
In a live client based application, the data retrieval would be handled automatically as the web page is loaded. This automatic loading of the data is accomplished by including a call to the data retrieval function in the BODY tag of your html page as shown below:
<BODY onLoad="RetrieveData()">
As soon as the web page is loaded the data retrieval function, named as the value of the 'onLoad' parameter, will be executed. An example of the automatic retrieval of the data can be shown by accessing the following link below:
Example of the automatic retrieval of data using the onLoad parameter
How will data entered by the user be sent to your computer? Through the Internet of course. However, in a client based application, the user must specifically submit their data in order for it to get to your computer. Unlike the server based applications, the user using a client based application is not updating a database directly.
The data transfer would be performed through the use of a submit function built into the client based application. The transfer function would be executed when the user presses the submit button. The transfer function could collect data stored on the user's computer and compile the responses for a single transmission through the Internet. This data could be sent to a server based CGI application for storage.
How do I do the survey using references to the data stored on the Client's computer rather than storing the actual data? This is probably the most complicated survey to conduct and involves the coordination of several computer applications. But, if you have the capabilities, this technique will allow for the most flexible data storage options for a client based application. The steps to perform this survey are outlined below:
User accesses the survey through an introductory JavaScript. This script examines the user's web browser for the presence of a 'key' to the survey data for that user. If found, then the script redirects the user to a CGI application that will retrieve the user's data (if any). If the key was not found, then the script redirects the user to a CGI application that will create a key and will store the key on the user's web browser. Both the introductory JavaScript and the CGI application to create the key should be stored on the same web server so that the key, once created, can be accessed by both applications.
A CGI application will retrieve the user's data (if any) and redirect the user to the first screen of the questionnaire. The redirection includes a copy of the data to be displayed on this first screen. This data is sent as part of the redirection through parameters on the URL's query string or through hidden fields on a form whose submition is performed by a JavaScript function created by the CGI application. If you are using a form and hidden fields, please note that the form must use the GET method since JavaScript functions cannot interpret data from forms sent using the POST method. This is because the GET method uses an environment variable--the query string--to send the data and the POST method uses a data stream directed at the STDIN of a CGI application. Since the application receiving the data at this point will be a JavaScript application, the method must be GET.
The user is shown the questionnaire as an HTML file with embedded JavaScript. The JavaScript will perform the function of retrieving the data sent to it from the CGI application and inserting the data into the form on the HTML page.
The user edits the questionnaire form fields and submits the data. The JavaScript will then build a response string to be sent to the CGI application for storage. The data sent to the CGI application includes the 'key', responses, and url to the next page to be completed by the user.
Data Validation. Validation is performed through the use of JavaScript functions built into the HTML code. For example to check if the user entered a number into the salary field, the value entered will be passed to the function and if accepted, the value returned by the function will be re-inserted into the field. A sample HTML Tag is shown below:
<INPUT TYPE=TEXT NAME=Salary SIZE=9 onBlur="this.value=ValidateSalary(this.value)">
function
ValidateSalary(S) {
if(!NaN(S)){ alert('Please enter a
number.'); return ''}
return S
}
Example of Client Based Data Validation |