Тема, Мета, Місце розташування

Тема: Адаптивний веб-застосунок ресторану швидкого харчування MacShnaknels

Мета: Метою лабораторної роботи №2 є розроблення backend-частини вебзастосунку MacShnaknels із підключенням до бази даних MySQL, створенням таблиць users та posts, виконанням базових SQL-запитів SELECT, INSERT, UPDATE, DELETE, використанням пакета mysql2, ORM Sequelize, створенням моделей User і Post, а також реалізацією зв’язку One-to-Many між користувачами та постами.

Місце розташування:

GitHub: встав посилання
Live demo: (встав посилання)

Опис предметного середовища

Предметним середовищем є вебзастосунок ресторану швидкого харчування MacShnaknels. Система призначена для перегляду меню, ознайомлення з акціями, реєстрації та авторизації користувачів, а також адміністрування даних сайту. Користувач може створити акаунт, увійти в систему та переглядати доступний функціонал. Адміністратор має розширені права: перегляд користувачів, зміна ролей, видалення користувачів, створення, редагування та видалення постів або акцій.

Для збереження даних використовується база даних MySQL. У ній зберігаються користувачі системи та публікації, які можуть відображати новини, акції або інформаційні повідомлення ресторану.

Структура веб-застосунку

Вебзастосунок MacShnaknels складається з frontend- та backend-частини.

Frontend-частина містить HTML-сторінки, стилі CSS та JavaScript-скрипти. Вона відповідає за відображення інтерфейсу сайту, роботу меню, кошика, сторінок реєстрації, входу та адмін-панелі.

Backend-частина реалізована на Node.js з використанням Express. Вона відповідає за обробку запитів від frontend, взаємодію з базою даних MySQL, реєстрацію користувачів, авторизацію, роботу з ролями та виконання CRUD-операцій.

Структура проєкту має такий вигляд:

macshnaknels/
│
├── assets/
│   └── images/
│
├── css/
│   ├── style.css
│   ├── auth.css
│   └── admin.css
│
├── js/
│   ├── script.js
│   ├── register.js
│   ├── login.js
│   └── admin.js
│
├── backend/
│   ├── src/
│   │   ├── config/
│   │   │   ├── mysql2.js
│   │   │   └── sequelize.js
│   │   ├── models/
│   │   │   ├── User.js
│   │   │   ├── Post.js
│   │   │   └── index.js
│   │   └── server.js
│   ├── .env
│   ├── package.json
│   └── package-lock.json
│
├── index.html
├── register.html
├── login.html
├── admin.html
└── README.md

Сценарій взаємодії (бізнес-логіка)

Користувач відкриває головну сторінку сайту MacShnaknels, переглядає меню, акції та інформацію про заклад. Якщо користувач хоче отримати доступ до персонального функціоналу, він переходить на сторінку реєстрації, вводить ім’я, email та пароль. Після цього дані передаються на backend, пароль хешується, а новий користувач зберігається у таблиці users.

Після реєстрації користувач може увійти в акаунт через сторінку входу. Backend перевіряє email і пароль, після чого повертає дані користувача. На сайті відображається інформація про те, під яким акаунтом виконано вхід. Якщо користувач має роль admin, йому стає доступною адмін-панель.

Адміністратор у системі може переглядати список користувачів, змінювати їхні ролі, видаляти користувачів, а також створювати, редагувати й видаляти пости або акції. Пости пов’язані з користувачами через поле user_id, тобто один користувач може створити багато постів.

Вимоги

Функціональні вимоги:

Система повинна забезпечувати реєстрацію користувача, авторизацію користувача, збереження користувачів у базі даних, хешування паролів, відображення поточного акаунта після входу, приховування кнопок «Реєстрація» та «Вхід» після авторизації, вихід з акаунта, розмежування ролей user та admin, доступ адміністратора до адмін-панелі, перегляд користувачів, зміну ролей користувачів, видалення користувачів, створення постів, редагування постів, видалення постів, а також отримання користувачів разом із пов’язаними постами через зв’язок One-to-Many.

Нефункціональні вимоги:

Система повинна мати адаптивний інтерфейс, коректно працювати у браузері через Live Server, забезпечувати підключення до локальної бази даних MySQL через XAMPP, мати логічну файлову структуру, використовувати безпечне збереження паролів через хешування, підтримувати зрозумілий поділ frontend- і backend-частини, а також забезпечувати можливість тестування API-запитів через браузер, Postman або Thunder Client.

Стек технологій

