29

BAB III

ANALISIS DAN PERANCANGAN

Tujuan dari penyusunan tugas akhir ini adalah untuk menghasilkan sebuah

aplikasi berbasis website mobile sebagai pemecahan dari permasalahan yang

diangkat. Untuk menghasilkan aplikasi yang dimaksud ada beberapa tahapan yang

harus dilakukan yang disesuaikan dengan metode pengembangan perangkat lunak

yang dijelaskan pada bab pendahuluan laporan ini.

3.1 Gambaran Sistem Lama

Ada beberapa cara yang dilakukan oleh para wisatawan yang berkunjung

ke Bali untuk menemukan lokasi-lokasi wisata yang menarik khususnya di

kabupaten Gianyar, baik wisatawan asing maupun wisatawan domestik.

Wisatawan asing biasanya menggunakan jasa pemandu wisata untuk memandu

perjalanan wisatanya. Tetapi tidak jarang juga wisatawan domestik melakukan hal

yang sama yaitu menggunakan jasa pemandu wisata.

30

Gambar 3.1 Gianyar Tourism Map

Sumber: http://desnantara-tamasya.blogspot.com (2012:06)

Disamping menggunakan jasa pemandu wisata, wisatawan dapat

menggunakan sarana bantuan seperti brosur-brosur yang dilengkapi peta yang bisa

didapatkan di toko-toko buku atau disediakan di beberapa hotel di Bali. Selain itu

wisatawan juga dapat memperoleh informasi dari dinas pariwisata khususnya

kabupaten Gianyar, baik bertanya secara langsung ke dinas terkait, melalui

telepon ataupun dari informasi-informasi yang disediakan di internet seperti

website Dinas Pariwisata Kabupaten Gianyar berikut ini:

31

Gambar 3.2 Tampilan Website Dinas Pariwisata Kabupaten Gianyar

Sumber : http://www.gianyartourism.com (2012:06)

Gambar diatas merupakan tampilan website milik Dinas Pariwisata

Kabupaten gianyar yang memberikan informasi mengenai objek-objek wisata

yang ada di kabupaten gianyar. Informasi yang diberikan berupa gambar dan

deskripsi mengenai objek wisata tertentu.

Untuk menuju lokasi objek wisata wisatawan dapat melihat petunjuk arah

yang ada hampir di setiap persimpangan jalan yang ada di Bali. Akan tetapi, disaat

wisatawan kehilangan arah, hal yang bisa dilakukan adalah bertanya kepada

penduduk setempat. Tentu saja hal ini akan menimbulkan kendala lagi jika antara

wisatawan dengan penduduk tidak saling mengerti bahasa yang digunakan.

32

Gambar 3.3 Gambaran Sistem Lama

Diagram aktivitas diatas memberikan gambaran tentang sistem yang

sedang berjalan dimulai dari melihat-lihat objek wisata yang ada pada brosur-

brosur atau iklan-iklan yang lain. Setelah mengetahui alamat suatu objek wisata,

wisatawan mencari alamat tersebut pada peta. Kemudian setelah mendapatkan

33

gambaran mengenai lokasi suatu objek, wisatawan berangkat menuju lokasi

tersebut.

Pada saat dijalan wisatawan dapat melihat petunjuk arah dan jika

mengetahui jalan menuju lokasi wisatawan akan sampai di tempat tujuan. Jika

wisatawan tidak mengetahui jalan atau kehilangan arah, wisatawan dapat bertanya

pada penduduk sekitar. Setelah mendapatkan petunjuk, wisatawan dapat

melanjutkan perjalanan menuju lokasi, begitu seterusnya hingga sampai di lokasi

tujuan. Akan tetapi, jika pada saat bertanya kepada penduduk sekitar wisatawan

tidak mendapatkan petunjuk, baik karena penduduk yang tidak mengetahui alamat

yang dimaksud atau karena tidak mengerti dengan bahasa yang digunakan, maka

wisatawan akan tersesat. Tentu saja wisatawan tidak ingin mengalami hal seperti

ini.

