CC BY
87
Список литературы: 1. ГрибунинВ.Г., ОковИ.Н., ТуринцевИ.В. Цифровая стеганография. М.: Солон-Пресс, 2002. 272 с. 2. КонаховичГ.Ф., Пузыренко А.Ю. Компьютерная стеганография. Теория и практика. К.: МК-Пресс, 2006. 288с. 3. ТарасовД.О., Мельник А.С., ГолобородькоМ.М. Класифікація та аналіз безкоштовних програмних засобів стеганографії // Інформаційні системи та мережі. Вісник НУ “Львівська політехніка” 2010. № 673.C. 365-374. 4. БаранникВ.В. Метод формування функціонала стеганографічного кодування, стійкого до стегано-атак / В.В. Бараннік, А.Е. Бекіров //АСУ та прилади автоматики. 2013. Вип. 165. С. 34 - 43.
Поступила в редколлегию 16.09.2014
Баранник Дмитрий Владимирович, студент первого курса факультета КИУ ХНУРЭ. Научные интересы: обработка и передача информации. Адрес: Украина, 61023, Харьков, ул.
Ленина, 14.
Бекиров Али Энверович, аспирант ХНУРЭ. Научные интересы: обработка и передача
информации. Адрес: Украина, 61023, Харьков, ул. Ленина, 14.
УДК 681.518
В.М. ЛЕВЫКИН, А.А. ВОРОНИН, И.В. ГАРЯЧЕВСКАЯ
РАЗРАБОТКА МОДЕЛИ КОНСТРУКТОРА WEB ФОРМ “ALVOR
FORM BUILDER” И ЕЁ РЕАЛИЗАЦИЯ
Описывается разработанный сервис - конструктор web-форм, который позволяет создавать, хранить и редактировать разработанные пользователями web-формы, а также скачивать файлы разметки и обработчиков.
Введение
В разработке web-сайтов, как правило, присутствует этап создания web-форм. Web-форма — это совокупность элементов, позволяющих вводить и редактировать информацию на web-страницах для последующей передачи и обработки php скриптом. Использование конструктора форм позволяет автоматизировать процесс создания web-форм, значительно ускорять и упрощать процесс разработки сайтов.
С помощью конструкторов web-форм владельцы и пользователи сайтов могут создавать такие web-формы: обратной связи, заявок, голосования, подписки, тестирования, оформления заказов на страницах интернет-магазинов и т.д.
Конструктор web-форм должен предоставлять разработчику возможность добавлять элементы на рабочую область, редактировать их свойства и стили и в конечном итоге предоставлять такие исходные файлы как: html, css, php и js.
Анализ предметной области
В настоящее время существует большое количество конструкторов web-форм, которые можно разделить на онлайн сервисы и инсталляционные программы. Из рассмотренных онлайн сервисов можно выделить несколько, наиболее широко известных в интернете, к примеру, MyTaskHelper (http://mytaskhelper.ru) и FormDesigner (http://formdesigner.ru). Оба этих сервиса позволяют создавать web-формы, но они имеют ряд недостатков, кроме того, они платные и оплата взимается за каждую разработанную пользователем web-форму, точнее за ее хранение в базе данных. При этом форма хранится на стороннем сервере, а пользователь получает лишь ссылку на нее. Возникает проблема защиты данных, полученных при обработке полей разработанной web-формы.
Существуют программные средства, лишенные этих недостатков, например, HTMLform (http://htmlform.com/form_builder) или Form Builder (http://csstemplateheaven.com/tools/ form_builder). Однако данные сервисы генерируют web-форму в виде набора файлов с разметкой, стилями и обработчиками. Но в присланном архиве находятся некорректные файлы и папки, поэтому структура получается громоздкой и непонятной. На стороне разработчиков, предоставляемых подобные сервисы, информации о пользовательской web-форме после выдачи файлов не остается, и в случае необходимости внесения изменений в разработанную ранее web-форму ее придется создавать всю заново.
Из проведенного анализа можно сделать вывод, что конструктора, позволяющего разрабатывать и редактировать web-форму с генерацией обработчиков для нее, с понятным и
11
бесплатным интерфейсом, предоставляющего разработчику форм осуществить выбор способа её применения в качестве файлов разметки, стилей и обработчиков либо же только ссылку на форму, в настоящее время не существует.
Постановка задачи
Для обеспечения процессов разработки, редактирования, генерации различных web-форм необходимо разработать такой конструктор, который позволил бы разработчику из реализованных доступных элементов, создать свою web-форму. Разработанная web-форма и сгенерированные обработчики предоставляются пользователю как архив для скачивания файлов разметки, стиля и обработчиков.
В общем случаем, задачу разработки конструктора web-форм (K) представим моделью следующего вида:
K: I(E,U) ——^O(F,D), (1)
где I - входная информация, E - информация о элементах веб-форм, U - информация о пользователе, O - выходная информация, F - архив файлов, D - доступ к созданной форме (ссылка на форму на сервере).
Модель архива файлов представим выражением следующего вида:
F = {f 1,f 2,f3,f4}, (2)
где f1 - файлы html, f2 - файлы css, f3 - файлы js, f4 - файлы php.
Основными сущностями используемой базы данных являются такие:
DB = {e,s,r,u}, (3)
где e - элементы формы, s - стили, r - регулярные выражения, u - пользователи.
Для обеспечения редактирования, в разрабатываемый конструктор web-форм введём четыре программных модуля: модуль создания формы, модуль редактирования элементов, размещенных на пользовательской форме, модуль генерации файлов html, css, php и модуль архивации файлов.
Взаимодействие введённых модулей и пользователей при разработке web-сайтов представлено на рис. 1.
Рис. 1. Взаимодействие программных модулей и пользователей
12
Реализация модели (1) осуществляется следующим алгоритмом, представленным на рис.2.
Разработка базы данных
В конструкторе web-форм должна быть предоставлена возможность просмотра и редактирования ранее созданных форм. Для реализации персональной страницы разработчика, которая формируется в следующих таблицах «Личный кабинет», необходимо хранить информацию о разработчиках и их web-формах, за что отвечает несколько таблиц: users, forms, form_elements, form_styles, form_handlers, reg_expressions, pack_forms, которые описаны ниже. Таблица users содержит информацию о разработчиках. Таблица forms содержит информацию обо всех элементах, которые могут быть размещены на форме. Таблица form_elements содержит пять полей: номер, название, описание, открывающий тег, закрывающий тег (по умолчанию NULL). Таблица reg_expressions содержит информацию о регулярных выражениях для валидации значений полей: id, название регулярного выражения, описание с примером применения данного регулярного выражения, регулярное выражение, информация о пользователе, добавившем новое регулярное выражение (по умолчанию user_id = 1 (admin)). Данное поле зарезервировано для возможности добавления своих регулярных выражений пользователями сервиса с возможностью дальнейшего применения их к элементам своей формы.
В конструкторе форм реализованы, на данный момент, следующие регулярные выражения:
- для проверки на корректность (URL) всех полей формы такого типа:
/ [л \ x20-\ xFF] / ; (4)
- для проверки поля Email на корректность:
13
/ (\ S +) @ ([a-z0-9. -] +) / Is ;
(5)
- для проверки поля на заполнение его числами не больше чем 25 символов:
/Л[0-9] {1,25 } $/. (6)
Таблица Forms содержит: номер формы, информацию о пользователе, разрабатывающем данную форму, название формы и ее описание, id выбранного стиля, id обработчика формы, id атрибута кодировки формы, метод отправки данных формы (по умолчанию GET), дату создания формы (по умолчанию текущая дата).
Таблица Pack_forms - сборка элементов формы, содержит: номер формы, номер элемента формы и поле для метки (обязательность заполнения данного поля), индекс регулярного выражения.
Таблица Form_styles содержит информацию о стиле создаваемой формы: номер стиля, название, ссылка на файл css
Таблица form_handlers - обработчики форм. Содержит: номер обработчика, id пользователя, добавившего обработчик (по умолчанию user_id = 1 (admin)), название обработчика, описание, ссылку на файл-обработчик с расширением php.
Таблица Form_enctypes содержит: номер и атрибут формы. Атрибут формы определяет способ кодирования данных при их отправке на сервер.
В процессе проектирования базы данных была разработана её логическая и физическая модель. База данных состоит из 8 таблиц, ее физическая модель представлена на рис.3. База данных была реализована в СУБД MySQL.
Рис. 3. Физическая модель базы данных
Разработка web-приложения
Для реализации конструктора web-форм «Alvor Form Builder» необходимо выполнить следующие функции:
1. Добавление элементов web-форм из списка в рабочую область.
2. Изменение местоположения элементов на рабочей области.
3. Добавление регулярного выражения к определенному элементу.
14
4. Изменение стиля web-формы.
5. Сохранение информации о разработанных web-формах.
6. Генерация пользовательской web-формы из рабочей области.
Генерация пользовательской web-формы — это процесс программного формирования архива с набором файлов html, css, php, js. На рис. 4 представлена UML диаграмма сценариев формирования такого архива.
Рис.4. Диаграмма сценариев формирования архива Разработанный конструктор web-форм имеет удобный и понятный пользовательский интерфейс. На рис.5 представлен интерфейс конструктора форм в виде web-страниц.
Text field Password FieSd Radio button Checkbox Button
В разработке web-сайтов как правило присутствует этап создания web-форм. Web-форма это совокупность элементов позволяющих вводить и редактировать информацию на web-страницах для последующей передачи и обработки php скриптом. Использование конструктора форм позволяет автоматизировать процесс создания web-форм. значительно ускорить и упростить процесс разработки сайтов.
С помощью конструкторов web-форм владельцы и пользователи сайтов могут создать такие web-формы: обратной связи, заявок, голосования, подписки, тестирования, оформления заказов на страницах интернет-магазинов, и т.д.
Конструктор web-форм должен предоставлять разработчику возможность добавления элементов на рабочую область, редактировать их свойства и стили, и в конечном итоге, предоставлять такие исходные файлы как: html, css, php и fs.
Urf field
Emaif Held
Рис. 5. Интерфейс конструктора форм
В левой части конструктора отображен список реализованных на данный момент элементов форм (рис.6), которые пользователь может добавлять на свою форму.
15
Controls
Text field
Password Field
Radio button
Checkbox
Button
Uri field
Email field
Date field
Textarea
Select
Fite upload
Следует отметить, что на рис.6 изменилось меню, позволяющее только авторизированному пользователю возможность разрабатывать или редактировать формы.
Реализованная возможность редактирования элементов позволяет вносить корректировки, например, в такие элементы как checkbox radio и button, добавляя или удаляя количество пунктов, что даёт возможность пользователю включать скачанный код формы без доработок и ручного редактирования (рис.7).
Рис. 6. Элементы форм
File upload
Button
Submit
Рис. 7. Пример добавленных элементов на форме
После того, как пользователь разработал свою web-форму, все изменения будут сохранены, и она будет доступна на странице пользователя «Личный кабинет» представленный на рис.8.
Controls
Text field
Password Field
Radio button
Checkbox
Button
Uri field
Email field
Date field
Textarea
Select
File upload
Управление формами
Название формы Contact US [user form. . .]
Registration form fuser form... і TestfORM [User form. ..] ertuy [User form, , ,]
Создать форму
Рис. 8. Страница пользователя “Личный кабинет”
16
Пользователь, выбрав web-форму из представленного списка, может её предварительно просмотреть, отредактировать и скачать. Для предварительного просмотра полученной формы, перед ее скачиванием, необходимо перейти на пункт Preview, при этом в текущем окне браузера откроется модальное окно с сконструированной пользователем формой (рис.9).
Рис. 9. Предварительный просмотр формы
После того как пользователь убедился, что форма отвечает его требованиям в модальном окне предпросмотра, он нажимает на кнопку Download и сохраняет архив на жестком диске. После этого, разархивировав его, сможет подключить файлы к своему web-сайту или другому web-приложению.
Заключение
В ходе работы над созданием конструктора web-форм был проведен анализ предметной области и существующих конструкторов форм, отмечены их недостатки. Разработана модель и алгоритм работы конструктора форм «Alvor Form Builder», структура базы данных для хранения информации об элементах форм, пользователях и пользовательских формах. База данных реализована в СУБД MySQL. Реализован конструктор web-форм, позволяющий пользователю осуществить онлайн разработку формы, сохранение ее в базе данных и получение набора файлов с разметкой, стилями и обработчиками формы.
Список литературы: 1. Мельников А.В, Цытович П.Л. Принципы построения обучающих систем и их классификация. 2. Новое поколение систем контроля версий [Электронный ресурс] - Доступ к ст.: http:/ /www.techinfo.net.ru/docs/Version_Control_Systems.html. 3. Мельников А.В, Цытович П.Л. Модель взаимодействия виртуальных объектов для имитации работы в сети Internet
Поступила в редколлегию 12.07.2014 Левыкин Виктор Макарович, д-р техн. наук, зав. каф. ИУСТ ХНУРЭ. Адрес: Украина, 61023, Харьков, ул. Ленина, 14.
Воронин Александр Александрович, студент факультета компьютерных наук ХНУРЭ.Ад-рес: Украина, 61023, Харьков, ул. Ленина, 14.
Гарячевская Ирина Васильевна, канд. техн. наук, доц. кафедры информационных технологий в энергетических системах, Харьковский национальный университет имени В.Н.Ка-разина.
17
