APLIKASI M-LEARNING BERBASIS HTML5 MENGGUNAKAN JQUERY MOBILE

Evolusi Vol.III No.1 Maret 2015 ISSN: 2338-8161

APLIKASI M-LEARNING BERBASIS HTML5 MENGGUNAKAN JQUERY MOBILE Imam Soleh Ma’rifati Program Studi Manajemen Informatika, AMIK BSI Purwokerto Jl. DR. Bunyamin No.106 Pabuaran, Purwokerto Telp. (0281) 642848/642978 [email protected]

Abstract Number of internet users increase rapidly nowadays and according to the Ministry of Communications and Information Technology of Indonesia, 80% of internet users are between 1519 years old, this means most of them are students at high school. In educational field, internet also used to presents learning material to students. This known as electronic learning (elearning). E-learning using the internet to present learning materials to students who access using a computer or laptop. Along with the advance of new communication technologies like smartphone, tablet and other mobile device, e-learning also use the new technology to access learning materials. E-learning that use mobile deivice known as mobile-learning (m-learning). The concept of mobile-learning is e-learning, which focuses on the use of mobile devices to access learning media. M-learning applications needed to access and present the materials or media that is accessible via mobile devices. Because the mobile data card has different characteristics to a desktop computer or laptop, then the m-learning applications also had to adapt the device beeing used. Developing application for mobile device can be achieved throught web tecnology as a web base application. Web base application can build using HTML 5, a new version of HTML, a language to present information. Using HTML 5, we can build web base application more easier bacause this aplication can be accessed using diferent device with single code. This is very advantageous because the application does not need to be made in different versions for each device used to access the application. In this study, we developed an application for m-learning based on a HTML 5 framework called Jquery Mobile. Model for developing application use the waterfall model, while stages in development process refers to system development life cycle (SDLC). The result is a web base application for m-learning. It is intended to use mobile device to access the learning materials. Keywords: M-Learning, web base aplication, HTML5, Jquery Mobile. A. PENDAHULUAN Pengguna internet di Indonesia dewasa ini mengalami peningkatan yang pesat. Menurut Kementrian Komunikasi dan Informatika pada Mei 2014, pengguna internet di Indonesia mencapai angka 82 juta orang. Dari jumlah tersebut ternyata 80% pengguna internet adalah remaja dengan kisaran usia 15-19 tahun (Septriana, 2014). Sedangkan Google menyatakan bahwa Indonesia termasuk dalam 5 besar pengguna internet di dunia dan diperkirakan akan terus meningkat di tahun-tahun mendatang (detik.com, 2015). Berdasarkan uraian di atas, pengguna internet di Indonesia ternyata cukup besar terutama di kalangan remaja yang mencapai 80% dari pengguna internet. Sangat disayangkan jika besarnya pengguna internet tersebut tidak dimanfaatkan dengan

baik. Padahal penggunaan internet dapat dimanfaatkan dalam berbagai bidang, salah satunya dalam dunia pendidikan yang lebih dikenal dengan nama e-learning (Electronic Learning). E-learning pada dasarnya adalah proses pembelajaran dengan memanfaatkan perangkat elektronik seperti penggunaan komputer dan internet untuk mengakses media pembelajaran secara on-line oleh siswa. Dengan memanfaatkan teknologi internet, maka proses pembelajaran dapat dilakukan dari mana saja dan kapan pun selama ada koneksi dengan jaringan internet. Dengan kata lain, e-learning memungkinkan adanya kegiatan pembelajaran yang lebih leluasa tanpa terikat oleh tempat dan waktu. Seiring dengan perkembangan teknologi, kini dengan muncul perangkat smartphone, media yang digunakan untuk mengakses

61

Aplikasi M-Learning Berbasis Html5 Menggunakan Jquery Mobile

