ANDI MUHAMMAD QISMAT RAJJAB
SMK TELKOM MAKASSAR (Kota Makassar)
SP-28FA9745 • Teknologi Web
Total Skor
56
Progress
Katalog Publik - Akses Terbuka
Backend REST API
Klik Send pada URL Katalog Publik
Kondisi: Data seluruh produk muncul lengkap dengan info nama kategorinya
Isi kolom parameter search dengan nama produk
Kondisi: Hanya produk dengan nama tersebut yang berhasil tersaring
Isi kolom parameter kategori_id dengan angka ID
Kondisi: Hanya produk dari kategori tersebut saja yang keluar
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 1.1 | Klik Send pada URL Katalog Publik Data seluruh produk muncul lengkap dengan info nama kategorinya |
3 | 3 |
| 1.2 | Isi kolom parameter search dengan nama produk Hanya produk dengan nama tersebut yang berhasil tersaring |
3 | 0 |
| 1.3 | Isi kolom parameter kategori_id dengan angka ID Hanya produk dari kategori tersebut saja yang keluar |
2 | 0 |
Pembatasan Role Tampilan & Hasil Akhir
Frontend SPA Client
Login menggunakan akun dengan role Kasir
Kondisi: Menu atau Tombol "Tambah Produk" hilang dari layar
Minta peserta menunjukkan folder programnya
Kondisi: Terdapat folder hasil kompilasi final (dist atau build)
Klik kanan browser -> pilih Inspect -> tab Console
Kondisi: Tidak ada baris teks error berwarna merah yang muncul
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 10.1 | Login menggunakan akun dengan role Kasir Menu atau Tombol "Tambah Produk" hilang dari layar |
3 | 3 |
| 10.2 | Minta peserta menunjukkan folder programnya Terdapat folder hasil kompilasi final (dist atau build) |
3 | 3 |
| 10.3 | Klik kanan browser -> pilih Inspect -> tab Console Tidak ada baris teks error berwarna merah yang muncul |
2 | 2 |
Otentikasi & Profil User
Backend REST API
Masukkan email & password seeder, klik Send
Kondisi: Keluar kode status 200 beserta teks token akses panjang
Sengaja salahkan password login, klik Send
Kondisi: Keluar kode status 201 disertai keterangan teks gagal
Klik Send pada URL Profil menggunakan token aktif
Kondisi: Muncul informasi detail Nama, Email, dan Role user yang login
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 2.1 | Masukkan email & password seeder, klik Send Keluar kode status 200 beserta teks token akses panjang |
3 | 3 |
| 2.2 | Sengaja salahkan password login, klik Send Keluar kode status 201 disertai keterangan teks gagal |
2 | 2 |
| 2.3 | Klik Send pada URL Profil menggunakan token aktif Muncul informasi detail Nama, Email, dan Role user yang login |
3 | 3 |
Tambah & Tampilkan Produk - Khusus Superadmin
Backend REST API
Klik Send pada URL Data Produk (GET /api/produk)
Kondisi: Daftar seluruh produk muncul dalam format JSON khusus untuk internal manajemen admin
Kirim data produk baru tanpa mengisi nama/harga
Kondisi: Keluar respons status 201 (Sistem validasi backend aktif)
Kirim data produk lengkap + Lampirkan file gambar
Kondisi: Keluar kode status 200 dan data sukses tersimpan
Salin path gambar hasil upload, buka di browser
Kondisi: Gambar produk berhasil dipanggil dan tampil dengan jelas
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 3.1 | Klik Send pada URL Data Produk (GET /api/produk) Daftar seluruh produk muncul dalam format JSON khusus untuk internal manajemen admin |
3 | 3 |
| 3.2 | Kirim data produk baru tanpa mengisi nama/harga Keluar respons status 201 (Sistem validasi backend aktif) |
2 | 2 |
| 3.3 | Kirim data produk lengkap + Lampirkan file gambar Keluar kode status 200 dan data sukses tersimpan |
3 | 0 |
| 3.4 | Salin path gambar hasil upload, buka di browser Gambar produk berhasil dipanggil dan tampil dengan jelas |
2 | 0 |
Logika Transaksi & Riwayat Transaksi
Backend REST API
Klik Send pada URL Data Transaksi (GET /api/transaksi)
Kondisi: Daftar seluruh riwayat transaksi yang pernah terjadi di toko berhasil muncul dalam format JSON
Kirim data transaksi baru (isi kuantitas & diskon %)
Kondisi: Transaksi berhasil diproses masuk ke dalam data riwayat
Cek kalkulasi nota nilai harga yang keluar
Kondisi: Angka total harga terpotong persentase diskon secara akurat
Cek data kuantitas produk setelah transaksi sukses
Kondisi: Stok produk otomatis berkurang sesuai jumlah yang dibeli
Kirim data transaksi dengan jumlah melebihi stok
Kondisi: Transaksi otomatis digagalkan dan keluar pesan error stok
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 4.1 | Klik Send pada URL Data Transaksi (GET /api/transaksi) Daftar seluruh riwayat transaksi yang pernah terjadi di toko berhasil muncul dalam format JSON |
3 | 3 |
| 4.2 | Kirim data transaksi baru (isi kuantitas & diskon %) Transaksi berhasil diproses masuk ke dalam data riwayat |
2 | 0 |
| 4.3 | Cek kalkulasi nota nilai harga yang keluar Angka total harga terpotong persentase diskon secara akurat |
3 | 0 |
| 4.4 | Cek data kuantitas produk setelah transaksi sukses Stok produk otomatis berkurang sesuai jumlah yang dibeli |
5 | 5 |
| 4.5 | Kirim data transaksi dengan jumlah melebihi stok Transaksi otomatis digagalkan dan keluar pesan error stok |
3 | 0 |
Keamanan & Hak Akses Role
Backend REST API
Gunakan token akun Kasir untuk menyimpan produk
Kondisi: Sistem menolak aksi secara mutlak (Keluar kode error/403)
Hapus token di Postman, lalu akses URL internal admin
Kondisi: Akses terblokir total karena sistem mewajibkan token login
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 5.1 | Gunakan token akun Kasir untuk menyimpan produk Sistem menolak aksi secara mutlak (Keluar kode error/403) |
4 | 0 |
| 5.2 | Hapus token di Postman, lalu akses URL internal admin Akses terblokir total karena sistem mewajibkan token login |
4 | 4 |
Katalog Publik - Sisi Pelanggan
Frontend SPA Client
Buka Halaman Utama publik aplikasi peserta
Kondisi: Antarmuka (UI) katalog terbuka rapi, memiliki struktur tata letak (Grid/Card/List) untuk produk, kolom pencarian, dan area tombol filter
Periksa komponen menu produk di layar utama tersebut
Kondisi: Komponen kartu produk berhasil merender data nama, harga, dan gambar secara dinamis dari database REST API
Ketik nama produk di kolom pencarian di layar
Kondisi: Daftar produk langsung tersaring otomatis saat mengetik
Klik pilihan filter kategori produk
Kondisi: Daftar menu otomatis berubah sesuai kategori yang diklik
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 6.1 | Buka Halaman Utama publik aplikasi peserta Antarmuka (UI) katalog terbuka rapi, memiliki struktur tata letak (Grid/Card/List) untuk produk, kolom pencarian, dan area tombol filter |
1 | 1 |
| 6.2 | Periksa komponen menu produk di layar utama tersebut Komponen kartu produk berhasil merender data nama, harga, dan gambar secara dinamis dari database REST API |
3 | 0 |
| 6.3 | Ketik nama produk di kolom pencarian di layar Daftar produk langsung tersaring otomatis saat mengetik |
2 | 0 |
| 6.4 | Klik pilihan filter kategori produk Daftar menu otomatis berubah sesuai kategori yang diklik |
2 | 0 |
Login Admin & Proteksi Halaman
Frontend SPA Client
Buka URL Halaman Login pada browser
Kondisi: Antarmuka (UI) halaman login terbuka dengan rapi, memiliki input email, input password, dan tombol submit
Ketik email/password salah di halaman login
Kondisi: Muncul teks peringatan/notifikasi gagal di layar
Ketik email/password benar di halaman login
Kondisi: Berhasil masuk ke halaman Dashboard Utama Admin
Coba ketik manual URL dashboard di browser tanpa login
Kondisi: Sistem otomatis menolak dan melempar kembali ke login
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 7.1 | Buka URL Halaman Login pada browser Antarmuka (UI) halaman login terbuka dengan rapi, memiliki input email, input password, dan tombol submit |
1 | 1 |
| 7.2 | Ketik email/password salah di halaman login Muncul teks peringatan/notifikasi gagal di layar |
2 | 2 |
| 7.3 | Ketik email/password benar di halaman login Berhasil masuk ke halaman Dashboard Utama Admin |
3 | 3 |
| 7.4 | Coba ketik manual URL dashboard di browser tanpa login Sistem otomatis menolak dan melempar kembali ke login |
2 | 2 |
Tampilan Dashboard & Input Produk Baru
Frontend SPA Client
Lihat kotak statistik di Dashboard Utama
Kondisi: Angka total produk, transaksi, dll muncul dari backend
Buka halaman / menu Data Produk
Kondisi: Antarmuka (UI) halaman terbuka rapi, struktur tabel manajemen sudah terbentuk lengkap dengan kolomnya (Nama, Kategori, Harga, Gambar)
Periksa baris isi di dalam tabel Data Produk tersebut
Kondisi: Data teks produk beserta file aset gambarnya berhasil ditarik dari database dan ter-render dengan sempurna pada baris tabel
Buka Form Produk, klik simpan dalam kondisi kosong
Kondisi: Muncul tulisan error berwarna merah (Validasi form aktif)
Isi data produk, pilih file gambar, klik Simpan
Kondisi: Produk baru berhasil masuk dan langsung muncul di tabel tanpa refresh web
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 8.1 | Lihat kotak statistik di Dashboard Utama Angka total produk, transaksi, dll muncul dari backend |
2 | 2 |
| 8.2 | Buka halaman / menu Data Produk Antarmuka (UI) halaman terbuka rapi, struktur tabel manajemen sudah terbentuk lengkap dengan kolomnya (Nama, Kategori, Harga, Gambar) |
1 | 1 |
| 8.3 | Periksa baris isi di dalam tabel Data Produk tersebut Data teks produk beserta file aset gambarnya berhasil ditarik dari database dan ter-render dengan sempurna pada baris tabel |
2 | 2 |
| 8.4 | Buka Form Produk, klik simpan dalam kondisi kosong Muncul tulisan error berwarna merah (Validasi form aktif) |
1 | 1 |
| 8.5 | Isi data produk, pilih file gambar, klik Simpan Produk baru berhasil masuk dan langsung muncul di tabel tanpa refresh web |
4 | 4 |
Layar Kasir / POS Screen & Riwayat Transaksi
Frontend SPA Client
Buka halaman / menu Layar Kasir (POS Screen)
Kondisi: Antarmuka (UI) layar transaksi terbuka rapi, minimal menampilkan layout 2 kolom (area menu produk dan area draf keranjang belanja)
Klik tombol tambah pada salah satu produk menu
Kondisi: Produk langsung masuk ke daftar keranjang belanja
Klik tombol + atau - pada item di dalam keranjang
Kondisi: Jumlah barang dan subtotal harga berubah otomatis
Ketik angka nominal di kolom diskon % (misal: 10)
Kondisi: Total harga akhir langsung berkurang 10% di layar
Klik tombol Bayar / Selesai Transaksi
Kondisi: Muncul notifikasi sukses dan keranjang kembali kosong
Buka Halaman / Menu Riwayat Transaksi
Kondisi: Daftar transaksi yang baru saja dilakukan berhasil tampil di tabel riwayat lengkap dengan total harganya
| Kode | Langkah Pengujian | Bobot | Skor |
|---|---|---|---|
| 9.1 | Buka halaman / menu Layar Kasir (POS Screen) Antarmuka (UI) layar transaksi terbuka rapi, minimal menampilkan layout 2 kolom (area menu produk dan area draf keranjang belanja) |
1 | 1 |
| 9.2 | Klik tombol tambah pada salah satu produk menu Produk langsung masuk ke daftar keranjang belanja |
2 | 0 |
| 9.3 | Klik tombol + atau - pada item di dalam keranjang Jumlah barang dan subtotal harga berubah otomatis |
4 | 0 |
| 9.4 | Ketik angka nominal di kolom diskon % (misal: 10) Total harga akhir langsung berkurang 10% di layar |
4 | 0 |
| 9.5 | Klik tombol Bayar / Selesai Transaksi Muncul notifikasi sukses dan keranjang kembali kosong |
3 | 0 |
| 9.5 | Buka Halaman / Menu Riwayat Transaksi Daftar transaksi yang baru saja dilakukan berhasil tampil di tabel riwayat lengkap dengan total harganya |
2 | 0 |