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. Beside HTML, database-driven dynamic site requires knowledge of SQL and one of such languages as PHP, ASP/C# or JSP/Java providing ODBC or JDBC database connection. Knowledge and usage of several languages is serious headache, not only for separate entrepreneur but small companies.

Article explains new approach based on the features of Smans server. Under such approach, to create database, it is enough to know only HTML. This essentially simplifies creation of Web site and related database. 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.

Introducing Smans data server

First of all, Smans is a Web content management system (CMS) focused on small mobile devices, DPA and telephones. Smans server possesses the administration tools, quite sufficient to support the multi-user hosting for users of cell phones. Managing Smans HTML forms, it is only a part of Smans server features.

Below, I'll briefly guide you as you set up Smans server version 1.9, which actually is dynamic Web application or a set of Java servlets. So before, you need to install Web application server supporting Java Servlet 2.3 and JSP 1.2. It may be Tomcat, JBoss, WebLogic, WebSphere, or any other (http://resources.coreservlets.com/jsp-servers.html). I hope you had installed or can install any application server without me.

Smans data server is distributed as a Web application example, wapp, packed in ZIP file, smans-ds.zip, which may be downloaded from Internet, http://smans.sourceforge.net. Most important inside of wapp is WEB-INF directory, necessary for any Java Web application:

wapp
...
WEB-INF
web.xml
lib
savz.jar
smans-ds.jar
activation.jar
mail.jar
smans
sys
account.sdb
catalogue.sdb
data

The web.xml is a Web application deployment descriptor. You as administrator can change some web.xml parameters in the future, first of all email account. The library directory (WEB-INF/lib) contains JAR files. The smans-ds.jar file is library of Java classes including servlets, which directly provide the work of Smans server. The savz.jar file is a class set of a separate Sav Zigzag database system. This DBMS is featured by flexible structure, which in turn influences on the Smans server features, namely dependence of a database structure on the structure of HTML form. The activation.jar and mail.jar are necessary only for Web container like Tomcat. Usually Web application servers contains these email libraries.

Important and obligatory for Smans are WEB-INF/smans/sys/account.sdb and WEB-INF/smans/sys/catalogue.sdb files. The account.sdb keeps information about users and their accounts. Another catalogue.sdb file keeps catalogue in form of data tree, which structure usually is coincident to file structure. User by means of Web browser can navigate through the catalogue and then pass to concrete file. To keep file hidden for Web browser, you can create it inside of WEB-INF/smans/data/. All deployed (installed) wapp files, except for WEB-INF/lib and WEB-INF/web.xml, make up an example of Smans data, which helps you to understand the work of Smans server.

To deploy any Web application, you need to know features of each application server. Let's consider Tomcat. Even this server (container) has several ways. A simple variant of Smans server deployment is copying smans-ds.zip/wapp directory in <tomcat>/webapps. To start Tomcat you may use startup.bat in <tomcat>/bin directory. Smans server will start automatically. Then you can address to wapp application from a Web browser through http://localhost:8080/wapp/servlet/login and login as user with test name and test password.

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

A:
B:
C: c1 c2
D: d1 d2

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

Date:
Name:
Phone:
Company:
Product Type:
Product Name:
Quantity:

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) {
...
}
}
%>

My task was to show, how you can quickly and easily develop a dynamic Web site without knowledge of SQL and not being the expert of DBMS. Considered tools are quite enough to design the big branchy dialogue, when each previous calling HTML form forwards parameters to JSP/PHP/ASP page, which may contains a next calling HTML form. The example, described in this section, is realized with Register.html, Login.html, and News.jsp files inside of hforms directory of free and open source Smans server. It is important to remember, that hidden fields inside of HTML forms cannot be really hidden from the user. Nevertheless, Smans data are quite protected. Tables are created and used only from those HTML pages which are located in one Web application with recall and record servlets.