septian_airpanaswebsite/flowcharts/auth-flowchart.md

Flowchart - Fitur Autentikasi

Daftar Isi

1. Login
2. Register
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