- PDF Download Gratis

Transkripsi

1 BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1. Implementasi Aplikasi Setelah membuat konsep, desain dan melakukan pengumpulan materi untuk pembuatan aplikasi simulasi pembelajaran ini, tahapan selanjutnya adalah melakukan implementasi dan pengujian aplikasi yang didukung dengan desain antarmuka serta pemrograman. Bagian implementasi ini akan meliputi persyaratan kebutuhan sistem untuk membangun aplikasi, proses pembuatan tampilan antarmuka beserta seluruh aset yang diperlukan dan diakhiri dengan proses pemrograman aplikasi menggunakan Flash Develop Proses Pembuatan Tampilan Antarmuka Proses pembuatan aplikasi akan dimulai dengan pembuatan seluruh aset grafik yang akan digunakan didalam aplikasi ini secara terpisah baik animasi, tombol, isi materi, tabel dan sebagainya yang kemudian akan disimpan ke dalam library terlebih dahulu sebelum digunakan. Setelah seluruh aset selesai dibuat maka penyusunan layer dan tata letak objek dapat dilakukan. Untuk pembutan tampilan antar muka digunakan Adobe Flash Profesional. Pertama-tama buat file *.fla baru dengan jenis file ActionScript 3.0 dengan pengaturan properti seperti pada Gambar 4.1: Gambar 4.1. Pengaturan File Baru 53

2 54 Pada bagian layer diambahkan 5 layer baru kemudian diberi nama seperti pada Gambar 4.2. Gambar 4.2. Penyusunan dan Penamaan Layer Utama Layer menu akan digunakan untuk penempatan tombol-tombol navigasi menu utama (Materi, Simulator, Logika Program dan Bantuan) serta sebuah tombol untuk menutup aplikasi. Masih dilayer menu buat 5 buah tombol seperti pada Tabel 4.1. Tabel 4.1. Daftar Tombol di Layer Menu No Gambar Nama instance Fungsi 1 content_btn Berpindah ke halaman Materi prototype_btn logic_btn help_btn exit_btn Berpindah ke halaman Simulator Berpindah ke halaman Logika Program Berpindah ke halaman Bantuan Menutup aplikasi Layer content akan digunakan untuk meletakkan halaman materi. Buat sebuah movie clip dengan nama instance window_content_mc kemudian didalam movie clip tersebut ditambahkan sebuah movie clip baru dengan nama

3 55 instance content_mc yang berfungsi sebagai tempat meletakkan semua teks materi beserta animasinya. Selanjutnya tambahkan sebuah objek masking beserta scrollbar dengan nama instance berturut-turut mask_mc dan scrollbar_mc. Untuk susunan layer didalam objek Window content dapat dilihat pada Gambar 4.3 sedangkan untuk tampilan Window content dapat dilihat pada Gambar 4.4. Gambar 4.3. Penyusunan dan Penamaan Layer pada Objek Window Content Gambar 4.4. Tampilan Window Content Layer logic akan digunakan untuk meletakkan halaman logika program. Buat sebuah movie clip dengan nama instance window_logic_mc kemudian didalam movie clip tersebut ditambahkan sebuah movie clip baru dengan nama instance content_mc didalam movie clip baru tambahkan sebuah dynamic text

4 56 yang berfungsi sebagai tempat untuk menampilkan semua proses yang dikerjakan oleh sistem. Selanjutnya tambahkan sebuah objek masking beserta scrollbar dengan nama instance berturut-turut mask_mc dan scrollbar_mc. Untuk susunan layer didalam objek Window logic dapat dilihat pada Gambar 4.5 sedangkan untuk tampilan Window logic dapat dilihat pada Gambar 4.6. Gambar 4.5. Penyusunan dan Penamaan Layer pada Objek Window Logic Gambar 4.6. Tampilan Window Logic Layer help akan digunakan untuk meletakkan halaman bantuan. Buat sebuah movie clip dengan nama instance window_help_mc kemudian didalam movie clip tersebut ditambahkan sebuah movie clip baru dengan nama instance content_mc yang berfungsi sebagai tempat untuk menampilkan semua

