BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Sistem Dalam tahap ini penulis menganalisa kebutuhan sistem, permasalahan yang menjadi faktor analisa sehingga jika diketahui permasalahan yang ada dalam pembuatan perangkat lunak ini maka spesifikasi kebutuhan sistem pun dapat diketahui. Penulis merancang sebuah aplikasi materi pembelajaran otak yang mengacu pada buku dengan judul Metode Pembelajaran Otak, karangan dr. Arman Yurisaldi S, M.S., SpS, tahun 2009 untuk mahasiswa kedokteran yang terdiri dari : pengertian otak, perbedaan otak kanan dan otak kiri, kerjasama otak besar dan otak kecil, fungsi otak kecil, fungsi otak besar, pengertian otak tengah, manfaat otak tengah dan penyakit otak. Kegunaan aplikasi ini adalah untuk mempermudah pembelajaran khususnya tentang otak bagi mahasiswa/i fakultas kedokteran. Aplikasi ini menyediakan tampilan-tampilan yang menarik karena ditunjang oleh gambar, dan pada aplikasi ini juga terdapat soal-soal latihan sehingga para mahasiswa/i dapat memicu semangat belajar mereka. Serta untuk meningkatkan hasil belajar para mahasiswa/i. Penulis merancang pembuatan animasi untuk materi pembelajaran otak bagi mahasiswa kedokteran ini dengan memasukkan 3 (tiga) tahap Input-Proses-Output yang merupakan sistem kerja dari aplikasi tersebut

2 Konsep Aplikasi ini dirancang menggunakan metode pengembangan multimedia dengan melalui 6 tahap yaitu konsep, perancangan, pengumpulan material, pembuatan, pengujian dan pendistribusian. Aplikasi ini menggunakan teks pada penjelasannya, gambar sebagai pendukung penjelasan, dan animasi supaya tidak bosan dan menarik minat pengguna. Deskripsi konsep aplikasi ini adalah sebagai berikut : Tabel 3.1 Deskripsi Konsep Aplikasi Judul Pembuatan aplikasi untuk materi pembelajaran otak bagi mahasiswa kedokteran. Pengguna Gambar Pelajar khususnya mahasiswa/i yang mengambil jurusan otak. Menggunakan file berformat.jpg yang dibuat sendiri. Animasi Animasi pada teks dan gambar dibuat sendiri. Menggunakan mouse over pada gambar animasi tersebut. 3.3 Perancangan Pada bagian ini akan dijelaskan secara rinci rancang Aplikasi Pembelajaran Otak untuk mahasiswa/i kedokteran yang meliputi pemodelan use case diagram, pemodelan activity diagram, pemodelan sequence diagram, perancangan storyboard Pemodelan Use Case Diagram Pada aplikasi pembelajaran otak, 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.

3 33 Gambar 3.1 Use Case Diagram Aplikasi Materi Pembelajaran Otak. Berikut adalah deskripsi Use case yang telah digambarkan pada Gambar 3.1 : Tabel 3.2 Use Case Profil Nama Memilih menu profil Aktor Deskripsi Skenario Kondisi Awal Pengguna Pengguna dapat memilih menu profil yang di dalam nya terdapat data diri penulis. 1. Pengguna memilih menu profil. 2. Sistem masuk ke halaman profil yang di pilih. 1. Pengguna memilih halaman menu profil yang di dalam nya terdapat data diri penulis. 2. Pengguna menerima halaman menu profil yang telah dipilih. Kondisi Akhir 3. Pengguna dapat mengenal penulis dari menu profil tersebut.

4 34 Tabel 3.3 Use Case Menu Bab Materi Nama Memilih Bab Materi Aktor Deskripsi Skenario Pengguna Pengguna dapat memilih menu bab 1 sampai 5 yang berisikan materi-materi pelajaran. 1. Pengguna memilih menu bab materi. 2. Sistem masuk ke halaman menu bab materi yang dipilih. 3. Pengguna memilih submateri yang ada. 4. Sistem masuk ke halaman submateri yang telah dipilih. Kondisi Awal 1. Pengguna memilih halaman menu bab materi pelajaran yang terdiri dari pengertian otak, perbedaan otak kanan dan otak kiri, kerja sama otak besar dan otak kecil, fungsi otak kecil, fungsi otak besar, pengertian otak tengah, manfaat otak tengah dan penyakit otak. 2. Pengguna menerima halaman menu bab materi yang telah dipilih. Kondisi Akhir 3. Pengguna mempelajari setiap bab materi yang telah dipilih oleh pengguna.

5 35 Tabel 3.4 Use Case Memilih Materi Nama Memilih Materi Aktor Deskripsi Skenario Pengguna Pengguna dapat memilih materi-materi yang sudah ada di menu materi. 1. Pengguna memilih menu materi. 2. Sistem masuk ke halaman menu materi yang dipilih. 3. Pengguna memilih materi yang ada. 4. Sistem masuk ke halaman materi yang telah dipilih. Kondisi Awal 1. Pengguna menerima halaman materi-materi pelajaran yang terdiri dari pengertian otak, perbedaan otak kanan dan otak kiri, kerja sama otak besar dan otak kecil, fungsi otak kecil, fungsi otak besar, pengertian otak tengah, manfaat otak tengah dan penyakit otak. Kondisi Akhir 2. Pengguna mempelajari setiap materi yang telah dipilih oleh pengguna.

