Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/6042| Назва: | Веб-сайт майстерні з обробки та виготовлення виробів з деревини |
| Автори: | Підгорний, Микола Володимирович Васильченко, Юрій Сергійович |
| Ключові слова: | Метод аналізу ієрархій,;онлайн додаток,;теорія прийняття рішень. |
| Дата публікації: | 12-тра-2025 |
| Короткий огляд (реферат): | Актуальність теми. Онлайн магазини набирають популярність завдяки легкодоступності та зручності використання. Декоративні дерев’яні вироби мають попит серед великої кількості людей. Але персональні смаки та переваги потребують індивідуального підходу, тому є потреба в можливості робити унікальні замовлення, попередньо переконавшись в оптимальності обраного матеріалу. Мета роботи. Створення онлайн магазину для виробів з деревини з реалізованим алгоритмом порівняння матеріалів. Об’єкт дослідження: метод аналізу ієрархій, розробка сайту. Предмет дослідження: онлайн магазин виробів з деревини з алгоритмом порівняння матеріалів. Методи дослідження: аналіз літератури з наступних тем: теорія прийняття рішень, метод аналізу ієрархій, розробка онлайн сайту. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/6042 |
| Розташовується у зібраннях: | 124 Системний аналіз (Штучний інтелект) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| Пояснювальна записка_Васильченко Юрій_СА-2102_2024-2025.pdf Restricted Access | 3.31 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ
ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Веб-сайт майстерні з обробки та виготовлення виробів з деревини»
Виконав: студент 4 курсу, групи СА-2102
спеціальності 124 − «Системний аналіз»
(шифр і назва спеціальності)
освітня програма «Системний аналіз і
(назва освітньої програми)
прикладна логістика
Васильченко Юрій Сергійович
Керівник __________ Підгорний М.В.
(прізвище та ініціали)
Рецензент __________ Осауленко І. А.
(прізвище та ініціали)
Черкаси 2025 року
2
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 124 – Системний аналіз
Освітня програма Системний аналіз і прикладна логістика
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2025 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Васильченку Юрію Сергійовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи Веб-сайт майстерні з обробки та виготовлення виробів з деревини
Керівник роботи Підгорний М.В., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. №53/03-03.
2. Строк подання студентом роботи до «12» червня 2025 року
3. Вихідні дані до роботи:
Веб-сайт майстерні з обробки та виготовлення виробів з деревини.
Алгоритм порівнянь
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2 Аналіз існуючих сайтів.
4.3. Проектування та розробка сайту
4.4. Реалізація сайту для онлайн магазину виробів з деревини
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 52305-01.
3
5.2. Додаток Б. Текст програми.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ
посада консультанта завдання видав завдання прийняв
7. Дата видачі завдання
КАЛЕНДАРНИЙ ПЛАН
Строк
№ з/п Назва етапів кваліфікаційної роботи бакалавра виконання Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
дослідження.
3 Написання теоретичного розділу кваліфікаційної
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
роботи бакалавра.
5 Написання практичних розділів й висновків до
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА.
8 Захист кваліфікаційної роботи бакалавра.
Студент _____________________________ Юрій ВАСИЛЬЧЕНКО
(підпис)
Керівник роботи ____________________________ Микола ПІДГОРНИЙ
(підпис)
4
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 49 ст., 27. рис., 2. табл., 7
використаних джерел, 2 додатки.
Актуальність теми. Онлайн магазини набирають популярність завдяки
легкодоступності та зручності використання. Декоративні дерев’яні вироби мають
попит серед великої кількості людей. Але персональні смаки та переваги потребують
індивідуального підходу, тому є потреба в можливості робити унікальні замовлення,
попередньо переконавшись в оптимальності обраного матеріалу.
Мета роботи. Створення онлайн магазину для виробів з деревини з
реалізованим алгоритмом порівняння матеріалів.
Завдання кваліфікаційної роботи бакалавра:
- дослідити та проаналізувати вже існуючі сайти з онлайн магазинами
- розглянути теоретичні основи методу аналізу ієрархій
- спроектувати та створити сайт з реалізацією алгоритму порівнянь
Об’єкт дослідження: метод аналізу ієрархій, розробка сайту.
Предмет дослідження: онлайн магазин виробів з деревини з алгоритмом
порівняння матеріалів.
Методи дослідження: аналіз літератури з наступних тем: теорія прийняття
рішень, метод аналізу ієрархій, розробка онлайн сайту.
Ключові слова: метод аналізу ієрархій, онлайн додаток, теорія прийняття
рішень.
ABSTRACT
Bachelor's qualification work contains: 49 p., 27. pic., 2. tables., 7 sources used, 2
appendices.
Topic relevance. Online stores are gaining popularity due to their easy accessibility
and ease of use. Decorative wooden products are in demand among a large number of
people. But personal tastes and preferences require an individual approach, so there is a need
5
to be able to make unique orders, having previously made sure of the optimality of the
selected material.
Purpose of the work. Creation of an online store for wood products with an
implemented material comparison algorithm.
Tasks of the bachelor's qualification work:
-research and analyze existing sites with online stores
-consider the theoretical foundations of the hierarchy analysis method
-design and create a site with the implementation of the comparison algorithm
Object of research: hierarchy analysis method, site development.
Subject of research: online store of wood products with a material comparison
algorithm.
Research methods: literature review on the following topics: decision theory,
analysis of hierarchies method, online website development.
Keywords: analysis of hierarchies method, online application, decision theory.
6
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 8
ВСТУП 9
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ 11
1.1 Аналіз існуючих сайтів для виробів з деревини 11
1.2 Оптимальний вибір матеріалу 12
2 АНАЛІЗ ІСНУЮЧИХ САЙТІВ 15
2.1 Wood-Shop 15
2.2 Staffed wood 19
2.3 WoodArt 23
3 ПРОЕКТУВАННЯ ТА РОЗРОБКА САЙТУ 29
3.1 Вибір мови програмування 29
3.1.1 JavaScript 29
3.1.2 CSS 31
3.1.3 HTML 32
3.2 Метод аналізу ієрархій 33
4 РЕАЛІЗАЦІЯ САЙТУ ДЛЯ ОНЛАЙН МАГАЗИНУ ВИРОБІВ З ДЕРЕВИНИ 36
4.1 Головна сторінка 36
4.2 Сторінка послуг 36
4.3 Сторінка галереї 37
4.4 Сторінка контактів 38
4.5 Сторінка порівняння матеріалів 38
5 ПРОГРАМНІ ІНСТРУМЕНТИ 41
5.1 HTML інструменти 41
5.2 CSS інструменти 42
5.4 JavaScript інструменти 45
7
ВИСНОВКИ 48
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 49
ДОДАТОК А 50
ДОДАТОК Б 52
8
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
МАІ - метод аналізу ієрархій.
SEO - search engine optimization. Пошукова оптимізація.
CSS - cascading style sheets. Мова програмування.
HTML - HyperText Markup Language. Мова програмування.
МДФ - деревинноволокниста плита середньої щільності (англ. medium-density
fibreboard, MDF)
9
ВСТУП
Створення онлайн магазину для майстерні виробів з деревини має кілька
важливих переваг, особливо в умовах сучасного ринку. Ось кілька причин, чому це
актуально:
- Збільшення охоплення клієнтів. Онлайн магазин дозволяє не обмежуватися
лише місцевими покупцями. Завдяки Інтернету ви можете продавати свої
вироби по всій країні або навіть за кордоном, що значно розширює потенційну
аудиторію.
- Зручність для клієнтів. Багато людей шукають зручність, і покупка онлайн
дозволяє зекономити час. Вони можуть переглядати ваші продукти, робити
замовлення та здійснювати оплату 24/7, що значно зручніше, ніж відвідувати
фізичний магазин.
- Конкурентні переваги. Якщо більшість конкурентів ще не мають онлайн
магазину, це може стати значною перевагою для бізнесу. Більш того, люди
часто шукають унікальні або ручної роботи вироби в Інтернеті, а не в звичайних
магазинах, де вони можуть не знайти те, що їм потрібно.
- Маркетинг і реклама. Інтернет-магазин відкриває можливості для ефективного
онлайн-маркетингу: соціальні мережі, контекстна реклама, SEO-оптимізація
для пошукових систем. Це дозволяє залучити клієнтів саме до вашого магазину
та збільшити продажі без великих витрат на фізичну рекламу.
- Збір даних і аналітика. Онлайн магазин дозволяє збирати інформацію про
покупців, їх переваги, популярні товари та інші важливі дані. Це дозволяє
коригувати стратегію продажів, адаптувати асортимент і покращувати
клієнтський досвід.
- Можливість додаткових функцій. Ви можете додавати функції, як-от
кастомізація товарів (замовлення на вироби на замовлення), різні способи
оплати, інтеграцію з кур'єрськими службами, системи лояльності та багато
іншого.
10
- Розширення асортименту. В Інтернеті ви можете показати більший асортимент,
ніж в офлайн магазині, оскільки не потрібно обмежуватися фізичним
простором. Це дозволяє презентувати навіть невеликі, рідкісні або
індивідуальні вироби, які не були б економічно доцільні в традиційному
магазині.
- Можливість попереднього аналізу. Завдяки реалізації МАІ на сайту онлайн
магазину можна попередньо власноруч порівняти матеріали для виробів та
обрати оптимальний, враховуючи всі дані без потреби приймати рішення за
обмежений час, як при відвідуванні фізичних магазинів.
11
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз існуючих сайтів для виробів з деревини
Для того, щоб мати уявлення про те яким має бути результат створення сайту
для онлайн магазину виробів з деревини, було вирішено дослідити та проаналізувати
інші сайти подібного наповнення. Це дасть розуміння про ціни товарів на ринку,
необхідний функціонал на сайті, методи оформлення та методи за якими продукти
замовлюються та доставляються. Процес дослідження, порівняння та аналізу
існуючих сайтів з виробами з деревини можна розділити на кілька етапів.
Визначення мети дослідження. На початку необхідно чітко визначити, що саме
необхідно дослідити та з якою метою. Загально описати процес можна описати
наступними діями: оцінка конкуренції, аналіз тенденцій, порівняння
функціональності та дизайну, аналіз маркетингових стратегій.
1) Пошук конкурентів та збори даних. Для того, щоб провести аналіз, потрібно
знайти конкурентів на ринку. Використовуючи пошук в інтернеті або соціальних
мережах можна знайти та проаналізувати існуючі онлайн магазини.
2) Аналіз структур та функціоналу сайтів. Більш детальний аналіз допоможе
зрозуміти переваги та недоліки сайтів, що дасть змогу оптимізувати майбутній
продукт.
а) дизайн сайту;
б) навігація та структура;
в) продукти та їх опис;
г) функціональність;
д) контактна інформація.
3) Аналіз цінової політики та пропозицій. Для того, щоб магазин був успішним
необхідно правильно визначити ситуацію на ринку та способи співставлення попиту
та пропозицій.
12
а) ціновий діапазон;
б) акції та знижки;
в) товари на замовлення.
4) Аналіз маркетингових стратегій. Для отримання нових клієнтів сайту
необхідний маркетинг, тому аналіз відповідних стратегій є важливою умовою успіху.
а) SEO та контент-маркетинг;
б) реклама в соціальних мережах;
в) інфлюенсери та партнерства.
Дослідження, порівняння та аналіз сайтів з виробами з деревини дозволяє
зрозуміти конкуренцію та успішність стратегій, що означає отримання інформації,
яку можна використовувати для вдосконалення власного онлайн-магазину, залучення
нових клієнтів і покращення продажів.
1.2 Оптимальний вибір матеріалу
Визначення оптимального виду деревини при замовленні виробів в онлайн-
магазині — важливий крок, який допоможе уникнути розчарувань, забезпечить
довговічність виробу та відповідність очікуванням. Різні породи деревини мають
різну міцність, ціну, вимоги до обробки. При замовленні виробів з дерева в онлайн-
магазині важливо чітко розуміти, для чого призначений виріб, уточнювати
характеристики деревини в описі товару або у виробника, обирати деревину, що
відповідає бюджету, дизайну й умовам експлуатації. Ось чому було прийняте рішення
реалізувати на сайті алгоритм МАІ для порівняння різних видів деревини за різними
критеріями. Це допоможе користувачам зробити вибір, що покращить загальне
враження від онлайн магазину.
Метод аналізу ієрархій (МАІ), запропонований американським вченим Томасом
Сааті у 1970-х роках, є потужним інструментом підтримки прийняття рішень, який
13
дозволяє здійснювати вибір серед кількох альтернатив на основі систематичного
оцінювання критеріїв. Його застосування особливо ефективне в ситуаціях, коли
проблема має складну, багаторівневу структуру, що включає як кількісні, так і якісні
фактори.
МАІ ґрунтується на представленні задачі у вигляді ієрархічної структури, яка
включає мету прийняття рішення, критерії (та, за потреби, підкритерії) і
альтернативи. Ключовим елементом методу є парне порівняння елементів ієрархії
між собою для визначення їхньої відносної важливості або переваги.
Процедура МАІ включає кілька послідовних етапів. Спочатку формується
ієрархія, на вершині якої знаходиться головна ціль. Нижче розташовуються критерії,
які впливають на досягнення мети, а ще нижче — альтернативи вибору. Далі
виконується порівняння пар елементів на кожному рівні відносно елементів вищого
рівня. Для цього використовується шкала Сааті, що має значення від 1 до 9, де 1
означає рівну важливість, а 9 — абсолютну перевагу одного елемента над іншим.
На основі матриць попарних порівнянь розраховуються локальні ваги кожного
елемента. Потім обчислюється глобальна вага альтернатив шляхом агрегування
локальних ваг у межах усієї ієрархії. Важливою складовою є перевірка узгодженості
суджень. Для цього обчислюється індекс узгодженості та індекс випадкової
узгодженості, які дозволяють оцінити ступінь надійності отриманих результатів.
Метод аналізу ієрархій застосовується у широкому спектрі сфер, включаючи
менеджмент, інженерію, економіку, екологію, освіту, а також у державному
управлінні. У сфері стратегічного планування МАІ допомагає компаніям оцінити
потенційні варіанти розвитку на основі різних критеріїв, таких як фінансова
ефективність, ризик, ринковий потенціал тощо. У будівництві та інфраструктурному
проєктуванні цей метод дозволяє визначити оптимальне розташування об’єкта або
вибір постачальника, враховуючи технічні, економічні та соціальні фактори. В
екологічному менеджменті МАІ використовується для оцінки впливу господарської
діяльності на довкілля. Наприклад, при виборі найбільш прийнятного способу
утилізації відходів враховуються критерії вартості, ефективності, екологічної безпеки
14
та соціального сприйняття. У сфері охорони здоров’я цей підхід дозволяє приймати
обґрунтовані рішення щодо розподілу ресурсів, впровадження нових технологій чи
вибору постачальників медичного обладнання. Ще однією важливою сферою
застосування МАІ є освіта, де метод дозволяє здійснювати вибір серед освітніх
програм, визначати пріоритетні напрями розвитку закладу або оцінювати якість
викладацького складу.
Серед основних переваг МАІ слід відзначити гнучкість, здатність працювати з
якісними та кількісними даними, простоту у використанні та можливість врахування
суб’єктивних суджень експертів. Метод дозволяє структурувати складні проблеми,
що сприяє кращому розумінню ситуації.
Разом з тим, МАІ має і певні обмеження. Основним є суб’єктивність у процесі
формування матриць порівнянь, що може призводити до викривлень. Крім того,
метод потребує значної кількості порівнянь, особливо при великій кількості критеріїв
та альтернатив, що ускладнює його застосування в масштабних задачах. Узгодженість
суджень також може бути порушена при недостатній підготовці експертів.
Отже, метод аналізу ієрархій є ефективним засобом для підтримки складних
рішень, що базуються на множині суперечливих критеріїв. Його універсальність і
здатність адаптуватися до різних типів задач роблять його незамінним у багатьох
сферах діяльності. Однак для досягнення надійних результатів важливо забезпечити
високий рівень експертності, дотримання методології та перевірку узгодженості
суджень. Тому даний метод підходить для порівняння різних матеріалів для
виготовлення виробів з деревини за різними критеріями та вибір оптимального з них.
15
2 АНАЛІЗ ІСНУЮЧИХ САЙТІВ
2.1 Wood-Shop
Проаналізовано головну сторінку сайту для магазину WOOD-SHOP. Сайт має
зрозумілу і зручну структуру, побудовану навколо вертикального меню,
розташованого зліва. Це меню дозволяє користувачеві легко орієнтуватися між
основними розділами: головною сторінкою, продукцією, послугами, галереєю,
інформацією та контактами. Деякі розділи мають підменю, що свідчить про більш
детальну структуру.
Основний контент сайту розташований праворуч від меню. В центрі розміщено
привітання та короткий опис діяльності. Компанія позиціонує себе як безпосередній
виробник, що має власну виробничу базу з сучасним обладнанням, виконує
індивідуальні та нестандартні замовлення, дотримується термінів і забезпечує
конкурентні ціни.
У тексті виділено основні напрями роботи, серед яких проєктування,
виготовлення та монтаж. Перераховано види продукції: стінові панелі, меблі з масиву,
корпусні меблі, декоративні елементи, сходи, меблі для кафе та ресторанів тощо. Цей
перелік подано у вигляді маркованого списку, проте він вписується в загальний
змістовний блок і не перевантажує сторінку.
Далі йде короткий опис досвіду команди, акцент на професіоналізмі та
індивідуальному підході до кожного клієнта. В окремому блоці виділено інформацію
про можливість замовлення будь-яких елементів інтер’єру незалежно від складності.
Також подано способи зв’язку: телефон, месенджери або особисте відвідування
офісу.
Загалом сайт справляє враження професійного, добре структурованого ресурсу
з акцентом на індивідуальність, якість і локальне виробництво. Вигляд головної
сторінки сайту компанії WOOD-SHOP зображено на рисунку 2.1.
16
Рисунок 2.1 – Головна сторінка WOOD-SHOP
Сторінки послуг, продукції, інформації, контактів та головна мають загалом
схожу структуру яка була описана попередньо. Відрізняється текстове наповнення.
Кожній сторінці відповідне наповнення до теми. В послугах описаний список послуг,
який включає в себе виготовлення меблевих фасадів з масиву, виготовлення
фарбованих МДФ фасадів, виготовлення шпонованих меблевих фасадів, фарбування
фасадів, фарбування меблів, дверей та інших столярних виробів, та інші. Вигляд
сторінки послуг зображено на рисунку 2.2.
Рисунок 2.2 – Сторінка послуг WOOD-SHOP
17
Аналогічно оформлені сторінки продукції (рис. 2.3), інформації (рис. 2.4) та
контактів (рис. 2.5) з відповідною інформацією.
Рисунок 2.3 – Сторінка продукції WOOD-SHOP
Рисунок 2.4 – Сторінка інформації WOOD-SHOP
18
Рисунок 2.5 – Сторінка контактів WOOD-SHOP
Сторінка галереї має іншу структуру. Центральна частина сторінки присвячена
розділу "Галерея робіт". Вгорі розташовані категорії для фільтрації зображень. Серед
них є такі як "Інтер’єри", "Двері", "Екстер’єр", "Меблі", "Меблеві фасади", "Настінні
рейки", "Огородження", "Сходи", "Столи", "Тумби" та інші. Це дозволяє користувачу
швидко знайти цікавий для нього тип продукції або реалізованого проєкту, що значно
покращує зручність використання.
Під фільтрами розміщена сітка фотографій готових робіт, яка складається з
мініатюрних зображень різних проектів. Фотографії оформлені без підписів, але
очевидно демонструють виконані елементи інтер’єру, фасади будівель, меблі та
архітектурні рішення. Візуальний контент має високу якість і справляє враження
професійно виконаних проєктів, що підвищує довіру до компанії.
Загалом ця сторінка відіграє роль портфоліо і виконує її ефективно. Вона
поєднує простоту навігації, тематичне структурування, актуальну контактну
інформацію і візуальне представлення робіт, завдяки чому потенційний клієнт
швидко розуміє рівень і напрямок діяльності компанії. Вигляд сторінки галереї
зображено на рисунку 2.6.
19
Рисунок 2.6 – Сторінка галереї WOOD-SHOP
2.2 Staffed wood
Проаналізовано сайт магазину STAFFED WOOD. Цей магазин спеціалізується
на виготовленні столів і стільців з масиву натурального дерева. Структура сайту
побудована просто і зрозуміло, з акцентом на візуальну подачу продукції та ключову
інформацію про індивідуальне виготовлення та виконана у вигляді трьох сторінок.
У верхній частині головної сторінки розміщено назву бренду, посилання на
Instagram і кнопку із номером телефону для швидкого зв’язку, що підвищує
доступність компанії для клієнта.
Основний текст наголошує, що вся продукція виготовляється під замовлення, з
можливістю вибору розмірів, відтінків покриття та конструктивних деталей
(наприклад, опор зі сталі). Це підкреслює індивідуальний підхід до кожного клієнта
й дає зрозуміти, що продукція не серійна, а адаптована під потреби покупця.
Нижче розміщений заголовок розділу: "Столи та стільці з масиву натурального
дерева", під яким іде візуальна сітка з категоріями товарів. Кожен блок
20
супроводжується фото та назвою, що дає швидке уявлення про тип продукції.
Представлені варіанти столів для 4, 6 і 8 осіб, розкладні столи, стільці та столи з
епоксидної смоли.
Нижче додана панель з відгуками клієнтів. Це дає можливість користувачу
ознайомитися з враженнями про продукцію від інших користувачів, а також служить
як інструмент довіри сайту.
В самому низу сторінки додано коротко інформація про адрес виробництва та
контактні дані, а також кнопки переходу на сторінки виробництва та доставки.
Візуальна подача виконана у світлому, мінімалістичному стилі, з якісними
фото, що фокусують увагу на фактурі дерева, дизайні меблів та атмосфері інтер’єру.
Вигляд сайту та панель з відгуками зображені на рисунках 2.7 і 2.8.
Рисунок 2.7 – Основна частина головної сторінки магазину STAFFED WOOD
21
Рисунок 2.8 – Панель відгуків магазину STAFFED WOOD
Сторінка виробництва має подібну структуру до головної сторінки. Але
замість зображень там є лише текстовий опис виробництва цієї майстерні. Вигляд
сторінки виробництва зображено на рисунку 2.9.
Рисунок 2.9 – Сторінка виробництва магазину STAFFED WOOD
22
На сторінці доставки і оплати має подібну структуру. На ній вказана інформація
про години роботи, цінові категорії, час виготовлення, способи оплати з відповідними
посиланнями, методи доставки та політика повернення товарів. Вигляд сторінки
доставки і оплати зображено на рисунку 2.10.
Рисунок 2.10 – Сторінка оплати і доставки магазину STAFFED WOOD
23
2.3 WoodArt
Проаналізовано сайт магазину WoodArt. Цей магазин спеціалізується на
виготовленні унікальних дерев’яних поличок, а також інших меблів. Сайт витримує
баланс між текстовим наповненням та візуальним, що дає можливість користувачу
отримувати достатню кількість чіткої інформації про роботу майстерні. Структура
сайту складається з 5 сторінок: головна, каталог, галерея, контакти, доставка та
оплата.
У верхній частині сайту на кожній із сторінок є панель навігації, назва магазину
з емблемою та кнопка вибору мови серед української, англійської та російської, що
вказує на те що магазин співпрацює з іноземними замовниками.
Основне наповнення головної сторінки складається з короткого опису типів
роботи які виконує майстерня з зображеннями готових виробів. Нижче додано
відгуки та форму для контактування з виробником. Вигляд головної сторінки
зображено на рисунках 2.11 та 2.12.
Рисунок 2.11 – Основна частина головної сторінки магазину WoodArt
24
Рисунок 2.12 – Відгуки та форма для контактів
25
Сторінка галереї має просту структуру. На ній відображаються зображення з
прикладами виробів які виготовляє майстерня. На цій сторінці користувач може
ознайомитись з продукцією магазину та вирішити чи підходить даний тип для
замовлення. Вигляд сторінки галереї зображено на рисунку 2.13.
Рисунок 2.13 – Сторінка галереї магазину WoodArt
Сторінка каталогу має подібну структуру до сторінки галереї. На ній зображені
різні стандартні моделі заготовок що виробляються в майстерні. При натисканні на
зображення або текст відкривається розширена інформація з описом, цінами,
розмірами, матеріалами та можливими кольорами. Отже користувач на сторінці
каталогу може детально ознайомитися з усіма можливостями майстерні, а також
зробити замовлення необхідного виробу. Оформлення виконано інтуїтивно, що
робить процес вибору більш приємним та швидким. Вигляд сторінки галереї та
розширеної інформації зображено на рисунках 2.14 та 2.15.
26
Рисунок 2.14 – Сторінка каталогу магазину WoodArt
Рисунок 2.15 – Інформація про модель виробу
27
На сторінці доставки та оплати описана інформація про способи доставки та
правила оплати. Також розміщені фотографії способів пакування. Таким способом
магазин гарантує якість пакування та доставки виробів до замовників, що підвищує
рівень довіри до сайту. Вигляд сторінки доставки та оплати зображено на рисунку
2.16.
Рисунок 2.16 – Сторінка доставки та оплати магазину WoodArt
На сторінці контактів розміщені посилання на соціальні мережі, електронну
пошту, номер телефону, а також форма для заповнення щоб отримати консультацію.
Така варіативність способів зв’язку гарантує що у користувача буде зручний спосіб
виходу на контакт з майстернею. Вигляд сторінки контактів зображено на рисунку
2.17.
28
Рисунок 2.17 – Сторінка контактів магазину WoodArt
29
3 ПРОЕКТУВАННЯ ТА РОЗРОБКА САЙТУ
3.1 Вибір мови програмування
Для створення програмного продукту необхідно визначитись з мовою
програмування яка буде використана. Провівши аналіз існуючих мов програмування
було прийнято рішення використовувати HTML, CSS, JavaScript. Ці три мови є
базовими технологіями вебу та основою більшості сучасних вебсайтів. Працюють у
всіх сучасних браузерах без необхідності додаткового програмного забезпечення.
Забезпечують кросбраузерну сумісність. Зручні для використання завдяки кількісним
бібліотекам, багатьох відкритих шаблонів та інструментів. Дає змогу створити
динамічний інтерфейс та забезпечити зручність для користувача. HTML дозволяє
чітко структурувати контент, що важливо для пошукової оптимізації (SEO). Також
даний вибір забезпечує швидкість розробки і оновлень. Отже HTML, CSS, JavaScript
— це гнучка, потужна та масштабована комбінація для створення онлайн-магазину.
Вони забезпечують і гарний зовнішній вигляд, і зручний функціонал для користувача,
і просту інтеграцію з серверною частиною.
3.1.1 JavaScript
JavaScript — це високорівнева, інтерпретована мова програмування, яка
відіграє ключову роль у створенні сучасних вебдодатків. Її головна перевага полягає
в тому, що вона забезпечує динамічну та інтерактивну поведінку вебсторінок, що є
особливо важливим у розробці онлайн-магазинів. JavaScript є динамічно типізованою
мовою, яка виконується без попередньої компіляції, що дозволяє пришвидшити
процес розробки та тестування. У поєднанні з HTML та CSS ця мова дозволяє
створювати повноцінні інтерфейси, зручні для користувача. Історично JavaScript
використовувався як мова для клієнтської частини вебдодатків, що дало змогу
реалізовувати взаємодію з користувачем без потреби перезавантаження сторінки. У
контексті онлайн-магазину це може бути реалізовано у вигляді інтерактивного
додавання товарів до кошика, обробки форм замовлення, реалізації фільтрів і
30
сортування, а також динамічного відображення даних про товари. Завдяки підтримці
DOM-маніпуляцій, асинхронних запитів (через AJAX або fetch API) та сучасних
можливостей мови, JavaScript дозволяє значно покращити зручність використання
сайту. У результаті постійного розвитку стандарту ECMAScript (зокрема, версій ES6
і новіших), JavaScript отримав низку сучасних можливостей, таких як стрілочні
функції, класи, модулі, деструктуризація та асинхронне програмування з
використанням синтаксису async/await. Ці вдосконалення роблять мову більш
потужною та зручною для створення великих вебпроєктів. У розробці інтерфейсів
сучасного онлайн-магазину JavaScript найчастіше застосовується разом із
популярними бібліотеками та фреймворками, зокрема React.js, Vue.js та Angular. Ці
інструменти дозволяють створювати динамічні односторінкові додатки (SPA), які не
потребують повторного завантаження сторінки під час взаємодії користувача з
інтерфейсом. Завдяки компонентній структурі коду, розробники можуть повторно
використовувати окремі частини інтерфейсу, що сприяє швидшій розробці та
простішому обслуговуванню. Окремо варто згадати про можливості використання
JavaScript на серверній частині завдяки платформі Node.js. Це дозволяє створювати
повноцінні вебзастосунки, у яких як клієнтська, так і серверна логіка реалізована
однією мовою. Таким чином, з’являється можливість використовувати повний стек
розробки на JavaScript, як-от MERN (MongoDB, Express, React, Node.js), що є зручною
та ефективною архітектурою для онлайн-магазинів. JavaScript також тісно пов’язаний
із сучасними інструментами розробки, такими як TypeScript, Webpack, Vite, Next.js та
Nuxt.js, що забезпечують додаткові можливості для типізації, оптимізації
продуктивності та покращення SEO. Усе це робить JavaScript не лише мовою для
клієнтських ефектів, а й комплексним інструментом для створення повноцінних
вебплатформ.
У підсумку, JavaScript є стратегічно важливою технологією для розробки
онлайн-магазинів. Його здатність забезпечувати інтерактивність, масштабованість,
гнучкість у розробці та можливість повноцінної реалізації як клієнтської, так і
31
серверної логіки робить його оптимальним вибором для створення функціональних,
зручних і сучасних інтернет-магазинів.
3.1.2 CSS
CSS (Cascading Style Sheets) — це мова стилів, яка використовується для
візуального оформлення вебсторінок. У поєднанні з HTML та JavaScript, CSS відіграє
ключову роль у створенні повноцінного інтерфейсу користувача, особливо в
контексті онлайн-магазинів. Завдяки CSS вебсторінки набувають привабливого
вигляду, стають структурованими, адаптивними та зручними для взаємодії. Ця мова
відповідає за кольори, шрифти, відступи, розташування елементів, а також за анімації
та переходи, що робить її незамінною у сучасній веброзробці. У сфері електронної
комерції CSS дозволяє стилізувати всі основні елементи інтерфейсу: головну
сторінку, картки товарів, кошик, систему фільтрації, відгуки та форму замовлення. За
допомогою сучасних можливостей, таких як Flexbox та Grid, розробники можуть
створювати гнучкі та масштабовані макети, які легко адаптуються під різні розміри
екранів. Це критично важливо, оскільки більшість користувачів здійснюють покупки
з мобільних пристроїв. Адаптивність реалізується через використання медіа-запитів,
які дають змогу змінювати вигляд сторінки залежно від розміру вікна браузера. Крім
базового оформлення, CSS підтримує змінні, анімації та ефекти переходу, що
покращує візуальне сприйняття і взаємодію користувача з сайтом. Використання
змінних дає змогу впроваджувати теми, наприклад, темну і світлу, та централізовано
керувати стилями. Анімації забезпечують плавність інтерфейсу та візуальний відгук
на дії користувача, зокрема при наведенні, кліках або переході між сторінками. У
розробці онлайн-магазинів популярними стали CSS-фреймворки та інструменти,
серед яких варто виокремити Bootstrap, Tailwind CSS, SASS, PostCSS та CSS Modules.
Вони спрощують розробку, забезпечують повторне використання стилів і значно
прискорюють процес створення інтерфейсу. Наприклад, Tailwind CSS базується на
утилітарному підході, де кожен клас виконує одну конкретну функцію, що дозволяє
легко комбінувати стилі без написання зайвого коду. CSS має вирішальне значення
для формування першого враження користувача про сайт, підвищення зручності
32
навігації та загального досвіду користування. Добре структурований і привабливий
інтерфейс позитивно впливає на рівень довіри до онлайн-магазину та сприяє
збільшенню конверсії. Чітко виділені кнопки, логічна структура розміщення товарів
і адаптивний дизайн прямо впливають на бажання користувача здійснити покупку. У
підсумку, CSS є невід’ємною складовою сучасного веброзроблення, особливо у сфері
електронної комерції. Він забезпечує естетичність, зручність, адаптивність та
функціональність вебінтерфейсу, що робить його ключовим інструментом у
створенні успішного онлайн-магазину.
3.1.3 HTML
HTML (HyperText Markup Language) є основною мовою розмітки, яка
використовується для створення структури вебсторінок. У процесі розробки онлайн-
магазинів HTML виконує фундаментальну роль, забезпечуючи логічну побудову
сторінки, визначаючи її змістові елементи та їхнє розташування. Ця мова є
обов’язковою для будь-якого вебпроєкту, оскільки саме з неї починається створення
будь-якої вебсторінки, включно з інтерфейсом інтернет-магазину. HTML забезпечує
чітке поділення інформації на заголовки, абзаци, списки, таблиці, посилання, форми
та медіаелементи. У контексті онлайн-магазину за допомогою HTML створюється
структура каталогу товарів, оформлення замовлень, картки продуктів, навігаційне
меню, кошик, контактні форми та інші ключові елементи інтерфейсу. Усі візуальні
або динамічні компоненти, які створюються за допомогою CSS та JavaScript, спочатку
повинні мати основу у вигляді HTML-елементів. Сучасна версія мови — HTML5 —
розширила можливості розробників, дозволивши використовувати семантичні теги,
такі як <header>, <nav>, <section>, <article>, <footer>, які допомагають покращити
логічну структуру коду та полегшують навігацію для пошукових систем і допоміжних
технологій, як-от екранні читачі. Це важливо для забезпечення доступності сайту для
людей з обмеженими можливостями та для оптимізації сторінки під пошукові
системи. Крім семантики, HTML5 підтримує вбудовування мультимедійного
контенту без використання сторонніх плагінів. Завдяки тегам <audio> та <video>,
веброзробники можуть інтегрувати відеоогляди товарів, інструкції чи звукові
33
повідомлення безпосередньо на сторінці магазину. Також HTML дозволяє
створювати інтерактивні форми з різними типами полів, включно з електронною
поштою, телефонами, випадаючими списками, прапорцями та перемикачами, що
значно покращує зручність оформлення замовлення. HTML є платформонезалежною
та підтримується усіма сучасними браузерами, що гарантує коректне відображення
контенту незалежно від пристрою користувача. Його простий синтаксис дозволяє
легко інтегруватися з іншими технологіями, зокрема з CSS для оформлення та з
JavaScript для реалізації динамічної поведінки сторінки. Таким чином, HTML є
основою будь-якого онлайн-магазину, адже саме він відповідає за структуру і зміст
сторінки. Без нього неможливо реалізувати ні інтерфейс користувача, ні логічну
взаємодію між елементами. Його використання забезпечує чіткість побудови сайту,
логічну послідовність компонентів, доступність і загальну ефективність вебпроєкту.
У підсумку, HTML є критично важливою технологією, без якої неможливо створити
жодного вебінтерфейсу, а тим більше — повноцінний функціональний онлайн-
магазин.
3.2 Метод аналізу ієрархій
Одним з ефективних методів рішень багатокритеріальних задач з ієрархічними
структурами, що містять явні і неявні фактори, є метод аналізу ієрархій (МАІ, англ.
Analytic Hierarchy Process, AHP), розроблений Т. Сааті. Для задач, що розв’язуються
МАІ, дано: загальна мета (або цілі) розв’язання задач; критерії, за якими оцінюються
альтернативи; альтернативи. Зазвичай потрібно вибрати найкращу альтернативу або
зробити їх упорядкування. Використання МАІ передбачає реалізацію таких етапів.
- Структуризація задачі у вигляді ієрархічної структури з декількома рівнями:
цілі – критерії – альтернативи.
- Формування матриць попарних порівнянь і обчислення оціночних коефіцієнтів
для елементів кожного рівня. Водночас перевіряється узгодженість суджень
ОПР.
34
- Підраховується кількісний індикатор якості кожної з альтернатив і
визначається найкраща альтернатива або проводиться їх упорядкування за цим
значенням.
Обчислювальну основу МАІ визначають матриці попарних порівнянь об’єктів
(табл. 2.1). Для формування матриць попарних порівнянь (наприклад, об’єктів А і В)
використовується шкала значень (балів): «1» – A і B однаково важливі; «2»–«3» – A
незначно важливіше, ніж B; «4»–«5» – A значно важливіше за B; «6»–«7» – A явно
важливіше за B; «8»–«9» – A за своєю значущістю абсолютно перевершує B.
Таблиця 3.1 – Приклад матриці попарних порівнянь об’єктів A, B, C, D
А B C D
A 1 5 6 7
B 1/5 1 4 6
C 1/6 1/4 1 4
D 1/7 1/6 1/4 1
Матриця попарних порівнянь є обернено-симетричною, тобто якщо в позиції
(клітинки матриці) з номерами ij розташоване значення �� ����, то в клітинці матриці
1
з номером ji має розташовуватися зворотна величина, рівна .
�� ����
Матриця порівняння формується шляхом порівняння об’єкта, що розташований
у рядку, відносно об’єкта, що розташований у стовпці. Тобто для прикладу,
наведенного в табл. 2.1, об’єкт А значно важливіший за об’єкт В, відповідно значення
клітинки таблиці парних порівнянь 1-го рядка і 2-го стовпчика дорівнює 5.
При порівнянні елемента з собою маємо рівну значущість, так що на перетині
рядка A зі стовпчиком A в позиції (А, А) заносимо 1.
Заносимо відповідні зворотні величини: 1, 1/3, ..., або 1/9 на перетинах
стовпчика A і рядка B, тобто в позицію (В, A) для зворотного порівняння B з A.
35
Обчислення вектора пріоритетів за матрицею попарних порівнянь у
математичних термінах – це обчислення головного власного вектора, який після
нормалізації стає вектором пріоритетів.
Грубі оцінки значення головного власного вектора можна отримати способом
«Сума за рядками». Підсумувати елементи кожного рядка і нормалізувати розподілом
кожної суми на суму всіх елементів. Сума отриманих результатів буде дорівнювати
одиниці. Перший елемент результуючого вектора буде пріоритетом першого об’єкта,
другий – другого об’єкта і т. д. (приклад розрахунку в табл. 2.2).
Таблиця 3.2 – Приклад розрахунку вектора пріоритетів способом «сума за рядками»
A B C D Σ Σ/37,18
A 1,00 5,00 6,00 7,00 19,00 0,5111
B 0,20 1,00 4,00 6,00 11,20 0,3013
C 0,17 0,25 1,00 4,00 5,42 0,1457
D 0,14 0,17 0,25 1,00 1,56 0,0419
37,18
36
4 РЕАЛІЗАЦІЯ САЙТУ ДЛЯ ОНЛАЙН МАГАЗИНУ ВИРОБІВ З ДЕРЕВИНИ
4.1 Головна сторінка
Головна сторінка - перше що бачить користувач при переході на сайт онлайн
магазину. Тому тут вказується короткий опис майстерні, послуг чи іншої інформації,
що може потенційно зацікавити клієнта. Чим більш привабливий вигляд головної
сторінки, тим більше шансів що користувач буде задоволений в результаті роботи з
сайтом. Головна сторінка не має бути перевантаженою інформацією. Прототип
головної сторінки сайту зображено на рис. 4.1.
Рисунок 4.1 – Прототип головної сторінки
4.2 Сторінка послуг
На сторінці послуг будуть розміщені та описані види послуг які надаються
сайтом та майстернею, а також кнопки для переходу до відповідних функцій. Таким
чином, відвідуючи дану сторінку, користувачі можуть ознайомитися з функціоналом
37
сайту, а також видами послуг які пропонує майстерня виробів з дерева. Прототип
сторінки з послугами зображено на рисунку 4.2.
Рисунок 4.2 – Прототип сторінки послуг
4.3 Сторінка галереї
На сторінці галереї розміщуються виготовлені в майстерні вироби з дерева. До
кожного зображення додається детальний опис виробу. Отже користувач сайту може
ознайомитись з продукцією майстерні, оцінити якість, розміри, ціни, зрозуміти
орієнтацію майстерні, та отримати натхнення на створення особистого замовлення.
Сторінка галереї має важливу роль для сайту в цілому, адже саме тут показані
можливості майстерні. Якісна продукція та привабливий дизайн сторінки збільшить
мотивацію користувачів використовувати саме цей сайт для замовлення виробів.
Прототип сторінки галереї зображено на рисунку 4.3.
Рисунок 4.3 – Прототип сторінки галереї
38
4.4 Сторінка контактів
Сторінка контактів - це те завдяки чому майстерня і сайт функціонують разом.
Користувач сайту на даній сторінці може відправити листа виробнику. В даному листі
можна зробити детальний опис замовлення, відправити запит на купівлю вже
готового, залишити особистий відгук, відправити зображення з референсами для
роботи майстра, запитати деталі та багато іншого. Отже встановлюється зв’язок між
клієнтом і виробником. Прототип сторінки контактів зображено на рисунку 4.4.
Рисунок 4.4 – Прототип сторінки контактів
4.5 Сторінка порівняння матеріалів
Сторінка порівняння матеріалів - частина сайту де реалізований алгоритм МАІ
для порівняння різних видів деревини за кількома критеріями. Під час продумування
замовлення може виникнути потреба обрати правильний матеріал. Даний алгоритм,
який працює за принципами МАІ, допоможе користувачам зробити оптимальний
вибір. На сайті за умовчанням введені рекомендовані параметри для наведених
39
таблиць, але передбачено можливість користувачами змінювати значення. Для різних
виробів важливість того чи іншого критерію може бути різною. Також у користувачів
можуть бути особисті обставини чому вони надають інші від рекомендованих
пріоритети. Наприклад, якщо ціна майже не має значення, або принципово потрібен
якомога міцніший матеріал. Саме тому важливо давати користувачам можливість
власноруч виставляти значення коефіцієнтів. Прототип сторінки порівняння
матеріалів зображено на рисунку 4.5.
Рисунок 4.5 – Прототип сторінки порівняння матеріалів
Коефіцієнти критеріїв мають рекомендовані значення заповнені за
замовчуванням, але користувач може вільно змінювати їх. Ці коефіцієнти впливають
40
на результат підрахунків загального пріоритету для всіх критеріїв. Для нормалізації
результатів необхідною умовою є те, що сума всіх коефіцієнтів має бути рівною нулю.
Хоча користувач може ввести неправильні дані та алгоритм проведе розрахунки, але
буде показано попередження про те що умова не виконана, та додана кнопка що
автоматично змінить значення до необхідних. Приклад попередження зображено на
рисунку 4.6.
Рисунок 4.6 – Попередження про неправильно введені дані
41
5 ПРОГРАМНІ ІНСТРУМЕНТИ
5.1 HTML інструменти
HTML (HyperText Markup Language) є основною мовою розмітки, яка визначає
структуру будь-якого вебсайту, включаючи онлайн магазин виробів з деревини. У
такому магазині HTML використовується для створення всіх основних частин сайту
— від шапки до підвалу, від списку товарів до форм для оформлення замовлення.
Основна роль HTML — описати, що саме знаходиться на сторінці, і як ці елементи
пов’язані між собою.
Для шапки сайту використовують тег <header>, де можуть бути логотип,
навігаційне меню, кнопки входу або кошик. Навігація між сторінками (наприклад,
Головна, Каталог, Про нас, Контакти) оформлюється всередині тега <nav>, що
допомагає не лише користувачам, а й пошуковим системам розуміти структуру сайту.
Основний вміст сайту (тобто те, що змінюється від сторінки до сторінки)
зазвичай поміщають у тег <main>. Наприклад, на головній сторінці це може бути
вітальний банер, акційні пропозиції, популярні товари. У каталозі — перелік товарів,
оформлений у вигляді карток, де кожна картка має зображення товару (<img>), назву
(<h2>), опис (<p>) та кнопку для додавання до кошика (<button> або <a> з
відповідним стилем).
Щоб групувати логічні блоки, використовуються теги <section>, <article>,
<div>. Наприклад, блок із відгуками покупців може бути оформлений як окрема
секція, а кожен відгук — як окрема стаття.
Для взаємодії з користувачем важливу роль відіграють форми. Оформлення
замовлення, зворотній зв’язок або підписка на новини — усе це реалізується за
допомогою тега <form> та пов’язаних з ним елементів: <input> для введення тексту,
електронної пошти, номера телефону; <select> для вибору способу доставки;
<textarea> для введення коментарів; <button> для надсилання форми.
42
Також в HTML передбачені атрибути, які допомагають зробити сайт більш
зручним для користувача. Наприклад, атрибут alt описує зображення у випадку, коли
картинка не завантажилась. Атрибут placeholder показує підказку в полі вводу.
Атрибути required, type="email" або type="number" дозволяють контролювати
правильність введених даних.
Крім того, на етапі створення сайту важливо дотримуватись семантики — тобто
використовувати теги відповідно до їхнього призначення. Це допомагає зробити сайт
зрозумілішим для пошукових систем, полегшує підтримку та забезпечує кращу
доступність.
Усі ці інструменти HTML створюють міцний каркас, на якому згодом за
допомогою CSS (каскадних таблиць стилів) додається оформлення, а JavaScript —
функціональність. Але без якісної HTML-структури не може існувати жоден
повноцінний сайт, включно з онлайн магазином виробів з деревини. Приклад
використання HTML розмітки зображено на рисунку 5.1.
Рисунок 5.1 – Використання HTML розмітки
5.2 CSS інструменти
CSS (Cascading Style Sheets) — це мова стилів, яка відповідає за зовнішній
вигляд сайту. У розробці онлайн магазину виробів з деревини CSS використовується
для оформлення всіх елементів сторінки: кольорів, шрифтів, розмірів, відступів,
розташування блоків, а також для адаптивності та анімацій. Основне призначення
CSS — зробити сайт привабливим, читабельним і зручним для користувача на будь-
якому пристрої.
43
У першу чергу, за допомогою CSS задаються кольори, які відповідають стилю бренду
магазину. Наприклад, теплі дерев’яні відтінки можуть застосовуватись для фону,
кнопок, заголовків. Це може створювати атмосферу природності й екологічності, яка
пасує до теми виробів з дерева.
Шрифти також регулюються через CSS. Можна підключати шрифти через
інструменти на кшталт Google Fonts, а потім задавати їх у стилях для заголовків,
абзаців чи кнопок, забезпечуючи узгоджений вигляд усього сайту.
Важливою частиною є компонування елементів на сторінці. Для цього
використовуються сучасні інструменти макетування, такі як Flexbox і CSS Grid.
Flexbox дозволяє зручно вирівнювати елементи по горизонталі або вертикалі, що
особливо корисно для створення карток товарів або меню. Grid допомагає будувати
складні макети, наприклад, головну сторінку з кількома колонками товарів або блоків
з відгуками.
Для оформлення елементів інтерфейсу, таких як кнопки, поля вводу, випадаючі
списки, застосовуються стилі з відступами, рамками, тінями. Це робить елементи
візуально привабливими та сучасними. Наприклад, кнопка "Додати в кошик" може
мати зелений колір, зміну кольору при наведенні та легку анімацію натискання.
CSS також відповідає за адаптивність сайту — здатність підлаштовуватись під
різні екрани: телефони, планшети, десктопи. Для цього використовуються медіа-
запити, які дозволяють задавати різні стилі для різних розмірів екранів. Наприклад,
на мобільному пристрої товари можуть відображатись у один стовпчик, а на великому
екрані — у три або чотири.
Ще одним важливим інструментом є змінні CSS, які дозволяють зберігати
кольори, шрифти або відступи як змінні і повторно використовувати їх у коді. Це
спрощує підтримку стилів у великому проекті, як-от онлайн магазин.
Крім того, CSS дозволяє додавати анімації та переходи для покращення взаємодії
користувача з сайтом. Наприклад, плавна поява картки товару при завантаженні
сторінки або м’яка зміна кольору кнопки при наведенні роблять сайт більш
динамічним і приємним у використанні.
44
Таким чином, CSS забезпечує візуальну привабливість, зручність і сучасний
вигляд онлайн магазину виробів з деревини. Його інструменти дозволяють не лише
красиво оформити сторінку, але й зробити її гнучкою, швидкою та комфортною для
користувача. Приклади використання CSS на сайті зображено на рисунку 5.2 та 5.3.
Рисунок 5.2 – Використання CSS
45
Рисунок 5.3 – Використання CSS
5.3 JavaScript інструменти
JavaScript — це мова програмування, яка надає сайту динамічність і дозволяє
взаємодіяти з користувачем у режимі реального часу. У розробці онлайн магазину
виробів з деревини JavaScript використовується для реалізації функціональності, яка
неможлива лише за допомогою HTML і CSS. Його інструменти дозволяють
обробляти дії користувача, динамічно змінювати вміст сторінки, надсилати дані на
сервер і працювати з інтерактивними елементами.
Одним з найважливіших застосувань JavaScript є робота з кошиком. За його
допомогою можна додавати товари до кошика без перезавантаження сторінки,
зберігати обрані позиції в локальному сховищі браузера (localStorage або
sessionStorage), змінювати кількість товарів, видаляти позиції, а також розраховувати
загальну суму до сплати.
JavaScript дозволяє реагувати на події, наприклад, натискання кнопок, зміну
значень у формах, прокручування сторінки. Через обробники подій можна
46
реалізовувати такі речі, як спливаючі повідомлення, підтвердження замовлення, або
зміна вигляду кнопки при натисканні.
Іншим важливим інструментом є валідація форм. За допомогою JavaScript
перевіряється правильність заповнення полів перед відправкою даних на сервер.
Наприклад, перевірка, чи введено правильний номер телефону, чи заповнені
обов’язкові поля, чи збігаються паролі при реєстрації. Це дозволяє уникати помилок
і підвищити зручність користування сайтом.
Для динамічного завантаження даних без перезавантаження сторінки
використовуються запити до сервера за допомогою технологій AJAX або сучасного
API fetch. Це дає змогу, наприклад, оновлювати перелік товарів за категорією або
сортуванням, підвантажувати відгуки, перевіряти наявність товару на складі в
реальному часі.
Також JavaScript дозволяє створювати інтерактивні елементи, такі як слайдери,
фільтри товарів, випадаючі меню, вкладки, спливаючі вікна та модальні форми. Це
покращує навігацію і робить сайт зручнішим для покупців.
Ще один важливий інструмент — це бібліотеки та фреймворки. Наприклад,
бібліотека jQuery спрощує взаємодію з HTML-елементами, хоча сьогодні частіше
використовують сучасні фреймворки, як React, Vue або Angular. Вони дозволяють
створювати складні динамічні інтерфейси, де частини сторінки можуть змінюватись
залежно від дій користувача, без перезавантаження. JavaScript також дозволяє
інтегрувати сторонні сервіси: платіжні системи, сервіси доставки, карти для вказання
адреси, онлайн чат для підтримки клієнтів. Усе це робить сайт більш функціональним
і готовим до реальної комерційної роботи.
Отже, інструменти JavaScript надають сайту онлайн магазину можливість бути
інтерактивним, зручним, динамічним і гнучким. Без JavaScript сучасний інтернет-
магазин був би лише статичною сторінкою без можливості справжньої взаємодії з
користувачем. Приклад використання JavaScript зображено на рисунку 5.4.
47
Рисунок 5.4 – Використання JavaScript
48
ВИСНОВКИ
Під час виконання кваліфікаційної роботи бакалавра була досягнута поставлена
мета бакалаврської роботи. Створено сайт онлайн-магазину для майстерні виробів з
деревини з реалізованим на ньому алгоритмом МАІ для порівняння різних матеріалів
за кількома критеріями. Для досягнення мети було проведено аналіз існуючих сайтів
онлайн магазинів, опанований МАІ. На сайт було додані основні сторінки та
алгоритми для його функціонування. Для програмування було обрано мови HTML,
CSS, JavaScript та використано фреймворк Vue.js.
Результатом є функціонуючий сайт для онлайн магазину виробів з деревини
“Koven woodshop”.
49
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. JavaScript wiki URL: https://uk.wikipedia.org/wiki/JavaScript (дата звертання
12.02.2025)
2. JavaScript documentation URL:
https://developer.mozilla.org/ru/docs/Web/JavaScript (дата звертання 12.02.2025)
3. CSS wiki URL: https://uk.wikipedia.org/wiki/CSS (дата звертання 12.02.2025)
4. CSS documentation URL: https://developer.mozilla.org/ru/docs/Web/CSS (дата
звертання 12.02.2025)
5. HTML wiki URL: https://uk.wikipedia.org/wiki/HTML (дата звертання
12.02.2025)
6. HTML documentation URL: https://developer.mozilla.org/ru/docs/Web/HTML
(дата звертання 12.02.2025)
7. Саати Т. Принятие решений. Метод анализа иерархий. М.: Радио и связь, 1993.
278 с.
50
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2025 р.
ВЕБ-САЙТ МАЙСТЕРНІ З ОБРОБКИ ТА ВИГОТОВЛЕННЯ ВИРОБІВ З
ДЕРЕВИНИ
Специфікація
482.ЧДТУ. 52305-01 12 01
Листів 2
Розробник ____________________ Юрій ВАСИЛЬЧЕНКО
Керівник ____________________ Микола ПІДГОРНИЙ
Черкаси – 2025
51
482.ЧДТУ. 52305-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 52305-01 12 01 Текст програми
52
ДОДАТОК Б
ВЕБ-САЙТ МАЙСТЕРНІ З ОБРОБКИ ТА ВИГОТОВЛЕННЯ ВИРОБІВ З
ДЕРЕВИНИ
Текст програми
482.ЧДТУ. 52305-01 12 01
Листів 13
Розробник _____________ Юрій ВАСИЛЬЧЕНКО
Черкаси – 2025
53
Код сторінки порівняння матеріалів
<template>
<v-container>
<!-- Розкрій матеріалів (залишаємо без змін) -->
<!-- <v-row>
<v-col>
<h2>Розкрій матеріалів</h2>
<v-row>
<v-col cols="12" md="6">
<h3>Вхідні дані дошки</h3>
<v-text-field
v-model.number="board.length"
label="Довжина (см)"
type="number"
/>
<v-text-field
v-model.number="board.width"
label="Ширина (см)"
type="number"
/>
<v-text-field
v-model.number="board.thickness"
label="Товщина (см)"
type="number"
/>
</v-col>
<v-col cols="12" md="6">
54
<h3>Розміри заготовки</h3>
<v-text-field
v-model.number="piece.length"
label="Довжина (см)"
type="number"
/>
<v-text-field
v-model.number="piece.width"
label="Ширина (см)"
type="number"
/>
<v-text-field
v-model.number="piece.thickness"
label="Товщина (см)"
type="number"
/>
</v-col>
</v-row>
<v-btn color="primary" @click="calculateCutting">Розрахувати</v-btn>
<v-row v-if="result">
<v-col>
<h3>Результат</h3>
<p>Оптимальна к-сть виробів: {{ result.count }}</p>
<p>Залишок матеріалу: {{ result.waste }} см³</p>
</v-col>
</v-row>
</v-col>
55
</v-row> -->
<!-- Порівняння матеріалів -->
<v-row class="mt-8">
<v-col>
<h2>Порівняння матеріалів</h2>
<v-row>
<v-col cols="12" md="6">
<h3>Коефіцієнти критеріїв (сума = 1)</h3>
<v-text-field
v-model.number="criteriaWeights.strength"
label="Міцність"
type="number"
step="0.01"
min="0"
/>
<v-text-field
v-model.number="criteriaWeights.price"
label="Ціна"
type="number"
step="0.01"
min="0"
/>
<v-text-field
v-model.number="criteriaWeights.availability"
label="Доступність"
type="number"
56
step="0.01"
min="0"
/>
<v-btn color="primary" @click="normalizeWeights" class="mt-2">
Нормалізувати коефіцієнти
</v-btn>
<v-alert v-if="criteriaSum !== 1" type="warning" class="mt-4">
Сума коефіцієнтів критеріїв має дорівнювати 1. Поточна сума:
{{ criteriaSum.toFixed(2) }}
</v-alert>
</v-col>
<v-col cols="12" md="6">
<v-btn-toggle v-model="selectedCriterion" mandatory>
<v-btn value="strength">Міцність</v-btn>
<v-btn value="price">Ціна</v-btn>
<v-btn value="availability">Доступність</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
<v-table class="mt-4">
<thead>
<tr>
<th></th>
<th>Дуб</th>
<th>Береза</th>
<th>Клен</th>
57
<th>Сосна</th>
<th>Сума ел.</th>
<th>Пріоритет</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in currentTable" :key="rowIndex">
<td>{{ materials[rowIndex] }}</td>
<td v-for="colIndex in row.length" :key="colIndex">
<v-text-field
v-model.number="currentTable[rowIndex][colIndex - 1]"
type="number"
step="0.01"
hide-details
dense
@input="updateInverse(rowIndex, colIndex - 1)"
/>
</td>
<td>{{ rowSums[rowIndex].toFixed(2) }}</td>
<td>{{ priorities[rowIndex].toFixed(3) }}</td>
</tr>
<tr>
<td colspan="5">Сума елементів таблиці</td>
<td>{{ totalSum.toFixed(2) }}</td>
<td></td>
</tr>
</tbody>
58
</v-table>
<h3 class="mt-4">
Оптимальний матеріал (по критерію): {{ bestMaterial }}
</h3>
<h3 class="mt-4">Загальний пріоритет по всіх критеріях:</h3>
<v-row v-for="(material, index) in materials" :key="index">
<v-col>
<p>{{ material }}: {{ overallPriorities[index].toFixed(3) }}</p>
</v-col>
</v-row>
<h3 class="mt-4">
Найкращий матеріал (по всіх критеріях): {{ bestOverallMaterial }}
</h3>
</v-col>
</v-row>
</v-container>
</template>
<script setup>
import { ref, computed, watch } from "vue";
// Логіка для розкрою матеріалів
const board = ref({ length: 0, width: 0, thickness: 0 });
const piece = ref({ length: 0, width: 0, thickness: 0 });
const result = ref(null);
59
const calculateCutting = () => {
const boardVol =
board.value.length * board.value.width * board.value.thickness;
const pieceVol =
piece.value.length * piece.value.width * piece.value.thickness;
if (
board.value.length < piece.value.length ||
board.value.width < piece.value.width ||
board.value.thickness < piece.value.thickness
) {
result.value = { count: 0, waste: boardVol };
return;
}
const countByLength = Math.floor(board.value.length / piece.value.length);
const countByWidth = Math.floor(board.value.width / piece.value.width);
const countByThickness = Math.floor(
board.value.thickness / piece.value.thickness
);
const totalCount = countByLength * countByWidth * countByThickness;
const totalPieceVol = totalCount * pieceVol;
const waste = boardVol - totalPieceVol;
result.value = { count: totalCount, waste };
};
60
// Логіка для порівняння матеріалів
const materials = ["Дуб", "Береза", "Клен", "Сосна"];
const initialTables = {
strength: [
[1.0, 5.0, 4.0, 3.0],
[0.2, 1.0, 3.0, 2.0],
[0.25, 0.33, 1.0, 1.0],
[0.33, 0.5, 1.0, 1.0],
],
price: [
[1.0, 5.0, 0.1, 0.5],
[0.2, 1.0, 0.13, 0.5],
[10.0, 7.69, 1.0, 2.0],
[2.0, 2.0, 0.5, 1.0],
],
availability: [
[1.0, 4.0, 0.1, 1.5],
[0.25, 1.0, 0.1, 0.67],
[10.0, 10.0, 1.0, 2.0],
[0.67, 1.5, 0.5, 1.0],
],
};
const tables = ref({
strength: initialTables.strength.map((row) => [...row]),
61
price: initialTables.price.map((row) => [...row]),
availability: initialTables.availability.map((row) => [...row]),
});
const selectedCriterion = ref("strength");
const currentTable = ref(tables.value.strength.map((row) => [...row]));
const criteriaWeights = ref({
strength: 0.33,
price: 0.33,
availability: 0.34,
});
// Обчислення суми коефіцієнтів для попередження
const criteriaSum = computed(() => {
return (
(criteriaWeights.value.strength || 0) +
(criteriaWeights.value.price || 0) +
(criteriaWeights.value.availability || 0)
);
});
// Функція нормалізації (викликається за кнопкою)
const normalizeWeights = () => {
let strength = Math.max(0, criteriaWeights.value.strength || 0);
let price = Math.max(0, criteriaWeights.value.price || 0);
let availability = Math.max(0, criteriaWeights.value.availability || 0);
62
const sum = strength + price + availability;
if (sum === 0) {
criteriaWeights.value.strength = 0.33;
criteriaWeights.value.price = 0.33;
criteriaWeights.value.availability = 0.34;
} else {
criteriaWeights.value.strength = Number((strength / sum).toFixed(2));
criteriaWeights.value.price = Number((price / sum).toFixed(2));
criteriaWeights.value.availability = Number(
(
1 -
criteriaWeights.value.strength -
criteriaWeights.value.price
).toFixed(2)
);
}
};
const rowSums = computed(() => {
return currentTable.value.map((row) =>
row.reduce((sum, val) => sum + val, 0)
);
});
const totalSum = computed(() => {
return rowSums.value.reduce((sum, val) => sum + val, 0);
63
});
const priorities = computed(() => {
return rowSums.value.map((sum) => {
if (sum === 0) return 0;
const ratio = totalSum.value / sum;
return ratio !== 0 ? Number((1 / ratio).toFixed(3)) : 0;
});
});
const bestMaterial = computed(() => {
const maxPriority = Math.max(...priorities.value);
const bestIndex = priorities.value.indexOf(maxPriority);
return materials[bestIndex];
});
watch(selectedCriterion, (newCriterion) => {
currentTable.value = tables.value[newCriterion].map((row) => [...row]);
});
const updateInverse = (row, col) => {
const value = currentTable.value[row][col];
if (value !== 0 && value !== null) {
currentTable.value[col][row] = Number((1 / value).toFixed(2));
tables.value[selectedCriterion.value][row][col] = value;
tables.value[selectedCriterion.value][col][row] =
currentTable.value[col][row];
64
} else if (value === 0 || value === null) {
currentTable.value[col][row] = 0;
tables.value[selectedCriterion.value][col][row] = 0;
}
};
const calculatePriorities = (table) => {
const sums = table.map((row) => row.reduce((sum, val) => sum + val, 0));
const total = sums.reduce((sum, val) => sum + val, 0);
const prios = sums.map((sum) =>
total !== 0 && sum !== 0 ? 1 / (total / sum) : 0
);
const prioSum = prios.reduce((sum, val) => sum + val, 0);
return prios.map((prio) =>
prioSum !== 0 ? Number((prio / prioSum).toFixed(3)) : 0
);
};
const overallPriorities = computed(() => {
const strengthPrios = calculatePriorities(tables.value.strength);
const pricePrios = calculatePriorities(tables.value.price);
const availPrios = calculatePriorities(tables.value.availability);
return materials.map((_, i) => {
return (
strengthPrios[i] * (criteriaWeights.value.strength || 0) +
pricePrios[i] * (criteriaWeights.value.price || 0) +
65
availPrios[i] * (criteriaWeights.value.availability || 0)
);
});
});
const bestOverallMaterial = computed(() => {
const maxOverallPriority = Math.max(...overallPriorities.value);
const bestIndex = overallPriorities.value.indexOf(maxOverallPriority);
return materials[bestIndex];
});
</script>