BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN Untuk memahami aplikasi ng dirancang maka salah satu tahapan ng harus dilalui adalah melakukan analisis, karena dengan melakukan analisis akan membuat lebih terarah dan jelas dalam alur aplikasin. Selanjutn hasil dari analisa akan dilanjutkan kepada proses perancangan ng akan diterapkan ke dalam pembangunan aplikasi selanjutn. 3.1 Prototipe Aplikasi Penghasil Soal Kuis Otomatis Prototipe aplikasi penghasil soal kuis otomatis Adalah Prototipe aplikasi ng 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 ng rumit. Prototipe aplikasi penghasil soal kuis otomatis menggunakan aplikasi Microsoft PowerPoint sebagai media ditempatkann kuis otomatis tersebut bersama dengan materi pembelajaran sehingga menjadi aplikasi ng utuh dan berdiri sendiri. Slide PowerPoint berisi kode program dalam bahasa VBScript untuk ditulis ke dalam teks file dan program ng dibuat dengan Visual Basic Application (VBA). Di dalam kode program VBScript, terdapat kode untuk memanggil kembali berbagai kode VBA ng terdapat di dalam aplikasi PowerPoint. Sedangkan program di dalam PowerPoint ng 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 pertanan dan pilihan jawaban ng dihasilkan oleh program VBScript. Selain itu ng terpenting adalah program di dalam PowerPoint ng dibuat dengan VBA menyediakan struktur memori tiruan agar hasil eksekusi kode program dapat dievaluasi dengan mudah. 28

2 29 Arsitektur aplikasi penghasil soal kuis otomatis terdiri dari sebuah interpreter ng berguna sebagai penerjemah kode program sehingga kode program ng baru dapat dibuat oleh sebuah aplikasi ng sedang berjalan, kemudian kode program ng baru tersebut dieksekusi bersama-sama dengan aplikasi ng 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 ng menjadi perhatian pada penelitian penulis adalah bagaimana dapat membantu dalam pembuatan file teks ng berisi kode program. Diperlukan sebuah antarmuka ng memudahkan user dalam membuat kode program untuk aplikasi penghasil soal kuis otomatis. Antarmuka tersebut memberikan solusi akan kemungkinan terjadin 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.

3 30 Gambar 3.2 Tampilan Slide untuk Menambah Kuis Dipilih 2. Tekan tombol <Shift-F5> pada keyboard dan kemudian klik panah besar ng terdapat di tengah-tengah lar 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.

4 31 Gambar 3.4 Tampilan untuk Menambahkan Program Penghasil Kuis 4. Selanjutn pada form tersebut dapat dimasukan kode program ng 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 ng pertama kali menginjakkan kakin 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 ng dimasukan oleh user dengan berbagai aturan (rules) dengan menggunakan teknik programming ng rumit. Oleh karena itu berdasarkan Pembuatan Prototipe Aplikasi Penghasil Soal Kuis Otomatis (Anis Cherid, 2012) penulis selanjutn menganalisa antarmuka ng dibutuhkan oleh aplikasi tersebut sebagai solusi atas kendala-kendala ng dialami user dalam membuat kode program aplikasi penghasil soal kuis otomatis.

