Проєкт на тему: фронтенд

Завдання: Потрібно зробити UI для CRUD бекенду за допомогою HTML, CSS, JS, jQuery. Робитимемо адмін-панель для керування акаунтами онлайн-гри.

Проєкт не обов'язковий для виконання. Він важкий та об'ємний

1. Зробити fork із репозиторію: https://github.com/pavlo-plynko/project-frontend.git
2. Завантажити свою версію проєкту на комп'ютер.
3. Завантажити собі Tomcat: https://tomcat.apache.org/download-90.cgi.Важливо: Tomcat потрібен саме версії 9, а не 10
4. Налаштувати запуск програми через IDEA: Alt + Shift + F9 -> Edit Configurations… -> Alt + insert -> tom (у рядок пошуку) -> Local.
• Після цього потрібно натиснути CONFIGURE і вказати, куди завантажено і розпаковано архів з Tomcat.
• У вкладці Deployment: Alt + insert -> Artifact... -> rpg:war exploded -> OK.
• У полі Application context: залишити тільки /(слеш).
• Натиснути APPLY.
• Закрити вікно налаштування.
5. Запустити програму. Для цього: Alt+Shift+F9 -> (ім'я конфігурації, я назвав 'App' у себе) -> Run.
6. Після деплою програми відкриється нова вкладка в браузері, який обрано при конфігурації. Чудово, сервер налаштований, далі потрібно працювати з двома файлами:
• <project_dir>/src/main/webapp/html/my.html – тут буде розмітка та скрипти.
• <project_dir>/src/main/webapp/css/my.css – тут будуть стилі. Усе, що стосується стилів – на твій розсуд: жодних вимог до них немає.
7. У розмітку (my.html) додати таблицю (не забудь зазначити для неї id), в якій треба вказати назви колонок:
• #
• Name
• Title
• Race
• Profession
• Level
• Birthday
• Banned
8. Додати парний тег <script> – тут писатимемо функції.
9. Перша функція повинна надсилати GET запит на URL "/rest/players" – отримати список. Результат потрібно додати до таблиці з п.7 (ось і став у пригоді id таблиці). Якщо все зроблено правильно, після перезапуску сервера в тебе на сторінці відображатиметься таблиця на 4 рядки. У першому рядку – імена колонок, у решті – дані, які прийшли з сервера.
10. Тепер бажано додати таблиці межі ячейок, бо інформація нечитабельна.
11. Тепер займемося пейджингом. Для цього потрібно:
• Під таблицею додати секцію, наприклад, <div>, у якій будуть кнопки пейджингу.
• Додати функцію, що надішле GET запит на сервер, який повертає загальну кількість облікових записів на сервері. URL: "/rest/players/count".
• Додати випадний (розкривний) список на 3-4 числових значення – скільки показувати акаунтів за раз. Числа мають бути в діапазоні від 3 до 20 включно.
• У способі відображення списку облікових записів (п.9) додамо розрахунок кількості сторінок, які потрібні при вказаній кількості облікових записів на сторінку, щоб можна було переглянути всі облікові записи.
12. До функції показу списку облікових записів додай параметр, який буде відповідати за номер сторінки, яку показуватиме. Відкоригуй URL, щоб він параметрами запиту передавав "pageNumber" та "pageSize". Тепер при зміні кількості на сторінку у випадному списку повинна показуватися запитана кількість акаунтів:
13. Тепер давай розфарбуємо номер поточної сторінки, бо незручно.
14. Додамо до таблиці ще 2 колонки: Edit та Delete. Для кожного рядка давай додамо іконки, які відповідатимуть за редагування та видалення кожного запису. Можеш використовувати або картинки, які є в <project_dir>/src/main/webapp/img/, або свої.
15. Напиши функцію, яка відповідатиме за видалення облікового запису. Для цього потрібно надсилати DELETE запит на сервер на URL "/rest/players/{id}". При натисканні на картинку кошика викликай цю функцію. Після виклику – не забудь оновлювати список облікових записів на поточній сторінці.
• До видалення облікового запису з id=23
• Після видалення облікового запису з id=23. Зверни увагу: жодних кнопок, крім кошика, не натискалося.
16. Тепер напиши функцію, яка відповідає за редагування облікового запису. При натисканні на неї давай приховаємо кнопку "Delete", а картинку кнопки "Edit" поміняємо на "Save".
17. Тепер додамо функціонал для редагування облікового запису. При натисканні кнопки “Edit”, окрім зміни картинки, потрібно додавати можливість редагування полів:
• Name
• Title
• Race
• Profession
• Banned

Зверни увагу, що значення в полях для редагування мають бути такі ж, що і в обліковому записі.

18. Тепер зробимо надсилання змін при натисканні на кнопку “Save”. Для цього потрібно надіслати POST запит на URL “/rest/players/{id}” і як тіло запиту передати значення всіх п'яти полів, які можна змінювати у вигляді JSON. Використовуй JSON.stringify({…}); Після зміни, не забудь перезавантажити дані на поточній сторінці.
19. Отже, із CRUD на даний момент має бути зроблено все, окрім “C” (Create). Після кнопок пейджингу, додай горизонтальну лінію та текст про те, що тут можна створити новий обліковий запис. Також додай блоки тексту та поля для введення параметрів облікового запису:
• Name – текст, від 1 до 12 символів.
• Title – текст від 1 до 30 символів.
• Race – випадний список, допустимі значення дивися в API.
• Profession – випадний список, допустимі значення дивися в API.
• Level – число від 0 до 100.
• Birthday - дата (<input type = "date" ...).
• Banned – булеве значення.
20. Тепер додай кнопку, при натисканні на яку всі введені дані будуть надсилатися на сервер. Використовуй POST запит на URL /rest/players. Після відповіді сервера не забудь очистити поля для введення даних і знову зробити запит на список облікових записів на поточній сторінці.
21. Тепер можна додати "краси" через стилі – тут все на твій розсуд. У мене вийшло так:

Корисне: API сервера:

Get players list

Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
 …
]

public enum Race {
    HUMAN,
    DWARF,
    ELF,
    GIANT,
    ORC,
    TROLL,
    HOBBIT
}

public enum Profession {
    WARRIOR,
    ROGUE,
    SORCERER,
    CLERIC,
    PALADIN,
    NAZGUL,
    WARLOCK,
    DRUID
}

{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }

{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },

Розбір проєкту. Дивитися після виконання!:

• Частина 1
• Частина 2