Proyek terkait: frontend

Tugas: Anda perlu membuat UI untuk backend CRUD menggunakan HTML, CSS, JS, jQuery. Kami akan membuat panel admin untuk mengelola akun game online.

1. Garpu dari repositori: https://github.com/CodeGymCC/project-frontend.git
2. Unduh versi proyek Anda ke komputer Anda.
3. Unduh Tomcat sendiri: https://tomcat.apache.org/download-90.cgi .Penting: Tomcat membutuhkan versi 9 , bukan 10.
4. Konfigurasikan peluncuran aplikasi melalui Ide: Alt + Shift + F9 -> Edit Konfigurasi… -> Alt + sisipkan -> tom (di bilah pencarian) -> Lokal.
• Setelah itu, Anda perlu mengklik CONFIGUREdan menunjukkan di mana arsip dengan Tomcat diunduh dan dibongkar.
• Di tab Deployment: Alt + insert -> Artefak… -> rpg:war meledak -> OK.
• Di lapangan Application context: tinggalkan saja / (garis miring).
• Tekan APPLY.
• Tutup jendela pengaturan.
5. Luncurkan aplikasi. Untuk melakukan ini: Alt + Shift + F9 -> (nama konfigurasi, saya beri nama 'Aplikasi') -> Jalankan.
6. Setelah menerapkan aplikasi, tab baru akan terbuka di browser yang dipilih selama konfigurasi. Hebat, server sudah dikonfigurasi, lalu Anda perlu bekerja dengan dua file:
• <project_dir>/src/main/webapp/html/my.html- akan ada markup dan skrip.
• <project_dir>/src/main/webapp/css/my.css– ini akan menjadi gaya. Segala sesuatu tentang gaya terserah Anda, tidak ada persyaratan untuk itu.
7. Di markup ( my.html ) tambahkan tabel (jangan lupa berikan id) untuk menentukan nama kolom:
• #
• Nama
• Judul
• Balapan
• profesi
• Tingkat
• Hari ulang tahun
• Dilarang
8. Tambahkan tag pasangan <script>- kami akan menulis fungsi di sini.
9. Fungsi pertama harus mengirim permintaan GET ke URL "/rest/players"- dapatkan daftarnya. Hasilnya harus ditambahkan ke tabel dari paragraf 7 (di sinilah id tabel berguna). Jika Anda melakukan semuanya dengan benar, setelah memulai ulang server, tabel dengan 4 baris akan ditampilkan di halaman Anda. Di baris pertama - nama kolom, sisanya - data yang berasal dari server.
10. Sekarang, diinginkan untuk menambahkan batas sel ke tabel, jika tidak, informasi umumnya tidak dapat dibaca.
11. Sekarang mari beralih ke paging. Untuk ini, Anda perlu:
• Di bawah tabel, tambahkan bagian, misalnya, <div>di mana akan ada tombol paging.
• Tambahkan fungsi yang akan mengirimkan permintaan GET ke server yang mengembalikan jumlah total akun di server. URL: "/rest/players/count".
• Tambahkan daftar drop-down untuk 3-4 nilai numerik, berapa banyak akun yang ditampilkan sekaligus. Angka harus antara 3 dan 20 inklusif.
• Dalam metode untuk menampilkan daftar akun (hal. 9), kami akan menambahkan perhitungan jumlah halaman yang diperlukan untuk sejumlah akun tertentu per halaman, sehingga Anda dapat melihat semua akun.
12. Dalam fungsi menampilkan daftar akun, tambahkan parameter yang akan bertanggung jawab atas jumlah halaman yang akan ditampilkan. Perbaiki URL agar meneruskan "pageNumber" dan "pageSize" sebagai parameter kueri . Sekarang, saat mengubah nomor per halaman dalam daftar drop-down, jumlah akun yang diminta harus ditampilkan:
13. Sekarang mari mewarnai nomor halaman saat ini, jika tidak maka akan merepotkan ...
14. Mari tambahkan 2 kolom lagi ke tabel: Edit dan Hapus. Untuk setiap baris, mari tambahkan ikon yang akan bertanggung jawab untuk mengedit dan menghapus setiap entri. Anda dapat menggunakan gambar yang ada di <project_dir>/src/main/webapp/img/, atau menggunakan gambar Anda sendiri.
15. Tulis fungsi yang akan bertanggung jawab untuk menghapus akun. Untuk melakukan ini, kirim permintaan DELETE ke server di URL "/rest/players/{id}". Saat mengklik gambar keranjang, panggil fungsi ini. Setelah panggilan - jangan lupa untuk memperbarui daftar akun di halaman saat ini.
• Sebelum menghapus akun dengan id=23
• Setelah menghapus akun dengan id=23 . Perhatikan, tidak ada tombol, kecuali keranjang, yang ditekan.
16. Sekarang tulis fungsi yang bertanggung jawab untuk mengedit akun. Saat Anda mengkliknya, mari sembunyikan tombol "Hapus", dan ubah gambar tombol "Edit" menjadi "Simpan".
17. Sekarang mari tambahkan fungsionalitas untuk mengedit akun. Dengan mengklik tombol "Edit", selain mengubah gambar, Anda perlu membuat bidang dapat diedit:
• Nama
• Judul
• Balapan
• profesi
• Dilarang

Harap perhatikan bahwa nilai di kolom edit harus sesuai dengan yang ada di akun.

18. Sekarang kami akan mengirimkan perubahan dengan mengklik tombol "Simpan". Untuk melakukan ini, Anda perlu mengirim permintaan POST ke URL “/rest/players/{id}”dan meneruskan nilai dari kelima bidang sebagai isi permintaan, yang dapat diubah dalam bentuk JSON. Gunakan JSON.stringify({...}); Setelah perubahan, jangan lupa memuat ulang data di halaman saat ini.
19. Jadi, semuanya harus dilakukan dari CRUD saat ini, kecuali untuk "C" (Buat). Setelah tombol paging, tambahkan garis horizontal dan teks yang menyatakan bahwa Anda dapat membuat akun baru di sini. Selain itu, tambahkan blok teks dan kolom masukan untuk parameter akun:
• Nama - teks, dari 1 hingga 12 karakter.
• Judul - teks, dari 1 hingga 30 karakter.
• Ras - daftar drop-down, lihat API untuk nilai yang valid.
• Profesi - daftar drop-down, lihat API untuk nilai yang valid.
• Level adalah angka dari 0 hingga 100.
• Ulang tahun - tanggal (<input type="date" ...).
• Dilarang adalah nilai boolean.
20. Sekarang tambahkan tombol, klik di mana semua data yang dimasukkan akan dikirim ke server. Gunakan permintaan POST ke URL /rest/players. Setelah respons server, jangan lupa untuk mengosongkan bidang entri data dan meminta ulang daftar akun di halaman saat ini.
21. Sekarang Anda dapat menambahkan "keindahan" melalui gaya - semuanya terserah Anda. Saya mendapatkannya seperti ini:

Berguna: Server API:

Dapatkan daftar 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 . Tonton setelah selesai!