3.2 Gambaran Umum Sistem Usulan

Sistem yang akan dibangun dalam tugas akhir ini adalah sebuah aplikasi

Sistem Informasi Geografis berbasis web yang dapat diakses menggunakan

perangkat mobile, untuk mendapatkan informasi-informasi tentang objek wisata,

lokasi keberadaan pengguna, petunjuk arah, serta objek-objek terdekat yang dapat

membantu wisatawan dalam menemukan objek wisata yang ingin dikunjungi.

Pengguna sistem ini akan dibagi menjadi 2 bagian. Bagian yang pertama

adalah Administrator Sistem yang memiliki tugas untuk memanipulasi data dan

melakukan pengaturan sistem, kemudian bagian yang kedua adalah pengguna

akhir (end user), yaitu orang yang menggunakan fasilitas-fasilitas yang disediakan

oleh sistem.

34

3.3 Analisis Kebutuhan

Hal pertama yang perlu dilakukan dalam analisis kebutuhan sistem adalah

menentukan dan mengungkapkan kebutuhan sistem. Kebutuhan sistem terbagi

menjadi dua yaitu: kebutuhan sistem fungsional dan kebutuhan sistem non-

fungsional, yang diperlukan untuk mencapai tujuan yang ingin dicapai.

3.3.1 Kebutuhan Fungsional

Kebutuhan fungsional adalah kebutuhan-kebutuhan yang memiliki

keterkaitan langsung dengan sistem. Kebutuhan fungsional dari aplikasi ini

meliputi:

a. Kebutuhan pengguna

1) Melihat tampilan peta dalam bentuk peta digital

2) Mencari posisi suatu tempat pada peta

3) Menemukan lokasi keberadaan pengguna

4) Mendapatkan petunjuk arah menuju lokasi tertentu

5) Mendapatkan informasi objek wisata

6) Mendapatkan objek-objek terdekat dari suatu lokasi

7) Menghubungi pemilik website

8) Melihat informasi tentang website

b. Kebutuhan administrator

1) Melakukan login ke dalam sistem

2) Memanipulasi data objek wisata

3) Memanipulasi data kategori

4) Memanipulasi modul slideshow

35

5) Melakukan pengaturan standar peta

6) Melakukan konfigurasi formulir kontak

7) Memanipulasi informasi tentang website

8) Melakukan logout

3.3.2 Kebutuhan Non-fungsional

Kebutuhan non-fungional adalah kebutuhan yang tidak secara langsung

terkait dengan fitur tertentu di dalam sistem.

a. Kebutuhan perangkat keras

Kebutuhan perangkat keras dalam membangun aplikasi ini dibagi

menjadi perangkat keras administrator sistem dan perangkat keras

pengguna. Untuk perangkat keras administrator sistem dalam hal ini

menggunakan sebuah notebook dengan spesifikasi sebagai berikut:

1) Prosesor Intel Core i3-2330M 2.20GHz

2) RAM 2GB

3) Harddisk 500GB

4) VGA nVidia GeForce 520M 1GB

5) Perangkat standar input dan output

Kemudian untuk perangkat keras pengguna agar dapat menggunakan

aplikasi ini minimal menggunakan perangkat mobile atau smartphone

dengan resolusi layar minimal 320x240 piksel.

b. Kebutuhan perangkat lunak

Adapun perangkat lunak yang digunakan dalam membangun aplikasi

ini adalah sebagai berikut:

36

1) Sistem operasi Microsoft Windows 7

2) Adobe Photoshop CS3

3) Web Browser Mozilla Firefox 14.0.1

4) Notepad++ 6.1.3

3.4 Desain Sistem

Setelah melakukan analisis terhadap sistem, sesuai dengan metode SDLC

maka hal selanjutnya yang harus kita lakukan adalah membuat rancangan atau

desain sistem. Dalam pengembangan aplikasi ini beberapa rancangan yang dibuat

adalah use case diagram, activity diagram, class diagram, rancangan database

dan desain user interface.

3.4.1 Use Case Diagram

Use case di dalam laporan ini akan melibatkan 2 aktor, yaitu: pengguna

