BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Aplikasi Dalam membangun Aplikasi Pemodelan Senjata Api Berbasis 3D ini penulis menganalisis akan kebutuhan dasar Sistem. Analisis dilakukan terhadap data-data yang mempresentasikan masalah sehinga dapat diketahui spesifikasi sistem yang akan dibangun. Di dalam tugas ini dirancang suatu Aplikasi Pemodelan Senjata Api Berbasis 3D berformat bmp,jpg,flv dan mp3.aplikasi ini terdiri atas cara kerja senjata, deskripsinya, bagian- bagiannya serta pemodelannya. Aplikasi yang dirancang ini dapat menjadi alternatif untuk membantu lebih mengerti akan cara kerja senjata serta mengenal bagian bagian daru senjata karena ditunjang oleh video, gambar dan suara sehingga dapat memudahkan penggunaannya. Aplikasi Pemodelan Senjata Api Berbasis 3D ini terdiri dari beberapa menu yaitu: 1. Home Pada menu home penulis menyediakan sedikit teks sebagai bacaan serta animasi. 2. Main Menu Pada menu materi penulis menyediakan sub menu. 3. Model Barreta Colt Pada menu ini penulis memberikan animasi dalam bentuk 3D dari senjata Barreta Colt yang bisa diputar putar n diganti warna. 4. Specification Barreta Colt Pada menu menampilkan spesikasi dari senjata Barreta Colt. 5. Simulation Barreta Colt Pada menu ini penulis memberikan animasi simulasi dalam bentuk video dan suara dari senjata Barreta Colt. 6. Part Barreta Colt Pada menu ini penulis memberikan animasi perbagian dari senjata Barreta Colt dalam bentuk video. 20

2 21 7. Model Assault Rifles Pada menu ini penulis memberikan animasi dalam bentuk 3D dari senjata Assault Rifles yang bisa diputar putar n diganti warna. 8. Specification Assault Rifles Pada menu menampilkan spesikasi dari senjata Assault Rifles. 9. Simulation Assault Rifles Pada menu ini penulis memberikan animasi simulasi dalam bentuk video dan suara dari senjata Assault Rifles. 10. Part Assault Rifles Pada menu ini penulis memberikan animasi perbagian dari senjata Assault Rifles dalam bentuk video. 11. Aplication Creator Pada menu ini penulis memberikan sedikit text tentang pembuat. 3.2 Perancangan Aplikasi Pada bagian ini akan dijelaskan secara rinci perancangan Aplikasi Pemodelan Senjata Api Berbasis 3D yg meliputi pemodelan Use case diagram, activity diagram Pemodelan Use case Diagram Use case diagram mendeskripsikan interaksi tipikal antara para pengguna sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan (fowler, 2005:141). Diagram ini menunjukkan fungsionalitas suatu Sistem atau kelas dan bagian sistem berinteraksi dengan dunia luar. Use case diagram Aplikasi Pemodelan Senjata Api Berbasis 3D secara umum dapat dlihat pada gambar 3.1

3 22 Melihat Model Senjata Api Melihat Spesifikasi Senjata Api Melihat Video Senjata Api Gambar 3.1 Use case Diagram Aplikasi Dari gambaran usecase diatas dapat dijelaskan keterangan dari usecase sebagai berikut : Usecase Analisis Melihat Model Senjata Api Nama Usecase Overview Primary Actor Starting Point Ending Point Flow of Event Alternative Flow of Event Melihat Model Senjata Api Sistem akan menampilkan halaman yang berisi model 3 dimensi dari senjata api sesuai senjata api yang dipilih oleh pengguna Use case ini dimulai ketika pengguna hendak melihat model senjata api Sistem menampilkan halaman model 3 dimensi dari senjata yang dipilih pengguna dari program masuk ke aplikasi, selanjutnya memilih menu model senjata api untuk melihat model senjata api. dapat memutar, mengganti warna dan memperbesar atau memperkecil model 3 dimensi dari senjata api yang dipilih. -

