bab 3 metode perancangan sistem -...

31
29 Bab 3 Metode Perancangan Sistem Pada bab ini dibahas mengenai metode perancangan yang dipergunakan dalam membuat Sistem Informasi Kepuasan Pelanggan Terhadap Loyalitas Pada Roemah Emak Backpacker 4H/3M, beserta rancangan-rancangan baik berupa use case, activity diagram, entity relationship diagram, dan tabel tabel basis data dari sistem tersebut. 3.1 Metode Rekayasa Perangkat Lunak 3.1.1 Pembahasan Metode Prototyping Metode rekayasa perangkat lunak yang digunakan dalam pembuatan tugas akhir ini ialah metode prototyping. Metode prototyping merupakan sebuah metode rekayasa perangkat lunak yang bersifat iteratif. Metode ini menuntut adanya hubungan kerja yang dekat atau komunikasi intensif antara pembangun aplikasi dengan pengguna. Adapun keuntungan menggunakan metode prototyping adalah metode prototyping melibatkan partisipasi aktif dari pengguna sehingga dapat meningkatkan moral pengguna dalam menggunakan aplikasi yang dihasilkan. Selain itu pengguna dapat mengetahui kesesuaian antara sistem yang akan dihasilkan dengan kebutuhan mereka tanpa harus menunggu sampai sistem diimplemetasikan. Dengan hal ini memungkinkan pengguna lebih cepat dalam memberikan tanggapan yang dapat membawa

Upload: phungthuy

Post on 14-May-2019

225 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

29

Bab 3

Metode Perancangan Sistem

Pada bab ini dibahas mengenai metode perancangan yang

dipergunakan dalam membuat Sistem Informasi Kepuasan

Pelanggan Terhadap Loyalitas Pada Roemah Emak Backpacker

4H/3M, beserta rancangan-rancangan baik berupa use case, activity

diagram, entity relationship diagram, dan tabel – tabel basis data

dari sistem tersebut.

3.1 Metode Rekayasa Perangkat Lunak

3.1.1 Pembahasan Metode Prototyping

Metode rekayasa perangkat lunak yang digunakan dalam

pembuatan tugas akhir ini ialah metode prototyping. Metode

prototyping merupakan sebuah metode rekayasa perangkat

lunak yang bersifat iteratif. Metode ini menuntut adanya

hubungan kerja yang dekat atau komunikasi intensif antara

pembangun aplikasi dengan pengguna. Adapun keuntungan

menggunakan metode prototyping adalah metode prototyping

melibatkan partisipasi aktif dari pengguna sehingga dapat

meningkatkan moral pengguna dalam menggunakan aplikasi

yang dihasilkan. Selain itu pengguna dapat mengetahui

kesesuaian antara sistem yang akan dihasilkan dengan

kebutuhan mereka tanpa harus menunggu sampai sistem

diimplemetasikan. Dengan hal ini memungkinkan pengguna

lebih cepat dalam memberikan tanggapan yang dapat membawa

Page 2: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

30

kepada solusi yang lebih baik dalam membangun perangkat

lunak.

Adapun tahapan – tahapan yang harus dilalui dalam

metode prototyping ini ialah mengumpulkan informasi tentang

kebutuhan aplikasi, dari kebutuhan tersebut kemudian dibuat

prototypenya. Pada pembuatan prototype, yang diutamakan

ialah proses masukan dan keluaran dari aplikasi. Disini kualitas

aplikasi yang dibangun belum diperhatikan. Setelah melalui

tahapan pembuatan prototype, tahapan selanjutnya ialah

memperlihatkan prototype tersebut kepada pengguna. Pada

tahap inilah evaluasi terhadap prototype dilakukan, tiga tahapan

tersebut akan berulang selama prototype yang dibangun belum

sesuai dengan kebutuhan pengguna. Gambar 3.1 merupakan

gambar tahapan yang harus dilakukan dalam metode

prototyping.

Gambar 3.1 Bagan Model Prototyping (Pressman, 2001)

Metode perancangan sistem dengan menggunakan metode

prototyping ini bukanlah merupakan sesuatu yang lengkap,

tetapi sesuatu yang harus dimodifikasi kembali, dikembangkan,

ditambahkan atau digabungkan dengan sistem informasi yang

Page 3: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

31

lain bila perlu atau dapat dikatakan bahwa software yang