internet juga mengalami pergeseran dari pemakaian pc menjadi pemakaian smartphone atau tablet. Oleh karena itu konsep e-learning juga berkembang menjadi m-learning(mobile-learning). M-learning pada hakekatnya adalah e-learning yang memfokuskan pada penggunakan perangkat mobile dalam mengakses konten (media) pembelajaran secara on-line(Pieri dan Diamantini, 2009). Pada penelitian ini, penulis tertarik untuk mengembangkan aplikasi m-learning berbasis web dengan menggunakan HTML5. Agar aplikasi mudah digunakan pada perangkat mobile, penulis memakai framework Jquery Mobile yang dibuat secara khusus untuk penggunaan perangkat mobil dan penggunaan layar sentuh. Dalam mengembangkan aplikasi penulis menggunakan mode waterfall dan mengacu pada System Development Life Cycle (SDLC). Hasilnya adalah aplikasi m-learnig yang dapat digunakan oleh sekolah yang membutuhkan dan ingin memanfaatkan mlearning sebagai pendukung pembelajaran konvensional. B. TINJAUAN PUSTAKA 1. Teknologi Informasi Teknologi Informasi (information technology) secara umum adalah teknologi yang membantu manusia dalam membuat, mengubah, menyimpan, mengkomunikasikan informasi yang mencakup proses komputasi dan komunikasi data, audio, dan video (Williams dan Sawyer, 2007). Dalam perkembangannya, TI juga digunakan dalam bidang pendidikan dengan memanfaatkan internet sebagai media komunikasi yang lebih dikenal dengan nama Electronic Learning (ELearning). 2. M-Learning (Mobile Learning) Penggunaan media komunikasi elektronik seperti internet, intranet dan media elektonik lainnya untuk menyuguhkan konten pembelajaran dikenal dengan istilah E-learning (Electrinic Learning).Mobile Learning (M-learning) merupakan pengembangan E-Learning dimana media pembelajaran dirancang untuk diakses menggunakan perangkat mobile seperti telepon, smartphone dan tablet pc. Tujuan utamanya adalah agar pengguna dapat mengakses media pembelajaran tanpa batasan tempat dan waktu (Crescente dan Lee, 2010).M-Learningpada dasarnya adalah

62

