Разработка геоинформационной системы позиционирования городских объектов

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

●          От разработчика не требуется использования генераторов кода из командной строки.

●          CodeIgniter работает практически на любом хостинговом плане, который имеет поддержку PHP версии 5.1 и выше.

●          CodeIgniter считается одним из быстрых и не требовательных к ресурсам Фреймворков.

●          Малый размер дистрибутива (размер версии 2.1.1 составляет всего 2.2 Мб) [6].

Фреймворк CodeIgniter включает ряд вспомогательных функций для работы с БД, URL и пр. (helpers), которые позволяют разрабатывать более надежные от ошибок приложения. В данном случае команды:

$this->db->where('uid', $options['uid']);

$this->db->limit($options['limit'], $options['offset']);

$this->db->order_by($options['sortBy'], 'ASC');

$query = $this->db->get('comments');

заменяют привычный SQL запрос

SELECT * FROM 'comments' WHERE 'uid' = $options['uid'] ORDER BY 'ASC' LIMIT $options['limit'], $options['offset'];

Данный подход более удобен для разработчика, так как риск ошибки минимален и код более читаем.

Слой MySQL - задача слоя: хранение данных, сохранение их целостности, доступности и конфиденциальности. Для разработки информационной системы была выбрана реляционная система управления базами данных MySQL. Она наиболее полно подходит под требования разрабатываемой системы.является решением для малых и средних приложений. Эта свободная для распространения СУБД имеет большое сообщество разработчиков.

Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц, таких как MyISAM, поддерживающих полнотекстовый поиск, так и таблиц InnoDB, поддерживающих транзакции на уровне отдельных записей [4].

Слой Javascript и CSS файлов - функциональны слой для реализации интерфейса, загрузки данных с помощью AJAX и др.

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

Библиотека jQuery помогает легко получать доступ к любому элементу DOM на HTML-странице, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax [10].

В качестве сервиса получения информации о расположении объектов, а также для визуального отображение информации об объектах используется сервис Яндекс.Карты (API Яндекс.Карт).

Яндекс.Карты - это поисково-информационный картографический сервис Яндекса. Здесь наиболее точно и полно представлены карты России.

Доступен поиск как по географическим объектам (адресам, улицам, городам, регионам и странам), так и по организациям [7].

Сервис бесплатен.

4. Реализация

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

●   реализацию позиционирования городских объектов (добавление и отображение объектов на карте);

●       создание необходимого функционала для комментирования проблем на городских объектах.

4.1 Реализация отображения информации

При загрузке главной страницы main.php отображается карта проблем, на которой метками отмечены проблемные городские объекты, добавленные пользователями. Процесс загрузки карты можно условно разделить на два основных этапа:

●   Инициализация карты и передача параметров загрузки по умолчанию javascript-файлам map.js (инициализации карты и обработчиков событий на ней) и placemarks.js (файл работы с отображением меток на карте, создание списка меток под картой, подсветка меток на карте при наведении мыши на элемент списка)

●       Загрузка меток, удовлетворяющих заданным критериям по средствам HTTP-запроса AJAX-обработчику (контроллер ajax.php)

Этап инициализации включает в себя:

●   Создание карты и, в зависимости от передаваемых параметров, выполнение привязки различных обработчиков событий на карте. (Пример: если установлен параметр mapOpts['addEnable'], то необходимо назначить обработчик по двойному клику на карте - добавление информации)

●       Создание стилей для разных типов маркеров на карте (дорожные, экологические и др.), а также разные размеры - большие (для основного списка) и в виде точек (для тех точек, которые не продублированы в списке под картой).

●       Если передается параметр mapOpts['filter'], то выполнить инициализацию фильтра под картой (рис. 4.1).

Рисунок 4.1 - Отображение информации. Алгоритм

В целом, массив параметров mapOpts содержит настройки для загрузки карты и проблем, таких как количество загружаемых проблем на карту, количество элементов списка под картой, id пользователя (для отображения проблем, добавленных отдельным пользователем, на странице его профиля) и др.

Этап загрузки меток подразумевает выполнение HTTP-запроса с передачей выбранных параметров к контроллеру ajax.php и получение массива точек (рис. 4.2), для последующего отображения их на карте. Функция loadPlacemarks(mapOpts) в файле placemarks.js обрабатывает полученные данные, отображает метки на карте (функция showPlacemark (issue)), при необходимости создает список под картой (функция addItemToList(issue)).

Если вместе с картой проблем используется фильтр (на главной странице), то при изменении параметров в фильтре - выполняется аналогичный асинхронный запрос к контроллеру ajax.php (рис. 4.2) и последующее отображение проблем, удовлетворяющих новым критериям.

Рисунок 4.2 - Обработка AJAX-запросов

4.2 Реализация модуля добавления проблемы

Реализация системы подразумевает обязательную идентификацию пользователя для возможности добавления какого-либо контента, поэтому для отправки проблемы, необходимо выполнить проверку авторизации пользователя в системе. При удачном входе на сайт в базе данных системы и на локальном компьютере пользователя сохраняется уникальный идентификатор. При загрузке страницы контроллер страницы main.php проверяет наличие данного идентификатора. Если пользователь авторизован, то двойной клик по карте открывает форму добавления информации о проблеме на городском объекте (рис. 4.3). Одновременно с этим на карте под указателем мыши появляется маркер, который указывает на расположение городского объекта. Координаты данной метки отправляются HTTP-запросом к сервису геокодирования API Яндекс.Карт. Геокодирование предоставляет возможность поиска объекта, размещённого на карте по географическим координатам и определение его адреса (обратное геокодирование). Поисковый запрос осуществляется с помощью обращения к определённому URL, а результат возвращается в формате JSON (JavaScript Object Notation - простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером), который содержит список наиболее подходящих адресов. Первый адрес из списка принимается как верный результат геокодирования.

