# LANDING PAGE FEATURE

## Deskripsi
Landing page DIBA GTK adalah halaman awal yang menampilkan statistik dan visualisasi data dalam bentuk grafik untuk memberikan gambaran umum tentang:
- Jumlah Sekolah (Negeri dan Swasta)
- Jumlah Lokasi ULD (Unit Layanan Disabilitas)
- Jumlah Siswa Aktif

## Fitur Utama

### 1. **Statistik Dashboard**
Menampilkan tiga kartu statistik utama:
- **Total Sekolah**: Jumlah total sekolah aktif dengan breakdown Negeri dan Swasta
- **Lokasi ULD**: Jumlah total Unit Layanan Disabilitas yang tersedia
- **Siswa Aktif**: Jumlah total siswa yang terdaftar aktif

### 2. **Visualisasi Grafik**

#### Grafik 1: Jumlah Sekolah Berdasarkan Jenjang
- **Tipe**: Bar Chart (Batang)
- **Data**: Menampilkan perbandingan jumlah sekolah Negeri vs Swasta untuk setiap jenjang:
  - PAUD
  - SD
  - SMP
  - SMA
  - SMK
  - SLB
- **Warna**: 
  - Hijau untuk Negeri
  - Orange untuk Swasta

#### Grafik 2: Distribusi Siswa per Jenjang
- **Tipe**: Doughnut Chart (Donat)
- **Data**: Menampilkan distribusi jumlah siswa di setiap jenjang pendidikan
- **Warna**: Multi-warna untuk setiap jenjang

#### Grafik 3: Top 10 Sekolah dengan ULD Terbanyak
- **Tipe**: Horizontal Bar Chart (Batang Horizontal)
- **Data**: Menampilkan 10 sekolah dengan jumlah lokasi ULD terbanyak
- **Warna**: Biru/Ungu gradient

### 3. **Informasi Terkini**
Menampilkan pengumuman dan informasi penting:
- Pengajuan Tunjangan Profesi Periode 1
- Mutasi Guru PNS

### 4. **Layanan Digital**
Daftar layanan yang tersedia di sistem DIBA GTK:
- Sistem Pendataan Sekolah
- Pengelolaan Layanan Administrasi Bidang Guru
- Pengelolaan Tenaga Kependidikan
- Manajemen Unit Layanan Disabilitas (ULD)
- Data Siswa Berkebutuhan Khusus

## File yang Dibuat/Dimodifikasi

### 1. Controller
**File**: `app/Http/Controllers/LandingPageController.php`

```php
- index(): Method untuk menampilkan landing page dengan data statistik
  - Mengambil data total sekolah (Negeri & Swasta)
  - Mengambil data total ULD
  - Mengambil data total siswa aktif
  - Memproses data untuk grafik berdasarkan jenjang
  - Mengambil top 10 sekolah dengan ULD terbanyak
```

### 2. View
**File**: `resources/views/landing.blade.php`

Komponen utama:
- Hero Section: Header dengan judul dan tombol login
- Statistics Cards: 3 kartu statistik utama
- Charts Section: 3 grafik visualisasi data
- Information Cards: Informasi terkini dan layanan
- Footer: Informasi kontak Disdik Jabar

### 3. Routes
**File**: `routes/web.php`

```php
Route::get('/', [LandingPageController::class, 'index'])->name('landing');
```

## Teknologi yang Digunakan

### Frontend
- **Bootstrap 5.3.0**: Framework CSS untuk responsive design
- **Bootstrap Icons 1.10.0**: Icon set
- **Chart.js 4.4.0**: Library untuk membuat grafik interaktif

### Backend
- **Laravel 11**: Framework PHP
- **Eloquent ORM**: Untuk query database

## Query Database

Landing page menggunakan beberapa query efisien:

```php
// Total sekolah aktif
School::where('is_active', true)->count()

// Sekolah berdasarkan jenjang dan status
School::where('is_active', true)
    ->select('level', 'status', DB::raw('count(*) as total'))
    ->groupBy('level', 'status')
    ->get()

// Total ULD
UldLocation::count()

// Total siswa aktif
Student::where('is_active', true)->count()

// Top 10 sekolah dengan ULD terbanyak
UldLocation::select('school_id', DB::raw('count(*) as total'))
    ->groupBy('school_id')
    ->orderBy('total', 'desc')
    ->limit(10)
    ->with('school:id,name')
    ->get()

// Siswa berdasarkan jenjang
Student::where('is_active', true)
    ->join('schools', 'students.school_id', '=', 'schools.id')
    ->select('schools.level', DB::raw('count(*) as total'))
    ->groupBy('schools.level')
    ->get()
```

## Cara Mengakses

1. Buka browser dan akses: `http://localhost:8000` atau domain aplikasi
2. Landing page akan otomatis ditampilkan
3. Klik tombol "Login Sebagai" untuk masuk ke sistem

## Responsiveness

Landing page telah dioptimalkan untuk berbagai ukuran layar:
- **Desktop**: Layout 3 kolom untuk statistik, 2 kolom untuk grafik
- **Tablet**: Layout menyesuaikan dengan lebar layar
- **Mobile**: Layout 1 kolom, semua elemen stack vertikal

## Customization

### Mengubah Warna Tema
Edit variabel CSS di bagian `:root` dalam file `landing.blade.php`:

```css
:root {
    --primary-color: #2C5F7C;
    --secondary-color: #4A90A4;
    --accent-color: #F4A261;
    --success-color: #2A9D8F;
    --warning-color: #E76F51;
}
```

### Menambah/Mengubah Grafik
Edit bagian Chart.js script di file `landing.blade.php`:
- Ubah tipe chart: `type: 'bar'` menjadi `'line'`, `'pie'`, dll
- Ubah warna: modifikasi array `backgroundColor`
- Tambah dataset baru di array `datasets`

## Performance

Landing page telah dioptimalkan untuk performa:
- Menggunakan CDN untuk library eksternal (Bootstrap, Chart.js)
- Query database efisien dengan groupBy dan agregasi
- Eager loading untuk relasi (`with('school:id,name')`)
- Caching dapat ditambahkan untuk data yang jarang berubah

## Future Enhancements

Beberapa enhancement yang dapat ditambahkan:
1. **Real-time Updates**: Menggunakan WebSocket untuk update data real-time
2. **Filtering**: Tambah filter berdasarkan tahun akademik, KCD, atau wilayah
3. **Export**: Fitur export grafik ke PDF atau gambar
4. **Animasi**: Animasi loading saat data dimuat
5. **Interaktif**: Klik pada grafik untuk detail lebih lanjut
6. **Cache**: Implementasi cache untuk data statistik

## Troubleshooting

### Grafik tidak muncul
- Pastikan Chart.js CDN dapat diakses
- Cek console browser untuk error JavaScript
- Pastikan data dari controller tidak kosong

### Data tidak akurat
- Jalankan `php artisan migrate:fresh --seed` untuk refresh data
- Cek query di controller untuk memastikan filter yang benar

### Styling rusak
- Pastikan Bootstrap CSS CDN dapat diakses
- Clear browser cache
- Cek browser compatibility

## Screenshots

Landing page menampilkan:
1. Hero section dengan gradient background
2. 3 kartu statistik dengan hover effect
3. Grafik batang untuk perbandingan sekolah
4. Grafik donat untuk distribusi siswa
5. Grafik horizontal untuk top 10 ULD
6. Section informasi dan layanan
7. Footer dengan kontak Disdik Jabar

## Contact & Support

Untuk pertanyaan atau dukungan terkait landing page:
- Email: support@disdik.jabarprov.go.id
- Telp: (022) 4264813
- Website: https://disdik.jabarprov.go.id
