# LANDING PAGE - Quick Start Guide

## Overview
Landing page DIBA GTK menampilkan dashboard statistik dengan 3 grafik utama:
1. **Grafik Batang**: Jumlah Sekolah Negeri & Swasta per Jenjang
2. **Grafik Donat**: Distribusi Siswa per Jenjang  
3. **Grafik Horizontal**: Top 10 Sekolah dengan ULD Terbanyak

## File Structure
```
app/Http/Controllers/
└── LandingPageController.php          # Controller untuk landing page

resources/views/
└── landing.blade.php                   # View landing page

routes/
└── web.php                             # Route definition

dokumentasi/
└── LANDING_PAGE_FEATURE.md            # Dokumentasi lengkap
```

## Installation

1. **Pastikan database sudah terisi**:
```bash
php artisan migrate:fresh --seed
```

2. **Clear cache** (opsional):
```bash
php artisan cache:clear
php artisan config:clear
php artisan view:clear
```

3. **Jalankan server**:
```bash
php artisan serve
```

4. **Akses landing page**:
```
http://localhost:8000
```

## Data yang Ditampilkan

### Statistik Cards
- **Total Sekolah**: Semua sekolah aktif (Negeri + Swasta)
- **Lokasi ULD**: Total Unit Layanan Disabilitas
- **Siswa Aktif**: Total siswa dengan status aktif

### Grafik 1: Sekolah per Jenjang
- Jenjang: PAUD, SD, SMP, SMA, SMK, SLB
- Status: Negeri (hijau) vs Swasta (orange)
- Type: Bar Chart (Grouped)

### Grafik 2: Distribusi Siswa
- Menampilkan persentase siswa di tiap jenjang
- Type: Doughnut Chart
- Warna: Multi-color

### Grafik 3: Top 10 ULD
- 10 sekolah dengan lokasi ULD terbanyak
- Type: Horizontal Bar Chart
- Warna: Gradient biru-ungu

## Customization

### Mengubah Warna
Edit di `landing.blade.php` bagian `<style>`:
```css
:root {
    --primary-color: #2C5F7C;      /* Warna utama */
    --secondary-color: #4A90A4;    /* Warna sekunder */
    --accent-color: #F4A261;       /* Warna aksen */
    --success-color: #2A9D8F;      /* Warna sukses */
    --warning-color: #E76F51;      /* Warna warning */
}
```

### Mengubah Data Grafik
Edit di `LandingPageController.php` method `index()`:
```php
// Contoh: filter berdasarkan tahun akademik
$totalStudents = Student::where('is_active', true)
    ->whereYear('created_at', 2026)
    ->count();
```

### Menambah Grafik Baru
1. Tambah canvas di `landing.blade.php`:
```html
<canvas id="newChart"></canvas>
```

2. Tambah data di controller
3. Tambah script Chart.js untuk grafik baru

## Dependencies

### CDN yang Digunakan
```html
<!-- Bootstrap 5.3.0 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<!-- Bootstrap Icons 1.10.0 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

<!-- Chart.js 4.4.0 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
```

## Features

✅ Responsive design (Desktop, Tablet, Mobile)  
✅ Interactive charts dengan Chart.js  
✅ Real-time data dari database  
✅ Hover effects pada cards  
✅ Gradient backgrounds  
✅ Bootstrap Icons  
✅ Mobile-friendly navigation  

## Testing

### Manual Testing
1. Buka http://localhost:8000
2. Verifikasi semua angka statistik muncul
3. Verifikasi ketiga grafik tampil dengan benar
4. Test responsiveness dengan resize browser
5. Klik tombol "Login Sebagai" untuk ke halaman login

### Browser Compatibility
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+

## Troubleshooting

### Problem: Grafik tidak muncul
**Solution**:
```javascript
// Cek di browser console (F12)
// Pastikan tidak ada error JavaScript
// Pastikan Chart.js berhasil di-load
```

### Problem: Data kosong
**Solution**:
```bash
# Re-seed database
php artisan db:seed --class=SchoolSeeder
php artisan db:seed --class=StudentSeeder
```

### Problem: Styling rusak
**Solution**:
- Clear browser cache (Ctrl+Shift+Delete)
- Pastikan CDN Bootstrap dapat diakses
- Cek koneksi internet

## Performance Tips

1. **Caching**: Tambahkan cache untuk query yang sering diakses
```php
$totalSchools = Cache::remember('total_schools', 3600, function () {
    return School::where('is_active', true)->count();
});
```

2. **Lazy Loading**: Gunakan lazy loading untuk gambar
```html
<img loading="lazy" src="...">
```

3. **Minify**: Minify CSS dan JS untuk production
```bash
npm run build
```

## Next Steps

Setelah landing page berjalan:
1. ✅ Test semua grafik
2. ✅ Verifikasi data akurat
3. 🔲 Tambah animasi loading
4. 🔲 Implementasi cache
5. 🔲 Tambah filter berdasarkan tahun
6. 🔲 Export grafik ke PDF/PNG

## Support

Dokumentasi lengkap: `dokumentasi/LANDING_PAGE_FEATURE.md`

Untuk bantuan lebih lanjut, hubungi tim development.
