4.2.2 Этап «Разработка дизайна»

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

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

Adobe Photoshop CS5 - это один из самых лучших профессиональных фоторедакторов, который имеет мощнейший функционал, который предназначен для редактирования графики, представленный в виде большого количества фильтров, инструментов, настроек, спецэффектов и т.п. Поэтому он идеально подходит для создания макета системы.

За основу был взят стандартный шаблон Joomla!, который представлен на рисунке 4.2.

Рисунок 4.2 - Стандартный шаблон Joomla!

После выполнения стандартных процедур, доступных в Photoshop CS5 был отрисован итоговый макет системы, который представлен на рисунке 4.3.

Шаблон сайта - это совокупность файлов, используемых CMS (системой управления сайтом) для формирования внешнего вида и определяющих форму отображения информации на сайте. Далее представлено описание основных файлов и папок, необходимых для разработки шаблона.

На данном этапе на локальном компьютере была создана папка с названием шаблона. Далее в нее помещены папки: css - папка, в которой содержатся файлы со стилями, использующимися при разработке. Images - в ней находятся изображения, из которых состоит шаблон.



Рисунок 4.3 - Итоговый макет системы

4.2.3 Этап «Разработка шаблона сайта»

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

Так же добавлен файл templateDetails.xml, который используется для установки шаблона на систему управления сайта. В нем указывается общая информация о шаблоне, а точнее имя автора и описание шаблона, далее прописываются имена всех файлов и папок, которые необходимо загрузить в систему управления сайтом. Так же в этом файле перечисляются названия всех позиций.

4.2.4 Этап «Установка системы управления сайтом на хостинг»

Первый шаг на данном этапе - это скачивание системы управления сайтом Joomla! с официального сайта. Было решено использовать версию Joomla 3.0. По окончанию загрузки на компьютере появится архив с файлами и папками. Теперь все полученные файлы необходимо загрузить на хостинг. Для этого необходимо получить доступ на сервер FTP, который выдается провайдером. А чтобы загрузить файлы на сервер, необходимо воспользоваться FTP-менеджером. FTP-клиент - программа, которая позволяет получить доступ к FTP-серверу удаленно.

Для загрузки файлов на сервер было выбрано приложение FileZilla. FileZilla -- это свободный многоязычный FTP-клиент с открытым исходным кодом для Microsoft Windows, Mac Os и Linux. Он поддерживает FTP, FTPS и SFTP и имеет редактируемый интерфейс с поддержкой смены тем оформления. В нем имеется возможность изменения объектов с синхронизацией директории и поиском на удаленном сервере. Поддерживает многопоточную загрузку файлов, а также докачку при обрыве Интернет - соединения[19].

Загрузка файлов системы управления сайтом на сервер представлена на рисунке 4.4.

Рисунок 4.4 - Загрузка файлов системы управления сайтом на сервер



После загрузки файлов на сервер необходимо разархивировать нашу систему управления непосредственно на хостинге. Это делается в панели управления хостингом. Заходим во вкладку «Файловый менеджер» и находим там нужную папку с системой управления сайтом. Далее нажимаем кнопку «Разархивировать» и запускаем процесс разархивации файлов, как показано на рисунке 4.5.

Рисунок 4.5 - Разархивация файлов на хостинге

Рисунок 4.6 - Создание базы данных



Далее переходим к созданию базы данных, она так же создается в панели управления хостингом. Выбираем пункт «Базы данных MySQL» и в открывшейся форме вводим название и пароль базы данных. Создание базы данных представлено на рисунке 4.6.

Далее переходим по адресу доменного имени сайта и запускаем процесс установки Joomla!. Система попросит ввести название сайта e-mail, логин и пароль администратора (рис 4.7).

Рисунок 4.7 - Ввод необходимых данных для установки системы управления сайтом

После заполнения данных переходим к пункту «Конфигурация базы данных». Здесь нужно указать название и пароль, созданной ранее базы данных (рис 4.8). После того как все необходимые данные заполнены можно начинать процесс установки системы управления сайтом на хостинг. Нажимаем кнопку «установить» и по истечении некоторого времени система будет установлена. Далее работа с информационной системой будет вестись непосредственно из административной части, с помощью панели управления сайтом.



