Transkripsi

1 BAB III KONSEP, DESAIN DAN PENGUMPULAN MATERI 3.1. Konsep Dalam membangun program Aplikasi Simulasi Metoda Kompresi Data Huffman dengan Adobe Flash Profesional / Action Script 3.0 ini peneliti akan menganalisa metode kompresi yang akan digunakan dan kebutuhan dasar sistem terlebih dahulu sebelum membuat rancangan aplikasi Analisa Sistem Terdapat beberapa macam metode kompresi data diantaranya Run Length Encoding (RLE), Differential Encoding, Huffman dan Shannon Fano namun masing-masing metode tersebut memiliki kelemahan dan kelebihan serta kekhususan dalam hal menangani jenis data yang dapat dikompresi dengan baik sehingga menghasilkan file hasil kompresi yang efektif. Metode Run Length Encoding (RLE) dapat menghasilkan file kompresi yang efektif apabila terdapat data yang sama ditampilkan secara berturut-turut misalnya pada sebuah data teks atau gambar. Tetapi untuk data berjenis teks akan sangat jarang ditemukan teks yang memiliki susunan huruf yang sama berturutturut sehingga akan kurang efektif jika menggunakan metode ini. Namun berbeda hasilnya apabila digunakan pada data gambar karena data gambar memungkinkan adanya urutan pixel dengan warna yang sama secara berturut-turut. Metode Differential Encoding bekerja dengan cara membandingkan data sebelum dan sesudahnya. Misalnya apabila terdapat data yang sama antara dua buah frame dalam sebuah video maka data yang ditampilkan pada frame dua mengacu pada data frame satu sehingga pada posisi frame kedua tidak memerlukan memori lagi untuk menyimpan data yang sama. Contohnya pada sebuah video yang menggambarkan sebuah bola yang memantul ditempat pada sebuah meja dengan posisi kamera diam. Dalam video ini dapat disimpulkan bahwa latar belakang meja tidak akan berubah mulai dari awal sampai akhir sehingga gambar meja pada frame awal tersebut dapat digunakan untuk frame selanjutnya. Sedangkan video ini hanya akan memakan memori yang lebih besar 25

2 26 pada bagian gambar bola yang memantul beserta latar belakang yang berada disekitar bola yang ikut berubah setiap framenya. Oleh karena itu metode ini cocok untuk jenis file video. Sedangkan prinsip kerja metode Huffman adalah dengan mengkodekan setiap karakter ke dalam representasi bit. Representasi bit untuk setiap karakter berbeda satu sama lain berdasarkan frekuensi kemunculan karakter. Semakin sering karakter tersebut muncul, maka semakin pendek representasi bitnya. Sebaliknya bila semakin jarang frekuensi suatu karakter untuk muncul, maka semakin panjang representasi bit untuk karakter tersebut. Berdasarkan cara kerja tersebut metode Huffman cocok untuk digunakan pada berbagai jenis data. Huffman statis cocok untuk digunakan pada data teks karena cukup mudah dalam pengimplementasiannya sedangkan Huffman dinamis dapat digunakan untuk data gambar, audio maupun video dengan menambahkan beberapa modifikasi kedalam Huffman statis. Pada dasarnya cara kerja dari algoritma Shannon Fano sama persis dengan Huffman. Algoritma ini membentuk sebuah pohon, kemudian mengencodingnya dan yang terakhir adalah mengembalikannya dalam bentuk karakter teks atau decoding. Hanya saja perbedaan yang fundamental terdapat pada pembuatan pohon. Pembuatan pohon pada Shannon Fano dibuat berdasarkan proses dari atas ke bawah berbeda dengan Huffman yang membuat pohon dari bawah ke atas. Sebuah pohon Shannon Fano dibangun sesuai dengan spesifikasi yang dirancang untuk mendefinisikan tabel kode. Oleh karena itu metode ini kurang efektif dibandingkan dengan metode Huffman. Berdasarkan penjelasan diatas maka dipilihlah metode Huffman sebagai algoritma kompresi dalam aplikasi ini dengan pertimbangan jenis data yang dapat diolah dapat bervariasi dengan menambahkan beberapa modifikasi. Penelitian ini fokus pada data teks maka metode ini dirasa cukup efektif karena didukung dengan cara pengimplementasiannya yang cukup mudah. Berikut merupakan diagram usecase untuk aplikasi yang akan dibangun. Use case digunakan untuk mendeskripsikan interaksi antara para pengguna sistem dengan sistem itu sendiri, dengan memberikan sebuah narasi tentang bagaimana

