Структура веб-интерфейса системы

2.3.1 Навигационная структура веб-интерфейса

Интернет-портал системы реализован в виде одностраничного приложения (англ. Single Page Application). Одностраничное приложение - это веб-приложение, использующее единственный HTML-документ как оболочку для всех веб-страниц и организующий взаимодействие с юзером через динамически подгружаемые HTML, CSS, JavaScript средством асинхронного обмена данными с сервером.

Условно интерфейс системы Структура веб-интерфейса системы разбит на последующие блоки:

- страничка входа в систему;

- страничка перечня заявок на сертификацию ПО;

Набросок 8 – ER-диаграмма физической модели базы данных

- страничка перечня юзеров;

- страничка перечня видов испытаний и закрепленных профессионалов;

- страничка формирования отчетов;

- страничка личного кабинета юзера;

- модальные экранные формы редактирования данных.

Навигационная структура веб-интерфейса системы приведена на рисунке 9. Стрелками Структура веб-интерфейса системы показаны вероятные направления переходов меж компонентами интерфейса.

Форма входа в систему
Основная страничка
Страничка «Заявки на сертификац- -ию ПО»
Страничка «Виды испытаний»
Страничка «Пользователи»
Страничка «Отчеты»
Страничка «Личный кабинет»
Форма ввода характеристик отчета
Форма формирован- -ия и редактирова- -ния заявки
Форма редактирования видов испытаний
Форма редактирования юзера

Набросок Структура веб-интерфейса системы 9 – Навигационная структура веб-интерфейса

2.3.2 Структура разметки интерфейса

Зрительно интернет-портал системы оформлен в виде экранной формы-контейнера, включающей в себя последующие секции:

- область заголовка;

- панель переключения вкладок страничек;

- область данных странички.

Структура разметки интерфейса основной экранной формы интернет-портала приведена на рисунке 10.

Область заголовка содержит в себе элемент – заглавие информационной Структура веб-интерфейса системы системы.

Панель переключения вкладок страничек содержит внутри себя кнопки вкладок:

- заявки на сертификацию ПО;

Область заголовка
Панель переключения вкладок
Область данных

Набросок 10 – Структура разметки основной экранной формы

- виды испытаний;

- юзеры;

- отчеты;

- личный кабинет.

Содержимое области данных находится в зависимости от избранной вкладки.

Все области данных имеют однотипное шаблонное оформление Структура веб-интерфейса системы и могут включать в себя последующие секции:

- верхняя панель инструментов;

- секция основного содержимого странички;

- панель инструментов «подвала»;

- панель фильтрации данных.

Структура разметки областей данных приведена на рисунке 11.

Странички вкладок «Заявки на сертификацию ПО», «Виды испытаний», «Пользователи» содержат в себе последующие секции:

- панель фильтрации;

- верхняя панель инструментов;

- секция основного содержимого;

- панель Структура веб-интерфейса системы инструментов «подвала».

Странички вкладок «Отчеты» и «Личный кабинет» состоят из единственной секции - основного содержимого.

Область заголовка
Панель переключения вкладок
Панель фильтрации
Верхняя панель инструментов
Панель инструментов «подвала»
Секция основного содержимого странички

Набросок 11 – Структура разметки областей данных

Разработка веб-сайта

2.4.1 Программная архитектура веб-сайта

Программная архитектура интернет-сайта построена в согласовании с паттерном MVC (Model Структура веб-интерфейса системы-View-Controller). Данная архитектура реализует принцип, при котором модель приложения, пользовательский интерфейс и взаимодействие с юзером разбиты на три отдельных компонента. Модификация 1-го из компонент оказывает малое воздействие на другие. Иллюстрация архитектуры MVC приведена на рисунке 12.

Набросок 12 – Иллюстрация архитектуры MVC

Модель предоставляет:

- данные;

- способы работы данными;

- ограничения, накладываемые Структура веб-интерфейса системы на данные;

- контроль целостности данных.

Модель не содержит инфы, как данные можно визуализировать.