5 57 informasi yang dapat digunakan pengguna untuk memahami cara menggunakan aplikasi. Selanjutnya tambahkan sebuah objek masking beserta scrollbar dengan nama instance berturut-turut mask_mc dan scrollbar_mc. Untuk susunan layer didalam objek Window help dapat dilihat pada Gambar 4.7 sedangkan untuk tampilan Window help dapat dilihat pada Gambar 4.8. Gambar 4.7. Penyusunan dan Penamaan Layer pada Objek Window Help Gambar 4.8. Tampilan Window Help Layer simulator akan digunakan untuk meletakkan halaman simulator. Pada layer ini terdapat 3 bagian utama yaitu jendela informasi (info_mc), panel tab Data Input (datainput_mc) Gambar 4.10, panel tab Bit ASCII (dataascii_mc) Gambar 4.11, panel tab Bit Huffman (datahuffman_mc) Gambar 4.12 serta Tabel

6 58 Huffman (tablehuffman_mc) Gambar Dibagian jendela informasi terdapat 2 buah dynamic text untuk menampilkan informasi input dan output seperti pada Gambar 4.9. Kemudian terdapat juga 3 buah tombol yaitu Input, Kompres dan Simpan. Keterangan mengenai ketiga tombol diatas dapat dilihat pada Tabel 4.2. Terakhir pada layer background digunakan untuk menenpatkan beberapa properti untuk mendukung tampilan aplikasi seperti bingkai aplikasi. Gambar 4.9. Tampilan Jendela Informasi Tabel 4.2. Daftar tombol di jendela informasi No Gambar Nama instance Fungsi 1 browse_btn Memilih file input 2 3 compress_btn save_btn Menjalankan proses kompresi Menyimpan file hasil kompresi

7 59 Gambar Tampilan Tab Data Input Gambar Tampilan Tab Data Ascii Gambar Tampilan Tab Data Huffman

8 60 Gambar Tampilan Tabel Huffman Setelah semua objek yang diperlukan sudah selesai dibuat dan disusun kedalam stage maka langkah selanjutnya buat sebuah class utama dengan nama Compression.as yang akan mengontrol semua objek yang berada didalam stage. Selain itu untuk mempermudah pemrograman maka program dipecah menjadi beberapa class sesuai fungsinya. Pembagian class dapat dilihat pada Tabel 4.3 sedangkan untuk melihat kode program masing-masing class dapat dilihat pada halaman lampiran. Tabel 4.3. Daftar Class No Nama Keterangan 1 Compression.as Class utama untuk aplikasi kompresi data yang mengatur semua alur utama program. 2 AppConfiguration.as Berisi variabel data global yang dapat dipanggil oleh semua class. 3 Aplication.as Digunakan untuk mengontrol pembuatan class AppConfiguration.as sehingga hanya dapat di inisialisasi sekali saja. 4 CreateObject.as Digunakan untuk menampilkan data kedalam teks kedalam masing-masing objek yang berada di stage dan membuat tampilan background tabel Huffman dengan dua warna berbeda agar lebih mudah saat dibaca. 5 DataConverter.as Digunakan untuk mengubah sebuah jenis data ke jenis data yang lain misal : vector <int> menjadi vector <string>. 6 DataCount.as Digunakan untuk proses penghitungan karakter yang sama pada data inputan.

