BAB III ANALISA DAN PERANCANGAN
3.1 Analisis Masalah Analisis merupakan tahap awal yang penulis lakukan sebelum membangun perangkat lunak. Analisis dibagi menjadi dua bagian yaitu analisis dan perancangan aplikasi. Analisis dilakukan terhadap data-data yang menampilkan masalah perancangan perangkat lunak. Sehingga diketahui spesifikasi kebutuhan sistem yang dibangun. Proses analisis sangat penting untuk menentukan berhasil tidaknya aplikasi dibangun. Dikarenakan tahap analisis merupakan tahap di dalam rekayasa perangkat lunak yang dapat mendefinisikan dengan jelas permasalahan dan kebutuhan sistem dapat dipenuhi sehingga sistem yang dibangun akan menjadi solusi dalam masalah tersebut. 3.1.1 Analisis Aplikasi Sebelum Dikembangkan Analisis awal yang dilakukan penulis sebelum perancangan aplikasi adalah menganalisis permasalahan sistem dari aplikasi yang sudah jadi untuk mengetahui tujuan dalam pengembangan sistem didalam aplikasi. Penulis mengembangkan sebuah aplikasi penghasil soal dan algoritma dijkstra(Anis Cherid,2009). Dengan mengembangkan source code yang sudah ada, aplikasi yang di analisis sebelum dikembangkan merupakan sebuah aplikasi yang dapat menampilkan graph dan langkah-langkah dari graph yang ditampilkan. Dimana aplikasi ini dapat menampilkan suatu graph berarah kepada user, langkah awal user menggunakan aplikasi yaitu dengan memasukkan nilai didalam kotak input yang kemudian nilai tersebut akan direspon oleh sistem bila user menekan tombol mulai, maka sistem akan merespon nilai yang diinput kedalam kotak input untuk menentukan banyak node yang ditampilkan. Aplikasi dapat pula menampilkan langkah-langkah algoritma dijkstra didalam textarea, dimana langkah-langkah ini akan tampil bila graph telah tampil, sehingga user dapat mengetahui langkah-langkah sesuai dari graph yang ditampilkan. Setiap nilai jarak node ke node dapat bervariasi dikarenakan nilai tidak ditentukan oleh user melainkan oleh sistem yang membuat.
35
Pada sistem aplikasi, terdapat tahap-tahap yang telah ditentukan oleh sistem, sehingga user tidak dapat merubahnya yaitu dalam jumlah node yang ditampilkan telah ditentukan oleh sistem dengan maksimal nilai node adalah 11, dimana user tidak dapat memasukkan nilai melebihi maksimal node yang telah ditentukan. Sistem tidak dapat menampilkan graph kembali dikarenakan, sistem belum dirancang untuk menampilkan graph berulang-ulang, kecuali bila user menutup aplikasi dan membuka kembali. 3.1.2 Analisis Rencana Pengembangan Aplikasi Dalam analisis yang dilakukan untuk dapat mengembangkan sistem, penulis harus dapat mengetahui permasalahan yang ada didalam analisis aplikasi sebelum dikembangkan. Permasalahan yang diketahui akan menjadi pengembangan sistem didalam
aplikasi.
Sehingga
tujuan
yang
direncanakan
akan
dapat
diimplementasikan. Rencana pengembangan aplikasi yang penulis lakukan adalah terfokus untuk mengembangkan aplikasi dapat menampilkan soal secara otomatis secara berulang-ulang dan antar muka didalam aplikasi, topik yang dibahas didalam aplikasi yaitu untuk memberikan pembelajaran interaktif kepada user tentang bagaimana memahami setiap langkah-langkah dari algoritma Dijsktra dari graph yang ditampilkan dengan menjawab soal secara pilihan ganda (multi choices). Dalam tahap menjawab soal terdapat aturan yang ditetapkan yaitu soal yang ditampilkan terdapat beberapa level yang berbeda, disetiap level terdapat perbedaan dalam menampilkan soal dimana pada level 1 hanya memberikan soal untuk memahami langkah-langkah awal algoritma dijkstra, kemudian pada level 2 memberikan soal lanjutan dari level 1 untuk memahami langkah-langkah berikutnya dari algoritma dijkstra, pada level 3 sistem akan menampilkan soal yang berhubungan dengan langkah akhir dari algoritma dijkstra yaitu melanjutkan soal dari level 2 dan untuk level 4 sistem akan menampilkan soal secara penuh dari langkah algoritma dijkstra dengan graph yang tampil. Dalam menampilkan soal, sistem akan mengacak graph yang tampil dan mengacak jawaban yang tampil, sehingga aplikasi dapat lebih variatif digunakan oleh user dalam mempelajari algoritma dijkstra.
36
Aplikasi juga memberikan kemudahan bagi user untuk mempelajari langkah-langkah algoritma dijkstra dan menjawab soa-soal yang diberikan yaitu terdapat lembar kerja di dalam aplikasi yang berfungsi untuk membantu user dalam mempelajari setiap langkah demi langkah yang telah dilalui. Lembar kerja ini terdapat di samping graph yang ditampilkan bila user menekan tombol “Tampilkan Kotak Jaraknya dari Asal”, sehingga akan tampil lembar kerja yang dapat digunakan oleh user dalam membantu mempelajari langkah-langkah algoritma dijkstra dan menjawab soal-soal yang diberikan, kemudian lembar kerja juga dapat disembunyikan kembali bila user menekan tombol “Sembunyikan Kotak Jaraknya dari Asal”, sehingga lembar kerja pun akan hilang tanpa menghilangkan tulisan yang diinput didalam lembar kerja. Aplikasi juga menempatkan aturan dalam menjawab soal, dimana user diberikan kesempatan menjawab sebanyak 2 kali, Kesempatan ini berfungsi untuk membatasi user dalam memilih jawaban, bila user memilih jawaban salah maka kesempatan menjawab akan berkurang 1, jika user melakukan kesalahan sebanyak 2 kali maka sistem akan memberitahukan user jawaban yang benar sebelum mengembalikan soal ke tahap pemilihan awal dan menampilkan graph yang lain. Setiap jawaban yang benar akan dapat dipelajari oleh user dengan ditampilkan di kotak teks soal, sehingga user dapat mempelajari langkah-langkah yang telah dilalui untuk dapat menjawab soal berikutnya. Aplikasi juga akan memberikan hasil jawaban kepada user dengan menampilkan hasil nilai jawaban yang benar maupun yang salah. Aplikasi juga akan menampilkan kesimpulan dari langkah-langkah algoritma dijkstra sesuai dengan graph yang ditampilkan, kesimpulan ini merupakan hasil langkah akhir dari graph yang ditampilkan. Bila user telah berhasil menjawab seluruh soal-soal yang diberikan sesuai dengan level yang dilalui, maka aplikasi akan menampilkan animasi bintang didalam aplikasi sebagai tanda user telah berhasil menjawab seluruh soal di level yang sedang dilalui. Aplikasi akan menampilkan kotak pesan kepada user yaitu pemilihan ke level berikutnya bila user baru mencapai level 1 maka sistem akan mengaktifkan level 2 dan user juga dapat mengerjakan soal-soal di level sebelumnya bila user memilih level sebelumnya yang telah dilalui. Sistem tidak mengaktifkan keseluruhan level dikarenakan, aplikasi dirancang untuk melewati
37
level demi level secara bertahap dari level 1 ke level 4.bila user berhasil menjawab seluruh soal di level 2 maka akan tampil kotak pesan pemilihan level dari level 1 ke level 3. Dan bila user telah berhasil menjawab seluruh soal di level 3 maka, sistem akan menampilkan seluruh level dari level 1 hingga level 4 akan aktif sehingga user dapat memilih apakah ingin kembali mengerjakan kelevel sebelumnya atau kelevel selanjutnya. Level yang terakhir merupakan level 4, sehingga user harus melaui level 4 jika ingin menyelesaikan seluruh level di dalam aplikasi belajar dijkstra. 3.2 Perancangan Aplikasi Didalam perancangan aplikasi penulis membuat suatu pemodelan aplikasi yang akan mempermudah aplikasi untuk dapat dipahami pemanfaatannya. 3.2.1 Pemodelan Diagram Use Case Diagram use case dapat menjelaskan interaksi antara user dengan sistem dan menggambarkan fungsionalitas dari sebuah apa yang dilakukan sistem. Secara umum pemodelan Use Case dapat dilihat pada Gambar 3.1. System
User
Menampilkan Sejarah
Menampilkan Petunjuk
Melakukan Latihan
Gambar 3.1 Diagram Use Case Aplikasi Penghasil Soal Otomatis Dalam Topik Algoritma Dijkstra Penjelasan mengenai pemodelan diagram use case dari gambar 3.1 diatas dapat di amati dibawah ini. 1. Menampilkan halaman Sejarah yaitu user dapat melihat halaman Sejarah Algoritma Dijsktra. 2. Menampilkan halaman Petunjuk yaitu user dapat melihat halaman Petunjuk untuk mengetahui petunjuk dalam latihan soal. 38
3. Melakukan latihan yaitu user memulai untuk melakukan latihan soal.
3.2.2 Pemodelan Diagram Aktifitas 3.2.2.1 Diagram Aktifitas Sejarah User
System
Memilih Tombol Sejarah
Menampilkan halaman Sejarah
Gambar 3.2 Diagram Aktifitas Menu Mulai Pada diagram aktifitas sejarah langkah awal yang dilakukan user yaitu memilih tombol sejarah dan kemudian sistem akan menampilkan halaman sejarah kepada user setelah itu langkah berakhir. 3.2.2.2 Diagram Aktifitas Petunjuk User
System
Memilih Tombol Petunjuk
Menampilkan halaman Petunjuk
Gambar 3.3 Diagram Aktifitas Halaman Petunjuk Pada diagram aktifitas Petunjuk langkah awal user akan memilih tombol Petunjuk dan kemudian sistem akan menampilkan halaman petunjuk, sehingga
39
user dapat melihat petunjuk-petunjuk bagaimana aplikasi digunakan didalam melakukan latihan soal 3.2.2.3 Diagram Aktifitas Latihan Pada diagram aktifitas latihan langkah user memilih tombol Mulai pada halaman utama, kemudian sistem akan menampilkan halaman latihan pada level 1, kemudian untuk menampilkan soal maka user harus menekan tombol Mulai untuk menampilkan soal-soal latihan. Maka user dapat menjawab soal yang ditampilkan. jika, user telah memilih salah satu jawaban maka sistem akan memeriksa jawaban, apakah jawaban yang dipilih user benar atau salah. Jika jawaban user benar maka sistem akan menampilkan kotak pesan jawaban benar dan selanjutnya sistem akan menampilkan soal berikutnya, tetapi bila jawaban user salah maka sistem akan menampilkan kotak pesan bahwa jawaban salah dan selanjutnya sistem akan mengurangi kesempatan menjadi 1 dan bila user memilih jawaban yang salah kembali maka sistem akan menampilkan kotak pesan kembali dengan menampilkan kotak pesan bahwa kesempatan menjawab 0 dan akan menampilkan jawaban yang benar kepada user. Sistem akan menampilkan kotak pesan pindah level kepada user,setelah user berhasil menjawab soal-soal yang ditampilkan, sehingga user dapat memilih melanjutkan ke level 2. Pada level 2 soal yang ditampilkan yaitu soal lanjutan dari langkah-langkah algoritma dijkstra pada level 1, dan sistem akan menampilkan kotak pesan seperti kondisi jawaban yang dipilih oleh user dan bila user telah berhasil menjawab soal-soal yang ditampilkan maka user kembali menampilkan kotak pesan pindah level 3 dan sistem akan mengaktifkan level 3 sehingga user dapat melanjutkan ke level 3 dan sistem juga akan mengaktifkan level 1&2 apabila user ingin kembali menjawab soal-soal di level sebelumnya. Pada level 3&4 terdapat perbedaan pada soal yang ditampilkan bila level 3 menampilkan soal lanjutan pada level 2 dan dapat melanjutkan ke level 4 maka pada level 4 yaitu melanjutkan soal latihan pada level 3 dan bila user telah berhasil menjawab soal-soal yang ditampilkan maka sistem akan menampilkan informasi bahwa user telah berhasil menjawab seluruh soal dari level 1 sampai level 4. Pada level 3&4 tombol level dari level 1 & 4 akan aktif dikarenakan pada level 3 level tertinggi adalah level 4 dan pada level 4
40
hanya memberikan pilihan kepada user apakah nmenginginkan kembali ke level sebelumnya.Seperti Gambar 3.4. User
System
Menampilkan Graph Berikutnya
B
Menampilkan Soal Berikutnya
pilih Jawaban
Cek Jawaban
[Salah]
[Benar] Pesan Jawaban Benar
Pesan Jawaban Salah [Ya masih ada kesempatan]
[soal <= maks.soal] Soal <= max Soal
Kesemp atan - 1 [tidak ada kesempatan]
Pesan kesempatan = 0
[soal > maks.soal]
Pesan Nilai Jawaban
Cek Level
Soal Kembali ke Awal [Level <= 4]
Pilih Tombol Level
Level <= 4
Pesan Level Berikutnya
[Level >4]
Cek Tombol Level Pesan seluruh Level berhasil di selesaikan
A
Gambar 3.4 Diagram Aktifitas Latihan
41
A
[Pilih Level Selanjutnya]
Level yang
dipilih Tampil Halaman Level selanjutnya yang dipilih
[Pilih Level Sebelumnya]
Tampil Halaman Level sebelumnya yang dipilih
B
Gambar 3.4 Diagram Aktifitas Latihan (Lanjutan)
3.2.3 Pemodelan Diagram Sequence Diagram Sequence mengambarkan perilaku (attitude) rangkaian langkahlangkah pada dilakukan untuk sebagai respon sebuah kejadian untuk menghasilkan sebuah output tertentu. Pada diagram sequence menampilkan objek contoh dan pesan-pesan yang melewati objek-objek yang terdapat didalam diagram
use
case.
Diagram
Sequence
menunjukkan
interaksi
dengan
menampilkan partisipan dengan garis alir secara vertikal dan pengurutan pesan dari atas ke bawah. Dari use case yang telah dijelaskan diatas, maka dapat digambarkan diagram sequence yang sesuai seperti pada berikut ini.
3.2.3.1 Penjelasan Diagram Sequence Menampilkan Sejarah. Pada Diagram Sequence Menampilkan Sejarah yaitu diagram sequence dimana aktor dapat mengakses link menu sejarah yang terdapat pada menu utama
42
di halaman utama aplikasi. Dalam menu utama aktor dapat melihat tampilan (view) dari hasil proses yang telah dipilih.seperti Gambar 3.5.
User menu Sejarah
Menu utama Menuju menu utama
Proses sistem
Mengakses menu sejarah
Sub
Menjalankan akses ke sub menu sejarah
Gambar 3.5 Diagram Sequence Sejarah
3.2.3.2 Penjelasan Diagram Sequence Menampilkan Petunjuk. Pada Diagram Sequence Menampilkan Petunjuk yaitu diagram sequence dimana aktor dapat mengakses link menu petunjuk yang terdapat pada menu utama di halaman utama aplikasi. Dalam menu utama aktor dapat melihat tampilan (view) dari hasil proses yang telah dipilih yaitu dapat mempelajari petunjuk dalam melakukan latihan soal di menu latihan. Seperti pada Gambar 3.6.
43
User
Menu utama
Proses sistem
Sub menu
Petunjuk Menuju menu utama
Mengakses menu Petunjuk
Menjalankan akses ke sub menu Petunjuk
Gambar 3.6 Diagram Sequence Petunjuk 3.2.3.3 Penjelasan Diagram Sequence Latihan Pada diagram sequence latihan user dapat melakukan latihan dengan menjawab soal-soal yang ditampilkan dan graph yang telah di acak oleh sistem. Soal yang dibuat merupakan pilihan ganda, jadi user hanya dapat memilih satu jawaban yang benar. Sistem akan memeriksa jawaban user bila user telah memilih salah satu jawaban, jika jawaban user benar maka sistem akan memeriksa maksimal dari soal sebelum menampilkan soal berikutnya, jika maksimal soal belum terpenuhi maka soal berikutnya akan tampil dengan tidak merubah graph yang tampil, jika terpenuhi maka sistem akan menampilkan hasil dari latihan dan lanjut ke level berikutya. Jika jawaban user salah maka sistem akan memeriksa kesempatan ada, jika terpenuhi maka user harus menjawab soal yang sama dan jika, jawaban user salah kesempatan tidak ada dan sistem akan menampilkan graph baru dengan kembali ke awal soal. Bila sudah menjawab seluruh latihan soal, kemudian level selanjutnya akan aktif sehingga user dapat melanjutkan ke level selanjutnya dan user juga dapat memilih level sebelumnya. Seperti pada Gambar 3.7.
44
User
halaman latihan
menjawab soal latihan
Periksa Periksa maks. Periksa nilai Tampil level Jawaban Soal kesempatan Latihan Selanjutnya
Jawaban User
Jawaban Benar
Nilai tampil
Level Berikutnya
Jawaban Salah Menjawab soal yang Benar
Kembali mengerjak an soal latihan
Gambar 3.7 Diagram Sequence Latihan 3.3 Algoritma Menampilkan Soal Pada algoritma menampilkan soal, soal yang ditampilkan oleh sistem merupakan langkah-langkah dari algoritma dijkstra. mulai Membuat Array D Mengacak Graph
G
Mengacak langkah B Menampilkan Soal berikutnya
Menentukan A Benar Jawaban
Gambar 3.8 Algoritma Menampilkan Soal
45
C
A Menentukan Jawaban Salah Salah Periksa Jawaban User Benar Tampil Jawaban Benar Pesan Jawaban Benar
Pesan Jawaban Salah Kesempatan != 0 Periksa kesempat an Kesempatan =0
Soal<=maxSoal Pesan Kesempatan Habis Soal kembali
Periksa maxSoal
B
ke awal
Soal>maxSoal Tampil kesimpulan & animasi bintang
Menghilangkan satu Jawaban salah
Pesan Pindah Level
Periksa user pilih tombol level
C
User pilih Tombol Level Selanjutnya Tampil Halaman Level sebelumnya
User pilih Tombol Level Sebelumnya Mengecek Level
F
E
Gambar 3.8 Algoritma Menampilkan Soal (lanjutan)
46
D
E
Level <=4
Periksa Jumlah Level
Pesan Level Naik F Level > 4
Pesan Level Selesai
Periksa sesuai level yang dipilih G
selesai
Gambar 3.8 Algoritma Menampilkan Soal (lanjutan) Pada algoritma ini yaitu menjelaskan alur dari program yang dibuat. Langkah awal yang djalani pada kode program adalah membuat array yang berfungsi menampung langkah-langkah algoritma Dijkstra, kemudian program akan mengacak graph yang akan ditampilkan untuk menjadi pertanyan dalam langkah algoritma Dijkstra dan kemudian soal akan mengacak langkah-langkah algoritma untuk dijadikan jawaban benar dan jawaban yang salah. Program tidak mengacak soal yang dijadikan pertanyaan dikarenakan soal yang ditanyakan merupakan langkah-langkah dari algoritma Dijkstra setahap demi setahap sesuai dengan graph yang ditampilkan. Langkah yang ditampilkan sesuai tingkatan level, untuk level 1 menampilkan soal untuk mempelajari langkah-langkah awal dari algoritma dijkstra dengan batas yang telah ditentukan oleh program, untuk level 2 program juga tidak mengacak soal melainkan hanya mengacak penempatan jawaban dan mengacak graph yang akan ditampilkan, seterusnya program hanya menampilkan soal dengan langkah-langkah algoritma dijkstra secara berurutan dengan melanjutkan langkah pada level 1 dengan batas soal yang sudah ditentukan oleh program. Untuk dengan level 3, dimana program akan menampilkan soal dengan langkah-langkah algoritma dijkstra secara berurutan pula dengan melanjutkan langkah pada level 2 dengan batas soal yang sudah ditentukan oleh program. Kemudian pada level 4, menampilkan soal langkah-langkah secara penuh dari langkah algoritma dijkstra, sehingga user harus dapat menguasai langkah-langkah
47
algoritma dijktra secara keseluruhan dari soal-soal yang telah dijawab di level sebelumnya. Ketika user memilih tombol Mulai di halaman utama, maka user harus menekan tombol Mulai lagi di halaman latihan supaya program menampilkan graph dan soal secara acak, bentuk soal merupakan pilihan ganda. Setelah soal ditampilkan maka user dapat menjawab salah satu jawaban. Jawaban yang telah dipilih oleh user, selanjutnya akan diproses oleh program. Program akan memeriksa apakah jawaban user benar atau salah. Jika jawaban user salah maka program akan mengurangi kesempatan menjadi 1, kemudian akan memeriksa apakah kesempatan == 0 atau tidak. Jika tidak maka program akan menghilangkan satu jawaban yang salah dan user harus menjawab soal yang sama graph yang tidak berubah, bila user menjawab jawaban salah kembali maka kesempatan habis program akan menampilkan jawaban yang benar kepada user sebelum program mengacak graph kembali dan user dapat menjawab soal dari awal. Selanjutnya, jika jawaban user benar maka program akan memeriksa soal yang telah di tampilkan apakah telah mencapai maxSoal atau belum. Jika, jumlah soal yang belum mencapai maxSoal maka program akan menampilkan soal berikutnya tanpa mengacak kembali graph yang ditampilkan dan bila soal telah mencapai maxSoal, maka program akan menampilkan nilai kotak pesan kesimpulan dan animasi bintang sebelum user pindah ke level selanjutnya dan program juga akan menampilkan hasil nilai jawaban benar dan salah yang telah dijawab oleh user. Jika level belum mencapai level 4 maka, user harus memilih level berikutnya. Program akan menampilkan level sebelumnya bila user ingin melakukan latihan di level yang telah dicapai. Bila, user telah berhasil mencapai level 4 dan berhasil menjawab seluruh soal di level 4, maka program akan menampilkan informasi bahwa user telah berhasil mencapai seluruh latihan soal di seluruh level yang di berikan, sehingga program akan berakhir. 3.4 Perancangan Antar Muka Perancangan antar muka pada aplikasi, sedikit memberikan sentuhan animasi pada halaman utama saat user membuka aplikasi. Pada halaman utama terdapat menu Mulai, Sejarah, Petunjuk yang membedakan pada tampilan halaman utama
48
dan tampilan antar muka pada halaman latihan. Berikut ini beberapa bentuk antar muka pada aplikasi dengan sistem pada aplikasi. 3.4.1 Rancangan Antar Muka pada Halaman Utama Halaman utama adalah antar muka pertama kali user membuka aplikasi. Pada halaman utama terdapat menu Mulai, Sejarah dan Petunjuk. Pada halaman utama penulis membuat tampilan animasi dengan memberikan animasi yang dapat bergerak, sehingga antar muka mempunyai daya tarik dalam tampilannya. Animasi awan bergerak
mata hari
Animasi awan
Animasi awan bergerak Animasi pohon
Animasi pohon
Mulai
Petunjuk
Sejarah
Nama Aplikasi
Gambar 3.9 Rancangan Gambar Antar Muka Halaman Utama 3.4.2. Rancangan Antar Muka pada Halaman Menu Mulai Pada rancangan antar muka halaman menu Mulai adalah halaman dimana user memilih menu atau tombol Mulai di halaman utama. Menu mulai ini berfungsi untuk menampilkan halaman latihan soal yaitu level 1. Animasi awan bergerak
Animasi awan
Animasi awan bergerak
Animasi pohon
mata hari
Animasi pohon
Silahkan Lihat Petunjuk untuk Petunjuk memulai latihan penggunaan aplikasi Mulai
Sejarah
Petunjuk Nama Aplikasi
Gambar 3.9 Rancangan Gambar Antar Muka Halaman Menu Mulai 49
3.4.3 Rancangan Antar Muka Halaman Menu Sejarah Pada rancangan antar muka halaman menu Sejarah adalah halaman dimana user memilih menu atau tombol Sejarah di halaman utama. Menu sejarah ini berfungsi untuk menampilkan halaman menu sejarah yang terdapat tombol level yang dapat dipilih user untuk memberikan informasi tentang sejarah dari algoritma dijsktra. Animasi awan bergerak
Animasi awan
mata hari
Scroll up
Animasi awan bergerak
Animasi pohon
Photo Edsger W. Dijsktra
Animasi pohon
Sejarah tentang Algoritma Dijsktra
Scroll Down A
Mulai
Sejarah
n i m a s i
Petunjuk Nama Aplikasi
p o h o n
Gambar 3.11 Rancangan Gambar Antar Muka Halaman Menu Sejarah 3.4.4 Rancangan Antar Muka Halaman Menu Petunjuk Pada rancangan antar muka halaman menu Petunjuk adalah halaman dimana user memilih menu atau tombol Petunjuk di halaman utama. Menu Petunjuk ini berfungsi untuk menampilkan halaman menu petunjuk yang terdapat tombol level yang dapat dipilih user untuk memberikan informasi tentang penggunaan aplikasi belajar dijkstra. Animasi awan bergerak
matahar i
Animasi awan
Scroll up
Animasi awan bergerak Animasi pohon
Animasi pohon
Petunjuk penggunaan penggunaan aplikasi aplikasi Petunjuk Scroll Down
Mulai
Sejarah
Petunjuk Nama Nama Aplikasi Aplikasi
A n i m a s i p o h o n
Gambar 3.12 Rancangan Gambar Antar Muka Halaman Menu Petunjuk
50
3.4.5 Rancangan Antar Muka Halaman Latihan Soal Setelah user memilih tombol Mulai, maka akan tampil halaman latihan soal level 1, didalam antar muka halaman latihan soal level 1, dalam perancangan halaman latihan soal di setiap level tidak berbeda bentuknya. Di setiap level juga terdapat animasi gelembung yang akan tampil secara otomatis dari bawah keatas sampai aplikasi dijalankan, tujuan animasi gelembung yaitu untuk memberikan effect animasi didalam halaman latihan soal. seperti Gambar 3.13
Pertanyaan
D
3 B
5
A
Arahkan pointer ke node untuk memperbesar edge Mulai
jawaban Tampilkan kotak jarak dari Asal
A
Jawaban A
B
Jawaban B
C
Jawaban C
D
Jawaban D
Gambar 3.13 Rancangan Gambar Antar Muka Halaman Latihan Soal
3.4.6 Rancangan Antar Muka Kotak Lembar Kerja Terdapat tombol “Tampilkan Kotak Jarak dari Asal” yang berfungsi menampilkan lembar kerja bila tombol ditekan. Lembar kerja akan secara default tidak tampil saat program dijalankan. Pada kotak lembar kerja yang terdapat disamping setiap graph berfungsi untuk membantu user dalam mengerjakan soalsoal yang diberikan. Pada kotak lembar kerja dapat di pindahkan dengan cara di drag, sesuai dengan kebutuhan user dan kotak lembar kerja juga dapat di sembunyikan dengan menekan tombol “Sembunyikan Kotak Jarak dari Asal”,
51
sehingga kotak lembar kerja akan hilang tanpa menghilangkan tulisan yang diinput oleh user. Seperti Gambar 3.14
Pertanyaan
D
3 B
5
A
Arahkan pointer ke node untuk memperbesar edge Mulai
jawaban
Tampilkan kotak jarak dari Asal
A
Jawaban A
B
Jawaban B
C
Jawaban C
D
Jawaban D
Gambar 3.14 Rancangan Gambar Antar Muka Kotak Lembar Kerja
3.4.7 Rancangan Antar Muka Halaman Kotak Pesan Jawaban Pada halaman kotak pesan Jawaban adalah kotak pesan yang tidak berbeda tempat, hanya saja informasi tulisan yang akan berbeda sesuai dengan jawaban yang dipilih oleh user. Bila, user memilih jawaban benar maka terdapat tulisan di “info jawaban” bahwa “jawaban Anda Benar”, bila user salah maka akan tampil tulisan di “info jawaban” yaitu “Jawaban Anda Salah” dan kemudian bila kesempatan=0,maka akan tampil bila tulisan di “info Jawaban” yaitu “Jawaban Anda Salah” dan menampilkan tulisan di “info Jawaban User” yaitu jawaban yang benar dari soal yang ditampilkan dan pada tulisan. Bila, tombol Ok dipilih oleh user sesuai dengan jawaban user yaitu bila, jawaban user benar maka akan berfungsi untuk menampilkan soal berikutnya tanpa merubah graph yang tampil dan jika jawaban user salah, masih terdapat kesempatan maka aplikasi akan tetap menampilkan soal yang tampil dengan menghilangkan satu jawaban yang salah.
52
Tetapi, jika user menjawab jawaban yang salah dan kesempatan telah tidak ada, maka program akan menampilkan graph yang baru dan menampilkan pertanyaan kembali ke awal sesuai dengan graph yang ditampilkan. Animasi orang
Info Jawaban Info Jawaban user Kesempatan Anda .., Coba Lagi? Ok
Gambar 3.15 Rancangan Gambar Antar Muka Kotak Pesan Jawaban
3.4.8 Rancangan Antar Muka Kotak Pesan Kesimpulan Pada rancangan antar muka latihan soal terdapat kotak pesan kesimpulan yang berfungsi untuk memberitahukan kepada user kesimpulan dari langkahlangkah graph yang menampilkan jalur tepat dari langkah-langkah yang dilalui . Seperti Gambar 3.16. Kesimpulan Hasil dari langkah-langkah yang dilalui
Gambar 3.16 Rancangan Gambar Antar Muka Kesimpulan 3.4.9 Rancangan Antar Muka Kotak Pesan Level Pada rancangan antar muka latihan soal terdapat kotak pesan level, yang berfungsi memberitahukan kepada user untuk dapat melanjutkan ke level selanjutnya. Seperti Gambar 3.17. Selamat
Animasi orang
Level 1 | level 2 | level 3 | level 4
Gambar 3.17 Rancangan Gambar Antar Muka Kotak Pesan Level 53
Pada kotak pesan level terdapat perbedaan disetiap level, dikarenakan pada level 1 program hanya mengaktifkan tulisan level 1 & level 2, dikarenakan user tidak dapat melakukan latihan soal langsung ke level 3 & 4. Pada level 2 hanya mengaktifkan level 1,2,3 dan untuk level 4 tidak aktif karena user belum melakukan latihan di level 3 dan pada level 3 semua tombol akan aktif, dikarenakan level 4 merupakan level terakhir, sehingga user dapat memilih apakah ingin melakukan latihan soal di level 4 atau kembali ke level sebelumnya dan tulisan “Selamat” akan tampil sesuai dengan level selanjutnya yang ingin di capai. Contoh “User berhasil melakukan latihan soal di level 1 maka akan tampil tulisan “Lanjut ke Level 2”, program akan memberikan informasi kepada user untuk melanjutkan ke level 2”. Program juga akan memberikan kesempatan kepada user apakah ingin melakukan latihan soal di level sebelumnya yang telah dialui atau tidak dengan mengaktifkan tombol level-level sebelumnya yang telah dialui oleh user. 3.4.10 Rancangan Antar Muka Halaman Kotak Nilai Pada halaman kotak nilai akan tampil hasil nilai jawaban benar dan salah saat user telah menjawab seluruh soal yang ditampilkan, kotak nilai ini merupakan hasil nilai jawaban benar dan salah user dalam melakukan latihan soal. Seperti Gambar 3.18. Nilai : Benar :
0
Salah :
0
Gambar 3.18 Rancangan Gambar Antar Muka Halaman Kotak Nilai.
54