BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Sistem Dalam membangun aplikasi Aplikasi Informasi Perawatan Motor Kawasaki Ninja 150 R Berbasis Multimedia ini penulis menganalisis akan kebutuhan dasar Sistem. Analisis dilakukan terhadap data-data yang mempresentasikan masalah sehinga dapat diketahui spesifikasi sistem yang akan dibangun. Perkembangan teknologi Komputer telah membuat komputer bukan hanya sebagai alat bantu hitung dan pemrosesan data saja, tetapi juga dapat digunakan pada bidang multimedia. Aplikasi Informasi Perawatan Motor Kawasaki Ninja 150 R Berbasis Multimedia dapat digunakan untuk menciptakan sarana belajar yang menarik dan interaktif untuk para pengguna sepeda motor yang suka memperbaiki sepeda motornya sendiri sehinga cocok digunakan sebagai alternative lain untuk sarana belajar selain melalui buku. Di dalam tugas ini dirancang suatu aplikasi Informasi Perawatan Motor Kawasaki Ninja 150 R Berbasis Multimedia berformat bmp,jpg,flv dan mp3.aplikasi ini terdiri atas cara cara perbaikan motor type Kawasaki ninja 150r. Aplikasi yang dirancang ini dapat menjadi alternatif untuk membantu bagaimana cara memperbaiki sepeda motor yang benar karena ditunjang oleh video, gambar dan suara sehingga dapat memudahkan penggunaannya. Program Aplikasi Informasi Perawatan Motor Kawasaki Ninja 150 R Berbasis Multimedia bertujuan untuk pengenalan bagian bagian motor yang paling penting. Aplikasi Informasi Perawatan Motor Kawasaki Ninja 150 R Berbasis Multimedia ini terdiri dari beberapa menu yaitu: 30

2 1. Home Pada menu home penulis menyediakan animasi pada layar pembuka. 2. Materi Pada menu materi penulis menyediakan video dan tips bagaimana cara merawat motor Kawasaki ninja 150r. 3. Materi mengenal sejarah Pada menu ini penulis memberikan pengenalan sejarah dari Kawasaki ninja dari kegenerasi pertama sampai ke generasi yang sekarang. 4. Ninja 150r Pada menu ninja 150r penulis memberikan pengenalan tetang modelmodel motor, spesifikasi motor dan keistimewaan dari Kawasaki ninja 150 r. 5. Galeri Pada menu ini penulis menyediakan berbagai gambar-gambar motor modifikasi Kawasaki ninja 150r. 6. Color Pada menu ini penulis membuat animasi mewarnai sepeda motor Kawasaki Ninja 150r. 3.2 Perancangan Pada bagian ini akan dijelaskan secara rinci perancangan Aplikasi Informasi Perawatan Motor Kawasaki Ninja 150 R Berbasis Multimedia yang meliputi pemodelan Use case diagram dan activity diagram Perancangan Struktur Navigasi Perancangan struktur navigasi ini sangat penting didalam membuat suatu animasi. Struktur navigasi ini merupakan arah dari perjalanan aplikasi ini, struktur navigasi ini dibuat untuk dapat membantu penulis menentukan alur perjalanan serta acuan pembuatan aplikasi dari awal hingga akhir. Sebuah movie flash dapat dibagi dalam berbagai scene. Biasanya suatu scene menampilkan suatu adegan. Pembagian movie ke dalam scene berguna untuk memudahkan dalam 31

3 mengorganisasikan movie, program ini terdiri dari beberapa scene yaitu : scene pembuka, scene menu utama, scene home, scene materi, scene sejarah, scene ninja r, scene galeri, scene color aplikasi dan yang terakhir adalah scene music dan exit. Struktur navigasi yang penulis buat menggunakan struktur navigasi hirarki. Opening In Menu Utama Home Materi Sejarah Ninja R Galeri Color Gambar 3.1 Struktur Navigasi Hierarki Aplikasi Perancangan Storyboard Storyboard adalah rancangan umum suatu aplikasi yang disusun secara berurutan layer demi layer serta dilengkapi dengan penjelasan dan spesifikasi dari setiap gambar, layer, dan teks merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Dengan pencantuman semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Dalam perancangan tampilan ini penulis menjelaskan rancangan tampilan Aplikasi Informasi Perawatan Motor Kawasaki Ninja 150 R Berbasis Multimedia pada setiap masing-masing menu materi. 32

4 1. Storyboard Halaman Menu Utama Gambar 3.2 Storyboard Halaman Menu Utama Pada halaman menu utama terdiri dari beberapa tombol seperti home, materi, sejarah, ninja 150R, galeri, tombol color, musik dan exit. 2. Storyboard Halaman Menu Home Gambar 3.3 Storyboard Halaman Menu Home 33