3 27 sistem tersebut digunakan. Use case diagram menggambarkan fungsionalitas yang diharapkan dari suatu sistem, yang ditekankan adalah apa yang diperbuat sistem dan bukan bagaimana sebuah use case merepresentasikan sebuah interaksi antara aktor dengan sistem. Use case mengambarkan kata kerja seperti Login ke sistem, maintenance user dan sebagainya. Dalam bahasan use case, para pengguna disebut sebagai aktor. Seorang (aktor) merupakan sebuah peran penting dalam kaitanya dengan sistem untuk melakukan pekerjaan atau aktivitas tertentu. Use case diagram dapat sangat membantu bila kita sedang menyusun requirement sebuah sistem, mengkomunikasikan rancangan dengan klien, dan merancang test case untuk semua fitur yang ada pada sistem. Pada aplikasi ini dapat diketahui bahwa aktor tersebut adalah pengguna. Maka didapatkan suatu use case diagram dan beberapa skenario yang memperlihatkan interaksi-interaksi antara use case dengan aktor. Use case diagram dari aplikasi ini dapat dilihat pada Gambar 3.1. Gambar 3.1. Use Case Diagram Berikut penjelasan gambar: 1. Simbol manusia mengambarkan seorang aktor 2. Simbol oval merepresentasikan use case 3. Simbol garis merepresentasikan kardinalitas

4 28 Pada Gambar3.1 dapat dijelaskan bahwa terdapat seorang aktor. Use case diagram tersebut adalah use case semua menu yang terdapat didalam aplikasi, yaitu use case melihat materi, mencoba simulasi, melihat logika program dan melihat bantuan. Berikut merupakan deskripsi Use case diagram pada Gambar 3.1: Tabel 3.1. Use Case Melihat Materi Nama Melihat Materi Aktor Pengguna Deskripsi Pengguna dapat mempelajari materi yang ada beserta animasinya. Skenario 1. Sistem menampilkan halaman materi secara otomatis (pada awal pembelajaran) atau Pengguna memilih menu materi secara manual. 2. Pengguna mempelajari semua materi beserta animasi yang ada. Kondisi Awal Pengguna menerima halaman materi. Kondisi Akhir Pengguna dapat mempelajari semua materi yang ada. Pada use case pertama ini yaitu melihat materi. Saat pengguna menjalankan aplikasi maka sistem akan langsung menampilkan materi beserta animasi. Selanjutnya pengguna dapat mulai mempelajari isi materi secara keseluruhan. Tujuan use case pertama ini ialah agar pengguna memahami materi yang ada dengan bantuan animasi.

5 29 Tabel 3.2. Use Case Menjalankan Simulasi Nama Menjalankan Simulasi Aktor Pengguna Deskripsi Pengguna dapat mencoba melakukan proses kompresi/dekompresi sebuah file teks. Kemudian dapat langsung mengetahui hasil dari kompresi data tersebut. Skenario 1. Pengguna menginput file berjenis *.txt dengan menekan tombol Input. 2. Sistem akan mengolah data dan menampilkan hasil pemrosesan berupa tabel Huffman. 3. Pengguna menekan tombol Kompres. 4. Sistem akan melakukan proses kompresi dan akan menampilkan data hasil kompresi. 5. Pengguna menekan tombol Simpan. 6. Pengguna menyimpan file hasil kompresi ke direktori. Kondisi Awal Pengguna sudah berada di halaman simulasi dan memiliki file berjenis *.txt untuk input data. Kondisi Akhir Pengguna dapat mencoba proses kompresi/dekompresi data dan menyimpan data hasil kompresinya. Use case kedua yaitu menjalankan simulasi. Pada tahap ini pengguna dapat mencoba melakukan proses kompresi file teks dengan memasukkan sebuah file *.txt kemudian sistem akan melakukan proses pembuatan table Huffman. Table Huffman yang sudah terbentuk akan digunakan untuk melakukan proses kompresi. Selanjutnya pengguna dapat menyimpan file hasil kompresi untuk digunakan pada saat menjalankan simulator dekompresi. Tujuan use case kedua ini ialah agar pengguna dapat mencoba secara langsung proses kompresi data teks.

6 30 Tabel 3.3. Use Case Melihat Logika Program Nama Melihat Logika Program Aktor Pengguna Deskripsi Pengguna dapat melihat semua proses yang berjalan di dalam sistem saat mengkompres data. Skenario 1. Pengguna memilih menu Logika Program 2. Sistem akan menampilkan semua langkah-langkah yang dijalankan saat pengguna melakukan proses kompresi Kondisi Awal Pengguna sudah melalui halaman simulasi dan minimal sudah melakukan input data. Kondisi Akhir Pengguna dapat melihat semua proses yang dilakukan sistem saat kompresi data. Jika pada use case kedua, pengguna dapat mencoba proses kompresi data, maka pada use case ketiga ini, pengguna dapat melihat dan mempelajari bagaimana semua proses berjalan didalam sistem saat mengkompresi data. Caranya ialah pengguna memilih menu Logika Program, kemudian sistem akan menampilkan semua langkah-langkah yang dijalankan sistem saat melakukan proses kompresi. Tabel 3.4. Use Case Melihat Bantuan Nama Melihat Bantuan Aktor Pengguna Deskripsi Pengguna dapat melihat informasi mengenai tampilan antarmuka aplikasi. Skenario 1. Sistem menampilkan halaman bantuan. 2. Pengguna dapat membaca semua informasi mengenai tampilan antarmuka aplikasi. Kondisi Awal Pengguna sudah berada di halaman bantuan. Kondisi Akhir Pengguna dapat membaca semua informasi mengenai tampilan antarmuka aplikasi.

