septian_airpanaswebsite/flowcharts/user-profile-flowchart.md

Flowchart - Fitur Profil User

Daftar Isi

1. Lihat Profil User
2. Edit Profil 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