Рисунок 4.8. - Ввод данных для привязки базы данных к системе управления сайтом

4.2.5 Этап «Интеграция шаблона дизайна на систему управления сайтом»

Перед тем как начать установку требуется все исходные папки и файлы шаблоны, разработанные на этапе «Разработка шаблона сайта» поместить в архив данных. Далее для того чтобы установить разработанный шаблон на систему управления сайтом необходимо в панели управления выбрать пункт «Расширения - Менеджер расширений - Установка». Откроется вкладка, где следует выбрать пункт «Загрузить файл пакета». В открывшееся поле перетащить созданный архив, либо нажать на кнопку «Выберите файл» и там выбрать необходимую папку. Загрузка архива с шаблоном сайта показана на рисунке 4.9.



Рисунок 4.9 - Загрузка архива с шаблоном в систему управления сайтом

После загрузки необходимо перейти во вкладку «Расширения - Шаблоны» и выбрать разработанный шаблон «По умолчанию». Выбор шаблона представлен на рисунке 4.10.

Рисунок 4.10 - Выбор разработанного шаблона

4.2.6 Этап «Разработка модулей системы»

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

1) Модуль «Меню слева» - служит для переключения между показателями качества воды. Часть кода модуля представлена ниже.

<div class="menu">

<ul class="mytabs tabset_tabs" id="tabs" >

<li class="current firstchild"><a href="#zhestkost" class="preActive active">Жесткость</a></li>

<li><a class="preActive postActive" href="#obshhaya_mineralizaciya">Общая минерализация</a></li>

<li><a class="preActive" href="#shhelochnost">Щелочность</a></li>

<li><a class="" href="#ph_koncentraciya">PH концентрация</a></li>

<li><a href="#soderzhanie_zheleza">Содержание Железа</a></li>

<li><a href="#okislyaemost">Окисляемость</a></li>

<li><a href="#zapax">Запах</a></li>

<li><a href="#privkus">Привкус</a></li>

<li><a href="#cvetnost">Цветность</a></li>

<li><a href="#mutnost">Мутность</a></li>

<li><a href="#lanzhele">Индекс стабильности(Ланжелье)</a></li>

<li><a href="#riznera">Индекс стабильности(Ризнера)</a></li>

</ul>

2) Модуль «Карта» - Необходим для отображения географической карты города Вологды, на которую наносятся значения из соответствующих модулей показателей качества. Часть кода модуля представлена ниже.

<div id="zhestkost" class="tabset_content tabset_content_active">

{module 1. Жесткость }

</div>

<div id="obshhaya_mineralizaciya" class="tabset_content">

{module 2. Общая минерализация }

</div>

<div id="shhelochnost" class="tabset_content">

{module 3. Щелочность }

</div>

<div id="ph_koncentraciya" class="tabset_content">

{module 4. PH концентрация }

</div>

<div id="soderzhanie_zheleza" class="tabset_content">

{module 5. Содержание Железа }

</div>

<div id="okislyaemost" class="tabset_content">

{module 6. Окисляемость }

</div>

<div id="zapax" class="tabset_content">

{module 7. Запах }

</div>

<div id="privkus" class="tabset_content">

{module 8. Привкус}

</div>

<div id="cvetnost" class="tabset_content">

{module 9. Цветность}

</div>

<div id="mutnost" class="tabset_content">

{module 10. Мутность}

</div>

<div id="lanzhele" class="tabset_content">

{module 11. Индекс стабильности(Ланжелье)}

</div>

<div id="riznera" class="tabset_content">

{module 12. Индекс стабильности(Ризнера)}

</div>

3) Модуль «Футер» - служит для отображении информации о посещениях. Так же с помощью него отображается кнопка перехода на страницу с анкетированием.

<div class="informer">

<img src="/templates/voda35/images/metrika.png"></a>

</div>

<div class="copyright">© <?php echo date("Y"); ?><br> Показания качества воды г. Вологды</div>

<div class="anketa"><a href="https://docs.google.com/forms/d/e/1FAIpQLSf2pr5rbIZN8k-IVlfIkTEzKT-ElaWaeAGPpktTMi7PE8ZiBQ/viewform" target="_blank">Анкета на качество воды</a></div>