terbentuk hanyalah sebagai suatu prototype yaitu sebagai

gambaran dari kebutuhan seorang user.

3.2 Pendiskripsian Kebutuhan (Requirement Gathering)

3.2.1 Tahap Perencanaan (Pengumpulan Kebutuhan)

Tahap perencanaan merupakan tahap awal untuk

mengumpulkan kebutuhan. Pengumpulan data pada tahap ini

dengan cara melakukan wawancara dengan pihak biro Tour

Roemah Emak dan observasi di biro tersebut untuk mengetahui

tentang kebutuhan aplikasi yang akan dibuat.

3.2.2 Tahap Desain Sistem (Perancangan)

Tahap berikutnya yaitu tahap desain sistem atau

perancangan sistem. Pada tahap ini dilakukan desain pada

aplikasi sesuai dengan kebutuhan yang diperlukan dan desain

database sesuai dengan data – data yang ada di dalam apllikasi.

Aplikasi yang dibuat lebih memfokuskan kepada input, proses,

dan output sesuai dengan kebutuhan yang telah diketahui pada

tahap sebelumnya.

3.2.3 Tahap Evaluasi Prototype

Tahap evaluasi prototype merupakan tahapan akhir dalam

pengembangan dari aplikasi yang dibuat. Pada tahap ini aplikasi

akan diuji oleh pengguna dan hasil dari aplikasi yang dibuat

hanya berupa prototype.

Page 4: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

32

Adapun software dan hardware yang dibutuhkan dalam

pembuatan sistem tersebut adalah :

Spesifikasi software yang dibutuhkan :

Xampp , MySQL

Rational Rose

PHP 5

Spesifikasi hardware yang dibutuhkan :

Prosesor Intel Pentium 4

RAM 512 MB

Sistem Operasi Windows XP Sp 2

Hardisk 80 Gb

Keyboard dan Monitor

Optical mouse

Page 5: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

33

3.3 Desain Sistem

Desain sistem dimaksud untuk membantu dalam pengembangan

aplikasi yang akan dibuat nanti yaitu berupa website. Pada bagian ini

akan dibahas use case diagram, dan activity diagram. Di bawah ini

adalah gambaran desain sistem yang dengan menggunakan metode

UML.

3.3.1 Perancangan UML Prototype Pertama

3.3.1.1 Use Case Diagram

Dari pengumpulan data berdasarkan hasil

wawancara yang telah dilakukan untuk penyerahan

prototype pertama, fungsionalitas yang dimiliki oleh

sistem yang akan dibangun digambarkan pada use case

diagram yang ada pada Gambar 3.2.

login melihat informasi web biro tour

roemah emak

menjawab kuesioner pada sistem

kepuasan pelanggan

pelanggan

<<include>>

<<include>>

kelola data member

<<include>>

kelola data kuesioner

<<include>>

kelola data paket tour

<<include>>

ganti password

<<include>>

melihat hasil survey kepuasan

pelanggan

<<include>>

kelola data berita

admin

<<include>>

Gambar 3.2 Use Case Diagram Sistem Informasi Kepuasan

Pelanggan biro Tour Roemah Emak Prototype Pertama

Page 6: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

34

3.3.1.2 Activity Diagram

Activity diagram adalah diagram yang

memperlihatkan aliran dari suatu aktivitas ke aktivitas

lainnya dalam suatu sistem. Untuk perancangan Activity

Diagram pelanggan prototype pertama dapat dilihat pada

Gambar 3.3.

End

Start login

valid ?

lihat hasil survey

kepuasan pelanggan

mengisi kuesioner

kepuasan pelanggan

logout

invalid

sistemuser

Gambar 3.3 Activity Diagram Pelanggan biro Tour Roemah Emak

Prototype Pertama

Page 7: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

35

Perancangan activity diagram admin prototype

pertama, dapat dilihat pada Gambar 3.4.

log out

Start Login

valid ?

invalid

berita

paket tour

data pelanggan paket roemah

emak backpacker 4H/3M

kuesioner

hasil analisa

ganti password

End

sistemuser

Gambar 3.4 Activity Diagram Admin Sistem Informasi Kepuasan

PelangganPaket Roemah Emak Backpacker 4H/3M Prototype

Pertama

Page 8: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

36

3.3.2 Perancangan UML Prototype Kedua

3.3.2.1 Use Case Diagram

Dari hasil evaluasi yang didapatkan setelah

