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/6190| Title: | Інформаційний web-сайт студентського наукового гуртка з проблем STEM-освіти |
| Authors: | Андрієнко, Володимир Олександрович Левченко, Владислав Анатолійович |
| Keywords: | ІНФОРМАЦІЙНИЙ WEB-САЙТ;НАУКОВИЙ ГУРТОК;STEM-ОСВІТА;ЗАКЛАД ВИЩОЇ ОСВІТИ;КАФЕДРА;ПРОГРАМНІ ЗАСОБИ. |
| Issue Date: | 12-Jun-2024 |
| Abstract: | Сьогодні в мережі Інтернет існує безліч навчальних ресурсів, присвячених різним аспектам STEM-освіти. Проблема створення якісних ресурсів завжди цікавить широке коло викладачів, проте, незважаючи на значну зацікавленість цим питанням, єдиного підходу до створення інформаційного веб-сайту немає. Тому виникає необхідність в аналізі наявних інформаційних веб-сайтів, а також у проведенні аналітики для проектування і розробки інформаційного веб-сайту наукового гуртка кафедри закладу вищої освіти із застосуванням сучасних веб-технологій. Актуальність кваліфікаційної роботи бакалавра обумовлена необхідністю створення такого веб-сайту, що надає можливість користувачам швидко знайти необхідну інформацію та ознайомитися з роботою гуртка. Метою кваліфікаційної роботи бакалавра є проектування і розробка інформаційного Web-сайту студентського наукового гуртка з проблем STEM-освіти. Об’єкт дослідження: інформаційний Web-сайт з організації студентського наукового гуртка з проблем STEM-освіти. Предмет дослідження: засоби та технології розробки інформаційного Web-сайту з організації студентського наукового гуртка з проблем STEM-освіти. Методи дослідження. В роботі застосовувалися практичні розробки, аналіз напрямків діяльності наукових гуртків, аналіз існуючих Web-сайтів гуртків закладів вищої освіти. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6190 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Левченко Владислав_КНС-2201_2023-2024.pdf Restricted Access | 4.53 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
1
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «ІНФОРМАЦІЙНИЙ WEB-САЙТ СТУДЕНТСЬКОГО
НАУКОВОГО ГУРТКА З ПРОБЛЕМ STEM-ОСВІТИ»
Виконав: студент 4 курсу, групи КНС-2201
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та .
прикладне програмування
(назва освітньої програми)
Левченко Владислав Анатолійович
Керівник __________ Андрієнко В.О.
(прізвище та ініціали)
Рецензент _________ Антонюк В.С.
(прізвище та ініціали)
Черкаси 2024 рік
2
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітній рівень Бакалавр
Спеціальність 122 – комп’ютерні науки
ЗАТВЕРДЖУЮ
Завідувач кафедри КН та СА
_______________ Триус Ю.В.
«____» _____________ 2024 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Левченку Владиславу Анатолійовичу
(прізвище, ім’я, по батькові)
1. Тема роботи Інформаційний web-сайт студентського наукового гуртка
з проблем STEM-освіти
Керівник роботи Андрієнко Володимир Олександрович, к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «26» лютого 2024 р. №60/04.
2. Строк подання студентом роботи до 07 червня 2024 року
3. Вихідні дані до роботи:
Інформаційний сайт
Звіт з виробничої практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ.
4.1. Моделі, системні підходи та програмні засоби створення web-сайтів
4.2. Проектування web-сайту наукового гуртка «STEM-освіта»
4.3. Web-сайт наукового гуртка «STEM-освіта»
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 40090-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5 .4. Презентація у вигляді 21 слайдів.
3
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі
завдання 11.01.2024
КАЛЕНДАРНИЙ ПЛАН
Строк
№ Назва етапів кваліфікаційної роботи
виконання Примітка
з/п бакалавра
етапів роботи
1 Видача завдання на кваліфікаційну роботу
до 03.01.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 15.02.2024 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 10.03.2024 Виконано
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту
до 03.04. 2024 Виконано
й предмету дослідження).
5 Написання практичних розділів й висновків по
до 25.05.2024 Виконано
роботі.
6 Передзахист кваліфікаційної роботи бакалавра
до 26.05.2024 Виконано
на засіданні випускової кафедри.
7 Подання роботи завідувачу кафедри. до 31.05. 2024 Виконано
8 Захист кваліфікаційної роботи бакалавра. 07.06.2024 Виконано
Студент _____________________________ Левченко В.А.
(підпис)
Керівник роботи ____________________________ Андрієнко В.О.
(підпис)
3
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: __ с., __ рис., __ табл., __
використаних джерел, __ додатки.
Актуальність теми. Сьогодні в мережі Інтернет існує безліч навчальних
ресурсів, присвячених різним аспектам STEM-освіти. Проблема створення
якісних ресурсів завжди цікавить широке коло викладачів, проте, незважаючи на
значну зацікавленість цим питанням, єдиного підходу до створення
інформаційного веб-сайту немає. Тому виникає необхідність в аналізі наявних
інформаційних веб-сайтів, а також у проведенні аналітики для проектування і
розробки інформаційного веб-сайту наукового гуртка кафедри закладу вищої
освіти із застосуванням сучасних веб-технологій. Актуальність кваліфікаційної
роботи бакалавра обумовлена необхідністю створення такого веб-сайту, що
надає можливість користувачам швидко знайти необхідну інформацію та
ознайомитися з роботою гуртка.
Мета роботи і задачі. Метою кваліфікаційної роботи бакалавра є
проектування і розробка інформаційного Web-сайту студентського наукового
гуртка з проблем STEM-освіти. Для досягнення поставленої мети необхідно
виконати наступні завдання:
здійснити огляд інструментів для розробки інформаційного веб-
сайту;
провести порівняльний аналіз існуючих інформаційних веб-сайтів
наукових гуртків закладів вищої освіти;
спроектувати та розробити інформаційний веб-сайт і наповнити його
початковим контентом.
Об’єкт дослідження: інформаційний Web-сайт з організації студентського
наукового гуртка з проблем STEM-освіти.
Предмет дослідження: засоби та технології розробки інформаційного
Web-сайту з організації студентського наукового гуртка з проблем STEM-освіти.
4
Методи дослідження. В роботі застосовувалися практичні розробки,
аналіз напрямків діяльності наукових гуртків, аналіз існуючих Web-сайтів
гуртків закладів вищої освіти.
Перелік ключових слів: ІНФОРМАЦІЙНИЙ WEB-САЙТ, НАУКОВИЙ
ГУРТОК, STEM-ОСВІТА, ЗАКЛАД ВИЩОЇ ОСВІТИ, КАФЕДРА, ПРОГРАМНІ
ЗАСОБИ.
5
ABSTRACT
The bachelor's qualification work contains: __ pages, __ figures, __ tables, __
sources used, __ appendices.
Relevance of the topic. There are numerous educational resources available on
the Internet today dedicated to various aspects of STEM education. The issue of
creating high-quality resources always interests a wide range of educators; however,
despite significant interest in this topic, there is no unified approach to creating an
informational website. Therefore, there is a need to analyze existing informational
websites, as well as to conduct analytics for the design and development of an
informational website for the scientific circle of a university department using modern
web technologies. The relevance of this bachelor’s qualification work is due to the
necessity of creating such a website, which allows users to quickly find the necessary
information and become acquainted with the activities of the circle.
Purpose and tasks. The purpose of the bachelor's qualification work is to design
and develop an informational website for a student scientific circle focused on STEM
education issues. To achieve this goal, the following tasks need to be solved:
Perform a review of tools for developing an informational website;
Conduct a comparative analysis of existing informational websites of
scientific circles at higher education institutions;
Design and develop an informational website and fill it with initial content.
Object of research: an informational website for organizing a student scientific
circle focused on STEM education issues.
Subject of research: tools and technologies for developing an informational
website for organizing a student scientific circle focused on STEM education issues.
Research methods. The work utilized practical developments, analysis of the
activities of scientific circles, and analysis of existing websites of scientific circles at
higher education institutions.
Keywords: INFORMATIONAL WEBSITE, SCIENTIFIC CIRCLE, STEM
EDUCATION, HIGHER EDUCATION INSTITUTION, DEPARTMENT,
SOFTWARE.
6
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ….7
ВСТУП……………………………………………………………………………….….8
1 МОДЕЛІ, СИСТЕМНІ ПІДХОДИ ТА ПРОГРАМНІ ЗАСОБИ СТВОРЕННЯ
WEB-САЙТІВ…………………………………………………..……………………....9
1.1 Аналіз організаційної діяльності об’єкта студентського наукового гуртка…..9
1.2 Огляд web-ресурсів існуючих студентських наукових гуртків……………….11
1.3 Програмні засоби автоматизації розробки web-сторінок……………………..18
Висновки до розділу 1 ………………………………………………………………23
2 ПРОЕКТУВАННЯ WEB-САЙТУ НАУКОВОГО ГУРТКА «ПРОБЛЕМИ STEM-
ОСВІТИ»………………………...…………………………………………………….25
2.1 Аналіз вимог до web-сайту «Проблеми STEM-освіти»…………….………..25
2.2 Структура web-сайту «Програмування»………………………………………37
2.3 Проектування структури бази даних для web-сайту «Проблеми STEM-
освіти»……………………………………………………………………………….38
Висновки до розділу 2 ………………………………………………………………44
3 WEB-САЙТ НАУКОВОГО ГУРТКА «ПРОБЛЕМИ STEM-
ОСВІТИ»………………………………………………………………………..…..…45
3.1 Основні сценарії роботи web-сайту наукового гуртка…………………….…45
3.2. Графічний інтерфейс web-сайту наукового гуртка……………………….…52
3.3. Тестування web-сайту наукового гуртка «Проблеми STEM-
освіти»………………………………………………………………………..……..62
Висновки до розділу 3 …………………………………………………………..…64
ВИСНОВКИ………………………………………………………………………...…65
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ………………………………………….…66
ДОДАТОК А…………………………………………………………………………..68
ДОДАТОК Б…………………………………………………………………………..70
ДОДАТОК В…………………………………………………………………………..81
7
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
ЗВО – заклад вищої освіти;
STEM – наука, технології, інженерія та математика (англ. Science, Technology,
Engineering, Mathematics);
ПЗ – програмне забезпечення;
CMS – система керування вмістом (англ. Content Management System);
АІС – автоматизована інформаційна система;
БД – база даних;
ОС – операційна система;
HTML – мова розмітки гіпертексту (англ. HyperText Markup Language);
CSS – каскадні таблиці стилів (англ. Cascading Style Sheets);
API – інтерфейс прикладного програмування (англ. Application Programming
Interface);
UX/UI – користувацький досвід / інтерфейс користувача (англ. User Experience
/ User Interface).
CSS – Cascading Style Sheets.
8
ВСТУП
Науковий гурток з проблем STEM-освіти являє собою групу зацікавлених
осіб, об'єднаних спільним прагненням вирішувати актуальні наукові питання у
галузях науки, технологій, інженерії та математики (STEM). Основними
завданнями діяльності наукового гуртка є:
Вивчення методології досліджень студентами кафедри.
Набуття практичних навичок та їх застосування на практиці.
Підготовка професіоналів з відповідним рівнем необхідної
спеціалізації.
Розвиток нового потенціалу студентів.
Проведення цікавих семінарів та «мозкових штурмів».
Для реалізації сучасних завдань учасники студентського наукового гуртка
повинні проводити періодичні засідання, обговорювати актуальні питання та
працювати над спільними проектами.
Розробка інформаційного веб-сайту для наукового гуртка є важливим і
актуальним завданням, адже він дозволяє популяризувати діяльність гуртка,
залучати нових учасників, забезпечувати доступ до актуальної інформації та
підтримувати зв'язок між членами гуртка та зацікавленими особами.
Гурток – це група зацікавлених осіб, об'єднаних спільним видом діяльності
для вирішення актуальних наукових питань. Основні завдання діяльності
наукового гуртка включають вивчення студентами кафедри методології
досліджень, набуття практичних навичок та їх застосування на практиці,
підготовку професіоналів з відповідним рівнем спеціалізації, розвиток нового
потенціалу студентів, а також проведення цікавих семінарів і «мозкових штурмів».
Для реалізації сучасних завдань учасники студентського наукового гуртка повинні
проводити періодичні засідання.
Розробка інформаційного веб-сайту для будь-якого наукового гуртка,
незалежно від його напрямків діяльності, є надзвичайно актуальною задачею.
Створення такого веб-сайту для студентського гуртка дозволяє популяризувати
9
новітні напрями діяльності серед користувачів Інтернету, залучити нових
учасників, відстежувати перспективи та результативність виконання актуальних
проектів гуртка тощо.
Метою даної бакалаврської роботи є розробка ефективного інформаційного
веб-сайту наукового гуртка кафедри з використанням сучасних передових
інформаційних технологій. Об'єктом дослідження є утворення та діяльність
наукових студентських гуртків, а предметом дослідження – застосування сучасних
засобів та нових платформ для розробки інформаційного веб-сайту наукового
студентського гуртка кафедри.
10
1. МОДЕЛІ, СИСТЕМНІ ПІДХОДИ ТА ПРОГРАМНІ ЗАСОБИ
СТВОРЕННЯ WEB-САЙТІВ ДЛЯ НАУКОВОГО ГУРТКА З ПРОБЛЕМ
STEM-ОСВІТИ
1.1 Аналіз організаційної діяльності наукового гуртка з проблем STEM-
освіти
Найбільш поширеною формою позанавчальної діяльності на кафедрі, що
займається науковими дослідженнями в галузі STEM-освіти, є студентський
науковий гурток. Гурток – це група зацікавлених осіб, об'єднаних спільною
діяльністю з метою дослідження нових наукових питань та розв'язання цікавих
задач, що сприяють полегшенню життя кожного учасника. Метою діяльності
студентського наукового гуртка є глибоке освоєння різних методологій наукових
досліджень, набуття та застосування практичних навичок, а також підготовка
висококваліфікованих спеціалістів з відповідної спеціалізації.
Гурток також сприяє розвитку творчого потенціалу студентів, організовує
наукові семінари, тренінги та інші заходи. Для реалізації поставлених цілей та
задач учасники гуртка повинні проводити регулярні засідання.
STEM освіта: організація процесу
Яке обладнання потрібне для STEM-лабораторії?
Єдиної правильної відповіді на це запитання немає. Але є орієнтири, які
допоможуть оптимально укомплектувати кабінет для занять STEM у кожному
конкретному випадку.
По-перше, треба ознайомитися з Наказом МОН № 574 від 29 квітня 2020 року
«Типовий перелік засобів навчання та обладнання для навчальних кабінетів і
STEM-лабораторій».
По-друге, спочатку необхідно забезпечити STEM-лабораторію базовим
обладнанням, а це сучасні комплекти для дослідів та вимірювань, здатні
інтегруватися в діджитал середовище. Гарним прикладом такого обладнання може
бути бренд PASCO. Й вже звичний центр сучасного класу чи лабораторії –
інтерактивна панель. Важливо обрати мультимедійну панель, яка представляє всі
необхідні функції для розширення STEM-досвіду, підтримує підключення датчиків
11
та сенсорів, та здатна транслювати експерименти за межі класу. У випадку з нашою
кафедрою, всі ці функції доповнюються ще й можливістю залучати в досліди
фахівців і студентів на віддаленні.
По-третє, слід враховувати можливості та потреби навчального закладу.
Адже спеціалізоване обладнання без викладача відповідного профілю буде
простоювати. Тож зважайте на те, хто з керівників гуртка буде проводити STEM-
заняття та вибирайте обладнання разом з ними.
Облаштування STEM-лабораторії крок за кроком
Напрочуд важливо правильно вибрати кабінет для проведення занять.
Оптимальним варіантом буде просторе приміщення з гарним природним
освітленням, численними розетками та умивальником, як у нас в аудиторії 508.
Також враховуйте температурний режим і якість повітря у кабінеті, бо ці показники
суттєво впливають на продуктивність навчання.
Найімовірніше, бюджет для облаштування STEM-лабораторії буде
обмежений. А перелік необхідного обладнання для занять з робототехніки,
паперового моделювання чи обробки деревини вельми відрізняється. Отже,
потрібно буде визначитися з пріоритетними напрямками діяльності вашої
лабораторії. Першочергово необхідно буде забезпечити кабінет базовими
інструментами та обладнанням для вибраного напрямку. З часом ви зможете
розширити його, відповідно до потреб навчання.
Вже на етапі створення лабораторії у вас має бути стратегія її розвитку. Ви
маєте визначити, яке обладнання знадобиться через рік, два та п’ять років. Звісно,
план розвитку може зазнавати коригувань на підставі практичного досвіду роботи
STEM-лабораторії у вашому закладі освіти. Та, якщо ви все ретельно спланували,
зміни будуть незначними. А наявність стратегії розвитку допоможе коректно
скласти бюджет і залучити кошти для розширення матеріально-технічної бази
лабораторії.
12
Рисунок 1.1 – Можливості STEM-освіти
Цінність STEM-освіти: від реальних проектів до успішного
працевлаштування рисунок 1.1.
Зараз студенти часто запитують: «Навіщо мені це вчити?» і за відсутності
аргументованої відповіді не бачать сенсу витрачати час на вивчення певного
предмета чи теми. Основне завдання STEM-освіти – навчити молодь застосовувати
науковий підхід для вирішення різноманітних виробничих і побутових проблем. З
огляду на це STEM-освіта має базуватися на розв’язанні реальних задач. Приміром,
на занятті можна виготовити антисептик для рук. Такі та подібні цікаві завдання
можуть ставати локомотивом STEM-процесу вже з перших курсів, дивіться
статтю «STEM-освіта відразу».
Корисним буде залучення до навчального процесу підприємств. Співпраця
ЗВО та бізнесу – це можливість наблизити навчання до справжніх потреб
суспільства. Підприємства можуть підказати закладам вищої освіти приклади
завдань, які потребують вирішення. Наслідком такого партнерства буде:
вища якість освіти у ЗВО,
випускники, які готові розв’язувати реальні задачі,
більш кваліфікований персонал для підприємств.
Тобто, у виграші правильно організованої STEM-освіти будуть усі учасники.
13
Інтерактивні панелі для STEM-лабораторій значно покращують навчальний
процес.
Як ми вже згадували вище, у кожному закладі буде власний перелік
потрібного обладнання для STEM-лабораторії. Але базова комплектація зазвичай
дуже схожа. Керівники з досвідом керування STEM-лабораторіями зазначають, що
застосування на заняттях інтерактивної панелі значно покращує навчальний
процес. Адже у поєднанні з відповідним програмним забезпеченням інтерактивна
панель допоможе розібратися у певній тематиці простіше та швидше. Детально
вивчити якийсь механізм, явище чи живу істоту можна завдяки тривимірній моделі,
відео чи презентації (наприклад, ROQED Science). Такий формат навчання є більш
цікавим і ефективним для студентів. Організувати подібні заняття керівник гуртка
може доволі швидко, адже зараз є багато готових інтерактивних навчальних
матеріалів.
Додатково мотивувати відвідувачів гуртка до вивчення певної галузі можуть
тематичні зустрічі з керівниками та спеціалістами підприємств. Зустрічі можна
проводити в онлайн-режимі, використовуючи інтерактивну панель та відеокамеру.
Це дозволить суттєво розширити перелік потенційних гостей без прив’язки до
місця знаходження вашої школи. Погодьтеся, домовитися з фахівцем про годинну
онлайн-конференцію простіше, ніж про приїзд у ваш навчальний заклад. Такі
заходи наочно продемонструють дітям цінність занять у STEM-лабораторії та
спонукають їх до плідного навчання. На які ще дива спроможний STEM формат
навчання завдяки сучасному обладнанню дізнайтесь на безкоштовній презентації
від профільних фахівців, заповнивши помаранчеву форму на участь внизу
сторінки, а також дивіться повний перелік сучасного інтерактивного обладнання.
Різні види діяльності наукового гуртка. Гуртки можуть проводити різні
заходи, такі як конкурси та квести, екскурсії, інформаційні мітинги, круглі столи,
семінари та навчальні практики.
14
Таблиця 1.1 – Функції студентського гуртка
Функції для удосконалення Функції для удосконалення практичних
теоретичних знань знань
- Чітке планування програмованого - Стимулювання та розвиток практичних
матеріалу; знань та умінь учасників;
- Забезпечення дотримання норм і - Навчання учасників з врахуванням
правил техніки безпеки; специфіки гуртка;
- Варіативність у виборі форм та - Допомога у виборі майбутньої професії;
методів роботи гуртка;
У таблиці 1.1 вказані основні функції гуртка для здобуття та удосконалення
знань усіх учасників. Студентські гуртки застосовуються у різних сферах життя.
Таблиця 1.2 – Сфери застосування гуртків
Сфери застосування гуртків
Предметно-технічна – розширення знань та вмінь з певної дисципліни, розвиток
на основі комп'ютерних теоретичних знань, створення та удосконалення
обладнання.
Творчо-конструкторська – удосконалення вмінь та знань, науково-технічного
мислення та навичок аналізаторської та організаційної діяльності.
Навчально-технічна – удосконалення певних наукових питань з техніки.
При створенні наукового студентського гуртка виникає потреба в
електронному доступі до інформації. Для цього необхідно створити веб-сайт
гуртка, який допоможе вирішити деякі організаційні проблеми. Веб-сайт наукового
студентського гуртка створюють для:
Зацікавлення та вступу якомога більшої аудиторії;
Доступу до необхідної інформації від адміністрації студентського
гуртка;
Оновлення поточної інформації;
Поширення подій, що відбуваються у науковому гуртку.
Створення інформаційного веб-сайту для наукового гуртка дозволяє
вирішити нагальні проблеми, що локалізовані в самому гуртку. Веб-сайт може бути
15
самостійним або пов'язаним з закладом вищої освіти, де відносини з людьми та
закладами освіти надають перспективу учасникам гуртка. Також одним з головних
завдань є вирішення технологічних та фінансових проблем – веб-сайт надає
можливість розширити відносини з впливовими особами та загалом
розширюватись.
Таким чином, гурток – це група зацікавлених осіб, що об'єдналися для
вирішення спільного питання чи проблеми. Веб-сайт дозволяє гуртку оновлювати
поточну інформацію для всіх учасників, розширювати інформацію про гурток та
залучати нових учасників.
1.2 Огляд web-ресурсів існуючих студентських наукових гуртків
Веб-сайти наукових гуртків, зокрема в галузі STEM-освіти, мають
різноманітні інтерфейси та функціональні можливості. На рисунку 1.1 показано
веб-сайт наукового гуртка з програмування, який має простий інтерфейс та
приємну кольорову гамму.
Рисунок 1.2 – Вигляд інформаційного веб-сайту наукового гуртка
16
Рисунок 1.3 – Веб-сторінка гуртка з програмування школи №16 «Кодфорс»
Проаналізувавши кожен з трьох сайтів, видно, що на сторінці сайту
«Гурток з програмування та інших інформаційних технологій» меню є досить
лаконічним.
Рисунок 1.4 – Стрічка меню сайту «Гуртки з програмування»
Меню другого сайту, веб-сторінки гуртка з програмування «Кодфорс», має
розширений вигляд та приємніший інтерфейс, включаючи варіації різних мов.
Рисунок 1.5 – Вигляд головного меню сайту гуртка програмування
«Кодфорс»
Існують також сайти з простим інтерфейсом, написані за допомогою
HTML, CSS.
17
Рисунок 1.6 – Вигляд веб-сайту гуртка з прикладного програмування
Code Club
На рисунку 1.6 показана веб-сторінка з простим інтерфейсом, де головне
меню розміщене зліва. Цей сайт має порожні місця навколо сторінки та
використовує простий інтерфейс.
Рисунок 1.7 – Частина основного меню розглянутого сайту
Порівнюючи три веб-сайти, видно, що інтерфейс першої головної сторінки
двох сайтів значно відрізняється.
18
Рисунок 1.8 – Меню сайту
Програмні засоби для написання двох сайтів теж різні: перший сайт
написаний за допомогою HTML та CSS, другий – за допомогою PHP з
використанням віртуального сервера.
Рисунок 1.9 – Посилання на контакти групи адміністрації та основні
соціальні мережі
Кожен з розглянутих сайтів має контакти адміністрації, пошук важливої
інформації та власне карту місця проведення занять.
Рисунок 1.10 – Місце для проведення занять
19
Рисунок 1.11 – Карта розташування приміщення, де проводяться заняття
даного гуртка
Особливістю інформаційної веб-сторінки цього гуртка є повна лаконічна
інформація про гурток: місце проведення власне занять, контакти, адреса та й
вартість занять.
Рисунок 1.12 – Головна сторінка веб-сайту
Останній аналог сайту гуртка має просте меню зліва, воно більш розширене
і доступне відразу.
Порівняння кількох аналогів сайтів представлено в таблиці 1.3.
Таблиця 1.3 – Порівняння кількох аналогів сайтів
Особливості аналогів сайтів наукових студентських гуртків
Мова написання сайту: HTML, PHP, HTML
Інтерфейс: простий, складний, простий
Інформація на сайті: доступна та зрозуміла
Меню: розширене
Контакти адміністрації сайту: присутні
20
Основні структурні елементи сайтів:
Наукові та іноваційні розробки студентів;
Місце та час проведення засідань;
Головне меню сайту;
Рік створення гуртка (сайту);
Календар подій;
Контакти;
Форум або блог.
1.3 Програмні засоби для автоматизації розробки веб-сторінок
Для створення веб-сайтів використовуються різні програми, які слугують для
написання коду веб-сторінок. Основні з них:
Блокнот – найпростіша програма, що використовується для створення
сайтів. Вона вбудована в ОС Windows і підходить для написання HTML-коду.
Notepad++ – розширена версія блокнота з підсвічуванням HTML-тегів.
Безкоштовна програма, що дозволяє легше виявляти помилки в коді.
Microsoft Front Page – візуальний редактор HTML-коду з пакету
Microsoft Office. Надає можливість бачити, як виглядатиме створювана сторінка, та
редагувати код вручну.
Таблиця 1.4 – Переваги та недоліки програм
Назва Переваги Недоліки
програми
Блокнот Доступність, вбудований в ОС Неможливість побачити
Windows створену сторінку
Notepad++ Простота, доступність, Неможливість побачити
безкоштовна створену сторінку
Microsoft Front Можливість бачити сторінку, Платна версія програми,
Page підсвічування тегів створює зайвий код
Фреймворки полегшують розробку веб-сайтів та забезпечують високу
продуктивність. Вони можуть використовуватися для створення веб-сервісів,
сайтів та додатків.
21
Таблиця 1.6 – Різновиди фреймворків
Різновиди фреймворків для веб-розробки
PHP-фреймворки: YII, Symphony, Zend
Ruby-фреймворки: Ruby on Rails, Sinatra, Padrino
Java-фреймворки: Spring MVC, JSF, GWT
Python-фреймворки: Twisted, Flask, Django, Tornado
Фреймворки мають свої як переваги так і недоліки. Переваги включають
високу швидкодію та продуктивність, а недоліки – залежність від бібліотек та
складність коду.
CMS – це програмне забезпечення для організації та забезпечення спільного
редагування сайту. Вона дозволяє власнику самостійно редагувати сайт, тестувати
його роботу та зменшувати часові витрати на розробку.
Таблиця 1.7 – Переваги та недоліки CMS
Переваги Недоліки
Можливість редагування структури Вразливість CMS, прив'язаність до
сайту розробника
Забезпечення високої якості Замовник має обмежені можливості
розробки редагування
Зрозумілий інтерфейс для
редагування
Програми для створення сайтів, фреймворки та CMS значно полегшують
роботу розробника, зменшують можливість появи помилок у коді, покращують
дизайн сайту та роблять його більш унікальним.
Висновок: Застосування CMS значно економить час розробника та
забезпечує зручний інтерфейс, проте замовник залишається прив'язаним до
розробника, а вразливість CMS може бути проблемою, особливо в інтернет-
магазинах.
22
Висновки до розділу 1
У першому розділі бакалаврської роботи проведено аналіз предметної
області та об’єкту дослідження — наукового студентського гуртка кафедри,
зокрема з проблем STEM-освіти. Показано, що гурток — це група зацікавлених
осіб, об'єднаних спільною діяльністю для вирішення нових наукових питань.
Основними завданнями діяльності наукового гуртка є вивчення студентами
методології наукових досліджень; набуття практичних навичок та можливість їх
застосування; сприяння підготовці професіоналів з відповідним рівнем
спеціалізації; розвиток потенціалу студентів кафедри; проведення семінарів та
зустрічей. Також визначено головні напрямки роботи гуртків.
Доведено актуальність розробки веб-сайту для наукових гуртків, адже це
дозволить досліджувати науково-технологічні проблеми та створити проект, який
підтвердить чи спростує певне наукове твердження. Студентський гурток може
бути самостійною частиною або діяти при закладі вищої освіти, і його стосунки з
навчальним закладом мають перспективи для подальшого розвитку.
Гурток часто стикається з фінансовими та технологічними проблемами, тому
веб-сайт надає можливості для розширення зв’язків з впливовими спеціалістами. У
розділі також наведено огляд існуючих веб-сайтів наукових гуртків, таких як «Code
Club», «піт.укр», «Кодфорс», і проведено аналіз їхніх переваг та недоліків.
Здійснено огляд існуючих засобів та платформ для розробки веб-сайтів, а
також прийнято рішення про застосування конкретних інструментів для вирішення
поставлених завдань у даному дослідженні.
Метою бакалаврської роботи є розробка інформаційного веб-сайту наукового
гуртка кафедри з використанням сучасних інформаційних технологій. Для
досягнення цієї мети необхідно вирішити такі завдання:
Визначити основні функціональні та нефункціональні вимоги до
розробки інформаційного веб-сайту;
Провести аналіз предметної області та дослідити об’єкт
інформатизації;
23
Спроектувати основні завдання для розроблюваного веб-сайту;
Спроектувати структуру веб-сайту наукового студентського гуртка
«Проблеми STEM-освіти»;
Сформувати специфікацію вимог до сайту наукового гуртка;
Реалізувати веб-сайт, протестувати його роботу та провести порівняння
з сайтами-аналогами.
24
2. ПРОЕКТУВАННЯ WEB-САЙТУ НАУКОВОГО ГУРТКА
«ПРОБЛЕМИ STEM-ОСВІТИ»
2.1 Аналіз вимог до web-сайту наукового гуртка «Проблеми STEM-
освіти»
На етапі проектування програмної системи важливо провести аналіз вимог до
інформаційного web-сайту наукового гуртка «Проблеми STEM-освіти».
Розглянемо деякі функціональні вимоги до розроблюваної системи. У системі
будуть передбачені два типи користувачів: звичайний користувач та адміністратор.
Інформаційний web-сайт надаватиме різний функціонал для кожного з них. UML-
діаграма варіантів використання для користувача системи представлена на рисунку
2.1. На цій діаграмі зображені деякі функції нашої системи, які користувач може
використовувати.
Рисунок 2.1 – UML-діаграма варіантів для можливого використання web-
сайту «Проблеми STEM-освіти» для користувача
25
Давайте детальніше розглянемо кожен із варіантів використання.
«Переглянути новини» – функція системи, яка дозволяє користувачу
ознайомитися з найсвіжішими новинами на сайті.
«Переглянути весь список» – функція, що надає користувачу можливість
перейти на сторінку з більш детальним переліком новин.
«Переглянути інформацію про учасників» – функція, яка дозволяє
користувачу отримати повну інформацію про учасників гуртка «Проблеми STEM-
освіти».
«Переглянути інформацію про гурток» – функція, що надає користувачу
детальну інформацію про гурток.
«Переглянути учасників» – функція, яка дозволяє користувачу переглянути
список учасників.
«Переглянути актуальні наукові проєкти» – функція, яка надає користувачу
можливість ознайомитися з найактуальнішими проєктами на сайті.
«Переглянути випускників» – функція, що дозволяє користувачу дізнатися
про найкращих випускників гуртка.
«Переглянути проєкти» – функція, яка надає користувачу можливість
переглянути проєкти учасників на сайті «Проблеми STEM-освіти».
«Переглянути чат» – функція, яка дозволяє користувачу спілкуватися з
іншими учасниками та адміністрацією сайту через чат.
«Переглянути контакти» – функція, що надає користувачу доступ до
контактної інформації адміністратора (телефони, електронна пошта) та містить
карту місця розташування гуртка.
З діаграми видно, що користувач, зайшовши на сайт, може з меню перейти
на будь-яку зі сторінок і переглядати відповідні функції. Користувач має доступ до
інформації про гурток та учасників, а також може переглядати готові проєкти,
розроблені учасниками.
На рисунку 2.2 показано діаграму варіантів використання інформаційного
web-сайту для адміністратора.
26
Рисунок 2.2 – UML-діаграма для різних варіантів комунікацій та
використання інформаційного web-сайту «Проблеми STEM-освіти» власне для
адміністратора
Розглянемо UML-діаграму варіантів використання адміністратором. Робота з
сайтом розпочинається з функції «Авторизація». Перед тим як увійти на сайт,
необхідно ввести логін або електронну пошту та пароль. Після перевірки
правильності введених даних система підтверджує авторизацію, і для подальшого
входу необхідно натиснути кнопку «Вхід».
27
«Переглянути весь список» – функція системи, що дозволяє
адміністратору переглядати сайт з детальними новинами.
«Переглянути новини» – функція, що дозволяє адміністратору
додавати, редагувати та видаляти новини на сторінці.
«Перечитати інформацію про гурток» – функція, що дозволяє
адміністратору редагувати та видаляти інформацію про гурток.
«Переглянути випускників» – функція, що дозволяє адміністратору
переглядати, додавати, редагувати та видаляти інформацію про випускників
гуртка.
«Перечитати інформацію про учасників» – функція, що дозволяє
адміністратору переглядати, додавати, редагувати та видаляти інформацію про
учасників на сайті «Проблеми STEM-освіти».
«Переглянути учасників» – функція, що дозволяє адміністратору
переглядати, додавати, редагувати та видаляти список учасників гуртка.
«Переглянути проекти» – функція, що дозволяє адміністратору
переглядати проекти, розроблені учасниками гуртка.
«Переглянути актуальні наукові проекти» – функція, що дозволяє
адміністратору переглядати найактуальніші наукові проекти.
«Переглянути контакти» – функція, що дозволяє адміністратору
переглядати контактну інформацію (телефони, електронна пошта), а також карту
розташування гуртка та надсилати запитання електронною поштою.
«Переглянути чат» – функція, що дозволяє адміністратору
спілкуватися з учасниками гуртка та користувачами сайту через чат.
28
Отже, діаграма показує, що адміністратор, зайшовши на сайт, має можливість
управляти ним, додавати, редагувати та видаляти інформацію.
Далі, доцільно розглянути ескізи основних сторінок інформаційного web-
сайту наукового студентського гуртка «Проблеми STEM-освіти», які необхідно
створити для забезпечення виконання всіх функціональних вимог, наведених вище.
На рисунку 2.3 показано ескіз головної сторінки web-сайту «Домашня», яку
потрібно розробити для забезпечення виконання всіх описаних і розглянутих
функцій системи.
Рисунок 2.3 – Ескіз нашої головної сторінки «Домашня»
29
З даного ескізу чітко видно, де розташовані основні елементи сторінки, що
допомагають користувачу знайти потрібну інформацію на сайті, такі як: «меню»,
«карта розташування гуртка», «пошук» і «календар».
На рисунку 2.4 представлено ескіз екранної форми сторінки web-сайту «Про
гурток». Ця сторінка містить інформацію про організований гурток, його історію
та короткий опис активних учасників. Навігація по сторінках сайту здійснюється
за допомогою головного меню.
Рисунок 2.4 – Ескіз сторінки «Про гурток»
З цього простого ескізу видно, що сторінка «Про гурток» складається з трьох
основних пунктів: «Науковий гурток “Проблеми STEM-освіти”», «Активні
учасники гуртка» та «Історія гуртка».
30
У першому розділі буде міститися коротка інформація про гурток і мови
програмування, які використовуються. У другому розділі будуть представлені
відомості про створення гуртка, його мету та основні завдання. У третьому розділі
користувач зможе дізнатися про найактивніших учасників гуртка, кількість
учасників та їхні імена.
На рисунку 2.5 показано ескіз екранної форми сторінки web-сайту «Про
гурток», де будуть представлені останні новини про роботу гуртка.
Рисунок 2.5 – Ескіз інформаційної сторінки «Новини»
31
З наведеного кадру ескізу сторінки видно, що сторінка «Новини»
складається зі списку найновіших новин гуртка, а також надає можливість
переглянути детальніші розгорнуті новини.
На рисунку 2.6 показано ескіз екранної форми сторінки інформаційного
web-сайту «Інформація про учасників». На цій сторінці буде представлено
учасників гуртка, кращих науковців, а також надаватиметься можливість
створювати та подавати заявку на вступ до гуртка.
Рисунок 2.6 – Ескіз сторінки нашого сайту «Інформація про учасників»
З даного ескізу ми бачимо, що ця сторінка «Інформація про учасників»
складається з трьох кнопок: «Подати заявку», «Учасники гуртка», «Кращі
випускники гуртка», за допомогою цих кнопок користувач отримує можливість
перейти на кожну з необхідних сторінок та дізнатися більш розширено про кожен
32
із необхідних пунктів сторінки web-сайту «Проблеми STEM-освіти».
На рисунку 2.7 розкрито ескіз екранної форми нової сторінки web-сайту
«Кращі науковці гуртка». Подано на цій сторінці буде список учасників-науковців
та описана коротка характеристика.
Рисунок 2.7 – Ескіз сторінки «Кращі науковці гуртка»
З цього ескізу видно, що сторінка «Інформація про учасників» складається з
трьох кнопок: «Подати заявку», «Учасники гуртка», «Кращі випускники гуртка».
За допомогою цих кнопок користувач може перейти на кожну з необхідних
сторінок та отримати детальну інформацію про відповідні розділи веб-сайту
«Проблеми STEM-освіти».
33
На рисунку 2.7 показано ескіз екранної форми нової сторінки веб-сайту
«Кращі науковці гуртка». На цій сторінці буде подано список учасників-науковців
та коротку характеристику кожного з них.
Рисунок 2.7 – Ескіз майбутньої сторінки сайту «Актуальні проекти»
З наведеного ескізу видно, що сторінка «Про гурток» включає опис проектів,
а також надає користувачеві можливість переходити до готових наукових проектів.
Проекти представлені переважно за допомогою фото, при натисканні на які
користувач може перейти до розширеної інформації про відповідний проект.
34
На рисунку 2.8 показано ескіз екранної форми сторінки інформаційного веб-
сайту «Контакти». На цій сторінці буде розміщена карта розташування гуртка,
електронна пошта та телефон адміністратора, а також можливість надіслати
запитання адміністратору сайту.
Рисунок 2.8 – Ескіз сторінки до сайту «Контакти»
З наведеного ескізу видно, що сторінка сайту «Контакти» складається з
чотирьох пунктів: «Карта», «Чому навчатися саме у нас?», «Відповіді на
запитання», «Адреса/телефон/e-mail адміністратора».
У першому пункті буде міститися карта розташування гуртка. У другому
пункті буде розміщено місце для заповнення потрібних даних для надсилання
35
запитань адміністратору. У третьому пункті буде представлена контактна
інформація адміністратора. У четвертому пункті буде місце для відповідей на
запитання «Чому навчатися саме у нас?».
На рисунку 2.9 показано ескіз екранної форми сторінки веб-сайту «Чат». На
цій сторінці передбачено поля для введення імені та самого повідомлення.
Рисунок 2.9 – Ескіз для сторінки «Чат»
З наведеного ескізу видно, що сторінка «Чат» складається з двох основних
елементів: «Ім'я» та «Повідомлення». У першому пункті розміщено невелике поле
для введення імені підключеного користувача. У другому пункті знаходиться поле
для введення повідомлення, а також кнопка «Надіслати», яка дозволяє надіслати
адміністратору коротке повідомлення.
Отже, аналізуючи ескізи сторінок, можна побачити, що наш сайт забезпечує
всю необхідну функціональність і зручність кожної сторінки веб-сайту «Проблеми
STEM-освіти». Це дозволяє користувачу легко ознайомитися з організацією сайту
та гуртком.
36
2.2 Структура веб-сайту «Проблеми STEM-освіти»
Структура веб-сайту охоплює всі сторінки, що можуть бути присутніми на
сайті, а також шляхи, якими користувач може переміщатися між ними через меню.
Структуру основного сайту для користувача подано у вигляді схеми в цьому
кресленні.
З описаної структури видно, що навігація починається з домашньої сторінки.
Від домашньої сторінки користувач може перейти до сторінок «Про гурток»,
«Інформація про учасників», «Новини», «Чат», «Актуальні проекти», «Контакти».
З цих сторінок є можливість переходити до більш детальної інформації, яка буде
розміщена на веб-сайті «Проблеми STEM-освіти».
Адміністратор має можливість керувати контентом: додавати інформацію,
редагувати та видаляти її. Вигляд сайту для адміністратора відображено на
структурній схемі, що наведена в кресленнях. З цієї схеми видно, що навігація
також починається з головної сторінки: «Домашня». Адміністратор може перейти
на будь-яку з доступних сторінок. Такі сторінки, як «Додати новину», «Редагувати
новину», «Видалити новину», дозволяють адміністратору керувати контентом
сайту.
Редагування контентних сторінок реалізовано аналогічно до всіх інших і
дозволяє адміністратору відслідковувати оновлення інформації на веб-сайті
«Проблеми STEM-освіти».
Отже, зі структурних схем для користувача та адміністратора видно, що є
можливість переходу на будь-яку зі сторінок, що забезпечує високу
продуктивність, функціональність та повний доступ до інформації як для
користувача, так і для адміністратора.
2.3 Проектування структури та організації бази даних для веб-сайту
«Проблеми STEM-освіти»
На наступному етапі проектування структури бази даних було створено
діаграму всіх елементів і зв'язків. На цій діаграмі показано основні логічні елементи
даних веб-сайту наукового студентського гуртка.
37
Рисунок 2.10 – Діаграма всіх можливих елементів і зв’язків БД
Також на цьому рисунку показано елементи даних та можливі зв’язки між
ними, які зберігаються в базі даних. Сутність представляє собою об'єкт, процес або
поняття певного предмету чи явища. Зв’язки між елементами показано за
допомогою ліній, що пов’язують дві сутності, які є частиною бази даних. Атрибути
сутностей та їх зв’язки записуються всередині прямокутника. На наступному
рисунку 2.13 зображена ER-діаграма бази даних наукового студентського гуртка
«Проблеми STEM-освіти».
38
Рисунок 2.11 – ER-діаграма бази даних гуртка
ER-діаграма бази даних складається з семи основних сутностей, таких як:
«Project», «Performer», «Role», «News», «Participant», «State» та «Admin». У базі
даних web-сайту використовуються зв’язки типу «один до одного», «один до
багатьох» та «багато до одного».
Зв’язок «один до одного» використовується для сутностей: «Participant-Role»
і «Project-State». Зв’язок «один до багатьох» застосовується для наступних
сутностей: «Participant-Admin», «Project-Admin» і «News-Admin». Зв’язок «багато
до одного» використовується для сутностей: «Performer-Project» і «Performer-
Participant».
У таблиці 2.1 представлено структуру відношення «Project». Таблиця
складається з чотирьох колонок: «позначення», «назва поля», «тип даних» та
«розмір поля».
39
Таблиця 2.1 – Структура відношення «Project»
Позначення Назва поля Тип даних Розмір
поля
id Унікальний ідентифікатор проекту autoincrement 6
name Назва проекту char 100
views Кількість переглядів проекту int 5
користувачами
creation_date Дата створення проекту int 8
description Опис проекту char 1000
status Виконання проекту у відсотковому int 3
відношенні
photo Картинка до проекту image -
state_id Ідентифікатор стану autoincrement 10
author_id Ідентифікатор автора проекту autoincrement 10
Відношення «Project» може містити такі атрибути: назва проекту, дата
створення проекту, кількість переглядів проекту користувачами, опис проекту,
картинка до проекту, виконання проекту у деякому відсотковому відношенні,
ідентифікатор стану, ідентифікатор автора проекту. Також вказано тип даних та
розмір поля для кожного з атрибутів. Функціональність відношення полягає у
детальному поясненні кожного з позначень у таблиці структури «Project».
У наступній таблиці 2.2 представлено структуру відношення «Participant». Це
відношення має атрибути: унікальний ідентифікатор учасника, вік учасника гуртка,
ім’я учасника, назва вищого закладу, виконання кожного проекту у відсотковому
відношенні, фото учасника гуртка, ідентифікатор стану.
Таблиця 2.2 – Структура відношення «Participant»
Позначення Назва поля Тип даних Розмір
поля
id Унікальний ідентифікатор учасника autoincrement 6
проекту
40
firstname Ім’я учасника гуртка char 50
age Вік учасника гуртка int 2
university Назва вищого навчального закладу char 25
description Характеристика учасника гуртка char 850
status Виконання проекту у відсотковому int 3
відношенні
photo Фото учасника гуртка image -
role_id Ідентифікатор стану autoincrement 10
Таблиця 2.3 – Структура відношення «Performer»
Позначення Назва поля Тип даних Розмір
поля
id Унікальний ідентифікатор autoincrement 6
виконавця
participant_id Унікальний ідентифікатор учасника autoincrement 5
project_id Унікальний ідентифікатор проекту autoincrement 9
Таблиця 2.4 – Структура відношення «State»
Позначення Назва поля Тип даних Розмір поля
id Унікальний ідентифікатор стану autoincrement 5
deadline Термін виконання проекту int 8
stage Етап виконання проекту char 15
Таблиця 2.5 – Структура відношення «Role»
Позначення Назва поля Тип даних Розмір поля
id Унікальний ідентифікатор учасника autoincrement 6
role Роль учасника гуртка char 60
year Рік вступу учасника до гуртка int 4
participant_id Ідентифікатор учасника autoincrement 10
author_id Ідентифікатор автора autoincrement 10
Таблиця 2.6 – Структура відношення «News»
Позначення Назва поля Тип даних Розмір поля
41
id Унікальний ідентифікатор новин autoincrement 7
name Назва новини char 30
date Дата публікування новини int 8
photo Картинка до новини image -
text Текст новини char 100
topicality Актуальність новини char 15
news_id Ідентифікатор новини autoincrement 9
author_id Ідентифікатор автора autoincrement 9
Таблиця 2.7 – Структура відношення «Admin»
Позначення Назва поля Тип даних Розмір
поля
id Унікальний ідентифікатор autoincrement 5
адміністратора
login Вхід до сайту char 8
password Пароль для входу int 10
admin_id Ідентифікатор адміністратора autoincrement 6
Отже, база даних нашого сайту складається з описаних сутностей, які тісно
пов'язані між собою та виконують різні функції при користуванні сайтом наукового
студентського гуртка «Проблеми STEM-освіти».
Висновки до розділу 2
У цьому розділі було проведено аналіз вимог до створюваного web-сайту
наукового студентського гуртка. У результаті роботи було сформовано
функціональні вимоги до роботи web-сайту у вигляді діаграм варіантів їх
використання. Також було створено ієрархічну структуру web-сайту як для
користувачів, так і для адміністратора системи. Для повної візуалізації базових
функціональних вимог було спроектовано ескізи основних сторінок web-сайту.
База даних є важливою складовою практично будь-якої системи, тому у
цьому розділі було спроектовано структуру бази даних web-сайту наукового
студентського гуртка, а також детально описано кожне реляційне відношення через
ER-діаграми.
42
3. WEB-САЙТ НАУКОВОГО СТУДЕНТСЬКОГО ГУРТКА
«ПРОБЛЕМИ STEM-ОСВІТИ»
3.1 Основні сценарії роботи web-сайту наукового студентського гуртка
Для створення web-сайту наукового гуртка для студентів кафедри необхідно
розробити два основних модулі:
Модуль адміністратора
Модуль користувача
Модуль адміністратора повинен забезпечувати можливість оновлення,
видалення та редагування інформації, яка розміщена на web-сайті наукового
студентського гуртка. Також цей модуль має надати адміністратору можливість
додавати нову інформацію на web-сайт наукового гуртка студентів кафедри.
Модуль користувача повинен забезпечити можливість перегляду всієї
необхідної інформації про гурток, його учасників, готові проекти, а також чату та
контактів адміністратора web-сайту. Цей модуль дозволяє користувачеві web-сайту
отримати повну інформацію про науковий гурток для студентів з проблем STEM-
освіти, а також ознайомитися з тематикою навчання та результатами діяльності
гуртка. Також він повинен надати авторизованому користувачу доступ до всієї
інформації про гурток, активних учасників та наукові проекти гуртка.
На діаграмі активності буде показано послідовність дій та можливі переходи
від однієї діяльності до наступної. Візуалізацію реалізації функцій web-сайту
наукового студентського гуртка можна здійснити за допомогою діаграми
активності, яка дозволяє описати послідовність основних можливостей web-сайту
та продемонструвати основні алгоритми виконання операцій. Для адміністратора
результати активності показано на рисунку 3.1.
43
Рисунок 3.1 – Діаграма активності можливого варіанту для використання
«Авторизація» («для адміністратора»)
На рисунку 3.1 показано процес авторизованого входу адміністратора до
інформаційного web-сайту наукового студентського гуртка. Адміністратор має
можливість переглядати всі сторінки, розміщені на сайті. Крім того, адміністратору
надано можливість видаляти, оновлювати та редагувати сторінки, а також додавати
нові матеріали на web-сайт.
На діаграмі сторінки "Інформація про гурток" представлено послідовність
переходів по web-сайту для користувача. Для варіанту використання "Додати
проект" вигляд діаграми активності наведено на рисунку 3.2.
44
Рисунок 3.2 – Діаграма активності варіантів використання на сайті сторінки
«Додати проект» (для адміністратора)
З рисунку 3.2 видно, що для реалізації процесу перегляду інформаційної
сторінки web-сайту "Актуальні проекти" адміністратор має можливість додавати
нові проекти, а також редагувати та видаляти їх за необхідності. При додаванні
проекту адміністратор повинен вказати назву проекту, додати фото, вказати
відсоток виконання проекту, визначити результат проекту (пристрій чи програма),
перелічити виконавців проекту та надати опис роботи над проектом. Після
додавання проекту адміністратор може повернутися на головну сторінку сайту.
Ще одним важливим процесом системи є пошуковий модуль, який можуть
використовувати як користувачі, так і адміністратори. Діаграма активності для
пошуку інформації в системі (для користувача) показана на рисунку 3.3.
45
Рисунок 3.3 – Діаграма активності варіанту використання «Пошук» (для
користувача)
На рисунку 3.3 показано процес виконання пошукового запиту.
Завантаживши сторінку "Пошук", користувач повинен ввести свій запит у
відповідне поле. Після введення запиту система проводить пошук і виводить
знайдену інформацію, що відповідає запиту. Користувач також має можливість
повернутися на головну сторінку web-сайту.
Ще одним важливим процесом системи є ознайомлення користувача з
повною інформацією про гурток. Діаграма активності для ознайомлення з
інформацією про гурток (для користувача) представлена на рисунку 3.4.
46
Рисунок 3.4 – Діаграма активності для використання «Переглянути інформацію
про студентський гурток»(для користувача)
На рисунку 3.4 показано реалізацію можливості перегляду сторінки web-
сайту "Інформація про студентський гурток". Користувач, перейшовши на головну
сторінку web-сайту наукового студентського гуртка, повинен вибрати пункт
"Інформація про гурток" з навігаційного меню, щоб перейти на відповідну
сторінку.
Одним з основних процесів системи є перегляд готових проектів, який
можуть здійснювати як користувач, так і адміністратор. Діаграма активності для
перегляду інформації про готові проекти в цій системі (для користувача)
продемонстрована на рисунку 3.5.
47
Рисунок 3.5 – Діаграма активності використання вкладки «Переглянути
проект» (для користувача)
На рисунку 3.5 показано процес перегляду проектів. Користувач повинен
спочатку завантажити домашню сторінку цього web-сайту. Потім, через головне
меню сайту, перейти на сторінку "Актуальні проекти". Далі користувачу необхідно
натиснути на обране ним фото проекту, щоб потрапити на розширений опис
обраної роботи наукового проекту. Ознайомившись із необхідною інформацією,
користувач може легко повернутися на головну сторінку даного web-сайту.
Одним з основних процесів цієї системи є надсилання коротких повідомлень
та спілкування з аудиторією наукового студентського гуртка для його учасників.
Діаграма активності для надсилання коротких повідомлень і обміну цікавою
інформацією між учасниками наукового студентського гуртка (для користувача)
зображена на наступному рисунку 3.6.
48
Рисунок 3.6 – Діаграма активності для використання «Надіслати
повідомлення» (використання для користувача)
Реалізацію процесу надсилання та отримання повідомлень у чаті
продемонстровано на рисунку 3.6. Спершу користувач повинен завантажити
сторінку чату. Далі необхідно пройти реєстрацію, тобто вказати ім’я та електронну
пошту. Якщо дані введено правильно, користувач може надіслати повідомлення.
Успішно надіслане повідомлення відображається у чаті.
Одним із найважливіших процесів роботи та функціональності даного сайту
є подання заявки на участь, яку користувач повинен здійснити для доступу до web-
сайту. Діаграма активності для варіанту використання "Подати заявку" на участь у
науковому студентському гуртку кафедри проілюстрована на рисунку 3.7.
49
Рисунок 3.7 – Діаграма активності для варіанту використання «Подати
заявку» (для користувача)
На рисунку 3.7 представлено реалізацію процесу перегляду сторінки web-
сайту гуртка «Інформація про учасників». Для початку користувач повинен
завантажити сторінку, далі натиснути кнопку «Подати заявку». Для заповнення
заявки користувачу необхідно перейти на сторінку з анкетою. В анкеті слід вказати:
ім’я, e-mail, виконані проекти та відповісти на запитання: «Чому бажаєте
приєднатися до нашого гуртка?», а також вказати заклад вищої освіти та натиснути
кнопку «Подати заявку».
3.2 Графічний інтерфейс web-сайту наукового студентського гуртка
На головній сторінці сайту наукового студентського гуртка зображено меню,
назву, логотип, пошук, карта місця розташування та календар. Щоб перейти на
іншу сторінку сайту, необхідно навести курсор на одну з необхідних сторінок
меню. Карта дозволяє переглянути точне місце розташування гуртка для
50
полегшення його знаходження, а календар дає можливість переглядати дату. На
наступному рисунку 3.8 подано загальний вигляд головної сторінки сайту.
Рисунок 3.8 – Загальний вигляд «домашньої» головної сторінки сайту
«Проблеми STEM-освіти»
З головної сторінки користувач може перейти на будь-яку з зазначених у
меню сторінок. Меню містить такі розділи сайту наукового гуртка: «Про гурток»,
«Інформація про учасників», «Новини», «Актуальні проекти», а також «Контакти»
та «Чат». На рисунку 3.9 представлено приблизний вигляд меню web-сайту
наукового гуртка.
51
Рисунок 3.9 – Загальний вигляд Futer основного меню web-сайту
Також з головної сторінки можна перейти до розділу «Пошук». Ця функція
дозволяє знайти необхідну інформацію або швидко перейти на відповідну сторінку,
де розміщено потрібний контент. На рисунку 3.9 представлено поле для «Пошуку»
на сайті.
Рисунок 3.10 – Поле «Пошуку» на сайті
На рисунку 3.11 показано загальний вигляд сторінки «Про гурток» на цьому
web-сайті. Ця сторінка надає користувачу інформацію про науковий студентський
гурток «Проблеми STEM-освіти», історію його створення та активних учасників
гуртка. На рисунку 3.10 також продемонстровано загальний вигляд сторінки «Про
гурток». Крім того, на сторінці є вікно «Чату», яке дозволяє користувачу
спілкуватися з учасниками гуртка.
Рисунок 3.11 – Загальний вигляд сторінки «Про гурток» web-сайту
На рисунку 3.12 показано загальний вигляд сторінки «Новини» web-сайту
гуртка. За допомогою цієї сторінки користувач може переглядати всі найсвіжіші
новини з комп'ютерних інформаційних технологій. Навівши мишкою на поле
«Дізнатися більше», користувач зможе перейти на сторінку з більш детальною
інформацією про новини. Вікно «Чату» на цій сторінці дозволяє користувачу
спілкуватися з учасниками гуртка.
52
Рисунок 3.12 – Загальний вигляд сторінки «Новини» web-сайту гуртка
На рисунку 3.13 показано загальний вигляд сторінки «Інформація про
учасників» web-сайту наукового студентського гуртка. На цій сторінці користувач
може знайти інформацію про учасників гуртка, подати заявку на вступ,
приєднатися до гуртка, а також ознайомитися з випускниками гуртка.
Рисунок 3.13 –Загальний вигляд сторінки web-сайту «Інформація про
учасників»
На рисунку 3.14 зображено загальний вигляд створеної форми заявки на
участь у гуртку. Тут розташоване меню, яке дозволяє користувачу переходити між
різними сторінками. Також є вікно «Чат», що надає можливість спілкуватися з
учасниками гуртка.
53
Рисунок 3.14 – Загальний вигляд форми участі «Подати заявку»
На рисунку 3.15 показано загальний вигляд сторінки web-сайту, яка містить
інформацію про найкращих науковців гуртка, таких як: Коваленко Марія, Петренко
Олександр, Іванченко Ольга, Левченко Максим, Шевченко Анна.
Рисунок 3.15 – Загальний вигляд сторінки «Кращі науковці нашого гуртка»
На рисунку 3.16 показано загальний вигляд сторінки web-сайту всіх
учасників гуртка. Під кожною фотографією наведена інформація про учасників
гуртка: вік, заклад вищої освіти та назви проектів, над якими вони працювали.
54
Рисунок 3.16 – Загальний вигляд сторінки «Учасники» web-сайту гуртка
На рисунку 3.17 представлено загальний вигляд сторінок з усіма актуальними
проектами. Наприкінці сторінки знаходиться кнопка «Готові наукові проекти», яка
дозволяє переглянути проекти учасників наукового студентського гуртка.
Рисунок 3.17 – Загальний вигляд «Актуальні ІТ проекти»
55
На рисунку 3.18 показано загальний вигляд сторінки одного з проектів
«Keyboard for iOS». Тут міститься інформація про проект, його виконавців і
відсотки виконання, а також є кнопка повернення, що дозволяє повернутися до
списку проектів.
Рисунок 3.18 – Загальний вигляд сторінки ще одного з проектів
Keyboard for iOS
На рисунку 3.18 показано загальний вигляд сторінки одного з проектів
«Keyboard for iOS». Тут міститься інформація про проект, його виконавців і
відсотки виконання, а також є кнопка повернення, що дозволяє повернутися до
списку проектів.
Рисунок 3.19 – Загальний вигляд сторінки ще одного проекту FlawLess App
56
ПЗ
На рисунку 3.20 представлено загальний вигляд сторінки проекту «Бібліотека
macOS додатків SETApp». Тут міститься інформація про проект, його виконавців і
відсотки виконання. Також є кнопка повернення, що дозволяє користувачу
повернутися до списку інших проектів.
Рисунок 3.20 – Загальний вигляд сторінки проєкту «бібліотека macOS
додатків SET App»
На рисунку 3.21 представлено загальний вигляд сторінки проєкту Grammarly.
На цій сторінці міститься коротка інформація про проєкт, список виконавців та
відсоток його виконання. Також передбачена кнопка повернення, яка дозволяє
користувачу перейти до перегляду інших проєктів.
57
Рисунок 3.21 – Загальний вигляд проекту Grammarly ПЗ
На рисунку 3.22 показано загальний вигляд сторінки «Контакти» web-сайту.
На цій сторінці розміщена розширена інформація про адміністратора сайту
наукового студентського гуртка «Проблеми STEM-освіти»: карта з адресою,
телефон, e-mail, а також можливість написати запитання на електронну пошту
адміністратора сайту.
Рисунок 3.22 – Загальний вигляд сторінки web-сайту «Контакти»
На рисунку 3.23 представлено можливий вигляд сторінки входу для
користувачів. Користувач може ввести свою електронну пошту та пароль або
здійснити автоматичний вхід через Facebook або Google+.
58
Рисунок 3.23 – Загальний вигляд реєстраційної форми для входу на сайт
користувача.
На рисунку 3.24 представлено загальний вигляд «Чату», за допомогою якого
користувач може спілкуватися з учасниками гуртка.
Рисунок 3.24 –Загальний вигляд сторінки «Чат» (буде реалізований)
59
3.3 Тестування web-сайту наукового студентського гуртка «Проблеми
STEM-освіти»
Під час розробки web-сайту наукового студентського гуртка було проведено
системне тестування, тестування графічного інтерфейсу та функціональне
тестування. Було налаштовано базу даних сайту та перевірено її коректне
функціонування.
Основна частина сайту була протестована за допомогою CMS. Розподіл
тестових випадків функціонального тестування для різних варіантів використання
системи подано в таблиці 3.1.
Таблиця 3.1 – Розподіл тестових випадків функціонального тестування за
варіантами використання системи.
Варіанти використання Тестові дані Тестові випадки
Авторизуватися 10 9
Переглянути інформацію про гурток 11 12
Читати інформацію про учасників 14 12
Додати новий проект 15 13
Редагувати проект 16 15
Видалити проект 3 3
Переглянути проект 16 16
Додати учасника 10 10
Видалити учасника 5 5
Переглянути новину 15 14
Додати новину 4 4
Редагувати новину 5 5
Видалити новину 3 3
Переглянути контакти 1 1
Переглянути історію чату 3 3
Надіслати повідомлення 10 11
Видалити повідомлення 9 9
60
Пошук 10 11
Під час тестування було перевірено правильність функціонування всіх
складових web-сайту. Тестування графічного інтерфейсу проводилося вручну,
перевірялися коректність розташування елементів на сторінках та їх
функціональність.
Крім того, було проведено функціональне тестування системи (див. табл.
3.1), виявлені під час тестування дефекти були успішно усунуті. В результаті можна
стверджувати, що розроблений web-сайт наукового гуртка функціонує коректно та
реалізує весь запланований функціонал, описаний у розділі 2 цієї випускної роботи.
Висновки до розділу 3
У цьому розділі було розроблено відповідні діаграми активності для
можливих варіантів використання, які допомогли визначити основні сценарії
взаємодії користувача із сайтом наукового студентського гуртка. Ці діаграми стали
основою для подальшого проектування та реалізації функціональності сайту.
Сценарії використання сайту були детально опрацьовані, що дозволило
забезпечити інтуїтивно зрозумілу навігацію та зручний інтерфейс для
користувачів. Кожен сценарій був перевірений на предмет можливих помилок та
недоліків, що забезпечило високу якість та надійність роботи сайту.
Також було успішно проведено тестування запланованої функціональності
сайту, яке включало в себе як ручні, так і автоматизовані тести. Це дозволило
виявити та виправити потенційні проблеми на ранніх етапах розробки. Тестування
охоплювало всі ключові аспекти роботи сайту, включаючи реєстрацію та
авторизацію користувачів, перегляд новин та проектів, спілкування через чат, а
також роботу з контактною інформацією та іншими розділами сайту.
Перевірка коректності роботи сайту показала, що всі заплановані функції
виконуються належним чином, а користувачі можуть безперешкодно взаємодіяти з
сайтом та отримувати необхідну інформацію. Таким чином, розроблений сайт
відповідає всім вимогам та цілям, поставленим на початку роботи, і готовий до
впровадження та подальшого використання в науковому студентському гуртку.
61
Завдяки проведеній роботі вдалося створити функціональний та зручний веб-
ресурс, який допоможе студентам та викладачам в організації та підтримці
діяльності наукового гуртка, сприятиме обміну інформацією та досвідом, а також
підвищить загальний рівень зацікавленості та залученості студентів у наукову
діяльність.
62
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході виконання
бакалаврської кваліфікаційної роботи на тему «ІНФОРМАЦІЙНИЙ WEB-САЙТ
СТУДЕНТСЬКОГО НАУКОВОГО ГУРТКА З ПРОБЛЕМ STEM-ОСВІТИ» було
успішно реалізовано основну мету – створено ефективний інформаційний веб-сайт
для наукового гуртка кафедри, який займається проблемами STEM-освіти.
Під час виконання роботи було проведено аналіз організаційної діяльності
наукового гуртка, досліджено існуючі веб-ресурси аналогічних наукових
об'єднань, сформовано та впроваджено функціональні та нефункціональні вимоги
до веб-сайту. Було спроектовано структуру сайту та бази даних, а також створено
макети основних сторінок.
Веб-сайт наукового гуртка дозволяє популяризувати STEM-освіту серед
студентів та інших зацікавлених осіб, забезпечує зручний доступ до актуальної
інформації про діяльність гуртка, його учасників, новини та проєкти. Крім того,
сайт надає можливість залучати нових учасників, організовувати семінари та
«мозкові штурми», що сприяє розвитку професійних навичок та підвищенню рівня
спеціалізації студентів.
Загалом, створений веб-сайт відповідає сучасним вимогам та стандартам,
забезпечуючи зручний і ефективний інструмент для комунікації та організації
роботи наукового гуртка з проблем STEM-освіти.
Отже, під час виконання випускної роботи бакалавра було розв’язано такі
задачі:
Проведено аналіз об’єкта дослідження та предметної області, на основі
результатів аналізу сайтів-аналогів наукових студентських груп, що дозволило
визначити основні напрямки та структурні складові сайтів даного типу.
Досліджено основні функціональні і нефункціональні вимоги до
розробки такого сайту, на основі аналізу структури ядра науково-дослідних сайтів.
63
Сформовано специфікацію необхідних вимог до сайтів наукових
гуртків з залученням студентів, що дозволило розробити потрібну структуру веб-
сайту на прикладі наукового гуртка «Проблеми STEM-освіти».
Спроектовано основні можливі сценарії роботи розроблюваного веб-
сайту гуртка у вигляді діаграм активності користувачів системи.
Спроектовано структуру веб-сайту наукового гуртка «Проблеми
STEM-освіти», що надало хорошу можливість реалізувати програмні модулі веб-
сайту гуртка.
Реалізовано веб-сайт наукового студентського гуртка «Проблеми
STEM-освіти» та проведено його тестування, а також порівняння цього веб-сайту з
аналогічними сайтами.
64
СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ ТА ПОСИЛАНЬ
1. Інтернет – 2023. URL: https://searchwindevelopment.techtarget.com - (дата
звернення: 01.05.2024).
2. Переваги та недоліки інтернету – 2023. URL:
https://www.importantindia.com - (дата звернення: 01.05.2024).
3. Основні плюси і мінуси інтернету. – 2023. URL: http://poradumo.com.ua
- (дата звернення: 01.05.2024).
4. Ашманов І. Оптимізація та розвиток сайтів в пошукових системах:
навч. посіб. для студ. ВНЗ / І. С. Ашманов, А. І. Іванов. – Вид. 4-те. – К. : Пітер,
2023. – 464с.
5. Класифікація web-сайтів – 2023. URL:
https://sites.google.com/site/yaremusinform/home - (дата звернення: 01.05.2024).
6. Web-сайт – 2023. URL: http://www.webtec.com.ua – Web-сайт:
визначення й застосування.
7. Класифікація web-ресурсів – 2023. URL:
https://sites.google.com/site/yaremusinform/home - (дата звернення: 01.05.2024).
8. Web-ресурси – 2023. URL: https://msdn.microsoft.com - (дата звернення:
01.05.2024).
9. Людмила Чистякова. Особливості організації гуртка: наукові записки:
стаття. / Людмила Чистякова. – К. : Вид.група «Основа», 2023. - 254 с.
10. Гуртки Проблеми STEM-освіти – 2023. URL:
https://sites.google.com/site/yaremusinform/home - (дата звернення: 01.05.2024).
11. Гурток програмування «Кодфорс» – 2023. URL: http://school16.zp.ua -
(дата звернення: 01.05.2024).
12. Гурток – 2023. URL: http://zakon2.rada.gov.ua – (дата звернення:
01.05.2024).
13. Н. Журавська. Науковий гурток: наукові записки: стаття. / Н.
Журавська, Л. Чистякова. – К. : Вид.група «Гурток», 2023. - 2 с.
14. Шрамко Олексій. Гурток як форма соціалізації особистості: наукові
записки: стаття. / Шрамко Олексій. – К. : Вид.група «Гурток», 2023. - 15 с.
65
15. JavaScript фреймворки – 2023. URL: https://proglib.io - (дата звернення:
01.05.2024).
16. CMS (система управління вмістом) – 2023. URL: https://proglib.io - (дата
звернення: 01.05.2024).
17. CMS, . – 2023. URL: http://www.ratingruneta.io - (дата звернення:
01.05.2024).
18. Види CMS – 2023. URL: https://habr.com – (дата звернення: 01.05.2024).
19. Веб-програмування. CMS, . – 2023. URL: http://webstudio2u.net – (дата
звернення: 01.05.2024).
20. Програми для створення сайтів – 2023. URL:
http://webstudio2u.net/ua/programming/188-html-redactor.html – (дата звернення:
01.05.2024).
21. Фреймворки в web-розробці – 2023. URL: https://web-creator.com – (дата
звернення: 01.05.2024).
22. Фреймворки – 2023. URL: https://habr.com/post/253297/ – (дата
звернення: 01.05.2024).
23. Положення про студентські наукові гуртки – 2023. URL:
http://chdtu.edu.ua/page=ua/1361polojennia – (дата звернення: 01.05.2024).
24. Функції гуртка – 2023. URL: https://blog-sumchenko-oksani-mikolajivni-
zdvr-divichkivskenvo4.webnode.com.ua/posадова-instruktsiya-kerivnika-gurtka/ –
(дата звернення: 01.05.2024).
25. Кудлай О. В. Гурток як форма організації: навч. посіб. для студ. ВНЗ /
О. В. Кудлай, Н. М. Носовець. – Вид. 3-тє. – К. : Львів, 2023. – 177 с.
26. Гурток як синтетична форма – 2023. URL: https://blog-sumchenko-zdvr-
divichkivskenvo4.webnode.com.ua/posадова-instruktsiya-kerivника-gurtка/ – (дата
звернення: 01.05.2024).
27. Гурток. Науковий гурток – 2023. URL: https://zu.edu.ua – Гурток. (дата
звернення: 01.05.2024).
28. Гурток. Науковий гурток – 2010. URL: https://zu.edu.ua– Гурток. (дата
звернення: 24.03.24).
66
ДОДАТОК А
«Затверджую»
Завідувач кафедри КН та СА
проф. Триус Ю.В.
_________________________
«____»______________2024 р.
ІНФОРМАЦІЙНИЙ WEB-САЙТ СТУДЕНТСЬКОГО НАУКОВОГО
ГУРТКА З ПРОБЛЕМ STEM-ОСВІТИ
Специфікація
482.ЧДТУ. 40090-01
Листів 2
Розробник ____________________ Левченко В. А.
Керівник ____________________ Андрієнко В. О.
Черкаси – 2024
67
482.ЧДТУ. 40090-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 40090-01 34 01 Графічний інтерфейс
482.ЧДТУ. 40090-01 12 01 Текст програми
68
ДОДАТОК Б
ІНФОРМАЦІЙНИЙ WEB-САЙТ СТУДЕНТСЬКОГО НАУКОВОГО
ГУРТКА З ПРОБЛЕМ STEM-ОСВІТИ
ГРАФІЧНИЙ ІНТЕРФЕЙС НАУКОВОГО СТУДЕНТСЬКОГО
ГУРТКА
482.ЧДТУ. 40090-01 34 01
Листів 11
Розробник ____________________ Левченко В.А.
Черкаси – 2024
69
Графічний інтерфейс наукового студентського гуртка
На головній сторінці цього сайту наукового гуртка студентів кафедри
відображено меню, назву, логотип, функцію пошуку, карту місця розташування та
календар. Щоб перейти на іншу сторінку сайту, необхідно навести курсор миші на
одну з обраних сторінок меню. Карта дозволяє переглянути точне місце
розташування гуртка, що спрощує його пошук, а календар дає можливість
переглядати дати. На наступному рисунку Б.1 показано загальний вигляд
домашньої сторінки сайту.
70
Рисунок Б.1 – Загальний вигляд головної, або ж «домашньої» сторінки сайту
«Проблеми STEM-освіти»
З головної сторінки користувач може перейти на будь-яку з сторінок,
зазначених у меню. Меню включає такі розділи сайту наукового гуртка: «Про
гурток», «Інформація про учасників», «Новини», «Актуальні проекти», а також
«Контакти» та «Чат». На рисунку Б.2 показано приблизний вигляд меню веб-сайту
наукового гуртка.
Рисунок Б.2 – Загальний вигляд основного меню web-сайту
71
Також з головної сторінки можна перейти до розділу «Пошук». Функція
«Пошук» дозволяє знайти потрібну інформацію або одразу перейти до сторінки, де
ця інформація розміщена. На рисунку Б.3 показано поле для пошуку на сайті.
Рисунок Б.3 – Поле для «Пошуку» сайту
На рисунку Б.4 показано загальний вигляд сторінки «Про гурток» даного веб-
сайту. Ця сторінка надає інформацію про науковий студентський гурток
«Проблеми STEM-освіти», його історію та активних учасників. Вікно «Чату»
дозволяє користувачам спілкуватися з учасниками гуртка. На рисунку Б.4
представлено загальний вигляд сторінки «Про гурток» веб-сайту.
Рисунок Б.4 – Загальний вигляд сторінки «Про гурток» web-сайту
На рисунку Б.5 показано загальний вигляд сторінки «Новини» веб-сайту
гуртка. Завдяки цій сторінці користувач може переглядати всі найновіші новини з
комп'ютерних інформаційних технологій. Навівши мишку на поле «Дізнатися
більше», користувач зможе перейти на сторінку з більш детальною інформацією.
Вікно «Чату» дозволяє користувачам спілкуватися з учасниками гуртка.
72
Рисунок Б.5 – Загальний вигляд сторінки про «Новини» web-сайту гуртка
На рисунку Б.6 показано загальний вигляд сторінки «Інформація про
учасників» веб-сайту наукового студентського гуртка з проблем STEM-освіти. На
цій сторінці користувач може знайти інформацію про учасників гуртка, подати
заявку на участь та приєднатися до гуртка, а також ознайомитися з випускниками.
Рисунок Б.6 –Загальний вигляд сторінки майбутнього web-сайту
«Інформація про учасників»
На рисунку Б.7 зображено загальний вигляд форми заявки на участь у гуртку.
Меню дозволяє користувачу перейти з будь-якої сторінки на іншу. Також присутнє
вікно «Чату», яке дозволяє спілкуватися з учасниками гуртка.
73
Рисунок Б.7 – Загальний вигляд форми щоб «Подати заявку»
На рисунку Б.8 показано загальний вигляд сторінки веб-сайту, де
представлені найкращі науковці гуртка, такі як: Коваленко Сергій, Левченко
Олена, Мельник Ірина, Петров В’ячеслав, Сидоренко Ігор.
Рисунок Б.8 – Загальний вигляд сторінки «Кращі студенти науковці гуртка»
нашого майбутнього web-сайту
На рисунку Б.9 показано загальний вигляд сторінки веб-сайту, де
представлені всі учасники гуртка. Під кожною фотографією надана інформація про
учасників: вік, заклад вищої освіти та назви проектів, над якими вони працювали.
74
Рисунок Б.9 – Загальний вигляд для сторінки «Кращі учасники» web-сайту
наукового гуртка
На рисунку Б.10 зображено загальний вигляд сторінки з усіма актуальними
проектами. В кінці сторінки розміщена кнопка «Готові актуальні наукові проекти»,
яка дозволяє переглянути проекти учасників наукового студентського гуртка.
75
Рисунок Б.10 – Загальний вигляд для сторінки «Актуальні проекти»
На рисунку Б.11 зображено загальний вигляд сторінки одного з проектів
«STEM Robotics». На сторінці міститься інформація про проект, його виконавців та
відсоток виконання, а також є кнопка повернення, яка дозволяє повернутися до
списку проектів.
76
Рисунок Б.11 – Загальний вигляд сторінки ще одного прикладу проекту
Keyboard for iOS
На рисунку Б.12 зображено загальний вигляд сторінки проекту "AI Tutor
App". На цій сторінці представлена інформація про проект, його виконавців та
відсоток виконання, а також є кнопка повернення, яка дозволяє повернутися до
списку проектів.
Рисунок Б.12 – Загальний вигляд для сторінки ще одного з проектів
FlawLess App
На рисунку Б.13 зображено загальний вигляд сторінки проекту «бібліотека
додатків для macOS - SETApp». На сторінці представлена інформація про проект,
77
його виконавців та відсоток виконання, а також є кнопка повернення, яка дозволяє
користувачу повернутися до інших проектів.
Рисунок Б.13 – Загальний вигляд сторінки наступного проекту «бібліотека
macOS та додатків SET App»
На рисунку Б.14 представлено загальний вигляд сторінки проекту Grammarly.
На цій сторінці міститься коротка інформація про проект, виконавці та відсоток
завершення проекту. Також є кнопка повернення, яка дозволяє користувачу
перейти до інших проектів.
78
Рисунок Б.14 – Загальний вигляд для сторінки проекту Grammarly ПЗ
На рисунку Б.15 показано загальний вигляд сторінки «Контакти» веб-сайту.
На цій сторінці наведена детальна інформація про адміністратора сайту наукового
студентського гуртка «Проблеми STEM-освіти»: карта з адресою, телефон,
електронна пошта, а також можливість надіслати запитання на електронну адресу
адміністратора.
Рисунок Б.15 – Загальний вигляд для сторінки web-сайту «Контакти»
На рисунку Б.16 зображено можливий інтерфейс входу для користувачів, де
можна увійти, вказавши електронну пошту та пароль, або скористатися
автоматичним входом через Facebook чи Google+.
79
Рисунок Б.16 – Загальний вигляд для реєстраційної підписки та входу на сайт для
нового користувача
На рисунку Б.17 зображено загальний вигляд «Чату», який дозволяє
користувачам спілкуватися з учасниками гуртка.
Рисунок Б.17 –Загальний вигляд нової сторінки «Чат» (можливо буде
реалізований)
80
У додатку Б представлені відповідні діаграми активності для всіх можливих
варіантів їх використання, що дозволяє детально розглянути кожен етап взаємодії
користувача із системою. Ці діаграми включають як основні, так і додаткові
сценарії, що охоплюють усі аспекти функціонування веб-сайту. Також у додатку
наведено сценарії роботи, які детально описують послідовність дій користувача під
час взаємодії з веб-сайтом, та макети майбутнього інформаційного веб-сайту
наукового студентського гуртка кафедри. Макети відображають основні сторінки
сайту, їх структуру та розташування елементів, що сприяє створенню інтуїтивно
зрозумілого та зручного інтерфейсу.
Крім того, було успішно проведено тестування запланованої
функціональності сайту. Тестування включало як функціональні, так і
нефункціональні аспекти роботи сайту, такі як швидкість завантаження сторінок,
стійкість до навантажень, безпека даних та зручність користування. Для цього
використовувалися як ручні, так і автоматизовані методи тестування, що дозволило
виявити та усунути можливі помилки та недоліки.
Перевірка коректності роботи сайту показала, що всі заплановані функції
виконуються належним чином. Сайт працює стабільно, забезпечуючи
користувачам зручний доступ до актуальної інформації про діяльність гуртка, його
учасників, новини та проєкти. Завдяки проведеному тестуванню вдалося досягти
високого рівня надійності та ефективності роботи сайту, що підтверджує його
готовність до впровадження та використання.
81
ДОДАТОК В
ІНФОРМАЦІЙНИЙ WEB-САЙТ СТУДЕНТСЬКОГО НАУКОВОГО
ГУРТКА З ПРОБЛЕМ STEM-ОСВІТИ
Текст програми
482.ЧДТУ. 40090-01 12 01
Листів 8
Розробник ____________________ Левченко В.А.
Черкаси – 2024
82
ДОДАТОК В. ПРОГРАМНА РЕАЛІЗАЦІЯ
1. Фрагмент коду з файлу AppComponent.vue: відповідає за відображення
базової структури додатку і підключення всіх необхідних компонентів.
<template>
<div id="wrapper">
<header-component></header-component>
<div class="page elevation-3">
<menu-component></menu-component>
<div class="pb-4">
<router-view></router-view>
</div>
</div>
<footer-component></footer-component>
</div>
</template>
<script>
import MenuComponent from './MenuComponent.vue';
import HeaderComponent from './HeaderComponent.vue';
import FooterComponent from './FooterComponent.vue';
export default {
name: 'app',
components: {
MenuComponent,
HeaderComponent,
FooterComponent,
},
};
</script>
<style lang="css">
.page {
width: 100%;
float: left;
padding-bottom: 20px;
border: 5px;
background: #1b1b1b;
color: #fff;
}
83
.page .title-block {
font-size: 200%;
padding: 10px 25px;
text-transform: uppercase;
font-weight: bold;
}
</style>
2. Фрагмент коду з файлу HomeComponent.vue: відповідає за відображення
головної сторінки сайту наукового гуртка з проблем STEM-освіти.
<template>
<div>
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
class="slider"
>
<v-carousel-item src="/img/slide-1.jpg"></v-carousel-item>
<v-carousel-item src="/img/slide-2.jpg"></v-carousel-item>
<v-carousel-item src="/img/slide-3.jpg"></v-carousel-item>
</v-carousel>
<v-row>
<v-col class="about pa-3" md="4">
<div class="title-block">Про нас</div>
<p>{{ about }}</p>
</v-col>
<v-col md="3">
<div class="title-block">Новини</div>
<div class="news" v-for="item in news" :key="item.id">
<v-img :src="item.photo"></v-img>
<p>{{ item.text.slice(0, 200) }}...</p>
<a :href="'/news/'+item.id">Читати далі</a>
</div>
</v-col>
<v-col md="5">
<div class="title-block">Розклад занять гуртка</div>
<v-simple-table dark class="schedule">
<template v-slot:default>
84
<thead>
<tr>
<th class="text-left">ПІБ</th>
<th class="text-left">Мета заняття</th>
<th class="text-left">Час</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in schedule" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.purpose }}</td>
<td>{{ item.optional_time }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
name: 'home',
data: () => ({
schedule: [],
about: '',
news: [],
}),
created() {
this.getSchedule();
this.getInfo();
this.getNews();
},
methods: {
getSchedule() {
axios.get('/api/schedule').then((response) => {
this.schedule = response.data;
});
},
getInfo() {
85
axios.get('/api/info').then((response) => {
this.about = response.data[0].value;
});
},
getNews() {
axios.get('/api/news-home').then((response) => {
this.news = response.data;
});
},
},
};
</script>
<style lang="css">
.about p {
padding: 0 25px;
color: #7f7f7f;
white-space: pre-wrap;
}
.news {
padding-bottom: 20px;
border-bottom: 1px solid #000;
}
.news img {
width: 100%;
margin: 25px 15px;
}
.news p {
margin: 15px 0;
color: #7f7f7f;
}
.news a {
background: #2e2d33;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-decoration: none;
86
padding: 10px 20px;
border: 1px solid #000;
}
.news a:hover {
color: #fbef0d;
}
.schedule {
margin: 0 25px;
}
.slider {
width: 100%;
}
</style>
3. Код з файлу ApplicationsController.php: відповідає за прийняття, обробку і
збереження в базу даних заявок на участь у гуртку.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Applications;
class ApplicationsController extends Controller
{
function get() {
$data = Applications::get();
return response()->json($data);
}
function post(Request $request) {
$model = new Applications();
$data = $request->all();
$model->create($data);
return response('ok', 200);
}
function delete($id) {
87
Applications::find($id)->delete();
}
}
4. Код з файлу NewsController.php: відповідає за обробку і збереження новин
у базу даних.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\News;
use App\Models\Comments;
class NewsController extends Controller
{
function get() {
$data = News::get();
return response()->json($data);
}
function getHome() {
$data = News::limit(1)->get();
return response()->json($data);
}
function getId($id) {
$data = News::with('comments')->find($id);
return response()->json($data);
}
function post(Request $request) {
$news = new News();
$data = $request->all();
if ($request['photo']) {
$name = "/img/news/" . uniqid() . '.' . $request['photo']-
>getClientOriginalExtension();
$request['photo']->move(public_path() . "/img/news/", $name);
$data['photo'] = $name;
}
88
$news->create($data);
return response('ok', 200);
}
function edit(Request $request, $id) {
$news = News::find($id);
$data = $request->all();
if (gettype($request['photo']) == "object") {
$name = "/img/news/" . uniqid() . '.' . $request['photo']-
>getClientOriginalExtension();
$request['photo']->move(public_path() . "/img/news/", $name);
$data['photo'] = $name;
} else {
$data['photo'] = $news->photo;
}
$news->update($data);
return response('ok', 200);
}
function delete($id) {
News::find($id)->delete();
}
// comment
function postComments(Request $request) {
$model = new Comments();
$data = $request->all();
$request = $model->create($data);
return response()->json($request);
}
function deleteComment($id) {
Comments::find($id)->delete();
}
}