--- title: 'Topologi Jaringan Interaktif: Visualisasi Infrastruktur IT dengan OpenClaw' url: 'https://gretha.my.id/site/blog/topologi-jaringan-interaktif' markdown: 'https://gretha.my.id/site/blog/topologi-jaringan-interaktif.md' date: '2026-09-24' description: 'Topologi Jaringan Interaktif: Visualisasi Infrastruktur IT dengan OpenClaw Bagaimana saya membangun aplikasi visualisasi topologi jaringan interaktif — 75 perangkat, monitoring real-time, dan manajemen device, semuanya dengan bantuan OpenClaw AI. Apa Itu Project Ini? Project ini adalah aplikasi we…' --- # Topologi Jaringan Interaktif: Visualisasi Infrastruktur IT dengan OpenClaw *Bagaimana saya membangun aplikasi visualisasi topologi jaringan interaktif — 75 perangkat, monitoring real-time, dan manajemen device, semuanya dengan bantuan OpenClaw AI.* --- ## Apa Itu Project Ini? Project ini adalah **aplikasi web visualisasi topologi jaringan** yang saya bangun untuk memetakan seluruh infrastruktur jaringan — dari server, switch, PC, printer, access point, hingga UPS — dalam satu tampilan interaktif yang bisa diakses dari browser. **Data saat ini:** - **75 perangkat** (server, switch, PC, printer, access point, router, UPS, dll) - **29 koneksi** antar perangkat - **Monitoring status** real-time (online/offline) - **Drag & drop** untuk布局jaringan - **Manajemen device** — tambah, edit, hapus, clone Coba lihat langsung: **[Topologi Jaringan](https://gretha.my.id/topologi/)** --- ## Masalah yang Dipecahkan Sebagai staf IT, saya sering menghadapi pertanyaan seperti: > "PC di ruang EDP2 IP-nya berapa?" "Switch mana yang nyambung ke server MySQL?" "Printer di ruang APWhatau fibratuh apa?" "Kenapa jaringan di lantai 2 putus?" Sebelum project ini, jawabannya ada di **kepala saya** atau di **file Excel yang sudah usang**. Sekarang, semua orang bisa lihat langsung dari browser — lengkap dengan status hidup/mati setiap perangkat. --- ## Arsitektur Project ``` ┌─────────────────────────────────────────────────┐ │ Browser (Frontend) │ │ ┌───────────┐ ┌──────────┐ ┌──────────────┐ │ │ │ Sidebar │ │ Canvas │ │ Device Info │ │ │ │ - Form │ │ - SVG │ │ - Detail │ │ │ │ - List │ │ - Drag │ │ - Status │ │ │ │ - Filter │ │ - Zoom │ │ - Edit │ │ │ └───────────┘ └──────────┘ └──────────────┘ │ └────────────────────┬────────────────────────────┘ │ API (JSON) ┌────────────────────▼────────────────────────────┐ │ API Server (PHP) │ │ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │ │ │ GET │ │ POST │ │ Deploy │ │ │ │ (Read) │ │ (Save) │ │ (Write) │ │ │ └──────────┘ └──────────┘ └──────────────┘ │ └────────────────────┬────────────────────────────┘ │ ┌────────────────────▼────────────────────────────┐ │ Data Storage │ │ ┌──────────────────────────────────────────┐ │ │ │ data.json (75 devices, 29 links) │ │ │ └──────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘ ``` --- ## Fitur Utama ### 1. Visualisasi Interaktif Setiap perangkat digambarkan sebagai **node** dengan ikon dan warna yang sesuai: | Tipe | Ikon | Warna | Contoh | |---|---|---|---| | Server | 🖥️ | Biru | Server MySQL, Server Samba | | Switch/Hub | 🔌 | Ungu | Switch Fiber, HUB RM | | PC/Workstation | 💻 | Hijau | EDP2, EDP3, KASIR | | Printer | 🖨️ | Orange | Printer Ruang Kasir | | Access Point | 📡 | Cyan | APWhat fibratuh, APWhat3 | | Router | 🌐 | Pink | Router IndiHome | | UPS | 🔋 | Kuning | UPS Server | | CCTV | 📹 | Merah | CCTV | | Lainnya | ⚙️ | Abu-abu | Switch DUM | ### 2. Monitoring Real-Time Aplikasi bisa melakukan **ping** ke setiap perangkat untuk mengetahui status online/offline: ``` Status ONLINE = Hijau ✅ (response time < 100ms) Status SLOW = Kuning ⚠️ (response time 100-500ms) Status OFFLINE = Merah ❌ (timeout / unreachable) ``` ### 3. Manajemen Device - **Tambah perangkat** — pilih tipe, isi nama, IP, lokasi, catatan - **Edit perangkat** — klik node, ubah informasi - **Hapus perangkat** — pilih, konfirmasi, selesai - **Clone perangkat** — duplikasi untuk perangkat serupa - **Drag & drop** — geser posisi node di canvas ### 4. Filter dan Pencarian - Filter berdasarkan **tipe perangkat** (server, switch, PC, printer, dll) - Filter berdasarkan **status** (online/offline) - **Pencarian** berdasarkan nama atau IP ### 5. Koneksi Antar Perangkat Koneksi digambarkan sebagai **garis** antar node: ``` ┌──────────┐ Fiber ┌──────────┐ │ Server │─────────────│ Switch │ │ MySQL │ │ Fiber │ └──────────┘ └──────────┘ │ Fiber│ │ ┌─────▼──────┐ │ Switch │ │ HUB RM │ └────────────┘ ``` --- ## Tech Stack | Komponen | Teknologi | Fungsi | |---|---|---| | Frontend | HTML + CSS + Vanilla JS | UI interaktif, canvas rendering | | Backend | PHP | API untuk CRUD data | | Storage | JSON file | Penyimpanan data perangkat | | Deployment | Shared Hosting | Akses via web | | AI Assistant | OpenClaw + DeepSeek | Coding, debugging, deployment | --- ## Peran OpenClaw Project ini **100% dibangun dengan bantuan OpenClaw**. Berikut peran AI dalam setiap tahap: ### Tahap 1: Desain Arsitektur Saya menjelaskan kebutuhan saya: > "Saya punya 75 perangkat jaringan. Butuh aplikasi web untuk visualisasikan semua itu secara interaktif." OpenClaw langsung merancang: - Struktur data JSON untuk devices dan links - Arsitektur frontend-backend - Skema API untuk CRUD ### Tahap 2: Coding Frontend OpenClaw menulis **1296 baris HTML/CSS/JS** dalam satu file: - Canvas rendering untuk node dan edges - Drag & drop system - Sidebar form untuk CRUD - Filter dan pencarian - Responsive design ### Tahap 3: Coding Backend OpenClaw menulis **135 baris PHP** untuk API: - GET untuk membaca data - POST untuk menyimpan data - Deploy action untuk write file - Data verification setelah save ### Tahap 4: Testing & Debugging Ketika ada masalah, OpenClaw langsung fix: - JSON decode error → fix data validation - Node tidak bisa di-drag → fix event handler - Status monitoring timeout → fix ping implementation ### Tahap 5: Deployment OpenClaw membantu deploy ke server: - Upload file ke shared hosting via robotku.php - Setup API endpoint - Verifikasi akses dari browser --- ## Contoh Penggunaan ### Melihat Status Jaringan Buka browser, akses `https://gretha.my.id/topologi/`. Sidebar menampilkan daftar semua perangkat. Klik salah satu untuk melihat detail: ``` ┌─────────────────────────┐ │ 🖥️ Server MySQL │ │ ───────────────────── │ │ IP: 192.168.168.8 │ │ Tipe: Server │ │ Lokasi: Ruang Server │ │ Status: ✅ ONLINE │ │ Response: 12ms │ └─────────────────────────┘ ``` ### Menambah Perangkat Baru 1. Klik **"+ Tambah Device"** di sidebar 2. Pilih tipe (Server, Switch, PC, dll) 3. Isi nama, IP, lokasi, catatan 4. Klik **"Simpan"** 5. Node muncul di canvas, drag ke posisi yang tepat ### Mengedit Perangkat 1. Klik node yang ingin diedit 2. Panel detail muncul di sidebar 3. Klik **"Edit"** 4. Ubah informasi yang diperlukan 5. Klik **"Simpan"** --- ## Insight dari Project Ini ### 1. Visualisasi Mengubah Cara Kerja Sebelum project ini, saya harus **hafal** mana switch yang nyambung ke mana. Sekarang, cukup lihat diagram. Waktu troubleshooting turun drastis. ### 2. Data Real-Time = Keputusan Lebih Cepat Ketika ada masalah jaringan, saya bisa langsung cek status semua perangkat dari satu halaman. Tidak perlu telpon satu-satu. ### 3. AI Mempercepat Development Dulu, project seperti ini butuh waktu **berminggu-minggu**. Dengan OpenClaw, saya bisa bangun dalam **beberapa jam**. AI menulis kode, saya review dan test. ### 4. Shared Hosting Bisa Untuk App Serius Banyak yang pikir shared hosting hanya untuk blog. Ternyata, dengan desain yang tepat (stateless API + JSON storage), shared hosting bisa menjalankan app interaktif yang powerful. --- ## Tantangan dan Solusi | Tantangan | Solusi | |---|---| | Shared hosting tidak punya database | Pakai JSON file sebagai storage | | Tidak ada SSH | Deploy lewat robotku.php (file manager API) | | 75 device bisa lambat render | Canvas optimization + virtual scrolling | | Status monitoring butuh server-side | PHP exec ping + cache hasil | | Mobile responsiveness | CSS media queries + collapsible sidebar | --- ## Demo Langsung Mencoba project ini? Kunjungi: **👉 ** - Buka sidebar dengan klik tombol ☰ - Klik device untuk melihat detail - Filter berdasarkan tipe atau status - Drag node untuk mengatur layout --- ## Download & Instalasi Project ini **open source** — silakan download dan pakai di jaringan Anda sendiri! ### 📥 Download 👉 **[Download topologi.zip](https://gretha.my.id/topologi/topologi.zip)** (18 KB) ### File yang Didapat ``` topologi/ ├── index.html ← Aplikasi utama (buka di browser) ├── api.php ← Backend API untuk simpan data ├── data.json ← Data topologi (75 device, 29 links) ├── data_old.json ← Backup data sebelumnya └── up.php ← Script upload file ``` ### Tutorial Instalasi #### Persiapan Yang Anda butuhkan: | Komponen | Keterangan | Download | |---|---|---| | Web Server | Apache/Nginx dengan PHP 7.4+ | [XAMPP](https://www.apachefriends.org/) atau [Laragon](https://laragon.org/) | | Browser | Chrome/Firefox/Edge terbaru | - | | Editor (opsi) | VS Code untuk edit IP/device | [VS Code](https://code.visualstudio.com/) | #### Langkah 1: Extract File ```bash # Extract topologi.zip ke folder web server # Untuk XAMPP: unzip topologi.zip -d C:\xampp\htdocs\topologi # Untuk Laragon: unzip topologi.zip -d C:\laragon\www\topologi # Untuk Linux: sudo unzip topologi.zip -d /var/www/html/topologi ``` #### Langkah 2: Buka di Browser ``` http://localhost/topologi/ ``` Tampilan langsung jalan! Anda sudah bisa melihat topologi jaringan. #### Langkah 3: Edit Data Topologi (Kustomisasi) Buka file `data.json` dengan text editor untuk mengganti device sesuai jaringan Anda: ```json { "devices": [ { "id": 1, "name": "Server MySQL", "type": "server", "ip": "192.168.1.10", "location": "Ruang Server", "x": 400, "y": 200, "notes": "Database utama" }, { "id": 2, "name": "Switch Utama", "type": "switch", "ip": "", "location": "Ruang Server", "x": 600, "y": 200, "notes": "" } ], "links": [ { "from": 1, "to": 2, "label": "Fiber" } ], "nextId": 3 } ``` **Tips:** - `type` bisa diisi: `server`, `switch`, `pc`, `printer`, `accesspoint`, `router`, `ups`, `cctv`, `other` - `x` dan `y` = posisi node di canvas (koordinat pixel) - `from` dan `to` = ID device yang terhubung #### Langkah 4: Deploy ke Server (Opsional) Kalau ingin diakses dari mana saja: ```bash # Upload ke VPS/shared hosting scp -r topologi/ user@server:/var/www/html/topologi/ ``` Atau gunakan **robotku.php** (file manager API) seperti yang saya lakukan di gretha.my.id. #### Langkah 5: Kustomisasi Tampilan Buka `index.html` untuk mengubah: - **Warna tema** — edit CSS di bagian `:root` - **Logo/nama** — edit teks di bagian sidebar header - **Icon device** — ubah emoji di bagian `DEVICE_TYPES` - **Map area** — ganti gambar latar (opsional) --- ### FAQ **Q: Apakah butuh database MySQL?** A: **Tidak!** Data disimpan di file `data.json` — cukup copy paste, tidak perlu setup database. **Q: Berapa maksimal device yang bisa ditambah?** A: Secara teknis tidak ada batas. Tapi untuk performa optimal, di bawah 500 device masih nyaman. **Q: Bisa diakses dari HP?** A: Ya! Frontend sudah responsive. Bisa diakses dari browser HP. **Q: Data bisa hilang kalau server restart?** A: Tidak. Data tersimpan di file `data.json` yang persisten. File `data_old.json` adalah backup otomatis. --- ## Kesimpulan Project topologi jaringan ini membuktikan bahwa: 1. **AI bisa membantu membangun app nyata** — bukan hanya chatbot atau script kecil 2. **Visualisasi data jaringan sangat membantu** — troubleshooting jadi lebih cepat 3. **Shared hosting masih relevan** — untuk app yang didesain dengan benar 4. **OpenClaw adalah mitra coding yang powerful** — dari desain hingga deployment Yang dulunya hanya bisa diakses oleh admin IT (yang hafal IP semua PC), sekarang bisa dilihat oleh siapa saja yang punya akses ke jaringan. **Itulah kekuatan visualisasi data.** --- *Project ini dibangun sepenuhnya dengan bantuan OpenClaw AI + DeepSeek Model. Semua kode, debugging, dan deployment dilakukan melalui chat.* --- ## Navigation - Parent: [Blog](https://gretha.my.id/site/blog.md) - Next: [Remote Windows Administration dengan OpenClaw: SSH, Printer Share, dan Samba dari Linux](https://gretha.my.id/site/blog/remote-windows-admin-openclaw.md)