BAB IV

PERANCANGAN SISTEM

4.1 Perancangan Proses

Perancangan ini meliputi Use Case diagram, Activity diagram, Squence

diagram, Class diagram, ERD, Struktur Tabel, Struktur Program, Rancangan

Input, Rancangan Proses dan Rancangan Output.

4.2 Diagram Use Case

Diagram use case memperlihatkan hubungan-hubungan yang terjadi

antara aktor dengan use case dalam sistem, manfaat dari diagram use case adalah

untuk komunikasi. Skenario use case aplikasi berbasis web lokasi tempat wisata,

resort, hotel dan tempat kuliner menggunakan google maps api, adalah sebagai

berikut :

1. Aktor yang terlibat dalam aplikasi berbasis web lokasi tempat wisata, resort,

hotel dan tempat kuliner menggunakan google maps api ini adalah pengguna,

yaitu masyarakat dan admin

2. Aplikasi berbasis web lokasi tempat wisata, resort, hotel dan rumah makan

menggunakan google maps api ini dapat digunakan jika pengguna membuka

halaman web dahulu.

63

64

Gambar 4.1 Use Case Diagram

Berikut ini akan dijelaskan spesifikasi use case pada gambar 4.1 dengan

menggunakan tabel, antara lain :

Tabel 4.1 Spesifikasi Use Case – Login

Use Case Name Login

Summary Admin harus melakukan login untuk masuk ke sistem

Actor Admin

Description 1. Admin membuka halaman login sistem

2. Admin mengisi username dan password login

3. Sistem akan memverifikasi apakah data login tersebut

65

benar atau tidak.

4. Jika benar, sistem akan menampilkan halaman home

Tabel 4.2 Spesifikasi Use Case – Kelola Pariwisata

Use Case Name Kelola Pariwisata

Summary Kelola pariwisata merupakan proses admin untuk

melakukan penginputan data (nama tempat pariwisata,

foto-foto dan titik koordinat), update dan menghapus data

tempat wisata, resort, hotel tempat kuliner.

Actor Admin

Description 1. Admin membuka halaman web kelola pariwisata

2. Sistem akan menampilkan data mengenai tempat

wisata, resort, hotel dan tempat kuliner

3. Kemudian admin menginputkan data pariwisata

dengan lengkap sekaligus mengupload foto-foto

mengenai tempat tersebut.

4. Kemudian menyimpannya ke database

Tabel 4.3 Spesifikasi Use Case – Kelola Posisi Keberadaan Pengguna

Use Case Name Kelola Posisi Keberadaan Pengguna

Summary Kelola posisi ini untuk pengguna yang nantinya

digunakan pengguna pada fasilitas penelusuran rute.

Admin dapat melakukan penginputan (nama tempat

posisi, titik koordinat), update dan menghapus data posisi

pada sistem menggunakan halaman web.

Actor Admin

Description 1. Admin membuka halaman web kelola posisi.

2. Sistem akan menampilkan data mengenai tempat

wisata, resort, hotel dan tempat kuliner

66

3. Kemudian admin menginputkan letak posisi dan nama

posisi kemudian menyimpannya ke database

Tabel 4.4 Spesifikasi Use Case – Kelola Berita

Use Case Name Kelola Berita

Summary Admin dapat melakukan penginputan, update dan

menhapus data berita.

Actor Admin

Description 1. Admin membuka halaman web kelola berita

2. Sistem akan menampilkan data berita yang tersimpan

pada database.

3. Admin dapat memilih fasilitas tambah, update, hapus,

pencarian berita.

Tabel 4.5 Spesifikasi Use Case – Kelola Buku Tamu

Use Case Name Kelola Buku Tamu

Summary Admin dapat melihat buku tamu dan membalas pesan

yang di isi oleh pengunjung.

Actor Admin

Description 1. Admin membuka halaman web kelola buku tamu

2. Sistem akan menampilkan data mengenai buku tamu

yang disi oleh pengunjung.

3. Admin dapat memilih fasilitas hapus, pencarian dan

membaca serta membalas pesan dari buku tamu

tersebut.

Tabel 4.6 Spesifikasi Use Case – Lihat Informasi dan Peta Lokasi

