Разработка геоинформационной системы позиционирования городских объектов
Курсовой проект - Компьютеры, программирование
Другие курсовые по предмету Компьютеры, программирование
?графий иллюстрирующих проблему. После нажатия кнопки Отправить данные форм, результаты геокодирования, координаты точки отправляются к обработчику AJAX запросов (рис. 4.2). Данная технология построения интерактивных пользовательских интерфейсов веб-приложений, заключается в асинхронном (фоновом) обмене данными браузера с веб-сервером. Результат обработки данных сервер возвращает в формате JSON. Если в ходе обработки возникли ошибки (заполнены не все обязательные поля, пользователь не авторизован, данные не добавлены в БД), то выдается соответствующее сообщение об ошибке (рис. 4.4). Если данные были успешно добавлены, то форма ввода закрывается и производится повторная загрузка меток на карту с параметрами по умолчанию.
Рисунок 4.3 - Добавления информации. Алгоритм
Работа алгоритма детально проиллюстрирована на UML-диаграмме последовательностей (рис. 4.4).
Рисунок 4.4 - Добавление информации. UML диаграмма последовательности
4.3 Реализация модуля комментирования проблемы
На странице отдельной проблемы вне зависимости от того - авторизован пользователь или нет - выводится лента комментариев. Однако, если пользователь не вошел в систему, то он не имеет возможности оставлять новые комментарии, при этом вместо формы для ввода комментария выводится текстовое предложение входа в систему.
Если пользователь авторизован, то под лентой комментариев выводится форма ввода нового сообщения (рис. 4.5). Кроме этого пользователь имеет возможность ответить на чье-либо сообщение, нажав на кнопку Ответить напротив какого-либо сообщения ленты.
Рисунок 4.5 - Комментирование проблемы. Алгоритм
При нажатии кнопки Отправить параметры (значение текстового поля, ID пользователя, ID проблемы, ID комментария, к которому предназначался ответ - по умолчанию 0) передаются с помощью HTTP-запроса на сервер к обработчику ajax.php в виде JSON-объекта (рис. 4.2). Результатом ответа сервера также будет JSON-объект, который содержит статус операции (выполнена без ошибок/присутствуют ошибки). Если запрос завершился ошибкой, то текст ошибки выводится в специальном окне, иначе, если комментарий был добавлен в базу данных и не присутствует прочих ошибок, то комментарий добавляется в общую ленту.
Если комментарий оставлен в ответ другому сообщению, то при наведении на него курсора комментарий-родитель выделяется цветом, с помощью jQuery.
5. Контрольный пример
Рисунок 5.1 - Главная страница системы
Такой видит главную страницу неавторизованный пользователь. В шапке сайта находится ссылка на авторизацию (рис. 5.1). На карте отображены различные типы проблем, при клике по ним открывается балун с текстом проблемы.
Ниже под картой располагаются функциональные переключатели, которые позволяют отфильтровать необходимую нам информацию (рис. 5.3). Так, например можно отобразить проблемы только определенной категории, или вывести последние 9 добавленных проблем. А также, при наведении на проблемы под картой, они подсвечиваются на карте.
Рисунок 5.2 - Карта проблем
Рисунок 5.3 - Фильтрация проблем
Авторизация через Loginza.API происходит в несколько кликов мыши: выбор провайдера, подтверждение разрешения получения информации от провайдера сервиса через который авторизуемся, подтверждение на нашем сайте, что переданная информация верна (рис. 5.4).
Рисунок 5.4 - Пользователь авторизован в системе
После авторизации становится доступен функционал добавления собственной информации об объекте на сайт. Форма вызывается двойным кликом по карте в месте, где существует проблема (рис. 5.5). Выйти из нее возможно нажатие клавиши ESC.
Рисунок 5.5 - Добавление проблемы
При перемещении курсора по карте адрес перестраивается заново. Поэтому если пользователь сразу не смог указать точное место, позднее он может это отредактировать. Пользователь системы может добавить заголовок, текст проблемы и выбрать категорию, к которой она относится, в зависимости от этого выбирается соответствующая иконка, которая отображается на карте. Также пользователь может прикрепить файлы. Стандартным загрузчиком, или же воспользовавшись технологией Drag-and-Drop, просто перенести мышью необходимые файлы на поле добавления.
С главной страницы можно перейти на страницу проблемы.
Рисунок 5.6 - Страница проблемы
Страница проблемы содержит: интерактивную миниатюру карту с точкой указанной пользователем, прикрепленные файлы, адрес полученный от сервиса геокодирования API ЯндексКарт, заголовок и описание проблемы, а также дату размещения (рис. 5.6). Также на странице отображается голосование и форма комментирования. Если пользователь авторизован и не голосовал, то ему отображается голосование с возможностью выбора.
Рисунок 5.7 - Форма комментирования
Если пользователь авторизован и уже проголосовал или он не авторизован, ему отображаются результаты голосования на данный момент. Также для авторизованных пользователей доступна форма комментирования (рис. 5.7). Для неавторизованных пользователей выводится только обсуждение.
Рисунок 5.8 - Подсветка комментариев
Рисунок 5.9 - Страница пользователя
На странице пользователя (рис. 5.9) отображается сводная статистика о пользователе. Имя с сервиса, через который он авторизовался, иконка фотографии, условная характеристи?/p>