Nama Field Tipe
Panjang Keterangan
no_rute int
4 Primary key
id_rute varchar
30 Penyimpanan nomor rute
jalan varchar
200 Penyimpanan Nama Jalan
km decimal
20,2 Penyimpanan Jarak antar Jalan
4. Tabel Login
Tabel login adalah tabel yang digunakan untuk menyimpan id_login dan pasword admin. Tabel ini mempunyai struktur seperti terlihat pada tabel berikut :
Tabel 3.5 Tabel Login Nama Field
Tipe Panjang
Keterangan
Id_user int
50 Primary key
username varchar
30 Penyimpanan username
password decimal
30 Penyimpanan password
3.7 Desain Tampilan Antar Muka
Pada tahap ini dilakukan perancangan inputoutput untuk berinteraksi antara user dengan sistem. Tahapan ini sangat penting karena desain antarmuka yang baik akan membuat pengguna
merasakan kenyamanan dalam meggunakan sebuah aplikasi komputer. Berikut struktur menu- menu yang akan dirancang pada aplikasi pencarian rute terpendek ini
3.7.1 Rancangan Halaman Utama
Di dalam halaman utama ini user memilih lokasi awal keberangkatan dan lokasi tujuan untuk menuju sebuah mall dan memperoleh jalur rute terpendek menuju mall tersebut. Rancangan
halaman utama dapat dilihat pada gambar 3.8 dan keterangannya sebagai berikut : a.
Header [1] adalah penempatan nama aplikasi dan beserta logo aplikasi b.
Username [2] adalah text box untuk admin memasukkan username login c.
Password [3] adalah text box untuk admin memasukkan kata sandi untuk login
Universitas Sumatera Utara
d. Informasi Lokasi Mall [4] adalah Panel Box untuk penempatan informasi lokasi
keberadaan mall e.
Lokasi Awal [5] adalah panel combo list untuk user memilih lokasi awal keberadaan f.
Lokasi Tujuan [6] adalah Panel combo List untuk user memilih lokasi mall yang akan dituju.
g. Peta Kota Medan [7] adalah peta yang tertanam dalam aplikasi untuk menampilkan
informasi kepada user.
Gambar 3.10 Perancangan Halaman Utama 3.7.2 Halaman Routing Hasil Pencarian
Di dalam halaman ini user akan mendapatkan informasi hasil pencarian rute terpendek menuju sebuah mallplaza dikota medan beserta dengan keterangan jarak dan routing Map yang tersedia.
Halaman hasil pencarian dapat dilihat pada gambar 3.9 dan keterangannya adalah sebagai berikut :
a. Peta Kota Medan [1] adalah peta kota medan yang ditampilkan pada halaman hasil
pencarian b.
Panel zoom inout [2] adalah panel yang berfungsi untuk mengatur memperbesar mengecilkan skala peta.
c. Posisi Lokasi Awal [3] adalah posisi yang dipilih oleh user berdasarkan keberadaannya.
Universitas Sumatera Utara
d. Routing Hasil Pencarian [4] adalah jalur rute terpilih yang akan menjadi informasi bagi
user. e.
Melalui Rute 1[6] adalah rute terpendek yang akan menuju mall f.
Melalui Rute 2[7] adalah rute alternatif pilihan kedua
Gambar 3.11 Perancangan Halaman Routing Hasil Pencarian.
3.7.3 Halaman Admin
Di dalam menu ini admin akan memasukkan data jalan dan jarak tempuh jalan tersebut yang akan diolah menjadi sebuah rute terpendek menuju sebuah dikota medan. Rancangan halaman
admin dapat dilihat pada gambar 3.10 dan keterangannya sebagai berikut : a.
Panel Master [3] adalah pemilihan untuk input data. b.
Input Rute [5] adalah sub menu panel master untuk input rute c.
Nomor [7] adalah untuk mengisi nomor plihan rute d.
Posisi awal [8] adalah list box untuk pemilihan lokasi awal e.
Pilih Mall tujuan [9] adalah list box untuk memilih lokasi tujuan f.
Tombol Simpan [14] adalah tombol penyimpanan data yang diinput g.
Setting Rute [13] adalah tombol untuk edit data rute jalan
Universitas Sumatera Utara
Gambar 3.12 Perancangan Menu Admin Input Rute 3.7.4 Menu admin Input Lokasi
Di dalam menu ini admin memasukkan data lokasi awal dan lokasi tujuan untuk ditampilkan didalam map sebagai marker atau sebagai tanda sebuah lokasi dan juga berfungsi untuk
informasi routing rute. Rancangan halaman input lokasi dapat dilihat pada gambar 3.11 dan keterangannya adalah sebagai berikut :
a. Input Lokasi Awal-Tujuan [6] adalah sub menu untuk input data lokasi awal dan lokasi
tujuan. b.
Start Point [8] adalah list pilihan sebagai input titik lokasi awal keberadaan user c.
Entry Point [9] adalah list pilihan sebagai input titik lokasi mall Tujuan d.
Koordinat X [10] adalah sebagai tanda koordinat lokasi pada peta e.
Koordinat Y [11] adalah sebagai tanda koordinat lokasi pada peta f.
Nama Lokasi [12] adalah untuk input nama sebuah lokasi g.
Deskripsi [13] adalah untuk input keterangan tambahan bagi lokasi
Universitas Sumatera Utara
Gambar 3.13 Menu Admin Input Start Point dan entry Point
Universitas Sumatera Utara
BAB IV
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi Sistem