HTML5 — структура сторінок вебзастосунку; CSS3 — стилізація інтерфейсу, адаптивність, оформлення форм та адмін-панелі; JavaScript — логіка frontend, робота з формами, localStorage, запити до backend; Node.js — серверне середовище виконання JavaScript; Express.js — створення backend API; MySQL — база даних для збереження користувачів і постів; XAMPP — локальний сервер для запуску MySQL і phpMyAdmin; phpMyAdmin — інструмент для перегляду та керування базою даних; mysql2 — пакет для прямого підключення Node.js до MySQL; Sequelize — ORM для роботи з таблицями через моделі; bcryptjs — хешування паролів користувачів; jsonwebtoken — створення токенів авторизації; VS Code — середовище розробки; Live Server — локальний запуск frontend-частини.

Діаграми

UML Use-case діаграма

Скрін 1

ER-діаграма бази даних

Скрін 1

Структура БД

Для вебзастосунку створено базу даних:

macshnaknels_db

У базі даних створено дві основні таблиці: users та posts.

Таблиця users призначена для збереження інформації про користувачів системи. Вона містить такі поля:

id — унікальний ідентифікатор користувача;
name — ім’я користувача;
email — електронна пошта користувача;
password — хешований пароль;
role — роль користувача в системі: user або admin.

Таблиця posts призначена для збереження постів, новин або акцій, які створює адміністратор. Вона містить такі поля:

id — унікальний ідентифікатор поста;
title — назва поста або акції;
content — текстовий опис поста;
user_id — зовнішній ключ, який посилається на користувача-автора.

Між таблицями реалізовано зв’язок One-to-Many. Це означає, що один користувач може створити багато постів, але кожен пост належить лише одному користувачу.

SQL-структура таблиць:

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(150) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    role VARCHAR(50) DEFAULT 'user'
);

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(150) NOT NULL,
    content TEXT NOT NULL,
    user_id INT NOT NULL,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

Скріншоти

Скрін 1 Скрін 2

Виконання завдання

У межах лабораторної роботи було реалізовано backend-частину вебзастосунку MacShnaknels з підключенням до бази даних MySQL.

SQL-запити

Для роботи з базою даних були виконані основні SQL-запити:

SELECT — отримання списку користувачів і постів з бази даних;
INSERT — додавання нових користувачів і постів;
UPDATE — оновлення даних користувача, зокрема зміна ролі;
DELETE — видалення користувачів або постів.

Підключення Node.js до MySQL

Для підключення backend-частини до MySQL використано пакет mysql2. Через нього реалізовано пряме виконання SQL-запитів з Node.js.

Основні API-маршрути для роботи через mysql2:

GET    /api/raw/users
POST   /api/raw/users
PUT    /api/raw/users/:id
DELETE /api/raw/users/:id

Використання Sequelize

У проєкті також використано ORM Sequelize, що дозволяє працювати з таблицями бази даних через моделі, а не лише через прямі SQL-запити.

Було створено дві моделі:

User — модель користувача, яка відповідає таблиці users;
Post — модель поста або акції, яка відповідає таблиці posts.
Зв’язок One-to-Many

Між моделями User та Post реалізовано зв’язок One-to-Many. Це означає, що один користувач може створювати багато постів, але кожен пост належить лише одному користувачу.

SELECT

SELECT id, name, email, role FROM users;

INSERT

INSERT INTO users (name, email, password, role)
VALUES ('Report User', 'reportuser@gmail.com', '123456', 'user');

Скрін 2

UPDATE

UPDATE users
SET name = 'Updated Report User', role = 'admin'
WHERE email = 'reportuser@gmail.com';

Скрін 2

DELETE

DELETE FROM users
WHERE email = 'reportuser@gmail.com';

Висновки

У межах лабораторної роботи №2 було розроблено backend-частину вебзастосунку MacShnaknels та реалізовано її взаємодію з базою даних MySQL. Було створено базу даних macshnaknels_db, таблиці users і posts, а також виконано основні SQL-запити SELECT, INSERT, UPDATE та DELETE.

Для підключення Node.js до MySQL використано пакет mysql2, що дозволило виконувати SQL-запити безпосередньо з backend-частини. Також у проєкті використано ORM Sequelize, за допомогою якої створено моделі User і Post. Між цими моделями реалізовано зв’язок One-to-Many, оскільки один користувач може створювати багато постів або акцій.

Додатково було реалізовано реєстрацію, авторизацію, ролі користувачів, відображення поточного акаунта на сайті та адміністративну панель. У результаті вебзастосунок отримав повноцінну взаємодію між frontend, backend і базою даних, що відповідає вимогам лабораторної роботи.

ЗВІТИ З ЛАБОРАТОРНИХ РОБІТ

Тема, Мета, Місце розташування

Опис предметного середовища

Структура веб-застосунку

Сценарій взаємодії (бізнес-логіка)

Вимоги

Функціональні вимоги:

Нефункціональні вимоги:

Стек технологій

Діаграми

UML Use-case діаграма

ER-діаграма бази даних

Структура БД

Скріншоти

Виконання завдання

SQL-запити

Підключення Node.js до MySQL

SELECT

INSERT

UPDATE

DELETE

Висновки