7 31 Pada use case keempat yaitu melihat bantuan, pengguna dapat melihat dan mengenal informasi pada setiap tampilan antarmuka aplikasi. Caranya ialah pengguna menekan tombol Bantuan dan sistem akan menampilkan halaman bantuan. Kemudian pengguna dapat membaca semua informasi mengenai tampilan antarmuka aplikasi. Dalam pembuatan perangkat lunak ini analisa komponen sistem yang akan dibangun diantaranya sebagai berikut : 1. Perangkat lunak, yaitu aplikasi simulasi proses kompresi data dengan algoritma Huffman. 2. Materi yang berada di dalam aplikasi ini meliputi materi dasar tentang Algoritma Huffman dan cara kerjanya. 3. Perangkat keras, yaitu komputer (desktop / laptop). 4. Manusia, yaitu pengguna yang mengakses sistem. 5. Prosedur yaitu langkah-langkah yang mendefinisikan tentang penggunaan sistem Perancangan Aplikasi Aplikasi Simulasi Metoda Kompresi Data Huffman ini merupakan aplikasi yang dibuat untuk membantu dan mempermudah pengguna dalam memahami sebuah proses kompresi data menggunakan algoritma Huffman. Aplikasi ini dirancang menggunakan metode pengembangan multimedia yang dilakukan melalui 5 tahapan, yaitu konsep, perancangan, pengumpulan materi, pembuatan dan pengujian. Aplikasi ini akan dibagi menjadi 2 bagian utama, yaitu Kompresi dan Dekompresi data. Untuk bagian dekompresi data hanya digunakan untuk menegembalikan data semula setelah melalui proses kompresi sehingga tidak dilengkapi dengan teori dasar.

8 32 Tabel 3.5. Deskripsi Konsep Aplikasi Judul Aplikasi Simulasi Kompresi Data Huffman Pengguna Umum Bentuk Aplikasi Media Pembelajaran Interaktif Gambar Gambar pada seluruh interface dibuat sendiri dengan cara vector drawing kecuali pada bagian latar belakang Suara Suara untuk beberapa efek tombol dan event menggunakan file berjenis MP3 Animasi Animasi pada seluruh isi konten dibuat sendiri dengan teknik tweening Interaktif Menggunakan link berupa tombol sehingga pengguna dapat melakukan perpindahan layar, pengontrolan animasi dan proses Input/Output data didalam simulator Berikut penjelasan secara rinci mengenai konsep dari Aplikasi Simulasi Kompresi Data Huffman dengan Adobe Flash Profesional / ActionScript 3.0. Pada bagian kompresi data ini saat pengguna mulai membuka aplikasi maka pengguna akan dihadapkan dengan sebuah tampilan jendela yang berisi materi mengenai dasar kompresi data menggunakan algoritma Huffman disertai dengan beberapa animasi yang dapat mempermudah pengguna untuk dapat memahaminya. Dalam jendela tersebut terdapat sebuah panel scrollbar yang dapat digunakan untuk menggulir keseluruhan isi materi. Aplikasi ini menggunakan scrollbar sebagai navigasi supaya menjadi lebih sederhana dan tidak terlalu banyak memiliki halaman dan tombol yang dapat membuat pengguna menjadi bingung. Didalam jendela yang berisi materi tersebut juga sudah disisipkan beberapa tombol sederhana untuk mengontrol animasi yang ada. Setelah pengguna selesai membaca dan memahami seluruh isi materi maka pengguna dapat berpindah ke halaman simulasi dengan menekan tombol simulasi pada bagian menu di sudut kiri bawah. Untuk mempermudah pengguna apabila ingin melihat isi materi kembali maka pengguna dapat menekan tombol materi yang berada dibagian menu paling kiri.

9 33 Sesudah itu pengguna akan berpindah ke halaman simulasi. Pada halaman ini pengguna dihadapkan dengan sebuah simulator kompresi data. Pengguna dapat memberikan input file bertipe *.txt dengan menekan tombol Input. Maka pada bagian kiri jendela akan muncul status data file yang telah diload berupa jumlah karakter beserta dengan besar bit Unicodenya. Kemudian di tab data input akan muncul teks isi daripada file yang sudah diload. Pengguna juga dapat melihat isi teks yang diload dalam bentuk bilangan biner unicode dengan menekan tombol tab bit unicode. Sedangkan pada jendela dibawahnya akan ditampilkan sebuah tabel Huffman dengan data simbol, jumlah kemunculan, peluang kemunculan dan kode Huffman untuk masing-masing simbol. Selanjutnya cukup dengan menekan tombol kompres maka sistem akan memproses data yang sudah diinput sebelumnya berdasarkan data tabel Huffman yang sudah dibangun sebelumnya saat proses load data. Setelah proses selesai maka pada jendela bagian kiri bawah akan ditampilkan info menegenai file hasil kompresi begitupula dengan jendela dibagian kanan atas maka secara otomatis akan berpindah ke tab bit Huffman. Pada akhir simulasi pengguna dapat menyimpan file hasil kompresi dengan menekan tombol Simpan. File yang dihasilkan nantinya dapat digunakan untuk proses dekompresi data pada simulator. Pengguna juga dapat melihat bagaimana proses aplikasi tersebut berjalan dengan menekan tombol logika program pada bagian menu. Didalam halaman logika program ini akan menampilkan semua proses yang dilakukan sistem mulai dari input data, pembuatan tabel Huffman, penghitungan entropi dan efisiensi sampai proses pengompresan data selesai. Sedangkan untuk pengguna yang masih bingung dengan tampilan aplikasi ini dapat melihat bagian bantuan dengan menekan tombol Bantuan. Halaman bantuan ini akan berisi petunjuk mengenai tampilan antar muka aplikasi dan fungsinya.

