Buku Pengembangan Aplikasi Bahan Ajar d

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

i

Pengembangan
Aplikasi Bahan Ajar
Dalam Perangkat Bergerak
Prayitno

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

i

Pengembangan Aplikasi Bahan Ajar dalam Perangkat Bergerak
© JARC Seamolec,
3
Hak cipta dilindungi oleh undang-undang. Dilarang memperbanyak
sebagian atau seluruh buku ini dalam bentuk apapun tanpa izin
tertulis dari Seamolec.
Penulis
Prayitno

Editor
Cahya Kusuma Ratih
Tim JARC Seamolec
Cahya Kusuma Ratih
Abdul Rizal Adompo
Kristinanti Charisma
Sandi Satya Nugraha
Harits Cahya Nugraha
Aji Wicaksono
Mochamad Basofi

Seameo Seamolec
Jl. Cabe Raya, Pondok Cabe,
Pamulang 15418 PO Box 59/CPA,
Ciputat, Jakarta, Indonesia
Phone: (62-21) 7422184
Fax: (62-21) 7422276
Website: http://www.seamolec.org

Kata Pengantar

Buku JENI tentang Pengembangan Aplikasi
Bahan Ajar dalam Perangkat Bergerak J2ME
ini dirancang untuk dapat digunakan oleh para
pendidik atau instruktur maupun umum untuk
membantu mereka dalam proses belajar di
bidang programming skill berbasis JENI.
Selain itu buku ini dapat dijadikan tutorial dalam mengembangkan
produk pembelajaran interaktif (Aplikasi) berbasis Java yang akan
difokuskan untuk pengembangan aplikasi berbasis Mobile, baik
dijenjang Perguruan Tinggi, SLTA, SLTP maupun masyarakat.
Buku ini berisi tentang proses pembuatan aplikasi sederhana
untuk perangkat bergerak meliputi materi tentang perangkat
bergerak, membangun aplikasi di handphone serta contoh projek
yang akan dibuat.
SEAMEO SEAMOLEC sebagai pengembang pembelajaran
terbuka dan jarak jauh di Asia Tenggara memandang bahwa
kurikulum JENI dan Aplikasi Permainan Edukatif berbasis
Mobile (Mobile Game Based Learning) dapat diintegrasikan
dalam pola pembelajaran terbuka maupun jarak jauh untuk
mendukung pembelajaran yang dapat dilakukan “dimana saja,

kapan saja, dan oleh siapa saja”. Oleh karena itu, dengan
disseminasi program JENI pada mitra-mitra SEAMOLEC, dapat
mendorong munculnya inovasi-inovasi media pembelajaran baru
berbasis ICT yang murah dan dapat diaplikasikan oleh seluruh
pelajar di pelosok Indonesia.
Akhir kata semoga buku ini dapaat memberikan manfaat.
Direktur SEAMEO SEAMOLEC
Dr. Ir. Gatot Hari Priowirjanto
i

DAFTAR ISI
BAB I Pendahuluan ............................................................................. 1
1.1

Era Mobile (Perangkat Bergerak) ....................................... 1

1.2.

Java dan Netbeans .............................................................. 4


1.3

Spesifikasi ........................................................................... 7

1.4

Contoh Projek ..................................................................... 8

BAB II ISI ............................................................................................ 10
2.1. Persiapan Materi ................................................................... 10
2.2. Target Handphone ................................................................. 15
2.3. Persiapan Gambar, material, atau Resource ......................... 16
2.4 Bekerja dengan Netbeans Visual Midlet ................................ 17
2.5 Uji Coba................................................................................... 49
BAB III Penutup ................................................................................. 51
3.1 Pengembangan Materi Bahan Ajar......................................... 51

ii

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile


BAB I Pendahuluan
1.1 Era Mobile (Perangkat Bergerak)

Era mobile ditandai dengan meluasnya penggunaan peralatan
yang mengunakan teknologi tanpa kabel (wireless). Perangkatperangkat tersebut awalnya dominasi oleh Mobile phone (atau
populer disebut handphone/ponsel). Kemudian berbagai
aplikasi dan fitur ditambahkan dalam handphone sehingga
fungsinya lebih dari sekedar alat komunikasi suara. Mobile
phone kemudian dikenal dengan smart phone (ponsel pintar).
Trend terbaru perangkat mobile akhir-akhir ini adalah tablet PC
yang memiliki lebih banyak fungsionalitas perangkat mobile.
Menurut rilis laporan PBB yang ditulis oleh kompas pada 16
Februari 2010 diperkirakan tahun ini pengguna ponsel lebih
dari lima milyar pengguna. Sementara data yang dirilis
Wireless Intelligent menempatkan Indonesia pada peringkat
ke-6 pengguna ponsel dengan 116 juta pengguna (data tahun
2009). Hal ini tentu menunjukkan bagaimana penetrasi
teknologi mobile telah sedemikian cepat.


