Министерство науки и высшего образования Российской Федерации

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

“НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ ИТМО”

(УНИВЕРСИТЕТ ИТМО)

ЦЕНТР АВТОРИЗОВАННОГО ОБУЧЕНИЯ ИНФОРМАЦИОННЫМ ТЕХНОЛОГИЯМ

ИТОГОВАЯ КВАЛИФИКАЦИОННАЯ РАБОТА

WEB-ПРИЛОЖЕНИЕ ДЛЯ УПРАВЛЯЮЩЕЙ КОМПАНИИ

Автор Санданова Александра Александровна _____________

(Фамилия Имя Отчество) (Подпись)

Центр авторизованного обучения информационным технологиям

Наименование программы «Разработчик профессионально

ориентированных компьютерных технологий»

Руководитель ст.преп. Харатян А.С. ____________

(ФИО, ученая звание, степень) (Подпись)

К защите допустить

Заместитель директора ЦАО ИТ, к.т.н. / Т.В. Зудилова/

Санкт-Петербург, 2022г.
Обучающийся Санданова Александра Александровна Группа 124/10-I
(Фамилия, И. О.)

Работа принята «___» _____________ 2022г.

Работа выполнена с оценкой _____________________________

Дата защиты «___» _____________ 2022г.

Секретарь ИАК ___________________________________________ __________________

(Фамилия, И. О.) (подпись)

Листов хранения ___________________________________

Демонстрационных материалов _________________________________

2
 Оглавление
ВВЕДЕНИЕ........................................................................................................................................................................4
1. ОПИСАНИЕ СИСТЕМЫ...........................................................................................................................................6
1.1 Организация хранения, добавления и редактирования данных..........................................6
1.2 Описание используемых программных средств разработки...............................................7
1.3 Структура и состав web-приложения.....................................................................................8
2. СТРУКТУРА ДАННЫХ............................................................................................................................................10
2.1 Реляционная база данных PostgreSQL.................................................................................10
2.2 Схема связей в базе данных..................................................................................................10
3. ОПИСАНИЕ РАБОТЫ WEB-ПРИЛОЖЕНИЯ...................................................................................................12
3.1 Общая информация................................................................................................................12
3.2 Главная страница....................................................................................................................12
3.3 Отправка заявки......................................................................................................................13
3.4. Авторизация пользователя...................................................................................................14
3.5 Описание операций................................................................................................................16
3.5.1 Список домов...................................................................................................................16
3.5.2 Список квартир................................................................................................................17
3.5.3 Список заявок..................................................................................................................20
ЗАКЛЮЧЕНИЕ..............................................................................................................................................................21
СПИСОК ЛИТЕРАТУРЫ............................................................................................................................................23

3
Введение

Целью дипломной работы является разработка веб-приложения,

предназначенного для “Управляющих компаний” (УК), которое позволить
хранить информацию об обслуживаемых жилых домах и проживающих.
Также система предназначена для упрощения работы с поступающими
заявками от жителей домов, находящихся под обслуживанием УК.
У сотрудников должна быть возможность иметь доступ для
редактирования данных из любой точки по сети Интернет.
Для реализации проекта необходимо решить следующие задачи:
1. Изучить и выделить основные аспекты работ сотрудников
Управляющих Организаций, которые возможно автоматизировать. Определить
требования заказчика.
2. Выбрать технологии, позволяющие создать приложение в
соответствии с требованиями заказчика.
3. Разработать базу данных (БД), для хранения информации.
4. Разработать web-приложение, реализовав поставленные ранее
задачи.
5. Протестировать полученный программный продукт.
6. Оценить возможности улучшения web-приложения.
Актуальность работы заключается в том, что веб-приложение позволяет
динамично формировать данные о проживающих, а также в режиме реального
времени отслеживать поступающие заявки. Многие жильцы домов все реже
обращаются с заявками по телефону (или лично) и наиболее удобным способом
является отслеживание работы УК через веб-сайт.
Изучение предметной области, а также опрос конечных
пользователей, позволили разработать проект web-приложения, которое по
Новизна работы, заключается в возможности структурировать и
хранить информацию в сфере ЖКХ, а также иметь к ней мгновенный доступ из
любой точки мира. Что позволяет сотрудникам, которые часто выезжают на

