website pengelola wisata pemandian air panas
Go to file Use this template
ardhikaxx f0693ca604 feat(ticket): redesign premium dengan header animasi dan QR horizontal
Header Improvements:
- Gradient teal dengan wave animation
- Icon circle dengan inner circle putih
- Font size lebih besar: 48px untuk judul
- Wave bottom border dengan border-radius
- Text shadow lebih dramatis
- Radial gradient overlay animation

QR Section Horizontal Layout:
- Split 50-50: QR code kiri, kode tiket kanan
- Border vertical separator teal
- Label 'Scan QR Code' dan 'Kode Tiket'
- QR wrapper dengan border 4px teal
- Kode tiket font 32px dengan letter-spacing 5px
- Sejajar sempurna dengan vertical-align middle

UI Elements:
- Border tiket 5px solid teal
- Corner decorations 50px dengan border 5px
- Divider gradient horizontal lebih tebal (4px)
- Info labels uppercase dengan letter-spacing
- Price highlight dengan border 2px teal
- Footer note dengan gradient kuning
- Shadow lebih dramatis di semua elemen

Preview Page:
- Konsisten dengan PDF design
- Hover effect scale 1.02 dengan translateY -10px
- Responsive: QR section jadi vertical di mobile
- Wave animation pada header
- Smooth transitions dengan cubic-bezier
2026-02-25 10:20:27 +07:00
app fix(dashboard): hitung penjualan hanya dari transaksi yang sudah dikonfirmasi, bukan pending atau rejected 2026-02-25 04:27:16 +07:00
bootstrap feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
config feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
database feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
flowcharts docs(flowcharts): tambah dokumentasi flowchart lengkap per fitur 2026-02-25 08:24:31 +07:00
public chore: tambahkan file payment proof dan qr code yang baru 2026-02-25 04:31:00 +07:00
resources feat(ticket): redesign premium dengan header animasi dan QR horizontal 2026-02-25 10:20:27 +07:00
routes feat(user): implementasi halaman riwayat tiket dan booking dengan dropdown menu user 2026-02-25 03:31:43 +07:00
storage feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
tests feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
.editorconfig feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
.env.example feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
.gitattributes feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
.gitignore feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
README.md docs(readme): update kredensial default login sesuai seeder 2026-02-25 08:29:58 +07:00
activity-diagram.md docs: tambahkan dokumentasi 5 activity diagram lengkap dengan panduan draw.io 2026-02-25 08:12:49 +07:00
artisan feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
composer.json feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
composer.lock feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
database.md docs: tambahkan dokumentasi lengkap struktur database dengan relasi antar tabel 2026-02-25 08:06:48 +07:00
package-lock.json feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
package.json feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
phpunit.xml feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
rule-web.md feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00
usecase.md docs: tambahkan dokumentasi use case diagram lengkap dengan panduan draw.io 2026-02-25 08:09:13 +07:00
vite.config.js feat(admin-ui): implementasi tema teal modern dengan UI elements yang lebih baik 2026-02-24 15:29:59 +07:00

README.md

🎫 Banyu Biru Ticketing & Booking System

Laravel PHP MySQL Bootstrap

📖 Tentang Sistem

Banyu Biru Ticketing & Booking System adalah sistem manajemen tiket dan booking berbasis web untuk objek wisata Banyu Biru di Nganjuk. Sistem ini memudahkan pengunjung untuk membeli tiket masuk dan melakukan booking pendopo secara online, serta membantu admin dalam mengelola transaksi dan verifikasi pembayaran.

🎯 Tujuan Sistem

  • Digitalisasi proses pembelian tiket dan booking pendopo
  • Mempermudah pengunjung dalam melakukan transaksi online
  • Meningkatkan efisiensi pengelolaan transaksi oleh admin
  • Menyediakan sistem verifikasi tiket dengan QR code
  • Memberikan laporan statistik penjualan real-time

Fitur Utama

👥 Fitur User (Pengunjung)

🎟️ Pembelian Tiket

  • Lihat daftar tiket yang tersedia dengan harga
  • Pilih tanggal kunjungan dan jumlah tiket
  • Generate QR code otomatis untuk setiap tiket
  • Upload bukti pembayaran transfer
  • Download tiket dalam format PDF setelah dikonfirmasi
  • Print tiket langsung dari browser

🏛️ Booking Pendopo

  • Cek ketersediaan tanggal booking secara real-time
  • Form booking dengan data pengunjung lengkap
  • Upload bukti pembayaran booking
  • Lihat status booking (pending/confirmed/rejected)
  • Notifikasi status verifikasi

