APLIKASI WEB GIS PEMETAAN PENYEBARAN PERUSAHAAN DI JAWA TIMUR MENGGUNAKAN GOOGLE MAPS API.

GOOGLE MAPS API

SKRIPSI

Disusun oleh :

CHANDRA ADI KURNIAWAN

NPM. 0834015021

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

JAWA TIMUR

SURABAYA

2012

Hak Cipta © milik UPN "Veteran" Jatim :

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

SURABAYA

2012

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

Dr.Ir.Ni Ketut Sari, MT NPT. 196 531 071 992 032 001

Hak Cipta © milik UPN "Veteran" Jatim :

APLIKASI WEB GIS PEMETAAN PENYEBARAN

PERUSAHAAN DI JAWA TIMUR

MENGGUNAKAN GOOGLE MAPS API

Disusun Oleh :

CHANDRA ADI KURNIAWAN

NPM. 0834015021

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 :

1. 1.

Nur Cahyo W, S.Kom, M.Kom I Gede Susrama, ST, M.Kom NPT. 3 7903 04 0197 1 NPT. 3 7006 06 0211 1

2. 2.

Ir. Sutiyono, MT Rr. Ani Dijah R, ST, M.Cs NIP. 19600713 198703 1 002 NIP. 19730512 200501 2 003

3.

Ir. Kindriari Nurma W, MT NIP. 19600228 198803 2 001 Mengetahui,

Dekan Fakultas Teknologi Industri

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

NPT. 3 7006 06 0211 1

{ }

2) Rr. Ani Dijah Rahajoe, ST, M.Cs

NIP. 19730512 200501 2 003

{ }

3) Ir. Kindriari Nurma Wahyusi, MTNIP. 19600228 198803 2 001

{ }

Mengetahui, Dosen Pembimbing Pembimbing I

Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 3 7903 04 0197 1

Pembimbing II

Ir. Sutiyono, MT NIP. 19600713 198703 1 002

Hak Cipta © milik UPN "Veteran" Jatim :

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.

ii

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

Hak Cipta © milik UPN "Veteran" Jatim :

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.

8. Segenap keluarga besar Partai Humor dan TF-Sore 2008 yang senantiasa memberikan dorongan dan semangat melalui komentar-komentar pada situs jejaring sosial.

iv ubun-ubun. ”You Are My Everythings”

10. Dan semua orang yang telah mendoakan dalam penyusun selama ini.

Hak Cipta © milik UPN "Veteran" Jatim :

ABSTRAK ... i

KATA PENGANTAR ... ii

UCAPAN TERIMA KASIH ... iii

DAFTAR ISI ... v

DAFTAR GAMBAR ... ix

DAFTAR TABEL ... xii

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ...1

1.2 Rumusan Masalah ...2

1.3 Batasan Masalah ...3

1.4 Tujuan ...3

1.5 Manfaat ...4

1.6 Metodologi Penelitian ...4

1.7 Sistematika Penulisan ...7

BAB II TINJAUAN PUSTAKA ... 9

2.1 Google Maps ...9

2.1.1 Google Maps API dan Basic Maps ...10

2.1.2 Point Maps...12

2.1.3 Line Maps ...14

2.1.4 Satellite View ...15

2.1.5 Google Direction ...16

2.2 Java Server Faces ...17

2.2.1 Controller ...19

2.2.2 Model ...23

vi

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.2.1 Basis Data Pada Aplikasi...88

Hak Cipta © milik UPN "Veteran" Jatim :

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

viii

6.2 Saran ...119

DAFTAR PUSTAKA ... 121 LAMPIRAN...122

Hak Cipta © milik UPN "Veteran" Jatim :

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

x

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.15 Halaman Tentang Kami ...94

Hak Cipta © milik UPN "Veteran" Jatim :

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

xii

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

Tabel 3.16 Struktur Tabel Galeri ...73

Hak Cipta © milik UPN "Veteran" Jatim :

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.

Terdapat beberapa kriteria yang bisa ditampilkan secara visual yaitu secara map ataupun satelit, semua fitur tersebut sudah disediakan oleh Google. Dengan adanya sistem informasi GIS ini diharapkan mempermudah dalam memperoleh informasi mengenai perusahaan yang diinginkan serta mempermudah dalam pengelolahan perusahaan yang tersebar di Jawa Timur.

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 menggunakan Google Map API.

Hak Cipta © milik UPN "Veteran" Jatim :

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 informasi yang disampaikan secara peta grafis.

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 untuk membantu menyelesaikan Tugas Akhir (TA) adalah sebagai berikut :

Hak Cipta © milik UPN "Veteran" Jatim :

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 aplikasi yang telah dibuat.