9 61 Tabel 4.3. (lanjutan) Daftar Class 7 DisplayCommand.as Digunakan untuk dapat menampilkan pesan trace kedalam stage 8 FileCompress.as Digunakan untuk mengatur seluruh proses kompresi data 9 Formula.as Berisi beberapa fungsi perhitungan yang berhubungan dengan penghitungan efisiensi kompresi 10 HuffmanCode.as Digunakan untuk proses pembuatan kode Huffman dari masing-masing karakter inputan melalui pohon Huffman 11 HuffmanTree.as Digunakan untuk proses pembentukan pohon Huffman 12 ScrollBar.as Digunakan untuk melakukan kontrol terhadap konten yang mengandung objek scrollbar seperti pada halaman materi 13 Decompress.as Class utama untuk aplikasi dekompresi data yang mengatur semua alur utama program. 14 FileDecompress.as Digunakan untuk mengatur seluruh proses dekompresi data Implementasi Coding Setelah semua aset selesai dibuat dan sudah disusun di stage seperti pada proses pembuatan tampilan antarmuka sebelumnya. Maka langkah selanjutnya adalah melakukan pemrograman atau implementasi coding ke dalam aplikasi. Seluruh proses coding dilakukan dengan menggunakan Flash Develop. Berikut merupakan penjelasan kode-kode utama dari aplikasi simulasi kompresi data. Untuk dapat mengambil data dari sebuah file maka kita dapat menggunakan class File Reference. Dengan menggunakan class ini aplikasi dapat melakukan proses browse file kedalam direktori, melakukan filter terhadap berbagai jenis data tertentu (lihat Kode 4.1) kemudian mengambil isi data yang diseleksi dan memasukkannya kedalam sebuah variabel untuk diproses lebih lanjut (lihat Kode 4.2). Selain itu dengan menggunakan class ini kita dapat mengetahui nama file yang diseleksi sehingga kita dapat menyimpannya untuk dapat digunakan sebagai default name file output.

10 62 Kode 4.1. Fungsi Browse File private function browsefile(e:mouseevent):void _filereference = new FileReference(); _filereference.addeventlistener(event.select, fileselected); _filereference.browse([new FileFilter("Document (*.txt)", "*.txt")]); Kode 4.2. Fungsi Selected File private function fileselected(e:event):void _filereference.addeventlistener(event.complete, fileloaded); _filename = _filereference.name; _filereference.load(); Karena data yang disimpan sebelumnya masih dalam bentuk byte array maka sebelum dapat dilakukan proses split harus diubah terlebih dahulu menjadi string. Data yang sudah berbentuk string dapat dipecah dengan menggunakan perintah split (lihat Kode 4.3). Kode 4.3. Pemecahan Data String _data = _doc.tostring(); _dataarr = _data.split(""); Data yang sudah dipecah kemudian dilakukan proses penghitungan karakter berdasarkan berapa kali karakter itu muncul (lihat Kode 4.4). Kode 4.4. Pemangilan Fungsi Penghitungan Jumlah Karakter // Build Vector Data "Symbol" and "Frequency" _getdata = DataCount.splitArray(_dataArr); Cara melakukan penghitungan karakter adalah dengan melakukan verifikasi terhadap tiap-tiap karakter yang ditunjuk apakah sudah terdapat didalam array? jika belum maka karakter dipush kedalam array. Dengan demikian akan didapatkan karakter dasar yang menyusun isi data tanpa adanya pengulangan karakter. Selanjutnya dapat dilakukan proses penghitungan jumlah total untuk

11 63 masing-masing karakter. Cara penghitungannya sama yaitu dengan looping, cukup melakukan verifikasi apakah karakter yang sedang ditunjuk sama dengan karakter yang terdapat didalam array? Jika sama maka tambahkan nilai 1 untuk karakter tersebut (lihat Kode 4.5). Kode 4.5. Fungsi Penghitungan Karakter public static function splitarray(ary:array):array for (i = 0; i < leng; i++) if (divided.indexof(ary[i]) == -1) divided.push(ary[i]); leng = divided.length; for (i = 0; i < leng; i++) numdivided[i] = countword(divided[i], ary); dataarray = [divided, numdivided]; return dataarray; private static function countword(str:string, ary:array):int for (i = 0; i < leng; i++) if (ary[i] == str) found++; return found; Setelah mendapatkan karakter dasar dan jumlahnya maka kita dapat mulai membangun pohon Huffman (lihat Kode 4.6). Kode 4.6. Pemangilan Fungsi Pembangunan Pohon Huffman // Build Huffman Tree _charcode = _huffmantree.createhuffmantree(_symbol, _frequency);

