Проектування і розробка інформаційного web-сайту наукового гуртка кафедри закладу вищої освіти

Баланюк, Денис Олександрович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8841
Title:	Проектування і розробка інформаційного web-сайту наукового гуртка кафедри закладу вищої освіти
Authors:	Андрієнко, Володимир Олександрович Баланюк, Денис Олександрович
Keywords:	WEB-САЙТ;ФУНКЦІОНАЛЬНІ ВИМОГИ;НЕФУНКЦІОНАЛЬНІ ВИМОГИ;ТЕСТУВАННЯ.
Issue Date:	16-Jun-2022
Abstract:	Розробка інформаційного web-сайту для будь-якого наукового гуртка, незалежно від його напрямів діяльності, є досить актуальною задачею, адже завжди розробка інформаційного web-сайту для студентського гуртка дає можливість популяризувати новітні напрями діяльності будь-якого гуртка серед пересічних користувачів Інтернет мережі, можливість залучити нових учасників, відслідковувати перспективу та результативність виконання актуальних, передових проектів гуртка та ін. Метою даної бакалаврської роботи є розробка ефективного інформаційного web-сайту наукового гуртка з застосуванням сучасних інформаційних технологій що є актуальним на сьогодні. Об’єкт дослідження: творча діяльність наукових гуртків. Предмет дослідження: використання сучасних засобів та платформ для проектування та розробки web-сайту наукового гуртка кафедри. Методи дослідження. В роботі застосовувалися: теоретичний метод (аналіз літератури з проблеми дослідження).
URI:	https://er.chdtu.edu.ua/handle/ChSTU/8841
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)
Files in This Item:
File	Description	Size	Format
Пояснювальна записка_Баланюк Денис_КНС-2001_2021-2022.pdf Restricted Access		2.44 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
1 
 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
 
Факультет інформаційних технологій і систем 
 
Кафедра комп’ютерних наук та системного аналізу 
 
 
 
 
 
 
Пояснювальна записка 
до кваліфікаційної роботи 
бакалавра 
(освітньо-кваліфікаційний рівень) 
 
на тему: «Проектування і розробка інформаційного web-сайту наукового 
гуртка кафедри закладу вищої освіти» 
 
 
 
 
 
    Виконав: студент 4 курсу, групи КНС-2001     
                                                              
спеціальності  122 − «Комп’ютерні науки»     
                                                                         (шифр і назва спеціальності) 
  
освітня програма «Комп’ютерні науки та       .  
 
прикладне програмування                                  
                                           (назва освітньої програми) 
 
Баланюк Денис Олександрович   
 
Керівник __________       Андрієнко В.О.        
                                                                          (прізвище та ініціали) 
 
Рецензент _________  Супруненко О.О.           
                                                                              (прізвище та ініціали) 
    
 
 
 
 
 
 
 
Черкаси 2022 рік 
2 
 
Черкаський державний технологічний університет 
Факультет Інформаційних технологій і систем 
Кафедра Комп’ютерних наук та системного аналізу 
Освітній рівень Бакалавр 
Спеціальність 122 – комп’ютерні науки 
 
 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри КН та СА  
_______________ Триус Ю.В. 
«____» _____________ 2022 р. 
 
 
 
ЗАВДАННЯ 
на кваліфікаційну роботу бакалавра студенту 
Баланюку Денису Олександровичу 
(прізвище, ім’я, по батькові) 
1. Тема роботи  Проектування і розробка інформаційного web-сайту 
                                      наукового гуртка кафедри закладу вищої освіти 
 
Керівник роботи     Андрієнко Володимир Олександрович, к.т.н., доцент 
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
затверджені наказом університету від «7» лютого 2022 р. №45/04. 
 
2. Строк подання студентом роботи до 16 червня 2022 року 
3. Вихідні дані до роботи:  
Інформаційний сайт 
Звіт з виробничої практики. 
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити): 
Вступ. 
4.1. Моделі, системні підходи та програмні засоби створення web-сайтів  
4.2. Проектування web-сайту наукового гуртка «програмування» 
4.3. Web-сайт наукового гуртка «програмування» 
Висновки.  
 5. Перелік додатків (з точним зазначенням назв додатків): 
5.1. Додаток А. Специфікація 482.ЧДТУ. 22090-01. 
5 .2. Додаток Б. Текст програми. 
5.3. Додаток В. Інструкція користувача. 
5 .4. Презентація у вигляді 21 слайдів. 
  
3 
 
6. Консультанти розділів роботи 
Прізвище, ініціали та Підпис, дата 
Розділ посада 
завдання видав завдання прийняв 
консультанта 
    
    
 
7. Дата видачі 
завдання 11.01.2022 
  
 
КАЛЕНДАРНИЙ ПЛАН 
Строк 
№ Назва етапів кваліфікаційної роботи 
виконання Примітка 
з/п бакалавра 
етапів роботи 
1 Видача завдання на кваліфікаційну роботу 
до 03.01.2022 Виконано 
бакалавра. 
2 Аналіз літературних джерел, об’єкту та предмету 
до 15.02.2022 Виконано 
дослідження. 
3 Написання теоретичного розділу кваліфікаційної 
до 10.03.2022 Виконано 
роботи бакалавра. 
4 Написання аналітичного розділу (аналіз об’єкту 
до 03.04. 2022 Виконано 
й предмету дослідження). 
5 Написання практичних розділів й висновків по 
до 25.05.2022 Виконано 
роботі. 
6 Передзахист кваліфікаційної роботи бакалавра 
до 26.05.2022 Виконано 
на засіданні випускової кафедри. 
7 Подання роботи завідувачу кафедри. до 16.06. 2022 Виконано 
8 Захист кваліфікаційної роботи бакалавра. 16.06.2022 Виконано 
    
    
 
 
Студент                                   _____________________________     Баланюк Д.О. 
(підпис)                                                                     
Керівник роботи                     ____________________________       Андрієнко В.О. 
                                          (підпис)      
  
 
 
3 
 
РЕФЕРАТ 
Кваліфікаційна робота бакалавра містить: 88 с., 13 рисунків, 7 таблиць, 
27 використаних джерел, 3 додатки.  
Актуальність теми: Розробка інформаційного web-сайту для будь-якого 
наукового гуртка, незалежно від його напрямів діяльності, є досить актуальною 
задачею, адже завжди розробка інформаційного web-сайту для студентського 
гуртка дає можливість популяризувати новітні напрями діяльності будь-якого 
гуртка серед пересічних користувачів Інтернет мережі, можливість залучити нових 
учасників, відслідковувати перспективу та результативність виконання 
актуальних, передових проектів гуртка та ін. 
Мета роботи і задачі дослідження: Метою даної бакалаврської роботи є 
розробка ефективного інформаційного web-сайту наукового гуртка з 
застосуванням сучасних інформаційних технологій що є актуальним на сьогодні. 
При  цьому об’єктом дослідження даної бакалаврської роботи є творча діяльність 
наукових гуртків, а предметом даного дослідження є використання сучасних 
засобів та платформ для проектування та розробки web-сайту наукового гуртка 
кафедри. 
Для досягнення поставленої мети в роботі розв’язуються наступні завдання: 
− провести аналіз об’єкту дослідження та предметної області, на основі 
результатів достовірного аналізу інформаційних сайтів-аналогів 
наукових об’єднань, що дасть можливість визначати основні напрямки та 
створювати структурні складові сайтів даного типу. 
− сформувати специфікацію необхідних вимог до сайтів наукових гуртків 
закладу вищої освіти, що дасть можливість розробити зручну структуру 
web-сайту наукового гуртка «Програмування» кафедри. 
− дослідити основні функціональні та не функціональні вимоги до 
проектування та розробки сайту, на основі аналізу структури основного 
ядра науково-дослідних сайтів. 
4 
 
− спроектувати структуру інформаційного web-сайту наукового гуртка 
«Програмування» кафедри, що дасть можливість реалізувати програмні 
модулі web-сайту.  
− реалізувати web-сайт студентського наукового гуртка «Програмування», 
провести порівняння реалізованого web-сайту з сайтами-аналогами та 
провести його тестування. 
− розробити основні сценарії роботи web-сайту у вигляді діаграм 
активності різних користувачів системи. 
Об’єкт дослідження: творча діяльність наукових гуртків. 
Предмет дослідження: використання сучасних засобів та платформ для 
проектування та розробки web-сайту наукового гуртка кафедри. 
Методи дослідження. В роботі застосовувалися: теоретичний метод (аналіз 
літератури з проблеми дослідження). 
Перелік ключових слів: WEB-САЙТ, ФУНКЦІОНАЛЬНІ ВИМОГИ, 
НЕФУНКЦІОНАЛЬНІ ВИМОГИ, ТЕСТУВАННЯ.   
 
ABSTRACT 
Bachelor's qualification work contains: 88 p. , 13 figures, 7 tables, 27 sources 
used, 3 annexes.  
Relevance of the topic: The development of an information website for any 
scientific circle, regardless of  its activities, is  quite an urgent task, because always the 
development of an information website for a student club makes it possible to popularize 
the latest activities any circle among ordinary Internet users  , the ability to attract new 
participants, track the prospects and effectiveness of the implementation of current, 
advanced projects of the circle, etc. 
The purpose of the work and the objectives of the study: The purpose of this   
bachelor's work is to develop an effective information web-site of a scientific circle with  
the use   of modern information technologies that are relevanttoday. the subject of this 
5 
 
research is  the use of modern tools and platforms for the design and development of the 
web-site of the scientific circle of the department. 
To achieve this goal, the following tasks are solved in the work: 
− analysis of the object of research and subject area, based on the results of a 
reliable analysis of information sites-analogues of scientific associations, 
which will make it possible to determine the main directions and create 
structural components of sites of this type. 
− fromthe formstothe specification of the necessary requirements for the sites of 
scientific circles of a higher education institution, which isan opportunity to 
develop a convenient structure of the web-site of the scientific circle 
"Programming" of the department. 
− the basic functional and non-functional requirements for the  design and 
development of the site, based on the analysis of the structure of the  main core 
of research sites. 
− with theprojectinthe structure of the information web-site of the scientific circle 
"Programming" of the department, which is an opportunity to implement the 
software modules of the web-site.  
− ealizin the  web-site of the student scientific circle "Programming", provesti 
comparison of the implemented web-site with sites-analogues and conduct its 
testing. 
− develop the main scenarios of the web site in the form of diagrams of the 
activity of different users of the system. 
Object of research: creative activity of scientific circles. 
Subject of research: use of modern tools and platforms for design and 
development of the web-site of the scientific circle of the department. 
Research methods. The paper used: theoretical method (analysis of literature on 
the problem of research). 
Keyword list: WEB-SITE, FUNCTIONAL REQUIREMENTS, NON-
FUNCTIONAL REQUIREMENTS, TESTING. 
  
6 
 
ЗМІСТ 
 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ….7 
