Tutorial J2ME

Membangun aplikasi client-server dan

koneksi dengan database di server

Amri Shodiq (amri.shodiq@gmail.com)

20 Juni 2009
Pada satu siang seorang teman menelpon dari Surabaya, menanyakan realisasi janji saya
beberapa waktu sebelumnya. Pada waktu itu saya menjanjikan akan memberikan semacam
tutorial tentang bagaimana mengakses (menambah, mengubah dan menghapus) data di server
dengan Java Micro Edition.

Latar belakangnya begini, rekan saya tersebut: Pak Sugeng (sebut saja begitu), ingin membuat
aplikasi ponsel yang bisa digunakan untuk menampilkan data-data pelanggan, kemudian
mengeditnya sembari di lokasi pelanggan, hingga menyimpannya kembal. Yang menjadi
masalah adalah fasilitas penyimpanan data di ponsel sangat terbatas. Saat ini teknologi yang
bisa digunakan di ponsel adalah RMS. Namun RMS memiliki banyak kekurangan jika
dibandingkan dengan tujuan ini.

1. RMS bukanlah database relational yang mengijinkan kita melakukan query SQL. RMS,
jika boleh saya gambarkan, lebih mirip dengan database masa lampau yang hanya dapat
diakses per record dengan menyebutkan id-nya.
2. Masalah yang lain adalah bahwa data yang disimpan di dalam RMS hanya tersimpan di
ponsel. Jika kita ingin, kemudian, mentransfer data tersebut ke server database atau ke
komputer kita, maka kita harus membuat program untuk pengirimannya (ini masalah
karena berarti dua kali kerja.

Pada tutorial ini, saya akan mengajak Anda mencoba skema akses database di server
menggunakan J2ME.

Aplikasi

Modul server Modul client

PHP MySQL J2ME

Koneksi HTTP Koneksi

Fungsi Thread Interface
database Request HTTP

Dalam tutorial ini kita akan mempelajari rancang bangun aplikasi client-server dengan
menggunakan beberapa teknologi yaitu: PHP, MySQL dan J2ME. Di sini kita akan belajar
melakukan koneksi PHP ke database MySQL, membuat fungsi dan menangani HTTP Request
GET. Sedangkan untuk sisi client, kita akan mempelajari bagaimana melakukan koneksi jaringan
dengan protocol HTTP, bagaimana membuat aplikasi bisa berjalan secara threading dan
bagaimana menggunakan interface.

Seperti yang Anda lihat , dalam tutorial ini beberapa software lain saya butuhkan. Begitu juga
Anda, jika ingin mencoba menerapkan isi tutorial ini, Anda harus melakukan beberapa
persiapan.

Untuk melakukannya, saya perlu melakukan persiapan terlebih dahulu. Justru ini yang sedang
saya lakukan (sampe begadang-begadang, padahal keesokan paginya harus meeting dari pagi
sampai sore, hiks). Berikut ini yang perlu saya persiapkan:

1. IDE (Integrated Development Environment untuk coding J2ME dan PHP),

Dalam tutorial ini, saya menggunakan dua software IDE, Netbeans 6.5 dan Easy Eclipse
for PHP 1.2.2.
• Netbeans 6.5
Netbeans adalah IDE yang sangat populer untuk Java. Netbeans memiliki
beberapa pilihan paket untuk didownload. Dalam tutorial ini, Anda
membutuhkan Netbeans 6.5 Mobility (atau, Anda juga bisa menggunakan
Netbeans 6.5 Full, tapi saya tidak menyarankannya karena Anda harus download
lebih besar dan karena dalam paket ini termasuk server aplikasi Glassfish yang
kalau tidak dimatikan bisa membuat beban komputer Anda menjadi besar).

• Easy Eclipse for PHP 1.2.2

Jangan heran jika saya menyarankan Anda menggunakan Easy Eclipse for PHP.
Apa hubungannya PHP dengan tutorial J2ME? Kok OOT (out of topic) sih? Akan
saya jelaskan.

Kita akan membangun software client-server. Tentu kita membutuhkan server

aplikasi (aplikasi client akan kita buat menggunakan J2ME). Untuk membangun
server, kita harus menentukan teknologi apa yang akan kita gunakan, termasuk
protokolnya. Aplikasi client-server pada masa lalu (hingga kini pun masih)
menggunakan socket programming dan ptotokol proprietary murni (protokol
yang khusus digunakan untuk software yang dibangun).

Ada pendekatan lain, yaitu menggunakan Web Service. Dengan web service,
aplikasi client akan terhubung ke server hanya dengan protocol HTTP. Ini
mereduksi waktu yang dibutuhkan untuk membangun protocol. Kelebihan yang
lain adalah bahwa karena berjalan di atas HTTP, maka kemungkinan koneksi ini
ditutup oleh firewall operator (ingat, kita membangun aplikasi client-server yang
berjalan di atas J2ME yang berarti pula kita akan menggunakan jaringan internet
melalui operator ponsel). Contoh implementasi Web Service adalah SOAP. Atau
ada juga pendekatan yang lebih simple, yaitu XML-RPC yang mengijinkan client
memanggil fungsi di server kemudian mendapatkan output dari fungsi tersebut.
 Mana yang akan kita gunakan? Karena tutorial ini ditujukan untuk pemula dan
intermediate (bukan expert), maka kita akan mencoba membuat sesuatu yang
mirip dengan Web Service, hanya saja jauh lebih sederhana. Kita akan membuat
aturan main sederhana yang melibatkan J2ME sebagai client dan web server.

Saya memilih PHP untuk digunakan sebagai server kita. Kenapa tidak Java
(Servlet atau JSP)? Alasannya mudah saja, saya tidak menemukan layanan
hosting yang menyediakan Java, hampir semua layanan hosting yang saya temui
menggunakan PHP. Maka saya menggunakan PHP untuk menghilangkan resiko
nantinya scenario ini tidak jalan hanya karena tidak ada server yang bisa
mengimplementasikan server side script saya.

Lalu mengapa hosting? Jawabannya mudah. Saya tidak punya server sendiri yang
bisa diakses dari internet. Ya, perlu hosting kan? Karena dengan ponsel nantinya
kita tidak bisa menggunakan localhost. Localhost hanya berjalan di emulator.
Kita juga tidak bisa menggunakan IP local dalam satu network (misalnya kita
bekerja di LAN) karena belum banyak ponsel yang mendukung WiFi, selain juga
area penggunaannya jadi sangat terbata, di luar scope kasus kita yang akan
menggunakan aplikasi ini di lokasi pelanggan.

2. Database server (MySQL),

Saya suka MySQL. Alasannya sama dengan pengguna MySQL lain: gratis, cepat, dan
mudah dipelajari (terutama jika dikaitkan dengan program yang akan saya gunakan
untuk mengaksesnya, PHP). Kita akan menggunakan MySQL untuk menyimpan data
pelanggan yang nantinya akan diakses oleh aplikasi J2ME yang kita buat.

3. Server side scripting (PHP),

Sebelumnya, pada item pertama (Easy Eclipse for PHP 1.2.2), saya sudah jelaskan sedikit
tentang apa yang akan kita buat dan latar belakang digunakannya PHP. PHP umumnya
digunakan di atas web server dari Apache (tidak menutup kemungkinan digunakan web
server lain). Untuk implementasi kita, saya menyarankan:
• Pengguna Windows menggunakan Xampp
Anda dapat menggunakan paket Xampp yang di dalamnya sudah tercakup
Apache, MySQL dan PHP. Download saja. Bayar gak? Tentu saja free open
source.

• Pengguna Linux menginstall paket Apache, MySQL dan PHP

Beberapa distro Linux sudah menyediakan repository dalam bentuk DVD. Saya
sendiri sebagai pengguna Ubuntu, menggunakan repository yang disupport oleh
salah satu server ternama, Kambing. Tentang kambing tidak akan dijelaskan lebih
lanjut, intinya Kambing adalah server penyedia software-software open source.

Untuk pengguna Ubuntu, silakan tiru saja perintah ini:

 $ sudo apt-get install apache2 php5-mysql libapache2-mod-php5 mysql-server

Perintah ini saya gunakan dengan Ubuntu 9.04 dan nampaknya juga kompatibel
dengan versi-versi yang lain. Perintah tersebut digunakan untuk mendownload
langsung Apache2, MySQL dan PHP5, sekaligus menginstallnya di sistem kita.

4. Sebuah mekanisme remote procedure call atau fungsi di server yang bisa dipanggil dari
client
Untuk memudahkan penyebutkan konsep ini, saya sebut saja sebagai remote procedure
call. Yang kita lakukan melalui remote procedure ini adalah insert, update dan delete.

Menggunakan Netbeans 6.5 Mobility

Membuat project J2ME dengan Netbeans
Menu: File | New Project | J2ME Project

Yang perlu Anda lakukan untuk membuat project J2ME baru adalah mengklik File | New
Project, kemudian dari dialog yang muncul pilih J2ME Project

Berikan nama yang baik, dan seterusnya. Secara default, Anda akan mendapatkan file Main.java
yang berupa Visual Midlet (buat jika tidak ada). Dengan Visual Midlet, Anda bisa membuat flow
aplikasi J2ME dengan cara drag and drop.

Menentukan flow aplikasi

Menu: View | Editors | Flow

Netbeans Mobility dilengkapi dengan Flow Editor untuk mengedit urutan jalannya aplikasi J2Me
nantinya. Agar lebih mudah, perhatikan ketika kita menambahkan sebuah Form.

Untuk menambahkan sebuah Form, klik kanan pada Flow View, pilih New/Add | Form. Drag
sebuah flow dari Mobile Device (Midlet) ke form, atau apapun nama yang Anda berikan untuk
Form yang baru Anda tambahkan (defaultnya form). Jika Anda tidak terbiasa dengan istilah
drag, lakukan sebagai berikut:
 • Klik kiri pada Mobile Device
• Tahan kemudian seret mouse hingga menyentuh form
• Lepaskan klik

Akan terbentuk sebuah garis dan tanda panah dari arah Mobile Device ke form yang baru Anda
buat.

Klik kanan pada title bar form, kemudian New/Add | Ok Command dan command-command
lain yang Anda butuhkan.

Sekarang Anda sudah tahu bagaimana membuat flow dari Mobile Device ke form. Sekarang, buatlah
flow dari form ke Mobile Device. Mudah bukan?

Jika sudah, berarti saat ini jika program dijalankan maka yang akan muncul adalah tampilan form.
Sayang, Anda belum member komponen apapun di atas form.

Menambahkan komponen ke atas form

Menu: Klik kanan | New/Add | Text Field, dll atau

View | Editors | Screen

Berikutnya, klik title bar form, kemudian klik Screen View (persis di bagian atas diagram). Di
bawah tab-tab nama file. Akan ditampilkan bentuk ponsel yang bisa Anda tambahkan
komponen-komponen dan tombol. Komponen-komponen tersebut bisa Anda lihat pada
window Pallete (sebelah kanan). Atau Anda bisa juga menambahkan komponen ke atas suatu
form dengan cara meng-klik kanan form-nya, kemudian memilih New/Add | <komponen-yang-
Anda-ingin-tambahkan>.

Nah, Anda sudah bisa menambahkan komponen yang Anda perlukan. Coba tambahkan lima
buah TextField dan tiga buah Command hingga hasilnya seperti gambar di atas. Mudah bukan?
Menambahkan kode program pada event tertentu
Menu: Klik kanan pada component | Go To Source

Komponen seperti tombol/Command tidak ditambahkan hanya

untuk memperindah tampilan. Melainkan komponen tersebut
ditambahkan karena suatu tujuan, misalnya: tombol Exit Command
ditambahkan untuk keluar dari program, sedangkan tombol Edit
(dari OK Command yang diubah Text-nya menjadi “Edit”) digunakan
untuk meminta program mengedit data pengguna dengan nomor ID
tertentu.

Untuk keperluan tersebut, maka kita perlu menambahkan event

click pada komponen tersebut. Caranya mudah sekali. Klik pada
komponen yang ingin ditambahkan event-nya. Klik kanan, kemudian pilih Go To Source pada pop up
menu yang muncul. Berikutnya Anda akan dihadapkan pada Source Code Editor dimana Anda
dipersilakan menambahkan kode program yang Anda inginkan.

Menjalankan program
Menu: Klik kanan nama project | Run

Untuk mencoba menjalankan prototype software

yang kita bangun, caranya mudah sekali. Klik kanan
pada nama project kita di Project Naviagator window
(sebelah kiri). Kemudian pada pop up menu yang
muncul, pilihlah Run.

Setelah Anda tekan Run, tunggu sebentar, Netbeans akan

menginisiasi Sun Wireless Toolkit yang sudah terbundle
bersama Netbeans Mobility.

Menggunakan Easy Eclipse for PHP 1.2.2.

Easy Eclipse sebenarnya adalah pemaketan kembali Eclipse IDE project. Eclipse terkenal
dengan banyaknya plugins untuk berbagai keperluan. Sayangnya, instalasi plugins-plugins ini
kadang menjadi masalah karena ada beberapa yang cukup sukar. Salah satunya adalah plugins
untuk coding PHP dengan Eclipse.

Nah, Easy Eclipse dipaket dalam bentuk yang mudah diinstall. Kita bisa menambahkan plugins
lain dengan cukup mendownload dari plugins directory di website Easy Eclipse, kemudian
mengklik dua kali file plugins tersebut layaknya file executable.
Jika Anda sudah mendownload file instalasinya, Anda bisa menginstall dengan cukup mudah.
Pengguna Windows cukup mengklik dua kali file tersebut dari Windows Explorer kemudian
mengikutinya seperti instalasi aplikasi Windows pada umumnya. Sedangkan pengguna Linux,
bisa menggunakan Easy Eclipse versi Linux. Versi Linux adalah file-file yang terkompresi saja,
jadi Anda cukup mengekstrak file yang Anda download. Anda bisa langsung menjalankan file
eclipse (file binary) dengan mengklik-nya dua kali, jika di system Anda sudah terinstal Java
Runtime.

Beginilah tampilan welcome Easy Eclipse

Membuat project PHP baru

Menu: File | New | PHP Project

Pada dialog New PHP project isikan Project name bebas (buat yang sesuai dengan project yang
Anda kerjakan; misalnya tutorial) dan direktori yang benar pada Location. Nama project akan
menjadi nama direktori aplikasi web kita. Dalam hal ini nantinya saya bisa browsing dengan
browser saya ke alamat http://localhost/Tutorial/.

Jika Anda menggunakan Windows, silakan Browse saja ke lokasi/direktori root directory Xampp
(direktori ini mengandung htdocs; misalnya: c:/xampp/htdocs).

Sedangkan jika Anda menggunakan Linux, silakan buat direktori baru di home direktori Anda
kemudian tambahkan entry virtual directory pada file konfigurasi web server, httpd.conf.
Rekomendasi dari saya (untuk pengguna Ubuntu, dan Linux yang lain mungkin), lakukan dengan
urutan sebagai berikut:

1. Buat direktori Projects, tepat di bawah home directory Anda (jika username Anda
adalah pokemon, maka home directory Anda adalah /home/pokemon). Jadi akan ada
direktori baru dengan path /home/pokemon/Projects.
 2. Edit file konfigurasi Apache (httpd.conf). Tambahkan entry virtual directory.
3. Isikan /home/pokemon/Projects pada Location (di dialog New PHP project). Kemudian
klik check Use default location agar Anda tidak perlu mengulang langkah ini pada
project-project berikutnya.

Klik Finish.

Perhatikan gambar di atas.

Di bagian sebelah kiri, Anda bisa melihat Project Navigation. Di sana, Anda bisa melihat project-
project Anda. Jika Anda expand sebuah project dengan mengklik tanda plus (+) di sebelah kiri
nama project Anda, Anda bisa mendapati semua file yang ada dalam project Anda tersebut.

Bagian tengah IDE (yang berwarna abu-abu) adalah editor. Kita akan mengedit file-file PHP kita
di sini.

Di bagian kanan, pada tab Outline kita bisa melihat fungsi-fungsi yang kita buat nantinya di
sana.

Di bagian bawah IDE, Anda bisa melihat browser untuk preview pekerjaan Anda secara
realtime. Jadi ketika Anda save file PHP Anda, preview-nya akan muncul di bagian tersebut.

Menambahkan file PHP

Menu: File (atau klik kanan pada nama project) | New | PHP File

Masukkan File name yang Anda inginkan (default: file.php) dan biarkan lokasi Container-nya.
Lokasi Container ini relative terhadap workspace (yang Anda set pada Location di langkah
sebelumnya).

Secara default, Anda akan mendapatkan file berisi:

<?php
/*
* Created on Jun 17, 2009
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/
?>

Anda dapat mengubah default template ini melalui menu Window | Preferences | PHPeclipse |
PHP | Code Templates. Akan muncul dialog seperti ini:

Untuk menambahkan variabel atau melakukan yang lainnya, klik saja Edit.

Anda bisa mulai menuli kode program Anda tepat di bawah penutup komentar (*/
). Saya juga umumnya menghapus baris berikut:
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates

dari file baru tersebut, meskipun tanpa mengubah template-nya.

Setelah Anda melakukan beberapa perubahan pada kode sumber program Anda, selalu simpan
dengan menekan tombol Ctrl+S. Lakukan ini secara rutin.

Melihat bagaimana program Anda berjalan

Jika Anda bekerja di lingkungan Windows dan Anda telah men-set lokasi workspace Anda di
root directory webserver Anda (htdocs), maka tidak akan terjadi masalah, karena browser
internal IDE Eclipse akan langsung mengenali path Project Anda. Perhatikan di bagian bawah
IDE. Di sana terdapat window output yang memiliki tab PHP Browser. PHP Browser memiliki
address bar yang jika tidak ada masalah dalam setting Anda, maka nilai default-nya adalah:
http://localhost/<project-Anda>/<file-yang-sedang-Anda-edit>

Sekiranya ada masalah, maka ada beberapa kemungkinan:

1. Web server Anda mati

Gejalanya, tampilan pada PHP Browser akan seperti ini:

Solusi masalah ini sederhana saja, nyalakan web server Anda. Jika Anda menggunakan
Xampp (dalam Windows), nyalakan xampp-control.exe.

<lokasi-instalasi-xampp>/xampp-control.exe

Akan muncul tampilan seperti berikut. Klik tombol Start pada Apache dan MySQL dan
pastikan tampilannya seperti ini:

Kata Running dalam kotak highlight berwarna hijau terang menunjukkan Apache dan
MySQL berjalan dengan baik.

2. Setting project Anda salah

 Gejala yang terjadi jika setting project Anda salah adalah path yang ditunjukkan oleh
address bar PHP Browser salah. Solusinya, Anda bisa meng-klik kanan pada nama
project Anda kemudian pilih Properties.

Klik PHP Project Settings. Pilih radio button Use workspace settings kemudian klik
Configure Workspace Settings … Pada window Preferences yang muncul, isikan
http://localhost pada Localhost dan masukkan <lokasi-instalasi-xampp>/htdocs pada
DocumentRoot. Pada kasus saya, isinya adalah C:/xampp/htdocs. Klik Apply kemudian
OK.

Jika setting sudah OK, maka setiap Anda men-save perubahan yang Anda buat, maka Anda bisa
melihat preview-nya di PHP Browser.

Menulis modul server

Skenario
Begini rencananya. Nanti, kita akan membangun skema database (lengkap dengan table-table-
nya) di mana kita bisa melakukan fungsi-fungsi insert-read-update-delete. Saya berikutnya akan
buat 4 fungsi dengan script PHP dalam sebuah file saja, yaitu function.php. Fungsi-fungsi
tersebut antara lain, insertCustomerData(), readCustomerData(), updateCustomerData(), dan
deleteCustomerData().

Keempat fungsi tersebut tentunya harus melakukan fungsinya dengan baik, yaitu mengacak-
acak database, tentu saja. Nah, kemudian, saya harus juga menyediakan suatu cara agar fungsi-
fungsi tersebut bisa diakses dengan ponsel. Maka saya sediakan sebuah listener dengan PHP
untuk mendengarkan, jika ada permintaan fungsi, maka function.php akan mengecek, apakah
fungsi yang diminta terdapat di sistem atau tidak. Jika ya, cek lagi, apakah parameternya
lengkap atau tidak. Jika ya, jalankan fungsi yang diminta, kemudian berikan hasilnya kepada
peminta.

Peminta (dalam hal ini pengirim HTTP Request) yang saya maksud adalah ponsel. Nah, sampai
pada point ini sisi server sudah selesai.

Saya kemudian akan membuat fungsi/method dengan J2ME untuk memanggil keempat fungsi
tersebut. fungsi tersebut adalah pemetaan dari tiap fungsi server, berikut parameternya. Di
tahap ini, materi sudah berpindah kea rah pengembangan modul client. Setiap method
tersebut nantinya akan dikirimkan dengan format tertentu ke server menggunakan protokol
HTTP. Berarti juga, saya harus membuat method untuk mengirimkan data apapun melalui
protokol HTTP. Setelahnya, saya juga harus menambahkan fungsi untuk parsing data dari
ponsel ini di sisi servernya (function.php).

Hasil dari server akan dikembalikan ke ponsel dalam bentuk HTTP Response dari request yang
dikirim. Dalam format tertentu pula. Maka, pada ponsel pun harus disiapkan method untuk
parsing response dari server ini.

Terakhir, saya harus membuat tampilan program di ponsel untuk simulasi program ini. Ini
mudah sekali dilakukan dengan Netbeans 6.5 yang mempunyai fitur Visual MIDlet.

Membangun skema database di sisi server

Sebelum bisa punya mekanisme insert-read-update-delete, tentu saja saya harus membuat
terlebih dahulu databasenya, juga table dan field-fieldnya. Begini rencananya. Saya akan
membuat sebuah skema database bernama tutorial dengan server database MySQL. Di
dalamnya saya membuat tabel datapelanggan yang memiliki field-field: idpelanggan, nama,
alamat, tagihan, dan catatan.

