Файл: Высшего образованияказанский (приволжский) федеральный университет.pdf

24
вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP. Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб- приложения, расположенного на другом сервере. Ярким примером веб- приложения является система управления содержимым статей Википедии:
множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей. В настоящее время набирает популярность новый подход к разработке веб-приложений, называемый Ajax. При использовании Ajax страницы веб- приложения не перезагружаются целиком, а лишь догружают необходимые данные с сервера, что делает их более интерактивными и производительными.
Также в последнее время набирает большую популярность технология
WebSocket, которая не требует постоянных запросов от клиента к серверу, а создает двунаправленное соединение, при котором сервер может отправлять данные клиенту без запроса от последнего. Таким образом появляется возможность динамически управлять контентом в режиме реального времени.
Для создания веб-приложений на стороне сервера используются разнообразные технологии и любые языки программирования, способные осуществлять вывод в стандартную консоль.
Основой клиентской части является процесс верстки. Этот процесс считается следующим этапом после подготовки макета дизайна Web- приложения.
Сама верстка делится на три основных шага:

нарезка макета дизайна на отдельные составляющие;

создания всех необходимых файлов для проекта в форматах *.html и
*.css;

25

написание в них специальных конструкций на языках HTML и CSS.
Следующим этапом frontend-разработки является программирование на языке JavaScript. Этот процесс позволяет добавить в наше Web-приложение определенную интерактивную функциональность:

анимацию;

выпадающие списки;

срабатывание кнопок;

плавное появление скрытых элементов;

отображение новой информации без перезагрузки страницы.
Заключительным этапом frontend-разработки считается тестирование работоспособности всех элементов Web-приложения и проверка соответствия дизайна с макетом [10, c. 496].
3.3. Разработка дизайна Web-приложения
Согласно разработанной структуре была спроектирована страница авторизации пользователей, главная страница и страница административной панели. В состав главной страницы входит навигационное меню и всплывающие окна с основным функционалом приложения [11, c. 470].
В разработку Web-приложения включен процесс создания макета Web- страниц, на который в дальнейшем будут натягиваться остальные элементы. При этом осуществляется формирование так называемых структурных блоков сайта
– обособленных модулей, каждый из которых отвечает за определенный функционал приложения [12, c. 712].
Web-приложения состоит из:

Страницы авторизации пользователей (рисунок 3.2);
Для работы с Web-приложением пользователю необходимо будет авторизоваться, так как каждый аккаунт имеет индивидуальные слои и задания на карте. Без активного аккаунта наше Web-приложение будет бесполезным.

26
Рисунок 3.2. Окно авторизации пользователей.

Верхнее навигационное меню (рисунок 3.3);
Данное меню служит для простой и быстрой ориентации пользователя в
Web-приложения. Он интуитивно должен разобраться, где и куда нажать, чтобы попасть в необходимый ему раздел.
Рисунок 3.3. Навигационное меню Web-приложения.

Боковое всплывающее меню (рисунок 3.4);
Данное меню включает в себя все существующие слои пользователя и позволяет их либо показать на карте, либо скрыть.

27
Рисунок 3.4. Боковое меню Web-приложения.

Административная панель (рисунок 3.5);
Административная панель отображает следующие разделы:
- Управление. Список всех существующих пользователей. В данном разделе можно добавлять новых, изменять или удалять старых пользователей.
Назначать каких-либо пользователей администраторами;
- Слои. Отображает список всех существующих слоев пользователя и позволяет проделать их создавать, удалять или редактировать;
- Отчеты. Позволяет выгружать отчеты по определенным критериям;
- Хранилища. Отображает список всех доступных хранилищ;
- Справочники. Хранят информацию о всех дополнительных элементах для работы с картой.

28
Рисунок 3.5. Административная панель Web-приложения.

Основная рабочая область Web-приложения (рисунок 3.6).
Отображает карты мира для работы со слоями. Имеет свойство масштабироваться.

29
Рисунок 3.6. Основная рабочая область Web-приложения.
3.4. Настройка API карты от платформы ActiveMap
Для корректной работы нашего Web-приложения нам необходимо реализовать интерактивную карту мира, которую можно будет масштабировать,
на которой можно будет отображать наложенные слои и объединенные объекты.
На простой картинке карты это сделать не получится, но к счастью для нас были придуманы и разработаны интерактивные карты, которые имеют свой API. [13,
c. 680]
API – программный интерфейс приложения, который включает в себя описание способов, с помощью которых одна программа взаимодействует с другой. Платформа ActiveMap имеет собственную API карты мира, которую мы и подключили к нашему Web-приложению с помощью определенных ссылок и скриптов (рисунок 3.7). Данное API карты передает информацию на сервер в виде таблиц, а так же получает запросы [14, c.340].
Для отображения слоев на карте используются таблицы баз данных,

