35
A B
C E
2 D
4 3
5 2
3
Gambar 3. 9 Hasil Jalur Terpendek
Dari gambar 3.9 maka jarak user yang berada di lokasi A menuju lokasi E adalah melewati titik B terlebih dahulu dengan total nilainya 5.
3.3 Perancangan Sistem
Pada bagian perancangan sistem, penulis akan menjelaskan dan menggambarkan konsep perancangan antarmuka sistem yang dibuat untuk rekomendasi pencarian rute
SPBU terdekat menggunakan algoritma Bellman-Ford. Rancangan antarmuka ini menggambarkan dan juga menjelaskan proses input menggunakan button pilihan
tujuan ke dalam proses pencarian rute SPBU terdekat sehingga menghasilkan output 3 rekomendasi pencarian SPBU terdekat.
3.3.1 Antarmuka Sistem Perancangan tampilan antarmuka yang digunakan pada rekomendasi rute SPBU
terdekat dengan menggunakan algoritma Bellman-Ford dapat dilihat pda gambar 3.10.
Universitas Sumatera Utara
36
SPBU Kota Medan
Pilih Tujuan Cari SPBU Terdekat
1
Google Map
Gambar 3.10 Halaman Utama Sistem
Rancangan tampilan utama dari sistem ini adalah: a. Terdapat textarea untuk memilih tujuan user. Rancangan pilihan Tujuan user
dapat dilihat pada gambar 3.11. b. Terdapat Button
“Cari SPBU Terdekat” untuk menampilkan hasil rekomendasi rute SPBU terdekat.
c. Menampilkan peta dalam bentuk Google maps.
d. Pada no 1 ada pilihan option yaitu menu utama, daftar SPBU dan about.
Pilihan menu ini dapat dilihat pada gambar 3.12.
JL.jamin GintingSetia Budi Jl Setia Budi Dr mansyur
Pilih Tujuan
Gambar 3.11 Pilihan Tujuan
Universitas Sumatera Utara
37
SPBU Kota Medan
Menu utama Daftar SPBU
About
Gambar 3.12 Pilihan menu
Penjelasan dari gambar 3.12 adalah sebagai berikut: a. Menu utama untuk mengembalikan ke halaman utama.
b. Daftar SPBU untuk menampilkan daftar SPBU di kota Medan. Rancangan Daftar SPBU dapat dilihat pada gambar 3.13.
c. About untuk menampilan data penulis.
Daftar SPBU
No
NO SPBU
alamat
Gambar 3.13 Daftar SPBU
Universitas Sumatera Utara
38
3.3.2. Rancangan Halaman Hasil Pencarian SPBU Terdekat Pada halaman hasil pencarian SPBU akan ditampilkan 3 rekomendasi pencarian rute
terdekat dengan menggunakan algoritma Bellman-Ford. Rancangan dapat dilihat pada Gambar 3.14.
SPBU Kota Medan
Cari Lagi
Google maps
No NO SPBU Nama SPBU Alamat Jarak SPBU Jarak Tujuan Jarak Total
Google Map
Jalan jamin ginting
Gambar 3.14 Hasil Rekomendasi Rute SPBU Terdekat
Penjelasan dari gambar 3.14 adalah sebagai berikut: a. Tabel yaitu Menampilkan 3 rekomendasi jalur SPBU terdekat dimulai dari urutan
paling pendek Jarak semua total. b. Cari lagi Yaitu apabila User ingin mencari lagi untuk menuju tujuan user.
c. Google Maps yaitu apabila user memilih salah satu rekomendasi rute terdekat maka Google Maps akan menampilkan rute perjalanan menuju tujuan.
Universitas Sumatera Utara
BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM
