Perancangan dan Dokumentasi Teknis Sistem Informasi
Sistem Penyewaan Lapangan Voli adalah aplikasi berbasis web yang dirancang untuk memudahkan pengelolaan penyewaan lapangan voli. Sistem ini memungkinkan admin untuk mengelola data lapangan, pelanggan, dan transaksi pemesanan secara efisien dan terintegrasi.
Berikut adalah fitur dan kemampuan yang dimiliki oleh user Admin dalam sistem:
Sistem menggunakan 3 tabel utama: 2 tabel master (Pelanggan dan Lapangan) dan 1 tabel transaksi (Pemesanan).
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ PELANGGAN │ │ LAPANGAN │
├─────────────────────────────┤ ├─────────────────────────────┤
│ PK id VARCHAR(10) │ │ PK id VARCHAR(10) │
│ nama VARCHAR(100)│ │ nama VARCHAR(100)│
│ email VARCHAR(100)│ │ tipe ENUM │
│ telepon VARCHAR(15) │ │ harga_per_jam DECIMAL │
│ alamat TEXT │ │ status ENUM │
│ tanggal_daftar DATE │ │ fasilitas JSON │
└─────────────┬───────────────┘ │ deskripsi TEXT │
│ └──────────────┬──────────────┘
│ 1 │ 1
│ │
│ M │ M
▼ ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ PEMESANAN │
├─────────────────────────────────────────────────────────────────────────────┤
│ PK id VARCHAR(10) │
│ FK pelanggan_id VARCHAR(10) ──────► References PELANGGAN(id) │
│ FK lapangan_id VARCHAR(10) ──────► References LAPANGAN(id) │
│ tanggal DATE │
│ jam_mulai TIME │
│ jam_selesai TIME │
│ durasi INT │
│ total_harga DECIMAL(12,2) │
│ status ENUM('Pending','Dikonfirmasi','Selesai','Dibatalkan')│
│ metode_pembayaran ENUM('Transfer','Cash','E-Wallet') │
│ created_at TIMESTAMP │
└─────────────────────────────────────────────────────────────────────────────┘
╔════════════════════════════════════════════════════════════════════════════╗
║ KETERANGAN RELASI: ║
║ • 1 Pelanggan dapat memiliki M (Many/Banyak) Pemesanan ║
║ • 1 Lapangan dapat memiliki M (Many/Banyak) Pemesanan ║
║ • 1 Pemesanan hanya untuk 1 Pelanggan dan 1 Lapangan ║
║ • Relasi: Pelanggan (1) ──── (M) Pemesanan (M) ──── (1) Lapangan ║
╚════════════════════════════════════════════════════════════════════════════╝
┌──────────────────────────────────────────────────────────────┐
│ SISTEM PENYEWAAN LAPANGAN VOLI │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ KELOLA LAPANGAN │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ ○ Tambah Lapangan │ │ │
│ │ │ ○ Edit Lapangan │ │ │
│ │ │ ○ Hapus Lapangan │ │ │
│ │ │ ○ Lihat Daftar Lapangan │ │ │
│ │ │ ○ Ubah Status Lapangan │ │ │
┌─────────────┐ │ │ └─────────────────────────────────────────────┘ │ │
│ │ │ └────────────────────────────────────────────────────┘ │
│ │ │ │
│ ADMIN │──────│ └────────────────────────────────────────────────────┘ │
│ │ │ │
│ │ │ ┌────────────────────────────────────────────────────┐ │
│ │ │ │ KELOLA PELANGGAN │ │
└─────────────┘ │ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ ○ Tambah Pelanggan │ │ │
│ │ │ ○ Edit Pelanggan │ │ │
│ │ │ ○ Hapus Pelanggan │ │ │
│ │ │ ○ Lihat Daftar Pelanggan │ │ │
│ │ │ ○ Cari Pelanggan │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ KELOLA PEMESANAN │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ ○ Buat Pemesanan Baru │ │ │
│ │ │ ○ Konfirmasi Pemesanan │ │ │
│ │ │ ○ Batalkan Pemesanan │ │ │
│ │ │ ○ Lihat Jadwal Pemesanan │ │ │
│ │ │ ○ Kelola Pembayaran │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ LIHAT DASHBOARD │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ ○ Lihat Statistik Pemesanan │ │ │
│ │ │ ○ Lihat Total Pendapatan │ │ │
│ │ │ ○ Lihat Laporan Harian │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────┘
Admin UI Interface Controller Database
│ │ │ │
│ 1. Klik "Buat │ │ │
│ Pemesanan Baru" │ │ │
│────────────────────>│ │ │
│ │ │ │
│ │ 2. Tampilkan │ │
│ │ Form │ │
│<────────────────────│ │ │
│ │ │ │
│ 3. Isi Data: │ │ │
│ - Pelanggan │ │ │
│ - Lapangan │ │ │
│ - Tanggal/Jam │ │ │
│ - Durasi │ │ │
│────────────────────>│ │ │
│ │ │ │
│ │ 4. Submit Data │ │
│ │────────────────────> │
│ │ │ │
│ │ │ 5. Cek │
│ │ │ Ketersediaan │
│ │ │───────────────────>│
│ │ │ │
│ │ │ 6. Return: OK │
│ │ │<───────────────────│
│ │ │ │
│ │ │ 7. Hitung Total │
│ │ │ Harga │
│ │ │────┐ │
│ │ │ │ │
│ │ │<───┘ │
│ │ │ │
│ │ │ 8. Simpan │
│ │ │ Pemesanan │
│ │ │───────────────────>│
│ │ │ │
│ │ │ 9. Return: │
│ │ │ ID Pemesanan │
│ │ │<───────────────────│
│ │ │ │
│ │ 10. Tampilkan │ │
│ │ Notifikasi │ │
│ │ Sukses │ │
│ │<──────────────────│ │
│ │ │ │
│ 11. Lihat │ │ │
│ Konfirmasi │ │ │
│<────────────────────│ │ │
│ │ │ │
┌───────────────┐
│ START │
└───────┬───────┘
│
▼
┌───────────────────────┐
│ Admin Login ke │
│ Sistem │
└───────────┬───────────┘
│
▼
┌───────────────────────┐
│ Pilih Menu │
│ "Pemesanan Baru" │
└───────────┬───────────┘
│
▼
┌───────────────────────┐
│ Pilih Pelanggan │
│ dari Daftar │
└───────────┬───────────┘
│
▼
┌───────────────────────┐
│ Pilih Lapangan │
│ yang Diinginkan │
└───────────┬───────────┘
│
▼
┌───────────────────────┐
│ Input Tanggal & │
│ Waktu Sewa │
└───────────┬───────────┘
│
▼
◇───────────────◇
╱ ╲
╱ Lapangan ╲
╱ Tersedia? ╲
╲ ╱
╲ ╱
╲ ╱
Tidak ◇───────────────◇ Ya
│ │
▼ ▼
┌───────────────────┐ ┌───────────────────────┐
│ Tampilkan │ │ Hitung Total │
│ Pesan Error │ │ Harga Sewa │
│ "Tidak Tersedia"│ └───────────┬───────────┘
└─────────┬─────────┘ │
│ ▼
│ ┌───────────────────────┐
│ │ Pilih Metode │
│ │ Pembayaran │
│ └───────────┬───────────┘
│ │
│ ▼
│ ┌───────────────────────┐
│ │ Konfirmasi Data │
│ │ Pemesanan │
│ └───────────┬───────────┘
│ │
│ ▼
│ ◇───────────────◇
│ ╱ ╲
│ ╱ Data Benar? ╲
│ ╲ ╱
│ ╲ ╱
│ Tidak ◇───────────────◇ Ya
│ │ │
│ │ ▼
│ │ ┌───────────────────────┐
│ │ │ Simpan Data ke │
│ │ │ Database │
│ │ └───────────┬───────────┘
│ │ │
│ │ ▼
│ │ ┌───────────────────────┐
│ │ │ Tampilkan Notifikasi│
│ │ │ "Pemesanan Berhasil"│
│ │ └───────────┬───────────┘
│ │ │
└───────────────┴───────────────┘
│
▼
┌───────────────┐
│ END │
└───────────────┘
┌─────────────────────────────────────┐ ┌─────────────────────────────────────┐
│ Pelanggan │ │ Lapangan │
├─────────────────────────────────────┤ ├─────────────────────────────────────┤
│ - id: string │ │ - id: string │
│ - nama: string │ │ - nama: string │
│ - email: string │ │ - tipe: TipeLapangan │
│ - telepon: string │ │ - hargaPerJam: number │
│ - alamat: string │ │ - status: StatusLapangan │
│ - tanggalDaftar: Date │ │ - fasilitas: string[] │
│ - totalPemesanan: number │ │ - deskripsi: string │
├─────────────────────────────────────┤ ├─────────────────────────────────────┤
│ + getId(): string │ │ + getId(): string │
│ + getNama(): string │ │ + getNama(): string │
│ + getEmail(): string │ │ + getHarga(): number │
│ + getTelepon(): string │ │ + getStatus(): StatusLapangan │
│ + setNama(nama: string): void │ │ + setStatus(s: StatusLapangan): void│
│ + setEmail(email: string): void │ │ + getTipe(): TipeLapangan │
│ + setTelepon(tel: string): void │ │ + isAvailable(): boolean │
└──────────────────┬──────────────────┘ └──────────────────┬──────────────────┘
│ │
│ 1 │ 1
│ │
│ * │ *
▼ ▼
┌─────────────────────────────────────────────────────────────────────────────────┐
│ Pemesanan │
├─────────────────────────────────────────────────────────────────────────────────┤
│ - id: string │
│ - pelanggan: Pelanggan │
│ - lapangan: Lapangan │
│ - tanggal: Date │
│ - jamMulai: string │
│ - jamSelesai: string │
│ - durasi: number │
│ - totalHarga: number │
│ - status: StatusPemesanan │
│ - metodePembayaran: MetodePembayaran │
│ - createdAt: Date │
├─────────────────────────────────────────────────────────────────────────────────┤
│ + getId(): string │
│ + getPelanggan(): Pelanggan │
│ + getLapangan(): Lapangan │
│ + hitungTotal(): number │
│ + konfirmasi(): void │
│ + batalkan(): void │
│ + selesai(): void │
│ + getStatus(): StatusPemesanan │
└─────────────────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────┐ ┌──────────────────────────────┐ ┌──────────────────────────────┐
│ <> │ │ <> │ │ <> │
│ TipeLapangan │ │ StatusLapangan │ │ StatusPemesanan │
├──────────────────────────────┤ ├──────────────────────────────┤ ├──────────────────────────────┤
│ INDOOR │ │ TERSEDIA │ │ PENDING │
│ OUTDOOR │ │ DIPESAN │ │ DIKONFIRMASI │
│ │ │ MAINTENANCE │ │ SELESAI │
│ │ │ │ │ DIBATALKAN │
└──────────────────────────────┘ └──────────────────────────────┘ └──────────────────────────────┘
┌──────────────────────────────┐
│ <> │
│ MetodePembayaran │
├──────────────────────────────┤
│ TRANSFER │
│ CASH │
│ E_WALLET │
└──────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────────┐ │ <> │ │ CLOUD HOSTING SERVER │ │ │ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │ │ < > │ │ │ │ APPLICATION SERVER │ │ │ │ │ │ │ │ ┌─────────────────────────┐ ┌─────────────────────────┐ │ │ │ │ │ < > │ │ < > │ │ │ │ │ │ REACT FRONTEND │ │ API BACKEND │ │ │ │ │ │ │ │ (Edge Functions) │ │ │ │ │ │ ┌─────────────────┐ │ │ │ │ │ │ │ │ │ Dashboard.tsx │ │ │ ┌─────────────────┐ │ │ │ │ │ │ │ Lapangan.tsx │ │ HTTP │ │ auth.ts │ │ │ │ │ │ │ │ Pemesanan.tsx │────│──────│──│ lapangan.ts │ │ │ │ │ │ │ │ Pelanggan.tsx │ │ │ │ pemesanan.ts │ │ │ │ │ │ │ │ Components/ │ │ │ │ pelanggan.ts │ │ │ │ │ │ │ └─────────────────┘ │ │ └────────┬────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────┘ └───────────│─────────────┘ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────│──────────────────────────┘ │ │ │ │ │ ┌────────────────────────────────────────────────│──────────────────────────┐ │ │ │ < > │ │ │ │ │ PostgreSQL │ │ │ │ │ ▼ │ │ │ │ ┌───────────────────────────────────────────────────────────────┐ │ │ │ │ │ TABLES: │ │ │ │ │ │ ├── pelanggan (Master) │ │ │ │ │ │ ├── lapangan (Master) │ │ │ │ │ │ └── pemesanan (Transaksi) │ │ │ │ │ └───────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────────────┘ ▲ │ HTTPS │ ┌───────────────────────────────┴───────────────────────────────┐ │ │ ▼ ▼ ┌─────────────────────────┐ ┌─────────────────────────┐ │ < > │ │ < > │ │ ADMIN COMPUTER │ │ ADMIN MOBILE │ │ │ │ │ │ ┌───────────────────┐ │ │ ┌───────────────────┐ │ │ │ WEB BROWSER │ │ │ │ WEB BROWSER │ │ │ │ │ │ │ │ │ │ │ │ Chrome / Edge / │ │ │ │ Safari / Chrome │ │ │ │ Firefox │ │ │ │ Mobile │ │ │ └───────────────────┘ │ │ └───────────────────┘ │ │ │ │ │ └─────────────────────────┘ └─────────────────────────┘
| No | Skenario Pengujian | Test Case | Hasil yang Diharapkan | Status |
|---|---|---|---|---|
| 1 | Menampilkan daftar lapangan | Akses halaman /lapangan | Semua lapangan ditampilkan dalam bentuk card dengan informasi nama, tipe, harga, dan status | ✓ Berhasil |
| 2 | Menambah lapangan baru dengan data valid | Klik tombol "Tambah Lapangan", isi semua field dengan data valid (nama, tipe, harga, deskripsi), klik Simpan | Muncul notifikasi sukses "Lapangan berhasil ditambahkan", lapangan baru muncul di daftar | ✓ Berhasil |
| 3 | Menambah lapangan dengan field kosong | Buka form tambah lapangan, biarkan field nama kosong, klik Simpan | Muncul pesan validasi error "Nama lapangan wajib diisi" | ✓ Berhasil |
| 4 | Filter lapangan berdasarkan status | Pilih filter dropdown "Tersedia" | Hanya lapangan dengan status "Tersedia" yang ditampilkan | ✓ Berhasil |
| 5 | Pencarian lapangan | Ketik "VIP" di kolom pencarian | Hanya lapangan yang mengandung kata "VIP" yang ditampilkan | ✓ Berhasil |
| 6 | Edit lapangan | Klik tombol edit pada salah satu lapangan, ubah harga menjadi Rp 200.000, klik Simpan | Data lapangan terupdate, notifikasi sukses muncul | ✓ Berhasil |
| 7 | Hapus lapangan | Klik tombol hapus pada lapangan yang tidak memiliki pemesanan aktif | Konfirmasi muncul, setelah konfirmasi lapangan terhapus dari daftar | ✓ Berhasil |
| No | Skenario Pengujian | Test Case | Hasil yang Diharapkan | Status |
|---|---|---|---|---|
| 1 | Menampilkan daftar pemesanan | Akses halaman /pemesanan | Semua pemesanan ditampilkan dalam tabel dengan kolom ID, Pelanggan, Lapangan, Tanggal, Waktu, Total, Status, dan Aksi | ✓ Berhasil |
| 2 | Membuat pemesanan baru dengan data valid | Klik "Pemesanan Baru", pilih pelanggan, pilih lapangan, isi tanggal 25 Des 2024, durasi 2 jam, jam mulai 08:00, metode Transfer, klik Simpan | Muncul notifikasi sukses "Pemesanan berhasil dibuat", pemesanan baru muncul di tabel dengan status "Pending" | ✓ Berhasil |
| 3 | Membuat pemesanan saat lapangan tidak tersedia | Buat pemesanan untuk lapangan yang sudah dipesan pada waktu yang sama | Muncul pesan error "Lapangan tidak tersedia pada waktu tersebut" | ✓ Berhasil |
| 4 | Konfirmasi pemesanan pending | Klik tombol centang (✓) pada pemesanan berstatus "Pending" | Status berubah menjadi "Dikonfirmasi", notifikasi sukses muncul | ✓ Berhasil |
| 5 | Batalkan pemesanan | Klik tombol X pada pemesanan berstatus "Pending" | Status berubah menjadi "Dibatalkan", notifikasi muncul | ✓ Berhasil |
| 6 | Lihat detail pemesanan | Klik icon mata (👁️) pada salah satu pemesanan | Muncul dialog/modal dengan detail lengkap pemesanan termasuk data pelanggan, lapangan, jadwal, dan total harga | ✓ Berhasil |
| 7 | Filter berdasarkan status | Pilih filter "Dikonfirmasi" dari dropdown | Hanya pemesanan berstatus "Dikonfirmasi" yang ditampilkan | ✓ Berhasil |
| 8 | Pencarian pemesanan | Ketik "TR001" di kolom pencarian | Hanya pemesanan dengan ID "TR001" yang ditampilkan | ✓ Berhasil |
Berdasarkan hasil pengujian Black Box Testing yang dilakukan pada 2 halaman utama sistem (Lapangan dan Pemesanan), seluruh 15 test case berhasil dijalankan dengan hasil sesuai yang diharapkan. Sistem Penyewaan Lapangan Voli berjalan dengan baik dan siap untuk digunakan. Semua fitur CRUD (Create, Read, Update, Delete) berfungsi dengan benar, validasi form bekerja sesuai harapan, dan interaksi pengguna responsif.