BAB III ANALISIS, KONSEP DAN PERANCANGAN 3.1 Analisis Pada bab ini penulis melakukan analisis terhadap kebutuhan sistem serta permasalahan yang menjadi faktor analisa, sehingga jika diketahui permasalahan dalam pembuatan aplikasi ini maka spesifikasi kebutuhan sistem akan segera diketahui. Ilmu kedokteran khususnya mata merupakan ilmu yang mempelajari banyak teori karena didalam struktur mata terdapat banyak bagian yang mempunyai fungsi. Banyaknya materi yang harus di pahami dapat mengakibatkan mahasiswa/i merasa sukar dalam memahaminya. Oleh karena itu dibutuhkan suatu media pembelajaran berbentuk animasi yang dapat dijadika aplikasi bantu mahasiswa/i untuk mengingat materi. Media pembelajaran dalam dunia pendidikan khususnya mahasiswa saat ini sangatlah dekat dengan dunia teknologi komputer, sehingga tidak mengherankan jika pembelajaran saat ini menggunakan teknologi berbasis multimedia. Di dalam tugas akhir ini aplikasi akan dirancang sebagai berikut: Pada halaman intro, aplikasi disajikan dengan gambar orang yaitu seorang dokter, karena dokter adalah sebuah figur yang paling tepat sebagai acuan untuk mahasiswa kedokteran. Pada halaman menu utama, penulis mengambil tema halaman rumah sakit dengan empat buah papan navigasi yang bertujuan agar pengguna dapat memilih menu yang ingin ditampilkan. Pada halaman menu materi, penulis memakai tema ruangan dokter karena aplikasi ini berhubungan dengan kedokteran. Pada halaman sub materi, penulis memakai tema ruangan kelas disertai papan tulis karena aplikasi ini berhubungan dengan perkuliahan. 37
38 Pada halaman menu video, penulis memakai tema gambar kamera karena kamera sering digunakan sebagai alat yang dipakai untuk mendeskripsikan suatu kejadian. Pada halaman menu kuis, penulis memakai tema papan tulis karena aplikasi ini berhubungan dengan perkuliahan. Pada halaman menu kosakata, penulis memakai kartun orang memegang buku karena kosakata merupakan penambah ilmu pengetahuan. Penulis merancang aplikasi pembelajaran mata bagi mahasiswa kedokteran dengan memasukkan 3 tahapan yaitu Input, Proses dan Output yang merupakan sistem kerja dari aplikasi tersebut, diantaranya sebagai berikut: Pada proses pengambilan gambar mata. Gambar terlebih dahulu disimpan ke dalam direktori file penyimpanan gambar sebagai masukan, dalam tahap proses terjadi import atau pengambilan gambar dari direktori file penyimpanannya kedalam aplikasi pembelajaran ini dan langsung tereksekusi yang kemudian akan muncul pada layar sebagai output atau keluaran. Pada proses pengambilan suara dan video. Suara berformat.mp3 dan.wav serta video berformat.avi disimpan ke dalam direktori berkas penyimpanan suara atau video sebagai masukan, dalam tahap proses terjadi import atau pengambilan suara atau video. Kemudian terjadi pencocokan suara atau video ketika pengambilan suara atau video, jika nama suara atau video cocok maka suara atau video kemudian akan tereksekusi yang kemudian muncul output atau keluaran. Pada proses pengambilan nilai. pertanyaan dan jawaban dibuat kemudian dalam tahap proses ini penulis mempunyai sepuluh pertanyaan dan satu pertanyaan bernilai 1, user menjawab pertanyaan yang ada kemudian terjadi pencocokan jawaban, jika jawaban benar maka nilai 1 jika salah maka nilai 0 dan jumlah seluruh nilai dari seluruh pertanyaan sebagai keluaran. 3.2 Konsep Aplikasi pembelajaran mata ini merupakan aplikasi yang dibuat secara khusus bagi mahasiswa kedokteran untuk dapat lebih memahami ilmu pelajaran
39 tentang mata. Aplikasi dirancang menggunakan 6 tahapan yaitu konsep, perancangan, pengumpulan material, pembuatan, pengujian dan distribusi. Aplikasi ini mempergunakan teks sebagai penjelasan, gambar sebagai ccontoh serta animasi sebagai media terlihat semakin menarik. Dalam merancang bangun aplikasi ini penulis merancang konsep aplikasi sebagai berikut Tabel 3.1 Deskripsi Konsep Aplikasi Pembuatan animasi untuk materi pembelajaran mata bagi Judul Mahasiswa Kedokteran Pengguna Mahasiswa/i Kedokteran Gambar Menggunakan file berformat.jpg dan.png Suara Menggunakan file.mp3 dan.wav Video Menggunakan video berformat.avi Aplikasi ini dibuat untuk menggantikan metode pembelajaran yang masih bersifat manual menjadi berbasis multimedia, aplikasi di kemas bersamaan dengan animasi serta disajikan dalam bentuk.exe. Sehingga bisa langsung digunakan pada laptop atau komputer tanpa perlu repot dan memakan banyak waktu karena tidak melakukan penginstalan serta lebih menghemat waktu. 3.3 Perancangan Pada bagian ini penulis akan menjelaskan secara rinci perancangan sistem Pembuatan animasi untuk materi pembelajaran mata bagi mahasiswa kedokteran yang meliputi pemodelan use case diagram, sequence diagram dan activity diagram. 3.3.1 Use case Diagram Use case diagram mendeskripsikan interaksi tipikal antara para pengguna sistem (user) dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan. Diagram ini menunjukkan fungsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Use case diagram pembuatan animasi untuk materi pembelajaran mata bagi mahasiswa kedokteran dapat dilihat pada Gambar 3.1
40 Gambar 3.1 Use case Pembuatan animasi untuk materi pembelajaran mata bagi mahasiswa kedokteran Pada gambar 3.1 dapat dijelaskan terdapat satu aktor yaitu mahasiswa/i kedokteran yang memilih 4 buah use case, yaitu use case materi, use case kuis, use case video dan use case kosakata. Tabel dibawah ini menjelaskan secara rinci bahwa setiap use case mempunyai fungsi masing- masing, fungsi tersebut dapat dilihat pada Tabel 3.2, Tabel 3.3, Tabel 3.4 dan Tabel 3.5. Berikut adalah deskripsi Use case yang telah digambarkan pada gambar 3.1 : Tabel 3.2 Use Case Materi Nama Menu materi Aktor Deskripsi Mahasiwa/i Kedokteran User dapat memilih menu materi-materi yang berisi materi berupa kornea, iris, lensa, retina, konjungtiva dan koroid mempelajarinya. Skenario 1. User memilih menu materi 2. Sistem masuk ke halaman materi yang didalamnya terdapat
41 Tabel 3.2 Use Case Materi (lanjutan) Kondisi User menerima halaman menu materi yang terdiri dari beberapa Awal materi-materi, yaitu kornea, iris, lensa, retina, konjungtiva, dan koroid Kondisi Akhir User mempelajari menu sub materi yang telah dipilih 1. sub-sub materi berupa gambar yang dapat dipilih 2. User memilih sub materi yang ada Sistem masuk ke halaman sub materi yang dipilih Tabel 3.3 Use Case Kuis Nama Menu kuis Aktor Deskripsi Skenario Mahasiswa/i Kedokteran User memilih menu kuis dan menjawab soal 1. User memilih menu kuis yang dipilih 2. Sistem masuk ke halaman kuis yang berisi soal-soal pilihan ganda yang berisi 10 soal. 3. User mengerjakan soal-soal yang disediakan 4. Setelah selesai mengerjakan kemudian sistem mengecek jawaban user dan menampilkan nilai dari hasil pekerjaan user. 5. User memasukan nama 6. Sistem akan mengurutkan urutan nilai berdasarkan nilai tertinggi dan menampilkan nilai terakhir yang telah di urutkan.
42 Tabel 3.3 Use Case Kuis (lanjutan) Kondisi 1. User menerima halaman kuis Awal 2. User menerima soal-soal pilihan ganda didalam menu kuis Kondisi Akhir 1. User mengisi jawaban pada soal kuis yang dipilih 2. Sistem akan mengurutkan urutan nilai berdasarkan nilai tertinggi dan menampilkan nilai terakhir yang telah di urutkan. Tabel 3.4 Use Case Video Nama Menu video Aktor Deskripsi Skenario Mahasiswa/i Kedokteran User memilih video 1. User memilih menu video 2. Sistem masuk ke halaman video yang berisi video tentang mata. 3. User menonton video 4. User memilih menu utama 5. Sistem menampilkan menu utama Kondisi Awal Kondisi Akhir User menerima video tentang mata. User menyaksikan video tentang mata. Sistem menampilkan halaman menu utama.
43 Tabel 3.5 Use Case Kosakata Nama Menu kosakata Aktor Deskripsi Skenario Mahasiswa/i Kedokteran User memilih kosakata dan mempelajarinya. 1. User memilih menu kosakata 2. Sistem masuk ke halaman kosakata 3. User mempelajari kosakata Kondisi Awal User menerima halaman kosakata. Kondisi Akhir User mempelajari kosakata. 3.3.2 Pemodelan Activity Diagram User Sistem Memilih menu materi Menampilkan halaman menu materi Memilih Sub materi Menampilkan halaman sub materi Gambar 3.2 Activity Diagram Materi Pada Gambar 3.2 aktifitas dimulai ketika user sudah masuk ke dalam menu utama, aktivitas selanjutnya ádalah memilih menú materi lalu aktifitas selanjutnya adalah memilih sub menu kornea, iris, lensa, retina, sklera, konjungtiva, serta koroid. Aktifitas akan selesai ketika sistem menampilkan halaman sub materi.
44 User Sistem Memilih menu kuis Menampilkan halaman kuis Memulai kuis Menampilkan soal Menampilkan waktu Menjawab pertanyaan Memeriksa jawaban Waktu >60 Bena r? Hasil + 1 Hasil + 0 Soal=10 Menampilkan halaman nilai kuis Mengetik nama Menampilkan halaman urutan nilai kuis berdaserkan nilai tertinggi Gambar 3.3 Activity Diagram kuis Pada Gambar 3.3 aktifitas dimulai ketika user sudah masuk ke dalam menu utama, aktifitas selanjutnya adalah memilih menu kuis, di menú kuis setelah menjawab pertanyaan, kemudian jawaban akan dicek jika benar maka nilai jawaban benar bertambah satu, apabila salah maka nilai jawaban tidak benar bertambah satu, setelah itu sistem menghitung jumlah jawaban benar dan salah. Aktifitas selanjutnya user memasukan nama dan aktifitas akan selesai ketika sistem mengurutkan urutan nilai berdasarkan nilai tertinggi.
45 User Sistem Memilih menu video Menampilkan halaman menu video Memilih kembali ke menu utama Menampilkan halaman menu utama Gambar 3.4 Activity Diagram video Pada Gambar 3.4 aktifitas dimulai ketika user sudah masuk kedalam menu utama, aktivitas selanjutnya memilih menu video lalu aktifitas selanjutnya adalah memilih kembali ke menú utama dan aktifitas akan berhenti ketika sistem menampilkan halaman menú utama. User Sistem Memilih menu kosakata Menampilkan halaman menu kosakata Memilih kembali ke menu utama Menampilkan halaman menu utama Gambar 3.5 Activity Diagram kosakata Pada Gambar 3.5 aktifitas dimulai ketika user sudah masuk kedalam menu utama, aktivitas selanjutnya memilih menu kosakata lalu aktifitas selanjutnya adalah memilih kembali ke menú utama dan aktifitas akan berhenti ketika sistem menampilkan halaman menú utama.
46 3.3.3 Perancangan Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktivitas 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, dapat dibuat sequence diagram sesuai dengan use case yang telah dibuat sebelumnya. Gambar 3.6 Sequence Diagram Materi Gambar 3.6 Sequence Diagram menu materi menggambarkan skenario dan langkah-langkah yang dilakukan user pada menu materi. Pertama user masuk ke menu utama, kemudian memilih menu materi, selanjutnya user dapat memilih menu kornea, iris, lensa, retina, sklera, konjungtiva, dan koroid, kemudian user menuju ke halaman yang dipilih.
47 Gambar 3.7Sequence Diagram kuis Gambar 3.7 Sequence Diagram menu kuis menggambarkan skenario dan langkahlangkah yang dilakukan user pada menu kuis. Pertama user masuk ke menu utama kemudian memilih menu kuis, lalu user menjawab soal kuis kemudian user memasukan nama. Gambar 3.8 Sequence Diagram video
48 Gambar 3.8 menu video menggambarkan skenario dan langkah-langkah yang dilakukan user pada menu video. Pertama user masuk ke menu utama, lalu user memilih menu video dan melihat video. Gambar 3.9 Sequence Diagram kosakata Gambar 3.9 menu kosakata menggambarkan skenario dan langkah-langkah yang dilakukan user pada menu kosakata. Pertama user masuk ke menu utama, lalu user memilih menu kosakata, kemudian user memilih huruf dan membaca kosakata. 3.3.4 Perancangan Antarmuka Pada bagian ini penulis menggambarkan antarmuka dari aplikasi yang akan dibuat dan akan menunjukan dimana letak tombol satu dan lainnya untuk memulai proses pembelajaran mata bagi mahasiswa kedokteran. 1. Rancangan Tampilan Intro Halaman intro merupakan tampilan awal sebelum memasuki halaman menu utama dari aplikasi ini, sebuah intro biasanya menampilkan gambar, logo, animasi dan text, bahkan ada yang menampilkan animasi yang
49 berhubungan dengan objek tersebut. Hal ini dimaksudkan untuk menarik perhatian user pada saat pertama kali melihat aplikasi ini. Adapun tautan yang ada pada halaman intro ini berupa button enter ke menu utama. Maka pada halaman ini, user dapat langsung mengoperasikan aplikasi ini. Aplikasi Pembelajaran Mata Masuk Gambar 3.10 Perancangan antar muka Intro Tombol dengan kata masuk Berfungsi untuk untuk masuk ke halaman selanjutnya yaitu halaman menu utama, pada halaman menu utama user akan mendapatkan pilihan untuk masuk ke fitur-fitur yang ada pada aplikasi ini 2. Rancangan Tampilan Menu Utama Halaman menu utama merupakan tampilan utama dari program ini sebelum memasuki halaman menu materi. Ada empat tautan yang ada pada halaman ini yaitu button materi, button kuis, button video dan button kosakata yang akan langsung menuju ke menu yang dipilih. Pada halaman ini, juga terdapat animasi awan dan suara. Animasi Awan Bergerak Kuis Video Materi Kosakata Gambar 3.11 Perancangan antar muka Menu Utama
50 Kata Animasi Awan Bergerak Sebuah animasi yang menunjukan awan bergerak yang berfungsi untuk mempercantik tampilan. Tombol dengan kata Kuis Berfungsi untuk masuk ke halaman kuis, di halaman kuis ini user harus menjawab beberapa pertanyaan pilihan ganda yang sudah di siapkan dan akan diberikan nilai akhir setelah menjawab beberapa pertanyaan tersebut. Tombol dengan kata Materi Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman menu materi, pada halaman menu materi user akan disuruh memilih bagian mata dan dapat langsung dipelajarinya. Tombol dengan kata Video Berfungsi untuk untuk masuk ke halaman video, dimana user akan disajikan video mata dengan pembahasan bagaimana mata bekerja. Tombol dengan kata Kosakata Berfungsi untuk untuk masuk ke halaman kosakata, dimana user dapat mencari kosakata ilmu kedokteran. 3. Rancangan Tampilan Menu Materi Halaman menu materi adalah tampilan lanjutan jika pada halaman utama user mengklik button materi, fungsi dari halaman ini yaitu sebagai penunjuk materi atau biasa disebut bab. Pada halaman ini terdapat button kembali ke menu utama. koroid retina Kornea Lensa Menu konjungtiva Iris Gambar 3.12 Perancangan antar muka Menu Materi
51 Tombol dengan kata Koroid Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman menú sub materi, pada halaman sub materi user akan dapat langsung mempelajari koroid. Tombol dengan kata retina Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman menú sub materi, pada halaman sub materi user akan dapat langsung mempelajari retina. Tombol dengan kata konjungtiva Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman menú sub materi, pada halaman sub materi user akan dapat langsung mempelajari konjungtiva. Tombol dengan kata kornea Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman menú sub materi, pada halaman sub materi user akan dapat langsung mempelajari kornea. Tombol dengan kata lensa Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman menú sub materi, pada halaman sub materi user akan dapat langsung mempelajari lensa. Tombol dengan kata Iris Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman menú sub materi, pada halaman sub materi user akan dapat langsung mempelajari iris. Tombol dengan kata menu Berfungsi untuk kembali ke halaman menu materi, pada halaman menu materi user akan kembali memilih bagian mata dan dapat langsung dipelajarinya
52 4. Rancangan Tampilan Materi Halaman materi merupakan tampilan materi pelajaran mata, pada halaman ini terdapat beberapa tautan yaitu button home, button menu, button menu, button sub-materi serta gambar yang dapat dipilih oleh user, yang berfungsi untuk menuju ke halaman yang di pilih. Materi Home Menu Sub Materi Gambar Exit Gambar 3.13 Perancangan antar muka Sub Materi Tombol dengan kata Home Berfungsi untuk kembali ke halaman menú utama, pada halaman menú utama user dapat memilih kembali fitur-fitur yang ada pada aplikasi ini. Tombol dengan kata menu Berfungsi untuk kembali ke halaman menú materi, pada halaman menú materi user akan disuruh memilih kembali bagian mata dan dapat langsung dipelajarinya. Tombol dengan kata Exit Berfungsi untuk keluar dari aplikasi tersebut. Tombol dengan kata sub materi Berfungsi untuk masuk ke halaman selanjutnya yaitu halaman sub materi, pada halaman sub materi user akan dapat mempelajari pembahasan materi. Kata Gambar Sebuah gambar yang ada di dalam sub materi yang berfungsi sebagai contoh dari pembahasan yang berguna untuk pengetahuan user.
53 5. Rancangan Tampilan kuis Rancangan halaman menu kuis merupakan tampilan halaman latihan untuk menguji kemampuan user pada materi pembelajaran mata. Pada halaman ini terdapat 10 soal ujian yang bisa diulang secara acak karena penulis merandom 19 soal, dan pada halaman ini terdapat tombol lanjut untuk melihat soal berikutnya dan di akhir halaman soal dapat melihat urutan nilai kuis. Gambar 3.14 Perancangan antar muka Kuis Kata soal kuis Sebuah text yang ada di dalam halaman kuis yang berfungsi sebagai soal latihan. Kata No Sebuah text yang ada di dalam halaman kuis yang berfungsi sebagai nomor latihan. Tombol A, B, C, D Tombol A menjelaskan bahwa ini adalah pilihan jawaban pertama. Tombol B menjelaskan bahwa ini adalah pilihan jawaban kedua. Tombol C menjelaskan bahwa ini adalah pilihan jawaban ketiga. Tombol D menjelaskan bahwa ini adalah pilihan jalaban keempat.
54 Kata jawaban yang anda pilih Sebuah text yang berfungsi untuk menjelaskan jalaban yang user Pilih. Tombol Next Berfungsi untuk masuk ke halaman soal selanjutnya. Tombol Waktu Berfungsi untuk menandakan waktu ujian user. 6. Rancangan Tampilan Video Rancangan halaman video adalah menu tambahan yang ada dalam aplikasi ini, yang berfungsi untuk menambah pengetahuan user dengan melihat proses mata bekerja dengan animasi 3D yang penulis unduh dari website. Pada halaman ini juga terdapat tautan untuk kembali ke menu. Gambar 3.15 Perancangan antar muka video Kata Tampilan Video Mata Sebuah video yang ada di dalam halaman video yang berguna untuk menambah pengetahuan user bagaimana cara mata bekerja. Tombol dengan kata menu Berfungsi untuk kembali ke halaman menú materi, pada halaman menú materi user akan disuruh memilih kembali bagian mata dan dapat langsung dipelajarinya.
55 7. Rancangan Tampilan Kosakata Rancangan halaman kosakata merupakan menu tambahan yang ada dalam aplikasi ini, menu kosakata berfungsi untuk menambah pengetahuan user dengan membaca isi kosakata. Pada halaman ini juga terdapat tautan untuk kembali ke menu utama. Gambar 3.16 Perancangan antar muka Kosakata Kata Tampilan Isi kosakata Sebuah text kosakata yang user pilih dalam list kosakata. Tombol dengan kata menu utama Berfungsi untuk kembali ke halaman menu utama. Tombol dengan kata list kosakata Berfungsi untuk menampilkan text kosakata Tombol A- Z berfungsi sebagai tombol untuk memilih kata.