Team project 2017 Dony Pratidana S. Hum Bima Agus Setyawan S. IIP

(1)

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work

non-commercially, as long as you credit the origin creator

and license it on your new creations under the identical

terms.

(2)

BAB III

METODE PENELITIAN DAN PERANCANGAN SISTEM

3.1 Metodologi Penelitian

Dalam penelitian ini, metodologi penelitian yang dilakukan adalah sebagai berikut.

1. Studi Literatur

Studi literatur merupakan tahapan untuk mempelajari dan memahami referensi-referensi yang berkaitan dengan teori-teori yang menjadi dasar perancangan dan pembangunan dalam aplikasi ini. Teori-teori tersebut meliputi matematika, metode gamifikasi, Octalysis framework, HMSAM, dan skala Likert.

2. Perancangan Sistem

Sistem yang dibangun terdiri dari aplikasi mobile, application programming interface (API), dan content management system (CMS) berbasis web. Pada tahapan perancangan sistem akan dibuat perancangan-perancangan meliputi perancangan gamifikasi, Perancangan Data Flow Diagram, perancangan flowchart dan perancangan desain antarmuka (user interface).

3. Pembuatan Sistem

Pembuatan aplikasi menggunakan Visual Studio Code. Bahasa pemrograman yang digunakan adalah bahasa pemrograman Typescript. Aplikasi dibuat untuk perangkat Android. Pembuatan website admin atau CMS dan API menggunakan bahasa pemrograman PHP, Javascript, HTML, CSS, framework Code Igniter, dan Grocery CRUD.

(3)

4. Pengujian Aplikasi

Pengujian aplikasi dilakukan dengan menggunakan white box testing. Metode tersebut digunakan untuk memfokuskan pengujian terhadap minimalis kesalahan fungsionalitas sistem secara keseluruhan. Pengujian dilakukan dengan mencoba setiap fungsionalitas yang dipakai dari sistem yang dirancang dan dibuat.

5. Evaluasi

Pada tahap evaluasi, dilakukan menggunakan metode studi lapangan, dimana akan dipilih sampel dengan metode purposive sampling, yaitu siswa yang ingin belajar matematika SMP dengan menggunakan aplikasi mobile sebanyak 30 atau lebih. Pengujian ini dilakukan untuk mengetahui tingkat behavioral intention to use dan tingkat immersion dengan menggunakan Hedonic Motivation System Adoption Model (HMSAM). Data yang diperlukan dalam pengujian aplikasi didapat dari kuesioner yang diberikan kepada pengguna. Dari hasil kuesioner disimpulkan melalui penggunaan skala Likert lima tingkat agar dapat mengukur kegunaan dari penggunaan sistem pembelajaran matematika SMP dengan metode gamifikasi.

3.2 Rancangan Gamifikasi

Dalam penelitian ini, perancangan gamifikasi menggunakan Octalysis framework. Penggunaan Octalysis framework di dalam aplikasi mobile pembelajaran matematika SMP adalah sebagai berikut.

1. Epic Meaning & Calling

Teknik permainan pada Epic meaning & calling yang digunakan dalam aplikasi pembelajaran matematika adalah narrative. Narrative pada aplikasi pembelajaran matematika ini menceritakan pengguna akan dikondisikan

(4)

sebagai seseorang siswa yang secara tiba-tiba ke suatu tempat yang tidak diketahui sehabis pulang sekolah. Kondisi tersebut akan diceritakan saat pengguna baru pertama kali membuka aplikasi.

2. Development & Accomplishment

Development & accomplishment pada aplikasi pembelajaran matematika ini menggunakan status points, fixed action rewards, leveling up, boss fights, leaderboard, dan achievements. Status points pada aplikasi pembelajaran matematika ini adalah sebuah poin perhitungan nilai yang didapatkan ketika menyelesaikan latihan atau ujian. Setiap poin skor yang didapatkan akan diakumulasikan menjadi poin skor. Fixed action rewards pada aplikasi pembelajaran matematika ini adalah sebuah hadiah berupa koin, experience point (xp) dan poin skor kepada pengguna. Hadiah ini didapatkan dengan cara menyelesaikan latihan, ujian dan tugas pada achievement. Leveling up adalah cara pengguna untuk menaikkan level dengan mengumpulkan experience point (xp) yang didapatkan dari menyelesaikan latihan, ujian dan tantangan pada achievements pada aplikasi. Boss fights pada aplikasi pembelajaran matematika ini berupa sebuah tes akhir / ujian yang menguji kemampuan pengguna. Pada aplikasi pembelajaran matematika ini memiliki empat boss fights sesuai dengan jumlah bab yang di dalam materi. Pada saat boss fights, pengguna tidak dapat mengguna bantuan atau runes dan tidak dapat menggunakan kemampuan dari guiders. Leaderboard adalah suatu fitur pengguna saling berlomba untuk menaikkan peringkat yang dibandingkan dari poin skor. Pada aplikasi ini terdapat dua macam leaderboard yaitu

(5)

leaderboard yang menampilkan total poin skor dari seluruh pengguna aplikasi dan leaderboard yang hanya menampilkan total poin skor dari teman-teman pengguna. Achievements pada aplikasi pembelajaran matematika ini merupakan suatu penghargaan yang dapat dicapai oleh pengguna, karena telah menyelesaikan tugas. Pengguna yang telah berhasil menyelesaikan tugas pada achievements akan mendapat hadiah tambahan seperti koin dan xp. Terdapat delapan achievements yang bisa dicapai oleh pengguna. Setiap masing-masing achievements mempunyai tiga tingkat tahapan, yang mana setiap tingkat mempunyai ketentuannya masing-masing. Dibawah ini adalah daftar tabel achievements yang akan digunakan pada aplikasi pembelajaran matematika.

Tabel 3.1 Daftar Achievements

No Gambar Nama Penjelasan

1 Penjelajah

Achievement didapatkan dengan menyelesaikan 5, 10, 20

rintangan.

2 Ramah

Achievement didapatkan dengan menambahkan teman sebanyak 3,

5, 10 teman.

3 Pemboros

Besar

Achievement didapatkan dengan mendapatkan coin sebanyak 100,

300, 500

(6)

Tabel 3.1 Daftar Achievements (Lanjutan)

No Gambar Nama Keterangan

4 Akurat

Achievement didapatkan dengan menyelesaikan rintangan tanpa ada kesalahan sebanyak 3, 5, 10

5 Spiritualis

Achievement didapatkan dengan mengumpulkan pemandu

sebanyak 1, 2, 4

6 Anti Sihir

Achievement didapatkan dengan menyelesaikan rintangan tanpa menggunakan boosters sebanyak

3, 5, 10

7 Tukang Sihir

Achievement yang didapatkan dengan menggunakan boosters

sebanyak 5, 10, 20

8 Raja Kombo

Achievement yang didapatkan dengan mendapatkan total combo

sebanyak 10, 30, 50

3. Empowerment Creativity & Feedback

Empowerment Creativity & Feedback pada aplikasi pembelajaran matematika ini menggunakan boosters, plant pickers, instant feedback dan chain combo.

(7)

Boosters pada aplikasi pembelajaran matematika ini disebut runes. Runes yang dapat digunakan oleh pengguna untuk membantu dalam melewati latihan.

Runes dapat digunakan oleh pengguna dengan cara membayar dengan koin yang telah dikumpulkan oleh pengguna. Berikut adalah runes yang digunakan pada aplikasi pembelajaran matematika ini.

Tabel 3.2 Daftar Runes

1 Batu

Penglihatan

Rune ini berfungsi untuk memberikan petunjuk yang membantu pengguna dalam

menjawab soal.

2 Batu

Kebenaran

Rune ini berfungsi untuk mengeliminasi salah satu pilihan

jawaban yang salah.

3 Batu

Pembelokan

Rune ini berfungsi untuk melewati pertanyaan.

4 Batu Abstrak

Rune ini berfungsi untuk menggunakan salah satu rune dari

tiga rune yang lain secara acak.

Plant pickers/ meaningful choices pada aplikasi pembelajaran matematika ini adalah pemilihan pemandu (guiders). Pemandu pada aplikasi pembelajaran matematika ini merupakan karakter fiktif yang akan memandu pengguna

(8)

