29
BAB III ANALISA DAN PERANCANGAN
3.1
Persiapan Membuat Animasi Animasi ini dibuat secara interaktif dan menarik agar pengguna aplikasi ini tidak merasa bosan ataupun jenuh dengan aplikasi yang sudah dibuat ini. Aplikasi ini menampilkan teks - teks serta terdapat kuis dengan animasi untuk melatih para mahasiswa/i dalam belajar yang di sertai dengan suara-suara yang dapat menarik pengguna untuk melihatnya.
3.2
Metode Pembuatan Aplikasi 3.2.1. Konsep Aplikasi bantu mata kuliah sistem tersebar dengan animasi menggunakan adobe flash cs3 ini berisi tentang beberapa materi – materi perkuliahan sistem tersebar dan terdapat kuis mata kuliah sistem tersebar. Konsep aplikasi ini adalah sebagai berikut : a. Judul : “Aplikasi Bantu Mata Kuliah Sistem Tersebar Dengan Animasi Menggunakan Adobe Flash CS3” b. Bentuk aplikasi : Media kuliah sistem tersebar secara interaktif. c. Suara : Menggunakan mp3 dari koleksi pribadi penulis.
30
d. Interaktif : Menggunakan link berupa tombol yang memungkinkan user menuju ke halaman yang diinginkan. e. Animasi : Animasi gambar dan tombol dibuat oleh penulis dan sebagian diperoleh dari internet. f. Gambar : Menggunakan gambar berformat PNG dan JPEG
3.2.2. Perancangan Pada tahap ini penulis melakukan perancangan aplikasi berupa perancangan Storyboard, Use case diagram, Activity Diagram, Sequence Diagram, dan perancangan antar muka (user interface). 1.
Judul Pada halaman judul ini di beri tombol start dan user di arahkan untuk menekan tombol start yang akan membawanya masuk ke halaman home (Menu Utama).
2.
Home Pada halaman home / menu utama ini di beri tombol materi, tombol profil, tombol kuis, tombol keluar.
31
3.
Materi Pada halaman materi, para mahasiswa/i lebih diarahkan untuk mengetahui, mempelajari dan membaca penjelasan-penjelasan pada halaman materi. Pada halaman materi tersebut memberikan penjelasan mengenai perkuliahan sistem tersebar.
4.
Kuis Pada halaman kuis, setelah mahasiswa membaca penjelasan dari halaman materi maka mahasiswa lebih diarahkan untuk mengerjakan latihan soal kuis. Bertujuan untuk mengetahui sejauh mana mahasiswa memahami mata kuliah sistem tersebar.
5.
Profil Pada halaman profil, bertujuan mengetahui informasi data - data penulis dan foto penulis.
6.
Keluar Pada halaman keluar, diarahkan untuk memilih apakah ingin keluar dari aplikasi atau kembali ke halaman menu utama.
3.2.2.1 Perancangan struktur navigasi Perancangan struktur navigasi ini sangat penting didalam membuat suatu animasi. struktur navigasi ini merupakan arah dari perjalanan aplikasi animasi ini, struktur
32
navigasi ini dibuat untuk dapat membantu penulis menentukan alur perjalanan serta acuan pembuatan aplikasi dari awal hingga akhir. Berikut rancangan struktur navigasi :
JUDUL
MENU UTAMA
MATERI
KUIS
PROFIL
Gambar 3.1 Diagram struktur navigasi 3.2.2.2 Perancangan storyboard Storyboard 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. Satu kolom dalam storyboard mewakili satu tampilan dilayar monitor.
33
1.
Storyboard halaman judul APLIKASI BANTU MATA KULIAH SISTEM TERSEBAR DENGAN ANIMASI MENGGUNAKAN ADOBE FLASH CS3
MASUKAN NAMA ANDA
1
2 3
MASUK
4
Gambar 3.2 Storyboard halaman judul Keterangan : 1. Judul
: Aplikasi bantu mata kuliah sistem tersebar dengan animasi menggunakan adobe flash cs3
2. Teks
: Masukan nama anda
3. Untuk Input nama 4. Button untuk masuk 2. Storyboard halaman menu utama Judul Aplikasi 5 User :
Hari, Jam dan Tanggal 6 8
11. HOME
7 10 9
Gambar 3.3 Storyboard halaman menu utama
34
Keterangan : 5. Judul
: Aplikasi bantu mata kuliah sistem tersebar dengan animasi menggunakan adobe flash cs3
6. Tombol Profil 7. Tombol Kuis 8. Tombol Materi 9. Tombol Keluar 10. Animasi 11. Tombol kembali ke halaman menu utama 3.
Storyboard halaman materi Judul Aplikasi User :
Hari, Jam dan Tanggal 12 13
14 15 16 Gambar 3.4 Storyboard halaman materi Keterangan : 12. Materi
: Koordinator Election pada sitem tersebar
13. Materi
: Mobile Communication pada sistem tersebar
14. Materi
: Pentingnya pengiriman pesan pada sistem tersebar
15. Materi
: TCP dan UDP pada sistem tersebar
35
16. Tombol kembali ke halaman menu utama
4.
Storyboard halaman kuis Judul Aplikasi User : Kuis
Hari, Jam dan Tanggal 17
18 19 Gambar 3.5 Storyboard halaman kuis Keterangan : 17. Teks petunjuk mengerjakan kuis 18. Tombol untuk memulai kuis 19. Tombol kembali ke halaman menu utama 5.
Storyboard setelah klik button No. 18 ( Tombol untuk memulai kuis ) Judul Aplikasi User :
Hari, Jam dan Tanggal
Kuis
20
21 Gambar 3.6 Storyboard setelah klik button No. 18 ( Tombol untuk memilai kuis )
36
Keterangan : 20. Soal kuis 21. Tombol kembali ke halaman menu utama 6.
Storyboard setelah selesai mengerjakan kuis Judul Aplikasi User : Kuis
Hari, Jam dan Tanggal 22
23 24 Gambar 3.7 Storyboard setelah selesai mengerjakan kuis Keterangan : 22. Hasil nilai dari semua soal yang dikerjakan 23. Tombol untuk mengerjakan ulang kuis dari awal 24. Tombol kembali ke halaman menu utama 7.
Storyboard halaman profil Judul Aplikasi User :
Hari, Jam dan Tanggal 25
27
26 Gambar 3.8 Storyboard halaman profil
37
Keterangan : 25. Photo profil 26. Teks biodata penulis 27. Tombol kembali ke halaman menu utama
8.
Storyboard halaman keluar
28
29
30
Gambar 3.9 Storyboard halaman keluar Keterangan : 28. Teks
: Apakah anda ingin keluar ?
29. Ya
: Untuk keluar dari aplikasi
30. Tidak
: Untuk kembali ke aplikasi
3.2.2.3
Perancangan use case diagram
Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan “bagaimana”.
38
Sebuah use case merepresentasikan sebuah interaksi antara aktor dengan sistem. Use case merupakan sebuah pekerjaan tertentu, misalnya login ke sistem, meng-create sebuah daftar belanja, dan sebagainya. Seorang/sebuah aktor adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem untuk melakukan pekerjaan-pekerjaan tertentu. http://ikyoesan.awardspace.com/tugas/T02_c.pdf
Gambar 3.10 Use case diagram Aktor utama pada aplikasi ini adalah user. Dari identifikasi aktor tersebut, didapatkan suatu usecase diagram yang menampilkan interaksi antara user / pengguna dengan usecase. Sehingga terjadinya skenario. Berikut ini adalah deskripsi dari usecase yang telah digambarkan diatas : 1. Materi Nama
: Materi
Aktor
: User
39
Deskripsi : Disini user dapat memperoleh penjelasan tentang materi – materi apa saja yang akan dibahas pada kuliah sistem tersebar. Skenario : a. ketika user mengklik / menekan tombol materi b. maka sistem akan menampilkan halaman materi c. sistem akan menampilkan halaman yang dipilih oleh user 2. Kuis Nama
: Kuis
Aktor
: User
Deskripsi : Disini user dapat mencoba mengerjakan soal – soal kuis yang sudah disediakan oleh sistem tentang mata kuliah sistem tersebar. Skenario : a. ketika user mengklik / menekan tombol Kuis b. maka sistem akan menampilkan halaman Kuis c. sistem akan menampilkan halaman yang dipilih oleh user 3. Profil Nama
: Profil
Aktor
: User
Deskripsi : Disini user dapat mengetahui informasi data – data dari penulis ( pembuat aplikasi ) Skenario : a. ketika user mengklik / menekan tombol profil
40
b. maka sistem akan menampilkan halaman profil c. sistem akan menampilkan halaman yang dipilih oleh user 4. Keluar Nama
: Keluar
Aktor
: User
Deskripsi : Disini user dapat keluar dari aplikasi yang sedang berjalan. Skenario : a. ketika user mengklik / menekan tombol keluar b. maka sistem akan menampilkan halaman keluar c. sistem akan menampilkan halaman yang dipilih oleh user
3.2.2.4 Perancangan activity diagram Activity diagram menunjukkan langkah demi langkah untuk melakukan komputasi. Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Diagram ini menggambarkan langkah yang mana yang harus dijalankan secara berurutan dan langkah yang mana yang bisa dijalankan secara bersamaan.
1. Perancangan activity diagram untuk halaman menu utama Aktifitas dimulai ketika pengguna memasukkan namanya dan kemudian pengguna memilih masuk, kemudian sistem menampilkan halaman menu utama, aktifitas selanjutnya adalah memilih menu yang terdiri dari materi, kuis, profil dan keluar. Kemudian sistem akan menampilkan halaman menu yang dipilih.
41
USER
Masukan nama pengguna
SISTEM
Memilih masuk
Menampilkan halaman Menu Utama
Materi
Kuis
Menampilkan halaman yang dipilih
Profil
Keluar
Gambar 3.11 Activity Diagram halaman menu utama
2. Perancangan activity diagram untuk halaman materi Aktifitas dimulai ketika pengguna memilih tombol materi. Selanjutnya sistem akan
42
menampilkan halaman materi. Aktivitas selanjutnya adalah memilih menu materi yang sudah disediakan oleh sistem. Kemudian sistem akan menampilkan halaman menu yang dipilih. USER
Memilih menu materi
SISTEM
Menampilkan halaman materi
Materi 1 Materi 2 Materi 3
Menampilkan halaman menu yang dipilih
Materi 4 Gambar 3.12 Activity diagram halaman materi 2. Perancangan activity diagram untuk halaman kuis Aktifitas dimulai ketika pengguna memilih tombol kuis, kemudian sistem menampilkan halaman kuis, aktifitas selanjutnya adalah memilih tombol mulai yang dimaksudkan untuk awal mulai mengerjakan soal kuis. Setelah memilih tombol mulai, sistem akan menampilkan soal soal berupa pilihan ganda, aktifitas selanjutnya adalah memilih jawaban A, B, C, atau D.
43
USER
Memilih tombol Kuis
SISTEM
Menampilkan halaman Kuis
Memilih mulai Menampilkan soal no.1 Memilih jawaban, Jika jawaban salah, maka sistem akan langsung menampilkan jawaban yang benar dengan warna teks yang berbeda. Memilih jawaban, Jika jawaban salah, maka sistem akan langsung menampilkan jawaban yang benar dengn warna teks yang berbeda. Memilih jawaban, Jika jawaban salah, maka sistem akan langsung menampilkan jawaban yang benar dengn warna teks yang berbeda.
Memilih jawaban, Jika jawaban salah, maka sistem akan langsung menampilkan jawaban yang benar dengn warna teks yang berbeda.
Menampilkan soal no.2
Menampilkan soal no.3
Menampilkan soal no.4
Menampilkan nilai benar dan salah
Gambar 3.13 Activity diagram halaman kuis
44
3.2.2.5 Perancangan sequence diagram Sebuah sequence diagram secara khusus menjabarkan aktivitas sebuah skenario tunggal. Diagram tersebut menunjukkan sejumlah objek contoh dan pesan-pesan melalui objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah digambarkan sebelumnya, dapat dibuat sequence diagram. 1. Perancangan sequence diagram untuk halaman materi Sequence diagram untuk halaman informasi menggambarkan skenario dan langkahlangkah yang dilakukan pengguna. Pertama pengguna masuk ke halaman menu utama, kemudian sistem menampilkan halaman menu utama, selanjutnya pengguna dapat memilih menu materi. Kemudian masuk ke halaman yang dipilih maka sistem akan menampilkan halaman yang dipilih.
Halaman Menu Utama
Halaman yang dipilih
Halaman Materi
User / Pengguna
a
b c
Gambar 3.14 Sequence diagram halaman Materi
45
Keterangan : a. User masuk halaman menu utama b. Kemudian user memilih menu materi c. Maka system akan menampilkan materi yang dipilih 2. Perancangan sequence diagram untuk halaman kuis Sequence diagram halaman kuis menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama kemudian memilih menu kuis, kemudian sistem menampilkan petunjuk soal, lalu sistem akan menampilkan soal untuk dikerjakan, selanjutnya pengguna memilih jawaban, sistem mengecek jawaban, kemudian sistem menampilkan nilai benar dan salah.
Halaman Menu Utama
Halaman Kuis
User / pengguna b a c
Gambar 3.15 Sequence diagram halaman kuis
46
Keterangan : a. User masuk ke halaman menu utama b. Kemudian user memilih menu kuis c. Lalu user menjawab soal-soal yang sudah tersedia oleh system 3.2.2.6 Perancangan STD (State Transition Diagram) State transition diagram (STD) menunjukkan bagaimana sistem bertingkah laku sebagai akibat dari kejadian eksternal. Untuk melakukannya, STD menunjukkan berbagai model tingkah laku (disebut state) sistem dan cara di mana transisi dibuat dari state satu ke state lainnya. STD berfungsi sebagai dasar bagi pemodelan tingkah laku. 1. Perancangan STD halaman menu utama Halaman judul disini merupakan tampilan awal ketika program ini dijalankan. Dimana pengoprasiannya mengklik aplikasi .exe. kemudia halaman ini mengharuskan user memasukan nama sebagai data dan informasi didalam aplikasi bantu mata kuliah sistem tersebar dengan animasi menggunakan adobe flash cs3 ini. Setelah itu mengklik tombol masuk, untuk masuk ke halaman menu utama. Pada halaman menu utama terdapat menu-menu untuk mempermudah user menggunakan aplikasi ini, user dapat memilih materi untuk dapat memperoleh penjelasanpenjelasan tentang materi perkuliahan sistem tersebar, user dapat memilih menu kuis untuk mengerjakan soal – soal kuis yang telah disediakan oleh penulis ( pembuat aplikasi ), user dapat memilih menu profil untuk melihat informasi data – data dari penulis, dan user dapat memilih menu keluar untuk keluar dari aplikasi.
47
Sistem Operasi
1
Judul
2
Halaman Menu Utama 8
3 4
Keluar
5 Kuis
6
9 Profil
7 Materi
Gambar 3.16 STD halaman menu utama Keterangan : 1. Klik aplikasi “.exe” tampilkan halaman Judul 2. Masukan “nama” dan klik “masuk” tampilkan halaman menu utama 3. Klik “keluar” maka akan “keluar” dari aplikasi
48
4. Klik “home” maka akan menampilkan halaman “Menu Utama” 5. Klik “Kuis” maka akan menampilkan menu “Kuis” 6. Klik “home” maka akan menampilkan halaman “Menu Utama” 7. Klik “Materi” maka akan menampilkan menu “Materi” 8. Klik “home” maka akan menampilkan halaman “Menu Utama” 9. Klik “Profil” maka akan menampilkan informasi data – data penulis 2. Perancangan STD halaman materi Pada halaman materi merupakan uraian penjelasan-penjelasan materi dalam pelajaran mata kuliah sistem tersebar. User dapat memilih penjelasan-penjelasan tentang mata kuliah sistem tersebar. Materi 2
Materi 1 10
8
9
7
1 Halaman Menu Utama
Halaman materi 2
5
3 4
6
Materi 3
Gambar 3.17 STD halaman materi
Materi 4
49
Keterangan : 1.
Klik “Materi” maka akan menampilkan halaman “Materi”
2.
Klik “Home” maka akan menampilkan halaman “Menu Utama”
3.
Klik “materi 3” maka akan menampilkan halaman “materi 3”
4.
Klik “Home” maka akan menampilkan halaman “Menu Utama”
5.
Klik “materi 4” maka akan menampilkan halaman “materi 4”
6.
Klik “Home” maka akan menampilkan halaman “Menu Utama”
7.
Klik “materi 2” maka akan menampilkan halaman “materi 2”
8.
Klik “Home” maka akan menampilkan halaman “Menu Utama”
9.
Klik “materi 1” maka akan menampilkan halaman “materi 1”
10. Klik “Home” maka akan menampilkan halaman “Menu Utama”
3. Perancangan STD halaman kuis Pada halaman kuis merupakan halaman dimana user dapat mengerjakan latihan soal yang bertujuan untuk sejauh mana mahasiswa dapat memahami materi perkuliahan sistem tersebar . User harus mengklik mulai ketika di halaman kuis maka user dapat mengerjakan 4 latihan soal berupa pilihan ganda. Setelah user menjawab semua soal maka akan nilai jawaban benar dan salah akan di tampilkan. User dapat mengerjakan soal kuis kembali dengan mengklik tombol coba lagi.
50
1 Halaman Menu Utama
2
Halaman Kuis
Soal 1 - 4
5 3 Nilai 4 Gambar 3.18 STD halaman kuis Keterangan : 1. Klik “Kuis” maka akan menampilkan halaman “Kuis” 2. Klik “mulai” maka akan menampilkan halaman “soal kuis 1-4” 3. Sistem akan menampilkan nilai yang di peroleh oleh user 4. Klik “coba lagi” maka akan menampilkan halaman “Kuis” 5. Klik “Home” maka akan kembali ke halaman “Menu Utama” 3.3
Metode blackbox testing Skenario yang dijelaskan antara lain skenario judul, menu utama, materi, kuis, keluar,
dan profil. Tabel 3.1 Skenario pengujian Menu yang diuji
Bagian yang diuji
Input
51
Judul
Klik tombol masuk
Menampilkan halaman Menu Utama
Menu Utama
Klik tombol Materi
Menampilkan halaman Materi
Klik tombol Kuis
Menampilkan halaman Kuis
Klik tombol keluar
Menampilkan halaman Keluar
Klik tombol profil
Menampilkan halaman profil
Klik tombol 1.Koordinator election pada sistem tersebar
Menampilkan halaman Koordinator election pada sistem tersebar
Klik tombol 2.Mobile communication
Menampilkan halaman mobile communication
Klik tombol 3.Pentingnya pengiriman pesan pada sistem tersebar
Menampilkan halaman pentingnya pengiriman pesan pada sistem tersebar
Klik tombol 4.TCP dan UDP pada sistem tersebar
Menampilkan halaman TCP dan UDP pada sistem tersebar
Klik tombol mulai
Menampilkan soal kuis
Memilih jawaban
Menampilkan nilai benar dan salah.
Klik tombol coba lagi
Menampilkan halaman latihan memulai soal
Klik tombol keluar
Menutup semua aplikasi
Klik tombol kembali
Menampilkan kembali halaman Menu Utama
Materi
Kuis
Keluar
