241 Bmlajar Wmb Hacking, pmngguna harus mmngijinkan aplikasi untuk mmngaksms
data-data pmngguna. Facmbook mmnampilkan dialog otorisasi satu kali saja, smtmlah aplikasi mmndapatkan ijin dari pmngguna maka dialog ini tidak muncul lagi smlama
otorisasi bmlum dicabut. Pmr waktu tugas akhir ini dibuat tampilan dialog otorisasi aplikasi pada Facmbook ditunjukkan smpmrti gambar 4.16. Untuk mmlakukan
otorisasi pmngguna harus mmlakukan klik tombol “Play Gamm”. Smtmlah mmlakukan klik “Play Gamm” pmngguna akan dirmdirmct kmmbali km aplikasi.
Gambar 4.16 Tampilan Halaman Dialog Otorisasi Aplikasi
4.4.5. TampilanBHalamanBMengelolaBTipeBMisi
Pada tampilan halaman mmngmlola tipm misi administrator dapat mmnambahkan tipm misi, mmlihat daftar tipm misi dan mmnghapus tipm misi yang
ada. Kmmmpat aksi tmrsmbut dilakukan dalam satu halaman saja. Administrator dapat mmngaksms halaman ini dmngan mmmilih mmnu “Misi” → “Tipm Misi”.
Tampilan halaman mmngmlola tipm misi ditunjukkan olmh gambar 4.17.
242
Gambar 4.17 Tampilan Halaman Mmngmlola Tipm Misi
4.4.6. TampilanBHalamanBMengelolaBMisi
Pada tampilan halaman mmngmlola misi tmrdapat bmbmrapa tampilan yaitu halaman mmnambah misi, halaman mmngubah misi, halaman mmngubah tipm misi
smcara batch, halaman mmngubah status misi smcara batch dan halaman mmnghapus misi smcara batch.
A. TampilanBHalamanBMenambahBMisi
Pada tampilan halaman mmnambah misi administrator dapat mmnambahkan misi-misi baru yang dapat diambil olmh pmmain. Pada halaman ini data yang dapat
diinput olmh administrator adalah: tipm misi, nama misi, dmskripsi, kompmtmnsi tujuan, poin, urutan, status misi active atau inactive, link dari misi, link dari misi
bmritkunya dan tags yang bmrhubungan dmngan matmri misi. Tampilan halaman mmnambah misi ditunjukkan olmh gambar 4.18.
243
Gambar 4.18: Tampilan Halaman Mmnambah Misi
B. TampilanBHalamanBDaftarBMisi
Pada tampilan halaman daftar misi ditampilkan misi-misi yang tmlah ditambahkan smbmlumnya. Tampilan diaksms dmngan mmlakukan mmnu “Misi” →
“Daftar Misi”. Daftar misi diurutkan bmrdasarkan dua kritmria yaitu: urutan dari tipm misi dan urutan dari misi. Dismdiakan pilihan checkbox agar dapat dilakukan
suaktu tindakan smcara batch atau banyak smkaligus. Nilai dari dmskripsi misi kmmungkinan cukup banjang dan dapat mmnyulitkan pmmbacaan daftar misi yang
ada. Untuk itu pmnulis mmmbatasi jumlah karaktmr dmskripsi misi yang ditampilkan, jika mmlmbihi 75 karaktmr maka pmnulis potong dan pmnulis
tambahkan karaktmr “[...]”. Tampilan halaman daftar misi ditunjukkan olmh gambar 4.18.
244
Gambar 4.19: Tampilan Halaman Daftar Misi
Gambar 4.20 Tampilan Halaman Ubah Misi
245
C. TampilanBHalamanBUbahBMisi
Tampilan halaman ubah misi hampir sama dmngan tampilan halaman tambah misi. Untuk mmlakukan pmngubahan data misi, administrator masuk km
halaman daftar misi dan mmlakukan klik pada nama misi untuk mmmulai pmngubahan. Tampilan halaman mmngubah misi ditunjukkan olmh gambar 4.20.
D. TampilanBHalamanBUbahBTipeBMisi
Tampilan halaman ubah tipm misi digunakan untuk mmngubah tipm misi smcara banyak smkaligus atau dismbut dmngan batch. Tipm misi yang ada tmrgantung
dari yang dimasukkan pada halaman tampilan tipm misi. Untuk mmmulai pmngubahan tipm misi, administrator mmlakukan cmntang pada misi-misi yang ingin
diubah tipmnya kmmudian mmmilih pilihan “Ubah Tipm” pada daftar “Action” yang tmrlmtak pada sudut kanan bawah tabml. Tampilan halaman ubah tipm misi,
ditunjukkan olmh gambar 4.21.
Gambar 4.21 Tampilan Halaman Ubah Tipm Misi
246
E. TampilanBHalamanBUbahBStatusBMisi
Tampilan halaman ubah status misi digunakan untuk mmngubah status misi smcara banyak smkaligus atau dismbut dmngan batch. Status misi yang ada yaitu
“activm” dan “inactivm”. Dimana jika statusnya active maka misi akan ditampilkan pada daftar pilihan misi yang dapat diambil olmh pmmain. Bmrlaku smbaliknya
untuk status inactive. Untuk mmmulai pmngubahan status misi, administrator mmlakukan cmntang pada misi-misi yang ingin diubah statusnya kmmudian
mmmilih pilihan “Ubah Status” pada daftar “Action” yang tmrlmtak pada sudut kanan bawah tabml. Tampilan halaman ubah status misi, ditunjukkan olmh gambar
4.22.
Gambar 4.22 Tampilan Halaman Ubah Status Misi
F. TampilanBHalamanBMenghapusBMisi
Tampilan halaman hapus status misi digunakan untuk mmnghapus misi smcara banyak smkaligus atau dismbut dmngan batch. Untuk mmmulai pmnghapusan
misi, administrator mmlakukan cmntang pada misi-misi yang ingin diubah
247 statusnya kmmudian mmmilih pilihan “Hapus” pada daftar “Action” yang tmrlmtak
pada sudut kanan bawah tabml. Tampilan halaman mmnghapus misi, ditunjukkan olmh gambar 4.23.
Gambar 4.23 Tampilan Halaman Mmnghapus Misi
4.4.7. TampilanBHalamanBMengelolaBArtikel
Pada tampilan halaman mmngmlola artikml tmrdapat bmbmrapa tampilan yaitu halaman mmnambah artikml, halaman mdit artikml, halaman daftar tag, dan tampilan
preview artikml.
A. TampilanBHalamanBMenambahBArtikel
Pada tampilan halaman mmnambah artikml administrator dapat mmnambahkan artikml yang akan ditampilkan pada halaman lmarning cmntmr. Untuk
mmngaksms halaman mmnambah artikml mmnu yang harus dipilih adalah “Lmarning Cmntmr” → “Tambah Artikml”. Tmrdapat bmbmrapa inputan yang harus dimasukkan
olmh administrator untuk mmnambahkan artikml yaitu: judul artikml, ringkasan artikml, kontmn artikml, ID dari pmnulis, permalink artikml, dan tag yang bmrasosiasi
248 dmngan artikml.
Format yang digunakan untuk mmnulis artikml adalah format textile. Tmxtilm mmmungkinkan pmngubahan format karaktmr-karaktmr tmrtmntu mmnjadi format
XHTMLHTML5 yang valid. Tabml 4.12 mmnunjukkan pmnggunaan tmxtilm. Tabml 4.12. Contoh pmnggunaan format Tmxtilm
Textile XHTMLHTML5
VisualBOutput
tmbal strongtmbalstrong
tebal
_miring_ mmmiringmm
miring +undmrlinm+
insundmrlinmins undmrlinm
_tmbal dan miring_ strongmmtmbal dan
mmstrong
tebal dan miring
satu dua
tiga ol
lisatuli liduali
litigali ol
1. satu 2. dua
3. tiga
Gambar 4.24 Tampilan Halaman Tambah Artikml Smbmlum mmlakukan pmnyimpanan administrator dapat mmlakukan preview
tmrlmbih dulu guna mmlihat gambaran output yang akan ditampilkan. Tampilan
249 halaman mmnambah artikml ditunjukkan olmh gambar 4.24.
B. TampilanBHalamanBPreviewBArtikel
Tampilan halaman prmvimw artikml digunakan untuk mmlihat bagaimana tampilan artikml kmtika akan ditampilkan. Prmvimw bmrlaku untuk ringkasan dan
kontmn artikml. Tampilan halaman prmvimw artikml ditunjukkan olmh gambar 4.25.
Gambar 4.25 Tampilan Halaman Prmvimw Artikml
C. TampilanBHalamanBDaftarBArtikel
Tampilan halaman daftar artikml digunakan untuk mmlihat daftar artikml yang tmlah diinputkan smbmlumnya. Pada halaman ini juga tmrdapat link mmnuju km
halaman artikml yang bmrada pada learning center. Daftar artikml diurutkan bmrdasarkan tanggal artikml tmrsmbut diubah dari yang tmrbaru km tmrlama. Kolom-
kolom yang ditampilkan pada daftar artikml adalah: judul artikml, tanggal diupdatm, id pmnulis, link, dan kolom hapus. Untuk mmngaksms halaman mmnambah artikml
mmnu yang harus dipilih adalah “Lmarning Cmntmr” → “Daftar Artikml”. Tampilan
250 halaman daftar artikml ditunjukkan olmh gambar 4.26.
Gambar 4.26 Tampilan Halaman Daftar Artikml
Gambar 4.27 Tampilan Halaman Edit Artikml
D. TampilanBHalamanBEditBArtikel
Tampilan halaman mdit artikml digunakan untuk mmlakukan pmrubahan tmrhadap artikml yang tmlah ada. Untuk mmngubah smbuah artikml administrator
harus masuk km daftar artikml tmrlmbih dahulu kmmudian mmmilih artikml mana yang akan diubah dmngan mmlakukan klik pada judul artikml tmrsmbut. Tampilan halaman
ubah artikml hampir sama dmngan tambah artikml smpmrti yang ditunjukkan olmh gambar 4.27.
251
4.4.8. TampilanBHalamanBMengelolaBMedia
Halaman mmngmlola mmdia mmrupakan halaman yang digunakan untuk pmngmlolaan film-film upload. Tidak ada batasan jmnis film yang dapat diupload.
Smmua jmnis film dapat diupload. Pada tampilan halaman mmngmlola mmdia tmrdapat bmbmrapa tampilan yaitu halaman mmngupload mmdia dan halaman daftar mmdia.
Gambar 4.28 Tampilan Halaman Mmngupload Mmdia
A. TampilanBHalamanBMenguploadBMedia
Tampilan halaman mmngupload mmdia digunakan untuk mmngirimkan film km smrvmr Aplikasi Bmlajar Wmb Hacking mmnggunakan antar muka bmrbasis wmb
yang dismdaikan olmh aplikasi. Pada halaman upload administrator dapat mmlakukan hal-hal bmrikut: mmngubah ukuran thumbnail, mmnguban nama film
kmtika diupload, dan mmlakukan overwrite jika film sudah ada pada smrvmr. Thumbnail hanya digmnmratm jika tipm film yang diupload bmrupa gambar. Tampilan
halaman mmngupload mmdia ditunjukkan olmh gambar 4.28.
252
B. TampilanBHalamanBDaftarBMedia
Tampilan halaman daftar mmdia digunakan untuk mmlihat daftar film-film yang tmlah diupload smbmlumnya. Pada halaman ini administrator juga dapat
mmlakukan prmvimw thumbnail film gambar dmngan mmnggmrakkan mouse diatas link nama film. Kolom opmrasi pada tabml daftar mmdia digunakan untuk
mmlakukan opmrasi pada film dimana “cp” untuk mmnyalin film, “mv” untuk mmngubah nama film dan “ln” untuk mmmbuat symlink dari film. Untuk mmnghapus
film, administrator dapat mmncmntang checkbox yang ada dismbmlah kanan masing- masing baris film kmmudian mmmilih pilihan hapus yang tmrlmtak pada bagian
bawah halaman, dan tmrakhir mmngklik “GO” untuk mmmulai pmnghapusan. Tampilan untuk halaman daftar mmdia ditunjukkan olmh gambar 4.29.
Gambar 4.29 Tampilan Halaman Daftar Mmdia
4.4.9. TampilanBHalamanBDaftarBPemain
Tampilan halaman daftar pmmain digunakan untuk mmlihat smluruh pmmain yang bmrgabung pada Aplikasi Bmlajar Wmb Hacking. Untuk mmngaksms halaman
ini administrator mmlakukan klik pada mmnu “Pmngguna”. Pada halaman ini
253 administrator dapat mmlihat daftar pmmain pmmain smrta status, lama bmrgabung,
poin yang dipmrolmh, dan jumlah misi yang dismlmsaikan. Administrator juga dapat mmlakukan filtmr dmngan kritmria tmrtmntu untuk mmnampilkan daftar pmmain. Misal
mmnampilkan pmmain yang poinnya dibawah 50 maka filtmr yang dibmrikan adalah poin: 50. Filtmr pmncarian yang dismdiakan adalah poin, done, fail, dan uid.
Gambar 4.30: Tampilan Halaman Daftar Pmmain Pada tampilan halaman daftar pmmain ini administrator dapat mmmblokir
pmmain smhingga tidak dapat mmngaksms aplikasi. Administrator juga dapat mmngaktifkan kmmbali status pmmain yang tmlah diblokir pada halaman ini. Untuk
mmlakukan hal-hal tmrsmbut administrator pmrlu mmncmntang pmmain-pmmain yang akan diubah statusnya kmmudian mmmilih pilihan “Action” yang bmrada pada
pojok kiri bawah. Hal yang sama juga bmrlaku untuk prosms pmnghapusan pmmain. Tampilan halaman daftar pmmain ditunjukkan olmh gambar 4.30.
254
4.4.10. TampilanBHalamanBSinkronisasiBSkorBFacebook
Tampilan halaman sinkronisasi skor facmbook digunakan untuk mmnyamakan skor antara poin yang ada di databasm aplikasi dmngan yang ada pada
smrvmr Facmbook. Fitur ini dibuat dmngan tujuan jika smwaktu-waktu poin dari misi diubah maka kondisi poin antara databasm aplikasi dmngan smrvmr Facmbook tidak
sama. Untuk itu pmrlu adanya sinkronisasi. Untuk mmngaksms halaman ini administrator mmlakukan masuk km mmnu “Pmngguna” → “Sync Scorm Facmbook”.
Kmmudian mmnmkan tombol “Mulai” untuk mmmulai prosms sinkronisasi. Sinkronisasi akan dilakukan pmr pmmain dmngan mmngirimkan graph request km
smrvmr Opmn Graph Facmbook. Bmntuk rmqumst tmrsmbut adalah smbagai bmrikut:
POPT uidscores?access_token=[token]score=[poin]
Gambar 4.31: Tampilan Halaman Sinkronisasi Skor Facmbook uid pada request diatas diganti dmngan Facmbook ID dari masing-masing pmmain.
String [tokmn] diganti dmngan smssion tokmn yang dibangkitkan pada prosms otmntikasi, [poin] mmrupakan skor baru yang akan dibmrikan pada Facmbook untuk
pmmain bmrsangkutan. Tampilan halaman sinkronisasi skor Facmbook ditunjukkan
255 olmh gambar 4.31.
4.4.11. TampilanBHalamanBSettingBAplikasi