6 36 Tabel 3.5 Use Case Latihan Nama Latihan Aktor Deskripsi Skenario Pengguna Pengguna dapat mengerjakan soal-soal latihan. 1. Pengguna memilih menu latihan. 2. Sistem masuk ke halaman latihan. 3. Pengguna mengerjakan soal-soal latihan yang terdiri dari 10 soal pilihan ganda. 4. Sistem masuk ke halaman nilai apabila seluruh soal telah selesaidikerjakan. Kondisi Awal 1. Pengguna memasukan nama. 2. Pengguna menerima halaman latihan yang terdiri dari 10 soal pilihan ganda. Kondisi Akhir 3. Pengguna masuk ke halaman nilai untuk mengetahui nilai yang di dapat setelah mengerjakan soal-soal latihan Pemodelan Activity Diagram Activity diagram adalah teknik untuk menggambarkan logika procedural, proses bisnis, dan jalur kerja. Dalam beberapa hal, diagram ini memainkan peran mirip sebuah diagram alir, tetapi perbedaan prinsip antar diagram ini dan notasi diagram alir adalah diagram mendukung behavior parallel.(fowler, 2005).

7 37 Gambar 3.2 Activity Diagram Profil Dari Gambar 3.2 dijelaskan user masuk menu utama dan dapat memilih menu profil lalu sistem akan menampilkan data diri pembuat aplikasi tersebut, setelah itu selesai pada state akhir.

8 38 Gambar 3.3 Activity Diagram Materi Dari Gambar 3.3 dijelaskan user akan memilih menu bab materi, sistem akan menampilkan halaman menu bab materi 1 sampai 5, user memilih bab 1 sampai 5, sistem menampilkan bab tersebut, user memilih sub bab 3 dan 4, lalu sistem menampilkan materi subbab 3 dan 4, setelah itu selesai pada state akhir.

9 39 Gambar 3.4 Activity Diagram Latihan Dari Gambar 3.4 dijelaskan user memilih menu latihan, sistem akan menampilkan menu masukkan nama pengguna, lalu user akan memasukkan nama dan sistem akan menampilkan soal latihan pilihan ganda 1 sampai 10, user akan menjawab pertanyaan soal-soal tersebut, lalu sistem akan mengecek jawaban dan akan menampilkan nilai hasil benar, setelah itu selesai pada state akhir.

10 Pemodelan Sequence Diagram Sequencediagram digunakan untuk menggambarkan perilaku pada sebuah skenario. Diagram ini menunjukkan sejumlah contoh objek dan pesan yang diletakkan di antara objek-objek ini didalam use case. Sequncediagram menggambarkan interaksi antar objek didalam dan disekitar sistem (termasuk pengguna, display, dan sebagainya) berupa pesan yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi waktu dan objek-objek yang terkait. Sequence diagram biasa digunakan untuk menggambarkan scenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan keluaran tertentu. Dari bentuk use case yang telah digambarkan sebelumnya hanya satu aktor yang akan dibuat sequence diagram sesuai dengan use case yang telah dibuat sebelumnya.

11 41 Gambar 3.5 Sequence Diagram Profil Pada Gambar 3.5 seorang aktor dapat menuju kehalaman menu utama, pada halaman menu utama aktor dapat memilih menu profil dan aktor dapat melihat data diri pembuat aplikasi.

12 42 Gambar 3.6 Sequence Diagram Materi Pada Gambar 3.6 seorang aktor menuju ke layar menu utama dan aktor dapat memilih menu bab materi 1 sampai 5, lalu akan menampilkan halaman bab materi dan aktor dapat melihat tampilan dari hasil proses yang telah dipilih.

13 43 Gambar 3.7 Sequence Diagram Latihan Pada Gambar 3.7 seorang aktor memilih menu latihan lalu akan menampilkan halaman masukkan nama, aktor masuk ke menu soal latihan pilihan ganda dan menjawab pertanyaan. Pada halaman soal latihan terdapat nilai atau skor dari hasil menjawab soal-soal tersebut, lalu aktor dapat melihat dari proses yang telah dipilih.

14 Perancangan Storyboard Pada bagian ini penulis membuat storyboard yang digunakan sebagai alat bantu pada tahapan perancangan aplikasi yang penulis buat. Storyboard merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Dengan mencantumkan semua objek atau elemen multimedia serta komponenkomponen aplikasi yang akan dibuat. Satu kolom storyboard mewakili satu tampilan dilayar monitor. Gambar 3.8 Storyboard untuk intro (scene 1) Scene name : Intro Link : Klik Gambar (Scene 2) Ket : Menampilkan halaman intro Background : Merah

