Mavzu bo'yicha loyiha: frontend

// Loyiha ixtiyoriy va uni bajarish shart emas.

Vazifa: CRUD backend uchun UI yaratish kerak, HTML, CSS, JS, jQuery ishlatib. Online o'yin uchun akkauntlarni boshqarish admin-panelini qilamiz.

1. Repositorydan fork qilish: https://github.com/vasylmalik/project-front.git
2. Loyihaning o'z versiyangizni kompyuteringizga yuklab olish.
3. O'zingizga Tomcat yuklab oling: https://tomcat.apache.org/download-90.cgi. Muhim: Tomcat aynan 9-versiyasi bo'lishi kerak, 10 emas.
4. IIdea orqali dasturni ishga tushirishni sozlash: Alt + Shift + F9 -> Edit Configurations… -> Alt + insert -> tom (qidiruv maydonida) -> Local.
• Bundan keyin CONFIGURE tugmasini bosish va Tomcat arxivi qayerga yuklanib va ochilganligini ko'rsatish kerak.
• Deployment ichida: Alt + insert -> Artifact… -> rpg:war exploded -> OK.
• Application context maydoni: faqat / (slash) qoldiring.
• APPLY tugmasini bosing.
• Sozlamalar oynasini yoping.
5. Dasturni ishga tushiring. Buning uchun: Alt + Shift + F9 -> (konfiguratsiya nomi, men 'App' deb atadim) -> Run.
6. Dastur deploy qilingandan so'ng, konfiguratsiyada tanlangan brauzerda yangi o'tish oynasi ochiladi. Ajoyib, server sozlandi, endi ikkita fayl bilan ishlash kerak:
• <project_dir>/src/main/webapp/html/my.html – bu yerda tahrirlash va skriptlar bo'ladi.
• <project_dir>/src/main/webapp/css/my.css – bu yerda uslublar bo'ladi. Barcha uslublar bo'yicha qaror qabul qilish o'zingizga bog'liq, ularga hech qanday talab yo'q.
7. Markup (ya'ni, my.html) ichiga jadval qo'shing (unga id ko'rsatishni unutmang), unda ustunlarning nomlari bo'lishi kerak:
• #
• Name
• Title
• Race
• Profession
• Level
• Birthday
• Banned
8. Juft <script> tegini qo'shing – bu yerda funksiyalar yoziladi.
9. Birinchi funksiya "/rest/players" URL'ga GET so'rov yuborishi kerak – ro'yxatni olish uchun. Natijani jadvalga qo'shish kerak, 7-bosqichdan (ya'ni, jadvalning id'isi kerak edi). Agar hammasini to'g'ri qilsangiz – serverni qayta ishga tushirgandan so'ng sahifangizda 4 qatorli jadval paydo bo'ladi. Birinchi qator ustun nomlari, qolganlar serverdan kelgan ma'lumotlar.
10. Endi, jadval hujayralarining chegaralarini qo'shmoq juda foydali bo'lardi, aks holda ma'lumotlar umuman o'qilmaydi.
11. Endi biz paging bilan shug'ullanamiz. Buning uchun kerak:
• Jadval ostiga, masalan, <div> yo'nalishida paging tugmalari bo'lgan bo'lim qo'shing.
• Serverga umumiy akkauntlar sonini qaytaruvchi GET so'rov yuboradigan funksiya qo'shing. URL: "/rest/players/count".
• Har safar nechta akkaunt ko'rsatish uchun 3-4 raqamli qiymatlar tushadigan ro'yxat qo`shing. Raqamlar diapazoni 3 dan 20 gacha bo'lishi kerak.
• Akkauntlar ro'yxatini ko'rsatish metodiga (9-bosqich) qaysi sahifani ko'rsatishni hisoblab chiqish uchun sahifalar sonini qo'shishni qo'shing.
12. Akkauntlar ro'yxatini ko'rsatish funksiyasiga ko'rsatilishi kerak bo'lgan sahifa raqami javobgar bo'lgan parametr qo'shing. URL ni sozlang, shunda so'rovning parametrlarini jo'natadi "pageNumber" va "pageSize". Endi tushadigan ro'yxatda sahifa sonini almashtirganingizda, so'ralgan akkauntlar soni ko'rsatilishi kerak:
13. Endi keling, amaldagi sahifa raqamini bo'yashni qo'shamiz, aks holda noqulay…
14. Jadvalga yana 2 ustun qo'shamiz: Edit va Delete. Har bir satr uchun tahrir qilish va har bir yozuvni o'chirish uchun mas'ul bo'lgan ikonalarni qo'shishni boshlaylik. Siz <project_dir>/src/main/webapp/img/ ichidagi rasmlarni yoki o'zingizning rasmlaringizni ishlatishingiz mumkin.
15. Akkauntni o'chirish uchun javobgar bo'lgan funksiyani yozing. Buning uchun "/rest/players/{id}" URL manzilga DELETE so'rov yuborish kerak. Chiqindilar savatchasi rasmini bosganda – bu funksiya chaqiriladi. Chaqirilgandan so'ng – joriy sahifadagi akkauntlar ro'yxatini yangilashni unutmang.
• id=23 bo'lgan akkaunt o'chirilganidan oldin
• id=23 bo'lgan akkaunt o'chirilganidan keyin. E'tibor bering, savat tasviridan boshqa tugmalar bosilmagan.
16. Endi akkauntni tahrirlash uchun javob beradigan funksiyani yozing. Unga borganingizda “Delete” tugmasini yashiramiz va “Edit” tugmasi tasvirini “Save” ga almashtiramiz.
17. Endi akkauntni tahrirlash funksionalini qo'shamiz. "Edit" tugmasini bosganda, tasvirni almashtirishdan tashqari, maydonlarni tahrirlash mumkin boʻlishi kerak:
• Name
• Title
• Race
• Profession
• Banned

E'tibor bering, tahrir qilish uchun maydonlardagi qiymatlar akkauntda mavjud bo'lganlarga mos kelishi kerak.

18. Endi "Save" tugmasini bosganda o'zgarishlarni jo'natishni qo'shamiz. Buning uchun “/rest/players/{id}” URL manzilga POST so'rov yuborish kerak va so'rovning tanasi sifatida tahrirlanishi mumkin bo'lgan barcha besh maydonning qiymatlarini JSON ko'rinishida yuborish kerak. JSON.stringify({ … }); foydalangan holda. O'zgartirishdan so'ng, joriy sahifadagi ma'lumotlarni yangilashni unutmang.
19. Shunday qilib, CRUD dan hozirgacha “C” (Create) dan boshqa hamma narsa bajarilishi kerak. Paging tugmalaridan so'ng, gorizontal chiziq va yangi akkaunt yaratish mumkinligi haqida matn qo'shing. Bundan tashqari, akkauntning parametrlari uchun matn bloklari va kiritish maydonlarini qo'shing:
• Name – matn, 1 dan 12 gacha belgilar.
• Title – matn, 1 dan 30 gacha belgilar.
• Race – tushadigan ro'yxat, API'da ko'rsatilgan ruxsat etilgan qiymatlar.
• Profession – tushadigan ro'yxat, API'da ko'rsatilgan ruxsat etilgan qiymatlar.
• Level – 0 dan 100 gacha son.
• Birthday – sana (<input type="date" …).
• Banned – boolean qiymat.
20. Endi bir tugma qo'shing, bunda barcha kiritilgan ma'lumotlar serverga yuboriladi. /rest/players URL manzilga POST so'rovni foydalaning. Serverdan javob olgandan so'ng, kiritiladigan ma'lumotlar maydonlarini tozalash va joriy sahifadagi akkauntlar ro'yxatini qayta so'rashni unutmang.
21. Endi uslublar orqali "go'zallik" qo'shishingiz mumkin – bu yerda hammasi sizning qaroringiz bilan. Menda shunday chiqdi:

Foydali: Server API:

O'yinchilar ro'yxatini olish

Kod: 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
}

Kod: 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]
}

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

Loyihani tahlil qilish. Bajarishdan keyin ko'ring!