E-Learningyang menggunakan perangkat mobile dan komunikasi nir-kabel (Pieri dan Diamantini, 2009) 3. Aplikasi Web (Webapp) Aplikasi web (webapp) merupakan aplikasi yang diakses menggunakan web browser melalui jaringan internet atau intranet. Bahasa pemrograman yang digunakan adalah HTML atau java (javascript). Aplikasi web populer karena kemudahan bagi aplikasi klien untuk mengaksesnya, penjelajah web atau web browser. Aplikasinya sendiri tersimpan di sebuah web server oleh karena itu pemeliharaan dan pembaruan aplikasi dapat dilakukan tanpa perlu mendistribusi dan memasang aplikasi pada klien. 4. HTML 5 HTML (Hyper Text Markup Language) merupakan bahasa yang digunakan dalam pembuatan website. Sedangkan HTML5 adalah versi ke-5 dari HTML yang diprakarsai oleh W3C (WWW Consorcium) dan WHATWG (Web Hypertext Application Technology Work Group). Pada akhir tahun 2014, W3C menyatakan bahwa HTML5 telah memenuhi rekomendasinya (penambahan fitur-fiturnya sudah dinyatakan lengkap). Pada HTML5 ditambahkan perintahperintah baru yang memudahkan pembuatan halaman web bila dibanding dengan versi sebelumnya. HTML5 sendiri sebenarnya gabungan teknologi web yaitu HTML versi 5, CSS3 dan Javascript (Jquery). 5. Jquery Mobile Jquery Mobile merupakan framework berbasis jquery yang dibagun dengan tujuan bisa diakses secara universal dengan desain web responsif (responsive web design RWD). Jquery Mobile rancang untuk penggunanan layar sentuh, menggunakan HTML5 sehingga dapat digunakan dengan mudah untuk membangun aplikasi berbasis web yang responsif dengan target diakses dari semua perangkat mobile seperti smartphone, tablet maupun desktop (http://www.jqueryfoundation.com) 6. PHP PHP merupakan bahasa pemrograman web yang bersifat open source. Skrip dalam bahasa PHP dijalankan di tingkat server untuk memproses data yang nantinya


dikirim ke browser dalam format html (Luke Welling dan Laura Thomson, 2009). 7. MYSQL MySQL adalah sistem manajemen basis data (DBMS, Database Managemen System) yang dibuat oleh MySQL AB. Dalam pengembangan aplikasi m-learning, digunakan MySQL sebagai database untuk penyimpanan data. C. METODE PENELITIAN Penelitian ini menggunakan metode penelitian ekperimen dan metode pengumpulan data digunakan metode studi pustaka. Sedangkan dalam pengembangan aplikasi m-learning, penulis menggunakan model waterfall dan metode pengembangan aplikasi yang mengacu pada systems development life cycle (SDLC). D. PERANCANGAN APLIKASI Aplikasi m-learning dibuat dalam 3 modul (sub apikasi) 1. Ruang siswa, digunakan oleh siswa untuk mengunduh media/konten pembelajaran yang terdiri dari materimateri mata pelajaran. Setelah mempelajari materi, siswa dapat mengakses soal-soal latihan untuk menguji kemampuan atau pemahaman atas materi mata pelajaran. 2. Ruang guru, digunakan oleh guru untuk mengunggah materi pelajaran dan membuat soal-soal latihan. Guru juga bisa melihat nilai hasil latihan soal yang dikerjakan oleh siswa. 3. Ruang admin, digunakan oleh administrator untuk mengisi data kelas, data guru, data siswa dan data-data lainnya. Semua modul dibuat menggunakan framework Jquery Mobile sehingga dapat dengan mudah diakses menggunakan perangkat mobile. Jadi semua pengguna bisa mengakses fungsi-fungsi aplikasi dari perangkat mobile. Aplikasi ini tidak dapat dibuka oleh umum, maksudnya semua pengguna (siswa, guru dan admin) diharuskan login dengan menggunakan identitas dan password yang mereka miliki. Jadi jika aplikasi digunakan oleh sekolah tertentu, maka hanya civitas akademika pada sekolah tersebut saja yang bisa masuk ke dalam sistem.

1. SITEMAP Berikut ini adalah rancangan peta situs (site map) untuk aplikasi m-learning yang dikembangkan. a) Ruang Siswa

Gambar 1. Sitemap ruang siswa. b) Ruang Guru

Gambar 2. Sitemap ruang guru. c) Administrator

Gambar 3. Sitemap ruang admin. 2. DATABASE Database diperlukan untuk menyimpan data-data yang digunakan oleh aplikasi MLearning. Di dalam sebuah database dibuat tabel-tabel untuk menyimpan data yang dikelompokkan sesuai jenisnya. Rancangan struktur tabel dalam database yang digunakan untuk menyimpan data aplikasi m-learning adalah:

63


a) Tabel Dtguru, digunakan menyimpan data guru. FIELD kodeguru namaguru passwd

TYPE varchar(3) varchar(30) varchar(10)

untuk

KET PRIMARY KEY

TYPE int(10)

mapel kelas Kodeguru

varchar(30) Text varchar(3)

KET AUTO_INCREMEN , PRIMARY KEY

c) Tabel Dtmateri, digunakan untuk menyimpan data materi per mata pelajaran. FIELD idmater i

TYPE int(10)

idmapel noptm judul filenya

int(10) smallint(3) varchar(50) varchar(50)

KET AUTO_INCREMEN T, PRIMARY KEY

d) Tabel Dtsoal, digunakan untuk menyimpan data soal per materi. FIELD idsoal

TYPE int(10)

idmateri jwba jwbb Jwbc Jwbd Jwbe kunci

int(10) text text text text text varchar(1)

KET AUTO_INCREMENT, PRIMARY KEY

TYPE int(10)

Nim idmateri kunci jawab benar jmlsoal nilai

varchar(8) int(10) text text int(10) int(10) int(10)

KET AUTO_INCREMENT, PRIMARY KEY

f) Tabel Dtsiswa, digunakan menyimpan data siswa.

64

KET PRIMARY KEY