dalam permainan. Setiap pemandu memiliki kemampuan khusus yang berbeda-beda dan pemandu awal yang tidak memiliki kemampuan khusus.

Pemandu-pemandu dengan kemampuan khusus tersebut didapatkan dengan cara membeli di toko. Pada aplikasi pembelajaran matematika ini terdapat lima pemandu. Berikut adalah daftar pemandu yang digunakan dalam aplikasi pembelajaran matematika ini.

Tabel 3.3 Daftar Pemandu

1 Normal

Pemandu yang menjadi default saat pengguna baru pertama kali menggunakan aplikasi. Pemandu ini tidak memiliki kemampuan

khusus.

2 Perompak

Pemandu yang berpenampilan menjadi pengusaha. Pemandu ini

memiliki kemampuan khusus menambahkan 25% jumlah coin

yang didapatkan dari rintangan

3 Petualang

Pemandu yang berpenampilan menjadi penjelajah. Pemandu ini

memiliki kemampuan khusus menambahkan 30% jumlah xp yang didapatkan dari rintangan

4 Petarung

Pemandu yang berpenampilan menjadi petarung. Pemandu ini

memiliki kemampuan khusus memberi kesempatan sekali untuk

menjawab jika pengguna melakukan kesalahan dalam

menjawab pertanyaan.

(9)

Tabel 3.3 Daftar Pemandu (Lanjutan)

5 Penjudi

Pemandu yang berpenampilan menjadi penjudi. Pemandu ini memiliki kemampuan khusus

memberikan runes kepada pengguna secara acak pada awal

mulai saat pengguna menyelesaikan rintangan.

Instant feedback pada aplikasi pembelajaran matematika ini adalah sebuah umpan balik kepada pengguna terhadap aktivitas yang dilakukan oleh pengguna. Feedback yang diberikan kepada pengguna yaitu pesan salah dalam menjawab soal dan jawaban yang benar dalam pertanyaan, pesan selamat telah menjawab soal benar, pesan achievement telah berhasil dicapai oleh pengguna dan pesan hasil dari rintangan. Chain combo pada aplikasi pembelajaran matematika ini merupakan pengganda skor yang akan mengalikan skor dasar ketika menjawab benar pada soal. Pengganda skor akan tertambah, apabila pengguna menjawab soal benar secara berturut-beturut.

4. Ownership & Possession

Ownership & possession pada aplikasi pembelajaran matematika ini adalah collection sets dan exchangeable points. Collection sets pada aplikasi pembelajaran matematika ini adalah pengguna dalam mengoleksi pemandu- pemandu yang ada diaplikasi pembelajaran matematika. Setiap pemandu memiliki penampilan yang berbeda-beda. Daftar pemandu dapat dilihat pada tabel 3.3. Exchangeable points pada aplikasi pembelajaran matematika ini merupakan sebuah sistem poin yang dapat ditukarkan dengan suatu barang virtual seperti runes atau pemandu. Sistem poin pada aplikasi pembelajaran

(10)

matematika ini disebut koin. Setiap pembelian runes akan menambahkan jumlah runes pada pengguna. Runes yang sudah dibeli oleh pengguna dapat dibeli kembali.

5. Social Influence & Relatedness

Social influence & relatedness pada aplikasi ini berupa friends/ following dan social treasures/ gifting. Followers/following pada aplikasi pembelajaran matematika ini adalah fitur dimana pengguna bisa mengikuti dan diikuti oleh pengguna lain. Pengguna yang saling berteman dapat melihat latihan atau ujian yang sudah diselesaikan dari teman pengguna. Social treasures/ gifting pada aplikasi pembelajaran matematika ini adalah pengguna dapat memberikan koin kepada pengguna lain yang diikuti oleh pengguna. Pengguna hanya dapat memberikan koin sebanyak lima kali dalam satu hari.

6. Scarcity & Impatience

Scarcity & Impatience pada aplikasi pembelajaran matematika ini adalah seeing level ahead. Seeing level ahead pada aplikasi pembelajaran matematika ini adalah pengguna dapat melihat latihan dan ujian selanjutnya. Latihan atau ujian yang terkunci memiliki syarat yaitu harus menyelesaikan latihan sebelumnya sebelumnya. Latihan atau ujian yang sudah diselesaikan akan terlihat oleh teman-teman dari pengguna, begitu juga dengan sebaliknya.

7. Unpredictability & Curiosity

Unpredictability & curiosity pada aplikasi pembelajaran matematika ini adalah random rewards. Random rewards pada aplikasi pembelajaran matematika ini merupakan hadiah coin yang secara acak.

(11)

8. Loss & Avoidance

Loss & avoidance pada aplikasi pembelajaran matematika ini adalah Avoiding loss. Avoiding loss pada aplikasi pembelajaran matematika ini terdapat dua macam yaitu kehilangan combo dan pengurangan skor saat latihan atau ujian.

Kehilangan combo dan pengurangan skor terjadi ketika pengguna salah menjawab soal.

3.3 Perancangan Sistem

Metode perancangan sistem yang digunakan pada penelitian ini adalah metode prosedural, sehingga dalam proses perancangan digunakan Data Flow Diagram, Flowchart, Database Schema, struktur tabel, dan desain antarmuka dari sistem.

3.3.1 Data Flow Diagram

Data Flow Diagram (DFD) dibuat dengan tujuan menggambarkan alur data yang masuk dan keluar pada sistem gamifikasi pembelajaran matematika SMP.

DFD dibuat dalam bentuk diagram konteks, DFD level 1, DFD level 2. Pembuatan Data Flow Diagram sistem pembelajaran matematika menggunakan analisis dan perancangan sistem oleh Kendall & Kendall.

(12)

Gambar 3.1 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Diagram Konteks

Gambar 3.1 menunjukkan DFD diagram konteks dari sistem gamifikasi pembelajaran matematika SMP. Pada Gambar 3.1 tersebut terdapat dua entitas yaitu

(13)

pengguna dan admin dan satu proses yaitu sistem pembelajaran matematika SMP.

Jumlah data yang masuk ke dalam proses sebanyak tujuh puluh satu dan data yang keluar dari proses sebanyak tujuh puluh satu.

Pada alur data masuk ke sistem dari pengguna berjumlah dua puluh sembilan.

Berikut ini adalah penjelasan mengenai alur data yang masuk ke sistem dari pengguna. Pada alur data Post_Cek_Username berisi username dari pengguna.

Pada alur data Post_Cek_Email berisi email dari pengguna. Pada alur data Data_Pendaftaran merupakan input pengguna baru yang berisi username, email dan password. Pada alur data Data_Login berisi username dan password dari pengguna.

Pada alur data Request_Daftar_Bab, Request_Daftar_Rune, Request_Daftar_Guider, dan Request_Daftar_Penghargaan merupakan permintaan untuk melihat daftar bab, rune, pemandu, dan penghargaan. Pada alur data Request_Daftar_Subbab berisi permintaan daftar subbab sesuai dengan pilihan bab.

Pada alur data Request_Data_Penjelasan dan Request_Data_Latihan berisi pilihan subbab. Pada alur data Post_Pakai_Rune berisi id rune yang dipakai oleh pengguna.

Pada alur data Data_Pilih_Jawaban berisi pilihan jawaban. Pada alur data Post_Selesai_Latihan berisi data hasil latihan seperti skor, combo, kelulusan latihan, pemakaian rune dan kesalahan menjawab.

Pada alur data Request_Jumlah_Pengikut_Mengikuti dan Request_Jumlah_Pemberian berisi permintaan data jumlah pengikut dan pengguna ikuti sesuai dengan pengguna dan jumlah pemberian koin kepada pengguna. Pada alur data Post_Cari_Pengguna berisi username untuk mencari pengguna. Pada alur data Post_Tambah_Mengikuti dan Post_Berhenti_Mengikuti berisi pilihan pengguna yang diikuti dan tidak diikuti. Pada alur data Request_Daftar_Mengikuti

(14)