4 Usecase Design Melihat Model Senjata Api Nama Usecase Overview Primary Actor Starting Point Ending Point Flow of Event Melihat Model Senjata Api Sistem akan menampilkan halaman yang berisi model 3 dimensi dari senjata api sesuai senjata api yang dipilih oleh pengguna Use case ini dimulai ketika pengguna hendak melihat model senjata api Sistem menampilkan halaman model 3 dimensi dari senjata yang dipilih pengguna dari program menekan icon aplikasi untuk masuk ke sistem, Sistem menampilan screen splash dan menu Go To Menu. memilih Go To menu. Sistem menampilkan sub sub menu. memilih menu model senjata api. Sistem menampilan model senjata api dalam bentuk 3 dimensi dan button untuk zoom,change color dan memutar model. Setelah masuk kemenu model senjata api, pengguna bisa memutar mutar, memperbesar atau memperkecil dan merubah model senjata api Alternative Flow of Event -

5 Usecase Analisis Melihat Spesifikasi Senjata Api Nama Usecase Overview Primary Actor Starting Point Ending Point Flow of Event Alternative Flow of Event Melihat Spesifikasi Senjata Api Sistem akan menampilkan halaman spesifikasi dari senjata api yang dipilih pengguna Use case ini dimulai ketika pengguna hendak melihat model senjata api Sistem menampilkan halaman spesifikasi dari senjata yang dipilih pengguna dari program masuk ke aplikasi, selanjutnya memilih menu spesikasi untuk melihat spesifikasi senjata api Usecase Design Melihat Spesifikasi Senjata Api Nama Usecase Overview Primary Actor Starting Point Ending Point Flow of Event Melihat Spesifikasi Senjata Api Sistem akan menampilkan halaman spesifikasi dari senjata api yang dipilih pengguna Use case ini dimulai ketika pengguna hendak melihat model senjata api Sistem menampilkan halaman spesifikasi dari senjata yang dipilih pengguna dari program menekan icon aplikasi untuk masuk ke sistem, Sistem menampilan screen splash dan menu Go To Menu. memilih Go To menu. Sistem menampilkan sub sub menu. memilih menu spesifikasi senjata api. bisa melihat spesifikasi dari senjata api. Alternative Flow of Event -

6 Usecase Analisis LihatVideo Senjata Api Nama Usecase Overview Primary Actor Starting Point Ending Point Flow of Event Alternative Flow of Event Lihat Hasil Query Data Visual Sistem akan menampilkan video simulasi atau video dari bagian bagian dari senjata api yang dipilih pengguna. Use case ini dimulai ketika pengguna hendak melihat video senjata api Sistem menampilkan halaman video simulasi atau bagian bagian dari senjata yang dipilih pengguna dari program masuk ke aplikasi, selanjutnya memilih menu video simulation untuk melihat video senjata api Usecase Design LihatVideo Senjata Api Nama Usecase Overview Primary Actor Starting Point Ending Point Flow of Event Lihat Hasil Query Data Visual Sistem akan menampilkan video simulasi atau video dari bagian bagian dari senjata api yang dipilih pengguna. Use case ini dimulai ketika pengguna hendak melihat video senjata api Sistem menampilkan halaman video simulasi atau bagian bagian dari senjata yang dipilih pengguna dari program menekan icon aplikasi untuk masuk ke sistem, Sistem menampilan screen splash dan menu Go To Menu. memilih Go To menu. Sistem menampilkan sub sub menu. Sistem masuk ke menu video simulation senjata api dan menampilkan video cara kerja senjata pada saat penembakan.

7 26 bisa melihat cara kerja senjata dengan melihat video dan juga bisa mem pause dan mengulang ulang video tersebut Alternative Flow of Event Pemodelan Diagram Aktivitas Diagram aktivitas menunjukkan langkah demi langkah untuk melakukan komputasi. Setiap langkah adalah sebuah state dalam melakukan sesuatu.diagram ini menggambarkan langkah yang mana yang harus dijalankan secara berurutan dan langkah mana yang bisa dijalankan secara bersamaan. Aliran pengaturan dari aktivitas suatu state ke state berikutnya disebut dengan transition Diagram Aktivitas untuk Model Senjata Api Pada gambar 3.2 aktivitas dimulai ketika user masuk ke aplikasi dan sistem akan menampilkan halaman utama, aktivitas selanjutnya pengguna memilih menu model senjata api, sistem akan menampilkan model 3 dimensi dari senjata api yang dipilih, aktivitas selanjutnya adalah pengguna bisa melihat animasi 3D dari senjata api yang bisa diputar dan diganti background warnanya sesuai yang ada dan diperbesar maupun diperkecil.

