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/9100| Title: | Програмне забезпечення веб каталогу книг |
| Authors: | Олексюк, Вадим Володимирович Крохмаль, Сергій Анатолійович |
| Keywords: | веб-застосунок;каталог книг;spring boot;замовлення;перегляд книги;продуктивність;java;postgresql;html;інженерія програмного забезпечення |
| Issue Date: | 2025 |
| Abstract: | Виконавець: Крохмаль Сергій Анатолійович Назва роботи: "Програмне забезпечення веб каталогу книг". Спеціальність: 121 Інженерія програмного забезпечення. Навчальний заклад: «Черкаський державний технологічний університет» м. Черкаси, 2025р. У бакалаврській роботі розглянуто процес розробки веб-застосунку для перегляду, фільтрації та замовлення книг. Метою дослідження є створення зручного клієнт-серверного інструменту, який надає користувачам доступ до каталогу книг із можливістю перегляду інформації та оформлення замовлень. Під час роботи було проаналізовано наявні рішення на ринку книжкових веб- сервісів, визначено вимоги до функціональності, інтерфейсу та архітектури системи. Розробка backend частини здійснювалася з використанням Java, Spring Boot та PostgreSQL, frontend частини – HTML, CSS та JS. Реалізовано підтримку пошуку за критеріями, перегляд деталей книг, формування замовлення. Створене програмне забезпечення відзначається стабільною роботою, сучасним дизайном та можливістю подальшого масштабування. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9100 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Крохмаль Сергій.pdf Restricted Access | 12.36 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
«бакалавра»
освітній рівень
на тему: Програмне забезпечення веб каталогу книг
Виконав: студент 4 курсу, групи ЗПЗ-2104
Спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)
Студент Крохмаль С.А.
(прізвище та ініціали)
Керівник Олексюк В.В.
(прізвище та ініціали)
Рецензент
(прізвище та ініціали)
Черкаси 2025
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
___________ Голуб С.В.
«___» _______________ 2025 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Крохмаль Сергій Анатолійович
(прізвище, ім’я, по батькові)
1. Тему проекту (роботи) «Програмне забезпечення веб каталогу книг»
Керівник проекту (роботи) Олексюк Вадим Володимирович кандидат наук, доцент
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від « 25 » лютого
2025 року №53/03/03
2. Строк подання студентом проекту (роботи) 3 червня 2025 р.
3. Вхідні дані до проекту (роботи) Технічне завдання на розробку, методичні рекомендації до
виконання бакалаврської роботи, автоматизовані системи, терміни та визначення.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ; Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань;
Розділ 2. Впровадження результатів досліджень у практику проектування програмного
забезпечення інформаційних систем;
Розділ 3. Розробка та тестування програмного забезпечення;
Висновки; Список використаних джерел; Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Слайд 1; Слайд 2; Слайд 3; Слайд 4; Слайд 5; Слайд 6; Слайд 7; Слайд 8; Слайд 9; Слайд 10;
Слайд 11; Слайд 12; Слайд 13; Слайд 14; Слайд 15; Слайд 16; Слайд 17; Слайд 18; Слайд 19;
Слайд 20; Слайд 21; Слайд 22; Слайд 23; Слайд 24.
6. Консультанти розділів проекту (роботи)
Розділ Прізвище, ініціали та посади Підпис, дата
консультанта
Завдання видав Завдання прийняв
1
2
7. Дата видачі завдання 02 грудня 2025 р.
КАЛЕНДАРНИЙ ПЛАН
№ Назва етапів випускної роботи Строк Примітки
п/п виконання
етапів
випускної
роботи
1 Постановка задачі 05.12.2024 виконано
2 Підготовка завдання 13.12.2024 виконано
3 Погодження завдання 16.12.2024 виконано
4 Затвердження завдання 19.02.2025 виконано
Основна стадія
1 Підбір матеріалів 27.02.2025 виконано
2 Аналіз шляхів вирішення поставленої задачі 04.02.2025 виконано
3 Розрахунок основних параметрів роботи 10.03.2025 виконано
4 Вибір кінцевого варіанту проектного рішення 17.03.2025 виконано
5 Оформлення первісної редакції роботи 25.03.2025 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень з керівником 31.04.2025 виконано
2 Оформлення пояснювальної записки роботи в кінцевій редакції 13.05.2025 виконано
3 Попередній захист роботи 15.05.2025 виконано
4 Затвердження роботи 31.05.2025 виконано
5 Рецензування роботи 20.05.2025 виконано
6 Захист роботи 6.06.2025
Студент _____________________ Крохмаль С.А.
(підпис) (прізвище та ініціали)
Керівник проекту (роботи) _____________________ Олексюк В.В.
(підпис) (прізвище та ініціали)
АНОТАЦІЇ
Виконавець: Крохмаль Сергій Анатолійович
Назва роботи: "Програмне забезпечення веб каталогу книг".
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет» м.
Черкаси, 2025р.
У бакалаврській роботі розглянуто процес розробки веб-застосунку для
перегляду, фільтрації та замовлення книг. Метою дослідження є створення
зручного клієнт-серверного інструменту, який надає користувачам доступ до
каталогу книг із можливістю перегляду інформації та оформлення замовлень.
Під час роботи було проаналізовано наявні рішення на ринку книжкових веб-
сервісів, визначено вимоги до функціональності, інтерфейсу та архітектури
системи. Розробка backend частини здійснювалася з використанням Java, Spring
Boot та PostgreSQL, frontend частини – HTML, CSS та JS. Реалізовано підтримку
пошуку за критеріями, перегляд деталей книг, формування замовлення. Створене
програмне забезпечення відзначається стабільною роботою, сучасним дизайном та
можливістю подальшого масштабування.
Ключові слова: веб-застосунок, каталог книг, spring boot, замовлення,
перегляд книги, продуктивність, java, postgresql, html, інженерія програмного
забезпечення.
ANNOTATIONS
Performer: Krokhmal Serhii Anatoliiovych.
The title of the work: "Software for a Web-Based Book Catalog".
Specialty: 121 Software engineering.
Educational institution: Cherkasy State Technological University, Cherkasy, 2025.
The bachelor’s thesis explores the development of a web application for browsing,
searching, and ordering books. The primary goal of the project is to create a user-friendly
client-server tool that provides users with access to a book catalog, allowing them to view
information and place orders conveniently.
The work includes an analysis of existing solutions in the book-related web service
market, as well as the definition of functional, interface, and system architecture
requirements. The backend was developed using Java, Spring Boot, and PostgreSQL,
while the frontend was implemented using HTML, CSS, and JS. The system supports
criteria-based search, book detail viewing, and order placement. The resulting software
is distinguished by its stable operation, modern interface design, and potential for future
scalability.
Keywords: web application, book catalog, Spring Boot, ordering, book viewing,
performance, Java, PostgreSQL, HTML, software engineering.
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ ........................................................................... 5
ВСТУП ............................................................................................................................. 6
РОЗДІЛ 1 ІСНУЮЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ
ЗАДАЧ ............................................................................................................................. 9
1.1 Аналіз існуючих рішень .................................................................................... 9
1.2 Існуючі методи та засоби ................................................................................... 13
1.3 Актуальні проблеми ............................................................................................ 15
1.4 Методи вирішення проблем ............................................................................... 16
1.5 Систематизація отриманих даних ...................................................................... 16
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ
СИСТЕМ ........................................................................................................................ 20
2.1 Моделювання предметної області ..................................................................... 20
2.1.1 Предметна область моделювання. Модель предметної області. Словник
предметної області ................................................................................................. 21
2.1.2 Елементи моделювання предметної області .............................................. 24
2.1.2 Робоча область моделювання: Веб-каталог книг ...................................... 25
2.2 Формування та аналіз вимог .............................................................................. 25
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника. Функціональні та нефункціональні вимоги. ....... 26
2.2.2 Формування вимог за допомогою діаграми прецедентів .......................... 28
2.3 Проектування логічної структури програмного комплексу ........................... 29
2.3.1 Діаграми класів ............................................................................................. 29
2.3.2 Діаграми пакетів ........................................................................................... 31
2.4 Архітектурне проектування ............................................................................... 33
2.4.1 Діаграма компонентів ................................................................................... 33
ЧДТУ.252304.003 ПЗ
Арк № докум. Підп. Дата
Розроб. Крохмаль С.А. ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ Лит. Лист Листів
Пров. Олексюк В. В. ВЕБ КАТАЛОГУ КНИГ 3
ФІТІС,
Н.контр. Півень О.Б. група ЗПЗ-2104
Затв. Голуб С.В.
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання ............................................................................................................. 34
2.5 Моделювання поведінки системи ...................................................................... 35
2.5.1 Діаграма діяльності ....................................................................................... 35
2.5.2 Діаграма послідовності ................................................................................ 36
2.5.3 Діаграма комунікації .................................................................................... 37
2.5.4 Діаграма скінченного автомату ................................................................... 38
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ .. 40
3.1 Розробка програмного комплексу ..................................................................... 40
3.1.1 Обґрунтування вибору засобів реалізації ................................................... 40
3.1.2 Опис структурної (функціональної) схеми ................................................ 43
3.1.3 Опис логічної схеми системи ...................................................................... 45
3.1.4 Розробка бази даних ..................................................................................... 46
3.1.5 Розробка інтерфейсу користувача ............................................................... 47
3.1.6 Опис розробки програмних компонентів ................................................... 52
3.2 Тестування системи ............................................................................................ 53
3.2.1 Модульне тестування ................................................................................... 53
3.2.2 Інтеграційне тестування ............................................................................... 54
3.2.3 Системне тестування .................................................................................... 55
3.2.4 Приймальне тестування ............................................................................... 56
3.3 Приклади впровадженого програмного комплексу ......................................... 57
ВИСНОВКИ .................................................................................................................. 60
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ..................................................................... 61
ДОДАТОК А ................................................................................................................. 63
ДОДАТОК Б .................................................................................................................. 65
ДОДАТОК В ................................................................................................................. 78
ДОДАТОК Г .................................................................................................................. 84
Ли ст
ЧДТУ.252304.003 ПЗ
Зм. Лист № документа Підпис Дата 4
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ
API – application programming interface;
Backend – серверна частина проекту;
CRUD – Create Read Update Delete;
Frontend – інтерфейсна частина проекту;
GUI – Graphical user interface;
REST – representational state transfer;
SQL – структурована мова запитів;
HTML – мова гіпертекстової розмітки;
JS – Java Script;
БД – база даних;
ПЗ – програмне забезпечення;
ЧДТУ 242304.003 ПЗ
ВСТУП
Актуальність теми
У сучасному цифровому світі інформація стала одним із найцінніших
ресурсів. Зі зростанням обсягів даних, особливо в галузі освіти, культури та
саморозвитку, виникає нагальна потреба у зручному, доступному та ефективному
інструменті для зберігання, систематизації та пошуку книжкових ресурсів.
Традиційні бібліотеки поступово переходять в онлайн-простір, що дозволяє
значно розширити аудиторію, оптимізувати процеси каталогізації, а також
забезпечити швидкий доступ до книжкових фондів з будь-якої точки світу.
Розробка веб-каталогу книг є актуальною задачею, яка поєднує в собі
вимоги зручності для користувача, функціональності, масштабованості та
надійності. Таке програмне забезпечення може бути використано як для публічних
бібліотек, освітніх закладів, видавництв, так і для особистих книжкових колекцій.
Особливо важливо забезпечити підтримку різних жанрів, авторів, рейтингів,
можливості коментування, фільтрації та пошуку, що підвищує цінність системи
для кінцевого користувача.
Таким чином, створення веб-каталогу книг є актуальним завданням, що
відповідає потребам сучасного суспільства в ефективному управлінні
інформаційними ресурсами та сприяє цифровій трансформації галузі бібліотечної
справи та книговидання.
Мета та завдання розробки
Метою роботи є розробка функціонального та зручного у використанні веб-
застосунку для створення та ведення електронного каталогу книг, який забезпечує
ефективне зберігання, пошук, фільтрацію та перегляд інформації про книжкові
ресурси.
Основні завдання розробки включають:
Проаналізувати існуючі рішення в галузі електронних каталогів книг та
визначити їх переваги й недоліки.
6
ЧДТУ 242304.003 ПЗ
Визначити функціональні та нефункціональні вимоги до веб-каталогу.
Розробити структуру бази даних для зберігання інформації про книги,
авторів, жанри, видавництва.
Реалізувати серверну частину системи з використанням сучасних засобів
веб-розробки.
Розробити клієнтський інтерфейс з урахуванням зручності користування та
адаптивного дизайну.
Забезпечити можливості пошуку, фільтрації та сортування книг за різними
критеріями.
Провести тестування системи для перевірки її працездатності та
відповідності вимогам.
Надати інструкцію з використання веб-каталогу та опис реалізованої
архітектури.
Об'єкт розробки
Процеси зберігання, обробки та представлення інформації про книжкові
ресурси в цифровому форматі.
Предмет розробки
Методи, засоби та інструменти розробки веб-застосунків для електронних
каталогів книг, включаючи структуру бази даних, серверну логіку, клієнтський
інтерфейс та механізми взаємодії користувача із системою.
Методи проектування та конструювання
Для реалізації проекту використовувалися такі методи:
- проектування інтерфейсу користувача: розробка макетів та прототипів з
використанням bootstrap фреймворку;
- розробка клієнтської частини (frontend): використання JS-бібліотеки
JQuery для створення динамічного GUI;
- розробка серверної частини: побудовано REST-API для управління
ресурсами веб каталогу (CRUD-операції над книгами, авторами,
жанрами, користувачами), реалізовано механізми автентифікації та
авторизації;
7
ЧДТУ 242304.003 ПЗ
- база даних: використання PostgreSQL бази даних для зберігання повної
інформації про книги.
Опис отриманих результатів
У ході виконання бакалаврської роботи було досягнуто низку важливих
результатів, спрямованих на створення програмного забезпечення для веб-
каталогу книг. Зокрема, спроектовано та реалізовано повноцінну реляційну базу
даних у системі управління PostgreSQL, яка охоплює всі необхідні сутності: книги,
авторів, жанри, видавництва, а також користувачів і зв’язки між цими елементами.
Серверну частину системи реалізовано у вигляді RESTful API, що забезпечує
повноцінну взаємодію з даними, включаючи створення, читання, оновлення та
видалення інформації. На клієнтській стороні було створено зручний і адаптивний
веб-інтерфейс, який дозволяє здійснювати пошук, фільтрацію та сортування книг
за різними критеріями.
Практичне значення отриманих результатів
Практичне значення полягає в можливості використання створеного веб-
каталогу книг у реальних умовах — зокрема, у публічних і приватних бібліотеках,
освітніх закладах, книжкових клубах або інтернет-магазинах. Система забезпечує
автоматизацію обліку книжкових ресурсів, спрощує процеси пошуку та
впорядкування інформації, зменшує потребу у ручному введенні даних. Крім того,
її відкритість, масштабованість і зручний інтерфейс роблять програму придатною
для подальшого розвитку та адаптації до конкретних потреб користувачів.
Особистий внесок автора
Було проведено аналіз існуючих рішень та сформульовано вимоги до
майбутньої системи. На основі цих вимог автор самостійно спроєктував структуру
бази даних, реалізував серверну логіку з підтримкою усіх необхідних CRUD-
операцій, а також налаштував систему автентифікації та авторизації. Інтерфейс
користувача створено з урахуванням сучасних принципів зручності та
адаптивності. Було реалізовано функціонал пошуку та фільтрації даних, а також
виконано тестування працездатності системи.
8
ЧДТУ 242304.003 ПЗ
РОЗДІЛ 1 ІСНУЮЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАДАЧ
У сучасному світі існує широкий спектр методів і засобів, що дозволяють
ефективно вирішувати завдання, пов’язані з розробкою веб-застосунків для
каталогізації інформації, зокрема – книжкових ресурсів. Розвиток технологій веб-
програмування, зручних фреймворків та сучасних систем управління базами
даних значно спростив створення інформаційних систем різного масштабу. У
цьому розділі розглянуто основні підходи до реалізації подібних програмних
рішень, проаналізовано популярні інструменти, архітектурні шаблони та
приклади вже існуючих реалізацій веб-каталогів. Це дозволяє визначити їхні
сильні та слабкі сторони, а також обґрунтувати вибір технологій, що будуть
застосовані у власній реалізації системи..
1.1 Аналіз існуючих рішень
На сучасному етапі розвитку інформаційних технологій створено велику
кількість веб-сервісів та програмних рішень, що дозволяють здійснювати пошук,
перегляд та управління книжковими колекціями. До найбільш популярних
прикладів таких систем можна віднести Google Books, Goodreads, Open Library, а
також локальні бібліотечні системи, такі як Koha та Calibre Web.
Google Books
Сервіс Google книги – це масштабний проєкт компанії Google (рис. 1.1), що
поєднує скановані копії книг, надані видавцями та бібліотеками, з можливістю
пошуку повного тексту, перегляду уривків, а в деяких випадках повного змісту
книги. Основною перевагою сервісу є інтеграція з іншими продуктами Google,
підтримка багатьох мов та широка база даних. Всі книжки, які відскановані
компанією Google, доступні в одному з чотирьох режимів перегляду [Error!
Reference source not found.]:
Повний перегляд. В цьому режимі доступний перегляд усіх книг, які не
захищені авторським правом або якщо автор чи видавець книги надав таке право.
Цей режим дозволяє ознайомитися з будь-якою сторінкою книжки, а для книжок,
9
ЧДТУ 242304.003 ПЗ
які знаходяться в публічному доступі, надає можливість завантажити їх у PDF
форматі.
Обмежений перегляд. У цьому режимі можна переглянути обмежену
кількість сторінок вибраної книги, якщо автор чи видавець надав таке право.
Режим перегляду «Фрагменти». У цьому режимі доступні лише короткі
бібліографічні дані про книгу та деякі фрагменти тексту – кілька речень, для
відображення ключових слів у контексті.
Рисунок 1.1 – Google Books
Водночас із зазначеними перевагами можна виділити і ряд недоліків:
можливості для редагування даних користувачем є обмеженими, а структура
каталогу є закритою.
10
ЧДТУ 242304.003 ПЗ
Goodreads
Goodreads – соціальна платформа (рис. 1.2) для любителів читання, яка
дозволяє користувачам створювати власні книжкові полиці, писати рецензії,
виставляти оцінки, вести списки прочитаного та бажаного. Система має потужну
функціональність, однак орієнтована більше на соціальні взаємодії, а не на
адміністрування або управління структурованим каталогом для організацій чи
установ.
Рисунок 1.2 – Головна сторінка Goodreads
Open Library
Open Library – відкритий проєкт Інтернет-архіву, який прагне створити веб-
сторінку для кожної книги, що будь-коли була опублікована. Проєкт має
відкритий API, базується на принципах відкритого доступу та підтримує внесення
змін спільнотою. Це дуже гнучкий інструмент, однак потребує складної інтеграції
для створення окремого власного веб-каталогу. (рис. 1.3).
11
ЧДТУ 242304.003 ПЗ
Рисунок 1.3 – Open Library
Koha
Серед локальних рішень існує програмне забезпеяння Koha (рис.1.4), що
являє собою потужну систему керування бібліотекою, яка дозволяє вести облік
примірників, обслуговувати абонентів, формувати звіти та інтегрувати каталоги
через протоколи Z39.50 або MARC.
Рисунок 1.4 – Koha
12
ЧДТУ 242304.003 ПЗ
Водночас, розгортання та налаштування Koha вимагає значних зусиль, а
інтерфейс є менш інтуїтивно зрозумілим для звичайного користувача.
Calibre Web
Calibre Web – це веб-інтерфейс для популярної програми Calibre (рис. 1.5),
що дозволяє зручно переглядати та завантажувати електронні книги з локального
серверу. Цей варіант ідеально підходить для особистих бібліотек, але має
обмеження щодо масштабування, підтримки багатьох користувачів і розширеної
фільтрації.
Рисунок 1.5 – Calibre
1.2 Існуючі методи та засоби
Розробка веб-каталогу книг потребує використання сучасних методів і
засобів, які дозволяють ефективно реалізувати зберігання, обробку та
відображення інформації про книги у зручному для користувача вигляді. Основні
підходи та інструменти для створення подібних систем можна умовно розділити
на три основні компоненти: бази даних для зберігання інформації, серверну
частину для обробки запитів і бізнес-логіки та клієнтську частину для інтерфейсу
користувача.
13
ЧДТУ 242304.003 ПЗ
Щодо баз даних, найчастіше використовуються реляційні СУБД, такі як
PostgreSQL або MySQL, які забезпечують надійне зберігання структурованих
даних та підтримують складні SQL-запити для пошуку та фільтрації. Реляційна
модель дозволяє ефективно відображати зв’язки між сутностями: книгами,
авторами, жанрами, видавництвами та користувачами. Крім того, існують
підходи, що базуються на NoSQL (наприклад, MongoDB), які дозволяють гнучко
працювати з неструктурованими або напівструктурованими даними, однак для
веб-каталогу книг реляційні бази даних залишаються переважаючими через свою
структурованість.
Для серверної частини (backend) розробники використовують мови
програмування, такі як Java (зокрема Spring Boot), Python (Django або Flask),
Node.js (Express), які дозволяють створювати RESTful API для взаємодії з
клієнтами. Вони забезпечують обробку HTTP-запитів, виконання бізнес-логіки,
обробку пошуку та фільтрації, а також реалізацію механізмів автентифікації та
авторизації. Важливим компонентом серверної частини є ORM-бібліотеки
(наприклад, Hibernate для Java або Sequelize для Node.js), які спрощують роботу з
базами даних і дозволяють уникнути написання сирого SQL-коду.
На клієнтській стороні (frontend) використовуються сучасні JavaScript-
фреймворки, такі як React, Angular або Vue.js, які забезпечують побудову
інтерактивного інтерфейсу користувача. Завдяки використанню AJAX або Fetch
API можлива динамічна взаємодія з сервером без перезавантаження сторінки, що
підвищує зручність і швидкість роботи з каталогом. Крім того, застосування CSS-
фреймворків (Bootstrap, Tailwind CSS) дозволяє швидко створювати привабливий
і адаптивний дизайн.
Серед додаткових засобів для створення веб-каталогів можна виділити
системи управління контентом (CMS), такі як WordPress або Drupal, які мають
готові плагіни для створення каталогів. Однак, вони не завжди забезпечують
необхідний рівень гнучкості та продуктивності для спеціалізованих рішень,
наприклад, каталогів книг з великою кількістю взаємопов’язаних сутностей.
14
ЧДТУ 242304.003 ПЗ
Таким чином, існуючі методи і засоби дозволяють створювати веб-каталоги
книг за допомогою поєднання реляційних баз даних, серверної логіки на основі
RESTful API та сучасного фронтенду з динамічними можливостями. У виборі
конкретних інструментів важливим є забезпечення зручності для користувача,
масштабованості системи та можливості її подальшого розвитку.
1.3 Актуальні проблеми
У сучасних інформаційних системах каталогізації літератури виникає низка
проблем, пов’язаних із забезпеченням ефективності та зручності використання
веб-каталогів книг. Однією з основних проблем є недостатня гнучкість існуючих
рішень. Багато платформ обмежують можливості користувачів у налаштуванні
власних каталогів, що створює труднощі для адаптації систем під конкретні
потреби організацій або індивідуальних користувачів. Наприклад, наявні системи,
такі як Goodreads або Google Books, не дозволяють створювати власні бази даних
книг із можливістю детального управління полями, типами зв’язків та правами
доступу.
Ще однією проблемою є складність інтеграції з іншими інформаційними
системами або ресурсами. Для багатьох бібліотек або навчальних закладів
важливим є автоматичне оновлення інформації про книги, авторів чи видавництва
з зовнішніх джерел. Водночас, відсутність відкритих інтерфейсів або підтримки
стандартів обміну даними (наприклад, MARC або Z39.50) у багатьох популярних
рішень ускладнює цей процес.
Також слід відзначити проблему зручності інтерфейсу користувача. Багато
існуючих систем мають перевантажені або недостатньо інтуїтивні інтерфейси, що
ускладнює роботу як звичайних користувачів, так і адміністраторів. Недостатня
оптимізація для мобільних пристроїв також може бути суттєвою перешкодою для
ефективного використання веб-каталогів.
Ще однією актуальною проблемою є питання безпеки та захисту
персональних даних користувачів. У багатьох веб-каталогах не передбачено
сучасних механізмів автентифікації та авторизації, що може призвести до витоку
15
ЧДТУ 242304.003 ПЗ
даних або несанкціонованого доступу. Окрім того, деякі рішення не забезпечують
достатнього рівня захисту при передачі даних між клієнтами та сервером, що
створює додаткові ризики для безпеки.
Таким чином, актуальні проблеми розробки веб-каталогу книг включають
обмежену гнучкість налаштувань, складність інтеграції з іншими системами,
недосконалий інтерфейс користувача та недостатній рівень безпеки. Ці проблеми
обґрунтовують необхідність створення власного програмного забезпечення, яке
враховуватиме зазначені недоліки та пропонуватиме сучасні рішення для
ефективного управління каталогом книг.
1.4 Методи вирішення проблем
Аналізуючи актуальні проблеми веб-каталогів книг, можна визначити низку
методів для їхнього подолання. Для підвищення гнучкості системи доцільно
використовувати сучасні реляційні СУБД, зокрема PostgreSQL, які дозволяють
ефективно моделювати взаємозв’язки між об’єктами, такими як книги, автори,
жанри та видавництва. Для забезпечення зручності використання інтерфейсу
варто впроваджувати передові фреймворки на стороні клієнта, наприклад React
Vue.js або JQuery, що забезпечують швидку реакцію інтерфейсу на дії користувача
та оптимізують відображення інформації. Для безпеки системи потрібно
впровадити надійні механізми автентифікації та авторизації, такі як JWT або
OAuth 2.0, а також використовувати HTTPS для захисту даних під час їхньої
передачі. Крім того, інтеграція з іншими системами можлива шляхом
використання RESTful API або підтримки стандартних протоколів, що дозволить
підвищити масштабованість і взаємодію з зовнішніми джерелами даних.
1.5 Систематизація отриманих даних
Для успішної реалізації проекту веб-каталогу книг необхідно здійснити
систематизацію інформації, отриманої з різноманітних джерел. Одним із
ключових етапів є аналіз технічної літератури, зокрема технічних статей,
документації, підручників та інтернет-ресурсів, присвячених створенню
16
ЧДТУ 242304.003 ПЗ
інформаційних систем та веб-каталогів. Таке вивчення дозволяє зрозуміти
поточний стан досліджень у цій галузі, включаючи методи зберігання та обробки
даних, сучасні підходи до побудови користувацьких інтерфейсів і принципи
інтеграції систем з зовнішніми сервісами.
Окрім того, дослідження популярних інтернет-ресурсів, присвячених
розробці веб-каталогів книг, дає можливість ознайомитися з практичними
аспектами створення подібних систем і новітніми технологіями, які
використовуються у цій сфері. Це допомагає знайти інноваційні рішення для
розробки проекту, визначити оптимальні архітектурні підходи та методи
забезпечення високої продуктивності системи.
Також важливим кроком є огляд існуючих рішень, таких як Google Books,
Goodreads, Open Library, а також локальних систем на кшталт Koha та Calibre Web.
Дослідження функціоналу цих платформ дозволяє зрозуміти, які можливості є
найбільш затребуваними серед користувачів. Особлива увага приділяється
інтерфейсу користувача, методам пошуку та фільтрації, рейтинговим системам,
інтеграції з іншими сервісами, а також загальній зручності використання.
Проведення порівняльного аналізу виявляє як сильні, так і слабкі сторони
існуючих рішень, що дає можливість визначити напрямки для удосконалення
власного проекту. Оцінюються аспекти продуктивності, масштабованості,
безпеки та зручності користування, що дозволяє сформувати чітке бачення
архітектури та функціональності майбутнього веб-каталогу книг.На основі аналізу
існуючих рішень та методів можна зробити висновок, що для ефективного
створення веб-каталогу книг доцільно використовувати поєднання перевірених
технологій. PostgreSQL забезпечить стабільне зберігання даних, серверна частина
на основі Spring Boot дозволить реалізувати надійне API, а фронтенд на основі
JQuery забезпечить інтуїтивно зрозумілий інтерфейс користувача. Для інтеграції
та масштабованості слід використовувати стандартизовані протоколи обміну
даними, а для забезпечення безпеки – сучасні методи захисту даних. Таким чином,
отримані дані дозволяють сформувати стратегію розробки системи, що поєднує
переваги існуючих рішень та уникає їхніх недоліків.
17
ЧДТУ 242304.003 ПЗ
Постановка задачі:
Інтерфейс користувача (UI);
- розробити зручний та інтуїтивно зрозумілий інтерфейс користувача.
Клієнтська частина (frontend);
- використати JQuery для створення динамічного інтерфейсу.
Серверна частина (backend);
- розробити серверну частину на Java з використанням SpringBoot;
База даних;
- розробка, заповнення та підтримка PostgreSQL бази даних.
Фільтрація;
- реалізувати функціонал фільтрації книг за різними жанрами.
Інформаційні сторінки;
- надати можливість перегляду детальної інформації для обраної книги.
- надати можливість перегляду детальної інформації про автора книги.
Тестування та оптимізація;
- провести тестування та оптимізацію додатку.
18
ЧДТУ 242304.003 ПЗ
Висновок до розділу 1
У першому розділі було проведено аналіз існуючих рішень для створення
веб-каталогів книг. Були розглянуті існуючі рішення як Google Books, Goodreads,
Open Library а також локальні бібліотечні системи, такі як Koha та Calibre Web. На
основі аналізу можна зробити висновок, що більшість існуючих рішень або
занадто складні для розгортання в умовах малого проєкту, або навпаки – мають
надто обмежену функціональність. У зв’язку з цим виникає потреба у створенні
власного веб-застосунку, який поєднує в собі простоту використання, гнучкість
структури, можливість адміністрування та ефективну взаємодію з користувачем.
Розробка такого програмного забезпечення дозволить краще задовольнити вимоги
користувачів, а також надати базу для подальшого розвитку системи.
Було систематизовано інформацію про сучасні методи та засоби вирішення
цих проблем, що дозволяє визначити оптимальні інструменти для розробки. За
допомогою сучасних технологій, таких як JQuery для клієнтської частини та
SpringBoot для серверної, планується створення зручного та функціонального веб-
додатку, який дозволить користувачам легко шукати, фільтрувати та знаходити
детальну інформацію про книги.
Сформульована постановка задачі окреслює основні вимоги до майбутнього
веб-застосунку, який забезпечить ефективне управління каталогом книг, зручну
взаємодію з користувачем та можливість подальшого розвитку системи.
19
ЧДТУ 242304.003 ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У
ПРАКТИКУ ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ
У сучасному цифровому середовищі, на тлі стрімкого розвитку
інформаційних технологій і зростання попиту на онлайн-ресурси для доступу до
літератури, користувачі все частіше шукають зручні, функціональні та
персоналізовані інструменти для зберігання, пошуку й організації книжкових
колекцій. З іншого боку, розробники прагнуть створювати конкурентоспроможні
рішення, які відповідають актуальним потребам як індивідуальних читачів, так і
бібліотек, навчальних закладів і видавництв.
Відповідно до цих потреб, метою цього проекту є розробка веб-каталогу
книг, який забезпечить користувачам зручний доступ до детальної інформації про
видання, авторів, жанри та рейтинги, а також можливість здійснювати пошук,
фільтрацію та формування власних списків для читання.
У цьому розділі буде розглянуто процес впровадження результатів
дослідження в практичну реалізацію програмного забезпечення інформаційної
системи – веб-каталогу книг. Детально описуються основні етапи розробки,
обґрунтовано вибір технологій і методів, а також окреслено потенційні напрямки
подальшого вдосконалення і масштабування програмного продукту.
2.1 Моделювання предметної області
На початковому етапі проєктування веб-каталогу книг важливо чітко
сформулювати структуру предметної області, визначити її основні сутності, їхні
властивості та взаємозв’язки. Моделювання предметної області дозволяє перейти
від абстрактного розуміння функціонування системи до формалізованої
структури, що є основою для створення бази даних і логіки програмного
забезпечення.
20
ЧДТУ 242304.003 ПЗ
Основними об’єктами предметної області є книга, автор, жанр, видавництво,
користувач. Кожна книга має унікальні атрибути, такі як назва, рік видання, опис,
ISBN, обкладинка, а також зв’язки з одним або кількома авторами та жанрами.
Один автор може бути пов’язаний із багатьма книгами, що вказує на зв’язок типу
«один-до-багатьох». Те саме стосується жанрів та видавництв.
Розглянемо основні сутності предметної області, вони складаються з таких
елементів:
- Книга: основна сутність системи, яка містить інформацію про конкретне
видання;
- Жанр: тематична категорія, до якої належить книга;
- Видавництво: організація, яка опублікувала книгу;
- Автор: особа, яка є автором однієї чи кількох книг;
- Користувач: особи, що взаємодіють із системою.
Під час розробки будуть детально вивчатися кожна з цих сутностей, а також
визначатися додаткові атрибути та характеристики для забезпечення повного
функціоналу продукту.
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області
Предметна область моделювання веб каталогу книг охоплює інформацію
про книги, жанри та авторів. Кожна з цих сутностей має свої унікальні атрибути,
що дозволяє систематизувати і зберігати різноманітні дані, пов'язані з книгами.
Модель предметної області
Нижче наведено опис основних сутностей моделі предметної області:
- Книга – центральна сутність каталогу, що містить основну інформацію
про твори.
- Жанр – категорія, що класифікує книги за певними загальними
характеристиками та стилістичними особливостями.
- Автор – особа, якій належать права власності на видання.
21
ЧДТУ 242304.003 ПЗ
- Видавництво – організація яка бере на себе відповідальність за публікаю
твору.
- Користувач – особа зацікавлена в літературних творах.
Реалізовано графічне відображення предметної області (рис 2.1).
Користувач
Переглядає веб
Книга каталог книг
належить до
Ж анр певного Книга Автор
жанру
Код Назва Ім’я
Назва Опис Прізвище
Опис Обкла динка Країна
Ціна Фото
Книгу видає
певне Книга
видавництво Видав ництво належить
1+ автору
Назва
Країна
Адреса
Рисунок 2.1 – Модель предметної області
Створено словник предметної області:
1. Сутність: Книга
Атрибути сутності:
- id: Унікальний ідентифікатор книги.
- title: Назва книги.
- description: Опис або анотація.
22
ЧДТУ 242304.003 ПЗ
- isbn: Міжнародний стандартний книжковий номер.
- publication_year: Рік видання.
- cover_url: Посилання на зображення обкладинки.
- publisher_id: Зовнішній ключ на видавництво.
2. Сутність: Автор
Атрибути:
- id: Унікальний ідентифікатор автора.
- first_name: Ім’я автора.
- last_name: Прізвище автора.
- country: Країна походження автора.
3. Сутність: Жанр
Атрибути:
- id: Унікальний ідентифікатор жанру.
- name: Назва жанру.
- description: Короткий опис жанру.
4. Сутність: Видавництво
Атрибути:
- id: Унікальний ідентифікатор видавництва.
- name: Назва видавництва.
- country: Країна видавництва.
4. Сутність: Користувач
Атрибути:
- id: Унікальний ідентифікатор користувача.
- login: ім’я користувача.
- password: пароль.
23
ЧДТУ 242304.003 ПЗ
2.1.2 Елементи моделювання предметної області
Для побудови всіх UML діаграм було використано певний набір графічних
елементів. Даний набір значною мірою полегшує розуміння вимог до
розроблюваного веб каталогу книг.
Нижче наведені в таблиці 2.1 елементи моделювання, які взято з методичних
вказівок до кваліфікаційної роботи бакалавра [17].
Таблиця 2.1
Елементи моделювання
Графічний символ Назва елемента
Дійова особа (користувач)
Варіант використання
Компонент
Вузол
Стан
Об’єкт
Клас
Лінія життя, фокус управління
Початковий та кінцевий стан
Відношення асоціації
Відношення залежності
Виклик
24
ЧДТУ 242304.003 ПЗ
2.1.2 Робоча область моделювання: Веб-каталог книг
1 Вхід;
- дозволити користувачам переглядати каталог книг без необхідності
створення облікового запису;
2 Каталог книг;
- відображати список книг разом із відповідними жанрами, обкладинками
та коротким описом.
- забезпечити можливість перегляду детальної інформації про кожну
книгу (опис, автор(и), рік видання, видавництво, ISBN тощо).
3 Жанри;
- дозволити користувачам переглядати книги відповідно до обраних ними
жанрів.
4 Автори та видавництва;
- Надати можливість перегляду інформації про автора книги (список
інших творів).
- відображати інформацію про видавництво, яке опублікувало книгу, у
відповідному розділі детальної інформації;
2.2 Формування та аналіз вимог
Формування та аналіз вимог для веб-каталогу книг є ключовим етапом у
процесі розробки програмного забезпечення. Цей етап передбачає детальне
вивчення потреб користувачів та визначення функціональних та
нефункціональних вимог до системи.
В даному розділі розглянемо процес формування та аналізу вимог для веб-
каталогу книг. Дослідимо потреби користувачів, визначимо основні функції та
характеристики системи, а також обговоримо основні аспекти, що впливають на її
успішну реалізацію.
Мета цього пункту полягає в тому, щоб визначити та описати вимоги до веб-
каталогу книг з точки зору його користувачів, функціональності та технічних
25
ЧДТУ 242304.003 ПЗ
характеристик. Це дозволить нам зрозуміти, як система повинна працювати та які
функції вона має виконувати для задоволення потреб своїх користувачів.
Відповідно до цього, даний підрозділ буде включати аналіз потреб
користувачів, опис функціональних та нефункціональних вимог, а також критерії
прийнятності системи.
Його результатом буде опис вимог до веб-каталогу книг, який буде
використовуватися як основа для подальшої розробки та тестування системи.
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника. Функціональні та нефункціональні вимоги.
Формування вимог до ПЗ:
- операційна система: Windows 8+, macOS 12+ або розповсюджений
дистрибутив Linux;
- процесор: Intel Core i3 або еквівалентний AMD;
- оперативна пам'ять: Мінімум 4 ГБ RAM;
- веб-браузер: Остання версія веб-браузера, Google Chrome, Mozilla
Firefox, Microsoft Edge або Safari;
- інтернет-з'єднання: Швидкість з'єднання не менше 5 Мбіт/с для
нормальної роботи веб-сайту.
Первинні вимоги:
1 каталог книг: система повинна надавати можливість перегляду каталогу
книг з різних платформ;
2 пошук: користувач повинен мати можливість зручного пошуку книги;
3 детальна інформація про книгу: для кожної книги повинна бути доступна
детальна інформація, включаючи опис, зображення, видавництво тощо;
4 актуалізація інформації: адміністратор системи повинен оновлювати
інформацію про новинки книг з інтернет-джерел.
Детальні вимоги:
1 вхід: система повинна забезпечити можливість входу користувачів без
авторизації;
26
ЧДТУ 242304.003 ПЗ
2 пошук: система повинна мати можливість пошуку;
3 адаптивність: система повинна бути оптимізована для використання на
мобільних пристроях з різних платформ.
Функціональні вимоги:
1 Вхід користувача:
Система повинна надавати можливість входу для користувачів, без введення
даних для автентифікації.
2 Перегляд каталогу книг:
Система надає можливість переглядати список книг разом з їхніми назвами,
описом, жанром та обкладенкою.
3 Детальна інформація про книгу:
Користувачам має можливість переглядати детальну інформацію про кожну
книгу.
4 Пошук:
Користувачі повинні мати можливість пошуку книг за різними критеріями.
Нефункціональні вимоги:
1 Безпека даних:
Система повинна забезпечувати захист, конфіденційність та цілісність
даних;
2 Швидкодія:
Система повинна бути швидкою та ефективною у відгуку на запити
користувачів.
3 Масштабованість:
Система повинна бути масштабованою, щоб витримувати велику кількість
користувачів та великі об'єми даних;
Архітектура системи повинна бути гнучкою для легкої розширюваності
функціоналу.
4 Крос-платформеність:
Веб-каталог повинен бути сумісним з різними веб-переглядачами та
операційними системами;
27
ЧДТУ 242304.003 ПЗ
Відображення інтерфейсу повинно бути адаптивним для різних типів
пристроїв та розмірів екранів.
Вимоги замовника:
- дизайн інтерфейсу: Створення дизайну зручного та привабливого
інтерфейсу.
- алгоритми та технології: Використання алгоритмів та новітніх
технологій, які раніше не були застосовані у подібних продуктах, для
забезпечення унікальних можливостей та переваг.
2.2.2 Формування вимог за допомогою діаграми прецедентів
Формуванням вимог за допомогою діаграм прецедентів спочатку
визначаються основні взаємодії між користувачами (акторами) та системою. Вона
допомагає ідентифікувати функціональність системи та вимоги до неї. Ось
текстовий опис формування вимог на основі діаграми прецедентів:
1 Актори:
- гравець: кінцевий користувач, який взаємодіє з каталогом книг.
2 Прецеденти:
- Перегляд каталогу книг: користувач може переглядати загальний
список книг;
- перегляд детальної інформації: користувач може переглядати
детальну інформацію про кожну книгу веб каталогу, включаючи
опис, автора тощо;
- пошук: гравець може виконувати пошук книг за різними критеріями
такими як назва, опис, тощо.
3 Взаємодія:
- гравець використовує головне меню для навігації, вибір книг для
«Перегляду детальної інформації» та введення в рядок пошуку
параметру для виконання «Пошук» при взаємодії з системою
каталогу книг.
На рисунку 2.2 представлено діаграму прецендентів.
28
ЧДТУ 242304.003 ПЗ
Рисунок 2.2 – Діаграма прецидентів взаємодія з каталогом
2.3 Проектування логічної структури програмного комплексу
Проектування логічної структури програмного комплексу є ключовим
етапом у розробці будь-якого програмного забезпечення, включаючи веб-додатки.
Цей етап передбачає розробку архітектурної концепції системи та визначення
взаємозв'язків між її складовими елементами.
Метою даного процесу є створення ефективної та логічної структури веб-
каталогу книг, що дозволить забезпечити високу продуктивність,
масштабованість та надійність. В процесі проектування визначаються основні
компоненти та їх взаємодія, а також розробляються схеми баз даних та логічні
алгоритми роботи системи.
У даному вступі розглянемо ключові аспекти проектування логічної
структури програмного комплексу веб каталогу книг. Зокрема, буде розглянуто
визначення діаграми та зв’язки між ними.
2.3.1 Діаграми класів
Діаграми класів для веб-каталогу книг зображена на рис. 2.3, що відображає
ключові сутності системи та їхні взаємозв'язки.
29
ЧДТУ 242304.003 ПЗ
Рисунок 2.3 – Діаграма класів веб-каталогу книг
Побудована діаграма класів описує чотири основні класи: Book, Author,
Genre та Publisher. Центральним елементом є клас Book, який представляє собою
сутність книги зі всіма ключовими атрибутами: назва, зображення обкладинки,
ціна та опис. Книга пов’язана із трьома додатковими об’єктами, що представляють
її змістовне та контекстуальне оточення.
Клас Author містить дані про автора книги – його ім’я, прізвище,
національність, рік народження та біографічну довідку. У контексті цієї моделі
один автор може бути пов’язаний з кількома книгами, однак у поточній реалізації
зв’язок реалізовано як один-до-одного з об’єктом Book.
30
ЧДТУ 242304.003 ПЗ
Клас Genre описує жанрову приналежність книги і включає її назву та опис.
Така структура дозволяє класифікувати книги за тематичними напрямками й
забезпечує можливість фільтрації або сортування книжкового каталогу за
інтересами читача.
Окремий клас Publisher відповідає за збереження інформації про
видавництво. Він включає такі властивості, як назва організації, країна, рік
заснування та посилання на вебсайт. Цей клас допомагає відокремити
комерційний та логістичний аспект від змістового.
Зв’язки між класами реалізовано у вигляді агрегацій – книга включає
об’єкти автора, жанру та видавництва як незалежні сутності. Така структура
сприяє гнучкості в моделюванні даних і дозволяє масштабувати систему у разі
потреби.
2.3.2 Діаграми пакетів
Дана діаграма пакетів, що зображена на рис. 2.4, демонструє модульну
організацію системи каталогу книг відповідно до принципу розділення
відповідальностей. У структурі виділено три основні пакети: Controller, Repository
та Model, кожен з яких виконує окрему функціональну роль у додатку.
Пакет Controller містить елемент BookController, який відповідає за обробку
запитів користувача. Це вхідна точка взаємодії з додатком, через яку здійснюється
виклик бізнес-логіки. Контролер покладається на репозиторій для доступу до
даних.
Пакет Repository представлений класом BookRepository, який виступає
посередником між контролером і моделями. Він реалізує доступ до збережених
даних, здійснює запити, фільтрацію й оновлення. Таким чином, уся логіка роботи
з джерелами даних інкапсульована в цьому пакеті.
31
ЧДТУ 242304.003 ПЗ
У пакеті Model зосереджено доменні сутності: Book, Author, Genre і
Publisher. Ці класи визначають структуру збережених даних та їх взаємозв’язки.
Вони не містять логіки доступу до даних або обробки запитів, а лише описують
предметну область системи.
Взаємозв’язки між пакетами позначено стрілками з підписами «use», що
вказує на напрямок залежностей: BookController використовує BookRepository, а
той, у свою чергу, оперує моделями. Така побудова забезпечує низький рівень
зв’язності між модулями та високу гнучкість архітектури, що дозволяє
масштабувати систему без порушення її цілісності.
Рисунок 2.4 – Діаграма пакетів веб каталогу книг
32
ЧДТУ 242304.003 ПЗ
2.4 Архітектурне проектування
Для опису архітектурного проєктування більш детальніше розглянемо
діаграми: діаграма компонентів, розгортання програмної системи на апаратних
засобах та діаграму розгортання.
2.4.1 Діаграма компонентів
Діаграма компонентів UML описує високорівневу структуру системи,
показуючи її основні компоненти і взаємодію між ними. Для веб каталогу книг, де
користувач заходить на сайт і взаємодіє з різними елементами, такими як книги та
детальною інформацією про них. Діаграма компонентів матиме представлення
зображене на рисунку 2.5.
Рисунок 2.5 – Діаграма компонентів веб каталогу книг
33
ЧДТУ 242304.003 ПЗ
При формуванні запиту користування на отримання необхідного переліку
книг, наша система буде формувати компонент книги та за допомогою принципу
IoC, даний компонент буде включати в себе залежні дані, такі як жанри, автор та
видавництво.
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
На рисунку 2.6 зображено UML діаграму розгортання.
Рисунок 2.6 – Діаграма розгортання
У центрі цієї структури – сервер додатку, на якому розгорнуто Spring Boot
застосунок. Це основна логіка бекенду, що відповідає за обробку HTTP-запитів,
реалізацію бізнес-процесів і зв’язок із базою даних. Цей компонент безпосередньо
підключається до PostgreSQL-сервера, що розташований на тому ж хості та
забезпечує збереження та вибірку даних.
На іншому боці знаходиться клієнтський браузер користувача, де
виконується фронтенд – HTML/CSS/JavaScript-файли, які отримуються з окремого
34
ЧДТУ 242304.003 ПЗ
фронтенд-сервера. Взаємодія між браузером і бекендом здійснюється через HTTP-
з’єднання, REST API.
У діаграмі кожен вузол представляє фізичний або віртуальний пристрій.
Компоненти (наприклад, Spring Boot App або PostgreSQL) розгорнуті в межах цих
вузлів. Стрілки між вузлами демонструють мережеві з’єднання та напрямки
обміну даними. Така модель забезпечує гнучкість, розділення відповідальностей
та масштабованість..
2.5 Моделювання поведінки системи
Даний підрозділ присвячений опису моделювання поведінки системи за
допомогою таких діаграм: діаграма діяльності, діаграма комунікації, діаграма
скінченного автомату.
2.5.1 Діаграма діяльності
На рисунку 2.7 зображена діаграма діяльності, яка демонструє як будуть
відбуватися дії у веб каталозі книг. Діаграма діяльності моделює логіку роботи
користувача із системою каталогізації книг. Вона починається з ініціалізації
процесу – відкриття веб каталогу. Користувачу відображається загальний список
книг доступних в каталозі. Далі користувач може здійснювати пошук книги, після
чого система перевіряє наявність результатів. Якщо збігів немає, користувача
повідомляють про це. Якщо результати є – він отримує список і може вибрати
конкретну книгу для перегляду деталей.
Після перегляду інформації про книгу користувач має декілька варіантів:
додати її до корзини, повернутися до пошуку або завершити роботу із системою.
Діаграма містить умовні гілки (розгалуження) та синхронізаційні вузли, що
дозволяє відобразити альтернативні сценарії поведінки користувача. Це
забезпечує чітке уявлення про послідовність дій і гнучкість у прийнятті рішень у
межах процесу.
35
ЧДТУ 242304.003 ПЗ
Рисунок 2.7 – Діаграма діяльності
2.5.2 Діаграма послідовності
Діаграма послідовності (рис. 2.8) ілюструє типовий сценарій пошуку книг за
критерієм у вебзастосунку. Взаємодія починається з ініціації запиту користувачем
через інтерфейс, який передає параметри пошуку до контролера (BookController).
Контролер делегує обробку запиту сервісному шару (BookService), який, у свою
чергу, звертається до репозиторію (BookRepository) для доступу до даних.
Репозиторій формує SQL-запит на основі критерію та надсилає його до бази
даних (PostgreSQL). Після виконання запиту результати передаються назад по
ланцюгу: спочатку до репозиторію, потім сервісу, контролеру і, зрештою, клієнту.
Така послідовність забезпечує чітке розділення відповідальностей, гнучкість і
підтримку MVC-архітектури, характерної для проєктів Spring Boot.
36
ЧДТУ 242304.003 ПЗ
Рисунок 2.8 – Діаграма послідовності
2.5.3 Діаграма комунікації
Діаграма зображена на рисунку 2.9 демонструю як буде комунікувати між
собою користувач, інтерфейс та сервер при обрані книги для отримання детальної
інформації про неї. Для початку користувач на головній сторінці обирає книгу, що
його цікавлять, після чого йде запит на сервер із вказаними ідентифікатором книги
після чого користувач отримує результат пошуку із сервера.
37
ЧДТУ 242304.003 ПЗ
Рисунок 2.9 – Діаграма комунікації в каталозі книг
2.5.4 Діаграма скінченного автомату
Діаграма скінченного автомату, що представлена на рисунку 2.10
демонструє як буде виконуватись фільтрація та пошук книг в каталозі. В
результаті пошуку і фільтрації стоїть умова для відображення результатів, якщо
даним критеріям відповідає хоча б одна фікнига. В іншому випадку, користувач
отримує відповідне повідомлення, що за його критеріями книги не знайдено.
Рисунок 2.10 – Діаграма скінченного автомату
Висновок до розділу 2
У другому розділі було здійснено впровадження результатів дослідження
для проєктування інформаційної системи веб-каталогу книг, яка відповідає
сучасним вимогам до функціональності, зручності користування та
масштабованості. У рамках розділу було виконано моделювання предметної
38
ЧДТУ 242304.003 ПЗ
області, що дозволило формалізувати основні сутності та їхні взаємозв’язки в
системі.
Також визначено вимоги до програмного забезпечення, які охоплюють
функціональні й нефункціональні аспекти, включаючи доступність, безпеку та
інтеграційні можливості. Розроблено структуру програмного комплексу з
побудовою діаграм класів і пакетів, що забезпечує логічну організацію модулів і
сприяє підтримуваності коду.
Архітектурне проєктування окреслило складові компоненти майбутньої
системи та способи її розгортання на апаратних засобах, включаючи серверну
частину, клієнтський інтерфейс і базу даних. Моделювання поведінки системи
проведено з використанням діаграм діяльності, послідовності, комунікації та
скінченного автомату, що дозволило проілюструвати логіку взаємодії між
користувачем і системою на різних етапах її функціонування.
Зазначені результати становлять основу для реалізації веб-каталогу книг і
слугують проєктною документацією, необхідною для подальшої розробки
програмного продукту.
39
ЧДТУ 242304.003 ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
3.1.1 Обґрунтування вибору засобів реалізації
Для створення клієнтської частини веб каталогу книг обрані засоби
реалізації включають HTML, CSS, JavaScript і JQuery. Нижче наведено
обґрунтування вибору кожного з цих інструментів.
HTML (HyperText Markup Language)
Структурування контенту: HTML є основною мовою розмітки для
створення структури веб-сторінок. Вона дозволяє визначати різні елементи
сторінки, такі як заголовки, параграфи, зображення, форми та інші елементи [21].
Семантична розмітка: Використання семантичних тегів (наприклад,
<header>, <nav>, <article>, <section>) покращує доступність веб-сторінок і
полегшує розуміння коду як для розробників, так і для пошукових систем.
Поширеність і підтримка: HTML підтримується всіма веб-браузерами і має
широкий спектр інструментів та бібліотек для розробки.
CSS (Cascading Style Sheets)
Стилізація сторінок: CSS використовується для опису вигляду HTML-
документів, включаючи кольори, шрифти, розміри та розташування елементів на
сторінці. Це дозволяє розділяти структуру та презентацію контенту [22].
Адаптивний дизайн: CSS забезпечує можливість створення адаптивного
дизайну, який коректно відображається на різних пристроях (мобільні телефони,
планшети, десктопи) за допомогою медіа-запитів.
Візуальні ефекти: CSS3 додає можливості для створення анімацій та
переходів, що покращує користувацький досвід.
JavaScript
Інтерактивність: JavaScript дозволяє створювати динамічні та інтерактивні
елементи на веб-сторінках, такі як випадаючі меню, слайдери, форми з валідацією
в реальному часі тощо.
40
ЧДТУ 242304.003 ПЗ
Маніпуляція DOM: JavaScript забезпечує можливість маніпуляції з
Document Object Model (DOM), що дозволяє змінювати структуру, стиль і вміст
веб-сторінок після їх завантаження.
API інтеграція: JavaScript дозволяє легко інтегрувати сторонні API, що
розширює функціональність веб-додатку (наприклад, отримання даних через
AJAX-запити).
Бібліотека jQuery
Спрощення JavaScript: jQuery – це бібліотека JavaScript, яка спрощує роботу
з DOM, обробкою подій, анімаціями та AJAX-запитами. Вона дозволяє писати
менше коду для досягнення тієї ж функціональності, що й чистий JavaScript.
Кросбраузерна сумісність: jQuery абстрагує багато проблем, пов'язаних з
кросбраузерною сумісністю, забезпечуючи коректну роботу коду у всіх сучасних
веб-браузерах.
Плагіни: jQuery має велику кількість плагінів, які легко інтегруються і
додають додаткові функції до веб-додатку (наприклад, слайдери, модальні вікна,
дата-пікери).
Вибір HTML, CSS, JavaScript та jQuery для створення клієнтської частини
веб каталогу книг обґрунтований їхніми перевагами в структуризації контенту,
стилізації, додаванні інтерактивності та спрощенні роботи з JavaScript. Ці
інструменти забезпечують створення сучасного, зручного та функціонального
веб-додатку, який відповідає вимогам користувачів і стандартам веб-розробки.
Для реалізації серверної частини веб каталогу книг були обрані Java, Spring
Boot та PostgreSQL. Нижче наведено обґрунтування вибору кожного з цих
інструментів.
Java Spring Boot
Продуктивність та надійність: Java – одна з найпоширеніших мов
програмування для розробки серверних додатків завдяки своїй продуктивності,
надійності та масштабованості. Вона добре підходить для обробки великих обсягів
даних і високих навантажень [1].
41
ЧДТУ 242304.003 ПЗ
Швидкий старт та зручність: Spring Boot значно спрощує розробку на основі
фреймворку Spring, дозволяючи швидко створювати готові до використання
додатки з мінімальними зусиллями на конфігурацію. Вбудовані засоби
автоконфігурації та залежностей забезпечують швидкий старт проєкту.
Модульність та масштабованість: Spring Boot підтримує модульну
архітектуру, що дозволяє легко масштабувати додаток за необхідності. Це
досягається завдяки використанню таких компонентів як Spring Data, Spring
Security, Spring MVC та інші [9].
Безпека: Spring Security є потужним інструментом для забезпечення безпеки
додатків. Він забезпечує захист від основних загроз веб-безпеки (автентифікація,
авторизація, захист від CSRF, XSS та інші).
Інтеграція з іншими технологіями: Spring Boot забезпечує легку інтеграцію
з різними базами даних, сторонніми сервісами та API, що робить його
універсальним вибором для створення веб-додатків.
PostgreSQL
Відкритий код та безкоштовність: PostgreSQL є системою управління
базами даних з відкритим вихідним кодом, що дозволяє використовувати її
безкоштовно для будь-яких проектів, включаючи комерційні.
Надійність та стабільність: PostgreSQL відомий своєю надійністю та
стабільністю. Він має вбудовані механізми для забезпечення цілісності даних,
підтримує транзакції та забезпечує високу доступність даних.
Підтримка складних запитів та розширень: PostgreSQL підтримує складні
SQL-запити, зокрема запити з використанням підзапитів, функцій агрегування та
віконних функцій. Крім того, він має потужну систему розширень, що дозволяє
додавати нові функції та типи даних.
Масштабованість та продуктивність: PostgreSQL добре масштабується для
обробки великих обсягів даних і забезпечує високу продуктивність завдяки
різноманітним механізмам оптимізації запитів та індексування.
42
ЧДТУ 242304.003 ПЗ
Підтримка стандартів: PostgreSQL [20] відповідає стандартам SQL, що
забезпечує сумісність з іншими системами управління базами даних і спрощує
перенесення додатків з інших СУБД.
Інтеграція з Spring Boot: PostgreSQL легко інтегрується з Spring Boot через
Spring Data JPA, що дозволяє швидко налаштувати підключення до бази даних,
працювати з репозиторіями та здійснювати операції з даними за допомогою
об'єктно-реляційного мапування (ORM).
Вибір Java Spring Boot та PostgreSQL для створення серверної частини веб
каталогу книг обґрунтований їхніми перевагами у продуктивності, надійності,
масштабованості та безпеці. Spring Boot забезпечує швидкий старт та зручність
розробки, а PostgreSQL пропонує потужні можливості для роботи з даними. Ці
інструменти разом забезпечують створення ефективної та стійкої серверної
частини веб-додатку, що відповідає вимогам сучасної веб-розробки.
3.1.2 Опис структурної (функціональної) схеми
На рисунку 3.1 представлена структура клієнтської частини додатку.
Рисунок 3.1 – Структура клієнтської частини
Нижче (див. рис. 3.2) наведена структура проекту клієнтської частини.
43
ЧДТУ 242304.003 ПЗ
Рисунок 3.2 – Структура проекту
В даній структурі опишемо назви категорій та їх призначення:
- CSS – збереження файлів стилів проекту;
- IMG – зберігання графічних елементів;
- JS – файли клієнтських скриптів;
- ROOT – відображає головні html-файли проекту.
На рисунку 3.3 зображена структурна серверної частини, що складається
відповідно до SpringBoot підходу з контролерів (Controller) які обробляють запити
користувача, сервісів (Service Layer), що містять в собі бізнес логіку дотакту.
Репозиторіїв (Repository) та класів моделі (Model) для взаємодії з базою даних
(Database).
44
ЧДТУ 242304.003 ПЗ
Рисунок 3.3 – Структура серверної частини
3.1.3 Опис логічної схеми системи
На рисунку 3.4 зображена логічна схема веб каталогу книг.
Frontend Backend
Рисунок 3.4 – Логічнна схема системи
45
ЧДТУ 242304.003 ПЗ
Логічна структура складається з клієнтської частини (Frontend) та серверної
частини (Backend). Зв’язок між якими реалізований за допомогою http-запитів
відповіддю на які, являється JSON, стандартизований формат обміну даними по
мережі [16].
Клієнт взаємодії з інтерфейсом користувача (UI) та надсилає запити на веб
сервер, який в свою чергу обробляє їх у контролерах (Controller), використовуючи
необхідні інтерфейси сервісного шару (Service Layer), що містить бізнес логіку
додатку. В свою чергу сервісний шар комунікує з моделлю (Model) та базою даних
(DataBase), для забезпечення доступу до даних які запросив користувач. В
результаті отриманий набір даних з бази даних повертається на рівень який його
запрошував і остаточно обробляється контролером, та повертається користувачу
у JSON форматі.
3.1.4 Розробка бази даних
На рис. 3.5. зображена структура бази даних додатку, що складається із
восьми взаємозв’язаних таблиць та призначена для зберігання інформації про
книги.
Рисунок 3.5 – Модель бази даних
46
ЧДТУ 242304.003 ПЗ
Нижче опишемо структуру та ціль основних таблиць.
Структура таблиці Книги (books):
- id: Унікальний ідентифікатор книги, первинний ключ (PK).
- title: Назва книги.
- description: Короткий опис книги.
- isbn: Міжнародний стандартний книжковий номер.
- publication_year: Рік публікації.
- publisher_id: Зовнішній ключ до таблиці publishers, зовнішній ключ (FK).
- created_at: Дата додавання книги до каталогу.
Структура таблиці Автори (authors):
- id: Унікальний ідентифікатор автора.
- name: Повне ім’я автора.
- biography: Коротка біографія.
Структура таблиці Жанри (genres):
- id: Унікальний ідентифікатор жанру.
- name: Назва жанру.
Структура таблиці Видавництва (publishers):
- id: Унікальний ідентифікатор видавництва.
- name: Назва видавництва.
- country: Країна розташування.
3.1.5 Розробка інтерфейсу користувача
Після запуску каталогу, користувач може бачити головну сторінку з відео
обгоркою на задньому фоні, що зображена на рис. 3.6.
47
ЧДТУ 242304.003 ПЗ
Рисунок 3.6 – Вигляд головної сторінки каталогу книг
У верхній частині розміщено меню сайту для навігації. По середині –
основний контент у вигляді списку книг. В нижній частині знаходиться службова
інформація сайту, з дублюванням деяких пунктів навігації. Книги відображені у
вигляді карток (рис. 3.7) у верхній частині якої знаходиться обкладинка книги, під
яким назва, короткий опис та ціна на ринку. Нижче знаходиться кнопка для
додавання обраної книги до кошика.
48
ЧДТУ 242304.003 ПЗ
Рисунок 3.7 – Представлення книг у вигляді карток
Для перегляду розширеної інформації про книгу, необхідно навести на нього
вказівником миші та натиснути лівою клавішею миші, після чого з’явиться вікно
з детальною інформацією про вибрану книгу. В додатковій інформації можна
переглянути розширений опис та отримати інформацію про автора книги.
Для пошуку бажаної книги, користувачу слід у поле пошуку, яке
знаходиться у верхній правій частині головного меню, ввести критерій для
пошуку, після чого натиснути на кнопку пошуку «Search». У разі знаходження
книги по даному критерію, вона буде відображений користувачу у результатах
пошуку (рис. 3.8).
49
ЧДТУ 242304.003 ПЗ
Рисунок 3.8 – Представлення форми пошуку в каталозі книг
Розроблений додаток також володіє адаптивністю, що дозволяє ним
користуватися на мобільних пристроях, таких як планшет та телефон. Вигляд
каталогу на мобільному пристрої зображено на рис. 3.9-11.
Де зображено вигляд розгорнутого меню та порядок відображення книг у
один стовпчик, що є зручним для перегляду на телефоні з портретною орієнтацією
екрану.
Рисунок 3.9 – Мобільна адаптація головної сторінки
50
ЧДТУ 242304.003 ПЗ
Рисунок 3.10 – Мобільна адаптація сторінки про книгу
Рисунок 3.11 – Мобільна адаптація пошуку
51
ЧДТУ 242304.003 ПЗ
3.1.6 Опис розробки програмних компонентів
Модуль «Завантаження книг»
Призначення: Виконання запиту на сервер з ціллю отримання загального
списку книг.
Зв’яки з іншими компонентами:
- «Інтерфейс веб-клієнта»
- «Контролер сервера»
Особливість алгоритму:
Виконання запиту на сервер за вказаним endpoint: /api/books:
http://localhost:8080/api/books
Обробка даного запиту на сервері відбувається в контролері:
@RestController
@RequestMapping("/api/books")
@RequiredArgsConstructor
public class BookController {
private final BookService bookService;
@GetMapping
public List<Book> getAllBooks() {
return bookService.getAllBooks();
}
…
}
Повернення даних на клієнтську частину у вигляді:
[
{
"id": 1,
"title": "Clean Code",
"description": null,
"isbn": null,
"publicationYear": 2008,
"createdAt": "2025-05-22T16:41:25.519449",
"publisher": {
"id": 1,
"name": "Prentice Hall",
"country": null
},
"authors": [],
"genres": []
52
ЧДТУ 242304.003 ПЗ
},
{
"id": 2,
"title": "The Pragmatic Programmer",
"description": null,
"isbn": null,
"publicationYear": 1999,
"createdAt": "2025-05-22T16:41:25.519449",
"publisher": {
"id": 2,
"name": "Addison-Wesley",
"country": null
},
"authors": [],
"genres": []
},
…
]
Ініціалізація шаблону карток книг:
Object.entries(books).forEach(([bookId, book]) => {
if (bookId !== currentId && count < 8) {
const card = document.createElement('div');
card.className = 'product-card';
card.innerHTML = `
<img src="${book.img}" alt="${book.title} cover">
<p class="product-title">${book.title}</p>
<p class="book-list__price">${book.price}</p>
`;
card.onclick = () => {
window.location.href = `book.html?id=${bookId}`;
};
recommendationsContainer.appendChild(card);
count++;
}
});
3.2 Тестування системи
3.2.1 Модульне тестування
В таблиці 3.1 представлене тестування окремих модулів каталогу.
53
ЧДТУ 242304.003 ПЗ
Таблиця 3.1
Результат модульного тестування
№ Модулі тестування Опис Результат
1 /index.html; Головний модуль Успішно
завантаження і
відображення книг
2 /book.html?id=2 Модуль завантаження Успішно
детальної інформації
про книгу
3 /author.html? Модуль завантаження Успішно
name=Tess%20Gerritsen інформації про автора
4 renderRecommendations(currentId) Модуль формування Успішно
списку рекомендацій
5 function Модуль пошуку книг в Успішно
performSearch(searchTerm, filter) каталозі
3.2.2 Інтеграційне тестування
Наступним кроком в перевірці працездатності системи є інтеграційне
тестування. Дане тестування допомагає впевнетися, що всі компоненти системи
працюють разом коректно та без помилок, забезпечуючи цілісність та надійність
веб каталогу книг.
Інтеграційне тестування включає в себе: тестування API, бази даних,
користувацького інтерфейсу.
Перевіремо функціональність пошуку книг у веб каталозі за певним
критерієм, викорисовуючи графічний інтерфейс. Для цього задамо наступні
параметри запиту:
- URL endpoint: http://localhost:8080/index.html
- method: performSearch(searchTerm, filter)
- Parameter: searchTerm=So
В результаті виконання запиту, отримуємо успішний результат (рис. 3.12), у
вигляді списку який містить книги знайдені в каталозі за заданим критерієм.
54
ЧДТУ 242304.003 ПЗ
Рисунок 3.12 – Результати перевірки API
3.2.3 Системне тестування
Системне тестування є важливим етапом життєвого циклу розробки
програмного забезпечення, під час якого перевіряється повна інтегрована система
для оцінки її відповідності визначеним вимогам. На цьому етапі тестуються всі
компоненти системи разом (табл 3.2), щоб переконатися, що всі частини
працюють належним чином і взаємодіють коректно.
Крім перевірки функціональної коректності, системне тестування дозволяє
виявити потенційні проблеми взаємодії між модулями, затримки у відповідях,
некоректну обробку граничних значень та інші системні дефекти, які могли
залишитися непоміченими під час модульного або інтеграційного тестування.
55
ЧДТУ 242304.003 ПЗ
Таблиця 3.2
Перелік перевірених функцій системного тестування
№ Функція Опис дії Пере- Праце-
вірено здатність
1 Запуск веб каталогу Користувач при відкритті веб Так Так
каталогу має можливість
взаємодіяти з головною
сторінкою
2 Зв’язок з БД Зв'язок присутній, всі данні з Так Так
сервера отримуються.
3 Завантаження книг Дані про книги успішно Так Так
із сервера завантажуються із сервера, при
умові, що серверна частина
запущена.
4 Відображення Користувачі можуть Так Так
карток книг переглядати попередню
інформацію про книги, а саме:
обкладинку, назву, опис.
5 Пошук При виконанні пошуку, Так Так
користувачу відображаються
книги які відповідають заданим
критеріям
6 Вивід детальної При виборі книги (натисканні Так Так
інформації по ній), виводиться детальна
інформація.
Системне тестування проведено успішно, всі вимоги виконано.
3.2.4 Приймальне тестування
Одним із завершальних етапів перевірки програмного забезпечення є
приймальне тестування. Ціль даного тестування – первірка чи відповідає
розроблена система вимогам та чи готова вона до експлуатації кінцевим
користувачем.
56
ЧДТУ 242304.003 ПЗ
Після запуску системи, можна переконатися в тому, що система (рис. 3.13)
відповідає поставленим вимогам, а саме:
- має зручного та інтуїтивно зрозумілий інтерфейс користувача;
- дає можливість пошуку книг за різними параметрами;
- надає перегляд інформаційних сторінок для кожної книги.
Рисунок 3.13 – Результат роботи системи
3.3 Приклади впровадженого програмного комплексу
На рисунку 3.14 продемонстровано приклад загального вигляду
програмного комплексу, що можу бути впроваджено в роботу.
57
ЧДТУ 242304.003 ПЗ
Рисунок 3.14 – Приклад програмного комплексу
58
ЧДТУ 242304.003 ПЗ
.
Висновок до розділу 3
У третьому розділі детально описано процес розробки та тестування
програмного забезпечення веб-каталогу книг. Проведено обґрунтований вибір
засобів реалізації, зокрема мов програмування, фреймворків, системи керування
базами даних та інших інструментів, що забезпечують ефективність і надійність
розробки. Представлено структурну та логічну схему проєкту, які відображають
архітектуру програмного комплексу.
Розроблено базу даних для збереження інформації про книги, авторів,
жанри, видавництва та взаємодію користувачів із системою. Також створено
користувацький інтерфейс, що забезпечує доступ до ключових функцій системи,
таких як перегляд каталогу, пошук, фільтрація, перегляд деталей книги та
взаємодія з обліковими записами.
Після реалізації було проведено повне тестування програмного
забезпечення, включаючи модульне, інтеграційне, системне та приймальне
тестування. Результати тестування підтвердили працездатність і стабільність усіх
основних компонентів системи.
У результаті виконаної роботи продемонстровано приклад впровадженого
функціонального програмного комплексу, який успішно виконує поставлені
задачі та готовий до використання у реальних умовах.
59
ЧДТУ 242304.003 ПЗ
ВИСНОВКИ
У межах кваліфікаційної роботи бакалавра на тему «Розробка веб-каталогу
книг» було виконано комплекс завдань, спрямованих на створення
функціонального, зручного та ефективного веб-додатку для організації й
представлення книжкового контенту. Проведені дослідження, аналіз існуючих
рішень та етапи реалізації дозволили сформувати системний підхід до розробки
подібних інформаційних систем.
Результати аналізу потреб користувачів підтвердили актуальність
інтуїтивного дизайну, швидкого доступу до інформації, можливості пошуку книг,
перегляду детальної інформації про автора, видавництво та опису книги. Всі ці
вимоги було враховано на етапі проєктування системи.
Інтерфейс каталогу книг створено з урахуванням принципів UX/UI-дизайну,
що забезпечує зручну навігацію, привабливий зовнішній вигляд і позитивний
досвід користування. Функціональні можливості включають перегляд каталогу,
пошук, перегляд опису книги та біографії автора.
Система реалізована з використанням сучасних технологій, зокрема Spring
Boot для бекенду, PostgreSQL для організації надійної бази даних, а також HTML,
CSS, JavaScript для фронтенду. Оптимізація продуктивності досягнута завдяки
ефективним SQL-запитам, кешуванню та зменшенню обсягу переданих даних.
Загалом, розробка веб-каталогу книг продемонструвала ефективність
комплексного підходу, що поєднує глибокий аналіз, чітке моделювання
предметної області, продуманий дизайн, сучасну реалізацію та технічну
оптимізацію. Отриманий програмний продукт відповідає сучасним вимогам до
інформаційних систем та має потенціал до масштабування і подальшого розвитку.
60
ЧДТУ 242304.003 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 Google Books. [Електронний ресурс]. – URL: https://books.google.com/
(дата звернення: 30.05.2025)
2 Goodreads – читання, рецензії та рейтинги книг. [Електронний ресурс]. –
URL: https://www.goodreads.com/ (дата звернення: 30.05.2025)
3 Open Library – Інтернет-бібліотека з відкритим доступом. [Електронний
ресурс]. – URL: https://openlibrary.org/ (дата звернення: 30.05.2025)
4 Koha Library Software – Відкрите програмне забезпечення для бібліотек.
[Електронний ресурс]. – URL: https://koha-community.org/ (дата звернення:
01.06.2025)
5 Calibre Web – Веб-інтерфейс для керування електронною бібліотекою.
[Електронний ресурс]. – URL: https://calibre-ebook.com/ (дата звернення:
01.06.2025)
6 Лонг Д. Java в хмарі. Spring Boot, Spring Cloud, Cloud Foundry / Лонг Д.,
Бастані К.., 2019. – 624 с.
7 Гутьєррес Феліпе. Spring Boot 2: найкращі практики для професіоналів.
/ Ф. Гутьєррес, 2020. – 464 с. – (Бібліотека програміста).
8 Докука О. Практика реактивного програмування у Spring 5 / О. Докука,
І. Лозінський., 2019. – 508 с.
9 Уоллс К. Spring в дії / Крейг Уоллс., 2022. – 544 с. – (6-е вид.).
10 Вадим Станкевич. Знайомимся з Spring Framework [Електронний
ресурс]. – URL: http://www.kv.by/index2009291108.htm (дата звернення:
04.06.2024)
11 Вікіпедія. Don't repeat yourself. [Електронний ресурс]. – URL:
https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
12 Вікіпедія. Архітектура клієнт-сервер. [Електронний ресурс]. – URL:
https://uk.wikipedia.org/wiki/Клієнт-серверна_архітектура (дата звернення:
01.06.2024)
61
ЧДТУ 242304.003 ПЗ
13 Система питань і відповідей про програмування [Електронний ресурс]. –
URL: http://stackoverflow.com/ (дата звернення: 03.06.2024)
14 Керівництво по Hibernate [Електронний ресурс]. – URL:
http://www.tutorialspoint.com/hibernate/ (дата звернення: 02.06.2024)
15 Публікація по Spring 3 MVC + Spring Security + Hibernate [Електронний
ресурс]. – URL: http://habrahabr.ru/post/111102/ (дата звернення: 02.06.2024)
16 Вікіпедія. Формат даних JSON [Електронний ресурс]. – URL:
http://uk.wikipedia.org/wiki/JSON (дата звернення: 01.06.2024)
17 Методичні рекомендації до підготовки кваліфікаційної роботи бакалавра
для здобувачів вищої освіти зі спеціальності 121 «Інженерія програмного
забезпечення» усіх форм навчання [Текст] /Укл.: Голуб С.В., Заспа Г.О., Куницька
С.Ю., Півень О.Б. Катаєва Є.Ю., Салапатов В.І., Метелап В.В., Олексюк В.В.; М-
во освіти і науки України, Черкас, держ. технол. ун-т. - Черкаси: ЧДТУ, 2023. - 96
с.
18 Коул Р. Блискучий Agile. Практичний посібник для проєкт-менеджерів
із використання Agile, Scrum, Kanban / Р. Коул, Е. Скотчер. – Харьків: Фабула,
2020. – 192 с.
19 Мартін, Р. Чистий код: створення, аналіз, рефакторинг [Текст] / Р.
Мартін –., 2019 – 464 с.
20 PostgreSQL [Електронний ресурс] - Кращі практики:
https://www.e2enetworks.com/blog/best-practices-for-postgresql-database
21 HTML Tutorial W3schools. [Електронний ресурс]. – Режим доступу:
https://www.w3schools.com/html/default.asp
22 CSS Tutorial W3schools. [Електронний ресурс]. – Режим доступу:
https://www.w3schools.com/css/default.asp
62
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
______________ Голуб С.В.
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ ВЕБ КАТАЛОГУ КНИГ
Специфікація
482.ЧДТУ.25 2304.003
Листів 2
Розробник: _______________________ Крохмаль С.А.
Керівник: _______________________ Олексюк В.В.
Черкаси 2025
482.ЧДТУ.25 2304.003
Позначення Найменування Примітка
482.ЧДТУ.252304-01 12-01 Текст програми
482.ЧДТУ.252304-01 34-01 Інструкція користувачеві
482.ЧДТУ.252304-01 90-01 Графічні матеріали
ДОДАТОК Б
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ ВЕБ КАТАЛОГУ КНИГ
Текст програми
482.ЧДТУ.25 2304 12 01
Листів 13
Розробник _______________ Крохмаль С.А.
Черкаси 2025
482.ЧДТУ.24 2002 12 01
1 BACKEND ЧАСТИНА
1.1 Файл Book.java
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.JoinColumn;
import jakarta.persistence.JoinTable;
import jakarta.persistence.ManyToMany;
import jakarta.persistence.ManyToOne;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.time.LocalDateTime;
import java.util.HashSet;
import java.util.Set;
@Entity
@Table(name = "books")
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Book {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String description;
private String isbn;
private Integer publicationYear;
private LocalDateTime createdAt;
@ManyToOne
@JoinColumn(name = "publisher_id")
private Publisher publisher;
@ManyToMany
@JoinTable(name = "book_authors",
joinColumns = @JoinColumn(name = "book_id"),
inverseJoinColumns = @JoinColumn(name = "author_id"))
private Set<Author> authors = new HashSet<>();
@ManyToMany
66
482.ЧДТУ.24 2002 12 01
@JoinTable(name = "book_genres",
joinColumns = @JoinColumn(name = "book_id"),
inverseJoinColumns = @JoinColumn(name = "genre_id"))
private Set<Genre> genres = new HashSet<>();
}
1.2 Файл BookRepository.java
import com.books.books.model.Book;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface BookRepository extends JpaRepository<Book, Long> {
}
1.3 Файл BookService.java
import com.books.books.model.Book;
import com.books.books.repository.BookRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Optional;
@Service
@RequiredArgsConstructor
public class BookService {
private final BookRepository bookRepository;
public List<Book> getAllBooks() {
return bookRepository.findAll();
}
public Optional<Book> getBookById(Long id) {
return bookRepository.findById(id);
}
public Book saveBook(Book book) {
return bookRepository.save(book);
}
public Optional<Book> updateBook(Long id, Book updatedBook) {
return bookRepository.findById(id).map(book -> {
book.setTitle(updatedBook.getTitle());
67
482.ЧДТУ.24 2002 12 01
book.setDescription(updatedBook.getDescription());
book.setIsbn(updatedBook.getIsbn());
book.setPublicationYear(updatedBook.getPublicationYear());
book.setPublisher(updatedBook.getPublisher());
book.setAuthors(updatedBook.getAuthors());
book.setGenres(updatedBook.getGenres());
return bookRepository.save(book);
});
}
public boolean deleteBook(Long id) {
return bookRepository.findById(id).map(book -> {
bookRepository.delete(book);
return true;
}).orElse(false);
}
}
1.4. Файл BookController.java
import com.books.books.model.Book;
import com.books.books.service.BookService;
import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/api/books")
@RequiredArgsConstructor
public class BookController {
private final BookService bookService;
@GetMapping
public List<Book> getAllBooks() {
return bookService.getAllBooks();
}
@GetMapping("/{id}")
68
482.ЧДТУ.24 2002 12 01
public ResponseEntity<Book> getBookById(@PathVariable Long id) {
return bookService.getBookById(id)
.map(ResponseEntity::ok)
.orElse(ResponseEntity.notFound().build());
}
@PostMapping
public Book createBook(@RequestBody Book book) {
return bookService.saveBook(book);
}
@PutMapping("/{id}")
public ResponseEntity<Book> updateBook(@PathVariable Long id,
@RequestBody Book updatedBook) {
return bookService.updateBook(id, updatedBook)
.map(ResponseEntity::ok)
.orElse(ResponseEntity.notFound().build());
}
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteBook(@PathVariable Long id) {
return bookService.deleteBook(id)
? ResponseEntity.noContent().build()
: ResponseEntity.notFound().build();
}
}
2 FRONTEND ЧАСТИНА
2.1 Головна сторінка (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>book</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./cart.css">
<link rel="stylesheet" href="./burger.css">
</head>
<body class="index-page">
<header class="header">
<div class="container">
<div class="header__logo">
69
482.ЧДТУ.24 2002 12 01
<a href="index.html">
<img src="./img/logo.png" title="Каталог книг" alt="Логотип">
</a>
</div>
<nav class="header__nav">
<ul class="header__list">
<li><a href="index.html">ГОЛОВНА</a></li>
<li><a href="#books-section">КНИГИ</a></li>
<li><a href="#" id="searchBtn">ПОШУК</a></li>
</ul>
</nav>
<div class="header__right">
<a href="#!" class="cart-icon">
<img src="./img/images/shoppingbasket3_114870.png" alt="Shopping Cart">
<span class="cart-count">0</span>
</a>
<button class="burger-menu" id="burgerMenu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu">
<ul class="mobile-menu__list">
<li><a href="#" class="mobile-search-btn">SEARCH</a></li>
<li><a href="index.html">HOME</a></li>
<li><a href="#!">SHARES</a></li>
<li><a href="#books-section">BOOKS</a></li>
</ul>
</div>
</header>
<!-- Cart Menu -->
<div id="cartModal" class="cart-modal">
<div class="cart-modal__content">
<div class="cart-modal__header">
<h2>Кошик</h2>
<button class="cart-modal__close">×</button>
</div>
<div class="cart-modal__body">
<div id="cartItems" class="cart-items">
</div>
</div>
<div class="cart-modal__footer">
<div class="cart-total">
Загальна сума: <span id="cartTotal">$0.00</span>
</div>
70
482.ЧДТУ.24 2002 12 01
<button class="btn checkout-btn">Оформити замовлення</button>
</div>
</div>
</div>
<main class="main">
<section class="book-list" id="books-section">
<div class="container">
<a href="book.html?id=1" class="book-list__card">
<img src="./img/images/7_zvychok_-_kovi_cover.jpg" alt="7 звичок
високоефективних підлітків"
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">7 звичок високо-ефективних підлітків</h4>
<p class="book-list__desc">
Комплект містить: 7 звичок високоефективних підлітків Бути собою. 10
гаджетів для щастя.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">300₴</span>
<span class="book-list__price book-list__price--old">373₴</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="1"
onclick="event.preventDefault(); event.stopPropagation();">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=2" class="book-list__card">
<img src="./img/images/people_looking_for.jpg" alt="Людина в пошуках
справжнього сенсу"
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">Людина в пошуках справжнього сенсу</h4>
<p class="book-list__desc">
Віктор Франкл описує свій досвід ув’язнення у нацистських концтаборах.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">170₴</span>
<span class="book-list__price book-list__price--old">200₴</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="2">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=3" class="book-list__card">
<img src="./img/images/soft_skills.jpg" alt="Soft skills: Бути собою"
71
482.ЧДТУ.24 2002 12 01
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">Soft skills: Бути собою</h4>
<p class="book-list__desc">
Soft skills: Бути собою. Управлінські практики та психологія м'яких
навичок.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">350₴</span>
<span class="book-list__price book-list__price--old">400₴</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="3">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=4" class="book-list__card">
<img src="./img/images/go_to.webp" alt="Іди туди, де страшно. І матимеш
те, про що мрієш"
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">Іди туди, де страшно</h4>
<p class="book-list__desc">
Найбільше нам заважають жити наші страхи. Вони нагадують тигрів, які
гірко гарчать ...
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">280₴</span>
<span class="book-list__price book-list__price--old">320₴</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="4">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=5" class="book-list__card">
<img src="./img/images/The Surgeon.webp" alt="The Surgeon cover"
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">The Surgeon</h4>
<p class="book-list__desc">
The first book of «Rizzoli and Isles» series.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">$8</span>
<span class="book-list__price book-list__price--old">$10</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="5">Add to
Cart</button>
72
482.ЧДТУ.24 2002 12 01
</div>
</a>
<a href="book.html?id=6" class="book-list__card">
<img src="./img/images/Kingdom of the Wicked.webp" alt="Kingdom of the
Wicked cover" class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">Kingdom of the Wicked</h4>
<p class="book-list__desc">
The first book of «Kingdom» series.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">$8</span>
<span class="book-list__price book-list__price--old">$10</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="6">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=7" class="book-list__card">
<img src="./img/images/All Good People Here.webp" alt="All Good People
Here cover" class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">All Good People Here</h4>
<p class="book-list__desc">
Detective investigation of murder and kidnapping.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">$9</span>
<span class="book-list__price book-list__price--old">$12</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="7">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=8" class="book-list__card">
<img src="./img/images/To Save a Lost Soul.webp" alt="To Save a Lost Soul
cover" class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">To Save a Lost Soul</h4>
<p class="book-list__desc">
The third book of «Tales from the Tiarna Beo» series.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">$10</span>
<span class="book-list__price book-list__price--old">$15</span>
</div>
73
482.ЧДТУ.24 2002 12 01
<button class="btn btn--small add-to-cart" data-book-id="8">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=9" class="book-list__card">
<img src="./img/images/The Complete Witcher Series.webp" alt="The Complete
Witcher Series cover"
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">The Complete Witcher Series</h4>
<p class="book-list__desc">
All the books of «The Witcher» series.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">$41</span>
<span class="book-list__price book-list__price--old">$61</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="9">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=10" class="book-list__card">
<img src="./img/images/Nightfall.webp" alt="Nightfall cover" class="book-
list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">Nightfall</h4>
<p class="book-list__desc">
Five against one. Nowhere to run.
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">$14</span>
<span class="book-list__price book-list__price--old">$20</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="10">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=11" class="book-list__card">
<img src="./img/images/A Stranger In The House.webp" alt="A Stranger In
The House cover"
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">A Stranger In The House</h4>
<p class="book-list__desc">
The perfect house. The perfect spouse. Almost the perfect crime.
</p>
74
482.ЧДТУ.24 2002 12 01
<div class="book-list__price-wrapper">
<span class="book-list__price">$9</span>
<span class="book-list__price book-list__price--old">$12</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="11">Add to
Cart</button>
</div>
</a>
<a href="book.html?id=12" class="book-list__card">
<img src="./img/images/The Scent Of Death.webp" alt="The scent of death.
The sixth investigation cover"
class="book-list__img" />
<div class="book-list__text-wrapper">
<h4 class="book-list__title">The Scent Of Death. The Sixth
Investigation</h4>
<p class="book-list__desc">
The sixth book in the «David Hunter» series
</p>
<div class="book-list__price-wrapper">
<span class="book-list__price">$8</span>
<span class="book-list__price book-list__price--old">$12</span>
</div>
<button class="btn btn--small add-to-cart" data-book-id="12">Add to
Cart</button>
</div>
</a>
</div>
</div>
</div>
</section>
<section class="order">
<div class="container">
<img src="./img/images/The Complete Witcher Series.webp" alt=""
class="order__img">
<div class="order__text">
<h3 class="order__title">The Complete Witcher Series</h3>
<p class="order__desc">The Complete Witcher Series Box Set contains all
the 8 books: 1. The Last Wish, 2.
Sword of Destiny, 3. Blood of Elves, 4. Time of Contempt, 5. Baptism of
Fire, 6. The Tower of The Swallow,
7. The Lady of the Lake, 8. Season of Storms.</p>
<span class="book-list__price">$41</span>
<span class="book-list__price book-list__price--old">$61</span>
<a href="#!" class="btn">Order now</a>
</div>
75
482.ЧДТУ.24 2002 12 01
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__contacts">
<img src="./img/logo.png" alt="Логотип" class="footer__logo">
<a class="footer__link footer__link-mail"
href="mailto:[email protected]">[email protected]</a>
<a href="#!" class="footer__link footer__link-web">www.book-
catalog.com</a>
</div>
<div class="footer__socials">
<p class="footer__title">Social Networks</p>
<div class="footer__socials-icons">
<a class="footer__socials-link" href="#!"><img
src="./img/images/icons/socials/facebook.png" alt=""></a>
<a class="footer__socials-link" href="#!"><img
src="./img/images/icons/socials/instagram.png" alt=""></a>
<a class="footer__socials-link" href="#!"><img
src="./img/images/icons/socials/linkedin.png" alt=""></a>
<a class="footer__socials-link" href="#!"><img
src="./img/images/icons/socials/twitter.png" alt=""></a>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
<script src="cart.js"></script>
<!-- Модальне вікно пошуку -->
<div id="searchModal" class="search-modal">
<div class="search-modal__content">
<div class="search-modal__header">
<h2>Пошук книг</h2>
<button id="closeSearch" class="search-modal__close">×</button>
</div>
<div class="search-modal__body">
<div class="search-controls">
<input type="text" id="searchInput" placeholder="Введіть назву книги або
автора..." class="search-input">
<select id="searchFilter" class="search-filter">
<option value="all">Всі</option>
<option value="title">За назвою</option>
<option value="author">За автором</option>
<option value="price">За ціною</option>
76
482.ЧДТУ.24 2002 12 01
</select>
<select id="priceFilter" class="search-filter" style="display: none;">
<option value="all">Всі ціни</option>
<option value="0-5">До $5</option>
<option value="5-10">$5 - $10</option>
<option value="10-20">$10 - $20</option>
<option value="20+">Більше $20</option>
</select>
</div>
<div id="searchResults" class="search-results"></div>
</div>
</div>
</div>
</body>
</html>
77
ДОДАТОК В
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ ВЕБ КАТАЛОГУ КНИГ
Інструкція користувачеві
482.ЧДТУ.25 2304 34 01
Листів 6
Розробник _______________ Крохмаль С.А.
Черкаси 2025
482.ЧДТУ.24 2002 34 01
Після запуску каталогу, користувач може бачити головну сторінку, що
зображена на рис. В.1.
Рисунок В.1 – Вигляд головної сторінки каталогу книг
У верхній частині розміщено меню сайту для навігації. Прогорнувши
сторінку до низу, або натиснувши на відповідний пукт меню «Книги» користувачу
відображається основний контент сторінки у вигляді списку книг. В нижній
частині знаходиться службова інформація сайту, з дублюванням деяких пунктів
навігації.
Книги відображені у вигляді карток (рис. В.2) у верхній частині якої
знаходиться обкладинка книги, під яким назва та короткий опис. Нижче
знаходиться інформація про ціну та можливість додати книгу в корзину для
подальшої покупки за допомогою кнопки «Add to cart».
79
482.ЧДТУ.24 2002 34 01
Рисунок В.2 – Картки представлення книг
Для перегляду розширеної інформації про книгу, необхідно навести на
відповідну карточку з книгою (рис. В.3) вказівником миші та натиснути лівою
клавішею миші.
Рисунок В.3 – Картка обраної книг
80
482.ЧДТУ.24 2002 34 01
Після чого з’явиться нова сторінка (рис. В.4) з детальною інформацією про
вибрану книгу. В додатковій інформації можна переглянути повний опис, жанр,
рейтинг а також є можливість побачити детальну інформацію про автора книги.
Рисунок В.4 – Розширена інформація про обрану книгу
Для пошуку бажаної книги в каталозі, користувачу слід натиснути на пункт
меню «Пошук» та у поле пошуку діалогового вікна, що з’явилося, ввести критерій
для пошуку, мінімальною довжиною два символи, після чого пошук виконається
автоматично. У разі знаходження книги по даному критерію, вона буде
відображений користувачу у результатах пошуку (рис. В.5).
81
482.ЧДТУ.24 2002 34 01
Рисунок В.5 – Результат пошуку книг
Розроблений каталог також володіє адаптивністю, що дозволяє ним
користуватися на мобільних пристроях, таких як планшет та телефон. Вигляд
каталогу на мобільному пристрої зображено на рис. В.6.
82
482.ЧДТУ.24 2002 34 01
Рисунок В.6 – Мобільна адаптація каталогу
83
ДОДАТОК Г
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ ВЕБ КАТАЛОГУ КНИГ
Графічні матеріали
482.ЧДТУ.25 2304-01 90-01
Листів 7
Розробник _______________ Крохмаль С.А.
Черкаси 2025
482.ЧДТУ.25 2304 90 01
Рисунок Г.1 – Титульний слайд
Рисунок Г.2 – Вступ
85
482.ЧДТУ.25 2304 90 01
Рисунок Г.3 – Первинні та детальні вимоги
Рисунок Г.4 – Аналіз аналогів
86
482.ЧДТУ.25 2304 90 01
Рисунок Г.5 – Діаграма прецедентів
Рисунок Г.6 – Проектування логічної структури
87
482.ЧДТУ.25 2304 90 01
Рисунок Г.7 – Архітектурне проектування
Рисунок Г.8 – Моделювання поведінки системи
88
482.ЧДТУ.25 2304 90 01
Рисунок Г.9 – Моделювання поведінки системи
Рисунок Г.10 – Структурна та функціональна схема
89
482.ЧДТУ.25 2304 90 01
Рисунок Г.11 – Структура бази даних
Рисунок Г.12 – Інтерфейс користувача
90
482.ЧДТУ.25 2304 90 01
Рисунок Г.13 – Висновки
Рисунок Г.14 – Дякую за увагу
91