WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО ПІДПРИЄМСТВА

Грищенко, Богдан Сергійович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6874
Title:	WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО ПІДПРИЄМСТВА
Authors:	Катаєв, Дмитро Сергійович Грищенко, Богдан Сергійович
Keywords:	web-орієнтована система;інформаційна система;Тестування;комунальне підприємство;база даних
Issue Date:	5-Jun-2025
Abstract:	У сучасних умовах діджиталізації та швидкого технологічного розвитку комунальні підприємства зіштовхуються з необхідністю модернізації своїх управлінських процесів, зокрема в частині обліку та контролю технічних засобів. Впровадження web-орієнтованої інформаційної системи обліку пристроїв є надзвичайно важливим кроком у цьому напрямі. Web-орієнтовна інформаційна система обліку пристроїв забезпечить можливості комунальному підприємству централізовано зберігати дані про всі наявні пристрої (лічильники, насоси, котли, системи водопостачання тощо), що дає змогу оперативно отримувати інформацію про їхній технічний стан, розташування, дату останнього обслуговування та потребу в ремонті або заміні. Крім того, web-орієнтований формат забезпечує доступність — працівники можуть працювати із системою з будь-якого пристрою, підключеного до Інтернету, незалежно від їхнього фізичного місця розташування. Це особливо актуально в умовах децентралізованої структури комунальних підприємств або під час надзвичайних ситуацій. Наявність такої системи сприяє прозорості та підзвітності: можна формувати звітність для внутрішніх потреб або зовнішніх перевірок, зменшуючи ризик втрати інформації чи її дублювання. Вона також дозволяє аналізувати ефективність використання технічних ресурсів, планувати закупівлі та оптимізувати витрати.. Тому розробка розробка web-орієнтованої інформаційної системи обліку пристроїв комунального підприємства є актуальною задачею, що відповідає потребам часу. Така система дозволяє автоматизувати облік, забезпечити прозорість даних, швидкий доступ до інформації, а також полегшує прийняття управлінських рішень. Web-орієнтований формат забезпечує зручний доступ до системи з будь-якого пристрою через інтернет, що особливо важливо для підприємств з розгалуженою структурою або територіально віддаленими об’єктами.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6874
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)
Files in This Item:
File	Description	Size	Format
РЕП_БАК_Грищенко_WEB-2111.pdf Restricted Access		1.66 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ  
Факультет інформаційних технологій і систем 
Кафедра інформаційних технологій проектування 
 
 
 
 
 
 
 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
 
до кваліфікаційної роботи бакалавра 
 
 
 
на тему: 
 
«WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА 
СИСТЕМА ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО 
ПІДПРИЄМСТВА» 
 
  
 
Виконав студент групи WEB-2111,  
спеціальності 126 – 
Інформаційні системи та 
технології,  
освітня програма – Web- 
технології Web-дизайн,  
Грищенко Б.С. 
Керівник к.т.н., ст. викладач Катаєв Д.С. 
Рецензент Директор ТОВ Андерсенлаб 
 Алєсін О. 
 
 
 
 
Черкаси – 2025 
 
 
 
 
ЗМІСТ 
ВСТУП .............................................................................................................. 3 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................. 5 
1.1 Особливості діяльності комунального підприємства ............................ 5 
1.2 Постановка задачі..................................................................................... 12 
1.3 Огляд та аналіз існуючих аналогів ......................................................... 15 
1.4 Висновки до розділу 1 ............................................................................. 17 
2 ПРОЄКТУВАННЯ WEB-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ 
СИСТЕМИ ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО   
ПІДПРИЄМСТВА .......................................................................................... 18 
2.1 Розробка архітектури системи ................................................................ 18 
2.2 Вибір методів та засобів реалізації ........................................................ 25 
2.3 Структура бази даних. ............................................................................. 30 
2.4 Розробка макета web-орієнтованої інформаційної системи .. Помилка! 
Закладку не визначено. 
2.5 Висновки до розділу 2 ............................................................................. 34 
3 РОЗРОБКА ПРОГРАМНОЇ ЧАСТИНИ ................................................... 35 
3.1 Написанні коду ......................................................................................... 35 
3.2 Структура головної сторінки ........ Помилка! Закладку не визначено. 
3.3 Структура js та css файлів ............. Помилка! Закладку не визначено. 
3.4 Тестування ...................................... Помилка! Закладку не визначено. 
3.5 Висновки до розділу 3 ............................................................................. 45 
ВИСНОВКИ .................................................................................................... 47 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ...................................................... 49 
ДОДАТОК A 482 ЧДТУ 21982-01 Web-орієнтованф інформаційна система 
обліку пристороїв комунального підприємства. 
Специфікація………………………………………………………………...53 
 
 ЧДТУ 211982.005 ПЗ 
Зм. Лист № докумемента Підпис Дата  
Розроб. .Грищенко Б.С. 
 Літ. Лист Листів 
Перев. Катаєв Д.С. Web-орієнтована інформаційна 
 . 
 система обліку пристроїв Н 2 76 
Реценз  комунального підприємства. ФІТІС,  
Н. . контр. .Катаєв Д.С. 
Пояснювальна записка 
Прокопенко Т.О. кафедра ІТП, Web-2111 
Затв.  
 
 
ВСТУП 
 У сучасних умовах діджиталізації та швидкого технологічного розвитку 
комунальні підприємства зіштовхуються з необхідністю модернізації своїх 
управлінських процесів, зокрема в частині обліку та контролю технічних засобів. 
Впровадження web-орієнтованої інформаційної системи обліку пристроїв є 
надзвичайно важливим кроком у цьому напрямі. 
Web-орієнтовна інформаційна система обліку пристроїв забезпечить 
можливості комунальному підприємству централізовано зберігати дані про всі 
наявні пристрої (лічильники, насоси, котли, системи водопостачання тощо), що 
дає змогу оперативно отримувати інформацію про їхній технічний стан, 
розташування, дату останнього обслуговування та потребу в ремонті або заміні. 
Крім того, web-орієнтований формат забезпечує доступність — 
працівники можуть працювати із системою з будь-якого пристрою, підключеного 
до Інтернету, незалежно від їхнього фізичного місця розташування. Це особливо 
актуально в умовах децентралізованої структури комунальних підприємств або 
під час надзвичайних ситуацій. 
Наявність такої системи сприяє прозорості та підзвітності: можна 
формувати звітність для внутрішніх потреб або зовнішніх перевірок, зменшуючи 
ризик втрати інформації чи її дублювання. Вона також дозволяє аналізувати 
ефективність використання технічних ресурсів, планувати закупівлі та 
оптимізувати витрати.. 
Тому розробка розробка web-орієнтованої інформаційної системи обліку 
пристроїв комунального підприємства є актуальною задачею, що відповідає 
потребам часу. Така система дозволяє автоматизувати облік, забезпечити 
прозорість даних, швидкий доступ до інформації, а також полегшує прийняття 
управлінських рішень. Web-орієнтований формат забезпечує зручний доступ до 
системи з будь-якого пристрою через інтернет, що особливо важливо для 
підприємств з розгалуженою структурою або територіально віддаленими 
об’єктами. 
Арк. 
ЧДТУ 211982.005 ПЗ 3 
З м н. Арк. №  докум. Підпис  
    Дата 
 
 
Метою роботи є проєктування та розробка web-орієнтованої 
інформаційної системи обліку пристроїв комунального підприємства, що надасть 
можливість підвищити ефективність роботи підприємства та відповідає 
загальнонаціональній тенденції цифрової трансформації сфери житлово-
комунального господарства. 
Для досягнення мети роботи необхідно розв’язати наступні задачі: 
 дослідити та проаналізувати веб-орієнтовані системи, що 
забезпечують користувачеві роботу з даними. Порівняти їх 
функціональність та визначити переваги та недоліки; 
 розробити специфікацію вимог до майбутньої системи; 
 розробити архітектуру системи та структуру бази даних; 
 здійснити вибір мови програмування та технологій для програмної 
реалізації веб-орієнтованої системи; 
 розробити web-орієнтовану  інформаційну систему обліку пристроїв 
комунального підприємства відповідно до умов, перелічених в 
попередніх пунктах. 
Об’єктом дослідження є процес обліку технічних пристроїв у 
комунальному підприємстві, зокрема — організація, ведення та зберігання 
облікової інформації, яка стосується обладнання, техніки та пристроїв, що 
використовуються у господарській діяльності підприємства.. 
Предметом дослідження є застосування сучасних інформаційних 
технологій для розробки програмного продукту, який забезпечуватиме 
можливість зменшення обсягів паперової роботи, більше порядку, швидкий 
доступ до потрібної інформації та впевненість, що нічого не загубиться.  
 
 
 
 
Арк. 
ЧДТУ 211982.005 ПЗ 4 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ 
1.1  Особливості діяльності комунального підприємства 
Комунальне підприємство (КП) — це підприємство, засноване на 
комунальній власності територіальної громади, яке створюється органами 
місцевого самоврядування (міськими, селищними, сільськими радами). 
Комунальним підприємством в Україні є самостійний господарюючий статутний 
суб'єкт, що може здійснювати виробничу, науково-дослідну та комерційну 
діяльність із метою одержання відповідного прибутку (доходу). 
Органи місцевого самоврядування можуть утворювати, реорганізовувати 
та ліквідовувати комунальні підприємства (заклади, установи). Відносини цих 
органів з комунальними підприємствами будуються на засадах їхньої 
підпорядкованості, підзвітності та підконтрольності органам місцевого 
самоврядування. До відання виконкомів органів сільських, селищних і міських 
рад згідно з їхніми повноваженнями з управління комунальною власністю 
належить встановлення порядку та здійснення контролю за використанням 
прибутків комунальних підприємств, а також заслуховування звітів про роботу 
їхніх керівників [1].  
Основними особливостями діяльності комунальних підприємств є 
наступні [2]:  
1.Власником майна КП є територіальна громада, а розпоряджається цим 
майном відповідна рада або її виконавчий орган. Майно КП є невід’ємною 
частиною комунальної власності, але підприємство має оперативне управління 
цим майном. 
2. Основною метою створення КП є  забезпечення потреб населення у 
послугах: водопостачання, вивіз сміття, теплопостачання, громадський 
транспорт тощо. 
На відміну від приватного бізнесу, метою КП не завжди є отримання 
прибутку, хоча воно може здійснювати прибуткову діяльність. 
3. Правове регулювання КП здійснюється згідно з: 
Арк. 
ЧДТУ 211982.005 ПЗ 5 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
- Господарським кодексом України; 
- Законом України «Про місцеве самоврядування»; 
- Статутом підприємства, який затверджує місцева рада. 
 4. Фінансування КП можуть отримувати за: 
- кошти з місцевого бюджету; 
- власні прибутки від діяльності; 
- Гранти, субвенції, кредити, інвестиції. 
Крім того, КП можуть бути дотаційними (працювати у збиток, 
компенсуючи це бюджетною підтримкою). 
5. Контроль і підзвітність КП реалізується  органам місцевої влади. КП 
проходять аудит, перевірки, оцінку ефективності діяльності. Звітують про 
витрати бюджетних коштів, виконання соціальних програм. 
 6. Соціальна відповідальність є важливою особливістю діяльності КП. 
Важлива роль КП полягає в створенні соціально значущих послуг таких, як: 
- підтримка незахищених верств населення, 
- забезпечення безперервної подачі життєво необхідних ресурсів 
(вода, тепло), 
- участь у програмах розвитку інфраструктури. відстежувати на 
великому екрані, де транслюється ігровий процес.  
В роботі [3]  наведено результати досліджень щодо проблем розроблення 
фінансової стратегії комунальних установ, які вважаються основним джерелом 
коштів для оновлення та удосконалення основних засобів, тому особливої уваги 
набуває знаходження оптимальних шляхів для підвищення рівня діяльності 
комунальних установ та перетворення їх у одне з основних джерел фінансового 
забезпечення сталого розвитку території. Систематизація літературних джерел та 
підходів до вирішення проблеми інформатизації діяльності комунальних 
підприємств дає змогу визначити дієві інструменти автоматизації обліку, 
управління ресурсами, запровадження CRM-систем для покращення взаємодії з 
громадянами, а також оптимізувати внутрішні бізнес-процеси шляхом 
Арк. 
ЧДТУ 211982.005 ПЗ 6 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
впровадження програмного забезпечення для електронного документообігу та 
аналітики. Актуальність полягає в тому, що сучасні виклики цифрової 
трансформації вимагають від комунальних підприємств переходу до ефективних, 
прозорих та клієнтоорієнтованих моделей управління, де інформаційні 
технології стають ключовим інструментом підвищення якості послуг, зниження 
витрат і забезпечення відкритості перед громадою. 
Інформатизація діяльності комунальних підприємств — це впровадження 
сучасних інформаційних технологій у процеси управління, обслуговування 
населення та внутрішньої організації роботи підприємств, що надають 
комунальні послуги (вода, тепло, електроенергія, вивіз сміття, транспорт тощо). 
Основними ключовими напрямками впровадження інформатизації в 
комунальних підприємствах є наступні [4]: 
1. Електронний документообіг: 
- автоматизація внутрішньої звітності; 
- обмін документами з міськими радами, підрядниками, 
постачальниками; 
- використання цифрового підпису. 
2. CRM-системи (управління взаємодією з клієнтами): 
- особисті кабінети для споживачів; 
- звернення громадян та облік запитів; 
- контроль виконання заявок. 
3. Облік ресурсів і білінг, що передбачає впровадження систем 
автоматичного зчитування показників (наприклад, «розумні» лічильники). 
- електронна генерація квитанцій; 
- оплата онлайн. 
4. GIS-технології (геоінформаційні системи), тобто картографування 
мереж водопостачання, каналізації, електромереж, що передбачає швидке 
реагування на аварії завдяки точному позиціонуванню. 
Арк. 
ЧДТУ 211982.005 ПЗ 7 
З м н. Арк. №  докум. Підпис Дата  
   
 
 
5. ERP-системи (управління ресурсами підприємства), що виконують 
функції планування закупівель, матеріалів, ремонту техніки, а також управління 
персоналом (кадровий облік, графіки, нарахування зарплатні). 
Комунальні підприємства використовують різноманітні пристрої та 
технічні засоби, які допомагають їм ефективно обліковувати, контролювати та 
надавати послуги. Для ефективного функціонування комунального підприємства 
на сьогоднішній день важливим є автоматизація функцій обліку даних про 
пристрої, що застосовуються. Основними категоріями пристроїв, що 
застосовуються в їхній діяльності є наступні: 
1. Системи обліку ресурсів (Smart-лічильники), що дають змогу точно 
вимірювати споживання та передавати дані автоматично (табл.1.1): 
Таблиця 1.1. 
Аналіз пристроїв комунальних підприємств 
Тип Пристрій Призначення 
Водопостачан Автоматично передають 
ня Смарт-лічильники води показники у базу даних 
 підприємства. 