FIELD idkelas

TYPE varchar(10)

untuk

untuk

KET PRIMARY KEY

h) Tabel Dtsekolah, digunakan untuk menyimpan data sekolah. FIELD Id

TYPE tinyint(1)

namasekolah alamat email homesiswa homeguru

varchar(40) Text varchar(40) text text

KET DEFAULT 1, PRIMARY KEY

i) Tabel Dtinfo, digunakan menyimpan informasi/pengumuman. FIELD idinfo judul infonya tglpost

TYPE int(10) varchar(50) Text timestamp

target

tinyint(1)

aktif

tinyint(1)

FIELD idadmin

TYPE int(3)

nama passwd

varchar(10) varchar(10)

untuk data

KET PRIMARY KEY

DEFAULT CURRENT_TIME STAMP unsigned NOT NULL DEFAULT '0' unsigned NOT NULL DEFAULT '1'

j) Tabel Dtadmin, digunakan menyimpan data administrator.

e) Tabel Dtjawab, digunakan untuk menyimpan data jawaban dari soal latihan. FIELD idjawab

TYPE varchar(8) varchar(30) varchar(10) varchar(10)

g) Tabel Dtkelas, digunakan menyimpan data kelas.

b) Tabel Dtmapel, digunakan untuk menyimpan data mata pelajaran. FIELD idmapel

FIELD Nim nama kelas passwd

untuk

KET DEFAULT 1, PRIMARY KEY

3. DESAIN INTERFACE Berikut ini adalah rancangan tampilan aplikasi m-learning:


E. KESIMPULAN Berdasarkan uraian di disimpulkan sebagai berikut:

atas,

dapat

1. Aplikasi m-learning dapat dibuat dengan menggunakan HTML5 dalam bentuk aplikasi berbasis web yang diakses menggunakan perangkat mobile. 2. Sekolah dapat menggunakan aplikasi mlearning untuk meningkatkan kegiatan belajar siswa agar lebih efektif diluar jam belajar formal.

DAFTAR PUSTAKA

Gambar 5. Desain tampilan

Crescente, Mary Louise & Doris Lee. 2010. Critical issues of m-learning: design models, adoption processes, and future trends. Journal of the Chinese Institute of Industrial EngineersVolume 28, Issue 2, 2011. http://www.tandfonline.com/doi/abs/ 10.1080/10170669.2010.548856 Jogiyanto HM. 2008. Analisis & Desain Sistem Informasi: Pendekatan Terstruktur Teori Dan Praktek Aplikasi Bisnis. Andi Offset. Yogyakarta. Pieri, Michelle & Davide Diamantini. 2009. From E-Learning To MobileLearning: New Opportunities. Book : Mobile learning: transforming the delivery of education and traning. Canada: AU Press, Arthabasca University. ISBN 978-1-897425-44-2 Welling, Luke and Laura Thomson. 2009. PHP and MySQLWeb Development. 4th edition. New York. Adisson Wesley. by Pearson Education, Inc.ISBN 978-0-672-32916-6 Doyle, Matt. 2020. Begining PHP 5.3. USA, Indiana: Wiley Publishing, Inc. ISBN: 978-0-470-41396-8 Detik.com, 2015. Ini Alasan Indonesia Jadi Sasaran Ponsel Murah Android One. Detik.com, 04-022015.http://inet.detik.com/read/2015/ 02/04/171611/2823681/317/inialasan-indonesia-jadi-sasaran-ponselmurah-android-one (diakses: 09-042015 10:06) Septriana, 2014. Pengguna Internet di Indonesia Capai 82 Juta. Kominfo. Kamis, 08-05-2014. http://kominfo .go.id/index.php/content/detail/ 3980/Kemkominfo%3A

65


+Pengguna+Internet+di+Indonesia+C apai+82+Juta/0/berita_satker#.VSeW

66

6haeQ7s. 15:20)

(diakses:

09-04-2015

APLIKASI M-LEARNING BERBASIS HTML5 MENGGUNAKAN JQUERY MOBILE

Recommend Documents