ВСТУП……………………………………………………………………………….….8 
1 МОДЕЛІ, СИСТЕМНІ ПІДХОДИ ТА ПРОГРАМНІ ЗАСОБИ СТВОРЕННЯ 
WEB-САЙТІВ…………………………………………………..……………………....9 
1.1 Аналіз організаційної діяльності об’єкта студентського наукового гуртка…..9 
1.2 Огляд web-ресурсів існуючих студентських наукових гуртків……………….11 
1.3 Програмні засоби автоматизації розробки web-сторінок……………………..18 
Висновки до розділу 1 ………………………………………………………………23 
2 ПРОЕКТУВАННЯ WEB-САЙТУ НАУКОВОГО ГУРТКА 
«ПРОГРАМУВАННЯ»……………………………………………………………….25 
2.1 Аналіз вимог до web-сайту «Програмування»………………………………..25 
2.2 Структура web-сайту «Програмування»………………………………………37 
2.3 Проектування структури бази даних для web-сайту «Програмування»…….38 
Висновки до розділу 2 ………………………………………………………………44 
3 WEB-САЙТ НАУКОВОГО ГУРТКА «ПРОГРАМУВАННЯ»………………..…45 
3.1 Основні сценарії роботи web-сайту наукового гуртка…………………….…45 
3.2. Графічний інтерфейс web-сайту наукового гуртка……………………….…52 
3.3. Тестування web-сайту наукового гуртка «Програмування»………………..62 
Висновки до розділу 3 …………………………………………………………..…64 
ВИСНОВКИ………………………………………………………………………...…65 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ………………………………………….…66 
ДОДАТОК А…………………………………………………………………………..68 
ДОДАТОК Б…………………………………………………………………………..70 
ДОДАТОК В…………………………………………………………………………..81 
 
 
  
7 
 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І 
ТЕРМІНІВ  
ЗВО – заклад вищої освіти; 
CRM – Управління відносинами з клієнтами (Customer relationship 
management); 
ПЗ – програмне забезпечення; 
IB – Interface Builder (Конструктор інтерфейсів); 
API – Application Programming Interface (Інтерфейс прикладного 
програмування). 
CMS – система керування вмістом (англ. Content management system); 
АІС – автоматизована інформаційна система; 
БД – база даних; 
ОС – операційна система; 
HTML – HyperText Markup Language; 
CSS – Cascading Style Sheets. 
  
8 
 
ВСТУП 
Гурток – це сукупність зацікавлених осіб, які об’єднані спільним видом 
діяльності для вирішення сучасних наукових питань. Ключовим завданням 
діяльності наукового гуртка є вивчення студентами кафедри методології 
досліджень; здобуття практичних навиків та їх застосування на практиці; 
підготовка професіоналів з відповідним рівнем необхідної спеціалізації; розвитку 
нового потенціалу студентів; проведення цікавих семінарів, «мозкових штурмів»; 
для реалізації сучасних задач учасники студентського наукового гуртка повинні 
проводити періодичні засідання.   
Розробка інформаційного web-сайту для будь-якого наукового гуртка, 
незалежно від його напрямів діяльності, є досить актуальною задачею, адже завжди 
розробка інформаційного web-сайту для студентського гуртка дає можливість 
популяризувати новітні напрями діяльності будь-якого гуртка серед пересічних 
користувачів Інтернет мережі, можливість залучити нових учасників, 
відслідковувати перспективу та результативність виконання актуальних, 
передових проектів гуртка та ін.   
Так метою кваліфікаційної роботи бакалавра є розробка ефективного 
інформаційного web-сайту наукового гуртка кафедри з використанням сучасних 
передових інформаційних технологій є актуальною задачею. При  цьому об’єктом 
дослідження випускної бакалаврської роботи є утворення та діяльність наукових 
студентських гуртків, а предметом такого дослідження розглянуто застосування 
сучасних засобів та нових платформ для розробки інформаційного web-сайту 
наукового студентського гуртка кафедри. 
  
9 
 
1 МОДЕЛІ, СИСТЕМНІ ПІДХОДИ ТА ПРОГРАМНІ ЗАСОБИ СТВОРЕННЯ 
WEB-САЙТІВ 
1.1 Аналіз організаційної діяльності об’єкта студентського наукового 
гуртка 
Найбільш поширеною формою поза навчальної роботи на кафедрі з 
дослідження наукових питань є студентський гурток. Гурток – це сукупність 
зацікавлених осіб, що об’єднані заради єдиної спільної діяльності, для дослідження 
нових наукових питань та розв’язування цікавих задач, щоб сприятимуть 
полегшенню життя кожного учасника. Метою діяльності студентського гуртка є 
поглиблене освоєння студентами різних методологій наукових досліджень, 
сприяння набуття практичних навичок та застосування нових навичок та здобутих 
вмінь на практиці, також сприяння підготовці висококваліфікованих спеціалістів з 
відповідної здобуваної спеціалізації; розвитку творчого потенціалу групи 
студентів; організація та проведення наукових студентських та аспірантських 
семінарів, тренінгів, а також для реалізації поставленої мети та нових задач 
учасники гуртка повинні проводити періодичні засідання. Розрізняють наступні 
види організаційної діяльності гуртка: На рисунку 1.1 зображено види діяльності 
наукового гуртка. 
 
Рисунок 1.1 – Види діяльності гуртка 
10 
 
Гуртки бувають у різних видах, наприклад у вигляді конкурсів та квестів; 
екскурсій; інформаційних мітингів; круглих столів та семінарів; навчальної 
практики.  
Таблиця 1.1 – Функції студентського гуртка  
Функції студентського гуртка  
функції для удосконалення  функції для удосконалення 
теоретичних знань практичних знань 
- чітке  планування програмованого - стимулювання та розвиток 
матеріалу;  практичних знань та умінь учасника, а 
- забезпечення режиму дотримання також вибору майбутньої професії 
чітких норм і правил техніки безпеки в студента; 
навчальному закладі;  - навчання учасників гуртка з 
- варіативність у виборі різних врахуванням визначеної специфіки 
форм та методів роботи гуртка.  гуртка.   
У таблиці 1.1 виведено основні функції гуртка для здобуття та удосконалення 
знань всіх учасників гуртка. Студентські гуртки застосовують у різних сферах 
життя:   
Таблиця 1.2 – Сфери застосування гуртків 
 Сфери застосування гуртків  
Предметно- - сфера застосування гуртка, метою якої є розширення 
технічна  знань та вмінь з певної дисципліни, розвиток на основі 
  комп’ютерних теоретичних знань, створення та 
удосконалення обладнання.   
Творчо- - сфера студентського гуртка, метою якої є удосконалення 
конструкторська   вмінь та знань, науково-технічного мислення та навики 
аналізаторської та організаційної діяльності.  
Навчально- - сфера студентського гуртка, метою якої є удосконалення 
технічна певного виду наукових питань з техніки.   
11 
 
При створенні наукового студентського гуртка виникає потреба майже 
відразу у електронному доступі до інформації. Для цього необхідно створювати 
web-сайт про певний науковий гурток, тому що це завжди допомагає вирішити 
деякі організаційні проблеми. Web-сайт науковому студентському гуртку 
створюють для:  
- зацікавлення та вступу якомога більшої аудиторії;  
- доступу до необхідної інформації, що надається адміністрацію 
студентського гуртка;  
- оновлення поточної інформації;  
- поширення подій, що постійно відбуваються у науковому гуртку.  
Створення інформаційного web-сайту для наукового гуртка дозволяє 
вирішити нагальні проблеми, що локалізовані в самому гуртку, може бути 
самостійним або ж при вищому навчальному закладі, де відносини з людьми та 
закладами вищої освіти дають перспективу учасникам студентського наукового 
гуртка, та також може бути і структурним елементом всієї системи освіти. Також 
одними з головних завдань є технологічна та також фінансова проблема – web-сайт 
дає унікальну можливість розширити необхідні відносини з впливовими особами, 
а також можливість розширятися загалом.   
Отже, гурток – це сукупність зацікавлених осіб, що об’єдналися для 
вирішення спільного питання чи проблеми. Web-сайт завжди дозволяє створеному 
науковому гуртку оновлювати поточну інформацію для всіх учасників 
студентського гуртка, розширювати інформацію про існуючий гурток, 
зацікавлення та можливості вступання більшої аудиторії до гуртка кафедри.  
1.2 Огляд web-ресурсів існуючих студентських наукових гуртків  
Web-сайти наукових гуртків, їх тематики комп’ютерних технологій, 
програмування є досить велика кількість. Аналоги є для огляду, кожен сайт має 
свій особливий інтерфейс, та вигляд, що здебільшого залежить від програмного 
коду створеного сайту.  
12 
 
Також часто продуктивність і робота сайту залежить від засобу програмного 
забезпечення, за допомогою якого написаний код того чи іншого web-сайту.  
На рисунку 1.1. зображено web-сайт розглянутого наукового гуртка з 
програмування, у якого досить не складний інтерфейс, використано досить приємні 
кольори для вигляду web-сторінки. 
 
 
Рисунок 1.2 – Вигляд інформаційного web-сайту сторінки наукового гуртка 
школярів 
13 
 
 
Рисунок 1.3 – Web-сторінка гуртка з програмування школи №16 «Кодфорс» 
Проаналізувавши глибше кожен з трьох сайтів, видно, що на сторінці сайту 
«Гурток з програмування та інших інформаційних технологій» місце меню не є 
досить великим та розширеним – воно є досить лаконічним та малим. 
 
 
Рисунок 1.4 – Стрічка меню сайту «Гуртки з програмування» 
Меню другого розглянутого сайту, web-сторінки гуртка з програмування 
«Кодфорс» має більш розширений вигляд та приємніший інтерфейс. У цьому меню 
також містяться варіації різних використовуваних мов сайту. 
 
Рисунок 1.5 – Вигляд головного меню сайту гуртка програмування 
«Кодфорс» 
Існують також сайти з максимально простим візуальним інтерфейсом, який 
написаний за допомогою HTML: 
14 
 
 
Рисунок 1.6 – Вигляд web-сайту гуртка з програмування Code Club 
Web-сторінка, що показана на рисунку 1.6. має певні чіткі особливості, на 
відміну від показаних двох попередніх: по-перше, значно простіший інтерфейс. 
Причиною цього є застосований програмний застосунок, за допомогою якого 
створений сайт. По-друге, практично вся колонка з головним меню розміщена по 
ліву сторону, що є досить рідкісним явищем оформлення таких сайтів саме таким 
чином. По-третє, місце, що присутнє навколо web-сторінки, є порожнє, а також 
відповідно, відштовхуючись від застосованого програмного застосунку, видно, що 
пошук, додати щось у вибране, посилання на контакти, зробити Internet Explorer 
стартовою – то всі ці функції сайту зображено за допомогою достатньо простого 
інтерфейсу. 
 
 
Рисунок 1.7 – Частина основного меню сайту 
Порівнюючи ці три інформаційні web-сторінки, видно, що вигляд першої 
головної сторінки двох сайтів значно відрізняється. 
15 
 
 
Рисунок 1.8 – Меню сайту 
Програмний засіб для написання двох сайтів теж різний: перший сайт 
написаний за допомогою мови розмітки HTML, другий сайт вже написаний за 
допомогою мови програмування PHP та з використанням віртуального сервера, що 
значно збільшує продуктивність даного сайту. Наступна web-сторінка створена 
повністю за допомогою HTML, відповідно з досить простим інтерфейсом, на 
відміну від розглянутого попереднього web-сайту, що написаний за допомогою 
PHP та із більш складним використовуваним інтерфейсом. 
 
 
Рисунок 1.9 – Посилання на контакти адміністрації даного сайту та 
посилання на соціальну мережу 
У кожного з цих трьох розглянутих сайтів є контакти, так як зв’язок з 
адміністрацією сайту для листування; пошук потрібної важливої користувачеві 
інформації. 
16 
 