akhir dan administrator sistem. Use case akan dibagi menjadi 2 bagian. Bagian

pertama adalah use case pengguna akhir dan yang kedua adalah use case

administrator sistem.

Gambar 3.4 Use Case Diagram Umum

37

a. Use Case Pengguna Akhir

Use case pengguna akhir ini menjelaskan tentang apa yang dikerjakan

oleh pengguna akhir.

Gambar 3.5 Use Case Diagram Pengguna Akhir

Use case umum pengguna akhir memiliki aktor utama pengguna akhir

yang dilambangkan dengan simbol orang dengan label user dibawahnya.

Dari diagram diatas diperlihatkan bahwa pengguna dapat melakukan

beberapa tindakan seperti: melihat peta, mengatur tampilan peta, melihat

objek wisata, mengirim pesan ke pengelola sistem, serta melihat halaman

informasi situs.

Pada saat melihat peta, pengguna juga dapat melakukan beberapa hal

yaitu: mendeteksi posisi keberadaan pengguna, mencari lokasi suatu

tempat dan mendapatkan petunjuk arah. Setelah mendeteksi keberadaan

atau menemukan lokasi tertentu, pengguna juga dapat melihat objek-objek

38

terdekat dari lokasi tersebut. Kemudian untuk dapat melihat objek wisata,

pengguna harus memilih kategori terlebih dahulu.

b. Use Case Administrator Sistem

Use case pengguna akhir ini menjelaskan tentang apa yang dikerjakan

oleh administrator.

Gambar 3.6 Use Case Diagram Administrator Sistem

Use case umum administrator sistem memiliki aktor utama

administrator sistem yang dilambangkan dengan simbol orang dengan

label administrator dibawahnya. Diagram diatas menggambarkan tentang

tindakan-tindakan yang dapat dilakukan oleh administrator sistem, yaitu:

memanipulasi data kategori, memanipulasi data objek wisata,

memanipulasi modul slideshow, memanipulasi halaman informasi situs,

39

melakukan pengaturan peta dan melakukan pengaturan forumulir kontak,

dimana semua proses tersebut hanya dapat dilakukan setelah administrator

sistem melakukan proses login terlebih dahulu.

3.4.2 Activity Diagram

Activity diagram menjelaskan aktivitas-aktivitas yang dilakukan secara

sistematis. Diagram ini mirip dengan flowchart. Dalam laporan ini activity

diagram akan dibagi menjadi 2, yaitu: activity diagram pengguna akhir dan

administrator sistem.

a. Activity Diagram Pengguna Akhir

Activity diagram pengguna akhir dijelaskan di dalam beberapa

langkah, dimulai dari langkah yang paling umum, yaitu halaman utama

aplikasi.

Gambar 3.7 Activity Diagram Halaman Utama

40

Pada saat pertama kali pengguna menggunakan aplikasi ini, maka

yang pertama kali muncul adalah halaman utama. Pada halaman utama ada

beberapa menu yang dapat dipilih oleh pengguna, seperti: halaman Google

Map, halaman Directories, halaman Settings, halaman Contact, dan

halaman About. Setelah pengguna memilih salah satu menu maka akan

diarahkan ke masing-masing tampilan halaman.

Ketika pengguna memilih menu Google Map, sistem akan

menampilkan halaman Google Map dan dapat mengakses fitur-fitur yang

terdapat didalamnya.

Gambar 3.8 Activity Diagram Deteksi Lokasi

41

Salah satu fitur yang ada dalam aplikasi ini adalah fitur geolocation

atau mendeteksi keberadaan pengguna. Pertama sistem akan memberikan

pertanyaan apakah diijinkan untuk mendeteksi lokasi atau tidak. Jika

diijinkan, sistem akan melanjutkan pada tahap pencarian lokasi, kemudian

jika lokasi ditemukan maka sistem akan menambahkan penanda (marker),

menampilkan informasi lokasi serta menampilkan peta. Jika tidak diijinkan

atau pada saat tahap pencarian lokasi tidak ditemukan, maka sistem akan

