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 2006. 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
Siswa-siswi SMP sampai SMA
Gambar
Menggunakan file berformat .png dan .jpg
Suara
Menggunakan file berformat .mp3
Animasi teks
Animasi pada teks dan gambar dibuat sendiri oleh penulis
Interaktif
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
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.
24
3.3.1
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 Home
Animasi Judul
Materi
Latiha n
Background papan tulis
Music
Exit
Tes Logo Mercu Buana
Nama Form
: Menu utama
Link
: materi, latihan, tes
Ket.
: Halaman ini menampilkan menu utama pada aplikasi ini
25
Tabel 3.3 Storyboard Halaman Materi 2 Home
Exit
Materi
Prev
Next
Nomor halaman
Background papan tulis Nama Form Link
: Materi : materi
Ket.
: Halaman ini menampilkan materi Fungsi dan Persamaan Kuadrat
Tabel 3.4 Storyboard Halaman Latihan 3 Home
Soal Latihan
Prev
Next
Background papan tulis
Nama Form
: Latihan
Link
: latihan
Ket.
: Halaman ini menampilkan soal-soal latihan
Exit
26
Tabel 3.5 Storyboard Halaman Penjelasan Soal 4 Home
Kembali ke soal
Exit
Penjelasan Soal
Prev
Next
Nomor Soal
Background papan tulis Nama Form
: Penjelasan soal
Link
: latihan
Ket.
: Halaman ini menampilkan penjelasan dari soal-soal latihan
Tabel 3.6 Storyboard Halaman Tes 5 No
Waktu
Soal
a
d
b
e
c Jawaban
Next
Background papan tulis Nama Form
: Tes
Link
: tes
Ket.
: Halaman ini menampilkan soal-soal tes
27
3.3.2
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
<
>
Melihat penjelasan soal latihan
Mengerjakan soal tes
Pengguna 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
Siswa-siswi SMP sampai SMA
Deskripsi
Pengguna dapat melihat dan mempelajari materi Fungsi dan Persamaan Kuadrat. 1. Pengguna memilih menu materi.
Skenario
2. Sistem akan menampilkan halaman materi.
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
Siswa-siswi SMP sampai SMA
Deskripsi
Pengguna dapat mengerjakan soal latihan dan melihat penjelasan penyelesaian soal latihan.
Skenario
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.
Kondisi awal
1. Pengguna menerima halaman latihan yang berisi soal-soal latihan. 2. Pengguna menerima halaman penjelasan yang berisi penjelasan penyelesaian soal latihan.
Kondisi akhir
1. Pengguna mengerjakan soal latihan. 2. Pengguna mempelajari penyelesaian soal latihan.
penjelasan
Tabel 3.10 Use Case Menu Tes Nama
Tes
Aktor
Siswa-siswi SMP sampai SMA
Deskripsi
Pengguna dapat menguji kemampuannya dengan mengerjakan soal tes dengan batas waktu yang ditentukan.
29
Tabel 3.11 Use Case Menu Tes (Lanjutan) Skenario
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 pekerjaan pengguna.
hasil
Kondisi Awal
1. Pengguna menerima halaman tes
Kondisi Akhir
1. Pengguna mengisi jawaban soal tes.
3.3.3
dari
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:
30
Pengguna
Sistem
Pengguna membuka aplikasi
memilih menu materi
Menampilkan halaman menu utama
Menampilkan halaman materi
Gambar 3.2 Activity Diagram Menu Materi
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
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?
Hasil + 1
Tidak
Hasil + 0
Soal = 10
Tidak
Ya Menampilkan halaman hasil nilai
Gambar 3.4 Activity Diagram Menu Tes
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.
3.3.4
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.
34
3.3.4.1 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.
Menu
Pengguna (user)
Materi
Akses menu
Menampilkan menu Masuk halaman materi
Menampilkan halaman materi
Gambar 3.5 Sequence Diagram Materi
3.3.4.2 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.
35
Menu
Pengguna (user)
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
3.3.4.3 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.
36
Menu
Pengguna (user)
Tes
Akses menu
Menampilkan menu Masuk halaman tes
Menampilkan soal tes Menjawab soal
Cek jawaban
Menampilkan hasil
Gambar 3.7 Sequence Diagram Tes
3.3.5
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.
37
3.3.5.1 Perancangan Antarmuka Halaman Menu Utama
Home
Music
Exit
Animasi Judul
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.
38
3.3.5.2 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. 3.3.5.3 Perancangan Antarmuka Halaman Latihan a. Antarmuka Halaman Awal Menu Latihan
Teks
Mulai
Gambar 3.10 Perancangan Antarmuka Halaman Awal Latihan
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
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.
41
3.3.5.4 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
Waktu
Soal 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
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
No
Nama
Home
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.