GOOGLE MAPS API
SKRIPSI
Disusun oleh :
CHANDRA ADI KURNIAWAN
NPM. 0834015021
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
JAWA TIMUR
GOOGLE MAPS API
SKRIPSI
Diajukan Untuk Memenuhi Sebagai Persyaratan
Dalam Memperoleh Gelar Sarjana Komputer
Program Studi Teknik Informatika
Disusun oleh :
CHANDRA ADI KURNIAWAN
NPM. 0834015021
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
JAWA TIMUR
APLIKASI WEB GIS PEMETAAN PENYEBARAN
PERUSAHAAN DI JAWA TIMUR MENGGUNAKAN
GOOGLE MAPS API
Disusun Oleh :
CHANDRA ADI KURNIAWAN
NPM. 0834015021
Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang VI Tahun Akademik 2011/2012
Pembimbing Utama Pembimbing Pendamping
Nur Cahyo W, S.Kom. M.Kom Ir. Sutiyono, MT
NPT. 3 7903 04 0197 1 NIP. 19600713 198703 1 002
Mengetahui,
Ketua Program Studi Teknik Informatika Fakultas Teknologi Industri
UPN ”Veteran” Jawa Timur
APLIKASI WEB GIS PEMETAAN PENYEBARAN
Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skripsi Program Studi Teknik Informatika Fakultas Teknologi Industri
Universitas Pembangunan Nasional ”Veteran” Jawa Timur Pada Tanggal 15 Juni 2012
Pembimbing : Tim Penguji :
Universitas Pembangunan Nasional ”Veteran” Jawa Timur
Ir. Sutiyono, MT
KETERANGAN REVISI
Kami yang bertanda tangan di bawah ini menyatakan bahwa mahasiswa berikut : Nama : Chandra Adi Kurniawan
NPM : 0834015021
Jurusan : Teknik Informatika Telah mengerjakan revisi skripsi dengan judul :
“APLIKASI WEB GIS PEMETAAN PENYEBARAN PERUSAHAAN DI JAWA TIMUR MENGGUNAKAN GOOGLE MAPS API”
Oleh karenanya mahasiswa tersebut diatas dinyatakan bebas revisi skripsi dan diijinkan untuk membukukan skripsi dengan judul tersebut.
Surabaya, 22 Juni 2012 Dosen Penguji yang memeriksa revisi
1) I Gede Susrama, ST, M.Kom
Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 3 7903 04 0197 1
Pembimbing II
Kesulitan sebagian orang untuk memperoleh informasi akan suatu perusahaan baik untuk kepentingan investasi,lapangan kerja dll, salah satunya disebabkan oleh semakin banyak perusahaan yang tersebar di daerah Jawa Timur. Hal ini juga kurang ditunjang dari segi sistem informasi yang mempermudah dalam mengelola dan memperoleh info tentang perusahaan tersebut . Meskipun diluar sudah banyak didapat info tentang perusahaan namun masih banyak kekurangannya misalnya penentuan lokasi secara grafis terhadap perusahaan tersebut.
Aplikasi Web GIS Pemetaan Penyebaran Perusahaan di Jawa Timur dalam Skripsi ini merupakan sebagai salah satu solusi untuk mendapatkan informasi tentang suatu perusahaan dengan didukung gambar peta yang valid karena didukung oleh Google Maps API dan data yang cukup lengkap. Dimana aplikasi ini disajikan sesuai dengan kategori yang dipilih sehingga memudahkan user dalam pencarian info suatu perusahaan.
Hasil uji coba menunjukkan bahwa aplikasi dapat memberikan output yang sesuai dengan input yang disimpan pada database dan tampilan grafisnya juga sesuai dengan tampilan pada Google Map . Sehingga bisa diartikan bahwa posisi untuk menampilkan lokasi perusahaan dalam peta sudah valid karena sudah dilakukan pengecekan oleh admin ketika didaftarkan oleh member.
Puji dan syukur penulis panjatkan ke hadirat Allah SWT atas limpahan rahmat, karunia serta hidayah-Nya, sehingga penulis dapat menyelesaikan Tugas Akhir ini serta menyelesaikan pembuatan laporan Tugas Akhir dengan judul
“Aplikasi WEB GIS Pemetaan Penyebaran Perusahaan di Jawa Timur
Menggunakan Google Maps API” tepat pada waktunya..
Tugas Akhir dengan beban 4 SKS ini disusun dan diajukan sebagai salah satu syarat untuk menyelesaikan program Strata Satu (S1) pada program studi Teknik Informatika, Fakultas Teknologi Industri, Universitas Pembangunan Nasional ”Veteran” Jawa Timur Surabaya.
Penulis berharap semoga laporan ini dapat memberikan manfaat baik bagi kami selaku Mahasiswa maupun bagi para pengajar, Namun, penyusun menyadari bahwa Skripsi ini masih jauh dari sempurna. Oleh karena itu penyusun sangat mengharapkan saran dan kritik dari para pembaca untuk pengembangan aplikasi lebih lanjut.
Surabaya, Juni 2012
Penyusun menyadari bahwasanya dalam menyelesaikan Skripsi ini telah mendapat banyak bantuan dan dukungan dari berbagai pihak, untuk itu pada kesempatan yang berharga ini, penyusun mengucapan terima kasih kepada:
1. Bapak dan Ibu tersayang di rumah yang senantiasa memberikan dukungan dan mendoakan penyusun agar Skripsi ini segera terselesaikan.
2. Kakak-kakak dan saudara-saudaraku yang telah memberikan dukungan dan doa penyusun agar Skripsi ini segera terselesaikan.
3. Bapak Ir. Sutiyono, MT, selaku Dekan Fakultas Teknologi Industri. 4. Ibu Dr.Ir.Ni Ketut Sari, MT, selaku Ketua Jurusan Teknik Informatika.
5. Bapak Nur Cahyo W, S.Kom. M.Kom, selaku Dosen Pembimbing I yang telah giat meluangkan banyak waktu untuk memberikan arahan, ilmu dan dorongan serta motivasi kepada penyusun untuk menyelesaikan Skripsi ini. 6. Bapak Ir. Sutiyono, MT, selaku Dosen Pembimbing II yang dengan sabar
telah meluangkan banyak waktu untuk memberikan bimbingan.
7. Bapak I Gede Susrama, ST, M.Kom, Ibu Intan Yuniar Purbasari S.Kom,M.Sc, Ibu Rr. Ani Dijah Rahajoe, ST, M.Cs, Ibu Ir. Kindriari Nurma Wahyusi, MT, Bapak Faisal Mutaqqin S.Kom selaku Penguji Skripsi yang telah banyak memberi masukan serta membuka wawasan baru.
ubun-ubun. ”You Are My Everythings”
ABSTRAK ... i
1.6 Metodologi Penelitian ...4
1.7 Sistematika Penulisan ...7
BAB II TINJAUAN PUSTAKA ... 9
2.1.5 Google Direction ...16
2.2 Java Server Faces ...17
2.2.1 Controller ...19
2.2.2 Model ...23
2.3.3 Konfigurasi dan Hello World ...33
2.3.4 Komponen Primefaces...33
2.3.5 Partial Rendering ...38
2.3.6 AJAX Push/Comet ...40
2.4 Data Pustaka Distribusi Perusahaan di Jawa Timur...41
BAB III ANALISA DAN PERANCANGAN APLIKASI ... 44
3.1 Analisa Permasalahan ...44
3.2 Perancangan Sistem ...45
3.2.1 Sistem Flow Diagram ...46
3.2.2 Context Diagram ...50
3.2.3 Data Flow Diagram (DFD) ...52
3.2.4 Diagram Berjenjang...53
3.2.5 DFD Level 1 Sistem Pemetaan...54
3.2.6 DFD Level 2 Sistem Pemetaan...55
3.3 Perancangan Data ...59
3.3.1 Entity Relationship Diagram (ERD) ...59
3.3.2 Proses Normalisasi Database ...61
3.3.3 Conceptual Data Model ( CDM ) ...65
3.3.4 Physical Data Model (PDM) ...67
3.3.5 Struktur Tabel ...68
3.4 Rancangan Antarmuka Sistem ...74
BAB IV IMPLEMENTASI DAN EVALUASI ... 80
4.1 Implementasi Kebutuhan Sistem ...80
4.1.1 Spesifikasi Perangkat Lunak ...80
4.1.2 Spesifikasi Perangkat Keras ...81
4.2 Implementasi Basis Data ...82
4.3.2 Halaman Utama Website ...93
4.3.3 Halaman Tentang Kami ...94
4.3.4 Halaman Member Login ...95
4.3.5 Halaman Registrasi Pengguna ...95
4.3.6 Halaman Lupa Password ...96
4.3.7 Halaman Akun Profile Anggota ...97
4.3.8 Halaman Manajemen Data Perusahaan Anggota ...98
4.3.9 Halaman Manajemen Perusahaan Secara Rinci ...98
4.3.10 Tampilan Popup Perusahaan ...99
4.3.11 Halaman Admin Lihat Jenis Usaha ...100
4.3.12 Halaman Admin Lihat Kategori Usaha ...101
4.3.13 Halaman Admin Lihat Data Kota ...101
4.3.14 Halaman Admin Lihat Group User ...102
4.3.15 Halaman Admin Lihat Data Anggota ...103
4.3.16 Halaman Admin Permintaan baru ...103
BAB V UJI COBA DAN EVALUASI ... 105
5.1 Pengujian ...105
5.2 Metode Pengujian ...105
5.3 Rencana Pengujian ...106
5.4 Pelaksanaan Uji Coba ...107
5.4.1 Pengujian Halaman Login ...108
5.4.2 Pengujian Pendaftaran Anggota ...109
5.4.3 Pengujian Lupa Password...110
5.4.4 Pengujian Penambahan Lokasi Perusahaan...112
5.4.5 Pengujian Pencarian Perusahaan ...113
5.4.6 Pengujian Monitoring Permintaan Pemetaan ...114
5.4.7 Pengujian Memanajemen Perusahaan Oleh Anggota...116
6.2 Saran ...119
DAFTAR PUSTAKA ... 121
DAFTAR GAMBAR
Gambar 2.1 Contoh Source Code Penulisan Google API ...12
Gambar 2.2 Marker dengan Info Window ...13
Gambar 2.3 Contoh Desain Marker ...14
Gambar 2.4 Contoh Pembuatan Line Pada Peta ...14
Gambar 2.5 Contoh Google Direction ...17
Gambar 2.6 Konsep Kerja Proses Pada Framework JSF ...18
Gambar 2.7 Konfigurasi Faces...20
Gambar 2.8 Contoh Mendapatkan Instan Saat Itu ...21
Gambar 2.9 Contoh Method pada JSF ...22
Gambar 2.10 Contoh Backing Bean Form Login ...24
Gambar 2.11 Konfigurasi Backing Bean Pada JSF ...25
Gambar 2.12 Tampilan Layout JSF Pada Browser ...28
Gambar 2.13 Komponen Inputtext ...34
Gambar 2.14 Komponen Color Picker ...34
Gambar 2.15 Komponen Kalender ...34
Gambar 2.16 Komponen Pie Chart ...35
Gambar 2.17 Komponen Line Chart ...35
Gambar 2.18 Komponen Image Viewer ...36
Gambar 2.19 Komponen PopupDialog ...36
Gambar 2.20 komponen Context Menu ...37
Gambar 2.21 Komponen Data Tabel ...37
Gambar 2. 22 Komponen Menu Bar ...37
Gambar 2.23 Prinsip Kerja Macam-Macam AJAX Pada JSF ...40
Gambar 3.1 Proses Pemetaan Perusahaan...47
Gambar 3.2 Proses Master Pemetaan ...48
Gambar 3.6 DFD Level 1 Sistem Pemetaan ...55
Gambar 3.7 DFD Level 2 – User Login...56
Gambar 3.8 DFD Level 2 – Master Pemetaan ...57
Gambar 3.9 DFD Level 2 – Pemetaan Perusahaan ...58
Gambar 3.10 DFD Level 2 – Pemetaan ...59
Gambar 3.11 Desain CDM Sistem Pemetaan ...66
Gambar 3.12 Desain PDM Sistem Pemetaan...67
Gambar 3.13 Konsep Desain Layout Halaman Utama ...74
Gambar 3.14 Konsep Desain Login Member ...75
Gambar 3.15 Data Table Pada Form Master ...76
Gambar 3.16 Tampilan form registrasi ...76
Gambar 3.17 Tampilan Desain Penambahan Lokasi ...77
Gambar 3.18 Form Pencarian Perusahaan ...78
Gambar 3.19 Marker Perusahaan Pada Peta ...79
Gambar 4.1 Script Pembuatan Tabel Manajemen Perusahaan ...83
Gambar 4.2 Script Pembuatan Tabel Kategori ...83
Gambar 4.3 Script Pembuatan Tabel Koordinat Perusahaan ...84
Gambar 4.4 Script Pembuatan Tabel Kategori Perusahaan ...85
Gambar 4.5 Script Pembuatan Tabel Jenis Usaha Perusahaan ...85
Gambar 4.6 Script Pembuatan Tabel Hasil Usaha Perusahaan ...85
Gambar 4.7 Script Pembuatan Tabel Group User...86
Gambar 4.8 Script Pembuatan Tabel Galeri ...86
Gambar 4.9 Script Pembuatan Tabel Dokumen Upload ...87
Gambar 4.10 Script Pembuatan Tabel Cabang Perusahaan ...87
Gambar 4.11 Script Pembuatan Tabel Anggota...88
Gambar 4.12 Contoh Basis Data yang diimplementasikan dengan JPA ...90
Gambar 4.13 Manipulasi Data dengan JPA pada Java ...91
Gambar 4.14 Halaman Utama Aplikasi Pemetaan...94
Gambar 4.18 Tampilan Halaman Lupa Password ...97
Gambar 4.19 Tampilan Halaman Akun Profil ...97
Gambar 4.20 Tampilan Halaman Daftar Perusahaan yang dimiliki Anggota ...98
Gambar 4.21 Tampilan Halaman Manajemen Perusahaan ...99
Gambar 4.22 Tampilan Popup Detail Perusahaan ...100
Gambar 4.23 Tampilan Halaman Lihat Jenis Usaha...100
Gambar 4.24 Tampilan Halaman Daftar Kategori ...101
Gambar 4.25 Tampilan Halaman Data Kota ...102
Gambar 4.26 Tampilan Halaman Group User ...102
Gambar 4.27 Tampilan Halaman Daftar Anggota ...103
Tabel 2.1 Daftar Kebutuhan Sistem ...32
Tabel 2.2 Data Perusahaan Propinsi Jawa Timur (sumber: jatimprov.go.id) ...42
Tabel 2.3 Data Perusahaan Propinsi Jawa Timur (sumber: jatimprov.go.id) ...43
Tabel 3.1 Data Belum Ternormalisasi ...61
Tabel 3.2 Basis Data Bentuk 1NF ...62
Tabel 3.3 Basis Data Bentuk 2NF – Tabel Anggota ...63
Tabel 3.4 Basis Data Bentuk 2NF – Tabel Perusahaan ...63
Tabel 3.5 Basis Data Bentuk 3NF – Tabel Kategori...64
Tabel 3.6 Basis Data Bentuk 3NF – Tabel Perusahaan ...64
Tabel 3.7 Struktur Tabel Kota...68
Tabel 3.8 Struktur Tabel Jenis Usaha ...68
Tabel 3.9 Struktur Tabel Kategori ...69
Tabel 3.10 Struktur Tabel Group ...69
Tabel 3.11 Struktur Tabel Anggota...70
Tabel 3.12 Struktur Tabel Data Perusahaan...71
Tabel 3.13 Struktur Tabel Dokumen...72
Tabel 3.14 Struktur Tabel Hasil Usaha Perusahaan ...72
Tabel 3.15 Struktur Tabel Cabang Perusahaan ...73
PENDAHULUAN
1.1 Latar Belakang
Banyaknya perusahaan yang tersebar di Indonesia khususnya daerah Jawa Timur membuat sebagian orang mengalami kesulitan dalam memperoleh informasi tentang perusahaan yang diingikan, baik untuk kepentingan investasi, lapangan pekerjaan, pendataan dan lain-lain. Untuk mempermudah semua itu perlu dibuat semacam sistem informasi untuk mengelolah perusahaan-perusahaan tersebut sesuai dengan kategorinya agar mempermudah dalam memperoleh informasi.
Untuk teknologi pemetaan pada system informasi ini menggunakan teknologi yang sudah ada yaitu menggunakan Google Maps API yang telah disediakan oleh Google. Pada dasarnya Google Maps memanfaatkan teknologi
digital dan imaging yang bisa digunakan untuk mengamati peta dunia yang telah
tersimpan dalam database Google, sehingga mempermudah untuk memonitoring.
Pada dasarnya sistem pemetaan menggunakan Google Maps API ini sudah umum dipakai oleh pengembang software untuk membuat aplikasi-aplikasi yang berbasis GIS (Geographic Information Systems), salah satu contohnya yaitu:
Sistem Informasi Papan Reklame di Surabaya, sistem informasi tersebut berguna untuk mengetahui lokasi-lokasi papan reklame yang ada di Surabaya selain itu juga bisa menambahkan lokasi, mendata perusahaan pemilik papan reklame dan mendata perusahaan yang menggunakan papan reklame tersebut sampai informasi mengenai batas waktu pemakaian papan reklame, sistem informasi ini menggunakan bahasa pemrograman PHP. Berdasar dari sistem tersebut, penulis ingin mengexplorasi Google Maps API dengan studi kasus dan environment yang
berbeda tetapi pada prinsipnya sama-sama memanfaatkan grafik pemetaan yang telah disediakan oleh Google.
1.2 Rumusan Masalah
Perumusan masalah pada proyek akhir ini adalah bagaimana menghasilkan
sistem informasi pemetaan perusahaan-perusahaan yang berada di Jawa Timur
dengan menggunakan teknologi Google Maps API. Adapun permasalahan yang
harus dihadapi adalah
a. Bagaimana melakukan pemetaan perusahaan-perusahaan yang tersebar di
Jawa Timur dengan jenis kategori perusahaan yang telah ditentukan
b. Bagaimana cara penyampaian informasi perusahaan yang didaftarkan pada
aplikasi sampai proses validasi untuk memastikan kebenaran dari
informasi yang disampaikan.
c. Bagaimana merancang aplikasi pemetaan secara sistematis dan efisien
sehingga informasi yang disampaikan mudah dimengerti.
1.3 Batasan Masalah
Pada penyelenggaraan proyek ini, batasan permasalahnya adalah
a. Wilayah studi kasus dalam pendataan perusahaan berada di area Jawa
Timur.
b. Pemetaan diperuntukkan untuk perusahaan yang memiliki ijin resmi.
c. Base Map didapatkan dari Google Maps, sehingga memerlukan koneksi
internet untuk bisa menampilkannya.
d. Bahasa pemrograman yang digunakan adalah J2EE dengan framework JSF
dan database yang digunakan adalah MySQL.
1.4 Tujuan
Tujuan utama dari pengembangan proyek ini antara lain :
a. Merancang dan membuat sistem informasi pemetaan
perusahan-perusahaan dengan memanfaatkan Google Map API.
b. Memberikan informasi yang mudah difahami secara multimedia karena
c. Menghubungkan sistem dengan Google Maps untuk mendapatkan peta
digital online dan juga memberikan informasi lokasi perusahaan.
1.5 Manfaat
Adapun manfaat yang bisa didapat dari penelitian ini adalah sebagai
berikut :
a. Berguna sebagai salah satu media yang efektif untuk promosi, baik
promosi sebuah perusahaan dengan produk dan aktifitasnya serta
keberadaan suatu lembaga maupun perorangan yang ingin
memperkenalkan jati dirinya.
b. Bisa digunakan untuk pencatatan daftar perusahaan yang tersebar di
wilayah Jawa Timur oleh pemerintah daerah guna mempermudah dalam
melakukan survei.
c. Sebagai media informasi mencari pekerjaan karena menampilkan profile
perusahaan sesuai dengan jenis usahanya yang tersebar di Jawa Timur.
1.6 Metodologi Penelitian
Pada tugas skripsi ini akan dibuat semacam aplikasi pemetaan mengenai
penyebaran perusahaan yang ada di Jawa Timur, metodologi yang digunakan
a. Studi Literatur
Pencarian materi-materi dan referensi yang berkaitan dengan
permasalahan yang dibahas dan juga berhubungan dengan sistem seperti :
- Pemahaman mengenai konsep pemrograman menggunakan Google
Map Api dalam pemetaan.
- Mempelajari lebih lanjut mengenai pemrograman J2EE dengan
framework JSF serta mempelajari bagaimana menghubungkannya
dengan Google Maps API.
- Merumuskan ruang lingkup dari aplikasi pemetaan yang akan
dibuat agar permasalahan yang akan dibahas bisa terfokus.
- Teknologi menggunakan J2EE berbeda dengan teknologi
sebelumnya yang masih menggunakan PHP, yang diketahui bahwa
J2EE (Enteprise Edition) sudah banyak dipakai untuk aplikasi
tingkat corporate.
b. Pengumpulan Data
Pengumpulan data-data yang diperlukan dalam pembangun sistem
dilakukan dengan :
- Situs resmi dari masing-masing perusahaan yang tersebar di Jawa
Timur dan situs penyedia informasi penyebaran perusahaan.
c. Analisa dan Perancangan Sistem
Perancangan dan pembangunan sistem dilakukan dengan menerapkan
rancangan sistem yang telah dibuat berdasarkan analisa yang sudah
dilakukan terkait masalah pemetaan serta mengidentifikasi masalah yang
terkait sampai merumuskan solusi secara konseptualnya.
d. Implementasi Sistem
Untuk mengimplementasikan desain sistem yang telah dibuat, maka akan
dilanjutkan ke tahap implementasi sistem yang secara teknis menggunakan
framework J2EE yaitu JSF 2.0 serta integrasi dengan Google Map sebagai
media pemetaan dari informasi yang telah diberikan atau yang sudah
dicatat oleh sistem. Koneksi internet diperlukan sebagai media transfer
upload dan download data antara sistem dengan Google agar informasi
peta bisa ditampilkan.
e. Uji Coba Sistem
Melakukan pengujian terhadap semua modul atau form yang ada pada
aplikasi ketika pada masa implementasi, dengan cara memberikan inputan
lokasi perusahaan baru oleh anggota serta upload kelengkapan data
perusahaan oleh anggota sampai proses approval oleh administrator.
Diharapakan segala uji coba yang telah dihasilkan sesuai dengan apa yang
telah direncanakan sehingga hal tersebut memperngaruhi kualitas dari
f. Penulisan Laporan Tugas Akhir
Pada tahap ini merupakan tahap terakhir dari pengerjaan skripsi. Laporan
ini disusun sebagai laporan dari keseluruh proses pengerjaan skripsi yang
telah dibuat. Dari penyusunan buku ini diharapkan dapat mempermudah
pembaca yang ingin menyempurnakan dan mengembangkan aplikasi lebih
lanjut.
1.7 Sistematika Penulisan
Adapun Sistematika Penulisan Laporan Skripsi kali ini yaitu:
BAB I : PENDAHULUAN
Berisi latar belakang yang menjelaskan tentang latar belakang permasalahan, tujuan, manfaat, dan sistematika penulisan yang digunakan dalam laporan skripsi ini.
BAB II : TINJAUAN PUSTAKA
Pada bab kedua akan dijelaskan mengenai landasan teori yang terkait dengan Skripsi ini. Semua penjelasan tersebut terkait dengan berbagai disiplin ilmu yang diterapkan, mulai dari konsep sampai definisi tiap istilah yang dipakai.
BAB III : ANALISIS DAN PERANCANGAN APLIKASI
sistem, perancangan data, sampai dengan rancangan antarmuka sistem.
BAB IV : IMPLEMENTASI SISTEM
Pada bab keempat berisi hasil implementasi dari perancangan yang telah dibuat sebelumnya yang meliputi: kebutuhan sistem, implementasi basis data, dan implementasi tampilan-tampilan antarmuka aplikasi.
BAB V : UJI COBA DAN EVALUASI
Pada bab kelima berisi penjelasan lingkungan uji coba aplikasi, pelaksanaan uji coba dan evaluasi dari hasil uji coba yang telah dilakukan untuk kelayakan pemakaian aplikasi
BAB VI : PENUTUP
Pada bab keenam berisi kesimpulan dan saran untuk pengembangan aplikasi lebih lanjut dalam upaya memperbaiki kelemahan pada aplikasi guna untuk mendapatkan hasil kinerja aplikasi yang lebih baik.
BAB II
TINJAUAN PUSTAKA
2.1 Google Maps
Google Maps adalah aplikasi pemetaan berbasis web yang teknologinya
disediakan oleh Google, gratis untuk penggunaan non-komersial. Google Maps
menawarkan peta geografi, rute perjalanan atau petunjuk arah untuk bepergian
dengan transportasi mobil, sepeda motor (beta) dan pemetaan lokasi-lokasi di
seluruh dunia seperti lokasi restoran, layanan umum, tempat makan, ibadah dan
lain-lain. Seperti situs pemetaan online interaktif lainnya, Google menampilkan
peta dari berbagai skala. Peta yang dihasilkan oleh Google bisa dihasilkan
berbagai skala, baik itu dalam bentuk gambar ataupun multimedia.
Google menawarkan 18 peta dunia pada skala yang berbeda dan bervariasi
mulai dari 1:85 juta hingga 1:4,800 di khatulistiwa. Masing-masing peta yang
ditampilkan oleh Google dibuat ke dalam bentuk kotak-kotak secara terpisah
sehingga untuk proses download peta nya tidak terlalu berat hingga bisa tampil
map secara utuh. Peta-peta yang dikeluarkan oleh Google berada pada server yang
berbeda-beda sesuai dengan lokasi server yang dimiliki Google, untuk proses
rendering atau pembaharuan peta sudah menggunakan teknologi AJAX.
Untuk jenis pemetaannya Google juga menawarkan dalam bentuk satelit,
dalam bentuk satelit ini akan tampak jelas kondisi lokasi sebenarnya bisa
dalam peta, contoh kasus untuk daerah permukiman atau perkotaan akan
mendapatkan prioritas kejelasan lokasi yang cukup tinggi dibandingkan dengan
lokasi-lokasi yang dirasa kurang patut untuk diperjelas demi masalah keamanan,
seperti lokasi militer, pusat perkembangan nuklir, pembangkit listrik di Amerika
Serikat, dll.
2.1.1 Google Maps API dan Basic Maps
Google Map API merupakan serangkaian fungsi-fungsi yang berkaitan
dengan hal pemetaan dari Google maps yang dimungkinkan dipanggil oleh
pengguna untuk mengeksplorasi penggunaan Google maps secara meluas.
Fungsi-fungsi pada API ini akan mengontrol tampilan peta, skala, posisi, dan setiap
menambahkan informasi dalam bentuk titik, garis atau area pada peta. Tujuan dari
penggunaan API itu sendiri adalah sebagai jalur yang menghubungkan antara
pemetaan secara geographic yang miliki oleh Google Maps ke dalam situs Web,
juga sebagai media penampil informasi secara geografis.
Pada gambar di bawah terdapat contoh sederhana penggunaan Google
Map API dengan menggunakan Javascript untuk menampilkan peta yang berpusat
pada bujur dan lintang tertentu. Tingkat zoom pada contoh bisa diatur dengan
kisaran antara 0 sampai 17. Pada contoh source code di bawah untuk
pengaturannya dibuat menjadi 15 dan untuk jenis petanya roadmap / satelit.
Penentuan posisi garis lintang / bujur dapat dilakukan setidaknya dengan
empat cara yang berbeda. Dengan menggunakan zoom (scroll pada mouse) bisa
sebuah titik juga dapat ditentukan dengan menggunakan Google Earth, sebuah
program terpisah yang tersedia dari Google. Untuk menampilkan koordinat dalam
format derajat desimal diperlukan untuk Google Maps, pilih Tools / Options dan
klik pada pilihan desimal. Utilitas bernama LatLongGrabber tersedia pada contoh
di bawah.
<html> <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css">
var latlng = new Google.maps.LatLng 41.258531,-96.012599); var myOptions = {
zoom: 15, center: latlng,
mapTypeId: Google.maps.MapTypeId.ROADMAP };
var map = new Google.maps.Map document.getElementById "map_canvas"), myOptions);
</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.id/belajar , 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
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
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 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
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
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.com/maps, 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
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
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
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup>
</servlet> ...
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name> <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
Gambar 2.7 Konfigurasi Faces
b. Action Handler
Telah dijelaskan sebelumnya bahwa faces menggunakan action handler
yang independen dari controller servlet bagian depan, sama seperti Struts.
Meskipun demikian, Faces mengerjakan fungsi ini dengan cara yang berbeda.
Dalam faces, ada dua cara membuat action handler. Yang pertama adalah
dengan menjadikan satu sebuah method JavaBean untuk bertindak sebagai action
handler, dan yang kedua adalah dengan membuat sebuah class instans yang
mengimplementasikan interfaceAction Listener.
c. Method Application
Sebuah method yang harus mempunyai suatu komponen UI untuk
bertindak sebagai action handler disebut method aplikasi. Kemudian, dalam
itu, ada beberapa aturan yang dibutuhkan untuk membuat sebuah method aplikasi
:
Method harus dideklarasikan public
Method harus tanpa parameter
Jenis return method harus menjadi sebuah String
Satu hal yang penting untuk dicatat adalah cara yang ditempuh oleh
pengembang dalam menempatkan object ke dalam scope session dalam
framework JSF. Dalam Struts, karena penanganan object Action form itu diberi
sebuah instans HttpServletRequest, menjadi mudah untuk menerima sebuah
salinan dari scope session yang mewakili object HttpSession. Bagaimanapun juga,
bukan masalah untuk action handler dalam Faces. Sebagai gantinya, object di
dalam framework Faces mendapat keuntungan akses untuk context external (web
container, portlets, dsb) menggunakan sebuah instans dari object FacesContext.
FacesContext ctx = FacesContext.getCurrentInstance(); ...
Map sessionMap = ctx.getExternalContext().getSessionMap();
sessionMap.put(ApplicationConstants.USER_OBJECT, user);
Gambar 2.8 Contoh Mendapatkan Instan Saat Itu
Setelah menerima object FacesContext, pengembang bisa menerima
menerima perwakilan map object di dalam scope session dengan memanggil
d. Action Listener
Cara lain mengimplementasikan action handler dalam JSF adalah
membuat sebuah class yang mengimplementasikan interface ActionListener.
Interface ini menjabarkan sebuah method single :
public void processAction(ActionEvent event)
Gambar 2.9 Contoh Method pada JSF
Object ActionEvent dilewatkan sebagai parameter dalam method yang
menyediakan implementasi akses class kepada komponen yang disebabkan oleh
event. Hal ini serupa dengan bagaimana cara object Event bekerja di dalam
pemrograman Swing.
e. Faces-Config.xml
Hal ini bertindak sebagai file konfigurasi utama untuk layer controller dari
framework JSF. Sebagai lawan rekan pendampingnya di dalam framework Struts,
Dia tidak berisi masukan-masukan konfigurasi untuk aturan-aturan navigasi,
seperti juga untuk JavaBean yang akan dikenali oleh framework.
Kesimpulan untuk layer Controller :
Pengaturan satu kali :
Konfigurasi FacesServlet untuk digunakan dalam aplikasi. Untuk setiap
halaman web yang berisi komponen UI JSF :
Buatlah sebuah masukan konfigurasi untuk backing model halaman.
Buatlah aturan navigasi dimana menjelaskan dimana aplikasi bisa
2.2.2 Model
Framework JSF tidak menetapkan kembali setiap class atau komponen
yang pengembang diwajibkan untuk terbiasa dengan menggambarkan tiap class
yang mengimplementasikan business logic dari aplikasi. Bagaimanapun juga,
dalam Faces dibutuhkan untuk memiliki class yang akan menyimpan status
komponen UI dalam setiap halaman. Class ini disebut backing model
elemen-elemen itu.
Class tersebut bukanlah class Model ketika dipandang dengan seksama di
bawah perspektif dari arsitektur model 2. Bagaimanapun juga, ketika hanya
berpikir komponen-komponen UI, hal tersebut bisa dipahami untuk memanggil
class ini adalah bagian dari Model, khususnya jika pengembang
membandingkannya dengan implementasi MVC dari class komponen Swing UI.
Ingat, dalam Swing bahwa rendering layer disebut view, status komponen adalah
Model dan action handler adalah bagian Controller.
Meskipun mereka disebut bagian dari Model, beberapa hal perlu
diperhatikan yang harus diambil dalam pengembangan dari class ini seperti
mereka tidak mempengaruhi fungsi inti dari aplikasi yang telah dikembangkan
(Model sesungguhnya). Sangat baik untuk mengingat bahwa
komponen-komponen ini dimaksud untuk menyimpan status untuk komponen-komponen UI dan
mungkin menjelaskan operasi
Dasar yang mengakses data yang tersimpan dimana dapat bertindak
yang berat atau tiap-tiap proses sama sekali yang dapat digunakan kembali dalam
aplikasi lain.
Membuat sebuah backing model untuk halaman yang berisi komponen UI
JSF sangat mudah. Sama mudahnya seperti membuat sebuah JavaBean dengan
properties yang berhubungan dengan tiap komponen dalam sebuah halaman.
Dalam hal ini, mereka serupa dengan objectAction Form dalam framework Struts,
dengan perkecualian bahwa mereka tidak perlu untuk meng-extend setiap class
dasar yang disediakan oleh framework.
Di bawah ini adalah sebuah contoh backing model untuk sebuah form
login.
public class LoginPageBean { private String loginName; private String password;
public String getLoginName() { return loginName;
}
Model ini kemudian dapat diakses dengan halaman setelah dikonfigurasikan
dengan baik dalam file konfigurasi faces-config.xml. Konfigurasi masukan untuk
bean ini adalah ditiru di bawah sebagai acuan.
<managed-bean>
<managed-bean-name>loginPage</managed-bean-name>
<managed-bean-class>sample.LoginPageBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope>
<managed-property>
Gambar 2.11 Konfigurasi Backing Bean Pada JSF
2.2.3 View
View merupakan sebuah layer pada MVC yang mengandung keseluruhan
menyediakan representasi proses internal aplikasi dan menuntun alur interaksi
user terhadap aplikasi.
Dalam layer ini, JSF tidak hanya menyediakan untuk pengembang dengan
tag custom dimana pengembang dapat menggunakan untuk menampilkan
interface Pengembang menggunakan JSP, Dan juga menyediakan untuk
Pengembang dengan sebuah set komponen dan sebuah standardisasi API untuk
mengakses dan memanipulasi mereka.
Sebuah diskusi komponen JSF bisa sangat diperumit jika Pengembang
mencoba untuk menjelaskan segalanya pada waktu yang sama. Sebagai gantinya,
Pengembang akan mengambil sebuah tampilan yang sederhana terlebih dahulu,
dan menjelajah lebih dalam kemudian.
2.2.3.1 Integrasi JSF-JSP
Untuk menggunakan komponen JSF dalam halaman JSP Pengembang,
Pengembang butuh untuk memasukkan dua tag library : core dan html. Core tag
library menjelaskan fungsi inti, seperti bagaimana cara untuk mengatur komponen
JSF seperti kemampuan mereka untuk menyimpan status, dan lain-lain.HTML
library menjelaskan tag yang mengatakan kepada browser bagaimana cara render
komponen JSF Pengembang menjadi sesuai dengan HTML mereka.
Begitu Pengembang telah memasukkan kedua tag library ini, Pengembang
menggunakan tag custom yang mereka jelaskan. Mari Pengembang periksa
<view> - digambarkan di dalam library inti. Semua penjelasan tag-tag
komponen JSF harus enclosed di dalam tag ini. Tag ini menyediakan
sebuah tempat untuk implementasi JSF untuk mampu menyimpan status
dari komponen UI Pengembang. Ingat, tidak ada view, tidak ada status
yang disimpan untuk komponen-komponen Pengembang.
<form> - digambarkan di dalam library HTML. Render sebuah form
dalam HTML.
<outputLabel> - menggambarkan sebuah komponen label yang
berhubungan dengan komponen JSF lainnya. Komponen yang
dihubungkan ditandai oleh nilai di dalam atribut for selama nilai yang
ditampilkan karena label adalah output dari field <outputText> yang
terlampir di dalamnya.
<outputText> - hanya merender teks di dalam atribut nilainya menjadi
yang sesuai dengan HTMLnya.
<inputText> - merender sebuah elemen input HTML berjenis text.
<inputSecret> - merender sebuah elemen input HTML berjenis password.
<commandButton> - merender sebuah elemen input HTML berjenis
submit.
Gambar 2.12 Tampilan Layout JSF Pada Browser
2.2.3.2 Action Handlers
Di dalam listing HTML sebelumnya, Pengembang dapat melihat bahwa
form Pengembang, ketika dirender dengan tag custom JSF, poin-poin hanya untuk
diri sendiri dengan atribut aktifnya. Aplikasi web tradisional akan menempatkan
URL atau mapping URL komponen yang akan menangani submission form di
dalam atribut action. Benar-benar, Faces menangani aspek ini dengan cara yang
berbeda.
JSF mengenalkan konsep pemrograman berbasis event ke dalam
lingkungan web. Setiap komponen UI yang akan JSF sediakan diberi action user
yang sesuai atau input, menggenerate event dapat diproses oleh actionhandlers.
Di dalam JSF di atas, sebagai ganti pemikiran bahwa menekan tombol
submit akan mengakibatkan submission form, pikir kan bahwa menekan tombol
akan mengakibatkan sebuah ActionEvent di-generate, dimana kemudian dapat
diproses oleh sebuah handler.
Meninjau lagi ke dalam halaman JSF :
Pengembang temukan sebuah notasi # serupa dengan yang digunakan dalam
mengikat sebuah property bean untuk sebuah komponen UI. Niat disini sama
seperti : Pengembang mengikat sebuah method dengan nama setiap form login
yang ditemukan di dalam sebuah bean yang disesuaikan dengan nama login page
kepada tombol komponen UI Pengembang. Sekarang, sebagai ganti penyimpanan
nilai untuk komponen, method batas beraksi sebagai action handler untuk media
tombol.
Ketika user meng-klik pada tombol ini, framework memanggil action
handler yang ditunjuk. Lalu menggunakan hasil String dari action handler untuk
menentukan halaman mana yang akan pergi ke yang berikutnya dengan mencari
nya di dalam aturan navigasi yang dikonfigurasikan.
Untuk mendapatkan suatu pengertian mendalam yang lebih baik di
komponen-komponen yang JSF sediakan, akan menjadi lebih baik ketika melihat
pada komponen Swing
Setiap komponen Swing menjelaskan sebuah widget interface,
masing-masing dengan kemampuannya yang dapat diakses secara program
menggunakan API. Contoh : sebuah komponen JTextField menampilkan
sebuah fieldtext yang dapat menerima input dari user. Nilai dapat diterima
menggunakan getText().
Masing-masing komponen juga berbagi beberapa properties dan method
yang bersifat umum untuk semua komponen yang lain(Sebagai contoh,
Beberapa komponen Swing adalah Container, dimana mereka dapat
menerima komponen-komponen lain untuk membentuk suatu gabungan
yang kemudian dapat ditampilkan kepada user atau handler. Contoh :
JPanel, JFrame keduanya dapat digunakan untuk diisikan oleh
komponen-komponen lain.
Komponen Swing bersifat berbasis event dan interaksi user dengan komponen
Swing mengakibatkan generate sebuah event yang dilaksanakan oleh listener yang
telah didaftarkan.
( sumber: The Java EE 6 Tutorial Basic Concept Fourth Edition, 2010 )
2.3 Primefaces Technology
Primefaces merupakan sumber komponen JSF suite yang opensource yang
bundel lebih dari 100 komponen dengan built-in mendukung AJAX. Ini
didasarkan pada YUI dan library Javascript JQuery. Primefaces memiliki desain
yang sederhana, ringan yang sepenuhnya kompatibel dengan komponen JSF
library lainnya. Primefaces juga mendukung AJAX push, dan memiliki
komponen UI yang mendukung pada ponsel dikenal sebagai touch faces.
Saat ini, Primefaces mendukung JSF 2.0 dengan 2.0.0.RC dan
2.0.0-SNAPSHOT. Kemampuan Java EE 6 untuk menggabungkan fragment web.xml
yang berasal dari kerangka lain atau disebut dengan pihak ketiga.
2.3.1 Instalasi Primefaces
Primefaces memiliki dokumen library utama yang dikemas dalam bentuk
dilakukan untuk download library jar ini, library tersebut bisa di download dari
homepage Primefaces atau Bagi pengguna maven dapat bisa mengambil file
tersebut melalui maven. Untuk mendapatkan file tersebut secara jelasnya bisa
dilihat pada pilihan berikut:
a. Download secara manual
Untuk dapat mengunduh file jar tersebut untuk langkah awalnya harus
jelas aplikasi apa yang akan dibuat nanti, apakah berbasis mobile, web
enterprise atau standar web, setelah ditentukan untuk file JAR bisa diambil
pada situs:
http://www.primefaces.org/downloads.html
b. Download melalui maven
Ketika melakukan instalasi atau download melalui maven ada beberapa
konfigurasi yang harus dilakukan, untuk konfigurasi awal melakukan
penganturan dependency pada aplikasi dengan :
<dependency>
<groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>2.2</version>
</dependency>
Setelah melakukan pengaturan dependency pada aplikasi, selanjutnya
melakukan pengaturan mengenai repository Primefaces pada maven
<repository>
<id>prime-repo</id>
<name>Prime Technology Maven Repository</name> <url>http://repository.prime.com.tr</url>
<layout>default</layout> </repository>
2.3.2 Dependencies
Seperti komponen java yang lainnya, Primefaces juga memiliki beberapa
syarat yang harus disediakan ketika akan menggunakan teknologi Primefaces,
salah satunya yaitu harus tersedia JRE dengan versi 5+ dan untuk
implementasinya menggunakan JSF 2.0+, itu merupakan syarat mutlak yang harus
ada agar Primefaces bisa berfungsi sebagaimana mestinya. Sebagai informasi
lebih lanjut berikut di bawah ini akan terdapat daftar dari kebutuhan Primefaces:
Tabel 2.1 Daftar Kebutuhan Sistem
Kebutuhan Versi* Status Keterangan
JSF runtime 2.0+ Wajib Apache MyFace atau Oracle
Mojora
Itext 2.1.7 Pilihan PDF export yang mendukung
untuk komponen DataExporter
Commons-fileupload 1.2.1 Pilihan File Upload
Apache POI 3.2-FINAL Pilihan Excel export yang mendukung
2.3.3 Konfigurasi dan Hello World
Untuk integrasi Primefaces pada aplikasi yang akan dikembangkan pada
dasarnya tidak memerlukan konfigurasi yang begitu rumit melainkan cukup
mudah dan hampir sama dengan teknologi yang lainnya. Setelah mengunduh file
utama Primefaces pengembang tinggal menambahkan properties pada class path
aplikasi. Berikut ini contoh coding implementasi pada halaman user interfaces :
<html xmlns="http://www.w3c.org/1999/xhtml"
( sumber: primefaces.org , 2011 )
2.3.4 Komponen Primefaces
Primefaces memiliki banyak komponen yang sudah mendukung untuk
teknologi AJAX dengan tampilan simple dan ringan pengembang bisa
menggunakan library ini untuk membangun aplikasi enterprise. Berikut beberapa
jenis komponen yang dimiliki Primefaces dan diterapkan dalam pembuatan
aplikasi yang akan dibuat antara lain:
Input element
merupakan komponen yang berkaitan dengan interaksi pengguna terhadap
oleh sistem, contoh: Calendars, Popup, Sliders, Captcha, Auto Complete,
Button, Carousel , Color Picker, context menu dll.
Gambar 2.13 Komponen Inputtext
Gambar 2.14 Komponen Color Picker
Charts
Charts pada dasarnya suatu komponen yang berguna untuk memberikan
informasi secara grafik, biasanya digunakan untuk pelaporan yang sifatnya
grafik. Contoh charts antara lain : Bar chart, pie chart, line graph dll.
Gambar 2.16 Komponen Pie Chart
Gambar 2.17 Komponen Line Chart
Image viewer
Merupakan suatu fitur / komponen yang disediakan oleh Primefaces yang
komponen ini sudah mendukung dengan teknologi AJAX sehingga akan
memudahkan bagi pengembang. Gambar di bawah adalah contoh
screenshoot untuk komponen image viewer.
Gambar 2.18 Komponen Image Viewer
Popup windows
Berguna sebagai menampilkan media informasi dalam bentuk popup,
contoh : Dialog boxes, menus, Mac-like “Growl” notification dll. untuk
gambar lengkapnya bisa dilihat pada gambar di bawah :
Gambar 2.20 komponen Context Menu
Data Table
Suatu komponen yang berfungsi untuk menampilkan informasi berupa
data tabel yang didapat dari database ataupun data static, komponen ini
juga dilengkapi dengan fitur paging, sehingga akan mempermudah
pengolahan data yang akan tampil ketika data tersebut banyak.
Gambar 2.21 Komponen Data Tabel
Menu Bar
Komponen ini sama halnya seperti komponen menu, yang berperan
sebagai pengatur navigasi pada suatu aplikasi.
2.3.5 Partial Rendering
Primefaces menyediakan fitur rendering dan proses pengolahan partial
berdasarkan standar JSF 2 API untuk memungkinkan proses di JSF lifecyle dan
dan komponen apa yang akan terdapat fitur AJAX semua bisa dikonfigurasi.
Selain komponen seperti AutoComplete, Data Table, slider dengan
built-in kemampuan AJAX, Primefaces juga menyediakan PPR generik (Partial
Rendering Halaman) mekanisme untuk memperbaharui JSF komponen dengan
AJAX. Beberapa komponen yang dilengkapi dengan atribut PPR (misalnya
update, process, onstart, oncomplete).
Primefaces AJAX Framework adalah didasarkan pada sisi server API
standar JSF 2. Tidak ada tambahan artfacts seperti kustom AJAXViewRoot,
AJAXStateManager, AJAXViewHandler, Servlet Filter, HtmlParsers,
PhaseListeners dan sebagainya. PrimeFaces bertujuan untuk tetap bersih, cepat
dan ringan.
Pada sisi klien untuk implementasi API seperti Mojarra dan My faces,
Primefaces script didasarkan pada JavaScript library yang paling populer; JQuery
yang jauh lebih diuji, stabil tentang AJAX, penanganan dom, dom pohon
melintasi dari JSF implementasi script.
Bila menggunakan PPR perlu adanya penentuan komponen-komponen
mana yang diperbarui menggunakan AJAX. Jika suatu komponen pemicu
permintaan PPR berada di tempat container yang sama dengan komponen yang
akan diperbarui maka bisa dapat menggunakan id server secara langsung. Dalam
setiap komponen yang mampu PPR seperti Command Link, polling, Remote
a. Single komponen PPR berbeda Naming Containers
Jika halaman pada implementasi PPR memiliki Naming Container yang
berbeda (misalnya dua bentuk), pengembang juga perlu menambahkan id
container untuk pencarian ekspresi sehingga PPR dapat menangani
permintaan yang dipicu di dalam Naming Container untuk melakukan
pembaharuan pada container tersebut.
<h:form id="form1">
<p:commandButton update=":form2:display" /> </h:form><h:form id="form2">
<h:outputText id="display" value="#{bean.value}"/></h:form>
b. Multiple Komponen PPR
Beberapa Komponen untuk memperbarui dapat ditentukan dengan
menyediakan daftar id dipisahkan oleh koma, spasi atau bahkan keduanya.
<h:form> <p:commandButton update="display1,display2" /> <h:outputText id="display1" value="#{bean.value1}"/>
2.3.6 AJAX Push/Comet
Comet adalah model yang memungkinkan server web untuk mendorong
data ke browser. Lelang dan chatting merupakan salah satu contoh dari
implementasi comet. Comet dapat diimplementasikan dalam beberapa cara.
Berikut ini adalah skema yang menjelaskan teknik ini.
Gambar 2.23 Prinsip Kerja Macam-Macam AJAX Pada JSF
Di bawah ini merupakan penjelasan dari skema gambar di atas :
a. Polling
Regular pemungutan suara tidak komet nyata, pada dasarnya browser
mengirimkan request ke server berdasarkan spesifik interval. Pendekatan
ini tidak ada hubungannya dengan komet dan hanya disediakan untuk
b. Long-Polling
Browser permintaan ditangguhkan dan hanya kembali ketika server
memutuskan untuk mendorong data, setelah respon diambil browser
menghubungkan dan mulai menunggu data lagi.
c. Streaming Http
Dengan metode seperti ini maka respon tidak pernah dilakukan dan klien
selalu tetap terhubung, data push streaming ke klien akan terus terhubung.
Pada versi Primefaces saat ini didasarkan terhadap http-streaming pada
proses pengambilan data pada server yang tergolong memiliki performa yang
kurang, oleh karena itu pada versi terbarunya permasalahan ini akan diselesaikan
sehingga proses pengambilan data bisa lebih bagus.
( sumber: Primefaces user’s guide 3.2 , 2011 )
2.4 Data Pustaka Distribusi Perusahaan di Jawa Timur
Dengan banyaknya perusahaan baik yang berskala besar maupun kecil, ini
menunjukkan bahwa kian meningkatnya dunia usaha dari tahun ke tahun. Pada
dasarnya semua perusahaan yang bergerak di bidang jasa memiliki tujuan yaitu
Tabel 2.2 Data Perusahaan Propinsi Jawa Timur (sumber: jatimprov.go.id)
Pada Tabel 2.2 merupakan sebagian data perusahaan yang tersebar pada
beberapa kota di Jawa Timur, pada data tersebut menggolongkan skala perusahaan
dari menengah, sedang hingga besar. Untuk data perusahaan terbanyak berada
pada kota Surabaya selebihnya tersebar ke kota-kota lain. Untuk data perusahaan
perusahaan mencapai 3.337 perusahaan dan jumlah ini akan terus meningkat
seiring berkembangnya industri.
BAB III
ANALISA DAN PERANCANGAN APLIKASI
3.1 Analisa Permasalahan
Aplikasi yang akan dibuat pada skripsi ini merupakan aplikasi untuk
memetakan perusahaan-perusahaan yang tersebar di Jawa Timur dengan
memanfaatkan Google Map API, pada sistem pemetaannya menggunakan peta
dasar yang diambil dari Google Maps, teknologi dari Google ini yang
memungkinkan pengguna untuk melihat peta atau mencari lokasi tertentu secara
digital.
Aplikasi pemetaan ini bersifat komersial dan gratis, dalam arti bisa diakses
oleh banyak orang yang ingin melihsat informasi atau mendaftarkan
perusahaan-perusahaan yang dimiliki pada sistem. Para owner perusahaan atau pihak yang
diberi kewenangan oleh perusahaan untuk menginformasikan perusahaan bisa
menyampaikan informasi secara detil, mulai dari deskripsi singkat perusahaan,
hasil usaha dan fotonya, cabang-cabang yang dimiliki dan bahkan foto-foto
kegiatan perusahaan bisa disampaikan guna menunjang dalam hal promosi.
Pada proses pendaftaran perusahaan ke dalam aplikasi, tahap awal akan
terdapat registrasi untuk mendapatkan akun yang berguna untuk melakukan akses
pendaftaran perusahaan kedalam sistem, pada tahap registrasi berisi mengenai
informasi data pribadi pewakilan dari perusahaan dan harus bersifat valid karena
bisa melakukan pemetaan perusahaan pada sistem. Segala bentuk informasi yang
diberikan oleh anggota terhadap perusahaan yang didaftarkan maka akan
disampaikan secara visual grafis beserta dengan peta lokasi secara visual, jadi
secara konsep segala bentuk informasi yang diberikan akan disampaikan sesuai
dengan perusahaan yang akan dipilih.
Untuk penyampaikan informasi yang mudah untuk difahami oleh
pengguna yang mengingikan menampilkan lokasi-lokasi perusahaan maka aka
dibuat pengelompokkan perusahaan terhadap jenis perusahaan dan kategori
perusahaan hal ini akan diatur ketika akan mendaftarkan suatu perusahaan,
sehingga diharapkan informasi yang didapatkan sesuai dengan yang diinginkan.
3.2 Perancangan Sistem
Tujuan dari desain sistem secara umum adalah untuk memberikan
gambaran secara umum kepada user tentang sistem yang baru. Analisis sistem dan
desain sistem secara umum bergantung satu sama lain. Studi menunjukkan bahwa
apa yang dikumpulkan, dianalisis dan dimodelkan selama fase analisis
menyediakan dasar bagi desain sistem secara umum untuk dibuat.
Pada penjelasan mengenai desain sistem ini akan membahas tentang
deskripsi sistem secara umum, kebutuhan sistem meliputi kebutuhan pengguna,
kebutuhan basis data, proses-proses akan dijabarkan dalam Sistem Flow, Data
Flow Diagram dan Entity Relationship Diagram, struktur tabel dan perancangan
3.2.1 Sistem Flow Diagram
Sistem Flow Diagram (SFD) merupakan diagram yang menginformasikan
mengenai bagian atau urut-urutan yang terlibat pada arus informasi yang
mengalir. Sistem Flow Diagram bisa dikatakan juga merupakan bagan dari DFD
yang berfungsi untuk memetakan model lingkungan yang direpresentasikan
dengan lingkungan tunggal yang mewakili keseluruhan sistem.
Penggambaran dimulai dengan alur input, proses, terminator, aliran data,
aliran kontrol, penyimpanan dan proses tunggal yang mempresentasikan
keseluruhan sistem. Proses di bawah ini adalah proses untuk menambahkan data
pemetaan pada website. Pada proses penambahan tersebut dilakukan oleh
pengunjung yang telah melakukan registrasi pada halaman yang telah disediakan.
Jika pengujung yang tidak terdaftar maka hanya bisa melakukan pencarian,
melihat informasi mengenai perusahaan yang diinginkan sesuai dengan kategori
yang telah ditentukan pada website.
Segala proses penambahan yang dilakukan oleh pengunjung tidak lepas
dari pengamatan administrator untuk memastikan bahwa semua data yang telah
disampaikan oleh pengunjung merupakan data yang benar sehingga perusahaan
tersebut bisa ditampilkan dalam pemetaan. Apakah disetujui, ditolak ataupun
revisi, setiap keputusan yang telah dipilih oleh administrator akan
dikonfirmasikan melalui alamat email anggota yang telah didaftarkan ketika
proses registrasi sehingga proses pemetaan perusahaan bisa berjalan secara
Gambar 3.24 Proses Pemetaan Perusahaan
Gambar 3.25 Proses Master Pemetaan
Gambar 3.26 Proses Pencarian Pemetaan
Gambar 3.4 Proses Login
3.2.2 Context Diagram
Context Diagram merupakan suatu diagram yang digunakan untuk
mendesain sistem yang memberikan gambaran detil mengenai semua informasi
yang diterima ataupun dihasilkan dari suatu aktivitas. Diagram ini
internal tentang sistem/aktivitas tersebut, dan dikelilingi oleh semua proses yang
terkait dan lingkungannya. Pada contex diagram di bawah ini dijelaskan bahwa
ada 1 proses dan 2 entitas luar, yaitu entitas administrator dan anggota.
Berdasarkan proses di bawah ini dapat dijelaskan bahwa disini entitas
administrator melakukan inputan jenis usaha, kategori usaha, data kota dan data
pemetaan yang didapatkan dari member ataupun inputan dari admin sendiri.