Вимірюють споживане 
Опалення Теплолічильники  тепло у будівлях чи 
квартирах. 
Електропоста Електронні лічильники Дають змогу враховувати 
чання електроенергії тарифні зони та 
 зменшувати витрати. 
Газопостачан Газові лічильники нового Можуть підключатися до 
ня покоління центрального сервера для 
  контролю. 
2. Контрольно-вимірювальні пристрої та діагностика. Комунальні 
підприємства використовують ці пристрої для виявлення витоків, перевірки 
тиску, температури, витрати ресурсів [5]: 
- ультразвукові детектори витоку (для води та газу); 
Арк. 
ЧДТУ 211982.005 ПЗ 8 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
- датчики тиску і температури (у трубопроводах); 
- портативні аналізатори води (перевіряють якість води без 
лабораторії); 
- тепловізори — для виявлення тепловтрат будинків і дефектів 
мережі. 
 3. Комунікаційне обладнання.Це пристрої, які передають інформацію з 
лічильників та датчиків до центральної системи: 
- модеми GSM/3G/4G — для бездротової передачі даних; 
- LoRaWAN / NB-IoT модулі — енергоефективний зв’язок для 
пристроїв "розумного міста"; 
- Wi-Fi / Ethernet-модулі — у багатоквартирних будинках з 
локальними мережами. 
 4. GPS / ГІС-технології, що застосовуються для транспорту та 
моніторингу інфраструктури: 
- GPS-трекери — у транспорті (тролейбуси, сміттєвози, аварійні 
машини); 
- геоінформаційні планшети — для польових працівників, що 
обслуговують мережі; 
- дрони — для обстеження важкодоступних ділянок трубопроводів, 
ліній електропередачі. 
 5. Спеціалізована техніка з цифровим керуванням: 
- автомобілі для прочистки каналізацій з комп’ютерним монітором 
тиску; 
- комунальні трактори з навігаційною системою; 
- сміттєвози з чіпованими контейнерами (встановлення RFID-міток). 
 6. Центри керування (Smart-центри.)У таких центрах застосовуються: 
- відеостінки з моніторингом ресурсів; 
Арк. 
ЧДТУ 211982.005 ПЗ 9 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
- Сервери для зберігання й обробки даних з усіх пристроїв; 
- Робочі станції диспетчерів з ПЗ для контролю ситуацій у реальному 
часі. 
Web-орієнтована інформаційна система обліку пристроїв комунального 
підприємства має низку важливих переваг, які суттєво покращують ефективність 
управління, прозорість процесів і зручність для користувачів. Метою 
кваліфікаційної роботи є підвищення ефективності функціонування  
комунального підприємства шляхом розробки веб-орієнтованої інформаційної  
системи обліку пристроїв, що сприятиме обміну інформацією, включає 
створення сучасної платформи, що забезпечує ефективну взаємодію між 
відділами, технічними працівниками, адміністрацією і зовнішніми системами. 
Така веб-орієнтована інформаційна  система забезпечить можливості широкому 
колу користувачів. Її гнучкість і доступність дозволяють ефективно взаємодіяти 
як технічному персоналу, так і адміністрації, аналітикам, а при потребі — навіть 
зовнішнім підрядникам або партнерам. 
Розробка цієї системи та її використання пропонують користувачам такі 
переваги: 
- швидкий доступ до інформації про пристрої, місце встановлення, 
стан; 
- можливість оновлення даних прямо з місця виїзду (через мобільний 
пристрій); 
- автоматичне формування звітів про виконані роботи ; 
- аналітика та дашборди для контролю ефективності обслуговування; 
- звіти про витрати, збої, терміни обслуговування; 
- планування ресурсів і розподіл завдань; 
- доступ до історичних даних для розрахунку вартості володіння 
обладнанням (TCO); 
- тимчасовий доступ до інформації про конкретні об’єкти/пристрої. 
 
Арк. 
ЧДТУ 211982.005 ПЗ 10 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
Для користувача така система є зручним, масштабованим інструментом 
для цифрової трансформації комунального підприємства. 
 
1.2 Постановка задачі 
Один з основних шляхів підвищення ефективності діяльності 
комунального підприємства є автоматизація обліку наявних пристроїв, що 
сприятиме визначенню номенклатури показників технічного рівня, їх кількісні 
значення та шкали, методи згортки частинних показників в узагальнений чи їх 
взаємне узгодження за певними схемами, оцінку важливості (цінність, 
пріоритетність) окремих показників для конкретного варіанту управління. Це не 
лише мінімізує можливі ризики, а й стане основою для автоматизації інших 
процесів діяльності комунального підприємства.  
Ефективність рішення задачі суттєво підвищується завдяки засобам 
інформатизації та автоматизації, які дозволяють оперативно виконувати 
математичні дії та використовувати їх для формування, редагування і друку 
отриманих даних. Автоматизація обчислень необхідна перш за все самим 
інженерам для ефективного виконання своїх функцій. І тут застосування web 
орієнтованих інформаційних систем надає ряд істотних переваг [6]. 
Обчислювальна потужність комп'ютера дозволяє використовувати його як 
засіб автоматизації обчислювальних процесів. Для вирішення складних 
розрахункових завдань використовують програми, які призначені для 
математичних обчислень. Для якісного та швидкого виконання математичних 
операцій використовується автоматизація розрахунків. 
Формування функціональних та нефункціональних вимог — критичний 
етап при розробці будь-якої інформаційної системи. Він дає чітке бачення, що 
саме має реалізовуватись, і в яких умовах система повинна працювати [7]. 
W
e
b 1. Облік пристроїв: 
о Арк. 
ЧДТУ 211982.005 ПЗ 
р 11 
З м н. Арк. №  докум. Підпис Дата  
 
і
є
 
 
- реєстрація нового обладнання: внесення даних про пристрій (тип, 
модель, серійний номер, місце встановлення); 
- каталогізація: групування пристроїв за типами, функціональністю, 
призначенням; 
- прив’язка до об’єктів інфраструктури: наприклад, до будинків, 
котелень, насосних станцій тощо. 
 2. Моніторинг стану пристроїв: 
- регулярне оновлення інформації про технічний стан (наприклад, на 
підставі планових перевірок або показів сенсорів); 
- фіксація збоїв та несправностей, автоматичне створення 
повідомлень або завдань на обслуговування. 
 3. Управління технічним обслуговуванням: 
- Планування профілактичних робіт: графіки перевірок, калібрування, 
обслуговування. 
- Ведення історії обслуговування: хто, коли і що робив, які були 
витрати. 
- Контроль виконання ремонтних завдань. 
 4. Управління персоналом і доступом 
- Розподіл ролей: адміністратор, технік, інспектор тощо. 
- Контроль дій користувачів: хто і коли вносив зміни. 
- Журнал аудиту: забезпечення прозорості процесів. 
 5. Управління запасними частинами та матеріалами 
- Облік на складі: які комплектуючі є в наявності, залишки, терміни 
придатності. 
- Автоматичне списання/додавання залежно від робіт. 
- Формування заявок на постачання. 
 6. Аналітика та звітність 
- Генерація звітів про кількість пристроїв, їхній стан, витрати на 
обслуговування. 
Арк. 
ЧДТУ 211982.005 ПЗ 12 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
- Інтеграція з бухгалтерськими/ERP системами. 
- Побудова графіків, KPI, дашбордів. 
 
 
Процес робити 
 користувача з системою 
 
 
 
 
 
 Облік Моніторинг Технічне 
пристроїв стану пристроїв обслуговування 
 
 
Рисунок 1.1 – Діаграма бізнес-процесів веб-орієнтованої системи 
оздоровчого закладу 
Функціональні вимоги web-орієнтованої інформаційної системи обліку 
пристроїв комунального підприємства є конкретними діями, які система повинна 
виконувати. Вони визначають функціональність, яку користувач очікує від 
системи. 
Основними функціональними вимогами web-орієнтованої інформаційної 
системи обліку пристроїв комунального підприємства є наступні: 
- аутентифікація та авторизація користувачів; 
- реєстрація та вхід користувачів (адміністратор, технік, бухгалтер 
тощо); 
- розмежування прав доступу; 
- облік пристроїв; 
- додавання нового пристрою (тип, серійний номер, дата 
встановлення, адреса); 
- редагування та видалення даних про пристрої; 
- прив'язка до об'єкта (будинок, насосна станція, тощо); 
Арк. 
ЧДТУ 211982.005 ПЗ 13 
З м н. Арк. №  докум. Підпис  
 Дата 
 
 
- пошук і фільтрація за типом пристрою, локацією, датою 
встановлення, статусом; 
- облік технічного обслуговування; 
- запис техобслуговування або ремонту. 
 Нефункціональні вимоги web-орієнтованої інформаційної системи обліку 
пристроїв комунального підприємства стосуються вимоги до якості системи, її 
продуктивності, безпеки, сумісності тощо. Продуктивність характеризується тим, 
що система повинна забезпечувати швидкий відгук (< 2 сек при перегляді списку 
до 1000 пристроїв). Підтримка одночасної роботи не менше ніж 20 користувачів 
без помітної втрати швидкості. Безпека має забезпечити шифрування паролів 
(наприклад, з використанням bcrypt); захист від SQL-ін’єкцій та XSS-атак; HTTPS 
для передавання даних.  Доступність реалізується через роботу в сучасних 
браузерах (Chrome, Firefox, Edge); адаптивність інтерфейсу під мобільні пристрої 
(за бажанням). Масштабованість може розглядатися через можливість додавання 
нових модулів без зміни базової архітектури.  Надійність і збереження даних 
забезпечує регулярне створення резервних копій, відновлення системи після збою 
не пізніше 15 хвилин.  
Для ефективної реалізації web-орієнтованої інформаційної системи обліку 
пристроїв комунального підприємства необхідно чітко окреслити як 
функціональні, так і нефункціональні вимоги. Функціональні вимоги 
відповідають за виконання ключових бізнес-процесів, тоді як нефункціональні — 
гарантують якість, безпеку та стабільність роботи системи. Їх належна реалізація 
забезпечить ефективне управління технічними ресурсами підприємства та 
підвищить рівень цифрової трансформації у сфері ЖКГ. Теоретична основа їх 
розробки включає: 
- клієнт-серверну архітектуру; 
- HTTP/HTTPS протоколи; 
- мови розмітки та стилізації (HTML, CSS); 
- мова програмування (JavaScript); 
Арк. 
ЧДТУ 211982.005 ПЗ 14 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
- СУБД (MySQL). 
 
1.3 Огляд та аналіз існуючих аналогів 
Аналіз існуючих систем в управління КП забезпечує можливості виявити 
сильні та слабкі сторони поточних рішень, уникнути дублювання, знайти ідеї для 
вдосконалення власної системи. 
У сфері комунальних підприємств застосовуються наступні відомі web-
орієнтовані інформаційні системи обліку пристроїв.    
МІС: КП «Міськводоканал» [33] застосовує систему обліку водомірів. 
Дана система має наступний функціонал: 
- реєстрація лічильників води (тип, дата встановлення, місце); 
- облік показників; 
- автоматичне формування звітності; 
- інтеграція з бухгалтерією та GIS. 
Перевагами даної системи є: 
- простий інтерфейс; 
- інтеграція з обліком споживачів; 
Однак система має і наступні недоліки: 
- відсутність мобільної версії; 
- орієнтованість лише на один тип пристроїв (лічильники води). 
Система  SAP ERP  Модуль управління активами (EAM) характеризується 
наступним функціоналом: 
- повний життєвий цикл обліку технічного обладнання; 
- графіки техобслуговування; 
- робочі наряди, історія поломок; 
- інтеграція з фінансовими модулями. 
Серед переваг системи варто виділити: 
- потужна аналітика; 
- надійність, масштабованість. 
Арк. 
ЧДТУ 211982.005 ПЗ 15 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
Недоліки: 
- висока вартість; 
- складність впровадження для малих КП. 
Наступна система, яку варто відзначити є Open Source: OpenMAINT [34]. 
Функціонал даної системи забезпечує наступні можливості: 
- облік інфраструктурних активів; 
- планування техобслуговування; 
- зберігання документів (паспорт пристрою, інструкція); 
- веб-інтерфейс і REST API. 
Основними перевагами є те що дана система безкоштовна та гнучка у 
налаштуванні. Як недоліки варто відзначити наявність технічних навичок для 
налаштування та інтерфейс менш дружній порівняно з комерційними рішеннями. 
Ще однією системою, що варто дослідити є  інформаційна система ЖКГ 
«Мій Дім Онлайн» (Україна) [35]. Функціонал даної системи забезпечує: 
- облік приладів обліку в житловому фонді; 
- подача показників; 
- зворотній зв’язок із мешканцями; 
- інтеграція з платіжними системами. 
Переваги даної системи: 
- проста для впровадження у житлових підприємствах; 
- доступна техпідтримка в Україні. 
Недоліком є основний фокус — взаємодія з мешканцями, а не 
інвентаризація пристроїв. 
Проведений аналіз існуючих web-орієнтованих інформаційних систем 
обліку показує, що більшість з них орієнтовані або на специфічні типи пристроїв 
(наприклад, лічильники води), або мають надмірно складну структуру (як-от 
SAP), що не завжди відповідає потребам малих і середніх комунальних 
підприємств. Тому актуальним є створення гнучкої, масштабованої системи з 
Арк. 
ЧДТУ 211982.005 ПЗ 16 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
підтримкою кількох типів пристроїв, веб-інтерфейсом та можливістю інтеграції з 
іншими службами. 
1.4 Висновки до розділу 1 
У першому розділі проаналізовано предметну область розробки web-
орієнтованої інформаційної системи обліку пристроїв комунального 
підприємства. Досліджено структуру та напрямки діяльності об’єкта управління. 
Досліджено бізнес-процеси, що реалізуються комунальним підприємством. Для 
кращого розуміння web-орієнтованої системи порівняно чотири аналогічні 
продукти: МІС: КП «Міськводоканал» , web-орієнтована інформаційна система 
SAP ERP  Модуль управління активами (EAM), web-орієнтована інформаційна 
система  Open Source: OpenMAINT, інформаційна система ЖКГ «Мій Дім 
Онлайн» (Україна). Після порівняння функцій досліджуваних систем, визначено 
переваги та недоліки, які необхідно враховувати в процесі розробки web-
орієнтованої інформаційної системи обліку пристроїв комунального 
підприємства. Також в розділі описані функціональні та нефункціональні вимоги 
до розроблюваної системи. 
Арк. 
ЧДТУ 211982.005 ПЗ 17 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
2 ПРОЄКТУВАННЯ WEB-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ 
СИСТЕМИ ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО ПІДПРИЄМСТВА 
2.1 Розробка архітектури системи 
Деякі web-орієнтовані інформаційні системи використовують дворівневу 
архітектуру, а інші використовують n-рівневу архітектуру, яка складається з 
трьох або більше рівнів. 
У дворівневій архітектурі клієнт знаходиться на першому рівні. Сервер 
бази даних і сервер веб-додатків знаходяться на одному сервері, який є другим 
рівнем. Цей другий рівень обслуговує дані та виконує бізнес-логіку для веб-
додатку. Організації, які віддають перевагу цій архітектурі, зазвичай віддають 
перевагу консолідації можливостей своїх додатків та можливостей сервера баз 
даних на одному рівні. Другий рівень відповідає за забезпечення характеристик 
доступності, масштабованості та продуктивності веб-середовища організації [8]. 
У n-рівневій архітектурі об'єкти додатків розподілені по кількох логічних 
рівнях, зазвичай трьох або чотирьох. 
У трирівневій архітектурі сервер бази даних не використовує спільний 
сервер із сервером веб-додатків. Клієнт знаходиться на першому рівні, як і в 
дворівневій архітектурі. На третьому рівні сервер бази даних обслуговує дані. З 
міркувань продуктивності сервер бази даних зазвичай використовує збережені 
процедури для обробки частини бізнес-логіки. Сервер застосунків розташований 
на другому рівні. Сервер застосунків обробляє ту частину бізнес-логіки, яка не 
потребує функціональності, що надає сервер бази даних. У цьому підході апаратні 
та програмні компоненти другого та третього рівнів несуть спільну 
відповідальність за доступність, масштабованість та характеристики 
продуктивності веб-середовища [9]. 
У чотирирівневій архітектурі в межах середнього рівня або рівня 
інформаційної системи підприємства може існувати більше одного логічного 
рівня. Наприклад: 
Арк. 
ЧДТУ 211982.005 ПЗ 
 18 
