# UPGRADE v5.1 — Slideshow Promosi Visual

**Patch ringkas atas v5.** Mengubah slideshow homepage jadi mode promosi visual murni
(full image, tanpa teks) dan memindahkan stats widget ke halaman Profil Fakultas.

---

## 🎯 Yang Berubah

| Komponen | Sebelum | Sesudah |
|----------|---------|---------|
| **Slideshow homepage** | 600px, overlay teks, dark gradient | 70vh, **pure image**, no overlay |
| **Stats widget** | Di homepage | Di **halaman Profil Fakultas** (slug=profil) |
| **Navigasi slideshow** | Hanya dots indicator | Dots + **panah kiri-kanan** + swipe touch + keyboard ←/→ |
| **Mode tampilan** | Hardcoded ada teks | **Toggle setting** `slideshow_mode` (pure_image / with_text) |
| **Tinggi mobile** | 480px fixed | 50vh (lebih proporsional di HP) |

---

## 🚀 Cara Deploy

### 1. Backup
```bash
mysqldump -u root fsains_uncp > backup_sebelum_v51.sql
```

### 2. Ganti 4 file yang berubah
Copy file-file berikut dari paket v5.1 ke installation Anda (timpa file lama):

```
includes/slideshow.php          ← rewrite total (mode toggle, 70vh, swipe, arrow, keyboard)
pages/home.php                  ← stats section dihapus
pages/page.php                  ← inject stats widget khusus saat slug=profil
admin/settings.php              ← tambah toggle "Mode Slideshow"
admin/hero-slides.php           ← tambah notice mode promosi visual
```

### 3. Jalankan SQL upgrade
phpMyAdmin → DB `fsains_uncp` → tab **SQL** → paste isi `database_upgrade_v51.sql` → klik **Go**.

Akan ditambah 1 setting baru: `slideshow_mode` = `pure_image`.

### 4. Verifikasi
- Buka homepage → slideshow tampil full image tinggi 70vh, tidak ada teks
- Klik Profil → Sejarah Fakultas → stats widget muncul di bawah konten
- Login admin → Pengaturan Web → cek dropdown **Mode Slideshow** ada

---

## ⚙️ Cara Toggle Mode Slideshow

**Pure Image (default):**
- Gambar penuh, tanpa overlay teks, tanpa dark gradient
- Ada tombol panah kiri-kanan untuk navigasi manual
- Cocok untuk: foto gedung, foto kegiatan, suasana kampus, banner promosi

**Dengan Overlay Teks:**
- Ada dark gradient + judul + subtitle + tombol CTA
- Cocok untuk: announcement spesifik, promosi event dengan headline

**Cara ganti:** Sidebar admin → **Pengaturan Web** → section **Tampilan Slideshow Hero** → pilih mode → Simpan.

> **Tips:** Judul/subtitle/tombol di form Hero Slideshow tetap bisa diisi meski mode pure_image aktif. Datanya tersimpan dan akan muncul otomatis kalau Anda ganti ke mode "Dengan Overlay Teks".

---

## 🎨 Best Practice Foto Slideshow

Untuk mode **pure_image** (promosi visual), pakai foto yang:

- **Resolusi tinggi** — minimal 1920×800 pixel (16:9 atau 21:9)
- **Komposisi seimbang** — subject di tengah atau rule of thirds
- **Ada "breathing room"** — tidak terlalu padat, ada area kosong untuk dots/arrow tidak menutupi
- **Warna kontras tinggi** — supaya tampak hidup di layar besar
- **Tidak ada teks di gambar** — kalau perlu teks, pakai mode "Dengan Overlay Teks"

Contoh subject ideal: foto gedung fakultas dari sudut artistik, mahasiswa di lab/lapangan, suasana wisuda, kegiatan akademik dengan banyak orang, drone shot kampus.

---

## 🔧 Detail Teknis

### Setting baru di tabel `settings`
```sql
INSERT IGNORE INTO settings (setting_key, setting_value, description) VALUES
('slideshow_mode', 'pure_image', '...');
```

### Validasi whitelist di POST handler
File `admin/settings.php` punya guard:
```php
if ($key === 'slideshow_mode' && !in_array($value, ['pure_image', 'with_text'], true)) {
    $value = 'pure_image';  // fallback aman
}
```

### Stats widget conditional di page.php
```php
if ($slug === 'profil'):
    // ... render stats widget
endif;
```

Kalau ke depan ingin stats juga muncul di halaman lain (misal `tentang-kami`),
tinggal ubah jadi: `if (in_array($slug, ['profil', 'tentang-kami'])):`

### Slideshow JS baru: swipe + keyboard
```javascript
// Touch swipe untuk mobile
hero.addEventListener('touchstart', e => { touchStartX = e.touches[0].clientX; });
hero.addEventListener('touchend', e => {
  const diff = e.changedTouches[0].clientX - touchStartX;
  if (Math.abs(diff) > 50) { /* swipe detected */ }
});

// Keyboard arrows
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft')  prevS();
  if (e.key === 'ArrowRight') next();
});
```

---

## 🐛 Troubleshooting

**Q: Setelah update, slideshow masih nampak ada teks?**
A: Cek di Pengaturan Web → Mode Slideshow → pastikan terpilih "Pure Image". Setting otomatis dibuat saat akses pertama, tapi kalau cache browser keras, hard refresh (Ctrl+Shift+R).

**Q: Stats widget tidak muncul di halaman Profil?**
A: Pastikan slug halaman tepat `profil` (cek di tabel `pages`). Jika halaman Anda punya slug berbeda, edit `pages/page.php` line `if ($slug === 'profil'):` ganti dengan slug yang sesuai.

**Q: Tinggi slideshow terlalu kecil/besar?**
A: Edit `includes/slideshow.php` baris `height: 70vh;` ganti angkanya (vh = persen viewport height). Kalau ingin fixed pixel, ganti `70vh` jadi `600px`.

**Q: Saya ingin teks di slideshow lagi?**
A: Pengaturan Web → Mode Slideshow → pilih "Dengan Overlay Teks" → Simpan. Pastikan field judul/subtitle/tombol di setiap slide juga sudah diisi via Hero Slideshow.

---

**Versi:** v5.1
**Tanggal:** 2026-05-30
**Compatibility:** Patch atas v5.0 (wajib sudah jalankan v5 dulu)