12 64 Cara membangun pohon Huffman dapat menggunakan array. Pertama buat terlebih dahulu simpul bebas dengan menggunakan array 2D dengan format [[karakter, jumlah], [karakter, jumlah], ]. Kemudian lakukan sorting dimulai dari karakter yang memiliki frekuensi paling sedikit. Selanjutnya gabungkan dua data array pertama. Beri index 0 untuk data pertama dan 1 untuk data kedua simpan kedalam array baru. Gabungkan karakter pertama dan kedua serta jumlahkan indexnya. Lakukan kembali sampai data didalam array hanya tersisa 1 buah (lihat Kode 4.7). Kode 4.7. Fungsi Pembangunan Pohon Huffman public function createhuffmantree(vec1:vector.<string>, vec2:vector.<int>):array _charbin = []; _symbol = vec1; _frequency = vec2; createfreeknot(); buildhuffmantree(_knotarray.sort(customshort)); return _charbin; private function createfreeknot() var i:int; var leng:int = _symbol.length; for (i = 0; i < leng; i++) _knotarray[i] = [_symbol[i], _frequency[i]]; private function buildhuffmantree(ary:array) var leng:int = ary.length; if (leng > 1) _charbin.push([ary[0][0], 0]); _charbin.push([ary[1][0], 1]); ary[0] = [(ary[0][0] + ary[1][0]), (ary[0][1] + ary[1][1])]; ary.splice(1, 1); _knotarray = ary; buildhuffmantree(_knotarray.sort(customshort));

13 65 Berdasarkan pohon Huffman yang sudah dibangun maka dapat ditentukan kode Huffman untuk masing-masing karakter (lihat Kode 4.8). Kode 4.8. Pemangilan Fungsi Pembentukan Kode Huffman // Build Huffman Code _huffmancode = HuffmanCode.huffmanCode(_symbol, _charcode); Kode 4.9. Fungsi Pembentukan Kode Huffman public static function huffmancode(symbol:vector.<string>, charbin:array):vector.<string> var huffmancode:vector.<string> = new Vector.<String>(); var leng:int = symbol.length; var i:int; for (i = 0; i < leng; i++) huffmancode[i] = buildprefix(symbol[i], charbin); return huffmancode; private static function buildprefix(str:string, ary:array):string var bin:string = ""; var found:boolean; var leng:int = ary.length; var arycontainer:array = new Array(); var i, j:int; for (i = leng - 1; i >= 0; i--) arycontainer = splitstring(ary[i][0]); for (j = 0; j < arycontainer.length; j++) if (arycontainer[j] == str) bin = bin + String(ary[i][1]); return bin; private static function splitstring(str:string):array var ary:array = new Array(); ary = str.split(""); return ary;

14 66 Proses pembentukan kode huffman dilakukan dengan cara menelusuri pohon Huffman yang berbentuk array 2D dimulai dari data paling belakang. Ambil karakter pertama dai daftar simbol. Kemudian lakukan verifikasi dari data array 2D. Apakah simbol tersebut ada didalam data array 2D? jika ada maka simpan index yang mengikuti data tersebut kedalam sebuah variabel. Lanjutkan verifikasi ke data berikutnya jika simbol kembali ada didalam data, tambahkan kembali index yang mengikuti data kedalam variable sebelumnya. Lakukan berulang kali sampai data didalam array 2D habis maka kita akan mendapatkan kode biner Huffman dari simbol tersebut (lihat Kode 4.9). Ulangi untuk simbol yang berikutnya. Setelah didapatkan tabel Huffman dari proses-proses sebelumnya maka kita dapat melakukan proses kompresi data. Sebelumnya isi file yang akan dikompresi diubah terlebih dahulu kedalam kode biner Huffman. Selanjutnya sebelum proses kompresi dilakukan maka cek terlebih dahulu variabel yang diperlukan apakah sama dengan null atau tidak? (lihat Kode 4.10). Kode Pemangilan Fungsi Proses Kompresi private function compressfile(e:mouseevent):void if(_originaldata!= null && _symbol!= null && _huffmancode!= null) _objprocess = FileCompress.compressProcess(DataConverter. vecstrtostring(_compressfiledisplay)); Kode Fungsi Kompresi public static function compressprocess(str:string):object var i:int; var obj:object = devidehuffmanbinary(str); var huffmanbinary:array = obj.arr; var insertnum:int = obj.num; var leng:int = huffmanbinary.length; var temp:string; var data:string = ""; for (i = 0; i < leng; i++) temp = DataConverter.binaryToAscii(uint(huffmanBinary[i])); data += temp; return num: insertnum, str: data;

