21
BAB III
PEMBAHASAN
3.1. Analisis Kebutuhan Sistem
Menentukan analisis kebutuhan sistem bertujuan untuk mempermudah
proses menganalisa sistem yang akan digunakan untuk pembuatan animasi
interaktif ini secara keseluruhan. Kebutuhan sistem terdiri dari dua macam
kebutuhan, yaitu kebutuhan fungsional dan kebutuhan non-fungsional.
3.1.1. Kebutuhan Fungsional
Kebutuhan fungsional adalah kebutuhan yang berisi animasi dan menu
interaktif yang nantinya akan ditampilkan oleh animasi interaktif ini. Dalam
kebutuhan fungsional juga terdapat informasi yang ada dalam animasi interaktif ini.
Kebutuhan fungsional dalam animasi interaktif yang akan dibuat, antara lain:
1. Pada tampilan awal atau beranda terdapat tiga tombol utama yaitu tombol
untuk pilihan menuju ke penjelasan klasifikasi jangkauan, topologi jaringan
komputer dan tombol untuk simulasi pembuatan kabel LAN, serta beberapa
tombol tambahan seperti tombol pustaka untuk melihat sumber buku untuk
materi animasi, tombol untuk menuju halaman profil pembuat, dan tombol
keluar untuk menutup aplikasi.
2. Tombol klasifikasi jangkauan, berfungsi untuk menampilkan halaman pilihan
penjelasan berbagai macam klasfikasi jangakauan jaringan komputer,
diantaranya adalah PAN, LAN, MAN, dan WAN. Tiap macam klasifikasi
jangkauan memiliki halaman penjelasan tersendiri.
3. Tombol Topologi Jaringan Komputer, berfungsi untuk menuju halaman
22
penjelasan macam-macam topologi jaringan komputer, antara lain penjelasan
tentang Topologi Bus, Topolgi Star, Topolgi Ring, Topolgi Mesh, Topologi
Extended Star, dan Topologi Hierarchy. Tiap macam topologi jaringan
komputer memiliki halaman penjelasan masing-masing.
4. Pada halaman penjelasan klasifikasi, topologi, dan simulasi terdapat tombol
menu yang seperti jeda, jalankan, beranda, kembali, pengaturan suara, berhenti
dan ulangi. Fungsi beberapa tombol tersebut, antara lain:
a. Jeda, berfungsi untuk memberi jeda pada tampilan penjelasan.
b. Jalankan, digunakan untuk menjalankan kembali animasi yang sebelumnya
beri jeda.
c. Beranda, berguna untuk kembali ke tampilan awal.
d. Kembali, tombol yang berfungsi untuk kembali ke tampilan pilihan.
e. Pengaturan musik, berfungsi untuk mematikan musik latar.
f. Berhenti, untuk menghentikan tampilan penjelasan.
g. Ulangi, berfungsi untuk mengulang tampilan penjelasan dan mengulang
langkah simulasi.
3.1.2. Kebutuhan Non-Fungsional
Analisa kebutuhan non-fungsional merupakan analisa yang dilakukan untuk
menentukan perangkat yang dibutuhkan dalam pembuatan dan pengujian sistem.
Pembuatan animasi interaktif ini membutuhkan beberapa perangkat, baik itu
perangkat lunak maupun perangkat keras, diantaranya adalah:
1. Perangkat Lunak (Software)
Perangkat lunak yang digunakan dalam pembuatan animasi interaktif ini adalah
sebagai berikut:
23
a. Microsoft Windows 8.1 (64-bit)
b. Corel Draw X7
c. Adobe After Effects CC 2014
d. Adobe Flash Professional CS6
2. Perangkat Keras (Hardware)
a. Komputer
Spesifikasi perangkat keras komputer yang digunakan untuk membuat dan
menguji animasi interaktif pengenalan klasifikasi jangkauan dan topologi
jaringan komputer ini, antara lain:
1) Processor : AMD E1-6010 APU @1.3GHz (2 CPUs)
2) Memory : 2 GB
3) Harddisk : 320 GB
4) VGA : AMD Radeon R2 Graphics
3.2. Perancangan Perangkat Lunak
Perancangan perangkat lunak diperlukan untuk memberikan gambaran
kasar animasi interaktif yang nantinya akan dibuat. Perancangan perangkat lunak
terdiri dari dua tahapan yaitu, rancangan storyboard dan rancangan antarmuka.
3.2.1. Rancangan Storyboard
Storyboard mempunyai peran penting dalam pembuatan aplikasi
multimedia, yaitu sebagai alat bantu pada tahap perancangan. Storyboard
dipaparkan dalam bentuk ilustrasi yang ditampilkan secara terurut untuk
kebutuhan visual, animasi, dan komponen interaktif. Berikut ini adalah rancangan
storyboard animasi interaktif ini:
24
Tabel III.1
Storyboard
VISUAL SKETSA AUDIO
Halaman awal,
berisi tiga
pilihan untuk
menuju ke
halaman
penjelasan
klasifikasi
jangkauan,
topologi
jaringan
komputer, dan
simulasi
membuat kabel
jaringan LAN.
Serta terdapat
tombol profil,
pustaka, dan
keluar.
click_016
.wav
Halaman Intro
klasifikasi
jangkauan
berisi
penjelasan
serta animasi
mengenai
pengelompoka
n jaringan
komputer
menurut luas
jangkauannya
dan tombol
beranda,
musik, ulangi.
click_016
.wav
musik_1.
wav
Sumber: Rancangan Penelitian (2017)
25
Tabel III.1
Storyboard (Lanjutan 1)
Sumber: Rancangan Penelitian (2017)
VISUAL SKETSA AUDIO
Halaman
klasifikasi
jangkauan
berisi tombol
untuk menuju
penjelasan tiap
klasifikasi.
Terdapat
tombol
beranda dan
kembali.
click_016
.wav
Halaman
Personal Area
Network berisi
penjelasan
serta animasi
mengenai
Personal Area
Network dan
tombol
jalankan, jeda,
beranda,
pengaturan
musik, kembali
ulangi, serta
berikut.
click_016
.wav
musik_2.
wav
26
Tabel III.1
Storyboard (Lanjutan 2)
VISUAL SKETSA AUDIO
Halaman Local
Area Network
berisi
penjelasan
serta animasi
mengenai
Local Area
Network dan
tombol
jalankan, jeda,
beranda,
pengaturan
musik,
kembali,
ulangi,
sebelum dan
berikut.
click_016
.wav
musik_3.
wav
Halaman
Metropolitan
Area Network
berisi
penjelasan
serta animasi
mengenai
Metropolitan
Area Network
dan tombol
jalankan, jeda,
beranda,
pengaturan
musik,
kembali,
ulangi,
sebelum serta
berikut.
click_016
.wav
musik_4.
wav
Sumber: Rancangan Penelitian (2017)
27
Tabel III.1
Storyboard (Lanjutan 3)
VISUAL SKETSA AUDIO
Halaman Wide
Area Network
berisi
penjelasan
serta animasi
mengenai
Wide Area
Network dan
tombol
jalankan, jeda,
beranda,
pengaturan
musik,
kembali,
ulangi, dan
sebelum.
click_016
.wav
musik_5.
wav
Halaman Intro
Topologi berisi
penjelasan
tentang
topologi.
Terdapat
tombol
beranda,
pengaturan
musik, dan
ulangi.
click_016
.wav
musik_6.
wav
Sumber: Rancangan Penelitian (2017)
28
Tabel III.1
Storyboard (Lanjutan 4)
VISUAL SKETSA AUDIO
Halaman
topologi
jaringan
komputer
berisi tombol
pilihan untuk
menuju ke
halaman
penjelasan
masing-masing
topologi.
Terdapat
tombol
beranda, dan
kembali.
click_016
.wav
Halaman
Topologi Bus
berisi
penjelasan
serta animasi
mengenai
Topologi Bus.
Terdapat
tombol
jalankan, jeda,
beranda,
pengaturan
musik, kembali
ulangi dan
berikut.
click_016
.wav
musik_7.
wav
Sumber: Rancangan Penelitian (2017)
29
Tabel III.1
Storyboard (Lanjutan 5)
VISUAL SKETSA AUDIO
Halaman
Topologi Ring
berisi
penjelasan
serta animasi
mengenai
Topologi Ring.
Terdapat
tombol
jalankan, jeda,
beranda,
pengaturan
musik, kembali
ulangi,
sebelum dan
berikut.
click_016
.wav
musik_8.
wav
Halaman
Topologi Star
berisi
penjelasan
serta animasi
mengenai
Topologi Star.
Terdapat
tombol
jalankan, jeda,
beranda,
pengaturan
musik,
kembali,
ulangi,
sebelum dan
berikut.
click_016
.wav
musik_9.
wav
Sumber: Rancangan Penelitian (2017)
30
Tabel III.1
Storyboard (Lanjutan 6)
VISUAL SKETSA AUDIO
Halaman
Topologi
Hierarchy
berisi
penjelasan
mengenai
Topologi
Hierarchy.
Terdapat
tombol
jalankan, jeda,
beranda,
pengaturan
musik,
kembali,
ulangi,
sebelum dan
berikut.
click_016
.wav
musik_10
.wav
Halaman
Topologi Mesh
berisi
penjelasan
serta animasi
mengenai
Topologi
Mesh.Terdapat
tombol
jalankan, jeda,
beranda,
pengaturan
musik,
kembali,
ulangi,
sebelum dan
berikut.
click_016
.wav
musik_11
.wav
Sumber: Rancangan Penelitian (2017)
31
Tabel III.1
Storyboard (Lanjutan 7)
VISUAL SKETSA AUDIO
Halaman
Topologi
Extended Star
berisi
penjelasan
serta animasi
mengenai
topologi
Extended Star.
Terdapat
tombol
jalankan, jeda,
beranda,
pengaturan
musik,
kembali,
ulangi, dan
sebelum.
click_016
.wav
musik_12
.wav
Halaman awal
simulasi
membuat kabel
LAN berisi
tombol untuk
ke halaman
tiap halaman
simualasi,
terdapat
tombol
pengenalan
perangkat dan
material untuk
membuat kabel
LAN serta
tombol
beranda.
click_016
.wav
click_029
.wav
Sumber: Rancangan Penelitian (2017)
32
Tabel III.1
Storyboard (Lanjutan 8)
VISUAL SKETSA AUDIO
Halaman
pengenalan
peralatan dan
material untuk
membuat kabel
LAN berisi
fungsi dari
perangkat dan
material yang
akan
digunakan.
Terdapat
tombol
beranda,
kembali, dan
pengaturan
musik.
click_016
.wav
musik_13
.wav
Halaman
langkah
pertama
simulasi berisi
animasi
interaktif
untuk
memotong
kabel UTP.
Terdapat
tombol
beranda,
kembali,
ulangi,
berikutnya
dan.
click_016
.wav
Sumber: Rancangan Penelitian (2017)
33
Tabel III.1
Storyboard (Lanjutan 9)
Sumber: Rancangan Penelitian (2017)
VISUAL SKETSA AUDIO
Halaman
lanjutan
langkah
pertama
terdapat
animasi
interaktif
untuk
melepaskan
kulit kabel
UTP Terdapat
tombol
beranda,
kembali,
berikutnya,
sebelumnya
dan ulangi.
click_016
.wav
Halaman
langkah kedua
simulasi berisi
animasi
interaktif
menyusun
urutan warna
kabel UTP
sesuai susunan
untuk jenis
kabel Straight.
Terdapat
tombol
beranda,
kembali,
berikutnya,
sebelumnya
dan ulangi.
click_016
.wav
34
Tabel III.1
Storyboard (Lanjutan 10)
Sumber: Rancangan Penelitian (2017)
VISUAL SKETSA AUDIO
Halaman
langkah ketiga
simulasi berisi
animasi untuk
merapikan
kabel dengan
menggunakan
crimpping tool.
Terdapat
tombol
beranda,
kembali,
berikutnya,
selanjutnya
dan ulangi.
click_016
.wav
Halaman
langkah
keempat
simulasi
membuat kabel
LAN berisi
animasi
interaktif
memasang
kabel pada
headconnector
RG45.
Terdapat
tombol
beranda,
kembali,
berikutnya,
sebelumnya
dan ulangi.
click_016
.wav
35
Tabel III.1
Storyboard (Lanjutan 11)
VISUAL SKETSA AUDIO
Halaman
langkah kelima
simulasi
membuat kabel
LAN berisi
animasi untuk
mengunci
headconnector
RG45 dengan
menggunakan
crimpping tool.
Terdapat
tombol
beranda,
kembali,
berikutnya,
dan ulangi.
click_016
.wav
Halaman
langkah
keenam
simulasi berisi
animasi
interktif
menguji
konektifitas
kabel
menggunakan
LAN Tester.
Terdapat
tombol
beranda,
kembali,
berikutnya,
dan ulangi.
click_016
.wav
Sumber: Rancangan Penelitian (2017)
36
3.2.2. Rancangan Antar Muka
Rancangan antarmuka merupakan rancangan awal aplikasi yang akan
dibuat, rancangan antarmuka animasi interaktif sebagai media belajar pengenalan
klasifikasi jangkauan dan topologi jaringan komputer adalah sebagai berikut:
1. Rancangan Antarmuka Halaman Awal Aplikasi
Rancangan antarmuka halaman awal aplikasi, berisi tiga pilihan untuk menuju
ke halaman penjelasan klasifikasi jangkauan, topologi jaringan komputer, dan
simulasi membuat kabel jaringan LAN. Serta terdapat tombol pustaka, keluar,
dan profil pembuat.
Sumber: Rancangan Penelitian (2017)
Gambar III.1
Rancangan Antarmuka Halaman Awal Aplikasi
2. Rancangan Antarmuka Intro Klasifikasi Jangkauan
Rancangan antarmuka halaman Intro klasifikasi jangkauan berisi penjelasan
serta animasi mengenai pengelompokan jaringan komputer menurut luas
jangkauannya dan tombol beranda, jeda, jalankan, berhenti, ulangi serta tombol
menuju halaman pilihan klasifikasi.
37
Sumber: Rancangan Penelitian (2017)
Gambar III.2
Rancangan Antarmuka Intro Klasifikasi Jangkauan
3. Rancangan Antarmuka Pilihan Klasifikasi Jangkauan
Rancangan antarmuka halaman pilihan klasifikasi jangkauan berisi tombol untuk
menuju penjelasan tiap klasifikasi. Terdapat tombol beranda untuk kembali.
Sumber: Rancangan Penelitian (2017)
Gambar III.3
Rancangan Antarmuka Halaman Pilihan Klasifikasi Jangkauan
38
4. Rancangan Antarmuka Halaman Personal Area Network
Rancangan antarmuka halaman Personal Area Network berisi penjelasan serta
animasi mengenai Personal Area Network dan tombol beranda, jeda, jalankan,
kembali, pengaturan musik, serta tombol ulangi, berikut pada akhir tampilan.
Sumber: Rancangan Penelitian (2017)
Gambar III.4
Rancangan Antarmuka Halaman Personal Area Network
5. Rancangan Antarmuka Halaman Local Area Network
Rancangan antarmuka halaman Local Area Network berisi penjelasan serta
animasi mengenai Local Area Network dan tombol beranda, jeda, jalankan,
kembali, pengaturan musik, serta ulangi, berikut, sebelum pada akhir tampilan.
Sumber: Rancangan Penelitian (2017)
Gambar III.5
Rancangan Antarmuka Halaman Local Area Network
39
6. Rancangan Antarmuka Halaman Metropolitan Area Network
Rancangan antarmuka halaman Metropolitan Area Network berisi penjelasan
serta animasi mengenai Metropolitan Area Network dan tombol beranda, jeda,
jalankan, kembali, pengaturan musik, serta ulangi, sebelum, dan berikut.
Sumber: Rancangan Penelitian (2017)
Gambar III.6
Rancangan Antarmuka Halaman Metropolitanl Area Network
7. Rancangan Antarmuka Halaman Wide Area Network
Rancangan antarmuka halaman Wide Area Network berisi penjelasan serta
animasi mengenai Wide Area Network dan tombol beranda, jeda, jalankan,
kembali, pengaturan musik, ulangi, berikut, serta sebelum.
Sumber: Rancangan Penelitian (2017)
Gambar III.7
Rancangan Antarmuka Halaman Wide Area Network
40
8. Rancangan Antarmuka Intro Topologi
Rancangan antarmuka halaman Intro Topologi berisi penjelasan tentang
topologi. Terdapat menu berupa tombol beranda, jeda, jalankan, pengaturan
musik, ulangi, dan tombol menuju ke pilihan topologi.
Sumber: Rancangan Penelitian (2017)
Gambar III.8
Rancangan Antarmuka Halaman Intro Topologi
9. Rancangan Antarmuka Halaman Pilihan Topologi
Rancangan antarmuka halaman Pilihan Topologi Jaringan Komputer berisi
tombol pilihan untuk menuju ke halaman penjelasan masing-masing topologi.
Terdapat tombol beranda dan kembali.
Sumber: Rancangan Penelitian (2017)
Gambar III.9
Rancangan Antarmuka Halaman Pilihan Topologi
41
10. Rancangan Antarmuka Halaman Topologi Bus
Rancangan antarmuka halaman Topologi Bus berisi penjelasan serta animasi
mengenai Topologi Bus. Terdapat tombol beranda, jeda, jalankan, kembali,
pengaturan musik, ulangi dan berikut.
Sumber: Rancangan Penelitian (2017)
Gambar III.10
Rancangan Antarmuka Halaman Topologi Bus
11. Rancangan Antarmuka Halaman Topologi Ring
Rancangan antarmuka halaman Topologi Ring berisi penjelasan serta animasi
mengenai Topologi Ring. Terdapat tombol beranda, jeda, jalankan, kembali,
pengaturan musik, ulangi, sebelum, dan berikut.
Sumber: Rancangan Penelitian (2017)
Gambar III.11
Rancangan Antarmuka Halaman Topologi Ring
42
12. Rancangan Antarmuka Halaman Topologi Star
Rancangan antarmuka halaman Topologi Star berisi penjelasan serta animasi
mengenai Topologi Star. Terdapat tombol beranda, jeda, jalankan, kembali,
pengaturan musik, ulangi, sebelum dan berikut.
Sumber: Rancangan Penelitian (2017)
Gambar III.12
Rancangan Antarmuka Halaman Topologi Star
13. Rancangan Antarmuka Halaman Topologi Hierarchy
Rancangan antarmuka halaman Topologi Hierarchy berisi penjelasan serta
animasi mengenai Topologi Hierarchy. Terdapat tombol beranda, jeda, jalankan,
kembali, pengaturan musik, ulangi, sebelum dan berikut.
Sumber: Rancangan Penelitian (2017)
Gambar III.13
Rancangan Antarmuka Halaman Topologi Hierarchy
43
14. Rancangan Antarmuka Halaman Topologi Mesh
Rancangan antarmuka halaman Topologi Mesh berisi penjelasan serta animasi
mengenai Topologi Mesh. Terdapat tombol beranda, jeda, jalankan, kembali,
pengaturan musik, ulangi, sebelum dan berikut.
Sumber: Rancangan Penelitian (2017)
Gambar III.13
Rancangan Antarmuka Halaman Topologi Mesh
15. Rancangan Antarmuka Halaman Topologi Extended Star
Rancangan antarmuka halaman Topologi Extended Star berisi penjelasan serta
animasi mengenai topologi Extended Star. Terdapat tombol beranda, jeda,
jalankan, kembali, pengaturan musik, ulangi, dan sebelum.
Sumber: Rancangan Penelitian (2017)
Gambar III.14
Rancangan Antarmuka Halaman Topologi Extended Star
44
16. Rancangan Antarmuka Urutan Simulasi Membuat Kabel LAN
Rancangan antarmuka urutan simulasi membuat kabel LAN berisi tombol untuk
ke halaman tiap-tiap halaman simualasi, terdapat tombol pengenalan perangkat
dan material untuk membuat kabel LAN serta tombol beranda.
Sumber: Rancangan Penelitian (2017)
Gambar III.16
Rancangan Antarmuka Urutan Simulasi Membuat Kabel LAN
17. Rancangan Antarmuka Pengenalan Perangkat dan Material
Rancangan antarmuka halaman pengenalan peralatan dan material untuk
membuat kabel LAN berisi penjelasan fungsi dari perangkat dan material yang
akan digunakan. Terdapat menu berupa tombol beranda, jeda, jalankan, kembali,
pengaturan musik, serta ulangi pada akhir tampilan.
Sumber: Rancangan Penelitian (2017)
Gambar III.16
Rancangan Antarmuka Pengenalan Perangkat dan Material
45
18. Rancangan Antarmuka Langkah Pertama Simulasi
Rancangan antarmuka halaman langkah pertama simulasi membuat kabel LAN
berisi animasi interaktif untuk memotong kabel UTP dengan memutar UTP
Stripper. Terdapat tombol beranda, kembali, ulangi dan langkah berikutnya.
Sumber: Rancangan Penelitian (2017)
Gambar III.18
Rancangan Antarmuka Langkah Pertama Simulasi
19. Rancangan Antarmuka Lanjutan Langkah Pertama Simulasi
Rancangan antarmuka halaman lanjutan langkah pertama terdapat animasi
interaktif untuk melepaskan kulit kabel UTP yang sudah dipotong. Terdapat
tombol beranda, kembali, langkah selanjutnya, langkah sebelumnya dan ulangi.
Sumber: Rancangan Penelitian (2017)
Gambar III.19
Rancangan Antarmuka Lanjutan Langkah Pertama Simulasi
46
20. Rancangan Antarmuka Langkah Kedua Simulasi
Rancangan antarmuka halaman langkah kedua simulasi membuat kabel LAN
berisi animasi interaktif untuk menyusun urutan warna kabel UTP sesuai
susunan untuk tipe kabel Straight. Terdapat tombol beranda, kembali, langkah
selanjutnya, langkah sebelumnya dan ulangi..
Sumber: Rancangan Penelitian (2017)
Gambar III.20
Rancangan Antarmuka Langkah Kedua Simulasi
21. Rancangan Antarmuka Langkah Ketiga Simulasi
Rancangan antarmuka halaman langkah ketiga simulasi membuat kabel LAN
berisi animasi untuk merapikan kabel yang telah disusun dengan menggunakan
crimpping tool. Terdapat tombol beranda, kembali, langkah selanjutnya, langkah
sebelumnya dan ulangi.
Sumber: Rancangan Penelitian (2017)
Gambar III.21
Rancangan Antarmuka Langkah Ketiga Simulasi
47
22. Rancangan Antarmuka Langkah Keempat Simulasi
Rancangan antarmuka halaman langkah keempat simulasi membuat kabel LAN
berisi animasi interaktif untuk memasang pada headconnector RG45. Terdapat
tombol beranda, kembali, langkah selanjutnya, langkah sebelumnya dan ulangi..
Sumber: Rancangan Penelitian (2017)
Gambar III.22
Rancangan Antarmuka Langkah Keempat Simulasi
23. Rancangan Antarmuka Langkah Kelima Simulasi
Rancangan antarmuka halaman langkah kelima simulasi membuat kabel LAN
berisi animasi inteaktif untuk mengunci headconnector RG45. Terdapat tombol
langkah beranda, kembali, sebelumnya, langkah berikutnya, dan ulangi.
Sumber: Rancangan Penelitian (2017)
Gambar III.23
Rancangan Antarmuka Langkah Kelima Simulasi
48
24. Rancangan Antarmuka Langkah Keenam Simulasi
Rancangan antarmuka halaman langkah keenam simulasi membuat kabel LAN
berisi animasi interktif untuk menguji konektifitas kabel yang sudah dibuat
menggunakan LAN Tester. Terdapat tombol, beranda, kembali, langkah
sebelumnya dan ulangi.
Sumber: Rancangan Penelitian (2017)
Gambar III.24
Rancangan Antarmuka Langkah Keenam Simulasi
3.3. Implemetasi dan Pengujian Unit
Implementasi dan pengujian dilakukan setelah rancangan storyboard dan
rancangan antarmuka sudah sepenuhnya selesai.
3.3.1 Implementasi
Implementasi dari “Animasi Interaktif Sebagai Media Belajar Pengenalan
Klasifikasi Jangkauan dan Topologi Jaringan Komputer” ini merupakan hasil dari
storyboard dan rancangan antarmuka yang telah penulis tuangkan dalam
pembahasan sebelumnya. Implementasi dituangkan dalam bentuk screenshoot
aplikasi yang telah siap digunakan, adapun hasil implementasi tersebut, antara lain:
49
1. Implementasi Halaman Awal
Implementasi halaman awal, berisi tiga pilihan untuk menuju ke halaman
penjelasan klasifikasi jangkauan, topologi jaringan komputer, dan simulasi
membuat kabel jaringan LAN. Serta terdapat tombol menuju daftar pustaka,
keluar, dan profil pembuat.
Sumber: Hasil Penelitian (2017)
Gambar III.25
Implementasi Halaman Awal
2. Implementasi Halaman Intro Klasifikasi Jangkauan
Implementasi halaman Intro klasifikasi jangkauan berisi penjelasan serta
animasi mengenai pengelompokan jaringan komputer menurut luas
jangkauannya serta terdapat tombol beranda, ulangi dan tombol menuju ke
halaman pilihan klasifikasi pada akhir tampilan.
50
Sumber: Hasil Penelitian (2017)
Gambar III.26
Implementasi Halaman Intro Klasifikasi Jangkauan
3. Implementasi Halaman Pilihan Klasifikasi Jangkauan
Implementasi halaman pilihan klasifikasi jangkauan berisi tombol untuk menuju
penjelasan tiap klasifikasi. Terdapat tombol beranda dan kembali.
Sumber: Hasil Penelitian (2017)
Gambar III.27
Implementasi Halaman Pilihan Klasifikasi Jangkauan
51
4. Implementasi Halaman Personal Area Network
Implementasi halaman Personal Area Network berisi penjelasan serta animasi
mengenai Personal Area Network dan teradapat tombol beranda, jeda,
jalankan, kembali, pengaturan musik, ulangi, serta berikut.
Sumber: Hasil Penelitian (2017)
Gambar III.28
Implementasi Halaman Personal Area Network
5. Implementasi Halaman Local Area Network
Implementasi halaman Local Area Network berisi penjelasan serta animasi
mengenai Local Area Network dan terdapat tombol beranda, jeda, jalankan,
kembali, pengaturan musik, ulangi, berikut serta sebelum.
52
Sumber: Hasil Penelitian (2017)
Gambar III.29
Implementasi Halaman Local Area Network
6. Implementasi Halaman Metropolitan Area Network
Implementasi halaman Metropolitan Area Network berisi penjelasan serta
animasi mengenai Metropolitan Area Network dan tombol beranda, jeda,
jalankan, kembali, pengaturan musik, ulangi, sebelum serta berikut.
Sumber: Hasil Penelitian (2017)
Gambar III.30
Implementasi Halaman Metropolitan Area Network
53
7. Implementasi Halaman Wide Area Network
Implementasi halaman Wide Area Network berisi penjelasan serta animasi
mengenai Wide Area Network dan tombol beranda, jeda, jalankan, kembali,
pengaturan musik, ulangi, sebelum serta berikut.
Sumber: Hasil Penelitian (2017)
Gambar III.31
Implementasi Halaman Wide Area Network
8. Implementasi Halaman Intro Topologi
Implementasi halaman Intro Topologi berisi penjelasan tentang topologi.
Terdapat menu berupa tombol beranda, jeda, jalankan, pengaturan musik,
ulangi, dan tombol untuk menuju ke halaman pilihan topologi.
54
Sumber: Hasil Penelitian (2017)
Gambar III.32
Implementasi Halaman Intro Topologi
9. Implementasi Halaman Pilihan Topologi
Implementasi halaman pilihan topologi jaringan komputer berisi tombol
pilihan untuk menuju ke halaman penjelasan masing-masing topologi.
Terdapat tombol beranda dan kembali.
Sumber: Hasil Penelitian (2017)
Gambar III.33
Implementasi Halaman Pilihan Topologi
55
10. Implementasi Halaman Topologi Bus
Implementasi halaman Topologi Bus berisi penjelasan serta animasi mengenai
Topologi Bus. Terdapat tombol beranda, jeda, jalankan, kembali, pengaturan
musik, ulangi, serta berikut.
Sumber: Hasil Penelitian (2017)
Gambar III.34
Implementasi Halaman Topologi Bus
11. Implementasi Topologi Ring
Implementasi halaman Topologi Ring berisi penjelasan serta animasi mengenai
Topologi Ring. Terdapat tombol beranda, jeda, jalankan, kembali, pengaturan
musik, ulangi, berikut dan sebelum.
56
Sumber: Hasil Penelitian (2017)
Gambar III.35
Implementasi Halaman Topologi Ring
12. Implementasi Topologi Star
Implementasi halaman Topologi Star berisi penjelasan serta animasi mengenai
Topologi Star. Terdapat tombol beranda, jeda, jalankan, kembali, pengaturan
musik, serta ulangi, berikut dan sebelum.
Sumber: Hasil Penelitian (2017)
Gambar III.36
Implementasi Halaman Topologi Star
57
13. Implementasi Topologi Hierarchy
Implementasi halaman Topologi Hierarchy berisi penjelasan serta animasi
mengenai Topologi Hierarchy. Terdapat tombol beranda, jeda, jalankan,
kembali, pengaturan musik, ulangi , berikut dan sebelum.
Sumber: Hasil Penelitian (2017)
Gambar III.37
Implementasi Halaman Topologi Hierarchy
14. Implementasi Topologi Mesh
Implementasi halaman Topologi Mesh berisi penjelasan serta animasi mengenai
Topologi Mesh. Terdapat menu berupa tombol beranda, jeda, jalankan, kembali,
pengaturan musik, ulangi, berikut dan sebelum.
58
Sumber: Hasil Penelitian (2017)
Gambar III.38
Implementasi Halaman Topologi Mesh
15. Implementasi Topologi Extended Star
Implementasi halaman Topologi Extended Star berisi penjelasan serta animasi
mengenai topologi Extended Star. Terdapat tombol beranda, jeda, jalankan,
kembali, pengaturan musik, serta ulangi, dan sebelum.
Sumber: Hasil Penelitian (2017)
Gambar III.39
Implementasi Halaman Topologi Extended Star
59
16. Implementasi Urutan Simulasi Membuat Kabel LAN
Implementasi urutan simulasi membuat kabel LAN berisi tombol untuk ke
halaman tiap-tiap halaman simualasi, terdapat tombol pengenalan perangkat dan
material untuk membuat kabel LAN serta tombol beranda.
Sumber: Hasil Penelitian (2017)
Gambar III.40
Implementasi Simulasi Urutan Membuat Kabel LAN
17. Implementasi Pengenalan Perangkat dan Material
Implementasi halaman pengenalan peralatan dan material untuk membuat kabel
LAN berisi penjelasan fungsi dari perangkat dan material yang akan digunakan.
Terdapat menu berupa tombol beranda, jeda, jalankan, kembali, pengaturan
musik, serta ulangi pada akhir tampilan.
60
Sumber: Hasil Penelitian (2017)
Gambar III.41
Implementasi Pengenalan Perangkat dan Material
18. Implementasi Langkah Pertama Simulasi
Implementasi halaman langkah pertama simulasi membuat kabel LAN berisi
animasi interaktif untuk memotong kabel UTP dengan memutar UTP Stripper.
Terdapat menu berupa tombol beranda, kembali, ulangi dan langkah berikutnya.
Sumber: Hasil Penelitian (2017)
Gambar III.42
Implementasi Langkah Pertama Simulasi
61
19. Implementasi Lanjutan Langkah Pertama Simulasi
Implementasi halaman lanjutan langkah pertama terdapat animasi interaktif
untuk melepaskan kulit kabel UTP yang sudah dipotong. Terdapat menu berupa
tombol beranda, kembali, langkah selanjutnya, langkah sebelumnya dan ulangi.
Sumber: Hasil Penelitian (2017)
Gambar III.43
Implementasi Lanjutan Langkah Pertama Simulasi
20. Implementasi Langkah Kedua Simulasi
Implementasi halaman langkah kedua simulasi membuat kabel LAN berisi
animasi interaktif untuk menyusun urutan warna kabel UTP sesuai susunan
untuk tipe kabel Straight. Terdapat menu berupa tombol beranda, kembali,
langkah selanjutnya, langkah sebelumnya dan ulangi.
62
Sumber: Hasil Penelitian (2017)
Gambar III.44
Implementasi Langkah Kedua Simulasi
21. Implementasi Langkah Ketiga Simulasi
Implementasi halaman langkah ketiga simulasi membuat kabel LAN berisi
animasi untuk merapikan kabel yang telah disusun dengan menggunakan
crimpping tool. Terdapat menu berupa tombol beranda, kembali, langkah
selanjutnya, langkah sebelumnya dan ulangi.
Sumber: Hasil Penelitian (2017)
Gambar III.45
Implementasi Langkah Ketiga Simulasi
63
22. Implementasi Langkah Keempat Simulasi
Implementasi halaman langkah keempat simulasi membuat kabel LAN berisi
animasi interaktif untuk memasang kabel yang sudah dirapikan pada
headconnector RG45. Terdapat menu berupa tombol beranda, kembali, langkah
selanjutnya, langkah sebelumnya dan ulangi.
Sumber: Hasil Penelitian (2017)
Gambar III.46
Implementasi Langkah Keempat Simulasi
23. Implementasi Langkah Kelima Simulasi
Implementasi halaman langkah kelima simulasi membuat kabel LAN berisi
animasi inteaktif untuk mengunci headconnector RG45 yang telah dipasang
kabel UTP dengan menggunakan crimpping tool. Terdapat menu berupa tombol
beranda, kembali, sebelumnya, langkah berikutnya, dan ulangi.
64
Sumber: Hasil Penelitian (2017)
Gambar III.47
Implementasi Langkah Kelima Simulasi
24. Implementasi Langkah Keenam Simulasi
Implementasi halaman langkah keenam simulasi membuat kabel LAN berisi
animasi interktif untuk menguji konektifitas kabel yang sudah dibuat
menggunakan LAN Tester. Terdapat menu berupa tombol beranda, kembali,
langkah sebelumnya dan ulangi.
Sumber: Hasil Penelitian (2017)
Gambar III.48
Implementasi Langkah Keenam Simulasi
65
3.3.2 Pengujian Unit
1. Pengujian Blackbox
Pengujian terhadap program yang dibuat menggunakan blackbox testing yang
fokus terhadap proses masukan dan keluaran program.
Tabel III.2
Pengujian Halaman Awal
Input / Event Proses Output/
Next Stage
Hasil
Pengujian
Tombol
“Topologi
Jaringan
Komputer”
(gambar
komputer)
on (release) {
gotoAndPlay("intro
topologi",(1));
}
Halaman
intro
topologi
Sesuai
Tombol
“Simulasi
Membuat Kabel
LAN” (gambar
koper)
on (release) {
gotoAndPlay("pilihan
simulasi", (1));
}
Halaman
urutan
simulasi
Sesuai
Tombol
“Klasifikasi
Jangkauan
Jaringan
Komputer”
(gambar globe)
on (release) {
gotoAndPlay("intro
klasifikasi", (1));
}
Halaman
intro
klasifikasi
jangkauan
jaringan
komputer
Sesuai
Tombol “Keluar”
(gambar lambang
keluar)
on (release)
{fscommand("quit",true);}
Menutup
aplikasi
Sesuai
Tombol
“Pustaka”
on (release) {
gotoAndPlay("pustaka",
(1));}
Menuju
halaman
pustaka
Sesuai
Tombol “Profil” on (release) {
gotoAndPlay("profil",
(1));}
Menuju
halaman
profil
pembuat
Sesuai
Sumber: Hasil Penelitian (2017)
66
Tabel III.3
Pengujian Intro Klasifikasi Jangkauan
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",(1
));
}
Halaman awal Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {Play(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol “ Pilihan
Klasifikasi
Jangkauan”
on (release) {
gotoAndPlay("pilihan
klasifikasi", (1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Sumber: Hasil Penelitian (2017)
67
Tabel III.4
Pengujian Pilihan Klasifikasi Jangkauan
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol “PAN
Personal Area
Network”
on (release) {
gotoAndPlay("pan",
(1));}
Halaman
PAN/Personal
Area Network
Sesuai
Tombol “LAN
Local Area
Network”
on (release) {
gotoAndPlay("lan",
(1));}
Halaman
LAN/Local
Area Network
Sesuai
Tombol “MAN
Metropolitan
Area Network”
on (release) {
gotoAndPlay("man",
(1));}
Halaman
MAN/Metropo
litan Area
Network
Sesuai
Tombol “WAN
Wide Area
Network”
on (release) {
gotoAndPlay("wan",
(1));}
Halaman
WAN/Wide
Area Network
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("intro
klasifikasi", (1));
}
Halaman intro
klasifikasi
jangkauan
jaringan
Sesuai
Sumber: Hasil Penelitian (2017)
68
Tabel III.5
Pengujian Halaman Personal Area Network
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
klasifikasi", (1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol “berikut” on (release) {
gotoAndPlay("lan",
(1));
}
Halaman
LAN/Local
Area Network
Sesuai
Sumber: Hasil Penelitian (2017)
69
Tabel III.6
Pengujian Halaman Local Area Network
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
klasifikasi", *1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
Muik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“Sebelum”
on (release) {
gotoAndPlay("pan",
(1));}
Halaman
PAN/Personal
Area Network
Tombol “berikut” on (release) {
gotoAndPlay("man",
(1));}
Halaman
MAN/Metropo
litan Area
Network
Sesuai
Sumber: Hasil Penelitian (2017)
70
Tabel III.7
Pengujian Halaman Metropolitanl Area Network
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
klasifikasi",( 1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“Sebelum”
on (release) {
gotoAndPlay("lan",
(1));}
Halaman
LAN/Local
Area Network
Tombol “berikut” on (release) {
gotoAndPlay("wan",
(1));}
Halaman
WAN/Wide
Area Network
Sesuai
Sumber: Hasil Penelitian (2017)
71
Tabel III.8
Pengujian Halaman Wide Area Network
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
klasifikasi", (1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“Sebelum”
on (release) {
gotoAndPlay("man",
(1));}
Halaman
MAN/Metropo
litan Area
Network
Sumber: Hasil Penelitian (2017)
72
Tabel III.9
Pengujian Halaman Intro Topologi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol “Ke
Pilihan Topologi”
on (release) {
gotoAndPlay("pilihan
topologi",(1));
}
Halaman
Pilihan
topologi
jaringan
komputer
Sesuai
Sumber: Hasil Penelitian (2017)
73
Tabel III.10
Pengujian Pilihan Topologi Jaringan Komputer
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol “Topolgi
Bus” (gambar bis)
on (release) {
gotoAndPlay("topologi
bus", (1));}
Halaman
Topologi Bus
Sesuai
Tombol “Topolgi
Ring” (gambar
cincin)
on (release) {
gotoAndPlay("topologi
ring", (1));}
Halaman
Topologi Ring
Sesuai
Tombol “Topolgi
Star” (gambar
bintang)
on (release) {
gotoAndPlay(topologi
star", (1));}
Halaman
Topologi Star
Sesuai
Tombol “Topolgi
Hierarchy”
(gambar pohon)
on (release) {
gotoAndPlay("topologi
hierarchy",(1));}
Halaman
Topologi
Hierarchy
Sesuai
Tombol “Topolgi
Mesh” (gambar
pentagram)
on (release) {
gotoAndPlay("topologi
mesh", (1));}
Halaman
Topologi Mesh
Sesuai
Tombol “Topolgi
Extended Star”
(gambar lima
bintang)
on (release) {
gotoAndPlay("topologi
extended star",(1));}
Halaman
Topologi
Extended Star
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("intro
topologi", 1);}
Halaman intro
topologi
jaringan
komputer
Sesuai
Sumber: Hasil Penelitian (2017)
74
Tabel III.11
Pengujian Halaman Topologi Bus
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi", (1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Msuik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol “berikut” on (release) {
gotoAndPlay("topologi
ring", (1));
}
Halaman
topologi ring
Sesuai
Sumber: Hasil Penelitian (2017)
75
Tabel III.12
Pengujian Halaman Topologi Ring
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi",(1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“sebelum”
on (release) {
gotoAndPlay("topologi
bus",( 1));
}
Halaman
topologi bus
Tombol “berikut” on (release) {
gotoAndPlay("topologi
star", (1));
}
Halaman
topologi ring
Sesuai
Sumber: Hasil Penelitian (2017)
76
Tabel III.13
Pengujian Halaman Topologi Star
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi",(1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“sebelum”
on (release) {
gotoAndPlay("topologi
ring", (1));
}
Halaman
topologi ring
Sesuai
Tombol “berikut” on (release) {
gotoAndPlay("topologi
hierarchy ", (1));
}
Halaman
topologi
hierarchy
Sesuai
Sumber: Hasil Penelitian (2017)
77
Tabel III.14
Pengujian Halaman Topologi Hierarchy
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi", (1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“sebelum”
on (release) {
gotoAndPlay("topologi
star", (1));
}
Halaman
topologi star
Sesuai
Tombol “berikut” on (release) {
gotoAndPlay("topologi
mesh ", (1));
}
Halaman
topologi mesh
Sesuai
Sumber: Hasil Penelitian (2017)
78
Tabel III.15
Pengujian Halaman Topologi Mesh
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi", (1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“sebelum”
on (release) {
gotoAndPlay("topologi
hierarchy", (1));
}
Halaman
topologi
hierarchy
Sesuai
Tombol “berikut” on (release) {
gotoAndPlay("topologi
extended star ", (1));
}
Halaman
topologi
extended star
Sesuai
Sumber: Hasil Penelitian (2017)
79
Tabel III.16
Pengujian Halaman Topologi Extended Star
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi", (1));
}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol
“sebelum”
on (release) {
gotoAndPlay("topologi
mesh", (1));
}
Halaman
topologi mesh
Sesuai
Sumber: Hasil Penelitian (2017)
80
Tabel III.17
Pengujian Pilihan Simulasi Membuat Kabel LAN
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Pengenalan
alat& material”
(lingkaran biru)
on (release) {
gotoAndPlay("alat &
material simulasi", (1));}
Halaman
Pengenalan
alat dan
material
simulasi
Sesuai
Tombol “langkah
1” (lingkaran
merah)
on (release) {
gotoAndPlay("simulasi
1", (1));}
Halaman
langkah
pertama
simulasi
Sesuai
Tombol “langkah
2” (lingkaean
hijau)
on (release) {
gotoAndPlay(“simulasi
2", (1));}
Halaman
langkah kedua
simulasi
Sesuai
Tombol “langah
3” (lingkaran biru
gelap)
on (release) {
gotoAndPlay("simulasi
3", (1));}
Halaman
langkah ketiga
simulasi
Sesuai
Tombol “langkah
4” (lingkaran biru
muda)
on (release) {
gotoAndPlay("simulasi
4", (1));}
Halaman
langkah
keempat
simulasi
Sesuai
Tombol “langkah
5” (lingkaran
ungu)
on (release) {
gotoAndPlay("simulasi
5", (1));}
Halaman
langkah kelima
simulasi
Sesuai
Tombol “langkah
6” (lingkaran
coklat)
on (release) {
gotoAndPlay("simulasi
6", (1));
}
Halaman
langkah
keenam
simulasi
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));}
Halaman awal Sesuai
Sumber: Hasil Penelitian (2017)
81
Tabel III.18
Pengujian Halaman Pengenalan Alat dan Material Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
simulasi", (1));
}
Halaman
pilihan
simulasi
Sesuai
Tombol “Jeda” on (release) {stop();
}
Memberi jeda
pada tampilan
Sesuai
Tombol
“Jalankan”
on (release) {play();
}
Menjalankan
kembali
tampilan
Sesuai
Tombol “Musik” on (release) {
stopAllSounds();
}
Mematikan
musik
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
tampilan
Sesuai
Tombol “berikut” on (release) {
gotoAndPlay("simulasi
1 ", (1));
}
Halaman
pertama
simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
82
Tabel III.19
Pengujian Halaman Langkah Pertama Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
MovieClip “UTP
Stripper”
onClipEvent (EnterFrame){
disx=_root._xmouse-_x;
disy=_root._ymouse-_y;
Radians=Math.atan2(disy,disx)
;
Degrees=360*Radians/(2*Math
.PI);
_rotation=Degrees;}
Memutar UTP
Stripper
mengukuti
pointer.
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
1);
}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi", 1);}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
simulasi
langkah
pertama
Sesuai
Tombol “berikut” on (release) {
gotoAndPlay("simulasi
1", 1)
;}
Halaman
pertama
simulasi
Sesuai
Tombol
“Langkah
berikutnya”
on (release) {
gotoAndPlay("simulasi
1.5", 1);}
Halaman
lanjutan
langkah
pertama
Sesuai
Sumber: Hasil Penelitian (2017)
83
Tabel III.20
Pengujian Halaman Lanjutan Langkah Pertama Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
MovieClip
“Potongan
Kabel”
xobj2 = obj2._x;
yobj2 = obj2._y;
obj2.onPress = function(){
startDrag(this);
};
obj2.onRelease = function(){
stopDrag();
};
Mencabut
potongan kabel
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
1);}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
topologi", 1)
;}
Halaman
pilihan
klasifikasi
jangkauan
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
simulasi
lanjutan
langkah
pertama
Sesuai
Tombol “langkah
berikutnya”
on (release) {
gotoAndPlay("simulasi
2 ", 1);}
Halaman kedua
simulasi
Sesuai
Tombol “langkah
sebelumnya”
on (release) {
gotoAndPlay("simulasi
1 ", 1);}
Halaman
pertama
simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
84
Tabel III.21
Pengujian Halaman Langkah Kedua Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
MovieClip
“Kabel UTP”
xobj_pb = obj_pb ._x;
yobj_pb = obj_pb ._y;
xobj_b = obj_b ._x;
yobj_b = obj_b ._y;
xobj_ph = obj_ph ._x;
yobj_ph = obj_ph ._y;
xobj_hi = obj_hi._x;
yobj_hi = obj_hi._y;
xobj_po = obj_po._x;
yobj_po = obj_po._y;
xobj_o = obj_o._x;
yobj_o = obj_o._y;
xobj_pc = obj_pc._x;
yobj_pc = obj_pc._y;
xobj_c = obj_c._x;
yobj_c = obj_c._y;
xobj1 = obj1._x;
Menyusun
urutan warna
kabel UTP
sesuai dengan
urutan warna
untuk tipe
kabel Straight-
Trough.
Sesuai
Sumber: Hasil Penelitian (2017)
85
Tabel III.21 (Lanjutan)
Pengujian Halaman Langkah Kedua Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
xobj_pb = obj_pb ._x;
yobj_pb = obj_pb ._y;
xobj_b = obj_b ._x;
yobj_b = obj_b ._y;
xobj_ph = obj_ph ._x;
yobj_ph = obj_ph ._y;
xobj_hi = obj_hi._x;
yobj_hi = obj_hi._y;
xobj_po = obj_po._x;
yobj_po = obj_po._y;
xobj_o = obj_o._x;
yobj_o = obj_o._y;
xobj_pc = obj_pc._x;
yobj_pc = obj_pc._y;
xobj_c = obj_c._x;
yobj_c = obj_c._y;
xobj1 = obj1._x;
Sumber: Hasil Penelitian (2017)
86
Tabel III.21 (Lanjutan 2)
Pengujian Halaman Langkah Kedua Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
yobj1 = obj1._y;
obj_pb.onPress = function(){
startDrag(this);
};
obj_pb.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_pb"){
obj_pb._x = latar_pb._x;
obj_pb._y = latar_pb._y;
}
else{
obj_pb._x = xobj_pb;
obj_pb._y = yobj_pb;
}
};
obj_b.onPress = function(){
startDrag(this);
};
obj_b.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_b"){
obj_b._x = latar_b._x;
obj_b._y = latar_b._y;
}else{
Sumber: Hasil Penelitian (2017)
87
Tabel III.21 (Lanjutan 3)
Pengujian Halaman Langkah Kedua Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
obj_b._x = xobj_b;
obj_b._y = yobj_b;
}
};
obj_ph.onPress = function(){
startDrag(this);
};
obj_ph.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_ph"){
obj_ph._x = latar_ph._x;
obj_ph._y = latar_ph._y;
}
else {
obj_ph._x = xobj_ph;
obj_ph._y = yobj_ph;
}};
obj_hi.onPress = function(){
startDrag(this);
};
obj_hi.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_hi"){
obj_hi._x = latar_hi._x;
Sumber: Hasil Penelitian (2017)
88
Tabel III.21 (Lanjutan 4)
Pengujian Halaman Langkah Kedua Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
obj_hi._y = latar_hi._y;
}
else
{
obj_hi._x = xobj_hi;
obj_hi._y = yobj_hi;
}
};
obj_po.onPress = function(){
startDrag(this);
};
obj_po.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_po"){
obj_po._x = latar_po._x;
obj_po._y = latar_po._y;
}
else{
obj_po._x = xobj_po;
obj_po._y = yobj_po;
}
};
obj_o.onPress = function(){
startDrag(this);
};
Sumber: Hasil Penelitian (2017)
89
Tabel III.20 (Lanjutan 5)
Pengujian Halaman Langkah Kedua Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
obj_o.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_o"){
obj_o._x = latar_o._x;
obj_o._y = latar_o._y;
}
else{
obj_o._x = xobj_o;
obj_o._y = yobj_o;
}
};
obj_pc.onPress = function(){
startDrag(this);
};
obj_pc.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_pc"){
obj_pc._x = latar_pc._x;
obj_pc._y = latar_pc._y;
} else{
obj_pc._x = xobj_pc;
obj_pc._y = yobj_pc;}};
obj_c.onPress = function(){
Sumber: Hasil Penelitian (2017)
90
Tabel III.20 (Lanjutan 6)
Pengujian Halaman Langkah Kedua Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
startDrag(this);};
obj_c.onRelease = function(){
stopDrag();
if (this._droptarget ==
"/latar_c"){
obj_c._x = latar_c._x;
obj_c._y = latar_c._y;} else {
obj_c._x = xobj_c;
obj_c._y = yobj_c;}};
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
simulasi", (1));}
Halaman
pilihan
simulasi
Sesuai
Tombol
“Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
simulasi
langkah kedua
Sesuai
Tombol
“langkah
berikutnya”
on (release) {
gotoAndPlay("simulasi
3 ",( )1);}
Halaman
ketiga
simulasi
Sesuai
Tombol
“langkah
sebelumnya”
on (release) {
gotoAndPlay("simulasi
2 ", 1);}
Halaman
kedua
simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
91
Tabel III.22
Pengujian Halaman Langkah Ketiga Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
MovieClip
“Crimpping tool”
on (release) {play();
}
Merapikan
kabel
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
1)
;}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
simulasi",(1))
;}
Halaman
pilihan
simulasi
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
simulasi
langkah ketiga
Sesuai
Tombol “langkah
berikutnya”
on (release) {
gotoAndPlay("simulasi
2 ",(1))
;}
Halaman kedua
simulasi
Sesuai
Tombol “langkah
sebelumnya”
on (release) {
gotoAndPlay("simulasi
1 ", (1))
;}
Halaman
pertama
simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
92
Tabel III.23
Pengujian Halaman Langkah Keempat Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
MovieClip
“Kabel UTP”
xobj_utp = obj_utp._x;
yobj_utp = obj_utp._y;
obj_utp.onPress = function(){
startDrag(this);
};
obj_utp.onRelease =
function(){
stopDrag();
if (this._droptarget ==
"/latar8"){
obj_utp._x = latar8._x;
obj1_utp._y = latar8._y;
}
else
{
obj_utp._x = xobj_utp;
obj_utp._y = yobj_utp;
}};
Memasang
kabel UTP
pada
headconnector
RG45
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
1)
;}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
simulasi", 1);}
Halaman
pilihan
simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
93
Tabel III.23 (Lanjutan)
Pengujian Halaman Langkah Keempat Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
simulasi
langkah
keempat
Sesuai
Tombol
“langkah
berikutnya”
on (release) {
gotoAndPlay("simulasi
5",(1))
;}
Halaman
kelima
simulasi
Sesuai
Tombol
“langkah
sebelumnya”
on (release) {
gotoAndPlay("simulasi
3 ", (1))
;}
Halaman
ketiga simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
Tabel III.24 (Lanjutan)
Pengujian Halaman Langkah Kelima Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
MovieClip
“Crimpping tool”
on (release) {play();
}
Mengunci
headconnector
RG45
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",(1));}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("piliha
n simulasi", (1));}
Halaman pilihan
simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
94
Tabel III.24 (Lanjutan)
Pengujian Halaman Langkah Kelima Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
Tombol
“langkah
berikutnya”
on (release) {
gotoAndPlay("simulasi
6", (1));}
Halaman
kenam
simulasi
Sesuai
Tombol
“langkah
sebelumnya”
on (release) {
gotoAndPlay("simulasi
4 ", (1));}
Halaman
keempat
simulasi
Sesuai
Tombol
“Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
simulasi
langkah lima
Sesuai
Sumber: Hasil Penelitian (2017)
Tabel III.25
Pengujian Halaman Langkah Keenam Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
MovieClip
“Kabel Straight”
xobj_utprg45 =
obj_utprg45._x;
yobj_utprg45 =
obj_utprg45._y;
xobj_utprg45b =
obj_utprg45b._x;
yobj_utprg45b =
obj_utprg45b._y;
obj_utprg45.onPress =
function(){
Memasang
kedua ujung
kabel pada
LAN Tester
Sesuai
Sumber: Hasil Penelitian (2017)
95
Tabel III.25 (Lanjutan)
Pengujian Halaman Langkah Keenam Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
startDrag(this);
};
obj_utprg45.onRelease =
function(){
stopDrag();
if (this._droptarget ==
"/latar_utprg45"){
obj_utprg45._x
= latar_utprg45._x;
obj_utprg45._y
= latar_utprg45._y;
}
else{
obj_utprg45._x
= xobj_utprg45;
obj_utprg45._y
= yobj_utprg45;
}};
obj_utprg45b.onPress =
function(){
startDrag(this);
};
obj_utprg45b.onRelease =
function(){
stopDrag();
if (this._droptarget ==
"/latar_utprg45b"){
Sumber: Hasil Penelitian (2017)
96
Tabel III.25 (Lanjutan 2)
Pengujian Halaman Langkah Keenam Simulasi
Input / Event Proses Output/ Next
Stage
Hasil
Pengujian
obj_utprg45b._x =
latar_utprg45b._x;
obj_utprg45b._y =
latar_utprg45b._y;}else {
obj_utprg45b._x =
xobj_utprg45b;
obj_utprg45b._y =
yobj_utprg45b;}};
Tombol “LAN
Tester
on (release)
{gotoAndPlay('frame 45');
}
Mengetes
konektifitas
kabel yang
telah dibuat
Sesuai
Tombol
“Beranda”
on (release) {
gotoAndPlay("home",
(1));}
Halaman awal Sesuai
Tombol
“Kembali”
on (release) {
gotoAndPlay("pilihan
simulasi",(1));}
Halaman
pilihan
simulasi
Sesuai
Tombol “Ulangi”
on (release) {gotoAndPlay(1);
}
Mengulangi
kembali
simulasi
langkah
keenam
Sesuai
Tombol “langkah
sebelumnya”
on (release) {
gotoAndPlay("simulasi
5 ",(1));}
Halaman
kelima
simulasi
Sesuai
Sumber: Hasil Penelitian (2017)
97
2. Penerimaan User Terhadap Animasi
Dilakukan dengan menyebar kuisioner bagi minimal 5 orang untuk mengetahui
sejauh mana aplikasi ini berfungsi dengan baik serta bermanfaat bagi pengguna.
Berilah tanda centang (√) pada kolom jawaban yang paling sesuai menurut anda.
Berikut adalah ketentuan pengisian :
SS : apabila anda Sangat Setuju dengan pernyataan
S : apabila anda Setuju dengan pernyataan
N : apabila anda Netral dengan pernyataan
TS : apabila anda Tidak Setuju dengan pernyataan
STS : apabila anda Sangat Tidak Setuju dengan pernyataan
Tabel III.26
Pengujian Kuisioner
No Pertanyaan Kuisioner SS S N TS STS
Tampilan Aplikasi
1. Apakah tampilan aplikasi “Animasi Interaktif
Sebagai Media Belajar Pengenalan
Klasifikasi Jangkauan Dan Topologi Jaringan
Komputer
” mudah untuk dipahami ?
18 2 0 0 0
2. Apakah tampilan aplikasi animasi
pembelajaran ini singkat, padat, dan jelas
untuk menyampaikan materi-materi dari Tata
Surya ?
17 2 0 1 0
3. Apakah tampilan aplikasi ini menarik ? 18 2 0 0 0
Total 35 6 0 1 0
Materi Pelajaran
4. Apakah materi yang disampaikan untuk
pembelajaran klasifikasi jangkauan dan
topologi jaringan komputer sudah lengkap ?
20
0
0 0 0
5. Apakah materi dengan menggunakan animasi
interaktif ini layak untuk di kembangkan ?
17
1 0 2 0
6. Apakah materi yang disampaikan mudah
untuk dimengerti ?
20
0 0 0 0
7. Apakah materi yang disampaikan dalam
aplikasi ini menarik ?
16
2 0 2 0
Total 73 3 0 4 0
98
Kemudahan Pengguna
8. Apakah anda mudah memahami dalam
penggunaan fungsi dari setiap menu ?
17 1 0 2 0
9. Apakah informasi di aplikasi animasi
pembelajaran ini sudah memenuhi kebutuhan
pengguna ?
16 3 0 1 0
10. Apakah aplikasi animasi pembelajaran ini
mudah di operasikan ?
18 2 0 0 0
Total 51 6 0 3 0
Sumber : Hasil Kuesioner (2017)
Dari hasil survei terhadap aplikasi animasi interaktif pengenalan klasifikasi
jangkauan dan topologi jaringan komputer dapat disimpulkan bahwa aplikasi ini
telah mampu digunakan untuk membantu pengguna dalam pemecahan masalah yang
dihadapinya. Selain itu penggunaan aplikasi tersebut juga cukup mudah dimengerti
oleh pengguna.
Sumber : Hasil Kuesioner (2017)
Gambar III.49
Tampilan Grafik Kuisioner Responden
0
2
4
6
8
10
12
14
16
18
20
soal 1 soal 2 soal 3 soal 4 soal 5 soal 6 soal 7 soal 8 soal 9 soal 10
Sangat Setuju Setuju Netral Tidak Setuju Sangat Tidak Setuju