5 Pada Home ini penulis menyediakan animasi sepeda motor saja. 3. Storyboard Halaman Menu Materi Gambar 3.4 Storyboard Halaman Menu Materi Pada menu materi penulis menyediakan beberapa menu pilihan untuk cara membersihkan karburator, super kips, busi, mengganti oli, aki, mengecek rem, ban, rantai dan beberapa tips. 4. Storyboard Halaman Menu Sejarah 34

6 Gambar 3.5 Storyboard Halaman Menu Sejarah Pada menu sejarah ini penulis menyediakan informasi tentang sejarah dari Kawasaki ninja dari generasi ke generasi. 5. Storyboard Halaman Menu Ninja 150 R Gambar 3.6 Storyboard Halaman Menu Ninja 150R Pada menu ninja 150r ini penulis menyediakan beberapa menu pilihan seperti: over view yang berisi informasi jenis varian warna dari sepeda motor Kawasaki ninja, tab spesifikasi yang berisi tentang spesifikasi dari motor tersebut dan yang terakhir tab detail & feature yang berisi keunggulan dari sepeda motor tersebut. 35

7 6. Storyboard Halaman Menu Galeri Gambar 3.7 Storyboard Halaman Menu Galeri Pada galeri penulis menyediakan gambar-gambar berbagai jenis sepeda motor Kawasaki ninja 150 r yang sudah di modifikasi yang berguna sebagai inspirasi jika ada pengguna Kawasaki ninja 150r yang ingin memodifikasi tunggangannya. 7. Storyboard Halaman Menu Color 36

8 Gambar 3.8 Storyboard Halaman Menu Color Pada menu color ini penulis menyediakan animasi untuk mewarnai sepeda motor yang berguna juga untuk contoh bila sepeda motornya ingin di modifikasi warnanya. 3.3 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 Aplikasi Informasi Perawatan Motor secara umum dapat dlihat pada gambar 3.9 Home Materi Sejarah Ninja 150r Pengguna Color Galeri Gambar 3.9 Use case diagram Aplikasi Berikut adalah deskripsi Use case yang telah digambarkan datas : 1. Nama : Home Aktor : Pengguna Deskripsi : Pengguna dapat memilih menu home Skenario : 37

9 1. Pengguna memilih menu materi home yang terdiri dari teks dan animasi. 2. Sistem masuk ke menu materi home Kondisi awal : Pengguna menerima halaman home yang terdiri animasi sebagai tampilan awal aplikasi. Kondisi akhir: Pengguna dapat melihat tampilan animasi. 2. Nama : Materi Aktor : Pengguna Deskripsi : Pengguna dapat memilih menu materi Skenario : 1. Pengguna memilih menu materi yang terdiri dari karburator,superkips, busi, oli, aki, rem, ban, rantai dan tips 2. Sistem masuk ke menu materi Kondisi awal : Pengguna menerima halaman materi yang terdiri dari karburator,superkips, busi, oli, aki, rem, ban, rantai dan tips Kondisi akhir : Pengguna mempelajari materi materi yang terdiri dari karburator,superkips, busi, oli, aki, rem, ban, rantai dan tips 3. Nama : Mengenal Sejarah Aktor : Pengguna Deskripsi : Pengguna dapat mengenal bagaimana sejarah dari motor Kawasaki ninja 150r Skenario: 1. Pengguna memilih menu sejarah 2. Sistem masuk ke menu mengenal sejarah. 38

10 Kondisi awal : Pengguna menerima halaman mengenal sejarah motor Kawasaki ninja 150r. Kondisi akhir : Pengguna siap mempelajari sejarah ninja dari generasi sampai ke generasi. 4. Nama : Ninja 150r Aktor : Pengguna Deskripsi : Pengguna dapat memilih keterangan dari motor Kawasaki ninja 150r Skenario : 1. Pengguna memilih menu ninja 150r mengenal warna, spesifikasi dan detail features motor Kawasaki ninja 150r 2. Sistem masuk ke menu ninja 150r Kondisi awal : Pengguna menerima halaman materi mengenal ninja 150r yang terdiri dari warna, spesifikasi,detail & features. Kondisi akhir: Pengguna siap mempelajari materi mengenal ninja 150r,spesifikasi, detail & features. 5. Nama : Galeri Actor : Pengguna Deskripsi : Pengguna dapat melihat gambar-gambar sepeda motor kawasaki ninja 150r di menu galeri. Skenario : 1. Pengguna masuk ke menu galeri yang berisi modifikasimodifikasi sepeda motor ninja 150r 2. Sistem masuk ke menu galeri Kondisi awal : 39