Hak Cipta © milik UPN "Veteran" Jatim :

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

Pada bab ketiga diuraikan mengenai perancangan sistem yang terdiri atas penjelasan dari analisa permasalahan, perancangan

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.

DAFTAR PUSTAKA LAMPIRAN

Hak Cipta © milik UPN "Veteran" Jatim :

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 ditampilkan dalam peta tetapi tidak semua kasus bisa ditampilkan secara jelas

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

menentukan akurasi dari lokasi yang telah dipilih, selain itu lintang / bujur untuk

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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">

html { height: 100% }

body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }

</style>

<script type="text/Javascript"

src="http://maps.Google.com/maps/api/js?sensor=false"> </script>

<script type="text/Javascript"> function initialize ) {

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);

} </script>

</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

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 :

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.

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 :

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

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 :

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 detail bagaimana JSF bekerja.

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 :

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.

<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

bagian view, pengembang akan melihat bagaimana pengikatan selesai. Sementara

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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 getExternalContext().getSessionMap().

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

mungkin pergi berikutnya setelah halaman.

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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 sebagai method aplikasi. Mereka tidak dimaksudkan untuk mengerjakan proses

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;

}

public void setLoginName(String loginName) { this.loginName = loginName;

}

public String getPassword() { return password;

}

public void setPassword(String password) { this.password = password;

} }

Gambar 2.10 Contoh Backing Bean Form Login

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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> <description>

The property that will store the user's login name </description>

<property-name>loginName</property-name> <null-value/>

</managed-property> <managed-property> <description>

The property that will store the user's password </description>

<property-name>password</property-name> <null-value/>

</managed-property> </managed-bean>

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 tag-tag yang telah Pengembang gunakan di dalam contoh-contoh yang terdahulu:

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

 <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 :

<h:commandButton action="#{loginPage.performLogin}" value="Login"/>

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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, sebuah method field text setName()).

 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

jar file disebut dengan Primefaces-{version}. Jar. Ada dua cara yang dapat

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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

untuk komponen DataExporter

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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"

xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head>

</h:head> <h:body>

<p:spinner /> </h:body></html>

( 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 aplikasi yang memberikan masukan dari pengguna yang nanti akan diolah

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

Gambar 2.15 Komponen Kalender

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

 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 digunakan untuk menampilkan gambar-gambar, seperti galeri foto. Pada

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.19 Komponen PopupDialog

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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 bagian ini meskipun menggunakan Command Button, yang sama berlaku untuk

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

setiap komponen yang mampu PPR seperti Command Link, polling, Remote Command dan lain-lain.

<h:form>

<p:commandButton update="display" />

<h:outputText id="display" value="#{bean.value}"/> </h:form>

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 perbandingan.

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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 menjaga kesinambungan perusahaan di masa yang akan datang.

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 yang lain bisa dilihat pada tabel di bawah, yang secara total bisa dilihat jumlah

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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 akan ada verifikasi akun melalui email, jika akun sudah terverifikasi maka sudah

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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 antarmuka aplikasi.

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 langsung tanpa ada hambatan sehingga informasi yang diberikan bisa dilengkapi.

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

Gambar 3.24 Proses Pemetaan Perusahaan

Pada proses selanjutnya akan menjelaskan mengenai proses yang menjelaskan mengenai proses manajemen data master yang ada pada aplikasi pemetaan. Data master ini merupakan data yang mendukung segala prosess yang ada pada aplikasi pemetaan.

Gambar 3.25 Proses Master Pemetaan

Untuk proses selanjutnya merupakan proses untuk menampilkan data pemetaan yang telah didaftarkan oleh pengguna lain ataupun administartor. Mulai dari pencarian perusahaan berdasarkan kata kunci, jenis usaha, kategori dan kota. Segala informasi yang diberikan merupakan informasi yang didapatkan dari pangguna yang telah mendaftarkan perusahaannya.

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

Gambar 3.26 Proses Pencarian Pemetaan

Untuk proses pada Gambar 3.3, merupakan proses interaksi pengunjung ke dalam aplikasi untuk melakukan login, registrasi dan lupa password. Segala proses yang ada saling berkaitan, jadi untuk pengguna yang bisa melakukan login maka harus melakukan registrasi terlebih dahulu dan jika memperoleh permasalahan username dan password bisa menggunakan fasilitas lupa password yang telah disediakan yang nanti informasinya melalui email.

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 menggambarkan sebuat sistem/aktivitas pada bagian tengah tanpa informasi

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

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.

3.2.3 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) adalah alat pembuatan model yang memungkinkan profesional sistem untuk menggambarkan sistem sebagai suatu jaringan proses fungsional yang dihubungkan satu sama lain dengan alur data, baik secara manual maupun komputerisasi. DFD ini sering disebut juga dengan nama bubble chart, bubble diagram, model process, diagram alur kerja, atau model fungsi. Selain dapat mengembangkan arus data didalam sistem dengan terstruktur dan jelas, DFD merupakan dokumentasi dari sistem yang baik.