15 67 Kumpulan kode bit Huffman hasil dari proses konversi simbol kita potong setiap delapan bit kemudian konverisi kembali ke dalam simbol Ascii maka akan didapatkan simbol tertentu tergantung dari nilai desimalnya. Setelah semua bit dikonversi ke dalam simbol Ascii (lihat Kode 4.12) maka kita akan mendapatkan string kompresi yang siap untuk disimpan (lihat Kode 4.11). Kode Fungsi Konversi Biner ke Ascii public static function binarytoascii(bin:uint):string var ascii:string; var dec:uint; dec = parseint(string(bin), 2); ascii = String.fromCharCode(dec); return ascii; Kode Fungsi Konversi Ascii ke Biner public static function asciitobinary(str:string):string var dec:uint; var bin:string; dec = (str).charcodeat(0); bin = uint(dec).tostring(2); return bin; Kode Fungsi Menyimpan Data private function savefile(e:mouseevent):void if(_insertnum) // Create String Data for Output File _strsymbol = DataConverter.vecStrToString(_symbol); _strhuffmancode = DataConverter.vecStrToString(_huffmanCode, "æ"); _savefile = String(_strSymbol + "Æ" + _strhuffmancode + "Æ" + _compressfilesave + "Æ" + _insertnum); _filereference = new FileReference; _filereference.save(_savefile, "Output_" + _filename.substr (0,_fileName.length - 4)+".hff");

16 68 Terakhir setelah sistem selesai melalukan proses kompresi. Susun string data yang akan disimpan terlebih dahulu (_strsymbol + "Æ" + _strhuffmancode + "Æ" + _compressfilesave + "Æ" + _insertnum) selanjutnya dengan menggunakan class FileReference aplikasi dapat melakukan proses menyimpan file kedalam direktori yang diinginkan pengguna (lihat Kode 4.14) Pengujian Pengujian perangkat lunak merupakan suatu investigasi yang dilakukan untuk mendapatkan informasi mengenai kualitas dari produk atau layanan yang sedang diuji. Pengujian perangkat lunak juga memberikan pandangan mengenai perangkat lunak secara objektif dan independen, yang bermanfaat dalam operasional bisnis untuk memahami tingkat risiko pada implementasinya. Teknikteknik pengujian mencakup, namun tidak terbatas pada, proses mengeksekusi suatu bagian program atau keseluruhan aplikasi dengan tujuan untuk menemukan bug perangkat lunak (kesalahan atau cacat lainnya). Dalam pengujian aplikasi ini menggunakan metode Blackbox. Pengujian perangkat lunak dapat dinyatakan sebagai proses validasi dan verifikasi bahwa sebuah program / aplikasi : 1. Memenuhi kebutuhan (requirement) yang mendasari perancangan dan pengembangan perangkat lunak tersebut; 2. Berjalan sesuai dengan yang diharapkan; 3. Dapat diterapkan menggunakan karakteristik yang sama; 4. Memenuhi kebutuhan semua pihak yang berkepentingan. Dalam pengujiannya aplikasi ini menggunakan spesifikasi sistem sebagai berikut : 1. Perangkat Keras (Hardware) a. imac dengan prosesor Intel quad-core i5 2.7 GHz, RAM 4 GB, VGA 512 MB. b. Laptop dengan prosesor Intel dual-core 2.5 GHz, RAM 2 GB, VGA shared 256 MB.

