# 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