Simulasi Jaringan Panduan Lengkap

Sebelum masuk kelas

• Pastikan folder berisi index.html dan panduan-guru.html.
• Uji buka index.html di browser yang akan dipakai siswa.
• Muat kedua skenario dan jalankan satu simulasi untuk memastikan tampilan normal.
• Siapkan proyektor; aplikasi nyaman pada lebar 1366 px atau lebih.
• Ingat: tidak ada penyimpanan otomatis. Jangan menutup tab sebelum pekerjaan siswa selesai.

Aplikasi adalah laboratorium jaringan visual untuk siswa SMA/SMK kelas X yang belum memiliki pengetahuan jaringan. Siswa menyusun perangkat, menghubungkannya, memberi alamat IP, memvalidasi topologi, lalu mengirim paket dan membaca perjalanannya langkah demi langkah.

Tujuan pembelajaran yang didukung

Yang sudah tersedia

Batasan yang perlu diketahui guru

• Tidak ada penyimpanan otomatis. Memuat ulang halaman menghapus seluruh pekerjaan.
• Tidak ada ekspor gambar/PDF bawaan. Gunakan tangkapan layar atau cetak halaman browser.
• Tidak ada kuis, login, atau rekap nilai. Penilaian dilakukan guru dengan rubrik di bagian 10.
• Tidak ada DNS, DHCP, NAT, atau subnetting. Cocok untuk pengenalan topologi dan alamat IP dasar.
• Bukan untuk ponsel. Di bawah 1024 px aplikasi menampilkan banner; gunakan laptop/PC.
• Tautan selalu dua arah. Tidak ada konsep arah kabel atau VLAN.

Berkas dalam paket

Kebutuhan minimum

Langkah membuka

1. Ekstrak atau salin folder yang berisi index.html ke komputer.
2. Klik dua kali index.html. Browser default akan membukanya sebagai file:///....
3. Jika terbuka di editor teks, klik kanan → Open with → Chrome/Edge/Firefox.
4. Pastikan kanvas, panel kanan, dan toolbar tampil. Aplikasi siap dipakai.

Cara membagikan ke siswa

Kondisi awal saat pertama dibuka

Jika ingin meng-host (opsional)

Aplikasi dapat diletakkan di server statis sekolah, GitHub Pages, Netlify, atau Google Sites (unggah file). Tidak ada konfigurasi server, basis data, atau build step. Selama file HTML dapat diakses, aplikasi berjalan.

Fungsi setiap area

Tab panel kanan

Membaca status dan petunjuk

• Siap — belum ada masalah atau validasi belum dijalankan.
• Siap · 7/7 — validasi terakhir lulus semua aturan wajib.
• Ada masalah — masih ada aturan wajib yang gagal; skor rinci terlihat di tab Validasi.
• Zoom — persentase tampilan kanvas; skenario otomatis di-fit saat dimuat.
• Petunjuk bawah — berubah sesuai konteks, misalnya “Klik dua kali perangkat untuk mengubah nama & IP.”

Alat di toolbar

Mouse dan kanvas

Keyboard

Tombol aksi

Perilaku umpan balik

• Toast tampil ± 3,4 detik di bawah kanvas. Warna hijau untuk sukses, merah untuk kesalahan, netral untuk informasi.
• Konfirmasi memakai dialog browser, bukan dialog kustom. Teksnya: “Reset canvas dan muat skenario ini?” atau “Reset canvas? Semua perangkat dan koneksi akan dihapus.”
• Status bar berubah menjadi Mengirim paket… saat animasi berjalan, lalu Siap · 7/7 atau Ada masalah setelah validasi.
• Validasi lama dihapus saat perangkat, tautan, nama, atau IP diubah. Jalankan ulang validasi setelah perbaikan.

Gunakan pola Lihat → Tiru → Bangun → Jelaskan. Siswa perlu melihat satu rute yang benar sebelum membangun sendiri, lalu menjelaskan alasannya dengan kata-kata sendiri.

Rencana pembelajaran 60 menit

Alur kerja siswa (poster ringkas)

1. Susun perangkat. Seret dari palet. Mulai dari Internet → Router → Switch/AP → endpoint.
2. Hubungkan. Gunakan Kabel untuk backbone dan Nirkabel untuk laptop/HP ke AP. Cek tidak ada perangkat yatim.
3. Beri identitas. Klik dua kali perangkat; isi nama yang bermakna dan IP unik. Internet tidak diberi IP.
4. Validasi. Buka tab Validasi. Baca aturan yang gagal, perbaiki satu per satu, lalu periksa ulang.
5. Simulasikan. Tandai sumber dan tujuan. Kirim paket. Baca setiap kartu narasi, bukan hanya pesan sukses.
6. Jelaskan. Minta siswa menutup panel dan menceritakan rute dari ingatan.