menampilkan peta kosong tanpa penanda dan informasi lokasi. Setelah itu

pengguna dapat mengakses pilihan-pilihan lain yang ada pada menu atau

memilih untuk keluar.

Selain fitur geolocation, pengguna juga dapat mencari lokasi suatu

tempat pada peta. Sistem akan menampilkan formulir berisi field nama

tempat yang akan dicari.

42

Gambar 3.9 Activity Diagram Pencarian Lokasi

Setelah pengguna melakukan submit form, jika lokasi ditemukan maka

sistem akan menambahkan penanda dan memberikan informasi mengenai

lokasi tersebut dan menampilkannya pada peta. Jika tidak, sistem akan

menampilkan peta kosong. Kemudian pengguna dapat memilih menu

lainnya.

Setelah pengguna mendeteksi keberadaan dengan menggunakan fitur

geolocation atau mencari lokasi tertentu, pengguna juga dapat mencari

objek-objek terdekat dari tempat tersebut. Lalu sistem akan menampilkan

daftar objek kategori objek-objek terdekat.

43

Gambar 3.10 Activity Diagram Memilih Objek Terdekat

Satu lagi fitur yang dapat digunakan oleh pengguna adalah mencari

petunjuk arah dari suatu tempat ke tempat lainnya, seperti yang

digambarkan pada diagram berikut ini:

44

Gambar 3.11 Activity Diagram Mencari Petunjuk Arah

Sistem akan menampilkan formulir yang berisi 2 field sebagai

masukan untuk lokasi asal dan lokasi tujuan. Setelah melakukan submit

form, jika kedua lokasi yang dimaksud ditemukan, maka sistem akan

menampilkan garis petunjuk arah disertai dengan detil dalam bentuk teks.

Tetapi, jika salah satu lokasi atau keduanya tidak ditemukan, maka sistem

akan menampilkan peta kosong. Setelah itu pengguna dapat memilih menu

lainnya.

Disamping fitur-fitur yang ada pada Google Map, pengguna juga

dapat melakukan beberapa pengaturan yang berhubungan dengan sistem.

Proses pengaturan dilakukan seperti gambar berikut ini:

45

Gambar 3.12 Activity Diagram Pengaturan

Setelah pengguna memilih pengaturan sistem akan menampilkan

halaman pengaturan yang berisi formulir properti-properti yang dapat di

kostumasi. Kemudian pengguna dapat melakukan beberapa pengaturan

dan setelah melakukan submit form sistem akan melakukan validasi data.

Jika data valid, data akan tersimpan pada session, sedangkan jika tidak

valid maka sistem akan menampilkan kembali halaman pengaturan.

Setelah itu pengguna dapat memilih menu lainnya.

46

Pengguna juga dapat memilih kategori-kategori untuk melihat detil

suatu objek wisata. Secara lengkap akan dijelaskan melalui diagram

berikut ini:

Gambar 3.13 Activity Diagram Directories

Pada saat pengguna memilih menu directories sistem akan

menampilkan halaman directories yang berisi daftar kategori dan objek

wisata yang ada pada kategori tersebut. Kemudian jika pengguna memilih

sub direktori, maka juga akan tampil penjelasan tentang kategori yang

terpilih, sub direktori, serta objek-objek wisata yang ada di dalamnya.

47

Kemudian setelah pengguna memilih objek wisata, sistem akan

menampilkan halaman yang memuat informasi-informasi tentang objek

wisata tersebut, sesuai dengan data yang dimasukkan administrator sistem.

Setelah itu pengguna dapat menggunakan beberapa fitur yang

disediakan pada aplikasi. Fitur pertama adalah memilih kategori objek

terdekat dari tempat tersebut. Setelah itu akan muncul pilihan objek-objek

yang terdekat. Fitur kedua adalah mendapatkan petunjuk arah menuju

objek wisata yang dipilih, dimana prosesnya sama seperti fitur pada

Google Map. Setelah itu pengguna dapat mengakses menu lainnya atau

keluar dari sistem.

