APLIKASI INFORMASI WISATA DAN HOTEL DI KABUPATEN … filei APLIKASI INFORMASI WISATA DAN HOTEL DI...

i

APLIKASI INFORMASI WISATA DAN HOTEL

DI KABUPATEN TABANAN DENGAN

GOOGLE MAP API

HALAMAN UTAMA

SKRIPSI

Diajukan Untuk Memenuhi Syarat

Memperoleh Gelar Sarjana Komputer

Program Studi Teknik Informatika

Disusun Oleh :

Agustinus Nyoman Mariadi Saputra

125314043

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS SANATA DHARMA

YOGYAKARTA

2017

PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI

ii

APPLICATION TRAVEL AND HOTEL

INFORMATION IN THE DISTRICT TABANAN

WITH GOOGLE MAPS API

HALAMAN UTAMA

A Thesis

Presented as Partial Fulfillment of the Requirements

To Obtain the Sarjana Komputer Degree

in Informatics Engineering Study Program

Created By :

Agustinus Nyoman Mariadi Saputra

125314043

INFORMATICS ENGINEERING STUDY PROGRAM

DEPARTMENT OF INFORMATICS ENGINEERING

FACULTY OF SCIENCE AND TECHNOLOGY

SANATA DHARMA UNIVERSITY

YOGYAKARTA

2017


iii

HALAMAN PERSETUJUAN


iv

HALAMAN PENGESAHAN SKRIPSI


v

MOTO

“Jika orang berpegang pada keyakinan, maka hilanglah kesangsian.

Tetapi, jika orang sudah mulai berpegang pada kesangsian, maka

hilanglah keyakinan.”

(Sir Francis Bacon)

#SingPentingYakin


vi

HALAMAN PERSEMBAHAN

Kupersembahkan kripsi ini untuk :

1. Tuhan Yesus Kristus yang senantiasa memberikan berkat

karunia-Nya.

2. Orangtuaku, Emmanuel Ketut Mardiasa dan Paulina WY

Suwartini yang tak lelah berjuang memberikan dukungan

moral maupun materiil sampai saat ini dengan penuh kasih

sayang dan cinta kasihnya.

3. Kakakku Enny dan Maya yang selalu memberikan motivasi,

semangat dan doa.

4. Para sahabatku yang saling memberi semangat untuk

menyelesaikan skripsi.


vii

PERNYATAAN KEASLIAN KARYA


viii

LEMBAR PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK

KEPENTINGAN AKADEMIS


ix

ABSTRAK

Pariwisata merupakan bagian yang tidak terpisahkan dari kehidupan manusia

terutama menyangkut kegiatan sosial dan ekonomi. Bali khususnya kabupaten

Tabanan merupakan salah satu daerah yang memiliki banyak keindahan alam serta

memiliki keanekaragaman seni budaya yang dapat menarik minat wisatawan lokal

maupun mancanegara. Permasalahannya adalah kurangnya informasi mengenai

obyek wisata yang ada di kabupaten Tabanan sehingga wisatawan kesulitan untuk

menentukan akan berkunjung ke obyek wisata yang diinginkan.

Berdasarkan permasalahan diatas maka diperlukan aplikasi yang dapat

memberikan informasi mengenai obyek wisata dan hotel yang terintegrasi dengan

Google map. Aplikasi ini menggunakan fasilitas Google Map (Google Maps API)

untuk memberikan gambaran lokasi dari obyek wisata dan hotel.

Hasil akhir yang diperoleh adalah sebuah aplikasi informasi wisata dan hotel

di kabupaten Tabanan dengan Google Maps API. Aplikasi ini dapat menampilkan

informasi dari obyek wisata dan hotel yang ada di kabupaten Tabanan dan dapat

menampilkan rute untuk mencapai lokasi tersebut.

Kata kunci: Wisata, Tabanan, Google Maps API.


x

ABSTRACT

Tourism is a part of the activities that cant not connection with social and

economic activities. Bali especially Tabanan is one of the regencies in Bali that has

many natural beauty, arts, and cultural diversity and attracks both domestic and

international tourist to come there the problem is lack of tourists find the difficulty

to dertermie to visit the desired place.

Based on the problems above then the application is requied that can inform

us about tourist a’ttractions and hotels integrated with Google a binder. This

application uses facilities Google Maps ( Google Maps API ) to give a description of

the location of tourist attractions and hotels.

The final results obtained are an application tourist information and hotels in

Tabanan with Google Maps API. The application displays both the information of

the tourist destination, hotels and the route to reach the location.

Key : Tourism, Tabanan, Google Maps API


xi

KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Tuhan Yesus Kristus, yang telah

memeberikan rahmat dan karunia yang berlimpah sehingga penulis dapat

menyelesaikan tugas akhir yang berjudul Aplikasi Informasi Wisata dan Hotel di

Kabupaten Tabanan dengan Google Maps API dengan baik. Sebagaimana

disyaratkan dalam Kurikulum Program Studi Teknik Informatika (TI), Fakultas

Sains dan Teknologi (FST), Universitas Sanata Dharma (USD) Yogyakarta.

Penulis menyadari bahwa pada saat penulisan dan pengerjaan tugas akhir ini

penulis menyadari bahwa mendapatkan banyak sekali bantuan dari berbagai pihak,

baik berupa dukungan, perhatian, kritik dan saran, serta doa yang sangat dibutuhkan

penulis guna kelancaran pengerjaan dan mendapatkan hasil yang baik. Pada

kesempatan ini secara khusus penulis akan menyampaikan terimakasih kepada :

1. Sudi Mungkasi, S.Si., M.Math.Sc., Ph.D. selaku Dekan Fakultas Sains dan

Teknologi Universitas Sanata Dharma Yogyakarta

2. Dr. Anastasia Rita Widiarti, M.Kom. selaku Ketua Program Studi Teknik

Informatika yang selalu memberikan dukungan dan perhartian serta saran

kepada mahasiswa tugas akhir dalam pengerjaan tugas akhir.

3. Drs. Haris Sriwindono M.Kom selaku dosen pembimbing tugas akhir yang telah

dengan sabar dan penuh perhatian membimbing penulis dalam penyususnan

tugas akhir mulai dari awal pengerjaan, pertengahan dan pada akhir penulisan.

4. Bapak Ali Mustopa yang telah memberikan bimbingan, pengajaran, dan

bersedia memberi ilmunya dalam pengerjaan tugas akhir ini, serta dengan sabar

memberikan pelajaran dalam pembuatan program tugas akhir ini.

5. Segenap dosen Program Studi Teknik Informatika Sanata Dharma yang dengan

penuh dedikasi mendidik, membimbing, memberikan dukungan, bantuan, dan

arahan yang sangat bermanfaat dari awal kuliah sampai selesai.

6. Kedua orang tua, Bapak Emmanuel Ketut Mardiasa dan Ibu Paulina WY

Suwartini yang telah memberikan cinta, doa, dan dukungan baik secara moral

maupun material bagi penulis selama menjalani masa perkuliahan sampai

selesai ini.


xii

7. Kakakku, Enny dan Maya yang sudah memberikan dukungan, doa, dan


xiii

DAFTAR ISI

HALAMAN PERSETUJUAN................................................................................... iii

HALAMAN PENGESAHAN SKRIPSI.................................................................... iii

MOTO ......................................................................................................................... v

HALAMAN PERSEMBAHAN ................................................................................ vi

PERNYATAAN KEASLIAN KARYA ................................................................... vii

LEMBAR PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK

KEPENTINGAN AKADEMIS ............................................................................... viii

ABSTRAK ................................................................................................................. ix

ABSTRACT ................................................................................................................ x

KATA PENGANTAR ............................................................................................... xi

DAFTAR ISI ............................................................................................................ xiii

DAFTAR GAMBAR ............................................................................................... xvi

DAFTAR TABEL .................................................................................................... xix

BAB I .......................................................................................................................... 1

1.1 Latar Belakang ............................................................................................ 1

1.2 Rumusan Masalah ....................................................................................... 2

1.3 Tujuan Penelitian ........................................................................................ 2

1.4 Batasan Masalah .......................................................................................... 2

1.5 Metode Penelitian ........................................................................................ 3

1.6 Sistematika Penulisan ................................................................................. 3

BAB II ......................................................................................................................... 4

2.1 Sistem Informasi Berbasis Web ................................................................. 4

2.1.1 Sistem ..................................................................................................... 4

2.1.2 Informasi ................................................................................................ 5

2.1.3 Pengertian Sistem Informasi ................................................................ 6

2.1.4 Pengertian Sistem Informasi Berbasis Web ....................................... 7

2.2 Sistem Informasi Geografis ........................................................................ 7

2.2.1 Definisi Geografis .................................................................................. 7

2.2.2 Definisi Sistem Informasi Geografis .................................................... 7

2.2.3 Model Data Dalam Sistem Informasi Geografis ................................. 8


xiv

2.2.4 Cara Kerja Sistem Informasi Geografis ............................................. 9

2.2.5 Sub Sistem Informasi Geografis ........................................................ 10

2.3 Peta ............................................................................................................. 11

2.3.1 Pengertian Peta .................................................................................... 11

2.3.2 Komponen Peta .................................................................................... 11

2.4 Sistem Koordinat dan Proyeksi Peta ....................................................... 12

2.4.1 Proyeksi Peta ........................................................................................ 12

2.4.2 Sistem Koordinat ................................................................................. 14

2.5 Google Maps .............................................................................................. 18

2.6 Google Map API ........................................................................................ 20

2.6.1 Layanan-Layanan Google Maps API ................................................ 22

2.6.2 API Key ................................................................................................. 23

2.7 Google Maps Distance Matrix API .......................................................... 25

2.7.1 Parameter yang Dapat Digunakan pada Google Maps Distance

Matrix API ................................................................................................... 25

2.8 Metode pengembangan Sistem Sekuiensial Linier (Waterfall Model) . 27

2.8.1 Perencanaan atau Rekayasa dan Pemodelan Sistem ....................... 27

2.8.2 Analisa Kebutuhan Sistem ................................................................. 27

2.8.3 Desain ................................................................................................... 27

2.8.4 Kode ................................................................................................... 33

2.8.5 Pengujian .............................................................................................. 33

2.8.6 Pemeliharaan ....................................................................................... 33

2.9 Internet ....................................................................................................... 33

2.10 Browser ....................................................................................................... 34

2.11 World Wide Web (WWW) ......................................................................... 34

2.12 Web Server ................................................................................................. 34

2.13 Heyper Text Transfer Protokol (HTTP) ................................................... 34

2.14 PHP ............................................................................................................. 34

2.13.1 Pengertian PHP ................................................................................... 34

2.13.2 Struktur Penulisan .............................................................................. 35

2.15 Javascript .................................................................................................... 36

2.16 Pingendo ..................................................................................................... 37

2.17 Wisata ......................................................................................................... 37

BAB III ..................................................................................................................... 38

3.1 Analisa Kebutuhan .................................................................................... 38


xv

3.1.1 Deskripsi Saat Ini ................................................................................ 38

3.1.2 Deskripsi Sistem yang Akan Dibangun ............................................. 38

3.2 Perancangan Logikal ................................................................................ 50

3.2.1 Diagram Konteks ................................................................................. 50

3.2.2 Diagram Berjenjang ............................................................................ 51

3.2.3 Data Flow Diagram (DFD) .................................................................. 52

3.2.4 Entity Relational Diagram (ERD) ....................................................... 55

3.2.5 Rancangan Logikal .............................................................................. 56

3.2.6 Rancangan Fisikal ............................................................................... 56

3.2.7 Perancangan Antar Muka Pengguna ................................................ 59

BAB IV ..................................................................................................................... 68

4.1 Spesifikasi Perangkat Keras dan Perangkat Lunak .............................. 68

4.2 Implementasi .............................................................................................. 68

4.2.1 Implementasi Basis Data ..................................................................... 68

4.2.2 Implementasi Sistem ........................................................................... 70

4.3 Pengujian .................................................................................................. 102

4.3.1 Hasil Pengujian .................................................................................. 102

4.3.2 Kesimpulan Hasil Pengujian Test ................................................ 104

4.4 Analisa Hasil Uji Perangkat Lunak ....................................................... 104

BAB V .................................................................................................................... 106

5.1 Kesimpulan .............................................................................................. 106

5.2 Saran ......................................................................................................... 106

DAFTAR PUSTAKA ............................................................................................. 107


xvi

DAFTAR GAMBAR

Gambar 2. 1 Proses Pengolahan Data. ........................................................................ 5

Gambar 2. 2 Proyeksi Peta Azimuthal. ..................................................................... 13

Gambar 2. 3 Proyeksi Peta Silinder. ......................................................................... 14

Gambar 2. 4 Proyeksi Peta Kerucut .......................................................................... 14

Gambar 2. 5 Sistem Koordinat Kartesian 2d ............................................................ 15

Gambar 2. 6 Proyeksi Longitude Latitude. ............................................................... 17

Gambar 2. 7 Proyeksi Longitude Dan Latitude Untuk Negara Didunia. .................. 17

Gambar 2. 8 Peta Pada Google Maps. ...................................................................... 18

Gambar 2. 9 Tampilan Peta Pada Satelit Map. ......................................................... 19

Gambar 2. 10 Tampilan Peta Terrain Maps. ............................................................. 19

Gambar 2. 11 Tampilan Earth Map. ......................................................................... 20

Gambar 2. 12 Kode Program Dasar Google Maps Api. ........................................... 21

Gambar 2. 13 Tombol Get Api Key.......................................................................... 23

Gambar 2. 14 Pilih Create New Project. ................................................................... 23

Gambar 2. 15 Kustomisasi Project............................................................................ 24

Gambar 2. 16 Google Api Siap Digunakan. ............................................................ 24

Gambar 2. 17 Menyisipkan Script Masp Google Key. ............................................. 24

Gambar 2. 18 Simbol Entity. .................................................................................... 29

Gambar 2. 19 Simbol Relational. .............................................................................. 29

Gambar 2. 20 Simbol Property. ................................................................................ 29

Gambar 2. 21 Simbul Proses. .................................................................................... 31

Gambar 2. 22 Simbul Aliran Data. ........................................................................... 31

Gambar 2. 23 Simbul Penyimpanan Data. ................................................................ 31

Gambar 2. 24 Simbul External Entity. ...................................................................... 32

Gambar 2. 25 Simbul Use Case. ............................................................................... 32

Gambar 2. 26 Simbul Aktor ...................................................................................... 32

Gambar 2. 27 Waterfall Model Menurut (Pressman, 2003). .................................... 33

Gambar 3. 1 Use-Case Diagram Untuk Pengunjung. ............................................... 39

Gambar 3. 2 Use-Case Diagram Untuk Pengelola.................................................... 40


xvii

Gambar 3. 3 Use-Case Diagram Untuk Admin. ....................................................... 40

Gambar 3. 4 Diagram Konteks Sistem Rekomendasi Rute Kunjungan Wisata Di

Kabupaten Tabanan. ......................................................................................... 50

Gambar 3. 5 Diagram Berjenjang Sistem Rekomendasi Rute Kunjungan Wisata Di


Gambar 3. 6 Data Flow Diagram Pengunjung Sistem Rekomendasi Rute Kunjungan

Wisata Di Kabupaten Tabanan. ........................................................................ 52

Gambar 3. 7 Data Flow Diagram Pengelola Sistem Rekomendasi Rute Kunjungan


Gambar 3. 8 Data Flow Diagram Admin Sistem Rekomendasi Rute Kunjungan


Gambar 3. 9 Data Flow Diagram Level 2 Pengelola Kelola Wisata Sistem

Rekomendasi Rute Kunjungan Wisata Di Kabupaten Tabanan. ...................... 53

Gambar 3. 10 Data Flow Diagram Level 2 Pengelola Kelola Penginapan Sistem

Rekomendasi Rute Kunjungan Wisata Di Kabupaten Tabanan. ...................... 54

Gambar 3. 11 Entity Relationalship Diagram Sistem Rekomendasi Rute Kunjungan


Gambar 3. 12 Logikal Desain Sistem Rekomendasi Rute Kunjungan Wisata Di


Gambar 3. 13 Halaman Login Admin....................................................................... 59

Gambar 3. 14 Halaman Utama Admin. .................................................................... 59

Gambar 3. 15 Halaman Hapus Data Wisata. ............................................................ 60

Gambar 3. 16 Halaman Hapus Data Hotel................................................................ 60

Gambar 3. 17 Halaman Login Pengelola. ................................................................. 61

Gambar 3. 18 Halaman Utama Pengelola ................................................................. 61

Gambar 3. 19 Halaman Tambah Data Obyek Wisata. .............................................. 62

Gambar 3. 20 Halaman Edit Data Obyek Wisata. .................................................... 62

Gambar 3. 21 Halaman Hapus Data Obyek Wisata. ................................................. 63

Gambar 3. 22 Halaman Tambah Data Hotel. ............................................................ 63

Gambar 3. 23 Halaman Edit Data Hotel. .................................................................. 64



xviii

Gambar 3. 25 Halaman Utama.................................................................................. 65