Variasi kegiatan

Pertanyaan pemandu

• Mengapa komputer tidak langsung dihubungkan ke Internet tanpa router?
• Apa perbedaan peran switch dan access point?
• Mengapa laptop dan HP pada skenario rumah terhubung ke AP, bukan ke router?
• Apa yang terjadi jika satu kabel backbone dihapus? Aturan mana yang gagal?
• Mengapa dua perangkat tidak boleh memakai IP yang sama?
• Jika ada dua jalur, jalur mana yang dipilih aplikasi? (Jalur terpendek berdasarkan jumlah hop.)

Saat perangkat baru ditambahkan, nama diisi otomatis dan IP selalu kosong. Nama duplikat diberi angka: “Komputer”, “Komputer 2”, “Komputer 3”, dan seterusnya. Nama unik tidak wajib; aturan validasi bekerja berdasarkan jenis perangkat, bukan nama.

Detail perilaku perangkat

Kombinasi yang disarankan

Kedua skenario dimuat dari menu Muat Skenario. Saat dimuat, aplikasi menghapus simulasi dan validasi lama, mengosongkan pilihan sumber/tujuan, berpindah ke tab Info, lalu auto-fit kanvas ke seluruh perangkat (zoom 45%–125% tergantung ukuran layar).

Skenario 1 — Lab Komputer Sekolah

Rute yang dihasilkan

4 perangkat, 3 hop. Ini rute default untuk demonstrasi tercepat. Rute PC-01 → PC-04 menjadi PC-01 → Switch Lab → PC-04 (3 perangkat, 2 hop).

Skenario 2 — Jaringan Rumah Sederhana

Rute yang dihasilkan

4 perangkat, 3 hop. HP Kakak → Internet juga 4 perangkat. Laptop → HP menjadi Laptop Ayah → AP Wi-Fi → HP Kakak (3 perangkat, 2 hop).

Validasi dijalankan dari tab Validasi atau tombol Validasi Jaringan. Skor utama selalu x/7. Pemeriksaan IP ditampilkan terpisah sebagai x/2 opsional dan tidak menambah atau mengurangi skor wajib.

Daftar aturan

Cara membaca hasil

Contoh skor

Hal yang tidak diperiksa

• Format IPv4. “abc”, “999.999.999.999”, atau “192.168.1” diterima sebagai string.
• Subnet mask, gateway, DNS, DHCP. Tidak ada konsep ini di aplikasi.
• Kelas IP, private/public, atau rentang yang benar. Tidak divalidasi.
• Kesamaan segmen jaringan. 10.0.0.1 dan 192.168.1.10 dianggap unik dan valid.
• Konektivitas penuh. Gunakan simulasi untuk memastikan jalur benar-benar tersambung.
• Kesesuaian jenis kabel. R05 tidak membedakan kabel/nirkabel; AP dan switch diperlakukan sama untuk syarat ini.

Kapan harus memvalidasi ulang?

Setiap kali perangkat ditambah/dihapus, tautan dibuat/dihapus, nama diubah, atau IP diubah, hasil validasi lama otomatis dihapus. Klik Periksa Jaringan lagi. Memindahkan perangkat di kanvas tidak mengubah topologi, jadi hasil validasi tetap berlaku.

Menyiapkan sumber dan tujuan

1. Pilih perangkat di kanvas, lalu buka tab Info.
2. Klik Jadikan Sumber. Perangkat mendapat lencana S.
3. Pilih perangkat lain, klik Jadikan Tujuan. Perangkat mendapat lencana D.
4. Alternatif cepat: Shift+klik perangkat pertama, lalu Shift+klik perangkat kedua.
5. Buka tab Simulasi dan klik Kirim Paket.

Apa yang terjadi saat paket dikirim

Rute 3 hop biasanya selesai dalam ± 4–6 detik. Nilai ini tidak dapat diubah dari antarmuka; ubah kode jika perlu (lihat bagian 11).

Rute dan pemilihan jalur

• Aplikasi memakai BFS (Breadth-First Search) pada graf tak berarah, sehingga memilih jalur dengan jumlah hop paling sedikit.
• Jika ada beberapa jalur terpendek, jalur yang ditemukan lebih dulu berdasarkan urutan tautan yang menang. Urutan ini tidak terlihat oleh siswa.
• Jumlah perangkat pada ringkasan = panjang jalur, termasuk sumber dan tujuan. Jumlah hop = jumlah perangkat − 1.
• Tautan kabel dan nirkabel dianggap sama untuk pencarian jalur; jenisnya hanya memengaruhi teks narasi.
• Perangkat terisolasi atau “pulau” terpisah menghasilkan Tidak ada jalur.

Pola narasi per hop

Rute contoh lengkap

