BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB...

29
29 BAB III ANALISIS DAN DESAIN SISTEM III.1. Analisis Masalah Rute jalur terpendek merupakan suatu persoalan untuk mencari lintasan menuju toko Majestyk yang dilalui dengan jumlah yang paling minimum. Maka dibutuhkan algoritma Dijkstra untuk mencari rute jalur terpendek. Banyaknya konsumen yang membutuhkan informasi mengenai data tempat toko majestyk yang terdekat maka perlu dibangun sebuah sistem informasi geografis yang dapat memudahkan konsumen dalam mencari lokasi tempat toko majestyk terdekat di kota Medan. III.1.1. Analisis Input Dalam hal ini sistem yang digunakan belum efektif di karenakan sistem informasi yang digunakan masih bersifat manual hanya melakukan penginputan informasi belum terkomputerisasi dalam mendapatkan informasi tentang keberadaan toko majestyk terdekat. Namun dengan sistem informasi yang dirancang sistem akan lebih mudah karena telah menggunakan aplikasi yang dibuat sesederhana mungkin yang lebih efektif dan efisien dalam mengakses informasi keberadaan toko majestyk terdekat. hal ini bertujuan untuk mempermudah pihak pengguna dalam pencarian lokasi yang ada dan didukung dengan database yang berperan dalam menyimpan data-data yang telah diinput dan jika adanya perubahan informasi akan lebih mudah untuk perawatan

Transcript of BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB...

Page 1: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

29

BAB III

ANALISIS DAN DESAIN SISTEM

III.1. Analisis Masalah

Rute jalur terpendek merupakan suatu persoalan untuk mencari lintasan

menuju toko Majestyk yang dilalui dengan jumlah yang paling minimum. Maka

dibutuhkan algoritma Dijkstra untuk mencari rute jalur terpendek. Banyaknya

konsumen yang membutuhkan informasi mengenai data tempat toko majestyk

yang terdekat maka perlu dibangun sebuah sistem informasi geografis yang dapat

memudahkan konsumen dalam mencari lokasi tempat toko majestyk terdekat di

kota Medan.

III.1.1. Analisis Input

Dalam hal ini sistem yang digunakan belum efektif di karenakan sistem

informasi yang digunakan masih bersifat manual hanya melakukan penginputan

informasi belum terkomputerisasi dalam mendapatkan informasi tentang

keberadaan toko majestyk terdekat. Namun dengan sistem informasi yang

dirancang sistem akan lebih mudah karena telah menggunakan aplikasi yang

dibuat sesederhana mungkin yang lebih efektif dan efisien dalam mengakses

informasi keberadaan toko majestyk terdekat. hal ini bertujuan untuk

mempermudah pihak pengguna dalam pencarian lokasi yang ada dan didukung

dengan database yang berperan dalam menyimpan data-data yang telah diinput

dan jika adanya perubahan informasi akan lebih mudah untuk perawatan

Page 2: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

30

III.1.2. Analisis Process

Proses yang terjadi pada sistem yang dijelaskan pada langkah-langkah:

Sistem Informasi Geografis Pencarian Rute Jalur Terpendek Toko majestyk dengan Algoritma Dijkstra.

Admin Masyarakat

Phas

e

Mengingat Alamat

Mengunjungi Toko

Majestyk

Mengunjungi Toko Majestyk

SELESAI

Papan Iklan / Brosur Toko Majestyk

MULAI

Papan Iklan / Brosur Toko majestyk

Gambar III.1. Flow Of Document Lokasi Toko majestyk

Penjelasan FOD :

1. Masyarakat mendapatkan informasi mengenai lokasi toko majestyk yang

berada di kota Medan.

2. Kemudian Masyarakat mengingat atau mencatat alamat lokasi toko majestyk

tersebut.

3. Setelah mendapatkan informasi lokasi toko majestyk, masyarakat melakukan

pengunjungan ke lokasi toko majestyk yang mereka ketahui.

Page 3: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

31

III.1.3. Analisis Output

Output yang dihasilkan dari sistem adalah informasi-informasi tempat

