12
head body onload=initialize
div id=map_canvas style=width:100; height:100 div body html
Gambar 2.1 Contoh Source Code Penulisan Google API
sumber : http:firmansyah.web.idbelajar , 2011
2.1.2 Point Maps
Google Maps terlihat lebih unggul dengan adanya fasilitas penandaan lokasi untuk titik-titik POI yang telah ditentukan. Secara default, titik-titik yang
telah ditandai akan memiliki lambang dengan simbol air hujan upsideFdown, tetapi ada beberapa alternatif lain untuk bisa mengubah simbol tersebut dengan
simbol lain sesuai dengan keinginan. Lokasi-lokasi yang telah ditandai tersebut bisa di custom sesuai dengan kebutuhan, misal ingin menambahkan event pada
ikon tersebut yang memunculkan teks, gambar, atau menampilkan video kecil pada popup.
Untuk melakukan penambahan fungsi-fungsi atau fitur terhadap point maps Google Maps sudah menyediakan fitur untuk melakukan semua itu yaitu:
a. Clickable Markers
Semua penandaan lokasi yang telah ditentukan oleh titik pada dasarnya masih bersifat pasif atau dalam arti masih dalam bentuk objek yang nilai
informasinya masih belum kompleks, perlu adanya event tambahan agar bisa mengakomodasi informasi yang lebih detail, pada Google API sudah
menyediakan listener pada markers tinggal dikembangkan sesuai dengan
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
13
kebutuhan pada lokasi yang telah ditandai. Dalam pada gambar di bawah, terdapat popup dialog teks dalam bentuk windows html sebagai media informasinya. Bila
pengguna mengklik pada marker, maka teks akan ditampilkan dalam gelembung popup.
Gambar 2.2 Marker dengan Info Window
b. Custom Markers
Markers penandaan adalah file grafis kecil yang didefinisikan dalam format file PNG grafis yang biasanya memiliki ukuran 32x32 px, tetapi
dapat bisa juga dari berbagai ukuran. Ikon tersebut bisa digunakan untuk menunjukkan lokasi-lokasi yang telah ditandai, termasuk ikon untuk restoran,
bandara, kamar mandi, dll. Untuk efek grafisnya bisa ditambah efek bayangan, tinggal menyesuaikan dengan kebutuhan, seperti yang ditunjukkan dengan simbol
restoran pada gambar di bawah ini, ikon tersebut telah didesain menggunakan program editing grafis Pixel Fbased seperti Adobe Photoshop.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
14
Gambar 2.3 Contoh Desain Marker 2.1.3
Line Maps
Selain fitur untuk penandaan lokasi markers, Google Maps juga menyediakan fitur grafis untuk menggambar pada peta, yaitu dengan
menggunakan Line Maps, secara fungsi berguna untuk menggabungkan poin-poin yang telah digambarkan oleh pengguna ke dalam area yang utuh.
Gambar 2.4 Contoh Pembuatan Line Pada Peta
Selain dari pada line maps terdapat juga fasilitas untuk melakukan penandaan map dengan simbol area, yang digunakan untuk membuat suatu daerah
lokasi yang dimungkinkan pada peta. Biasanya penggunaannya digunakan untuk
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
15
penandaan suatu daerah atau wilayah yang memiliki perbedaan yang signifikan, misalnya seperti zonasi, daerah rawan bencana, penyebaran penyakit, jenis tanah
dan lain-lain. Pembuatan area pada peta Google Maps akan melibatkan penggunaan Polygon yang berfungsi untuk menandai lokasi yang diseleksi.
Fungsi dasarnya adalah identik dengan polyline, juga terdapat konfigurasi default seperti untuk pengaturan warna area dan opacity. Seperti dengan polyline,
fungsi ini disediakan array koordinat yang menguraikan daerah tersebut. Tetapi perbedaannya adalah poin pertama dan terakhir adalah identik, sehingga menutup
polygon tanpa harus kembali ke poin awal.
2.1.4 Satellite View
Google Maps menyediakan tampilan peta dalam bentuk pencitraan satelit dengan resolusi yang cukup tinggi untuk memantau daerah perkotaan sebagian
besar di Amerika Serikat termasuk Hawaii, Alaska, Puerto Rico, dan Kepulauan Virgin Amerika Serikat, Kanada, dan Inggris, serta sebagai bagian dari Australia
dan Negara-negara lain. Pencitraan peta satelit ini telah digunakan oleh Google Maps untuk mempetakan semua lembah Nil Mesir, Gurun Sahara dan Sinai, serta
kota-kota di seluruh dunia. Terlepas dari sisi positif pemetaan yang telah disebutkan, ada beberapa
pemerintah telah mengeluhkan tentang potensi teroris untuk menggunakan gambar satelit dalam melancarkan serangannya, namun kekhawatiran itu telah di
antisipasi oleh Google sebelumnya, beberapa daerah untuk keamanan kebanyakan di Amerika Serikat, termasuk daerah US Naval Observatory dan
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
16
Amerika Serikat Capitol dan Gedung Putih. Serta Instansi pemerintah terkenal lainnya, termasuk Area 51 di gurun Nevada, yang terlihat buram atau bisa
dikatakan tidak semua daerah pencitraan satelit sama, daerah yang kurang penduduknya biasanya mendapatkan kurang detail dan beberapa daerah mungkin
dikaburkan dengan awan. Mode satellite view ini bisa dikatakan aman karena Google
memperhatikan tingkat privacy lokasi-lokasi mana yang harus ditampilkan dan tidak secara mode pemakaiannya sangat fleksibel karena bisa secara langsung
diganti ke dalam mode map.
2.1.5 Google Direction
Google Direction merupakan layanan penunjuk jalan dari Google. Jika ingin bepergian di suatu kota asing, Google direction bisa membantu untuk
menemukan nama jalan atau daerah di kota tersebut. penggunaannya sangat mudah, tinggal memasukkan lokasi, dan lokasi tujuan. ketika sudah memasukkan
lokasi awal dan lokasi tujuan, maka akan muncul informasi berupa panduan langsung oleh Google Direction untuk melalui jalan mana saja agar sampai ke
tempat tujuan. Selain dari pada itu teknologi Google Direction ini juga bisa digunakan
untuk pencarian jalur tercepat dari terhadap lokasi tujuan, perhitungan jarak antara posisi awal dan lokasi tujuan dan informasi jalur-jalur apa saja yang dilalui oleh
jalur yang telah ditentukan.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
17
Fasilitas ini dimanfaatkan untuk membantu perusahaan dalam memberikan informasi lokasi perusahaan yang diinginkan kepada user. sehingga user bisa
langsung dengan jelas arah dan jalan yang harus mereka lalui. Berikut ini adalah contoh penggunaan Google Direction.
Gambar 2.5 Contoh Google Direction
sumber: developers.google.commaps, 2012
2.2 Java Server Faces
JSF adalah framework untuk membangun user interface untuk aplikasi web. Dibangun berdasar pada konsep-konsep yang diperkenalkan oleh Struts dan
membagi bersama keuntungan sebuah arsitektur yang benar-benar memisahkan presentasi layer dari business logic dan sebuah standard komponen user interface
yang perangkatnya serupa dengan widget Swing. Di bawah ini adalah gambar detail bagaimana JSF bekerja.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
18
Gambar 2.6 Konsep Kerja Proses Pada Framework JSF
Seperti yang dilihat, JSF juga mempunyai pemisahan yang jelas antara komponen layer Model, View, dan Controller. Sama seperti Struts, JSF memiliki sebuah
controller servlet bagian depan yaitu FacesServlet yang bertanggung jawab untuk menerima permintaan dari client dan kemudian menjalankan action yang
dibutuhkan yang dituntun oleh framework. Persamaan lainnya adalah mereka berdua menggunakan action handler yang terpisah dari controller servlet bagian
depan. Meskipun demikian penggunaan Faces ini sedikit berbeda dengan Struts. Faces dan Struts memiliki tujuan yang sama berkaitan dengan layer view.
Disini, Struts hanya menyediakan sebuah set library tag yang ditambahkan pada bagian atas fungsi HTML standard. Sebaliknya, Faces menyediakan set sendiri
dari komponen-komponen beserta sebuah set library untuk memperlihatkan
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
19
komponen-komponen ini sebagai tag-tag dan sebuah komponen hasil render yang menerjemahkan komponen UI menjadi HTML.
2.2.1 Controller
Controller merupakan komponen yang berfungsi untuk memanggil fungsi yang ada di dalam Model dan mengirim hasilnya melalui View, Controller juga
berfungsi mengambil input dari user yang selanjutnya akan diolah oleh Model. Dalam penerapannya pada framework JSF, layer controller dari Faces yang terdiri
dari controller servlet FacesServlet, satu set file konfigurasi XML dan sebuah set action handler.
a. Faces Servlet
FacesServlet bertanggung jawab untuk menerima permintaan dari client dan menjalankan operasi yang diperlukan untuk menghasilkan respon. Operasi
ini termasuk menyiapkan komponen-komponen UI yang dibutuhkan untuk permintaan, meng-update status komponen, memanggil action handler yang
dibutuhkan jika ada, dan komponen-komponen UI hasil render yang merupakan bagian dari respon.
FacesServlet disediakan untuk pengembang aplikasi yang berbasis J2EE dengan framework JSF, dan hanya membutuhkan konfigurasi dalam sebuah
pengembangan descriptor aplikasi sebelum siap untuk digunakan. Di bawah ini adalah potongan yang ditunjukkan bagaimana untuk mengkonfigurasikan
FacesServlet pada aplikasi.
Hak Cipta © milik UPN Veteran Jatim : Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN Veteran Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.arya tulis ini tanpa mencantumkan dan menyebutkan sumber.
20
servlet servlet-nameFacesServletservlet-name
servlet-classjavax.faces.webapp.FacesServletservlet-class load-on-startup1load-on-startup
servlet ...
servlet-mapping servlet-nameFacesServletservlet-name
url-pattern.jsfurl-pattern servlet-mapping
Gambar 2.7 Konfigurasi Faces
b. Action Handler