4
обследования, вносить информацию через любое устройство с доступом в
Интернет. Сайт обладает простым интуитивно понятным функционалом для
сотрудников.
Значимость работы заключается в том, что web-приложение является
гибким и может быть легко адаптировано под любую Управляющую
Организацию.
Для реализации поставленной задачи была выбрана платформа Java, для
упрощения разработки использовался фреймворк Spring Boot.

5
1. Описание системы
1.1 Организация хранения, добавления и редактирования данных.
Изучение предметной области позволило выявить следующие функции,
реализуемые в процессе работы Управляющей Компании:
1. Дом приходит под обслуживание УК.
2. Сбор информации: адрес, тип дома, объемы, количество квартир.
3. Сбор информации о проживающих
4. Работа с потребителями, обработка заявок.
5. Ежегодные осмотры домов, сбор информации, планирование.

Из чего можно выделить следующие требования:

1. Каждый дом имеет определенный адрес;
2. Адрес может иметь несколько домов;
3. Адрес и дом должны иметь уникальный номер адресообразующего
элемента в государственном адресном реестре ФИАС;
4. Дом может иметь несколько квартир;
5. Добавлять информацию о доме, адресе и квартире может любой
сотрудник;
6. Заявку может оставить любой посетитель сайта;
7. Сотрудник не может удалить заявку;
Предварительное описание связей данных позволит определить
необходимые для разработки классы и методы реализации.

6
 1.2 Описание используемых программных средств разработки
Интегрированной средой разработки при работе над проектом служит
IntelliJ IDEA 2022. Основной язык разработки – Java.
Для реализации работы был выбран фреймворк Spring MVC, поскольку
он обеспечивает архитектуру паттерна Model — View — Controller при помощи
слабо связанных готовых компонентов. Модель MVC предполагает разделение
данных на три отдельных компонента: Модель, Представление и Контроллер -
и обеспечивет независимость для каждого из компонентов.
 Модель объединяет данные приложения, в целом они будут
состоять из POJO («Старых добрых Java-объектов», или бинов).
 Вид отвечает за предоставление данных Модели.
 Контроллер обрабатывает запрос пользователя, создаёт
соответствующую Модель и передаёт её для отображения в Вид.
При реализации проекта для взаимодействия с сущностями базы
данных использовалась библиотека Spring Data JPA. Это решение позволяет
упростить работу с организацией данных в репозитории, извлечением и
изменением данных. Запросы к базе данных реализуются через интерфейс
репозитория, который обеспечивает основные операции по поиску, сохранения,
удалению данных (CRUD). При помощи расширения базового интерфейса
репозитория можно гибко настраивать взаимодействие с базой данных.
Для хранения информации была выбрана объектно-реляционная
система управления базами данных PostgreSQL, так как данное программное
обеспечения распространяется бесплатно и имеет удобный интерфейс для
работы с таблицами базы данных - pgAdmin 4.
Для динамического отображения (рендеринга) данных из БД на
страницах веб-приложения содержимого был выбран шаблнизатор Thymeleaf.
Преимущества Thymeleaf в том, что он может быть легко интегрирован с веб-
фреймворками, такими как Spring MVC, в качестве механизма шаблонов для
веб-приложений.

7
 Для внешнего оформления использовался фреймворк Bootstrap
представляющий собой набор HTML- и CSS- шаблонов оформления для
типографики, веб-форм, кнопок, меток, блоков и иных компонентов веб-
интерфейса, включая JavaScript-расширения.

1.3 Структура и состав web-приложения

Web-приложение состоит из клиентской и серверной частей.
Клиентская часть реализует пользовательский интерфейс, формирует запросы к
серверу и обрабатывает ответы на него. Серверная часть получает запросы от
клиентской части, обрабатывает их, выполняет соответствующие вычисления,
затем формирует веб-страницу и отправляет ее клиенту по сети с
использованием протокола HTTP.
Web-приложение можно представить в виде трех уровней:
1. Слой представления (User Interface Layer).
2. Слой бизнес - логики (Business Logic Layer).
3. Слой доступа к данным (Data Access Layer).
Слой представления описывает пользовательский интерфейс приложения
(UI), то есть представление контента конечному пользователю через
графический интерфейс. К этому уровню можно получить доступ через любой
тип клиентского устройства, например настольный компьютер, ноутбук,
планшет, мобильный телефон, тонкий клиент и т. д. Для контента,
отображаемого пользователю, соответствующие веб-страницы должны
извлекаться веб-браузером или другим компонентом представления,
работающим на клиентском устройстве.
Слой бизнес-логики - на этом уровне работает бизнес-логика
приложения. Бизнес-логика — это набор правил, необходимых для запуска
приложения в соответствии с руководящими принципами, установленными
организацией. Компоненты этого уровня обычно работают на одном или
нескольких серверах приложений. Иногда бизнес-логика выделяется в
отдельный уровень.

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

