PEMODELAN SISTEM ANALISIS DAN PERANCANGAN SISTEM

commit to user

3.2.3 Spesifikasi Pengguna

Sasaran aplikasi ArimBima ini ditujukan untuk digunakan oleh semua pihak yang ingin mengetahui, mempelajari, dan mengerti dunia wayang Indonesia khususnya Mahabarata dan Ramayana.

3.3 PEMODELAN SISTEM

3.3.1 Use case Diagram

ArimBima Mobile Pedia Baca Cerita Wayang Lihat keterangan tokoh Mahabarata Pengguna Lihat nilai Lihat Sejarah Wayang dan cerita wayang include extend Lihat Gambar Tokoh Ramayana Searching include Lihat Informasi aplikasi Quiz extend include include include include Lihat Gambar Tokoh Mahabarata include include include Lihat keterangan tokoh Ramayana Baca Sejarah Wayang Menjawab QuizA Menjawab QuizB Menjawab QuizC Gambar 3.1 Use case Diagram Use case diagram menggambarkan fungsionalitas dan merancang test case untuk semua fitur yang ada pada sistem. Use case diagram menggambarkan interaksi antara pengguna dengan use case. Pada Gambar 3.2 use case keterangan tokoh extend terhadap use case gambar tokoh karena ketika use case gambar commit to user tokoh berjalan, use case keterangan tokoh berjalan jika dan hanya jika diinginkan oleh actor. Jika tidak diinginkan, maka use case keterangan tokoh tidak akan pernah dijalankan. Aktor dalam sistem ini adalah pengguna atau pembelajar, dan sistem yang dimaksud adalah ArimBima Mobile Pedia. Untuk lebih jelasnya dapat dilihat pada table 3.1. Tabel 3.1 Deskripsi Use case Diagram Aktor : Pengguna Deskripsi : 1 Use case Sejarah dan Cerita Wayang Aktor Pengguna Pengguna dapat membaca dan mengetahui sejararah wayang dan perkembangannya di Indonesia. Pengguna dapat membaca contoh cerita wayang yang berkembang di masyarakat Indonesia. 2 Use case Melihat Foto Tokoh Mahabarata Aktor Pengguna Pengguna dapat melihat foto dari tokoh Mahabarata extend use case : Keterangan Tokoh Pengguna dapat membaca keterangan tokoh Mahabarata yang telah dilihat sebelumnya. 3 Use case Melihat Foto Tokoh Ramayana Aktor Pengguna Pengguna dapat melihat foto dari tokoh Ramayana. extend use case : Keterangan Tokoh Pengguna dapat membaca keterangan tokoh Ramayana yang telah dilihat sebelumnya. 4 Use case Pertanyaan Aktor Pengguna commit to user Pengguna menjawab beberapa pertanyaan sederhana seputar contain yang ada dalam ArimBima Mobile Pedia sebagai indikator keberhasilan pembelajaran. 5 Use case Mencari Tokoh Aktor Pengguna Pengguna dapat mencari tokoh yang diinginkan secara random baik tokoh Mahabarata maupun Ramayana dengan menginputkan nama dari tokoh tersebut. Output yang didapat adalah keterangan dan gambar tokoh yang dicari. 6 Use case Informasi Aplikasi Aktor Pengguna Pengguna dapat mengetahui informasi mengenai pembuat aplikasi.

3.3.2 Activity Diagram

