Kisi-Kisi Desain Laman

Diterjemahkan dari bahasa Inggris ke bahasa Indonesia - www.onlinedoctranslator.
com
Kisi-kisi LKS Nasional Tahun 2023 Bidang LombokTeknologi Web
UJI KECEPATAN MODUL
Isi
1. MODULE_SPEEDTEST.docx
2. MODULE_SPEEDTEST_MEDIA.zip
A1. Halaman arahan

Buat halaman arahan yang terdiri dari bilah navigasi, logo, menu dengan dropdown, bagian
pahlawan dengan teks judul, dan ajakan bertindak (CTA).
B1. Tata Letak Batu

Dalam wadah terpusat berukuran 960px, Anda perlu membuat tata letak 3 kolom seperti yang ditunjukkan pada
gambar di bawah.
Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

C1. Bagan Garis
Buatlah diagram garis dari data yang disediakan dalam file media. Kanvas harus
berukuran 600x400 dan berada di tengah browser secara vertikal dan horizontal.
Label vertikal, label horizontal, dan garis harus ada di dalam layar.

C2. Bandingkan Gambar

Mengingat gambar di file media, Anda perlu menggambar gambar normal dan gambar
versi skala abu-abu. Pengguna harus menyeret lingkaran di tengah ke kiri dan kanan
untuk melihat perbedaan gambar. Silakan lihat contoh video yang diberikan dalam file
media.
C3. Cakupan
Anda perlu membuat teks berukuran layar penuh yang tersembunyi, dan kotak berukuran 400x400 di atasnya.
Pengguna tidak dapat melihat teksnya, tetapi mereka dapat melihatnya melalui kotak. Kotak tersebut dapat
dipindahkan oleh pengguna dengan cara menyeretnya. Lihat example.mp4 untuk lebih jelasnya.

D1. Penginternasionalan
Disediakan file json bahasa, Anda perlu menerjemahkan kata-kata yang ada di file HTML
tersebut menggunakan PHP. Ada formulir pilihan di mana pengguna dapat mengubah
bahasa situs web.
D2. Analisis Obrolan
Dengan menyediakan file JSON dari pesan pengguna, Anda perlu membuat analisis dari
pesan yang dikirim yang terdiri dari:
- 5 kata terkirim teratas
- Total pesan terkirim
- Total pesan yang diterima
- Rata-rata panjang karakter yang dikirim
- Rata-rata panjang karakter yang diterima
Contoh:
D3. Tanda air

Dengan adanya gambar dan logo (file png), web akan menampilkan gambar
dengan tanda air di kanan atas.

MODUL CMS
ISI
Modul ini memiliki file-file berikut:
1. MODULE_CMS.doc
2. MODULE_CMS_MEDIA.zip
Perkenalan
Pada tahun 2022, sebagian besar masyarakat akan lebih memilih menonton film secara online
dibandingkan pergi ke bioskop. Streaming film online memberikan banyak manfaat bagi pengguna dan
layanan streaming. Ini murah dan dapat diakses lintas platform tanpa harus khawatir tentang harga
berlangganan.
Anda adalah seorang pekerja lepas yang bekerja di bidang Teknologi Web dan Anda telah diminta untuk
mengembangkan situs web baru untuk situs web streaming anime yang disebut “Animer”. Klien Anda
telah mendengar bahwa Anda pandai membangun sistem manajemen konten. Mereka menginginkan
tema yang disebut “AnimerV1”
Deskripsi proyek dan tugas

Tujuan dari website ini adalah untuk menghadirkan situs streaming anime. Ini juga memberikan daftar
anime paling populer. Dan tujuan dari website ini adalah untuk memberikan layanan streaming kepada
pengunjungnya dan memberikan daftar artikel yang dapat menarik bagi semua penggemar anime.
Target audiens halaman ini adalah orang-orang yang menyukai anime. Jangkauannya bisa sangat luas,
oleh karena itu Anda akan menentukan interpretasi Anda terhadap target audiens (berdasarkan “orang
yang menyukai anime”) dan mendokumentasikan definisi ini dalam kiriman Anda. Pastikan juga Anda
memiliki judul judul dan slogan tagline yang ditentukan dalam sistem manajemen konten.
Sistem Manajemen Konten

Untuk tugas administrasi, kita memerlukan dua profil pengguna, Admin dan Editor:
● Pengguna Admin - akses ke dashboard utama WordPress lengkap. Hai

Nama belakang:admin
Hai Kata sandi:admin.

● Pengguna Pelanggan – akses sebagai peran pelanggan di CMS. Hai
Nama belakang:pelanggan
Hai Kata sandi:pelanggan pertama Anda!

Kami ingin halaman login CMS diberi label putih. Artinya halaman login tidak boleh
menampilkan logo default CMS. Gambar anime.

Juga halaman login tidak boleh menyertakan “wp” Kata-kata untuk latar belakang putih harus
berupa label layar penuh dan alasan keamanan. Silakan buat URL admin backend sebagai berikut:
<tuan rumah>/admeen/
Menu
Menu ini akan muncul di setiap halaman. Klien ingin dapat mengubah menu secara
dinamis melalui halaman admin.
● Rumah
● Daftar Anime
● Genre (daftar genre dropdown)
● Musim (daftar musim dropdown)
● Artikel
Konfigurasi Dasbor
Untuk mempermudah, klien hanya ingin menampilkan beberapa widget di halaman dashboard.
Terdiri dari Sekilas, Aktivitas, Draf Cepat.
Mengelola anime
Klien ingin dapat membuat, mengedit, memperbarui, menghapus rekaman anime. Kolom
yang harus ditampilkan di setiap anime adalah: judul, sinopsis, tanggal rilis, rating, dan
jumlah episode.
Genre Anime
- Tindakan
- Komedi
- Olahraga
- Percintaan
Musim Anime
- Musim Dingin 2022
- Musim panas 2022
- Musim semi 2022
- Musim gugur 2022
- Musim Dingin 2023
Pengguna dapat memilihberbagai genre dan musimdalam sebuah anime.
Tingkat aksesibilitas URL

Situs web seharusnya memenuhi struktur URL ini.
● Semua artikel: <host>/articles

● Detail artikel: <host>/artikel/<slug>

● Semua anime: <host>/anime-list
● Detail anime: <host>/anime/<anime slug>
● Detail episode dari anime: <host>/anime/<anime slug>/<episode slug>
Fungsionalitas Anime
Di halaman semua anime, pengguna dapat memilih untuk mengurutkan anime berdasarkan jumlah penayangan atau judul anime, atau
tanggal rilis. Pengguna juga dapat memilih untuk memfilter berdasarkan musim atau genre.
Halaman detail anime akan ditampilkanjudul, sinopsis, tanggal rilis, rating rata-rata,
jumlah episode,link ke setiap episode, dan kumpulan foto (galeri) anime terkini.
Admin atau editor dapat menampilkan galeri melalui shortcode [galeri anime
identitas=GALERI_ID]. Jumlah penayangan akan bertambah setiap kunjungan halaman pada detail anime
halaman.
Pengguna dapat memberikan ratingnya sendiri berdasarkanmengklik salah satu dari lima bintang. Anda perlu membuat
fungsi pemeringkatan.
Fungsi Episode
Disetiap episode anime pasti ada masukan link video youtubenya yang harus admin isi.
Di halaman episode, tautannya harus diubah menjadi video tersemat yang dapat diputar
pengguna. Tautan kekembalike halaman detail anime harusnya ada.
Tata letak dan mockup halaman beranda

Tata letaknya harus responsif di berbagai layar termasuk seluler dan desktop.
Halaman beranda harus terdiri dari tiga bagian.
● Bagian Pahlawan. Menampilkan gambar besar sebuah anime.

● Bagian Rekomendasi. Menampilkan 4 rekomendasi anime berdasarkan jumlah
penayangan.
● Pembaruan anime terkini
● Tombol kembali ke atas
Persyaratan Front-end
Anda perlu membuat tema Anda sendiri, berdasarkan tema awal yang diberikan. Anda
perlu menerapkan elemen berikut untuk halaman web Anda:
● Catatan kaki dengan hak cipta dan tautan media sosial Hai
“Hak Cipta © 2022 - Hak cipta dilindungi undang-undang” dimana tahun harus menjadi
tahun berjalan secara dinamis berdasarkan waktu server.
Hai3 tautan media sosial. Pengguna dapat mengubah tautan untuk setiap
tautan sosial.

Jangan ragu untuk menambah dan mengubah elemen sebanyak yang Anda suka, namun elemen dalam
daftar harus ada dan desain Anda harus menyatu dengan desain yang diberikan.
Tugas pengoptimalan lebih lanjut
Halaman tersebut perlu dioptimalkan untuk mesin pencari. Anda dapat memilih salah satu plugin yang
disediakan atau menerapkan SEO Anda sendiri. Ingatlah untuk mengoptimalkan bagian tertentu dari situs web
Anda (misalnya url, peta situs,…). Amankan halaman Anda dengan menginstal dan mengonfigurasi plugin
keamanan.
Catatan: Jika plugin yang ingin Anda pilih rusak atau tidak berfungsi seperti yang diharapkan,
Anda harus memilih plugin lain atau silakan memperbaiki plugin ini.
Instruksi kepada Kompetitor

Halaman tersebut harus mengikuti Panduan Aksesibilitas Konten Web.
Untuk folder yang berfungsi, Anda perlu memberi nama folder Anda menjadi “/CMS_MODULE”.
Buang database Anda ke dalam“db-dump.sql”dan letakkan di folder root wordpress.

MODUL SISI SERVER

Isi
1. MODULE_SERVER_SIDE.docx
2. MODULE_SERVER_SIDE.pdf
3. MODULE_SERVER_SIDE_MEDIA.zip
Perkenalan
Perusahaan Anda “Formify Inc.” mengarahkan Anda sebagai Pengembang Web untuk membangun situs web
yang memungkinkan pengguna membuat formulir secara dinamis sesuai dengan jenis pertanyaan seperti
jawaban singkat, paragraf, masukan tanggal, pilihan ganda, dropdown, dan kotak centang. Pengguna yang
membuat formulir dapat membagikan link formulir kepada pengguna untuk mengirimkan respons formulir
dan juga melihat semua respons.
Deskripsi Proyek
Ada 2 fase dalam modul ini. Tahap pertama, Anda akan membuat RESTFul API menggunakan
Laravel Frameworks sesuai dokumentasi yang disediakan. Pada tahap kedua, Anda harus
membangun frontend dengan Peta Interaktif menggunakan salah satu Kerangka Javascript
yang disediakan (React/Vue/Angular) dan datanya harus berasal dari RESTFul API yang
dibuat.
Anda dapat menemukan file media yang disediakan untuk mendukung pekerjaan Anda:
- Koleksi tukang pos dan lingkungan

- Tes Api (untuk menguji titik akhir Anda secara otomatis)
- Template GUI (untuk membangun UI frontend)
- Formify.sql (database dengan struktur dan data dummy)
Fase 1: API RESTful

Pada fase ini, Anda harus membangun RESTful API menggunakan framework Laravel sesuai
dengan dokumentasi di bawah ini.
Pastikan pengguna dapat login menggunakan kredensial di bawah ini:
Nama Surel Kata sandi
Pengguna 1 pengguna1@webtech.id kata sandi1
Pengguna 2 pengguna2@webtech.id kata sandi2
Pengguna 3 pengguna3@worldskills.org kata sandi3

1. Otentikasi
Anda harus membuat titik akhir Login dan Logout. ItuaccessToken harus
dibuat oleh sanctumdan akan ditempatkan di header permintaan
Pembawa Otorisasi.
Gabung
Titik akhir : [DOMAIN]/api/v1/auth/login
Keterangan : Bagi pengguna untuk masuk ke sistem
metode : POS
Meminta : Tubuh (JSON):

{
"email": " pengguna1@webtech.id ",
"kata sandi": "kata sandi1"
}
Validasi : surel:
- diperlukan
- alamat email yang sah
kata sandi:
- diperlukan
- minimal 5 karakter
Tanggapan : Jika berhasil:

Tajuk:
- Status respons: 200
Tubuh (JSON):
{
"pesan": "Login berhasil",
"pengguna": {
"nama": "Pengguna 1",
"accessToken":
"1|QnHFgF0C7ml2LkbDG5QDn34qvJoYGdpxoXy63Poi"
}
}
Jika bidang tidak valid:

Tajuk:
Tubuh (JSON):
{
"pesan": "Bidang tidak valid",

"kesalahan": {
"surel": [
"Email tersebut harus berupa alamat email yang valid."
],
"kata sandi": [
"Bidang kata sandi wajib diisi."
]
}
}
Jika gagal:
Tajuk:
Tubuh (JSON):
{
"message": "Email atau kata sandi salah"
}
Keluar
Titik akhir : [DOMAIN]/api/v1/auth/logout
Keterangan : Bagi pengguna untuk keluar dari sistem
metode : POS
Meminta : Header:
- Otorisasi: “Pembawa <accessToken>”

Tajuk:
Tubuh (JSON):
{
"message": "Logout berhasil"
}
Jika token tidak valid:

Tajuk:
Tubuh (JSON):
{
"message": "Tidak diautentikasi."
}

2. Bentuk
Pengguna dapat mengelola (membuat, melihat semua formulir yang dibuat, dan melihat detail formulir) dengan pertanyaan
untuk dibagikan kepada pengguna yang diundang berdasarkan domain email yang akan dikirimkan.
Buat Formulir
Titik akhir : [DOMAIN]/api/v1/forms
Deskripsi : Bagi pengguna untuk membuat formulir baru
metode : POS
Meminta : Header:
Tubuh (JSON):
{
"name": "Tumpukan Anggota Teknologi Web",
"slug": "tumpukan anggota",
"allowed_domains": [ "webtech.id" ], "description": "Untuk
mengumpulkan semua tumpukan favorit", "limit_one_response":
true
}
Validasi : nama:
- diperlukan
siput:
- diperlukan
- unik
- alfanumerik dengan karakter khusus hanya tanda hubung “-” dan titik
“.” dan tanpa spasi
domain_yang diizinkan:
- Himpunan

Tajuk:
Tubuh (JSON):
{
"message": "Buat formulir sukses", "form": {

"description": "Untuk mengumpulkan semua favorit..",
"limit_one_response": benar,
"id_pencipta": 1,
"id": 3
}


Tajuk:
Tubuh (JSON):
{
"kesalahan": {
"nama": [
"Bidang nama wajib diisi."
],
"siput": [
"Siputnya sudah diambil."
],
"domain_diizinkan": [
"Domain yang diizinkan harus berupa array."
]
}
}

Tajuk:
Tubuh (JSON)
{
}
Dapatkan semua Formulir
Titik akhir : [DOMAIN]/api/v1/forms
Keterangan : Bagi pengguna untuk mendapatkan semua formulir yang mereka buat
metode : MENDAPATKAN
Meminta : Header:

Tajuk:

Tubuh (JSON):
{
"message": "Dapatkan semua formulir sukses",
"forms": [
{
"id": 1,
"name": "Biodata - Anggota Teknologi Web",
"slug": "biodata",
"description": "Untuk menyimpan anggota teknologi
web..", "limit_one_response": 1,
"id_pencipta": 1
},
{
"id": 2,
"name": "Keterampilan HTML dan CSS - Kuis",
"slug": "htmlcss-quiz",
"description": "Uji web dasar", "limit_one_response":
1,
"id_pencipta": 1
},
{
"id": 3,
"description": "Untuk mengumpulkan semua favorit..",
"limit_one_response": 1,
"id_pencipta": 1
}
]
}

Tajuk:
Tubuh (JSON):
{
}
Formulir Detil
Titik akhir : [DOMAIN]/api/v1/forms/<form_slug>

Deskripsi : Bagi pengguna yang diundang untuk mendapatkan formulir detail
Meminta : -

Tajuk:
Tubuh (JSON):
{
"message": "Dapatkan formulir berhasil",
"formulir": {
"id": 1,
"name": "Biodata - Anggota Teknologi Web",
"slug": "biodata",
"description": "Untuk menyimpan data anggota teknologi web",
"limit_one_response": 1,
"id_pencipta": 1,
"domain_diizinkan": [
"webtech.id"
],
"pertanyaan": [
{
"id": 1,
"form_id": 1,
"nama": "Nama",
"choice_type": "jawaban singkat",
"choices": null,
"diperlukan_: 1
},
{
"id": 2,
"form_id": 1,
"nama": "Alamat",
"choice_type": "paragraf", "pilihan":
null,
"diperlukan_: 0
},
{
"id": 3,
"form_id": 1,
"nama": "Tanggal Lahir",
"choice_type": "tanggal",
"pilihan": batal,

"diperlukan_: 1
},
{
"id": 4,
"form_id": 1,
"nama": "Jenis Kelamin",
"choice_type": "pilihan ganda", "pilihan":

"Pria,Wanita",
"diperlukan_: 1
}
]
}
}
Jika formulir slug tidak valid:

Tajuk:
Tubuh (JSON):
{
"pesan": "Formulir tidak ditemukan"
}
Jika domain email pengguna tidak diizinkan mengirimkan formulir:

Tajuk:
Tubuh (JSON):
{
"message": "Akses terlarang"
}

Tajuk:
Tubuh (JSON):
{
}

3. Pertanyaan
Pengguna dapat mengelola pertanyaan (menambah dan menghapus) dari salah satu formulir
yang mereka buat. Bidang pilihan harus diisi jika pengguna memilih pilihan ganda, dropdown,
atau kotak centang. Ada 6 jenis pilihan:
1. Jawaban singkat (Bidang Teks)
2. Paragraf (Area Teks)
3. Tanggal (Tanggal Masukan)
4. Pilihan Ganda (Radio) : dengan pilihan

5. Dropdown (Pilih) : dengan pilihan
6. Kotak centang (Checkboxes): dengan pilihan
Tambahkan Pertanyaan
Titik akhir : [DOMAIN]/api/v1/forms/<form_slug>/questions
Keterangan : Bagi pengguna untuk menambahkan pertanyaan pada formulir
metode : POS
Meminta : Header:
Tubuh (JSON):
{
"name": "Framework JS Paling Favorit",
"choice_type": "pilihan ganda", "choices": [
"Reaksi JS",
"VueJS",
"JS Sudut",
"Langsing"
],
"is_required": benar
}
Validasi : nama:
- diperlukan
tipe_pilihan:
- diperlukan
- hanya: pilihan “jawaban singkat”, “paragraf”, “tanggal”, “pilihan
ganda”, “dropdown”, atau “kotak centang”
- diperlukan jika jenis pilihan yang dipilih adalah “pilihan ganda”,

“dropdown”, atau “kotak centang”

Tajuk:
Tubuh (JSON):

{
"message": "Tambahkan pertanyaan sukses",
"question": {
"nama": "Kerangka JS Paling Favorit",
"choice_type": "pilihan ganda", "is_required":
benar,
"choices": "Reaksi JS,Vue JS,Angular JS,Svelte", "form_id": 3,
"id": 10
}
}

Tajuk:
Tubuh (JSON):
{
"kesalahan": {
"nama": [
"Bidang nama wajib diisi."
],
"tipe_pilihan": [
"Bidang jenis pilihan wajib diisi."
],
"pilihan": [
"Pilihannya harus berupa array.", "Pilihan
harus berupa string."
]
}
}

Tajuk:
Tubuh (JSON):
{
}
Jika mencoba mengakses formulir pengguna lain:
Tajuk:
Tubuh (JSON):

{
}

Tajuk:
Tubuh (JSON):
{
}
Hapus Pertanyaan
Titik akhir : [DOMAIN]/api/v1/forms/<form_slug>/questions/<question_id>
Keterangan : Bagi pengguna untuk menghapus pertanyaan formulir
metode : MENGHAPUS
Meminta : Header:

Tajuk:
Tubuh (JSON):
{
"message": "Hapus pertanyaan berhasil"
}

Tajuk:
Tubuh (JSON):
{
}
Jika id pertanyaan tidak valid:

Tajuk:

Tubuh (JSON):
{
"message": "Pertanyaan tidak ditemukan"
}
Tajuk:
Tubuh (JSON):
{
}

Tajuk:
Tubuh (JSON):
{
}
4. Respon
Jika pembuat formulir menetapkan formulir dengan batas 1 respons, maka pengguna yang diundang
tidak dapat mengirimkan respons dua kali. Kirim Respons hanya dapat diakses oleh pengguna
dengan domain email pengguna yang diizinkan. Jika pembuat formulir tidak mengisi domain yang
diperbolehkan, berarti formulir tersebut dapat diakses oleh siapa saja/publik.
Misalnya:
Pengguna dengan email “pengguna3@worldskills.org ” tidak dapat mengirimkan tanggapan pada
formulir dengan domain yang diizinkan webtech.id dan inaskills.id, karena worldskills.org tidak dapat
mengakses formulir tersebut.
Kirim Tanggapan
Titik akhir : [DOMAIN]/api/v1/forms/<form_slug>/responses
Keterangan : Untuk pengguna yang diundang mengirim respons formulir
metode : POS
Meminta : Header:

Tubuh (JSON):
{
"jawaban": [
{
"id_pertanyaan": 1,
"nilai": "Ica Amalia"
},
{
"id_pertanyaan": 2,
"nilai": "Bandung"
},
{
"id_pertanyaan": 3,
"nilai": "01-08-2006"
},
{
"id_pertanyaan": 4,
"nilai": "Wanita"
}
]
}
Validasi : jawaban
- Himpunan
[nilai pertanyaan]
- diperlukan jika disetel benar

Tajuk:
Tubuh (JSON):
{
"message": "Kirim respons berhasil"
}

Tajuk:
Tubuh (JSON):
{
"kesalahan": {
"jawaban": [
"Bidang jawaban wajib diisi."
]
}

Jika domain email pengguna tidak diizinkan mengirimkan formulir:

Tajuk:
Tubuh (JSON):
{
}
Jika dibatasi untuk 1 tanggapan maka pengguna mengirimkan dua kali:
Tajuk:
Tubuh (JSON):
{
"message": "Anda tidak dapat mengirimkan formulir dua kali"
}
Jika token tidak valid

Tajuk:
Tubuh (JSON):
{
}
Dapatkan semua Tanggapan
Titik akhir : [DOMAIN]/api/v1/forms/<form_slug>/responses
Keterangan : Untuk pencipta, lihat semua tanggapan
Meminta : Tajuk:

Tajuk:
Tubuh (JSON):
{

"message": "Dapatkan tanggapan berhasil",

"tanggapan": [
{
"tanggal": "24-10-2022 01:47:14",
"pengguna": {
"id": 1,
"email_verified_at": null
},
"jawaban": {
"Nama": "Budi Setiawan", "Alamat":
"Jakarta, Indonesia", "Tanggal Lahir":
"05-05-2004", "Jenis Kelamin": "Pria"
}
},
{
"tanggal": "24-10-2022 02:03:27",
"pengguna": {
"id": 2,
"email_verified_at": null
},
"jawaban": {
"Nama" : "Ica Amalia",
“Alamat” : “Bandung”,
"Tanggal Lahir": "01-08-2006", "Jenis
Kelamin": "Wanita"
}
}
]
}

Tajuk:
Tubuh (JSON):
{
}

Tajuk:
Tubuh (JSON)
{
}
Jika token tidak valid

Header
Tubuh (JSON)
{
}
Fase 2: Pengembangan Front-end

Di bagian ini, Anda harus membangun aplikasi front-end menggunakan salah satu kerangka kerja yang
disediakan (vue js atau react js). Anda dapat menggunakan gui template yang disediakan pada file media
untuk membangun antarmuka front-end.

Halaman / Fitur Keterangan
- Pengguna dapat login menggunakan kredensial yang benar (nama pengguna

dan kata sandi)
Masuk dan Keluar - Kesalahan peringatan akan ditampilkan ketika login gagal
- Pengguna dapat logout dengan mengklik tombol logout pada
navbar.
Rumah - Pengguna dapat melihat daftar formulir yang dibuat.
- Input formulir ditampilkan dengan benar (nama, slug,

deskripsi, domain yang diizinkan, dan batas hingga 1 sakelar
respons). Bidang nama dan slug wajib diisi.
Buat Formulir
- Pengguna dapat membuat formulir dengan mengisi semua kolom yang
diperlukan.
- Kesalahan peringatan harus ditampilkan ketika gagal.
Umum:
- Detail formulir ditampilkan dengan benar
- Tautan formulir ditampilkan dengan benar
- Pengguna dapat menyalin tautan formulir
Pertanyaan:
- Pertanyaan ditampilkan dengan benar

- Input pertanyaan harus dinonaktifkan ketika telah dibuat
- Pengguna dapat menambahkan pertanyaan dengan mengisi formulir
pertanyaan dan mengklik tombol simpan.
Formulir Detil
- Input pilihan harus ditampilkan ketika pengguna memilih
pilihan ganda, dropdown, atau kotak centang.
- Kesalahan peringatan harus ditampilkan ketika pembuatan gagal.
- Pengguna dapat menghapus pertanyaan dengan mengklik tombol
hapus.
Tanggapan:
- Tabel ditampilkan dengan benar sesuai pertanyaan dan
tanggapan.
- Jumlah tanggapan total ditampilkan dengan benar.

- Detail formulir ditampilkan dengan benar (nama, deskripsi, dan email

pengguna).
- Soal dengan form yang ditampilkan dengan benar.
- Pengguna dapat mengirimkan dengan mengisi semua formulir yang
diperlukan dan mengklik tombol kirim.
- Tombol kirim harus dinonaktifkan jika ada formulir
Menyerahkan formulir
wajib yang belum diisi.
- Pengguna tidak dapat mengirimkan dua kali jika formulir dibatasi untuk 1
tanggapan.
- Halaman akses terlarang harus ditampilkan ketika pengguna tidak

diundang untuk mengakses formulir itu.
ERD
instruksi
- Simpan REST Api Anda di direktori bernama“SERVER_MODULE/bagian belakang”
dan simpan di folder repositori.
- Simpan aplikasi front-end Anda di direktori bernama“SERVER_MODULE/depan”
dan simpan di folder repositori.
- Saat mengembangkan Frontend, Anda bisamenggunakan/mengkonsumsi REST API yang disediakan.
- Kamu harus melakukannyamembangun aplikasi frontend ke mode produksiDan

simpan file produksi di folder “SERVER_MODULE/frontend/build”.sebelum Anda
mendorongnya ke repositori github.
- Pastikan“/membangun"maptidak tertulis di file .gitgnore.
- Anda harus melakukan dan mendorong perubahan Anda ke repositori github setidaknya
setiap 30 menit.

KLIEN MODUL
Isi
1. MODULE_CLIENT.docx
2. MODULE_CLIENT_MEDIA.zip
Perkenalan
Orang-orang suka memainkan permainan menantang yang membutuhkan usaha berpikir pemainnya.
Permainan akan lebih menantang jika melibatkan angka-angka. Meski demikian, game multipemain
bisa lebih seru jika dimainkan bersama-sama.
Dengan dukungan teknologi yang canggih saat ini, kita dapat membuat sebuah game yang dapat
dimainkan di web browser sehingga orang dapat memainkannya melalui perangkat. Anda harus
membuat game ini berjalan dengan benar di Google Chrome atau Mozilla Firefox versi terbaru.
Deskripsi proyek
Anda perlu membuat game bernama Hexaria, game puzzle matematika multipemain yang menyenangkan
dengan tujuan mendapatkan poin terbanyak di papan heksagonal selama pertandingan.
Ini adalah modul 5 jam di mana Anda perlu membuat tata letak awal game dan fungsionalitas
game menggunakan Javascript. Anda diharuskan membuat game berfungsi dengan sempurna di
browser modern tanpa kesalahan apa pun.
Layar permainan Hexaria harus memiliki komponen di bawah ini:
1. Judul permainan
2. Balok segi enam 10x8
3. Nama kedua pemain
4. Kedua pemain mencetak gol
5. Segi enam saat ini
6. Tombol permainan baru
7. Papan Peringkat
8. Sortir Fungsionalitas
Fungsionalitas permainan
1.Tunjukkan permainannyaikon sebagai favicon.

2.Layar selamat datang akan munculketika halaman dimuat.
3.Instruksi permainan akan munculselain layar selamat datang.
4.Instruksi permainanakan muncul dalam bentuk animasi.

5. Pemain 1 dapat memilih untuk bersaingPemain 2 atau Bot.

6.Pemain 1 dapat memulai permainandengan mengklik tombol mulai.
7.Jika pengguna memilih untuk bersaing dengan Pemain 2,Pemain 1 harus memasukkan nama
Pemain 1 dan nama Pemain 2.
8.Jika pengguna memilih untuk bersaing dengan Bot,Pemain 1 tidak perlu memasukkan nama
bot.
9.Pemain 1 dapat memilih leveldi layar selamat datang (mudah, sedang, sulit).
10.Tombol "Mainkan Game" harus dinonaktifkanjika pengguna belum mengisi
nama dan belum memilih level.
11.Papan permainan terdiridari balok segi enam 10x8 dan Setiap posisi segi
enam pada baris harus terhubung ke baris atas dan bawah.
12.Segi enam yang dinonaktifkan akan muncul dalam segi enam acak dengan warna keabu-abuan:
A.4 segi enam yang dinonaktifkanuntuk tingkat mudah
B.6 segi enam dinonaktifkanuntuk tingkat menengah

C.8 segi enam dinonaktifkanuntuk tingkat keras
13.Warna pemain 1berwarna merah dan yang lainnya berwarna biru.
14.Merah mengambil giliran pertama.Biru bergantian dengan merah. Pemain 1 atau 2 dengan mengklik segi
enam yang kosong dan bot dengan otomatis mengisi segi enam yang kosong.
15.Setiap giliran, segi enam dengan nomor acak (1-20)dapat digunakan oleh salah satu pemain
untuk ditempatkan di salah satu segi enam yang kosong.
16.Segi enam belokan saat ini harus ditampilkan di layaruntuk memberi tahu pemain
warna dan nomor segi enam apa yang akan mereka masukkan.
17.Saat pemain mengarahkan salah satu segi enam yang kosong,akan ada
pengganti segi enam saat ini tergantung pada warna dan nomor segi enam
saat ini.
18.Ketika segi enam kosong dipilih oleh pemain,itu akan diisi dengan segi enam
belokan saat ini.
19.Pemain dapat mengambil alih segi enam lawanjika pemain menempatkan segi
enamnya pada segi enam lawan yang berdekatan dengan segi enam yang bernilai lebih
tinggi dari segi enam lawan.
20.Diambil alih warna segi enamakan berubah berdasarkan giliran pemain mana.
21.Saat pemain menempatkan segi enam baru berdekatan dengan segi enam warna yang
sama, segi enam yang berdekatan akan dijumlahkan dengan 1 angka.
22.Saat segi enam kosong diarahkan oleh pemain atau bot,tampilan animasi bergerak yang
menunjukkan apa yang akan terjadi pada segi enam yang berdekatan dengan menampilkan
animasi perubahan warna atau jumlahkan 1 animasi.
23.Bot harus meniru gerakan manusia dengan menunjukkan 3 langkahsebelum langkah sebenarnya
selama minimal 1 detik. Tampilkan animasi gerakan apa pun jika suatu langkah harus menampilkan
animasi.
24.Skor akan dihitung berdasarkan jumlah setiap segi enam dengan warna yang identikyang
telah ditempatkan oleh pemain.
25.Segi enam yang dinonaktifkantidak dapat diarahkan atau diklik.
26.Mainkan efek suaradiberikan dalam file media saat pemain menempatkan segi enam
baru.
27.Skor pemain merah dan biru saat iniharus ditampilkan di layar.
28.Ketika tidak ada segi enam kosong yang tersisa,permainan sudah berakhir.
29.Saat permainan selesai, tampilkan popupuntuk menampilkan nama, skor
pemenang, dan tombol restart.

30.Skor akan disimpandan ditampilkan di papan peringkat dan lihat detail

permainan pemain dengan mengklik tombol detail.
31.Data skorharus tetap ada di browser.
32.Pemain dapat mengurutkan papan peringkatberdasarkan skor pemenang atau berdasarkan tanggal
dalam urutan menurun.
33.Permainan seharusnya berfungsi dengan benardi Google Chrome dan Mozilla Firefox
dengan membuka file index.html secara langsung.
34.Permainan ini seharusnya berhasiltanpa kesalahan JavaScript dan pesan yang ditampilkan di
konsol browser
INSTRUKSI UNTUK PESAING

1. File media tersedia dalam file ZIP. Anda dapat memodifikasi file yang disediakan dan
membuat file media baru untuk memastikan fungsionalitas yang benar dan
meningkatkan aplikasi.
2. File entri seharusnya'CLIENT_MODULE/index.html'
3. Anda harus membuat gambar tambahan untuk setiap resolusi yang diminta untuk
menyorot elemen tersembunyi, animasi, interaksi, atau informasi tambahan apa
pun yang akan membantu dalam presentasi desain game.
4. Simpan game yang sedang berjalan ke direktori di server bernama "
KLIENT_MODULE". Pastikan file utama Anda dipanggilindeks.html.
5. Anda bertanggung jawab atas manajemen waktu dalam pengembangan Anda. Jika Anda
menyelesaikan beberapa tugas, Anda dapat melanjutkan ke tugas lainnya.

Kisi-Kisi Desain Laman

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kisi-Kisi Desain Laman

Diunggah oleh

Hak Cipta:

Format Tersedia

Diterjemahkan dari bahasa Inggris ke bahasa Indonesia - www.onlinedoctranslator.

UJI KECEPATAN MODUL

A1. Halaman arahan

B1. Tata Letak Batu

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

C1. Bagan Garis

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

C2. Bandingkan Gambar

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

D2. Analisis Obrolan

D3. Tanda air

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

Deskripsi proyek dan tugas

Sistem Manajemen Konten

● Pengguna Admin - akses ke dashboard utama WordPress lengkap. Hai

Hai Kata sandi:admin.

Hai Kata sandi:pelanggan pertama Anda!

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

- Musim Dingin 2023

Pengguna dapat memilihberbagai genre dan musimdalam sebuah anime.

Tingkat aksesibilitas URL

● Semua artikel: <host>/articles

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

● Detail artikel: <host>/artikel/<slug>

Tata letak dan mockup halaman beranda

● Bagian Pahlawan. Menampilkan gambar besar sebuah anime.

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

Tugas pengoptimalan lebih lanjut

Instruksi kepada Kompetitor

Buang database Anda ke dalam“db-dump.sql”dan letakkan di folder root wordpress.

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

MODUL SISI SERVER

- Koleksi tukang pos dan lingkungan

Fase 1: API RESTful

Pastikan pengguna dapat login menggunakan kredensial di bawah ini:

Nama Surel Kata sandi

Pengguna 1 pengguna1@webtech.id kata sandi1

Pengguna 2 pengguna2@webtech.id kata sandi2

Pengguna 3 pengguna3@worldskills.org kata sandi3

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

Titik akhir : [DOMAIN]/api/v1/auth/login

Keterangan : Bagi pengguna untuk masuk ke sistem

Meminta : Tubuh (JSON):

Tanggapan : Jika berhasil:

Jika bidang tidak valid:

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

Keterangan : Bagi pengguna untuk keluar dari sistem

Tanggapan : Jika berhasil:

Jika token tidak valid:

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

Deskripsi : Bagi pengguna untuk membuat formulir baru

Tanggapan : Jika berhasil:

"name": "Tumpukan Anggota Teknologi Web",

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

Jika bidang tidak valid:

Jika token tidak valid:

Dapatkan semua Formulir

Titik akhir : [DOMAIN]/api/v1/forms

Tanggapan : Jika berhasil:

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0

Jika token tidak valid:

Titik akhir : [DOMAIN]/api/v1/forms/<form_slug>

Dokumen LKS SMK Tingkat Nasional XXXI Tahun 2023_Luring_Versi 0