BAB IV IMPLEMENTASI DAN PENGUJIAN

BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Gambaran Umum Aplikasi 4.1. 1 Materi Aplikasi ini peneliti buat dengan menggunakan beberapa scene. Pada scene 1 peneliti membuat uraian tentang layer-layer pada OSI Model sesuai dengan literature yang peneliti dapatkan terdapat tujuh layer yang menjadi media pada saat pengiriman data dan juga berisi halaman awal serta frame terakhir yang berisi tentang skema pada OSI Model dengan penggambaran yang sederhana sehingga dapat secara mudah diterima oleh user yang sebelumnya mungkin belum mengetahui tentang OSI Model. Pada halaman awal atau interface di aplikasi ini peneliti membuat judul yang berupa movieclip dengan warna yang berubah-ubah sehingga terlihat menarik dan tentu saja terdapat tombol-tombol yang dibuat agar aplikasi ini menjadi aplikasi yang interaktif dengan penggunanya yaitu beberapa menu yang disediakan oleh peneliti. Berikut gambar halaman awal tersebut : 58

59 Gambar 4. 1 Halaman Awal Setelah itu user dapat memilih menu yang diinginkannya. Tombol MATERI akan menjelaskan beberapa teori yang berada di sekitar Enkapsulasi dan Dekapsulasi, seperti misalnya ; layer-layer, alat-alat yang berhubungan dengan pengiriman data, dan yang lainnya. Pada tombol SIMULASI berisi proses data yang dalam pengirimannya dari satu computer ke computer lainnya baik dalam satu jaringan maupun yang berbeda jaringan. Di tombol terakhir peneliti menaruh tombol KUIS untuk menguji user sejauh mana ia memahami materi yang sudah diberikan oleh peneliti pada aplikasi ini.

60 Gambar 4.2 Halaman Awal Materi Saat user memilih menu MATERI maka yang selanjutnya akan Nampak adalah submenu yang terdiri dari TENTANG HEADER yang berisi definisi-definisi header, kemudian TENTANG LAYER yang berisi informasi layer-layer sesuai dengan standar OSI Model. Menu selanjutnya adalah ENKAPSULASI DAN DEKAPSULASI berisi tentang definisi dan beberapa gambar tentang enkapsulasi dan dekapsulasi, dan menu OSI MODEL adalah menu yang berisi skema dari OSI Reference Model. Serta menu terakhir adalah MAIN MENU apabila user ingin kembali ke menu awal

61 Gambar 4.3 Halaman Penjelasan Header Ini adalah tampilan dari teori tentang header yang disediakan pada aplikasi ini agar user juga dapat mempelajarinya. Gambar 4.4 Contoh Gambar WAN

62 Selain Header juga terdapat beberapa informasi tentang LAN dan WAN pada slide-slide berikutnya dan gambar di atas adalah contoh slide show beberapa gambar WAN. Gambar 4.5 Penjelasan Enkapsulasi Tampilan di atas akan muncul saat user memilih menu ENKAPSULASI DAN DEKAPSULASI dimana terdapat penjelasan tentang enkapsulasi dan dekapsulasi serta beberapa contoh gambarnya.

63 Gambar 4.6 Contoh Gambar Dekapsulasi Gambar di atas adalah contoh dari beberapa gambar yang disediakan dalam definisi dekapsulasi agar dapat juga dipelajari oleh user. Gambar 4.7 Penjelasan Tentang HUB

64 Tampilan di atas adalah tampilan lanjutan yang berada dalam menu ENKAPSULASI DAN DEKAPSULASI yaitu penjelasan dan beberapa gambar dari alat-alat yang berhubungan dengan pengriman data. Gambar 4.8 Contoh Gambar Switch Dan tampilan di atas juga adalah tampilan lanjutan saat user memilih NEXT dalam menu ENKAPSULASI DAN DEKAPSULASI, yaitu penjelasan tentang switch.

65 Gambar 4.9 Skema OSI Model Skema OSI Model diatas adalah tampilan apabila user memilih menu OSI MODEL. Pada tampilan diatas dijelaskan tentang bentukbentuk enkapsulasi dan proses-proses yang terjadi pada masing-masing layer. Gambar 4.10 Penjelasan Tentang Layer

