ID Pembuatan Aplikasi Mobile Learning Sebag 2
ID Pembuatan Aplikasi Mobile Learning Sebag 2
ABSTRACT
Mobile learning is the intersection of Mobile Computing and E-Learning that provides the resources that can
be accessed from anywhere, a powerful search system capabilities, rich interaction, full support for effective learning
and assessment based on performance. E-learning has the characteristics are independent of place and time. Education
requires an alternative model of learning has not characteristic depending on location and time. In addition to the
proficiency level, an alternative model is also expected to provide knowledge sharing and visualization facilities of
knowledge so that knowledge becomes more interesting and easy to understand.
Mobile learning application built to run on android operating system. Android operating system was chosen
because it has mastered the current android smartphone market and is an open source operating system that is easy to
develop. Android versions that support this application is version 2.2 to 4.2. Using jQuery mobile framework allows
users to access the M-Learning. Because besides its attractive, jQuery mobile display can also customize the display of
the mobile device.
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 56
3. Mahasiswa dapat mengevaluasi sendiri hasil memberikan manfaat tersedianya materi pelajaran
pembelajarannya dengan mengerjakan soal yang dapat diakses setiap saat dengan menggunakan
latihan melalui perangkat bergerak. perangkat komunikasi bergerak. Hal penting yang
4. dapat memonitoring evaluasi mahasiswa. perlu diperhatikan bahwa tidak setiap materi
pengajaran cocok memanfaatkan M-Learning.
1.3 Batasan Masalah
Untuk menghindari pembahasan yang meluas
maka dalam tugas akhir ini ditetapkan batasan-
batasan masalah dengan hal-hal sebagai berikut:
1. Aplikasi M-Learning ini hanya dapat berjalan
pada smartphone Android & Blackberry.
2. Fitur yang dapat dilayani oleh M-Learning ini
adalah materi kuliah, evaluasi online,
mengunggah & mengunduh file.
3. Pembuatan E-Learning menggunakan bahasa
pemrograman php, sedangkan untuk M- Gambar 1. Arsitektur dari Mobile Learning
Learning menggunakan jQuery Mobile.
4. Database yang digunakan adalah MySQL. Arsitektur dari M-Learning pada Gambar 1
menunjukan bahwa :
II. DASAR TEORI a) Bagian admin dapat mengakses E-Learning
2.1 Electronic Learning melalui PC Dekstop untuk mengatur konten serta
Istilah E-Learning mengandung pengertian yang manajemen user.
sangat luas, sehingga banyak pakar yang b) Bagian server yang terdiri dari beberapa 3 (tiga)
menguraikan tentang definisi E-Learning dari bagian:
berbagai sudut pandang. Salah satu definisi yang o Database yang digunakan untuk menyimpan
cukup dapat diterima banyak pihak misalnya dari konten dari M-Learning.
Darin E. Hartley [Hartley, 2001] yang menyatakan o Aplikasi berbasis web untuk mengatur
bahwa E-Learning merupakan suatu jenis belajar (manajemen) konten M-Learning.
mengajar yang memungkinkan tersampaikannya o Aplikasi server untuk menerima request dan
bahan ajar ke siswa dengan menggunakan media memberi respon client.
internet, intranet atau media jaringan komputer lain c) Aplikasi client (aplikasi M-learning) yang
Adapun manfaat E-Learning menurut Bates dan dikembangkan untuk perangkat bergerak akan
Wulf (Permana, 2010) terdiri dari empat hal, yaitu: berhadapan langsung dengan client.
a. Meningkatkan kadar interaksi pembelajaran
antara peserta didik dengan pengajar (enhance
2.3. PHP (PHP Hypertext Preprocessor)
interactivity);
PHP adalah bahasa pemrograman yang paling
b. Memungkinkan terjadinya interaksi
banyak dipakai saat ini. PHP banyak dipakai untuk
pembelajaran darimana dan kapan saja (time and
memrogram situs web dinamis, walaupun tidak
place flexibility);
tertutup kemungkinan digunakan untuk pemakaian
c. Menjangkau peserta didik dalam cakupan yang
lain.
luas (potential to reach a global audience);
Model kerja PHP hampir sama dengan HTML,
d. Mempermudah penyempurnaan dan
hanya saja dalam prosesnya, saat berkas PHP
penyimpanan materi pembelajaran (easy
dijalankan, akan melakkan pengolahan data yang
updating of content as well as archivable
nantinya baru ditampilkan dalam bentuk HTML,
capabilities).
berbeda dengan HTML yang hanya menampilkan
Berdasarkan uraian di atas, penyelenggaraan
data tanpa pengolahan. Proses kerja tersebut dapat
pembelajaran melalui E-Learning banyak sekali
kita lihat pada Gambar 2 berikut.
manfaat yang dapat diperoleh baik oleh pengajar
maupun peserta didik terutama pada zaman yang
menuntut serba instan ini. Oleh sebab itu, sudah
saatnya kini baik sebagai pengajar maupun peserta
didik mengembangkan kemampuannya di bidang TI.
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 57
Keterangan Gambar 2 adalah sebagai berikut. sistem operasi mobile. Apabila sudah terkonversi
1. Web browser mengakses kode PHP melewati sempurna maka akan berubah menjadi suatu aplikasi
web server. yang dapat berjalan di perangkat bergerak.
2. Web server akan membaca kode PHP dari
dokumen yang tersimpan
3. Kode yang dijalankan oleh web server akan
diterjemahkan oleh PHP engine.
4. Kode PHP yang telah diterjemahkan akan
diubah menjadi format yang dapat dibaca di web Gambar 3. Skema Phonegap
browser.
5. File yang telah diterjemahkan akan dikirim 2.7. Pendekatan Terstruktur
kembali ke web server untuk ditampilkan ke Dalam perancangan perangkat lunak ini,
web browser. digunakan salah satu pendekatan yang dikenal
6. Web server menampilkan kode yang telah dengan istilah pendekatan terstruktur dengan tools
diterjemahkan ke web browser. yang digunakan adalah Diagram konteks dan DFD,
serta untuk perancangan basis data menggunakan
2.4. jQuery Mobile pemodelan ERD dan proses normalisasi.
jQuery Mobile merupakan kerangka kerja
JavaScript seperti halnya Jquery pada desktop, 2.7.1. Diagram Konteks (DFD Level 0)
Namun penggunaannya khusus ditargetkan untuk Diagram konteks merupakan tingkatan tertinggi
perangkat bergerak seperti iPad, iPhone, Blackberry, dalam diagram aliran data dan hanya memuat satu
Symbian, Android, dll. jQuery Mobile proses, menunjukkan sistem secara keseluruhan.
memungkinkan pembuatan aplikasi web yang multi Dapat dikatakan juga bahwa diagram konteks
platform, atau tidak tergantung pada piranti keras menggambarkan hubungan sistem dengan
tertentu. jQuery Mobile ini juga telah mendukung lingkungan luarnya.
penggunaan layar sentuh, sehingga aplikasi kita
dapat mengoptimalkan perangkat yang ada. 2.7.2. Diagram Level 1 (DFD Level 1)
DFD level 1 ini merupakan alat perancangan
2.5. MySQL sistem yang berorientasi pada alur data dengan
MySQL adalah Relational Database konsep dekomposisi dapat digunakan untuk
Management System (RDBMS) yang didistribusikan penggambaran analisa maupun rancangan. Pada
secara gratis dibawah lisensi GPL (General Public dasarnya DFD level 1 adalah dekomposisi dari
License). Dimana setiap orang bebas untuk Diagram Konteks.
menggunakan MySQL, namun tidak boleh dijadikan
produk turunan yang bersifat closed source atau 2.7.3. Entity Relationship Diagram
komersial. Entity Relational Diagram merupakan salah satu
MySQL sebenarnya merupakan turunan salah pemodelan data konseptual yang paling sering
satu konsep utama dalam database sejak lama, yaitu digunakan dalam proses pengembangan basis data
SQL (Structured Query Language). SQL adalah bertipe relasional. Model E-R adalah rincian yang
sebuah konsep pengoperasian database, terutama merupakan representasi logika dari data pada suatu
untuk pemilihan atau seleksi dan pemasukan data, organisasi atau area bisnis tertentu.
yang memungkinkan pengoperasian data dikerjakan
dengan mudah secara otomatis. III. PERANCANGAN PERANGKAT LUNAK
Perancangan sistem ini meliputi analisis
2.6. Phonegap kebutuhan yang kemudian dilanjutkan dengan
Phonegap adalah aplikasi yang menampung dan perancangan proses bisnis dengan menggunakan
mengizinkan anda untuk membangun secara native Context Diagram atau Diagram Konteks, DFD (Data
aplikasi yang di instal menggunakan HTML, CSS & Flow Diagram) dan perancangan basis data dengan
JavaScript. Dengan menggunakan Phonegap, menggunakan ERD (Entity Relationship Diagram)
pengembang dapat menulis aplikasi mereka sekali dan proses normalisasi basis data.
dan menyebarkannya ke enam platform mobile
utama dan toko aplikasi, termasuk Apple iOS, 3.1 Analisis Kebutuhan
Android, BlackBerry, WebOS, Samsung bada dan Analisis kebutuhan telah dilakukan dengan
Symbian. observasi dari lingkungan dimana sistem akan
Gambar 3 menjelasan skema pembuatan dibangun. Berikut adalah kebutuhan rinci dari sistem.
program menggunakan phonegap. Kode-kode Kebutuhan Fungsional
program yang telah dibuat sebelumnya akan di a. Adanya pembagian pengguna menjadi tiga
konversi menjadi format yang dapat dibaca oleh kelompok dalam E-Learning sebagai berikut.
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 58
o Mahasiswa (dengan login) hak aksesnya. Jika keluar sistem harus melalui proses
o Dosen (dengan login) logout.
o Administrator (dengan login) Proses logout diperlukan untuk menentukan
b. Adanya fasilitas dosen dapat mengunggah suatu user masih berada di dalam atau sudah keluar
materi di E-Learning. dari sistem. Inti dari proses logout ini adalah
c. Adanya fasilitas dosen dapat menambah penghapusan pengenal sesi. Tanpa pengenal sesi
kelas & materi kuliah di E-Learning pengguna tidak dapat mengakses sistem.
d. Adanya fasilitas agar mahasiswa dapat
mengunduh melalui perangkat bergerak. 3.2.2. Data Flow Diagram
e. Dosen dapat membuat evaluasi baik untuk Berikut dapat dilihat DFD level 1 dari E-
soal pilihan ganda maupun esai pada E- Learning
Learning.
f. Adanya fasilitas mahasiswa dapat
mengerjakan evaluasi menggunakan
perangkat bergerak.
g. Dosen dapat mengkoreksi jawaban yang
sudah dikerjakan oleh mahasiswa.
h. Adanya administrator untuk maintenance E-
Learning.
Kebutuhan Non-Fungsional
a. Operasional
Dapat diakses client dari berbagai
browser yang mendukung javascript.
Dapat diakses di smartphone Android &
Blackberry.
b. Keamanan
Adanya penggunaan password dalam
form login untuk membedakan tipe user
termasuk hak akses masing-masing. Gambar 5. DFD level 1 E-Learning
3.2 Pemodelan Perangkat Lunak DFD level 1 dari E-learning seperti pada
Berikut adalah pemodelan perangkat lunak yang Gambar 5. Pada DFD level 1 ini terdapat 4 (empat)
menggunakan Diagram konteks, Data Flow proses, yaitu:
Diagram, dan Entity Relationship Diagram. 1. Otorisasi
Merupakan proses pemisahan user dalam
3.2.1. Diagram Konteks mengakses E-Learning. Terdapat tiga user yang
Berikut dapat kita lihat diagram konteks dari terlibat dalam E-Learning ini yaitu admin, dosen dan
sistem. mahasiswa. Dimana setiap user memiliki otoritas
tertentu dalam mengakses sistem ini.
2. Pengelolaan
Merupakan proses yang dilakukan untuk
mengelola data baik data user maupun kelas. Pada
proses ini yang berwenang dalam melakukan semua
pengelolaan data adalah administrator.
3. Pembelajaran
Merupakan proses untuk mengatur pembelajaran
pada E-Learning, baik menajemen file, membuat
soal, membuat jawaban dan lain-lain. Jadi dosen
memberikan bahan pembelajaran, sedangkan
Gambar 4. Diagram konteks dari sistem mahasiswa yang menerimanya.
4. Penilaian
Gambar 4 menunjukan bahwa ada tiga user Merupakan kelanjutan dari proses pembelajaran.
yang terlibat yaitu: administrator, mahasiswa dan Setelah mahasiswa mengerjakan soal, maka
pengajar. Ketiga user saling berinteraksi dengan selanjutnya akan ada proses penilaian. Untuk soal
melibatkan berbagai data. Sebelum user memasuki pilihan ganda akan langsung muncul nilai, namun
sistem harus melalui login, jika berhasil maka user pada soal esai dosen sendiri yang langsung menilai.
dapat masuk sistem & mengakses data-data sesuai
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 59
Sedangkan DFD Level 1 dari M-Learning adalah proses dekomposisi dari tabel relasional maka tabel-
sebagai berikut tabel basis data disajikan dalam bentuk sebagai
berikut :
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 60
Ada beberapa menu di dalam E-Learning
salah satu menunya yaitu edit username & password
mahasiswa. Fungsi menu ini adalah untuk mengganti
password & username mahasiswa, caranya tinggal
masukan username dan password baru dalam form
yang terlah disediakan kemudian klik tombol
“update” seperti pada Gambar 11.
4.1 Implementasi
Tahapan implementasi dilakukan dalam dua
tahapan. Tahapan pertama adalah implementasi
antarmuka E-Learning, kemudian dilanjutkan dengan
implementasi antarmuka M-Learning.
Gambar 10. Tampilan Home Mahasiswa Gambar 12. Tampilan Soal Pilihan Ganda & Esai
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 61
Setelah mengerjakan soal maka untuk mengetahui satu cara pengajar menyediakan evaluasi adalah
nilai, klik menu nilai lalu pilih materi kuliah. Setelah dengan membuat soal. Gambar 16 adalah tampilan
itu akan muncul form yang didalamnya terdapat nilai form pembuatan soal pilihan ganda.
soal. Gambar 13 menunjukan tampilan lihat nilai
mahasiswa.
Gambar 15. Tampilan Manajemen File Materi Gambar 17 menunjukan menu apa saja yang
terdapat pada M-Learning. Terdapat lima menu yang
Salah satu fungsi E-Learning adalah disediakan dalam M-Learning yaitu mengganti akun,
menyediakan evaluasi kepada peserta didik. Salah melihat mata kuliah, mengunduh materi,
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 62
mengerjakan soal, dan melihat nilai. Menu-menu
tersebut dijelaskan sebagai berikut
a. Edit Akun
Menu ini digunakan untuk mengganti username
& password. Gambar 18 menunjukan form
pengisian username dan password yang baru.
d. Nilai
Menu nilai digunakan untuk melihat nilai
setelah mahasiswa mengerjakan soal. Gambar
21 menunjukan isi dari menu nilai.
b. Unduh Materi
Menu unduh materi digunakan untuk menguduh
materi sesuai kelas yang diikuti mahasiswa.
Gambar 19 menunjukan form untuk mengunduh
materi.
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 63
4.2.2. Material Pengujian 1. Otorisasi user (mahasiswa)
Materi yang akan diuji dalam pengujian ini 2. Mengganti username dan password
adalah sebagai berikut : 3. Melihat kelas dan deskripsi materi kuliah
1. Tampilan Program. 4. Mengerjakan soal esai dan pilihan ganda
2. Tampilan form Aplikasi E-Learning & M- 5. Mengunduh materi kuliah
Learning yang terkait dalam interaksi pengguna 6. Melihat nilai kuis
dengan sistem.
3. Hasil keluaran Aplikasi E-Learning & M- Hasil uji dari percobaan yang telah dilakukan pada
Learning baik berupa informasi yang hanya beberapa versi sistem operasi android dijelaskan
disajikan di layar. sebagai berikut.
4. Spesifikasi Aplikasi E-Learning & M-Learning
Sistem Komputer Universitas Diponegoro.
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 64
5.1 Kesimpulan DAFTAR PUSTAKA
1. Pembuatan aplikasi M-Learning dibangun
dengan phonegap. Yaitu sebuah development
framework yang memungkinkan pengembang Ally, Mohamed. (2009). Mobile Learning Transforming
untuk menggunakan teknologi berbasis web the Delivery of Education and Training. Atabasca
(HTML, CSS dan JavaScript) untuk membuat University : AU Press
aplikasi mobile.
2. Jquery Mobile menciptakan user interface yang Darin E.Hartley, Selling E-Learning, American Society for
nyaman apabila diakses sebab tampilannya Training and Development. 2001.
dapat menyesuaikan layar pada perangkat
bergerak. Hakim, Lukamanul. (2009). Jalan Pintas Menjadi Master
3. Aplikasi M-Learning dapat terhubung ke server PHP. Yogyakarta : Lokomedia.
basis data karena adanya permission di android
Kurniawan, Heri. (2011). Trik Membuat Web Template
yang mengizinkan untuk mengakses internet.
dengan PHP & CSS. Yogyakarta : Lokomedia.
4. Berdasarkan pengujian terhadap beberapa versi
android, maka disimpulkan bahwa aplikasi M- Quinn, Clack. 2000. Mlearning, Mobile Wireless in Your
Leaning dapat berjalan pada versi android 2.2 Pocket Learning. [online] (htttp://www.linezine.com/
(Froyo) Sampai versi android 4.2 (Jelly Bean), 2.1/feature/cqmmwiyp.htm, diakses 8 Desember 2012).
dengan beberapa keterbatasan sebagai berikut
o Sistem operasi android versi Honeycomb, Ice Riyanto. B, (2006), Perancangan Aplikasi M-Learning
Cream dan Jelly Bean sangat baik dari segi Berbasis Java. Prosiding Konferensi Nasional Teknologi
user interface sebab Smarphone yang Informasi & Komunikasi untuk Indonesia 3-4 Mei 2006.
mendukung versi tersebut rata-rata sudah 386-392.
memiliki ikuran layar yang cukup sebesar
o Kompatibilitas dari lima versi android yang
diuji kan berbeda-beda. Versi foryo dan BIODATA PENULIS
gingerbread dapat mendukung fitur orientasi
lyar (landscape & portrait) namun untuk Afandi Nur Aziz Thohari., lahir di
fitur page transition tidak mendukung. Semarang, tanggal 11 April 1990.
Sedangkan pada versi Honeycomb, Ice Menempuh pendidikan dasar di SDN
Cream & Jelly Bean berlaku sebaliknya Tlogosari Kulon 04 Semarang,
o Kecepatan memproses aplikasi android versi Melanjutkan ke SMPN 4 Semarang,
Honeycomb, Ice Cream dan Jelly Bean cepat kemudian menempuh pendidikan
dikarenakan perangkat yang dapat tingkat atas di SMAN 2 Semarang
menggunakan versi tersebut memiliki lulus tahun 2008. Dari tahun 2008 sampai saat ini masih
prosesor, memori dengan kapasitas yang menyelesaikan studi Strata-1 di Program Studi Teknik
tinggi. Sistem Komputer Fakultas Teknik Universitas Diponegoro
Semarang.
5.2 Saran
1. Perlu dilakukan penelitian lebih lanjut mengenai
bagaimana membuat agar mahasiswa dapat
mengikuti lebih dari satu kelas dalam E-
Learning.
2. Penggunaan jQuery Mobile pada Mobile
Learning harus mempertimbangkan masalah
sumberdaya perangkat bergerak, terutama pada
ukuran layar. Sebab ada banyak model
smartphone dengan berbagai ukuran layar. Jadi
dalam mendesain harus menyesuaikan ukuran
layar yang paling kecil.
3. Perlu dilakukan penelitian lebih lanjut mengenai
bagaimana cara membuat paging soal saat
mengerjakan kuis/tugas pada perangkat
bergerak.
4. Perlu dilakukan penelitian lebih lanjut mengenai
bagaimana membuat agar Mobile Learning
dapat diterapkan lintas sistem operasi. Misalnya
Blackberry, iOS, Widows Phone dll
Jurnal Teknologi dan Sistem Komputer - Vol.1, No.2, April 2013 JTSiskom - 65