Perancangan M-Learning dengan Menggunakan Metode Gamification

(1)

PERANCANGAN M-LEARNING DENGAN MENGGUNAKAN

METODE GAMIFICATION

SKRIPSI

FITHRAH PRAWIRATAMA

091402005

PROGRAM STUDI S1 TEKNOLOGI INFORMASI

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI

UNIVERSITAS SUMATERA UTARA

MEDAN

2015

(2)

PERANCANGAN M-LEARNING DENGAN MENGGUNAKAN METODE GAMIFICATION

SKRIPSI

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh ijazah Sarjana Teknologi Informasi

FITHRAH PRAWIRATAMA 091402005

PROGRAM STUDI S1 TEKNOLOGI INFORMASI

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS SUMATERA UTARA

MEDAN 2015

(3)

PERSETUJUAN

Judul : PERANCANGAN M-LEARNING DENGAN

MENGGUNAKAN METODE GAMIFICATION

Kategori : SKRIPSI

Nama : FITHRAH PRAWIRATAMA

Nomor Induk Mahasiswa : 091402005

Program Studi : SARJANA (S1) TEKNOLOGI INFORMASI Departemen : TEKNOLOGI INFORMASI

Fakultas : ILMU KOMPUTER DAN TEKNOLOGI

INFORMASI (FASILKOMTI) UNIVERSITAS SUMATERA UTARA

Komisi Pembimbing :

Pembimbing 2 Pembimbing 1

Dedy Arisandi, ST, M.Kom M.Anggia Muchtar, ST.MM.IT NIP. 19790831 200912 1 002 NIP. 19800110 200801 1 010

Diketahui/Disetujui oleh

Program Studi S1 Teknologi Informasi Ketua,

M.Anggia Muchtar, ST.MMIT NIP. 19800110 200801 1010

(4)

PERNYATAAN

PERANCANGAN M-LEARNING DENGAN METODE GAMIFICATION

SKRIPSI

Saya mengakui bahwa skripsi ini adalah hasil karya saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing telah disebutkan sumbernya.

Medan, 2 Juli 2015

Fithrah Prawiratama 091402005

(5)

PENGHARGAAN

Alhamdulillah segala puji dan syukur penulis sampaikan kehadirat Allah SWT beserta Nabi Besar Muhammad SAW karena atas limpahan rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan skripsi ini sebagai syarat untuk memperoleh ijazah Sarjana Teknologi Informasi, Program Studi (S1) Teknologi Informasi Universitas Sumatera Utara. Penulis menyadari bahwa dalam pelaksanaannya banyak pihak yang telah membantu hingga selesainya skripsi ini. Ucapan terima kasih penulis sampaikan kepada :

1. Bapak Prof. Dr. Muhammad Zarlis selaku Dekan FASILKOM-TI USU.

2. Bapak M.Anggia Muchtar, ST.MMIT selaku ketua Program Studi (S1) Teknologi Informasi dan Bapak Mohammad Fadly Syahputra, B.Sc., M.Sc.IT selaku Sekretaris Program Studi (S1) Teknologi Informasi FASILKOM-TI USU yang telah memberi izin untuk melaksanakan kegiatan penelitian.

3. Bapak M. Anggia Muchtar, ST.MM.IT dan Bapak Dedy Arisandi, ST, M.Kom selaku dosen pembimbing yang telah meluangkan waktu dan pikirannya, memotivasi, memberikan kritik serta saran kepada penulis.

4. Ucapan terima kasih juga ditujukan kepada Ibu Sarah Purnamawati, S.T., M.Sc., dan Bapak Romi Fadillah Rahmat, B. Comp. Sc., M.Sc. yang telah bersedia menjadi dosen pembanding, serta semua dosen serta pegawai di Program Studi S1 Teknologi Informasi.

5. Ucapan terimakasih yang sangat besar penulis ucapkan kepada keluarga penulis yang telah memberikan dukungan baik materil dan spiritual. Ayahanda Ibennavis, SM. dan Ibunda Titin Efenti, Am. Kep. yang telah membesarkan penulis dengan kasih sayang yang tak terhingga. Dan juga kepada adik penulis, Hanifah Dwi Pratiwi, yang selalu menjadi sumber semangat dan inspirasi di dalam penulisan skripsi ini.

(6)

6. Terima kasih juga penulis ucapkan kepada teman-teman, Aang, Satria, Mulki, Ari, Hasmi, Bagus, Rozy, Gilbert, Alvin, Ranap, Salman, Dhimas, Yogi, Santana, Iqbal, Bang Franheit, serta teman-teman mahasiswa lainnya.

Sekali lagi penulis ingin mengucapkan terima kasih kepada semua pihak yang telah membantu dalam penyelesaian skripsi ini, semoga segala kebaikan, bantuan dan dukungannya dibalas oleh Allah SWT dengan nikmat yang berlimpah.

(7)

ABSTRAK

Perangkat bergerak telah menjadi kebutuhan sehari-hari. Baik untuk kalangan muda maupun dewasa. Akan tetapi, perangkat bergerak lebih banyak dimanfaatkan untuk kepentingan hiburan daripada untuk kebutuhan edukasi. Oleh karena itu, dibutuhkan alat bantu/media pembelajaran yang dapat mendukung fungsi edukasi perangkat bergerak, tetapi juga mempertahankan fungsi hiburannya. Gamification bukan berarti membuat konteks tersebut menjadi game, tetapi mengimplementasikan elemen game pada konteks yang bukan game. Pada penelitian ini digunakan metode gamification untuk meningkatkan kemauan siswa dalam menggunakan m-learning ini. Berdasarkan pengujian yang telah dilaksanakan selama 3 hari, diperoleh soal terjawab sebanyak 1.248 kali. Dengan implementasi gamification ke dalam sistem m-learning, fungsi edukasi perangkat bergerak dapat berjalan dengan baik dan tetap mempertahankan fungsi hiburannya secara bersamaan.

(8)

DESIGNING M-LEARNING BY UTILIZING GAMIFICATION METHOD

ABSTRACT

Mobile devices is already a part of daily life, either for youngsters and adults. However, mobile devices more widely used for entertainment rather than for the benefit of educational needs. Therefore, its required tools / media that can support the educational functions of mobile devices, but also retains its entertainment function. Gamification does not mean making a game, but implementing game elements into something that not game. In this study, gamification methods used to increase the willingness of students in using m-learning. Based on the testing that has been held for 3 days, it gained as much as 1.248 times question answered. With the implementation of gamification into m-learning systems, educational functions mobile devices can run well and retains its entertainment functions simultaneously.

(9)

DAFTAR ISI

PERSETUJUAN iii

PERNYATAAN iv

PENGHARGAAN v

ABSTRAK vii

ABSTRACT viii

DAFTAR ISI ix

DAFTAR GAMBAR xii

BAB I PENDAHULUAN 13

1.1. Latar Belakang ... 13

1.2. Rumusan Masalah ... 14

1.3. Tujuan Penelitian ... 14

1.4. Batasan Masalah ... 15

1.5. Manfaat Penelitian ... 15

1.6. Metodologi Penelitian ... 15

1.7. Sistematika Penulisan ... 16

BAB II LANDASAN TEORI 18 2.1. e-Learning ... 18

2.2. m-Learning ... 20

2.3. Gamification ... 22

2.4. Teknik Penelitian Terdahulu ... 30

BAB III ANALISIS DAN PERANCANGAN 32 3.1. Identifikasi Masalah ... 32

3.2. Analisis Kebutuhan Sistem ... 32

3.2.1. Kebutuhan fungsional sistem 32 3.2.2. Kebutuhan nonfungsional sistem 33 3.3. Analisis Data ... 34

3.4. Perancangan Sistem ... 34

(10)

3.4.2. Flowchart 35

3.4.3. Data flow diagram 38

3.4.4. Use case diagram 38

3.4.5. Use case Specification 39

3.4.6. Gamification 48

3.5. Perancangan antarmuka sistem ... 49 3.6. Storyboard ... 58

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 59

4.1. Implementasi Sistem ... 59

4.1.1. Lingkungan Implementasi 59

4.2. Implementasi Perancangan Antarmuka ... 60

4.2.1. Halaman Login 60

4.2.2. Halaman Registrasi 61

4.2.3. Halaman Tutorial 62

4.2.4. Halaman Home 63

4.2.5. Panel Navigasi 64

4.2.6. Halaman Profil 65

4.2.7. Halaman Ketertarikan 66

4.2.8. Halaman Kehidupan kampus dan Adu pintar 67

4.2.9. Halaman Leaderboard 71

4.2.10.Halaman Forum 72

4.2.11.Halaman Cari User 73

4.2.12.Halaman Admin 73

4.3. Pengujian Sistem ... 74

4.3.1. Rencana Pengujian Sistem 74

4.3.2. Hasil Pengujian Sistem 74

BAB V KESIMPULAN DAN SARAN 78

5.1. Kesimpulan ... 78 5.2. Saran ... 78

DAFTAR PUSTAKA 79

(11)

DAFTAR TABEL

Hal.

Tabel 2.1. Penelitian Terdahulu 31

Tabel 3.1. Use Case Spesifikasi untuk Use Case Mata Pelajaran 39 Tabel 3.2. Use Case Spesifikasi untuk Use Case Laporan Penyalahgunaan 40 Tabel 3.3. Use Case Spesifikasi untuk Use Case Set Level User 41 Tabel 3.4. Use Case Spesifikasi untuk Use Case Blok User 42 Tabel 3.5. Use Case Spesifikasi untuk Use Case Story 42 Tabel 3.6. Use Case Spesifikasi untuk Use Case Cari Pengguna 43 Tabel 3.7. Use Case Spesifikasi untuk Use Case Forum 43 Tabel 3.8. Use Case Spesifikasi untuk Use Case Leaderboard 44 Tabel 3.9. Use Case Spesifikasi untuk Use Case Belajar 45 Tabel 3.10. Use Case Spesifikasi untuk Use Case Tutorial 46 Tabel 3.11. Use Case Spesifikasi untuk Use Case Profil 46

(12)

DAFTAR GAMBAR

Hal.

Gambar 2.1. M-Learning sebagai penghubung antar pelajar dengan pengajar 20

Gambar 2.2. Social engagment loop 25

Gambar 2.3. Elemen point 25

Gambar 2.4. Elemen Leaderboard 26

Gambar 2.5. Elemen badges 27

Gambar 2.6. Elemen challenge & quest 28