Gambar 3. 26 Halaman Pendaftaran Pengelola. ....................................................... 65

Gambar 3. 27 Halaman Cari Wisata. ........................................................................ 66

Gambar 3. 28 Halaman Cari Rekomendasi Rute Wisata. ......................................... 66

Gambar 3. 29 Halaman Cari Hotel. .......................................................................... 67

Gambar 4. 1 Halaman Login Admin......................................................................... 70

Gambar 4. 2 Halaman Utama Admin. ...................................................................... 71

Gambar 4. 3 Halaman Hapus Data Wisata. .............................................................. 71

Gambar 4. 4 Halaman Hapus Data Hotel. ................................................................. 73

Gambar 4. 5 Halaman Login Pengelola .................................................................... 75

Gambar 4. 6 Halaman Utama Pengelola ................................................................... 76

Gambar 4. 7 Halaman Daftar Wisata. ....................................................................... 76

Gambar 4. 8 Halaman Tambah Gambar Wisata. ...................................................... 79

Gambar 4. 9 Halaman Edit Data Wisata ................................................................... 80

Gambar 4. 10 Halaman Form Edit Data Wisata. ...................................................... 81

Gambar 4. 11 Halaman Hapus Data Wisata. ............................................................ 83

Gambar 4. 12 Halaman Daftar Hotel. ....................................................................... 84

Gambar 4. 13 Halaman Edit Data Hotel. .................................................................. 87

Gambar 4. 14 Halaman Form Edit Data Hotel. ........................................................ 88


Gambar 4. 16 Halaman Utama Sistem. ..................................................................... 90

Gambar 4. 17 Halaman Daftar Pengelola ................................................................. 90

Gambar 4. 18 Halaman Cari Obyek Wisata. ............................................................. 92

Gambar 4. 19 Halaman Rekomendasi Rute Wisata. ................................................. 98

Gambar 4. 20 Tampilan User Memilih Obyek Wisata. ............................................ 98

Gambar 4. 21 Tampilan Rekomendasi Rute. ............................................................ 99

Gambar 4. 22 Halaman Cari Hotel. .......................................................................... 99


xix

DAFTAR TABEL

Tabel 3. 1 Narasi Use Case Cari Obyek Wisata. ...................................................... 41

Tabel 3. 2 Narasi Use Case Cari Rute Tempat Wisata ............................................. 41

Tabel 3. 3 Narasi Use Case Mencari Penginapan. .................................................... 42

Tabel 3. 4 Narasi Use Case Cari Penginapan Berdasarkan Kategori ....................... 42

Tabel 3. 5 Narasi Use Case Pendaftara Pengelola. .................................................. 43

Tabel 3. 6 Narasi Use Case Login Pengelola .......................................................... 43

Tabel 3. 7 Narasi Use Case Tambah Data Wisata .................................................... 44

Tabel 3. 8 Narasi Use Case Edit Data Obyek Wisata. .............................................. 44

Tabel 3. 9 Narasi Use Case Hapus Data Wisata. ...................................................... 45

Tabel 3. 10 Narasi Use Case Tambah Penginapan. .................................................. 46

Tabel 3. 11 Narasi Use Case Edit Data Penginapan. ................................................ 46

Tabel 3. 12 Narasi Use Case Hapus Data Penginapan. ............................................ 47

Tabel 3. 13 Narasi Use Case Logout Pengelola. ...................................................... 47

Tabel 3. 14 Narasi Use Case Login Admin. ............................................................. 48

Tabel 3. 15 Narasi Use Case Hapus Data Wisata .................................................... 48

Tabel 3. 16 Narasiuse Case Hapus Data Penginapan ............................................... 49

Tabel 3. 17 Narasi Logout Admin. ........................................................................... 49

Tabel 3. 18 Tabel Data Wisata. ................................................................................. 56

Tabel 3. 19 Tabel Data Hotel. ................................................................................... 57

Tabel 3. 20 Tabel Data Pengelola. ............................................................................ 57

Tabel 3. 21 Tabel Data Admin. ................................................................................. 58

Tabel 3. 22 Tabel Data Gambar Wisata. ................................................................... 58

Tabel 3. 23 Tabel Data Gambar Hotel. ..................................................................... 58

Tabel 4. 1 Pengujian Login. .................................................................................... 102

Tabel 4. 2 Pengujian Tambah, Edit, Hapus, Cari Data. .......................................... 103


1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Pariwisata merupakan bagian yang tidak terpisahkan dari kehidupan

manusia terutama menyangkut kegiatan sosial dan ekonomi. Banyaknya

wisatawan mancanegara yang berkunjung ke Indonesia menjadikan sektor

pariwisata sebagai salah satu sumber pendapatan terbesar negara.

Bali khususnya kabupaten Tabanan merupakan salah satu daerah di

Indonesia yang memiliki banyak keindahan alam serta memiliki

keanekaragaman seni yang dapat menarik minat wisatawan lokal maupun

mancanegara. Obyek wisata yang dapat di kunjungi di kabupaten Tabanan

antara Lain obyek wisata pegunungan, wisata laut, wisata rohani, dan lain-

lain. Namun sebagian besar wisatawan yang berkunjung ke Bali kurang

begitu mengetahui obyek wisata yang ada di kabupaten Tabanan, karena

jarak dari satu tempat ke tempat yang lain sangat jauh dan informasi

mengenai wisata yang ada di kabupaten Tabanan cukup terbatas.

Karena terbatasnya waktu yang dimiliki oleh wisatawan untuk

berlibur, biasanya mereka akan memilih tempat wisata yang sudah pernah di

kunjungi atau mereka hanya berkunjung ke tempat yang jaraknya tidak

terlalu jauh dengan lokasi mereka sekarang atau menginap. Karena

terbatasnya waktu yang dimiliki wisatawan tersebut tidak jarang wisatawan

merasa kurang puas dengan kunjungan liburan mereka.

Berdasarkan uraian diatas maka peneliti tertarik untuk membuat

sebuah aplikasi dimana menampilkan informasi dari tempat wisata dan hotel.

Sistem ini terintegrasi dengan Google Maps API untuk menampilkan output

dari lokasi obyek wisata maupun hotel dalam bentuk titik lokasi maupun rute

menuju lokasi tersebut.


2

Agar sistem ini lebih mudah diakses, maka sistem ini dibuat dengan

berbasis web. Dengan berbasis web, maka sistem ini dapat diakses dimana

saja dan kapan saja. Pengimplementasian dari sistem berbasis web ini

menggunakan aplikasi XAMPP dan bahasa pemrograman PHP. Sistem ini

diharapkan dapat membantu wisatawan dalam menampilkan informasi

wisata dan hotel yang ada di kabupaten Tabanan.

1.2 Rumusan Masalah

Permasalahan yang ada pada penelitian ini adalah bagaimana menyediakan

informasi wisata dan hotel berbasis web yang terintegrasi dengan Google

Map bagi para wisatawan.

1.3 Tujuan Penelitian

Penelitian ini bertujuan untuk membangun sebuah aplikasi informasi

berbasis web yang terintegrasi dengan Google map API.

1.4 Batasan Masalah

Pada penelitian ini terdapat batasan-batasan masalah yang terdiri dari :

1. Sistem yang dibuat hanya mencangkup obyek wisata dan hotel yang ada

di daerah kabupaten Tabanan.

2. Informasi obyek wisata meliputi nama obyek wisata, biaya masuk,

alamat, no telepon, letak koordinat, dan deskripsi singkat.

3. Informasi Hotel meliputi nama hotel, alamat, kategori, no telepon, letak

koordinat, keterangan singkat,dan biaya yang terendah per malam.

4. Tempat wisata yang di pilih oleh pengunjung saat mencari rute dibatasi

maksimal 5 lokasi.


3

1.5 Metode Penelitian

Metode yang digunakan dalam pengembangan sistem ini adalah

metode Waterfall yang terdiri dari 6 tahap yaitu :

1. Analisa Sistem.

2. Analisa Kebutuhan.

3. Perancangan (Desain).

4. Penulisan Program (Coding)

5. Pengujian (Testing).

6. Pemeliharaan

1.6 Sistematika Penulisan

Sistematika penulisan yang digunakan untuk menyelesaikan laporan

tugas akhir ini sebagai berikut :

BAB I : PENDAHULUAN

Bab ini berisikan latar belakang, rumusan masalah,

tujuan penelitian, batasan masalah, metode penelitian, dan

sistematika penulisan.

BAB II : LANDASAN TEORI

Bab ini, penulis akan membahas tentang bagaimana

landasan teori yang digunakan mendisain pembuatan sistem.

BAB III : ANALISA DAN PERANCANGAN SISTEM

Bab ini, penulis akan membahas penjelasan mengenai

rancangan sistem yang akan dibuat.

BAB IV : IMPLEMENTASI SISTEM

Bab ini, membahas tentang bagaimana hasil dari

pengujian sistem yang telah dibuat.

BAB V : PENUTUP

Bab ini, berisi kesimpulan dari penulis, kemudian

memberikan saran untuk mengembangkan sistem yang telah

dibuat.


4

BAB II

LANDASAN TEORI

Dalam membangun aplikasi informasi wisata dan hotel di kabupaten

Tabanan ini, dibutuhkan pemahaman dan landasan teori yang berhubungan dengan

sistem yang akan dibangun agar memudahkan dalam membangun sistem.

2.1 Sistem Informasi Berbasis Web

2.1.1 Sistem

Sistem adalah suatu kesatuan yang terdiri dari dua atau lebih

komponen atau subsistem yang berinteraksi satu samalain untuk

mencapai suatu tujuan.Suatu sistem dapat terdiri dari sistem-sistem

bagian (subsystem) (Jogiyanto, 1999).

Suatu system mempunyai beberapa karakteristik system yaitu :

1. Komponen/elemen

Suatu sistem terdiri dari sejumlah komponen yang saling

berhubungan, yang artinya saling bekerja sama membentuk

suatu kesatuan.komponen-komponen sistem ini bias berupa

suatu subsistem atau bagian dari sistem tersebut.

2. Batas Sistem

Batasan sistem adalah daerah yang membatasi antara satu

system dengan sistem yang lainnya. Batasan sistem ini

memungkinkan suatu sistem dipandang sebagai kesatuan.

3. Lingkungan Sistem

Apapun yang ada diluar batasan sistem yang mempengaruhi

orasional sistem tersebut.

4. Penghubung Sistem

Merupakan media pengubung atara satu sub sistem dengan

sub sistem lainnya.


5

5. Masukan Energi yang dimasukkan ke dalam sistem.Masukan

tersebut dapat berupa masukan perawatan dan masukan

sinyal.

6. Pengolahan

Suatu sistem mempunyai bagian pengolahan atau sistem

tersebut yang menjadi pengolahannya sendiri. Pengolahan

akan merubah masukan menjadi keluaran.

7. Keluaran

Hasil dari energi yang diolah oleh sistem sehingga menjadi

keluaran yang berguna.

8. Sasaran Sistem

Sistem dikatakan berhasil jika sistem tersebut berhasil

mengenai target atau sasaran yang sudah ditentukan.

2.1.2 Informasi

Informasi adalah data yang dikelola menjadi bentuk yang lebih

berguna dan lebih berarti bagi yang menerimannya (Jogiyanto,2001).

Sumber informasi didapat dari sebuah data. Agar menjadi informasi

yang berguna, data perlu melalui beberapa proses. Berikut adalah

proses pengolahan data.

Gambar 2. 1 Proses Pengolahan Data.

Kualitas informasi juga tergantung pada tiga hal, yaitu sebuah

informasi harus akurat, tepat pada waktunya, dan relevan.


6

1. Akurat

Berarti informasi harus bebas dari kesalahan dan tidak

menyesatkan.

2. Tepat pada waktunya

Informasi yang datang pada penerima tidak boleh terlambat.

3. Relevan

Informasi harus mempunyai manfaat bagi penerima.

2.1.3 Pengertian Sistem Informasi

Sistem informasi adalah sekumpulan komponen yang

mempunyai fungsi berbeda-beda, saling berinteraksi dan bekerja

sama untuk menghasilkan tujuan yang sama(Jugiyanto, 1999).

Sistem informasi terdiri dari komponen-komponen yang disebut

dengan istilah blok bangunan (building block), yaitu :

1. Blok masukan (input blok) yang mewakili data yang masuk ke

dalam sistem informasi.

2. Blok model (model block) yang terdiri dari prosedur, logikal dan

model matematik yang akan memanipulasi data input.

3. Blok keluaran (output block) yang merupakan produk dari sistem

informasi yang mencangkup informasi yang berkualitas.

4. Blok teknologi (technology block) digunakan untuk menerima

masukan, menjalankan model dan mengirimkan keluaran dan

membantu pengendalian dari suatu sistem keseluruhan.

5. Blok dasar data (database block) yaitu kumpulan dari data yang

berhubungan satu samalain, tersimpan di perangkat keras

computer dan digunakan pada perangkat lunak.

6. Blok kendali (control block) yang ditunjukan agar sistem dapat

berjalan sesuai dengan yang diinginkan.

Semua blok tersebut saling berinteraksi membentuk satu kesatuan

untuk mencapai sasarannya.


7

2.1.4 Pengertian Sistem Informasi Berbasis Web

Sistem informasi berbasis web adalah sebuah sistem

informasi yang menggunakan teknologi web atau internet untuk

memberikan informasi dan layanan kepada pengguna atau sistem lain

/ aplikasi lain (Agustinus, 2013).

Sebuah sistem informasi web biasanya terdiri dari satu atau

lebih aplikasi web yang masing-masing komponen mempunyai

fungsi tertentu. Dimana masing-masing komponen tersebut saling

dukung satu dengan yang lain guna mencapai fungsi Sistem

Informasi berbasis Web secara umum. Karena berbasis web, syarat

pertama tentu harus ada sebuah web server. Saat ini web server yang

paling dikenal adalah Apache web server. Hal lain yang juga menjadi

syarat mutlak adalah Software Pemrograman web. Harus ada sebuah

bahasa pemrograman web sebagai pendamping HTML (Hyper Text

Markup Language). Salah satu yang terkenal yang paling populer

adalah PHP. Dan yang terpenting juga adalah database untuk

menyimpan dan memanajemen data. Database yang digunakan harus

mampu menangani berjuta-juta data dan dapat diakses dengan cepat.

Salah satu database yang direkomendasikan adalah Oracle atau

MySQL.

2.2 Sistem Informasi Geografis

2.2.1 Definisi Geografis

Geografi selalu ingin menjelaskan gejala-gejala dari segi

hubungan keruangan sebagai ilmu geografi mempunyai obyek kajian,

metode, dan kegunaan dengan corak tersendiri (Paul Claval, 1976).

2.2.2 Definisi Sistem Informasi Geografis

Sistem informasi geografis adalah sistem informasi khusus yang

mengelola data yang memiliki informasi spasial (berorientasi

keruangan). Atau sistem komputer yang memiliki kemampuan untuk


8

membangun, menyimpan, mengelola, dan menampilkan informasi

yang berefrensi geografi, seperti data yang di identifikasi menurut

lokasi, dalam sebuah database (Riyanto,2009).

2.2.3 Model Data Dalam Sistem Informasi Geografis

Data dalam SIG terdiri atas dua jenis, yaitu data spasial dan data

atribut.

1. Data Spasial

Data spasial adalah data grafis yang mengidentifikasikan

kenampakan lokasi geografis berupa titik, garis, dan poligon.

Data spasial diperoleh dari peta yang disimpan dalam bentuk

digital (numerik).

a. Titik

Sebuah titik dapat menggambarkan objek geografi

yang berbeda-beda menurut skalanya. Sebuah titik

menggambarkan kota jika pada peta skala kecil, tetapi

menggambarkan objek tertentu yang lebih spesifik dalam

wilayah kota, misalnya pasar, jika pada peta sekala besar.

b. Garis

Sebuah garis juga dapat menggambarkan objek

geografi yang berbeda menurut skalanya. Sebuah garis

menggambarkan jalan atau sungai pada peta sekala kecil,

tetapi menggambarkan batas wilayah administratif pada

peta sekala besar.

c. Area

Seperti halnya titik dan garis, area juga dapat

menggambarkan objek yang berbeda menurut skalanya.

Area dapat menggambarkan wilayah hutan atau sawah

pada peta sekala besar.


9

2. Data Atribut

Data atribut adalah data yang berupa penjelasan dari

setiap fenomena yang terdapat di permukaan bumi. Data

atribut berfungsi untuk menggambarkan gejala topografi

karena memiliki aspek deskriptip dan kualitatif. Oleh karena

itu, atribut sangat penting dalam menjelaskan seluruh objek

geografi. Contohnya, atribut kualitas tanah terdiri dari atas

status kepemilikan lahan, luas lahan, tingkat kesuburan tanah,

dan kandungan mineral dalam tanah.

2.2.4 Cara Kerja Sistem Informasi Geografis

SIG dapat mempersentasikan dunia nyata kedalam monitor

komputer seperti lembaran peta yang dapat mempersentasikan dunia

nyata diatas kertas. Tetapi SIG memiliki kekuatan lebih dan fleksibel