4) Модули «Показатель качества» - служат для отображения выбранного показателя качества на карте. Было создано 12, схожих по структуре модулей для каждого заявленного показателя качества воды. Часть кода одного из модулей показателя качества представлена ниже. Часть Кода модуля «Жесткость»:

<div class="karta">

<span class="normal">Норма: не более 7,0 мг-экв/л</span>

<div class="items">

<div id="blue" title="Прилуки"><span>5,0</span></div>

<div id="blue" title="Бригантина"><span>5,3</span></div>

<div id="green" title="Лукьяново"><span>4,2</span></div>

<div id="green" title="Куралит"><span>4,4</span></div>

<div id="blue" title="Станкозавод"><span>4,5</span></div>

<div id="blue" title="Заречье"><span>4,9</span></div>

<div id="blue" title="Затон"><span>5,3</span></div>

<div id="blue" title="Водники"><span>5,3</span></div>

<div id="blue" title="Ленинградская"><span>5,0</span></div>

<div id="blue" title="Центр"><span>4,9</span></div>

<div id="blue" title="Тепличный микрорайон"><span>5,1</span></div>



5. ОФОРМЛЕНИЕ ТЕХНИЧЕСКОЙ ДОКУМЕНТАЦИИ

Руководство пользователя и руководство администратора - документы, цель которых - предоставлять пользователям помощь в использовании системы. Документы входят в состав технической документации на систему и, как правило, подготавливаются техническим специалистом[20].

Большинство технических документов кроме текстовых описаний содержат еще и изображения. В случае программного обеспечения, в руководства обычно включаются скрины экрана. Используется язык, доступный предполагаемой аудитории.

Руководство пользователя -- один из основных программных документов. Невозможно представить себе программный продукт, который обходился бы без данного руководства. Основная задача документа состоит в том, чтобы обеспечить возможность пользователям самостоятельно решать все основные задачи, на которые нацелена программа.

Руководство администратора адресовано лицу, задача которого -- обеспечить определенный порядок функционирования системы. Обычно администратор считается пользователем системы, однако, при этом он наделен как особыми обязанностями, так и необходимыми для их выполнения привилегиями.

5.1 Руководство пользователя

При клике на ссылку сайта обычный пользователь Интернета сразу попадает на главную страницу. На этом этапе он выбирает интересующий его показатель качества воды и перед ним отображаются все данные об этом показателе на карте, расположенной в центральной части страницы. Вид главной страницы сайта представлен на рисунке 5.1.



Рисунок 5.1 - Главная страница сайта

На этой странице пользователь может переключаться между различными показателями левой кнопкой мыши. При наведении мыши на карту, карта увеличится в размере, для более детального рассмотрения. Здесь же можно посмотреть статистику посещений, для этого на сайт добавлена яндекс.метрика. Она представлена на рисунке 5.2.

Рисунок 5.2 - Яндекс.метрика

По завершению просмотра интересующей пользователя информации о качестве показателей воды в городе Вологде он может перейти на страницу с анкетой. Кнопка перехода находится в правом нижнем углу главной страницы (рис 5.3).



Рисунок 5.3 - Кнопка перехода на страницу с анкетой

В данной части сайта необходимо оставить отзыв о качестве воды в конкретном районе проживания, путем ответа на тематические вопросы. После указания района проживания, пола и возраста пользователь переходит к ответам на вопросы анкеты, которые необходимы кафедре «Водоснабжения и водоотведения» Вологодского государственного университета для анализа ситуации, связанной с качеством питьевой воды в каждом районе города. Страница с анкетой представлена на рисунке 5.4.

Рисунок 5.4 - Страница с анкетой

По завершению работы с анкетой пользователю предлагается оценить собственное состояние здоровья по шкале от 0 до 100 и отправить результаты анкетирования в базу данных сайта. Завершение работы с анкетой представлено на рисунке 5.5.

Рисунок 5.5 - Завершение анкетирования

5.2 Руководство администратора

Для входа в систему с правами администратора необходимо в адресной строке браузера после указания доменного имени сайта ввести «administrator», в следствии чего мы попадем на страницу с авторизацией, где необходимо ввести логин и пароль администратора. Страница с авторизацией представлена на рисунке 5.6

Рисунок 5.6 - Страница авторизации администратора



После ввода логина и пароля выполнится переход в административную часть системы, которая представлена на рисунке 5.7.