Gambar 2.7. Elemen onboarding 29

Gambar 3.1. General architecture sistem m-learning 34

Gambar 3.2. Flowchart Sistem 35

Gambar 3.3. Flowchart belajar 36

Gambar 3.4. Flowchart pengacakan soal dan jawaban 37

Gambar 3.5. Data Flow Diagram 38

Gambar 3.6. Use Case Diagram 39

Gambar 3.7. Rancangan halaman login 50

Gambar 3.8. Rancangan halaman registrasi 50

Gambar 3.9. Rancangan halaman utama 51

Gambar 3.10. Rancangan halaman profil 52

Gambar 3.11. Rancangan halaman belajar 53

Gambar 3.12. Rancangan halaman leaderboard 54

Gambar 3.13. Rancangan halaman pesan 55

Gambar 3.14. Rancangan halaman forum 56

Gambar 3.15. Rancangan halaman cari pengguna 57

Gambar 3.16. Rancangan halaman tutorial 57

Gambar 3.17. Storyboard salah satu materi m-learning 58

Gambar 4.1 Halaman Login 60

Gambar 4.2 Halaman Registrasi 61

Gambar 4.3 Halaman Tutorial 62

Gambar 4.4 Halaman Home 63

Gambar 4.5 Panel Navigasi 64

Gambar 4.6 Halaman Profil 65

Gambar 4.7 Halaman Ketertarikan 66

Gambar 4.8 Halaman kehidupan kampus dan adu pintar 67 Gambar 4.9 Dosen memperkenalkan Mr. Lerdorf kepada siswa 68 Gambar 4.10 Materi interaktif menyamakan materi pelajaran dengan kehidupan

sehari-hari 69

Gambar 4.11 Tanya jawab siswa dengan pengajar 70

Gambar 4.12 Halaman Leaderboard / Ranking 71

Gambar 4.13 Halaman Forum 72

Gambar 4.14 Halaman Cari User 73

Gambar 4.15 Halaman admin dan manajemen mata pelajaran 73

Gambar 4.16 Grafik login peserta selama 3 hari 75

Gambar 4.17 Grafik intensitas login peserta perhari 75 Gambar 4.18 Grafik soal yang dijawab dengan benar selama 5 fase adu pintar 76 Gambar 4.19 Grafik skor yang didapatkan oleh peserta 77

(13)

ABSTRAK

(14)

DESIGNING M-LEARNING BY UTILIZING GAMIFICATION METHOD

ABSTRACT

(15)

BAB I PENDAHULUAN

1.1. Latar Belakang

Perangkat mobile atau perangkat bergerak bukanlah sebuah barang baru lagi. Perangkat bergerak beragam jenisnya, dari perangkat dengan harga terjangkau sampai perangkat dengan harga yang sangat tinggi. Di Indonesia sendiri sudah bermunculan perangkat bermerek lokal dengan harga yang cukup terjangkau, sehingga masyarakat kelas menengah dapat memiliki perangkat bergerak. (Suryadhi, 2013).

Mobile Learning atau m-Learning menawarkan cara yang modern untuk proses belajar melalui perangkat bergerak seperti ponsel pintar dan komputer tablet. Dengan adanya m-Learning, proses belajar dapat dilakukan kapan dan dimana saja. (Unesco, 2013).

Penggunaan perangkat bergerak, baik itu ponsel pintar maupun tablet masih belum maksimal, dimana perangkat bergerak ini hanya digunakan untuk bertelepon, SMS, chatting, dan mengakses situs jejaring sosial. Ada juga pengguna perangkat bergerak ini sebagai media hiburan seperti untuk bermain permainan sampai menonton film. Survei yang dilakukan oleh Asosiasi Penyelenggara Jasa Internet Indonesia (APJII) pada tahun 2012 menunjukkan bahwa penduduk indonesia mengakses internet menggunakan ponsel pintar dengan jumlah 70,1 persen dari seluruh pengguna internet Indonesia. Penduduk berusia berusia 12 - 34 tahun mendominasi pengguna Internet di Indonesia dengan porsi 64,2 persen. (Santoso, 2012).

Salah satu metode e-Learning yang banyak dipakai adalah multimedia-based

e-learning, dimana metode ini menggabungkan teks, video, animasi, suara, dan

banyak jenis media lainnya. Tetapi pembangunan e-Learning ini membutuhkan waktu dan biaya yang tidak sedikit. Selain itu, developer harus mengetahui apakah target pengguna dari e-Learning yang dibangunnya memiliki perangkat yang memadai.

(16)

(Tarawneh et al, 2012). Penelitian mengenai e-Learning yang telah dilakukan sebelumnya adalah dengan menggunakan teknik case-based e-learning (Choi et al, 2004), story-based e-learning (Gjedde, 2006), simulation-based e-learning (Bosman, 2002), dan teknik lainnya.

Dalam tugas akhir ini, sistem e-Learning yang dikembangkan diperuntukkan untuk perangkat bergerak menggunakan teknik gamification yang merupakan pengimplementasian elemen yang ada pada permainan dan teknik desain permainan pada konteks yang bukan permainan. Gamification dapat memotivasi orang untuk melakukan sesuatu yang biasanya tidak dilakukan menjadi mau untuk terus melakukan kegiatan tersebut (Werbach & Hunter 2012). Teknik gamification sendiri telah digunakan dalam beberapa kasus seperti aplikasi pendukung untuk berolahraga (Mueller et al, 2011), peningkatan efisiensi dan kepuasan pelanggan pada aplikasi

enterprise SAP (Makanawala et al, 2013), dan monitoring polusi suara (Marti et al,

2012).

Oleh karena itu, pada penelitian ini akan dirancang sebuah media m-learning

untuk memaksimalkan penggunaan perangkat bergerak sebagai media edukasi dimana media ini dibangun dengan konsep gamification.

1.2. Rumusan Masalah

Berdasarkan penjelasan pada latar belakang, maka rumusan masalah dalam penulisan tugas akhir ini adalah bagaimana meningkatkan kemauan untuk belajar siswa melalui perangkat bergeraknya (mobile device) dan tetap mempertahankan sisi hiburannya.

1.3. Tujuan Penelitian

Adapun tujuan dari penelitian ini adalah mengetahui pengaruh metode gamification

yang diterapkan pada media m-learning, dapat mempengaruhi kemauan siswa untuk belajar melalui perangkat bergeraknya.

(17)

1.4. Batasan Masalah

Adapun batasan masalah dalam penelitian ini yaitu:

1. Model belajar yang akan digunakan adalah Learner-led E-Learning.

2. Elemen gamification yang dipakai adalah points, leaderboard, challenge &

quest, onboarding, dan social engagement loop.

3. Fitur m-Learning yang dipakai adalah bahan materi, kuis, dan forum diskusi.

4. Mata kuliah yang dipakai dalam pengujian adalah Pemrograman Internet.

1.5. Manfaat Penelitian

Manfaat dari penelitian ini yaitu:

1. Menambah sarana belajar informal bagi mahasiswa Fasilkom-TI USU. 2. Membangun komunikasi antar pelajar yang dimana pelajar tersebut jarang

bertemu di dunia nyata.

3. Memaksimalkan fungsi edukasi dari perangkat bergerak.

1.6. Metodologi Penelitian

Metodologi penelitian yang digunakan pada penelitian ini adalah:

a. Studi Literatur

Pada tahap ini dilakukan studi kepustakaan, yaitu proses mengumpulkan bahan referensi mengenai m-Learning dan penerapan gamification dari berbagai buku, jurnal, artikel, dan beberapa referensi lainnya.

b. Analisis

Pada tahap ini dilakukan analisis terhadap studi literatur untuk mengetahui dan mendapatkan pemahaman mengenai gamification untuk efek penerapannya pada m-Learning.

(18)

c. Perancangan

Pada tahap perancangan sistem dilakukan perancangan arsitektur, pengumpulan data, dan merancang antarmuka. Proses perancangan ini dilakukan berdasarkan hasil analisis studi literatur yang telah didapatkan.

d. Implementasi

Pada tahap implementasi sistem ini akan dilakukan pengkodean progam menggunakan PHP, javascript, dan MySQL.

e. Pengujian

Pada tahap ini dilakukan pengujian aplikasi m-Learning kepada beberapa responden guna memastikan aplikasi telah berjalan sesuai dengan apa yang diharapkan.

f. Dokumentasi dan Penyusunan Laporan

Pada tahap ini dilakukan dokumentasi hasil analisis dan implementasi

gamification untuk melihat pengaruh yang timbul dari penerapannya pada

m-Learning.

1.7. Sistematika Penulisan

Metodologi penelitian yang digunakan pada penelitian ini adalah:

Bab I : Pendahuluan

Pada bab pendahuluan ini, penulis akan mengumpulkan informasi lebih jauh tentang permasalahan yang akan dibahas, m-Learning, dan penerapan

gamification untuk permasalahan ini.

Bab II : Landasan Teori

Tinjauan pustaka menguraikan landasan teori, kerangka pikir, dan hipotesis yang diperoleh dari acuan yang mendasari dalam melakukan kegiatan penelitian pada tugas akhir ini.

(19)

Bab III : Analisis dan Perancangan

Bab ini menguraikan metodologi penelitian yang diakukan dalam mengembangkan m-Learning dengan menerapkan metode gamification agar sesuai dengan tujuan proyek tugas akhir ini.

Bab IV : Implementasi dan Pengujian Sistem

Pada bab hasil dan pembahasan akan memaparkan hasil terhadap uji coba pendekatan yang telah dilakukan dalam mengoptimalisasi sistem m-Learning

yang telah ada.

Bab V : Kesimpulan dan Saran

Bab ini berisi tentang kesimpulan hasil penelitian dan saran-saran yang berkaitan dengan penelitian selanjutnya.

(20)

BAB II

LANDASAN TEORI

Bab ini membahas tentang teori penunjang dan penelitian sebelumnya yang berhubungan dengan penerapan teknik gamification pada m-Learning.

2.1. e-Learning

E-Learning adalah komunikasi secara langsung ataupun tidak langsung melalui media

elektronik untuk tujuan mengumpulkan dan memastikan kebenaran dari sebuah ilmu pengetahuan. Pondasi teknologi dari e-learning adalah internet dan teknologi komunikasi lainnya (Garrison, 2011).

Pada tahun 2003 William Horton dan Katherine Horton membagi e-Learning menjadi 5 jenis.

1. Learner-ledE-Learning