Gambar 1.1. Data Wireless Intlligent

JARC Seamolec | Supplemen Bahan Ajar Berbasis Mobile

1

Era mobile membawa kemudahan dalam berbagai bidang.
Dukungan teknologi, penggunaan yang relatif mudah, dan
perangkat yang semakin affordable membuat layanan-layanan
berbasis mobile tumbuh dengan subur. E-commerce, ebanking, dan entertainment adalah bidang-bidang yang aktif
berkembang di era mobile.

Gambar 1.2. E-banking dengan perangkat mobile pada layanan salah satu
Bank di Indonesia

Gambar 1.3. Tampilan MLE ( Mobile Learning Engine) untuk pengguna
Moodle di ponsel

2


JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Dunia pendidikan adalah dunia yang sangat dinamis. Berbagai
upaya dilakukan untuk meningkatkan kualitas teknik maupun
media transformasi ilmu pengetahuan. Sejalan dengan tren era
mobile maka menggunakan teknologi dan media mobile
sebagai suplemen bahan ajar adalah hal yang sangat tepat.
Perangkat telekomunikasi mobile/ponsel yang telah banyak
dimiliki oleh siswa dapat digunakan sebagai sarana untuk
belajar. Dengan dukungan teknologi Java Micro Edition bahanbahan belajar dapat dibuat dan disesuaikan dengan teknologi
yang dapat diaplikasikan pada ponsel yang mendukung java.
Hal ini akan memberikan fungsi tambahan terhadap ponsel.
Selain itu siswa dapat belajar kapanpun dimanapun.

Gambar .1.4. Suplemen bahan ajar yang telah dikembangkan Seamolec

Sampai pada bagian ini mungkin Anda yang masih awam
dengan bahasa pemrograman jangan khawatir terhadap
kemampuan Anda. Namun percayalah perlahan-lahan Anda


JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

3

akan mampu membuat suplemen bahan ajar berbasis mobile ini
.

1.2. Java dan Netbeans

1.2.1 Berkenalan dengan Java
Java adalah salah satu bahasa pemrograman. Sementara bahasa
pemrograman
dapat
didefinisikan
sebagai
“Bahasa
pemrograman, atau sering diistilahkan juga dengan bahasa
komputer, adalah teknik komando/instruksi stAndar untuk
memerintah
komputer.”

(http://id.wikipedia.org/wiki/Bahasa_pemrograman,
tanggal
akses 02 November 2010). Beberapa bahasa pemrograman
yang lain diantaranya C, Visual Basic, PHP, dan Delphi.
Bahasa pemrograman inilah yang membuat perangkat dapat
diperintah untuk melakukan aksi sesuai dengan keinginan
pengguna.
Java dibuat pada tahun 1991 oleh James Gosling dan timnya
dari Sun Microsystem (saat ini diakuisisi oleh Oracle). Pada
awal pembuatannya bahasa ini dinamai Oak, namun ternyata
nama ini telah digunakan. Beberapa sumber menyatakan
penamaan bahasa ini menjadi Java adalah terinspirasi dari kopi
yang digemari oleh pengembang Java tersebut. Kopi itu berasal
dari Jawa (Java dalam bahasa Inggris).
Java memiliki
beberapa platform (seri tertentu untuk
kebutuhan perangkat/teknologi khusus). Pada bahasan kita kali
ini kita akan menggunakan platform J2ME yang ditujukan
untuk perangkat ponsel. Pada awal langkah kerja kita akan
menginstal JDK (Java Development Kit) sebagai plaftrom

4

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

standar untuk pengembangan aplikasi berbasis java dan
kemudian mengintegrasikannya dengan IDE Netbeans yang
akan dibahas pada sub berikutnya. Gambar di bawah ini
menunjukkan susunan platform Java.

Gambar 1.5. Berbagai Platform Java

Pada dekade ini java sangat populer digunakan dalam dunia
teknologi informasi. Beberapa kelebihan java sehingga
membuatnya populer adalah:




Platform independen, aplikasi java dapat
berjalan pada berbagai sistem operasi dan