1. “PC-01 mengirim paket ke Switch Lab melalui kabel Ethernet.”
2. “Switch Lab meneruskan paket ke Router Sekolah.”
3. “Router Sekolah meneruskan paket ke jaringan Internet melalui ISP.”

Ringkasan: “Paket berhasil sampai ke Internet! Melewati 4 perangkat.” Panel juga menampilkan judul “Paket berhasil sampai!”.

Status dan kesalahan

Cara menafsirkan hasil bersama siswa

• Jangan berhenti di pesan sukses. Minta siswa menyebutkan urutan perangkat dan jenis tautan tiap hop.
• Tanyakan fungsi tiap perangkat, bukan hanya namanya: switch meneruskan dalam LAN, router menghubungkan ke WAN, AP menjembatani Wi-Fi.
• Bandingkan dua rute: PC-01 → Internet dan Laptop → Internet. Apa peran AP yang tidak dimiliki Lab?
• Saat gagal, bedakan dua penyebab: topologi (tidak ada jalur) dan aturan (validasi gagal). Jalankan validasi untuk mempersempit.
• Minta siswa memprediksi narasi hop berikutnya sebelum animasi mencapainya.

Latihan berjenjang

Tantangan “cari kesalahan”

Guru sengaja merusak topologi, lalu siswa mendiagnosis dari pesan validasi. Berikut variasi yang sudah terbukti menghasilkan kegagalan spesifik:

Rubrik penilaian

Gunakan 4 kriteria dengan skala 1–4. Skor maksimum 16; nilai akhir dapat dihitung (total / 16) × 100.

Exit ticket 5 menit

1. Sebutkan tiga perangkat yang dilewati paket dari PC di Lab menuju Internet.
2. Apa perbedaan switch dan access point?
3. Mengapa IP harus unik? Apa yang terjadi jika dua perangkat memakai IP sama?
4. Mengapa validasi 7/7 belum tentu berarti semua perangkat dapat saling terhubung?

Seluruh aplikasi berada dalam index.html. Tidak ada bundler, npm, atau server. Cukup edit dengan editor teks (VS Code, Notepad++, Sublime Text), simpan sebagai UTF-8, lalu muat ulang browser dengan Ctrl + F5.

Peta titik edit

Nomor baris dapat bergeser setelah edit. Gunakan teks pencarian, bukan hanya nomor baris.

Mengubah teks dan judul

