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.