5 Analisis Sistem Antarmuka pemograman visual pada aplikasi penghasil kuis otomatis merupakan aplikasi ng menyediakan sebuah antarmuka ng 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 ng disediakan memandu user untuk menuliskan kode program dengan efisien dan mengurangi kesalahan dalam penulisan kode program. Penentuan variabel, pertanan dan jawaban dalam kuis otomatis telah dirancang dalam sebuah antarmuka ng secara otomatis memandu user menuliskan kode program sesuai dengan aturan kode program ng digunakan. Penulisan kode program berdasarkan aturan kode program menjadi ng sangat diperhatikan pada output aplikasi ini, disamping memudahkan user ng penting juga adalah kebenaran kode program ng dihasilkan. Dimana kebenaran sebuah kode program dapat diperiksa berdasarkan aturan masing masing jenis kode program ng digunakan. Pengendalian kode program ng dilakukan oleh aplikasi menghasilkan sebuah aturan mengenai bagaimana cara memeriksa kebenaran sebuah kode program ng dibuat user. Pemeriksaan kode program dilakukan pada setiap baris program dengan han terdapat satu fungsi saja. Sedangkan penggunaan fungsi lebih dari satu diizinkan dengan menggunakan pendefinisan fungsi tersebut melalui variabel tertentu. Aturan ng dilakukan aplikasi ini bertujuan untuk memudahkan aplikasi memeriksa aturan kode program ng digunakan kemudian menghasilkan kode program ng benar. Untuk menghasilkan sebuah aplikasi penghasil kuis otomatis dibutuhkann sebuah kombinasi berbagai fungsi tertentu. Penulisann ng 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 adan pengendalian pada setiap fungsi. Kode program 3.1 merupakan contoh kode program ng belum menggunakan aturan ng digunakan pada aplikasi antarmuka penghasil kuis otomatis.

6 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) & "ng manakah dari instruksi di bawah ini adalah instruksi ng SALAH:", numofelement 3. question1 = numofelement 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 createcorrectanswer getvalue("a", randomnumber(0, 2, -1)), question5, randomnumber(0, 50) Potongan Kode program 3.2 memperlihatkan penulisan fungsi dengan tingkat kerumitan ng tinggi dengan penggunaan fungsi getvalue dan fungsi randomnumber. Dan jika hal ini diterapkan pada aplikasi ng dirancang maka tujuan aplikasi akan tercapai dalam menghasilkan kode program ng sesuai aturan pemograman karena aplikasi mengetahui jenis fungsi ng digunakan dan tepatn berapa bank fungsi ng digunakan. Sehingga untuk mengatasi hal tersebut, aplikasi harus membatasi dalam penggunaan fungsi dengan han mengizinkan satu fungsi setiap baris kode program.

7 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) & "ng manakah dari instruksi di bawah ini adalah instruksi ng SALAH:", numofelement 3. question1 = numofelement 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 bank fungsi dalam satu baris program, itu dengan penggunaan variabel. Pada baris 16 terlihat bahwa baris tersebut menggunakan tiga varabel ng telah didefinisikan masing-masing sebagai han satu fungsi. Variabel pertama pada baris 15 sebagai fungsi getvalue ng menggunakan variabel randomnumber1 sebagai fungsi random number. Variabel kedua menggunakan variabel question5 ng 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 han mengizinkan penggunaan satu fungsi pada setiap baris program. 2. Penggunaan variabel sebagai solusi untuk penggunaan fungsi ng 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.

8 35 Kemudian cara diatas juga dapat memudahkan dalam mengubah kode program tertentu secara manual pada aplikasi ini dimana user akan diberitahu jika kode program ng diubah sesuai dengan aturan program. Selain itu kesalahan ng dilakukan user juga diinformasikan melalui sebuah antarmuka ng dapat membantu user lebih mudah dalam memahami berbagai aturan kode program tertentu. Antarmuka dirancang dengan sederhana dan mengutamakan fungsional dari kode program ng dihasikan. Hal ini diharapkan dapat memberikan pembelajaran mengenai bahasa pemograman terkait dengan aturan-aturan kode program ng rumit bagi pengajar. Baris - baris kode program akan ditampilkan pada sebuah listbox dimana user selanjutn dapat meng-copy kode program tersebut ke clipboard. Aplikasi dilengkapi dengan fitur expression builder untuk memudahkan user dalam membuat fungsi tertentu sehingga akan terciptan sebuah kombinasi kuis baik dari pertanan 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 munculn jendela expression builder. 3. User selanjutn memilih berbagai fungsi pada expression builder. Aplikasi telah menentukan variabel apa saja ng harus diinput oleh user pada fungsi ng 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 selanjutn memasukan pertanan kuis berdasarkan kebutuhan ataupun variabel ng sebelumn dibuat. 6. Jika pertanan kuis sudah selesai dieksekusi, user dapat membuat kode program untuk jawaban benar dan salah.

