Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/8926| Назва: | Техноблог в галузі електроніки та інформатики |
| Автори: | Заспа, Григорій Олександрович Бойко, Денис Юрійович |
| Ключові слова: | блог;аналіз;розробка;тестування;технології;користувачі;blog;analysis;development;testing;technology;users |
| Дата публікації: | 13-чер-2023 |
| Короткий огляд (реферат): | Анотація
Розробив : Бойко Денис Юрійович
Спеціальність: 121. Інженерія Програмного забезпечення
Мета роботи – є розробка програмного забезпечення що представляє з
себе сайт блог сучасного виду.
Об’єкт розробки – є техноблог в галузі електроніки та інформатики.
Практичне значення отриманих результатів – полягає у тому, щоб
надати інформаційний вплив на користувачів, забезпечити їх актуальною
інформацією, надає представлення про блоги. Інформацію можна буде
використовувати для аналізу ринку, попиту на технології. Також має
розважальний характер і, за допомогою можливих гайдів, підвищує
комп’ютерну грамотність громадян.
В першому розділі проводиться загальний аналіз для того щоб
розробити веб сайт такого типу власноруч було розглянуто існуючі аналоги
систем. Для аналізу було обрано інші популярні блоги.
В другому розділі було створено систему, розроблено план для
реалізації, і діаграми реалізації майже всіх аспектів розроблюваного проекту.
Також було розібрано основні поняття, цілі та вимоги до розроблюваного
проекту.
В третьому розділі описано етапи створення техноблогу в області
інформації та технологій. Було обґрунтовано засоби реалізації та описано
структурну та логічні схеми функціонування. Також було описано як
проводилось тестування системи. Annotation Developed by: Boyko Denis Yurievich Specialty: 121. Software engineering The purpose of the work is to develop software in the form of a blog site in a modern way. The object of development is a technoblog in the field of electronics and computer science. The practical significance of the results is to provide information impact on users, provide them with up-to-date information, and provide an overview of blogs. The information can be used to analyze the market and demand for technology. It also has an entertaining character and, with the help of possible guides, increases the computer literacy of citizens. In the first section, a general analysis is carried out in order to develop a website of this type by ourselves, and existing analogues of the systems were considered. Other popular blogs were selected for analysis. In the second section, the system was created, a plan for implementation was developed, and diagrams of almost all aspects of the project were created. The main concepts, goals and requirements for the project under development were also analyzed. The third section describes the stages of creating a technoblog in the field of information and technology. The means of implementation were substantiated and the structural and logical schemes of functioning were described. It also describes how the system was tested. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/8926 |
| Розташовується у зібраннях: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| Кваліфіккційна робота бакалавра Бойко Денис Юрійович.pdf Restricted Access | 5.29 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
ЧДТУ 232099.03 ПЗ
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
«бакалавра»
освітній рівень
на тему: Техноблог в галузі електроніки та інформатики
Виконав: студент 4 курсу, групи ПЗС-2044
Спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)
Студент Бойко Д.Ю.
(прізвище та ініціали)
Керівник Заспа Г.О.
(прізвище та ініціали)
Рецензент Крайовий В.М.
(прізвище та ініціали)
Черкаси 2023
3
ЧДТУ 232099.03 ПЗ
___ Черкаський державний технологічний університет_________________
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
___________Голуб С.В.
«___» _______________ 2023 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Бойко Денис Юрійович___________________________
(прізвище, ім’я, по батькові)
1.Тему проекту (роботи) Техноблог в області електроніки та
технологій_____________________________________________________________________
_______
Керівник проекту (роботи) Заспа Григорій Олександрович, старший викладач
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від « 24 » лютого
2023 року №43/04
2. Строк подання студентом проекту (роботи) 24 грудня 2022 р.
3. Вхідні дані до проекту (роботи) стандарти програмного забезпечення; процеси управління;
вимоги до проекту; календарне планування проекту; управління ризиками проекту;
управління
ресурсами_______________________________________________________________________
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити) Вступ;
ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ'ЯЗАННЯ ПОСТАВЛЕНИХ ЗАВДАНЬ;___________
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ СИСТЕМИ;______________________
РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ______________________
Висновки; _______________________________________________________________________
Список використаних джерел; ______________________________________________________
Додатки. ________________________________________________________________________
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Модель предметної області;________________________________________________________
Діаграма класів;__________________________________________________________________
Діаграма прецендентів;____________________________________________________________
Діаграма пакетів;_________________________________________________________________
Діаграма
компонентів;_____________________________________________________________
4
ЧДТУ 232099.03 ПЗ
Діаграма
діяльності;_______________________________________________________________
Діаграма
послідовності;____________________________________________________________
6. Консультанти розділів проекту (роботи)
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання 02 грудень 2022 р.
КАЛЕНДАРНИЙ ПЛАН
Строк
виконання
№
Назва етапів випускної роботи етапів Примітки
п/п випускної
роботи
1 Постановка задачі 05.12.2022 виконано
2 Підготовка завдання 13.12.2022 виконано
3 Погодження завдання 16.12.2022 виконано
4 Затвердження завдання 19.02.2022 виконано
Основна стадія
1 Підбір матеріалів 27.02.2022 виконано
2 Аналіз шляхів вирішення поставленої задачі 04.02.2022 виконано
3 Розрахунок основних параметрів роботи 10.03.2022 виконано
4 Вибір кінцевого варіанту проектного рішення 17.03.2022 виконано
5 Оформлення первісної редакції роботи 25.04.2022 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень з 10.05.2023 виконано
керівником
2 Оформлення пояснювальної записки роботи в 19.05.2023 виконано
кінцевій редакції
3 Попередній захист роботи 22.05.2023 виконано
4 Затвердження роботи 29.06.2023 виконано
5 Рецензування роботи 01.06.2023 виконано
6 Захист роботи
Студент _____________________ Бойко Д.Ю.
(підпис) (прізвище та ініціали)
Керівник проекту (роботи) _____________________ Заспа Г.О.
(підпис) (прізвище та ініціали)
5
ЧДТУ 232099.03 ПЗ
Анотація
Розробив : Бойко Денис Юрійович
Спеціальність: 121. Інженерія Програмного забезпечення
Мета роботи – є розробка програмного забезпечення що представляє з
себе сайт блог сучасного виду.
Об’єкт розробки – є техноблог в галузі електроніки та інформатики.
Практичне значення отриманих результатів – полягає у тому, щоб
надати інформаційний вплив на користувачів, забезпечити їх актуальною
інформацією, надає представлення про блоги. Інформацію можна буде
використовувати для аналізу ринку, попиту на технології. Також має
розважальний характер і, за допомогою можливих гайдів, підвищує
комп’ютерну грамотність громадян.
В першому розділі проводиться загальний аналіз для того щоб
розробити веб сайт такого типу власноруч було розглянуто існуючі аналоги
систем. Для аналізу було обрано інші популярні блоги.
В другому розділі було створено систему, розроблено план для
реалізації, і діаграми реалізації майже всіх аспектів розроблюваного проекту.
Також було розібрано основні поняття, цілі та вимоги до розроблюваного
проекту.
В третьому розділі описано етапи створення техноблогу в області
інформації та технологій. Було обґрунтовано засоби реалізації та описано
структурну та логічні схеми функціонування. Також було описано як
проводилось тестування системи.
Ключові слова: блог, аналіз, розробка, тестування, технології,
користувачі.
6
ЧДТУ 232099.03 ПЗ
Annotation
Developed by: Boyko Denis Yurievich
Specialty: 121. Software engineering
The purpose of the work is to develop software in the form of a blog site in a
modern way.
The object of development is a technoblog in the field of electronics and
computer science.
The practical significance of the results is to provide information impact on
users, provide them with up-to-date information, and provide an overview of blogs.
The information can be used to analyze the market and demand for technology. It
also has an entertaining character and, with the help of possible guides, increases the
computer literacy of citizens.
In the first section, a general analysis is carried out in order to develop a
website of this type by ourselves, and existing analogues of the systems were
considered. Other popular blogs were selected for analysis.
In the second section, the system was created, a plan for implementation was
developed, and diagrams of almost all aspects of the project were created. The main
concepts, goals and requirements for the project under development were also
analyzed.
The third section describes the stages of creating a technoblog in the field of
information and technology. The means of implementation were substantiated and
the structural and logical schemes of functioning were described. It also describes
how the system was tested.
Keywords: blog, analysis, development, testing, technology, users.
7
ЗМІСТ
ВСТУП ....................................................................................................................... 10
1 ОГЛЯД ТА ПОРІВНЯЛЬНИЙ АНАЛІЗ АНАЛОГІВ ................................... 12
1.1 Призначення та область застосування веб додатку «Техноблог в
галузі електроніки та технологій» ....................................................................... 12
1.2 Аналіз існуючих сайтів техноблогів ...................................................... 12
1.2.1Техноблог 4.PDA........................................................................... 13
1.2.2 Блог LuckyLink ............................................................................. 15
1.3 Постановка задачі на розробку проекту інтернет сайту «Техноблог
в галузі електроніки та технологій» .................................................................... 18
1.4 Вибір середовища розробки .................................................................... 19
2 ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ СИСТЕМИ ...... 21
2.1 Моделювання предметної області .......................................................... 21
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області .................................................................................... 22
2.1.2 Елементи моделювання предметної області ............................. 24
2.2 Формування та аналіз вимог .................................................................. 27
2.2.1 Формування вимог до програмного забезпечення. .................. 27
2.2.1.1 Первинні і детальні вимоги ................................................ 27
2.2.1.2 Вимоги замовника і розробника. Функціональні та не
функціональні вимоги ............................................................................................... 27
2.2.2 Формування вимог за допомогою діаграми прецедентів ........ 29
2.3 Проектування логічної структури програмного комплексу ............ 30
2.3.1 Діаграми класів ............................................................................ 30
2.3.2 Діаграми пакетів .......................................................................... 31
ЧДТУ.232099.003 ПЗ
Зм. Лист №документа Пдпис Дата
окумента
Розроб. Бойко Д.Ю Літ. Лист Листів
Перев. Заспа Г.О Техноблог в галузі електроніки Н 3 71
та інформатики ФІТІС
Н.контр. Півень О.Б. 8
кафедра ПЗАС, ПЗС-2044
Затв. Голуб С.В.
2.4 Архітектурне проектування .................................................................. 32
2.4.1 Діаграма компонентів .................................................................. 32
2.4.2 Розгортання програмної системи на апаратних засобах.
Діаграма розгортання ................................................................................................ 33
2.5 Моделювання поведінки системи .......................................................... 35
2.5.1 Діаграма діяльності ...................................................................... 35
2.5.2 Діаграма послідовності ............................................................... 36
2.5.3 Діаграма комунікації ................................................................... 37
2.5.4 Діаграма скінченого автомату .................................................... 38
3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ..... 40
3.1 Розробка програмного комплексу ......................................................... 40
3.1.1 Обґрунтування вибору засобів реалізації .................................. 40
3.1.2 Опис структурної (функціональної) схеми ............................... 43
3.1.3 Опис логічної схеми системи ..................................................... 44
3.1.4 Розробка бази даних .................................................................... 46
3.1.5 Розробка інтерфейсу користувача .............................................. 50
3.1.6 Опис розробки програмних компонентів .................................. 52
3.2 Тестування системи .................................................................................. 60
3.2.1 Модульне тестування .................................................................. 60
3.2.2 Інтеграційне тестування .............................................................. 63
3.2.3 Системне тестування ................................................................... 64
3.2.4 Приймальне тестування .............................................................. 68
ВИСНОВКИ ............................................................................................................. 72
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ............................................................ 73
ДОДАТОК А .............................................................................................................. 72
ДОДАТОК Б .............................................................................................................. 74
ДОДАТОК В .............................................................................................................. 79
ДОДАТОК Г .............................................................................................................. 99
ЧДТУ.232099.003 ПЗ 9
4
ЧДТУ 232099.03 ПЗ
ВСТУП
Актуальність створення проекту інформаційного блогу обумовлена
необхідністю розповсюдження інформації для людей що працюють у цих
сферах або користуються інтересом до них. Даний програмний засіб може
стати у пригоді кожному хто працює з комп’ютером та машинами для
обчислення. За допомогою свіжої інформації можна прогнозувати ринок
потреб програмних та технічних засобів.
В наш час технологічного розвитку, тотальної комп’ютеризації та
інтернетизації суспільства більшість інформації ми дізнаємося з електронних
носіїв інформації.
Основним джерелом для більшості людей є саме сайти типу блогів та
інформаційних ресурсів.
Блог це перш за все мережевий інформаційний щоденник, записи якого
можуть містити текст, ілюстрації або мультимедіа, який заповнюється одним
або декількома авторами. Людина, яка веде блог, називається блогером. На
відміну від персональних щоденників, блоги пишуться з розрахунком, що їх
прочитає певна аудиторія.
В даний час особливість блогів полягає не тільки в структурі записів, але
і простоті додавання нових записів. Користувач просто звертається до веб-
сервера, проходить процес ідентифікації користувача, після чого він додає
новий запис до своєї колекції. Сервер представляє інформацію як
послідовність повідомлень, розміщуючи в самому верху найсвіжіші
повідомлення. Структура колекції нагадує звичну послідовну структуру
щоденника чи журналу.
Об’єктом розробки є техноблог в галузі електроніки та інформатики.
Предметом розробки є методи та засоби створення сайтів, їх дизайну
актуальності деяких мов веб розробки.
Практичне значення одержаних результатів полягає у тому, що
розробка наддасть інформаційний вплив на користувачів, забезпечує їх
10
ЧДТУ 232099.03 ПЗ
актуальною інформацією, наддасть представлення про блоги. Інформації
можна буде використовувати для аналізу ринку, попиту на технології. Також
має розважальний характер і, за допомогою можливих гайдів, підвищує
комп’ютерну грамотність громадян.
Метою даної роботи є розробка сайту спеціалізованого блогу на
сучасний лад.
Для досягнення поставленої мети необхідно виконати наступні
Завдання розробки:
1 Аналіз переваг і недоліків існуючих систем аналогів сайтів для
дослідження сценаріїв майбутньої розробки проекту.
2 Опис і аналіз первинних і детальних вимог.
3 Опис і аналіз загальних, функціональних і якісних вимог до системи.
4 Вибір мови написання: переваги і недоліки.
5 Розробка продукту з описом прийомів оптимізації програмного
продукту.
6 Тестування розробленої системи.
7 Опис результатів розробки.
Особистий внесок автора
Аналіз та розробка було створено власноруч, в рамках кваліфікаційної
роботи бакалавра. Було проаналізовано існуючі аналоги, розроблено план,
вимоги. На основі цих даних було розроблено веб-додаток у вигляді
техноблогу в галузі електроніки та інформатики.
Практичне значення отриманих результатів. Було створено блог як
засіб інформації, шаблон блогу можна буде використати в інших темах, сам
блог написаний актуальною мовою програмування з достатнім рівнем захисту
інформації від змін, на відміну від сайтів блогів що вже існують нова основа
підтримує більше функцій та більш ширший простір для кастомізації.
11
ЧДТУ 232099.03 ПЗ
1 ОГЛЯД ТА ПОРІВНЯЛЬНИЙ АНАЛІЗ АНАЛОГІВ
1.1 Призначення та область застосування веб додатку «Техноблог в
галузі електроніки та технологій»
Веб-додаток "Техноблог в галузі електроніки та технологій" є онлайн-
ресурсом, створеним для того, щоб забезпечити користувачів інформацією,
новинами, оглядами та статтями, пов'язаними з електронікою та передовими
технологіями. Його головна мета - поширення знань та актуальної інформації
про електроніку, комп'ютерну техніку, програмування, штучний інтелект,
Інтернет речей, робототехніку та інші пов'язані галузі.
Веб-додаток надає можливість знайти останні новини та технологічні
досягнення, що стосуються електроніки та технологій, а також ознайомитися
з оглядами на новітні гаджети, роботів, електронні компоненти та інші
технічні рішення. Користувачі можуть переглядати статті, написані
експертами та ентузіастами, які діляться своїми знаннями та досвідом у сфері
електроніки та технологій.
"Техноблог в галузі електроніки та технологій" стане важливим
ресурсом для студентів, професіоналів та всіх, хто цікавиться розвитком
технологій. Він допоможе користувачам бути в курсі останніх тенденцій та
досягнень у світі електроніки та технологій, а також сприятиме обміну
знаннями та спілкуванню з однодумцями.
Цей веб-додаток має потенціал стати незамінним джерелом інформації,
яке підтримує прогрес і сприяє розвитку електроніки та технологій, надаючи
важливі відомості і вдосконалені практики у цій сфері.
1.2 Аналіз існуючих сайтів техноблогів
Аналіз існуючих сайтів-блогів можна розглядати з багатьох різних точок
зору, таких як дизайн, контент, технічні аспекти та інше. Однак, деякі загальні
ознаки багатьох успішних блогів включають:
Якісний контент: Блоги, що надають цікаву та корисну інформацію, мають
високу відвідуваність та велику аудиторію. Контент повинен бути оригінальним,
привабливим та актуальним.
12
ЧДТУ 232099.03 ПЗ
Зручний дизайн: Блог повинен бути зручним для користувачів та
привабливим для ока. Дизайн має бути чистим та зрозумілим, з легким доступом
до важливих елементів, таких як навігаційне меню, пошук та інші.
SEO: Блог повинен бути оптимізований для пошукових систем, щоб бути
зручно знайдений користувачами. Найкращі блоги використовують ключові
слова, метатеги та інші елементи SEO, щоб збільшити свою відвідуваність.
Активний комунітет: Блоги з активною аудиторією та спільнотою, яка
коментує та ділиться думками, є більш привабливими для відвідувачів. Блог
повинен надавати можливість коментувати та ділитися контентом на різних
платформах соціальних медіа.
Для створення будь-якого веб сайту або додатку розробнику необхідно
звернути увагу на уже існуючі рішення у даній галузі, аби зрозуміти, які
рішення є вдалими, а які – ні. Тому для створення власного проекту
проаналізуємо розроблені на теперішній час програми аналоги.
1.2.1 Техноблог 4.PDA
4PDA - сайт про мобільну електроніку, один з найбільш відвідуваних
сайтів у цій тематиці. Особливо відомий форум 4PDA, найбільший і
найвідоміший у цій темі російськомовний форум. Назва 4PDA читається як
"for PDA", скорочено від personal digital assistant - кишеньковий портативний
комп'ютер, комунікатор .
Засновник сайту – Євген Вецель (учасник Imater). За його словами, він
вирішив заснувати свій форум після бана на Pocketz — найпопулярнішому
форумі про КПК того часу. Згодом через брак часу він передав сайт в
управління Табу. Imater вважається адміністратором, але через забутий
пароль, який через технічний збій не вдалося відновити, не має доступу до
облікового запису і не бере участі в житті сайту, однак і не прагне цього.
На головній сторінці на рисунку 1.1 бачимо шапку сайту. На ній
містяться лого, розділи сайту, пошук, а також кнопка авторизації в сайт.
Є перегляд заголовків блогу з ілюстрацією по темі блогу.
На рисунках 1.1-1.3 представлено вигляд сайту 4.PDA.
13
ЧДТУ 232099.03 ПЗ
Рисунок 1.1 – Вікно сайту 4.PDA
Рисунок 1.2 – Вигляд новини 4.PDA
При відкритті(клацанню по заголовку блогу що зацікавив) він відкриває
повну інформацію, будь то новина, гайд, опитування для збіру інформації.
14
ЧДТУ 232099.03 ПЗ
Рисунок 1.3 – Елементи дизайну 4.PDA
Всі інші елементи сайту, важливість яких для юзерів не на передньому
плані просто перенесена в нижню частину сайту [2].
1.2.2 Блог LuckyLink
Цей блог має також схожу структуру, розроблений українським
розробником. Він відноситься до динамічних веб сайтів
Динамічний веб–сайт це система яка готова до інформаційного
оновлення. Він заснований на шаблонних сторінках, в котрі вставляється
інформація яка потім оновлюється, або міняється. Вміст зберігається в базі
даних.
Після запиту користувачем сторінки відповідна інформація
видобувається з бази даних, вставляється в шаблон, створюючи нову веб–
сторінку. Таким чином для обновлення вмісту динамічного веб–сайту
достатньо просто додати текст для нової сторінки, який потім буде доданий в
базу даних.
Можна сказати що веб–сайт оновлює себе сам. Додавати інформацію в
динамічний сайт може людина який не обов’язково володіти спеціальним
знаннями програмування або HTML –коду.
15
ЧДТУ 232099.03 ПЗ
Головна його відмінність в тому що він інтегрований в сайт по продажу
товару і служить для його реклами, для порівняння товарів, і огляду на свої
товари. Але ця ідея не заперечує викладати і звичайні новини.
На рисунках 1.4-1.6 представлено вигляд сайту LuckyLink.
Рисунок 1.4 – Елементи дизайну LuckyLink
Цей блог вже більше направлений на інтереси Українців, на головній
сторінки бачимо статті про безперебійники, зарядні станції і те що зараз так
потрібно знати в наші часи.
Рисунок 1.5 – Елементи дизайну LuckyLink
16
ЧДТУ 232099.03 ПЗ
Рисунок 1.6 – Елементи навігації LuckyLink
Також бачимо менше значиму інформацію в низу сайту, це канон,
доходимо до виводу що це є зручним елементом і щось схоже зробимо в
своєму сайті. [4].
1.2.3. Блог IXBT
Цей блог більше направлений на розважальні потреби, тут ми
можемо знайти блоги про ігри, кіно, книги та комікси[3] інтерфейс
зображений на рисунку 1.7.
Рисунок 1.7 - Зовнішний вигляд блогу IXBT
17
ЧДТУ 232099.03 ПЗ
Має зрозумілий нам дизайн і мало відрізняється від інших
конструктивно, але якщо взяти за мету створення нашого українського
аналогу цих блогів, для охоплення більшого обсягу користувачів це буде
досить корисний проект.
Можна знайти свої за і проти для кожного типу структури. Проте для
максимальної ефективності розробка ресурсу має відбуватись з урахуванням
наступних правил:
навігація має бути якомога зрозумілішою для клієнта;
усі сторінки каталогу слід робити максимально оптимізованими і
логічними;
користуватися сайтом повинно бути просто пересічному громадянину;
Серед найбільш типових помилок можна виділити наступні:
постійне створення нових сторінок;
дублювання товарів за назвою чи змістом;
розміщення товарів із підкатегорій в категоріях;
незаповнені сторінки чи категорії, в яких знаходиться дуже мало
товарів;
нерівномірний розподіл товарів у групах;
особливості структури веб-сайту передбачають розміщення товарів і
комплектуючих на одній сторінці;
обмежена кількість фільтрів або параметрів.
Створення макету сайту — процес складний і довготривалий. Важливо
розуміти, що для інтернет-магазину потрібна зовсім інша структура, ніж для
комерційного ресурсу компанії чи сайту візитки.
Аналоги були розглянуті, було звернуто увагу на головне, і з кожного
візьмемо краще.
1.3 Постановка задачі на розробку проекту інтернет сайту
«Техноблог в галузі електроніки та технологій»
18
ЧДТУ 232099.03 ПЗ
Після розгляду аналогів і аналізу усіх недоліків та переваг було обрано
прототип майбутнього проекту. Система розроблятиметься під комп’ютери
які мають доступ до мережі Internet і буде працювати на більшості сучасних
операційних систем.
Задачами на розробку програми є:
1 Сформувати початкові вимоги до системи.
2 Розробити і реалізувати структуру програми для розробки.
3 Розглянути апаратне забезпечення системи.
4 Обрати мову програмування та середовище розробки.
5 Розробити алгоритми для розробки програми.
6 Розробити і реалізувати графічний інтерфейс.
7 Реалізувати отримані рішення та провести тестування.
Техноблог в галузі електроніки та технологій повинен мати зручний
інтерфейс, зрозумілі цілі його використання. Щоб для користувача не
вимагались знання програмування чи якісь вузько напрямлені знання в
комп’ютерах та інтернет розробках. Інтерфейс повинен бути універсальним,
система авторизації повинна буде захистити інформації від несанкційонового
втручання.
1.4 Вибір середовища розробки
Для виконання даного проекту було обрано такі технології:
HTML;
Js;
NodeJs;
PostgreSQL.
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту)
це стандартизована мова розмітки документів для перегляду вебсторінок у
браузері. Браузери отримують HTML документ від сервера за протоколами
HTTP/HTTPS або відкривають з локального диска, далі інтерпретують код в
інтерфейс, який відображатиметься на екрані монітора.[30]
19
ЧДТУ 232099.03 ПЗ
Елементи HTML є будівельними блоками сторінок HTML. За
допомогою конструкцій HTML, зображення та інші об'єкти, такі як
інтерактивні форми, можуть бути вбудовані у візуалізовану сторінку. HTML
надає засоби для створення структурованих документів, позначаючи
структурну семантику тексту, наприклад заголовки, абзаци, списки,
посилання, цитати та інші елементи. Елементи HTML окреслені тегами,
написаними з використанням кутових дужок. Теги на кшталт <img /> чи <input
/> безпосередньо виводять вміст на сторінку. Інші теги, такі як <p>, оточують
текст і надають інформацію про нього, а також можуть включати інші теги як
піделементи. Браузери не показують теги HTML, але використовують їх для
інтерпретації вмісту сторінки.
В HTML можна вбудовувати програми, написані на скриптових мовах,
наприклад JavaScript, які впливають на поведінку та вміст вебсторінок.
Включення CSS визначає вигляд і компонування вмісту. World Wide Web
Consortium (W3C), який супроводжує стандарти HTML та CSS, заохочує
використання CSS над явним презентаційним HTML з 1997 року.[4]
JavaScript (JS) — динамічна, об'єктно-орієнтована[5] прототипна мова
програмування. Реалізація стандарту ECMAScript. Найчастіше
використовується для створення сценаріїв вебсторінок, що надає можливість
на боці клієнта (пристрої кінцевого користувача) взаємодіяти з користувачем,
керувати браузером, асинхронно обмінюватися даними з сервером, змінювати
структуру та зовнішній вигляд вебсторінки.
JavaScript класифікують як прототипну (підмножина об'єктно-
орієнтованої), скриптову мову програмування з динамічною типізацією. Окрім
прототипної, JavaScript також частково підтримує інші парадигми
програмування (імперативну та частково функціональну) і деякі відповідні
архітектурні властивості, зокрема: динамічна та слабка типізація, автоматичне
керування пам'яттю, прототипне наслідування, функції як об'єкти першого
класу.[5]
20
ЧДТУ 232099.03 ПЗ
Node.js — платформа з відкритим кодом для виконання
високопродуктивних мережевих застосунків, написаних мовою JavaScript.
Якщо раніше JavaScript застосовувався для обробки даних в браузері
користувача, то node.js надав можливість виконувати JavaScript-скрипти на
сервері та відправляти користувачеві результат їхнього виконання. Платформа
Node.js перетворила JavaScript на мову загального використання з великою
спільнотою розробників.
Node.js має наступні властивості:
асинхронна одно-нитева модель виконання запитів;
неблокуючий ввід/вивід;
система модулів CommonJS;
рушій JavaScript Google V8.
Для керування модулями використовується пакетний менеджер npm
(node package manager).[7]
PostgreSQL — об'єктно-реляційна система керування базами даних
(СКБД). Є альтернативою як комерційним СКБД (Oracle Database, Microsoft
SQL Server, IBM DB2 та інші), так і СКБД з відкритим кодом (MySQL, Firebird,
SQLite).
Порівняно з іншими проєктами з відкритим кодом, такими як Apache,
FreeBSD або MySQL, PostgreSQL не контролюється якоюсь однією
компанією, її розробка можлива завдяки співпраці багатьох людей та
компаній, які хочуть використовувати цю СКБД та впроваджувати у неї
найновіші досягнення.
Сервер PostgreSQL написаний на мові C. Зазвичай розповсюджується у
вигляді набору текстових файлів із сирцевим кодом. Для інсталяції необхідно
відкомпілювати файли на своєму комп'ютері і скопіювати в деякий каталог.
Весь процес детально описаний в документації.[37]
2 ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ СИСТЕМИ
2.1 Моделювання предметної області
21
ЧДТУ 232099.03 ПЗ
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області
Кваліфікаційна робота бакалавра передбачає створення веб-додатку у
форматі інформаційного блогу. Цей веб-додаток буде складатися з трьох
основних компонентів: фронтенду, бекенду та бази даних.
Фронтенд є веб-інтерфейсом, який буде відкритий для користувачів.
Користувачі можуть авторизуватись на сайті, а потім їм надається доступ до
різних функцій, таких як написання та редагування блогів, коментування,
авторизація та реєстрація. Якщо користувач має права адміністратора, він
може також писати нові блоги, редагувати існуючі, надавати права
адміністратора іншим користувачам.
Бекенд є посередником між фронтендом та базою даних. Він обробляє
всі запити від фронтенду та перетворює їх на запити до бази даних. Бекенд
також виконує автентифікацію та авторизацію користувачів, перевіряє
правильність даних та зберігає їх у базі даних.
Компонент бази даних містить в собі всю інформацію про користувачів,
блоги, коментарі та інші дані, які зберігаються у веб-додатку.
Оскільки це проект з бакалаврського курсу, передбачається, що його
розробка буде здійснюватися за допомогою відповідних технологій та
інструментів програмування, щоб забезпечити оптимальну роботу та
ефективне використання ресурсів.
При проектуванні ПЗ кваліфікаційної роботи необхідно
використовувати основні діаграми мови UML для моделювання предметної
області, формування та аналізу вимог до системи, логічної і фізичної
структури та поведінки системи.
Модель предметної області зображеної у вигляді UML діаграми
представлено на рисунку 2.1
22
ЧДТУ 232099.03 ПЗ
Рисунок 2.1 – UML діаграма моделі предметної області
Словник предметної області:
Моделювання є важливим процесом, що використовується для
створення спрощеного відображення реального світу, щоб досліджувати,
аналізувати, прогнозувати та оптимізувати його функціонування. Цей процес
здебільшого використовується у науці та технологіях, де моделі дозволяють
досліджувати поведінку різних систем та прогнозувати їхні результати.
Система, з іншого боку, є складною структурою, що складається з
взаємодіючих елементів, які разом виконують певну функцію. Ці елементи
можуть бути фізичними або програмними та можуть взаємодіяти між собою,
щоб виконувати певну функцію.
Інформація, з свого боку, описує знання, яке можна використовувати
для прийняття рішень та взаємодії з оточуючим світом. Ця інформація може
бути зібрана та збережена в базі даних, що є структурованою сукупністю
даних, організованих за певними правилами та зберігається на зовнішньому
носії.
23
ЧДТУ 232099.03 ПЗ
Програмне забезпечення, у свою чергу, складається з сукупності
програм, що забезпечують роботу комп'ютерної системи. Ця система може
бути розбита на дві складові частини: фронтенд та бекенд. Фронтенд
відповідає за взаємодію з користувачем, тоді як бекенд забезпечує обробку
даних, роботу з базою даних та взаємодію з іншими системами.
База даних - це структурована сукупність даних, організованих за
певними правилами та зберігається на зовнішньому носії. Бази даних
використовуються для зберігання великих обсягів інформації, яка може бути
легко доступна для обробки та використання. Бази даних можуть містити різні
типи даних, такі як числові дані, тексти, зображення, звуки та відео.
Для керування базою даних необхідна певна програмна підтримка, така
як системи управління базами даних (СУБД). СУБД забезпечують доступ до
даних у базі, забезпечують їх оновлення та збереження в безпечному місці.
СУБД можуть бути реляційними, об'єктно-орієнтованими, ієрархічними та
іншими.
Адміністратор відповідає за управління базою даних, налагодження її
роботи та забезпечення безпеки даних. Він контролює доступ користувачів до
бази даних та робить резервні копії даних для забезпечення їх відновлення в
разі необхідності.
Бази даних є необхідною складовою в різних сферах, таких як бізнес,
освіта, медицина та інші. Вони використовуються для зберігання, організації
та аналізу інформації, що допомагає приймати обґрунтовані рішення та
покращувати ефективність діяльності.
2.1.2 Елементи моделювання предметної області
У проекті можна виділити різні сутності, які представляють об'єкти або
концепції, що існують у відповідній предметній області. Серед можливих
сутностей у нашому проекті можуть бути: адміністратор, користувач, база
даних, блог, коментар, категорії, теги.
Користувач описує характеристики та поведінку особи, яка користується
системою, включаючи її особисті дані, ролі та дії, які вона може здійснювати
24
ЧДТУ 232099.03 ПЗ
в системі. Цей елемент може включати такі атрибути, як ім'я, прізвище, адреса
електронної пошти, логін, пароль та інші особисті дані користувача, а також
можливості, які користувач має в системі, такі як створення, редагування та
видалення облікових записів, створення та перегляд даних тощо.
Елементи моделювання предметної області включають в себе:
Блог - це веб-сторінка або сайт, який містить різні пости, коментарі та
інформацію про авторів.
Пости - це матеріали, які публікуються на блозі, вони можуть бути в
різних форматах, наприклад, текст, аудіо або відео, і містити інформацію про
різні теми, події та думки авторів.
Коментарі можуть містити текст, дату додавання, автора, оцінку
користувачів та іншу відповідну інформацію. Елемент коментар може бути
пов'язаний з елементом блог або стаття, до якої додається коментар, а також з
елементом користувач, який його написав. Коментар може мати також
атрибути, що описують його статус (наприклад, опубліковано, чекає
модерації, видалено) та іншу відповідну інформацію, яка допомагає управляти
коментарями на сайті або в додатку. Вони можуть містити відгуки, запитання
та інші коментарі до вмісту постів.
Категорії - тематичні розділи, які допомагають організувати пости на
блозі за тематикою і зробити їх більш зручними для пошуку та перегляду
користувачами.
Теги - ключові слова, які допомагають класифікувати пости на блозі за
темою, стилем або іншими характеристиками. Вони можуть бути використані
для швидкого пошуку постів, які містять певні ключові слова.
Адміністратор - особа, яка має повний доступ до управління блогом,
включаючи редагування постів, видалення коментарів, створення нових
користувачів та надання прав доступу.
Робоча область моделювання для кваліфікаційної роботи бакалавра "
техноблог в галузі електроніки та інформатики." включає в себе фронтенд,
бекенд та базу даних.
25
ЧДТУ 232099.03 ПЗ
Фронтенд складається зі сторінок, що відображають реєстрацію та
авторизацію, блоги, профіль, контакти та коментарі. Сторінки авторизації та
реєстрації включають в себе реєстраційну сторінку, сторінку авторизації.
Сторінки блогів включають в себе сторінку що містить блоги та включають
основну частину інформацію про користувача. Сторінка профілю містить
інформацію про користувача. Сторінка контакти містить контакти та
інформацію про автора сайту, та проект.
Бекенд включає в себе сервіси, що забезпечують логіку програми.
Сервіси адміністратора включають в себе сервіс авторизації, сервіс для
створення блогу, сервіс для створення коментарів. Сервіси користувачів
включає збір інформації про користувачів та коментарі які вони лишили.
У базі даних зберігається інформація про користувачів, їх коментарі та
дані блогів. Ця база містить таблиці для користувачів, блогів та коментарів.
У робочій області моделювання необхідно чітко визначити взаємодії між
фронтендом, бекендом та базою даних. Фронтенд відповідає за взаємодію з
користувачем, передачу даних до бекенду та відображення результатів. Бекенд
забезпечує обробку даних та бізнес-логіку, оброблює запити від фронтенду та
взаємодіє з базою даних. База даних містить дані про користувачів, тести,
питання, відповіді та результати тестування. Взаємодії між цими
компонентами повинні бути чітко визначені та спроектовані для забезпечення
ефективності та надійності системи.
Програмне забезпечення «техноблог в галузі електроніки та
інформатики» дозволяє адміністраторам створювати та редагувати блоги,
редагувати та видаляти коментарі, забороняти користувачам які не
дотримались вимог правил поведінки в коментарях залишати коментарі,
призначати інших адміністраторів.
Користувачам в свою чергу дозволяє реєструватись, додавати
інформацію про себе в профіль, коментувати блоги.
Адміністратор матиме можливість переглядати коментарі які залишив
цей користувач.
26
ЧДТУ 232099.03 ПЗ
2.2 Формування та аналіз вимог
2.2.1 Формування вимог до програмного забезпечення.
2.2.1.1 Первинні і детальні вимоги
Первинні вимоги до програмного забезпечення автоматизованої системи
тестування абітурієнтів університету можуть включати такі пункти:
система повинна надати адміністратору можливість авторизуватись;
система повинна надати адміністратору можливість створювати та
редагувати блоги;
система повинна надати користувачу можливість авторизуватись;
система повинна надати користувачу можливість залишати коментарі;
Система повинна надати користувачу можливість переглядати
інформацію про користувача.
Детальні вимоги до програмного забезпечення включають:
Система повинна мати модуль створення нового блогу;
Система повинна мати модуль перегляду блогу;
Система повинна мати модуль особистого кабінету з інформацією про
користувача;
Система повинна мати модуль що буде відповідати за коментарі.
2.2.1.2 Вимоги замовника і розробника. Функціональні та не
функціональні вимоги
ВИМОГИ ЗАМОВНИКА:
1 Система повинна дозволяти перегляд блогів.
2 Система повинна забезпечувати можливість створення блогів та їх
редагування.
3 Система повинна бути легкою у використанні та мати інтуїтивний
інтерфейс користувача.
27
ЧДТУ 232099.03 ПЗ
4 Система повинна мати можливість працювати з багатьма
користувачами одночасно та зберігати інформацію про кожного
користувача окремо.
5 Система повинна бути безпечною та забезпечувати захист
конфіденційної інформації.
ВИМОГИ РОЗРОБНИКА:
1 Система повинна мати можливість створення блогів.
2 Система повинна забезпечувати можливість перегляду та редагування
блогів.
3 Система повинна забезпечувати можливість збереження блогів та їх
відображення.
4 Система повинна бути розроблена з використанням сучасних
технологій програмування та забезпечувати високу швидкодію.
5 Система повинна бути легкою у розгортанні та має підтримувати різні
операційні системи та браузери.
6 Система повинна забезпечувати безпеку даних та має мати механізми
захисту від несанкціонованого доступу до інформації про користувачів.
ФУНКЦІОНАЛЬНІ ВИМОГИ:
1 Система повинна мати засоби для реєстрації користувачів і зберігання
їх особистих даних.
2 Система повинна мати можливість створення блогів для
адміністраторів.
3 Система повинна відображати блоги та коментарі до них від
користувачів що їх лишили.
НЕФУНКЦІОНАЛЬНІ ВИМОГИ:
1 Система повинна бути доступна для користувачів з будь-якої точки, де
є Інтернет-з'єднання.
2 Система повинна бути стійкою до навантажень і забезпечувати
швидкий відгук.
28
ЧДТУ 232099.03 ПЗ
3 Система повинна забезпечувати безпеку даних та конфіденційність
інформації користувачів.
4 Система повинна мати інтуїтивно зрозумілий інтерфейс для
користувачів.
5 Система повинна підтримувати можливість редагування блогів і
додавання коментарів.
6 Система повинна бути розроблена з використанням сучасних
технологій програмування та баз даних.
Для моделювання предметної області та проектування системи загалом
рекомендується використовувати мову UML (Unified Modeling Language).
UML надає графічні символи, зв'язки та текстові елементи для створення
діаграм, які відображають структуру та поведінку системи.
При розробці програмного забезпечення багато розробників
використовують лише обмежений набір діаграм UML, вибираючи
підмножину, яка найкраще відповідає їх конкретним потребам та задачам.[8]
2.2.2 Формування вимог за допомогою діаграми прецедентів
Діаграма прецендентів зображена на рисунку 2.2
Рисунок 2.2 - Діграма прецендентів
29
ЧДТУ 232099.03 ПЗ
Діаграма прецендентів складається з два акторів - адміністратора та
користувача, а також відображає основні прецеденти, що можливі для цих
акторів.
Адміністратор має можливість:
створювати блоги;
редагувати блоги;
видаляти блоги;
переглянути всю інформацію про користувача .
Користувач має можливість:
частковий перегляд інформацію про користувачів;
реєстрацію;
спільні можливості обох акторів такі:
перегляд блогів;
коментування блогів;
авторизація.
Діаграма показує зв'язки між прецедентами, які пов'язані з акторами, і
допоможе розробникам зрозуміти, які прецеденти необхідно реалізувати та які
зв'язки між ними існують.
2.3 Проектування логічної структури програмного комплексу
2.3.1 Діаграми класів
Діаграма класів зображена на рисунку 2.3
Рисунок 2.3 – Діаграма класів
30
ЧДТУ 232099.03 ПЗ
Діаграма класів описує класи, що використовуються при роботі додатку.
Головний клас відповідає за основні базові задачі та слугує зв`язком
для інших класів, має досить просту задачу по переходу до інших, але
для зручності роботи необхідний;
Клас Зв'язок з Бд виконує роль інструменту для роботи з БД, саме
через запити в ньому і робляться всі зміни в БД також він
використовується для підключення БД до бекенду;
Клас Робота з коментарями відповідає за всі процеси що відносяться
до коментарів;
Клас Авторизація використовується для авторизації а також реєстрації
нових користувачів, також використовує Бд для зберігання інформації;
Клас Особистий кабінет збирає всю інформацію про користувача і
може його демонструвати а також для зміни та заповнення особистих
даних користувача.
Таким чином, ця діаграма є відображенням основних класів та їх
взаємодії в бекенді.
2.3.2 Діаграми пакетів
Діаграма пакетів зображена на рисунку 2.4
Рисунок 2.4 – Діаграма пакетів
Ця діаграма показує компоненти додатку з їх залежностями і
взаємодією.
Фронтенд складається з таких основних частин :
31
ЧДТУ 232099.03 ПЗ
Авторизація та реєстрація тобто дає змогу для реалізації цих дій у
вигляді інтерфейсу для цього;
Вивід інформації виводить інформацію зчитану з Бд за домогою
Бекенду;
Форми слугують для додання інформації саме з них считує потім
інформацію бекенд і робить запит в Бд;
Меню для зручного користування користувачем.
Бекенд:
Містить модуль безпека для роботи з аккаунтами користувачів;
Зберігання інформації слугує як буфер між бд і фронтендом він
спочатку зчитує в себе інформацію і потім передає бекенду;
Робота з інформацією передбачає обробку сирої інформації в запити
для бд.
Бд використовується для зберігання інформації.
2.4 Архітектурне проектування
2.4.1 Діаграма компонентів
Діаграма компонентів - це вид діаграми, що використовується в розробці
програмного забезпечення для відображення архітектури системи та
залежність між її компонентами. Діаграма компонентів зображує окремі
компоненти програмної системи, їх інтерфейси та залежності між ними. Ця
діаграма допомагає у розумінні, як окремі компоненти системи взаємодіють
між собою та як вони розподілені між фізичними або логічними областями.
Діаграма компонентів складається з компонентів та зв'язків між ними.
Компоненти можуть бути представлені у вигляді прямокутників або кульок з
назвою та описом, а зв'язки можуть бути зображені у вигляді стрілок або ліній,
що з'єднують компоненти та їх інтерфейси. Кожен компонент може мати
власну діаграму класів, що деталізує його внутрішню структуру.
32
ЧДТУ 232099.03 ПЗ
Рисунок 2.5 – Діаграма компонентів
Діаграма компонентів допомагає у розумінні архітектури системи та
сприяє комунікації між розробниками. Вона дозволяє легко ідентифікувати
окремі компоненти системи та їх взаємодію, що допомагає у плануванні,
розробці та тестуванні програмного забезпечення.
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
Розгортання програмної системи на апаратних засобах для проекту
техноблог в галузі електроніки та інформатики.
Перш за все, необхідно обрати хостинг-провайдера, який забезпечує
підтримку потрібних технологій (наприклад, JS, Node.js, PostgreSQL) та
гарантує високу доступність та надійність. Далі, в залежності від
передбачуваної кількості користувачів, які будуть використовувати систему,
потрібно вибрати необхідну кількість серверів.
Після вибору хостинг-провайдера та серверів, необхідно налаштувати
інфраструктуру таким чином, щоб забезпечити безперебійну роботу системи.
Це включає встановлення та налаштування необхідного програмного
забезпечення (наприклад, Node.js та PostgreSQL).
33
ЧДТУ 232099.03 ПЗ
Далі, потрібно налаштувати PostgreSQL для забезпечення безпеки та
швидкості його роботи. Налаштування бази даних повинно включати
налаштування резервного копіювання, моніторингу та оптимізації запитів.
Після запуску сервера PostgreSQL потрібно налаштувати зв'язок серверу
з бекендом в ролі якого виступає сервер створений на Node.js.
Після цього, необхідно розгорнути сервери та додатки на кожному
сервері. Наприклад, бекенд можна розгорнути на Node.js, а фронтенд - на
Html+js.
Діаграма розгортання зображена на рисунку 2.6.
Рисунок 2.6 – Діаграма розгортання
На діаграмі зображені три компоненти (клієнт, сервер і база даних), які
взаємодіють через HTTP/HTTPS протокол. Користувач може взаємодіяти з
клієнтською частиною системи, яка передає запити до серверної частини.
Серверна частина обробляє запити і може використовувати базу даних для
отримання необхідної інформації та зберігання нової. База даних містить
інформацію про блоги, користувачів, коментарі, а також данні для входу для
34
ЧДТУ 232099.03 ПЗ
безпеки сайту. Клієнтська та серверна частини взаємодіють за допомогою
HTTP/HTTPS протоколу, що забезпечує конфіденційність та безпеку передачі
даних.
2.5 Моделювання поведінки системи
2.5.1 Діаграма діяльності
Діаграма діяльності зображена на рисунку 2.7.
Рисунок 2.7 – Діаграма діяльності
35
ЧДТУ 232099.03 ПЗ
Ця діаграма діяльності описує процес поведінки адміністраторів та
користувача сайту.
По-перше, користувач логіниться на сайті. Після перевірки хто
залогінився відкривається доступ до таких можливостей:
Для користувача перегляд кабінету, блогів, а також їх коментування.
Для адміністратора створення чи зміни в блогах, створення та зміни в
коментарях, перегляд інформації про користувачів.
2.5.2 Діаграма послідовності
Діаграма послідовності зображена на рисунку 2.8
36
ЧДТУ 232099.03 ПЗ
Рисунок 2.8– Діаграма послідовності
Діаграма візуалізує послідовності з акторами "Інтерфейс", а також з
учасниками "Бекенд " та "БД". Діаграма починається з авторизації або
реєстрації на веб-сайті, перегляд блогу, створення нового блогу а також
коментування блогу.
2.5.3 Діаграма комунікації
Діаграма комунікації зображена на рисунку 2.9
Рисунок 2.9 – Діаграма комунікації
37
ЧДТУ 232099.03 ПЗ
У цій діаграмі показані дії і комунікації, всі дії в даному сайті
відбуваються через сам сайт, напряму нема можливості взаємодії адміністрації
та користувачів. І ті які саме можуть ці актори дії виконувати
2.5.4 Діаграма скінченого автомату
Діаграма скінченого автомату зображена на рисунку 2.10
Рисунок 2.10 – Діаграма скінченого автомату
Ця діаграма показує процес користування сайтом. Адміністратор
авторизується на сайті, створює блог. Реєструється або авторизується
користувач, додає інформацію про себе якщо вона не заповнена, переглядає
38
ЧДТУ 232099.03 ПЗ
блог, залишає коментар, адміністратор перевіряє коментар на дотримання
правил, переглядає інформацію про користувача.
Даний цикл може повторюватись безліч разів, з усіма етапами, або ж
випустив деякі.
Діаграма скінченого автомата (ДСА) - це графічне представлення
поведінки системи з обмеженою кількістю станів та переходів між ними. У
розробці програмного забезпечення (ПЗ) вона використовується для
моделювання різних сценаріїв та керування програмою. ДСА допомагає
визначити реакцію системи на події, планувати тестування та аналізувати
помилки. Вона забезпечує краще розуміння та управління послідовністю подій
у програмі для покращення її якості та надійності.
Розробка ПЗ з використанням ДСА має кілька переваг. По-перше, вона
допомагає визначити реакцію системи на різні вхідні події. Це дозволяє точно
визначити функціональні вимоги до програми та її поведінку в різних сценаріях.
По-друге, ДСА допомагає у плануванні тестування. Використовуючи
діаграму, розробник може створити тестові сценарії, які охоплюють різні
переходи та стани системи. Це сприяє виявленню помилок та некоректної роботи
програми на ранніх етапах розробки.
Крім того, ДСА може використовуватись для відлагодження та аналізу
помилок. За допомогою діаграми, розробник може відстежувати стан системи та
послідовність переходів, що призводять до помилок або некоректної роботи
програми. Це допомагає знайти та виправити проблеми в ПЗ.
Узагалі, ДСА дозволяє розробникам краще моделювати та керувати
поведінкою системи, визначати вимоги та планувати тестування. Вона
забезпечує більш глибоке розуміння та контроль над послідовністю подій та
станів у програмі, що сприяє покращенню якості та надійності ПЗ.
39
ЧДТУ 232099.03 ПЗ
3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
3.1.1 Обґрунтування вибору засобів реалізації
Вибір програмних та апаратних засобів для розв'язання поставлених
задач є критичним етапом розробки будь-якого проекту. Він залежить від
постановки задачі, вимог до системи, структури та алгоритму функціонування
об'єкта, а також від параметрів оптимізації процесу розробки, таких як час,
вартість та функціональність. Для підтримки цих аспектів варто розглянути
наступні аргументи при виборі засобів розробки для кваліфікаційної роботи
бакалавра:
Інтегроване середовище розробки (IDE):
Для розробки проекту з використанням PostgreSQL, JavaScript (JS),
Node.js та HTML можна використовувати такі інтегровані середовища
розробки:
Visual Studio Code: Visual Studio Code є популярним безкоштовним IDE,
яке надає підтримку для багатьох мов програмування, включаючи JavaScript,
Node.js та HTML. Воно має багатофункціональний набір розширень та
зручний інтерфейс розробки.
WebStorm: WebStorm є потужним комерційним IDE, спеціально
призначеним для розробки веб-проектів з використанням JavaScript, Node.js та
HTML. Воно має вбудовану підтримку фреймворків, таких як React і Angular,
і надає багато інших корисних функцій для покращення продуктивності
розробки.
Як вже зазначалося, для проекту можна використовувати JavaScript (JS)
як мову програмування, оскільки вона є широко підтримуваною та
використовується для розробки веб-додатків.
Система керування базами даних (СКБД):
Для зберігання та керування даними можна обрати PostgreSQL як
систему керування базами даних (СКБД). Вона є потужною та надійною
40
ЧДТУ 232099.03 ПЗ
реляційною СКБД з відкритим вихідним кодом, яка надає широкі можливості
для управління даними. PostgreSQL підтримує SQL-запити, транзакції,
індекси, реплікацію та інші функції, що можуть бути корисними для проекту.
Для розробки веб-додатків на основі Node.js та JavaScript будуть
застосовані такі додаткові засоби:
Вибір програмних та апаратних засобів для розв'язання поставлених
задач є критичним етапом розробки будь-якого проекту. Він залежить від
постановки задачі, вимог до системи, структури та алгоритму функціонування
об'єкта, а також від параметрів оптимізації процесу розробки, таких як час,
вартість та функціональність.
Для підтримки цих аспектів варто розглянути наступні аргументи при
виборі засобів розробки для кваліфікаційної роботи бакалавру: Вибір
програмних та апаратних засобів для розв'язання поставлених задач є
критичним етапом розробки будь-якого проекту. Він залежить від постановки
задачі, вимог до системи, структури та алгоритму функціонування об'єкта, а
також від параметрів оптимізації процесу розробки, таких як час, вартість та
функціональність. Для підтримки цих аспектів варто розглянути наступні
аргументи при виборі засобів розробки для кваліфікаційної роботи бакалавру:
PostgreSQL: PostgreSQL є потужною та розширюваною системою
керування базами даних (СКБД), яка використовує реляційну модель
даних. Вона надає широкий набір функціональних можливостей, таких
як підтримка транзакцій, індексування, зовнішні ключі, оптимізація
запитів та безпека даних. PostgreSQL має добру підтримку SQL-
стандарту;
npm (Node Package Manager): npm є пакетним менеджером для Node.js
та JavaScript, який дозволяє легко встановлювати, оновлювати та
керувати залежностями вашого проекту. Він надає доступ до тисяч
пакетів та бібліотек, які можуть полегшити розробку та підтримку
вашого проекту;
41
ЧДТУ 232099.03 ПЗ
HTML/CSS: Для побудови користувацького інтерфейсу вашого веб-
додатку використовуйте HTML для структуризації контенту та CSS для
оформлення та стилізації. Використовуйте сучасні практики та
фреймворки CSS, такі як Bootstrap або Tailwind CSS, для прискорення
розробки та забезпечення зручного вигляду вашого додатку;
Git: Git є системою контролю версій, яка дозволяє вам відстежувати
зміни у вашому коді, співпрацювати з іншими розробниками та
відновлювати попередні версії коду. Використання Git допоможе вам
зберігати та керувати історією вашого проекту;
Testing Frameworks: Для забезпечення якості вашого коду
використовуйте фреймворки та інструменти для тестування, такі як Jest
або Mocha. Вони дозволять вам автоматизувати процес тестування та
забезпечити стабільність та надійність проекту;
Deployment and Hosting: Для розгортання та хостингу вашого веб-
додатку розгляньте платформи, такі як Heroku, AWS або Netlify. Вони
надають зручні інструменти для розгортання, керування та
масштабування;
Express.js є легким та гнучким фреймворком для побудови веб-додатків
на платформі Node.js. Він дозволяє розробникам ефективно
створювати веб-сервери та API за допомогою мінімального набору
обов'язкових функцій.
Основні переваги Express.js:
1 Легкість використання: Express.js надає простий та лаконічний
інтерфейс, що дозволяє швидко створювати маршрути, обробники
запитів та middleware.
2 Гнучкість: Фреймворк дозволяє розробникам вибирати та
використовувати різноманітні розширення (middleware) для обробки
запитів, автентифікації, обробки помилок та багато іншого.
3 Рутизація: Express.js надає можливість організовувати маршрутизацію,
що дозволяє групувати пов'язані запити та обробники в одному місці.
42
ЧДТУ 232099.03 ПЗ
4 Широкі можливості розширення: За допомогою модулів, розроблених
спільнотою, можна розширити функціональність Express.js, додавши
підтримку для шаблонізаторів, баз даних, аутентифікації, обробки
форм та багато іншого.
3.1.2 Опис структурної (функціональної) схеми
Схема структурної програмної системи представлена на рисунку 3.1. В
ній зображено окремі модулі для роботи з певним функціоналом програми. В
ній показано модуль призначений для Авторизації та реєстрації, модуль для
перегляду блогів та коментарів та модуль для внесення змін в блоги та
коментарі.
Рисунок 3.1– Схема структурної програмної системи
Схема функціональної програмної системи представлена на рисунку 3.2.
В ній зображено окрім окремих модулів для роботи з певним функціоналом
програми, який було показано вище, а й основні принципи їх роботи.
Для модуля Реєстрація та авторизація є елемент для вводу даних
користувачем та вивід інформації про успішність чи помилці при
виконання цих цій.
Для модуля додавання блогів та коментарів є зв'язок з модулем
реєстрації та авторизації для перевірки користувача, а також поля для
вводу інформації.
Для модуля Перегляд блогів та коментарів є лише вивід інформації.
43
ЧДТУ 232099.03 ПЗ
Всі 3 модуля мають зв`язок з Бд для зберігання чи отримання
інформації.
Рисунок 3.2 – Схема функціональної програмної системи
3.1.3 Опис логічної схеми системи
У цьому підрозділі описується послідовність дій, яка відбувається в
проектованому об'єкті і призводить до певного результату. Зазвичай, логічна
схема представляється у вигляді текстового опису алгоритму функціонування
системи або програми, який потім може бути перетворений на графічну блок-
схему алгоритму представлену на рисунках 3.3-3.5.
44
ЧДТУ 232099.03 ПЗ
Рисунок 3.3 – Блок схема «Опис логічної схеми системи» сайту
Рисунок 3.4 – Блок схема «Опис логічної схеми системи» модуля авторизація
та реєстрація
45
ЧДТУ 232099.03 ПЗ
Рисунок 3.5 – Блок схема «Опис логічної схеми системи» модуля додавання
блогу чи коментаря
Логічна структура повинна однозначно описувати основні інформаційні
процеси, які відбуваються в проектованому об'єкті, та їхній характер, такі як
операції зберігання, обробки, відображення та передачі даних, циклічні
структури, переходи за умовою і т.д.
3.1.4 Розробка бази даних
База даних (БД) є важливою складовою численних інформаційних
систем, що функціонують як єдине та об'ємне сховище даних. Ця БД
створюється один раз, а потім використовується спільно різними
користувачами або функціональними компонентами системи. Замість окремих
файлів з дублюючими даними, БД об'єднує всю інформацію з мінімальним
надлишком. Зазвичай БД вважається загальним ресурсом, який розділяється
між клієнтами. Збережені дані в БД мають логічну структуру, яка описується
підтримуваною моделлю даних. Реляційна модель є найпоширенішою
моделлю даних, оскільки вона проста, гнучка, зрозуміла та легко
реалізовується. Однак, зі збільшенням кількості таблиць може спостерігатися
падіння продуктивності роботи з БД.
46
ЧДТУ 232099.03 ПЗ
Концептуальна модель даних є високорівневим описом структури та
взаємозв'язків даних в інформаційній системі. Вона визначає загальні поняття,
сутності, атрибути та зв'язки між ними, не залежно від конкретної реалізації в
базі даних. Концептуальна модель даних допомагає відображати бізнес-логіку
та вимоги користувачів до системи, а також служить основою для подальшої
розробки фізичної моделі даних, яка враховує конкретні аспекти реалізації в
базі даних. Концептуальна модель даних може бути представлена у вигляді
діаграми сутностей-зв'язків (ER-діаграми) або інших графічних засобів, що
допомагають візуалізувати структуру та взаємозв'язки даних.
Рисунок 3.6 – Блок схема «Концептуальна модель даних»
47
ЧДТУ 232099.03 ПЗ
Логічна модель даних є детальним описом структури даних,
включаючи таблиці, колонки та взаємозв'язки між ними, в рамках певної
моделі даних, такої як реляційна модель. Вона відображає специфічні деталі
даних, їх типи, обмеження та правила, які встановлені на рівні бази даних.
Логічна модель даних служить основою для створення фізичної моделі даних,
яка враховує деталі реалізації в конкретній системі управління базами даних.
Вона може бути представлена у вигляді схеми бази даних або діаграми, де
кожна таблиця представлена своїми колонками та зв'язками з іншими
таблицями.
Рисунок 3.7 – Блок схема «Логічна модель даних»
Фізична модель даних визначає спосіб фізичного збереження та
організації даних на рівні конкретної системи управління базами даних. Вона
враховує технічні деталі, такі як формат файлів, індекси, розташування даних
на диску та оптимізацію запитів. Фізична модель визначає структуру таблиць,
способи зберігання та індексування даних, розподіл даних між різними
пристроями зберігання, а також відображення зв'язків між таблицями.
Фізична модель даних є конкретною реалізацією логічної моделі даних для
певної системи управління базами даних.
Нище представлено фізичну модель даних для кожної таблиці на
рисунках 3.8-3.12.
48
ЧДТУ 232099.03 ПЗ
Рисунок 3.8 – Фізична модель даних таблиці Moderator
Рисунок 3.9 – Фізична модель даних таблиці Users
Рисунок 3.10 – Фізична модель даних таблиці Blog
49
ЧДТУ 232099.03 ПЗ
Рисунок 3.11 – Фізична модель даних таблиці TextBlog
Рисунок 3.12 – Фізична модель даних таблиці Comment
3.1.5 Розробка інтерфейсу користувача
Розробка інтерфейсу користувача є ключовим етапом у процесі
конструювання інформаційної системи. Інтерфейс відповідає за взаємодію
користувача з програмно-технічним забезпеченням системи.
Ефективність інтерфейсу залежить від здатності проектувальника
передбачити потреби та вимоги користувачів, які можуть виникнути на різних
етапах використання інформаційної системи. Важливо прогнозувати майбутнє
зростання або зміну вимог до програмно-технічного комплексу і забезпечити
систему здатністю виконувати ці вимоги без необхідності розширення або
значних модифікацій.
Під час розробки інтерфейсу користувача слід враховувати зручність та
логічність його використання, інтуїтивність, зрозумілість та доступність
функціональних можливостей системи для різних категорій користувачів.
50
ЧДТУ 232099.03 ПЗ
Дизайн інтерфейсу повинен бути естетичним і забезпечувати зручну навігацію
та взаємодію з інформаційною системою.
Під час розробки інтерфейсу також слід враховувати можливість
масштабування та адаптації системи до змінних вимог і потреб користувачів.
Інтерфейс повинен бути гнучким і здатним пристосовуватися до нових
функціональних вимог, забезпечуючи зручну та ефективну роботу з системою.
Рисунок 3.13 – Інтерфейс користувача(головна сторінка)
Рисунок 3.14 – Інтерфейс користувача(сторінка профіля)
51
ЧДТУ 232099.03 ПЗ
Рисунок 3.15 – Інтерфейс користувача(сторінка контакти)
Рисунок 3.16 – Інтерфейс користувача(сторінка авторизації)
3.1.6 Опис розробки програмних компонентів
Опис розробки проведено по функціям програми:
1. Створення серверу node js та підлкючення до Бд
Імпортуємо необхідні модулі для розробки веб-додатку:
const express = require('express');
const cors = require('cors');
52
ЧДТУ 232099.03 ПЗ
const http = require("http");
const fs = require("fs");
const { Client } = require('pg');
Ініціалізуємо об'єкт додатку Express:
const app = express();
Встановлюємо CORS для дозволу запитів з будь-якого джерела:
app.use(cors());
Додаємо middleware, який встановлює заголовок "Access-Control-Allow-
Origin" для дозволу доступу з будь-якого джерела:
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
Створюємо об'єкт клієнта для підключення до бази даних PostgreSQL:
const client = new Client({
user: 'postgres',
host: 'localhost',
database: 'DB1',
password: '1234566',
port: 5432,
});
Встановлюємо з'єднання з базою даних PostgreSQL:
client.connect(function (err) {
if (err) throw err;
console.log("Connected!");
});
Створюємо HTTP сервер і оброблюємо запити:
http.createServer(function (request, response) {
// код обробки запитів
});
В даному уривку коду проводиться розробка програмних компонентів
для створення веб-додатку на базі Express.js, який використовує базу даних
PostgreSQL. Код налаштовує CORS, встановлює з'єднання з базою даних та
створює HTTP сервер для обробки запитів.
2. Уривок коду відповідає за обробку запиту GET на шляху "/blog" і
відправку відповіді з даними з таблиці "Blog" в форматі JSON. Нижче наведено
опис розробки програмних компонентів за цим уривком:
53
ЧДТУ 232099.03 ПЗ
if (request.url === "/blog" && request.method === "GET") {
// Перевіряємо, чи запит є GET-запитом на шляху "/blog"
response.writeHead(200, { "Content-Type":
"application/json" });
// Встановлюємо заголовки відповіді, включаючи тип контенту
як "application/json"
let query = `
SELECT *
FROM Blog
`;
// SQL-запит для вибірки всіх рядків з таблиці "Blog"
let mas = [];
// Масив для зберігання результатів запиту
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row;
for (row of res.rows) {
mas.push(row);
// Додаємо кожен рядок з результатів запиту до масиву
}
response.end(JSON.stringify(mas));
// Відправляємо відповідь з масивом даних у форматі JSON
response.end();
// Завершуємо відправку відповіді
});
}
Опис розробки програмних компонентів:
Перевіряється, чи отриманий запит є GET-запитом на шляху "/blog".
Встановлюються заголовки відповіді з типом контенту
"application/json".
Виконується SQL-запит до бази даних для вибірки всіх рядків з таблиці
"Blog".
Результати запиту зберігаються у масиві "mas".
Отриманий масив даних перетворюється у JSON-строку.
Відповідь з JSON-строкою надсилається клієнту.
Завершується процес відправки відповіді.
54
ЧДТУ 232099.03 ПЗ
Таким чином, коли отримується GET-запит на шляху "/blog", сервер
виконує SQL-запит до бази даних, отримує результати та надсилає їх клієнту у
вигляді JSON.
3. Уривок коду відповідає за генерацію HTML-коду для відображення
блогів на стороні клієнта. Нижче наведено опис розробки програмних
компонентів за цим уривком:
const displayBlogs = (blogs) => {
const blogContainer = document.querySelector('#blog-
container');
blogContainer.innerHTML = '';
blogs.forEach((blog) => {
const blogItem = document.createElement('div');
blogItem.classList.add('blog-item');
const blogHeader = document.createElement('h3');
blogHeader.innerText = blog.blog_name;
blogHeader.classList.add('Text_big');
const blogImage = document.createElement('img');
blogImage.src = blog.path_foto;
blogImage.classList.add('blog-image');
blogImage.alt = 'Blog Image';
const blogText = document.createElement('p');
blogText.classList.add('blogtext');
fetch(`http://127.0.0.1:8081/TextBlog?id_blog=${blog.id_blog}
`)
.then((response) => response.json())
.then((data) => {
const texts = data.map((item) => item.text);
blogText.innerText = texts; // Встановлюємо
текст блогу
})
.catch((error) => console.log(error));
const blogcomment = document.createElement('p');
blogcomment.classList.add('blogcomment');
fetch(`http://127.0.0.1:8081/comment?id_blog=${blog.id_blog}`
)
.then((response) => response.json())
.then((data) => {
fetch(`http://127.0.0.1:8081/Users`)
.then((response) => response.json())
.then((userData) => {
const comments = data.map((item) => {
const user = userData.find((user) => user.id_user
=== item.id_user);
const login = user ? user.login_user : 'Unknown
User';
return `Від користувача: ${login},:
${item.comment_text}`;
55
ЧДТУ 232099.03 ПЗ
});
blogcomment.innerText = comments.join('\n');
})
.catch((error) => console.log(error));
})
.catch((error) => console.log(error));
const commentForm = document.createElement('form');
commentForm.classList.add('comment-form');
const commentInput = document.createElement('input');
commentInput.type = 'text';
commentInput.placeholder = 'Введіть коментар...';
commentInput.classList.add('comment-input');
const commentButton =
document.createElement('button');
commentButton.type = 'button';
commentButton.innerText = 'Додати коментар';
commentButton.classList.add('comment-button');
let dateNew = blog.blog_date.slice(0, 10);
let timeNew = blog.blog_time.slice(0, 5);
fetch(`http://127.0.0.1:8081/Users`)
.then((response) => response.json())
.then((userData) => {
const user = userData.find((user) => user.id_user ===
blog.id_user);
const login = user ? user.login_user : 'Unknown User';
const blogDetails = document.createElement('p');
let dateNew = blog.blog_date.slice(0, 10);
let timeNew = blog.blog_time.slice(0, 5);
blogDetails.innerText = `Автор блогу: ${login}, дата
публікації: ${dateNew}, час публікації: ${timeNew}`;
blogDetails.classList.add('Text_info');
blogItem.appendChild(blogDetails);
})
.catch((error) => console.log(error));
Функція displayBlogs призначена для відображення блогів на сторінці.
Вона отримує масив блогів і для кожного блогу створює DOM-елемент з
необхідною інформацією (заголовок, зображення, текст, коментарі). Елементи
додаються до контейнера з ідентифікатором blog-container.
Для кожного блогу створюються наступні елементи:
blogItem: <div> елемент, який представляє окремий блог;
blogHeader: <h3> елемент, який містить заголовок блогу (blog_name);
56
ЧДТУ 232099.03 ПЗ
blogImage: <img> елемент, який відображає зображення блогу
(path_foto);
blogText: <p> елемент, який відображає текст блогу. Текст отримується
за допомогою запиту fetch до сервера за URL
http://127.0.0.1:8081/TextBlog?id_blog=${blog.id_blog};
blogcomment: <p> елемент, який відображає коментарі до блогу.
Коментарі отримуються за допомогою запиту fetch до сервера за URL
http://127.0.0.1:8081/comment?id_blog=${blog.id_blog}. Перед
відображенням коментарів, також виконується запит до сервера за URL
http://127.0.0.1:8081/Users, щоб отримати дані про користувачів, які
залишили коментарі. Коментарі об'єднуються разом з інформацією про
користувачів і відображаються у вигляді рядків;
commentForm: <form> елемент, який містить поле для введення
коментаря (commentInput) і кнопку для додавання коментаря
(commentButton);
Функція createCommentForm створює елемент форми для введення
коментарів. Вона створює <form> елемент, поле для введення
коментаря (commentInput) і кнопку для додавання коментаря
(commentButton);
Інформація про автора блогу (ім'я автора, дата публікації, час
публікації) отримується за допомогою запиту до сервера за URL
http://127.0.0.1:8081/Users. Після отримання даних про користувачів,
шукається користувач, який є автором блогу за допомогою
ідентифікатора id_user. Якщо користувач знайдений, використовується
його ім'я для відображення інформації про автора блогу. Якщо
користувач не знайдений, використовується значення "Unknown User".
Інформація про автора блогу (ім'я, дата публікації, час публікації)
відображається за допомогою елементу <p> з класом "Text_info", який
додається до blogItem.
57
ЧДТУ 232099.03 ПЗ
Загалом, цей код відповідає за відображення блогів на сторінці і отримання
необхідної інформації з сервера для відображення заголовків, зображень, текстів
і коментарів до блогів. Також надає можливість додавати нові коментарі до
блогів за допомогою форми.
4. Функції додавання та видалення блогів
const addBlog = () => {
const addBlogForm = document.querySelector('#add-blog-
form');
const id_blog = addBlogForm.querySelector('#id_blog').value;
const blog_name =
addBlogForm.querySelector('#blog_name').value;
const blog_date =
addBlogForm.querySelector('#blog_date').value;
const blog_time =
addBlogForm.querySelector('#blog_time').value;
const id_user = addBlogForm.querySelector('#id_user').value;
const path_foto =
addBlogForm.querySelector('#path_foto').value;
const blog_text =
addBlogForm.querySelector('#blogtext').value;
fetch('http://127.0.0.1:8081/addblog', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id_blog: id_blog,
blog_name: blog_name,
blog_date: blog_date,
blog_time: blog_time,
id_user: id_user,
path_foto: path_foto,
blog_text: blog_text,
}),
})
.then((response) => {
return response.json();
})
.then((data) => {
if (data.success) {
generateBlogHTML();
addBlogForm.reset();
// console.log(data.message);
} else {
// console.log(data.message);
}
})
.catch((error) => {
58
ЧДТУ 232099.03 ПЗ
// console.log(error);
});
};
// Видалення блогу
const deleteBlog = () => {
const deleteBlogInput = document.querySelector('#delete-
blog-input').value;
fetch('http://127.0.0.1:8081/blog/${deleteBlogInput}', {
method: 'DELETE',
})
.then((response) => {
return response.json();
})
.then((data) => {
if (data.success) {
generateBlogHTML();
console.log(data.message);
} else {
console.log(data.message);
}
})
.catch((error) => {
console.log(error);
});
};
Функція addBlog відповідає за додавання нового блогу. Вона отримує
значення полів форми з додавання блогу (addBlogForm) і виконує запит до
сервера за адресою http://127.0.0.1:8081/addblog методом GET. Запит містить дані
про новий блог у форматі JSON. Дані блогу включають id_blog, blog_name,
blog_date, blog_time, id_user, path_foto та blog_text.
Після отримання відповіді від сервера, функція перевіряє поле success в
отриманих даних. Якщо success має значення true, то викликається функція
generateBlogHTML() для оновлення відображення блогів, форма очищається
методом reset(), і, можливо, виводиться повідомлення у консоль
(console.log(data.message)). У разі, якщо success має значення false, можливо,
виводиться повідомлення про помилку у консоль.
59
ЧДТУ 232099.03 ПЗ
Функція deleteBlog відповідає за видалення блогу. Вона отримує значення
поля введення для видалення блогу (deleteBlogInput) і виконує запит до сервера
за адресою http://127.0.0.1:8081/blog/${deleteBlogInput} методом DELETE.
Після отримання відповіді від сервера, функція перевіряє поле success в
отриманих даних. Якщо success має значення true, то викликається функція
generateBlogHTML() для оновлення відображення блогів і можливо виводиться
повідомлення у консоль (console.log(data.message)). У разі, якщо success має
значення false, можливо виводиться повідомлення про помилку у консоль.
3.2 Тестування системи
3.2.1 Модульне тестування
Модульне тестування є одним з методів тестування програмного
забезпечення, який використовується для перевірки окремих модулів або
компонентів (функцій, методів, класів) програми на правильність їх роботи. У
модульному тестуванні кожен модуль тестується ізольовано від інших частин
програми, зазвичай з використанням автоматизованих тестових сценаріїв.
Основна мета модульного тестування - перевірка коректності роботи
окремих модулів без залучення інших залежних компонентів або зовнішніх
ресурсів, таких як бази даних або мережеві служби. Це дозволяє виявляти та
виправляти помилки ранніх етапах розробки, поліпшувати структуру коду та
забезпечувати більшу стабільність і надійність програми.
Модульні тести зазвичай описуються у вигляді коду тестів, який
перевіряє очікувані результати виконання певних функцій або методів і
порівнює їх з фактичними результатами. Успішне проходження модульних
тестів підтверджує правильність роботи модулів, а виявлення несправностей
допомагає виявити й виправити помилки.
Тестування було проведено подібним методом:
// Модульне тестування функції generateBlogHTML
function testGenerateBlogHTML() {
// Підготовка тестових даних
const data = [
{
id_blog: 1,
blog_name: 'Blog 1',
60
ЧДТУ 232099.03 ПЗ
path_foto: 'path/to/image1.jpg',
blog_date: '2023-05-14',
blog_time: '10:00:00',
id_user: 1,
},
{
id_blog: 2,
blog_name: 'Blog 2',
path_foto: 'path/to/image2.jpg',
blog_date: '2023-05-13',
blog_time: '12:00:00',
id_user: 2,
},
];
// Маніпуляція з DOM
const blogContainer = document.createElement('div');
blogContainer.setAttribute('id', 'blog-container');
document.body.appendChild(blogContainer);
// Виклик функції, яку тестуємо
displayBlogs(data);
// Перевірка результату
const blogItems = document.getElementsByClassName('blog-
item');
if (blogItems.length !== data.length) {
console.error('Test failed: Incorrect number of blog
items');
}
// Очищення DOM
document.body.removeChild(blogContainer);
}
// Запуск тестування
testGenerateBlogHTML();
У цьому прикладі ми створюємо тестові дані з двома блогами і викликаємо
функцію displayBlogs, передаючи їй ці дані. Потім перевіряємо, чи відображено
правильну кількість блогів у DOM. Якщо кількість блогів не співпадає з
очікуваною, виводимо повідомлення про помилку.
Приклад модульного тесту для даного коду, використовуючи популярну
бібліотеку для модульного тестування у JavaScript - Jest:
const { test, expect, beforeEach, afterEach } =
require('jest');
// Підключення необхідних модулів та налаштування
const { createServer } = require('http');
const { Client } = require('your-database-library'); //
Замініть 'your-database-library' на бібліотеку, яку ви
використовуєте
61
ЧДТУ 232099.03 ПЗ
const yourModule = require('./your-module'); // Замініть
'./your-module' на шлях до вашого модуля
let server;
let client;
beforeEach(() => {
// Перед кожним тестом створюємо сервер та клієнта бази
даних
server = createServer(yourModule);
client = new Client();
client.connect();
});
afterEach((done) => {
// Після кожного тесту закриваємо сервер та клієнта бази
даних
server.close();
client.end(done);
});
test('GET /blog should return JSON array of blog data',
(done) => {
const options = {
hostname: 'localhost',
port: 3000, // Замініть на потрібний порт
path: '/blog',
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
};
// Виконуємо HTTP-запит на сервер
const req = http.request(options, (res) => {
expect(res.statusCode).toBe(200);
expect(res.headers['content-
type']).toBe('application/json');
let responseData = '';
res.on('data', (chunk) => {
responseData += chunk;
});
res.on('end', () => {
const blogData = JSON.parse(responseData);
expect(Array.isArray(blogData)).toBe(true);
// Тут ви можете додатково перевірити структуру даних
blogData
done(); // Повідомляємо Jest, що тест завершено
62
ЧДТУ 232099.03 ПЗ
});
});
req.end();
});
У цьому прикладі ми використовуємо Jest для створення тесту, який
виконує GET-запит на сервер за URL-адресою "/blog" і перевіряє, чи
повертається правильна відповідь. Також перевіряється код статусу, заголовки
та формат даних (JSON масив). також можна додатково розширити тест, щоб
перевірити структуру даних, якщо необхідно.
3.2.2 Інтеграційне тестування
Інтеграційне тестування - це процес перевірки взаємодії між різними
компонентами або модулями системи з метою виявлення помилок, що можуть
виникнути при їхній спільній роботі. Це тестування дозволяє перевірити, чи
працюють окремі компоненти системи належним чином разом і чи передають
вони дані із заявленими специфікаціями.
Щоб провести інтеграційне тестування коду, потрібно створити тестове
середовище, включаючи моковані дані та серверну частину.
Інтеграційне тестування передбачає перевірку взаємодії між різними
компонентами системи, включаючи клієнтську і серверну частини. В даному
випадку, це означає перевірку взаємодії між клієнтом (браузером) і сервером,
коли відбувається завантаження блогів, додавання блогів, видалення блогів та
інші операції.
Основні кроки для проведення інтеграційного тестування коду будуть
наступними:
Налаштування тестового середовища:
1 запустив серверну частину коду на локальному сервері або
використовуйте сервіс для тестування API (наприклад, Postman Mock
Server).
2 забезпечив наявність мокованих даних для тестування, які можна
використовувати під час запитів до сервера.
63
ЧДТУ 232099.03 ПЗ
3 написав тести, які перевіряють різні аспекти функціональності коду,
такі як завантаження блогів, додавання блогів, видалення блогів та
інші операції.
4 використав тестовий фреймворк Jest, для створення й виконання тестів.
Тести були проведені на працюючій програмі, використовуючи тестові
дані, в ході тестування було виправлено баг на відображення коментарів
3.2.3 Системне тестування
Системне тестування (System Testing) є одним з етапів тестування
програмного забезпечення і включає в себе перевірку функціональності системи
в цілому.
Системне тестування головного меню:
Рисунок 3.17 - Головне меню
Під час відкриття головного меню сайту виконується такі процедури
функції section1, в якій виконуються наступні дії:
1 Ініціалізація змінних для керування сторінками та кількістю блогів на
сторінці.
64
ЧДТУ 232099.03 ПЗ
2 Створення функції generateBlogHTML, яка отримує дані з сервера,
сортує їх у зворотньому порядку за значенням id_blog, вибирає
поточну сторінку блогів та відображає їх.
3 Створення функції addLoadMoreButton, яка додає кнопку
"Завантажити ще" та встановлює обробник події для завантаження
нових блогів.
4 Створення функції displayBlogs, яка відображає блоги на сторінці.
5 Встановлення обробників подій для додавання блогу та видалення
блогу.
6 Функція saveComment, яка зберігає коментарі до блогів.
7 Виклик функції section1 для ініціалізації програми.
8 Створення функції section2, в якій виконуються наступні дії:
9 Отримання поточної дати і часу.
10 Заповнення полів форми для додавання блогу.
11 Отримання останнього id_blog з бази даних та автоматичне
заповнення поля для id_blog.
12 Виклик функції section2 для ініціалізації програми.
Цей флоу програми дозволяє відображати блоги, додавати нові блоги,
видаляти блоги та зберігати коментарі до блогів.
Системне тестування Авторизації:
65
ЧДТУ 232099.03 ПЗ
Рисунок 3.18 - Сторінка авторизації
Під час відкриття розділу авторизації сайту виконується такі процедури:
1 Користувач відкриває сторінку авторизації.
2 Користувач вводить свої облікові дані, такі як логін і пароль.
3 Користувач натискає кнопку "Увійти" або подібний елемент для
підтвердження введених даних.
4 На сервер відправляється запит на перевірку облікових даних.
5 Сервер перевіряє введені дані збережених користувачів, що
зберігаються в базі даних або іншому місці.
6 Якщо облікові дані вірні, сервер надсилає відповідь з позитивним
результатом авторизації.
7 Клієнт отримує позитивну відповідь і переходить до основної частини
програми або відображає повідомлення про успішну авторизацію.
8 Якщо облікові дані невірні, сервер надсилає відповідь з негативним
результатом авторизації.
9 Клієнт отримує негативну відповідь і відображає повідомлення про
невдалий вхід або додає інші візуальні підказки для користувача.
66
ЧДТУ 232099.03 ПЗ
10 Користувач може повторити процес авторизації, введення облікових
даних і натискання кнопки "Увійти" для спроби знову увійти.
2 Системне тестування реєстрації:
Рисунок 3.19 - Сторінка реєстрації
Під час роботи розділу реєстрації сайту виконується такі процедури:
1 Користувач відкриває сторінку реєстрації.
2 Клієнт заповнює поле "Логін" введенням бажаного логіну.
3 Клієнт заповнює поле "Пароль" введенням бажаного пароля.
4 Клієнт заповнює поле "Фамілія ім'я По-Батькові" введенням свого
повного імені.
5 Клієнт заповнює поле "Дата народження" введенням своєї дати
народження.
6 Клієнт натискає кнопку "Зареєструватися".
7 Виконується запит до сервера за допомогою fetch(), з отриманням
даних користувачів за адресою http://127.0.0.1:8081/Users.
8 Отримані дані про користувачів обробляються в форматі JSON.
9 Кількість користувачів визначається шляхом підрахунку кількості
отриманих записів.
67
ЧДТУ 232099.03 ПЗ
10 Клієнт встановлює отриману кількість користувачів + 1 у полі "Ваш
ID буде".
11 Клієнт отримує значення логіну, пароля, повного імені та дати
народження, які він ввів.
12 Виконується шифрування пароля за допомогою алгоритму зі
здвигом.
13 Виведення результату шифрування пароля на сторінці.
14 Створення об'єкту FormData і заповнення його даними про
користувача, включаючи ID, логін, зашифрований пароль, повне ім'я,
дату народження та ID модератора.
15 Виконується POST-запит до адреси /addUser з використанням
створеного об'єкту FormData.
16 Сервер обробляє отримані дані і зберігає нового користувача в базі
даних.
17 Після успішного виконання запиту, на сторінці очищує поля вводу
3.2.4 Приймальне тестування
Після запуску програми бачимо таке вікно
Рисунок 3.20 – Головна сторінка
Після запуску можна лише переглядати блоги та контакти
68
ЧДТУ 232099.03 ПЗ
Рисунок 3.21 - Сторінка контактів
для подальших функцій потрібно зареєструватися і авторизуватись , тому
натискаємо кнопку для реєстрації і отримуємо таке вікно:
Рисунок 3.22 - Сторінка реєстрації
Після вводу інформації і натискання кнопки зареєструватись аккаунт
створено і можемо перейти до авторизації, натискаємо кнопку авторизації
69
ЧДТУ 232099.03 ПЗ
Рисунок 3.23 - Сторінка авторизації
Вводимо логін і пароль , якщо авторизація успішна можемо перейти і
переглянути свій профіль натиснувши відповідну кнопку
Рисунок 3.24 - Сторінка профіль
Тепер якщо ми маємо права адміністратора можемо додавати та видаляти
блоги (рисунок 3.25, 3.26).
70
ЧДТУ 232099.03 ПЗ
Рисунок 3.25 – Додання блогу
Для цього заповняємо поля і натискаємо відповідно кнопку.
Для видалення блогів потрібно мати права адміністратора і натиснути
кнопку під блогом з назвою «Видалити блог» як показано на рисунку 3.26.
Рисунок 3.26 - Кнопка «Видалити блог»
Для перегляду іншої сторінки з блогами більш давнішими потрібно
натиснути кнопку «Завантажити ще» (рисунок 3.26).
Рисунок 3.27- Кнопка «Завантажити ще»
Використовуючи описані елементи навігації здійснюється основні функції
сайту.
71
ЧДТУ 232099.03 ПЗ
ВИСНОВКИ
Для того щоб розробити веб сайт такого типу було розглянуто існуючі
аналоги систем. Для аналізу було обрано інші блоги аналогічного напрямку.
За результатами аналізу сформовано постановку задачі на розробку
власної програми.
Проектування програмного забезпечення потребує детального аналізу та
моделювання предметної області, формування та аналізу вимог до
програмного продукту, проектування логічної структури програмного
комплексу та розгортання програмної системи на апаратних засобах.
Для моделювання поведінки системи використовуються різні діаграми,
такі як діаграми діяльності, послідовності, комунікації та скінченого автомату.
В рамках роботи над другим розділом було створено систему,
розроблено план для реалізації і діаграми реалізації майже всіх аспектів
розроблюваного проекту.
Також було розібрано основні поняття, цілі та вимоги до
розроблюваного проекту.
В рамках виконання кваліфікаційної роботи бакалавра було
спроектовано та розроблено веб сайт згідно за поставленими вимогами.
В процесі тестування було усунуто більшість недоліків додатку та
перевірена надійність та швидкодія створеного кваліфікаційного проекту
бакалавра. Інтернет сайт було викладено на сервер. Після знаходження
модераторів для нього його можна буде використовувати по прямому
призначенню.
Усі ці етапи допомагають забезпечити ефективну розробку програмного
забезпечення згідно з вимогами замовника та забезпечити його безперебійну
роботу в майбутньому.
72
ЧДТУ 232099.03 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. PBB [Електронний ресурс]. – Режим доступу: https://pbb.lviv.ua/statti-i-
novyny/statti-shchodo-stvorennia-saitu/jak-zrobyty-dyzayn-saytu-zruchnym/
Перевірено: 1.03.2023.
1. 4PDA [Електронний ресурс]. – Режим доступу: https://4pda.to/
Перевірено: 1.01.2023.
2. Ixbt.com [Електронний ресурс]. – Режим доступу:
https://www.ixbt.com/live/blog/games/ Перевірено:1.03.2023.
3. Luckylink [Електронний ресурс]. – https:// Режим доступу:
luckylink.kiev.ua/blog/ Перевірено: 1.03.2023.
4. Вікіпедія HTML [Електронний ресурс]. – Режим доступу: https://
uk.wikipedia.org/wiki/HTML Перевірено: 1.03.2023.
5. Вікіпедія JavaScript [Електронний ресурс]. – Режим доступу: https://
uk.wikipedia.org/wiki/ JavaScript Перевірено: 1.03.2023.
6. Авраменко В.С. Проектування інформаційних систем / В.С. Авраменко.
[Електронне видання]. – Черкаси: ЧНУ ім. Богдана Хмельницького, 2015. – 496
с. Перевірено: 1.03.2023.
7. Node.js документація [Електронний ресурс]. Режим доступу: https://
nodejs.org/en/docs/ Перевірено: 1.03.2023.
8. Основи UML [Електронний ресурс]. Режим доступу:
https://docs.kde.org/trunk5/uk/umbrello/umbrello/uml- Перевірено:
basics.html 1.03.2023.
9. Profiteh [Електронний ресурс]. – Режим доступу:
https://profiteh.ua/pozhezhna-bezpeka-na-pidpryiemstvi-pravyla-taorhanizatsiia
Перевірено: 1.03.2023.
10. profspilka.kiev.ua [Електронний ресурс]. – Режим доступу: http://
profspilka.kiev.ua/soc-zahust/ohorona_praci/docs_ohorona/1438-primrna-
nstrukcya-z-nadannya-pershoyi-dolkarskoyi-dopomogi.html/ Перевірено:
1.03.2023.
73
ЧДТУ 232099.03 ПЗ
11. esg.spb. [Електронний ресурс]. – Режим доступу: http://esg.spb.ru/
informacionnaya_model_obyekta/ Перевірено: 1.03.2023.
12. dnaop. [Електронний ресурс]. – Режим доступу: . https://dnaop.com/
html/33275/doc-primirna-instrukcijaz-ohoroni-pracipri-roboti-na-
personalynihjelektronno-obchislyuvalynih-mashinah/ Перевірено: 1.03.2023.
13. Flanagan, D. (2011). JavaScript: The Definitive Guide [Книга].
O'Reilly Media Перевірено: 4.04.2023.
14. Duckett, J. (2014) . JavaScript and JQuery: Interactive Front-End Web
Development [Книга]. Wiley Перевірено: 4.04.2023.
15. W3Schools [Електронний ресурс]. Режим доступу:
https://www.w3schools.com/ Перевірено: 4.04.2023.
16. PostgreSQL документація [Електронний ресурс]. Режим доступу:
https://www.postgresql.org/docs/ Перевірено: 4.04.2023.
17. Eloquent JavaScript [Електронний ресурс]. Режим доступу:
https://eloquentjavascript.net/ [Книга]. Автор: Марієн Хавербеке. Перевірено:
4.04.2023.
18. The Node Beginner Book [Електронний ресурс]. Режим доступу:
https://www.nodebeginner.org/ [Книга]. Автор: Мануел Кієселінг. Перевірено:
4.04.2023.
19. Pro JavaScript Design Patterns [Електронний ресурс]. Режим
доступу: https://www.apress.com/gp/book/9781590599082 [Книга]. Автор:
Джаред Фарнахем. Перевірено: 4.04.2023.
20. Web Development with Node and Express: Leveraging the JavaScript
Stack [Електронний ресурс]. Режим доступу:
https://www.apress.com/gp/book/9781484240239 [Книга]. Автор: Етан Браунінг.
Перевірено: 4.04.2023.
21. PostgreSQL: Up and Running [Електронний ресурс]. Режим
доступу: https://www.oreilly.com/library/view/postgresql-up-and/9781449326333/
[Книга]. Автори: Редвуд Талей та Ред Майнхайм. Перевірено: 4.04.2023.
74
ЧДТУ 232099.03 ПЗ
22. Mozilla Developer Network (MDN) [Електронний ресурс]. Режим
доступу: https://developer.mozilla.org/ Перевірено: 4.04.2023.
23. Stack Overflow [Електронний ресурс]. Режим доступу:
https://stackoverflow.com/ Перевірено: 4.04.2023.
24. FreeCodeCamp [Електронний ресурс]. Режим доступу:
https://www.freecodecamp.org/ Перевірено: 4.04.2023.
25. Codecademy [Електронний ресурс]. Режим доступу:
https://www.codecademy.com/ Перевірено: 4.04.2023.
26. JavaScript.info [Електронний ресурс]. Режим доступу:
https://javascript.info/ Перевірено: 4.04.2023.
27. A Smarter Way to Learn JavaScript [Книга]. Автор: Mark Myers. Рік
видання: 2014.
28. You Don't Know JS [Книга]. Автор: Kyle Simpson. Рік видання: 2015-
2018.
29. JavaScript: The Good Parts [Книга]. Автор: Douglas Crockford. Рік
видання: 2008.
30. HTML and CSS: Design and Build Websites [Книга]. Автор: Jon
Duckett. Рік видання: 2011.
31. The Modern JavaScript Tutorial [Електронний ресурс]. Режим
доступу: https://javascript.info/
32. Node.js in Action [Книга]. Автори: Mike Cantelon, Marc Harter, T.J.
Holowaychuk, Nathan Rajlich. Рік видання: 2013.
33. Express.js Guide [Електронний ресурс]. Режим доступу:
https://expressjs.com/ Перевірено: 4.04.2023.
34. The Node.js Handbook [Електронний ресурс]. Режим доступу: https://
nodehandbook.com/ Перевірено: 4.04.2023.
35. Learning PostgreSQL [Електронний ресурс]. Режим доступу: https://
www.postgresqltutorial.com/ Перевірено: 4.04.2023.
36. Mastering PostgreSQL [Книга]. Автор: Hans-Jürgen Schöngi. Рік
видання: 2020.
75
ЧДТУ 232099.03 ПЗ
37. PostgreSQL: A Comprehensive Guide [Книга]. Автор: István Koren.
Рік видання: 2017.
38. SQL Performance Explained [Книга]. Автор: Markus Winand. Рік
видання: 2018.
39. The Art of SQL [Книга]. Автори: Stephane Faroult, Peter Robson. Рік
видання: 2006.
40. Practical Node.js: Building Real-World Scalable Web Apps [Книга].
Автор: Azat Mardan. Рік видання: 2014.
41. Node.js Design Patterns [Книга]. Автор: Mario Casciaro. Рік видання:
2014.
42. JavaScript Patterns [Книга]. Автор: Stoyan Stefanov. Рік видання:
2010.
43. PostgreSQL High Performance [Книга]. Автор: Greg Smith. Рік
видання: 2010.
44. Node.js Web Development [Книга]. Автор: David Herron. Рік
видання: 2013.
45. Learning Node.js: A Hands-On Guide to Building Web Applications in
JavaScript [Книга]. Автор: Marc Wandschneider. Рік видання: 2013.
46. JavaScript: The Good Parts [Електронний ресурс]. Режим доступу:
https://www.javascriptthegoodparts.com/
47. Pro HTML5 and CSS3 Design Patterns [Книга]. Автор: Michael
Bowers. Рік видання: 2011.
48. Fullstack React: The Complete Guide to ReactJS and Friends [Книга].
Автор: Anthony Accomazzo. Рік видання: 2017.
49. The React Handbook [Електронний ресурс]. Режим доступу:
https://www.freecodecamp.org/news/the-react-handbook/
50. CSS Secrets: Better Solutions to Everyday Web Design Problems
[Книга]. Автор: Lea Verou. Рік видання: 2015.
51. Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript,
and Web Graphics [Книга]. Автор: Jennifer Robbins. Рік видання: 2018.
76
ЧДТУ 232099.03 ПЗ
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедри ПЗАС
проф. Голуб С.В.
___________________________
Документація
Специфікація
482.ЧДТУ.02099-03
Листів 1
Розробник ________________ Бойко Д.Ю.
Керівник ________________ Заспа Г.О.
Н.Контроль ________________ Півень О.Б.
Черкаси 2023
77
ЧДТУ 232099.03 ПЗ
Позначення Найменування Примітка
Документація
482.ЧДТУ.02099-003 12-01 Лістинг програми
482.ЧДТУ.02099-003 34-01 Інструкція користувача
482.ЧДТУ.02099-003 90-01 Презентація
78
ДОДАТОК Б
Інструкція користувача
82.ЧДТУ.02099-003 34-01
Листів 5
Розробник ________________ Бойко Д.Ю.
Черкаси 2023
79
482.ЧДТУ.02099-003 34-01
Після запуску бачимо таке вікно:
Рисунок 1 – Головна сторінка
Після запуску можна лише переглядати блоги та контакти
Рисунок 2- Сторінка контактів
для подальших функцій потрібно заєструватись і авторизуватись
, тому натискаємо кнопку для реєстрації і отримуємо таке вікно:
80
482.ЧДТУ.02099-003 34-01
Рисунок 3 - Сторінка реєстрації
Після вводу інформації і натискання кнопки зареєструватись
аккаунт створено і можемо перейти до авторизації, натискаємо кнопку
авторизації
Рисунок 4 - Сторінка авторизації
81
482.ЧДТУ.02099-003 34-01
Вводимо логін і пароль , якщо авторизація успішна можемо
перейти і переглянути свій профіль натиснувши відповідну кнопку
Рисунок 5 - Сторінка профіль
Тепер якщо ми маємо права адміна можемо добавляти та
видаляти блоги
Рисунок 6– Додання та видалення блогу
Для цього заповняємо поля і натискаємо відповідно кнопку
82
482.ЧДТУ.02099-003 34-01
Для перегляду іншої строрінки з блогами більш давнішими
потрібно натиснути кнопку «Завантажити ще»
Рисунок 7 - кнопка «Завантажити ще»
83
ЧДТУ 232099.03 ПЗ
ДОДАТОК В
ЛІСТИНГ ПРОГРАМИ
482.ЧДТУ.02099-003 12-01
Листів 20
Розробник ________________ Бойко Д.Ю.
Черкаси 2023
84
482.ЧДТУ.02099-003 12-01
Лістинг бекенду JS:
function section1() {
let currentPage = 1; // Поточна сторінка
const blogsPerPage = 5; // Кількість блогів на сторінці
const generateBlogHTML = () => {
fetch('http://127.0.0.1:8081/blog')
.then((response) => response.json())
.then((data) => {
data.sort((a, b) => {
return b.id_blog - a.id_blog; // Сортування у зворотньому порядку
за значенням id_blog
});
const startIndex = (currentPage - 1) * blogsPerPage;
const endIndex = startIndex + blogsPerPage;
const currentBlogs = data.slice(startIndex, endIndex);
displayBlogs(currentBlogs);
if (endIndex < data.length) {
addLoadMoreButton();
}
})
.catch((error) => {
console.log(error);
});
};
const addLoadMoreButton = () => {
const blogContainer = document.querySelector('#blog-container');
const loadMoreButton = document.createElement('button');
loadMoreButton.innerText = 'Завантажити ще';
loadMoreButton.classList.add('load-more-button');
loadMoreButton.addEventListener('click', () => {
currentPage++; // Збільшення номера поточної сторінки
generateBlogHTML(); // Завантаження нових блогів
});
blogContainer.appendChild(loadMoreButton);
};
// Відображення блогів
const displayBlogs = (blogs) => {
const blogContainer = document.querySelector('#blog-container');
blogContainer.innerHTML = '';
blogs.forEach((blog) => {
const blogItem = document.createElement('div');
blogItem.classList.add('blog-item');
const blogHeader = document.createElement('h3');
blogHeader.innerText = blog.blog_name;
blogHeader.classList.add('Text_big');
85
482.ЧДТУ.02099-003 12-01
const blogImage = document.createElement('img');
blogImage.src = blog.path_foto;
blogImage.classList.add('blog-image');
blogImage.alt = 'Blog Image';
const blogText = document.createElement('p');
blogText.classList.add('blogtext');
fetch(`http://127.0.0.1:8081/TextBlog?id_blog=${blog.id_blog}`)
.then((response) => response.json())
.then((data) => {
const texts = data.map((item) => item.text);
// console.log(texts);
// console.log(data);
blogText.innerText = texts; // Встановлюємо текст блогу
})
.catch((error) => console.log(error));
const blogcomment = document.createElement('p');
blogcomment.classList.add('blogcomment');
fetch(`http://127.0.0.1:8081/comment?id_blog=${blog.id_blog}`)
.then((response) => response.json())
.then((data) => {
fetch(`http://127.0.0.1:8081/Users`)
.then((response) => response.json())
.then((userData) => {
const comments = data.map((item) => {
const user = userData.find((user) => user.id_user ===
item.id_user);
const login = user ? user.login_user : 'Unknown User';
return `Від користувача: ${login},: ${item.comment_text}`;
});
blogcomment.innerText = comments.join('\n');
})
.catch((error) => console.log(error));
})
.catch((error) => console.log(error));
const commentForm = document.createElement('form');
commentForm.classList.add('comment-form');
const commentInput = document.createElement('input');
commentInput.type = 'text';
commentInput.placeholder = 'Введіть коментар...';
commentInput.classList.add('comment-input');
const commentButton = document.createElement('button');
commentButton.type = 'button';
const delButton = document.createElement('button');
delButton.type = 'button';
delButton.innerText = 'Видалити блог';
delButton.classList.add('delete-button');
const delbr = document.createElement('p');
delbr.innerText = ``;
commentButton.innerText = 'Додати коментар';
commentButton.classList.add('comment-button');
let dateNew = blog.blog_date.slice(0, 10);
let timeNew = blog.blog_time.slice(0, 5);
fetch(`http://127.0.0.1:8081/Users`)
86
482.ЧДТУ.02099-003 12-01
.then((response) => response.json())
.then((userData) => {
const user = userData.find((user) => user.id_user ===
blog.id_user);
const login = user ? user.login_user : 'Unknown User';
const blogDetails = document.createElement('p');
let dateNew = blog.blog_date.slice(0, 10);
let timeNew = blog.blog_time.slice(0, 5);
blogDetails.innerText = `Автор блогу: ${login}, дата публікації:
${dateNew}, час публікації: ${timeNew}`;
blogDetails.classList.add('Text_info');
blogItem.appendChild(blogDetails);
})
.catch((error) => console.log(error));
const displayComments = (blogId) => {
fetch(`http://127.0.0.1:8081/comments?blog_id=${blogId}`)
.then((response) => response.json())
.then((data) => {
const commentContainer = document.querySelector(`#comment-
container-${blogId}`);
commentContainer.innerHTML = '';
data.forEach((comment) => {
const commentItem = document.createElement('div');
commentItem.classList.add('comment-item');
commentItem.innerText = comment.comment_text;
const commentId = document.createElement('p');
commentId.classList.add('comment-id');
commentId.innerText = `Comment ID: ${comment.id_comment}`;
commentItem.appendChild(commentId);
commentContainer.appendChild(commentItem);
});
})
.catch((error) => console.log(error));
};
commentForm.appendChild(commentInput);
commentForm.appendChild(commentButton);
blogItem.appendChild(blogHeader);
blogItem.appendChild(blogImage);
blogItem.appendChild(blogText);
blogItem.appendChild(blogcomment);
commentForm.appendChild(delbr);
if (localStorage.getItem("login") != undefined) {
blogItem.appendChild(commentForm);
}
if (localStorage.getItem("moderatorId") > 1) {
commentForm.appendChild(delButton);
}
blogContainer.appendChild(blogItem);
});
};
87
482.ЧДТУ.02099-003 12-01
// Додавання блогу
const addBlog = () => {
const addBlogForm = document.querySelector('#add-blog-form');
const id_blog = addBlogForm.querySelector('#id_blog').value;
const blog_name = addBlogForm.querySelector('#blog_name').value;
const blog_date = addBlogForm.querySelector('#blog_date').value;
const blog_time = addBlogForm.querySelector('#blog_time').value;
const id_user = localStorage.getItem("id_user");
const path_foto = addBlogForm.querySelector('#path_foto').value;
const blog_text = addBlogForm.querySelector('#blogtext').value;
fetch('http://127.0.0.1:8081/addblog', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id_blog: id_blog,
blog_name: blog_name,
blog_date: blog_date,
blog_time: blog_time,
id_user: id_user,
path_foto: path_foto,
blog_text: blog_text,
}),
})
.then((response) => {
return response.json();
})
.then((data) => {
if (data.success) {
generateBlogHTML();
addBlogForm.reset();
// console.log(data.message);
} else {
// console.log(data.message);
}
})
.catch((error) => {
// console.log(error);
});
};
// Видалення блогу
const deleteBlog = () => {
const deleteBlogInput = document.querySelector('#delete-blog-
input').value;
fetch('http://127.0.0.1:8081/blog/${deleteBlogInput}', {
method: 'DELETE',
})
.then((response) => {
return response.json();
})
.then((data) => {
if (data.success) {
generateBlogHTML();
console.log(data.message);
} else {
console.log(data.message);
}
})
88
482.ЧДТУ.02099-003 12-01
.catch((error) => {
console.log(error);
});
};
// Налаштування обробників подій
const addBlogForm = document.querySelector('#add-blog-form');
addBlogForm.addEventListener('submit', (event) => {
event.preventDefault();
addBlog();
});
// const deleteBlogButton = document.querySelector('#delete-blog-
button');
// deleteBlogButton.addEventListener('click', deleteBlog);
// Функція для збереження коментаря
const saveComment = (blogId, commentText) => {
const commentContainerId = `comment-container-${blogId}`;
console.log(blogId);
return fetch(`http://127.0.0.1:8081/comment?id_blog=${blogId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
comment: commentText,
}),
})
.then((response) => {
return response.json();
})
.catch((error) => {
console.log(error);
});
};
document.addEventListener('DOMContentLoaded', () => {
generateBlogHTML(); // Запуск генерації блогів
});
// Завантаження блогів при завантаженні сторінки
window.addEventListener('load', () => {
generateBlogHTML();
});
if (localStorage.getItem("moderatorId") > 1) {
const addBlogForm = document.getElementById('add-blog-form');
addBlogForm.style.display = 'block';
}
}
section1();
function section2() {
// Отримання поточної дати
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
89
482.ЧДТУ.02099-003 12-01
// Отримання поточного часу
const hours = String(currentDate.getHours()).padStart(2, '0');
const minutes = String(currentDate.getMinutes()).padStart(2, '0');
const seconds = String(currentDate.getSeconds()).padStart(2, '0');
// Заповнення полів форми
document.getElementById('blog_date').value = `${year}-${month}-${day}`;
document.getElementById('blog_time').value =
`${hours}:${minutes}:${seconds}`;
document.getElementById('id_user').value = 4;
const loginOutput = document.getElementById('login-output');
loginOutput.textContent = localStorage.getItem("login");
fetch(`http://127.0.0.1:8081/blog`)
.then((response) => response.json())
.then((data) => {
const blogs = data.map((item) => item.id_blog);
const id_blogInput = document.getElementById('id_blog');
const labelElement = document.getElementById('id_blog_label');
const nextId = blogs.length + 1;
id_blogInput.value = nextId;
const id_userInput = document.getElementById('id_blog');
id_userInput.setAttribute('readonly', 'readonly');
})
.catch((error) => console.log(error));
}
section2();
Лістинг бекенду:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
const http = require("http");
const fs = require("fs");
const { Client } = require('pg')
const client = new Client({
user: 'postgres',
host: 'localhost',
database: 'DB1',
password: '1234566',
port: 5432,
})
client.connect(function (err) {
if (err) throw err;
90
482.ЧДТУ.02099-003 12-01
console.log("Connected!");
});
http.createServer(function (request, response) {
if (request.url === "/blog" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Blog
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
response.end();
});
}
if (request.url.split('?')[0] === "/addblog" && request.method === "GET") {
try {
const params = request.url.split('?')[1].split('&');
const id_blog = +params[0].split('=')[1];
const blog_name = +params[1].split('=')[1];
const blog_date = +params[2].split('=')[1];
const blog_time = +params[3].split('=')[1];
const id_user = +params[4].split('=')[1];
const path_foto = +params[5].split('=')[1];
const blog_text = +params[6].split('=')[1];
let query = `
SELECT *
FROM Blog
`;
let mas = [];
91
482.ЧДТУ.02099-003 12-01
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row;
for (row of res.rows) {
mas.push(row);
}
let a = mas.length > 0 ? mas[mas.length - 1].id_blog + 1 : 1;
query = `
SELECT *
FROM TextBlog
`;
let mas2 = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row;
for (row of res.rows) {
mas2.push(row);
}
let b = mas2.length > 0 ? mas2[mas2.length - 1].id_TextBlog + 1 : 1;
if (blog_text.length > 255) {
let text255 = '';
let id_TextBlog = b;
let id_blog = a;
if (blog_text.length > 255) {
for (let i = 0; i < blog_text.length; i += 255) {
text255 = blog_text.slice(i, i + 255);
query = `INSERT INTO TextBlog (id_TextBlog, id_blog, text)
VALUES (${id_TextBlog}, ${id_blog}, '${text255}')`;
client.query(query);
id_TextBlog++;
}
92
482.ЧДТУ.02099-003 12-01
} else {
document.getElementById('text-Out').innerText = blog_text;
query = `INSERT INTO TextBlog (id_TextBlog, id_blog, text) VALUES
(${id_TextBlog}, ${id_blog}, '${blog_text}')`;
client.query(query);
id_TextBlog++;
}
}
query = `INSERT INTO blog (id_blog, blog_name, blog_date, blog_time,
id_user, path_foto) VALUES (${id_blog}, '${blog_name}', '${blog_date}',
'${blog_time}', ${id_user}, '${path_foto}')`;
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
});
});
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
if (request.url.split('?')[0] === "/delblog" && request.method === "GET") {
try {
const params = request.url.split('?')[1].split('&')
const table_name = +params[0].split('=')[1];
let query = "DELETE FROM blog WHERE id_blog =" + table_name;
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
if (request.url === "/Users" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Users
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
93
482.ЧДТУ.02099-003 12-01
console.error(err);
return;
}
let row
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
response.end();
});
}
if (request.url.split('?')[0] === "/addUsers" && request.method === "GET") {
try {
const params = request.url.split('?')[1].split('&')
const id_user = +params[0].split('=')[1];
const login_user = +params[1].split('=')[1];
const Fio = +params[2].split('=')[1];
const Password_user = +params[3].split('=')[1];
const birthday_user = +params[4].split('=')[1];
const Id_moderator = +params[5].split('=')[1];
let query = "INSERT INTO Users (id_user , login_user, Fio, Password_user,
birthday_user, Id_moderator) VALUES ("
+ id_user + ",'" +
login_user + "','"
+ Fio + "','" +
Password_user + "','" +
birthday_user + "'," +
Id_moderator + ")";
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
if (request.url.split('?')[0] === "/delUsers" && request.method === "GET") {
try {
const params = request.url.split('?')[1].split('&')
const table_name = +params[0].split('=')[1];
let query = "DELETE FROM Users WHERE id_user =" + table_name;
client.query(query);
94
482.ЧДТУ.02099-003 12-01
response.writeHead(200, { "Content-Type": "application/json" });
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
// Отримання коментарів для блогу
const url = require('url');
if (request.url.startsWith("/comment") && request.method === "GET") {
const parsedUrl = url.parse(request.url, true);
const { id_blog } = parsedUrl.query;
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Comment
WHERE id_blog = $1
`;
let values = [id_blog];
let mas = [];
client.query(query, values, (err, res) => {
if (err) {
console.error(err);
response.statusCode = 500;
response.end(JSON.stringify({ error: 'Failed to fetch comments' }));
} else {
let row;
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
}
});
}
if (request.url.startsWith("/userinfo") && request.method === "GET") {
const parsedUrl = url.parse(request.url, true);
const { id_user } = parsedUrl.query;
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Users
95
482.ЧДТУ.02099-003 12-01
WHERE id_user = $1
`;
let values = [id_user];
let mas = [];
client.query(query, values, (err, res) => {
if (err) {
console.error(err);
response.statusCode = 500;
response.end(JSON.stringify({ error: 'Failed to fetch' }));
} else {
let row;
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
}
});
}
/////////////////////
if (request.url.startsWith("/comment") && request.method === "GET") {
const parsedUrl = url.parse(request.url, true);
const { id_blog } = parsedUrl.query;
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Comment
WHERE id_blog = $1
`;
let values = [id_blog];
let mas = [];
client.query(query, values, (err, res) => {
if (err) {
console.error(err);
response.statusCode = 500;
response.end(JSON.stringify({ error: 'Failed to fetch comments' }));
} else {
let row;
for (row of res.rows) {
mas.push(row);
}
96
482.ЧДТУ.02099-003 12-01
response.end(JSON.stringify(mas));
}
});
}
if (request.url.startsWith("/TextBlog") && request.method === "GET") {
const parsedUrl = url.parse(request.url, true);
const { id_blog } = parsedUrl.query;
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM TextBlog
WHERE id_blog = $1
`;
let values = [id_blog];
let mas = [];
client.query(query, values, (err, res) => {
if (err) {
console.error(err);
response.statusCode = 500;
response.end(JSON.stringify({ error: 'Failed to fetch comments' }));
} else {
let row;
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
}
});
}
if (request.url.split('?')[0] === "/addComment" && request.method === "GET") {
try {
const params = request.url.split('?')[1].split('&')
const id_comment = +params[0].split('=')[1];
const comment_text = +params[1].split('=')[1];
const id_user = +params[2].split('=')[1];
const id_blog = +params[3].split('=')[1];
const comment_date = +params[4].split('=')[1];
const comment_time = +params[5].split('=')[1];
97
482.ЧДТУ.02099-003 12-01
let query = "INSERT INTO Comment (id_comment , comment_text, id_user,
id_blog, comment_date, comment_time) VALUES (" + id_comment + ",'" +
comment_text + "'," + id_user + "," + id_blog + ",'" + comment_date + "','" +
comment_time + "','" + ")";
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
if (request.url.split('?')[0] === "/delComment" && request.method === "GET") {
try {
const params = request.url.split('?')[1].split('&')
const table_name = +params[0].split('=')[1];
let query = "DELETE FROM Comment WHERE id_comment =" + table_name;
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
// TextBlog
else if (request.url === "/Text1Blog" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM TextBlog
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
98
482.ЧДТУ.02099-003 12-01
response.end();
});
}
// Moderator
else if (request.url === "/Moderator" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Moderator
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
response.end();
});
}
// blog_view
else if (request.url === "/blog_view" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM blog_view
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
99
482.ЧДТУ.02099-003 12-01
mas.push(row);
}
response.end(JSON.stringify(mas));
response.end();
});
}
// Users_view
else if (request.url === "/Users_view" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Users_view
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
response.end();
});
}
// comment_view
else if (request.url === "/comment_view" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM comment_view
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
100
482.ЧДТУ.02099-003 12-01
mas.push(row);
}
response.end(JSON.stringify(mas));
response.end();
});
}
if (request.url === "/GetUsers" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT id_user, login_user, Password_user, Id_moderator FROM Users
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
});
}
if (request.url.split('?')[0] === "/GetProfile" && request.method === "GET") {
try {
const params = request.url.split('?')[1].split('&');
const login_user = +params[0].split('=')[1];
let query = "SELECT id_user, login_user, Password_user, Id_moderator FROM
Users WHERE login_user = $1";
let mas = [];
client.query(query, [login_user], (err, res) => {
if (err) {
console.error(err);
return;
}
let row;
for (row of res.rows) {
mas.push(row);
101
482.ЧДТУ.02099-003 12-01
}
response.end(JSON.stringify(mas));
});
} catch (error) {
console.error(error);
}
}
if (request.url.split('?')[0] === "/GetAvtorize" && request.method === "GET")
{
try {
const params = request.url.split('?')[1].split('&')
const id_user = +params[0].split('=')[1];
const Id_moderator = +params[1].split('=')[1];
let query = "INSERT INTO Users (id_user,Id_moderator ) VALUES (" + id_user
+ "," + Id_moderator + ")";
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
// передача логина
let usermas = [];
let loginn;
if (request.url.startsWith("/userprofile") && request.method === "GET") {
const parsedUrl = url.parse(request.url, true);
const { login_user } = parsedUrl.query;
loginn = parsedUrl.query;
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Users
WHERE login_user = $1
`;
let values = [login_user];
102
482.ЧДТУ.02099-003 12-01
// Використання обіцянок для асинхронного запиту
const queryPromise = new Promise((resolve, reject) => {
client.query(query, values, (err, res) => {
if (err) {
console.error(err);
reject(err);
} else {
resolve(res.rows);
}
});
});
queryPromise
.then((rows) => {
usermas = rows;
response.end(JSON.stringify(usermas));
})
.catch((err) => {
console.error(err);
response.statusCode = 500;
response.end(JSON.stringify({ error: 'Failed to fetch' }));
});
}
if (request.url.split('?')[0] === "/userinfo" && request.method === "GET") {
try {
response.end(JSON.stringify(usermas));
console.log('1111= '+loginn);
} catch (error) {
console.error(error);
}
}
// server
}).listen(8081);
console.log('Server running at http://127.0.0.1:8081/');
103
ДОДАТОК Г
Презентація
482.ЧДТУ.02099-003 90-01
Листів 10
Розробник ________________ Бойко Д.Ю.
Черкаси 2023
104
482.ЧДТУ.02099-003 90-01
Презентація до проекту представлена на рисунках 1-17.
Рисунок 1 – Слайд презентації №1
Рисунок 2 – Слайд презентації №2
105
482.ЧДТУ.02099-003 90-01
Рисунок 3 – Слайд презентації №3
Рисунок 4 – Слайд презентації №4
106
482.ЧДТУ.02099-003 9001
Рисунок 5 – Слайд презентації №5
Рисунок 6 – Слайд презентації №6
107
482.ЧДТУ.02099-003 90 01
Рисунок 7 – Слайд презентації №7
Рисунок 8 – Слайд презентації №8
108
482.ЧДТУ.02099-003 90-01
Рисунок 9 – Слайд презентації №9
Рисунок 10 – Слайд презентації №10
109
482.ЧДТУ.02099-003 90-01
Рисунок 11 – Слайд презентації №11
Рисунок 12 – Слайд презентації №12
110
482.ЧДТУ.02099-003 90-01
Рисунок 13 – Слайд презентації №13
Рисунок 14 – Слайд презентації №14
111
482.ЧДТУ.02099-003 90 01
Рисунок 15 – Слайд презентації №15
Рисунок 16 – Слайд презентації №16
112
482.ЧДТУ.02099-003 90-01
Рисунок 17 – Слайд презентації №17
Рисунок 18 – Слайд презентації №18
113