penyerahan prototype pertama, terdapat perubahan

terhadap use case kelola data berita dan kelola data paket

tur yang harus dihapus karena use case tersebut tidak

diperlukan dalam sistem ini, sehingga dapat diketahui

fungsionalitas yang harus dimiliki oleh sistem yang akan

dibangun. Hal tersebut digambarkan pada Gambar 3.5.

login

melihat inf ormasi web biro tour

roemah emak

menjawab kuesioner pada sistem

kepuasan pelanggan dan loy alitas

<<include>>

kelola data member

<<include>>

kelola data kuesioner<<include>>

ganti password

<<include>>

melihat hasil surv ey kepuasan

pelanggan<<include>>

admin

kelola kotak saran

pelanggan

mengisi kotak saran

<<include>><<include>>

Gambar 3.5 Use Case Diagram Sistem Informasi Kepuasan

Pelanggan biro Tour Roemah Emak Prototype Kedua

Gambar 3.5 menjelaskan bahwa Dalam Use case

diagram tersebut terdapat 2 pengguna yaitu pelanggan dan

admin. User dalam sistem ini adalah pelanggan dari biro

Tour Roemah Emak dan yang merupakan admin adalah

kepala biro Tour Roemah Emak yang memiliki wewenang

untuk mengelola sistem.

Admin memiliki semua fungsionalitas yang

dimiliki oleh sistem ini. Sedangkan untuk pelanggan

Page 9: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

37

hanya dapat melihat informasi web dari biro Tour Roemah

Emak, mengisi atau menjawab kuesioner dari sistem

informasi kepuasan dan loyalitas pelanggan tersebut, juga

mengisi kotak saran.

3.3.2.2 Activity Diagram

Berdasarkan hasil evaluasi yang didapatkan setelah

penyerahan prototype pertama, terdapat perubahan yaitu

adanya penambahan activity registrasi untuk pelanggan

agar dapat melakukan akses seperti mengisi kuesioner,

melihat hasil survey yang dilakukan setelah login,

sehingga dapat diketahui perancangan activity diagram

pelanggan seperti pada Gambar 3.6.

Start

login

invalidvalid

lihat hasil survey kepuasan

pelanggan dan loyalitas

mengisi kuesioner kepuasan

pelanggan dan loyalitas

logout

End

Registrasi

Mengisi kotak

saran

sistemuser

Gambar 3.6 Activity Diagram Pelanggan biro Tour Roemah Emak

Prototype Kedua

Page 10: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

38

Gambar 3.6 menjelaskan bahwa user yaitu

pelanggan biro Tour Roemah Emak akan melakukan

proses login dimana user itu sendiri harus melakukan

registrasi terlebih dahulu. Setelah melakukan proses

registrasi, user dapat melakukan proses login. Pada saat

melakukan login, inputan akan dicek oleh sistem, jika

valid, maka user dapat mengakses kuesioner kepuasan

pelanggan, dan jika tidak valid, dapat berarti bahwa

inputan seperti username dan password salah, untuk itu

user harus melakukan proses login kembali. Setelah

berhasil melakukan login, user hanya sekali dalam

menjawab kuesioner tersebut. User juga dapat mengisi

kotak saran yang berisi kritik, saran, maupun kesan dan

pesan terhadap pelayanan yang diberikan, jika telah

melakukan proses – proses tersebut, maka hasil dari

kuesioner yang dijawab akan disimpan ke dalam

database. User juga dapat melihat hasil dari jawaban

kuesioner itu berupa grafik.

Pada activity diagram admin juga terdapat

perubahan terhadap activity berita dan paket tur, dalam hal

ini activity tersebut dihapus atau ditiadakan karena tidak

diperlukan dalam sistem ini, sehingga dapat diketahui

perancangan activity diagram admin seperti pada Gambar

3.7.

Page 11: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

39

Start Login

valid ?

invalid

manage user

manage

kuesioner

manage saran

update

password

log out

End

melihat grafik

sistemuser

Gambar 3.7 Activity diagram Admin Sistem Informasi Kepuasan

Pelanggan biro Tour Roemah Emak Prototype Kedua

Gambar 3.7 menjelaskan bahwa admin mempunyai

hak untuk mengelola sistem secara keseluruhan yaitu

untuk manage user, manage kuesioner, melihat grafik,

update password. Admin dapat mengelola sistem yang

