Тема боюнча долбоор: фронтенд

Долбоор милдеттүү эмес, аны жасоо зарыл эмес.

Тапшырма: CRUD бэкендинин UI иштерин жасоо керек, HTML, CSS, JS, jQuery колдонуп. Онлайн оюн аккаунттарын башкаруу үчүн админ-панельди жасайбыз.

1. Репозиториядан fork жаса: https://github.com/vasylmalik/project-front.git
2. Проектинин өз версиясын компьютериңе жүктөп ал.
3. Tomcat жүктөп ал: https://tomcat.apache.org/download-90.cgi. Маанилүү: Tomcat такыр 9 версиясы болушу керек, 10 эмес.
4. Идея аркылуу колдонмону иштетүү үчүн орнотуу: 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. Ар бир сапка ар бир жазууну түзөтүү жана жок кылуу үчүн жооптуу болгон сүрөттөрдү кошуу. Own сүрөттөрдү колдонсоңуз болот же <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 суроо аркылуу /rest/players URLине жөнөтүү. Сервердеги жооп ушундан кийин, киргизүү талааларын тазалоону жана учурдагы барактагы аккаунттар тизмесин кайра суроо керек.
21. Эми стилдер аркылуу "кооздук" кошсоңуз болот – бул жерде бардыгы сиздин каалооңузга жараша. Менде ушундай болду:

Жардамчы: сервидердин API:

Оюнчулардын тизмесин алуу

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]
 },

Долбоорду талдоо. Аткаргандан кийин көрүү!