ANALISIS DAN PERANCANGAN SISTEM
3.2. Perancangan Sistem 1. Pemodelan Sistem
Pemodelan sistem dilakukan untuk menunjukkan dan mendeskripsikan gambaran dari sistem yang akan dibangun. Pada penelitian ini dilakukan pemodelan dengan menggunakan Unified Modelling Language (UML) untuk merancang sistem. Model UML yang digunakan dalam penelitian ini antara lain adalah use case diagram, activity diagram dan sequence diagram.
3.2.1.1. Use Case Diagram
Use case diagram adalah gambaran interaksi antara sistem dan actor. Use case diagram biasanya menjelaskan secara sederhana fungsi sistem dari sudut pandang user. Use-case diagram dibentuk oleh dua komponen, yaitu actor dan use case. Actor adalah pengguna yang melakukan komunikasi dengan sistem, sedangkan use case adalah gambaran fungsionalitas dari suatu sistem, sehingga pengguna paham akan kegunaan sistem. Use case diagram sistem identifikasi lagu dapat dilihat pada Gambar 3.4.
Gambar 3.4. Use case diagram sistem identifikasi lagu
Spesifikasi use case identifikasi lagu dapat dilihat pada Tabel 3.3.
Tabel 3.3. Spesifikasi use case identifikasi lagu
Name Identifikasi Lagu
Actor User
Trigger User menekan tombol identify pada aplikasi android
Description
Mendeskripsikan berjalannya proses pencarian judul dan nama penyanyi sebuah lagu berdasarkan query berupa rekaman potongan lagu selama 2 detik.
Pre-condition Perangkat android terhubung ke server Post-condition Sistem menampilkan hasil identifikasi lagu Alternative flow -
Spesifikasi use case insert lagu referensi dapat dilihat pada Tabel 3.4.
Tabel 3.4. Spesifikasi insert lagu referensi Name Insert Lagu Referensi
Actor Administrator
Trigger Administrator menekan tombol insert pada aplikasi desktop Description Mendeskripsikan berjalannya proses memasukkan judul,
nama penyanyi dan fingerprint dari lagu referensi ke dalam basis data.
Pre-condition Terhubung ke basis data.
Post-condition Sistem menampilkan informasi hasil dari proses insert ke dalam basis data
Alternative Flow -
Spesifikasi use case delete lagu referensi dapat dilihat pada Tabel 3.5.
Tabel 3.5. Spesifikasi use case delete lagu referensi
Name Delete Lagu Referensi
Actor Administrator
Trigger Administrator menekan tombol delete
Description Mendeskripsikan berjalannya proses penghapusan id, judul, nama penyanyi dan fingerprint lagu referensi dari basis data.
Pre-condition Terhubung ke basis data.
Post-condition Sistem menampilkan informasi hasil proses penghapusan id, judul, nama penyanyi dan fingerprint lagu referensi dari basis data.
Alternative flow -
Spesifikasi use case use case lihat history dapat dilihat pada Tabel 3.6.
Tabel 3.6. Spesifikasi use case lihat history
Name Lihat history
Actor User
Trigger User menekan menu history pada aplikasi andorid
Description Mendeskripsikan berjalannya proses menampilkan daftar judul dan nama penyanyi lagu yang pernah diidentifikasi dan tanggal identifikasi masing-masing lagu tersebut.
Pre-condition -
Post-condition Sistem menampilkan daftar judul dan nama penyanyi lagu yang pernah diidentifikasi dan tanggal identifikasi masing-masing lagu tersebut.
Alternative flow -
3.2.1.2. Activity Diagram
Activity diagram adalah gambaran workflow (alur kerja) atau aktivitas dari sistem.
Activity diagram berfungsi untuk memperlihatkan urutan aktifitas proses pada sistem
berdasarkan use case diagram. Activity diagram Identifikasi Lagu dapat dilihat pada Gambar 3.5.
Gambar 3.5. Activity diagram Identifikasi Lagu.
Activity diagram Insert Lagu Referensi dapat dilihat pada Gambar 3.6.
Gambar 3.6. Activity diagram Insert Lagu Referensi
3.2.1.3. Sequence Diagram
Sequence diagram menggambarkan bagaimana objek saling berinteraksi untuk satu buah use case. Sequence diagram membantu menggambarkan data yang masuk dan keluar sistem. Diagram ini menjelaskan interaksi objek berdasarkan urutan waktu, serta menggambarkan urutan atau tahapan yang harus dilakukan untuk dapat menghasilkan sesuatu seperti pada use case diagram.
Sequence diagram digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang akan dilakukan sebagai sebuah respon dari suatu event (kejadian) untuk menghasilkan output tertentu. Sequence diagram diawali dari apa yang me-trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan.
Sequence diagram Identifikasi lagu dapat dilihat pada Gambar 3.7.
Gambar 3.7. Sequence diagram Identifikasi lagu Sequence diagram Insert Lagu Referensi dapat dilihat pada Gambar 3.8.
Gambar 3.8 Sequence diagram Insert Lagu Referensi
3.2.1.4. Entity Relationship Diagram (ERD)
Entity Relationship Diagram adalah diagram yang menggambarkan hubungan setiap entitas yang terdapat di dalam basis data. ERD basis data sistem identifikasi lagu dapat dilihat pada Gambar 3.9.
Gambar 3.9. ERD basis data sistem identifikasi lagu
3.2.2. Flowchart
Flowchart adalah bagan yang menggambarkan urutan proses serta hubungan antara suatu proses dengan proses lainnya.
3.2.2.1. Flowchart Sistem
Flowchart sistem identifikasi lagu dapat dilihat pada Gambar 3.10.
Gambar 3.10. Flowchart Sistem
3.2.2.2. Flowchart Short Time Fourier Transform
Flowchart Short Time Fourier Transform (STFT) dapat dilihat pada Gambar 3.11.
Gambar 3.11. Flowchart Short Time Fourier Transform (STFT)
3.2.3. Perancangan Antarmuka (Interface)
Sistem identifikasi lagu terdiri dari dua aplikasi, yaitu aplikasi berbasis android untuk user dan aplikasi berbasis desktop untuk administrator.
3.2.3.1. Rancangan Aplikasi Android
Aplikasi android merupakan aplikasi client-side untuk user.
3.2.3.1.1. Halaman Identify
Halaman identify merupakan halaman yang pertama kali tampil saat user membuka aplikasi. Halaman ini berfungsi sebagai interface (tatap muka) untuk proses identifikasi lagu serta menampilkan hasil identifikasi lagu. Rancangan antarmuka halaman identify dapat dilihat pada Gambar 3.12.
Gambar 3.12. Rancangan antarmuka halaman identify
Keterangan gambar rancangan antarmuka halaman identify dapat dilihat pada Tabel 3.7.
Tabel 3.7. Keterangan gambar rancangan antarmuka halaman identify
No Keterangan
1 Merupakan textview untuk nama halaman
2 Merupakan textview untuk menampilkan notifikasi koneksi internet 3 Merupakan button untuk memulai identifikasi lagu
4
Merupakan textview untuk menampilkan hasil identifikasi. Apabila
identifikasi lagu berhasil maka akan ditampilkan judul dan nama penyanyi lagu, namun apabila lagu tidak berhasil diidentifikasi maka akan
ditampilkan pesan “No songs found”
5 Merupakan bottom navigation view untuk pindah ke halaman identify 6 Merupakan bottom navigation view untuk pindah ke halaman history 7 Merupakan bottom navigation view untuk pindah ke halaman about 3.2.3.1.2. Halaman History
Halaman history berfungsi untuk menampilkan list (daftar) lagu yang berhasil diidentifikasi. Rancangan antarmuka halaman history dapat dilihat pada Gambar 3.13.
Gambar 3.13. Rancangan antarmuka halaman history
Keterangan gambar rancangan antarmuka halaman history dapat dilihat pada Tabel 3.8.
Tabel 3.8. Keterangan gambar rancangan antarmuka halaman history
No Keterangan
1 Merupakan textview untuk nama halaman 2
Merupakan recycler view untuk menampilkan daftar lagu yang pernah diidentifikasi
3 Merupakan image view untuk gambar not balok 4
Merupakan textview untuk judul dan nama penyanyi lagu yang berhasil diidentifikasi
5 Merupakan textview untuk tanggal identifikasi lagu.
6 Merupakan bottom navigation view untuk pindah ke halaman identify 7 Merupakan bottom navigation view untuk pindah ke halaman history 8 Merupakan bottom navigation view untuk pindah ke halaman about 3.2.3.1.3. Halaman about
Rancangan antarmuka halaman about aplikasi android dapat dilihat pada Gambar 3.14.
Gambar 3.14. Rancangan antarmuka halaman about aplikasi android
Keterangan gambar rancangan antarmuka halaman about dapat dilihat pada Tabel 3.9.
Tabel 3.9. Keterangan gambar rancangan antarmuka halaman about
No Keterangan
1 Merupakan textview untuk judul skripsi 2 Merupakan textview untuk nama dan nim
3 Merupakan image view untuk logo Universitas Sumatera Utara 4
Merupakan textview untuk nama jurusan, nama fakultas, nama universitas, dan tahun pembuatan aplikasi.
5 Merupakan bottom navigation view untuk pindah ke halaman identify
6 Merupakan bottom navigation view untuk pindah ke halaman history 7 Merupakan bottom navigation view untuk pindah ke halaman about 3.2.3.2. Rancangan Aplikasi Desktop
Aplikasi desktop merupakan aplikasi client-side untuk administrator.
3.2.3.2.1. Halaman Manage Database (Kelola Basis Data)
Halaman Manage Database merupakan halaman awal yang tampil saat administrator membuka aplikasi desktop sistem identifikasi lagu. Halaman ini berguna untu mengatur basis data lagu referensi. Rancangan antarmuka halaman Manage Database dapat dilihat pada Gambar 3.15.
Gambar 3.15. Rancangan antarmuka halaman Manage Database
Keterangan rancangan antarmuka halaman Manage Database dapat dilihat pada Tabel 3.10
Tabel 3.10. Keterangan gambar rancangan antarmuka halaman Manage Database
No Keterangan
1 Merupakan JLabel untuk nama halaman 2 Merupakan JLabel untuk nama aplikasi
3 Merupakan JLabel untuk menampilkan logo aplikasi
4
Merupakan JPanel yang berfungsi sebagai button untuk menuju ke halaman Manage Database
5
Merupakan JPanel yang berfungsi sebagai button untuk menuju ke halaman About
6
Merupakan JTable untuk menampilkan daftar lagu referensi yang tesimpan dalam basis data
7
Merupakan JButton untuk memasukkan (insert) informasi lagu referensi ke dalam basis data
8
Merupakan JButton untuk menghapus (delete) informasi lagu referensi dari basis data
9
Merupakan JTextField untuk meng-input kata kunci pencarian daftar lagu referensi
10
Merupakan TextArea untuk menampilkan informasi proses insert dan delete
3.2.3.2.2. Halaman About
Rancangan antarmuka halaman About dapat dilihat pada Gambar 3.16.
Gambar 3.16. Rancangan antarmuka halaman About aplikasi desktop
Keterangan rancangan antarmuka halaman About dapat dilihat pada Tabel 3.11.
Tabel 3.11. Keterangan antarmuka halaman About aplikasi desktop
No Keterangan
1 Merupakan JLabel untuk nama halaman 2 Merupakan JLabel untuk nama aplikasi
3 Merupakan JLabel untuk menampilkan logo aplikasi 4
Merupakan JPanel yang berfungsi sebagai button untuk menuju ke halaman Manage Database
5
Merupakan JPanel yang berfungsi sebagai button untuk menuju ke halaman About
6 Merupakan JLabel untuk judul skripsi 7 Merupakan JLabel untuk nama dan nim
8 Merupakan JLabel untuk menampilkan logo Universitas Sumatera Utara 9
Merupakan JLabel untuk nama jurusan, nama fakultas, dan nama universitas.
BAB 4