11 Pengguna menerima halaman galeri yang berisi gambar-gambar sepeda motor ninja 150r Kondisi akhir : Pengguna melihat gambar-gambar modifikasi sepeda motor ninja 150r 6. Nama : Color Actor : Pengguna Deskripsi : Pengguna dapat mewarnai gambar sepeda motor kawasaki ninja 150r yang ditampilakan melalui browser. Skenario : 1. Pengguna masuk ke menu color yang berisi gambar sepeda motor ninja 150r yang dapat diwarnai. 2. Sistem masuk ke menu galeri Kondisi awal : Pengguna menerima halaman galeri yang berisi gambar-gambar sepeda motor ninja 150r Kondisi akhir : Pengguna melihat gambar-gambar modifikasi sepeda motor ninja 150r 3.4 Pemodelan Activity Diagram Activity diagram 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 aktifitas suatu state ke state berikutnya disebut dengan transition. Digram aktifitas untuk menu home ditunjukkan pada gambar 3.10, diagram aktifitas untuk menu materi ditunjukkan oleh gambar 3.11, diagram aktifitas untuk menu sejarah ditunjukkan oleh gambar 3.12, diagram aktifitas untuk menu ninja 150r ditunjukkan oleh gambar 3.13 dan diagram aktifitas untuk 40

12 menu galeri ditunjukkan oleh gambar 3.14 dan diagram aktifitas untuk menu color ditunjukkan oleh gambar Diagram Aktifitas untuk Menu Home Pada gambar 3.10 aktifitas dimulai ketika user masuk kedalam menu utama, aktifitas selanjutnya memilih menu home,didalam menu home aktifitas selanjutnya adalah pengguna bisa melihat tampilan animasi. Gambar 3.10 activity diagram menu home Diagram Aktifitas untuk Menu Materi Pada gambar 3.11 aktifitas dimulai ketika user sudah masuk kedalam menu utama, aktifitas selanjutnya memilih menu materi, didalam materi aktifitas selanjutnya adalah pengguna bisa melihat menu yang menampilkan video atau artikel mengenai perawatan sepeda motor. 41

13 Gambar 3.11 activity diagram menu materi Diagram Aktifitas untuk Menu Sejarah Pada gambar 3.12 aktifitas dimulai ketika user sudah masuk ke dalam menu utama, aktifitas selanjutnya memilih menu materi sejarah, didalam materi sejarah aktifitas selanjutnya adalah pengguna bisa melihat tampilan artikel mengenai sejarah dari motor Kawasaki ninja

14 Gambar 3.12 Activity Diagram Menu Sejarah Diagram Aktifitas untuk Menu Ninja 150r Pada gambar 3.13 aktifitas dimulai ketika user sudah masuk ke dalam menu utama, aktifitas selanjutnya memilih menu materi ninja 150r, di dalam materi Ninja 150r aktifitas selanjutnya adalah pengguna bisa melihat tampilan gambar dan bacaan dengan cara menekan tombol-tombol tab untuk memanggil dan menampilkan gambar dan artikel. 43

15 Gambar 3.13 activity diagram menu materi ninja 150r Diagram Aktifitas untuk Menu Galeri Pada gambar 3.14 aktifitas dimulai ketika user sudah masuk ke dalam menu utama, selanjutnya memilih menu galeri, aktifitas selanjutnya adalah user dapat melihat beberapa gambar dari modifikasi sepeda motor Kawasaki ninja 150r. 44

16 Gambar 3.14 activity diagram menu galeri Diagram Aktifitas untuk Menu Color Pada gambar 3.15 aktifitas dimulai ketika user sudah masuk ke dalam menu utama, selanjutnya memilih menu color, aktifitas selanjutnya adalah user dapat mewarnai gambar sepeda motor Kawasaki ninja 150r. 45

17 Gambar 3.15 activity diagram menu color 3.5 Pemodelan Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktivitas sebuah skenario tunggal. Diagram tersebut menunjukkan sejumlah objek contoh dan pesan-pesan yang melewati objek-objek di dalam Use case diagram (fowler, 2005:81). Dari bentuk Use case yang telah digambarkan sebelumnya, dapat dibuat sequence diagram yang tampak pada gambar 3.16 sampai gambar Pemodelan Sequence Diagram untuk Menu Home Pada gbr 3.16 sequence diagram menu home menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk ke menu utama, kemudian masuk ke halaman home, sistem menampilkan halaman yang dipilih. 46

18 Gambar 3.16 sequence diagram untuk menu home Pemodelan Sequence Diagram untuk Menu Materi Pada gambar 3.17 sequence diagram menu materi menggambarkan skenario dan langkah langkah yang dilakukan pengguna. Pertama pengguna masuk ke menu utama,kemudian masuk ke halaman menu materi lalu pengguna dapat memilih menu yang di tampilkan di menu materi, sistem menampilkan halaman yang dipilih. Gambar 3.17 sequence diagram untuk menu materi 47