dan Request_Daftar_Pengikut berisikan permintaan daftar pengguna ikuti dan pengikut dari pengguna. Pada alur data Post_Pemberian berisi pilihan pengguna lain dan jumlah koin yang diberikan. Pada alur data Request_Daftar_Pemberian berisi permintaan daftar pemberian kepada pengguna. Pada alur data Post_Menerima_Pemberian berisi pilihan pemberian yang diterima. Pada alur data Request_Daftar_Peringkat_Global dan Request_Daftar_Peringkat_Mengikuti berisi permintaan daftar peringkat secara global dan daftar peringkat sesuai dengan pengguna ikuti. Pada alur data Post_Beli_Rune berisi pilihan rune yang dibeli. Pada alur data Post_Beli_Pemandu dan Post_Pakai_Pemandu berisi pilihan pemandu yang dibeli dan dipakai.

Pada alur data yang keluar dari sistem ke pengguna berjumlah dua puluh sembilan. Berikut ini adalah penjelasan mengenai alur data yang keluar dari sistem ke pengguna. Pada alur data Respon_Cek_Username dan Respon_Cek_Email berisi respon sudah atau belum terpakainya username dan email yang dimasukkan.

Pada alur data Respon_Pendaftaran berisi respon berhasilnya melakukan daftar.

Pada alur data Respon_Login berisi respon berhasilnya melakukan login. Pada alur data Respon_Daftar_Bab berisi daftar bab yang terdiri dari nama dan gambar bab beserta progres bab pada pengguna. Pada alur data Respon_Daftar_Subbab berisi daftar subbab yang sesuai dengan bab dipilih. Daftar subbab terdiri dari nama dan gambar subbab. Pada alur data Respon_Data_Penjelasan berisi penjelasan mengenai materi subbab yang dipilih. Pada alur data Respon_Data_Latihan berisi latihan-latihan soal pada subbab yang dipilih. Pada alur data Respon_Data_Pakai_Rune berisi respon pengurangan jumlah rune dan aktifnya kemampuan rune. Pada alur data Respon_Pilih_Jawaban berisi respon benar atau

(15)

salahnya jawaban soal. Pada alur data Respon_Hasil_Latihan berisi hasil latihan yang telah diselesaikan seperti, jumlah skor akhir, kombo maksimum, hadiah yang didapatkan, persentase hasil latihan dan rune yang dipakai selama latihan. Pada alur data Respon_Daftar_Penghargaan berisi daftar penghargaan yang terdiri dari nama, progres penghargaan, gambar lencana penghargaan dan batas pencapaian penghargaan. Pada alur data Respon_ Jumlah_Pengikut_Mengikuti berisi jumlah pengikut pengguna dan pengguna ikuti. Pada alur data Respon_Pencarian_Pengguna, Respon_Daftar_Pengikut dan Respon_Daftar_Mengikuti berisi daftar pengguna yang dicari, daftar pengikut pengguna dan daftar pengguna ikuti yang terdiri dari username, level, skor dan pemandu yang dipakai.

Pada alur data Respon_Tambah_Mengikuti dan Respon_Berhenti_Mengikuti berisi respon perubahan status. Pada alur data Respon_Daftar_Pemberian berisi daftar pemberian koin yang terdiri dari username dan jumlah koin yang diberikan. Pada alur data Respon_Pemberian berisi respon penerimaan pemberian yang menambahkan koin pengguna. Pada alur data Respon_Daftar_Peringkat_Global dan Respon_Daftar_Peringkat_Mengikuti berisikan daftar peringkat pengguna secara global dan pengguna yang diikuti terdiri dari username, skor, level dan pemandu yang dipakai. Pada alur data Respon_Daftar_Rune berisi daftar rune terdiri dari nama, deskripsi dan biaya rune.

Pada alur data Respon_Beli_Rune berisi respon pembelian rune seperti bertambahnya jumlah rune dan berkurangnya koin pengguna. Pada alur data Respon_Daftar_Pemandu berisi daftar pemandu yang terdiri dari nama, kemampuan, deskripsi, biaya pemandu. Pada alur data Respon_Beli_Pemandu

(16)

berisi respon terbelinya pemandu seperti berkurangnya koin pengguna dan tertambahnya pemandu pengguna. Pada alur data Respon_Pakai_Penggunna berisi respon pemakaian pemandu.

Pada alur masuknya data ke sistem dari pengguna berjumlahkan empat puluh dua data. Berikut adalah penjelasan mengenai alur masuknya data dari pengguna ke sistem. Pada alur data Data_Login_Admin berisi email dan password. Pada alur data Request_Data_Dashboard berisi jumlah pengguna dan jumlah materi yang ada pada sistem. Pada alur data Request_Daftar_Admin berisi permintaan daftar admin.

Request_Daftar_Pengguna berisi permintaan daftar pengguna.

Request_Daftar_Bab_cms berisi permintaan daftar bab.

Request_Daftar_Subbab_cms berisi permintaan daftar subbab.

Request_Daftar_Penjelasan berisi permintaan daftar penjelasan.

Request_Daftar_Pertanyaan berisi permintaan daftar pertanyaan.

Request_Daftar_Jawaban berisi permintaan daftar jawaban.

Request_Daftar_Runes_cms berisi permintaan daftar rune.

Request_Daftar_Pemandu_cms berisi permintaan daftar pemandu.

Request_Daftar_Penghargaan berisi permitnaan daftar penghargaan.

Request_Daftar_Sasaran_Penghargaan berisi permintaan daftar sasaran penghargaan.

Pada alur data Data_Tambah_Admin, Data_Tambah_Bab, Data_Tambah_Subbab, Data_Tambah_Penjelasan, Data_Tambah_Pertanyaan, Data_Tambah_Jawaban, Data_Tambah_Runes, Data_Tambah_Pemandu, Data_Tambah_Penghargaan, Data_Tambah_Sasaran_Penghargaan berisi penambahan data baru admin, bab, subbab, penjelasan, pertanyaan, jawaban, runes,

(17)

pemandu, penghargaan dan sasaran penghargaan. Pada alur data Data_Hapus_Admin, Data_Hapus_Bab, Data_Hapus_Subbab, Data_Hapus_Penjelasan, Data_Hapus_Pertanyaan, Data_Hapus_Jawaban, Data_Hapus_Jawaban, Data_Hapus_Runes, Data_Hapus_Pemandu, Data_Hapus_Penghargaan, Data_Hapus_Sasaran_Penghargaan berisi pilihan data yang dihapus. Pada alur data Data_Edit_Bab, Data_Edit_Subbab, Data_Edit_Penjelasan, Data_Edit_Pertanyaan, Data_Edit_Jawaban, Data_Edit_Runes, Data_Edit_Pemandu, Data_Edit_Penghargaan, Data_Edit_Sasaran_Penghargaan berisi perubahan data bab, subbab, penjelasan, pertanyaan, jawaban, rune, pemandu, penghargaan dan sasaran penghargaan.

Pada alur keluarnya data dari sistem ke admin berjumlahkan empat puluh dua data. Berikut adalah penjelasan mengenai alur keluarnya data dari sistem ke admin. Pada alur data Respon_Login_admin berisi respon berhasil benar atau salah masukkan data login admin. Pada alur data Respon_Data_Dashboard berisi data jumlah pengguna dan jumlah materi yang ada pada sistem. Pada alur data Respon_Daftar_Admin berisi daftar data admin yang terdiri dari email. Pada alur data Respon_Daftar_Pengguna berisi daftar pengguna yang terdiri dari username, email, tanggal bergabung, login terakhir dan pemandu yang dipakai.

Pada alur data Respon_Daftar_Bab_cms berisi daftar bab yang terdiri dari nama dan gambar. Pada alur data Respon_Daftar_Subbab_cms berisi daftar subbab yang terdiri dari nama, gambar subbab dan bab pada subbab. Pada alur data Respon_Daftar_Penjelasan dan Respon_Daftar_Pertanyaan berisi daftar penjelasan dan pertanyaan yang terdiri dari konten dan nama subbab dari penjelasan. Pada alur data Respon_Daftar_Pemandu_cms berisi daftar pemandu yang terdiri dari nama,

(18)