8 27 User System Masuk Keaplikasi Menampilkan halaman utama Pilih Model Senjata Api Menampilkan halaman model senjata api Berinteraksi dengan model Memutar model Mengganti warna model Menampilkan Model yang dirubah sesuai user Memperbesar atau memperkecil model Gambar 3.2 Diagram Aktivitas Model Senjata Api Diagram Aktivitas Spesifikasi Senjata Api Pada gambar 3.3 aktivitas dimulai ketika user sudah masuk kedalam menu utama, aktivitas selanjutnya memilih menu spesifikasi Barreta Colt, dan sistem akan menampilkan spesifikasi dari senjata api yang dipilih pengguna.

9 28 User System Masuk Keaplikasi Menampilkan halaman utama Pilih Spesifikasi Senjata Api File tidak ketemu File ketemu Menampilkan Spesifikasi Senjata Api Gambar 3.3 Diagram Aktivitas Spesifikasi Senjata Api Diagram Aktivitas untuk Simulation Senjata Api Pada gambar 3.4 aktivitas dimulai ketika user masuk ke aplikasi dan sistem akan menampilkan halaman utama, aktivitas selanjutnya pengguna memilih menu video senjata api, sistem akan menampilkan video dari senjata api yang dipilih, aktivitas selanjutnya adalah pengguna bisa melihat video dari senjata api yang bisa diputar dan di putar berulang - ulang.

10 29 User System Masuk Keaplikasi Menampilkan halaman utama Pilih Video Senjata Api Video Simulasi video bagian senjata api Menampilkan halaman video senjata api Gambar 3.4 Diagram Aktivitas Video Senjata Api Pemodelan Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktivitas sebuah skenario tunggal. Diagram tsb menunjukkan sejumlah objek contoh dan pesanpesan yang melewati objek-objek di dalam Use case diagram (fowler, 2005:81). Dari bentuk Use case yang telah digambarkan sebelumnya, dapat dibuat sequence diagram Pemodelan Sequence Diagram untuk Menu Model Senjata Api Pada gbr 3.5 sequence diagram menu model senjat api menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk ke menu utama kemudian memilih menu model senjata api, sistem akan menampilkan halaman model senjata api, pengguna melihat gambar 3D yang bisa

11 30 diganti warna, diperbesar dab diperkecil serta memutar - mutarnya, sistem menampilkan halaman. Layar Utama Layar Menu Model 3 dimensi 1.Menuju ke menu utama 2. Melihat model senjata api Tampilan Halaman halaman senjata api Memilih model senjata apil Tampilan Halaman model senjata api Memutar,mengganti warna dan memperbesar atau memperkecil model Tampilan Halaman model senjata api sesuai pengguna Gambar 3.5 Sequence Diagram Model Senjata Api Pemodelan Sequence Diagram untuk Menu Spesifikasi Senjata Api Pada gambar 3.6 sequence diagram menu spesifikasi senjata api menggambarkan skenario dan langkah langkah yang dilakukan pengguna. Pertama pengguna masuk ke menu utama, kemudian masuk ke halaman menu spesifikasi, sistem menampilkan halaman yg dipilih.

12 31 Layar Utama Layar Menu Spesikasi Senjata api 1.Menuju ke menu utama 2. Melihat spesifikasi senjata api Tampilan Halaman Spesifikasi senjata api Masuk Ke halaman Spesifikasi senjata api Tampilan Halaman Spesifikasi senjata api Gambar 3.6 Sequence Diagram Spesifikasi Senjata Api Pemodelan Sequence Diagram untuk Menu Video Senjata Api Pada gambar 3.7 sequence diagram menu simulasi menggambarkan skenario dan langkah-langkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk ke menu utama kemudian memilih menu video senjata api, sistem akan menampilkan halaman video senjata api, pengguna melihat dan bisa mempause dan memutar ulang video simulasi atau bagian bagian dari senjata api, sistem menampilkan halaman.

