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 MobileApplication
kemudian tekan Next.
Gambar 2.10. Pembuatan Project baru di Netbeans
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 18
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.
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 | Suplemen Bahan Ajar Berbasis Mobile 20
Gambar 2.1.3. Membuat class Midlet dengan Visual Midlet
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.
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 22
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 Sourcepackages.
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 24
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
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 tabscreen) tempat Anda dapat mengedit tampilan obyek splash screen ini.
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 26
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
fullscreen untuk membuat tampilan menjadi fullscreen. Selain itu Anda juga dapat mengatur timeout/lama waktu kemunculan
splash screen (dinyatakan dalam satuan mili detik).
Gambar 2.22. Menambahkan gambar pada obyek
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 28
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 menuList 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 boxlist 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
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. Langkah-langkahnya 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 | Suplemen Bahan Ajar Berbasis Mobile 30
Gambar 2.26. Menambahkan gambar pada list
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.
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 32
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.
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 | Suplemen Bahan Ajar Berbasis Mobile 34
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
Gambar 2.32. Menambahkan obyek pada form
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 36
Gambar 2.34. Menambahkan gambar pada form
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.
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 38
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’.
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
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 40
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
pilihan gantilah nilai properties choice group pada bagian Type menjadi EXCLUSIVE.
Gambar 2.40. Screen kuis
Jika pilihan sudah berubah menjadi bulat maka Anda telah berhasil mengganti tipe choice group. Langkah selanjutnya gantilah choice element dengan pilihan jawaban yang Anda inginkan. Pastikan terdapat satu jawaban yang benar, dari jawaban ini lah kita akan membuat penilaian.
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 42
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:
Gambar 2.42. Tampilan asli baris kode program pada tab Source
Tambahkan baris kode berikut dibawah baris public class
visualMIDlet ....
int nilai = 0;
JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 44
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’.
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 | Suplemen Bahan Ajar Berbasis Mobile 46
Gambar 2.45. Menuju ke baris kode
Tambahkan kode di bawah ini:
if (choiceGroup.getSelectedIndex()==0) { nilai+=25; getStringItem3().setText("Nilai kamu adalah "+nilai); }
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 | Suplemen Bahan Ajar Berbasis Mobile 48
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.
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 !