Use Case Name Lihat Informasi dan Peta Lokasi

Summary Pengguna dapat melihat lokasi yang di pilihnya,

67

informasi yang diberikan antara lain peta lokasi, alamat

lokasi, foto-foto lokasi, artikel mengenai lokasi.

Actor Pengguna

Description 1. Pengguna membuka alamat web dan akan terbuka

halaman utama

2. Pengguna memilih lokasi dengan mengklik link lokasi

pilihannya.

3. Sistem menampilkan lokasi tempat wisata, resort,

hotel dan tempat kuliner yang di pilih oleh pengguna

pada halaman web sesuai yang tersimpan pada

database.

4. Pengguna dapat menginput asal lokasinya untuk

mencari rute tujuan lokasi pariwisatanya.

Tabel 4.7 Spesifikasi Use Case – Penelusuran Rute

Use Case Name Penelusuran Rute

Summary Pengguna dapat melakukan penelusuran rute untuk

melihat rute jalan yang akan di tempuh menuju lokasi

tujuan dari posisi keberadaan

Actor Pengguna

Description 1. Pengguna menginput posisi keberadaannya kemudian

memilih tujuan lokasinya, kemudian mengklik cari

rute

2. Sistem akan mencari rute pada database google maps

kemudian menampilkan rute pada halaman web.

Tabel 4.8 Spesifikasi Use Case – Lihat Berita

Use Case Name Lihat Berita

Summary Pengguna dapat melihat artikel berita informasi seputar

pariwisata pulau bintan

68

Actor Pengguna

Description 1. Pengguna memilih menu halaman berita

2. Sistem menampilkan berita pada halaman berita

sesuai yang tersimpan pada database.

Tabel 4.9 Spesifikasi Use Case – Pengisian Buku Tamu

Use Case Name Pengisian Buku Tamu

Summary Pengguna dapat mengisi Buku tamu untuk mendata

indentitas pengunjung dan sekaligus untuk registrasi user

untuk melakukan proses kirim pesan kepada admin yang

nanti dilakukan pada halaman kota pesan.

Actor Pengguna

Description 1. Pengguna membuka halaman buku tamu

2. Pengguna mengisi form yang berisi (nama lengkap,

email, asal negara, kota, alamat, kategori tujuan yang

ingin dikunjungi, nama lokasi tujuan, no telepon dan

pesan )

3. Sistem menyimpan data buku tamu pengguna

Tabel 4.10 Spesifikasi Use Case – Kelola Pesan

Use Case Name Kelola Pesan

Summary Pengguna dapat membaca dan membalas pesan dengan

admin

Actor Pengguna

Description 1. Pengguna membuka halaman kotak pesan

2. Pengguna mengisi email sesuai yang telah di isi saat

pengisian buku tamu

4. Sistem akan memverifikasi apakah email tersebut

sudah ada atau tidak.

5. Jika ada, sistem akan menampilkan halaman pesan

69

berhubungan dengan email tersebut

6. Pengguna melakukan pembacaan dan pembalasan

pesan.

4.3 Activity Diagram

Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang

sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin

terjadi, dan bagaimana mereka berakhir. Activity diagram mempunyai peran

seperti halnya flowchart, akan tetapi perbedaannya dengan flowchart adalah

activity diagram bisa mendukung perilaku pararel sedangkan flowchart tidak

bisa.

1. Activity Diagram Login

Activity diagram untuk login digambarkan sebagaimana berikut :

70

Gambar 4.2 Activity Diagram login

71

2. Activity Diagram Kelola Pariwisata

Activity diagram untuk kelola pariwisata digambarkan sebagaimana

berikut :

Gambar 4.3 Activity Diagram kelola pariwisata

72

3. Activity Diagram Kelola Data Posisi Keberadaan Pengguna

Activity diagram untuk kelola data posisi keberadaan pengguna akan

digambarkan sebagaimana berikut :

Gambar 4.4 Activity Diagram kelola data posisi keberadaan pengguna

4. Activity Diagram Kelola Berita

73

Activity diagram untuk kelola berita digambarkan sebagaimana berikut :

Gambar 4.5 Activity Diagram kelola data berita

