Tugas: Sampeyan kudu nggawe UI kanggo backend CRUD nggunakake HTML, CSS, JS, jQuery. Kita bakal nggawe panel admin kanggo ngatur akun game online.
- Garpu saka gudang: https://github.com/CodeGymCC/project-frontend.git
- Download versi proyek menyang komputer.
- Download Tomcat kanggo dhewe: https://tomcat.apache.org/download-90.cgi .penting: Tomcat mbutuhake versi 9 , dudu 10.
- Konfigurasi peluncuran aplikasi liwat Idea: Alt + Shift + F9 -> Sunting Konfigurasi… -> Alt + insert -> tom (ing bar telusuran) -> Lokal.
- Sawise iku, sampeyan kudu ngeklik
CONFIGURE
lan 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.
- Bukak aplikasi kasebut. Kanggo nindakake iki: Alt + Shift + F9 -> (jeneng konfigurasi, aku jenenge 'App') -> Run.
- 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.- Ing markup ( my.html ) tambahake tabel (aja lali menehi id) kanggo nemtokake jeneng kolom:
- #
- jeneng
- judhul
- balapan
- profesi
- tingkat
- ulang tahun
- dilarang
- Tambah tag pasangan
<script>
- kita bakal nulis fungsi ing kene. - 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. - Saiki, luwih becik nambah wates sel menyang meja, yen ora, informasi kasebut umume ora bisa diwaca.
- 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.
- 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:
- Saiki ayo warnai nomer kaca saiki, yen ora trep ...
- 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. - 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.
- Saiki nulis fungsi sing tanggung jawab kanggo nyunting akun. Nalika sampeyan ngeklik, ayo ndhelikake tombol "Busak", lan ngganti gambar tombol "Sunting" dadi "Simpen".
- 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
- 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. - 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.
- 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. - Saiki sampeyan bisa nambah "kaendahan" liwat gaya - kabeh kene terserah sampeyan. Aku entuk kaya iki:
![](https://cdn.codegym.cc/images/article/266d093e-dbf4-427b-83ea-73cd094a00cc/800.jpeg)
![](https://cdn.codegym.cc/images/article/e433ead9-994c-46a7-aded-72b185d8c650/1024.jpeg)
![](https://cdn.codegym.cc/images/article/8a412297-fa55-4dc2-9529-008a7bf5a329/800.jpeg)
![](https://cdn.codegym.cc/images/article/1d088061-7e92-4cb4-a9ef-dae51d942fd8/512.jpeg)
![](https://cdn.codegym.cc/images/article/48950fc9-5b80-4831-a315-5b8cfb5b1e42/512.jpeg)
![](https://cdn.codegym.cc/images/article/fab909d2-403b-4637-ae20-f55310476141/512.jpeg)
![](https://cdn.codegym.cc/images/article/b625b7ba-c813-4ca8-9d4d-849c94ac54d7/512.jpeg)
![](https://cdn.codegym.cc/images/article/bcaaed65-eed3-47c3-b382-37b3aead66fe/512.jpeg)
![](https://cdn.codegym.cc/images/article/87d7b30d-1ab4-4c15-aec6-8e82c51d8210/512.jpeg)
![](https://cdn.codegym.cc/images/article/0ee7cc05-9138-4c64-a797-2986311ca594/512.jpeg)
![](https://cdn.codegym.cc/images/article/4c851ead-60f3-4555-91c1-01c3daafc13b/512.jpeg)
![](https://cdn.codegym.cc/images/article/4c851ead-60f3-4555-91c1-01c3daafc13b/512.jpeg)
Elinga yen nilai ing kolom suntingan kudu sing ana ing akun kasebut.
![](https://cdn.codegym.cc/images/article/4fdbdedb-2407-4142-a6db-f08f9d9f5db7/512.jpeg)
![](https://cdn.codegym.cc/images/article/195b5b3a-8c57-4b6f-9d7c-fa63e4b684ad/512.jpeg)
![](https://cdn.codegym.cc/images/article/e2c57991-31fe-459c-912e-f5c01df4a768/512.jpeg)
![](https://cdn.codegym.cc/images/article/140a330e-db7e-4429-8075-c6b0be87073b/512.jpeg)
![](https://cdn.codegym.cc/images/article/e9b9d89f-13e2-4702-8b40-ad377530e65f/512.jpeg)
![](https://cdn.codegym.cc/images/article/422ded28-0e9d-4e7e-b08b-99df58931081/512.jpeg)
![](https://cdn.codegym.cc/images/article/7f1caded-7ada-4332-8022-03fda6d27314/512.jpeg)
Migunani: Server API:
Entuk dhaptar pemain
URL | / ngaso / pemain |
cara | Opsional: Integer pageNumber, Integer pageSize |
Param Data | ora ana |
Tanggapan Sukses |
|
cathetan |
pageNumber - parameter sing tanggung jawab kanggo nomer kaca sing ditampilake nalika nggunakake paging. Nomer kasebut diwiwiti saka nol. pageSize - parameter sing tanggung jawab kanggo jumlah asil ing siji kaca nalika kaca
|
Entuk jumlah pemain
URL | / ngaso / pemain / count |
cara | GET |
Parama URL | ora ana |
Param Data | ora ana |
Tanggapan Sukses |
Kode : 200 Isi : Integer |
cathetan |
Mbusak pamuter
URL | /rest/players/{id} |
cara | Mbusak |
Parama URL | id |
Param Data | ora ana |
Tanggapan Sukses | Kode : 200 |
cathetan |
Yen pamuter ora ketemu, nanggepi kesalahan karo 404 kode. Yen nilai id ora bener, respon bakal dadi kesalahan karo kode 400. |
Update pamuter
URL | /rest/players/{id} |
cara | POST |
Parama URL | id |
Param Data |
|
Tanggapan Sukses |
|
cathetan |
Mung kolom sing ora null dianyari. Yen pamuter ora ditemokaké ing database, nanggepi kesalahan karo 404 kode. Yen nilai id ora bener, respon kasebut minangka kesalahan karo kode 400. |
Nggawe pamuter
URL | / ngaso / pemain |
cara | POST |
Parama URL | ora ana |
Param Data |
|
Tanggapan Sukses |
|
cathetan |
Kita ora bisa nggawe pemain yen:
Ing kasus kabeh ing ndhuwur, respon minangka kesalahan karo kode 400. |
Analisis proyek . Nonton sawise rampung!