dibuat tentunya harus melalui proses login.

Page 12: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

40

3.4 Desain Database

Dalam pembuatan Sistem Informasi Kepuasan Pelanggan

Terhadap Loyalitas Pada Paket Roemah Emak Backpacker 4H/3M

ini, database dibuat dengan menggunakan MySql. Untuk mendesain

suatu database, maka harus membuat ERD (Entity Relationship

Diagram) yang merupakan suatu model untuk menjelaskan

hubungan antar data di dalam database berdasarkan objek – objek

dasar data yang mempunyai hubungan antar relasi seperti pada

gambar 3.8.

Gambar 3.8 ERD Sistem informasi kepuasan dan loyalitas pelanggan

Kamus Data :

Admin : {id_admin, username, password}

User : {id_pelanggan, nama, alamat, email, contact,

username, password}

Pertanyaan : {id_pertanyaan, pertanyaan, id_kategori}

Page 13: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

41

Kategori : {id_kategori, nama_kategori}

Polling : {id_polling, id_user, id_pertanyaan, pilihan}

Paket Tur : {id_pesan, id_pelanggan, jenis, tanggal_pesan}

3.4.1 Perancangan Database

Objek yang telah dihasilkan dari perancangan

sebelumnya, dinyatakan dalam bentuk tabel – tabel. Pada bagian

ini akan dijelaskan tabel – tabel basis data yang digunakan

dalam perancangan aplikasi ini.

3.4.1.1 Tabel tb_admin

Tabel tb_admin digunakan untuk menyimpan data

administrator yang meliputi : id, username, dan password.

Tabel administrator dapat dilihat pada Tabel 3.1.

Tabel 3.1 Tabel tb_admin

Field Type Length Key

Id_admin Int 15 Primary key

Username Varchar 25

Password Varchar 35

3.4.1.2 Tabel tb_kategori

Tabel tb_kategori digunakan untuk menyimpan

data kategori yang meliputi : id, nama_kategori. Tabel

kategori dapat dilihat pada Tabel 3.2.

Tabel 3.2 Tabel tb_kategori

Field Type Length Key

Id_Kategori Int 15 Primary key

Nama_Kategori Varchar 35

Page 14: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

42

3.4.1.3 Tabel tb_user

Tabel tb_user digunakan untuk menyimpan data

pelanggan biro tur yang meliputi : id, nama, alamat,

email, contact, username, password. Tabel tb_user dapat

dilihat pada Tabel 3.3.

Tabel 3.3 Tabel tb_User

Field Type Length Key

Id_user Int 15 Primary key

Nama Varchar 50

Alamat Varchar 100

Email Varchar 35

Contact Varchar 40

Username Varchar 35

Password Varchar 30

3.4.1.4 Tabel tb_nps

Table tb_nps digunakan untuk menyimpan data net

promoter score yang meliputi : id_nps, id_user, score.

Tabel tb_nps dapat dilihat pada Tabel 3.4.

Tabel 3.4 Tabel tb_nps

Field Type Length Key

Id_nps Int 11 Primary key

Id_user Int 9 Foreign key

Score Int 11

Page 15: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

43

3.4.1.5 Tabel tb_pertanyaan

Tabel tb_pertanyaan digunakan untuk menyimpan

data pertanyaan yang meliputi : id, pertanyaan,

id_kategori. Tabel tb_pertanyaan dapat dilihat pada Tabel

3.5.

Tabel 3.5 Tabel tb_pertanyaan

Field Type Length Key

Id_Pertanyaan Int 15 Primary key

Pertanyaan Varchar 255

Id_Kategori Int 15 Foreign key

3.4.1.6 Tabel tb_polling

Tabel polling digunakan untuk menyimpan data

polling yang meliputi : id, id_user, id_pertanyaan dan

pilihan. Tabel tb_polling dapat dilihat pada Tabel 3.6.

Tabel 3.6 Tabel tb_Polling

Field Type Length Key

Id_Polling Int 15 Primary key

Id_User Int 15 Foreign key

Id_Pertanyaan Int 15 Foreign key

Pilihan Varchar 20

3.4.1.7 Tabel tb_saran

Tabel tb_saran digunakan untuk menyimpan data

saran yang meliputi : id_saran, id_user, teks_saran,

tanggal. Tabel tb_saran dapat dilihat pada Tabel 3.7.

Page 16: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

