>
session_id : VARCHAR(50)
message : TEXT
response : TEXT
created_at : DATETIME
updated_at : DATETIME
}
' Relationships
buses ||--o{ users : "afiliasi kru"
routes ||--o{ schedules : "rute"
buses ||--o{ schedules : "armada"
users ||--o{ schedules : "driver 1"
users ||--o{ schedules : "driver 2"
users ||--o{ schedules : "conductor"
users ||--o{ bookings : "customer"
schedules ||--o{ bookings : "jadwal"
bookings ||--o{ booking_seats : "booking"
bookings ||--|| payments : "booking"
bookings ||--o{ tickets : "booking"
users ||--o{ tickets : "scanner"
bookings ||--|| reviews : "booking"
users ||--o{ chat_logs : "customer"
@endum
```
###### Opsi B: Menggunakan Script Mermaid.js (Alternatif)
**Tempat Konversi:** Salin kode di bawah ini lalu tempel di situs **[Mermaid Live Editor (mermaid.live)](https://mermaid.live/)** untuk melihat pratinjau instan dan mengunduh filenya.
```mermaid
erDiagram
users {
int id PK
varchar name
varchar email UK
varchar phone
varchar password
enum role
int bus_id FK
enum crew_role
datetime created_at
datetime updated_at
}
buses {
int id PK
varchar code
varchar name
varchar type
json seat_layout
int total_seats
datetime created_at
datetime updated_at
}
routes {
int id PK
varchar origin
varchar destination
decimal distance_km
int estimated_duration
datetime created_at
datetime updated_at
}
schedules {
int id PK
int route_id FK
int bus_id FK
datetime departure_time
datetime arrival_time
decimal price
enum status
int driver_1_id FK
int driver_2_id FK
int conductor_id FK
datetime created_at
datetime updated_at
}
promos {
int id PK
varchar code UK
enum discount_type
decimal discount_value
date valid_from
date valid_until
int usage_limit
datetime created_at
datetime updated_at
}
bookings {
int id PK
varchar booking_code UK
int user_id FK
int schedule_id FK
decimal total_price
enum payment_status
enum booking_status
datetime created_at
datetime updated_at
}
booking_seats {
int id PK
int booking_id FK
varchar seat_number
varchar passenger_name
}
payments {
int id PK
int booking_id FK
varchar method
decimal amount
varchar transaction_id
enum status
datetime paid_at
}
tickets {
int id PK
int booking_id FK
varchar qr_code
enum status
int scanned_by FK
datetime scanned_at
datetime issued_at
}
reviews {
int id PK
int booking_id FK
int user_id FK
tinyint rating
text comment
enum sentiment
datetime created_at
datetime updated_at
}
chat_logs {
int id PK
int user_id FK
varchar session_id
text message
text response
datetime created_at
datetime updated_at
}
buses ||--o{ users : "bus_id"
routes ||--o{ schedules : "route_id"
buses ||--o{ schedules : "bus_id"
users ||--o{ schedules : "driver_1_id"
users ||--o{ schedules : "driver_2_id"
users ||--o{ schedules : "conductor_id"
users ||--o{ bookings : "user_id"
schedules ||--o{ bookings : "schedule_id"
bookings ||--o{ booking_seats : "booking_id"
bookings ||--|| payments : "booking_id"
bookings ||--o{ tickets : "booking_id"
users ||--o{ tickets : "scanned_by"
bookings ||--|| reviews : "booking_id"
users ||--o{ chat_logs : "user_id"
```
###### Opsi C: Menggunakan Script DBML (dbdiagram.io)
**Tempat Konversi:** Salin kode di bawah ini lalu tempel di situs **[dbdiagram.io](https://dbdiagram.io/)** untuk memvisualisasikan skema database relasional secara interaktif dan menghasilkan kode SQL siap pakai.
```dbml
enum user_role {
customer
admin
petugas
}
enum crew_role_type {
staff
driver_1
driver_2
conductor
}
enum schedule_status {
scheduled
ongoing
completed
cancelled
}
enum discount_type {
percent
fixed
}
enum payment_status_type {
pending
paid
failed
refunded
}
enum booking_status_type {
active
completed
cancelled
}
enum payment_gateway_status {
pending
success
failed
}
enum ticket_status {
issued
boarded
expired
}
enum sentiment_type {
positive
neutral
negative
}
Table users {
id integer [primary key, increment]
name varchar(100)
email varchar(100) [unique]
phone varchar(20)
password varchar(255)
role user_role [default: 'customer']
bus_id integer [null]
crew_role crew_role_type [default: 'staff']
created_at datetime
updated_at datetime
}
Table buses {
id integer [primary key, increment]
code varchar(20)
name varchar(100)
type varchar(50)
seat_layout json
total_seats integer
created_at datetime
updated_at datetime
}
Table routes {
id integer [primary key, increment]
origin varchar(100)
destination varchar(100)
distance_km decimal(8,2)
estimated_duration integer
created_at datetime
updated_at datetime
}
Table schedules {
id integer [primary key, increment]
route_id integer
bus_id integer
departure_time datetime
arrival_time datetime
price decimal(10,2)
status schedule_status [default: 'scheduled']
driver_1_id integer [null]
driver_2_id integer [null]
conductor_id integer [null]
created_at datetime
updated_at datetime
}
Table promos {
id integer [primary key, increment]
code varchar(30) [unique]
discount_type discount_type
discount_value decimal(10,2)
valid_from date
valid_until date
usage_limit integer
created_at datetime
updated_at datetime
}
Table bookings {
id integer [primary key, increment]
booking_code varchar(20) [unique]
user_id integer
schedule_id integer
total_price decimal(10,2)
payment_status payment_status_type [default: 'pending']
booking_status booking_status_type [default: 'active']
created_at datetime
updated_at datetime
}
Table booking_seats {
id integer [primary key, increment]
booking_id integer
seat_number varchar(10)
passenger_name varchar(100)
}
Table payments {
id integer [primary key, increment]
booking_id integer
method varchar(50)
amount decimal(10,2)
transaction_id varchar(100)
status payment_gateway_status [default: 'pending']
paid_at datetime
}
Table tickets {
id integer [primary key, increment]
booking_id integer
qr_code varchar(255)
status ticket_status [default: 'issued']
scanned_by integer [null]
scanned_at datetime
issued_at datetime
}
Table reviews {
id integer [primary key, increment]
booking_id integer
user_id integer
rating tinyint
comment text
sentiment sentiment_type
created_at datetime
updated_at datetime
}
Table chat_logs {
id integer [primary key, increment]
user_id integer [null]
session_id varchar(50)
message text
response text
created_at datetime
updated_at datetime
}
// Relationships
Ref: buses.id < users.bus_id [update: cascade, delete: set null]
Ref: routes.id < schedules.route_id
Ref: buses.id < schedules.bus_id
Ref: users.id < schedules.driver_1_id [update: cascade, delete: set null]
Ref: users.id < schedules.driver_2_id [update: cascade, delete: set null]
Ref: users.id < schedules.conductor_id [update: cascade, delete: set null]
Ref: users.id < bookings.user_id
Ref: schedules.id < bookings.schedule_id
Ref: bookings.id < booking_seats.booking_id
Ref: bookings.id - payments.booking_id // one-to-one
Ref: bookings.id < tickets.booking_id
Ref: users.id < tickets.scanned_by [update: cascade, delete: set null]
Ref: bookings.id - reviews.booking_id // one-to-one
Ref: users.id < chat_logs.user_id
```
#### 3.4.2. Kamus Data (Data Dictionary)
Kamus data menjelaskan secara rinci spesifikasi teknis dari setiap tabel yang digunakan dalam sistem E-Ticketing Bus Online, meliputi nama kolom, tipe data, kunci (key), serta keterangan fungsinya.
##### 1. Tabel users
Tabel ini digunakan untuk menyimpan seluruh data pengguna aplikasi yang terbagi menjadi tiga peran utama (*customer*, *admin*, *petugas*), serta kru bus (*driver* dan *conductor*).
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik untuk setiap pengguna
* **name** (VARCHAR(100)): Nama lengkap pengguna
* **email** (VARCHAR(100), Unique): Alamat email unik untuk login
* **phone** (VARCHAR(20)): Nomor telepon aktif pengguna
* **password** (VARCHAR(255)): Kata sandi pengguna yang di-hash dengan BCrypt
* **role** (ENUM('customer', 'admin', 'petugas')): Hak akses sistem (default: 'customer')
* **bus_id** (INT(11) unsigned, FK (buses.id)): Afiliasi bus untuk kru (Null jika bukan kru)
* **crew_role** (ENUM('staff', 'driver_1', 'driver_2', 'conductor')): Peran spesifik kru bus (default: 'staff')
* **created_at** (DATETIME): Tanggal dan waktu akun didaftarkan
* **updated_at** (DATETIME): Tanggal dan waktu data akun diperbarui
##### 2. Tabel buses
Tabel ini digunakan untuk menyimpan informasi armada bus PO Bus yang dimiliki.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik untuk setiap armada bus
* **code** (VARCHAR(20)): Kode identifikasi bus (misal: PO-001)
* **name** (VARCHAR(100)): Nama atau lambung bus
* **type** (VARCHAR(50)): Tipe kelas bus (misal: Eksekutif, Ekonomi)
* **seat_layout** (JSON): Struktur tata letak denah kursi bus
* **total_seats** (INT(11)): Kapasitas total kursi bus
* **created_at** (DATETIME): Tanggal dan waktu armada bus ditambahkan
* **updated_at** (DATETIME): Tanggal dan waktu data armada diperbarui
##### 3. Tabel routes
Tabel ini digunakan untuk menyimpan data rute perjalanan atau trayek antarkota yang dilayani.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik untuk setiap rute
* **origin** (VARCHAR(100)): Terminal/Kota asal keberangkatan
* **destination** (VARCHAR(100)): Terminal/Kota tujuan akhir perjalanan
* **distance_km** (DECIMAL(8,2)): Jarak tempuh rute dalam satuan kilometer
* **estimated_duration** (INT(11)): Estimasi durasi perjalanan (dalam menit)
* **created_at** (DATETIME): Tanggal dan waktu rute ditambahkan
* **updated_at** (DATETIME): Tanggal dan waktu data rute diperbarui
##### 4. Tabel schedules
Tabel ini digunakan untuk menyimpan jadwal keberangkatan bus beserta penetapan kru bus yang bertugas dan harga tiket.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik untuk setiap jadwal perjalanan
* **route_id** (INT(11) unsigned, FK (routes.id)): Rute perjalanan yang ditempuh
* **bus_id** (INT(11) unsigned, FK (buses.id)): Armada bus yang ditugaskan
* **departure_time** (DATETIME): Tanggal dan jam keberangkatan bus
* **arrival_time** (DATETIME): Estimasi tanggal dan jam kedatangan
* **price** (DECIMAL(10,2)): Harga dasar tiket per kursi
* **status** (ENUM('scheduled', 'ongoing', 'completed', 'cancelled')): Status operasional jadwal (default: 'scheduled')
* **driver_1_id** (INT(11) unsigned, FK (users.id)): ID Supir Utama (driver 1) yang bertugas
* **driver_2_id** (INT(11) unsigned, FK (users.id)): ID Supir Cadangan (driver 2) jika ada
* **conductor_id** (INT(11) unsigned, FK (users.id)): ID Kondektur yang bertugas
* **created_at** (DATETIME): Tanggal dan waktu jadwal dibuat
* **updated_at** (DATETIME): Tanggal dan waktu jadwal diperbarui
##### 5. Tabel promos
Tabel ini digunakan untuk menyimpan data voucher promo diskon yang dapat diklaim saat checkout tiket.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik untuk setiap promo
* **code** (VARCHAR(30), Unique): Kode promo/kupon unik (misal: MUDIKAMAN)
* **discount_type** (ENUM('percent', 'fixed')): Jenis diskon (persentase atau nominal tetap)
* **discount_value** (DECIMAL(10,2)): Nilai potongan harga
* **valid_from** (DATE): Batas awal tanggal kupon aktif
* **valid_until** (DATE): Batas akhir tanggal kupon aktif
* **usage_limit** (INT(11)): Kuota batas maksimum penggunaan kupon
* **created_at** (DATETIME): Tanggal dan waktu promo dibuat
* **updated_at** (DATETIME): Tanggal dan waktu promo diperbarui
##### 6. Tabel bookings
Tabel ini digunakan untuk menyimpan data transaksi reservasi tiket bus oleh customer.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik untuk setiap booking
* **booking_code** (VARCHAR(20), Unique): Kode unik invoice pemesanan
* **user_id** (INT(11) unsigned, FK (users.id)): ID customer yang melakukan reservasi
* **schedule_id** (INT(11) unsigned, FK (schedules.id)): ID jadwal perjalanan yang dipesan
* **total_price** (DECIMAL(10,2)): Total tagihan akhir setelah potongan diskon
* **payment_status** (ENUM('pending', 'paid', 'failed', 'refunded')): Status transaksi pembayaran (default: 'pending')
* **booking_status** (ENUM('active', 'completed', 'cancelled')): Status keaktifan reservasi (default: 'active')
* **created_at** (DATETIME): Tanggal dan waktu pesanan dibuat
* **updated_at** (DATETIME): Tanggal dan waktu data pesanan diperbarui
##### 7. Tabel booking_seats
Tabel ini digunakan untuk mencatat detail manifest nama penumpang beserta alokasi nomor kursi yang dipilih pada setiap transaksi booking.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik baris manifest kursi
* **booking_id** (INT(11) unsigned, FK (bookings.id)): Referensi ke transaksi booking induk
* **seat_number** (VARCHAR(10)): Nomor kursi yang dipesan (misal: 1A, 2B)
* **passenger_name** (VARCHAR(100)): Nama penumpang yang menempati kursi tersebut
##### 8. Tabel payments
Tabel ini menyimpan detail transaksi pembayaran digital dari payment gateway Midtrans.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik transaksi pembayaran
* **booking_id** (INT(11) unsigned, FK (bookings.id)): ID booking yang dibayar
* **method** (VARCHAR(50)): Metode pembayaran (misal: bank_transfer, qris)
* **amount** (DECIMAL(10,2)): Jumlah nominal pembayaran yang disetor
* **transaction_id** (VARCHAR(100)): ID transaksi resmi dari Midtrans
* **status** (ENUM('pending', 'success', 'failed')): Status pelunasan pembayaran (default: 'pending')
* **paid_at** (DATETIME): Waktu tepat transaksi terbayar lunas
##### 9. Tabel tickets
Tabel ini mencatat tiket elektronik penumpang yang diterbitkan otomatis setelah pembayaran lunas beserta log scanner boarding petugas.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik tiket elektronik
* **booking_id** (INT(11) unsigned, FK (bookings.id)): ID booking transaksi asal
* **qr_code** (VARCHAR(255)): Data token enkripsi untuk QR Code e-ticket
* **status** (ENUM('issued', 'boarded', 'expired')): Status boarding tiket (default: 'issued')
* **scanned_by** (INT(11) unsigned, FK (users.id)): ID petugas scanner yang memindai tiket
* **scanned_at** (DATETIME): Tanggal dan waktu pemindaian boarding
* **issued_at** (DATETIME): Tanggal dan waktu tiket diterbitkan
##### 10. Tabel reviews
Tabel ini digunakan untuk menyimpan rating, ulasan perjalanan, dan hasil analisis sentimen AI dari penumpang.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik data ulasan
* **booking_id** (INT(11) unsigned, FK (bookings.id)): ID transaksi perjalanan terkait
* **user_id** (INT(11) unsigned, FK (users.id)): ID customer pemberi ulasan
* **rating** (TINYINT(4)): Skor penilaian (rating 1-5 bintang)
* **comment** (TEXT): Isi pesan ulasan tertulis dari customer
* **sentiment** (ENUM('positive', 'neutral', 'negative')): Klasifikasi sentimen otomatis berbasis Gemini AI
* **created_at** (DATETIME): Tanggal dan waktu ulasan dikirim
* **updated_at** (DATETIME): Tanggal dan waktu ulasan diperbarui
##### 11. Tabel chat_logs
Tabel ini menyimpan data log riwayat komunikasi asisten chatbot rekomendasi perjalanan bus berbasis Gemini AI.
**Struktur Kolom:**
* **id** (INT(11) unsigned, PK, Auto Increment): ID unik log pesan chat
* **user_id** (INT(11) unsigned, FK (users.id)): ID customer pengirim chat (Null jika guest)
* **session_id** (VARCHAR(50)): Sesi identifikasi obrolan chat
* **message** (TEXT): Pesan teks pertanyaan dari pengguna
* **response** (TEXT): Jawaban teks balasan dari chatbot Gemini AI
* **created_at** (DATETIME): Tanggal dan waktu pesan dikirim
* **updated_at** (DATETIME): Tanggal dan waktu data log diperbarui
---
### 3.5. Rancangan Antarmuka Pengguna (Mockup UI)
Perancangan antarmuka pengguna (*User Interface/UI*) bertujuan untuk menjembatani interaksi antara aktor (Penumpang, Petugas, dan Admin) dengan sistem secara intuitif, efisien, dan memiliki estetika visual yang premium. Desain antarmuka aplikasi E-Ticketing Bus ini dirancang menggunakan prinsip-prinsip desain modern seperti tata letak yang responsif (*responsive grid*), skema warna bertema gelap dan terang yang harmonis (menggunakan aksen warna biru dongker, putih bersih, dan abu-abu satin), serta tipografi bersih menggunakan Google Fonts (Inter dan Outfit).
Berikut adalah rancangan antarmuka pengguna beserta penjelasan fungsional komponen utama dari setiap halaman:
#### 3.5.1. Halaman Beranda Utama & Chatbot AI (Customer Portal)
Halaman ini merupakan pintu masuk utama penumpang untuk melakukan pemesanan tiket. Halaman ini memadukan form pencarian jadwal bus konvensional dengan *floating widget* chatbot cerdas berbasis AI.
Gambar 3.5.1 Mockup Halaman Beranda Utama & Chatbot AI
**Deskripsi Desain & Layout:**
Desain beranda didominasi oleh spanduk utama (*hero banner*) dengan gradasi warna biru gelap ke nila (*indigo gradient*) yang bersih. Di tengah halaman terdapat panel pencarian tiket dengan efek kaca buram (*glassmorphism*) untuk menonjolkan formulir masukan. Di pojok kanan bawah, terdapat tombol mengambang (*floating button*) berbentuk ikon gelembung pesan yang jika diklik akan membuka jendela obrolan asisten chatbot AI.
**Komponen Utama:**
* **Formulir Input:** Dropdown pilihan kota asal keberangkatan, kota tujuan, pemilih tanggal (*datepicker*), dan tombol "Cari Tiket".
* **Widget Chatbot AI:** Area percakapan interaktif tempat penumpang mengetikkan pertanyaan konsultasi rute atau jam operasional. Chatbot ini terhubung langsung ke API Gemini AI.
**Fungsi & Interaksi:**
Saat penumpang mengklik tombol pencarian, sistem memvalidasi kelengkapan data input dan mengarahkan ke halaman hasil pencarian. Ketika jendela chatbot dibuka, penumpang dapat berkonsultasi secara alami tentang rute terpendek, tarif rata-rata, atau ketersediaan kelas bus, yang dijawab langsung oleh AI dengan memproses basis pengetahuan jadwal bus PO.
#### 3.5.2. Halaman Hasil Pencarian Jadwal Bus
Halaman ini menyajikan daftar jadwal keberangkatan bus yang aktif sesuai rute dan tanggal yang dicari oleh penumpang.
Gambar 3.5.2 Mockup Halaman Hasil Pencarian Jadwal Bus
**Deskripsi Desain & Layout:**
Halaman ini disusun menggunakan struktur baris kartu (*list of card components*) vertikal. Setiap kartu mewakili satu jadwal perjalanan dengan pembagian kolom yang rapi untuk memisahkan informasi waktu, tipe bus, harga, dan sisa tempat duduk.
**Komponen Utama:**
* **Informasi Waktu Keberangkatan & Kedatangan:** Ditampilkan dengan teks berukuran besar berbobot tebal (*bold*), dilengkapi ikon jam dan arah panah.
* **Tag Kelas Armada:** Badge berwarna biru muda untuk kelas "Executive" dan hijau muda untuk "Economy".
* **Informasi Kursi & Harga:** Label sisa kapasitas kursi (misal: "Sisa 12 Kursi") dan harga tiket per kursi yang diformat ke Rupiah tebal.
* **Tombol Interaksi:** Tombol "Pilih Kursi" berwarna biru cerah dengan efek transisi melayang (*hover shadow effect*) saat disorot kursor.
**Fungsi & Interaksi:**
Pengguna dapat memfilter hasil pencarian berdasarkan jam keberangkatan atau rentang harga tiket. Mengklik tombol "Pilih Kursi" akan membawa pengguna masuk ke proses reservasi dinamis.
#### 3.5.3. Halaman Pemesanan & Peta Kursi (Booking Seat Map)
Halaman ini adalah modul interaktif tempat penumpang memilih lokasi kursi yang diinginkan di dalam bus serta mengisi data manifest penumpang.
Gambar 3.5.3 Mockup Halaman Pemesanan & Peta Kursi (Booking Seat Map)
**Deskripsi Desain & Layout:**
Tata letak dibagi menjadi dua kolom utama (*two-column grid layout*). Kolom kiri menyajikan representasi grafis denah susunan kursi di dalam bus (layout 2x2) dengan lorong tengah. Kolom kanan berisi form isian dinamis manifest penumpang sesuai nomor kursi yang dipilih.
**Komponen Utama:**
* **Grid Denah Kursi:** Kotak-kotak kecil dengan nomor kursi (misal: 1A, 1B). Kursi kosong berwarna biru muda dengan batas biru tua. Kursi yang terisi diarsir warna abu-abu gelap dengan ikon tanda silang (tidak dapat diklik). Kursi yang dipilih penumpang berubah warna menjadi hijau cerah.
* **Formulir Manifest:** Input teks dinamis untuk menuliskan "Nama Penumpang" untuk tiap kursi yang diklik.
* **Ringkasan Pesanan & Tombol Checkout:** Menampilkan detail total harga kursi yang dipilih dan tombol "Lanjutkan ke Pembayaran".
**Fungsi & Interaksi:**
Interaksi klik pada peta kursi dikendalikan oleh Javascript di sisi klien. Ketika sebuah kursi diklik, sistem secara otomatis merender satu baris form input nama manifest baru di kolom sebelah kanan secara instan tanpa memuat ulang halaman (*real-time DOM insertion*).
#### 3.5.4. Halaman Pembayaran & Detail Invoice (Payment Gateway)
Halaman ini menampilkan rincian total transaksi pemesanan beserta status tagihan yang terintegrasi dengan gerbang pembayaran Midtrans.
Gambar 3.5.4 Mockup Halaman Pembayaran & Detail Invoice (Payment Gateway)
**Deskripsi Desain & Layout:**
Desain menggunakan tata letak kartu tunggal minimalis (*single card layout*) di tengah layar, memberikan fokus penuh kepada pengguna untuk menyelesaikan transaksi keuangan. Area teks kode booking disajikan menonjol dengan bingkai bergaris putus-putus.
**Komponen Utama:**
* **Detail Invoice:** Kode pemesanan (*booking code*), nama bus, rute perjalanan, tanggal operasional, nomor kursi yang dipesan, dan total nominal tagihan pembayaran.
* **Kotak Input Kode Promo:** Kolom isian teks voucher diskon beserta tombol "Terapkan".
* **Tombol "Bayar Sekarang":** Tombol pembayaran utama yang akan mengaktifkan pustaka JavaScript Midtrans Snap.
**Fungsi & Interaksi:**
Jika pengguna memasukkan kode promo aktif, sistem memproses AJAX request ke database, menghitung potongan harga, dan langsung mengupdate nominal tagihan secara dinamis. Mengklik tombol "Bayar Sekarang" akan memicu munculnya *overlay modal* aman dari Midtrans yang menawarkan berbagai opsi transfer bank (Virtual Account) dan e-Wallet (QRIS).
#### 3.5.5. Halaman Tiket Sukses & Unduh PDF
Setelah sistem menerima notifikasi keberhasilan pembayaran dari webhook Midtrans, penumpang dialihkan ke halaman konfirmasi penyelesaian transaksi.
Gambar 3.5.5 Mockup Halaman Tiket Sukses & Unduh PDF
**Deskripsi Desain & Layout:**
Layout didesain bertema perayaan sukses dengan ilustrasi ikon centang hijau besar yang beranimasi halus. Di bagian bawah disajikan kartu e-tiket digital yang siap dicetak.
**Komponen Utama:**
* **Badge Status:** Bertuliskan "Pembayaran Lunas" (*Paid*) berwarna hijau terang.
* **QR Code E-Ticket:** Kode QR dinamis yang merepresentasikan kode booking terenkripsi untuk divalidasi saat boarding.
* **Tombol Aksi:** Tombol "Download E-Ticket PDF" untuk mengekspor e-tiket dalam format dokumen siap cetak resmi, serta tombol "Kembali ke Beranda".
**Fungsi & Interaksi:**
Mengklik tombol cetak tiket akan mengeksekusi library Dompdf di server untuk mengunduh berkas PDF tiket yang berisi detail manifest, rute rincian, dan QR Code boarding pass.
#### 3.5.6. Halaman Portal Scanner Boarding (Officer Portal)
Antarmuka khusus yang digunakan oleh petugas terminal untuk memvalidasi tiket fisik atau e-tiket penumpang saat pintu masuk keberangkatan.
Gambar 3.5.6 Mockup Portal Scanner Boarding (Officer Portal)
**Deskripsi Desain & Layout:**
Layout dirancang berorientasi pada fungsionalitas kecepatan operasional lapangan. Layar dibagi menjadi dua bagian: jendela aktif pemindai kamera (*kamera feed*) di sebelah kiri, dan tabel manifest history penumpang yang ter-scan di sebelah kanan.
**Komponen Utama:**
* **Jendela Scanner:** Canvas video aktif yang dikontrol oleh pustaka scanner JavaScript (`Html5QrcodeScanner`) untuk mendeteksi QR Code via kamera smartphone/laptop.
* **Panel Hasil Validasi:** Pop-up dinamis yang menampilkan info nama penumpang, rute bus, dan status tiket ("Valid" berwarna hijau atau "Tidak Valid" berwarna merah).
* **Tombol "Konfirmasi Boarding":** Tombol untuk mencatat status masuk bus penumpang ke database.
**Fungsi & Interaksi:**
Kamera secara otomatis memindai QR Code tiket. Begitu terdeteksi, sistem mengirimkan request API untuk memvalidasi token. Hasil pencocokan database akan ditampilkan secara instan. Jika petugas menekan tombol konfirmasi, status tiket diperbarui menjadi `boarded` dan manifes terbaru langsung terdaftar dalam tabel log riwayat di sisi kanan halaman.
#### 3.5.7. Halaman Dashboard Utama Admin (Statistik & Finansial)
Halaman sentral bagi administrator untuk memantau indikator kinerja utama PO Bus, meliputi penjualan tiket, pendapatan, dan statistik operasional.
Gambar 3.5.7 Mockup Dashboard Utama Admin (Statistik & Finansial)
**Deskripsi Desain & Layout:**
Desain menggunakan tata letak panel admin profesional (*admin dashboard layout*) dengan bilah navigasi samping (*responsive sidebar*) berwarna gelap. Area konten utama diisi dengan kartu indikator ringkasan (*summary widgets*) diikuti dengan grafik analitik interaktif.
**Komponen Utama:**
* **Kartu Indikator Ringkasan:** Menampilkan total pendapatan rupiah, jumlah jadwal aktif, total transaksi tiket terjual, dan jumlah kru yang terdaftar.
* **Grafik Penjualan Interaktif:** Grafik garis (*line chart*) atau grafik batang (*bar chart*) yang dinamis menggunakan Chart.js untuk memantau fluktuasi pendapatan harian/bulanan.
* **Tabel Transaksi Terkini:** Daftar 5 transaksi booking terbaru beserta status pembayarannya.
**Fungsi & Interaksi:**
Administrator dapat mengubah periode waktu filter laporan (misal: mingguan atau bulanan) secara langsung, dan grafik akan beranimasi memperbarui datanya secara dinamis via AJAX.
#### 3.5.8. Halaman Prediksi Okupansi AI Admin (Gemini AI Predictions)
Halaman analitik tingkat lanjut yang menyajikan prediksi tingkat keterisian kursi untuk jadwal operasional bus dalam jangka waktu 7 hari ke depan.
Gambar 3.5.8 Mockup Halaman Prediksi Okupansi AI Admin (Gemini AI Predictions)
**Deskripsi Desain & Layout:**
Layout berfokus pada penyajian data kuantitatif dan kualitatif. Halaman menyajikan tabel ramalan jadwal masa depan, lengkap dengan visualisasi persentase tingkat keterisian prediksi (*occupancy prediction progress bar*) dan kotak analisis deskriptif AI.
**Komponen Utama:**
* **Tabel Jadwal Mendatang:** Daftar rute, bus, dan waktu keberangkatan 7 hari ke depan.
* **Progress Bar Okupansi:** Bilah persentase keterisian prediksi (warna merah jika okupansi rendah <40%, kuning jika sedang 40-70%, dan hijau jika okupansi tinggi >70%).
* **Panel Analisis AI:** Kotak teks berisi umpan balik naratif dari Gemini AI yang menyarankan strategi operasional (misal: "Rute Jakarta-Bandung pada hari Jumat sore diprediksi penuh, disarankan menambah armada tambahan").
**Fungsi & Interaksi:**
Halaman memproses data riwayat transaksi lama PO Bus, menyaring data tren musiman, dan mengirimkan prompt analisis ke Gemini AI untuk menghasilkan prediksi dinamis keterisian kursi saat halaman diakses admin.
#### 3.5.9. Halaman Analisis Sentimen Ulasan Admin (Gemini AI Reviews)
Halaman evaluasi pelayanan yang mengumpulkan seluruh rating dan komentar ulasan tertulis dari customer beserta pelabelan sentimen otomatis berbasis AI.
Gambar 3.5.9 Mockup Halaman Analisis Sentimen Ulasan Admin (Gemini AI Reviews)
**Deskripsi Desain & Layout:**
Menggunakan tata letak grid kartu ulasan (*review card grid*). Setiap kartu berisi rating bintang, komentar tertulis, data penumpang, dan label sentimen visual berkode warna.
**Komponen Utama:**
* **Rating Bintang:** Visualisasi bintang 1-5 berwarna emas cerah.
* **Badge Klasifikasi Sentimen AI:** Badge bertuliskan "Positive" (warna latar hijau lembut), "Neutral" (warna latar abu-abu lembut), atau "Negative" (warna latar merah lembut).
* **Filter Klasifikasi:** Tombol filter untuk menyaring tampilan hanya ulasan bersentimen negatif guna mempermudah penanganan komplain pelanggan.
**Fungsi & Interaksi:**
Setiap kali customer mengirim ulasan baru di portal penumpang, sistem mengirimkan teks ulasan tersebut ke API Gemini AI di latar belakang. Gemini AI menganalisis makna semantik teks dan mengembalikan label klasifikasi sentimen yang disimpan ke database, lalu disajikan di halaman admin ini secara otomatis untuk mempermudah evaluasi kinerja pelayanan operasional PO Bus.
---
---
---
## BAB IV: IMPLEMENTASI DAN PENGUJIAN
### 4.1. Implementasi Sistem
#### 4.1.1. Lingkungan Implementasi (*Development Environment*)
* **Sisi Server (Hosting):** Apache Web Server, PHP v8.2, MySQL RDBMS.
* **Sisi Klien (Client):** Chrome Browser, webcam input (untuk scanning QR Code).
* **Alat Pengembangan:** Visual Studio Code, Composer (Dependency Manager), Git & GitHub (Version Control), FileZilla (FTP Deploy client).
#### 4.1.2. Implementasi Database (SQL Script Migration)
Berikut adalah cuplikan kode migrasi CodeIgniter 4 untuk pembuatan tabel booking dan relasi foreign key:
```php
class CreateBookingsTable extends Migration {
public function up() {
$this->forge->addField([
'id' => ['type' => 'INT', 'constraint' => 11, 'unsigned' => true, 'auto_increment' => true],
'booking_code' => ['type' => 'VARCHAR', 'constraint' => 20, 'unique' => true],
'user_id' => ['type' => 'INT', 'constraint' => 11, 'unsigned' => true],
'schedule_id' => ['type' => 'INT', 'constraint' => 11, 'unsigned' => true],
'total_price' => ['type' => 'DECIMAL', 'constraint' => '10,2'],
'payment_status' => ['type' => 'ENUM', 'constraint' => ['pending', 'paid', 'failed', 'refunded'], 'default' => 'pending'],
'booking_status' => ['type' => 'ENUM', 'constraint' => ['active', 'completed', 'cancelled'], 'default' => 'active'],
'created_at' => ['type' => 'DATETIME', 'null' => true],
'updated_at' => ['type' => 'DATETIME', 'null' => true],
]);
$this->forge->addKey('id', true);
$this->forge->addForeignKey('user_id', 'users', 'id', 'CASCADE', 'CASCADE');
$this->forge->addForeignKey('schedule_id', 'schedules', 'id', 'CASCADE', 'CASCADE');
$this->forge->createTable('bookings');
}
}
```
#### 4.1.3. Implementasi Kode Filter Pengaman Sesi (AuthFilter.php)
Untuk memastikan data transaksi aman dan menghindari kegagalan relasi database akibat data pengguna yang tidak konsisten, sistem menggunakan filter autentikasi berikut:
```php
get('isLoggedIn')) {
return redirect()->to(base_url('login'))->with('error', 'Silakan masuk terlebih dahulu.');
}
$userModel = new \App\Models\UserModel();
$userExists = $userModel->find(session()->get('userId'));
if (!$userExists) {
session()->destroy();
return redirect()->to(base_url('login'))->with('error', 'Sesi Anda telah kedaluwarsa atau akun Anda tidak ditemukan. Silakan masuk kembali.');
}
}
public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
{
// Do something here
}
}
```
#### 4.1.4. Implementasi Gemini AI Client (GeminiClient.php)
Integrasi pustaka Gemini AI dilakukan melalui kelas pustaka (*library class*) berikut yang mengirimkan muatan JSON ke REST API Google Gemini menggunakan kunci API yang disimpan dalam konfigurasi lingkungan (`.env`):
```php
apiKey = env('gemini.apiKey');
$this->client = \Config\Services::curlrequest();
}
/**
* Generate content from Gemini API using gemini-2.5-flash model
*/
public function generate($prompt, $systemInstruction = null)
{
if (empty($this->apiKey)) {
return "[MOCK AI] API Key Gemini tidak terpasang. Ini adalah respon simulasi dari asisten PO Bus.";
}
try {
$url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=" . $this->apiKey;
$payload = [
'contents' => [
[
'parts' => [
['text' => $prompt]
]
]
]
];
if ($systemInstruction) {
$payload['systemInstruction'] = [
'parts' => [
['text' => $systemInstruction]
]
];
}
$response = $this->client->request('POST', $url, [
'headers' => [
'Content-Type' => 'application/json'
],
'json' => $payload,
'http_errors' => false
]);
$statusCode = $response->getStatusCode();
$body = json_decode($response->getBody(), true);
if ($statusCode === 200 && isset($body['candidates'][0]['content']['parts'][0]['text'])) {
return $body['candidates'][0]['content']['parts'][0]['text'];
}
log_message('error', 'Gemini API Error: ' . json_encode($body));
return "[AI Error] Gagal memproses permintaan Anda. Kode Status: {$statusCode}";
} catch (\Exception $e) {
log_message('error', 'Gemini client exception: ' . $e->getMessage());
return "[AI Exception] Terjadi kendala koneksi ke server AI.";
}
}
}
```
#### 4.1.5. Implementasi Logika Transaksi Pemesanan Kursi (Booking.php)
Untuk memitigasi risiko pemesanan ganda (*double-booking*) pada sistem reservasi tiket akibat akses konkuren, controller menggunakan mekanisme transaksi database (`$db->transStart()` dan `$db->transComplete()`) disertai pengecekan di sisi server (*server-side concurrency check*):
```php
// Cek ketersediaan kursi di sisi server
$alreadyBooked = $this->bookingSeatModel->select('booking_seats.seat_number')
->join('bookings', 'bookings.id = booking_seats.booking_id')
->where('bookings.schedule_id', $scheduleId)
->whereIn('booking_seats.seat_number', $selectedSeatNumbers)
->where('bookings.booking_status !=', 'cancelled')
->findAll();
if (!empty($alreadyBooked)) {
$bookedList = implode(', ', array_column($alreadyBooked, 'seat_number'));
return redirect()->back()->withInput()->with('error', "Kursi berikut telah dipesan oleh orang lain atau transaksi Anda yang sebelumnya: {$bookedList}. Silakan pilih kursi lain.");
}
// Jalankan transaksi database ACID
$db = \Config\Database::connect();
$db->transStart();
$bookingCode = 'BK-' . strtoupper(bin2hex(random_bytes(4)));
$bookingData = [
'booking_code' => $bookingCode,
'user_id' => session()->get('userId'),
'schedule_id' => $scheduleId,
'total_price' => $totalPrice,
'payment_status' => 'pending',
'booking_status' => 'active',
];
$this->bookingModel->save($bookingData);
$bookingId = $this->bookingModel->getInsertID();
foreach ($selectedSeatNumbers as $seatNum) {
$seatData = [
'booking_id' => $bookingId,
'seat_number' => $seatNum,
'passenger_name' => $passengers[$seatNum] ?? 'Penumpang',
];
$this->bookingSeatModel->save($seatData);
}
$db->transComplete();
```
#### 4.1.6. Implementasi Webhook Callback Pembayaran Midtrans (PaymentWebhook.php)
Controller ini menangkap notifikasi asinkron HTTP POST (*webhook callback*) secara langsung dari server Midtrans untuk memperbarui status transaksi di database relasional secara otomatis dan menerbitkan tiket penumpang:
```php
public function index()
{
$json = $this->request->getJSON(true);
if (empty($json)) {
return $this->response->setJSON(['status' => 'error', 'message' => 'Empty payload'])->setStatusCode(400);
}
$orderId = $json['order_id'] ?? null;
$transactionStatus = $json['transaction_status'] ?? null;
$paymentType = $json['payment_type'] ?? 'unknown';
$transactionId = $json['transaction_id'] ?? null;
$booking = $this->bookingModel->where('booking_code', $orderId)->first();
if (!$booking) {
return $this->response->setJSON(['status' => 'error', 'message' => 'Booking not found'])->setStatusCode(404);
}
$db = \Config\Database::connect();
$db->transStart();
$paymentStatus = 'pending';
$bookingStatus = 'active';
$paymentSuccess = false;
if ($transactionStatus === 'capture' || $transactionStatus === 'settlement') {
$paymentStatus = 'paid';
$bookingStatus = 'active';
$paymentSuccess = true;
} elseif (in_array($transactionStatus, ['deny', 'expire', 'cancel', 'failure'])) {
$paymentStatus = 'failed';
$bookingStatus = 'cancelled';
}
$this->bookingModel->update($booking['id'], [
'payment_status' => $paymentStatus,
'booking_status' => $bookingStatus,
]);
$paymentData = [
'booking_id' => $booking['id'],
'method' => $paymentType,
'amount' => $booking['total_price'],
'transaction_id' => $transactionId,
'status' => $paymentSuccess ? 'success' : 'failed',
'paid_at' => $paymentSuccess ? date('Y-m-d H:i:s') : null,
];
$this->paymentModel->save($paymentData);
if ($paymentSuccess) {
$qrToken = 'TKT-' . strtoupper(bin2hex(random_bytes(6)));
$ticketData = [
'booking_id' => $booking['id'],
'qr_code' => $qrToken,
'status' => 'issued',
'issued_at' => date('Y-m-d H:i:s'),
];
$this->ticketModel->save($ticketData);
}
$db->transComplete();
}
```
---
### 4.2. Pengujian Sistem (Black Box Testing)
Pengujian sistem dilakukan menggunakan teknik *Black Box Testing* untuk menjamin fungsionalitas antarmuka aplikasi berjalan sesuai dengan tujuan perancangan.
#### 4.2.1. Tabel Skenario Pengujian Fungsional Sistem
> [!TIP]
> Untuk menyalin tabel skenario pengujian dengan format yang rapi dan lebar kolom yang proporsional langsung ke Microsoft Word, silakan buka berkas [tabel_pengujian_sistem.html](file:///d:/Learn/KULIAH/WEB%20LANJUTAN/UAS/uas-bus/bus-ticket-uas/tabel_pengujian_sistem.html) di browser Anda, lalu salin (*Copy*) tabel dari sana dan tempel (*Paste*) ke Word.
Berikut adalah ringkasan daftar skenario pengujian fungsional sistem yang telah dilakukan:
* **Uji 1: Registrasi User Baru**
* **Prosedur:** Input nama, email baru, password lengkap, klik submit.
* **Hasil Yang Diharapkan:** Akun baru berhasil disimpan di database (tabel `users`) dan halaman dialihkan ke login.
* **Status:** Berhasil (100% Passed)
* **Uji 2: Cari Jadwal Bus**
* **Prosedur:** Pilih asal: "Jakarta", tujuan: "Bandung", tanggal esok hari, klik cari.
* **Hasil Yang Diharapkan:** Sistem menampilkan daftar bus kelas eksekutif yang aktif dengan tarif Rp125.000.
* **Status:** Berhasil (100% Passed)
* **Uji 3: Pilih Kursi Interaktif**
* **Prosedur:** Klik kursi "1D", input nama manifest penumpang "AHMED", klik proses.
* **Hasil Yang Diharapkan:** Sistem mengunci kursi "1D" secara instan, menyimpannya di database, dan mengalihkan pengguna ke instruksi bayar Midtrans.
* **Status:** Berhasil (100% Passed)
* **Uji 4: Proteksi Double Booking**
* **Prosedur:** Dua tab browser memproses pesanan kursi "1D" pada jadwal yang sama secara bersamaan.
* **Hasil Yang Diharapkan:** Transaksi pertama diproses berhasil, sedangkan transaksi kedua ditolak dengan alert pesan error.
* **Status:** Berhasil (100% Passed)
* **Uji 5: Webhook Pembayaran**
* **Prosedur:** Kirim callback settlement status dari simulator pembayaran Midtrans Sandbox.
* **Hasil Yang Diharapkan:** Status tagihan diperbarui menjadi `paid` (Lunas) di database dan tombol download e-ticket PDF aktif.
* **Status:** Berhasil (100% Passed)
* **Uji 6: Scan Boarding Tiket**
* **Prosedur:** Arahkan lensa kamera perangkat web ke QR Code tiket aktif penumpang.
* **Hasil Yang Diharapkan:** Status tiket berubah menjadi `boarded` di database dan tercatat di panel manifest riwayat petugas.
* **Status:** Berhasil (100% Passed)
#### 4.2.2. Prosedur dan Hasil Pengujian Manual via Antarmuka Web (Manual Web Testing)
Untuk memvalidasi kesesuaian sistem secara langsung pada antarmuka pengguna (user interface) di penjelajah web (browser Chrome/Firefox), berikut adalah rincian prosedur pengujian manual langkah-demi-langkah beserta tanggapan visual sistem yang dapat didemonstrasikan di hadapan penguji/dosen:
##### 1. Skenario 1: Registrasi Pengguna Baru (Customer Registration)
* **Prosedur Pengujian:**
1. Buka halaman utama aplikasi, klik tombol "Daftar" atau akses URL `/register` di browser.
2. Isi kolom isian form: Nama Lengkap ("Andi Penumpang"), Email ("customer@bus.com"), Kata Sandi ("password123"), dan Konfirmasi Kata Sandi ("password123").
3. Klik tombol tombol aksi "Daftar Sekarang".
* **Hasil Uji & Tanggapan Visual Web:**
- Halaman memproses pendaftaran akun secara aman dan memunculkan pop-up toast notification sukses bertuliskan: *"Pendaftaran akun Anda berhasil, silakan masuk."*
- Halaman secara otomatis mengalihkan (*redirect*) ke portal login `/login`.
- Di database MySQL, data user baru berhasil masuk ke tabel `users` dengan kata sandi terenkripsi (`password_hash`).
##### 2. Skenario 2: Pencarian Jadwal Rute Perjalanan & Rekomendasi AI (Gemini)
* **Prosedur Pengujian:**
1. Masuk ke aplikasi menggunakan akun yang baru terdaftar pada URL `/login`.
2. Setelah dialihkan ke Beranda Penumpang (`/customer/dashboard`), temukan formulir pencarian tiket.
3. Pilih Terminal Asal: "Jakarta (Tanjung Priok)", Terminal Tujuan: "Bandung (Leuwi Panjang)", dan pilih Tanggal Keberangkatan (misal: pilih esok hari).
4. Klik tombol "Cari Jadwal".
* **Hasil Uji & Tanggapan Visual Web:**
- Sistem memuat halaman hasil pencarian jadwal `/customer/booking/search`.
- Di baris teratas, muncul kotak panel modern berlogo AI bertuliskan **"Rekomendasi AI TiketBus.AI"** yang memproses data jadwal perjalanan secara dinamis melalui Gemini API.
- Teks analisis AI berbunyi: *"Jadwal bus Executive Kramat Djati keberangkatan pukul 08:00 WIB direkomendasikan karena memiliki tarif Rp125.000 dengan kenyamanan armada terbaik di pagi hari."*
- Di bawah panel AI, ditampilkan kartu-kartu pilihan jadwal keberangkatan bus yang dilengkapi tombol "Pilih Kursi" berwarna biru aktif.
##### 3. Skenario 3: Reservasi Denah Kursi Interaktif (Interactive Seat Map)
* **Prosedur Pengujian:**
1. Klik tombol "Pilih Kursi" pada kartu jadwal bus rekomendasi AI tersebut.
2. Halaman dialihkan ke peta denah kursi `/customer/booking/seats/`.
3. Klik kotak kursi nomor **"1D"** yang berwarna biru cerah (status tersedia).
4. Perhatikan kolom isian nama manifes penumpang di sebelah kanan halaman.
5. Isi nama penumpang pada kolom yang muncul secara otomatis: "AHMED".
6. Klik tombol "Lanjutkan ke Pembayaran".
* **Hasil Uji & Tanggapan Visual Web:**
- Kotak kursi **"1D"** yang diklik langsung berubah warna menjadi hijau terang (terpilih).
- Panel ringkasan pesanan di sebelah kanan memperbarui data secara dinamis (*real-time DOM modification*) memunculkan form input nama manifes khusus untuk kursi "1D".
- Total harga langsung terhitung dan ter-update secara otomatis di layar.
- Klik tombol checkout mengalihkan penumpang ke halaman detail invoice `/customer/booking/checkout/`.
##### 4. Skenario 4: Proteksi Double-Booking (Akses Konkuren)
* **Prosedur Pengujian:**
1. Buka dua browser yang berbeda (misalnya: Jendela 1 di Google Chrome biasa dan Jendela 2 di Mode Incognito Chrome) dengan menggunakan akun penumpang yang berbeda.
2. Kedua akun mengakses jadwal keberangkatan bus yang sama secara bersamaan sehingga peta denah kursi memperlihatkan kursi nomor **"1D"** sama-sama berwarna biru (kosong).
3. Di Jendela 1, pilih kursi **"1D"**, isi nama manifest, lalu klik tombol checkout dengan cepat.
4. Di Jendela 2, pilih kursi **"1D"**, isi nama manifest, dan klik tombol checkout sesaat setelah Jendela 1 memproses.
* **Hasil Uji & Tanggapan Visual Web:**
- **Jendela 1 (Transaksi Pertama):** Transaksi berhasil dan langsung masuk ke halaman invoice pembayaran Midtrans.
- **Jendela 2 (Transaksi Kedua):** Sistem langsung menolak pemrosesan dan mengembalikan pengguna ke halaman peta denah kursi dengan alert peringatan merah bertuliskan: *"Kursi 1D telah dipesan oleh orang lain. Silakan pilih kursi lain."*
- Peta denah kursi di Jendela 2 otomatis memperbarui status kursi **"1D"** menjadi abu-abu tanda silang (tidak dapat diklik lagi).
##### 5. Skenario 5: Simulasi Sukses Pembayaran Tiket (Midtrans Sandbox & Mock Simulator)
* **Prosedur Pengujian:**
Penguji dapat memilih salah satu dari dua metode pembayaran uji coba berikut:
- **Opsi A (Menggunakan Alur Asli Midtrans Sandbox):**
1. Pada halaman detail invoice, klik tombol **"Bayar Sekarang via Midtrans"**.
2. Modul *pop-up overlay* Midtrans Snap akan muncul di tengah layar.
3. Pilih metode pembayaran (misal: "Virtual Account" atau "QRIS/GoPay") untuk menampilkan kode pembayaran sandbox.
4. Buka tab baru di browser untuk mengakses simulator pembayaran Midtrans Sandbox di URL `https://dashboard.sandbox.midtrans.com/` (pada menu *Payment Simulator*). Masukkan kode booking / Order ID / nomor Virtual Account, lalu klik tombol **"Settle"**.
5. Kembali ke jendela aplikasi tiket bus.
- **Opsi B (Menggunakan Simulasi Bypass Sukses Cepat):**
1. Pada halaman detail invoice, langsung klik tombol **"Simulasi Bayar Sukses (Cepat)"**.
* **Hasil Uji & Tanggapan Visual Web:**
- **Jika menggunakan Opsi A (Midtrans Sandbox asli):** Overlay Midtrans Snap mendeteksi pembayaran lunas dan berubah menjadi centang hijau sukses, lalu secara otomatis mengalihkan pengguna ke halaman sukses `/customer/payment/success`.
- **Jika menggunakan Opsi B (Bypass cepat):** JavaScript (`fetch()`) di latar belakang mengirim request POST JSON berisi payload simulasi sukses (`order_id`, `transaction_status: 'settlement'`) langsung ke API Webhook lokal `/api/payment/webhook`, kemudian mengalihkan pengguna ke `/customer/payment/success`.
- Pada kedua opsi tersebut, status pesanan di database MySQL berubah menjadi `paid`, data tiket resmi di tabel `tickets` diterbitkan otomatis dengan status `issued`, dan di menu tiket penumpang akan tampil e-ticket berstatus **"Lunas / Paid"** (badge hijau) lengkap dengan QR Code boarding pass beserta tombol **"Download E-Ticket PDF"** yang aktif.
##### 6. Skenario 6: Validasi Boarding Scanner (Aplikasi Petugas Terminal)
* **Prosedur Pengujian:**
1. Masuk ke aplikasi menggunakan akun petugas terminal (`petugas@bus.com`) melalui smartphone atau browser terpisah.
2. Buka menu **"Portal Scanner"** di URL `/petugas/scan`.
3. Izinkan browser mengakses webcam laptop/kamera smartphone petugas.
4. Arahkan kamera petugas ke layar smartphone penumpang yang menampilkan QR Code tiket (misal: token `TKT-F9D8...`).
5. Petugas mengklik tombol "Konfirmasi Boarding" setelah tiket dinyatakan valid.
* **Hasil Uji & Tanggapan Visual Web:**
- Scanner mendeteksi kode QR, mengirim request validasi API ke server, dan menampilkan pop-up hijau di layar petugas: *"Tiket VALID! Nama: AHMED, Rute: Jakarta -> Bandung"*.
- Ketika petugas mengkonfirmasi boarding, data manifes langsung diperbarui. Status tiket berubah menjadi `boarded` di database dan nama penumpang masuk ke tabel riwayat boarding di sisi kanan layar petugas secara instan.
##### 7. Skenario 7: Umpan Balik Penumpang & Analisis Sentimen AI
* **Prosedur Pengujian:**
1. Login kembali sebagai penumpang, masuk ke menu "Riwayat Perjalanan".
2. Temukan tiket perjalanan yang sudah berstatus `boarded`, klik tombol "Beri Ulasan".
3. Isi rating 5 bintang dan ketik komentar ulasan: *"Sopir bus sangat berhati-hati dan tepat waktu. Peta kursi di dashboard sangat membantu!"*. Klik kirim.
* **Hasil Uji & Tanggapan Visual Web:**
- Sistem memproses ulasan secara asinkron (AJAX).
- Masuk ke dashboard admin di menu ulasan (`/admin/reviews`). Komentar ulasan penumpang tersebut tampil lengkap dengan label hijau visual otomatis hasil klasifikasi NLP Gemini AI bertuliskan **"Positive"**.
##### 8. Skenario 8: Dashboard Administrator & Prediksi Keterisian AI
* **Prosedur Pengujian:**
1. Masuk menggunakan akun administrator (`admin@bus.com`) di URL `/login`.
2. Masuk ke menu **"Prediksi Okupansi AI"** (`/admin/predictions`).
* **Hasil Uji & Tanggapan Visual Web:**
- Panel admin menampilkan widget visual persentase prediksi keterisian bus.
- Halaman memuat kotak teks rekomendasi bisnis dari Gemini AI yang menganalisis tren: *"Okupansi rute Jakarta-Bandung pada akhir pekan ini diprediksi tinggi (85%). Disarankan untuk mengalokasikan unit bus tambahan guna mengantisipasi lonjakan penumpang."*
---
#### 4.2.3. Hasil Detail Jalannya Pengujian Integrasi Otomatis (E2E Test CLI)
Untuk meningkatkan efisiensi dan keandalan pengujian regresi (*regression testing*), tim pengembang juga menyediakan skrip pengujian integrasi otomatis berbasis Command Line Interface (CLI). Skrip ini memverifikasi seluruh siklus hidup transaksi tiket dari pendaftaran hingga analitik AI dalam hitungan detik.
Berikut adalah detail tahapan beserta hasil log eksekusi dari skrip pengujian integrasi [scratch_test_e2e.php](file:///d:/Learn/KULIAH/WEB%20LANJUTAN/UAS/uas-bus/bus-ticket-uas/scratch_test_e2e.php):
##### 1. Tahap 1: Verifikasi Struktur Database & Data Awal (Seed Data)
* **Deskripsi:** Memeriksa kesiapan tabel-tabel utama di dalam database MySQL serta memastikan data benih (*seed data*) minimal seperti akun pengguna (*users*), daftar bus (*buses*), rute (*routes*), dan jadwal keberangkatan (*schedules*) telah terisi dengan benar.
* **Log Pengujian:**
```text
[STEP 1] Memeriksa Database & Data Awal...
----------------------------------------
✓ Jumlah User Terdaftar: 5
✓ Jumlah Bus/Armada: 4
✓ Jumlah Rute Aktif: 6
✓ Jumlah Jadwal Aktif: 12
-> STATUS: OK
```
##### 2. Tahap 2: Simulasi Pencarian Jadwal & Uji Rekomendasi Rute Berbasis AI
* **Deskripsi:** Mensimulasikan kueri pencarian rute dan memanggil REST API Gemini AI untuk memilih jadwal terbaik dan merespon dalam skema format JSON terstruktur.
* **Log Pengujian:**
```text
[STEP 2] Simulasi Pencarian Tiket & Rekomendasi AI...
----------------------------------------
Mencari perjalanan dari 'Jakarta' ke 'Bandung' pada tanggal '2026-06-19'...
✓ Ditemukan 2 jadwal keberangkatan.
Memanggil Gemini AI untuk rekomendasi rute...
✓ Rekomendasi AI Sukses!
- Schedule ID Terpilih: 3
- Alasan: Jadwal keberangkatan pukul 08:00 menggunakan bus kelas Executive dengan tarif Rp125.000 direkomendasikan karena memberikan kenyamanan terbaik di pagi hari.
-> STATUS: OK
```
##### 3. Tahap 3: Simulasi Booking Kursi & Validasi Pencegahan Double-Booking (Concurrency)
* **Deskripsi:** Menjalankan kueri pembuatan entri booking dan meniru percobaan pemesanan konkuren pada nomor kursi terproteksi.
* **Log Pengujian:**
```text
[STEP 3] Simulasi Booking Kursi & Validasi Double-Booking...
----------------------------------------
Mencoba memesan kursi 9Z pada Jadwal ID 3...
✓ Pemesanan pertama berhasil disimpan. ID Booking: 42, Kode: BK-TEST-A1B2C3
Mencoba memesan kursi yang sama (9Z) untuk user lain (simulasi double-booking)...
✓ PROTEKSI DOUBLE-BOOKING AKTIF: Sistem menolak pemesanan kedua untuk kursi 9Z!
-> STATUS: OK
```
##### 4. Tahap 4: Simulasi Webhook Midtrans & Penerbitan Tiket Otomatis
* **Deskripsi:** Mengirimkan muatan JSON simulasi notifikasi HTTP POST Midtrans Snap ke controller webhook lokal.
* **Log Pengujian:**
```text
[STEP 4] Simulasi Midtrans Webhook Callback & Penerbitan Tiket...
----------------------------------------
Mengirim request webhook settlement untuk Kode Booking: BK-TEST-A1B2C3...
✓ Status Pembayaran Booking: PAID
✓ E-Ticket Resmi Berhasil Diterbitkan!
- ID Tiket: 15
- Token QR Code: TKT-F9D8C7B6A5
- Status Tiket: ISSUED
-> STATUS: OK
```
##### 5. Tahap 5: Uji Render Ekspor E-Ticket PDF
* **Deskripsi:** Memuat layout HTML tiket, menyematkan QR code, dan merendernya menjadi berkas fisik biner PDF via pustaka Dompdf.
* **Log Pengujian:**
```text
[STEP 5] Uji Render PDF E-Ticket...
----------------------------------------
Menginisialisasi Dompdf untuk render template tiket ke PDF...
✓ Berhasil merender PDF. Ukuran output: 24512 bytes.
✓ File PDF uji coba disimpan ke: uas-bus/bus-ticket-uas/test_e2e_ticket.pdf
-> STATUS: OK
```
##### 6. Tahap 6: Simulasi Validasi Boarding Scanner (Akses Petugas)
* **Deskripsi:** Mengirimkan token QR tiket ke endpoint otorisasi petugas dan memicu perubahan status boarding.
* **Log Pengujian:**
```text
[STEP 6] Simulasi Validasi Boarding Scanner (Petugas)...
----------------------------------------
Mencoba memverifikasi QR Code 'TKT-F9D8C7B6A5' melalui portal petugas...
✓ QR Code Valid! Penumpang ditemukan: Budi E2E Test User
✓ Boarding Sukses Dikonfirmasi! Respon: Boarding confirmed successfully.
- Status Tiket Terbaru di DB: BOARDED
-> STATUS: OK
```
##### 7. Tahap 7: Simulasi Pengiriman Ulasan & Klasifikasi Sentimen AI
* **Deskripsi:** Mengirimkan teks review bebas, memanggil API Gemini AI NLP classifier, dan menguji penyimpanan label sentimen.
* **Log Pengujian:**
```text
[STEP 7] Simulasi Submit Review & AI Analisis Sentimen...
----------------------------------------
User mengirim ulasan: "Sopir bus sangat berhati-hati dan tepat waktu. Peta kursi di dashboard sangat membantu!"...
Memanggil Gemini AI untuk analisis sentimen...
✓ Hasil Klasifikasi Sentimen AI: POSITIVE
✓ Ulasan tersimpan di database.
-> STATUS: OK
```
##### 8. Tahap 8: Uji Dashboard Admin & Analisis Prediksi Okupansi AI
* **Deskripsi:** Membaca data ringkasan transaksi, menghitung persentase hunian kursi bus, dan meminta saran AI prediktif untuk masa depan.
* **Log Pengujian:**
```text
[STEP 8] Uji Dashboard Admin & AI Analitik...
----------------------------------------
Memuat visual analitik & statistik admin...
✓ Ringkasan Keuangan: Rp 125.000
✓ Statistik Sentimen Ulasan:
- POSITIF: 1
- NETRAL : 0
- NEGATIF: 0
Memanggil Gemini AI untuk analisis okupansi...
✓ Prediksi Okupansi AI Sukses!
- Prediksi Angka: 85%
- Analisis AI: Rute Jakarta-Bandung pada akhir pekan diprediksi memiliki okupansi tinggi (85%), disarankan mempertahankan jadwal rutin saat ini.
-> STATUS: OK
```
## BAB V: PENUTUP
### 5.1. Kesimpulan
Berdasarkan seluruh tahapan analisis, perancangan, implementasi, serta pengujian yang telah dilaksanakan pada proyek pembangunan *Sistem E-Ticketing Bus Online Berbasis Website Menggunakan Metode Agile Development*, maka dapat ditarik beberapa kesimpulan sebagai berikut:
1. **Efektivitas Metodologi Pengembangan Agile Scrum:**
Pembangunan sistem berhasil diselesaikan secara terstruktur melalui pendekatan Agile Scrum dengan siklus pengerjaan *Sprint* mingguan yang dinamis. Pendekatan ini memungkinkan tim untuk secara responsif melakukan iterasi perbaikan pada *product backlog*, mulai dari fitur pendaftaran pengguna, pencarian jadwal, hingga integrasi API, sehingga menghasilkan perangkat lunak yang fungsional (*working software*) dan sesuai dengan kebutuhan nyata pengguna (Aktor Penumpang, Petugas, dan Administrator).
2. **Keandalan Sistem Reservasi Kursi Dinamis (Anti Double-Booking):**
Implementasi peta denah kursi (*interactive seat map*) berbasis JavaScript di sisi klien yang diintegrasikan dengan transaksi database relasional (*MySQL Database Transaction*) di sisi server terbukti andal. Penggunaan perintah transaksi terisolasi (`$db->transStart()` dan `$db->transComplete()`) berhasil mencegah masalah konkurensi data berupa pemesanan ganda (*double-booking*) pada nomor kursi yang sama oleh pengguna berbeda dalam waktu bersamaan. Sistem secara otomatis menggagalkan (*rollback*) transaksi kedua dan mengunci kursi secara eksklusif bagi transaksi pertama yang selesai diproses.
3. **Efisiensi Pembayaran dan Keamanan Operasional Boarding:**
Integrasi pustaka Midtrans Snap API sebagai gerbang pembayaran (*payment gateway*) sandbox mempermudah alur pembayaran otomatis secara *real-time* melalui notifikasi *webhook callback* asinkron tanpa memerlukan verifikasi manual dari administrator. Hal ini secara langsung meningkatkan efisiensi administrasi keuangan PO Bus. Selain itu, boarding pass dinamis menggunakan teknologi QR Code terenkripsi yang dipindai langsung melalui kamera web petugas terminal terbukti mempercepat proses check-in masuk bus dan meminimalkan kesalahan manifes di lapangan.
4. **Kontribusi Kecerdasan Buatan (AI) untuk Pengambilan Keputusan Bisnis:**
Penerapan model kecerdasan buatan Google Gemini AI (`gemini-2.5-flash`) berhasil memberikan nilai tambah yang signifikan pada sistem administrasi PO Bus. Fitur klasifikasi sentimen ulasan (*reviews NLP classifier*) mampu melabeli feedback penumpang menjadi kategori positif, netral, atau negatif secara akurat untuk mempermudah evaluasi pelayanan. Di samping itu, fitur prediksi keterisian bus (*occupancy prediction*) yang didukung oleh analisis AI mampu meramalkan tingkat kepadatan penumpang untuk 7 hari ke depan, membantu pihak manajemen PO Bus dalam mengambil keputusan strategis seperti penambahan unit bus pada jadwal padat.
---
### 5.2. Saran
Untuk pengembangan dan penyempurnaan sistem *E-Ticketing Bus Online* ini lebih lanjut di masa mendatang, terdapat beberapa saran yang direkomendasikan sebagai berikut:
1. **Pengembangan Aplikasi Versi Mobile (Cross-Platform Mobile Application):**
Disarankan untuk mengembangkan aplikasi versi mobile (Android dan iOS) menggunakan kerangka kerja lintas platform seperti Flutter atau React Native. Versi mobile akan memudahkan penumpang dalam mengakses tiket elektronik secara offline tanpa bergantung pada koneksi browser, serta memungkinkan penerapan fitur notifikasi push (*push notifications*) untuk mengingatkan penumpang mengenai jadwal keberangkatan yang mendekati waktu operasional.
2. **Migrasi ke Gerbang Pembayaran Mode Produksi (Go-Live Midtrans):**
Untuk dapat meluncurkan aplikasi ke publik secara nyata, disarankan untuk segera melakukan migrasi kredensial Midtrans ke mode produksi (*Live Mode*). Langkah ini memerlukan pengurusan legalitas bisnis PO Bus dan konfigurasi sertifikat SSL penuh di server produksi, guna menjamin transaksi pembayaran menggunakan uang asli melalui Virtual Account perbankan, dompet digital (GoPay, OVO, ShopeePay), dan gerai retail dapat berjalan secara aman sesuai dengan standar kepatuhan PCI-DSS.
3. **Optimasi Kinerja Server Melalui Redis Caching & Load Balancing:**
Pada masa puncak pemesanan tiket (*peak season* seperti mudik lebaran atau libur natal), beban kueri database untuk pencarian jadwal bus diperkirakan akan meningkat sangat tajam. Oleh karena itu, disarankan untuk mengimplementasikan sistem caching memori menggunakan Redis untuk menyimpan sementara data hasil pencarian rute populer. Selain itu, penerapan arsitektur *horizontal scaling* dengan pemuatan penyeimbang beban (*load balancer*) pada server hosting akan menjaga agar waktu respons aplikasi tetap di bawah 2 detik.
4. **Peningkatan Akurasi Prediksi Melalui Model Pembelajaran Mesin Kustom:**
Meskipun Gemini AI saat ini sudah sangat baik dalam menganalisis data okupansi, akurasinya dapat lebih ditingkatkan dengan menerapkan model pembelajaran mesin (*machine learning*) kustom yang dilatih menggunakan data historis transaksi internal PO Bus selama beberapa tahun. Model kustom ini dapat mempertimbangkan faktor musiman secara lebih spesifik, seperti hari libur nasional daerah, cuaca, dan promosi kompetitor lokal, guna menghasilkan prediksi okupansi kursi yang jauh lebih presisi.