Getting Started with Smans HTML form

Sergey Savushkin, 2008

This article is aimed at beginner and intermediate Web developers looking to make the leap into database support of their Web site. Article suggests new declarative language based on HTML-forms, which is used for development of database interface. As result, developer can limit herself by only HTML without writing correspondent scripts in SQL and one of the data processing languages like PHP, ASP/C# or JSP/Java. This essentially simplifies creation of dynamic Web site.

Article explains original approach based on the features of Smans server. Under such approach, to create database, it is enough to know only HTML. For example, to register new users, all that necessary from Web developer is to create HTML form. Correspondent table will be created or adjusted automatically during user registration. Name of each table field will be the same as name of correspondent field in HTML form.

HTML forms can manage not only the creation of a database, but also execution of requests to database. In the case of execution the following acts have a place: the control of the entered data, reception of the certain parameters from database, and transfer their to necessary Web resources. All these steps are set up in the ordinary HTML form with special managing fields, usually hidden.

Creating a database by means of HTML forms

As we know, HTML form is a block of HTML page allowing to enter data from the Web browser on a local or remote Web server. The form block is marked with tags <form ...> and </form>. Fields inside of HTML forms may have different types, for example a list or a text field. The Listing 1 specifies code of a form example and Fig. 1 shows view of that form in Web browser.

Listing 1. HTML form code

<form method="post" action="...">
A:  <input type="text" name="A" size="10" value="a"/><br />
B:  <select name="B" multiple="multiple">
        <option value="b1" selected="selected">b1</option>
        <option value="b2">b2</option>
    </select><br />
C:  <input type="radio" name="C" checked="checked" value="c1" />c1
    <input type="radio" name="C" value="c2" />c2<br />
D:  <input type="checkbox" name="D" checked="checked" value="d1" />d1
    <input type="checkbox" name="D" value="d2" />d2<br />
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset" />
</form>

Fig 1. HTML form view

The HTML form is used usually to enter only one record in the table of a database. Each name attribute defines the name of the respective form field and input record. Simultaneously, for Smans server, the same name is considered as a name of a column in the corresponding table. The additional information, usually invisible to the user, is transmitted to the Smans server due to managing fields of HTML form. Most important managing field is $Table. The action attribute in the form descriptor sets up /servlet/record servlet name, receiving and processing the HTML form with operating fields. For example:

<form action="../servlet/record" method="post">
    <input type="hidden" name="$Table" value="Order" />
    ...
</form>

The $Table field designates a table formed in the database. Let's consider the example of the recording HTML form making Order table in Listing 2 and Fig. 2.

Listing 2. Code of recording HTML form

<form action="../servlet/record" method="post">
    <input type="hidden" name="$Table" value="Order" />
Date: <input type="text" name="Date" /><br />
Name: <input type="text" name="Name" /><br />
Phone: <input type="text" name="Phone" /><br />
Company: <input type="text" name="Company" /><br />
Product Type: <input type="text" name="Product Type" /><br />
Product Name: <input type="text" name="Product Name" /><br />
Quantity: <input type="text" name="Quantity" /><br />
    <input type="submit" value="Submit Data">
    <input type="reset" value="Reset Form">
</form>

Fig 2. View of recording HTML form

Each input record has to have primary key field(s). In this case, Order table will have Order key column. Because Order field is missing in HTML form, a value of Order primary key field is generated automatically by Smans server as number of table record (row) in increasing order. If Order table in a database still is not present, it will be created. In case the table already exists with other columns, the new columns will be added. As a result, the table will have at least the following list of columns:

Order 
Date 
Name 
Phone 
Company 
Product Type 
Product Name 
Quantity

For the event of successful record, you can easily set up the message or the subsequent actions by means of the $Forward field. For example:

<input type="hidden" name="$Forward" value="Confirm.html" />

All the managing fields sets up managing HTTP request parameters. In addition to the mentioned above, there are $PKey parameters. They are useful if the table has several primary key columns, when it is necessary to prevent the reoccurrence of several column values. Each $PKey parameter points to the name of conventional parameter (field) in the HTML form, for example:

<form action="../servlet/record" method="post">
    <input type="hidden" name="$Table" value="Product">
    <input type="hidden" name="$PKey" value="Product Type" />
    <input type="hidden" name="$PKey" value="Product Name" />
    <input type="text" name="Product Type" />
    <input type="text" name="Product Name" />
