346 lines
9.0 KiB
Markdown
346 lines
9.0 KiB
Markdown
# Flowchart - Fitur Riwayat User
|
|
|
|
## Daftar Isi
|
|
1. [Lihat Riwayat Tiket](#1-lihat-riwayat-tiket)
|
|
2. [Lihat Riwayat Booking](#2-lihat-riwayat-booking)
|
|
3. [Lihat Detail Tiket dari Riwayat](#3-lihat-detail-tiket-dari-riwayat)
|
|
4. [Lihat Detail Booking dari Riwayat](#4-lihat-detail-booking-dari-riwayat)
|
|
|
|
---
|
|
|
|
## 1. Lihat Riwayat Tiket
|
|
|
|
### Deskripsi
|
|
Flowchart untuk user melihat riwayat pembelian tiket.
|
|
|
|
### Flowchart
|
|
|
|
```
|
|
START
|
|
↓
|
|
{User sudah login?}
|
|
├─ NO → [Redirect ke halaman login] → END
|
|
└─ YES ↓
|
|
↓
|
|
{User adalah admin?}
|
|
├─ YES → [Redirect ke dashboard admin] → END
|
|
└─ NO ↓
|
|
↓
|
|
[User klik menu "Tiket Saya" di dropdown navbar]
|
|
↓
|
|
[Query database: ticket_orders]
|
|
↓
|
|
[Filter: user_id = user yang login]
|
|
↓
|
|
[Include relasi: items.ticket]
|
|
↓
|
|
[Urutkan: created_at DESC]
|
|
↓
|
|
[Pagination: 10 data per halaman]
|
|
↓
|
|
{Ada data tiket?}
|
|
├─ NO → [Tampilkan pesan: "Belum ada riwayat pembelian tiket"]
|
|
│ ↓
|
|
│ [Tampilkan tombol "Beli Tiket Sekarang"]
|
|
│ ↓
|
|
│ END
|
|
└─ YES ↓
|
|
↓
|
|
[Loop untuk setiap order:]
|
|
↓
|
|
┌─────────────────────────┐
|
|
│ [Tampilkan card order:]
|
|
│ - Kode Order
|
|
│ - Tanggal Kunjungan
|
|
│ - Total Qty
|
|
│ - Total Harga
|
|
│ - Status (badge warna)
|
|
│ - Tanggal Order
|
|
│ ↓
|
|
│ [Tampilkan daftar tiket dalam order]
|
|
│ ↓
|
|
│ {Status = 'confirmed'?}
|
|
│ ├─ YES → [Tampilkan tombol "Download Tiket"]
|
|
│ │ ↓
|
|
│ │ [Tampilkan tombol "Lihat Detail"]
|
|
│ │
|
|
│ ├─ Status = 'pending' → [Tampilkan badge "Menunggu Verifikasi"]
|
|
│ │ ↓
|
|
│ │ [Tampilkan tombol "Lihat Detail"]
|
|
│ │
|
|
│ └─ Status = 'rejected' → [Tampilkan badge "Ditolak"]
|
|
│ ↓
|
|
│ [Tampilkan tombol "Upload Ulang"]
|
|
│ ↓
|
|
│ [Ulangi untuk order berikutnya]
|
|
└─────────────────────────┘
|
|
↓
|
|
[Tampilkan pagination]
|
|
↓
|
|
END
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Lihat Riwayat Booking
|
|
|
|
### Deskripsi
|
|
Flowchart untuk user melihat riwayat booking pendopo.
|
|
|
|
### Flowchart
|
|
|
|
```
|
|
START
|
|
↓
|
|
{User sudah login?}
|
|
├─ NO → [Redirect ke halaman login] → END
|
|
└─ YES ↓
|
|
↓
|
|
{User adalah admin?}
|
|
├─ YES → [Redirect ke dashboard admin] → END
|
|
└─ NO ↓
|
|
↓
|
|
[User klik menu "Booking Saya" di dropdown navbar]
|
|
↓
|
|
[Query database: bookings]
|
|
↓
|
|
[Filter: user_id = user yang login]
|
|
↓
|
|
[Include relasi: place]
|
|
↓
|
|
[Urutkan: created_at DESC]
|
|
↓
|
|
[Pagination: 10 data per halaman]
|
|
↓
|
|
{Ada data booking?}
|
|
├─ NO → [Tampilkan pesan: "Belum ada riwayat booking"]
|
|
│ ↓
|
|
│ [Tampilkan tombol "Booking Sekarang"]
|
|
│ ↓
|
|
│ END
|
|
└─ YES ↓
|
|
↓
|
|
[Loop untuk setiap booking:]
|
|
↓
|
|
┌─────────────────────────┐
|
|
│ [Tampilkan card booking:]
|
|
│ - Kode Booking
|
|
│ - Nama Tempat
|
|
│ - Tanggal Booking
|
|
│ - Nama Pengunjung
|
|
│ - Total Harga
|
|
│ - Status (badge warna)
|
|
│ - Tanggal Order
|
|
│ ↓
|
|
│ {Status = 'confirmed'?}
|
|
│ ├─ YES → [Tampilkan badge "Dikonfirmasi"]
|
|
│ │ ↓
|
|
│ │ [Tampilkan tombol "Lihat Detail"]
|
|
│ │
|
|
│ ├─ Status = 'pending' → [Tampilkan badge "Menunggu Verifikasi"]
|
|
│ │ ↓
|
|
│ │ [Tampilkan tombol "Lihat Detail"]
|
|
│ │ ↓
|
|
│ │ [Tampilkan tombol "Upload Bukti"]
|
|
│ │
|
|
│ └─ Status = 'rejected' → [Tampilkan badge "Ditolak"]
|
|
│ ↓
|
|
│ [Tampilkan alasan penolakan]
|
|
│ ↓
|
|
│ [Tampilkan tombol "Upload Ulang"]
|
|
│ ↓
|
|
│ [Ulangi untuk booking berikutnya]
|
|
└─────────────────────────┘
|
|
↓
|
|
[Tampilkan pagination]
|
|
↓
|
|
END
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Lihat Detail Tiket dari Riwayat
|
|
|
|
### Deskripsi
|
|
Flowchart untuk user melihat detail order tiket dari riwayat.
|
|
|
|
### Flowchart
|
|
|
|
```
|
|
START
|
|
↓
|
|
[User di halaman riwayat tiket]
|
|
↓
|
|
[User klik tombol "Lihat Detail" atau "Download Tiket"]
|
|
↓
|
|
[Redirect ke halaman download tiket]
|
|
↓
|
|
[Query database: ticket_orders]
|
|
↓
|
|
[Filter: order_code = kode yang diklik]
|
|
↓
|
|
[Filter: user_id = user yang login]
|
|
↓
|
|
[Include relasi: items.ticket]
|
|
↓
|
|
{Order ditemukan?}
|
|
├─ NO → [Error 404: Order tidak ditemukan] → END
|
|
└─ YES ↓
|
|
↓
|
|
{Order milik user yang login?}
|
|
├─ NO → [Error 403: Unauthorized] → END
|
|
└─ YES ↓
|
|
↓
|
|
[Tampilkan halaman detail order]
|
|
↓
|
|
[Cek status order]
|
|
↓
|
|
{Status = 'confirmed'?}
|
|
├─ YES → [Tampilkan pesan sukses]
|
|
│ ↓
|
|
│ [Tampilkan daftar tiket dengan QR code]
|
|
│ ↓
|
|
│ [Enable tombol "Download PDF"]
|
|
│ ↓
|
|
│ [Enable tombol "Print Tiket"]
|
|
│ ↓
|
|
│ END
|
|
│
|
|
├─ Status = 'pending' → [Tampilkan pesan warning]
|
|
│ ↓
|
|
│ [Tampilkan daftar tiket]
|
|
│ ↓
|
|
│ [Disable tombol download (abu-abu)]
|
|
│ ↓
|
|
│ [Tampilkan: "Menunggu verifikasi admin"]
|
|
│ ↓
|
|
│ END
|
|
│
|
|
└─ Status = 'rejected' → [Tampilkan pesan danger]
|
|
↓
|
|
[Tampilkan alasan penolakan]
|
|
↓
|
|
[Tampilkan tombol "Upload Ulang Bukti"]
|
|
↓
|
|
END
|
|
```
|
|
|
|
---
|
|
|
|
## 4. Lihat Detail Booking dari Riwayat
|
|
|
|
### Deskripsi
|
|
Flowchart untuk user melihat detail booking dari riwayat.
|
|
|
|
### Flowchart
|
|
|
|
```
|
|
START
|
|
↓
|
|
[User di halaman riwayat booking]
|
|
↓
|
|
[User klik tombol "Lihat Detail"]
|
|
↓
|
|
[Redirect ke halaman status booking]
|
|
↓
|
|
[Query database: bookings]
|
|
↓
|
|
[Filter: booking_code = kode yang diklik]
|
|
↓
|
|
[Filter: user_id = user yang login]
|
|
↓
|
|
[Include relasi: place]
|
|
↓
|
|
{Booking ditemukan?}
|
|
├─ NO → [Error 404: Booking tidak ditemukan] → END
|
|
└─ YES ↓
|
|
↓
|
|
{Booking milik user yang login?}
|
|
├─ NO → [Error 403: Unauthorized] → END
|
|
└─ YES ↓
|
|
↓
|
|
[Tampilkan halaman detail booking]
|
|
↓
|
|
[Tampilkan informasi booking:]
|
|
- Kode Booking
|
|
- Nama Tempat
|
|
- Tanggal Booking
|
|
- Nama Pengunjung
|
|
- Nomor Telepon
|
|
- Alamat
|
|
- Total Harga
|
|
- Catatan
|
|
- Bukti Pembayaran
|
|
↓
|
|
[Cek status booking]
|
|
↓
|
|
{Status = 'confirmed'?}
|
|
├─ YES → [Tampilkan alert sukses:]
|
|
│ "Pembayaran berhasil diverifikasi"
|
|
│ ↓
|
|
│ [Tampilkan badge "Confirmed"]
|
|
│ ↓
|
|
│ [Tampilkan tombol "Kembali"]
|
|
│ ↓
|
|
│ END
|
|
│
|
|
├─ Status = 'pending' → [Tampilkan alert warning:]
|
|
│ "Menunggu verifikasi admin"
|
|
│ ↓
|
|
│ [Tampilkan badge "Pending"]
|
|
│ ↓
|
|
│ {Bukti pembayaran sudah diupload?}
|
|
│ ├─ YES → [Tampilkan pesan: "Bukti sedang diverifikasi"]
|
|
│ └─ NO → [Tampilkan tombol "Upload Bukti"]
|
|
│ ↓
|
|
│ END
|
|
│
|
|
└─ Status = 'rejected' → [Tampilkan alert danger:]
|
|
"Pembayaran ditolak"
|
|
↓
|
|
[Tampilkan badge "Rejected"]
|
|
↓
|
|
[Tampilkan alasan penolakan]
|
|
↓
|
|
[Tampilkan tombol "Upload Ulang Bukti"]
|
|
↓
|
|
END
|
|
```
|
|
|
|
---
|
|
|
|
## Panduan Membuat di Draw.io
|
|
|
|
### Simbol Flowchart
|
|
1. **Terminator** (Oval) - START/END
|
|
2. **Process** (Rectangle) - Proses/aksi
|
|
3. **Decision** (Diamond) - Kondisi/percabangan
|
|
4. **Data** (Parallelogram) - Input/Output
|
|
5. **Database** (Cylinder) - Operasi database
|
|
6. **Loop** (Hexagon) - Perulangan
|
|
7. **Display** (Parallelogram with curved sides) - Tampilan UI
|
|
|
|
### Warna yang Disarankan
|
|
- **START/END**: Hijau teal (#14B8A6)
|
|
- **Process**: Biru muda (#E3F2FD)
|
|
- **Decision**: Kuning (#FFF59D)
|
|
- **Database Operation**: Ungu muda (#E1BEE7)
|
|
- **Display**: Biru tua muda (#BBDEFB)
|
|
- **Confirmed**: Hijau muda (#C8E6C9)
|
|
- **Pending**: Kuning muda (#FFF9C4)
|
|
- **Rejected**: Merah muda (#FFCDD2)
|
|
- **Loop**: Oranye muda (#FFE0B2)
|
|
|
|
### Tips
|
|
- Gunakan swimlane untuk memisahkan User dan System
|
|
- Tandai status order dengan warna berbeda
|
|
- Gunakan loop symbol untuk iterasi data
|
|
- Tambahkan notes untuk pagination
|
|
- Highlight perbedaan tampilan berdasarkan status
|
|
|
|
---
|
|
|
|
**Dibuat**: 25 Februari 2026
|
|
**Fitur**: Riwayat User (Tiket & Booking)
|
|
**Sistem**: Banyu Biru Ticketing & Booking System
|