Beberapa komponen yang digunakan dalam mendesain DFD antara lain :

a. Komponen Terminator / Entitas Luar

Terminator mewakili entitas eksternal yang berkomunikasi dengan sistem yang sedang dikembangkan. Biasanya terminator dikenal dengan nama entitas luar (external entity).

Terdapat dua jenis terminator:

1. Terminator Sumber (source) merupakan terminator yang menjadi

sumber.

2. Terminator Tujuan (sink) merupakan terminator yang menjadi tujuan data / informasi sistem.

b. Komponen Proses

Komponen proses menggambarkan bagian dari sistem yang mentransformasikan input menjadi output. Proses diberi nama untuk menjelaskan proses/kegiatan apa yang sedang/akan dilaksanakan. Pemberian nama proses dilakukan dengan menggunakan kata kerja transitif (kata kerja

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

yang membutuhkan obyek), seperti menambahkan lokasi pemetaan, mencari lokasi pemetaan dan pendaftaran anggota.

c. Komponen Data Store

Komponen ini digunakan untuk membuat model sekumpulan paket data dan diberi nama dengan kata benda jamak, misalnya Mahasiswa. Data store ini

biasanya berkaitan dengan penyimpanan-penyimpanan, seperti file atau

database yang berkaitan dengan penyimpanan secara komputerisasi.

d. Komponen DataFlow / Alur Data

Suatu data flow / alur data digambarkan dengan anak panah, yang

menunjukkan arah menuju ke dan keluar dari suatu proses. Alur data ini digunakan untuk menerangkan perpindahan data atau paket data/informasi dari satu bagian sistem ke bagian lainnya.

3.2.4 Diagram Berjenjang

Pada diagram berjenjang akan menjelaskan mengenai sebuah diagram

yang menunjukkan alur-alur proses yang terdapat di contex diagram. Yang mana

dari diagram berjenjang tersebut dapat diketahui proses-proses apa saja yang ada dalam sistem tersebut. Diagram berjenjang untuk aplikasi pemetaan perusahaan dapat dilihat pada gambar di bawah:

Lanjutan Tabel 5.7 Pengujian Monitoring Permintaan Pemetaan Kasus dan Hasil Uji (Data Salah)

Data Masukan Yang diharapkan Pengamatan Hasil

Memilih salah satu perusahaan baru yang didaftarkan oleh member, yaitu: PT Traspac. Melakukan proses Revisi dan melakukan proses dengan mengabaikan keterangan

Ketika melakukan proses revisi dan mengabaikan tidak mengisi keterangan maka muncul pesan error keterangan wajib diisi dan proses tidak dapat dilanjutkan.

Muncul

pemberitahuan ketika keterangan tidak diisi dan proses tidak dilanjutkan

Diterima

Pada lanjutan Tabel 5.7 diatas pada prinsipnya melakukan pengujian terhadap monitoring pemetaan dengan memberlakukan aplikasi diluar data normal, sehingga pada hasil akhirnya diharapkan permasalahan tersebut bisa dikenali oleh sistem dan memberikan informasi kesalahan yang telah dilakukan oleh pengguna.

5.4.7 Pengujian Memanajemen Perusahaan Oleh Anggota

Setelah permintaan pementaan perusahaan perusahaan telah disetujui oleh administrator maka langkah selanjutnya member bisa memberikan informasi yang lebih jelas lagi mengenai perusahaan tersebut, hal itulah yang menjadi pertimbangan pengujian manajemen perusahaan.Pada menu menajemen perusahaan, member bisa mengelolah peta tersebut pada aplikasi dan mengenai informasi tambahan member bisa mengelolah semua itu.

Tabel 5.9 Pengujian Menajemen Perusahaan Kasus dan Hasil Uji (Data Normal)

Data Masukan Yang diharapkan Pengamatan Hasil

MemilihPerusahaan PT Bambang Jaya. Tab Cabang:

Bambang Sentosa, Jaya Makmur.

Tab Galeri:

Upload foto-foto event perusahaan

Jika pengisian data sudah lengkap maka semua data cabang dan foto yang telah diisikan akan berhasil tersimpan dalam database sistem. Dan muncul pesan berhasil upload atau tersimpan dalam database

Semua data tersimpan dalam database dan muncul pesan bahwa data telah berhasil

tersimpan

Diterima