Рисунок 1.10 – Місце проведення таких занять 
 
Рисунок 1.11 – Карта розташування приміщення, де проводяться заняття 
описаного гуртка 
Значною особливістю даної інформаційної web-сторінки цього гуртка є 
повна лаконічна описана інформація про даний науковий гурток, а саме: інформація 
про цей гурток, місце проведення наступних занять, контакти гуртка, адреса 
приміщення, та вартість занять. На цьому сайті присутня лише основна потрібна 
інформація, що є зручно та зрозуміло будь-якому відвідувачу сайту. 
У наступному розглянутому аналогу теж присутня повна інформація про цей 
гурток, всі його учасники зареєстровані, цей сайт є доступним п’ятьма різними 
мовами. 
 
 
Рисунок 1.12 – Головна сторінка web-сайту 
17 
 
Останній аналог сайту даного гуртка має просте меню по лівому боці, воно 
більш розширено і це все пояснює, на відміну від вже розглянутих попередніх двох, 
в яких головне меню зображено досить стисло, хоча теж мають розширені пункти. 
Відмінність полягає у тому, що в такому аналізі все основне меню є доступним 
повністю відразу, а в попередніх сайтах воно заховане в єдину назву підпункту 
цього меню головної сторінки. 
Отже, всі розглянуті три аналоги web-сайтів гуртків мають певні особливості 
представлені в таблиці 1.3. 
Таблиця 1.3 – Порівняння кількох аналогів сайтів 
Особливості аналогів сайтів наукових студентських гуртків 
перший аналог другий аналог третій аналог 
мова написання сайту: мова написання сайту: мова написання сайту: 
HTML PHP HTML 
інтерфейс: інтерфейс: інтерфейс: 
простий складний простий 
інформація на сайті: інформація на сайті: інформація на сайті: 
доступна та зрозуміла доступна та зрозуміла доступне та зрозуміла 
меню: розширене меню: розширене меню: розширене 
контакти адміністрації контакти адміністрації контакти адміністрації 
сайту: присутні сайту: наявні сайту: присутні 
 
Серед основних пунктів такої структури наукових сайтів слід відмітити: 
- наукові розробки студентів; 
- місце та час проведення колективних засідань. 
Серед визначених структурних елементів, які повинні бути на сайті зазвичай 
є і будуть присутніми у розробленому сайті: 
- наявність головного меню; 
- рік створення даного сайту; 
- календар; 
- контакти; 
18 
 
- наявність форуму або ж блогу. 
1.3  Програмні засоби для автоматизації розробки web-сторінок 
Створення подібних сайтів, відбувається за допомогою деяких програм, які 
служать для написання власне самого програмного коду любої web-сторінки.  
Є такі програми для створення необхідного програмного коду, web-сайту: 
- блокнот – це найпростіша програма що використовується для створення 
сайтів і він вже вбудований в будь-яку сучасну OC Windows текстовий редактор. 
Тому, для того щоб написати сторінку в html – не обов’язково потрібно якихось 
додаткових інструментів, - для цього достатньо запустити вбудований блокнот, 
написати необхідний в ньому html – код , але не все так просто, писати в блокноті 
можуть ті, хто добре знає мову розмітки html, тому що, помилки написані в коді 
блокнот ніяк не позначає. 
- Notepad ++ – це  більш розширена версія блокнота, і також безкоштовна, 
але встановлюється окремо. В такій програмі html – теги підсвічуються вже різним 
кольоровим шрифтом. Таким чином, код відрізняється від всього головного тексту 
нашої сторінки, тому деякі помилки та можливі неточності допущені в 
програмному коді виявити вже набагато легше, ніж, наприклад, помилки допущені 
в блокноті. 
- Microsoft Front Page – це такий вже візуальний редактор мови розмітки 
html – код з пакету Microsoft Office. (WYSING – What You See Is What You Get 
– що ти бачиш, те й ти отримаєш), проте в цій програмі вже можна редагувати код 
вручну. 
Отже, програми для створення сторінок – блокнот, notepad++, microsoft Front 
Page є потрібними редакторами та необхідними в процесі всього створення сайту, 
та також застосування візуальних редакторів значно полегшує написання коду і 
пришвидшує його створення за допомогою вбудованих підказок, описаних тегів та 
інше. 
 
 
19 
 
Таблиця 1.4 – Переваги та недоліки можливих програм 
Переваги та недоліки 
назва програми переваги недоліки 
блокнот  доступність;  неможливість 
вбудований в OC Windows; подивитися одразу вид 
просто створеної web- 
сторінки;  
досконале знання мови 
html; 
notepad++  Простота; неможливість 
доступність;  подивитися одразу вид 
безкоштовна. створеної web- 
сторінки;  
досконале знання мови 
html; 
Microsoft Front Page  можливість бачити одразу, як платна версія 
виглядатиме створювана програми;  
сторінка; наявність деяких створюють код, який є 
підказок; підсвічування тегів зайвим, і таким чином 
кольором; можливість простої та робить вигляд сторінки 
зручної вставки певних об’єктів; важчим; 
Для полегшення роботи та з метою економії часу всеж існують певні 
платформи, шаблони, каркаси для створення інформаційних сайтів, тобто 
стандартні шаблонні «шматки» написаного коду, які використовують для 
створення самих найрізноманітніших web-сторінок, і одними з таких є фреймворки. 
Фреймворк – це готове програмне забезпечення, платформа або каркас, які 
полегшує розробку значно, об’єднує різні компоненти великого програмного 
проекту.  
Підходить для створення web-сервісів, сайтів та додатків. 
 
20 
 
Таблиця 1.6 – Різновиди фреймворків 
Різновиди фреймворків для web-розробки 
Назви фреймворків php- ruby- java- python- 
фрейворки фреймворки фреймфорки фреймворки 
 YII ruby on rails spring MVC twisted 
symphony sinatra JSF flask 
zend padrino GWT phone 
codelghiter   django 
   tornado 
Фреймворки мають як переваги так і недоліки, більшість з них стосуються 
власне розробки. Перевагами є: ruby-фреймворки; php-фрейворки; python-
фреймворки; java-фреймворки – дозволяє добитися простої послідовності дій; 
реалізація будь-яких відомих процесів; висока їх швидкодія та продуктивність; 
можуть витримати навантаження. Недоліки їх наступні: залежність від бібліотеки; 
великий розмір бібліотек; деякі бібліотеки використовують префікси, які 
ускладнюють сприйняття та розуміння коду. 
Отже, таким чином, вважаємо що фреймворк – програмний продукт, який 
значно полегшує написання нових сайтів. Є велика кількість можливих різних 
фреймворків, що допомагають реалізувати будь-які, навіть складні процеси, а 
також забезпечують досить високу продуктивність, ефективність роботи створених 
сайтів і витримують значні навантаження в процесі проектування, написання і 
експлуатації web-сайту. 
Ще одним з застосовуваного програмного забезпечення, що може 
використовуватися в процесі написання сайту, є CMS. CMS – це програмне 
забезпечення або ж інформаційна система, керування вмістом, яка 
використовується саме для організації та основного забезпечення процесу щодо 
можливого спільного редагування нового сайту, його створення та управління. 
CMS –має такі переваги: 
- використання CMS дозволить власнику самостійно створювати або 
21 
 
видаляти частини сайту, редагувати інформацію на сайті без сторонньої допомоги 
фахівця, - це перевага статичних сайтів; 
- робота нового сайту постійно тестується користувачем, - якщо 
знаходяться деякі помилки, то вони досить оперативно і швидко можуть бути 
усунуті, при цьому web-сторінка працює на найсучасніших та самих передових 
технологіях; 
- використовуючи CMS, можна істотно зменшити часові витрати у процесі 
написання, та створення нового сайту, тому що, немає потреби зосереджувати увагу 
на виконанні певних технічних завдань, тож варто зосередитись на візуальній та 
інформаційній складовій створюваного сайту. 
CMS здебільшого складаються з багатьох корисних функціональних модулів 
та блоків, та всі інші є неподільні, зашифровані чи монолітні. 
У CMS немає певної чіткої класифікації, проте виділяють і найпопулярніші в 
даній області: 
- joomla – яскрава, сучасна, постійно оновлюється, є досить простою у 
розробці і використанні та безкоштовною; 
- drupal -  (для тих, хто є прихильником розробки сайтів з самого початку) 
– це повноцінне та функціональне середовище зі створення сайтів, що є повністю 
безкоштовною для користувачів і має також багато можливостей; 
- MODx – одна з найновіших, популярна у користуванні, система. Також є 
досить гнучкою та ефективною, будучи безкоштовною; 
CMS є багато інших: Word Press, Site DNK, CM5, Media Wiki, UMI.CMS, 
PHP-Fusion, Net Cat, CMS тощо. 
Принцип роботи будь-якої CMS заснований на поділі змісту та оформленні 
сайту. 
Дизайн більшості сайтів змінюється не часто, але зміни змісту відбуваються 
погодинно. 
Тому в роботі CMS часто використовують шаблони – тобто спеціальні 
порожні «заготовки» деяких сторінок, у яких дизайн нового сайту вже 
програмований у них, залишилося лише наповнити їх необхідною інформацією. 
22 
 
Користувачу достатньо використати спеціального WYSIWYG-редактора. Цей 
редактор дещо схожий на текстові редактори основних офісних додатків, тому їх 
дуже легко освоїти будь-якому користувачу, а поява декількох нових шаблонів дає 
можливість обирати якісний дизайн та економити час на написання сторінок сайту. 
Таблиця 1.7 – Переваги та недоліки CMS систем 
Переваги та недоліки CMS 
Переваги: Недоліки: 
з точки зору розробника сайту: - замовник прив’язаний до 
- дають можливість зробити зміни в початкового розробника, так як 
структурі сайту швидко і якісно шляхом потрібен час, щоб розібратися в 
компонування різних модулів; написаному чужому сайті; 
- забезпечують високу якість розробки, - вразливість CMS; 
так як зменшує появу нових помилок в коді. - замовник не має можливості 
з точки зору користувача: редагувати сайт, додавати у нього щось 
- зрозумілий інтерфейс для нове, так як він має лише деякі 
редагування та наповнення вмісту сайту; елементарні можливості для керування 
- дозволяють не лише показувати сайтом. 
користувачу потрібну інформацію, але і 
використовувати деякий діалог (реєстрація, 
спілкування в форумі, блозі та чатах); 
Програми для створення та написання програмного коду сайтів, фреймворки, 
CMS – значно можуть полегшити роботу розробника, значно економлять час на 
розробку, зменшують можливість появи помилок у написаному коді, покращують 
дизайн нового сайту, роблять його ще більш унікальним. 
Отже, застосування CMS значно економить час власне розробнику сайту, а 
також там є присутній дизайн нового сайту, зручний та вдалий і зрозумілий 
інтерфейс, проте його суттєвими недоліками є саме те, що замовник сайту 
прив’язаний до розробника сайту, вразливість CMS, особливо це помітно в 
інтернет-магазинах, так як велику увагу там потрібно приділяти і захисту 
інформації, як користувачів, так і власне адміністраторам сайту. 
23 
 