berbagai perangkat.
Gratis, java dan tools-tools integrated
development environtment (software untuk

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

5



memudahkan penulisan pemrograman) gratis
untuk digunakan.
Kolaborasi komunitas pengguna yang besar,
banyak sekali JUG (java user group) yang
tesebar diseluruh dunia.

1.2.2. Berkenalan dengan Netbeans
Netbeans adalah sebuah IDE (integrated development
environtment) populer yang digunakan untuk menulis kode
program. IDE sendiri adalah sebuah aplikasi yang
memudahkan penulis program untuk membuat aplikasi. Di
dalamnya terdapat code writer dan editor serta plugin lain yang
terintegrasi. Hal ini membuat penulisan program menjadi lebih
mudah. IDE juga menyediakan link ke compiler (penerjemah
bahasa pemrograman menjadi kode binary yang dipahami
mesin komputer). Saat ini versi Netbeans termutakhir bulan
desember 2010 yang dirilis adalah 6.9.1.
Netbeans memiliki beberapa kelebihan dibandingkan dengan
IDE yang lain. Netbeans memiliki game builder yang dengan
mudah dapat digunakan untuk mendesain sebuah game. Satu
lagi kelebihan netbeans yang akan banyak kita eksplorasi pada
bagian ini adalah Visual Midlet, dimana kita bisa membuat
aplikasi mobile hanya dengan drag n drop elemen di Visual
Midlet. Visual Midlet ini berbasis bahasa pemrograman Java.
Menarik bukan? Anda tidak perlu lagi bersusah payah

cukup klik dan
tarik dan jadilah aplikasi Anda.

berjibaku dengan bahasa pemrograman,

6

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 1.6. Panel Visual Midlet

1.3 Spesifikasi

Pada bagian ini kita akan membahas spesifikasi perangkat
ponsel yang dapat digunakan untuk menggunakan suplemen
bahan ajar berbasis mobile dan spesifikasi komputer yang dapat
digunakan untuk pengembangan aplikasi ini. Komputer yang
disarankan untuk bekerja dengan JDK dan Netbeans adalah:


Processors: Intel Pentium 4, Intel Centrino, Intel Xeon,
or Intel Core Duo (atau yang kompatibel) minimum 1.8
GHz ( direkomendasikan 2.6 GHz Intel Pentium IV
atau yang setara)

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

7








Operating systems: Microsoft Windows XP Service
Pack 3 atau Windows Vista Home Premium, Business,
Ultimate, or Enterprise (certified for 32-bit editions),
Linux family, Machintos.
Memory: 512 MB of RAM (direkomendasikan 1 GB)
Disk space: 778 MB of free disk space
(direkomendasikan 1 GB)
Web Browsers: Internet Explorer 6 minimum, FireFox
2.0 minimum
Java SE Development Kit (JDK): JDK 6 Update 7
minimum (direkomendasikan JDK 6 Update 13) JDK
ini sudah termasuk Java Runtime Environement(JRE)
yang digunakan untuk menjalankan aplikasi berbasis
Java.

Sedangkan telepon seluler yang disarnakan adalah telepon
seluler apapun yang mendukung Java. Biasanya dapat dengan
mudah teridentifikasi saat kita membeli telepon seluler.
Dukungan Java juga dapat dicek pada sistem operasi ponsel,
dikenali dengan adanya logo java (
1.4

).

Contoh Projek

Modul ini juga akan memberikan sebuah contoh proyek yang
aplikatif. Proyek ini dapat Anda pelajari sebagai dasar
membangun proyek suplemen bahan ajar berbasis mobile Anda
sendiri. Pada modul ini kita akan membuat sebuah suplemen
bahan ajar tentang rumus-rumus matematika geometri dua
dimensi. Langkah demi langkah pembuatan suplemen bahan
ajar akan dibahas dalam modul ini dengan menggunakan
Visual Midlet Netbeans.

8

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 1.7. Contoh Project

Tugas / Latihan 1
Ceritakan Era digital / perangkat bergerak berdasarkan pengalaman
Anda dan pendapat disertai dengan referensi. Kirim dalam bentuk
softcopy file pdf dan dimasukkan dalam Elearning edmodo!

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

9

BAB II ISI
2.1. Persiapan Materi

2.1.1. Installasi JDK
Hal pertama yang harus dilakukan adalah installasi JDK. JDK
dapat berjalan baik di sistem operasi Linux maupun Windows.
Untuk installasi berbasis Linux dapat menyesuaikan dengan
cara installasi sesuai dengan distro masing-masing. Sementara
yang akan lebih banyak dibahas disini adalah installasi berbasis
sistem operasi Windows. Installasi dimulai dari file installer
JDK. Versi JDK yang penulis gunakan adalah versi paling
mutakhir dari JDK yaitu JDK 6 update 22 yang bisa di
download di situs sun.com. Kemudian lakukan installasi
dengan cara klik ganda file installer. Langkah instalasi pada
umumnya sama dengan installasi program lainnya.

