Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 4)

. Рисунок 14 – Диаграмма управляющей компании

Рисунок 15 – Диаграмма расчетно-кассового центра

Структура web-приложения обусловлена его простотой, так как преследовалась цель не перегружать пользователя лишними действиями. Web-приложение должно иметь интуитивно понятную навигацию по всем ресурсам и отображать соответствующую актуальную информацию.

2.1.2 Бизнес-процессы

В ходе ознакомления алгоритмов работы расчетно-кассового центра, для более глубокого понимания были разработаны бизнес-процессы [26]. Консультируясь с заказчиком, было упрощено большинство методов работы РКЦ, так как была возможность проследить все стадии алгоритмов. Ниже представлены инсталляция управляющей компании с вводом показаний и выводом квитанций (рисунки 16–17) [25].

Рисунок 16 – Бизнес-процесс инсталляции

Рисунок 17 – Бизнес-процесс ввода показаний и выдачи квитанций

2.2 Проектирование шаблонов страниц

Согласно ТЗ, страницы web-приложения имеют стандартную на сегодняшний день структуру административной панели (рисунки 18 – 19) [22].

Профиль

Основная информация

Рисунок 18 – Основная страница сайта

Поиск по таблице

Кнопка

Таблица

Профиль

Рисунок 19 – Шаблон страницы с данными объектов учета

3 Разработка web-приложения

Весь процесс разработки сайта можно разделить на 3 этапа:

1. верстка страницы для представления клиентам технологии автоматизации сбора данных об объектах учета;

2. вёрстка основных страниц расчетно-кассового центра;

3. программирование сценариев на языке PHP и настройка сайта.

Третий этап включает внедрение программного кода в готовую вёрстку. Такой подход позволяет сконцентрироваться на одной задаче и не принуждает постоянно переключаться между написанием HTML/CSS и PHP кода [34].

3.1 Разработка внешнего вида страниц

3.1.1 Продающая страница

На этапе верстки, с помощью HTML5, CSS3 и JavaScript, было создано визуальное представление продающей страницы, которая описывает технологию расчетно-кассового центра и содержит маркетинговые лозунги (рисунок 20).

Рисунок 20 – Продающая страница

После лозунга идет раздел с формой захвата, который собирает основную информацию для диспетчера РКЦ (рисунок 21).

Рисунок 21 – Форма захвата

Страница для представления клиентам технологии автоматизации сбора данных об объектах учета позволяет не только ознакомиться с предложением, но так же позволяет перейти на основной сайт, содержащий личный кабинет [19]. Помимо этого для каждого клиента есть возможность ознакомиться с демоверсией личного кабинета, которая демонстрирует все возможности технологии. Нажимая войти, поподаем в окно авторизации пользователя, которая требует уникальный логин и пароль (рисунок 22).

Рисунок 22 – Окно авторизации

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

Проверку валидации производит функция JavaScript [24]

//настройка валидации

config.validations = {

debug: true,

errorClass:'has-error',

validClass:'success',

errorElement:"span",

// добавление класса ошибки

highlight: function(element, errorClass, validClass) {

$(element).parents("div.form-group")

.addClass(errorClass)

.removeClass(validClass);

},

// добавление класса ошибки

unhighlight: function(element, errorClass, validClass) {

$(element).parents(".has-error")

.removeClass(errorClass)

.addClass(validClass);

},

// отправление обработчика

submitHandler: function(form) {

form.submit();

}

} { /* JS код */ }

Для реализации динамического изменения размеров страницы и внутренних элементов использовались т.н. медиа запросы (media queries). Такой вид вёрстки называется адаптивной. Например, код

@media (max-width:1125px) { /* CSS код */ }

позволит задать правила, которые будут применятся только если ширина окна не превышает 1125 пикселей [20].

3.1.2 Личный кабинет

Дизайн личного кабинета расчетно-кассового центра выполнен в стиле «material design», так как данный стиль популярен и его цветовая гамма рассчитана на продолжительную работу пользователя за приложением, с целью нагрузки глаз.

«Bootstrap 3.0» позволяет ускорить работу, выдавая настраиваемый комплекс функций, которые использовались в проекте. С помощью документации, можно найти любой готовый нужный элемент и встроить себе в код, например

<div class="modal fade" id="confirm-modal">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

<h4 class="modal-title"><i class="fa fa-warning"></i> Внимание</h4> </div>

<div class="modal-body">

<p>Вы уверены?</p>

</div>

<div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Да</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Нет</button> </div>

</div>

<!-- /.modal-content -->

</div>