66 Pada halaman ini terdapat penjelasan yang berbentuk uraian tentang layer pertama pada OSI Model Layer yaitu tentang Physical Layer dan pada bagian bawah halaman terdapat tombol NEXT yang akan membawa user kepada halaman selanjutnya serta tombol MAIN MENU yang akan membawa user ke halaman awal dimana menu utama berada. Gambar 4.11 Penjelasan Tentang Layer (2) Jika user meng-klik tombol NEXT maka uraian penjelasan tentang Network Layer berada pada halaman selanjutnya yaitu layer ketiga dalam OSI Model yang tentu saja terdapat tombol NEXT dan PREVIOUS di bagian bawah halaman.

67 Gambar 4.12 Penjelasan Tentang Layer (3) Setelah Presentation Layer user akan disajikan dengan uraian tentang layer yang terakhir yaitu Application Layer yang merupakan layer teratas pada OSI Model yang juga sebagai interface dari layanan pengiriman data. 4. 1. 2 Simulasi Untuk mempelajari tentang simulasi pada proses enkapsulasi dan dekapsulasi, user harus memilih menu SIMULASI pada menu awal dan kemudian akan muncul frame yang berisi halaman submenu yang berisi beberapa tombol yang dapat dilihat pada gambar. Setelah user mengklik tombol LAN maka user akan dimunculkan tampilan yang merupakan halaman awal pada menu SIMULASI.

68 Gambar 4. 13 Halaman Awal Simulasi Tampilan ini akan muncul saat user memilih menu SIMULASI pada menu awal. Disini terdapat submenu LAN, WAN, dan MAIN MENU apabila user ingin kembali ke menu utama. Gambar 4. 14 Halaman Simulasi

69 Submenu LAN menggambarkan tentang perjalanan proses pengiriman data yang berupa Ping dari satu computer ke computer lainnya, dimana proses enkapsulasi dan dekapsulasi terjadi di setiap layer yang dilewati oleh data tersebut. Disini aplikasi menggambarkan bahwa proses pengiriman data ini terjadi di dalam satu jaringan LAN yang tidak melewati terlalu banyak perantara. User harus memilih menu GO untuk meneruskan simulasi ini. Disini juga terdapat animasi berkedip sebagai perintah untuk meneruskan simulasi. Gambar 4.15 Proses Awal Simulasi Setelah itu akan nada tampilan alamat-alamat dari computer asal atau computer pengirim data.

70 Gambar 4.16 Proses Awal Simulasi (2) Tampilan yang muncul berikutnya adalah animasi command prompt yang seakan diketik perintah Ping yang sebenarnya adalah movie clip. Kemudian user akan diperintahkan dengan tulisan click Send yang berwarna abu-abu dan berkedip sehingga dapat menarik perhatian user agar dapat langsung melaksanakan perintah tersebut agar aplikasi ini dapat berjalan.

71 Gambar 4.17 Penjelasan Format Data Tampilan ini akan muncul setelah animasi-animasi sebelumnya berjalan setelah user memilih Send yaitu penjelasan tentang definisi enkapsulasi. Dengan tombol Pause dan Play yang berada di bagian atas dari tampilan ini. Gambar 4.18 Proses Enkapsulasi

72 Ini adalah animasi yang berjalan saat data berada pada layer ke-6 Presentation dengan warna tulisan pada layer-layer yang dikaburkan agar menjadi lebih fokus pada proses berjalannya data. Gambar 4.19 Penjelasan Format Dan pada saat data melewati Transport Layer akan terdapat penjelasan tantang data yang di enkapsulasi sesuai standar untuk Transport Layer agar kemudian dapat diteruskan ke layer yang berada di bawahnya. Begitu juga saat data melewati layer-layer setelahnya terdapat penjelasan tentang perubahan bentuk data setelah terjadi proses enkapsulasi.

73 Gambar 4.20 Proses Enkapsulasi (2) Setelah itu animasi akan bergerak menuju Network Layer dan akan terdapat animasi bentuk dari data yang telah terenkapsulasi. Dimana data dibubuhi oleh header-header dari layer-layer yang telah dilewati sebelumnya. Gambar 4. 21 Proses Enkapsulasi (Rinci)

