bab iii analisis dan perancangan
DESCRIPTION
dhgfTRANSCRIPT
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.