From 69e9a6401466375e60ca9b6375517c4eea3bfe1d Mon Sep 17 00:00:00 2001 From: ardhikaxx Date: Wed, 25 Feb 2026 08:12:49 +0700 Subject: [PATCH] docs: tambahkan dokumentasi 5 activity diagram lengkap dengan panduan draw.io --- activity-diagram.md | 693 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 693 insertions(+) create mode 100644 activity-diagram.md diff --git a/activity-diagram.md b/activity-diagram.md new file mode 100644 index 0000000..90b4a6c --- /dev/null +++ b/activity-diagram.md @@ -0,0 +1,693 @@ +# Activity Diagram - Sistem Tiket & Booking Banyu Biru + +## Daftar Isi +1. [Overview](#overview) +2. [Activity Diagram 1: Proses Pembelian Tiket](#activity-diagram-1-proses-pembelian-tiket) +3. [Activity Diagram 2: Proses Verifikasi Pembayaran Tiket](#activity-diagram-2-proses-verifikasi-pembayaran-tiket) +4. [Activity Diagram 3: Proses Booking Tempat](#activity-diagram-3-proses-booking-tempat) +5. [Activity Diagram 4: Proses Verifikasi Tiket dengan QR Code](#activity-diagram-4-proses-verifikasi-tiket-dengan-qr-code) +6. [Activity Diagram 5: Proses Login](#activity-diagram-5-proses-login) +7. [Panduan Membuat Diagram di Draw.io](#panduan-membuat-diagram-di-drawio) + +--- + +## Overview + +Activity diagram menggambarkan alur aktivitas dalam sistem dari awal hingga akhir. Dokumen ini menyediakan 5 activity diagram utama yang mencakup proses bisnis penting dalam sistem. + +**Notasi yang Digunakan**: +- **Initial Node** (●): Titik awal aktivitas +- **Activity** (Rounded Rectangle): Aktivitas/aksi yang dilakukan +- **Decision** (◇): Percabangan keputusan +- **Fork/Join** (Bar): Aktivitas paralel +- **Final Node** (◎): Titik akhir aktivitas +- **Swimlane**: Pembagian tanggung jawab (User, System, Admin) + +--- + +## Activity Diagram 1: Proses Pembelian Tiket + +### Deskripsi +Menggambarkan alur lengkap pembelian tiket dari user mulai dari memilih tiket hingga upload bukti pembayaran. + +### Swimlanes +1. **User** - Pengguna yang membeli tiket +2. **System** - Sistem aplikasi +3. **Payment Gateway** - Sistem pembayaran (eksternal) + +### Alur Aktivitas + +``` +[START] +│ +├─ User: Login ke sistem +│ +├─ System: Validasi kredensial +│ +├─ Decision: Login berhasil? +│ ├─ [NO] → Tampilkan error → [END] +│ └─ [YES] ↓ +│ +├─ System: Tampilkan halaman pembelian tiket +│ +├─ User: Pilih tanggal kunjungan +│ +├─ System: Validasi tanggal +│ +├─ Decision: Tanggal valid? +│ ├─ [NO] → Tampilkan error tanggal → Kembali ke pilih tanggal +│ └─ [YES] ↓ +│ +├─ User: Pilih jenis tiket +│ +├─ User: Tentukan jumlah tiket +│ +├─ System: Hitung total harga +│ +├─ System: Tampilkan ringkasan pesanan +│ +├─ User: Konfirmasi pesanan +│ +├─ System: Generate kode order unik (AT-XXXXX) +│ +├─ System: Generate QR code untuk setiap tiket +│ +├─ System: Simpan data order dengan status "pending" +│ +├─ System: Tampilkan halaman pembayaran +│ +├─ System: Tampilkan nomor rekening bank +│ +├─ User: Melakukan transfer ke rekening +│ +├─ User: Upload bukti pembayaran +│ +├─ System: Validasi file bukti pembayaran +│ +├─ Decision: File valid? +│ ├─ [NO] → Tampilkan error format → Kembali ke upload +│ └─ [YES] ↓ +│ +├─ System: Simpan bukti pembayaran +│ +├─ System: Update status order tetap "pending" +│ +├─ System: Tampilkan halaman download tiket +│ +├─ System: Tampilkan pesan "Menunggu verifikasi admin" +│ +└─ [END] +``` + +### Decision Points +1. **Login berhasil?** - Validasi email dan password +2. **Tanggal valid?** - Cek apakah tanggal >= hari ini +3. **File valid?** - Cek format dan ukuran file + +### Catatan +- QR code di-generate untuk setiap item tiket +- User bisa download tiket tapi tombol disabled sampai dikonfirmasi +- Status order: pending → menunggu verifikasi admin + +--- + +## Activity Diagram 2: Proses Verifikasi Pembayaran Tiket + +### Deskripsi +Menggambarkan alur verifikasi pembayaran tiket oleh admin. + +### Swimlanes +1. **Admin** - Administrator yang memverifikasi +2. **System** - Sistem aplikasi +3. **User** - Pemilik tiket (menerima notifikasi) + +### Alur Aktivitas + +``` +[START] +│ +├─ Admin: Login ke dashboard admin +│ +├─ System: Tampilkan dashboard +│ +├─ Admin: Akses menu "Pesanan Tiket" +│ +├─ System: Tampilkan daftar pesanan tiket +│ +├─ System: Tampilkan filter status (pending/confirmed/rejected) +│ +├─ Admin: Filter pesanan dengan status "pending" +│ +├─ System: Tampilkan pesanan pending +│ +├─ Admin: Pilih pesanan yang akan diverifikasi +│ +├─ System: Tampilkan detail pesanan +│ +├─ System: Tampilkan bukti pembayaran +│ +├─ System: Tampilkan data user dan tiket +│ +├─ Admin: Periksa bukti pembayaran +│ +├─ Admin: Periksa kesesuaian nominal +│ +├─ Decision: Pembayaran valid? +│ │ +│ ├─ [YES] → Admin: Klik tombol "Konfirmasi" +│ │ │ +│ │ ├─ System: Update status order menjadi "confirmed" +│ │ │ +│ │ ├─ System: Simpan waktu konfirmasi (confirmed_at) +│ │ │ +│ │ ├─ System: Simpan ID admin yang konfirmasi (confirmed_by) +│ │ │ +│ │ ├─ System: Hitung ke total pendapatan +│ │ │ +│ │ ├─ System: Aktifkan tombol download tiket untuk user +│ │ │ +│ │ ├─ System: Tampilkan notifikasi sukses +│ │ │ +│ │ └─ [END] +│ │ +│ └─ [NO] → Admin: Klik tombol "Tolak" +│ │ +│ ├─ System: Tampilkan form alasan penolakan +│ │ +│ ├─ Admin: Isi alasan penolakan +│ │ +│ ├─ Admin: Konfirmasi penolakan +│ │ +│ ├─ System: Update status order menjadi "rejected" +│ │ +│ ├─ System: Simpan alasan penolakan (rejection_note) +│ │ +│ ├─ System: Tampilkan notifikasi penolakan +│ │ +│ ├─ System: User bisa upload ulang bukti pembayaran +│ │ +│ └─ [END] +``` + +### Decision Points +1. **Pembayaran valid?** - Admin memutuskan berdasarkan bukti transfer + +### Catatan +- Admin bisa konfirmasi atau tolak pembayaran +- Jika ditolak, user bisa upload ulang bukti +- Hanya pesanan "confirmed" yang masuk ke laporan pendapatan + +--- + +## Activity Diagram 3: Proses Booking Tempat + +### Deskripsi +Menggambarkan alur booking tempat (pendopo) oleh user. + +### Swimlanes +1. **User** - Pengguna yang booking +2. **System** - Sistem aplikasi + +### Alur Aktivitas + +``` +[START] +│ +├─ User: Login ke sistem +│ +├─ System: Validasi kredensial +│ +├─ Decision: Login berhasil? +│ ├─ [NO] → Tampilkan error → [END] +│ └─ [YES] ↓ +│ +├─ System: Tampilkan halaman booking +│ +├─ System: Tampilkan informasi tempat (Pendopo) +│ +├─ System: Tampilkan harga per hari +│ +├─ User: Pilih tanggal booking +│ +├─ System: Cek ketersediaan tanggal +│ +├─ System: Query database untuk tanggal tersebut +│ +├─ Decision: Tanggal tersedia? +│ ├─ [NO] → System: Tampilkan pesan "Tanggal sudah dibooking" +│ │ └─ Kembali ke pilih tanggal +│ └─ [YES] ↓ +│ +├─ Decision: Tanggal >= hari ini? +│ ├─ [NO] → System: Tampilkan error "Tanggal sudah lewat" +│ │ └─ Kembali ke pilih tanggal +│ └─ [YES] ↓ +│ +├─ User: Isi nama pengunjung +│ +├─ User: Isi nomor telepon +│ +├─ User: Isi alamat +│ +├─ User: Isi catatan (opsional) +│ +├─ System: Validasi data input +│ +├─ Decision: Data valid? +│ ├─ [NO] → Tampilkan error validasi → Kembali ke form +│ └─ [YES] ↓ +│ +├─ System: Hitung total harga +│ +├─ System: Tampilkan ringkasan booking +│ +├─ User: Konfirmasi booking +│ +├─ System: Generate kode booking unik (AB-XXXXX) +│ +├─ System: Simpan data booking dengan status "pending" +│ +├─ System: Block tanggal untuk booking lain +│ +├─ System: Tampilkan halaman pembayaran +│ +├─ System: Tampilkan nomor rekening bank +│ +├─ User: Melakukan transfer +│ +├─ User: Upload bukti pembayaran +│ +├─ System: Validasi file +│ +├─ Decision: File valid? +│ ├─ [NO] → Tampilkan error → Kembali ke upload +│ └─ [YES] ↓ +│ +├─ System: Simpan bukti pembayaran +│ +├─ System: Tampilkan halaman status booking +│ +├─ System: Tampilkan pesan "Menunggu verifikasi admin" +│ +└─ [END] +``` + +### Decision Points +1. **Login berhasil?** - Validasi kredensial +2. **Tanggal tersedia?** - Cek di database apakah sudah dibooking +3. **Tanggal >= hari ini?** - Validasi tanggal tidak boleh masa lalu +4. **Data valid?** - Validasi form input +5. **File valid?** - Validasi bukti pembayaran + +### Catatan +- Satu tempat hanya bisa dibooking 1x per tanggal +- Tanggal otomatis ter-block setelah booking dibuat +- Status awal selalu "pending" + +--- + +## Activity Diagram 4: Proses Verifikasi Tiket dengan QR Code + +### Deskripsi +Menggambarkan alur verifikasi tiket menggunakan QR code scanner di pintu masuk. + +### Swimlanes +1. **Admin/Petugas** - Petugas di pintu masuk +2. **System** - Sistem aplikasi +3. **User** - Pengunjung dengan tiket + +### Alur Aktivitas + +``` +[START] +│ +├─ User: Datang ke pintu masuk dengan tiket +│ +├─ Admin: Login ke sistem verifikasi +│ +├─ System: Tampilkan halaman verifikasi tiket +│ +├─ System: Tampilkan pilihan metode verifikasi +│ +├─ Decision: Metode verifikasi? +│ │ +│ ├─ [Scan QR] → System: Aktifkan kamera +│ │ │ +│ │ ├─ System: Tampilkan scanner QR +│ │ │ +│ │ ├─ Admin: Arahkan kamera ke QR code tiket +│ │ │ +│ │ ├─ System: Baca QR code +│ │ │ +│ │ ├─ System: Ekstrak kode tiket dari QR +│ │ │ +│ │ └─ [Lanjut ke Validasi] +│ │ +│ └─ [Input Manual] → Admin: Ketik kode tiket +│ │ +│ ├─ System: Terima input kode +│ │ +│ └─ [Lanjut ke Validasi] +│ +├─ [Validasi] +│ +├─ System: Cari tiket berdasarkan kode +│ +├─ Decision: Tiket ditemukan? +│ ├─ [NO] → System: Tampilkan error "Tiket tidak ditemukan" +│ │ └─ [END] +│ └─ [YES] ↓ +│ +├─ System: Ambil data tiket dari database +│ +├─ System: Cek status order tiket +│ +├─ Decision: Order sudah dikonfirmasi? +│ ├─ [NO] → System: Tampilkan pesan "Pembayaran belum dikonfirmasi" +│ │ │ +│ │ ├─ System: Tampilkan status "Pending" +│ │ │ +│ │ └─ [END] +│ └─ [YES] ↓ +│ +├─ System: Cek status penggunaan tiket +│ +├─ Decision: Tiket sudah dipakai? +│ ├─ [YES] → System: Tampilkan peringatan "Tiket sudah digunakan" +│ │ │ +│ │ ├─ System: Tampilkan waktu penggunaan +│ │ │ +│ │ ├─ System: Tampilkan badge merah "Sudah Dipakai" +│ │ │ +│ │ └─ [END] +│ └─ [NO] ↓ +│ +├─ System: Tampilkan detail tiket +│ +├─ System: Tampilkan data pengunjung +│ +├─ System: Tampilkan tanggal kunjungan +│ +├─ System: Tampilkan badge hijau "Valid" +│ +├─ Admin: Verifikasi data pengunjung +│ +├─ Decision: Data sesuai? +│ ├─ [NO] → Admin: Tolak masuk +│ │ └─ [END] +│ └─ [YES] ↓ +│ +├─ Admin: Klik tombol "Tandai Sebagai Dipakai" +│ +├─ System: Update field is_used = true +│ +├─ System: Simpan waktu penggunaan (used_at) +│ +├─ System: Tampilkan notifikasi sukses +│ +├─ System: Hide kamera scanner +│ +├─ System: Tampilkan tombol "Scan Lagi" +│ +├─ Admin: Izinkan pengunjung masuk +│ +└─ [END] +``` + +### Decision Points +1. **Metode verifikasi?** - Scan QR atau input manual +2. **Tiket ditemukan?** - Cek keberadaan kode di database +3. **Order sudah dikonfirmasi?** - Cek status pembayaran +4. **Tiket sudah dipakai?** - Cek status penggunaan +5. **Data sesuai?** - Admin verifikasi manual + +### Catatan +- Tiket hanya bisa dipakai 1x +- Sistem otomatis hide kamera setelah scan berhasil +- Admin bisa scan lagi dengan klik tombol "Scan Lagi" + +--- + +## Activity Diagram 5: Proses Login + +### Deskripsi +Menggambarkan alur login user dan admin ke sistem. + +### Swimlanes +1. **User/Admin** - Pengguna yang login +2. **System** - Sistem aplikasi +3. **Database** - Database sistem + +### Alur Aktivitas + +``` +[START] +│ +├─ User: Akses halaman login +│ +├─ System: Tampilkan form login +│ +├─ User: Masukkan email +│ +├─ User: Masukkan password +│ +├─ User: Klik tombol "Login" +│ +├─ System: Validasi format email +│ +├─ Decision: Format email valid? +│ ├─ [NO] → System: Tampilkan error "Format email salah" +│ │ └─ Kembali ke form login +│ └─ [YES] ↓ +│ +├─ System: Validasi password tidak kosong +│ +├─ Decision: Password terisi? +│ ├─ [NO] → System: Tampilkan error "Password wajib diisi" +│ │ └─ Kembali ke form login +│ └─ [YES] ↓ +│ +├─ System: Query database untuk email +│ +├─ Database: Cari user berdasarkan email +│ +├─ Decision: User ditemukan? +│ ├─ [NO] → System: Tampilkan error "Email tidak terdaftar" +│ │ └─ Kembali ke form login +│ └─ [YES] ↓ +│ +├─ System: Ambil data user dari database +│ +├─ System: Verifikasi password (hash comparison) +│ +├─ Decision: Password cocok? +│ ├─ [NO] → System: Tampilkan error "Password salah" +│ │ └─ Kembali ke form login +│ └─ [YES] ↓ +│ +├─ System: Buat session untuk user +│ +├─ System: Simpan data user ke session +│ +├─ System: Cek role user +│ +├─ Decision: Role user? +│ │ +│ ├─ [Admin] → System: Redirect ke dashboard admin +│ │ │ +│ │ ├─ System: Tampilkan statistik +│ │ │ +│ │ ├─ System: Tampilkan grafik +│ │ │ +│ │ └─ [END] +│ │ +│ └─ [User] → System: Redirect ke halaman beranda +│ │ +│ ├─ System: Tampilkan menu tiket & booking +│ │ +│ ├─ System: Tampilkan dropdown user +│ │ +│ └─ [END] +``` + +### Decision Points +1. **Format email valid?** - Validasi format email +2. **Password terisi?** - Validasi password tidak kosong +3. **User ditemukan?** - Cek keberadaan email di database +4. **Password cocok?** - Verifikasi hash password +5. **Role user?** - Tentukan redirect berdasarkan role + +### Catatan +- Password di-hash menggunakan bcrypt +- Session disimpan untuk maintain login state +- Redirect berbeda untuk admin dan user + +--- + +## Panduan Membuat Diagram di Draw.io + +### Langkah 1: Setup Canvas +1. Buka draw.io +2. Pilih "Blank Diagram" +3. Aktifkan library "UML" dari menu More Shapes +4. Set ukuran canvas: A4 Portrait atau Landscape + +### Langkah 2: Buat Swimlanes +1. Drag "Swimlane" dari library UML +2. Buat 2-3 swimlanes sesuai kebutuhan: + - **Vertical Swimlanes** untuk actor yang berbeda + - Contoh: User | System | Admin +3. Beri label pada setiap swimlane +4. Atur lebar swimlane agar proporsional + +### Langkah 3: Tambahkan Initial Node +1. Drag "Initial Node" (lingkaran hitam penuh) +2. Letakkan di bagian atas swimlane pertama +3. Ini adalah titik awal aktivitas + +### Langkah 4: Tambahkan Activities +1. Drag "Activity" (rounded rectangle) dari library +2. Buat activity untuk setiap langkah: + - Gunakan verb + object (contoh: "Pilih tanggal", "Validasi data") + - Letakkan di swimlane yang sesuai +3. Hubungkan dengan arrow (Control Flow) + +### Langkah 5: Tambahkan Decision Nodes +1. Drag "Decision" (diamond/rhombus) +2. Gunakan untuk percabangan kondisi +3. Beri label kondisi pada setiap arrow keluar: + - [YES] atau [NO] + - [Valid] atau [Invalid] +4. Merge kembali dengan "Merge Node" jika perlu + +### Langkah 6: Tambahkan Fork/Join (Opsional) +1. Drag "Fork" (horizontal bar) untuk aktivitas paralel +2. Gunakan "Join" untuk menggabungkan kembali +3. Contoh: Generate QR code untuk multiple tiket secara bersamaan + +### Langkah 7: Tambahkan Final Node +1. Drag "Final Node" (lingkaran dengan lingkaran dalam) +2. Letakkan di akhir alur +3. Bisa ada multiple final nodes untuk berbagai ending + +### Langkah 8: Hubungkan dengan Control Flow +1. Gunakan arrow untuk menghubungkan nodes +2. Pastikan arah flow jelas (top to bottom) +3. Hindari crossing lines jika memungkinkan + +### Tips Styling + +#### Warna Swimlanes +- **User/Admin**: Biru muda (#E3F2FD) +- **System**: Hijau muda (#E8F5E9) +- **Database**: Abu-abu muda (#F5F5F5) +- **External**: Kuning muda (#FFF9C4) + +#### Warna Activities +- **Normal Activity**: Putih dengan border hitam +- **Important Activity**: Hijau teal (#14B8A6) +- **Error/Reject**: Merah muda (#FFCDD2) +- **Success**: Hijau muda (#C8E6C9) + +#### Warna Decision +- **Decision Node**: Kuning (#FFF59D) +- **Merge Node**: Abu-abu (#E0E0E0) + +#### Font +- **Activity Label**: Arial, 11pt, Bold +- **Decision Label**: Arial, 10pt, Italic +- **Swimlane Label**: Arial, 12pt, Bold + +### Best Practices + +1. **Konsistensi**: + - Gunakan ukuran yang sama untuk semua activity nodes + - Gunakan spacing yang konsisten + - Align nodes menggunakan grid + +2. **Clarity**: + - Gunakan label yang jelas dan singkat + - Hindari terlalu banyak crossing lines + - Gunakan warna untuk membedakan jenis aktivitas + +3. **Flow Direction**: + - Utamakan top-to-bottom flow + - Gunakan left-to-right untuk swimlanes + - Loop back dengan arrow yang jelas + +4. **Decision Nodes**: + - Selalu beri label pada setiap branch + - Gunakan [YES]/[NO] atau [Valid]/[Invalid] + - Pastikan semua branch memiliki ending + +5. **Swimlanes**: + - Letakkan aktivitas di swimlane yang tepat + - Crossing swimlane menunjukkan interaksi + - Jangan terlalu banyak swimlanes (max 4) + +### Contoh Layout + +``` +┌─────────────┬──────────────┬─────────────┐ +│ User │ System │ Admin │ +├─────────────┼──────────────┼─────────────┤ +│ │ │ │ +│ (●) │ │ │ +│ │ │ │ │ +│ ▼ │ │ │ +│ ┌─────┐ │ │ │ +│ │Login│────┼──────────────┼────────────▶│ +│ └─────┘ │ │ │ +│ │ ┌──────┐ │ │ +│ │ │Validasi │ │ +│ │ └──────┘ │ │ +│ │ │ │ │ +│ │ ▼ │ │ +│ │ ◇Valid? │ │ +│ │ / \ │ │ +│ │ NO YES │ │ +│ │ │ │ │ │ +│ │ ▼ ▼ │ │ +│ │Error Success│ │ +│ │ │ │ │ │ +│ │ ▼ ▼ │ │ +│ │ (◎) (◎) │ │ +└─────────────┴──────────────┴─────────────┘ +``` + +--- + +## Checklist Sebelum Finalisasi + +- [ ] Semua aktivitas memiliki label yang jelas +- [ ] Semua decision nodes memiliki label kondisi +- [ ] Flow direction konsisten (top-to-bottom) +- [ ] Tidak ada aktivitas yang "menggantung" (tanpa input/output) +- [ ] Swimlanes sudah sesuai dengan actor +- [ ] Warna sudah konsisten +- [ ] Initial dan Final nodes sudah ada +- [ ] Spacing dan alignment rapi +- [ ] Tidak terlalu banyak crossing lines +- [ ] Diagram mudah dibaca dan dipahami + +--- + +## Summary + +**Total Activity Diagrams**: 5 + +1. **Proses Pembelian Tiket** - 3 swimlanes, ~25 activities +2. **Proses Verifikasi Pembayaran Tiket** - 3 swimlanes, ~15 activities +3. **Proses Booking Tempat** - 2 swimlanes, ~30 activities +4. **Proses Verifikasi Tiket dengan QR Code** - 3 swimlanes, ~25 activities +5. **Proses Login** - 3 swimlanes, ~15 activities + +**Total Activities**: ~110 activities +**Total Decision Points**: ~20 decisions +**Total Swimlanes**: 8 (across all diagrams) + +--- + +**Dibuat**: 25 Februari 2026 +**Versi**: 1.0 +**Sistem**: Banyu Biru Ticketing & Booking System