30 BAB III ANALISIS DAN PERANCANGAN SISTEM 3.1. Analisis Sistem Analisis sistem digunakan untuk menguraikan sistem pembelajaran menjadi komponen-komponen untuk diidentifikasi dan dievaluasi permasalahannya. Sistem yang dianalisis adalah system yang berisi informasi tentang segala sesuatu yang berkaitan dengan pengenalan bentuk-bentuk dasar, dalam bentuk multimedia, yang berupa informasi teks, gambar, dan animasi yang diaplikasikan menggunakan komputer. Dalam membangun aplikasi materi pembelajaran kulit bagi mahasiswa kedokteran, penulis akan menganalisa kebutuhan dasar sistem. Analisa dilakukan terhadap data-data yang merepresentasikan masalah, sehingga dapat diketahui spesifikasi kebutuhan sistem yang akan dibangun. Pada tugas akhir ini, akan dirancang suatu modul pembelajaran berbasis multimedia untuk pembelajaran ilmu kulit bagi mahasiswa kedokteran. Aplikasi ini terdiri dari materi pembelajaran anatomi kulit, adneksa kulit, fall kulit, histopatologi kulit,mikrobiologi kulit, kuku pada kulit, rambut pada kulit, penyakit kulit dan soal latihan. Dimana pada materi tersebut disusun berdasarkan kurikulum di indonesia yang sekarang digunakan yaitu Kurikulum Tingkat Satuan Pendidikan (KTSP). Kegunaan program ini adalah untuk mempermudah pembelajaran khususnya pelajaran ilmu kulit, dimana fasilitas yang memungkinkan mahasiswa mengulang sendiri materi yang belum dipahaminya dan memberikan kesempatan kepada mahasiswa untuk lebih memahami materi yang disampaikan. Program ini menyediakan fitur-fitur yang menarik karena ditunjang oleh gambar dan animasi, sehingga memiliki daya tarik tersendiri bagi mahasiswa yang dapat memicu semangat belajar untuk meningkatkan hasil belajar serta tidak cepat merasa jenuh dalam proses belajar mengajar.
31 Penulis merancang pembuatan aplikasi materi pembelajaran kulit bagi mahasiswa kedokteran ini dengan memasukan 3 tahap Input Proses Output yang merupakan sistem kerja dari aplikasi tersebut. 3.2. Konsep Rancang pembuatan aplikasi materi pembelajaran ilmu kulit ini merupakan aplikasi yang dibuat khusus untuk digunakan oleh mahasiswa kedokteran. Aplikasi ini menggunakan teks untuk pembelajaran dan penjelasan, gambar sebagai pembelajaran, dan animasi supaya pengguna tidak bosan. Deskripsi konsep aplikasi ini adalah sebagai berikut : Tabel 3.1. Deskripsi Konsep Aplikasi Judul Pengguna Gambar Animasi Rancang pembuatan aplikasi materi pembelajaran kulit bagi mahasiswa kedokteran Pelajar khususnya mahasiswa kedokteran yang mengambil jurusan kulit Menggunakan file berformat.jpg Animasi pada teks dibuat sendiri Menggunakan tombol navigasi animasi Aplikasi ini dimaksudkan untuk menggantikan proses belajar mengajar yang bersifat manual menjadi digital, mudah dimengerti, dan lebih menarik. Aplikasi ini bisa digunakan pada komputer atau laptop manapun tidak perlu mengakses internet jadi lebih mudah karena bisa dipakai dimanapun dan kapan saja.
32 3.3. Perancangan Pada bagian ini akan dijelaskan secara rinci perancangan Aplikasi materi pembelajaran ilmu kulit bagi mahasiswa kedokteran berbasis multimedia yang meliputi pemodelan use case diagram, activity diagram,dan sequence diagram. 3.3.1 Pemodelan Use Case Diagram Use case diagram mendeskripsikan interaksi tipikal antara para pengguna sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan (Fowler, 2005:141). Pada aplikasi materi pembelajaran ilmu kulit berbasis multimedia ini, dapat diidentifikasi bahwa aktor utamanya adalah user (pengguna). Dari identifikasi aktor tersebut, maka akan didapatkan satu diagram use case dan beberapa skenario yang memperlihatkan interaksi-interaksi use case dengan aktor. Use case diagram aplikasi materi pembelajaran ilmu kulit bagi mahasiswa kedokteran berbasis multimedia dapat dilihat pada Gambar 3.1 dibawah ini Gambar 3.1 Diagram Use Case
33 Berikut adalah deskripsi Use case yang telah digambarkan diatas : 1. Nama : Melihat profil Aktor Deskripsi : Pengguna : Pengguna melihat profil pembuat program Skenario : a. Pengguna memilih menu profil. b. Sistem menampilkan, Nama NIM, Fakultas, Jurusan, email pembuat aplikasi pembelajaran. c. Apabila pengguna keluar dari menú Profil maka dapat memilih menú yang lainya. Kondisi Awal Kondisi Akhir : Pengguna menerima halaman profil yang berisi Nama, NIM, Fakultas, Jurusan, dan email. : Pengguna dapat mengetahui Nama, NIM, Fakultas, Email dan Jurusan pembuat aplikasi. 2. Nama : Mengerjakan Latihan Aktor Deskripsi : Pengguna : Pengguna dapat milih halaman latihan, serta bisa mengerjakan soal latihan. Skenario : a. Pengguna memilih menu Latihan b. Sistem menampilkan halaman untuk memasukan nama dan pengguna memasukan nama untuk ke halaman soal latihan c. Pengguna mengerjakan setiap soal latihan d. Pengguna menjawab soal dari menú soal latihan. e. Sistem mengecek jawaban.
34 Kondisi Awal Kondisi Akhir : Pengguna menerima halaman soal latihan. : Pengguna melihat soal latihan atau mengerjakan soal latihan 3. Nama : Melihat Bab materi Aktor Deskripsi : Penguna : Pengguna dapat memilih materi pembelajaran dari setiap judul bab materi Skenario : a. Pengguna memilih menu bab materi yang terdiri dari menu pilihan bab 1, bab 2, bab 3, bab 4 dan bab 5. b. Apabila pengguna memilih tombol bab 1, sistem menampilkan penjelasan dari halaman bab 1 serta pengguna dapat memilih tombol sub bab dari tampilan bab 1 dan begitu juga dengan tombol bab 2, bab 4, dan bab 5. Terkecuali bab 3, pada bab 3 tidak terdapat sub bab c. Pengguna memahami berbagai macam penjelasan materi dari setiap tombol bab 1, bab 2, bab 3, bab 4, dan bab 5. Kondisi Awal Kondisi Akhir : Pengguna menerima halaman bab materi yang terdiri dari bab1, bab 2, bab 3, bab 4, dan bab 5. : Pengguna dapat melihat halaman bab materi dan memahami bab 1, bab 2, bab 3, bab 4, bab 5.
35 3.3.2 Pemodelan Activity Diagram Pemodelan activity diagram dapat digunakan untuk mewakili secara grafis aliran kejadian dari use case. Diagram ini menggambarkan langkah yang mana dijalankan secara berurutan dan langkah mana yang dijalankan secara bersamaan. Aliran pengaturan dari aktifitas suatu state ke state berikutnya disebut dengan transition. Diagram aktifitas untuk menu profil ditunjukkan oleh Gambar 3.2, diagram aktifitas untuk menu bab materi ditunjukkan oleh Gambar 3.3, diagram aktifitas untuk menu soal latihan ditunjukkan oleh Gambar 3.4. 3.3.2.1. Activity Diagram Untuk Menu profil Pada Gambar 3.2 aktifitas dimulai ketika pengguna sudah masuk kedalam halaman menu utama, aktivitas selanjutnya memilih menú profile, didalam menú profile terdapat submenu, terdapat tampilan Nama, NIM, Fakultas, Jurusan dan email, pembuat aplikasi materi pembelajaran kulit untuk mahasiswa kedokteran. Pengguna Sistem Menampilkan halaman Menu Utama Memilih Menu Profil Menampilkan Nama NIM Fakultas Jurusan Email Foto Profil Gambar 3.2. Diagram Activity Untuk Menu profil
36 3.3.2.2 Activity Diagram Untuk Menu Latihan Pada Gambar 3.3 aktivitas dimulai ketika pengguna sudah masuk kedalam menu latihan, didalam menu latihan terdapat soal latihan. Apabila pengguna memilih tombol latihan, maka akan tampil masukan nama, setelah pengguna masukan nama selanjutnya akan tampil halaman soal latihan, dan pengguna mengerjakan soal latihan, setelah selesai mengerjakan soal latihan, maka akan menampilkan nilai dari hasil soal latihan tersebut, dan pengguna kembali ke menu untuk mengulang kembali latihan. Gambar 3.3 Diagram Activity Untuk Menu Soal Latihan
37 3.3.2.3 Activity Diagram Untuk Menu Bab Materi Pada Gambar 3.4 aktivitas dimulai ketika pengguna sudah masuk kedalam halaman menu utama, aktivitas selanjutnya memilih menu bab materi, didalam menu bab materi terdapat submenu yang dapat dipilih, yaitu tombol bab1, bab 2, bab 3, bab 4, bab 5. Apabila pengguna memilih tombol bab 1, maka akan menampilkan tampilan dari bab 1, kemudian pengguna dapat memilih submenu dari bab 1, namun apabila pengguna memilih tombo bab2, maka akan tampil bab 2, dan pengguna dapat memilih submenu dari bab 2, begitu juga dengan bab 4, dan bab 5. terkecuali bab 3, pada bab 3 tidak terdapat subbab. Gambar 3.4 Gambar Diagram Activity Untuk Menu Bab Materi
38 3.3.3 Pemodelan Sequence Diagram Sebuah Sequence Diagram secara khusus menjabarkan aktifitas sebuah skenario tunggal. Diagram tersebut menunjukkan sejumlah objek contoh dan pesan-pesan yang melewati objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah digambarkan sebelumnya, dapat dibuat sequence diagram yang tampak pada Gambar 3.5 sampai Gambar 3.7 Sequence Diagram menu profile menggambarkan skenario dan langkahlangkah yang dilakukan pengguna. Pertama pengguna masuk kemenu utama, kemudian memilih menu profile lalu sistem menampilkan halaman menu profile yang didalam menu profil terdapat Nama, NIM, fakultas, jurusan, Email, dan foto pembuat aplikasi pembelajaran ilmu kulit untuk mahasiswa kedokteran. Gambar 3.5 Sequence Diagram Untuk Menu Profil
39 Sequence Diagram menu latihan menggambarkan sekenario dan langkahlangkah yang dilakukan pengguna. Pertama pengguna masuk ke menu utama, kemudian memilih menu latihan. Apabila pengguna memilih tombol latihan, maka sistem akan menampilkan menu masukan nama, dan apabila pengguna memasukan nama sistem akan menampilkan menu soal latihan, setelah tampil soal latihan pengguna dapat mengerjakan soal latihan tersebut, lalu jawaban tersebut akan dicek oleh sistem, setelah soal selesai dijawab hingga soal akhir, lalu sistem akan menampilkan hasil jawaban benar. Gambar 3.6 Sequence Diagram Untuk Menu Soal Latihan
40 Sequence Diagram menu bab materi menggambarkan skenario dan langkah yang dilakukan pengguna. Pertama pengguna masuk kemenu utama, kemudian memilih menu bab materi lalu sistem akan menampilkan halaman menu bab 1, didalamnya terdapat tombol bab 1, bab 2, bab 3, bab 4, dan bab 5. Apabila penguna memilih tombol bab 1, maka sistem akan menampilkan bab 1, dan pengguna dapat memilih subbab dari bab 1, apabila pengguna memilih tombol bab 2 maka sistem akan menampilkan bab 2, dan pengguna dapat memilih subbab dari bab 2, dan begitu juga dengan bab 4, dan bab 5. Terkecuali bab 3, pada bab 3 tidak terdapat subbab. Gambar 3.7 Sequence Diagram Untuk Menu Bab Materi
41 3.4. 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 di layar monitor. 1 Nama file : Intro Background : biru Link : Scene 2 Keterangan : menampilkan halaman intro 2
42 Nama file : Menu Utama background : biru Link : Scene 3,4,6, Keterangan : menampilkan halaman menu utama 3 Nama file : Menu profile background : biru Link : Scene 2 Keterangan : menampilkan halaman menu 4 Nama file : Menu masukan nama background : biru Link : scene 5 Keterangan : menampilkan halaman menu masukan nama untuk ke menu soal latihan
43 5 Nama file : Menu masukan nama background : biru Link : scene 2 Keterangan : menampilkan halaman menu masukan nama untuk ke menu soal latihan 6 Nama file : Menu sub menu bab materi background : biru Link : scene 7,8,9.10,11, 2 Keterangan : menampilkan halaman menu sub menu bab materi
44 7 Nama file : Menu materi bab1 background : biru Link : scene 2, scene 6 Keterangan : menampilkan halaman menu mater bab 1 8 Nama file : Menu materi bab2 background : biru Link : scene 2, scene 6 Keterangan : menampilkan halaman menu mater bab 2
45 9 Nama file : Menu materi bab 3 background : biru Link : scene 2, scene 6 Keterangan : menampilkan halaman menu mater bab 3 10 Nama file : Menu materi bab 3 background : biru Link : scene 2, scene 6 Keterangan : menampilkan halaman menu mater bab 3
46 11 Nama file : Menu materi bab 5 background : biru Link : scene 2, scene 6 Keterangan : menampilkan halaman menu mater bab 5 Gambar 3.8 Perancangan Storyboad Aplikasi Materi Pembelajaran kulit
47 3.5 Desain Antar Muka Pada bagian desain antar muka (interface design) ini akan digambarkan mengenai tahapan-tahapan yang akan ditampilkan pada Aplikasi Materi Pembelajaran Ilmu Kulit bagi Mahasiswa Kedokteran. 3.5.1 Desain Antar Halaman Pembuka Desain antar muka ini merupakan halaman pembuka sebelum masuk ke halaman menu utama, dihalaman ini terdapat tombol masuk yang dapat diklik untuk masuk ke halaman menu utama,dan terdapat gambar animasi, dan text. Hal ini dimaksudkan agar aplikasi terlihat lebih menarik. Gambar 3.9 Rancangan halaman pembuka
48 3.5.2. Desain Antar Muka Halaman Menu Utama Di halaman ini terdapat beberapa animasi, serta beberapa tombol menu yaitu menu profile, menu bab materi, menu soal latihan dan menu untuk keluar, dimana pengguna dapat memili menu secara bebas yang di inginkan. Gambar 3.10 Rancangan halaman menu utama
49 3.5.3. Desain Antar Muka Halaman Menu Profil Di halaman ini terdapat menu profil yang berisi Nama, Nim, email, dan foto pembuat aplikasi Materi Pembelajaran Ilmu Kulit bagi Mahasiswa Kedokteran. Gambar 3.11 Rancangan Halaman Menu Profil
50 3.5.4. Desain Antar Muka Halaman Menu Latihan Di halaman ini terdapat tombol soal latihan dari menu soal latihan ini berisi halaman menu masukan nama untuk masuk ke halaman soal latihan, kemudian soal latihan dikerjakan setelah selesai akan tampil nilai, dan pengguna dapat mengulang kembali untuk menu soal latihan. Gambar 3.12 Rancangan Halaman Menu Soal latihan
51 3.5.5. Desain Antar Muka Halaman Menu Masukan Nama Di halaman ini terdapat halaman untuk masukan nama, pengguna masukan nama untuk menuju ke halaman selanjutnya yaitu halaman soal latihan. Gambar 3.13 Rancangan Halaman Masukan Nama
52 3.5.6. Desain Antar Muka Halaman Soal Latihan Di halaman ini terdapat halaman soal latihan yang berisi 10 soal latihan, dimana pengguna dapat menjawab soal latihan hingga selesai, apabila pengguna selesai mengerjakan sistem akan menampilkan nilai, dan pengguna dapat mengulang kembali untuk menu soal latihan. Gambar 3.14 Rancangan Halaman Soal Latihan
53 3.5.7 Desain Antar Muka Halaman Menu Bab Materi Di halaman ini terdapat tombol bab 1, bab 2, bab 3, bab 4, dan bab 5.setiap tombol yang dipilih mempunyai isi materi pelajaran yang berbeda- beda. Gambar 3.15 Rancangan Halaman Bab Materi
54 3.5.8. Desain Antar Muka Halaman Menu Bab 1 Di halaman ini terdapat halaman bab 1 yang berisi berbagai Materi pembelajaran ilmu kulit dan terdapat subbab dari bab 1. Bagitu juga dengan tombol Bab 2, Bab 4, dan Bab 5.Terkecuali bab 3, pada bab 3 tidak terdapat subbab. Gambar 3.16 Rancangan Halaman Bab 1
55