Sebenarnya saya ingin menggunakan tool MySQL Query Browser untuk melakukannya, karena
saya rasa ini tool yang cukup baik. Memang untuk keperluan ini, MySQL Query Browser
bukanlah pilihan yang terbaik. Masih ada MySQL Yog, MySQL Front dan Heidi SQL. Saya suka
MySQL Query Browser sebab tools ini dibuat sendiri oleh si produsen MySQL, www.MySQL.net.
Namun ada sedikit masalah, ketika saya menjalankan MySQL Query Browser, saya tidak bisa
terhubung ke database MySQL di localhost. Padahal saya sudah nyalakan servicenya. Hmm...
aneh. Saya coba tool lain deh, mungkin PhpMyAdmin. Tapi saya harus download aplikasi ini,
hiks. Karena saat ini saya menggunakan Ubuntu, maka saya gunakan APT-GET, tools untuk men-
download sekaligus menginstall aplikasi. APT-GET berfungsi seperti Add/Remove Programs
pada Windows, bedanya APT-GET berjalan pada console dan mampu memperoleh paket-paket
software dari internet. Begini caranya:

$ sudo apt-get install phpmyadmin

Untuk pengguna Xampp di WIndows, Anda boleh gembira karena PhpMyAdmin sudah
menyediakannya untuk Anda.

Nah sekarang, anggap saja kondisinya, saya sudah punya Apache HTTPD, MySQL dan PHP, juga
PhpMyAdmin. Meskipun entah kenapa, MySQL Query Browser saya masih error. Tidak masalah.
Saya akan betulkan nanti. Hal pertama yang saya lakukan adalah membuat database-nya
seperti yang dibicarakan tadi.

Saya membuat sebuah skema database dengan nama tutorial. Kemudian saya langsung
membuat table di dalamnya dengan nama datapelanggan dengan jumlah field 5. Field-field
yang dibuat antara lain: idpelanggan (INT), nama (VARCHAR[50]), alamat (TEXT), tagihan (INT),
dan catatan (TEXT).

Tabel di atas di buat menggunakan PhpMyAdmin. Nampaknya tools ini adalah tools yang paling
populer untuk mengelola database MySQL. Mudah-mudahan Anda sudah cukup mengenalnya.
Setelah saya Save skema tersebut, saya akan melanjutkan dengan membuat file PHP untuk
servernya.
Menulis function.php
Semoga Anda masih ingat dengan rencana saya. Ya, saya akan membuat sebuah script PHP
dengan nama function.php di dalam project Tutorial. Karena saat ini saya memakai Linux dan
installasi Apache-nya menggunakan APT. Maka ini yang saya lakukan:

1. Membuat direktori Tutorial dalam direktori Projects (direktori tempat saya menyimpan
proyek-proyek PHP saya. Jika Anda ingat sub bab yang membahas penggunaan Easy
Eclipse, workspace saya ada di /home/pokemon/Projects. Pokemon adalah username
saya di system operasi. Jadi, lokasinya kurang lebih seperti ini:
home/pokemon/Projects/Tutorial.
2. Membuat file function.php di dalam direktori tersebut. Di dalamnya saya membuat
kerangka fungsi-fungsi yang dibutuhkan dan menambahkan koneksi ke MySQL yang
sederhana di awalnya, dan ditutup di akhir file. Dalam kerangkan ini, fungsi-fungsi masih
kosong, begitu juga dengan bagian untuk menangani HTTP Request GET.
<?php

// Koneksi ke database MySQL

$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Koneksi database gagal: ' . mysql_error());
}
mysql_select_db("tutorial") or die("Database tidak dapat dibuka.");

// Bagian utama untuk menerima request HTTP GET

if (isset ($_GET["function"])) {
switch ($_GET["function"]) {
}
}

// Fungsi-fungsi
function listCustomerData() {
}

function insertCustomerData($nama, $alamat, $tagihan, $catatan) {

}

function readCustomerData($idPelanggan) {
}

function updateCustomerData($idPelanggan, $nama, $alamat, $tagihan,

$catatan) {
}

function deleteCustomerData($idPelanggan) {
}

// Menutup koneksi
mysql_close($link);
?>
 3. Mengubah file konfigurasi Apache agar bisa mendeteksi projek baru saya. (Anda yang
pengguna Xampp di Windows tidak perlu melakukan langkah ini)

$ sudo kate /etc/apache2/apache2.conf

Perintah di atas berfungsi untuk membuka Kate (text editor sederhana di Kubuntu)
dengan mode admin (root). Saya tambahkan entry berikut ini

Alias /Tutorial/ "/home/pokemon/Projects/Tutorial/"

AllowOverride None
Options IncludesNoExec
AddOutputFilter Includes html
AddHandler type-map var
Order allow,deny
Allow from all
LanguagePriority en cs de es fr it nl sv pt-br ro
ForceLanguagePriority Prefer Fallback

4. Perhatikan di atas, lokasi projek saya ditulis 2 kali. Langkah ini gunanya adalah agar nanti
jika saya mengetikkan http://localhost/Tutorial/function.php, maka script PHP yang
dijalankan adalah /home/pokemon/Projects/Tutorial/function.php. Jangan salah ya.

5. Restart server Apache saya

$ sudo /etc/init.d/apache2 restart

Sampai tahap ini, function.php sudah diakses dan jika tidak ada pesan error ketika kita buka
dengan Browser, maka mestinya koneksi dengan MySQL sudah benar.

Function.php saya lengkapi dengan baris program yang meminta PHP untuk menggunakan
skema database tutorial.
// Koneksi ke database MySQL
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Koneksi database gagal: ' . mysql_error());
}
mysql_select_db("tutorial") or die("Database tidak dapat dibuka.");

Sampai tahapan ini, kita sudah memiliki koneksi ke skema database tutorial. Jika tidak berhasil,
misalnya skema database belum dibuat, maka akan muncul pesan Database tidak dapat
dibuka.
Melengkapi fungsi-fungsi utama
Berikutnya, saya melengkapi program kita dengan fungsi-fungsi yang sudah dijanjikan pada
bagian awal, yaitu untuk insert, read, update dan delete data dalam tabel. Oh ya, sebagai
tambahan, saya juga berikan fungsi untuk menmperlihatkan daftar lengkap pelanggan. Fungsi
ini (listCustomerData()) saya tambahkan terakhir tetapi saya tulis paling awal. Jangan bingung
ya. Silakan perhatikan kode program berikut:
function listCustomerData() {
global $link;
$sql = "SELECT idpelanggan, nama FROM datapelanggan";
$result = mysql_query($sql);
if ($result) {
if (mysql_num_rows($result)) {
$data = array ();
while ($row = mysql_fetch_assoc($result)) {
$buffer = array (
"id" => $row["idpelanggan"],
"nama" => $row["nama"]
);
array_push($data, $buffer);
}
} else {
// Data tidak ditemukan
$error = 2;
}
} else {
// Query SQL gagal
$error = 1;
}
$result = array (
"errorcode" => $error,
"data" => $data
);
}

function insertCustomerData($nama, $alamat, $tagihan, $catatan) {

global $link;
$sql = "INSERT INTO datapelanggan (nama, alamat, tagihan, catatan)
VALUES ('$nama', '$alamat', '$tagihan', '$catatan')";
$result = mysql_query($sql);
return $result;
}

