3.2 Perancangan Sistem
Pada bagian ini digunakan Unified Modeling Languange UML sebagai bahasa spesifikasi standar suatu model yang berfungsi untuk membantu merancang sistem. Sistem ini dibangun
dengan membuat use case diagram, sequence diagram dan activity diagram.
3.2.1 Use Case Diagram Use case adalah gambaran fungsionalitas dari suatu sistem, sehingga user paham dan
mengerti mengenai kegunaan sistem yang dibangun, dimana penggambaran sistem dari sudut pandang user itu sendiri sehingga use case lebih di titik beratkan pada fungsionalitas yang
ada pada sistem, bukan berdasarkan alur atau urutan kejadian. Berikut use case diagram dapat dilihat pada Gambar 3.4.
Gambar 3.4 Use Case Diagram
Universitas Sumatera Utara
3.2.2. Activity Diagram Activity diagram dapat menggambarkan proses bisnis dan urutan aktivitas dalam sebuah
proses, serta dapat menggambarkan alur aktivitas kerja pada sistem yang sedang dirancang atau pun berjalan, bagaimana masing-masing alur berawal, decision yang mungkin terjadi,
dan bagaimana berakhir.
Activity diagram pada gambar 3.5 menjelaskan proses kerja dari sistem untuk proses menentukan titik awal dan akhir serta memilih algoritma yang akan digunakan oleh user.
Activity diagram sistem pada aplikasi yang dibuat dapat dilihat pada Gambar 3.5.
Gambar 3.5 Activity Diagram Cara Kerja Sistem
Universitas Sumatera Utara
3.2.3 Sequence Diagram Sequence diagram mengilustrasikan bagaimana message dikirim dan diterina diantara objek,
dan diurutan yang sama, sequence membantu untuk menggambarkan data yang masuk dan keluar sistem. Sequence diagram sistem ini dapat dilihat pada Gambar 3.6
Gambar 3.6 Sequence Diagram Sistem
3.3 Perancangan Antarmuka Interface
Perancangan antarmuka interface merupakan bagian penting dalam membangun sebuah sistem.Antarmuka yang baik perlu memperhatikan faktor pengguna dalam menggunakan
sistem, selain untuk mempermudah pengguna dalam menggunakan sistem yang dibangun juga perlu diperhatikan kenyamanan dari pengguna dalam menggunakan sistem tersebut.
Adapun antarmuka yang terdapat pada sistem ini adalah halaman menu Home, Klinik Kecantikan ke Klinik Kecantikan, Pengaturan, Bantuan dan Tentang.
3.3.1 Halaman Menu Home Halaman Home merupakan halaman utama yang ditampilkan dari sistem ketika sistem
dijalankan.Tampilan rancangan halaman menu Home dapat dilihat pada Gambar 3.7 dan keterangan gambar rancangan halaman pada Tabel 3.3.
Universitas Sumatera Utara
Gambar 3.7 Rancangan Antarmuka Halaman Menu Home
Tabel 3.3 Keterangan Gambar Rancangan Antarmuka Halaman Home
No Keterangan
1 Label untuk menampilkan keterangan judul sistem
2 Menu “Pengujian” untuk menampilkan graf , rute dan perbandingan
hasil algoritma
3 Menu “Pengolahan Data” untuk mengelola vertex dan edge
4 Menu “Bantuan” untuk menampilkan halaman petunjuk penggunaan
sistem
5 Menu “Tentang” untuk menampilkan data dari penulis
6 Label untuk menampilkan nama dan NIM
7 Picture Box untuk menampilkan logo Universitas Sumatera Utara
8 Label untuk menampilkan program studi
Universitas Sumatera Utara
3.3.2 Halaman Menu Pengujian Halaman Pengujian merupakan halaman yang tampil saatpengguna memilih menu Pengujian
pada halaman utama.Pada halaman ini pengguna dapat melihat graf yang akan ditampilkan, memilih algoritma yang akan digunakan, serta melihat hasil total jarak, rute dan execution time
dari kedua algoritma tersebut. Rancangan halaman menu Pengujian dapat dilihat pada Gambar 3.8 dan keterangan gambar rancangan halaman pada Tabel 3.4.
Gambar 3.8 Rancangan Antarmuka Halaman Menu Pengujian
Tabel 3.4 Keterangan Gambar Rancangan Menu Pengujian
No Keterangan
1 Combo Box untuk node asal
2 Combo Box untuk node tujuan
3 Button untuk menampilkan hasil
4 Group Box untuk grup A
Universitas Sumatera Utara
5 Group Box untuk grup Brute Force
6 Check Box untuk menampilkan graf A
7 Label untuk menampilkan hasil pengujian A
8 Textbox untuk menampilkan rute A
9 Check Box untuk menampilkan graf Brute Force
10 Label untuk menampilkan hasil pengujian Brute Force
11 Textbox untuk menampilkan rute Brute Force
12 WPF Element Host untuk menampilkan Graf
13 Button untuk mengembalikan pengaturan kesemula
3.3.3 Halaman Menu Pengolahan Data Halaman Pengolahan Data merupakan halaman yang tampil saat pengguna memilih menu pada
menubar. Pada halaman ini pengguna dapat mengelola graf yang akan ditampilkan, memasukkan graf, menambahkan node vertex, menghapus node vertex, mengubah tag,
memasukkan nama dari node vertex dan memasukkan rute yang akan dilalui dari setiap node vertex. Rancangan halaman menu Pengolahan Data dapat terbagi menjadi dua yaitu :
3.3.3.1 Tabel Node Pada menu Tabel Node digunakan untuk menambah data node, menghapus atau mengubah data
node yang akan diolah. Rancangan menu Tabel Node dapat dilihat pada gambar 3.9 dan keterangan dapat dilihat pada tabel 3.5
Universitas Sumatera Utara
Gambar 3.9 Rancangan Antarmuka Tabel Node
Tabel 3.5 Keterangan Gambar Rancangan Antarmuka Tabel Node
No Keterangan
1 Data Gride View untuk menampilkan vertex yang telah ditambah
2 Textbox untuk mengisi nama tempat yang akan ditambah
3 Textbox untuk mengisi alamat tempat yang akan ditambah
4 Textbox untuk mengisi posisi X tempat yang akan ditambah
5 Textbox untuk mengisi posisi Y tempat yang akan ditambah
6 Textbox untuk mengisi latitude tempat yang akan ditambah
7 Textbox untuk mengisi longitude tempat yang akan ditambah
8 Button untuk menambahkan node
9 Textbox untuk menampilkan ID
10 Textbox untuk menampilkan nama tempat 11 Textbox untuk menampilkan alamat tempat
12 Textbox untuk menampilkan posisi X tempat
Universitas Sumatera Utara
13 Textbox untuk menampilkan posisi Y tempat 14 Textbox untuk menampilkan latitude tempat
15 Textbox untuk menampilkan longitude tempat 16 Button untuk menghapus data node
17 Button untuk mengedit data node
3.3.3.2 Tabel Koneksi Pada menu Tabel Koneks digunakan untuk menambah data vertext, menghapus atau mengubah
data vertext yang akan diolah. Rancangan menu Tabel Vertex dapat dilihat pada gambar 3.10 dan keterangan dapat dilihat pada tabel 3.6
Gambar 3.10 Rancangan Antarmuka Tabel Vertex Tabel 3.6 Keterangan Gambar Rancangan Antarmuka TabelVertext
No Keterangan
1 Data Gride View untuk menampilkan vertex yang telah tersedia 2
ComboBox untuk mengisi tempat asal 3
ComboBox untuk mengisi tempat tujuan 4
Textbox untuk mengisi jarak antara tempat asal ke tempat tujuan
Universitas Sumatera Utara
5 Button untuk menambah data dari tempat asal ke tempat tujuan
6 Textbox untuk menampilkan ID
7 ComboBox untuk menampilkan tempat asal
9 ComboBox untuk menampilkan tempat tujuan
9 Textbox untuk mengisi jarak antara tempat asal ke tempat tujuan
10 Button untuk mengedit data Vertex 11 Button untuk menghapus data Vertex
3.3.4 Halaman Menu Tentang Penulis Halaman Tentang Penulis merupakan halaman yang tampil saat pengguna memilih menu
Tentang pada halaman utama. Pada halaman ini pengguna dapat melihat biodata dari penulis. Rancangan halaman menu Tentang dapat dilihat pada Gambar 3.11dan keterangan gambar
rancangan halaman pada Tabel 3.7.
Gambar 3.11 Rancangan Antarmuka Tentang
Universitas Sumatera Utara
Tabel 3.7 Keterangan Gambar Rancangan Antarmuka Tentang
No Keterangan
1 PictureBox menampilkan foto dari penulis
2 Texbox menampilkan nama dan NIM dari penulis
3 Texbox menampilkan judul dari penulis
3.3.5 Halaman Menu Bantuan Halaman Bantuan merupakan halaman yang tampil saat pengguna memilih menu Bantuan pada
halaman utama. Pada halaman ini pengguna dapat melihat bagaimana cara menggunakan aplikasi dari. Rancangan halaman menu Bantuan dapat dilihat pada Gambar 3.12 dan keterangan
gambar rancangan halaman pada Tabel 3.8.
Gambar 3.12 Rancangan Antarmuka Bantuan
Universitas Sumatera Utara
Tabel 3.8 Keterangan Gambar Rancangan Antarmuka Bantuan
No Keterangan
1 PictureBox menampilkan screenshot dari halaman Home
2 Label menampilkan isi dari penggunaan masing – masing menu
3 PictureBox menampilkan screenshot dari halaman pengolahan data
4 Label menampilkan isi dari penggunaan pengolahan data
5 PictureBox menampilkan screenshot dari halaman Pengujian
6 Label menampilkan cara melakukan pengujian pada setiap algoritma
Universitas Sumatera Utara
BAB 4 IMPLEMENTASI DAN PENGUJIAN
4.1. Implementasi
Pada penelitian ini, sistem dibangun dengan menggunakan bahasa pemrograman C dengan bantuan perangkat lunak pengembang Sharp Develop. Implementasi dilakukan dengan
mengikuti analisis yang sudah diuraikan pada bab sebelumnya. 4.1.1. Halaman awal
Halaman awal merupakan halaman yang berisi tautan ke halaman yang lain dan merupakan halaman pertama yang ditampilkan sistem. Halaman awal dapat dilihat pada Gambar 4.1.
Gambar 4.1 Implementasi Halaman Awal
4.1.2. Halaman Pengujian Halaman pengujian merupakan halaman dimana pengguna melakukan uji coba untuk mencari
jarak terdekat dari rute asal menuju rute tujuan. Pengguna dapat melakukan pengujian dengan menggunakan algoritma Brute Force atau A seperti yang tersedia pada Gambar 4.2.
Universitas Sumatera Utara
Gambar 4.2. Implementasi Pengujian
4.1.3. Halaman Pengolah Data Halaman pengolah data merupakan halaman yang digunakan untuk menambah, mengubah
atau menghapus data dari tempat – tempat Klinik Kecantikan yang ada didaerah sekitar kota medan yang akan digunakan sebagai Node atau pun Vertex. Pada halaman menu pengolah
data terbagi menjadi dua yaitu :
4.1.3.1 Tabel Node Pada menu Tabel Node digunakan untuk menambah data node, menghapus atau mengubah
data node yang akan diolah. Rancangan menu Tabel Node dapat dilihat pada gambar 4.3
Universitas Sumatera Utara
Gambar 4.3. Implementasi Halaman Tabel Node
4.1.3.2 Tabel Koneksi
Pada menu Tabel Koneksi digunakan untuk menghubungkan dua buah data node, serta menghapus atau mengubah hubungan antara data node yang akan diolah. Rancangan menu
Tabel Koneksi dapat dilihat pada gambar 4.4
Gambar 4.4. Implementasi Halaman Tabel Koneksi
4.1.4. Halaman Tentang
Halaman Tentang berisi informasi dari biodata penulis dan sistem yang dibangun sebagaimana terlihat pada gambar 4.5
Universitas Sumatera Utara
Gambar 4.5 Implementasi Halaman Tentang
4.1.5. Halaman Bantuan
Halaman Bantuan merupakan halaman yang digunakan untuk memberikan informasi cara pemakaian sistem. Sistem yang dibangun sebagaimana terlihat pada gambar 4.6
Gambar 4.6 Implementasi Halaman Bantuan 4.2
Pengujian
4.2.1 Data Node
Berikut ini adalah data node yang digunakan untuk sebagai sampel pada penelitian :
Tabel 4.1 Data Keterangan Klinik Sebagai Node
No Nama Klinik
Alamat Latitude
Longitude
1 Klinik Kecantikkan by dr. Erwin
Jl. Gatot Subroto
3,5969583 98,611345
2 Natasha Skin Clinic Center Skin Care Medan Plaza
Plaza Medan Fair
3,5901958 98,6532813
3 Klinik Kecantikan EUROSKINLAB Medan
Jl Perintis Kemerdekaan
3,597099 98,679077
4 Miracle Aesthetic Clinic Medan
Jl. Hayam Wuruk
3,5816027 98,6615962
5 Klinik Kusuma
Jalan H. Misbah
3,575614 98,682255
6 Erhaclinic
Jl. Iskandar Muda
3,588245 98,661092
7 Yasmin Skin Care by dr. Angginta
Jl. Gagak Hitam
3,5827929 98,626354
8 Skinos Medan
JL. Asia
3,586415 98,697616
9 Vernal Skin Solution
Jl. Bambu II
3,60686 98,6760779
10 The Clinic Medan
Jl. Sekip
3,594361 98,666676
Universitas Sumatera Utara
4.2.2. Pengujian Proses Algoritma A Proses pencarian Klinik Kecantikan dengan menggunakan algoritma A dapat dilihat pada
Gambar 4.7.
Gambar 4.7 Tampilan Pengujian Pencarian Klinik Kecantikan dengan Algoritma A Rute Orange
Untuk perhitungan manual tentukan node yang akan menjadi titik asal kemudian tentukan node yang akan menjadi titik tujuan. Diketahui :
Titik Asal : A dan Titik Tujuan : H 1.
List Open : Node A G = 0; H = 9.645803; F = G + H = 9.645803
Elemen dengan nilai F terkecil : A 2.
Node Aktif : A Dari node yang aktif dicari node tetangga nya. Jika Node ada di list open, maka
nilainya dicek Jika nilai F dari tetangga lebih kecil dari pada node yang sama yang berada dalam list
open, maka nilai diupdate List Open : Node B
G = 6.1; H = 4.938026; F = G + H = 11.03803 Node D
G = 7.6; H = 4.032881; F = G + H = 11.63288
Universitas Sumatera Utara
Elemen dengan nilai F terkecil : B 3.
Node aktif : B Dari node yang aktif dicari node tetangga nya,
Jika Node ada di list open, maka nilainya dicek Jika nilai F dari tetangga lebih kecil daripada node yang sama yang berada dalam list
open, maka nilai diupdate List Open : Node D
G = 7.6; H = 4.032881; F = G + H = 11.63288 Node E
G = 11.3; H = 2.085047; F = G + H =13.38505 Node C
G = 10.4; H = 2.3758; F = G + H = 12.7758 Elemen dengan nilai F terkecil : D
4. Node aktif : D
Dari node yang aktif dicari node tetangga nya, Jika Node ada di list open, maka nilainya dicek
Jika nilai F dari tetangga lebih kecil daripada node yang sama yang berada dalam list open, maka nilai diupdate
List Open : Node E G = 10.9; H = 2.085047; F = G + H = 12.98505
Node C G = 10.4; H = 2.3758; F = G + H = 12.7758
Node G G = 12.3; H = 7.919182; F = G + H = 20.21918
Elemen dengan nilai F terkecil : C 5.
Node aktif : C Dari node yang aktif dicari node tetangga nya,
Jika Node ada di list open, maka nilainya dicek Jika nilai F dari tetangga lebih kecil daripada node yang sama yang berada dalam list
open, maka nilai diupdate LIST OPEN = NODE C
G = 10.9; H = 2.085047; F = G + H = 12.98505 NODE G
Universitas Sumatera Utara
G = 12.3; H = 7.919182; F = G + H = 20.21918 NODE F
G = 13.7; H = 4.059044; F = G + H = 17.75904 Elemen dengan nilai F terkecil : E
6. Node aktif : E
Dari node yang aktif dicari node tetangga nya, Jika Node ada di list open, maka nilainya dicek
Jika nilai F dari tetangga lebih kecil daripada node yang sama yang berada dalam list open, maka nilai diupdate
List Open : Node G G = 12.3; H = 7.919182; F = G + H = 20.21918
NODE F G = 13.7; H = 4.059044; F = G + H = 17.75904
NODE H G = 14; H = 0; F = G + H = 14
Elemen dengan nilai F terkecil : H 7.
Node aktif : H Dari node yang aktif dicari node tetangga nya,
Jika Node ada di list open, maka nilainya dicek Jika nilai F dari tetangga lebih kecil daripada node yang sama yang berada dalam list
open, maka nilai di update H adalah node tujuan dengan nilai terkecil.
Sehingga Didapat total jarak adalah nilai G yang dimiliki oleh node tujuan yaitu : 14 Berdasarkan penjelasan diatas sehingga dapat dilihat hasilnya pada Tabel 4.2 berikut ini :
Universitas Sumatera Utara
Tabel 4.2 Hasil Pengujian Klinik Kecantikan dengan Algoritma A No
Node G
H F
1 A
9.645803 9.645803
2 B
6.1 4.938026
11.03803
D
7.6 4.032881
11.63288
3 D
7.6 4.032881
11.63288
E 11.3
2.085047 13.38505
C
10.4 2.3758
12.7758
4 E
10.9 2.085047
12.98505
C 10.4
2.3758 12.7758
G 12.3
7.919182 20.21918
5 E
10.9 2.085047
12.98505
G 12.3
7.919182 20.21918
F 13.7
4.059044 17.75904
6 G
12.3 7.919182
20.21918
F 13.7
4.059044 17.75904
H 14
14 4.2.3 Pengujian Proses Algoritma Brute Force
Proses pencarian Klinik Kecantikan dengan menggunakan algoritma Brute force dapat dilihat pada Gambar 4.8.
Gambar 4.8 Tampilan Pengujian Pencarian Klinik Kecantikan dengan Algoritma Brute Force Rute Hijau
Universitas Sumatera Utara
Untuk perhitungan manual tentukan node yang akan menjadi titik asal kemudian tentukan node yang akan menjadi titik tujuan. Diketahui pada gambar di atas titik asal dari Klinik
Kecantikan dr.ErwinA menuju ke titik tujuan Klinik Kusuma E :
Titik Asal : A dan Titik Tujuan : E Dalam algoritma brute force, dilakukan percobaan terhadap semua rute yang mungkin
dilalui dari titik asal.
Pola 1 : dimulai dari node A Terdapat 2 Node yang terhubung langsung dengan A yaitu node D dan node B, sehingga
dari pola pertama dikembangkan menjadi
Pola 2 : A →D
Pola 3: A →B
Dari dua pola di atas kembali dikembangkan, sebagai contoh proses pengembangan dari pola 2 adalah sebagai berikut :
Pola 2 : A →D
Ditinjau node yang terhubung dengan node D yaitu node E dan node G, sehingga didapatkan pola lanjutan
A →D→E
A →D→G
Dilakukan proses yang sama sampai didapatkan hasil sebagai berikut :
Tabel 4.3 Hasil Pengujian Algoritma Brute Force No
Rute Jarak
1 AB 6.1
2 ABC 10.4
3 ABCD ∞
4 ABCE ∞
5 ABCF 13.7
6 ABCFD ∞
Universitas Sumatera Utara
7 ABCFE 18.4
8 ABCFG ∞
9 ABCFH ∞
10 ABCFI 16
11 ABCFID ∞
12 ABCFIE ∞
13 ABCFIG ∞
14 ABCFIH 21.2
15 ABCFIHD ∞
16 ABCFIHE 24.3
17 ABCFIHG 30.9
18 ABCFIHGD 35.6
19 ABCFIHGDE 38.9
20 ABCFIHGDJ ∞
21 ABCFIHGE ∞
22 ABCFIHGJ 36.5
23 ABCFIHGJD ∞
24 ABCFIHGJE ∞
25 ABCFIHJ 25.8
26 ABCFIHJD ∞
27 ABCFIHJE ∞
28 ABCFIHJG 31.4
29 ABCFIHJGD 36.1
30 ABCFIHJGDE 39.4
31 ABCFIHJGE ∞
32 ABCFIJ 17.1
33 ABCFIJD ∞
34 ABCFIJE ∞
Universitas Sumatera Utara
35 ABCFIJG 22.7
36 ABCFIJGD 27.4
37 ABCFIJGDE 30.7
38 ABCFIJGDH ∞
39 ABCFIJGE ∞
40 ABCFIJGH 32.4
41 ABCFIJGHD ∞
42 ABCFIJGHE 35.5
43 ABCFIJH 21.7
44 ABCFIJHD ∞
45 ABCFIJHE 24.8
46 ABCFIJHG 31.4
47 ABCFIJHGD 36.1
48 ABCFIJHGDE 39.4
49 ABCFIJHGE ∞
50 ABCFJ ∞
51 ABCG ∞
52 ABCH ∞
53 ABCI ∞
54 ABCJ ∞
55 ABD ∞
56 ABE 11.3
57 ABF ∞
58 ABG ∞
59 ABH ∞
60 ABI ∞
61 ABJ ∞
62 AC ∞
Universitas Sumatera Utara
63 AD 7.6
64 ADB ∞
65 ADC ∞
66 ADE 10.9
67 ADF ∞
68 ADG 12.3
69 ADGB ∞
70 ADGC ∞
71 ADGE ∞
72 ADGF ∞
73 ADGH 22
74 ADGHB ∞
75 ADGHC ∞
76 ADGHE 25.1
77 ADGHF ∞
78 ADGHI 27.2
79 ADGHIB ∞
80 ADGHIC ∞
81 ADGHIE ∞
82 ADGHIF 29.5
83 ADGHIFB ∞
84 ADGHIFC 32.8
85 ADGHIFCB 37.1
86 ADGHIFCBE 42.3
87 ADGHIFCBJ ∞
88 ADGHIFCE ∞
89 ADGHIFCJ ∞
90 ADGHIFE 34.2
Universitas Sumatera Utara
91 ADGHIFJ ∞
92 ADGHIJ 28.3
93 ADGHIJB ∞
94 ADGHIJC ∞
95 ADGHIJE ∞
96 ADGHIJF ∞
97 ADGHJ 26.6
98 ADGHJB ∞
99 ADGHJC ∞
100 ADGHJE ∞
101 ADGHJF ∞
102 ADGHJI 27.7
103 ADGHJIB ∞
104 ADGHJIC ∞
105 ADGHJIE ∞
106 ADGHJIF 30
107 ADGHJIFB ∞
108 ADGHJIFC 33.3
109 ADGHJIFCB 37.6
110 ADGHJIFCBE 42.8
111 ADGHJIFCE ∞
112 ADGHJIFE 34.7
113 ADGI ∞
114 ADGJ 17.9
115 ADGJB ∞
116 ADGJC ∞
117 ADGJE ∞
118 ADGJF ∞
Universitas Sumatera Utara
119 ADGJH 22.5
120 ADGJHB ∞
121 ADGJHC ∞
122 ADGJHE 25.6
123 ADGJHF ∞
124 ADGJHI 27.7
125 ADGJHIB ∞
126 ADGJHIC ∞
127 ADGJHIE ∞
128 ADGJHIF 30
129 ADGJHIFB ∞
130 ADGJHIFC 33.3
131 ADGJHIFCB 37.6
132 ADGJHIFCBE 42.8
133 ADGJHIFCE ∞
134 ADGJHIFE 34.7
135 ADGJI 19
136 ADGJIB ∞
137 ADGJIC ∞
138 ADGJIE ∞
139 ADGJIF 21.3
140 ADGJIFB ∞
141 ADGJIFC 24.6
142 ADGJIFCB 28.9
143 ADGJIFCBE 34.1
144 ADGJIFCBH ∞
145 ADGJIFCE ∞
146 ADGJIFCH ∞
Universitas Sumatera Utara
147 ADGJIFE 26
148 ADGJIFH ∞
149 ADGJIH 24.2
150 ADGJIHB ∞
151 ADGJIHC ∞
152 ADGJIHE 27.3
153 ADGJIHF ∞
154 ADH ∞
155 ADI ∞
156 ADJ ∞
157 AE ∞
158 AF ∞
159 AG ∞
160 AH ∞
161 AI ∞
162 AJ ∞
Dari percobaan di atas, didapatkan rute terpendek dari A ke E adalah A →D→E dengan
jarak 10.9 km.
4.3 Real Running-Time
Kategori