9 36 7. Satu baris kode program ng dieksekusi dapat diubah berdasarkan kebutuhan user. Perubahan ng dilakukan user dikontrol oleh aplikasi untuk mengurangi kesalahan penulisan kode program. 3.3 Perancangan Untuk tahap perancangan pada tugas akhir ini meliputi dua bagian itu 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 ng berfungsi sebagai alat komunikasi antar pengguna dengan sistem Konteks Diagram Pada gambar 3.5 dapat dilihat sebuah konteks diagram ng menggambarkan proses apa saja ng diproses dan informasi ng akan dilakukan oleh user. Gambar 3.5 Konteks Diagram

10 37 1. User User pada aplikasi ini adalah Pengajar dan Dosen, dimana ng dilakukan oleh user adalah membuat variabel dan fungsi ng akan digunakan. Setelah ini user dapat membuat pertanan berdasarkan variabel ng sudah dibuat. Sama haln dengan variabel, pertanan dapat diberikan formula. Pada tahap akhir user melakukan pembuatan jawaban benar dan salah berdasarkan pertanan. Jawaban benar dan salah juga dapat diberikan fungsi untuk pilihan jawaban ng kombinasi Diagram Alir Data Setelah perancangan proses konteks diagram selesai dilakukan, maka breakdown selanjutn masuk pada diagram alir data ng semua proses n masih terkait dengan konteks diagram. Pada gambar 3.2 proses ng pertama kali terjadi setelah user pertama kali melihat tampilan aplikasi adalah menentukan variable dan memilih fungsi-fungsi ng akan digunakan dalam kode program. Adapun fungsi-fungsi ng 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 pertanan berdasarkan variable dan fungsi ng sudah dibuat. Langkah selanjutn adalah membuat pilihan jawaban benar dan pilihan jawaban ng salah. Kode program ng sudah dibuat juga dapat diubah berdasarkan kebutuhan. Input ng dilakukan oleh user akan diproses oleh aplikasi dan menghasilkan output berupa baris-baris kode program. Baris kode program ng diciptakan oleh aplikasi adalah kode program variabel, pertanan dan jawaban. Kode program ng dihasilkan akan selanjutn digunakan untuk menghasilkan kuis otomatis pada prototipe aplikasi penghasil kuis otomatis (Anis Cherid, 2012).

11 Gambar 3.6 Diagram Alir Data 38

12 Flowchart Flowchart Aktivitas Keseluruhan Aplikasi User Mulai Sistem B D Tampilkan Menu Membuat variabel Klik Tombol Variabel Menerima Perintah variabel, jmlvar=0 For i=1 to jmlvar+1 Pilih variabel(i) Load var(i) Hapus Variabel Klik Hapus Tampilkan var(i) RandomChar unload var(i) Klik Tombol Fungsi RandomChar Menampilkan Jendela fungsi RandomChar Panggil Fungsi RandomChar Random Number Klik Tombol Fungsi RandomNumber Menampilkan Jendela Fungsi RandomNumber Panggil Fungsi RandomNumber CreateArray Klik Tombol Fungsi CreateArray Menampilkan Jendela Fungsi CreateArray Panggil Fungsi CreateArray A Gambar 3.7 Flowchart Aktivitas Keseluruhan Aplikasi

13 40 User Sistem A B PutValue Klik Tombol Fungsi putvalue Menampilkan Jendela fungsi putvalue Panggil Fungsi putvalue CopyArray Klik Tombol Fungsi copyarray Menampilkan Jendela Fungsi copyarray Panggil Fungsi copyarray FillArray Klik Tombol Fungsi fillarray Menampilkan Jendela Fungsi fillarray Panggil Fungsi fillarray DisplayArray Klik Tombol Fungsi displayarray Menampilkan Jendela fungsi displayarray Panggil Fungsi displayarray GetValue Klik Tombol Fungsi getvalue Menampilkan Jendela Fungsi getvalue Panggil Fungsi getvalue General Klik Tombol Fungsi general Menampilkan Jendela Fungsi general Panggil Fungsi general C Gambar 3.7 Flowchart aktivitas keseluruhan aplikasi (lanjutan)