function readCustomerData($idPelanggan) {
global $link;
$error = 0;
$data = array ();
$sql = "SELECT idpelanggan, nama, alamat, tagihan, catatan FROM
datapelanggan
WHERE idpelanggan='$idPelanggan'";

$result = mysql_query($sql);

if ($result) {
if (mysql_num_rows($result)) {
 while ($row = mysql_fetch_assoc($result)) {
$data = array (
"id" => $row["idpelanggan"],
"nama" => $row["nama"],
"alamat" => $row["alamat"],
"tagihan" => $row["tagihan"],
"catatan" => $row["catatan"]
);
}
} else {
// Data tidak ditemukan
$error = 2;
}
} else {
// Query SQL gagal
$error = 1;
}
$result = array (
"errorcode" => $error,
"data" => $data
);
return $result;
}

function updateCustomerData($idPelanggan, $nama, $alamat, $tagihan, $catatan)

{
global $link;
$sql = "UPDATE datapelanggan
SET nama='$nama', alamat='$alamat', tagihan='$tagihan',
catatan='$catatan'
WHERE idpelanggan='$idPelanggan'";
$result = mysql_query($sql);
return $result;
}

function deleteCustomerData($idPelanggan) {
global $link;
$sql = "DELETE FROM datapelanggan WHERE idpelanggan='$idPelanggan'";
$result = mysql_query($sql);
return $result;
}

Menangani HTTP Request GET

Hingga tahap ini, kita sudah memiliki fungsi-fungsi yang dibutuhkan. Tetapi kapan fungsi ini
digunakan? Kita perlu melengkapi program kita dengan kode berikut untuk menangani
permintaan GET. Mengapa permintaan GET (bukan POST)? Jika Anda berpengalaman,
kemungkinan Anda sudah berpengalaman dengan web based programming. Dalam tutorial ini
sengaja saya gunakan request GET agar tutorial ini lebih mudah dipahami, karena modul untuk
mengirimkan request POST dengan J2ME akan sedikit lebih sulit dibuat.

Tidak masalah, target kita kali ini hanyalah dasarnya saja.

// Fungsi utama untuk menerima request HTTP GET
if (isset ($_GET["function"])) {
switch ($_GET["function"]) {
case "INSERT" :
{
if (isset ($_GET["parameters"])) {
$parameters = explode("||", $_GET["parameters"]);
if (count($parameters) == 4) {
$result = insertCustomerData($parameters[0],
$parameters[1], $parameters[2], $parameters[3]);
echo $result;
}
}
}
break;
case "READ" :
{
if (isset ($_GET["parameters"])) {
$parameters = $_GET["parameters"];
$result = readCustomerData($parameters);
if ($result) {
echo $result["errorcode"];
if ($result["errorcode"] == 0) {
echo "##";
echo $result["data"]["id"] . "||" .
$result["data"]["nama"] . "||" .
$result["data"]["alamat"] . "||" .
$result["data"]["tagihan"] . "||" .
$result["data"]["catatan"];
}
};

}
}
break;
case "UPDATE" :
{
if (isset ($_GET["parameters"])) {
$parameters = explode("||", $_GET["parameters"]);
if (count($parameters) == 5) {
$result = updateCustomerData($parameters[0],
$parameters[1], $parameters[2], $parameters[3],
$parameters[4]);
echo $result;
} else
echo 3;
// 3 adalah error code parameter tidak cocok
}
}
break;
case "DELETE" :
{
if (isset ($_GET["parameters"])) {
$parameters = $_GET["parameters"];
$result = deleteCustomerData($parameters);
echo $result;

}
}
 break;
}
}

Selesai sudah script PHP sebagai server aplikasi kita. Apakah Anda melihat ada yang kurang?
Jika Anda melihatnya, berarti Anda memperhatikan. Tetapi saya kurang yakin. Nah jika Anda
menemukan kekurangannya, silakan kirim email kepada saya (alamat ada di bawah judul
ebook).

Anda bisa mengeceknya dengan mengetikkan URL berikut ini ke address bar browser Anda:
• http://localhost/Tutorial/function.php?function=INSERT&parameters=Nunik%20
Yulianingsih||Perumahan%20Kurnia%20Alam%20Permai%20Blok%20E%20No%
209%20Depok||150000||Lunas
• http://localhost/Tutorial/function.php?function=UPDATE&parameters=1||Nunik
%20Kutoarjo%20Yulianingsih||Perumahan%20Kurnia%20Alam%20Permai%20Bl
ok%20E%20No%209%20Depok||150000||Lunas
• http://localhost/Tutorial/function.php?function=READ&parameters=1
• http://localhost/Tutorial/function.php?function=DELETE&parameters=1

URL-URL di atas berturut-turut digunakan untuk menambah, mengubah, membaca dan

menghapus data sebuah record di tabel pelanggan dalam skema database tutorial. Penasaran?
Silakan mencoba.

Di bagian berikutnya, kita akan mulai membuat projek J2ME-nya.

Menulis modul client

Hingga saat ini, semestinya kita sudah punya file PHP untuk menangani permintaan HTTP GET
yang dikirim dari ponsel. Kalau belum nyambung, silakan baca bagian sebelumnya.

Dalam artikel kali ini kita akan melakukan:

1. Membuka koneksi HTTP ke server dan mengambil hasilnya

2. Mem-parsing field-field dari String sederhana yang didapat dari Server
3. Menyimpan hasil parsing ke dalam sebuah variabel instance class yang khusus dibuat
untuk satu record
4. Menampilkan nilai field-field dalam record di tampilan ponsel semuanya dengan J2ME.

Yang Anda butuhkan untuk melakukannya adalah:

• Netbeans Mobility (rekomendasi: versi 6.5) dengan tambahan modul J2ME

• File-file PHP yang telah disiapkan sebelumnya, bersama database MySQL dan web
server
Membuat Graphical User Interface
Tadi kita sudah bicarakan tentang bagaimana memulai project baru dengan Netbeans 6.5. Anda
sudah bisa kan? Baik, saya asumsikan Anda sudah membuat project baru bernama Tutorial dan
di dalamnya sudah ada Main.java yang berupa class Visual MIDlet.

Berikutnya, ubah view Anda ke mode

Screen Editor dengan cara klik title bar
form dari Flow Editor, kemudian klik
Screen View (persis di bagian atas
diagram), di bawah tab-tab nama file. Atau
Anda bisa dapat juga melakukannya
dengan memilih menu View | Editors |
Screen.

Pada Screen Editor, Anda bisa

menambahkan beberapa komponen.
Untuk contoh kita ini saya tambahkan 5
buah TextField yang masing-masing saya beri nama (variabelnya):

1. textFieldId
2. textFieldName
3. textFieldAddress
4. textFieldBillValue
5. textFieldNotes

Anda sudah paham kan bagaimana mengubah nama komponen-komponen tersebut? Mudah
saja. Pada Screen Editor, klik kanan komponen yang ingin Anda ubah namanya, kemudian pilih
Rename dari menu pop up yang muncul.

Selanjutnya, seperti pada gambar, silakan tambahkan juga 2 Ok Command dan 1 Exit Command.

Membuat koneksi HTTP

Untuk sementara kita tinggalkan dulu Screen Editor.

Untuk melakukan koneksi HTTP ke server, kita membutuhkan pengetahuan tentang class dan
konsep Thread, class Connector, dan class HttpConnection.

Kita perlu membuat thread baru untuk melakukan koneksi dengan HTTP agar aplikasi kita tidak
blocking (terrasa seperti hang) ketika koneksi berjalan. Ya, Anda tahu kan, melakukan koneksi
jaringan kadang membutuhkan waktu tertentu.
Class Connector diperlukan untuk membuat object HttpConnection pada J2ME. Begitulah
ringkasnya. Detilnya, silakan baca terus tutorial ini.

