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 29
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 MULAI Papan Iklan / Brosur Toko majestyk Papan Iklan / Brosur Toko Majestyk Mengingat Alamat Mengunjungi Toko Majestyk Mengunjungi Toko Majestyk SELESAI Phase 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.
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
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.
33 Jaringan yang sama dengan yang ada pada postingan Bellman-Ford yang lalu : Majestyk 1 3,9 Majestyk 3 1,6 4,9 5,3 5,9 Potensi Majestyk 4 2,2 Majestyk 2 4,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. Mulai Ambil masukkan jarak kedalam table jarak, sebagai titik terdekat Inisialisasi Titik Awal Dan Jarak Titik Tetangga Ya Titik Terdekat Sudah Ada Dalam Array Rute? Beri Label Sementara Untuk Jarak Antar Titik Tetangga Maks 50 Km Tentukan Jarak Minimum Dari Tiap Titik Tetangga Masukkan Titik Terdekat Sebagai array Rute Selesai Tidak Gambar III. 3. Flowchart Algoritma Dijkstra. Untuk mempermudah, buatlah tabel seperti berikut ini:
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 Majestyk 4 {potensi,majestyk1,majestyk3 {potensi,majestyk2,majes } = 1,6 +3,9 =5,5 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 Majestyk 1 Majestyk 2 Majestyk 3 Majestyk 4 Potensi Potensi,majestyk1 {potensi,majestyk1}=1,6 {potensi,majestyk1}=1,6 {potensi,majestyk2}= 2,2 {potensi,majestyk 1, Majestyk2}=1,6+4,9 = 6,5 {potensi,majestyk1,majestyk3}=1,6 +3,9 = 5,5 {potensi,majestyk1,majestyk3=1,6 +3,9 = 5,5 {potensi,majestyk1,majestyk3,majesty k4}= 1,6+3,9+5,9 = 11,4 {potensi,majestyk1,majestyk3,majesty k,4} = 1,6 + 3,9 +5,9 = 11,4 Untuk langkah selanjutnya dipilih jarak yang telah tersambung dengan jarak lainnya namun belum masuk dalam himpunan jarak. Diketahui yaitu majestyk2
35 dan majestyk3. Jarak yang dipilih adalah majestyk2 menuju majestyk3. Sehingga didapat dilihat di tabel berikut. Lokasi majestyk1 majestyk2 majestyk3 majestyk 4 {potensi,majestyk1,majestyk3}=1,6 +3,9 Potensi potensi {potensi,majestyk1}=1,6 {potensi,majestyk1}=2 {potensi,majestyk2}= XXXXXXXXXX 2,2 XXXXXXXX = 5,5 XXXXX {potensi,majestyk 1, {potensi,majestyk1,majestyk3=1,6 Potensi,majestyk1 potensi,majestyk1 {potensi,majestyk1}=1,6 {potensi,majestyk1}=2 {potensi,majestyk1,majestyk2}=5 {potensi,majestyk1,majestyk3}=3 Majestyk2}=1,6+4,9 = 6,5 +3,9 = 5,5 XXXXX {Majestyk1,Majestyk2,Majestyk3}= {Majestyk1,Majestyk2,Majestyk3}= {Majestyk1,Majestyk2,Majestyk3}= majestyk2,majestyk3 XXXXXXXXX {majestyk2,majestyk3}=7 4,9+5,3 = 10,2 4,9+5,3 = 10,2 4,9+5,3 = 10,2 XXXXX {potensi,majestyk1,majestyk3,majesty k4}= 1,6+3,9+5,9 = 11,4 {potensi,majestyk1,majestyk3,majesty k4}= 1,6+3,9+5,9 = 11,4 {Majestyk1,Majestyk2,Majestyk3,Maje styk4}= 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 :
36 Penerapan Metode Djikstra Pada Sistem Informasi Geografis Rute Jalur Toko Majestyk Berbasis Online Login Data produk Data toko Daftar Majestyk Administrator Peta Majestyk Jarak majestyk User Tentang kami 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 : 1 using 1..* - Id - titik - titik2 - jarak jarak user - Username - Password 1 Connection ConnectionManager() 1 using 1..* 1..* using Toko - Id_toko - Nama_toko - Alamat - Long - Lat - Photo -telp Gambar III.5. Class Diagram Sistem Informasi GIS Lokasi Toko Majestyk
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:
38 Memasukkan Username Memasukkan Password Valid Aktifkan Menu Administrator invalid Menampilkan Pesan Error 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 Pencarian Tambah Ediit Hapus Memilih Pencarian Mengisi Data Memilih Data Memilih Data Mengetik Kata Kunci Menyimpan Data Mengubah Data Konfirmasi Penghapusan Tidak Menekan Enter Menekan Tombol Simpan Menyimpan Data Menghapus Data Ya 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 langkahlangkah state yang ditunjukkan pada gambar III.9:
39 Memilih aksi pada form Buku Tamu Tambah Hapus Mengisi Data Menyimpan Data Menekan Tombol Kirim Memilih Data Konfirmasi Penghapusan Menghapus Data 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
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: User Tampilkan Menu () Main form Form jarak Menu () click form jarak () Koneksi database () 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 :
41 Administrator Website Main form Form Login Proses Login Halaman Administrator Tampilkan Fom () Menu () click form login Validasi nama dan password () Invalid () Login sukses () 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 : Administrator Website Main form Form Data toko Proses toko Tampilkan Fom () Menu () click form toko () update data () Koneksi database () Close form () delete data () Koneksi database () Update data toko Gambar III.13. Sequence Diagram Form Toko Majestyk 4. Sequence Diagram pada Form Data Buku Tamu
42 Serangkaian kegiatan saat terjadi event pada form buku tamu dapat dilihat pada gambar III.14 : Administrator Website Main form Form Data Buku Tamu Proses Buku tamu Tampilkan Fom () Menu () click form Buku Tamu () update data () Koneksi database () Close form () deletel data () Koneksi database () 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 : Administrator Website Main form Form Tentang Kami Proses Tentang Kami Tampilkan Fom () Menu () click form Tentang Kami () Close form () update data () deletel data () Koneksi database () Koneksi database () Gambar III.15. Sequence Diagram Form Tentang Kami
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 : Nama Database Nama Tabel Tabel III.2 Rancangan Tabel user Elisabet User
44 No Nama Field Tipe Data Boleh Kosong Kunci 1. Username varchar(30) Tidak Primary Key 2. Pass varchar(30) Tidak - Nama Database Nama Tabel Tabel III.3 Rancangan Tabel Jarak Elisabet 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 - Nama Database Nama Tabel Tabel III.4 Rancangan Tabel Toko Elisabet 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 - Nama Database Nama Tabel Tabel III.5 Rancangan Tabel Produk Elisabet Produk No Nama Field Tipe Data Width Kunci 1. Id_produk int(5) Tidak Primary Key
45 2. Nama_produk varchar(25) Tidak - 3. harga Int Tidak - 4. Gambar - Tidak - Nama Database Nama Tabel Tabel III.6. Rancangan Tabel Bukutamu Elisabet 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 : Home Hub. Kami Toko Kami tentang kami Hill Park Sibolangit Jarak Terdekat Login admin Gambar informasi Cari berdasarkan wahana informasi cari Peta letak wahana permainan
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 : Home Hub. Kami Toko Kami tentang kami Hill Park Sibolangit Jarak Terdekat Login admin Gambar informasi Cari berdasarkan wahana ID E-mail Jenis Pertanyaan Peta letak wahana permainan Isi pertanyaan informasi cari
47 Send gambar Footer 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 : Home Hub. Kami Toko Kami tentang kami Hill Park Sibolangit Jarak Terdekat Login admin Gambar informasi Cari berdasarkan gambar wahana Nama toko:.. Alamat:. No.telp Peta letak wahana permainan informasi cari
48 gambar Nama toko:.. Alamat:. No.telp gambar Nama toko:.. Alamat:. No.telp Footer 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 : Home Hub. Kami Toko Kami tentang kami Hill Park Sibolangit Jarak Terdekat Login admin Gambar informasi Cari berdasarkan wahana informasi cari gambar Peta letak wahana permainan
49 Keterangan tentang Perusahaan :. Footer 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 : Home Hub. Kami Toko Kami tentang kami Hill Park Sibolangit Jarak Terdekat Login admin Gambar informasi Cari berdasarkan wahana informasi cari Tentukan Lokasi Awal Peta letak wahana permainan
50 Ganti Jenis Peta Koordinal Long Koordinal Lat Cek Rute Footer 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
51 2.Tampilan Halaman menu utama Admin Gambar III.21. Desain Form Login Pada form ini menggambarkan Menu Utama Admin dapat ditunjukkan pada gambar III.22 berikut ini : Gambar Hill Park Sibolangit Menu Administrator Produk Tambah Edit Hapus Toko Tambah Edit Hapus Kembali Ke Menu Administrator Gambar III.22. Perancangan Halaman Menu Utama Admin 1. Tampilan Menu edit Produk Gambar Edit Produk Kembali Ke Menu Administrator
Hapus 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
53 Gambar III.24. Perancangan Tampilan Menu Hapus Produk 3. Tampilan Menu Tambah Toko Gambar Tambah Data Toko Peta Pilih Simpan Kembali Ke Menu Administrator
54 Gambar III.25. Perancangan Tampilan Menu Tambah Toko 4. Tampilan Menu Edit Toko Gambar Edit Data Toko Peta Pilih Simpan
55 Gambar III.26. Perancangan tampilan menu edit toko 5. Tampilan Menu Hapus Toko Gambar Hapus Data Toko Nama Toko Alamat Gambar Pilih XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX Hapus Kembali Ke Menu Administrator
Gambar III.27. Perancangan tampilan menu hapus toko 56
57