9
 2. Структура данных
2.1 Реляционная база данных PostgreSQL
Для хранения информации web-приложение использует базу данных
Postgres, в качестве менеджера базы данных используется web-приложение
pgAdmin4 от Postgress.
Выбор данной СУБД обусловлен наличием бесплатного лицензионного
программного обеспечения, наличием web-интерфейса pgAdmin4, простотой
развертывания СУБД и настройки на разных ОС, что позволяет приложению
использовать базу данных без выполнения сложной настройки.
2.2 Схема связей в базе данных
базу данных Postgres «Protocol» содержит в себе 2 таблицы:
 Address – содержит информацию об адресе;
 House – содержит информацию о доме;
 Flat – содержит информацию о квартире;
 Request - содержит инормацию о заявках;
 User – содержит информацию о пользователях;
 Role – содержит информацию о ролях;
Связь таблиц Address и House в базе данных реализуется по типу «один-
ко-многим» - у одного адреса может быть множество домов.
Связь таблиц House и Flat в базе данных реализуется по типу «один-ко-
многим» - у одного дома может быть множество квартир.
Связь таблиц Request и Flat в базе данных реализуется по типу «один-ко-
многим» - у одного квартиры может быть множество запросов.

Связь таблиц User и Role в базе данных реализуется по типу «один-ко-

многим» - у одного пользователя может быть множество ролей.
Схема связей в базе данных приложения представлена на рисунке 1.

10
Рис. 2.1. Схема связей в базе данных в web-приложении

11
 3. Описание работы web-приложения
3.1 Общая информация
Веб-сайт позволяет регистрировать пользователей с разным уровнем
доступа, отображать новостную ленту, формировать и обрабатывать заявки для
УК, а также хранить необходимую информацию о проживающих.
Основными возможностями системы являются:
1. Отправка и обработка заявок от посетителей сайта.
2. Управление сведениями о жилых домах.
3. Управление сведениям о квартирах.
4. Управление сведениями о заявках.

3.2 Главная страница

При входе на сайт посетитель попадает на главную страницу. Вверху
отображается главное меню, со ссылкам на “Отправку заявки” и “Вход в
личный кабинет”.
Внизу отображается контактная информация, а именно телефон по
которому посетитель может связаться с представителями УК.
Также на главное странице содержится основная информация об УК и
возможно размещение новостей.

Рис. 3.1 Главная страница веб-приложения

12
 3.3 Отправка заявки
При переходы с главной страницы в меню по ссылке “Оставить заявку”
открывается форма для отправки заявки в Управляющую организацию.
На странице необходимо указать данные для формирования заявки:
• Выбрать дом
• Указать номер квартиры
• Выбрать тип заявки
• Указать текстовый комментарий
• Указать контактные данные (телефон или почта)

Рис. 3.2 Страница отправки заявки в УК

13
 3.4. Авторизация пользователя
3.4.1 Страница авторизации пользователя
При переходе с главной страницы по вкладке “Войти в личный
кабинет” в меню открывается форма авторизации пользователя, в которой
необходимо указать данные существующей учетной записи пользователя путем
заполнения следующих полей:
 Адрес электронной почты.
 Пароль
Также, есть возможность перейте по ссылке для регистрации нового
пользователя.

Рис. 3.3 Страница авторизации пользователя

14
 3.4.2 Страница регистрации пользователя
На странице “Регистрации” необходимо указать данные для создания
новой учетной записи пользователя путем заполнения следующих полей:
1. Адрес электронной почты.
2. Пароль

После отправки данных можно будет авторизоваться по введеным

учетным данным на странице авторизации пользователя (п.3.4.1)

Рис. 3.4 Страница регистрации пользователя

15
 3.5 Описание операций
Доступ к разделам веб-сайта для пользователй осуществляется с
помощью меню навигации, расположенному в верхней части страницы.
 «Список домов»;
 «Список квартир»;
 «Заявки»;

