# FTTH Planner

Aplikasi perencanaan infrastruktur FTTH (Fiber to the Home) berbasis web menggunakan AdminLTE, PHP, MySQL, dan OpenStreetMaps.

## Fitur Utama

- **Manajemen Item FTTH**: OLT, Tiang Tumpu, ODP, ODC
- **Peta Interaktif**: Visualisasi infrastruktur menggunakan OpenStreetMaps
- **Drag & Drop**: Pindahkan item langsung di peta
- **Routing Kabel**: Buat rute kabel mengikuti jalan
- **Form Dinamis**: Tambah/edit item dengan form modal
- **Dashboard Statistik**: Monitoring jumlah item dan route
- **Responsive Design**: Tampilan optimal di desktop dan mobile
- **Export KMZ**: Export data ke Google Earth format

## Sistem Requirement

- **XAMPP** (Apache, MySQL, PHP 7.4+)
- **Web Browser** modern dengan JavaScript enabled
- **Koneksi Internet** untuk loading maps dan library

## Instalasi

### 1. Setup XAMPP

1. Download dan install XAMPP dari [https://www.apachefriends.org/](https://www.apachefriends.org/)
2. Start Apache dan MySQL di XAMPP Control Panel

### 2. Setup Database

1. Buka phpMyAdmin di browser: `http://localhost/phpmyadmin`
2. Import file database: `database.sql`
3. Atau jalankan SQL script secara manual untuk membuat database dan tabel

### 3. Setup Aplikasi

1. Copy folder aplikasi ke `C:\xampp\htdocs\ftthplanner`
2. Pastikan struktur folder seperti ini:
   ```
   C:\xampp\htdocs\ftthplanner\
   ├── index.php
   ├── config/
   │   └── database.php
   ├── api/
   │   ├── items.php
   │   ├── routes.php
   │   ├── tube_colors.php
   │   ├── splitters.php
   │   └── statistics.php
   ├── assets/
   │   ├── css/
   │   │   └── custom.css
   │   └── js/
   │       ├── map.js
   │       ├── app.js
   │       └── kmz-export.js
   ├── database.sql
   ├── README.md
   ├── KMZ_Export_Guide.md
   └── testing_guide.md
   ```

### 4. Konfigurasi Database

Edit file `config/database.php` sesuai dengan setting MySQL Anda:

```php
private $host = "localhost";
private $db_name = "ftth_planner";
private $username = "root";
private $password = "";
```

### 5. Akses Aplikasi

Buka browser dan akses: `http://localhost/ftthplanner`

## Cara Penggunaan

### Menambah Item FTTH

1. **Via Sidebar**: Klik menu "Tambah OLT", "Tambah Tiang Tumpu", dll
2. **Via Map**: Klik langsung di peta untuk menambah item di lokasi tersebut
3. **Via Tombol**: Klik tombol "Tambah Item" di header card map

### Mengedit Item

1. Klik marker di peta
2. Klik tombol "Edit" di popup
3. Update informasi di form modal
4. Klik "Simpan"

### Memindahkan Item

- Drag & drop marker langsung di peta
- Posisi akan otomatis tersimpan

### Membuat Route Kabel

1. **Mode Routing**: Klik tombol "Mode Routing" atau "Route" di popup item
2. **Pilih Tujuan**: Klik item tujuan untuk membuat route
3. **Auto Route**: Sistem akan membuat route mengikuti jalan

### Melihat Daftar Item/Route

- Klik menu "Daftar Item" untuk melihat semua item dalam tabel
- Klik menu "Routing Kabel" untuk melihat semua route

### Export ke Google Earth

1. **Klik tombol "Export KMZ"** di header peta atau sidebar
2. **File KMZ otomatis terdownload** dengan timestamp
3. **Buka di Google Earth** atau aplikasi GIS lainnya
4. **Lihat detail lengkap** setiap item dan route

## Struktur Database

### Tabel Utama

- `ftth_items`: Data item infrastruktur FTTH
- `cable_routes`: Data routing kabel antar item
- `item_types`: Jenis-jenis item (OLT, Tiang, ODP, ODC)
- `tube_colors`: Master data warna tube
- `splitter_types`: Master data jenis splitter

### Relasi

- Item memiliki relasi ke item_types, tube_colors, dan splitter_types
- Route menghubungkan dua item (from_item_id dan to_item_id)

## Teknologi yang Digunakan

### Frontend
- **AdminLTE 3.2**: Framework dashboard admin
- **Leaflet.js**: Library peta interaktif
- **OpenStreetMaps**: Data peta
- **Leaflet Routing Machine**: Routing jalan
- **Bootstrap 4**: CSS framework
- **jQuery**: JavaScript library
- **Font Awesome**: Icon library
- **JSZip**: Compression untuk KMZ export
- **FileSaver.js**: Download file functionality

### Backend
- **PHP 7.4+**: Server-side scripting
- **MySQL**: Database
- **PDO**: Database abstraction layer

### Maps & Routing
- **OpenStreetMaps**: Tile server peta
- **Leaflet**: Map rendering engine
- **OSRM**: Routing service

## Fitur Lanjutan

### Drag & Drop Items
- Semua marker dapat di-drag ke posisi baru
- Update koordinat otomatis tersimpan ke database

### Interactive Popup
- Info lengkap item saat klik marker
- Aksi edit, route, dan hapus dalam popup

### Route Visualization
- Route terpasang: garis solid hijau
- Route perencanaan: garis putus-putus kuning
- Route maintenance: garis putus-putus merah

### Responsive Design
- Optimized untuk desktop dan mobile
- Map dan form menyesuaikan ukuran layar

### Export KMZ
- Export semua data items dan routes ke format Google Earth
- File KMZ dengan styling yang sesuai untuk setiap jenis item
- Informasi lengkap dalam popup Google Earth
- Kompatibel dengan aplikasi GIS profesional

## Troubleshooting

### Error Database Connection
- Pastikan MySQL berjalan di XAMPP
- Cek konfigurasi di `config/database.php`
- Pastikan database `ftth_planner` sudah dibuat

### Map Tidak Muncul
- Cek koneksi internet
- Pastikan JavaScript enabled di browser
- Lihat console browser untuk error

### Item Tidak Tersimpan
- Cek permission folder aplikasi
- Pastikan semua field required sudah diisi
- Lihat Network tab di browser untuk error API

### Route Tidak Terbuat
- Pastikan kedua item sudah ada di database
- Cek koneksi internet untuk routing service
- Mode routing harus aktif sebelum memilih item

## Pengembangan Lebih Lanjut

### Fitur yang Bisa Ditambahkan

1. **Import/Export Data**: Import data dari Excel/CSV
2. **Laporan**: Generate laporan PDF/Excel
3. **User Management**: Login dan role-based access
4. **Backup/Restore**: Backup data dan konfigurasi
5. **Mobile App**: Native app untuk survey lapangan
6. **Integration**: Integrasi dengan sistem lain via API

### Customization

- Ubah warna marker di `assets/css/custom.css`
- Tambah jenis item baru di database `item_types`
- Modifikasi form field di `index.php`
- Tambah validasi di file API

## Lisensi

Aplikasi ini dibuat untuk keperluan pembelajaran dan dapat digunakan secara bebas.

## Kontak

Untuk pertanyaan dan support, silakan hubungi developer.

---

**Catatan**: Pastikan selalu backup database sebelum melakukan perubahan major pada aplikasi.