dari pada lembaran pada peta kertas. SIG menyimpan semua

informasi deskriptif unsur-unsurnya sebagai atribut-atribut didalam

basisdata. Kemudian, SIG membentuk dan menyimpannya dalam

tabel-tabel (renational).

Setelah itu, SIG menghubungkan unsur-unsur diatas dengan

tabel-tabel yang bersangkutan. Dengan demikian atribut-atributn ini

dapat diakses melalui lokasi-lokasi unsur-unsur peta, dan sebaliknya,

unsur-unsur peta juga dapat diakses melalui atribut-atributnya.

Karena itu unsur-unsur tersebut dapat dicari berdasarkan atribut-

atributnya. SIG menghubungkan sekumpulan unsur-unsur peta

dengan atribut-atribut didalam satuan-satuan yang disebut layer.

Yang termasuk didalam layer adalah sungai, bangunan jalan, laut,

batas-batas administrasi, perkebunan dan hutan.

Kumpulan dari layer-layer inilah yang akan membentuk

basisdata SIG. Dengan demikian perancangan basisdata merupakan

hal yang penting didalam SIG. Rancangan basisdata akan


10

menentukan efektifitas dan efisiensi proses-proses masukan,

pengolahan, dan keluaran SIG.

2.2.5 Sub Sistem Informasi Geografis

Beberapa komponen sistem antara lain :

1. Input

Sub sistem ini bertugas untuk mengumpulkan dan

mempersiapkan data spasial dan atribut dari berbagai sumber.

2. Manipulasi

Proses editting data yang telah masuk. Hal ini dilakukan

untuk menyesuaikan tipe data dan jenis data agar sesuai dengan

sistem yang dibuat.

3. Manajemen Data

Pada tahapan ini meliputi aktifitas yang berhubungan dengan

pengolahan data ke dalam sistem penyimpanan. Biasanya

memanfaatkan software Database Management System (DBMS)

seperti MySQL, SQL Server, Oracle dan DBMS lainnya.

4. Query

Metode pencarian informasi untuk menjawab pertanyaan yang

diajukan oleh pengguna sistem.

5. Analisa

Dalam sistem ada duafungsi analisa yaitu fungsi analisa

spasial dan analisis atribute. Fungsi analisis spasial adalah oprasi

yang digunakan pada penyelesaian data spasial. Sedangkan

analisis atribut adalah fungsi pengolahan data atribut yaitu data

yang tidak terhubung dengan ruang

6. Visualisasi

Menghasilkan keluaran seluruh atau sebagian basis data baik

dalam bentuk soft dan hard copy seperti : tabel, grafik, peta, dan

lain-lain.


11

2.3 Peta

2.3.1 Pengertian Peta

Peta merupakan penyajian grafis permukaan bumi dalam skala dan

digambarkan pada bidang datar melalui sistem proyeksi peta dengan

menggunakan simbol-simbol tertentu sebagai perwakilan dari obyek-

obyek spasial dari permukaan bumi (Riyanto, 2009).

2.3.2 Komponen Peta

Peta memiliki kelengkapan penting agar mudah dibaca dan

dipahami. Kelengkapan peta tersebut dinamakan komponen peta.

Komponen-komponen peta antara lain sebagai berikut :

1. Judul

Judul peta merupakan identitas atau nama untuk menjelaskan

isi atau gambar peta. Judul peta biasanya terletak di bagian atas

peta. Judul peta merupakan komponen yang penting. Biasanya

sebelum memperhatikan isi peta, pasti seseorang membaca

judulnya terlebih dahulu.

2. Skala

Skala adalah hubungan dari data yang ada pada peta dan

dunia nyata dalam sebuah rasio perbandingan. Misalnya : Skala

1:1000, yang diartikan jarak 1 cm pada peta sama dengan 1000

cm pada jarak sebenarnya.

3. Simbol

Simbol adalah suatu gambar atau tanda yang memiliki sebuah

arti atau makna tertentu. Simbol pada peta harus memenuhi tiga

syarat, yakni sederhana, mudah dimengerti, dan bersifat umum.

4. Garis Astronom

Garis astronomis merupakan garis khayal di atas permukaan

bumi. Garis ini terdiri dari garis lintang dan garis bujur. Garis

lintang adalah garis yang di tarik dari timur ke barat sedangkan

bujur garis yang ditarik dari utara ke selatan.


12

5. Legenda

Legenda merupakan keterangan dari simbol-simbol yang

digunakan pada sebuah peta. Legenda biasanya terletak di bagian

pojok kiri bawah peta.

6. Mata Angin

Mata angin merupakan pedoman atau petunjuk arah mata

angin. Mata angin pada peta biasanya berupa tanda panah yang

menunjukan ke arah utara. Mata angin sangat penting

keberadaannya supaya tidak terjadi kekeliruan arah.

7. Garis Tepi

Garis tepi merupakan garis yang dibuat mengelilingi gambar

peta untuk menunjukan batas peta tersebut.

8. Tahun Pembuatan Peta

Tahun pembuatan peta menunjukan kapan peta tersebut

dibuat. Dari tahun pembuatan kita dapat mengetahui peta tersebut

masih sesuai atau tidak untuk digunakan saat ini.

9. Inset Peta

Inset peta merupakan gambar peta yang ingin diperjelas atau

karena letaknya diluar garis batas peta. Inset peta digambar bila

diperlukan. Inset peta disebut juga peta sisipan.

10. Tata Warna

Tata warna merupakan pewarnaan pada peta untuk

membedakan obyek satu dengan yang lainnya. Misalnya warna

coklat menunjukan dataran tinggi, hijau menunjukan daerah

rendah, dan biru menunjukan daerah perairan.

2.4 Sistem Koordinat dan Proyeksi Peta

2.4.1 Proyeksi Peta

(Aryono Prihandito, 1988) informasi lokasi ditentukan

berdasarkan sistem koordinat, yang diantaranya mencangkup datum

dan proyeksi peta. Datum adalah kumpulan parameter dan titik


13

kontrol yang hubungan geometrisnya diketahui, baik melalui

pengukuran atau penghitungan. Sedangkan sistem proyeksi peta

adalah sistem yang dirancang untuk merepresentasikan permukaan

dari suatu bidang lengkung atau spheroid (misalnya bumi) pada suatu

bidang datar. Proses representasi ini menyebabkan distrosi ruang

yang perlu dihitung untuk memperoleh ketelitian beberapa incam

property, seperti jarak, sudut. Berikut ini macam-macam proyeksi

peta secara garis besar proyeksi dapat diklasifikasikan sebagai

berikut:

a. Proyeksi Peta Azimuthal

Proyeksi azimuthal bidang proyeksi berupa bidang datar

dan menyinggung salah satu kutub. Daerah kutub dan sekitar

kutub, cukup baik digambarkan dengan proyeksi ini karena tidak

banyak kesalahan. Dapat dilihat pada gambar.

Gambar 2. 2 Proyeksi Peta Azimuthal.


14

b. Proyeksi Peta Silinder

Proyeksi silinder bidang proyeksi menyinggung ekuator

dan digunakan untuk daerah di ekuator dan sekitar ekuator,

karena kesalahan di daerah ini tidak ada atau sangat kecil

Gambar 2. 3 Proyeksi Peta Silinder.

c. Proyeksi Peta Kerucut

Proyeksi kerucut bidang proyeksi berupa kerucut dan

menyinggung salah satu paralel di sekitar lintang tengah dan

baik digunakan di daerah ini karena kesalahan yang sangat

kecil, sedang pada paralel singgung kesalahan tidak ada.

Gambar 2. 4 Proyeksi Peta Kerucut

2.4.2 Sistem Koordinat

Koordinat adalah pernyataan besar geometric yang

menentukan posisi acuan yang telah didefinisikan. Posisi acuan dapat

ditetapkan dengan asumsi atau ditetapkan dengan suatu kesepakatan

matematis yang diakui secara universal dan baku. Jika penetapan titik

acuan tersebut secara asumsi maka sistem koordinat tersebut bersifat


15

lokal atau disebut koordinat lokal dan jika ditetapkan sebagai

kesepakatan berdasarkan matematis maka koordinat itu disebut

koordinat yang mempunyai sistem kesepakatan dasar matematisnya.

Untuk mengambarkan objek atau features permukaan bumi di

atas layar komputer, peneliti memerlukan suatu sistem penggambaran

yang mempresentasikan keadaan muka bumi sebenarnya yang

peneliti sebut sebagai proyeksi. Proyeksi peneliti gambarkan dalam

sistem koordinat cartesian, yang umumnya dikenal dalam unit X dan

Y. Berikut akan peneliti bahas sistem proyeksi yang sering digunakan

dalam SIG proyeksi longtitude latitude (Aryono Prihandito, 1998).

2.4.2.1 Sistem Koordinat Kartesian 2D

Sistem koordinat kartesian dua dimensi merupakan sistem

koordinat yang terdiri dari dua salib yang sumbunya saling

tegak lurus, biasanya sumbu X dan Y.

Gambar 2. 5 Sistem Koordinat Kartesian 2D

2.4.2.2 Proyeksi Latitude dan Longitude (Geographic coordinate

System)

Proyeksi ini pada umumnya digunakan untuk

mengambarkan keadaan global. Satuan unit yang digunakan

adalah Degree (derajad atau º). Satuan derajad ini


16

dilambangkan dengan satuan decimal degree, DMS (Degree

Minute Second) dan DM(Degree Minut decimal). Sebagai

contoh :

ƒ 15,150 berarti 15,15 derajad (degree)

ƒ 150 301 2511 berarti 15 derajad (degree) 30 menit dan 25

detik. Pelambangan ini digunakan dalam unit DMS

ƒ 150 30,51 berarti 15 derajat (degree) 30,5 menit.

Proyeksi longitude latitude di dasari dari bentuk bumi

spheroid, yang dibagi atas garis tegak yang mengiris bumi dari

belahan bumi utara hingga kutub selatan yang dinamakan garis

meridian dan garis-garis melintang yang membagi bumi dari

timur hingga ke barat yang dinamakan garis paralel. Garis 00

meridian melewati kota Grenwich, Inggris, implikasinya

adalah adanya pembagian waktu yang berbeda pada daerah-

daerah yang ada di bumi bagian timur dan barat. Perubahan

nilai garis meridian terjadi secara vertikal sepanjang garis

horizontal yang peneliti sebut sebagai longitude ata sumbu X.

Sedangkan garis paralel berubah secara horizontal sepanjang

garis Vertikal dan peneliti sebut sebagai latitude atau sumbu Y.

Akibat dari adanya garis paralel adalah perbedaan musim di

daerah bagian selatan dan bagian utara bumi. Umumnya

Indonesia menyebut garis bujur timur untuk menamakan

eastrn dan garis bujur barat untuk western. Sedangkan belahan

bumi utara atau northern disebut sebagai lintang utara dan

sebaliknya bellahan bumi selatan atau southern disebut sebagai

lintang selatan.


17

Gambar 2. 6 Proyeksi Longitude Latitude.

Proyeksi ini akan dibaca sebagai proyeksi bumi

spheroid oleh koordinat cartesian yang memiliki empat zona

utama yaitu, zona timur utara (North East) dengan koordinat

(x,y) berupa nilai (+,+), zona timur selatan (South East)

sebagai (+,-), zona barat selatan (South Western) dengan (-,-)

dan zona barat utara (North Western) dengan (-,+).

Berikut adalah contoh penerapan proyeksi longitude

latitude untuk negara-negara di seluruh dunia.

Gambar 2. 7 Proyeksi longitude dan latitude untuk negara didunia.

Proyeksi tersebut walaupun berlaku global tetapi karena

bentuk bumi yang cenderung elips menyebabkan adanya

perbedaan jarak antar garis meridian dan paralel di setiap

belahan bumi. Sebagai contoh satu derajad jarak antar garis


18

meridian di daerah katulistiwa sama dengan kira-kira 110 km,

sedangkan pada jarak satu derajad yang sama di belahan bumi

utara, misalkan di jepang yang terletak di tengah belahan

bumi utara kira-kira sebanding dengan 90 km, dan semakin ke

utara dan selatan jaraknya semakin mengecil, untuk itu

diperlukan suatu sistem lokal yang akan memperkecil nilai

kesalahan yang mana setiap daerah memiliki sistem berbeda,

begitu pula dengan negara-negara di benua Asis, Eropa, dan

lain-lain. Indonesia menggunakan sistem yang disebut World

Geodetic System tahun 1984 (WGS, 1984). Dengan

demikian, untuk menyatakan batas-batas koordinat Indonesia

adalah sebagai berikut : Proyeksi Longitude Latitude dalam

sistem WGS 1984 dengan batas-batas koordinat berikut 60

Northern (LU) - (-11)0

Southern (LS) dan 950

Eastern (BT) –

1410

Eastern (BT) (Sosrodarsono, S. dan Takasaki, M. 1983).

2.5 Google Maps

Google Maps adalah sebuah peta virtual yang disediakan oleh google

dan bisa di akses secara gratis melalui http;//maps.google.com. google maps

menampilkan gambar peta yang diambil dari database pada web server yang

dimiliki oleh google untuk menampilkan gambar yang diminta.

Gambar 2. 8 Peta Pada Google Maps.


19

Pada google maps, pengguna internet dapat mencari informasi grafis

seperti berikut :

1. Satelit Map

Pengguna dapat menikmati gambar permukaan bumi dari foto satelit.

Pengguna dapat melihat foto satelit lebih detail dengan cara zoom pada

daerah yang ingin dilihat atau dicari.

Gambar 2. 9 Tampilan Peta Pada Satelit Map.

2. Hasil Pencarian Integritas

Mencari lokasi, bisnis, peta buatan pengguna, dan real estate.

3. Draggable Maps

Peta digital maping yang draggable (bisa digeser) dengan

menggunakan bantuan mouse.

4. Terrain Maps (Peta Topografi)

Terrain maps menyediakan informasi fitur peta fisik atau peta

topografi yang biasanya digunakan pada atlas.

Gambar 2. 10 Tampilan Peta Terrain Maps.


20

5. Earth Map

Pengguna dapat melihat peta bumi di mana bumi terlihat secara utuh

dan jika di zoom pengguna akan melihat permukaan bumi yang di

tutupi dengan awan beserta pulau dan laut yang tampak lebih nyata dari

ketinggian.

Gambar 2. 11 Tampilan Earth Map.

6. My Location

Menggunakan fitur ini pengguna dapat mengetahui di mana letak

lokasi pengguna tersebut berada.

2.6 Google Map API

Google Maps API adalah suatu library yang berbentuk JavaScript.

Cara membuat google maps untuk ditampilkan pada situs web atau blog

sangat mudah, hanya dengan membutuhkan pengetahuan mengenai HTML

serta JavaScript, serta koneksi internet yang stabil. Dengan menggunakan

google maps API, kita dapat menghemat waktu dan biaya untuk membangun

aplikasi peta digital yang handal, sehingga kita bisa fokus hanya pada data-

data yang akan ditampilkan. Jadi jika kita hanya membuat suatu data

sedangkan peta yang akan ditampilkan adalah milik google sehingga kita

tidak dipusingkan dengan membuat peta suatu daerah, bahkan dunia.


21

Dalam pembuatan program google maps API menggunakan urutan

sebagai berikut :

1. Memasukan Maps API JavaScript ke dalam HTML.

2. Membuat element div dengan nama map_canvas untuk

menampilkan peta.

3. Membuat beberapa objek literal untuk properti-properti pada peta.

4. Menulis fungsi JavaScript untuk membuat objek peta

5. Meng-inisiasi peta dalam tag body HTML dengan event onload.

Kode program dasar :

Gambar 2. 12 Kode Program Dasar Google Maps API.

Pada google maps API terdapat empat jenis pilihan model peta yang

disediakan oleh google, diantaranya adalah :

1. ROADMAP, untuk menampilkan peta dua dimensi.

2. SATELLITE, untuk menampilkan peta satelit.

3. TERRAIN, untuk menampilkan relif fisik permukaan bumi dan

menunjukkan seberapa tingginya suatu lokasi, contoh : menunjukan

gunung dan sungai.

HYBRID, menunjukan foto satelit yang di atasnya tergambar pula apa yang

terlampir pada ROADMAP (jalan dan nama kota).


22

2.6.1 Layanan-Layanan Google Maps API

Layanan-layanan yang ada dalam Google Maps API diantaranya, seperti

yang akan dijelaskan dibawah ini :

1. Geocoding

Geocoding adalah proses merubah alamat (seperti “1600

Amphitheatre Parkway, mountain View,Ca”) menjadi koordinat

geografi (Lintang seperti 37,423021 dan bujur -122,083739), yang

digunakan untuk menempatkan penanda atau posisi pada peta.

2. Direction

Direction adalah layanan untuk memanfaatkan data jalan

yang terdapat pada Google Maps untuk mendapatkan arah tujuan

dengan menggambarkan rute perjalanan dan rangkaian deskripsi

tekstual.

3. Distance Matrix

Layanan Distance Matrix Google untuk menghitung jarak

