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/
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:

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.