HttpThread.java.
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import javax.microedition.io.Connector;
import javax.microedition.io.HttpConnection;

/**
*
* @author Amri Shodiq
*/
public class HttpThread implements Runnable {

String command = "";

String[] parameters = null;
ThreadListenable parent = null;
String server = "localhost";

public HttpThread(String command, String[] parameters,

ThreadListenable parent) {
// command digunakan untuk menentukan fungsi apa yang
// akan dipanggil
this.command = command;

// parameters digunakan untuk memberikan parameter fungsi tersebut

this.parameters = parameters;
this.parent = parent;
}

public void run() {

HttpConnection con = null;
InputStream is = null;
try {
// pada contoh ini kebetulan yang dijalankan hanya fungsi READ
// yang menggunakan 1 parameter saja
// silakan ubah sendiri jika Anda ingin menjalankan fungsi lainnya
con = (HttpConnection)
 Connector.open("http://"+server+"/Tutorial/function.php?"+
"function="+command+"&parameters=" + parameters[0]);
con.setRequestMethod(HttpConnection.GET);
con.setRequestProperty("Content-Type", "//text plain");
con.setRequestProperty("Connection", "close");
String str = "";
if (con.getResponseCode() == HttpConnection.HTTP_OK) {
is = con.openInputStream();
int len = (int) con.getLength();
if (len != -1) {
byte incomingData[] = new byte[len];
is.read(incomingData);
str = new String(incomingData);

// hanya untuk test

System.out.println("String: " + str);

// kirim hasilnya ke Midlet

parent.setHttpResult(str);
} else {
ByteArrayOutputStream bytestream =
new ByteArrayOutputStream();
int ch;
while ((ch = is.read()) != -1) {
bytestream.write(ch);
}
str = new String(bytestream.toByteArray());
// hanya untuk testing
System.out.println("String: " + str);

// kirim hasilnya ke Midlet

parent.setHttpResult(str);
bytestream.close();
}
} else {
System.out.println("Server memberi jawaban tidak OK");
}
} catch (IOException ex) {
System.out.println(ex.getMessage());
}
}
}
Perhatikan di atas, kita membuat file HttpThread khusus untuk menangani koneksi HTTP
dengan Thread kemudian mengirimkan hasilnya ke MIDlet (Main.java) untuk ditampilkan. Pada
kasus ini kita menggunakan Thread yang mengimplement interface Runnable (artinya nanti
class ini bisa diperlakukan sebagai thread).

Perhatikan, pada kode program di atas saya berikan beberapa warna lain, untuk menunjukkan
baris-baris yang penting:

• Merah: untuk baris program yang berkaitan dengan koneksi dengan HTTP (Internet,
GPRS)
• Hijau: membaca response dari server
• Biru: mengembalikan hasil ke MIDlet (Main.java) untuk selanjutnya ditampilkan.

Membuat interface ThreadListenable

Perhatikan pada source code di atas (HttpThread.java), kita menggunakan class
ThreadListenable untuk variabel parent. Kepada parent inilah HttpThread akan mengembalikan
hasil. Siapakah ThreadListenable? Kita akan mengimplementasikan ThreadListenable untuk
Main (Visual Midlet kita) agar sebuah variabel dalam midlet tersebut dapat diupdate oleh
HttpThread.

Inilah source code interfacenya:

ThreadListenable.java
/**
*
* @author Amri Shodiq
*/
public interface ThreadListenable {
public void setHttpResult(String someString);
}

Dengan mengimplementasikan Interface ini kepada Main.java, artinya kita akan membuat
Main.java harus memiliki method setHttpResult(). Method ini disediakan agar HttpThread dapat
mengembalikan hasil.