perjalanan dan durasi beberapa tujuan dan asal menggunakan cara

tertentu, untuk lebih dari satu tujuan atau asal.

4. Elevation

Layanan Evolution menyediakan data evaluasi untuk lokasi

di permukaan bumi, termasuk lokasi kedalaman di dasar laut. Google

tidak memiliki elevasi pengukuran yang akurat pada lokasi tertentu,

layanan ini akan interpolasi dan mengembalikan nilai rata-rata

menggunakan tempat lokasi disekitarnya.

5. Street View

Layanan Google Streat View menyediakan citra paranoma

360 derajat dari jalan yang ditunjuk di seluruh wilayah cakupan.

Street View yang terdapat API adalah sama seperti yang terdapat pada

aplikasi Google Maps. Contohnya pemanfaatan Street View pada

Google Maps API V3.


23

6. Maximum Zoom Imagery

Maximum Zoom Imagery adalah layanan pada Google Maps

API V3 untuk menampilkan bagian peta yang mempunyai zoom

berbeda karena pada Google Maps peta keseluruhan adalah

penggabungan dari foto-foto satelit yang disatukan. Pemanfaatan

layanan ini memungkinkan melihat tempat-tempat terpencil atau di

permukaan laut dengan memaksimalkan tingkat zoom pada citra

satelit.

2.6.2 API Key

API key merupakan kode unik yang digenerasikan oleh Google

untuk suatu website tertentu, agar server Google Maps dapat mengenalinya.

Cara-cara untuk mendapatkan API key sebagai berikut :

1. Untuk mendapatkan API key dari Google API, kita harus masuk ke

halaman :

https://developers.google.com/maps/documentation/androidapi/signup.

2. Setelah masuk ke halaman diatas, kita klik button Get A Key untuk

memproses dan mengaktifkan Google Maps API.

Gambar 2. 13 Tombol Get API Key.

3. Lalu kita klik Create a new Project.

Gambar 2. 14 Pilih create new project.

4. Lalu kita beri nama project baru yang telah kita buat. Lalu klik Create

and Enable API.


24

Gambar 2. 15 Kustomisasi Project.

5. Akan tampil notifikasi yang menyatakan bahwa Google API Key telah

siap untuk diakses.

Gambar 2. 16 Google API Siap Digunakan.

Untuk menggunakan Google Maps API Key, maka perlu di sisipkan

pada script program yang menggunakan akses Maps Google seperti

gambar dibawah ini :

Gambar 2. 17 Menyisipkan Script Masp Google Key.


25

2.7 Google Maps Distance Matrix API

Perancangan rute terdekat peneliti menggunakan Google Maps

Distance Matrix API. Layanan Google Maps Distance Matrix API adalah

layanan yang menyediakan waktu dan jarak perjalanan untuk matriks asal dan

tujuan. Informasi yang ditampilkan adalah rute yang disarankan dari titik awal

sampai titik akhir, sesuai perhitungan Google Maps API. Dalam Google Maps

Distance Matrix API ada parameter yang diperlukan, origins (titik asal), dan

destination (titik tujuan), dan key API. Ketiga parameter ini adalah parameter

yang diperlukan, sedangkan ada juga parameter yang opsional seperti : mode,

arrival-time, departure_time, traffic_model, transit_routing_preference.

2.7.1 Parameter yang Dapat Digunakan pada Google Maps Distance

Matrix API

Beberapa operator-operator optional yang dapat digunakan pada

Google Maps Distance Matix API, Seperti :

1. Mode

Mode adalah array yang berisi satu nilai atau lebih. Salah stu

mode yang dapat digunakan adalah Transit mode. Setiap transit

mode akan menentukan mode pilihan transit. Berikut adalah nilai

yang boleh digunakan pada Transit Mode :

- Bus menunjukan bahwa rute perjalanan yang dihitung adalah

perjalanan yang menggunakan transportasi bus.

- Rail menunjukan bahwa rute perjalanan yang dihitung

adalah perjalanan yang menggunakan transportasi kereta api,

tamp, dan kereta bawah tanah.

- Subway menunjukan bahwa rute perjalanan yang dihitung

adalah perjalanan yang menggunakan transportasi kereta

bawah tanah.

- Train menunjukan bahwa rute perjalanan yang dihitung

adalah perjalanan yang menggunakan transportasi kereta api.


26

- Tram menunjukan bahwa rute perjalanan yang dihitung

adalah perjalanan yang menggunakan transportasi tram dan

kereta ringan.

Akan tetapi pada Transit mode ini tidak semua nilai yang dapat

digunakan di Indonesia.

2. Unit Arrival-time

Menentukan waktu kedatangan yang diinginkan “Date” sebagai

nilai objek. Jika waktu kedatangan sudah ditentukan maka waktu

keberangkatan akan diabaikan.

3. Departure Time

Menentukan waktu keberangkatan yang diinginkan “Date”

sebagai nilai objek. Departure time diabaikan jika nilai dari

arrival time sudah ditentukan. Default yang digunakan adalah

waktu saat ini jika tidak ada nilai waktu yang ditentukan untuk

departure time maupun arrival time.

4. Traffic Model

Traffic Model digunakan saat menghitung waktu yang di

asumsikan pada lalulintas saat ini. Pengaturan ini mempengaruhi

nilai yang dikembalikan sesuai dengan keadaan yang ada di

lapangan, yang berisi waktu yang diprediksi berdasarkan rata-rata

histori lalulintas.

5. Transit Routing Preference

Transit Routing Preference digunakan untuk menetapkan

preferensi untuk rute transit. Anda dapat memilih opsi kembali,

daripada menggunakan default rute terbaik yang dipiliholeh API.


27

2.8 Metode pengembangan Sistem Sekuiensial Linier (Waterfall Model)

Metode pengembangan sistem sekuensial linier atau yang sering disebut

dengan siklus kehidupan klasik atau model air terjun (waterfall model)

memberikan sebuah pendekatan pengembangan sistem yang sistematik dan

sekuensial, dimulai pada fase perancangan sistem, analisis, desain, kode,

pengujian dan pemeliharaan (Pressman, 2003).

2.8.1 Perencanaan atau Rekayasa dan Pemodelan Sistem

Pada fase ini dilakukan identifikasi sistem, studi kebutuhan pengguna,

dan studi kelayakan sistem baik secara teknis maupun teknologi serta

penjadwalan pengembangan sistem

2.8.2 Analisa Kebutuhan Sistem

Pada fase ini pengumpulan kebutuhan di identifikasi dan difokuskan

pada sistem yang akan dibangun meliputi identifikasi domain informasi,

tingkah laku sistem, untuk kerja dan antar muka sistem. Kebutuhan untuk

sistem di dokumentasikan dan di konsultasikan lagi bagi pengguna.

2.8.3 Desain

Fase ini difokuskan pada proses desain struktur data, arsitektur sistem,

representasi interface dan algoritma program.

2.8.3.1 Basis Data

Basis data adalah penggunaan bersama dari data yang

terhubung secara logis dan deskripsi dari data, yang dirancang untuk

keperluan informasi (Connolly et al, 2002).

Dalam basis data dikenal istilah tabel, baris, dan kolom.

Tabel (biasa disebut dengan relasi) menyatakan bentuk berdimensi

dua yang mewakili suatu kelompok data yang sejenis. Sebuah tabel

berisi sejumlah kolom yang biasa disebut sebagai field dan baris


28

yang biasa disebut record. Dalam konsep basis data relational,

setiap tabel memiliki sebuah kunci primer (primary key).

Primary key adalah suatu nilai yang unik (tidak ada yang

bernilai sama) sehingga dapat digunakan untuk membedakan suatu

baris dengan baris yang lainnya. Jika memberikan nilai berdasarkan

primary key maka maksimal ada satu baris memenuhinya. Selain

primary key, kunci disini dibagi menjadi candidat key, alternate key,

foreign key, dan composite key.

1. Candidate key, satu atau lebih attribute yang mendefinisikan

sebuah baris secara yang berfungsi sebagai calon dari primary

key serta mempunyai nilai unik pada hampir setiap barisnya.

2. Alternate key, candidat key yang tidak dipilih untuk

mendefinisikan sebuah baris secara unik, tetapi perlu dicatat

meskipun tidak menjadi candidat key di sebuah tabel akan

tetapi tidak tertutup kemungkinan bisa menjadi primary key.

3. Foreign key, primary key yang dari tabel yang lain.

4. Composite key, primary key yang tidak terbentuk oleh sebuah

kolom, tetapi tersusun atas beberapa kolom.

2.8.3.1.1 Entity Relationalship Diagram (ERD)

ERD (entity Relationship Diagram) adalah model data

yang menggambarkan hubungan antar satu entitas dengan

entitas yang lain yang mempunyai relasi dengan batasan-

batasan. ERD menyediakan cara yang sederhana dan mudah

untuk memahami berbagai komponen dalam desain basis

data(Connoly et.al, 2005). Ada tiga komponen yang ada dalam

ERD, yaitu :


29

1. Entity

Entity adalah benda yang memiliki identitas berbeda.

Entity digambarkan dengan bentuk persegi panjang yang

berisi nama dari entity tersebut.

Gambar 2. 18 Simbol Entity.

2. Relational

Relationship adalah asosiasi hubungan antar entity.

Entity merupakan pengikut dari relationship. Relationship

dapat berupa relasi one-to-one, one-to-many, dan many-to-

many. Relationship digambarkan dengan bentuk belah

ketupat yang berisi nama dari relationship.

Gambar 2. 19 Simbol Relational.

3. Property

Property, dimiliki oleh entitiy maupun relationship.

Setiap nilai dari property diambil dari nilai kelompok

property tersebut. Property digambarkan dalam bentuk elips

yang berisikan nama dari property tersebut.

Gambar 2. 20 Simbol Property.

2.8.3.1.2 MySQL

MySQL adalah sebuah database server, dapat juga

berperan sebagai client sehingga disebut juga database

client/server, yang open source dengan kemampuan yang


30

dapat berjalan baik di OS (Operating System), dengan

platform windows maupun linux (Bunafit Nugroho,2005).

Seiring perkembangannya, MySQL semakin banyak

digunakan baik dalam aplikasi berbasis web maupun aplikasi

berbasis dekstop, karena fitur-fitur yang ditawarkan semakin

kompleks dan memungkinkan untuk membuat aplikasi basis

data yang canggih.

MySQL menggunakan perintah dalam bahasa SQL, seperti :

1. Select

Perintah ini digunakan untuk memanggil data dari suatu

table.

Contoh penulisannya :

SELECT{namafield}

FORM namatabel;

2. Insert

Perintah yang digunakan untuk menambahkan data ke

dalam tabel.


INSERT INTO namatabel (field1, field2,field3,....)

VALUE (ekspresi1,ekspresi2,....)

3. Delete

Perintah ini digunakan untuk menghapus data dari suatu

tabel.


DELETE FORM namatabel WHERE kondisi

4. Update

Perintah ini digunakan untuk memperbaharui nilai suatu

data pada table yang sudah ada.


UPDATE namatabel SET criteria WHERE kondisi


31

2.8.3.2 Data Flow Diagram (DFD)

DFD (Data Flow Diagram) adalah sebuah diagram

yang menggambarkan sebuah aliran data dari sebuah sistem.

Keuntungan menggunakan DFD adalah memudahkan

pengguna yang kurang menguasai komputer sehingga dapat

memahami sistem yang akan dikembangkan. Simbol-simbol

yang biasa digunakan pada DFD, sebagai berikut :

1. Proses

Proses adalah respon terhadap aliran data masuk

atau kondisi dari sebuah sistem. Proses menggambarkan

aliran sistem yang mengolah masukan menjadi keluaran.

Proses digambarkan dengan sebuah lingkaran.

Gambar 2. 21 Simbul Proses.

2. Aliran Data

Aliran data adalah gambaran dari sebuah masukan

data ke dalam suatu proses atau keluaran data dari sebuah

proses. Aliran data digambarkan dengan garis panah,

dimana ujung panah menggambarkan tujuan.

Gambar 2. 22 Simbul Aliran Data.

3. Penyimpanan Data

Penyimpanan data adalah penyimpanan data yang

akan digunakan untuk proses berikutnya. Penyimpanan

data digambarkan denag sebuah kotak yang salah satu

ujungnya terbuka.

Gambar 2. 23 Simbul Penyimpanan Data.


32

4. External Entity

Eksternal entity adalah perorangan atau organisasi

yang berhubungan dengan sistem. Eksternal entity juga

disebut Boundary. Eksternal entity digambarkan dengan

bentuk persegi panjang.

Gambar 2. 24 Simbul External Entity.

2.8.3.3 Use Case Diagram

Use Case Diagram adalah sebuah grafis yang

menggambarkan interaksi antara sistem dengan pengguna. Dengan

kata lain use case diagram secara grafis mendeskripsikan siapa yang

akan menggunakan sistem, dan interaksi apa yang dapat dilakukan

oleh user dengan sistem tersebut. Use case diagram ini digunakan

untuk menggambarkan sekuensi langkah-langkah dari setiap

interaksi. Simbol-simbol yang biasa digunakan pada use case

diagram, sebagai berikut :

1. Use case

Use case adalah interaksi yang dapat dialakukan oleh

serang user. Use case ini digambarkan dengan bentuk elips.

Gambar 2. 25 Simbul Use Case.

2. Aktor

Aktor adalah sebuah entitas manusia atau mesin yang

berinteraksi dengan sistem untuk melakukan proses tertentu.

Aktor ini digambarkan dengan bentuk manusia.

Gambar 2. 26 Simbul Aktor


33

2.8.4 Kode

Setelah proses desain selesai maka hasilnya harus diterjemahkan ke

dalam bentuk program komputer yang kemudian menghasilkan suatu

sistem.

2.8.5 Pengujian

Pengujian dilakukan untuk menemukan kesalahan-kesalahan yang

memungkinkan terjadi pada proses pengkodean serta memastikan bahwa

input yang dibatasi memberikan hal yang sesuai dengan kebutuhan.

2.8.6 Pemeliharaan

Ditandai dengan penyerahan perangkat lunak kepada pemesannya

untuk dioprasikan. Dalam masa oprasional, perangkat lunak masih

memungkinkan untuk terjadi sesuatu kesalahan atau kegagalan dalam

menjalankan fungsi, perangkat lunak tersebut masih membutuhkan

proses (maintenance) dari waktu ke waktu.

Gambar 2. 27 Waterfall Model Menurut (Pressman, 2003).

2.9 Internet

Internet adalah kumpulan atau jaringan dari suatu jaringan komputer

secara global yang saling berhubungan satu sama lain yang ada di seluruh

dunia. Internet juga dapat di artikan sebagai kumpulan server yang berada di

berbagai penjuru dunia dan dapat digunakan secara bersama yang dikelola

perorangan, perusahaan maupun pelayanan internet. Internet bermanfaat

sebagai tempat untuk mendapatkan dan memberi informasi yang tersedia

untuk publik maupun untuk e-mail.


34

2.10 Browser

Browser adalah aplikasi yang digunakan oleh pengguna internet

untuk mencari data dan informasi dari internet. Browser bisa digunakan

melihat website atau situs web di internet.

2.11 World Wide Web (WWW)

WWW (World Wide Web) adalah kumpulan dari web server yang

terhubung ke seluruh dunia yang berfungsi untuk menampilkan data dan

informasi yang dapat digunakan bersama. Web merupakan dunia maya di

internet yang terdapat ribuan info tentang segala hal dan di kemas dalam

bentuk dokumen hypertext (Nugroho,2005).

2.12 Web Server

Web server adalah sebuah bentuk server yang khusus digunakan

untuk menyimpan halaman website atau home page. Sebuah komputer bisa

dikatakan sebagai web server jika komputer tersebut memiliki suatu program

server yang disebut Personal Web Server (PWS).

2.13 Heyper Text Transfer Protokol (HTTP)

HTTP (Heyper Text Transfer Protokol) adalah protokol yang

menyediakan komunikasi antar perintah jaringan, yang merupakan jaringan

komunikasi antar komputer client dengan server (tim Berners Lee, 1990).

Dalam komunikasi ini, komputer client melakukan permintaan dengan

mengetikan alamat website yang akan di akses.

2.14 PHP

2.13.1 Pengertian PHP

PHP adalh bahasa pemrograman yang berbentuk script yang

diletakan di dalam server web. PHP merupakan bahasa standar yang

digunakan dalam dunia website. PHP dirancang untuk membuat web


35

dinamis. Artinya dapat membentuk satu tampilan berdasarkan

permintaan.

PHP menyatu dengan HTML (Hyper Text Markup Language)

untuk membuat halaman web yang dinamis. PHP adalah severside

scripting, sehingga sintak dan perintah PHP akan di eksekusi pada

web server kemudian hasilnya dikirim ke browser dalam format

HTML.

2.13.2 Struktur Penulisan

PHP dapat di tuliskan berdiri sendiri atau di dalam script

HTML. Bentuk penulisan script PHP, yaitu :

tag<? dan diakhiri dengan ?>

tag<?php dan diakhiri dengan ?>

tag <script language=”php”> dan </script>

