IV-1

BAB IV
PERANCANGAN
4.1 Perancangan Sistem
Perancangan sistem digambarkan dengan pemodelan sistem berbasis
object oriented analysis and design yaitu pemodelan Unified Modeling Language
(UML) yang memfokuskan pada solusi teknik secara terperinci untuk
menyediakan landasan bagi tahap implementasi. Adapun perancangan yang
dibuat, antara lain :

4.1.1 Tahap Perancangan

Adapun dalam tahap perancangan ini meliputi usecase diagram, class
diagram, activity diagram dan sequence diagram.
1.

Use case Diagram

Mendeskripsikan apa saja yang dapat dilakukan aktor ke sistem. Use
case diagram dalam aplikasi ini seperti tertera pada gambar 4.1.
<<extend>>

Melihat Daftar Tempat Main

User

Menampilkan Peta Rute Tempat

Main

Mencari Tempat Main

Melihat Info Aplikasi

Gambar 4.1 Use Case Diagram

User aplikasi ini adalah pengguna yang berasal dari masyarakat umum
ataupun wisatawan yang ingin mencari tempat main di kota bandung.
User tidak perlu melalukan login. User hanya meng-install aplikasi
pada handphone android dan mempunyai paket internet serta
mengaktifkan GPS. Dengan aplikasi ini user dapat mencari tempat main

IV-1

IV-2

dan melihat daftar list nama tempat main seperti wisata sejarah, kuliner,
taman dll dengan informasi tentang tempat main tesebut serta
menampilkan peta rute terpendek menuju tempat main.
a. Definisi Aktor
Definisi aktor adalah penjabaran aktor yang terlibat dalam aplikasi
seperti tertera pada tabel 4.1.

Tabel 4.1 Definisi Aktor

No

Fungsi

Deskripsi
User merupakan pengguna aplikasi yang
dapat melihat daftar tempat main (wisata,

1.

User

kuliner, tempat umum), mencari tempat

main yang di tuju dan melihat info
aplikasi.

b. Definisi Use case

Definisi use case adalah menggambarkan urutan interaksi aktor dengan
sistem tersebut dalam setiap use case utama. Daftar deskripsi use case
Aplikasi ini dapat dilihat pada tabel 4.2.

Tabel 4.2 Definisi Use Case

No

Fungsi

Deskripsi
Merupakan proses untuk menampilkan
daftar tempat main (wisata sejarah,

1.

Melihat daftar

kuliner, tempat nogkrong) sehingga user

tempat main

dapat memilih dan mengetahui deskripsi

data informasi serta peta rute dari tempat
main yang di tuju.

7.

Mencari tempat
main

Merupakan proses untuk mencari tempat

main (wisata, kuliner, tempat nogkrong)
yang terdapat di aplikasi.

IV-1

IV-3

8.

Melihat info

Merupakan informasi tentang aplikasi dan

aplikasi

langkah-langkah penggunaan aplikasi.

c. Use case Scenario

Use case scenario adalah alur proses yang berjalan antara aktor dengan
use case. Skenario dari masing-masing use case dari aplikasi seperti
tertera pada tabel 4.3 4.5.

Tabel 4.3 Use Case Scenario Melihat Daftar Tempat Main

Use Case Name

Goal In Context
Description
Related Use Case
Successful End
Condition
Failed End Condition
Actors
Trigger
Main Flow

Melihat Daftar Tempat Main

User Mendapatkan daftar nama-nama tempat
main, detail informasi dan peta
Fungsionalitas ini digunakan oleh user
melihat daftar tempat main
Penyajian daftar list tempat main
Aktor mendapatkan hasil dari daftar tempat
main
Aktor tidak mendapatkan hasil dari daftar
tempat main
User
Memilih icon Home
Step Action
1
User memilih icon home
(bergambar rumah)
2
Sistem menampilkan daftar namanama tempat main yang tersedia
3
User memilih nama tempat main
4
Sistem menampilkan detail informasi
dari tempat main yang dipilih user
5
Jika user ingin melihat rute maka
klik tombol PETA
6
Sistem mencari posisi user dengan
GPS
7
Sistem mencari posisi tempat main
tujuan
8
Sistem menghitung jarak dengan rute
terpendek dan alternatif jalan
9
Sistem menampilkan rute terpendek
dari posisi user dan tempat tujuan
dengan jalur berwarna biru
10
Sistem juga menampilkan rute
alternatif selain rute terpendek
dengan jalur berwarna merah
IV-1

IV-4

Extension

Step
2.1

4.1
6.1
7.1
8.1

9.1

10.1

Branching Action
Sistem gagal menampilkan daftar
nama-nama tempat main yang
tersedia
Sistem menampilkan detail informasi
dari tempat main yang dipilih user
Sistem gagal mencari posisi user
dengan GPS
Sistem gagal mencari posisi tempat
main tujuan
Sistem gagal menghitung jarak
dengan rute terpendek dan alternatif
jalan
Sistem gagal menampilkan rute
terpendek dari posisi user dan tempat
tujuan dengan jalur berwarna biru
Sistem gagal menampilkan rute
alternatif selain rute terpendek
dengan jalur berwarna merah

