BAB III ANALISIS DAN PERANCANGAN Untuk memahami aplikasi yang dirancang maka salah satu tahapan yang harus dilalui adalah melakukan analisis, karena dengan melakukan analisis akan membuat lebih terarah dan jelas dalam alur aplikasinya. Selanjutnya hasil dari analisa akan dilanjutkan kepada proses perancangan yang akan diterapkan ke dalam pembangunan aplikasi selanjutnya. 3.1 Prototipe Aplikasi Penghasil Soal Kuis Otomatis Prototipe aplikasi penghasil soal kuis otomatis Adalah Prototipe aplikasi yang menghasilkan soal kuis secara otomatis dengan menggunakan aturan-aturan (rules) tertentu (Anis Cherid, 2012). Pada prototipe aplikasi ini, proses pembuatan aturan-aturan penghasil soal masih tergantung kepada pembuatan aturan menggunakan teknik programming yang rumit. Prototipe aplikasi penghasil soal kuis otomatis menggunakan aplikasi Microsoft PowerPoint sebagai media ditempatkannya kuis otomatis tersebut bersama dengan materi pembelajaran sehingga menjadi aplikasi yang utuh dan berdiri sendiri. Slide PowerPoint berisi kode program dalam bahasa VBScript untuk ditulis ke dalam teks file dan program yang dibuat dengan Visual Basic Application (VBA). Di dalam kode program VBScript, terdapat kode untuk memanggil kembali berbagai kode VBA yang terdapat di dalam aplikasi PowerPoint. Sedangkan program di dalam PowerPoint yang dibuat dengan VBA berfungsi merekam kode program VBScript ke dalam teks file, mengeksekusi Windows Scripting Host (WSH) dan memberikan perintah kepada WSH untuk mengeksekusi file teks berisi kode program VBScript kemudian juga berfungsi mengubah tampilan slide sesuai dengan pertanyaan dan pilihan jawaban yang dihasilkan oleh program VBScript. Selain itu yang terpenting adalah program di dalam PowerPoint yang dibuat dengan VBA menyediakan struktur memori tiruan agar hasil eksekusi kode program dapat dievaluasi dengan mudah.
28
29
Arsitektur aplikasi penghasil soal kuis otomatis terdiri dari sebuah interpreter yang berguna sebagai penerjemah kode program sehingga kode program yang baru dapat dibuat oleh sebuah aplikasi yang sedang berjalan, kemudian kode program yang baru tersebut dieksekusi bersama-sama dengan aplikasi yang menghasilkan kode program tersebut. Gambar 3.1 memperlihatkan arsitektur aplikasi penghasil soal kuis otomatis.
Aplikasi Penghasil Soal Kuis Otomatis
…. dim a(10) a(0)=20 msgbox a(0) ….
File Teks
Interpreter
Gambar 3.1 Arsitektur Aplikasi Penghasil Soal Kuis Otomatis
Berdasarkan gambar 3.1 yang menjadi perhatian pada penelitian penulis adalah bagaimana dapat membantu dalam pembuatan file teks yang berisi kode program. Diperlukan sebuah antarmuka yang memudahkan user dalam membuat kode program untuk aplikasi penghasil soal kuis otomatis. Antarmuka tersebut memberikan solusi akan kemungkinan terjadinya kesalahan dalam pengetikan kode program. Berikut dibawah ini langkah kerja prototipe aplikasi penghasil soal kuis otomatis dalam memproses file teks berisi kode program sehingga menghasilkan soal kuis otomatis. 1. Awal Aplikasi dijalankan. Pada awal aplikasi dijalankan terdiri dari tiga slide PowerPoint. Lihat gambar 3.2.
30
Gambar 3.2 Tampilan Slide untuk Menambah Kuis Dipilih
2. Tekan tombol <Shift-F5> pada keyboard dan kemudian klik panah besar yang terdapat di tengah-tengah layar presentasi. Komputer akan menampilkan form untuk menambah slide kuis baru.
Gambar 3.3 Form untuk Menambah Slide Kuis Baru
3. Kemudian pilih jenis kuis dengan Pilihan Ganda Otomatis dengan Program dan tampilan seperti gambar 3.4 akan muncul.
31
Gambar 3.4 Tampilan untuk Menambahkan Program Penghasil Kuis
4. Selanjutnya pada form tersebut dapat dimasukan kode program yang digunakan sebagai kode program penghasil kuis otomatis. Berikut dibawah ini adalah contoh kode program sederhana : Kode 3.1 Potongan Program Sederhana 1. createQuestion "Siapakah nama orang yang pertama kali menginjakkan kakinya di bulan?" 2. createCorrectAnswer "Neil Amstrong" 3. createWrongAnswer "Edwin Aldrin" 4. createWrongAnswer "Apollo" 5. createWrongAnswer "John F. Kennedy" 6. createWrongAnswer "Winston Churchill"
Kode program tersebut
akan dieksekusi oleh aplikasi sehingga
menghasilkan sebuah soal kuis otomatis. Kode 3.1 merupakan sebuah kode program yang dimasukan oleh user dengan berbagai aturan (rules) dengan menggunakan teknik programming yang rumit. Oleh karena itu berdasarkan Pembuatan Prototipe Aplikasi Penghasil Soal Kuis Otomatis (Anis Cherid, 2012) penulis selanjutnya menganalisa antarmuka yang dibutuhkan oleh aplikasi tersebut sebagai solusi atas kendala-kendala yang dialami user dalam membuat kode program aplikasi penghasil soal kuis otomatis.
32
3.2 Analisis Sistem Antarmuka pemograman visual pada aplikasi penghasil kuis otomatis merupakan
aplikasi
yang
menyediakan
sebuah
antarmuka
yang
dapat
memudahkan user dalam membuat kuis otomatis. Pengembangan antarmuka tersebut dilakukan dengan konsep mengurangi interaksi user dalam menulis kode program menggunakan keyboard dan beralih kepada mouse. Antarmuka yang disediakan memandu user untuk menuliskan kode program dengan efisien dan mengurangi kesalahan dalam penulisan kode program. Penentuan variabel, pertanyaan dan jawaban dalam kuis otomatis telah dirancang dalam sebuah antarmuka yang secara otomatis memandu user menuliskan kode program sesuai dengan aturan kode program yang digunakan. Penulisan kode program berdasarkan aturan kode program menjadi yang sangat diperhatikan pada output aplikasi ini, disamping memudahkan user yang penting juga adalah kebenaran kode program yang dihasilkan. Dimana kebenaran sebuah kode program dapat diperiksa berdasarkan aturan masing masing jenis kode program yang digunakan. Pengendalian kode program yang dilakukan oleh aplikasi menghasilkan sebuah aturan mengenai bagaimana cara memeriksa kebenaran sebuah kode program yang dibuat user. Pemeriksaan kode program dilakukan pada setiap baris program dengan hanya terdapat satu fungsi saja. Sedangkan penggunaan fungsi lebih dari satu diizinkan dengan menggunakan pendefinisan fungsi tersebut melalui variabel tertentu. Aturan yang dilakukan aplikasi ini bertujuan untuk memudahkan aplikasi memeriksa aturan kode program yang digunakan kemudian menghasilkan kode program yang benar. Untuk menghasilkan sebuah aplikasi penghasil kuis otomatis dibutuhkannya sebuah kombinasi berbagai fungsi tertentu. Penulisannya yang membutuhkan ketelitian tinggi menjadi acuan aplikasi dalam menerjemahkan cara penulisan menjadi sebuah antarmuka. Kombinasi penggunaan fungsi pada penulisan manual akan mudah dilakukan tetapi resiko kesalahan akan menjadi besar karena tidak adanya pengendalian pada setiap fungsi. Kode program 3.1 merupakan contoh kode program yang belum menggunakan aturan yang digunakan pada aplikasi antarmuka penghasil kuis otomatis.
33
Kode 3.1 Kode Program Penulisan Manual. 1. numOfElement = randomNumber(4,10) 2. createQuestion "Jika array dideklarasikan dengan cara " & Chr(13) & Chr(34) & "int a [&1&]; " & Chr(34) & Chr(13) & "yang manakah dari instruksi di bawah ini adalah instruksi yang SALAH:", numOfElement 3. question1 = numOfElement - 1 4. question2 = randomNumber(0, numOfElement - 1, question1) 5. question3 = randomNumber(0, numOfElement - 1, question1, question2) 6. question4 = randomNumber(0, numOfElement - 1, question1, question2, question3) 7. question5 = numOfElement 8.
createArray "a", 3
9. fillArray "a", "cout << a[&1&];", "a[&1&] = &2&;", "a[&1&] = a[&1&] + &2&;" 10. createCorrectAnswer getValue("a", randomNumber(0, 2, -1)), question5, randomNumber(0, 50) 11. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question1, randomNumber(0, 50) 12. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question2, randomNumber(0, 50) 13. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question3, randomNumber(0, 50) 14. createWrongAnswer getValue("a", randomNumber(0, 2, -1)), question4, randomNumber(0, 50)
Kode 3.2 Potongan Kode Program Baris 10 10.
createCorrectAnswer getValue("a", randomNumber(0, 2, -1)), question5, randomNumber(0, 50)
Potongan Kode program 3.2 memperlihatkan penulisan fungsi dengan tingkat kerumitan yang tinggi dengan penggunaan fungsi getValue dan fungsi randomNumber. Dan jika hal ini diterapkan pada aplikasi yang dirancang maka tujuan aplikasi tidak akan tercapai dalam menghasilkan kode program yang sesuai aturan pemograman karena aplikasi tidak mengetahui jenis fungsi yang digunakan dan tepatnya berapa banyak fungsi yang digunakan. Sehingga untuk mengatasi hal tersebut, aplikasi harus membatasi dalam penggunaan fungsi dengan hanya mengizinkan satu fungsi setiap baris kode program.
34
Kode 3.3 Potongan Kode Program Menggunakan Aturan Aplikasi. 1. numOfElement = randomNumber(4,10) 2. createQuestion "Jika array dideklarasikan dengan cara " & Chr(13) & Chr(34) & "int a [&1&]; " & Chr(34) & Chr(13) & "yang manakah dari instruksi di bawah ini adalah instruksi yang SALAH:", numOfElement 3. question1 = numOfElement - 1 4. question2 = randomNumber(0, numOfElement - 1, question1) 5. question3 = randomNumber(0, numOfElement - 1, question1, question2) 6. question4 = randomNumber(0, numOfElement - 1, question1, question2, question3) 7. question5 = numOfElement 8. createArray "a", 3 9. char_a1 = "cout << a[&1&];" 10. char_a2 = "a[&1&] = &2&;" 11. char_a3 = "a[&1&] = a[&1&] + &2&;" 12. fillArray "a",char_a1,char_a2,char_a3 13. randomNumber1= randomNumber(0, 2, -1) 14. randomNumber2= randomNumber(0, 50) 15. correct_answer = getValue("a",randomNumber1) 16. createCorrectAnswer correct_answer, question5, randomNumber2
Pada Kode program 3.3 memperlihatkan bagaimana aplikasi memberikan solusi bagaimana user tetap dapat menggunakan banyak fungsi dalam satu baris program, yaitu dengan penggunaan variabel. Pada baris 16 terlihat bahwa baris tersebut menggunakan tiga varabel yang telah didefinisikan masing-masing sebagai hanya satu fungsi. Variabel pertama pada baris 15 sebagai fungsi getValue yang menggunakan variabel randomNumber1 sebagai fungsi random number. Variabel kedua menggunakan variabel question5 yang didefinisikan pada baris 7 sebagai fungsi random number. Kemudian pada variabel terakhir adalah menggunakan varaibel randomNumber2 pada baris 14 sebagai fungsi random number. Berdasarkan uraian diatas disimpulkan bahwa pengendalian kode program dilakukan dengan cara sebagai berikut : 1. Membatasi penggunaan fungsi dimana hanya mengizinkan penggunaan satu fungsi pada setiap baris program. 2. Penggunaan variabel sebagai solusi untuk penggunaan fungsi yang lebih dari satu. Jadi inilah cara bagaimana aplikasi tetap dapat menghasilkan fleksibilitas dalam membuat kode program tanpa harus menghilangkan konsep penulisan kode program sesuai aturan pemograman.
35
Kemudian cara diatas juga dapat memudahkan dalam mengubah kode program tertentu secara manual pada aplikasi ini dimana user akan diberitahu jika kode program yang diubah tidak sesuai dengan aturan program. Selain itu kesalahan yang dilakukan user juga diinformasikan melalui sebuah antarmuka yang dapat membantu user lebih mudah dalam memahami berbagai aturan kode program tertentu. Antarmuka dirancang dengan sederhana dan mengutamakan fungsional dari kode program yang dihasikan. Hal ini diharapkan dapat memberikan pembelajaran mengenai bahasa pemograman terkait dengan aturan-aturan kode program yang rumit bagi pengajar. Baris - baris kode program akan ditampilkan pada sebuah listbox dimana user selanjutnya dapat meng-copy kode program tersebut ke clipboard. Aplikasi dilengkapi dengan fitur expression builder untuk memudahkan user dalam membuat fungsi tertentu sehingga akan terciptanya sebuah kombinasi kuis baik dari pertanyaan maupun dari jawaban. Berikut dibawah ini mengenai alur aplikasi ini ketika dijalankan : 1. Awal aplikasi dijalankan, user menentukan variabel akan disimpan di array. 2. Ketika variabel sudah ditentukan, maka aplikasi akan memandu user menentukan isi dari variabel tersebut, dengan diikuti munculnya jendela expression builder. 3. User selanjutnya memilih berbagai fungsi pada expression builder. Aplikasi telah menentukan variabel apa saja yang harus diinput oleh user pada fungsi yang dipilih. 4. Ketika aplikasi sudah menerima inputan fungsi dari user, satu baris kode program variabel akan dieksekusi oleh aplikasi dengan menerima perintah eksekusi pada tombol execute. 5. User selanjutnya memasukan pertanyaan kuis berdasarkan kebutuhan ataupun variabel yang sebelumnya dibuat. 6. Jika pertanyaan kuis sudah selesai dieksekusi, user dapat membuat kode program untuk jawaban benar dan salah.
36
7. Satu baris kode program yang dieksekusi dapat diubah berdasarkan kebutuhan user. Perubahan yang dilakukan user dikontrol oleh aplikasi untuk mengurangi kesalahan penulisan kode program.
3.3 Perancangan Untuk tahap perancangan pada tugas akhir ini meliputi dua bagian yaitu perancangan proses disajikan dalam bentuk logik model dengan menggunakan diagram alir data (DFD). Perancangan kedua adalah perancangan proses aplikasi menggunakan perancangan menggunakan alir data (flowchart) untuk mengetahui jalan aplikasi. Perancangan antar muka sistem dilakukan dengan membuat sketsa tampilan antarmuka sistem yang berfungsi sebagai alat komunikasi antar pengguna dengan sistem.
3.3.1 Konteks Diagram Pada gambar 3.5 dapat dilihat sebuah konteks diagram yang menggambarkan proses apa saja yang diproses dan informasi yang akan dilakukan oleh user.
Gambar 3.5 Konteks Diagram
37
1. User User pada aplikasi ini adalah Pengajar dan Dosen, dimana yang dilakukan oleh user adalah membuat variabel dan fungsi yang akan digunakan. Setelah ini user dapat membuat pertanyaan berdasarkan variabel yang sudah dibuat. Sama halnya dengan variabel, pertanyaan dapat diberikan formula. Pada tahap akhir user melakukan pembuatan jawaban benar dan salah berdasarkan pertanyaan. Jawaban benar dan salah juga dapat diberikan fungsi untuk pilihan jawaban yang kombinasi. 3.3.2 Diagram Alir Data Setelah perancangan proses konteks diagram selesai dilakukan, maka breakdown selanjutnya masuk pada diagram alir data yang semua proses nya masih terkait dengan konteks diagram. Pada gambar 3.2 proses yang pertama kali terjadi setelah user pertama kali melihat tampilan aplikasi adalah menentukan variable dan memilih fungsi-fungsi yang akan digunakan dalam kode program. Adapun fungsi-fungsi yang diproses oleh aplikasi adalah random char, random number, create array, put value, display array, get value, general dan fill array. Jika sudah berhasil diselesaikan, user membuat pertanyaan berdasarkan variable dan fungsi yang sudah dibuat. Langkah selanjutnya adalah membuat pilihan jawaban benar dan pilihan jawaban yang salah. Kode program yang sudah dibuat juga dapat diubah berdasarkan kebutuhan. Input yang dilakukan oleh user akan diproses oleh aplikasi dan menghasilkan output berupa baris-baris kode program. Baris kode program yang diciptakan oleh aplikasi adalah kode program variabel, pertanyaan dan jawaban. Kode program yang dihasilkan akan selanjutnya digunakan untuk menghasilkan kuis otomatis pada prototipe aplikasi penghasil kuis otomatis (Anis Cherid, 2012).
38
Gambar 3.6 Diagram Alir Data
39
3.3.3 Flowchart 3.3.3.1 Flowchart Aktivitas Keseluruhan Aplikasi User
Sistem Mulai B
D Tampilkan Menu
Membuat variabel
ya
Klik Tombol Variabel
Menerima Perintah variabel, jmlvar=0
For i=1 to jmlvar+1 tidak Pilih variabel(i)
Load var(i)
Klik Hapus
Tampilkan var(i)
ya
Hapus Variabel
tidak
unLoad var(i) RandomChar ya tidak
Klik Tombol Fungsi RandomChar
Random Number
Menampilkan Jendela fungsi RandomChar
Panggil Fungsi RandomChar
ya
Klik Tombol Fungsi RandomNumber
Menampilkan Jendela Fungsi RandomNumber
Panggil Fungsi RandomNumber
ya
Klik Tombol Fungsi CreateArray
Menampilkan Jendela Fungsi CreateArray
Panggil Fungsi CreateArray
tidak
CreateArray
tidak A
Gambar 3.7 Flowchart Aktivitas Keseluruhan Aplikasi
40
User
Sistem
A B
PutValue ya
Klik Tombol Fungsi putValue
Menampilkan Jendela fungsi putValue
Panggil Fungsi putValue
ya
Klik Tombol Fungsi copyArray
Menampilkan Jendela Fungsi copyArray
Panggil Fungsi copyArray
ya
Klik Tombol Fungsi fillArray
Menampilkan Jendela Fungsi fillArray
Panggil Fungsi fillArray
ya
Klik Tombol Fungsi displayArray
Menampilkan Jendela fungsi displayArray
Panggil Fungsi displayArray
ya
Klik Tombol Fungsi getValue
Menampilkan Jendela Fungsi getValue
Panggil Fungsi getValue
ya
Klik Tombol Fungsi general
Menampilkan Jendela Fungsi general
Panggil Fungsi general
tidak
CopyArray
tidak
FillArray
tidak
DisplayArray
tidak
GetValue
tidak
General
C
Gambar 3.7 Flowchart aktivitas keseluruhan aplikasi (lanjutan)
41
User
Sistem
C D
Pertanyaan ya
Klik Tombol Fungsi pertanyaan
Menampilkan Jendela Membuat pertanyaan
Panggil Fungsi Membuat pertanyaan
ya
Klik Tombol Fungsi Jawaban
Menampilkan Jendela Membuat Jawaban
Panggil Fungsi Membuat Jawaban
ya
Klik Tombol Hapus Kode Program Hapus baris program k
Menampilkan Perubahan Kode Program
tidak
Jawaban
tidak Hapus Kode Program
tidak
Pilih baris program , k
Ubah Kode Program
ya
Double klik baris program
Menampilkan Jendela Ubah Kode program
Pesan error
Add Text tidak
G tidak
Cek Aturan tidak
ya Pilih Kursor text
Valid
tidak
H E
ya Pilih item add Jendela add F
Gambar 3.7 Flowchart Aktivitas Keseluruhan Aplikasi (lanjutan)
42
User
Sistem
G E
F
Select Kode
Menerima item tambah
Tambah Kode Program
Cek Aturan
Valid
Pesan error
tidak
ya
Pilih item replace
Menampilikan Jendela replace
Menerima item replace H
Replace Kode Program Klik Tombol Copy Kode Program
Menampilkan Jendela Kode Program copy
Selesai
Gambar 3.7 Flowchart Aktivitas Keseluruhan Aplikasi (lanjutan)
Gambar 3.3 memperlihatkan aktivitas keseluruhan yang dilakukan oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, aplikasi mulai dijalankan 2. Tampilkan Menu, Aplikasi menampilkan berbagai menu. 3. Membuat Variabel, aplikasi memberikan menu untuk menambah variabel. 4. Klik tombol Variabel, jika ingin membuat variabel diharuskan memilih tombol variabel.
43
5. For i=1 to jmlvar+1, aplikasi mulai memproses array berdasarkan jumlah variabel yang didefinisikan pada kode program aplikasi yaitu 0, selanjutnya ditambah dengan 1. Pengulangan yang terjadi berdasarkan jumlah tombol variabel di klik. 6. Load var(i), aplikasi membuat objek variabel berdasarkan array i . 7. Menampilkan var(i), aplikasi menampilkan objek variabel. 8. Hapus Variabel, jika tidak ingin menggunakan variabel maka pilihan berikutnya adalah harus variabel. Menu ini digunakan untuk membantu user dalam mengatur beberapa variabel yang telah dibuatnya. 9. Pilih Variabel, untuk menjalankan proses hapus, user harus memilih variabel yang akan dihapus. 10. Klik Hapus, untuk memulai hapus varibel. 11. unLoad var(i), aplikasi menghapus variabel berdasarkan perintah tombol hapus dan i sebagai pilihan variabel yang akan dihapus. Objek variabel tersebut akan unload pada tampilan aplikasi. 12. RandomChar, menu fungsi membuat randomChar. 13. Klik Tombol Fungsi RandomChar, untuk mulai membuat fungsi randomchar. 14. Menampilkan Jendela Fungsi RandomChar, jendela fungsi randomchar akan muncul. 15. Panggil Fungsi RandomChar,
aplikasi akan memanggil fungsi
randomchar. 16. RandomNumber, Menu fungsi membuat randomnumber. 17. Klik Tombol Fungsi RandomNumber, untuk mulai membuat fungsi randomnumber. 18. Menampilkan
Jendela
Fungsi
RandomNumber,
jendela
fungsi
randomnumber akan muncul. 19. Panggil Fungsi RandomNumber, aplikasi akan memanggil fungsi randomnumber. 20. CreateArray, Menu fungsi membuat array.
44
21. Klik Tombol Fungsi CreateArray,
untuk memulai membuat fungsi
createarray. 22. Menampilkan Jendela Fungsi CreateArray, jendela fungsi createarray akan muncul. 23. Panggil Fungsi CreateArray, aplikasi akan memanggil fungsi createarray. 24. PutValue, Menu fungsi membuat putvalue. 25. Klik Tombol Fungsi PutValue, untuk memulai membuat fungsi putvalue. 26. Menampilkan Jendela Fungsi PutValue, jendela fungsi putvalue akan muncul. 27. Panggil Fungsi PutValue, aplikasi akan memanggil fungsi putValue. 28. CopyArray, Menu fungsi membuat copyarray. 29. Klik Tombol Fungsi CopyArray,
untuk memulai membuat fungsi
copyarray. 30. Menampilkan Jendela Fungsi CopyArray, jendela fungsi copyarray akan muncul. 31. Panggil Fungsi CopyArrray, aplikasi akan memanggil fungsi copyarray. 32. FillArray, Menu fungsi membuat fillarray. 33. Klik Tombol Fungsi FillArray, untuk memulai membuat fungsi fillarray. 34. Menampilkan Jendela Fungsi FillArray, jendela fungsi fillarray akan muncul. 35. Panggil Fungsi FillArray, aplikasi akan memanggil fungsi fillarray. 36. DisplayArray, Menu fungsi membuat displayarray. 37. Klik Tombol Fungsi DisplayArray,
untuk memulai membuat fungsi
displayarray. 38. Menampilkan Jendela Fungsi DisplayArray, jendela fungsi displayarray akan muncul. 39. Panggil
Fungsi
DisplayArrray,
aplikasi
akan
memanggil
fungsi
displayarray. 40. GetValue, Menu fungsi membuat getvalue. 41. Klik Tombol Fungsi GetValue, untuk memulai membuat fungsi getvalue. 42. Menampilkan Jendela Fungsi GetValue, jendela fungsi getvalue akan muncul.
45
43. Panggil Fungsi GetValue, aplikasi akan memanggil fungsi getvalue. 44. General, Menu fungsi membuat general. 45. Klik Tombol Fungsi General, untuk memulai membuat fungsi general. 46. Menampilkan Jendela Fungsi General, jendela fungsi general akan muncul. 47. Panggil Fungsi General, aplikasi akan memanggil fungsi general. 48. Pertanyaan, Menu fungsi membuat pertanyaan. 49. Klik Tombol Pertanyaan, untuk memulai membuat pertanyaan. 50. Menampilkan Jendela Pertanyaan, jendela pertanyaan akan muncul. 51. Panggil Fungsi Membuat Pertanyaan, aplikasi akan memanggil fungsi membuat pertanyaan. 52. Jawaban, Menu fungsi membuat jawaban. 53. Klik Tombol Jawaban, untuk memulai membuat jawaban. 54. Menampilkan Jendela Membuat Jawaban, jendela jawaban akan muncul. 55. Panggil Fungsi Membuat Jawaban, aplikasi akan memanggil fungsi membuat jawaban. 56. Hapus Kode Program, menu hapus kode program. 57. Pilih Baris Program ,k , memilih baris program yang akan dihapus. 58. Klik Tombol Hapus Kode Program, untuk mulai menghapus kode program yang sudah dipilih sebelumnya. 59. Hapus Baris Program k, aplikasi memanggil fungsi hapus baris program. 60. Menampilkan Perubahan, aplikasi akan menampilkan kode program terbaru setelah menjalankan proses hapus kode program. 61. Ubah Kode Program, menu ubah kode program. 62. Double Klik Baris Program, untuk mulai mengubah kode program. 63. Menampilkan Jendela Ubah Kode Program, aplikasi akan menampilkan jendela ubah kode program berdasarkan baris program yang dipilih. 64. Add Text, menu pilihan menambah text pada kode program. 65. Pilih Kursor Text, user memilih penempatan kursor untuk meletakkan text atau variabel akan ditambahkan.
46
66. Cek Aturan, aplikasi memanggil fungsi cek aturan text atau variabel yang akan ditambahkan. 67. Valid, fungsi cek aturan akan memeriksa apakah text atau variabel benar atau tidak. 68. Pesan Error,
aplikasi akan menampilkan pesan error ketika text atau
variabel yang dimasukan tidak valid. 69. Jendel Add, aplikasi akan menampilkan jendela add yang berisi variabel dan textbox yang dapat diisi dengan text. 70. Pilih Item Add, memilih item apa yang akan ditambahkan pada kode program. 71. Menerima Item Tambah, aplikasi menerima item yang telah dipilih untuk ditambahkan. 72. Tambah Item Tambah, aplikasi memanggil fungsi tambah untuk menambahkan kode program. 73. Select Kode, pilihan menu terakhir dari jendela ubah kode program yaitu replace kode program. Untuk memulainya adalah dengan select kode. 74. Cek Aturan, aplikasi memanggil fungsi cek aturan text atau variabel yang akan di-replace. 75. Valid, fungsi cek aturan akan memeriksa apakah text atau variabel benar atau tidak. 76. Pesan Error,
aplikasi akan menampilkan pesan error ketika text atau
variabel yang disisipkan tidak valid. 77. Jendel Replace, aplikasi akan menampilkan jendela replace yang berisi variabel dan textbox yang dapat diisi dengan text. 78. Pilih Item Add, memilih item apa yang akan ditambahkan pada kode program. 79. Menerima Item Replace, aplikasi menerima item yang dipilih untuk replace kode program. 80. Replace Kode Program,
aplikasi memanggil fungsi merubah kode
program. 81. Klik Tombol Copy, menu terakhir dari aplikasi yaitu meng-copy kode program yang dihasilkan pada clipboard.
47
82. Menampilkan Jendela Kode Program Copy, aplikasi akan menampilkan form yang berisi kode program yang dapat di-copy ke clipboard. 83. Selesai, aplikasi selesai dijalankan.
3.3.3.2 Flowchart Fungsi Membuat Pertanyaan
Gambar 3.8 Flowchart Fungsi Membuat Pertanyaan
Gambar 3.4 memperlihatkan aktivitas fungsi membuat pertanyaan oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, aplikasi mulai dijalankan 2. Masukan Pertanyaan, user memasukan pertanyaan.
48
3. Menerima pertanyaan, aplikasi menerima masukan pertanyaan yang diketikan oleh user. 4. Klik Tombol Variabel, user klik tombol variabel untuk memulai pemilihan variabel yang akan digunakan pada pertanyaan. 5. Menampilkan Variabel, aplikasi akan menampilkan variabel yang telah ditentukan user sebelumnya. 6. Pilih Variabel, User memilih variabel yang akan digunakan untuk pertanyaan. 7. Menerima Pilihan Variabel, var , aplikasi menerima pilihan variabel. 8. Execute, user selanjutnya mengeksekusi pertanyaan untuk dijadikan sebuat baris program pertanyaan. 9. Membuat Kode Program Pertanyaan, CreateQuestion "pertanyaan",var , ketika sudah dieksekusi oleh user maka selanjutnya aplikasi membuat kode program pertanyaan berdasarkan masukan yang dilakukan oleh user. 10. Tampilkan Kode Program Pertanyaan, aplikasi akan menampilkan kode program di sebuah listbox. 11. Selesai, aplikasi selesai dijalankan.
49
3.3.3.3 Flowchart Fungsi Membuat Jawaban User
Sistem
Mulai
Masukan Jawaban
Menerima Jawaban
Klik Tombol variabel
Menampilkan Daftar Variabel
Pilih Variabel Jawaban
Menerima pilihan variabel Jawaban, var
Jawaban =benar
Pilih Jenis jawaban ya
Membuat kode program Jawaban Benar Jawaban benar CreateCorrectAnswer ”Jawaban”,var Execute benar
tidak
Jawaban =Salah
Membuat kode program Jawaban Salah CreateWrongAnswer ”Jawaban”,var
Execute Salah Tampilkan Kode Program Jawaban
Selesai
Gambar 3.9 Flowchart Fungsi Membuat Jawaban
Gambar 3.5 memperlihatkan aktivitas fungsi membuat jawaban oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, aplikasi mulai dijalankan
50
2. Masukan Jawaban, user memasukan text jawaban. 3. Menerima Jawaban, aplikasi menerima masukan jawaban yang diketikan oleh user. 4. Klik Tombol Variabel, user klik tombol variabel untuk memulai pemilihan variabel yang akan digunakan pada jawaban. 5. Menampilkan Variabel, aplikasi akan menampilkan variabel yang telah ditentukan user sebelumnya. 6. Pilih Variabel, User memilih variabel yang akan digunakan untuk jawaban. 7. Menerima Pilihan Variabel, var , aplikasi menerima pilihan variabel. 8. Pilih Jenis Jawaban, user memasukan jenis jawaban yang akan dibuat. 9. Jawaban Benar, kondisi jika jawaban benar maka akan dilanjutkan ke langkah berikutnya pada jawaban benar. 10. Jawaban=benar, aplikasi menerima jawaban=benar 11. Execute Benar, user selanjutnya mengeksekusi jawaban benar untuk dijadikan sebuat baris program jawaban benar. 12. Membuat
Kode
Program
Jawaban
Benar,
CreateCorrectAnswer
"pertanyaan",var , ketika sudah dieksekusi oleh user maka selanjutnya aplikasi membuat kode program jawaban benar berdasarkan masukan yang dilakukan oleh user. 13. Jawaban=salah, aplikasi menerima jawaban=salah 14. Execute Salah, user selanjutnya mengeksekusi jawaban salah untuk dijadikan sebuat baris program jawaban salah. 15. Membuat
Kode
Program
Jawaban
Salah,
CreateWrongAnswer
"pertanyaan",var , ketika sudah dieksekusi oleh user maka selanjutnya aplikasi membuat kode program jawaban salah berdasarkan masukan yang dilakukan oleh user. 16. Tampilkan Kode Program Pertanyaan, aplikasi akan menampilkan kode program di sebuah listbox baik jawaban benar maupun salah. 17. Selesai, aplikasi selesai dijalankan.
51
3.3.3.4 Flowchart Fungsi Random Char User
Sistem
Mulai
Masukan namaVar
Menerima namaVar
Masukan min
Menerima charact min
min=”charact”
Menerima charact max
max=”charact”
Masukan max
except
Masukan lagi
tidak tidak
ya
Pilih excep=var
ya
Klik Var
Menerima except=var
except=var
tidak tidak
Masukan exp karakter,charact
Menerima charact
except=”charact”
Membuat Kode Program Random, randomChar(min,max,excep)
Klik Tombol Execute Menampilkan Kode Program RandomChar
Selesai
Gambar 3.10 Flowchart Fungsi Random Char
Gambar 3.6 memperlihatkan aktivitas fungsi random char oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan 2. Masukan namaVar, user memasukan nama variabel, 3. Menerima namaVar, aplikasi menerima namaVar yang akan digunakan.
52
4. Masukan Min, user memasukan minimal random. 5. Menerima charact min, aplikasi menerima minimal 6. Min="charact", aplikasi memproses minimal. 7. Masukan max, user memasukan maksimal random. 8. Menerima charact max, aplikasi menerima karakter maksimal. 9. Max="charact", aplikasi memproses max. 10. Except, kondisi jika memilih pengecualian random. 11. Pilih except=var, jika memilih pengecualian sebagai variabel. 12. Klik Var, user memilih variabel. 13. Menerima except=var, aplikasi menerima pilihan user dimana except sebagai variabel. 14. Except=var, aplikasi memproses except=var. 15. Masukan exp karakter, charact, memasukan except sebagai karakter. 16. Menerima charact, aplikasi menerima karakter yang dimasukan oleh user. 17. Except="charact",aplikasi memproses except="charact". 18. Masukan lagi, kondisi masukan except lagi. Jika iya maka akan masuk ke kondisi semula pilih except=var atau except=charact. Dan jika tidak maka eksekusi fungsi. 19. Klik Tombol Execute, user klik tombol eksekusi untuk mulai membuat kode program dari fungsi random char. 20. Membuat Kode Program Random, randomchar(min,max,except), aplikasi membuat kode program dari fungi random char. 21. Menampilkan Kode Program RandomChar, aplikasi menampilkan kode program pada listbox. 22. Selesai, fungsi selesai dijalankan.
53
3.3.3.5 Flowchart Fungsi Random Number User
Sistem
Mulai
Masukan namaVar
Menerima namaVar
Masukan min
Menerima number min
Min=number
Menerima number max
max=number
Masukan max
except
Masukan lagi
tidak tidak
ya
Pilih excep=var
ya
Klik Var
Menerima except=var
except=var
tidak tidak
Masukan exp number,number
Menerima number
except=number
Membuat Kode Program Random, randomNumber(min,max,excep)
Klik Tombol Execute
Menampilkan Kode Program RandomNumber
Selesai
Gambar 3.11 Flowchart Fungsi Random Number
Gambar 3.7 memperlihatkan aktivitas fungsi random number oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan. 2. Masukan namaVar, user memasukan nama variabel, 3. Menerima namaVar, aplikasi menerima namaVar yang akan digunakan.
54
4. Masukan Min, user memasukan minimal random. 5. Menerima number min, aplikasi menerima minimal 6. Min=number, aplikasi memproses minimal. 7. Masukan max, user memasukan maksimal random. 8. Menerima number max, aplikasi menerima number maksimal. 9. Max=number, aplikasi memproses max. 10. Except, kondisi jika memilih pengecualian random. 11. Pilih except=var, jika memilih pengecualian sebagai variabel. 12. Klik Var, user memilih variabel. 13. Menerima except=var, aplikasi menerima pilihan user dimana except sebagai variabel. 14. Except=var, aplikasi memproses except=var. 15. Masukan exp number, charact, memasukan except sebagai karakter. 16. Menerima nummber, aplikasi menerima number yang dimasukan oleh user. 17. Except=number,aplikasi memproses except=number 18. Masukan lagi, kondisi masukan except lagi. Jika iya maka akan masuk ke kondisi semula pilih except=var atau except=number. Dan jika tidak maka eksekusi fungsi. 19. Klik Tombol Execute, user klik tombol eksekusi untuk mulai membuat kode program dari fungsi random number. 20. Membuat Kode Program Random, randomNumber(min,max,except), aplikasi membuat kode program dari fungi random number. 21. Menampilkan Kode Program RandomNumber, aplikasi menampilkan kode program pada listbox. 22. Selesai, fungsi selesai dijalankan.
55
3.3.3.6 Flowchart Fungsi Create Array User
Sistem
Mulai
Masukan namaArray
Pilih namaArray =Var
ya
Klik Var
Menerima var
Namaarray=var
Menerima karakter
Namaarray=”karakter”
tidak
Masukan JmlArray
Menerima JmlArray
Membuat Kode Program CreateArray, createArray namaarray,jmlArray
Klik Tombol Execute
Menampilkan Kode Program CreateArray
Selesai
Gambar 3.12 Flowchart Fungsi Create Array
Gambar 3.8 memperlihatkan aktivitas fungsi create array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan 2. Masukan namaArray, user memasukan namaArray. 3. Pilih namaArray=var, kondisi jika nama array sebagai variabel. 4. Menerima var, aplikasi menerima variabel yang telah dipilih. 5. Namaarray=var, aplikasi memproses namaarray=var. 6. Menerima karakter, aplikasi menerima karakter sebagai nama array jika tidak memilih nama array sebagai variabel. 7. Namaarray="karakter", aplikasi memproses namaarray="karakter".
56
8. Masukan jmlArray, user memasukan jumlah array. 9. Menerima jmlarray, aplikasi menerima jumlah array dari inputan user. 10. Klik Tombol Execute, user memulai membuat fungsi create array dengan menekan tombol execute. 11. Membuat Kode Program CreateArray, createarray namaarray, jmlArray, aplikasi membuat kode program fungsi create array. 12. Menampilkan Kode Program CreateArray,
aplikasi menampilkan
kode program ke dalam listbox. 13. Selesai, fungsi selesai dijalankan.
3.3.3.7 Flowchart Fungsi Copy Array
Gambar 3.13 Flowchart Fungsi Copy Array
57
Gambar 3.9 memperlihatkan aktivitas fungsi copy array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan 2. Pilih Var 1, user memilih variabel pertama sebagai asal copy. 3. Menerima Var 1, aplikasi menerima variabel pertama. 4. Pilih Var 2, user memilih variabel kedua sebagai tujuan copy. 5. Menerima Var 2, aplikasi menerima variabel kedua. 6. Masukan jmlcopy, user memasukan jumlah copy. 7. Menerima jmlcopy, aplikasi menerima jumlah copy. 8. Klik Tombol Execute, user memulai membuat fungsi copy array dengan menekan tombol execute. 9. Membuat Kode Program CopyArray, copyArray var1, var2, jmlcopy, aplikasi membuat kode progam fungsi copy array. 10. Menampilkan Kode Program CopyArray, aplikasi menampilkan kode program fungsi create array ke dalam listbox. 11. Selesai, fungsi selesai dijalankan.
58
3.3.3.8 Flowchart Fungsi Fill Array
Gambar 3.14 Flowchart Fungsi Fill Array
Gambar 3.10 memperlihatkan aktivitas fungsi fill array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1.
Mulai, fungsi mulai dijalankan
2.
Masukan Pilihan Variabel Array, memilih nama variabel sebagai variabel yang akan dimasukan elemen.
3.
Menerima Var, aplikasi menerima pilihan variabel.
4.
Masukan Elemen Array, user memasukan variabel untuk array.
5.
Pilih Var , user memilih variabel untuk array pada kondisi pilih variabel ke dalam array
6.
Menerima Var, aplikasi menerima variabel.
59
7.
Masukan ke TextBox Fill, aplikasi memasukan variabel ke textbox berdasarkan pilihan user.
8.
Tambah Karakter, kondisi dimana jika user ingin menambahkan karakter baru sebagai isi array atau tidak pilih variabel.
9.
Menerima Karakter, aplikasi menerima karakter jika menambahkan karakter pada array.
10. "Karakter", aplikasi memproses karakter pada array. 11. Tambah lagi, kondisi jika user ingin menambahkan variabel ataupun karakter ke dalam array. Jika iya maka user kembali ke langkah pengisian array. 12. Klik Tombol Execute, user memulai membuat fungsi fill array dengan menekan tombol execute. 13. Membuat Kode Program fillArray textboxfill, aplikasi membuat kode program fungsi fill array. 14. Menampilkan Kode Program fillArray, aplikasi menampilkan kode program fungsi fill array ke dalam listbox. 15. Selesai, fungsi selesai dijalankan.
60
3.3.3.9 Flowchart Fungsi Display Array Sistem
User
Mulai
Masukan Nama Variabel
Menerima namaVar
Pilih Var
Menerima Var
Membuat Kode Program displayArray, namaVar=displayArray (var)
Klik Tombol Execute
Menampilkan Kode Program displayArray
Selesai
Gambar 3.15 Flowchart Fungsi Display Array
Gambar 3.11 memperlihatkan aktivitas fungsi display array oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan 2. Masukan Nama Variabel, memasukan nama variabel yang akan digunakan sebagai display array. 3. Menerima namavar, aplikasi menerima masukan nama variabel. 4. Pilih Var, memilih variabel yang akan ditampilkan arraynya. 5. Menerima Var, aplikasi menerima variabel. 6. Klik Tombol Execute, user memulai membuat fungsi display array dengan menekan tombol execute. 7. Membuat Kode Program displayArray , displayArray(var), aplikasi membuat kode program fungsi display array.
61
8. Menampilkan Kode Program displayArray, aplikasi menampilkan kode program fungsi display array ke dalam listbox. 9. Selesai, fungsi selesai dijalankan.
3.3.3.10 Flowchart Fungsi Get Value User
Sistem
Mulai
Masukan namaGet
Pilih namaGet =Var
ya
Klik Var
Menerima var
namaGet=var
Menerima karakter
namaGet=”karakter”
tidak
Masukan JmlGet
Menerima JmlGet
Masukan namavar
Menerima namavar
Membuat Kode Program GetValue, namavar=getValue(namaGet,JmlGet)
Klik Tombol Execute
Menampilkan Kode Program GetValue
Selesai
Gambar 3.16 Flowchart Fungsi Get Value
Gambar 3.12 memperlihatkan aktivitas fungsi get value oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan 2. Masukan namaGet, user memasukan nama get 3. Pilih namaGet=var, kondisi jika nama get sebagai variabel. 4. Menerima var, aplikasi menerima variabel yang telah dipilih.
62
5. namaGet=var, aplikasi memproses namaGet=var. 6. Menerima karakter, aplikasi menerima karakter sebagai nama get jika tidak memilih nama get sebagai variabel. 7. namaGet="karakter", aplikasi memproses namaget="karakter". 8. Masukan jmlGet, user memasukan jumlah get. 9. Menerima jmlGet, aplikasi menerima jumlah get dari inputan user. 10. Masukan namavar, user memasukan nama variabel. 11. Menerima namavar, aplikasi menerima nama variabel. 12. Klik Tombol Execute, user memulai membuat fungsi get value dengan menekan tombol execute. 13. Membuat Kode Program getValue, getValue(namaGet, jmlGet) aplikasi membuat kode program fungsi getValue. 14. Menampilkan Kode Program getValue, aplikasi menampilkan kode program ke dalam listbox. 15. Selesai, fungsi selesai dijalankan.
63
3.3.3.11 Flowchart Fungsi Put Value Sistem
User
Mulai
Masukan Variabel 1
Pilih Var1
Menerima Var1
Masukan Variabel 2
Pilih Var2
Menerima Var2
Masukan Variabel 3
Pilih Var3
Menerima Var3
Klik Tombol Execute
Membuat Kode Program putValue, putValue Var1,Var2,Var3
Menampilkan Kode Program putValue
Selesai
Gambar 3.17 Flowchart Fungsi Put Value
Gambar 3.13 memperlihatkan aktivitas fungsi put value oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan 2. Masukan Variabel1 ,user memasukan variabel 1 3. Pilih Var1, user memilih variabel 1 untuk memasukannya ke dalam fungsi putValue 4. Menerima Var1, aplikasi menerima variabel 1.
64
5. Masukan Variabel2 ,user memasukan variabel 2. 6. Pilih Var2, user memilih variabel 2 untuk memasukannya ke dalam fungsi putValue. 7. Menerima Var2, aplikasi menerima variabel 2. 8. Masukan Variabel3 ,user memasukan variabel 3. 9. Pilih Var3, user memilih variabel 3 untuk memasukannya ke dalam fungsi putValue. 10. Menerima Var3, aplikasi menerima variabel 3. 11. Klik Tombol Execute, user memulai membuat fungsi putValue dengan menekan tombol execute. 12. Membuat Kode Program putValue, putValue Var1,Var2,Var3, aplikasi membuat kode program fungsi putValue. 13. Menampilkan Kode Program putValue, aplikasi menampilkan kode program fungsi putValue ke dalam listbox. 14. Selesai, fungsi selesai dijalankan.
65
3.3.3.12 Flowchart Fungsi General Sistem
User
Mulai
Masukan namaVar
Tipe data String
Menerima namaVar
ya
Masukan String
tidak
Menerima string
Ekpresi=”string”
Fungsi Valid Menerima expresi ya
Masukan expresi Valid tidak
Ekpresi=expresi
Pesan Error
Membuat Kode Program general, namaVar=expresi
Klik Tombol Execute
Menampilkan Kode Program general
Selesai
Gambar 3.18 Flowchart fungsi general
Gambar 3.14 memperlihatkan aktifitas fungsi general oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, fungsi mulai dijalankan 2. Memasukan namaVar, user memasukan nama variabel. 3. Menerima Var, aplikasi menerima variabel. 4. Tipe String, kondisi jika masukan berupa tipe data string. 5. Masukan String, memasukan string jika kondisi memenuhi baris 4.
66
6. Menerima string, aplikasi menerima string. 7. Ekpresi=”string”, aplikasi memproses ekpresi dengan string dengan kutip dua diatas (“”). 8. Memasukan ekpresi, user memasukan expresi tertentu jika tidak memenuhi baris 4. 9. Fungsi Valid, memanggil fungsi valid sebagai script control. 10. Valid, kondisi jika ekpresi yang dimasukan benar, maka akan ke langkah selanjutnya. 11. Menerima expresi, aplikasi menerima ekspresi. 12. Ekpresi=expresi, aplikasi memproses ekpresi sama dengan expresi. 13. Klik Tombol Execute, user memulai membuat fungsi general dengan menekan tombol execute. 14. Membuat Kode Program General , namaVar=expresi, aplikasi membuat kode program fungsi general. 15. Menampilkan Kode Program general, aplikasi menampilkan kode program fungsi general ke dalam listbox. 16. Selesai, fungsi selesai dijalankan.
3.4 Perancangan Antarmuka (Interface) Perancangan antarmuka merupakan hal yang terpenting dalam aplikasi ini, karena keberhasilan aplikasi ini ditentukan bagaimana aplikasi menampilkan tahapan dalam membuat kode program. Interaksi pengguna dengan aplikasi dilakukan melalui sebuah antarmuka. Antarmuka dirancang dengan sederhana agar pengguna mudah menggunakan aplikasi dan menimbulkan kesan user friendly sehingga pengguna dapat tertarik belajar pemograman melalui antarmuka secara grafis. Adapun perancangan antarmuka yang dirancang yaitu: 1. Tampilan awal aplikasi Merupakan tampilan splash sebagai tampilan pembuka dari aplikasi dengan tujuan memperkenalkan aplikasi secara singkat. Tampilan ini terdiri dari frame, progressbar dan label yang berisi informasi nama aplikasi, versi aplikasi dan copyright aplikasi.
67
Gambar 3.19 Tampilan Awal Aplikasi
2. Tampilan Utama Tampilan ini berisi menu manajemen variabel dan fungsi pada sisi atas tampilan sedangkan pada bagian lainnya berisi tampilan kode program dan tampilan manajemen variabel. Antarmuka pada awal aplikasi dirancang menggunakan kontrol tertentu di Visual Basic 6.0. Tampilan kode program menggunakan kontrol listbox yang menampilkan daftar baris kode program dan penomoran kode program yang dapat dipilih. Listbox kode program memiliki kontrol scroll dengan tujuan memudahkan user mengatur tampilan kode program.Sedangkan untuk perancangan tampilan manajemen variabel menggunakan kontrol textbox dan option button dengan tujuan nama variabel dapat diganti dan dipilih oleh pengguna. Textbox dan option button dikontrol oleh array berdasarkan banyaknya jumlah variabel yang digunakan. Tampilan awal ini dilengkapi dengan toolbar, statusbar, menu dan popup menu. Diharapkan tampilan tersebut akan menambah kemudahan user dalam mengoperasikan aplikasi ini.
68
Gambar 3.20 Tampilan Utama Aplikasi dan Manajemen Variabel
3. Tampilan membuat pertanyaan Pada tampilan pertanyaan user diminta untuk memasukan pertanyaan pada sebuah textbox. Dalam pengetikkan pertanyaan user juga diberi bantuan dalam menggunakan sebuah string tertentu pada isi pertanyaan. Bantuan tersebut berupa listbox. Selanjutnya adalah memasukan variabel yang berasal dari kode program yang dibuat sebelumnya, dimana user memilih di sebuah listbox dengan double klik listbox tersebut. Semua variabel yang dipilih akan ditempatkan pada textbox variabel. Dan diakhiri dengan tombol execute.
Gambar 3.21 Tampilan Membuat Pertanyaan
69
4. Tampilan membuat jawaban Tampilan membuat jawaban memiliki konsep yang sama dengan tampilan membuat pertanyaan tetapi memiliki perbedaan pada bagian option button untuk membedakan jenis jawaban benar dan salah.
Gambar 3.22 Tampilan Membuat Jawaban
5. Tampilan ubah kode program Tampilan ini akan muncul ketika baris - baris kode program telah tercipta. Melalui perintah double klik item pada listbox kode program, tampilan ubah kode program ini akan menampilkan dua pilihan dalam bentuk listbox. Berdasarakan pilihan tersebut tampilan pilihan item yang akan dapat diubah akan muncul.
Gambar 3.23 Tampilan Ubah Kode Program Manual
70
6. Tampilan fungsi random character Pada tampilan ini aplikasi mulai memandu user untuk menghasilkan kode program dengan cepat tanpa menyalahi aturan kode program fungsi random character. User ditampilkan sebuah informasi mengenai fungsi tersebut melalui sebuah frame yang berjudul properties fungsi random character. User akan diajak mengikuti tahap-tahap membuat fungsi random character dengan memasukan nama variabel, min, max dan exception jika ada.
Gambar 3.24 Tampilan Fungsi Random Character
7. Tampilan fungsi random number Tampilan fungsi random number memandu user untuk mengisi nama variabel, min, max dan exception. Pada textbox min dan max, aplikasi memberikan HscrollBar untuk membantu mengisi min dan max. Sedangkan pada sisi kanan tampilan juga diberikan sebuah frame yang berisi informasi fungsi yaitu properties fungsi random number.
71
Gambar 3.25 Tampilan Fungsi Random Number
8. Tampilan fungsi create array Tampilan fungsi create array menggunakan option button sebagai pilihan membuat kode program create array. Option button tersebut adalah untuk new variable dan exist variable. Di bagian jumlah array, aplikasi memberikan HScrollbar dan daftar variabel sebagai kontrol yang membantu user pada saat mengisi jumlah array.
Gambar 3.26 Tampilan fungsi create array
72
9. Tampilan fungsi put value Tampilan fungsi put value menggunakan tiga listbox untuk menampilkan variabel-variabel yang telah dibuat sebelumnya.Dimana selanjutmya akan diproses dengan menekan command button execute.
Gambar 3.27 Tampilan Fungsi Put Value
10. Tampilan fungsi copy array Tampilan copy array terdiri dari dua listbox yang digunakan untuk asal copy dan tujuan copy. Listbox tersebut hanya dipilih dengan pilihan yang berbeda kemudian dilanjutkan dengan mengisi jumlah copy. Dimana jumlah copy, aplikasi mengediakan kontrol HScrollbar untuk membantu pengisian jumlah copy. Setiap perubahan pada HScroll akan ditempatkan di textbox.Tampilan fungsi ini juga diberikan frame sebagai properties fungsi copy array.
Gambar 3.28 Tampilan Fungsi Copy Array
73
11. Tampilan fungsi fill array Untuk membantu pembuatan fungsi fill array, aplikasi menggunakan listbox dan textbox dalam penentuan variabel dan elemen array lainnya. Pada listbox sendiri user menentukan pilihan dengan double klik pada item listbox. Pilihan tersebut akan ditempatkan pada sebuah textbox. Properties fungsi terdapat disisi kanan tampilan yang menggunakan sebuah frame dan label untuk menampilkan informasi fungsi fill array.
Gambar 3.29 Tampilan Fungsi Fill Array
12. Tampilan fungsi display array Tampilan fungsi display array hanya menggunakan textbox dan listbox sebagai nama variabel dan pilihan variabel array yang akan ditampilkan. Sama halnya dengan fungsi lainnya tampilan fungsi ini juga dilengkapi dengan frame sebagai properties fungsi display array.
74
Gambar 3.30 Tampilan Fungsi Display Array
13. Tampilan fungsi get value Tampilan fungsi get value memiliki konsep yang sama dengan tampilan create array, dimana menggunakan listbox dan texbox. Begitu juga dengan properties fungsi berada disisi kanan tampilan fungsi get value.
Gambar 3.31 Tampilan Fungsi Get Value
14. Tampilan fungsi general Tampilan fungsi general terdiri dari textbox nama variabel, textbox expreso dan checkbox sebagai tipe data. Di sisi bawah aplikasi juga menggunakan
75
listbox untuk membantu user menuliskan variabel tertentu di textbox expresi. Properties fungsi juga disediakan pada tampilan ini.
Gambar 3.32 Tampilan Fungsi General
15. Tampilan hasil kode program Tampilan hasil kode program hanya menggunakan sebuah texbox dengan properti multiline untuk menampilkan semua baris kode program. Baris kode program tersebut dapat di copy ke clipboard untuk kebutuhan user pada aplikasi penghasil kuis otomatis.
Gambar 3.33 Tampilan Hasil Kode Program
76
16. Tampilan about Tampilan menampikan informasi mengenai aplikasi.
Gambar 3.34 Tampilan About Aplikasi