Gambar 2.1. Mendapatkan file installer JDK 6 update 22

10

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

2.1.2. Installasi Netbeans
Netbeans yang akan kita gunakan adalah Netbeans 6.9.1 yang
bisa di download di situs http://netbeans.org/download

Gambar 2.2. Download Installer dari situs netbeans.org

Gambar 2.3. Memulai proses installasi

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

11

Gambar 2.4. Perjanjian Lisensi

Gambar 2.5. Menentukan lokasi installasi

12

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.6. Summary installasi

Gambar 2.7. Proses Installasi

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

13

Gambar 2.8. Installasi selesai

dan tawaran registrasi (tidak wajib)

2.1.3. Persiapan Materi Suplemen Bahan Ajar
Bahan-bahan materi yang akan kita jadikan Suplemen bahan
ajar adalah rumus-rumus bangun dua dimensi sesuai dengan
data
yang
penulis
dapatkan
dari
http://id.wikipedia.org/wiki/Bangun_datar, http://www.belajarmatematika.com/matematikasd/Keliling%20dan%20Luas%20Bangun%20Datar.pdf., dan
BSE karangan Atik Wintarti dkk berjudul Contextual Teaching
Learning Matematika kelas 7. Kemudian dari bahan-bahan
yang didapatkan kita akan segera membuat suplemen bahan
ajar ini. Bagi Anda yang akan mengembangkan suplemen

14

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

bahan ajar sendiri Anda dapat menyiapkan terlebih dahulu
material sesuai dengan topik bahasan yang akan Anda buat.

2.2. Target Handphone

Dalam membuat aplikasi ponsel target ponsel sangat penting
untuk ditentukan sebelumnya. Hal itu karena bervariasinya
ukuran layar dan versi MIDP telepon seluler. Ukuran layar bisa
berukuran 120 x 240 pixel, 240 x 320 pixel, maupun 320 x 240
pixel. Bahkan telepon seluler termutakhir yang menggunakan
touch screen rata-rata berukuran diagonal 2,6”-3”. Hal ini
tentu menyulitkan dalam mendesain berbagai komponen isi
aplikasi.

Ponsel dengan berbagai variasi ukuran layar
Berdasarkan hal-hal tersebut maka aplikasi suplemen bahan
ajar ini akan menggunakan target ponsel yang umum. Visual
midlet menggunakan high level user interface dimana visual
midlet mampu menyesuaikan dengan berbagai jenis ponsel.
Untuk konten-konten berupa gambar penulis akan
menggunakan referensi ukuran layar 240 x 320 pixel.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

15

2.3. Persiapan Gambar, material, atau Resource

Setelah bahan-bahan pembelajaran kita dapatkan langkah
selanjutnya adalah menyiapkan resource lain seperti gambar,
suara, dan teks. Berikut ini gambar-gambar yang akan
digunakan dalam aplikasi Suplemen bahan ajar.

Gambar 2.9. Bahan yang akan digunakan dalam aplikasi suplemen

16

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

2.4 Bekerja dengan Netbeans Visual Midlet
2.4.1. Membuat Project Baru

Setelah semua persiapan telah disiapkan maka langkah
selanjutnya adalah mulai membuat aplikasi suplemen bahan
ajar ini. Buka Netbeans Anda (klik start menu cari Netbeans).
Setelah jendela aplikasi terbuka buatlah sebuah project baru
dengan cara mengklik icon new project atau dengan mengklik
File > New project. Pilih Java ME dan pilih Mobile Application
kemudian tekan Next.

Gambar 2.10. Pembuatan Project baru di Netbeans

Selanjutnya beri
penyimpanannya.

nama project dan tentukan
Secara
default
Netbeans

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

lokasi
akan

17

menyimpannya di My Documents\netbeansproject\. Hilangkan
juga centang pada create Hello Midlet karena kita akan
membuatnya sendiri.

Gambar 2.11. Pemberian nama project baru

Pada langkah selanjutnya Anda akan diminta untuk memilih
Emulator dan device serta versi CLDC dan MIDP. Pada
emulator platform Anda tidak perlu menggantinya tetapi
sesuaikan device yang sebelumnya ClamshellCdcPhone
menjadi Default Cldc phone untuk mendapatkan tipe emulator
ponsel yang memiliki layar 240 x 320 pixel. Versi MIDP ganti
ke pilihan 2.0 untuk memperluas kompabilitas dengan ponsel.