gambar, kemampuan, deskripsi dan biaya pemandu. Pada alur data Respon_Daftar_Runes_cms berisi daftar rune yang terdiri dari nama, gambar dan biaya rune. Pada alur data Respon_Daftar_Penghargaan berisi daftar penghargaan yang terdiri dari nama dan deskripsi. Pada alur data Respon_Daftar_Sasaran_Penghargaan berisi daftar sasaran penghargaan yang terdiri dari gambar lencana penghargaan, nama penghargaan, tipe penghargaan dan sasaran pencapaian penghargaan. Pada alur data Respon_Tambah_Admin, Respon_Tambah_Bab, Respon_Tambah_Subbab, Respon_Tambah_Penjelasan, Respon_Tambah_Jawaban, Respon_Tambah_Runes, Respon_Tambah_Pemandu, Respon_Tambah_Penghargaan, Respon_Tambah_Sasaran_Penghargaan, Respon_Tambah_Pertanyaan berisi respon penambahan data admin, bab, subbab, penjelasan, pertanyaan, jawaban, rune, pemandu, penghargaan dan sasaran penghargaan.

Pada alur data Respon_Hapus_Admin, Respon_Hapus_Bab, Respon_Hapus_Subbab, Respon_Hapus_Penjelasan, Respon_Hapus_Pertanyaan, Respon_Hapus_Jawaban, Respon_Hapus_Runes, Respon_Hapus_Pemandu, Respon_Hapus_Penghargaan, Respon_Hapus_Sasaran_Penghargaan berisi respon penghapusan data admin, bab, subbab, penjelasan, pertanyaan, jawaban, rune, pemandu, penghargaan, sasaran penghargaan yang telah dipilih. Pada alur data Respon_Edit_Sasaran_Penghargaan, Respon_Edit_Bab, Respon_Edit_Subbab, Respon_Edit_Penjelasan, Respon_Edit_Pertanyaan, Respon_Edit_Jawaban, Respon_Edit_Runes, Respon_Edit_Pemandu, Respon_Edit_Penghargaan, yang berisi respon pengubahan data bab, subbab, penejelasan, pertanyaan, jawaaban, rune, pemandu, penghargaan, sasaran penghargaan yang telah dipilih.

(19)

Gambar 3.2 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 1

(20)

Pada Gambar 3.2 menunjukkan DFD level 1 sistem gamifikasi pembelajaran matematika SMP. Pada DFD level 1 ini dibagi menjadi tiga proses yaitu mengelola pengguna, mengelola materi, dan mengelola gamifikasi.

Gambar 3.3 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 2 Mengelola Pengguna

(21)

Pada Gambar 3.3 menunjukkan DFD level 2 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola pengguna. Pada DFD level 2 ini dibagi menjadi sembilan proses yaitu login admin, lihat dashboard, mengelola admin, cek username, cek email, pendaftaran pengguna, cek pengguna dan mengambil data pengguna. Selain itu, proses mengelola pengguna menggunakan sembilan tabel database yang terdiri dari tabel admin, subbab, user, user_follow, subbab_progress, achievement_progress, user_coin_log, user_rune dan user_guider.

Gambar 3.4 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Admin

Pada Gambar 3.4 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola admin. Pada DFD level 3 ini dibagi menjadi tiga proses yaitu lihat daftar admin, tambah admin, hapus admin. Selain itu, proses mengelola admin menggunakan satu tabel database yaitu tabel admin.

(22)

Gambar 3.5 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 2 Mengelola Materi

(23)

Pada Gambar 3.5 menunjukkan DFD level 2 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola materi. Pada DFD level 2 ini dibagi menjadi sembilan proses yaitu mengelola bab, mengelola subbab, mengelola penjelasan, mengelola pertanyaan, mengelola jawaban, lihat daftar bab, lihat daftar subbab dan progres, lihat penjelasan dan latihan soal. Selain itu, proses mengelola materi menggunakan tiga belas tabel database yang terdiri dari tabel user, chapter, subbab, explanation, question, runes, achievement, achievement_reward, achievement_type_reward, achievement_progress, user_follow, subbab_progress, user_follow.

Gambar 3.6 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Bab

Pada Gambar 3.6 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola bab. Pada DFD level 3 ini dibagi menjadi empat proses yaitu lihat daftar bab, tambah bab, hapus bab dan edit bab. Selain itu, proses mengelola bab menggunakan satu tabel database yaitu tabel chapter.

(24)

Gambar 3.7 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Subbab

Pada Gambar 3.7 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola subbab. Pada DFD level 3 ini dibagi menjadi empat proses yaitu lihat daftar subbab, tambah subbab, hapus subbab dan edit subbab. Selain itu, proses mengelola subbab menggunakan satu tabel database yaitu tabel subbab.

Gambar 3.8 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Penjelasan

Pada Gambar 3.8 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola penjelasan. Pada DFD level 3 ini dibagi

(25)

menjadi empat proses yaitu lihat daftar penjelasan, tambah penjelasan, hapus penjelasan dan edit penjelasan. Selain itu, proses mengelola penjelasan menggunakan satu tabel database yaitu tabel explanation.

Gambar 3.9 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Pertanyaan

Pada Gambar 3.9 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola pertanyaan. Pada DFD level 3 ini dibagi menjadi empat proses yaitu lihat daftar pertanyaan, tambah pertanyaan, hapus pertanyaan dan edit pertanyaan. Selain itu, proses mengelola pertanyaan menggunakan satu tabel database yaitu tabel question.

Gambar 3.10 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Jawaban

(26)

Pada Gambar 3.10 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola jawaban. Pada DFD level 3 ini dibagi menjadi empat proses yaitu lihat daftar jawaban, tambah jawaban, hapus jawaban dan edit jawaban. Selain itu, proses mengelola jawaban menggunakan satu tabel database yaitu tabel answer.

Gambar 3.11 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Lihat Daftar Subbab dan Progres

Pada Gambar 3.11 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses lihat daftar subbab dan progres. Pada DFD level 3 ini dibagi menjadi dua proses yaitu melihat daftar subbab dan mengambil subbab progress pengguna ikuti. Selain itu, proses lihat daftar subbab dan progres menggunakan tiga tabel database yaitu tabel subbab, user_follow, dan subbab_progres.

(27)

Gambar 3.12 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Latihan Soal

Pada Gambar 3.12 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses latihan soal. Pada DFD level 3 ini dibagi menjadi enam proses yaitu lihat latihan soal, memilih jawaban, pakai rune, menyimpan progres latihan, mengambil penghargaan latihan, dan mengirim hasil latihan. Selain itu, proses latihan soal menggunakan delapan tabel database yaitu tabel user, question, answer, user_runes, achievement, achievement_reward,

(28)

achievement_type_reward, achievement_progress, dan subbab_progress. Dan satu penyimpanan data secara sementara pada aplikasi dengan nama latihan.

Gambar 3.13 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 2 Mengelola Gamifikasi

(29)

Pada Gambar 3.13 menunjukkan DFD level 2 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola gamifikasi. Pada DFD level 2 ini dibagi menjadi delapan proses yaitu mengelola rune, mengelola pemandu, mengelola penghargaan, mengelola sasaran penghargaan, mengelola pemberian, mengelola teman, melihat penghargaan, dan melihat daftar peringkat. Selain itu, proses mengelola gamifikasi menggunakan delapan tabel database yang terdiri dari tabel user, achievement, achievement_reward, achievement_type_reward, achievement_progress, user_follow, subbab_progress, user_coin_log.

Gambar 3.14 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Rune

(30)

Pada Gambar 3.14 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola rune. Pada DFD level 3 ini dibagi menjadi delapan proses yaitu lihat daftar rune CMS, tambah rune, hapus rune, edit rune, lihat daftar rune, beli rune, cek penghargaan belanja, dan mengirim penghargaan dan respon beli rune. Selain itu, proses mengelola rune menggunakan tujuh tabel database yang terdiri dari tabel user, runes, achievement, achievement_reward, achievement_type_reward, achievement_progress, dan user_runes.

Gambar 3.15 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Pemandu

(31)

Pada Gambar 3.15 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola pemandu. Pada DFD level 3 ini dibagi menjadi sembilan proses yaitu lihat daftar pemandu CMS, tambah pemandu, hapus pemandu, edit pemandu, lihat daftar pemandu, beli pemandu, cek penghargaan belanja pemandu, mengirim penghargaan dan respon beli pemandu, dan ganti pemandu. Selain itu, proses mengelola pemandu menggunakan tujuh tabel database yang terdiri dari tabel user, guider, achievement, achievement_reward, achievement_type_reward, achievement_progress, dan user_guider.

Gambar 3.16 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Penghargaan