74 Tampilan berikutnya adalah penjelasan tentang isi dari headerheader yang terdapat pada data yang telah terenkapsulasi. Dan tulisan pada layer-layer yang dikaburkan dimaksudkan agar tampilan dapat berfokus pada penjelasan data yang terenkapsulasi tersebut. Gambar 4.22 Proses Data Melewati HUB Setelah melewati Physical Layer data akan diteruskan melalui Hub yang berfungsi sebagai penerus sinyal untuk kemudian diterima di computer tujuan dan kemudian akan di dekapsulasi dimana terjadi pelepasan header-header agar data dapat dimengerti oleh layer-layer diatasnya. Sama seperti animasi saat proses enkapsulasi pada proses dekapsulasi pun terdapat penjelasan yang hampir sama tentang dekapsulasi ataupun header-headernya.

75 Gambar 4. 23 Proses Akhir Pengiriman Data Ini adalah saat computer penerima yang telah menampilkan data dan sekaligus menjadi proses yang terakhir dari rangkaian pengiriman data antarkomputer pada satu jaringan. Saat data sampai pada computer tujuan, terdapat animasi dimana seolah-olah muncul tulisan Ping yang berupa movie clip. Gambar 4. 24 Halaman Akhir Simulasi

76 aplikasi ini Ini adalah tampilan terakhir dari simulasi LAN yang terdapat pada Gambar 4.25 Halaman Awal Simulasi WAN Ini adalah tampilan awal dari simulasi WAN saat user memilih submenu simulasi yang kemudian memilih menu WAN. Kemudian user dapat memilih menu GO untuk melanjutkan simulasi ataupun jika ingin kembali ke menu awal dapat memilih MAIN MENU.

77 Gambar 4.26 Proses Awal Simulasi Ketika user mengklik GO maka perjalanan pun dimulai dengan animasi hello! yang kemudian user diperintahkan untuk memilih menu Send agar seolah user mengirimkan email kepada computer lain. Gambar 4.27 Proses Awal Simulasi (2)

78 pengirim. Tampilan berikutnya menjelaskan tentang computer asal dari user Gambar 4.28 Proses Enkapsulasi Animasi diatas adalah saat data melewati Presentation Layer dengan tulisan yang dikaburkan dan dimaksudkan agar animasi terfokus pada perjalanan data.

79 Gambar 4. 29 Proses Enkapsulasi (2) Penjelasan tentang data yang terdapat header-header yang dibubuhi saat data melewati layer-layer agar sesuai standar layer tersebut. Juga terdapat tombol Pause dan Play di setiap tampilan. Gambar 4. 30 Routing Table

80 Saat melewati Network Layer terdapat proses Routing Table pada computer asal yaitu pengecekkan alamat IP Router. Gambar 4.31 MAC Table Setelah Network Layer data melewati Data-Link Layer yang kemudian data terenkapsulasi dan terdapat pengecekkan di ARP Table di computer asal untuk melihat apabila terdapat MAC Address Router.

81 Gambar 4. 32 Proses Data melewati Router Pada gambar ini terlihat alur menunjukkan data harus melewati Hub/Switch untuk dapat melewati Router dan menyebrang ke jaringan lainnya. Gambar 4. 33 Routing Table

82 Ini adalah proses Routing Table pada Router untuk mencari alamat IP dari computer tujuan. Gambar 4.34 MAC Table ARP Table di atas adalah proses pengecekkan yang terjadi di Router untuk mencari MAC Address dari computer tujuan. Gambar 4.35 Proses Data setelah melewati Router

83 Pada tampilan ini animasi menunjukkan proses pengiriman data dari Router ke computer tujuan melalui Physical Layer setelah proses drkapsulasi di Router. Gambar 4.36 Proses Dekapsulasi Saat data melewati Network Layer terdapat pelepasan headerheader sebagai proses dari dekapsulasi yang terjadi di computer tujuan.

84 Gambar 4.37 Proses Akhir Dekapsulasi Dan ini adalah tampilan tentang penjelasan computer tujuan setelah data berhasil melewati proses dekapsulasi dan kemudian data akan ditampilkan. Gambar 4.38 Proses Akhir Simulasi