Рисунок 5.7 - Административная часть системы

И так, мы ввели данные и находимся в административной части системы. В самом начале системного меню находится графическая ссылка в виде эмблемы Joomla!. Находясь на любой странице, можно быстро перейти к панели управления.

В нижней части страницы есть панель, на которой выводится информация о количестве вошедших на сайт пользователях и администраторах, о наличии личных сообщений. На ней же расположена ссылка для выхода из административной части сайта и ссылка, которая позволяет открыть сайт для просмотра в новом окне или новой вкладке. Нижняя панель представлена на рисунке 5.8.

Рисунок 5.8 - Нижняя панель

В левой части находится панель быстрого доступа. В ней выведены пункты меню, по которым чаще всего происходит переход из панели управления Joomla!. Панель быстрого доступа представлена на рисунке 5.9.



Рисунок 5.9 - Панель быстрого доступа

Рисунок 5.10 - Пункт панели быстрого доступа «Создать материал»

Здесь администратору системы предоставлены всевозможные функции для управления контентом сайта, такие как «Создать материал», «Менеджер материалов», «Менеджер меню», «Менеджер модулей» и т.д. Для примера рассмотрим пункт «Создать материал», который представлен на рисунке 5.10.

На данной странице администратор может создать новый материал, который будет размещен на сайте, будь то статья, фотография, видео или карта с новыми показаниями качества воды. Во вкладках под строкой заголовка указываются параметры публикации, параметры редактирования и права доступа к материалу. По завершению создания нового материала и нажатию кнопки «Сохранить» он будет отображаться в выбранной категории.

Так как в основном наша система состоит из модулей, рассмотрим подробнее панель управления, а именно вкладку «Расширения», пункт «Модули». Модули Joomla! - небольшие многофункциональные решения для сайта с использованием CMS Joomla!. При помощи модулей можно воспроизвести любую информацию (диаграммы, счетчики, карты, слайдшоу). Модули для CMS Joomla! это очень важные компоненты, т.к. без них функции CMS значительно меньше.

Пункт «Модули» представлен на рисунке 5.11.

Рисунок 5.11 - Пункт «Модули»

При клике по данному пункту откроется страница со всеми модулями, используемыми системой.

Страница с модулями представлена на рисунке 5.12.



Рисунок 5.12 - Страница с модулями

Если появилась необходимость замены информации о показаниях качества воды на более актуальную, следует отредактировать информацию, содержащуюся в модуле, данные которого нужно изменить. Это делается путем изменения кода. Нажав левой кнопкой мыши по требуемому модулю, мы перейдем на страницу редактирования. Для примера рассмотрим редактирование модуля «Жесткость» (рис 5.13).

В качестве примера взято редактирование показателя качества «Жесткость» в районе Лукьяново. Красным отмечены те области, которые подлежат изменению, а именно цвет и размерность показателя. Без определенных знаний о построении кода, редактировать данные кроме тех, которые выделены, не рекомендуется. Меняем данные на актуальные и нажимаем кнопку «Сохранить». Вот так теперь отображаются показания на карте (рис 5.14).

Рисунок 5.13 - Редактирование модуля «Жесткость»

Рисунок 5.14 - Отображение отредактированного показания качества



Подобным образом редактируются все показания качества других районов города в модуле «Жесткость».

Для того чтобы изменить данные о других показателях качества воды требуется выбрать соответствующий модуль («Общая минерализация», «Щелочность», «PH концентрация» и т.д.), затем повторить действия, описанные в примере.

5.2.1 Добавление нового модуля показателя качества

Если появится необходимость создания нового показателя качества, то потребуется создать новый модуль (рис 5.15).

Рисунок 5.15 - Создание модуля для нового показателя качества

Далее выбрать тип модуля: Flexi Custom Code. В окно «Insert code» скопировать код из любого другого модуля показателя качества, далее выбрать соответствующий заголовок, поменять все данные о цвете и размерности показаний в разных районах города так, как показано на рисунке 5.16. Нажимаем кнопку «Сохранить».

После этого заходим в модуль «Карта» на странице модулей, далее в окне Insert code вставляем код, как показано на рисунке 5.17.



Рисунок 5.16 - Начало добавления нового модуля показателя качества