18

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.12. Konfigurasi platform dan profil

Setelah membuat project baru selesai Anda akan mendapatkan
project Anda di sisi panel kiri. Langkah selanjutnya adalah
membuat class Midlet dengan Visual Midlet. Hal ini dapat
dilakukan dengan cara klik kanan pada default package di
folder source packages, kemudian pilih Visual Midlet. Anda
dapat memberi nama class Midlet sesuai keinginan Anda tapi
penulis lebih senang membiarkannya tanpa perubahan. Tekan
tombol finish untuk membuat Visual Midlet.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

19

Gambar 2.1.3. Membuat class Midlet dengan Visual Midlet

Gambar 2.1.4. Memberi nama class Visual Midlet

20

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

2.4.2. Mengenal Bagian-bagian Jendela Kerja Visual
Midlet
Tampilan awal Visual Midlet setelah dibuat kurang lebih
seperti gambar di bawah ini. Pastikan Anda berada pada tab
Flow. Jendela Visual Midlet terdiri dari beberapa bagian yaitu
kanvas, tab, dan pallet. Dengan berpindah tab Anda dapat
berpindah dari tampilan flow (aliran aplikasi), ke screen
(tampilan saat aplikasi dijalankan), source (tampilan asli kode
program, umumnya tidak diperlukan kecuali mengedit kode
program), dan analizer (penganalisa efisiensi aplikasi). Canvas
adalah tempat Anda meletakkan obyek-obyek yang bisa ditarik
(drag n drop) dari panel Pallete.

Gambar 2.15. Bagian-bagian dari jendela kerja Visual Midlet

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

21

2.4.3. Menyiapkan Material
Sebelum memulai menambahkan obyek pada Visual Midlet
ada baiknya kita menyiapkan segala bahan yang diperlukan.
Buatlah sebuah package baru di folder Soruce packages
dengan cara klik kanan Source Packages kemudian pilih New
Java Packages. Beri nama sesuai dengan isi dan klik tombol
finish untuk membuat package. Anda akan melihat sebuah
package baru dengan nama yang Anda tentukan di folder
Source packages.

Gambar 2.16. Menambahkan package baru

22

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.17. Memberi nama package

Gambar 2.18. Mengkopi file-file yang diperlukan dari Windows Eksplorer

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

23

Gambar 2.19. Proses tempel (paste) file ke dalam package

2.4.4. Membuat Splash screen
Setelah bahan-bahan telah siap di dalam package kita bisa
memulai aktivitas menambahkan obyek pada aplikasi kita.
Pertama-tama kita akan membuat sebuah Splash screen.
Splash screen adalah layar yang muncul secara singkat di awal
aplikasi dijalankan. Tujuannya agar pengguna tidak bosan

24

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

ketika aplikasi sedang dimuat oleh ponsel. Di samping itu
splash screen juga dapat digunakan sebagai identitas aplikasi
dan pembuat aplikasi, dalam hal ini pembuat suplemen bahan
ajar. Tarik Menu Splash screen dari pallete ke atas jendela
kanvas

Gambar 2.20. Membuat obyek splashScreen

Selanjutnya klik dua kali box splashScreen yang telah Anda
tambahkan tadi. Akan muncul jendela baru (jendela tab screen)
tempat Anda dapat mengedit tampilan obyek splash screen ini.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

25

Klik dua kali pada bagian image untuk masuk ke jendela baru
untuk menambahkan gambar.
Pada jendela penambahan gambar tekan tombol add untuk
menambahkan gambar, kemudian browse untuk memilih
gambar yang sesuai (gambar splash screen). Tekan tombol ok
dan lihat hasilnya.
Terdapat beberapa properties yang dapat diatur pada obyek
splashScreen ini. Pada tab properties Anda dapat mencentang
full screen untuk membuat tampilan menjadi full screen. Selain
itu Anda juga dapat mengatur time out/lama waktu kemunculan
splash screen (dinyatakan dalam satuan mili detik).

Gambar 2.21. Tampilan layar/screen dari obyek splash screen

26

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.22. Menambahkan gambar pada obyek

Gambar 2.23. Tampilan layar setelah penambahan gambar

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

27

