Aplikasi Mobile WEB Map Service Pada Mobile Device Dengan SVGT

IJCCS, Vol. 5 No. 1, Jan, 2011

Aplikasi Mobile WEB Map Service Pada Mobile DeviceDengan SVGT

Sigit Priyanta, Ghulam Imanuddin dan Suci Karunia Prilistya

Abstract— Teknologi informasi geografiberkembang sangat pesat dalam beberapa dekadeterakhir ini. Sekarang ini, WMS (Web Map Services)tidak hanya dapat menghasilkan gambar raster tetapijuga gambar vektor. Contohnya adalah SVGT(Scalable Vector Graphics Tiny) yang merupakanbagian dari SVG (Scalable Vector Graphics) yangdigunakan pada piranti mobile device. Mahalnyabiaya komunikasi antara handheld device denganjaringan internet melalui GPRS (Global Pocket RadioSystem) menimbulkan sebuah masalah dalampenerapan aplikasi mobile mapping. Untukmengeliminasi masalah tersebut, harus dibuat sebuahaplikasi mobile mapping yang dapat mentransfer datasekecil mungkin.

Didalam penelitian ini, dicoba untuk dibuatsebuah server pemetaan yang memanfaatkanteknologi SVGT dan XML. Kedua format data tersebutdigunakan untuk menghasilkan data sekecil mungkinagar dapat menghemat biaya komunikasi antara kliendan server. Pada akhirnya, aplikasi yang dibangunakan menjadi sebuah server yang memiliki klienberupa handheld / mobile device.

Aplikasi ini dibangun dengan bahasapemrograman PHP dan memanfaatkan databasePostgreSQL beserta ekstensi PostGIS-nya pada sisiserver dan J2ME (Java 2 Micro Edition) pada sisimobile client. Aplikasi yang telah dibangun mampuuntuk menampung peta jalan dari sebuah daerah,menampilkannya dalam format SVGT kepada klien,serta mencari rute terpendek antara dua buah jalandengan menggunakan algoritma Floyd-Warshall.Mobile device sebagai client mempunyai beberapafungsi utama, yaitu download map dengan formatSVGT dari server, menyimpan map ke dalam recordstore, menampilkan map dan juga melakukan fungsipan dan zoom terhadap map. Fungsi lainnya adalahsearching atau mencari titik tertentu pada map sesuaidengan permintaan user, request path ke server untukmendapatkan jalur terpendek antara dua titik, dan setmark atau menyimpan titik-titik pada peta yang telahdiberi tanda oleh user.

Keywords— SVG, SVGT, Mobile Mapping, WebMap Services, J2ME, Java 2 Micro Editon.

S. Priyanta, Ilmu Komputer Fakultas MIPA Universitas GadjahMada, Yogyakarta 55281, e-mail : [email protected]

G. Imanuddin, Ilmu Komputer Fakultas MIPA UniversitasGadjah Mada, Yogyakarta 55281.

S. Karunia Prilistya, Ilmu Komputer Fakultas MIPA UniversitasGadjah Mada, Yogyakarta 55281.

I. PENDAHULUAN

I.I LATAR BELAKANG MASALAH

Teknologi informasi geografiberkembang sangat pesat dalam beberapa dekadeterakhir ini. Teknologi informasi mengubahsecara cepat penggunaan GeographicInformation System (GIS) dari aplikasi dekstopklasik menjadi business service market. Dengankomputasi yang ada dimana-mana, beberapatahun lagi setting berubah secara dramatis danpasar GIS klasik akan berubah secara drastis [7].

Hingga tahun sembilanpuluhan,arsitektur GIS difokuskan pada lingkunganstandalone (static). Arsitektur ini telah diubahagar aplikasi GIS pada workstation berubahmenjadi aplikasi GIS pada mobile device [7].

Aplikasi mobile mapping bukanmerupakan conventional GIS yang dimodifikasiagar bisa dioperasikan pada mobile device,melainkan merupakan sistem yang dibangunmenggunakan paradigma baru yang fundamental.

Piranti mobile yang mendukung J2ME(Java 2 Micro Edition) menawarkan kepadapengguna dan pengembang sebuah open interface,sehingga pengembang aplikasi dan penggunadapat men-download sesuai dengan perminataan.Sekarang ini J2ME merupakan salah satu dariplatform pengembangan mobile device yangpaling terkenal [1].

Saat ini WMS (Web Map Service) tidakhanya dapat menghasilkan gambar raster tetapijuga gambar vektor. SVGT (Scalable VectorGraphics Tiny) merupakan bagian dari SVG(Scalable Vector Graphics), yang digunakanpada mobile device. Format SVGT sangat cocokdigunakan untuk mapping geografi, khususnyauntuk mobile device yang mempunyai bandwidthyang sangat terbatas. Hal ini karena SVGTmerupakan gambar yang berbasis vektor danmempunyai ukuran file yang kecil [1].

42

mailto:[email protected]

S. Priyanta, Aplikasi Mobile Web Map Service

I.II PERUMUSAN MASALAH

Rumusan masalah dalam penelitian iniadalah :

1.Bagaimana pengembangan aplikasiWMS (Web Map service) menggunakan PHP danprogresql sebagai server, yang akanmenghasilkan sebuah data peta yang berformatSVGT.

2.Bagaimana mengembangkan aplikasimobile web map service menggunakanteknologi J2ME (Java 2 Micro Edition)dan SVGT (Scalable vector Graphics Tiny)untuk penentuan jarak terpendek.

I.III BATASAN MASALAH

Batasan masalah yang akan dibahas padapenelitian ini adalah :

Hasil dari penelitian ini, akan diujikanmenggunakan emulator pada sistem lokal.

Server dapat menyajikan peta dankemungkinan rute terpendek yang dapat dilaluiantara dua tempat dalam satu wilayah.

