BAB III KONSEP DAN PERANCANGAN

Transkripsi

1 BAB III KONSEP DAN PERANCANGAN 3.1 Konsep Konsep dari aplikasi pembelajaran Fungsi dan Persamaan Kuadrat ini menggunakan gambar, teks, animasi dan suara. Aplikasi ini dikhususkan untuk siswasiswi SMP sampai SMA dengan materi yang sesuai dengan kurikulum tingkat satuan pendidikan (KTSP) tahun Perancangan aplikasi ini bertujuan untuk menciptakan sebuah aplikasi pembelajaran berbasis multimedia yang dapat memberikan pembelajaran materi Fungsi dan Persamaan Kuadrat secara interaktif, menarik, padat dan lengkap serta membuat media pembelajaran alternatif sebagai pengganti buku teks. Pembuatan aplikasi ini meliputi beberapa tahap yaitu konsep, perancangan, pengumpulan material, pembuatan, pengujian dan distribusi. Deskripsi konsep aplikasi ini adalah sebagai berikut: Tabel 3.1 Deskripsi Konsep Aplikasi Judul Aplikasi Pembelajaran Fungsi dan Persamaan Kuadrat Pengguna Gambar Suara Animasi teks Interaktif Siswa-siswi SMP sampai SMA Menggunakan file berformat.png dan.jpg Menggunakan file berformat.mp3 Animasi pada teks dan gambar dibuat sendiri oleh penulis Menggunakan link berupa tombol yang memungkinkan pengguna menuju dari halaman satu ke halaman yang lain 3.2 Analisa Sistem Analisa sistem adalah tahap awal yang harus dilakukan dalam merancang sebuah sistem. Pada tahap ini penulis menganalisa kebutuhan sistem. Analisa 22

2 23 dilakukan terhadap data-data yang mempresentasikan masalah, sehingga dapat diketahui spesifikasi kebutuhan sistem yang akan dibangun. Matematika adalah salah satu mata pelajaran yang dianggap sulit dipelajari dan menjadi sesuatu yang menakutkan, bahkan dari mendengar namanya pun sudah menakutkan bagi sebagian besar pelajar. Salah satu materi Matematika yang penting untuk dipelajari oleh para siswa-siswi SMP sampai SMA adalah materi tentang Fungsi dan Persamaan Kuadrat. Ada beberapa cara yang harus dilakukan para siswasiswi untuk mempelajari dan memahami materi tentang Fungsi dan Persamaan Kuadrat, yang pertama adalah dengan cara membaca buku teks pelajaran yang berisi materi tersebut, namun dengan cara ini siswa-siswi butuh waktu yang cukup panjang untuk bisa memahami dan menguasai materinya. Cara yang kedua adalah melalui pengajaran oleh guru, namun ada saja siswa-siswi yang sulit menangkap pelajaran yang sedang diajarkan oleh guru sehingga mereka tidak memahami materi tersebut. Cara yang ketiga adalah dengan menggunakan aplikasi pembelajaran berbasis multimedia yang dapat memberikan pembelajaran materi secara interaktif, menarik, padat dan lengkap. Dari ketiga cara diatas, cara ketiga merupakan cara yang paling efektif untuk mendapatkan pembelajaran materi tentang Fungsi dan Persamaan Kuadrat. Karena dengan cara tersebut, materi diberikan secara interaktif, menarik, padat dan lengkap sehingga siswa-siswi akan lebih senang mempelajarinya. 3.3 Perancangan Pada tahap ini penulis akan melakukan perancangan aplikasi pembelajaran Fungsi dan Persamaan Kuadrat, perancangan ini terdiri dari perancangan storyboard, perancangan use case diagram, perancangan activity diagram, perancangan sequence diagram dan perancangan antarmuka.

3 Perancangan Storyboard Storyboard merupakan pengorganisasi grafik, contohnya adalah sederetan ilustrasi atau gambar yang ditampilkan berurutan untuk keperluan visualisasi awal dari suatu file, animasi atau urutan media interaktif, termasuk interaktivitas di web. Satu kolom storyboard mewakili satu tampilan di layar monitor. Tabel 3.2 Storyboard Halaman Utama No Visual 1 Animasi Judul Home Music Exit Materi Latiha Tes Background papan tulis Nama Form : Menu utama Logo Mercu Buana Link Ket. : materi, latihan, tes : Halaman ini menampilkan menu utama pada aplikasi ini

4 25 Tabel 3.3 Storyboard Halaman Materi 2 Home Exit Materi Prev Nama Form Link Nomor halaman Background papan tulis : Materi : materi Next Ket. : Halaman ini menampilkan materi Fungsi dan Persamaan Kuadrat Tabel 3.4 Storyboard Halaman Latihan 3 Home Exit Soal Latihan Prev Background papan tulis Next Nama Form : Latihan Link Ket. : latihan : Halaman ini menampilkan soal-soal latihan