14 41 User Sistem C D Pertanan Klik Tombol Fungsi pertanan Menampilkan Jendela Membuat pertanan Panggil Fungsi Membuat pertanan Jawaban Klik Tombol Fungsi Jawaban Menampilkan Jendela Membuat Jawaban Panggil Fungsi Membuat Jawaban Hapus Kode Program Klik Tombol Hapus Kode Program Pilih baris program, k Hapus baris program k Menampilkan Perubahan Kode Program Ubah Kode Program Double klik baris program Menampilkan Jendela Ubah Kode program G Add Text Cek Aturan Pesan error H Pilih Kursor text Valid E Pilih item add Jendela add F Gambar 3.7 Flowchart Aktivitas Keseluruhan Aplikasi (lanjutan)

15 42 User Sistem E F G Select Kode Menerima item tambah Tambah Kode Program Cek Aturan Pesan error Valid Pilih item replace Menampilikan Jendela replace H Menerima item replace Klik Tombol Copy Kode Program Replace Kode Program Menampilkan Jendela Kode Program copy Selesai Gambar 3.7 Flowchart Aktivitas Keseluruhan Aplikasi (lanjutan) Gambar 3.3 memperlihatkan aktivitas keseluruhan ng 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.

16 43 5. For i=1 to jmlvar+1, aplikasi mulai memproses array berdasarkan jumlah variabel ng didefinisikan pada kode program aplikasi itu 0, selanjutn ditambah dengan 1. Pengulangan ng 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 ingin menggunakan variabel maka pilihan berikutn adalah harus variabel. Menu ini digunakan untuk membantu user dalam mengatur beberapa variabel ng telah dibuatn. 9. Pilih Variabel, untuk menjalankan proses hapus, user harus memilih variabel ng 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 ng 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.

17 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 coprray. 29. Klik Tombol Fungsi CopyArray, untuk memulai membuat fungsi coprray. 30. Menampilkan Jendela Fungsi CopyArray, jendela fungsi coprray akan muncul. 31. Panggil Fungsi CopyArrray, aplikasi akan memanggil fungsi coprray. 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 displarray. 37. Klik Tombol Fungsi DisplayArray, untuk memulai membuat fungsi displarray. 38. Menampilkan Jendela Fungsi DisplayArray, jendela fungsi displarray akan muncul. 39. Panggil Fungsi DisplayArrray, aplikasi akan memanggil fungsi displarray. 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.

18 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. Pertanan, Menu fungsi membuat pertanan. 49. Klik Tombol Pertanan, untuk memulai membuat pertanan. 50. Menampilkan Jendela Pertanan, jendela pertanan akan muncul. 51. Panggil Fungsi Membuat Pertanan, aplikasi akan memanggil fungsi membuat pertanan. 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 ng akan dihapus. 58. Klik Tombol Hapus Kode Program, untuk mulai menghapus kode program ng sudah dipilih sebelumn. 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 ng 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.

