Практическое введение в HTML-формы Smans

Сергей Савушкин, 2008

Данная статья нацелена на Web-разработчиков начального и среднего уровня, желающих усилить уровень поддержки Web-сайта посредством базы данных. Для разработки интерфейса с базой данных предлагается новый декларативный язык основанный на HTML-формах. В результате разработчик может ограничить себя только HTML без написания соответствующих скриптов на SQL и одном из языков обработки данных, таких как PHP, ASP/C# или JSP/Java. Это существенно упрощает создание динамического Web-сайта.

HTML-формы могут управлять не только созданием базы данных, но и выполнением запросов к ней. В последнем случае осуществляется контроль введенных данных, получение из базы данных определенных параметров и передача их нужным Web-ресурсам. Все это задается в обычной HTML-форме с использованием специальных управляющих, обычно скрытых, полей.

Создание базы данных с помощью HTML-формы

Как известно, HTML-форма, это - блок HTML-страницы позволяющий вводить данные из Web-браузера на удаленный или локальный Web-сервер. Блок формы помечается тэгами <form...> и </form>. Поля внутри HTML-формы могут иметь разные типы, например список или текстовое поле. В листинге 1 показан пример описания формы, а на рис. 1 вид этой формы в Web-браузере.

Листинг 1. Код HTML-формы

<form method="post" action="...">
A:  <input type="text" name="A" size="10" /><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>

Рис. 1. Вид HTML-формы

HTML-форма обычно используется для ввода только одной записи в таблицу базы данных. Каждый атрибут name определяет имя соответствующего поля формы или вводимой записи. Одновременно, для сервера Smans, это же имя рассматривается как имя колонки в соответствующей таблице. Дополнительная информация, обычно невидимая для пользователя, передается серверу Smans благодаря управляющим полям HTML-формы. Наиболее важным из управляющих полей является $Table. Атрибут action в дескрипторе form задает имя Smans-сервлета /servlet/record, принимающего и обрабатывающего HTML-форму с управляющими полями. Например:

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

Поле $Table обозначает таблицу формируемую в базе данных. Рассмотрим пример записывающей управляющей HTML-формы, формирующий таблицу Order в листинге 2 и рис. 2.

Листинг 2. Код записывающей HTML-формы

<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>

Рис 2. Вид записывающей HTML-формы

Каждая входная запись должна иметь первичное ключевое поле(я). В рассматриваемом случае таблица Order будет иметь ключевое поле Order. Так как поле Order отсутствует в HTML-форме, значение первичного ключевого поля Order автоматически генерируется сервером Smans как номер записи (ряда) таблицы в увеличивающемся порядке. Если таблицы Order в базе данных еще нет, она будет создана. В случае, если таблица уже существует с другими колонками, к ней будут добавлены новые колонки, описываемые в форме. В результате таблица, как минимум, будет иметь следующий список колонок:

Order
Date
Name
Phone
Company
Product Type
Product Name
Quantity

Вы можете легко изменить выводимое сообщение или последующие действия в случае успешного ввода записи с помощью поля $Forward. Например:

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

Все управляющие поля можно называть также управляющими параметрами. Кроме перечисленных выше, используются параметры $PKey. Они полезны, если таблица имеет несколько первичных ключевых колонок, когда необходимо предотвратить повторное появление нескольких значений колонок. Каждый параметр $PKey указывает на имя обычного параметра (поля) в HTML-форме, например:

<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" />
...

В дистрибутиве сервера Smans есть соответствующие примеры, они находятся в директории hforms. Простейшие примеры реализованы на HTML-страницах wapp/hforms/Order.html и wapp/hforms/Product.html. Обратиться к странице из Web-браузера можно так: http://<domain>[/<application>]/hforms/Order.html. После ввода записи, сервер Smans выдаст некоторое сообщение, по умолчанию:

Data recorded. Thanks! 
Please return back and continue.

Сценарий диалога посредством HTML-формы

Весьма обычная ситуация, когда изображение страницы зависит от некоторых входных параметров, обрабатываемых посредством PHP, JSP или ASP. Такими параметрами могут быть тип Web-браузера, язык общения, личные данные пользователя или его интересы и т.д. Часть параметров определяется из запроса пользователя при его первоначальном обращении. Часть параметров берется из cookies, сохраненных в компьютере клиента от предыдущих сеансов. Другая часть устанавливается в процессе диалога.

Зависимости одних параметров от других, это - данные, которые проще хранить отдельно в базе данных, чем вперемежку с разного рода директивами внутри управляющих скриптов или программ. Важность такого подхода не только в большей наглядности. Система базы данных позволяет легко найти нужные группы параметров и зависимостей по запросу. Кроме того, разработчик получает возможность легко менять значения параметров и их зависимости, а значит и конкретный сценарий диалога, не трогая соответствующие скрипты или программы.

Рассмотрим распространенную ситуацию, связанную с предоставлением разных ресурсов разным пользователям. Нужные зависимости и соответствующую базу данных можно сформировать в процессе регистрации пользователя. В моем примере, в листинге 3, такими ресурсами являются новости. Управляющее поле $Table, кроме задания таблицы, указывает на ключевое поле Username. Пользователь сам выбирает, какие новости его интересуют в поле ExpectedNews. Зависимость Username-ExpectedNews сохраняется в базе данных со схемой Username(Password,ExpectedNews).

Листинг 3. Записывающая HTML-форма. Регистрация пользователя.

<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>

При успешной регистрации, управление передается HTML-странице hforms/Login.html посредством $Forward. В этой странице помещена вызывающая управляющая HTML-форма, необходимая для входа (login) пользователя в систему, смотрите Листинг 4. Значение ../servlet/recall есть Smans-сервлет для обработки вызывающей формы. Поля $Param указывают параметры, передаваемые Internet-ресурсу поля $Forward. Значения этих параметров выбираются из базы данных в соответствии с зависимостями: {входные данные} -> $Table -> {$Param, ...}.

Листинг 4. Вызывающая HTML-форма. Логин пользователя.

<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>

Логика вызывающей HTML-формы для каждого $Param выглядеть в SQL так:

SELECT $Param FROM $Table WHERE {input data}

Затем все найденные параметры будут переданы по $Forward адресу (URL), в моем случае к hforms/News.jsp, подобно hforms/News.jsp?Username=...&ExpectedNews=...&ExpectedNews=.... Кроме JSP, любой другой ресурс мог быть на этом месте, например серверная страница PHP, сервлет, Perl скрипт и т.д.. Возможный JSP фрагмет изображен на Рис.5.

Рис. 5. JSP фрагмент. Отклик сервера.

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

Описанный выше пример реализован в файлах Register.html, Login.html, и News.jsp в директории hforms сервера Smans, распространяемого бесплатно и с открытым кодом.

Заключение

Моя задача была показать, как можно просто и быстро разработать динамический Web-сайт не зная SQL и не будучи специалистом по СУБД. Рассмотренных Smans инструментов вполне достаточно, чтобы сконструировать большой разветвленный диалог, когда предыдущая вызывающая HTML-форма пересылает параметры к JSP/PHP/ASP странице, которая в свою очередь может содержать следующую вызывающую HTML-форму и т.д. Важно помнить, что скрытые (hidden) поля внутри HTML-форм нельзя скрыть от пользователя. Тем не менее, Smans-данные вполне защищены. Таблицы создаются и используются только с тех HTML-страниц, которые находятся в одном Web-приложении работающем с сервером Smans.