topic

Example of a universal script for processing HTML-forms

Problem{Task}: to develop a script for preservation in a file of the values sent by the HTML-form. Each value in a file should have the comment. The received file should look approximately so:

Name [name]: KHo SHi Mines

Email [email]: ivan@mydom.ru

Home page [www]: ivan.mydom.ru

For this case the HTML-form should look so:

Name: <input type = "text" name = "name">

Email: <input type = "text" name = "email">

Home page: <input type = "text" name = "www">

</form>

The essence of the approach consists in addition of element HIDDEN for each value on the form. This additional element contains the information on with what comment value in a file should be saved and on what place in a file this value to have. Thus for each value of the form it is necessary to create teg

<INPUT

type = "hidden"

name = " descr [POSTION] _ [NAME] "

value = "[COMMENT]"

Where

[POSTION] - a position of value in a resulting file

[NAME] - a name of value of the form to which it corresponds{meets} an element

[COMMENT] - the description of value

Example of realization of a script on perl for processing the form.

sub add_form

{

my @now = localtime ();

my $msg = ";

$now [3] = ($now [3] <9)? " 0$now [3] ": $now [3];

$now [4] ++; $now [4] = ($now [4] <9)? " 0$now [4] ": $now [4];

my $anketa_file = " $ENV {DOCUMENT_ROOT}/form _ "

. ($now [5] + 1900). " - $now [4] - $now [3] _ $now [2] - $now [1] - $now [0] .txt ";

* To receive names of descriptions of variables

my @form_HTTP_vars_descriptions =

sort grep {m / ^ descr [0-9] * _/} keys (%FORM);

foreach my $key_descr (@form_HTTP_vars_descriptions) {

** To process each description

** To receive a name of a variable

$key_descr = ~ m / ^ descr [0-9] * _ (. *) $/;

my $key = $1;

** To receive value of the description of this variable

my $descr = $FORM {"$key_descr"};

** To receive value of a variable

my $val = $FORM {$key};

** To replace all symbols of transition to a new line

$val = ~ s/r? n / <BR>/gs;

** To generate a line for addition in a target file

$msg. = " $descr [$key]: $valn ";

}

if (open (F, "> $anketa_file ")) {

print F "$msg";

close (F);

}

Now at creation of the new form in quality obrabotchika it is possible to use the resulted function with the minimal updatings (a name of a file for preservation). Certainly, it is possible to unify as much as possible this function so, that she{it} will not need to be changed at occurrence of new forms on our site. Let it will be your domestic task.

Web a browser as means of access to a DB

In job some aspects of construction of the client application on base WEB of a browser are considered{examined}. It is necessary to note, that information system in which basis of construction Web-technologies lay, in the certain situations can not only save opportunities of the classical application, i.e. the application developed within the framework of client-server technology, but frequently and to expand them. Besides application of Web-technologies in this class of problems{tasks} has also the advantages. To most important of them, it is possible to attribute{relate} absence of necessity for installation and support of client applications, and also expenses for purchase of licenses for the software which would carry out support of job front-end applications, that invariable is present at client-server technology.

On the other hand, razmytost` standards in the field of WEB-technologies and some "syrovatost`" the software used here were, until recently, the factor constraining their distribution. Nevertheless, at the moment it is possible to speak already not so much about an opportunity of distribution of WEB-technologies, how much about success of distribution of such technologies on the problems{tasks} decided{solved}, for example, in corporate networks.

As occasion to a spelling of given clause{article} practical experience of construction of similar system which the author wants to share has served. In small clause{article} there is no opportunity to consider all spectrum of problems and their decisions, however, the most essential moments will be mentioned.

Production of a problem{task}

It is necessary on the basis of standard browser to realize a client part zaprosnoj systems to a database. The system should give the user:

* Simultaneous formation of any number of searches with use of objects of the HTML-form;

* Automatic storing and initialization of criteria of the current search;

* Viewing, updating and reset of criteria of the current search;

* Creation of new search, removal{distance} and performance of the current search.

Besides the client part of system should be capable to fast expansion and updating, that from the point of view of the developer means, that its{her} code should be whenever possible is universal and open.

Here we have resulted only a small number{line} of requirements which can be showed{presented} to real zaprosnoj to system, being guided on their sufficient prevalence. However nothing prevents to switch on here, for example, the requirement of automatic verification of the information entered by the user or an opportunity of change of logic attitudes{relations} between criteria of search. Only restriction on volume of clause{article}, and also unwillingness of the author to leave in the description let interesting, but all the same minor details, has affected their exception of production of a problem{task}.

It is necessary to emphasize also, that in the given job construction of a server part zaprosnoj systems is not considered{examined}. In this sense, the question on technology which will be used on the server remains open and depends, apparently, on requirements showed by concrete development. In the given job orientation to processing of the entered information by a CGI-script is done{made}.

Realization

1. Objects of a client part

Language JavaScript, is based on object-oriented model of programming though it{he} and cannot be named high-grade objective language. So for example, in this language there is no concept of a class. Nevertheless, the most effective decision of the specified problem{task} sees in application of objective opportunities JavaScript.

The analysis of the requirements showed by our problem{task}, reveals three base objects which are necessary for realizing on JavaScript:

1. A file of searches [array_of_query];

2. Search [query];

3. Criterion of search [criterion].

In language JavaScript designs for definition of complex{difficult} types of the data are not stipulated, therefore the user objects are designed with the help of functions. Realization by means JavaScript of the designer of the object first in this list - a file of searches [array_of_query] is below resulted.

function array_of_query ()

{

// Properties

this.array_of_query = new Array () // Enters a file of objects (searches)

this.id =-1 // Defines{Determines} the unique identifier of search

// Methods

this.array_size = array_size // Returns kol-in searches in a file

this.add_query = add_query // Adds search in a file of searches

this.del_query = del_query // Deletes search from a file of searches

this.index_query = index_query // Returns an index of search in a file of searches

}

Apparently, in the given designer 2 properties (variables) and 4 methods are determined. Designing of concrete object (or in terminology of object-oriented programming - definition of a copy of a class) is carried out in JavaScript by the next way:

imja_ob``ekta = new imja_funkcii_konstruktora ()

For the explanatory of the separate moments, we will need a concrete copy of such object, therefore now it is useful to enter it{him}:

stack = new array_of_query ()

Now some words about realization of methods are high time to say. Methods in JavaScript are entered as usual functions, and because of impossibility full inkapsuljacii a method in a concrete class, the name of functionally similar methods for various designers - classes should be various. The code of a method of the above-stated object which adds new search in a file of searches is below resulted.

function add_query (name)

{

this.id = this.id+1

this.array_of_query [this.array_of_query.length] = new query (name, this.id)

return this.id

}

Here it is necessary to pay attention to presence of formal parameter in heading of realization of function, and on his{its} absence at the description of function in the designer of object who posesses a method. Formal parameter of the given method is the name of new search which together with generated automatically unique identifier, is passed in the designer, the second important object - [query]. We shall result also his{its} code:

function query (name, id)

{

// Properties

this.query_name = name // the Name of search

this.query_id = id // the Unique identifier of search

this.query = new Array (); // Enters a file of objects (criteria of search)

// Methods

this.query_size = query_size // Returns quantity{amount} of criteria in search

this.ini_criterion = ini_criterion; // Carries out obvious input of new criterion

this.add_criterion = add_criterion; // Adds new criterion from the form

this.del_criterion = del_criterion; // Deletes criterion

}

So, the given designer enters new search in a file of searches, which is characterized by a name (the set user and, generally speaking, not necessarily unique) and the unique identifier of search which geniriruetsja automatically a method of object [array_of_query]. It is necessary to note, that objects [query] cannot be entered in the obvious way., and a unique correct way of input of new search - use of a method add_query.

Thus, after realization of all steps described above, in a file of searches always it is possible to enter search which will have a name, the unique identifier, and to include, at this stage, zero quantity{amount} of criteria of search.

Before consideration of the third, most important object of a client part - criterion of search [criterion], it is necessary to give additional explanatories. The matter is that the criterion of search as we shall see, is characterized rather by a plenty of properties. Moreover, the designer of this object, as against two previous, cannot be universal enough, and has binding to the requirements showed by concrete information system.

On the other hand, all properties of criterion of search, except for his{its} name and value, are as a matter of fact - serving (really, the program which will analyze the information transmitted by a browser, it it is enough to pass only a name of a field of the form and his{its} value). But that fact, that these properties, from the formal point of view, are minor, absolutely reduces their importance.

It is necessary to understand how we shall receive the information on properties of criterion of search also. The unique information which to us was required earlier, was a name of search and a source of reception of this information is obvious is a user. But the user cannot set any properties of criterion of search, all properties of criterion should be distinguished and remembered imperceptibly for him{it}.

In our problem{task} the criterion of search is set through any object HTML of the form. From here it is clear, that the information on properties of criterion of search should be hidden in this object which will act main as the supplier of the information on properties of criterion. Such approach will allow to reach{achieve} required - raspoznovanie properties of criteria of search will automatically pass and is imperceptible for the user.

The concrete way of the decision of this problem{task} will be shown below for now we shall result the formal description (designer) of the third object - criterion of search [criterion]:

function criterion (obj, row)

{

this.name=obj.name; // the Name of object (for a CGI-script)

this.title_name=obj.title_name; // the Name of object

this.value=obj.value; // Value of object

switch (obj.type) {// Type of object

case "text": {this.type = "text"; break}

case "radio": {

this.type = "radio";

this.id=obj.id; // For identification of the radio-button

this.title_value=obj.title_value;

break}

case "checkbox": {this.type = "checkbox"; this.title_value=obj.title_value; break;}

case "select-one": {

this.type = "select-one";

this.title_value=obj.options [obj.selectedIndex] .text;

this.index=index;

break}

case "select-multiple": {

this.value=obj.options [row] .value;

this.type = "select-multiple";

this.title_value=obj.options [row] .text;

this.index=obj.options [row] .index;

break}

case "textarea": {this.type = "textarea"; break}

}

this.service=obj.service; // Functional purpose{appointment} of object

this.modif = modif;

}

Once again we shall emphasize, that this designer is focused on realization only those requirements which have been described in the beginning of clause{article}. So for example, in him there is no component which can set relational attitudes{relations} between various criteria of search.

By this moment the description of three JavaScript objects with which the client part of information system will operate is carried out. It is quite enough these three objects for full realization of all declared requirements. We did not consider{examine} in detail purpose{appointment} of all methods of these objects as now it is important to formulate the general{common} approach, having lowered{omitted} minor details. On the other hand, the quantity{amount} of these methods is completely not great, their purpose{appointment} is in most cases obvious, and program realization is extremely simple.

2. A mode of the HTML-form

At construction of the advanced system of formation of searches to a DB there is a necessity of various processing of HTML-forms. The most widespread problem{task} as we already know, will be a problem{task} of storing new kriteriv search, and initialization before the entered criteria. However this problem{task} not unique.

Even remaining within the framework of that production of a problem{task} which has been determined above, there is, for example, a problem{task} of switching between various searches which can simultaneously be formed in system. For example, at formation of criteria of search we can use the form containing object such as select-multiple (). On the other hand, the same object select-multiple can be used in the form which will deduce{remove} the list of all searches available at present. It is obvious, that objects of such forms, should be processed on miscellaneous. In the first case, it is necessary to remember new criterion of search, in the second case, to make the selected search current.

The most obvious and simple decision of this problem consists in introduction of a variable which will define{determine} a mode (a way of processing) forms. Then the situation described above, can be resolved{allowed}, for example, as follows:

<form... rezim = "1"> // for the form containing criteria of search

<form... rezim = "2"> // for the form in which is deduced the list of searches

In function which will be engaged in processing of forms, it is enough to switch on the following code:

function process_of_form (obj)

{

...

if (stack.kol ()! = 0) {// we Check presence though one search

// We find out a mode of the form

switch (obj.rezim) {

case "1": {rezim_1 (obj); break} // Function of processing for forms with criteria of search

case "2": {rezim_2 (obj); break} // Function of processing for the form of the list of searches

default: {break}

} // end switch

} // end if

...

}

The variable which is passed the given function as parameter of function, specifies the processable form, and after finding-out of a mode of processing of this form, corresponding function is caused. Contents of fields of forms in which the mode of processing is not registered, are simply ignored.

3. Accommodation of properties of criterion of search in objects of the HTML-form

Let's consider now in more detail such form which contains the objects directly participating in formation of criteria of search to a DB. Us properties which are necessary for defining{determining} in objects of such form and which we have earlier named serving will interest. Before to result contents of one of such objects, we shall remind, what exactly the object of the form represents itself as formal parameter for the designer criterion of search. So, contents of object of the form <input type = "text"> look as follows:

It is the most simple object of the form, and purpose{appointment} of the majority of variables which are registered in tege, are standard. Explanatories deserve only two properties which have been entered by us in addition: title_name and service. Property (variable) title_name is responsible for the name of a field of input and is used during viewing criteria of the current search.

The variable service sets functional purpose{appointment} of object. Really, in information system it can be demanded and functional division of criteria. In particular, input of the service information which defines{determines}, for example, a way of a conclusion inormacii can be demanded, but does not influence in any way contents of the search to a DB. Such the service information should be separated from criteria of search, and be deduced{removed} separately at viewing contents of search. Setting various values of a variable service we shall solve this problem{task}.

Let's consider now more complex{difficult} object of the form <input type = "radio">:

<input type = "radio" title_name = " the Radio-button 1 "

name = "p1_r1" service = "0" id = "p1_r1_1" title_value = " the Choice 1 "...>

Besides already considered, his{its} contents include additional variables: id and title_value. The variable id is necessary for unique identification of the buttons belonging to one selector group since for all buttons belonging to such group, value of a variable name should be identical. The name of the concrete selector button is stored{kept} in a variable title_value (as against title_name which sets the general{common} name of group of selector buttons) which besides is required at viewing the information.

4. Algorithms for storing criteria of search and initialization of objects of the form.

For presentation of advantages which are given with the approach described above, we shall show two base algorithms which can be used in similar siteme. External simplicity of these algorithms is based on internal reasonableness of all system.

First of these algorithms, is engaged in processing of text fields of those forms which contain criteria of search:

function do_text (current, obj)

{

// We determine quantity{amount} of criteria in the current search

var kol=current.crit_kol ()

var flag=0, i=0;

while (i <kol ** flag == 0) {

if (obj.name == current.query [i] .name) {

if (obj.value == " ") current.del (current.query [i] .name)

else current.query [i] .modif (obj.value)

flag=1

}

else i ++;

}

if (flag == 0 ** obj.value! = " ") current.add (obj)

}

As formal parameters in function it is passed two variables: current and obj. The variable current this simply reduced name of object the current search, also can be determined as follows:

current=stack.array_of_query [stack.index_query (UK)],

Where UK - some global variable which value is the unique identifier of the current search. Value of this variable is defined{determined} at the moment of processing the form which deduces the list of searches, and in which as we already know, a variable rezim matters 2. The variable obj, as well as in function process_of_form, specifies the processable form.

The algorithm of initialization, for example, fields checkbox also is extremely simple:

function ini_checkbox (current, obj)

{

var kol=current.crit_kol ()

var flag=0, i=0;

while (i <kol ** flag == 0) {

if (obj.name == current.query [i] .name) {obj.checked=true; flag=1}

else i ++;

}

5. Formation of the form for sending on the server

Last important question which needed to be considered, concerns creation of the form for sending on the server. Here there are two moments to which it is necessary to pay attention.

First, the form which will be sent on the server (i.e. the form to which we shall apply a method submit () and which objects will be processed by a CGI-script) should be created in a new copy of a browser. Such podokhod allows us to provide independent formation and performance of any number of searches. Therefore before creation of the form, it is necessary to apply a method open () which will create a new copy of a browser.

Second, objects of the form sent on the server should consist only of two fields: a name of a variable (name) and its{her} value (value). Recording in the form, is made dynamically, in a cycle by all criteria of search, and, for example for a name of criterion of search, looks as follows:

doc.writeln (" " +stack.array_of_query [stack.index_query (UK)] .query [i] .name + ""),

Where i - a variable of a cycle by all criteria of the current search.

The conclusion

In the present{true} job we have considered base principles which can underlie construction of a client part zaprosnoj to a database to system, on the basis of a WEB-browser. However a number{line} of the important questions has remained outside the given job. So for example, in the given job it was meant, that each criterion of search is defined{determined} only by one object of the form. Within the framework of a problem{task} which has been determined in the beginning of job, such assumption is correct. However this restriction reduces opportunities of real system. For example, there are situations when one criterion of search can be set by several objects, and located in different forms. It can arise, in particular, at a choice of criteria of search from directories. Also the question on an opportunity of change of relational attitudes{relations} between various parts of search has been lowered{omitted}. Therefore applying the approach considered above, it is necessary to consider closely{attentively} and those requirements which are showed by real system