В разработанном программном продукте употребляется активная модель MVC. В этом случае модель - это не только лишь совокупа кода доступа к данным и СУБД, да и вся бизнес-логика приложения.

Представление отвечает за отображение инфы (визуализацию). В Структура веб-интерфейса системы качестве представления выступает форма (окно) с пользовательскими элементами ввода-вывода данных.

Контроллер обеспечивает связь меж юзером и системой: держит под контролем ввод данных юзером и употребляет модель и представление для реализации нужной реакции.

Список реализованных моделей соответствует списку сущностей логической модели базы данных.

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

Список представлений определяется структурой экранных форм. Для каждой экранной формы реализовано как минимум одно представление. Сложные экранные формы, содержащие несколько секций, состоят из головного представления и нескольких частичных (partial-view).

2.4.2 Реализация базы данных

База данных реализована в Структура веб-интерфейса системы СУБД Microsoft SQL Server Express 2014. Структура базы данных реализована в согласовании с ранее разработанной физической моделью. Создание объектов базы данных выполнено при помощи автоматом сгенерированного SQL-скрипта, сформированного при помощи инструмента ERWin DataModeler на базе физической модели.

Ниже приведены некие примеры скриптов, описывающие физическую структуру таблиц.

Таблица для хранения сути Структура веб-интерфейса системы «Заявка на сертификацию ПО» с первичным ключом сотворена при помощи последующего SQL-скрипта:

CREATE TABLE [dbo].[CertOrder](

[CertOrderId] [int] IDENTITY(1,1) NOT NULL,

[CertOrderDate] [datetime] NOT NULL,

[Author_UserId] [int] NULL,

[OrderState_OrderStateId] [int] NOT NULL,

[AdministratorComment] [nvarchar](4000) NULL,

[ProgramName] [nvarchar](255) NULL,

[ProgramType_ProgramTypeId] [int] NOT NULL,

[UserOrgName] [nvarchar](255) NOT NULL Структура веб-интерфейса системы,

[UserOrgAddress] [nvarchar](255) NOT NULL,

[UserOrgPhone] [nvarchar](255) NOT NULL,

[UserOrgInn] [nvarchar](255) NULL,

[UserOrgKpp] [nvarchar](255) NULL,

PRIMARY KEY CLUSTERED

(

[CertOrderId] ASC

)

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

Ограничение целостности данных по наружным ключам реализовано на Структура веб-интерфейса системы уровне приложения.

Для ограничения ссылочной целостности данных, в базе данных сделаны наружные ключи. Шаблоны скриптов для сотворения наружных ключей таблицы CertOrder приведены ниже:

ALTER TABLE [dbo].[CertOrder] WITH CHECK ADD FOREIGN KEY([Author_UserId])

REFERENCES [dbo].[User] ([UserId])

ALTER TABLE [dbo].[CertOrder] WITH CHECK ADD FOREIGN KEY([ProgramType_ProgramTypeId])

REFERENCES Структура веб-интерфейса системы [dbo].[ProgramType] ([ProgramTypeID])

ALTER TABLE [dbo].[CertOrder] WITH CHECK ADD FOREIGN KEY([OrderState_OrderStateId])

REFERENCES [dbo].[OrderState] ([OrderStateId])

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

Состав и структура всех таблиц соответствует структуре разработанной ранее Структура веб-интерфейса системы физической модели базы данных.

2.4.3 Реализация моделей данных

В согласовании с подходами, принятыми в архитектуре MVC, работа с данными сущностей и реализация бизнес-процессов реализована в классах моделей. Любая модель реализована в виде класса, наследуемого от Object.

Большая часть моделей, представляющих сути данных, имеет последующие способы:

- CreateNew(): инициализация нового экземпляра сути;

- SelectById(): получение Структура веб-интерфейса системы имеющегося экземпляра сути из базы данных;

- SelectAll(): получение всех имеющихся экземпляров сути из базы данных;

- SelectByFilter(): получение перечня имеющихся экземпляров сути из базы данных по данному аспекту фильтрации;

- SaveToDb(): сохранение экземпляра сути в базе данных;

- DeleteFromDb(): удаление экземпляра сути из базы данных;

- CheckCanDelete(): проверка способности удаления экземпляра сути из Структура веб-интерфейса системы базы данных на уровне контроля целостности данных и правил бизнес-логики приложения.

Не считая перечисленных способов, классы моделей имеют собственные способы и характеристики, обеспечивающие реализацию бизнес-логики приложения.

2.4.4 Реализация представлений веб-форм

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

- основное представление формы содержит только главные структурные элементы: заголовок, вкладки, кнопки и др.;

- именование объектов снутри основного представления начинается с префикса имени странички данного представления;

- основное представление содержит в себе ссылки на дочерние частичные представления Структура веб-интерфейса системы (partial view);

- именование объектов снутри дочерних представлений начинается с префикса, состоящего из: имени странички родительского представления + «_» + имя странички текущего частичного представления.

Для реализации структурных частей разметки форм, частей ввода-вывода данных и управляющих частей, в разработанном интернет-сайте применен JavaScript-фреймворк Sencha ExtJS. В качестве объектно-ориентированной надстройки над Структура веб-интерфейса системы JavaScript-фреймворком применены библиотеки Ext.NET.

Для реализации структурных частей разметки веб-форм применены последующие элементы управления Ext.NET:

- Viewport: контейнер, обеспечивающий внедрение всего места странички веб-браузера с автоматическим масштабированием;

- FormPanel: контейнер, обеспечивающий размещение частей ввода-вывода данных и передачи их значений на сервер;

- Window: контейнер диалогового окна.

- TabPanel Структура веб-интерфейса системы: контейнер переключаемых вкладок.

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

Для реализации частей ввода-вывода данных на веб-формах применены последующие элементы управления Ext.NET:

- TextFieldFor: текстовое поле;

- ComboBoxFor Структура веб-интерфейса системы: поле выпадающего перечня;

- CheckBoxFor: поле флага;

- RadioGroupFor: группа флагов;

- DateFieldFor: поле выбора даты.

Для реализации управляющих частей на веб-формах, применены последующие элементы Ext.NET:

- HyperlinkButton: ссылка;

- Button: кнопка.

Взаимодействие веб-страниц и сервера выстроено вполне при помощи асинхронных запросов (разработка AJAX). Представление веб-формы ведет взаимодействие с контроллером. Для выполнения Структура веб-интерфейса системы асинхронных запросов к серверу употребляется механизм DirectMethods, реализованный в библиотеке Ext.NET. К примеру, для сотворения окна для формирования заявки на сертификацию ПО с клиентской стороны употребляется способ TabCertOrders_Create() с реализованным в нем асинхронным запросом к серверу с клиентской стороны:

function TabCertOrders_Create() {

Ext.net.Mask.show();

Ext Структура веб-интерфейса системы.net.DirectMethod.request(

{

url: "/CertOrderForm/CreateNew",

params:{

onCloseClientScript: "TabCertOrders_Refresh();"

},

success: function (result) { Ext.net.Mask.hide(); },

failure: function (errorMessage) {Ext.net.Mask.hide(); Ext.Msg.alert('Ошибка', errorMessage); }

});

}

В данном примере делается воззвание к способу CreateNew контроллера CertOrderForm. Данный способ имеет последующую реализацию в модуле контроллера Структура веб-интерфейса системы на серверной стороне:

public ActionResult CreateNew(String onCloseClientScript = null)

{

Logging.LogAccess("CertOrderForm", "CreateNew");

//инициализация новейшей модели заявки

CertOrder model = new CertOrder();

model.InitNewObject();

//установка характеристик частичного представления формы, возвращаемого на клиент

Ext.Net.MVC.PartialViewResult result = new Ext.Net.MVC.PartialViewResult()

{

ViewName = "CertOrderForm",

WrapByScriptTag = false,

Model = model,

RenderMode = RenderMode.Auto

};

if (String.IsNullOrWhiteSpace Структура веб-интерфейса системы(onCloseClientScript) || onCloseClientScript == "null")

onCloseClientScript = "{}";

result.ViewBag.OnCloseClientScript = onCloseClientScript;

return result;

}

Приведенный выше способ контроллера производит создание сути CertOrder и производит возврат результата операции на клиентскую сторону.

2.4.5 Реализация печатных форм и отчетов отчетов

В информационной системе реализован ряд печатных форм и отчетов, список которых приведен в таблице ниже. Источником данных для всех печатных Структура веб-интерфейса системы форм и отчетов является суть CertOrder и связанные с ней сути справочников.

Таблица 8 – Список печатных форм и отчетов

Наименование печатной формы Входные характеристики Название файла макета
Сертификат Номер заявки на сертификацию ПО PrintFormCert.frx
Форма извещения об отказе в сертификации ПО Номер заявки на сертификацию ПО PrintFormCertDecline.frx Структура веб-интерфейса системы
Контракт на проведение сертификации ПО Номер заявки на сертификацию ПО PrintFormCertOrder.frx
Отчет «Заявки в работе» Начало периода; Конец периода; Формат ReportCertOrdersClosed.frx
Отчет «Закрытые заявки» Начало периода; Конец периода; Формат ReportCertOrdersInWork.frx
Отчет «Статистика обработки заявок» Начало периода; Конец периода; Формат ReportCertOrdersStats.frx

Модуль отчета (собственный для каждого отчета)
БД Структура веб-интерфейса системы
PDF, RTF, XLSX
Модуль подготовки отчетности ReportingCommon.cs
Макет отчета.frx
Файлы XML, XSD
Модуль экспорта отчетов ReportingExport.cs
Контроллер формы отчета
Представление формы отчета
SQL
HTTP
Запрос от юзера
Модель
Характеристики отчета

Набросок 13 – Схема формирования отчетов

С учетом специфичности архитектуры интернет-сайта, реализация каждого отчета содержит Структура веб-интерфейса системы в себе последующие составляющие:

- контроллер формы характеристик отчета: обеспечивает отображение формы ввода входных данных, нужных для запроса отчета;

- модель данных формы характеристик отчета: обеспечивает хранение и передачу на сервер входных данных, нужных для запроса отчета, введенных юзером;

- представление формы отчета: обеспечивает отображение частей ввода входных данных, нужных для запроса отчета;

- макет отчета Структура веб-интерфейса системы: обеспечивает описание дизайна структуры создаваемого файла отчета;

- модуль отчета: реализовывает логику подборки данных из СУБД, подстановку данных в макет и выгрузку отчета клиенту в запрошенном формате.

Формирование отчетов реализовано при помощи библиотек FastReport .NET. Макеты отчетов хранятся в виде XML-документов с расширением. FRX, расположенных в каталоге Структура веб-интерфейса системы Reports. Схема формирования отчетов приведена на рисунке 13.

Формирование отчетов реализовано последующим образом. Из контроллера веб-формы отчета делается вызов соответственного статического способа класса модуля отчета, который сформировывают набор данных в формате XML, и создают сохранение набора данных и XSD-схемы в каталог Reports.

Модуль подготовки отчетности производит загрузку соответственного макета отчета Структура веб-интерфейса системы из каталога Reports, и производит подстановку в шаблон отчета ранее приготовленных данных в формате XML и XSD-схемы.

Модуль экспорта отчета производит выгрузку приготовленного отчета в затребованном формате (PDF, Word, Excel), и передачу бинарного потока данных на сторону клиента.

2.4.6 Реализация разграничения прав доступа

Разграничение прав доступа юзеров к Структура веб-интерфейса системы объектам информационной системы реализовано при помощи ролевой политики безопасности. Матрица доступа к функциям системы приведена ниже в таблице 9.

Привилегии не назначаются юзерам конкретно, и приобретаются ими только через членство в соответственных группах. Управление персональными правами юзера, на самом деле, сводится к включению его в группы.

Таблица 9 – Матрица доступа

Заказчик Структура веб-интерфейса системы Админ Эксперт Управляющий Сисадмин
Создание заявок на сертификацию ПО + + +
Просмотр заявок на сертификацию ПО сделанных другими юзерами + + + +
Удаление заявок на сертификацию ПО + +
Изменение статуса заявок на сертификацию ПО + +
Редактирование шагов тестирования ПО + + +
Предназначение профессионалов на этапы тестирования ПО + + +
Редактирование результатов испытаний + + +

Продолжение таблицы 9

Редактирование справочника видов испытаний + +
Формирование отчетов + + + +
Печать Структура веб-интерфейса системы контракта на выполнение сертификации ПО + + + + +
Печать приложения к договору об отказе в сертификации + + + + +
Печать сертификата + + + + +
Редактирование перечня юзеров +


Эксплуатационная часть

Тестирование

Тестирование является шагом приемки системы в эксплуатацию. Тестирование производится после окончания программной реализации и опции системы. Целью проведения тестирования является доказательство выполненной реализации требуемой функциональности системы.

Главные испытания:

- испытания справочников Структура веб-интерфейса системы;

- испытания экранных форм;

- испытания отчетности.

Ниже приведена рекомендуемая методика тестирования системы. Тестирование следует делать строго в обозначенном порядке.

В процессе тестирования, итог каждого теста фиксируется. Считается, что тест прошел удачно, если приобретенный итог совпадает с ожидаемым результатом.

Таблица 10 – Методика тестирования системы

Выполняемое действие Требуемый итог
1 В интернет-браузере перейти по адресу веб Структура веб-интерфейса системы-портала системы Открыта страничка входа в систему
2 Произвести вход в систему под учетной записью, входящей в группу админов Открыта основная страничка
3 Перейти на вкладку «Пользователи» Отображен табличный перечень юзеров системы
4 Сделать новейшую учетную запись юзера. Включить её в группу «Администратор» В перечне юзеров отображается сделанная учетная запись

Продолжение таблицы Структура веб-интерфейса системы 10

5 Сделать новейшую учетную запись юзера. Включить её в группу «Заказчик» В перечне юзеров отображается сделанная учетная запись
6 Сделать новейшую учетную запись юзера. Включить её в группу «Руководитель» В перечне юзеров отображается сделанная учетная запись
7 Сделать несколько новых учетных записей юзера. Включить их в группу «Эксперт» В перечне Структура веб-интерфейса системы юзеров показываются сделанные учетые записи
8 Перейти на вкладку «Виды испытаний» Отображен перечень видов испытаний
9 Произвести первоначальное наполнение справочника «Виды испытаний». За каждым видом испытаний закрепить профессионала Добавленные виды испытаний показываются в перечне. Перечень доступных профессионалов формируется в согласовании с ранее заполненным на шаге 7 справочником юзеров
10 Закрыть все окна Структура веб-интерфейса системы интернет-браузера. Выполнить повторный вход в систему под учетной записью, сделанную на шаге 5, входящей в группу Заказчик. Произвести наполнение данных на страничке «Личный кабинет» Вход под учетной записью выполнен. Данные заполнены
11 Произвести создание новейшей заявки на сертификацию ПО на вкладке Заявки на сертификацию ПО На форме заявки в разделе «Реквизиты заказчика Структура веб-интерфейса системы» поля автоматом предзаполнены данными, обозначенными в личном кабинете юзера - заказчика
12 Произвести наполнение программки испытаний в заявке на сертификацию ПО Программка испытаний заполнена и отображается в разделе Программка испытаний

Продолжение таблицы 10

13 Прикрепить к заявке на сертификацию один либо несколько документов Документы прикреплены к заявке и показываются в перечне документов Структура веб-интерфейса системы а разделе заявки Приложения
14 Сохранить заявку Сделанная заявка отображается в перечне на главной страничке, в группе «Новые»
15 Произвести выход из системы. Войти в систему с учетной записью админа сделанной на шаге 4. Открыть сделанную на шаге 11 заявку на сертификацию ПО. Поменять статус заявки на «Принята в работу» Статус заявки Структура веб-интерфейса системы изменен
15 Сохранить заявку Заявка отображается в перечне на главной страничке, в группе «Принята в работу»
16 Выйти из системы. Произвести вход в систему с учетной записью юзера, входящего в группу «Эксперт», сделанной на шаге 7 Вход выполнен. Открыта основная страничка
17 Открыть заявку на сертификацию ПО, находящуюся в статусе «Принята в работе» (шаг 15). Открыть шаг Структура веб-интерфейса системы тестирования, назначенный на шаге 12 текущему пользователю-эксперту. Указать итог тесты «Пройдено». Сохранить шаг тестирования Шаг тестирования сохранен

Продолжение таблицы 10

18 Повторить пункты «Указать итог тесты «Пройдено» и «Сохранить шаг тестирования» шага 17 для каждого вида испытаний текущей заявки Шаги тестирования сохранены
19 Сохранить заявку В перечне заявок на главной страничке отображается Структура веб-интерфейса системы статистика испытаний: количество пройденных и не пройденных тестов соответствует наполнению результатов шагов программки испытаний шагов 17 и 18
20 Произвести наполнение результатов других шагов программки испытаний под учетными записями юзеров, назначенных в качестве соответственных профессионалов на шаге 7. Сохранить заявку В перечне заявок на главной страничке отображается статистика испытаний: количество пройденных и не пройденных Структура веб-интерфейса системы тестов соответствует наполнению результатов шагов программки испытаний
21 Выполнить вход в систему под учетной записью админа Вход выполнен. Открыта основная страничка
22 Поменять статус заявки на «Сертификация пройдена» Статус заявки изменен на «Сертификация пройдена»
23 Произвести формирование печатной формы Контракта на проведение сертификации ПО Выгружен документ в формате PDF. Документ содержит всю Структура веб-интерфейса системы информацию, обозначенную в заявке на сертификацию ПО

Продолжение таблицы 10

24 Произвести формирование печатной формы документа «Сертификат соответствия» Выгружен документ в формате PDF. Документ содержит всю информацию, обозначенную в заявке на сертификацию ПО
25 Поменять статус заявки на «Сертификация не пройдена». Сохранить заявку и опять её открыть. Произвести формирование печатной Структура веб-интерфейса системы формы «Уведомление об отказе в сертификации» Выгружен документ в формате PDF. Документ содержит всю информацию, обозначенную в заявке на сертификацию ПО.
26 Входя в систему под различными учетными записями юзеров, сделать несколько заявок на сертификацию ПО (выполнить поочередно шаги 11-14). Под учетной записью админа установить для сделанных заявок разный статус (или выполнить шаг Структура веб-интерфейса системы 22, или 25) Заявки показываются в перечне на главной страничке, в группе «Принята в работу». Статусы заявок изменены на «Сертификация пройдена» и «Сертификация не пройдена» в согласовании с действиями админа
27 Сформировать отчет «Заявки в работе» Отчет сформирован и содержит перечень заявок на сертификацию ПО, находящихся в статусе «Принята в Структура веб-интерфейса системы работу»
28 Сформировать отчет «Закрытые заявки» Отчет сформирован и содержит перечень заявок на сертификацию ПО, находящихся в статусах «Сертификация пройдена», «Сертификация не пройдена», «Отклонена»

Окончание таблицы 10

29 Сформировать отчет «Статистика обработки заявок» Отчет сформирован и содержит графическую иллюстрацию рассредотачивания заявок на сертификацию ПО в разрезе разных характеристик, в согласовании со статусом и Структура веб-интерфейса системы другими атрибутами сделанных на прошлых шагах заявок

На основании результатов, приобретенных в процессе тестирования по приведенной методике, изготовлены последующие выводы:

- функционал разработанного продукта соответствует требованиям, предъявленным в техническом задании;

- разработанный программный продукт не содержит критичных ошибок;

- разработанный программный продукт подходящ к эксплуатации.


struktura-vospitatelnogo-processa.html
struktura-vozrastnogo-krizisa.html
struktura-vzaimodejstviya.html