5 26 Tabel 3.5 Storyboard Halaman Penjelasan Soal 4 Kembali ke soal Home Exit Penjelasan Soal Prev Nomor Soal Background papan tulis Next Nama Form : Penjelasan soal Link Ket. : latihan : Halaman ini menampilkan penjelasan dari soal-soal latihan Tabel 3.6 Storyboard Halaman Tes 5 No Soal Waktu a d b e c Nama Form : Tes Jawaban Background papan tulis Next Link Ket. : tes : Halaman ini menampilkan soal-soal tes

6 Perancangan Use Case Diagram Use Case Diagram adalah layanan atau fungsi-fungsi yang disediakan oleh sistem untuk pengguna-penggunanya yang berguna untuk menggambarkan kebutuhan antara use case dan actor, memvisualisasikan kebutuhan sistem dari sudut pandang pengguna, serta menggambarkan proses kebutuhan sistem dari sudut pandang pengguna. Pada aplikasi pembelajaran Fungsi dan Persamaan Kuadrat ini dapat diketahui bahwa actor (aktor) utamanya adalah user (pengguna). Maka diperoleh satu use case diagram dan beberapa skenario yang memperlihatkan interaksi-interaksi use case diagram dengan aktor use case diagram. APLIKASI PEMBELAJARAN Melihat materi pembelajaran Mengerjakan soal latihan <<include>> Melihat penjelasan soal latihan Pengguna Mengerjakan soal tes Gambar 3.1 Use Case Diagram Aplikasi Pembelajaran Fungsi dan Persamaan Kuadrat Berikut ini adalah penjelasan Use Case Diagram yang telah digambarkan pada Gambar 3.1: Tabel 3.7 Use Case Menu Materi Nama Materi Aktor Deskripsi Skenario Siswa-siswi SMP sampai SMA Pengguna dapat melihat dan mempelajari materi Fungsi dan Persamaan Kuadrat. 1. Pengguna memilih menu materi. 2. Sistem akan menampilkan halaman materi.

7 28 Tabel 3.8 Use Case Menu Materi (Lanjutan) Kondisi Awal 1. Pengguna menerima halaman materi pelajaran tentang Fungsi dan Persamaan Kuadrat. Kondisi Akhir 1. Pengguna mempelajari materi Persamaan dan Fungsi Kuadrat Tabel 3.9 Use Case Menu Latihan Nama Latihan Aktor Deskripsi Skenario Kondisi awal Kondisi akhir Siswa-siswi SMP sampai SMA Pengguna dapat mengerjakan soal latihan dan melihat penjelasan penyelesaian soal latihan. 1. Pengguna memilih menu latihan. 2. Sistem akan menampilkan halaman latihan yang berisikan soal-soal latihan. 3. Pengguna memilih menu penjelasan. 4. Sistem akan menampilkan halaman penjelasan penyelesaian soal latihan. 1. Pengguna menerima halaman latihan yang berisi soal-soal latihan. 2. Pengguna menerima halaman penjelasan yang berisi penjelasan penyelesaian soal latihan. 1. Pengguna mengerjakan soal latihan. 2. Pengguna mempelajari penjelasan penyelesaian soal latihan. Tabel 3.10 Use Case Menu Tes Nama Tes Aktor Deskripsi Siswa-siswi SMP sampai SMA Pengguna dapat menguji kemampuannya dengan mengerjakan soal tes dengan batas waktu yang ditentukan.

8 29 Tabel 3.11 Use Case Menu Tes (Lanjutan) Skenario Kondisi Awal 1. Pengguna masuk ke halaman tes. 2. Sistem menampilkan halaman tes yang berisikan soal pilihan ganda. 3. Pengguna menjawab soal pilihan ganda. 4. Sistem mengecek jawaban hasil dari pekerjaan pengguna. 1. Pengguna menerima halaman tes Kondisi Akhir 1. Pengguna mengisi jawaban soal tes Perancangan Activity Diagram Diagram ini menggambarkan berbagai aktivitas dalam sistem yang sedang dirancang, mulai dari titik awal, melalui kondisi (decision) yang mungkin terjadi, kemudian sampai pada titik akhir. Diagram ini juga mampu menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Diagram ini tidak menggambarkan perilaku atau proses internal sebuah sistem maupun interaksi antar subsistem, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas secara umum. Berikut ini adalah gambar beberapa diagram aktivitas pada aplikasi pembelajaran Fungsi dan Persamaan Kuadrat:

9 30 Pengguna Sistem Pengguna membuka aplikasi memilih menu materi Menampilkan halaman menu utama Menampilkan halaman materi Gambar 3.2 Activity Diagram Menu Materi

10 31 Pengguna Sistem Pengguna membuka aplikasi Memilih menu latihan Menampilkan halaman menu utama Klik mulai Menampilkan halaman latihan Mengerjakan soal latihan dan memilih penjelasan soal Menampilkan soal latihan Menampilkan halaman penjelasan soal Gambar 3.3 Activity Diagram Menu Latihan

11 32 Pengguna Sistem Pengguna membuka aplikasi Memilih menu tes Menampilkan halaman menu utama Klik mulai Menampilkan halaman tes Menjawab soal Soal ditampilkan secara acak Memeriksa jawaban Ya Jawaban benar? Tidak Hasil + 1 Hasil + 0 Soal = 10 Tidak Ya Menampilkan halaman hasil nilai Gambar 3.4 Activity Diagram Menu Tes

12 33 Pada Activity Diagram menu materi (Gambar 3.2) diatas menjelaskan aktifitas dimulai saat pengguna membuka aplikasi, kemudian sistem akan menampilkan halaman menu utama. Selanjutnya pengguna memilih menu materi. Kemudian sistem akan menampilkan halaman materi yang sudah dipilih dan bisa dipelajari oleh pengguna. Pada Activity Diagram menu latihan (Gambar 3.3) diatas menjelaskan aktifitas dimulai ketika pengguna memilih menu latihan, lalu sistem akan menampilkan halaman utama menu latihan. Pengguna kemudian meng-klik tombol mulai untuk menampilkan soal-soal latihan. Setelah pengguna mengerjakan soal latihan, selanjutnya pengguna memilih menu penjelasan soal, lalu sistem akan menampilkan halaman penjelasan soal. Pada Activity Diagram menu tes (Gambar 3.4) diatas menjelaskan bahwa aktifitas dimulai ketika pengguna memilih menu tes. Selanjutnya sistem akan menampilkan halaman tes. Pengguna kemudian meng-klik tombol mulai untuk menampilkan soal-soal tes. Pada saat mengerjakan diberikan waktu selama 60 menit untuk mengerjakan soal. Kemudian pengguna dapat memilih jawaban yang dianggap benar, lalu sistem akan mengecek setiap jawaban dari pengguna, jika jawaban benar maka akan mendapatkan nilai 1 jika salah nilainya 0. Setelah 10 soal ditampilkan, sistem akan mengecek seluruh jawaban pengguna dan akan ditampilkan pada bagian halaman nilai Perancangan Sequence Diagram Diagram ini menggambarkan interaksi antarobjek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence Diagram terdiri atas dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Bisa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu.

13 Sequence Diagram Halaman Materi Pada Sequence Diagram halaman materi, pengguna masuk halaman menu, kemudian memilih menu matri. Sistem akan menampilkan halaman materi dan bisa dipelajari oleh pengguna. Pengguna (user) Menu Materi Akses menu Menampilkan menu Masuk halaman materi Menampilkan halaman materi Gambar 3.5 Sequence Diagram Materi Sequence Diagram Halaman Latihan Pada Sequence Diagram halaman latihan, pengguna masuk halaman menu, kemudian memilih menu latihan. Sistem akan menampilkan soal-soal latihan dan selanjutnya pengguna memilih menu penjelasan soal, sistem akan menampilkan halaman penjelasan soal latihan.

14 35 Pengguna (user) Menu Latihan Penjelasan Akses menu Menampilkan menu Masuk halaman latihan Menampilkan soal latihan Memilih penjelasan soal Mengerjakan soal dan memilih penjelasan soal Menampilkan penjelasan soal Gambar 3.6 Sequence Diagram Latihan Sequence Diagram Halaman Tes Pada Sequence Diagram halaman tes, pengguna masuk halaman menu, kemudian memilih menu tes, sistem akan menampilkan soal-soal tes dan selanjutnya pengguna memilih jawaban yang dianggap benar, sistem akan menampilkan nilai pada jawaban yang benar.

15 36 Pengguna (user) Menu Tes Akses menu Menampilkan menu Masuk halaman tes Menampilkan soal tes Menjawab soal Cek jawaban Menampilkan hasil Gambar 3.7 Sequence Diagram Tes Perancangan Antarmuka Pada tahap perancangan antarmuka ini, penulis mendesain rancangan antarmuka untuk aplikasi yang akan dibuat dan menunjukan letak tombol yang satu dengan yang lainnya untuk dapat memproses pembelajaran Fungsi dan Persamaan Kuadrat, serta menjelaskan tombol-tombol yang ada pada aplikasi ini.

