Prosedur Instalasi Aplikasi Sebelum menjalankan aplikasi Algoritma Dasar ini, user harus menjalankan proses instalasi aplikasi terlebih dahulu. Adapun langkah-langkah instalasi yang harus dilakukan adalah sebagai berikut: 1. User harus mengisnstall Perangkat Ajar Algoritma Dasar.air terlebih dahulu
Gambar 1. Open Icon Box Untuk Install Aplikasi Algoritma Dasar 2. Users harus mengunggu proses penginstallan sampai selesai
Gambar 2. Persiapan Installisasi Aplikasi Algoritma Dasar
3. Click install untuk memulai proses penginstallan aplikasi Algoritma Dasar
Gambar 3. Proses Install Aplikasi Algoritma Dasar 4. Click Continue untuk mulai mendapatkan data aplikasi
Gambar 4. Proses Install Data Aplikasi Algoritma Dasar
5. Installing aplikasi Algoritma Dasar. Setelah selesai install aplikasi Algoritma Dasar dapat dijalankan.
Gambar 5. Installisasi Aplikasi Algoritma Dasar
Pengoperasian Aplikasi Berikut merupakan gambaran pengoperasian aplikasi Algoritma Dasar ini pada Admin side://backend. 1. Halaman Menu utama backend Algoritma Dasar Pada halaman ini terdapat 2 pilihan menu, yaitu : 1. Insert soal, untuk menambah soal. 2. Update soal, untuk mengedit soal.
Gambar 6. Menu Utama a. Halaman Menu insert soal – pilih materi Pada halaman ini dapat memilih materi yang ingin di insert, terdapat 2 tombol buttons yaitu “Next” dan “Back”. “Back” untuk kembali ke tampilan menu utama sedangkan “Next” untuk melanjutkan ke halaman insert soal dan jawaban.
Gambar 7. Halaman Insert Soal - Pilih Materi b. Halaman insert soal – insert soal dan jawaban Pada halaman ini terdapat TextArea untuk mengisi soal, 5 TextField untuk mengisi keterangan soal, 5 TextField untuk mengisi jawaban, dan 5 checkbox untuk menandakan jawaban yang benar. Terdapat 2 tombol buttons yaitu “Insert” dan “Back”. “Back” untuk kembali ke tampilan halaman insert soal - pilih materi sedangkan “Insert” untuk menambahkan soal ke dalam database.
Gambar 8. Halaman Insert Soal – Insert Soal dan Jawaban c. Halaman pemberitahuan soal sudah ke insert Pada halaman ini menampilkan info “Soal sudah terinsert” untuk memberitahukan kepada user bahwa soal sudah terinsert. Terdapat tombol button “Back” yang berfungsi untuk kembali ke halaman Menu utama.
Gambar 9. Halaman Pemberitahuan Soal Sudah ke Insert
d. Halaman Menu Update – pilih materi Pada halaman ini dapat memilih materi yang ingin di update, terdapat 2 tombol buttons yaitu “Next” dan “Back”. “Back” untuk kembali ke tampilan menu utama sedangkan “Next” untuk melanjutkan ke halaman pilih soal.
Gambar 10. Halaman Menu Update –Pilih Materi e. Halaman Menu Update – pilih soal Pada halaman ini terdapat combobox pilih soal untuk memilih soal yang tersedia, terdapat 3 tombol buttons, “tampilkan soal”, “edit soal” dan “Back”. “Back” untuk kembali ke halaman Menu update - pilih materi, “tampilkan soal” untuk menampilkan soal yang di pilih dan “edit soal” untuk ke halaman edit soal dan jawaban.
Gambar 11. Halaman Menu Update – Pilih Soal f. Halaman Menu Update – edit soal dan jawaban Pada halaman ini terdapat TextArea untuk mengedit soal, 5 TextField untuk mengedit keterangan soal, 5 TextField untuk mengedit jawaban, dan 5 checkbox untuk menandakan jawaban yang benar. Terdapat 2 tombol buttons yaitu “update” dan “Back”. “Back” untuk kembali ke tampilan halaman update soal - pilih soal sedangkan “update” untuk mengupdate soal ke dalam database.
Gambar 12. Halaman Menu Update – Edit Soal dan Jawaban g. Halaman pemberitahuan soal sudah ke update Pada halaman ini menampilkan info “Soal sudah terupdate” untuk memberitahukan kepada user bahwa soal sudah terupdate. Terdapat tombol button “Back” yang berfungsi untuk kembali ke halaman Menu utama.
Gambar 13. Halaman Pemberitahuan Soal Sudah ke Update
2. Berikut merupakan gambaran pengoperasian aplikasi Algoritma Dasar ini pada Client side: 1. Halaman awal aplikasi Algortima Dasar Pada saat aplikasi dijalankan, maka akan muncul layar splash screen (durasi 7 detik) aplikasi Algoritma Dasar.
Gambar 14. Splash Screen 2. Halaman Menu utama aplikasi Algoritma Dasar Halaman ini akan muncul setelah layar splash screen. Pada halaman ini, terdapat 6 pilihan menu, yaitu: a. Pseudocode, berisikan video dan kuis pembelajaran tentang pseuocode b. Logika, berisikan kuis tentang logika c. Algoritma, berisikan pilihan menu yang terdiri dari selection, looping, bubble sort, selection sort dan insertion sort.
d. Materi, yang berisikan materi yang diajarkan dalam aplikasi Algoritma Dasar yaitu pseudocode, selection, looping, bubble sort, selection sort dan insertion sort. e. Referensi, berisikan link untuk belajar algoritma f. Keluar, berisikan credit sekaligus keluar dari aplikasi
Gambar 15. Menu Utama 3. Halaman Menu Pseudocode Menampilkan Video pembelajaran tentang pseudocode. Pada halaman ini terdapat 2 tombol buttons yaitu “Back” dan “Quiz”. “Back” untuk kembali ke tampilan menu utama sedangkan “Quiz” berisikan pertanyaan-pertanyaan tentang pseudocode.
Gambar 16. Video Pseudocode 4. Halaman Pop up Info Menampilkan informasi tentang cara untuk menjawab kuis pada setiap materi yang tersedia.
Gambar 17. Pop up Info Pseudocode
5. Halaman Menu Logika Menampilkan
pertanyaan-pertanyaan
logika
untuk
melatih
kemampuan logika. Terdapat tombol “Back” untuk kembali ke tampilan menu utama.
Gambar 18. Halaman Menu Logika 6. Halaman Menu Algoritma Menampilkan beberapa menu pilihan yaitu selection, looping, bubble sort, selection sort dan insertion sort. Tombol “Back” untuk kembali ke tampilan menu utama.
Gambar 19. Halaman Menu Algoritma 7. Halaman Menu Selection Menampilkan Video pembelajaran tentang selection. Pada halaman ini terdapat 2 tombol buttons yaitu “Back” dan “Quiz”. “Back” untuk kembali ke tampilan menu algoritma sedangkan “Quiz” berisikan pertanyaan-pertanyaan tentang selection.
Gambar 20. Video Selection
8. Halaman Menu Looping Menampilkan Video pembelajaran tentang looping. Pada halaman ini terdapat 2 tombol buttons yaitu “Back” dan “Quiz”. “Back” untuk kembali ke tampilan menu algoritma sedangkan “Quiz” berisikan pertanyaan-pertanyaan tentang looping.
Gambar 21. Video Looping 9. Halaman Menu Bubble Sort Menampilkan Video pembelajaran tentang bubble sort. Pada halaman ini terdapat 2 tombol buttons yaitu “Back” dan “Quiz”. “Back” untuk kembali ke tampilan menu algoritma sedangkan “Quiz” berisikan pertanyaan-pertanyaan tentang bubble sort
Gambar 22. Video Bubble Sort 10. Halaman Menu Selection Sort Menampilkan Video pembelajaran tentang selection sort. Pada halaman ini terdapat 2 tombol buttons yaitu “Back” dan “Quiz”. “Back” untuk kembali ke tampilan menu algoritma sedangkan “Quiz” berisikan pertanyaan-pertanyaan tentang selection sort.
Gambar 23. Video Selection Sort
11. Halaman Menu Insertion Sort. Menampilkan video pembelajaran tentang insertion sort. Pada halaman ini terdapat 2 tombol buttons yaitu “Back” dan “Quiz”. “Back” untuk kembali ke tampilan menu algoritma sedangkan “Quiz” berisikan pertanyaan-pertanyaan tentang insertion sort.
Gambar 24. Video Insertion Sort 12. Halaman Menu Materi Menampilkan materi-materi yang diajarkan dalam aplikasi Algoritma Dasar yaitu psedocode, selection, looping, bubble sort, selection sort dan insertion sort.
Gambar 25. Halaman Materi 13. Halaman Menu Referensi Menampilkan website yang memberikan pembelajaran tambahan tentang algoritma dan materi-materi lainnya seputar pemrograman.
Gambar 26. Halaman Referensi
14. Halaman Menu Keluar Menampilkan credit dari aplikasi Algoritma Dasar dan keluar dari aplikasi.
Gambar 27. Halaman Credit