2.4.5. Membuat Menu Awal
Setelah selesai dengan splash screen sekarang kita akan
membuat Menu. Menu ini berguna sebagai daftar pilihan yang
menentukan kemana pengguna akan melanjutkan. Kita akan
membuat empat menu yaitu Materi, Latihan, Tentang, dan
Keluar. Tarik menu List dari panel Pallete ke atas kanvas.

Gambar 2.24. Pembuatan obyek List

Langkah selanjutnya adalah menambahkan item pilihan. Hal ini
dapat diakukan dengan cara klik kanan pada box list yang baru
saja kita tambahkan tadi dan pilih List Element. Lakukan
berulang sampai dengan empat kali (sesuai kebutuhan).
Gantilah tulisan list elemen tersebut dengan double click pada
list yang ada. Ganti nama daftar sesuai dengan yang telah

28

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

direncanakan yaitu list untuk materi, latihan, halaman tentang,
dan keluar.

Gambar 2.25. Penambahan List Element untuk Menu

Sama seperti obyek splash screen Anda dapat men-double klik
obyek list untuk menambahkan gambar. Tambahkan gambar
kecil/ikon pada menu agar terlihat lebih menarik. Langkahlangkahnya sama dengan memberi gambar pada splash screen.
Anda harus terlebih dahulu mengklik tombol add untuk
menambahkan obyek gambar. Setelah obyek gambar terbuat
Anda dapat memilih gambar yang sesuai. Ingat Netbeans hanya
mendukung format gambar .png.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

29

Gambar 2.26. Menambahkan gambar pada list

Gambar 2.27. Memilih gambar yang tepat

30

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.28. Hasil akhir list yang telah diberi gambar

2.4.6. Membuat Menu Materi
Setelah membuat List untuk menu awal langkah selanjutnya
adalah membuat list untuk daftar materi. Dengan langkah yang
sama tambahkan sebuah list baru dari panel. Tambahkan pula
list element pada obyek list yang telah kita buat tadi sesuai
dengan kebutuhan. Selanjutnya ganti nama list elemen sesuai
dengan kebutuhan kita.

Gambar 2.29. Membuat list untuk daftar materi

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

31

2.4.7. Mengatur Alur Program
Sampai dengan tahap ini Anda telah memiliki empat buah
obyek. Nah, kita dapat memberikan alur program yang tepat.
Klik dan tarik blok Started pada obyek Mobile Device ke
splash screen. Anda akan meilihat sebuah panah muncul. Anda
baru saja memerintahkan aplikasi untuk memulai splash screen
saat pertama kali dijalankan.
Selanjutnya tarik panah alur dari Dissmiss_command pada
splash screen menuju obyek menu. Dengan langkah ini Anda
baru saja memerintahkan aplikasi untuk menampilkan menu
setelah splash scren ditampilkan sesuai time out yang Anda
atur sebelumnya.
Langkah berikutnya tarik panah dari blok Materi belajar ke List
yang berisi daftar materi belajar. Anda tentu sudah bisa
menebak tujuan langkah yang Anda lakukan barusan.
Kemudian tariklah blok Keluar pada Menu ke obyek mobile
device. Hal ini berarti aplikasi akan keluar saat list keluar
dipilih.
Cobalah menekan F6 atau icon Play pada toolbar untuk
melihat hasilnya. Emulator ponsel akan tampil dan
mensimulasikan aplikasi Anda.

32

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.30. Memberikan alur aplikasi

2.4.8. Membuat Materi Belajar
Sekarang tariklah sebuah form dari Palet. Anda akan membuat
sebuah obyek form pada kanvas. Di form inilah Anda akan
menempatkan materi pembelajaran. Tarik panah alur aplikasi
dari blok persegi pada box list ke form. Anda akan
menciptakan alur aplikasi.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

33

Gambar 2.31. Pembuatan obyek form

Selanjutnya tambahkanlah obyek baru pada form dengan cara
klik kanan > New/Add. Tambahkan obyek Image dan String.
Setelah itu klik dua kali obyek form untuk masuk ke tampilan
layar dan melakukan pengeditan. Tambahkan gambar seperti
cara yang telah dibahas sebelumnya. Klik string item untuk
menambahkan tulisan tentang materi Anda. Akhiri proses
editing dengan menekan tombol enter karena jika tidak pengedit-an tidak akan tersimpan.

34

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.32. Menambahkan obyek pada form

Gambar 2.33. Tampilan layar obyek form

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

35

Gambar 2.34. Menambahkan gambar pada form

Gambar 2.35. Layar setelah penambahan materi