Pada Gambar 3.16 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola penghargaan. Pada DFD level 3 ini dibagi menjadi empat proses yaitu lihat daftar penghargaan CMS, tambah penghargaan, hapus penghargaan, dan edit penghargaan. Selain itu, proses mengelola penghargaan menggunakan satu tabel database yaitu achievement.

(32)

Gambar 3.17 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Sasaran Penghargaan

Pada Gambar 3.17 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola sasaran penghargaan. Pada DFD level 3 ini dibagi menjadi empat proses yaitu lihat daftar sasaran penghargaan CMS, tambah sasaran penghargaan, hapus sasaran penghargaan, dan edit sasaran penghargaan. Selain itu, proses mengelola sasaran penghargaan menggunakan satu tabel database yaitu achievement_reward.

Gambar 3.18 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika

SMP Level 3 Mengelola Pemberian

Pada Gambar 3.18 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola pemberian. Pada DFD level

(33)

3 ini dibagi menjadi empat proses yaitu mengambil jumlah pemberian, memberi pemberian, melihat daftar pemberian, dan menerima pemberian. Selain itu, proses mengelola pemberian menggunakan dua tabel database yaitu user dan user_coin_log.

Gambar 3.19 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Mengelola Teman

Pada Gambar 3.19 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses mengelola teman. Pada DFD level 3 ini dibagi menjadi delapan proses yaitu mengambil jumlah pengikut dan mengikuti, cari pengguna, cek penghargaan mengikuti, mengirim dan respon mengikuti

(34)

pengguna, mengikuti pengguna, tidak mengikuti pengguna lihat pengguna ikuti, dan lihat daftar pengikuti pengguna. Selain itu, proses mengelola teman menggunakan enam tabel database yaitu user, achievement, achievement_reward, achievement_type_reward, achievement_progress, dan user_follow.

Gambar 3.20 Data Flow Diagram Sistem Gamifikasi Pembelajaran Matematika SMP Level 3 Melihat Daftar Peringkat

Pada Gambar 3.20 menunjukkan DFD level 3 sistem gamifikasi pembelajaran matematika SMP pada proses melihat daftar peringkat. Pada DFD level 3 ini dibagi menjadi dua proses yaitu melihat daftar peringkat global dan melihat daftar peringkat pengguna ikuti. Selain itu, proses melihat daftar peringkat menggunakan tiga tabel database yaitu user, user_follow dan subbab_progress.

3.3.2 Sitemap

Sitemap digunakan untuk menggambarkan halaman pada aplikasi dan website adin secara garis besar. Berikut adalah sitemap yang digunakan sistem gamifikasi pembelajaran matematika SMP.

(35)

Gambar 3.21 Sitemap Website Admin

Pada Gambar 3.21 merupakan gambaran sitemap dari website admin sistem gamifikasi pembelajaran matematika SMP yang dibangun. Pada website admin mempunyai tigas belas halaman yaitu halaman login, dashboard, admin, pengguna, bab, subbab, penjelasan, pertanyaan, jawaban, rune, pemandu, penghargaan, sasaran penghargaan. Pada awal mula website dibuka akan menampilkan halaman login. Halaman login merupakan bagian proses DFD 1.1 login admin pada gambar 3.3. Setelah melakukan login, halaman yang akan pertama kali terbuka adalah halaman dashboard. Halaman dashboard merupakan bagian proses DFD 1.2 lihat dashboard pada gambar 3.3. Pada halaman admin merupakan bagian proses DFD 1.3 mengelola admin pada gambar 3.3. Pada halaman pengguna merupakan bagian proses DFD 1.4 melihat daftar pengguna pada gambar 3.3.

Pada halaman bab merupakan bagian proses DFD 2.1 mengelola bab pada gambar 3.5. Pada halaman subbab merupakan bagian proses DFD 2.2 mengelola subbab pada gambar 3.5 Pada halaman penjelasan merupakan bagian proses DFD 2.3 mengelola penjelasan pada gambar 3.5. Pada halaman pertanyaan merupakan bagian proses DFD 2.4 mengelola pertanyaan pada gambar 3.5. Pada halaman

(36)

jawaban merupakan bagian proses DFD 2.5 mengelola jawaban pada gambar 3.5.

Pada halaman rune merupakan bagian proses DFD 3.1 mengelola rune pada gambar 3.13. Pada halaman pemandu merupakan bagian proses DFD 3.2 mengelola pemandu pada gambar 3.13. Pada halaman penghargaan merupakan bagian proses DFD 3.3 mengelola penghargaan pada gambar 3.13. Pada halaman sasaran merupakan bagian proses DFD 3.4 mengelola sasaran penghargaan pada gambar 3.13.

Gambar 3.22 Sitemap Aplikasi Gamifikasi Pembelajaran Matematika SMP

Gambar 3.2.2 merupakan gambaran sitemap aplikasi gamifikasi pembelajaran matematika SMP. Pada aplikasi ini memiliki tujuh belas halaman yaitu menu awal, login, register, bab, profil, toko, subbab, penjelasan, latihan, hasil latihan, pengikut, mengikuti, mengikuti pengguna, pemberian koin, penghargaan, dan toko. Pada awal mula aplikasi dibuka akan menampilkan halaman menu awal.

Pada halaman akan menampilkan cerita dan pemilihan pembuatan akun baru atau login sebagai pengguna lama. Halaman login merupakan bagian bagian proses DFD 1.8 cek pengguna dan bagian proses DFD 1.9 mengambil data pengguna pada

(37)

gambar 3.3. Halaman register merupakan bagian bagian proses DFD 1.5 cek username, bagian proses DFD 1.6 Cek Email, bagian proses DFD 1.7 Pendaftaran Pengguna. Halaman bab merupakan bagian proses DFD 2.6 lihat daftar bab pada gambar 3.5. Halaman subbab merupakan bagian proses DFD 2.7 lihat daftar subbab dan progres pada gambar 3.5. Halaman penjelasan merupakan bagian proses DFD 2.8 pada gambar 3.5. Halaman Latihan merupakan bagian proses DFD 2.9 latihan soal pada gambar 3.5. Pada halaman latihan, pengguna yang telah menyelesaikan latihan akan dibawa ke tampilan hasil latihan. Tampilan hasil latihan merupakan bagian proses DFD 2.9.4 Menyimpan progres latihan dan bagian proses DFD 2.9.6 mengirim hasill latihan pada gambar 3.12.

Halaman profil merupakan bagian proses DFD 3.5 mengelola pemberian, bagian proses DFD 3.6 mengelola teman, bagian proses DFD 3.7 melihat penghargaan, bagian proses DFD 3.8 melihat daftar peringkat pada gambar 3.14.

Pada halaman pengikuti merupakan bagian proses DFD 3.6.8 lihat daftar pengikut pengguna pada gambar. Pada halaman mengikuti merupakan bagian proses DFD 3.6.7 lihat daftar pengguna ikuti pada gambar 3.19. Pada halaman mengikuti pengguna merupakan bagian proses DFD 3.6.2 cari pengguna, bagian proses DFD 3.6.3, dan bagian proses DFD 3.6.5 mengirim penghargaan dan respon mengikuti pengguna pada gambar 3.19. Pada halaman pemberian koin merupakan bagian proses DFD 3.5 memberi pemberian pada gambar 3.13. Pada halaman penghargaan merupakan bagian proses DFD 3.7 melihat penghagaan pada gambar 3.13.

Pada halaman toko merupakan bagian proses DFD 3.1 mengelola rune dan bagian proses DFD 3.2 pada gambar 3.13. Pada tampilan hasil latihan, mengikuti, mengikuti pengguna dan toko dapat memunculkan tampilan pencapaian

(38)

penghargaan yang merupakan bagian proses DFD 2.9.5, DFD 3.17, DFD 3.2.7, DFD 3.6.4.

3.3.3 Flowchart

Flowchart ditujukan untuk menggambarkan urutan proses dan hubungan antar proses dengan proses lainnya dalam suatu program yang digambarkan dengna simbol-simbol. Berikut adalah bagan-bagan flowchart yang digunakan dalam pembuatan website admin dan aplikasi gamifikasi pembelajaran matematika SMP.

Gambar 3.23 Flowchart Menu Login Admin

(39)