Perhitungan rute terpendek dilakukanberdasarkan panjang suatu ruas jalan tanpamemperhitungkan arah jalan (searah atau duaarah).

Implementasi WMS pada sisi servermenggunakan bahasa pemrograman PHP dandatabase PostgreSQL dengan ekstensi PostGIS.

Aplikasi client berjalan pada MobileDevice yang mendukung MIDP 2.0 dan CLDC1.1, JSR 226 API yang merupakan API untukmenampilkan gambar 2D berbasis vektor sepertiSVGT, dan GPRS(General Packet Radio Service)untuk koneksi internet.

I.IV TUJUAN PENELITIAN

Tujuan penelitian ini adalah untukmengembangkan WMS (Web Map Services)server menggunakan PHP dan PostgreSQL yangdapat memberikan data peta dan rute terpendekantara dua tempat dalam format SVGT sertamengembangkan aplikasi client map atau petapada mobile device menggunakan teknologiJ2ME (Java 2 Micro Edition) dan SVGT(Scalable vector Graphics Tiny).

I.V TINJAUAN PUSTAKA

Hui [1], dalam tesisnya yang berjudulDesign and Implement a Cartographic ClientApplication For Mobile Devices using SVG Tinyand J2ME mengulas pengembangan kartograficlient untuk mobile devices menggunakanteknologi SVGT dan J2ME. Mobile device yangdisimulasikan dalam komputer desktopmendapatkan data sebagai respon dari WMSberupa format vektor (SVG) maupun raster(PNG), melakukan parsing XML dan kemudaianmenampilkan data tersebut. Dalam tesis ini jugaterdapat pembahasan mengenai analisa dandesain dari struktur sistem seperti user interfacedan code structure.

Liu [4], dalam tesisnya yang berjudulMobile Map: A Case Study in the Design &Implementation of a Mobile Applicationmemaparkan desain dan implementasi aplikasiclient/server pada mobile device. Selain itu jugadipaparkan teknik untuk menambah performanceclient pada sistem komputasi mobile client/server,serta mengidentifikasikan teknik yang palingmenjanjikan, dan dapat diadaptasikan ke dalamaplikasi kepariwisataan.

Luqun [5], dalam sebuah jurnal yangberjudul A Research on Development of mobileGIS Architecture memaparkan tentang konsepdan arsitektur dari Mobile GIS. Dalam tulisantersebut dijelaskan juga mengenai bagaimanacara komunikasi antara client dan server GIS,serta logic diagram dari Mobile GIS. Paper inimerepresentasikan four tier client/server MobileGIS architecture.

II. TEORI, MODEL DAN DESAIN

II.I SISTEM INFORMASI GEOGRAFI (SIG)

Sistem informasi geografi merupakansistem yang berbasiskan komputer yangdigunakan untuk menyimpan dan memanipulasiinformasi-informasi geografis. Literatur lainmenyebutkan, sistem informasi geografi adalahsistem komputer yang digunakan untukmemasukkan (capturing), menyimpan danmenampilkan data-data yang berhubungandengan posisi-posisi di permukaan bumi.

II.II MODEL DATA SPASIAL

Ada 2 macam pendekatan yangdigunakan untuk merepresentasikan komponendata spasial yaitu model raster dan model vektor.

43


II.III POST GIS