Tabel 4.4 Use Case Scenario Mencari Tempat Main

Use Case Name

Goal In Context
Description
Related Use Case
Successful End
Condition
Failed End Condition
Actors
Trigger
Main Flow

Mencari Tempat Main

User Mendapatkan nama tempat main yang
dicari
Fungsionalitas ini digunakan oleh user
mencari tempat main yang di tuju
Aktor mendapatkan hasil dari mencari
tempat main
Aktor tidak mendapatkan hasil dari mencari
tempat main
User
Memilih icon Search
Step Action
1
User memilih icon search
(bergambar teleskop)
2
Sistem menampilkan inputan
pencarian
3
User menginputkan nama tempat
main
4
Sistem mencari nama tempat main di
database
5
Jika data ada, maka sistem
menampilkan nama tempat main
6
User memilih nama tempat main
7
Sistem menampilkan detail informasi
dari tempat main
IV-1

IV-5

8
9
10
11
12

13

Extension

Step
5.1
7.1
9.1
10.1
11.1

12.1

13.1

Jika user ingin melihat rute maka

klik tombol PETA
Sistem mencari posisi user dengan
GPS
Sistem mencari posisi tempat main
tujuan
Sistem menghitung jarak dengan rute
terpendek dan alternatif jalan
Sistem menampilkan rute terpendek
dari posisi user dan tempat tujuan
dengan jalur berwarna biru
Sistem juga menampilkan rute
alternatif selain rute terpendek
dengan jalur berwarna merah
Branching Action
sistem gagal menampilkan nama
tempat main
Sistem gagal menampilkan detail
informasi dari tempat main
Sistem gagal mencari posisi user
dengan GPS
Sistem gagal mencari posisi tempat
main
Sistem gagal menghitung jarak
dengan rute terpendek dan alternatif
jalan
Sistem gagal menampilkan rute
terpendek dari posisi user dan tempat
tujuan dengan jalur berwarna biru
Sistem gagal menampilkan rute
alternatif selain rute terpendek
dengan jalur berwarna merah

Tabel 4.5 Use Case Scenario Info Aplikasi

Use Case Name

Goal In Context

Description

Related Use Case

Successful End
Condition
Failed End Condition
Actors

Melihat Info Aplikasi

User Mendapatkan informasi mengenai
aplikasi TEMA dan langkah-langkah
pemakaian aplikasi
Fungsionalitas ini digunakan oleh user untuk
melihat informasi aplikasi TEMA dan
langkah-langkah pemakaian aplikasi
Aktor mendapatkan hasil informasi aplikasi
TEMA
Aktor tidak mendapatkan hasil informasi
aplikasi TEMA
User
IV-1

IV-6

Trigger
Main Flow

Extension

2.

Memilih icon Info

Step Action
1
User memilih icon info
(bergambar tanda tanya)
2
Sistem menampilkan info aplikasi
TEMA dan langkah-langkah
pemakaian aplikasi
3
User melihat info aplikasi
Step Branching Action
2.1
sistem gagal menampilkan info
aplikasi

Class Diagram
Menggambarkan struktur dan deskripsi class, package dan objek
beserta hubungan satu sama lain. Class diagram dalam aplikasi ini
seperti tertera pada gambar 4.2.

Gambar 4.2 Class Diagram

IV-1

IV-7

3.

Activity Diagram
Membantu untuk mendeskripsikan interaksi aliran kontrol dari sistem
yang dituju. Activity selengkapnya dapat dilihat pada gambar 4.3 4.6.
user

sistem

Buka aplikasi
TEMA

Menampilkan daftar
nama-nama tempat main

Pilih menu daftar

tempat main

Menampilkan
informasi tempat main

memilih salah satu

nama tempat main

Gambar 4.3 Activity Diagram Daftar Tempat Main

user

sistem

Buka aplikasi
TEMA

Pilih menu
Search

menampilkan textbox
inputan tempat main

Input nama
tempat main

mencari data pada

database tempat main
No
Yes
Menampilkan nama
tempat main

Gambar 4.4 Activity Diagram Cari Tempat Main

IV-1

IV-8
us er

s is te m

memilih nama
tempat main

menampilkan
informasi tempat main

proses pencarian rute

dengan djikstra

klik tombol
"peta"

deteksi posisi
user

menghitung titik
user ke titik tujuan

memperoleh
rute terpendek

map menampilkan
rute terpendek

Gambar 4.5 Activity Diagram Menampilkan Rute Pada Peta

user

sistem

Membuka
aplikasi TEMA

Menampilkan Info TEMA dan langkahlangkah penggunaan aplikasi

Pilih menu Info

Gambar 4.6 Activity Diagram Info Aplikasi

3.

Sequence Diagram
Penggambaran keterhubungan atau interaksi antar objek dalam suatu
jangka waktu. Sistem sequence diagram terutama menampilkan
interaksi antara user dengan sistem. Sequence diagram dalam aplikasi
pencarian tempat main ini terdiri atas sequence diagram login, sequence
diagram tambah wisata alam, sequence diagram ubah wisata alam,
sequence diagram hapus wisata alam, sequence diagram search wisata
IV-1

