BAB III ANALISA DAN PERANCANGAN. aplikasi atau sistem. Pada tahapan ini penulis akan melakukan analisa terhadap

BAB III ANALISA DAN PERANCANGAN

Tahap analisa adalah tahapan yang pertama dalam membangun sebuah aplikasi atau sistem. Pada tahapan ini penulis akan melakukan analisa terhadap apa saja yang dibutuhkan dalam membangun pengembangan aplikasi tebak kata Bahasa Inggris hangman. Perancangan aplikasi juga dilakukan pada tahapan ini. Hal tersebut sangat penting, karena dengan perancangan, aplikasi yang kita buat akan sesuai dengan harapan yang ingin dicapai. Perancangan aplikasi ini akan dijelaskan berdasarkan hasil pemodelan yang penulis lakukan. Pemodelan tersebut diantaranya adalah pemodelan Use Case Diagram, struktur menu, dan Flowchart. Dengan adanya pemodelan tersebut, diharapkan perancangan aplikasi tebak kata Bahasa Inggris hangman dapat diprogram sesuai dengan yang diharapkan.

3.1.

Analisa Kebutuhan Dua aplikasi yang sudah dibuat oleh Ri Ha dan Jon Vote merupakan kedua

aplikasi yang berbeda. Pertama aplikasi hangman sebelumnya merupakan aplikasi yang dibuat oleh Ri Ha. Berikut adalah tampilan awalnya :

28

Gambar 3.1. Layar awal aplikasi hangman. User harus ada dua orang, user pertama diharuskan mengisi kata yang dijadikan soal dan user kedua menjawab kata yang telah diisi oleh user pertama. Berikut adalah tahap pengisian jawabannya :

Gambar 3.2. Layar aplikasi hangman setelah user pertama mengisi kata. User pertama menjawab dengan mengklik tombol a-z yang telah disediakan. Jika user pertama menjawab benar maka akan tampil seperti ini :

29

Gambar 3.3. Layar aplikasi hangman jika user kedua menjawab benar. Tampilan di bawah ini merupakan jika user menekan ok.

Gambar 3.4. Layar aplikasi hangman jika user telah mengklik tombol ok. Jika user kedua mengklik tombol “Noch enimal Spielen”, maka permainan dimulai dari awal lagi. Berikut ini tampilannya :

30

Gambar 3.5. Layar aplikasi hangman jika user kedua mengklik tombol “Noch enimal Spielen”. Ketika user pertama mengisi kata yang akan dijadikan soal lagi, dan user kedua menjawab tetapi salah, maka kesempatan tinggal 9 lagi dan tampil gambar seperti berikut :

Gambar 3.6. Layar aplikasi hangman jika user salah mengklik jawaban kesempatan tinggal 9 lagi.

31

Kemudian user kedua salah menjawab lagi, maka kesempatan 8 lagi. Tampilan gambar seperti ini :

Gambar 3.7. Layar aplikasi hangman jika user salah mengklik jawaban kesempatan tinggal 8 lagi. Kemudian user kedua salah menjawab lagi, maka kesempatan 7 lagi. Tampilan gambar seperti ini :


32




33




34




35

Kemudian user kedua salah menjawab lagi, maka kesempatan habis dan tampil peringatan menunjukkan permainan selesai. Tampilan gambar seperti ini :

Gambar 3.15. Layar aplikasi hangman jika user kalah.

36

Selanjutnya adalah aplikasi kedua, yaitu aplikasi yang dibuat oleh Jon Vote. Berikut ini adalah contoh aplikasi yang dibuat oleh Jon Vote:

Gambar 3.16. Tampilan aplikasi Jon Vote. Gambar di atas merupakan tampilan awal dari aplikasi Jon Vote. Pada tampilan tersebut terlebih dahulu harus mengisi alamat URL yang dituju untuk mengambil source code. Berikut tampilan pengambilan source code yang diambil dari sebuah kamus online :

37

Gambar 3.17. Tampilan hasil pengambilan source code. Gambar di atas merupakan hasil pengambilan source code pada alamat URL http://thefreedictionary.com/seat, dengan cara klik Go. Selanjutnya pemenggalan tag-tag pada source code yang dijadikan teks, dengan klik Text. Berikut adalah tampilannya :

38

Gambar 3.18. Hasil pengambilan teks. Dari dua aplikasi yang

dibuat oleh kedua programmer yang berbeda

merupakan bahan untuk pengembangan aplikasi yang dibuat oleh penulis dan berikut adalah analisa kebutuhan fungsional dan non-fungsional.

39

3.1.1. Analisa Kebutuhan Fungsional Aplikasi permainan tebak kata Bahasa Inggris hangman ini menggunakan sistem database kamus online di internet. Sesuai dengan namanya, aplikasi ini dapat berjalan apabila terkoneksi dengan internet. Aplikasi ini hanya menyimpan kata-kata Bahasa Inggris dengan menggunakan array yang kemudian dihubungkan pada kamus online di internet. Setelah itu, definisi dari kata-kata tersebut diambil dan dijadikan soal. Agar lebih menarik, aplikasi permainan tebak kata Bahasa Inggris ini menggunakan sistem hangman untuk menjawabnya. Perbedaannya dengan hangman yang lain adalah tidak menggunakan karikatur orang yang digantung apabila salah beberapa kali dalam menjawab. Pada aplikasi ini, karikatur orang yang digantung diganti dengan waktu yang berjalan mundur selama 30 detik, dan 10 kali salah dalam mengklik huruf yang telah disediakan agar lebih menantang user dalam menjawab, misalkan hanya kesempatan, maka kemungkinan user akan merasa bosan dan jenuh dalam bermain dan apabila hanya menggunakan waktu, user dapat mengklik tombol huruf secepat mungkin agar mendapatkan jawaban yang benar. Apabila berhasil menjawab, maka nilai akan ditambahkan +10, dan apabila gagal dalam menjawab, nilai akan dikurangi dengan -5. Efek suara juga diberikan paada aplikasi ini, suara tersebut akan terdengar apabila waktu untuk kita menjawab kurang dari 5 detik, apabila jawaban kita benar, dan apabila jawaban kita salah. Suara juga akan keluar apabila tombol huruf diklik.

40

3.1.2. Analisa Kebutuhan Non-Fungsional Aplikasi ini hanya dapat berjalan di sistem operasi Windows yang sudah terinstalasi Micorsoft .Net Framework versi 2.0 ke atas, dan dalam menjalankan awal permainan harus terkoneksi internet.

3.2.

Perancangan Pengembangan Aplikasi Permainan Tebak Kata Bahasa

Inggris Hangman Dengan Menggunakan Kamus Online di Internet Seperti perancangan aplikasi yang lainnya, aplikasi ini juga dirancang melalui beberapa tahap, yaitu dimulai dari tahap awal menggunakan pemodelan use case diagram, struktur menu, dilanjutkan dengan pemodelan flowchart, dan rancangan antar muka. Dengan adanya pemodelan use case diagram, struktur menu dan flowchart, penulis menjadi lebih terarah dalam membangun aplikasi permainan tebak kata Bahasa Inggris.