5. Activity Diagram Kelola Buku Tamu

74

Activity diagram untuk kelola data buku tamu digambarkan sebagaimana

berikut :

Gambar 4.6 Activity Diagram kelola data buku tamu

6. Activity Diagram Lihat Informasi Dan Peta Lokasi

75

Activity diagram untuk lihat informasi dan peta lokasi digambarkan

sebagaimana berikut :

Gambar 4.7 Activity Diagram lihat informasi dan peta lokasi

7. Activity Diagram Penelusuran Rute

76

Activity diagram untuk penelusuran rute digambarkan sebagaimana

berikut :

Gambar 4.8 Activity Diagram penelusuran rute

8. Activity Diagram Lihat Informasi Berita

77

Activity diagram untuk lihat informasi berita digambarkan sebagaimana

berikut :

Gambar 4.9 Activity Diagram lihat informasi berita

9. Activity Diagram Pengisian Buku Tamu

78

Activity diagram untuk pengisian buku tamu digambarkan sebagaimana

berikut :

Gambar 4.10 Activity Diagram pengisian buku tamu

10. Activity Diagram Kelola Pesan

79

Activity diagram untuk kelola pesan digambarkan sebagaimana berikut :

Gambar 4.11 Activity Diagram kelola pesan

4.4 Sequence Diagram

80

Sequence Diagram menggambarkan kelakuan atau perilaku objek pada use

case dengan mendeskripsikan waktu hidup objek dan pesan yang dikirimkan dan

diterima antar objek.

1. Sequence Diagram Login

Sequence diagram untuk login dijelaskan sebagaimana penjelasan gambar

berikut ini :

Gambar 4.12 Sequence Diagram login

2. Sequence Diagram Kelola Pariwisata

81

Sequence diagram untuk kelola pariwisata dijelaskan sebagaimana penjelasan

gambar berikut ini :

Gambar 4.13 Sequence Diagram kelola pariwisata

3. Sequence Diagram Kelola Data Posisi Keberadaan Pengguna

82

Sequence diagram untuk kelola data posisi keberadaan pengguna dijelaskan

sebagaimana penjelasan gambar berikut ini :

Gambar 4.14 Sequence Diagram kelola data posisi keberadaan pengguna

4. Sequence Diagram Kelola Berita

83

Sequence diagram untuk kelola berita dijelaskan sebagaimana penjelasan

gambar berikut ini :

Gambar 4.15 Sequence Diagram kelola berita

5. Sequence Diagram Kelola Buku Tamu

84

Sequence diagram untuk kelola buku tamu dijelaskan sebagaimana

penjelasan gambar berikut ini :

Gambar 4.16 Sequence Diagram kelola buku tamu

6. Sequence Diagram Lihat Informasi Lokasi dan Peta Lokasi

85

Sequence diagram untuk lihat informasi lokasi dan peta lokasi dijelaskan

sebagaimana penjelasan gambar berikut ini :

Gambar 4.17 Sequence Diagram lihat informasi lokasi dan peta lokasi

7. Sequence Diagram Penelusuran Rute

86

Sequence diagram untuk penelusuran rute dijelaskan sebagaimana penjelasan

gambar berikut ini :

Gambar 4.18 Sequence Diagram penelusuran rute

8. Sequence Diagram Lihat Informasi Berita

87

Sequence diagram untuk lihat informasi berita dijelaskan sebagaimana

penjelasan gambar berikut ini :

Gambar 4.19 Sequence Diagram lihat informasi berita

9. Sequence Diagram Pengisian Buku Tamu

Sequence diagram untuk pengisian buku tamu dijelaskan sebagaimana

penjelasan gambar berikut ini :

Gambar 4.20 Sequence Diagram pengisian buku tamu

10. Sequence Diagram Kelola Pesan

88

Sequence diagram untuk kelola pesan dijelaskan sebagaimana penjelasan

gambar berikut ini :

Gambar 4.21 Sequence Diagram kelola pesan

4.5 Class Diagram

89

Class diagram untuk aplikasi berbasis web lokasi tempat wisata, resort,

hotel dan tempat kuliner menggunakan google maps api dijelaskan sebagaimana