85 Tampilan ini dibuat seolah-olah user menerima email dengan cara memilih menu Open untuk membuka pesan baru seperti pada aplikasi email pada umumnya. Gambar 4.39 Halaman Akhir Simulasi Ini tampilan terakhir pada submenu WAN pada menu SIMULASI. User harus kembali ke menu awal untuk kembali menu-menu yang lainnya. 4. 1. 3 Kuis Materi-materi soal ini diberikan sebagai evaluasi dari hasil teoriteori yang sebelumnya telah diberikan baik dalam bentuk presentasi maupun animasi. Perlu dirancang agar soal dapat benar-benar menggambarkan seberapa jauh materi yang telah dikuasai oleh user agar sesuai juga dengan tujuan aplikasi ini yaitu untuk pembelajaran. Peneliti membuat soal-soal materi ini pada scene yang berbeda dengan membuat coding Actionscript 3.0 untuk menghubungkan antar scene yang satu dan yang lainnya. Actionscript 3.0 ini menghubungkan dari scene utama ke scene soal materi.

86 Dengan meng-klik SOAL MATERI pada halaman awal maka user akan tiba di frame soal yang pertama. Gambar 4. 40 Halaman Awal Kuis Ini adalah gambaran dari soal pertama yang akan muncul ketika user memilih untuk mengerjakan soal materi dengan nilai jawaban yang benar nilai nya 10 dan apabila menjawab salah tidak akan diberi nilai atau bernilai 0. Materi soal ini terdiri dari 10 soal dan apabila dikalkulasikan user yang menjawab benar semua akan mendapat nilai total 100.

87 Gambar 4. 41 Halaman Nilai pada Kuis Papan nilai ini adalah frame terakhir dari rangkaian frame materi soal sebagai pemberitahuan pada user nilai total yang diperolehnya dari menjawab materi-materi soal yang ada. Untuk nilai peneliti menggunakan Dynamic Text yang bisa berubah-ubah dan disinambungkan dengan coding untuk nilai total hasil kalkulasi dari jawaban yang berhasil di jawab oleh user. Disini juga terdapat dua tombol yaitu ULANGI untuk mengulang soal dan MAIN MENU untuk kembali ke menu awal /Home. 4. 1. 4 Sound Tidak lupa sebagai pelengkap pada aplikasi ini peneliti menambahkan efek-efek suara yang dapat menunjang tampilan dari aplikasi ini agar aplikasi ini menjadi lebih menarik untuk dipelajari dan juga agar tidak terkesan membosankan seperti aplikasi-aplikasi pembelajaran lainnya. Karena pada awal pembuatannya peneliti ingin membuat aplikasi ini menjadi ringan agar tidak terlalu sukar untuk dipelajari, sehingga materi yang disajikan dapat tersampaikan dengan

88 maksimal serta dapat sesuai dengan keinginan dari peneliti dan dosen pembimbing. Berikut ini adalah musik-musik yang dipakai untuk menjadi musik latar pada tiap tampilan maupun tombol : Table 4.1 Tabel Sound Aplikasi Lagu Download Blackberry 2013 ringtones to your cell phone - 2013 blackberry z10-41612254 _ Zedge Download Rain Drops ringtones to your cell phone - htc iphone5 lg - 41605144 _ Zedge jackhammer-01 Download Twilight Guitar ringtones to your cell phone - guitar twilight - 41550073 _ Zedge lightsaber_03 Depapepe - Harvest bird destroyed wood damage a2 Download Blackberry Z 10 ringtones to your cell phone - 10 2013 new - 41586757 _ Zedge mouse-doubleclick-02 Fungsi Musik latar pada halaman awal Musik latar pada halaman Tentang Layer Musik latar halaman submenu Materi, Simulasi, dan Kuis Musik latar Tentang Header dan Enkapsulasi dan Dekapsulasi Musik latar skema OSI Layer Musik latar simulasi LAN dan WAN Efek suara enkapsulasi data Efek suara enkapsulasi data Musik latar Kuis Efek suara saat menekan tombol 4. 1. 5 Coding Coding atau pengkodean diperlukan untuk menunjang kinerja dari suatu system atau aplikasi. Peneliti menggunakan Actionscript 3.0 adalah dengan alasan tertentu yaitu karena peneliti diwajibkan untuk memakai