3.2.1. Use Case Diagram Use Case Diagram digunakan untuk mendsekripsikan interaksi antara sistem dan actor, serta memberikan narasi tentang bagaimana sistem itu sendiri digunakan. Pada use case pengguna atau user biasanya disebut sebagai actor dan sistem yang digunakan oleh user biasanya disebut dengan use case itu sendiri. Berikut ini adalah use case dari pengembangan aplikasi permainan tebak kata Bahasa Inggris hangman :

41

Sistem

Melakukan Permainan

Melihat Instruksi

User

Mengubah Username

Melihat pembuat

Gambar 3.19. Usecase aplikasi permainan tebak kata Bahasa Inggris. Penjelasan dari use case dari gambar 3.19. adalah sebagai berikut : Tabel 3.1. Skenario use case Melakukan permainan. Nama Use Case Melakukan permainan Deskripsi singkat Pada use case ini user memulai permainan Actor User Pra kondisi Aplikasi Permainan Bahasa Inggris udah ada pada PC, berupa .exe Tindakan utama 1. Sistem menampilkan menu utama. 2. User mengklik sub menu New Game pada menu File. 3. User memasukkan Username. 4. User memainkan permainan dengan mengklik tombol Start. Tindakan alternative Pasca kondisi Apabila use case berhasil di jalankan, maka user dapat memulai permainan.

42

Tabel 3.2. Skenario use case Melihat instruksi. Nama Use Case Melihat instruksi Deskripsi singkat Pada use case ini user melihat instruksi untuk panduan dalam bermain. Actor User Pra kondisi Aplikasi Permainan Bahasa Inggris udah ada pada PC, berupa .exe Tindakan utama Sistem menampilkan tampilan instruksi setelah user mengisi username atau di awal permainan. Tindakan alternatif User dapat mengklik sub menu Instriksi pada menu Help. Pasca kondisi Apabila use case berhasil di jalankan, maka user dapat melihat instruksi, baik diawal permainan, di tengah permainan, atau pada akhir permainan.

Tabel 3.3. Skenario use case Mengubah username. Nama Use Case Mengubah Username Deskripsi singkat Pada use case ini user dapat mengubah Username. Actor User Pra kondisi Aplikasi Permainan Bahasa Inggris udah ada pada PC, berupa .exe Tindakan utama 1. User menginput Username pada awal permainan. 2. User keluar dari permainan dan masuk kedalam permainan dengan menginput username baru. Tindakan alternatif User dapat mengklik sub menu Rename pada menu File. Pasca kondisi Apabila use case berhasil di jalankan, maka user dapat mengganti username.

43

Tabel 3.4. Skenario use case Melihat pembuat. Nama Use Case Melihat pembuat Deskripsi singkat Pada use case ini user melihat info dari pembuat Aplikasi. Actor User Pra kondisi Aplikasi Permainan Bahasa Inggris udah ada pada PC, berupa .exe Tindakan utama User mengklik sub menu Author pada menu Help. Tindakan alternatif Pasca kondisi Apabila use case berhasil di jalankan, maka user dapat melihat info pembuat dari aplikasi.

4.2.2. Struktur Menu Program aplikasi permainan tebak kata Bahasa Inggris ini mempunyai hirarki struktur menu yang isinya terdapat sub menu dari menu utama. Struktur menu ini dapat dilihat pada gambar 3.20.

Menu Utama

File

Help

Gambar 3.20. Struktur menu utama.

Pada gambar 3.20. menu utama memiliki dua sub yaitu “File” dan “Help”. File terdiri dari satu menu sub proses yaitu “New Game”, “Rename”, dan “Exit”. Sub menu proses ini dapat dilihat pada gambar 3.21.

44

File

New Game

Rename

Exit

Gambar 3.21. Struktur menu file.

Sub menu About juga memiliki sub menunya tersendiri yaitu “Help” yang dapat dilihat pada gambar 3.22.

Help

Instruction

Author

Gambar 3.22. Struktur menu help.

45

3.2.3. Flowchart Flowchart digunakan untuk menggambarkan suatu tahap penyelesaian secara sederhana dan jelas dengan menggunakan simbol-simbol yang sederhana. Flowchart juga digunakan untuk mejelaskan rangkaian pelaksanaan kegiatan program yang kita buat. Berikut ini adalah flowchart dari aplikasi Permainan bahasa inggris: Start

Menu Utama

Memulai permainan?

Ya

Tidak

Melakukan permainan

End

Gambar 3.23. Flowchart aplikasi keseluruhan. Pada gambar di atas menampilkan program aplikasi keseluruhan dari permainan tebak kata Bahasa Inggris, dimulai pada saat: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan pada suatu program.

2.

Menu Utama, sistem menampulkan menu utama.

46

3.

Memulai permainan?, apabila user ingin memulai permainan maka lanjut pada proses nomor 4.

4.

Melakukan permainan, user dapat melakukan permainan.

5.

End, akhir dari proses alur program permainan tebak kata Bahasa Inggris, ketika user selesai bermain atau user tidak ingin bermain, maka user dapat keluar dari program (end).

Flowchart yang berkaitan perancangan aplikasi yakni, cara kerja aplikasi, membuat soal pertanyaan, membuat tombol otomatis pada menu utama, membuat label jawaban, fungsi tombol a-z, fungsi waktu, fungsi maksimal kesempatan, fungsi keyboard jawaban, fungsi KeyPress menu utama. Dapat dijelaskan sebagai berikut :

A.

Flowchart cara kerja aplikasi Pada flowchart cara kerja aplikasi ini, penulis menggabungkan dua

algoritma,

yaitu

permainan

hangman

yang

dibuat

oleh

Ri

Ha