Висновки до розділу 1 
В першому розділі бакалаврської роботи зроблено аналіз даної предметної 
області та власне об’єкту дослідження, тобто наукового студентського гуртка 
кафедри. Показано, що гурток – це сукупність зацікавлених осіб, які об’єднані 
деякою спільною діяльністю для вирішення нових наукових питань. Основними 
завданнями діяльності наукового гуртка є вивчення студентами методології 
наукових досліджень; отримання практичних навиків та можливість застосування 
їх на практиці; сприяння до підготовки професіоналів з відповідним досвідом та 
рівнем спеціалізації; розвиток потенціалу студентів кафедри; проведення семінарів 
та мітингів. Також визначено головні напрямки для роботи гуртків. 
Також, доведено актуальність даної розробки web-сайту для наукових 
гуртків, адже це дозволить досліджувати деякі науково-технологічні проблеми, 
мета яких – розробити проект, який має підтвердити чи спростувати певне наукове 
твердження. Студентський гурток може бути самостійною частиною чи при закладі 
вищої освіти. Відносини з навчальним закладом мають перспективи подальшого 
розвитку для гуртка. 
Гурток майже завжди має фінансові та деякі технологічні проблеми, тому 
web-сайт дає можливості збільшити та розширити відносини з впливовими 
спеціалістами. 
Також у даному розділі наведено огляд вже існуючих web-сайтів наукових 
гуртків, а саме: «Code Club»; «піт.укр»; «Кодфорс». Далі проаналізовано їхні 
переваги та недоліки. 
Здійснено поверхневий та детальний огляд існуючих засобів та платформ для 
розробки web-сайтів та було прийнято рішення про застосування конкретних 
засобів для розв’язання поставлених завдань у даному дослідженні. 
Метою роботи бакалавра є розробка інформаційного web-сайту наукового 
гуртка кафедри з використанням передових, сучасних інформаційних технологій. 
Для досягнення даної мети роботи необхідно також вирішити такі задачі: 
- виявити основні функціональні та нефункціональні вимоги до розробки 
24 
 
інформаційного web-сайту; 
- провести аналіз заданої предметної області та дослідити об’єкт 
інформатизації; 
- спроектувати основні завдання роботи розроблювального web-сайту; 
- спроектувати структуру web-сайту наукового студентського гуртка 
«Програмування»;  
- сформувати специфікацію поставлених вимог до сайту наукового гуртка; 
- реалізувати web-сайт та протестувати його роботу, а також провести 
порівняння з сайтами-аналогами.   
25 
 
2 ПРОЕКТУВАННЯ WEB-САЙТУ НАУКОВОГО ГУРТКА 
«ПРОГРАМУВАННЯ» 
2.1  Аналіз вимог до web-сайту наукового гуртка «Програмування» 
На етапі проектування програмної системи перш за все потрібно провести 
аналіз поставлених вимог до інформаційного web-сайту наукового гуртка 
«Програмування». Розглянемо деякі функціональні вимоги до нашої 
розроблюваної системи. В системі буде передбачатися два типи: користувач та 
адміністратор. Т у т  кожному з них інформаційний web-сайт надаватиме різний 
функціонал. UML-діаграма варіантів використання для користувача системи 
показана на рисунку 2.1. На даній діаграмі показано деякий функції нашої системи, 
якими користувач може скористатися. 
Рисунок 2.1 – UML-діаграма варіантів можливого використання web-сайту 
«Програмування» для користувача 
26 
 
Тепер розглянемо цей кожний із варіантів його використання детальніше. 
«Переглянути новини» – це одна з функцій системи, яка дозволяє користувачу 
переглянути найостанніші новини на цьому сайті.  
«Переглянути весь список» – це ще одна функція системи, яка дозволяє 
переміститись на спеціалізований сайт, де розміщені новини більш розширено.  
«Перечитати інформацію про учасників» – це функція системи, що дозволяє 
переглянути б і л ь ш  повну інформацію про учасників, розміщену на сайті 
«Програмування».  
«Перечитати інформацію про гурток» – це функція системи, яка дозволяє 
дізнатися про гурток більш розширено.  
«Переглянути учасників» – функція системи, яка дозволяє ознайомитися зі 
списком учасників.  
«Переглянути актуальні наукові проекти» – це функція системи, яка дозволяє 
переглянути найактуальніші проекти на сайті.  
«Переглянути випускників» – функція системи, яка дозволяє переглянути 
імена кращих випускників гуртка. 
«Переглянути проекти» – це функція системи, яка дозволяє переглянути 
проекти учасників на сайті «Програмування».  
«Переглянути чат» – це функція системи, що дозволяє написати 
повідомлення, а також спілкуватися з учасниками та адміністрацією сайту. 
«Переглянути контакти» – це функція системи, де розташовано всі телефони 
і електронна пошта адміністратора. Є можливість написати запитання на 
електронну пошту адміністратора, карта – місце розташування гуртка.  
З діаграми видно, що користувач, зайшовши на сайт, з функції меню може 
перейти на будь-яку зі сторінок, з яких має можливість переглядати практично 
будь-яку з функцій. Користувач має право на доступ до інформації про гурток та 
учасників, а також до перегляду готових проектів, розроблених учасниками. 
На рисунку 2.2 показано діаграму варіантів використання інформаційного 
web-сайту для адміністратора. 
27 
 
 
Рисунок 2.2 – UML-діаграма різних варіантів використання інформаційного 
web-сайту «Програмування» для адміністратора 
Розглянемо UML-діаграму варіантів використання адміністратором. Робота 
з таким сайтом розпочинається власне з функції «Авторизація». Перш, ніж зайти на 
поточний сайт, необхідно вказати логін або електронну пошту та ввести пароль. 
Перевіривши поля на правильність написання, система виводить повідомлення 
безпомилково введених даних, і далі, для подальшого входу безпосередньо на сайт, 
необхідно натиснути кнопку «Вхід». 
«Переглянути весь список» – це функція даної системи, що дозволяє 
адміністратору переглядати сайт, на якому власне розміщені новини, більш 
розширено.  
28 
 
«Переглянути новини» – це функція системи, що дозволяє адміністратору 
додавати, редагувати новину сторінки, видаляти найстаріші з новин. 
«Перечитати інформацію про гурток» – це функція системи, яка дозволяє 
редагувати та видаляти інформацію про гурток.  
«Переглянути випускників» – це функція системи, яка дозволяє переглянути 
імена кращих випускників гуртка, також адміністратор має право додавати, 
редагувати та видаляти інформацію зі сторінки. «Перечитати інформацію про 
учасників» – це функція системи, яка дозволяє переглянути повну інформацію про 
учасників, розміщену на сайті «Програмування». Адміністратор має право додати, 
редагувати та видаляти інформацію на сайті.  
«Переглянути учасників» – це функція системи, яка дозволяє переглянути 
список учасників гуртка, також додавати, редагувати та видаляти інформацію на 
сайті.  
«Переглянути проекти» – це функція системи, яка дозволяє переглянути 
проекти, які були розроблені учасниками гуртка.  
«Переглянути актуальні наукові проекти» – це функція системи, яка дозволяє 
переглянути найактуальніші наукові проекти.  
«Переглянути контакти» – це функція системи, яка дозволяє переглянути всі 
телефони і електронна пошта адміністратора гуртка. Також є можливість написати 
запитання на електронну пошту адміністратора і карта - місце розташування 
гуртка.  
«Переглянути чат» – це функція системи, що дозволяє написати 
повідомлення, а також спілкуватися з учасниками гуртка та адміністрацією сайту. 
Отже, таким чином, видно з діаграми, що адміністратор, заходячи на цей сайт, 
здійснює управління сайтом і має змогу та право додавати, редагувати чи видаляти 
інформацію. 
Далі, доцільно розглянути деякі ескізи всих основних сторінок 
інформаційного web-сайту наукового студентського гуртка «Програмування», які 
в подальшому потрібно буде створити, щоб забезпечити виконання усіх 
функціональних вимог, які подано вище. 
29 
 
На рисунку 2.3 показано ескіз головної екранної форми сторінки web-сайту 
«Домашня», власне яку нам необхідно розробити, щоб забезпечити виконання усіх 
описаних і розглянутих вище функцій системи. 
 
Рисунок 2.3 – Ескіз головної сторінки «Домашня» 
З даного ескізу чітко видно, де саме розташовані блоки основних елементів 
сторінки, що допомагають нам знайти інформацію на самому сайті, такі як: 
«меню», «карта розташування гуртка», «пошук»,  «календар». 
На рисунку 2.4 показано ескіз екранної форми сторінки web-сайту «Про 
гурток». Саме на цій сторінці і буде подано інформацію про організований гурток, 
історію гуртка та короткий опис самих активних учасників. Навігація по сторінках 
нашого сайту буде здійснюватися за допомогою головного меню. 
30 
 
 
Рисунок 2.4 – Ескіз сторінки «Про гурток» 
З цього ескізу видно, що дана сторінка «Про гурток» складається з основних 
трьох пунктів: «Науковий гурток “Програмування”»; «Активні учасники гуртка»; 
«Історія гуртка». 
У першому розділі буде міститися коротка інформація про те, що це за гурток, 
та які мови програмування тут використовуються. А в другому – тут присутні 
відомості про те, коли власне був створений цей гурток, яка була мета його 
створення. У третьому розділі є можливість щоб переглянути про найактивніших 
студентів учасників гуртка, описано скільки їх налічується та власне імена цих 
учасників. 
На рисунку 2.5 показано ескіз екранної форми сторінки web-сайту «Про 
гурток». На даній сторінці буде подано головні найновіші новини роботи гуртка. 
31 
 
 
Рисунок 2.5 – Ескіз сторінки «Новини» 
З наведеного кадру ескізу сторінки видно, що сторінка «Новини» 
складається з поданого списку найновіших новин гуртка, а також є можливість 
переглянути розгорнуті новини більш детально. 
На рисунку 2.6 показано ескіз представленої екранної форми сторінки 
інформаційного web-сайту «Інформація про учасників». Подано на цій сторінці 
буде учасників гуртка, кращих науковців, а також можливість створювати та 
подавати заявку на вступ та участь у гуртку. 
 
32 
 
 
Рисунок 2.6 – Ескіз сторінки сайту «Інформація про учасників» 
З даного ескізу ми бачимо, що ця сторінка «Інформація про учасників» 
складається з трьох кнопок: «Подати заявку», «Учасники гуртка», «Кращі 
випускники гуртка», за допомогою цих кнопок користувач отримує можливість 
перейти на кожну з необхідних сторінок та дізнатися більш розширено про кожен 
із необхідних пунктів сторінки web-сайту «Програмування». 
На рисунку 2.7 розкрито ескіз екранної форми нової сторінки web-сайту 
«Кращі науковці гуртка». Подано на цій сторінці буде список учасників-науковців 
та описана коротка характеристика. 
 