1. Cari <h1>Simulasi Jaringan</h1> dan ubah judul yang terlihat di toolbar.
2. Cari const STRINGS = { untuk mengubah pesan seperti packetSuccess, noPath, dan tipDefault.
3. Label jenis perangkat ada di deviceLabels, misalnya ubah phone: 'HP / Ponsel' menjadi phone: 'Ponsel'.
4. Simpan sebagai UTF-8, lalu muat ulang. Karakter Indonesia dan tanda hubung panjang akan tampil benar.

Menambah skenario

Tambahkan objek baru ke array SCENARIOS, lalu tambahkan <option> dengan nilai yang sama ke #scenarioSelect.

{
  id: 'sekolah-baru',
  name: 'Lab Sekolah Baru',
  devices: [
    { id: 'nb-internet', kind: 'internet', label: 'Internet', ip: '', x: 520, y: 80 },
    { id: 'nb-router',   kind: 'router',   label: 'Router Utama', ip: '10.0.0.1', x: 380, y: 190 },
    { id: 'nb-switch',   kind: 'switch',   label: 'Switch Inti', ip: '10.0.0.2', x: 220, y: 300 },
    { id: 'nb-pc',       kind: 'desktop',  label: 'PC-01', ip: '10.0.0.10', x: 90, y: 300 }
  ],
  links: [
    { id: 'nb-l1', from: 'nb-router', to: 'nb-internet', type: 'wired' },
    { id: 'nb-l2', from: 'nb-switch', to: 'nb-router', type: 'wired' },
    { id: 'nb-l3', from: 'nb-pc', to: 'nb-switch', type: 'wired' }
  ]
}

Aturan data: id perangkat unik di dalam skenario; from/to pada tautan merujuk ke id tersebut; kind harus salah satu dari 8 jenis; type hanya wired atau wireless. Koordinat bebas; aplikasi akan auto-fit saat dimuat.

Menambah atau mengubah aturan validasi

Setiap aturan adalah objek dengan id, label, optional, failMessage, dan fungsi check(devices, links) yang mengembalikan boolean.

{
  id: 'R10',
  label: 'Ada server',
  optional: false,
  failMessage: 'Tambahkan minimal satu Server ke jaringan.',
  check: (devices) => devices.some((d) => d.kind === 'server')
}

Mengubah waktu animasi

Mengubah zoom

• Auto-fit: clamp(..., 0.45, 1.25) di fitToContent. Ubah batas atas jika ingin skenario lebih besar saat dimuat.
• Zoom manual: clamp(..., 0.45, 2.2) di onWheel. Jangan turunkan batas bawah terlalu jauh karena label akan tidak terbaca.
• Langkah zoom: factor = 1.12. Ubah ke 1.08 untuk langkah lebih halus.

Mengubah tampilan

Palet warna utama ada di :root: --c-navy, --c-teal, --c-paper, --c-amber. Mengubah variabel ini akan memengaruhi seluruh aplikasi. Untuk mengubah ikon, edit markup SVG di DEVICE_ICONS; pertahankan viewBox="0 0 48 48" agar ukuran konsisten.

Jika aplikasi benar-benar tidak dapat dibuka

1. Pastikan file berekstensi .html, bukan .txt atau .htm.txt.
2. Klik kanan → Open with → pilih browser, atau seret file ke jendela browser.
3. Coba mode incognito untuk menyingkirkan ekstensi yang agresif.
4. Salin ulang file dari sumber asli; bandingkan ukurannya (± 90 KB).
5. Jika masih gagal, buka konsol dan catat pesan error pertama; biasanya menunjuk baris yang bermasalah setelah kustomisasi.

Checklist serah terima ke kelas

• Folder berisi index.html, panduan-guru.html, dan README.md.
• index.html terbuka di Chrome/Edge/Firefox tanpa error konsol.
• Palet menampilkan 8 kartu perangkat.
• Muat Lab Komputer Sekolah: 8 perangkat, 7 tautan, validasi 7/7 dan IP 2/2.
• Simulasi PC-01 → Internet berhasil, 4 perangkat, ringkasan “Melewati 4 perangkat.”
• Muat Jaringan Rumah Sederhana: 5 perangkat, 4 tautan, validasi 7/7 dan IP 2/2.
• Reset menghasilkan kanvas kosong, 0 perangkat, 0 tautan, dan validasi 0/7.
• Tautan duplikat ditolak dengan toast “Kedua perangkat sudah terhubung.”
• Hapus perangkat juga menghapus tautannya.
• IP duplikat menghasilkan R09 gagal (opsional) tanpa menurunkan skor wajib.
• Lebar layar minimal 1024 px; proyektor menampilkan label dan IP dengan jelas.
• Guru sudah membaca bagian 8 dan 9.

Hasil uji implementasi v1.0

Batasan resmi

Jangan gunakan aplikasi untuk…

• Mengklaim bahwa IP telah valid secara protokol hanya karena R08/R09 lulus.
• Membuktikan konektivitas tanpa menjalankan simulasi.
• Mengajarkan DNS, DHCP, NAT, routing dinamis, atau subnetting sebagai fitur aplikasi.
• Menyimpan pekerjaan siswa sebagai satu-satunya bukti penilaian tanpa screenshot/catatan.
• Menguji performa jaringan nyata atau keamanan siber.

Arsitektur singkat

Kompatibilitas

Privasi & keamanan

• Tidak ada data keluar. Tidak ada fetch/XHR, analytics, atau telemetry.
• Tidak ada akun. Tidak ada login, email, atau identitas siswa.
• Tidak ada penyimpanan persisten. Semua data hilang saat tab ditutup.
• Tidak ada input berbahaya. Nama dan IP di-escape sebelum dirender ke SVG/HTML.
• Aman untuk lab sekolah yang membatasi internet; aplikasi berjalan offline penuh.

Aksesibilitas

• Toolbar memakai aria-label, aria-pressed, dan judul pintasan.
• Tab memakai role="tab", aria-selected, aria-controls.
• Panel hasil validasi dan simulasi memakai aria-live untuk pembaca layar.
• Kartu palet dapat difokuskan dengan Tab dan diaktifkan dengan Enter/Space.
• Navigasi keyboard untuk memindahkan perangkat tidak disediakan; gunakan mouse/trackpad.

Catatan pemeliharaan

• Sumber kebenaran perilaku adalah index.html versi ini. Dokumen spesifikasi menjelaskan maksud desain; jika berbeda, ikuti implementasi dan catat penyimpangan (misalnya AP pada Skenario 2).
• Jika mengubah aturan wajib, perbarui angka 7/7 di panduan, rubrik, checklist, dan komunikasi ke siswa.
• Jika mengubah skenario, perbarui tabel perangkat/tautan dan hasil yang diharapkan di bagian 7.
• Jika mengubah teks narasi, perbarui tabel pola narasi di bagian 9.
• Jika mengubah timing, perbarui perkiraan durasi di bagian 9.
• Uji ulang setelah perubahan: kedua skenario, validasi, simulasi sukses, simulasi tanpa jalur, reset, duplikat tautan, dan IP duplikat.

Kartu cepat guru