З м н. Арк. №  докум. Підпис Дата 
 
 
Середній рівень може складатися з більш ніж одного веб-сервера. Як 
варіант, проміжний брандмауер може відокремлювати веб-сервер від сервера 
застосунків на середньому рівні. 
Сервер бази даних на третьому рівні може бути джерелом даних для веб-
сервера на середньому рівні, а інший сервер бази даних на четвертому рівні є 
джерелом даних для сервера бази даних на третьому рівні. 
Якщо оглянути всі веб-застосунки, доступні сьогодні, можна знайти 
багато варіацій. Наприклад, сервери баз даних можуть працювати на різних 
платформах, як і клієнти. Розробники веб-застосунків використовують різні 
інструменти, які впливають на те, як працюють застосунки та як вони виглядають. 
Різні компанії обирають різні інструменти. Елементи пазлу, з яких складаються 
пазли однієї компанії, зрештою відрізняються від пазлів інших компаній. 
У багатьох випадках клієнт і сервер веб-застосунку працюють на різних 
операційних системах. Наприклад, клієнт може бути на операційній системі на 
базі робочої станції, такій як Windows XP або UNIX. Сервер для застосунку також 
може бути на сервері на базі робочої станції або на корпоративному сервері, 
такому як z/OS®. На наступному рисунку показано дворівневе з'єднання між 
клієнтом на базі робочої станції та обома типами серверів. 
Архітектура web-орієнтованої інформаційної системи обліку пристроїв 
комунального підприємства є ключовим компонентом даного проєкту. 
Архітектура визначає, як система побудована, які її компоненти і як вони 
взаємодіють між собою [10].  
Для розробки web-орієнтованої інформаційної системи обліку пристроїв 
комунального підприємства було обрано трирівневу архітектуру, яка забезпечує 
розділення логіки інтерфейсу, обробки даних та зберігання інформації. Такий 
підхід дозволяє досягти масштабованості, простоти обслуговування та адаптації 
до нових вимог підприємства. Архітектура включає клієнтський рівень (веб-
інтерфейс), серверну частину (API та бізнес-логіка) і рівень бази даних 
(зберігання пристроїв, користувачів та історії обслуговування). 
Арк. 
ЧДТУ 211982.005 ПЗ 
 19 
З м н. Арк. №  докум. Підпис Дата 
 
 
Клієнт-серверна архітектура  представляє  модель, у якій завдання 
розподіляються між клієнтом (користувачем) і сервером (центральною 
обчислювальною системою). У випадку  web-орієнтованої інформаційної системи 
обліку пристроїв комунального підприємства  взаємодія відбувається через веб-
браузер. 
Розглянемо детально компоненти архітектури web-орієнтованої 
інформаційної системи обліку пристроїв комунального підприємства (рис.2.1).  
Клієнтська частина (Front-end), що представляє  інтерфейс користувача 
(UI) та  реалізується за допомогою HTML, CSS, JavaScript. Може 
використовуватись фреймворки типу React, Vue.js чи Angular. Відображає списки 
пристроїв, форму для додавання/редагування, панель фільтрів, пошук тощо. 
Функції клієнта наступні[11]: 
- надсилає запити до сервера (наприклад, отримати список пристроїв, 
додати новий); 
- відображає відповіді сервера користувачеві; 
- валідація введених даних на боці клієнта. 
 
Рис. 2.1. Клієнт-серверна архітектури 
 
Арк. 
ЧДТУ 211982.005 ПЗ 20 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
 
 Серверна частина (Back-end) представляє  web -сервер / API та 
реалізується, наприклад, на Node.js, Python (Django), PHP (Laravel), Java (Spring 
Boot). Обробляє HTTP-запити (GET, POST, PUT, DELETE). Забезпечує 
автентифікацію, авторизацію (наприклад, через JWT або сесію). Реалізує бізнес-
логіку (наприклад, перевірку унікальності інвентарного номера пристрою). 
База даних (Data Layer) є сховищем інформації про пристрої, типи, стани, 
історію обслуговування тощо. СУБД: PostgreSQL, MySQL, MongoDB. Дані 
організовані у вигляді таблиць: Devices, DeviceTypes, MaintenanceLogs, Users. 
 Мережевий рівень  є з'єднанням, що забезпечується  HTTP/HTTPS 
протокол — забезпечує безпечну передачу даних.  REST API або GraphQL — 
інтерфейс взаємодії між клієнтом і сервером. 
 
2.2.  Вибір методів та засобів реалізації 
Система повинна бути зручною  та доступною для будь-якого КП. Щоб 
користувач міг мати доступ до системи, вона повинна бути реалізована з 
використанням хмарних технологій. 
Хмарні технології – це парадигма, що передбачає віддалену обробку та 
зберігання даних. Хмара – це деякий сервер, де зберігаються дані та програми, що 
з'єднуются з користувачами через Інтернет [12]. 
До хмарних технологій відносяться хмарні обчислення. Хмарні 
обчислення – це модель забезпечення повсюдного та зручного мережевого 
доступу на вимогу до загального кола конфігуруючих обчислювальних ресурсів, 
які можуть бути оперативно надані і звільнені з мінімальними експлуатаційними 
витратами або зверненнями до провайдера [13].  
Найбільш доступним сервіс буде при використанні публічної хмари. 
Публічна хмара – інфраструктура, призначена для вільного використання 
широкою аудиторією користувачів. 
Арк. 
ЧДТУ 211982.005 ПЗ 21 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
Отже, для розробки web-орієнтованої інформаційної системи обліку 
пристроїв комунального підприємства найкраще створити веб-сайт. Веб-сайт, або 
просто сайт – це сукупність веб-сторінок, доступних в інтернеті через протоколи 
http/https. Сторінки веб-сайту об'єднані загальною кореневою адресою, а також 
зазвичай темою, логічною структурою, оформленням і авторством [14]. 
Сторінки веб-сайтів – це файли з текстом, розміченим на мові HTML або 
XHTML. Ці файли  завантажуються відвідувачем мережі на його комп'ютер, 
обробляються програмою-браузером і виводяться на засіб відображення 
користувача (монітор, екран ПК, принтер або синтезатор мови) [15].  
Для створення веб-сайту необхідне використання веб-технологій. У 
теперішній час існує та надалі розвивається безліч web-технологій, які 
використовуються для створення сайтів, основні технології, зображені на рис. 2.2. 
Далі постає вибір створювати сайт з використанням CMS чи на звичайному 
HTML. Основна перевага CMS – можливість легко і швидко наповнювати сайт 
потрібною інформацією. Вбудовані в CMS засоби редагування нагадують панель 
інструментів з програм стандартного офісного пакету. Тому супроводжувати 
сайт, побудований на CMS може навіть той, хто не має уявлення, що таке html-
код. 
 
 
Рис. 2.2 Основні технології, які потрібні для розробки сайту 
Арк. 
ЧДТУ 211982.005 ПЗ 22 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
 
Але у CMS також є і деякі недоліки. Наприклад, використання CMS 
створює додаткове навантаження на ресурси хостинг-провайдера, не кажучи вже 
про те, що створення сайтів на CMS вимагає більш дорогого тарифного плану при 
їх розміщенні. Також слід враховувати необхідність придбання ліцензії для 
деяких CMS. Причому справа не обмежується одноразовою оплатою. При 
випуску нових, досконаліших версій платній CMS доведеться доплачувати за 
установку оновлень. 
Усіх цих недоліків позбавлений «чистий» html-код. Створення сайтів на 
html ніяк не обмежує фантазії дизайнера. Те, що неможливо (або дуже складно) 
зробити на CMS, з легкістю вбудовується в html. 
Потрібно враховувати і безперебійність роботи сайту при великому напливі 
відвідувачів. Якщо ресурс буде популярним, то сайт на CMS насилу витримає 
підвищене навантаження. Доведеться або оптимізувати код обраної CMS, або 
переходити на html-код, так як він менш ресурсномісткий [16]. 
Отже, у випадку онлайн-серевісу краще не використовувати CMS. 
Веб-сайт найкраще розробляти використовуючи HTML5, а не просто 
HTML. HTML5 є найновішим стандартом HTML. Цей термін представляє дві 
різні концепції: 
 Це нова версія мови HTML, з новими елементами, атрибутами і 
поведінкою 
 Це великий стек технологій, котрі надають більшого різноманіття та 
потужності Веб-сайтам та додаткам [17]. 
Крім того, варто використовувати найновішу версію CSS – CSS3. Ця версія 
дозволяє значно розширити можливості верстки сайтів, без застосування 
сторонніх технологій. Більш привабливий дизайн сайтів з використанням 
мінімально необхідного коду – ось результат, який можна одержати за допомогою 
CSS3. Так само як і HTML5, CSS3 підтримується сучасними браузерами частково, 
Арк. 
ЧДТУ 211982.005 ПЗ 23 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
але найближчими роками очікується повна підтримка браузерами HTML5 і CSS3 
[18]. 
Для розробки використовується фреймворк Bootstrap.Це найбільш 
популярний HTML, CSS, JS фреймворк, який має багато переваг [19]: 
 Швидкість роботи – створення макетів з Bootstrap займає менше часу 
завдяки великому набору готових до використання елементів. 
 Гнучкість – додавання нових елементів не порушує загальну 
структуру завдяки динамічно змінюваній сітці. 
 Легка змінюваність – зміна стилів досягається за рахунок додавання 
нових CSS правил, які скасовують існуючі. 
 Чудова офіційна документація допомагає з легкістю використовувати 
усі елементи. 
 Доступність та безкоштовність. 
 Розмітка сторінки виходить абсолютно блокова, а отже сучасна і 
якісна. 
 Найважливіша перевага – отримується відразу кросбраузерна і 
адаптивна сторінка, яка відразу виглядає добре в усіх браузерах і на будь-якому 
пристрої [20].  
Для проведення розрахунків та запису формули використовується 
JavaScript та JQuery. jQuery – бібліотека JavaScript, що фокусується на взаємодії 
JavaScript і HTML. Бібліотека допомагає легко отримувати доступ до будь-якого 
елементу DOM, звертатися до атрибутів і вмісту елементів DOM, маніпулювати 
ними.  
Так само, як CSS відокремлює візуалізацію від структури HTML, JQuery 
відокремлює поведінку від структури HTML. Наприклад, замість прямої вказівки 
на обробник події натискання кнопки, управління передається JQuery, яка 
ідентифікує кнопки і потім перетворює його в обробник події кліка. 
Бібліотека jQuery містить функціональність, корисну для максимально 
широкого кола завдань. Проте, розробниками бібліотеки не ставилося завдання 
Арк. 
ЧДТУ 211982.005 ПЗ 
 24 
З м н. Арк. №  докум. Підпис Дата 
 
 
суміщення в jQuery функцій, які підійшли б усюди, оскільки це призвело б до 
великого коду, велика частина якого не затребувана. Тому була реалізована 
архітектура компактного універсального ядра бібліотеки і плагінів. Це дозволяє 
зібрати для ресурсу саме ту JavaScript – функціональність, яка на ньому була б 
потрібна [21].  
Для написання коду буде використовуватись Sublime Text. Sublime – 
найпопулярніший текстовий редактор, який використовується для фронтенд-
розробки. У ньому не має нічого зайвого, він не навантажує систему та для нього 
не потрібно використовувати значні ресурси ПК. Найголовніша перевага 
текстового редактора – підсвічування синтаксису коду, тому для написання 
невеликої системи його зручно використовувати. 
Отже, виведено усі необхідні формули для параметричних розрахунків, а 
саме: число розрядності АЦП для АЦП ззовні та всередині контуру, число 
розрядності ЦАП, допустиму похибку розрахунку та оптимальні періоди 
дискретизації для ПІ та ПІД – регуляторів з аперіодичними ланками першого та 
другого порядку. Обрано методи та засоби реалізації. Система може бути 
доступна завдяки хмарним технологіям. Найкраще для даної системи 
використовувати не CMS, а чистий HTML. Для реалізації використовуються такі 
веб-технології: html5, css3, bootstrap, javascript, jquery. Код зручно писати у 
текстовому редакторі Sublime Text. 
 
2.3 Структура бази даних 
Схема бази даних — це структура бази даних, описана формальною 
мовою, яка зазвичай підтримується реляційною системою керування базами 
даних (РСБД). Термін «схема» стосується організації даних як плану побудови 
бази даних (у випадку реляційних баз даних вона розділена на таблиці). 
Формальне визначення схеми бази даних — це набір формул (речень), які 
називаються обмеженнями цілісності, що накладаються на базу даних.[потрібне 
посилання] Ці обмеження цілісності забезпечують сумісність між частинами 
Арк. 
ЧДТУ 211982.005 ПЗ 25 
З м н. Арк. №  докум. Підпис  
    Дата 
 
 
