Antarmuka Tampil Peta USU Antarmuka Pilih Node Antarmuka Hasil Pencarian Rute Terpendek

Node Awal dan Node Akhir. Jika pengguna telah memilih Node Awal dan Node Akhir lalu kemudian memilih menu Temukan Rute Terpendek, maka sistem akan melakukan perhitungan algoritma Dijkstra dan secara otomatis menampilkan Tampilan Peta hasil perhitungan algoritma Dijkstra tersebut. Tampilan Peta ini merupakan viewflipper yang memperbolehkan pengguna melakukan proses geser drag. Jika pengguna melakukan proses drag ke kiri maka sistem akan menampilkan hasil String perhitungan algoritma Dijkstra tapi jika pengguna melakukan proses drag ke kanan maka sistem akan menampilkan Total Jarak perhitungan algoritma Dijkstra.

3.2 Perancangan Sistem

Antarmuka merupakan perantara antara pengguna dengan sistem. Tampilan antarmuka sangat mempengaruhi penggunaan suatu sistem, oleh karena itu antarmuka harus dirancang sedemikian rupa sehingga memudahkan pengguna dalam menggunakan sistem tersebut. Pada tahap ini akan dilakukan perancangan antarmuka sistem yang akan digunakan dan dalam perancangannya sebagai aplikasi Android maka tampilan antarmuka ini dirancang pada masing – masing layout yang saling berintegrasi satu sama lain. Rancangan antarmuka sistem ini terdiri dari beberapa layout yang memiliki tujuan dan kegunaan yang berbeda – beda, seperti layout Tampilan Awal, layout Cara Penggunaan, layout Info Aplikasi, layout Pilihan, layout Tampil Peta USU, layout Pilih Node, dan layout Hasil. Namun dari sejumlah layout tersebut, layout Tampil Peta USU, layout Pilih Node dan layout Hasil merupakan tampilan utama yang dinamis dan akan dirancang secara khusus.

3.2.1 Antarmuka Tampil Peta USU

Antarmuka Tampil Peta USU merupakan layout yang dilihat oleh pengguna untuk hanya sekedar melihat peta USU. Layout ini memiliki fungsi ViewFlipper yang memperbolehkan pengguna untuk melakukan proses geser drag ke kiri dan ke kanan untuk menampilkan dua tampilan yang berbeda. Pada layout Tampil Peta USU ini terdapat dua tampilan yang berbeda antara lain tampilan peta USU dan tampilan legenda. Universitas Sumatera Utara Gambar 3.7. Rancangan Antarmuka Tampil Peta USU Keterangan : 1. Peta USU Tampilan peta Universitas Sumatera Utara dari server Geoserver dengan view kontrol zoom in, zoom out, dan lain – lain. 2. Warna Bangunan pada Peta Objek berbentuk yang memiliki kesamaan warna dengan polygon pada peta 3. Nama BangunanTempat Nama – nama yang mewakili polygon pada peta seperti nama fakultas, nama gedung baik secara tunggal atau kelompok.

3.2.2 Antarmuka Pilih Node

Antarmuka Pilih Node merupakan layout yang dihadapkan kepada pengguna sebagai langkah awal dari proses pencarian rute terpendek. Pada layout ini pengguna melakukan proses pemilihan node awal dan akhir yang kemudian diproses oleh program dengan menggunakan algoritma Dijkstra pada proses berikutnya. Universitas Sumatera Utara Gambar 3.8. Rancangan Antarmuka Pilih Node Keterangan : 1. Listview Node Awal Digunakan untuk memilih node atau titik awal proses pencarian rute terpendek. 2. Listview Node Akhir Digunakan untuk memilih node atau titik akhir proses pencarian rute terpendek. 3. Tombol Cari Rute Terpendek Memverifikasi pemilihan node dan memberikan tanda mulai untuk proses pencarian rute terpendek dengan algoritma Dijkstra.

3.2.3 Antarmuka Hasil Pencarian Rute Terpendek

Antarmuka Hasil Pencarian Rute Terpendek juga merupakan layout yang memiliki fungsi View Flipper. Layout ini memiliki tiga tampilan didalamnya, antara lain Layout Hasil Tampilan Peta, Layout Hasil String, dan Layout Total Jarak. Ketiga layout tersebut merupakan hasil dari perhitungan oleh algoritma Dijkstra yang sebelumnya telah diberikan inputan pada Antarmuka Pilih Node. Dan seperti pada Antarmuka Tampil Peta, untuk berpindah ke layout satu ke layout yang lain maka pengguna haris melakukan proses geser drag. Universitas Sumatera Utara Gambar 3.9. Rancangan Antarmuka Hasil Pencarian Rute Terpendek Keterangan : 1. Peta Universitas Sumatera Utara. Peta ini telah di update dari perhitungan algoritma Dijkstra sehingga menampilkan rute terpendek secara visual. Update perhitungan algoritma Dijkstra pada peta ini menambahkan tiga bentuk baru dalam peta, antara lain lingkaran berwarna hijau yang menunjukkan node awal, garis berantai berwarna kuning yang menunjukkan rute terpendek, dan lingkaran berwarna merah yang menunjukkan node akhir. 2. Susunan teks yang berbentuk String. Berupa rantai node – node yang dilewati pada rute terpendek mulai dari node awal hingga akhir. 3. Teks yang berupa angka desimal. Merupakan total jarak yang dilalui dari node awal hingga node akhir pada rute terpendek. Universitas Sumatera Utara BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM

4.1 Implementasi Sistem