13 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.
14 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.
15 - 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
16 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 Case Diagram 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.
17 Pada Gambar 3.2, use case diagram menjelaskan peranan dan fungsi masing-masing aktor, yaitu user yang berperan sebagai pengguna audio player. Gambar 3.2 Use Case Diagram Audio Player Berdasarkan use case diagram pada Gambar 3.2, dapat dijelaskan secara singkat masing-masing fungsi dari use case sebagai berikut : 1. Use case upload file, use case berfungsi menampilkan pilihan untuk menambah lagu pada tabel library. 2. Use case make library, use case berfungsi menampilkan daftar lagu yang sudah di upload. 3. Use case make playlist, use case berfungsi menampilkan daftar lagu yang ingin diputar dari library.
18 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.
19 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.2 Activity 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 Upload data 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 pada tabel library dengan cara memilih sync with server.
20 user START player5 player5 home page Pilih berkas Drag and drop file Upload Sync with Server Library Add Selected Item to Playlist Drag and drop file to playlist Playlist END Gambar 3.3 Activity Diagram Upload Data
21 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. User Player5 START Library Add Selected Item to Playlist Drag and drop file to playlist Playlist Control Play END Gambar 3.4 Activity Diagram Play Music
22 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 : User browse Player5 HomePage : Drag and Drop to Library : Pilih Berkas Window Explorer : Sync with Server Pilih File MP3 File MP3 ke Library Klik kiri Pilih File MP3 File MP3 ke Library Klik Button Sync With Server Refresh Library Close Gambar 3.5 Sequnce Diagaram Upload Data
23 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 : User browse Player5 HomePage : Drag and Drop library to playlist : Add Selected Item to Playlist : Control player Pilih lagu di library Lagu ke playlist Pilih lagu Lagu ke playlist Pilih lagu di playlist Play lagu Lagu di-play Close Gambar 3.5 Sequence Diagram Play Music
24 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.
25 Img 1 List Box 1 List box 2 B1 B2 B3 B4 Img 2 B5 B6 B7 List Box 3 B8 B9 B10 Text 1 Label 1 Text 2 B11 Label 2 Text 3 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.
26 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.