3.5.1 Список домов

Для просмотра списка необходимо перейти при помощи меню на
страницу «Список домов». Отобразится страница с полным перечнем домов,
которые находятся в базе данных УК. Информация о каждой доме включает в
себя адрес (страна, город, улица), номер дома, тип дома, площадь дома. Также в
верхнем правом углу располагается кнопка позволяющая добавить
информацию о новом доме.
Напротив каждого пункта располагаются ссылки позволяющие:
 изменить сведения о доме;
 удалить дом из списка.

Рис. 3.5 Страница «Список домов»

При удалении дома из списка будет возникать предупреждение (рис.3.6),

запращивающее подтверждение на удаление дома.

16
 Рис. 3.6 Пример предупреждения об удалении дома

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

Рис. 3.6 Пример формы добавления дома

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

3.5.2 Список квартир

Для просмотра списка квартир необходимо перейти на страницу «Список
квартир». Информация о каждой квартире, разбита по домам. Напротив

17
информации о квартирах имеется чекбокс для быстрого удаления квартир (при
помощи кнопки “Удалить квартиры”). Также по кнопке “Добавить квартиру”
можно добавить новую информацию о квартире.

Рис. 3.7 Просмотр списка квартир

18
 Добавление квартир
Для добавления информации о квартире в список необходимо перейти на
страницу «Добавить квартиру». Отобразиться форма для внесения сведений о
новой квартире.

Рис. 3.8 Добавление квартиры

Необходимо выбрать дом, указать номер квартиры и выбрать тип.
После нажатия на кнопку «Добавить» откроется страница со списком
квартир. Покинуть форму без внесения данных можно нажав на кнопку
«Отмена».

19
 3.5.3 Список заявок
Все добавленные заявки при помощи формы «Оставить заявку»
отображаются на странице «Заявки» и имеют информацию о дате создания
заявки, основной информации о заявках. Также можно изменить статус заявки
при помощи чекбокса «Заявка выполнена».

Рис. 3.9 Просмотр списка заявок

20
 Заключение
Результатом выполненной работы является web- приложение для
Управляющих компаний. Данное web-приложение позволяет выполнять
основные задачи стоящие перед сотрудниками Управляющих организаций.
Основная задача по предоставлению доступа к редактированию информации о
жилых домах для сотрудников по сети интернет решена.
Разработанное web-приложение обладает следующими
характеристиками:
1. Web-приложение работает по сети интернет, тем самым является
удобным инструментом при выездном формате работы.
2. Обеспечивает возможность редактирования, просмотра и создания
данных о домах, а также позволяет отслеживать поступающие заявки.
3. Имеет удобный и интуитивно понятный интерфейс пользователя.
4. Обеспечивает возможность отправки заявки в УК для любого
посетителя сайта.
В процессе создания были решены задачи, облегчающие взаимодействие
пользователя с системой, а именно:
 Реализация вывода протоколов испытаний списком из БД;
 Реализована возможность создания и редактирования объектов БД;
 Реализовано отслеживание времени полученной заявки;
 Добавлена возможность удалять несколько квартир;
 Добавлена возможность изменения статуса заявки;
В качестве будущих улучшений Web-приложения, можно выделить
следующее: В качестве будущих улучшений Web-приложения, можно выделить
следующее:
 Интеграция с ГИС ЖКХ
 Добавление возможности передачи показаний за ЖКХ
 Добавление информации о проживающих
 Расчет начислений за услуги за ЖКХ
 Добавление возможности оплатить услуги УК на сайте.
21
 Web-приложение можно внедрить в любую управляющую организацию с
минимальным количеством изменений и трудозатрат.

22
 Список литературы

1. Уоллс К. Разработка Spring в действии. – М.:ДМК Пресс, 2013г.

2. Раджпут Динеш. Spring. Все паттерны проектирования. -
СПб.:Питер, 2019г.
3. Thymeleaf documentation [Электронный ресурс]. – Режим доступа:
https://www.thymeleaf.org/documentation.html
4. Documentation postgresql [Электронный ресурс]. – Режим доступа:
https://www.postgresql.org/docs/. – Заглавие с экрана.
5. Documentation Bootstrap [Электронный ресурс]. – Режим доступа:
https://getbootstrap.com/docs/5.2/getting-started/introduction/. – Заглавие с экрана.

23