схеми. Усі обмеження можна виразити однією мовою. Базу даних можна 
розглядати як структуру в реалізації мови баз даних[22]. Стани створеної 
концептуальної схеми перетворюються на явне відображення — схему бази 
даних. Це описує, як реальні сутності моделюються в базі даних. 
«Схема бази даних визначає, на основі знань адміністратора бази даних 
про можливі застосування, факти, які можуть потрапляти до бази даних, або ті, 
що цікавлять можливих кінцевих користувачів»[23]. Поняття схеми бази даних 
відіграє таку ж роль, як і поняття теорії в численні предикатів. Модель цієї 
«теорії» точно відповідає базі даних, яку можна розглядати в будь-який момент 
часу як математичний об'єкт. Таким чином, схема може містити формули, що 
представляють обмеження цілісності спеціально для програми, та обмеження 
спеціально для типу бази даних, всі виражені однією мовою баз даних[24]. У 
реляційній базі даних схема визначає таблиці, поля, зв'язки, представлення, 
індекси, пакети, процедури, функції, черги, тригери, типи, послідовності, 
матеріалізовані представлення, синоніми, посилання на бази даних, каталоги, 
XML-схеми та інші елементи. 
База даних зазвичай зберігає свою схему в словнику даних. Хоча схема 
визначається мовою текстових баз даних, цей термін часто використовується для 
позначення графічного зображення структури бази даних. Іншими словами, 
схема — це структура бази даних, яка визначає об'єкти в базі даних. 
Структура бази даних для web-орієнтованої інформаційної системи 
обліку пристроїв комунального підприємства організована за принципами 
нормалізації, з фокусом на простий, масштабований і зрозумілий дизайн з 
реляційною моделлю даних.  
Реляційна модель бази даних має ряд переваг [25]: 
 простота і зрозумілість. Дані зберігаються у вигляді таблиць (реляцій) 
з рядками й стовпцями. Користувачам та розробникам легко розуміти 
структуру і логіку роботи з таблицями;  
Арк. 
ЧДТУ 211982.005 ПЗ 26 
З м н. Арк. №  докум. Підпис  
    Дата 
 
 
 формалізованість. Модель базується на строгій математичній теорії 
множин і предикатній логіці, що робить її чіткою та логічно 
завершеною. Полегшує побудову запитів, проєктування й 
оптимізацію систем; 
 цілісність даних (data integrity).Підтримка первинних ключів 
(PRIMARY KEY), зовнішніх ключів (FOREIGN KEY) та обмежень 
(constraints) дозволяє: уникати дублювання, контролювати 
допустимість значень, забезпечувати зв’язність між таблицями; 
 гнучкість у запитах. Мова SQL дає змогу виконувати складні 
фільтрації, об’єднання (JOIN), сортування, легко змінювати запити 
під потреби користувача. 
У процесі проєктування бази даних створення діаграми корпоративної 
моделі даних є одним з перших і ключових етапів. На її основі розробляється ER-
діаграма (Entity-Relationship diagram), яка чітко відображає сутності, їхні 
атрибути та зв’язки між ними. Схема корпоративної моделі даних представлена 
на рисунку 2.3 [26]. 
 
 
Рисунок 2.3 – Модель корпоративних даних 
Арк. 
ЧДТУ 211982.005 ПЗ 27 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
 
Корпоративна модель даних (Enterprise Data Model) — це високорівневе 
логічне представлення всієї інформації, яка використовується в організації: 
відображає ключові сутності (наприклад, Клієнт, Пристрій, Облік, 
Місцезнаходження), встановлює зв’язки між ними, слугує основою для створення 
 ER-діаграми. Перевагами  створення ER-діаграми є чітке бачення структури 
даних; виявлення дублювань та неефективних зв’язків. ER-діаграма полегшує 
проєктування нормалізованої реляційної бази. 
Опис таблиць бази даних є ключовим кроком до розуміння структури 
системи. Таблиці бази даних для інформаційної системи обліку пристроїв 
комунального підприємства, створеної на основі попередньої ER-діаграми. 
Представлено на рис.2.4 -2.9. 
Таблиця «Devices» складається з таких полів:  
 
Рис. 2.4. Таблиця «Devices». 
Структура таблиці «Types» складається з наступних полів:  
Арк. 
ЧДТУ 211982.005 ПЗ 28 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
 
Рис. 2.5. Таблиця  «Types». 
Таблиця «Locations» складається з таких полів: 
 
Рис. 2.6. Таблиця «Locations» 
Структура таблиці «Statuses» складається з наступних полів: 
 
Рис.2.7. Таблиця «Statuses». 
Таблиця «MaintenanceLogs» складається з таких полів: 
 
Рис.2.8. Таблиця «MaintenanceLogs» 
Таблиця «Users»  складається з таких полів: 
Арк. 
ЧДТУ 211982.005 ПЗ 29 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
 
Рис.2.9. Таблиця «Users» . 
 
2.4 Розробка макета web-орієнтованої інформаційної системи 
У сучасних умовах стрімкого розвитку інформаційних технологій дедалі 
важливішим стає використання веб-орієнтованих інформаційних систем у різних 
сферах діяльності — від освіти і медицини до бізнесу та державного управління. 
Такий підхід забезпечує широкі можливості для збирання, зберігання, обробки та 
представлення даних у зручній для користувача формі через браузер, без потреби 
встановлення спеціального програмного забезпечення. 
Розробка макета веб-орієнтованої інформаційної системи має на меті 
створення інтерактивного інтерфейсу та базових функціональних модулів, які 
відображають ключові можливості майбутньої системи. Макет дозволяє 
візуалізувати логіку взаємодії користувача з системою, протестувати основні 
функції та оцінити зручність користування ще до початку повномасштабного 
програмування. Метою розробки макета є візуалізація структури, 
функціональних блоків і дизайну майбутнього інтерфейсу web-системи. Це 
дозволяє узгодити бачення між замовником, розробником і майбутнім 
користувачем ще до етапу програмування. Схематичні макети (рис. 2.10 та рис. 
2.11) розроблено з використанням програми Moqups.  
 
Арк. 
ЧДТУ 211982.005 ПЗ 30 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
 
Рис. 2.10. Схематичний макет головної сторінки 
 
Як видно з рис. 2.10, головна сторінка буде складатись з блоків, що 
допоможе зручно організувати та представити інформацію для користувача. 
Хороший сайт обов’язково повинен мати логотип та свою назву, що і показано в 
макеті. 
Для реалізації макета пропонується використання таких технологій: 
- HTML5, CSS3, JavaScript — для створення інтерфейсу користувача; 
- Figma або Adobe XD — для графічного макетування; 
- Bootstrap або Tailwind CSS — для швидкого створення адаптивного 
дизайну; 
- MockAPI або JSON Server — як фіктивна база даних для демонстрації 
роботи з даними. 
 
Арк. 
ЧДТУ 211982.005 ПЗ 31 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
Вибір веб-орієнтованого підходу пояснюється високою доступністю 
(працює у будь-якому браузері), простотою масштабування та мінімальними 
вимогами до пристрою користувача. 
Використання безкоштовних фреймворків і онлайн-сервісів для розробки 
макета значно знижує витрати на початковому етапі проєкту. За рахунок 
створення якісного макета зменшується ризик помилок у майбутньому 
розробленні ПЗ, що оптимізує витрати на підтримку й доопрацювання. 
Розробка макета також сприяє ефективнішому комунікуванню між 
розробником та замовником, оскільки останній отримує наочне уявлення про 
майбутню систему, що дозволяє вчасно вносити зміни. 
 
Рис. 2.11. Схематичний макет сторінки моделі 
 
Сторінки моделей мають такий самий стиль, як і головна сторінка. Меню 
складається з тих самих пунктів, це значно спростить роботу користувачу. В 
Арк. 
ЧДТУ 211982.005 ПЗ 
 32 
З м н. Арк. №  докум. Підпис Дата 
 
 
хедері вказана назва моделі, тому якщо користувач помилиться обраною 
моделлю, він одразу це ж зрозуміє.  
Наступний крок: вибір кольорової схеми сайту (рис. 2.12). Для цього 
використано сервіс colorscheme. Кольори обрано за принципом контрасту для 
того, щоб зробити акцент на основній задачі сайту. Використано темний фон 
сайту, адже це сучасно, зручно для користувача та читабельно. 
Кожен хороший сайт повинен мати логотип та свою назву. Це головне 
правило SEO-маркетингу. Завдяки цьому користувач може запам’ятати сайт, 
користуватись ним самим та радити друзям та знайомим. Для розробки логотипу 
(рис.2.13) використано програму logaster. У основі логотипу лежить попередньо 
придумана назва: Calculation Controller (розрахунок регулятора). Для гармонії 
логотипу із фоном сайту, обрано логотип чорного кольору. 
 
 
Рис. 2.12 Вибір кольорової гами сайту 
 
 
Рис. 2.13. Логотип сайту 
Створення макета дозволило сформувати цілісне бачення майбутнього web-
сайту. Візуалізована структура допомогла виявити потенційні проблеми ще до 
Арк. 
ЧДТУ 211982.005 ПЗ 33 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
написання коду. Макет став основою для верстки інтерфейсу та створення front-
end частини системи. 
У результаті буде створено інтерактивний макет веб-орієнтованої 
інформаційної системи, який: 
- відповідає сучасним стандартам UX/UI дизайну; 
- демонструє основні функціональні сценарії; 
- може бути основою для подальшої реалізації повноцінного 
програмного продукту. 
Створення макета веб-орієнтованої інформаційної системи є доцільним 
етапом у процесі розробки інформаційних продуктів. Він забезпечує ефективне 
планування архітектури системи, економію ресурсів та підвищення якості 
кінцевого програмного забезпечення. 
 
2.5 Висновки до розділу 2 
В розділі описано архітектуру web-орієнтованої інформаційної системи 
обліку пристроїв комунального підприємства. Щоб краще зрозуміти архітектуру 
системи розроблено схеми для відображення взаємодії користувачів та їх 
функцій в системі. Описано загальні особливості створення web-орієнтованих 
систем. Розроблено базу даних системи, яка є реляційною. Створено діаграму 
моделі даних обліку пристроїв комунального підприємства, що показує системні 
об’єкти та взаємозв’язки між ними, а також ER-діаграму, що демонструє 
взаємодію між взаємозв’язками і дозволяє розпочати програмування баз даних. 
Арк. 
ЧДТУ 211982.005 ПЗ 34 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
3 РОЗРОБКА ПРОГРАМНОЇ ЧАСТИНИ 
3.1 Написання коду  
Розробка веб-орієнтованої інформаційної системи відбувається поетапно. 
Кожен етап має свою мету, набір технологій і результат. Нижче наведено 
загальний процес, що охоплює як фронтенд (інтерфейс користувача), так і бекенд 
(логіку обробки даних). 
Перед початком програмування проводиться аналіз вимог до системи: 
які функції вона має виконувати; 
які типи користувачів передбачені (адміністратор, гість, зареєстрований 
користувач); 
які дані обробляються (таблиці, категорії, фільтри тощо). 
На цьому етапі створюється технічне завдання та прототип майбутньої 
системи (макет). 
Розробити функціональну, масштабовану та безпечну програмну частину 
веборієнтованої інформаційної системи, яка забезпечує ефективний облік 
пристроїв комунального підприємства є основною метою створення  web-
орієнтованої інформаційної системи обліку пристроїв комунального 
підприємства. 
Лістинг коду HTML сторінок приведений в додатку А. Структура html 
сторінки складається з <head> та <body>. Тег <head> призначений для зберігання 
інших елементів, мета яких – допомогти браузеру в роботі з даними. Також 
всередині контейнера <head> знаходяться метатеги, які використовуються для 
зберігання інформації призначеною для браузерів і пошукових систем.  
Вміст тега <head> не відображається безпосередньо на веб-сторінці, за 
винятком тега <title> встановлює заголовок вікна веб-сторінки. На кожній 
сторінці веб-сайту структура <head> відрізняється лише заголовком та має таку 
структуру: 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
Арк. 
ЧДТУ 211982.005 ПЗ 35 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, user-scalable=no, minimal-ui"> 
    <title>ПІ І</title> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap-
dialog.min.css"> 
    <link type="text/css" rel="stylesheet" href="css/style.css"> 
</head>  
Елемент <body> призначений для зберігання змісту веб-сторінки 
(контенту), що відображається у вікні браузера. Інформацію, яку слід виводити в 
документі, слід розташовувати саме всередині тега <body>. 
Кожна сторінка має майже однакову структуру меню, яке реалізовано як 
navbar з використанням bootstrap. Меню розділене на дві частини: у першій 
міститься логотип з посиланням на головну сторінку, а у другій безпосередньо 
пункти меню (включаючи випадаюче меню), які містять посилання на певні 
частини головної сторінки та сторінки моделей: 
<div class="navbar navbar-inverse navbar-active-top navbar-fixed-top"> 
    <div class="container"> 
        <a href="index.html" class="navbar-brand"><img class="logo" 
src="logo.png"></a> 
        <button class="navbar-toggle" data-toggle="collapse" data-
target=".navHeaderCollapse"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
        </button> 
        <div class="collapse navbar-collapse navHeaderCollapse "> 
            <ul class="nav navbar-nav navbar-right  "> 
                <li><a href="#whatis" >Що це?</a></li> 
                <li><a href="#piandpid" >Чому ПІ та ПІД?</a></li> 
                <li><a href="#howtowork">Як працювати?</a></li> 
                 <li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Обрати модель <b 
class="caret"></b> </a> 
                    <ul class="dropdown-menu"> 
                        <li><a href="pi-1.html">ПІ-регулятор з об'єктом 
регулювання І</a></li> 
... 
Під усіма блоками у коді розташована іконка кнопки вгору, яку можна 
помітити справа на рис. 3.5. Працює кнопка з використанням скріпта, що 
знаходиться у файлі js.js. 
У тегі <footer> вказана інформація про дату функціонування та автору сайту 
(рис. 3.1): 
        <footer> 
            <a href="mailto: [email protected]"> Написати автору</a> 
            <a href="mailto: [email protected]"> 
Арк. 
ЧДТУ 211982.005 ПЗ 36 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
            <span class="glyphicon glyphicon-envelope"> 
            </span> 
            </a> 
            <p>Copyright © 2017 by Alina Zaporozhets</p> 
        </footer> 
 
Рис. 3.1 Футер онлайн-сервісу 
 
До кожної сторінки підключений файл js типу: 
<script src="js.js"></script> 
Підключення розташоване саме внизу коду для того, щоб процес 
завантаження файлу не впливав на швидкість завантаження сторінки: 
3.2. Структура головної сторінки 
Після фіксованого меню на головній сторінці по всій ширині розташований 
блок із назвою сервісу (рис. 3.2): 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-12 col-sm-12 col-xs-12 name-index"> 
<h1 class="text-index">Calculation Controller<br> 
<big>Онлайн-сервіс розрахунку параметрів регуляторів</big></h1> 
</div> 
</div> 
</div> 
 
 
Рис. 3.2 Головна сторінка: активне випадаюче меню та заголовок сервісу 
 