Untuk memberikan pelayanan yang baik kepada pengguna, sistem

juga menyediakan fitur contact form, yaitu fitur untuk mengirimkan pesan

kepada pengelola situs.

48

Gambar 3.14 Activity Diagram Contact Form

Setelah pengguna memilih menu contact sistem akan menampilkan

formulir yang berisi beberapa field identitas pengguna dan pesan yang

akan dikirim. Setelah pengguna melakukan submit form sistem akan

melakukan validasi terhadap data-data yang dimasukkan. Jika data valid

maka sistem akan mengirimkan data-data tersebut kepada pengelola situs,

sedangkan jika data tidak valid maka sistem akan kembali menampilkan

contact form.

49

Fitur terakhir yang dapat diakses oleh pengguna adalah melihat

halaman informasi detil situs atau yang biasa dikenal dengan halaman

about. Diagram aktivitasnya adalah sebagai berikut:

Gambar 3.15 Activity Diagram About

Setelah pengguna memilih menu about sistem akan menampilkan

halaman yang berisi informasi mengenai situs, sesuai data yang

dimasukkan oleh administrator sistem. Kemudian pengguna dapat memilih

menu-menu lainnya atau keluar dari jendela aplikasi.

b. Activity Diagram Administrator Sistem

Activity diagram administrator sistem menjelaskan tentang aktivitas-

aktivitas yang dilakukan oleh administrator sistem dalam hubungannya

dengan sistem atau aplikasi. Langkah pertama yang harus dilakukan

adalah melakukan proses login.

50

Gambar 3.16 Activity Diagram Login

Aktor utama dalam diagram aktivitas ini adalah administrator sistem

yang selanjutnya akan disebut admin. Setelah admin memasukkan URL

administrator, maka sistem akan menampilkan halaman login terlebih

dahulu dilanjutkan dengan admin memasukkan data login dan melakukan

submit data. Setelah itu sistem akan melakukan validasi data. Jika data

valid maka data akan dikirim ke server, sedangkan jika tidak maka sistem

akan menampilkan halaman login. Setelah data dikirim ke server, sistem

akan melakukan pemeriksaan terhadap data-data tersebut. Jika login

berhasil, sistem akan menampilkan halaman dashboard dan admin dapat

51

mengakses menu-menu yang ada di dalamanya. Sedangkan jika login

gagal, maka sistem kembali menampilkan halaman login.

Gambar 3.17 Activity Diagram Dashboard

Pada halaman dashboard admin dapat memilih menu-menu untuk

melakukan manipulasi data ataupun melakukan konfigurasi sistem. Menu-

menu yang dimaksud adalah memilih halaman kategori, objek, map

settings, flexslider, contact dan about. Jika admin memilih salah satu

menu, maka sistem akan menampilkan halaman menu yang dipilih

tersebut.

52

Gambar 3.18 Activity Diagram Manipulasi Kategori

Pilihan pertama adalah memanipulasi data kategori, seperti yang

digambarkan pada use case diagram pada sub bab sebelumnya. Proses

manipulasi yang dimaksud adalah dari melihat daftar kategori, menambah,

melakukan update dan menghapus kategori.

53

Gambar 3.19 Activity Diagram Melihat Kategori

Proses dimulai dari memilih daftar kategori, kemudian sistem akan

menampilkan daftar kategori. Setelah itu jika kategori yang terpilih

memiliki sub kategori maka sistem akan menampilkan daftar sub kategori.

Selain itu admin dapat memilih proses manipulasi lainnya, misalnya

menambah kategori baru.

54

Gambar 3.20 Activity Diagram Menambah Kategori

Sistem akan menampilkan formulir kategori baru, dimana admin dapat

mengisi data-data yang dikehendaki untuk kategori baru tersebut. Setelah

itu sistem akan melakukan validasi data, jika data yang dikirim valid maka

sistem akan menambahkan kategori tersebut dan admin dapat melihat

daftar kategori yang terbaru. Sedangkan jika data yang dikirim tidak valid

maka sistem akan menampilkan kembali formulir kategori baru.