30
содержащие информацию о координатах крайних точек слоя, которые в свою очередь соединяются тонкими линиями, образуя общий элемент.
Рисунок 3.7. Подключение API карты.

31
4. Описание разработанного Web-приложения
4.1. Описание интерфейса пользователя
Пользовательский интерфейс разработанного
Web-приложения
«MapEditor» состоит из окна авторизации (рисунок 4.1), главной рабочей области (рисунок 4.2) и административной панели (рисунок 4.3). Рабочая область включает себя интерактивную карту мира, навигационное меню и всплывающие окна с основным функционалом.
С помощью навигационного меню пользователь может:

измерить расстояние на карте;

распечатать определенный промежуток карты;

получить список объектов на определенной области;

получить отчеты;

создать новый слой на карте;

получить фиксированную ссылку на определенную часть карты для встраивания;

перейти в административную панель;

выйти из своего аккаунта для смены учетной записи.
Рисунок 4.1. Начальное окно авторизации пользователей.

32
Рисунок 4.2. Внешний вид главной страницы Web-приложения.
Административная панель в свою очередь дает пользователю оперировать всеми данными, которыми обладает Web-приложения. В административной панели он может управлять пользователями, слоями, заданиями, отчетами. Под управлением мы понимаем просмотр, редактирование, создание и удаление.
Осуществление регистрации нового аккаунта в Web-приложении невозможно знакомым нам способом, в приложении отсутствует модуль регистрации новых пользователей, так как приложение приватное и доступ к нему ограничен. При необходимости создания нового аккаунта администратор
Web-приложения должен зайти в панель управления во вкладку «Управление» и там уже создать новый аккаунт присвоив ему определенный статус обычного пользователя, либо администратора.

33
Рисунок 4.3. Административная панель Web-приложения.
Верхнее навигационное меню административной панели позволяет нам либо выйти из учетной записи, либо вернутся к рабочей области с картой.
4.2. Описание основного функционала Web-приложения
Создание нового слоя. При необходимости создания нового слоя на карте авторизованный пользователь может выбрать пункт меню «Новый слой». После чего поверх карты появляется новое окно с возможностью выбора параметров создаваемого слоя (рисунок 4.4). Пользователю необходимо будет указать название слоя, определить его в одну из предоставленных групп, указать проекцию и тип геометрии. Группы нового слоя задаются в административной панели во вкладке «Группы».
Всего есть три типа геометрии нового слоя:

точка;
Данный тип необходим для указания расположения какого-либо единичного объекта.

34

линия;
Данный тип необходим для указания двух или множества связанных объектов.

полигон.
Данный тип необходим для указания определенной местности расположения объектов на карте.
Рисунок 4.4. Окно создания нового слоя.
Выгрузка готовых отчетов. При необходимости получить отчет по работе авторизованный пользователь может выбрать пункт навигационного меню
«Отчеты», и перед ним откроется новое окно «Готовые отчеты» (рисунок 4.5).
Всего пользователь может получить отчеты за определенный период по трем параметрам:

качество работы по заданиям;

статистика по заданиям за период;

отчет по посещениям.

Так же возможна выгрузка отчета в 4 расширениях:

PDF

35

Excel

Word

RTF
Рисунок 4.5. Окно выгрузки готовых отчетов.

36
Заключение
В данном дипломном проекте разработано Web-приложение MapEditor на платформе ActiveMap, в частности решены следующие задачи: проведен обзор существующих инструментов и информационных технологий для создания
Web-приложений; определена структура и дизайн Web-приложения, реализован основной функционал клиентской части Web-приложения, выполнена адаптация
Web-приложения под все современные устройства, проведено функциональное тестирование Web-приложения.
Разработанное Web-приложение содержит инструменты визуализации и навигации, создания и редактирования объектов, измерения расстояний между объектами, измерения площадей объектов, просмотра прикрепленных к объектам файлов (изображений, документов и других типов файлов), работы с атрибутивной информацией. Обладает гибкой системой поиска объектов,
которая позволяет выполнять геометрические и атрибутивные запросы об объекте, позволяет организовать работы по созданию и редактированию различных тематических слоев и управлению ими. Объекты слоя отображаются на карте в виде определенных значков, линий или полигонов в зависимости от типа геометрии объектов слоя. Имеется возможность детальной настройки отображения объектов слоя по справочнику, интервалу или диапазону в зависимости от значений атрибутивных полей объектов. В Web-приложении также реализована возможность добавления подписи к объектам слоя, которая может содержать значения атрибутивных полей объектов, арифметические выражения со значениями атрибутивных полей объектов. Реализованы широкие возможности по детальному редактированию геометрии объектов слоев на карте: копирование и вставка объектов, вращение и перемещение объектов,
группировка и разгруппировка геометрии, объединение, пересечение,
симметрическая разность, обрезание геометрии и другие возможности