10 Desain Pada bagian ini akan dilakukan desain perancangan aplikasi yang terdiri dari perancangan activity diagram, sequence diagram, peta navigasi, storyboard dan desain tata letak Perancangan Activity Diagram Activity diagram adalah teknik untuk menggambarkan logika prosedural, proses bisnis, dan jalur kerja. Dalam beberapa hal, diagram ini memainkan peran mirip sebuah diagram alir, tetapi perbedaan prinsip antar diagram ini dan notasi diagram alir adalah diagram ini mendukung behavior paralel.(fowler, 2005) Activity diagram mengambarkan berbagai alir aktivitas didalam sistem yang sedang dirancang, bagaimana masing-masing aliran berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Diagram ini mengambarkan langkah yang mana dijalankan secara berurutan dan langkah mana yang dijalankan secara bersamaan. Gambar 3.2. Activity Diagram menu Materi Pada Gambar 3.2 aktifitas dimulai saat pengguna sudah berada didalam menu utama, mula-mula pengguna memilih menu materi dengan menekan tombol materi, selanjutnya sistem akan menampilkan halaman materi. Kemudian pengguna dapat mempelajari materi yang ada.

11 35 Gambar 3.3. Activity Diagram menu Simulasi Pada Gambar 3.3 aktifitas dimulai saat pengguna sudah berada didalam menu utama, mula-mula pengguna memilih menu simulasi dengan menekan tombol simulasi, kemudian sistem akan menampilkan halaman simulasi. Selanjutnya pengguna menekan tombol input untuk memasukkan file yang akan dikompresi. Sistem akan memproses file yang sudah diinput kemudian menampilkan hasilnya ke layar. Selanjutnya pengguna menekan tombol kompres. Sistem akan melakukan proses kompresi data yang kemudian akan menampilkan hasilnya. Terakhir pengguna menekan tombol simpan dan sistem akan melakukan proses penyimpanan data.

12 36 Gambar 3.4. Activity Diagram menu Logika Program Pada Gambar 3.4 aktifitas dimulai saat pengguna sudah berada didalam menu utama, mula-mula pengguna memilih menu logika program dengan menekan tombol logika program, selanjutnya sistem akan menampilkan halaman yang berisi semua tahapan proses yang dilakukan oleh sistem. Kemudian pengguna dapat mempelajari semua proses yang dikerjakan sistem saat menjalankan proses simulator. Gambar 3.5. Activity Diagram menu Bantuan Pada Gambar 3.5 aktifitas dimulai saat pengguna sudah berada didalam menu utama, mula-mula pengguna memilih menu bantuan dengan menekan tombol bantuan, selanjutnya sistem akan menampilkan halaman bantuan yang berisi semua informasi mengenai tampilan antarmuka aplikasi. Kemudian pengguna dapat membaca semua informasi yang ditampilkan.

13 Perancangan Sequence Diagram Sequence diagram digunakan untuk menggambarkan perilaku sebuah skenario. Diagram ini menunjukkan sejumlah contoh objek dan pesan (message) yang diletakkan diantara objek-objek di dalam use case. Sequence diagram menggambarkan interakasi antar objek didalam dan disekitar sistem (termasuk pengguna, display, dan sebagainya) berupa pesan yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi waktu dan objek-objek yang terkait. Sequence diagram bisa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan keluaran tertentu. Dari bentuk use case yang telah digambarkan sebelumnya hanya akan ada satu aktor yang akan dibuat sequence diagram sesuai dengan use case. 1. Sequence Diagram Menu Materi Pada Gambar 3.6 sequence diagram menu materi pengguna dapat mengakses halaman materi melalui menu utama. Pada menu utama pengguna akan memilih tombol materi. Setelah itu akan muncul tampilan yang berisi beberapa materi dasar yang terdapat didalam aplikasi. Pengguna dapat menggulir halaman untuk melihat semua materi yang ada. Gambar 3.6. Sequence Diagram Menu Materi

14 38 2. Sequence Diagram Menu Simulasi Pada Gambar 3.7 sequence diagram menu simulasi pengguna akan mulai dengan memilih menu simulasi. Setelah itu akan muncul tampilan yang berisi beberapa tabel output dan tombol untuk menjalankan simulasi. Selanjutnya pengguna memasukkan file teks maka sistem akan melakukan proses pembuatan tabel Huffman dan menampilkannya. Kemudian pengguna menekan tombol kompres untuk mulai melakukan kompresi data. Terakhir pengguna menekan tombol simpan untuk menyimpan data hasil kompresi. Gambar 3.7. Sequence Diagram Menu Simulasi 3. Sequence Diagram Menu Logika Program Pada Gambar 3.8 sequence diagram menu logika program pengguna akan mulai dengan memilih menu logika program. Setelah itu sistem akan menampilkan semua langkah-langkah yang dilakukan sistem saat menjalankan