15 45 Gambar 3.9 Storyboard untuk menu profil dan data penulis (Scene 2) Scene name : Menu profil dan data penulis Link : Klik menu Materi atau tombol > (Scene 3) Ket : Menampilkan data diri penulis Background : Merah dan putih

16 46 Gambar 3.10 Storyboard untuk pejelasan materi dari pengertian otak dan gambar otak (Scene 2) Scene name : Menu Materi Pengertian Otak dan Gambar Otak Link : Klik menu Materi (Scene 4) Ket : Menampilkan Materi Pengertian Otak Background : Merah dan putih

17 47 Gambar 3.11 Storyboard untuk perbedaan otak kanan dan kiri (Scene 2) Scene name : Menu Materi Perbedaan Otak Kanan dan Kiri Link : Klik menu Materi (Scene 5) Ket : Menampilkan Materi perbedaan Otak Background : Merah dan putih

18 48 Gambar 3.12 Storyboard untuk kerjasama otak besar dan kecil (Scene 2) Scene name : Menu Materi Kerjasama Otak Link : Klik menu Materi atau tombol > (Scene 6) Ket : Menampilkan Materi Kerjasama Otak Background : Merah dan putih

19 49 Gambar 3.13 Storyboard untuk fungsi otak kecil (Scene 2) Scene name : Menu Materi Fungsi Otak Kecil Link : Klik tombol > (Scene 7) Ket : Menampilkan Materi Fungsi Otak Kecil Background : Merah dan putih

20 50 Gambar 3.14 Storyboard untuk fungsi otak besar (Scene 2) Scene name : Menu Materi Fungsi Otak Besar Link : Klik tombol > (Scene 8) Ket : Menampilkan Materi Fungsi Otak Besar Background : Merah dan putih

21 51 Gambar 3.15 Storyboard untuk materi dari pengertian otak tengah (Scene 2) Scene name : Menu Materi Pengertian Otak Tengah Link : Klik tombol > (Scene 9) Ket : Menampilkan materi dari pengertian otak tengah Background : Merah dan putih

22 52 Gambar 3.16 Storyboard untuk manfaat otak tengah (Scene 2) Scene name : Menu materi manfaat otak tengah Link : Klik menu materi atau tombol > (Scene 10) Ket : Menampilkan materi pengertian otak tengah Background : Merah dan putih

23 53 Gambar 3.17 Storyboard untuk penjelasan penyakit otak (Scene 2) Scene name : Menu materi penyakit otak Link : Klik Latihan (Scene 11) Ket : Menampilkan materi penyakit otak Background : Merah dan putih

24 54 Gambar 3.18 Storyboard untuk menu latihan (Scene 3) Scene name : Menu latihan Link : Klik mulai (Scene 12) Ket : Menampilkan nama pengguna Background : Merah

25 55 Gambar 3.19 Storyboard untuk soal-soal latihan (Scene 3) Scene name Link Ket Background : Menu soal-soal latihan : Klik tombol kembali atau materi untuk kembali ke (Scene 2) : Menampilkan soal-soal latihan dan skor : Merah dan putih

26 Perancangan Antarmuka Pada tahap ini penulis membuat antarmuka dari aplikasi yang akan dibuat yang akan menunjukan letak tombol satu dan lainnya untuk memulai proses pembelajaran materi otak Rancangan Tampilan Pembuka atau Intro Halaman intro adalah tampilan awal pembuka sebelum memasuki menu halaman utama dari aplikasi ini. Pada halaman intro ini terdapat lambang kedokteran, judul dalam bentuk teks, dan gambar untuk masuk ke halaman utama. Ada 1 tautan yang ada pada halaman ini yaitu tombol masuk ke halaman menu utama dengan mengklik gambar otak tersebut. Gambar 3.20 Tampilan Intro

27 Rancangan Tampilan Menu Utama Halaman menu utama adalah tampilan menu utama untuk masuk ke menu materi-materi pelajaran. Pada tampilan menu utama terdapat graphiklogo Mercu Buana, movie teks, movie gambar otak, jam dan tanggal. Ada beberapa elemen pada halaman ini yaitu button profil untuk melihat data diri penulis, menu materi dari bab 1 sampai bab 5, menu sub bab, dan latihan untuk masuk ke menu selanjutnya. Pada halaman ini juga terdapat button untuk keluar dari aplikasi tersebut. Gambar 3.21 Tampilan Menu Utama

28 Rancangan Menu Masuk Latihan Halaman ini adalah halaman menu latihan sebelum kita mulai menjawab soalsoal pertanyaan. Pada halaman tersebut terdapat 1 tautan yaitu memasukkan nama dan button untuk memulai ke halaman berikutnya. Gambar 3.22 Tampilan Menu Masuk Latihan

29 Rancangan Tampilan Soal Latihan Halaman ini adalah tampilan halaman latihan yang berisi 10 soal pilihan ganda. Pada tampilan ini juga terdapat button a, b, c, dan d yang dapat di klik oleh user untuk memilih jawaban yang benar. Pada halaman ini juga terdapat button untuk kembali ke menu halaman utama atau ke halaman materi. Gambar 3.23 Tampilan Soal Latihan