52
- object_destination и client_destination (Назначение);
- electricity (Электричество);
- floor (Этаж);
- comment (Комментарии).
В этих таблицах хранятся все параметры, которые существуют у
объектов и клиентов.
Эти данные можно настраивать через раздел Настройки в системе.
Таблицы представлены на рисунке 17:
Рисунок 17 — Таблицы с параметрами объектов/клиентов
Также в системе присутствуют связующие таблицы — такие таблицы
носят исключительно вспомогательный характер и нужны только для того,
чтобы организовать связь Много-ко-много (Many-to-Many).
Связующие таблицы представлены на рисунке 18:
53
Рисунок 18 — Связующие таблицы
Служебные таблицы — служат для обеспечения работы внутренних
механизмов. В разрабатываемой системе таких таблиц всего две — это
таблица log (Журнал), в которой фиксируются все действия пользователей, и
таблица file (Файлы), в которой хранится информация о загруженных файлах,
их типах и расположении. [35]
Служебные таблицы представлены на рисунке 19:
Рисунок 19 — Служебные таблицы
3.2. Проектирование пользовательского интерфейса
3.2.1. Разработка прототипа
Исходя из технических требований к проекту, был разработан прототип
главной страницы Web-ориентированной системы. [1] Прототип приведен на
рисунке 20:
54
Рисунок 20 — Прототип главной страницы системы
За основу дизайна главной страницы была взята восьмиблочная
разметка. Дизайн выполнен в так называемом flat-дизайне в стилистике
панелей Metro — все блоки имеют четкие границы, минимальное количество
изгибов, используются пастельные оттенки цветов.
Цветовая гамма сайта была выбрана исходя из потребностей компании:
белый, голубой и бледно красные оттенки. Это очень спокойные цвета,
которые не будут раздражать сотрудников и отвлекать их от работы.
Основным шрифтом сайта является Open Sans, этот шрифт не имеет
острых, резких углов, и отлично вписывает в стиль Metro.
В мобильной версии сайта используются эти же цвета и шрифт. Таким
образом пользователю с любого устройства сразу становится понятно, что он
находится в этой системе.
При разработке дизайна были учтены особенности верстки на HTML и
CSS. [7]
На домашней странице сайта необходимо было разместить
максимальное количество информации таким образом, чтобы страница не
55
казалась перегруженной, а все данные были легко читаемы. Для этого
страница была разбита на три логические группы:
- краткие сведения о компании;
- сводка и информация;
- популярные объекты и клиенты.
Для удобства ориентирования, были разработаны блоки «Часто
просматриваемые объекты» и «Часто просматриваемые клиенты». Это
позволяет уменьшить время поиска необходимой информации по ключевым
клиентам и важным объектам. [11]
3.2.2. Разработка дизайна страниц
Дизайн домашней страницы приведен на рисунке 21:
Рисунок 21 — Дизайн домашней страницы
На страницах с информацией об объекте необходимо уделить особое
внимание интерфейсу, и сделать так, чтобы вся информация, которая есть по
56
этому объекту была доступна сразу же, без дополнительных действий. [28] В
связи с этим было принято решение структурировать всю информацию по
группам, таким как:
- общая информация;
- об объекте;
- цена;
- расположение;
- контакты;
- изображения и файлы
- дополнительная информация;
- комментарии.
Дизайн страницы объекта представлен в приложении Б.
На странице с выборкой объектов по поисковым критериям
предоставлена только основная информация по объектам, такая как:
- площадь;
- цена;
- расположение;
- статус контрагента;
- назначение;
- этаж;
- функциональные кнопки (посмотреть, редактировать, удалить).
Для того чтобы работа с системой была более простой и понятной, в
выборке есть постраничное разбиение (по 20 ед. на страницу). Это позволяет
не перегружать страницу большим количеством информации, а также
уменьшить скорость загрузки. Также, на этой странице можно скачать
презентации сразу по нескольким объектам в одном архиве. Страницы с
выборкой клиентов аналогичны страницам с выборкой объектов.
Дизайн страницы с выборкой объектов представлен в приложении В.
При разработке поисковых страниц большое внимание уделялось
57
удобству выбора критериев поиска, была детально проработана интерактивная
карта Московского метрополитена, все станции кликабельны, и менеджер
может проводить поиск объектов по станциям путем как ввода названия
станции, так и выбора станции на карте. [14]
Карта метро представлена на рисунке 22, зелеными точками обозначены
выбранные станции.
Рисунок 22 — Интерактивная карта метро
Критерии поиска можно комбинировать, заполнять частично, или не
заполнять совсем, такой подход позволяет менеджерам максимально точно
ограничить область поиска и подбирать объекты под каждого клиента
индивидуально. Страница поиска представлена в приложении Г.
В системе также предусмотрена страница управления пользователями,
58
данная страница доступна только руководителям и администраторам.
Существует возможность запретить доступ к системе одному или нескольким
пользователям, это создано для того, чтобы менеджеры не могли пользоваться
системой вне рабочего времени, либо если сотрудники были отстранены от
работы с конкретным объектом/клиентом.
Страница с пользователями представлена на рисунке 23:
Рисунок 23 — Страница с пользователями
Последним типом страниц является страница настроек, на которой
возможно добавлять, удалять и редактировать любые параметры, которые
присутствуют на страницах поиска. Это позволяет:
- управлять системой абсолютно неподготовленным пользователям,
исключая возможность порчи данных;
- изменять необходимые параметры, не прибегая к изменению
основного кода и помощи технических специалистов.
Настройки разделены на три логические вкладки:
- объекты;
- клиенты;
- общие настройки.
59
Все внесенные изменения автоматически появляются на страницах
поиска и добавления объектов/клиентов.
Страница настроек представлена на рисунке 19:
Рисунок 24 — Страница настроек
3.3. Разработка модулей АИС
3.3.1. Разработка и верстка страниц
Верстка выполнена на языке гипертекстовой разметки HTML5, с
использованием каскадных таблиц стилей CSS3. [15]
В основе мобильной верстки лежит CSS, таблицы стилей позволяют
настраивать отображение страницы в зависимости от размера экрана. Для
этого используются такие конструкции «@media {max-width:1250}». Стили
внутри данной конструкции применяются только при выполнении условия
«max-width» или «min-width». [18]
Для корректной работы модулей загрузки файлов и карты метро
подключена библиотека jQuery версии 1.11.2.
Исходный код верстки домашней страницы и стилей приведен в
Приложении Д.
60
jQuery — библиотека для языка JavaScript, которая упрощает доступ к
любому элементу DOM (Document Object Model — объектная модель
документа) и позволяет получать атрибуты и свойства любых объектов, а
также манипулировать ими. Помимо этого, в библиотеке jQuery отлично
реализован API для работы с AJAX — то есть возможен простой обмен
данными между сервером и клиентом без необходимости перезагружать
страницу. [24]
Карта метро, которая располагается на странице поиска и добавления
объектов реализована с помощью языка JavaScript. Для того чтобы сделать
карту по-настоящему интерактивной и кликабельной было принято решение
сделать двухслойную структуру. [21]
На нижнем слое размещается простое изображение схемы
метрополитена, а на верхнем слое размещены невидимые блоки небольшого
размера, один блок на одну станцию, которым присвоен индивидуальный
номер. Невидимость блоков достигается с помощью свойства «opacity»,
которому присвоено значение 0. [20]
Таким образом при клике на станцию метро, пользователь на самом деле
нажимает на невидимый блок с индивидуальным номером, с помощью jQuery
извлекается этот номер, и соответственно знаем какая станция была выбрана.
Помимо карты в модуль добавлен выпадающий список со всеми
станциями. Сам список работает с использованием автодополнения — как
только пользователь начинает вводить название, ему предлагаются
подходящие варианты, из которых можно быстро выбрать нужную станцию.
Выпадающий список и карта синхронизируются между собой — при
выборе станции в списке происходит выбор станции на карте, и наоборот.
Исходный код модуля карты приведен в Приложении Е.
Алгоритм работы интерактивной карты метро представлен на рисунке
25:
61
Рисунок 25 — Алгоритм интерактивной карты метро
Загрузка изображений и файлов происходит с помощью собственной
обертки над плагином File Upload Plugin, который позволяет загружать файлы
на сервер.
Использование собственного дополнения позволяет наделить плагин
мощным функционалом таким как:
- функция Drag&Drop — загрузка изображений путем простого
перетаскивания файла в указанное поле;
- одновременная загрузка нескольких изображений;
- предварительный просмотр изображения;
- обрезание ненужных участков и изменение размера перед загрузкой;
- проверка загруженных файлов на ограничения — размер,
расширение.