17 69 2. Perangkat Lunak (Software) a. OSX Mavericks 10.9 b. Adobe Flash Profesional c. OS Microsoft Windows 7 d. Flash Develop Hasil Pengujian Dari hasil skenario pengujian blackbox yang dilakukan dapat diperoleh hasil pengujian seperti pada Tabel 4.4. Tabel 4.4. Hasil Pengujian Blackbox Skenario Pengujian Hasil 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 Klik tab Bit Huffman Klik tombol Simpan Scroll tab dan table Logika Klik tombol Logika Program Program Scroll halaman Logika Program Bantuan Klik tombol Bantuan Rollover tombol hit Rollout tombol hit Scroll halaman Bantuan Akhir Klik tombol Keluar

18 70 Sedangkan untuk hasil pengujian efektifitas simulator sebagai berikut : Gambar File pengujian 1 Gambar File pengujian 2 Gambar Output File 1 Gambar Output File 2

19 71 Pada Gambar 4.14 file berisi data karakter A, a, B dan B (4 buah karakter berbeda) dengan ukuran file 80 byte kemudian setelah dilakukan proses kompresi ukuran file berubah menjadi 54 byte lihat Gambar Sedangkan pada Gambar 4.15 file berisi data karakter A J dan a j (20 buah karakter berbeda) dengan ukuran file sama yaitu 80 byte namun setelah dilakukan proses kompresi ukuran file berubah menjadi 218 byte lihat Gambar Gambar Data File pengujian kecepatan pembuatan pohon Huffman 1 Gambar Data File pengujian kecepatan pembuatan pohon Huffman 2

20 72 Gambar Waktu yang diperlukan file 1 untuk membuat pohon Huffman. Gambar Waktu yang diperlukan file 2 untuk membuat pohon Huffman. Pada Gambar 4.18 data berisi karakter A Z dan a z dengan jumlah karakter 52 buah memerlukan waktu 0.6 detik untuk membangun pohon Huffman dan menampilkannya kedalam tabel lihat Gambar Sedangkan pada Gambar 4.19 berisi kombinasi karakter yang sama dengan file pertama namun dengan jumlah karakter mencapai 1560 buah memerlukan waktu 0.71 detik untuk membangun pohon Huffman dan menampilkannya kedalam tabel lihat Gambar Analisis Hasil Pengujian Setelah selesai melakukan pengujian terhadap perangkat lunak yang diuji, maka berdasarkan hasil pengujian dapat disimpulkan bahwa : 1. Proses instalasi aplikasi dapat dijalankan dengan lancar baik di sistem operasi desktop Windows maupun Machintosh. Diperlukan Adobe AIR untuk dapat melakukan instalasi. 2. Saat menekan tombol materi, sistem dapat berpindah ke halaman materi dengan lancar. Semua animasi dapat dijalankan dengan menekan tombol play di masing-masing video. Fungsi scrollbar juga dapat digunakan dengan sempurna untuk menggulir keseluruhan halaman materi yang ada. 3. Saat menekan tombol simulator, sistem dapat berpindah ke halaman simulator dengan lancar. Proses penginputan file dapat berjalan dan sistem dapat memproses data kemudian menampilkan semua hasilnya kedalam table-tabel

21 73 yang ada. Proses pengompresian data dan penyimpanan file hasil juga dapat dilakukan. Untuk file masukan yang berukuran besar diperlukan waktu yang lebih lama. 4. Tombol logika program juga dapat digunakan dengan baik. Seluruh proses utama saat pengompresian data dapat ditampilkan kedalam jendela logika program yang dilengkapi juga dengan panel scrollbar. 5. Fungsi perpindahan ke halaman bantuan juga dapat dijalankan. Seluruh informasi mengenai fungsi-fungsi tombol dapat ditampilkan dengan baik untuk membantu pengguna dalam menggunakan aplikasi ini. 6. Saat tombol exit ditekan aplikasi dapat ditutup dengan lancar. 7. Semakin banyak karakter yang sama didalam file masukan maka hasil kompresi lebih efektif, sebaliknya file akhir berukuran lebih besar apabila banyak karakter yang berbeda didalam file masukan. 8. Semakin besar file masukan maka proses pembentukan pohon Huffman memerlukan waktu yang lebih lama.

22 74

23