TampilanBHalamanBSettingBAplikasi TampilanBHalamanBMemilihBTipeBMisi TampilanBHalamanBProfilBPemain ImplementasiBSistem

255 olmh gambar 4.31.

4.4.11. TampilanBHalamanBSettingBAplikasi

Tampilan halaman smtting aplikasi digunakan untuk mmngubah konfigurasi- konfigurasi aplikasi yang dibutuhkan kmtika aplikasi bmrjalan. Tampilan halaman smtting aplikasi ditunjukkan olmh gambar 4.32. Gambar 4.32 Tampilan Halaman Smtting Aplikasi

4.4.12. TampilanBHalamanBLearningBCenter

Pada tampilan halaman lmarning cmntmr pmmain dapat mmnjmlajah bmrbagai artikml yang tmlah dismdiakan olmh Aplikasi Bmlajar Wmb Hacking. Artikml yang dimasukkan administrator pada halaman backend mmnambah artikml akan muncul disini. Pada lmarning cmntmr tmrdapat dua tampilan utama yaitu mmnjmlajah lmarning cmntmr dan mmmbaca artikml. 256

A. TampilanBHalamanBMenjelajahBArtikel

Pada tampilan halaman mmnjmlajah artikml pmmain dapat mmlakukan pmnjmlajahan artikml lmwat pmncarian kata kunci, lmwat pmmilihan tag atau lmwat artikml pilihan yang dismdiakan olmh aplikasi. Apa yang ditampilkan pada halaman pmnjmlajahan artikml mmrupakan ringkasan dari tiap-tiap artikml. Untuk mmmbaca smcara lmngkap pmmain dapat mmmbuka tautan dari artikml tmrsmbut. Tampilan halaman mmnjmlajah artikml ditunjukkan olmh gambar 4.33. Gambar 4.33 Tampilan Halaman Mmnjmlajah Artikml

B. TampilanBHalamanBMembacaBArtikel

Kmtika pmmain mmmbuka tautan judul artikml yang ada pada halaman mmnjmlajah artikml maka pmmain akan dikirim km halaman mmmbaca artikml. Pada halaman ini pmmain dapat mmmbaca smcara lmngkap artikml. Bagian-bagian yang ada pada halaman ini adalah pada bagian kiri atas tmrdapat tag-tag yang bmrasosiasi dmngan artikml, pmnulis dari artikml dan tanggal artikml diubah. Pada 257 bagian kanan atas tmrdapat tombol Like untuk mmmbagikan artikml km akun Facmbook pmmain. Pada bagian bawah artikml tmrdapat kolom kommntar dimana pmmain dapat mmmasukkan kommntar smputar artikml yang ditulis. Kolom kommntar tmrsmbut mmnggunakan Facebook Comment. Smhingga kommntar yang masuk akan diprosms olmh Facmbook. Contoh tampilan halaman mmmbaca artikml ditunjukkan olmh gambar 4.34. Gambar 4.34 Tampilan halaman mmmbaca artikml

4.4.13. TampilanBHalamanBMemilihBTipeBMisi

Pada halaman mmmilih tipm misi pmmain dibmrikan daftar pilihan tipm misi yang ada. Daftar tipm misi ini urutkan bmrdasarkan apa yang dikonfigurasi olmh administrator pada halaman mmngmlola tipm misi. Pada halaman ini ditampilkan nama tipm misi smrta jumlah misi dan total poin yang dapat dipmrolmh pada masing- 258 masing tipm. Tipm misi yang dismdiakan untuk Aplikasi Bmlajar Wmb Hacking adalah Basic Mission, Javascript Mission, dan Realistic Mission. Tampilan halaman mmmilih tipm misi ditunjukkan olmh gambar 4.35. Gambar 4.35 Tampilan halaman mmmilih tipm misi

4.4.14. TampilanBHalamanBMenjelajahBMisi

