ISO БПИ – БГПА - БНТУ

Университет

Одно окно

Услуги

Обучение иностранных граждан

Работодателям

Вакансии

УНИВЕРСИТЕТ

Новости - Конференция МИДО

Козлов В.О. ОПИСАНИЕ И МОДЕРНИЗАЦИЯ ПРИЛОЖЕНИЯ ВИЗУАЛИЗАЦИИ ДАННЫХ INGRAPH

 

УДК 004.422.832

 

Описание и модернизация приложения визуализации данных inGraph

Козлов Владимир Олегович

БНТУ, Минск, Республика Беларусь, Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript

Введение

Данная работа описывает процесс подготовки окружающий среды и развёртывания фреймворка Agavi. Так же в работе будет описан процесс подключения библиотеки Doctrine, которая необходимая для создания моделей БД, для поддержания концепции Model View Controller (MVC). Так же в ходе работы будут представлены примеры модернизации проекта с использованием модульной концепции фреймворка Agavi. В ходе работы будет рассмотрено приложении inGraph, реализованное на основе фреймворка Agavi. Данное приложение позволяет отображать визуальную информацию в виде графиков.

Подготовка к работе

Разрабатываемое приложение базируется на CentOS 6.0. После установки операционной системы на виртуальную машины для создания полноценного сервера необходимо установить apache, php и mysql. Все действия выполняются от пользователя root. Для установки системы необходимо выполнить следующие шаги.

Шаг 1. Необходимо обновить систему. Это делается следующей командой:

# yum update

Шаг 2. Для удобной работы необходимо установить Midnight Commander:

# yum -y install mc

Шаг 3. Установка Apache, SSL:

# yum -y install httpd mod_ssl

Далее необходимо отредактировать конфигурационный файл apache. Для этого необходимо открыть в любимом редакторе файл /etc/httpd/conf/httpd.conf. В ServerName вносится адрес или имя сервера текущей копии системы. Прописывается Apache в автозапуск:

# chkconfig httpd on

Apache запускается командой:

# service httpd start

Для проверки работы сервера создаем тестовую страницу:

# echo '

It Works!

' > /var/www/html/index.htmlПроверяем результат, открыв в браузере с другой машины IP-адрес сервера:

http://IP-адрес_сервера/

Если надпись It Works! появилась, значит сервер работает корректно.

Шаг 4. Установка PHP и его дополнительные компоненты. Для этого необходимо выполнить команду:

# yum -y install php php-common php-gd php-mysql php-xml php-mbstring

Далее необходимо перезапустить Apache:

# service httpd restart

Проверить работу PHP можно выполнив следующий скрипт:

# echo '' > /var/www/html/inf.php

Результат работы данного скрипта проиллюстрирован на рисунке 1.

Рисунок 1 – Пример работы PHP

Шаг 5. Установка MySQL. Для установки MySQL выполняем команду:

# yum -y install mysql mysql-server

Добавляем MySQL в автозапуск командой:

# chkconfig mysqld on

MySQL запускается следующей командой:

# service mysqld start

Далее необходимо установить root пароль MySQL:

# mysqladmin -u root password 'root'

После выполнения данных операций, получается полноценный сервер на базе CentOS готовый к работе. Для удобной работы с платформой CentOS из Windows необходимо установить PHPStorm и настроить проект на автоматическую синхронизацию с сервером. Для этого необходимо открыть вкладку Tools/Deployment/Configurations и указать директорию синхронизации на сервере. Пример данной настройки приведён на рисунке 2.

Рисунок 2 – Пример настройки синхронизации проекта

Установка Agavi Framework

Использую описанную выше настройку сервера, развернуть Agavi Framework достаточно просто. Для этого необходимо скачать пакет Agavi и с помощью PHP Storm загрузить его на сервер. Стандартный пакет Agavi имеет структуру, представленную на рисунке 3.

Рисунок 3 – Структура Agavi Framework

Директория app содержит исполняемые файлы, файлы конфигурации фреймворка, а так же файлы для формирования отображения страницы. Директория pub содержит элементы контроллера. В данной директории содержатся js-скрипты, изображения для сайта и CSS-файлы для настройки отображения. Директория libs содержит вспомогательные библиотеки. В нашем случаи таковой является Doctrine.

Для установки Doctrine необходимо скачать архив Doctrine и распаковать его в директорию libs. Далее необходимо сгенерировать модели базы данных для того, что бы работать с базой данных repository по средствам классов php. Для генерации моделей необходимо выполнить скрипт, листинг которого представлен на рисунке 4.

Рисунок 4 – Пример скрипта генерации моделей

После этого будут сгенерированы модели базы данных. Пример моделей приведён на рисунке 5.

Рисунок 5 – Пример скрипта сгенерированной модели

Для подключение библиотеки Doctrine необходимо настроить скрипт конфигурации agavi database.xml (рисунок 6).

Рисунок 6 – Конфигурационный файл настройки подключения Doctrine

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

Реализация web-приложения

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

 

  • jquery.flot.description;
  • jquery.flot.offset;
  • jquery.flot.thresholds;
  • jquery.flot.highlight.

 

Рассмотрим более подробно реализованные моули.

Jquery.flot.description. Данный модуль необходим для отображения вспомогательной информации на графике. Данный модуль работает с объектом Canvas и прорисовывает на нём буквы (именно прорисовывает, а не выводит текст). Пример данного вспомогательного модуля приведён на рисунке 7.

Рисунок 7 – Пример исходного кода вспомогательного модуля

Значения для вывода берутся из json-объекта, который присылает provider/values.

Jquery.flot.offset. Данный модуль предназначен для прорисовки сопряжённых графиков устройств. Данные о сопряжённом графике приходят в отдельном объекте. Прорисовка происходит путём смещения исходного положения canvas на 10% относительно текущей позиции.

Jquery.flot.thresholds. Данный модуль отображает пороговые значения для графиков.

Jquery.flot.highlight. Данный модуль прорисовывает подсветку точек. При наведение на точку, она выделяется и во всплывающем окне высвечивается значение по осям x и y.

Модуль подключаются путям добавления исполняемой функции в виде хука на определённое событие. Например:

plot.hooks.draw.push(ReturnOfset);

Так же был изменён модуль формирования данных json-объекта. Данный модуль получает данные из базы данных repository и ingraph. Пример скрипта для формирования данных представлен на рисунке 8

Рисунок 8 – Пример скрипта формирование ответа в виде json-объекта

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

Локальное тестирование проходило с использованием браузеров Opera и InternetExplorer по методу белого ящика. Это позволило устранить значительную часть неисправностей и неточностей приложения. Значительная часть тестируемой информация была получена в виде json-объектов. Пример отладочной информации приведён на рисунке 9.

Рисунок 9 – пример отображения тестовой информации

В результате тестирования были найдены следующие недочёт – не отображается график в Interne Explorer v 8. Это обусловлено тем, что IE 8 не поддерживает элемент canvas.Решить эту проблему можно путём подключения к проекту библиотеки excanvas.js.

Пример работы готового приложения можно увидеть на рисунках 10-11.

Рисунки 10 и 11 – Примеры работы приложения

Вывод

В ходе работы было модернизировано web-приложение inGraph, которое является вспомогательным модулем для системы мониторинга компьютерных систем и сетей Icinga. Данное приложение прошло успешное тестирование. Приложение показало устойчивою и корректную работу. Для тестирования приложения с псевдозначениями были реализованы скрипты для генерации случайных значений.