<!-- /.modal-dialog -->

</div> { /* HTML код */ }

код позволяет при нажатии кнопки «Закрыть» выдать всплывающее окно, которое уточняет действие.

В первую очередь разработана главная страница, которая отображает основную статистику, по которой диспетчер РКЦ может быстро подводить итог (рисунок 23).

Рисунок 23 – Окно статистики

Для данной статистики идет обращение в базу данных «MySQL» и происходит по заданным тегам выборка данных, например

function summ_pay(){

$summ_pay = 0;

$q2 = mysql_query("SELECT * FROM `pay` WHERE 1");

$num_pay = mysql_num_rows($q2);

while ($num_pay != 0){

$pay = mysql_fetch_array($q2, MYSQL_ASSOC);

$summ_pay += $pay[sum];

$num_pay--;

}

return $summ_pay;

} { /* PHP код */ },

в данной функции summ_pay() идет выборка информации сумм оплат и вывод в статистику диспетчера расчетно-кассового центра.

Web-приложение должно быть адаптированным ко всем разрешениям экранов, следовательно «Bootstrap 3.0» позволяет вести работу на всех платформах. Для адаптации web-приложения велась разработка сразу на двух платформах, то есть, при каких либо изменениях отображение проверялось при различном разрешении экрана (рисунок 24).

Рисунок 24 – Web-приложение на различных устройствах

Так же диспетчер расчетно-кассового центра ведет учет всех объектов учетов, которые заносятся в базу данных и отображаются в отдельной странице в виде таблицы (рисунок 25).

Рисунок 25 – Пример таблицы с данными

С помощью PHP запроса идет обращение к базе данных и выборкой выводит нужные данные. Здесь же диспетчер может с помощью кнопки «Добавить» внести новые объекты в список, или перейти отдельно в объект для его редактирования (рисунок 26).

function base($adr){ //проверка данных

if (!isset($_GET["ins"])){ $curr = 1;} else $curr = $_GET["ins"];

$idUK = $_GET['idUK'];

$q1 = mysql_query ("SELECT * FROM `object` WHERE UK_idUK = '$idUK'"); //обращение к базе данных

if (isset($_POST["search"]))

{

$search = $_POST['search1'];

if ($search)

{

$q1 = mysql_query ("SELECT * FROM `object` WHERE name_object LIKE '%$search%' AND UK_idUK = '$idUK'");

$curr = 1;

}

} { /* PHP код */ }

Рисунок 26 – Добавление нового объекта учета

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

Так же у жильцов и управляющих компаний присутствует возможность загрузить квитанции, показания счетчиков в форматах .csv и .dbf прямо в их личный кабинет, это сделано специально, чтобы не вводить все вручную и выгрузить квитанции, которые содержат всю необходимую информацию согласно постановлению ЦБК (рисунки 27-28).

Рисунок 27 – Загрузка данных

Рисунок 28 – Результат расчета квитанции

3.2 Технико-экономическое обоснование

3.2.1 Требуемое техническое обеспечение

В качестве программного web-сервера требуется «Apache HTTPD» (для использования чистых ссылок потребуется расширение mod_rewrite) либо Microsoft IIS (Internet Information Services) [35].

По умолчанию для поддержки системы требуются следующие системы управления базами данных: MySQL, PostgreSQL(требуется PostgreSQL 8.3 и выше), SQLite (3.3.7+).

Рекомендуется использовать PHP версии 5.3+ (достаточная версия: 5.2.5+), требуются расширения Hash и JSON (по умолчанию включены).

Для эффективной работы web-приложения необходимо не менее 32Мб оперативной памяти. Требуемый объём памяти также зависит от установленных дополнительных модулей. Кроме того, на текущий момент сайт требует не менее 750Мб свободного места на жёстком диске сервера.

Для работы с изображениями требуются графические библиотеки, такие как GD. Библиотека GD включена по умолчанию начиная с версии PHP 4.3.

1. Оценка трудоёмкости и сроков модернизации программного

продукта

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

Для быстрой приближенной оценки трудоемкости и длительности разработки программного изделия может использоваться базовая модель. Эта модель состоит из двух простейших формул. Затраты труда или трудоемкость разработки программного изделия – t определяются по формуле, (чел.–мес.):

(1)

где – число тысяч исходных команд.

Число исходных команд равно 5112, соответственно

t = 3,6 (5,112)^1,2 = 25,5 (чел.-мес.).

Продолжительность разработки программного изделия Т, рассчитывается по формуле:

. (2)

Характеристики

Список файлов ВКР