Sequence Diagram Perancangan Prosedur yang Diusulkan
88
object , sesuatu yang terjadi pada titik tertentu dalam eksekusi sistem. Komponen
utama sequence diagram terdiri atas objek yang dituliskan dengan kotak segiempat bernama pesan diwakili oleh garis dengan tanda panah dan waktu yang
ditunjukkan dengan proses vertikal. Berikut adalah sequence diagram yang ada pada aplikasi mobile piano, gitar dan drum vitual, yaitu:
1. Sequence Diagram Belajar Kord Piano Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu belajar. Selanjutnya masuk ke menu belajar piano dan pilih kord. Sistem akan menampilkan halaman kord piano. Siswa dapat mendengarkan suara piano
dan mengganti kord serta tangga nada.
Gambar 4.21 Sequence Diagram
Belajar Kord Piano
2. Sequence Diagram Belajar Anatomi Piano Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu belajar. Selanjutnya masuk ke menu belajar piano dan pilih anatomi. Sistem akan menampilkan halaman anatomi piano. Siswa dapat melihat keterangan dari
bagian-bagian piano.
:MenuUtama :MenuBelajar
:MenuPiano
Player
3:btnPiano 1.1:showMenuUtama
2.1:showMenuBelajar 4.2:btnDengar
1:startApplication 3.1:showMenuPiano
4.3:getDengar 2:btnBelajar
:KordPiano
4:btnKord 4.1:showKord
4.4:btnKord 4.6:btnMajor
Minor 4.5:getKord
4.7:getMajorMinor
89
Gambar 4.22 Sequence Diagram
Belajar Anatomi Piano
3. Sequence Diagram Belajar Kord Gitar Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu belajar. Selanjutnya masuk ke menu belajar gitar dan pilih kord. Sistem akan menampilkan halaman kord gitar. Siswa dapat mendengarkan suara gitar dan
mengganti kord serta tangga nada.
Gambar 4.23 Sequence Diagram
Belajar Kord Gitar
:MenuUtama :MenuBelajar
:MenuPiano Actor
3:btnPiano 1.1:showMenuUtama
2.1:showMenuBelajar 42:btnAnatomi
1:startApplication 3.1:showPiano
4.3:getAnatomi 2:btnBelajar
:AnatomiPiano
4:btnAnatomi 4.1:showAnatomi
:MenuUtama :MenuBelajar
:MenuGitar
Player
3:btnGitar 1.1:showMenuUtama
2.1:showMenuBelajar 4:btnDengar
1:startApplication 3.1:showMenuGitar
4.2:getDengar 2:btnBelajar
:KordGitar
4:btnKord 4.1:showKord
4:btnKord 4:btnMajor Minor
4.3:getKord 4.3:getMajorMinor
90
4. Sequence Diagram Anatomi Gitar Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu belajar. Selanjutnya masuk ke menu belajar piano dan pilih anatomi. Sistem akan menampilkan halaman anatomi piano. Siswa dapat melihat keterangan dari
bagian-bagian piano.
Gambar 4.24 Sequence Diagram
Belajar Anatomi Gitar
5. Sequence Diagram Ketukan Drum Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu belajar. Selanjutnya masuk ke menu belajar piano dan pilih ketukan. Sistem akan menampilkan halaman ketukan drum. Siswa dapat melihat keterangan dari
ketukan-ketukan drum.
Gambar 4.25 Sequence Diagram
Belajar Ketukan Drum
:MenuUtama :MenuBelajar
:MenuGitar
Player
3:btnGitar 1.1:showMenuUtama
2.1:showMenuBelajar 42:btnAnatomi
1:startApplication 3.1:showGitar
4.3:getAnatomi 2:btnBelajar
:AnatomiGitar
4:btnAnatomi 4.1:showAnatomi
:MenuUtama :MenuBelajar
:MenuDrum
Player
3:btnDrum 1.1:showMenuUtama
2.1:showMenuBelajar 1:startApplication
3.1:showMenuDrum 2:btnBelajar
:KetukanDrum
4:btnKetukan 4.1:showKetukan
91
6. Sequence Diagram Anatomi Drum Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu belajar. Selanjutnya masuk ke menu belajar piano dan pilih Anatomi. Sistem akan menampilkan halaman anatomi piano. Siswa dapat melihat
keterangan dari bagian-bagian piano.
Gambar 4.26 Sequence Diagram
Belajar Anatomi Drum
7. Sequence Diagram Bermain Piano Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu bermain. Selanjutnya masuk ke menu bermain piano. Sistem akan menampilkan halaman bermain piano. Siswa dapat memanggil suara dan
mengganti tangga nada piano.
Gambar 4.27
Sequence Diagram Bermain Paino
:MenuUtama :MenuBelajar
:MenuDrum Actor
3:btnDrum 1.1:showMenuUtama
2.1:showMenuBelajar 4.2:btnAnatomi
1:startApplication 3.1:showDrum
4.3:getAnatomi 2:btnBelajar
:AnatomiDrum
4:btnAnatomi 4.1:showAnatomi
:MenuUtama :MenuBermain
:BermainPiano
Player
3:btnPiano 1.1:showMenuUtama
2.1:showMenuBelajar 1:startApplication
3.1:showBermainPiano 2:btnBermain
3.2:btnSoundPian o
3.4:btnMajor Minor
3.3:getSoundPiano 3.5:getMajorMinor
92
8. Sequence Diagram Bermain Gitar Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu bermain. Selanjutnya masuk ke menu bermain gitar. Sistem akan menampilkan halaman bermain gitar. Siswa dapat memanggil suara dan
mengganti tangga nada gitar.
Gambar 4.28 Sequence Diagram
Bermain Gitar 9. Sequence Diagram Bermain Drum
Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih menu bermain. Selanjutnya masuk ke menu bermain drum. Sistem akan
menampilkan halaman bermain drum. Siswa dapat memanggil suara dari bagian- bagian drum.
Gambar 4.29 Sequence Diagram
Bermain Drum
:MenuUtama :MenuBermain
:BermainGitar
Player
3:btnGitar 1.1:showMenuUtama
2.1:showMenuBelajar 1:startApplication
3.1:showBermainGitar 2:btnBermain
3.2:btnSoundGitar 3.4:btnMajor
Minor 3.3:getSoundGitar
3.5:getMajorMinor
:MenuUtama :MenuBermain
:BermainDrum
Player
3:btnDrum 1.1:showMenuUtama
2.1:showMenuBelajar 1:startApplication
3.1:showBermainDrum 2:btnBermain
3.2:btnSoundDru m
3.3:getSoundDrum
93
10. Sequence Diagram Quiz Piano Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu quiz. Selanjutnya masuk ke menu quiz piano. Sistem akan menampilkan halaman quiz piano. Siswa dapat mengisi dan menampilkan hasil jawaban.
Gambar 4.30 Sequence Diagram
Quiz Piano 11. Sequence Diagram Quiz Gitar
Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih menu quiz. Selanjutnya masuk ke menu quiz gitar. Sistem akan menampilkan
halaman quiz gitar. Siswa dapat mengisi dan menampilkan hasil jawaban.
Gambar 4.31 Sequence Diagram
Quiz Gitar
:MenuUtama :MenuQuiz
:QuizPiano
Player
3:btnPiano 1.1:showMenuUtama
2.1:showMenuQuiz 1:startApplication
2:btnQuiz 3.1:btnJawaban
3.3:getHasil 3.2:btnHasil
:MenuUtama :MenuQuiz
:QuizGitar
Player
3:btnGitar 1.1:showMenuUtama
2.1:showMenuQuiz 1:startApplication
2:btnQuiz 3.1:btnJawaban
3.3:getHasil 3.2:btnHasil
94
12. Sequence Diagram Quiz Drum Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu drum. Selanjutnya masuk ke menu quiz drum. Sistem akan menampilkan halaman quiz drum. Siswa dapat mengisi dan menampilkan hasil jawaban.
Gambar 4.32
Sequence Diagram Quiz Drum
13. Sequence Diagram Tentang Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu tentang. Sistem akan menampilkan penjelasan tentang aplikasi.
Gambar 4.33 Sequence Diagram
Tentang
:MenuUtama :MenuQuiz
:QuizDrum
Player
3:btnDrum 1.1:showMenuUtama
2.1:showMenuQuiz 1:startApplication
2:btnQuiz 3.1:btnJawaban
3.3:getHasil 3.2:btnHasil
:MenuUtama :Tentang
Player
1.1:showMenuUtama 2.1:showTentang
1:startApplication 2:btnTentang
95
14. Sequence Diagram Keluar Siswa menjalankan aplikasi, kemudian masuk ke menu utama dan memilih
menu keluar. Sistem akan menampilkan alert, jika ya maka keluar dar aplikasi dan jika tidak maka kebai ke menu utama.
Gambar 4.34 Sequence Diagram
Keluar 4.2.3.5 Class Diagram
Diagram kelas atau class diagram menggambarkan struktur sistem dari segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem. Kelas
memiliki apa yang disebut atribut dan metode atau operasi. 1. Atribut merupakan variabel
–variabel yang dimiliki oleh suatu kelas. 2. Operasi atau metod adalah fungsi-fungsi yang dimiliki oleh suatu kelas.
Berikut adalah diagram kelas yang diusulkan pada perancangan aplikasi mobile piano, gitar dan drum virtual:
:MenuUtama :Keluar
Player
1.1:showMenuUtama 2.1:showAlert
1:startApplication 2:btnKeluar
2.2:btnTidak 2.3:backMenuUtama
2.4:btnYa 2.5:exitApplication
96
Gambar 4.35. Class Diagram
Aplikasi Mobile Piano, Gitar dan Drum Virtual yang Diusulkan