tag<% dan%>

Setiap akhir baris dari script PHP selalu diakhiri dengan tanda

titik koma ( ; ). Sedangkan perintah untuk menampilkan data atau

keterangan pada layar monitor pada PHP adalah :

echo

<?

Echo “data atau variabel”;

Echo data-konstanta;

?>

Print atau printf

<?

Print(“data atau variable”);

Print data-konstanta;

Printf (“data atau variabel”)

?>


36

2.15 Javascript

Javascript terdiri dari dua kata java dan script. Java adalah bahasa

pemrograman yang berorientasi objek, Script adalah serangkaian instruksi

program. Javascript adalah bahasa script (bahasa pemrograman) yang

berbasis pada bahasa pemrograman java.

Javascript dapat ditulis secara inline atau satu file dengan dokumen

HTML atau bisa juga ditulis terpisah. Javascript yang ditulis satu file dengan

HTML dapat di tulis seperti berikut :

<html>

<head></head>

<script type=”text/javascript”

Language=”Javascript”>

.

/* kode JavaScript dapat ditulis disini */

.

</script>

<body></body>

</html>

Sedangkan Javascript yang ditulis terpisah dengan HTML dapat ditulis

seperti berikut :

<html>

<head></head>

<script type=”text/javascript”

Language=”Javascript”

src=”file_JavaScript.js”></script>

<body></body>

</html>


37

2.16 Pingendo

Pingendo adalah perangkat lunak yang dapat digunakan untuk

membuat desain website dengan mudah menggunakan frameworkbootstrap.

Pingendo memberikan tools yang sangat mudah digunakan, dengan pingendo

pengguna cukup melakukan drag and drop selection komponen ke dalam

canvas desain website sehingga terbentuk sebuah desain yang dapat

digunakan untuk sebuah website.

Pingendo mempermudah pembuatan website dan mempercepat kerja

pengguna. Sehingga tidak perlu menulis atau menyusun dengan mengetik

script HTML untuk membuat sebuah desain. Pengguna hanya perlu

menambahkan komponen yang dibutuhkan hanya dengan menyeret dan

meletakan posisi yang di inginkan.

2.17 Wisata

Suatu kegiatan perjalanan yang dilakukan manusia baik perorangan

maupun kelompok untuk mengunjungi destinasi tertentu dengan tujuan

rekreasi, mempelajari keunikan daerah wisata, pengembangan diri dalam

kurun waktu yang singkat atau sementara waktu (UU RI no 10, 2009).


38

BAB III

ANALISA PERANCANGAN SISTEM

3.1 Analisa Kebutuhan

3.1.1 Deskripsi Saat Ini

Saat ini untuk mencari informasi obyek wisata sudah dapat

dilakukan oleh wisatawan dengan mencari informasi di internet.

Untuk mencari informasi obyek wisata tersebut wisatawan harus

memasukan kata kunci dari wisata yang akan dicari. disini informasi

yang ditampilkan kebanyakan informasi dalam bentuk teks, sehingga

wisatawan harus mencari lokasi dari obyek wisata tersebut. Dan jika

wisatawan ingin melakukan kunjungan wisata ke beberapa obyek

wisata mereka harus mencari satu demi satu rute untuk mengelilingi

semua wisata tersebut. Sehingga banyak menghabiskan waktu

wisatawan dalam mencari informasi dan rute menuju tempat wisata

tersebut.

3.1.2 Deskripsi Sistem yang Akan Dibangun

Sistem yang akan dibangun adalah sistem rekomendasi rute

kunjungan wisata. Sistem ini dapat diakses oleh 3 user yaitu admin,

pengelola obyek wisata maupun hotel, dan pengunjung. Tujuan dari

dibuatnya sistem ini adalah agar wisatwan dapat mengelilingi

beberapa obyekwisata dengan waktu perjalanan yang seminimal

mungkin. Pada sistem ini pengunjung dapat memilih tempatwisata

yang akan dikunjungi dalam satu hari.


39

3.1.2.1 Analisa Kebutuhan Pengguna

User yang terlibat di dalam sistem adalah sebagai berikut :

a. Admin

Admin adalah orang yang bertugas mengelola

seseluruh sistem. Admin mendapatkan hak akses

untuk menghapus semua data yangada pada sistem.

b. Pengelola

Pengelola adalah orang yang memiliki atau

mengelola sebuah obyek wisata atau hotel. Pengelola

mendapat hak akses untuk menambahkan data,

merubah data yang dimiliki, dan menghapus data

yang dimiliki.

c. Pengunjung

Pengunjung adalah orang yang akan

melakukan perjalanan wisata / wisatawan.

Pengunjung dapat melakukan pencarian tempat

wisata, hotel dan mencari rekomendasi rute

perjalanan.

3.1.2.2 Use-Case Diagram

Gambar 3. 1 Use-Case Diagram untuk Pengunjung.


40

Gambar 3. 2 Use-Case Diagram untuk Pengelola.

Gambar 3. 3 Use-Case Diagram untuk Admin.


41

3.1.2.3 Narasi Use-case

Tabel 3. 1 Narasi Use Case Cari Obyek Wisata.

Actor : Pengunjung

Kondisi Awal : Aktor sudah masuk kedalam halaman pencarian wisata

Kondisi Akhir : Sistem berhasil menampilkan hasil pencarian

tempatwisata yang diinginkan

Skenario :

Actor Action Respon Sistem

1. Aktor membuka halaman

pencarian tempat wisata

2. Sistem menampilkan halaman

pencarian tempat wisata yang

berisi text field untuk kata

kunci

3. Aktor memasukan

katakunci tempat wisata

yang diinginkan

4. Sistem akan melakukan

pencarian berdasarkan data

tempat wisata yang sudah ada

5. Jika pencarian tidak sesuai

dengan database wisata, maka

sistem akan menampilkan

notifikasi bahwa tempat wisata

tidak tersedia

6. Jika pencarian berhasil, maka

sistem akan menampilkan titik

lokasi dari data tempat wisata

yang dimasukan sesuai dengan

kata kunci

Tabel 3. 2 Narasi Use Case Cari Rute Tempat Wisata

Actor : Pengunjung

Kondisi Awal : Aktor sudah masuk kedalam halaman rekomendasi rute

wisata.

Kondisi Akhir : Sistem berhasil menampilkan hasil pencarian rute yang

akan dilalui.

Skenario :



rekomendasi rute wisata

2. Sistem menampilkan semua

titik-titik obyek wisata

3. Aktor memilih

obyekwisata yang akan

dikunjungi

4. Sistem akan melakukan proses

perhitungan obyek wisata yang

dipilih.

5. Sistem akan menampilkan rute

untuk mengelilingi semua

obyek wisata yang dipilih


42

Tabel 3. 3 Narasi Use Case Mencari Penginapan.

Actor : Pengunjung

Kondisi Awal : Aktor sudah masuk kedalam halaman pencarian

penginapan

Kondisi Akhir : Sistem berhasil menampilkan hasil pencarian penginapan

yang di inginkan

Skenario :



pencarian penginapan


pencarian penginapan yang


kunci

3. Aktor memasukan

katakunci penginapan

yang di inginkan


pencarian berdasarkan data

penginapan yang sudah ada

5. Jika pencarian tidak sesuai

dengan database hotel, maka


notifikasi bahwa penginapan

tidak tersedia

6. Jika pencarian berhasil, maka

sistem akan menampilkan titik

lokasi dari data penginapan


kata kunci

Tabel 3. 4 Narasi Use Case Cari Penginapan Berdasarkan Kategori

Actor : Pengunjung

Kondisi Awal : Aktor sudah masuk kedalam halaman pencarian

penginapan

Kondisi Akhir : Sistem berhasil menampilkan hasil pencarian penginapan

yang di inginkan

berdasarkan kategori peginapan

Skenario :



pencarian penginapan


pencarian penginapan yang


kunci dan dropdown untuk

kategori

3. Aktor memilih kategori

penginapan yang ada

pada dropdown


pencarian berdasarkan kategori

data penginapan yang sudah

ada

5. Sistem akan menampilkan titik

lokasi dari data penginapan


kategori


43

Tabel 3. 5 Narasi Use Case Pendaftara Pengelola.

Actor : Pengunjung

Kondisi Awal : Aktor sudah masuk kedalam halaman Pengelola

Kondisi Akhir : Sistem berhasil menyimpan data Pengelola pada database.

Skenario :


1. Aktor mengklik teks

daftar pengelola


yang digunakan untuk

menambahkan data pengelola

3. Aktor memasukan data-

data yang diperlukan

pengelola

4. Apabila tidak berhasil (misal :

data tidak lengkap) maka

sistem menampilkan notifikasi

bahwa tidak lengkap, dan

kembali menampilkan halaman

menambah data pengelola

5. Apabila berhasil sistem

menampilkan notifikasi bahwa

data pengelola berhasil

ditambahkan

6. Sistem melakukan

penambahan data-data

pengelola sesuai masukan

aktor pada database pengelola

Tabel 3. 6 Narasi Use Case Login Pengelola

Actor : Pengelola

Kondisi Awal : Aktor sudah terdaftar sebagai pengelola Tempat wisata

pada sistem ini

Kondisi Akhir : Aktor berhasil login

Skenario :


1. Actor telah membuka

sistem ini.

2. Sistem akan menampilkan

halaman utama.


login admin


login dengan field Username

dan Password

5. Aktor memasukan data

login

6. Apabila berhasil, maka sistem

akan menampilkan halaman

admin

7. Apabila tidak berhasil, maka


notifikasi gagal login dan

kembali ke form login

8. Aktor berhasil login


44

Tabel 3. 7 Narasi Use Case Tambah data wisata

Actor : Pengelola

Kondisi Awal : Aktor sudah masuk kedalam sistem ini

Kondisi Akhir : Aktor berhasil menambahkan data obyek wisata pada

database

Skenario :



tambah obyek wisata



menambahkan data obyek

wisata


data obyek wisata yang

diperlukan




bahwa data tidak lengkap, dan

menampilkan kembali halaman

menambah obyekwisata



data obyek wisata berhasil

ditambahkan

6. Sistem melakukan

penambahan data-data obyek

wisata sesuai masukan aktor

pada database wisata

Tabel 3. 8 Narasi Use Case Edit Data Obyek Wisata.

Actor : Pengelola


Kondisi Akhir : Aktor berhasil merubah data obyek wisata pada database

Skenario :


1. Actor membuka halaman

ubah data obyek wisata


tabel daftar obyek wisata yang

diambil dari database wisata

3. Aktor memilih data yang

akan dirubah

4. Sistem mengakses dan

mengambil data dari database

wisata


halaman mengubah data obyek

wisata, berisi field yang sudah

terisi data dari database

sebelumnya

6. Aktor melakukan entry

data ulang pada field

yang digunakan


45

7. Apabila tidak berhasil, akan


data gagal dirubah dan akan

kembali ditampilkan tabel

daftar obyek wisata

8. Apabila berhasil, sistem

akanmenyimpan data update

ke dalam database


notifikasi bahwa data berhasil

dirubah

Tabel 3. 9 Narasi Use Case Hapus Data Wisata.

Actor : Pengelola


Kondisi Akhir : Aktor berhasil menghapus data obyek wisata pada

database

Skenario :



hapus data obyek wisata





akan dihapus


akan menampilkan notifikasi

dan akan kembali

menampilkan tabel daftar

obyek wisata


akan menghapus data pada

database



dihapus


46

Tabel 3. 10 Narasi Use Case Tambah Penginapan.

Actor : Pengelola


Kondisi Akhir : Aktor berhasil menambahkan data penginapan pada

database

Skenario :



tambah penginapan



menambahkan data

penginapan


data penginapan yang

diperlukan




bahwa data tidak lengkap, dan

menampilkan kembali halaman

menambah penginapan



data penginapan berhasil

ditambahkan

6. Sistem melakukan

penambahan data-data

penginapan sesuai masukan

aktor pada database hotel

Tabel 3. 11 Narasi Use Case Edit Data Penginapan.

Actor : Pengelola


Kondisi Akhir : Aktor berhasil merubah data penginapan pada database

Skenario :



ubah data penginapan


tabel daftar penginapan yang

diambil dari database hotel


akan dirubah

4. Sistem mengakses dan

mengambil data dari database

hotel


halaman mengubah data

penginapan, berisi field yang

sudah terisi data dari database

sebelumnya

6. Aktor melakukan entry

data ulang pada field

yang digunakan


47

7. Apabila tidak berhasil, akan


data gagal dirubah dan akan

kembali ditampilkan tabel

daftar penginapan

8. Apabila berhasil, sistem

akanmenyimpan data update

ke dalam database



dirubah

Tabel 3. 12 Narasi Use Case Hapus data penginapan.

Actor : Pengelola


Kondisi Akhir : Aktor berhasil menghapus data penginapan pada database

Skenario :



hapus data penginapan





akan dihapus



dan akan kembali


penginapan



database



dihapus

Tabel 3. 13 Narasi Use Case Logout Pengelola.

Actor : Pengelola

Kondisi Awal : Aktor sudah masuk kedalam sistem ini.

Kondisi Akhir : Aktor berhasil keluar dari sistem.

Skenario :


1. Aktor sudah berhasil

masuk ke dalam sistem.


halaman utama admin.

3. Aktor mengklik buton

logout.

4. Sistem akan keluar dari

halaman utama dan

menampilkan form login


48

Tabel 3. 14 Narasi Use Case Login Admin.

Actor : Admin

Kondisi Awal : Aktor sudah terdaftar sebagai pengelola Tempat wisata

pada sistem ini

Kondisi Akhir : Aktor berhasil login

Skenario :


1. Aktor telah membuka

sistem ini.


halaman utama.


login admin


login dengan field Username

dan Password

5. Aktor memasukan data

login


akan menampilkan halaman

admin



notifikasi gagal login dan

kembali ke form login

8. Aktor berhasil login

Tabel 3. 15 Narasi Use Case Hapus Data Wisata

Actor : Admin


Kondisi Akhir : Aktor berhasil menghapus data obyek wisata pada

database

Skenario :



hapus data obyek wisata





akan dihapus



dan akan kembali


obyek wisata



database



dihapus


49

Tabel 3. 16 NarasiUse Case Hapus Data Penginapan

Actor : Admin


Kondisi Akhir : Aktor berhasil menghapus data penginapan pada database

Skenario :



hapus data penginapan





akan dihapus



dan akan kembali


penginapan



database



dihapus

Tabel 3. 17 Narasi Logout Admin.

Actor : Admin

Kondisi Awal : Aktor sudah masuk kedalam sistem ini.

Kondisi Akhir : Aktor berhasil keluar dari sistem.

Skenario :


1. Aktor sudah berhasil

masuk ke dalam sistem.


halaman utama admin.

3. Aktor mengklik buton

logout.

4. Sistem akan keluar dari

halaman utama dan

menampilkan form login


50

3.2 Perancangan Logikal

Perancangan logikal Sistem Rekomendasi Rute Kunjungan Wisata di

Kabupaten Tabanan meliputi perancangan basisdata sistem menggunakan

ER-Diagram, diagram konteks, dan data flow diagram.

3.2.1 Diagram Konteks

Gambar 3. 4 Diagram Konteks Sistem Rekomendasi Rute Kunjungan Wisata di

Kabupaten Tabanan.


51

3.2.2 Diagram Berjenjang

Gambar 3. 5 Diagram Berjenjang Sistem Rekomendasi Rute Kunjungan Wisata di

Kabupaten Tabanan.


52

3.2.3 Data Flow Diagram (DFD)

a. DFD Pengunjung

Gambar 3. 6 Data Flow Diagram Pengunjung Sistem Rekomendasi Rute Kunjungan Wisata

di Kabupaten Tabanan.

b. DFD Pengelola

Gambar 3. 7 Data Flow Diagram Pengelola Sistem Rekomendasi Rute Kunjungan

Wisata di Kabupaten Tabanan.


53

c. DFD Admin

Gambar 3. 8 Data Flow Diagram Admin Sistem Rekomendasi Rute Kunjungan Wisata di

Kabupaten Tabanan.

d. DFD Kelola Wisata Pengelola Level 2

Gambar 3. 9 Data Flow Diagram Level 2 Pengelola Kelola Wisata Sistem Rekomendasi

Rute Kunjungan Wisata di Kabupaten Tabanan.


54

e. DFD Kelola Hotel Level 2

Gambar 3. 10 Data Flow Diagram Level 2 Pengelola Kelola Penginapan Sistem

Rekomendasi Rute Kunjungan Wisata di Kabupaten Tabanan.


55

3.2.4 Entity Relational Diagram (ERD)

Gambar 3. 11 Entity Relationalship Diagram Sistem Rekomendasi Rute Kunjungan Wisata di

Kabupaten Tabanan.


56

3.2.5 Rancangan Logikal

Gambar 3. 12 Logikal Desain Sistem Rekomendasi Rute Kunjungan Wisata di

Kabupaten Tabanan.

3.2.6 Rancangan Fisikal

3.2.6.1 Daftar Tabel Wisata

Tabel 3. 18 Tabel Data Wisata.