36

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Anda dapat mengganti nama-nama obyek yang ada di canvas
dengan cara klik dua kali nama yang tertampil tebal.
Tambahkan sebuah obyek BackCommand pula pada form yang
telah berganti nama menjadi persegi. Hal ini bertujuan untuk
menambahkan sebuah tombol back yang dapat membawa
pengguna ke menu daftar materi. Hal ini akan memudahkan
navigasi pengguna. Ulangi proses penambahan form ini
sebanyak sesuai dengan kebutuhan. Tambahkan satu persatu
materi dan lengkapi pula dengan tombol Back. Jangan lupa
untuk memberikan alur program yang sesuai.

Gambar 2.36. Menambahkan back command

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

37

Gambar 2.37. Hasil akhir setelah semua materi tertambahkan dan alur
program telah diatur

Sampai dengan proses ini Anda telah membuat sebuah obyek
list yang digunakan untuk membuat menu. Kemudian Anda
juga telah berhasil membuat splash screen dan satu per satu
materi melalui obyek form. Pada bagian selanjutnya Anda akan
belajar membuat kuis dan membuat halaman ‘tentang
suplemen’.

38

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

2.4.9. Membuat Kuis/Latihan Soal
Langkah pertama untuk membuat kuis adalah dengan membuat
obyek form baru. Tarik tombol form pada pallete ke atas
kanvas kerja. Selanjutnya tambahkan image item dan string
item. Langkah selanjutnya untuk mengisi image item dan string
item tentu Anda masih ingat bukan?
Yang akan kita bahas kali ini lebih berfokus pada pembuatan
pilihan jawaban dengan menggunakan choice group.
Tambahkan choice group dengan cara klik kanan dan add >
choice group. Seperti tampak pada gambar dibawah ini

2.38. Menambahkan obyek choice group pada form

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

39

Kemudian pada tab screen akan muncul blok choice group.
Pada blok ini dengan klik kanan tambahkan choice item
sebanyak yang Anda perlukan.

Menambahkan 2.39. Choice element pada choice group

Sekarang perhatikan choice element yang telah Anda
tambahkan, berbentuk kotak bukan? Hal tersebut menandakan
bahwa tipe choice group masih multiple, dengan kata lain
pengguna dapat memilih lebih dari satu pilihan. Untuk
menjadikannya exclusive/pengguna hanya dapat memilih satu
40

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

pilihan gantilah nilai properties choice group pada bagian Type
menjadi EXCLUSIVE.

Gambar 2.40. Screen kuis

Jika pilihan sudah berubah menjadi bulat maka
berhasil mengganti tipe choice group. Langkah
gantilah choice element dengan pilihan jawaban
inginkan. Pastikan terdapat satu jawaban yang
jawaban ini lah kita akan membuat penilaian.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

Anda telah
selanjutnya
yang Anda
benar, dari

41

Gambar 2.41. Hasil editing choice element

Sejauh ini Anda telah berhasil membuat bagian-bagian utama
kuis. Sekarang kita akan sedikit memodifikasi kode program.
Sedikit sulit memang tapi penulis yakin Anda akan mampu
melakukannya. Klik tab source untuk masuk ke jendela baris
kode program. Tampilannya akan menjadi seperti ini:

42

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.42. Tampilan asli baris kode program pada tab Source

Tambahkan baris kode berikut dibawah baris public class
visualMIDlet ....
int nilai = 0;
Baris kode program tersebut berfungsi untuk membuat variabel
yang akan menyimpan nilai Anda.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

43

Langkah selanjutnya tinggal menambahkan tombol utuk
kembali dan men-submit pekerjaan quiz/melihat nilai.
Tambahkan okCommand dan cancelCommand pada obyek
form kuis/soal latihan yang Anda buat.

Gambar 2.43. Menambahkan tombol OK dan Cancel

Kemudian ganti properties tombol OK tersebut. Pada bagian
label ganti nilai yang sebelumnya ‘OK’ menjadi ‘Kirim &
Lihat nilai’.

44

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.44. Merubah properties label tombol Ok

Selanjutnya kita akan menambahkan kode ke tombol
okCommand ini, sehingga ketika tombol ditekan aplikasi
mampu mendeteksi jawaban. Klik kanan okCommand dan pilih
Go To Source.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

45

Gambar 2.45. Menuju ke baris kode

