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/9039| Title: | Програмне забезпечення WEB-сторінки кафедри ПЗАС |
| Authors: | Метелап, Володимир Володимирович Запісочна, Софія Сергіївна |
| Keywords: | WEB-СТОРІНКА;ПРОГРАМНЕ ЗАБЕЗПЕЧЕНЯ;КАФЕДРА ПЗАС;ОНОВЛЕННЯ КОНТЕНТУ;CMS WORDPRESS;ІНТУЇТИВНИЙ ІНТЕРФЕЙС;СТРУКТУРУВАННЯ ІНФОРМАЦІЇ;АНГЛОМОВНА ВЕРСІЯ;ТЕСТУВАННЯ;ІНФОРМАЦІЙНИЙ РЕСУРС;WEB PAGE;SOFTWARE;DEPARTMENT ASS;CONTENT UPDATE;CMS WORDPRESS;INTUITIVE INTERFACE;INFORMATION STRUCTURING;ENGLISH VERSION;TESTING;INFORMATION RESOURCE |
| Issue Date: | 7-Jun-2025 |
| Abstract: | АНОТАЦІЯ
Виконавець: Запісочна Софія Сергіївна.
Назва роботи: «Програмне забезпечення WEB-сторінки кафедри ПЗАС».
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет»
м. Черкаси, 2025р.
У кваліфікаційній роботі розглянуто процес розробки оновлення web-
сторінки кафедри ПЗАС Черкаського державного технологічного університету.
Метою виконання є створення сучасного, інформативного та зручного web-
ресурсу, який забезпечує ефективну взаємодію користувачів з інформаційною
системою кафедри.
Головні завдання при проектуванні інформаційної системи охоплюють:
аналіз предметної області, вивчення потреб цільової аудиторії, формування
функціональних та нефункціональних вимог, логічне структурування вмісту,
розробку інтерфейсу з інтуїтивною навігацією, реалізацією двомовної версії
сторінки та виконання тестування на функціональність.
Об’єктом роботи є інформаційний потік, який відображає діяльність
кафедри ПЗАС та поширюється через її web-сторінку.
Предметом розробки виступає web-сторінка кафедри – як зручне, швидке та
функціональне програмне забезпечення з інтуїтивно зрозумілим інтерфейсом.
У результаті виконання поставлених завдань створено оновлену web-
сторінку кафедри ПЗАС, яка відповідає потребам користувачів, завдяки зручному
доступу до актуальної інформації, покращеній навігаційній структурі та
сучасному дизайну.
Обсяг роботи – 183 сторінки, вона містить 3 розділи, 1 таблиця, 74 рисунки,
41 джерело в переліку посилань, 4 додатки. ANNOTATION Performer: Zapisochna Sofiia Serhiivna. The title of the work: «Software WEB pages of the PZAS department». Specialty: 121 Software Engineering. Educational institution: Cherkasy State Technological University, Cherkasy, 2025. The qualification work considers the process of updating the web page of the Department SAS at Cherkasy State Technological University. The aim of the work is to create a modern, informative, and user-friendly web resource that ensures effective interaction between users and the department’s information system. The main tasks in designing the information system include: analysis of the subject domain, study of the target audience’s needs, definition of functional and nonfunctional requirements, logical structuring of content, implementation of a bilingual version of the page, and functional testing. The object of the work is the information flow representing the activities of the Department SAS, distributed through its web page. The subject of the development is the department’s web page as a convenient, fast, and functional software product with an intuitive interface. As a result of the completed tasks, an updated web page of the Department SAS was created. It meets user needs through convenient access to relevant information, improved navigation structure, and modern design. The developed web pages serve as an effective tool for presenting the department’s activities in the digital space. The thesis comprises 183 pages, includes 3 chapters, 1 table, 74 pictures, 41 references in the bibliography, and 4 appendices. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9039 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Запісочна Софія Сергіївна.pdf Restricted Access | 4.3 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
ЧДТУ 252152.005ПЗ
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
«бакалавра»
на тему: «Програмне забезпечення WEB-сторінки кафедри ПЗАС»
Виконала: студентка 4 курсу, групи ПЗ-2104
спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напрямку підготовки)
Студент Запісочна С.С.
(прізвище та ініціали)
Керівник Метелап В.В.
(прізвище та ініціали)
Рецензент Захарова М.В.
(прізвище та ініціали)
Черкаси 2025
6
ЧДТУ 252152.005ПЗ
АНОТАЦІЯ
Виконавець: Запісочна Софія Сергіївна.
Назва роботи: «Програмне забезпечення WEB-сторінки кафедри ПЗАС».
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет»
м. Черкаси, 2025р.
У кваліфікаційній роботі розглянуто процес розробки оновлення web-
сторінки кафедри ПЗАС Черкаського державного технологічного університету.
Метою виконання є створення сучасного, інформативного та зручного web-
ресурсу, який забезпечує ефективну взаємодію користувачів з інформаційною
системою кафедри.
Головні завдання при проектуванні інформаційної системи охоплюють:
аналіз предметної області, вивчення потреб цільової аудиторії, формування
функціональних та нефункціональних вимог, логічне структурування вмісту,
розробку інтерфейсу з інтуїтивною навігацією, реалізацією двомовної версії
сторінки та виконання тестування на функціональність.
Об’єктом роботи є інформаційний потік, який відображає діяльність
кафедри ПЗАС та поширюється через її web-сторінку.
Предметом розробки виступає web-сторінка кафедри – як зручне, швидке та
функціональне програмне забезпечення з інтуїтивно зрозумілим інтерфейсом.
У результаті виконання поставлених завдань створено оновлену web-
сторінку кафедри ПЗАС, яка відповідає потребам користувачів, завдяки зручному
доступу до актуальної інформації, покращеній навігаційній структурі та
сучасному дизайну.
Обсяг роботи – 183 сторінки, вона містить 3 розділи, 1 таблиця, 74 рисунки,
41 джерело в переліку посилань, 4 додатки.
Ключові слова. WEB-СТОРІНКА, ПРОГРАМНЕ ЗАБЕЗПЕЧЕНЯ,
КАФЕДРА ПЗАС, ОНОВЛЕННЯ КОНТЕНТУ, CMS WORDPRESS,
ІНТУЇТИВНИЙ ІНТЕРФЕЙС, СТРУКТУРУВАННЯ ІНФОРМАЦІЇ,
АНГЛОМОВНА ВЕРСІЯ, ТЕСТУВАННЯ, ІНФОРМАЦІЙНИЙ РЕСУРС
6
ЧДТУ 252152.005ПЗ
ANNOTATION
Performer: Zapisochna Sofiia Serhiivna.
The title of the work: «Software WEB pages of the PZAS department».
Specialty: 121 Software Engineering.
Educational institution: Cherkasy State Technological University, Cherkasy,
2025.
The qualification work considers the process of updating the web page of the
Department SAS at Cherkasy State Technological University. The aim of the work is to
create a modern, informative, and user-friendly web resource that ensures effective
interaction between users and the department’s information system.
The main tasks in designing the information system include: analysis of the
subject domain, study of the target audience’s needs, definition of functional and non-
functional requirements, logical structuring of content, implementation of a bilingual
version of the page, and functional testing.
The object of the work is the information flow representing the activities of the
Department SAS, distributed through its web page.
The subject of the development is the department’s web page as a convenient,
fast, and functional software product with an intuitive interface.
As a result of the completed tasks, an updated web page of the Department SAS
was created. It meets user needs through convenient access to relevant information,
improved navigation structure, and modern design. The developed web pages serve as
an effective tool for presenting the department’s activities in the digital space.
The thesis comprises 183 pages, includes 3 chapters, 1 table, 74 pictures, 41
references in the bibliography, and 4 appendices.
Keywords. WEB PAGE, SOFTWARE, DEPARTMENT ASS, CONTENT
UPDATE, CMS WORDPRESS, INTUITIVE INTERFACE, INFORMATION
STRUCTURING, ENGLISH VERSION, TESTING, INFORMATION RESOURCE
7
ЧДТУ 252152.005ПЗ
6
ЧДТУ 252152.005ПЗ
7
ЧДТУ 252152.005ПЗ
6
ЧДТУ 252152.005ПЗ
ВСТУП
Актуальність теми. У сучасних умовах розвитку технологій та засобів
web-розробки зростає потреба в оновленні інформаційних ресурсів з урахуванням
вимог до UI/UX дизайну, тобто функціональності, структурованості та зручності
інтерфейсу. Особливо це стосується освітніх web-ресурсів, які мають
забезпечувати зручний доступ до актуальної інформації, бути логічно
організованими та зрозумілими для широкого кола користувачів.
Існуючий ресурс кафедри ПЗАС потребує оновлення як у частині
візуального подання, так і у побудові внутрішньої логіки. Саме тому проект
розробки оновленої web-сторінки розглядається як повноцінне програмне
забезпечення з визначеним функціоналом, вимоги та життєвим циклом. Такий
підхід вимагає системного проектування, моделювання структури, реалізації
двомовного інтерфейсу, тестування й подальшого супроводу.
Отже, актуальність теми полягає у розробці оновленої web-сторінки
кафедри ПЗАС, вирішенні її практичного завдання засобами інженерії
програмного забезпечення з урахуванням сучасних вимог до структуру, взаємодії
та підтримки інформаційних ресурсів у сфері вищої освіти.
Мета і завдання розробки
Метою розробки є створення програмного забезпечення для оновлення
існуючих web-сторінок кафедри ПЗАС Черкаського державного технологічного
університету, яка матиме покращену логічну структуру, сучасний інтерфейс і
повноцінну функціональність. Web-сторінка повинна забезпечити легкий доступ
до актуальної інформації про діяльність кафедри, підвищити інформативність
ресурсу та поліпшити комунікацію з користувачами, у тому числі з іноземними
завдяки наявності англомовної версії.
Завдання розробки включає в себе:
1 Аналіз поточного стану ресурсу:
проаналізувати наявну версію web-сторінки кафедри;
визначити недоліки в структурі, дизайні та змісті.
2 Огляд та вибір технологій:
6
ЧДТУ 252152.005ПЗ
дослідити можливості CMS для створення web-сторінок (зокрема
WordPress);
обґрунтувати вибір платформи та інструментів для реалізації
оновленої сторінки.
3 Проектування структури web-сторінки:
побудувати оновлену структуру сторінки з урахуванням логічної
організації розділів (Новини, Про Кафедру, Вступнику, Студенту
тощо);
визначити взаємозв’язки між компонентами web-сторінки.
4 Реалізація web-сторінки кафедри ПЗАС:
реалізувати структуру та дизайн сторінок із урахуванням зручності
користування;
наповнити розділи актуальним та інформативним контентом;
створити англомовну версію ресурсу.
5 Тестування та оцінка:
протестувати коректність роботи функціоналу та відображення
сторінок;
проаналізувати звучність навігації та сприйняття інформації.
6 Оцінка результатів:
визначити відповідність реалізованої сторінки поставленим цілям.
Таким чином, визначена мета та набір завдань дають можливість створити
web-сторінку кафедри ПЗАС як зручний, інформативний та доступний ресурс для
широкого кола користувачів.
Об’єкт розробки. Об’єктом розроби є розробка програмного забезпечення
для web-сторінки кафедри ПЗАС Черкаського державного технологічного
університету, яка буде розміщена на субдомені офіційного сайту
(pzas.chdtu.edu.ua) навчального закладу. Вона виконуватиме роль інформаційного
ресурсу для представлення діяльності кафедри, включаючи її структуру, кадровий
склад, освітні напрями, наукові проекти, актуальні події та інші відомості. Web-
сторінка включатиме розділи, призначені для студентів, абітурієнтів, викладачів
7
ЧДТУ 252152.005ПЗ
та міжнародних партнерів, а також забезпечуватиме доступ до важливої
інформації українською та англійською мовами. ЇЇ створення буде сприяти
підвищенню доступності та зручності у взаємодії користувачів з кафедрою.
Методи проектування та конструювання
В процесі оновлення web-сторінки кафедри ПЗАС буде використано низку
методів, які включають як етап проектування, так і етап конструювання.
Методи проектування. Проектування web-сторінки передбачатиме логічну
організацію вмісту, планування зв’язків між розділами та визначення зовнішнього
вигляду інтерфейсу. На цьому етапі будуть використовуватись основні методи:
структурне логічне проектування: дозволить створити оновлену
структуру сторінки, яка включатиме основні розділи, їхню ієрархічну організацію
та підпорядкування відповідно до потреб цільової аудиторії;
моделювання UML-діаграм: дасть графічне зображення структури,
поведінки та функціонування системи. Під час роботи будуть створені такі
діаграми: прецедентів, класів, пакетів, компонентів, розгортання, діяльності,
послідовності та скінченного автомату (станів);
візуальне планування інтерфейсу: дасть можливість попередньо
визначити розташування ключових елементів сторінки, що забезпечить зручність
навігації та логіку взаємодії користувача з контентом.
Методи конструювання. Реалізація оновлень web-сторінки кафедри буде
виконуватися за допомогою візуальних інструментів для керування структурою та
вмістом. На цьому етапі використовуватимуться такі методи:
редагування сторінок за допомогою візуального редактора: дозволить
змінювати структуру, оформлення та вміст сторінки;
оновлення інформаційного наповнення: включатиме коригування
текстових матеріалів, додавання зображень, оновлення гіперпосилань і
заповнення розділів актуальним контентом;
створення англомовної версії сторінки: забезпечить доступ до
інформації для іноземних користувачів;
тестування функцій та зручності використання: передбачатиме
8
ЧДТУ 252152.005ПЗ
перевірку працездатності елементів, логіки навігації, коректності обох мовних
версій, а також загального користувацького досвіду.
Таким чином, використання зазначених методів дозволить обґрунтовано
спроектувати та успішно реалізувати оновлену web-сторінку кафедри ПЗАС
згідно поставлених завдань та вимогам користувачів.
Опис отриманих результатів. В результаті виконання кваліфікаційної
роботи бакалавра було оновлено web-сторінку кафедри ПЗАС Черкаського
державного технологічного університету. Зміни торкнулися як логічної
організації сторінки, так і її візуального дизайну та інформаційного вмісту.
Було сформовано оновлену структуру web-сторінки, яка включає всі головні
напрями роботи кафедри. До ключових розділів входять: «Новини», «Про
кафедру», «Вступнику», «Студенту», «Наукова діяльність», «Проекти», «Заходи»,
«Анкетування», «Акредитація». Кожен із розділів має зрозуміле наповнення, що
відповідає його темі.
Змінено оформлення сторінки – оновлено палітру кольорів, шрифти та
структуру блоків, що покращило сприйняття контенту. Запроваджено покращену
навігацію між розділами, що дозволяє користувачам швидше знаходити необхідну
інформацію.
Особлива увага була приділена розробці англомовної версії. Всі ключові
розділи були адаптовані на англійську, що забезпечило доступність сторінки для
міжнародної аудиторії.
Після реалізації змін було здійснено тестування коректності роботи нової
структури. Було перевірено логіку переходів, функціонування двомовної версії та
загальну зручність користування. Відповідно за результатами тестування
підтверджено, що оновлена web-сторінка відповідає встановленим вимогам і
може ефективно слугувати інформаційним ресурсом кафедри.
Практичне значення отриманих результатів. Оновлена web-сторінка
кафедри ПЗАС Черкаського державного технологічного університету вже активно
використовується в освітньому середовищі і виконує важливу роль в
інформуванні та взаємодії з відвідувачами. Основні аспекти практичного значення
9
ЧДТУ 252152.005ПЗ
полягають у наступному:
покращення доступу до інформації: оновлена структура сторінки надає
студентам, абітурієнтам і викладачам легкий і швидкий доступ до потрібних
матеріалів. Чітке тематичне упорядкування контенту та зрозуміла навігація
сприяють продуктивному використанню ресурсу;
формування зручного та інтуїтивно зрозумілого інтерфейсу: Інтерфейс
організовано так, щоб користувачі могли без труднощів знаходити необхідну
інформацію, без додаткових вказівок. Ретельно продумане розміщення елементів
та логіка навігації сприяють комфортному використанню сторінки;
представлення кафедри англомовній аудиторії: Реалізована версія
ресурсу англійською мовою сприяє розповсюдженню інформації про діяльність
кафедри серед іноземних користувачів, зокрема серед можливих студентів та
міжнародних партнерів;
підтримка освітньої та наукової діяльності: Web-сторінка слугує єдиним
джерелом інформації про освітні програми, умови вступу, наукові напрями, а
також про реалізовані проекти та заходи, організовані кафедрою;
можливість подальшого оновлення: Оскільки кафедра постійно
розвивається, проводяться нові заходи, виходять публікації досліджень та
втілюються освітні ініціативи – web-сторінка може піддаватися оновленню. Це
забезпечує швидке збереження його актуальності та відповідності сучасним
подіям.
Таким чином, результати розробки оновленої web-сторінки кафедри ПЗАС
мають практичну значущість, надаючи зручний, сучасний та доступний спосіб
демонстрації кафедри у цифровому середовищі.
Особистий внесок автора
У межах кваліфікаційної роботи автор самостійно провів аналіз поточного
стану web-сторінки кафедри ПЗАС, досліджуючи потреби користувачів, на основі
яких були сформовані функціональні та нефункціональні вимоги для оновлення
ресурсу. Була розроблена структура сторінки, обрано палітру кольорів та втілено
редизайн за допомогою платформи CMS WordPress. Уся інформація була
10
ЧДТУ 252152.005ПЗ
актуалізована, упорядкована та перекладена на англійську мову. Автор також
провів комплексне тестування ресурсу, оцінюючи зручність навігації,
відповідність змісту та якість реалізації запланованих функцій.
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
11
ЧДТУ 252152.005ПЗ
ПОСТАВЛЕНИХ ЗАВДАНЬ
У сучасному світі web-ресурси є важливими інструментами для
відображення діяльності закладів вищої освіти. Web-сторінки кафедр виконують
не тільки інформаційну роль, але й забезпечують платформу для комунікації між
студентами, викладачами, абітурієнтами та партнерами.
У розділі розглянемо технологічні інструменти для оновлення web-
сторінки, зокрема в контексті вдосконалення існуючого ресурсу кафедри ПЗАС
ЧДТУ, реалізованого на CMS WordPress. Проведемо аналіз методів web-сторінок,
а також здійснимо порівняння з аналогічними сторінками інших закладів для
визначення напрямів вдосконалення.
1.1 Вибір технологій та платформ для розробки web-сторінки кафедри
Під час розробки програмного забезпечення для web-сторінки кафедри
ПЗАС враховується вже існуюча архітектура, яка реалізована на CMS WordPress.
Це визначає набір технологій для подальшого вдосконалення ресурсу, оскільки
WordPress пропонує зручне управління контентом, дозволяє гнучке налаштування
функціоналу та можливість налаштування без необхідності глибокого
програмування.
Клієнтська частина відповідає за представлення контенту, з яким взаємодіє
користувач у браузері. У рамках системи CMS WordPress до технологій належать:
HTML (HyperText Markup Language) – мова основна розмітки, яка
відповідає за структуру на web-сторінках [1].
Переваги:
– легка у використанні та засвоєнні;
– швидке завантаження web-сторінок завдяки простій структурі коду;
– сумісність з усіма браузерами.
Недоліки:
– обмежені можливості для створення складних динамічних елементів без
застосування додаткових мов;
– для створення простої web-сторінки, потрібно писати значну кількість
13
ЧДТУ 252152.005ПЗ
коду [2].
CSS (Cascading Style Sheets) – мова таблиць стилів, яка відповідає за
візуальний вигляд елементів HTML на web-сторінці [3].
Переваги:
– легко змінювати вигляд без редагування HTML-коду;
– можливість повторного використання стилів на багатьох сторінках;
– покращує швидкість завантаження сторінки.
Недоліки:
– ускладнене підтримання великої кількості стилів у великих проектах;
– існують ризики несумісності між різними браузерами [4].
JavaScript – це інтерпретована мова програмування, яка забезпечує
динамічність та інтерактивність web-сторінок [5].
Переваги:
– простота використання;
– сумісність з усіма браузерами;
– підтримка середовища.
Недоліки:
– код завжди видимий усім;
– інтерпретується по-різному різними браузерами;
– помилка може зупинити відображення всього web-сайту [6].
Elementor – найкращий конструктор web-сайтів WordPress, який дозволяє
здійснювати візуальне редагування сторінок без необхідності в написання коду
[7].
Переваги:
– інтерфейс з функцією перетягування;
– легкий у використанні;
– різноманітність готових елементів та шаблонів.
Недоліки:
– деякі функції доступні тільки в платній версії;
– спостерігається зменшення швидкості при використанні великої
14
ЧДТУ 252152.005ПЗ
кількості віджетів [8].
Polylang – плагін WordPress, який забезпечує реалізацію багатомовності
ресурсу без потреби в окремій розробці для кожної мовної версії [9]. У межах
розробки web-сторінки кафедри ПЗАС плагін використовується для створення
англомовної версії сторінки, що є важливою вимогою проекту.
Переваги:
– підтримка необмежених кількості мов;
– просте перемикання між мовами через інтерфейс користувача;
– повна інтеграція з CMS WordPress та Elementor.
Недоліки:
– потреба ручного дублювання вмісту для кожної мовної версії;
– обмеження в автоматичному перекладі без додаткових плагінів або
сервісів.
Серверна частина розгортається з використанням CMS WordPress і
відповідає за обробку запитів, управління вмістом і взаємодію з базою даних.
Незважаючи на те, що пряме втручання в серверну логіку під час створення web-
сторінки кафедри є незначним, її знання є необхідним для підтримки та
розширення ресурсу. Головні компоненти:
PHP – це серверна мова програмування, яка широко використовується у
web-розробці, зокрема для роботи з базами даних та створення динамічних сайтів
[10].
Переваги:
– висока сумісність з CMS, зокрема WordPress;
– широке поширення серед систем керування контентом;
– підтримка актуальних версій CMS та плагінів.
Недоліки:
– необхідність оновлення до новіших версій через обмежену підтримку;
– зниження продуктивності при надмірній кількості плагінів.
MySQL – це відкрита система управління базами даних, яка призначена для
зберігання даних на сервері [11].
15
ЧДТУ 252152.005ПЗ
Переваги:
– сумісність з PHP та WordPress;
– висока надійність та швидкість обробки запитів;
– підтримка безліч платформ.
Недоліки:
– досить обмежені можливості розробки та налагодження;
– менш ефективна при роботі з великими обсягами даних.
Apache Server – це програмне забезпечення web-сервера, що відповідає за
обробку запитів до сервера та передачу HTML-сторінок кінцевим користувачам
[12].
Переваги:
– чудово підходить для WordPress та комерційного використання;
– висока сумісність, зокрема з PHP.
Недоліки:
– у порівнянні з альтернативами має нижчу продуктивність під високим
навантаженням;
– потребує ручного налаштування у разі складних конфігурацій.
Враховуючи існуючу архітектуру web-сторінки кафедри ПЗАС, буде
доцільно застосувати перевірену комбінацію технологій: CMS WordPress, HTML,
CSS, JavaScript, Elementor та Polylang для клієнтської частини, а також PHP,
MySQL і Apache для серверної логіки. Такий набір технологій сприяє
ефективному впровадженню функціоналу ресурсу, зберігаючи сумісність з
основною системою та відкриваючи можливості для подальшого розвитку.
1.2 Методи аналізу web-сторінок
Для ефективної розробки та вдосконалення web-сторінки кафедри ПЗАС
ЧДТУ застосовуються різноманітні методи аналізу, які дозволяють оцінити
поточний стан ресурсу, виявити його переваги та недоліки, потреби користувачів
та визначити напрями покращення.
SWOT-аналіз є методом, який допомагає виявити сильні та слабкі сторони
16
ЧДТУ 252152.005ПЗ
ресурсу, а також можливості та загрози зовнішнього середовища, які можуть
позначатися на її результативності [13].
Аналіз потреб користувачів включає в себе дослідження вимог та очікувань
основних цільових аудиторій, таких як студенти, абітурієнти, викладачі,
партнери. Розширене розуміння поведінки користувачів в інтернет-просторі
сприяє налаштуванню функцій web-сторінки відповідно до їх вимог.
Контент-аудит допомагає оцінити актуальність, повноту та структуру
інформаційного наповнення. Цей метод дозволяє визначити слабкі та сильні
сторони вмісту сайту, виявити дублікатний або застарілий контент, також
сторінки, які потребують оновлення [14].
Аналіз зручності користування (юзабіліті) охоплює оцінку навігації,
інтерфейсу та загальної логіки взаємодії користувача з сайтом. Покращення
юзабіліті сприяє збільшенню ефективності використання ресурсу [15].
Порівняльний аналіз дає можливість проаналізувати web-ресурси подібних
кафедр освітніх установ для визначення найкращих практик та запобігання
типовим помилкам. Цей підхід допомагає реалізовувати ефективні рішення на
власній web-сторінці [16].
Використання вище перелічених методів аналізу сприяє всебічному
усвідомленню стану web-сторінки кафедри ПЗАС та надає можливість приймати
обґрунтовані рішення щодо її вдосконалення відповідно до сучасних вимог та
очікувань користувачів.
1.3 Порівняльний аналіз існуючих аналогів
З метою врахування ефективних підходів під час створення вдосконаленої
web-сторінки кафедри ПЗАС ЧДТУ було проаналізовано аналогічні кафедри
інших закладів вищих освіт. У процесі аналізу виявлені їхні сильні та слабкі
сторони для врахування в майбутній розробці.
1 Кафедра програмного забезпечення автоматизованих систем Черкаського
національного університету (ЧНУ) імені Богдана Хмельницького (рисунок 1.1).
Web-сторінка кафедри ПЗАС ЧНУ надає основну інформацію про історію,
17
ЧДТУ 252152.005ПЗ
спеціальності та освітні ступені, склад викладачів та лаборантів, перелік
дисциплін, наукову діяльність, інформацію про випускників [17].
Переваги:
– зрозуміла структура розділів, що охоплює всі ключові аспекти роботи
кафедри;
– зручний і зрозумілий інтерфейс (рисунок 1.1).
Рисунок 1.1 – Головна сторінка web-сторінки кафедри ПЗАС ЧНУ
Недоліки:
відсутність інтерактивних елементів, наприклад, форм зворотного
зв’язку;
невелика кількість візуальних матеріалів, що зменшує загальну
привабливість;
web-сторінка немає англомовної версії, що ускладнює доступ для
іноземних студентів та партнерів (рисунок 1.2).
18
ЧДТУ 252152.005ПЗ
Рисунок 1.2 – Відсутність англомовної версії
2 Кафедра програмного забезпечення автоматизованих систем
Національного університету «Львівська політехніка» (рисунок 1.3).
Ця web-сторінка кафедри ПЗАС Національного університету «Львівська
Політехніка» виділяється численними розділами, такими як: інформація про
кафедру, навчальні програми та нормативна база, студентські ресурси, наукова
діяльність, оголошення та можливість зворотного зв’язку [18].
Переваги:
– розширена функціональність з безліччю підрозділів, орієнтованих на
різні категорії користувачів (вступників, студентів);
– наявність розділу «Зворотній зв’язок», що сприяє покращенню
комунікації між кафедрою та користувачами (рисунок 1.4);
– наявність англійської версії сторінки, що забезпечує доступ для
міжнародної аудиторії (рисунок 1.5).
19
ЧДТУ 252152.005ПЗ
Рисунок 1.3 – Головна web-сторінка кафедри ПЗАС Національного університету
«Львівська політехніка»
Рисунок 1.4 – Розділ зворотного зв’язку кафедри ПЗАС
20
ЧДТУ 252152.005ПЗ
Рисунок 1.5 – Англомовна версія web-сторінки кафедри ПЗАС
Недоліки:
– інтерфейс виглядає дещо перенасиченим через численну кількість
пунктів меню та підрозділів;
– надмірна кількість інформації на головній сторінці.
3 Кафедра програмного забезпечення автоматизованих систем
Національного університету кораблебудування (НУК) імені адмірала Макарова
(рисунок 1.6).
Web-сторінка кафедри ПЗАС надає основну інформацію про різні аспекти
роботи кафедри: новини, історія, міжнародна діяльність, спеціальності, колектив
та контакти кафедри [19].
Переваги:
– сучасний та легкий у використанні інтерфейс;
– актуальні відомості про колектив, контакти кафедри та напрями
підготовки;
– зручна навігація.
21
ЧДТУ 252152.005ПЗ
Рисунок 1.6 – Головна сторінка кафедри ПЗАС НУК імені адмірала Макарова
Недоліки:
– відсутність розширених функцій для студентів, таких як доступ до
корисних посилань або розкладу занять;
– менший акцент на науковій діяльності кафедри у порівнянні з
аналогічними ресурсами інших закладів (рисунок 1.7);
– англомовна версія представлена частково, що знижує її можливості для
користувачів з інших країн (рисунок 1.8).
Рисунок 1.7 – Недостатній акцент на висвітленні наукової діяльності кафедри
22
ЧДТУ 252152.005ПЗ
Рисунок 1.8 – Частково перекладена англомовна версія web-сторінки кафедри
ПЗАС
23
ЧДТУ 252152.005ПЗ
Аналіз web-сторінок існуючих кафедр ПЗАС демонструє критичну
значущість структурованого контенту, зручного користувацького інтерфейсу та
повної підтримки англомовної версії. Набутий досвід дає можливість
обґрунтовано визначити вимоги для розробки web-сторінки кафедри ПЗАС
ЧДТУ, враховуючи недоліки конкурентів та ефективні підходи до їх реалізації.
1.4 Постановка задачі
У межах цієї кваліфікаційної роботи розглядається процес осучаснення та
вдосконалення web-сторінки кафедри ПЗАС, яка реалізована на платформі CMS
WordPress. Головною метою є збільшення інформативності ресурсу, поліпшення
його структури та зручності в користуванні, забезпечення повноцінної підтримки
англомовної версії, а також актуалізація вмісту відповідно до сучасних
стандартів.
Виявлені проблеми поточної версії сторінки:
– застарілий дизайн інтерфейсу;
– неструктурована, застаріла або неповна інформація в окремих розділах;
– нелогічне або перевантажене структурування контенту, що ускладнює
навігацію по розділах web-сторінки;
– відсутність англомовної версії, що обмежує доступ іноземних студентів
та партнерів до інформації.
На сторінці новин відсутній єдиний стиль оформлення: частина публікацій
містить зображення й короткий опис, інші – лише заголовок. Дизайн сторінки є
застарілим, блоки мінімальне візуальне наповнення, що ускладнює сприйняття
контенту (рисунок 1.9).
24
ЧДТУ 252152.005ПЗ
Рисунок 1.9 – Застарілий дизайн та неоднорідне оформлення новин на web-
сторінці кафедри
У підрозділі «Склад кафедри» інформація подана у вигляді текстового
списку з зазначення ПІБ, наукових ступенів та посад. Хоча перехід на детальну
сторінку викладача технічно доступний, він візуально не позначений, що
ускладнює навігацію. Відсутні фотографії, чіткий поділ за категоріями або
візуальна структура списку (рисунок 1.10).
25
ЧДТУ 252152.005ПЗ
Рисунок 1.10 – Невиділені посилання та відсутність візуального структурування у
списку викладачів
На індивідуальних сторінках викладачів, інформація представлена одним
блоком тексту без чітких пунктів (освіта, публікації, наукові інтереси), що знижує
її інформативність та зручність сприйняття (рисунок 1.11).
26
ЧДТУ 252152.005ПЗ
Рисунок 1.11 – Однорідне та неструктуроване представлення інформації на
персональній сторінці викладача
Web-сторінка кафедри не має повноцінної англомовної версії: перемикач
мови на головній сторінці або в шапці відсутній. Це обмежує доступ до
інформації для іноземних абітурієнтів, студентів і партнерів (рисунок 1.12).
27
ЧДТУ 252152.005ПЗ
Рисунок 1.12 – Відсутність перемикача мов на головній сторінці кафедри
Аналіз потреб користувачів:
– швидкий доступ до навчальної, організаційної та контактної інформації;
– простий і зрозумілий інтерфейс;
– наявність мультимедійних матеріалів (фото, документи);
– можливість залишати зворотний зв’язок через анкети;
– підтримка англійської мови для іноземних відвідувачів.
Основні задачі, які необхідно реалізувати:
1 Оптимізація структури ресурсу
упорядкувати інформацію відповідно до категорій користувачів
(студенти, абітурієнти, партнери);
вдосконалити логіку формування меню та підменю для спрощення
навігації.
2 Оновлення інформаційного наповнення
28
ЧДТУ 252152.005ПЗ
актуалізувати дані про викладачів, наукову діяльність, новини та
заходи;
додати нові текстові матеріали, зображення та документи у відповідні
розділи.
3 Візуальне поновлення сторінки
впровадити сучасну тему оформлення, сумісну з WordPress;
здійснити оновлений дизайн за допомогою конструктора Elementor.
4 Реалізація двомовності
перекласти основні розділи web-сторінки на англійську мову;
реалізувати зручний перемикач мов на головній сторінці ресурсу.
5 Забезпечення функціональності та стабільності системи
реалізувати основні функціональні вимоги: перегляд всіх розділів,
заповнення анкет, підтримка мультимедійних матеріалів, реалізація
англомовної версії;
дотриматись нефункціональних вимог: інтуїтивно зрозуміла
структура та зручна навігація, швидке завантаження сторінок,
можливість розширення функціональності без повної перебудови
структури.
6 Тестування та завершальне коригування
перевірити роботу всіх функціональних елементів ресурсу;
отримати відгуки від представників кафедри щодо зручності й
повноти реалізації;
ввести фінальні зміни перед розміщенням оновленої web-сторінки.
Сформульовані задачі визначають ключові напрями вдосконалення web-
сторінки кафедри ПЗАС: оптимізація структури, оновлення вмісту, візуальне
вдосконалення, підтримка двомовності, забезпечення функціональності та
проведення завершального тестування. Їх реалізація дозволить досягти мети –
створити зручний, сучасний та повноцінний інформаційний ресурс.
29
ЧДТУ 252152.005ПЗ
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ
У першому розділі розглянуто технології, що застосовуються для створення
та підтримки web-ресурсів, враховуючи вже впроваджену архітектуру web-
сторінки кафедри ПЗАС на базі CMS WordPress. Описано компоненти клієнтської
і серверної частини, а також сильні і слабкі сторони технологій,
використовуваних у системі: HTML, CSS, JavaScript, PHP, MySQL, Polylang,
Apache і конструктора Elementor.
Також значна увага приділена методам аналізу web-сторінки. Це дало
можливість проаналізувати поточний стан ресурсу, виявити недоліки і визначити
напрями для оптимізації. Порівняльний аналіз web-сторінок інших кафедр
дозволив виявити вдалі рішення і поширені проблеми, зокрема відсутність
англомовної версії або перенавантаження інтерфейсу.
У результаті сформовано перелік задач, які повинні бути виконанні в рамках
проекту, з акцентом на оновлення структури, вмісту, дизайну та функціональних
можливостей ресурсу. Це встановлює чітку основу для переходу до практичної
реалізації.
30
ЧДТУ 252152.005ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ
2.1 Моделювання предметної області
При створенні web-сторінки кафедри ПЗАС одним з важливих етапів є
моделювання предметної області. Цей процес допомагає визначити основні
інформаційні об’єкти, які відображають діяльність кафедри, і встановити між
ними логічні зв’язки. Формалізація такої структури гарантує відповідність
функціональних можливостей системи реальним потребам користувачів.
Використання моделі предметної області сприяє систематизації процесу
розробки, зменшує ймовірність помилок і закладає основи для технічного
проектування. Отже, цей етап є фундаментом для створення ефективного,
структурованого і функціонально доцільного web-ресурсу.
2.1.1 Предметна область моделювання. Модель предметної області. Словник
предметної області
Предметна область моделювання. У межах розробки web-сторінки
кафедри ПЗАС ЧДТУ предметна область моделювання охоплює повний спектр
діяльності кафедри, що підлягає цифровій візуалізації. Сюди входять основні
напрями начальної, наукової, виховної та профорієнтаційної діяльності, які
потребують структурованого подання у вигляді окремих розділів web-ресурсу.
Ретельне моделювання цієї області сприяє формуванню логічної
архітектури майбутньої системи, визначаючи, яку інформацію необхідно
представити для різних категорій користувачів, а також забезпечує ефективну
взаємодію між учасниками навчального процесу.
До основних складових предметної області включають:
новини: розміщення інформаційних повідомлень, оголошень та анонсів,
що стосуються студентів, викладачів і абітурієнтів;
про кафедру: загальна інформація про історію кафедри, склад
викладачів, інформаційне забезпечення;
30
ЧДТУ 252152.005ПЗ
вступнику: дані для абітурієнтів різних категорій (випускники шкіл,
коледжів, вступ до магістратури та аспірантури), включно з етапами вступу та
важливими датами;
студенту: розділ зі списками основних і вибіркових дисциплін,
посилання на розклад занять, документ з графіком консультацій викладачів,
корисні посилання, інформація про стажування;
наукова діяльність: висвітлення інформації про аспірантів, наукові
школи, напрями досліджень та інші форми наукової активності кафедри;
проекти: опис міжнародних, студентських та наукових проектів, у яких
бере участь кафедра;
заходи: звіти про події, організовані на кафедрі, з публікацією назви,
короткого опису, дати проведення та фото, що ілюструють перебіг заходів;
анкетування: інструменти для збору зворотного зв’язку від студентів,
аспірантів, роботодавців і стейкхолдерів щодо якості освітнього процесу та
ініціатив кафедри;
акредитація: документи, пов’язані з акредитацією освітніх програм та
додаткові матеріали для комісій.
Предметна область моделювання встановлює змістові та функціональні
елементи web-сторінки кафедри, що сприяють формуванню цілісної основи для її
впровадження, враховуючи потреби користувачів та вимоги освітнього процесу
[20].
Модель предметної області. З метою поліпшення взаємодії користувачів з
web-сторінкою кафедри, кожен з раніше згаданих розділів оформлюється у
вигляді структурної моделі, що визначає основні об’єкти та їх характеристики.
Нижче представлені ключові компоненти, що складають цю модель:
1 Новини. Розділ передбачає публікацію інформаційних повідомлень,
оголошень та анонсів. Модель відображає такі компоненти:
– заголовок новини;
– дата публікації;
– короткий опис;
31
ЧДТУ 252152.005ПЗ
– зображення, відео або файл (за потреби).
2 Про кафедру. Містить інформацію про історію кафедри, склад
викладачів та інформаційне забезпечення спеціальності. Включає такі
об’єкти :
– опис історії кафедри;
– список викладачів, їх наукові ступені, посади, контактні дані та фото;
– інформаційне забезпечення спеціальності.
3 Вступнику. Розділ надає інформацію для абітурієнтів різних освітніх
рівнів. Компоненти моделі:
– тип вступу (випускники шкіл/коледжів, магістратура, аспірантура);
– етапи вступу;
– важливі дати.
4 Студенту. Забезпечує доступ до корисної інформації навчального
процесу. Структура включає:
– перелік дисциплін (основні і вибіркові);
– посилання на розклад занять;
– документ з інформацією про графік консультацій викладачів;
– корисні посилання;
– інформація про стажування.
5 Наукова діяльність. Висвітлення напрямів наукової роботи кафедри.
Модель включає:
– аспіранту;
– наукові школи;
– напрями та результати наукових досліджень кафедри.
6 Проекти. Розділ, що охоплює студентські, міжнародні та наукові
ініціативи кафедри. Елементи моделі:
назва проекту;
короткий опис;
керівники та учасники;
зображення.
32
ЧДТУ 252152.005ПЗ
7 Заходи. Інформація про події, організовані кафедрою. Модель включає:
назва заходу;
короткий опис;
дата проведення;
фотографії або відео.
8 Анкетування. Функціонал збору зворотного зв’язку від різних груп
користувачів. Модель передбачає:
– тип анкети (для студентів, аспірантів, роботодавців, стейкхолдерів);
посилання на відповідну форму.
9 Акредитація. Матеріали, пов’язані з оцінюванням освітніх програм.
Модель включає:
документи з акредитації.
Схема моделі предметної області:
1 Користувачі:
– студенти;
– партнери;
– гості web-сторінки.
2 Адміністратор:
викладачі (з правами системного адміністратора, які мають право на
публікацію, редагування або оновлення різної інформації на web-
сторінці кафедри ПЗАС).
3 Новини:
– заголовок;
– дата;
– опис;
– вкладення.
4 Про кафедру:
– історія;
– викладачі;
– інформаційне забезпечення.
33
ЧДТУ 252152.005ПЗ
5 Вступнику:
– категорії вступу;
– етапи;
– важливі дати.
6 Студенту:
– дисципліни;
– розклад занять;
– консультації викладачів;
– корисні посилання;
– стажування.
7 Наукова діяльність:
– аспіранту;
– наукові школи;
– наукові проекти кафедри.
8 Проекти:
– назва;
– опис;
– керівники та учасники.
9 Заходи:
– назва;
– дата;
– опис;
– фотографії.
10 Анкетування:
– тип анкети;
– посилання.
11 Акредитація:
документи.
Модель предметної області є фундаментом для створення структурної
логіки системи, встановлюючи перелік функціональних компонентів web-
34
ЧДТУ 252152.005ПЗ
сторінки та їх зміст. Грамотна організація інформації сприяє зручній навігації для
користувачів і послідовній реалізації всіх розділів під час технічного
проектування.
Словник предметної області.
Web-сторінка кафедри – інформаційний ресурс у мережі Інтернет,
реалізований на базі CMS WordPress, який надає впорядковану інформацію про
діяльність кафедри програмного забезпечення автоматизованих систем ЧДТУ.
Кафедра ПЗАС – підрозділ Черкаського державного технологічного
університету, що здійснює підготовку фахівців за спеціальністю 121 «Інженерія
програмного забезпечення».
ЧДТУ (Черкаський державний технологічний університет) – заклад вищої
освіти, що займається підготовкою студентів за різними спеціальностями, зокрема
у галузі інженерії програмного забезпечення.
Користувач – особа, яка відвідує web-сторінку кафедри. Це може бути
студент, абітурієнт, партнер, викладач або сторонній гість.
Адміністратор – особа (викладач або інший працівник кафедри), яка має
право редагувати, публікувати та оновлювати вміст на web-сторінці.
Новини – повідомлення інформаційного характеру, оголошення або анонси
подій, що розміщуються на web-сторінці для інформування користувачів.
Про кафедру – розділ, в якому представлено історію кафедри, інформацію
про викладачів та інформаційне забезпечення спеціальності.
Вступнику – розділ для абітурієнтів, який містить інформацію про типи
вступу, етапи вступної кампанії та важливі дати.
Студенту – розділ, який містить інформацію про навчальні дисципліни,
розклад занять, консультації викладачів, корисні посилання та дані про
стажування.
Наукова діяльність – напрям діяльності кафедри, який охоплює наукові
дослідження, інформацію про аспірантуру та функціонування наукових шкіл.
Проекти – міжнародні, студентські та наукові ініціативи, в яких кафедра
бере участь.
35
ЧДТУ 252152.005ПЗ
Заходи – академічні або соціальні події, організовані кафедрою, які
представлені на web-сторінці у формі звітів та фотографій.
Анкетування – форма збору зворотного зв’язку від студентів, аспірантів,
роботодавців та стейкхолдерів щодо якості освітнього процесу.
Акредитація – процес офіційного підтвердження освітньої програми, який
супроводжується підготовкою документів.
CMS WordPress – система управління контентом (CMS), яка дозволяє
створювати та редагувати web-сторінки без необхідності глибоких знань у
програмуванні, широко використовується для освітніх і корпоративних ресурсів.
HTML (HyperText Markup Language) – мова розмітки, що використовується
для створення структури web-сторінок.
CSS (Cascading Style Sheets) – мова стилів, яка відповідає за візуальне
оформлення HTML-документів, включаючи кольорові рішення, шрифти та
розміщення елементів.
JavaScript – мова програмування, яка забезпечує динамічність та
інтерактивність на web-сторінках, реагуючи на дії користувача.
Elementor – плагін для WordPress, що виконує роль конструктора сторінок
(Page Builder): надає інтерфейс візуального редагування для створення шаблонів і
розділів без потреби у написанні коду.
Polylang – плагін для WordPress, який забезпечує підтримку багатомовності
на web-сторінці, дозволяє створювати окремі мовні версії контенту та
перемикатися між ними через інтерфейс користувача.
PHP – серверна мова програмування, яка використовується в CMS
WordPress для обробки динамічного вмісту та взаємодії з базою даних.
MySQL – система управління базами даних, яка зберігає весь контент web-
сторінки та забезпечує його обробку в WordPress.
Apache – web-сервер, що обробляє запити до ресурсу і передає сторінки
користувачам у браузері.
Словник предметної області надає єдине розуміння основних термінів, які
використовуються під час моделювання та реалізації web-сторінки кафедри.
36
ЧДТУ 252152.005ПЗ
2.1.2 Елементи моделювання предметної області
При розробці web-сторінки кафедри ПЗАС для створення структурної
моделі були використані елементи UML (Unified Modeling Language), яка є
міжнародним стандартом для візуалізації архітектури програмних систем. Цей
підхід надає можливість відобразити об’єкти системи та їхні взаємозв’язки в
зрозумілій та формалізованій формі. Для моделювання були використані такі
основні елементи UML:
класи – для характеристики основних об’єктів системи;
атрибути – для опису властивостей кожного об’єкта;
методи (операції) – для визначення дій, що можуть бути виконані з
об’єктами;
асоціації – для формування логічних зв’язків між класами;
діаграми класів – для узагальненого зображення структури системи [21].
Рисунок 2.1 – Основні графічні символи UML [22]
37
ЧДТУ 252152.005ПЗ
Використання цих елементів не тільки допомагає чітко організувати логіку
розробки web-сторінки, але й забезпечує базу для подальшого її технічного
впровадження. Оскільки проект реалізується самостійно, UML-діаграми також
виконують функцію інструменту для внутрішньої організації процесу роботи над
системою.
Рисунок 2.2 – Єднальні елементи UML [22]
Уніфікована мова моделювання (UML) є ключовим інструментом у
розробці логіки системи, оскільки вона дає можливість змоделювати її структуру
на початковій стадії та закласти основу для майбутньої реалізації.
38
ЧДТУ 252152.005ПЗ
2.1.3 Робота область моделювання
Для реалізації web-сторінки кафедри ПЗАС потрібно визначити набір
сутностей, що становлять її функціональну основу, а також зв’язки між цими
сутностями. Ці елементи формують так звану робочу область моделювання, яка
відображає логіку організації системи. Структуру доцільно представити у вигляді
UML-діаграми класів, що дозволяє формалізувати внутрішню організацію ресурсу
і встановити правила взаємодії між його компонентами.
У межах цієї моделі враховані ролі користувачів та адміністратора, а також
перелік розділів, що реалізують функціонал web-сторінки.
Рисунок 2.3 – Модель предметної області
39
ЧДТУ 252152.005ПЗ
Перелік сутностей, що входять до складу моделі: компоненти (сутності):
1 Користувачі (Users):
– студент (Student);
– партнер (Partner);
– гість (Guest).
2 Адміністратор (Administrator):
викладач (Teacher).
3 Новини (News)
4 Про кафедру (About Department)
5 Вступнику (For Applicants)
6 Студенту (For Students)
7 Наукова діяльність (Research Activities)
8 Проекти (Projects)
9 Заходи (Events)
10 Анкетування (Surveys)
11 Акредитація (Accreditation)
2.2 Формування та аналіз вимог
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні
вимоги.
Етап формування вимог до програмного забезпечення web-сторінки
кафедри ПЗАС є ключовим для подальшого процесу розробки. Саме на цьому
етапі формуються функціональні вимоги системи, очікування замовника та
технічні деталі впровадження, які гарантують, що ресурс відповідатиме запитам
цільової аудиторії.
Первинні вимоги формуються у зрозумілій для замовника формі та
відображають загальні функціональні можливості web-сторінки:
– користувачі повинні мати доступ до всіх розділів web-сторінки;
– адміністратор повинен мати права на редагування, оновлювання та
40
ЧДТУ 252152.005ПЗ
публікування матеріалів на web-сторінці;
– система повинна забезпечувати структурований доступ до інформації за
напрямами діяльності кафедри;
– користувачі повинні мати можливість заповнювати та надсилати анкети;
– web-сторінка повинна забезпечувати повноцінну підтримку англомовної
версії для іноземних користувачів.
Детальні вимоги уточнюють усі функції системи і є основою для
технічного проектування:
1 Новини:
– кожна новина повинна містити заголовок, дату публікації, короткий
опис, а також за потреби – прикріплений файл, зображення чи відео;
– адміністратор має змогу публікувати та оновлювати новини .
2 Про кафедру:
– відображення історії кафедри у вигляді текстового блоку з
прикріпленими фотографіями;
– список викладачів із зазначенням ПІБ, наукового ступеня, посади,
контактної інформації та фото;
– додатковий перегляд інформації про кожного викладача (освіта,
наукові досягнення, публікації);
– блок про інформаційне забезпечення спеціальності 121 «Інженерія
програмного забезпечення» (освітні рівні, професійні перспективи,
майбутні посади тощо).
3 Вступнику:
– структуроване подання інформації для кожного освітнього рівня
(випускники шкіл, коледжів, магістратура, аспірантура);
– відображення етапів вступної кампанії та важливих дат.
4 Студенту:
– сторінка з переліком основних і вибіркових дисциплін;
– посилання на розклад занять;
– документ з інформацією про консультації викладачів;
41
ЧДТУ 252152.005ПЗ
– підбірка корисних посилань;
– інформація про стажування.
5 Наукова діяльність:
– інформація про аспірантів;
– перелік наукових шкіл;
– напрями та результати наукових досліджень кафедри.
6 Проекти:
– розміщення опису актуальних міжнародних, студентських та
наукових проектів кафедри;
– вказання назви проекту, короткий опис, керівники та учасники.
7 Заходи:
– назва події, короткий опис, дата проведення;
– мультимедійний звіт (фото чи відео).
8 Анкетування:
– адміністратор має змогу розміщувати посилання на анкети;
– користувачі можуть переглядати, заповнювати та надсилати форми;
– адміністратор отримує зворотний зв’язок у вигляді заповнених форм.
9 Акредитація:
– публікація офіційних документів, що підтверджують акредитацію
освітніх програм.:
10 Англомовна версія:
– забезпечити переклад основних розділів web-сторінки англійською
мовою;
– реалізувати перемикач мов на головній сторінці.
Вимоги замовника відображають очікування кінцевих користувачів та
визначають, які функції та зручності має надати система. Вони окреслюють
бажану поведінку web-сторінки кафедри ПЗАС з позиції її користувачів:
студентів, партнерів, викладачів та абітурієнтів:
– система повинна бути зручною у використанні, інтуїтивно зрозумілою
та візуально привабливою для користувачів;
42
ЧДТУ 252152.005ПЗ
– web-сторінка повинна надавати доступ до всіх розділів без авторизації;
– контент на сторінці повинен бути структурованим за напрямами
діяльності кафедри (навчання, новини, наука, заходи тощо);
– адміністратор повинен мати можливість редагувати, публікувати,
оновлювати матеріали web-сторінки;
– користувачі повинні мати змогу переглядати розділи у вільному доступі;
– web-сторінка повинна підтримувати мультимедійні матеріали
(зображення, документи, відео);
– web-сторінка повинна мати англомовну версію для іноземних студентів
та партнерів.
Вимоги розробника визначають, як технічно реалізуються потреби
користувачів, враховуючи можливості CMS WordPress та обрані інструменти для
розробки. Перелік вимог:
– web-сторінка повинна бути реалізована на базі CMS WordPress, що
забезпечує зручне управління вмістом, розширюваність функцій і підтримку
динамічного контенту;
– для створення структури сторінки використовується HTML, для її
стилізації – CSS, а для реалізації інтерактивних елементів – JavaScript;
– для побудови інтерфейсу застосовується візуальний конструктор
Elementor;
– зображення, відео, документи та посилання мають бути додані з
урахуванням вимог до оптимізації розміру файлів та швидкості роботи web-
сторінки.
Функціональні та нефункціональні вимоги
Формування вимог передбачає класифікацію їх на функціональні та
нефункціональні вимоги. Цей розподіл дозволяє чітко окреслити, що саме має
виконувати система та на які критерії якості.
Функціональні вимоги визначають ключові функції [23], які має виконувати
web-сторінка кафедри ПЗАС:
– користувачі повинні мати доступ до розділів web-сторінки без потреби
43
ЧДТУ 252152.005ПЗ
авторизації;
– адміністратор повинен мати змогу редагувати, публікувати та
оновлювати контент;
– користувачі повинні мати можливість переглядати новини, матеріали
про кафедру, інформацію для вступників і студентів, дані про наукову діяльність,
проекти, заходи та документи з акредитації;
– система повинна підтримувати додавання та перегляд мультимедійних
матеріалів (зображення, відео, документи);
– адміністратор повинен мати змогу розміщувати посилання на анкети та
переглядати зворотний зв’язок;
– користувачі повинні мати змогу переглядати та заповнювати/надсилати
анкети, що публікуються адміністратором;
– користувачі повинні мати можливість перемикати мову інтерфейсу між
українською та англійською версіями;
– адміністратор повинен мати змогу редагувати вміст англомовної версії
окремо від української.
Нефункціональні вимоги описують загальні можливості системи, що
впливають на її якість та ефективність [24]:
– продуктивність: швидке завантаження при великому обсязі даних;
– зручність використання: логічна структура, інтуїтивна навігація;
– надійність: захист від втрати даних;
– оптимізація: мультимедійні елементи повинні мати відповідний розмір
для забезпечення стабільної роботи ресурсу;
– масштабованість: можливість доповнення функціоналу без потреби
повної переробки системи;
– інтегрованість: повна сумісність з існуючою сторінкою кафедри на
WordPress;
– локалізація: підтримка інтерфейсу двома мовами – українською та
англійською.
Встановлені вимоги гарантують відповідність web-сторінки кафедри ПЗАС
44
ЧДТУ 252152.005ПЗ
сподіванням користувачів та технічним можливостям, формуючи базу для
ефективного впровадження та подальшого розвитку ресурсу.
2.2.2 Формування вимог за допомогою діаграми прецедентів
Для візуального представлення взаємодії користувачів з функціоналом web-
сторінки кафедри ПЗАС використовується діаграма прецедентів (Use Case
Diagram). Такий підхід дозволяє чітко продемонструвати, які дії можуть
здійснювати різні категорії акторів у системі.
У межах цієї web-сторінки виділяються два ключові типи акторів:
користувач – узагальнена роль, яка охоплює студентів, партнерів та
гостей;
адміністратор – особа, що відповідає за оновлення, редагування та
публікацію контенту, обробку зворотного зв’язку.
Рисунок 2.4 – Діаграма прецедентів для адміністратора web-сторінки кафедри
ПЗАС
Прецеденти взаємодії адміністратора (рисунок 2.4):
1 Публікація новин та анкет:
– актор: адміністратор;
– опис: розміщує важливі повідомлення, анонси та оголошення, а також
публікує форми анкетування.
2 Завантаження контенту:
– актор: адміністратор;
45
ЧДТУ 252152.005ПЗ
– опис: завантажує текстову та мультимедійну інформацію для
наповнення та оновлення сторінки.
3 Отримання зворотного зв’язку:
– актор: адміністратор;
– опис: переглядає результати заповнених анкет, надісланих
користувачами.
Прецеденти взаємодії користувача (рисунок 2.5):
1 Перегляд новин:
– актор: користувач;
– опис: ознайомлюється з повідомленнями, анонсами та оголошеннями
в розділі новин.
2 Перегляд інформації про кафедру:
– актор: користувач;
– опис: отримує доступ до загальної інформації про кафедру, її історію,
склад викладачів та інформаційне забезпечення.
3 Перегляд інформації для вступників:
– актор: користувач;
– опис: ознайомлюється з інформацією про освітні рівні, етапи вступу
та важливі дати.
4 Перегляд інформації для студентів:
– актор: користувач;
– опис: переглядає перелік дисциплін, розклад занять, інформацію про
консультації викладачів, корисні посилання, інформацію про
стажування.
5 Перегляд інформації про наукову діяльність:
– актор: користувач;
– опис: переглядає інформацію про аспірантуру, наукові школи та
напрями досліджень наукових проектів кафедри.
6 Перегляд проектів:
– актор: користувач;
46
ЧДТУ 252152.005ПЗ
– опис: дивиться опис міжнародних, студентських та наукових проектів
кафедри.
7 Перегляд заходів:
– актор: користувач;
– опис: переглядає та ознайомлюється з описом подій, їхні дати,
фотографії чи відео звіти.
8 Перегляд/заповнення/надсилання анкети:
– актор: користувач;
– опис: переглядає, заповнює та надсилає анкетування, надану
адміністратором, для зворотного зв’язку або оцінювання.
9 Перегляд акредитації:
– актор: користувач;
– опис: переглядає офіційні документи, що підтверджують акредитацію
освітніх програм.
Рисунок 2.5 – Діаграма прецедентів для користувача web-сторінки кафедри ПЗАС
47
ЧДТУ 252152.005ПЗ
Діаграма прецедентів надає можливість системно представити сценарії
використання функцій web-сторінки, чітко визначити ролі користувача і
адміністратора, а також виступає основою для розробки структури інтерфейсу і
планування впровадження функціоналу [25].
2.3 Проектування логічної структури програмного комплексу
У процесі проектування логічної структури web-сторінки кафедри ПЗАС,
створеної на платформі CMS WordPress, побудовано діаграму класів, яка
представляє основні об’єкти системи, їх атрибути, методи та взаємозв’язки. Хоча
в CMS WordPress не передбачає класичне об’єктно-орієнтоване програмування,
така модель дозволяє ясно відобразити логіку взаємодії між елементами web-
сторінки.
Крім того, буде представлена діаграма пакетів, що ілюструє поділ системи
на логічні компоненти та взаємозалежності між ними, що сприяє структуризації
функціоналу та зручнішій підтримці проекту.
2.3.1 Діаграма класів
На рисунку 2.6 показано діаграму класів, яка відображає структуру web-
сторінки кафедри ПЗАС без деталізації атрибутів і методів, але з вказаними
типами зв’язків між основними сутностями.
Кількість класів – 11:
– користувач;
– адміністратор;
– новини;
– про кафедру;
– вступнику;
– студенту;
– наукова діяльність;
– проекти;
– заходи;
– анкетування;
48
ЧДТУ 252152.005ПЗ
– акредитація.
Основні зв’язки між класами (асоціації):
– користувач → новини: переглядає;
– користувач → про кафедру: переглядає;
– користувач → вступнику: переглядає;
– користувач → студенту: переглядає;
– користувач → наукова діяльність: переглядає;
– користувач → проекти: переглядає;
– користувач → заходи: переглядає;
– користувач → анкетування: переглядає, заповнює, надсилає;
– користувач → акредитація: переглядає;
– адміністратор → анкетування: публікує, отримує зворотний зв’язок;
– адміністратор → усі розділи: публікує, редагує, оновлює.
Рисунок 2.6 – Діаграма класів без атрибутів та методів для web-сторінки кафедри
ПЗАС
49
ЧДТУ 252152.005ПЗ
Для кожного з класів були встановлені атрибути та методи в залежності від
їх призначення (рисунок 2.7).
Користувачі (Users):
– можуть переглядати публічний вміст розділів;
– можуть заповнювати й надсилати анкети.
Адміністратор (Administrator):
– має розширені права доступу;
– може редагувати, оновлювати та публікувати інформацію в усіх розділах
web-сторінки;
– отримує зворотний зв’язок від розділу анкетування.
Новини (News):
– містять заголовок, вміст, дату, мультимедійні матеріали;
– публікуються, оновлюються адміністратором;
– переглядаються користувачами.
Про кафедру (About Department):
– має заголовок, вміст, підрозділи та мультимедійні матеріали;
– публікуються, редагуються, оновлюються адміністратором;
– переглядаються користувачами.
Вступнику (For Applicants):
– має заголовок, вміст, підрозділи та мультимедійні матеріали;
– оновлюються, редагуються, публікуються адміністратором;
– переглядаються користувачами.
Студенту (For Students):
– має заголовок, вміст, підрозділи та мультимедійні матеріали;
– публікуються, оновлюються адміністратором;
– переглядаються користувачами.
Наукова діяльність (Research Activities):
– має заголовок, вміст, підрозділи та мультимедійні матеріали;
– публікуються, оновлюються адміністратором;
– переглядаються користувачами.
50
ЧДТУ 252152.005ПЗ
Проекти (Projects):
– має заголовок, вміст, підрозділи та мультимедійні матеріали;
– публікуються, оновлюються адміністратором;
– переглядаються користувачами.
Заходи (Events):
– мають назву, опис, дату, мультимедійні матеріали;
– оновлюються, публікуються адміністратором;
– переглядаються користувачами.
Анкетування (Surveys):
– містить заголовок, вміст, посилання та підрозділи;
– публікується адміністратором;
– адміністратор отримує відповіді;
– переглядається, заповнюється, надсилається користувачами.
Акредитація (Accreditation):
– складається із заголовку, вмісту та мультимедійних матеріалів;
– публікується, оновлюється адміністратором;
– переглядається користувачами.
Рисунок 2.7 – Діаграма класів для web-сторінки кафедри ПЗАС (ч.1)
51
ЧДТУ 252152.005ПЗ
Рисунок 2.7 – Діаграма класів для web-сторінки кафедри ПЗАС (ч.2)
Представлено повну діаграму класів, яка описує основну логіку web-
сторінки.
Клас: Користувачі
Атрибути:
– роль (студент, абітурієнт, партнер, гість).
Методи:
– переглядати;
– заповнювати;
– надсилати.
Клас: Адміністратор
Атрибути:
– керування вмістом.
52
ЧДТУ 252152.005ПЗ
Методи:
– публікувати;
– редагувати;
– оновлювати;
– отримувати.
Клас: Новини
Атрибути:
– заголовок;
– дата;
– вміст;
– мультимедійні матеріали.
Методи:
– публікувати;
– оновлювати;
– переглядати.
Клас: Про кафедру
Атрибути:
– заголовок;
– вміст;
– підрозділи;
– мультимедійні матеріали.
Методи:
– публікувати;
– оновлювати
– редагувати;
– переглядати.
Клас: Вступнику
Атрибути:
– заголовок;
– вміст;
53
ЧДТУ 252152.005ПЗ
– підрозділи;
– мультимедійні матеріали.
Методи:
– публікувати;
– оновлювати;
– редагувати;
– переглядати.
Клас: Студенту (For Students)
Атрибути:
– заголовок;
– вміст;
– підрозділи;
– мультимедійні матеріали.
Методи:
– публікувати;
– оновлювати;
– переглядати.
Клас: Наукова діяльність
Атрибути:
– заголовок;
– вміст;
– підрозділи;
– мультимедійні матеріали.
Методи:
– публікувати;
– оновлювати;
– переглядати.
Клас: Проекти
Атрибути:
– заголовок;
54
ЧДТУ 252152.005ПЗ
– вміст;
– підрозділи;
– мультимедійні матеріали.
Методи:
– публікувати;
– оновлювати;
– переглядати.
Клас: Заходи
Атрибути:
– заголовок;
– опис;
– дата;
– мультимедійні матеріали.
Методи:
– публікувати;
– оновлювати;
– переглядати.
Клас: Анкетування
Атрибути:
– заголовок;
– вміст;
– посилання;
– підрозділи.
Методи:
– публікувати;
– отримувати;
– заповнювати;
– надсилати;
– переглядати.
Клас: Акредитація
55
ЧДТУ 252152.005ПЗ
Атрибути:
– заголовок;
– вміст;
– підрозділи.
Методи:
– публікувати;
– оновлювати;
– переглядати.
Проектування логічної структури web-сторінки кафедри ПЗАС дозволило
визначити ключові сутності системи, їхні атрибути, методи та взаємозв’язки.
Побудова діаграми класів надало чітке уявлення про внутрішню логіку ресурсу,
що полегшить впровадження функцій у середовищі CMS WordPress.
2.3.2 Діаграма пакетів
На етапі структурного проектування web-сторінки кафедри ПЗАС було
побудовано діаграму пакетів (Package Diagram), яка показує логічне об’єднання
пов’язаних класів системи в пакети. Ця діаграма допомагає візуалізувати загальну
архітектуру програмного комплексу та показує залежності між різними
підсистемами [26].
У структурі web-сторінки кафедри ПЗАС виділено такі основні пакети:
Users Management – управління користувачами (студенти, абітурієнти,
партнери, сторонній відвідувачі);
Administrator Management – адміністрування контенту (публікація,
редагування, оновлення, отримання анкет);
Content Management – управління вмістом усіх функціональних розділів
web-сторінки: новини, про кафедру, вступнику, студенту, наукова діяльність,
проекти, заходи, анкетування, акредитація.
56
ЧДТУ 252152.005ПЗ
Рисунок 2.8 – Діаграма пакетів для web-сторінки кафедри ПЗАС
Тепер аналізуємо діаграму пакетів (рисунок 2.8):
Users Management:
сутності: студент, абітурієнт, партнер, гість;
функціональність: перегляд усіх відкритих розділів web-сторінки,
заповнення та надсилання анкет.
Administrator Management:
сутності: викладач з правами адміністратора;
57
ЧДТУ 252152.005ПЗ
функціональність: публікація, редагування та оновлення вмісту у всіх
розділах, отримання відповідей із системи анкетування.
Content Management:
сутності: News, About Department, For Applicants, For Students, Research
Activities, Projects, Events, Surveys, Accreditstion;
функціональність: представлення інформації про діяльність кафедри,
структуроване зберігання вмісту, доступ для користувачів і адміністраторів.
Залежності між пакетами
На діаграмі показані залежності між пакетами у вигляді пунктирних
стрілок:
Users Management → Content Management, оскільки користувачі
взаємодіють з інформаційними розділами web-сторінки, переглядають доступний
вміст.
Administrator Management → Content Management, оскільки
адміністратор керує вмістом web-сторінки, редагує, оновлює та публікує
інформацію в усіх функціональних розділах.
Content Management → Administrator Management, пакет контенту
передає результати взаємодії користувачів (заповнені анкети) адміністратору для
подальшої обробки.
Діаграма пакетів візуалізує логічну структуру web-сторінки кафедри ПЗАС
у вигляді трьох основних пакетів: користувачів, адміністратора та контенту.
Розподіл дозволив показати функціональні межі системи та характер взаємодії
між її частинами.
2.4 Архітектура компонентів
У підрозділі розглядається архітектура web-сторінки кафедри ПЗАС,
реалізованої на платформі WordPress. Представлено дві діаграми: діаграма
компонентів, яка демонструє логічну структуру системи та взаємозв’язки між її
компонентами, і діаграма розгортання, що відображає фізичне розміщення
компонентів на апаратних вузлах і зв’язки між ними. Такий підхід дає змогу
58
ЧДТУ 252152.005ПЗ
послідовно представити архітектуру компонентів системи – як з погляду їх
логічної взаємодії, так і фізичного розміщення.
2.4.1 Діаграма компонентів
У рамках архітектурного опису web-сторінки кафедри ПЗАС діаграма
компонентів (Component Diagram) слугує для опису фізичної структури системи.
Вона демонструє основні компоненти, які реалізовані або логічно виокремлені в
контексті CMS WordPress, а також взаємозв’язки між ними [27].
Для web-сторінки кафедри ПЗАС визначено такі основні компоненти:
User Interface – інтерфейс користувача, що забезпечує перегляд вмісту
web-сторінки через браузер;
Admin Panel (WordPress) – панель адміністратора для керування
контентом у CMS WordPress;
Content Management Servise – сервіс керування вмістом сторінки, що
реалізує функціональність усіх розділів (новини, про кафедру, проекти,
анкетування тощо);
Database Servise – зберігання і обробка даних.
Рисунок 2.9 – Діаграма компонентів для web-сторінки кафедри ПЗАС
Зв’язки між компонентами:
User Interface → Content Management Service: користувач переглядає
контент web-сторінки, який генерується сервісом керування вмістом;
Content Management Service → Database Service: сервіс управління
59
ЧДТУ 252152.005ПЗ
контентом взаємодіє з базою даних для зчитування та оновлення інформації;
Admin Panel (WordPress) → Content Management Service: адміністратор
редагує, оновлює та публікує вміст через адмін-панель, яка впливає на
функціонування контентного сервісу;
Admin Panel (WordPress) → Database Service: адміністративна панель
надсилає зміни до бази даних у процесі оновлення інформації.
Діаграма компонентів відображає фізичну структуру web-сторінки кафедри
ПЗАС, реалізованої у CMS WordPress. Представлені компоненти створюють
основу функціональності ресурсу, а зазначені зв’язки демонструють взаємодію
між інтерфейсом користувача, логікою контенту, адміністративною панеллю та
базою даних. Така модель надає комплексне уявлення про внутрішню структуру
системи та її узгодженість.
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
Розгортання програмної системи включає в себе встановлення її
компонентів на фізичних вузлах обчислювального середовища. Для реалізації
web-сторінки кафедри ПЗАС, яка була розроблена з використанням CMS
WordPress, визначено три основні апаратні вузли, які забезпечують обробку
запитів користувачів та адміністратора, керування вмістом та зберігання
інформації.
Основні апаратні вузли системи:
User Station (Користувацька станція)
– призначення: забезпечує доступ користувача до web-сторінки через
браузер;
– розміщений компонент: User Interface;
– функції: відображення вмісту, надсилання HTTP-запитів до сервера для
взаємодії з інформаційною системою.
Web Server
– призначення: виконує основну логіку системи, обробляє запити від
60
ЧДТУ 252152.005ПЗ
користувачів і адміністратора;
– розміщений компонент: Admin Panel (WordPress), Content Management
Service;
– функції: формування контенту сторінки, обробка запитів, управління
даними через CMS.
MySQL Database Server (Сервер бази даних)
– призначення: зберігання всієї структурованої інформації web-сторінки;
– розміщений компонент: Database Service;
– функції: збереження текстового вмісту, анкет, зображень та інших
даних, що передаються з Web Server.
Рисунок 2.10 – Діаграма розгортання для web-сторінки кафедри ПЗАС
Зв’язки між вузлами:
User Station ⟷ Web Server: між користувацькою станцією за сервером
встановлюється двосторонній зв’язок. Користувач надсилає запити до системи, а
Web Sever повертає згенеровані сторінки або дані у відповідь;
Web Server ⟷ MySQL Database Server: взаємодія між сервером
61
ЧДТУ 252152.005ПЗ
управління контентом та сервером бази даних також є двосторонньою. Web Server
надсилає запити на зчитування, оновлення чи збереження даних, а база даних
відповідає результатами операцій.
Розгортання web-сторінки кафедри ПЗАС побудовано на трьох
відокремлених вузлах: користувацькій станції, web-сервері та сервері бази даних.
Такий підхід забезпечує чітке розмежування ролей між відображенням
інтерфейсу, обробкою запитів і збереженням даних.
2.5 Моделювання поведінки системи
У цьому підрозділі буде змодельовано поведінку web-сторінки кафедри
ПЗАС як інформаційної системи, що взаємодіє з різними типами користувачів.
Зокрема, представлено сценарії взаємодії користувача з web-сторінкою, який
працює через web-інтерфейс, та адміністратора, який керує вмістом через адмін-
панель CMS WordPress. Будуть побудовані діаграми діяльності, послідовності,
комунікації та скінченного автомату, які допоможуть відобразити логіку
переходів між станами, обмін повідомленнями між об’єктами та порядок
виконання різних дій. Кожна діаграма демонструватиме окремі аспекти
функціонування web-ресурсу, що забезпечить повне уявлення про його поведінку
в процесі роботи.
2.5.1 Діаграма діяльності
Діаграма діяльності (Activity Diagram) слугує для моделювання поведінки
системи у вигляді послідовності дій. Вона надає можливість візуально
представити логіку сценаріїв взаємодії користувача чи адміністратора з web-
сторінкою кафедри ПЗАС.
У рамках проекту було створено дві діаграми діяльності:
для звичайного користувача, який взаємодіє із сайтом через web-
інтерфейс;
для адміністратора, який здійснює керування контентом через CMS
WordPress.
Діаграма діяльності користувача
62
ЧДТУ 252152.005ПЗ
На рисунку 2.11 представлена UML-діаграма діяльності, що демонструє
типову поведунку користувача після відкриття web-сторінки.
Рисунок 2.11 – Діаграма діяльності для користувача web-сторінки кафедри ПЗАС
63
ЧДТУ 252152.005ПЗ
Опис кроків діяльності користувача
Відкрити web-сторінку pzas.chdtu.edu.ua:
користувач відкриває web-сторінку кафедри ПЗАС у браузері.
Користувач обирає розділ:
користувач взаємодіє з головним меню сторінки, де доступні основні
розділи.
Розділ «Новини»:
перегляд новин, розміщених на сторінці.
Розділ «Про кафедру»:
перегляд інформації про історію кафедри, склад викладачів,
інформаційне забезпечення.
Розділ «Вступнику»:
перегляд інформації щодо вступу на спеціальність.
Розділ «Студенту»:
перегляд навчальних дисциплін, розкладу занять, графіку консультацій
викладачів, корисних посилань і про стажування.
Розділ «Наукова діяльність»:
перегляд інформації про аспірантів, наукові школи, наукові проекти.
Розділ «Проекти»:
перегляд міжнародних, студентських і наукових проектів.
Розділ «Заходи»:
перегляд заходів, організованих кафедрою.
Розділ «Анкетування»:
перегляд анкет, заповнення/надсилання анкетної форми.
Розділ «Акредитація»:
перегляд акредитаційних матеріалів та документації.
Діаграма діяльності адміністратора
На рисунку 2.12 представлена діаграма діяльності адміністратора, яка
здійснює керування вмістом через CMS WordPress. Після входу до системи
адміністратор обирає розділ для редагування. Доступні ті самі дев’ять основних
64
ЧДТУ 252152.005ПЗ
розділів, що і для користувача.
Рисунок 2.12 – Діаграма діяльності для адміністратора web-сторінки кафедри ПЗАС
65
ЧДТУ 252152.005ПЗ
Опис кроків діяльності адміністратора
Відкрити CMS WordPress:
адміністратор переходить до системи управління контентом сторінки.
Вхід у систему:
виконує автентифікацію через адміністративну панель.
Адміністратор обирає розділ для редагування:
система пропонує вибір одного з дев’яти основних розділів web-
сторінки.
Розділ «Новини»:
адміністратор оновлює, публікує новини.
Розділ «Про кафедру»:
оновлення даних про історію, склад викладачів, інформаційне
забезпечення;
публікація змін.
Розділ «Вступнику»:
оновлення інформації щодо вступу;
публікація матеріалів для абітурієнтів.
Розділ «Студенту»:
оновлення даних про історію, склад викладачів;
публікація змін.
Розділ «Наукова діяльність»:
оновлення інформації про аспірантів, наукові школи, наукові проекти;
публікація наукової інформації.
Розділ «Проекти»:
адміністратор оновлює дані про міжнародні, студентські та наукові
проекти;
публікує оновлену інформацію.
Розділ «Заходи»:
оновлення інформації про заходи;
66
ЧДТУ 252152.005ПЗ
публікація звітів про заходи.
Розділ «Анкетування»:
оновлення анкетних матеріалів;
публікація оновлень;
перегляд надісланих анкет.
Розділ «Акредитація»:
адміністратор оновлює та публікує документи про акредитацію освітніх
програм.
Діаграми діяльності показують поведінку користувача та адміністратора у
системі. Вони поділяють процеси на логічні кроки, показують розгалуження та
послідовність дій, завдяки цьому краще зрозуміти, як працює система, і полегшує
її реалізацію та тестування [28].
2.5.2 Діаграма послідовності
Діаграма послідовності описує порядок обміну повідомленнями між
об’єктами системи в рамках одного сценарію. Вона відображає послідовність
викликів та реакцій, що є необхідними для реалізації дій користувача або
адміністратора [29].
Для web-сторінки кафедри ПЗАС побудовано дві діаграми: перша
демонструє процес заповнення та надсилання анкети, друга – публікацію новини
через адмін-панель CMS WordPress.
Сценарій 1. Заповнення та надсилання анкети користувачем
На рисунку 2.13 зображено діаграму послідовності для сценарію
«Заповнення та надсилання анкети користувачем».
Крок 1. Перехід на web-сторінку:
користувач відкриває web-сторінку кафедри ПЗАС;
інтерфейс виводить головну сторінку.
Крок 2. Перехід до анкетування:
користувач обирає розділ «Анкетування»;
інтерфейс запитує сторінку з анкетами;
67
ЧДТУ 252152.005ПЗ
сервіс управління контентом повертає результат, який відображається
користувачу.
Крок 3. Вибір анкети:
користувач обирає потрібну анкету;
інтерфейс запитує відповідну форму;
сервіс повертає форму анкети, яку виводить на екран.
Крок 4. Заповнення та надсилання анкети:
користувач вводить відповіді та надсилає форму;
інтерфейс передає анкету до сервісу управління контентом.
Крок 5. Збереження і підтвердження:
сервіс управління контентом зберігає анкету в базі даних;
після підтвердження, система повідомляє інтерфейс, який відображає
результат користувачу.
Рисунок 2.13 – Діаграма послідовності за сценарієм «Заповнення та надсилання
анкети користувачем» для web-сторінки кафедри ПЗАС
Сценарій 2. Публікація новини адміністратором
68
ЧДТУ 252152.005ПЗ
На рисунку 2.14 представлено діаграму послідовності для сценарію
«Публікація новини адміністратором».
Рисунок 2.14 – Діаграма послідовності за сценарієм «Публікація новини
адміністратором» для web-сторінки кафедри ПЗАС
Крок 1. Вхід у систему:
адміністратор відкриває адмін-панель CMS WordPress;
адмін-панель відображає форму входу;
після введення логіна і пароля система авторизує адміністратора та
відкриває меню.
Крок 2. Перехід до новин:
адміністратор обирає розділ «Новини»;
адмін-панель виводить список публікацій.
Крок 3. Створення новини:
адміністратор ініціює створення новини;
система відкриває форму з полями заголовка, опису та зображення.
Крок 4. Введення та публікація:
69
ЧДТУ 252152.005ПЗ
після заповнення даних адміністратор натискає кнопку «Опублікувати»;
адмін-панель передає новину до сервісу управління контентом.
Крок 5. Збереження новини:
сервіс управління контентом надсилає дані до бази даних;
після успішного збереження, система повідомляє про публікацію, а
адмін-панель виводить підтвердження.
2.5.3 Діаграма комунікації
Діаграма комунікації ілюструє структуру взаємодії між об’єктами в рамках
певного контексту. Вона зосереджена на зв’язках об’єктів та порядку
повідомлень, які позначаються номерами [30]. Для web-сторінки кафедри ПЗАС
було створено окремі діаграми комунікації для двох ключових сценаріїв: дій
користувача під час заповнення та надсилання анкети, дій адміністратора під час
публікації новини.
Сценарій 1. Заповнення та надсилання анкети користувачем
Діаграма демонструє структуровану послідовність дій користувача від
відкриття web-сторінки до завершення заповнення та надсилання анкети з
підтвердженням результату про успішну відправку.
1 Користувач → User Interface: відкрити web-сторінку кафедри ПЗАС
користувач відкриває головну web-сторінку через браузер.
2 User Interface → Користувач: відобразити головну сторінку
система завантажує вміст головної сторінки для перегляду.
3 Користувач → User Interface: обрати розділ «Анкетування»
користувач переходить до розділу, що містить доступні анкети.
4 User Interface → Content Management Service: запитати сторінку з
анкетами
інтерфейс формує запит до сервісу керування контентом.
5 Content Management Service → User Interface: повернути сторінку з
посиланнями на анкети
сервіс надає структуру розділу анкетування.
70
ЧДТУ 252152.005ПЗ
6 User Interface → Користувач: відобразити список анкет
користувач бачить перелік доступних форм.
7 Користувач → User Interface: обрати посилання на потрібну анкету
користувач натискає на відповідне посилання.
8 User Interface → Content Management Service: отримати форму анкети
інтерфейс ініціює запит на отримання форми.
9 Content Management Service → User Interface: повернути форму анкети
форма анкети завантажується у відповідь.
10 User Interface → Користувач: відобразити форму анкети
користувач бачить форму для заповнення.
11 Користувач → User Interface: заповнити анкету та натиснути
«Надіслати»
користувач вводить дані та надсилає їх.
12 User Interface → Content Management Service: передати заповнену анкету
інтерфейс надсилає дані до сервісу управління контентом.
13 Content Management Service → Database Service: зберегти анкету
сервіс ініціює запис інформації.
14 Database Service → Content Management Service: підтвердити збереження
база даних повертає відповідь про успішну операцію.
15 Content Management Service → User Interface: повідомити про успішну
відправку
система повідомляє, що анкету надіслано.
16 User Interface → Користувач: відобразити повідомлення про успішну
відправку
користувачу показується фінальне повідомлення.
Сценарій 2. Публікація новини адміністратором
Діаграма відображає логіку публікації контенту через CMS WordPress,
враховуючи всі етапи авторизації, а також створення та збереження новин.
1 Адміністратор → Admin Panel (CMS WordPress): відкрити адмін-панель
71
ЧДТУ 252152.005ПЗ
адміністратор переходить за URL-адресою до панелі керування.
2 Admin Panel → Адміністратор: вивести форму входу
інтерфейс авторизації виводиться на екран.
Рисунок 2.15 – Діаграма комунікації за сценарієм «Заповнення та надсилання
анкети користувачем» для web-сторінки кафедри ПЗАС
3 Адміністратор → Admin Panel: ввести логін і пароль, підтвердити вхід
адміністратор заповнює поля логіну та паролю.
4 Admin Panel → Адміністратор: підтвердити авторизацію та завантажити
головне меню
адміністратор отримує доступ до панелі керування.
5 Адміністратор → Admin Panel: обрати розділ «Новини»
перехід до керування новинами.
6 Admin Panel → Адміністратор: відобразити список новин
завантажується перелік опублікованих або чернеткових матеріалів.
7 Адміністратор → Admin Panel: створити новину
72
ЧДТУ 252152.005ПЗ
ініціюється створення нового запису.
8 Admin Panel → Адміністратор: вивести поля: заголовок, опис,
зображення
інтерфейс відкриває форму для введення контенту.
9 Адміністратор → Admin Panel: ввести всі дані та натиснути кнопку
«Опублікувати»
публікація новини через CMS.
10 Admin Panel → Content Management Service: передати новину для
публікації
передача вмісту до серверної логіки.
11 Content Management Service → Database Service: зберегти новину
новина фіксується у системі.
12 Database Service → Content Management Service: підтвердити збереження
база даних надсилає відповідь.
13 Content Management Service → Admin Panel: повідомити про успішну
публікацію
інтерфейс отримує сигнал про завершення.
14 Admin Panel → Адміністратор: відобразити підтвердження публікації
адміністратору відображається відповідне повідомлення.
Рисунок 2.16 – Діаграма комунікації за сценарієм «Публікація новини
адміністратором» для web-сторінки кафедри ПЗАС
73
ЧДТУ 252152.005ПЗ
Створені діаграми комунікації демонструють структуру взаємодії між
об’єктами системи і повідомленнями для основних сценаріїв роботи web-сторінки
кафедри ПЗАС. Вони допомагають візуалізувати зв’язки між користувачем,
адміністратором, інтерфейсом, сервісом управління контентом та базою даних,
акцентуючи увагу на послідовності повідомлень у рамках конкретних дій. Такий
підхід сприяє глибшому розумінню архітектури взаємодій у системі та створює
основу для її реалізації.
2.5.4 Діаграма скінченного автомату
Діаграма скінченного автомату описує поведінку системи у вигляді
послідовності станів, які змінюються у відповідь на події, що відбуваються
протягом його життєвого циклу [31]. Для web-сторінки кафедри ПЗАС
побудовано діаграму станів (рисунок 2.17), яка відтворює зміну станів сторінки в
процесі взаємодії з користувачем.
74
ЧДТУ 252152.005ПЗ
Рисунок 2.17 – Діаграма скінченного автомату для web-сторінки кафедри ПЗАС
Детальний опис усіх станів діаграми скінченного автомату web-сторінки
кафедри ПЗАС
Неактивний:
початковий стан системи, коли web-сторінка ще не відкрита;
75
ЧДТУ 252152.005ПЗ
після події «Відкрити web-сторінку кафедри ПЗАС» система переходить
у активний стан.
Активний:
основний складений стан, у якому відбувається вся взаємодія з
користувачем;
містить вкладені стани: ГоловнеМеню та всі інші.
ГоловнеМеню:
основний стан після відкриття web-сторінки, коли вона стає активною;
відображається головна сторінка з навігаційним меню;
користувач має змогу перейти до будь-якого з дев’яти функціональних
розділів;
у стані виконується очікування дій користувача.
ПереглядРозділу«Новини»:
користувач обирає розділ меню «Новини»;
сторінка відображає останні новини кафедри;
після ознайомлення користувач може повернутись до головного меню.
ПереглядРозділу«Про Кафедру»:
обрано розділ із загальною інформацією про кафедру;
відображаються дані про історію, викладачів та забезпечення;
після перегляду інформації користувач може повернутися до головного
меню.
ПереглядРозділу«Вступнику»:
розділ містить інформацію для абітурієнтів;
користувач може переглядати вміст або повернутись до меню.
ПереглядРозділу«Студенту»:
доступ до дисциплін, графіку консультацій викладачів, розкладу занять,
корисних посилань, стажування;
після перегляду є можливість повернутись до головного меню.
ПереглядРозділу«Наукова діяльність»:
76
ЧДТУ 252152.005ПЗ
містить інформацію про наукові школи, дослідження, інформацію для
аспірантів;
стан завершується поверненням до головної сторінки.
ПереглядРозділу«Проекти»:
виведення інформації про наукові, студентські або міжнародні проекти,
які реалізуються на кафедрі;
після перегляду – перехід назад до головного меню.
ПереглядРозділу«Заходи»:
розділ включає фото/відео звіти та описи заходів, організованих
кафедрою;
перехід у цей стан здійснюється з головного меню, вихід – повернення
назад.
ПереглядРозділу«Акредитація»:
виводиться перелік акредитаційних документів;
користувач може переглянути документи, після чого повертається до
меню.
ПереглядРозділу«Анкетування»:
обрано розділ «Анкетування»;
користувачу виводиться список доступних форм для заповнення;
із цього стану можливий перехід до вибору анкети або повернення до
меню.
ВибірАнкети:
користувач обирає анкету для заповнення;
після вибору відбувається перехід до відповідної форми.
Заповнення/НадсиланняАнкети:
сторінка відображає обрану форму;
користувач вводить відповіді та натискає кнопку «Надіслати»;
після того, як анкета була надіслана, користувач може повернутися до
головного меню.
77
ЧДТУ 252152.005ПЗ
Завершення роботи:
подія «Закрити сторінку» завершуючи активну взаємодію користувача з
web-ресурсом.
Діаграма скінченного автомату конкретизує дії web-сторінки кафедри ПЗАС
як систему, що реагує на події користувача, переходячи між станами. Вона
дозволяє чітко уявити логіку навігації, а також детально описати умови переходів
між розділами та повернення до головного меню.
78
ЧДТУ 252152.005ПЗ
ВИСНОВОК ДО ДРУГОГО РОЗДІЛУ
У цьому розділі було представлено системний підхід до проектування web-
сторінки кафедри програмного забезпечення автоматизованих систем ЧДТУ. В
результаті аналізу предметної області визначено інформаційну структуру
сторінки, її основні розділи та типи користувачів. Розроблена модель відображає
справжні напрями роботи кафедри і закладає основу для логічного та
функціонального наповнення системи.
Сформульовані вимоги до системи включають первинні, детальні,
функціональні та нефункціональні характеристики. У процесі розробки враховано
потреби як кінцевих користувачів, так і адміністратора. Були створені окремі
моделі для очікуваної поведінки кожної ролі.
Діаграма прецедентів відобразила границі обов’язків: користувач
переглядає і взаємодіє з інформацією через web-сторінку, адміністратор керує
вмістом черех адмін-панель CMS WordPress. Саме ця відмінність у платформах і
методах викликала різницю у поведінці об’єктів системи.
Діаграма класів допомогла виявити ключові об’єкти системи, визначити
їхню структуру, методи та взаємозв’язки. Це надало формальне уявлення про
логіку взаємодії між різними частинами та ролями. Діаграма пакетів відобразила
структуру системи, поділену на пакети: управління користувачами, контентом та
адміністрування, з показаними залежностями між ними.
На основі цього були створені діаграми компонентів та розгортання. Перша
з них ілюструє внутрішню будову системи, друга – спосіб розміщення
компонентів на апаратних засобах (користувацька станція, web-сервер та сервер
бази даних).
Моделювання системної поведінки включало розробку діаграм діяльності,
послідовності, комунікації та скінченного автомата. Діаграми діяльності
продемонструвала основні дії користувача та адміністратора, тоді як діаграми
послідовності і комунікації детально висвітлювали сценарії:
заповнення/надсилання анкет та публікація новин. Діаграма скінченного автомату
79
ЧДТУ 252152.005ПЗ
описала повний життєвий цикл взаємодії користувача з web-ресурсом: від
неактивного стану до активного користування розділами, з можливістю
переходів, заповнення/надсилання форм анкет та повернення до головного меню.
Це забезпечило цілісне розуміння навігації по web-сторінці.
Таким чином, отримані результати закладають фундамент для
впровадження та подальшого вдосконалення системи в процесі розробки й
тестування.
80
ЧДТУ 252152.005ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
У цьому підрозділі розглядається процес створення оновленого
програмного комплексу web-сторінки кафедри ПЗАС, з урахуванням вибору
технологічних засобів, побудови архітектури, структури бази даних, інтерфейсу
користувача та ключових функціональних компонентів. Основне мета –
забезпечити логічну структуру, зручну навігацію, сучасне оформлення та
підтримку двох мов відповідно до завдань модернізації ресурсу.
3.1.1 Обґрунтування вибору засобів реалізації
Для реалізації оновлення web-сторінки кафедри ПЗАС ЧДТУ було обрано
низку інструментів, які дозволяють створити структуру, оформити контент та
забезпечити необхідну функціональність ресурсу. Основною платформою для
розробки є CMS WordPress, оскільки поточна версія web-сторінки кафедри
розроблена саме на цій платформі і доступ до неї здійснюється через
адміністративну панель. Це обґрунтовує доцільність продовження роботи в
рамках вже існуючого середовища, без переходу на інші платформи.
1 Система керування контентом CMS WordPress
Вибір платформи CMS WordPress обумовлений тим, що web-сторінка
кафедри вже реалізована на цій системі. Ця система пропонує гнучке управління
контентом, розширення за допомогою плагінів, інструменти для публікації та
підтримку у вигляді спільноти [32].
Переваги:
підтримка багаторівневої структури з класифікацією на розділи та
підрозділи;
доступ до адміністративної панелі для централізованого управляння
сторінками;
можливість розширення функцій через плагіни;
81
ЧДТУ 252152.005ПЗ
підтримка шаблонів, які полегшують оформлення сторінок;
активна спільнота та регулярні оновлення системи.
2 Візуальний конструктор сторінок Elementor
Elementor є потужним плагіном для створення web-сторінок у межах CMS
WordPress. Його використання надає інструменти та гнучкість, які дозволяють
формувати структуровані блоки контенту без необхідності кодування [33].
Переваги:
редагування web-сторінок у візуальному режимі;
великий вибір компонентів (заголовки, текстові блоки, кнопки тощо);
підтримка багаторазових шаблонів;
налаштування дизайну сторінок без необхідності редагувати код.
3 Мова розмітки HTML
HTML слугує для створення структури та вмісту на web-сторінці за
допомогою різних елементів [34]. Хоча редактор Elementor використовується
здебільшого, іноді виникає потреба в безпосередньому редагуванні HTML-коду,
наприклад, для інтеграції нестандартних блоків або елементів, що не можуть бути
реалізовані у візуальному режимі.
Переваги:
чітке визначення структури вмісту;
повна сумісність з WordPress та Elementor;
можливість редагування шаблонів вручну за необхідності.
4 Мова стилів CSS
CSS обрано в якості мови стилізації для управління зовнішнього вигляду
елементів на web-сторінці. З його допомогою можна налаштувати вигляд
контенту в залежності від загального дизайну.
Переваги:
відокремлення структури від оформлення;
зміни кольорів, шрифтів, розмірів та відступів;
підтримка редагування окремих блоків і всієї сторінки в цілому.
5 Мова програмування JavaScript
82
ЧДТУ 252152.005ПЗ
JavaScript використовується для створення інтерактивних елементів
сторінки. Його застосування дозволяє забезпечити динамічну взаємодію з
користувачами [35].
Переваги:
обробка подій, ініційованих користувачем (клік, наведення курсору
тощо);
впровадження функцій, що виходять за межі базових можливостей
шаблонів;
можливість інтеграції із зовнішніми плагінами для покращення
функціональності елементів.
6 Плагін Polylang
Polylang було обрано для реалізації багатомовної підтримки web-сторінки
кафедри ПЗАС. Плагін дозволяє створювати та керувати перекладеними версіями
кожної сторінки, розділу та елемента інтерфейсу без дублювання вручну.
Переваги[36]:
повна інтеграція з CMS WordPress та Elementor;
зручне керування мовними версіями сторінок через адміністративну
панель;
підтримка перемикання мови інтерфейсу для користувачів;
можливість налаштування окремих меню, посилань і віджетів для
кожної мови.
Обрані засоби для web-сторінки кафедри ПЗАС ЧДТУ визначені з
урахуванням технічних характеристик існуючого ресурсу, а також вимог до
логічної структури, оформлення та функціонального наповнення. Використання
CMS WordPress разом із редактором Elementor, а також мов HTML, CSS і
JavaScript, забезпечує цілісну реалізацію задуманої структури, дизайну та
інтерактивності. Кожен інструментів має свою роль в системі і застосовується
відповідно до визначених завдань. Плагін Polylang додатково забезпечує
підтримку англомовної версії, що відповідає меті модернізації ресурсу для
ширшої аудиторії.
83
ЧДТУ 252152.005ПЗ
3.1.2 Опис структурної схеми
Структурна схема (рисунок 3.1) показує основні компоненти системи web-
сторінки кафедри ПЗАС та логіку їх взаємодії [37] при виконанні важливих
інформаційних процесів: редагування, перегляду, збереження даних та виведення
сторінок. Схема змодельована відповідно до архітектури інформаційної системи,
де виділено ключові підсистеми, що взаємодіють через централізовану СУБД.
Опис компонентів схеми:
1 Система web-сторінки кафедри ПЗАС: загальна логічна система, яка
включає всі підсистеми і забезпечує цілісність функціонування ресурсу.
2 Підсистема редагування контенту: компонент, що обробляє дані, введені
адміністратором, та передає їх у СУБД для подальшого зберігання.
3 Підсистема перегляду вмісту: забезпечує формування запиту на
перегляд відповідного контенту (новини, інформація про кафедру, навчання,
наукова діяльність тощо) та передає його до СУБД для зчитування даних з бази.
4 СУБД: система управління базами даних, яка приймає вхідні дані з
підсистем (редагування та перегляду), зберігає оновлення та повертає контент для
відображення. Є центральною ланкою між взаємодією контенту й інтерфейсом.
5 База даних: основне сховище інформації, у якому зберігаються текстові
дані сторінок, анкети, службова інформація тощо.
6 Підсистема формування сторінок: отримує структуровані дані з СУБД,
формує HTML-вміст відповідно до шаблонів і готує його для подальшого
виведення.
7 Виведення сторінки: кінцевий етап, на якому сформована сторінка
відображається в інтерфейсі користувача через браузер.
84
ЧДТУ 252152.005ПЗ
Рисунок 3.1 – Структурна схема web-сторінки кафедри ПЗАС
Схема ілюструє логіку інформаційної взаємодії в системі web-сторінки
кафедри ПЗАС: від редагування та введення даних до їх збереження, обробки та
виведення кінцевому користувачу. Усі компоненти взаємопов’язані, а дані, що
вводяться з різних джерел, централізовано проходять через СУБД та зберігаються
в єдиній базі.
3.1.3 Опис логічної схеми
Логічна схема (рисунок 3.2) показує алгоритм функціонування web-
сторінки кафедри ПЗАС ЧДТУ, від моменту запуску аж до відображення
потрібного контенту або передачі даних анкетувань. Схема побудована з точки
зору користувача і включає основні інформаційні дії, які підтримують взаємодію з
основними розділами web-сторінки.
Всі дії здійснюються в середовищі CMS WordPress. Будь який запит
користувача ініціює послідовний процес, який складається з формування запиту,
обробки на рівні сервісу управління контентом, звернення до бази даних і
генерування потрібної сторінки для відображення у браузері.
Алгоритм функціонування системи:
85
ЧДТУ 252152.005ПЗ
1. Ініціалізація: користувач відкриває головну сторінку сайту
pzas.chdtu.edu.ua. Завантажується структура навігаційного меню.
2. Вибір розділу: користувач обирає один із дев’яти основних розділів:
«Новини», «Про кафедру», «Вступнику», «Студенту», «Наукова діяльність»,
«Проекти», «Заходи», «Анкетування» та «Акредитація».
3. Формування запиту: у кожному випадку формується запит відповідно до
змісту обраного розділу. Цей запит надсилається до сервісу управління
контентом.
4. Зчитування інформації: сервіс управління контентом звертається до бази
даних із відповідним запитом (наприклад, отримати список новин, документи,
інформацію про викладачів тощо).
5. Формування сторінки та виведення: на основі отриманих даних
формується сторінка відповідного розділу, після чого вона відображається у
браузері користувача.
Також є особливість розділу «Анкетування». Порівняно з іншими
розділами, розділ «Анкетування» включає розгалуження:
– після перегляду переліку анкет користувач може або завершити
взаємодію з даним розділом, або обрати конкретну анкету для заповнення;
– у разі заповнення дані анкети передаються до сервісу управління
контентом і зберігаються в базі даних;
– після успішного збереження система формує відповідне повідомлення.
Також присутня циклічна взаємодія між користувачем і системою, після
завершення перегляду будь-якого розділу користувач може повернутися до
головного меню та обрати інший розділ. Таким чином реалізується замкнений
цикл перегляду вмісту без потреби перезавантаження сторінки.
Логічна схема відображає скоординовану роботу компонентів web-сторінки
кафедри ПЗАС: від вибору розділу користувачем до обробки запиту, доступу до
бази даних та відображення результату. У випадку введення даних (розділ
«Анкетування») реалізовано повний цикл – введення, передача, збереження,
підтвердження. Такий підхід забезпечує цілісність структури, логіку навігації та
86
ЧДТУ 252152.005ПЗ
зручність взаємодії.
Рисунок 3.2 – Логічна схема для web-сторінки кафедри ПЗАС
87
ЧДТУ 252152.005ПЗ
3.1.4 Розробка бази даних
У структурі web-сторінки кафедри ПЗАС забезпечено зв’язок з базою даних,
яка виконує роль сховища інформації. Так, як база даних не розроблялася вручну
під час реалізації проекту, її логічна структура визначає, як саме зберігається і
взаємодіє контент на рівні системи.
Система побудована з урахуванням двох підсистем:
– перегляд вмісту: відображення структурованої інформації для кінцевого
користувача;
– редагування контенту: оновлення та зміна даних через адміністративну
панель CMS WordPress.
Зберігання інформації відбувається за принципами реляційної моделі, яка
дозволяє уникати надмірності та забезпечує логічні зв’язки між сутностями. Дані
поділено на блоки відповідно до структури web-сторінки.
Перелік основних логічних сутностей:
новини: сторінка з хронологічним списком новин, оголошень,
повідомлень, які мають можливість перейти на окрему сторінку з детальною
інформацією (атрибути: заголовок, дата, опис, мультимедійні матеріали);
про кафедру: розділ, який має підрозділи з різними блоками інформації
історії кафедри, склад викладачів, інформаційне забезпечення (атрибути:
заголовок сторінки, текст, мультимедійні матеріали);
вступнику: структурована інформація щодо вступу для різних категорій
вступників (атрибути: заголовок, тип вступу, опис, PDF-посилання,
мультимедійні матеріали);
студенту: розділ, який має підрозділи з різними блоками інформації
дисциплін, графік консультацій викладачів, розклад занять, корисні посилання,
інформація щодо стажування (атрибути: заголовок сторінки, текст, посилання,
мультимедійні матеріали);
наукова діяльність: опис напрямів досліджень, викладацьких тем,
результатів і учасників, також розділ має підрозділі, які включають в себе
інформацію про аспірантуру, наукові проекти, семінари, угоди про співпрацю та
88
ЧДТУ 252152.005ПЗ
наукові школи (атрибути: заголовок сторінки, вміст, мультимедійні матеріали,
PDF-посилання);
проекти: інформація про реалізовані проекти на кафедрі наприклад,
студентські, наукові та міжнародні (атрибути: назва проекту, опис, мультимедійні
матеріали, посилання);
заходи: на сторінці представлені заходи, які відбуваються на кафедрі, з
можливістю перейти на окрему сторінку для перегляду детальної інформації
(атрибути: назва заходу, дата, опис, посилання, мультимедійні матеріали);
анкетування: подано перелік анкет для різних категорій користувачів
(атрибути: заголовок, опис, посилання);
акредитація: сторінка на якій є список документів та посилання на
акредитаційні матеріали (атрибути: заголовок, опис, назва документу, посилання).
База даних CMS WordPress виступає єдиним джерелом зберігання всього
контенту web-сторінки ПЗАС. Її логічна структура включає всі розділи ресурсу,
підтримує двомовність, забезпечує стабільну взаємодію між системою
редагування та перегляду, а також дозволяє легко оновлювати та редагувати вміст
без зміни архітектури.
3.1.5 Розробка інтерфейсу користувача
Інтерфейс користувача web-сторінки кафедри ПЗАС розроблявся з
орієнтацією на зручність взаємодії, простоту навігації та візуальну узгодженість
усіх розділів. Через велику кількість інформації ключовим завданням стало
забезпечення структурованої та зрозумілою подачі контенту. При проектуванні
було враховано основні принципи UI/UX дизайну, що передбачають створення
зручного, логічно побудованого та візуально привабливого інтерфейсу.
Оформлення виконано засобами конструктора Elementor у межах CMS
WordPress з урахуванням фірмового стилю кафедри та університету. Всі
дизайнерські рішення базуються на принципах користувацького досвіду (UX) та
інтерфейсної доступності (UI), що підвищує ефективність взаємодії з ресурсом.
Основні вимоги до інтерфейсу користувача:
89
ЧДТУ 252152.005ПЗ
зрозумілість: кожен розділ і підрозділ має логічну назву та
розташування, що відповідає очікуванням користувача;
інтуїтивна навігація: меню, кнопки, посилання і інтерактивні елементи
легко впізнавані та зрозумілі без додаткових пояснень;
візуальна привабливість: застосовано узгоджену кольорову палітру,
сучасний дизайн та стилістику, що сприяють комфортному сприйняттю
інформації;
єдність стилю: у всіх розділах використано однакові шрифти, розміри
тексту, відступи та блоки;
структурованість контенту: матеріал згруповано в тематичній секції,
оформлені у вигляді карток, таблиць або вкладених блоків для полегшення
сприйняття;
багатомовність: реалізовано підтримку української та англійської версій
через плагін Polylang.
1. Вибір шрифту Montserrat
Для web-сторінки кафедри ПЗАС обрано шрифт Monserrat як основний для
всіх текстових елементів. Його вибір зумовлений функціональністю, візуальною
чіткістю та відповідністю стилю академічного ресурсу.
Обґрунтування вибору:
підтримка кирилиці та латиниці – забезпечує коректне відображення
української і англійської мовних версій;
універсальність та гнучкість – доступний у різних стилях та насиченнях,
що робить його гнучким у використанні та дизайні [38];
сучасний, лаконічний вигляд – відповідає вимогам освітнього ресурсу;
висота х-ліній шрифту висока – робить його легким для читання [39];
технічна сумісність – легко інтегрується в CMS WordPress і коректно
працює у всіх сучасних браузерах.
Вибір розмірів шрифту забезпечує одночасно комфортне читання,
структуру та привабливий візуальний вигляд сторінок кафедри ПЗАС:
основний текст – 16-18px: визнано стандартом web-дизайну, більшість
90
ЧДТУ 252152.005ПЗ
браузерів за замовчуванням встановлюють 16px, що відповідає звичному рівню
читання [40];
заголовки – від 20px до 30px: заголовки H3 (20-24px) і H2 (24-30px)
встановлюють чітку рівницю між розділами та секціями контенту, що відповідає
рекомендаціям UI/UX практик [41].
Рисунок 3.3 – Шрифт, який використано для сторінок кафедри ПЗАС
2 Вибір кольорів
У web-сторінці кафедри ПЗАС використано фірмові кольори:
#0D4C96 – офіційний колір ЧДТУ, застосовувався для оформлення
розділу новин;
#1C066A – глибокий синій колір, обраний як основа айдентики кафедри
ПЗАС. Використовувався для посилань, кнопок, тіні, акцентних елементів на які
варто звернути увагу;
#C9C9C9 – допоміжний сірий колір, використовувався для
підсвічування фонових елементів, меж блоків;
#C8E1FF – світло-голубий, використовувався як фон для текстових
секцій, додає легкості.
91
ЧДТУ 252152.005ПЗ
Рисунок 3.4 – Кольори, які використовувалися у сторінках кафедри
3 Використання карток у структурі інтерфейсу
З метою покращення сприйняття інформації на web-сторінці кафедри ПЗАС
було реалізовано подачу контенту у вигляді карток.
Картка – це візуальний компонент інтерфейсу, що відображає пов’язану
інформацію у межах окремої логічної області.
Застосування карткової структури дозволило:
Порядкувати контент: кожен розділ представлений окремою карткою,
що дозволяє чітко відокремити певні інформаційні одиниці.
Підвищити зручність сприйняття: завдяки однаковій структурі карток
користувач швидко орієнтується в подачі інформації, зчитуючи ключові дані
(заголовок, короткий опис, дата, зображення) з першого погляду.
Забезпечити візуальну логіку та симетрію: всі карки мають спільний
стиль (рамка, тінь, закруглені кути, поля), що робить сторінку гармонійною та
структурованою.
Створити адаптивність для різних типів контенту: незалежно від
тематики (новини, викладачі, документація) однаковий формат дозволяє подавати
інформацію послідовно, не порушуючи загального стилю.
Реалізувати навігацію та взаємодію: у багатьох картках передбачено
кнопки або посилання («Читати далі», «Більше про викладача» тощо), що
дозволяє користувачеві переходити до розширеного перегляду.
92
ЧДТУ 252152.005ПЗ
Рисунок 3.5 – Використання карток у інтерфейсі (розділ «Заходи»)
Використання карткової структури дало змогу логічно впорядкувати
інформацію, зробити інтерфейс візуально структурованим і полегшити взаємодію
користувача з контентом.
4 Інтуїтивність інтерфейсу
Зрозуміла структура головного меню: горизонтальне меню з
доступними розділами («Про кафедру», «Вступнику», «Студенту», «Заходи»
тощо) логічно групує вміст. Випадаючі підрозділи з контрастним фоном
допомагають швидко зорієнтуватися у структурі сторінки.
Рисунок 3.6 – Приклад структури головного меню
Єдині принципи подачі контенту: картки новин, викладачів,
вибіркових дисциплін, заходів і багато інших сторінок мають схожу структуру
подання інформації. Це забезпечує послідовність у сприйнятті.
93
ЧДТУ 252152.005ПЗ
Рисунок 3.7 – Приклад подачі контенту через картки (підрозділ «Випускникам
шкіл»)
Рисунок 3.8 – Приклад подачі новини через картки (сторінка з розділу «Новини»)
Акценти на ключових діях: посилання на детальні сторінки подано у
вигляді кнопок або маркових текстів з позначкою стрілки (→). Це дозволяє
користувачу легко зрозуміти, що елемент є інтерактивним.
94
ЧДТУ 252152.005ПЗ
Рисунок 3.9 – Приклад використання кнопки, як акценту на ключовій дії
(підрозділ «Склад кафедри»)
Ієрархія тексту: заголовки, підзаголовки і основний текст мають
певну ієрархію. Заголовки оформлено більшим шрифтом і жирним накресленням,
що дозволяє швидко сканувати сторінку (рисунок 3.10).
Виділення дат: дати новин винесені окремо в колірному блоці, що
полегшує відстеження актуальності події (рисунок 3.11).
Рисунок 3.10 – Приклад використання заголовків та підзаголовків на сторінках
(розділ «Наукова діяльність»)
95
ЧДТУ 252152.005ПЗ
Рисунок 3.11 – Виділення дат у списку новин (розділ «Новини»)
Наявність візуальних «якорів»: зображення викладачів, фотографії
студентських проектів, фото заходів відіграють роль інформаційного орієнтиру.
Вони не тільки доповнюють контент, а й підсилюють візуальне сприйняття
структури.
Рисунок 3.12 – Приклад фото, як візуального «якоря» (підрозділ «Наукові
проекти»)
– Кольорове розмежування: для покращення візуальної структури та
96
ЧДТУ 252152.005ПЗ
сприйняття контенту в інтерфейсі web-сторінки кафедри ПЗАС було застосовано
кольоровий фон у картках, таблицях. Таке рішення сприяє чіткому розмежуванню
вмісту, полегшує орієнтацію користувача на сторінці та дозволяє одразу
відокремити функціональні елементи від загального фону.
Рисунок 3.13 – Приклад використання кольорового фону у картках (підрозділ
«Студентські проекти»)
Рисунок 3.14 – Приклад використання кольорового фону у таблицях (підрозділ
«Співпраця з академічною спільнотою та роботодавцями»)
Система повернення та навігації між сторінками: у багатьох сторінках
є кнопки повернення внизу ( наприклад, « ←Повернутися до новин»), що
полегшує навігацію між рівнями.
97
ЧДТУ 252152.005ПЗ
Рисунок 3.15 – Система повернення до попередньої сторінки (розділ «Новини»)
5 Реалізація двомовності
Для забезпечення доступності інформаційного ресурсу для іноземних
користувачів на web-сторінці кафедри ПЗАС реалізовано підтримку двох мов –
української та англійської. Функціональність перемикання мови реалізовано за
допомогою плагіна Polylang, що дозволяє створювати окремі версії кожної
сторінки з повним збереженням структури та стилю.
Мовне перемикання здійснюється через мовний перемикач у верхній
частині сторінки, що відповідає принципам інтуїтивної навігації. Переклад
охоплює всі розділи та їхні підрозділи. Реалізація двомовності сприяє залученню
іноземних студентів, викладачів і партнерів, покращенню іміджу кафедри у
міжнародному освітньому середовищі.
Такий підхід дозволяє підтримувати цілісність дизайну, зберігати логіку
навігації та забезпечує зрозуміле представлення інформації незалежно від мови.
98
ЧДТУ 252152.005ПЗ
Рисунок 3.16 – Реалізація двомовності ресурсу («Головна сторінка»)
Інтерфейс web-сторінки кафедри ПЗАС реалізовано з урахуванням
принципів зручності, логічної структури та візуальної узгодженості.
Уніфікований стиль, система карток, фірмова кольорова гама, коректні шрифти та
реалізація двомовності забезпечили інтуїтивну взаємодію користувача з ресурсом
та позитивне враження від навігації. Такий підхід підвищує ефективність
сприйняття інформації та підтримує імідж кафедри як сучасної освітньої одиниці.
3.1.6 Опис розробки програмних компонентів
Розробка програмних компонентів web-сторінки кафедри ПЗАС
виконувалася вручну із застосуванням HTML для створення структурної
розмітки, CSS – для стилізації інтерфейсу та JavaScript – для реалізації окремих
елементів динамічної взаємодії (наприклад, розгортання контенту, обробка
кнопок, пагінація). Усі компоненти інтегровано у CMS WordPress через редактор
Elementor. Такий підхід забезпечив візуальну цілісність усіх сторінок,
узгодженість структури та гнучке управління контентом з боку адміністратора.
Сторінка поділена на логічні модулі – окремі розділи, кожен з яких
99
ЧДТУ 252152.005ПЗ
реалізований як незалежний компонент з відповідною структурою,
функціональністю та стилем.
Нижче наведено опис кожного з них:
1 Компонент «Новини»:
призначення: відображення хронологічного списку новин, оголошень,
анонсів кафедри;
реалізація: структура побудована за допомогою HTML-блоку у форматі
карток. Для стилізації застосовано CSS (тінь, рамка, hover-ефекти), для пагінації
сторінки новин використовувався JavaScript, а також для переходу на повну
новину. Кожна новина містить заголовок, дату, зображення, опис і кнопку
повернення до списку новин.
2 Компонент «Про кафедру»:
призначення: представлення загальної інформації про історію кафедри,
склад викладачів, інформаційне забезпечення;
реалізація: кожен підрозділ реалізовано за допомогою HTML-розмітки у
форматі карток. Для стилізації застосовано CSS, а для кнопок – JavaScript.
Карточки викладачів мають структуру: фото – зліва, текст – справа.
3 Компонент «Вступнику»:
призначення: подання актуальної інформації щодо вступу на
спеціальність 121 для абітурієнтів;
реалізація: кожен підрозділ реалізовано за допомогою HTML-розмітки.
Для стилізації застосовано CSS. Дані подані у вигляді карток із заголовками,
описом, кнопками для переходу до документів у форматі PDF.
4 Компонент «Студенту»:
призначення: інформування здобувачів освіти про перелік наявних
дисциплін, розклад занять, графік консультацій, корисні посилання, стажування;
реалізація: кожен підрозділ реалізовано за допомогою HTML-розмітки.
Для стилізації застосовано CSS. Дані подані у вигляді карток із заголовками,
описом. Для графіку консультації викладачів була створена таблиця, також на
всіх сторінках присутні посилання та мультимедійні матеріали.
100
ЧДТУ 252152.005ПЗ
5 Компонент «Наукова діяльність»:
призначення: демонстрація тем досліджень, наукових проектів,
семінарів, інформація про аспірантуру, наукових шкіл, угоди про співпрацю;
реалізація: інформація подається через картки, кожен підрозділ містить в
собі мультимедійні матеріали, посилання, PDF-файли. Реалізовано за допомогою
HTML-розмітки. Для стилізації застосовано CSS. Також був використаний
JavaScript для випадаючих списків.
6 Компонент «Проекти»:
призначення: представлення реалізованих міжнародних, студентських і
наукових проектів кафедри;
реалізація: інформація, яка міститься в кожному підрозділі певного виду
проекту подається через картки, які мають заголовок, опис, мультимедійні
матеріали. Реалізовано це все за допомогою HTML-розмітки, для стилізації
застосовано CSS, а також був використаний JavaScript для випадаючих списків.
7 Компонент «Заходи»:
призначення: висвітлення подій кафедри, у вигляді загального списку,
який місить назву заходу, короткий опис і кнопку для переходу на детальну
інформацію;
реалізація: створено сторінки для кожного заходу у вигляді карток, які
мають заголовок, опис і мультимедійні матеріали. Фотографії реалізовано у
вигляді слайдерів (зміна вручну) , з точками-навігаторами, кнопками повернення
та перегляду PDF-звітів або файлів. Реалізовано це все за допомогою HTML-
розмітки, для стилізації застосовано CSS, а також був використаний JavaScript
галереї.
8 Компонент «Анкетування»:
призначення: надання доступу до актуальних анкет для різних груп
користувачів;
реалізація: інформація піднесена картками, які мають заголовок, опис та
кнопки з активним посиланням на анкети. Застосовано за допомогою HTML, CSS.
9 Компонент «Акредитація»:
101
ЧДТУ 252152.005ПЗ
призначення: розміщення акредитаційних матеріалів для здобувачів
освіти, експертів, роботодавців;
реалізація: оформлення реалізовано у вигляді картки на якій є список з
кнопками-посиланнями на документи.
Основні принципи взаємозв’язку між компонентами
Горизонтальне головне меню є базовим елементом навігації. Воно доступне
на всіх сторінках і дозволяє швидко переходити між ключовими розділами.
Випадаючі підрозділи для кожного розділу (крім, «Новини» та «Акредитація»).
Наприклад, у компонентів «Проекти» доступні підсторінки «Студентські
проекти», «Наукові проекти», «Міжнародні проекти». Для забезпечення зручної
взаємодії реалізовано контекстні кнопки двох типів: кнопки повернення («←
Повернутися до новин»), які дозволяють легко рухатися між рівнями структури,
та кнопки дій («Читати далі →», «Детальніше»), що ведуть до розгорнутого
перегляду контенту, зокрема це реалізована в компонентах «Новини», «Заходи»,
«Склад викладачів». Додаткова взаємодія з контентом реалізована через
пагінацію та динамічні елементи інтерфейсу. Зокрема, в компоненті «Новини»
через велику кількість новин була передбачена пагінація, яка дозволяє поетапно
завантажувати вміст без перевантаження сторінки. Також реалізовано кнопки
«Показати більше» / «Сховати», які динамічно розгортають або приховують
додатковий список елементів (наприклад, в компоненті «Наукова діяльність»), що
підвищує зручність користування та зберігає компактність інтерфейсу.
Програмні компоненти були реалізовані вручну засобами HTML, CSS і
JavaScript, що забезпечило повний контроль над структурою, дизайном та логікою
взаємодії інтерфейсу.
3.2 Тестування системи
Перевірка роботи web-сторінки кафедри ПЗАС виконувалося у середовищі
браузера вручну, після завершення розробки інтерфейсних компонентів. Мета
тестування – переконатися, що усі функціональні елементи працюють коректно, а
структура сторінки відповідає очікуваній логіці навігації. Оскільки ресурс
102
ЧДТУ 252152.005ПЗ
створювався у межах CMS WordPress, перевірка охопила лише реалізовані
сторінки, без залучення зовнішніх систем.
3.2.1 Модульне тестування
У рамках тестування було перевірено відображення сторінок, коректність
переходів між розділами, функціональність кнопок, навігацію, завантаження
контенту, роботу слайдерів, випадаючих списків та відкриття PDF-файлів. Усі
перевірки здійснювались у браузері вручну, відповідно до типових сценаріїв
взаємодії користувача з системою.
Застосування саме модульного тестування є доцільним, оскільки структура
web-сторінки чітко поділена на окремі функціональні розділи. Кожен з них
реалізує автономну частину інтерфейсу. Такий підхід дозволив зосередитися на
локальній перевірці кожного елементу інтерфейсу окремо.
Таблиця 3.1
Модульне тестування web-сторінок кафедри ПЗАС
Модуль Тестовий випадок Результат перевірки Статус
Перевірка переходів по Відкриваються відповідні
Пройдено
кожному розділу сторінки
Головне меню Перевірка роботи
Підрозділи відкриваються,
випадаючих Пройдено
елементи клікабельні
підрозділів
При натисканні на
Перевірка всіх
Головна посилання відкривається
посилань даної Пройдено
сторінка сторінка з потрібною
сторінки
інформацією
Сторінка завантажується,
Перевірка відкриття
відображається список Пройдено
розділу «Новини»
новин
Новини Перевірка кнопки
«Читати далі →» Перехід на сторінку
Пройдено
(протестоване для повної новини
кожної новини)
103
ЧДТУ 252152.005ПЗ
Продовження таблиці 3.1
Повернення з повної
сторінки новини до
списку новин при
Перехід на сторінку зі
натисканні кнопки « ← Пройдено
списком новин
Повернутися до
новин» (протестоване
для кожної новини)
Завантаження наступних
Тестування пагінації Пройдено
сторінок без помилок
Перемикання між
фотографіями на
Після натискання на
повній сторінці новини
перемикач, фотографії Пройдено
(протестоване для
змінюються
кожної сторінки, яка
має галерею)
Анімація при
наведенні курсору на При наведенні миші
блок новини новинний блок візуально Пройдено
(перевірено для всіх виділяється
блоків)
Перевірка коректного При натисканні на певний
завантаження підрозділ сторінка
Пройдено
підрозділу (перевірено завантажується без
для всіх підрозділів) помилок
При натисканні на
Перевірка всіх
посилання відкривається
посилань даного Пройдено
сторінка з певною
розділу
інформацією
Анімація при
Про кафедру
наведенні курсору на При наведенні миші
блок з викладачем новинний блок візуально Пройдено
(перевірено для всіх виділяється
блоків)
При натисканні на кнопку
Перевірка кнопки
відкривається окрема
«Більше про викладача
сторінка з детальною Пройдено
→» (протестоване для
інформацією про
кожного викладача)
викладача
104
ЧДТУ 252152.005ПЗ
Продовження таблиці 3.1
Повернення з
персональної сторінки
викладача до списку
викладачів при Перехід на сторінку з
натисканні кнопки « ← повним списком Пройдено
Повернутися до списку викладачів
викладачів»
(протестоване для
кожної сторінки)
Перевірка кнопки
При натисканні
«Переглянути PDF
відкривається нова
файл» (протестована Пройдено
вкладка на якій
для кожної сторінки,
завантажується PDF файл
яка має таку кнопку)
Перевірка коректного При натисканні на певний
завантаження підрозділ сторінка
Пройдено
підрозділу (перевірено завантажується без
для всіх підрозділів) помилок
При натисканні на
Перевірка всіх
посилання відкривається
посилань даного Пройдено
сторінка з певною
Вступнику розділу
інформацією
Перевірка кнопки
При натисканні
«Переглянути PDF
відкривається нова
документ»
вкладка на якій Пройдено
(протестована для
завантажується PDF
кожної сторінки, яка
документ
має таку кнопку)
Перевірка коректного При натисканні на певний
завантаження підрозділ сторінка
Пройдено
підрозділу (перевірено завантажується без
для всіх підрозділів) помилок
Студенту
При натисканні на
Перевірка всіх
посилання відкривається
посилань даного Пройдено
сторінка з певною
розділу
інформацією
105
ЧДТУ 252152.005ПЗ
Продовження таблиці 3.1
Перевірка кнопки
«Переглянути PDF При натисканні
файл» або кнопка з відкривається нова
посиланням вкладка на якій Пройдено
(протестована для завантажується PDF файл
кожної сторінки, яка або посилання
має таку кнопку)
Перемикання між
Після натискання на
фотографіями на
перемикач, фотографії Пройдено
сторінці про
змінюються
стажування
Відображення таблиць
з дисциплінами та Таблиці відображаються
Пройдено
графіком консультацій коректно
викладачів
Перевірка коректного При натисканні на певний
завантаження підрозділ сторінка
Пройдено
підрозділу (перевірено завантажується без
Наукова для всіх підрозділів) помилок
діяльність При натисканні на
Перевірка всіх
посилання відкривається
посилань даного Пройдено
сторінка з певною
розділу
інформацією
Перевірка кнопки
«Переглянути файл» При натисканні
або кнопка з відкривається нова
посиланням вкладка на якій Пройдено
(протестована для завантажується файл або
кожної сторінки, яка посилання
має таку кнопку)
Відображення таблиці Таблиця відображаються
Пройдено
угодами співпраці коректно
Перевірка кнопки
При натисканні на кнопку
«Показати більше» /
«Показати більше» /
«Сховати»
«Сховати» додатковий Пройдено
(протестоване на
вміст розгортається та
кожній сторінці, яка
ховається
має таку кнопку)
Перевірка коректного При натисканні на певний
Проекти завантаження підрозділ сторінка Пройдено
підрозділу (перевірено завантажується без
106
ЧДТУ 252152.005ПЗ
для всіх підрозділів) помилок
Продовження таблиці 3.1
При натисканні на
Перевірка всіх
посилання відкривається
посилань даного Пройдено
сторінка з певною
розділу
інформацією
Перевірка кнопки
«Переглянути файл» При натисканні
або кнопка з відкривається нова
посиланням вкладка на якій Пройдено
(протестована для завантажується файл або
кожної сторінки, яка посилання
має таку кнопку)
Фотогалерея працює,
Перевірка роботи
кнопки перемикання Пройдено
слайдера у фотогалереї
функціонують
Перевірка кнопки
При натисканні на кнопку
«Показати більше» /
«Показати більше» /
«Сховати»
«Сховати» додатковий Пройдено
(протестоване на
вміст розгортається та
кожній сторінці, яка
ховається
має таку кнопку)
Сторінка завантажується,
Перевірка відкриття
відображається список Пройдено
розділу «Заходи»
заходів
Заходи Перевірка кнопки
«Детальніше Перехід на сторінку
Пройдено
(протестоване для конкретного заходу
кожного заходу)
Повернення з сторінки
заходу до списку
заходів при натисканні
Перехід на сторінку зі
кнопки « ← Пройдено
списком заходів
Повернутися до
заходів» (протестоване
для кожного заходу)
Перемикання між
фотографіями на
Після натискання на
конкретній сторінці
перемикач, фотографії Пройдено
заходу (протестоване
змінюються
для кожної сторінки,
яка має галерею)
107
ЧДТУ 252152.005ПЗ
Продовження таблиці 3.1
Анімація при
наведенні курсору на При наведенні миші
карточку заходу карточка візуально Пройдено
(перевірено для всіх виділяється
карточок)
Перевірка коректного При натисканні на певний
завантаження підрозділ сторінка
Пройдено
підрозділу (перевірено завантажується без
для всіх підрозділів) помилок
Анкетування Перевірка роботи
кнопки вибору анкети
Кожна кнопка відкриває
(протестована для Пройдено
відповідну анкету
кожної сторінки, яка
має таку кнопку)
Сторінка завантажується,
Перевірка відкриття
відображається список Пройдено
розділу «Акредитація»
Акредитація новин
Відкриття документа Послання ведуть на
Пройдено
за посиланням відповідні PDF-документи
Результати модульного тестування підтвердили стабільну роботу всіх
перевірених елементів. Усі функції web-сторінки – навігація, переходи, відкриття
контенту, анімація елементів – виконуються коректно згідно з очікуваннями.
Виявлених помилок під час перевірки не зафіксовано.
3.2.2 Інтеграційне тестування
Цей тип тестування не проводився, оскільки всі розроблені розділи є
частиною вже діючого сайту кафедри, що функціонує на базі WordPress. Усі
зв’язки між сторінками налаштовано в межах CMS, тому окреме тестування
інтеграційних взаємодій не вимагалось.
3.2.3 Системне тестування
Окремо системне тестування не здійснювалося, адже розроблені сторінки не
становлять окрему програмну систему, а вбудовані у загальну структуру ресурсу.
108
ЧДТУ 252152.005ПЗ
Під час модульного тестування було підтверджено, що вбудовані сторінки не
порушують функціональність решти сайту.
3.2.4 Приймальне тестування
Приймальне тестування в межах даного проекту не виконувалось, оскільки
web-сторінка кафедри ПЗАС створювалася як частина навчальної розробки без
залучання зовнішнього замовника. Перевірка відповідності реалізованих функцій
технічному завданню здійснювалася на етапі модульного тестування та регулярно
погоджувалася з науковим керівником, що забезпечувало контроль за якістю
реалізації.
Отже, результати тестування підтвердили стабільність роботи реалізованих
сторінок web-ресурсу кафедри ПЗАС. Усі функції перевірено в реальних умовах
взаємодії користувача з інтерфейсом, виявлених збоїв не зафіксовано, що свідчить
про відповідність реалізації поставленим вимогам.
3.3 Приклади впровадженого програмного комплексу
У цьому підрозділі наведено послідовні приклади використання
реалізованих функціональних розділів web-сторінки кафедри ПЗАС. Кожен
сценарій демонструє, як користувач взаємодіє з інтерфейсом: від відкриття
конкретного розділу до перегляду вмісту, переходу між сторінками та
повернення. Такий підхід дозволяє наочно показати практичну реалізацію
навігації, логіку переходів та функціональність окремих компонентів. Описані дії
охоплюють ключові можливості web-сторінки та формують цілісне уявлення про
її структуру та зручність використання.
Нижче наведені кроки взаємодії користувача з основними розділами
реалізованої web-сторінки кафедри ПЗАС.
1 Відкриття головної web-сторінки
Користувач відкриває головну сторінку сайту кафедри ПЗАС у web-
браузері. У верхній частині сторінки розміщено горизонтальне меню з основними
розділами. При наведенні на розділи відображаються підрозділи. На сторінці
також доступний перемикач мов. Головна сторінка містить основну інформацію
109
ЧДТУ 252152.005ПЗ
про кафедру (рисунок 3.17, рисунок 3.18 (ч.1 та ч.2)).
2 Відкриття розділу «Новини»
Із головного меню користувач переходить у розділ «Новини». Вміст
представлено у вигляді карток, кожна з яких містить заголовок, короткий опис,
дату і кнопку переході до повної новини (рисунок 3.19).
3 Перегляд повної новини
Після вибору новини користувач натискає на кнопку «Читати далі»,
відкривається окрема сторінка з повним текстом публікації, фотографіями та при
потребі – додатковими файлами (рисунок 3.20, рисунок 3.21).
4 Повернення до списку новин
У нижній частині сторінки повної новини користувач натискає кнопку
«Повернутися до новин» і переходить назад до загального списку публікацій
(рисунок 3.22).
5 Перегляд вмісту розділу «Про кафедру»
Користувач наводить курсор на розділ головного меню «Про кафедру»,
після чого відкривається випадаючий список із підрозділами. У цьому списку
користувач бачить такі пункти: «Історія кафедри», «Склад викладачів»,
«Забезпечення» (яке містить дві сторінки: інформаційне забезпечення та
аудиторно-лабораторний фонд кафедри) та «Філя кафедри у ІПММС НАН
України». Користувач обирає потрібний підрозділ і переходить до відповідної
сторінки для ознайомлення з її вмістом (рисунок 3.23).
6 Відкриття підрозділу «Склад кафедри»
Користувач наводить курсор на розділ головного меню «Про кафедру» та у
випадаючому списку обрає підрозділ «Склад кафедри». Після натискання на
відповідний пункт відкривається сторінка з інформацією про викладачів кафедри.
Вміст подано у вигляді карток, кожна з яких містить фото викладача, ПІБ,
науковий ступіть, посаду, пошту та окрему кнопку для перегляду розгорнутої
інформації (рисунок 3.24 (ч.1 та ч.2)).
7 Перегляд додаткової інформації про викладача
На сторінці складу кафедри користувач натискає кнопку «Більше про
110
ЧДТУ 252152.005ПЗ
викладача», розгортається повна інформація про наукову діяльність викладача,
теми досліджень, публікації тощо (рисунок 3.25, рисунок 3.26).
8 Повернення до сторінки викладачів
У нижній частині сторінки про викладача користувач натискає кнопку
«Повернутися до сторінки викладачів» і переходить назад до загального списку
викладачів (рисунок 3.27).
9 Відкриття розділу «Вступнику»
Користувач наводить курсор на розділ головного меню «Вступнику», у
результаті чого з’являється випадаючий список із підрозділами: «Вступ 2025»,
«Випускникам шкіл», «Молодшим спеціалістам», «Вступ до магістратури»,
«Вступ до аспірантури». Після натискання на основний розділ «Вступнику»
відкривається загальна сторінка цього розділу. Користувач має змогу переглянути
інформацію по вступу за посиланнями (рисунок 3.28, рисунок 3.29).
10 Відкриття підрозділу «Вступ до аспірантури»
Користувач наводить курсор на розділ головного меню «Вступнику» та у
випадаючому списку обрає підрозділ «Вступ до аспірантури». Відкривається
сторінка з детальним описом умов вступу, переліком тем для іспиту, критеріями
оцінювання та посиланням на PDF-документ (рисунок 3.30).
11 Перегляд вмісту розділу «Студенту»
Користувач наводить курсор на розділ головного меню «Студенту», після
чого відкривається випадаючий список із підрозділами. У цьому списку
користувач бачить такі пункти: «Дисципліни» (яка містить три сторінки: основні,
вибіркові та syllabus), «Графік консультацій викладачів», «Розклад аудиторних
занять», «Корисні посилання» та «Стажування». Користувач обирає потрібний
підрозділ і переходить до відповідної сторінки для ознайомлення з її вмістом
(рисунок 3.31).
12 Відкриття підрозділу «Syllabus»
Користувач наводить курсор на розділ головного меню «Студенту» та у
випадаючому списку обрає підрозділ «Дисципліни», а в ньому вже пункт
«Syllabus». Відкривається сторінка з переліком навчальних силабусів дисциплін
111
ЧДТУ 252152.005ПЗ
кафедри ПЗАС у вигляді карток, кожна з яких містить посилання на двомовний
PDF-файл із повною інформацією про курс (рисунок 3.32).
13 Відкриття розділу «Наукова діяльність»
Користувач наводить курсор на розділ головного меню «Наукова
діяльність», у результаті чого з’являється випадаючий список із підрозділами:
«Аспіранту» (який містить п’ять сторінок: освітня наукова програма та
навчальний план, асистентська практика, аспіранти кафедри, навчальні
дисципліни, відгуки та рецензії), «Науковий семінар кафедри ПЗАС», «Наукові
школи», «Співпраця з академічною спільнотою та роботодавцями», «Наукові
проекти» та «Черкаське регіональне відділення семінару ІПММС НАН України».
Після натискання на основний розділ «Наукова діяльність» відкривається
загальна сторінка цього розділу. Користувач має змогу переглянути інформацію
про основні напрями досліджень, їхні результати, пріоритети кафедри у сфері
науки (рисунок 3.33, рисунок 3.34).
14 Перегляд вмісту розділу «Проекти»
Користувач наводить курсор на розділ головного меню «Проекти»,
відкривається перелік підрозділів: «Студентські проекти», «Наукові проекти»,
«Міжнародні проекти». Користувач обирає потрібний підрозділ і переходить до
відповідної сторінки для ознайомлення з її вмістом (рисунок 3.35).
15 Відкриття підрозділу «Студентські проекти»
Із випадаючого списку розділу «Проекти» користувач обрає підрозділ
«Студентські проекти». Відкривається сторінка з інформацією про ініціативи
студентів, приклади реалізованих розробок, фото, презентації та опис їхнього
змісту. Кожен проект подано у форматі окремої картки (рисунок 3.36).
16 Відкриття розділу «Заходи»
Користувач переходить до розділу «Заходи» через головне меню.
Відкривається список заходів, які відбулись на кафедрі, у вигляді нумерованих
карток. Кожна картка містить назву події, дату та кнопку «Детальніше» для
переходу на повну сторінку заходу (рисунок 3.37).
17 Перегляд повної сторінки заходу
112
ЧДТУ 252152.005ПЗ
Після вибору заходу користувач натискає на кнопку «Детальніше»,
відкривається окрема сторінка з повним текстом публікації, фотографіями та при
потребі – додатковими файлами (рисунок 3.38, рисунок 3.39 (ч.1 та ч.2)).
18 Повернення до списку заходів
У нижній частині сторінки детальної інформації про захід користувач
натискає кнопку «Повернутися до заходів» і переходить назад до загального
списку заходів (рисунок 3.40).
19 Перегляд вмісту розділу «Анкетування»
Користувач наводить курсор миші на розділ «Анкетування», де у
випадаючому меню відображається два підрозділи: «Анкетування студентів та
аспірантів» та «Анкетування роботодавців та стейкхолдерів». Користувач обирає
потрібний підрозділ і переходить до відповідної сторінки для ознайомлення з її
вмістом (рисунок 3.41).
20 Відкриття підрозділу «Анкетування студентів та аспірантів»
Користувач наводить курсор на розділ головного меню «Анкетування» та у
випадаючому списку обрає підрозділ «Анкетування студентів та аспірантів».
Відкривається сторінка з поясненням умов заповнення, конфіденційності та
кнопками переходу до відповідних форм-анкет (рисунок 3.42).
21 Відкриття розділу «Акредитація»
Користувач натискає на розділ «Акредитація» в головному меню.
Відкривається сторінка, яка містить перелік документів щодо акредитації освітніх
програм, у вигляді посилань на PDF-файли (рисунок 3.43).
22 Перемикання мови інтерфейсу
У правому верхньому куті сторінки користувач натискає на прапорець, щоб
обрати мовну версію сторінок (українську або англійську). Відповідна мовна
версія сторінки завантажується автоматично, зберігаючи структуру та стилістику
сторінок (рисунок 3.44, рисунок 3.45).
Наведені приклади демонструють повноцінне функціонування реалізованої
web-сторінки кафедри ПЗАС, підтверджуючи відповідність структури, навігації та
подачі інформації поставленим вимогам. Кожен функціональних розділ
113
ЧДТУ 252152.005ПЗ
забезпечує користувачу інтуїтивний доступ до актуального вмісту, а взаємодія з
елементами інтерфейсу є послідовною, логічною та зручною.
Рисунок 3.17 – Головне меню та мовний перемикач на web-сторінці кафедри
ПЗАС
Рисунок 3.18 – Основний вміст головної web-сторінки кафедри ПЗАС (ч.1)
114
ЧДТУ 252152.005ПЗ
Рисунок 3.18 – Основний вміст головної web-сторінки кафедри ПЗАС (ч.2)
115
ЧДТУ 252152.005ПЗ
Рисунок 3.19 – Відображення списку новин на сторінці розділу «Новини»
Рисунок 3.20 – Відкриття сторінки з повною інформацією новини
116
ЧДТУ 252152.005ПЗ
Рисунок 3.21 – Повна сторінка новини після натискання «Читати далі»
Рисунок 3.22 – Кнопка повернення до списку новин на сторінці повної публікації
117
ЧДТУ 252152.005ПЗ
Рисунок 3.23 – Випадаючий список підрозділів розділу «Про кафедру» в
головному меню
Рисунок 3.24 – Сторінка підрозділу «Склад кафедри» інформацією про викладачів
(ч.1)
118
ЧДТУ 252152.005ПЗ
Рисунок 3.24 – Сторінка підрозділу «Склад кафедри» інформацією про викладачів
(ч.2)
Рисунок 3.25 – Натискання кнопки для перегляду детальної інформації про
викладача
119
ЧДТУ 252152.005ПЗ
Рисунок 3.26 – Перегляд розширеної інформації про викладача
Рисунок 3.27 – Кнопка повернення до сторінки зі списком викладачів
120
ЧДТУ 252152.005ПЗ
Рисунок 3.28 – Відображення підрозділів розділу «Вступнику» у головному
навігаційному меню
Рисунок 3.29 – Головна сторінка розділу «Вступнику» з інформаційними
посиланнями
121
ЧДТУ 252152.005ПЗ
Рисунок 3.30 – Сторінка підрозділу «Вступ до аспірантури» з описом умов
прийому та переходом до PDF-документа
Рисунок 3.31 – Випадаюче меню підрозділів розділу «Студенту»
122
ЧДТУ 252152.005ПЗ
Рисунок 3.32 – Сторінка підрозділу «Syllabus» з переліком навчальних дисциплін
Рисунок 3.33– Випадаюче меню розділу «Наукова діяльність»
123
ЧДТУ 252152.005ПЗ
Рисунок 3.34 – Загальна сторінка розділу «Наукова діяльність»
124
ЧДТУ 252152.005ПЗ
Рисунок 3.35 – Випадаюче меню розділу «Проекти» з переліком підрозділів
Рисунок 3.36 – Відображення сторінки підрозділу «Студентські проекти»
125
ЧДТУ 252152.005ПЗ
Рисунок 3.37 – Загальний вигляд сторінки «Заходи»
Рисунок 3.38 – Відкриття сторінки з повною інформацією про захід
Рисунок 3.39 – Сторінка з детальним описом заходу (ч.1)
126
ЧДТУ 252152.005ПЗ
Рисунок 3.39 – Сторінка з детальним описом заходу (ч.2)
Рисунок 3.40 – Кнопка повернення до списку заходів
Рисунок 3.41 – Випадаюче меню розділу «Анкетування» з підрозділами
127
ЧДТУ 252152.005ПЗ
Рисунок 3.42 – Сторінка підрозділу «Анкетування роботодавців та стейкхолдерів»
Рисунок 3.43 – Сторінка розділу «Акредитація» з переліком документів
128
ЧДТУ 252152.005ПЗ
Рисунок 3.44 – Перемикач мовної версії web-сторінки (українська/англійська)
Рисунок 3.45 – Головна сторінка англомовної версії web-ресурсу кафедри ПЗАС
129
ЧДТУ 252152.005ПЗ
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ
У третьому розділі було послідовно розглянуто всі етапи розробки та
тестування програмного забезпечення web-сторінки кафедри ПЗАС. На основі
попереднього визначених вимог було обґрунтовано вибір технологічних засобів:
CMS WordPress як базової платформи, Elementor для побудови інтерфейсу,
HTML, CSS і JavaScript для ручної реалізації структурних і динамічних
компонентів, а також плагіна Polylang для забезпечення повноцінної двомовності
ресурсу. Описані інструменти дозволили досягти як гнучкості в побудові
інтерфейсу, так і відповідності технічним і візуальним вимогам.
Уся реалізована інформаційна частина ресурсу зберігається у базі даних,
вбудованій у CMS WordPress, яка забезпечує збереження, оновлення та динамічне
завантаження контенту. Це дозволяє адміністратору безпосередньо керувати
вмістом через панель керування без потреби змінювати код вручну. Усі зміни
вмісту відбуваються через адміністративну панель із автоматичним оновленням
записів у БД, що гарантує цілісність і оперативність даних.
Результати тестування засвідчили стабільну роботу всіх реалізованих
модулів. Під час модульної перевірки було підтверджено коректність роботи
навігації, переходів між сторінками, кнопок, слайдерів, випадаючих списків і
відкриття додаткових матеріалів. Сценарії практичного використання, наведені у
прикладах реалізації, продемонстрували повну функціональність кожного
компонента web-сторінки на прикладі взаємодії користувача.
Таким чином, розроблене програмне забезпечення web-сторінки кафедри
ПЗАС ЧДТУ повністю відповідає визначеним вимогам: забезпечує структуровану
подачу інформації, інтуїтивну взаємодію, підтримку двох мов та стабільне
функціонування. Отримані результати свідчать про доцільність обраних
технічних рішень та ефективність реалізованої архітектури.
130
ЧДТУ 252152.005ПЗ
ВИСНОВКИ
У результаті виконання кваліфікаційної роботи було розв’язано задачу
оновлення та функціонального вдосконалення web-сторінки кафедри ПЗАС ЧДТУ
на основі сучасних технологій web-розробки. На момент початку реалізації
проекту web-сторінка кафедри мала обмежену функціональність, застарілий
дизайн, нечітку структуру та відсутність англомовної версії, що ускладнювало
використання ресурсу як інформаційної платформи кафедри. Актуальність роботи
зумовлена необхідністю підвищення доступності, зручності та інформативності
освітнього ресурсу навчального підрозділу.
Для вирішення поставленої задачі було виконане повне моделювання
системи: побудовано модель предметної області, визначено функціональні та
нефункціональні вимоги, сформовано UML-діаграми класів, прецедентів,
компонентів, пакетів, поведінки, а також діаграму розгортання. Такий підхід
дозволив структуровано визначити архітектуру оновленої web-сторінки та
забезпечити її логічну побудову.
Розробка програмного забезпечення відбувалася у межах уже наявного
ресурсу, реалізованого на платформі CMS WordPress із використанням вбудованої
БД. Збереження та обробка контенту реалізуються через автоматизовані
механізми WordPress, що забезпечують стабільне зчитування, оновлення та
відображення даних. Удосконалення виконано без зміни платформи, що
дозволило зберегти безперервність функціонування ресурсу. Було створено набір
оновлених сторінок, реалізованих вручну з використанням HTML, CSS, JavaScript
та засобами візуального конструктора Elementor. Реалізація багатомовності через
Polylang значно розширила доступність ресурсу для ширшої аудиторії.
Проведене тестування web-системи підтвердило працездатність усіх
функціональних компонентів. Під час модульного тестування перевірено
навігацію, коректність переходів між сторінками, роботу інтерактивних
елементів, відображення мультимедійного контенту та таблиць, відкриття PDF-
131
ЧДТУ 252152.005ПЗ
файлів. Реалізовані сценарії використання демонструють стабільну роботу
ресурсу на стороні користувачів.
Результати дипломної роботи мають наукову обґрунтованість і практичну
цінність. Завдяки запропонованій структурі, систематизації контенту, підтримці
багатомовності та інтеграції в уже діючий web-ресурс ЧДТУ було реалізовано
повноцінний, сучасний і функціональний інформаційних ресурс.
Таким чином, було реалізовано повноцінний web-ресурс, що поєднує
структуровану архітектуру, функціональність, зручність взаємодії та стабільність
роботи. Розроблена система відповідає актуальним вимогам до освітніх
інформаційних платформ, інтегрована в наявне середовище CMS WordPress і
забезпечує ефективне представлення діяльності кафедри.
132
ЧДТУ 252152.005ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 Mozilla Developer Network. HTML: HyperText Markup Language
[Електронний ресурс]. – Режим доступу: https://developer.mozilla.org/en-
US/docs/Web/ HTML.
2 UMITY – методичний портал. CSS: каскадні таблиці стилів [Електронний
ресурс]. – Режим доступу: https://umity.in.ua/concept/?id=1401.
3 WPZOOM. Wordpress Statistics and Facts [Електронний ресурс]. – Режим
доступу: https://www.wpzoom.com/blog/wordpress-statistics/.
4 WordPress.org. About WordPress [Електронний ресурс]. – Режим доступу:
https://wordpress.org/about/.
5 Mozilla Developer Network. JavaScript Guide [Електронний ресурс]. – Режим
доступу: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide.
6 Apache Software Foundation. About the Apache HTTP Server Project
[Електронний ресурс]. – Режим доступу: https://httpd.apache.org/
ABOUT_APACHE.html.
7 Intechnic. How to Do SWOT Analysis for Your Wedsite [Електронний ресурс].
– Режим доступу: https://www.intechnic.com/blog/how-to-perform-a-swot-
analysis-for-your-website/.
8 Userpilot. How to Perform User Needs Analysis for SaaS [Електронний
ресурс]. – Режим доступу: : https://userpilot.com/blog/user-needs-analysis/.
9 BestWebSoft. Logical Structure of Website: Essential Guide for Developers
[Електронний ресурс]. – Режим доступу: https://bestwebsoft.com/blog/logical-
structure-of-website.
10 GeeksforGeeks. Domain Modeling in Object-Oriented Analysis and Design
(OOAD) [Електронний ресурс]. – Режим доступу: https://
www.geeksforgeeks.org/domain-modeling-in-object-oriented-analysis-and-
designooad/.
11 Lucidchart Domain Object Modeling [Електронний ресурс]. – Режим доступу:
https://www.lucidchart.com/pages/templates/domain-object-modeling.
133
ЧДТУ 252152.005ПЗ
12 Методичні рекомендації до підготовки кваліфікаційної роботи бакалавра
для здобувачів вищої освіти зі спеціальності 121 «Інженерія програмного
забезпечення» усіх форм навчання [Текст] /Укл.: Голуб С.В., Заспа Г.О.,
Куницька С.Ю., Півень О.Б. Катаєва Є.Ю., Салапатов В.І., Метелап В.В.,
Олексюк В.В.; М-во освіти і науки України, Черкаський державний
технологічний університет. - Черкаси : ЧДТУ, 2023. - 96 с.
13 AltexSoft. Functional and Non-Functional Requirenments Specification
[Електронний ресурс]. – Режим доступу: https://www.altexsoft.com/blog/
functional-and-non-functional-requirements-specification-and-types/.
14 TechTarget. What is a Software Requirenments Specification (SRS)?
[Електронний ресурс]. – Режим доступу: https://www.techtarget.com/
searchsoftwarequality/definition/software-requirements-specification.
15 GeeksforGeeks. Functional vs. Non-Functional Requirements [Електронний
ресурс]. – Режим доступу: https://www.geeksforgeeks.org/functional-vs-non-
functional-requirements/.
16 Rikkeisoft. Complete Guide to Software Development Requirements
[Електронний ресурс]. – Режим доступу: https://rikkeisoft.com/blog/software-
development-requirements/.
17 Lucidchart. UML Use Case Diagram Tutorial [Елеткронний ресурс]. – Режим
доступу: https://www.lucidchart.com/pages/uml-use-case-diagram.
18 Visual Paradigm. Use Case Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://online.visual-paradigm.com/diagrams/tutorials/use-case-diagram
-tutorial/.
19 Visual Paradigm. UML Class Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/uml-class-diagram-tutorial/.
20 Lucidchart. UML Class Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://www.lucidchart.com//l-class-diagram.
134
ЧДТУ 252152.005ПЗ
21 Visual Paradigm. What is a Package Diagram in UML? [Електронний ресурс]. –
Режим доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-package-diagram/.
22 Lucidchart. Package Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://www.lucidchart.com/pages/uml-package-diagram.
23 Visual Paradigm. Component Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://online.visual-paradigm.com/diagrams/tutorials/component-
diagram-tutorial/.
24 Lucidchart. UML Component Diagram Tutorial [Електронний ресурс]. –
Режим доступу: https://www.lucidchart.com/pages/uml-component-diagram.
25 Visual Paradigm. Deployment Diagram Tutorial [Електронний ресурс]. –
Режим доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-deployment-diagram/.
26 Lucidchart. UML Deployment Diagram Tutorial [Електронний ресурс]. –
Режим доступу: https://www.lucidchart.com/pages/uml-deployment-diagram.
27 Visual Paradigm. Activity Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-activity-diagram/.
28 Lucidchart. UML Activity Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://www.lucidchart.com/pages/uml-activity-diagram.
29 Visual Paradigm. Sequence Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-sequence-diagram/.
30 Lucidchart. UML Activity Diagram Tutorial [Електронний ресурс]. – Режим
доступу: https://www.lucidchart.com/pages/uml-sequence-diagram.
31 Visual Paradigm. What is Communication Diagram? [Електронний ресурс]. –
Режим доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-communication-diagram/.
135
ЧДТУ 252152.005ПЗ
32 GeeksforGeeks. Communication Diagram – Unified Modeling Language (UML)
[Електронний ресурс]. – Режим доступу: https://www.geeksforgeeks.org/
communication-diagram-unified-modeling-languageuml/.
33 Visual Paradigm. All You Need to Know about State Diagrams [Електронний
ресурс]. – Режим доступу: https://www.visual-paradigm.com/guide/uml-
unified-modeling-language/about-state-diagrams/.
34 GeeksforGeeks. State Machine Diagrams – Unified Modeling Language (UML)
[Електронний ресурс]. – Режим доступу: https://www.geeksforgeeks.org/
unified-modeling-language-uml-state-diagrams/.
35 WordPress. Features – Content Management System (CMS) [Електронний
ресурс]. – Режим доступу: https://wordpress.org/about/features/.
36 WPZOOM. What is Elementor and How It Works [Електронний ресурс]. –
Режим доступу: https://www.wpzoom.com/blog/what-is-elementor/.
37 WP Engine. JavaScript With WordPress: How To Use It [Електронний ресурс].
– Режим доступу: https://wpengine.com/resources/wordpress-javascript/.
38 Boardmix. Understanding Functional Architecture Diagrams [Електронний
ресурс]. – Режим доступу: https://boardmix.com/knowledge/functional-
architecture-diagram.
39 Науково-дослідницький сектор НУ «Львівська політехніка». Програма
Erasmus+ напрям КА2 – Розвиток потенціалу вищої освіти (CBHE)
[Електронний ресурс]. – Режим доступу:
https://lpnu.ua/cmo/erasmus/erasmus-ka2.
40 Харківський національний економічний університет ім. С. Кузнеця.
Програма Erasmus+ [Електронний ресурс]. – Режим доступу: http://
www.ec.kharkiv.edu/erasmus+.html.
41 Erasmus+ Project Results. Project: 574064-EPP-1-2016-1-LT-EPPKA2-CBHE-
SP [Електронний ресурс]. – Режим доступу: https://erasmus-
plus.ec.europa.eu/projects/search/details/574064-EPP-1-2016-1-LT-EPPKA2-
CBHE-SP.
136
ЧДТУ 252152.005ПЗ
42 Wikipedia. Montserrat (typeface) [Електронний ресурс]. – Режим доступу:
https://en.wikipedia.org/wiki/Montserrat_(typeface).
43 U.S. Web Design System. Typography: Font size guidance. – [Електронний
ресурс]. – Режим доступу: https://designsystem.digital.gov/design-tokens/
typesetting/font-size/.
137
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
_________________ Голуб С.В.
„____” ______________ 2025 р.
Програмне забезпечення WEB-сторінки кафедри ПЗАС
Специфікація
482. ЧДТУ 252152.001
Листів 2
Розробник ________________ С.С. Запісочна
Керівник ________________ В.В. Метелап
Черкаси 2025
Позначення Найменування Примітки
Документація
482.ЧДТУ. 252152 12 01 Текст програми
482.ЧДТУ. 252152 34 01 Інструкція користувачеві
482.ЧДТУ. 252152 90 01 Графічні матеріали
482. ЧДТУ 252152.001 2
139
ДОДАТОК Б
Програмне забезпечення WEB-сторінки кафедри ПЗАС
Текст програми
482.ЧДТУ. 252152 12 01
Листів 13
Розробник ________________ С.С. Запісочна
Черкаси 2025
2
Лістинг коду для розділу «Новини»
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Новини кафедри ПЗАС</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display
=swap" rel="stylesheet" />
<style>
body {
font-family: 'Montserrat', sans-serif;
}
.page-title {
display: none !important;
}
nav a,
.menu a,
.main-navigation a {
font-weight: 600 !important;
}
.news-block {
display: flex;
gap: 25px;
margin-bottom: 25px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 20px;
align-items: stretch;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.news-block:hover {
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
transform: translateY(-3px);
}
.news-date-box {
width: 130px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(28, 6, 106, 0.55);
}
.news-date-box .month {
background-color: #0D4C96;
color: #fff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
width: 100%;
padding: 8px 0;
text-align: center;
141
3
}
.news-date-box .day {
font-size: 34px;
font-weight: bold;
color: #333;
margin: 20px 0 6px;
line-height: 1;
}
.news-date-box .year {
font-size: 15px;
color: #777;
margin-bottom: 20px;
}
.news-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #000;
}
.news-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.news-description {
font-size: 16px;
margin-bottom: 20px;
}
.news-button {
color: #0D4C96;
font-weight: 600;
font-size: 14px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;
}
.news-button::after {
content: '→';
font-size: 16px;
transition: transform 0.2s ease;
}
.news-button:hover {
color: #1C066A;
}
.news-button:hover::after {
transform: translateX(3px);
}
#pagination {
display: flex;
justify-content: center;
gap: 10px;
142
4
margin: 40px 0;
}
#pagination button,
#pagination span {
font-family: 'Montserrat', sans-serif !important;
width: 40px;
height: 40px;
border: 1px solid #0D4C96;
background: white;
color: #0D4C96;
font-weight: 600;
font-size: 14px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s, color 0.3s;
}
#pagination button:not(.active):hover {
background-color: rgba(13, 76, 150, 0.06);
}
#pagination .active {
background-color: #0D4C96;
color: #fff;
font-weight: 700;
box-shadow: 0 0 0 2px #0D4C96 inset;
}
#pagination .dots {
border: none;
background: transparent;
color: #888;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: default;
}
</style>
</head>
<body>
<div id="news-container"></div>
<div id="pagination"></div>
<script>
const POSTS_PER_PAGE = 5;
const newsItems = [
{
date: '2025-06-16',
title: 'Сертифікат про акредитацію освітньої програми — третій рівень',
desc: 'Освітньо-наукову програму «Інженерія програмного забезпечення»
(спеціальність 121) акредитовано до 2030 року. Черкаський державний технологічний
університет отримав відповідний сертифікат.',
link: 'https://pzas.chdtu.edu.ua/sertyfikat-pro-akredytacziyu-osvitnoyi-
programy-tretij-riven-novyna/'
},
{
date: '2025-04-24',
title: 'День студентської науки на кафедрі ПЗАС',
143
5
desc: 'Студенти ПЗАС представили практичні розробки під час Дня
студентської науки, частину з яких уже впроваджено.',
link: 'https://pzas.chdtu.edu.ua/den-studentskoyi-nauky-na-kafedri-pzas/'
},
{
date: '2025-04-24',
title: 'Вітаємо Салапатова Володимира Івановича з Днем народження!',
desc: 'Щирі привітання з Днем народження Салапатовому Володимиру Івановичу
— з найкращими побажаннями здоров’я, наснаги та нових звершень.',
link: 'https://pzas.chdtu.edu.ua/vitayemo-salapatova-volodymyra-
ivanovycha-z-dnem-narodzhennya-novyna/'
},
{
date: '2025-04-17',
title: 'Презентація курсу в межах проекту NEXT Erasmus+',
desc: 'У межах проєкту NEXT Людмила Вовкочин презентувала курс про
психічне благополуччя в умовах діджиталізації, створений за стандартами
Erasmus+.',
link: 'https://pzas.chdtu.edu.ua/prezentacziya-kursu-v-mezhah-proektu-
next-erasmus-novyna/'
},
{
date: '2025-04-15',
title: 'Нарада координаторів проекту NEXT Erasmus+',
desc: 'Під час наради координаторів проєкту NEXT обговорено технічне
оснащення нової лабораторії на кафедрі ПЗАС та подальші етапи реалізації.',
link: 'https://pzas.chdtu.edu.ua/narada-koordynatoriv-proektu-next-
erasmus-novyna/'
},
. . .
];
const monthNames = ['Січень', 'Лютий', 'Березень', 'Квітень', 'Травень',
'Червень', 'Липень', 'Серпень', 'Вересень', 'Жовтень', 'Листопад', 'Грудень'];
let currentPage = 1;
const storedPage = parseInt(localStorage.getItem('pzasNewsPage'));
if (!isNaN(storedPage)) {
currentPage = storedPage;
}
const totalPages = Math.ceil(newsItems.length / POSTS_PER_PAGE);
function renderNews() {
const container = document.getElementById('news-container');
container.innerHTML = '';
const sorted = [...newsItems].sort((a, b) => new Date(b.date) - new
Date(a.date));
const start = (currentPage - 1) * POSTS_PER_PAGE;
const pageItems = sorted.slice(start, start + POSTS_PER_PAGE);
pageItems.forEach(item => {
const date = new Date(item.date);
const day = date.getDate();
const month = monthNames[date.getMonth()];
const year = date.getFullYear();
container.innerHTML += `
<div class="news-block">
<div class="news-date-box">
<div class="month">${month}</div>
<div class="day">${day}</div>
<div class="year">${year}</div>
</div>
144
6
<div class="news-content">
<div class="news-title">${item.title}</div>
<div class="news-description">${item.desc}</div>
<a href="#" class="news-button" onclick="event.preventDefault();
localStorage.setItem('pzasNewsPage', ${currentPage});
window.location.href='${item.link}';">Читати далі</a>
</div>
</div>
`;
});
localStorage.removeItem('pzasNewsPage');
}
function renderPagination() {
const pag = document.getElementById('pagination');
pag.innerHTML = '';
function addButton(label, page, active = false) {
const el = document.createElement(
label === '...' ? 'span' : 'button'
);
el.textContent = label;
if (label === '...') {
el.className = 'dots';
} else {
if (active) el.classList.add('active');
el.onclick = () => {
currentPage = page;
renderNews();
renderPagination();
window.scrollTo({ top: 0, behavior: 'smooth' });
};
}
pag.appendChild(el);
}
if (currentPage > 1) addButton('‹', currentPage - 1);
const delta = 1;
const range = [];
const rangeWithDots = [];
const left = currentPage - delta;
const right = currentPage + delta;
for (let i = 1; i <= totalPages; i++) {
if (i === 1 || i === totalPages || (i >= left && i <= right)) {
range.push(i);
}
}
let l;
for (let i of range) {
if (l) {
if (i - l === 2) {
rangeWithDots.push(l + 1);
} else if (i - l > 2) {
rangeWithDots.push('...');
}
}
rangeWithDots.push(i);
l = i;
}
145
7
for (let p of rangeWithDots) {
if (p === '...') {
addButton('...');
} else {
addButton(p, p, p === currentPage);
}
}
if (currentPage < totalPages) addButton('›', currentPage + 1);
}
renderNews();
renderPagination();
</script>
</body>
</html>
Лістинг коду для сторінки «Поїздка на Чернечу гору»
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Поїздка на Чернечу гору</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display
=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.news-container {
max-width: 1140px;
margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(28, 6, 106, 0.55);
color: #000;
}
.news-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 10px;
color: #000;
}
.news-date {
color: #999;
font-size: 14px;
margin-bottom: 20px;
}
.news-text {
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
text-align: justify;
}
146
8
.news-text b {
font-weight: 600;
}
.news-text ul {
margin-top: 10px;
padding-left: 1px;
}
.news-text ul li {
margin-bottom: 10px;
font-size: 16px;
}
.gallery {
position: relative;
max-width: 700px;
margin: 0 auto;
height: 480px;
}
.gallery img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
z-index: 0;
}
.gallery img.active {
opacity: 1;
z-index: 1;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #1C066A;
background: none;
border: none;
cursor: pointer;
z-index: 2;
padding: 0;
}
.arrow-left {
left: -30px;
}
.arrow-right {
right: -30px;
}
.dots-container {
display: flex;
justify-content: center;
margin-top: 15px;
147
9
gap: 8px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(28, 6, 106, 0.3);
cursor: pointer;
transition: background-color 0.3s;
}
.dot.active {
background-color: #1C066A;
}
.back-button {
display: inline-block;
padding: 6px 14px;
border: 1.5px solid #1C066A;
border-radius: 6px;
background-color: #fff;
color: #1C066A;
font-weight: 500;
font-size: 14px;
text-decoration: none;
}
.back-button:hover {
background-color: rgba(28, 6, 106, 0.06);
color: #1C066A;
font-weight: 600;
}
.page-title {
display: none !important;
}
</style>
</head>
<body>
<div class="news-container">
<div class="news-title">Поїздка на Чернечу гору</div>
<div class="news-date">10 листопада 2023</div>
<div class="news-text">
У п’ятницю, 10 листопада 2023 року, студенти та викладачі кафедри
програмного забезпечення автоматизованих систем здійснили поїздку до святині
України — <b>Чернечої гори</b>. Під час подорожі учасники:
<ul>
<li>піднялися на гору;</li>
<li>порахували всі сходинки;</li>
<li>вшанували пам’ять Тараса Шевченка;</li>
<li>поклали квіти до пам’ятника;</li>
<li>зробили фото мальовничих схилів Дніпра.</li>
</ul>
Делегацію щиро зустріли директор Шевченківського національного заповідника
<b>Валентина Михайлівна Коваленко</b>, вчений секретар <b>Людмила Анатоліївна
Сокур</b> та колектив заповідника. Проведено змістовну екскурсію по заповіднику та
музею.
<br><br>
Музей вразив своєю атмосферою, відображаючи минуле й сучасне, пов’язуючи
історичні події у спіраль часу.
<br><br>
148
10
Учасники заходу висловили щиру подяку профспілковому комітету ЧДТУ та
<b>Василю Володимировичу Загородньому</b> за фінансову підтримку. Особлива подяка
— директору заповідника та колективу за гостинність, екскурсію та збереження
історичної спадщини.
</div>
<div class="gallery">
<button class="arrow arrow-left" onclick="prevSlide()">❮</button>
<img id="img1" class="active" src="" alt="Фото 1">
<img id="img2" src="" alt="Фото 2">
<button class="arrow arrow-right" onclick="nextSlide()">❯</button>
</div>
<div class="dots-container" id="dots-container"></div>
<div style="text-align: left; margin-top: 40px;">
<a href="https://pzas.chdtu.edu.ua/zahody/" class="back-button">←
Повернутися до заходів</a>
</div>
</div>
<script>
const images = [
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page4_img2.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page3_img2.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page1_img1.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page1_img2.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page2_img2.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page3_img1.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page5_img1.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page10_img1.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page7_img1.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page9_img1.jpeg",
"https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/page11_img2.jpeg"
];
let current = 0;
let showingImg1 = true;
const img1 = document.getElementById("img1");
const img2 = document.getElementById("img2");
function showSlide(index) {
const newImg = images[index];
const activeImg = showingImg1 ? img1 : img2;
const inactiveImg = showingImg1 ? img2 : img1;
inactiveImg.src = newImg;
inactiveImg.classList.add("active");
activeImg.classList.remove("active");
showingImg1 = !showingImg1;
149
11
current = index;
updateDots();
}
function prevSlide() {
const index = (current - 1 + images.length) % images.length;
showSlide(index);
}
function nextSlide() {
const index = (current + 1) % images.length;
showSlide(index);
}
function createDots() {
const container = document.getElementById("dots-container");
container.innerHTML = "";
images.forEach((_, i) => {
const dot = document.createElement("div");
dot.classList.add("dot");
if (i === current) dot.classList.add("active");
dot.addEventListener("click", () => showSlide(i));
container.appendChild(dot);
});
}
function updateDots() {
document.querySelectorAll(".dot").forEach((dot, i) => {
dot.classList.toggle("active", i === current);
});
}
document.addEventListener("DOMContentLoaded", () => {
img1.src = images[current];
img1.classList.add("active");
createDots();
});
</script>
</body>
</html>
Лістінг коду для підрозділу «Склад кафедри»
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Студентські проекти</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display
=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
.project-title {
font-size: 22px;
font-weight: 700;
margin: 0px 0 10px;
color: #000;
}
nav a,
150
12
.menu a,
.main-navigation a {
font-weight: 600 !important;
}
.block {
display: flex;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
align-items: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* додано тінь */
}
.block img {
max-width: 300px;
height: auto;
border-radius: 8px;
margin-right: 20px;
}
.block-text {
max-width: 700px;
}
.block-text p {
margin: 10px 0;
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
.block-text strong {
font-weight: 700;
}
.highlight {
font-weight: 600;
}
.page-title {
display: none !important;
}
</style>
</head>
<body>
<div class="project-title">Логотип кафедри</div>
<div class="block">
<img src="https://pzas.chdtu.edu.ua/wp-content/uploads/sites/10/2024/06/logo-
pzas-1.jpg" alt="Логотип кафедри">
<div class="block-text">
<p><span class="highlight">Логотип кафедри</span> є символом нашої
спільноти, який відображає цінності, традиції та академічні досягнення. Він
об’єднує в собі традиції та інновації, символізуючи наше прагнення до знань і
наукових відкриттів.</p>
<p><strong>Розробку виконали студенти:</strong> Артем БАКАЛОВ та Богдан
ЄВИЧ</p>
<p><strong>Керівники:</strong> к.т.н., доценти кафедри ПЗАС Світлана
КУНИЦЬКА та Володимир МЕТЕЛАП</p>
</div>
151
13
</div>
<div class="project-title">Брошура кафедри</div>
<div class="block">
<img src="https://pzas.chdtu.edu.ua/wp-content/uploads/sites/10/2024/06/flyer-
pzas.jpg" alt="Брошура кафедри">
<div class="block-text">
<p><span class="highlight">Брошура кафедри</span> містить важливу інформацію
про наші програми. Вона є корисним ресурсом для студентів та викладачів, надаючи
повний огляд нашої діяльності та можливостей для професійного розвитку.</p>
<p><strong>Розробку виконали студенти:</strong> Артем БАКАЛОВ та Богдан
ЄВИЧ</p>
<p><strong>Керівники:</strong> к.т.н., доценти кафедри ПЗАС Світлана
КУНИЦЬКА та Володимир МЕТЕЛАП</p>
</div>
</div>
<div class="project-title">Проект «Поїздка в Канів»</div>
<div class="block">
<img src="https://pzas.chdtu.edu.ua/wp-content/uploads/sites/10/2024/06/trip-
to-kanev.jpg" alt="Поїздка в Канів">
<div class="block-text">
<p><span class="highlight">Проект спрямований</span> на організацію
культурно-освітньої експедиції для студентів і викладачів з метою поєднання
вивчення української історії з інформаційними технологіями. Учасники мали змогу
відвідати історико-культурні пам’ятки Канева, взяти участь у наукових семінарах та
інтерактивних заходах, розвинути навички командної роботи та міждисциплінарного
мислення. Цей проект сприяє розвитку міждисциплінарних зв’язків і командної
роботи.</p>
<p><strong>Розробку виконали студенти:</strong> Ярослав ФЕОФІЛОВ, Ростислав
МИХАЛЬ та Владислав АНІЩИК</p>
<p><strong>Керівники:</strong> к.т.н., доценти кафедри ПЗАС Світлана
КУНИЦЬКА та Володимир МЕТЕЛАП</p>
</div>
</div>
</body>
</html>
152
ДОДАТОК В
Програмне забезпечення WEB-сторінки кафедри ПЗАС
Інструкція користувачеві
482.ЧДТУ. 252152 34 01
Листів 6
Розробник ________________ С.С. Запісочна
Черкаси 2025
Дана інструкція призначена для полегшення взаємодії користувача з web-
сторінкою кафедри ПЗАС ЧДТУ. Вона допоможе швидко орієнтуватися на сайті,
знаходити потрібну інформацію, переходити між розділами, використовувати
функціональні можливості сторінки та перемикати мовні версії.
Web-сторінка створена для студентів, абітурієнтів, викладачів і всіх, хто
цікавиться діяльністю кафедри. Інструкція охоплює найпоширеніші сценарії
взаємодії, щоб кожен користувач міг швидко адаптуватися до функціональності
ресурсу та ефективно його використовувати.
1 Відкриття головної web-сторінки
Користувач відкриває головну сторінку сайту кафедри ПЗАС у web-браузері. У
верхній частині сторінки розміщено горизонтальне меню з основними розділами.
При наведенні на розділи відображаються підрозділи. На сторінці також
доступний перемикач мов. Головна сторінка містить основну інформацію про
482.ЧДТУ. 252152 34 01 2
кафедру.
2 Відкриття розділу «Новини»
Із головного меню користувач переходить у розділ «Новини». Вміст представлено
у вигляді карток, кожна з яких містить заголовок, короткий опис, дату і кнопку
переході до повної новини.
3 Перегляд повної новини
Після вибору новини користувач натискає на кнопку «Читати далі», відкривається
окрема сторінка з повним текстом публікації, фотографіями та при потребі –
додатковими файлами.
4 Повернення до списку новин
У нижній частині сторінки повної новини користувач натискає кнопку
«Повернутися до новин» і переходить назад до загального списку публікацій.
5 Перегляд вмісту розділу «Про кафедру»
Користувач наводить курсор на розділ головного меню «Про кафедру», після чого
відкривається випадаючий список із підрозділами. У цьому списку користувач
бачить такі пункти: «Історія кафедри», «Склад викладачів», «Забезпечення» (яке
містить дві сторінки: інформаційне забезпечення та аудиторно-лабораторний
фонд кафедри) та «Філя кафедри у ІПММС НАН України». Користувач обирає
потрібний підрозділ і переходить до відповідної сторінки для ознайомлення з її
вмістом.
6 Відкриття підрозділу «Склад кафедри»
Користувач наводить курсор на розділ головного меню «Про кафедру» та у
випадаючому списку обрає підрозділ «Склад кафедри». Після натискання на
відповідний пункт відкривається сторінка з інформацією про викладачів кафедри.
Вміст подано у вигляді карток, кожна з яких містить фото викладача, ПІБ,
науковий ступіть, посаду, пошту та окрему кнопку для перегляду розгорнутої
інформації.
7 Перегляд додаткової інформації про викладача
На сторінці складу кафедри користувач натискає кнопку «Більше про викладача»,
розгортається повна інформація про наукову діяльність викладача, теми
досліджень, публікації тощо.
8 Повернення до сторінки викладачів
У нижній частині сторінки про викладача користувач натискає кнопку
«Повернутися до сторінки викладачів» і переходить назад до загального списку
викладачів.
9 Відкриття розділу «Вступнику»
Користувач наводить курсор на розділ головного меню «Вступнику», у результаті
чого з’являється випадаючий список із підрозділами: «Вступ 2025»,
«Випускникам шкіл», «Молодшим спеціалістам», «Вступ до магістратури»,
154
482.ЧДТУ. 252152 34 01 3
«Вступ до аспірантури». Після натискання на основний розділ «Вступнику»
відкривається загальна сторінка цього розділу. Користувач має змогу переглянути
інформацію по вступу за посиланнями.
10 Відкриття підрозділу «Вступ до аспірантури»
Користувач наводить курсор на розділ головного меню «Вступнику» та у
випадаючому списку обрає підрозділ «Вступ до аспірантури». Відкривається
сторінка з детальним описом умов вступу, переліком тем для іспиту, критеріями
оцінювання та посиланням на PDF-документ.
11 Перегляд вмісту розділу «Студенту»
Користувач наводить курсор на розділ головного меню «Студенту», після чого
відкривається випадаючий список із підрозділами. У цьому списку користувач
бачить такі пункти: «Дисципліни» (яка містить три сторінки: основні, вибіркові та
syllabus), «Графік консультацій викладачів», «Розклад аудиторних занять»,
«Корисні посилання» та «Стажування». Користувач обирає потрібний підрозділ і
переходить до відповідної сторінки для ознайомлення з її вмістом.
12 Відкриття підрозділу «Syllabus»
Користувач наводить курсор на розділ головного меню «Студенту» та у
випадаючому списку обрає підрозділ «Дисципліни», а в ньому вже пункт
«Syllabus». Відкривається сторінка з переліком навчальних силабусів дисциплін
кафедри ПЗАС у вигляді карток, кожна з яких містить посилання на двомовний
PDF-файл із повною інформацією про курс.
13 Відкриття розділу «Наукова діяльність»
Користувач наводить курсор на розділ головного меню «Наукова діяльність», у
результаті чого з’являється випадаючий список із підрозділами: «Аспіранту»
(який містить п’ять сторінок: освітня наукова програма та навчальний план,
асистентська практика, аспіранти кафедри, навчальні дисципліни, відгуки та
рецензії), «Науковий семінар кафедри ПЗАС», «Наукові школи», «Співпраця з
академічною спільнотою та роботодавцями», «Наукові проекти» та «Черкаське
регіональне відділення семінару ІПММС НАН України». Після натискання на
основний розділ «Наукова діяльність» відкривається загальна сторінка цього
розділу. Користувач має змогу переглянути інформацію про основні напрями
досліджень, їхні результати, пріоритети кафедри у сфері науки.
14 Перегляд вмісту розділу «Проекти»
Користувач наводить курсор на розділ головного меню «Проекти», відкривається
перелік підрозділів: «Студентські проекти», «Наукові проекти», «Міжнародні
проекти». Користувач обирає потрібний підрозділ і переходить до відповідної
сторінки для ознайомлення з її вмістом.
15 Відкриття підрозділу «Студентські проекти»
Із випадаючого списку розділу «Проекти» користувач обрає підрозділ
«Студентські проекти». Відкривається сторінка з інформацією про ініціативи
студентів, приклади реалізованих розробок, фото, презентації та опис їхнього
155
482.ЧДТУ. 252152 34 01 4
змісту. Кожен проект подано у форматі окремої картки.
16 Відкриття розділу «Заходи»
Користувач переходить до розділу «Заходи» через головне меню. Відкривається
список заходів, які відбулись на кафедрі, у вигляді нумерованих карток. Кожна
картка містить назву події, дату та кнопку «Детальніше» для переходу на повну
сторінку заходу.
17 Перегляд повної сторінки заходу
Після вибору заходу користувач натискає на кнопку «Детальніше», відкривається
окрема сторінка з повним текстом публікації, фотографіями та при потребі –
додатковими файлами.
18 Повернення до списку заходів
У нижній частині сторінки детальної інформації про захід користувач натискає
кнопку «Повернутися до заходів» і переходить назад до загального списку
заходів.
19 Перегляд вмісту розділу «Анкетування»
Користувач наводить курсор миші на розділ «Анкетування», де у випадаючому
меню відображається два підрозділи: «Анкетування студентів та аспірантів» та
«Анкетування роботодавців та стейкхолдерів». Користувач обирає потрібний
підрозділ і переходить до відповідної сторінки для ознайомлення з її вмістом.
20 Відкриття підрозділу «Анкетування студентів та аспірантів»
Користувач наводить курсор на розділ головного меню «Анкетування» та у
випадаючому списку обрає підрозділ «Анкетування студентів та аспірантів».
Відкривається сторінка з поясненням умов заповнення, конфіденційності та
кнопками переходу до відповідних форм-анкет.
21 Відкриття розділу «Акредитація»
Користувач натискає на розділ «Акредитація» в головному меню. Відкривається
сторінка, яка містить перелік документів щодо акредитації освітніх програм, у
вигляді посилань на PDF-файли.
22 Перемикання мови інтерфейсу
У правому верхньому куті сторінки користувач натискає на прапорець, щоб
обрати мовну версію сторінок (українську або англійську). Відповідна мовна
версія сторінки завантажується автоматично, зберігаючи структуру та стилістику
сторінок.
156
ДОДАТОК Г
Програмне забезпечення WEB-сторінки кафедри ПЗАС
Графічні матеріали
482. ЧДТУ. 252152 90 01
Листів 25
Розробник ________________ С.С. Запісочна
Черкаси 2025
482.ЧДТУ. 252152 34 01 6
Рисунок Г1 – Слайд 1
Рисунок Г2 – Слайд 2
164
482.ЧДТУ. 252152 34 01 7
Рисунок Г3 – Слайд 3
Рисунок Г4 – Слайд 4
165
482.ЧДТУ. 252152 34 01 8
Рисунок Г5 – Слайд 5
Рисунок Г6 – Слайд 6
166
482.ЧДТУ. 252152 34 01 9
Рисунок Г7 – Слайд 7
Рисунок Г8 – Слайд 8
167
482.ЧДТУ. 252152 34 01 10
Рисунок Г9 – Слайд 9
Рисунок Г10 – Слайд 10
168
482.ЧДТУ. 252152 34 01 11
Рисунок Г11 – Слайд 11
Рисунок Г12 – Слайд 12
169
482.ЧДТУ. 252152 34 01 12
Рисунок Г13 – Слайд 13
170
482.ЧДТУ. 252152 34 01 13
Рисунок Г14 – Слайд 14
Рисунок Г15 – Слайд 15
171
482.ЧДТУ. 252152 34 01 14
Рисунок Г16 – Слайд 16
Слайд Г17 – Слайд 73
172
482.ЧДТУ. 252152 34 01 15
Рисунок Г18 – Слайд 18
Рисунок Г19 – Слайд 19
173
482.ЧДТУ. 252152 34 01 16
Рисунок Г20 – Слайд 20
Рисунок Г21 – Слайд 21
174
482.ЧДТУ. 252152 34 01 17
Рисунок Г22 – Слайд 22
Рисунок Г23 – Слайд 23
175
482.ЧДТУ. 252152 34 01 18
Рисунок Г24 – Слайд 24
Рисунок Г25 – Слайд 25
176
482.ЧДТУ. 252152 34 01 19
Рисунок Г26 – Слайд 26
Рисунок Г27 – Слайд 27
177
482.ЧДТУ. 252152 34 01 20
Рисунок Г28 – Слайд 28
Рисунок Г29 – Слайд 29
178
482.ЧДТУ. 252152 34 01 21
Рисунок Г30 – Слайд 30
Рисунок Г31 – Слайд 31
179
482.ЧДТУ. 252152 34 01 22
Рисунок Г32 – Слайд 32
Рисунок Г33 – Слайд 33
180
482.ЧДТУ. 252152 34 01 23
Рисунок Г34 – Слайд 34
Рисунок Г35 – Слайд 35
181
482.ЧДТУ. 252152 34 01 24
Рисунок Г36 – Слайд 36
Рисунок Г34 – Слайд 37
182
482.ЧДТУ. 252152 34 01 25
Рисунок Г38 – Слайд 38
Рисунок Г39 – Слайд 39
183
482.ЧДТУ. 252152 34 01 26
Рисунок Г40 – Слайд 40
Рисунок Г41 – Слайд 41
184
482.ЧДТУ. 252152 34 01 27
Рисунок Г42 – Слайд 42
Рисунок Г43 – Слайд 43
185
482.ЧДТУ. 252152 34 01 28
Рисунок Г44 – Слайд 44
186