УДК 004.424.3

 

К.т.н. А.Ю. МЕЛИХОВ, А.В. БОРИСОВ-ФЕДОСОВ

Югорский государственный университет

К ВОПРОСУ ПРОЕКТИРОВАНИЯ ШАБЛОНА ВЗАИМОДЕЙСТВИЯ С РЕЛЯЦИОННОЙ БД ПОСРЕДСТВОМ WEB-ИНТЕРФЕЙСА

 

Описывается реализация одного из способов взаимодействия пользователя с данными, хранящимися в реляционной БД, посредством Web-интерфейса. Типовое решение представлено в виде шаблона (паттерна) проектирования с использованием объектно-ориентированной методологии.

Ключевые слова: организация доступа к БД, Web-интерфейс, паттерны проектирования.

 

In this paper an approach to relational database access by Web-based user interface is proposed. The solution is presented as a design pattern using object-oriented methodology.

Keywords: database access, Web-based interface, design pattern.

 

ПОСТАНОВКА ЗАДАЧИ

В настоящее время одно из доминирующих направлений развития информационных технологий состоит в создании и эксплуатации распределенных информационных систем, обеспечивающих удаленный доступ к базе данных (БД) посредством Web-интерфейса. Изначально системы данного класса преимущественно использовались в сети Интернет для получения информации от удаленного Web-сервера по HTTP-протоколу. Однако современные тенденции развития не только Internet-технологий, но и корпоративных (Intranet) информационных систем все чаще и чаще предполагают использование Web-интерфейса для обеспечения доступа к информационным ресурсам компании. При этом требуемая функциональность обеспечивается посредством создания и внедрения специализированных Web-сервисов. [1]

Подпись:  
Рисунок 1 – Пример стандартного корпоративного интерфейса
Создание и поддержание единого информационного пространства в корпоративных системах обеспечивается за счет использования единообразных для всей организации соглашений по представлению и хранению информации в единой (в общем случае распределенной) базе данных. Однако в настоящий момент процесс внесения и редактирования записей БД с помощью Web-интерфейса в большинстве случаев несовершенен и осуществляется посредством заполнения соответствующих полей html-формы (рисунок 1). Такой метод нарушает привычное представление пользователя о данных и их взаимосвязях, поскольку не соответствует «табличной» форме хранения информации в реляционной БД. Если задача представления данных, полученных из БД, в виде таблицы на html-форме является тривиальной, то решение задачи редактирования средствами Web-интерфейса данных, представленных в виде таблицы, с сохранением результатов в БД, требует определенных усилий, поскольку реализация современных языков сценариев (PHP, JavaScript, ASP.NET, Python, Perl) такую возможность не предусматривает [2].

Имеющийся корпоративный интерфейс (Рисунок 1) не является оптимальным для ведения крупных БД, и не обеспечивает достаточный уровень эргономики, как в примере на рисунке 2, который в значительной мере упрощает заполнение и ведение БД.

Вопросам проектирования и реализации корпоративных информационных систем в настоящее время посвящено значительное количество работ [3,4] и, более того, активно внедряются и используются различного рода платформы (ERP-системы, инструментальные среды разработки (IDE), системы управления содержимым (CMS) и т.д.), которые позволяют в рамках единой программно-алгоритмической среды реализовать специфические для заданной предметной области требования. В этой связи, в большинстве случаев, задача состоит не в создании информационной системы в целом или ее часть с «чистого листа», а в отыскании и адаптации готовых решений, эффективность которых неоднократно проверена на практике. Такие программно-алгоритмические решения, получив название шаблонов (паттернов) проектирования, представляют собой программные модули и включают набор классов, взаимодействующих друг с другом для достижения поставленной цели [5]. Описанию паттерна, обеспечивающего удобный доступ пользователей к данным, хранящимся в реляционной БД посредством Web-интерфейса, посвящена настоящая статья.

Подпись:  Рисунок 2 – Пример наиболее эргономичного и интуитивно понятного интерфейса

ОПИСАНИЕ РЕАЛИЗАЦИИ

         Каждое приложение для взаимодействия с БД должно выполнить ряд стандартных операций: (i) создание соединения с сервером БД; (ii) выбор БД; (iii) выполнение запросов к БД; (iv) обработка результатов выполнения запросов; (v) завершение соединения с сервером БД.

         В большинстве случаев для представления результата, полученного при обращении к БД, в виде таблицы достаточно включить в метод класса, отвечающего за визуализацию данных, цикл, фрагмент листинга которого на языке высокого уровня PHP приведен на рисунке 1 [6].

 


public function PrintResult ($result) {

// $result – переменная с результатом выполнения запроса к БД

….

while ($rows = mysql_feth_array ($result)) // Возврат очередной строки из набора данных в виде массива, проиндексированного именами полей таблицы (для БД MySQL®)

{

    echo "<TR>"; // Тэг очередной строки таблицы

foreach ($rows as $row){ // Возврат элемента массива  

    echo "<TD>, $row </TD>"; // Вывод очередного столбца таблицы на html-форму

}}

echo "</TR>";

//… продолжение тела функции PrintResult

}

