Pada artikel ini saya ingin memaparkan cara pembuatan "Aplikasi Huruf Hijaiyah Mobile". Aplikasi ini berisi tentang bebagimana bentuk, bunyi dan cara penulisan huruf-huruf hijaiyah. Aplikasi ini dibuat untuk mempermudah setiap orang yang ingin mempelajari huruf-huruf hijaiyah.
Aplikasi ini terdiri dari 4 menu utama, yaitu surat al-fatihah, menu huruf hijaiyah, menu makna hijaiyah dan menu about.
1. Rancangan Tampilan Menu Utama
Rancangan aplikasi diawali dengan munculnya form depan yang terdiri dari gambar dan pilihan tombol yaitu Keluar untuk keluar dari aplikasi, dan Menu untuk masuk pada menu utama. Seperti pada gambar 3.1
Gambar Rancangan Tampilan Form Depan
Setelah form depan, aplikasi menuju ke tampilan kedua, yakni tampilan yang berisi menu utama yang berisikan surat al-fatihah, menu hijaiyah, menu makna hijaiyah dan menu about.
Gambar Rancangan Tampilan Menu Utama
2. Rancangan Tampilan Menu Surat Al-Fatihah
Gambar Rancangan Tampilan Menu Surat Al-Fatihah
Dari rancangan diatas, terdapat pilihan Play dan Kembali, apabila kita klik Play, maka aplikasi akan mengeluarkan suara, dan secara otomatis kata Play tersebut akan berubah menjadi Stop, yang jika kita pilih maka suara akan berhenti. Tombol Kembali, jika diklik maka aplikasi akan kembali ke tampilan daftar menu utama. Terdapat tombol scroll kebawah yang berfungsi untuk menaikan gambar sehingga kita bias melihat bagian bawah gambar yang berisikan surat al-fatihah.
3 Rancangan Tampilan Menu Hijaiiyah
Gambar Rancangan Tampilan Menu Hijaiyah
Apabila menu ini dipilih, maka aplikasi akan menampilkan list/ daftar pilihan huruf hijaiyah yang ingin dibaca user dengan rancangan tampilan seperti Gambar 3.4.
Dari tiap pilihan list tersebut akan menampilkan interface huruf yang dipilih dengan rancangan sebagai berikut:
Gambar Rancangan Tampilan Tiap Huruf Hijaiyah
Dari rancangan diatas, terdapat pilihan Play dan Kembali, apabila kita klik Play, maka aplikasi akan mengeluarkan suara sesuai huruf yang dipilih, dan secara otomatis kata Play tersebut akan berubah menjadi Stop, yang jika kita pilih maka suara akan berhenti. Tombol Kembali, jika diklik maka aplikasi akan kembali ke tampilan daftar menu hijaiyah.
4 Rancangan Tampilan Menu Makna Hijaiiyah
Apabila menu ini dipilih aplikasi akan menampilkan daftar / list makna hijaiyah. Didalam menu ini hanya terdapat tulisan-tulisan arti atau makna dari masing-masing huruf hijaiyah. Dah juga terdapat tombol kembali untuk kembali ke manu utama
Gambar Rancangan Tampilan Makna Hijaiyah
5. Rancangan Tampilan Menu About
Dalam form ini, berisikan tentang aplikasi ini dan pembuat aplikasi ini. Form ini keluat jika kita memilih menu About pada menu utama.
Gambar Rancangan Tampilan About
6. Penjelasan Pembuatan Source Code
Pembuatan source code diawali dengan pembuatan class utama, yaitu Hijaiyah.java yang kemudian dilanjutkan dengan pembuatan class yang lainnya.
6.1. Hijaiyah.java
Hijaiyah.java adalah MIDlet dari aplikasi ini, dimana semua class di deklarasikan pada file ini. Untuk dapat membuat MIDlet huruf hijaiyah, maka langkah yang harus dilakukan adalah mengimpor paket javax.microedition.midlet, dengan perintah import javax.microedition.midlet.*; . MIDlet adalah sebutan untuk aplikasi-aplikasi yang dibuat di dalam handphone dengan menggunakan profil MIDP.
Selanjutnya dengan perintah import javax.microedition.lcdui.*; penulis mengimpor kelas-kelas yang terdapat pada paket javax.microedition.lcdui karena aplikasi Huruf Hijaiyah Mobile ini merupakan aplikasi GUI (Graphical User Interface).
Pada kelas Hijaiyah ini, penulis membuat objek-objek dari kelas-kelas lain yang terpisah dengan kelas utamanya. Pada kode public MenuUtama menuutama;, dideklarasikan variabel dengan nama menuutama, yang merupakan kelas Menu Utama. Kemudian pada konstruktornya diinstansiasikan objek menu, dengan perintah: menuutama = new MenuUtama (this); Langkah dilakukan untuk pembentukan objek yang lain. Kemudian pada method startApp(), penulis tuliskan kode:
public void startApp()
{ Display.getDisplay(this).setCurrent(formdepan); }
Maksud kode tersebut adalah bahwa pertama kali aplikasi dijalankan, akan langsung menampilkan objek logo. Kemudian pada method logoExit yang berarti bahwa ketika metode ini nantinya dijalankan, maka aplikasi akan menuju ke objek formdepan.
6.2. Form Depan.java
Objek logo merupakan turunan dari kelas Canvas yang merupakan paket dalam javax.microedition.lcdui, untuk itu, sebelum menggunakannya, maka penulis harus mengimpor paket ini dengan perintah: import javax.microedition.lcdui.*; Dalam kelas ini, penulis mendeklarasikan variabel logo dan logo1 bertipe Image. Image logo = null;
Kemudian karena objek ini di instansiasikan pada objek Hijaiyah, maka harus dituliskan perintah:
Hijaiyah app.
Kemudian pada konstruktor, kita menggunakan blok program try {} catch {} untuk mengisi objek logo dengan file gambar yang sebelumnya telah penulis letakkan pada folder res dalam project Hijaiyah mobile.
try
{
logo = Image.createImage("/formdpn.jpg");
} catch (Exception e) {}
Untuk kelas Canvas, class ini harus membuat metode paint yang dapat kita gunakan untuk mengatur warna background dan mengatur posisi gambar pada sebuah layar handphone.
addCommand(new Command ("Menu", Command.OK,0));
addCommand(new Command ("Keluar", Command.EXIT,1));
setCommandListener(this);
FormDepan.java adalah kelas dengan objek bernama formdepan turunan kelas Canvas yang mengimplementasikan CommandListener, sehingga pada kelas ini terjadi suatu interaksi antara user dengan aplikasi.
Gambar Tampilan Form Depan
6.3. Menu Utama.java
Objek menu merupakan turunan dari kelas List yang merupakan paket dalam javax.microedition.lcdui, untuk itu, sebelum menggunakannya, maka penulis harus mengimpor paket ini dengan perintah: import javax.microedition.lcdui.*;
Kelas List ini dapat digunakan untuk menampilkan daftar pilihan yang disediakan. Kemudian pada konstruktornya, diberikan daftar yang akan ditampilkan pada layar dengan menggunakan perintah append().
append("1. Surat Al-Fatihah",null);
append("2. Huruf Hijaiyah",null);
append("3. Makna Huruf Hijaiyah",null);
append("4. About",null);
Pada objek menu ini juga diimplementasikan interface CommandListener,
addCommand(cmExit);
addCommand(cmOK);
setCommandListener(this);
Kemudian pada commandAction, agar aplikasi mengidentifikasi apakah command yang dipilih metode EXIT atau OK, digunakan method getCommandType. Apabila command yang dipilih ternyata EXIT, maka aplikasi akan kembali lagi ke objek formdepan. case Command.EXIT: Display.getDisplay(app).setCurrent(app.formdepan); break;
Apabila yang dipilih adalah method OK, maka aplikasi akan membaca list sesuai urutan prioritas. Untuk mendapatkan prioritas list ini, penulis menggunakan method getSelectedIndex, dengan urutan prioritas daftar pilihan yang paling atas adalah "0". Kemudian sesuai prioritas yang dibuat, penulis menuliskan perintah:
case 0: Display.getDisplay(app).setCurrent(app.alfatihah); break;
case 1: Display.getDisplay(app).setCurrent(app.manuhijaiyah);break;
case 2: Display.getDisplay(app).setCurrent(app.maknahijaiyah); break;
case 3: Display.getDisplay(app).setCurrent(app.about); break
Dalam kode diatas, berarti bahwa, apabila daftar yang dipilih adalah prioritas 0, maka aplikasi akan menuju ke form alfatihah, apabila 1 akan menuju ke form menuhijaiyah, apabila 2 akan menuju ke maknahijaiyah , dan apabila 3 maka akan menuju ke form about.
Gambar Tampilan Menu Utama
6.4. Al-Fatihah.java
Al-fatihah.java merupakan turunan dari kelas Form yang merupakan paket dalam javax.microedition.lcdui, untuk itu, sebelum menggunakannya,maka penulis harus mengimpor paket ini dengan perintah: import javax.microedition.lcdui.*;
Dalam form alfatihah, penulis juga menggunakan kelas Player dan kelas VolumeControl yang berada pada javax.microedition.media dan javax.microedition.media.control. Untuk itu,sebelum menggunakannya, maka penulis harus mengimpor paket ini dengan perintah:
import javax.microedition.media.*;
import javax.microedition.media.control.*;
Kemudian pada objek ini dideklarasikan objek player untuk kelas Player, vc untuk kelas VolumeControl, dan cmExit, cmStop, cmPlay yang merupakan Command.
private static Player player;
private VolumeControl vc;
private Command cmExit, cmStop, cmPlay;
Pada konstruktor, diberikan judul Surat Al-Fatihah , dengan perintah:
super("Surat Al-fatihah");
this.app = app;
this.app disini mengacu pada pembentukan objek yang sebelumnya di instansiasikan pada kelas Hijaiyah.
cmExit = new Command ("Kembali", Command.EXIT,0);
cmPlay = new Command("Play", Command.OK, 0);
cmStop = new Command("Stop", Command.OK, 1);
Dimaksudkan untuk pembentukan objek cmExit dengan label "Kembali" dan metode Exit, objek cmPlay dengan label Play dan method OK prioritas 0 serta cmStop dengan label Stop type OK prioritas 1.
Kemudian pada objek Al-fatihah, ditampilkan gambar dengan menggunakan blok Try {} Catch{} dengan perintah:
logo = Image.createImage("/al-fatihah1.jpg");
Image img2 = Image.createImage(logo);
ImageItem item = new ImageItem(null,
img2,ImageItem.LAYOUT_CENTER, null);
append(item);
} catch (Exception e) {}
Setelah image logo dibentuk, kemudian dari image logo tersebut, dibentuk kembali image img2 yang digunakan untuk pembentukan objek item yang merupakan ImageItem.
Dengan merepresentasikan gambar menggunakan kelas ImageItem pada Form, penulis gunakan untuk mengatur letak gambar yang pada posisi sebelah kanan.
addCommand(cmExit);
addCommand(cmPlay);
setCommandListener(this);
Kode diatas digunakan untuk menambahkan objek cmExit, cmStop, dan cmPlay ke dalam Form.
Setelah objek Command dibentuk dan ditambahkan ke dalam Form, kemudian pada method CommandAction, dituliskan perintah untuk aksi yang dilakukan.
if (c==cmExit) {
addCommand(cmPlay);
try{
player.stop(); if(player != null){ player.close();
}}catch(Exception e){}
removeCommand(cmStop);
Pada kode diatas, aksi akan dilakukan ketika user memilih Command type Exit. Hal yang terjadi adalah ketika kita sedang memainkan suara, maka suara akan berhenti (player.stop()), dan aplikasi akan kembali ke objek menu.
Display.getDisplay(app).setCurrent(app.menuutama);
Apabila Command "Play" yang dipilih, maka aksi yang dilakukan adalah:
else if (c==cmPlay)
{ removeCommand(cmPlay);
addCommand(cmStop);
try {
playMedia("al-fatihah.wav", "wav");
} catch (Exception e) {
e.printStackTrace();}}
Pada kode diatas, ketika cmPlay dipilih, maka tombol Play tersebut berubah menjadi tombol Stop
removeCommand(cmPlay);
addCommand(cmStop);
Dan aplikasi akan memainkan sound "al-fatihah.wav" yang berada pada folder res.
else if (c==cmStop)
{ removeCommand(cmStop);
addCommand(cmPlay);
try{
player.stop();
if(player != null){
player.close();}
}catch(Exception e){}
removeCommand(cmStop);}
Apabila tombol Stop yang dipilih, sesuai kode yang diatas, maka tombol Stop akan otomatis berubah menjadi tombol Play dan sound yang masih dimainkan akan berhenti.
private void playMedia(String file, String p)
throws Exception {
if (p.equals("wav")){
player=Manager.createPlayer(getClass().getResourceAs
Stream(file), "audio/x-wav");
} player.addPlayerListener(this); player.setLoopCount(1); player.prefetch(); player.realize();
vc = (VolumeControl)player.getControl("VolumeControl");
if (vc != null) vc.setLevel(100); player.start();
Metode diatas digunakan untuk memainkan sound dengan format wav.
player.setLoopCount(1);
Kode diatas digunakan agar aplikasi hanya memainkan suara sekali saja sampai suara tersebut selesai.
vc.setLevel(100);
Kode tersebut berarti output suara berada pada level 100, level paling tinggi. Semakin kecil levelnya, maka output suara yang keluar akan semakin kecil / lirih.
Gambar Tampilan Menu Al-fatihah
6.5. Alif.java
Class alif, ba, ta, sa ,ja ,ha, kho sampai dengan ya menggunakan cara dan metode yang sama. Jadi penulis hanya menguraikan alif.java saja.
Alif.java merupakan turunan dari kelas Form yang merupakan paket dalam javax.microedition.lcdui, untuk itu, sebelum menggunakannya,maka penulis harus mengimpor paket ini dengan perintah: import javax.microedition.lcdui.*;
Dalam form alif, penulis juga menggunakan kelas Player dan kelas VolumeControl yang berada pada javax.microedition.media dan javax.microedition.media.control. Untuk itu,sebelum menggunakannya, maka penulis harus mengimpor paket ini dengan perintah:
import javax.microedition.media.*;
import javax.microedition.media.control.*;
Kemudian pada objek ini dideklarasikan objek player untuk kelas Player, vc untuk kelas VolumeControl, dan cmExit, cmStop, cmPlay yang merupakan Command.
private static Player player;
private VolumeControl vc;
private Command cmExit, cmStop, cmPlay;
Pada konstruktor, diberikan judul Surat Huruf Alif , dengan perintah:
super("Huruf Alif");
this.app = app;
this.app disini mengacu pada pembentukan objek yang sebelumnya di instansiasikan pada kelas Hijaiyah.
cmExit = new Command ("Kembali", Command.EXIT,0);
cmPlay = new Command("Play", Command.OK, 0);
cmStop = new Command("Stop", Command.OK, 1);
Dimaksudkan untuk pembentukan objek cmExit dengan label "Kembali" dan metode Exit, objek cmPlay dengan label Play dan method OK prioritas 0 serta cmStop dengan label Stop type OK prioritas 1.
Kemudian pada objek Alif, ditampilkan gambar dengan menggunakan blok Try {} Catch{} dengan perintah:
logo = Image.createImage("Hijaiyah//alif.jpg");
Image img2 = Image.createImage(logo);
ImageItem item = new ImageItem(null,
img2,ImageItem.LAYOUT_CENTER, null);
append(item);
} catch (Exception e) {}
Setelah image logo dibentuk, kemudian dari image logo tersebut, dibentuk kembali image img2 yang digunakan untuk pembentukan objek item yang merupakan ImageItem.
Dengan merepresentasikan gambar menggunakan kelas ImageItem pada Form, penulis gunakan untuk mengatur letak gambar yang pada posisi sebelah kanan.
addCommand(cmExit);
addCommand(cmPlay);
setCommandListener(this);
Kode diatas digunakan untuk menambahkan objek cmExit, cmStop, dan cmPlay ke dalam Form.
Setelah objek Command dibentuk dan ditambahkan ke dalam Form, kemudian pada method CommandAction, dituliskan perintah untuk aksi yang dilakukan.
if (c==cmExit) {
addCommand(cmPlay);
try{
player.stop(); if(player != null){ player.close();
}}catch(Exception e){}
removeCommand(cmStop);
Pada kode diatas, aksi akan dilakukan ketika user memilih Command type Exit. Hal yang terjadi adalah ketika kita sedang memainkan suara, maka suara akan berhenti (player.stop()), dan aplikasi akan kembali ke objek menu.
Display.getDisplay(app).setCurrent(app.menuutama);
Apabila Command "Play" yang dipilih, maka aksi yang dilakukan adalah:
else if (c==cmPlay)
{ removeCommand(cmPlay);
addCommand(cmStop);
try {
playMedia("Alif.wav", "wav");
} catch (Exception e) {
e.printStackTrace();}}
Pada kode diatas, ketika cmPlay dipilih, maka tombol Play tersebut berubah menjadi tombol Stop
removeCommand(cmPlay);
addCommand(cmStop);
Dan aplikasi akan memainkan sound "alif.wav" yang berada pada folder res.
else if (c==cmStop)
{ removeCommand(cmStop);
addCommand(cmPlay);
try{
player.stop();
if(player != null){
player.close();}
}catch(Exception e){}
removeCommand(cmStop);}
Apabila tombol Stop yang dipilih, sesuai kode yang diatas, maka tombol Stop akan otomatis berubah menjadi tombol Play dan sound yang masih dimainkan akan berhenti.
private void playMedia(String file, String p)
throws Exception {
if (p.equals("wav")){
player=Manager.createPlayer(getClass().getResourceAs
Stream(file), "audio/x-wav");
} player.addPlayerListener(this); player.setLoopCount(1); player.prefetch(); player.realize();
vc = (VolumeControl)player.getControl("VolumeControl");
if (vc != null) vc.setLevel(100); player.start();
Metode diatas digunakan untuk memainkan sound dengan format wav.
player.setLoopCount(1);
Kode diatas digunakan agar aplikasi hanya memainkan suara sekali saja sampai suara tersebut selesai.
vc.setLevel(100);
Kode tersebut berarti output suara berada pada level 100, level paling tinggi. Semakin kecil levelnya, maka output suara yang keluar akan semakin kecil / lirih.
6.6. MaknaHijaiyah.java
Pada class makna hijaiyah ini merupakan turunan dari kelas list yang merupakan paket dalam javax.microedition.lcdui. Class ini digunakan untuk menampilkan daftar dari mekna-makna hijaiyah. Daftar dari makna-makna tersebut ditampilkan dengan menggunakan append().
append ("Alif artinya tidak ada Tuhan selain Dia yang Maha Hidup dan Kokoh");
append (" \n");
append ("Ba artinya tetap ada setelah musnah seluruh makhluk-Nya.");
append (" \n");
append ("Ta, artinya yang maha menerima taubat, menerima taubat dari semua hamba-Nya");
Gambar Tampilan Menu Makna Huruf Hijaiyah
6.7. About.java
Pada kelas About, merupakan kelas turunan Form, untuk itu penulis harus mengimport paket lcdui karena kelas Form termasuk dalam paket lcdui ini. import javax.microedition.lcdui.*;
Di sini kita juga mengimplementasikan interface CommandListener, sehingga kita harus mendefinisikan perilaku dari aksi yang dilakukan pada metode commandAction.
public void commndAction (Command c, Displayable d){
if (c==cmExit){ \
Display.getDisply(app).setCurrent(app.menuutama);
}}
Pada source diatas, kita membuat sebuah objek Command dengan nama cmExit.
cmExit = new Command ("Kembali", Command.EXIT,0);
Proses seperti diatas dapat juga disebut dengan proses instansiasi kelas Command. Sebelumnya, kita telah mendeklarasikan variabel cmExit yang bertipe Command melalui kode berikut:
private Command cmExit;
Selanjutnya setelah objek cmExit terbentuk, maka penulis menempatkan objek tersebut pada objek Form dengan kode: addCommand(cmExit)
Setelah objek cmExit dibuat, aksi didefinisikan, maka langkah selanjutnya adalah mengkaitkan objek dengan aksi tersebut melalui sebuah layar. Dalam source diatas, penulis menghubungkan objek Form dengan CommandListener menggunakan kode.
setCommandListener(this);
Tiap kali kita membuat suatu kelas yang sebelumnya telah kita instansiasi pada kelas utama, dalam hal ini kelas Hijaiyah, maka agar kelas menjadi saling terkait, pada kelas lain tersebut harus di deklarasikan
private Hijaiyah app;
Pada konstruktor, kita membuat Form dengan judul About dengan kode:
super("About");
Selanjutnya, penulis menambahkan image dengan nama logo pada Form, yang menampilakan foto penulis dengan kode:
Image logo = null;
try
{
logo = Image.createImage("/about.jpg"); Image img2 = Image.createImage(logo);
ImageItem item = new ImageItem(null, img2,ImageItem.LAYOUT_CENTER, null); append(item);
} catch (Exception e) {}
Gambar Tampilan Menu About
7. Cara Instalasi.
Setelah kita membuat semua code dengan baik dan benar, kita juga telah mencobanya di emolator. Sekrang kita coba aplikasi ini ke dalam telfon seluler, penulis menggunakan telfon seluler nokia C5-00.
Pertama kita buat file berformat.jar, caranya adalah buka Wirelees Toolkit 2.5.2, lalu buka project HijiyahMobile. Kemudian klik menubar project dan pilih package, lalu klik create package
Gambar Gambar Package
Maka didalam direktori bin akan terdapat file HijaiyahMobile.jar. file ini yang di copykan ke telfon selular. Dan kemudian menginstalnya agar dapat digunakan
Gambar File .jar
Kemudian copy file diatas kedalam telfon seluler, lalu install file tersebut. Dan jika sudah selesai jalankan Aplikasi Huruf Hijaiyah mobile tersebut
Hijaiyah Mobile.jad
http://www.mediafire.com/?e9d0t1h61md494m
Hijaiyah Mobile.jad
http://www.mediafire.com/?e9d0t1h61md494m