89 Actionscript 3.0 dalam pembuatan aplikasi. Dan berikut ini adalah contohcontoh dari coding yang telah peneliti buat untuk aplikasi ini : Gambar 4. 42 Script Berhenti Coding ini ada hampir di setiap frame karena aplikasi ini berkonsep aplikasi interaktif maka harus ada coding ini untuk membuat frame berhenti berjalan dan dapat menuju ke frame selanjutnya sesuai perintah dari user. Gambar 4.43 Script tombol Tentang Layer Actionscript ini memberi perintah untuk button tentang layer dengan nama variable yang peneliti beri nama sesuai dengan nama buttonnya berfungsi untuk menjalankan movie pada frame berikutnya yang berisi presentasi tentang layer. Gambar 4. 44 Script tombol Enkapsulasi dan Dekapsulasi Gambar diatas adalah perintah untuk button enkapsulasi dan dekapsulasi yang diberi nama variable yang sama dengan nama button dan

90 akan mengarahkan user untuk menuju dan berhenti (gotoandstop) pada frame ke-9. Gambar 4. 45 Script Berpindah Frame Perintah diatas untuk button OSI MODEL dan akan mengarahkan user ke frame 10 dimana bentuk OSI Model berada. Gambar 4. 46 Script Berpindah Frame (2) Coding ini adalh perintah untuk mengisi MENU BUTTON yang masih berada pada scene yang sama maka hanya diarahkan pada frame sebelumnya saja (prevframe). Gambar 4. 47 Script Berpindah Frame (3) Untuk NEXT hanya akan diperintahkan untuk menjalankan frame berikutnya (play).

91 Gambar 4. 48 Script Berpindah Frame (4) Coding ini untuk memberi perintah pada button PREVIOUS untuk kembali ke frame sebelumnya. Gambar 4. 49 Script Berpindah Scene Actionscript di atas adalah perintah untuk button yang mengarahkan user pada scene-scene yang berbeda selain daripada scene utama dimana button itu berada. Dengan perintah gotoandstop(1, Scene 3 ); maka user dapat langsung berada pada scene 3 sesuai dengan penamaan yang diberikan oleh peneliti.

92 Gambar 4. 50 Script Keluar Aplikasi Untuk perintah keluar dari aplikasi maka dapat digunakan Actionscript diatas. Gambar 4.51 Script Variabel Nilai Perintah di atas adalah deklarasi dari nilai untuk setiap jawaban yang benar dari soal-soal yang dijawab oleh user. Gambar 4. 52 Script Menampilkan Nilai Tampilan di atas adalah coding untuk menampilkan nilai dari soalsoal yang terjawab dengan benar oleh user yang pada scene sebelumnya telah di deklarasikan. Nilai tersebut adalah akumulasi dan akan tampil pada kolom Dynamic text yang tersedia.

93 4.2 Hasil Pengujian Blackbox Dari hasil skenario pengujian yang dilakukan oleh penulis dapat diperoleh hasil pengujian. Dari hasil skenario dan pengujian pada aplikasi, yaitu menu awal, materi, simulasi, dan kuis. Maka diperoleh hasil pengujian tersebut sesuai dengan rumusan rancangan aplikasi program ini. Skenario Awal Materi Simulasi Kuis Table 4.2 Tabel Hasil Pengujian Blackbox Pengujian Klik tombol Materi Klik tombol Simulasi Klik tombol Kuis Klik tombol Tentang Header Klik tombol Tentang Layer Klik tombol Enkapsulasi dan Dekapsulasi Klik tombol OSI Model Klik tombol Next Klik tombol Previous Klik tombol Main Menu Klik tombol LAN Klik tombol WAN Klik tombol pause Klik tombol play Klik tombol Main Menu Klik tombol Go Klik tombol Main Menu Klik tombol Ulangi Sukses Sukses Sukses Sukses Sukses Sukses Sukses Sukses Sukses Sukses Sukses Sukses sukses sukses Sukses Sukses Sukses Sukses Keterangan