Lokasi Toko majestyk yang ada di kota dan mengunjungi Lokasi Toko majestyk

yang di inginkan maka Masyarakat akan mendapatkan jasa pelayanan sesuai

dengan kebutuhan Masyarakat yang diberikan oleh pihak lokasi toko majestyk

yang bersangkutan.

Tabel.III.1. Daftar Toko majestyk

No

Nama Toko

majestyk

Alamat Lengkap Longitudinal Latitude

1.

2.

3.

4.

III.2. Evaluasi Sistem Yang Berjalan

Sistem Informasi Geografis saat ini hanya sebatas teori seperti

pemberitahuan informasi geografis. Kelemahan dari system ini adalah data

tentang lokasi dan jarak , tidak akurat karena system informasi tersebut sebatas

simulasi teori.

Maka solusinya yang penulis buat untuk mengatasi masalah tersebut

adalah membuat suatu system Informasi Geografis toko majestyk menggunakan

Page 4: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

32

web berbasis online dengan metode djikstra yang dilengkapi simulasi sesuai

dengan analisa penulis dilapangan serta database di MySQL.

Algoritma Dijkstra adalah suatu algoritma untuk menentukan jalur

terpendek antar node dengan berdasar pada basis penghitungan "dari satu node

menuju seluruh node". Algoritma Dijkstra termasuk dalam jenis algoritma Link

State, yaitu memperhatikan total jarak dan rute yang akan dilalui. Pada dasarnya,

terdapat beberapa notasi utama dalam pengerjaan Algoritma Dijkstra ini :

Untuk proses inisialisasi, dibentuk suatu array/himpunan N dengan

anggota s (s adalah lambang untuk suatu node sumber). Nilai D adalah jarak yang

akan tersedia pada tabel hasil algoritma, sementara C adalah nilai jarak pada map

yang tersedia. Maka pada tahap inisialisasi ini nilai Dj (jarak pada hasil tabel

antara node s dengan node j, dengan j tidak sama dengan s) dimasukkan nilai yang

sebenarnya. Jika tidak tersambung secara langsung maka akan dianggap tak

terdefinisi. Untuk jarak Ds tentu saja bernilai 0.

perulangan tiap baris dimasukkan node i yang belum termasuk pada

array/himpunan N untuk nanti node i tersebut dijadikan sebagai "perpanjangan"

dari node s, dengan node i juga merupakan node tetangga dari node s. Node i yang

dimasukkan pada himpunan N berdasarkan pada jarak terkecil dengan node s. Dan

jika seluruh node sudah masuk dalam himpunan N, maka iterasi akan berhenti.

Untuk setiap node j (dalam tabel hasil: tiap kolom) diperbaharui nilainya yang

paling kecil yaitu membandingkan antara nilai Dj sebelumnya dengan hasil

penjumlahan (Di+Cij), yaitu penjumlahan jarak node s ke node i dengan jarak

sebenarnya dari node i ke node j.

Page 5: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

33

Jaringan yang sama dengan yang ada pada postingan Bellman-Ford yang lalu :

Majestyk 3

Majestyk 4

Maj

esty

k

1

Majestyk

2

Potensi

1,6

3,9

4,9

5,35,9

2,24,4

Gambar III.2. Algoritma Dijkstra untuk mencari path terpendek.

Pada metode dijkstra, titik atau jarak digunakan karena metode dijkstra

menggunakan graph berarah dalam menentukan jalur rute terpendek.

Gambar III. 3. Flowchart Algoritma Dijkstra.

Untuk mempermudah, buatlah tabel seperti berikut ini:

Mulai

Inisialisasi Titik Awal Dan

Jarak Titik Tetangga

Beri Label Sementara

Untuk Jarak Antar Titik

Tetangga Maks 50 Km

Tentukan Jarak

Minimum Dari Tiap

Titik Tetangga

Ambil masukkan jarak

kedalam table jarak, sebagai

titik terdekat

Titik Terdekat Sudah

Ada Dalam Array Rute?

Masukkan Titik Terdekat

Sebagai array Rute

Selesai

Tidak