PostGIS adalah sebuah modul tambahanuntuk RDBMS PostgreSQL server, yangdigunakan untuk menangani data-data spasialbeserta operasi-operasi spasial(Wikipedia,http://en.wikipedia.org/wiki/PostGis,2006).

Objek spasial yang didukung olehPostGIS adalah “Simple Feature” yangdidefinisikan oleh OpenGIS Consortium (OGC).OpenGIS mendefinisikan dua cara untukmerepresentasikan objek spatial, yaitu Well-Known Text (WKT) dan Well-Known Binary(WKB). Keduanya mengandung informasitentang tipe objek beserta koordinatnya.

OpenGIS juga memerlukan formatpenyimpanan internal untuk objek spasialtermasuk Spatial Referencing System Identifier(SRID). SRID ini diperlukan ketika membuatobjek spasial untuk dimasukkan dalam database[6].

II.1V MOBILE DEVICE

Mobile device merupakan istilah yangsangat luas yang membungkus terminal informasi,alat-alat informasi, Personal Digital Assistant(PDA), Mobile phone dan lain sebagainya.Mobile device dapat diklasifikasikan secara luaske dalam dua kategori yaitu :1. Ponsel dengan kemampuan komputasi yang

bertambah, termasuk tampilan gambar dankemampuan interaksi via gambar(Smartphone, Communicator)

2. Komputer portable, yang dapat di-upgradeuntuk kemampuan komunikasi suara(misalnya PDA).

Masing-masing Mobile devicemempunyai Operation System (OS) yangmemberikan interface dan mengendalikansinkronisasi piranti. Sekarang ini ada empat OSbesar di pasaran, yaitu Symbian, Smartphone,Palm OS, dan Linux. Symbian digunakan olehNokia, Motorala dan Ericsson. Pada tahun 2005,Mobile phone yang telah menginstal Symbian OSmenempati 51% dari smartphone di dunia [2].

II.V KONSEP MOBILE MAPPING

Dari sudut pandang tradisional,Geographics Information System (GIS) dapatdidefinisikan sebagai sistem komputer yangdigunakan untuk mengumpulkan, mensimulasi,

memproses, mencari, menganalisa danmendeskripsikan data geografi [5].

Mobile GIS merupakan sistem aplikasidari sistem informasi geografi dan komunikasiMobile yang mengintregasikan GPS, WirelessLBS, Mobile communication (seperti GSM, GPRS,dan CDMA, dan lain sebagainya) [5].

Sebagai pengganti software tradisionaldan data yang besar, pengembangan Mobile GISakan berubah menjadi jenis baru dari layanandimana konsumen dapat mendapatkannya dariwireless internet, sebagai contoh Navigateservice, Moving object monitor Service dan lainsebagainya.

Gambar 1. Arsitektur dari of Mobile GIS (Luqun& Minglu, 2004)

Ada tiga model aplikasi map padaMobile device berdasarkan konektifitasnya, yaitu[7]. :1. Offline mode (standalone), aplikasi dan data

disimpan secara lokal seperti phone memoryataupun memory card.

2. Server connected mode, aplikasi diinstalsecara lokal, tetapi semua data diambil daricentralized database yang disimpan di server.

3. Hybrid mode, beberapa data diinstal secaralokal dan frequently business data akandiambil dari server.

Masing-masing model mempunyaikelebihan dan kekurangan. Offline mode dapatbekerja sendiri (kapan saja dan dimana saja).Dalam mode ini, semua data harus diinstalterlebih dahulu, oleh karena itu ini akanmenyediakan informasi yang dinamik. Di lainpihak, server connected mode lebih mahal dalampengaksesan aplikasi dan biasanya tergantungpada kekuatan sinyal [7].

II.V.I PLATFORM JAVA

Sun microsystem telah mendefinisikantiga platform Java yang masing-masing

44

http://en.wikipedia.org/wiki/PostGis


diarahkan untuk tujuan tertentu dan lingkungankomputasi yang berbeda-beda yaitu :1. Standar Edition (J2SE) : Didesain untuk

berjalan pada komputer dekstop dankomputer workstation.

2. Enterprise Edition (J2EE) : Dengan built-inmendukung untuk Servlet, JSP, dan XML,edisi ini ditujukan untuk aplikasi berbasisserver.

3. Micro edition (J2ME) : Didesain untukpiranti dengan memori terbatas, layar displayterbatas dan kekuatan pemrosesan yang jugaterbatas.

Gambar 2. Tiga platform Java 2

II.V.II PENGENALAN SVG

SVG (Scalable Vector Graphics)merupakan format file baru untuk menampilkangambar dalam pengembangan web yang berbasisXML (eXtensible Markup Language). SVGberfungsi untuk menampilkan gambar 2 dimensike dalam kode XML [8].

SVG menyediakan tiga tipe dari obyekgambar yaitu vector graphic shapes (misalnyapath yang terdiri atas garis lurus dan kurva),multimedia (seperti gambar raster and video) dantext. Obyek gambar dapat di kelompok-kelompokkan, diberi style dan digabung ke dalamobyek yang telah ada sebelumnya [8].

Kelebihan SVG yang paling utama adalahgambar bisa diperbesar atau diperkecil tanpamengurangi kualitas (scalable), karena dibuatberdasarkan metode vektor (vector), bukan pixel(seperti format gambar pada umumnya, GIF,JPEG dan PNG). Sehingga memungkinkandeveloper web dan juga designer untuk membuatgambar dengan kualitas yang tinggi [3].

II.V.III SVG MOBILE

Karena adanya perkembangan Mobileyang sangat pesat, ada permintaan untuk SVGyang lebih cocok untuk lingkungan wireless,W3C mendefinisikan dua “Mobile profiles” dariSVG yaitu SVG Basic (untuk handset yanghigher-end dan PDA) dan SVG Tiny (untuksmartphone dan piranti yang lower-end). SVGTiny merupakan bagian dari SVG Basic, yangmerupakan bagian dari full SVG. SVG Tiny andSVG Basic dikenal sebagai “Mobile SVG” [9].

Gambar 3. Piramida dari SVG, SVGB dan SVGT(Hui, 2006)

SVG Mobile merupakan format vectorgraphic yang terdiri atas deskripsi geometrik darisemua bentuk dalam image dengan semuaatributnya, termasuk warna, ukuran, danketebalan outline diantaranya. Mobile SVGadalah vendor-neutral dan open, berbasis XMLdan didesain khusus untuk pengiriman dantampilan wireless. Dibuat oleh W3C, Mobile SVGmerupakan format standar untukmendeskripsikan gambar vektor 2D dalam XML[9].

Keuntungan dari Mobile SVG adalahuntuk encoding dan menampilkan content sepertianimasi, map dan gambar yang interaktif.Scalability dari Mobile SVG memperbolehkanresizing gambar agar sesuai dengan ukuran atauresolusi layar atau printer tanpa kehilangankualitas. Ini merupakan keuntungan dalam duniawireless, dimana mobile device mempunyaibentuk dan ukuran yang kecil.

Keuntungan Mobile SVG untuk aplikasimobile yang sensitif terhadap bandwidth, yaituukuran filenya lebih kecil dari bitmap, sehinggamengurangi waktu download melalui jaringanwireless [9].

II.V.IV SVGT

SVGT merupakan gambar yang berbasisXML, source code untuk gambar SVGT tidakditangani dalam format teks yang berubah-ubah,

45


tetapi gambar SVGT atau dokumen SVGT adalahdokumen XML yang “well-formed”.

Elemen SVG terdiri atas semua elemen-elemen yang lain. Ini merupakan elemendokumen dari dokumen. Di dalam elementersebut, developer dapat menambah gambardengan menggunakan elemen dan atribut shapeyang standar yang disediakan oleh SVGT [1].

Obyek lain bisa ditempatkan di dalamobyek SVGT untuk membentuk graphic.Disediakan beberapa komponen dasar sepertirectangle, circle, ellipse, line, polyline danpolygon. Parameter style yang berhubungan jugadidefinisikan. Selanjutnya, perintah yang lainyaitu path disediakan untuk mendeskripsikangaris dan kurva diantara titik. Sebagai tambahan,transformasi, masking, linking, temporal effectdan animasi juga memungkinkan [1].

III. ANALISIS MASALAH

III.I ANALISIS KEBUTUHAN

Elemen yang paling penting dalamsebuah map server yang sukses adalah adanyakonten yang berkualitas serta pelayanan yangbaik dan cepat terhadap klien. Masalah akseskonten yang cepat bergantung pada kecepatantransfer media koneksi serta ukuran konten yangakan diberikan atau dikirim kepada klien. Serverjuga harus dapat melayani request peta danrequest rute dari klien.

Dalam penelitian ini juga dibutuhkansebuah klien untuk melakukan ujicoba server.Client merupakan aplikasi mobile yngdikembangkan menggunakan J2ME.

III.II SPESIFIKASI KEBUTUHAN SISTEM

III.II.I KEBUTUHAN FUNGSIONAL

Berdasarkan analisis kebutuhan di atas,maka aplikasi yang dibangun mempunyaikebutuhan fungsional sebagai berikut :

Aplikasi ini dibangun sebagai sebuahserver pemetaan yang menampung data geografisberupa peta, dan dapat diakses oleh klien yangberupa handheld device.

Aplikasi dapat melakukan perhitunganjarak terpendek untuk rute yang diminta klien,

dan mengembalikan kepada klien data rute yangdilalui dalam bentuk SVGT.

Aplikasi dapat membuat file berformatSVGT dari data spasial yang terdapat dalamDBMS PostgreSQL, yang nantinya file tersebutakan dikirim ke klien.

Aplikasi ini merupakan client yangberjalan pada mobile device yang dapatmenampilkan map dengan format SVGT sertamelakukan fungsi pan, zoom dan view all padagambar tersebut.

Aplikasi dapat men-download mapdengan format SVGT dari server. File yangdidownload akan disimpan dalam database client.1. Melakukan Request Path yaitu permintaan

path yang menunjukkan jarak terpendekberdasarkan titik asal dan tujuan yangdiberikan user .

2. Melakukan set mark atau menyimpan titik-titik pada peta yang telah diberi tanda olehuser.

III.III ARSITEKTUR SISTEM

III.III.I ARSITEKTUR MODEL CLIENT SERVER

Mobile Mapping merupakan aplikasijaringan client-server. Aplikasi yang akan dibuatmerupakan server tunggal. Klien terletak padamobile device dengan memori, tempatpenyimpanan, tampilan, network bandwith danfungsionalitas yang kecil serta metodepenginputan yang kurang. Server terletak padakomputer atau workstation dalam internet yangmempunyai memori dan storage yang besar sertakemampuan pemrosesan yang cepat.

Mobile device sebagai klien akanmelakukan permintaan ke server, mendapatrespon dari server dan kemudian menampilkanatau menyimpan file SVGT yang diberikan olehserver.

Dalam aplikasi yang dibuat, server dapatmenghitung dan mencari rute terpendek antaradua buah tempat yang ditentukan berdasarkanrequest dari klien, dan dapat menyajikannyadalam format SVGT .

Gambar 4. Model mobile mapping client-server

46


III.III.II ARSITEKTUR SISTEM CLIENT

Aplikasi yang dibuat difokuskan padasisi client. Mobile device sebagai clientmempunyai beberapa fungsi utama, yaitudownload map dengan format SVGT dari server,menyimpan map ke dalam record store,menampilkan map dan juga melakukan fungsipan dan zoom terhadap map. Fungsi lainnyaadalah searching atau mencari titik tertentu padamap sesuai dengan permintaan user, request pathjarak terpendek ke server, dan set mark ataumenyimpan titik-titik pada peta yang telah diberitanda oleh user.

Gambar 5. Arsitektur Mobile mapping Client

III.IV RANCANGAN PROSES WMS

III.IV.I DIAGRAM KONTEKS

Diagram Alur Data (DAD) Konteksmemperlihatkan sistem sebagai sebuah prosesdan memiliki tujuan memberi pandangan umummengenai sistem. Dari DAD konteks dapatdilihat proses interaksi dengan lingkungannya.Ruang lingkup sistem yang yang akan dibuatdapat diketahui prosesnya melalui Diagram AlurData konteks yang ditunjukkan pada gambar 6.

Gambar 6. Diagram konteks WMS

Diagram konteks WMS (Gambar 6)menggambarkan diagram arus data dasar. Daridiagram konteks di atas dapat dilihat 2 entitasluar yang berhubungan dengan WMS yaitu klien

dan administrator. Dimana klien dapatmengirimkan data jalan awal, data jalan akhir,dan data daerah kedalam sistem, dan menerimadata SVGT peta jalan, SVGT data rute, XML datarute, XML data daerah, dan XML data jalan darisistem. Administrator dapat memasukkan databerupa peta jalan dan data daerah kedalam sistem,dan menerima pesan sukses dan error dari sistem,tampilan peta yang diinput dalam format SVGT,tampilan rute dalam format SVGT, data daftardaerah, serta data daftar jalan.

III.IV.II FLOWCHART PROSES

III.IV.II.I FLOWCHART PROSES PRA KALKULASI

Proses ini digunakan untuk menghitungbobot dan rute terpendek antara dua jalan dalamdaerah yang ditentukan. Pertama, proses akanmeminta input nama daerah yang akan diproses.Kemudian, proses akan mengecek apakah databobot sudah ada atau belum. Jika belum makaakan dibuat data bobot terlebih dahulu. Jikasudah ada, proses akan me-load data jalan dalamdaerah tersebut dari database.

Kemudian, untuk setiap pasangan jalanyang ditentukan, dicari rute dan jarakterpendeknya. Hasilnya akan disimpan ke dalamtabel tbRute. Gambaran flowchart dari proses iniditunjukkan pada gambar 7.

Gambar 7. Flowchart proses pra-kalkulasi

III.IV.II.II FLOWCHART PROSES PENENTUAN

RUTE JALAN

Proses ini berguna untuk menjawabrequest dari klien yang ingin menentukan ruteterpendek antara dua buah tempat. Pertama,proses akan me-load semua data jalan dari tabel

JSR 226 API

J2ME Application

LCDUI

kXML(parser XML)

Record ManagementSystem (RMS)

RecordStore

CLDC

GFC

MIDletGUI

...

47


tbJalan dan data rute dari tbRute. Selanjutnya di-load juga data bobot dari file bobot sesuai dengandaerah yang ditentukan.

Lalu proses akan meng-ekstrak informasitempat awal dan tempat tujuan dari URI yangdiberikan user. Selanjutnya proses akan mencariapakah rute tersebut ada dalam tabel rute. Jika iya,maka data rute tersebut diambil, disusun, danditulis kedalam format SVGT dan XML.

Namun jika data rute yang diminta belumada, maka proses akan melakukan perhitunganjarak terpendeknya. Ketika hasil perhitunganjarak terpendek didapatkan, maka hasil tersebutakan disimpan dalam database dan dikembalikanpada user yang me-request. Gambaran flowchartdari proses penentuan rute jalan ini ada padagambar 8 dibawah ini.

Gambar 8. Flowchart proses penentuan rutejalan

III.IV.III USE CASE DIAGRAM

Menampilkan map

zoom map

pan map

view all

Searching

Set mark

User

Permintaan map ke server

Download Map

Permintaan path ke server

Request Path

<<include>>

<<include>>

Gambar 9. Use case diagram

Use case diagram diatas memodelkanperilaku (behavior) dari sistem dan subsistempada mobile mapping. Dalam diagram tersebut

terdapat sebuah aktor yaitu pengguna (user) dansepuluh use case yaitu :

Menampilkan map dengan format SVGT

Melakukan download map denganformat SVGT dari server

Melakukan permintaan map ke server

Melakukan penggeseran (pan) terhadapmap yang telah dibuka

Melakukan zoom terhadap map yangtelah dibuka

Menampilkan map secara keseluruhan(view all) terhadap map yang telah dibuka

Melakukan pencarian(searching) danmenampilkan tempat atau titik tertentu pada mapsesuai dengan permintaan user .

1. Melakukan Request Path dari titik asal dantujuan tertentu.

2. Melakukan permintaan path yangmenunjukkan jarak terpendek berdasarkantitik asal dan tujuan yang diberikan user .

3. Melakukan set mark atau menyimpan titik-titik pada peta yang telah diberi tanda olehuser.

III.V RANCANGAN BASIS DATA WMS

Aplikasi WMS server menggunakandatabase dengan rancangan berikut :

Tabel 1. Tabel tbDaerahField TipeId Int4Nama_Daerah Varchar(255)

Tabel 2. Tabel tbJalanField TipeGid Int4Nama_Jalan Varchar(255)Length_kil Float8The_geom GeometryId_Daerah Int4

Tabel 3. Tabel RuteField TipeStart_id Int4Finish_id Int4Rute Varchar (255)

48


III.V.I RELASI ANTAR TABEL

Dari ketiga tabel diatas, dapat dibentukrelasi dari tabel-tabel tersebut. Relasi yang terjadiadalah antara tbDaerah dan tbJalan padatbDaerah.id = tbJalan.id_daerah, tbRute dantbJalan pada tbRute.start_id = tbJalan.gid dantbRute.finish_id = tbJalan.gid. adapun diagramrelasinya seperti pada gambar 10.

Gambar10. Relasi antar tabel yang terbentuk

III.V.II RANCANGAN DATABASE MOBILE DEVICE

Karena keterbatasan mobile device,aplikasi mobile mapping yang akan dibangunmenyimpan map dan data index pencarian dalamsebuah database sederhana menggunakan RMS(Record Management System) yang terdapat padaJ2ME yang merupakan record-oriented database.Data yang diperlukan dalam aplikasi ini disimpandalam record store yang terdiri atas record.Masing-masing record terdiri atas record iddengan tipe integer yang merupakan primary keydalam database, dan array of bytes untukmenyimpan data.

MIDlet yang akan dibuat mempunyaitiga macam record store yaitu record store untukmenyimpan map, record store untuk menyimpanindex dan record store untuk menyimpan titik-titik pada map yang telah diberi tanda oleh user.

Pada saat proses download map, file mapyang di-download disimpan dalam record storemap. Nama map sesuai dengan nama yangdiberikan oleh server. Kemudian file mapdiparsing dan data jalan disimpan dalam recordstore index.

III.V.III RECORD STORE MAP

Record store map terdiri atas tiga kolomyaitu ID, idDaerah, mapName dan mapFile. IDmerupakan record id yang dibuat oleh RMSsecara otomatis. idDaerah merupakan ID yangdiberikan server, mapName merupakan namadari map dan mapFile berisi file SVGT. Ketigakolom terakhir ini bertipe array of byte. Jumlahrecord dalam Record store ini dibatasi lima buahdan setiap record bersifat unik artinya satu

dengan yang lain tidak boleh memiliki data yangsama. Hal ini dimaksudkan untuk menghematmemory mobile device.

Tabel 4. Record store mapIDMap idDaerah MapName MapFile

III.V.IV RECORD STORE INDEX

Record store yang kedua adalah recordstore index yang terdiri atas empat kolom yaituID, StreetName, x, dan y. ID merupakan record id,indexName menyimpan nama jalan, xmenyimpan absis dari jalan dan y menyimpanordinat dari jalan. Jumlah record store indexsesuai dengan jumlah map yang disimpan dannamanya sesuai dengan nama map yangbersangkutan.

Tabel 5. Record store indexID indexName x y

III.V.V RECORD STORE MARK

Record store yang ketiga adalah recordstore mark yang terdiri atas empat kolom yaituID, markName, x, dan y. ID merupakan record id,markName menyimpan nama jalan, x menyimpanabsis dan y menyimpan ordinat dari titik. Jumlahrecord store mark sesuai dengan jumlah mapyang disimpan dan namanya sesuai dengan namamap yang bersangkutan.

Tabel 6. Record store markIDStreet markName x y

IV. HASIL DAN ANALISIS

IV.I IMPLEMENTASI PROGRAM WMS (SISI

SERVER)

Aplikasi yang telah dibangun terdiri atasdua bagian utama, yaitu bagian user dan bagianadministrator data. Pada bagian user, ada empatbuah proses utama, yaitu proses lihat peta, carirute, download daftar jalan, dan download daftardaerah. Pada bagian administrator terdapat limaproses utama, yaitu proses login, input peta, lihatpeta, pra kalkulasi, dan logout.

49


IV.I.I PROSES LIHAT PETA

Proses ini akan menghasilkan peta daridaerah yang ditentukan dalam format SVGT.Untuk mengakses halaman ini, klien dapat me-request halaman ini dengan alamat[alamat_server]/[skrip_path]/map.php?id=[id_daerah]. Dalam pengujian, digunakan serverlokal. Jadi, untuk mengakses fitur ini, digunakanalamat : http://localhost/WMS/map.php?id=1.Dimana id daerah yang digunakan adalah satu,yang merupakan contoh data dalam penelitian ini,yaitu data jalan sebagian Kota Yogyakarta.Contoh tampilan dari halaman ini (pada browser)seperti pada gambar 11.

Gambar 11. Hasil SVGT peta pada browser

IV.I.II PROSES CARI RUTE

Proses ini akan menghasilkan rute jalandari daerah yang diminta dalam format SVGT.Untuk mengakses halaman ini, klien dapat me-request halaman ini dengan alamat[alamat_server]/[skrip_path]/rute.php?start=[id_jalan_mulai]&finish=[id_jalan_akhir]&id=[id_daerah].Dalam pengujian, digunakan server lokal. Jadi,untuk mengakses fitur ini, digunakan alamathttp://localhost/WMS/rute.php?start=63&finish=43&id=1. Contoh tampilan dari halaman ini(pada browser) seperti pada gambar 12.

IV.I.III DOWNLOAD DAFTAR DAERAH

Proses ini akan menghasilkan daftardaerah yang ada dalam database. Untukmengakses halaman ini, klien dapat me-requesthalaman ini dengan alamat[alamat_server]/[skrip_path]/list.php. Dalampengujian, digunakan server lokal. Jadi, untukmengakses fitur ini, digunakan alamathttp://localhost/WMS/list.php. Contoh tampilandari halaman ini (pada browser) seperti padagambar 13.

Gambar 13. Tampilan data daerah berformatXML pada browser

IV.I.IV DOWNLOAD DAFTAR JALAN

Proses ini akan menghasilkan daftar jalanyang ada dalam database berdasarkan id daerahyang diminta. Untuk mengakses halaman ini,klien dapat me-request halaman ini denganalamat : [alamat_server] /[skrip_path]/list.php ?r=jalan&id=[id_daerah].Dalam pengujian, digunakan server lokal. Jadi,untuk mengakses fitur ini, digunakan alamathttp://localhost/WMS/list.php ?r=jalan&id=1.Contoh tampilan dari halaman ini (pada browser)seperti pada gambar 14.

Gambar14. Tampilan XML data jalan pada

5

Gambar 12. Tampilan SVGT rute jalan pada

browserbrowser

0


IV.I.V PROSES LOGIN ADMINISTRATOR

Proses ini digunakan untuk masukkedalam menu administrasi data peta. User harusmemasukkan username dan password yangsesuai untuk dapat masuk. Proses Input Peta

Proses ini digunakan untukmenginputkan data peta jalan ke dalam database.Admin harus memasukkan data daerah dan datapeta jalan dalam format SQL yang sesuai.Tampilan dari halaman login ini seperti padagambar 15.

Gambar15. Tampilan halaman input peta

IV.I.VI PROSES LIHAT DAFTAR PETA

Proses ini mengambil semua data daerahdari database. Ketika link daerah diklik, makaakan ditampilkan peta daerah tersebut, sepertipada gambar 16.

Gambar 16. Tampilan peta yang dipilih

IV.I.VII FUNGSI-FUNGSI LAIN YANG

DIGUNAKAN

Dalam proses-proses diatas, digunakanfungsi-fungsi pendukung untuk membantu prosestersebut. Fungsi-fungsi pendukung yang dibuatadalah :

1. Fungsi untuk membuat header dariXML

2. Fungsi untuk membuat DOCTYPEdari SVG

3. Fungsi untuk membuat Header dariSVG

4. Fungsi untuk mengambil viewboxdari peta

5. Fungsi untuk menentukan jarakantara dua titik dalam peta

6. Fungsi untuk menghitung bobot jalanpada peta

7. Fungsi untuk mengambil skala daripeta

8. Fungsi untuk menggambar pathberdasarkan dua titik yang ditentukan

9. Fungsi Floyd-Warshall untukmenentukan jarak terpendek antaradua titik

Fungsi ini akan mencari semuapasangan node yang telah terboboti.Dari pasangan node tersebut akandicari setiap jarak minimum danrute-nya. Setelah itu, jarak danrutenya akan dijadikan nilaikembalian dari fungsi ini. Adapunkode dari fungsi ini ditunjukkan padagambar 17.

51


IV.II IMPLEMENTASI PROGRAM SISI CLIENT

(J2ME)

Aplikasi yang telah dibangun terdiri atassembilan belas class dengan class utama adalahclass MobileMapping.

IV.II.I MENU UTAMA

Class yang berfungsi untuk menampilkanmenu utama adalah class MobileMapping. Classtersebut merupakan class yang pertama kalidieksekusi ketika aplikasi dijalankan. Classtersebut merupakan turunan dari class MIDletdan mengimplementasikan Interface CommandListener yang akan menampilkan lima menuutama dari aplikasi yang akan dibangun yaituOpen Map, Download, Help, About, dan Exit.

Gambar 18. Tampilan menu utama aplikasiMobile Mapping pada emulator JWTK 2.5beta

IV.II.II PENYIMPANAN DATA

Fungsi penyimpanan pada aplikasi yangdibuat melibatkan empat class yaitu classDataReadWrite, MapReadWrite, IndexReadWritedan MarkReadWrite. Hirarki dari class-classtersebut seperti pada gambar 19.

.

Gambar 19. Hirarki class-class untuk fungsipenyimpanan

IV.II.III PENAMPILAN MAP YANG ADA PADA

RECORD STORE

IV.II.III.I CLASS MAP LIST SCREEN

Class ini mengimplementasikan interfaceCommandListener dan berfungsi untukmenampilkan daftar nama-nama map yangterdapat dalam record store.

Method MapList() memberikan nilaikembalian List. Method membuat obyek Listdengan item berupa nama semua map yangdisimpan di record store dan tiga buah Commanddengan label back, view dan delete.

ClassDataReadWrite

ClassMapReadWrite

ClassMarkReadWrite

ClassIndexReadWrite

turunanturunan

turunan

52


public List MapList() {list = new List("Map List",

Choice.IMPLICIT);numRecord = mapRW.getNum();

if (numRecord != 0){mapName = new String[numRecord];mapName = mapRW.getMapNames();

mapID = new int[mapRW.getNum()];mapID = mapRW.getMapIDs();

if (mapName != null){for (int

i=1;i<=mapRW.getNum();i++){list.append(mapName[i],null);

}}

}list.addCommand(backCommand);list.addCommand(viewCommand);list.addCommand(deleteCommand);list.setCommandListener(this);return list;

}Gambar 20. Method MapList() pada class

MapListScreen

public void commandAction(Command c,Displayable d){

if (c==backCommand){midlet.mainMenuScreenShow();

} else if (c==viewCommand) {if (list.getSelectedIndex() >=0){

mapID = newint[mapRW.getNum()];

mapID = mapRW.getMapIDs();int ID =

mapID[list.getSelectedIndex()+1];String mapName =

list.getString(list.getSelectedIndex());idDaerah =

mapRW.getIdDaerah(ID);mapScreen = new

MapCanvasFromStore(midlet, ID,idDaerah, mapName,

mapRW.getMapFile(ID));

midlet.display.setCurrent(mapScreen);}

} else if (c==deleteCommand){alert = new Alert ("Confirmation");alert.setString("Are you sure to delete

this map?");alert.addCommand(yesCommand);alert.addCommand(noCommand);alert.setTimeout(alert.FOREVER);

alert.setCommandListener(this);midlet.display.setCurrent(alert);

} else if (c==yesCommand){if (list.getSelectedIndex() >=0){

mapID = newint[mapRW.getNum()];

mapID = mapRW.getMapIDs();int ID =

mapID[list.getSelectedIndex()+1];mapRW.deleteMap(ID);IndexReadWrite indexRW = new

IndexReadWrite(list.getString(list.getSelectedIndex()));

indexRW.deleteRecStore();MarkReadWrite markRW = new

MarkReadWrite(list.getString(list.getSelectedIndex()));

markRW.deleteRecStore();

midlet.display.setCurrent(MapList());}

}else if (c==noCommand){midlet.display.setCurrent(MapList());

}}Gambar 21. Method commandAction(Command

c, Displayable d) pada class MapListScreen

Method commandAction(Command c,Displayable d) yang merupakan implementasidari class abstract CommandAction didefinisikantindakan yang akan dilakukan jika ada Commandyang dipilih oleh user.

Jika dipilih viewCommand maka mapyang dipilih akan ditampilkan. JikadeleteCommand dipilih maka akan dilakukanpemanggilan method deleteMap(ID) dari classMapReadWrite yang berarti map yang dipilihdihapus dari record store.

Gambar 22. Tampilan daftar map yang disimpan,pada emulator JWTK2.5beta

53


Req

IV.II.III.II CLASS MAP CANVAS

Class MapCanvas merupakan turunan dariclass Canvas dan mengimplementasikaninterface CommandListener. Class ini berfungsiuntuk menampilkan map dengan format SVGTdan menampilkan perintah-perintah yangdidefinisikan.

Gambar 23 merupakan tampilan mapyang datanya diambil dari record store denganenam pilihan menu. Emulator yang digunakanadalah pada emulator J2ME wireless toolkit 2.5beta.

Gambar 23. Tampilan halaman view map padaemulator JWTK2.5beta

IV.II.IV PAN (PENGGESERAN MAP)

Class MapPan berfungsi untukmenggeser map yang ditampilkan. Class inimengimplementasikan interfaceSVGEventListener yang mengirim event yangterjadi pada map SVGT, ke aplikasi.

IV.II.V ZOOM (PERBESARAN MAP)

Class MapZoom berfungsi untukmemperbesar atau memperkecil map yangditampilkan. Class ini mengimplementasikaninterface SVGEventListener seperti pada classMapPan.

IV.II.VI SEARCHING (PENCARIAN) TEMPAT

TERTENTU PADA MAP (CLASS SEARCH SCREEN)

Class yang mengimplementasikaninterface CommandListener ini menampilkandaftar tempat atau jalan yang terdapat pada mapyang ditampilkan. Data yang ditampilkan diambildari tabel jalan yang namanya sesuai dengannama map yang bersangkutan.

Gambar2 4. a Tampilan Search Path padaemulator JWTK2.5beta

Gambar2 4. b Tampilan Search Path padaemulator JWTK2.5beta

IV.II.VII REQUETH PATH

Proses request path melibatkan dua class,yaitu class PathCanvas dan PathScreen dan subproses yang dilakukan adalah sebagai berikut :1. Melakukan request daftar jalan ke server

mengirimkan ID map yang bersangkutan.2. Melakukan parsing dokumen XML yang

berisi daftar jalan yang merupakan respondari server.

3. Melakukan request path jarak terpendek keserver dengan mengirim id jalan asal dantujuan.

4. Menggabungkan data sebagai respon dariserver dengan map SVGT yang bersangkutan.

5. Menampilkan hasil gabungan di atas ke layar.

54

Gambar 25. Tampilan map hasil
uestPath pada emulator JWTK2.5beta


IV.II.VIII FUNGSI SET MARK

Pada aplikasi yang dibuat juga terdapatfungsi set mark yaitu fungsi agar user bisamenandai titik-titik tertentu. Satu map akanberelasi dengan satu record store yangmenyimpan titik-titik tersebut.

IV.II.VIII.I CLASS MAP MARK

public MapMark(SVGImage inImage,SVGAnimator inAnimator, MapCanvasmapCanvas) {

this.svgMap = inImage;this.animator = inAnimator;this.canvas = mapCanvas;pan = new MapPan(inImage, inAnimator,

mapCanvas);this.document = svgMap.getDocument();this.root = (SVGSVGElement)

document.getDocumentElement();this.scale =

root.getBBox().getWidth()/root.getScreenBBox().getWidth();

createPointer();root.appendChild(pointer);

}Gambar 26. Constructor pada class MapMark

Gambar 27. Tampilan pointer set mark padaemulator JWTK2.5beta

Gambar 28. Tampilan pointer hasil set markpada emulator JWTK2.5beta

IV.II.IX FUNGSI DOWNLOAD MAP

IV.II.IX.I CLASS DOWNLOAD SCREEN

Class ini juga mengimplementasikaninterface CommandListener. Jika dieksekusi,maka class ini akan mengirim permintaan datamap ke server. Server akan merespon denganmengirimkan daftar map yang disediakan serverdengan format XML. Class ini akan melakukanparsing XML dan menampilkan data tersebut kelayar. Kemudian pilihan dari user akan dikirimke server dan server akan merespon denganmengirimkan map sesuai dengan permintaan.

Gambar 29. Tampilan halaman download padaemulator JWTK2.5beta

IV.II.IX.II CLASS MAP CANVAS FROM URL

Class MapCanvasFromURL merupakanturunan dari class MapCanvas. Class inimengimplementaiskan interface Runnable untukmenghindari deadlock pada saat melakukankoneksi HTTP.

V. PENUTUP

Dari penelitian ini dapat ditarik beberapakesimpulan :

Telah berhasil dikembangkan aplikasiWMS (Web Map Services) menggunakan PHPdan database PostgreSQL sebagai sebuah serveryang dapat menghasilkan peta berformat SVGTdan client mobile mapping menggunakanteknologi J2ME dan SVGT Aplikasi yang dibuatmempunyai beberapa fungsi utama, yaitudownload map dengan format SVGT dari server,menyimpan map ke dalam record store,menampilkan map dan juga melakukan fungsipan dan zoom terhadap map. Fungsi lainnyaadalah searching atau mencari titik tertentu pada

55


map sesuai dengan permintaan user, request pathke server untuk mendapatkan jalur terpendekantara dua titik, dan set mark atau menyimpantitik-titik pada peta yang telah diberi tanda olehuser.

Telah berhasil dikembangkan sebuahserver yang dapat menghitung dan mencari ruteterpendek berdasarkan dua buah tempat yangditentukan berdasarkan request dari klien, dandapat menyajikannya dalam format SVGT.

Format data SVGT dan XML cocokditerapkan pada aplikasi WMS ini karena ukurandatanya yang kecil, terstruktur, dan akurat.

VI. DAFTAR PUSTAKA

[1] Hui, L., 2006, Design and Implement a Cartographic ClientApplication For Mobile Devices using SVG Tiny and J2ME,Stuttgart.

[2] Internetnews,2006, Symbian at a MobileLoss ,http://www.internetnews.com/wireless/article.php/3584431, 20 Februari 2006.

[3] Januar, A.M., 2003, Pengantar ScalableVectorGraphics(SVG),http://ilmukomputer.com, 12Oktober 2006.

[4] Liu, J., 2002, Mobile Map: A Case Study in the Design &Implementation of a Mobile Application, CarletonUniversity, Canada

[5] Luqun, L. and Minglu, L. 2004, A Research onDevelopment of mobile GIS architecture, China.

[6] Ramsey, P., 2005. PostGIS Manual.http://postgis.refractions.net/docs/postgis.pdf. Tanggaldownload : 28 September 2006.

[7] Solyman, A..A., 2006, Mobile map - Technology forApplication, Deutsche Gesellschaft Fuer TechnischeZusammenarbeit (GTZ),http://www.gisdevelopment.net/technology/mobilemapping/soly_2.htm, 20 September 2006

[8] W3C, Scalable Vector Graphics (SVG),http://www.w3.org/TR/SVGMobile/, 12 Oktober 2006.

[9] Wender, J.and Ronayne,D.,2003, Mobile SVG.

[10] Wiki,2006 ,JSR226,http://www.wiki.svg.org/jsr_226, 20 Desember 2006

[11] Wikipedia,2006.Post GIS.http://en.wikipedia.org/wiki/PostGIS.Tanggal akses : 29 September 2006.

[12] Wikipedia, 2006. Floyd-Warshall Algorithm.http://en.wikipedia.org/wiki/Floyd-Warshall_algorithm.Tanggal Akses : 2 Januari2007

56

http://www.internetnews.com/wireless/article.php/3584431

http://www.internetnews.com/wireless/article.php/3584431

http://ilmukomputer.com/

http://www.gisdevelopment.net/technology/mobilemapping/soly_2.htm

http://www.gisdevelopment.net/technology/mobilemapping/soly_2.htm

http://www.w3.org/TR/SVGMobile/

http://en.wikipedia.org/wiki/PostGIS

Documents

Aplikasi Mobile WEB Map Service Pada Mobile Device Dengan SVGT