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
PHP MySQL

Modul client
J2ME

Koneksi database

Fungsi

HTTP Request

Koneksi HTTP

Thread

Interface

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-yangAnda-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 projectproject 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-tablenya) 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 fungsifungsi 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 mendownload 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. 2. 3. 4. 5. textFieldId textFieldName textFieldAddress textFieldBillValue 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.