13 32 Layar Utama Layar Menu Video Senjata Api 1.Menuju ke menu utama 2. Melihat video senjata api Tampilan Halaman video senjata api Memilih video senjata api Tampilan Halaman video senjata api Memilih video simulasi atau bagian - bagian dari senjata Tampilan Halaman video senjata api sesuai pengguna Gambar 3.7 Sequence Diagram Video Senjata Api 3.3 Desain Antar Muka Antarmuka merupakan bagian yang tidak bisa ditinggalkan dalam sebuah aplikasi, antarmuka dalam aplikasi merupakan jembatan antara pengguna dengan aplikasi yang dibuat, antarmuka yang baik akan mempermudah pengguna dalam menggunakan aplikasi dan akan ngurangi kegagalan dalam dalam mengimplementasikan aplikasinya. Dalam aplikasi pemrosesan ini antarmuka menjadi hal yang penting karena inti dari aplikasi merupkan aplikasi yang merubah bahasa string menjadi sebuah tampilan antarmuka yang dimengerti oleh orang umum.

14 33 Pada bagian desain antar muka ini akan digambarkan mengenai tahapantahapan yang akan ditampilkan pada aplikasi pemodelan jenis jenis senjata api Desain Antar Muka Halaman Pembuka Desain antarmuka ini merupakan halaman pembuka sebelum masuk ke halaman desain menu, dihalaman ini terdapat lagu latar. Tugas Akhir Aplikasi Jenis Jenis Senjata Api Berbasis 3 Dimensi X NAVIGASI 1. klik Go To Menu untuk masuk ke Halaman Menu 2. Klik tanda X yang terletak di kanan atas untuk keluar dari aplikasi 3D Go To Menu Go To Menu KETERANGAN 1.Judul Skripsi memakai Font Book Antiqua, 12 point 2.Tulisan Go To Menu memakai Font Georgia, 10 point Gambar 3.8 Rancangan Halaman Pembuka

15 Desain Antar Muka Halaman Menu Di halaman ini ada beberapa menu. Dan setiap tombol menu yang dipilih akan keluar suara sesuai dengan tombol menu yang dipilih. Form Title Tombol 1 Tombol 2 Tombol 3 Tombol 4 COPYRIGHT 2011 WEAPON MENU Model Assault Rifles Spesifikasi Assault Rifles Simulasi Assault Rifles Aplication Creator Tombol 5 Tombol 6 Tombol 7 Model Barreta Colt Spesifikasi Barreta Colt Simulasi Barreta Colt KETERANGAN 1 Tulisan WEAPON MENU memakai Font Book Antiqua, 60 point 2. Tulisan COPYRIGHT 2011 memakai Font Book Antiqua, 12 point 3. Tulisan Model Assault Rifles memakai Font Book Antiqua, 16 point 4. Tulisan Model Barreta Colt memakai Font Book Antiqua, 16 point 5. Tulisan Spesifikasi Assault Rifles memakai Font Book Antiqua, 16 point 6. Tulisan Spesifikasi Barreta Colt memakai Font Book Antiqua, 16 point 7. Tulisan Simulasi Assault Rifles memakai Font Book Antiqua, 16 point 8. Tulisan Simulasi Barreta Colt memakai Font Book Antiqua, 16 point 9. Tulisan Aplication Creator memakai Font Book Antiqua, 16 point NAVIGASI 1. Bila User menekan tombol Model Assault Rifles maka akan masuk ke halaman model senjata assault rifles 2. bila User menekan tombol Spesifikasi Assault Rifles maka akan masuk ke halaman spesifikasi Assault rifles 3. Bila User menekan tombol Simulasi Assault Rifles maka akan masuk ke halaman Simulasi Assault Rifles 4. Bila User Menekan tombol Aplication Creator maka akan masuk ke halaman aplication creator 5. Bila User menekan tombol Model Barreta Colt maka akan masuk ke halaman model barreta colt 6. Bila User menekan tombol Spesifikasi Barreta Colt maka akan masuk ke halaman spesifikasi barreta colt 7. Bila User menekan tombol Simulai Barreta Colt maka akan masuk ke halaman simulasi barreta colt 8. Bila User menekan tombol X yang terletak di kanan atas halaman Weapon Menu maka akan menutup aplikasi Gambar 3.9 Rancangan Halaman Menu Utama