Після цього використовується контейнер bootstrap (<div class="container">) 
для адаптованості до всіх пристроїв. У контейнері розміщені блоки , на які можна 
Арк. 
ЧДТУ 211982.005 ПЗ 37 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
перейти використовуючи пункти меню «Що це?», «Чому ПІ та ПІД?» та «Як 
працювати?». Перший блок – «Що це?» (рис. 3.3), містить інформацію про те, що 
це за система та для чого вона призначена: 
<div class="row"> 
        <div class="col-md-10 col-md-offset-1 "> 
            <div class="index-block" id="whatis"> 
                <h1> 
                     Що це? 
                </h1> 
                <span class="blocktext"> 
                   <p> На виробництві та в промисловості використовуються 
різноманітні регулятори. Розрахунок регулятора складається з декількох етапів. 
Перший етап полягає в розрахунку параметрів та коефіцієнтів обраного регулятора 
(ПІ, ПІД, П чи ін.). Другий етап&nbsp– проектний розрахунок керуючих обчислювальних 
засобів. </p> 
... 
У наступному блоці – «Чому ПІ та ПІД?» (рис. 3.4), розповідається чому у 
системі розраховуються параметри саме ПІ та ПІД контролерів. Для цього 
наданий їхній перелік переваг та незначний список прикладів використання. 
Приклади використання складаються з двох частин, перша частина містить так 
звану карусель, яка працює в використанням bootstrap.js. Карусель містить 
картинки, які динамічно перемикаються на наступну. Окрім того можна 
використати кнопку вбік для самостійного перемикання картинки. Друга частина 
містить текстову інформацію про застосування регуляторів. Коротко код каруселі 
представлений нижче: 
                <h2> 
                    Приклади використання ПІ-регулятора 
                </h2> 
                <div class="row"> 
                <div class="col-xs-12 col-sm-6 col-md-6 " style="z-
index:9999;"> 
<div id="carousel" class="carousel slide" data-interval="5000"> 
                <!--ol.carousel-indicator>li*3--> 
                <ol class="carousel-indicators"> 
                    <li class="active" data-target="#carousel" data-slide-
to="0"></li> 
                    <li data-target="#carousel" data-slide-to="1"></li> 
                    <li data-target="#carousel" data-slide-to="2"></li> 
                </ol> 
                <div class="carousel-inner"> 
                    <div class="item active"> 
                        <img src="1.jpg" alt="1"> 
                        <div class="carousel-caption"> 
                        <h3>Регулятор тиску</h3> 
                        </div> 
                    </div> 
                    <div class="item"> 
                        <img src="2.jpg" alt="2"> 
Арк. 
ЧДТУ 211982.005 ПЗ 38 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
                        <div class="carousel-caption"> 
                        <h3>Датчик вологості</h3> 
                        </div> 
... 
 
Рис. 3.3.  Головна сторінка: блок «Що це?» 
 
 
Рис. 3.4 Головна сторінка: блок «Чому ПІ та ПІД?» 
 
Останній блок на головній сторінці – це блок «Як працювати?», зображений 
на рис. 3.5. У ньому дається пояснення як працювати з системою: вибір моделі, 
введення даних та обчислення потрібних параметрів. Інструкція складається з 
текстового пояснення та пояснюючого зображення: 
Арк. 
ЧДТУ 211982.005 ПЗ 39 
З м н. Арк. №  докум. Підпис  
    Дата 
 
 
<div class="col-md-10 col-md-offset-1 "> 
            <div class="index-block" id="howtowork"> 
                <h1> 
                     Як працювати? 
                </h1> 
                <span class="howtowork_text"> 
                     1. Обрати модель, яка Вам необхідна. <br> 
                     <img src="howtowork1.png"> 
                     <img src="howtowork1_1.png"> 
                     2. Ввести дані, які потрібні для розрахунку та 
впевнитись, що дані введено вірно.<br> 
                     <img src="howtowork2.png"> 
                     3. Перейти до блоку розрахунку.<br> 
                     <img src="howtowork3.png"> 
                     4. Натиснути кнопку "Розрахувати" та отримати 
результат.<br> 
                     <img src="howtowork4_1.png"> 
                     5. Якщо не введено необхідний параметр, введіть його. 
І знову натисніть кнопку "Розрахувати".<br> 
                     <img src="howtowork5.png"> 
                     6. Повернутись на головну сторінку можна натиснувши на 
логотип або за допомогою меню (натиснувши на відповідний пункт меню).<br> 
... 
 
 
Рис. 3.5. Головна сторінка: блок «Як працювати?» 
Розроблена програмна частина відповідає функціональним та 
нефункціональним вимогам. Вона є масштабованою, модульною і забезпечує 
зручний облік пристроїв комунального підприємства. Всі модулі протестовані, 
система готова до впровадження. 
 
Арк. 
ЧДТУ 211982.005 ПЗ 40 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
3.3. Структура js та css файлів 
Лістинг коду підключених css та js файлів приведений в додатку Б. До 
кожної сторінки підключений файл js.js. Саме js відповідає за будь-які динамічні 
дії, що відбуваються на сторінках.  
У структурі фронтенд-проєкту важливо правильно організувати JS 
(JavaScript) та CSS (каскадні таблиці стилів) файли, щоби забезпечити зручність 
підтримки, масштабованість та повторне використання коду. Ось як можна 
описати структуру JS та CSS файлів у розділі технічної документації: 
var w; 
$("#ACP").on("click", function(){ 
    var y = $("#y").val(); 
    var p = $("#p").val(); 
    var q = $("#skv").val(); 
    if (!y || !p || !q){ $("#zero").show(); 
location.href="#calculate"}else{ 
    $("#zero").hide(); 
    $("#out1").html(acp(y,p,q));} 
}) 
 