Pada Gambar 3.23 menggambarkan alur kerja menu login admin pada sitemap website admin halaman login. Awal mula alur kerja menu login admin menampilkan form untuk mengisi email dan password. Pengguna akan diminta memasukkan email dan password. Email dan password yang dimasukkan akan dicek dengan database admin. Jika data email dan password yang dimasukkan benar maka akan lanjut ke halaman selanjutnya. Jika data email dan password yang dimasukkan salah maka akan menampilkan pesan email atau password salah.

Gambar 3.24 Flowchart Menu Dashboard

Pada Gambar 3.24 menggambarkan alur kerja menu dashboard pada sitemap website admin halaman dashboard. Awal mula alur kerja menu dashboard mengambil data jumlah pengguna dan jumlah subbab dari database. Data yang sudah diambil dari database akan ditampilkan kepada pengguna.

(40)

Gambar 3.25 Flowchart Menu Admin

Pada Gambar 3.25 menggambarkan alur kerja menu admin pada sitemap website admin halaman admin. Awal mula alur kerja menu admin mengambil data admin dari database. Data yang sudah diambil dari database akan ditampilkan kepada pengguna dalam berupa tabel. Pengguna admin dapat menambah atau menghapus data admin. Jika pengguna admin menambahkan maka menampilkan form untuk memasukkan data admin seperti email dan password. Data yang sudah dimasukkan akan ditambahkan ke database. Jika pengguna admin memilih menghapus admin maka pilihan akun admin akan dihapus dari database.

(41)

Gambar 3.26 Flowchart Menu Pengguna

Pada Gambar 3.26 menggambarkan alur kerja menu pengguna pada sitemap website admin halaman pengguna. Awal mula alur kerja menu pengguna mengambil data pengguna dari database. Data yang sudah diambil dari database akan ditampilkan kepada pengguna dalam berupa tabel.

Gambar 3.27 Flowchart Menu Bab Admin

Pada Gambar 3.27 menggambarkan alur kerja menu bab admin pada sitemap website admin halaman bab. Pada alur kerja menu menu bab admin dapat melakukan proses menampilkan daftar tabel, penambahan, penghapusan,

(42)

pengubahan data bab yang akan berpengaruh terhadap database. Pada halaman ini juga dapat melihat daftar subbab yang sesuai dengan bab dipilih.

Gambar 3.28 Flowchart Menu Subbab Admin

(43)

Pada Gambar 3.28 menggambarkan alur kerja menu subbab admin pada sitemap website admin halaman subbab. Pada awal alur kerja menu subbab admin melakukan pengecekan id bab yang dipilih, jika ada maka daftar subbab akan diambil yang sesuai dengan bab. Jika tidak maka akan menampilkan daftar seluruh data subbab. Pada alur kerja menu subbab admin dapat melakukan proses penambahan, penghapusan, pengubahan data subbab yang akan berpengaruh terhadap database. Pada halaman ini juga dapat melihat data penejelasan dan pertanyaan yang sesuai dengan subbab dipilih.

Gambar 3.29 Flowchart Menu Penjelasan Admin

(44)

Pada Gambar 3.29 menggambarkan alur kerja menu penjelasan admin pada sitemap website admin halaman penjelasan. Pada awal alur kerja menu penjelasan admin melakukan pengecekan id subbab yang dipilih, jika ada maka data penjelasan akan diambil yang sesuai dengan subbab. Jika tidak maka akan menampilkan daftar seluruh data penjelasan. Pada alur kerja menu penjelasan admin dapat melakukan proses penambahan, penghapusan, pengubahan data penjelasan yang akan berpengaruh terhadap database.

Gambar 3.30 Flowchart Menu Pertanyaan Admin

Pada Gambar 3.30 menggambarkan alur kerja menu pertanyaan admin pada sitemap website admin halaman pertanyaan. Pada awal alur kerja menu pertanyaan admin melakukan pengecekan id subbab yang dipilih, jika ada maka daftar pertanyaan akan diambil yang sesuai dengan subbab. Jika tidak maka akan menampilkan daftar seluruh daftar pertanyaan. Pada alur kerja menu penjelasan

(45)

admin dapat melakukan proses penambahan, penghapusan, pengubahan data pertanyaan yang akan berpengaruh terhadap database.

Gambar 3.31 Flowchart Menu Jawaban Admin

Pada Gambar 3.31 menggambarkan alur kerja menu jawaban admin pada sitemap website admin halaman jawaban. Pada awal alur kerja menu jawaban admin melakukan pengecekan id pertanyaan yang dipilih. Daftar jawaban akan

(46)

diambil yang sesuai dengan pertanyaan. Pada alur kerja menu jawaban admin dapat melakukan proses penambahan, penghapusan, pengubahan data penjelasan yang akan berpengaruh terhadap database.

Gambar 3.32 Flowchart Menu Rune Admin

Pada Gambar 3.32 menggambarkan alur kerja menu rune admin pada sitemap website admin halaman rune. Pada alur kerja menu rune admin dapat melihat daftar rune yang diambil dari database pada awal mula proses, melakukan

(47)

proses penambahan, penghapusan, pengubahan data rune yang akan berpengaruh terhadap database.

Gambar 3.33 Flowchart Menu Pemandu Admin

(48)

Pada Gambar 3.33 menggambarkan alur kerja menu pemandu admin pada sitemap website admin halaman pemandu. Pada alur kerja menu pemandu admin dapat melihat daftar pemandu yang diambil dari database pada awal mula proses, melakukan proses penambahan, penghapusan, pengubahan data pemandu yang akan berpengaruh terhadap database.

Gambar 3.34 Flowchart Menu Penghargaan Admin

(49)

Pada Gambar 3.34 menggambarkan alur kerja menu penghargaan admin pada sitemap website admin halaman penghargaan. Pada alur kerja menu penghargaan admin dapat melihat daftar penghargaan yang diambil dari database pada awal mula proses, melakukan proses penambahan, penghapusan, pengubahan data penghargaan yang akan berpengaruh terhadap database.

Gambar 3.35 Flowchart Menu Sasaran Penghargaan Admin

(50)

Pada Gambar 3.35 menggambarkan alur kerja menu sasaran penghargaan admin pada sitemap website admin halaman sasaran penghargaan. Pada alur kerja menu sasaran penghargaan admin dapat melihat daftar sasaran penghargaan yang diambil dari database pada awal mula proses, melakukan proses penambahan, penghapusan, pengubahan data sasaran penghargaan yang akan berpengaruh terhadap database.

Gambar 3.36 Flowchart Menu Awal Aplikasi

Pada Gambar 3.36 menggambarkan alur kerja menu awal aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu awal.

(51)

Pada awal mula alur kerja menu awal aplikasi menerima input logout. Jika pengguna tidak melakukan logout maka akan menampilkan cerita. Jika pengguna melakukan logout maka akan menampilkan pilihan penguna baru atau lama. Jika pengguna baru akan masuk ke halaman register. Jika pengguna lama maka akan masuk ke halaman login.

Gambar 3.37 Flowchart Menu Login Aplikasi

(52)

Pada Gambar 3.37 menggambarkan alur kerja menu login aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu login.

Pada awal mula alur kerja menu login aplikasi menampilkan form input untuk memasukkan username / email dan password. Hasil input username / email dan password akan dicek dengan data yang ada di database. Jika data tidak ditemukan maka menampilkan pesan login tidak berhasil. Jika data ditemukan maka akan mengambil data-data yang sesuai dengan pengguna seperti pemandu pengguna, rune pengguna, progres subbab pengguna, progres penghargaan pengguna, pemberian koin oleh pengguna, dan pengguna ikuti.

Gambar 3.38 Flowchart Menu Register Aplikasi

Pada Gambar 3.38 menggambarkan alur kerja menu register aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu register.

Pada awal mula alur kerja menu register aplikasi menampilkan form input untuk memasukkan username, email, password dan konfirmasi password. Setelah pengguna menginput username akan dilakukan pengecekan username yang sama

(53)

dengan data yang ada di database. Jika username sudah terpakai maka akan menampilkan respon username sudah terpakai. Jika username belum terpakai maka akan menampilan respon username belum terpakai. Setelah pengguna menginput email akan dilakukan pengecekan email yang sama dengan data yang ada di database. Jika email sudah terpakai atau email yang tidak valid maka akan menampilkan respon email sudah terpakai atau email tidak valid. Jika email belum terpakai maka akan menampilan respon email belum terpakai. Jika semua input valid seperti username dan email belum terpakai, karakter password yang harus lebih dari 8, password dan konfirmasi password yang sama maka akan menyimpan data pengguna baru ke dalam database.