33 
 
 
Рисунок 2.7 – Ескіз сторінки «Кращі науковці гуртка» 
З ескізу видно, що сторінка «Кращі науковці гуртка» складається з трьох 
пунктів: «Фото», «Характеристика учасника», «Ім’я», за допомогою яких 
користувач має можливість переглядати всіх учасників гуртка та інформацію про 
їхню діяльність та розроблені ними проекти. 
На рисунку 2.7 показано ескіз екранної форми сторінки інформаційного web-
сайту про описані «Актуальні проекти». Подано на даній сторінці буде актуальні 
проекти, та також надано можливість користувачу перейти на готові наукові 
проекти гуртка. 
34 
 
 
Рисунок 2.7 – Ескіз майбутньої сторінки «Актуальні проекти» 
З описаного ескізу бачимо, що сторінка «Про гурток» складається з описаних 
проектів, та також користувач має можливість переходити на готові наукові 
проекти. Проекти зображені на сторінці переважно за допомогою фото, при 
накладанні також можна перейти і на розширену інформацію про розроблений 
проект. 
На рисунку 2.8 представлено ескіз екранної форми сторінки інформаційного 
web-сайту «Контакти». На даній сторінці буде представлена карта розташування 
гуртка, електронна пошта та телефон адміністратора, також є можливість надіслати 
запитання адміністратору сайту. 
35 
 
 
 
Рисунок 2.8 – Ескіз сторінки сайту «Контакти» 
З представленого ескізу видно, що сторінка сайту «Контакти» складається з 
чотирьох пунктів: «Карта», «Чому навчатись саме у нас?», «Відповіді на 
запитання», «Адреса/телефон/e-mail адміністратора». 
На початку у першому пункті міститиметься карта розташування місця 
гуртка. У другому – буде розташоване місце для заповнення потрібних даних для 
надсилання запитань адміністраторові. У третьому ж пункті буде міститися 
контактна інформація адміністратора. 
У четвертому – тут місце для відповідей на поставлені запитання «Чому 
навчатись саме у нас?». 
36 
 
На рисунку 2.9 представлено ескіз екранної форми для сторінки web-сайту 
«Чат». На даній сторінці подано місця для вказування імені і власне повідомлення. 
 
Рисунок 2.9 – Ескіз сторінки «Чат» 
З представленого на рисунку ескізу видно, що дана сторінка «Чат» 
складається всього лише з двох пунктів: «Ім’я», та ще одного «Повідомлення». У 
першому ж пункті розміщено невеликий блок для вказування тексту імені 
підключеного користувача. У другому ж пункті розміщено місце власне для 
написання повідомлення, та також розміщена кнопка з написом «Надіслати», що 
дає можливість надіслати адміністратору написане коротке повідомлення. 
Отже, якщо проаналізувати ескізи сторінок, бачимо, що на нашому сайті 
розроблена вся функціональність та достатня зручність кожної з сторінок сайту 
«Програмування», це є повністю потрібна інформація для ознайомлення 
користувача з організацією сайту та власне гуртком, зокрема. 
37 
 
2.2 Структура web-сайту «Програмування» 
Структура web-сайту відображає майже весь набір сторінок, що можуть 
міститися у структурі сайту, а також те куди через дані сторінки меню користувач 
власне і може перейти. Структуру основного сайту для користувача показано у 
вигляді схеми, яка подана у цьому кресленні. 
Із описаної структури бачимо, що варіація сторінок розпочинається з 
домашньої сторінки. Далі на нашій схемі показано, те куди може також бути 
здійснено перехід від основної сторінки web-сайту. Тобто від сторінки «Домашня» 
авторизованому користувачу надається можливість перейти на наступні доступні 
сторінки «Про гурток», «Інформація про учасників», «Новини», «Чат», «Актуальні 
проекти», «Контакти». З даних сторінок є можливість переходити більше на 
інформацію, яка буде міститися на самому сайті «Програмування». 
Адміністратор має право робити маніпуляції з контентом: додавати 
інформацію, редагувати та видаляти інформацію. Те який вигляд має сам сайт для 
адміністратора це відображено на структурній схемі, що наведена у кресленнях. Із 
показаної схеми видно, що варіація сторінок розпочинається власне з головної 
сторінки: «Домашня». Адміністратор має нову можливість перейти на будь-яку з 
наявних сторінок. Сторінки, такі як «Додати новину», «Редагувати новину», 
«Видалити новину» вони дозволяють адміністратору редагувати і видаляти всю 
інформацію що розміщується на сайті. 
Редагування сторінок з контентом розроблено аналогічно до всіх можливих 
та дозволяє адміністраторові стежити за новим поновленням інформації на даному 
сайті «Програмування». 
Так, зі схем показаних структур для користувача та адміністратора ми 
бачимо, що є така можливість переходити на будь-яку зі сторінок, що власне дає 
велику продуктивність в роботі сайту, функціональність та повний доступ до 
інформації, як для власне користувача, так і для самого адміністратора. 
38 
 
2.3 Проектування структури та організації бази даних для web-сайту 
«Програмування» 
На наступному етапі, проектування структури БД, було розроблено діаграму 
всіх елементів та зв’язків. На даній діаграмі показані основні логічні елементи всіх 
даних web-сайту наукового студентського гуртка. 
 
 
Рисунок 2.10 – Діаграма всіх елементів і зв’язків БД 
Також на цьому рисунку показано елементи даних та можливі зв’язки між 
ними, що власне і зберігаються в БД. Сутність – це таке поняття існуючого об’єкта, 
процесу, та уяви про певний предмет чи можливе явище. Зв’язки між елементами 
показано за допомогою ліній, що пов’язують дві деякі сутності, ті які є частиною 
бази даних. Атрибути сутності та їх зв’язки записують всередині прямокутника. На 
наступному рисунку 2.13 показано власне ER-діаграму бази даних наукового 
студентського гуртка «Програмування». 
39 
 
 
Рисунок 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». 
Таблиця складається з декількох, а саме з чотирьох колонок: «позначення»; «назва 
поля»; «тип даних»; «розмір поля». 
 
 
40 
 
Таблиця 2.1 – Структура відношення «Project» 
Позначення Назва поля Тип даних Розмір 
поля 
id  Унікальний ідентифікатор проекту autoincrement 6 
name Назва проекту  char 100 
count of views  Кількість переглядів проекту int 5 
користувачами 
date of creation дата створення проекту int 8 
description  Опис проекту char 1000 
performance виконання проекту у відсотковому int 3 
status(%) відношенні 
photo  картинка до проекту image  
id-state  ідентифікатор відношення стану autoincrement 10 
id-the author ідентифікатор кожного з авторів проекту autoincrement 10 
Відношення «Project» може містить такі атрибути: назва проекту, дата 
створення проекту, кількість переглядів проекту користувачами, опис проекту, 
картинка до проекту, виконання проекту у деякому відсотковому відношенні, 
ідентифікатор відношення стану, ідентифікатор кожного з можливих авторів 
проекту. Також тут вказано тип даних до кожного з вказаних полів та розмір поля. 
Функціональність відношення структури полягає у більш ширшому поясненні 
кожного з позначень у таблиці структури розглянутого відношення «Project». 
У наступній таблиці 2.2 представлено структуру відношення «Participant». 
Вказане відношення «Participant» має містить атрибути: унікальний ідентифікатор 
учасника, вік учасника гуртка, ім’я учасника, назва вищого закладу, виконання 
кожного проекту у відсотковому відношенні, фото учасника гуртка, та власне 
ідентифікатор відношення стану. Функціональність структури полягає у 
розширеному поясненні сутності БД відношення «Participant», що описано в 
таблиці 2.2. 
 
41 
 
Таблиця 2.2 – Структура описаного відношення «Participant» 
Позначення Назва поля Тип даних Розмір поля 
id  унікальний ідентифікатор autoincrement 6 
учасника проекту 
firstname  ім’я учасника гуртка char 50 
age  вік учасника гуртка int 2 
university  назва вищого навчального c har 25 
закладу, де навчався учасник 
гуртка 
description  характеристика учасника char 850 
гуртка 
performance виконання проекту у int 3 
status(%) відсотковому відношенні 
photo  фото учасника гуртка  image  
id-role  ідентифікатор відношення autoincrement 10 
стану 
У даній таблиці 2.3 представлено наступну структуру відношення 
«Performer». Відношення «Performer» має містити такі атрибути: унікальний 
ідентифікатор проекту, унікальний ідентифікатор проекту, унікальний 
ідентифікатор учасника гуртка. Функціональність структури відношення таблиці 
«Performer» полягає у розширенні сутності БД, що описано в таблиці 2.3. 
Таблиця 2.3 – Структура відношення «Performer» 
Позначення Назва поля Тип даних Розмір поля 
id  унікальний ідентифікатор проекту autoincrement 6 
id-participant  унікальний ідентифікатор учасника autoincrement 5 
гуртка 
id-project  унікальний ідентифікатор проекту autoincrement 9 
42 
 
У таблиці 2.4 показано структуру відношення «State». Дане відношення 
«State», що містить атрибути: термін виконання проекту та етап виконання 
учасником гуртка проекту, унікальний ідентифікатор стану. Функціональність 
структури даного відношення «State» саме полягає у розширенні сутності БД, що 
далі описано у таблиці 2.4. 
Таблиця 2.4 – Структура відношення «State» 
Позначення Назва поля Тип даних Розмір 
поля 
id  унікальний ідентифікатор autoincrement 5 
стану 
deadline термін виконання проекту int 8 
stage of execution етап виконання учасником char 15 
гуртка 
У таблиці 2.5 показано структуру відношення «Role». Дане відношення 
«Role» містить наступні атрибути: унікальний ідентифікатор учасника, роль 
учасника гуртка, ідентифікатор відношення учасника, рік вступу учасника до 
гуртка, ідентифікатор кожного можливого з авторів учасника. Функціональність 
полягає у збільшенні сутності БД, що описано у наступній таблиці 2.5. 
Таблиця 2.5 – Структура відношення «Role» 
Позначення Назва поля Тип даних Розмір 
поля 
id  унікальний ідентифікатор аutoincrement 6 
учасника 
role of participant  роль учасника гуртка сhar 60 
year of entry  рік вступу учасника до гуртка int 4 
id-participant  ідентифікатор відношення аutoincrement 10 
учасника 
id-the author  ідентифікатор кожного з аutoincrement 10 
авторів учасника 
43 
 
У наступній таблиці 2.6 представлено структуру відношення «News». Дане 
відношення «News» містить наступні атрибути: унікальний ідентифікатор новин, 
дата опублікування новини, назва новини, картинка, що відображає тему новини, 
актуальність, текст новини, ідентифікатор відношення новини, ідентифікатор 
кожного з можливих авторів новини. Функціональність відношення «News» 
полягає у розширеному представленні сутності бази даних, яку описано у таблиці 
2.6. 
Таблиця 2.6 – Структура відношення «News» 
Позначення Назва поля Тип даних Розмір 
поля 
id  унікальний ідентифікатор autoincrement 7 
новин 
name  назва новини  char 30 
date  дата публікування новини int 8 
photo  картинка, що саме відображає image - 
тему новини 
text  текст новини  char 100 
topicality актуальність матеріалу   
id-news  Ідентифікатор відношення autoincrement 9 
новини 
id-the author  ідентифікатор кожного з autoincrement 9 
можливих авторів новини 
У таблиці 2.7 описано структуру відношення «Admin». Дане відношення 
«Admin» містить наступні атрибути: унікальний ідентифікатор адміністратора, вхід 
на сторінку сайту, пароль для входу, ідентифікатор відношення адміністратора. 
Функціональність структури «Admin» полягає у розширенні компонентів, що 
містяться у деякій сутності БД, що описані у таблиці 2.7. 
 
 
44 
 