Nama Type Size Key

Id_Wisata Varchar 30 PK

Id_Pengelola Varchar 20

Nama_Wisata Varchar 20

Alamat Varchar 50

No_tlp Varchar 15

Harga Int 15

Keterangan Varchar 100

Longitude Double

Latitude Double


57

3.2.6.2 Daftar Tabel Hotel

Tabel 3. 19 Tabel Data Hotel.

Nama Type Size Key

Id_Hotel Varchar 30 PK

Id_Pengelola Varchar 20

Nama_Hotel Varchar 20

Alamat Varchar 50

No_tlp Varchar 15

Harga Int 15

Kategori Varchar 10

Keterangan Varchar 100

Longitude Double

Latitude Double

3.2.6.3 Daftar Tabel Pengelola

Tabel 3. 20 Tabel Data Pengelola.

Nama Type Size Key

Id_Pengelola Varchar 20 PK

Nama_Pengelola Varchar 20

Alamat Varchar 50

No_tlp Varchar 15

Email Varchar 25

Password Varchar 10


58

3.2.6.4 Daftar Tabel Admin

Tabel 3. 21 Tabel Data Admin.

Nama Type Size Key

Id_Admin Int 5 PK

Nama_Admin Varchar 20

Email Varchar 20

Password Varchar 20

3.2.6.5 Daftar Tabel Gambar Wisata

Tabel 3. 22 Tabel Data Gambar Wisata.

Nama Type Size Key

Id_gambar_wisata Varchar 25 PK

Id_wisata Varchar 30

Judul gambar Varchar 50

Nama file Varchar 100

3.2.6.6 Daftar Tabel Gambar Hotel

Tabel 3. 23 Tabel Data Gambar Hotel.

Nama Type Size Key

Id_gambar_hotel Varchar 25 PK

Id_Hotel Varchar 30

Judul gambar Varchar 50

Nama file Varchar 100


59

3.2.7 Perancangan Antar Muka Pengguna

3.2.7.1 Perancangan Antar Muka Admin

a. Login Admin

Gambar 3. 13 Halaman Login Admin.

b. Halaman Utama Admin

Gambar 3. 14 Halaman Utama Admin.


60

c. Hapus Wisata

Gambar 3. 15 Halaman Hapus Data Wisata.

d. Hapus Hotel

Gambar 3. 16 Halaman Hapus Data Hotel.


61

3.2.7.2 Perancangan Antar Muka Pengelola

a. Login Pengelola

Gambar 3. 17 Halaman Login Pengelola.

b. Halaman Utama Pengelola

Gambar 3. 18 Halaman Utama Pengelola


62

c. Tambah Obyek Wisata

Gambar 3. 19 Halaman Tambah Data Obyek Wisata.

d. Edit Obyek Wisata

Gambar 3. 20 Halaman Edit Data Obyek Wisata.


63

e. Hapus Obyek Wisata

Gambar 3. 21 Halaman Hapus Data Obyek Wisata.

f. Tambah Hotel

Gambar 3. 22 Halaman Tambah Data Hotel.


64

g. Edit Hotel

Gambar 3. 23 Halaman Edit Data Hotel.

h. Hapus Hotel



65

3.2.7.3 Perancangan Antar Muka Pengunjung

a. Halaman Utama

Gambar 3. 25 Halaman Utama.

b. Halaman Pendaftaran Pengelola

Gambar 3. 26 Halaman Pendaftaran Pengelola.


66

c. Cari Obyek Wisata

Gambar 3. 27 Halaman Cari Wisata.

d. Rekomendasi Rute Wisata

Gambar 3. 28 Halaman Cari Rekomendasi Rute Wisata.


67

e. Cari Hotel

Gambar 3. 29 Halaman Cari Hotel.


68

BAB IV

IMPLEMENTASI SISTEM

4.1 Spesifikasi Perangkat Keras dan Perangkat Lunak

Perangkat keras yang digunakan untuk membangun sistem adalah :

Processor : Intel® i5 CPU M 380 @ 2,53GHz

(4CPUs),~2.5GHz

Memory : 4096 MB RAM

Hardisk : 500 GB

Perangkat lunak yang digunakan untuk membangun sistem ini adalah :

Sistem operasi : Windows 10

Bahasa Pemrograman : PHP

DBMS : SQLyog

4.2 Implementasi

4.2.1 Implementasi Basis Data

a.Tabel Admin

b. Tabel Pengelola

CREATE TABLE àdmin` (

Ìd_admin` int(5) NOT NULL AUTO_INCREMENT,

`Nama_admin` varchar(20) NOT NULL,

Èmail` varchar(20) NOT NULL,

`Password` varchar(20) NOT NULL,

PRIMARY KEY (Ìd_admin`) )

CREATE TABLE `pengelola` (

Ìd_pengelola` varchar(20) NOT NULL,

`Nama_pengelola` varchar(20) NOT NULL,

Àlamat` varchar(50) NOT NULL,

`No_tlp` varchar(15) NOT NULL,

Èmail` varchar(25) NOT NULL,

`Password` varchar(10) NOT NULL,

PRIMARY KEY (Ìd_pengelola`) )


69

c. Tabel Wisata

d. Tabel Hotel

e. Tabel Gambar Wisata

f. Tabel Gambar Hotel

CREATE TABLE `wisata` (

Ìd_wisata` varchar(25) NOT NULL,

Ìd_Pengelola` varchar(20) NOT NULL,

`Nama_wisata` varchar(20) NOT NULL,

Àlamat` varchar(50) DEFAULT NULL,

`Harga` int(15) DEFAULT NULL,

`No_tlp` varchar(15) DEFAULT NULL,

`Keterangan` varchar(100) DEFAULT NULL,

`Longtitude` double DEFAULT NULL,

`Latitude` double DEFAULT NULL,

PRIMARY KEY (Ìd_wisata`) )

CREATE TABLE `hotel` (

Ìd_Hotel` varchar(30) NOT NULL,

Ìd_Pengelola` varchar(20) NOT NULL,

`Nama_Hotel` varchar(50) NOT NULL,

Àlamat` varchar(50) NOT NULL,

`Kategori` varchar(10) DEFAULT NULL,

`Harga` int(15) DEFAULT NULL,

`No_tlp` varchar(15) DEFAULT NULL,

`Keterangan` varchar(100) DEFAULT NULL,

`Longtitude` double DEFAULT NULL,

`Latitude` double DEFAULT NULL,

PRIMARY KEY (Ìd_Hotel`) )

CREATE TABLE `gambarwisata` (

Ìd_gambar_wisata` varchar(25) NOT NULL,

Ìd_wisata` varchar(30) NOT NULL,

`judul_gambar` varchar(50) DEFAULT NULL,

`nama_file` varchar(100) DEFAULT NULL,

PRIMARY KEY (Ìd_gambar_wisata`))

CREATE TABLE `gambarhotel` (

Ìd_gambar_hotel` varchar(25) NOT NULL,

Ìd_Hotel` varchar(30) NOT NULL,

`judul_gambar` varchar(50) DEFAULT NULL,

`nama_file` varchar(100) DEFAULT NULL,

PRIMARY KEY (Ìd_gambar_hotel`))


70

4.2.2 Implementasi Sistem

4.2.2.1 Admin

a. Halaman Login

Berikut ini tampilan halaman login untuk admin.

Gambar 4. 1 Halaman Login Admin.

Script untuk mengecek email dan password pada halaman

login admin.

b. Halaman Utama Admin

Tampilan berikut ini adalah tampilan setelah admin

berhasil melakukan login, dan didalam halaman ini memuat

menu Home, wisata, hotel, pengelola, logout

1. $email = $_POST['Email_admin'];

2. $password = $_POST['Password_admin'];

3.

4. $login = mysql_query("select * from Admin where Email='$email'") ;

5. $row = mysql_fetch_assoc($login);

6.

7. if ($email === $row['Email'] && $password === $row['Password']) {

8. $_SESSION['Email'] = $_POST['Email_admin'];

9. $_SESSION['Nama_admin'] = $row['Nama_admin'];

10. header("location: HalamanUtamaAdmin.php");

11. }

12. else {

13.

14. echo "Username & Password Tidak Sesuai!!!";

15. }


71

Gambar 4. 2 Halaman Utama Admin.

c. Halaman Hapus Wisata

Tampilan berikut ini adalah tampilan hapus data hotel

yang dilihat oleh admin. Pada halaman ini admin dapat

melakukan proses hapus data wisata.


Listing untuk menampilkan data dan menghapus data pada

tabel data wisata

1. <div class="col-md-12">

2. <h1>Tabel Data Wisata</h1>

3. </div>

4. </div>

5. <div class="row">


7. <table class="table" border="1">

8. <thead>


72

9. <tr>

10. <th>Id Wisata</th>

11. <th>Nama Tempat wisata</th>

12. <th>Alamat</th>

13. <th>Harga</th>

14. <th>Tlp Pengelola</th>

15. <th>Keterangan</th>

16. <th>Longtitude</th>

17. <th>Latitude</th>

18. </tr>

19. <?php

20. include '../Koneksi/Coneksi.php';

21. $query = mysql_query("select * from Wisata");

22. while ($row = mysql_fetch_array($query)) {

23. echo "<tr>";

24. echo "<th><span >" . $row['Id_wisata'] . "</th>";

25. echo "<th><span >" . $row['Nama_wisata'] . "</th>";

26. echo "<th><span >" . $row['Alamat'] . "</th>";

27. echo "<th><span >" . $row['Harga'] . "</th>";

28. echo "<th><span >" . $row['No_tlp'] . "</th>";

29. echo "<th><span >" . $row['Keterangan'] . "</th>";

30. echo "<th><span >" . $row['Longtitude'] . "</th>";

31. echo "<th><span >" . $row['Latitude'] . "</th>";

32. echo '<td><div align="center"><a

href="Hapuswisata.php?Idwisata=' . $row['Id_wisata'] . '" class="delbutton"

title="Click To Delete">delete</a></div></td>';

33. echo '</tr>';

34. }

1. if($_GET['Idwisata']){

2. $idwisata =$_GET['Idwisata'];

3.

4. $sql="Delete from wisata

5. Where Id_wisata='$idwisata'";

6. $hasil= mysql_query($sql);

7. if ($hasil){

8. echo '<script language="javascript">alert("Data Berhsil

Dihapus")</script>';

9. echo '<script language="javascript">window.location =

"Lihat_datawisata.php" </script>';

10.

11. } else {

12. echo '<script language="javascript">alert("Data Gagal



"Hapus_datawisata.php" </script>';

14. }

15. }


73

d. Halaman Hapus Hotel

Tampilan berikut ini adalah tampilan hapus data hotel

yang dilihat oleh admin. Pada halaman ini admin dapat

melakukan proses hapus data wisata.


listing program untuk menampilkan data dan menghapus data

pada tabel data hotel


2. <h1>Tabel Data Hotel</h1>

3. </div>

4. </div>



7. <table class="table" border="1">

8. <thead>

9. <tr>



12. <th>Kategori Hotel</th>

13. <th>Alamat</th>

14. <th>Harga</th>





19. </tr>

20. <?php

21. include '../Koneksi/Coneksi.php';

22. $query = mysql_query("select * from Hotel");


24. echo "<tr>"; 25. echo "<th><span >" . $row['Id_Hotel'] . "</th>";

26. echo "<th><span >" . $row['Nama_Hotel'] . "</th>";

27. echo "<th><span >" . $row['Kategori'] . "</th>";



74







href="HapusHotel.php?Idhotel=' . $row['Id_Hotel'] . '" class="delbutton"

title="Click To Delete">delete</a></div></td>';

35. echo '</tr>';

36. }

37. ?>

38. </thead>

39. </table>

40. </div>

1. if ($_GET['Idhotel']) {

2. $idwisata = $_GET['Idhotel'];

3. $sql = "Delete from Hotel

4. Where Id_hotel='$idwisata'";

5. $hasil = mysql_query($sql);

6. ?>

7. <p>coba2</p>

8. <p>coba3</p>

9. <?php

10. if ($hasil) {

11. ?>

12. <p>coba3</p>

13. <?php


Dihapus!")</script>';


"Lihat_datahotel.php" </script>';

16. } else {




"Hapus_datahotel.php" </script>';

19. }

20. }


75

4.2.2.2 Pengelola

a. Halaman Login Pengelola

Berikut ini tampilan halaman login untuk Pengelola.

Gambar 4. 5 Halaman Login Pengelola

Listing program untuk mengecek email dan password pada

halaman login admin.

1. $email = $_POST['Email_Pengelola'];

2. $password = $_POST['Password_Pengelola'];

3.

4. $login = mysql_query("select * from Pengelola where Email='$email'") ;

5. $row = mysql_fetch_assoc($login);

6.

7. if ($email === $row['Email'] && $password === $row['Password']) {

8. $_SESSION['Email'] = $_POST['Email_Pengelola'];

9. $_SESSION['Nama_pengelola'] = $row['Nama_pengelola'];

10. header("location: HalamanUtamaPengelola.php");

11. }

12. else {

13.

14. echo '<script language="javascript">alert("Username & Password Tidak

Sesuai!!!")</script>';


"Loginpengelola.php"</script>';

16. }


76

b. Halaman Utama Pengelola

Tampilan berikut ini adalah tampilan setelah

pengelola berhasil melakukan login, dan didalam halaman ini

memuat menu Home, wisata, hotel, pengelola, logout

Gambar 4. 6 Halaman Utama Pengelola

c. Tambah Data Wisata

Tampilan berikut ini keluar ketika user memilih menu

wisata dan mengklik menu “Daftar Wisata”. Pada halaman

ini berisikan field untuk menambahkan data wisata.

Gambar 4. 7 Halaman Daftar Wisata.

Listing program untuk menambahkan data obyek wisata

yang di miliki oleh pengelola.


77

1. <script type="text/javascript">

2. var map;

3. function initialize() {

4. var myLatlng = new google.maps.LatLng(-8.537555,

115.0896721);

5. var myOptions = {

6. zoom: 15,

7. center: myLatlng,

8. mapTypeId: google.maps.MapTypeId.ROADMAP

9. }

10. map = new

google.maps.Map(document.getElementById("googleMap"),

myOptions);

11. // marker refers to a global variable

12. marker = new google.maps.Marker({

13. position: myLatlng,

14. map: map

15. });

16. google.maps.event.addListener(map, "click", function(event) {

17. // get lat/lon of click

18. var clickLat = event.latLng.lat();

19. var clickLon = event.latLng.lng();

20. // show in input box

21. document.getElementById("lat").value =

clickLat.toFixed(5);

22.

23. document.getElementById("lon").value =

clickLon.toFixed(5);

24. var marker = new google.maps.Marker({

25. position: new google.maps.LatLng(clickLat, clickLon),

26. map: map

27. });

28. });

29. }

30. window.onload = function() {

31. initialize()

32. };

33. </script>

34. <div class="section">

35. <div class="background-image" style="background-color:

#b1cedc"></div>

36. <div class="container">



39. <div id="googleMap" style="width:600px;height:600px;"

></div>

40. </div>


78

1. date_default_timezone_set("Asia/Jakarta");

2. $date = date("ymd");

3. $time = date("hi");

4. $Idwisata = "WIS" . "-" . $date . "-" . $time;

5. //$newidWisata=$_POST[$Idwisata];

6. if (isset($_POST['Namapengelola']) && isset($_POST['Namawisata']) &&

isset($_POST['Alamat']) && isset($_POST['Harga']) && isset($_POST['Notlp'])

&& isset($_POST['Keterangan']) && isset($_POST['koorlongi']) &&

isset($_POST['koorlati'])) {

7. $Pengelola = $_POST['Namapengelola'];

8. $Namawisata = $_POST['Namawisata'];

9. $Alamat = $_POST['Alamat'];

10. $Harga = $_POST['Harga'];

11. $Notlp = $_POST['Notlp'];

12. $Keterangan = $_POST['Keterangan'];

13. $Longtitude = $_POST['koorlongi'];

14. $Latitude = $_POST['koorlati'];

15. } else {

16. header("location:Tambah_datawisatapengelola.php");}