Далее пользователь производит заполнение полей ввода в форме, выбирает тип проблемы и производит прикрепление фотографий иллюстрирующих проблему. После нажатия кнопки “Отправить” данные форм, результаты геокодирования, координаты точки отправляются к обработчику 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.

При перемещении курсора по карте адрес перестраивается заново. Поэтому если пользователь сразу не смог указать точное место, позднее он может это отредактировать. Пользователь системы может добавить заголовок, текст проблемы и выбрать категорию, к которой она относится, в зависимости от этого выбирается соответствующая иконка, которая отображается на карте. Также пользователь может прикрепить файлы. Стандартным загрузчиком, или же воспользовавшись технологией Drag-and-Drop, просто перенести мышью необходимые файлы на поле добавления.

С главной страницы можно перейти на страницу проблемы.

Рисунок 5.6 - Страница проблемы

Страница проблемы содержит: интерактивную миниатюру карту с точкой указанной пользователем, прикрепленные файлы, адрес полученный от сервиса геокодирования API ЯндексКарт, заголовок и описание проблемы, а также дату размещения (рис. 5.6). Также на странице отображается голосование и форма комментирования. Если пользователь авторизован и не голосовал, то ему отображается голосование с возможностью выбора.

Рисунок 5.7 - Форма комментирования

Если пользователь авторизован и уже проголосовал или он не авторизован, ему отображаются результаты голосования на данный момент. Также для авторизованных пользователей доступна форма комментирования (рис. 5.7). Для неавторизованных пользователей выводится только обсуждение.

Рисунок 5.8 - Подсветка комментариев

Рисунок 5.9 - Страница пользователя

На странице пользователя (рис. 5.9) отображается сводная статистика о пользователе. Имя с сервиса, через который он авторизовался, иконка фотографии, условная характеристика на сайте (карма), группа к которой принадлежит пользователь, сколько проблем добавил и сколько оставил комментариев. Также его добавленные проблемы отображены на карте, и список располагается ниже.

Заключение

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

·       Проектирование базы данных.

·              Написание модуля авторизации (регистрации).

·              Написание модуля добавления информации на сайт от пользователей с применением API Яндекс.Карт.

·              Отображение добавленной информации с применением API Яндекс.Карт.

·              Комментирование созданного контента.

·              Голосование.

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

Первым этапом проектировалась база данных, в неё закладывались все необходимые поля. Проектирование базы данных было построено таким образом, чтобы в дальнейшем без особых преобразований, путем добавления индексных таблиц, можно было бы развивать систему.

Добавление информации на сайт пользователем: модуль полностью реализован, имеет свой, на мой взгляд, удобный интерфейс. Все операции выполняются на Ajax, пользователь без перезагрузки страницы видит, все вносимые изменения. В форме загрузки фотографий, использованы последние технологии в HTML5, такие как Drag-and-Drop. Модуль добавления информации взаимодействует с API Яндекс.Карт, не создавая при этом существенных нагрузок на сервер.

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

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

На данный момент, реализован весь основной функционал системы. Но есть и пути развития. Существуют некоторые варианты доработки безопасности системы, например, введение капчи (CAPCHA) при добавлении информации на сайт, так как сейчас есть потенциальная уязвимость перед DDOS-атаками (возможность отправки данных на сайт каждую секунду). При добавлении комментариев возможно введение тайм-аута на отправку сообщений. Несмотря на это, безопасность остаётся на достаточно высоком уровне, так как PHP фреймворк CodeIgniter позволяет защитить систему от некоторых видов атак, таких как SQL-injection и XSS-атаки.

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

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

В остальном проект на данный момент самодостаточен и функционирует в режиме альфа-тестирования.

Список использованной литературы

1. Бенкен Е.С. PHP, MySQL, XML: программирование для Интернета. - С. Пб.:BHV, 2008. -570 с.

. Конверс Т.А. PHP 5 и MySQL. Разработка и внедрение. Библия пользователя. - М.: «Вильямс», 2006. -1216 с.

. Б.Бибо, И.Кац - jQuery. Подробное руководство по продвинутому JavaScript (2009)

4. MySQL // MySQL 5.1 Reference Manual <http://dev.mysql.com/doc/refman/5.1/en/index.html>

. MVC // MSDN - Model-View-Controller <http://msdn.microsoft.com/en-us/library/ff649643.aspx>

6. CodeIgniter // CodeIgniter User Guide <http://codeigniter.com/user_guide/>

. API Яндекс.Карт// JavaScript API <http://api.yandex.ru/maps/doc/jsapi/>

8. API Loginza // Руководство по Loginza.API <http://loginza.ru/api-overview>

. JSON // Введение в JSON <http://www.json.org/json-ru.html>

10. AJAX // XMLHttpRequest Level 2 <http://www.w3.org/TR/XMLHttpRequest/>

. jQuery // jQuery API <http://api.jquery.com/>

. OpenID // OpenID specifications <http://openid.net/developers/specs/>