...

There are corresponding examples in the distribution kit of the Smans server. They are in a hforms directory. The simplest examples are realized in <wapp>/hforms/Order.html and <wapp>/hforms/Product.html HTML pages. Check up an example. The http://<domain>[/<application>]/hforms/Order.html is address of Order.html page from a Web browser. When you enter the record, the Smans server gives you a message, by default:

Data recorded. Thanks! 
Please return back and continue.

Dialogue scenario through HTML forms

It is a normal situation when the page image depends on certain input parameters processed through PHP, JSP or ASP. Such parameters can be type of a Web browser, human language, personal data of the user or his interests, etc. The part of parameters is defined from the initial user request. The part of parameters undertakes from cookies, kept in a client computer in the previous sessions. Other part is established during dialogue.

Dependencies of some parameters on the other are data that are easier to store separately in the database than alternately inside of operating scripts or programs having a lot of other directives. Importance of such approach is not only in plain presentation. The database system allows to find easily the necessary groups of parameters and dependences by inquiry. In addition, the developer has an opportunity easily to change values of parameters and their dependences, and therefore a particular scenario dialogue, not touching the relevant scripts or programs.

Let's consider a common situation involving a different resource provision to different users. The necessary dependences and a corresponding database can be generated during registration of the user. In my example, Listing 3, such resources are news. The $Table managing field specifies Username key field, beside the table. The user selects interesting news, which are in the ExpectedNews field. Dependence Username-ExpectedNews is kept in a database of schema Username(Password, ExpectedNews).

Listing 3. Recording HTML form. User registration.

<form name="form1" action="../servlet/record" method="post">
    <input type="hidden" name="$Table" value="Username" />
    <input type="hidden" name="$Forward" value="hforms/Login.html" />
Username: <input type="text" name="Username" /> <br/>
Password: <input type="password" name="Password" /> <br/>
Expected News: 
    <select name="ExpectedNews" multiple="multiple" size=5>
        <option value="Sport">Sport</option>
        <option value="HiTech">Hi Tech</option>
        <option value="Policy">Policy</option>
        <option value="Economy">Economy</option>
        <option value="Financies">Financies</option>
    </select> <br/>
<input type="submit" value="Register">
</form>

If registration is successful, next control is passed to the hforms/Login.html page by $Forward. This login page has managing recalling HTML form. Look at Listing 4. The value ../servlet/recall is Smans' servlet, processing the form fields. The $Param fields specify the parameters transferred to an Internet resource pointed in $Forward. The values of $Param parameters are selected from a database in accordance with dependencies: {input data} -> $Table -> {$Param, ...}.

Listing 4. Calling HTML form. User login.

<form name="form1" action="../servlet/recall" method="post">
    <input type="hidden" name="$Table" value="Username" />
    <input type="hidden" name="$Forward" value="hforms/News.jsp" />
    <input type="hidden" name="$Param" value="Username" />
    <input type="hidden" name="$Param" value="ExpectedNews" />
Username: <input type="text" name="Username" /><br/>
Password: <input type="password" name="Password" /><br/>
    <input type="submit" value="Login">
</form>

Logic of calling HTML form for each $Param can be seen in SQL as:

 SELECT $Param FROM $Table WHERE {input data}

Then all the found parameters will be transferred by $Forward address (URL), in my case to hforms/News.jsp, like hforms/News.jsp?Username=...&ExpectedNews=...&ExpectedNews=... . Beside JSP, any other resource could as value of $Forward, such as PHP server page, servlet, Perl script and so on. Possible fragment of JSP is figured in Listing 5.

Listing 5. JSP fragment. Server response.

<%
String username = request.getParameter("Username");
String enews[] = request.getParameterValues("ExpectedNews");
%>
Dear <%= username %>,<br/>
This simple demo is regarding the work with html form control.<br/>
<h1>Your Favorite News</h1>
<%
if (enews != null) { 
    for (int i = 0; i < enews.length; ++i) {
        ...
    }
}
%>

The example, described in this section, is realized with Register.html, Login.html, and News.jsp files within hforms directory of free and open source Smans server.

Conclusion