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
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/8907| Title: | Веб-сайт для фітнес-клубу |
| Authors: | Колеснікова, Катерина Вікторівна Фендюр, Єгор Анатолійович |
| Keywords: | ВЕБ-ДОДАТОК;БАЗА ДАНИХ;ВЕБ-САЙТ;ТРЕНАЖЕРНИЙ ЗАЛ;PHP;CSS. |
| Issue Date: | 11-Jun-2025 |
| Abstract: | Робота присвячена створенню веб-сайту, який забезпечує підтримку діяльності фітнес-клубу та тренажерного залу. У першому розділі проведено аналіз предметної області, визначено актуальність теми, досліджено наявні програмні рішення, а також сформульовано мету, завдання та обрано інструменти реалізації. Другий розділ присвячений проектуванню: побудовано структурно-функціональну модель, розроблено діаграму варіантів використання веб-додатку, визначено ключові сутності бази даних та сформовано її логічну модель. У третьому розділі розглянуто архітектуру створеної системи, описано функціональні можливості та представлено результати реалізації веб-додатку. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/8907 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Фендюр Єгор_КНС-2101_2024-2025.pdf Restricted Access | 3.44 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
1
Міністерство освіти і науки України
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
(освітньо-кваліфікаційний рівень)
на тему: «ВЕБ-САЙТ Д ЛЯ ФІТНЕС-КЛУБУ»
Виконав : студент 4 курсу, групи КНС-2101
спеціал ьності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
Освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Фендюр Єгор Анатолійович
Керівник Колеснікова К.В.
(прізвище та ініціали)
Черкаси 2025 року
2
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
_
ЗАВДАННЯ _
на кваліфікаційну роботу бакалавра ст_уденту
Фендюр Єгор Анатолійович »
(прізвище, ім‘я, по батькові)
1. Тема роботи Веб-сайт для фітнес-клубу _
_
Керівник роботи Колеснікова Катерина Володимирівна д.т.н_., професор
(прізвище, ім’я, по батькові, науковий ступінь, вчене зв_ання)
_
затверджені наказом університету від «25» лютого 2025 р. № 53/0_3-03.
_
2. Строк подання студентом роботи «12» червня 2025 року _
3. Вихідні дані до роботи: _
Звіт з переддипломної практики. Робота з Веб-ресурсами. _
_
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
_
4. Зміст пояснювальної записки (перелік питань, що їх належить р_озробити):
Вступ
2
4.1. Аналітичний огляд існуючих аналогів предметної області
0
4.2. Проектування веб-додатку 2
4.3. Розробка програмного додатку web-сайту р.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 50000-01.
1 . Інструкція користувача
5.2. Додаток Б. Інструкція користувача.
5.3. Додаток В. Деталіація мети проекту.
. Додаток Г. Текст програми.
Презентація у вигляді 18 слайдів.
3
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 1
.
0
1 КАЛЕНДАРНИЙ ПЛАН
. Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
2 етапів роботи
1 Видача завдання0 на кваліфікаційну роботу Виконано
2 до 16.01.2025
бакалавра.
2 Аналіз літературнирх. джерел, об’єкту та предмету Виконано
до 12.02.2025
дослідження.
3 Написання теоретичного розділу кваліфікаційної Виконано
до 18.03.2025
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту Виконано
до 01.04.2025
й предмету дослідження).
5 Написання практичних розділів й висновків по Виконано
до 01.05.2025
роботі.
6 Передзахист кваліфікаційної роботи бакалавра на Виконано
до 03.06.2025
засіданні кафедри КНтаСА.
7 Подання роботи завідувачу кафедри КНтаСА. до 10.06. 2025 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2025 Виконано
.
0
6
.
2
0
Студент _____________________________ / Є2гор ФЕНДЮР /
(підпис) ПІБ
Керівник роботи ____________________________ / Катерина КОЛЕСНІКОВА /
(підпис) ПІБ
4
РЕФЕРАТ
Кваліфікаційна робота бакалавра охоплює 76 сторінок, включає 20 рисунків, 1
таблицю, 23 джерела та 3 додатки.
Тема роботи: «Веб-сайт для фітнес-клубу».
Пояснювальна записка складається зі вступу, трьох основних розділів,
висновків, списку використаних джерел (19 найменувань) і трьох додатків. Загальний
обсяг – 76 сторінок, з яких: – основна частина – 35 сторінок, – список джерел – 2
сторінки, – додатки – 39 сторінок.
Робота присвячена створенню веб-сайту, який забезпечує підтримку діяльності
фітнес-клубу та тренажерного залу.
У першому розділі проведено аналіз предметної області, визначено актуальність
теми, досліджено наявні програмні рішення, а також сформульовано мету, завдання
та обрано інструменти реалізації.
Другий розділ присвячений проектуванню: побудовано структурно-
функціональну модель, розроблено діаграму варіантів використання веб-додатку,
визначено ключові сутності бази даних та сформовано її логічну модель.
У третьому розділі розглянуто архітектуру створеної системи, описано
функціональні можливості та представлено результати реалізації веб-додатку.
Ключові слова: веб-додаток, база даних, веб-сайт, тренажерний зал, PHP, CSS.
5
ЗМІСТ
Міністерство освіти і науки України ....................................................................... 1
ВСТУП ........................................................................................................................ 6
1 АНАЛІТИЧНИЙ ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ ПРЕДМЕТНОЇ ОБЛАСТІ
...................................................................................................................................... 7
1.1 Огляд останніх досліджень і публікацій ....................................................... 7
1.2 Аналіз програмних продуктів – аналогів ...................................................... 8
1.3 Постановка задачі .......................................................................................... 10
2 ПРОЕКТУВАННЯ ВЕБ-ДОДАТКУ ................................................................... 12
2.1 Структурно-функціональне моделювання .................................................. 12
2.2 Моделювання варіантів використання ........................................................ 15
2.3 Проектування бази даних .............................................................................. 16
3 РОЗРОБКА ПРОГРАМНОГО ДОДАТКУ WEB-САЙТУ ................................ 21
3.1 Архітектура програмного додатку ............................................................... 21
3.2 Програмна реалізація веб-додатку ............................................................... 23
3.3 Використання програмного додатку ............................................................ 27
ВИСНОВОК ............................................................................................................. 36
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................ 37
ДОДАТОК А ............................................................................................................. 39
ДОДАТОК Б ............................................................................................................. 41
ДОДАТОК В ............................................................................................................. 49
ДОДАТОК Г ............................................................................................................. 57
6
ВСТУП
У сучасному світі Інтернет є невід’ємною частиною повсякденного життя.
Практично всі цифрові пристрої – комп’ютери, смартфони, планшети – мають
постійне підключення до мережі. Більшість людей активно користуються Інтернетом
для спілкування, пошуку інформації, розваг, здійснення покупок та отримання послуг.
Доступ до веб-ресурсів забезпечується за допомогою браузерів, що робить перегляд
сайтів максимально зручним і швидким.
Серед найпоширеніших ресурсів користувачі часто відвідують соціальні мережі,
різноманітні веб-додатки, у тому числі сайти комерційних організацій. Проте велика
кількість веб-ресурсів не здатна утримати увагу потенційного клієнта через застарілий
дизайн, низьку інформативність або слабку інтерактивність. Це особливо актуально
для сайтів тренажерних залів та фітнес-клубів, які мають бути не лише візуально
привабливими, а й функціональними та корисними для користувача.
Здоровий спосіб життя стабільно залишається у фокусі суспільної уваги. Все
більше людей прагнуть підтримувати фізичну форму, зміцнювати здоров’я та
досягати естетичних результатів. Вибір тренажерного залу часто розпочинається з
перегляду інформації в Інтернеті, тому наявність зручного, сучасного веб-сайту є
необхідною умовою для залучення нових клієнтів.
Наявність власного веб-додатку дозволяє фітнес-клубу:
– ефективно просувати клубні карти та послуги персональних тренувань;
– організувати онлайн-запис клієнтів на заняття без участі адміністратора;
– збирати контактну інформацію про користувачів та здійснювати зворотній зв’язок.
Мета даної роботи полягає у розробці веб-додатку для підтримки діяльності
тренажерного залу фітнес-клубу. Завданням дослідження є:
– аналіз аналогічних рішень та визначення їх переваг і недоліків;
– вивчення предметної області та формування вимог до системи;
– проектування структури майбутнього веб-додатку;
– реалізація функціонального веб-сайту з базою даних;
– тестування готового рішення та оцінка його ефективності.
7
1 АНАЛІТИЧНИЙ ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ
ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Огляд останніх досліджень і публікацій
Багато людей прагнуть покращити своє фізичне здоров’я: нормалізувати вагу,
зміцнити м’язи, поліпшити фігуру або досягти рельєфності тіла. Один із
найефективніших способів досягнення цих цілей – регулярні тренування у
тренажерному залі. Фізичні навантаження сприяють не лише розвитку сили та
витривалості, а й позитивно впливають на гормональний баланс і обмін речовин. Для
досягнення кращих результатів та уникнення помилок, що можуть нашкодити
здоров’ю, рекомендується займатися під керівництвом професійного тренера.
Персональний тренер допоможе скласти індивідуальну програму, покаже правильну
техніку виконання вправ та надасть рекомендації щодо способу життя й харчування
[1].
У сучасному світі, орієнтованому на цифрові технології, споживачі все частіше
звертаються до онлайн-ресурсів для отримання потрібної інформації та замовлення
послуг. Очікується, що понад 2 мільярди людей здійснюватимуть покупки в Інтернеті,
і це охоплює й фітнес-індустрію. Проте мета веб-сайту фітнес-клубу не обмежується
лише продажем послуг. Веб-сайт має забезпечувати доступ до важливої інформації –
про розклад занять, тренерський склад, години роботи, умови абонементу тощо.
Веб-сайт – це сукупність взаємопов’язаних веб-сторінок, що згруповані під
унікальною адресою в Інтернеті [2]. Існує безліч типів сайтів: інформаційні,
комерційні, освітні, розважальні тощо. Інтернет надає змогу користувачам будь-коли
й будь-де отримувати доступ до потрібної інформації [3].
Кожна веб-сторінка є носієм контенту – текстового, графічного, аудіо- чи
відеоматеріалу – та, зазвичай, містить гіперпосилання для навігації між сторінками.
Сучасні веб-сайти фітнес-клубів можуть також включати функціонал для запису на
заняття, бронювання тренувань, замовлення консультацій, придбання абонементів, що
робить їх цінним інструментом для взаємодії з клієнтами.
8
З технічної точки зору, робота веб-сайтів ґрунтується на клієнт-серверній
архітектурі. Клієнтом виступає пристрій користувача (комп’ютер або смартфон), який
надсилає запити до сервера. Сервер – це потужна система, що обробляє ці запити,
забезпечує доступ до ресурсів, виконує бізнес-логіку та взаємодіє з базою даних [4].
1.2 Аналіз програмних продуктів – аналогів
У сучасному Інтернет-просторі представлено чимало сайтів фітнес-клубів,
однак значна частина тренажерних залів досі не мають ані власного веб-сайту, ані
активних сторінок у соціальних мережах. Наявність веб-сайту дозволяє надати
потенційному клієнту всю необхідну інформацію, викликати зацікавленість та
спростити процес замовлення послуг, що робить його зручним і ефективним
інструментом для просування бізнесу.
Для формування уявлення про те, яким має бути сучасний веб-додаток для
підтримки діяльності тренажерного залу, було проведено аналіз існуючих аналогічних
рішень. Зокрема, для порівняння було обрано такі веб-сайти фітнес-клубів:
– Фітнес-клуб «Geliar Gym» — тренажерний зал у місті Київ, який пропонує
різноманітні напрямки занять: від силових тренувань до бойових мистецтв, йоги,
пілатесу тощо. Веб-сайт клубу вирізняється зрозумілим і привабливим дизайном та
реалізований у форматі лендінгу [5].
Рисунок 1.1 – Головна сторінка веб-сайту «Geliar Gym»
9
– ReForma – це мережа сучасних фітнес-клубів. Її офіційний веб-сайт
представлений у форматі лендінг-сторінки, що дозволяє зручно переглядати
інформацію про сам заклад, перелік послуг, фотогалерею, команду тренерів та
розклад занять [6].
Рисунок 1.2 – Головна сторінка веб-сайту «ReForma»
– Спортивний клуб GraFit – це масштабний фітнес-заклад із широким
спектром напрямів. Його веб-сайт вирізняється великою кількістю динамічних
елементів та анімацій, а також поєднує простоту з візуально приємним дизайном [7].
Рисунок 1.3 – Головна сторінка веб-сайту «ГраФіт»
10
Усі розглянуті вище веб-сайти мають привабливий зовнішній вигляд, зручну та
інтуїтивно зрозумілу навігацію. Вони надають користувачам вичерпну інформацію
про тренажерний зал, персонал тренерів, фотогалерею, розклад занять, перелік послуг
та контактні дані.
На основі проведеного аналізу аналогічних веб-додатків було сформовано
порівняльну таблицю (табл. 1.1).
Таблиця 1.1 – Порівняння веб-сайтів фітнес-клубів
Критерій «Geliar-Gym» «Re_Forma» «Gra_Fit»
Дизайн + + +
Зручна навігація + + +
Перевантаженість - - -
контентом
Адаптивність + + +
Зворотній зв’язок + + +
1.3 Постановка задачі
Для реалізації поставленої мети необхідно створити веб-додаток, який
надаватиме користувачам можливість з будь-якого пристрою з доступом до Інтернету
ознайомитися з інформацією про тренажерний зал, послуги, персонал тренерів,
розклад занять, переглядати фотогалерею, а також оформити замовлення на
необхідну послугу.
До основних функціональних вимог до веб-додатку належать:
– відображення даних про тренерів, розклад занять, доступні послуги та
зображення із бази даних;
– реалізація форми для замовлення абонементу;
– надання тренерам можливості редагувати розклад;
– забезпечення адміністратору прав на керування користувачами та
замовленнями.
Досягнення цілей проєкту можливе за таких умов:
11
– виконання аналізу предметної області та аналогічних веб-рішень;
– побудова моделі та проектування структури веб-додатку;
– створення прототипу та визначення технологій реалізації;
– повноцінна розробка веб-сайту.
Для реалізації проєкту обрано наступні технології та мови програмування:
PHP – мова сценаріїв на стороні сервера з відкритим кодом, широко
використовується для створення веб-додатків, включно з інтерфейсами користувача
[8];
HTML – мова розмітки гіпертексту, яка визначає структуру веб-сторінок і
повідомляє браузерам, як виводити вміст [9];
CSS – мова для оформлення стилів, що відповідає за візуальне представлення
елементів HTML-сторінки [10];
JavaScript – динамічна об'єктно-орієнтована мова програмування, яка надає веб-
сайтам інтерактивність і реагування на дії користувача [11];
MySQL – найпоширеніша система управління базами даних, що ефективно
поєднується з PHP у створенні динамічних веб-додатків.
12
2 ПРОЕКТУВАННЯ ВЕБ-ДОДАТКУ
2.1 Структурно-функціональне моделювання
У сучасних підходах до моделювання управління та виробничих процесів
термін «бізнес-процес» застосовується для позначення об’єкта моделювання, а його
опис є ключовим етапом у рамках проєктів з реорганізації бізнес-процесів [12].
Існує чимало методів структурного та об’єктно-орієнтованого моделювання, які
використовуються для опису та аналізу бізнес-процесів. Одним із найбільш
поширених є метод функціонального моделювання IDEF0.
Методологія IDEF0 вирізняється своєю простотою. Зокрема, для представлення
процесів використовується єдиний тип блоку. Кожен блок, як і в інших підходах,
відповідає окремому процесу, але особливістю IDEF0 є специфічне застосування
стрілок та їх розташування відносно блоку.
Окрім вхідних та вихідних потоків, метод IDEF0 передбачає ще два типи
стрілок - «контроль» та «механізм» [13].
Схематично до кожного блоку процесу входить три стрілки та одна виходить:
з лівого боку надходять вхідні дані або ресурси, необхідні для виконання
процесу;
зверху блоку вказуються контрольні впливи – нормативи, правила або
інструкції;
знизу показуються механізми або засоби реалізації (інструменти,
виконавці тощо);
справа виходить результат або продукт процесу.
Моделювання веб-додатку, що забезпечує підтримку функціонування
тренажерного залу, з використанням методології IDEF0 подано на рисунку 2.1.
13
Рисунок 2.1 – IDEF0
Стандарт IDEF1 був розроблений як засіб аналізу та дослідження для
інформаційно-орієнтованих організацій і зосереджується на потоках даних, що
визначають структуру інформації, її накопичення, вимоги до управління та
регламентування [14].
Основною метою IDEF1 є ідентифікація таких аспектів:
яка інформація використовується в діяльності організації;
яким чином відбувається збір, зберігання та обробка даних;
які логічні взаємозв’язки існують між інформаційними потоками;
які проблеми виникають через відсутність ефективного управління
інформацією;
як потрібно управляти інформацією після змін у бізнес-процесах.
Візуалізацію моделі веб-додатку для підтримки функціонування тренажерного
залу, побудовану за методологією IDEF1, представлено на рисунку 2.1.
14
Рисунок 2.2 – IDEF1
На діаграмі IDEF1 відображені такі основні елементи:
– Вхідні дані: «Запит на купівлю послуги» надходить до процесу «Перегляд
абонементів», «Перелік абонементів» – до блоку «Вибір абонементу», «Інформація
про обраний абонемент» – до блоку «Заповнення форми для замовлення»,
– «Особисті дані клієнта» – до блоку «Обробка даних клієнта»,
– «Узгоджені дані» – до процесу «Підтвердження замовлення»,
– «Запис в базі даних» – до блоку «Отримання замовлення».
– Вихідні дані:
– результатом є «Інформація про абонемент» та «Обраний абонемент».
– Контрольні впливи:
– «Вподобання клієнта» використовуються у процесах «Перегляд
абонементів» та «Вибір абонементу»,
– «Інструкція для коректного вводу даних» – у блоці «Заповнення форми
для замовлення»,
– «Правила обробки замовлення» – у блоках «Обробка даних клієнта» та
«Підтвердження замовлення»,
15
– «Правила користування» – у процесі «Отримання замовлення».
Механізми виконання:
– усі блоки (крім «Отримання замовлення») використовують «Програмне та
апаратне забезпечення», для блоку «Отримання замовлення» механізмом виступають
«Кошти».
– Описані процеси:
– «Перегляд абонементів»,
– «Вибір абонементу»,
– «Заповнення форми для замовлення»,
– «Обробка даних клієнта»,
– «Підтвердження замовлення»,
– «Отримання замовлення».
2.2 Моделювання варіантів використання
Діаграма варіантів використання є одною з легших для розуміння серед UML
діаграм і найбільш корисні для тих, хто не має поглиблених знань в інформаційних
технологіях та показує уточнення функціональних характеристик програми. Ця
діаграма використовується для визначення цілей програми [15].
Складається з набору учасників, обмежених прямокутником (межі системи),
прецедентами (випадками використання), зв’язками між учасниками
та прецедентами, відносинами між прецедентами та загальними відносинами між
акторами [16].
Варіанти використання для веб-додатку підтримки діяльності тренажерного
залу наступні:
– перегляд інформації;
– вибір абонементу;
– оформлення замовлення;
– зміна розкладу занять;
16
– додавання, видалення, редагування даних.
Діаграма варіантів використання веб-додатку для підтримки діяльності
тренажерного залу зображена на рисунку 2.3.
Рисунок 2.3 – Діаграма варіантів використання
2.3 Проектування бази даних
Щоб уникнути ручного введення інформації у веб-додаток, застосовують бази
даних. База даних — це впорядкований набір структурованих даних, які зберігаються
в електронному вигляді на комп’ютері. Управління базою даних зазвичай
здійснюється за допомогою системи управління базами даних (СУБД) [17].
17
Процес проєктування бази даних включає такі етапи:
– текстове описання об’єктів системного аналізу та інформації;
– створення концептуальної моделі;
– розробка логічної моделі;
– побудова фізичної моделі [18].
У межах веб-додатку було визначено такі основні сутності бази даних:
– галерея;
– роль;
– користувач;
– послуга;
– замовлення;
– тренер;
– розклад.
На рисунку 2.4 зображено логічну модель бази даних, що використовується у
веб-додатку для підтримки роботи тренажерного залу.
Рисунок 2.4 – Логічна модель бази даних
2.4. Формування вимог до сайту
Опис призначення, вимог та реалiзацiї веб-сайту для тренажерного залу
Призначення та мета створення веб-додатку
18
Призначення веб-додатку. Веб-додаток розроблено для підтримки діяльності
тренажерного залу, забезпечення ефективної комунікації між закладом, клієнтами та
тренерським складом. Система дозволяє автоматизувати процеси перегляду
інформації, замовлення послуг, адміністрування контенту та взаємодії з
користувачами.
Мета створення веб-додатку. Головною метою є підвищення інформативності
та доступності послуг тренажерного залу, залучення нових клієнтів і тренерів через
зручний інтерфейс та функціональні можливості.
Цільова аудиторія. Веб-додаток орієнтований на такі категорії користувачів:
– потенційні клієнти, що цікавляться фітнес-послугами;
– постійні відвідувачі тренажерного залу;
– персонал і тренери клубу.
Вимоги до веб-додатку
Загальні вимоги
Структурно-функціональні вимоги. Сайт має функціонувати як веб-додаток з
розміщенням на хостингу, що підтримує PHP та MySQL. Він повинен мати набір
функціональних модулів відповідно до ролей користувачів.
Вимоги до персоналу. Система повинна бути інтуїтивно зрозумілою, не
вимагати від користувача спеціальних технічних знань, окрім базових навичок
користування комп'ютером та браузером.
Зберігання інформації. Статичний контент розміщується у файловій системі,
динамічний — у базі даних MySQL.
Розмежування доступу. Передбачено три рівні доступу:
– Адміністратор — повний доступ до редагування та керування контентом;
– Тренер — доступ до редагування розкладу;
– Користувач — перегляд загальної інформації та оформлення замовлень.
Авторизація до панелі адміністратора здійснюється через логін/пароль та
прямий маршрут до панелі.
Структура веб-сайту
19
Основні сторінки
– Головна сторінка — загальна інформація, переваги та типи тренувань;
– Галерея — фото інтер'єру залу;
– Розклад — графіки занять з тренерами;
– Тренери — профілі тренерів;
– Послуги — список доступних абонементів та занять.
Навігація. Навігаційне меню розташоване в шапці, однакове на всіх сторінках.
Інтерфейс повинен бути зручним і зрозумілим.
Наповнення контентом. Статичний вміст не змінюється, динамічний —
редагується через адміністративну панель.
Дизайн. Сайт повинен мати сучасний, лаконічний вигляд із темною кольоровою
гамою. Всі елементи повинні бути читабельними.
Функціональні та системні вимоги
Потреби користувача. Визначені у таблиці А.1 — від перегляду інформації до
адміністрування вмісту.
Функціональні модулі
– навігаційне меню;
– контент на кожній сторінці (відповідно до призначення);
– форма замовлення;
– адміністративна панель з CRUD-функціями.
Системні вимоги. Види забезпечення
Інформаційне: HTML, CSS, JavaScript, PHP, MySQL.
Лінгвістичне: українська мова інтерфейсу.
Програмне: сучасні браузери з підтримкою JavaScript і cookies.
Склад і зміст робіт зі створення веб-додатку
Перелік етапів розробки представлено в таблиці А.3 — від аналізу предметної
області до релізу проєкту. Загальна тривалість — 24 дні.
Введення в експлуатацію
20
Перед розміщенням сайту на хостингу необхідно переконатися у відповідності
веб-додатку технічному завданню та провести його повне тестування. Після цього —
перенесення всіх файлів і підключення бази даних на сервері.
21
3 РОЗРОБКА ПРОГРАМНОГО ДОДАТКУ WEB-САЙТУ
3.1 Архітектура програмного додатку
Перш ніж розпочати розробку сайту, важливо мати уявлення про принципи
клієнт-серверної архітектури. Ця архітектура передбачає організацію комп’ютерної
мережі, в якій велика кількість клієнтів одночасно надсилає запити та отримує послуги
від централізованого сервера. Клієнтські пристрої виступають посередниками між
користувачем і сервером, забезпечуючи зручний інтерфейс для формування запитів та
відображення отриманих відповідей. Сервери ж постійно перебувають у режимі
очікування запитів, обробляють їх і надсилають результати. Як правило, сервер надає
уніфікований і зрозумілий інтерфейс, що дозволяє клієнтам працювати з системою без
необхідності знання її внутрішньої структури, зокрема апаратного чи програмного
забезпечення [19].
На рисунку 3.1 представлено схематичне зображення клієнт-серверної
архітектури.
Рисунок 3.1 – Схема клієнт-серверної архітектури взаємодії
Архітектуру веб-сайту фітнес-клубу продемонстровано на рисунку 3.2.
22
Рисунок 3.2 – Архітектура веб-сайту фітнес-клубу
Планування робіт
На сьогоднішній день в світі панує ера комп’ютерів та інтернету. Важко
представити людину, яка не використовує телефон, ноутбук, комп’ютер тощо.
Більшість тих, хто використовує гаджети не уявляють життя без мережі Інтернет.
Інтернет дає безліч можливостей, наприклад замовлення будь-яких послуг,
різноманітні розваги, спілкування з друзями і т. д.
Багато людей прагнуть зміцнити здоров’я, схуднути або наростити м’язи, та
щоб цього досягнути варто відвідувати тренажерний зал. Щоб обрати фітнес-клуб на
сьогоднішній день достатньо зайти у веб-браузер та в пошуковій строчці ввести
необхідний запит. Веб-додаток спортивного клубу швидко дасть користувачу
розуміння про клуб: його інтер’єр, особливості, кваліфікації та направлення тренерів,
а також дасть змогу не виходячи з дому замовити абонемент на відвідування клубу.
23
Також веб-сайт корисний для тренерів, які мають змогу вивести на сайті розклад своїх
занять.
3.2 Програмна реалізація веб-додатку
Щоб розпочати розробку веб-додатку, насамперед необхідно підготувати
середовище розробки та встановити відповідне програмне забезпечення. Для зручної
роботи було обрано локальний сервер OpenServer, у якому створено спільну папку
веб-сайту. У налаштуваннях сервера також потрібно вибрати систему управління
базами даних – у даному випадку MySQL, а також вказати відповідні версії MySQL і
PHP.
Для написання коду використовувався текстовий редактор Sublime Text, який
забезпечує зручність і швидкість розробки.
Наступним кроком стало створення бази даних у середовищі PhpMyAdmin.
Відповідно до логічної моделі даних, були сформовані необхідні таблиці, які наведено
на рисунку 3.3.
Рисунок 3.3 – Список таблиць бази даних
Усі сторінки веб-сайту мають спільні елементи — шапку та підвал, що
забезпечує узгоджений зовнішній вигляд та зручну навігацію. Приклад коду, який
використовується для відображення шапки сайту, наведено на рисунку 3.4.
24
Рисунок 3.4 – Код шапки сайту
Наступним етапом є розробка вмісту сторінок сайту. Приклад структури та
наповнення головної сторінки представлено на рисунку 3.5.
25
Рисунок 3.5 – Контент на сторінці index.php
Для підключення бази даних використовується файл settings.php, що зображено
на рисунку 3.6.
Рисунок 3.6 – Код підключення до бази даних
26
Для відображення структурованих даних з бази даних використовується
відповідний програмний код, приклад якого наведено на рисунку 3.7.
Рисунок 3.7 – Код виводу списку всіх тренерів з бази даних
Оскільки сайт підтримує cookie існує файл перевірки авторизації користувача.
Програмний код файлу check.php продемонстровано на рисунку 3.8.
27
Рисунок 3.8 – Перевірка на авторизацію користувачів
Для виконання виходу з облікового запису використовується файл logout.php,
програмний код якого представлено на рисунку 3.9.
Рисунок 3.9 – Код для виходу з існуючого акаунту
Програмна реалізація ключових модулів веб-додатку, що забезпечує
функціонування тренажерного залу, представлена в додатку Г.
3.3 Використання програмного додатку
Кожна веб-сторінка сайту містить три основні складові: шапку, підвал і
контентну частину. Головна сторінка складається з каруселі, що демонструє загальну
інформацію про тренажерний зал, а також містить блок із рекомендованими
28
абонементами та секцію з основними перевагами закладу (рис. 3.10–3.12).
Рисунок 3.10 – Перша частина головної сторінки
Рисунок 3.11 – Друга частина нашої головної сторінки
29
Рисунок 3.12 – Третя частина нашої головної сторінки
Наступною після головної є сторінка «Галерея», на якій розміщено фотографії
тренажерного залу з можливістю детального перегляду (рис. 3.13–3.14).
Рисунок 3.13 – Галерея тренажерного залу фітнес-клубу
30
Рисунок 3.14 – Збільшення фотографії залу
Сторінка «Розклад» включає інформаційні блоки, що містять дані про типи
занять, розклад їх проведення та відповідальних тренерів (рис. 3.15).
Рисунок 3.15 – Сторінка з розкладом занять
31
Сторінка «Тренери» представлена у вигляді блоків, що містять фотографію,
повне ім’я та опис професійних досягнень кожного тренера (рис. 3.16).
Рисунок 3.16 – Сторінка з тренерами
Сторінка «Послуги» призначена для ознайомлення користувачів з доступними
абонементами, які пропонує тренажерний зал. Кожен абонемент представлено у
вигляді окремого інформаційного блоку, що включає зображення, назву та короткий
опис, який розкриває умови та переваги відповідної послуги.
Для зручності користувача в нижньому правому куті кожного блоку розміщено
кнопку «Замовити абонемент». Після натискання на цю кнопку відбувається перехід
на окрему сторінку з формою оформлення замовлення, де клієнт може заповнити
необхідні дані для придбання обраного абонемента.
Приклади візуального оформлення та функціональності цієї сторінки наведено
на рисунках 3.17–3.18.
32
Рисунок 3.17 – Сторінка з послугами
Рисунок 3.18 – Сторінка з формою для замовлення
33
Якщо в адресному рядку браузера вручну дописати «/check.php», система
виконає перевірку статусу автентифікації користувача. У випадку, якщо користувач
ще не увійшов до облікового запису, його буде перенаправлено на сторінку
авторизації (рис. 3.19). Якщо ж користувач уже пройшов автентифікацію, система
автоматично перенаправить його на головну сторінку сайту.
У разі, якщо авторизований користувач має статус тренера, інтерфейс сайту
адаптується до його ролі: у навігаційному меню з’являється додатковий пункт
«Вийти» для швидкого виходу з облікового запису (рис. 3.20). Крім того, на сторінці
«Розклад» стає доступною кнопка «Змінити розклад» (рис. 3.21). Натиснувши цю
кнопку, тренер переходить на спеціальну сторінку редагування розкладу, де має змогу
вносити зміни до графіку занять (рис. 3.22).
Рисунок 3.19 – Форма входу в профіль
Рисунок 3.20 – Пункт «Вийти»
34
Рисунок 3.21 – Кнопка «Змінити розклад»
Рисунок 3.22 – Сторінка редагування для розкладу
У випадку, якщо авторизований користувач має права адміністратора, інтерфейс
сайту динамічно адаптується до його розширених повноважень. Зокрема, в головному
35
навігаційному меню з’являється додатковий пункт «Адмін» (рис. 3.23), який веде до
адміністративної панелі керування веб-додатком.
Адміністратор має доступ до розширених функцій керування вмістом і
користувачами. Зокрема, він може:
– редагувати розклад занять, оновлюючи інформацію про типи тренувань,
час та відповідальних тренерів;
– переглядати список усіх замовлень, змінювати їхні параметри або
видаляти за потреби;
– керувати базою користувачів, маючи можливість додавати нових
користувачів, редагувати їхні облікові дані або видаляти застарілі записи.
Усі ці можливості реалізовано через зручний інтерфейс адміністративної
частини сайту, приклад роботи якої продемонстровано на рисунку 3.24. Такий підхід
забезпечує ефективне управління вмістом сайту та дозволяє оперативно реагувати на
зміни в роботі тренажерного залу.
Рисунок 3.23 – Пункт «Адмін»
Рисунок 3.24 – Панель адміністратора
36
ВИСНОВОК
У результаті виконаної роботи було створено повнофункціональний веб-
додаток для підтримки діяльності тренажерного залу «Fendur».
На початковому етапі для глибшого розуміння теми та визначення цілей проєкту
було проведено дослідження предметної області, включно з аналізом аналогічних веб-
ресурсів фітнес-клубів та тренажерних залів. Це дозволило виявити актуальність
створення подібного ресурсу, окреслити необхідний функціонал, а також
сформулювати основні вимоги до майбутнього програмного продукту. На основі
отриманих даних було чітко сформульовано мету проєкту.
Аналіз предметної галузі показав, що розробка спеціалізованого веб-додатку для
фітнес-закладу є доцільним, сучасним та ефективним рішенням. Такий сайт не лише
підвищує зручність для потенційних та постійних клієнтів, але й сприяє автоматизації
процесів замовлення послуг і покращенню взаємодії з користувачами. Клієнти
отримують доступ до актуальної інформації про тренажерний зал, тренерів, послуги,
графік занять, а також можливість онлайн-бронювання абонементів.
Далі було здійснено етап проєктування, у межах якого створено структурно-
функціональну модель системи, діаграму варіантів використання (use case), а також
логічну модель бази даних, що стала основою для зберігання та обробки інформації у
веб-додатку.
Практична реалізація дипломного проєкту охоплювала розробку архітектури
додатку, реалізацію основного функціоналу та розробку дизайну інтерфейсу, з
урахуванням зручності користувача (UX/UI). Було продемонстровано роботу сайту,
перевірено його функціональність та відповідність заданим вимогам. Для
організованого процесу розробки було також підготовлено план виконання проєкту з
урахуванням ризиків, що можуть виникнути під час реалізації (див. додаток Б).
Веб-додаток «Fendur» спрямований на покращення якості обслуговування та
підвищення рівня доступності послуг тренажерного залу. Завдяки інтеграції у
цифровий простір, клуб отримує змогу залучити більше клієнтів, адже в умовах
сьогодення більшість користувачів шукає необхідну інформацію саме через інтернет.
37
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Навіщо потрібен тренажерний зал [Електронний ресурс]. – Режим доступу:
https://active.24tv.ua/ru/zachemnuzhen-trenazhernyj-zal-glavnye-novosti-ukrainy-i-
mira_n1444173 – Дата звернення: 23.05.2025.
2. Веб-сайт – Вікіпедія [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/Вебсайт – Дата звернення: 23.05.2025.
3. About Websites | Free Website Encyclopedia [Електронний ресурс]. – Режим
доступу: https://www.aboutwebsites.info/ – Дата звернення: 23.05.2025.
4. Основні поняття й особливості клієнт-серверної архітектури – TestMatick
[Електронний ресурс]. – Режим доступу: https://testmatick.com/ru/osnovnye-
ponyatiya-i-osobennosti-klient-servernojarhitektury/ – Дата звернення: 23.05.2025.
5. Фітнес-клуб GeliarGym [Електронний ресурс]. – Режим доступу: https://geliar-
gym.com/ – Дата звернення: 23.05.2025.
6. ReForma – мережа сучасних фітнес клубів у місті Ірпінь [Електронний ресурс].
– Режим доступу: https://reformagym.com.ua/ – Дата звернення: 23.05.2025.
7. Спортивний клуб – GraFit [Електронний ресурс]. – Режим доступу:
https://grafit.com.ua/ – Дата звернення: 23.05.2025.
8. What is PHP? [Електронний ресурс]. – Режим доступу:
https://www.freecodecamp.org/news/what-is-php-the-phpprogramming-language-
meaningexplained/#:~:text=The%20PHP%20Programming%20Language%20Meani
ng%20Explained – Дата звернення: 23.05.2025.
9. What Is HTML? [Електронний ресурс]. – Режим доступу:
https://www.hostinger.com/tutorials/what-is-html – Дата звернення: 23.05.2025.
10. Основи CSS – Вивчення веб-розробки | MDN [Електронний ресурс]. – Режим
доступу:
https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_bas
ics – Дата звернення: 23.05.2025.
11. JavaScript – Вікіпедія [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/JavaScript – Дата звернення: 23.05.2025.
38
12. Структурно-функціональне моделювання [Електронний ресурс]. – Режим
доступу: http://www.rusnauka.com/18_EN_2009/Economics/48755.doc.htm – Дата
звернення: 08.06.2025.
13. The Use of IDEF0 for the Design and Specification of Methodologies [Електронний
ресурс]. – Режим доступу:
https://www.researchgate.net/publication/2447898_The_Use_of_IDEF0_for_the_De
sign_and_Specification_of_Methodologies – Дата звернення: 08.06.2025.
14. IDEF1 – стандарт та методологія моделювання даних [Електронний ресурс]. –
Режим доступу: https://infopedia.su/12x891c.html – Дата звернення: 08.06.2025.
15. Діаграма прецедентів – Вікіпедія [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/Діаграма_прецедентів – Дата звернення: 08.06.2025.
16. Застосування UML в дипломних роботах [Електронний ресурс]. – Режим
доступу: https://dut.edu.ua/ua/news-1626-7758-zastosuvannya-uml-v-diplomnih-
robotah_kafedra-kompyuternih-nauk-tainformaciynih-tehnologiy – Дата звернення:
08.06.2025.
17. What is a database? [Електронний ресурс]. – Режим доступу:
https://www.oracle.com/database/what-is-database/ – Дата звернення: 08.06.2025.
18. Етапи проектування бази даних – Вікі ЦДПУ [Електронний ресурс]. – Режим
доступу: https://wiki.cuspu.edu.ua/index.php/Етапи_проектування_бази_даних –
Дата звернення: 08.06.2025.
19. Client-server architecture [Електронний ресурс]. – Режим доступу:
https://www.britannica.com/technology/clientserver-architecture – Дата звернення:
09.06.2025.
39
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
_________ Юрій ТРИУС
«____»____________2025 р.
ВЕБ-САЙТ ДЛЯ ФІТНЕС-КЛУБУ
Специфікація
482.ЧДТУ. 52352-01
Листів 2
Розробник ____________________ Фендюр Є.А.
Керівник ____________________ Колеснікова К.В.
Черкаси – 2025
40
482.ЧДТУ. 52352-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 52352-01 34 01 Інструкція користувача
482.ЧДТУ. 52352-01 12 01 Текст програми
41
ДОДАТОК Б
ВЕБ-САЙТ ДЛЯ ФІТНЕС-КЛУБУ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482.ЧДТУ. 52352-01 34 01
Листів 8
Розробник _____________ Фендюр Є.А.
Черкаси – 2025
42
1. Призначення й мета створення веб-додатку
1.1 Призначення веб-додатку
Веб-система повинна являти собою веб-додаток для підтримки діяльності
тренажерного залу.
1.2 Мета створення веб-додатку
Мета створення веб-сайту полягає в зацікавленні потенційних клієнтів та тренерів.
1.3 Цільова аудиторія
Проект має наступну цільову аудиторію:
– зацікавлених користувачів в послугах залу;
– клієнтів;
– тренерів.
2 Вимоги до веб-додатку
2.1 Вимоги до веб-додатку в цілому
2.1.1 Вимоги до структури й функціонування веб-додатку
Веб-система має бути реалізована як веб-сайт, який повинен бути розміщений на
хостингу з підтримкою бази даних . Веб-додаток повинен мати визначені
функціональні можливості.
2.1.2 Вимоги до персоналу
Персонал не повинен мати поглиблених технічних навичок, необхідно мати базові
вміння роботи з комп’ютером та веб-браузером.
2.1.3 Вимоги до збереження інформації
Статична інформація на веб-сайті буде збережена в файловій системі хостингу,
динамічна – у базі даних MySQL.
2.1.4 Вимоги до розмежування доступу
Будь-який користувач з доступом до мережі Інтернет повинен мати змогу перейти до
веб-додатку підтримки діяльності тренажерного залу.
На веб-сайті мають бути різні рівні доступу:
43
– Адміністратор – має доступ до редагування, видалення, додавання розкладів
тренерів та замовлень.
– Тренер - має доступ до редагування, видалення, додавання розкладів.
– Відвідувач - має змогу тільки проглядати загальнодоступну інформацію на сайті
та замовити абонемент.
Вхід до адміністративної панелі повинен здійснюватися за допомогою унікального
логіну та паролю. Щоб потрапити до адміністративної панелі потрібно в адресі веб-
сайту написати шлях до неї.
2.2 Структура веб-додатку
2.2.1 Загальна інформація про структуру веб-додатку
Веб-додаток має містити наступні сторінки:
– головна сторінка – виводиться загальна інформація про тренажерний зал, його
переваги, та види тренувань;
– галерея – фотографії інтер’єру тренажерного залу;
– розклад занять – розклади занять з певними тренерами;
– тренери – сторінка, де відображаються тренери тренажерного залу;
– послуги – абонементи та заняття з тренерами;
2.2.2 Навігація
Для навігації використовується горизонтальне меню в шапці веб-сайту, що має бути
на кожній сторінці для швидкого переходу на бажану для користувача сторінку. Назви
розділів та інтерфейс веб-додатку повинні бути інтуїтивно зрозумілі користувачу та
містити відповідну інформацію.
2.2.3 Наповнення веб-додатку
Наповнення веб-сайту повинно відповідати тематиці проекту. Статичні дані завжди
будуть не змінними, динамічні дані можна буде всіляко редагувати за допомогою
адміністративної панелі та бази даних.
2.2.4 Дизайн та структура веб-додатку
Дизайн веб-додатку повинен бути у сучасному та лаконічному стилі, щоб одночасно і
зацікавити і не перенавантажити користувача. Бажано обрати темні кольори для фону
44
веб-сайту. Дизайн не повинен заважати користувачу читати інформацію, тобто текст
та інший контент необхідно чітко бачити на фоні.
Позиціонування блоків головної сторінки розташовано на рисунку Б.1.
Рисунок Б.1 – Розташування блоків на головній сторінці
2.2.1 Система навігації (карта веб-додатку)
Карта web-додатку зображена на рисунку Б.2.
Рисунок Б.2 – Карта веб-додатку
45
2.3 Вимоги до функціонування системи
2.3.1 Потреби користувача
Потреби користувача, що визначив замовник, наведені у таблиці Б.1.
Таблиця Б.1 – Потреби користувача
ID Потреби користувача Джерело
UN-01 Перегляд загальної інформації про Клієнт
тренажерний зал
UN-02 Перегляд фотографій спортивного залу Клієнт
UN-03 Перегляд інформації о місцезнаходженні та Клієнт
зв’язку
UN-04 Перегляд списку тренерів Клієнт
UN-05 Перегляд розкладу занять Клієнт
UN-06 Перегляд послуг Клієнт
UN-07 Замовлення послуги Клієнт
UN-08 Редагування, видалення, додавання Адміністратор
інформації
Продовження таблиці Б.1 – Потреби користувача
UN-09 Редагування, видалення, додавання Тренер
розкладу занять
2.3.2 Функціональні вимоги
Головна сторінка повинна містити наступні дані:
– Навігаційне меню.
– Основною інформацією про тренажерний зал.
– Підвал с контактною інформацією.
46
Сторінка галереї – повинна містити фотографії тренажерного залу.
Сторінка розкладу – занять має відображати графік роботи з певним тренером.
Сторінка тренерів – має відображати інформацію про тренерів.
Сторінка послуги – має містити список доступних для замовлення послуг.
Сторінка замовлення – має містити форму для заповнення щоб замовити послугу.
Адміністративна панель містити дані для редагування, додавання, видалення.
2.3.3 СИСТЕМНІ ВИМОГИ
Щоб розробник зрозумів, які необхідні системні вимоги для проекту, було створено
таблицю Б.2.
Таблиця Б.2 – Системні вимоги
ID Системні вимоги Пріоритет Опис
SR-01 Перемикання слайдера на С Можливість користувача
головній сторінці перемикати слайди з
інформацією про зал на
головній сторінці
SR-02 Відкриття фотографій М Можливість відкрити
фотографію та краще
роздивитись її
SR-03 Адміністративна панель М Доступ до зміни інформації
SR-04 База даних тренерів М Вивід розкладу занять з
тренером та інформації про
тренера
SR-05 База даних послуг М Перегляд послуг та їх
замовлення
47
SR-06 Вхід користувачів М Щоб адміністратори та
тренери мали змогу до
зміни певної інформації
Умовні позначення для таблиці Б.2:
– Must have (M) – обов’язкова наявність в системі.
– Should have (S) – необхідна наявність в системі, але їх пріоритетність нижча.
– Could have (C) – необов’язкова наявність в проекті, але бажана.
2.4 Вимоги до видів забезпечення
2.4.1 Вимоги до інформаційного забезпечення
Реалізація веб-додатку буде виконуватися з використання наступних технологій
програмування:
– HTML;
– PHP;
– JavaScript;
– MySQL; – CSS.
2.4.2 Вимоги до лінгвістичного забезпечення
Офіційна мова веб-додатку має бути українська.
2.4.3 Вимоги до програмного забезпечення
Щоб не виникали проблеми із веб-сайтом користувач має використовувати наступні
програмне забезпечення:
– Мінімальні вимоги до веб-браузеру: Google Chrome 2, Mozilla Firefox 3.5, Opera
9.5.
– Дозвіл на використання cookies та підтримка JavaScript.
3 Склад і зміст робіт зі створення веб-додатку
Опис та зміст етапів для створення веб-додатку показано в таблиці Б.3.
Таблиця Б.3 – Етапи створення web-додатку
№ Опис етапу роботи Тривалість
48
1 Предметна область та аналіз аналогів 2 дні
2 Шаблон веб-сайту та діаграми 3 дні
3 Розробка бази даних 1 дні
4 Верстка сторінок 7 дні
5 Розробка модулю оформлення замовлення 3 дні
6 Розробка адміністративної панелі 4 дні
7 Наповнення веб-додатку контентом 1 день
8 Тестування веб-додатку 2 дні
9 Вибір хостингу та розміщення на ньому 1 день
10 Реліз проекту 1 день
Загальна тривалість 24 дні
4 Вимоги до складу й змісту робіт із введення веб-додатку в експлуатацію
Перед розміщенням веб-додатку на хостинг треба переконатися, що вебдодаток
протестовано та він відповідає всім вимогам, описаним в ТЗ. На хостинг повинно бути
перенесено усі файли веб-сайту, контент та під’єднати базу даних.
49
ДОДАТОК В
Деталізація мети проекту методом SMART
Метод SMART використовують для визначення короткострокових або
середньострокових цілей. Метод дає змогу обрати формулювання бажаного
результату, але важливо пам’ятати що це форма представлення цілей, а не способи їх
досягнення.
Кожна буква абревіатури SMART має значення:
– Specific – конкретна мета;
– Measurable – вимірювальна;
– Achievable – досяжна;
– Relevant – реалістична;
– Time bound – обмежена в часі.
Результати постанови цілей методом SMART зображено в таблиці В.1.
Таблиця В.1 – Постанова цілей проекту методом SMART
50
Назва Визначення
Створити веб-додаток підтримки
Specific
діяльності тренажерного залу.
Створити веб-додаток в визначені
Measurable строки, з використанням невеликої
кількості ресурсів.
Необхідно обладати навичками роботи з
мовами програмування PHP, JavaScript,
Achievable мовою розмітки HTML, каскадними
таблицями стилів CSS, та реляційними
базами даних MySQL.
Веб-додаток дасть змогу клієнтам
переглядати інформацію про
Relevant тренажерний зал, замовляти послуги не
виходячи з дому, виставляти тренерами
свої розклади занять прямо на сайті.
Проект обмежений у часі, його
Time bound виконання погоджується між
розробником та замовником.
2 Опис проекту на фазі розробки
2.1 Планування змісту структури проекту
Розділення задач на більш прості налагоджує робочий процес та робить його
набагато простішим. Ієрархічна структура робіт WBS (Work Breakdown Structure)
допомагає структурувати кожний етап проекту, грунтуючись на поставлених задачах.
Використання WBS:
– Допомагає більш вірно та точно організувати проекти.
– Допомагає легше розуміти зміст та цілі проекту.
51
– Розподіляє обов’язки.
Рисунок В.1 – Структура робіт WBS
2.2 Планування структури організації
Важливим наступним кроком після створення WBS структури є представлення
організаційної структури проекту OBS. Дана модель розподіляє обов’язки між
учасниками проекту на основі WBS.
Модель OBS зображена на рисунку В.2
52
Рисунок В.2 – Організаційна структура OBS
2.3 Побудова таблиці виконавців проекту
Таблиця В.2 – Виконавці проекту
Роль Ім’я Проектна роль
Розробник Фендюр Є.А. Розробка веб-сайту
Проектувальник Фендюр Є.А. Проектує моделі, базу даних
Тестувальник Фендюр Є.А. Тестує проект на наявність
помилок та багів
Керівник проекту Колесникова К.В. Надає постанову завдання на
проект, затверджує
документацію
Менеджер проекту Фендюр Є.А. Відповідає за виконання проекту
в строк, розподіляє ресурси
53
2.4 Побудова календарного графіку
Діаграма Ганта часто зустрічається в управлінні проектами, вважається
найкращим способом відображенням завдань та цілей, в залежності від часу. Зазвичай
ліворуч зображено список цілей, вгорі – шкала часу, кожне завдання позначене
смугою, початок смуги – старт завдання, кінець – фініш.
Календарний графік проекту зображено на рисунку В.3.
Рисунок В.3 – Діаграма Ганта
2.4 Управління ризиками проекту
Своєчасний аналіз та управління можливими ризиками значно полегшує роботу
над проектом. Дуже важливо заздалегідь визначити ризики, щоб бути готовим до
проблем. Кожен ризик має свою важливість та пріоритет, якщо ризик вагомий, то має
бути виправлений негайно, якщо незначний то одразу після більш пріоритетних.
Шкала оцінювання ризиків за рівнями відображена у таблиці В.3.
54
Таблиця В.3 – Шкала оцінювання за рівнем ризику
№ Назва Межі Ризики, які входять
1 Допустимі 1 R 2 R1
2 Виправдані 3 R 5 R4, R6, R7, R9
3 Недопустимі 6 R 9 R2, R3, R5, R8
Таблиця В.4 – Ризики проекту
Ризик Назва ризику Опис ризику
1 Недотримання визначених Вихід за межі оговорених термінів
строків виконання
2 Зміна вимог Зміна умов, внаслідок чого інший об’єм
роботи
3 Низькоякісний контент Погіршення інформативності чи дизайну
веб-додатку
4 Недостатня кваліфікація Розробнику не вистачає знань для того
розробника щоб виконати певний етап
5 Неповне тестування Можливість пропустити помилки чи
баги в веб-додатку через недостатнє
тестування
Таблиця В.5 – Класифікація ризиків
ID Ризик Ймовірність Вплив Ранг
ризику виникнення ризику ризику
R1 Наявність альтернативних проектів Висока Низький 2
Продовження таблиці В.5 – Класифікація ризиків
R2 Продукт не є актуальним Низька Високий 9
55
R3 Не вкластися у строки виконання Середня Високий 9
R4 Зміна вимог Низька Середній 3
R5 Низькоякісний контент Низька Високий 7
R6 Недостатня кваліфікація виконавця Середня Середній 5
R7 Неповне тестування Середня Середній 5
R8 Проблеми з хостингом Середня Висока 8
R9 Неправильно виконане Середня Середня 5
проектування
Стратегію уникнення та запобігання ризикам показано у таблиці В.6.
Таблиця В.6 – Стратегія уникнення ризиків
ID Ризик Реакція на ризик
ризику
R1 Наявність Розробити продукт з відмінностями, котрі
альтернативних проектів зацікавлять потенційних клієнтів
R2 Продукт не є актуальним Розробити продукт з відмінностями, котрі
зацікавлять потенційних клієнтів
R3 Не вкластися у строки Вияснення причин та узгоджені з
виконання замовником про додаткові строки
R4 Зміна вимог Вияснити як зміна вимог впливає на
роботу над проектом, внаслідок чого
задокументувати зміни та діяти
відповідно до них
Продовження таблиці В.6 – Стратегія уникнення ризиків
R5 Низькоякісний контент Знайти чи попросити у замовника якісний
контент
56
R6 Недостатня кваліфікація Підвищення кваліфікації розробника або
виконавця залучення нових
R7 Неповне тестування Уважніше протестувати та долучити
додаткових тестувальників
R8 Проблеми з хостингом Обрати інший більш відповідний хостинг
або вирішити проблему з поточним
R9 Неправильно виконане Переговорити з замовником, та виправити
проектування помилки, пов’язані з проектуванням
57
ДОДАТОК Г
ЛІСТИНГ ПРОГРАМНОГО КОДУ ОСНОВНИХ МОДУЛІВ ВЕБ-САЙТУ
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Fendur</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="stylesheet" type="text/css"
href="../CSS/content_index.css">
<link
href="https://fonts.googleapis.com/css?family=Play&display=swap"
rel="stylesheet">
</head>
<body>
<div class="parent">
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
</header>
58
<div id="content">
<div class="slider">
<div class="slide fade">
<img src="../IMG/bag1.jpg">
<div class="background"></div>
<div class="slide1-content">
<h2>В тренажерному залі Fendur ви справді відчуєте себе вільним.
В залі багато місця та тренажерів на кожну групу м'язів. Є ринг для
кікбоксингу, кімната для танців та площа для кроссфіту. Площа території
150 квадратних метрів. Розмахни крилами та тренеруйся з нами!</h2>
</div>
</div>
<div class="slide fade">
<img src="../IMG/bag2.jpg">
<div class="background"></div>
<div class="slide2-content">
<div class="services-main"><h3>Абонемент на 1
місяць</h3><hr><img src="../IMG/abon1.jpg"><a
href="../PHP/services.php"><button>ДЕТАЛЬНО</button></a></div>
<div class="services-main"><h3>Абонемент на 3
місяці</h3><hr><img src="../IMG/abon4.jpg"><a
href="../PHP/services.php"><button>ДЕТАЛЬНО</button></a></div>
<div class="services-main"><h3>Абонемент на 1 рік</h3><hr><img
src="../IMG/abon6.jpg"><a
href="../PHP/services.php"><button>ДЕТАЛЬНО</button></a></div>
</div>
</div>
<div class="slide fade">
<img src="../IMG/bag3.JPG">
<div class="background"></div>
<div class="slide3-content">
<div class="for-benefits">
<h3 style="margin-bottom: 10px;">Переваги</h3><hr>
<div style="margin-top: 10px;" class="rows-slide3"><img
src="../IMG/quality.jpg">Велика площа залу</div>
<div class="rows-slide3"><img src="../IMG/speed.jpg">Професійні
тренери</div>
<div class="rows-slide3"><img src="../IMG/exp.jpg">Нове
обладнання</div>
<div class="rows-slide3"><img src="../IMG/money.jpg">Чудові
ціни на абонементи</div>
<div class="rows-slide3"><img src="../IMG/smile.jpg">Багато
напрямків для тренувань</div>
</div>
</div>
59
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="for-dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<script src="../JS/mainslider.js"></script>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" target="_blank"><img
id="inst" src="../IMG/instagram.jpg" width="30px" height="30px"
alt="Instagram" title="Instagram"></a>
</div>
</footer>
</div>
</body>
</html>
gallery.php
<?php
session_start();
?>
<html>
<head>
<title>Галерея</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="stylesheet" type="text/css"
href="../CSS/content_gallery.css">
<link
href="https://fonts.googleapis.com/css?family=Play&display=swap"
rel="stylesheet">
<meta charset="utf-8">
</head>
60
<body>
<div id="parent">
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
</header>
<div class="content">
<div class="portfolio">
<?php
include ('settings.php');
$g1 = 'SELECT `image` FROM `gallery`;';
$result1 = mysqli_query($db, $g1);
if ($result1) {
echo ""; }
else {
echo "Неможливо обробити запит"; }
while ($myrow = mysqli_fetch_array($result1, MYSQLI_ASSOC)) {
echo '<div class="square">'; echo
'<img src=../IMG/'.$myrow['image'].'>';
echo '</div>';
}
?>
</div>
<div id="myModal" class="modal">
<span class="close"
onclick="document.getElementById('myModal').style.display='none'">&tim
es;</span>
<img class="modal-content" id="img01">
61
</div>
<script type="text/javascript" src="../JS/modalscript.js"></script>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" style="margin-right:
50px;" target="_blank"><img id="inst" src="../IMG/instagram.jpg"
width="30px" height="30px" alt="Instagram" title="Instagram"></a>
</div>
</footer>
</div>
</body> </html>
schedule.php
<?php
session_start();
?>
<html>
<head>
<title>Розклад</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="stylesheet" type="text/css"
href="../CSS/content_schedule.css">
<link
href="https://fonts.googleapis.com/css?family=Play&display=swap"
rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div id="parent">
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
62
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
</header>
<div class="content">
<?php
include ('settings.php');
$g1 = 'SELECT *, schedule.description as descript FROM schedule join
coach on schedule.coach_id=coach.coach_id';
$result1 = mysqli_query($db, $g1);
if ($result1) {
echo ""; }
else {
echo "Неможливо обробити запит"; }
while ($myrow = mysqli_fetch_array($result1, MYSQLI_ASSOC)) {
echo "<div class=for-schedule>";
echo '<h3>'.$myrow['title'].'</h3>';
echo "<div class=for-description><hr color=#666259><br>";
echo "<p>".$myrow['descript']."</p>";
echo "<p>".$myrow['f_name']." ".$myrow['s_name']."</p>";
echo "</div>";
echo "</div>";
if (!empty($_COOKIE['id'])) {
echo "<a
href='../PHP/changeschedule.php'><button>ЗМІНИТИ РОЗКЛАД</button></a>";
}
63
}
?>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" style="margin-right:
50px;" target="_blank"><img id="inst" src="../IMG/instagram.jpg"
width="30px" height="30px" alt="Instagram" title="Instagram"></a>
</div>
</footer>
</div>
</body>
</html> coaches.php
<body>
<div id="parent">
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
64
</nav>
</header>
<div class="content">
<?php
include ('settings.php'); $g1
= 'SELECT * FROM coach';
$result1 = mysqli_query($db, $g1);
if ($result1) {
echo ""; }
else {
echo "Неможливо обробити запит"; }
while ($myrow = mysqli_fetch_array($result1, MYSQLI_ASSOC)) {
echo "<div class=for-coach>";
echo "<div class=square>";
echo '<img src=../IMG/'.$myrow['image'].'>';
echo "</div>";
echo "<div class=for-description>";
echo "<h3>".$myrow['f_name']."
".$myrow['s_name']."</h3><hr
color=#666259><br>";
echo "<p>".$myrow['description']."</p>";
echo "</div>";
echo "</div>";
}
?>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
65
<a href="https://www.instagram.com/" style="margin-right:
50px;" target="_blank"><img id="inst" src="../IMG/instagram.jpg"
width="30px" height="30px" alt="Instagram" title="Instagram"></a>
</div>
</footer>
</div>
</body> </html>
services.php
<?php
session_start();
?>
<html>
<head>
<title>Послуги</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="stylesheet" type="text/css"
href="../CSS/content_services.css">
<link
href="https://fonts.googleapis.com/css?family=Play&display=swap"
rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div id="parent">
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
66
</header>
<div class="content">
<?php
include ('settings.php'); $g1
= 'SELECT * FROM service';
$result1 = mysqli_query($db, $g1);
if ($result1) {
echo ""; }
else {
echo "Неможливо обробити запит"; }
while ($myrow = mysqli_fetch_array($result1, MYSQLI_ASSOC)) {
echo "<div class=for-service>";
echo '<img src=../IMG/'.$myrow['image'].'>';
echo "<div class=for-description>";
echo "<h3>".$myrow['name']."</h3><hr color=#666259><br>";
echo "<p>".$myrow['description']."</p>";
echo "<span class=price>".$myrow['price']." грн</span>";
echo "</div>";
echo "</div>";
}
?>
<a href="../PHP/orderform.php"><button>ЗАМОВИТИ АБОНЕМЕНТ</button></a>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" style="margin-right:
50px;" target="_blank"><img id="inst" src="../IMG/instagram.jpg"
width="30px" height="30px" alt="Instagram" title="Instagram"></a>
</div>
67
</footer>
</div>
</body> </html>
orderform.php
<html>
<head>
<title>Замовлення</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="stylesheet" type="text/css"
href="../CSS/content_order.css">
<link
href="https://fonts.googleapis.com/css?family=Play&display=swap"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="parent">
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
</header>
<div class="content">
<div class="other-content">
<form action="handle.php" method="post" id="done">
<div class="order-form">
<label for="f_name">Ваше ім'я:</label>
68
<input type="text" name="f_name">
<label for="s_name">Ваше прізвище:</label>
<input type="text" name="s_name">
<label for="number">Ваш номер телефону:</label>
<input type="text" name="number" value="+380" placeholder="+380">
<label for="category">Абонемент:</label>
<div class="custom-select">
<select name="category">
<option value="1">1 місяць</option>
<option value="1">1 місяць</option>
<option value="2">1 місяць + тренер</option>
<option value="3">1 заняття</option>
<option value="4">3 місяці</option>
<option value="5">3 місяці + тренер</option>
<option value="6">1 рік</option>
<option value="7">1 рік + тренер</option>
</select>
</div>
<script type="text/javascript" src="../JS/forselect.js"></script>
<button type="submit" name="submit">ЗАМОВИТИ</button>
</div>
</form>
<script type="text/javascript">
function filed(str){
$('.timed').css('background-color', '#db5c5c');
$('.timed').css('display', 'block');
$('.timed').html("");
$('.timed').html(str); setTimeout(function(){
$('.timed').css('display', 'none');
}, 5000);
}
function success(str){
$('.timed').css('background-color', '#73d980');
$('.timed').css('display', 'block');
$('.timed').html("");
$('.timed').html(str); setTimeout(function(){
$('.timed').css('display', 'none');
}, 5000);
}
$('#done').submit( (event)=>{
event.preventDefault();
$.post("./handle.php", $('#done').serialize())
69
.done(function(data){
console.log(data);
if(data=="Заповніть усі поля."){
filed(data);}
else {
if (data=="Введіть ім'я на українській мові з великої літери не
використовуючи символи або цифри."){
filed(data);}
else {
if (data=="Введіть прізвище на українській мові з великої
літери не використовуючи символи або цифри."){
filed(data);}
else {
if (data=="Введіть номер мобільного телефону коректно: на початку
повинно стояти '+380' та дев'ять інших цифр вашого номеру телефону."){
filed(data);}
else {
if (data=="Наші вітання, приходьте до Fendur та
отримайте абонемент!"){
success(data);}
}}}}
});
});
</script>
<div class="for-timetable">
<div class="restriction-form">
<i><p style="text-decoration: underline;">Заповнюючи форму
замовлення, майте на увазі:</p></i><br>
<p style="font-size: 14px;">  -Записуйте ім'я та
прізвище з великої літери на український мові без використання літер та
символів.</p><br>
<p style="font-size: 14px;">  -У номері мобільного телефону на
початку повинно стояти '+380' та дев'ять інших цифр вашого номеру
телефону.</p><br>
</div>
</div>
</div>
<div class="timed"></div>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
70
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" target="_blank"><img
id="inst" src="../IMG/instagram.jpg" width="30px" height="30px"
alt="Instagram" title="Instagram"></a>
</div>
</footer>
</div>
</body>
</html> login.php
<?php
session_start();
if (isset($_COOKIE['id'])) {
header("location: check.php");
}
include ('settings.php');
if (isset($_POST['submit'])) {
$query = mysqli_query($db, "SELECT user_id, password FROM users
WHERE login='".mysqli_real_escape_string($db, $_POST['login'])."' LIMIT
1;");
$data = mysqli_fetch_assoc($query);
if ($data['password'] === md5(md5($_POST['password']))) {
setcookie("id", $data['user_id'], time() + 60 * 60 * 24 * 30,
"/");
header("Location: check.php");
exit();
} else {
print "Ви ввели неправильний логін/пароль";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Увійти</title>
71
<link rel="stylesheet" type="text/css"
href="../CSS/content_login.css">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="shortcut icon" href="img/title.ico">
</head>
<body>
<div class="parent">
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
</header>
<div class="content">
<form action="login.php" method="post" id="login">
<input type="login" placeholder="Введіть логін"
name="login"required>
<input type="password" placeholder="Введіть пароль"
name="password" required>
<input type="submit" name="submit" value="Увійти">
</form>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
72
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" target="_blank"><img
id="inst" src="../IMG/instagram.jpg" width="30px" height="30px"
alt="Instagram" title="Instagram"></a>
</div>
</footer>
</div>
</body> </html>
adminpanel.php
<?php session_start();
include ('settings.php');
if (!isset($_COOKIE['id'])) {
header("location: check.php");
}
$id = $_COOKIE['id'];
$checkAdmin = mysqli_query($db, "SELECT r.role FROM users u JOIN role r
on u.role_id=r.role_id WHERE u.user_id = '$id' and r.role_id = 1 ORDER
BY user_id ASC LIMIT 1");
$rowCount = mysqli_num_rows($checkAdmin);
if($rowCount === 0){
header("Location: check.php");
}
?>
<html>
<head>
<title>Адмін панель</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="stylesheet" type="text/css"
href="../CSS/content_admin.css">
</head>
<body>
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
73
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
</header>
<div class="main-row">
<div class="first">
<?php
$g1 = "SELECT * FROM `order`"; $result1
= mysqli_query($db, $g1);
echo "<table border=3>";
$p=1;
while ($myrow1 = mysqli_fetch_array($result1, MYSQLI_ASSOC)) {
if ($p==1) {
echo "<tr>";
foreach ($myrow1 as $ind1 => $buf1) {
echo "<td>".$ind1."</td>"; }
echo
"</tr>";
$p=2; } echo "<tr>";
foreach ($myrow1 as $buf1) {
echo "<td>".$buf1."</td>"; }
echo "</tr>"; }
echo "</table>";
?>
<form id="client" action="adminpanel.php" method="post">
<select name="choice1" class="choice1" onchange="select1(event);">
<option value="delete" class="options">Видалити</option>
<option value="update" class="options">Редагувати</option>
</select><br>
<label for="key">Введіть сюди значення ключа того рядка який хочете
редагувати або видалити</label><br> <input type="number" name="key">
<script type="text/javascript"> function select1(event){
console.log(event.target.value);
if(event.target.value=="update"){
74
document.getElementById("hidden1").style.display='block';
}
else {
document.getElementById("hidden1").style.display='none';
}
}
</script>
<div id="hidden1" style="display: none;">
<label for="column">Виберіть колонку яку хочете
редагувати</label><br>
<select name="column">
<option value="f_name">Ім'я</option>
<option value="s_name">Прізвище</option>
<option value="phone">Телефон</option>
<option value="service_id">Абонемент</option>
</select><br>
<label for="value1">Введіть сюди значення колонки, яку хочете
редагувати</label><br>
<input type="text" name="value1">
</div><br>
<input type="submit" value="Зробити">
</form>
<?php
$action = htmlentities(mysqli_real_escape_string($db,
$_POST['choice1']));
$key = htmlentities(mysqli_real_escape_string($db, $_POST['key']));
$column = htmlentities(mysqli_real_escape_string($db,
$_POST['column']));
$value = htmlentities(mysqli_real_escape_string($db,
$_POST['value1'])); if($key=="")
{
echo "Заповніть поля";
} else
{
if($action=="update"){
if($value==""){ echo
"Заповніть поля";}
else{
$update = "UPDATE `order` SET `$column`='$value' WHERE
`order_id`='$key';";
$result3 = mysqli_query($db, $update);
if(!$result3){
echo "Неможливо поміняти дані";
}
else{
echo "Дані редаговано!";
75
}
} }
else{
$delete = "DELETE FROM `order` WHERE `order_id`='$key';";
$result4 = mysqli_query($db, $delete);
if(!$result4){
echo "Неможливо видалити дані";
}
else{
echo "Рядок видалено!";
}
}
}
?>
</div>
<div class="second">
<?php
$g2 = "SELECT * FROM `users`"; $result2
= mysqli_query($db, $g2);
echo "<table border=3>";
$p=1;
while ($myrow2 = mysqli_fetch_array($result2, MYSQLI_ASSOC)) {
if ($p==1) {
echo "<tr>";
foreach ($myrow2 as $ind2 => $buf2) {
echo "<td>".$ind2."</td>"; }
echo
"</tr>";
$p=2; } echo "<tr>";
foreach ($myrow2 as $buf2) {
echo "<td>".$buf2."</td>"; }
echo "</tr>"; }
echo "</table>";
?>
<form id="userdelete" action="adminpanel.php" method="post"> <label
for="key2">Введіть сюди значення ключа того рядка який хочете
видалити</label><br>
<input type="number" name="key2">
<?php
$aa = new mysqli($host, $user, $password, $databases);
$key2 = $_POST["key2"];
$check2 = $aa -> query("SELECT user_id FROM users WHERE
user_id='$key2'");
76
$myrow2 = mysqli_fetch_array($check2);
if ($key2 != NULL) {
if (empty($myrow2)) {
$nous = 'Немає такого користувача';
echo "<script
type='text/javascript'>alert('$nous');</script>";
}
else
{
$qqq = $aa->query("DELETE FROM users WHERE
user_id = '$key2'"); } }
if ($qqq === TRUE){
$susrem = 'Користувача видалено';
echo "<script
type='text/javascript'>alert('$susrem');</script>";
}
if ($qqq === FALSE){
$susrem1 = 'Не вийшло видалити користувача';
echo "<script
type='text/javascript'>alert('$susrem1');</script>";
}
?>
<input type="submit" name="remove-submit" value="Видалити">
</form>
<form id="useradd" action="adminpanel.php" method="post">
<label for "login">Введіть дані нижче, щоб додати
нового користувача</label><br>
<input type="login" name="login"
placeholder="Login" required id="login"><br>
<input type="password" name="password"
placeholder="Пароль" required id="password" ><br>
<select name="role" id="role" placeholder="Роль"
required>
<option value="1">Адміністратор</option>
<option value="2">Тренер</option>
</select>
<?php
$newmail2 = $_POST["login"];
$newpass2 = md5(md5($_POST['password']));
$role1 = $_POST["role"];
$check1 = $aa -> query("SELECT user_id FROM users WHERE
login='$newmail2'");
$myrow1 = mysqli_fetch_array($check1);
77
if (($newmail2 != NULL) && ($newpass2 != NULL) &&
($role1 != NULL)) {
if (!empty($myrow1))
{
$ermsg = 'Цей логін вже зареєстровано';
echo "<script
type='text/javascript'>alert('$ermsg');</script>";
}
else $qq1 = $aa->query("INSERT INTO `users`
(`login`, `password`, `role_id`) VALUES ('$newmail2', '$newpass2',
'$role1')"); }
if ($qq1 === TRUE){
$suc1 = 'Користувача додано';
echo "<script
type='text/javascript'>alert('$suc1');</script>";
}
?>
<input type="submit" name="add-submit" value="Додати">
</form>
</div>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" target="_blank"><img
id="inst" src="../IMG/instagram.jpg" width="30px" height="30px"
alt="Instagram" title="Instagram"></a>
</div>
</footer>
</body>
</html> changeschedule.php
<?php session_start();
include ('settings.php');
78
if (!isset($_COOKIE['id'])) {
header("location: check.php");
}
?>
<html>
<head>
<title>Змінити розклад</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="stylesheet" type="text/css"
href="../CSS/content_admin.css">
</head>
<body>
<header>
<div class="logo">
<span><a href="../PHP/index.php">Fendur</a></span>
</div>
<nav class="menu">
<ul class="topmenu">
<li><a href="../PHP/gallery.php">Галерея</a></li>
<li><a href="../PHP/schedule.php">Розклад</a></li>
<li><a href="../PHP/coaches.php">Тренери</a></li>
<li><a href="../PHP/services.php">Послуги</a></li>
<?php
if ($_COOKIE['id']==1) {
echo "<li><a
href='../PHP/adminpanel.php'>Адмін</a></li>";
}
if (!empty($_COOKIE['id'])) {
echo "<li><a
href='../PHP/logout.php'>Вийти</a></li>";
}
?>
</ul>
</nav>
</header>
<div class="main-row">
<div class="first">
<?php
$g1 = "SELECT * FROM `schedule`"; $result1
= mysqli_query($db, $g1);
echo "<table border=3>";
$p=1;
while ($myrow1 = mysqli_fetch_array($result1, MYSQLI_ASSOC)) {
if ($p==1) {
echo "<tr>";
79
foreach ($myrow1 as $ind1 => $buf1) {
echo "<td>".$ind1."</td>"; }
echo
"</tr>";
$p=2; } echo "<tr>";
foreach ($myrow1 as $buf1) {
echo "<td>".$buf1."</td>"; }
echo "</tr>"; }
echo "</table>";
?>
<form id="schedule" action="changeschedule.php" method="post"> <label
for="key">Введіть сюди значення ключа того рядка який хочете
редагувати</label><br>
<input type="number" name="key"><br>
<label for="column">Виберіть колонку яку хочете
редагувати</label><br>
<select name="column">
<option value="title">Назва</option>
<option value="description">Опис</option>
<option value="coach_id">Айді тренера</option>
</select><br>
<label for="value1">Введіть значення у обрану для редагування
колонку</label><br>
<input type="text" name="value1" required>
<input type="submit" value="Редагувати">
</form>
<?php
$key = htmlentities(mysqli_real_escape_string($db, $_POST['key']));
$column = htmlentities(mysqli_real_escape_string($db,
$_POST['column']));
$value = htmlentities(mysqli_real_escape_string($db,
$_POST['value1']));
if($key=="") {
echo "Оберіть ключ";
} else
{
$update = "UPDATE `schedule` SET `$column`='$value' WHERE
`schedule_id`='$key';";
$result = mysqli_query($db, $update);
if(!$result){
echo "Неможливо поміняти дані";
}
else{
echo "Дані редаговано!";
}
}
?>
80
</div>
</div>
<footer>
<div class="contact">
<p>Телефон: +380995331561</p>
<p>Електронна пошта: [email protected]</p>
<p>Адреса: м.Черкаси, вул. Байди54</p>
</div>
<h3>© усі права захищені</h3>
<div class="links">
<a href="https://www.facebook.com/" target="_blank"><img
id="fbook" src="../IMG/facebook.jpg" width="30px" height="30px"
alt="Facebook" title="Facebook"></a>
<a href="https://www.instagram.com/" target="_blank"><img
id="inst" src="../IMG/instagram.jpg" width="30px" height="30px"
alt="Instagram" title="Instagram"></a>
</div>
</footer>
</body>
</html>