Таблиця 2.7 – Структура відношення «Admin» 
Позначення Назва поля Тип даних Розмір поля 
id  унікальний ідентифікатор autoincrement 5 
адміністратора 
login  вхід до сайту  char 8 
password  пароль для входу int 10 
id-admin  ідентифікатор відношення autoincrement 6 
адміністратора 
 
Отже, база даних нашого сайту складається з описаних сутностей, що тісно 
пов’язані один з одним між собою та виконують деякі складові, функції при 
заходженні, та користуванні сайтом наукового студентського гуртка 
«Програмування». 
Висновки до розділу 2 
У даному розділі проведено деякий аналіз вимог до створюваного web-сайту 
наукового студентського гуртка. У результаті роботи, було сформовано 
функціональні вимоги до роботи web-сайту у вигляді деяких діаграм варіантів їх 
використання. Далі було сформовано деяку ієрархічну структуру нашого web-
сайту, як для власне користувача, так і для самого адміністратора системи. Для 
повної візуалізації представлених способів реалізації базових функціональних 
вимог до системи спроектовано деякі ескізи головних сторінок web-сайту.  
Достатньо важливою складовою практично будь-якої системи є її база даних. 
Тож у цьому розділі спроектовано структуру необхідної бази даних web-сайту 
наукового студентського гуртка, а також детально описано практично кожне 
реляційне відношення через ER-діаграми. 
 
  
45 
 
3 WEB-САЙТ НАУКОВОГО СТУДЕНТСЬКОГО ГУРТКА 
«ПРОГРАМУВАННЯ» 
3.1 Основні сценарії потрібної роботи web-сайту наукового 
студентського гуртка 
Для реалізації web-сайту наукового гуртка для студентів кафедри потрібно 
розробити два основних модулі: 
- модуль адміністратора;  
- модуль користувача. 
Модуль адміністратора має забезпечити можливість для оновлення, 
видалення та редагування нової інформації, що міститься на даному web-сайті 
наукового студентського гуртка. Модуль має забезпечити адміністратору 
можливість на додання всієї нової інформації на web-сайті наукового гуртка 
студентів кафедри. 
Модуль користувача має забезпечити можливість перегляду всієї необхідної 
інформації про гурток, учасників та готові проекти, чату, а також деяких контактів 
адміністратора web-сайту. Модуль дозволяє користувачу web-сайту отримати 
повну інформацію про науковий гурток для студентів курсу «Програмування», 
також можливість ознайомитися з тематикою навчання та доробок гуртка. Також 
він повинен забезпечити деякому авторизованому користувачу web-сайту дозвіл на 
всю повну інформацію про гурток, активних учасників та наукові проекти гуртка. 
На діаграмі активності буде показано послідовність дій та можливих 
переходів від однієї діяльності до наступної. Візуалізацію таких реалізації функцій 
web-сайту наукового студентського гуртка здійснити можна за допомогою 
діаграми деякої активності, що дозволяє описати послідовно основні можливості 
web-сайту та продемонструвати деякі основні алгоритми виконання операцій. Для 
адміністратора результати активності показано на рисунку 3.1. 
 
46 
 
 
Рисунок 3.1 – Діаграма активності для можливого варіанту використання 
«Авторизація» (для адміністратора) 
На рисунку 3.1 продемонстровано авторизований вхід адміністратора до 
інформації web-сайту наукового студентського гуртка. Адміністратор також має 
право переглядати кожну сторінку, що міститься на web-сайті. Також 
адміністратору даного сайту надано можливість видаляти та оновлювати сторінки, 
редагувати, додавати, розміщені матеріали на web-сайті. 
На діаграмі сторінки «Інформація про гурток» показано деяку послідовність 
переходів по web-сайту про гурток для можливого користувача. Для варіанту 
використання «Додати проект» вигляд діаграми активності подано на рисунку 3.2. 
 
47 
 
 
Рисунок 3.2 – Діаграма активності варіанту використання сторінки «Додати 
проект» (для адміністратора) 
З рисунку 3.2 видно що для реалізації процесу перегляду інформаційної 
сторінки даного web-сайту «Актуальні проекти», адміністратор також має право 
додавати новий проект, а також редагувати та видаляти його при такій 
необхідності. При доданні проекту адміністратор повинен вказати назву проекту; 
вставити фото; відсоток виконання проекту розробниками; що зображує результат 
проекту – пристрій чи програму; виконавців проекту та опис роботи проекту. Після 
додання проекту, адміністратор отримує можливість перейти назад до головної 
сторінки сайту. 
Ще одним із основних процесів системи є пошуковий модуль системи, який 
може здійснювати і користувач, і адміністратор. Діаграма такої активності для 
пошуку інформації у даній системі (для користувача), її проілюстровано на 
наступному рисунку 3.3. 
48 
 
 
Рисунок 3.3 – Діаграма активності для деякого варіанту використання 
«Пошук» (для користувача) 
На рисунку 3.3 представлено процес здійснення пошукового запиту. При 
завантаженні цієї сторінки «Пошук», користувач повинен ввести пошуковий запит. 
Після надання потрібного запиту, відбувається пошук у даній системі та 
виводиться необхідна користувачу знайдена інформація та має можливість 
повернутися на головну сторінку web-сайту. 
Ще одним із основних процесів системи є описаний процес ознайомлення 
користувача з повною наявною інформацією про даний гурток. Діаграма активності 
для такого ознайомлення з інформацією про даний гурток (для користувача), 
проілюстрована на рисунку 3.4. 
 
49 
 
 
Рисунок 3.4 – Діаграма активності описана для варіанту використання 
«Переглянути інформацію про студентський гурток»(для користувача) 
Реалізація можливості перегляду сторінки web-сайту «Інформація про 
студентський гурток» подано на рисунку 3.4. Після того, як користувач перейшов 
на основну сторінку web-сайту наукового студентського гуртка, він має вибрати 
пункт з навігаційного меню «Інформація про гурток» та перейти на потрібну 
сторінку. 
Одним із основних процесів системи є перегляд готових проектів, які можуть 
здійснювати як власне користувач, так і сам адміністратор. Діаграма активності для 
такого перегляду інформації про готові проекти в даній системі (для користувача), 
продемонстровано та описано на рисунку 3.5. 
 
50 
 
 
Рисунок 3.5 – Діаграма активності для використання «Переглянути проект» 
(для користувача) 
На даному рисунку 3.5 подано процес перегляду проектів. Користувач 
повинен завантажити домашню сторінку цього web-сайту. Далі все ж таки 
необхідно перейти через головне меню сайту на сторінку «Актуальні проекти». 
Після цього всього, користувачу необхідно натиснути на обране ним фото проекту, 
і таким чином, потрапивши на розширений опис обраної роботи наукового проекту. 
Ознайомившись із потрібною йому інформацією, користувач може легко 
повернутися на головну сторінку даного web-сайту. 
Одним із основних процесів даної системи є надсилання коротких 
повідомлень, спілкування із аудиторією наукового студентського гуртка для його 
учасників. Діаграма такої активності для надсилання коротких повідомлень, 
обмінюватися цікавою інформацією між учасниками наукового студентського 
гуртка (для користувача), зображено на наступному рисунку 3.6. 
51 
 
 
Рисунок 3.6 – Діаграма активності для варіанту використання «Надіслати 
повідомлення» (для користувача) 
Реалізацію процесу надсилання та отримання повідомлень у чаті 
продемонстровано на рисунку 3.6. І перш за все, користувачу необхідно 
завантажити сторінку чату. Далі необхідно пройти реєстрацію, а саме: вказати ім’я 
та електронну пошту. Якщо вказано все правильно, то користувач надсилає 
повідомлення. А успішно надіслане таке повідомлення виводиться в чаті. 
Одним із самих важливих процесів роботи та функціональності даного сайту 
є подання заявки на участь, яку потрібно здійснити користувачу для доступу до 
web-сайту. Діаграма активності для такого варіанту використання «Подати заявку» 
на участь у науковому студентському гуртку кафедри, проілюстровано на рисунку 
3.7. 
52 
 
 
Рисунок 3.7 – Діаграма активності для варіанту використання «Подати 
заявку» (для користувача) 
На рисунку 3.7 представленому вище подано реалізацію самого процесу 
перегляду сторінки web-сайту гуртка «Інформація про учасників». Для початку, 
користувач повинен завантажити сторінку, далі натиснути кнопку «Подати заявку». 
Для заповнення заявки користувачу необхідно зайти на сторінку з необхідною 
анкетою заявки. В анкеті потрібно вказати: ім’я, e-mail, виконані проекти, та 
відповісти на поставлені запитання: «Чому бажаєте потрапити у наший гурток?», 
а також вказати заклад вищої освіти та натиснути кнопку «подати заявку». 
3.2 Графічний інтерфейс web-сайту наукового студентського гуртка 
На головній сторінці даного сайту наукового гуртка студентів кафедри 
зображено меню, назву, логотип, створено пошук, карта місця розташування та 
календар. Для того, щоб перейти на наступну сторінку сайту, необхідно навести 
53 
 
мишкою на одну із необхідних та вже обраних сторінок меню. Карта дозволяє 
переглянути точне місце знаходження гуртка для полегшення знаходження його, а 
календар дає можливість переглядати дату. На наступному рисунку 3.8 подано 
загальний вигляд власне домашньої сторінки сайту. 
 
Рисунок 3.8 – Загальний вигляд головної «домашньої» сторінки сайту 
«Програмування» 
З головної сторінки користувач має можливість перейти на будь-яку з 
вказаних у меню. Меню містить такі сторінки сайту наукового гуртка: «Про 
гурток», «Інформація про учасників», «Новини», «Актуальні проекти», а також 
«Контакти» та «Чат». На рисунку 3.9 подано приблизний вигляд меню web-сайту 
наукового гуртка. 
54 
 
 
 
Рисунок 3.9 – Загальний вигляд основного меню web-сайту 
Також з основної сторінки можна перейти до «Пошуку». «Пошук» може 
дозволити знайти певну необхідну інформацію чи перейти одразу до потрібної 
сторінки, де власне інформація розташована. На рисунку 3.9 подано поле для 
«Пошуку» сайту. 
 
