No title

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. 3.1.1. 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

http://digilib.mercubuana.ac.id/

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


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


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.


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.


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.


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. 3.1.2. 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.


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.


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.


34

3.2.

Desain Pada bagian ini akan dilakukan desain perancangan aplikasi yang terdiri

dari perancangan activity diagram, sequence diagram, peta navigasi, storyboard dan desain tata letak. 3.2.1 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.


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.


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.


37

3.2.2 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


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


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


40

3.2.3 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 3.10. Peta Navigasi 3.2.4 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

1

Utama

2

Materi

Konten Teks: Judul Aplikasi dan Judul Halaman Tombol: Menu Utama(Materi, Simulasi, Logika Program dan Bantuan) Audio: Jingle Pembukaan Video: Animasi Pembukaan Gambar: Latar belakang 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

Keterangan 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.


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

5

Bantuan

Teks: Judul Halaman dan urutan langkahlangkah yang dilakukan sistem saat pengguna menjalankan simulator. Tombol : Menu Utama Gambar: Latar belakang aplikasi 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.

3.2.5 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.


42

Gambar 3.11. 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.


43

Gambar 3.12. Halaman Simulasi Berikut merupakan keterangan desain tata letak untuk Gambar 3.13: 1.


2.


3.


4.


5.


6.


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.


44

16. 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 3.13. Halaman Logika Program Berikut merupakan keterangan desain tata letak untuk Gambar 3.14: 1.


2.


3.


4.

Tombol Logika Program digunakan untuk berpindah ke halaman logika programBantuan

5.


6.



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 3.14. Halaman Bantuan Berikut merupakan keterangan desain tata letak untuk Gambar 3.15 1.


2.


3.


4.


5.


6.


7.

Isi Informasi Bantuan berisi semua informasi mengenai tampilan antarmuka aplikasi.

8.

Scrollbar Informasi Bantuan digunakan apabila informasi yang akan ditampilkan melebihi luas halaman.


46

3.3.

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. 3.3.1 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

Arial, Regular, 13 poin

Dibuat sendiri

Huffman 4

Keterangan objek

Arial, Regular, 13 poin

Dibuat sendiri

5

Penjelasan bantuan

Arial, Bold dan Regular, 13 poin

Dibuat sendiri

3.3.2 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


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


Dibuat sendiri

5

Tombol materi


Dibuat sendiri

6

Tombol simulator


Dibuat sendiri

7

Tombol logika program


Dibuat sendiri

8

Tombol bantuan


Dibuat sendiri

9

Tombol input


Dibuat sendiri

10

Tombol kompres


Dibuat sendiri

11

Tombol simpan


Dibuat sendiri

12

Tombol data input


Dibuat sendiri

13

Tombol bit ASCII


Dibuat sendiri

14

Tombol bit Huffman


Dibuat sendiri

15

Tombol hit bantuan


Dibuat sendiri

16

Alphabet MERCUBUANA

Format: vektor, simbol: Movie Clip

Dibuat sendiri

17

Scrollbar


Dibuat sendiri

18

Window materi


Dibuat sendiri

19

Window informasi


Dibuat sendiri

20

Tab data input


Dibuat sendiri

21

Tab bit ASCII


Dibuat sendiri

22

Tab bit Huffman


Dibuat sendiri

23

Table Huffman


Dibuat sendiri

24

Window logika program


Dibuat sendiri

25

Window bantuan


Dibuat sendiri

26

Image halaman materi

Format: png, simbol: Bitmap

Screenshot

27

Image halaman simulator

Format: png, simbol: Bitmap

Screenshot


48

3.3.3 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


Dibuat sendiri

3

Pohon Huffman


Dibuat sendiri

4

Index bit 0 dan 1


Dibuat sendiri

3.3.4 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 3.10. Daftar Materi Audio No Nama File

Informasi File

Sumber

1

Mouse Over 1

Format: mp3, simbol: Sound

www.freesfx.com

2

Mouse Over 2

Format: mp3, simbol: Sound

www.freesfx.com


49

3.4.

Skenario Pengujian Skenario yang akan dijelaskan meliputi proses penginstalan, fungsi-fungsi

tombol dan pemrosesan data pada masing-masing halaman sesuai Tabel 3.11. Tabel 3.11. Skenario Pengujian Blackbox Skenario

Pengujian

Instalasi

Instalasi Aplikasi

Materi

Klik tombol Materi Klik tombol Animasi

Scroll halaman materi

Simulator

Klik tombol Simulator Klik tombol Input

Klik tab Data Input Klik tab Bit Ascii

Klik tombol Kompres

Hasil yang diharapkan Aplikasi ini dapat di instal dan dijalankan dengan lancar pada sistem operasi Windows dan Macintosh. Pada saat pengguna menekan tombol materi maka sistem akan menampilkan halaman materi beserta dengan seluruh isi konten. Pada saat pengguna menekan tombol animasi maka sistem akan menjalankan animasi. Terdapat empat tombol animasi, semuanya memiliki fungsi yang sama 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. Pada saat pengguna menekan tombol simulator maka sistem akan menampilkan halaman simulator. 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.


50

Tabel 3.11. (lanjutan) Skenario Pengujian Blackbox Klik tab Bit Huffman

Klik tombol Simpan

Scroll tab dan tabel

Logika Program

Klik tombol Logika Program

Scroll halaman Logika Program

Bantuan

Klik tombol Bantuan

Rollover tombol hit

Rollout tombol hit

Scroll halaman Bantuan

Pada saat pengguna menekan tombol bit Huffman maka sistem harus dapat menampilkan data output dalam bentuk bit Huffman. 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. 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. Pada saat pengguna menekan tombol logika program. Maka sistem harus dapat menampilkan halaman logika program beserta seluruh proses kompresi data yang dijalankan 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. Pada saat pengguna menekan tombol bantuan maka sistem harus dapat menampilkan halaman bantuan beserta seluruh informasi mengenai fungsi-fungsi yang dimiliki oleh aplikasi. 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.


51

Tabel 3.11. (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 3.12. Skenario Pengujian Efektifitas Simulator Skenario Pengujian Hasil yang diharapkan Simulator

Hasil Kompresi

Kecepatan Pembuatan Pohon Huffman

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. 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.


52



No title

Recommend Documents