19 Cek Aturan, aplikasi memanggil fungsi cek aturan text atau variabel ng akan ditambahkan. 67. Valid, fungsi cek aturan akan memeriksa apakah text atau variabel benar atau. 68. Pesan Error, aplikasi akan menampilkan pesan error ketika text atau variabel ng dimasukan valid. 69. Jendel Add, aplikasi akan menampilkan jendela add ng berisi variabel dan textbox ng dapat diisi dengan text. 70. Pilih Item Add, memilih item apa ng akan ditambahkan pada kode program. 71. Menerima Item Tambah, aplikasi menerima item ng 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 itu replace kode program. Untuk memulain adalah dengan select kode. 74. Cek Aturan, aplikasi memanggil fungsi cek aturan text atau variabel ng akan di-replace. 75. Valid, fungsi cek aturan akan memeriksa apakah text atau variabel benar atau. 76. Pesan Error, aplikasi akan menampilkan pesan error ketika text atau variabel ng disisipkan valid. 77. Jendel Replace, aplikasi akan menampilkan jendela replace ng berisi variabel dan textbox ng dapat diisi dengan text. 78. Pilih Item Add, memilih item apa ng akan ditambahkan pada kode program. 79. Menerima Item Replace, aplikasi menerima item ng dipilih untuk replace kode program. 80. Replace Kode Program, aplikasi memanggil fungsi merubah kode program. 81. Klik Tombol Copy, menu terakhir dari aplikasi itu meng-copy kode program ng dihasilkan pada clipboard.

20 Menampilkan Jendela Kode Program Copy, aplikasi akan menampilkan form ng berisi kode program ng dapat di-copy ke clipboard. 83. Selesai, aplikasi selesai dijalankan Flowchart Fungsi Membuat Pertanan Gambar 3.8 Flowchart Fungsi Membuat Pertanan Gambar 3.4 memperlihatkan aktivitas fungsi membuat pertanan oleh aplikasi saat dijalankan. Berikut dibawah ini penjelasan dari flowchart tersebut : 1. Mulai, aplikasi mulai dijalankan 2. Masukan Pertanan, user memasukan pertanan.

21 48 3. Menerima pertanan, aplikasi menerima masukan pertanan ng diketikan oleh user. 4. Klik Tombol Variabel, user klik tombol variabel untuk memulai pemilihan variabel ng akan digunakan pada pertanan. 5. Menampilkan Variabel, aplikasi akan menampilkan variabel ng telah ditentukan user sebelumn. 6. Pilih Variabel, User memilih variabel ng akan digunakan untuk pertanan. 7. Menerima Pilihan Variabel, var, aplikasi menerima pilihan variabel. 8. Execute, user selanjutn mengeksekusi pertanan untuk dijadikan sebuat baris program pertanan. 9. Membuat Kode Program Pertanan, CreateQuestion "pertanan",var, ketika sudah dieksekusi oleh user maka selanjutn aplikasi membuat kode program pertanan berdasarkan masukan ng dilakukan oleh user. 10. Tampilkan Kode Program Pertanan, aplikasi akan menampilkan kode program di sebuah listbox. 11. Selesai, aplikasi selesai dijalankan.

22 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 Pilih Jenis jawaban Jawaban benar Execute benar Jawaban =benar Membuat kode program Jawaban Benar CreateCorrectAnswer Jawaban,var 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

23 50 2. Masukan Jawaban, user memasukan text jawaban. 3. Menerima Jawaban, aplikasi menerima masukan jawaban ng diketikan oleh user. 4. Klik Tombol Variabel, user klik tombol variabel untuk memulai pemilihan variabel ng akan digunakan pada jawaban. 5. Menampilkan Variabel, aplikasi akan menampilkan variabel ng telah ditentukan user sebelumn. 6. Pilih Variabel, User memilih variabel ng akan digunakan untuk jawaban. 7. Menerima Pilihan Variabel, var, aplikasi menerima pilihan variabel. 8. Pilih Jenis Jawaban, user memasukan jenis jawaban ng akan dibuat. 9. Jawaban Benar, kondisi jika jawaban benar maka akan dilanjutkan ke langkah berikutn pada jawaban benar. 10. Jawaban=benar, aplikasi menerima jawaban=benar 11. Execute Benar, user selanjutn mengeksekusi jawaban benar untuk dijadikan sebuat baris program jawaban benar. 12. Membuat Kode Program Jawaban Benar, CreateCorrectAnswer "pertanan",var, ketika sudah dieksekusi oleh user maka selanjutn aplikasi membuat kode program jawaban benar berdasarkan masukan ng dilakukan oleh user. 13. Jawaban=salah, aplikasi menerima jawaban=salah 14. Execute Salah, user selanjutn mengeksekusi jawaban salah untuk dijadikan sebuat baris program jawaban salah. 15. Membuat Kode Program Jawaban Salah, CreateWrongAnswer "pertanan",var, ketika sudah dieksekusi oleh user maka selanjutn aplikasi membuat kode program jawaban salah berdasarkan masukan ng dilakukan oleh user. 16. Tampilkan Kode Program Pertanan, aplikasi akan menampilkan kode program di sebuah listbox baik jawaban benar maupun salah. 17. Selesai, aplikasi selesai dijalankan.