15 39 proses simulasi. Sehingga pengguna dapat mempelajari bagaimana cara kerja sebuah algoritma Huffman dalam proses kompresi data. Gambar 3.8. Sequence Diagram Menu Logika Program 4. Sequence Diagram Menu Bantuan Pada Gambar 3.9 sequence diagram menu bantuan pengguna akan mulai dengan memilih menu bantuan. Setelah itu akan muncul tampilan yang berisi semua informasi mengenai tampilan antarmuka aplikasi. Gambar 3.9. Sequence Diagram Menu Bantuan

16 Perancangan Peta Navigasi Peta navigasi ini akan memudahkan dalam merancang aplikasi yang akan dibuat dengan menentukan lokasi pada setiap halaman yang ada didalam aplikasi simulasi metoda kompresi data Huffman. Gambar 3.10 merupakan peta navigasi dari aplikasi ini. Gambar Peta Navigasi Perancangan Storyboard Storyboard adalah deskripsi masing-masing tampilan suatu kejadian dari movie yang dimainkan dengan menampilkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Storyboard digunakan sebagai alat bantu pada tahapan perancangan multimedia. Pada Tabel 3.6 ini akan menggambarkan rancangan Aplikasi Simulasi Metoda Kompresi Data Huffman. Tabel 3.6. Storyboard No Halaman Konten Keterangan 1 Utama Teks: Judul Aplikasi dan Judul Halaman Tombol: Menu Utama(Materi, Simulasi, Logika Program dan Bantuan) Audio: Jingle Pembukaan Video: Animasi Pembukaan Gambar: Latar belakang 2 Materi Teks: Judul Halaman dan Materi mengeanai dasar algoritma kompresi Huffman Tombol: Menu Utama Video: Simulasi animasi pembuatan pohon Huffman dan kode Huffman. Gambar: Latar belakang aplikasi Saat aplikasi mulai dijalankan maka akan muncul Judul Aplikasi beserta animasi dengan diiringi jingle pembukaan. Latar belakang statik. Saat berada di halaman materi pengguna akan dihadapkan dengan materi dasar yang di sertai dengan beberapa animasi. Pengguna dapat mengulir halaman dengan menggunakan scrollbar untuk melihat materi keseluruhan.

17 41 Tabel 3.6. (lanjutan) Storyboard 3 Simulasi Teks: Judul Halaman, data input, data table Huffman, data output dan beberapa informasi mengenai kompresi. Tombol: Menu Utama, Tab Data Input, Tab Bit Unicode, Tab Bit Huffman, Input, Kompres, Simpan. Gambar: Latar belakang aplikasi 4 Logika Program Teks: Judul Halaman dan urutan langkahlangkah yang dilakukan sistem saat pengguna menjalankan simulator. Tombol : Menu Utama Gambar: Latar belakang aplikasi 5 Bantuan Teks: Judul Halaman dan informasi mengenai tampilan antar muka aplikasi baik nama maupun fungsinya. Tombol : Menu Utama Gambar: Latar belakang aplikasi Pada halaman ini pengguna diminta untuk memasukkan file teks. Kemudian sistem akan membangun tabel Huffman. Selanjutnya data akan dikompres dan hasilnya dapat disimpan untuk proses dekompresi. Halaman logika program akan menampilkan semua hasil proses dari tahapan-tahapan yang dilakukan sistem dari awal sampai akhir. Halaman bantuan digunakan apabila pengguna kurang memahami tampilan antar muka aplikasi Desain Layout Layout didalam bahasa memiliki arti tata letak. Sedangkan menurut istilah, layout merupakan usaha untuk menyusun, menata, atau memadukan elemenelemen atau unsur-unsur komunikasi grafis (teks, gambar, tabel dll) menjadikan komunikasi visual yang komunikatif, estetik dan menarik. Di sini diperlukan pertimbangan ketika sedang mendesain suatu infomasi yang seefektif mungkin. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan. Untuk mempermudah dalam pembuatan dan penataan objek ke dalam stage maka dibuatlah desain tata letak terlebih dahulu sebagai panduan.

18 42 Gambar Halaman Materi Berikut merupakan keterangan desain tata letak untuk Gambar 3.12: Judul Aplikasi berisi nama aplikasi yang dibuat. Tombol Materi digunakan untuk berpindah ke halaman materi. Tombol Simulasi digunakan untuk berpindah ke halaman simulasi. Tombol Logika Program digunakan untuk berpindah ke halaman logika program Tombol Bantuan digunakan untuk berpindah ke halaman bantuan. Judul Halaman berisi nama halaman yang sedang aktif. Isi Konten berisi semua materi dasar mengeai kompresi data menggunakan algoritma huffman. Scrollbar Konten digunakan apabila data yang akan ditampilkan melebihi luas halaman.

