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
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 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
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
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
4. Use case play music, use case berfungsi menampilkan lagu
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.
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
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
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
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
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
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
Gambar 3.7 Rancangan antarmuka Web Audio Player 10. B5 (Button5) : Untuk menampilkan tombol volume.
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.