55

Gambar 3.21 Activity Diagram Edit Kategori

Selain menambah kategori baru admin juga dapat melakukan editing

terhadap kategori-kategori yang sudah ada. Sistem akan menampilkan

formulir edit kategori dan admin dapat memanipulasi data-data yang ada

pada kategori. Jika data yang dimasukkan oleh admin valid maka sistem

akan menyimpan hasil editing tersebut dan menampilkan daftar kategori.

Jika tidak valid maka sistem akan menampilkan kembali formulir edit

kategori.

Admin juga dapat menghapus kategori yang sudah ada. Langkah-

langkahnya akan dijelaskan pada diagram dibawah ini:

56

Gambar 3.22 Activity Diagram Hapus Kategori

Setelah admin memilih salah satu kategori untuk dihapus sistem akan

menampilkan dialog konfirmasi penghapusan kategori. Jika admin

mengkonfirmasi penghapusan tersebut maka kategori terpilih akan dihapus

kemudian sistem menampilkan daftar kategori terbaru, sedangkan jika

tidak maka sistem akan menampilkan daftar kategori tanpa perubahan.

Selanjutnya admin dapat memilih menu lainnya.

Selain melakukan manipulasi terhadap data kategori admin juga dapat

melakukan manipulasi pada data objek wisata dan modul flexslider,

57

dimana secara umum proses yang dilakukan hampir sama dan yang

berbeda hanyalah field yang dapat diisi oleh admin. Untuk proses

manipulasi objek secara umum adalah sebagai berikut:

Gambar 3.23 Activity Diagram Manipulasi Objek

Admin dapat melihat data objek wisata, menambah objek baru,

melakukan editing serta menghapus objek yang sudah ada. Begitu juga

untuk modul slideshow flexslider, admin dapat melakukan manipulasi data,

hanya saja disini admin dapat melakukan konfigurasi modul yang secara

umum digambarkan dengan diagram berikut ini:

58

Gambar 3.24 Activity Diagram Manipulasi Objek

Admin dapat melakukan manipulasi terhadap modul flexslider seperti:

melihat, menambah gambar, edit, menghapus serta melakukan pengaturan

seperti mengatur animasi.

59

Gambar 3.25 Activity Diagram Setting Contact Form

Pada saat admin memilih menu setting contact form maka sistem akan

menampilkan formulir pengaturan. Setelah itu admin dapat melakukan

pengaturan. Jika data yang dimasukkan valid, maka sistem akan

menyimpan pengaturan tersebut dan admin dapat memilih menu lainnya.

Jika data yang dimasukkan tidak valid maka sistem kembali menampilkan

formulir pengaturan tanpa menyimpan perubahan pada pengaturan contact

form.

60

Gambar 3.26 Activity Diagram Setting About

Proses pengaturan halaman about hampir sama dengan pengaturan

pada contact form. Perbedaan terletak pada field yang dapat diisi oleh

admin. Sistem akan menampilkan formulir pengaturan dan admin dapat

melakukan pengaturan. Jika data yang dikirimkan valid maka sistem akan

menyimpan pengaturan tersebut, sedangkan jika data tidak valid maka

sistem akan menampikan kembali formulir pengaturan. Setelah itu admin

dapat memilih menu lain untuk melakukan manipulasi.

61

3.4.3 Class Diagram

Diagram kelas atau class diagram merupakan inti dari pemrograman

berbasis objek karena diagram ini memberikan pemetaan terhadap kelas-kelas

yang digunakan oleh suatu aplikasi. Adapun aplikasi Sistem Informasi Geografis

ini memiliki diagram kelas sebagai berikut:

Gambar 3.27 Class Diagram

Dari diagram diatas dapat diketahui bahwa aplikasi ini memiliki 17 kelas

yang memiliki fungsi serta relasi masing-masing. Class Image adalah kelas yang

berfungsi untuk memproses permintaan yang berhubungan dengan pengolahan

gambar. Dalam operasioanalnya kelas ini menggunakan kelas lain yang bernama