19 43 Gambar Halaman Simulasi Berikut merupakan keterangan desain tata letak untuk Gambar 3.13: 1. Judul Aplikasi berisi nama aplikasi yang dibuat. 2. Tombol Materi digunakan untuk berpindah ke halaman materi. 3. Tombol Simulasi digunakan untuk berpindah ke halaman simulasi. 4. Tombol Logika Program digunakan untuk berpindah ke halaman logika program 5. Tombol Bantuan digunakan untuk berpindah ke halaman bantuan. 6. Judul Halaman berisi nama halaman yang sedang aktif. 7. Informasi Input berisi informasi mengenai jumlah total karakter dan jumlah total bit Unicode data yang diinput. 8. Tombol Input digunakan untuk memasukkan data yang akan dikompresi. 9. Tombol Kompres digunakan untuk melakukan proses kompresi data. 10. Informasi Output berisi informasi mengenai nilai efisiensi proses kompresi dan jumlah total bit Huffman data yang dikompres. 11. Tombol Simpan digunakan untuk menyimpan data hasil kompresi. 12. Tombol Tab Data Input digunakan untuk berpindah ke tab data input. 13. Tombol Tab Bit Unicode digunakan untuk berpindah ke tab bit unicode. 14. Tombol Tab Bit Huffman digunakan untuk berpindah ke tab bit huffman. 15. Halaman data dapat berisikan informasi mengenai isi data yang diinput, bit Unicode atau bit Huffman tergantung dari posisi tab mana yang sedang aktif.

20 Scrollbar Data digunakan untuk menggulir halaman tab data apabila data yang akan ditampilkan melebihi luas halaman. 17. Tabel Simbol berisikan simbol apa saja yang terkandung didalam file data yang dinput. 18. Tabel Frekuensi berisikan berapa banyak simbol muncul didalam data yang diinput. 19. Tabel Peluang berisikan peluang masing- masing simbol muncul di dalam data yang diinput. 20. Tabel Kode Huffman berisikan kode Huffman untuk masing-masing simbol. 21. Scrollbar Tabel digunakan untuk menggulir halaman tabel apabila data yang akan ditampilkan didalam table melebihi luas halaman tabel Gambar Halaman Logika Program Berikut merupakan keterangan desain tata letak untuk Gambar 3.14: 1. Judul Aplikasi berisi nama aplikasi yang dibuat. 2. Tombol Materi digunakan untuk berpindah ke halaman materi. 3. Tombol Simulasi digunakan untuk berpindah ke halaman simulasi. 4. Tombol Logika Program digunakan untuk berpindah ke halaman logika programbantuan 5. Tombol Bantuan digunakan untuk berpindah ke halaman bantuan. 6. Judul Halaman berisi nama halaman yang sedang aktif.

21 45 7. Isi Logika Program berisi langkah-langkah semua proses yang dilakukan sistem saat melakukan simulasi. 8. Scrollbar Logika Program digunakan apabila data yang akan ditampilkan melebihi luas halaman. Gambar Halaman Bantuan Berikut merupakan keterangan desain tata letak untuk Gambar Judul Aplikasi berisi nama aplikasi yang dibuat. 2. Tombol Materi digunakan untuk berpindah ke halaman materi. 3. Tombol Simulasi digunakan untuk berpindah ke halaman simulasi. 4. Tombol Logika Program digunakan untuk berpindah ke halaman logika program 5. Tombol Bantuan digunakan untuk berpindah ke halaman bantuan. 6. Judul Halaman berisi nama halaman yang sedang aktif. 7. Isi Informasi Bantuan berisi semua informasi mengenai tampilan antarmuka aplikasi. 8. Scrollbar Informasi Bantuan digunakan apabila informasi yang akan ditampilkan melebihi luas halaman.

22 Pengumpulan Materi Pada tahap ini proses mengumpulkan dan membuat bahan yang diperlukan oleh aplikasi akan dilakukan. Dalam pembuatan aplikasi ini bahan-bahan yang digunakan antara lain teks, gambar, animasi, dan audio Teks Teks merupakan elemen multimedia yang menjadi dasar utama dalam menyampaikan informasi, karena teks adalah jenis data yang paling sederhana dan membutuhkan tempat penyimpanan yang paling kecil. Biasanya dihasilkan oleh program pengolah kata dan merupakan informasi yang utama pada sebagian besar multimedia. Teks memegang peranan dasar dalam menyusun dokumen, karena hampir seluruh aplikasi multimedia menggunakan teks sebagai alat presentasi informasi yang paling sesuai untuk mendeskripsikan suatu nama, definisi atau aturan dan memberi penekanan untuk sesuatu materi yang ingin disampaikan. Semua teks didalam aplikasi disusun dan dibuat sendiri berdasarkan referensi dari berbagai sumber. Berikut daftar teks yang digunakan didalam aplikasi ini : Tabel 3.7. Daftar Materi Teks No Nama File Informasi File Sumber 1 Judul aplikasi Helvatica, Bold, 14 poin Dibuat sendiri 2 Judul halaman Verdana, Regular, 20 poin Dibuat sendiri 3 Materi dasar algoritma Huffman Arial, Regular, 13 poin Dibuat sendiri 4 Keterangan objek Arial, Regular, 13 poin Dibuat sendiri 5 Penjelasan bantuan Arial, Bold dan Regular, 13 poin Dibuat sendiri Gambar Gambar merupakan elemen paling penting, memberikan penekanan secara visual terhadap sesuatu presentasi. Membantu menyampaikan informasi dengan lebih berkesan. Menjadikan presentasi atau penyampaian informasi dengan lebih menarik. Penyampaian informasi akan menjadi semakin efektif dan bermanfaat, terutama informasi yang tidak dapat dijelaskan dengan kata-kata. Semua gambar