37
редактирования.
Объекты разных таблиц с данными могут быть логически связаны между собой. В Web-приложении реализованы инструменты связывания таблиц с помощью ключевых полей для повышения удобства перехода между логически связанными объектами. Таблицы связываются по типу отношения «один ко многим», что означает возможность привязки нескольких объектов одной таблицы (дочерней таблицы) к одному объекту второй таблицы (родительской таблицы). Реализованы возможности формирования различных видов отчетов по табличным данным. Готовые отчеты доступны для просмотра, печати, экспорта в различные форматы (PDF, RTF, файлы Microsoft Excel, HTML, JPEG) для последующего редактирования, архивирования, пересылки по электронной почте.
Web-приложение имеет широкую сферу применения в таких направлениях деятельности, как земельный кадастр, кадастр недвижимости, архитектура,
градостроительство, экология, геология, геофизика, мониторинг чрезвычайных ситуаций, инженерные коммуникации, телекоммуникации, железнодорожный и автомобильный транспорт, навигация, диспетчеризация передвижных единиц.

38
Список используемых источников
1.
Барысов Р. И. Постройте профессиональный сайт сами / Р. И.
Барысов – М.: Санкт-П
етербург
., 2013. – 304 с.
2.
Веллинг Л., Томсон Л. Разработка веб-приложений с помощью PHP
и MySQL / Л. Веллинг - М.: Вильямс - 2014. – 848 с.
3.
Дронов В. А. Разработка современных Web-сайтов / В. А. Дронов -
СПб.: БХВ-Петербург, 2013. – 414 с.
4.
Зольников Д. С. PHP 5. Как самостоятельно создать сайт любой сложности / Д. С. Зольников - М.: НТ Пресс, 2014. – 272 с.
5.
Кожемякин А. А. HTML и CSS в примерах. Создание Web-страниц /
А. А. Кожемякин - М.: Альтекс-А, 2014. – 416 с.
6.
Колисниченко Д. Н. Joomla! Руководство пользователя / Д. Н.
Колисниченко - М.: Диалектика, 2013. – 256 с.
7.
Маккоу А. Веб-приложения на JavaScript / Маккоу А., – М.:
издательство “Питер”, 2012. – 18 с.
8.
Мариков Ф. Ф. Самоучитель PHP 5 / Ф. Ф. Мариков - М.: Вильямс,
2013. – 420 с.
9.
Морозов Б. С. MySQL в связке с PHP / Б. С. Морозов – Санкт-
Петербург.: Корона-принт, 2014. – 310 c.
10.
Никсон Р. Создаем динамические веб-сайты с помощью PHP,
MySQL и JavaScript / Р. Никсон - СПб.: Питер - 2011. – 496 с.
11.
Печников В.Н. Создание Web-страниц и Web-сайтов. Самоучитель. /
- М.: Триумф, 2013. - 470 с.

39
12.
Прохоренок Н. М. HTML, JavaScript, PHP и MySQL.
Джентельменский набор Web-мастера / Н. М. Прохоренок - СПб.:
Питер, 2013. – 912 с.
13.
Томсон Л., Веллинг Л. Разработка Web-приложений на PHP и
MySql / Л. Томсон, Л. Веллинг. - СПб.: Питер, 2013. - 672с.
14.
Федорчук Д. А. Разработка WEB приложений на PHP и MySQL / Д.
А. Федорчук – Санкт-Петербург.: Корона-принт, 2013. – 340 c.
15.
Яргер Р. Дж., Дж. Кинг. MySQL и mSQL: Базы данных для небольших предприятий и Интернета / Р. Дж. Яргер, Дж. Кинг, -
СПб: Символ-Плюс, 2013. - 371 с.