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

4.2.3.6 Component Diagram

Component adalah unit fisik yang nyata yang menjadi bagian dari deployment independent. Component ini diimplementasikan meskipun pada sistem yang kecil. Perancangan menu pada aplikasi yang diusulkan digambarkan oleh gambar component diagram berikut. MenuUtama MenuBelajar:Btn = Void MenuBermain:Btn = Void MenuQuiz:Btn = Void MenuTentang:Btn = Void MenuKeluar:Btn = Void +OnCreate +OnClick Belajar BelajarPiano:Btn= Void BelajarGitar:Btn= Void BelajarDrum:Btn= Void BelajarKord:Btn= Void BelajarKetukan:Btn= Void BelajarAnatomi:Btn= Void Major:Btn= Void Minor:Btn= Void GitarAMajor:Btn= Void GitarBMajor:Btn= Void GitarCMajor:Btn= Void GitarDMajor:Btn= Void GitarEMajor:Btn= Void GitarFMajor:Btn= Void GitarGMajor:Btn= Void GitarAMinor:Btn= Void GitarBMinor:Btn= Void GitarCMinor:Btn= Void GitarDMinor:Btn= Void GitarEMinor:Btn= Void GitarFMinor:Btn= Void GitarGMinor:Btn= Void PianoAMajor:Btn= Void PianoBMajor:Btn= Void PianoCMajor:Btn= Void PianoDMajor:Btn= Void PianoEMajor:Btn= Void PianoFMajor:Btn= Void PianoGMajor:Btn= Void PianoAMinor:Btn= Void PianoBMinor:Btn= Void PianoCMinor:Btn= Void PianoDMinor:Btn= Void PianoEMinor:Btn= Void PianoFMinor:Btn= Void PianoGMinor:Btn= Void +OnCreate +OnClick +PlaySound Keluar MenuKeluar:Btn= Void +OnClick Quiz QuizPiano:Btn= Void QuizGitar:Btn= Void QuizDrum:Btn= Void Soal:Txt= String Jawaban:Txt= String NoSoal:Txt= Int Benar:Txt= Int Salah:Txt= Int +OnCreate +OnClick +ListDialog +Hitung Tentang MenuTentang:Btn= Void +OnCreate Bermain BermainPiano:Btn= Void BermainPianoMajor:Btn= Void BermainPianoMinor:Btn= Void BermianGitar:Btn= Void BermianGitarMajor:Btn= Void BermianGitarMinr:Btn= Void BermainDrum:Btn= Void Major:Btn= Void Minor:Btn= Void +OnCreate +OnClick +PlaySound 97 Gambar 4.36 Component Diagram