Gambar 3.2 menggambarkan alur aktivitas umum yang dilakukan ArimBima Mobile Pedia. Keadaan pertama yang muncul adalah proses load aplikasi, setelah itu aplikasi akan menghadapkan pengguna dengan enam menu pilihan yaitu, Sejarah wayang, Mahabarata, Ramayana, Search, Quiz, dan About. Apabila pengguna memilih Keluar, maka aktivitas yang dilakukan adalah keluar dari aplikasi. Apabila pengguna memilih menu SejarahWayang, akan muncul ChoiceGroup sejarah wayang dan cerita wayang, aktivitas yang dilakukan adalah melihat sejarah wayang dan membaca salah satu cerita wayang yang berkembang di Indonesia. Setelah melakukan aktivitas tersebut pengguna bisa kembali ke menu awal. Apabila pengguna memilih menu Mahabarata, maka pengguna akan dihadapakan pada SlideImage tokoh-tokoh Mahabarata, aktivitas yang dilakukan adalah melihat foto tokoh-tokoh Mahabarta, di form tersebut ada menu untuk melihat keterangan detail, aktivitas yang dilakukan adalah membaca keterangan tentang tokoh tersebut. Setelah selesai pengguna bisa kembali ke menu awal. commit to user Apabila pengguna memilih menu Ramayana, aktifitas yang dilakukan sama dengan menu Ramayana tetapi dengan SlideImage tokoh- tokoh Ramayana. Menu Lihat Info Aplikasi Sejarah Wayang Dan Cerita Wayang Keluar Mahabarata Ramayana Lihat Keterangan Lihat Keterangan Cari Gambar dari Tokoh Mahabarata Cari Gambar dari Tokoh Ramayana Quiz Jumlah Nilai Lihat Nilai Keluar Keluar Keluar Keluar Keluar Buka Aplikasi Midlet MuLai Foto Tokoh Ramayana Search Foto Tokoh Mahabarata Lihat Keterangan Detail Tokoh Lihat Keterangan Detail Tokoh Baca Sejarah dan Cerita QuizC QuizB QuizA Gambar 3.2 Activity Diagram Apabila pengguna memilih menu Search, aktivitas yang dilakukan adalah mencari tokoh wayang beserta gambar dan keterangannya. Tokoh yang diinputkan adalah tokoh yang termasuk dalam menu Mahabarata dan Ramayana. Apabila pengguna memilih menu Quiz, aktivitas yang dilakukan adalah pengguna dihadapkan dengan sejumlah soal mengenai dunia pewayangan khususnya yang tersaji di ArimBima Mobile Pedia sebagai indikator kepahaman pengguna. Jika pengguna telah selesai menjawab soal commit to user akan ada menu untuk melihat skor atau nilai yang diperoleh pengguna dalam menjawab quiz. Setelah aktivitas selesai pengguna bisa kembali ke menu awal. Apabila pengguna memilih menu About, aktivitas yang dilakukan adalah membaca info tentang aplikasi dan pembuat aplikasi. Setelah aktivitas selesai pengguna bisa kembali ke menu awal.

3.3.3 Class Diagram

Class diagram digunakan untuk menampilkan kelas-kelas dan relasi antar mereka. Di sini akan dibahas enam class diagram dari masing-masing menu yaitu: class diagram wayang, class diagram Mahabarata, class diagram Ramayana, class diagram Search, class diagram Quiz, class diagram About. 3.3.3.1 Class diagram Wayang Gambar 3.3 Class Diagram Wayang 3.3.3.2 Class diagram Mahabarata Gambar 3.4 Class Diagram Mahabarata commit to user 3.3.3.3 Class diagram Ramayana Gambar 3.5 Class Diagram Ramayana 3.3.3.4 Class diagram Search Gambar 3.6 Class Diagram Search 3.3.3.5 Class diagram Quiz QuizB Quiz MenuArimBima ArimBima Splashscreen QuizA QuizC Skor Gambar 3.7 Class Diagram Quiz commit to user 3.3.3.6 Class diagram About Gambar 3.8 Class Diagram About

