BAB III ANALISA DAN PERANCANGAN SISTEM
3.1
Analisa Kebutuhan Aplikasi Untuk membangun aplikasi lintasan terpendek dengan menggunakan
algoritma djikstra, beberapa kebutuhan yang diperlukan meliputi : a. Interaksi mouse pada layar b. Membuat titik dan garis c. Menghapus titik dan garis d. Perancangan membersihkan layar e. Menampilkan gambar pada layar f. Menyimpan data titik, garis dan gambar g. Menampilkan data titik, garis dan gambar h. Perancangan algoritma djikstra i. Perancangan alur lintasan
3.2 Perancangan algoritma sistem Komponen yang dibutuhkan dalam menggambarkan alur proses pada aplikasi ini dengan menggunakan flowchart.
3.2.1 Perancangan interaksi mouse Alur proses interaksi mouse digambarkan dengan menggunakan flowchart sebagai berikut:
23
Mulai Mendeteksi tombol mouse Tombol mouse ditekan Ya Shift=1
BenarMode Hapus=true
Ya
Tidak X mouse ditekan =x Y mouseditekan=y
Mendeteksipergerakan mouse
Tombol mouse dilepas
Tidak
Ya B
Tidak
Mouse Bergerak
Ya
ya
tidak
BenarPointer Dibuat
objPointer.x2 = x objPointer.y2 = y
Ya
Ya
BenarPointer Dibuat Tidak
Me.Controls .Remove "pointer"
Memeriksa titik terdekat
Ya BenarDitemukan TitikTerdekat
BenarMode Hapus=true
Tombol mouse tidak dilepas
BenarDitemukan TitikTerdekat Tidak
SimpanData Garis
Ya BuatPointer
Ya str = grdData3.TextMatrix(noE lemenTitikAsal, noElemenTitikTujuan) A
Selesai t
Gambar 3.1 Perancangan Interaksi Mouse
24
Tidak
BenarProsesTarik Gagal=true
Gambar 3.2. Perancangan Interaksi Mouse (Lanjutan)
Gambar 3.3 Perancangan Interaksi Mouse (Lanjutan)
25
Keterangan : 1. Proses mouse ditekan Fungsi benar mouse ditekan bernilai true. Memeriksa apakah tombol shif ditekan. Jika ya maka benar mode hapus bernilai true. Nilai kordinat x dan y yang didapat ditampung pada parameter X dan Y. 2. Mendeteksi pergerakan mouse a) Mouse tidak bergerak dan dilepas Cek apakah pointer sudah dibuat, jika sudah maka pointer dihapus. Kemudian cek fungsi benar ditemukan titik terdekat. Apabila benar mode hapus bernilai false maka akan memanggil fungsi simpan data garis, jika benar mode hapus bernilai true maka cek nilai pada grid Grddata3.Jika nilai grid tidak kosong maka fungsi hapus garis akan dipanggil . Jika tidak benar proses tarik gagal dan tidak benar mode hapus (bernilai false) maka fungsi titik dipanggil, jika benar mode hapus bernilai true maka fungsi hapus titik dipanggil. b) Mouse bergerak dan ditekan Cek apakah sudah benar pointer dibuat. Jika ya maka object pointer x2= x dan object pointer y2=y, jika tidak cek apakah benar ditemukan titik terdekat.
Jika
ya
fungsi
buat
benarProsesTarikGagal = True
26
pointer
dipanggil,
jika
tidak
3.2.2 Perancangan bentuk titik dan garis 3.2.2.1 Alur proses interaksi mouse dalam membuat titik dapat digambarkan dengan menggunakan flowchart sebagai berikut:
Gambar 3.4 Perancangan Bentuk Titik
Keterangan : 1. Deklarasikan parameter yang dibutuhkan untuk membuat titik 2. Buatlah bentuk sebagai titik dengan kelengkapan meliputi bentuk titik, ukuran titik, warna titik dan properti lainnya dan buatlah keterangan yang meliputi nama, ukuran, letak dan properti lainnya. Nama titik dan nilai berupa kordinat disimpan pada grid kordinat. 3. Nilai titik disimpan pada nilai no bentuk dan nilai akan bertambah sesuai dengan penambahan bentuk titik.
27
3.2.2.2 Alur proses interaksi mouse dalam membuat garis dapat digambarkan dengan menggunakan flowchart sebagai berikut:
Gambar 3.5 Perancangan Garis
Keterangan : 1. Deklarasikan semua parameter yang dibutuhkan untuk membuat garis. 2. Buat kontrol garis berdasarkan nilai x1,y1,x2,y2 yang didapat. 3. Atur kelengkapan garis berupa tebal, warna dan tipe garis.
28
3.2.3 Perancangan menghapus titik dan garis Alur proses analisis dan perancangan menghapus titik dan garis dapat digambarkan dengan menggunakan flowchart sebagai berikut:
Mulai
1
noElemenMinimum = 0 jarakMinimum = 1000000 i=1
Exit sub (((x - CSng(grdData.TextMatrix(noElemenMinimum, 1))) ^ 2 + (y CSng(grdData.TextMatrix(noElemenMinimum, 2))) ^ 2) ^ 0.5) > 200
i < grdData.Rows
MsgBox "Tidak ada titik di sekitar tempat tersebut"
jarak = ((x CSng(grdData.TextMatrix(i, 1))) ^ 2 + (y - CSng(grdData.TextMatrix(i, 2))) ^ 2) ^ 0.5
Tidak
noTitik = grdData.TextMatrix(noEle menMinimum, 0)
jarak < jarakMinimum
Ya HapusBarisTitik HapusBentukTitik HapusMatriks
jarakMinimum = jarak noElemenMinimum = i
Selesai
i=i+1
1
Gambar 3.6 Perancangan Menghapus Titik dan Garis
29
Keterangan : 1. Tentukan jarak minimum dengan nilai paling besar. 2. Hitung nilai jarak antara dua titik. Lakukan perbandingan dengan nilai jarak minimum. Jika nilai jarak lebih kecil dari jarak minimum maka nilai jarak minimum diganti dengan nilai jarak tersebut. Catat no elemen minimumnya. 3. Jika no elemen = 0 maka proses berhenti, jika tidak lakukan pencarian nilai x dan y berdasarkan no elemen minimum pada grid nilai kordinat. Hitung jarak titiknya. Jika jarak > 200 maka tidak ada titik pada daerah tersebut. Jika < 200 maka titik didapat. 4. Titik yang akan dihapus didapat dari no titik pada grid kordinat berdasarkan kolom 0 dan baris ke elemen minimum 5. Pada
saat no titik didapat fungsi hapusbaristitik, hapusbentuktitik,
hapusmatriks dipanggil. Hapusbaristitik berisi perintah menghapus grid kordinat,hapusbarisbentuk berisi perintah menghapus titik dan keterangan pada layar dan hapusmatrik berisi perintah menghapus baris dan kolom pada grid matriks.
30
3.2.3.1 Hapus Baris Titik
Gambar 3.7 HapusBaris Titik
Keterangan : 1. Lakukan pencarian nilai titik pada grid kordinat yang sama dengan no titik yang akan dihapus. Apabila ditemukan maka hapus baris berdasarkan nilai baris yang didapat. 2. Lakukan pencarian sampai baris terakhir pada grid.
31
3.2.3.2 Hapus Bentuk Titik
Gambar 3.8 Hapus Bentuk Titik Keterangan : 1. Deklarasikan semua parameter yang dibutuhkan. 2. Cari nilai titik dan keterangan berdasarkan no titik. 3. Hapus titik dan keterangan.
32
3.2.3.3 Hapus Matriks
Gambar 3.9 Hapus Matriks
33
Keterangan : 1. Deklarasikan semua parameter yang dibutuhkan. 2. Untuk menghapus kolom atur nilai baris dan kolom grid matriks (grddata3) sama dengan 0 3. Selama nilai kolom lebih sedikit dari jumlah kolom keseluruhan ditambah satu, cek apakah nilai pada grddata3 sama dengan nilai no titik. Jika sama maka deklarasikan baris = 1. 4. Selama nilai baris lebih kecil dari jumlah baris keseluruhan maka jarak diisi dengan nilai pada baris dan kolom dari grddata3. Apabila nilai tidak kosong maka cari nilai garisnya kemudian hapus garis tersebut. Jika nilai baris kurang dari jumlah baris keseluruhan dikurangi satu maka nilai baris ditambah satu. 5. Saat nilai baris sudah tidak lebih kecil dari jumlah baris keseluruhan maka ubah posisi kolom yang akan dihapus dengan satu kolom sebelum kolom terakhir., kemudian setelah bertukar posisi kolom tersebut dihapus. 6. Nilai kolom ditambah satu. 7. Untuk menghapus baris atur nilai baris dan kolom grid matriks (grddata3) sama dengan 0 8. Selama nilai baris lebih sedikit dari jumlah baris keseluruhan , cek apakah nilai pada grddata3 sama dengan nilai no titik. 9. Jika jumlah kolom keseluruhan sama dengan 1 maka hapus baris yang pertama. Jika tidak, nilai kolom dideklarasikan satu. 10. Selama nilai kolom lebih kecil dari jumlah kolom keseluruhan maka jarak diisi dengan nilai pada baris dan kolom dari grddata3. Apabila nilai tidak kosong maka cari nilai garisnya kemudian hapus garis tersebut. Jika nilai
34
kolom kurang dari jumlah kolom keseluruhan dikurangi satu maka nilai kolom ditambah satu. 11. Saat nilai kolom sudah tidak lebih kecil dari jumlah kolom keseluruhan maka hapus baris 12. Nilai baris ditambah satu.
3.2.4 Perancangan membersihkan layar Alur proses membersihkan layar dapat digambarkan dengan menggunakan flowchart sebagai berikut:
mulai
Frame.Picture = LoadPicture("") bersihlayar MsgBox "Layar Sudah Dibersihkan", vbInformation Form2.Label3.Caption = "" Form2.Label4.Caption = ""
selesai
Gambar 3.10 Perancangan Membersihkan Layar Keterangan :
1. Frame layar dikosongkan. 2. Muncul pesan layar sudah dibersihkan 3. memanggil fungsi bersih layar
35
3.2.4.1 Fungsi bersih layar
Gambar 3.11 Fungsi Bersih Layar
Keterangan : 1. Deklarasikan semua parameter yang dibutuhkan 2. Selama no baris kurang dari jumlah keseluruhan baris kurang satu dan no kolom kurang dari jumlah keseluruhan kolom kurang satu, nilai setiap dari
36
baris dan kolom pada grid matriks (grddata3) ditampung pada variabel str. Jika nilai str tidak kosong, fungsi hapus garis dipanggil. 3. Selama no baris kurang dari jumlah keseluruhan baris kurang satu, nilai dari setiap baris dan kolom 0 pada grid kordinat (grddata) ditampung pada variabel str titik. Hapus titik dan keterangan berdasarkan nilai str titik. 4. Kembalikan nilai keseluruhan baris pada grid kordinat (grddata) dan nilai keseluruhan baris dan kolom pada grid matriks (grddata3 menjadi 1 dan nilai nobentuk dikembalikan menjadi 0
3.2.5 Menampilkan gambar pada layar Alur proses menampilkan gambar pada layar dapat digambarkan dengan menggunakan flowchart sebagai berikut:
Gambar 3.12 Menampilkan Gambar Pada Layar
37
Keterangan : 1. Mengatur bahwa commondialog2 akan membaca file bertipe .jpg dan .bmp 2. Memanggil intruksi buka commondialog2 3. Pada saat commondialog2 titik kosong maka nama file diisi dengan file name commondialog, commondialog2 meload gambar ke layar. 4. Ukuran vertikal dan horizontal scroll disesuaikan dengan perbandingan tinggi dan lebar layar utama dan layar penampung gambar.
3.2.6 Menyimpan data titik, garis dan gambar Alur proses meyimpan data titik, garis dan gambar dapat digambarkan dengan menggunakan flowchart sebagai berikut:
38
Gambar 3.13 Menyimpan Data Titik, Garis dan Gambar
39
Keterangan : 1. Periksa apakah layar kosong atau ada gambar titik, garis dan peta. Apabila layar kosong maka akan ada pesan belum ada data yang disimpan sebaliknya buka commondialog1. 2. Nama
file
pada
commondialog1
diisi
dengan
nama
file
dari
commondialog2. Nama file sudah dipenggal tanpa ada tipenya. 3. Filter commondialog2 adalah .txt lalu panggil fungsi simpan. 4. Jika nama file pada commondialog1 tidak kosong maka nama file dibuka untuk menghasilkan nilai output. 5. Print ”titik”. Menampilkan data titik berupa nilai x dan nilai y 6. Print ”Matriks”. Menampilkan data titik yang terhubung dan nilai jarak dari titik tersebut. 7. Jika nama file tidak kosong tampilkan nama filenya.
40
3.2.7 Menampilkan titik, garis dan gambar Alur proses menampilkan data titik, garis dan gambar digambarkan dengan menggunakan flowchart sebagai berikut:
Gambar 3.14 Menampilkan Titik, Garis dan Gambar
Keterangan : 1. layar dikosongkan terlebih dahulu 2. Nama file commondialog1 dikosongkan, filternya .txt lalu perintah open. 3. Apabila nama file kosong maka proses keluar jika tidak buka nama file untuk diinput.
41
4. Fungsi bersih layar dipanggil. 5. Selama tidak EOF, apabila data1 tidak sama dengan titik, tidak sama dengan matriks dan tidak sama dengan file maka grid kordinat titik dibuat, baris dan kolom diisi sesuai dengan data1 dan data2, fungsi membuat titik dijalankan berdasarkan data1 dan data2. Jika data1 bertuliskan matriks maka proses selesai. 6. Selain membuat grid kordinat titik, grid matriks juga dibuat dengan jumlah baris dan kolom sesuai dengan banyaknya jumlah titik. 7. Pada grid matriks ,no garis diisi nilai 1. Selama tidak EOF, jika data1 tidak bernama file maka baris dan kolom grid matriks diisi dengan nilai data1 dan data2 dan nilai pada kolom tersebut diisi dengan data3 dan no garis. Nilai x1 diisi dengan data pada baris ke data1, kolom ke 1, nilai x2 diisi dengan data pada baris ke data2, kolom ke 1, nilai y1 diisi dengan dengan data pada baris ke data1, kolom ke 2, , nilai y2 diisi dengan dengan data pada baris ke data1, kolom ke 2. Lalu panggil fungsi menggambar garis berdasarkan nilai x1,y1,x2 dan y2. 8. Nilai no garis bertambah 1 9. Jika nilai data1 berisi file maka nama file diisi dengan data2, kemudian gambar dengan nama file tersebut ditampilkan dilayar.
42
3.2.8 Perancangan algoritma djikstra Alur proses algoritma djikstra digambarkan dengan menggunakan flowchart sebagai berikut: 1
mulai
Dim infinity As Single ReDim dist(Form1.grdData3.Rows - 1, Form1.grdData3.Cols - 1) ReDim d(Form1.grdData3.Rows - 1) ReDim prev(Form1.grdData3.Rows - 1, Form1.grdData3.Rows - 1 + 1) ReDim visited(Form1.grdData3.Rows - 1) Dim i As Integer, j As Integer, s As String, asal As Integer
Dim k As Integer Dim mini As Integer
infinity = 30000 i = 1 To Form1.grdData3.Cols - 1
i = 1 To Form1.grdData3.Rows 1 d(i) = infinity prev(i, 0) = 0 visited(i) = 0
j = 1 To Form1.grdData3.Cols - 1 Next i
s = Form1.grdData3.TextMatrix(i, j)
k = 1 To Form1.grdData3.Cols - 1
s <> ""
mini = -1
dist(i, j) = Left(s, InStr(1, s, ",", _ vbTextCompare) - 1)
i = 1 To (Form1.grdData3.Cols - 1)
Next j
mini = -1
Next i
visited(i) = 0
(d(i) < d(mini)) And visited(i) = 0
mini = i
1
mini = i
Next i
visited(mini) = 1
Gambar 3.15 Algoritma Djikstra
43
i = 1 To Form1.grdData3.Cols - 1
dist(mini, i) <> ""
d(mini) + dist(mini, i)) < d(i)
(dist(mini, i) + d(mini)) = d(i)
d(i) = (dist(mini, i) + d(mini)) tujuan = Form1.grdData3.TextMatrix(i, 0) prev(i, 0) = 1 prev(i, 1) = mini List2.AddItem tujuan sort
prev(i, 0) = prev(i, 0) + 1 prev(i, (prev(i, 0))) = mini
Next i
Next k
selesai
Gambar 3.16 Algoritma Djikstra (lanjutan)
Keterangan : 1. Deklarasikan variabel dist (jarak antar titik), d( panjang lintasan dari sumber ke titik tujuan tertentu), prev (nilai titik sebelumnya yang telah dikunjungi), visited (titik yang sedang dikunjungi). 2. Tampung nilai jarak antar titik pada grid matriks kedalam dist. 3. Isi nilai d(i), prev(i,0) dan visited(i) dengan nilai 0. lakukan sampai i = nilai maksimum kolom grid matriks. 4.Untuk nilai k=1 sampai nilai k=jumlah maksimum kolom grid matriks lakukan
44
Nilai mini diisi = -1
Untuk nilai i=1 sampai nilai i =jumlah maksimum kolom grid matriks Jika nilai mini=-1 dan jika nilai i yang dikunjungi (visited (i)) bernilai 0 maka nilai mini = i., jika tidak, jika jarak d(i) < d(mini) dan nilai visited(i)=0 maka nilai mini=i.
Nilai visited (mini)=1
Untuk nilai i=1 sampai nilai i =jumlah maksimum kolom grid matriks Jika nilai pada dist (mini,i) tidak sama dengan 0 dan jika nilai (d (mini) + dist (mini,i)) < d(i) maka nilai d(i) = (dist(mini, i) + d(mini)). tujuan = Form1.grdData3.TextMatrix(i, 0) Nilai prev(i, 0) = 1 dan prev(i, 1) = mini. List2.AddItem tujuan sort Jika nilai (d (mini) + dist (mini,i)) = d(i) maka nilai prev(i, 0) = prev(i, 0) + 1 dan prev(i, (prev(i, 0))) = mini
45
3.2.9 Perancangan alur lintasan Perancangan alur lintasan dapat digambarkan dengan menggunakan flowchart sebagai berikut:
Gambar 3.17 Perancangan Alur Lintasan Keterangan : 1. Selama nilai L kurang dari nilai jumlah keseluruhan baris – 1, jika nilai pada list2.text = nilai pada baris ke L kolom 0 pada data grid matriks, maka nilai tujuan = L. 2. Label 3 akan menampilkan informasi jarak (d) berdasarkan nilai tujuan tersebut. 3. Memanggil fungsi alur lintasan (printpath)
46
3.2.9.1 Fungsi alur lintasan (printpath)
Gambar 3.18 Alur Lintasan (printpath)
Keterangan : 1. Fungsi printpath dipanggil berdasarkan nilai tujuan dan nilai kedalam 0 2. Text1 menampilkan nilai tujuan 3. Nilai L diinisialisasikan 1. Selama nilai L <= nilai prev() , j diinisialisai 0. 4. Selama nilai j<= nilai depth, maka tambahkan garis | pada text1. 5. Jika nliai j sudah tidak <= nilai depth fungsi printpath dipanggil ulang.
47
3.3 Perancangan Antar Muka Dalam membuat aplikasi lintasan terpendek dengan algoritma djikstra beberapa fitur yang tersedia pada layar utama adalah sebagai berikut :
Fitur pada form 1 1. layar 2. Grid kordinat titik 3. Grid matriks (hubungan antar titik) 4. Tombol navigator yang meliputi : Simpan data Ambil data Masukan gambar/peta Bersihkan gambar Cari perhitungan
Fitur pada form 2 1. List penampil titik asal dan tujuan 2. List penampil alur lintasan 3. Text penampil alur lintasan 4. label 1, label 2, label 3 dan label 4 5. Tombol kembali
48
3.3.1 Fitur form 1 3.3.1.1 layar
Gambar 3.19 Layar Keterangan : layar digunakan untuk menampilkan gambar/peta, titik dan garis yang dibuat dengan mengklik mouse pada area yang kosong. Untuk membuat garis tarik jarak dari titik satu ke titik yang lain. Pada layar dilengkapi dengan scroll vertikal dan scroll horizontal apabila gambar yang dimuat ukurannya melebihi ukuran layar.
3.3.1.2 Grid kordinat titik
TITIK
X
Y
Gambar 3.20 Grid Kordinat Titik Keterangan : Grid kordinat titik digunakan untuk menampilkan jumlah titik yang dibuat dan data kordinat (x,y) dari titik yang dibuat di layar.
49
3.3.1.3.Grid Matriks (hubungan antar titik)
TITIK 1
1
2
3
2 3
Gambar 3.21 Grid Matriks Keterangan : Grid matriks digunakan untuk menampilkan jumlah titik yang dibuat pada layar dan menampilkan jarak antar titik yang terhubung satu sama lain dengan garis. Pada grid ini selain menampilkan nilai jarak antar titik, ditampilkan juga jumlah garisnya.
3.3.1.4 Tombol navigator Tombol navigator Simpan data
Masukan gambar
Ambil data
Bersihkan
Cari
gambar
perhitungan
Gambar 3.22 Tombol Navigator Keterangan Tombol navigator terdiri dari Tombol simpan data digunakan untuk menyimpan gambar peta, titik dan garis dan data kordinat (x,y) serta jarak antar titik
50
3.3.2 Fitur form2 3.3.2.1 list penampil titik asal dan tujuan TITIK ASAL
TITIK TUJUAN
Gambar 3.23 List Penampil Titik Asal dan Tujuan Keterangan : List penampil berupa 2 listbox. Listbox1 untuk menampilkan nilai semua titik yang dibuat. Listbox2 untuk menampilkan titik mana saja yang bisa ditempuh / ada hubungan dengan titik pada listbox1.
3.3.2.2 List penampil alur lintasan Lintasan
Gambar 3.24 List Penampil Alur Lintasan Keterangan :
List penampil alur lintasan berupa textbox1. Pada textbox1 akan menampilkan urutan titik yang dilewati untuk mencapai jarak terpendek dari titik asal ke titik tujuan.
51
3.3.2.3 Label 1, label 2 dan label 3
Label 1 untuk menampilkan kalimat ” TITIK ASAL” Label 2 untuk menampilkan kalimat ”TITIK TUJUAN” Label 3 untuk menampilkan kalimat ”LINTASAN” Label 4 untuk menampilkan informasi total jaark terpendek dari suatu lintasan. Kalimat berupa ” Jarak dari titik (titik asal) ke (titik tujuan) adalah (total jarak)
TITIK ASAL TITIK TUJUAN LINTASAN Jarak dari titik (titik asal) ke (titik tujuan) adalah (total
Gambar 3.25 Label 1, Label 2 dan Label 3
3.3.2.4 Tombol kembali
kembali
Gambar 3.26 Tombol Kembali Keterangan :
Tombol kembali digunakan untuk kembali dari form2 ke form1
52