Melakukan perubahan data perusahaan PT Bambang Jaya. Tab Hasil Usaha: accu/ aki/ batery HONDA TIGER/ NOUVO YAMAHA Trafo SINTRA

Ketika menambahkan informasi mengenai hasil usaha dengan mengisikan data informasi secara lengkap maka data akan berhasil tersimpan dan akan muncul pesan bahwa data tersebut telah berhasil tersimpan

Data tersimpan pada database dan muncul pesan berhasil tersimpan

Diterima

Kasus dan Hasil Uji (Data Salah)

Data Masukan Yang diharapkan Pengamatan Hasil

Memilih Perusahaan: PT Sevima.

Tab Galeri:

Upload file format pdf, doc dan exe

Ketika proses upload data tidak akan berhasil tersimpan karena file format bukan jpg, png dan gif. Akan muncul pesan error kesalahan format gambar

File upload tidak berhasil

tersimpan dan muncul pesan error kesalahan format gambar

Diterima

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

5.5 Evaluasi

Hasil evaluasi dari uji coba terhadap aplikasi pemetaan yang telah dilakukan membuktikan bahwa aplikasi yang telah dibuat dapat berjalan dengan baik sesuai dengan fungsinya masing-masing. Disini semua data yang ditampilkan pada aplikasi sesuai dengan data yang ada pada database dan untuk peta atau tampilan grafisnya sesuai dengan yang ditampilkan 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.

Ketika pengunjung melakukan registrasi atau melakukan penambahan lokasi pemetaan oleh pengunjung yang sudah terdaftar pada sistem, masih dipastikan bahwa kesalahan entri atau kurang teliti dalam mengisikan sering sekali terjadi, sehingga penanganan untuk permasalahan itu telah penulis antisipasi dengan pemberitahuan semacam message dialog.

BAB VI

PENUTUP

6.1 Kesimpulan

Kesimpulan yang dapat diambil dari pembuatan aplikasi pemetaan perusahaan di Jawa Timur adalah sebagai berikut:

a. Pemetaan dilakukan dengan mengisikan data nama-nama perusahaan yang diisikan oleh anggota atau admin sesuai dengan kategori perusahaan, yang bersifat data tabel lalu dengan Google Maps API data tersebut diubah menjadi data grafis yang dikelolah secara bersamaan dalam bentuk peta. b. Proses verifikasi data pada perusahaan yang telah didaftarkan menjadi

sangat penting agar data pemetaan menjadi valid sehingga hal tersebut akan mempengaruhi kualitas data yang disajikan.

c. Untuk menampilkan informasi secara efektif dan mudah dimengerti oleh pengguna maka informasi yang disampaikan selain data tabel diimbangi dengan informasi bersifat grafis / gambar, yang pada hal ini informasi perusahaan ditampilkan dalam bentuk peta sesuai dengan lokasi.

6.2 Saran

Adapun saran-saran yang dapat digunakan untuk mengembangkan aplikasi yang telah dibuat adalah sebagai berikut :

a. Pada tahap pengembahan yang lebih lanjut guna mengoptimalkan penggunaan Google Map API agar ditambahkan fitur pentunjuk arah atau

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :

disebut juga dengan Google Direction yang memungkinkan untuk memberikan informasi jalur terdekat pada lokasi perusahaan tertentu. b. Untuk mengantisipasi pemetaan perusahaan yang sudah gulung tikar /

bangkrut, bisa dilakukan pengecekan akun secara berkala untuk mencari informasi masih aktifnya perusahaan yang telah dipetakan.

DAFTAR PUSTAKA

- Cagatay Civici.2011.Primefaces User’s Guide 3.2.Turkey

- Dinas Komunikasi dan Informatika Jawa Timur.2009.Media Jatim Menuju E-Government. URL: http://www.jatimprov.go.id, diakses tanggal 20 Maret 2012 pukul 11:20 WIB

- Eric Jendrock, Chinmayee Srivathsa.2010. The Java EE 6 Tutorial Basic Concept Fourth Edition. RedwoodCity,CA94065 U.S.A

- Firmansyah.2011.Belajar Google Maps API. URL: http://firmansyah.web.id/ belajar-google-maps-api-javascript-bag-1.html, diakses tanggal 15 Januari 2012 pukul 14:25 WIB

- Google Corp.2012.Google Maps API.URL:https://developers.google.com/ maps.diakses tanggal 10 Januari 2012 pukul 10:15 WIB

- Primefaces Corp.2011.Primefaces ShowCase.URL:http://www.primefaces.org ,diakses tanggal 4 Januari 2012 pukul 20:00 WIB

Hak Cipta © milik UPN "Veteran" Jatim :

Dilarang mengutip sebagian atau seluruh kHak Cipta © milik UPN "Veteran" Jatim :