📜 Riwayat Transaksi

  • Lihat riwayat pembelian tiket
  • Lihat riwayat booking pendopo
  • Filter berdasarkan status transaksi
  • Download ulang tiket yang sudah dikonfirmasi

👤 Manajemen Profil

  • Edit profil (nama, email, telepon, alamat)
  • Ubah password dengan verifikasi password lama
  • Lihat informasi akun

🔐 Fitur Admin

📊 Dashboard

  • Statistik total tiket terjual (confirmed)
  • Penjualan bulan ini (tiket + booking)
  • Total pendapatan dari transaksi terkonfirmasi
  • Chart penjualan 6 bulan terakhir
  • Daftar order dan booking terbaru

Verifikasi Pembayaran

  • Lihat daftar order tiket dengan status
  • Lihat detail order dan bukti pembayaran
  • Konfirmasi pembayaran tiket
  • Tolak pembayaran dengan alasan
  • Verifikasi pembayaran booking

📱 QR Scanner Verifikasi Tiket

  • Scan QR code tiket menggunakan kamera
  • Input manual kode tiket
  • Verifikasi validitas tiket
  • Tandai tiket sebagai sudah dipakai
  • Cek status tiket (valid/sudah dipakai)

🎫 Manajemen Tiket

  • CRUD tiket (Create, Read, Update, Delete)
  • Set harga tiket
  • Toggle status aktif/nonaktif tiket
  • Deskripsi tiket

🏦 Manajemen Rekening Bank

  • CRUD rekening bank untuk pembayaran
  • Set rekening aktif/nonaktif
  • Tampilkan rekening di halaman pembayaran user

👨‍💼 Manajemen Admin

  • CRUD akun admin
  • Assign role admin ke user
  • Edit profil admin
  • Ubah password admin

🛠️ Teknologi yang Digunakan

Backend

  • Laravel 11.x - PHP Framework
  • PHP 8.2+ - Programming Language
  • MySQL 8.0+ - Database
  • Spatie Laravel Permission - Role & Permission Management

Frontend

  • Bootstrap 5.3 - CSS Framework
  • Chart.js - Data Visualization
  • SweetAlert2 - Beautiful Alerts
  • Font Awesome 6 - Icons
  • html5-qrcode - QR Code Scanner

Libraries & Tools

  • SimpleSoftwareIO/simple-qrcode - QR Code Generator
  • Barryvdh/laravel-dompdf - PDF Generator
  • Laravel Breeze - Authentication Scaffolding

📋 Persyaratan Sistem

  • PHP >= 8.2
  • Composer
  • MySQL >= 8.0
  • Node.js & NPM (untuk asset compilation)
  • Web Server (Apache/Nginx)
  • Extension PHP: BCMath, Ctype, Fileinfo, JSON, Mbstring, OpenSSL, PDO, Tokenizer, XML, GD

🚀 Instalasi

1. Clone Repository

git clone https://github.com/ardhikaxx/banyu-biru-nganjuk.git
cd banyu-biru-nganjuk

2. Install Dependencies

composer install
npm install

3. Konfigurasi Environment

cp .env.example .env
php artisan key:generate

Edit file .env dan sesuaikan konfigurasi database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=wisata_db
DB_USERNAME=root
DB_PASSWORD=

4. Migrasi Database

php artisan migrate

5. Seed Data (Opsional)

php artisan db:seed

6. Compile Assets

npm run build
# atau untuk development
npm run dev
php artisan storage:link

8. Jalankan Server

php artisan serve

Akses aplikasi di: http://127.0.0.1:8000


👤 Default Login

Admin

User (Demo)

Seeder membuat 8 user demo dengan kredensial:

⚠️ Penting: Ubah password default setelah login pertama kali!


📁 Struktur Folder

wisata-web/
├── app/
│   ├── Http/Controllers/
│   │   ├── Admin/          # Controller untuk admin
│   │   ├── User/           # Controller untuk user
│   │   └── AuthController.php
│   ├── Models/             # Eloquent Models
│   └── Support/            # Helper functions
├── database/
│   ├── migrations/         # Database migrations
│   └── seeders/            # Database seeders
├── public/
│   ├── css/                # Compiled CSS
│   ├── images/             # Static images
│   ├── payment-proofs/     # Bukti pembayaran
│   └── qrcodes/            # Generated QR codes
├── resources/
│   ├── css/                # Source CSS
│   ├── js/                 # Source JavaScript
│   └── views/              # Blade templates
│       ├── admin/          # Admin views
│       ├── auth/           # Auth views
│       ├── user/           # User views
│       ├── layouts/        # Layout templates
│       └── partials/       # Reusable components
├── routes/
│   └── web.php             # Web routes
├── flowcharts/             # Flowchart documentation
├── database.md             # Database documentation
├── usecase.md              # Use case documentation
└── activity-diagram.md     # Activity diagram documentation