44

Tabel 3.7 Tabel tb_saran

Field Type Length Key

Id_Saran Int 9 Primary key

Id_User Int 9 Foreign key

Teks_Saran Text

Tanggal Date

3.4.2 Relasi Antar Tabel

Dengan terdapatnya hubungan antar tabel dalam satu

database, maka kita perlu merelasikan tabel – tabel tersebut.

Relasi antar tabel dapat dilihat pada Gambar 3.9.

-id_kategori

-nama_kategori

tb_kategori

-id_user

-nama

-alamat

-email

-contact

-username

-password

tb_user

-id_pertanyaan

-pertanyaan

-id_kategori

tb_pertanyaan

-id_polling

-id_user

-id_pertanyaan

-pilihan

tb_polling

1 1..*

1..*

1..*

1..* 1..*

-id_admin

-username

-password

tb_admin

-id_saran

-id_user

-teks_saran

-tanggal

tb_saran

1..*

1..*

-id_nps

-id_user

-score

tb_nps

1..*

1..*

Gambar 3.9 Relasi Antar Tabel

Page 17: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

45

Gambar 3.9 menjelaskan relasi antar tabel pada database

yang telah dirancang. Tabel tb_user memiliki relasi dengan

tabel tb_polling, tb_nps, tb_saran, tb_pesan dimana field

id_user sebagai foreign key di antara kedua tabel tersebut. Tabel

tb_polling memiliki relasi dengan tabel tb_pertanyaan dimana

field id_pertanyaan sebagai foreign key di antara kedua tabel

tabel tersebut. Tabel tb_pertanyaan memiliki relasi dengan tabel

tb_kategori dimana field id_kategori sebagai foreign key di

antara kedua tabel tersebut.

3.5 Desain Antar Muka

Dalam pembuatan sistem informasi kepuasan pelanggan,

tentunya diperlukan desain antar muka sebagai gambaran terhadap

sistem informasi yang ada. Desain ini menjadi dasar untuk membuat

tampilan pada aplikasi web yang dibuat.

3.5.1 Perancangan Desain Antar Muka Prototype Pertama

Secara garis besar desain antar muka prototype pertama,

dapat dilihat pada Gambar 3.10.

Page 18: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

46

HEADER

MENU

CONTENT

LINK

FOOTER

Gambar 3.10 Desain Antar Muka Prototype Pertama

Gambar 3.10 merupakan rancangan antar muka

pembuatan aplikasi sistem informasi kepuasan pelanggan pada

halaman admin, dan halaman pelanggan.

Page 19: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

47

3.5.1.1 Desain Halaman Login

Desain halaman login prototype pertama dapat

dilihat pada Gambar 3.11.

Halaman

Depan

Tentang

Kami

Paket

Tour

Berita Peta Galeri

Silahkan Login,

Username :

Password :

LOGIN EXIT

Gambar 3.11 Desain Halaman Login Prototype Pertama

Gambar 3.11 merupakan desain dari halaman login

pada prototype pertama dimana user harus memasukkan

username dan password untuk melakukan login.

Page 20: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

48

3.5.1.2 Desain Halaman Kuesioner

Desain halaman kuesioner prototype pertama dapat

dilihat pada Gambar 3.12.

Halaman

Depan

Tentang

Kami

Paket

Tour

Berita Peta Galeri Keluar

Kuesioner

Gambar 3.12 Desain Antar Muka

Halaman Kuesioner Prototype Pertama

Gambar 3.12 merupakan desain halaman kuesioner

yang merupakan bagian dari sistem informasi kepuasan

dan loyalitas pelanggan setelah pelanggan melakukan

login.

Page 21: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

49

3.5.1.3 Desain Halaman Input Data Pelanggan

Desain antar muka untuk halaman input data

pelanggan prototype pertama dapat dilihat pada Gambar

3.13.

Halaman

Depan

Tentang

Kami

Paket

Tour

Berita Peta Galeri Keluar

TAMBAH USER

Input Pelanggan

Kode Pelanggan :

Nama Pelanggan :

Alamat :

Kecamatan :

Kabupaten / Kota :

Jenis Identitas : KTP SIM

No Identitas :

No Telepon :

No HP :

SIMPAN

Gambar 3.13 Desain Antar Muka

Halaman Input Data Pelanggan Prototype Pertama

Page 22: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

50

