docs(flowcharts): tambah dokumentasi flowchart lengkap per fitur
- Tambah 11 file flowchart untuk semua fitur sistem - Auth: login, register, logout - Tiket: pembelian, upload bukti, download - Booking: buat booking, cek tanggal, upload bukti - Admin: verifikasi pembayaran, manajemen tiket, manajemen admin - QR Scanner: scan QR, input manual, verifikasi - Dashboard: statistik, chart penjualan - Bank Account: CRUD rekening bank - User: riwayat tiket/booking, profil - Tambah README.md dengan panduan lengkap Draw.io - Format ASCII flowchart siap digunakan untuk visualisasi
This commit is contained in:
ardhikaxx
parent
69e9a64014
commit
4ba89a1aea
|
|
@ -0,0 +1,210 @@
|
|||
# Flowchart Dokumentasi - Banyu Biru Ticketing & Booking System
|
||||
|
||||
Dokumentasi flowchart lengkap untuk setiap fitur dalam sistem. Setiap file berisi flowchart detail yang dapat digunakan untuk membuat diagram di Draw.io.
|
||||
|
||||
## 📋 Daftar Flowchart
|
||||
|
||||
### 1. Autentikasi
|
||||
**File:** [auth-flowchart.md](auth-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Login (User & Admin)
|
||||
- Register (User Baru)
|
||||
- Logout (dengan konfirmasi SweetAlert)
|
||||
|
||||
---
|
||||
|
||||
### 2. Pembelian Tiket
|
||||
**File:** [ticket-purchase-flowchart.md](ticket-purchase-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Daftar Tiket
|
||||
- Beli Tiket (dengan generate QR code)
|
||||
- Upload Bukti Pembayaran
|
||||
- Download Tiket (berdasarkan status)
|
||||
|
||||
---
|
||||
|
||||
### 3. Booking Pendopo
|
||||
**File:** [booking-flowchart.md](booking-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Halaman Booking
|
||||
- Cek Ketersediaan Tanggal (AJAX)
|
||||
- Buat Booking
|
||||
- Upload Bukti Pembayaran Booking
|
||||
- Lihat Status Booking
|
||||
|
||||
---
|
||||
|
||||
### 4. Verifikasi Pembayaran Admin
|
||||
**File:** [payment-verification-flowchart.md](payment-verification-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Daftar Order Tiket
|
||||
- Lihat Detail Order Tiket
|
||||
- Konfirmasi Pembayaran Tiket
|
||||
- Tolak Pembayaran Tiket
|
||||
- Verifikasi Pembayaran Booking
|
||||
|
||||
---
|
||||
|
||||
### 5. QR Scanner Verifikasi Tiket
|
||||
**File:** [qr-scanner-flowchart.md](qr-scanner-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Scan QR Code Tiket (menggunakan kamera)
|
||||
- Input Manual Kode Tiket
|
||||
- Verifikasi Tiket
|
||||
- Tandai Tiket Sebagai Dipakai
|
||||
|
||||
---
|
||||
|
||||
### 6. Manajemen Tiket Admin
|
||||
**File:** [ticket-management-flowchart.md](ticket-management-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Daftar Tiket
|
||||
- Tambah Tiket Baru
|
||||
- Edit Tiket
|
||||
- Hapus Tiket
|
||||
- Toggle Status Aktif Tiket
|
||||
|
||||
---
|
||||
|
||||
### 7. Manajemen Admin
|
||||
**File:** [admin-management-flowchart.md](admin-management-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Daftar Admin
|
||||
- Tambah Admin Baru
|
||||
- Edit Admin
|
||||
- Hapus Admin
|
||||
- Edit Profil Admin
|
||||
|
||||
---
|
||||
|
||||
### 8. Dashboard & Statistik
|
||||
**File:** [dashboard-flowchart.md](dashboard-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Tampilkan Dashboard Admin
|
||||
- Hitung Total Tiket Terjual
|
||||
- Hitung Penjualan Bulan Ini
|
||||
- Hitung Total Pendapatan
|
||||
- Generate Chart Penjualan
|
||||
- Tampilkan Order Terbaru
|
||||
- Tampilkan Booking Terbaru
|
||||
|
||||
---
|
||||
|
||||
### 9. Manajemen Rekening Bank
|
||||
**File:** [bank-account-flowchart.md](bank-account-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Daftar Rekening Bank
|
||||
- Tambah Rekening Bank
|
||||
- Edit Rekening Bank
|
||||
- Hapus Rekening Bank
|
||||
- Toggle Status Aktif Rekening
|
||||
|
||||
---
|
||||
|
||||
### 10. Riwayat User
|
||||
**File:** [user-history-flowchart.md](user-history-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Riwayat Tiket
|
||||
- Lihat Riwayat Booking
|
||||
- Lihat Detail Tiket dari Riwayat
|
||||
- Lihat Detail Booking dari Riwayat
|
||||
|
||||
---
|
||||
|
||||
### 11. Profil User
|
||||
**File:** [user-profile-flowchart.md](user-profile-flowchart.md)
|
||||
|
||||
Fitur yang didokumentasikan:
|
||||
- Lihat Profil User
|
||||
- Edit Profil User
|
||||
- Ubah Password User
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Panduan Umum Draw.io
|
||||
|
||||
### Simbol Flowchart Standar
|
||||
- **Terminator (Oval)** - START/END
|
||||
- **Process (Rectangle)** - Proses/aksi
|
||||
- **Decision (Diamond)** - Kondisi/percabangan
|
||||
- **Data (Parallelogram)** - Input/Output
|
||||
- **Database (Cylinder)** - Operasi database
|
||||
- **Document (Rectangle with wavy bottom)** - Form/dokumen
|
||||
- **Loop (Hexagon)** - Perulangan
|
||||
- **Predefined Process (Rectangle with double lines)** - Subprocess
|
||||
|
||||
### Palet Warna Konsisten
|
||||
```
|
||||
START/END: #14B8A6 (Teal)
|
||||
Process: #E3F2FD (Biru Muda)
|
||||
Decision: #FFF59D (Kuning)
|
||||
Database Operation: #E1BEE7 (Ungu Muda)
|
||||
Form: #BBDEFB (Biru Tua Muda)
|
||||
Create: #C8E6C9 (Hijau Muda)
|
||||
Update: #B3E5FC (Biru Muda)
|
||||
Delete: #FFCDD2 (Merah Muda)
|
||||
Success: #C8E6C9 (Hijau Muda)
|
||||
Error: #FFCDD2 (Merah Muda)
|
||||
Warning: #FFF9C4 (Kuning Muda)
|
||||
Loop: #FFE0B2 (Oranye Muda)
|
||||
Security Check: #FFE0B2 (Oranye Muda)
|
||||
```
|
||||
|
||||
### Tips Membuat Diagram
|
||||
1. **Gunakan Swimlane** untuk memisahkan actor (User, Admin, System, Database)
|
||||
2. **Konsisten dengan warna** untuk memudahkan identifikasi jenis proses
|
||||
3. **Label yang jelas** pada setiap decision branch (YES/NO)
|
||||
4. **Spacing yang rapi** antar simbol untuk readability
|
||||
5. **Connector yang jelas** dengan arrow yang tepat
|
||||
6. **Notes/Comments** untuk penjelasan kompleks
|
||||
7. **Vertical flow** (top to bottom) untuk kemudahan membaca
|
||||
|
||||
### Langkah Membuat di Draw.io
|
||||
1. Buka [draw.io](https://app.diagrams.net/)
|
||||
2. Pilih "Create New Diagram"
|
||||
3. Pilih template "Flowchart" atau "Blank"
|
||||
4. Drag & drop simbol dari panel kiri
|
||||
5. Gunakan connector tool untuk menghubungkan simbol
|
||||
6. Atur warna sesuai panduan di atas
|
||||
7. Export sebagai PNG/PDF/SVG
|
||||
|
||||
---
|
||||
|
||||
## 📊 Statistik Dokumentasi
|
||||
|
||||
- **Total Flowchart Files**: 11
|
||||
- **Total Fitur Terdokumentasi**: 50+
|
||||
- **Format**: Markdown dengan ASCII flowchart
|
||||
- **Kompatibilitas**: Draw.io, Lucidchart, Visio
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Update History
|
||||
|
||||
- **25 Februari 2026**: Pembuatan dokumentasi lengkap untuk semua fitur sistem
|
||||
|
||||
---
|
||||
|
||||
## 📝 Catatan
|
||||
|
||||
- Setiap flowchart sudah disesuaikan dengan implementasi aktual di kode
|
||||
- Status order/booking: `pending`, `confirmed`, `rejected`
|
||||
- Kode unik format: `AT-XXXXX` (tiket), `AB-XXXXX` (booking)
|
||||
- Semua flowchart sudah termasuk validasi dan error handling
|
||||
- Security checks sudah didokumentasikan (password hashing, authorization, dll)
|
||||
|
||||
---
|
||||
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Versi**: 1.0
|
||||
|
|
@ -0,0 +1,376 @@
|
|||
# Flowchart - Fitur Manajemen Admin
|
||||
|
||||
## Daftar Isi
|
||||
1. [Lihat Daftar Admin](#1-lihat-daftar-admin)
|
||||
2. [Tambah Admin Baru](#2-tambah-admin-baru)
|
||||
3. [Edit Admin](#3-edit-admin)
|
||||
4. [Hapus Admin](#4-hapus-admin)
|
||||
5. [Edit Profil Admin](#5-edit-profil-admin)
|
||||
|
||||
---
|
||||
|
||||
## 1. Lihat Daftar Admin
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin melihat daftar semua admin.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin mengakses menu "Admin"]
|
||||
↓
|
||||
[Query database: ambil users dengan role 'admin']
|
||||
↓
|
||||
[Urutkan berdasarkan nama]
|
||||
↓
|
||||
[Tampilkan tabel admin:]
|
||||
- Nama
|
||||
- Email
|
||||
- Tanggal Dibuat
|
||||
- Aksi (Edit, Hapus)
|
||||
↓
|
||||
[Tampilkan tombol "Tambah Admin"]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Tambah Admin Baru
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menambah admin baru ke sistem.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar admin]
|
||||
↓
|
||||
[Admin klik tombol "Tambah Admin"]
|
||||
↓
|
||||
[Redirect ke halaman form tambah admin]
|
||||
↓
|
||||
[Tampilkan form:]
|
||||
- Nama
|
||||
- Email
|
||||
- Password
|
||||
- Konfirmasi Password
|
||||
↓
|
||||
[Admin mengisi form]
|
||||
↓
|
||||
[Admin klik tombol "Simpan"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama terisi?}
|
||||
├─ NO → [Error: "Nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Format email valid?}
|
||||
├─ NO → [Error: "Format email tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: cek email sudah terdaftar]
|
||||
↓
|
||||
{Email sudah ada?}
|
||||
├─ YES → [Error: "Email sudah terdaftar"] → [Kembali ke form] → END
|
||||
└─ NO ↓
|
||||
↓
|
||||
{Password minimal 8 karakter?}
|
||||
├─ NO → [Error: "Password minimal 8 karakter"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Password = Konfirmasi Password?}
|
||||
├─ NO → [Error: "Konfirmasi password tidak cocok"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Hash password menggunakan bcrypt]
|
||||
↓
|
||||
[Simpan data ke tabel users:]
|
||||
- name
|
||||
- email
|
||||
- password (hashed)
|
||||
↓
|
||||
[Assign role 'admin' ke user baru]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Admin berhasil ditambahkan"
|
||||
↓
|
||||
[Redirect ke halaman daftar admin]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 3. Edit Admin
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk mengedit data admin.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar admin]
|
||||
↓
|
||||
[Admin klik tombol "Edit" pada admin]
|
||||
↓
|
||||
[Query database: ambil user berdasarkan ID]
|
||||
↓
|
||||
{User ditemukan?}
|
||||
├─ NO → [Error 404: Admin tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User memiliki role 'admin'?}
|
||||
├─ NO → [Error: "User bukan admin"] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Redirect ke halaman form edit admin]
|
||||
↓
|
||||
[Tampilkan form dengan data admin:]
|
||||
- Nama (terisi)
|
||||
- Email (terisi)
|
||||
- Password (kosong, opsional)
|
||||
- Konfirmasi Password (kosong, opsional)
|
||||
↓
|
||||
[Admin mengubah data]
|
||||
↓
|
||||
[Admin klik tombol "Update"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama terisi?}
|
||||
├─ NO → [Error: "Nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Format email valid?}
|
||||
├─ NO → [Error: "Format email tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query: cek email sudah digunakan user lain]
|
||||
↓
|
||||
{Email digunakan user lain?}
|
||||
├─ YES → [Error: "Email sudah terdaftar"] → [Kembali ke form] → END
|
||||
└─ NO ↓
|
||||
↓
|
||||
{Password diisi?}
|
||||
├─ YES → {Password minimal 8 karakter?}
|
||||
│ ├─ NO → [Error: "Password minimal 8 karakter"] → [Kembali ke form] → END
|
||||
│ └─ YES ↓
|
||||
│ ↓
|
||||
│ {Password = Konfirmasi Password?}
|
||||
│ ├─ NO → [Error: "Konfirmasi password tidak cocok"] → [Kembali ke form] → END
|
||||
│ └─ YES ↓
|
||||
│ ↓
|
||||
│ [Hash password baru]
|
||||
│ ↓
|
||||
│ [Update dengan password baru]
|
||||
│
|
||||
└─ NO → [Update tanpa mengubah password]
|
||||
↓
|
||||
[Update tabel users:]
|
||||
- name
|
||||
- email
|
||||
- password (jika diisi)
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Admin berhasil diupdate"
|
||||
↓
|
||||
[Redirect ke halaman daftar admin]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Hapus Admin
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menghapus admin dari sistem.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar admin]
|
||||
↓
|
||||
[Admin klik tombol "Hapus" pada admin]
|
||||
↓
|
||||
[Tampilkan konfirmasi SweetAlert:]
|
||||
"Yakin ingin menghapus admin ini?"
|
||||
↓
|
||||
{Admin konfirmasi?}
|
||||
├─ NO (Batal) → [Tutup dialog] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: ambil user berdasarkan ID]
|
||||
↓
|
||||
{User ditemukan?}
|
||||
├─ NO → [Error: "Admin tidak ditemukan"] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin yang sedang login?}
|
||||
├─ YES → [Error: "Tidak dapat menghapus akun sendiri"]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[Cek apakah admin pernah melakukan verifikasi]
|
||||
↓
|
||||
[Query: cek ticket_orders dengan confirmed_by = admin_id]
|
||||
↓
|
||||
[Query: cek bookings dengan confirmed_by = admin_id]
|
||||
↓
|
||||
{Admin pernah verifikasi transaksi?}
|
||||
├─ YES → [Error: "Admin tidak dapat dihapus karena ada riwayat verifikasi"]
|
||||
│ ↓
|
||||
│ [Sarankan: nonaktifkan akun saja]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[Hapus role 'admin' dari user]
|
||||
↓
|
||||
[Hapus user dari database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Admin berhasil dihapus"
|
||||
↓
|
||||
[Refresh halaman daftar admin]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Edit Profil Admin
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin mengedit profil sendiri.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin mengakses menu "Profil"]
|
||||
↓
|
||||
[Query database: ambil data admin yang login]
|
||||
↓
|
||||
[Tampilkan halaman profil]
|
||||
↓
|
||||
[Tampilkan form dengan data admin:]
|
||||
- Nama (terisi)
|
||||
- Email (terisi)
|
||||
- Nomor Telepon (terisi/kosong)
|
||||
- Alamat (terisi/kosong)
|
||||
- Password Baru (kosong, opsional)
|
||||
- Konfirmasi Password (kosong, opsional)
|
||||
↓
|
||||
[Admin mengubah data]
|
||||
↓
|
||||
[Admin klik tombol "Update Profil"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama terisi?}
|
||||
├─ NO → [Error: "Nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Format email valid?}
|
||||
├─ NO → [Error: "Format email tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query: cek email sudah digunakan user lain]
|
||||
↓
|
||||
{Email digunakan user lain?}
|
||||
├─ YES → [Error: "Email sudah terdaftar"] → [Kembali ke form] → END
|
||||
└─ NO ↓
|
||||
↓
|
||||
{Password baru diisi?}
|
||||
├─ YES → {Password minimal 8 karakter?}
|
||||
│ ├─ NO → [Error: "Password minimal 8 karakter"] → [Kembali ke form] → END
|
||||
│ └─ YES ↓
|
||||
│ ↓
|
||||
│ {Password = Konfirmasi Password?}
|
||||
│ ├─ NO → [Error: "Konfirmasi password tidak cocok"] → [Kembali ke form] → END
|
||||
│ └─ YES ↓
|
||||
│ ↓
|
||||
│ [Hash password baru]
|
||||
│ ↓
|
||||
│ [Update dengan password baru]
|
||||
│
|
||||
└─ NO → [Update tanpa mengubah password]
|
||||
↓
|
||||
[Update tabel users:]
|
||||
- name
|
||||
- email
|
||||
- phone (jika diisi)
|
||||
- address (jika diisi)
|
||||
- password (jika diisi)
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Update session dengan data baru]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Profil berhasil diupdate"
|
||||
↓
|
||||
[Refresh halaman profil]
|
||||
↓
|
||||
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. **Document** (Rectangle with wavy bottom) - Form
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Form**: Biru tua muda (#BBDEFB)
|
||||
- **Create**: Hijau muda (#C8E6C9)
|
||||
- **Update**: Biru muda (#B3E5FC)
|
||||
- **Delete**: Merah muda (#FFCDD2)
|
||||
- **Security Check**: Oranye muda (#FFE0B2)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan Admin dan System
|
||||
- Tandai operasi CRUD dengan warna berbeda
|
||||
- Gunakan connector yang jelas untuk decision branch
|
||||
- Tambahkan notes untuk security checks penting
|
||||
- Highlight proses hashing password
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Manajemen Admin
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
# Flowchart - Fitur Autentikasi
|
||||
|
||||
## Daftar Isi
|
||||
1. [Login](#1-login)
|
||||
2. [Register](#2-register)
|
||||
3. [Logout](#3-logout)
|
||||
|
||||
---
|
||||
|
||||
## 1. Login
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk proses login user dan admin ke sistem.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User mengakses halaman login]
|
||||
↓
|
||||
[Tampilkan form login]
|
||||
↓
|
||||
[User input email dan password]
|
||||
↓
|
||||
[User klik tombol Login]
|
||||
↓
|
||||
<Validasi format email>
|
||||
↓
|
||||
{Email valid?}
|
||||
├─ NO → [Tampilkan error: "Format email salah"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
<Validasi password tidak kosong>
|
||||
↓
|
||||
{Password terisi?}
|
||||
├─ NO → [Tampilkan error: "Password wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: cari user berdasarkan email]
|
||||
↓
|
||||
{User ditemukan?}
|
||||
├─ NO → [Tampilkan error: "Email tidak terdaftar"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Ambil data user dari database]
|
||||
↓
|
||||
[Verifikasi password dengan hash]
|
||||
↓
|
||||
{Password cocok?}
|
||||
├─ NO → [Tampilkan error: "Password salah"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Buat session untuk user]
|
||||
↓
|
||||
[Simpan data user ke session]
|
||||
↓
|
||||
[Cek role user]
|
||||
↓
|
||||
{Role = Admin?}
|
||||
├─ YES → [Redirect ke /admin/dashboard]
|
||||
│ ↓
|
||||
│ [Tampilkan dashboard admin]
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
└─ NO (User) → [Redirect ke /]
|
||||
↓
|
||||
[Tampilkan halaman beranda]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
### Simbol yang Digunakan
|
||||
- `[ ]` = Proses/Action
|
||||
- `{ }` = Decision/Kondisi
|
||||
- `< >` = Subprocess
|
||||
- `→` = Flow direction
|
||||
- `↓` = Flow continuation
|
||||
|
||||
---
|
||||
|
||||
## 2. Register
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk proses registrasi user baru.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User mengakses halaman register]
|
||||
↓
|
||||
[Tampilkan form registrasi]
|
||||
↓
|
||||
[User input: nama, email, password, password confirmation]
|
||||
↓
|
||||
[User klik tombol Register]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama terisi?}
|
||||
├─ NO → [Error: "Nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Format email valid?}
|
||||
├─ NO → [Error: "Format email salah"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: cek email sudah terdaftar]
|
||||
↓
|
||||
{Email sudah ada?}
|
||||
├─ YES → [Error: "Email sudah terdaftar"] → [Kembali ke form] → END
|
||||
└─ NO ↓
|
||||
↓
|
||||
{Password minimal 8 karakter?}
|
||||
├─ NO → [Error: "Password minimal 8 karakter"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Password = Password Confirmation?}
|
||||
├─ NO → [Error: "Konfirmasi password tidak cocok"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Hash password menggunakan bcrypt]
|
||||
↓
|
||||
[Simpan data user ke database]
|
||||
↓
|
||||
[Assign role "user" ke user baru]
|
||||
↓
|
||||
[Buat session untuk user]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses]
|
||||
↓
|
||||
[Redirect ke halaman beranda]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Logout
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk proses logout user/admin dari sistem.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User klik tombol Logout]
|
||||
↓
|
||||
[Tampilkan konfirmasi SweetAlert]
|
||||
↓
|
||||
{User konfirmasi logout?}
|
||||
├─ NO (Batal) → [Tutup dialog] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Tampilkan loading "Logging out..."]
|
||||
↓
|
||||
[Hapus session user]
|
||||
↓
|
||||
[Hapus remember token]
|
||||
↓
|
||||
[Clear authentication]
|
||||
↓
|
||||
[Redirect ke halaman login]
|
||||
↓
|
||||
[Tampilkan pesan "Berhasil logout"]
|
||||
↓
|
||||
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. **Arrow** - Alur/flow
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Error**: Merah muda (#FFCDD2)
|
||||
- **Success**: Hijau muda (#C8E6C9)
|
||||
|
||||
### Layout
|
||||
- Gunakan vertical flow (top to bottom)
|
||||
- Spacing konsisten antar simbol
|
||||
- Label jelas pada setiap decision branch
|
||||
- Gunakan connector yang rapi
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Autentikasi (Login, Register, Logout)
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
# Flowchart - Fitur Manajemen Rekening Bank
|
||||
|
||||
## Daftar Isi
|
||||
1. [Lihat Daftar Rekening Bank](#1-lihat-daftar-rekening-bank)
|
||||
2. [Tambah Rekening Bank](#2-tambah-rekening-bank)
|
||||
3. [Edit Rekening Bank](#3-edit-rekening-bank)
|
||||
4. [Hapus Rekening Bank](#4-hapus-rekening-bank)
|
||||
5. [Toggle Status Aktif Rekening](#5-toggle-status-aktif-rekening)
|
||||
|
||||
---
|
||||
|
||||
## 1. Lihat Daftar Rekening Bank
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin melihat daftar rekening bank.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin mengakses menu "Rekening Bank"]
|
||||
↓
|
||||
[Query database: ambil semua bank_accounts]
|
||||
↓
|
||||
[Urutkan berdasarkan ID]
|
||||
↓
|
||||
[Tampilkan tabel rekening:]
|
||||
- Nama Bank
|
||||
- Nomor Rekening
|
||||
- Atas Nama
|
||||
- Status (Aktif/Nonaktif)
|
||||
- Aksi (Edit, Hapus)
|
||||
↓
|
||||
[Tampilkan tombol "Tambah Rekening"]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Tambah Rekening Bank
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin menambah rekening bank baru.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar rekening]
|
||||
↓
|
||||
[Admin klik tombol "Tambah Rekening"]
|
||||
↓
|
||||
[Redirect ke halaman form tambah rekening]
|
||||
↓
|
||||
[Tampilkan form:]
|
||||
- Nama Bank
|
||||
- Nomor Rekening
|
||||
- Atas Nama
|
||||
- Status Aktif (checkbox)
|
||||
↓
|
||||
[Admin mengisi form]
|
||||
↓
|
||||
[Admin klik tombol "Simpan"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama bank terisi?}
|
||||
├─ NO → [Error: "Nama bank wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Nomor rekening terisi?}
|
||||
├─ NO → [Error: "Nomor rekening wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Nomor rekening hanya angka?}
|
||||
├─ NO → [Error: "Nomor rekening harus angka"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Atas nama terisi?}
|
||||
├─ NO → [Error: "Atas nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Simpan data ke tabel bank_accounts:]
|
||||
- bank_name
|
||||
- account_number
|
||||
- account_holder
|
||||
- is_active (default: true)
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Rekening bank berhasil ditambahkan"
|
||||
↓
|
||||
[Redirect ke halaman daftar rekening]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Edit Rekening Bank
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin mengedit data rekening bank.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar rekening]
|
||||
↓
|
||||
[Admin klik tombol "Edit" pada rekening]
|
||||
↓
|
||||
[Query database: ambil bank_account berdasarkan ID]
|
||||
↓
|
||||
{Rekening ditemukan?}
|
||||
├─ NO → [Error 404: Rekening tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Redirect ke halaman form edit rekening]
|
||||
↓
|
||||
[Tampilkan form dengan data rekening:]
|
||||
- Nama Bank (terisi)
|
||||
- Nomor Rekening (terisi)
|
||||
- Atas Nama (terisi)
|
||||
- Status Aktif (checked/unchecked)
|
||||
↓
|
||||
[Admin mengubah data]
|
||||
↓
|
||||
[Admin klik tombol "Update"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama bank terisi?}
|
||||
├─ NO → [Error: "Nama bank wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Nomor rekening terisi?}
|
||||
├─ NO → [Error: "Nomor rekening wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Nomor rekening hanya angka?}
|
||||
├─ NO → [Error: "Nomor rekening harus angka"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Atas nama terisi?}
|
||||
├─ NO → [Error: "Atas nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Update tabel bank_accounts:]
|
||||
- bank_name
|
||||
- account_number
|
||||
- account_holder
|
||||
- is_active
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Rekening bank berhasil diupdate"
|
||||
↓
|
||||
[Redirect ke halaman daftar rekening]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Hapus Rekening Bank
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin menghapus rekening bank.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar rekening]
|
||||
↓
|
||||
[Admin klik tombol "Hapus" pada rekening]
|
||||
↓
|
||||
[Tampilkan konfirmasi SweetAlert:]
|
||||
"Yakin ingin menghapus rekening ini?"
|
||||
↓
|
||||
{Admin konfirmasi?}
|
||||
├─ NO (Batal) → [Tutup dialog] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: ambil bank_account berdasarkan ID]
|
||||
↓
|
||||
{Rekening ditemukan?}
|
||||
├─ NO → [Error: "Rekening tidak ditemukan"] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Hapus rekening dari database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Rekening bank berhasil dihapus"
|
||||
↓
|
||||
[Refresh halaman daftar rekening]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Toggle Status Aktif Rekening
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk mengaktifkan/menonaktifkan rekening bank.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman edit rekening]
|
||||
↓
|
||||
[Tampilkan checkbox "Status Aktif"]
|
||||
↓
|
||||
{Rekening saat ini aktif?}
|
||||
├─ YES → [Checkbox checked]
|
||||
└─ NO → [Checkbox unchecked]
|
||||
↓
|
||||
[Admin toggle checkbox]
|
||||
↓
|
||||
[Admin klik tombol "Update"]
|
||||
↓
|
||||
[Update tabel bank_accounts:]
|
||||
- is_active = nilai checkbox (true/false)
|
||||
↓
|
||||
{is_active = true?}
|
||||
├─ YES → [Rekening muncul di halaman pembayaran user]
|
||||
│ ↓
|
||||
│ [User dapat transfer ke rekening ini]
|
||||
│ ↓
|
||||
│ [Notifikasi: "Rekening diaktifkan"]
|
||||
│
|
||||
└─ NO → [Rekening tidak muncul di halaman pembayaran]
|
||||
↓
|
||||
[User tidak dapat transfer ke rekening ini]
|
||||
↓
|
||||
[Notifikasi: "Rekening dinonaktifkan"]
|
||||
↓
|
||||
[Redirect ke halaman daftar rekening]
|
||||
↓
|
||||
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. **Document** (Rectangle with wavy bottom) - Form
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Form**: Biru tua muda (#BBDEFB)
|
||||
- **Create**: Hijau muda (#C8E6C9)
|
||||
- **Update**: Biru muda (#B3E5FC)
|
||||
- **Delete**: Merah muda (#FFCDD2)
|
||||
- **Toggle**: Oranye muda (#FFE0B2)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan Admin dan System
|
||||
- Tandai operasi CRUD dengan warna berbeda
|
||||
- Gunakan connector yang jelas untuk decision branch
|
||||
- Tambahkan notes untuk validasi nomor rekening
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Manajemen Rekening Bank
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
# Flowchart - Fitur Booking Pendopo
|
||||
|
||||
## Daftar Isi
|
||||
1. [Lihat Halaman Booking](#1-lihat-halaman-booking)
|
||||
2. [Cek Ketersediaan Tanggal](#2-cek-ketersediaan-tanggal)
|
||||
3. [Buat Booking](#3-buat-booking)
|
||||
4. [Upload Bukti Pembayaran Booking](#4-upload-bukti-pembayaran-booking)
|
||||
5. [Lihat Status Booking](#5-lihat-status-booking)
|
||||
|
||||
---
|
||||
|
||||
## 1. Lihat Halaman Booking
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk mengakses halaman booking pendopo.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ YES → [Tampilkan SweetAlert: "Admin tidak dapat melakukan booking"]
|
||||
│ ↓
|
||||
│ [Redirect ke dashboard admin]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[Query database: cari place dengan name = 'pendopo']
|
||||
↓
|
||||
{Place 'pendopo' ditemukan?}
|
||||
├─ NO → [Query: ambil place aktif pertama]
|
||||
│ ↓
|
||||
│ [Gunakan place tersebut]
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Ambil data place pendopo]
|
||||
↓
|
||||
[Tampilkan halaman booking]
|
||||
↓
|
||||
[Tampilkan informasi pendopo:]
|
||||
- Nama tempat
|
||||
- Harga per hari
|
||||
- Deskripsi
|
||||
↓
|
||||
[Tampilkan form booking]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Cek Ketersediaan Tanggal
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk mengecek apakah tanggal sudah dibooking atau masih tersedia.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User memilih tanggal booking]
|
||||
↓
|
||||
[Trigger event onchange pada input tanggal]
|
||||
↓
|
||||
[Kirim AJAX request ke server]
|
||||
↓
|
||||
[Server: validasi format tanggal]
|
||||
↓
|
||||
{Format tanggal valid?}
|
||||
├─ NO → [Return error: "Format tanggal tidak valid"] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: cari booking dengan tanggal tersebut]
|
||||
↓
|
||||
[Query: WHERE place_id = pendopo_id]
|
||||
↓
|
||||
[Query: AND booking_date = tanggal_dipilih]
|
||||
↓
|
||||
{Booking ditemukan?}
|
||||
├─ YES → [Return JSON: available = false]
|
||||
│ ↓
|
||||
│ [Tampilkan pesan: "Tanggal sudah dibooking"]
|
||||
│ ↓
|
||||
│ [Disable tombol submit]
|
||||
│ ↓
|
||||
│ [Tampilkan alert merah]
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
└─ NO → [Return JSON: available = true]
|
||||
↓
|
||||
[Tampilkan pesan: "Tanggal tersedia"]
|
||||
↓
|
||||
[Enable tombol submit]
|
||||
↓
|
||||
[Tampilkan alert hijau]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Buat Booking
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk proses pembuatan booking pendopo.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User di halaman booking]
|
||||
↓
|
||||
[User mengisi form:]
|
||||
- Tanggal booking
|
||||
- Nama pengunjung
|
||||
- Nomor telepon
|
||||
- Alamat
|
||||
- Catatan (opsional)
|
||||
↓
|
||||
[User klik tombol "Booking Sekarang"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Tanggal >= hari ini?}
|
||||
├─ NO → [Error: "Tanggal harus hari ini atau setelahnya"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Nama pengunjung terisi?}
|
||||
├─ NO → [Error: "Nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Nomor telepon terisi?}
|
||||
├─ NO → [Error: "Nomor telepon wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Alamat terisi?}
|
||||
├─ NO → [Error: "Alamat wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: cek tanggal sudah dibooking]
|
||||
↓
|
||||
{Tanggal sudah dibooking?}
|
||||
├─ YES → [Error: "Tanggal sudah dibooking, pilih tanggal lain"]
|
||||
│ ↓
|
||||
│ [Kembali ke form dengan input tersimpan]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[Generate kode booking unik (AB-XXXXX)]
|
||||
↓
|
||||
[Hitung total harga = price_per_day dari place]
|
||||
↓
|
||||
[Simpan data ke tabel bookings:]
|
||||
- user_id = user yang login
|
||||
- place_id = pendopo_id
|
||||
- booking_code = AB-XXXXX
|
||||
- booking_date = tanggal dipilih
|
||||
- visitor_name
|
||||
- visitor_phone
|
||||
- visitor_address
|
||||
- num_persons = 1
|
||||
- total_price
|
||||
- notes
|
||||
- status = 'pending'
|
||||
↓
|
||||
[Tampilkan notifikasi sukses]
|
||||
↓
|
||||
[Redirect ke halaman pembayaran]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Upload Bukti Pembayaran Booking
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk upload bukti transfer pembayaran booking.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User di halaman pembayaran booking]
|
||||
↓
|
||||
[Tampilkan informasi booking:]
|
||||
- Kode booking
|
||||
- Tanggal booking
|
||||
- Nama pengunjung
|
||||
- Total harga
|
||||
↓
|
||||
[Query database: ambil daftar rekening bank aktif]
|
||||
↓
|
||||
[Tampilkan nomor rekening bank]
|
||||
↓
|
||||
[User melakukan transfer ke rekening]
|
||||
↓
|
||||
[User klik "Upload Bukti Pembayaran"]
|
||||
↓
|
||||
[User pilih file bukti transfer]
|
||||
↓
|
||||
<Validasi file>
|
||||
↓
|
||||
{File dipilih?}
|
||||
├─ NO → [Error: "File wajib dipilih"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Format file valid (jpg, jpeg, png, pdf)?}
|
||||
├─ NO → [Error: "Format file tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Ukuran file <= 5MB?}
|
||||
├─ NO → [Error: "Ukuran file terlalu besar"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Generate nama file unik:]
|
||||
Format: YYYYMMDDHHMMSS_uniqid.ext
|
||||
↓
|
||||
[Simpan file ke /public/payment-proofs/]
|
||||
↓
|
||||
[Update tabel bookings:]
|
||||
- payment_proof = path file
|
||||
- status tetap 'pending'
|
||||
↓
|
||||
[Tampilkan notifikasi sukses]
|
||||
↓
|
||||
[Redirect ke halaman status booking]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Lihat Status Booking
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk melihat status booking setelah upload bukti pembayaran.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User mengakses halaman status booking]
|
||||
↓
|
||||
[Query database: ambil booking berdasarkan booking_code]
|
||||
↓
|
||||
{Booking ditemukan?}
|
||||
├─ NO → [Error 404: Booking tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Booking milik user yang login?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Ambil data booking dengan relasi place]
|
||||
↓
|
||||
[Cek status booking]
|
||||
↓
|
||||
{Status = 'confirmed'?}
|
||||
├─ YES → [Tampilkan halaman status]
|
||||
│ ↓
|
||||
│ [Tampilkan alert sukses:]
|
||||
│ "Pembayaran berhasil diverifikasi"
|
||||
│ ↓
|
||||
│ [Tampilkan informasi booking:]
|
||||
│ - Kode booking
|
||||
│ - Status: Confirmed
|
||||
│ - Tanggal booking
|
||||
│ - Nama pengunjung
|
||||
│ - Total harga
|
||||
│ ↓
|
||||
│ [Tampilkan tombol "Kembali ke Beranda"]
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
├─ Status = 'pending' → [Tampilkan halaman status]
|
||||
│ ↓
|
||||
│ [Tampilkan alert warning:]
|
||||
│ "Menunggu verifikasi admin"
|
||||
│ ↓
|
||||
│ [Tampilkan informasi booking]
|
||||
│ ↓
|
||||
│ [Tampilkan pesan:]
|
||||
│ "Bukti pembayaran sedang diverifikasi"
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
└─ Status = 'rejected' → [Tampilkan halaman status]
|
||||
↓
|
||||
[Tampilkan alert danger:]
|
||||
"Pembayaran ditolak"
|
||||
↓
|
||||
[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. **Document** (Rectangle with wavy bottom) - File/dokumen
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **File Operation**: Oranye muda (#FFE0B2)
|
||||
- **Error**: Merah muda (#FFCDD2)
|
||||
- **Success**: Hijau muda (#C8E6C9)
|
||||
- **Warning**: Kuning muda (#FFF9C4)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan User, System, dan Database
|
||||
- Tandai proses AJAX dengan warna berbeda
|
||||
- Gunakan connector yang jelas untuk decision branch
|
||||
- Tambahkan notes untuk validasi kompleks
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Booking Pendopo
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,401 @@
|
|||
# Flowchart - Fitur Dashboard & Statistik
|
||||
|
||||
## Daftar Isi
|
||||
1. [Tampilkan Dashboard Admin](#1-tampilkan-dashboard-admin)
|
||||
2. [Hitung Total Tiket Terjual](#2-hitung-total-tiket-terjual)
|
||||
3. [Hitung Penjualan Bulan Ini](#3-hitung-penjualan-bulan-ini)
|
||||
4. [Hitung Total Pendapatan](#4-hitung-total-pendapatan)
|
||||
5. [Generate Chart Penjualan](#5-generate-chart-penjualan)
|
||||
|
||||
---
|
||||
|
||||
## 1. Tampilkan Dashboard Admin
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menampilkan dashboard admin dengan statistik.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin mengakses dashboard]
|
||||
↓
|
||||
[Inisialisasi variabel:]
|
||||
- confirmedStatus = ['confirmed']
|
||||
- currentMonth = bulan ini
|
||||
- currentYear = tahun ini
|
||||
↓
|
||||
[Hitung Total Tiket Terjual]
|
||||
[Lihat flowchart #2]
|
||||
↓
|
||||
[Hitung Penjualan Bulan Ini]
|
||||
[Lihat flowchart #3]
|
||||
↓
|
||||
[Hitung Total Pendapatan]
|
||||
[Lihat flowchart #4]
|
||||
↓
|
||||
[Generate Chart Penjualan]
|
||||
[Lihat flowchart #5]
|
||||
↓
|
||||
[Query: ambil 5 order tiket terbaru]
|
||||
↓
|
||||
[Query: ambil 5 booking terbaru]
|
||||
↓
|
||||
[Tampilkan dashboard dengan:]
|
||||
- 4 Card statistik
|
||||
- Chart penjualan
|
||||
- Tabel order terbaru
|
||||
- Tabel booking terbaru
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Hitung Total Tiket Terjual
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menghitung total tiket yang sudah dikonfirmasi.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Query database: ticket_orders]
|
||||
↓
|
||||
[Filter: status = 'confirmed']
|
||||
↓
|
||||
[Sum: total_qty dari semua order confirmed]
|
||||
↓
|
||||
[Simpan hasil ke variabel: totalTicketsSold]
|
||||
↓
|
||||
[Tampilkan di card:]
|
||||
- Judul: "Total Tiket Terjual"
|
||||
- Nilai: totalTicketsSold
|
||||
- Icon: fas fa-ticket-alt
|
||||
- Warna: Teal
|
||||
- Keterangan: "Sudah dikonfirmasi"
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Hitung Penjualan Bulan Ini
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menghitung penjualan tiket dan booking bulan ini.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Ambil bulan dan tahun saat ini]
|
||||
↓
|
||||
[Query database: ticket_orders]
|
||||
↓
|
||||
[Filter: status = 'confirmed']
|
||||
↓
|
||||
[Filter: MONTH(created_at) = bulan ini]
|
||||
↓
|
||||
[Filter: YEAR(created_at) = tahun ini]
|
||||
↓
|
||||
[Sum: total_qty dari hasil filter]
|
||||
↓
|
||||
[Simpan ke: monthlyTicketSales]
|
||||
↓
|
||||
[Query database: bookings]
|
||||
↓
|
||||
[Filter: status = 'confirmed']
|
||||
↓
|
||||
[Filter: MONTH(created_at) = bulan ini]
|
||||
↓
|
||||
[Filter: YEAR(created_at) = tahun ini]
|
||||
↓
|
||||
[Count: jumlah booking]
|
||||
↓
|
||||
[Simpan ke: monthlyBookings]
|
||||
↓
|
||||
[Tampilkan di card:]
|
||||
- Judul: "Penjualan Bulan Ini"
|
||||
- Nilai: monthlyTicketSales + " tiket, " + monthlyBookings + " booking"
|
||||
- Icon: fas fa-chart-line
|
||||
- Warna: Biru
|
||||
- Keterangan: "Hanya yang terkonfirmasi"
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 4. Hitung Total Pendapatan
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menghitung total pendapatan dari tiket dan booking yang dikonfirmasi.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Query database: ticket_orders]
|
||||
↓
|
||||
[Filter: status = 'confirmed']
|
||||
↓
|
||||
[Sum: total_price dari semua order confirmed]
|
||||
↓
|
||||
[Simpan ke: ticketRevenue]
|
||||
↓
|
||||
[Query database: bookings]
|
||||
↓
|
||||
[Filter: status = 'confirmed']
|
||||
↓
|
||||
[Sum: total_price dari semua booking confirmed]
|
||||
↓
|
||||
[Simpan ke: bookingRevenue]
|
||||
↓
|
||||
[Hitung: monthlyRevenue = ticketRevenue + bookingRevenue]
|
||||
↓
|
||||
[Format: Rp X.XXX.XXX]
|
||||
↓
|
||||
[Tampilkan di card:]
|
||||
- Judul: "Total Pendapatan"
|
||||
- Nilai: monthlyRevenue (formatted)
|
||||
- Icon: fas fa-money-bill-wave
|
||||
- Warna: Hijau
|
||||
- Keterangan: "Tiket + Booking terkonfirmasi"
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Generate Chart Penjualan
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk membuat chart penjualan 6 bulan terakhir.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Inisialisasi array kosong:]
|
||||
- labels = []
|
||||
- ticketData = []
|
||||
- bookingData = []
|
||||
↓
|
||||
[Loop: untuk 6 bulan terakhir]
|
||||
↓
|
||||
┌─────────────────────────┐
|
||||
│ [Hitung bulan dan tahun untuk iterasi ke-i]
|
||||
│ ↓
|
||||
│ [Format nama bulan: "Jan 2026"]
|
||||
│ ↓
|
||||
│ [Tambahkan ke labels array]
|
||||
│ ↓
|
||||
│ [Query: ticket_orders confirmed untuk bulan ini]
|
||||
│ ↓
|
||||
│ [Sum: total_qty]
|
||||
│ ↓
|
||||
│ [Tambahkan ke ticketData array]
|
||||
│ ↓
|
||||
│ [Query: bookings confirmed untuk bulan ini]
|
||||
│ ↓
|
||||
│ [Count: jumlah booking]
|
||||
│ ↓
|
||||
│ [Tambahkan ke bookingData array]
|
||||
│ ↓
|
||||
│ [Ulangi untuk bulan berikutnya]
|
||||
└─────────────────────────┘
|
||||
↓
|
||||
[Kirim data ke view:]
|
||||
- chartLabels = labels (JSON)
|
||||
- chartTicketData = ticketData (JSON)
|
||||
- chartBookingData = bookingData (JSON)
|
||||
↓
|
||||
[Render chart menggunakan Chart.js]
|
||||
↓
|
||||
[Tampilkan line chart dengan:]
|
||||
- X-axis: Bulan
|
||||
- Y-axis: Jumlah
|
||||
- Line 1: Penjualan Tiket (Teal)
|
||||
- Line 2: Booking (Biru)
|
||||
- Legend: Aktif
|
||||
- Tooltip: Aktif
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Tampilkan Order Terbaru
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menampilkan 5 order tiket terbaru.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Query database: ticket_orders]
|
||||
↓
|
||||
[Include relasi: user]
|
||||
↓
|
||||
[Urutkan: created_at DESC]
|
||||
↓
|
||||
[Limit: 5 data]
|
||||
↓
|
||||
[Loop untuk setiap order:]
|
||||
↓
|
||||
┌─────────────────────────┐
|
||||
│ [Ambil data order:]
|
||||
│ - Kode order
|
||||
│ - Nama user
|
||||
│ - Total qty
|
||||
│ - Total harga
|
||||
│ - Status
|
||||
│ - Tanggal order
|
||||
│ ↓
|
||||
│ [Format tanggal: d M Y]
|
||||
│ ↓
|
||||
│ [Format harga: Rp X.XXX]
|
||||
│ ↓
|
||||
│ [Tentukan warna badge status:]
|
||||
│ - pending: kuning
|
||||
│ - confirmed: hijau
|
||||
│ - rejected: merah
|
||||
│ ↓
|
||||
│ [Tampilkan row di tabel]
|
||||
└─────────────────────────┘
|
||||
↓
|
||||
[Tampilkan tabel di dashboard]
|
||||
↓
|
||||
[Tampilkan link "Lihat Semua"]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Tampilkan Booking Terbaru
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menampilkan 5 booking terbaru.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Query database: bookings]
|
||||
↓
|
||||
[Include relasi: user, place]
|
||||
↓
|
||||
[Urutkan: created_at DESC]
|
||||
↓
|
||||
[Limit: 5 data]
|
||||
↓
|
||||
[Loop untuk setiap booking:]
|
||||
↓
|
||||
┌─────────────────────────┐
|
||||
│ [Ambil data booking:]
|
||||
│ - Kode booking
|
||||
│ - Nama user
|
||||
│ - Nama tempat
|
||||
│ - Tanggal booking
|
||||
│ - Total harga
|
||||
│ - Status
|
||||
│ ↓
|
||||
│ [Format tanggal: d M Y]
|
||||
│ ↓
|
||||
│ [Format harga: Rp X.XXX]
|
||||
│ ↓
|
||||
│ [Tentukan warna badge status:]
|
||||
│ - pending: kuning
|
||||
│ - confirmed: hijau
|
||||
│ - rejected: merah
|
||||
│ ↓
|
||||
│ [Tampilkan row di tabel]
|
||||
└─────────────────────────┘
|
||||
↓
|
||||
[Tampilkan tabel di dashboard]
|
||||
↓
|
||||
[Tampilkan link "Lihat Semua"]
|
||||
↓
|
||||
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. **Predefined Process** (Rectangle with double lines) - Subprocess
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Calculation**: Hijau muda (#C8E6C9)
|
||||
- **Chart/Display**: Biru tua muda (#BBDEFB)
|
||||
- **Loop**: Oranye muda (#FFE0B2)
|
||||
- **Aggregate**: Kuning muda (#FFF9C4)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan Data Processing dan Display
|
||||
- Tandai proses agregasi (SUM, COUNT) dengan warna khusus
|
||||
- Gunakan loop symbol untuk iterasi 6 bulan
|
||||
- Tambahkan notes untuk formula perhitungan
|
||||
- Highlight filter status 'confirmed' yang penting
|
||||
|
||||
### Layout Suggestion
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Dashboard Controller │
|
||||
├─────────────────────────────────────────┤
|
||||
│ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ Tiket │ │ Booking │ │
|
||||
│ │ Terjual │ │ Bulan │ │
|
||||
│ └──────────┘ └──────────┘ │
|
||||
│ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ Penjualan│ │ Total │ │
|
||||
│ │ Bulan │ │ Pendapatan│ │
|
||||
│ └──────────┘ └──────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ Chart Penjualan 6 Bulan │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ Order │ │ Booking │ │
|
||||
│ │ Terbaru │ │ Terbaru │ │
|
||||
│ └─────────────┘ └─────────────┘ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Dashboard & Statistik
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,360 @@
|
|||
# Flowchart - Fitur Verifikasi Pembayaran Admin
|
||||
|
||||
## Daftar Isi
|
||||
1. [Lihat Daftar Order Tiket](#1-lihat-daftar-order-tiket)
|
||||
2. [Lihat Detail Order Tiket](#2-lihat-detail-order-tiket)
|
||||
3. [Konfirmasi Pembayaran Tiket](#3-konfirmasi-pembayaran-tiket)
|
||||
4. [Tolak Pembayaran Tiket](#4-tolak-pembayaran-tiket)
|
||||
5. [Verifikasi Pembayaran Booking](#5-verifikasi-pembayaran-booking)
|
||||
|
||||
---
|
||||
|
||||
## 1. Lihat Daftar Order Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin melihat daftar semua order tiket.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin mengakses menu "Order Tiket"]
|
||||
↓
|
||||
[Query database: ambil semua ticket_orders]
|
||||
↓
|
||||
[Include relasi: user]
|
||||
↓
|
||||
[Urutkan: terbaru ke terlama (latest)]
|
||||
↓
|
||||
[Tampilkan tabel order tiket:]
|
||||
- Kode Order
|
||||
- Nama User
|
||||
- Tanggal Kunjungan
|
||||
- Total Qty
|
||||
- Total Harga
|
||||
- Status (pending/confirmed/rejected)
|
||||
- Aksi (Detail)
|
||||
↓
|
||||
[Tampilkan badge warna sesuai status:]
|
||||
- Pending: Kuning
|
||||
- Confirmed: Hijau
|
||||
- Rejected: Merah
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Lihat Detail Order Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin melihat detail order tiket dan bukti pembayaran.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin klik tombol "Detail" pada order]
|
||||
↓
|
||||
[Query database: ambil ticket_order berdasarkan ID]
|
||||
↓
|
||||
[Include relasi:]
|
||||
- user
|
||||
- items.ticket
|
||||
↓
|
||||
{Order ditemukan?}
|
||||
├─ NO → [Error 404: Order tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Tampilkan halaman detail order]
|
||||
↓
|
||||
[Tampilkan informasi order:]
|
||||
- Kode Order
|
||||
- Nama User
|
||||
- Email User
|
||||
- Tanggal Kunjungan
|
||||
- Total Qty
|
||||
- Total Harga
|
||||
- Status
|
||||
- Tanggal Order
|
||||
↓
|
||||
[Tampilkan daftar tiket yang dibeli:]
|
||||
- Kode Tiket
|
||||
- Jenis Tiket
|
||||
- Harga
|
||||
- QR Code
|
||||
- Status Dipakai
|
||||
↓
|
||||
{Bukti pembayaran ada?}
|
||||
├─ NO → [Tampilkan pesan: "Belum upload bukti"]
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Tampilkan bukti pembayaran (gambar/PDF)]
|
||||
↓
|
||||
{Status = 'pending'?}
|
||||
├─ YES → [Tampilkan tombol:]
|
||||
│ - "Konfirmasi Pembayaran" (hijau)
|
||||
│ - "Tolak Pembayaran" (merah)
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
├─ Status = 'confirmed' → [Tampilkan badge: "Sudah Dikonfirmasi"]
|
||||
│ ↓
|
||||
│ [Tampilkan info:]
|
||||
│ - Dikonfirmasi oleh: nama admin
|
||||
│ - Tanggal konfirmasi
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
└─ Status = 'rejected' → [Tampilkan badge: "Ditolak"]
|
||||
↓
|
||||
[Tampilkan alasan penolakan]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Konfirmasi Pembayaran Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin mengkonfirmasi pembayaran tiket.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman detail order]
|
||||
↓
|
||||
[Admin memeriksa bukti pembayaran]
|
||||
↓
|
||||
{Bukti pembayaran valid?}
|
||||
├─ NO → [Admin klik "Tolak Pembayaran"] → [Lihat flowchart #4]
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin klik tombol "Konfirmasi Pembayaran"]
|
||||
↓
|
||||
[Tampilkan konfirmasi SweetAlert:]
|
||||
"Yakin ingin konfirmasi pembayaran?"
|
||||
↓
|
||||
{Admin konfirmasi?}
|
||||
├─ NO (Batal) → [Tutup dialog] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: ambil ticket_order berdasarkan ID]
|
||||
↓
|
||||
{Order ditemukan?}
|
||||
├─ NO → [Error: Order tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Update tabel ticket_orders:]
|
||||
- status = 'confirmed'
|
||||
- confirmed_at = waktu sekarang
|
||||
- confirmed_by = admin_id yang login
|
||||
- rejection_note = null
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Order tiket berhasil dikonfirmasi"
|
||||
↓
|
||||
[Refresh halaman detail order]
|
||||
↓
|
||||
[Tampilkan badge "Confirmed"]
|
||||
↓
|
||||
[Hide tombol konfirmasi/tolak]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Tolak Pembayaran Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin menolak pembayaran tiket dengan alasan.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman detail order]
|
||||
↓
|
||||
[Admin memeriksa bukti pembayaran]
|
||||
↓
|
||||
{Bukti pembayaran tidak valid?}
|
||||
├─ NO → [Admin klik "Konfirmasi"] → [Lihat flowchart #3]
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin klik tombol "Tolak Pembayaran"]
|
||||
↓
|
||||
[Tampilkan modal form penolakan]
|
||||
↓
|
||||
[Tampilkan textarea untuk alasan penolakan]
|
||||
↓
|
||||
[Admin mengetik alasan penolakan]
|
||||
↓
|
||||
[Admin klik "Submit"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Alasan penolakan terisi?}
|
||||
├─ NO → [Error: "Alasan penolakan wajib diisi"]
|
||||
│ ↓
|
||||
│ [Kembali ke modal]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: ambil ticket_order berdasarkan ID]
|
||||
↓
|
||||
{Order ditemukan?}
|
||||
├─ NO → [Error: Order tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Update tabel ticket_orders:]
|
||||
- status = 'rejected'
|
||||
- confirmed_by = admin_id yang login
|
||||
- rejection_note = alasan dari admin
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Order tiket ditolak"
|
||||
↓
|
||||
[Refresh halaman detail order]
|
||||
↓
|
||||
[Tampilkan badge "Rejected"]
|
||||
↓
|
||||
[Tampilkan alasan penolakan]
|
||||
↓
|
||||
[Hide tombol konfirmasi/tolak]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Verifikasi Pembayaran Booking
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin memverifikasi pembayaran booking pendopo.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin mengakses menu "Booking"]
|
||||
↓
|
||||
[Query database: ambil semua bookings]
|
||||
↓
|
||||
[Include relasi: user, place]
|
||||
↓
|
||||
[Urutkan: terbaru ke terlama]
|
||||
↓
|
||||
[Tampilkan tabel booking:]
|
||||
- Kode Booking
|
||||
- Nama User
|
||||
- Tempat
|
||||
- Tanggal Booking
|
||||
- Total Harga
|
||||
- Status
|
||||
- Aksi (Detail)
|
||||
↓
|
||||
[Admin klik "Detail" pada booking]
|
||||
↓
|
||||
[Query database: ambil booking berdasarkan ID]
|
||||
↓
|
||||
[Tampilkan detail booking:]
|
||||
- Kode Booking
|
||||
- Nama Pengunjung
|
||||
- Nomor Telepon
|
||||
- Alamat
|
||||
- Tanggal Booking
|
||||
- Total Harga
|
||||
- Catatan
|
||||
- Bukti Pembayaran
|
||||
↓
|
||||
{Status = 'pending'?}
|
||||
├─ YES → [Tampilkan tombol:]
|
||||
│ - "Konfirmasi" (hijau)
|
||||
│ - "Tolak" (merah)
|
||||
│ ↓
|
||||
│ [Admin klik salah satu tombol]
|
||||
│ ↓
|
||||
│ {Klik Konfirmasi?}
|
||||
│ ├─ YES → [Update status = 'confirmed']
|
||||
│ │ ↓
|
||||
│ │ [Set confirmed_at = now()]
|
||||
│ │ ↓
|
||||
│ │ [Set confirmed_by = admin_id]
|
||||
│ │ ↓
|
||||
│ │ [Notifikasi: "Booking dikonfirmasi"]
|
||||
│ │ ↓
|
||||
│ │ END
|
||||
│ │
|
||||
│ └─ NO (Tolak) → [Tampilkan form alasan]
|
||||
│ ↓
|
||||
│ [Admin input alasan]
|
||||
│ ↓
|
||||
│ [Update status = 'rejected']
|
||||
│ ↓
|
||||
│ [Set rejection_note]
|
||||
│ ↓
|
||||
│ [Notifikasi: "Booking ditolak"]
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
└─ NO (confirmed/rejected) → [Tampilkan status saja]
|
||||
↓
|
||||
[Hide tombol aksi]
|
||||
↓
|
||||
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. **Manual Input** (Parallelogram with slanted top) - Input manual admin
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Admin Action**: Biru tua muda (#BBDEFB)
|
||||
- **Confirm**: Hijau muda (#C8E6C9)
|
||||
- **Reject**: Merah muda (#FFCDD2)
|
||||
- **Pending**: Kuning muda (#FFF9C4)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan Admin dan System
|
||||
- Tandai proses verifikasi dengan warna khusus
|
||||
- Gunakan connector yang jelas untuk decision branch
|
||||
- Tambahkan notes untuk status order
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Verifikasi Pembayaran Admin
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,287 @@
|
|||
# Flowchart - Fitur QR Scanner Verifikasi Tiket
|
||||
|
||||
## Daftar Isi
|
||||
1. [Scan QR Code Tiket](#1-scan-qr-code-tiket)
|
||||
2. [Input Manual Kode Tiket](#2-input-manual-kode-tiket)
|
||||
3. [Verifikasi Tiket](#3-verifikasi-tiket)
|
||||
4. [Tandai Tiket Sebagai Dipakai](#4-tandai-tiket-sebagai-dipakai)
|
||||
|
||||
---
|
||||
|
||||
## 1. Scan QR Code Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk scan QR code tiket menggunakan kamera.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin mengakses halaman "Verifikasi Tiket"]
|
||||
↓
|
||||
[Tampilkan 2 metode verifikasi:]
|
||||
- Scan QR Code (aktif)
|
||||
- Input Manual
|
||||
↓
|
||||
[Initialize html5-qrcode library]
|
||||
↓
|
||||
[Request akses kamera]
|
||||
↓
|
||||
{Izin kamera diberikan?}
|
||||
├─ NO → [Tampilkan error: "Tidak dapat mengakses kamera"]
|
||||
│ ↓
|
||||
│ [Sarankan gunakan Input Manual]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Tampilkan preview kamera]
|
||||
↓
|
||||
[Tampilkan frame scanner dengan overlay]
|
||||
↓
|
||||
[Mulai scanning dengan fps: 10]
|
||||
↓
|
||||
[Loop: Deteksi QR code]
|
||||
↓
|
||||
┌─────────────────────────┐
|
||||
│ [Scan frame kamera]
|
||||
│ ↓
|
||||
│ {QR code terdeteksi?}
|
||||
│ ├─ NO → [Lanjut scan frame berikutnya]
|
||||
│ │ ↓
|
||||
│ │ [Ulangi loop]
|
||||
│ │
|
||||
│ └─ YES ↓
|
||||
│ ↓
|
||||
│ [Decode QR code]
|
||||
│ ↓
|
||||
│ [Ambil kode tiket dari QR]
|
||||
│ ↓
|
||||
│ [Stop scanner]
|
||||
│ ↓
|
||||
│ [Hide kamera]
|
||||
│ ↓
|
||||
│ [Tampilkan: "Memproses QR Code..."]
|
||||
│ ↓
|
||||
│ [Submit form dengan kode tiket]
|
||||
│ ↓
|
||||
│ [Lihat flowchart #3: Verifikasi Tiket]
|
||||
└─────────────────────────┘
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 2. Input Manual Kode Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk input kode tiket secara manual tanpa scan QR.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman "Verifikasi Tiket"]
|
||||
↓
|
||||
[Admin klik metode "Input Manual"]
|
||||
↓
|
||||
[Stop scanner QR (jika aktif)]
|
||||
↓
|
||||
[Hide section QR scanner]
|
||||
↓
|
||||
[Tampilkan section input manual]
|
||||
↓
|
||||
[Tampilkan form input:]
|
||||
- Input text untuk kode tiket
|
||||
- Placeholder: "AT-XXXXX"
|
||||
- Tombol "Cek Tiket"
|
||||
↓
|
||||
[Admin mengetik kode tiket]
|
||||
↓
|
||||
[Admin klik tombol "Cek Tiket"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Kode tiket terisi?}
|
||||
├─ NO → [Error: "Kode tiket wajib diisi"]
|
||||
│ ↓
|
||||
│ [Focus ke input]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Submit form dengan kode tiket]
|
||||
↓
|
||||
[Lihat flowchart #3: Verifikasi Tiket]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Verifikasi Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk memverifikasi kode tiket dan menampilkan hasilnya.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Terima kode tiket dari QR scan atau input manual]
|
||||
↓
|
||||
[Query database: cari ticket_order_items]
|
||||
↓
|
||||
[WHERE ticket_code = kode yang diinput]
|
||||
↓
|
||||
[Include relasi:]
|
||||
- order.user
|
||||
- ticket
|
||||
↓
|
||||
{Tiket ditemukan?}
|
||||
├─ NO → [Tampilkan error: "Tiket tidak ditemukan"]
|
||||
│ ↓
|
||||
│ [Tampilkan tombol "Scan Lagi"]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Ambil data tiket lengkap]
|
||||
↓
|
||||
[Cek status tiket]
|
||||
↓
|
||||
{Tiket sudah dipakai (is_used = true)?}
|
||||
├─ YES → [Tampilkan card hasil dengan border merah]
|
||||
│ ↓
|
||||
│ [Tampilkan informasi:]
|
||||
│ - Kode Tiket
|
||||
│ - Nama Pemesan
|
||||
│ - Jenis Tiket
|
||||
│ - Tanggal Kunjungan
|
||||
│ - Status: "Sudah Dipakai" (badge merah)
|
||||
│ ↓
|
||||
│ [Hide tombol "Tandai Sebagai Dipakai"]
|
||||
│ ↓
|
||||
│ [Tampilkan tombol "Scan Lagi"]
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
└─ NO (is_used = false) → [Tampilkan card hasil dengan border hijau]
|
||||
↓
|
||||
[Tampilkan informasi:]
|
||||
- Kode Tiket
|
||||
- Nama Pemesan
|
||||
- Jenis Tiket
|
||||
- Tanggal Kunjungan
|
||||
- Status: "Valid" (badge hijau)
|
||||
↓
|
||||
[Tampilkan tombol "Tandai Sebagai Dipakai"]
|
||||
↓
|
||||
[Tampilkan tombol "Scan Lagi"]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Tandai Tiket Sebagai Dipakai
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk menandai tiket yang sudah digunakan.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin melihat hasil verifikasi tiket valid]
|
||||
↓
|
||||
[Admin klik tombol "Tandai Sebagai Dipakai"]
|
||||
↓
|
||||
[Submit form dengan:]
|
||||
- ticket_code
|
||||
- mark_used = 1
|
||||
↓
|
||||
[Query database: cari ticket_order_items]
|
||||
↓
|
||||
[WHERE ticket_code = kode tiket]
|
||||
↓
|
||||
{Tiket ditemukan?}
|
||||
├─ NO → [Error: "Tiket tidak ditemukan"] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Tiket sudah dipakai?}
|
||||
├─ YES → [Error: "Tiket sudah ditandai dipakai sebelumnya"]
|
||||
│ ↓
|
||||
│ [Kembali ke halaman verifikasi]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[Update tabel ticket_order_items:]
|
||||
- is_used = true
|
||||
- used_at = waktu sekarang
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Tiket berhasil ditandai sebagai dipakai"
|
||||
↓
|
||||
[Refresh halaman verifikasi]
|
||||
↓
|
||||
[Tampilkan hasil dengan status "Sudah Dipakai"]
|
||||
↓
|
||||
[Hide tombol "Tandai Sebagai Dipakai"]
|
||||
↓
|
||||
[Tampilkan tombol "Scan Lagi"]
|
||||
↓
|
||||
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. **Manual Operation** (Trapezoid) - Operasi manual admin
|
||||
7. **Loop** (Hexagon) - Perulangan
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Camera/Scanner**: Biru tua muda (#BBDEFB)
|
||||
- **Valid**: Hijau muda (#C8E6C9)
|
||||
- **Used/Invalid**: Merah muda (#FFCDD2)
|
||||
- **Loop**: Oranye muda (#FFE0B2)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan Admin, Camera, dan System
|
||||
- Tandai proses scanning dengan warna khusus
|
||||
- Gunakan loop symbol untuk proses scanning berulang
|
||||
- Tambahkan notes untuk library yang digunakan (html5-qrcode)
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: QR Scanner Verifikasi Tiket
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
# Flowchart - Fitur Manajemen Tiket Admin
|
||||
|
||||
## Daftar Isi
|
||||
1. [Lihat Daftar Tiket](#1-lihat-daftar-tiket)
|
||||
2. [Tambah Tiket Baru](#2-tambah-tiket-baru)
|
||||
3. [Edit Tiket](#3-edit-tiket)
|
||||
4. [Hapus Tiket](#4-hapus-tiket)
|
||||
5. [Toggle Status Aktif Tiket](#5-toggle-status-aktif-tiket)
|
||||
|
||||
---
|
||||
|
||||
## 1. Lihat Daftar Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin melihat daftar semua tiket.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Admin mengakses menu "Tiket"]
|
||||
↓
|
||||
[Query database: ambil semua tickets]
|
||||
↓
|
||||
[Urutkan berdasarkan ID]
|
||||
↓
|
||||
[Tampilkan tabel tiket:]
|
||||
- Nama Tiket
|
||||
- Harga
|
||||
- Deskripsi
|
||||
- Status (Aktif/Nonaktif)
|
||||
- Aksi (Edit, Hapus)
|
||||
↓
|
||||
[Tampilkan tombol "Tambah Tiket"]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Tambah Tiket Baru
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin menambah tiket baru.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar tiket]
|
||||
↓
|
||||
[Admin klik tombol "Tambah Tiket"]
|
||||
↓
|
||||
[Redirect ke halaman form tambah tiket]
|
||||
↓
|
||||
[Tampilkan form:]
|
||||
- Nama Tiket
|
||||
- Harga
|
||||
- Deskripsi
|
||||
- Status Aktif (checkbox)
|
||||
↓
|
||||
[Admin mengisi form]
|
||||
↓
|
||||
[Admin klik tombol "Simpan"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama tiket terisi?}
|
||||
├─ NO → [Error: "Nama tiket wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Harga terisi dan valid?}
|
||||
├─ NO → [Error: "Harga wajib diisi dan harus angka"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Harga >= 0?}
|
||||
├─ NO → [Error: "Harga tidak boleh negatif"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Simpan data ke tabel tickets:]
|
||||
- name
|
||||
- price
|
||||
- description
|
||||
- is_active (default: true)
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Tiket berhasil ditambahkan"
|
||||
↓
|
||||
[Redirect ke halaman daftar tiket]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 3. Edit Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin mengedit data tiket.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar tiket]
|
||||
↓
|
||||
[Admin klik tombol "Edit" pada tiket]
|
||||
↓
|
||||
[Query database: ambil tiket berdasarkan ID]
|
||||
↓
|
||||
{Tiket ditemukan?}
|
||||
├─ NO → [Error 404: Tiket tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Redirect ke halaman form edit tiket]
|
||||
↓
|
||||
[Tampilkan form dengan data tiket:]
|
||||
- Nama Tiket (terisi)
|
||||
- Harga (terisi)
|
||||
- Deskripsi (terisi)
|
||||
- Status Aktif (checked/unchecked)
|
||||
↓
|
||||
[Admin mengubah data]
|
||||
↓
|
||||
[Admin klik tombol "Update"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama tiket terisi?}
|
||||
├─ NO → [Error: "Nama tiket wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Harga terisi dan valid?}
|
||||
├─ NO → [Error: "Harga wajib diisi dan harus angka"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Harga >= 0?}
|
||||
├─ NO → [Error: "Harga tidak boleh negatif"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Update tabel tickets:]
|
||||
- name
|
||||
- price
|
||||
- description
|
||||
- is_active
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Tiket berhasil diupdate"
|
||||
↓
|
||||
[Redirect ke halaman daftar tiket]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Hapus Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk admin menghapus tiket.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman daftar tiket]
|
||||
↓
|
||||
[Admin klik tombol "Hapus" pada tiket]
|
||||
↓
|
||||
[Tampilkan konfirmasi SweetAlert:]
|
||||
"Yakin ingin menghapus tiket ini?"
|
||||
↓
|
||||
{Admin konfirmasi?}
|
||||
├─ NO (Batal) → [Tutup dialog] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: ambil tiket berdasarkan ID]
|
||||
↓
|
||||
{Tiket ditemukan?}
|
||||
├─ NO → [Error: "Tiket tidak ditemukan"] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Cek apakah tiket pernah digunakan]
|
||||
↓
|
||||
[Query: cek ticket_order_items dengan ticket_id ini]
|
||||
↓
|
||||
{Tiket pernah digunakan?}
|
||||
├─ YES → [Error: "Tiket tidak dapat dihapus karena sudah pernah digunakan"]
|
||||
│ ↓
|
||||
│ [Sarankan: nonaktifkan tiket saja]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[Hapus tiket dari database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Tiket berhasil dihapus"
|
||||
↓
|
||||
[Refresh halaman daftar tiket]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Toggle Status Aktif Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk mengaktifkan/menonaktifkan tiket.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[Admin di halaman edit tiket]
|
||||
↓
|
||||
[Tampilkan checkbox "Status Aktif"]
|
||||
↓
|
||||
{Tiket saat ini aktif?}
|
||||
├─ YES → [Checkbox checked]
|
||||
└─ NO → [Checkbox unchecked]
|
||||
↓
|
||||
[Admin toggle checkbox]
|
||||
↓
|
||||
[Admin klik tombol "Update"]
|
||||
↓
|
||||
[Update tabel tickets:]
|
||||
- is_active = nilai checkbox (true/false)
|
||||
↓
|
||||
{is_active = true?}
|
||||
├─ YES → [Tiket akan muncul di halaman user]
|
||||
│ ↓
|
||||
│ [Tiket dapat dibeli]
|
||||
│ ↓
|
||||
│ [Notifikasi: "Tiket diaktifkan"]
|
||||
│
|
||||
└─ NO → [Tiket tidak muncul di halaman user]
|
||||
↓
|
||||
[Tiket tidak dapat dibeli]
|
||||
↓
|
||||
[Notifikasi: "Tiket dinonaktifkan"]
|
||||
↓
|
||||
[Redirect ke halaman daftar tiket]
|
||||
↓
|
||||
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. **Document** (Rectangle with wavy bottom) - Form
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Form**: Biru tua muda (#BBDEFB)
|
||||
- **Create**: Hijau muda (#C8E6C9)
|
||||
- **Update**: Biru muda (#B3E5FC)
|
||||
- **Delete**: Merah muda (#FFCDD2)
|
||||
- **Toggle**: Oranye muda (#FFE0B2)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan Admin dan System
|
||||
- Tandai operasi CRUD dengan warna berbeda
|
||||
- Gunakan connector yang jelas untuk decision branch
|
||||
- Tambahkan notes untuk validasi penting
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Manajemen Tiket Admin
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
# Flowchart - Fitur Pembelian Tiket
|
||||
|
||||
## Daftar Isi
|
||||
1. [Lihat Daftar Tiket](#1-lihat-daftar-tiket)
|
||||
2. [Beli Tiket](#2-beli-tiket)
|
||||
3. [Upload Bukti Pembayaran](#3-upload-bukti-pembayaran)
|
||||
4. [Download Tiket](#4-download-tiket)
|
||||
|
||||
---
|
||||
|
||||
## 1. Lihat Daftar Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk melihat daftar tiket yang tersedia.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ YES → [Tampilkan SweetAlert: "Admin tidak dapat membeli tiket"]
|
||||
│ ↓
|
||||
│ [Redirect ke dashboard admin]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[Query database: ambil tiket dengan is_active = true]
|
||||
↓
|
||||
[Filter: name = "Tiket Masuk"]
|
||||
↓
|
||||
{Tiket ditemukan?}
|
||||
├─ NO → [Query: ambil semua tiket aktif]
|
||||
│ ↓
|
||||
│ [Tampilkan tiket pertama]
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Tampilkan halaman pembelian tiket]
|
||||
↓
|
||||
[Tampilkan informasi tiket:]
|
||||
- Nama tiket
|
||||
- Harga
|
||||
- Deskripsi
|
||||
↓
|
||||
[Tampilkan form pembelian]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Beli Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk proses pembelian tiket lengkap.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User di halaman pembelian tiket]
|
||||
↓
|
||||
[User pilih tanggal kunjungan]
|
||||
↓
|
||||
<Validasi tanggal>
|
||||
↓
|
||||
{Tanggal >= hari ini?}
|
||||
├─ NO → [Error: "Tanggal tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[User pilih jenis tiket]
|
||||
↓
|
||||
[User tentukan jumlah tiket (1-20)]
|
||||
↓
|
||||
{Jumlah valid (1-20)?}
|
||||
├─ NO → [Error: "Jumlah tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Hitung total harga = jumlah × harga tiket]
|
||||
↓
|
||||
[Tampilkan ringkasan pesanan]
|
||||
↓
|
||||
[User klik "Lanjutkan Pembayaran"]
|
||||
↓
|
||||
[Mulai database transaction]
|
||||
↓
|
||||
[Generate kode order unik (AT-XXXXX)]
|
||||
↓
|
||||
[Simpan data ke tabel ticket_orders:]
|
||||
- user_id
|
||||
- order_code
|
||||
- visit_date
|
||||
- total_qty
|
||||
- total_price
|
||||
- status = 'pending'
|
||||
↓
|
||||
[Loop untuk setiap tiket yang dibeli]
|
||||
↓
|
||||
┌─────────────────────────┐
|
||||
│ [Generate kode tiket unik (AT-XXXXX)]
|
||||
│ ↓
|
||||
│ [Generate QR code SVG]
|
||||
│ ↓
|
||||
│ [Simpan QR code ke /public/qrcodes/]
|
||||
│ ↓
|
||||
│ [Simpan data ke ticket_order_items:]
|
||||
│ - ticket_order_id
|
||||
│ - ticket_id
|
||||
│ - ticket_code
|
||||
│ - qr_code_path
|
||||
│ - qty = 1
|
||||
│ - price
|
||||
│ - is_used = false
|
||||
│ ↓
|
||||
│ [Ulangi untuk tiket berikutnya]
|
||||
└─────────────────────────┘
|
||||
↓
|
||||
[Commit transaction]
|
||||
↓
|
||||
[Redirect ke halaman pembayaran]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Upload Bukti Pembayaran
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk upload bukti transfer pembayaran tiket.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User di halaman pembayaran]
|
||||
↓
|
||||
[Tampilkan informasi order:]
|
||||
- Kode order
|
||||
- Total harga
|
||||
- Daftar tiket
|
||||
↓
|
||||
[Query database: ambil daftar rekening bank aktif]
|
||||
↓
|
||||
[Tampilkan nomor rekening bank]
|
||||
↓
|
||||
[User melakukan transfer ke rekening]
|
||||
↓
|
||||
[User klik "Upload Bukti Pembayaran"]
|
||||
↓
|
||||
[User pilih file bukti transfer]
|
||||
↓
|
||||
<Validasi file>
|
||||
↓
|
||||
{File dipilih?}
|
||||
├─ NO → [Error: "File wajib dipilih"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Format file valid (jpg, jpeg, png, pdf)?}
|
||||
├─ NO → [Error: "Format file tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Ukuran file <= 5MB?}
|
||||
├─ NO → [Error: "Ukuran file terlalu besar"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Generate nama file unik:]
|
||||
Format: YYYYMMDDHHMMSS_proof_uniqid.ext
|
||||
↓
|
||||
[Simpan file ke /public/payment-proofs/]
|
||||
↓
|
||||
[Update tabel ticket_orders:]
|
||||
- payment_proof = path file
|
||||
- status tetap 'pending'
|
||||
↓
|
||||
[Tampilkan notifikasi sukses]
|
||||
↓
|
||||
[Redirect ke halaman download tiket]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Download Tiket
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk download tiket setelah pembayaran dikonfirmasi.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User mengakses halaman download]
|
||||
↓
|
||||
[Query database: ambil order berdasarkan order_code]
|
||||
↓
|
||||
{Order ditemukan?}
|
||||
├─ NO → [Error 404: Order tidak ditemukan] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Order milik user yang login?}
|
||||
├─ NO → [Error 403: Unauthorized] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Ambil semua ticket_order_items untuk order ini]
|
||||
↓
|
||||
[Cek status order]
|
||||
↓
|
||||
{Status = 'confirmed'?}
|
||||
├─ YES → [Tampilkan halaman download]
|
||||
│ ↓
|
||||
│ [Tampilkan pesan: "Pembayaran berhasil diverifikasi"]
|
||||
│ ↓
|
||||
│ [Tampilkan daftar tiket dengan QR code]
|
||||
│ ↓
|
||||
│ [Aktifkan tombol "Download PDF"]
|
||||
│ ↓
|
||||
│ [Aktifkan tombol "Print Tiket"]
|
||||
│ ↓
|
||||
│ [User klik tombol download]
|
||||
│ ↓
|
||||
│ [Generate PDF tiket dengan:]
|
||||
│ - Kode tiket
|
||||
│ - QR code
|
||||
│ - Nama pengunjung
|
||||
│ - Tanggal kunjungan
|
||||
│ - Jenis tiket
|
||||
│ ↓
|
||||
│ [Download file PDF]
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
├─ Status = 'pending' → [Tampilkan halaman download]
|
||||
│ ↓
|
||||
│ [Tampilkan pesan: "Menunggu verifikasi admin"]
|
||||
│ ↓
|
||||
│ [Tampilkan daftar tiket]
|
||||
│ ↓
|
||||
│ [Disabled tombol "Download PDF" (abu-abu)]
|
||||
│ ↓
|
||||
│ [Disabled tombol "Print Tiket" (abu-abu)]
|
||||
│ ↓
|
||||
│ [Tampilkan alert: "Menunggu verifikasi admin"]
|
||||
│ ↓
|
||||
│ END
|
||||
│
|
||||
└─ Status = 'rejected' → [Tampilkan halaman download]
|
||||
↓
|
||||
[Tampilkan pesan: "Pembayaran ditolak"]
|
||||
↓
|
||||
[Tampilkan alasan penolakan]
|
||||
↓
|
||||
[Disabled tombol download]
|
||||
↓
|
||||
[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. **Predefined Process** (Rectangle with double lines) - Subprocess
|
||||
6. **Loop** (Hexagon) - Perulangan
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Error**: Merah muda (#FFCDD2)
|
||||
- **Success**: Hijau muda (#C8E6C9)
|
||||
- **Loop**: Oranye muda (#FFE0B2)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan User dan System
|
||||
- Tandai proses database dengan warna berbeda
|
||||
- Gunakan connector yang jelas untuk decision branch
|
||||
- Tambahkan notes untuk penjelasan kompleks
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Pembelian Tiket
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
|
|
@ -0,0 +1,345 @@
|
|||
# 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
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
# Flowchart - Fitur Profil User
|
||||
|
||||
## Daftar Isi
|
||||
1. [Lihat Profil User](#1-lihat-profil-user)
|
||||
2. [Edit Profil User](#2-edit-profil-user)
|
||||
3. [Ubah Password User](#3-ubah-password-user)
|
||||
|
||||
---
|
||||
|
||||
## 1. Lihat Profil User
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk user melihat profil sendiri.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
{User sudah login?}
|
||||
├─ NO → [Redirect ke halaman login] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{User adalah admin?}
|
||||
├─ YES → [Redirect ke profil admin] → END
|
||||
└─ NO ↓
|
||||
↓
|
||||
[User klik menu "Profil Saya" di dropdown navbar]
|
||||
↓
|
||||
[Query database: users]
|
||||
↓
|
||||
[Filter: id = user yang login]
|
||||
↓
|
||||
{User ditemukan?}
|
||||
├─ NO → [Error: User tidak ditemukan] → [Logout] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Tampilkan halaman profil]
|
||||
↓
|
||||
[Tampilkan informasi user:]
|
||||
- Nama
|
||||
- Email
|
||||
- Nomor Telepon
|
||||
- Alamat
|
||||
- Tanggal Bergabung
|
||||
↓
|
||||
[Tampilkan tombol "Edit Profil"]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Edit Profil User
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk user mengedit profil sendiri.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User di halaman profil]
|
||||
↓
|
||||
[User klik tombol "Edit Profil"]
|
||||
↓
|
||||
[Tampilkan form edit profil dengan data user:]
|
||||
- Nama (terisi)
|
||||
- Email (terisi)
|
||||
- Nomor Telepon (terisi/kosong)
|
||||
- Alamat (terisi/kosong)
|
||||
↓
|
||||
[User mengubah data]
|
||||
↓
|
||||
[User klik tombol "Update Profil"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Nama terisi?}
|
||||
├─ NO → [Error: "Nama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Format email valid?}
|
||||
├─ NO → [Error: "Format email tidak valid"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: cek email sudah digunakan user lain]
|
||||
↓
|
||||
{Email digunakan user lain?}
|
||||
├─ YES → [Error: "Email sudah terdaftar"] → [Kembali ke form] → END
|
||||
└─ NO ↓
|
||||
↓
|
||||
{Nomor telepon diisi?}
|
||||
├─ YES → {Format nomor telepon valid?}
|
||||
│ ├─ NO → [Error: "Format nomor telepon tidak valid"] → [Kembali ke form] → END
|
||||
│ └─ YES → [Lanjut]
|
||||
└─ NO → [Lanjut]
|
||||
↓
|
||||
[Update tabel users:]
|
||||
- name
|
||||
- email
|
||||
- phone (jika diisi)
|
||||
- address (jika diisi)
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Update session dengan data baru]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Profil berhasil diupdate"
|
||||
↓
|
||||
[Refresh halaman profil]
|
||||
↓
|
||||
END
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Ubah Password User
|
||||
|
||||
### Deskripsi
|
||||
Flowchart untuk user mengubah password sendiri.
|
||||
|
||||
### Flowchart
|
||||
|
||||
```
|
||||
START
|
||||
↓
|
||||
[User di halaman profil]
|
||||
↓
|
||||
[User klik tombol "Ubah Password"]
|
||||
↓
|
||||
[Tampilkan form ubah password:]
|
||||
- Password Lama
|
||||
- Password Baru
|
||||
- Konfirmasi Password Baru
|
||||
↓
|
||||
[User mengisi form]
|
||||
↓
|
||||
[User klik tombol "Update Password"]
|
||||
↓
|
||||
<Validasi input>
|
||||
↓
|
||||
{Password lama terisi?}
|
||||
├─ NO → [Error: "Password lama wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Query database: ambil user yang login]
|
||||
↓
|
||||
[Verifikasi password lama dengan hash]
|
||||
↓
|
||||
{Password lama cocok?}
|
||||
├─ NO → [Error: "Password lama salah"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Password baru terisi?}
|
||||
├─ NO → [Error: "Password baru wajib diisi"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Password baru minimal 8 karakter?}
|
||||
├─ NO → [Error: "Password minimal 8 karakter"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Password baru = Konfirmasi Password?}
|
||||
├─ NO → [Error: "Konfirmasi password tidak cocok"] → [Kembali ke form] → END
|
||||
└─ YES ↓
|
||||
↓
|
||||
{Password baru berbeda dari password lama?}
|
||||
├─ NO → [Error: "Password baru harus berbeda dari password lama"]
|
||||
│ ↓
|
||||
│ [Kembali ke form]
|
||||
│ ↓
|
||||
│ END
|
||||
└─ YES ↓
|
||||
↓
|
||||
[Hash password baru menggunakan bcrypt]
|
||||
↓
|
||||
[Update tabel users:]
|
||||
- password = password baru (hashed)
|
||||
↓
|
||||
[Simpan perubahan ke database]
|
||||
↓
|
||||
[Tampilkan notifikasi sukses:]
|
||||
"Password berhasil diubah"
|
||||
↓
|
||||
[Redirect ke halaman profil]
|
||||
↓
|
||||
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. **Document** (Rectangle with wavy bottom) - Form
|
||||
7. **Manual Input** (Parallelogram with slanted top) - Input user
|
||||
|
||||
### Warna yang Disarankan
|
||||
- **START/END**: Hijau teal (#14B8A6)
|
||||
- **Process**: Biru muda (#E3F2FD)
|
||||
- **Decision**: Kuning (#FFF59D)
|
||||
- **Database Operation**: Ungu muda (#E1BEE7)
|
||||
- **Form**: Biru tua muda (#BBDEFB)
|
||||
- **Update**: Biru muda (#B3E5FC)
|
||||
- **Security Check**: Oranye muda (#FFE0B2)
|
||||
- **Success**: Hijau muda (#C8E6C9)
|
||||
- **Error**: Merah muda (#FFCDD2)
|
||||
|
||||
### Tips
|
||||
- Gunakan swimlane untuk memisahkan User dan System
|
||||
- Tandai proses security check (password verification) dengan warna khusus
|
||||
- Gunakan connector yang jelas untuk decision branch
|
||||
- Tambahkan notes untuk validasi password
|
||||
- Highlight proses hashing password
|
||||
|
||||
### Security Notes
|
||||
- Password lama harus diverifikasi sebelum mengubah password
|
||||
- Password baru harus di-hash menggunakan bcrypt
|
||||
- Password baru harus berbeda dari password lama
|
||||
- Session harus diupdate setelah perubahan data
|
||||
|
||||
---
|
||||
|
||||
**Dibuat**: 25 Februari 2026
|
||||
**Fitur**: Profil User
|
||||
**Sistem**: Banyu Biru Ticketing & Booking System
|
||||
Loading…
Reference in New Issue