# Sistem Pendaftaran Tamu dengan QR Code - Axel

Sistem sederhana untuk mencatat kehadiran tamu menggunakan QR Code, sangat mobile-friendly dan mudah digunakan.

## 📁 Struktur File

```
axel wa/
├── api/
│   └── guests/
│       ├── setup-database.sql    # Schema database
│       ├── config.php            # Konfigurasi
│       ├── create.php            # Buat undangan & QR code
│       ├── scan.php              # Scan QR & catat kehadiran
│       ├── list.php              # List semua tamu
│       ├── attendance.php        # Data kehadiran (dashboard)
│       ├── login.php             # Login admin
│       └── logout.php            # Logout admin
├── scan-guest.html               # Halaman scan QR (mobile)
├── admin-guests.html             # Dashboard admin
└── GUEST_SYSTEM_README.md        # Dokumentasi ini
```

## 🚀 Cara Install

### 1. Setup Database

1. Buka **phpMyAdmin** atau tools MySQL favorit Anda
2. Buat database baru (misalnya: `thez9859_axel_guests`)
3. Import file `api/guests/setup-database.sql`
4. Atau jalankan query SQL berikut:

```sql
CREATE TABLE IF NOT EXISTS invitations (
    id VARCHAR(50) PRIMARY KEY,
    guest_name VARCHAR(255) NOT NULL,
    guest_email VARCHAR(255),
    guest_phone VARCHAR(50),
    total_guests INT NOT NULL DEFAULT 1,
    location VARCHAR(255) DEFAULT 'Axel Office',
    event_date DATETIME NOT NULL,
    status ENUM('active', 'used', 'cancelled') DEFAULT 'active',
    qr_code_data TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE IF NOT EXISTS attendance (
    id INT AUTO_INCREMENT PRIMARY KEY,
    invitation_id VARCHAR(50) NOT NULL,
    guest_name VARCHAR(255) NOT NULL,
    total_guests INT NOT NULL,
    check_in_time DATETIME NOT NULL,
    location VARCHAR(255) DEFAULT 'Axel Office',
    notes TEXT,
    scanned_by VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (invitation_id) REFERENCES invitations(id) ON DELETE CASCADE
);
```

### 2. Update Database Config

Edit file `api/config.php` untuk memastikan koneksi database benar:

```php
$db_host = 'localhost';
$db_name = 'thez9859_axel_guests';  // Nama database guests
$db_user = 'thez9859_axel_admin';
$db_pass = 'axel2025';
```

> ⚠️ **Catatan**: Jika menggunakan database berbeda, buat koneksi baru khusus untuk guests, atau gabungkan tabel guests ke database utama `thez9859_axel_blog`.

### 3. Upload ke Server

Upload semua file ke hosting Anda, pastikan:
- PHP 7.4 atau lebih baru
- Ekstensi PDO MySQL enabled
- Akses write untuk session/cookies

## 📱 Cara Penggunaan

### A. Tambah Tamu Baru (Admin)

1. Buka `admin-guests.html` di browser
2. Login dengan username: `admin`, password: `axel2025`
3. Klik tab **"➕ Tambah Tamu"**
4. Isi data tamu:
   - Nama Tamu (wajib)
   - Email & HP (opsional)
   - Jumlah Tamu (1-50)
   - Tanggal Acara
5. Klik **"Buat Undangan & QR Code"**
6. QR Code akan muncul, bisa di-download atau di-print

### B. Scan QR Code ( Saat Acara )

1. Buka `scan-guest.html` di smartphone/tablet
2. Klik **"📷 Mulai Scan"**
3. Izinkan akses kamera
4. Arahkan kamera ke QR Code undangan
5. Sistem akan otomatis mencatat kehadiran

### C. Pantau Kehadiran (Dashboard)

1. Buka `admin-guests.html`
2. Login sebagai admin
3. Tab **"📊 Kehadiran"** - Lihat siapa yang sudah check-in
4. Tab **"👥 Daftar Tamu"** - Lihat semua undangan & status

## 🔐 Kredensial Default

| Role  | Username | Password  |
|-------|----------|-----------|
| Admin | admin    | axel2025  |

## 📊 Alur Penggunaan

```
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   ADMIN         │    │   TAMPILAN      │    │   SCANNER       │
│  (Desktop)      │    │   UNDANGAN      │    │   (Mobile)      │
└────────┬────────┘    └────────┬────────┘    └────────┬────────┘
         │                      │                       │
         │ 1. Buat Undangan     │                       │
         │ + Generate QR        │                       │
         ├─────────────────────▶│  2. Cetak/Share       │
         │                      │     QR Code           │
         │                      └───────────┬───────────┘
         │                                      │
         │                                      │ 3. Scan QR Code
         │                                      ├───────────────────▶
         │                                      │    4. Catat
         │                                      │       Kehadiran
         │                                      │
         │                      5. Realtime     │
         │                      Update          │
         │◀─────────────────────Dashboard───────┘
```

## 🎯 Fitur Utama

| Fitur | Keterangan |
|-------|------------|
| ✅ QR Code Generator | Generate QR unik per undangan |
| ✅ Mobile Scanner | Scan pakai kamera HP |
| ✅ Auto-attendance | Pencatatan kehadiran otomatis |
| ✅ Duplicate Prevention | Mencegah scan ganda |
| ✅ Stats Dashboard | Real-time statistics |
| ✅ Print/Download QR | Bisa print undangan fisik |
| ✅ Mobile Friendly | Responsive design |
| ✅ Simple Auth | Login sederhana |

## 🔧 API Endpoints

| Endpoint | Method | Deskripsi |
|----------|--------|-----------|
| `api/guests/create.php` | POST | Buat undangan baru |
| `api/guests/scan.php` | POST | Scan QR & catat kehadiran |
| `api/guests/list.php` | GET | List semua tamu |
| `api/guests/attendance.php` | GET | Data kehadiran |
| `api/guests/login.php` | POST | Login admin |
| `api/guests/logout.php` | POST | Logout admin |

## 📋 Contoh Data QR Code

QR Code berisi format:
```
INV-YYYYMMDD-XXXXXX|NAMA|JUMLAH_TAMU
```

Contoh:
```
INV-20250115-ABC123|JOHN DOE|3
```

## 🔒 Keamanan

- Session-based authentication
- Validasi input untuk mencegah SQL injection
- Status tracking (active/used/cancelled)
- Duplicate scan prevention

## 📦 Dependencies

- **QR Generation**: Google Charts QR Server / QRServer API
- **QR Scanning**: html5-qrcode library (CDN)
- **Database**: MySQL with PDO
- **Server**: PHP 7.4+

## 🛠️ Troubleshooting

### Scanner tidak bisa akses kamera
- Pastikan domain menggunakan HTTPS (kamera memerlukan HTTPS)
- Izinkan akses kamera di browser

### Database connection error
- Cek kredensial database di `api/config.php`
- Pastikan database sudah di-import

### QR Code tidak muncul
- Cek koneksi internet (menggunakan API eksternal)
- Coba refresh halaman

## 📝 Catatan Pengembangan

Sistem ini menggunakan pendekatan sederhana untuk demo dan penggunaan kecil-menengah. Untuk produksi dengan traffic tinggi, pertimbangkan:
- Menggunakan library QR lokal (tidak perlu internet)
- Database connection pooling
- Authentication yang lebih robust
- Rate limiting untuk API
- Real-time update dengan WebSocket

---

**Developed for Axel - Payroll & HR Outsourcing**

www.theaxel.id