19 3.5.3 Pemodelan Sequence Diagram untuk Menu Sejarah Pada gambar 3.18 sequence diagram menu sejarah menggambarkan skenario dan langkah-langkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk ke menu utama kemudian memilih menu sejarah, sistem akan menampilkan halaman sejarah, pengguna melihat dan membaca sejarah dari Kawasaki ninja 150r, sistem menampilkan halaman. Gambar 3.18 sequence diagram untuk menu sejarah Pemodelan Sequence Diagram untuk Menu Ninja 150r Pada gambar 3.19 sequence diagram menu sejarah menggambarkan skenario dan langkah-langkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk ke menu utama kemudian memilih menu ninja 150r, sistem akan menampilkan halaman ninja 150r, pengguna melihat gambar overview, spesifikasi, detail & features dari motor Kawasaki ninja 150r, sistem menampilkan halaman. 48

20 Gambar 3.19 sequence diagram untuk menu ninja 150r Pemodelan Sequence Diagram untuk Menu Galeri Pada gambar 3.20 sequence diagram menu galeri menggambarkan skenario dan langkah-langkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk ke menu utama kemudian memilih menu galeri, sistem akan menampilkan halaman galeri, pengguna melihat gambar motor Kawasaki ninja 150r dengan berbagai modifikasi, sistem menampilkan halaman. 49

21 Gambar 3.20 sequence diagram untuk menu galeri Pemodelan Sequence Diagram untuk Menu Color Pada gambar 3.21 sequence diagram menu color menggambarkan skenario dan langkah-langkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk ke menu utama kemudian memilih menu color, sistem akan menampilkan halaman color di browser. 50

22 Gambar 3.21 sequence diagram untuk menu color 3.6 Desain Antar Muka Pada bagian desain antar muka ini akan digambarkan mengenai tahapantahapan yang akan ditampilkan pada aplikasi perangkat perawatan dan perbaikan sepeda motor Desain Antar Muka Halaman Pembuka Desain antarmuka ini merupakan halaman pembuka sebelum masuk ke halaman desain menu, dihalaman ini terdapat lagu latar. 51

23 Gambar 3.22 rancangan halaman pembuka Desain Antar Muka Halaman Menu Di halaman ini ada beberapa menu yaitu home, materi, sejarah, ninja 150r, galeri dan menu untuk keluar. Dan setiap tombol menu yang dipilih akan keluar suara sesuai dengan tombol menu yang dipilih. Gambar kelu ar Gambar Materi Sejarah Ninja 150r Galeri Color Teks Kotak Tampilan Gambar 3.23 rancangan halaman Menu Utama 52

24 3.6.3 Desain Antar Muka Halaman Materi Gambar 3.24 merupakan desain antar muka menu materi, pada halaman ini terdapat menu dari masing-masing bagian dari sepeda motor disertai beberapa video dengan suara, sehingga memudahkan pengguna memahami bagaimana cara merawat sepeda motor. Gambar 3.24 rancangan halaman materi Desain Antar Muka Halaman Sejarah Gambar 3.25 merupakan desain antar muka menu sejarah, pada halaman ini terdapat teks yang berisi tentang sejarah dari sepeda motor Kawasaki ninja 150r. 53

25 Gambar kelu ar Gambar Materi Sejarah Ninja 150r Galeri Color Teks Teks Gambar 3.25 rancangan halaman Sejarah Desain Antar Muka Halaman Ninja 150r Gambar 3.26 merupakan desain antar muka menu Ninja 150r, pada halaman ini terdapat gambar jika kita pilih tab pertama, pada tab kedua bila kita pilih maka akan muncul spesifikasi dari sepeda motor ninja 150r, dan pada tab terakhir bila kita pilih maka akan muncul gambar. 54

26 Gambar kelu ar Gambar Materi Sejarah Ninja 150r Galeri Color Overview Spesifikasi Detail & features Teks Animasi Gambar 3.26 rancangan halaman Ninja 150r Desain Antar Muka Halaman Menu Galeri Gambar 3.27 merupakan desain antar muka menu galeri, pada halaman ini terdapat gambar dari jenis-jenis modifikasi sepeda motor ninja 150r. Juga terdapat tombol next dan back yang jika diklik akan pindah ke gambar berikutnya atau sebelumnya. 55

27 Gambar 3.27 rancangan halaman Galeri Desain Antar Muka Halaman Menu Color Gambar 3.28 merupakan desain antar muka menu color, pada halaman ini terdapat gambar sepeda motor Kawasaki ninja 150 yang berwarna polos dan siap untuk di beri warna. Gambar 3.28 rancangan halaman Color 56

28 3.6.8 Desain Antar Muka Halaman Penutup Pada penutup ini akan ditampilkan animasi penutup disertai suara musik dan kata penutup. Setelah beberapa detik maka aplikasi akan tertutup atau keluar. Gambar 3.29 rancangan halaman Penutup 57