24 Flowchart Fungsi Random Char User Sistem Mulai Masukan namavar Menerima namavar Masukan min Menerima charact min min= charact Masukan max Menerima charact max max= charact except Masukan lagi Pilih excep=var Klik Var Menerima except=var except=var 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 ng akan digunakan.

25 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 ng dimasukan oleh user. 17. Except="charact",aplikasi memproses except="charact". 18. Masukan lagi, kondisi masukan except lagi. Jika i maka akan masuk ke kondisi semula pilih except=var atau except=charact. Dan jika 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.

26 Flowchart Fungsi Random Number User Sistem Mulai Masukan namavar Menerima namavar Masukan min Menerima number min Min=number Masukan max Menerima number max max=number except Masukan lagi Pilih excep=var Klik Var Menerima except=var except=var 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 ng akan digunakan.

27 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 ng dimasukan oleh user. 17. Except=number,aplikasi memproses except=number 18. Masukan lagi, kondisi masukan except lagi. Jika i maka akan masuk ke kondisi semula pilih except=var atau except=number. Dan jika 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.

28 Flowchart Fungsi Create Array User Sistem Mulai Masukan namaarray Pilih namaarray =Var Klik Var Menerima var Namaarray=var Menerima karakter Namaarray= karakter Masukan JmlArray Menerima JmlArray Klik Tombol Execute Membuat Kode Program CreateArray, createarray namaarray,jmlarray 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 ng telah dipilih. 5. Namaarray=var, aplikasi memproses namaarray=var. 6. Menerima karakter, aplikasi menerima karakter sebagai nama array jika memilih nama array sebagai variabel. 7. Namaarray="karakter", aplikasi memproses namaarray="karakter".

29 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 Flowchart Fungsi Copy Array Gambar 3.13 Flowchart Fungsi Copy Array

30 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.

31 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 ng 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.

32 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 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 i 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.

33 Flowchart Fungsi Display Array User Sistem Mulai Masukan Nama Variabel Menerima namavar Pilih Var Menerima Var Klik Tombol Execute Membuat Kode Program displayarray, namavar=displayarray (var) 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 ng akan digunakan sebagai display array. 3. Menerima namavar, aplikasi menerima masukan nama variabel. 4. Pilih Var, memilih variabel ng akan ditampilkan arrayn. 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.

34 61 8. Menampilkan Kode Program displayarray, aplikasi menampilkan kode program fungsi display array ke dalam listbox. 9. Selesai, fungsi selesai dijalankan Flowchart Fungsi Get Value User Sistem Mulai Masukan namaget Pilih namaget =Var Klik Var Menerima var namaget=var Menerima karakter namaget= karakter Masukan JmlGet Menerima JmlGet Masukan namavar Menerima namavar Klik Tombol Execute Membuat Kode Program GetValue, namavar=getvalue(namaget,jmlget) 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 ng telah dipilih.

35 62 5. namaget=var, aplikasi memproses namaget=var. 6. Menerima karakter, aplikasi menerima karakter sebagai nama get jika 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.

36 Flowchart Fungsi Put Value User Sistem 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 memasukann ke dalam fungsi putvalue 4. Menerima Var1, aplikasi menerima variabel 1.