23 47 di dalam aplikasi ini dibuat sendiri dengan Adobe Flash Profesional. Berikut daftar gambar yang digunakan didalam aplikasi ini : Tabel 3.8. Daftar Materi Gambar No Nama File Informasi File Sumber 1 Bingkai aplikasi Format: vektor, simbol: Graphic Dibuat sendiri 2 Latar belakang aplikasi Format: vektor, simbol: Graphic Dibuat sendiri 3 Tombol keluar Format: vektor, simbol: Button Dibuat sendiri 4 Tombol animasi Format: vektor, simbol: Button Dibuat sendiri 5 Tombol materi Format: vektor, simbol: Button Dibuat sendiri 6 Tombol simulator Format: vektor, simbol: Button Dibuat sendiri 7 Tombol logika program Format: vektor, simbol: Button Dibuat sendiri 8 Tombol bantuan Format: vektor, simbol: Button Dibuat sendiri 9 Tombol input Format: vektor, simbol: Button Dibuat sendiri 10 Tombol kompres Format: vektor, simbol: Button Dibuat sendiri 11 Tombol simpan Format: vektor, simbol: Button Dibuat sendiri 12 Tombol data input Format: vektor, simbol: Button Dibuat sendiri 13 Tombol bit ASCII Format: vektor, simbol: Button Dibuat sendiri 14 Tombol bit Huffman Format: vektor, simbol: Button Dibuat sendiri 15 Tombol hit bantuan Format: vektor, simbol: Button Dibuat sendiri 16 Alphabet MERCUBUANA Format: vektor, simbol: Movie Clip Dibuat sendiri 17 Scrollbar Format: vektor, simbol: Movie Clip Dibuat sendiri 18 Window materi Format: vektor, simbol: Movie Clip Dibuat sendiri 19 Window informasi Format: vektor, simbol: Movie Clip Dibuat sendiri 20 Tab data input Format: vektor, simbol: Movie Clip Dibuat sendiri 21 Tab bit ASCII Format: vektor, simbol: Movie Clip Dibuat sendiri 22 Tab bit Huffman Format: vektor, simbol: Movie Clip Dibuat sendiri 23 Table Huffman Format: vektor, simbol: Movie Clip Dibuat sendiri 24 Window logika program Format: vektor, simbol: Movie Clip Dibuat sendiri 25 Window bantuan Format: vektor, simbol: Movie Clip Dibuat sendiri 26 Image halaman materi Format: png, simbol: Bitmap Screenshot 27 Image halaman simulator Format: png, simbol: Bitmap Screenshot

24 Animasi Animasi berperan sebagai penarik pada sebuah presentasi dan sangat membantu dalam menjelaskan suatu konsep yang kompleks dengan mudah. Animasi mengacu pada gambar-gambar yang bergerak. Animasi dapat dihasilkan dengan menayangkan frame-frame (bingkai-bingkai) gambar secara cepat untuk menghasilkan efek pergerakan. Animasi yang ada didalam aplikasi dibuat sendiri berdasarkan kebutuhan materi yang ada. Animasi digunakan untuk memperjelas langkah-langkah pembuatan tabel Huffman. Proses pembuatan animasi dilakukan dengan cara tweening menggunakan Adobe Flash Profesional. Berikut daftar animasi yang digunakan didalam aplikasi ini : Tabel 3.9. Daftar Materi Animasi No Nama File Informasi File Sumber 1 Fade in alphabet Format: shockwave, simbol: Movie Clip Dibuat sendiri 2 Penghitungan karakter Format: shockwave, simbol: Movie Clip Dibuat sendiri 3 Pohon Huffman Format: shockwave, simbol: Movie Clip Dibuat sendiri 4 Index bit 0 dan 1 Format: shockwave, simbol: Movie Clip Dibuat sendiri Audio Audio dapat membantu menyampaikan informasi dengan lebih efektif (misalnya: penggunaan suara latar atau kesan audio khusus). Membantu meningkatkan daya tarik terhadap sesuatu tayangan. Membantu meningkatkan daya tarik terhadap isi yang di presentasikan. Multimedia tidak akan lengkap jika tanpa suara. Aplikasi akan menggunakan beberapa efek suara yang digunakan pada tombol dan beberapa event tertentu sebagai penanda bahwa sebuah event sudah dikerjakan. File suara didapat dari sumber lain. Berikut daftar beberapa audio yang digunakan didalam aplikasi ini : Tabel Daftar Materi Audio No Nama File Informasi File Sumber 1 Mouse Over 1 Format: mp3, simbol: Sound 2 Mouse Over 2 Format: mp3, simbol: Sound

