Side Info
ANALISIS DAN PERANCANGAN
3.2 Perancangan Aplikasi
Perancangan aplikasi kompresi audio dengan algoritma Shannon-Fano ini merupakan tahap dalam mengimplementasikan gambaran aplikasi yang akan dibangun dan akan mempermudah dalam pengerjaan aplikasi. Pada tahap perancangan aplikasi akan digunakan Unified Modelling Language (UML) yang berarti bahasa pemodelan standar, yang digunakan sebagai bahasa pemodelan untuk visualisasi dan rancangan aplikasi. Model UML yang akan digunakan untuk aplikasi ini adalah usecase diagram activity diagram dan sequence diagram.
3.2.1 Usecase Diagram
Usecase diagram menggambarkan fungsi tertentu dalam suatu sistem berupa komponen, kejadian atau kelas. Usecase diagram dapat juga diartikan sebagai urutan langkah langkah yang secara tindakan saling terkait (skenario), baik terotomatisasi maupun secara manual, untuk tujuan melengkapi satu tugas bisnis tunggal (Whitten, 2004). Komponen komponen untuk membentuk usecase diagram adalah :
1. Aktor, menggambarkan pihak pihak yang berperan dalam sistem. 2. Usecase, aktivitas/sarana yang disiapkan oleh bisnis/sistem. 3. Hubungan (link), aktor mana saja yang terlibat dalam usecase ini.
Berikut ini adalah usecase diagram untuk aplikasi kompresi pada audio dalam Gambar 3.2. Pengguna Sistem Pilih Kompresi Pilih Dekompresi Pilih Play
Gambar 3.2 Usecase Diagram Aplikasi Kompresi Audio
Berdasarkan usecase diagram pada gambar tersebut, dokumentasi naratif pada proses kompresi audio yang terdapat dalam usecase diagram di atas dapat dilihat pada Tabel 3.1.
Tabel 3.1 Tabel Dokumentasi Naratif Usecase Pilih Kompresi
Dokumentasi naratif pada aplikasi kompresi audio dengan algoritma Shannon-Fano untuk usecase pilih dekompresi terdapat dalam Tabel 3.2.
Tabel 3.2 Tabel Dokumentasi Naratif Usecase Pilih Dekompresi Tipe Usecase Penjelasan
Nama Usecase Pilih Dekompresi
Aktor Pengguna
Brief Description
Usecase ini menggambarkan pengguna untuk memilih dekompresi audio
Pre-condition Pengguna masuk ke menu utama aplikasi kompresi audio Basic Flow -Pengguna masuk ke halaman dekompresi kemudian
memasukkan audio yang akan didekompresi.
- Sistem akan mengecek audio yang telah dimasukkan.
- Pengguna memilih dekompresi untuk melakukan dekompresi. - Sistem melakukan dekompresi dengan algoritma Shannon-Fano. Usecase ini berakhir ketika sistem telah selesai menampilkan hasil proses dekompresi.
Alternate Flow -
Post-condition Audio telah terdekompresi dengan algoritma Shannon-Fano Tipe Usecase Penjelasan
Nama Usecase Pilih Kompresi
Aktor Pengguna
Brief Description Usecase ini menggambarkan pengguna untuk memilih kompresi audio.
Pre-condition Pengguna masuk ke menu aplikasi kompresi audio
Basic Flow - Pengguna masuk ke halaman kompresi kemudian memasukkan audio mp3.
- Sistem akan mengecek audio yang dimasukkan. - Pengguna memilih kompresi untuk melakukan proses kompresi.
- Sistem melakukan kompresi dengan algoritma Shannon-Fano. Usecase ini berakhir ketika sistem telah selesai menampilkan hasil proses kompresi.
Alternate Flow -
Pada usecase pilih play dibuat dokumentasi naratif agar pengguna paham dengan sistem yang dibangun dan menjelaskan kegunaan usecase pilih play yang dibangun pada aplikasi kompresi audio dengan algoritma Shannon-Fano. Usecase pilih play dijelaskan dalam Tabel 3.3.
Tabel 3.3 Tabel Dokumentasi Naratif Usecase Pilih Play
Tipe Usecase Penjelasan Nama Usecase Pilih play
Aktor Pengguna
Brief Description Usecase ini menggambarkan pengguna memilih untuk play audio.
Pre-condition Pengguna masuk ke menu utama aplikasi kompresi audio. Basic Flow - Pengguna masuk ke halaman play kemudian
memasukkan audio yang akan dimainkan.
- Sistem akan mengecek audio yang dimasukkan. - Pengguna memilih play untuk memainkan audio yang telah rdimasukkan.
- Sistem akan memainkan audio yang telah dimasukkan, Usecase ini berakhir ketika sistem telah selesai memutar audio.
Alternate Flow -
Post-condition File audio terkompresi dimainkan.
3.2.2 Activity Diagram
Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir.
Sebuah aktivitas dapat direalisasikan oleh satu usecase atau lebih. Activity diagram menggambarkan proses yang berjalan, sementara usecase menggambarkan bagaimana aktor menggunakan sistem untuk melakukan aktivitas. Pada Gambar 3.3 berikut ini akan mengilustrasikan activity diagram menggunakan menu utama.
Sistem Pengguna
Membuka Aplikasi
Pilih Kompresi Pilih Dekompresi Pilih Play Pilih Bantuan
Menampilkan main menu
Tampilan menu dipilih
Gambar 3.3 ActivityDiagram Menu Utama
Activity diagram untuk pilihan kompresi menjelaskan aliran aktifitas dalam proses kompresi dimulai dari pengguna memasukkan audio pada halaman kompresi dan sistem akan menunjukan hasil kompresi. Gambar 3.4 menunjukkan activity diagram submenu kompresi.
Sistem Pengguna
Menampilkan submenu kompresi
Menampilkan hasil kompresi Pilih audio
Menampilkan verifikasi audio
Proses kompresi Pilih kompresi
Untuk activity diagram pilihan dekompresi dapat dilihat pada Gambar 3.5 submenu dekompresi berikut. Activity diagram untuk pilihan dekompresi ini juga menjelaskan aliran aktifitas dalam melakukan aktivitas dekompresi yang dimulai dari pengguna memasukkan audio pada halaman dekompresi sampai sistem menunjukan hasil dekompresi.
Pengguna
Menampilkan submenu dekompresi
Menampilkan hasil dekompresi Pilih audio
Menampilkan verifikasi audio Pilih tombol dekompresi
Sistem
Proses dekompresi
Gambar 3.5 ActivityDiagram Submenu Dekompresi
Selain activity diagram kompresi dan dekompresi ada juga activity diagram untuk play. Untuk activity diagram pilihan play dapat dilihat pada Gambar 3.6. Activity diagram untuk pilihan play menjelaskan aliran aktifitas dalam melakukan aktivitas memainkan audio yang dimulai dari pengguna memasukkan audio pada halaman play sampai sistem memutar hasil audio tersebut.
Pengguna Sistem
Pilih audio
Pilih play Pilih pause Pilih stop
Menampilkan submenu play
Verifikasi audio
3.2.3 Sequence Diagram
Sequence diagram digunakan untuk menggambarkan interaksi antar objek di dalam dan di sekitar sistem. Interaksi tersebut berupa pesan yang digambarkan terhadap waktu. Sequence diagram terdiri dari dimensi horizontal (objek-objek) dan dimensi vertikal (waktu). Pada Gambar 3.7 berikut ini merupakan sequence diagram untuk kompresi audio akan memperlihatkan tahap demi tahap urutan kejadian proses yang terjadi. :Halaman Kompresi (Boundary) :Cek Audio (Process) :Hitung Frekuensi Sampel (Process) :Baca Sampel (Process) :Pengurutan Frekuensi sampel (Process) :Pohon Shannon-Fano (Process) :Ganti nilai Sampel (Process) :Hasil file Kompresi (Process) 2.File Mp3 7.Nilai dan Frekuensi
yang dihitung 8.Kode tiap sampel 9. Kode Shannon-Fano Pengguna 4. Pilih Kompres 10.Audio terkompres 5.Nilai Sampel 11.Informasi hasil Kompres 6.Frekuensi sampel 3.Informasi Audio 1.Masukkan Audio
Gambar 3.7 Sequence Diagram Kompresi Audio
Untuk sequence diagram dekompresi audio dapat dilihat pada gambar 3.8. Pada sequence diagram dekompresi audio ini terdapat pengguna dan 5 objek, yaitu halamn dekompresi, cek audio, pencocokan kode Shannon-Fano, penggantian nilai sampel, dan hasil file dekompresi. Pertama pengguna akan memasukkan file audio pada halaman dekompresi dan akan dilakukan pengecekan audio. Setelah dilakukan pengecekan maka akan tampil informasi mengenai audio, kemudian pengguna memilih dekompresi dan sistem akan melakukan dekompresi dengan mencocokkan kode Shannon-Fano dan hasil nilai pencocokan akan diganti menjadi nilai sampel. Setelah nilai sampel diganti maka audio akan terdekompresi dan informasi hasil dekompresi akan dikirim.
:Halaman Dekompresi (Process) :Cek Audio (Process) :Ganti Nilai Sampel (Process) :Pencocokan Kode Shannon (Process) Hasil File Dekompresi (Process) 7.Audio ter dekompresi Pengguna 5.Kode Shannon 8.Informasi hasil dekompresi 6.Sampel Hasil Pencocokan 3.Informasi Audio 1.Masukkan Audio 2. File Wav 4. Pilih Dekompresi
Gambar 3.8 SequenceDiagram Dekompresi Audio
Pada sequence diagram play audio terdapat pengguna dan 3 objek, yaitu halaman play, cek audio, objek play. Pertama pengguna akan memasukkan file audio yang dipilih pada halaman play dan akan dilakukan pengecekan audio. Setelah dilakukan pengecekan audio maka akan tampil informasi mengenai audio, kemudian pengguna memilih play dan sistem akan melakukan pemutaran audio dan mengirimkannya ke pengguna. Untuk sequence diagram play audio pada aplikasi ini dapat dilihat pada Gambar 3.9.
:Halaman Play (Boundary) :Cek Audio (Process) :Play (Process) 2.File Audio Pengguna
4. Pilih Play 5.Get
Header Audio 3.Informasi Audio 1.Masukkan Audio 6.Audio dimainkan
Gambar 3.9 SequenceDiagramPlay Audio 3.3 Perancangan Antarmuka
Perancangan antarmuka dibuat agar tampilan aplikasi lebih user friendly sehingga mudah dipahami dan digunakan oleh pengguna. Perancangan antarmuka aplikasi kompresi audio ini terdiri dari beberapa tampilan, yaitu menu utama, halaman untuk proses kompresi, halaman untuk proses dekompresi, play audio dan bantuan. Berikut ini adalah rancangan menu dan sub-sub menu antarmuka aplikasi.
3.3.1 Menu Utama
Rancangan menu utama merupakan tampilan pertama yang muncul saat aplikasi dijalankan, dapat dilihat pada Gambar 3.10. Setelah menu utama dijalankan, selanjutnya akan ada empat tampilan sub menu seperti :
a. sub menu kompresi, b. sub menu dekompresi, c. sub menu play dan d. sub menu bantuan.
x
Aplikasi Kompresi MP3
1
Ok
2
Gambar 3.10 Rancangan Antarmuka Menu Utama
Keterangan :
1. Label yang menampilkan judul aplikasi. 2. Tombol untuk masuk ke halaman sub menu.
3.3.2 Sub Menu Kompresi
Rancangan pada sub menu kompresi akan menampilkan halaman untuk melakukan proses kompresi audio. Rancangan sub menu kompresi dapat dilihat pada Gambar 3.11.
Kompresi Dekompresi Play Bantuan
Buka
Reset Kompres
Informasi Audio
x Aplikasi Kompresi Audio
1 2 3 4 5 6 7 Nama Path Ukuran Awal File Hasil Ukuran Akhir Rasio Lama Proses
Gambar 3.11 Rancangan Antarmuka Sub Menu Kompresi
Keterangan :
1. Halaman sub menu Kompresi untuk melakukan kompresi.
2. Tombol untuk membuka dan memilih file audio yang ingin dikompresi. 3. Text box untuk menampilkan audio yang telah dipilih.
4. Text box untuk menampilkan informasi tentang audio yang dipilih berupa nama audio, lokasi, ukuran awal, lokasi file setelah dikompres, ukuran akhir setelah dikompresi, rasio kompresi dan waktu yang dibutukan saat proses kompresi. 5. Tombol kompresi untuk memulai proses kompresi.
6. Tombol reset untuk mengulang ke pengaturan semula.
7. Textbox untuk menampilkan detail format audio yang ingin dikompres.
3.3.3 Sub Menu Dekompresi
Rancangan sub menu dekompresi merupakan halaman untuk melakukan proses dekompresi audio. Rancangan untuk sub menu dekompresi dapat dilihat pada Gambar 3.12.
Kompresi Dekompresi Play Bantuan Buka Reset Dekompres Informasi Audio x Aplikasi Kompresi Audio
1 2 3 4 5 6 7 Nama Path Ukuran Awal File Hasil Ukuran Akhir Rasio
Gambar 3.12 Rancangan Antarmuka Sub Menu Dekompresi
Keterangan :
1. Halaman sub menu Dekompresi untuk melakukan dekompresi atau mengembalikan audio ke bentuk semula.
2. Tombol untuk membuka dan memilih file audio yang ingin didekompresi. 3. Text box untuk menampilkan audio yang telah dipilih.
4. Text box untuk menampilkan informasi tentang audio yang dipilih berupa nama audio, lokasi audio, ukuran awal, lokasi file hasil audio yang telah didekompresi, ukuran akhir setelah didekompresi dan waktu yang dibutukan saat proses dekompresi.
5. Tombol dekompres untuk memulai proses dekompresi. 6. Tombol reset untuk mengulang ke pengaturan semula.
7. Textbox untuk menampilkan detail format audio yang ingin didekompresi.
3.3.4 Sub Menu Play
Rancangan sub menu play merupakan halaman aplikasi untuk memainkan audio yang telah di kompresi. Pada sub menu play terdiri tombol play, pause dan tombol keluar. Rancangan sub menu play dapat dilihat pada Gambar 3.13.
7 Kompresi Dekompresi Play Bantuan
Buka
Stop Play
Informasi Audio
x
Aplikasi Kompresi Audio
1 2 3 4 5 Nama Path Pause 7 6
Gambar 3.13 Rancangan Antarmuka Sub Menu Play
Keterangan :
1. Halaman sub menu Play untuk memainkan atau mendengarkan audio hasil kompresi.
2. Tombol untuk membuka dan memilih file audio yang ingin dimainkan atau didengarkan.
3. Text box untuk menampilkan audio yang telah dipilih.
4. Text box untuk menampilkan informasi tentang audio yang dipilih berupa nama file audio dan lokasi tempat audio.
5. Tombol play untuk memainkan audio.
6. Tombol pause untuk memberhentikan sejenak audio yang dimainkan. 7. Tombol stop untuk menghentikan audio.
3.3.5 Sub Menu Bantuan
Rancangan sub menu bantuan merupakan halaman panduan bagaimana cara menjalankan aplikasi. Sub menu bantuan ini ditujukan untuk pengguna agar mudah dalam menjalankan aplikasi. Rancangan sub menu bantuan dapat diliihat pada Gambar 3.14.
7
Kompresi Dekompresi Play Bantuan
x Aplikasi Kompresi Audio
1
Gambar 3.14 Rancangan Antarmuka Sub Menu Bantuan
Keterangan :
Halaman sub menu Bantuan untuk disediakan bagi penggguna yang belum mengerti cara pemakaian aplikasi.
BAB 4