BAB III ANALISIS DAN PERANCANGAN

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.

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:

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.

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

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.

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

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:

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.

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

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,

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.

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.

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.

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.

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:

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:

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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:

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,

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:

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.

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.

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.

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:

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:

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:

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:

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:

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:

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.

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.

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.

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.

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.

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.

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.

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.

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:

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:

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:

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:

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:

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:

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:

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.

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.