Рисунок 3 – Фрагмент листинга, представляющего результаты обращения к БД, в виде таблицы на html-форме

 

         Анализ приведенного на рисунке 3 листинга показывает, что задача представления данных, полученных из БД, в виде таблицы на html-форме является тривиальной. Однако, для редактирования средствами Web-интерфейса данных, представленных в виде таблицы, с сохранением результатов в БД, потребуются дополнительные усилия.

Одной из проблем табличного редактирования информации является сложность корректного предоставления изменяемых данных для дальнейшего формирования строки запроса. Проблема состоит в том, что необходимо формировать запросы к БД для полей, количество и имена которых заранее неизвестны. Для формирования запросов, удовлетворяющих синтаксису языка SQL, необходимо выбрать наиболее оптимальную форму представления редактируемых данных.

Для корректного представления изменяемых данных можно воспользоваться средствами языка JavaScript. В этом случае каждой ячейке таблицы, созданной в результате обращения к БД, присваивается идентификационный номер, состоящий из названия поля БД и порядкового номера, соответствующего номеру строки в которой расположена данная ячейка. Корректировка информации осуществляется средствами языка JavaScript, предназначенными для динамического редактирования html-кода, и, включающими в свой состав: метод для внедрения кода в страницу (innerHTML); метод для обращения к элементам страницы (getElementById): body, td, table, div и т.д. Однако сложность использования указанных средств JavaScript, а также избыточность получаемого при этом кода затрудняют его широкое применение [7].

Более простое решение задачи, обсуждаемой в настоящей статье, состоит в использовании элементов формы (текстовые поля, списки, чекбоксы, командные кнопки и т.д.), которые помещаются в ячейки таблицы (рисунок 4) в соответствии с аргументами метода, отвечающего за ее формирование. Для этого создадим два класса «Взаимодействие с БД» и «Формирование интерфейса», которые составят проектируемый паттерн (рисунок 5).

Подпись:  
Рисунок 4 – Пример расположения элементов формы в ячейках таблицы:
1 – Ячейка таблицы; 2 – Список; 3 – Чекбокс; 4 – Текстовое поле 
Для обеспечения необходимой безопасности и гибкости паттерна класс «Взаимодействие с БД» содержит три собственных (privat) атрибута (Хост-узел, Имя пользователя, Пароль) и один общедоступный (public) (Идентификатор соединения с БД). Класс «Формирование интерфейса» является подклассом класса «Взаимодействие с БД» и предназначен для создания табличного интерфейса пользователя (метод «сформировать интерфейс») и формирования строки запроса. Метод «Определение оптимального размера строки» предназначен для вычисления оптимального размера текстового поля, для того чтобы все данные помещались в ячейку целиком, но при этом размер таблицы оставался компактным.

 

Рисунок 5 – Диаграмма классов

 

Ниже на рисунке 6 приведена блок-схема алгоритма метода «сформировать интерфейс» класса «Формирование интерфейса», отвечающего за формирование списков в пользовательском интерфейсе. Аргументами данного метода выступают: название таблицы «table_name» строкового типа; запрос «query» строкового типа (при ненулевом значении «query» формируется пользовательский интерфейс со значениями результата выполнения запроса, в противном случае, формирование пользовательского интерфейса не выполняется); подзапрос «sub_query», представляющий собой ассоциативный массив строк (при ненулевом значении «sub_query» в пользовательском интерфейсе формируется поле «список»).

 

Рисунок 6 – Блок-схема метода «сформировать интерфейс»

Из блок-схемы метода «сформировать интерфейс» (рисунок 6) можно видеть, что вначале вызывается метод «выполнить запрос» (query) (А.1), результат которого присваивается переменной result. В цикле (A.2) построчно извлекается результат выполнения запроса к БД, формируя из элементов строки ассоциативный массив. Затем в цикле foreach (A.3) из созданного ассоциативного массива извлекаются ключи (названия, к которым привязаны значения массива). Проверяется существование подзапросов, передаваемых методу в виде аргумента (А.4). Если подзапросы отсутствуют, то блок кода (А.5-А.13), отвечающий за формирование списков, не выполняется.

При наличии подзапросов в цикле foreach (А.5) извлекаются ключи и значения элементов ассоциативного массива, хранящего в виде ключей название полей извлеченных из таблицы БД, а в виде значений - строки с подзапросами. Если извлеченный на предыдущем шаге ключ совпадает с названием поля, которое заполняется на данной итерации (A.6), то формируется список (А.7-А.13), в противном случае осуществляется переход к следующей итерации цикла (А.5). На следующем шаге (А.7) создается столбец таблицы и в нем открывается тег для формирования списка. Затем вызывается метод «выполнить запрос» (А.8) для подзапроса, соответствующего ключу, совпавшему с названием поля (А.6). Результат выполнения метода «выполнить запрос» записывается в переменную sub_result.