17. (empty($Pengelola) || empty($Namawisata) || empty($Alamat) || empty($Harga) ||

18. empty($Notlp) || empty($Keterangan) || empty($Longtitude) ||

empty($Latitude)) {

19. echo '<script language="javascript">alert("Harap mengisi semua form")</script>';


"../Pengelola/Tambah_datawisatapengelola.php"</script>';

21. } else {

22. $Sql = mysql_query("select * from wisata where "

23. . "Nama_wisata = '$Namawisata'"

24. . "or Longtitude = '$Longtitude' or Latitude = '$Latitude'");

25. $Cek = mysql_num_rows($Sql);

26. if ($Cek == 0) {

27. mysql_query("insert into Wisata ( Id_wisata, Nama_Pengelola, Nama_wisata,

Alamat, Harga, No_tlp, Keterangan, Longtitude, Latitude) values

28.

('$Idwisata','$Pengelola','$Namawisata','$Alamat',$Harga,'$Notlp','$Keterangan','$Lo

ngtitude','$Latitude')");

29. echo '<script language="javascript">alert("Data Tempat Wisata Berhasil

Disimpan")</script>';


"TambahGambarWisata.php"</script>';

31. } else {

32. echo '<script language="javascript">alert("Data Tempat Wisata Sudah

Digunakan")</script>';


"Tambah_datawisatapengelola.php"</script>'; }}


79

d. Tambah Gambar Obyek Wisata

Tampilan berikut ini keluar ketika user sudah menyimpan

obyek wisata yang di daftarkan.

Gambar 4. 8 Halaman Tambah Gambar Wisata.

Listing program untuk menambahkan gambar obyek wisata

1. if (!empty($_FILES["nama_file"]["tmp_name"])) {

2. $jenis_gambar = $_FILES['nama_file']['type'];

3. $judul_gambar = $_SESSION['Nama_pengelola'];

4. if ($jenis_gambar == "image/jpeg" || $jenis_gambar ==

"image/jpg" || $jenis_gambar == "image/gif" || $jenis_gambar ==

"image/x-png") {

5. $gambar = $namafolder .

basename($_FILES['nama_file']['name']);

6. if (move_uploaded_file($_FILES['nama_file']['tmp_name'],

$gambar)) {

7. echo '<script language="javascript">alert("Gambar Berhasil

Ditambahkan!, klik OK untuk menambah gambar lain")</script>';



9. $sql = "insert into Gambarwisata (judul_gambar,nama_file)

values ('$judul_gambar','$gambar')";

10. $res = mysql_query($sql) or die(mysql_error());

11. } else {

12. echo '<script language="javascript">';

13. echo 'alert("Gambar gagal dikirim")';

14. echo '</script>';




80

e. Edit Data Wisata


wisata dan mengklik menu “Edit Wisata”. Halaman ini

menampilkan semua data wisata yang di miliki oleh

pengelola

Gambar 4. 9 Halaman Edit Data Wisata

Listing program untuk menampilkan dan merubah data obyek

wisata

16. }

17. } else {


19. echo 'alert("Jenis gambar yang anda kirim salah. Harus .jpg")';




22. }

23. } else {


25. echo 'alert("anda belum memilih gambar!")';




28. }


2. <table class="table" border="1" >

3. <thead>

4. <tr>



7. <th>Alamat</th>

8. <th>Biaya Masuk</th>





13. </tr>


81

Setelah pengelola memilih data wisata yang akan

dirubah maka akan muncul pada tampilan berikut. Dan pada

tampilan ini pengelola bisa merubah data yang akan dirubah.

Gambar 4. 10 Halaman Form Edit Data Wisata.

1. <?php

2. include '../../Koneksi/Coneksi.php';

3. $Session = $_SESSION['Nama_pengelola'];

4.

5. $query = mysql_query("select * from Wisata where

Nama_pengelola='$Session'");


7. echo "<tr>";









16. echo '<td><div align="center"><a rel="facebox"

href=Edit_datawisataPengelola.php?Id_wisata=' . $row['Id_wisata'] .

'>edit</a></div></td>';

17. echo '</tr>';

18. }

19. ?>

20. </thead>

21. </table>

22. </div>


82

f. Hapus Data Wisata


wisata dan mengklik menu “Hapus Wisata”. Halaman ini

menampilkan semua data wisata yang dimiliki oleh

pengelola dan pengelola dapat menghapus data yang

dimiliki.

1. if (isset($_POST['submit'])) {

2.

3. $idwisata = $_POST['Idwisata'];

4. $Namapengelola = $_POST['Nama_pengelola'];

5. $Namawisata = $_POST['Namawisata'];







12. $sql = "Update Wisata

13. Set Nama_Pengelola='$Namapengelola',

Nama_wisata='$Namawisata', Alamat='$Alamat',Harga='$Harga',

No_tlp='$Notlp', Keterangan='$Keterangan', Longtitude='$Longtitude',

Latitude='$Latitude'

14. where Id_wisata='$idwisata'";

15. }

16. if ($conn->query($sql) === TRUE) {

17. echo 'coba3';

18. echo '<script language="javascript">alert("Data Berhasil

Dirubah")</script>';


"../HalamanUtamaPengelola.php" </script>';

20. } else {

21. echo 'coba4';

22. echo '<script language="javascript">alert("Data Tidak Berhasil


23. echo "Error: " . $sql . "<br>" . $conn->error;


"Edit_data_pengelola.php" </script>';

25. }


83


Listing program untuk menghapus data obyek wisaata yang

dimiliki oleh pengelola.


2. <h1> Data Tempat Wisata yang Dimiliki <?php echo

$_SESSION['Nama_pengelola']; ?> : </h1>

3. </div>

4. </div>




8. <thead>

9. <tr>



12. <th>Alamat</th>

13. <th>Biaya Masuk</th>





18. </tr>

19. <?php

20. include '../../Koneksi/Coneksi.php';


22. $query = mysql_query("select * from Wisata where

Nama_pengelola='$Session'");


24. echo "<tr>";










href="../wisata/Hapusdatawisatapengelola.php?Idwisata=' . $row['Id_wisata'] . '"

class="delbutton" title="Click To Delete">delete</a></div></td>';

34. echo '</tr>';

35. }

36. ?>

37. </thead>

38. </table>

39. </div>


84

g. Tambah Data Hotel


Hotel dan mengklik menu “Daftar Hotel”. Pada halaman ini

berisikan field untuk menambahkan data Hotel.

Gambar 4. 12 Halaman Daftar Hotel.

Listing program untuk menambahkan data hotel yang di

miliki oleh pengelola.

1. if ($_GET['Idwisata']) {

2. $idwisata = $_GET['Idwisata'];

3.

4. $sql = "Delete from wisata where Id_Wisata='$idwisata'";

5.


7. if ($hasil) {





10. } else {




"../Wisata/Hapus_datawisatapengelola.php" </script>';

13. }


85

1. <script type="text/javascript">

2. var map;

3. function initialize() {

4. var myLatlng = new google.maps.LatLng(-8.537555,

115.0896721);

5. var myOptions = {

6. zoom: 15,

7. center: myLatlng,

8. mapTypeId: google.maps.MapTypeId.ROADMAP

9. }

10. map = new

google.maps.Map(document.getElementById("googleMap"),

myOptions);

11. // marker refers to a global variable

12. marker = new google.maps.Marker({

13. position: myLatlng,

14. map: map

15. });

16. google.maps.event.addListener(map, "click", function(event) {

17. // get lat/lon of click

18. var clickLat = event.latLng.lat();

19. var clickLon = event.latLng.lng();

20.

21. // show in input box

22. document.getElementById("lat").value =

clickLat.toFixed(5);

23. document.getElementById("lon").value =

clickLon.toFixed(5);

24.

25. var marker = new google.maps.Marker({

26. position: new google.maps.LatLng(clickLat, clickLon),

27. map: map

28. });

29. });

30. }

31. window.onload = function() {

32. initialize()

33. };

34. </script>




4. $Idhotel = "HOT" ."-". $date . "-" . $time;

5. if (isset($_POST['Namapengelola']) && isset($_POST['Namahotel'])

&& isset($_POST['Kategori'])

6. && isset($_POST['Alamat']) && isset($_POST['Harga']) &&

isset($_POST['Notlp'])

7. && isset($_POST['Keterangan']) && isset($_POST['koorlongi'])


86

h. Edit Data Hotel


hotel dan mengklik menu “Edit Hotel”. Halaman ini

menampilkan semua data hotel yang di miliki oleh

pengelola

7. $Pengelola = $_POST['Namapengelola'];

8. $Namahotel = $_POST['Namahotel'];

9. $Kategori = $_POST['Kategori'];







16. } else {

17. header("location:HalamanUtamaPengelola.php");

18. }

19. if (empty($Pengelola) || empty($Namahotel) || empty($Kategori) ||

empty($Alamat) || empty($Harga) ||

20. empty($Notlp) || empty($Keterangan) || empty($Longtitude) ||

empty($Latitude)) {

21. echo '<script language="javascript">alert("Harap mengisi semua

form")</script>';


"Tambah_datahotelpengelola.php"</script>';

23. } else {

24. $Sql = mysql_query("select * from hotel where "

25. . "Nama_Hotel = '$Namahotel' Alamat = '$Alamat' or No_tlp =

'$Notlp'"

26. . "or Longtitude = '$Longtitude' or Latitude = '$Latitude'");

27. $Cek = mysql_num_rows($Sql);

28. if ($Cek == 0) {

29. mysql_query("insert into hotel ( Id_Hotel, Nama_Pengelola,

Nama_Hotel, Alamat, Kategori , Harga, No_tlp, Keterangan, Longtitude,

Latitude) values

30. ('$Idhotel','$Pengelola','$Namahotel','$Alamat', '$Kategori' ,$Harga,

'$Notlp' , '$Keterangan' ,'$Longtitude' , '$Latitude')");

31. echo '<script language="javascript">alert("Data Hotel Berhasil



"../Hotel/TambahGambarHotel.php"</script>';

33. } else {

34. echo '<script language="javascript">alert("Data Hotel Sudah

Digunakan")</script>';


"../Hotel/Tambah_datahotelpengelola.php"</script>';

36. }


87

Gambar 4. 13 Halaman Edit Data Hotel.

Listing program untuk menampilkan dan merubah data

obyek wisata



3. <thead>

4. <tr>

5. <th>Id Hotel</th>

6. <th>Nama Hotel</th>

7. <th>Alamat</th>

8. <th>Kategori Hotel</th>

9. <th>Biaya Menginap</th>

10. <th>Tlp Hotel</th>




14. </tr>

15. <?php

16. include '../../Koneksi/CKoneksi.php';


18.

19. $query = mysql_query("select * from Hotel where

Nama_Pengelola='$Session'");


21. echo "<tr>";

22. echo "<th><span >" . $row['Id_Hotel'] . "</th>";

23. echo "<th><span >" . $row['Nama_Hotel'] . "</th>";


25. echo "<th><span >" . $row['Kategori'] . "</th>";






31. echo '<td><div align="center"><a rel="facebox"

href=Edit_datahotelPengelola.php?Id_Hotel=' . $row['Id_Hotel'] .

'>edit</a></div></td>';

32. echo '</tr>';

33. }

34. ?>

35. </thead>

36. </table>


88

Setelah pengelola memilih data hotel yang akan di rubah

maka akan muncul pada tampilan berikut. Dan pada

tampilan ini pengelola bisa merubah data yang akan di

rubah.

Gambar 4. 14 Halaman Form Edit Data Hotel.


2. $idhotel = $_POST['Idhotel'];

3. $Namapengelola = $_POST['Nama_pengelola'];

4. $Namahotel = $_POST['Namahotel'];

5. $Kategori = $_POST['Kategori'];







12. $sql = "Update Hotel

13. Set Nama_Pengelola='$Namapengelola', Nama_Hotel='$Namahotel',

Kategori='$Kategori' ,Alamat='$Alamat',Harga='$Harga', No_tlp='$Notlp',

Keterangan='$Keterangan', Longtitude='$Longtitude', Latitude='$Latitude'

14. where Id_Hotel='$idhotel'"; }


16. echo 'coba3';

17. echo '<script language="javascript">alert("Data Berhasil Dirubah")</script>';


"Edit_datahotel_pengelola.php" </script>';

19. } else {

20. echo 'coba4';





"Edit_data_pengelola.php" </script>';

24. }


89

i. Hapus data Hotel


hotel dan mengklik menu “Hapus Hotel”. Halaman ini

menampilkan semua data hotel yang di miliki oleh

pengelola dan pengelola dapat menghapus data yang di

miliki.


Listing program untuk menghapus data hotel yang dimiliki

oleh pengelola.

1. if ($_GET['Idhotel']) {

2. $idhotel = $_GET['Idhotel'];

3.

4. $sql = "Delete from Hotel where Id_Hotel='$idhotel'";

5.


7. if ($hasil) {





10. } else {




"../Hotel/Hapus_datahotelpengelola.php" </script>';

13. }

14. }


90

4.2.2.3 Pengguna

a. Halaman Utama

Tampilan berikut ini merupakan tampilan utama dari

sistem ini. Pada tampilan ini terdapat menu home, wisata,

rekomendasi rute wisata, hotel, dan pengelola.

Gambar 4. 16 Halaman Utama Sistem.

b. Pendaftaran Pengelola

Jika pengelola belum memiliki akun, maka mereka harus

mendaftarkan diri dengan cara klik “Daftar sekarang” pada

halaman login. Kemudian pengelola harus mengisi semua

field-field yang ada.

Gambar 4. 17 Halaman Daftar Pengelola

Listing program untuk melakukan pendaftaran pengelola.


91




4. $idpengelola = "PENG" . "-" . $date . "-" . $time;


6. if (strlen($_POST['Namapengelola']) < 3) {

7. $error[] = 'Nama Pengelola terlalu singkat !';

8. } else if (strlen($_POST['Alamat']) < 3) {

9. $error[] = 'Alamat kurang lengkap !';

10. } else if (strlen($_POST['Notlp'] < 7)) {

11. $error[] = 'Nomer telepon terlalu sedikit';

12. } else if (!FILTER_VAR($_POST['Email_pengelola'],

FILTER_VALIDATE_EMAIL)) {

13. $error[] = 'Masukan alamat email dengan benar';

14. } else if (strlen($_POST['Password_pengelola'] < 5)) {

15. $error[] = 'Password terlalu sedikit';

16. } else if ($_POST['Password_pengelola'] !=

$_POST['Password_pengelola2']) {

17. $error[] = 'Password tidak sama';

18. } else {

19. $stmt = $db->prepare('select Email from Pengelola where Email =

:Email');

20. $stmt->execute(array(':Email' => $_POST['Email_pengelola']));

21. $row = $stmt->fetch(PDO::FETCH_ASSOC);

22. if (!empty($row['Email'])) {

23. $error[] = 'Email telah terdaftar !';

24. } }

25. if (isset($error)){

26. try {

27. $Namapengelola=$_POST['Namapengelola'];

28. $Alamat=$_POST['Alamat'];

29. $notlp=$_POST['Notlp'];

30. $email=$_POST['Email_pengelola'];

31. $password=$_POST['Password_pengelola'];

32. $sql="insert into Pengelola (Id_pengelola, Nama_pengelola,

Alamat, No_tlp, Email, Password)

33. Values('$idpengelola', '$Namapengelola', '$Alamat', '$notlp',

'$email', '$password')";

34. echo $sql;


36. echo 'coba3';

37. echo '<script language="javascript">alert("Data Berhasil

Disimpan!")</script>';


"LoginPengelola.php" </script>';

39. }

40. else{

41. echo 'coba4';


Disimpan!")</script>';



"DaftarPengelola.php" </script>';

45. }

46. } catch (Exception $ex) {

47. $error[] = $ex->getMessage();

48. }


92

c. Cari Obyek Wisata

Tampilan berikut ini adalah tampilan halaman

pencarian tempat wisata, di mana user dapat mencari tempat

wisata berdasarkan masukan nama tempat wisata yang dicari.

Gambar 4. 18 Halaman Cari Obyek Wisata.

Listing program untuk melakukan pencarian obyek wisata.

1. <script>

2. function initMap() {

3. var mapCanvas = document.getElementById('googleMap');

4. var mapOption = {

5. zoom: 1,

6. MapType: google.maps.MapTypeId.ROADMAP

7. };

8. var map = new google.maps.Map(mapCanvas, mapOption);

9. var infoWindow = new google.maps.InfoWindow({map:

map});

10. var bounds = new google.maps.LatLngBounds();

11. var directionsService = new google.maps.DirectionsService;

12. var directionsDisplay = new google.maps.DirectionsRenderer({

13. draggable: true,

14. map: map,

15. panel: document.getElementById('directionsPanel')

16. });

17. <?php

18. include '../Koneksi/koneksi.php';

19.

20. if (isset($_POST['Namawisata'])) {

21. $namawisata = $_POST['Namawisata'];

22. $ser = "SELECT * FROM Wisata where Nama_wisata like

'%$namawisata%'";


93

23. $result = mysqli_query($conn, $ser);

24. if ($ser === '') {

25. echo 'error';

26. echo '<script language="javascript">alert("gsahkskddn")</script>';


"HalamanWisata.php"</script>';

28. } else {

29. foreach ($result as $row) {

30. $koord_x = $row['Latitude'];

31. $koord_y = $row['Longtitude'];

32. $namawis = $row['Nama_wisata'];

33. $Alamat = $row['Alamat'];

34. $Harga = $row['Harga'];

35. $Notlp = $row['No_tlp'];

36. $Keterangan = $row['Keterangan'];

37. $Pengelola = $row['Nama_Pengelola'];

38. $Idwisata = $row['Id_wisata'];

39. $BtnLihat = '<div class="btn-group inline"><form

action="../LihatGambar.php" method="GET">'

40. . '<button type="submit" class="btn btn-info btn-sm inline"

value= "' . $Pengelola . '">Lihat Gambar</button>'

41. . '</form></div>';

42. $btnTujuan1 = '<div class="btn-group inline"><form

action="HalamanWisata.php" method="POST">'

43. . '<input type="hidden" name="latid" value="' . $koord_x . '">'

44. . '<input type="hidden" name="logit" value="' . $koord_y . '">'

45. . '&nbsp<button type="submit" class="btn btn-info btn-sm

inline">Lihat Rute Ke Sini</button>'

46. . '</form></div>';

47. echo "addMarker($koord_x, $koord_y, '<br>Nama Obyek Wisata :

$namawis', '<br>Alamat : $Alamat', '<br>Biaya Masuk : $Harga', '<br>No

Telp : $Notlp','<br>Keterangan : $Keterangan','<br>$BtnLihat',

'<br>$btnTujuan1')\n";

48. }

49. }

50. } else if (!isset($_POST['Namawisata'])) {

51. $result = mysqli_query($conn, "SELECT * FROM Wisata");

52. if ($result === FALSE) {





55. echo 'error';

56. } else {








94





67. $BtnLihat = '<div class="btn-group inline">'

68. . '<a href="../LihatGambar.php?Id_wisata=' . $Idwisata . '">'

69. . '<button type="button" >Lihat Informasi</button>'

70. . '</a>'

71. . '</div>';



73. . '<input type="hidden" name="latid" value="' . $koord_x .

'">'

74. . '<input type="hidden" name="logit" value="' . $koord_y .

'">'



76. . '</form></div>';

77. echo "addMarker($koord_x, $koord_y, '<br>Nama Obyek

Wisata : $namawis', '<br>Alamat : $Alamat', '<br>Biaya Masuk :

$Harga', '<br>No Telp : $Notlp','<br>Keterangan :

$Keterangan','<br>$BtnLihat', '<br>$btnTujuan1')\n";

78. } }

79. } else if ($_POST['latid'] && $_POST['logit']) {

80. $latid1 = $_POST['latid'];

81. $logit1 = $_POST['logit'];

82. $result = mysqli_query($conn, "SELECT * FROM Wisata WHERE

Latitude='$latid1' AND Longtitude='$logit1'");






86. echo 'error';

87. } else {












99. . '<a href="../LihatGambar.php?Id_wisata=' . $Idwisata . '">'

100. . '<button type="button" >Lihat Informasi</button>'

101. . '</a>'

102. . '</div>';


95

103.$btnTujuan1 = '<div class="btn-group inline"><form






107. . '</form></div>';

108. echo "addMarker($koord_x, $koord_y, '<br>Nama Obyek Wisata :

$namawis', '<br>Alamat : $Alamat', '<br>Biaya Masuk : $Harga', '<br>No

Telp : $Notlp','<br>Keterangan : $Keterangan','<br>$BtnLihat',

'<br>$btnTujuan1')\n"; }

109.if (navigator.geolocation) {

110. navigator.geolocation.getCurrentPosition(

111. function(position) {

112. var pos = {lat: position.coords.latitude, lng:

position.coords.longitude};

113. var xi = position.coords.latitude;

114. var yi = position.coords.longitude;

115. infoWindow.setPosition(pos);

116.if (isset($_POST['latid']) && isset($_POST['logit'])) {

117. $lat2 = $_POST['latid'];

118. $long2 = $_POST['logit'];

119. ?>

120. displayRoute(xi + ',' + yi, '<?php echo "$lat2,

$long2"; ?>', directionsService,

121. directionsDisplay);

122. <?php

123.} else {

124. ?>

125. displayRoute(xi + ',' + yi, '<?php echo "$koord_x,

$koord_y"; ?>', directionsService,

126. directionsDisplay);

127.<?php } ?>

128. infoWindow.setContent('Location found :' + xi + ',' + yi + '');

129. map.setCenter(pos);

130. },

131. function() {

132. handleLocationError(true, infoWindow,

map.getCenter());

133. });

134. } else {

135. handleLocationError(false, infoWindow, map.getCenter());

136. }

137. directionsDisplay.addListener('directions_changed', function() {

138. computeTotalDistance(directionsDisplay.getDirections());

139. });

140. function displayRoute(origin, destination, service, display) {

141. service.route({

142. origin: origin,

143. destination: destination,

144. travelMode: google.maps.TravelMode.DRIVING

145. }


96

146. infoWindow.setContent('Location found :' + xi + ',' + yi + '');

147. map.setCenter(pos);

148. },

149. function() {

150. handleLocationError(true, infoWindow, map.getCenter());

151. });

152. } else {

153. handleLocationError(false, infoWindow, map.getCenter());

154. }

155. directionsDisplay.addListener('directions_changed', function() {

156. computeTotalDistance(directionsDisplay.getDirections());

157. });

158. function displayRoute(origin, destination, service, display) {

159. service.route({

160. origin: origin,

161. destination: destination,

162. travelMode: google.maps.TravelMode.DRIVING

163. }

164. , function(response, status) {

165. if (status === google.maps.DirectionsStatus.OK) {

166. display.setDirections(response);

167. } else {

168. if (status === 'INVALID_REQUEST') {

169. alert('testing');

170. }

171. else {

172. alert(xi);

173.function computeTotalDistance(result) {

174. var total = 0;

175. var myroute = result.routes[0];

176. for (var i = 0; i < myroute.legs.length; i++) {

177. total += myroute.legs[i].distance.value;

178. }

179. total = total / 1000;

180. document.getElementById('total').innerHTML = total + ' km';

181. }

182. function handleLocationError(browserHasGeolocation,

infoWindow, pos) {

183. infoWindow.setPosition(pos);

184. infoWindow.setContent(browserHasGeolocation ?

185. 'Error: The Geolocation service failed.' :

186. 'Error: Your browser doesn\'t support geolocation.');


97

187.function infowindo(marker, map, Infowindow, data) {

188. google.maps.event.addListener(marker, 'mouseover', function() {

189.

190. Infowindow.setContent(data);

191. Infowindow.open(map, marker);

192.

193. });

194. }

195.

196. function addMarker(koord_x, koord_y, Nama_wisata, Alamat, Harga,

No_tlp, Keterangan, btn1, btn2) {

197. var maps = new google.maps.LatLng(koord_x, koord_y);

198. bounds.extend(maps);

199. var markerType = new google.maps.Marker({

200. map: map,

201. position: maps,

202. icon: "../Gambar/g4204.png"

203. });

204.

205. map.fitBounds(bounds);

206. infowindo(markerType, map, infoWindow, Nama_wisata + Alamat

+ Harga + No_tlp + Keterangan + btn1 + btn2);

207.

208. }

209. }

210. google.maps.event.addDomListener(window, 'load', initMap);

211. </script>


98

d. Cari Rute Tempat Wisata

Berikut ini adalah tampilan halaman rekomendasi rute

wisata, di mana user harus memilih tempat wisata yang akan

dikunjungi dan memilih mode yang akan digunakan. Lalu

sistem akan menampilkan jalur yang akan dilalui oleh user

untuk mengelilingi semua obyek wisata yang dipilih.

Gambar 4. 19 Halaman Rekomendasi Rute Wisata.

Halaman Berikut adalah tampilan ketika pengguna memilih

tempat wisata yang akan dikunjungi.

Gambar 4. 20 Tampilan User Memilih Obyek Wisata.


99

Tampilan berikut adalah tampilan dimana user telah

mengklik buton start untuk menampilkan rekomendasi rute

yang bisa dlialui.

Gambar 4. 21 Tampilan Rekomendasi Rute.

e. Cari Hotel

Tampilan berikut iniadalah tampilan halaman

pencarian hotel, di mana user dapat mencari hotel

berdasarkan masukan nama hotel atau kategori hotel yang

dicari.

Gambar 4. 22 Halaman Cari Hotel.

Listing program untuk melakukan pencarian hotel.


100

1. if (isset($_POST['Namahotel'])) {

2. $namahotel = $_POST['Namahotel'];

3. $kate= $_POST['Kategori'];

4. $ser = "SELECT * FROM hotel where Nama_Hotel like '%$namahotel%'";


6. if ($ser === '') {

7. echo 'error';



"HalamanHotel.php"</script>';

10. } else {




14. $namahot = $row['Nama_Hotel'];

15. $Kategori = $row['Kategori'];






21. $Idhotel = $row['Id_Hotel'];


23. . '<a href="../LihatGambarHotel.php?Id_Hotel=' . $Idhotel . '">'

24. . '<button type="button" >Lihat Gambar</button>'

25. . '</a>'

26. . '</div>';

27. $btnTujuan1 = '<div class="btn-group inline"><form action="HalamanHotel.php"

method="POST">'





31. . '</form></div>';

32. echo "addMarker($koord_x, $koord_y, '<br>Nama Hotel : $namahot',

'<br>Kategori : $Kategori', '<br>Alamat : $Alamat', '<br>Biaya Menginap :

$Harga', '<br>No Telp : $Notlp','<br>Keterangan : $Keterangan','<br>$BtnLihat',

'<br>$btnTujuan1')\n"; }}}

33. if (isset($_POST['Kategori'])) {

34. $kate= $_POST['Kategori'];

35. $ser = "SELECT * FROM hotel where Kategori = '$kate'";


37. if ($ser === '') {

38. echo 'error';





101

1. } else {














15. . '<button type="button" >Lihat Gambar</button>'

16. . '</a>'

17. . '</div>'


action="HalamanHotel.php" method="POST">'





22. . '</form></div>';

23. echo "addMarker($koord_x, $koord_y, '<br>Nama Hotel : $namahot',

'<br>Kategori : $Kategori', '<br>Alamat : $Alamat', '<br>Biaya Menginap :

$Harga', '<br>No Telp : $Notlp','<br>Keterangan :

$Keterangan','<br>$BtnLihat', '<br>$btnTujuan1')\n"; }

24. else if (empty ($namahot) || empty ($Keterangan)) {

25. $result = mysqli_query($conn, "SELECT * FROM hotel");






29. echo 'error'; } else {














43. . '<button type="button" >Lihat Gambar</button>' '</a>'

'</div>';


102

4.3 Pengujian

4.3.1 Hasil Pengujian

a. Pengujian Login

Berikut ini adalah hasil pengujian sistem menggunakan Black Box :

Tabel 4. 1 Pengujian Login.

Data Masukan Yang

Diharapkan

Yang Terjadi Kesimpulan

Username dan

password terisi

dengan benar

Akan

Menampilkan

form utama

admin / pengelola

Menampilkan

form utama

admin /

pengelola

Memenuhi

Username dan

password

kosong

Akan

menampilkan

pesan “Username

dan Password

tidak sesuai!!!”

dan kembali ke

halaman login

Akan

menampilkan

pesan

“Username

dan Password

tidak

sesuai!!!” dan

kembali ke

halaman login

Memenuhi

Username dan

password salah

Akan

menampilkan

pesan “Username

dan Password

tidak sesuai!!!”

dan kembali ke

halaman login

Akan

menampilkan

pesan

“Username

dan Password

tidak

sesuai!!!” dan

kembali ke

halaman login

Memenuhi


103

b. Pengujian Tambah, Edit, Hapus, Cari Data

Tabel 4. 2 Pengujian Tambah, Edit, Hapus, Cari Data.

Data Masukan Yang Diharapkan Yang

Terjadi

Kesimpulan

Klik Tombol

“Tambah”

Mengisi setiap

field wajib isi, jika

di isi semua maka

“Data Berhasil di

Simpan”. Jika

tidak mengisi

semua field maka

akan muncul

“Harap Mengisi

semua form” dan

jika .

Tombol

“Simpan”

dapat

berfungsi

sesuai yang

diharapkan

Memenuhi

Klik tombol

“Edit”

Menginputkan data

yang akan dirubah

pada field yang

akan dirubah. Jika

data telah data

telah diinputkan

maka akan

menampilkan

“Data Berhasil

Dirubah” jika data

tidak diedit maka

data tetap seperti

data awal.

Tombol

“Edit” dapat

berfungsi

sesuai yang

diharapkan.

Memenuhi


104

Klik Tombol

Hapus

Memilih data

yang akan dihapus,

maka akan muncul

“Data Berhasil

Dihapus”

Tombol

“Hapus”

berfungsi

sesuai yang

diharapkan

Memenuhi

Klik tombol

“Cari”

Menginputkan kata

kunci yang ingin

dicari pada field

cari, klik tombol

“Cari” untuk

mencari. Jika kata

kunci yang dicari

tersedia maka akan

menampilkan

marker pada peta

Tombol

“Cari”

berfungsi

sesuai yang

di harapkan

Memenuhi

4.3.2 Kesimpulan Hasil Pengujian Test

Berdasarkan hasil pengujian dengan kasus uji di atas dapat di

tarik kesimpulan bahwa secara fungsional sistem sudah sesuai dengan

yang diharapkan. Data username, password, data obyek wisata, data

hotel, dan data pengelola dapat disimpan pada database MySQL.

4.4 Analisa Hasil Uji Perangkat Lunak

Berdasarkan hasil implementsi aplikasi informasi wisata dan hotel di

kabupaten Tabanan, dapat di analisa bahwa sistem berjalan dengan baik,

dengan fungsi-fungsi kelola data wisata dan hotel, pencarian obyek wisata,

pencarian hotel, dan rekomendasi rute berjalan dengan baik. Adapun kelebihan

dan kerurangan dari sistem ini sebagai berikut :


105

Kelebihan :

a. Pengunjung dengan mudah dan cepat memperoleh informasi dari obyek

wisata.

b. Pengunjung dengan mudah dan cepat memperoleh informasi dari

c. Pengunjung dapat mencari rekomendasi rute mengelilingi tempat wisata

dengan waktu yang seminimal mungkin.

Kekurangan :

a. Output marker yang di tampilkan pada peta rekomendasi masih belum

sesui dengan urutan masukan user.


106

BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan hasil perancangan, pembangunan, dan uji coba aplikasi

Wisata di Kabupaten Tabanan ini dapat disimpulkan bahwa :

a. Sistem yang dibangun sudah sesuai dengan rancangan dan dapat

berjalan dengan baik.

b. Sistem yang dibuat sudah dapat memberi informasi lokasi obyek

wisata dan hotel yang cukup detail.

c. Sistem mampu menampilkan rute kunjungan wisata dengan waktu

yang seminimal mungkin.

5.2 Saran

Untuk pengembangan sistem ini lebih lanjut disarankan untuk :

a. Output marker pada rekomendasi rute perlu disesuaikan dengan

masukan pilihan user.

b. Perlu ditambahkan menu Help sebagai pedoman agar pengguna tidak

kesulitan.


107

DAFTAR PUSTAKA

Arief, M.Rudianto. 2011. Pemrograman Web Dinamis Menggunakan Php

dan Mysql. Yogyakarta: Andi Publisher

Aryono Prihandito. (1988) Proyeksi Peta. Yogyakarta : Penerbit Kanisius

Ashar, Darul (2014). Sistem Informasi Geografis Lokasi Pangkalan Ojek

Kabupaten Kendal Berbasis Web. Semarang : Universitas Stikubank,

Skripsi.

Betha Sidik , Ir. 2003. MySQL Untuk Pengguna, Administrator,dan

Pengembangan Aplikasi Web. Bandung : Informatika Bandung.

Denny Carter, Irma Agtrisari (2003). Desain dan Aplikasi SIG, Jakarta : PT

Elex Komputindo.

Getting Started Google Maps API (2016). Getting Started google Maps API.

Available at :

https://developers.google.com/maps/documentation/javascript/tutorial

diakses pada tanggal 16 Juni 2016 pukul 13.00 WIB

Getting Started Google Maps Distance-Matrix API (2016). Getting Started

google Maps API. Available at

:https://developers.google.com/maps/documentation/distance-

matrix/intro diakses pada tanggal 19 Juni 2016] pukul 11.00 WIB.

Jogiyanto, H.M. 2001. Analisis dan Dimensi Sistem Informasi.Yogyakarta :

Andi Offset.

Jogiyanto, H.M. 1990. Analisis & Desain Sistem Informasi.Yogyakarta : Andi

Offset.

Kusuma, Stephanus Wijaya Nata (2016). Sistem informasi geografis penataan

sekolah dasar dan pemindahan guru : studi kasus Dinas Pendidikan


https://developers.google.com/maps/documentation/javascript/tutorial

https://developers.google.com/maps/documentation/distance-matrix/intro

https://developers.google.com/maps/documentation/distance-matrix/intro

108

Pemuda dan Olahraga Kabupaten Magelang .Yogyakarta : Universitas

Sanata Dharma, Skripsi.

Nugroho, Bunafit. 2004. PHP dan MySQL dengan Editor Dreamweaver

MX.Yogyakarta : Andi Offset

Nugroho, Bunafit,2004, Aplikasi Pemrograman Web Dinamis dengan PHP

dan MySQL, Yogyakarta : Gava Media


APLIKASI INFORMASI WISATA DAN HOTEL DI KABUPATEN … filei APLIKASI INFORMASI WISATA DAN HOTEL DI...

Documents

Transcript of APLIKASI INFORMASI WISATA DAN HOTEL DI KABUPATEN … filei APLIKASI INFORMASI WISATA DAN HOTEL DI...