Tipe ini disebut juga dengan self-directed e-learning, dimana model ini ditujukan untuk belajar secara mandiri. Konten dari e-learning model ini dapat berupa halaman web, presentasi, dan konten interaktif lainnya yang diletakkan di server web. Seluruh konten diakses melalui web browser. Seluruh instruksi diberikan melalui materi pelajaran. Tidak ada pengajar yang mendampingi ataupun memberi bantuan pada model e-Learning ini. Learner-led E-learning

tidak sama dengan Computer Based Learning (CBT) dari CD-ROM, dimana pelajar tidak perlu terhubung ke internet.

2. Instructor-ledE-Learning

Instructor-led E-learning adalah kebalikan dari Learner-led

(21)

instruktor/guru yang membawa kelas tersebut. Model E-Learning ini berjalan secara real-time, dimana layaknya sebuah ruang kelas biasa, hanya saja komunikasi pelajar dengan pengajar tidak berkumpul dalam suatu ruangan, melainkan melalui konferensi video. Model E-Learning ini adalah model yang sangat nyaman untuk pelajar, tetapi beberapa materi pelajaran tidak mungkin disampaikan melalui video internet seperti salah satunya praktek secara langsung dan terkadang pengajar masih belum mampu mengajar jarak jauh.

3. FacilitatedE-learning

Facilitated E-Learning adalah kombinasi dari Learner-led E-Learning

dan Instructor-led E-learning. Model ini sangat menguntungkan pelajar yang

tidak memiliki jadwal yang tetap, sehingga pelajar tersebut dapat mengikuti pelajaran kapan saja. Bahan belajar juga disampaikan melalui website dan komunikasi interaktif dan kolaboratif juga dilakukan melalui website (forum,

chat, dan lain-lain). Perbedaan Facilitated E-learning dengan Instructor-led

E-learning adalah, pada Instructor-led E-learning, pengajar benar-benar

mengajar secara langsung. Sedangkan pada Facilitated E-Learning, pengajar hanya mengarahkan dan memberi bantuan ke pelajar melalui forum diskusi, chatting ataupun konferensi pada waktu-waktu tertentu.

4. EmbeddedE-Learning

Embedded E-Learning menawarkan moden just-in-time training,

dimana ilmu yang diperlukan hanya dipakai saat itu saja. Biasanya konten E-Learning ini diletakkan ditanam di program komputer, help file, web, atau aplikasi jaringan. Sebagai contoh, apabila seorang pengguna ingin menghubungkan printer ke komputer miliknya, maka dia dapat membuka help file printer tersebut dan mengikuti tutorial singkat bagaimana menghubungkan printer tersebut ke komputernya. Salah satu kendala model E-Learning ini adalah biasanya ukurannya yang sangat besar salah satu contohnya adalah

MSDN Library milik Microsoft. Akan tetapi masalah ini sudah bisa teratasi dengan kecepatan internet yang semakin cepat dan kapasitas penyimpanan yang semakin besar.

(22)

5. Telementoring dan E-Coaching

Model ini banyak dipakai untuk melakukan pelatihan dan bimbingan jarak jauh. Media yang dipakai biasanya konferensi video, telepon internet, pesan instan, serta media lainnya yang dapat membantu proses pelatihan ataupun bimbingan. Biasanya materi yang disampaikan adalah materi yang tidak banyak dijumpai dalam buku. Banyak perusahaan menengah sampai perusahaan besar menggunakan model ini untuk melatih karyawannya. Perusahaan juga dapat mengetahui dan mengontrol kemampuan apa saja yang harus dimiliki oleh karyawannya.

2.2. m-Learning

Definisi dari m-Learning adalah segala bentuk proses pembelajaran dimana lokasi dari pelajar tidak tetap dan tidak ditentukan sebelumnya, atau proses pembelajaran dimana pelajar memanfaatkan kesempatan belajar yang ditawarkan oleh teknologi mobile

