Proyek sing gegandhengan: frontend

Tugas: Sampeyan kudu nggawe UI kanggo backend CRUD nggunakake HTML, CSS, JS, jQuery. Kita bakal nggawe panel admin kanggo ngatur akun game online.

1. Garpu saka gudang: https://github.com/CodeGymCC/project-frontend.git
2. Download versi proyek menyang komputer.
3. Download Tomcat kanggo dhewe: https://tomcat.apache.org/download-90.cgi .penting: Tomcat mbutuhake versi 9 , dudu 10.
4. Konfigurasi peluncuran aplikasi liwat Idea: Alt + Shift + F9 -> Sunting Konfigurasi… -> Alt + insert -> tom (ing bar telusuran) -> Lokal.
• Sawise iku, sampeyan kudu ngeklik CONFIGURElan nunjukake ing ngendi arsip karo Tomcat diundhuh lan dibongkar.
• Ing tab Deployment: Alt + insert -> Artifact… -> rpg:war exploded -> OK.
• Ing sawah Application context: mung mangkat / (miring maju).
• Pencet APPLY.
• Nutup jendhela setelan.
5. Bukak aplikasi kasebut. Kanggo nindakake iki: Alt + Shift + F9 -> (jeneng konfigurasi, aku jenenge 'App') -> Run.
6. Sawise masang aplikasi, tab anyar bakal mbukak ing browser sing dipilih sajrone konfigurasi. Apik, server wis dikonfigurasi, mula sampeyan kudu nggarap rong file:
• <project_dir>/src/main/webapp/html/my.html- bakal ana markup lan skrip.
• <project_dir>/src/main/webapp/css/my.css– kene bakal gaya. Kabeh babagan gaya terserah sampeyan, ora ana syarat kanggo dheweke.
7. Ing markup ( my.html ) tambahake tabel (aja lali menehi id) kanggo nemtokake jeneng kolom:
• #
• jeneng
• judhul
• balapan
• profesi
• tingkat
• ulang tahun
• dilarang
8. Tambah tag pasangan <script>- kita bakal nulis fungsi ing kene.
9. Fungsi pisanan ngirim panjalukan GET menyang URL "/rest/players"- entuk dhaptar. Asil kudu ditambahake menyang tabel saka paragraf 7 (ing kene id tabel bisa digunakake). Yen sampeyan nindakake kabeh kanthi bener, sawise miwiti maneh server, tabel kanthi 4 baris bakal ditampilake ing kaca sampeyan. Ing baris pisanan - jeneng kolom, ing liyane - data sing teka saka server.
10. Saiki, luwih becik nambah wates sel menyang meja, yen ora, informasi kasebut umume ora bisa diwaca.
11. Saiki ayo pindhah menyang paging. Kanggo iki sampeyan kudu:
• Ing ngisor meja, tambahake bagean, contone, <div>sing bakal ana tombol paging.
• Tambah fungsi sing bakal ngirim panjalukan GET menyang server sing ngasilake total akun ing server. URL: "/rest/players/count".
• Tambah dhaptar gulung-mudhun kanggo 3-4 nilai numerik, carane akeh akun kanggo nuduhake ing wektu. Nomer kudu antarane 3 lan 20 klebu.
• Ing cara kanggo nampilake dhaptar akun (p. 9), kita bakal nambah pitungan jumlah kaca sing dibutuhake kanggo sawetara akun saben kaca, supaya sampeyan bisa ndeleng kabeh akun.
12. Ing fungsi nuduhake dhaptar akun, nambah parameter sing bakal tanggung jawab kanggo nomer kaca bakal ditampilake. Mbenerake URL supaya ngliwati "pageNumber" lan "pageSize" minangka parameter pitakon . Saiki, nalika ngganti nomer saben kaca ing dhaptar gulung mudhun, nomer akun sing dijaluk kudu ditampilake:
13. Saiki ayo warnai nomer kaca saiki, yen ora trep ...
14. Ayo ditambahake 2 kolom liyane ing tabel: Sunting lan Busak. Kanggo saben baris, ayo nambah lambang sing tanggung jawab kanggo nyunting lan mbusak saben entri. Sampeyan bisa nggunakake salah siji gambar sing ana ing <project_dir>/src/main/webapp/img/, utawa nggunakake dhewe.
15. Tulis fungsi sing bakal tanggung jawab kanggo mbusak akun. Kanggo nindakake iki, kirim panjalukan DELETE menyang server ing URL "/rest/players/{id}". Nalika ngeklik ing gambar cart, nelpon fungsi iki. Sawise nelpon - aja lali nganyari dhaptar akun ing kaca saiki.
• Sadurunge mbusak akun kanthi id=23
• Sawise mbusak akun kanthi id=23 . Pay manungsa waé, ora tombol, kajaba basket, padha dipencet.
16. Saiki nulis fungsi sing tanggung jawab kanggo nyunting akun. Nalika sampeyan ngeklik, ayo ndhelikake tombol "Busak", lan ngganti gambar tombol "Sunting" dadi "Simpen".
17. Saiki ayo nambah fungsi kanggo nyunting akun. Kanthi ngeklik tombol "Sunting", saliyane ngganti gambar, sampeyan kudu nggawe lapangan bisa diowahi:
• jeneng
• judhul
• balapan
• profesi
• dilarang

Elinga yen nilai ing kolom suntingan kudu sing ana ing akun kasebut.

18. Saiki kita bakal ngirim owah-owahan kanthi ngeklik tombol "Simpen". Kanggo nindakake iki, sampeyan kudu ngirim panjalukan POST menyang URL “/rest/players/{id}”lan pass nilai kabeh limang kolom minangka badan panyuwunan, sing bisa diganti ing wangun JSON. Gunakake JSON.stringify({...}); Sawise owah-owahan, aja lali muat ulang data ing kaca saiki.
19. Dadi, kabeh kudu ditindakake saka CRUD saiki, kajaba "C" (Gawe). Sawise tombol paging, tambahake garis horisontal lan teks sing nyatakake yen sampeyan bisa nggawe akun anyar ing kene. Kajaba iku, tambahake blok teks lan kolom input kanggo paramèter akun:
• Jeneng - teks, saka 1 nganti 12 karakter.
• Judhul - teks, saka 1 nganti 30 karakter.
• Lomba - dhaptar gulung mudhun, ndeleng API kanggo nilai sing bener.
• Profesi - dhaptar gulung mudhun, ndeleng API kanggo nilai sing bener.
• Level yaiku angka saka 0 nganti 100.
• Tanggal lahir - tanggal (<input type="date" ...).
• Banned minangka nilai boolean.
20. Saiki tambahake tombol, klik ing ngendi kabeh data sing dilebokake bakal dikirim menyang server. Gunakake panjalukan POST menyang URL /rest/players. Sawise respon server, aja lali mbusak kolom entri data lan njaluk maneh dhaptar akun ing kaca saiki.
21. Saiki sampeyan bisa nambah "kaendahan" liwat gaya - kabeh kene terserah sampeyan. Aku entuk kaya iki:

Migunani: Server API:

Entuk dhaptar pemain

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

Analisis proyek . Nonton sawise rampung!