16 Perancangan Antarmuka Halaman Menu Utama Animasi Judul Home Music Exit Materi Latihan Tes Logo Mercu Buana Gambar 3.8 Perancangan Antarmuka Halaman Menu Utama Pada halaman utama terdapat 3 tombol untuk menuju materi, latihan dan tes. Pada halaman ini juga terdapat tombol home untuk kembali ke halaman utama, tombol music untuk menghidupkan atau mematikan suara, dan tombol exit untuk keluar dari aplikasi. Dibagian kanan bawah terdapat logo Universitas Mercu Buana.

17 Perancangan Antarmuka Halaman Materi Judul Bab Home Exit Materi Prev Angka Halaman Next Gambar 3.7 Perancangan Antarmuka Halaman Materi Gambar 3.9 Perancangan Antarmuka Halaman Materi Pada halaman materi terdapat tombol angka halaman yang dapat dipilih oleh pengguna. Tombol next dan prev untuk menuju ke materi selanjutnya atau kembali ke materi sebelumnya. Tombol home untuk kembali ke menu utama dan tombol exit untuk keluar dari aplikasi Perancangan Antarmuka Halaman Latihan a. Antarmuka Halaman Awal Menu Latihan Teks Mulai Gambar 3.10 Perancangan Antarmuka Halaman Awal Latihan

18 39 Pada halaman awal menu latihan ini terdapat tombol mulai yang berfungsi untuk memulai latihan dan menampilkan halaman soal latihan. b. Antarmuka Halaman Soal Latihan Home Exit Soal Latihan Prev Next Gambar 3.11 Perancangan Antarmuka Halaman Latihan Pada antarmuka halaman latihan ini menampilkan 3 soal yang harus dikerjakan oleh pengguna. Tombol next dan prev untuk menuju ke soal selanjutnya atau kembali ke soal sebelumnya. Tombol home untuk kembali ke menu utama dan tombol exit untuk keluar dari aplikasi. c. Antarmuka Halaman Awal Penjelasan Teks Penjelasan Gambar 3.12 Perancangan Antarmuka Halaman Awal Penjelasan

19 40 Pada halaman awal menu penjelasan ini terdapat tombol mulai yang berfungsi untuk memulai melihat penjelasan soal dan menampilkan halaman penjelasan soal latihan. d. Antarmuka Halaman Penjelasan Kembali ke soal Home Exit Penjelasan Soal Prev Nomor Soal Next Gambar 3.11 Perancangan Antarmuka Halaman Penjelasan Soal Gambar 3.13 Perancangan Antarmuka Halaman Penjelasan Pada antarmuka halaman penjelasan soal ini terdapat penjelasan penyelesaian soal latihan dari nomor 1 sampai 3. Tombol nomor soal dapat dipilih oleh pengguna untuk melihat penjelasan soal berdasarkan nomor soalnya. Tombol next dan prev untuk menuju ke penjelasan selanjutnya selanjutnya atau kembali ke penjelasan sebelumnya. Tombol kembali ke soal untuk kembali lagi menuju halaman soal, tombol home untuk kembali ke menu utama dan tombol exit untuk keluar dari aplikasi.

20 Perancangan Antarmuka Halaman Tes a. Antarmuka Halaman Awal Tes Teks Mulai Gambar 3.14 Perancangan Antarmuka Halaman Awal Tes Pada halaman awal menu tes ini terdapat tombol mulai yang berfungsi untuk memulai untuk memulai tes dan menampilkan halaman soal tes. b. Antarmuka Halaman Tes No Soal Waktu a d b e c Jawaban Next Gambar 3.15 Perancangan Antarmuka Halaman Tes Halaman tes ini menampilkan 10 soal pilihan ganda dan pilihan jawaban a, b, c, d dan e berbentuk tombol yang dapat diklik oleh pengguna. Pada halaman ini juga

21 42 terdapat tombol Next yang berfungsi untuk menuju ke soal berikutnya. Terdapat waktu untuk masa pengerjaan tes, lamanya waktu yang diberikan adalah 60 menit. c. Antarmuka Papan Nilai Tes Papan Nilai Home No Nama Nilai Gambar 3.16 Perancangan Antarmuka Halaman Papan Nilai Tes Halaman papan nilai tes ini untuk menampilkan nilai yang diperoleh oleh pengguna setelah menjawab soal. Kemudian pengguna memasukkan nama ke kolom yang tersedia, nama pengguna akan ter-update berdasarkan nilai tertinggi berada diposisi paling atas dan nilai terkecil berada diposisi paling bawah.