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
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.
3.2.1 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
22
Melihat Model Senjata Api
Melihat Spesifikasi Senjata Api
Melihat Video Senjata Api
Pengguna
Gambar 3.1 Use case Diagram Aplikasi
Dari gambaran usecase diatas dapat dijelaskan keterangan dari usecase sebagai berikut : 3.2.1.1. Usecase Analisis Melihat Model Senjata Api Nama Usecase
Melihat Model Senjata Api
Overview
Sistem akan menampilkan halaman yang berisi model 3 dimensi dari senjata api sesuai senjata api yang dipilih oleh pengguna
Primary Actor
Pengguna
Starting Point
Use case ini dimulai ketika pengguna hendak melihat model senjata api
Ending Point
Sistem menampilkan halaman model 3 dimensi dari senjata yang dipilih pengguna dari program
Flow of Event
Pengguna masuk ke aplikasi, selanjutnya memilih menu model senjata api untuk melihat model senjata api. Pengguna dapat memutar, mengganti warna dan memperbesar atau memperkecil model 3 dimensi dari senjata api yang dipilih.
Alternative Flow of Event
23
3.2.1.2. Usecase Design Melihat Model Senjata Api Nama Usecase
Melihat Model Senjata Api
Overview
Sistem akan menampilkan halaman yang berisi model 3 dimensi dari senjata api sesuai senjata api yang dipilih oleh pengguna
Primary Actor
Pengguna
Starting Point
Use case ini dimulai ketika pengguna hendak melihat model senjata api
Ending Point
Sistem menampilkan halaman model 3 dimensi dari senjata yang dipilih pengguna dari program
Flow of Event
Pengguna menekan icon aplikasi untuk masuk ke sistem, Sistem menampilan screen splash dan menu Go To Menu. Pengguna memilih Go To menu. Sistem menampilkan sub – sub menu. Pengguna 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
24
3.2.1.3. Usecase Analisis Melihat Spesifikasi Senjata Api Nama Usecase
Melihat Spesifikasi Senjata Api
Overview
Sistem akan menampilkan halaman spesifikasi dari senjata api yang dipilih pengguna
Primary Actor
Pengguna
Starting Point
Use case ini dimulai ketika pengguna hendak melihat model senjata api
Ending Point
Sistem menampilkan halaman spesifikasi dari senjata yang dipilih pengguna dari program
Flow of Event
Pengguna masuk ke aplikasi, selanjutnya memilih menu spesikasi untuk melihat spesifikasi senjata api.
Alternative Flow of Event
3.2.1.4. Usecase Design Melihat Spesifikasi Senjata Api Nama Usecase
Melihat Spesifikasi Senjata Api
Overview
Sistem akan menampilkan halaman spesifikasi dari senjata api yang dipilih pengguna
Primary Actor
Pengguna
Starting Point
Use case ini dimulai ketika pengguna hendak melihat model senjata api
Ending Point
Sistem menampilkan halaman spesifikasi dari senjata yang dipilih pengguna dari program
Flow of Event
Pengguna menekan icon aplikasi untuk masuk ke sistem, Sistem menampilan screen splash dan menu Go To Menu. Pengguna memilih Go To menu. Sistem menampilkan sub – sub menu. Pengguna memilih menu spesifikasi senjata api. Pengguna bisa melihat spesifikasi dari senjata api.
Alternative Flow of Event
25
3.2.1.5. Usecase Analisis LihatVideo Senjata Api Nama Usecase
Lihat Hasil Query Data Visual
Overview
Sistem akan menampilkan video simulasi atau video dari bagian – bagian dari senjata api yang dipilih pengguna.
Primary Actor
Pengguna
Starting Point
Use case ini dimulai ketika pengguna hendak melihat video senjata api
Ending Point
Sistem menampilkan halaman video simulasi atau bagian –bagian dari senjata yang dipilih pengguna dari program
Flow of Event
Pengguna masuk ke aplikasi, selanjutnya memilih menu video simulation untuk melihat video senjata api.
Alternative Flow of Event
3.2.1.6. Usecase Design LihatVideo Senjata Api Nama Usecase
Lihat Hasil Query Data Visual
Overview
Sistem akan menampilkan video simulasi atau video dari bagian – bagian dari senjata api yang dipilih pengguna.
Primary Actor
Pengguna
Starting Point
Use case ini dimulai ketika pengguna hendak melihat video senjata api
Ending Point
Sistem menampilkan halaman video simulasi atau bagian –bagian dari senjata yang dipilih pengguna dari program
Flow of Event
Pengguna menekan icon aplikasi untuk masuk ke sistem, Sistem menampilan screen splash dan menu Go To Menu. Pengguna 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.
26
Pengguna bisa melihat cara kerja senjata dengan melihat video dan juga bisa mem pause dan mengulang – ulang video tersebut Alternative Flow of Event 3.2.2 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.
3.2.2.1 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.
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
3.2.2.2 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.
28
User
Masuk Keaplikasi
System
Menampilkan halaman utama
Pilih Spesifikasi Senjata Api
File tidak ketemu
File ketemu
Menampilkan Spesifikasi Senjata Api
Gambar 3.3 Diagram Aktivitas Spesifikasi Senjata Api
3.2.2.3 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.
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
3.2.3 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.
3.2.3.1 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
30
diganti warna, diperbesar dab diperkecil serta memutar - mutarnya, sistem menampilkan halaman.
Pengguna
Layar Utama
1.Menuju ke menu utama
Layar Menu Model 3 dimensi
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
3.2.3.2 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.
31
Pengguna
Layar Menu Spesikasi Senjata api
Layar Utama
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
3.2.3.3 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.
32
Pengguna
Layar Menu Video Senjata Api
Layar Utama
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.
33
Pada bagian desain antar muka ini akan digambarkan mengenai tahapantahapan yang akan ditampilkan pada aplikasi pemodelan jenis – jenis senjata api. 3.3.1 Desain Antar Muka Halaman Pembuka Desain antarmuka ini merupakan halaman pembuka sebelum masuk ke halaman desain menu, dihalaman ini terdapat lagu latar. Tugas Akhir
X
Aplikasi Jenis Jenis Senjata Api Berbasis 3 Dimensi
3D
NAVIGASI 1. klik Go To Menu untuk masuk ke Halaman Menu 2. Klik tanda X yang terletak di kanan atas untuk keluar dari aplikasi
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
34
3.3.2 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
WEAPON MENU Tombol Model Assault Rifles 1
Tombol Model Barreta Colt 5
Tombol Spesifikasi Assault Rifles 2
Tombol Spesifikasi Barreta Colt 6
Tombol Simulasi Assault Rifles 3
Tombol Simulasi Barreta Colt 7
Tombol Aplication Creator 4
COPYRIGHT 2011
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
35
3.3.3 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
Barreta Colt Prototype Atas
Objek Senjata Barreta Colt
Reset Kiri
Kanan
Bawah Zoom In
Zoom Out
merah
Coklat
Hijau Tua
Biru Tua
Ungu
Pink
Orange
Kuning
Hijau Muda
Biru Muda
Default Back To Menu
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
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
36
3.3.5 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
37
3.3.6
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
PART WEAPON
Tombol 1
Laras Senjata
Tombol 2
Magazines
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