3.3.4 Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem termasuk pengguna, display, dan sebagainya berupa message yang digambarkan terhadap waktu. Message digambarkan sebagai garis berpanah dari satu objek ke objek lainnya. Pada fase desain berikutnya, message akan dipetakan menjadi operasimetode dari class. 3.3.4.1 Sequence Diagram sejarah wayang 1. Pilih Menu Menu : MenuArimBima 2. ArimBima. Wayang Menampilkan sejarah dan cerita wayang 3. hasil dari ReadFile sejarah wayang dan cerita wayang Wayang : wayang Gambar 3.9 Sequence diagram sejarah wayang commit to user Sequence diagram pada Gambar 3.9 terjadi interaksi antara pengguna dengan menu. Pengguna mengirimkan pesan kepada objek menu dan dilanjutkan ke objek about untuk menampilkan informasi nama aplikasi dan pembuat aplikasi kepada pengguna. 3.3.4.2 Sequence diagram Mahabarata Sequence diagram Mahabarata menggambarkan interaksi langsung antara pengguna dengan objek Mahabarata. Objek Mahabarata mengirimkan pesan berupa tampilkan SlideImage tokoh-tokoh Mahabarata ke TokohMahabarata, selain itu juga meminta untuk menampilkan keterangan. Kemudian objek Mahabarata memproses untuk ditampilkan kepada pengguna. Lebih jelasnya dapat dilihat pada Gambar 3.10. Gambar 3.10 Sequence Diagram Mahabarata 3.3.4.3 Sequence diagram Ramayana Sequence diagram pada Gambar 3.11 menggambarkan interaksi langsung antara pengguna dengan objek Ramayana. Objek Ramayana mengirimkan pesan berupa tampilkan SlideImage tokoh-tokoh Ramayana ke TokohRamayana, selain commit to user itu juga meminta untuk menmpilkan keterangan. Kemudian objek Ramayana memproses untuk ditampilkan kepada pengguna. Proses ini sama dengan proses sequence diagram Mahabarata. Gambar 3.11 Sequence Diagram Ramayana 3.3.4.4 Sequence diagram Search 1. Pilih Menu MenuArimBima : menu Tokoh 2. MenuArimBima. Search keterangan tokoh 4. Hasil cari gambar Gambar 3. MenuArimBima.Gambar 5. hasil cari tokoh Foto tokoh Gambar 3.12 Sequence Diagram Search commit to user Sequence diagram pada Gambar 3.12 terjadi interaksi pengguna dengan objek search. Pengguna mengirimkan pesan kepada objek cari tokoh yang kemudian diteruskan ke objek-objek yang menangani data dan untuk ditampilkan ke pengguna, sehingga pengguna mendapatkan informasi tentang foto dan keterangan dari tokoh yang dicari. 3.3.4.5 Sequence diagram Quiz Gambar 3.13 Sequence Diagram Quiz Sequence diagram pada Gambar 3.13 terjadi interaksi antara pengguna dan objek quiz. Pengguna menjawab beberapa pertanyaan dan Pengguna mengirimkan pesan yang berupa jawaban kepada objek skor. Objek skor kemudian menampilkan informasi skor atau nilai kepada pengguna. 3.3.4.6 Sequence diagram About Sequence Diagram pada Gambar 3.14 menggambarkan interaksi yang terjadi antar objek untuk menghasilkan tampilan about berupa info tentang pembuat aplikasi. Objek menu berinteraksi langsung dengan pengguna dan mengirimkan pesan berupa pilihan menu ke objek menu. Objek menu meneruskan pesan tersebut berupa permintaan untuk menampilkan halaman about. Objek commit to user about menerima pesan tersebut kemudian mengembalikan pesan tersebut kepada pengguna berupa tampilan about. Gambar 3.14 Sequence Diagram About

3.3.5 Class Diagram