3.5.1.4 Desain Halaman Hasil Survey Tingkat

Kepuasan Pelanggan dan Loyalitas biro Tour

Roemah Emak

Desain halaman laporan hasil survey tingkat

kepuasan pelanggan prototype pertama dapat dilihat pada

Gambar 3.14.

Halaman

Depan

Tentang

Kami

Paket Tour Berita Peta Galeri Keluar

Periode survey

Tampilkan

Jumlah Responden :

GRAFIK

▼ Tahun : ▼ Bulan :

TABEL

Gambar 3.14 Desain Halaman Hasil Survey Tingkat Kepuasan Pelanggan

biro Tour Roemah Emak Prototype Pertama

Page 23: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

51

3.5.2 Perancangan Desain Antar Muka Prototype Kedua

Dari hasil evaluasi yang didapat setelah penyerahan

prototype pertama, terdapat perubahan pada letak menu yaitu

berada dibawah header, tidak sejajar dengan content dan link

seperti pada prototype pertama, tetapi menu berada di atas

content dan link, sehingga dapat diketahui desain antar muka

seperti pada Gambar 3.15.

HEADER

MENU

LINK CONTENT

FOOTER

Gambar 3.15 Desain Antar Muka Prototype Kedua

Keterangan :

1. Header : Berisikan desain yang merupakan judul dari

website yang dibuat.

2. Menu : Berisikan menu halaman depan, tentang kami, paket

tur, berita, peta, galeri, kuesioner.

3. Link : berisikan login form, registrasi, dan link terkait.

Page 24: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

52

4. Content : berisikan tampilan halaman dari masing-masing

halaman yang dipilih oleh user. Misalnya pengguna atau user

memilih kategori “sistem kepuasan pelanggan”, maka akan

memuat kuesioner kepuasan pelanggan biro Tour Roemah

Emak.

5. Footer : berisikan desain footer dan data dari pembuat.

3.5.2.1 Desain Halaman Login

Dari hasil evaluasi terhadap prototype pertama,

terdapat perubahan pada form login dimana ada tambahan

checkbox untuk nantinya admin dapat melakukan login

dengan memberi tanda centang (√) pada checkbox tersebut

dan tombol exit dihilangkan atau dihapus, sehingga dapat

diketahui desain halaman login bagi pelanggan dapat

dilihat pada Gambar 3.16.

Page 25: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

53

Halaman Depan Paket Tur Tentang

Kami

Berita Peta Galeri

LOGIN FORM

Username :

Password :

Login

□ Admin

Gambar 3.16 Desain Halaman Login Prototype Kedua

Gambar 3.16 berisikan form login berfungsi bagi

pelanggan untuk masuk pada sistem kepuasan pelanggan.

Pelanggan memasukkan username pada bagian “ User

Name “ dan password pada bagian “Password” dengan

benar untuk dapat melakukan proses login. Jika tidak

valid, proses login tidak akan berjalan begitupun sebagai

admin jika melakukan login, harus memasukan username

dan password juga memberi tanda centang (√) pada

checkbox untuk bisa melakukan login sebagai admin.

Page 26: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

54

3.5.2.2 Desain Halaman Kuesioner

Dari hasil evaluasi pada prototype pertama,

terdapat perubahan yaitu ada tambahan tombol logout dan

link dimana kuesioner dapat diakses ketika user atau

pelanggan melakukan login, sehingga dapat diketahui

desain halaman kuesioner yang dibutuhkan dalam sistem

seperti pada Gambar 3.17.

Halaman

Depan

Paket

Tur

Tentang

kami

Berita Peta Galeri Kuesioner

Logout

Link

Kuesioner

Gambar 3.17 Desain Antar Muka Halaman Kuesioner

Prototype Kedua

Gambar 3.17 berisikan halaman kuesioner yang

merupakan bagian penting dalam sistem informasi

kepuasan dan loyalitas pelanggan biro Tour Roemah

Emak.

Page 27: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

55

3.5.2.3 Desain Halaman Input Data Pelanggan

Dari hasil evaluasi prototype pertama, terdapat

perubahan yaitu pada isi dari halaman input data

pelanggan tersebut dan untuk melakukan input data

pelanggan, admin harus melakukan login terlebih dahulu

sehingga ada perubahan pada tampilan dari halaman input

data pelanggan tersebut berupa adanya tombol logout dan

tombol link yang merupakan tambahan dari sistem yang