25 Skenario Pengujian Skenario yang akan dijelaskan meliputi proses penginstalan, fungsi-fungsi tombol dan pemrosesan data pada masing-masing halaman sesuai Tabel Tabel Skenario Pengujian Blackbox Skenario Pengujian Hasil yang diharapkan Instalasi Instalasi Aplikasi Aplikasi ini dapat di instal dan dijalankan dengan lancar pada sistem operasi Windows dan Macintosh. Materi Klik tombol Materi Pada saat pengguna menekan tombol materi maka sistem akan menampilkan halaman materi beserta dengan seluruh isi konten. Klik tombol Animasi Pada saat pengguna menekan tombol animasi maka sistem akan menjalankan animasi. Terdapat empat tombol animasi, semuanya memiliki fungsi yang sama Scroll halaman materi namun menjalankan animasi yang berbeda. Pada saat pengguna berada di halaman materi scrollbar harus dapat mengakomodasi kebutuhan pengguna untuk dapat melakukan scroll ke semua bagian materi dari awal sampai akhir. Simulator Klik tombol Simulator Pada saat pengguna menekan tombol simulator maka sistem akan menampilkan halaman simulator. Klik tombol Input Klik tab Data Input Klik tab Bit Ascii Klik tombol Kompres Pada saat pengguna menekan tombol input maka sistem harus dapat menampilkan popup menu exploler / finder sehingga pengguna dapat memilih file yang akan di input. Selanjutnya sistem harus dapat memproses data yang dimasukkan dan menampilkan informasi mengenai panjang karakter didalam file, ukuran file, isi string data masukan dan menampilkan tabel Huffman berdasarkan string masukkan. Pada saat pengguna menekan tombol tab data input maka sistem harus dapat menampilkan isi string data masukan. Pada saat pengguna menekan tombol tab bit Ascii maka sistem harus dapat menampilkan isi string data masukan dalam bentuk bilangan biner 8 bit. Pada saat pengguna menekan tombol kompres maka sistem harus dapat memproses data masukan dan menampilkan informasi mengenai ukuran file output, efisiensi proses kompresi dan menampilkan data output dalam bentuk bit Huffman.

26 50 Tabel (lanjutan) Skenario Pengujian Blackbox Klik tab Bit Huffman Pada saat pengguna menekan tombol bit Huffman maka sistem harus dapat menampilkan data output dalam bentuk bit Huffman. Klik tombol Simpan Pada saat pengguna menekan tombol simpan maka sistem harus kembali dapat menampilkan jendela exploler / finder sehingga pengguna dapat memilih direktori untuk menyimpan file output. Secara otomatis sistem harus dapat menampilkan nama default file output sesuai dengan nama file input yang ditambahkan string Output_ + nama file masukan. File harus dapat tersimpan dengan baik di dalam direktori dalam bentuk *.hff. Scroll tab dan tabel Pada saat pengguna berada di halaman simulator, scrollbar harus dapat mengakomodasi kebutuhan pengguna untuk dapat melakukan scroll ke semua bagian data dari awal sampai akhir baik pada tab input, bit Ascii, bit Huffman ataupun table Huffman. Logika Program Klik tombol Logika Program Pada saat pengguna menekan tombol logika program. Maka sistem harus dapat menampilkan halaman logika program beserta seluruh proses kompresi data yang dijalankan Scroll halaman Logika Program oleh sistem. Pada saat pengguna berada di halaman logika program, scrollbar harus dapat mengakomodasi kebutuhan pengguna untuk dapat melakukan scroll ke semua bagian data dari awal sampai akhir. Bantuan Klik tombol Bantuan Pada saat pengguna menekan tombol bantuan maka sistem harus dapat menampilkan halaman bantuan beserta seluruh informasi mengenai fungsi-fungsi yang dimiliki oleh aplikasi. Rollover tombol hit Rollout tombol hit Scroll halaman Bantuan Pada saat pengguna meletakkan kursor mouse diatas tombol hit maka sistem harus dapat menampilkan informasi mengenai tombol yang ditunjuk. Pada saat pengguna meletakkan kursor mouse diluar tombol hit maka sistem harus dapat mematikan informasi mengenai tombol yang ditunjuk. Pada saat pengguna berada di halaman simulator, scrollbar harus dapat mengakomodasi kebutuhan pengguna untuk dapat melakukan scroll ke semua bagian data dari awal sampai akhir baik pada tab input, bit Ascii, bit Huffman ataupun table Huffman.

27 51 Tabel (lanjutan) Skenario Pengujian Blackbox Akhir Klik tombol Keluar Pada saat pengguna menekan tombol keluar maka sistem harus dapat mematikan aplikasi secara keseluruhan dan menutup jendela aplikasi. Tabel Skenario Pengujian Efektifitas Simulator Skenario Pengujian Hasil yang diharapkan Simulator Hasil Kompresi Pengguna akan melakukan proses kompresi dengan menggunakan dua buah file masukan yang memiliki perbedaan banyaknya karakter yang sama didalam sebuah file. File yang dihasilkan setelah melalui tahap kompresi dan disimpan memiliki ukuran file yang lebih kecil dibandingkan dengan data awal atau file masukan. Kecepatan Pembuatan Pohon Huffman Pengguna akan menginput dua buah file dengan isi data yang berbeda. Data pertama memiliki jumlah karakter yang sedikit dan data kedua memiliki jumlah karakter yang banyak. Sehingga dapat diketahui waktu yang diperlukan oleh aplikasi untuk membangun sebuah pohon Huffman dan menampilkannya ke dalam tabel.

28 52

29