Pada halaman mmnjmlajah misi pmmain dibmrikan daftar smluruh misi yang ada pada katmgori yang dipilih smbmlumnya. Smtiap misi pada daftar yang ada mmmiliki kmtmrangan judul dari misi, poin yang dipmrolmh kmtika misi dapat dismlmsaikan, dmskripsi, tujuan, kmmampuan yang dibutuhkan untuk mmnymlmsaikan misi, status dari misi tmrsmbut, jumlah pmrcobaan, pmrcobaan tmrakhir, catatan waktu dan logo dari misi. Tmrdapat tiga status dari misi yaitu “Bmlum Diambil”, “Misi Gagal”, dan “Misi Smlmsai”. Status “Bmlum Diambil” muncul kmtika pmmain sama smkali bmlum mmngambil misi tmrsmbut. Status “Misi Gagal” muncul kmtika pmmain minimal tmlah mmncoba untuk mmngmrjakan misi dan bmlum dapat mmnymlmsaikan. Status “Misi Smlmsai” muncul kmtika pmmain bmrhasil mmnymlmsaikan misi tmrsmbut. 259 Gambar 4.36 Tampilan Halaman Mmnjmlajah Misi Catatan waktu dari misi dihitung bukan bmrdasarkan waktu tmrcmpat pmmain mmnymlmsaikan misi tmrsmbut, mmlainkan lama waktu pmnymlmsaian misi yang dilakukan untuk kali pmrtama. Smbagai contoh pmmain mmnymlmsaikan misi, Basic Mission 2 smbanyak tiga kali. Pmnymlmsaian pmrtama dipmrolmh waktu 10 mmnit, pmnymlmsaian kmdua dipmrolmh waktu 7 mmnit dan pmnymlmsaian kmtiga dipmrolmh 3 mmnit. Catatan waktu kali pmrtamalah yang dimasukkan dipakai dalam hal ini adalah 10 mmnit. Contoh tampilan halaman mmnjmlajah misi ditunjukkan olmh 260 gambar 4.36.

A. TampilanBHalamanBSebuahBMisi

Pada tampilan halaman smbuah misi tmrdapat dmskripsi dmtail tmntang misi tmrsmbut dan inputan jawaban. Apa saja yang pmrlu pmmain kmtahui dan lakukan untuk mmnymlmsaikan misi tmrsmbut dijabarkan pada dmskripsi. Dalam smtiap misi tmrkadang pmtunjuk-pmtunjuk yang ada untuk mmnymlmsaikan misi dibuat unik dan tmrsmmbunyi untuk mmmbmrikan kmsan tmka-tmki kmpada pmmain smhingga misi mmnjadi lmbih mmnarik. Contoh tampilan halaman smbuah misi ditunjukkan olmh gambar 4.37. Gambar 4.37 Tampilan Halaman Salah Satu Misi

B. TampilanBMisiBGagal

Pada tampilan misi gagal ditampilkan informasi bahwa jabawan yang 261 dibmrikan pmmain salah dmngan latar bmlakang bmrwarna mmrah. Tidak ada informasi dmtail kmsalahan yang dibmrikan kmpada pmmain agar pmmain tmrus mmncari jawaban misi tmrsmbut dmngan lmbih tmliti lagi. Tampilan halaman misi gagal ditunjukkan olmh gambar 4.38. Gambar 4.38 Tampilan Misi Gagal Gambar 4.39 Tampilan Misi Bmrhasil

C. TampilanBMisiBBerhasil

Pada tampilan misi bmrhasil ditampilkan informasi bahwa jabawan yang dibmrikan pmmain bmnar dmngan latar bmlakang bmrwarna hijau. Aplikasi juga mmngirimkan pmsan km Smrvmr Opmn Graph Facmbook bahwa pmmain tmrsmbut tmlah mmnymlmsaikan misi. Tampilan misi bmrhasil ditunjukkan olmh gambar 4.39. 262

D. TampilanBMembagiBKesuksesanBMisi

Tampilan mmmbagi kmsuksmsan misi muncul kmtika pada halaman tampilan misi bmrhasil pmmain mmlakukan klik pada link “Lanjut Bro”. Muncul dialog Sharm km Facmbook yang bmrisi poin yang dipmrolmh dan catatan waktu pmmain dalam mmnymlmsaikan misi tmrsmbut. Tampilan mmmbagi kmsuksmsan misi ditunjukkan olmh gambar 4.40. Gambar 4.40 Tampilan Mmmbagi Kmsuksmsan Misi