🎨 Tema & Desain

Sistem menggunakan tema Teal Modern dengan palet warna:

  • Primary: #0f766e (Teal 700)
  • Secondary: #14b8a6 (Teal 500)
  • Accent: #5eead4 (Teal 300)
  • Background: #f0fdfa (Teal 50)

Fitur UI/UX

  • Responsive design (mobile, tablet, desktop)
  • Dark sidebar dengan gradient teal
  • Modern card design dengan border teal
  • Rounded-full buttons
  • Smooth animations & transitions
  • SweetAlert untuk konfirmasi
  • Password toggle (show/hide)
  • Loading states

📊 Database Schema

Sistem menggunakan 8 tabel utama:

  1. users - Data user dan admin
  2. tickets - Master data tiket
  3. ticket_orders - Order pembelian tiket
  4. ticket_order_items - Detail tiket per order
  5. bookings - Data booking pendopo
  6. places - Master data tempat (pendopo)
  7. bank_accounts - Rekening bank untuk pembayaran
  8. roles & permissions - Role-based access control

Lihat dokumentasi lengkap di database.md


🔐 Keamanan

  • Password hashing menggunakan bcrypt
  • CSRF protection pada semua form
  • Role-based authorization (admin/user)
  • Input validation & sanitization
  • SQL injection protection (Eloquent ORM)
  • XSS protection
  • File upload validation (type & size)
  • Session management

📱 Fitur QR Code

Generate QR Code

  • Otomatis generate saat pembelian tiket
  • Format: SVG (scalable)
  • Berisi kode tiket unik (AT-XXXXX)
  • Disimpan di /public/qrcodes/

Scan QR Code

  • Menggunakan library html5-qrcode
  • Akses kamera untuk scanning
  • Auto-detect dan submit
  • Fallback: input manual kode tiket

📄 Dokumentasi

Flowchart

Dokumentasi flowchart lengkap untuk setiap fitur tersedia di folder flowcharts/:

Use Case Diagram

Dokumentasi use case dengan 3 actor dan 30 use cases: usecase.md

Activity Diagram

Dokumentasi activity diagram untuk 5 proses utama: activity-diagram.md

Database Schema

Dokumentasi struktur database lengkap: database.md


🔄 Workflow Sistem

Alur Pembelian Tiket

  1. User login/register
  2. Pilih tiket dan tanggal kunjungan
  3. Tentukan jumlah tiket
  4. Sistem generate order dan QR code
  5. User upload bukti pembayaran
  6. Admin verifikasi pembayaran
  7. User download tiket (jika confirmed)

Alur Booking Pendopo

  1. User login/register
  2. Cek ketersediaan tanggal
  3. Isi form booking
  4. Upload bukti pembayaran
  5. Admin verifikasi pembayaran
  6. Booking confirmed/rejected

Alur Verifikasi Tiket

  1. Admin scan QR code tiket
  2. Sistem cek validitas tiket
  3. Tampilkan informasi tiket
  4. Admin tandai sebagai dipakai
  5. Tiket tidak dapat digunakan lagi

🐛 Troubleshooting

Error: Class "SimpleSoftwareIO\QrCode\Facades\QrCode" not found

composer require simplesoftwareio/simple-qrcode
php artisan storage:link

Error: Permission denied pada folder storage

chmod -R 775 storage bootstrap/cache

QR Scanner tidak bisa akses kamera

  • Pastikan browser memiliki izin akses kamera
  • Gunakan HTTPS (atau localhost)
  • Coba browser lain (Chrome/Firefox)

🤝 Kontribusi

Kontribusi sangat diterima! Silakan:

  1. Fork repository ini
  2. Buat branch fitur (git checkout -b feature/AmazingFeature)
  3. Commit perubahan (git commit -m 'Add some AmazingFeature')
  4. Push ke branch (git push origin feature/AmazingFeature)
  5. Buat Pull Request

📝 License

Sistem ini menggunakan framework Laravel yang berlisensi MIT license.


👨‍💻 Developer

Dikembangkan oleh Ardhika


📞 Kontak & Support

Jika ada pertanyaan atau masalah, silakan:


🙏 Acknowledgments

  • Laravel Framework
  • Bootstrap Team
  • Font Awesome
  • Chart.js
  • SweetAlert2
  • SimpleSoftwareIO QR Code
  • html5-qrcode Library

Made with ❤️ for Banyu Biru Nganjuk

© 2026 Banyu Biru Ticketing & Booking System