BAB III ANALISIS DAN PERANCANGAN

(1)

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

(2)

Gambar 3.1 Gianyar Tourism Map

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

(3)

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.

(4)

Gambar 3.3 Gambaran Sistem Lama

(5)

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.

(6)

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

(7)

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

(8)

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.

(9)

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.

(10)

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

(11)

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.

(12)

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.

(13)

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.

(14)

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

(15)

Gambar 3.10 Activity Diagram Memilih Objek Terdekat

(16)

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.

(17)

Gambar 3.12 Activity Diagram Pengaturan

(18)

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

(19)

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.

(20)

Gambar 3.14 Activity Diagram Contact Form

(21)

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

(22)

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

(23)

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

(24)

Gambar 3.18 Activity Diagram Manipulasi Kategori

(25)

Gambar 3.19 Activity Diagram Melihat Kategori

(26)

Gambar 3.20 Activity Diagram Menambah Kategori

(27)

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.

(28)

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.

(29)

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

(30)

Gambar 3.24 Activity Diagram Manipulasi Objek

(31)

Gambar 3.25 Activity Diagram Setting Contact Form

(32)

Gambar 3.26 Activity Diagram Setting About

(33)

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

(34)

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

(35)

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

yang dimiliki oleh kelas ini adalah sebagai berikut:

Gambar 3.30 Class Db

(36)

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:

(37)

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

(38)

(39)

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

(40)

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

(41)

a. Desain User Interface Pengguna Akhir

(42)

Gambar 3.37 Desain Halaman Utama

(43)

Gambar 3.38 Desain Halaman Google Map

(44)

Gambar 3.39 Desain Halaman Directories

(45)