Gambar 3.39 Flowchart Menu Bab Aplikasi

Pada Gambar 3.39 menggambarkan alur kerja menu bab aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu bab.

Pada awal mula alur kerja menu bab aplikasi menampilkan daftar bab dan progres bab yang diambil dari database. Pengguna dapat memilih salah satu bab yang sudah berhasil dilewati dari daftar. Jika pengguna memilih bab maka akan ke halaman subbab.

(54)

Gambar 3.40 Flowchart Menu Subbab Aplikasi

Pada Gambar 3.40 menggambarkan alur kerja menu subbab aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu subbab.

Pada awal mula alur kerja menu subbab aplikasi menampilkan daftar subbab berdasarkan bab yang dipilih oleh pengguna yang diambil dari database. Pada awal mula juga dilakukan proses pengambilan jumlah pengguna ikuti yang telah menyelesaikan pada masing-masing subbab. Pengguna dapat memilih penjelasan atau latihan pada subbab. Jika user memilih penjelasan akan menampilkan penjelasan yang sesuai dengan subbab yang diambil dari database. Pada halaman penjelasan atau halaman subbab, jika pengguna memilih latihan maka akan ke halaman latihan.

(55)

Gambar 3.41 Flowchart Menu Latihan Aplikasi

Pada Gambar 3.41 menggambarkan alur kerja menu latihan aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu latihan.

(56)

Pada awal mula alur kerja menu latihan aplikasi mengambil latihan soal dari database yang berisi pertanyaan dan jawaban yang sesuai dengan subbab dipilih.

Jika pengguna memakai pemandu penjudi maka akan ditambahkannya satu rune secara acak. Rune tersebut tidak ditambahkan ke database. Data latihan soal yang diambil dari database ditampilkan kepada pengguna.

Pengguna dapat memilih jawaban, memakai rune atau keluar dari latihan.

Jika pengguna memilih jawaban dan jawaban tersebut benar maka akan menambahkan skor dan combo ke dalam data sementara yaitu latihan. Jika pengguna memilih jawaban dan jawaban tersebut tidak benar maka skor akan dikurangi dan combo akan kembali menjadi 0. Apabila pengguna menggunakan pemandu petarung maka akan diberi kesempatan sebesar 25%. Jika pengguna mendapatkan kesempatan tersebut maka pilihan jawaban yang dipilih oleh pengguna akant tereleminasi. Jika pengguna memilih memakai rune maka efek dari masing-masing rune akan diaktifkan dan jumlah rune pengguna yang dipakai akan dikurangi. Jika soal latihan habis maka lanjut ke halaman hasil latihan. Apabila soal latihan belum habis maka pengguna akan terus mengerjakan sampai latihan habis.

Pengguna dapat memilih untuk keluar dari latihan. Tetapi semua pekerjaan latihan pengguna akan hilang.

(57)

Gambar 3.42 Flowchart Hasil Latihan Aplikasi

Pada Gambar 3.42 menggambarkan alur kerja hasil latihan aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman hasil latihan.

Pada awal mula alur kerja hasil latihan aplikasi mengambil data latihan untuk disimpan progres subbab dan hadiah hasil latihan berupa koin dan xp. Jika pengguna memakai pemandu perompak atau petualang maka akan ditambahkannya 20% koin atau 30% xp dari koin atau xp hasil latihan. Hadiah tambahan tersebut akan disimpan ke dalam database. Setelah tersimpan ke dalam database, hasil latihan akan ditampilkan kepada pengguna. Setelah ditampilkan hasil latihan akan diproses ke penambahan progres penghargaan.

(58)

Gambar 3.43 Flowchart Pencapain Penghargaan Aplikasi

Pada Gambar 3.43 menggambarkan alur kerja pencapaian penghargaan aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP tampilan pencapain penghargaan. Pada awal mula alur kerja pencapaian penghargaan aplikasi menambahkan progres penghargaan ke database. Progres penghargaan tersebut akan dicek apakah mencapai sasaran pencapaian penghargaan. Jika progres penghargaan mencapai sasaran penghargaan maka penggunan akan mendapatkan

(59)

hadiah penghargaan. Hadiah penghargaan tersebut akan ditampilkan dalam berupa lencana.

Gambar 3.44 Flowchart Menu Profil Aplikasi

(60)

Pada Gambar 3.44 menggambarkan alur kerja menu profil aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu profil.

Pada awal mula alur kerja menu profil aplikasi menampilkan data pengguna, jumlah pemberian koin kepada pengguna, jumlah pengikut dan pengguna ikuti, lencana penghargaan yang dicapai pengguna, dan menampilkan papan peringkat skor tertinggi yang diambil datanya dari database. Pengguna dapat memilih untuk melihat pemberian koin, daftar pengikut, daftar pengguna ikuti, daftar progres penghargaan, memilih mengikuti pengguna lain dan logout.

Gambar 3.45 Flowchart Menu Pemberian Koin Aplikasi

Pada Gambar 3.45 menggambarkan alur kerja menu pemberian koin aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu pemberian koin. Pada awal mula alur kerja menu pemberian koin aplikasi menampilkan daftar pemberian koin kepada pengguna. Pengguna dapat memilih untuk menerima pemberian koin yang diberikan. Jika pengguna menerima pemberian koin data pemberian koin akan diperbaharui dan koin pada pengguna akan ditambahkan.

(61)

Gambar 3.46 Flowchart Menu Pengikut Aplikasi

Pada Gambar 3.46 menggambarkan alur kerja menu pengikut aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu pengikut. Pada awal mula alur kerja menu pengikut aplikasi menampilkan daftar pengikut pengguna. Pengguna dapat memilih untuk mengikuti pengguna atau berhenti mengikuti pengguna. Jika pengguna mengikuti atau berhenti mengikuti pengguna lain maka akan diperbaharui ke database.

(62)

Gambar 3.47 Flowchart Menu Mengikuti Aplikasi

Pada Gambar 3.47 menggambarkan alur kerja menu mengikuti aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu mengikuti. Pada awal mula alur kerja menu mengikuti aplikasi menampilkan daftar

(63)

pengguna ikuti. Pengguna dapat memilih untuk mencari pengguna lain, memberi koin, mengikuti pengguna, berhenti mengikuti pengguna. Jika pengguna memilih untuk mencari pengguna maka akan lanjut ke halaman mencari pengguna.

Pengguna yang memilih untuk memberikan koin kepada pengguna lain yang diikuti maka pemberian koin tersebut akan dimasukkan ke dalam database. Jika pengguna mengikuti atau berhenti mengikuti pengguna lain maka akan diperbaharui ke database.

Gambar 3.48 Flowchart Menu Cari Pengguna Aplikasi

Pada Gambar 3.48 menggambarkan alur kerja menu cari pengguna aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu cari pengguna. Pada awal mula alur kerja menu cari pengguna aplikasi menampilkan kolom input untuk mencari pengguna lain. Setelah pengguna mencari maka akan menampilkan daftar pengguna yang sesuai dengan pengguna cari. Dari

(64)

daftar pencarian pengguna, pengugna dapat memilih untuk mengikuti Pengguna dapat memilih untuk mencari pengguna lain, memberi koin, mengikuti pengguna, berhenti mengikuti pengguna. Jika pengguna memilih untuk mencari pengguna maka akan lanjut ke halaman mencari pengguna. Pengguna yang memilih untuk memberikan koin kepada pengguna lain yang diikuti maka pemberian koin tersebut akan dimasukkan ke dalam database. Jika pengguna mengikuti atau berhenti mengikuti pengguna lain maka akan diperbaharui ke database.

Gambar 3.49 Flowchart Menu Penghargaan Aplikasi

Pada Gambar 3.49 menggambarkan alur kerja menu penghargaan aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu penghargaan. Pada halaman penghargaan akan menampilkan daftar penghargaan beserta progres pengguna penghargaan.

(65)

Gambar 3.50 Flowchart Menu Toko Aplikasi