Рисунок 3.10 – Поле для «Пошуку» сайту 
На рисунку 3.11 показано загальний вигляд сторінки «Про гурток» даного 
web-сайту. Це та сторінка, що інформує користувача про науковий студентський 
гурток «Програмування», історію створення такого гуртка та учасників-активістів 
цього гуртка. На рисунку 3.10 представлено загальний вигляд сторінки «Про 
гурток» web-сайту. Вікно «Чату», за допомогою нього користувач може 
поспілкуватися з учасниками гуртка. 
Рисунок 3.11 – Загальний вигляд сторінки «Про гурток» web-сайту  
На рисунку 3.12 продемонстровано загальний вигляд сторінки «Новини» 
web-сайту гуртка. За допомогою цієї сторінки користувач має можливість 
переглядати всі найновіші новини з комп’ютерних інформаційних технологій. 
Навівши мишкою на поле «Дізнатися більше», користувач зможе перейти на 
сторінку де розміщено набагато більшої кількості новин. Вікно «Чату» дозволяє 
користувачу поспілкуватись з учасниками гуртка. 
55 
 
 
Рисунок 3.12 – Загальний вигляд сторінки «Новини» web-сайту гуртка 
На рисунку 3.13 представлено загальний вигляд сторінки «Інформація про 
учасників» web-сайту наукового студентського гуртка. На цій сторінці користувач 
може знайти інформацію про учасників, подати заявку на участь у гуртку та 
приєднатися, а також ознайомитись з випускниками гуртка. 
 
 
Рисунок 3.13 –Загальний вигляд сторінки web-сайту «Інформація про 
учасників» 
На рисунку 3.14 подано загальний вигляд форми заявки на участь у гуртку. 
Розташовано меню, що дозволяє перейти з будь-якої сторінки на іншу користувачу. 
Також розташовано вікно «Чату», що дозволяє поспілкуватись з учасниками 
гуртка. 
56 
 
 
Рисунок 3.14 – Загальний вигляд форми «Подати заявку» 
На рисунку 3.15 представлено загальний вигляд сторінки web-сайту кращих 
науковців гуртка, наприклад: Абраменко Сергія, Баб’юк Олену, Геращенко Ірину, 
Григоришин В’ячеслава, Давиденко Ігоря. 
 
 
Рисунок 3.15 – Загальний вигляд сторінки «Кращі науковці гуртка» web-сайту  
На рисунку 3.16 представлено загальний вигляд сторінки web-сайту  всіх 
учасників гуртка. Під кожною фотографією присутня інформація про цих учасників 
гуртка: вік, заклад вищої освіти, назви проектів, які розроблялися. 
57 
 
 
Рисунок 3.16 – Загальний вигляд сторінки «Кращі учасники» web-сайту 
гуртка 
На рисунку 3.17 подано загальний вигляд сторінок всіх актуальних проектів. 
В кінці сторінки розміщена кнопка «Готові наукові проекти», що дозволяє 
переглянути проекти учасників наукового студентського гуртка. 
 
58 
 
 
Рисунок 3.17 – Загальний вигляд сторінки «Актуальні проекти» 
На рисунку 3.18 проілюстровано загальний вигляд сторінки одного з 
проектів «Keyboard for iOS». На ній міститься інформація про проект, виконавців 
проекту та відсотки виконання проекту, а також розташована кнопка повернення, 
що дозволяє повернутися до проектів. 
59 
 
 
Рисунок 3.18 – Загальний вигляд сторінки ще одного проекту  
Keyboard for iOS 
На наступному рисунку 3.19 показано загальний вигляд сторінки проекту 
FlawLess App ПЗ. На даній сторінці розміщено інформацію про проект, виконавців 
даного проекту та відсотки по виконанню цього проекту, також є наявна кнопка 
повернення, що дає можливість повернутися до проектів. 
 
Рисунок 3.19 – Загальний вигляд сторінки ще одного проекту FlawLess App 
ПЗ 
На рисунку 3.20 показано загальний вигляд сторінки проекту «бібліотека 
macOS додатків SETApp». На сторінці розміщена інформація про проект, 
виконавців цього проекту та відсотки виконання даного проекту, також присутня 
60 
 
кнопка повернення, що дозволяє користувачу повернутися до інших проектів. 
 
Рисунок 3.20 – Загальний вигляд сторінки проекту «бібліотека macOS 
додатків SET App» 
На рисунку 3.21 продемонстровано загальний вигляд сторінки проекту 
Grammarly. На цій сторінці розташовано коротку інформацію про цей проект, 
виконавці проекту та відсотки завершення проекту, також є наявна кнопка 
повернення, що дає можливість користувачу перейти до інших проектів. 
 
 
Рисунок 3.21 – Загальний вигляд сторінки проекту Grammarly ПЗ 
На рисунку 3.22 вказано загальний вигляд сторінки «Контакти» web-сайту. 
На даній сторінці присутня розширена інформація про адміністратора сайту 
61 
 
наукового студентського гуртка «Програмування»: карта-адреса, телефон, e-mail, а 
також можливість написати запитання на електронну пошту адміністратора сайту. 
 
Рисунок 3.22 – Загальний вигляд сторінки web-сайту «Контакти» 
На рисунку 3.23 продемонстровано можливий вигляд входу для користувачів 
за допомогою написання електронної пошти та паролю або автоматичного входу 
через Facebook або Google+. 
 
Рисунок 3.23 – Загальний вигляд реєстраційної підписки входу на сайт для 
користувача 
На рисунку 3.24 подано загальний вигляд «Чату», за допомогою якого 
користувач має можливість поспілкуватися з учасниками гуртка. 
62 
 
 
Рисунок 3.24 –Загальний вигляд сторінки «Чат» (буде реалізований) 
3.3 Тестування web-сайту наукового студентського гуртка 
«Програмування» 
Під час розробки web-сайту наукового студентського гуртка проведено 
системне тестування, а також тестування графічного інтерфейсу та функціональне 
тестування. При розробці web-сайту наукового гуртка «Програмування» було 
налаштовано базу даних web-сайту гуртка. 
При написанні web-сайту наукового студентського гуртка більша частина 
сайту було протестована за допомогою CMS. Таким чином, розподіл тестових 
випадків з функціонального тестування за різними варіантами використання 
системи подано у таблиці 3.1. 
63 
 
Таблиця 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 
Пошук 10 11 
Під час процесу тестування web-сайту наукового студентського гуртка було 
перевірено правильність функціонування web-сайту. Процес тестування графічного 
інтерфейсу web-сайту наукового студентського гуртка було проведено переважно 
вручну. А також перевірено деяку коректність розташування всіх елементів, що 
64 
 
розміщені на відповідних сторінках web-сайту. 
Крім того, проведено функціональне тестування системи (див. табл. 3.1), усі 
виявлені під час нього дефекти було успішно усунуто. Тому можна стверджувати, 
що розроблений в межах бакалаврської роботи web-сайт наукового гуртка 
функціонує коректно та реалізує увесь запланований функціонал описаний у 2 
розділі цієї випускної роботи. 
Висновки до розділу 3 
У цьому розділі було розроблено відповідні діаграми активності для 
можливих варіантів використання, їх сценарії, сайт наукового студентського гуртка 
для студентів кафедри, а також було досить успішно проведено тестування 
можливої і запланованої функціональності сайту та перевірено даний web-сайт на 
коректність його роботи. 
  
65 
 
ВИСНОВКИ 
 
Мета кваліфікаційної роботи бакалавра досягнута, тобто під час виконання 
випускної роботи бакалавра було розв’язано такі задачі: 
- проведено аналіз об’єкту дослідження та предметної області, на основі 
результатів зробленого аналізу сайтів-аналогів наукових студентських груп, що 
дало можливість визначити основні напрямки та деякі структурні складові сайтів 
даного схожого типу; 
- досліджено основні головні функціональні і нефункціональні вимоги до 
розробки такого сайту, на основі аналізу розглянутої структури ядра науково-
дослідних сайтів; 
- сформовано специфікацію необхідних вимог до сайтів наукових гуртків 
з залученням студентів, що дало можливість розробити потрібну структуру web-
сайту на прикладі наукового гуртка «Програмування»; 
- спроектовано основні можливі сценарії роботи розроблювального web-
сайту гуртка у вигляді діаграм активності користувачів системи; 
- спроектовано структуру web-сайту наукового гуртка «Програмування», 
що дало хорошу можливість реалізувати програмні модулі web-сайту гуртка; 
- реалізовано web-сайт наукового студентського гуртка «Програмування» 
та проведено його тестування та порівняння даного реалізованого web-сайту з 
сайтами що являються аналогами. 
  
66 
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. Інтернет – 2016. URL: https://searchwindevelopment.techtarget.com -  
(дата звернення: 13.02.22).. 
2. Переваги та недоліки інтернету – 2015. URL: 
https://www.importantindia.com -  (дата звернення: 13.02.22).. 
3. Основні плюси і мінуси інтернету. – 2015. 
URL: http://poradumo.com.ua - (дата звернення: 13.02.22). 
4. Ашманов І. Оптимізація та розвиток сайтів в пошукових системах: 
навч. посіб. для студ. ВНЗ / І. С. Ашманов, А. І. Іванов. – Вид. 3-тє. – К. : Пітер, 
2011. – 464с. 
5. Класифікація web-сайтів – 2014. URL: 
https://sites.google.com/site/yaremusinform/home -  (дата звернення: 16.02.22).. 
6. Web-сайт – 2012. URL: http://www.webtec.com.ua – Web-сайт: 
визначення й застосування. 
7. Класифікація web-ресурсів – 2010. URL: 
https://sites.google.com/site/yaremusinform/home - (дата звернення: 16.02.22).. 
8. Web-ресурси – 2018. URL: https://msdn.microsoft.com -  (дата звернення: 
16.02.22). 
9. Людмила Чистякова. Особливості організації гуртка: наукові записки: 
стаття. / Людмила Чистякова. – К. : Вид.група «Основа», 2013. - 254 с. 
10. Гуртки програмування – 2003-2018. URL: 
https://sites.google.com/site/yaremusinform/home -  (дата звернення: 22.02.22). 
11. Гурток програмування «Кодфорс» – 2008. URL: http://school16.zp.ua -  
(дата звернення: 22.02.22). 
12. Гурток – 1994 - 2018. URL: http://zakon2.rada.gov.ua –  (дата звернення: 
22.02.22). 
13. Н. Журавська. Науковий гурток: наукові записки: стаття. / Н. 
Журавська, Л. Чистякова. – К. : Вид.група «Гурток», 2016. - 2 с. 
14. Шрамко Олексій. Гурток як форма соціалізації особистості: наукові 
67 
 
записки: стаття. / Шрамко Олексій. – К. : Вид.група «Гурток», 2014. - 15 с. 
15. JavaScript фреймворки – 2017. URL: https://proglib.io -  (дата звернення: 
23.04.22). 
16. CMS (система управління вмістом) – 2017. URL: https://proglib.io -  (дата 
звернення: 23.04.22). 
17. CMS,   . – 2015. URL: http://www.ratingruneta.io - (дата звернення: 
23.04.22). 
18. Види CMS – 2012. URL: https://habr.com –  (дата звернення: 23.04.22). 
19. Веб-програмування. CMS,   . – 2015. URL: http://webstudio2u.net –  (дата 
звернення: 23.04.22). 
20. Програми для створення сайтів – 2001-2015. URL: 
http://webstudio2u.net/ua/programming/188-html-redactor.html –  (дата звернення: 
28.04.22). 
21. Фреймворки в web-розробці – 2004-2018. URL: https://web-creator.com –  
(дата звернення: 28.04.22). 
22. Фреймворки – 2018. URL: https://habr.com/post/253297/ – (дата 
звернення: 28.04.22). 
23. Положення про студентські наукові гуртки – 2021. URL: 
http://chdtu.edu.ua/page=ua/1361polojennia –  (дата звернення: 23.03.22). 
24. Функції гуртка – 2014. URL: https://blog-sumchenko-oksani-mikolajivni-
zdvr-divichkivskenvo4.webnode.com. ua/posadova-instruktsiya-kerivnika-gurtka/ –  
(дата звернення: 23.03.22). 
25. Кудлай О. В. Гурток як форма організації: навч. посіб. для студ. ВНЗ / 
О. В. Кудлай, Н. М. Носовець. – Вид. 2-тє. – К. : Львів, 2015. – 177 с. 
26. Гурток як синтетична форма – 2014. URL: https://blog-sumchenko-zdvr-
divichkivskenvo4.webnode.com.ua/posadova-instruktsiya-kerivnika-gurtka/ –  (дата 
звернення: 24.03.22). 
27. Гурток. Науковий гурток – 2010. URL: https://zu.edu.ua– Гурток. (дата 
звернення: 24.03.22). 
  
