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.
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.
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.
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.
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.
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.
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.
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.
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
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.
16. Tampilan about
Tampilan menampikan informasi mengenai aplikasi.