BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Analisis Sistem Pada Tugas Akhir ini akan di rancang Sebuah Aplikasi Mata Pelajaran Biologi SMA Kelas X berbasis Multimedia, yaitu suatu Aplikasi yang membantu pengguna disini para siswa-siswi SMA kelas X dalam mempelajari dan memahami turunan Biologi dengan bantuan komputer, dimana materi dan soal soal yang diberikan dirancang secara interaktif dan menarik sehingga pengguna aplikasi ini tidak merasa bosan ataupun jenuh dengan aplikasi ini. 3.2 MetodePembuatan Aplikasi 3.2.1 Konsep Aplikasi Pembelajaran Turunan pokok bahasan Aplikasi Mata Pelajaran Biologi SMA Kelas X berbasis Multimedia ini berisi tentang materi, video, latihan, game dan profil yang di kemas secara Interaktif dan menarik. Deskripsi konsep aplikasi ini adalah sebagai berikut : Judul : Aplikasi Mata Pelajaran Biologi SMA Kelas X berbasis Multimedia Audiens : PelajarSMA Kelas X Bentuk Aplikasi : Media Pembelajaran Interaktif. Gambar : Menggunakan file berformat JPEG dan PNG. 22
23 Audio : Menggunakan file WAV dan MP3. Animasi : Animasi gambar dan tombol dibuat oleh penulis dan sebagian diperoleh dari internet. Interaktif: Menggunakan link berupa tombol (button) yang memungkinkan user menuju ke halaman yang diinginkan. 3.3 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 masukdan user di arahkan untuk menekan tombol masuk yang akan membawanya masuk ke halaman home (Menu Utama). 2. Menu Utama Pada halamanhome / Menu Utama ini di beri tombol Materi,tombol Video, tombol Latihan, tombol Game, dan tombol Profil. 3. Menu Materi Pada halaman Materi pengguna (user) di arahkan untuk mengetahui, mempelajari dan memahami pengetahuan tentang biologi. 4. Menu Latihan Pada halaman Soal pengguna (user) dapat melihat soal soal tentang biologi dan penyelesaiannya untuk melatih pengguna dalam memahami ilmu biologi.
24 5. Profil Pada halamanprofil, bertujuan mengetahui informasi data - data penulis dan foto penulis. 6. Menu Game Pada halaman Game, Setelah pengguna (user) membaca penjelasan dari halaman materi dan melihat soal soal tentang ilmu biologi. Dapat langsung merilekkan diri dengan game, Bertujuan untuk mengetahui tidak terlalu pusing memahami ilmu biologi. 7. Menu Video Pada halaman Video, user diarahkan untuk melihat bagaimana virus menyerang, dan video-video yang lainnya atau kembali ke halaman menu utama. 3.3.1 Perancangan Struktur Navigasi Perancangan struktur navigasi ini sangat penting didalam membuat suatu aplikasi.struktur navigasi ini merupakan arah dari perjalanan aplikasiini, strukturnavigasi ini dibuat untukdapat membantu penulis menentukan alur perjalanan serta acuan pembuatan aplikasi dari awal hingga akhir. JUDUL Menu Utama Materi Video Latihan Game Profil Gambar 3.1 DiagramStruktur Navigasi
25 3.3.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. 1. Storyboard Halaman Awal: Animasi 1 SELAMAT DATANG 2 Aplikasi Pembelajaran Biologi SMA Kelas X 3 Animasi 4 MASUK 5 Gambar 3.2 Storyboard HalamanAwal Keterangan : 1. Gambar Animasi : Animasi Jin Pengawas 2. Teks Animasi : SELAMAT DATANG 3. Teks Animasi : Aplikasi Pembelajaran Biologi SMA Kelas X 4. Gambar Animasi : Aplikasi Seorang anak yang Memegang Buku 5. Button untuk masuk aplikasi
26 2. Storyboard Halaman Menu Utama Aplikasi Pembelajaran Biologi SMA Kelas X 6 Animasi 7 Animasi 8 9 10 11 12 13 Gambar 3.3 StoryboardHalaman Menu Utama Keterangan : 6. Judul : Aplikasi Pembelajaran Biologi SMA Kelas X 7. Animasi 8. Animasi 9. Tombol Materi 10. Tombol Video 11. Tombol Latihan 12. Tombol Game 13. Tombol Profil 3. Storyboard Halaman Menu Materi X 14 15 16 17 18 19 Gambar 3.4 Storyboard Halaman Menu Materi
27 Keterangan : 14. Tombol Keluar 15. Materi 16. Tombol Cover 17. Tombol Back Cover 18. Tombol Back 19. Tombol Next 4. Storyboard Halaman Video 20 21 22 23 24 Gambar 3.5 StoryboardHalaman Video Keterangan : 20. Teks Video 21. Pilihan Video 1 22. Pilihan Video 2 23. Pilihan Video 3 24. Tombol Kembali ke Halaman Menu Utama.
28 5. StoryboardHalaman Latihan Latihan Pilihan Ganda 25 Petunjuk Mengerjakan : 1. Soal terdiri dari 5 Pilihan Jawaban A, B, C, D, dan E 2. Pilihan Jawaban yang kamu anggap benar, dengan cara mengklik pilihan jawaban 26 3. Soal berjumlah 10 soal pada setiap bab-nya 4. Untuk memulai silakan klik tombol Mulai SELAMAT MENEGERJAKAN SELAMAT MENEGERJAKAN 28 27 Gambar 3.6 Storyboard Halaman Latihan Keterangan : 25. Animasi Teks 26. Teks Informasi Latihan 27. Tombol Mulai ke Latihan Soal 28. Tombol Kembali 6. Storyboard Halaman Latihan Bab 29 30 31 32 33 36 35 34 37 38 39 Gambar 3.7 Storyboard Halaman Latihan Bab
29 29. Tombol Latihan Bab 1 30. Tombol Latihan Bab 2 31. Tombol Latihan Bab 3 32. Tombol Latihan Bab 4 33. Tombol Latihan Bab 5 34. Tombol Latihan Bab 6 35. Tombol Latihan Bab 7 36. Tombol Latihan Bab 8 37. Tombol Latihan Bab 9 38. Tombol Latihan Bab 10 39. Tombol Kembali 7. Storyboard Halaman Games 40 41 42 43 42 Gambar 3.8 Storyboard Halaman Games Keterangan : 40. Animasi Gambar 41. Gambar sebelum masuk ke Games 1 42. Gambar sebelum masuk ke Games 2 43. Tombol Kembali
30 8. Storyboard Halaman Profil 44 45 46 48 47 Gambar 3.9 Storyboard Halaman Profil Keterangan : 44. Teks Judul Profil 45. Gambar Photo Profil 46. Teks Informasi Profil 47. Teks Tentang Profil 48. Tombol Kembali 3.3.1 Perancangan Use Case Diagram Use casediagram mendeskripsikan interaksi tipikal antara para pengguna sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan (Munawar, 2005: 63). Diagram ini menunjukkan fungsionalitas suatu sistem dan bagaimana sistem berinteraksi dengan dunia luar. Use case diagram menunjukan 3 aspek dari sistem yaitu, actor, use case dan system / sub system boundary. Actor mewakili peran orang, sistem yang lain atau alat ketika berkomunikasi degan Use Case. Gambar dibawah ini mengilustrasikan actor, use case dan boundary.
31 Tampilkan Materi Tampilkan Video User Tampilkan Latihan Tampilkan Game Tampilkan Profil Gambar 3.10 Usecase Diagram Aktor utama pada aplikasi ini adalah user.dari identifikasi aktor tersebut, didapatkan suatu usecase diagramyang menampilkan interaksi antara user / pengguna dengan usecase.sehingga terjadinya skenario. Berikut adalah deskripsi use case yang telah digambarkan di atas : 1. Materi Nama : Materi Aktor : User Deskripsi : Disini user dapat memperoleh penjelasan tentang materi mengenai Pelajaran Biologi kelas X SMA Skenario : a. Ketika user mengklik / menekan tombol materi b. Maka sistem akan menampilkan bab halaman materi c. Sistem akan menampilkan halaman yang dipilih oleh user 2. Video Nama Aktor : Video : User
32 Deskripsi : Disini user dapat melihat video mengenai mata pelajaran biologi Skenario : a. Ketika user mengklik / menekan tombol Video b. Maka sistem akan menampilkan halaman video c. Sistem akan menampilkan video yang dipilih oleh user 3. Latihan Nama : Latihan Aktor : User Deskripsi : User dapat berlatih dengan mengerjakan soal latihan tentang pelajaran biologi yang telah di sediakan lengkap dengan cara menyelesaikan nya. Skenario : a. Ketika user mengklik / menekan tombol latihan b. Maka sistem akan menampilkan halaman soal nomer 1 c. User menjawab soal latihan pilihan ganda d. Sistem akan menampilkan point yang benar 4. Game Nama : Game Aktor : User Deskripsi : Disini user dapat mencoba mini game yang telah disediakan oleh sistem Skenario : a. Ketika user mengklik / menekan tombol game b. Maka sistem akan menampilkan menu game c. Sistem akan menampilkan game yang dipilih oleh User d. User dapat memainkan game
33 5. Profil Nama : Profil Aktor : User Deskripsi : Disini user dapat melihat profil pembuat aplikasi Skenario : a. Ketika user mengklik / menekan tombol profil b. Maka sistem akan menampilkan data profil pembuat aplikasi 3.3.4 Perancangan Activity Diagram Activity Diagram menunjukkan aliran fungsional sistem.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. a. Perancangan Activity Diagram Untuk Halaman Menu Aktifitas dimulai ketika pengguna memilih masuk, kemudian system menampilkan halaman menu, aktifitas selanjutnya adalah memilih menu yang terdiri Materi, Video, Latihan, Game, Profil. Pengguna Sistem Memilih Menampilkan halaman Menu Materi Video Latihan Game Profil Menampilkan halaman Menu yang di pilih Gambar 3.11 Activity Diagram Halaman Menu
34 b. Perancangan Activity Diagram Untuk Halaman Materi Aktifitas dimulai ketika pengguna memilih menu Materi. Selanjutnya system akan menampilkan halaman Materi Aktifitas selanjutnya adalah mulai melihat isi materi. Setelah selesai, anda bias kembali ke halaman menu. Pengguna Sistem Memilih menu materi Menampilkan halaman Menu Menampilkan isi Materi Kembali Gambar 3.12 Activity Diagram Halaman Materi c. Perancangan Activity Diagram Untuk Halaman Video Pengguna Sistem Memilih menu Video Menampilkan halaman Video Menampilkan isi Video Video Berjalan Kembali Gambar 3.13 Activity Diagram Halaman Video
35 Aktifitas dimulai ketika pengguna memilih menu Video. Selanjutnya system akan menampilkan menu Video. Aktifitas selanjutnya adalah mulai menjalankan, dengan memilih dan mengklik atau menekan video yang tersedia. Setelah selesai, system akan menampilkan halaman tampian video yang berjalan. d. Perancangan Activity Diagram Untuk Halaman Latihan Aktifitas mulai dilakukan ketika pengguna memilih menu Latihan, kemudian system menampilkan halaman Latihan Bab. Pengguna memilih tombol mulai untuk memulai Latihan dan Sistem menampilkan halaman soal pertama. Setelah itu pengguna menjawab soal dan sistem menampilkan soal berikutnya dan begitu seterusnya hingga soal selesai dan system menampilkan halaman nilai anda.
36 Pengguna Sistem Memilih menu Latihan Menampilkan halaman Latihan Memilih Tombol mulai Menampilkan Soal 1 Memilih Jawaban Menampilkan Soal 2 Memilih Jawaban Memilih Jawaban Memilih Jawaban Menampilkan Soal 3 Menampilkan halaman Latihan Menampilkan Soal 4 Menampilkan halaman Latihan Menampilkan Soal 5 Memilih Jawaban Menampilkan Soal 6 Memilih Jawaban Menampilkan Soal 7 Memilih Jawaban Menampilkan Soal 8 Memilih Jawaban Menampilkan Soal 9 Memilih Jawaban Menampilkan Soal 10 Memilih Jawaban Gambar 3.14 Activity Diagram Halaman Latihan
37 e. Perancangan Activity Diagram Untuk Halaman Game Pengguna Sistem Memilih menu Game Menampilkan halaman Game Menampilkan isi Game Game Selesai Gambar 3.15 Activity Diagram Halaman Game Aktifitas dimulai ketika pengguna memilih menu game, kemudian system menampilkan halaman game. Selanjutnya mengerjakan misi satu demi satu. f. Perancangan Activity Diagram Untuk Halaman Profil Pengguna Sistem Memilih menu Profil Menampilkan halaman Profil Selesai Gambar 3.16 Rancangan Halaman Profil
38 Aktifitas dimulai ketika pengguna memilih menu profil, kemudian system menampilkan halaman profil. 3.3.5 Perancangan Antar Muka Perancangan antar muka (User Interface) disesuaikan dengan kebutuhan pengguna yang akan melihat informasi yang mereka butuhkan rancangan dalam aplikasi ini, yaitu : a. Rancangan Halaman Intro Rancangan ini digunakan sebagai tampilan awal yang berisi tampilan judul aplikasi, tombol masuk. Tombol masuk ini digunakan untuk memasuki tampilan halaman menu. Animas i SELAMAT DATANG Aplikasi Pembelajaran Biologi SMA Kelas X Animas i MASUK Gambar 3.17 Rancangan Halaman Intro b. Rancangan Halaman Menu Rancangan Halaman menu merupakan tampilan utama yang memuat beberapa objek-objek multimedia animasi, teks, gambar, suara latar, dan juga tombol-tombol navigasi. Tombol navigasi dalam tampilan ini terdiri dari tombol menu materi, vedio, latihan, game, profil.
39 Aplikasi Pembelajaran Biologi SMA Kelas X Animasi Animasi Materi Video Latihan Game Profil Gambar 3.18 Rancangan Halaman Menu c. Rancangan Halaman Materi Rancangan halaman materi untuk menampilkan isi pembahasan biologi berupa bab-bab pembahasan tersebut, dan tersedia tombol kembali menuju ke halaman utama. X Cover Back Cover Back Next Gambar 3.19 Rancangan Halaman Materi
40 d. Rancangan Halaman Video Rancangan halaman Video menampilkan beberapa video tentang biologi yang ditentukan system untuk membahas pemahaman virus, tombol kembali menuju ke halaman utama. The Video Video 1 Video 2 Video 3 Bac Gambar 3.20 Rancangan Halaman Video e. Rancangan Halaman Game Rancangan halaman Game menampilkan 2 pilihan game untuk dimainkan, setelah menyelesaikan game selesai bisa klik tombol kembali ke halaman utama. Animasi Game 1 Game 2 Back Gambar 3.21 Rancangan Halaman Game
41 f. Rancangan Halaman Latihan Rancangan halaman latihan menampilkan soal Latihan pilihan ganda yang akan dikerjaan oleh pengguna. Beserta pilihan jawaban yang dapat dipilih salah satu A, B, C, D atau E, yang menurut pengguna jawabannya itu benar. Latihan Pilihan Ganda Petunjuk Mengerjakan : 1. Soal terdiri dari 5 Pilihan Jawaban A, B, C, D, dan E 2. Pilihan Jawaban yang kamu anggap benar, dengan cara meng-klik pilihan jawaban 3. Soal berjumlah 10 soal pada setiap bab-nya 4. Untuk memulai silakan klik tombol Mulai SELAMAT MENEGERJAKAN SELAMAT MENEGERJAKAN Gambar 3.22 Rancangan Halaman Latihan SOAL A B C D E Gambar 3.23 Rancangan Halaman Soal
42 g. Rancangan Halaman Profil Rancangan halaman Profil untuk menampilkan data diri pembuat dan tersedia tombol kembali menuju halaman utama. Identitas diri Photo Profil Data Indetitas Diri Info Back Gambar 3.24 Rancangan Halaman Profil