Ya

Page 6: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

34

Misalnya kita akan menggunakan algoritma Dijkstra untuk mencari Jalur

terpendek dari potensi.

(Notasi dalam tabel algoritma Dijkstra memiliki format jalur terdekat, dimana

jarak menunjukkan rute dari lokasi sebelumnya menuju lokasi selanjutnya.

1. Baris pertama masih berupa inisialisasi, yaitu potensi akan memiliki nilai

jika tersambung langsung dan tidak memiliki nilai jika tidak tersambung

langsung. Karena potensi kebetulan hanya memiliki 1 tetangga yaitu

majestyk1, maka nilai jarak = 2. Table dibawah ini :

Lokasi

Potensi

Majestyk 1

{potensi,Majestyk1}=1,6

Majestyk 2

{potensi,Majestyk2}= 2,2

Majestyk 3{potensi,Majestyk1,Majestyk3

} = 1,6 +3,9 =5,5

Majestyk 4{potensi,Majestyk2,Majes

tyk4}=2,2 + 4,4 = 6,6

Majestyk sudah berperan sebagai "perpanjangan" lokasi sumber potensi, sehingga

sekarang lokasi-lokasi yang terhubung dengan majestyk sudah bisa "dijangkau"

oleh potensi via majestyk1. Diketahui majestyk 2 dan majestyk 3 terhubung

langsung dengan majestyk 1, sehingga rutenya ditulis (potensi-majestyk1-

majestyk 2) dan (potensi-majestyk 1 - Majestyk 3).bisa dilihat di table dibawah ini

:

Lokasi

Potensi

Majestyk 1

{potensi,Majestyk1}=1,6

{potensi,Majestyk1}=1,6

Majestyk 2

{potensi,Majestyk2}= 2,2{potensi,Majestyk 1,

Majestyk2}=1,6+4,9 = 6,5

Majestyk 3{potensi,Majestyk1,Majestyk3}=1,6 +3,9

= 5,5{potensi,Majestyk1,Majestyk3=1,6

+3,9 = 5,5

Majestyk 4{potensi,Majestyk1,Majestyk3,Majesty

k4}= 1,6+3,9+5,9 = 11,4

{potensi,Majestyk1,Majestyk3,Majestyk,4} = 1,6 + 3,9 +5,9 = 11,4 Potensi,majestyk1

Untuk langkah selanjutnya dipilih jarak yang telah tersambung dengan jarak

lainnya namun belum masuk dalam himpunan jarak. Diketahui yaitu majestyk2

Page 7: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

35

dan majestyk3. Jarak yang dipilih adalah majestyk2 menuju majestyk3. Sehingga

didapat dilihat di tabel berikut.

Lokasi

potensi

majestyk1

{potensi,majestyk1}=2

{potensi,majestyk1}=2

majestyk2

XXXXXXXXXX

{potensi,majestyk1,majestyk2}=5

majestyk3

XXXXXXXX

{potensi,majestyk1,majestyk3}=3

majestyk 4

XXXXX

XXXXXpotensi,majestyk1{Majestyk1,Majestyk2,Majestyk3}=

4,9+5,3 = 10,2XXXXXXXXX {majestyk2,majestyk3}=7 XXXXXmajestyk2,majestyk3

Potensi {potensi,Majestyk1}=1,6 {potensi,Majestyk2}= 2,2{potensi,Majestyk1,Majestyk3}=1,6 +3,9

= 5,5{potensi,Majestyk1,Majestyk3,Majesty

k4}= 1,6+3,9+5,9 = 11,4

{potensi,Majestyk1}=1,6{potensi,Majestyk 1,

Majestyk2}=1,6+4,9 = 6,5{potensi,Majestyk1,Majestyk3=1,6

+3,9 = 5,5Potensi,majestyk1 {potensi,Majestyk1,Majestyk3,Majestyk4}= 1,6+3,9+5,9 = 11,4

{Majestyk1,Majestyk2,Majestyk3}= 4,9+5,3 = 10,2

{Majestyk1,Majestyk2,Majestyk3}= 4,9+5,3 = 10,2

{Majestyk1,Majestyk2,Majestyk3,Majestyk4}= 4,9+5,3+5,9 = 16,1

Potensi Majestyk1 = 1,6

Majestyk1 Majestyk2 = 4,9

Majestyk1 majestyk3= 3,9

majestyk2 majestyk3= 5,3

Potensi ke majestyk2 = jalurnya {Potensi,majestyk1,majestyk2}1,6+4,9=6,5

Potensi ke majestyk3 = jalurnya yang di pilih paling Minimum

{Potensi,majestyk1,majestyk3}1,6+3,9=5,5

Sedangkan lokasi terdekat merupakan majestyk 1,6 karena jarak antara potensi

menuju majestyk {Potensi,majestyk1} = 1,6 adalah jarak terdekat.

III.3. Desain Sistem Baru

Desain Sistem Baru menggunakan bahasa pemodelan UML yang terdiri dari

Usecase Diagram, Class Diagram, Activity Diagram dan Sequence Diagram.

III.3.1. Usecase Diagram

Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan

dengan usecase diagram yang terdapat pada Gambar III.4 :

Page 8: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

36

Penerapan Metode Djikstra Pada Sistem Informasi Geografis

Rute Jalur Toko Majestyk Berbasis Online

Administrator

Login

Data produk

Peta Majestyk

Tentang kami

Data toko

User

Daftar Majestyk

Jarak majestyk

Gambar III.4. Use Case Diagram Sistem Geografis lokasi toko majestyk

Medan

III.3.2. Class Diagram

Rancangan kelas-kelas yang akan digunakan pada sistem yang akan

dirancang dapat dilihat pada gambar III.5 :

using

using

using

Toko

- Id_toko- Nama_toko- Alamat- Long- Lat- Photo-telp

jarak

- Id - titik- titik2- jarak

Connection

ConnectionManager()

user

- Username- Password

1

1..*

1..*

1..*

1

1

Gambar III.5. Class Diagram Sistem Informasi GIS Lokasi Toko Majestyk

Page 9: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

37

III.3.3. Activity Diagram

Bisnis proses yang telah digambarkan pada use case diagram di atas dijabarkan

dengan activity diagram :

1. Activity Diagram Melihat Peta

Aktivitas melihat peta diterangkan dalam langkah-langkah state, dimulai dari

kegiatan melihat panel peta kemudian mencari Artikel Lokasi Toko Majestyk,

selanjutnya menekan tombol atau link yang ada pada peta dan yang terakhir

melihat informasi yang di sajikan dalam peta yang ditunjukkan pada gambar III.6:

Halaman Utama

Click jarak

Click Salah Satu Rute majestyk

Melihat Informasi Lokasi majestyk

Gambar III.6. Activity Diagram Melihat Peta

2. Activity Diagram Login Administrator Website

Aktvitas proses login admin diterangkan dalam langkah-langkah state,

dimulai dari memasukkan username, memasukkan password, jika profil valid

maka sistem akan mengaktifkan menu administrator, sedangkan jika tidak valid,

maka tampilkan pesan kesalahan yang ditunjukkan pada gambar III.7:

Page 10: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

38

Memasukkan Username

Memasukkan Password

Aktifkan Menu Administrator Menampilkan Pesan Error

invalidValid

Gambar III.7. Activity Diagram Login Admin

3. Activity Diagram Mengolah Data Lokasi Toko Majestyk

Aktivitas proses mengolah data Lokasi Toko Majestyk diterangkan dalam

langkah-langkah state yang ditunjukkan pada gambar III.8:

Memilih aksi pada form data majestyk

Memilih Pencarian

Mengetik Kata Kunci

Menekan Enter

Mengisi Data

Menekan Tombol Simpan

Menyimpan Data

Memilih Data

Mengubah Data

Menyimpan Data

Memilih Data

Konfirmasi Penghapusan

Menghapus Data

Tidak

Ya

Pencarian Tambah Ediit Hapus

Gambar III.8. Activity Diagram Mengolah Data Lokasi Toko Majestyk

4. Activity Diagram Mengolah Data Buku Tamu

Aktvitas proses mengolah data Buku Tamu diterangkan dalam langkah-

langkah state yang ditunjukkan pada gambar III.9:

Page 11: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

39

Memilih aksi pada form Buku Tamu

Mengisi Data

Menekan Tombol Kirim

Menyimpan Data

Memilih Data

Konfirmasi Penghapusan

Menghapus Data

Tambah Hapus

Tidak

Ya

Gambar III.9. Activity Diagram Mengolah Data Buku Tamu

5. Activity Diagram Melihat Tentang Program

Pada activity diagram About menjelaskan bahwa informasi atau data diri pembuat

program. Adapun Activity Diagram Tentang Program dapat dilihat pada gambar

III.10.

Masuk Menu Utama

Pilih Tentang Program

Lihat Informasi

Tentang Program

Gambar III.10. Activity Diagram Melihat About

Page 12: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

40

III.3.4. Sequence Diagram

Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada

sequence diagram berikut:

1. Sequence Diagram pada Form Jarak Peta

Serangkaian kegiatan saat terjadi event pada form peta dapat dilihat pada

gambar III.11:

Main form Form jarak

Menu ()

click form jarak ()

Koneksi database ()

User

Tampilkan Menu ()

Gambar III.11. Sequence Diagram Form Peta

2. Sequence Diagram pada Form Login

Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada

gambar III.12 :

Page 13: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

41

Main form Form Login Proses Login

Tampilkan Fom ()

Menu ()

click form loginValidasi nama

dan password ()

Login sukses ()

Invalid ()

Halaman Administrator

Administrator Website

Gambar III.12. Sequence Diagram Form Login

3. Sequence Diagram pada Form Data Toko majestyk

Serangkaian kegiatan saat terjadi event pada form Tempat Majestyk dapat

dilihat pada gambar III.13 :

Main form Form Data toko Proses

Tampilkan Fom ()

Menu ()

click form toko ()

update data ()

Administrator Website

Koneksi database ()

Koneksi database ()

delete data ()

Close form ()

toko

Update data toko

Gambar III.13. Sequence Diagram Form Toko Majestyk

4. Sequence Diagram pada Form Data Buku Tamu

Page 14: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

42

Serangkaian kegiatan saat terjadi event pada form buku tamu dapat dilihat

pada gambar III.14 :

Main form Form Data Buku Tamu Proses

Tampilkan Fom ()

Menu ()

click form Buku Tamu ()

update data ()

Administrator Website

Koneksi database ()

Koneksi database ()

deletel data ()

Close form ()

Buku tamu

Update data buku tamu

Gambar III.14. Sequence Diagram Form Buku Tamu

5. Sequence Diagram pada Form Tentang Kami

Serangkaian kegiatan saat terjadi event pada form Tentang kami dapat dilihat

pada gambar III.15 :

Main form Form Tentang Kami Proses

Tampilkan Fom ()

Menu ()

click form Tentang Kami ()

Administrator Website

Koneksi database ()

deletel data ()

Close form ()

Koneksi database ()

update data ()

Tentang Kami

Gambar III.15. Sequence Diagram Form Tentang Kami

Page 15: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

43

III.4. Desain Database

Desain database terdiri dari tahap merancang kamus data dan melakukan

normalisasi pada tabel.

1. Normalisasi

Normalisasi merupakan sebuah daftar yang terorganisasi dari elemen data

yang berhubungan dengan sistem, dengan definisi yang tepat dan teliti sehingga

pemakai dan analis sistem akan memiliki pemahaman yang umum mengenai

input, output, dan komponen penyimpan. Kamus data penyimpanan sistem yang

akan dirancang dapat dilihat sebagai berikut :

users = ({username} + pass)

toko = ({id_toko} + nama_toko+ long+lat+alamat+photo+telp)

produk= ({id_produk} + nama_produk+ harga + gambar)

jarak = ({id} + titik +titik2+jarak)

bukutamu = ({id } + nama +email+ + komentar)

III.4.1. Desain Tabel

Setelah melakukan tahap normalisasi, maka tahap selanjutnya yang dikerjakan

yaitu merancang struktur tabel pada basis data sistem yang akan dibuat, berikut ini

merupakan rancangan struktur tabel tersebut:

mengenai struktur tabel ini dapat dilihat pada tabel di bawah ini :

Tabel III.2 Rancangan Tabel user Nama Database Elisabet

Nama Tabel User

Page 16: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

44

No Nama Field Tipe Data Boleh Kosong Kunci

1. Username varchar(30) Tidak Primary Key

2. Pass varchar(30) Tidak -

Tabel III.3 Rancangan Tabel Jarak

Nama Database Elisabet

Nama Tabel Jarak

No Nama Field Tipe Data Width Kunci

1. Id Int 11 Primary Key

2. Titik Char 25 -

3. titik2 Char 25 -

4. Jarak Float 0 -

Tabel III.4 Rancangan Tabel Toko

Nama Database Elisabet

Nama Tabel Toko

No Nama Field Tipe Data Width Kunci

1. id_toko Int 5 Primary Key

2. Namatoko varchar 255 -

3. Long double 0 -

4. lat double 0 -

5. alamat varchar 255 -

6 photo varchar 255 -

7 telp varchar 20 -

Tabel III.5 Rancangan Tabel Produk

Nama Database Elisabet

Nama Tabel Produk

No Nama Field Tipe Data Width Kunci

1. Id_produk int(5) Tidak Primary Key

Page 17: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

45

2. Nama_produk varchar(25) Tidak -

3. harga Int Tidak -

4. Gambar - Tidak -

Tabel III.6. Rancangan Tabel Bukutamu

Nama Database Elisabet

Nama Tabel Bukutamu

No Nama Field Tipe Data Width Kunci

1. id int 11 Primary Key

2. nama varchar 15 -

3. email varchar 15 -

4. komentar text 0 -

III.5. Desain User Interface

Tahap perancangan berikutnya yaitu desain user interface yang meliputi

desain output sistem, desain input sistem, dan desain database.

III.5.1. Desain Output

Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan

oleh sistem:

1. Rancangan Form Home

Form ini berfungsi untuk menampilkan home Penerapan Metode Djikstra

Pada Sistem Informasi Geografis Rute Jalur Toko Majestyk Berbasis Online,

rancangan dapat dilihat pada gambar berikut :

wahana

Cari berdasarkan

cari

Peta letak wahana permainan

Hill Park Sibolangit

Wisata idaman keluarga anda

Jarak Terdekat

informasi

Gambar

Hub. Kami tentang kami Toko Kami Home Login admin

informasi

Page 18: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

46

Gambar III.16. Desain Tampilan Peta

2. Rancangan Form Buku Tamu

Form daftar toko majestyk berfungsi untuk menampilkan informasi –

informasi toko majestyk yang disajikan dalam bentuk tabel, rancangan dapat

dilihat pada gambar berikut :

wahana

Cari berdasarkan

cari

Peta letak wahana permainan

Hill Park Sibolangit

Wisata idaman keluarga anda

Jarak Terdekat

informasi

Gambar

Hub. Kami tentang kami Toko Kami Home Login admin

informasi ID E-mail

Jenis Pertanyaan

Isi pertanyaan

Page 19: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

47

Gambar III.17. Desain Tampilan Buku Tamu

3. Rancangan Form Daftar Toko majestyk

Form daftar toko majestyk berfungsi untuk menampilkan informasi –

informasi Toko majestyk Toko majestyk yang disajikan dalam bentuk tabel,

rancangan dapat dilihat pada gambar berikut :

Footer

gambar

Send

wahana

Cari berdasarkan

cari

Peta letak wahana permainan

Hill Park Sibolangit

Wisata idaman keluarga anda

Jarak Terdekat

informasi

Gambar

Hub. Kami tentang kami Toko Kami Home Login admin

informasi

gambar Nama toko: ………………….. Alamat: …………………………. No.telp……………………………

Page 20: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

48

Gambar III.18. Desain Tampilan Daftar Toko majestyk

4. Rancangan Form Tentang Kami

Form ini menjelaskan daftar Toko majestyk berfungsi untuk menampilkan

informasi – informasi Toko majestyk, rancangan dapat dilihat pada gambar

berikut :

Footer

gambar

gambar

Nama toko: ………………….. Alamat: …………………………. No.telp……………………………

Nama toko: ………………….. Alamat: …………………………. No.telp……………………………

wahana

Cari berdasarkan

cari

Peta letak wahana permainan

Hill Park Sibolangit

Wisata idaman keluarga anda

Jarak Terdekat

informasi

Gambar

Hub. Kami tentang kami Toko Kami Home Login admin

informasi

gambar

Page 21: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

49

Gambar III.19. Desain Tampilan Tentang Kami

5. Rancangan Form Jarak Terdekat

Form daftar Toko majestyk berfungsi untuk menampilkan informasi –

informasi Toko majestyk Toko majestyk yang disajikan dalam bentuk tabel,

rancangan dapat dilihat pada gambar berikut :

Footer

Keterangan tentang Perusahaan :………………………………………………………………………….

wahana

Cari berdasarkan

cari

Peta letak wahana permainan

Hill Park Sibolangit

Wisata idaman keluarga anda

Jarak Terdekat

informasi

Gambar

Hub. Kami tentang kami Toko Kami Home Login admin

informasi

Tentukan Lokasi Awal

Page 22: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

50

Gambar III.20. Desain Tampilan Jarak Terdekat

III.5.2. Desain Input

Berikut ini adalah rancangan atau desain input sebagai antarmuka pengguna:

1. Desain Form Login

Desain form login dapat dilihat pada gambar III.21:

Gambar

Username

:

Password :

Login

Footer

Ganti Jenis Peta

Koordinal Long

Koordinal Lat

Cek Rute

Page 23: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

51

Gambar III.21. Desain Form Login

2.Tampilan Halaman menu utama Admin

Pada form ini menggambarkan Menu Utama Admin dapat ditunjukkan pada

gambar III.22 berikut ini :

Gambar III.22. Perancangan Halaman Menu Utama Admin

1. Tampilan Menu edit Produk

Hill Park Sibolangit

Wisata idaman keluarga

anda

Gambar

Menu Administrator

Produk

Tambah

Edit

Hapus

Toko

Tambah

Edit

Hapus

Kembali Ke Menu Administrator

Gambar

Edit Produk

Kembali Ke Menu Administrator

Page 24: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

52

Gambar III.23. Perancangan Tampilan Menu Edit Produk

2. Tampilan Menu hapus Produk

Gambar

Hapus Data Produk

Nama Produk Harga Gambar Pilih

XXXXX XXXXX XXXXX

XXXXX XXXXX XXXXX

XXXXX XXXXX XXXXX

XXXXX XXXXX XXXXX Hapus

Page 25: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

53

Gambar III.24. Perancangan Tampilan Menu Hapus Produk

3. Tampilan Menu Tambah Toko

Gambar

Tambah Data Toko

Kembali Ke Menu Administrator

Pilih

Simpan

Peta

Page 26: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

54

Gambar III.25. Perancangan Tampilan Menu Tambah Toko

4. Tampilan Menu Edit Toko

Gambar

Edit Data Toko

Kembali Ke Menu Administrator

Pilih

Simpan

Peta

Page 27: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

55

Gambar III.26. Perancangan tampilan menu edit toko

5. Tampilan Menu Hapus Toko

Nama Toko Alamat Gambar Pilih

XXXXX XXXXX XXXXX

XXXXX XXXXX XXXXX

XXXXX XXXXX XXXXX

XXXXX XXXXX XXXXX

XXXXX XXXXX XXXXX

Gambar

Hapus Data Toko

Kembali Ke Menu Administrator

Hapus

Page 28: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

56

Gambar III.27. Perancangan tampilan menu hapus toko

Page 29: BAB III ANALISIS DAN DESAIN SISTEMrepository.potensi-utama.ac.id/jspui/bitstream/123456789/65/3/BAB III.pdf · III.1.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi

57