# Perakitan Komputer — Paket Lengkap (ZE-COME TC)

## Daftar File

| File | Deskripsi |
| --- | --- |
| `index.html` | Landing page navigasi semua materi |
| `book_perakitan.html` | Materi/e-book perakitan komputer |
| `infografis.html` | Infografis komponen PC |
| `lkm_perakitan.html` | Lembar Kerja Mahasiswa |
| `jobsheet_perakitan.html` | Jobsheet praktikum |
| `quiz_perakitan.html` | **Kuis/ujian online + leaderboard** |
| `ujian_perakitan.html` | **Ujian formal + leaderboard** |
| `game.html` | Game drag-and-drop perakitan |
| `refleksi.html` | Halaman refleksi |
| `save.php` | **Backend penyimpanan leaderboard** |
| `CSF-CyberPunk.css` | Stylesheet (sudah di-inline di sebagian besar HTML) |
| `img/` | Folder gambar komponen |
| `screenshots/` | Screenshot halaman |
| `perakitan_komputer.zip` | Arsip semua file |

## Cara Deploy ke Hosting (cPanel/Niagahoster/Hostinger/dll)

### 1. Upload semua file ke `public_html/`

Upload **semua isi folder** `download/` ini ke `public_html/` (atau subfolder, misal `public_html/perakitan/`).

Struktur di hosting harus seperti ini:

```
public_html/
├── index.html
├── quiz_perakitan.html
├── ujian_perakitan.html
├── save.php          <-- WAJIB, jangan dilewati
├── CSF-CyberPunk.css
├── img/
│   ├── motherboard.jpg
│   ├── processor.avif
│   └── ...
└── (file lainnya)
```

### 2. Set permission folder writable

Agar `save.php` bisa menulis file `quiz_perakitan.json`:

- **Folder `public_html/`** (atau folder tempat file berada): permission `755` (sudah default).
- **File `save.php`**: permission `644` (default).
- **File `quiz_perakitan.json`** (akan dibuat otomatis oleh save.php saat ada peserta pertama): permission `664`.

> Jika muncul error "Gagal menyimpan. Cek permission folder" saat peserta menyelesaikan ujian:
> - Buka File Manager hosting → klik kanan folder tempat HTML berada → **Permissions** → set `755`.
> - Atau via SSH: `chmod 755 public_html/perakitan/`
> - Untuk file yang sudah ada `quiz_perakitan.json`: `chmod 664 quiz_perakitan.json`

### 3. Pastikan PHP aktif

Hosting PHP standar (versi 7.4+, 8.x) sudah cukup. Cek via:
- cPanel → **MultiPHP Manager** → pastikan domain menggunakan PHP 8.x
- Atau buka `https://domain-anda.com/save.php` via browser → harus muncul `[]` (array kosong JSON), BUKAN kode PHP mentah.

> Jika muncul kode PHP mentah atau error 500, berarti PHP belum aktif atau ada syntax error. Hubungi hosting jika perlu.

### 4. Test endpoint

Buka di browser:
- `https://domain-anda.com/save.php` → harus muncul `[]`
- `https://domain-an.com/save.php?action=stats` → harus muncul `{"count":0,"pass":0,"fail":0,"avg":0}`

Setelah peserta menyelesaikan ujian, file `quiz_perakitan.json` akan otomatis dibuat dan terisi data.

## Cara Kerja Penyimpanan

```
Peserta selesai ujian
   ↓
HTML kirim POST ke save.php (body: JSON attempt)
   ↓
save.php:
   - Baca quiz_perakitan.json yang ada
   - Merge attempt baru (by id — update jika sudah ada, append jika baru)
   - Tulis atomik (.tmp + rename) ke quiz_perakitan.json
   - Return {ok: true, count: N}
   ↓
HTML tampilkan notifikasi "Tersimpan ke server hosting"
```

Saat buka leaderboard:
- HTML fetch `GET save.php` (cache-busted) → dapat semua data server
- Merge dengan localStorage (offline fallback)
- Tampilkan ranking

## Fitur Tambahan

- **Export JSON**: tombol Export di leaderboard akan ambil data terbaru dari server, lalu download `quiz_perakitan.json` ke komputer instruktur untuk arsip.
- **Import JSON**: instruktur bisa upload JSON lama untuk merge ke server hosting.
- **Clear DB**: tombol Clear akan hapus data **browser DAN server hosting** sekaligus (ada konfirmasi).
- **Offline fallback**: jika server hosting down, data tetap tersimpan di localStorage browser peserta. Saat server kembali online, data baru akan dikirim ulang.

## Keamanan

- Endpoint menerima input apa pun — pastikan URL `save.php` tidak di-share ke publik sembarangan.
- Untuk produksi dengan banyak peserta, tambahkan token rahasia di header atau rate-limiting di sisi server.
- File `quiz_perakitan.json` readable via URL langsung — jika tidak ingin publik, taruh di folder yang diproteksi `.htaccess` dan ambil via proxy PHP.

## Verifikasi Setup

1. Buka `https://domain-anda.com/quiz_perakitan.html` → halaman ujian muncul
2. Selesaikan ujian sampai selesai
3. Cek notifikasi hijau "Tersimpan ke server hosting" muncul di pojok kanan bawah
4. Cek di File Manager hosting → file `quiz_perakitan.json` harus muncul dengan isi data peserta
5. Buka leaderboard → data peserta tampil dan terurut