penjelasan gambar berikut ini :

Gambar 4.22 Class Diagram

4.6 Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) atau diagram antar entitas adalah suatu

diagram yang menggambarkan hubungan objek data yang disimpan yang ada

dalam suatu aplikasi secara konseptual. Objek data adalah objek yang dapat

dicatat atau direkam atau segala sesuatu yang ada dan dapat dibedakan entitas

dapat berupa orang, benda, tempat, peristiwa, atau konsep yang bisa diolah untuk

90

menghasilkan informasi, rancangan diagram entitas ini dibuat menurut data yang

ada sehingga dapat menjelaskan hubungan data-data.

Gambar 4.23 Entity Relationship Diagram (ERD)

4.7 Perancangan Struktur Tabel

Didalam pembuatan program dibutuhkan suatu spesifikasi file yang

dimaksudkan untuk dapat melakukan kegiatan-kegiatan dalam pengaturan

pencarian data dan pembuatan laporan yang dapat mempermudah kerja sistem

komputer.

91

Untuk ini aplikasi pengolahan data ini membutuhkan spesifikasi file untuk

mempermudah dalam melakukan kegiatan pemrograman, yang dapat dilihat dari

tabel-tabel berikut ini :

1. Tabel Admin

Tabel Admin merupakan data-data untuk data login admin

Nama tabel : admin

Primary Key : Id

Tabel 4.11 Tabel Admin

No Nama Field Type Ukuran Key1 Id Int 11 Primary2 username Varchar 203 password Varchar 20

2. Tabel Buku Tamu

Tabel Buku Tamu merupakan data-data untuk menyimpan data pengguna.

Nama tabel : buku_tamu

Primary Key : Id

Tabel 4.12 Tabel Buku Tamu

No Nama Field Type Ukuran Key1 Id Int 11 Primary2 nama_lengkap Varchar 503 email Varchar 504 asal_negara Varchar 505 Kota Varchar 506 Alamat Varchar 1007 kategori_tujuan Varchar 508 lokasi_tujuan Varchar 50

92

9 no_telp Varchar 1510 captcha Varchar -11 tanggal date -12 status enum

3. Tabel Detail Pesan Buku Tamu

Tabel Detail Pesan Buku Tamu merupakan data-data untuk menyimpan data

pesan buku tamu.

Nama tabel : detail_pesan_buku_tamu

Primary Key : Id

Foreign Key : Id_buku_tamu

Tabel 4.13 Tabel Detail Pesan Buku Tamu

No Nama Field Type Ukuran Key1 Id Int 11 Primary2 Id_buku_tamu Int 113 email Varchar 504 pesan Text -5 jawab Text -6 tanggal_pesan Datetime -7 status Enum -8 tanggal_balas Datetime -

4. Tabel Posisi

Tabel Posisi merupakan data-data untuk menyimpan data posisi keberdaan

pengguna.

Nama tabel : posisi

Primary Key : Id

93

Tabel 4.14 Tabel Posisi

No Nama Field Type Ukuran Key1 Id Int 11 Primary2 nama_lokasi Varchar 1003 latitude Varchar 154 longitude Varchar 155 var Varchar 50

5. Tabel Konten Informasi

Tabel Konten Informasi merupakan data-data untuk menyimpan data berita

yang natinya ditampilkan pada website.

Nama tabel : konten_informasi

Primary Key : Id

Tabel 4.15 Tabel Konten Informasi

No Nama Field Type Ukuran Key1 Id Int 11 Primary2 judul Varchar 703 isi Text -4 tanggal_tulis Date -5 penulis Varchar -6 terbitkan Enum -

6. Tabel Master Pariwisata

94

Tabel Master Pariwisata mewakili entitas pariwisata merupakan data-data

untuk menyimpan data pariwisata seperti tempat wisata, resort, hotel dan

tempat kuliner.

Nama tabel : master_pariwisata

Primary Key : Id

Tabel 4.16 Tabel Master Pariwisata