Class ImageResize dan menggunakan Class Db. Class Image ini memiliki 1

property dan beberapa method seperti gambar berikut ini:

62

Gambar 3.28 Class Image

Class ImageResize menjadi inti dari pengolahan gambar seperti: mengubah

ukuran gambar, membuat thumbnail dan sebagainya. Property dan method yang

dimiliki oleh kelas ini adalah sebagai berikut:

Gambar 3.29 Class ImageResize

Kelas yang selanjutnya adalah Class Db yang merupakan inti dari proses

manipulasi database. Kelas ini digunakan oleh beberapa kelas lainnya yaitu:

63

Class Image, Class ObjectModel dan Class Configuration. Property dan method

yang dimiliki oleh kelas ini adalah sebagai berikut:

Gambar 3.30 Class Db

Kelas yang selanjutnya adalah Class ObjectModel yang menjadi template

dari beberapa kelas seperti: Class ObjectCore, Class Category dan Class

Flexslider. Property dan method yang dimiliki oleh kelas ini adalah seperti

gambar dibawah ini:

64

Gambar 3.31 Class ObjectModel

Class ObjectModel memiliki beberapa property dan method seperti

gambar diatas dan beberapa kelas seperti: Class ObjectCore, Class Category dan

Class Flexslider mewarisi Class ObjectModel ini. Adapun property dan method

yang dimiliki kelas-kelas tersebut adalah sebagai berikut:

Gambar 3.32 Class Category, Class Flexslider dan Class ObjectCore

65

Kelas lain yang menjadi induk dari beberapa kelas lainnya adalah Class

Controller, yang menjadi template bagi kelas-kelas seperti: Class

IndexController, MapController, DirectoryController dan ObjectController,

SettingController, ContactController dan AboutController. Adapun property dan

method yang dimiliki oleh kelas-kelas tersebut adalah sebagai berikut:

Gambar 3.33 Class Controller dan turunannya

Kelas yang selanjutnya adalah Class GoogleMap. Kelas ini menjadi inti

dalam pemrosesan peta yang diambil dari Google Map. Adapun property dan

method yang ada pada kelas ini adalah seperti gambar dibawah ini:

66

Gambar 3.34 Class GoogleMap

67

Kelas yang terakhir adalah Class Configuration yang menjadi inti

pengaturan pada sistem. Adapun property dan method pada kelas ini adalah

sebagai berikut:

Gambar 3.35 Class Configuration

Dari gambar diatas terlihat bahwa Class Configuration menggunakan kelas

lain yaitu Class Db, karena data konfigurasi tersimpan di dalam database dan

untuk menyimpan data ke dalam database sistem memerlukan Class Db.

3.4.4 Desain Database

Aplikasi Sistem Informasi Geografis ini menggunakan database untuk

menyimpan data-data yang berhubungan dengan informasi pariwisata untuk

daerah Gianyar. Adapun skema database yang digunakan adalah sebagai berikut:

68

Gambar 3.36 Skema Database

Dari skema diatas terlihat bahwa database yang digunakan memiliki 5

buah tabel yaitu: map_category, map_object, map_flexslider, map_settings, dan

map_user, dimana antara tabel map_category dengan map_object memiliki

hubungan satu ke banyak yang artinya 1 kategori bisa memiliki banyak objek,

sedangkan 1 objek hanya dapat memiliki 1 kategori.

3.4.5 Desain User Interface

User interface merupakan bagian penting pada suatu aplikasi, karena

bagian ini yang menjembatani pengguna dengan sistem. Desain user interface

yang baik akan memudahkan pengguna dalam menggunakan aplikasi yang dibuat.

Dalam laporan ini desain user interface dibagi menjadi 2 bagian, yaitu:

user interface pengguna akhir dan administrator sistem.

69

a. Desain User Interface Pengguna Akhir

Pada aplikasi ini user interface bersifat dinamis karena akan diakses

dengan perangkat mobile yang memiliki resolusi layar yang berbeda-beda.

Bagian yang pertama adalah desain halaman utama yang menjadi landasan