16 Desain Antar Muka Model Barreta Colt Di halaman ini ada obyek 3 dimensi dari senjata barreta colt yang bisa dibesarkan, kecilkan, diputar dan diganti warna dengan menekan menu yang ada. Dan setiap tombol menu yang dipilih akan keluar suara sesuai dengan tombol menu yang dipilih. Form Title Kiri Zoom In merah Coklat Hijau Tua Pink Orange Kuning Default Atas Reset Bawah Kanan Zoom Out Biru Tua Hijau Muda Ungu Biru Muda Barreta Colt Prototype Objek Senjata Barreta Colt KETERANGAN 1. Tulisan Barreta Colt Prototype memakai Font Book Antiqua, 24 point 2. Tulisan Default memakai Font Book Antiqua, 14 point 3. Tulisan Back To Menu memakai Font Book Antiqua,16 point Back To Menu NAVIGASI 1. Bila User menekan tombol navigasi Kanan maka objek senjata Barreta Colt akan bergerak kekanan 2. Bila User menekan tombol navigasi Kiri maka objek senjata Barreta Colt akan bergerak kekiri 3. Bila User menekan tombol navigasi Atas maka objek senjata Barreta Colt akan bergerak keatas 4. Bila User menekan tombol navigasi Bawah maka objek senjata Barreta Colt akan bergerak kebawah 5. Bila User menekan tombol Zoom In maka objek senjata akan membesar 6. Bila User menekan tombol Zoom Out maka objek senjata akan mengecil 7. Bila User menekan tombol warna Merah maka sarna objek senjata Barreta Colt akan berubah merah 8. Bila User menekan tombol warna Coklat maka sarna objek senjata Barreta Colt akan berubah coklat 9. Bila User menekan tombol warna Hijau Tua maka sarna objek senjata Barreta Colt akan berubah hijau tua 10. Bila User menekan tombol warna Biru Tua maka sarna objek senjata Barreta Colt akan berubah biru tua 11. Bila User menekan tombol warna Ungu maka sarna objek senjata Barreta Colt akan berubah ungu 12. Bila User menekan tombol warna Pink maka sarna objek senjata Barreta Colt akan berubah pink 13. Bila User menekan tombol warna Orange maka sarna objek senjata Barreta Colt akan berubah orange 14. Bila User menekan tombol warna Kuning maka sarna objek senjata Barreta Colt akan berubah kuning 15. Bila User menekan tombol warna Hijau Muda maka sarna objek senjata Barreta Colt akan berubah hijau muda 16. Bila User menekan tombol warna Biru Muda maka sarna objek senjata Barreta Colt akan berubah biru muda 17. Bila User menekan tombol Back To Menu maka akan kembali ke halaman weapon menu 18. Bila User menekan tombol X yang terletak di kanan atasa halaman maka akan menutup aplikasi Gambar 3.10 Rancangan Halaman Model Barreta Colt

17 Desain Antar Muka Simulasi Barreta Colt Di halaman ini ada video simulasi yang bisa diputar berulang ulang dari penggunaan senjata barreta colt yang disertai penjelasan dengan suara, sehingga pengguna akan lebih mengerti karena didukung oleh suara dan gambar. Gambar 3.11 Rancangan Halaman Simulasi Barreta Colt

18 Desain Antar Muka Bagian Barreta Colt Di halaman ini beberapa menu yang bisa dipilih dan setiap tombol menu yang dipilih akan keluar suara dan akan menampilkan video tentang bagian bagian dari senjata api. Form Title Tombol 1 Tombol 2 Laras Senjata Magazines PART WEAPON Tombol 3 Tombol 4 Per Pelontar Silinder NAVIGASI 1. Bila User menekan tombol Back To Menu maka akan kembali ke halaman Weapon Menu 2. Bila User Mnekan tombol X yang berada di kanan atas halaman maka akan menutup aplikasi 3. Bila User menekan tombil 1 maka akan menampilkan video tentang laras senjata 4. Bila User menekan tombil 2 maka akan menampilkan video tentang magazines 5. Bila User menekan tombil 3 maka akan menampilkan video tentang per pelontar 6. Bila User menekan tombil 4 maka akan menampilkan video tentang silinder Back To Menu KETERANGAN 1. Tulisan Back To Menu memakai Bookman Old Style, 16 point 2. Semua tulisan selain Back To Menu memakai Georgia, 20 point Gambar 3.14 Rancangan Halaman Bagian Barreta Colt