T1 672004059 BAB III
Bab 3
Metode dan Rancangan Sistem
3.1
Metode Pengembangan Sistem
Pembahasan Metode Prototype
Metode penelitian yang digunakan pada pembuatan aplikasi ini adalah model prototype. Model prototype merupakan suatu teknik untuk mengumpulkan informasi tertentu mengenai kebutuhan-kebutuhan informasi pengguna secara cepat. Dengan metode prototyping ini pengembang dan pelanggan dapat saling berinteraksi selama proses pembuatan sistem. Secara lengkap, alur model prototype akan digambarkan seperti pada Gambar 3.1.
Gambar 3.1 Prototype Model (Pressman, 2001).
Gambar 3.1 merupakan gambaran tahapan umum dari prototype model. Berikut adalah penjelasan dari tahap – tahap prototype model.
(2)
3.1.1 Pengumpulan Kebutuhan (Requirements)
Pada tahap requirements, user mencari dan mengumpulkan data yang dibutuhkan sistem yang nantinya digunakan untuk aplikasi tersebut. Hal ini sangat dibutuhkan karena aplikasi harus dapat berinteraksi dengan perangkat – perangkat lain seperti hardware, database serta user. Keuntungan dari model prototype ini, yaitu kesalahan yang mungkin akan terjadi dapat dideteksi lebih dini jadi aplikasi yang dihasilkan dapat sesuai dengan yang diinginkan.
Guna mendapatkan data yang dibutuhkan untuk mendukung dalam merancang aplikasi tersebut menggunakan beberapa metode, antara lain :
1. Metode Observasi
Metode Observasi dilakukan dengan melakukan pencarian di internet. Berdasarkan pencarian di internet sudah ada situs-situs yang menyediakan audio player yang memiliki library, playlist tapi belum ada yang memfasilitasi dengan drag and Drop dalam upload serta memutar lagu. Seperti contoh Wimpy [11]
Berdasarkan penelitian diatas maka peneliti membuat audio player yang menggunakan teknologi HTML5 dengan memfasilitasi tabel library, tabel playlist serta drag and drop dalam melakukan upload serta memilih lagu yang akan diputar. 2. Metode Referensi
Metode referensi yaitu melakukan pembelajaran melalui artikel dan buku-buku yang membahas antara lain :
- Teknologi Browser HTML5, yaitu JavaScript, XML khususnya untuk membangun aplikasi audio player.
(3)
- Teknologi web development, yaitu .Net Framework 4.0 dengan bahasa C# . Teknologi ini untuk membangun aplikasi web yang memiliki fasilitas audio player. Software yang digunakan yaitu Miscrosoft Visual Web Developer 2010 Express.
Pengumpulan kebutuhan yang dilakukan juga berkaitan dengan kebutuhan software dan hardware yang digunakan dalam membangun aplikasi.
Spesifikasi software yang dipakai adalah :
- Microsoft Visual Web Developer 2010 Express
- Rational Rose Enterprise Edition
- Internet Information System (IIS)
- Google Chrome
Spesifikasi hardware yang dipakai saat pembuatan aplikasi adalah :
- Processor Intel Core 2 Duo 2.2 Gb
- RAM 2 GB
- Harddisk 320 GB
3.1.2 Rancangan (Design)
Melakukan tahap perancangan sistem dan perangkat lunak dengan menggunakan data dari analisa kebutuhan yang telah dilakukan. Perancangan aplikasi ini disajikan dalam bentuk UML (Unified Modeling Language). UML (Unified Modeling Language) disebut sebagai bahasa pemodelan bukan metode dan disebut juga sebagai bahasa untuk menggambarkan sistem. UML (Unified Modeling Language) akan digambarkan dengan menggunakan bagan alir sistem yang menunjukkan bagaimana sistem secara fisik
(4)
nantinya akan ditempatkan dan diterapkan sehingga dapat menunjukkan arah aliran data suatu proses.
3.1.3 Evaluasi Prototype
Setelah prototype selesai dirancang maka tahap selanjutnya adalah melakukan evaluasi prototype, pada tahap ini user mengevaluasi prototype yang telah dibuat. Evaluasi ini akan digunakan untuk memperjelas kebutuhan program. Jika tujuan umum yang telah dibuat di tahap paling awal belum tercapai, maka proses perbaikan dimulai kembali dari tahap awal dan dilanjutkan ke tahap berikutnya. Proses ini berakhir setelah tujuan umum telah tercapai.
3.2
Rancangan Sistem
Aplikasi ini ditujukan guna membantu mahasiswa yang akan mengerjakan tugas akhir. Sistem ini dirancang untuk mendiagnosa calon dosen pembimbing yang sesuai dengan judul tugas akhir mahasiswa. Perancangan sistem menggunakan Unified Modelling Language (UML).
3.2.1 Use CaseDiagram
Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan gambaran fungsi-fungsi pada sistem tersebut.
(5)
Pada Gambar 3.2, use dan fungsi masing-masing aktor pengguna audio player.
Gambar 3.2 Use C
Berdasarkan use case dijelaskan secara singkat ma sebagai berikut :
1. Use case upload file, use untuk menambah lagu pada 2. Use case make library, us
lagu yang sudah di upload 3. Use case make playlist, us lagu yang ingin diputar da
use case diagram menjelaskan peranan ktor, yaitu user yang berperan sebagai
Case DiagramAudio Player
ase diagram pada Gambar 3.2, dapat masing-masing fungsi dari use case
use case berfungsi menampilkan pilihan u pada tabel library.
use case berfungsi menampilkan daftar oad.
use case berfungsi menampilkan daftar dari library.
(6)
4. Use case play music, use case berfungsi menampilkan lagu yang sedang di putar.
5. Use case cetak album, use case berfungsi menampilkan cetak album.
6. Use case cetak singer, use case berfungsi menampilkan cetak singer.
7. Use case drag and drop file to area upload, use case berfungsi untuk drag and drop file lagu dari windows explorer yang akan di upload.
8. Use case pilih berkas, use case berfungsi mencari file lagu pada windows explorer yang akan di upload.
9. Use case drag and drop to file playlist, use case berfungsi drag and drop file lagu yang akan di putar.
10. Use case drag and drop to library, use case berfungsi drag and drop file lagu yang akan di upload.
11. Use case add selected item to playlist, use case berfungsi menampilkan lagu yang akan diputar.
12. Use case sync with server, use case berfungsi menampilkan pilihan untuk menambah lagu pada tabel audio library.
13. Use case clear playlist, use case berfungsi menamilkan pilihan untuk menghapus lagu pada tabel playlist
14. Use case remove selected, use case berfungsi untuk menghapus daftar lagu pada tabel audio library.
15. Use case pause, use case berfungsi menampilkan pilihan untuk pause lagu yang sedang diputar.
16. Use case play, use case berfungsi menampilkan pilihan untuk memulai memutar lagu.
(7)
17. Use case stop, use case berfungsi untuk stop lagu yang sedang diputar.
18. Use case next, use case berfungsi menampilkan pilihan untuk memutar lagu selanjutnya yang akan diputar.
19. Use case prev, use case berfungsi menampilkan pilihan untuk memutar kembali lagu yang telah diputar.
20. Use case volume, use case berfungsi menampilkan pilihan untuk memperbesar atau memperkecil suara.
3.2.2Activity Diagram
Sebuah aktivitas dapat direalisasikan oleh satu use case atau lebih. Aktivitas menggambarkan proses yang berjalan, sementara use case menggambarkan bagaimana aktor menggunakan sistem untuk melakukan aktivitas.
a. Activity Diagram Uploaddata
Activity Diagram Upload data pada Gambar 3.3 menjelaskan proses aktivitas user yang diawali dengan masuk ke dalam Player5 Home page, kemudian user dapat memilih cara upload. Yaitu dengan 2 cara pilih berkas atau Drag and Drop file. Kemudian user menampilkan file music
(8)
Gambar 3.3 Activity Diagram Upload Data
player5 hom e page
Pilih berkas Drag and drop file
Upload
Sync with Server
Library
Add Selected Item to Playlis t
Drag and drop file to playlist
Playlis t
END START
player5 user
(9)
b. Activity Diagram Play Music
Activity Diagram Play Music pada Gambar 3.4 menjelaskan proses aktivitas user yang diawali dengan memilih file yang akan diputar pada tabel library, kemudian user dapat memilih cara upload. Yaitu dengan 2 cara pilih berkas atau Drag and Drop file.
Gambar 3.4 Activity Diagram Play Music
START
END
Library
Add Selected Item to Playlist
Playlist
Drag and drop file to playlist
Control
Play Player5 User
(10)
3.2.3
Sequence Diagram
Sequence diagram atau diagram sekuensial digunakan untuk menunjukkan aliran fungsional dalam use case yang disusun berdasarkan urutan waktu. Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu.
Pada sequence diagram upload data, menggambarkan skenario aktivitas yang dilakukan user dalam proses upload data berupa pilih data, upload data, drag and drop to library serta sync with server. Sequence diagram upload data ditunjukkan pada Gambar 3.5
Gambar 3.5 Sequnce Diagaram Upload Data
: User Player5 HomePage
: Drag and Drop to Library : Pilih Berkas
Window Explorer
: Sync with Server browse
Pilih File MP3 File MP3 ke Library
Klik kiri
Pilih File MP3
File MP3 ke Library
Klik Button Sync With Server
Refresh Library
(11)
Gambar 3.5 memperlihatkan alur kegiatan yang dilakukan user pada bagian upload data. Langkah awal yang dilakukan yaitu dengan masuk pada web browser dan memilih data yang akan di upload. Cara upload ada 2 cara yaitu dengan pilih berkas dan drag and drop. Setelah menentukan file yang akan di upload kemudian melakukan upload data. Kemudian sistem akan upload data tersebut. Setelah data di upload kemudian user menampilkan data ke tabel library dengan menekan sync with server. Data dari hasil upload data akan ditampilkan pada tabel library
Pada sequence diagram play music, menggambarkan skenario aktivitas yang dilakukan user dalam proses play music berupa drag and drop library to playlist, add selected item to playlist serta control player. Sequence diagram play music ditunjukkan pada Gambar 3.6
Gambar 3.5 Sequence Diagram Play Music
: User
Player5
HomePage : Drag and Drop library to playlist
: Add Selected Item to Playlist
: Control player browse
Pilih lagu di library Lagu ke playlist
Pilih lagu Lagu ke playlist Pilih lagu di playlist
Play lagu Lagu di-play Close
(12)
Gambar 3.6 memperlihatkan alur kegiatan yang dilakukan user pada bagian memutar lagu. Langkah awal yang dilakukan yaitu dengan memilih lagu apa yang akan diputar pada tabel library. Setelah itu memilih lagu yang akan diputar memasukan file ke dalam tabel playlist. Cara memasukan ada 2 cara yaitu dengan add selected item to playlist dan drag and drop library to playlist. Setelah file masuk ke dalam tabel playlist, user dapat memutar lagu dengan menakan tombol play.
3.3 Rancangan Antarmuka
Rancangan antar muka pada aplikasi berupa halaman yang akan ditampilkan pada web browser. Dengan adanya antarmuka maka perangkat lunak dan pengguna dapat berinteraksi dengan mudah sehingga dibutuhkan perancangan antarmuka yang baik.
(13)
Gambar 3.7 Rancangan antarmuka Web Audio Player
Keterangan Gambar 3.7
1. Img 1 : Untuk menampilkan header.
2. Img 2 : Untuk menampilkan scroll lagu yang diputar. 3. List box 1 : Untuk menampilkan lagu yang diputar. 4. List box 2 : Untuk menampilkan playlist.
5. List box 3 : Untuk menampilkan audio library. 6. B1 (Button1) : Untuk menampilkan tombol play. 7. B2 (Button2) : Untuk menampilkan tombol stop. 8. B3 (Button3) : Untuk menampilkan tombol prev. 9. B4 (Button4) : Untuk menampilkan tombol next. 10. B5 (Button5) : Untuk menampilkan tombol volume.
11. B6 (Button6) : Untuk menampilkan tombol remove selected.
Img 1
List Box 3
List Box 1
List box 2
B6 B7
B9 B8
B10 Text 1 Label 1
Label 2
Text 2 Text 3
B11 B5
Img 2 B4
B3 B2 B1
(14)
12. B7 (Button7) : Untuk menampilkan tombol clear playlist. 13. B8 (Button8) : Untuk menampilkan tombol add selected item To playlist. 14. B9 (Button9) : Untuk menampilkan tombol sync with server. 15. B10 (Button10) : Untuk menampilkan tombol pilih berkas. 16. B11 (Button11) : Untuk menampilkan tombol upload.
17. Text 1 : Untuk menampilkan judul dari lagu yang akan di upload.
18. Text 2 : Untuk menampilkan singer dari lagu yang akan di upload.
19. Text 3 : Untuk menampilkan album dari lagu yang akan di upload.
20. Label 1 : Untuk menampilkan tabel singer. 21. Label 2 : Untuk menampilkan tabel album.
(1)
b. Activity Diagram Play Music
Activity Diagram Play Music pada Gambar 3.4 menjelaskan
proses aktivitas user yang diawali dengan memilih file yang
akan diputar pada tabel library, kemudian user dapat
memilih cara upload. Yaitu dengan 2 cara pilih berkas atau
Drag and Drop file.
Gambar 3.4 Activity Diagram Play Music START
END
Library
Add Selected Item to Playlist
Playlist
Drag and drop file to playlist
Control
Play
Player5 User
(2)
3.2.3
Sequence Diagram
Sequence diagram atau diagram sekuensial digunakan untuk
menunjukkan aliran fungsional dalam use case yang disusun berdasarkan urutan waktu. Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan
output tertentu.
Pada sequence diagram upload data, menggambarkan skenario aktivitas yang dilakukan user dalam proses upload data berupa pilih data, upload data, drag and drop to library serta sync
with server. Sequence diagram upload data ditunjukkan pada
Gambar 3.5
Gambar 3.5Sequnce Diagaram Upload Data : User Player5
HomePage
: Drag and Drop to Library : Pilih Berkas
Window Explorer
: Sync with Server browse
Pilih File MP3
File MP3 ke Library
Klik kiri
Pilih File MP3
File MP3 ke Library
Klik Button Sync With Server
Refresh Library
(3)
Gambar 3.5 memperlihatkan alur kegiatan yang dilakukan
user pada bagian upload data. Langkah awal yang dilakukan yaitu dengan masuk pada web browser dan memilih data yang akan di
upload. Cara upload ada 2 cara yaitu dengan pilih berkas dan drag
and drop. Setelah menentukan file yang akan di upload kemudian
melakukan upload data. Kemudian sistem akan upload data tersebut. Setelah data di upload kemudian user menampilkan data ke tabel
library dengan menekan sync with server. Data dari hasil upload
data akan ditampilkan pada tabellibrary
Pada sequence diagram play music, menggambarkan skenario aktivitas yang dilakukan user dalam proses play music berupa drag and drop library to playlist, add selected item to
playlist serta control player. Sequence diagram play music
ditunjukkan pada Gambar 3.6
Gambar 3.5Sequence Diagram Play Music
: User
Player5
HomePage : Drag and Drop library to playlist
: Add Selected Item to Playlist
: Control player browse
Pilih lagu di library Lagu ke playlist
Pilih lagu Lagu ke playlist
Pilih lagu di playlist
Play lagu
Lagu di-play
(4)
user pada bagian memutar lagu. Langkah awal yang dilakukan yaitu dengan memilih lagu apa yang akan diputar pada tabel library. Setelah itu memilih lagu yang akan diputar memasukan file ke dalam tabel playlist. Cara memasukan ada 2 cara yaitu dengan add selected item to playlist dan drag and drop library to playlist. Setelah file masuk ke dalam tabel playlist, user dapat memutar lagu dengan menakan tombol play.
3.3 Rancangan Antarmuka
Rancangan antar muka pada aplikasi berupa halaman yang akan ditampilkan pada web browser. Dengan adanya antarmuka maka perangkat lunak dan pengguna dapat berinteraksi dengan mudah sehingga dibutuhkan perancangan antarmuka yang baik.
(5)
Gambar 3.7 Rancangan antarmukaWeb Audio Player
Keterangan Gambar 3.7
1. Img 1 : Untuk menampilkan header.
2. Img 2 : Untuk menampilkan scroll lagu yang diputar.
3. List box 1 : Untuk menampilkan lagu yang diputar.
4. List box 2 : Untuk menampilkan playlist.
5. List box 3 : Untuk menampilkan audio library. 6. B1 (Button1) : Untuk menampilkan tombol play. 7. B2 (Button2) : Untuk menampilkan tombol stop. 8. B3 (Button3) : Untuk menampilkan tombol prev. 9. B4 (Button4) : Untuk menampilkan tombol next. 10. B5 (Button5) : Untuk menampilkan tombol volume.
11. B6 (Button6) : Untuk menampilkan tombol remove selected.
Img 1
List Box 3
List Box 1
List box 2
B6 B7
B9 B8
B10 Text 1 Label 1
Label 2
Text 2
Text 3
B11 B5
Img 2 B4
B3 B2 B1
(6)
13. B8 (Button8) : Untuk menampilkan tombol add selected item To playlist.
14. B9 (Button9) : Untuk menampilkan tombol sync with server.
15. B10 (Button10) : Untuk menampilkan tombol pilih berkas. 16. B11 (Button11) : Untuk menampilkan tombol upload.
17. Text 1 : Untuk menampilkan judul dari lagu yang akan di upload.
18. Text 2 : Untuk menampilkan singer dari lagu yang akan
di upload.
19. Text 3 : Untuk menampilkan album dari lagu yang akan di upload.
20. Label 1 : Untuk menampilkan tabel singer. 21. Label 2 : Untuk menampilkan tabel album.