No Nama Field Type Ukuran Key1 Id Text 7 Primary2 kategori Varchar 503 nama_lokasi Varchar 1004 alamat_lokasi Varchar 1005 var Varchar 506 informasi_lokasi Text -7 latitude Varchar 158 longitude Varchar 159 icon Varchar 5010 suka Int 1111 tidak_suka Int 1112 id_gambar_lokasi Char 7

7. Tabel Gambar Pariwisata

Tabel Gambar Pariwisata merupakan data-data untuk menyimpan data

gambar pariwisata.

Nama tabel : gambar_pariwisata

Primary Key : Id

Foreign Key : Id_gambar_lokasi

Tabel 4.17 Tabel Gambar Pariwisata

95

No Nama Field Type Ukuran Key1 Id Int 7 Primary2 Id_gambar_lokasi Char 7 Foreign3 nama_gambar Varchar 1004 keterangan Varchar 1005 status Enum -

4.8 Struktur Program

Desain struktur program merupakan suatu disain yang gambaran hubungan

antara suatu modul program dengan modul program yang lain. Desain struktur

program yang diusulkan dapat dilihat pada gambar berikut :

Gambar 4.24 Struktur Program

4.9 Struktur Menu

Struktur menu merupakan gambaran umum dari web yang akan dirancang,

dimana struktur web ini menggambarkan aliran-aliran dari bagian-bagian yang

akan diterapkan pada aplikasi berbasis web lokasi tempat wisata, resort, hotel dan

96

tempat kuliner menggunakan google maps api. Struktur menu yang dibuatkan

dalam sistem terdiri dari menu-menu dan sub menunya. Dapat dilihat pada

gambar dibawah ini :

Gambar 4.25 Struktur Menu

4.10 Hirarki Link

Hirarki link merupakan salah satu alat bantu untuk para webmaster yang

mempermudah dalam pengenalan peta situs di dalam website. Hirarki link pada

pembangunan aplikasi web ini terdiri dari 2, yaitu hirarki link halaman penggua

dan hirarki link halaman admin.

97

Gambar 4.26 Hirarki Link Halaman Pengguna

Gambar 4.27 Hirarki Link Halaman Admin

4.11 Perancangan Antar Muka (Interface)

Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang

menarik. Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk

mencoba sebuah website dengan terlebih dahulu tertarik pada sebuah tampilan

yang ada di hadapan matanya. Suatu website yang baik adalah website yang

mudah dipahami dan di gunakan (user friendly). Adapun desain antarmuka dapat

dilihat pada gambar berikut :

1. Desain Antar Muka Halaman Utama (Pengguna)

98

Gambar 4.28 Desain Halaman Utama

2. Desain Antar Muka Halaman Penelusuran Rute (Pengguna)

99

Gambar 4.29 Desain Halaman Penelusuran Rute

3. Desain Antar Muka Halaman Berita (Pengguna)

100

Gambar 4.30 Desain Halaman Berita

4. Desain Antar Muka Halaman Buku Tamu (Pengguna)

101

Gambar 4.31 Desain Halaman Buku Tamu

5. Desain Antar Muka Halaman Kotak Pesan Pengisian Email (Pengguna)

102

Gambar 4.32 Desain Halaman Kotak PesanPengisian Email

6. Desain Antar Muka Halaman Kotak Pesan Kirim Pesan (Pengguna)

103

Gambar 4.33 Desain Halaman Kotak Pesan Kirim Pesan

7. Desain Antar Muka Halaman Login (Admin)

104

Gambar 4.34 Desain Halaman Login Admin

8. Desain Antar Muka Halaman Home (Admin)

Gambar 4.35 Desain Halaman Home (Admin)

9. Desain Antar Muka Halaman Kelola Data Pariwisata (Admin)

Gambar 4.36 Desain Halaman Kelola Data Pariwisata (Admin)

105

10. Desain Antar Muka Halaman Kelola Data Posisi (Admin)

Gambar 4.37 Desain Halaman Kelola Data Posisi (Admin)

11. Desain Antar Muka Halaman Kelola Data Buku Tamu (Admin)

Gambar 4.38 Desain Halaman Kelola Data Buku Tamu (Admin)

106

12. Desain Antar Muka Halaman Kelola Berita (Admin)

Gambar 4.39 Desain Halaman Kelola Berita (Admin)