pertama pada saat pengguna menggunakan aplikasi berbasis web mobile

ini. Pada halaman utama terdapat beberapa bagian, yaitu: header yang

berisi logo dan tombol menu, kemudian slideshow gambar, daftar menu

dan footer.

70

Gambar 3.37 Desain Halaman Utama

Kemudian halaman selanjutnya adalah halaman Google Map yang

memiilik struktur dimulai dari header, kemudian peta, menu navigasi, input

form dan footer.

71

Gambar 3.38 Desain Halaman Google Map

Setelah halaman Google Map ada halaman directory yang memiliki

struktur dimulai dari header, gambar dan deskripsi, daftar sub direktori,

daftar objek wisata, serta footer.

72

Gambar 3.39 Desain Halaman Directories

Halaman selanjutnya adalah halaman objek yang memuat informasi-

informasi tentang suatu objek wisata. Struktur halaman ini adalah dimulai

dari header, gambar, detil objek dan deskripsi, menu navigasi menuju peta,

pencarian objek terdekat dan footer.

73

Gambar 3.40 Desain Halaman Object

Desain user interface selanjutnya adalah desain halaman contact yang

berisi form dengan beberapa field di dalamnya. Strukturnya dimulai dari

header, form input dan footer.

74

Gambar 3.41 Desain Halaman Contact Form

Halaman terakhir adalah halaman about yang berisi informasi-

informasi tentang situs. Strukturnya dimulai dari header, blok informasi

dan footer.

75

Gambar 3.42 Desain Halaman About

b. Desain User Interface Administrator Sistem

Untuk user interface admin terdiri dari beberapa bagian, dimulai dari

halaman login, dashboard, category, object, map settings, flexslider,

contact dan about.

76

Gambar 3.43 Desain Halaman Login

Gambar diatas adalah desain halaman login yang berisi field untuk

memasukkan username, password, serta tombol submit. Desain

selanjutnya adalah halaman dashboard yang gambarnya sebagai berikut:

77

Gambar 3.44 Desain Halaman Dashboard

Desain berikutnya adalah halaman manipulasi kategori yang memiliki

karakteristik yang hampir sama dengan halaman manipulasi objek dan

manipulasi flexslider. Desainnya seperti gambar dibawah ini:

78

Gambar 3.45 Desain Halaman Manipulasi Kategori

Halaman manipulasi objek memiliki struktur halaman yang sama

dengan halaman manipulasi kategori yang terdiri dari sidebar kiri dan blok

utama yang berisi judul halaman, teks instruksi, form input, daftar objek,

tombol edit dan hapus, form update dan teks footer, seperti gambar

dibawah ini:

79

Gambar 3.46 Desain Halaman Manipulasi Objek

Hampir sama dengan kedua halaman sebelumnya, halaman manipulasi

flexslider terdiri dari blok sidebar dan blok utama, hanya saja pada blok

utama terdapat field untuk mengatur animasi modul, seperti gambar

berikut ini:

80

Gambar 3.47 Desain Halaman Manipulasi Flexslider

Halaman selanjutnya adalah halalaman map settings yang merupakan

halaman untuk melakukan pengaturan terhadap tampilan peta. Adapun

desain dari halaman ini adalah sebagai berikut:

81

Gambar 3.48 Desain Halaman Map Settings

Setelah halaman map settings ada 2 halaman lagi yaitu: halaman

konfigurasi contact dan kostumasi about yang masing-masing untuk

mengatur contact form dan halaman informasi website. Adapun desain

halaman contact untuk admin adalah sebagai berikut:

82

Gambar 3.49 Desain Halaman Konfigurasi Contact

Selanjutnya halaman terakhir adalah halaman admin untuk mengatur

isi informasi about. Desain dari halaman tersebut adalah sebagai berikut:

83

Gambar 3.50 Desain Halaman Konfigurasi About

Gambar diatas menunjukkan bahwa pada halaman tersebut berisi field

untuk melakukan pengaturan terhadap informasi yang akan ditampilkan

pada halaman about sebagai halaman untuk memberikan informasi tentang

website.