Pada Gambar 3.50 menggambarkan alur kerja menu toko aplikasi pada sitemap aplikasi gamifikasi pembelajaran matematika SMP halaman menu toko.

Pada awal mula alur kerja menu toko aplikasi menampilkan daftar pemandu dan daftar rune yang diambil dari database. Penguna dapat membeli pemandu atau rune di dalam halaman ini. Jika pengguna membeli pemandu atau rune maka akan ditambahkan ke dalam database. Setelah pengguna membeli akan dilanjutkan ke proses menambahkan progres penghargaan.

(66)

3.3.4 Database Schema

Database schema dibuat untuk menunjukan struktur kerangka tentang bagaimana data diatur dan bagimana hubungan antara setiap data saling terkait.

Gambar 3.51 Database Schema Sistem Gamifikasi Pembelajaran Matematika SMP

(67)

3.3.5 Struktur Tabel

Struktur tabel dibuat untuk menjelaskan struktur data-data yang terdapat di dalam sistem basis data yang digunakan untuk penelitian ini. Berikut adalah penjelasan dari masing-masing tabel yang digunakan dalam database pada sistem gamifikasi pembelajaran matematika SMP.

1. Nama tabel : admin

Fungsi: Menyimpan data akun admin yang digunakan pada website admin.

Primary Key : id Foreign Key : -

Tabel 3.5 Struktur Tabel admin

No Nama Kolom Tipe Data Keterangan

1. id int(11) Primary Key, Auto Increment

2. email varchar(200) Email dari admin

3. password varchar(50) Password dari pengguna 4. password_salt varchar(5) Salt dari password pengguna 5. last_login timestamp Waktu terakhir kali admin login

2. Nama tabel : user

Fungsi: Menyimpan data pengguna pada aplikasi gamifikasi pembelajaran matematika SMP.

Primary Key : id

Foreign Key : fk_guider_id

Tabel 3.6 Struktur Tabel user

2. username varchar(200) Username dari pengguna

3. email varchar(50) Email dari pengguna

(68)

Tabel 3.6 Struktur Tabel user (Lanjutan)

No Nama Kolom Tipe Data Keterangan

4. password varchar(5) Password dari pengguna 5. password_salt timestamp Salt dari password pengguna

6. coin int(11) Jumlah koin pengguna

7. xp int(11) Jumlah poin experince pengguna

8. fk_guider_id int(11) Foreign Key dari id pemandu 9. last_login timestamp Waktu terakhir kali pengguna

login

10. join_date timestamp Waktu pengguna melakukan pendaftaran

3. Nama tabel : chapter

Fungsi: Menyimpan data bab pada aplikasi gamifikasi pembelajaran matematika.

Tabel 3.7 Struktur Tabel chapter

2. name varchar(200) Judul dari bab

3. picture varchar(200) Nama file dari gambar bab

4. Nama tabel : subbab

Fungsi: Menyimpan data subbab pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_chapter_id

(69)

Tabel 3.8 Struktur Tabel subbab

2. name varchar(200) Judul dari subbab

3. picture varchar(200) Nama file dari gambar subbab 4. final_test tinyint(1) Menyimpan nilai subbab

merupakan ujian atau bukan 5. fk_chapter_id int(11) Foreign Key dari id subbab

5. Nama tabel : explanation

Fungsi: Menyimpan data penjelasan pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_subbab_id

Tabel 3.9 Struktur Tabel explanation

2. content text Menyimpan isi penjelasan dari subbab

3. fk_subbab_id int(11) Foreign Key dari id subbab

6. Nama tabel : question

Fungsi: Menyimpan data pertanyaan pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_subbab_id

Tabel 3.10 Struktur Tabel question

2. content text Menyimpan pertanyaan

(70)

Tabel 3.10 Struktur Tabel question (Lanjutan)

3. hint text Menyimpan petunjuk pada

pertanyaan

4. fk_subbab_id int(11) Foreign Key dari id subbab

7. Nama tabel : answer

Fungsi: Menyimpan data pilihan jawaban pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_question_id

Tabel 3.11 Struktur Tabel answer

2. content text Menyimpan pilihan jawaban

3. status tinyint(1) Menyimpan pilihan jawaban benar atau salah

4. fk_question_id int(11) Foreign Key dari id pertanyaan

8. Nama tabel : runes

Fungsi: Menyimpan data runes pada aplikasi gamifikasi pembelajaran matematika.

Tabel 3.12 Struktur Tabel runes

2. name varchar(50) Nama dari rune

3. cost int(11) Biaya dari rune

4. picture varchar(200) Foreign Key dari id pertanyaan

(71)

Tabel 3.12 Struktur Tabel runes (Lanjutan)

5. description text Deskripsi dari rune

9. Nama tabel : guider

Fungsi: Menyimpan data pemandu pada aplikasi gamifikasi pembelajaran matematika.

Tabel 3.13 Struktur Tabel guider

2. name varchar(200) Nama dari pemandu

3. picture varchar(200) Menyimpan nama file dari pemandu

4. cost int(11) Biaya dari pemandu

5. ability text Kemampuan dari pemandu

6. description text Deskripsi dari pemandu

10. Nama tabel : achievement

Fungsi: Menyimpan data penghargaan pada aplikasi gamifikasi pembelajaran matematika.

Tabel 3.14 Struktur Tabel achievement

2. name varchar(100) Nama dari penghargaan

3. description text Deskripsi dari penghargaan

(72)

11. Nama tabel : achievement_type_reward

Fungsi: Menyimpan data tipe penghargaan pada aplikasi gamifikasi pembelajaran matematika.

Tabel 3.15 Struktur Tabel achievement_type_reward

2. name varchar(30) Nama dari tipe penghargaan

3. reward int(11) Jumlah hadiah dari tipe

penghargaan

12. Nama tabel : achievement_ reward

Fungsi: Menyimpan data sasaran penghargaan pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_achievement_id, fk_achievement_type_id Tabel 3.16 Struktur Tabel achievement_reward

1. id int(11) Primary Key, Auto

Increment 2. fk_achievement_id varchar(30) Foreign Key dari id

penghargaan 3. fk_achievement_type_id int(11) Foreign Key dari id tipe

penghargaan

4. goal int(11) Nilai capaian dari sasaran

penghargaan 5. picture varchar(200) Nama file dari sasaran

penghargaan

(73)

13. Nama tabel : achievement_ progress

Fungsi: Menyimpan data progres penghargaan pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_user_id, fk_achievement_id, fk_achievement_type_id Tabel 3.17 Struktur Tabel achievement_progress

Increment 2. fk_user_id varchar(30) Foreign Key dari id

pengguna 3. fk_achievement_id int(11) Foreign Key dari id

penghargaan

4. progress int(11) Nilai capaian dari

sasaran penghargaan 5. fk_achievement_type_reward_id varchar(200) Foreign Key dari id

tipe penghargaan

14. Nama tabel : user_follow

Fungsi: Menyimpan data pengguna ikuti pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_follower_id, fk_following_id

Tabel 3.18 Struktur Tabel user_follow

Increment 2. fk_follower_id int(11) Foreign Key dari id

pengguna mengikuti 3. fk_following_id int(11) Foreign Key dari id

penghargaan diikuti

4. status tinyint(1) Nilai status dari

pengguna ikuti

(74)

15. Nama tabel : subbab_progress

Fungsi: Menyimpan data progres subbab pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_user_id, fk_subbab_id

Tabel 3.19 Struktur Tabel subbab_progress

Increment

2. fk_user_id int(11) Foreign Key dari id

pengguna

3. fk_subbab_id int(11) Foreign Key dari id

subbab

4. score int(11) Nilai skor pengguna

dapatkan dari latihan 5. status_explanation tinyint(1)

Nilai pengguna sudah membaca

penjelasan atau belum

6. no_wrong tinyint(1)

Nilai pengguna tidak melakukan kesalahan dalam latihan atau tidak

7. no_runes tinyint(1)

Nilai pengguna tidak menggunakan rune

atau tidak

8. pass tinyint(1) Nilai berhasil

melewati latihan 16. Nama tabel : user_coin_log

Fungsi: Menyimpan data pemberian koin pengguna pada aplikasi gamifikasi pembelajaran matematika.

Primary Key : id

Foreign Key : fk_follower_id, fk_following_id

Tabel 3.20 Struktur Tabel user_coin_log

Increment