Mengapa tidak langsung saja memasukkan class Main sebagai input parameter untuk
constructor HttpThread? Anda bisa saja melakukannya. Tetapi penggunaan interface di sini
dianjurkan untuk implementasi yang baik. Jika misalnya nanti aplikasi ini terdiri atas beberapa
MIDlet, kita masih dapat menggunakan HttpThread yang sama untuk menangani koneksi HTTP,
asal MIDlet tersebut mengimplementasikan interface ThreadListenable. Detilnya tidak akan
dijelaskan dalam tutorial ini.
Membuat class CustomerRecord
Class ini akan kita gunakan sebagai Bean untuk menyimpan record yang kita dapat dari HTTP
server. Kode programnya sebagai berikut. Sebentar, saya akan beritahukan satu rahasia untuk
Anda. Untuk menulis kode program di bawah ini saya hanya menulis variabel-variabelnya saja
(customerId, customerName, dll). Method-methodnya digenerate otomatis oleh Netbeans
setelah saya block variabel-variabel yang saya tulis, kemudian klik kanan. Pilih Refactor |
Encapsulate Fields. Klik tombol Select All, kemudian klik Refactor. Selesai.
public class CustomerRecord {
private int customerId = 0;
private String customerName = "";
private String address = "";
private int billValue = 0;
private String billNotes = "";

public CustomerRecord() {
}

public CustomerRecord(int id, String name, String address,

int value, String notes) {
this.customerId = id;
this.customerName = name;
this.address = address;
this.billValue = value;
this.billNotes = notes;
}

Ini saja yang perlu Anda tulis, berikutnya Anda cukup klik kanan pada kode sumber Anda, pilih Refactor
kemudian Encapsulate Fields … pada menu pop up yang muncul. Akan muncul dialog Encapsulate Fields.
Klik tombol Select All kemudian klik tombol Refactor.
Menyelesaikan Main.java (Midlet utama)
Saya menambahkan 2 variabel di dalam Main.java:
private String httpResult = "";
private CustomerRecord currentCustomer = null;

Saya menambahkan beberapa method di dalam Main.java seperti:

1. split()
Method ini berfungsi untuk memecah sebuah string berdasarkan separator yang
ditentukan dalam parameternya. Kita menggunakannya karena hasil dari HTTP request
kita menggunakan format ini.
 2. setHttpResult()
Method ini digunakan untuk mengupdate variabel httpResult dari HttpThread. Lebih
jauh, di akhir method ini juga mengupdate variabel currentCustomer.
3. showCurrentCustomer()
Method ini digunakan untuk menampilkan nilai variabel currentCustomer ke dalam
Form.

Jika Anda perlu melihat kode sumber lengkap aplikasi ini Anda mendownloadnya di suatu tempat. Jika
Anda hanya ingin tahu kode program yang saya tambahkan ke Main.java, perhatikan kode program di
bawah ini:

private void showCurrentCustomer() {

if (currentCustomer instanceof CustomerRecord) {
try {
System.out.println("Id: " +
currentCustomer.getCustomerId());
System.out.println("Name: " +
currentCustomer.getCustomerName());
System.out.println("Address: " +
currentCustomer.getAddress());
System.out.println("Bill value: " +
currentCustomer.getBillValue());
System.out.println("Bill notes: " +
currentCustomer.getBillNotes());
textFieldId.setString(String.valueOf(
currentCustomer.getCustomerId()));
textFieldName.setString(
currentCustomer.getCustomerName());
textFieldAddress.setString(
currentCustomer.getAddress());
textFieldBillValue.setString(String.valueOf(
currentCustomer.getBillValue()));
textFieldNotes.setString(currentCustomer.getBillNotes());
} catch (Exception e) {
e.printStackTrace();
}
}
}

Method di atas dipanggil ketika MIDlet menampilkan isi variable currentCustomer (pelanggan yang
sedang dilihat datanya) ke dalam TextField-TextField.

public void setHttpResult(String string) {

 httpResult = string;

String[] result = split(string, "##");

if (result[0].equals("0")) {
String[] texts = split(result[1], "||");
for (int i = 0; i < texts.length; i++) {
System.out.println(i + ". " + texts[i]);
}
currentCustomer = new CustomerRecord(Integer.parseInt(texts[0]),
texts[1], texts[2], Integer.parseInt(texts[3]), texts[4]);
showCurrentCustomer();
} else {
Alert alert = new Alert("Ada yang tidak beres.");
alert.setTimeout(Alert.FOREVER);
Display.getDisplay(this).setCurrent(alert);
}
}

Method setHttpResult() digunakan oleh HttpThread untuk mengembalikan hasil berupa response dari
server kepada Main.java (di dalam variable httpResult). Isi variable ini kemudian di-parsing untuk
mendapatkan kode error dan response server, dengan pemisah berupa ‘##’. Jika kode error bernilai 0
(yang berarti koneksi HTTP berjalan lancar), response server yang tersimpan di dalam variabel result[1]
kemudian diparsing dengan pemisah berupa ‘||’ untuk mendapatkan nilai field-field dalam response
tersebut. Setelah diparsing, field-field tersebut dimasukkan ke dalam variable text yang berrupa array.
text[0] berisi field pertama, text[1] berisi field kedua dan seterusnya.

Berikutnya kita akan menyimpan nilai field-field tersebut ke dalam variable instance dari class
CustomerRecord, yaitu currentCustomer. Langkah ini ditulis pada baris program yang ditulis dengan
warna merah.

Baris-baris program di atas dua kali memanggil method split(). Berikut adalah kode sumber method
split().

private String[] split(String original, String separator) {

Vector nodes = new Vector();
System.out.println("split start...................");
// Parse nodes into vector
int index = original.indexOf(separator);
while (index >= 0) {
nodes.addElement(original.substring(0, index));
original = original.substring(index + separator.length());
index = original.indexOf(separator);
}
 // Get the last node
nodes.addElement(original);

// Create splitted string array

String[] result = new String[nodes.size()];
if (nodes.size() > 0) {
for (int loop = 0; loop < nodes.size(); loop++) {
result[loop] = (String) nodes.elementAt(loop);
//System.out.println(result[loop]);
}
}

return result;
}
Seperti yang Anda lihat, method split() digunakan untuk memecah sebuah String menjadi beberapa sub
String berdasarkan pemisah berupa String tertentu.

Setelah kita memiliki ketiga method di atas, kita perlu menambahkan event yang men-trigger
pemanggilan httpThread. Kita tambahkan baris-baris berikut pada method commandAction, pada syarat
untuk tombol yang berlabel Edit (pada kasus saya, variabel tombolnya adalah okCommand1).

Kembali ke Screen Editor, klik kanan okCommand1 pada Assigned Resources (sebelah kanan Device
Screen). Pilih Go To Source. Masukkan kode berikut:

else if (command == okCommand1) {

// write pre-action user code here
// mengirimkan request ke server dengan command = READ
// dengan sebuah parameter sesuai isi textFieldId
HttpThread thread = new HttpThread("READ", new
String[]{textFieldId.getString()}, this);
new Thread(thread).start();
System.out.println("Http Result: " + httpResult);

// write post-action user code here

}

Yang paling penting dalam potongan program di atas adalah isi parameter HttpThread, yaitu
“READ” dan parameter berikutnya: textFieldId.getString(). Jadi kita akan membaca data
pelanggan dengan id sesuai isi pada textField.
Sebenarnya pada kode sumber di atas, baris yang dibutuhkan hanyalah baris program berwarna
biru, yaitu yang bertugas untuk menjalankan koneksi HTTP sekaligus mengembalikan hasilnya
ke Main.java.

Test jalankan program Anda

Hingga tahap i`ni Anda sudah memiliki modul server dan modul client (meskipun tetap bukan
sebuah aplikasi yang lengkap karena fungsi yang jalan hingga saat ini di modul client hanyalah
fitur READ). Tapi tak masalah, toh Anda sudah cukup mengerti cara kerjanya bukan?

Baik, sekarang saatnya kita coba menjalankan program kita. Anda ingat bukan, bagaimana
menjalankan program J2ME dengan Netbeans. Ini sudah kita bahas di awal tutorial ini.

Sebelumnya, Anda harus pastikan server Apache dan MySQL sudah berjalan. Berikutnya, silakan
klik kanan Project Anda, kemudian pilih Run. Mungkin Anda perlu menunggu beberapa detik
hingga Wireless Toolkit (emulator ponsel Java) muncul. Bagaimana hasilnya? Menarik bukan?
Coba cek dengan PhpMyAdmin, ada berapa idpelanggan yang Anda masukkan? Ingat-ingat
salah satu idpelanggan tersebut dan coba masukkan ke dalam TextField Id kemudian tekan
tombol Menu (di bagian bawah kanan LCD emulator Anda).

Kemudian tekan tombol Action yang berada di tengah tombol panah kanan-kiri-atas-bawah.
Akan muncul pesan yang intinya berisi permintaan ijin Anda untuk melakukan koneksi jaringan
internet. Seperti gambar berikut:
Anda harus mengijinkannya dengan menjawab Yes. Jika tidak maka program kita tidak bisa
menghubungi server. Nah…, bagaimana hasilnya?

Bagaimana memodifikasi program ini?

Saya sudah memberikan petunjuk cukup banyak. Saatnya Anda mengembangkan kreatifitas
Anda. Apa yang ingin Anda tambahkan?

Menambahkan fitur simpan pada modul client

Hingga tahap ini, aplikasi kita sudah jalan. Tapi hanya sebatas jalan, saya tidak bilang bugs free.
Aplikasi ini akan semakin sempurna seiring waktu. Baik, kita akan bahas bagaimana jika Anda
ingin menambahkan fitur lain. Dalam hal ini fitur yang ditambahkan adalah menyimpan data
pelanggan yang sudah diubah. Pada bagian sebelumnya, kita sudah memiliki fitur membaca dan
menampilkan data seorang pelanggan. Data-data tersebut kita tampilkan dalam TextField. Kita
bisa mengedit data-data tersebut di TextField, tetapi ketika kita menekan tombol/Command
Simpan (kita sudah menambahkan command okCommand2 yang bertuliskan Simpan, tetapi
belum menambahkan proses apapun dalam event-nya) kita tidak mendapatkan apa-apa. Ini
karena kita memang belum menambahkan proses apapun kepada command tersebut.

Meskipun ini proses yang sederhana, tetapi kenyataannya cukup banyak yang akan kita
tambahkan. Ingat, aplikasi ini masih jauh dari sempurna.

Baik kita mulai saja. Klik kanan pada okCommand2 (dalam Screen Editor) kemudian pilih Go To
Source. Tambahkan baris program berikut ini:
HttpThread thread = new HttpThread("UPDATE", new String[]{
textFieldId.getString() + "||" +
textFieldName.getString() + "||" +
 textFieldAddress.getString() + "||" +
textFieldBillValue.getString() + "||" +
textFieldNotes.getString()
}, this);
new Thread(thread).start();

di bawah baris program berikut (yang ditambahkan otomatis oleh Netbeans).

} else if (command == okCommand2) {

// write pre-action user code here

Jangan salah ya, penambahan ini berlaku kepada Main.java. Sedikit ya. Betul, penambahan
pada Main.java memang tidak banyak. Tetapi bagaimana dengan HttpThread.java? Apakah
perubahan yang perlu dilakukan?

Sebelumnya, kita memiliki fitur READ yang hanya menggunakan 1 parameter berupa String
angka(integer) saja. Bagaimana jika parameternya berrupa String yang mengandung spasi,
koma atau yang lain? Ternyata kode program kita berresiko menimbulkan Exception alias error
karena HTTP request menjadi tidak valid jika mengandung karakter tertentu seperti spasi. Maka
kita perlu mengimplementasikan URL Encoder. URL Encoder berfungsi untuk mengubah String
biasa menjadi String URL yang valid. Misalnya mengubah spasi menjadi %20. Solusinya, saya
buat sebuah class baru bernama UrlEncoder yang memiliki satu fungsi static (bisa dipanggil
tanpa harus membuat instance objectnya).

UrlEncoder.java

/**
*
* @author Amri Shodiq
*/
public class UrlEncoder {

public static String urlEncode(String sUrl) {

StringBuffer urlOK = new StringBuffer();
for (int i = 0; i < sUrl.length(); i++) {
char ch = sUrl.charAt(i);
switch (ch) {
case '<':
 urlOK.append("%3C");
break;
case '>':
urlOK.append("%3E");
break;
case '/':
urlOK.append("%2F");
break;
case ' ':
urlOK.append("%20");
break;
case ':':
urlOK.append("%3A");
break;
case '-':
urlOK.append("%2D");
break;
default:
urlOK.append(ch);
break;
}
}
return urlOK.toString();
}
}

Class ini kemudian saya gunakan di class HttpThread. Saya melakukan perubahan pada proses
instansiasi koneksi HTTP variable con.

con = (HttpConnection) Connector.open(

"http://" + server + "/Tutorial/function.php?" +
UrlEncoder.urlEncode(
"function=" + command + "&parameters=" + parameters[0]));

Perubahan tersebut ditandai dengan warna hijau. Tidak banyak.

Kita tinggalkan dulu HttpThread dan kembali ke Main.java untuk melihat method
setHttpResult(). Di sini akan kita lakukan penambahan, karena ada penambahan fitur.
Ingat, method tersebut sebelumnya hanya menangani satu fitur, yaitu READ. Kita akan
menambahkan fitur lain, yaitu UPDATE (digunakan untuk menyimpan perubahan data
pelanggan). Implementasinya:

1. Menambahkan sebuah variable di bawah class Main, yaitu currentFunction.

Deklarasinya sebagai berikut (di bawah deklarasi httpResult):
private String currentFunction = "";

2. Mengubah deklarasi method setHttpResult, yang berpengaruh pula pada HttpThread

karena memanggil method ini, menjadi:
public void setHttpResult(String string, String function) {

dan memasukkan function ke dalam variable currentFunction ketika method ini

dipanggil.
httpResult = string;
currentFunction = function;

3. Memberlakukan syarat untuk masing-masing fitur (READ dan UPDATE).

if (currentFunction.equals("READ")) {
String[] result = split(string, "##");
…
} else if (currentFunction.equals("UPDATE")) {
…
}

4. Menambahkan proses untuk fitur UPDATE. Ada perbedaan antara fitur READ dengan
UPDATE. Fitur READ diakhiri dengan menampilkan data yang sedang dibaca. Tidak
demikian dengan fitur UPDATE. Fitur ini tidak perlu menampilkan data yang sedang
diupdate, tetapi justru harus diakhiri dengan pemberitahuan apakah proses UPDATE
berhasil atau gagal (gagal bisa karena memang server mengembalikan pesan gagal,
misalnya idpelanggan tidak terdaftar, atau gagal karena koneksi ke server tidak berhasil,
misalnya alamat server tidak ada atau server mati).

Bagaimana menambahkan pemberitahuan tersebut? Gunakan class Alert baik ketika

response dari server berhasil maupun gagal. Perhatikan potongan program berikut ini:
} else if (currentFunction.equals("UPDATE")) {
System.out.println("Http result: "+httpResult);
if (httpResult.equals("1")) {
 Alert alert = new Alert("Berhasil", "Data berhasil disimpan.",
null, AlertType.INFO);
alert.setTimeout(Alert.FOREVER);
Display.getDisplay(this).setCurrent(alert);
} else {
Alert alert = new Alert("Gagal", "Penyimpanan data gagal.",
null, AlertType.ERROR);
alert.setTimeout(Alert.FOREVER);
Display.getDisplay(this).setCurrent(alert);
}
}

5. Menambahkan pesan kegagalan ketika terjadi Exception di class HttpThread

Seperti sudah saya katakan pada point sebelumnya, kita perlu memberi tahu pengguna
jika terjadi kegagalan, termasuk jika modul client ini gagal menghubungi server misalnya
karena pulsa habis, alamat server salah, server sedang down, dll.

Penambahan itu berlaku pada statement catch yang ada di HttpThread.

try{
…
} catch (IOException ex) {
System.out.println(ex.getMessage());
Alert alert = new Alert("Gagal", "Koneksi dengan server gagal.",
null, AlertType.ERROR);
alert.setTimeout(Alert.FOREVER);
parent.setCurrentDisplay(alert);
}

6. Menambahkan method setCurrentDisplay() di interface ThreadListenable dan class Main

Ketika Anda menambahkan baris-baris program di atas, Netbeans akan menunjukkan
adanya kesalahan pada kode sumber program. Ini terjadi karena interface
ThreadListenable tidak memiliki method setCurrentDisplay(). Kita akan
menambahkannya sekarang.

Tambahkan method berikut dalam ThreadListenable.java

public void setCurrentDisplay(Displayable disp);

Juga tambahkan method berikut di akhir Main.java

public void setCurrentDisplay(Displayable disp) {
Display.getDisplay(this).setCurrent(disp);
 }

Selesai. 6 perubahan sudah kita lakukan pada project kita. Anda sudah bisa mengetes-nya
sekarang. Jalankan program ini. Coba baca idpelanggan yang sudah terdaftar di database Anda.
Jika hasilnya sudah tampil lengkap nama, alamat, dll. Coba Anda ubah isi salah satu atau lebih
field-fieldnya. Kemudian tekan command Simpan di emulator. Apa yang terjadi? Sudah
menampilkan pemberitahuan proses berhasil atau gagal bukan? Sekarang, coba matikan server
Apache Anda. Kemudian lakukan test sekali lagi. Tekan command Edit. Muncul pesan kegagalan
bukan?

Nah, sampai tahap ini Anda sudah mampu menambahkan fitur lain ke dalam aplikasi ini.
Penambahan fitur yang lainnya mungkin tidak akan memerlukan usaha sebanyak ini.

Penutup
Buku ini dilengkapi dengan kode sumber program sebagai lampiran. Sebaiknya Anda download
file kode program tersebut agar Anda mendapatkan gambaran yang lebih baik tentang isi
tutorial ii.

Saya sadar, ebook ini masih jauh dari sempurna. Edisi ini adalah edisi pertama ebook ini, dan
ebook ini sangat terbuka untuk penambahan dan penyempurnaan. Saya akan sangat
menghargai kritik, saran maupun pertanyaan yang ditujukan kepada saya berkaitan dengan
meteri di dalam ebook ini.

Silakan layangkan kritik, saran maupun pertanyaan Anda ke email saya,

amri.shodiq@gmail.com. Saya akan sangat menghargai masukan Anda.

Terima kasih, semoga tulisan saya yang sederhana ini dapat membantu kerja Anda.