dibuat, juga menu yang berbeda setelah admin melakukan

login dan penambahan tombol batal untuk admin

membatalkan input data pelanggan, maka dapat dihasilkan

desain halaman input data pelanggan yang dapat dilihat

pada Gambar 3.18.

Manage User Manage Kuesioner Grafik Update Password

Logout

Link

Nama :

Alamat :

Email :

Contact :

Username :

Password :

Simpan

Batal

Gambar 3.18 Desain Halaman Input Data Pelanggan Prototype Kedua

Page 28: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

56

Gambar 3.18 menunjukkan form tambah Input

Pelanggan. Admin memasukkan data pelanggan sesuai

dengan data yang ada dan dapat disimpan dengan

mengklik tombol “Simpan” ataupun jika ingin

membatalkan input data pelanggan dengan mengklik

tombol “Batal”.

3.5.2.4 Desain Halaman Hasil Survey Tingkat

Kepuasan Pelanggan biro Tour Roemah Emak

Dari hasil evaluasi pada prototype pertama,

terdapat perubahan pada tampilan dari hasil survey

dimana grafik yang dihasilkan berupa dua macam grafik

yaitu grafik pie, dan histogram, kemudian terdapat total

responden dan perubahan tampilan pada menu dengan

adanya tombol logout karena untuk melihat hasil tersebut,

admin harus melakukan login terlebih dahulu dan tombol

link yang merupakan tambahan dari sistem yang dibuat,

maka dapat dihasilkan desain halaman hasil survey tingkat

kepuasan pelanggan biro Tour Roemah Emak seperti pada

Gambar 3.19.

Page 29: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

57

Manage User Manage Kuesioner Grafik Update Password

Logout

Link

Total Responden :

Grafik per kategori

Grafik Histogram

Gambar 3.19 Desain Halaman Hasil Survey Tingkat

Kepuasan Pelanggan biro Tour Roemah Emak Prototype Kedua

Gambar 3.19 menunjukkan hasil survey kepuasan

pelanggan berdasarkan kuesioner yang telah diisi dan

grafik yang dihasilkan menggunakan JPGraph yang

merupakan library dari PHP yang bersifat object oriented.

Fungsi utama dari library ini adalah untuk menggambar

grafik pada browser sesuai dengan data yang ada.

3.5.2.5 Desain Halaman Kotak Saran

Berdasarkan hasil evaluasi pada prototype

pertama, maka pada prototype kedua ini ditambahkan

kotak saran yang bertujuan untuk mengetahui secara

spesifik tentang keinginan pelanggan terhadap pelayanan.

Page 30: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

58

Kotak saran berupa keluhan, kritik, saran, maupun kesan

terhadap pelayanan yang diberikan. Desain halaman kotak

saran untuk admin dan pelanggan dapat dilihat pada

Gambar 3.20 dan Gambar 3.21.

Manage

User

Manage

Kuesioner

Grafik Kotak Saran Update

Password

Logout

Link

Kotak Saran

Nama : .......................................

Email : .......................................

Pesan :

Gambar 3.20 Desain Halaman Kotak Saran Untuk Admin

Gambar 3.20 menjelaskan bahwa admin dapat

melihat isi dari kotak saran yang berguna sebagai sarana

umpan balik (feedback) yang mempunyai manfaat sebagai

tindakan korektif dan tindakan pencegahan terhadap

proses pelayanan yang telah dilakukan oleh biro Tour

Roemah Emak agar bisa lebih baik dalam meningkatkan

kualitas pelayanan.

Page 31: Bab 3 Metode Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1764/4/T1_682004709_BAB III.pdf · dengan cara melakukan wawancara dengan pihak biro Tour

59

Halaman

Depan

Paket

Tur

Tentang

kami

Berita Peta Galeri Kuesioner Kotak

Saran

Logout

Link

Kotak Saran

Nama : ...................................

Email : ....................................

Pesan :

Kirim

Gambar 3.21 Desain Halaman Kotak Saran Untuk Pelanggan

Gambar 3.21 menjelaskan bahwa pelanggan dapat

memberikan keterangan yang lebih spesifik mengenai apa

saja yang diinginkan pelanggan menyangkut pelayanan

yang diberikan oleh biro Tour Roemah Emak. Keterangan

yang diberikan oleh pelanggan berupa kritik, saran,

maupun kesan dan pesan.