IV-9

alam, sequence diagram tambah wisata modern, sequence diagram

ubah wisata modern, sequence diagram hapus wisata modern, sequence
diagram search wisata modern, sequence diagram tambah kuliner,
sequence diagram ubah kuliner, sequence diagram hapus kuliner,
sequence diagram search kuliner, sequence diagram tambah tempat
umum, sequence diagram ubah tempat umum, sequence diagram hapus
tempat umum, sequence diagram search tempat umum, sequence
diagram tambah pengguna, sequence diagram ubah pengguna,
sequence diagram hapus pengguna. Sequence selengkapnya dapat
dilihat pada gambar 4.7 - 4.10.
User

System

tema

1: klikbuttonPlace()
2: CekIdPlace()
3: Valid
4: GetNama()
5: GetAddress()
6: GetPicture()
7: View Place

Gambar 4.7 Sequence Diagram Lihat Daftar Tempat Main

User

System

tema

1: InputNama()
2: CekId()
3: valid
4: GetNama()
5: GetAddres()
6: GetPicture()
7: View Place List

Gambar 4.8 Sequence Diagram Cari Tempat Main

IV-1

IV-10

User

System

tema

Map

1: KlikPlace()
2: CekIdPlace()
3: Valid
4: GetNama()
5: GetDiscription()
6: GetKoordinat()
7: GetPicture()
8: View Single Place
9: KlikMap()
10: GetUserPosition()
11: SetPosition()
12: GetEndPosition()
13: SetEndPosition()

14: AddSimpulygDiKerjakan()
15: SimpulygDiTandai()
16: PerbandinganSemuaBobot()
17: SimpulFixygDiTandai()
18: Ruas diHapus()
19: GetSimpulFix_Finish()
20: Show Map Rute

Gambar 4.9 Sequence Diagram Tampilan Rute Tempat Main

User

System
1: KlikInfo()

2: View Info

Gambar 4.10 Sequence Diagram Info Aplikasi

4.1.2 Kelas Perancangan

Kelas perancangan terdiri dari menu utama, daftar tempat main, peta rute
tempat main, cari tempat main dan info aplikasi. Daftar tempat main terdiri dari
nama-nama wisata sejarah, kuliner, taman dll. Peta rute tempat main berisi tentang
rute terpendek menuju lokasi tempat main. Cari tempat main menggunakan

IV-1

IV-11

keyword nama tempat main yang di cari. Info aplikasi merupakan informasi
tentang aplikasi TEMA dan langkah-langkah penggunaan aplikasi tsb.
1.

Perancangan User Interface

User interface terdiri atas user interface menu utama, user interface
daftar tempat main, user interface deskripsi tempat main, user interface
rute dan jarak terdekat, user interface cari tempat main, user interface
info aplikasi. Perancangan masing-masing user interface dapat dilihat
pada gambar 4.11-4.35.

Gambar 4.11 User Interface Menu Utama

Gambar 4.12 User Interface Daftar Tempat Main

IV-1

IV-12

Gambar 4.13 User Interface Deskripsi Tempat Main

Gambar 4.14 User Interface Rute dan Jarak Terdekat

Gambar 4.15 User Interface Cari Tempat Main

IV-1

IV-13

Gambar 4.16 User Interface Info Aplikasi

4.2 Perancangan Menu

Perancangan menu menggambarkan menu-menu yang terdapat dalam
aplikasi TEMA. Perancangan menu dari aplikasi ini adalah sebagai berikut :
Menu Utama

Daftar

Cari

Daftar Nama
Tempat Main

Nama Tempat Main

Deskripsi Tempat
Main

Deskripsi Tempat
Main

Peta

Peta

Gambar 4.17 Perancangan Menu

IV-1

Info

IV-14

4.3 Perancangan Database

Desain database yang akan dibentuk untuk keperluan aplikasi TEMA yang
akan dibangun, Secara garis besar menggunakan tiga tabel dengan nama tabel,
jenis dan primary key seperti tertera pada tabel 4.6.
Tabel 4.6 Daftar Tabel Aplikasi

No.

Nama Tabel

Jenis

Primary Key

1.

graph

Tabel Induk

kode

2.

jalan

Tabel Induk

Kode

3.

tema

Tabel Induk

Kode

4.4 Dasar Fungsional Aplikasi

Aplikasi yang akan dibuat memiliki fungsi-fungsi utama yaitu seperti
tertera pada tabel 4.7.
Tabel 4.7 Definisi Fungsi

No
1.

Fungsi

Deskripsi

Daftar Tempat

Merupakan daftar tempat main yang meliputi wisata

Main

sejarah, kuliner, taman dll.

2.

Cari

3.

Info Aplikasi

Merupakan pencarian nama tempat main yang ingin di

tuju.
Merupakan info aplikasi TEMA dan langkah-langkah
penggunaan aplikasi.

IV-1