68 
 
ДОДАТОК А 
 
 «Затверджую»               
Завідувач кафедри КН та СА 
проф. Триус Ю.В. 
_________________________ 
                                                               «____»______________2022 р. 
 
 
 
 
 
 
ПРОЕКТУВАННЯ І РОЗРОБКА ІНФОРМАЦІЙНОГО WEB-САЙТУ 
НАУКОВОГО ГУРТКА КАФЕДРИ ЗАКЛАДУ ВИЩОЇ ОСВІТИ  
Специфікація  
482.ЧДТУ. 22090-01   
 
Листів 2 
 
 
 
 
 
Розробник                          ____________________                 Баланюк Д. О. 
 
Керівник                            ____________________                 Андрієнко В. О. 
 
 
 
 
 
Черкаси – 2022 
69 
 
482.ЧДТУ. 22090-01 
Позначення Найменування Примітка 
   
   
 Документація  
   
482.ЧДТУ. 22090-01    Графічний інтерфейс  
34 01 
482.ЧДТУ. 22090-01    Текст програми  
12 01 
   
   
   
   
   
   
   
   
 
  
70 
 
ДОДАТОК Б 
 
 
 
 
 
 
 
ПРОЕКТУВАННЯ І РОЗРОБКА ІНФОРМАЦІЙНОГО WEB-САЙТУ 
НАУКОВОГО ГУРТКА КАФЕДРИ ЗАКЛАДУ ВИЩОЇ ОСВІТИ 
 
ГРАФІЧНИЙ ІНТЕРФЕЙС НАУКОВОГО СТУДЕНТСЬКОГО 
ГУРТКА 
482.ЧДТУ. 22090-01 34 01 
Листів 11 
 
 
 
 
Розробник                          ____________________                Баланюк Д.О. 
 
 
 
 
 
 
 
Черкаси – 2022  
71 
 
Графічний інтерфейс наукового студентського гуртка 
На головній сторінці даного сайту наукового гуртка студентів кафедри 
зображено меню, назву, логотип, створено пошук, карта місця розташування та 
календар. Для того, щоб перейти на наступну сторінку сайту, необхідно навести 
мишкою на одну із необхідних та вже обраних сторінок меню. Карта дозволяє 
переглянути точне місце знаходження гуртка для полегшення знаходження його, а 
календар дає можливість переглядати дату. На наступному рисунку Б.1 подано 
загальний вигляд власне домашньої сторінки сайту. 
 
Рисунок Б.1 – Загальний вигляд головної «домашньої» сторінки сайту 
«Програмування» 
72 
 
З головної сторінки користувач має можливість перейти на будь-яку з 
вказаних у меню. Меню містить такі сторінки сайту наукового гуртка: «Про 
гурток», «Інформація про учасників», «Новини», «Актуальні проекти», а також 
«Контакти» та «Чат». На рисунку Б.2 подано приблизний вигляд меню web-сайту 
наукового гуртка. 
 
 
Рисунок Б.2 – Загальний вигляд основного меню web-сайту 
Також з основної сторінки можна перейти до «Пошуку». «Пошук» може 
дозволити знайти певну необхідну інформацію чи перейти одразу до потрібної 
сторінки, де власне інформація розташована. На рисунку Б.3 подано поле для 
«Пошуку» сайту. 
 
Рисунок Б.3 – Поле для «Пошуку» сайту 
На рисунку 3.11 показано загальний вигляд сторінки «Про гурток» даного 
web-сайту. Це та сторінка, що інформує користувача про науковий студентський 
гурток «Програмування», історію створення такого гуртка та учасників-активістів 
цього гуртка. На рисунку Б.4 представлено загальний вигляд сторінки «Про гурток» 
web-сайту. Вікно «Чату», за допомогою нього користувач може поспілкуватися з 
учасниками гуртка. 
Рисунок Б.4 – Загальний вигляд сторінки «Про гурток» web-сайту  
На рисунку Б.5 продемонстровано загальний вигляд сторінки «Новини» 
web-сайту гуртка. За допомогою цієї сторінки користувач має можливість 
73 
 
переглядати всі найновіші новини з комп’ютерних інформаційних технологій. 
Навівши мишкою на поле «Дізнатися більше», користувач зможе перейти на 
сторінку де розміщено набагато більшої кількості новин. Вікно «Чату» дозволяє 
користувачу поспілкуватись з учасниками гуртка. 
 
Рисунок Б.5 – Загальний вигляд сторінки «Новини» web-сайту гуртка 
На рисунку Б.6 представлено загальний вигляд сторінки «Інформація про 
учасників» web-сайту наукового студентського гуртка. На цій сторінці користувач 
може знайти інформацію про учасників, подати заявку на участь у гуртку та 
приєднатися, а також ознайомитись з випускниками гуртка. 
 
 
Рисунок Б.6 –Загальний вигляд сторінки web-сайту «Інформація про 
учасників» 
На рисунку Б.7 подано загальний вигляд форми заявки на участь у гуртку. 
Розташовано меню, що дозволяє перейти з будь-якої сторінки на іншу користувачу. 
Також розташовано вікно «Чату», що дозволяє поспілкуватись з учасниками 
гуртка. 
74 
 
 
Рисунок Б.7 – Загальний вигляд форми «Подати заявку» 
На рисунку Б.8 представлено загальний вигляд сторінки web-сайту кращих 
науковців гуртка, наприклад: Абраменко Сергія, Баб’юк Олену, Геращенко Ірину, 
Григоришин В’ячеслава, Давиденко Ігоря. 
 
 
Рисунок Б.8 – Загальний вигляд сторінки «Кращі науковці гуртка» web-сайту  
На рисунку Б.9 представлено загальний вигляд сторінки web-сайту  всіх 
учасників гуртка. Під кожною фотографією присутня інформація про цих учасників 
гуртка: вік, заклад вищої освіти, назви проектів, які розроблялися. 
75 
 
 
Рисунок Б.9 – Загальний вигляд сторінки «Кращі учасники» web-сайту 
гуртка 
На рисунку Б.10 подано загальний вигляд сторінок всіх актуальних проектів. 
В кінці сторінки розміщена кнопка «Готові наукові проекти», що дозволяє 
переглянути проекти учасників наукового студентського гуртка. 
 
76 
 
 
Рисунок Б.10 – Загальний вигляд сторінки «Актуальні проекти» 
На рисунку Б.11 проілюстровано загальний вигляд сторінки одного з 
проектів «Keyboard for iOS». На ній міститься інформація про проект, виконавців 
проекту та відсотки виконання проекту, а також розташована кнопка повернення, 
що дозволяє повернутися до проектів. 
77 
 
 
Рисунок Б.11 – Загальний вигляд сторінки ще одного проекту  
Keyboard for iOS 
На наступному рисунку Б.12 показано загальний вигляд сторінки проекту 
FlawLess App ПЗ. На даній сторінці розміщено інформацію про проект, виконавців 
даного проекту та відсотки по виконанню цього проекту, також є наявна кнопка 
повернення, що дає можливість повернутися до проектів. 
 
Рисунок Б.12 – Загальний вигляд сторінки ще одного проекту FlawLess App 
На рисунку Б.13 показано загальний вигляд сторінки проекту «бібліотека 
macOS додатків SETApp». На сторінці розміщена інформація про проект, 
виконавців цього проекту та відсотки виконання даного проекту, також присутня 
кнопка повернення, що дозволяє користувачу повернутися до інших проектів. 
78 
 
 
Рисунок Б.13 – Загальний вигляд сторінки проекту «бібліотека macOS 
додатків SET App» 
На рисунку Б.14 продемонстровано загальний вигляд сторінки проекту 
Grammarly. На цій сторінці розташовано коротку інформацію про цей проект, 
виконавці проекту та відсотки завершення проекту, також є наявна кнопка 
повернення, що дає можливість користувачу перейти до інших проектів. 
 
 
Рисунок Б.14 – Загальний вигляд сторінки проекту Grammarly ПЗ 
На рисунку Б.15 вказано загальний вигляд сторінки «Контакти» web-сайту. 
На даній сторінці присутня розширена інформація про адміністратора сайту 
наукового студентського гуртка «Програмування»: карта-адреса, телефон, e-mail, а 
79 
 
також можливість написати запитання на електронну пошту адміністратора сайту. 
 
Рисунок Б.15 – Загальний вигляд сторінки web-сайту «Контакти» 
На рисунку Б.16 продемонстровано можливий вигляд входу для користувачів 
за допомогою написання електронної пошти та паролю або автоматичного входу 
через Facebook або Google+. 
Рисунок Б.16 – Загальний вигляд реєстраційної підписки входу на сайт для 
користувача 
На рисунку Б.17 подано загальний вигляд «Чату», за допомогою якого 
користувач має можливість поспілкуватися з учасниками гуртка. 
80 
 
 
Рисунок Б.17 –Загальний вигляд сторінки «Чат» (буде реалізований) 
 
В додатку Б було показано відповідні діаграми та активності для всіх 
можливих варіантів їх використання, показано сценарії, сайт мабутнього наукового 
студентського гуртка для студентів кафедри, а також було досить успішно 
проведено тестування можливої і запланованої функціональності сайту та 
перевірено даний web-сайт на коректність його роботи. 
  
81 
 
ДОДАТОК В 
 
                                                       
 
 
 
 
 
 
 
 
 
ПРОЕКТУВАННЯ І РОЗРОБКА ІНФОРМАЦІЙНОГО WEB-САЙТУ 
НАУКОВОГО ГУРТКА КАФЕДРИ ЗАКЛАДУ ВИЩОЇ ОСВІТИ 
 
 
Текст програми  
482.ЧДТУ. 22090-01 12 01 
 
Листів 8 
 
 
 
Розробник                          ____________________                  Баланюк Д.О. 
 
 
 
 
 
 
 
 
Черкаси – 2022 
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', 
 data: () => ({}), 
 components: { 
 MenuComponent, 
 HeaderComponent, 
 FooterComponent 
 } 
 } 
</script> 
<style lang="css"> 
 .page { 
 width: 100%; 
 float: left; 
 padding-bottom: 20px; 
 border: 5px; 
 background: #1b1b1b; 
 color: #fff; 
 } 
 .page .title-block { 
83 
 
 font-size: 200%; 
 padding: 10px 25px; 
 text-transform: uppercase; 
 font-weight: bold; 
 } 
</style> 
2. Фрагмент коду з файлу HomeComponent.vue: відповідає за  
відображення головної сторінки сайту. 
<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> 
 <thead> 
 <tr> 
 <th class="text-left">ПІБ</th> 
84 
 
 <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() { 
 axios.get('/api/info') 
 .then((response) => { 
 this.about = response.data[0].value; 
85 
 
 }) 
 }, 
 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; 
 padding: 10px 20px; 
 border: 1px solid #000; 
 } 
 .news a:hover { 
 color: #fbef0d; 
 } 
86 
 
 .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) { 
 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); 
87 
 
 } 
 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; 
 } 
 $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(); 
88 
 
 $data = $request->all(); 
 $request = $model->create($data); 
 return response()->json($request); 
 } 
 function deleteComment($id) { 
 Comments::find($id)->delete(); 
 }
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
