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/9182| Title: | Розробка веб каталогу фільмів з використанням сучасних веб технологій: дизайн, реалізація та оптимізація |
| Authors: | Салапатов, Володимир Іванович Усанов, Іван Максимович |
| Keywords: | Каталог фільмів;фільми;фільтрування;пошук фільму;Catalogue;film catalogue;films, filtering;film search |
| Issue Date: | 17-Jun-2024 |
| Abstract: | АНАТАЦІЯ
Здобувач бакалаврського рівня : Усанов Іван Максимович;
Назва кваліфікаційної роботи бакалавра: «Розробка веб каталогу фільмів з
використанням сучасних веб технологій : дизайн, реалізація та оптимізація»;
Спеціальність : 121 Інженерія програмного забезпечення ;
Навчальний заклад: Черкаський державний технологічний університет;
Місто, рік: Черкаси, 2024;
Основною ідеєю є створення зручного веб каталогу фільмів. Отримані результати беззаперечно задовольняють вимогам до системи. ABSTRACT Bachelor's degree candidate: Usanov Ivan Maksymovych; Title of the bachelor's thesis: «Development of а web catalogue of films using modern web technologies: design, implementation and optimisation»; Speciality: 121 Software engineering. Software engineering; Educational institution: Cherkasy State Technological University; City, year: Cherkasy, 2024; The main idea is to create а convenient web catalogue of films. The results obtained undoubtedly meet the requirements for the system. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9182 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Усанов Іван Максимович.pdf Restricted Access | 19.49 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
\\\l\l ''l'\ •'P 'ТІН)()<.. ' І\\Тl\ І \ІЛУ І 11 УКРЛУІ\11
Ч\ ~Ph::\l'\,\,\ tf\ ) \l •'P)t 'ЛН \ 11 ti\ ТІ •' Х \ \().) (()\ '\\(І 11 Ііг'І У І 11111 ,:1' · ит, ,:т
Ф:н,у.1t1,\\' \' 111фЩ)М ІЩі іі1111х 1' 'ХІІШІОІ ' і і,1 і систем
h:афl'Щ):\ нрс1\'РНМІЮІ'О '\:\6l''Шl'1 1 '11\tH 111\І'()М f\Т\,\ '\ ()І\n JІИ Х систем
ПОЯ l llOBAJlbHA ЗАllИСКА
до кuаліфікnційної роботи
«бакалавра»
освітні і1 рі оень
Розробка веб каталогу фільмів з використанням
сучасних веб технологій: дизайн, реалізація та оптимізація
Виконав : студент 4 курсу, групи ЗПЗ-2004
Спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовю1)
Студент Усанов І.М.
(прізвище та ініціаrо1)
Керівник Салапатов В.І .
(прі:~вище та ініціали)
Рецензент
(прі·1вище та ініціал11)
Черкаси 2024
--------------- --
поn11..: І/1\і\,\ІСІ!)1)0ІПІЯ nІШ(ОГО 1/!ІD'ШЛЬІ/ОГО заклоцу
•а1<ультет ІН ійних технологій і систем
афедра
~світній рівень бакалавр
пеціальність 121 «Інженерія програмного забезпечення»
світня програма Інженерія програмного забезпечення
ри ПЗАС, професор
бС. В .
ЗАВДАННЯ
НА КВАШФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Ус ан о в Іван Максимович
(прі.звюце, ім'я, по ба-п,кові)
Тему проекту Розробка веб каталогу фільмів з використанням сучасних веб технологій:
дизайн, реалізація та оптимізація
ері вник проекту Салапатов Володимир Іванович
(прізв~Ш(е, ім'я, по батькові, науковий С1)'пінь, вчене звання)
1тверджені наказом Черкаського державного технологічного університе~у від « 26 » лютого
)24 року №60/04
Строк подання студентом проекту .::с.З_ч.,_,,е~р""в.._.ня<.:.....:,2'""'0:2...,_4~р:..:.. .________________
Вхідю дані до проекту завдання до розробки, аналоги, рекомендації керівника проекту.
Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
ерешк умовних позначень;
стvп;
::,зділ 1. Наявні методи та засоби розв'язання поставлених завдань;
::>зділ 2. Впровадження rезультатів досліджень у практику проєктування програмного
~безпечення інформаційних систем:
і:>Зділ З . Розробка та тестування програмного забезпечення;
исновки;
писок використаних джерел;
,одатки .
. Перелік графічного матеріалу (з точним зазначенням обов' язкових робіт проекту;
исунок Г. 5 - Діаграма прецедентів :
исунок Г. 6 - Діаграма класів:
исунок Г.6 - Діаграма пакетів;
исунок Г.7 - Діаграма компонентів:
'исунок Г.7 - Діаграма розгортання:
'исунок Г.9 - Діаграма комунjкації:
1исунок Г.9 - Діаграма скінченного автомату.
г
6 . Консульнттн розділі-в проекту (роботи)
І Прізвище. ініціали та посади Підпис, дата
Розділ
консульт11нта Заодання видао Завдання rrp11 -
1 111,~!
2
...,..
І
7. Дата видачі завдання ~0=2~гр..__уд=ня~2~0=2~3_,,р~._ ______________
~
КАЛЕНДАРНИЙ ПЛАН
Строк
виконання
№
Назва етапі в випускної роботи етапів
п/п Приміт!<11
випускної
роботи
1 Постановка задачі 05.12.2023 виконано
2 Підготовка завдання 13.12.2023 виконано
з Погодження завдання 16.12.2023 виконано
4 Затвердження завдання 19.02.2024 виконано
~
Основна стадія
1 Підбір матеріалів 27.02.2024 виконано
2 Аналіз шляхів вирішення поставленої задачі 04.03.2024 виконано
3 Розрахунок основних параметрів роботи 10.03 .2024 виконано
4 Вибір кінцевого варіанrу проектного рішення 17.03 .2024 виконано
5 Оформлення первісноі' редакції роботи 25.03.2024 виконано
Заключна стадія
І Узгодження прийнятих проектних р1шень з З 1.04.2024 виконано
кер1вником
2 Оформлення пояснювальної записки роботи в 13.05 .2024 виконано
кінцевій редакції
з Попередній захист роботи 15.05.2024 виконано
4 Затвердження роботи 27.05.2024 виконано
5 р ецензування роботи 30.05.2024 виконано -
6 За хист роботи 13.06.2024 -
С-rудент Усанов І. М.
(прізвюце тn ініціtuІИ)
Керівник проекrу (роботи) Салапатов В. І .
(прізвище та ініціl\JІІІ)
j
ЛНОТЛЦІЇ
Здобувач бакаnаврського рівня : Усаноn Іван Ма1<симович;
Назва кваnіфікаційної роботи бакалаnра: «Розробка веб каталогу фільмів з
використанням сучасних веб технологій : дизайн, реалізація та оnтимізашя»;
Спеціальність : 121 Інженерія програмного забезпечення;
Навчальний заклад: Черкаський державний технологічний університет;
Місто, рік: Черкаси, 2024;
Основною ідеєю є створення зручного веб каталогу фільмів . Отримані
результати беззаперечно задовільняють вимогам до системи.
Ключові слова: Каталог фільмів, фільми, фільтрування, пошук фільму.
ABSTRACT
Bachelor's degree candidate: Usanov Ivan Maksymovych;
Title of the bachelor's thesis: «Development of а web catalogue of films usшg
modem web technologies: design, implementation and optimisation»;
Speciality: 121 Software engineering.
Software engineering;
Educational institution: Cherkasy State Technological University;
City, year: Cherkasy, 2024;
The main idea is to create а convenient web catalogнe of films . The resнlts obtained
undoubtedly meet tl1e requirements for the system.
Keywords words: Catalogнe, film catalogнe, films, filtering, film seaгch .
ЗМІСТ
ЛЕРЕЛІК УМОВНИХ ЛОЗНА ЧЕНЬ ....................................... ............................ ...... 5
В ТУП.. .... .. . . ......................... . ............ б
·········· ··· ··················· ······· ···· ·······························
РОЗДІЛ І ІСНУЮЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ 'ЯЗАННЯ ЛОСТАВЛЕНИХ
ЗАДАЧ. ......... ....... .... ................. . .... ........ 8
.. ··············· ···· ······· ··· ····· ·············· ··············· ······
1.1 Аналіз існуючих рішень ··········· · ·· · · · ···· · · ···· ·· · ·· · · ·· · ····· · · · ··· ·· ··· ·· ······ ·· ········ · ··· ····· · · · ·· 8
1.2 Існуючі методи та засоби .... ....... ... ...... ... ... ... .. ....... .. ... ... ..... .. .. ... ... .. ........ ...... .... 11
1.3 Аюуа.льні проблеми .... ...... .. ...... ....... .... ....... ........ ... .... ....... ... ...... ...... ..... .......... .. 11
1.4 Методи вирішення проблем .. .. ........ ... ... .... .... ... .. ... ........ .... .. ........ ... ... ...... ...... ... 12
1.5 Систематизація отриманих даних ... ..... .. .. ....... .. ..... .. ..... ... .. .. ......... .. ... ...... ... .... . 12
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ
СИСТЕМ ......... .. .. .. .......... .. ........ .. .... ... .... .. ...... ... ........... .. .. ... ... .... .. ... ... .......... .......... ..... 16
2 .1 Моделювання предметної області .... ...... .... ..... ...... .. ..... .. ........ .. .. .... ........ .. .. ..... 16
2.1.1 Предметна область моделювання . Модель предметної області . Словник
предметної області ....... ... .... .. ... ....... .. ....... .... ..... .. .. .. ............ .. ...... .................. ...... 17
2.1.2 Елементи моделювання предметної області .. .. ... ... .... ... .... .... ... ... .... .... ...... 19
2.1.2 Робоча область моделювання: Веб-каталог фільмів .. ........ ....... ..... .... .... .. . 20
2.2 Формування та ана.ліз вимог .. ... .. ... ... .. ... ... ...... ....... ..... ...... .... ..... .......... ............ 21
2.2.1 Формування вимог до програмного забезпечення . Первинні 1 деталью
вимоги. Вимоги замовника . Функціональні та нефункціональні вимоги . ....... 22
2.2.2 Формування вимог за допомогою д1· аграми прецедент1·в ... ...... ... ....... ... .. . 24
2.3 Проектування логічної структури програмного комплексу .................. .. . •····· 25
2 .3 . 1 д1. аграми ютас1.в .. .. ........... ......... .... ................... ...... ... ..... .... .. · ······················· 25
2.3.2 Діаграми пакетш. ... ..... ..... ..... .... ...... ...... ......... ......... ··················· ···--······· ·· ···· 27
L. __ _- т---,-т--------1
І
ЧДТУ.242002.003 ПЗ
Арк №докvм. Підп. дата
Розооб. Усанов І.М. РОЗРОБКА ВЕБ КАТАЛОГУ Лит. Лист Листів
Пnnв. Салапатов В. 1 WY ФІЛЬМІВ З ВИКОРИСТ АНН~ І І з
СУЧАСНИХ ВЕБ ТЕХНОЛОПИ:
ФІТІС.
Н.конто. ДИЗАЙН, РЕАЛІЗАЦІЯ ТА
Півень О.Б. група ЗПЗ-2004
lатв Гnnvn r ОПТИМІЗАЦІЯ
R VI \//1,/и,t,
4 Архітектурне проектування ....... .... ...... ... .. ...... .... ........................................... . 28
~.4.1 Діаграма компонентів ........... ... ....... ... .. .. .. .. ... ...... .................... ........... ......... 28
2.4.2 Розгортання програмної системи на апаратних засобах . Діаграма
розгортання ....... ..... ..... ... ..... .. ....... .. ............ ....... ... ................................. .... .. ....... .. 29
5 Моделювання повед1нки системи .. ............... .... ............. ...... ... ....... .... ....... .. ..... 3 1
2 .)~ . 1 д1· аграма ДІ. ЯЛЬНОСТІ. .... ........ . .. . .. . ..... .. .... ' .. ' ........... ' ... ... . .. . ... ' ... .. ..... . ............ . 31
2.5.2 Діаграма послідовності ..... .. ........ .... .. .. ... .............. ... ... ... ... .. ... ... .............. .... 32
2.5.3 Діаграма комунікації .. ... ... .......... ........... ..... ....... .... .... .... ..... ..... ...... ......... .... 33
2.5.4 Діаграма скінченного автомату ....... .. ..................... .... .. .......... .. ............. .. .. 33
3ДІЛ З РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ " 35
.1 Розробка програмного комплексу ... ....... ............. ... ...... ... .... .. ..... .... ...... ... ..... .... 3 5
3.1.1 Обrрунтування вибору засобів реалізації .. ... .... ..... ............ .. ..... .. ... ............ 35
3.1.2 Опис структурної (функціональної) схеми ... ...... .................................. .. .. 38
3 .1.3 Опис логічної схеми системи ...... ... ..... .... .......... .. .... .... .. ... ... ....................... 41
З .1. 4 Розробка бази даних .. ..... ...... ......... .. ...... ... .. ...... .................. ....... .. ......... ...... 41
3.1.5 Розробка інтерфейсу користувача .......... ...... .. .......... ........ .. ... .... .... .. .......... 43
3.1 .6 Опис розробки програмних компонентів .... .. .................... .. .. .. .................. 49
3.2 Тестування системи .... ... ... ... ..... ...... ... .. ............. ... .............. ...... ........ ... ........... ... 51
3.2.1 Модульне тестування .......... .... ... ..... ............ ......... ... .. ............ ......... ........... . 51
3.2.2 Інтеграційне тестування ............... .. ... .... .... .. ...... ....... ... .... ....... .. ........ .... .. .... 52
3.2.3 Системне тестування ...... ....... ...... .. ..... .. .. .... ........ ..... .. ... ..... .... .. ... ................ 53
З .2.4 Приймальне тестування .. ......... ...... ... .......... ..... ....... ... ..... .... .. ............... ..... . 55
З.З Приклади впровадженого програмного комплексу ........... ...................... ....... 56
~исновки ................. ................. .. ..... .. ....... ...... .. .. ............................. ................. ..... 58
:ПИСОК ВШ<ОРИСТ АНИХ ДЖЕРЕЛ ................................................................... 59
ЦОДАТОК А .. ............ ............... .. ..... ... .... ................................ ...... ..... ....... .. .. ... ..... .. ... 60
ДОДАТОК Б ............ ........... ............... ... ............... ..... ........... .. .... ... .................... ... ... .. .. 62
ДОДАТОК В ... .............. .. ..... ......... ... ................. ..... ....... .... ........ ............... .. ..... ............ 75
ДОДАТОК Г .... .. .. .. .... .. .... ... ....... ........ .. ... .. ......... ........... .... ..... .... ..................... .. .......... 82
Лист
ЧДТУ.242002.003 ПЗ 4
тт. .. ~... N'o nn1rv•te>П11 Пішшс Дата - ----------------------
ПЕРЕЛІК Yl\tfOBHИX ПОЗНАЧЕНЬ
:i-oпteпd - інтерфейсна частина проекту;
!acke11d - серверна частина проекту;
iQL - стру1'-турована мова запитів;
ІТМL - мова гіпертекстової розмітки;
;д - база даних;
ІЗ - програмне забезпечення;
ЧJ~ТУ 242002 .00J ПЗ
ВСТУП
А"-•УіlЛьність темн
Актуальність розробки створення програмного забезпечення (ПЗ) веб
аталоr фільмів пов 'язана з швидким розвитком індустрії, тому виникає потреба
платформа-,, які дозволяють користувачам легко знаходити інформацію про
овинки 1'.інематографії та популярні фільми, переглядати трейдери та оцінки а
:~кож зручно шукати по різним критеріям. Створення ПЗ каталогу фільмів на
азі технологій SpringBoot та JQuery сприяє задоволенню цієї потреби,
1безпечуючи зручний та ефективний доступ до бази даних фільмів.
Мета та завдання розробки
Метою розробки є програмне забезпечення інтерактивного WЕВ-додатку
аталог фільмів, який забезпечить користувачів усією необхідною інформацією
ля пошуку та вибору для перегляду.
Основні завдаю-1я розробки включають:
розробка зручного та інтуїтивно зрозумілого інтерфейсу користувача;
- реалізація функціоналу фільтрації фільмів за різними параметрами;
перегляд інформаційних сторінок для кожного фільму;
пошук фільмів за різними параметрами;
використати отримані результати в практику створення інформаційних
систем .
Об'єкт розробки
Об'єктом розробки є процес створення ПЗ інформаційної технології веб
аталогу фільмів, що забезпечує користувачів інформацією про різні фільми.
Предмет розробки
Предметом розробки є процес проектування програмного забезпечення
VЕВ-каталогу фільмів .
Методи проектування та •~онструювання
Для реалізації проекту використовувалися такі методи :
- проектування інтерфейсу користувача: розробка макетів та прототипів з
6
ЧДТУ 242002.003 ПЗ
ви1':орнстанням bootst1·ap фреймuор1<у ;
- розробка клієнтської частини (fi·oпteнd): використання бібліотеки
JQue1y для створення динамічного інтерфейсу користувача;
- розробка серверної частини: використання Java та SpringBoot для
створення серверної частини додатку, забезпечуючи обробку запитів та
управління базою даних;
база даних: використання бази даних для зберігання інформації про
користувачів (PostgreSQL ).
Опис отриманих результатів
У результаті створено ПЗ веб-каталог фільмів, який дозволяє користувачам
легко фільтрувати фільми за різними параметрами. Кожен фільм має власну
сторінку з детальною інформацією. Сервіс також забезпечує зручний пошук
фіJrьмів за різними кретеріями.
Праk'ї'ИЧНе значення отриманих результатів
Практичне значення розробки полягає у створенні зручного шструменту
для любителів фільмів, який спрощує процес вибору фільму, що допомагає
користувачам відкривати нові фільми, сприяючи їх популяризації та збільшенню
...
аудиторu.
Особистий внесок автора
Автор проекту здійснив повний цикл розробки веб-сервісу, включаючи
проектування інтерфейсу, реалізацію клієнтської та серверної частини веб
каталогу, інтеграцію з базою даних, а також тестування та оптимізацію продукту.
7
ЧДТУ 242002.003 ПЗ
РОЗДІЛ І ІСНУІОЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ'ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАДАЧ
У цьому розділі проводиться аналіз наукової та технічної інформації, що
стосується розробки веб-додатку каталогу фільмів, який включає детальну
інформацію про новинки, фільми з високим рейтингом . Аналізується доступна
література, інтернет-ресурси та існуючі ріщення для виявлення актуальних
проблем та методів їх вирішення. Завданням є визначення основних вимог до
функціоналу каталогу та обгрунтування вибору технологій для його реалізації.
І.І Аналіз існуючих рішень
Internet Movie Database (IMDb)
База даних фільмів в Інтернеті (англ. Intemet Movie Database, llvfDb) -
найбільша база даних та вебсайт про кінематограф (рис . 1.1 ). База даних значною
мірою заповюоється добровольцями, це чимось нагадує концепцію вікі . У базі
зараз зібрана інформація про 10,1 млн фільмів і телесеріалів, є інформація майже
про 11 ,5 млн акторів, режисерів та інших професіоналів кіно зі всього світу [1].
Рисунок 1.1 - Inteгnet Movie D atabase (ІМDЬ)
8
ЧДТУ 242002.003 ПЗ
До переваг IMDb можна віднести :
- обширна база даних фільміо, сер1алш, актор1в та 1.нших зв'язаних з
кінематографом елементів .
- детальна інформація про фільми, включаючи рейтинги, вщrуки
ь.1)итиків та глядачів, трейлери, акторський склад тощо.
- можлив1сть створення власного списку перегляду та ведення власних
оцінок та рецензій.
активне співтовариство користувачів, яке надає обговорення фільмів та
рекомендації.
До недоліків відносять:
складність інтерфейсу для новачків;
не завжди повна або актуальна інформація про вс1 фільми, особливо
щодо молодих чи менш відомих творів.
ТЬе Movie Database
The Movie Database (рис. 1.2), більш вщома за абревіатурою ТМDЬ. Це
безкоштовна база даних фільмів і серіалів з відкритим вихідним кодом, створена
Тревісом Беллом у 2008 році [2]. Т:М:ОЬ є проєктом-конкурентом комерційної
Intemet Movie Database і може використовуватися, наприклад, програмним
забезпеченням медіацентру Kodi .
Переваги даного каталогу:
велика база даних з оновленнями щодо нових фільмів та серіалі в .
відкрите АРІ, яке дозволяє використовувати дані з ТМDЬ у власних
проектах.
дружній до розробників та дозвшля активно використовувати та
вдосконалювати АРІ.
Недоліки :
Менша юлькість детальної інформації порівняно з ІМDЬ.
. .
Можливість виникнення помилок у даних через в~дкрит1сть та
масштабність бази даних.
9
ЧДТ 242002.003 ПЗ
Рисунок 1.2 - ТІ1е Movie Database (Т:МDЬ)
Rotten Toшatoes
Rotten Toшatoes (у перекладі з англ . «Гнилі помідори») - веб-сайт [З] , на
якому збирають огляди, інформацію та новини кінематографу (рис. 1.3).
І
І t;(W i-UPC0l,IJ'«J MOVl(S ІN ТNEШRS
Рисунок 1.3 - Rotten Tomatoes
10
ЧДТУ 242002.003 ПЗ
До пер ваг Rotteн Toшatoes можна віднести :
система агрегації відгуків критиків та глядачtв для створення
загального рейтингу фільму;
простий та зрозумілий інтерфейс для перегляду оцінок та відгуків ;
можливість отримання найновішої інформації про відгуки та рейтинги
фільмів.
До недоліь.--ів Rotten Toшatoes відносять:
недостатня об'єктивність рейтингу через суб'єктивність думок критиків
та глядачів;
не завжди повний або акуратний опис фільмів;
можливість впливу на рейтинг фільму через маніпуmовання відгуками
або оцінками.
1.2 Існуючі методи та засоби
Для розв'язання поставлених завдань у створеню веб каталогу фільмів
rкористовуються такі методи та засоби:
бібліотека JQuery: Використання JQuery для розробки динам1чноrо
герфейсу корис-~увача. React дозволяє створювати AJAX запити на сервер для
безпечення динамічного оновлення даних у веб каталозі;
Java та SpringBoot: Для серверної частини використовується Java з
>еймворком SpringBoot, що забезпечує швидку обробку запитів та взаємодію з
зою даних;
база даних: Для зберігання даних про фільми використовується реляційна
за даних PostgreSQL [18], що забезпечує швидкий доступ та можливість
сштабування.
1.3 Актуальні проблеми
При розробці веб каталогу фільмів виникають такі актуальні проблеми:
Обсяг та якість даних: Необхідно забезпечити точність та достатність
~ормації про фільми ,DJIЯ користувачів.
11
ЧДТУ 242002.003 ПЗ
Продуктивність: Оптимізація продуктивносп каталогу дJІЯ швидкої
5робки запитів та завантаження даних.
Зручність користування: Забезпечення інтуїтивно зрозумілого інтерфейсу
riя користувачів різних категорій .
1.4 Методи вирішення проблем
Для вирішення цих проблем використовуються наступні методи :
- використання сучасних веб технологій: JQuery, SpringBoot та реляційна
база даних PostgreSQL дозволяють ефективно обробляти великі обсяги
даних та забезпечувати швидкий доступ до інформації;
шдексащя: Використання індексів бази даних для покращення
продуктивності запитів пошуку;
юзабіліті-тестування: Проведення тестувань користувацького
інтерфейсу для забезпечення його зручності та зрозумілості.
1.5 Систематизація отриманих даних
Для усшшної реалізації проекту необхідно систематизувати отримані дані з
)1зних джерел, включаючи:
Аналіз технічних статей, документації, підручників та інтернет ресурсів з
rеми розробки: вивчення технічних статей дозволяє зрозуміти поточний стан
цосліджень та розробок у галузі створення каталогів фільмів. Це включає огляд
методів зберігання та обробки даних, сучасних підходів до розробки
користувацьких інтерфейсів та інтеграції з зовнішніми сервісами.
Вивчення популярних статей та інтернет-ресурсів, що стосуються розробки
каталогів фільмів: Огляд документації, та інших інтернет-ресурсів дозволяє
ознайомитися з практичними аспектами розробки та новітніми технологіями, які
використовуються у створенні подібних додатків. Це допомагає знайти
інноваційні рішення та оптимальні підходи до реалізації проекту .
Огляд існуючих рішень на ринку: Дослідження популярних платформ дJІЯ
кіноглядачів, таких як ІМDЬ, ТМDЬ, Rotten Toшatoes та інші, дозволяє зрозуміти,
які функції є найбільш затребуваними серед користувачів. Це включає анашз
12
ЧДТУ 242002.003 ПЗ
інтерфейсу, функціональності, методів пошуку та фільтрації, рейтингової
·нсте ш та інших аспектів, які роблять ці платформи успішними.
Проведення порівняльного аналізу: Порівняння різних рішень дозволяє
виявити їхні переваги та недоліки, а також визначити, які функції та підходи
Ю)К)'ТЬ б)'Ти адаптовані або покращені у власному проекті. Це включає оцінку
про~'Тивності, зручності користування, масштабованості та безпеки.
Збір зворотного зв'язку від користувачів: Важливим елементом є вивчення
відгуюв та побажань користувачів існуючих платформ. Це допомагає зрозуміти,
які фуню.rії є найбільш важливими для користувачів та які проблеми потребують
вирішення. Такий підхід дозволяє створити продукт, що максимально відповідає
потребам цільової аудиторії.
Отже, аналіз існуючих методів та засобів розв'язання поставлених завдань
показує, що для створення ефективного та зручного веб каталогу фільмів
необхідно використовувати сучасні технології розробки та обробки даних.
Вивчення аналогів, таких як ПvfDb, дозволяє визначити кточові функції та
вимоги до подібних систем, що сприяє розробці високоякісного продукту, який
задовольняє потреби користувачів. Проведення подальших досліджень у цій
галузі є необхідним для вдосконалення існуючих рішень та впровадження нових
інноваційних підходів.
Постановка задачі
Інтерфейс користувача (Ш);
- розробити зручний та інтуїтивно зрозумілий інтерфейс користувача.
Клієнтська частина (ftontend);
- використати JQuery для створення динамічного інтерфейсу .
Серверна частина (backend);
- розробити серверну частину на Java з використанням SpringBoot;
База даних;
- розробка, заповнення та підтримка PostgreSQL бази даних .
Фільтрація;
- реалізувати функціонал фільтрації фільмів за різними жанрами.
13
Ч.ТТУ ~.1 _()() _ _0 03 Ш
Інфор~сашйю стор1нки :
на.1зm ~юл...їПВІСТЬ переr.1яау .Jета.~ьної інфорчап:ії ~1я обра.чоrо
фі.,ь~· -
Перег.lЯ.:1 -греі'сн:рї в:
- забезпеч1пи ~ю~їИ-вість переr.~· трсf1-1ерів .J.О.JаБИ:Х фі.. ьmв.
І ес1:- вання та оmmrізапія;
пров....осrи тес-тування та оптшrізапію .J.O.J.aTh·y.
14
ЧДТУ 4 ОО .ОО ПЗ
Висновок о ро іЛ)' 1
У даному з.Jі.1і був проведений анаJ із наукової та технічної інфор:\tаu.ії,
lll\. ('її 'ується ро бкн веб-ката~ огу фі. Ь;\Іів . Б~ ли розглянуті існуючі рішення,
raкi я · 1D. r 1Db та R tteп Т oшatoes які надають широкий вибір філь;\tів та
lRНuвапійпі функuії ..i-rя кіноглядачів. За допомогою сучасних технологій, таких
п- JQuery ..1.-rя к:rієнтської частини та SpriпgВoot для серверної, планується
:творення зручного та функціонального веб-додатку, який дозволить
f\орисгувача..,1 .1егко шукllти, фільтрувати та зна,ходити детальну інформап:ію про
фі.-ть\Ш . _.\кї:·ал:ьні пробпеми, такі як обсяг та якість даних, продуктивність та
~учність користування, були ідентифіковані, і для їх вирішення запропоновано
. ~· ..
використовувати методи, такі як оптиі\•1ізація запит1в, тестування юзао1Jпт1 та
вивчення зворопюго зв'язку від користувачів.
Загальний ана.,-rіз існуючих методів та засобів розв 'язання проблем показав,
[ПО .ІІЯ усrrішного створення веб каталогу фільм.ів необхідно поєднувати сучасні
rехно:югії та аналіз існуючих ринкових рішень.
15
ЧДТ 242002.003 ПЗ
POЗJJ 2 ВПРОВ ЖЕННЯ РЕЗУ ЬТАТІВ ДОСЛІДЖЕНЬ У
ПP.-\kTllhY ПРОЕ1'."ТУВАННЯ ПРОГРА!VІНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРі\11АЦІЙНІІХ СИСТЕІ\1
сучасному цифровому світі із зростанням ПОП)'ЛЯрносїі онлайн
>імінгових п.,-татформ та великого обсягу виробництва філь ~ів, користувачі
екають зручні та ефе1'.тивні способи для їх відстеження та перегляду, тоді як
3робн:ики створюють нові продукти та інноваційні рішення, конкуруючи за
ll). аулиторіІ.
Вішювіп:но до цих потреб, метою цього проекту є розробка веб-каталогу
ІЬмів, який забезпечить користувачів зручним: інструментом для пошуку,
Jегляду детальної інформації про нові та популярні фільми.
У nьому розді,-rі буде описано процес впровадження результатш
сліджень у пракгику прое:ктуваFffіЯ програмного забезпечення інформаційних
с-гем, зокрема створення веб-каталогу фільмів. Будуть розглянуті основні
ши розробки, вибрані технології та методи, а також перспективи подальшого
звитку даного продукту.
2.1 Моделювання предметної області
Моделювання предметної обласїі є важливим етапом у розробці будь
ого програмного продукту . Цей процес допомагає зрозуміти структуру та
:~ємозв'язки між об'єктами та сутностями, що характеризують дану сферу.
:новною метою моделювання є створення чіткої та послідовної системи, яка
щбражає всі аспекти роботи веб-додатку.
Розглянемо основні сутності предметної області , вони складаються з таких
еменnв:
- фільм : творчий продукт, який складається з послідовності зображень,
о створюють ілюзію руху та передають історію або ідею;
- жанр: категорія, в яку можна віднести фільм в залежносn вщ його
16
ЧДТУ 242002.003 ПЗ
)жег,. ' те 1атики та стиmстики ;
- режисер: творець фільму, відповідальний за його виконання та
аmзаmю;
- актор: актор чи аь..-триса, яка виконує роль у фільмі ;
- рейтинг та рецензії: ощнка фільму, надана критиками або
ристувачами, яка відображає загальне сприйняття та оцінку фільму.
Під час розробки будуть детально вивчатися кожна з цих сутностей, а
шж визначатися додаткові атрибути та характеристики для забезпечення
ВБОГО функціоналу продукту.
2.1 .1 Предметна область моделювання. Модель предметної області.
овник предметної області
Предметна область моделювання
Предметна область моделювання веб каталогу фільмів охоплює
юрмацію про фільми, режисерів, жанри та акторів . Кожна з цих сутностей має
,ї унікалью атрибути, що дозволяє систематизувати і зберігати різноманітні
сі, пов'язані з фільмами.
Модель предметної області
Нижче наведено опис основних сутностей моделі предметної області :
- фільм - центральна сутність каталогу, що містить основну інформацію
про кінематографічні твори;
- режисер - особа, відповідальна за художнє та технічне керівництво при
створенні фільму;
- жанр - категорія, що класифікує фільми за певними загальними
характеристиками та стилістичними особливостями ·
)
- актор - особа, яка виконує ролі у фільмах, створюючи образи
персонажів.
Реалізовано графічне відображення предметної області (Рис 2 .1) .
і_"'(І;\;-)5?~ ~ ,. ".))
~:-::. :.г, G:.- -а·
:tf'Ь'\113
~ -ё."'ЄІІ:r: :.:
~'(І~~
РІ
~V:~
Ре.ю4сер
.- ,
~.;а
~а;а Н:р(l.;~~
v()jt)
Рисунок 2.1 - Модель пре.::р,1етної області
Створено c.J овник предметної області :
1. Сутність: Фільм
Атрибути сутності:
ID фільму: Унікальний ідентифікатор фільм
назва : Назва фільму.
рік випуску: Рік, коли фільм був випущений.
опис: Короткий опис сюжету фільму .
тривалість : Тривалість фільму (в хвилинах) .
рейтинг: Середній рейтинг фільму на основі відгуків користувачів.
- постер : Зображення постеру фільму.
18
ЧДТУ 242002.003 ПЗ
- трейлер : Коротрий відео огляд фільму .
- трейлер: URL посилання на трейлер фільму .
- країна: Країна виробництва фільму .
2. Сутність : Режисер
Атрибути:
- ID режисера: Унікальний ідентифікатор режисера.
- ім'я : Повне ім'я режисера.
- дата народження: Дата народження режисера.
- біографія: Коротка біографія режисера.
- фльмографія: Список фільмів, які зняв режисер.
3. Сутність: Жанр
Атрибути:
- ID жанру: Унікальний ідентифікатор жанру.
- назва: Назва жанру (наприклад, драма, комедія, бойовик).
- опис: Короткий опис жанру.
4. Сутність: Актори
Атрибути:
- ID актора: Унікальний ідентифікатор актора .
- ім'я: Повне ім'я актора.
- дата народження: Дата народження актора.
- біографія : Коротка біографія актора .
- фільмографія: Список фільмів, у яких знявся актор .
- фото: Зображення актора .
2.1.2 Елементи моделювання предметної області
Для побудови всіх UМL діаграм було використано певний набір графічних
елементів. Даний набір значною мірою полегшує розум1ння вимог до
розроблюваного веб каталогу фільмів.
Нижче наведені в таблиці 2.1 елементи моделювання, яю взято з
методичних вказівок до кваліфікаційної роботи бакалавра [ 15] .
19
ЧДТ 242002.003 ПЗ
Таблиця 2.]
Елементи моделювання
Графічний символ Назва елемента
Дійова особа (користувач)
~
С) Варіант використання
Іи Компонент
Вузол
ll
Стан
Об'єкт
l 1
І Class Клас
f І
Лінія життя, фокус управлjння
о
• СІ) Початковий та кінцевий стан
Відношення асоціації
------- --- -- -~ Відношення залежності
► Виклик
2.1.2 Робоча область моделювання : Веб-каталог фільмів
І Вхід;
- дозволити користувачам переглядати каталог не маючи облікового
запису;
2 Каталог фільмів;
?()
ЧДТУ 242002.003 ПЗ
- показати список фільмів разом з їхніми жанрами та постерами;
- дозволити фільтрувати фільми за жанром ;
забезпечити можливість перегляду детальної інформації про кожен
фільм.
З Жанри;
- показати список доступних жанрів;
дозволити користувачам переглядати фільми відповідно до обраних
ними жанрш.
4 Режисери та актори;
надати можливість перегляду інформації про режисера та актор1в
фільму в детальній інформації про фільм ;
2.2 Формування та аналіз вимог
Формування та аналіз вимог для веб-каталогу фільмів є ключовим етапом у
процесі розробки програмного забезпечення. Цей етап передбачає детальне
вивчення потреб користувачш та визначення функціональних та
нефункціональних вимог до системи.
В даному розділі розглянемо процес формування та аналізу вимог для веб
каталогу фільмів. Дослідимо потреби користувачів, визначимо основні функції
та характеристики системи, а також обговоримо основні аспекти, що впливають
на її успішну реалізацію.
Мета цього пункту полягає в тому, щоб визначити та описати вимоги до
веб-каталогу фільмів з точки зору його користувачів, функціональності та
техючних характеристик. Це дозволить нам зрозуміти, як система повинна
працювати та які функції вона має виконувати для задоволення потреб своїх
користувачів.
Відповідно до цього, даний підрозділ бу де включати анал1з потреб
користувачів, опис функціональних та нефункціональних вимог, а також критерії
прийнятності системи.
21
ЧДТУ 242002.003 ПЗ
Йог ре'"'ультзrо 1 буде опис вимог до веб-каталогу фільмів, який буде
внкори товуватися як основа для подальшої розробки та тестування системи .
- .- .1 Ф Р 1:--вання вимог до програ 1ного забезпечення . Первинні і детальні
вимоги. Вимоги замовника. Функціональні та нефункціональні вимоги .
Формування вимог до програмного забезпечення
- операційна система: Windows 8+, macOS 12+ або розповсюджений
дистрибутив Linux;
процесор: Intel Core іЗ або еквівалентний АМD·)
оперативна пам'ять : Мінімум 4 ГБ RАМ;
веб-браузер: Остання версія веб-браузера, Google Chrome, Mozilla
Firefo~ Мicrosoft Edge або Safari;
- інгернет-з'єднання: Швидкість з'єднання не менше 5 Мбіт/с для
нормальної роботи веб-сайту.
Первинні вимоги:
1 каталог фільмів: система повинна надавати можлив1сть перегляду
каталогу фільмів з різних платформ;
2 фільтрація: користувач повинен мати можливість фільтрувати фільми
. .
за р1зними критер~ями;
З детальна інформація про фільм: для кожного фільму повинна бути
доступна детальна інформація, включаючи опис, зображення тощо;
4 аюуалізація інформації: адміністратор системи повинен оновлювати
інформацію про новинки фільмів з інтернет-джерел .
Детальнj вимоги:
І вхід: система повинна забезпечити можливість входу користувачів без
авторизації;
2 фільтр : система повинна мати можливість фільтрацїї за жанрами;
З адаптивність: система повинна бути оптимізована для використання на
мобільних пристроях з різних платформ.
Вимоги замовника:
22
ЧДТУ 242002.003 ПЗ
.i дп-за1rn інтерфейс ,: творення дизайну зручного та привабливого
інтерф йсу.
- алгорит 1и та технології: Використання алгоритмів та новітніх технологій ,
які раніше не б ли застосовані у подібних продуктах, для забезпечення
уmкальних можливостей та переваг.
Функціональні вимоги:
1 Вхід користувача :
Система повинна надавати можливість входу для користувачш, без
введення даних для автентифікації.
2 Перегляд каталогу фільмів:
Система надає можливість переглядати список фільмів разом з їхніми
назвами, описом, рейтингом, жанром та постером.
З Фільтрація фільмів :
Система повинна дозволяти користувачам фільтрувати фільми за жанром.
4 Детальна інформація про фільм:
Користувачам має можливість переглядати детальну інформацію про
кожен фільм .
5 Пошук:
мати МОЖЛИВІСТЬ пошуку фільмів за РІЗНИМИ
КористувачЇ ПОВИННІ
критер1ями .
Нефункціональні вимоги:
1 Безпека даних :
Система повинна забезпечувати захист, конфіденційність та цілісність
даних;
2 Швидкодія :
,, rою у відгуку на запити
Система повинна бути швидкою та еч)ектиш-
користувач~в;
оптимізований код для мінімізації часу
Серверна частина повинна мати
завантаження сторінок.
3 Масштабованість:
23
ЧДТУ 242002.003 ПЗ
Сисrе ta повинна бути шсuпабованою, шоб витри 1увати велику кількість
орисrувачів та великі об'єми даних ;
Apxiтek--rypa системи повинна бути гнучкою для легкої розширюваностt
1ункцюналу.
4 Крос-платформ:еність :
Веб-каталог повинен бути суl\ПСНИІ\·І з р1зними веб-переглядача~\Іfи та
пераційними системами;
Відображення інтерфейсу повинно бути адаптивним для рвних тиmв
ристроїв та розм:1р1в екранів .
2.2.2 Формування вимог за допомогою діаграми прецедентів
Формуванням вимог за допомогою д1аграм прецедент~в спочатку
,изначаються основні взаємодії між користувачами (акторами) та системою .
~она допомагає ідентифікувати функціональність системи та вимоги до неї. Ось
·екстовий опис формування вимог на основі діаграми прецедентів:
1 Актори:
- гравець: кінцевий користувач, який взаємодіє з каталогом фільмів.
2 Прецеденти :
фільтрація фільмів: користувач може використовувати цю функцію
для фільтрації фільмів за жанром ;
- перегляд детальної інформації: користувач може переглядати
докладну інформацію про кожен фільм каталогу, включаючи опис,
оцінки, трейлер тощо;
- пошук: гравець може виконувати пошук фільмів за р1зними
критер1ями такими як назва, опис, режисер тощо.
З Взаємодія :
гравець використовує меюо з жанрами для «Фільтрацї», вибір
фільмів для «Перегляду детальної інформації» та введення в рядок
пошуку параметру для виконання «Пошук» при взаємодії з
системою каталогу фільмів.
24
3 Ш
uеюенп
Веб каталог фільм ів
--- -:~
~ - .=- 1 .Jc _ ...-.,
.......
Рисунок 2."' - ДіаrрсШа прсІІ.ІUентів взаєУо.Іія з кага..,ого:\І
2.3 Про~-гувзння .,оrічноі струь.-гури програ,1ного 1":0"n.,e-Rcy
Прое.ктування .,оrічвої стр~l\.-тури програ.\ІНОГО ко\ш.1ексу є к.~ючов_rru
шом у розробuі бу,1Ь-я:кого прогр~шого забезпечення, вк.-почаючп веб
:~апси. Uей етап передбачає розробку архітект~ -рної концепції спсrе\ш та
t • • -
заачення взаємозв язю.в м~ж н складови:\ш е.,е\1ента.,ш.
Метою даного процесу є створення ефе1'.тнвної та логічної стру1'.ї)l)П веб
та.1оrу фільмів, шо дозволить забезпечити впсоку продукrпвюсть.
1сштабованість та надійність . В процесі проекгування визначаються основні
>мпоненти т-а їх взаємодія, а також розробляються схеми баз даннх та логічні
ІГоритми роботи системи .
У даному вступі розгляне ю ключовІ аспе1'.-гн проектування логічної
rруктури програмного комплексу веб каталогу фільмів . Зокрема, буде
. ) .
юзглянуто визначення д1аграми та зв язки МІЖ ними.
2.3.1 Діаграми класів
Діаграми класів для веб-каталогу фільмів зображена на рис. 2.4, що
відображає ключові сутності системи та їхні взаємозв'язки .
25
ЧДТ~ 4 ОО .ОО ПЗ
с BaseEntity
~~
_ _______,J ,._ _______
/
г--
с • ! ersonEntity І - ~ _:__NameEntity J
- . - -.
с Actor І с Director с ' Genre ·
Рисунок 2.4 - Діаграма класів для веб-каталогу фільмів
Сутність BaseEntity являється базовим класом для вс1х сутностей, та
містить в собі автоінкрементний ідентифікатор сутності . Від сутності BaseEntity
успадковані сутності NameEntity та PersonEntity, що містить набір атрибутів
х_арактерних такого типу сутностям . Всі інші сутності предметної області
вспадквують одну із вище описаних базових сутностей, що відповідає підходу
ООП для повторного використання написаного коду згідно DR У [9] принципу.
На рис. 2.5 зображено діаграму класів предметної області веб каталогу
фільмів з описом її атрибутів . Головним являється клас Мо іе який
придназначений зберігати та представляти інформацію про фільми збережені в
базі даних та транспортувати дані для користувача . Також в даному клас~
м1стяться посилання на класи жанрів (Genre), акторів (Actor) та режисер1в
(Directors).
26
■-------------
т 242002 .003 ПЗ
1 NameEntity с • Movie [ ,. PersonEntity
,..
na String f • actors list < Actor > f • birthDate Date
-i- f і director Oirector f • photo String
l f і addedAt Date f і fullName String
Genre f і poster String f і country String
--- f і genre Genre 1-
f •' year lnteger г _J
f • id lnteger ,с ,._
11 Director Actor
f і title String
f_ і desпiption String
,.
f • country String
f duration lnteger
f і rating Double
f і trailer String
Рисунок 2.5 - Діаграма класів для веб-каталогу фільмів з властивостя.ми
2.3.2 Діаграми пакетів
Діаграма пакетів показує організацію коду у вигляді пакетів, що допомагає
зуатзувати структуру та залежності між різними частинами додатку . Для
pring Boot проекту на рис . 2.6 ми продемонструємо щаграму з трьома
сновними пакетами - Controllers, Repository, та Models.
Controllers - відповідає за обробку НТТР-запитів і формування відповідей .
vfістить контролери, які взаємодіють з сервісами . Використовує моделі з пакету
½odels і репозиторії з пакету Repository.
Repository - відповідає за доступ до бази даних. Містить інтерфейси , що
розширюють JpaRepository . Використовує моделі з пакету Models.
Models - містить сутності (Entity) або класи моделей, які відображають
структуру даних у базі даних . Незалежний пакет, використовується іншими
пакетами .
27
ЧДТУ 242002.003 ПЗ
Controflers
MovieController
, Use
~
Repository
J\~ovieReposrtory
Use
~ ~
Modef
f\•10\1ie І Genre 11 Director Actor
11 І
Рисунок 2.6 - Діаграма пакетів фільмів
2.4 Архітектурне проектування
Для опису архітектурного проєктування більш детальюше розглянемо
tіаграми : діаграма компонентів, розгортання програмної системи на апаратних
~асобах та діаграму розгортання .
2.4.1 Діаграма компонентів
Діаграма компонентів UМL описує високор1вневу струк~уру системи,
показуючи її основні компоненти взаємодію між ними. Для веб каталогу
фільмів, де корис~увач заходить на сайт і взаємодіє з різними елементами,
. .
такими як фільми, жанри, режисери та актори, д1аграма компонентш матиме
11µ~дставлення зображене на рисунку 2.7.
28
ЧДТУ 242002.003 ПЗ
Genre ~
Genre detaili
Director details
Асtог details
І:,.
І
І
І
І
• --------------·І User request
: І : ,
:1' ! · =І]
User·: :.• ..
:! .' ' . ;• 'І ( І І'
. !
Рисунок 2.7 - Діаграма компонентів веб каталогу фільмів
При формуванні запиту користування на отримання необхідного переліку
1ьмів , наша система буде формувати компонент фільму та за допомогою
инципу ІоС, даний компонент бу де включати в себе залежні дані, такі як
нри, режисер та актори .
2.4.2 Розгортання програмної системи на апаратних засобах . Діаграма
,згортання
На рисунку 2.8 зображено Utv1L діаграму розгортання.
29
-
ЧJТУ _-t200 __0 0_ ПЗ
/
< <.:)f'f"·,::p>
t'.r.!~ • Jli!! ~'!І'
/ /
<~~->
~vнsа.и
І ~<~~~ ~,. 0 1
!/
<<;_<с;>> :]
їе?.;??.:т:~-- ,
<~ D
Евr-:\ж!ТО8С8 S.VW
Рисунок 2.8 - Діаграма розгортання
На ,J.Їн і й діагра.мі зображено:
Користувач (Client):
Взаємодіє з пристроєм що має браузер та дос-rуп до мереЖІ штернет.
:с,:увач взає ЮДІЄ через пристрій на екран якого виводиться інтерфейс
с,:увач~ за допомогою якого користувач взає юд1є 1з серверною частиною.
Веб Сервер (Embedded Tomcat Server):
Сервер що обробляє запити на отримання даних чи додаваІО-Ія даш-1х .
~нення до нього відбувається по протоколу НТТРл-ІТТРS . Також відповідає
сю головну лопку додатку .
База даних (Database Server):
Віддалений сервер на якому розміщується база даних, що зберігає всі дані
, каталогу . Звертання до неї відбувається по протоколу ТСР/ІР.
30
ЧДТУ 242002.003 ПЗ
2.5 l\10.11.едюш1ння поведінки системи
Даний піщ.юзділ присвячений опису моделювання поведшки системи за
по югою таких діаграм : діаграма діяльності , діаграма комунікації, діаграма
інч нного автомату.
__5 .1 Діаграма діяльності
На рису~--у 2.9 зображена діаграма діяльності, яка демонструє як будуть
[буватися дії у веб каталозі фільмів .
.------------1 Зanyci< веб каталогу 1-----------,
фіЛьмів
Фільтрація фільмів
Перегляд
Перегляд
Пошук фіЛьмів нових фільмів популярних фіЛьмів за жанром
ВіДr_риття детальної
інформації про 14---------'
фільм
Рисунок 2.9 - Діаграма діяльності
Після запуску каталогу, через головне меню, користувачу доступю
функції : пошуку, фільтрації, перегляду новинок та популярних фільмів. При
обрані конкретного фільму, користувачу стає доступною детальна інформація
про нього.
31
ЧДТУ 242002.003 ПЗ
2.5.- Діаграма послідовності
На діаграмі (рис. 2. 10) показано в якій послідовності будуть виконуватись
;rii' ,1.JІЯ поІІІ}'"У фільм . Користувач ініціює запит на сервер з критерієм пошуку .
ЗаfТТІТ пртrймає та обробляє контролер системи, який в свою чергу викликає
віJТІовідНИЙ метод із сервіс класу . Сервіс клас звертається до репозиторію який в
свою чергу звертається до бази даних . Отриманий набір даних який відповідає
к.от rгерію поmку перетворюється в список об'єктів Movie та повертається по
мrтП(),кку виклJіrь.--Їв до контролера. В контролері даний список перетворюється в
.1i:1J1-U•~
JSO -формат та надсиJ1ається користувачу на клієнтську частину.
-.
@ien~ Controller j / 8.
Service . ] [ Repository Postgres
~==~====="·' .,. == І = І
І
І • н . 1
sea::cnf.юvieз 1
.І -~ ➔l
1 findИovies
1 findИovies
і ➔ :
І : executeQuery ►:
І І
І
1
:<··R··e··s··u··l·t·S ··e··t· ·········,,
1 List<Hovie> 1
І
'< ···························,
І
І
1 List<Иo11ie> 1
І<. ...' . .....................),
І .
1 List<Иovie> 1
'(••• · ·•·•··· · • ·.,·. .........t І І
~li~nt j І _~ Con~oller ] [ ~rvice ] [ ~~~~-~ J
І о - Діаграма послідовност1
Рисунок 2 • 32
ЧДТУ 242002.003 ПЗ
2.5.3 Діаграма комунікації
Діаграма зображена на рису нку 2. 11 демонструю як буде комуюк· увати м1· ж
собою користувач, інтерфейс та cepnep при фільтарції фільму за жанром. Для
початку користувач в головному меню обирає жанр фільму, що його цікавлять
після чого йде запит на сервер із вказаними критеріями жанру після чого
корис,увач отримує результат пошуку.
2: Відправка обраного жанру
І .· Вибір жанру
Сервер :
- lктерфеnс ІІ:.Ор11сту11ача:
~
Головне меню - Пошук фільму
Корпстувач З : Отримання результатів
Рисунок 2.10 - Діаграма комунікації в каталозі фільмів
2.5.4 Діаграма скінченного автома,у
Діаграма сюнченного автомату, що представлена на рисунку 2.11
демонструє як буде виконуватись фільтрація та пошук фільмів в каталозі . В
результаті пошуку і фільтрації стоїть умова для відображення результатів, якщо
даним критеріям відповідає хоча б один фільм. В іншому випадку, користувач
отримує відповідне повідомлення, що за його критеріями фільму не знайдено.
Шукати за кр1перієм (кількість > О)
Запустити
Головна сторінка Резуnьтаn, пошуку
Фільтрувати (кількість = О)
за жанром (кількість = О)
Не знайдено
(rJлькість > О)
Результати фІльтрацr, 1-----------~
Рисунок 2. J 1 - Діаграма с1<ін 1 1ешюrо юпом<1ту
33
Висновок- .JO JIOl.D., у 2
ш
с..:т -
Y OJe...ї ЮваЕF--.Я Щ)Є.:DІеПіОЇ ОО.ї асr'Ї:
5Ш.!ОГК ..10 ЩЮграУНОГО забезnечениF~
.-....... ~'"Fc.~~- IIpOrpIOtffiOГO
с-~ся Ш та ЯКИУ чином: .:~ана система б,-.:~е рmгортапгь на
апарайшх засоба.х;
- - - -
:цо.:~е...uовання П ОБе.:ІJ ffiill систе~ за: ..l lЯ:.їЬЮСПО, ПОС.їUОВЮСП{) .
:комун:ікатrіє:ю та скінченного автоУЮ:-~ шо ..:reYOHCIJ)YЄ стшш u Р'---юоm -
34
ЧДТУ 242002.003 ПЗ
РОЗДІЛ З РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
3 .1.1 Обrруюування вибору засобів реалізації
Для створення клієнтської частини веб каталогу фільмів qбрані засоби
реалізації вкmочають НТШ, CSS, JavaScript і JQuery. Нижче наведено
обгрунтування вибору кожного з цих інструментів.
НТШ (НyperText Markup Language)
Струюурування контенrу: НТМL є основною мовою розм~тки для
створення струкrури веб-сторінок. Вона дозволяє визначати різні елементи
сторінки, такі як заголовки, параграфи, зображення, форми та інші елементи [19] .
Семантична розм1тка: Використання семантичних тегів (наприклад,
<header>, <nav>, <article>, <section>) покращує доступність веб-сторінок
полегшує розуміння коду як для розробників, так і для пошукових систем.
Поширеність і підтримка: НТМL підтримується всіма веб-браузерами і має
широкий спектр інструментів та бібліотек для розробки.
CSS (Cascading Style Sheets)
Стилізація сторінок: CSS використовується для опису вигляду НТМL-
документів, вКJІІОчаючи кольори, шрифти, розміри та розташування елементів на
сторінці . Це дозволяє розділяти структуру та презентацію контенту [20]
Адаптивний дизайн: CSS забезпечує можливість створення адаптивного
дизайну, який коректно відображається на різних пристроях (мобільні телефони,
планшети, десктопи) за допомогою медіа-запитів.
Cssз о (ливостl для створення анімацій та
Візуальні ефекти: додає м )І ·
переходів, що покращує користувацький досвід .
JavaScript
І · . J Script дозволяє створювати динамічні та інтерактивні
нтерактивн1сть. ava
елементи на веб-сторінках, такі як випадаючі меню, слайдери, форми з
ЧДТУ 242002.003 ПЗ
Маніп ляція DOM: JavaSctipt за б езпечує можлив1.с ть манш. уляції з
pocurnent Object Model (DOM) ) ЩО ДОЗВОЛЯЄ зм.ш ювати структуру) стиль І. ВМІ.С Т
веб-сторінок після їх завантаження.
АРІ інтеграція: JavaSc1ipt дозволяє легко Інтегрувати сторонні АРІ, що
розширює функціональність веб-додатку ( наприклад, отримання даних через
AJА Х-запити) .
Бібліотека jQuery
Спрощення JavaScript: jQuery - це бібліотека JavaScript, яка спрощує
роботу з DOM, обробкою подій, анімаціями та АJАХ-запитами. Вона дозволяє
писати менше коду для досягнення тієї ж функціональності, що й чистий
JavaScript.
Кросбраузерна сумісність: jQнery абстрагує багато проблем, пов'язаних з
кросбраузерною сумісністю, забезпечуючи коректну роботу коду у всіх сучасних
веб-браузерах .
Плагіни : jQuery має велику юльюсть плапюв, яю легко штегруються 1
додають додаткові функції до веб-додатку (наприклад, слайдери, модальні вікна,
дата-пікери).
Вибір НТМL, CSS, JavaScript та jQнery для створення клієнтської частини
веб каталогу фільмів обrрунтований їхніми перевагами в структуризації
контенту, стилізації, додаванні інтерактивності та спрощенні роботи з JavaScript.
Ці інструменти забезпечують створення сучасного, зручного та функціонального
веб-додатку, який відповідає вимогам користувачів і стандартам веб-розробки .
Для реалізації серверної частини веб каталогу фільмів були обрані Java,
Spring Boot та PostgreSQL. Нижче наведено обrрунтування вибору кожного з цих
інструментів .
Java Spring Boot
Продуктивність та надійність : Java - одна з найпоширеніших мов
програмування ДJІЯ розробки серверних додатків завдяки своїй продуктивност1,
36
ЧДТУ 242002.003 ПЗ
-raдi itнocn та 1а штабованості . Вона добре шдходить для обробки великих
б яrів даних і високих навантажень [4].
Швидкий старт та зручність : Sргінg Boot значно спрощує розробку на
нов1 фреймворk-у Sp1iнg, дозволяючи швидко створювати готов~ до
>икористання додатки з мінімальними зусиллями на конфігурацію . Вбудовані
!асобтт автоконфігурації та залежностей забезпечують швидкий старт проєкту .
Модульність та масштабованість : Spring Boot підтримує модульну
:~рліте1'.'Т)'J)У, що дозволяє легко масштабувати додаток за необхідності. Це
аосягається завдяки використанню таких компонентів як Spring Data, Spring
Security, Spring МVС та інші [7] .
Безпека: Spring Security є потужним шструментом для забезпечення
безпеки додатків. Він забезпечує захист від основних загроз веб-безпеки
(автентифікація, авторизація, захист від CSRF, XSS та інші) .
Інтеграція з іншими технологіями: Spring Boot забезпечує легку інтеграцію
з різними базами даних, сторонніми сервісами та АРІ, що робить його
універсальним вибором дЛЯ створення веб-додатків.
PostgreSQL
Відкритий код та безкоштовність : PostgreSQL є системою управшння
базами даних з відкритим вихідним кодом, що дозволяє використовувати її
безкоштовно для будь-яких проектів , включаючи комерційні .
Надійність та стабільність : PostgreSQL відомий своєю надійністю та
стабільністю. Він має вбудовані механізми для забезпечення цілісності даних,
підтримує транзакції та забезпечує високу доступність даних .
Підтримка складних запитів та розширень: PostgreSQL підтримує складні
SQL-запити, зокрема запити з використанням підзапитів, функці й агрегування та
віконних функцій . Крім того, він має потужну систему розширень, що дозволяє
додавати нові функції та типи даних.
37
ЧДТ 242002.003 ПЗ
tfa штаб ваю ть та проду-1пивність: PostgreSQL добре шсштабується для
бк:и в mпvІХ б ягів даних і забезпеч є високу продуктивність завдяки
ІО rанітним механіз~1ам опти іЇзаuії запитів та індексування .
Піл1лrмка стандартів: PostgreSQL [18] відповідає стандартам SQL, що
езnечує С) . rісність з іншими системами управління базами даних і спрощує
~несення додатків з інших СУБД.
Інтеграпія з Spring Boot: PostgreSQL легко інтегрується з Spring Boot через
ing Data JP~ що дозволяє швидко налаштувати підключення до бази даних,
UІ.Ювати з репозиторіям:и та здійснювати операuії з даними за допомогою
ЄJ(rно-релядійного мапування (ОRМ).
Вибір Java Spring Boot та PostgreSQL для створення серверної частини веб
галогу фільмів обгрунтований їхніми перевагами у продуктивності , надійності ,
.сштабованості та безпеuі . Spring Boot забезпечує швидкий старт та зручність
зробки, а PostgreSQL пропонує потужні можливості ДJІЯ роботи з даними. Ці
струмеити разом забезпечують створення ефективної та стійкої серверної
~СТИНИ веб-додатку, шо відповідає вимогам сучасної веб-розробки .
З .1.2 Опис структурної ( функціональної) схеми
На рисунку З .1 представлена структура клієнтської частини додатку .
Browser·-------------,
Client side
Рисунок 3.1 - Структура кл ієнтської частини
38
ЧДТУ 242002.003 ПЗ
Нижче (див . ри · _., _?_ ) наведена. с трую,у ра проекту клієнтської частини .
EXPLORER: (дТдlОG ~L+ L~+ \_) (§1 ••.
> .vscode І .
> ($$
> img
V jS
·, movies.js
v libs
> bootstrap
> fo1)ta\,•esome
> jquery
> mustacl,e
> vide
v templates
0 mo1 ie-extended.html
<> mo11ies.html
> video
<> ne,•, -movies.l, tml
<> popular-movies.html
Рисунок З .2 - Структура проекту
В даній структурі опишемо назви категорій та їх призначення:
- CSS - збереження файлів стилів проекту;
- ІМG - зберігання графічних елементів;
- JS - файли клієнтських скриптів;
- LIВS - JS бібліотеки;
- ТЕМРLА TES - шаблони для відображення фільмів;
- ROOT - відображає головні І1t111І-файли проекту .
На рисунку З .3 зображена структурна серверної частини, що складається
зідповідно до SpringBoot підходу з контролерів (Controller) які обробляють
запити користуваца, сервісів (Service Layer), що містять в собі бізнес логіку
дотакrу. Реnозиторіїв (Repository) та класів моделі (Model) для взаємодії з базою
даних (Database). 39
ЧДТУ 242002.003 І ІЗ
JPA rщ oslto,y
Cless pro,~dl11g
CRUD
operatio1,s
Depende1'cy l11Jectlo11
Controller Servlce Layer Model
Рисунок З .З - Структура серверної частини
На рисунку 3.4 зображена функціональна схема веб каталогу фільмів.
-------------- --, ~--- --- ---------------------------- ------------------------ -------,
І ІІ І ------- ІІ
І І
І JPA repository
І
Class providing
CRUD
operations
Dependency lnjection
І
І
,Ht1p request:
І І
Se1·vlce Layer Model
Client Controller
: _____ __,
І
Frontend : Backend
І
І
І
'- ---------------- І
І' ------- ------------------------------ --------- ------- -1
Dalabase
Рисунок З .4 - Функціональна схема системи
40
ч т~ 4_002 .ооз пз
3.1_ _; Опнс .1огічноі' (:Хе~ш снсте ш
.Тkчічна -трукrура складаєть -я з клієнтської частини (Frontend) та
рверної ча тrтни (Back nd). Зв ·язок між якн ІИ реалізований за допомогою http
mrriв ві.:mовщк на Я1'і. . я~.:1яється JSON, стандартизований формат обміну
нтm п 1ережі [14] .
~їієнт взаємодії з інтерфейсо f користувача (UI) та надсилає запити на веб
р~Р- який в свою чергу обробляє їх у контролерах (Controller),
rкористовуючи необхідні інтерфейси сервісного шару (Service Layer), що
стить бізнес :югіk·у податку. В свою чергу сервісний шар комунікує з моделлю
~odel) та базою .1аних (DataВase ), для забезпечення доступу до даних яю
просив користувач. В результат~ отриманий набір даних з бази даних
)вертається на рrnень який його запрошував 1 остаточно обробляється
)нтро:~:ером~ та повертається користувачу у JSON форматі.
З .1 .4 Розробка бази даних
На рис. 3.5. зображена структура бази даних додатку, що складається 1з
'яти взаємозв'язаних таблиць та призначена для зберігання інформації про
ЮІЬМИ.
,--
~ '~.
~ ф publlc
- 0 public 0 publlc EJ dlrectors
Е movies_actors
Еі movles ,J' 1d
j, vj
_,,9, Іd :Ь В fullName
/), rrt0'/1€ _,d IJ name
- 6-' .... t} photo
v.:t?! _І':! \J descriptюn t:J country
,...
~ /Р d1rector_1d
0 publlc fj year ~
Ез actora В poster_url 0 publlc
k IJ tr аIІьr _url {::j genres
t0
\J fullName fj cour,1ry , 1d
- {j photo І] rat,ng U l\0fl\O 1
IJ country ІР genre_,d >-
----\з borth_date
Рисунок 3.5 - Модель бази даних
41
ЧДТУ 242002.003 ПЗ
Нижче опишемо структуру та ціль кожної таблиці .
Фільми - основна таблиця додатку, що зберігає в собі інформаuію про
фільми яю занесеш до каталогу.
Структура таблиці Фільми «movies»:
- id (integer): унікальний ідентифікатор фільму, первинний ключ (РК).
- title (character varying(50): назва фільму, не більше 50 символів .
- description (character varying(500): опис фільму, не більше 500 символів.
- director_id (integer): ідентифікатор режисера, зовнішній кmоч (FK).
- year (integer): рік випуску фільму.
- poster_url (character varying(200)): URL постеру фільму, не більше 200
СИМВОЛІВ.
- trailer_url (character varying(500)): URL трейлера фільму, не більше 500
СИМВОЛІВ .
- country (cl1aracter varying(50)): країна виробництва фільму, не більше 50
СИМВОЛІВ.
- rating (real): рейтинг фільму.
- genre_id (integer): ідентифікатор жанру, зовнішній ключ (FK).
- duration (integer): тривалість фільму у хвилинах .
Таблиці Режисери та Актори містять в собі інформацію про режисера та
акторський склад яка використовується при відображені розширеної інформації
про фільм .
Структура таблиць Режисери/Актори (diгectoгs/actors) є ідентичними, тому
опишемо їх разом :
- id (integer): унікальний ідентифікатор, первинний ключ .
- full_name (cJ1aracte1· varying(50)): повне ім'я , не більше 50 символів.
- рІюtо (cJ1aractei· varying(200)): URL фотоrрRфії, не б ільше 200 символі в.
- couпtry (сJ1 агасtег vaiyiпg(50)) : \(раїна походження, не більше 50
символів .
- birtl1_date (date): дата народження .
42
п
р"
_ . перв1 юн й ·il ч
m ВНІШНІЙ 11 Ч
а .ro ВНІШНІ ї .і1 ч F ,
- зап) оач1m1 ro~1oвm стор1н·~ з в1део
наза..'ІЕЬО Нl . Щ """'L·I•. ·.' " на на р1~ . - .6.
Рисунок З.б - Вигляд rо!Іовної сторінки ката..ГJОГ)' філь,1ів
НатиСН)ВШИ на стр1.'ТК}' до низу, користувачу відобража ть я о новнпй
тент сторінки (рис. 3.7). У верхній частию роз •t1щено іеню айТ) для
,lrації. По середині - основний контент у ВИГЛЯДІ списку фшь 11В 8 НІІЖНІЙ
:тині знаходиться службова інформаuія сайту, з дублювання 1 деякн п НhїІВ
віга ці 1.
43
ЧДТУ 242002.003 ПЗ
Новинки
Civil War (2024}
CD
n~m *e t10 v,т '!( 7/1(
, Watch tniller 8 \'/at<h trallcr
В
! .
мupdJtc to t~ 1~6 fi ,,, ·r•t.is:cf. v. r,,c~ ~ r~•ro( r- ,1 с· 1 ~• д,◊JJr,•; J,:r з-~ 1 dr,: ,: 1· f. :.rr А-,.• :J f:,І ,;,:1,·9 J teJм о'
1 .,n to t~: 11" І~ ')' cтt>.:doc-d JQ<.ІnJ, S!S~ th-?/ r.i:eJQJ:rcSt ume to •~Jcn DC
, 510,m<~cr;v,-t\o 11~k 11,а,1 1,,c ; ,r аа<mІА ~
t)ffi)(C rcbc t,X1JOI\; dcsccrd L~~)n :І'~ Vlh1:e Hot.se.
/ cXJIOnmcntal wcathcr olcf1 Sf'5U'I""
~~~~-
Рисунок 3.7 - Вигляд головної сторінки каталогу фільмів
Фільми відображені у вигляді карток (рис. 3.8) у верхній частию якої
знаходиться постер фільму, під яким назва та рік випуску. Нижче знаходиться
інформація про тривалість, рейтинг, трейлер та короткий опис фільму.
Для перегляду розширеної інформації про фільм, необхідно навести на
І!.Ь оrо вка з·1 вником миші та натиснути лівою клав·1 шею миш1·, ш·с ля чого з , явиться
АІалоrове в1. кно (рис. 3.9) детальною інформацією про вибраний фільм. В
3
Аодатковіиv І. Нформації можна переглянути офіційний трейлер фm. ьму, жанр,
~~ ь, рейтинг а також є можливість побаqити основнии- акторськии- склад
tape)\{J.j
сера фільму.
¾х ДЛЯ пошуку бажаного фільму, користувачу слід у поле пошуку, яке
Оl!Jіться у вер . - . - стані головного меню, ввести критер~и для
nощ хши правІИ ча
,1- УІ<у, nісля чо ку пошуку «Searclш . У раз і знаходження
'llllt · го натиснути на кноп
ь~1У no дано . . . ображений користувачу у результатах
noІJJy му критер1ю, вш 6 уде в1д
І<у (Рис. з .1 О).
44
ч т_ О .ОО П
аг (202~)
s::,
Рис,-"Нок З . 8 _ Картки ф.L Th)ll.B
*
д.,, 1,;~r..e to the 1996 · Т. ,ter ,,11:ch cєntct :i
on а rJi1 r с' stOfm ~rs •,t.o ~..: thclf ,'е'іі n an
Рисунок 3.9 - Розurирена інформація про фільм
45
Е... "Ва0 а~ З !Of} ВЇ..::! _ Ї:їЬЧJуваnІ фіn-ЬМЯ за :-;евш '·;'3Нро. І. Д:-U.
еF-Ж) потр.Sно шrrn нути на ~ ~ «.ЖЗ..Нр» та : ~І ~ -- що
- ·!!Ео Zr.'SpйПi відповілний г~ <ріль.,~ {ри . .11):
J.,.ат по I у
Рисунок 3. І І Ви61р ..канру фіпьму
Після вибору корис-rувачем відповідного жанру, вщобразяться філь~ш
н о ·авр, (рис З 12).
.~б
ЧДТУ 242002.003 ПЗ
Результати пошуку:
Civil War (2024)
Gladiator (2000)
Ш3
с:і)
g \t✓a!Ch u~tler
lnterstellar (2014)
Twisters (2024)
~
С;:3
Н v,attn ua11e1
І1',='1•ёnn "EoГr~ir~ c•c c:Jrr~; . r nr;c1:at: ё ,r tt~ 'u:'-'ё, ; f,r,.,.;r .;nj ё .V-5,J." о·
or .,,_..,. , ~ n IN > , ns,••,srt s l= • " ,n • ,.,-nf•==••n•;:.
:.:. J;<;o:~ ,~ :'.t' r!'?.- ' -n ~.\ ,--ёf, \ ', ~ ,:h e.crtёrc<I c.r d pc1r ,.f " ,;.rncr а~ ·,
..J,J ,,',•~ " _, ,~.,, .,._,.,.,,, м • - cn ~,,..,.,.,.,..., І u,,,_,., ,_, ,.1,,,, ,.,,..-
Рисунок З .12 - Фільми жанру «Action»
Розроблений додаток також волод1є адаnтивн1стю, що дозволяє ним
користуватися на мобільних пристрою<, таких я1< планшет та телефон . Вигляд
каталогу иа мобільному пристрої зображено на рис. 3.13.
Де зображено вигляд розгорнутого меню та порядо1< відображення фільмів
У один стовпчик, що є зручним для перегляду на телефоні з портретною
орієнтацією екрану. 47
ч ДТУ 242002.003 ПЗ
Новинки
тwisters (2024)
GD
c,vil V / ar (2021.)
f 7 :t
;, ,Н ' І'" .' оо>,•,,, Н ', _,__, >' ,1 '• С, 'І
J .~,.,.,.,J ,» • ") ,,• ,,<• •.-IJ ,, • ,. , > І «)"<
.,.J,..,r.,!' " l)t~ H. .м...l t,;L.,._. 1 ~ н. І)•J,,,,tt..ІІ~
r.P-J'MЛ ,~-:r 1лr /,n•·~ .,r r-,
дctors.
Рисунок З .13 - Мобільна адаnтаuія каталогу
48 ,
Ч)~ТУ 4 ОО .001 l 1'
:" .1.{ 1пнс розробки прогрймнн. ком11онснтіn
1t1ду.т, ,· йN\НТйЖ~ННЯ фільміrш
Прнзнзч ння : Виконання заnи на cepnep з щлпю отримання списку
фі.тть rів певно1· катег ріі' .
зв·яки з іншими компонентами :
Інтерфейс користувача»
_ < І(онтролер сервера»
0" бливість алгоритму:
виконання запиту на сервер за вказаним endpoint:
function loadMovies(category) {
$.ajax({
url: apiUrl + '/movies/'+category,
method: "GET" ,
success: function(movies) {
11 • "
initMovies(movies, category+ -movies,
'movies. html' , ' movies -template' ) ;
},
error: function(er ror) {
ale rt (error);
console. log(error);
}
});
}
Приклад виклику :
. es ( 'new І ) ; lf >
<body onload=="loa dм ovi
ту на сервер~ :
Обробка даного зали
49
а
ЧДТУ 242002.003 ПЗ
@l\eqнestMappiпg ( " /ne\"' ")
public ResponseEntity<List<Movie >> g~ tNewMo vi cs( )
int currentYear = Year.now() . getValue() ;
return ResponseEntity . ok(
movieService . find.AllNewMovies (currentYear) ) ;
public Lis t<Movie> f indЛ11№. .\ ,vMovies { In t e ge r currentYear )
return movieRepository .find.AllNewMovie s( c urr entYear) ;
@Qt::er y ( " select m from Movi e rn ,vhe r e m. year.= : c11rrentYear o r der
Ьу rn . addedAt desc")
List<Movie> findAll NewMovies (Integer currentYear) ;
Повернення даних на клієнтську частину у вигляді:
"id": 2,
"title": "Twisters",
"description": "An upda te to the 1996 f ;lm 'Twiste r', whi c h c ente r e d o n а
...
pa:r of storm chasers who ris k t heir lives in a n a t t e mpt t o tes t an e xperimen tal
weather alert s ys tem. " ,
"genre" : {
"id": 4 ,
"name " : "Action"
І І
"director" :
"i d": 2 ,
"ful lName" : "Lee Isaac Chung ",
"photo" : "./img/directors/LeeisaacCh ung. wе Ьр " '
"country": " USA",
"birthDate" : " 1978-10-18Т21 : ОО: ОО ' ООО+ОО: ОО "
І І
"actors":
"id" : 2 ,
" fullNarne ": "actor 2 ",
50
"~:.: =а-:..:.о:: " : ::~ ,
., ?.:;"-' -'-="' --" .· " · І;- ",..',',=..' / с1.· .н..,-,,..J,. ї\с ; ~<.. v."· J..Sters. jpg " ,
.,:: :::~:..:.е::: " : " ~ ;:.--:;:>s: І Ію,-...·· youtuЬe • сот/ emЬed/\vdok0rZdmx4? si=бSDwбPEBsnCXRa-G "
j,
Iнirricl..-1 riзa.uiя шаблону карток фільмів на основі отриманих даних :
гunct:on i nitMovies (movies, containerid, templateFile, templateid) {
$.gєt ( 'templates/ '+templateFile, function(template) {
let templateMovie = $(template).filter('#'+templateid). html();
l et r enderedMovie = Mustache.render(templateMovie, {movies:
movies }) ;
$("#"+containerid).html (renderedMovie);
});
}
3.2 Тестування системи
3.2.1 Модульне тесrування
В таблиці 3.1 представлене тестування окремих модул1в в1д яких залежить
завантаження головної сторінки .
Таблиця З . І
51
р ~ -Thntт о
.11:,R ГО Т Т)~ НRЯ
. - mпrn
3.l.ВаНТа·~нн
lTh\ І
--~шаіпеrІ d. - о.:1у.~ь У~шшно
ію ша1 вапія
пре.1став.1енвя
• larcld).hпnlQ
.
~--е н:ня
необ:\.і. .:шого
шаб.,онУ
пре.1став.l сННЯ
,,.n,.z:~~.Ie:lci~r=m.plare~ fo,ie~ У шпnю
,•-_ un ,..;._ "..." _'._ :no,-1·=-..~ іf ) заповнення
шаб.,онУ., ..1анmш
S_ __ І.нтеграпійне тестування
Наступним кроком в перевірuі прапез,1аrnосn систе.\ш є іmх-граціііне
"вання . .Jане тестування ,.1.опомаrає впевнеn1ся , що всі ко:\Jпонентн 'Н re:\Jн
юють разо_.f коректно та без поми.1ок, забезпечуючн uі.,існі ть та нцііtні ть
сата1огу фі..'1.Ьмjв_
Інтеrраuійне тес1)'вання вюпоч.ає в себе : тсСТ) вання АРІ, базн данлх ,
fСТ)'вацького інтерфейсу.
д."ІЯ перевірки АРІ, я.ка водночас працю з базою аннх, корн та .\J я
тфор.\ЮЮ Postman. Перевіремо АРІ пош к фі ьмів в базі аннх веб ката огу
Jевн:им критерієм, для ц:ьоrо задамо насrулні параметри зашt1) :
- URL endpoint: http:///ocalhosr:80 О mov,e~ sean:l1
- НТТР method: GET
52
,. , \
1 1 .1 нн ·
s..r.~ -
~
--::..
7.С-::: : - ~ -: .;--~---=~ ;. -~,,:.: ;;'.,
. , ___, ,.,,. . .. .&.., ..
Рисунок 3.8 - Резу,-rьтати перевірки АРІ
3 ? .3 Системне тес1.У, вання
Сисїезіне тестування є важ1ивим еталом життєвого ш1 · у розр бкн
. .
рамного забезпечення~ ru,1 час якого перев1 ряється повна 1нтсrр вана
e.,,ia ,1.1я: оцінки її відповідності визначеним внмогам . На uьо~,. етал1
уються всі компоненти системи разом (таб 3.2), щоб переконати я , щ ) в --1
Jffiи праuюют-ь належним чином і взаємодіють корекrно.
Таб 1щя J __
Пере...ГІік перевірених функuііі снсте 11roro тест вання
53
ЧJ1,ТУ 4 ОО ОО) Т П
,.,,, ~,нкнія О11нс ;~ії f fcp - Пр~І("-
f~
n,рено 1щ1тr1ість
І ----- -
.J.-з::inycк реб кататюгу Корне, _ nйч прн nіл.крн,.і nеб Так Гак
1
катмогу ійf южлпnість
взаємодіяти з головною
сторінкою
зв·язок з БД Зв'язок присутній, всі данні з Так Так
~"
сервера отримуються .
завантаження Дані про фільми успішно Так Так
~
фільмів із сервера завантажуються із сервера, при
умові, що серверна частина
запущена.
- Відображення Користувачі можуть Так Так
4
карток нових переглядати попередню
інформацію про нові фільми, а
фільмів
саме : постер, назву, р1к випуску ,
опис.
При виборі в головному меню Так Так
5 Фільтрація за
жанру на екрані відображаються
жанром
І фільми обраного жанру
І Так
При виконанні пошуку, Так
б Пошук
користувачу відображаються
філільми які відповідають
заданим критер1ям
-
7 П ри виборі фідьм у ( натисканні Так Так
Вивід детальноj·
по ньому), винодил>ся детаJ 1ьш1
інформації
інформація , що містий трейнер,
відомості нро акторс1>кий скнад
та режисера .
---- 54
....
ЧДТУ 242002.003 ПЗ
системне тестування проведено успішно, всі вимоги виконано .
з.2.4 Приймальне тестування
Одним із завершальних етапtв перевірки програмного забезпечення є
rтрнймальне тестування. Ціль даного тестування - первірка чи відповідає
розробпена система вимогам та чи готова вона до експлуатації кінцевим
корисrувачем.
Після запуску системи, можна переконатися в тому, що система відповідає
поставленим вимогам, а саме:
- має зручного та інтуїтивно зрозумілий інтерфейс користувача (рис .
3. 15);
володіє функціоналом фільтрації фільмів за жанром ;
- дає можливість пошуку фільмів за різними параметрами ;
- надає перегляд інформаційних сторінок для кожного фільму (рис . З. 15).
Twisters 12024]
m,
Н<,111 *І ,І\О
м updnІ<: 10 tl)c 19% 11\10 ' l1-:,~1cr ,vluc/1c ,mt1:1,:d
оп а pulr ol s1orm ct1c1sers 'о"ІІ,о І 1)k th<'•r k,c~ ,n ~n
iJІ І<:mµl 10 \(,~\ 311 e,pe•itHCI\\Ji ЛІ,'о\І•LІ 1111!1\ ~j ~\,:11•
Acto,s:
І) : 3 . 15 - J~езую ,1·ю· 1,оботи сис1 ем н исунок >
55
ЧЛТУ 4 ОО O()J 11
_;} }1pm~.,:i.:\H вnровз ж~ного nрогр3много комп екс
J. 16 продс:\юнстрооано приклад загального внглялу
ачН1.."'Г(" ~--о,ш.,ексу. що M O">hy ' 6 тн вnрооаджено в робоrу .
fil",
Новинки
Tv,isters (2024) Civil War (2024)
~ ~
... ,. .. f;,,~ І '1111. 'lf1U
nw.w1шU-t1
,,,.г"и ..• r,,.,,#,. .,.,r 1,.... ·. ~•r· .n.1r,,cr·c.•fr,l)r,·r,,-,.,, ,, ,, * 1, • ., 1 • t',, _.,.. 1 ,. ·J, r :. •
1
.: ; • ,1,. .~ , ~ , ,-, •., f у :,,, , . .1t1 ..,'І•. t.,' '1 "(.·, '°'' І t ,J ,_ • .JII' J t ,, ~, , " • j \ І ~ І L \.
.-1. 1
\,, • (.t.\ І \ а, !І .ІL ,. • 1
Рисунок З . 1 6 - Приклад 11роrрамноrо ком11лексу
56
Вноювоt-. J.O розлі.,у 3
. ..-,..(,, ,, · <:1з.1і., , ,:~сrа..1ьн{ t'nнсано f о роб ку тn тес гування nрограчноrо
- - ~ 1'· -
·G [ЦХ'е~.1ен\.; ()бrрунтування внбору засобів реалізаuії програчноrо
, . ; rrf\i }{ti
..--.- .,1. .н~fі1і.-'і ,nнсані структурна та .,огічна схема проекту . Розроблена база
1" - - .. •
t'- · -с з6ёреж~ння .:rан1тх веб катзлогу фі пьмів . Також розроблено інтерфейс
."; '1!\ J, Gs ~ . .
_ qa та писав JIO['i основю програмн1 компоненти .
"( '-1' 52
'" }.І а -яастуrrно~1у етаm. система була протестована декількома метода.'1И
.-~~- а е,а_,1е за допо~югою: модульного, інтеграuійного, системного та
· ~ нoru r .., стування . Із наведених результатів видно шо система пройшла
11UNa.1Ь
ari· ..т али тестування .
,iJl[I1В а ,.,_ ...
В резу:rьтаті було наведено приклад впровадженого результату
.. m1oro ко~ексу.
~ jJ)~
57
Ч)1Т . 24 ОО .001 t П
ННСН()НКН
) ра іка., кв:.t1~іфіканійної роботи 6ак;1ланра на гс1 ,у «Ро-~робка Rсб к3·пuюrу
.
411.п t> 1j8• дн~~анн , ре3.11ізація та оптнміз:щія» було nиконано рял 1авщ-1н1~ які
. . '
.., 1.пн:n н створити функцюналь1-нп\ 3ручннй та ефективний веб-катало г
,1l1,,rl .
qii.11-ь 1 ів . На основt проведених досліджень, аналізу та реалізації , можна зробити
·rnri внсновкв .
'tfJC~
Проведений анаmз потреб і очікувань користувачів веб каталогу фільмів
nт,-азав важливість інтуїтивного дизайну та швидкого доступу до інформацй.
основні вимоги користувачів включають пошук, фільтрацію фільмів, а також
мож.mrвість перегляду детальної інформації про фільми, акторів і режисерів .
На основі 1'.1)ащих практик UX/UI дизайну був створений інтерфейс, який
забезпечує зручну навігацію і привабливий зовнішній вигляд. Враховано основні
...
аспекти взаємодн користувачів з додатком, що забезпечує позитивний
користувацький досвід.
Реалізовано основні функції веб каталогу фільмів, включаючи пошук,
фільтраиію, перегляд детальної інформації про фільми, акторів і режисерів .
. . .
Виконано оптим1зац1ю завантаження сторшок шляхом використання кешування
та мінімізапії файлів. Оптимізовані SQL-запити забезпечують швидкий доступ до
даних бази.
Впроваджено сучасні технології та фреймворки, що забезпечують надійну і
.масштабовану архітекrуру веб-додатку . Використання таких технологій як
JQuery, SpringВoot та PostgreSQL дозволило створити ефективну та стійку
систему.
Розробка веб каталогу фільмів підтвердила вюклив1сть комплексного
ШдХоду, який вюпочає аналіз потреб користувачів, створення продуманого
АИзайну, реалізацію функціональності та оптимізацію продуктивності . Отриман і
Результати демонструють, що правильно спланований і реалізований веб-додаток
може значно покращити користуваи.ький досвід та забезпечити ефективну роботу
системи.
58
-
ЧДТ 242002.00 ПЗ
СШІ ОК ВИКОРІІ Т НПХ ЖЕРЕ
1 Вікіпедія . Intemet 1о,іе Database. [Електронний ресурс] . - URL: https://
jpedja.or..., \\i1''1/lnternet_ 1oYie_Database
Our Hi-to~,. [Еле1:-..--гронннй рес ре] . URL:
1\\•eb.arcluve.or \veb/20130310030246 1ttps://\\ \'\\·.themo,,iedb . org/about/oнr-
3 Вікіпедія. Rotten Tomatoes. [Електронний ресурс] . URL:
•fuk _,\ikipedia.or~ \viki otten_Tornatoes
4 Лонг Д. Java в хмарі. Spring Boot, Spring Cloud, Cloud Foundry І Лонг Д. ,
ні к .. , 2019. - 624 с.
- Гугьєррес Фешпе. Spring Boot 2: найкращі практики д.,-ІЯ професіоналів.
·утьєррес, 2020. - 464 с. - (Бібліотека програміста).
6 Докука О. Практика реактивного програмування у Spring 5 І О. Докука,
~інський. , 2019. - 508 с.
Уоллс К . Spring в дії І Крейг Уоллс., 2022. - 544 с. - (6-е вид.).
8 Вадим Станкевич. Знайомимся з Spring Framework [Електронний
JC] . - URL: http://www.kv.by/index200929 l l 08.htm (дата звернення:
5.2024)
9 Вікіпедія . Don't repeat yourself. [Електронний ресурс]. - URL:
;://en.wikipedia.org/wiki/Don%27t_repeat_yourself
10 Вікіпедія. Архітектура клієнт-сервер. [Електронний ресурс] . - URL:
5://uk.w іkіреdіа.оrg/wіkі/Клієнт-серверна_ архітектура (дата звернення :
16.2024)
11 Система питань і відповідей про програмування [Електронний ресурс] .
RL: http://stackoverflow.com/ (дата звернення : 03.06.2024)
12 Керівництво по Hibemate [Електронний ресурс] . URL:
)://www.tutorialspoint.com/hibernate/ (дата звернення : 02.06 .2024)
13 Публікація по Spring З MVC + Spring Security + Hibemate [Електронний
СуРс]. - URL: http://habraliabr.ru/post/l 1l102/ (дата звернення : 02.06 .2024)
59
ЧДТУ 242002.003 ПЗ
14 Вікіпедія. Формат даних JSON [Еле1аронний ресурс] . - URL:
)tttp://uk.wikipedia.01·g/wiki/JSON (дата звернення: О 1.06.2024)
15 Методичні рекомендації до шдготовки кваліфікаційної роботи
бакалавра для здобувачів вищої освіти зі спеціальності 121 «Інженерія
програмного забезпечення» усіх форм навчання [Текст] /Укл.: Голуб С. В., Заспа
r.o., Куницька С.Ю., Півень О.Б. Катаєва Є.Ю., Салапатов В.І., Метелап В .В .,
Олексюк В .В.; М-во освіти і науки України, Черкас, держ. технол . ун-т. -
Черкаси: ЧДТУ, 2023. - 96 с .
16 Коул Р. Блискучий Agile. Практичний посібник для проєкт-менеджерів
із використання Agile, Scrum, Kanban / Р. Коул, Е. Скотчер . - Харьків: Фабула,
2020. - 192 с.
17 Мартін, Р. Чистий код: створення, анал1з, рефакторинг [Текст] / Р.
Марrін - ., 2019 - 464 с .
18 PostgreSQL [Електронний ресурс] Кращі практики:
https :// www.е 2 enetworks. соm/ЬІ о g/Ьest-practi ces-fo r-postgresq1 -database
19 НТМL Tнtorial W3schools. [Електронний ресурс]. - Режим доступу:
https://www.w3sclюols.com/html/default.asp
20 CSS Tutorial WЗsclюols. [Електронний ресурс]. - Режим доступу:
https ://www.w3sclюols.com/css/default.asp
60
L_
►
ДОДАТОК А
ТВЕРДЖЕНО:
ЗАС, професор
--4--~4-,С--"-- ГолубС.В .
РОЗРОБКА ВЕБ КАТАЛОГУ ФІЛЬМІВ З ВИКОРИСТАННЯМ
:уЧАСНИХ ВЕБ ТЕХНОЛОГІЙ: ДИЗАЙН, РЕАЛІЗАЦІЯ ТА ОПТИМІЗАЦІЯ
Специфікація
482.ЧДТУ.24 2002.003
Листів 2
Усанов І.М.
Розробник:
Салапатов В.І.
Керівник:
Черкаси 2024
н
І
І
І
Б -.\ВЕБ :клт_ ЛОГУ ФІЛЬ~ з ВИКОРИСТАІ-ШЯМ СУЧАСНИХ
fБ-ТЕХНО.l:ОГП1: ДІ1ЗАЙН, РЕАЛІЗАЦІЯ ТА ОПТИМІЗАЦІЯ
Текст програми
482.ЧДТУ.24 2002 12 01
Листів 13
Усанов І .М.
РозробНИІ<
Черкаси 2024
482 .ЧДТУ.24 2002 12 О 1 2
1 BACKEND ЧАСТИНА
l файл Movie.java
ckage ua.com . cinema . cinema .model ;
)port j akarta. pers і stence . Со luro11 ;
r.ro ort j akarta.persistence. Entity ;
nport jakarta . persistence . FetchType;
mport j akarta . persistence . Genera ted\ia. l t1e ;
mport jakarta .persistence.GenerationType ;
mport jakarta.persistence . I d ;
mport j akarta. persistence . Jo і n Co} ,_1mr. ;
.mport j akarta . persistence. Joi11Table ;
Lmport j akarta . persistence . МаnуТоМапу ;
Lroport j akarta. persistence . Ha:1yToOne ;
import jakarta.persistence. Table ;
import lomЬok. Cetter ;
import lomЬok . Sєtter ;
import java . util . Date ;
import java . util:List ;
~Gette:c
@Set Cer:
(с;;-,. ;- " r,.
- --·---У
@':"аЬ:..<О (name = " movies ")
publ ic class моvіе {
@Id
@GeneratedValue(strategY = GenerationType.IDENTITY)
private Integer id;
private String title i
P!iv~Le string ctescription i
@11an yToOne(fetch = FetchT ype.EAGER)
@JoinCoJ.uпm (name 6]
482. ЧДТУ.24 2002 12 О І
з
·vate Genre genre ;
prJ.
@мanyToOne(fetch = FetchType . EAGER)
@JoinColumn (name = "d i rE:!ctor i d " J
private Director di r ector ;
@мanyToMany(fetch = Fe t c hType. EAGER)
@Joi nTable ( name = "movies _ actors ",
joinCol umns = @JoinColшnл (
name = "movie i d", referencedColumnName = " i d " ) ,
inverseJoinColumлs = @JoinColumn (
name = " ac t or_id " , referencedColшnлName = " i d " ))
private List<Actor> actors;
private string country;
@Column(name = " added at " )
private Date added.At ;
private Integer year ;
private Integer duration;
private Double rating ;
@Column (name = "poster_url ")
private String poster ;
@Columл(name = "·trai ler_ ur·l " )
private String trailer ;
1·2 Файл MovieReposit ory .java
Package ua . com . cinema . cinema . repository;
import org . springframewor k. data . jpa . repository . JpaRepos itory ;
import org . springframewor k.data . j pa . r epos itory .Quc cy;
il!lport ua.com . cinema . cinema .model .Mov1· e ;
64
482.ЧДТУ.24 2002 12 01
4
. .,, util.List ;
J.ЗVc., .
()0rt
11'.
interface MovieRepository extends JpaRepository<Movie ,
iubliC
11te<J er:> {
з:)iJeo·( " select 1n from Novie m \v!1ere n1 . year= : curreвtYear order hy
l' ,
. ~ ")
-adedA:: aes ...,
/ , О
List<Movie> f i11dAl lNewMovies ( Integer currentYear) ;
@QІJery { " select ш from ,1ov i e ш wl1ere m. r ating>= : rating or der Ьу
:.ra::ing desc")
List<Movie> fi11dAllPopularMovies (Integer rating) ;
@Q11ery (" select ш from f,~ovie rn \-1!1ere m. title like ', : criteria .: or
п. . descrir)tion like ·:- : cr-iteria .'. " +
"or ю. director . ЇullNaшe like ~, : cri t eria '1, or 1n . geвre. 11arne
1і і:е ~. : с r і t е r і а 'А " )
List<Movie> findHovies (String criteria);
І.З Файл MovieController.java
Package ua . com. cinema . cinema. арі;
iD.Port org . springf ramework. ht tp . ResponseEnti ty;
ln:port org.springframework.web . bind.annotation . * ;
irnport ua .com.cinema . cinema . model .Movie;
it!1Port u . . мovieRepository ;
a . com . c1nema . cinerna.repos1tory.
iriPort
· java.time . Year;
lrnPort
· java . util . List ;
l!11r,()r t
java • u t·1 1 . Ор t і о n а 1 ;
65
5
lass мovieController {
· с с
P\Jpll . te . R . t
va мovie epos1. ory movi. eReposi t ory ,·р.О·
publiC мovieControl ler (MovieRepository movieRepos i t ory )
t hi s . movieRepositor y = movieRepository;
@crossOr i gin ( origins = 11 ·х 11
)
~:<-eq:..:estMappiпg ( 11 /nеи")
public ResponseEntity<List<Movie>> ge tNewMo vi es ()
i nt currentYear = Year.now() . getValue () ;
r eturn
ResponseEnti ty . ok (movieReposi tory . f indAl l NewMovies ( currentYear) ) ;
8C:::·oss0rigin (origins = 11 11
•.1- )
~~eques tИарріпg ( 11 / popular")
public ResponseEntity<List<Movie>> ge t Popul a rMovies () {
return
ResponseEnti ty . ok (movi eRepos i t o r y . f indAllPopularMovies (В )) ;
І
~CrossOr i gin (origins = " * ")
~Req·:estHappinq ( " / search ")
PUblic ResponseEntity<List<Movie>>
SE;~- -.,.C:h.!1 0 vi· es (@~ze.q11e s tPari1 гn ( "c ri ter1· a " ) string criteria) {
return
Resn
~0nseEnt 1· t ok (mov1. .eRepos1· t
. • · ) ) .
orу_ • findМov1es ( cr1 t er1a ,
у .
І
. •Rcpo~ i Lory . fi ndByl d( i d ) );
te t urn ResponseEnt1' t У · ok(JІIO V JC
66
482 .ЧДТУ .24 2002 12 О l
б
2 FRONTEND ЧАСТИНА
t<J,f (new-movies.html)
! новf'ІtІ
,· f{РЄ t,tml >
(!~ -"en" >
,,, 1гng-
(~''"1
(heQ,d >
ta cttarse t --"UTF-8" >
<<і1ll1iеe ta http-equ1• v= "Х -UA -С ompa t 1.. bl е " content=" IE=edge" >
(l!ieta name="viewport" content="width=device -width, init ial-scale=l. 0" >
(script src=" libs /j query /jquery -3 . б. 0 . min . j s" ></ script>
<script src=" libs /boots trap/bootstrap. bundle. min. j s" ></ script>
(Script src=" libs/fontawesome/fontawesome. js" ></script>
<script src=" libs/mustache/mustache .min . js" ></script>
(script src="js/movies. js"></script>
<link href=" css /boots trap. min. css" rel=" stylesheet" >
<link rel=" stylesheet" href=" css/style. css" >
<tіtlе>Вебкаталог фільмів</tі tle>
</head>
<body onload=" loadMovies ( 'new');" >
<nav class=" navbar navbar - expand-lg navbar-dark bg-dark" >
<div clas s="container-fluid">
<а class="navbar- brand" hrеf="#">Вебкаталог фільмів</а>
<button class="navbar-toggler" type="button" data-bs -
oggle--" collapse" data - bs - target="#navbarsupporte dе оп t en t"
aria -controls ="navbarSupportedContent" aria-expanded="false" аrіа -
аье _..
- Toggle navigation" >
5
<span class ="navbar-toggler-icon"></ pan>
<<d/bivu tctolna > " Ь ollapse" id=" navbarSupportedContent " >
ss= collapse nav ar -c
<Ul l t mb- 2 mь - lg - 0" >
с ass="navbar - nav me - au о
<li class="nav-item"> 67
482 .ЧДТУ.24 2002 12 О l
7
< о class="nav- l i nk active" ari a-current="page"
" >новин ки</ а >
,''#ne1.J •
rref, </11>
<1 . class=" nav- item">
1
< а class="nav- link" h ref="popula r- movies .html">Пonyляpнi< /a>
</li>
<l i class="nav-item dropdown ">
< а class="nav- link dropdown- toggle" href="#"
oropdown" role="button" data -bs -toggle="dropdown"
"navьar
id~ aria-expanded="false" >
жанр
</а >
<ul cl ass="dropdown -menu" aria- l abelledby="navbarDropdown">
<li><a cl ass="dropdown-item"
href="#" >документальний</ а> < / li >
<li>< a cl ass="dropdown-item" hrеf="#" > Історичний< /а> </ lі >
<li>< a cl ass="dropdown -item" href="#"
onclick="showByGenre( 'Action ' );" >Action</a></li >
<li >< a class="dropdown-i tem" href="#" > Комедія</а ></lі>
<li><a class="dropdown-item" href ="#"
onclick="showByGenre( 'Drama'); ">драма< /а >< /lі >
<li>
<hr cla ss ="dropdown-divider" >
</li>
<li>< a class="dropdown-item" h ref="#">Бiorpaфiя</a ></ li>
</Ul >
</li >
</Ul >
<div class="d-flex">
<i nput class="f orm- control me-2" t ype="searc h"
Placehold er=" Sear ch" i d="search -cr1. t er1. a " >
<button class ="btn btn-outline- success"
0nelick =" searchMovies (); ">Search</button >
</div>
</div>
</div>
</nav>
<sect .
lon i d="search" class="none" >
<hl >p
езультати пошуку: </hl>
68
482. ЧДТУ.24 2002 J2 о І
8
.. arc li-message" ></ 11 5>
·d- se
(115 J. -
s-"co11tainer ру - 5">
· 11 cias -
<d J. . iass="row row-col s-1 row- cols -md- 2 g -4" id="search -mov ies">
dJ.V с .
search movies -->
<,--
<fdiV>
/diV>
. n>
<fsect10
·d- ''new" >Нови нки< / hl>
<h1 1 -
. ciгs s= "container ру - 5 " >
(d<lVdiV class="row row-cols-1 row- cols-md-2 g-4" id="new-movies">
<! -- NeW movies -- >
<І di V>
(/diV>
<! -- participant moda l s - ->
<div class="modal fade" i d="extendedMovieinfoModal" tabindex=" -1"
·v:e="dialog" ari a-labelledby=" exampleModalLongTi tle" aria-hidden="true" >
<div class= "modal-dialog" role="document ">
<div clas s="modal-content">
<div class=" modal-header" >
<h5 class="modal- title" i d="movie-header" ></hS >
</div>
<div class="modal - body" id="movie-extended">
</div>
<div class="modal-footer" >
,,,,. <button type="button" class="btn btn -secondary"
' ·,.1ck,-_" closeмovieForm( ); ">Close</button >
''an~ <! - - <button type=" button" class =" btn btn -prima ry" >Save
6€S</button > - - >
</div>
</div>
</ div>
Чdiv>
<foot er с 1a ss="bg-dark text -center text -white" >
69
р
-,- . -- ..... : - -
= - -
- - ---. --= ----=- - - ---=- --=- --- --=-== '" =
- -=а~5 ТТ-: r
:..>< 2>
- - - - -----= - -=-ь--
-- - ~- - :-:--= -- --= -
- -----
__ ,.
---~- ------- - - ...
.,...,, -_- -
- - 1 ·
:_-:-.::.,..., ..r<:. -:_~;;= -- .::ё::: .::ё-~ --,_ : :: ></:.. ></а>
=~ : :::,- /
-_-_,- :-;_~ ~- =• rо. ,_ ,є - >
.?::5 - ~с алог ,;>іль.ч.ів є інс PY"'-€nTOJІ.i, <br> ~ спродує доступ до
І<ё -: -=: ~G~> ;ю різном,,ан:тні філЬl"л дпя ~po~oro загалу користувачів.
70
482 .ЧДТУ.24 2002 12 01
10
< ІР>
<fsection>
<!-- section: техt -- >
ction: Links -->
<!-- Se
< sectiOП clas s="" >
<!- -Grid row-- >
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Hoвинки</h5>
<ul class="list-unstyled mb-0">
<li>
<а href="#new" class="text-white">Пeperлянyти</a>
</li>
</Ul>
</div>
<1--Grid column - ->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<hS class="text-uppercase">Пonyляpнi</hS>
<ul class="list-unstyled mb-0">
<li>
<а href=''#popular" clas s="text -white">Пoвepнyтиcя</a>
</li>
</li>
</Ul>
</div>
<!- -Grid column- ->
<!--Grid column - - >
<div class="col - lg-3 col-md-6 mb-4 mb -md -0" >
<hS c la ss ="text-uppercase" >Peкoмeндoвaнi </hS>
<ul class="list-unstyled mb -0" >
<li>
"text whіtе" > Здивуйте мене</а >
< а href="#!" с 1 ass= -
7 1
r 482.ЧДТУ. 24 2002 ] 2 о\
11
</li>
</ul>
</diV>
Gr.l d column - - >
<! - -
<!--Grid column -->
<diV class="col-lg-3 col-111d -6 nib-4 mb-md-e">
<hS class="text-uppercase">Aнiмoвaнi</hS>
<Ul class="list-unstyled mb-0">
<li>
<а href="#" с 1 ass= " tехt-whіtе">Глянути</а>
</ li>
</Ul>
</diV>
<!- -Grid column-->
</diV>
<! - -Grid row- - >
</section>
<! -- section: Links -->
</d iv>
<! -- Grid container - ->
<! -- Copyright -->
<div class="text-center р-3" style=" background-color : rgba (0, 0, 0,
0.2); ">
@ 2024 Copyright:
< а clas s= "text-whit e" h ref=" https: / /mdbootstrap. com/" >Веб-каталог
фільr,,і в</ а>
</div>
<!-- Copyright -->
</footer>
</bocty>
</html>
2·2І lІаб лон в·щ ображення фільму (mov1· es.I1tml)
<script l.d =" mov. 1es-template" type="x-tmp1 -mu 5tache " >
72
482.ЧДТУ.24 2002 l2 О l 12
{#n,ovieS}}" " . "
:div ciass= со1,, oncl1ck= sh~wExtendedinfo( {{ id }} ) ; ">
<diV class= card card-an1mation">
<img height=" 270" src="{{ poster }}" class="card-img-top">
<diV class="card-body">
<h5 class="card-title">{{ title }} ({{ year }})</hS>
<hб class="genre-label">{{ genre.name }}</hб>
<hб class="orange">{{ duration }}m <і class="fa-solid fa
"></ i> {{ rating } }/ 10< /hб>
stгr <hб class="blue"><i class="fa-solid fa-film"></i> <а href="{{
·ier }} " target="_blank" >Watch trailer</a></hб>
tr31
<Р с 1 ass= " card - t ех t " >{ { description }}</р>
</diV>
(/diV>
(/diV>
{{ /movies}}
</script> .. . ... .
Шаблон розширено~ 1нформац11 про фшьм (movie-extended.l1tml)
23
<script id="movie-extended-template" type= "text/template" >
{{#movies}}
(div class="col">
<div>
<img height="270" src="{{poster}}" class="card-img-top">
<div class="card-body">
<div>
<hб class="blue"><i class="fa-solid fa-film"></i> <а
href=" {{trailer}}" ta rget=" _blank" >Watch trailer</a></hб>
<hб class="orange">{{duration}}m <і class="fa-solid fa-
star"></i> { {rating} }/10 </hб>
<hб class="genre-label">{{ genre.name }}</hб>
</div>
<hS>Actors:</hS>
<img src="./img/actors /{{ l.d }}.png">
<hS>Director:</hS>
<img height="92" class="director- img"
src," .
' ./img/ directors/DavidLei tch • j pg" >
<р class=" label">{{director.fullName}}</p>
<І- - <hS class="card-title">{{title}} ({{year}})< / hS> - ->
73
482.ЧДТУ.24 2002 12 О І
І З
<Р class="card -text">{{description}}</p>
<./diV>
<. / diV>
/diV>
< /n,ovies}}
{{
;scr1· pt>
74
.1O..1А ТО1': В
1є; S:..~--~---::огу Ф Th. З ВІП"ОРНСТ_-\l--П--І5ТhІ CYЧACI-llIX
=~о----=о~.. =. -- --:- в_-\ЙІ-{~ РЕ.-\..l ІЗАШЯ ТА ОШІD.ПЗАШЯ
- - -
---=С"Ч)~-:--'-(і]] F корвстувачев1
..,шстів б
І' ,,, УсановІ.М.
Розробник
І
Черкаси 2024
482 .ЧДТУ.24 2002 34 01 2
ІJісЛЯ запуску каталогу, користувач може бачити головну сторінку з відео
обrоркоJО на задньому фоні, що зображена на рис. В.1.
Рисунок В.1 - Вигляд головної сторінки каталогу фільмів
Натиснувши на стршку до низу, користувачу відображається основний
контент сторінки (рис. В.2). У верхній частині розміщено меню сайту для
навігації. По сере~ині - основний контент у вигляді списку фільмів. В нижній
частині знаходиться службова інформація сайту, з дублюванням деяких пунктів
навігації.
Новинки
c lvll war (20241
ТWlstors (20 24 1
С!І:!) ~
l-'l 1, 'XJ, 1c. t:.:irw 1,w. ,, 1"1•r.-.1щt" ,.,..,н:t,(с,·\1..-~н:,, ~ ,~1 1.Jl
tl~n, ()►•~~ f\ІЮ/Ф'І IJ II( і І ..,) ІJІ ~П nlttl"IIP: cote ,1 іІ'
Рисунок В .2 - Вигляд головної сторінки каталогу фільмів
76
482.ЧДТУ.24 2002 34 01 з
фІ·льми відображені у вигляді 1<' арто~< (р ис . в .З ) у верхній частині якої
,одиться постер фільму, під ЯІ<им назва та рі1< випуску. 1~1ижче знаходиться
3ІІ~Х .
інФорма11ія ттро тривал1сть, рейтинг, трейлер та короткий опис фільму .
тwisters (2024) Civil War (2024)
~ СШі)
11~m * 6/10 lO!Іm t( 7/10
в WDtch trail!:l
м uod.)tC 10 tІ,о 199G fllm 'lwl~or. wl,Іch ccrнo1cd 01, J pJir of ЛJoumoy :icro-:5 J cJy-:;:opl:1n 1u tu10 лмсrісJ. fо'Іс-1, Іn9 J tNn1 :,f
~O(m ch,,,;('lr~ ,vl10 ri~J< rt,cir tivo'"• lti ,1r, :нtomnt ,n t('!',t :in 1nlli1,1ry ornbod dod jo,нn.,Іi~.tr, :\5 rhoy mcn .19:1i11st r imo Іn ,o.,ch DC
0'pc<1mnntol vюntl,or nІorr ,yston,. І bofo,o rcbcl І~С1 ІОП5 d 05C0'1d upon t l ,o Wni:.e Hou~o.
Рисунок В.З - Картки фільмів
Для перегляду розширеної інформації про фільм, необхідно навести на
11ього вказівником миші та натиснути лівою клавішею миші, після чого з'явиться
діалогове вікно (рис. В.4) з детальною інформацією про вибраний фільм. В
додатковій інформації можна переглянути офіційний трейлер фільму, жанр,
тривалість, рейтинг а також є можливість побаt1ити основний акторський склад
та режисера фільму.
Для пошуку бажаного фільму, користувачу сшд у поле пошуку, яке
знаходиться у верхній правій частині головного меню, ввести критерій для
пошуку, після чого натиснути на кнопку пошуку «Searclш . У разі з находження
Фільму ло даному критер~ю, він буде відображений користувачу у результnтах
nowyкy (рис. В . 5) .
77
482 .ЧДТУ.24 2002 34 01 4
l\,vistcrs (2024)
д,, upd.3tC 10 1І1,:, 199G Г. Іm ·r.,,i,t~!'. ,v1,1c1, CN1t,)r('(.1
оп а paif оі stor,r, chusurs "•.,})о risk \h~it 1,vos 1n c.1n
atti!'mpt to te<St ttn P.xPcrimeint ї:ІI weather al~·t systP.IТ'
Actors: ..
І.і'І
Рисунок В .4 - Розширена інформація про фільм
,.,,
_ каталоrфt11ьмів но11инки По11у11щш1 Ж,тр • - '
Результати пошуку:
Twisters (2024)
~
Aнi1r,<fol e to 11,.- 19:~ f1І,,, T.v .,_ I
1tit. ,,,,~ п Crf\І ~1r(1 о') о 1,1t o f
'.tt 111, (По'..t:І:, ✓11)0 f 1'.,k, t.Л,;-11 ІІ J~') 11 c n .,~t~н,р: ~() t ~ ;_,t d l\
(:.., r~,1~ ef\t6 aeьthtr \)\~ r t !.~a·m
Рисунок В.5 - Результати пошу1<у
78
482.ЧДТУ.24 2002 34 01 5
також користувач мас змогу відфільтрувати фільми за певним жанром , для
головному меню потрібно натиснути на пункт «)Канр» та у списку, що
111,oro У . . .
я ' необхщно вибрати вщповщний жанр фільму (рис. В . б) :
з ·я1н1тьс
Tw,ste,s
Історични,1
=>Тати пошуку:
Act,on
Ко ... ,щ,~
Рисунок В .б - Вибір жанру фільму
Після вибору користувачем відповідного жанру, відобразяться фільми
обраного жанру (рис. В .7) .
Результати пошуку:
Gladiator (2000)
с::)
с:3
~ ~•• .;t~N"!': .. "\ ·~·~... . ~~:""' •!1,,y
Jrl'"f>IIIIJ' '·• •n-;•• rf~t\"'1CM.:W-№~
\h"t to,.;~
lwisters (2024)
(3
1WlnwWІO
м-- ІC.>.C.r .eeo.. 1 11t u;i; t- -1v.l=ttf .,.,.cr, c,n-:,,,4"" • ~ '~t =rn сІ'"""
-. ....._ ...
Рисунок 8 .7 Фільми жанру «Асtіоп»
79
482.ЧДТУ.24 2002 34 01 6
розр облений додаток таr<ож володіє адаптивністю ' що дозволяє ним
'1'"\/Ватися
pt4C•; на мобільних пристроях, таІ<их ЯІ< планшет та телефон. Вигляд
~о на мобільному пристрої зображено на рис. В.8.
~ara.rt0rY
~м~' ,•.:;. .~~:{.~,'"~{'=:"=~~¼-l,"',~-f~,r,'-,-9,,."", .,?// {·:;~;:.r~~::·:,~~·:t~'/f·)j
i 1,;~r(. -,.,-,,, "=>• • ~
~--f. · .t·. (;'~(t'
t: ~ ~ ':r .,. ·. r,, ')
. .
'
f,
Нооинки
, тwlstors (2024)
с::,
ow,шu:.11-111
i~Hfl~
Рисунок В . 8 - Мобільна адаптація каталогу
80
ДОДАТОК Г
рОЗРОБКА ВЕБ КАТАЛОГУ ФІЛЬМІВ З ВИКОРИСТАННЯМ СУЧАСНИХ
ВЕБ ТЕХНОЛОГІЙ: ДИЗАЙН. РЕАЛІЗАЦІЯ ТА ОПТИМІЗАЦІЯ
Графічні матеріали
482 .ЧДТУ.24 2002-01 90-01
Листів 8
Розробник Усанов r.м.
Черкаси 2024
482.ЧДТУ.24 2002 90 о 1 2
кваліфікаційна робота бакалавра
здобувач:
Усанов І. М.
Керівник:
салапатов В. І.
Рисунок Г. 1 - Титульний слайд
Вступ
1
. Актуальність розробки веб каталогу фільмів пов язана з
швидким розвитком кінематографічної індустрії та потр·ебою у
платформах для зручного пошуку та перегляду інформації про
новинки, трейлери, оцінки та популярні фільми .
• Мета розробки - створення інтерактивного веб-додатку
каталогу фільмів, що забезпечує користувачів необхідною
інформацією для пошуку та вибору для перегляду.
• Об1єктом розробки є процес створення ПЗ інформаційної
технології веб-каталогу фільмів, що забезпечує користувач і в
інформацією про різні фільми.
2
Рисунок Г.2 - Вступ
82
482 .ЧДТУ.24 2002 90 01
з
первинні та детальні вимоги
первинні вимоги замовника: Детальні вимоги розробника:
~кціональні Функціональні
Фільтрація фільмів • Створення дизайну зручного та
• детальна інформація про фільм привабливого інтерфейсу
• пошук • Використання алгоритмів та новітніх
технологій, які раніше не були
tLефvнкuіональні застосовані у подібних продуктах
• Безпека даних Нефункціональні
• швидкодія • ОС: Windows 8+, macOS 12+, Linux
• масштабованість • ОЗУ: 4Г
• Крос-платформеність • ЦП: lntel Соге іЗ +, AMD аналог
з
Рисунок Г.3 - Первинні та детальні вимоги
4
Аналіз аналогів
Рисунок Г.4 _ Аналіз аналогів
83
482 .ЧДТУ.24 2002 90 0 1
4
Діаграма прецедентів
Веб каталог фільмів
Фільтрація
о
-1-
ег ляд детальної інфо
гравець
Пошук
5
Рисунок Г.5 - Діаграма прецедентів
Проектування логічної структури
Діаграма класів Діаграма пакетів
~ .. ~~
t.:.,._ _ - - •
f •r.:o-;W•-'<t.of• • с,,е-,:),,, о.а
, -• С;~1'~ ().se;\O( • р.'ІС1О S<m9
°'" а ~ І<МQ
І .. р:,о:,, kv? І і <our1 S<mQ
І - ~ •t G<n'•
-11 .•- ,а, ~ І .: ..._
І -~ Stal"1
І 4Gf'fl~ uu
~
J ~ (h;L'(J-f
J,, . ~-ІА.Іо ._S<,.,.o,g
J • Qt/'"9 Оо,ь:,
t • t1aZ S<.1r,g
б
Рисунок Г.6 - Проектування логічної струК'І)'рИ
482. ЧДТУ .24 2002 90 О І
5
дрхітектурне проектування
Діаграма компонентів
Діаграма розгортання
А ~
• t+ '( i=;:;::,::;::;:::::::::::::::::::;,,· ~
; ,,
· . 1~.~ . ,{
; ,.·
----0\ І-=- 1·
··•.
.-i.--::;;.:.·•·•J ,, = ;;~
... ·{ ~ ,,-
7
Рисунок Г. 7 - Архітек-rурне проек-rування
Моделювання поведінки системи 8
Діаграма діяльності Діаграма послідовності
І client ! І Con~oller 11 Servlc• 11 Repo1ltory 8
Post~res
0
~ ~ i::it.,.rA, i:::wr• tXt(ultO.,.ry ►'
-.,."'W.\~Wllf ~. . с:\-..tАІ ui~
~--~!.~~!'... ..
LJ.~t<)'~v1e>
,~••оо•----"•,
... u~t.(ИQV1C") І
~ ·~_:.--&,~ ---·--·
-------..: ~ - i--- --' , L1 Jt ~v!.c> ,
~
-< •
І cl~ntj j controller 11 Servlce J I Repo,Іtory Роt:Г
Рисунок г .8 - м клювання поведінки системи
од
85
4~L. УДТУ.24 2002 90 О І ()
моделювання поведінки системи
Діаграма комунікацій Діаrрама скінченного автомату
-----2: nі.,л1111а~.я обj,•ноrо u11py '"""'~·~Ptrr..r•!'", ,о.LУЧ
З: О rp,t,щщJ 1,езу.,н•1іа
9
Рисунок Г.9 - Моделювання поведінки системи
Структурна схема Функціональна схема
Froщe11d 1·················: і ................................................. ·-··········· ··
і
- -----1
;,.c.'J'ft,,i ;~}J
с-n:ю
Cllent slde
Backe11d І
І
: :
і :
: Frontcncl [ ! B:1ckct1d
І
............... -~ ,. ............ .......... .......... ···-- о=~-- .. .
~
о,,,,µ,
10
Рисунок Г. 1 о _ Структурна та функціональ11 а схема
86
4 - .ЧдТУ._4 _QQ_ 90 Ot 7
структура бази даних
~
0 publlc
Р dlгectors
rd
j fu Name
J i.,holo
i1'a~_ld J country
J уєа.r
~
5 ~er_tn1 <3> public
с ---- iJ trгjє;_ur1
С: genr•s
5 ccuntry
,,,':> id
в l'З1ing j name 1
) ,
11
Рисунок Г .11 - Структура бази даних
Ї"'-157.егs [2024)
Рисунок г . 12 - Інткрфейс корисrувача
87
482 -ЧДТУ.24 2002 90 01 R
тестування
еrруктvра
Результати проходження тестів
s -mov es, , ,
teme!~eld) •----.--------- ПІ_)~ставnення -----·-· ___ -
:; !$(t;mplate):filter('#'+templateld).htmІQ Підвантаження Усп ішно . !
необхідного шаблону
- - ----- --- - - ---·- ----:_ --~І!~с_та~'!~..Ня
Uf \Іustache.re·nd er(templateM·ov ie, ·{m ov·ies :: .m. •o·v. ies }). - з,а.по внення шаблону Успішно f:[j
ани"'!!''!. ..-~-І...---'-'-'-~. ....... .....___._
тестування створеного програмного продукту довело адекватність програмної реалізації
розробленим алгоритмам. 13
Рисунок Г. 1 3 - Тестування
дякую за увагуІ
11
J~. 14 _ Дякую за увагу
Рисунок
88