BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Sistem Dalam membangun Aplikasi Simulasi pembelajaran Struktur Data Materi Stack, penulis akan menganalisa kebutuhan dasar sistem yang dibutuhkan. Analisa dilakukan terhadap data-data yang mempresentasikan masalah, sehingga dapat diketahui spesifikasi kebutuhan sistem yang akan dibangun nanti. Pada tugas akhir ini akan dibangun aplikasi simulasi pembelajaran struktur data materi stack berbasis multimedia. Aplikasi ini berisi materi-materi stack yang diperoleh dari banyak sumber dan latihan untuk menguji mahasiswa dalam pemahaman materi stack. Aplikasi ini disertai pula dengan suara sehingga memberikan kemudahan kepada pengguna dalam menggunakan aplikasi ini dan dapat dengan mudah mempelajari materi. Program ini memiliki kegunaan untuk mempermudah pembelajaran mahasiswa khususnya materi stack. Pada program ini mahasiswa dapat mengulang sendiri materi yang belum dikuasai dan mahasiswa dapat memahami materi lebih dalam yang telah disampaikan. Program ini menyediakan fitur-fitur yang menarik karena ditunjang oleh gambar dan suara, sehingga memiliki daya tarik tersendiri bagi mahasiswa yang dapat memicu semangat belajar mahasiswa untuk meningkatkan hasil belajar serta mahasiswa mudah memahami dan tidak merasa jenuh 27
28 Dari keseluruhan komponen sistem yang dibangun tersebut, maka didapatkan sekumpulan masukan dan keluaran, sebagai berikut : Masukkan : 1. Data Materi Stack : penjelasan Materi Stack. Keluaran : 1. Daftar jenis materi stack yang telah disediakan. 2. Daftar latihan soal stack tentang materi stack. yaitu : Aplikasi pembelajaran struktur data materi stack ini memiliki beberapa menu, 1. Menu profile Pada menu profile ini terdapat biodata dari penulis secara lengkap dengan maksud agar pengguna aplikasi ini dapat mengetahui dengan jelas siapa penulis atau pembuat dari aplikasi ini. Di dalam menu profile terdapat foto dari penulis, nama, tanggal lahir, alamat dan email dari penulis. 2. Menu Materi Pada menu materi ini terdapat jenis-jenis materi stack yang akan dibahas oleh penulis. Setelah kita klik materi akan terdapat jenis-jenis materi, tombol home, tombol lanjut atau next, tombol on dan off untuk sound dan tumpukan pensil. Jenis-jenis materi yang ditampilkan oleh penulis yaitu : a. Definisi Stack Dalam definisi stack ini penulis membahas pengertian dari stack yang mudah dimengerti dan dipahami oleh pengguna aplikasi ini, konsep kerja dari stack itu sendiri, serta contoh dari stack dalam bentuk animasi agar pengguna dapat lebih jelas memahami cara kerja stack. Dan operasi dasar
29 stack, yang terdapat 4 macam operasi dasar stack yang memiliki fungsi masing masing dari setiap operasi dasar beserta animasi dari operasi dasar stack agar mahasiswa dapat lebih mengerti dan memahami. b. Single Stack Pada materi single stack ini penulis membahas dari single stack. Dimulai dari pengertian single stack, proses dari single stack yaitu awal, push dan pop beserta animasinya, algortima dari awal, push, pop beserta animasinya dan kondisi dari single stack beserta animasinya. c. Double Stack Pada materi double stack ini penulis membahas dari double stack itu sendiri lebih mendalam. Di mulai dari pengertian double stack, proses dari double stack yaitu push1, pop1, push2 dan pop2 beserta animasinya, kondisi dari double stack beserta animasinya, dan algoritma dari push1, pop1, push2, dan pop2 beserta animasinya agar mahasiswa lebih memahami dan mengerti dari double stack. d. Notasi Aritmatika Dalam menu notasi aritmatika ini penulis membahas dari notasi aritmatika dalam stack. Di mulai dari pengertian notasi aritmatika, notasi infix, notasi prefix, notasi postfix, pengertian dari operator dan operand serta bentuk ekspresi infix dan postfix. 3. Menu Latihan Dalam menu latihan ini, terdapat beberapa tombol yaitu tombol home untuk kembali ke halaman utama dan tombol mulai untuk memulai latihan. Jika kita klik tombol mulai berarti kita akan memulai latihan, dalam latihan ini terdapat beberapa soal yang harus dikerjakan dengan tipe soal yang berbeda beda.
30 4. Menu Keluar Dalam menu keluar ini, terdapat tombol keluar jika kita ingin keluar dan sudah selesai mempelajari aplikasi struktur data materi stack ini kita tinggal mengklik tombol keluar. 3.2 Konsep Aplikasi Simulasi Pembelajaran Struktur Data Materi Stack ini merupakan aplikasi yang dibuat untuk mahasiswa-mahasiswi jurusan ilmu komputer. Aplikasi ini menggunakan pengembangan multimedia, yaitu konsep, perancangan, pengumpulan bahan, pembuatan, pengujian dan distribusi. Deskripsi konsep aplikasi seperti pada tabel 3.1. Judul Aplikasi Simulasi Pembelajaran Struktur Data Materi Stack Pengguna Mahasiswa-Mahasiswi Ilmu Komputer Bentuk Aplikasi Media Pembelajaran Interaktif Gambar Menggunakan file berformat JPG, PNG dan EPS Suara Menggunakan file berformat MP3 Animasi Animasi pada teks, tombol dan gambar dibuat sendiri Interaktif Menggunakan link atau action script berupa tombol untuk pengguna menuju ke halaman yang diinginkan. 3.3 Perancangan Pada perancangan ini akan menerangkan dengan jelas dan secara rinci perancangan Aplikasi Simulasi Pembelajaran Struktur Data Materi Stack ini meliputi pemodelan use case diagram, sequence diagram dan activity diagram.
31 3.3.1 Perancangan Use Case Diagram Pada aplikasi Simulasi Pembelajaran Struktur Data Materi Stack berbasis multimedia ini, mengidentifikasi yang menjadi aktor utamanya adalah mahasiswa. Dari identifikasi aktor tersebut maka akan peroleh suatu diagram use case dan skenario yang memperlihatkan interaksi antara use case dengan aktor. Use case diagram Aplikasi Simulasi Pembelajaran Struktur Data Materi Stack dapat dilihat pada gambar 3.1. Profile Materi Latihan Mahasiswa Keluar Gambar 3.1 Use case diagram Aplikasi Simulasi Pembelajaran Struktur Data Materi Stack. Berikut ini merupakan deskripsi Use case diagram diatas : Tabel 3.2 Use Case Profile Nama Aktor Deskripsi Profile. Mahasiswa. Mahasiswa dapat melihat profile penulis. 1. Mahasiswa memilih menu profile Skenario 2. Sistem menampilkan halaman profile. 3. Mahasiswa dapat melihat profile dari penulis dan mahasiswa memilih biodata diri. 4. Sistem menampilkan halaman bidata diri.
32 Lanjutan Tabel 3.2 Use Case Profile Kondisi Awal Kondisi Akhir Mahasiswa menerima halaman profile Mahasiswa dapat melihat profile penulis dan biodata penulis. Tabel 3.3 Use Case Materi Nama Aktor Deskripsi Materi Mahasiswa. Mahasiswa dapat memilih materi yang ada. 1. Mahasiswa memilih menu materi. Skenario 2. Sistem menampilkan halaman materi. 3. Mahasiswa memilih materi-materi yang ada. Kondisi Awal Kondisi Akhir Mahasiswa menerima halaman materi yang terdapat beberapa Materi yaitu : definisi stack, Single stack, notasi aritmatika dan double stack. Mahasiswa dapat melihat profile penulis. Tabel 3.4 Use Case Latihan Nama Aktor Deskripsi Latihan. Mahasiswa. Mahasiswa dapat mengerjakan latihan soal yang ada pada halaman latihan. 1. Mahasiswa memilih menu latihan. Skenario 2. Sistem menampilkan halaman latihan dan memilih menu mulai. 3. Mahasiswa dapat mengerjakan latihan soal. Pada setiap soal akan menampilkan point.
33 Lanjutan Tabel 3.4 Use Case Latihan Kondisi Awal Kondisi Akhir Mahasiswa menerima halaman latihan yang terdapat soal. Mahasiswa telah mengerjakan latihan soal. Tabel 3.5 Use Case Keluar Nama Aktor Deskripsi Keluar. Mahasiswa. Mahasiswa dapat keluar dari aplikasi. 1.Mahasiswa memilih menu keluar. Skenario 2.Mahasiswa memilih ya atau tidak 3.Sistem mengeluarkan aplikasi. Kondisi Awal Kondisi Akhir Mahasiswa menerima halaman keluar dan memilih keluar ya atau tidak. Aplikasi keluar. 3.3.2 Perancangan Activity Diagram Activity diagram menggambarkan alur aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alur berawal. Decision yang mungkin terjadi dan bagaimana mereka berakhir. Activity diagram juga menggambarkan proses pararel yang mungkin terjadi pada bebarap eksekusi. 1. Activity diagram menu profile Pada gambar 3.2 aktifitas dimulai pada saaat mahasiswa memilih menu profile maka sistem akan menampilkan halaman profile, setelah itu mahasiswa memilih biodata diri maka sistem akan menampilkan halaman bidata diri.
34 Pengguna Sistem Memilih menu profile Menampilkan halaman profile Memilih Biodata diri Menampilkan halaman biodata diri Gambar 3.2 Activity diagram menu profile 2. Activity diagram menu materi Pada gambar 3.3 aktifitas dimulai pada saat mahasiswa memilih menu materi, sistem akan menampilkan halaman materi aktifitas selanjutnya memilih submenu materi yang akan dipelajari yaitu submenu definisi stack, Single stack, double stack, notasi aritmatika. Setelah mahasiswa memilih salah satu submenu tersebut, maka akan ditampilkan materi yang dipilih. Pengguna Sistem Memilih menu materi Menampilkan halaman materi Memilih materi 1 sampai materi 4 Menampilkan materi yang sudah dipilih Gambar 3.3 Activity diagram menu materi
35 3. Activity diagram menu latihan Pada gambar 3.4 aktivity diagram aktifitas mahasiswa memilih menu latihan, didalam menu latihan aktifitas selanjutnya mahasiswa mulai latihan, sistem akan menampilkan halaman latihan dan mahasiswa akan mengerjakan latihan dan menjawabnya, setelah itu sistem akan memeriksa jawaban dan sistem akan menampilkan nilai. Pengguna Sistem Memilih menu latihan Menampilkan halaman latihan Memilih menu mulai Menampilkan halaman soal Mengerjakan soal Memeriksa jawaban Ya Jawaban benar Tidak Nilai +1 Nilai + 0 Menampilkan nilai Gambar 3.4 activity diagram menu latihan 4. Activity diagram menu keluar Pada gambar 3.5 aktivity diagram aktifitas mahasiswa memilih menu keluar, sistem akan menampilkan halaman menu keluar, mahasiswa akan memilih jika ya maka aplikasi akan keluar dan jika mahasiswa memilih tidak maka akan kembali kehalaman menu utama.
36 Pengguna Sistem Memilih menu keluar Menampilkan halaman keluar Menu Utama Tidak Ya Gambar 3.5 activity diagram menu keluar 3.3.3 Perancangan Sequence Diagram Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atar dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu. 1. Sequence diagram menu profile Pada sequence diagram menu profile mahasiswa atau pengguna akan mengakses melalui menu utama, pada menu utama pengguna akan memilih menu profile. Setelah itu akan terdapat tampilan profile penulis.
37 Mahasiswa Menu profile Biodata diri Pilih menu profile Tampilan halaman profile Pilih Biodata diri Tampilan halaman biodata diri Gambar 3.6 sequence diagram menu profile 2. Sequence diagram menu materi Pada sequence diagram menu materi mahasiswa atau pengguna akan mengakses melalui menu utama, pada menu utama pengguna akan memilih menu materi dan sistem akan menampilkan menu materi. Setelah itu mahasiswa atau pengguna dapat memilih sub materi yang ada dan sistem akan menampilkan sub materi. Mahasiswa Menu materi Halaman sub materi Pilih menu materi Tampilan halaman materi Pilih sub materi Tampilan halaman sub Gambar 3.7 Sequence diagram menu materi
38 3. Sequence diagram menu latihan Pada sequence diagram menu latihan atau pengguna akan mengakses melalui menu utama, pada menu utama mahasiswa akan memilih menu latihan dan sistem akan menampilkan halaman latihan dan mahasiswa akan mengerjakan latihan. Mahasiswa Menu latihan Soal Pilih menu latihan Tampilan halaman latihan Pilih mulai Tampilan halaman soal Mengerjakan soal Cek jawaban Menampilkan nilai Gambar 3.8 sequence diagram menu latihan 4. Sequence diagram menu keluar Pada sequence diagram menu keluar mahasiswa atau pengguna akan memilih menu keluar. Pada saat memilih menu keluar terdapat option mahasiswa akan keluar atau tidak. Mahasiswa Menu keluar Pilih menu keluar Keluar dari aplikasi Gambar 3.9 Sequence diagram menu keluar
39 3.3.4 Perancangan Storyboard Storyboard adalah gambar gambar yang mewakili pengambilan gambar dalam sebuah scene atau adegan. Storyboard digunakan sebagai alat bantu pada tahan perancangan multimedia. Pada bagian perancangan storyboard ini akan digambarkan mengenai bagian bagian yang akan ditampilkan pada Aplikasi Simulasi Pembelajaran Struktur Data Materi Stack. 1. Storyboard Halaman Depan Struktur Data Materi Stack Animasi Home Gambar Nama scene : Home Link : Home : menuju ke halaman menu utama Keterangan : Halaman depan Gambar 3.10 storyboard halaman depan 2. Storyboard Menu Utama STACK Profile Materi Latihan Keluar Nama scene : ON OFF Menu Link : Profile : Menuju ke halaman profile Materi : Menuju ke halaman materi Latihan : Menuju ke halaman latihan Keluar : Menuju ke halaman keluar ON : Menghidupkan suara lagu OFF : Mematikan suara lagu Katerangan : Halaman menu utama Gambar 3.11 storyboard halaman Menu Utama
40 3. Storyboard Halaman Profile Teks Biodata diri ON OFF Nama scene : Profile Link : Biodata diri : Menuju ke halaman biodata diri ON : Menghidupkan suara lagu OFF : Mematikan suara lagu Keterangan : Halaman menu profile Gambar 3.12 storyboard halaman profile 4. Storyboard Halaman Materi Materi Judul Materi Materi 1 Materi 2 Materi 3 Materi 4 Gambar Home Balik ON OFF Lanjut Nama scene : Materi1 Link : Materi 2 : menuju ke halaman materi 2 Materi 3 : menuju ke halaman materi 3 Materi 4 : menuju ke halaman materi 4 Home : menuju ke halaman menu utama Balik : kembali ke halaman sebelumnya Lanjut : menuju ke halaman selanjutnya ON : Menghidupkan suara lagu OFF : mematikan suara lagu Keterangan : Halaman materi Gambar 3.13 storyboard Halaman Materi
41 5. Storyboard Halaman Gambar Animasi Tulisan Judul gambar Papan Gambar Balik Nama scene : Gambar a Link Keterangan : Balik : Kembali ke halaman sebelumnya : Halaman gambar Gambar 3.14 storyboard halaman gambar 6. Storyboard Halaman Latihan Selamat Mengerjakan Latihan Soal Materi Stack Mulai Home Animasi Tulisan Nama scene : latihan Link : Mulai : Menuju ke halaman soal Home : Menuju ke halaman menu utama Keterangan : Halaman latihan Gambar 3.15 storyboard halaman latihan
42 7. Storyboard Halaman Jawaban Jawaban 1 Lanjut Nama scene : Jawaban Link Keterangan : Lanjut : Melanjutkan ke halaman selanjutnya : Halaman Jawaban Gambar 3.16 storyboard halaman jawaban 8. Storyboard Halaman Keluar STACK Apakah anda ingin keluar? YA Tidak ON OFF Nama scene : Keluar Link : Ya : keluar dari aplikasi Tidak : kembali ke halaman menu utama ON : menghidupkan suara lagu OFF : mematikan suara lagu Keterangan : Halaman Keluar Gambar 3.17 storyboard halaman keluar