37 64 5. Masukan Variabel2,user memasukan variabel Pilih Var2, user memilih variabel 2 untuk memasukann ke dalam fungsi putvalue. 7. Menerima Var2, aplikasi menerima variabel Masukan Variabel3,user memasukan variabel Pilih Var3, user memilih variabel 3 untuk memasukann ke dalam fungsi putvalue. 10. Menerima Var3, aplikasi menerima variabel 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.

38 Flowchart Fungsi General User Sistem Mulai Masukan namavar Menerima namavar Tipe data String Masukan String Menerima string Ekpresi= string Masukan expresi Fungsi Valid Valid Menerima expresi Ekpresi=expresi Pesan Error Klik Tombol Execute Membuat Kode Program general, namavar=expresi 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.

39 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 memenuhi baris Fungsi Valid, memanggil fungsi valid sebagai script control. 10. Valid, kondisi jika ekpresi ng dimasukan benar, maka akan ke langkah selanjutn. 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 ng 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 ng dirancang itu: 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 ng berisi informasi nama aplikasi, versi aplikasi dan copyright aplikasi.

40 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 lainn 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 ng menampilkan daftar baris kode program dan penomoran kode program ng 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 bankn jumlah variabel ng digunakan. Tampilan awal ini dilengkapi dengan toolbar, statusbar, menu dan popup menu. Diharapkan tampilan tersebut akan menambah kemudahan user dalam mengoperasikan aplikasi ini.

41 68 Gambar 3.20 Tampilan Utama Aplikasi dan Manajemen Variabel 3. Tampilan membuat pertanan Pada tampilan pertanan user diminta untuk memasukan pertanan pada sebuah textbox. Dalam pengetikkan pertanan user juga diberi bantuan dalam menggunakan sebuah string tertentu pada isi pertanan. Bantuan tersebut berupa listbox. Selanjutn adalah memasukan variabel ng berasal dari kode program ng dibuat sebelumn, dimana user memilih di sebuah listbox dengan double klik listbox tersebut. Semua variabel ng dipilih akan ditempatkan pada textbox variabel. Dan diakhiri dengan tombol execute. Gambar 3.21 Tampilan Membuat Pertanan

42 69 4. Tampilan membuat jawaban Tampilan membuat jawaban memiliki konsep ng sama dengan tampilan membuat pertanan 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 ng akan dapat diubah akan muncul. Gambar 3.23 Tampilan Ubah Kode Program Manual

43 70 6. Tampilan fungsi random character Pada tampilan ini aplikasi mulai memandu user untuk menghasilkan kode program dengan cepat tanpa menlahi aturan kode program fungsi random character. User ditampilkan sebuah informasi mengenai fungsi tersebut melalui sebuah frame ng 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 ng berisi informasi fungsi itu properties fungsi random number.

44 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 ng membantu user pada saat mengisi jumlah array. Gambar 3.26 Tampilan fungsi create array

45 72 9. Tampilan fungsi put value Tampilan fungsi put value menggunakan tiga listbox untuk menampilkan variabel-variabel ng telah dibuat sebelumn.dimana selanjutm 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 ng digunakan untuk asal copy dan tujuan copy. Listbox tersebut han dipilih dengan pilihan ng 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

46 Tampilan fungsi fill array Untuk membantu pembuatan fungsi fill array, aplikasi menggunakan listbox dan textbox dalam penentuan variabel dan elemen array lainn. 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 ng 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 han menggunakan textbox dan listbox sebagai nama variabel dan pilihan variabel array ng akan ditampilkan. Sama haln dengan fungsi lainn tampilan fungsi ini juga dilengkapi dengan frame sebagai properties fungsi display array.

47 74 Gambar 3.30 Tampilan Fungsi Display Array 13. Tampilan fungsi get value Tampilan fungsi get value memiliki konsep ng 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

48 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 han 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

49 Tampilan about Tampilan menampikan informasi mengenai aplikasi. Gambar 3.34 Tampilan About Aplikasi