(O`Malley et al. 2005). M-Learning adalah bagian dari e-Learning. Perangkat yang digunakan untuk m-Learning harus dapat terhubung dengan perangkat lain dengan teknologi tanpa kabel (wireless) untuk dapat menyajikan konten edukasi dan hubungan antara pelajar dan pengajar. (Giorgiev et al. 2004).

Pelajar 1

Pelajar 2

Pelajar 3

Pelajar 4

Pelajar 5

Pelajar 6

Pengajar M-Learning Server

Gambar 2.1.M-Learning sebagai penghubung antar pelajar dengan pengajar Dalam mendesain mobile learning, Naismith & Corlett (2006) memberikan beberapa saran, diantaranya

(23)

2. Material pelajaran yang disampaikan bersifat ringan dan fleksibel. 3. Penambahan nilai lebih yang dapat meningkatkan pengalaman pelajar. 4. Dapat digunakan pada banyak jenis perangkat

5. Penggunaan teknologi bergerak tidak hanya sebagai pengantar materi pelajaran, tetapi juga sebagai fasilitas belajar.

6. Terpusat pada pelajar, bukan pada pengajar.

Naismith & Corlett (2006) juga menyebutkan terdapat lima faktor kritikal yang mempengaruhi kesuksesan proyek mobile learning.

1. Ketersediaan teknologi: memanfaatkan perangkat apa saja yang dimiliki oleh pelajar. Universitas Cape Town berhasil memanfaatkan perangkat yang dimiliki oleh pelajar dengan teknologi SMS untuk sarana belajar.

2. Bantuan Institusi: pelatihan operator yang akan menangani proyek, dan adanya layanan bantuan untuk pelajar.

3. Keterhubungan: Adanya keterhubungan antar pelajar maupun kepada operator melalui internet ataupun telepon. Tanpa keterhubungan dapat mengakibatkan gangguan kepada kegiatan bergerak.

4. Integrasi: Adanya integrasi kepada kurikulum, pengalaman, atau kehidupan sehari-hari dari pelajar.

5. Kepemilikan: Adanya bantuan peminjaman perangkat bergerak kepada pelajar yang tidak memiliki perangkat. Pelajar dibebaskan memakai perangkat tersebut. Hal ini akan memotivasi pelajar untuk mengikuti

m-learning, dikarenakan beberapa pelajar dapat merasa bangga karena

(24)

2.3. Gamification

Gamification adalah pengimplementasian elemen yang ada pada game dan teknik

desain game pada konteks yang bukan game. Gamification dapat memotivasi orang untuk melakukan sesuatu yang biasanya tidak dilakukan menjadi mau untuk terus melakukan kegiatan tersebut (Werbach & Hunter 2012).

Google play store membagi permainan menjadi beberapa kategori, diantaranya:

1. Arcade & Action, kategori ini mengelompokkan permainan yang

mengandung unsur aksi. Beberapa permainan yang masuk kategori ini adalah Modern Combat, Dead Trigger, Zenonia, dan lain-lain.

2. Brain & Puzzle, kategori ini mengelompokkan permainan berunsur puzzle

dimana puzzle ini biasanya merangsang otak untuk berpikir. Beberapa permainan yang masuk kategori ini adalah Zuma, Tetris, dan lain-lain.

3. Cards & Casino, kategori ini mengelompokkan permainan berunsur

permainan kartu. Contoh permainannya adalah permainan poker.

4. Casual, kategori ini mengelompokkan permainan yang dapat dimainkan

sehari-hari secara terus menerus dan memiliki pola permainan yang sama. Beberapa permainan yang masuk kategori ini adalah Pou dan ular tangga.

5. Racing, kategori ini mengelompokkan permainan yang memiliki unsur

balapan. Beberapa permainan yang masuk kategori ini adalah Asphalt 8, Real Racing, CSR Racing, dan lain-lain.

6. Sport, kategori ini mengelompokkan permainan simulasi olahraga.

Pada tahun 2011, Zichermann & Cunningham menyebutkan beberapa elemen game yang dapat diambil untuk diterapkan pada hal yang bukan game tadi, diantaranya:

1. Points

Point adalah elemen utama dari seluruh sistem yang digamifikasi. Dengan

(25)

pemakai sistem kita. Point juga dapat ditampilkan kepada pemakai sistem sehingga pemakai dapat melihat kegiatan yang belum perlu dia lakukan.

Secara umum point terbagi menjadi 5 jenis:

1. Experience point.

Experience point (XP) merupakan point yang paling utama. Setiap

kegiatan yang dilakukan pengguna sistem akan mendapatkan XP. XP dapat menjadi tolak ukur pengguna mana yang sering berinteraksi dengan sistem.

2. Redeemable point.

Redeemable point (RP) berfungsi sebagai alat tukar dalam sistem. RP

secara umum akan membangun ekonomi virtual dalam sistem. Biasanya RP lebih sering dinamai gold, silver, cash, dan lain-lain.

3. Skill Point.

Skill point merupakan point yang dapat dialokasikan untuk

mendapatkan sebuah kemampuan yang lebih dalam sebuah sistem. Misalnya kemampuan untuk menambah jangka waktu untuk menyelesaikan sebuah misi.

4. Reputation Point.

Reputation Point merupakan point yang dapat diberikan dari seorang

pengguna sistem ke pengguna lain. Biasanya karma point berupa

point yang bernilai “baik” dan “buruk”. Point ini dapat membantu

pengguna untuk mengetahui apakah pengguna lainnya adalah pengguna yang baik atau buruk. Reputation point dapat diberikan kepada orang yang sama berulang kali.

2. Leaderboard

Leaderboard merupakan media untuk menampilkan urutan terbaik dari semua

aspek interaksi pemain. Biasanya semua pemain diurutkan dari yang memiliki nilai terbesar hingga yang paling kecil. Leaderboard juga menunjukkan status sosial dalam permainan. Pemain di peringkat atas biasanya akan merasa puas

(26)

dengan pencapaiannya, sedangkan pemain di peringkat bawah akan berusaha untuk mengejar nilai peringkat atas. Leaderboard ada sebagai media interaksi sosial yang mengarah kepada kompetisi.

3. Badges

Setiap orang suka mengumpulkan berbagai macam koleksi. Keinginan untuk memiliki sesuatu pasti ada dalam diri setiap orang. Biasanya apabila koleksi yang dimilikinya belum lengkap, orang akan selalu berusaha dengan keras untuk melengkapinya.

4. Challenge & Quest.

Terkadang beberapa pengguna sistem tidak tahu apa tujuan dari menggunakan sebuah sistem. Challenge & Quest memberikan arahan apa yang harus dilakukan pengguna sistem / pemain. Dengan adanya challange & quest ini, pengguna sistem akan terus tetap menggunakan sistem dan tujuan fundamental dari sistem ini tercapai.

5. Onboarding

Onboarding merupakan langkah yang diambil untuk memperkenalkan sistem

kepada pengguna baru. Saat-saat pertama untuk pengguna baru dalam menggunakan sebuah sistem atau memainkan sebuah permainan adalah saat yang sangat penting untuk meyakinkan pengguna baru tersebut bahwa sistem yang ditawarkan menarik dan manfaat penggunaan untuk jangka panjang, sehingga pengguna baru tersebut memiliki keinginan yang kuat untuk terus menggunakan sistem tersebut.

6. Social Engagement Loop

Sebuah motivasi akan membawa pengguna untuk melakukan sebuah kegiatan, kemudian pengguna menyelesaikan kegiatan tersebut, dan pengguna akan dihadapkan dengan hasil kerjanya yang tampak atau hadiah yang diberikan, kemudian akan membangkitkan kembali motivasi untuk mengulangnya. Ilustrasi konsep ini dapat dilihat pada gambar 2.

(27)

Gambar 2.2. Social engagment loop

Berikut ini adalah sampel pengambilan gambar layar dari 2 permainan top tahun 2013 di google play, yaitu Asphalt 8 : Airborne dari Gameloft dan Ayakashi : Ghost Guild dari Zynga.

1. Elemen Points.

Biasanya semakin banyak point maka akan semakin bagus pula pemain tersebut memainkan permainan. Semakin tinggi point biasanya meningkatkan percaya diri pemain dari lawan-lawannya. Elemen point

dapat dilihat pada gambar 2.3.

Halaman info dari Asphalt 8 menampilkan info pemain, dari jumlah uang yang dimiliki sampai jumlah balapan yang diikuti.

Halaman utama dari Ayakashi menampilkan poin dasar yang dimiliki seperti silver dan gold.

Gambar 2.3. Elemen point

Motivasi

Panggilan untuk melakukan

kegiatan Progress yang

tampak / hadiah

Penyelesaian kegiatan

(28)

2. Elemen Leaderboard

Semakin tinggi posisi pemain semakin hebat pula dia dimata pemain lain. Semakin rendah posisi pemain lain biasanya tidak akan memperhitungkan kehebatan pemain tersebut. Elemen leaderboard dapat dilihat pada gambar 2.4.

Halaman leaderboard menampilkan posisi pemain di urutan keberapa.

Ayakashi hanya menampilkan urutan seratus terbaik. Biasanya diisi oleh para pemain yang membeli barang dalam permainan menggunakan uang asli (real money).

(29)

3. Elemen Badges

Semakin banyak badges yang dikumpulkan maka pemain akan mengetahui seberapa lama lagi dia akan menyelesaikan permainan tersebut. Elemen

badges dapat dilihat pada gambar 2.5.

Halaman badges pada Asphalt 8 menampilkan jumlah kegiatan yang dicapai dalam permainan, seperti badge “Master of Garage” mengharuskan pemain memiliki semua mobil dalam permainan.

Ayakashi menggunakan model badges berulang dimana pemain harus menemukan kartu bertipe Api, Air atau Tanah dengan jumlah yang ditentukan untuk mendapatkan bonus.

(30)

4. Elemen Challenge & Quest

Apabila misi dan tantangan berhasil diselesaikan oleh pemain, biasanya pemain tersebut akan puas dan menginginkan terus untuk melanjutkan ke misi berikutnya. Elemen Challenge & Quest dapat dilihat pada gambar 2.6.

Asphalt 8 memberikan tantangan seperti menabrak mobil lawan dengan jumlah yang ditentukan,

Ayakashi memberikan tantangan untuk mengumpulkan sejumlah token dalam investigasi kemudian dapat ditukar dengan hadiah.

(31)

5. Elemen Onboarding

Apabila pemain tidak diarahkan terlebih dahulu, pemain akan membutuhkan waktu lebih untuk mengetahui fitur yang ada dalam permainan. Elemen onboarding dapat dilihat pada gambar 2.7.

Sebelum memulai permainan Asphalt 8 mengajarkan bagaimana dasar permainan kepada pemain.

Sebelum memulai permainan Ayakashi memberikan info apa saja fitur yang ada dalam permainan.

(32)

6. Social engagement loop

Menunjukkan hasil bermain kepada orang lain terkadang menimbulkan kebanggaan tersendiri terhadap diri pemain.

Motivasi Memainkan permainan. Memainkan permainan. Panggilan untuk

melakukan kegiatan

Menggunakan mobil yang tercepat.

Event bulanan dari Zynga.

Penyelesaian kegiatan

Balapan dengan mobil awal untuk mendapatkan uang,

Mengikuti event dan masuk ke dalam urutan pemain yang mendapat hadiah event.

Hasil / progress

yang terlihat.

Mobil paling cepat terbeli.

Hadiah event terbaik didapat.

2.4. Teknik Penelitian Terdahulu

Metode yang dipakai untuk e-Learning telah banyak digunakan, diantaranya

case-based e-Learning, story-case-based e-Learning, dan simulation-based e-Learning.

Ikeson Choi bersama rekan-rekannya mengembangkan sebuah media pembelajaran elektronik untuk mahasiswa kedokteran gigi di korea pada tahun 2004 dengan menggunakan teknik case-based e-Learning. Adapun langkah yang dilakukan oleh Choi dan rekannya sebagai berikut :

1. Pelajar memilih kasus yang disediakan. 2. Pelajar menonton video kasus.

3. Pelajar menonton tanggapan ahli mengenai kasus tersebut. 4. Pelajar menonton ahli tersebut menangani kasus tersebut.

5. Pelajar menonton beberapa kejadian nyata lainnya mengenai kasus tersebut.

6. Pelajar mengambil kuis dari kasus tersebut.

7. Pelajar melaporkan apa yang dia mengerti dari kasus tersebut melalui halaman web.

8. Hasil laporan tadi akan dikomentari oleh pelajar lainnya.

Pada tahun 2006, Gjedde mengembangkan sebuah media pembelajaran elektronik dengan teknik story-based e-Learning. Media pembelajaran elektronik

(33)

yang dikembangkan oleh Gjedde ini dikhususkan untuk anak yang berkebutuhan khusus. Media pembelajaran ini menggukanan gambar dan simbol sebagai pengganti tulisan. Media pembelajaran ini juga memerlukan dukungan orang tua secara langsung.

Pada tahun 2002, Kelli Bosman mengemukakan simulation-based e-Learning

dapat diterapkan ke banyak bidang, diantaranya simulasi software, bisnis, situasi, teknis, prosedur, bahkan dunia virtual. Salah satu contoh untuk simulasi prosedur adalah, bagaimana melakuan pemeliharaan perlengkapan kantor. Untuk contoh simulasi situasi adalah bagaimana melakukan negosiasi, dan dunia virtual adalah simulasi pesawat terbang. Simulation-based e-Learning sangat cocok diterapkan untuk keadaan yang cukup ekstrim tanpa menanggung resiko yang sebenarnya.

Tabel 2.1. Penelitian Terdahulu

No. Peneliti Teknik yang

digunakan

Kekurangan 1 Ikeson Choi, dkk

(2004)

case-based Teknik ini menargetkan pengguna yang spesifik, sehingga apabila akan dipakai ke target pengguna yang lain, maka kasusnya harus diubah. 2 Lisa Gjedde (2006) story-based Teknik ini mengharuskan

instruktor untuk membuat koleksi cerita yang cukup banyak.

3 Kelli Bosman (2002)

simulation-based -

Berdasarkan penelitian sebelumnya dan landasan teori yang ada, penulis akan melakukan penelitian mengenai m-Learning dengan teknik gamification, dimana

gamification adalah pengimplementasian elemen yang ada pada game dan teknik

desain game pada konteks yang bukan game dan dapat memotivasi orang untuk melakukan sesuatu yang biasanya tidak dilakukan menjadi mau untuk terus melakukan kegiatan tersebut (Werbach & Hunter 2012). M-Learning ini akan menggunakan tipe permainan casual karena model permainan ini dapat dilakukan kapan saja dan dimana saja asalkan pemain memiliki perangkat dan akses ke internet.

(34)

BAB III

ANALISIS DAN PERANCANGAN

Bab ini secara garis besar membahas analisis metode gamification pada sistem dan tahap-tahap yang akan dilakukan dalam perancangan sistem yang akan dibangun.

3.1. Identifikasi Masalah

Perangkat bergerak semakin hari semakin canggih dan harganya pun semakin terjangkau. Perangkat bergerak banyak digunakan untuk memenuhi kebutuhan hiburan pemakainya seperti menonton film, memainkan permainan, dan menjelajah internet. Kegiatan menjelajah internet juga lebih banyak dipakai untuk aktifitas jejaring sosial. (Antaranews, 2012). Penggunaan perangkat bergerak dan internet lebih banyak dipakai untuk hal yang bersifat hiburan. Akan lebih baik apabila perangkat bergerak ini dapat dipergunakan untuk hal yang lebih bermanfaat, seperti media belajar.

3.2. Analisis Kebutuhan Sistem

Analisis kebutuhan sistem pada penelitian ini dibagi ke dalam dua kelompok, yaitu kebutuhan fungsional sistem dan kebutuhan nonfungsional sistem.

3.2.1. Kebutuhan fungsional sistem

Fungsional sistem adalah aktifitas dan pelayanan yang harus dimiliki oleh sebuah sistem berupa input, proses, output, maupun penyimpanan data (Harahap, 2013). Adapun kebutuhan fungsional yang dibutuhkan yaitu:

1. Pengguna memasukkan input berupa pesan, percakapan forum, jawaban soal, dan lain-lain.

(35)

2. Sistem melakukan pengacakan soal dan jawaban, pengecekan jawaban soal, pengecekan login, dan lain-lain

3. Sistem menampilkan materi, soal, percakapan forum, pesan, hasil jawaban pengguna, dan lain-lain.

3.2.2. Kebutuhan nonfungsional sistem

Kebutuhan nonfungsional sistem merupakan karakteristik atau batasan yang menentukan kepuasan pada sebuah sistem seperti kinerja, kemudahan pengguna, biaya, dan kemampuan sistem bekerja tanpa menggangu fungsionalitas sistem lainnya (Whitten, 2007).

1. Sisi Performa, sistem yang dirancang harus memiliki:

- Kebutuhan sistem yang ringan untuk dijalankan pada perangkat mobile. 2. Sisi kemudahan penggunaan, sistem yang dirancang harus memiliki:

- Navigasi sistem yang dapat diakses kapan saja. - Antarmuka pemakai yang tidak terlalu rumit. 3. Sisi Ekonomi, sistem yang dirancang harus memiliki:

- Instalasi perangkat lunak dan perangkat keras tidak membutuhkan biaya yang besar.

4. Sisi Dokumentasi, sistem memiliki kemampuan sebagai berikut: - Sistem menyimpan seluruh input pengguna ke database.

5. Sisi Kontrol, sistem yang dirancang harus memiliki: - Sistem mengijinkan pembatalan dari suatu tindakan. - Sistem menyaring input dari pengguna sistem.

- Sistem menampilkan pesan kesalahan apabila input yang diberikan tidak tepat.

6. Sisi Kualitas, sistem yang dirancang harus memiliki:

(36)

3.3. Analisis Data

Data yang digunakan pada sistem ini adalah materi pemrograman internet yang dikuasai penulis selama kuliah.

3.4. Perancangan Sistem

3.4.1. General Architecture

General architecture pada m-learning ini dapat dilihat pada gambar 3.1.

Kehidupan Kampus (Materi)

Adu Pintar (Soal)

Story 1-9

Adu Pintar 1-3 Free

Adu Pintar 4-5 10 Koin

Skoring

Gambar 3.1. General architecture sistem m-learning

Arsitektur umum dari m-learning terdapat 2 fitur utama, yaitu kehidupann kampus (materi) dan adu pintar (soal). Mode kehidupan kampus berisi 9 cerita-materi interaktif yang dapat diselesaikan peserta. Sedangkan mode adu pintar berisi soal-soal yang harus dijawab peserta. Adu pintar 1 sampai 3 tidak memerlukan biaya, sedangkan adu puntar 4 sampai 5 membutuhkan masing-masing 10 koin. Untuk mendapatkan koin, peserta harus menjawab dengan benar soal-soal yang ada di mode adu pintar.

(37)

3.4.2. Flowchart

Flowchart pada m-learning ini dapat dilihat pada gambar 3.2. sampai 3.4.

Username Password Nama Username

Password

Cek login

Masukkan username, password, nama Masukkan

username dan password

Data disimpan kedalam database Ya

Benar Salah

selesai Menampilkan

- halaman login - menu daftar

Mulai

Halaman Utama / tutorial

Tidak

(38)

Ya Menampilkan Menu halaman

utama Mulai

Adu Pintar ? Tidak Kehidupan Kampus ?

Tampil daftar story

Menampilkan soal

Ya Pilih story

Tidak Jawab ? salah Benar +1 benar tidak ya selesai Jawab ? benar Salah

Hitung skor didapat

selesai Story selesai

Soal abis ?

Tidak Konfirmasi mulai Menampilkan Story Menampilkan Soal Ya Benar +0

Soal 10 ?

(39)

Menampilkan Soal secara acak

Mulai

soal Mengacak soal yang

tampil

selesai

Gambar 3.4. Flowchart pengacakan soal dan jawaban

Dari gambar 3.2. dapat dijelaskan bahwa sistem mengharuskan pengguna untuk memiliki akun untuk dapat menggunakan sistem m-learning ini. Apabila sudah memiliki akun, maka pengguna dapat login dengan akun yang sudah dimiliki, dan jika belum ada, maka pengguna dapat registrasi akun baru.

Setelah pengguna login, sistem akan mengecek apakah user tersebut sudah pernah menjalani tutorial atau belum. Apabila belum pernah mengikuti tutorial, pengguna tersebut akan dipaksa untuk membuka halaman tutorial. Apabila pengguna tersebut sudah pernah mengikuti tutorial, maka sistem akan membawa pengguna tersebut ke halaman utama sistem.

Dari gambar 3.3. dapat dijelaskan bahwa terdapat 2 jenis mode permainan, yaitu mode kehidupan kampus dan mode adu pintar. Pada mode adu pintar terdapat 10 batasan soal dan 5 kali kesempatan bermain.. Pada mode kehidupan kampus, pengguna akan mengikuti materi sampai selesai. Di akhir materi, pengguna akan diberikan beberapa pertanyaan mengenai materi yang baru saja diberikan. Apabila pengguna salah dalam menjawab soal di mode kehidupan kampus, pengguna diwajibkan untuk menjawab pertanyaan sampai benar, kemudian pengguna dapat menjawab soal berikutnya. Pengguna diwajibkan mengikuti mode kehidupan kampus secara berurutan dari awal sampai akhir.

(40)

Dari gambar 3.4. dapat dilihat setiap soal yang ditampilkan untuk mode adu pintar adalah acak. Setiap pengguna akan mendapatkan soal dengan urutan yang berbeda.

3.4.3. Data flow diagram

DFD level 0 m-Learning yang dibangun ini dapat dilihat pada gambar 3.5.

M-Learning dengan Gamification

Administrator Pelajar

- Ban user - Mata Pelajaran

- Forum - Interest - Belajar - Forum - Interest - Belajar -Abuse -Leaderboard - Profil - Pencapaian - Tutorial -Leaderboard - Profil - Pencapaian - Tutorial

Gambar 3.5. Data Flow Diagram

Gambar 3.5. menjelaskan bahwa terdapat dua buah pengguna, yaitu pelajar, administrator. M-Learning yang dirancang memiliki beberapa proses yang masih dapat dijabarkan lebih lanjut dengan menggunakan use case.

3.4.4. Use case diagram

Use case diagram merupakan pemodelan untuk kelakuan (behavior) sistem infromasi

yang akan dibuat. Use case mendeskripsikan sebuah interaksi anatara satu atau lebih aktor dengan sistem informasi yang akan dibuat (Shalahuddin, 2011). Gambar 3.6.. menggambarkan use case diagram dari sistem yang akan dibuat.

(41)

Pelajar Admin Profil Forum Leaderboard Cari pengguna Pelajaran Admin module Laporan Penyalahgunaan Interest Belajar Quest/ Turnamen Pencapaian Tutorial Blok pengguna

Set Level User

Gambar 3.6. Use Case Diagram

3.4.5. Use case Specification

Use case spesifikasi merupakan perkembangan atau deskripsi dari use case diagram untuk setiap use case, use case spesification menjelaskan bagaimana sebuah use case

itu bekerja (Muchtar & Sani 2011). Berikut ini adalah use case specification dari sistem yang akan dibangun berdasarkan use case diagram pada gambar 3.6.

Tabel 3.1. Use Case_{Spesifikasi untuk}Use Case_{Mata Pelajaran}

Tipe Use Case _Penjelasan

Nama use case Mata Pelajaran

Aktor Admin

Deskripsi Use case ini digunakan oleh admin untuk menambah, mengedit atau menghapus mata pelajaran.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator

Basic flow 1. Admin mengklik menu mata pelajaran.

(42)

3. Admin dapat menambah, mengedit, atau menghapus mata pelajaran. H-1: Mata pelajaran sudah ada di database.

4. Use case ini berakhir ketika sistem telah selesai

menambah, mengedit, atau menghapus mata pelajaran.

Alternative flow H-1: Mata pelajaran sudah ada di database

Sistem akan memberikan pesan bahwa mata pelajaran sudah ada di database apabila admin akan menambah mata pelajaran baru dengan nama yang sama.

Post condition Pada use case ini admin dapat menambah,

mengedit, atau menghapus mata pelajaran.

Limitations -

Tabel 3.2. Use Case_{Spesifikasi untuk}Use Case_{Laporan Penyalahgunaan}

Tipe Use Case _Penjelasan

Nama use case Laporan Penyalahgunaan

Aktor Admin

Deskripsi Use case ini digunakan oleh admin untuk melihat laporan dari penyalahgunaan forum.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator

Basic flow 1. Admin mengklik menu laporan

penyalahgunaan.

2. Sistem menampilkan daftar pelanggaran yang telah dilaporkan.

3. Admin dapat melihat keterangan pelanggaran berupa posting forum, pelanggar dan pelapor.

4. Admin dapat mengedit posting yang dilaporkan.

(43)

menampilkan daftar pelanggaran.

Alternative flow -

Post condition Pada use case ini admin dapat melihat dan mengedit

posting forum yang telah dilaporkan.

Limitations -

Tabel 3.3. Use Case_{Spesifikasi untuk}Use Case_{Set Level User}

Tipe Use Case _Penjelasan

Nama use case Set Level User

Aktor Admin

Deskripsi Use case ini digunakan oleh admin untuk mengubah level user pengguna sistem.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator

Basic flow 1. Admin membuka profil pengguna.

2. Admin mengklik tombol jadi pelajar/admin. 3. Use case ini berakhir ketika sistem berhasil

menyimpan level user ke database.

Alternative flow -

Post condition Pada use case ini admin dapat mengubah level user

pengguna sistem.

(44)

Tabel 3.4. Use Case_{Spesifikasi untuk}Use Case_{Blok User}

Tipe Use Case _Penjelasan

Nama use case Blok User

Aktor Administrator

Deskripsi Use case ini digunakan untuk memblokir pengguna untuk menggunakan sistem.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. Admin membuka profil user yang akan di ban.

2. Sistem menampilkan konfirmasi ban.

3. Admin memilih konfirmasi blokir atau tidak.

4. Use case ini berakhir ketika sistem telah

menampilkan user sudah diblok atau tidak.

Alternative flow -

Post condition Pada use case ini Admin dapat memblokir

pengguna.

Limitations -

Tabel 3.5. Use Case_{Spesifikasi untuk}Use Case_Story

Tipe Use Case _Penjelasan

Nama use case Story

Aktor Administrator

Deskripsi Use case ini digunakan oleh admin untuk menambah, mengedit, dan menghapus paket soal.

Pre condition Admin harus memiliki username dan password

untuk masuk ke sistem.

Characteristic of activation Eksekusi dapat dilakukan oleh Administrator.

Basic flow 1. Admin mengklik menu admin.

2. Admin klik menu story.

3. Sistem menampilkan daftar story.

4. Admin dapat menambah, mengedit, menghapus, dan publish paket soal.

(45)

menampilkan daftar semua story yang ada.

Alternative flow

-Post condition Pada use case ini admin dapat melihat informasi

story yang dipilih.

Limitations -

Tabel 3.6. Use Case_{Spesifikasi untuk}Use Case_{Cari Pengguna}

Tipe Use Case _Penjelasan

Nama use case Cari Pengguna

Aktor Semua

Deskripsi Use case ini digunakan untuk mencari pengguna.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User mengklik menu Cari pengguna.

2. Sistem menampilkan kotak tempat query

pencarian..

3. Aktor memasukkan query pencarian.

4. Use case ini berakhir ketika sistem telah

menampilkan hasil pencarian user.

Alternative flow -

Post condition Pada use case ini aktor dapat melihat pencarian

user.

Limitations -

Tabel 3.7. Use Case_{Spesifikasi untuk}Use Case_Forum

Tipe Use Case _Penjelasan

Nama use case Forum

Aktor Semua

Deskripsi Use case ini digunakan untuk kegiatan forum.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

(46)

Basic flow 1. User mengklik menu forum.

2. User mengklik tambah topik untuk memulai topik pembicaraan baru.

3. User mengklik topik yang sudah ada untuk membaca isi topik tersebut.

4. User mengklik tombol jawab untuk melanjutkan topik pembicaraan.

5. Sistem menampilkan isi topik.

6. User dapat mengklik laporkan penyalahgunaan pada setiap post yang ada di forum apabila post tersebut mengandung konten yang tidak pantas. 7. User dapat mengklik vote apabila posting

tersebut bermanfaat untuknya.

8. Use case ini berakhir ketika sistem telah

menampilkan topik pembicaraan yang dipilih.

Alternative flow

-Post condition Pada use case ini user dapat berdiskusi mengenai

pelajaran melalui fasilitas forum.

Limitations -

Tabel 3.8. Use Case_{Spesifikasi untuk}Use Case_Leaderboard

Tipe Use Case _Penjelasan

Nama use case Leaderboard

Aktor Semua

Deskripsi Use case ini digunakan untuk melihat siapa saja yang mendapatkan skor tertinggi.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User mengklik menu Leaderboard.

2. Sistem menampilkan 10 skor tertinggi.

3. Use case ini berakhir ketika sistem telah

(47)

Alternative flow -

Post condition Pada use case ini user dapat melihat siapa saja yang

telah mendapatkan skor tertinggi.

Limitations -

Tabel 3.9. Use Case_{Spesifikasi untuk}Use Case_Belajar

Tipe Use Case _Penjelasan

Nama use case Belajar

Aktor Semua

Deskripsi Use case ini digunakan untuk melakukan kegiatan belajar seperti membaca materi dan menjawab soal.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User mengklik menu kehidupan kampus / adu

pintar.

2. Sistem menampilkan peta pelajaran.

3. User mengklik salah satu materi pelajaran di peta pelajaran, kemudian sistem menampilkan materi pelajaran tersebut dalam bentuk dialog cerita.

4. User menjawab soal pada akhir cerita. 5. User mendapat skor.

6. Use case ini berakhir ketika sistem telah

memberi skor kepada user.

Alternative flow -

Post condition Pada use case ini user mendapatkan bahan materi

pelajaran yang diinginkan serta soal latihannya.

(48)

Tabel 3.10. Use Case_{Spesifikasi untuk}Use Case_Tutorial

Tipe Use Case _Penjelasan

Nama use case Tutorial

Aktor Semua

Deskripsi Use case ini digunakan untuk memberikan informasi kepada user bagaimana sistem bekerja.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

Basic flow 1. User login untuk pertama kali.

2. Sistem akan mengecek apakah user sudah menyelesaikan tutorial atau belum. H-1: Tutorial sudah selesai.

3. User mengikuti tutorial sampai selesai. 4. User di kembalikan ke halaman utama

5. Use case ini berakhir ketika user telah sampai di halaman utama.

Alternative flow H-1: Tutorial sudah selesai.

Sistem tidak akan menampilkan tutorial lagi.

Post condition Pada use case ini user mengikuti tutorial sampai

selesai.

Limitations -

Tabel 3.11. Use Case_{Spesifikasi untuk}Use Case_Profil

Tipe Use Case _Penjelasan

Nama use case Profil

Aktor Semua

Deskripsi Use case ini digunakan untuk melihat profil pengguna.

Pre condition Aktor harus memiliki username dan password

untuk masuk ke sistem.

Characteristic of activation Eksekusi dapat dilakukan oleh siapapun.

(49)

2. User mengklik link nama pengguna lain dari forum.

3. Sistem menampilkan profil. H-1 : My Profile

4. Use case ini berakhir ketika sistem telah

menampilkan profil.

Alternative flow H-1 : My Profile

Sistem mengijinkan pengguna untuk mengubah

interest.

Post condition Pada use case ini user dapat melihat informasi

profil yang terpilih.

(50)

3.4.6. Gamification

Gamification adalah pengimplementasian elemen yang ada pada game dan teknik

Berikut ini adalah aspek gamification yang diimplementasi dalam sistem m-learning ini :

1. Point

Sistem poin yang digunakan pada m-learning ini adalah skor. Skor dapat dikumpulkan dari menyelesai materi atau menjawab soal atau login setiap hari. Skor yang didapat dari menyelesaikan materi pada mode kehidupan kampus adalah 10 skor, menjawab soal dari mode adu pintar adalah 10 skor setiap soal, dan skor dari login harian adalah 10 dan terus meningkat sampai 5 hari kedepan sebanyak 20, setelah 3 hari, skor yang didapat dari login, diulang kembali dari 10.

2. Leaderboard

Leaderboard atau papan ranking menampilkan 20 pengguna dengan skor

tertinggi. Terdapat 2 daftar ranking, yaitu total skor, dan skor tertinggi yang pernah didapat dari mode adu pintar.

3. Badges

Elemen badges tidak dipakai dalam m-learning ini. 4. Challenge and quest

Terdapat 2 mode permainan yang dapat di selesaikan pada m-learning ini. Yaitu mode kehidupan kampus, dimana pengguna sistem mendapatkan materi pembelajaran dengan dialog interaktif disertai kuis setelah materi selesai, atau mode adu pintar, dimana pengguna menjawab deretan soal yang diberikan untuk mendapatkan skor tertinggi.

5. Onboarding

Onboarding adalah pengenalan dalam menggunakan sistem. Sebelum

pengguna memulai m-learning, pengguna dipaksa untuk mengikuti pengenalan/tutorial singkat mengenai sistem m-learning ini sendiri. Tutorial ini hanya akan dipaksa ditampilkan apabila pengguna baru pertama login. Apabila pengguna sudah pernah mengikuti tutorial satu kali

(51)

saja, maka tutorial tidak akan ditampilkan kembali, namum tetap dapat diakses kapan saja.

6. Social engagement loop.

Terdapat beberapa efek sosial berulang yang ditargetkan dalam penggunaan metode gamification, diantaranya :

a) Motivasi

Pengguna memiliki motivasi untuk mendapatkan bahan edukasi tambahan.

b) Panggilan untuk melakukan kegiatan

Forum diskusi menjadi pusat kegiatan online setelah mendapatkan bahan edukasi tambahan, pengguna juga dapat bertemu secara offline

untuk diskusi lebih jauh. c) Penyelesaian kegiatan

Setelah berdiskusi dan membaca materi, pengguna menyelesaikan kuis yang ada pada sistem.

d) Progress yang tampak / hadiah

Membaca materi, badge, mengikuti kuis, dan login harian menghasilkan skor. Melalui skor yang ada di papan ranking, penyelenggara m-learning dapat memberikan hadiah kepada peserta bila ada. Selain hadiah, pemahaman kelas yang diikuti, dan interaksi sosial antar pengguna dalam sistem merupakan progres yang tampak dari mengikuti m-learning yang telah digamifikasi. Diharapkan pengguna sistem kembali memiliki motivasi untuk mendapatkan bahan edukasi tambahan.

3.5. Perancangan antarmuka sistem

Antarmuka m-learning ini dirancang khusus untuk perangkat bergerak, karena target

m-learning ini akan dijalankan pada perangkat bergerak. Walaupun demikian, sistem

juga dapat dijalankan pada perangkat desktop. Berikut ini adalah beberapa rancangan

(52)

A. Halaman login

M-Learning

Username :

Password:

Teknologi Informasi 2013

Gambar 3.7. Rancangan halaman login

Gambar 3.7. adalah halaman login. Apabila pengguna sudah memiliki akun, pengguna dapat login. Terdapat 4 elemen yang dengan rincian sebagai berikut :

1. Username merupakan nama unik untuk masuk kedalam sistem.

2. Password merupakan kata kunci yang berkaitan dengan username untuk

masuk kedalam sistem.

3. Tombol login merupakan tombol untuk login.

4. Tombol registrasi merupakan tombol untuk membuka halaman registrasi.

B. Halaman registrasi

M-Learning

Username :

Password:

Teknologi Informasi 2013 Nama :

Gambar 3.8. Rancangan halaman registrasi

Gambar 3.8. adalah halaman registrasi. Pengguna dapat registrasi melalui halaman ini. Terdapat 4 elemen yang dengan rincian sebagai berikut :

1. Username merupakan nama unik untuk masuk kedalam sistem.

1 2

3 4

1 2 3

(53)

2. Password merupakan kata kunci yang berkaitan dengan username untuk masuk kedalam sistem.

3. Nama merupakan nama asli atau alias yang akan ditampilkan.

4. Tombol register adalah tombol untuk registrasi.

C. Halaman utama

Konten M-Learning

Teknologi Informasi 2013 Navigasi _masukPesan

M-Learning

Teknologi Informasi

2015 Level user | nama user

Skor : 99999

logout

Gambar 3.9. Rancangan halaman utama

Gambar 3.9. adalah rancangan antarmuka utama yang akan menjadi kerangka tampilan untuk poin-poin berikutnya. Berikut adalah rincian elemen dari halaman utama:

1. Tombol navigasi adalah tombol untuk navigasi. Dengan mengklik tombol ini

akan membuka panel navigasi.

2. Notifikasi pesan masuk adalah notifikasi yang akan tampil apabila ada pesan masuk dari pengguna lain.

3. Panel konten letak konten untuk poin berikutnya.

4. Level pengguna dan nama pengguna yang sedang login. 5. Jumlah skor yang dimiliki pengguna yang sedang login. 6. Tombol untuk memilih modul konten.

7. Tombol logout.

1 2

(54)

D. Halaman profil

M-Learning

Teknologi Informasi 2013 Navigasi

Update status Teks status foto

Rincian profil Profil umum

Tambah ketertarikan

Hapus ketertarikan

Gambar 3.10. Rancangan halaman profil

Gambar 3.10. adalah rancangan antarmuka halaman profil. Halaman profil menampilkan sekilas info dari pengguna yang bersangkutan. Berikut adalah rincian elemen dari halaman profil:

1. Box status menampilkan foto pengguna dan status pengguna layaknya sosial

media, namun status ini tidak dapat dikomentari. 2. Rincian umum profil pengguna.

3. Pengguna dapat menambah bidang ketertarikan. 4. Pengguna juga dapat menghapus bidang ketertarikan.

2 3 4

(55)

E. Halaman mode belajar

Dialog Materi Ilustrasi penjelasan

avatar

Tombol

restart Tombol BGM

Gambar 3.11. Rancangan halaman belajar

Gambar 3.11. adalah rancangan antarmuka halaman belajar. Khusus mode adu pintar, tidak ada materi yang diberikan, hanya soal yang tersimpan dalam sistem yang diberikan. Halaman ini adalah halaman utama dari aktifitas m-learning, dimana pengguna dapat membaca materi dan mengerjakan soal. Berikut adalah rincian elemen dari halaman belajar:

1. Ilustrasi pelajaran yang sedang dijelaskan, baik gambar, soal, maupun koding. 2. Foto karakter yang sedang berdialog.

3. Dialog dari karakter mengenai penjelasan materi. 4. Tombol untuk mengulang pelajaran dari awal. 5. Tombol hidup-mati musik pengiring.

(56)

F. Halaman leaderboard

M-Learning

Teknologi Informasi 2013 Navigasi

Leaderboard

Total Skor tertinggi

nama Skor

………….. …………..

Gambar 3.12. Rancangan halaman leaderboard

Gambar 3.12. adalah rancangan antarmuka halaman leaderboard. Halaman ini menampilkan pengguna yang memiliki poin paling banyak. Berikut adalah rincian elemen dari halaman leaderboard:

1. Navigasi untuk melihat total skor dan skor adu pintar tertinggi. 2. 20 pengguna dengan nilai tertinggi.

G. Halaman pesan

M-Learning

Teknologi Informasi 2013 Navigasi

Papan pesan

Pengirim .

Foto judul Potongan isi waktu Pengirim .

Foto judul Potongan isi waktu

M-Learning

Teknologi Informasi 2013 Navigasi

Pengirim / penerima

judul Potongan isi

Balas

Pengirim / penerima

judul Potongan isi 1 2 1 2 3

(57)

M-Learning

Teknologi Informasi 2013 Navigasi

Kirim pesan Penerima : nama penerima Judul pesan :

Isi pesan :

Wysiwyg editor

Kirim pesan

Gambar 3.13. Rancangan halaman pesan

Gambar 3.13. adalah rancangan antarmuka halaman pesan. Halaman ini berfungsi untuk bertukar pesan antar pengguna. Berikut adalah rincian elemen dari halaman pesan:

1. Kotak pilihan pesan dari pengirim yang berbeda dapat di klik untuk melihat isi percakapan.

2. Tombol untuk membalas. 3. Isi percakapan.

4. Nama penerima. 5. Kotak teks judul pesan. 6. Kotak teks isi pesan.

7. Tombol kirim pesan / balas pesan.

6 7

(58)

H. Halaman forum

M-Learning

Teknologi Informasi 2013 Navigasi Papan Forum Tambah kategori/topik Hapus kategori/topik Ganti nama Cari Forum/topik 1 Forum/topik 2 …... M-Learning

Teknologi Informasi 2013 Navigasi

Vote

Hapus topik

Nama . Nama Forum

foto

Isi post

Nama . foto

Vote Waktu post Vote power :

Isi komentar balas

Vote Lih. profil komentari

Gambar 3.14. Rancangan halaman forum

Gambar 3.14. adalah rancangan antarmuka halaman forum. Halaman forum merupakah halaman untuk berdiskusi antar pengguna. Berikut adalah rincian elemen dari halaman forum:

1. Kotak aksi untuk menambah/hapus/ganti nama kategori/topik dan mencari kategori/topik. Tambah, hapus dan ganti nama merupakan fitur admin. Tombol ini tidak akan terlihat pada pengguna biasa.

2. Daftar kategori / topik.

3. Tombol hapus kategori / topik. Hanya dapat diakses oleh admin. 4. Tombol vote untuk memberi rating topik.

5. Tombol lihat profil pengguna yang membuat topik. 6. Tombol untuk mengomentari topik.

7. Tombol untuk membalas komentar.

1 2 3 4 5 6 7

(59)

I. Halaman cari pengguna

M-Learning

Teknologi Informasi 2013 Navigasi

Cari

Gambar 3.15. Rancangan halaman cari pengguna

Gambar 3.15. adalah rancangan antarmuka halaman cari pengguna. Halaman ini berfungsi untuk mencari pengguna sesuai kata kunci yang dimasukkan. Berikut adalah rincian elemen dari halaman cari pengguna:

1. Kotak teks pengguna yang akan dicari. 2. Tombol untuk memulai pencarian.

J. Halaman Tutorial

Dialog Tutorial Ilustrasi penjelasan

avatar

Gambar 3.16. Rancangan halaman tutorial

Gambar 3.16. adalah rancangan antarmuka halaman tutorial. Halaman ini merupakan halaman penjelasan dari semua fitur yang ada pada m-learning ini. Berikut adalah rincian elemen dari halaman tutorial:

1. Tampilan Fitur 2. Penjelasan fitur.

3. Avatar / foto yang menjelaskan.

1 2

2 3

(60)

3.6. Storyboard

Sebuah storyboard adalah sebuah gambaran dari urutan interaksi tertentu. Storyboard

dapat berupa cerita atau skenario mengenai apa saja yang akan dilakukan pengguna untuk menyelesaikan apa yang diinginkan oleh pembuat urutan interaksi yang sudah digambarkan. Storyboard menampilkan detail secara terbatas dari. Storyboard

mencerminkan detail terbatas tentang isi dari setiap halaman dalam urutan dan hanya link navigasi yang diperlukan untuk menyelesaikan tugas yang diwakili. (Newman et al, 2000).

Berikut adalah salah satu storyboard pada m-learning.

Mata Pelajaran : Pemrograman Internet Pertemuan : 2

Pembahasan : Variabel

Tampilan Pembahasan

1. Maksud dari variabel. 2. Pembuatan variabel. 3. Memproses variabel.

4. Tipe data variabel pada PHP

Penjelasan Grafis

- Gambar ilustrasi dari materi yang dijelaskan disesuaikan dengan kebutuhan.

Kontrol

- Setiap klik akan mengganti dialog karaketer.

- Seluruh pertanyaan harus dijawab dengan benar, apabila salah, soal diberikan kembali. - Pengguna dapat mengulang materi dari awal dengan klik tombol ulangi story.

(61)

BAB IV

IMPLEMENTASI DAN PENGUJIAN SISTEM

Bab ini akan membahas tentang implementasi gamification pada m-learning, serta penjelasan mengenai pengujian sistem yang telah dibangun.

4.1. Implementasi Sistem

4.1.1. Lingkungan Implementasi

Lingkungan implementasi yang dimaksud adalah spesifikasi perangkat keras dan perangkat lunak yang digunakan pada saat pengimplementasian sistem. Berikut ini merupakan spesifikasi perangkat keras dan perangkat lunak yang digunakan.

1. Perangkat Keras (Hardware)

Perangkat keras yang digunakan oleh peneliti pada tahap pengimplementasian sistem adalah sebagai berikut :

1. Laptop

- Prosesor Intel® Core™ i3 – 2350M @2.30 GHz (2CPUs) - 6 GB RAM

2. VPS

- Prosesor Intel(R) Xeon(R) CPU E5-2630L v2 @ 2.40GHz, 1 cores - 512 MB RAM

- 20 GB SSD

- 1 Gbps network port.

2. Perangkat Lunak (Software)

Perangkat lunak yang digunakan dalam pembagungan sistem adalah sebagai berikut:

(62)

1. Laptop

- OS Windows 7 SP1

- Notepad++, NetBeans IDE - Apache 2.2.21

- PHP 5.3.8

- phpMyAdmin 3.4.5 - MySQL 5.0.8 2. VPS

- OS Ubuntu Linux 14.04.1 - Apache 2.4.7

- PHP 5.5.9-1ubuntu4.4 (cli) (built: Sep 4 2014 06:57:30) - phpMyAdmin 4.0.10deb1

- MySQL 5.5.38

4.2. Implementasi Perancangan Antarmuka

4.2.1. Halaman Login

Halaman ini adalah halaman pertama yang ditampilkan ketika pengguna mengakses

m-learning tanpa login. Untuk dapat memakai sistem m-learning, pengguna

diharuskan login dahulu dengan akun yang dimiliki. Halaman login m-Learning dapat dilihat pada gambar 4.1.

(63)

4.2.2. Halaman Registrasi

Pengguna baru yang belum memiliki akun m-Learning dapat melakukan registrasi terlebih dahulu. Halaman registrasi dapat diakses dengan klik tombol registrasi pada halaman login. Halaman registrasi m-Learning dapat dilihat pada gambar 4.2.

(64)

4.2.3. Halaman Tutorial

Halaman tutorial menjelaskan bagaimana cara menggunakan m-Learning. Halaman tutorial m-Learning dapat dilihat pada gambar 4.3.

(65)

4.2.4. Halaman Home

Halaman home akan menampilkan halaman depan m-learning. Halaman home

m-Learning dapat dilihat pada gambar 4.4.

(66)

4.2.5. Panel Navigasi

Panel navigasi memudahkan pengguna m-Learning untuk berpindah-pindah halaman dalam menggunakan sistem ini. Panel navigasi dapat diakses dari semua halaman. Panel navigasi m-Learning dapat dilihat pada gambar 4.5.

(67)

4.2.6. Halaman Profil

Halaman profil menampilkan info dari pengguna m-Learning ini. Pengguna dapat memperbarui status, dan mengubah ketertarikan. Admin juga dapat memblok pengguna melalui halaman ini. Halaman profil m-Learning dapat dilihat pada gambar 4.6.

(68)

4.2.7. Halaman Ketertarikan

Halaman ketertarikan/interest menampilkan semua ketertarikan yang sudah disimpan dalam sistem. Pengguna dapat menambah ketertarikan baru atau memilih ketertarikan yang telah ada. Halaman ketertarikan m-Learning dapat dilihat pada gambar 4.7.

(69)

4.2.8. Halaman Kehidupan kampus dan Adu pintar

Halaman kehidupan kampus dan adu pintar menampilkan materi dan soal yang dapat diselesaikan oleh pelajar. Mode kehidupan kampus menampilkan materi dan soal, sedangkan mode adu pintar hanya menampilkan soal. Ada batasan kesalahan menjawab pada mode adu pintar, yaitu sebanyak 3 kali, sedangkan pada mode kehidupan kampus tidak ada batasan. Pada mode adu pintar, jumlah soal tidak terbatas, dan pengguna dapat berhenti kapanpun. Sistem skoring pada mode adu pintar adalah, benar skor ditambah 10, dan salah skor dikurang 5. Halaman kehidupan kampus dan adu pintar m-Learning dapat dilihat pada gambar 4.8.

(70)

Halaman kehidupan kampus berisi materi interaktif. Cerita dimulai dengan dosen yang akan pergi kuliah S3 di luar negeri, sehingga dosen tersebut tidak dapat mengajar siswa di kelasnya. Tetapi dosen tersebut telah menghubungi teman lamanya Mr. Lerdorf untuk mengajar di kelas nya. Ternyata teman lama dosen tersebut adalah orang yang mempelopori bahasa pemrogaman PHP itu sendiri. Mr. Lerdorf pun menggantikan posisi dosen untuk mengajar siswa.

(71)

Selama mengikuti materi pelajaran, cerita akan terus berlanjut sesuai alur. Mr. Lerdorf mengajarkan PHP dengan banyak pemisalan, seperti variabel disamakan dengan sebuah kotak penyimpanan.

Gambar 4.10 Materi interaktif menyamakan materi pelajaran dengan kehidupan sehari-hari

(72)

Selama pelajaran berlangsung terkadang Mr. Lerdorf melempar pertanyaan kepada siswa, sehingga seperti keadaan kelas yang sebenarnya, terjadi interaksi 2 arah antara siswa (pemain) dan pengajar (sistem/Mr. Lerdorf).

(73)

4.2.9. Halaman Leaderboard

Halaman leaderboard/papan skor menampilkan pengguna sistem yang memiliki skor tertinggi. Sepuluh pengguna sistem dengan skor tertinggi akan mendapat hadiah. Halaman leaderboard m-Learning dapat dilihat pada gambar 4.12.

Gambar 4.12 Halaman Leaderboard / Ranking

(74)

4.2.10. Halaman Forum

Halaman forum merupakan fasilitas diskusi saat menggunakan m-Learning. Pengguna dapat membuka topik baru, mengomentari topik dan memberikan vote untuk jawaban terbaik. Kategori baru dapat ditambah oleh admin, dan topik dapat dihapus oleh admin. Halaman forum m-Learning dapat dilihat pada gambar 4.10.

(75)

4.2.11. Halaman Cari User

Halaman cari user dapat memudahkan pengguna untuk membuka profil pengguna lain dengan memasukkan query pencarian nama user yang akan ditampilkan. Halaman tutorial m-Learning dapat dilihat pada gambar 4.11.

Gambar 4.14 Halaman Cari User

4.2.12. Halaman Admin

Halaman admin menampilkan fungsi-fungsi khusus untuk admin. Hanya admin yang dapat membuka halaman ini. Admin dapat membuat pengumuman baru, membuat mata pelajaran baru, dan melihat pelanggaran yang dilaporkan. Halaman admin

m-Learning dapat dilihat pada gambar 4.12.

(76)

4.3. Pengujian Sistem

Pengujian sistem ditujukan untuk menguji kinerja sistem. Pengujian dilakukan oleh pengguna awam maupun penguji kualitas software dengan cara menggunakan sistem tersebut secara langsung.

4.3.1. Rencana Pengujian Sistem

Sistem akan diujikan kepada khalayak ramai dengan jumlah 50 orang. Sistem penilaian adalah benar skor +10 dan salah skor -5. Pengguna hanya diperkenankan 5 kali melakukan adu pintar, 3 kali adu pintar dilakukan tanpa menggunakan koin, dan 2 kali dengan menggunakan koin. Apabila koin tidak mencukupi, maka pemain tidak dapat melakukan adu pintar yang ke-4 dan ke-5. Apabila pemain tidak dapat melakukan melakukan adu pintar ke-4 dan ke-5 diakibatkan oleh koin yang tidak cukup, maka pemain tidak akan mendapatkan skor untuk adu pintar ke-4 dan ke-5. Koin didapatkan dengan menjawab Adu pintar pertama hingga keempat dengan benar. Koin yang dibutuhkan untuk dapat memulai adu pintar ke-4 dan ke-5 adalah masing-masing 10 koin. Setiap pertanyaan benar menghasilkan 1 koin, pertanyaan salah tidak menghasilkan koin. Setiap fase adu pintar hanya berisi 10 soal.

4.3.2. Hasil Pengujian Sistem

Setelah menguji coba sistem dengan mengikuti rencana pengujian, hasil dari uji coba tersebut disimpan sebagai bukti bahwa sistem tersebut sudah berhasil melewati tahap uji coba.

Sistem diuji kepada publik selama 3 hari kepada 50 orang. Hasil yang didapat adalah, semua peserta menyelesaikan mode kehidupan kampus hingga cerita ke 9.

Setelah sistem diuji selama 3 hari, jumlah login ke dalam sistem tidak tetap. Akan tetapi jumlah login pada 3 hari berada pada rentang yang tidak terlalu jauh. Pada hari pertama terdapat total 165 kali login, hari kedua terdapat 182 kali login, dan ketiga terdapat 151 kali login. Rata-rata login per-user selama 3 hari adalah 3,32

(77)

Gambar 4.16 Grafik login peserta selama 3 hari

Jumlah login per-peserta selama 1 kali sehari berjumlah 19 peserta, login 2 kali sehari sebanyak 23 kali, login 3 kali sehari sebanyak 50 kali, login sebanyak 4 kali sehari sebanyak 30 kali, login 5 kali sehari sebanyak 24 kali, login sebanyak 6 kali sehari sebanyak 6 kali, dan login 7 kalo sehari sebanyak 1 kali. Grafik intensitas

login dapat dilihat pada gambar 4.17.

Gambar 4.17 Grafik intensitas login peserta perhari

Setelah sistem diuji selama 3 hari, jumlah pertanyaan yang dapat dijawab dengan benar pada adu pintar fase 1 oleh peserta adalah 273 soal, adu pintar fase 2

165 182 151 0 50 100 150 200

Hari 1 Hari 2 Hari 3

Total Login

Total Login 19 23 50 30 24 7 1 0 10 20 30 40 50 60

1 x login 2 x login 3 x login 4 x login 5 x login 6 x login 7 x login

Login

(1)

Pertemuan : 4

Pembahasan : Pengulangan - For

Tampilan Pembahasan

1. Melakukan perulangan dengan sintaks For.

2. Latihan logika pengulangan dengan sintaks For.

3. Proses pengulangan For.

Penjelasan Grafis

- Gambar ilustrasi dari materi yang dijelaskan disesuaikan dengan kebutuhan.

Kontrol

- Setiap klik akan mengganti dialog karaketer.

- Seluruh pertanyaan harus dijawab dengan benar, apabila salah, soal diberikan kembali. - Pengguna dapat mengulang materi dari awal dengan klik tombol ulangi story.

(2)

Pertemuan : 5

Pembahasan : Variabel

Tampilan Pembahasan

1. Melakukan perulangan dengan sintaks While.

2. Latihan logika pengulangan dengan sintaks While.

3. Proses pengulangan While.

Penjelasan Grafis

- Gambar ilustrasi dari materi yang dijelaskan disesuaikan dengan kebutuhan.

Kontrol

- Setiap klik akan mengganti dialog karaketer.

- Seluruh pertanyaan harus dijawab dengan benar, apabila salah, soal diberikan kembali. - Pengguna dapat mengulang materi dari awal dengan klik tombol ulangi story.

(3)

Pertemuan : 6

Pembahasan : Manipulasi teks

Tampilan Pembahasan

1. Macam-macam sintaks manipulasi teks. 2. Penggabungan, pemisahan teks.

3. Otomatisasi pembuatan teks. 4. Latihan manipulasi teks.

Penjelasan Grafis

- Gambar ilustrasi dari materi yang dijelaskan disesuaikan dengan kebutuhan.

Kontrol

- Setiap klik akan mengganti dialog karaketer.

- Seluruh pertanyaan harus dijawab dengan benar, apabila salah, soal diberikan kembali. - Pengguna dapat mengulang materi dari awal dengan klik tombol ulangi story.

(4)

Pertemuan : 7 Pembahasan : Fungsi

Tampilan Pembahasan

1. Membuat Fungsi sendiri.

2. Menggabungkan fungsi yang ada di PHP menjadi fungsi baru.

3. Pemanggilan fungsi. 4. Latihan fungsi.

Penjelasan Grafis

- Gambar ilustrasi dari materi yang dijelaskan disesuaikan dengan kebutuhan.

Kontrol

- Setiap klik akan mengganti dialog karaketer.

- Seluruh pertanyaan harus dijawab dengan benar, apabila salah, soal diberikan kembali. - Pengguna dapat mengulang materi dari awal dengan klik tombol ulangi story.

(5)

Pertemuan : 8

Pembahasan : PHP dan MySQL

Tampilan Pembahasan

1. Korelasi PHP dan MySQL. 2. Koneksi PHP dengan MySQL. 3. Latihan PHP dan MySQL.

Penjelasan Grafis

- Gambar ilustrasi dari materi yang dijelaskan disesuaikan dengan kebutuhan.

Kontrol

- Setiap klik akan mengganti dialog karaketer.

- Seluruh pertanyaan harus dijawab dengan benar, apabila salah, soal diberikan kembali. - Pengguna dapat mengulang materi dari awal dengan klik tombol ulangi story.

(6)

Pertemuan : 9

Pembahasan : Manipulasi MySQL

Tampilan Pembahasan

1. Fungsi MySQL. 2. Latihan MySQL.

Penjelasan Grafis

- Gambar ilustrasi dari materi yang dijelaskan disesuaikan dengan kebutuhan.

Kontrol

- Setiap klik akan mengganti dialog karaketer.

- Seluruh pertanyaan harus dijawab dengan benar, apabila salah, soal diberikan kembali. - Pengguna dapat mengulang materi dari awal dengan klik tombol ulangi story.

Perancangan M-Learning dengan Menggunakan Metode Gamification