В цикле (A.9) построчно извлекается результат обращения подзапроса к БД. И наконец, при условии совпадения элемента, полученного из основного запроса, и элемента, полученного из подзапроса (A.10), формируется строка, отвечающая за значения списка по умолчанию (A.11). Формирование списка завершается выводом тегов (А.12).

Листинг кода описанного выше метода содержит 124 строки на языке PHP.

Интеграция описанного выше паттерна в программный модуль, отвечающий за графический интерфейс, позволяет пользователю редактировать данные, представленные на html-форме в виде таблицы, с сохранением внесенных изменений в БД. Сохранение может осуществляться автоматически или после нажатия командной кнопки.

Пример реализации такого интерфейса приведен на рисунке 7. Для изменения данных в столбце «Логин» в соответствующей ячейке таблицы был создан выпадающий список. Для изменения данных в столбцах «телефон», «e-mail», «IСQ» использовались текстовые поля. В двух столбцах в правой части таблицы для каждой записи расположены командные кнопки:  для сохранения изменений в БД, проделанных в соответствующей строке таблицы;  для удаления записи из таблицы на html-форме (с обновлением соответствующей таблицы БД);  для добавления новой записи к таблице на html-форме с автоматическим созданием новой записи в соответствующей таблице БД.

 

Рисунок 7 – Пример программного интерфейса

 

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

 

ЗАКЛЮЧЕНИЕ

         В настоящее время взаимодействие пользователя с информацией, хранящейся в БД, в большинстве случаев осуществляется посредством Web-интерфейса. Однако для представления данных на html-форме в виде таблицы с возможностью редактирования отдельных записей и сохранения результатов в БД требуются дополнительные усилия, поскольку реализация современных языков сценариев такую возможность не предусматривает. В статье рассматривался один из возможных способов решения данной задачи с использованием элементов формы (текстовые поля, списки, чекбоксы, командные кнопки и т.д.), которые помещаются в ячейки таблицы в соответствии с аргументами метода, отвечающего за ее формирование. Решение представлено в виде паттерна, состоящего из двух классов, взаимодействующих друг с другом посредством «обобщения» (в терминологии UML). Реализация описанного паттерна в проектируемой информационной системе на языке PHP потребовала 375 строк кода. При этом обеспечение аналогичной функциональности с помощью средств динамического редактирования html-кода языка JavaScript потребовало более 550 строк кода, что подчеркивает эффективность предложенного решения.

 

ЛИТЕРАТУРА

1.     Allam A., Tost A. Developing a Web service using an industry-specific messaging standard. [Электронный ресурс] // IBM [сайт]. [2007]. URL: http://www.ibm.com/developerworks/library/ws-soa-messagingstandard/ (дата обращения 25.12.2009).

2.     Арушанян О.Б., Богомолов Н.А., Ковалев А.Д. Архитектура клиентского программного обеспечения для web-приложений, ориентированных на представление данных. // Вычислительные методы и программирование: новые вычислительные технологии 2004. № 2. С. 24-37.

3.     Войтиков К.Ю., Змеев О.А., Моисеев А.Н. Некоторые практически моменты разработки CASE средства, автоматизации процесса проектирования информационных систем. // Всерос. конф. «Новые технологии и комплексные решения: наука, образование, производство» Тезисы докладов. – Анжеро-Судженск: КемГУ 2001, Часть VI. С. 10-12.

4.     Сапегин А. Информационные технологии и средства анализа и проектирования корпоративных информационных систем. [Электронный ресурс] // Библиотека on-line. [сайт]. [2006]. URL: http://www.citforum.ru/seminars/cis99/sap.shtml (дата обращения 25.12.2009).

5.     Хоп Г., Вульф Б. Шаблоны интеграции корпоративных приложений. Проектирование, создание и развертывание решений, основанных на обмене сообщений.: «И.Д. Вильямс», Москва 2007. 672 с.

6.     Хольцнер С. PHP в примерах. Пер. с англ. – М.: OOO «Бином-Пресс», 2007. 352 с.

7.     Гудман Д., Моррисон М. JavaScript. Библия пользователя : ИД Вильямс, Москва 2006. 1184 с.

 

Мелихов Артём Юрьевич

Югорский государственный университет

к.т.н., доцент кафедры автоматизированных систем обработки информации и управления института прикладной математики информатики и управления

628012, Россия, Тюменская обл., Ханты-Мансийский автономный округ – Югра, г. Ханты-Мансийск, ул. Чехова, 16

Тел. 8(34673) 57634

E-mail: science-orel@mail.ru

 

Борисов-Федосов Антон Валерьевич

Югорский государственный университет

студент института прикладной математики информатики и управления

628012, Россия, Тюменская обл., Ханты-Мансийский автономный округ – Югра, г. Ханты-Мансийск, ул. Чехова, 16

Тел. 8-922-408-11-22

E-mail: null.htp@gmail.com