function acp(y,p,q){ 
    return Math.ceil(Math.log(y/(p*q*2*Math.sqrt(3)))/Math.log(2)); 
Розрахунок проводиться так само, як і обчислення оптимального періоду 
дискретизації. 
Після функцій обчислень розташовані функції, які відповідають за роботу 
кнопки вгору. Частково код наведений нижче: 
$(document).ready(function(){ 
    $(".menu").on("click","a", function (event) { 
        event.preventDefault(); 
        var id  = $(this).attr('href'), 
            top = $(id).offset().top; 
        $('body,html').animate({scrollTop: top-75}, 1000); 
... 
Функція працює таким чином: спочатку проводиться відміна стандартного 
опрацювання натискання на посилання, потім розраховується висота від початку 
сторінки до блоку на який проводиться посилання. І потім вже відбувається 
плавний перехід на потрібну відстань. 
У файлі є також функція, яка при виникненні помилки при розрахунку 
піднімає інтерфейс до оповіщення. 
Наступна функція обмежує поле для введення. Завдяки їй можна вводити 
лише цифри, крапку та мінус. Частково код наведено нижче: 
Арк. 
ЧДТУ 211982.005 ПЗ 
 41 
З м н. Арк. №  докум. Підпис Дата 
 
 
$(function () { 
  $('[data-toggle="tooltip"]').tooltip()}) 
    function numbersonly(myfield, e) { 
    var key; 
    var keychar; 
    if (window.event) 
            key = window.event.keyCode; 
    else if (e) 
            key = e.which; 
    else 
            return true; 
    keychar = String.fromCharCode(key); 
     // control keys 
    if ((key==null) || (key==0) ||(key==8) || (key==9) || (key==13) || 
(key==27) || (("0123456789").indexOf(keychar) > -1) || ((".").indexOf(keychar) > 
-1)  
... 
Для коректного та гарного відображення всіх елементів, що є на html 
сторінці підключені відповідні стилі – css файли. Першим на кожній сторінці 
підключений файл bootstrap.css, а потім файл з власними стилями – style.css. 
Власні стилі підключені другими для того, щоб вони мали більшу пріоритетність 
над стилями bootstrap.  
У файлі style.css усі стилі відділені один від одного: вони написані окремо 
для головної сторінки та сторінки моделей, а також для блоків, які відрізняються 
своїм зовнішнім виглядом. Крім того все супроводжується коментарями. Це 
зроблено для зручності користування та зміни тилів у будь-який момент. На 
початку файлу усі стилі прописані для мобільної версії: 
/*До всіх сторінок*/ 
*{ 
  font-family: Arial; 
  color:#fff; 
  border-radius: 0; 
  font-size: 22px; 
 } 
body{ 
  background: url(fon.jpg) 100% 100% no-repeat; 
  background-size: cover; 
... 
Деякі стилі на інших пристроях відрізняються. Для адаптивності 
використано @media: 
    @media(min-width: 400px){ 
      .logo{ 
        height: 45px; 
      }} 
    @media(min-width: 540px){ 
      .list li{ 
        margin-left: 1%; 
        margin-right: 1%; 
Арк. 
ЧДТУ 211982.005 ПЗ 42 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
      } 
      input{ 
... 
Завдяки @media(min-width: 400px)можна окремо прописати стилі для 
ширини екрану 400px та іншої ширини. 
Структура JavaScript та CSS-файлів системи розроблена з дотриманням 
принципів модульності та повторного використання коду. Кожен JS-модуль 
відповідає за окрему функціональність інтерфейсу, а CSS-файли організовані 
тематично, що забезпечує зручність підтримки та масштабованість системи. 
Основні файли включено в HTML-документ через <script> та <link>. 
 
3.4. Тестування  
Перевірити, чи працює система надійно, правильно та стабільно відповідно 
до вимог користувача та технічного завдання забезпечується прцесом тестування 
web-орієнтованої інформаційної системи обліку пристроїв комунального 
підприємства.  
Тестування програмного забезпечення (ПЗ) — це процес виконання 
програми з метою виявлення помилок, перевірки відповідності між фактичною та 
очікуваною поведінкою, а також забезпечення якості програмного продукту [27]. 
 Основні цілі тестування: 
- виявлення помилок у програмному коді; 
- перевірка відповідності функціональності технічному завданню; 
- оцінка надійності, стабільності та продуктивності; 
- забезпечення зручності користування (usability); 
- підвищення загальної якості програмного продукту. 
Підготовчий етап передбачає визначення типів тестування: 
- Функціональне тестування — перевірка, чи правильно працюють 
основні функції: додавання, редагування, пошук, облік, авторизація. 
- Тестування зручності (Usability) — оцінка інтерфейсу: чи зрозумілий, 
інтуїтивний, зручний для працівників підприємства. 
Арк. 
ЧДТУ 211982.005 ПЗ 43 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
- Безпекове тестування — перевірка надійності авторизації, доступу до 
даних (рольова модель). 
- Тестування продуктивності — перевірка, як система поводиться при 
навантаженні (багато пристроїв або користувачів одночасно). 
- Модульне тестування — перевірка окремих функцій (наприклад, API-
запитів). 
- Тестування бази даних — перевірка цілісності та зв’язків між 
сутностями. 
Для перевірки правильності досліджені сценарії тестування. 
 
Рис. 3.6. Приклад тест-кейсів. 
Інструментами тестування можуть бути наступні: 
- Postman — тестування API-запитів до серверної частини. 
- Jest / Mocha / PHPUnit — для автоматичного тестування модулів 
(залежно від мови). 
- SQL-консоль / pgAdmin / DBeaver — перевірка стану бази даних. 
- DevTools у браузері — перевірка клієнтської частини (HTML, CSS, 
JavaScript, помилки консолі). 
- Selenium або Cypress — автоматизоване UI-тестування (за потреби). 
Арк. 
ЧДТУ 211982.005 ПЗ 44 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
Усі результати тестування мають бути задокументовані в таблиці тест-
кейсів, зі статусами  Пройдено,  Неуспішно,  Очікує перевірки. 
Також оформлюють звіт про виявлені баги (bugs) з описом, рівнем 
пріоритету та скриншотом. 
За результатами тестування можуть бути зроблені наступні висновки: 
- Якщо виявлено помилки — їх передають на доопрацювання. 
- Після виправлень тестування повторюється (регресійне тестування). 
- Якщо система стабільна, її передають на впровадження (деплоймент). 
 У ході тестування було перевірено основні функціональні модулі системи, 
зокрема: авторизацію, облік пристроїв, ведення історії обслуговування, 
відображення даних на мапі. Тестування проводилось згідно з підготовленими 
сценаріями. За результатами було виявлено [N] помилок, з яких [X] — критичні. 
Після усунення дефектів система продемонструвала стабільну роботу та 
готовність до використання. 
Тестування є невід’ємною частиною життєвого циклу розробки ПЗ. Воно 
забезпечує контроль якості, зменшує ризик виникнення критичних помилок і 
підвищує довіру користувачів до програмного продукту. Якісне тестування 
дозволяє не лише виявити дефекти, а й попередити їх появу завдяки правильному 
плануванню й аналізу. 
3.3 Висновки до розділу 3 
 В третьому розділі досліджено процес написання коду програми та 
реалізований інтерфейс системи відповідно до створених макетів. Проведено 
тестування готової системи. 
 
Арк. 
ЧДТУ 211982.005 ПЗ 45 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
ВИСНОВКИ 
Проведене дослідження дозволяє зробити висновок, що на сучасному етапі 
розвитку інформаційних технологій web-технології стрімко розвиваються та 
займають провідне місце у сфері створення інтерактивних, доступних і 
функціональних інформаційних систем. Їхня популярність зумовлена низкою 
факторів: 
- доступністю через інтернет з будь-якого пристрою; 
- можливістю оперативного оновлення контенту; 
- широким спектром технологій та інструментів для розробників 
(HTML5, CSS3, JavaScript, React, Node.js тощо); 
- адаптивністю до потреб бізнесу, освіти, медицини та інших галузей. 
Сьогодні створення веб-орієнтованої інформаційної системи є не лише 
технічно виправданим рішенням, а й стратегічно важливим кроком для 
організацій, які прагнуть автоматизувати процеси, покращити комунікацію з 
користувачами та забезпечити зручний доступ до інформації. 
Розробка та впровадження web-орієнтованої інформаційної системи 
обліку пристроїв комунального підприємства має низку позитивних ефектів, що 
сприяють підвищенню ефективності управління ресурсами та оптимізації 
внутрішніх процесів підприємства. 
Зокрема, така система: 
- забезпечує оперативний доступ до актуальної інформації про 
технічний стан, місцезнаходження та характеристики пристроїв; 
- автоматизує рутинні процеси обліку, інвентаризації та планування 
технічного обслуговування; 
- знижує ризик помилок, пов’язаних із людським фактором; 
- дозволяє швидко формувати звітність для внутрішнього 
користування або зовнішніх перевірок; 
- підвищує прозорість і контроль над матеріальними ресурсами 
підприємства; 
Арк. 
ЧДТУ 211982.005 ПЗ 46 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
- може працювати в браузері без встановлення додаткового ПЗ, що 
особливо важливо для багатьох працівників, які працюють з різних 
локацій. 
Крім того, завдяки використанню сучасних web-технологій (наприклад, 
React, Node.js, REST API), система легко масштабовується та інтегрується з 
іншими сервісами підприємства, такими як бухгалтерія або CRM. 
У кваліфікаційній роботі розглядається процес розробки web-орієнтованої 
інформаційної системи обліку пристроїв комунального підприємства. У процесі 
розробки досліджено архітектуру та структуру даних web-орієнтованої 
інформаційної системи обліку пристроїв комунального підприємства. 
Обґрунтовано вибір методів і засобів реалізації, враховуючи вимоги до 
функціональності, масштабованості та зручності доступу. 
Завдяки використанню хмарних технологій система є доступною з будь-
якого пристрою, що має підключення до Інтернету.Для реалізації проєкту 
застосовано сучасні веб-технології: HTML, CSS, Bootstrap, JavaScript та jQuery, 
які забезпечують адаптивність, інтерактивність та зручність користувацького 
інтерфейсу. 
Написання коду здійснювалося в текстовому редакторі Sublime Text, що є 
легким та ефективним інструментом для веброзробки.Починаючи реалізацію, 
було розроблено макети головної сторінки та сторінок моделей та обрано 
кольорову гаму. Незважаючи на те, що фон обрано темним, текст, який є в системі 
– абсолютно читабельний. Написано код програми та реалізований інтерфейс 
системи відповідно до створених макетів.Проведено тестування готової системи.    
У ході виконання роботи було розроблено web-орієнтовану інформаційну 
систему обліку пристроїв комунального підприємства, що відповідає сучасним 
вимогам до ефективного управління інформаційними ресурсами. Завдяки 
впровадженню таких рішень комунальне підприємство зможе покращити облік 
матеріально-технічних ресурсів, зменшити витрати на обслуговування облікових 
процесів і підвищити загальну ефективність управління. 
Арк. 
ЧДТУ 211982.005 ПЗ 47 
З м н. Арк. №  докум. Підпис Дата  
  
 
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. https://uk.wikipedia.org/wiki/ (дата звернення 12.04.2025) 
2. https://imi.org.ua/advices/komunalni-pidpriemstva-ustanovi-ta-organizatsiji-
i2365 (дата звернення 12.04.2025) 
3. ПАЛАМАРЮК Ю.І. СТАН ТА ПЕРСПЕКТИВИ РОЗВИТКУ 
КОМУНАЛЬНИХ ПІДПРИЄМСТВ НА ПРИКЛАДІ МКП 
«ЧЕРНІВЦІСПЕЦКОМУНТРАНС» ВІСНИК СНТ ННІ БІЗНЕСУ І 
МЕНЕДЖМЕНТУ ХНТУСГ (ВИП. 2/2019) 109-112 
4. В.Г. Іванов, В.В. Карасюк,М.В Гвозденко Основи інформатики та 
обчислювальної техніки: Підручник Харків.: Видавництво: Право, 2012 
р. – 312 с. Електр.версія 
5. Пономаренко В.С. Інформаційні системи і технології в економіці. - К.: 
ВЦ Академія, 2008. – 544с. 
6. Гайдаржи В. І., Ізварін І. В. Бази даних в інформаційних системах. 
Університет "Україна". 2018. 418 с. 
7. Харів Н. О. Бази даних та інформаційні системи: навчальний посібник.  
Рівне : НУВГП, 2018. 127 с. 
8. Ярцев В.П. «Організація баз даних та знань». Київ: ДУТ- 2018. 214 с. 
9. О.М. Томашевський Г.Г. Цегелик, М.Б. Вітер, В.І. Дубук Інформаційні 
технології та моделювання бізнес процесів К.: ЦУЛ, 2012 р. -296 с. 
10. Берко А.Ю., Верес О.М.Технології баз даних та знань.  Магнолія 2006. 
2024. 636 с. 
11. Mark Watson. Scripting Intelligence: Web 3.0 Information Gathering and 
Processing Apresspod Series. Expert’s Voice in Open Source. Books for 
professionals by professionals. Published in: Springer, 2009. — 392 р.  
12. Методи та засоби мультимедійних інформаційних систем: навч. посіб. 
[Текст] / Т. М. Басюк, П. І. Жежнич; Нац. ун-т "Львів. політехніка". – 
Львів : Вид-во Львів. політехніки, 2015. – 426 c. – Бібліогр.: с. 413-416. 
Арк. 
ЧДТУ 211982.005 ПЗ 48 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
13. O’Reilly, Tim (2007): What Is Web 2.0: Design Patterns and Business 
Models for the Next Generation of Software. Published in: International 
Journal of Digital Economics, No. 65 (March 2007) — P. 17–37 
14. Сусіденко В.Т. Інформаційні системи і технології в обліку [Текст] / В-
во: ЦНЛ – 2016. – 224 с. 
15. Буйницька О.П. Інформаційні технології та технічні засоби навчання. 
Навчальний посібник рекомендовано МОН України [Текст] / В-во: ЦНЛ. 
– 2018. – 240 с.  
16. Трофименко О. Г. Веб-технології та веб-дизайн : навч. посібник / О. Г. 
Трофименко, О. Б. Козін, О. В. Задерейко, О. Є. Плачінда. – Одеса : 
Фенікс, 2019. – 284 с. 
17. Neumann, Gustaf; Sobernig, Stefan; Aram, Michael (February 2014). 
"Evolutionary Business Information Systems". Business and Information 
Systems Engineering. 6 (1): 33–36. doi:10.1007/s12599-013-0305-1 
18. Бутинець Ф.Ф., Івахненков С.В., Давидюк Т.В., Шахрайчук Т.В. 
Інформаційні системи бухгалтерського обліку. Підручник. [Текст] / 
Житомир.: Изд. ПП „Рута”. – 2016. – 544 с. 
19. Campbell, Jennifer (2017). Web Design: Introductory. Cengage Learning. p.  
20. Keil, Mark; Cule, Paul E.; Lyytinen, Kalle; Schmidt, Roy C. (November 
1998). "A framework for identifying software project risks". Communications 
of the ACM. 41 (11): 76–83. doi:10.1145/287831.287843. ISSN 0001-0782. 
21. Salas-Zárate, María del Pilar; Alor-Hernández, Giner; Valencia-García, 
Rafael; Rodríguez-Mazahua, Lisbeth; Rodríguez-González, Alejandro; López 
Cuadrado, José Luis (May 2015). "Analyzing best practices on Web 
development frameworks: The lift approach". Science of Computer 
Programming. 102: 1–19. doi:10.1016/j.scico.2014.12.004 
22. Du, Xiaofeng; Song, William; Munro, Malcolm (2009), Barry, Chris; Lang, 
Michael; Wojtkowski, Wita; Conboy, Kieran (eds.), "Semantic Service 
Description Framework for Address", Information Systems Development, 
Арк. 
ЧДТУ 211982.005 ПЗ 49 
З м н. Арк. №  докум. Підпис  
    Дата 
 
 
Boston, MA: Springer US, pp. 1033–1045, doi:10.1007/978-0-387-78578-
3_35, ISBN 978-0-387-78577-6, retrieved 2023-11-30 
23. Hall, Heather (2022-05-01). "Web 2.0 Explained: Everything You Need To 
Know". History-Computer. Retrieved 2023-12-10. 
24. Козловський А.В. Комп’ютерна техніка та інформаційні технології: 
Навч. посіб. Рекомендовано МОН [Текст] / Козловський А.В., 
Паночишин Ю.М., Погріщук Б.В. – В-во: Знання. – 2017. – 463 с. 
25. Soni, Anuj; Gupta, Sachin; Talwandi, Navjot Singh (September 2023). 
"Evolution Of Web Technologies in Recent Years" (PDF). Journal of 
Emerging Technologies and Innovative Research. 10 (9). ISSN 2349-5162. 
26. Mullenweg, Matt (May 27, 2003). "WordPress Now Available". 
wordpress.org. WordPress. Archived from the original on July 19, 2010. 
Retrieved July 22, 2010. 
27. Kaner, Cem; Falk, Jack; Nguyen, Hung Quoc (1999). Testing Computer 
Software, 2nd Ed. New York, et al: John Wiley and Sons, Inc. с. 480. ISBN 
0-471-35846-0. 
28. CMS Usage Statistics". builtwith.com. BuiltWith. Archived from the original 
on August 6, 2013. Retrieved August 1, 2013. 
29. Jazayeri, Mehdi (2007). "Some Trends in Web Application Development". 
Future of Software Engineering (FOSE '07). pp. 199–213. 
doi:10.1109/fose.2007.26. ISBN 978-0-7695-2829-8. S2CID 7279594 
30. ECM Enterprise Content Management, Ulrich Kampffmeyer. Hamburg 
2006, ISBN 978-3-936534-09-8. Definition, history, architecture, 
components and ECM suites 
31. Managing Enterprise Content: A Unified Content Strategy. Ann Rockley, 
Pamela Kostur, Steve Manning. New Riders, 2003. 
32. Методичні рекомендації до підготовки кваліфікаційної роботи для 
здобувачів освітнього ступеня «бакалавр» зі спеціальності 126 
Інформаційні системи та технології освітньої програми «Web-
Арк. 
ЧДТУ 211982.005 ПЗ 50 
З м н. Арк. №  докум. Підпис Дата  
 
 
 
технології, Web-дизайн» усіх форм навчання [Електронний ресурс] / 
[Упоряд.: Т.О. Прокопенко, Я.В. Тарасенко]; М-во освіти і науки 
України, Черкас. держ. технол. ун-т. Черкаси: ЧДТУ, 2021. – 48 c. 
 
ІНТЕРНЕТ ДЖЕРЕЛА 
33. КП "Міськводоканал" [Електронний ресурс]. – Режим доступу: 
https://vodokanal.sumy.ua/ 
34. Open Source: OpenMAINT [Електронний ресурс]. – Режим доступу: 
https://sourceforge.net/projects/openmaint/ 
35. ЖКГ «Мій Дім Онлайн» [Електронний ресурс]. – Режим доступу 
https://miydimonline.com.ua/ 
 
ПРОГРАМНІ ЗАСОБИ 
1. Microsoft Office Word 2010 © Корпорація Майкрософт, 2021. 
2. Microsoft PowerPoint 2010 © Корпорація Майкрософт, 2021. 
3. phpMyAdmin 7.2 © phpMyAdmin devel team, 2021.   
4. Open Server 5.3.8 © Maksim Arhipov, 2021. 
5. WordPress  3.8 © The WordPress Project Team, 2021. 
Арк. 
ЧДТУ 211982.005 ПЗ 
 51 
З м н. Арк. №  докум. Підпис Дата 
 
ДОДАТОК A 
 
 
ЗАТВЕРДЖЕНО 
Зав. кафедри ІТП, проф. 
_________________ Прокопенко Т.О. 
«____» ________________ 2025 р. 
 
 
 
WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ОБЛІКУ ПРИСТРОЇВ 
КОМУНАЛЬНОГО ПІДПРИЄМСТВА 
 
 
 
Специфікація 
482 ЧДТУ 21982-01 
Листів 2 
 
 
 
 
Розробник _______________ Грищенко Б.С. 
Керівник _______________ Катаєв Д.С. 
Н. Контроль _______________ Катаєв Д.С.  
 
 
 
 
 
 
 
 
Черкаси, 2025 
 
 
 
 
2 
482 ЧДТУ 21000-01 
Позначення Найменування Пр
имітка 
 Документація  
482 ЧДТУ 21982-01 12 01 Текст програми  
482 ЧДТУ 21982-01 34 01 Інструкція користувачеві  
   
   
   
   
   
   
   
   
   
 
 
  
 
 
 
 
 
 
 
 
 
WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ОБЛІКУ ПРИСТРОЇВ 
КОМУНАЛЬНОГО ПІДПРИЄМСТВА 
482 ЧДТУ 21982-01 12 01 
Текст програми 
Листів 12 
 
 
 
 
 
Розробник    _____________  Грищенко Б.С. 
 
 
 
   Н     
 
 
 
 
 
Черкаси, 2021
 
2 
482 ЧДТУ 21982-01 12 01 
 
SQL-структура бази даних для системи обліку пристроїв комунального 
підприємства. 
1. Таблиця типів пристроїв 
CREATE TABLE DeviceTypes ( 
    type_id INT PRIMARY KEY AUTO_INCREMENT, 
    type_name VARCHAR(100) NOT NULL, 
    description TEXT 
); 
 
-- 2. Таблиця місцезнаходжень 
CREATE TABLE Locations ( 
    location_id INT PRIMARY KEY AUTO_INCREMENT, 
    name VARCHAR(100) NOT NULL, 
    address TEXT 
); 
 
-- 3. Таблиця статусів 
CREATE TABLE Statuses ( 
    status_id INT PRIMARY KEY AUTO_INCREMENT, 
    status VARCHAR(50) NOT NULL 
); 
 
-- 4. Таблиця користувачів 
CREATE TABLE Users ( 
    user_id INT PRIMARY KEY AUTO_INCREMENT, 
    name VARCHAR(100) NOT NULL, 
    email VARCHAR(100) UNIQUE NOT NULL, 
    password VARCHAR(255) NOT NULL, 
    role VARCHAR(20) CHECK (role IN ('admin', 'technician', 'viewer')) NOT NULL 
); 
 
-- 5. Таблиця пристроїв 
CREATE TABLE Devices ( 
 
3 
482 ЧДТУ 21982-01 12 01 
 
    device_id INT PRIMARY KEY AUTO_INCREMENT, 
    name VARCHAR(100) NOT NULL, 
    type_id INT NOT NULL, 
    location_id INT NOT NULL, 
    status_id INT NOT NULL, 
    serial_number VARCHAR(100), 
    inventory_code VARCHAR(100), 
    purchase_date DATE, 
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, 
    FOREIGN KEY (type_id) REFERENCES DeviceTypes(type_id), 
    FOREIGN KEY (location_id) REFERENCES Locations(location_id), 
    FOREIGN KEY (status_id) REFERENCES Statuses(status_id) 
); 
 
-- 6. Таблиця обслуговування 
CREATE TABLE MaintenanceLogs ( 
    log_id INT PRIMARY KEY AUTO_INCREMENT, 
    device_id INT NOT NULL, 
    performed_by VARCHAR(100), 
    description TEXT, 
    date_performed DATE, 
 
    FOREIGN KEY (device_id) REFERENCES Devices(device_id) 
); 
 
-- 7. (Опційно) Таблиця змін 
CREATE TABLE AuditLogs ( 
    audit_id INT PRIMARY KEY AUTO_INCREMENT, 
    user_id INT, 
    action TEXT, 
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP, 
    FOREIGN KEY (user_id) REFERENCES Users(user_id) 
); 
 
4 
482 ЧДТУ 21982-01 12 01 
 
Лістинг коду Html Файлів 
Файл index.html 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, user-scalable=no, minimal-ui"> 
    <title>Дипломна робота</title> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap-dialog.min.css"> 
    <link type="text/css" rel="stylesheet" href="css/style.css"> 
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script 
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
 
<body> 
<div class="navbar navbar-inverse navbar-active-top navbar-fixed-top"> 
    <div class="container"> 
        <a href="index.html" class="navbar-brand"><img class="logo" 
src="logo.png"></a> 
        <button class="navbar-toggle" data-toggle="collapse" data-
target=".navHeaderCollapse"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
        </button> 
        <div class="collapse navbar-collapse navHeaderCollapse "> 
            <ul class="nav navbar-nav navbar-right  "> 
                <li><a href="#whatis" >Що це?</a></li> 
                <li><a href="#piandpid" >Чому ПІ та ПІД?</a></li> 
                <li><a href="#howtowork">Як працювати?</a></li> 
                 <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-
toggle="dropdown">Обрати модель <b class="caret"></b> </a> 
                    <ul class="dropdown-menu"> 
                        <li><a href="pi-1.html">ПІ-регулятор з об'єктом 
регулювання І</a></li> 
                        <li><a href="pi-2.html">ПІ-регулятор з об'єктом 
регулювання ІІ</a></li> 
                        <li><a href="pid-1.html">ПІД-регулятор з об'єктом 
регулювання І</a></li> 
                        <li><a href="pid-2.html">ПІД-регулятор з об'єктом 
регулювання ІІ</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </div> 
    </div> 
</div> 
<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-12 col-sm-12 col-xs-12 name-index"> 
<h1 class="text-index">Calculation Controller<br> 
 
5 
482 ЧДТУ 21982-01 12 01 
 
<big>Онлайн-сервіс розрахунку параметрів регуляторів</big></h1> 
</div> 
</div> 
</div> 
<div class="container"> 
 
    <div class="row"> 
        <div class="col-md-10 col-md-offset-1 "> 
            <div class="index-block" id="whatis"> 
                <h1> 
                     Що це? 
                </h1> 
                <span class="blocktext"> 
                   <p> На виробництві та в промисловості використовуються 
різноманітні регулятори. Розрахунок регулятора складається з декількох етапів. Перший 
етап полягає в розрахунку параметрів та коефіцієнтів обраного регулятора (ПІ, ПІД, П 
чи ін.). Другий етап&nbsp– проектний розрахунок керуючих обчислювальних засобів. </p> 
                    <p>Безпосередньо на другому етапі розраховується 
розрядність АЦП і ЦАП та оптимальний період дискретизації. Розрядність АЦП не 
залежить від типу регулятора, але залежить від його розташування. Тому застосовуються 
дві формули для розрахунку. Перша використовується для випадку, коли АЦП не входить в 
контур регулювання, друга&nbsp– для АЦП, який входить в контур. </p> 
                   <p> ЦАП завжди знаходиться в контурі регулювання і не 
залежить від типу регулятора, тому для розрахунку використовується одна формула.</p> 
                   <p> Оптимальний період дискретизації розраховується залежно 
від типу регулятора та обраного об’єкта регулювання. Задача оптимального вибору 
періоду дискретизації Т<sub>0</sub> стосується однієї з основних проблем оптимальної 
витрати машинного часу керуючого обчислювального засобу. </p> 
                   <p> У системі проектний розрахунок керуючих обчислювальних 
засобів виконується для чотирьох варіантів: ПІ-регулятор з об’єктом І, ПІ-регулятор з 
об’єктом ІІ, ПІД-регулятор з об’єктом І, ПІД-регулятор з об’єктом ІІ, де об’єкт 
І&nbsp– аперіодична ланка першого порядку, об’єкт ІІ&nbsp– аперіодична ланку другого 
порядку.</p> 
 
                </span> 
            </div> 
        </div> 
 
        <div class="col-md-10 col-md-offset-1 "> 
            <div class="prefere-block" id="piandpid"> 
                <h1> 
                    Чому ПІ та ПІД? 
                </h1> 
                <h2> 
                    Переваги ПІ-регулятора 
                </h2> 
                <div class="row"> 
                <div class="col-md-6"> 
                    <ul class="list"> 
                        <li>Найбільш універсальний регулятор</li> 
                        <li>Чудове рішення для системи з повільним 
використанням</li> 
                        <li>Усуває невелику стійку похибку</li> 
                        <li>Має хорошу стійкість</li> 
                    </ul> 
                </div> 
                <div class="col-md-6"> 
                    <ul class="list"> 
                        <li>Використовуючи дві чи три петлі можна управляти 
трьома інтерактивними змінними незалежно одна від одної</li> 
 
6 
482 ЧДТУ 21982-01 12 01 
 
                        <li>Легко реалізується та налаштовується</li> 
                         
                    </ul> 
                </div> 
                </div> 
                <h2> 
                    Приклади використання ПІ-регулятора 
                </h2> 
                <div class="row"> 
                <div class="col-xs-12 col-sm-6 col-md-6 " style="z-
index:9999;"> 
<div id="carousel" class="carousel slide" data-interval="5000"> 
                <ol class="carousel-indicators"> 
                    <li class="active" data-target="#carousel" data-slide-
to="0"></li> 
                    <li data-target="#carousel" data-slide-to="1"></li> 
                    <li data-target="#carousel" data-slide-to="2"></li> 
                </ol> 
                <div class="carousel-inner"> 
                    <div class="item active"> 
                        <img src="1.jpg" alt="1"> 
                        <div class="carousel-caption"> 
                        <h3>Регулятор тиску</h3> 
                        </div> 
                    </div> 
                    <div class="item"> 
                        <img src="2.jpg" alt="2"> 
                        <div class="carousel-caption"> 
                        <h3>Датчик вологості</h3> 
                        </div> 
                    </div> 
                    <div class="item"> 
                        <img src="3.jpg" alt="3"> 
                        <div class="carousel-caption"> 
                        <h3>Регулятор температури</h3> 
                        </div> 
                    </div> 
 
                </div> 
                <!--Стрілки перемикання слайдерів--> 
                <a href="#carousel" class="left carousel-control" role="button" 
data-slide="prev"> 
                    <span class="glyphicon glyphicon-chevron-left" aria-
hidden="true"></span> 
                    <span class="sr-only">Previous</span><!--стрілка вліво--> 
 
                </a> 
                <a href="#carousel" class="right carousel-control" 
role="button" data-slide="next"> 
                    <span class="glyphicon glyphicon-chevron-right" aria-
hidden="true"></span> 
                    <span class="sr-only">Next</span><!--стрілка вправо--> 
                </a> 
 
            </div> 
            </div> 
            <div class="col-md-6 example"> 
            <span>Широкий асортимент сучасних ПІ-Регуляторів призначені для 
медичного застосування: наприклад, пристій вимірювання тиску. 
 
7 
482 ЧДТУ 21982-01 12 01 
 
                ПІ-регулятори використовуються у приладах керування 
мікроклімату: наприклад, датчик вологості з вбудованим контролером чи регулятор 
температури. Також за допомогою регулятора можна керувати системою вентиляції чи 
швидкістю двигуна. 
 
            </span> 
            </div> 
            <div class="row"> 
            <div class="col-md-12"> 
                <h2> 
                    Переваги ПІД-регулятора 
                </h2> 
                </div> 
                </div> 
                 <div class="col-md-6"> 
                    <ul class="list"> 
                        <li>Точність регулювання</li> 
                        <li>Найбільш ефективний регулятор</li> 
                        <li>Грає важливу роль в стабілізації контрольованої 
реакції</li> 
                    </ul> 
                </div> 
 
                <div class="col-md-6"> 
                    <ul class="list"> 
                        <li>Відмінна швидкість</li> 
                        <li>Має найкращу перехідну характеристику</li> 
                        <li>Придушує швидкі зміни в контрольованому виході</li> 
                    </ul> 
                </div> 
                <div class="row"> 
                <div class="col-md-12"> 
                <h2> 
                    Приклади використання ПІД-регулятора 
                </h2> 
                </div> 
                </div> 
                <div class="row"> 
                <div class="col-xs-12 col-sm-6 col-md-6 " style="z-
index:9999;"> 
<div id="carousel_2" class="carousel slide" data-interval="5000"> 
                <ol class="carousel-indicators"> 
                    <li class="active" data-target="#carousel_2" data-slide-
to="0"></li> 
                    <li data-target="#carousel_2" data-slide-to="1"></li> 
                    <li data-target="#carousel_2" data-slide-to="2"></li> 
                </ol> 
                <div class="carousel-inner"> 
                    <div class="item active"> 
                        <img src="pid_1.jpg" alt="1"> 
                        <div class="carousel-caption"> 
                        <h3>Регулятор температури</h3> 
                        </div> 
                    </div> 
                    <div class="item"> 
                        <img src="pid_2.jpg" alt="2"> 
                        <div class="carousel-caption"> 
                        <h3>Регулятор засувок</h3> 
                        </div> 
                    </div> 
 
8 
482 ЧДТУ 21982-01 12 01 
 
                    <div class="item"> 
                        <img src="pid_3.jpg" alt="3"> 
                        <div class="carousel-caption"> 
                        <h3>Універсальний регулятор</h3> 
                        </div> 
                    </div> 
 
                </div> 
                <!--Стрілки перемикання слайдерів--> 
                <a href="#carousel_2" class="left carousel-control" 
role="button" data-slide="prev"> 
                    <span class="glyphicon glyphicon-chevron-left" aria-
hidden="true"></span> 
                    <span class="sr-only">Previous</span><!--стрілка вліво--> 
 
                </a> 
                <a href="#carousel_2" class="right carousel-control" 
role="button" data-slide="next"> 
                    <span class="glyphicon glyphicon-chevron-right" aria-
hidden="true"></span> 
                    <span class="sr-only">Next</span><!--стрілка вправо--> 
                </a> 
 
            </div> 
            </div> 
            <div class="col-md-6 example"> 
            <span>ПІД-регулятури мають більш широкий діапазон застосування, ніж 
ПІ-регулятори. Вони можуть використовуватись як термостати чи регулятори засувок. Але 
найчастіше використовуються універсальні багатоканальні регулятори, які можуть 
вимірювати температуру, тиск та інші фізичні величини. Регулятори приначені для 
точної підтримки заданих пааметрів у різних технологічних процесах. 
 
            </span> 
            </div> 
            </div> 
 
 
                </div> 
 
            </div> 
        </div> 
 
        <div class="col-md-10 col-md-offset-1 "> 
            <div class="index-block" id="howtowork"> 
                <h1> 
                     Як працювати? 
                </h1> 
                <span class="howtowork_text"> 
                     1. Обрати модель, яка Вам необхідна. <br> 
                     <img src="howtowork1.png"> 
                     <img src="howtowork1_1.png"> 
                     2. Ввести дані, які потрібні для розрахунку та впевнитись, 
що дані введено вірно.<br> 
                     <img src="howtowork2.png"> 
                     3. Перейти до блоку розрахунку.<br> 
                     <img src="howtowork3.png"> 
                     4. Натиснути кнопку "Розрахувати" та отримати 
результат.<br> 
                     <img src="howtowork4_1.png"> 
 
9 
482 ЧДТУ 21982-01 12 01 
 
                     5. Якщо не введено необхідний параметр, введіть його. І 
знову натисніть кнопку "Розрахувати".<br> 
                     <img src="howtowork5.png"> 
                     6. Повернутись на головну сторінку можна натиснувши на 
логотип або за допомогою меню (натиснувши на відповідний пункт меню).<br> 
                     <img src="howtowork6_1.png"> 
                     <img src="howtowork6_2.png"> 
                </span> 
            </div> 
        </div> 
        </div> 
    
 
 
    <a id="pri-totop" class="backtotop" href="#"><i class="glyphicon glyphicon-
chevron-up" aria-hidden="true"></i></a> 
</div> 
 
        <footer> 
            <a href="mailto: [email protected]">Написати автору</a> 
            <a href="mailto: [email protected]"> 
            <span class="glyphicon glyphicon-envelope"> 
            </span> 
            </a> 
            <p>Copyright © 2017 by Alina Zaporozhets</p> 
        </footer> 
  
 
 
<script src="js.js"></script> 
</body> 
</html> 
Файл pi-1.html 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, user-scalable=no, minimal-ui"> 
    <title>ПІ І</title> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap-dialog.min.css"> 
    <link type="text/css" rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<div class="navbar navbar-inverse navbar-active-top navbar-fixed-top"> 
    <div class="container"> 
        <a href="index.html" class="navbar-brand"><img class="logo" 
src="logo.png"></a> 
        <button class="navbar-toggle" data-toggle="collapse" data-
target=".navHeaderCollapse"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
        </button> 
        <div class="collapse navbar-collapse navHeaderCollapse "> 
            <ul class="nav navbar-nav navbar-right  "> 
                <li><a href="index.html#whatis" >Що це?</a></li> 
 
10 
482 ЧДТУ 21982-01 12 01 
 
                <li><a href="index.html#piandpid" >Чому ПІ та ПІД?</a></li> 
                <li><a href="index.html#howtowork">Як працювати?</a></li> 
                 <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-
toggle="dropdown">Обрати модель <b class="caret"></b> </a> 
                    <ul class="dropdown-menu"> 
                        <li><a href="pi-2.html">ПІ-регулятор з об'єктом 
регулювання ІІ</a></li> 
                        <li><a href="pid-1.html">ПІД-регулятор з об'єктом 
регулювання І</a></li> 
                        <li><a href="pid-2.html">ПІД-регулятор з об'єктом 
регулювання ІІ</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </div> 
    </div> 
</div> 
<div class="container-fluid"> 
    <div class="row"> 
        <div class="col-md-12 col-sm-12 col-xs-12 name-fon"> 
            <h1 class="name-main">ПІ-регулятор з об'єктом регулювання І</h1> 
        </div> 
    </div> 
</div> 
<div class="container"> 
    <div class="row"> 
        <div class="col-md-10 col-md-offset-1 "> 
             <div class="index-block formula"> 
                <h1> 
                     Число розрядів АЦП 
                </h1> 
                    <img src="acp.jpg" alt="ACP"> 
                <h1> 
                     Число розрядів АЦП у контурі регулювання 
                </h1> 
                 <img src="acp_2.jpg" alt="ACP"> 
                <h1> 
                     Число розрядів ЦАП 
                </h1> 
                 <img src="cap.jpg" alt="CAP"> 
                <h1> 
                     Допустима похибка розрахунку 
                </h1> 
                 <img src="pohibka.jpg" alt="Mistake"> 
                <h1> 
                     ПІ-регулятор 
                </h1> 
                 <img src="formula_pi.jpg" alt="PI-Regulator"> 
                 
                <h1> 
                    Об'єкт регулювання І 
                </h1> 
                <img src="formula_o1.jpg" alt="PI-Regulator"> 
            </div> 
        </div> 
    </div> 
 
<div class="row"> 
    <div class="col-md-10 col-md-offset-1 "> 
 
11 
482 ЧДТУ 21982-01 12 01 
 
        <div class="index-block"> 
            <h1>Введіть усі необхідні дані</h1> 
                <label for="y">Регульована величина Ymax</label> 
                <input placeholder="" id="y" name="y" onkeypress="return 
numbersonly(this, event)" type="number" min="0" step="0.01" class="form-control">  
                <label for="p">Параметр p</label> 
                <input placeholder="[0.3...0.5]" name="p" onkeypress="return 
numbersonly(this, event)" id="p" type="number" min="0.3" max="0.5" step="0.01" 
class="form-control"> 
                <label for="skv">СКВ похибки датчика</label> 
                <input placeholder="" id="skv" name="skv" onkeypress="return 
numbersonly(this, event)" type="number" min="0" step="0.01" class="form-control"> 
                <label for="pu">Похибка управління e</label> 
                <input placeholder="" name="pu" onkeypress="return 
numbersonly(this, event)" id="pu" type="number" step="0.01" min="0" max="0.99" 
class="form-control"> 
                <label for="B">Параметр b</label> 
                <input placeholder="(0...1)" name="b" onkeypress="return 
numbersonly(this, event)" id="B" type="number" min="0.01" max="0.99" step="0.01" 
class="form-control"> 
                <label for="kd">Похибка керуючої дії</label> 
                <input placeholder="" name="kd" onkeypress="return 
numbersonly(this, event)" id="kd" type="number" step="0.01" min="0" class="form-
control"> 
                <h4 class="parametr">Параметри регулятора</h4> 
                    <label for="Kp">Коефіцієнт передачі Кp</label> 
                    <input id="Kp" type="number" name="Kp" onkeypress="return 
numbersonly(this, event)" step="0.1" class="form-control"> 
                    <label for="Ti">Постійна часу інтегральної складової 
Ті</label> 
                    <input id="Ti" type="number" name="Ti" onkeypress="return 
numbersonly(this, event)" step="0.01" class="form-control"> 
                <h4 class="parametr">Параметри об'єкта регулювання</h4> 
                    <label for="K">Коефіцієнт передачі K</label> 
                    <input id="K" type="number" name="K" onkeypress="return 
numbersonly(this, event)" step="0.1" class="form-control"> 
                    <label for="T1">Постійна часу Т1</label> 
                    <input id="T1" type="number" name="T1" onkeypress="return 
numbersonly(this, event)" step="0.01" class="form-control"> 
        </div> 
    </div> 
</div> 
 
 
<div class="row"> 
<div class="col-md-10 col-md-offset-1 "> 
<div class="index-block"> 
<h1 id="calculate">Обчислити параметри</h1> 
<div class="alert alert-danger" role="alert" id="zero" style="display: none">Ви 
не ввели Всі необхідні дані. Перевірте, будь ласка!</div> 
<div class="alert alert-danger" role="alert" id="d_0" style="display: 
none">Дані введено невірно, підкореневий вираз не може бути менше нуля!</div> 
<div class="row"> 
 <div class=" centrify col-xs-12 col-sm-6  col-md-6  calculatepi"> 
  <h4>Число розрядів АЦП</h4> 
  <button id="ACP" class="btn btn-default">Розрахувати</button> 
  <div id="out1" class="pull-right"></div> 
 </div> 
 <div class=" centrify col-xs-12 col-sm-6  col-md-6 calculatepi"> 
 
12 
482 ЧДТУ 21982-01 12 01 
 
   <h4 style="margin-bottom: 10 px !important">Число розрядів АЦП у 
контурі регулювання</h4> 
    <button id="ACP2" class="btn btn-default">Розрахувати</button>  
    <div id="out2" class="pull-right"></div> 
 </div> 
</div> 
<div class="row"> 
<div class=" centrify col-xs-12 col-sm-6  col-md-6 calculatepi"> 
<h4>Число розрядів ЦАП</h4> 
<button id="CAP" class="btn btn-default">Розрахувати</button> 
<div id="out3" class="pull-right"></div> 
</div> 
<div class=" centrify col-xs-12 col-sm-6  col-md-6 calculatepi"> 
<h4>Допустима похибка розрахунку</h4> 
<button id="POMILKA" class="btn btn-default">Розрахувати</button> 
<div id="out4" class="pull-right"></div> 
</div> 
</div> 
 
<div class="row"> 
<div class=" centrify col-xs-12 col-sm-6  col-md-6 calculatepi"> 
<h4>Оптимальний період дискретизації</h4> 
<div id="out5" class="pull-right"></div> 
<button id="butt5" class="btn btn-default">Розрахувати</button> 
 
</div> 
 
 
</div> 
</div> 
</div> 
</div> 
 <a id="pri-totop" class="backtotop" href="#"><i class="glyphicon glyphicon-
chevron-up" aria-hidden="true"></i></a> 
</div> 
 
        <footer> 
            <a href="mailto: [email protected]">Написати автору</a> 
            <a href="mailto: [email protected]"> 
            <span class="glyphicon glyphicon-envelope"> 
            </span> 
            </a> 
            <p>Copyright © 2017 by Alina Zaporozhets</p> 
        </footer> 
<script type="application/javascript" src="jquery-2.1.1.js"></script> 
<script type="text/javascript" src="bootstrap.js"></script> 
<script> 
$("#butt5").on("click", function(){ 
    var pu = parseFloat($("#pu").val()); 
    var Kp = parseFloat($("#Kp").val()); 
    var Ti = parseFloat($("#Ti").val()); 
    var K = parseFloat($("#K").val()); 
    var T1 = parseFloat($("#T1").val()); 
     
    if (!pu || !Kp || !Ti || !K || !T1) { $("#zero").show(); to("zero");} 
    else { 
        $("#zero").hide(); 
        w = formula5(pu, Kp, Ti, K, T1) 
        $("#out5").html(w); 
    } 
 
13 
482 ЧДТУ 21982-01 12 01 
 
}) 
 
function formula5(pu, Kp, Ti, K, T1){ 
 var w= ((2*pu*pu*K*Kp*T1+K*K*Kp*Kp*Ti)/(2*pu*pu*Ti*T1*T1))+Math.sqrt(( 
(2*pu*pu*K*Kp*T1+K*K*Kp*Kp*Ti)*(2*pu*pu*K*Kp*T1+K*K*Kp*Kp*Ti) 
/(2*pu*pu*T1*T1*Ti)/(2*pu*pu*T1*T1*Ti) )-((K*K*Kp*Kp*(pu*pu-
1)+pu*pu*Ti*Ti*(1+K*Kp)*(1+K*Kp)) / (pu*pu*Ti*Ti*T1*T1)) ); 
 if(w<0 || isNaN(w)){ 
 $("#d_0").show(); 
 to("d_0")} 
 
    return Math.sqrt(w); 
} 
 
</script> 
<script src="js.js"></script> 
</body> 
</html> 
 
 
 
 
 
 
 
WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ОБЛІКУ ПРИСТРОЇВ 
КОМУНАЛЬНОГО ПІДПРИЄМСТВА 
 
 
 
 
 
482 ЧДТУ 21982-01 34 01 
Інструкція користувачеві 
Листів 7 
 
 
 
 
 
Розробник   _____________  Грищенко Б.С. 
 
 
 
   Н     
 
 
 
 
 
Черкаси, 2025
 
2 
482 ЧДТУ 21982-01 34 01 
 
АНОТАЦІЯ 
 
Дана інструкція містить відомості про призначення програми, а також 
інформацію, необхідну для її експлуатації. 
Web-орієнтована система може працювати під керуванням операційних 
систем Windows Vista/7/8/10. 
Докладному описові перерахованих питань і присвячена дана інструкція. 
 
  
 
3 
482 ЧДТУ 21982-01 34 01 
 
Призначення web-орієнтованої інформаційної системи обліку пристроїв 
комунального підприємства полягає в централізованому, зручному та ефективному 
управлінні інформацією про обладнання (пристрої), яке використовується у 
діяльності комунального підприємства. Така система створюється для автоматизації 
процесів обліку, контролю, обслуговування та аналізу стану технічних засобів, що 
забезпечують роботу інфраструктури (водопостачання, освітлення, опалення, 
сміттєзбирання тощо). 
�� Основні цілі та призначення системи: 
Облік усіх пристроїв 
Зберігання даних про всі наявні пристрої (лічильники, насоси, електрощити, 
освітлювальні прилади тощо): їхнє розташування, модель, серійний номер, дата 
встановлення, технічні характеристики. 
Контроль стану обладнання 
Фіксація технічного стану пристроїв, виявлення поломок, планування 
профілактичних оглядів і ремонтів. 
Моніторинг та аналітика 
Генерація звітів про кількість пристроїв, частоту поломок, середній термін 
експлуатації, витрати на обслуговування. 
Розподіл відповідальності 
Визначення відповідальних осіб за обслуговування кожного пристрою чи 
групи пристроїв. 
Інтеграція з іншими службами 
Наприклад, з бухгалтерією (для списання чи амортизації обладнання), 
технічним відділом, логістикою (при заміні або доставці нового обладнання). 
Доступність і зручність використання 
Web-орієнтований формат означає, що система доступна через браузер, що 
полегшує її використання співробітниками в офісі чи в полі — через комп’ютер, 
планшет або смартфон. 
 
4 
482 ЧДТУ 21982-01 34 01 
 
Безпека та аудит 
Контроль доступу до даних, ведення журналів змін, історія дій користувачів. 
Web-орієнтована інформаційна система обліку пристроїв — це цифровий 
інструмент, який дозволяє комунальному підприємству вести точний, зручний і 
наочний облік технічних засобів, забезпечуючи ефективну експлуатацію та своєчасне 
обслуговування інфраструктури міста чи громади. 
Головне меню web-орієнтованої інформаційної системи обліку пристроїв 
комунального підприємства прозоре і легке для сприйняття. Меню орієнтоване на 
зручність, інтуїтивну навігацію та функціональність (Рисунок 1.1): 
 
 
Рисунок 1.1. Головне меню. 
 
Меню було створено в Консолі (Рисунок 1.2): 
 
5 
482 ЧДТУ 21982-01 34 01 
 
 
Рисунок 1.2. Головне меню в Консолі. 
 
Головне меню включає: 
- Головна панель – графіки, коротка статистика: кількість пристроїв, 
несправностей, запланованих ремонтів. 
- Пошук пристроїв – швидкий фільтр за серійним номером, типом, 
місцезнаходженням тощо. 
- Каталог пристроїв – база даних усіх зареєстрованих пристроїв з детальними 
картками. 
- Обслуговування та ремонти – журнал поломок, ремонти, історія технічного 
обслуговування. 
- Акти / Документація – електронне зберігання актів вводу в експлуатацію, 
демонтажу, перевірок. 
- Відповідальні працівники – призначення осіб, які обслуговують чи 
контролюють пристрої. 
- Локації / Об’єкти – мапа або список об'єктів, до яких прикріплені пристрої. 
- Планові перевірки – календар з автоматичними нагадуваннями про ТО чи 
заміни. 
 
6 
482 ЧДТУ 21982-01 34 01 
 
- Звіти та аналітика – побудова динамічних графіків, експортування звітів у 
PDF/Excel. 
- Інтеграції з іншими службами – зв’язок з обліковою системою, CRM, фінансами 
тощо. 
- Користувачі / Ролі доступу – адміністрування доступу (інженер, ревізор, 
диспетчер). 
- Налаштування системи – управління довідниками, зовнішнім виглядом, 
логікою роботи. 
 Процес авторизації в web-орієнтованій інформаційній системі обліку пристроїв 
комунального підприємства зазвичай включає кілька етапів, спрямованих на 
забезпечення безпеки доступу, ідентифікації користувача та контролю прав доступу. 
1. Сторінка входу 
Користувач потрапляє на захищену сторінку авторизації, де бачить форму з 
полями: 
Логін (Email або ім’я користувача) 
Пароль 
- Кнопка "Увійти" 
- (Опційно) Посилання «Забули пароль?» 
- (Опційно) Кнопка «Реєстрація» – якщо передбачена самостійна 
реєстрація користувачів 
 2. Введення облікових даних 
Користувач вводить свій логін і пароль. Система: 
- Шифрує пароль (зазвичай хешуванням через алгоритм типу bcrypt, 
Argon2 тощо) 
- Порівнює введені дані з тими, що зберігаються в базі даних 
- Перевіряє статус користувача (активний/заблокований) 
 3. Двофакторна автентифікація (2FA) (опційно) 
Для підвищеної безпеки система може запросити: 
 
7 
482 ЧДТУ 21982-01 34 01 
 
- Код з мобільного додатку (наприклад, Google Authenticator) 
- SMS-код 
- Електронний лист із підтвердженням входу 
 4. Авторизація та розподіл доступу 
Після успішного входу користувача система: 
- Визначає роль (наприклад: інженер, адміністратор, ревізор, керівник) 
- Визначає права доступу (до яких модулів, об'єктів чи дій користувач має 
доступ) 
- Перенаправляє його на головну панель системи (дашборд) 
 5. Безпека сесії 
- Система створює токен сесії або JWT (JSON Web Token) для 
підтвердження ідентичності 
- Встановлюється таймер автоматичного виходу (наприклад, після 15 хв. 
бездіяльності) 
- Можлива фіксація IP-адреси та пристрою користувача 
 6. Вихід з системи 
- Користувач натискає «Вийти» 
- Сесія очищається, токен стирається 
- Користувач перенаправляється на сторінку входу 
- Переваги такої схеми: 
- Захищає конфіденційну інформацію про пристрої та технічну 
інфраструктуру 
- Запобігає несанкціонованому доступу 
- Дозволяє ефективно керувати правами користувачів 
 
 
8 
482 ЧДТУ 21982-01 34 01 
 
 
 
Рисунок 1.3. Інтерфейс сторінки входу. 
 
 
 
Арк. 
ЧДТУ 210000.001 ПЗ  95 
Зм н.  Арк. №  докум. Підпис Дата
ChSTU repository

ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
