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 : 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 1 MASUKAN NAMA ANDA 2 3 MASUK 4 Gambar 3.2 Storyboard halaman judul 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 User : 5 Hari, Jam dan Tanggal 11. HOME 8 6 10 9 7 Gambar 3.3 Storyboard halaman menu utama
34 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 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 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 : Kuis 20 Hari, Jam dan Tanggal 21 Gambar 3.6 Storyboard setelah klik button No. 18 ( Tombol untuk memilai kuis )
36 20. Soal kuis 21. Tombol kembali ke halaman menu utama 6. Storyboard setelah selesai mengerjakan kuis Judul Aplikasi User : Kuis 22 Hari, Jam dan Tanggal 23 24 Gambar 3.7 Storyboard setelah selesai mengerjakan kuis 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 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 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 Aktor : Materi : 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 Aktor : Kuis : 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 Aktor : Profil : 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 Aktor : Keluar : 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 SISTEM Masukan nama pengguna Memilih masuk Menampilkan halaman Menu Utama Materi Kuis Profil Menampilkan halaman yang dipilih 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 SISTEM Memilih menu materi 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 SISTEM Memilih tombol Kuis 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. Menampilkan soal no.2 Memilih jawaban, Jika jawaban salah, maka sistem akan langsung menampilkan jawaban yang benar dengn warna teks yang berbeda. Menampilkan soal no.3 Memilih jawaban, Jika jawaban salah, maka sistem akan langsung menampilkan jawaban yang benar dengn warna teks yang berbeda. Menampilkan soal no.4 Memilih jawaban, Jika jawaban salah, maka sistem akan langsung menampilkan jawaban yang benar dengn warna teks yang berbeda. 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. User / Pengguna Halaman Menu Utama Halaman Materi Halaman yang dipilih a b c Gambar 3.14 Sequence diagram halaman Materi
45 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 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 9 Keluar 4 6 Profil 5 7 Kuis Materi Gambar 3.16 STD halaman menu utama 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 1 10 8 Materi 2 9 7 1 Halaman Menu Utama Halaman materi 2 3 5 Materi 3 4 6 Materi 4 Gambar 3.17 STD halaman materi
49 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 Halaman Kuis 2 Soal 1-4 5 3 Nilai 4 Gambar 3.18 STD halaman kuis 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 dan profil. Skenario yang dijelaskan antara lain skenario judul, menu utama, materi, kuis, keluar, Tabel 3.1 Skenario pengujian Menu yang diuji Bagian yang diuji Input
51 Judul Klik tombol masuk Menampilkan halaman Menu Utama Menu Utama Materi Kuis Klik tombol Materi Klik tombol Kuis Klik tombol keluar Klik tombol profil Klik tombol 1.Koordinator election pada sistem tersebar Klik tombol 2.Mobile communication Klik tombol 3.Pentingnya pengiriman pesan pada sistem tersebar Klik tombol 4.TCP dan UDP pada sistem tersebar Klik tombol mulai Menampilkan halaman Materi Menampilkan halaman Kuis Menampilkan halaman Keluar Menampilkan halaman profil Menampilkan halaman Koordinator election pada sistem tersebar Menampilkan halaman mobile communication Menampilkan halaman pentingnya pengiriman pesan pada sistem tersebar Menampilkan halaman TCP dan UDP pada sistem tersebar Menampilkan soal kuis Memilih jawaban Klik tombol coba lagi Menampilkan nilai benar dan salah. Menampilkan halaman latihan memulai soal Keluar Klik tombol keluar Menutup semua aplikasi Klik tombol kembali Menampilkan kembali halaman Menu Utama