Рисунок 5.17 - Продолжение добавления нового модуля показателя качества



Затем открываем модуль «Меню слева» и вносим изменения в код, как показано на рисунке 5.18.

Рисунок 5.18 - Завершение добавления нового модуля показателя качества

После проделанных действий на сайте в меню появится новый показатель (рис. 5.19).

Рисунок 5.19 - Добавленный модуль нового показателя качества



ЗАКЛЮЧЕНИЕ

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

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

Рассмотрены принципы разработки сайта для визуализации показателей качества воды. Определено назначение создания системы, описаны заявленные требования к функционалу и дизайну системы, требования к видам обеспечения и средствам просмотра. Выбран метод разработки проекта. Построена модель информационной системы по визуализации показателей качества воды с использованием CASE - технологий, разработана контекстная диаграмма и ее декомпозиции 2-го уровня с помощью методологии IDEF0, которая показывает процесс функционирования системы. Спроектирована работа модулей системы.

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

Составлено руководство пользователя и руководство администратора по эксплуатации разработанной системы.



СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Киберленинка - научная электронная библиотека [Электронный ресурс]: офиц. сайт - Режим доступа: https://cyberleninka.ru/article/n/prirodnye-resursy-i-ekologicheskaya-situatsiya-v-vologodskoy-oblasti

3. Роспотребнадзор Вологда [Электронный ресурс]: офиц. сайт - Режим доступа: http://35.rospotrebnadzor.ru/

4. Департамент природных ресурсов и охраны окружающей среды Вологодской области [Электронный ресурс]: офиц. сайт - Режим доступа: http://dpr.gov35.ru/departament/

5. Альянс - Нева [Электронный ресурс]: офиц. сайт - Режим доступа: http://alliance-neva.ru/interesnye_fakty_o_vode

6. АО «Мосводоканал» [Электронный ресурс]: офиц. сайт - Режим доступа: http://www.mosvodokanal.ru/

7. Анализ воды в г. Казань [Электронный ресурс]: офиц. сайт - Режим доступа: http://vodaag.ru/karta_vod/

8. Аналитический центр контроля качества воды ЗАО «Роса» [Электронный ресурс]: офиц. сайт - Режим доступа: http://www.rossalab.ru/about/interactiv.shtm

9. НОУ Итуит [Электронный ресурс]: офиц. сайт - Режим доступа: http://www.intuit.ru/studies/courses/1055/271/lecture/6880

10. Граф Х. Создание веб-сайтов с помощью Joomla! / Х. Граф - Издательский дом "Вильямс", 2009. - 312с.

11. Joomla-book - Русская документация по Joomla!. [Электронный

ресурс]. - Режим доступа: http://joomla-book.ru/

12. Вендров, А. М. CASE-технологии: современные методы и средства проектирования инфор-мационных систем / А. М. Вендров. - Москва:

Финансы и статистика, 1998. - 176 с.

13. Маклаков, С.В. BPwin и ERwin: CASE-средства для разработки

информационных систем / С.В. Маклаков. - Москва: Диалог-Мифи, 1999. - 295 с.

14. Бойко, В.В. Проектирование баз данных информационных систем / В.В. Бойко, В.М. Савинков - Москва: Финансы и статистика, 1989. - 351 с.

15. Фримен Э. Изучаем HTML, XHTML и CSS / Э. Фримен - Санкт - Петербург: Питер, 2010. - 656 с.

16. Кузнецов, М.В. PHP 5/6 / М. В. Кузнецов, И. В. Семдянов - Санкт-Петербург: БХВ-Петербург, 2009. - 1024 с.

17. Joomla! - Open Source CMS [Электронный ресурс]: офиц. сайт. -

Режим доступа: http://joomla.org/

18. Рейтинг хостингов с отзывами и ценами [Электронный ресурс]: офиц. сайт. - Режим доступа: http://pickuphost.ru/review/timeweb/

19. Википедия - свободная энциклопедия [Электронный ресурс]: офиц. сайт. - Режим доступа: https://ru.wikipedia.org/wiki/FileZilla

20. Разработка технической документации [Электронный ресурс]: офиц. сайт. - Режим доступа: http://philosoft-services.com/admins-manual.zhtml

Размещено на Allbest.ru