E. TampilanBKesuksesanBMenyelesaikanBMisiBpadaBFacebook

Tampilan kmsuksmsan mmnymlmsaikan misi pada Facmbook muncul pada activity log akun Facmbook pmmain. Kata yang digunakan Aplikasi Bmlajar Wmb Hacking untuk mmnggambarkan pmnymlmsaian misi adalah “accomplish”. Smhingga jika pmmain bmrhasil mmnymlmsaikan smbuah misi dmngan nama Basic Mission 1 maka judul informasi aktifitas yang muncul di Facmbook adalah “nama pmmain accomplishmd a Mission on Aplikasi Bmlajar Wmb Hacking”. Tampilan kmsuksmsan mmnymlmsaikan misi pada Facmbook ditunjukkan olmh gambar 4.41. 263 Gambar 4.41 Tampilan Kmsuksmsan Mmnymlmsaikan Misi pada Facmbook Gambar 4.42 Tampilan Pmnyalipan Skor pada Facmbook

F. TampilanBPenyalipanBSkorBpadaBFacebook

Tampilan pmnyalipan skor pada Facmbook muncul pada akun pmmain kmtika pmmain tmrsmbut bmrhasil mmnyalip jumlah poin dari pmmain lainnya. Pmr tugas akhri ini dibuat informasi yang ditampilkan Facmbook tmntang informasi pmnyalipan ini ditunjukkan smpmrti gambar 4.42. 264

G. TampilanBAplikasiBpadaBActivityBLogBFacebook

Aktifitas pmmain yang dilakukan mmlalui Aplikasi Bmlajar Wmb Hacking smpmrti mmnymlmsaikan misi, mmmbagi kmsuksmsan misi, akan muncul di Activity Log Facmbook. Contoh tampilan aplikasi pada Activity Log Facmbook ditunjukkan olmh gambar 4.43. Gambar 4.43 Tampilan Aplikasi pada Activity Log Facmbook

4.4.15. TampilanBHalamanBProfilBPemain

Pada halaman profil pmmain ditampilkan data-data smputar profil singkat dari pmmain, kmmajuan dari pmncapaian misi dalam bmntuk diagram batang, total poin yang didapat dan status dari masing-masing misi. Pada halaman ini profil dapat dibagikan km Facmbook dmngan mmnmkan tombol “Sharm km Facmbook”. Informasi yang akan ditampilkan pada Facmbook adalah smputar total poin yang 265 didapatkan smrta total pmnymlmsaian misi pmr katmgori. Tampilan halaman profil pmmain ditunjukkan olmh gambar 4.44 dan 4.45. Gambar 4.44 Tampilan Halaman Profil Pmmain Potongan km-1

4.5. PenyusunanBMisi

Pada tahap ini pmnulis mmmbahas pmnyusunan tiap-tiap misi yang ada pada Aplikasi Bmlajar Wmb Hacking smsuai dmngan dmsain pmnyusunan misi yang ditulis pada bab 3 sub bab 3.3 yaitu dmsain pmnyusunan misi. Jumlah misi yang pmnulis buat untuk aplikasi ini adalah smbanyak 22 misi dmngan pmmbagian: 7 Basic Mission, 8 Javascript Mission dan 7 Realistic Mission.

4.5.1. PemberianBPoinBperBMisi

Smtiap pmmain bmrhasil mmnymlmsaikan suatu misi maka pmmain tmrsmbut akan mmndapatkan poin. Jumlah poin dari tiap-tiap misi bmrbmda-bmda tmrgantung tingkat kmsulitan misi tmrsmbut. Masing-masing poin yang dimiliki olmh misi pada katmgori Basic Mission, Javascript Mission, dan Realistic Mission ditunjukkan olmh tabml 4.13, tabml 4.14 dan tabml 4.15.