229 lines
6.4 KiB
Markdown
229 lines
6.4 KiB
Markdown
# 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. |