(http://planetsourcecode.com/vb/scripts/ShowCode.asp?txtCodeId=6507&lngWId =10) dan pengambilan source code yang dibuat oleh Jon Vote. Sehingga penulis memodifikasinya menjadi permainan tebak kata Bahasa Inggris. Berikut adalah flowchart cara kerja aplikasi ini:

47

Start

Membuat tombol secara otomatis di “frmUtama”.

Menekan tombol “Start” untuk memulai.

Koneksi internet? ya

Mengambil kata secara random di array yang akan disimpan di objek “txtJawaban.Text”

Soal pertanyaan dibuat dari pengambilan soure code kamus web online dan dipenggal kalimat definisinya.

Dijawab menggunakan tombol yang sudah ditampilakan secara otomatis pada “frmUtama”

Objek “txtJawaban.Text” disimpan di dalam variabel “Teks” yang diUpperCase hurufnya

tidak

Membuat label secara otomatis sesuai dengan di dalam variabel “Teks” berupa “_”

Mendapatkan soal pertanyaan yang disimpan dalam objek “txtPertanyaan.Text”

Menjawab soal menggunakan tombol atau keyboard huruf dari a-z.

Waktu lebih dari 30 detik ?

Ya

Tidak Kesempatan lebih dari 10 kali?

Ya

Mendapat nilai -5 yang disimpan di dalam objek “txtNilai.text”

Klik tombol “Next Question” untuk mendapatkan soal baru

Tidak Bisa menjawab?

Tidak Tidak

Ya Mendapat nilai 10 yang disimpan di dalam objek “txtNilai.Text”.

Keluar dari program ?

Ya

End

Gambar 3.24. Flowchart cara kerja aplikasi.

48

Berikut ini adalah keterangan dari flowchart cara kerja aplikasi: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan cara kerja aplikasi.

2.

Membuat tombol secara otomatis di “frmUtama”,Pada tahap ini, tombol otomatis dibuat untuk menjawab pertanyaan pada frmUtama_Load().

3.

Menekan tombol “start” untuk memulai, pada tahap ini, soal akan muncul dan permainan dimulai.

4.

Koneksi Internet?,akan dilakukan pemerikasaan, apakah terhubung dengan jaringan internet atau tidak. Apabila tidak terhubung maka permainan tidak akan berlangsung (end).

5.

Mengambil kata secara random di array yang akan disimpan di objek “txtJawaban.Text”, kata-kata dalam Bahasa Inggris terlebih dahulu di dalam array dan disimpan txtJawaban.Text.

6.

Soal pertanyaan dibuat dari pengambilan source code kamus web online dan dipenggal kalimat definisinya, kalimat definisi kata-kata Bahasa Inggris diambil dari kamus web online, dan kalimat definisi tersebut di penggal dan dijadikan soal.

7.

Dijawab menggunakan tombol yang sudah ditampilkan secara otomatis pada “frmUtama”, soal dapat dijawab dengan menggunakan tombol yang terlebih dahulu dibuat pada frmUtama.

8.

Objek “txtJawaban.Text disimpan di dalam variabel “Teks” yang diUpperCase hurufnya, kata-kata Bahasa Ingris disimpan didalam variabel Teks dan huruf dari kata-kata tersebut dirubah menjadi huruf kapital.

49

9.

Membuat label secara otomatis sesuai dengan di dalam variabel “Teks” berupa “_”, setelah kata-kata Bahasa Inggris disimpan didalam variabel Teks, dirubah menjadi tanda “_” untuk tempat menjawab soal.

10.

Mendapatkan

soal

pertanyaan

yang

disimpan

dalam

objek

“txtPertanyaan.Text”, pertanyaan yang telah diambil dari kamus web online dan di penggal, akan disimpan pada objek txtPertanyaan.Text. 11.

Menjawab soal menggunakan tombol atau keyboard huruf dari a-z, ada dua cara menjawab soal, yaitu menggunakan tombol yang ada pada layar dengan cara mengklik tombol tersebut, atau menggunakan keyboard dari huruf a-z.

12.

Waktu lebih dari 30 detik? Akan dilakukan pemeriksaan, apabila menjawab lebih dari 30 detik maka akan mendapatkan nilai -5, dan apabila waktu belum mencapai lebih dari 30 detik maka akan mendapatkan kesempatan 10 kali memasukkan huruf.

13.

Kesempatan lebih dari 10 kali?, akan dilakukan pemeriksaan, apakah menginput huruf yang sama lebih dari 10 kali atau tidak.

14.

Bisa menjawab?, dilakukan pemerikasaan apakah user dapat menjawab pertanyaan atau tidak, apabila tidak bisa menjawab pertanyaan maka dapat langsung menggunakan tombol next question.

15.

Mendapatkan nilai -5 yang disimpan didalam objek “txtNilai.Text”, nilai 5 akan didapatkan apabila waktu lebih dari 30 detik dan kesempatan lebih dari 10 kali memasukkan huruf dalam menjawab. Nilai yang didapat akan disimpan pada objek yang bernama txtNilai.Text.

50

16.

Mendapat nilai 10 yang disimpan di dalam objek “txtNilai.Text”, nilai 10 akan didapatkan apabila dapat menjawab pertanyaan yang diberikan dengan masa waktu yang kurang dari 30 detik dan kurang dari 10 huruf dalam menginput huruf.

17.

Klik tombol “Next Question” untuk mendapatkan soal baru, digunakan apabila ingin melanjutkan permainan.

18.

Keluar

dari

program?,

dilakukan

pemeriksaan

apakah

setelah

mendapatkan niali atau tidak dapat menjawab pertanyaan ingin keluar program atau tidak. 19.

End, akhir dari proses alur cara kerja aplikasi.

B.

Flowchart membuat soal pertanyaan Pada flowchart membuat soal pertanyaan, penulis menggunakan sistem

pengambilan source code kamus online di internet dan dijadikan teks yang dibuat oleh Jon Vote. Dari aplikasi yang dibuat Jon Vote, penulis juga menggunakan sistem pemenggalan dari teks yang sudah diambil, pada pemenggalan kata ini penulis menggunakan algoritma pemenggalan teks. Setelah dipelajari dan dianalisa, maka penulis menggabungkan algoritma dari Jon Vote, yaitu pengambilan source code kamus online di internet dan dijadikan teks dan algoritma pemenggalan teks yang penulis buat. Hasilnya berupa flowchart sebagai berikut :

51

Start

1

Pemenggalan yang sudah disimpan di dalam fungsi v_Teks.Text kemudian disimpan di dalam objek txtTeks.Text

Mengacak kata yang sudah disimpan di dalam array “Tema” menggunakan fungsi “RandomTeks.Next” yang sudah dideklarasikan “Dim RandomTeks As New Random”

Isi objek txtTeks.Text dipenggal lagi untuk mendapatkan definisi Bahasa Inggris berguna sebagai pertanyaan game menggunakan pencarian posisi batas-batas kalimat yang akan dipenggal yakni batas awal “1.” dan batas akhir “2.”.

Kata yang diacak disimpan di dalam objek “txtJawaban.Text” Kata yang sudah disimpan di dalam objek “txtJawaban.Text” di arahkan ke url alamat web “(http:// www.thefreedictionary.com/ + txtJawaban.Text)”

Terkoneksi Internet ?

Batas awal di simpan di variabel “strPos1” dengan cara memakai fungsi “InStr(1, txtTeks.Text, "1" + "." + " ")”

Tidak Batas akhir di simpan di variabel “strPos2” dengan cara memakai fungsi “InStr(strPos1, txtTeks.Text, "2" + ".")”

Ya Mengambil source code dari halaman sebuah web dari alamat url tersebut menggunakan fungsi dalam class “halamanHTML” yakni dengan cara “v_Teks.LoadSumber(http://www.thefreedictionary.com/ + txtJawaban.Text)” yang sudah dideklarasi menggunakan “Private WithEvents v_Teks As New halamanHTML()”

Pemenggalan kalimat disimpan di variabel “strSimpan” dengan cara memakai fungsi “Mid(txtTeks.Text, strPos1 + 3, strPos2 - strPos1 - 3)”

Pemenggalan kalimat definisi tersebut di variabel “strSimpan” disimpan di dalam objek “txtPertanyaan.Text” yang akan dijadikan soal pertanyaan

Pemenggalan tag-tag source code yang sudah diambil dan disimpan juga menggunakan fungsi “v_Teks.Text”

End 1

Gambar 3.25. Flowchart membuat soal pertanyaan.

52

Berikut ini adalah keterangan dari flowchart membuat soal: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan membuat soal pertanyaan.

2.

Mengacak kata yang sudah disimpan di dalam array “Tema” menggunakan fungsi “RandomTeks.Next” yang sudah di deklarasikan “Dim RandomTeks As New Random”, kata-kata Bahasa Inggris yang sudah disimpan di dalam array Tema akan diacak berdasarkan fungsi random dari Visual Basic .NET yaitu menggunakan fungsi RandomTeks.Next yang sudah dideklarasikan yaitu Dim RandomTeks As New Random. Dengan cara Tema.Item(RandomTeks.Next(0, Tema.Count)),

yaitu Tema.Item

merupakan fungsi untuk tempat penyimpanan sementara yang dilakukan pengacakan oleh fungsi RandomTeks.Next dari 0 sampai jumlah array Tema. 3.

Kata yang diacak disimpan didalam objek “txtJawaban.Text”, kata-kata yang sudak diacak atau random, kemudian disimpan pada objek txtJawaban.Text.

4.

Kata yang sudah disimpan di dalam objek “txtJawaban.Text” di arahkan ke

url

alamat

web

“(http://www.thefreedictionary.com/

+

txtJawaban.Text)”, kata-kata Bahasa Inggris yang telah disimpan pada objek

txtJawaban.Text

ditambahkan

ke

alamat

url

http://www.thefreedictionary.com/ yang akan diambil definisi dari katakata Bahasa Inggris tersebut. 5.

Terkoneksi Internet ?, dilakukan pemeriksaan, apakah terkoneksi internet atau tidak.

53

6.

Mengambil source code dari halaman sebuah web dari alamat url tersebut menggunakan fungsi dalam class “halamanHTML” yakni dengan cara “v_Teks.LoadSumber(http://www.thefreedictionary.com/

+

txtJawaban.Text)” yang sudah dideklarasi menggunakan “Private WithEvents v_Teks As New halamanHTML()”, halamanHTML digunakan untuk mengambil source code yang ada pada kamus web online dengan cara

v_Teks.LoadSumber(http://www.thefreedictionary.com/

+

txtJawaban.Text) yang sudah terlebih dahulu dideklarasikan menggunakan Private WithEvents v_Teks As New halamanHTML(). 7.

Pemenggalan tag-tag source code yang sudah diambil dan disimpan juga menggunakan fungsi “v_Teks.Text”, source code yang telah diambil dan dipisahkan dari tag-tag disimpan menggunakan v_Teks.Text.

8.

Pemenggalan yang sudah disimpan di dalam fungsi v_Teks.Text kemudian disimpan di dalam objek txtTeks.Text, source code yang sudah dipisahkan dari tag-tag yang ada dan disimpan didalam v_Teks.Text, disimpan kembali kedalam objek txtTeks.Text.

9.

Isi objek txtTeks.Text dipenggal lagi untuk mendapatkan definisi Bahasa Inggris berguna sebagai pertanyaan game menggunakan pencarian posisi batas-batas kalimat yang akan dipenggal yakni batas awal “1.” dan batas akhir “2.”, source code yang sudah di pisahkan dari tag-tag nya dan disimpan didalam txtTeks.Text, dipenggal kembali untuk mendapatkan definisi Bahasa Inggris dengan cara mencari posisi batas-batas kalimat yakni batas awal 1 dan batas akhir 2.

54

10.

Batas awal di simpan di variabel “strPosisi1” dengan cara memakai fungsi “InStr(1, txtTeks.Text, "1" + "." + " ")”, Setelah mendapatkan batas awal, maka disimpan didalam fungsi InStr(1, txtTeks.Text, "1" + "." + " ")”.

11.

Batas akhir di simpan di variabel “strPosisi2” dengan cara memakai fungsi “InStr(strPos1, txtTeks.Text, "2" + ".")”, batas akhir juga disimpan di dalam fungsi InStr(strPos1, txtTeks.Text, "2" + ".")”.

12.

Pemenggalan kalimat disimpan di variabel “strSimpan” dengan cara memakai fungsi “Mid(txtTeks.Text, strPos1 + 3, strPos2 - strPos1 - 3)”, setelah kalimat definisi dipenggal, kalimat tersebut disimpan didalam variabel strSimpan dengan menggunakan fungsi Mid(txtTeks.Text, strPos1 + 3, strPos2 - strPos1 - 3).

13.

Pemenggalan kalimat definisi tersebut di variabel “strSimpan” disimpan di dalam objek “txtPertanyaan.Text” yang akan dijadikan soal pertanyaan, setelah penggalan kata definisi di simpan di dalam strSimpan, maka disimpan di dalam objek txtPertanyaan.Text yang akan dijadikan soal pertanyaan yang muncul pada form utama.

14.

C.

End, akhir dari proses alur membuat soal pertanyaan.

Flowchart membuat tombol otomatis pada menu utama Pada flowchart membuat tombol otomatis, penulis menggunakan sistem

permainan

hangman

yang

dibuat

oleh

Ri

Ha

(http://planetsourcecode.com/vb/scripts/ShowCode.asp?txtCodeId=6507&lngWId

55

=10) , Setelah dipelajari dan dianalisa, maka hasilnya berupa flowchart sebagai berikut : Start

i = 0,Apakah sudah sampai i = 25?

ya

Tidak i = 0, Apakah sudah sampai i = 9 ?

btnTebak = New Button

Tidak btnTebak.Height = 31 btnTebakKata(i).Top = y btnTebak.Width = 31

btnTebakKata(i).Left = x

btnTebak.Font = New Font("Comic Sans MS", 12, FontStyle.Bold)

Ya

x += 37

btnTebak.Enabled = False x = 111 btnTebak.Text = Chr(65 + i)

i = 10, Apakah sudah sampai i=18?

Me.Controls.Add(btnTebak)

AddHandler btnTebak.Click, AddressOf btnTebak_Click

Tidak btnTebakKata(i).Top = y + 37

btnTebakKata(i) = btnTebak Ya

btnTebakKata(i).Left = x x = 132 x += 37 y = 250

i = 19, Apakah sudah sampai i = 25?

Tidak btnTebakKata(i).Top = y + 37

Ya

btnTebakKata(i).Left = x

x += 37

End

Gambar 3.26. Flowchart membuat tombol otomatis pada menu utama.

56

Berikut ini adalah keterangan dari flowchart membuat soal: 1.

Start, yaitu sebagai awal dari proses alur atau membuat tombol otomatis pada menu utama.

2.

i = 0,Apakah sudah sampai i = 25?, i digunakan untuk menjadi pembatas dalam menampilkan tombol otomatis yang digunakan untuk menjawab pada menu utama. Pada bagian ini akan diperiksa apakah i sudah sampai =25?, apabila i sudah sampai = 25, maka proses langsung berlanjut pada pada nomor 12.

3.

btnTebak = New Button,deklarasi dari btnTebak yang akan dijadikan button atau tombol dan dilakukan sebanyak i=25 kali.

4.

btnTebak.Height = 31, tinggi dari button atau tombol yang digunakan untuk menjawab pertanyaan adalah 31 dan dilakukan sebanyak i=25 kali.

5.

btnTebak.Width = 31, lebar dari button atau tombol yang digunakan untuk menjawab pertanyaan adalah 31 dan dilakukan sebanyak i=25 kali.

6.

btnTebak.Font = New Font("Comic Sans MS", 12, FontStyle.Bold), huruf pada tombol bertipe Comic Sans MS dengan size huruf 12 dan bercetak tebal dan dilakukan sebanyak i=25 kali.

7.

btnTebak.Enabled = False, objek btnTebak tidak berfungsi pada saat tombol di klik atau diinput melalui keyboard.

8.

btnTebak.Text = Chr(65 + i), btnTebak akan terisi huruf A dan seterusnya dengan tipe data char dan bilangan ASCI sampai perulangan selesai

9.

Me.Controls.Add(btnTebak), didalam frmUtama mengontrol variabel btnTebak.

57

10.

AddHandler

btnTebak.Click,

AddressOf

btnTebak_Click,objek

dari

btnTebak.Click di alamatkan ke dalam fungsi btnTebak_Click yang digunakan untuk mengontrol objek btnTebak.Click. 11.

btnTebakKata(i) = btnTebak, btnTebak yang sudah dibuat disimpan didalam array bernama btnTebakKata(i).

12.

i = 0, Apakah sudah sampai i = 9 ?, dilakukan pemeriksaan lagi untuk menentukaan banyaknya tombol pada baris pertama.

13.

btnTebakKata(i).Top = y, panjang untuk btnTebak dideklarasikan menggunakan

y

dan

disimpan

didalam

array

untuk

btnTebak

didalam

array

yang

bernama

btnTebakKata(i) 14.

btnTebakKata(i).Left menggunakan

x

=

dan

x,

tinggi

disimpan

dideklarasikan yang

bernama

btnTebakKata(i). 15.

x += 37, spasi atau jarak antara tombol yang satu dan yang lainnya adalah +37

16.

x = 111, jarak ke baris kedua dari posisi baris pertama adalah 111.

17.

i = 10, Apakah sudah sampai i=18?, dilakukan pemeriksaan lagi unutk baris kedua untuk menentukan banyaknya tombol yang ada pada baris kedua.

18.

btnTebakKata(i).Top = y + 37, jarak antara tombol yang satu dan yang lainnya adalah +37 pada posisi horizontal.

19.

btnTebakKata(i).Left = x, tinggi untuk btnTebak pada baris kedua dideklarasikan menggunakan x dan disimpan di dalam array yang bernama btnTebakKata(i).

58

20.

x += 37, spasi atau jarak antara tombol yang satu dan yang lainnya adalah +37.

21.

x = 132, letak tombol pada baris ke tiga yaitu pada titik koordinat x = 132 untuk posisi tombol pada baris ketiga.

22.

y = 250, letak tombol pada baris ke tiga yaitu pada titik koordinat y = 250 untuk posisi tombol pada baris ketiga.

23.

i = 19, Apakah sudah sampai i = 25?, dilakukan pemeriksaan lagi untuk menentukan banyaknya tombol pada baris ke tiga.

24.

btnTebakKata(i).Top = y + 37, jarak antara tombol yang satu dan yang lainnya adalah +37 pada posisi horizontal dan disimpan pada array yang bernama btnTebakKata(i).

25.

btnTebakKata(i).Left = x, tinggi untuk btnTebak pada baris ketiga dideklarasikan menggunakan x dan disimpan didalam array yang bernama btnTebakKata(i).

26.

x += 37, , spasi atau jarak antara tombol yang satu dan yang lainnya adalah +37.

27.

D.

End, akhir dari proses alur membuat tombol otomatis pada menu utama.

Flowchart membuat label jawaban Pada flowchart membuat label jawaban, penulis menggunakan sistem

permainan

hangman

dibuat

oleh

Ri

Ha

(http://planetsourcecode.com/vb/scripts/ShowCode.asp?txtCodeId=6507&lngWId =10), Setelah dipelajari dan dianalisa, maka hasilnya berupa flowchart sebagai berikut :

59

Start

Teks = txtJawaban.Text.ToUpper

PanjangTeks = Teks.Length

ReDim lblTebak(PanjangTeks)

i=0, apakah sudah sampai “PanjangTeks -1” ?

Tidak

lblKeyBoard = New Label

lblKeyBoard.Font = New Font("Comic Sans MS", 12, FontStyle.Bold)

lblKeyBoard.AutoSize = False lblKeyBoard.Text = "_"

lblKeyBoard.Height = 35 lblTebak(i) = lblKeyBoard

lblKeyBoard.Width = 20 Me.Controls.Add(lblKeyBoard ) Ya lblKeyBoard.Top = 80

lblKeyBoard.Left = Links

lblKeyBoard.TextAlign = ContentAlignment.MiddleCenter

AddHandler lblKeyBoard.TextChanged, AddressOf lblKeyBoard_Validated

Links += 18

End

Gambar 3.27. Flowchart membuat label jawaban.

60

Berikut ini adalah keterangan dari flowchart membuat membuat label jawaban: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan membuat label jawaban.

2.

Teks = txtJawaban.Text.ToUpper, jawaban yang telah disimpan pada variabel txtJawaban.Text akan dirubah menjadi huruf kapital.

3.

PanjangTeks = Teks.Length, variabel PanjangTeks menyimpan jumlah huruf yang ada pada variabel Teks.

4.

ReDim lblTebak(PanjangTeks), lblTebak dideklarasikan kembali dan mempunyai isi nilai yaitu PanjangTeks.

5.

i=0, apakah sudah sampai “PanjangTeks -1” ?, i dideklarasikan menjadi 0, dan dilakukan pemeriksaan apakah batasan PanjangTeks -1. Jika i=0 sudah sampai “PanjangTeks -1” maka proses selesai.

6.

lblKeyBoard = New Label, deklarasi dari lblKeyBoard yang akan dijadikan label untuk menampilkan jawaban.

7.

lblKeyBoard.AutoSize = False, size dari lblKeyBoard dijadikan False agar tidak berubah antara label yang satu dengan label yang lainnya.

8.

lblKeyBoard.Height = 35, label memiliki tinggi 35 pixel.

9.

lblKeyBoard.Width = 20, label memiliki lebar 20 pixel.

10.

lblKeyBoard.Top = 80, label berada pada posisi 80 pixel yaitu pada garis x

11.

lblKeyBoard.Left = Links, posisi diletakkan secara vertikal dari isi nilai variabel Links.

61

12.

lblKeyBoard.TextAlign

=

ContentAlignment.MiddleCenter,

isi

dari

lblKeyBoard diletakkan secara rata tengah. 28.

lblKeyBoard.Font = New Font("Comic Sans MS", 12, FontStyle.Bold), ), Huruf yang akan keluar pada label bertipe Comic Sans MS dengan size huruf 12 dan bercetak tebal

13.

lblKeyBoard.Text = "_", lblKeyBoard diisi dengan tanda “_”.

14.

lblTebak(i) = lblKeyBoard, lblKeyBoard yang sudah dibuat disimpan didalam array yang bernama lblTebak(i).

15.

Me.Controls.Add(lblKeyBoard), didalam frmUtama mengontrol variabel lblKeyBoard.

16.

AddHandler lblKeyBoard_Validated,

lblKeyBoard.TextChanged, objek

dari

AddressOf

lblKeyBoard.TextChanged

di

alamatkan ke dalam fungsi lblKeyBoard_Validated yang digunakan untuk mengontrol objek lblKeyBoard.TextChanged. 17.

Links += 18, pada variabel Links, setiap huruf ditambah sebanyak 18 pixel.

18.

E.

End, akhir dari proses alur membuat label jawaban.

Flowchart fungsi tombol a-z Pada flowchart membuat fungsi tombol a-z, penulis menggunakan sistem

permainan

hangman

yang

dibuat

oleh

Ri

Ha

(http://planetsourcecode.com/vb/scripts/ShowCode.asp?txtCodeId=6507&lngWId =10), Setelah dipelajari dan dianalisa, maka hasilnya berupa flowchart sebagai berikut :

62

Start

lbDa = True ?

Tidak

Dim bn As Button Ya

bn.Enabled = False

lbDa = False My.Computer.Audio.Play(My. Resources.SuaraHuruf, AudioPlayMode.Background)

Kesempatan += 1


MaksKesempatan() Tidak

Ya Hadir(bn.Text, Titik) ?

Titik = Teks.IndexOf(bn.Text, i)

Kata = Nothing

Tidak Ya Coba += 1 lblTebak(Titik).Text = bn.Text


Ya Kata = Kata & lblTebak(i).Text Tidak

Kata = Teks ?

Tidak

Ya My.Computer.Audio.Play(My. Resources.Benar, AudioPlayMode.Background)

MsgBox("Your Answer is True", MessageBoxIcon.Information, "Message")

Me.KeyPreview = False

lblInformasi.Text = "Your Answer is True"

Disabled Tombol a-z

lbDa = False

txtNilai.Text = 10 + txtNilai.Text

End

tmWaktu.Enabled = False

Gambar 3.28. Flowchart fungsi tombol a-z.

63

Berikut ini adalah keterangan dari flowchart membuat membuat fungsi tombol a-z: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan pada fungsi tombol a-z.

2.

Dim bn As Button, deklarasi variabel bn menjadi objek Button.

3.

bn.Enabled = False, objek bn tidak difungsikan.

4.

My.Computer.Audio.Play(My.Resources.SuaraHuruf, AudioPlayMode.Background), memberikan efek suara pada setiap tombol apabila diklik, efek suara disimpan di dalam file SuaraHuruf.wav.

5.

i=0, apakah sudah sampai “PanjangTeks -1” ?, ?, i dideklarasikan menjadi 0, dan dilakukan pemeriksaan apakah batasan PanjangTeks -1.

6.

Titik = Teks.IndexOf(bn.Text, i), variabel Titik menyimpan indeks dari variabel Teks yang berisi objek bn.Text sampai i=PanjangTeks-1.

7.

Hadir(bn.Text, Titik) ?, variabel Hadir apakah berisi alamat array bn.Text dan Titik?.

8.

lblTebak(Titik).Text = bn.Text, objek lblTebak.Text yang mempunyai alamat array(Titik) menyimpan isi objek bn.Text.

9.


10.

Kata = Kata & lblTebak(i).Text, variabel Kata digabung dengan objek lblTebak.Text yang memiliki alamat array i.

11.

Kata = Teks ?, menanyakan apakah variabel Kata sama dengan Teks.

12.

My.Computer.Audio.Play(My.Resources.Benar, AudioPlayMode.Background), memberikan efek suara pada setiap tombol apabila diklik, efek suara disimpan di dalam file Benar.wav.

64

13.

Me.KeyPreview = False, fungsi KeyPrewview pada objek frmUtama dimatikan.

14.

Disabled Tombol a-z, objek tombol a-z tidak berfungsi.

15.

txtNilai.Text = 10 + txtNilai.Text, isi objek txtNilai.Text ditambah sepuluh.

16.

tmWaktu.Enabled = False, objek dan fungsi tmWaktu tidak dijalankan.

17.

MsgBox("Your

Answer

is

True",

MessageBoxIcon.Information,

"Message"), memberikan pesan melalui MsgBox yang berupa informasi “Your Answer is True". 18.

lblInformasi.Text = "Your Answer is True", objek lblInformasi.Text, berisi kalimat "Your Answer is True".

19.

lbDa = False, variabel lbDa diberi nilai False.

20.

lbDa = True ?, jika lbDa sama dengan True maka proses lanjut pada nomor 21.

21.


22.

Kesempatan += 1, variabel Kesempatan ditambah satu.

23.

MaksKesempatan(), memanggil fungsi MaksKesempatan.

24.

Kata = Nothing, variabel Kata isinya dikosongkan.

25.

Coba += 1, variabel Coba ditambah satu.

26.

End, akhir dari proses alur fungsi tombol a-z.

F.

Flowchart fungsi waktu Pada flowchart membuat fungsi waktu, penulis menggunakan algoritma

buatan sendiri dan studi literatur dari internet. Setelah dipelajari dan dianalisa, maka hasilnya berupa flowchart sebagai berikut :

65

Start

DetikWaktu = DetikWaktu - 1

lblWaktu.Text = CStr(DetikWaktu)

DetikWaktu >= 1 and DetikWaktu <= 5 ? Ya

Tidak

My.Computer.Audio.Play(My. Resources._5Detik, AudioPlayMode.Background)

DetikWaktu = 0

Ya Me.KeyPreview = False

lblInformasi.Text = "Time is Up, Move to Next Question. The Answer is " + "'" + UCase(txtJawaban.Text) + "'."

txtNilai.Text = txtNilai.Text - 5 Tidak Disable tombol a-z


My.Computer.Audio.Play(My. Resources.SelesaiPermainan, AudioPlayMode.Background)

End

Gambar 3.29. Flowchart fungsi waktu.

66

Berikut ini adalah keterangan dari flowchart membuat membuat fungsi waktu: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan pada fungsi waktu.

2.

DetikWaktu = DetikWaktu – 1, objek dari detik waktu dikurang 1.

3.

lblWaktu.Text = CStr(DetikWaktu), objek dari diganti tipe datanya menjadi string.

4.

DetikWaktu >= 1 and DetikWaktu <= 5 ?, jika DetikWaktu lebih besar sama dengan satu dan DetikWaktu kurang dari sama dengan 5 maka lanjut pada proses nomor 5.

5.

My.Computer.Audio.Play(My.Resources._5Detik, AudioPlayMode.Background), memberikan efek suara pada pada saat waktu kurang dari lima detik, efek suara disimpan di dalam file 5Detik.wav

6.

DetikWaktu = 0, jika DetikWaktu sama dengan 0 maka proses lanjut pada nomor 7

7.


8.

lblInformasi.Text = "Time is Up, Move to Next Question. The Answer is " + "'" + UCase(txtJawaban.Text) + "'.", berisi kalimat Time is Up, Move to Next Question. The Answer is, dan jawaban yang benar disimbolkan menggunakan huruf kapital.

9.

txtNilai.Text = txtNilai.Text – 5, objek dari txtNilai.Text dikurang lima

10.

Disable tombol a-z, fungsi tombol dari a-z dimatikan.

67

11.

tmWaktu.Enabled = False, objek dan fungsi tmWaktu tidak dijalankan

12.

My.Computer.Audio.Play(My.Resources.SelesaiPermainan, AudioPlayMode.Background), memberikan efek suara pada pada saat selesai

menjawab,

efek

suara

disimpan

di

dalam

file

SelesaiPermainan.wav 13.

G.

End, akhir dari proses alur fungsi waktu.

Flowchart fungsi maksimal kesempatan Pada

menggunakan

flowchart

membuat

sistem

permainan

fungsi

maksimal

hangman

yang

kesempatan, dibuat

oleh

penulis Ri

Ha

(http://planetsourcecode.com/vb/scripts/ShowCode.asp?txtCodeId=6507&lngWId =10), penulis juga memodifikasinya. Setelah dipelajari dan dianalisa, maka hasilnya berupa flowchart sebagai berikut :

68

Start

Kesempatan = 1 ?

Ya

lblInformasi.Text = "Your Chance is 9 Again, or Next Question"

Kesempatan = 10 ?

Tidak

Ya

Kesempatan = 2 ?

Ya

lblInformasi.Text = "Your No Chance, Move on Next Question." + "Answer is" + "'" + UCase(txtJawaban.Text) + "'."


Tidak

Kesempatan = 3 ?

Ya



Tidak


Kesempatan = 4 ?

Ya

lblInformasi.Text = "Your Chance is 6 Again, or Next Question" Disabled button a-z

Tidak

Kesempatan = 5 ?

Ya


My.Computer.Audio.Play(My.Re sources.SelesaiPermainan, AudioPlayMode.Background)

Tidak

Kesempatan = 6 ?

Ya


Tidak

txtNilai.Text = txtNilai.Text - 5

Tidak

Kesempatan = 7 ?

Ya


MsgBox("Your Fail", MsgBoxStyle.Critical, "Message")

Tidak End Kesempatan = 8 ?

Ya


Kesempatan = 9 ?

Ya


Tidak

Gambar 3.30. Flowchart fungsi maksimal kesempatan.

69

Tidak

Berikut ini adalah keterangan dari flowchart membuat membuat fungsi maksimal kesempatan: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan pada fungsi maksimal kesempatan.

2.

Kesempatan = 1 ?, dilakukan pemeriksaan, jika Kesempatan sudah sama dengan 1, maka proses berlanjut pada nomor 2.

3.

lblInformasi.Text = "Your Chance is 9 Again, or Next Question", akan muncul kalimat Your Chance is 9 Again, or Next Question.

4.


5.


6.


7.


8.


9.


10.


70

11.


12.


13.


14.


15.


16.


17.


18.


19.


20.


21.

lblInformasi.Text = "Your No Chance, Move on Next Question." + "Answer is" + "'" + UCase(txtJawaban.Text) + "'." berisi kalimat Your No Chance, Move on Next Question. Answer is, dan jawaban yang benar disimbolkan menggunakan huruf kapital.

71

22.


23.


24.

Disabled button a-z, fungsi tombol dari a-z dimatikan.

25.

My.Computer.Audio.Play(My.Resources.SelesaiPermainan, AudioPlayMode.Background), memberikan efek suara pada pada saat selesai

menjawab,

efek

suara

disimpan

di

dalam

file

SelesaiPermainan.wav 26.

txtNilai.Text = txtNilai.Text – 5, objek dari txtNilai.Text dikurang lima

27.

MsgBox("Your

Fail",

MsgBoxStyle.Critical,

"Message"),

akan

memberikan pesan melalui MsgBox yang berupa informasi "Your Fail". 28.

H.

End, akhir dari proses alur fungsi maksimal kesempatan.

Flowchart fungsi keyboard jawaban Pada flowchart membuat fungsi keyboard jawaban. Pada permainan

hangman fungsi dari

keyboard jawaban

tidak tersedia, maka penulis

memodifikasinya agar permainan tebak kata Bahasa Inggris lebih interaktif. Setelah dipelajari dan dianalisa, maka hasilnya berupa flowchart sebagai berikut :

72

Start

Dim j As Integer = Asc(KodeKey) - 97

lbDa = True ?

Tidak

btnTebakKata(j).Enabled = False Ya lbDa = False My.Computer.Audio.Play(My. Resources.SuaraHuruf, AudioPlayMode.Background) Kesempatan += 1


MaksKesempatan() Tidak

Ya Tidak

Hadir(btnTebakKata(j) .Text, Titik)?

Titik = Teks.IndexOf(btnTebakKata(j), i)

Kata = Nothing

Ya Coba += 1 lblTebak(Titik).Text =btnTebakKata(j)


Ya Kata = Kata & lblTebak(i).Text Tidak

Kata = Teks ?

Tidak

Ya My.Computer.Audio.Play(My. Resources.Benar, AudioPlayMode.Background)

MsgBox("Your Answer is True", MessageBoxIcon.Information, "Message")


lblInformasi.Text = "Your Answer is True"

Disabled Tombol a-z

lbDa = False

txtNilai.Text = 10 + txtNilai.Text

End


Gambar 3.31. Flowchart fungsi keyboard jawaban.

73

Berikut ini adalah keterangan dari flowchart membuat membuat fungsi keyboard jawaban: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan membuat membuat fungsi keyboard jawaban.

2.

Dim j As Integer = Asc(KodeKey) - 97, deklarasi variabel j menjadi bertipe Integer yang berisi kode ASCII yakni dimulai dari 97 yaitu “a”.

3.

btnTebakKata(j).Enabled = False, objek btnTebakKata tidak difungsikan yang beralamatkan array (j).

4.

My.Computer.Audio.Play(My.Resources.SuaraHuruf, AudioPlayMode.Background), memberikan efek suara pada setiap tombol apabila diklik, efek suara disimpan di dalam file SuaraHuruf.wav.

5.

i=0, apakah sudah sampai “PanjangTeks -1” ?, ?, i dideklarasikan menjadi 0, dan dilakukan pemeriksaan apakah batasan PanjangTeks -1. Apabila i=0 sudah sampai pada batasan PanjangTeks -1, maka proses berlanjut pada nomor 6.

6.

Titik = Teks.IndexOf(btnTebakKata(j), i), variabel Titik menyimpan indeks dari variabel Teks yang berisi objek btnTebakKata yang beralamatkan array (j) sampai i=PanjangTeks-1.

7.

Hadir(btnTebakKata(j), Titik) ?, variabel Hadir apakah berisi alamat array btnTebakKata array (j) dan Titik?, jika variabel Hadir telah terisi alamat array btnTebakKata array (j) dan Titik, maka proses berlanjut pada nomor 8.

74

8.

lblTebak(Titik).Text = btnTebakKata(j), objek lblTebak.Text

yang

mempunyai alamat array (Titik) menyimpan isi objek btnTebakKata berlamatkan array(j). 9.

i=0, apakah sudah sampai “PanjangTeks -1” ?, i dideklarasikan menjadi 0, dan dilakukan pemeriksaan apakah batasan PanjangTeks -1. Apabila i=0 sudah sampai pada batasan PanjangTeks -1, maka proses berlanjut pada nomor 10.

10.

Kata = Kata & lblTebak(i).Text, variabel Kata digabung dengan objek lblTebak.Text yang memiliki alamat array i.

11.

Kata = Teks ?, jika variabel Kata sama dengan Teks, maka proses berlanjut pada nomor 12.

12.

My.Computer.Audio.Play(My.Resources.Benar, AudioPlayMode.Background), memberikan efek suara pada setiap tombol apabila diklik, efek suara disimpan di dalam file Benar.wav.

13.

Me.KeyPreview = False, objek frmUtama memiliki fungsi KeyPrewview dimatikan.

14.

Disabled Tombol a-z, objek tombol a-z tidak berfungsi.

15.

txtNilai.Text = 10 + txtNilai.Text, objek txtNilai ditambah sepuluh.

16.


17.

MsgBox("Your

Answer

is

True",

MessageBoxIcon.Information,

"Message"), memberikan pesan melalui MsgBox yang berupa informasi “Your Answer is True". 18.

lblInformasi.Text = "Your Answer is True", objek lblInformasi.Text berisi kalimat "Your Answer is True".

75

19.


20.

lbDa = True ?, jika variabel lbDa bernilai True, maka proses berlanjut pada nomor 21.

21.


22.

Kesempatan += 1, variabel Kesempatan ditambah satu.

23.

MaksKesempatan(), memanggil fungsi MaksKesempatan.

24.

Kata = Nothing, variabel Kata isinya dikosongkan.

25.

Coba += 1, variabel Coba ditambah satu.

26.

End, akhir dari proses alur membuat fungsi keyboard jawaban.

I.

Flowchart fungsi KeyPress menu utama Pada flowchart membuat fungsi KeyPress menu utama. Pada permainan

hangman fungsi dari KeyPress menu utama tidak tersedia. Fungsi KeyPress memanggil fungsi keyboard jawaban yang berguna untuk user menjawab menggunakan keyboard. Oleh karena itu, penulis memodifikasinya agar permainan tebak kata Bahasa Inggris lebih interaktif. Setelah dipelajari dan dianalisa, maka hasilnya berupa flowchart sebagai berikut :

76

Start

(e.KeyChar >= ChrW(0) And e.KeyChar <= ChrW(96)) Or (e.KeyChar >= ChrW(123) And e.KeyChar <= ChrW(255)) ?

Tidak

KeyTekan(e.KeyChar)

Ya MsgBox("Please Press Button 'a-z' don't 'A-Z'", MsgBoxStyle.Information, "Message")

End

Gambar 3.32. Flowchart fungsi KeyPress menu utama.

Berikut ini adalah keterangan dari flowchart membuat membuat fungsi KeyPress menu utama: 1.

Start, yaitu sebagai awal dari proses alur atau permulaan pada fungsi KeyPress menu utama.

2.

(e.KeyChar >= ChrW(0) And e.KeyChar <= ChrW(96)) Or (e.KeyChar >= ChrW(123) And e.KeyChar <= ChrW(255)) ?, dilakukan pemeriksaan, jika yang diinput bilangan ASCII pada keyboard, dari batasan lebih besar sama dengan 0 dan lebih kecil sama dengan 96, atau lebih besar sama dengan 123 dan lebih kecil sama dengan 255, maka proses akan berlanjut pada tahap nomor 3.

3.

MsgBox("Please Press Button 'a-z' don't 'A-Z'", MsgBoxStyle.Information, "Message"), memberikan pesan melalui MsgBox yang berupa informasi “Please Press Button 'a-z' don't 'A-Z'".

77

4.

KeyTekan(e.KeyChar), memanggil fungsi KeyTekan yang dijalankan melalui objek e.KeyChar.

5.

End, akhir dari proses alur fungsi KeyPress menu utama.

3.3.

Rancangan Layar Antar Muka Rancangan tampilan antar muka adalah sketsa awal dari tampilan aplikasi

yang akan dibuat. Berikut ini adalah rancangan tampilan dari pengembangan aplikasi permainan tebak kata Bahasa Inggris hangman.

3.3.1. Rancangan Layar Antar Muka Menu Utama

Gambar 3.33. Perancangan menu utama.

78

Rancangan ini merupakan tampilan pertama dari aplikasi. Pada layar menu ini terdapat: 1.

Pojok kiri atas terdapat File yang berisikan sub menu yaitu New Game, Rename dan Exit dan Help yang berisikan sub menu Instruction dan Author.

2.

Terdapat tulisan “Answer:” dan gambar “_” , gambar “_” merupakan tempat untuk jawaban.

3.

Terdapat TextBox dibawah tulisan “Question”. TextBox tersebut berisi pertanyaan atau soal.

4.

Terdapat TextBox setelah tulisan “Score:”. TextBox tersebut akan berisi nilai yang didapat.

5.

Terdapat tombol A-Z. Tombol tersebut digunakan untuk menjawab pertanyaan.

6.

Terdapat label yang bertuliskan “Information”. “Information” berisikan informasi apabila kita lebih dari 10 kali mengklik tombol huruf dan berisikan jawaban yang benar apabila salah dalam menjawab.

7.

Terdapat label yang bertuliskan “Time Left” yang merupakan waktu mundur untuk menjawab pertanyaan.

8.

Terdapat tombol yang bertuliskan “Start” yang digunkan untuk memulai permainan.

9.

Terdapat tombol yang bertuliskan “Next Question” yang digunakan untuk melanjutkan permainan.

10.

Terdapat gambar yang merupakan logo dari Tia’s Quiz.

11.

Terdapat “ProgressBar” yang merupakan tanda apabila soal akan muncul.

79

3.3.2. Rancangan Layar Antar Muka Menu Username

Gambar 3.34. Perancangan menu username.

Rancangan ini merupakan layar kedua dari aplikasi permainan tebak kata Bahasa Inggris. Layar ini dipanggil ketika user pertama kali memulai permainan dan ketika user mengganti nama username. Pada layar menu login ini terdapat: 1.

Pada bagian atas terdapat gambar yang merupakan logo dari Tia’s Quiz.

2.

Pada bagian tengah terdapat tulisan “username” dan kotak pada sebelah kanannya. Kotak tersebut harus terlebih dahulu diisi oleh user sebelum masuk pada menu berikutnya.

3.

Terdapat tombol yang bertuliskan OK. Tombol OK diggunakan untuk memulai permainan setelah user menginput username.

80

3.3.3. Rancangan Layar Antar Muka Menu Instruksi

Gambar 3.35. Perancangan menu instruksi.

Rancangan ini merupakan layar ketiga dari aplikasi. Tampilan ini dapat dipanggil kapan saja. Pada layar menu instruksi ini terdapat: 1.

Pada bagian atas terdapat gambar yang merupakan logo dari Tia’s Quiz.

2.

Terdapat TextBox. TextBox tersebut akan berisi instruksi sebelum bermain.

3.

Terdapat tombol yang bertulisan “Ok”. Tombol tersebut digunakan apabila user masuk pada menu utama.

81

BAB III ANALISA DAN PERANCANGAN. aplikasi atau sistem. Pada tahapan ini penulis akan melakukan analisa terhadap

Recommend Documents