BAB III ANALISA DAN PERANCANGAN 3.1 Analisis Sistem Dalam tahap merancang bangun aplikasi pembelajaran Jantung untuk Mahasiswa/i Kedokteran, tahap-tahap yang harus dilakukan adalah tahap analisis kemudian dilanjutkan dengan tahap konsep perancangan aplikasi tersebut. Pada tahap pertama penulis menganalisa kebutuhan dasar yang ada pada sistem yang akan dibuat, yang biasa dilakukan adalah mempresentasikan suatu masalah, sehingga data tersebut dapat diketahui spesifikasi kebutuhannya. Di dalam apilkasi ini penulis membahas beberapa materi tentang jantung diantaranya Struktur jantung, Anatomi dan Sistem Kardiovaskular, Curah Jantung, Denyut Jantung, Jantung Sebagai Pompa dan Elektrokardiogram. tujuan dan manfaat penggunaan program ini yaitu untuk membantu Mahasiswa Kedokteran dalam mempelajari jantung manusia. 3.2 Analisis Kebutuhan Dalam melakukan penelitian, dibutuhkan beberapa komponen yang mendukung terhadap keberhasilan peneliltian ini yaitu : 1. Perangkat lunak (software) a. Sistem operasi Windows 7 b. Software animasi Adobe Flash CS3 Profesional c. Software mengedit gambar Adobe Photoshop CS3 2. Perangkat keras (hardware) a. Seperangkat komputer 23
24 3.3 Konsep Aplikasi pembelajaran ini merupakan aplikasi yang dibuat secara khusus untuk digunakan oleh mahasiswa-mahasiswi kedokteran khusus di bidang Jantung manusia. Aplikasi ini mempergunakan teks sebagai pembelajaran dan penjelasan, gambar sebagai pembelajaran serta animasi. Deskripsi konsep aplikasi ini adalah sebagai berikut Tabel 3.1 Deskripsi Konsep Aplikasi Judul Pembuatan Animasi Untuk materi Pembelajaran Jantung Bagi Mahasiswa Kedokteran Pengguna Mahasiswa-mahasiswi Kedokteran Gambar Menggunakan file berformat.jpg yang dibuat sendiri Suara - Animasi teks Animasi pada teks dan gambar dibuat sendiri Interaktif Menggunakan script yang dimasukan kedalam aplikasi Aplikasi ini juga ditujukan untuk menggantikan pembelajaran yang masih bersifat manual menjadi digital, selain membantu mempermudah dalam mempelajarinya, pengguna juga akan lebih dimudahkan dalam proses belajar. Aplikasi ini juga dikemas dalam bentuk.swf sehingga bisa langsung digunakan pada laptop atau komputer yang sudah terinstal Adobe Flash CS3 Profesional. 3.4. Perancangan Pada bagian ini akan dijelaskan secara rinci Rancang Bangun Aplikasi Materi Pembelajaran Jantung bagi Mahasiswa Kedokteran yang meliputi pemodelan use case diagram, perancangan storyboard, sequence diagram, activity diagram dan perancangan antarmuka. 1. Intro Pada halaman intro ini di beri tombol masuk dan user diarahkan untuk menekan tombol masuk yang akan membawanya ke menu utama. 2. Menu Utama
25 Pada halaman menu utama ini di beri tombol-tombol yang akan membawa user ke halaman yang mereka inginkan. 3. Struktur Jantung Pada halaman struktur jantung, user diarahkan untuk memilih tomboltombol yang ada di bagian jantung yang terdapat penjelasan disetiap tombolnya. 4. Materi Pada halaman ini user diarahkan untuk melihat dan membaca penjelasan-penjelasan yang ada di halaman materi. Pada halaman ini diberikan penjelasan tentang anatomi dan sistem kardiovaskuler, curah jantung, denyut jantung, jantung sebagai pompa dan elektrokardiogram. 5. keluar Jika user memilih tombol keluar maka sistem akan menampilkan profil dari pembuat aplikasi. 3.4.1. Perancangan Peta Navigasi Peta navigasi ini memudahkan untuk merancang aplikasi yang akan dibuat dalam menentukan lokasi pada setiap halaman yang ada. Berikut ini adalah gambar peta navigasi dari rancang bangun aplikasi pembelajaran Jantung untuk mahasiswa kedokteran. Intro Struktur jantung Materi Latihan Anatomi dan Sistem Kardiovaskular Curah Jantung Denyut Jantung Jantung sebagai Pompa Elektrokardigram Gambar 3.1 Diagram Peta Navigasi
26 3.4.2. Perancangan Storyboard Storyboard merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Dengan mencantumkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Satu kolom storyboard mewakili satu tampilan dilayar monitor Storyboard Halaman Intro Modul : Intro Nama File : Intro Gambar : Logo Universitas Mercu Buana Logo YJI dan gambar Tubuh Animasi : Jantung Navigasi : Masuk : Menuju Menu Utama Pembuatan Animasi untuk Materi Pembelajaran Jantung Bagi Mahasiswa Kedokteran MASUK Gambar 3.2 Storyboard Halaman Intro
27 1. Modul Storyboard Halaman : Menu Menu Utama Nama File : Menu Gambar : Logo Mercu Buana Logo YJI Pembuatan Animasi untuk Materi Pembelajaran jantung Bagi Mahasiswa Animasi : Teks Struktur Jantung Materi Latihan Navigasi : Struktur Materi Latihan : Menuju Halaman Struktur Jantung : Menuju Halaman Materi : Menuju menu Latihan : Untuk Dari Aplikasi Gambar 3.3 Storyboard Halaman Menu Utama 2. Storyboard Halaman Struktur Jantung Modul Nama File Gambar Animasi : Struktur Jantung : Struktur Jantung : Jantung : teks Pembuatan Animasi untuk Materi Pembelajaran jantung Bagi Mahasiswa Kedokteran Back Gambar Jantung Penjelasan Navigasi : Back : Menuju Halaman Menu Utama : Untuk Dari Aplikasi Gambar 3.4 Storyboard Halaman Struktur Jantung
28 3. Storyboard Halaman Materi Modul : Materi Nama File : Materi Gambar : - Animasi : teks Pembuatan Animasi untuk Materi Pembelajaran jantung Bagi Mahasiswa Kedokteran Back Anatomi dan Sistem Kardiovaskular Curah Jantung Denyut Jantung Jantung Sebagai Pompa Navigasi : Anatomi dan Sistem Kardiogram Curah Jantung Denyut Jantung Jantung Sebagai Pompa Elektrokardiogram Back Elektrokardiogram : Menuju Halaman Materi Anatomi dan Sistem Kardiogram : Menuju Halaman Materi Curah Jantung : Menuju Halaman Materi Denyut Jantung : Menuju Halaman Materi Jantung Sebagai pompa : Menuju Halaman Materi Elektrokardiogram : Menuju Halaman Menu Utama : Untuk Dari Aplikasi Gambar 3.5 Storyboard Halaman Materi
29 4. Storyboard Halaman Latihan Modul : Latihan Nama File : Latihan Gambar : - Animasi : - A B Soal C D Navigasi : Tombol A : Untuk memilih Jawaban A Tombol B : Untuk memilih Jawaban B Tombol C : Untuk memilih Jawaban C Tombol D : Untuk memilih Jawaban D Gambar 3.6 Storyboard Halaman Latihan 3.4.3. Perancangan Use Case Diagram Diagram ini menunjukkan fungsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Aktor memperlihatkan himpunan pengguna use case, himpunan sesuatu yang berinteraksi dengan sistem yang akan digunakan. Kita harus mengidentifikasi aktor dan memahami bagaimana aktor akan menggunakan dan berinteraksi dengan sistem. Pada aplikasi Modul pembelajaran Jantung untuk mahasiswa/i kedokteran, dapat diidentifikasikan bahwa aktor utamanya adalah user(pengguna). Dari identifikasi aktor tersebut, maka akan didapatkan satu use case diagram dan beberapa skenario yang memperlihatkan interaksi-interaksi use case dengan aktor. Use case diagram Rancang
30 Bangun Aplikasi Modul Pembelajaran Jantung untuk mahasiswa/i kedokteran dapat dilihat pada Gambar 3.2 dibawah ini: APLIKASI Melihat Struktur Jantung Melihat Materi Mengerjakan Latihan Pengguna Gambar 3.7 Use case Diagram Berikut adalah deskripsi Use case yang telah digambarkan di atas : 1. Struktur Jantung Nama : Melihat Struktur Jantung Aktor : User (Pengguna) Deskripsi : User dapat memilih menu struktur jantung yang berisi materi tentang bagian-bagian yang terdapat pada jantung. Skenario : a. User memilih menu struktur jantung b. Sistem masuk ke halaman struktur jantung yang didalamnya terdapat bagian-bagian jantung yang diberi angka c. User memilih angka-angka yang ada d. Sistem menampilkan materi penjelasan dari angka yang dipilih Kondisi Awal : User menerima halaman struktur jantung yang terdapat bagian-bagian jantung yang diberi angka. User memilih angka yang ada
31 Kondisi Akhir : User mempelajari materi-materi dari angka-angka yang telah dipilih 2. Materi Nama : Melihat Materi Aktor : user (Pengguna) Deskripsi : User dapat memilih menu materi anatomi dan sistem kardiovaskular, curah jantung, denyut jantung, jantung sebagai pompa, dan elektrokardiogram Skenario : a. User memilih salah satu menu materi b. Sistem menampilkan halaman materi yang dipilih c. User memahami materi-materi yang terdapat di menu materi Kondisi Awal : User menerima halaman menu materi yang terdiri dari materi anatomi dan sistem kardiovaskular, curah jantung, denyut jantung, jantung sebagai pompa, dan elektrokardiogram. Kondisi Akhir : User mempelajari menu materi yang telah dipilih. 3. Latihan Nama : Mengerjakan Latihan Aktor : user (Pengguna) Deskripsi : User dapat memilih menu Latihan Skenario : a. User memilih menu latihan. b. Sistem masuk ke halaman latihan yang berisi soal-soal pilihan ganda. c. User mengerjakan soal-soal yang disediakan. d. Sistem mengecek jawaban pengguna dan menampilkan nilai dari hasil pekerjaan pengguna. Kondisi Awal : a. User menerima halaman latihan.
32 Kondisi Akhir b. User menerima soal-soal pilihan ganda didalam latihan. : a. User mengisi jawaban pada soal latihan yang dipilih. b. Sistem akan menampilkan nilai. 3.4.4. Perancangan Activity Diagram Activity diagram menunjukkan langkah demi langkah untuk melakukan pemecahan masalah (komputasi). Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Diagram ini menggambarkan langkah yang mana yang harus dijalankan secara berurutan dan langkah mana yang bisa dijalankan secara bersamaan. 1. Perancangan Activity Diagram untuk halaman Menu Utama Aktifitas dimulai ketika pengguna memilih masuk, kemudian sistem menampilkan halaman menu utama, aktifitas selanjutnya adalah memilih menu yang terdiri dari Struktur, Materi, Latihan dan. Kemudian sistem akan menampilkan halaman yang dipilih.
33 PENGGUNA SISTEM Membuka Aplikasi Menampilkan tombol pada menu utama : Struktur Jantung, Materi, Latihan dan Memilih Menu yang diinginkan Menampilkan menu yang dipilih Gambar 3.8 Activity Diagram halaman Menu Utama 2. Perancangan Activity Diagram untuk halaman Struktur Jantung Aktifitas dimulai ketika pengguna memilih tombol struktur jantung kemudian sistem menampilkan halaman struktur jantung, aktifitas selanjutnya adalah memilih nomor-nomor yang terdapat pada struktur jantung. Kemudian sistem akan menampilkan materi-materi dari nomor-nomor yang dipilih.
34 Pengguna Sistem Memilih menu struktur jantung pada menu utama Menampilkan nomor-nomor yang terdapat pada struktur jantung Memilih nomor struktur jantung yang diinginkan Menampilkan materi dari nomor yang dipilih Gambar 3.9 Activity Diagram Halaman Struktur Jantung 3. Perancangan Activity Diagram untuk halaman Materi Aktifitas dimulai ketika pengguna memilih tombol materi, kemudian sistem menampilkan halaman materi, aktifitas selanjutnya adalah memilih materi yang terdiri dari materi anatomi dan sistem kardiovaskular, curah jantung, denyut jantung, jantung sebagai pompa, dan elektrokardiogram. Kemudian sistem akan menampilkan halaman yang dipilih.
35 PENGGUNA SISTEM Memilih Materi pada Menu Utama Menampilkan tombol pada halaman materi : anatomi dan sistem kardiovaskular, curah jantung, denyut jantung, jantung sebagai pompa, dan elektrokardiogram Memilih materi yang di inginkan Menampilkan materi yang dipilih Gambar 3.10 Activity Diagram halaman materi 3. Perancangan Activity Diagram untuk halaman Latihan Aktifitas dimulai ketika pengguna memilih tombol latihan, kemudian sistem menampilkan halaman latihan, aktifitas selanjutnya adalah mengerjakan latihan. Kemudian sistem akan menampilkan nilai.
36 PENGGUNA SISTEM Memilih Latihan pada Menu Utama Menampilkan halaman latihan Memilih tombol mulai Menampilkan soal latihan 1 sampai 10 Menjawab pertanyaan Cek Menampilkan Hasil Cek Menampilkan nilai Ulang Tidak Ya Menampilkan Menu Utama Gambar 3.11 activity diagram halaman latihan
37 3.4.2 Perancangan Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktifitas sebuah skenario tunggal. Diagram tersebuat menunjukkan sejumlah objek contoh dan pesan-pesan melalui objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah di gambarkan sebelumnya, dapat dibuat sequence diagram. 1. Perancangan untuk halaman Struktur Jantung Sequence diagram untuk halaman struktur jantung menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama selanjutnya pengguna dapat memilih menu struktur, kemudian sistem menampilkan halaman struktur yang berisi materi penjelasan dari bagian-bagian jantung. Layer Menu Utama Layer Menu Struktur Pengguna 1. Menuju Menu Utama 2.Menuju Menu Struktur Jantung 3. Tampilan Menu Struktur Jantung 4. Memilih materi penjelasan dari bagian-bagian jantung Gambar 3.12 Sequence Diagram halaman Struktur Jantung
38 2. Perancangan untuk halaman Materi Sequence diagram untuk halaman materi menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama selanjutnya pengguna dapat memilih menu materi, kemudian sistem menampilkan halaman materi yang berisi tombol materi anatomi dan sistem kardiovaskuler, curah jantung, denyut jantung, jantung sebagai pompa dan elektrokardiogram. Apabila pengguna memilih tombol anatomi dan sistem kardiovaskuler maka sistem akan menampilkan anatomi dan sistem kardiovaskuler, begitu juga dengan curah jantung, denyut jantung, jantung sebagai pompa dan elektrokardiogram. Layer Menu Utama Layer Menu Materi Layer SubMenu Materi Pengguna 1. Menuju Menu Utama 2.Menuju Menu Materi 3. Tampilan Menu Materi 4. Memilih sub menu materi anatomi dan sistem kardiovaskuler, curah jantung, denyut jantung, jantung sebagai pompa dan elektrokardiogram 5. Masuk halaman materi anatomi dan sistem kardiovaskuler, curah jantung, denyut jantung, jantung sebagai pompa dan elektrokardiogram 6. Tampilan halaman materi anatomi dan sistem kardiovaskuler, curah jantung, denyut jantung, jantung sebagai pompa dan elektrokardiogram Gambar 3.13 Sequence Diagram halaman Materi
39 3. Perancangan untuk halaman Latihan Sequence diagram untuk halaman latihan menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama selanjutnya pengguna dapat memilih menu latihan, kemudian sistem menampilkan halaman latihan yang berisi soal-soal latihan. Layer Menu Utama Layer Menu Latihan Layer Soal Latihan Pengguna 1. Menuju Menu Utama 2.Menuju Menu Latihan 3. Tampilan Menu Latihan 4. Menuju Soal Latihan 5. Tampilan Halaman Soal Latihan 6. Menjawab Soal Latihan Jawaban di cek Tampilkan Nilai Gambar 3.14 Sequence Diagram halaman Latihan
40 3.4.3 Perancangan Antar muka Perancangan antar muka disesuaikan dengan kebutuhan pengguna yang akan melihat informasi yang mereka butuhkan. Rancangan dalam aplikasi ini yaitu : 1. Rancangan Halaman Intro Rancangan ini digunakan sebagai tampilan awal aplikasi yang berisi gambar logo, judul aplikasi dan tombol masuk. Tombol Masuk ini digunakan untuk masuk kehalaman menu utama. PEMBUATAN ANIMASI UNTUK MATERI PEMBELAJARAN JANTUNG BAGI MAHASISWA KEDOKTERAN Logo Universitas Mercu Buana Logo Yayasan Jantung Indonesia Gambar Tubuh MASUK Gambar 3.15 Rancangan Halaman Intro 2. Rancangan Halaman Menu Utama Rancangan ini digunakan sebagai tampilan awal menu utama yang berisi judul, tombol struktur, materi, latihan, dan keluar. Tombol struktur digunakan untuk masuk kehalaman struktur, Tombol materi digunakan untuk masuk kehalaman materi Tombol latihan digunakan untuk masuk kehalaman Latihan dan Tombol digunakan untuk keluar dari aplikasi.
41 PEMBUATAN ANIMASI UNTUK MATERI PEMBELAJARAN JANTUNG BAGI MAHASISWA KEDOKTERAN Struktur Materi Latihan Gambar 3.16 Rancangan Halaman Menu 3. Rancangan Halaman Struktur Jantung Rancangan ini digunakan sebagai tampilan awal menu yang berisi judul, gambar jantung dan materi penjelasan, tombol back dan keluar. PEMBUATAN ANIMASI UNTUK MATERI PEMBELAJARAN JANTUNG BAGI MAHASISWA KEDOKTERAN Back GAMBAR MATERI Gambar 3.17 Rancangan Halaman Struktur Jantung
42 4. Rancangan Halaman Materi Rancangan ini digunakan sebagai tampilan awal Materi yang berisi judul, tombol struktur, materi, latiha anatomi dan sistem kardiovaskuler, curah jantung, denyut jantung, jantung sebagai pompa dan elektrokardiogram, back dan keluar. PEMBUATAN ANIMASI UNTUK MATERI PEMBELAJARAN JANTUNG BAGI MAHASISWA KEDOKTERAN Back Anatomi dan Sistem Kardiovaskular Curah Jantung Denyut Jantung Jantung Sebagai Pompa Elektrokardiogram Gambar 3.18 Rancangan Halaman Mater 5. Rancangan Halaman Latihan Rancangan ini digunakan sebagai tampilan latihan yang berisi soal latihan, pilihan jawaban dan tombol materi. Tombol materi digunakan untuk kembali ke menu materi. back PENJELASAN Mulai Gambar 3.19 Rancangan Halaman Latihan