Інформаційна система будівельної компанії

РОЖКО, Павло

Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/7290

Назва:	Інформаційна система будівельної компанії
Автори:	РОЗЛОМІЙ, Інна РОЖКО, Павло
Ключові слова:	ІНФОРМАЦІЙНА СИСТЕМА;ЛОГІЧНА МОДЕЛЬ;БАЗА ДАНИХ;ДІАГРАМА ВИПАДКІВ;ДІАГРАМА КЛАСІВ;ІНТЕРФЕЙС КОРИСТУВАЧА;ТЕСТУВАННЯ
Дата публікації:	2025
Короткий огляд (реферат):	Метою виконання даної кваліфікаційної роботи на здобуття освітнього ступеня «бакалавр» є створення інформаційної системи будівельної компанії. Загальний обсяг роботи становить 62 сторінок. У роботі 14 рисунків, 1 таблиця. Для виконання роботи використано 20 літературних джерел. Головне завдання це розробка інформаційної системи для будівельної компанії. Створений вебзастосунок буде використовуватися компанією для онлайн-просування своїх послуг, залучення нових клієнтів і покращення взаємодії з існуючими. Стислий опис розділів кваліфікаційної роботи бакалавра складається з аналізу функції веб-додатку в сфері послуг та вимог до веб-сайту будівельної компанії; вибору технологій та інструментальних засобів розробки; проєктування вебзастосунку будівельної компанії, а саме побудова логічної моделі бази даних та розробка архітектури вебзастосунку, проєктування інтерфейсу користувача та тестування спроєктованого вебзастосунку.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/7290
Розташовується у зібраннях:	123 Комп’ютерна інженерія (Комп'ютерні системи та мережі)

Файли цього матеріалу:

Файл	Опис	Розмір	Формат
1_ТИТУЛКА_Рожко-merged.pdf Restricted Access		2.6 MB	Adobe PDF	Переглянути/Відкрити Запит копії

Показати повний опис матеріалу Перегляд статистики

Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ ІНЖЕНЕРІЇ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: «Інформаційна система будівельної
компанії»
ЧДТУ.252345.002 ПЗ
Виконав: студент 2 курсу, групи КМС-2105
спеціальності 123 – «Комп’ютерна інженерія»
за освітньою програмою – «Комп’ютерні системи
та мережі»
Павло РОЖКО
Керівник
к.т.н., доцент
Інна РОЗЛОМІЙ
Рецензент
к.т.н., доцент кафедри КІ та ІТ, ЧДБК
Сергій БУРМІСТРОВ
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ___________ Віра БАБЕНКО
Черкаси 2025 року
Форма № Н-9.01
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет: інформаційних технологій і систем
Кафедра: інформаційної безпеки та комп’ютерної інженерії
Освітньо-кваліфікаційний рівень: Бакалавр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор _____________ Віра БАБЕНКО
«28» лютого 2025 року
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Рожку Павлу Романовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи: Інформаційна система будівельної компанії
Керівник роботи: к.т.н., доцент Розломій Інна Олександрівна
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. № 53/03-03
2. Строк подання студентом роботи:
3. Вихідні дані до роботи:
Розробити архітектуру інформаційної системи за тришаровою моделлю, основними
компонентами якої повинні бути:
користувацький інтерфейс – реалізувати з використанням HTML, CSS, JavaScript та фреймворків;
серверна логіка – реалізувати мовами програмування PHP, Node.js або Python;
база даних – використати реляційну СУБД (MySQL або PostgreSQL).
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
1 Функції веб-додатку в сфері послуг
2 Огляд технологій веб-розробки
3 Аналіз вимог до веб-сайту будівельної компанії
4 Проєктування вебзастосунку будівельної компанії
5 Реалізація та тестування вебзастосунку
Висновки
Додатки
Список використаних джерел
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
1. Специфікація
2. Текст програми
6. Консультанти розділів роботи:
Розділ Прізвище, ініціали Підпис, дата
консультанта завдання видав завдання прийняв
7. Дата видачі завдання: 28 лютого 2025 року
КАЛЕНДАРНИЙ ПЛАН
Термін
№ з/п Назва етапів роботи виконання Примітка
етапів роботи
1 Збір матеріалу 01.03 – 14.03 виконано
2 Обробка матеріалу 15.03 – 20.03 виконано
3 Обґрунтування актуальності виконання досліджень 21.03 - 25.03 виконано
4 Оцінка стану проблеми, виокремлення дослідницьких виконано
задач, постановка задачі дослідження 26.03 – 01.04
5 Викладення сутності і результатів дослідження 03.04 - 08.04 виконано
6 Практичне застосування результатів дослідження 09.04 - 27.04 виконано
7 Оформлення результатів в пояснювальну записку 28.04 - 02.05 виконано
8 Подання роботи на відгук та рецензування 15.05 - 20.05 виконано
Студент ___________________________ Павло РОЖКО
(підпис)
Керівник роботи ___________________________ Інна РОЗЛОМІЙ
(підпис)
АНОТАЦІЯ
Метою виконання даної кваліфікаційної роботи на здобуття освітнього
ступеня «бакалавр» є створення інформаційної системи будівельної компанії.
Загальний обсяг роботи становить 62 сторінок. У роботі 14 рисунків,
1 таблиця. Для виконання роботи використано 20 літературних джерел.
Головне завдання це розробка інформаційної системи для будівельної
компанії. Створений вебзастосунок буде використовуватися компанією для
онлайн-просування своїх послуг, залучення нових клієнтів і покращення
взаємодії з існуючими.
Стислий опис розділів кваліфікаційної роботи бакалавра складається з
аналізу функції веб-додатку в сфері послуг та вимог до веб-сайту будівельної
компанії; вибору технологій та інструментальних засобів розробки;
проєктування вебзастосунку будівельної компанії, а саме побудова логічної
моделі бази даних та розробка архітектури вебзастосунку, проєктування
інтерфейсу користувача та тестування спроєктованого вебзастосунку.
Ключові слова: ІНФОРМАЦІЙНА СИСТЕМА, ЛОГІЧНА МОДЕЛЬ,
БАЗА ДАНИХ, ДІАГРАМА ВИПАДКІВ, ДІАГРАМА КЛАСІВ, ІНТЕРФЕЙС
КОРИСТУВАЧА, ТЕСТУВАННЯ
ANOTATION
The purpose of this qualification work for the degree of Bachelor is to create an
information system for a construction company.
The total volume of the work is 62 pages. The work contains 14 figures, 1 table.
20 literary sources were used to perform the work.
The main task is to develop an information system for a construction company.
The created web application will be used by the company for online promotion of its
services, attracting new customers and improving interaction with existing ones.
A brief description of the sections of the bachelor's qualification work consists
of an analysis of the function of a web application in the field of services and
requirements for a construction company's website; selection of technologies and
development tools; design of a construction company's web application, namely,
building a logical database model and developing the web application architecture,
designing the user interface and testing the designed web application.
Key words: INFORMATION SYSTEM, LOGICAL MODEL, DATABASE,
CASE DIAGRAM, CLASS DIAGRAM, USER INTERFACE, TESTING
ЗМІСТ
ВСТУП………………………………………………………………………... 4
.. 7
1 ФУНКЦІЇ ВЕБ-ДОДАТКУ В СФЕРІ 7
ПОСЛУГ……………………………. 8
1.1 Типові потреби будівельних компаній у цифрових 1
рішеннях…... 2
1.2 Аналіз веб-додатків українського ринку в будівельній 1
сфері……. 3
1.3 Висновки до 1
розділу……………………………………………….. 3
2 ОГЛЯД ТЕХНОЛОГІЙ ВЕБ- 1
РОЗРОБКИ………………………………………. 7
2.1 HTML, CSS, 1
JavaScript……………………………………………... 9
2.2 Фреймворки та 2
бібліотеки………………………………………………... 0
2.3 Серверні 2
технології………………………………………………… 1
2.4 Висновки до 2
розділу……………………………………………….. 1
3 АНАЛІЗ ВИМОГ ДО ВЕБ-САЙТУ БУДІВЕЛЬНОЇ 2
КОМПАНІЇ………… 3
3.1 Функціональні 2
вимоги……………………………………………... 4
3.2 Нефункціональні ЧДТУ.252345.002 ПЗ 2
Змн. Арк. № двоикмумо. ги……Під…пис……Дат……………………………... 5
РозрКобив Рожко П.Р. а
Керівник Розломій І.О. Інформаційна система Літ. Лист Листів
будівельної компанії 2 62
Рецеанзент Бурмістров С.
Н.Контроль Гресько С.О. Пояснювальна записка Кафедра ІБ та КІ
Затвфердив Бабенко В.Г. гр. КМС-2105
е
д
р
а
К
К
-
0
6
3.3 Дизайн та структура 2
сайту………………………………………… 6
3.4 Висновки до 2
розділу……………………………………………………….. 6
4 ПРОЄКТУВАННЯ ВЕБЗАСТОСУНКУ БУДІВЕЛЬНОЇ 3
КОМПАНІЇ….. 0
4.1 Логічна модель бази 3
даних……………………………………………….. 1
4.2 Архітектура 3
вебзастосунку………………………………………... 3
4.3 Діаграма випадків використання (Use Case 3
Diagram)…………… 5
4.4 Діаграми класів і 3
діяльності……………………………………….. 7
4.5 Висновки до 3
розділу……………………………………………….. 7
5 РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ
ВЕБЗАСТОСУНКУ…………………..
5.1 Проєктування інтерфейсу
користувача……………………………
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 3
а
5.2 Тестування 4
вебзастосунку…………………………………………. 4
5.3 Висновки до 4
розділу……………………………………………….. 8
ВИСНОВКИ………………………………………………………………… 4
… 9
ДОДАТКИ:
482.ЧДТУ.52345-01 Інформаційна система будівельної компанії
СПИСОК ВИКОРИСТАНИХ 6
ДЖЕРЕЛ…………………………………….. 1
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 4
а
ВСТУП
У сучасному світі інтернет став основним інструментом для
комунікації між компаніями та їх потенційними клієнтами. Веб-сайти
відіграють важливу роль у просуванні бізнесу, оскільки вони є першим
місцем, де користувачі отримують інформацію про компанію, її послуги та
продукти. Для будівельних компаній веб-сайт має особливе значення,
оскільки він виступає в ролі візитної картки, яка демонструє професіоналізм,
досвід та кваліфікацію в реалізації проектів різного масштабу.
Сайт будівельної компанії може бути використаний для:
 презентації портфоліо виконаних робіт,
 надання детальної інформації про послуги,
 створення можливості для замовлення послуг безпосередньо через
онлайн-форму,
 забезпечення контактних даних для швидкої взаємодії з клієнтами.
Також важливим є те, що якісно розроблений сайт допомагає
створювати довіру серед потенційних замовників і партнерів, а також
підвищує конкурентоспроможність компанії на ринку.
Метою даної бакалаврської роботи є розробка функціонального та
сучасного веб-сайту для будівельної компанії за допомогою основних
інструментів веб-розробки, зокрема, таких як HTML, CSS та JavaScript. Веб-
сайт має бути інтерактивним, зручним для користувачів, а також адаптивним
для коректного відображення на різних пристроях, від мобільних телефонів
до десктопів.
Завдання дослідження:
1. Аналіз технологій веб-розробки: вивчення сучасних підходів до
створення веб-сайтів для бізнесу, зокрема для будівельних компаній.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 5
а
2. Розробка структури та дизайну сайту: створення логічної та зручної
структури сайту, вибір відповідної колірної палітри та шрифтів, а також
розробка макетів для всіх сторінок.
3. Реалізація функціональності сайту: використання HTML, CSS та
JavaScript для створення динамічних елементів сайту, таких як слайдери,
форми зворотного зв'язку та інтерактивні карти.
4. Тестування сайту: перевірка на коректну роботу всіх функцій,
сумісність з різними браузерами та пристроями, а також тестування
швидкості завантаження.
5. Оптимізація сайту: забезпечення швидкого завантаження сайту та його
адаптивності до різних розмірів екранів.
Об'єкт і предмет дослідження
 Об'єкт дослідження: веб-розробка для будівельних компаній, зокрема
процес створення інтерфейсу сайту, його дизайну та функціональних
можливостей.
 Предмет дослідження: розробка сайту для будівельної компанії з
використанням основних веб-технологій, таких як HTML, CSS та
JavaScript, а також процеси тестування та оптимізації.
Методи дослідження
Для реалізації проекту були використані такі методи дослідження:
 Метод аналізу: вивчення існуючих прикладів веб-сайтів будівельних
компаній, оцінка їх структури та функціональності.
 Метод проектування: створення структури сайту, розробка дизайну та
взаємодії елементів.
 Метод програмування: розробка коду сайту, використовуючи сучасні
веб-технології.
 Метод тестування: перевірка роботи сайту на різних пристроях і
браузерах, тестування швидкості завантаження та взаємодії з
користувачем.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 6
а
Практична значущість роботи
Розробка функціонального та зручного веб-сайту для будівельної
компанії має важливе практичне значення. Створений сайт буде
використовуватися компанією для онлайн-просування своїх послуг,
залучення нових клієнтів і покращення взаємодії з існуючими. Це дозволить
не тільки збільшити конкурентоспроможність на ринку, але й підвищити
довіру клієнтів завдяки професіоналізму та сучасному підходу до роботи з
інформацією.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 7
а
1 ФУНКЦІЇ ВЕБ-ДОДАТКУ В СФЕРІ ПОСЛУГ
1.1 Типові потреби будівельних компаній у цифрових рішеннях
Масштаби проектів зростають, логістика ускладнюється, конкуренція
посилюється. Клієнти чекають прозорості й оперативного сервісу. Усе це
підштовхує компанії до впровадження цифрових рішень. Рішень, що
спрощують внутрішню роботу й покращують взаємодію із замовниками. У
будівельній сфері такі потреби охоплюють кілька ключових напрямів. Кожен
з них має стратегічне значення для стабільної роботи компанії.
Насамперед – управління проектами. Планування, контроль термінів,
бюджети, ресурси, комунікація між командами. У великій компанії можуть
одночасно будувати десятки об'єктів. Кожен вимагає точного нагляду,
узгодження з підрядниками, звітності перед клієнтом. Без цифрових
інструментів ці процеси стають повільними, заплутаними і вразливими до
помилок. Саме тому потрібні системи централізованого управління
проектами. Системи, які автоматизують рутину і дають змогу швидко
реагувати на зміни. [1]
Друга важлива потреба – зручна комунікація з клієнтами. Люди хочуть
бачити, що і як будується. Онлайн-інструменти мають показувати об'єкти,
відповідати на запитання, приймати заявки. Веб-платформа має надавати всю
актуальну інформацію: технічні характеристики, ціни, фото, візуалізації.
Добре, якщо є можливість попереднього розрахунку вартості або онлайн-
бронювання. Клієнт очікує швидкості, прозорості, персоналізації. Компанія –
зручного інструменту для обробки запитів і зворотного зв’язку. [1]
Ще один напрям – внутрішня організація роботи. У будівництві задіяні
інженери, прораби, логісти, офіс-менеджери, маркетологи. Щоб команда
працювала злагоджено, потрібна єдина система. Така, що дозволяє ставити
завдання, ділитися документацією, бачити оновлення і вести звітність. Без
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 8
а
цифрового ядра – хаос. Особливо якщо частина працівників перебуває на
об'єктах або працює віддалено. [1]
Окреме питання – документообіг. Будівництво завжди пов’язане з
великими обсягами документації. Договори, ліцензії, кошториси, технічні
паспорти, сертифікати. Усе це потрібно зберігати, швидко знаходити,
ділитися, контролювати версії. І головне - мати захищений доступ. Без
цифрової системи це просто неможливо. Тим паче, коли документи мають
бути інтегровані з іншими бізнес-інструментами.
Отже, цифрова присутність – це не просто сайт-візитка. Це повноцінна
платформа. Вона має охоплювати управління проектами, роботу з клієнтами,
координацію персоналу і документообіг. Ігнорувати ці потреби – означає
втрачати конкурентоспроможність. Веб-додаток, який враховує всі ці
аспекти, - не розкіш, а нагальна потреба для компаній, що хочуть стабільного
розвитку в сучасних умовах.
1.2 Аналіз веб-додатків українського ринку в будівельній сфері
У сучасних умовах цифровізації бізнесу веб-додатки відіграють
ключову роль у формуванні взаємодії між будівельними компаніями та
їхніми клієнтами. Особливо це актуально в Україні, де будівельна галузь
продовжує демонструвати сталий розвиток попри складну соціально-
економічну ситуацію. Веб-додатки дозволяють компаніям ефективно
презентувати свої послуги, автоматизувати процеси взаємодії з клієнтами,
збирати зворотний зв’язок, а також спрощувати процедури подачі заявок,
розрахунків вартості робіт та інші сервіси. У цьому розділі буде здійснено
аналіз веб-додатків провідних українських будівельних компаній, зокрема
оцінено рівень їхньої функціональності, зручність користування,
адаптивність інтерфейсу, якість дизайну та інтерактивності, а також виявлено
типові недоліки, які стримують ефективну комунікацію з користувачем. [20]
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 9
а
Одним із найвідоміших прикладів у цьому контексті є веб-сайт
компанії «Київміськбуд» (https://kmb.ua), який позиціонується як один із
найбільших забудовників столиці. На перший погляд, сайт справляє
позитивне враження завдяки сучасному візуальному оформленню, що
відповідає корпоративному стилю. Проте при глибокому вивченні
виявляється низка проблем, які можуть негативно впливати на
користувацький досвід.
Рисунок 1.1 – Головна сторінка сайту «Київміськбуд»
Незважаючи на наявність інтерактивної мапи новобудов, її навігація
ускладнена через погану оптимізацію та затримки завантаження, особливо на
мобільних пристроях. Структура сайту перенавантажена - надмірна кількість
вкладених розділів і підрозділів створює враження хаосу та утруднює швидке
знаходження необхідної інформації. Окрім того, частина сторінок
завантажується повільно або потребує оновлення для відображення
актуальних даних, що є критичним для потенційних покупців житла.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 10
а
Іншим прикладом є сайт будівельної компанії «Інтергал-Буд»
(https://intergal-bud.com.ua), що активно рекламується в інформаційному
просторі. Його головна сторінка (рисунок1.2) побудована за принципом
промо-лендингу з великими візуальними блоками та акцентами на акційні
пропозиції. Такий підхід є ефективним з маркетингової точки зору, однак він
супроводжується низкою технічних недоопрацювань.
Рисунок 1.2 – Головна сторінка Інтеграл-Буд
Зокрема, функція пошуку квартир працює нестабільно: у деяких
випадках користувач після фільтрації об’єктів не отримує жодного
результату через некоректну інтеграцію параметрів. Веб-сайт має обмежені
можливості для користувачів з особливими потребами – відсутні
альтернативні текстові описи до зображень, що суперечить принципам
доступності. Сайт не пропонує особистого кабінету для користувачів, де
можна було б зберігати обрані варіанти квартир або відстежувати статус
заявки – це суттєво знижує рівень персоналізації.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 11
а
Компанія «РІЕЛ» (https://riel.ua) демонструє певні зусилля щодо
впровадження сучасних технологій, зокрема візуалізацій будинків у
форматі 3D, що є рідкістю для українського ринку. Однак реалізація цього
функціоналу є фрагментарною - лише деякі житлові комплекси мають такі
моделі, і навіть у цих випадках швидкість їх завантаження залишається
незадовільною. Крім того, сайт має надмірне графічне навантаження, що
сповільнює роботу на мобільних пристроях та при слабкому інтернет-
з'єднанні. Відсутність адаптивного дизайну на деяких сторінках призводить
до перекручення верстки, що негативно впливає на зручність перегляду.
Окремою проблемою є відсутність підтримки кількох мов інтерфейсу, що
ускладнює використання платформи для іноземних клієнтів - потенційно
важливого сегменту ринку в умовах активного залучення інвестицій у
нерухомість з-за кордону.
Рисунок 1.3 – Головна сторінка BudCAPITAL
Аналізуючи сайт "BudCapital" (https://budcapital.ua), можна зауважити
прагнення до лаконічного, функціонального дизайну (рисунок 1.3).
Водночас, на відміну від конкурентів, ця компанія не пропонує глибокого
контентного наповнення. Інформація подається поверхнево: відсутні
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 12
а
розгорнуті технічні характеристики об'єктів, енергетичні показники
будинків, не деталізовано інфраструктуру районів. Це створює враження
неповної відкритості та змушує користувача звертатися за додатковими
роз’ясненнями телефоном або через форму зворотного зв’язку, яка, до речі,
не передбачає вибору теми звернення чи прикріплення файлів. Таким чином,
сайт не відповідає потребам користувачів, які очікують оперативного
отримання максимально повної інформації без необхідності особистого
контакту.
1.3 Висновки до розділу
На підставі проведеного аналізу можна зробити висновок, що
українські будівельні компанії переважно розглядають веб-додатки як
маркетингові інструменти, орієнтовані на візуальне представлення продукту,
а ні як повноцінні цифрові платформи для взаємодії з користувачем.
Більшість з них демонструє обмежену інтерактивність, відсутність
персоналізованих сервісів, погану оптимізацію під мобільні пристрої та
недостатню увагу до питань доступності. Бракує інновацій, зокрема
інтеграції зі сторонніми сервісами (наприклад, банківськими API для
миттєвих розрахунків чи мапами з реальним трафіком), автоматизованих
систем підтримки (чат-ботів), а також гнучкої архітектури, що дозволяла б
масштабувати додатки з урахуванням потреб користувачів.
Для досягнення конкурентоспроможності в цифровому середовищі
українським будівельним компаніям необхідно переосмислити концепцію
веб-додатків – від інформативних сайтів до функціональних хабів з
інтегрованими сервісами, зручними інтерфейсами та орієнтацією на сучасні
стандарти користувацького досвіду.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 13
а
2 ОГЛЯД ТЕХНОЛОГІЙ ВЕБ-РОЗРОБКИ
2.1 HTML, CSS, JavaScript
Основою будь-якого веб-сайту є три базові технології: HTML, CSS та
JavaScript.
HTML (HyperText Markup Language) [5, 6]
HTML — це стандартна мова розмітки для створення веб-сторінок.
Вона визначає структуру веб-документів, вказуючи браузеру, як відображати
текст, зображення, таблиці, форми та інші елементи на веб-сторінці.
Основні елементи HTML:
 Теги: HTML-документ складається з тегів, які вказують на різні
частини сторінки. Наприклад:
 <h1> — заголовок першого рівня;
 <p> — параграф;
 <a> — гіперпосилання;
 <img> — зображення.
 Атрибути: кожен тег може мати атрибути, які уточнюють його
поведінку. Наприклад, у тегу <img src="image.jpg" alt="Опис
зображення"> атрибут src вказує на джерело зображення, а атрибут alt
надає текстовий опис для доступності.
 Структура документа: базова структура HTML-сторінки виглядає
наступним чином:
html
КопироватьРедактировать
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Назва сайту</title>
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 14
а
</head>
<body>
<h1>Заголовок сторінки</h1>
<p>Текстова інформація</p>
</body>
</html>
Для будівельних компаній HTML є основою для створення структури
сайту, де кожна сторінка містить заголовки, абзаци, гіперпосилання на інші
розділи сайту, а також блоки з інформацією про послуги, проекти та
контактні дані.
CSS (Cascading Style Sheets) [5, 6]
CSS — це мова стилів, яка використовується для оформлення вигляду
веб-сторінок, що були створені з допомогою HTML. CSS дозволяє визначити
кольори, шрифти, відступи, межі та багато інших стилістичних аспектів.
Основні можливості CSS:
 Селектори: CSS дозволяє вибирати елементи за допомогою селекторів
(наприклад, по тегу, класу або ідентифікатору).
 Селектор по тегу: p { color: red; } — для всіх параграфів
встановлюється червоний колір тексту.
 Селектор по класу: .services { font-size: 16px; } — для елементів з
класом .services.
 Блочна модель: кожен елемент на сторінці є прямокутним блоком,
який має такі властивості, як ширина, висота, відступи (margins),
поля (padding) та межі (borders).
 Позиціонування: CSS дозволяє задавати позицію елементів на
сторінці:
 position: absolute; — елемент позиціонується відносно
найближчого предка.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 15
а
 position: fixed; — елемент залишається на своєму місці при
прокручуванні сторінки.
 Адаптивність: за допомогою media queries можна створювати різні
стилі для різних розмірів екранів, забезпечуючи адаптивність сайту для
мобільних пристроїв.
Приклад базових стилів CSS для сайту будівельної компанії:
css
КопироватьРедактировать
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1 {
color: #333;
font-size: 2em;
}
.services {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.service-item {
background-color: #fff;
padding: 20px;
margin: 10px;
border-radius: 8px;
}
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 16
а
Для веб-сайту будівельної компанії CSS дозволяє створити стильний та
інтуїтивно зрозумілий дизайн, який покращує користувацький досвід, а
також забезпечує естетичне оформлення контенту, наприклад, портфоліо
робіт, описів послуг, контактних даних тощо.
JavaScript [7]
JavaScript — це мова програмування, яка використовується для
додавання динамічної функціональності на веб-сайт. Вона дозволяє
створювати інтерактивні елементи, взаємодіяти з користувачем, обробляти
дані, а також оновлювати сторінку без перезавантаження.
Основні можливості JavaScript:
 Маніпулювання елементами DOM: DOM (Document Object Model) —
це об'єктна модель HTML-документу. За допомогою JavaScript можна
змінювати вміст сторінки, додавати нові елементи, приховувати або
показувати блоки:
javascript
Копировать Редактировать
document.getElementById("service-list").style.display = "none";
 Обробка подій: JavaScript дозволяє додавати обробники подій для
елементів на сторінці, таких як кліки, наведення миші, введення даних
у форму:
javascript
Копировать Редактировать
document.getElementById("submit-btn").addEventListener("click",
function() {
alert("Форма відправлена!");
});
 Форми та валідація: JavaScript широко використовується для валідації
форм на сайтах. Це дозволяє перевірити правильність введених даних
(наприклад, правильність email-адреси або телефонного номера):
javascript
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 17
а
Копировать Редактировать
function validateEmail(email) {
const regex = /\S+@\S+\.\S+/;
return regex.test(email);
}
Для будівельних компаній JavaScript дозволяє реалізувати важливі
функціональні можливості, такі як:
 інтерактивні слайдери з проектами;
 форми для запитів і консультацій;
 динамічні меню та фільтри для портфоліо.
2.2 Фреймворки та бібліотеки
Для прискорення та стандартизації розробки сучасні веб-девелопери
використовують фреймворки та бібліотеки:
 CSS-фреймворки — дозволяють швидко створювати адаптивний
дизайн завдяки готовим стилям, сіткам та компонентам. Bootstrap
підтримує мобільну адаптивність, що особливо важливо для сучасних
сайтів.
 JavaScript-бібліотеки та фреймворки:
 jQuery — спрощує роботу з DOM, подіями та анімаціями, однак на
сьогодні вважається застарілим для великих проєктів.
 React — бібліотека від Facebook для створення динамічних
інтерфейсів. Працює на основі компонентів та віртуального DOM,
що покращує продуктивність.
 Інші популярні рішення: Vue.js, Angular, які мають власні переваги
в залежності від вимог проєкту.
Для веб-розробки існує багато популярних інструментів, які надають
готові рішення для часто використовуваних задач.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 18
а
Bootstrap [8]
Bootstrap — це популярний CSS-фреймворк, який забезпечує готові
компоненти та стилі для створення адаптивних і привабливих веб-сайтів. В
ньому є готові стилі для кнопок, форм, меню, сіток і багато іншого.
Приклад використання Bootstrap для створення адаптивного меню:
html
КопироватьРедактировать
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Будівельна компанія</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Головна</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Послуги</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Про компанію</a>
</li>
</ul>
</div>
</nav>
jQuery [8]
jQuery — це бібліотека JavaScript, яка спрощує маніпулювання
елементами на сторінці, обробку подій, а також AJAX-запити. Вона дозволяє
за допомогою меншого коду виконувати різні операції, які в стандартному
JavaScript займають більше рядків коду.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 19
а
Приклад простого слайдера з використанням jQuery:
javascript
КопироватьРедактировать
$(document).ready(function() {
$(".slider").slick();
});
React [8]
React — це JavaScript-бібліотека для створення інтерактивних
інтерфейсів. Вона дозволяє створювати компоненти, які можуть змінювати
свій стан без перезавантаження сторінки.
React може бути корисним для створення динамічних розділів сайту,
таких як форма для замовлення консультацій, портфоліо або калькулятор
вартості будівельних послуг.
2.3 Серверні технології
Крім клієнтської частини, веб-сайт має серверну сторону, яка обробляє
запити, взаємодіє з базами даних та забезпечує динамічність контенту.
 Серверні мови та середовища:
 PHP — найпопулярніша мова для створення серверної логіки,
зокрема для CMS (WordPress, Joomla, Drupal).
 Node.js — платформа на JavaScript, яка дозволяє будувати серверну
частину веб-додатків.
 CMS (Content Management Systems):
 WordPress — найпопулярніша безкоштовна система управління
контентом. Дозволяє створювати сайти без глибоких знань
програмування завдяки шаблонам і плагінам.
 Бази даних:
 MySQL, PostgreSQL, MongoDB — зберігають контент,
користувацькі дані, записи про замовлення тощо.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 20
а
Використання серверних технологій забезпечує повноцінну взаємодію
з користувачем, можливість реєстрації, авторизації, керування контентом і
динамічного оновлення сайту.
2.4 Висновки до розділу
Отже, для розробки сучасного веб-сайту будівельної компанії
необхідно використовувати ці технології у поєднанні. HTML надає базову
структуру сторінки, CSS забезпечує стильний вигляд, а JavaScript додає
динамічну функціональність. Крім того, застосування фреймворків та
бібліотек, таких як Bootstrap або React, допомагає значно прискорити
процес розробки, а також підвищити якість та зручність сайту для
користувачів.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 21
а
3 АНАЛІЗ ВИМОГ ДО ВЕБ-САЙТУ БУДІВЕЛЬНОЇ КОМПАНІЇ
У цьому розділі детально розглядаються вимоги до розробки веб-сайту
для будівельної компанії. Створення якісного веб-сайту для такої компанії
передбачає врахування різних аспектів, включаючи функціональність,
дизайн, зручність користування, безпеку та адаптивність. Ці вимоги
допомагають забезпечити ефективне представлення компанії в інтернеті, а
також полегшити взаємодію з потенційними клієнтами.
3.1 Функціональні вимоги
Функціональні вимоги визначають, що саме має виконувати сайт і які
можливості він повинен надавати користувачам. Для будівельної компанії ці
вимоги можуть бути наступними:
1. Інформаційні сторінки:
 Головна сторінка: на головній сторінці користувачі мають
отримати основну інформацію про компанію, її послуги та ключові
переваги.
 Про компанію: сторінка, на якій міститься історія компанії, її місія,
візія, досвід у будівництві.
 Контактна інформація: на цій сторінці повинні бути вказані
контактні дані (адреса, телефони, email) та інтерактивна форма для
запитів або зворотного зв’язку.
2. Послуги компанії:
 Сторінка послуг повинна включати детальний опис кожної з
пропонованих послуг. Наприклад: будівництво приватних будинків,
ремонти, реставрація, дизайн інтер'єрів тощо.
 Можливість перегляду портфоліо завершених проектів.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 22
а
 Можливість сортувати послуги за категоріями (наприклад, за
типами робіт, регіоном або ціною).
3. Портфоліо:
 Сторінка з проектами повинна демонструвати завершені проекти
компанії. Для кожного проекту має бути фотографії, опис робіт, а
також інформація про терміни виконання та відгуки клієнтів.
4. Форма зворотного зв'язку:
 Сайт повинен включати інтерактивну форму, через яку потенційні
клієнти можуть залишати заявки на консультацію або замовлення
послуг.
 Важливою є валідація форми для забезпечення коректності
введених даних (наприклад, перевірка правильності email або
номеру телефону).
5. Блог або новини:
 Цей розділ може містити статті про будівництво, поради по
ремонту, новини компанії, спеціальні пропозиції та акції.
6. Інтерактивні елементи:
 Калькулятор вартості послуг. Це дозволить користувачам оцінити
приблизну вартість послуг будівельної компанії на основі їхніх
виборів (тип послуг, площа, складність робіт).
 Картки для відгуків клієнтів. Це додасть довіри до компанії,
дозволяючи потенційним клієнтам ознайомитись з досвідом
попередніх замовників.
7. Інтеграція з соціальними мережами:
 Веб-сайт має бути інтегрований з основними соціальними
мережами (Facebook, Instagram, LinkedIn), що дозволить
відвідувачам ділитися контентом та залишати коментарі.
8. Мультимедіа:
 Використання відео для презентацій компанії або проектів.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 23
а
 Фотографії та інфографіка для покращення сприйняття інформації.
3.2 Нефункціональні вимоги
Нефункціональні вимоги стосуються загальних характеристик веб-
сайту, які забезпечують його ефективність, доступність і зручність для
користувачів.
1. Продуктивність і швидкість завантаження:
 Сайт повинен швидко завантажуватися, навіть при наявності
великої кількості медіафайлів (фотографій, відео).
 Для цього можна використовувати оптимізацію зображень та
коду, кешування ресурсів, lazy load (відкладене завантаження).
2. Адаптивність та мобільна версія:
 Сайт повинен коректно відображатися на різних пристроях
(мобільних телефонах, планшетах, комп’ютерах).
 Адаптивний дизайн необхідний для зручності користувачів, адже
багато потенційних клієнтів використовують мобільні телефони
для перегляду веб-сайтів.
3. Безпека:
 Сайт має бути захищений від можливих атак, таких як SQL-
ін'єкції, XSS (міжсайтові сценарії) та CSRF (міжсайтові підробки
запитів).
 Для захисту персональних даних користувачів важливо
впровадити шифрування даних за допомогою HTTPS.
 Захист форм зворотного зв'язку від спаму за допомогою
CAPTCHA.
4. Доступність (Accessibility):
 Сайт повинен бути доступним для людей з обмеженими
можливостями. Для цього важливо використовувати правильні
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 24
а
ARIA-атрибути, надавати текстові описи до зображень та
використовувати зрозумілий контент.
 Веб-сайт має бути зручним для користувачів з порушеннями
зору, слуху або рухових функцій.
5. SEO (Search Engine Optimization):
 Веб-сайт має бути оптимізований для пошукових систем. Це
включає правильну структуру URL, використання ключових слів
у текстах, мета-описах, заголовках та атрибутах зображень.
 Приділення уваги оптимізації для пошукових систем допоможе
підвищити видимість компанії в пошукових системах, таких як
Google, і залучити нових клієнтів.
6. Локалізація та мовні версії:
 Якщо компанія працює на міжнародному ринку або має клієнтів,
що говорять різними мовами, важливо реалізувати підтримку
багатомовності на сайті.
 Сайт може бути локалізований для різних ринків, зокрема, на
українську, російську, англійську та інші мови.
3.3 Дизайн та структура сайту
Дизайн сайту відіграє ключову роль у залученні потенційних клієнтів
та створенні довіри до компанії. Веб-сайт для будівельної компанії повинен
мати естетичний, професійний та сучасний вигляд.
Ключові моменти дизайну:
1. Візуальна привабливість:
 Використання якісних зображень та графіки для демонстрації
проектів компанії.
 Лаконічний та стильний дизайн, який відображає професіоналізм
компанії в будівництві.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 25
а
 Використання кольорів, що асоціюються з надійністю та
стабільністю (наприклад, сірі, сині, зелені відтінки).
2. Інтуїтивно зрозуміле навігаційне меню:
 Простота у навігації — відвідувач сайту має швидко знаходити
потрібну інформацію.
 Логічна структура сайту з чітким розподілом на категорії та
підкатегорії (наприклад, головна сторінка → послуги →
детальний опис послуг).
3. Інтерактивність:
 Створення інтерактивних елементів, таких як слайдери з
проектами або калькулятори вартості.
 Анімації або переходи, які роблять сайт більш привабливим без
надмірної навантаженості.
3.4 Висновки до розділу
Отже, аналіз вимог до веб-сайту будівельної компанії включає як
функціональні, так і нефункціональні аспекти. Сайт має бути
функціональним, зручним, безпечним та адаптованим до різних пристроїв.
Правильний дизайн і юзабіліті дозволяють підвищити рівень задоволення
користувачів і збільшити конверсії. Виконання всіх цих вимог гарантує
створення ефективного інструменту для залучення клієнтів і розвитку
бізнесу.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 26
а
4 ПРОЄКТУВАННЯ ВЕБЗАСТОСУНКУ БУДІВЕЛЬНОЇ КОМПАНІЇ
Проєктування є критичним етапом розробки програмного забезпечення,
що передбачає формалізацію вимог, побудову логічної структури системи та
візуалізацію її основних компонентів. На цьому етапі здійснюється перехід
від опису функціональних потреб користувачів до конкретних технічних
рішень, які будуть реалізовані в процесі програмної імплементації.
Вебзастосунок для будівельної компанії призначений для автоматизації
управління проєктами, ведення обліку клієнтів, співробітників, матеріалів та
взаємозв’язків між ними. Особливу увагу приділено структурованості даних,
зручності взаємодії з інтерфейсом та масштабованості архітектури.
У межах цього розділу представлено логічну модель бази даних,
розглянуто архітектуру вебзастосунку, розроблено UML-діаграми для опису
функціональної та структурної організації, а також наведено приклади
користувацьких сценаріїв. Усі елементи проектування спрямовані на
забезпечення цілісності, ефективності та надійності роботи майбутньої
інформаційної системи.
4.1 Логічна модель бази даних
Для забезпечення обліку клієнтів, проєктів, працівників, матеріалів і їх
використання у межах будівельної компанії розроблено логічну модель бази
даних. Вона відображає структуру основних сутностей системи, їх атрибути з
типами даних і обмеженнями, а також зв’язки між таблицями.
У системі визначено такі сутності:
1. Клієнт (Client) – зберігає дані про замовників будівельної компанії
та включає такі поля:
 ID_клієнта: INT, первинний ключ, автоінкремент, NOTNULL;
 Прізвище: VARCHAR(50), NOT NULL;
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 27
а
 Ім’я: VARCHAR(50), NOT NULL;
 Телефон: VARCHAR(15), UNIQUE, NOT NULL;
 Електронна пошта: VARCHAR(100), UNIQUE, NOT NULL;
 Адреса: VARCHAR(255), NULL.
2. Проєкт (Project) – містить інформацію про будівельні проекти та
включає такі поля:
 ID_проєкту: INT, первинний ключ, автоінкремент, NOT NULL;
 Назва: VARCHAR(100), NOT NULL;
 Опис: TEXT, NULL;
 Дата_початку: DATE, NOT NULL;
 Дата_завершення: DATE, NULL;
 Статус: VARCHAR(30), NOTNULL (наприклад: “у процесі”,
«завершено», «скасовано»);
 ID_клієнта: INT, зовнішній ключ на Client(ID_клієнта),
NOTNULL.
3. Співробітник (Employee) – містить інформацію про працівників
компанії та включає:
 ID_співробітника: INT, первинний ключ, автоінкремент,
NOTNULL;
 ПІБ: VARCHAR(100), NOT NULL;
 Посада: VARCHAR(50), NOT NULL;
 Телефон: VARCHAR(15), UNIQUE, NOT NULL;
 Електронна пошта: VARCHAR(100), UNIQUE, NOT NULL.
4. Участь у проєкті (Project_Assignment) – реалізує зв’язок M:N між
проектами та співробітниками, містить такі поля:
 ID_участі: INT, первинний ключ, автоінкремент, NOT NULL;
 ID_проєкту: INT, зовнішній ключ на Project(ID_проєкту, NOT
NULL;
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 28
а
 ID_співробітника: INT, зовнішній ключ на Employee
(ID_співробітника), NOT NULL;
 Роль: VARCHAR(50), NOTNULL (наприклад: «прораб»,
«інженер», «менеджер»);
 Дата_призначення: DATE, NOTNULL.
5. Матеріал (Material) – описує матеріали, які використовуються в
будівництві, та включає:
 ID_матеріалу: INT, первинний ключ, автоінкремент, NOTNULL;
 Назва: VARCHAR(100), NOT NULL;
 Опис: TEXT, NULL;
 Одиниця_виміру: VARCHAR(20), NOT NULL (наприклад: «м³»,
«шт.», «кг»);
 Ціна_за_одиницю: DECIMAL(10,2), NOT NULL.
6. Використання матеріалів (Material_Usage) – зв’язує матеріали з
проєктами, зберігаючи інформацію про їх обсяг:
 ID_використання: INT, первинний ключ, автоінкремент,
NOTNULL;
 ID_проєкту: INT, зовнішній ключ на Project(ID_проєкту),
NOTNULL;
 ID_матеріалу: INT, зовнішній ключ на Material(ID_матеріалу,
NOTNULL;
 Кількість: DECIMAL(10,2), NOT NULL.
Зв’язки між сутностями реалізуються через зовнішні ключі. Всізв’язки
забезпечують цілісність даних на рівні СУБД. Наприклад, якщо клієнт
видаляється, проєкти, пов’язані з ним, можуть або видалятись каскадно, або
залишатися з відповідною позначкою – залежно від логіки системи.
На рисунку 4.1 зображено логічну модель бази даних у вигляді ER-
діаграми, що відображає сутності, їх атрибути та ключові зв’язки.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 29
а
Рисунок 4.1 – Логічна модель бази даних вебзастосунку для будівельної
компанії
Розроблена модель відповідає вимогам нормалізації до третьої
нормальної форми, що забезпечує уникнення надлишковості, покращує
узгодженість і спрощує обслуговування бази даних.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 30
а
4.2 Архітектура вебзастосунку
Архітектура вебзастосунку для будівельної компанії побудована за
тришаровою моделлю, що забезпечує модульність, гнучкість,
масштабованість і розділення обов’язків між різними компонентами системи.
Такий підхід дозволяє легко оновлювати інтерфейс без впливу на бізнес-
логіку, а також змінювати або оптимізувати роботу з базою даних без
втручання у вищі рівні.
Основні компоненти архітектури:
1. Користувацький інтерфейс (Frontend) – реалізований з
використанням HTML, CSS, JavaScript та фреймворків (наприклад,
Bootstrap) для створення адаптивного та інтуїтивного інтерфейсу
користувача. Забезпечує відображення інформації, отриманої від
серверної частини, і взаємодію з користувачем.
2. Серверна логіка (Backend) – відповідальна за обробку запитів від
користувача, виконання бізнес-логіки та взаємодію з базою даних.
Реалізується мовами програмування PHP, Node.js або Python
(наприклад, Flask), залежно від обраного стеку технологій.
3. Рівень доступу до даних (Data Access Layer) – виконує функції
обробки запитів до бази даних, реалізує API та інтерфейси обміну
даними. Забезпечує передачу структурованої інформації до клієнта.
4. База даних (Database Layer) – містить всю інформацію про клієнтів,
проєкти, співробітників, матеріали та їхнє використання.
Використовується реляційна СУБД, така як MySQL або PostgreSQL.
Архітектурна схема вебзастосунку представлена на рисунку 4.2. Вона
демонструє взаємозв’язки між рівнями та логіку обміну даними в системі.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 31
а
Рисунок 4.2 – Архітектура вебзастосунку для будівельної компанії
4.3 Діаграма випадків використання (Use Case Diagram)
Для визначення функціональних можливостей вебзастосунку, який
призначений для автоматизації роботи будівельної компанії, побудовано
діаграму випадків використання (Use Case Diagram). Ця діаграма дозволяє
візуалізувати взаємодію користувачів (акторів) із системою та окреслити
основні функції, які повинна підтримувати програмна система.
Виділено три основні ролі користувачів, які взаємодіють із
вебзастосунком:
1. Адміністратор — здійснює контроль за роботою системи, відповідає
за створення, редагування та видалення користувачів, ведення переліку
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 32
а
проєктів, а також управління довідником матеріалів, які
використовуються в межах проєктів. Його завдання — забезпечення
цілісності та актуальності даних у системі.
2. Менеджер проєкту — виконує управлінські функції в межах окремих
проєктів. Має право редагувати інформацію про проєкти, слідкувати за
їхнім статусом, а також призначати до участі у виконанні
відповідальних співробітників. Менеджер працює з динамічними
аспектами проєктів.
3. Клієнт — кінцевий користувач, який отримує інформацію про свій
замовлений проєкт. Має доступ лише до перегляду відповідних даних:
назви, опису, статусу виконання, строків реалізації.
Кожен актор взаємодіє з певним набором функціональних можливостей
системи. Для кожної ролі визначено окремі випадки використання (usecases),
які зображено у вигляді еліпсів. Взаємозв’язки між акторами та їх діями
наочно представлені на діаграмі, рисунку 4.3.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 33
а
Рисунок 4.3 – Діаграма випадків використання вебзастосунку для будівельної
компанії
На діаграмі видно, що адміністратор має найширші повноваження, що
відповідає його ролі в інформаційній системі. Менеджер проекту обмежений
лише тими функціями, що стосуються керування проєктом. Клієнт, у свою
чергу, взаємодіє лише з інформацією, що стосується його власного
замовлення. Такий підхід до розподілу функцій забезпечує гнучкість,
зручність та безпеку використання вебзастосунку.
4.4 Діаграми класів і діяльності
Для формалізації структури вебзастосунку та кращого розуміння
взаємозв’язків між його об’єктами було створено UML-діаграму класів і
діаграму діяльності.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 34
а
Діаграма класів (Class Diagram) демонструє основні сутності
вебзастосунку у вигляді класів, їхні атрибути, методи та взаємозв’язки між
ними (рисунок 4.4). Вона дозволяє відобразити логічну модель предметної
області та описати, як об’єкти взаємодіють один з одним.
Основні класи системи:
 клієнт – містить ідентифікаційні та контактні дані, має метод для
перегляду інформації про власний проєкт;
 проєкт – пов’язаний із клієнтом, містить опис, статус, перелік
матеріалів; реалізує методи редагування та перегляду матеріалів;
 матеріал – описує будівельні ресурси, що використовуються у
проєктах;
 менеджер – має доступ до керування проєктами та призначення
співробітників;
 адміністратор – відповідає за управління системними об’єктами:
користувачами, проєктами, матеріалами.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 35
а
Рисунок 4.4 – Діаграма класів вебзастосунку для будівельної компанії
Ця діаграма дає змогу не лише візуалізувати логіку організації класів, а
й ефективно використовувати її як базу для реалізації програмного коду у
рамках об’єктно-орієнтованого підходу. Зокрема, добре видно, як
реалізуються принципи інкапсуляції, відповідальностей та зв’язності між
елементами системи.
4.5 Висновки до розділу
У даному розділі було здійснено проектування вебзастосунку для
будівельної компанії з урахуванням функціональних вимог і специфіки
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 36
а
предметної області. Побудовано логічну модель бази даних, яка містить
основні сутності системи — клієнтів, проєкти, матеріали, користувачів — та
відображає їхні атрибути й взаємозв’язки. Це стало основою для створення
структурованої і цілісної системи збереження даних.
Описано архітектуру вебзастосунку, яка побудована за принципом
багаторівневої моделі: представлено рівень інтерфейсу, серверної логіки,
доступу до даних та бази даних. Така архітектура забезпечує модульність,
розширюваність та зручність у супроводі системи.
За допомогою діаграми випадків використання визначено основних
акторів системи (адміністратор, менеджер проєкту, клієнт) та їхні ролі у
взаємодії з функціональністю застосунку. Діаграма класів дозволила
структурувати основні елементи програмної логіки й підготувати основу для
реалізації об’єктно-орієнтованої моделі. Таким чином, результати цього
етапу проектування створюють чітке технічне підґрунтя для реалізації
вебзастосунку, що буде представлено у наступному розділі.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 37
а
5 РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ ВЕБЗАСТОСУНКУ
На основі результатів, отриманих у попередньому розділі, було
реалізовано вебзастосунок для будівельної компанії з урахуванням
функціональних вимог, архітектури системи та логічної моделі даних.
Реалізація охоплює розробку користувацького інтерфейсу, серверної логіки,
налаштування бази даних, а також проведення функціонального тестування
готового рішення.
У межах цього етапу особливу увагу приділено зручності взаємодії
користувача із системою, швидкодії, структурованості коду та відповідності
інтерфейсу сучасним вимогам до UX/UI. Результати розробки представлені в
двох ключових підрозділах.
5.1 Проєктування інтерфейсу користувача
Інтерфейс користувача є важливою складовою вебзастосунку, оскільки
визначає ефективність та інтуїтивність взаємодії з системою. З метою
забезпечення зручності навігації, візуальної привабливості та відповідності
ролям користувачів, були створені макети основних сторінок застосунку, що
демонструють ключову функціональність.
Інтерфейс користувача є важливою складовою вебзастосунку, оскільки
визначає ефективність та інтуїтивність взаємодії з системою. З метою
забезпечення зручності навігації, візуальної привабливості та відповідності
ролям користувачів були створені макети основних сторінок застосунку, що
демонструють ключову функціональність.
Першим елементом взаємодії є сторінка авторизації та реєстрації
користувача. Вона містить просту форму входу до системи, реалізовану з
урахуванням базових принципів доступності та захисту даних. Інтерфейс
чітко розділяє поля для введення електронної пошти та пароля, а також
пропонує опцію реєстрації нового користувача (рисунок 5.1).
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 38
а
Рисунок 5.1 – Сторінка авторизації та реєстрації користувача
Ця форма є базовою точкою входу до системи для всіх ролей:
адміністратора, менеджера проєкту та клієнта. Вона слугує відправною
точкою для контролю доступу та забезпечення персоніфікованої взаємодії з
вебзастосунком.
Головна сторінка вебзастосунку відображає загальну інформацію про
діяльність будівельної компанії, її переваги та перелік доступних послуг.
Також присутнє навігаційне меню з переходом до реєстрації/входу. Дизайн
сторінки побудований відповідно до принципів адаптивності (рисунок 5.2).
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 39
а
Рисунок 5.2 – Головна сторінка проєкту
Цей інтерфейс формує перше враження про вебзастосунок, тому
особлива увага приділена візуальній гармонії, шрифтам, контрасту та логіці
розміщення елементів.
Панель адміністратора є основним інструментом керування для
користувачів з правами доступу адміністратора. Вона дозволяє переглядати
список проєктів, створювати нові, редагувати або видаляти наявні. Для
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 40
а
зручності реалізовано фільтрацію, сортування та миттєвий пошук
(рисунок 5.3).
Рисунок 5.3 – Інтерфейс панель адміністратора
Цей інтерфейс надає доступ до ключових даних системи та спрощує
адміністративну роботу, що суттєво підвищує ефективність управлінських
процесів.
Кабінет клієнта дозволяє користувачеві з обмеженими правами
переглядати інформацію про поточний стан власного замовлення. Інтерфейс
орієнтований на зрозумілу подачу даних: назва проєкту, строки реалізації,
статус виконання та використані матеріали (рисунок 5.4).
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 41
а
Рисунок 5.4 – Інтерфейс кабінету клієнта
Цей розділ системи призначений для ознайомлення замовників із
перебігом виконання робіт без можливості змінити будь-які критичні дані,
що гарантує безпечність і прозорість.
Сторінка перегляду проєкту є функціональним ядром для відображення
повної інформації щодо конкретного об'єкта. Вона включає назву, опис,
відповідальних осіб, перелік використаних ресурсів, а також графік
виконання робіт (рисунок 5.5).
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 42
а
Рисунок 5.5 – Сторінка перегляду проєкту у вебзастосунку будівельної
компанії
Цей інтерфейс забезпечує комплексне представлення даних про проєкт
для всіх ролей, що дозволяє покращити комунікацію між сторонами.
Додатково реалізована сторінка створення нового проєкту, доступна
лише адміністраторам або менеджерам. Вона містить форму для введення
основної інформації: назви, опису, відповідального працівника та дати
початку (рисунок 5.6).
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 43
а
Рисунок 5.6 – Сторінка додавання нового проєкту
Цей функціонал дає змогу оперативно вносити нові об'єкти до системи
без потреби переходу в інші розділи, що спрощує роботу персоналу.
Таблиця з переліком усіх проєктів є центральним елементом панелі
управління (рисунок 5.7).
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 44
а
Рисунок 5.7 – Таблиця з переліком усіх проєктів
Вона реалізована з підтримкою фільтрів, сортування та кнопок
редагування й перегляду, що робить керування проектами зручним і
швидким. Візуальне структурування даних у табличному форматі дозволяє
ефективно контролювати поточні й завершені проєкти, відслідковувати
статуси та вносити зміни.
5.2 Тестування вебзастосунку
Після завершення етапу реалізації проведено всебічне тестування
вебзастосунку з метою перевірки його стабільності, правильності реалізації
функціоналу, відповідності вимогам технічного завдання та забезпечення
зручності взаємодії кінцевого користувача із системою. Особливу увагу
приділено перевірці критичних процесів, які впливають на збереження,
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 45
а
обробку та виведення інформації, а також на контроль доступу відповідно до
ролей користувачів.
У межах тестування було реалізовано такі його види:
1. Функціональне тестування. Було перевірено коректність виконання
основних бізнес-сценаріїв вебзастосунку. Тестувалися такі операції:
 реєстрація нових користувачів (адміністраторів, менеджерів,
клієнтів);
 авторизація з перевіркою правильності введення логіна й пароля;
 створення, редагування, перегляд і видалення проєктів;
 додавання та оновлення інформації про матеріали;
 призначення співробітників до проєктів;
 відображення актуального статусу проєкту з боку клієнта.
Усі функції були протестовані як у нормальному, так і в граничному
режимі (наприклад, із порожніми полями, неправильними даними, спробами
виконати заборонені дії), що дозволило виявити й усунути незначні логічні
помилки на ранньому етапі.
2. Тестування інтерфейсу користувача. Здійснено оцінку зовнішнього
вигляду та ергономіки елементів управління. Було перевірено:
 зручність навігації між сторінками;
 доступність усіх функціональних кнопок та форм;
 логічність розміщення блоків інформації;
 коректне відображення інтерфейсу на різних пристроях (десктоп,
планшет, смартфон).
Окремо тестувалась адаптивність верстки для забезпечення однаково
якісного користувацького досвіду незалежно від розміру екрана.
3. Тестування бази даних. Було перевірено:
 відповідність структури бази даних логічній моделі, розробленій
у розділі 4;
 коректність виконання SQL-запитів до таблиць;
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 46
а
 збереження зв’язків між таблицями (наприклад, між клієнтами та
їхніми проєктами, між проєктами й використаними матеріалами);
 коректне оновлення та видалення записів без порушення
цілісності даних;
 реакція системи на некоректні запити (SQL Injection не
спрацював — належна обробка даних реалізована).
4. Перевірка прав доступу. Розмежування ролей користувачів працюєк
оректно:
 адміністратор має доступ до всіх модулів, включаючи створення
й редагування користувачів, проєктів і матеріалів;
 менеджер проекту обмежений лише проектним функціоналом, не
має доступу до адміністрування системи;
 клієнт може лише переглядати інформацію про свій проєкт, не
змінюючи жодні дані.
Використання системи автентифікації з сесіями забезпечує надійний
контроль доступу.
Для формалізації результатів тестування вебзастосунку методом чорного
ящика було складено таблицю, в якій наведено основні функції системи,
вхідні дані, очікувану поведінку та фактичні результати під час перевірки.
Такий підхід дозволив перевірити зовнішню поведінку системи без
заглиблення у внутрішню реалізацію логіки.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 47
а
Таблиця 5.1 – Результати функціонального тестування методом чорного
ящика
Очікуваний Фактичний
Функція Вхідні дані Статус
результат результат
Реєстрація Користувача
Ім’я, email, Користувача
нового створено, перехід Пройдено
пароль створено
користувача до авторизації
Перехід у
Валідні email і
Вхід у систему відповідний Вхід успішний Пройдено
пароль
кабінет
Повідомлення про Помилка
Вхід у систему Невірний пароль Пройдено
помилку відображена
Новий проект
Створення Заповнена Проєкт
збережено в базі Пройдено
проєкту форма створено
даних
Обрано Відображається
Перегляд Інформація
конкретний детальна Пройдено
проєкту коректна
проєкт інформація
Додавання Назва, ціна, Матеріал додано Матеріал
Пройдено
матеріалу одиниця виміру до списку збережено
Редагування
Оновлені дані Зміни збережено Дані оновлено Пройдено
проєкту
Відображення Перегляд як Статус виводиться Відображення
Пройдено
статусу проєкту клієнт правильно коректне
Доступ
Спроба доступу
URL панелі заборонено, Доступ
клієнта до адмін. Пройдено
адміністрування повідомлення про заблоковано
панелі
обмеження
Як видно з таблиці, всі основні функціональні сценарії були реалізовані
коректно й успішно пройшли тестування. Виявлені незначні помилки було
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 48
а
виправлено ще на етапі інтеграції, що свідчить про якісну реалізацію проекту
та його готовність до експлуатації.
Результати тестування підтвердили функціональну повноту, стабільність
і безпечність вебзастосунку. Виявлені недоліки не мали критичного
характеру й були усунені в процесі розробки. Таким чином, система готова
до впровадження в реальних умовах діяльності будівельної компанії.
5.3 Висновки до розділу
У цьому розділі описано практичну реалізацію вебзастосунку для
будівельної компанії, зосереджену на побудові зручного інтерфейсу та
функціональної частини системи відповідно до розроблених моделей і
архітектурних рішень. Було створено макети основних сторінок, які
охоплюють потреби різних категорій користувачів: адміністратора,
менеджера проєкту та клієнта. Дизайн орієнтовано на простоту, адаптивність
і зручність використання.
Також було проведено всебічне тестування вебзастосунку, включаючи
функціональне, інтерфейсне, тестування бази даних та перевірку прав
доступу. Тестування методом чорного ящика підтвердило правильність
реалізації основних сценаріїв взаємодії, відповідність функціональності
заявленим вимогам, а також стабільну роботу системи.
Загалом, результати розділу свідчать про технічну готовність
вебзастосунку до використання в реальних умовах діяльності будівельної
компанії, а також про його відповідність вимогам сучасних вебтехнологій.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 49
а
ВИСНОВКИ
У кваліфікаційній роботі бакалавра було здійснено проектування
вебзастосунку для будівельної компанії з урахуванням функціональних
вимог і специфіки предметної області. Побудовано логічну модель бази
даних, яка містить основні сутності системи — клієнтів, проєкти, матеріали,
користувачів — та відображає їхні атрибути й взаємозв’язки. Це стало
основою для створення структурованої і цілісної системи збереження даних.
Описано архітектуру вебзастосунку, яка побудована за принципом
багаторівневої моделі: представлено рівень інтерфейсу, серверної логіки,
доступу до даних та бази даних. Така архітектура забезпечує модульність,
розширюваність та зручність у супроводі системи.
За допомогою діаграми випадків використання визначено основних
акторів системи (адміністратор, менеджер проєкту, клієнт) та їхні ролі у
взаємодії з функціональністю застосунку. Діаграма класів дозволила
структурувати основні елементи програмної логіки й підготувати основу для
реалізації об’єктно-орієнтованої моделі. Таким чином, результати цього
етапу проектування створюють чітке технічне підґрунтя для реалізації
вебзастосунку, що буде представлено у наступному розділі.
У кваліфікаційній роботі бакалавра описано практичну реалізацію
вебзастосунку для будівельної компанії, зосереджену на побудові зручного
інтерфейсу та функціональної частини системи відповідно до розроблених
моделей і архітектурних рішень. Було створено макети основних сторінок,
які охоплюють потреби різних категорій користувачів: адміністратора,
менеджера проєкту та клієнта. Дизайн орієнтовано на простоту, адаптивність
і зручність використання.
Також було проведено всебічне тестування вебзастосунку, включаючи
функціональне, інтерфейсне, тестування бази даних та перевірку прав
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 50
а
доступу. Тестування методом чорного ящика підтвердило правильність
реалізації основних сценаріїв взаємодії, відповідність функціональності
заявленим вимогам, а також стабільну роботу системи.
Загалом, результати проєктування свідчать про технічну готовність
вебзастосунку до використання в реальних умовах діяльності будівельної
компанії, а також про його відповідність вимогам сучасних вебтехнологій.
Лист
ЧДТУ.252345.002 ПЗ т
Зм. Лист № докум. Підпис Дат 51
а
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Віра БАБЕНКО
__________________
«___» ____________ 2025 року
Інформаційна система будівельної компанії
Специфікація
482.ЧДТУ.52345-01
Листів 2
Розробник _______________ Павло РОЖКО
Керівник _______________ Інна РОЗЛОМІЙ
Черкаси 2025
2
482.ЧДТУ.52345-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.52345-01 12 01 Текст програми
ДОДАТОК Б
Інформаційна система будівельної компанії
Текст програми
482.ЧДТУ.52345-01 12 01
Листів 8
Розробник: Павло РОЖКО
Черкаси 2025
2
482.ЧДТУ.52345-01 12 01
Головна сторінка (index.html)
html
КопироватьРедактировать
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Будівельна компанія</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<nav>
<ul>
<li><a href="index.html">Головна</a></li>
<li><a href="about.html">Про нас</a></li>
<li><a href="services.html">Послуги</a></li>
<li><a href="portfolio.html">Портфоліо</a></li>
<li><a href="contact.html">Контакти</a></li>
</ul>
</nav>
</header>

<section class="banner">
<div class="container">
<h1>Професійне будівництво та ремонт</h1>
<p>Ми створюємо комфортні простори для вашого життя та бізнесу</p>
<a href="contact.html" class="cta-btn">Залишити заявку</a>
</div>
</section>

<section class="about">
<div class="container">
<h2>Про нашу компанію</h2>
<p>Ми займаємось будівництвом та ремонтом вже понад 10 років, виконуючи
проекти будь-якої складності. Наша мета — забезпечити клієнтів найкращою якістю робіт
та своєчасним виконанням замовлень.</p>
</div>
</section>

<footer>
<div class="container">
<p>&copy; 2025 Будівельна компанія</p>
3
482.ЧДТУ.52345-01 12 01
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Сторінка про нас (about.html)
html
КопироватьРедактировать
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Про нас</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<nav>
<ul>
<li><a href="index.html">Головна</a></li>
<li><a href="about.html">Про нас</a></li>
<li><a href="services.html">Послуги</a></li>
<li><a href="portfolio.html">Портфоліо</a></li>
<li><a href="contact.html">Контакти</a></li>
</ul>
</nav>
</header>

<section class="about-content">
<div class="container">
<h1>Про нашу компанію</h1>
<p>Ми є лідерами в будівельній галузі з багаторічним досвідом, надаючи широкий
спектр послуг з будівництва та ремонту, від проектування до завершення об'єкта.</p>
<h2>Наші переваги:</h2>
<ul>
<li>Професійна команда</li>
<li>Якість робіт</li>
<li>Своєчасне виконання</li>
<li>Гарантія на послуги</li>
</ul>
</div>
</section>
4
482.ЧДТУ.52345-01 12 01

<footer>
<div class="container">
<p>&copy; 2025 Будівельна компанія</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Сторінка послуг (services.html)
html
КопироватьРедактировать
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Послуги</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<nav>
<ul>
<li><a href="index.html">Головна</a></li>
<li><a href="about.html">Про нас</a></li>
<li><a href="services.html">Послуги</a></li>
<li><a href="portfolio.html">Портфоліо</a></li>
<li><a href="contact.html">Контакти</a></li>
</ul>
</nav>
</header>

<section class="services">
<div class="container">
<h1>Наші послуги</h1>
<div class="service-item">
<h2>Будівництво</h2>
<p>Ми пропонуємо повний спектр послуг з будівництва, включаючи зведення
житлових і комерційних будівель. Кожен проект виконаний з урахуванням вимог
замовника та найвищих стандартів якості.</p>
</div>
5
482.ЧДТУ.52345-01 12 01
<div class="service-item">
<h2>Ремонтні роботи</h2>
<p>Ремонт будь-якої складності: від косметичного до капітального. Ми
забезпечуємо професіоналізм і якість у кожній деталі.</p>
</div>
<div class="service-item">
<h2>Проектування</h2>
<p>Наші архітектори розробляють індивідуальні проекти будівель і інтер'єрів,
зважаючи на потреби замовника і тенденції ринку.</p>
</div>
</div>
</section>

<footer>
<div class="container">
<p>&copy; 2025 Будівельна компанія</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Сторінка контактів (contact.html)
html
КопироватьРедактировать
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Контакти</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<nav>
<ul>
<li><a href="index.html">Головна</a></li>
<li><a href="about.html">Про нас</a></li>
<li><a href="services.html">Послуги</a></li>
<li><a href="portfolio.html">Портфоліо</a></li>
<li><a href="contact.html">Контакти</a></li>
</ul>
</nav>
6
482.ЧДТУ.52345-01 12 01
</header>

<section class="contact">
<div class="container">
<h1>Контакти</h1>
<form action="submit_form.php" method="POST">
<label for="name">Ваше ім'я:</label>
<input type="text" id="name" name="name" required>
<label for="email">Ваша електронна пошта:</label>
<input type="email" id="email" name="email" required>
<label for="message">Ваше повідомлення:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Надіслати</button>
</form>
</div>
</section>

<footer>
<div class="container">
<p>&copy; 2025 Будівельна компанія</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
CSS стилі (style.css)
css
КопироватьРедактировать
/* Загальні стилі для всього сайту */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}
7
482.ЧДТУ.52345-01 12 01
.container {
width: 80%;
margin: 0 auto;
}
/* Header */
header {
background: #333;
color: #fff;
padding: 10px 0;
}
header nav ul {
list-style: none;
display: flex;
justify-content: center;
}
header nav ul li {
margin: 0 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
/* Main Banner */
.banner {
background: #007BFF;
color: #fff;
padding: 80px 0;
text-align: center;
}
.banner h1 {
font-size: 40px;
margin-bottom: 10px;
}
.banner p {
font-size: 20px;
}
.cta-btn {
background: #ff9800;
padding: 10px 20px;
color: #fff;
text-decoration: none;
8
482.ЧДТУ.52345-01 12 01
border-radius: 5px;
}
/* About Section */
.about {
padding: 50px 0;
background: #fff;
text-align: center;
}
.about h2 {
font-size: 32px;
margin-bottom: 20px;
}
/* Footer */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
JavaScript (main.js)
javascript
КопироватьРедактировать
// JavaScript для обробки форми або інших інтерактивних елементів
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
alert('Форма надіслана!');
});
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Бутенко В. С. Веб-дизайн: основи створення сайтів. – Київ: Діалектика,
2020. – 320 с.
2. Глинський Я. М. Проєктування та розробка веб-сайтів. – Львів: ЛНУ, 2019.
– 248 с.
3. Ляшенко Н. О. Системи управління вмістом (CMS) для створення сайтів. –
Харків: ХНУ, 2018. – 212 с.
4. Krug S. Don't Make Me Think: A Common Sense Approach to Web Usability.
– New Riders, 2014. – 216 p.
5. Duckett J. HTML and CSS: Design and Build Websites. – Wiley, 2011. – 512 p.
6. W3C. HTML & CSS Standards [Електронний ресурс]. – Режим доступу:
https://www.w3.org/
7. Mozilla Developer Network. HTML, CSS, JavaScript Documentation
[Електронний ресурс]. – Режим доступу: https://developer.mozilla.org/
8. Bootstrap. The most popular HTML, CSS, and JS library [Електронний ресурс].
– Режим доступу: https://getbootstrap.com/
9. WordPress. Open Source CMS [Електронний ресурс]. – Режим доступу:
https://wordpress.org/
10.Google Fonts [Електронний ресурс]. – Режим доступу:
https://fonts.google.com/
11.Nielsen J., Norman D. 10 Usability Heuristics for User Interface Design
[Електронний ресурс]. – Режим доступу:
https://www.nngroup.com/articles/ten-usability-heuristics/
12.Figma. Інструмент для дизайну інтерфейсів [Електронний ресурс]. – Режим
доступу: https://www.figma.com/
13.Adobe XD. Інструмент для UI/UX [Електронний ресурс]. – Режим доступу:
https://www.adobe.com/products/xd.html
Арк.
ЧДТУ.252345.002 ПЗ 60
Змн. Арк. № докум. Підпис Дата
14.Visual Studio Code. Середовище розробки [Електронний ресурс]. – Режим
доступу: https://code.visualstudio.com/
15.Chrome DevTools. Інструменти для розробників [Електронний ресурс]. –
Режим доступу: https://developer.chrome.com/docs/devtools/
16.Smashing Magazine. Статті про вебдизайн та розробку [Електронний
ресурс]. – Режим доступу: https://www.smashingmagazine.com/
17.SiteInspire. Галерея сайтів [Електронний ресурс]. – Режим доступу:
https://www.siteinspire.com/
18.Bechtel. Офіційний сайт будівельної компанії [Електронний ресурс]. –
Режим доступу: https://www.bechtel.com/
19.Turner Construction Company [Електронний ресурс]. – Режим доступу:
https://www.turnerconstruction.com/
20.Ibud.ua. Каталог будівельних компаній України [Електронний ресурс]. –
Режим доступу: https://ibud.ua/
Арк.
ЧДТУ.252345.002 ПЗ 61
Змн. Арк. № докум. Підпис Дата

Репозиторій ЧДТУ