Dari sequence diagram didapatkan atribut-atribut dan metode-metode yang mengisi masing-masing kelas, lebih jelasnya dapat dilihat pada Gambar 3.15 sampai Gambar 3.20. 3.3.5.1 Class Diagram Wayang Class diagram pada Gambar 3.15 akan menampilkan halaman dari sejarah wayang dan cerita wayang. Di sini terdapat informasi mengenai sejarah wayang dan cerita wayang. Dari kelas Wayang terdapat dua pilihan menu yaitu sejarah wayang dan cerita wayang. Kelas Baca Wayang menangani ReadFile dari sejarah wayang dan kelas BacaCerita menangai ReadFile dari cerita wayang. commit to user Gambar 3.15 Class Diagram Wayang 3.3.5.2 Class Diagram Mahabarata Class diagram pada Gambar 3.16 akan menampilkan gambar dan keterangan tokoh-tokoh Mahabarata. SlideMenu adalah kelas yang menangani penampilan gambar, durasi perpindahan gambar, sedangkan TokohMahabarata mendefinisikan gambar dan nama tokoh. Metode untuk menampilkan gambar yaitu paint. commit to user mahabarata display keyPressed SlideMenu Int select_index commandAction Image String label slideItem paint run SlideMenu int duration long time paint Splashscreen arimbima : ArimBima ArimBima destroyApp exitMIDlet pauseApp startApp wayang mahabarata ramayana search quiz about MenuArimBima drawIcons drawSelectingRectangle keyPressed keyPressedFire paint drawIcons display int iKEY_DOWN int iKEY_UP int iKEY_LEFT int iKEY_RIGHT int iKEY_FIRE int iKEY_SOFT1 int iKEY_SOFT2 int screenHeight int screenWidth Image [ ] icons String [ ] label selectedIndex selectedMenu Gambar 3.16 Class Diagram Mahabarata commit to user 3.3.5.3 Class diagram Ramayana Gambar 3.17 Class Diagram Ramayana Class diagram pada Gambar 3.5 akan menampilkan gambar dan keterangan tokoh-tokoh Ramayana. Metode untuk menampilkan gambar yaitu paint. Kelas commit to user SlideMenu dan kelas TokohRamayana mempunyai peran yang sama dengan kelas Mahabarata 3.3.5.4 Class diagram Search MenuArimBima drawIcons drawSelectingRectangle keyPressed keyPressedFire paint drawIcons display int iKEY_DOWN int iKEY_UP int iKEY_LEFT int iKEY_RIGHT int iKEY_FIRE int iKEY_SOFT1 int iKEY_SOFT2 int screenHeight int screenWidth Image [ ] icons String [ ] label selectedIndex selectedMenu ArimBima destroyApp exitMIDlet pauseApp startApp wayang mahabarata ramayana search quiz about Splashscreen arimbima : ArimBima Tokoh StringItem cmBack commandAction Gambar StringItem cmBack commandAction Image search cmFind cmPict cmBack tfFind StringItem commandAction Gambar 3.18 Class Diagram Search Class diagram pada Gambar 3.18 akan menampilkan hasil dari mencari tokoh baik tokoh Mahabarata maupun Ramayana. Terdapat dua searching yaitu searching tokoh dan gambar. Hasil dari searching tokoh ditangani oleh kelas Tokoh dan searching gambar ditangani oleh kelas Gambar. commit to user 3.3.5.5 Class diagram Quiz QuizB quizForm image commandAction hitungSkor choicegroup Int skor indexQuiz QuizA quizForm image commandAction choicegroup Int skor indexQuiz Splashscreen arimbima : ArimBima ArimBima destroyApp exitMIDlet pauseApp startApp wayang mahabarata ramayana search quiz about quiz ImageItem Image commandAction choicegroup quiz indexQuiz skor quizForm image commandAction Skor choicegroup Int skor indexQuiz MenuArimBima drawIcons drawSelectingRectangle keyPressed keyPressedFire paint drawIcons display int iKEY_DOWN int iKEY_UP int iKEY_LEFT int iKEY_RIGHT int iKEY_FIRE int iKEY_SOFT1 int iKEY_SOFT2 int screenHeight int screenWidth Image [ ] icons String [ ] label selectedIndex selectedMenu hitungSkor Skor quizForm image choicegroup Int skor indexQuiz commandAction hitungSkor QuizC quizForm image commandAction hitungSkor choicegroup Int skor indexQuiz cmOk cmBack Gambar 3.19 Class Diagram Quiz Class diagram pada Gambar 3.19 akan menampilkan halaman quiz yang menampilkan tiga pilihan choicegroup dan masing-masing berisi sepuluh pertanyaan dan dari jawaban yang telah disimpan dapat dilihat pula skor yang diperoleh pengguna. Kelas yang menangani proses ini yaitu kelas Quiz dan yang menangani nilai adalah kelas Skor. commit to user 3.3.5.6 Class diagram About Gambar 3.20 Class Diagram About Class diagram pada Gambar 3.20 akan menampilkan informasi tentang pembuat aplikasi. Kelas yang menangani proses ini adalah kelas About. commit to user

3.4 KEPERLUAN SISTEM