Tambahkan kode di bawah ini:
if (choiceGroup.getSelectedIndex()==0)
{
nilai+=25;
getStringItem3().setText("Nilai kamu
adalah "+nilai);
}

Maka baris kode akan menjadi seperti gambar di bawah ini:

46

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.46. Baris kode okCommand (bagian yang berwarna abu-abu tidak
dapat diedit)

Selanjutnya buat sebuah obyek baru. Obyek baru ini akan kita
gunakan untuk menampilkan nilai hasil kuis tadi. Beri nama
obyek tersebut ‘hasil’. Pada obyek ini tambahkan string item
juga. Masuklah ke tab Souce untuk menambahkan kode
program ini pada blok kode program yang merepresentasikan
obyek yang baru kita buat.
stringItem3 = new StringItem("Nilai kamu
adalah "+nilai, null);

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

47

Gambar 2.47. Penambahan baris kode.

Lanjutkan dengan langkah terakhir yaitu memberikan alur yang
tepat. Arahkan tombol cancel kembali ke Menu awal dan
tombol Ok ke obyek hasil. Anda dapat menguji aplikasi Anda.

Gambar 2.48. Hasil akhir alur aplikasi

48

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Berhasil bukan? Tambahkan lebih banyak pertanyaan pada
kuis!
Nah sekarang dengan kemampuan dan pengalaman Anda tentu
tidak sulit membuat obyek ketika menu ‘tentang’ ditekan
bukan?
Selamat Mencoba !

2.5 Uji Coba

Aplikasi-aplikasi yang dibuat dengan Java dapat langsung
digunakan di telepon genggam (tentunya yang mendukung
Java). Telusuri folder dimana Anda membuat project (lokasi
default di MyDocuments/Nebeans Project/namaProject) dan
kopikan
file
namaaplikasiAnda.jad
dan
namaaplikasiAnda.jar pada ponsel.
Berikut ini merupakan hasil pengujian yang penulis lakukan
pada emulator. Anda dapat menguji aplikasi pada ponsel Anda
masing-masing.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

49

Gambar 2.49. Rangkaian uji coba pada emulator

Tugas / Latihan 2
Buat file Hello Mobile pertama buatan Anda dalam netbeans. Kirim
dalam bentuk softcopy file .zip / .rar dan dimasukkan dalam Elearning
edmodo!
Tugas / Latihan 3
Buat Mind Map / Action plan project yang akan anda buat dalam
bentuk softcopy file pdf dan dimasukkan dalam Elearning Edmodo!

50

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

BAB III Penutup
3.1 Pengembangan Materi Bahan Ajar

Ketika Anda telah sampai pada bagian ini tim penulis
mengharapkan Anda telah mampu membuat suplemen bahan
ajar dengan menggunakan perangkat mobile. Penulis harap
dengan keberhasilan itu Anda akan mampu meningkatkan
kualitas proses pembelajaran yang Anda ampu. Lebih jauh
penulis berharap Anda mampu mengembangkan suplemen
bahan ajar tersebut dengan lebih variatif, lebih baik, dan
menarik. Berbagai e-book maupun buku-buku yang telah
diterbitkan oleh Seamolec tersedia untuk membantu Anda
belajar lebih jauh lagi.
Selamat belajar dan berkarya!

Tugas / Latihan 4
Laporkan Progress Perkembangan projek Anda melalui edmodo baik
berupa projek netbeans, ataupun video singkat dalam Elearning
edmodo!
Tugas / Latihan 5
Laporkan hasil projek akhir anda dalam file pdf dan video singkat
produk serta kirimkan dalam Elearning Edmodo!

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

51

Profil Penulis
Prayitno. Lahir di Semarang, 10 April
1985. Menyelesaikan pendidikan dasar di
SDS. Bandarharjo Semarang kemudian
melanjutkan pendidikan di SLTP Negeri
36 Semarang. Setelah menamatkan
jenjang SLTP kemudian melalang buana
di dunia Sekolah Teknik dengan
menempuh pendidikan di SMK Negeri 7
(STM
Pembangunan)
Semarang
mengambil jurusan Teknik Elektronika Industri dan lulus
pada tahun 2005. Karena tidak puas dengan jenjang pendidikan
SMK, lalu melanjutkan lagi pengembaraan di dunia
perkuliahan dengan memperoleh beasiswa dari DIKMENJUR
dengan program D4 Joint Program BA Malang – PENS ITS
Surabaya dengan pendidikan 3,5 tahun dan gelar S.ST.
jurusan Teknik Informatika serta lulus pada tahun 2009
dengan predikat cumlaude. Tahun 2012 telah menyelesaikan
pendidikan S2 Magister Teknik di ITB konsentrasi
TMDG(Teknik Media Digital dan Game) dengan beasiswa
dari SEAMOLEC.

52

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

© 2013

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

53