khususnya ditujukan kepada orang-orang yang biasa menggunakan angkutan kota dalam kesehariannya untuk bepergian. Pengguna diharapkan dapat mengambil keputusan
dengan cepat dan tepat dengan bantuan dari aplikasi yang didesain dengan sederhana dan ringkas ini.
3.1.3 Analisis Spesifikasi Perangkat Lunak
Adapun syarat bagi pengguna Aplikasi Pemilihan Angkot ini adalah pengguna memiliki perangkat ponsel yang sudah memiliki browser yang terhubung dengan jaringan internet
3.1.4 Analisis Algoritma
Berikut ini merupakan langkah-langkah untuk membangun solusi pada Aplikasi Pemilihan Trayek Angkot:
1. Buat matriks n x n, dimana n adalah jumlah daerah.
2. Buat graf untuk setiap trayek angkutan. Untuk satu trayek angkutan maka akan
dibentuk n graf, dimana n adalah jumlah trayek angkutan. Dan untuk dua trayek angkutan maka akan dibentuk
� × � − � × � graf, dimana n adalah jumlah trayek angkutan dan d adalah jumlah daerah transit. Ini dilakukan karena akan
dikombinasikan ke keseluruhan trayek angkutan dengan daerah transit. 3.
Terapkan algoritma Floyd dari setiap graf yang sudah dibuat. 4.
Simpan solusi.
3.2 Perancangan Aplikasi
Menurut John Burch dan Gary Grudnitski dalam Yatini 2007, perancangan didefinisikan sebagai penggambaran, perencanaan dan pembuatan sketsa atau pengaturan
dari beberapa elemen yang terpisah ke dalam suatu kesatuan yang utuh dan berfungsi.
Universitas Sumatera Utara
Perancangan sistem dapat dibagi menjadi dua tahap yaitu perancangan konseptual dan perancangan fisik yang tujuan utamanya adalah menghasilkan suatu rancangan yang
mampu memenuhi kebutuhan pengguna aplikasi.
3.2.1 Perancangan Konseptual
Tahapan perancangan ini menitikberatkan pada perencanaan konsep, misalnya sistem kontrol, rancangan modul dan aliran data. Pada tahap ini akan digambarkan alur kerja
sistem dengan menggunakan flowchart dan Unified Modelling Language yang akan memberikan konsep yang jelas mengenai aplikasi yang akan dibangun.
3.2.1.1 Flowchart Aplikasi
Flowchart diagram alir merupakan diagram yang memperlihatkan aliran kontrol seluruh sistem termasuk program, input dan output. Whitten, 1998. Dengan adanya flowchart,
maka runtutan proses berjalannya suatu aplikasi dapat dilihat lebih jelas. Aplikasi yang dirancang terdiri dari dua bagian, yaitu aplikasi untuk mobile dan aplikasi untuk server.
Secara garis besar, langkah-langkah yang ada pada kedua aplikasi dapat dilihat pada Gambar 3.1 dan Gambar 3.2 berikut.
Universitas Sumatera Utara
START
Input Daerah Asal, Daerah
Tujuan
Cari id_daerah_asal dan id_daerah_tujuan di
tabel_solusi
Tampilkan Solusi berdasarkan
id_daerah_asal dan
id_daerah_tujuan
END
Gambar 3.1 Flowchart Aplikasi SPK Pemilihan Trayek Angkot Versi Mobile
Universitas Sumatera Utara
Start Input
Username, Password
Validasi OK? T
Kelola Daerah Kelola Jarak
Kelola Angkutan
KELOLA TRAYEK
Buat solusi Kelola Trayek
T T
T
T
Lihat Solusi T
Logout User Login
sebagai Admin Y
End Y
Import Data
T T
daerah, jarak,
trayek Y
Simpan ke database
Tambah, ubah.
hapus daerah
Y
Simpan ke database
Simpan ke database
Simpan ke database
Simpan ke database
Tambah, ubah.
hapus angkutan
Tambah, ubah.
hapus jarak
Tambah, ubah.
hapus trayek
Y Y
Y
Solusi Y
Simpan ke database
Pilih angkutan1,
angkutan2, daerah_transit
Y Tampilkan solusi
T
Gambar 3.2 Flowchart Aplikasi Server
Universitas Sumatera Utara
Gambar 3.1 menggambarkan proses pada aplikasi versi mobile. Pengguna akan diminta memasukkan daerah asal dan tujuan. Kemudian menekan tombol Lanjut untuk
mendapatkan hasil. Gambar 3.2 menggambarkan proses pada aplikasi server. Aplikasi ini hanya bisa digunakan oleh administrator. Menu yang terdapat dalam aplikasi server ini
adalah Import Data, Kelola Daerah, Kelola Jarak, Kelola Angkutan, Kelola Trayek, Buat Solusi, dan Lihat Solusi.
3.2.1.2 Pendeskripsian Fungsionalitas Aplikasi
Diagram berikut menunjukkan aktor yang ada pada aplikasi. Pada dasarnya aktor yang ada pada aplikasi ini terbagi menjadi dua, yaitu Angkoters dan Administrator yang di-
generalisasi sebagai aktor Pengguna. Angkoters merupakan pengguna aplikasi mobile dan Administrator merupakan pengguna aplikasi
server.
Gambar 3.3 Aktor
Universitas Sumatera Utara
Fitur-fitur yang digunakan oleh angkoters diperlihatkan pada diagram use case berikut:
Gambar 3.4 Diagram Use Case untuk aktor angkoters
Fitur-fitur yang digunakan oleh administrator diperlihatkan pada diagram use case berikut:
Gambar 3.5 Diagram Use Case untuk aktor administrator
Universitas Sumatera Utara
3.2.1.3 Pendeskripsian Proses dan Aktivitas dalam Aplikasi Pemilihan Angkot
Berikut ini akan dijelaskan proses yang terdapat pada aplikasi pemilihan angkot, yaitu proses pada aplikasi mobile dan aplikasi server
A. Proses pada aplikasi mobile
Berikut ini adalah activity diagram dan tabel proses pada aplikasi mobile
Gambar 3.6 Activity Diagram pada aplikasi mobile
Universitas Sumatera Utara
Tabel 3.1 Penjelasan activity diagram aplikasi mobile Perihal
Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses jalannya aplikasi
mobile Normal Flow
1. Pengguna menentukan daerah asal dan menekan tombol Lanjut.
2. Pengguna menentukan daerah tujuan dan menekan tombol
Lanjut 3.
Aplikasi akan menampilkan solusi Alternatif Flow Tidak ada
Pre Condition Tidak ada
B. Proses pada aplikasi server
1. Proses Login
Berikut ini adalah activity diagram dan tabel proses Login
Universitas Sumatera Utara
Gambar 3.7 Activity Diagram proses Login Tabel 3.2 Penjelasan activity diagram proses Login
Perihal Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses login pada aplikasi
server Normal Flow
1. Pengguna memasukkan username dan password.
2. Aplikasi akan melakukan validasi terhadap data yang
dimasukkan. 3.
Jika data valid maka pengguna akan masuk ke sistem sebagai administrator. Jika tidak pengguna diharuskan memasukkan
data yang valid Alternatif Flow Tidak ada
Pre Condition Tidak ada
2. Proses Import Data
Berikut ini adalah activity diagram dan tabel proses Import Data
Universitas Sumatera Utara
Gambar 3.8 Activity Diagram proses Import Data
Tabel 3.2 Penjelasan activity diagram proses Import Data Perihal
Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses impor data pada
aplikasi server Normal Flow
1. Pengguna mencari file .csv yang akan diimpor
2. Pengguna menekan tombol import
3. Data yang dimasukkan akan disimpan di database aplikasi
server Alternatif Flow Tidak ada
Pre Condition Pengguna sudah melakukan login
3. Proses Kelola Daerah
Berikut ini adalah activity diagram dan tabel proses Kelola Daerah
Universitas Sumatera Utara
Gambar 3.9 Activity Diagram proses Kelola Daerah Tabel 3.3 Penjelasan activity diagram proses Kelola Daerah
Perihal Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses kelola daerah pada
aplikasi server Normal Flow
1. Pengguna dapat menambahkan daerah baru, mengubah daerah
yang sudah ada atau menghapus daerah yang sudah ada 2.
Perubahan akan disimpan di database aplikasi server Alternatif Flow Tidak ada
Pre Condition Pengguna sudah melakukan login
4. Proses Kelola Jarak
Berikut ini adalah activity diagram dan tabel proses Kelola Jarak
Universitas Sumatera Utara
Gambar 3.10 Activity Diagram proses Kelola Jarak
Tabel 3.4 Penjelasan activity diagram proses Kelola Jarak Perihal
Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses kelola jarak pada
aplikasi server Normal Flow
1. Pengguna dapat menambahkan jarak baru, mengubah jarak yang
sudah ada atau menghapus jarak yang sudah ada 2.
Perubahan akan disimpan di database aplikasi server Alternatif Flow Tidak ada
Pre Condition Pengguna sudah melakukan login
5. Proses Kelola Angkutan
Universitas Sumatera Utara
Berikut ini adalah activity diagram dan tabel proses Kelola Angkutan
Gambar 3.11 Activity Diagram proses Kelola Angkutan Tabel 3.5 Penjelasan activity diagram proses Kelola Angkutan
Perihal Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses kelola angkutan
pada aplikasi server Normal Flow
1. Pengguna dapat menambahkan angkutan baru, mengubah
angkutan yang sudah ada atau menghapus angkutan yang sudah ada
2. Perubahan akan disimpan di database aplikasi server
Alternatif Flow Tidak ada Pre Condition
Pengguna sudah melakukan login
Universitas Sumatera Utara
6. Proses Kelola Trayek
Berikut ini adalah activity diagram dan tabel proses Kelola Trayek
Gambar 3.12 Activity Diagram proses Kelola Trayek Tabel 3.6 Penjelasan activity diagram proses Kelola Trayek
Perihal Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses kelola trayek pada
aplikasi server Normal Flow
1. Pengguna dapat menambahkan trayek baru atau menghapus
trayek yang sudah ada 2.
Perubahan akan disimpan di database aplikasi server Alternatif Flow Tidak ada
Pre Condition Pengguna sudah melakukan login
Universitas Sumatera Utara
7. Proses Buat Solusi
Berikut ini adalah activity diagram dan tabel proses Buat Solusi
Gambar 3.13 Activity Diagram proses Buat Solusi
Tabel 3.7 Penjelasan activity diagram proses Buat Solusi Perihal
Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses membuat solusi
pada aplikasi server Normal Flow
1. Pengguna dapat memilih dua pilihan yaitu Buat solusi
autosubmit dan Buat solusi. 2.
Jika memilih Buat solusi autosubmit maka solusi akan dicari dan ditampilkan sejenak selama 1 detik hingga semua solusi
didapatkan. Selama proses berlangsung solusi yang didapatkan
Universitas Sumatera Utara
disimpan di tabel sementara 3.
Jika memilih buat solusi maka solusi akan ditampilkan dengan cara memilih buat solusi seanjutnya. Pengguna harus memilih
menu ini secara terus menerus hingga semua solusi ditampilkan. Solusi yang dihasilkan akan disimpan di tabel solusi.
Alternatif Flow Tidak ada Pre Condition
Pengguna sudah melakukan login
8. Proses Lihat Solusi
Berikut ini adalah activity diagram dan tabel proses Lihat Solusi
Gambar 3.14 Activity Diagram proses Lihat Solusi Tabel 3.8 Penjelasan activity diagram proses Lihat Solusi
Perihal Keterangan
Deskripsi Proses ini berfungsi untuk menunjukkan proses melihat solusi yang
sudah diperoleh Normal Flow
1. Pengguna memilih angkutan 1, angkutan 2 dan daerah
Universitas Sumatera Utara
transit. 2.
Aplikasi akan menampilkan solusi jika menemukan kombinasi yang sesuai
Alternatif Flow Tidak ada Pre Condition
Pengguna sudah melakukan login
3.2.2 Perancangan Fisik
Pada tahap ini rancangan yang telah dibuat pada perancangan konseptual diterjemahkan ke dalam bentuk fisik sehingga terbentuk spesifikasi yang lengkap. Tahapan ini
menitikberatkan pada proses rancangan database dan rancang bangun antarmuka interface.
3.2.2.1 Perancangan Database
Berikut ini rancangan tabel pada Aplikasi Pemilihan Angkot yang akan digunakan pada aplikasi:
Universitas Sumatera Utara
Gambar 3.15 Rancangan Tabel pada Database Aplikasi Pemilihan Angkot
Tabel 3.9 Penjelasan tabel daerah Field
Tipe Data Null
Keterangan
id_daerah BIGINT20
Tidak PRIMARY KEY. AUTO INCREMENT. Pengenal record daerah.
nama_daerah VARCHAR50
Tidak Nama daerah.
Lat VARCHAR20
Ya Titik latitude di peta
Lng VARCHAR20
Ya Titik longiitude di peta
Tabel 3.10 Penjelasan tabel angkutan Field
Tipe Data Null
Keterangan
id_angkutan BIGINT20
Tidak PRIMARY KEY. AUTO INCREMENT. Pengenal record angkutan.
nama_angkutan VARCHAR50
Ya Nama angkutan.
Universitas Sumatera Utara
Tabel 3.11 Penjelasan tabel jarak Field
Tipe Data Null
Keterangan
id_jarak BIGINT20
Tidak PRIMARY KEY. AUTO INCREMENT. Pengenal record jarak.
id_daerah_asal VARCHAR50
Tidak FOREIGN KEY ke tabel daerah kolom id_daerah
id_daerah_tujuan VARCHAR20
Tidak
FOREIGN KEY ke tabel daerah kolom id_daerah
Jarak VARCHAR20
Tidak Jarak antara daerah asal ke daerah tujuan
Tabel 3.12 Penjelasan tabel trayek Field
Tipe Data Null
Keterangan
id_trayek BIGINT20
Tidak PRIMARY KEY. AUTO INCREMENT. Pengenal record trayek.
id_daerah_asal VARCHAR50
Tidak FOREIGN KEY ke tabel daerah kolom id_daerah
id_daerah_tujuan VARCHAR20
Tidak
FOREIGN KEY ke tabel daerah kolom id_daerah
id_angkutan VARCHAR20
Tidak FOREIGN KEY ke tabel angkutan kolom
id_angkutan
Tabel 3.13 Penjelasan tabel graf Field
Tipe Data Null
Keterangan
id_graf BIGINT20
Tidak PRIMARY KEY. AUTO INCREMENT. Pengenal record graf.
id_angkutan_1 BIGINT20
Tidak FOREIGN KEY ke tabel angkutan kolom id_angkutan
id_angkutan_2
BIGINT20
Ya
FOREIGN KEY ke tabel angkutan kolom id_angkutan
id_daerah_transit
BIGINT20
Ya
FOREIGN KEY ke tabel daerah kolom id_daerah
Graf BLOB
Tidak Graf
Universitas Sumatera Utara
Tabel 3.14 Penjelasan tabel sementara Field
Tipe Data Null
Keterangan
id_solusi BIGINT20
Tidak PRIMARY KEY. AUTO INCREMENT. Pengenal record graf.
id_angkutan_1 BIGINT20
Tidak FOREIGN KEY ke tabel angkutan kolom id_angkutan
id_angkutan_2
BIGINT20
Ya
FOREIGN KEY ke tabel angkutan kolom id_angkutan
id_daerah_transit
BIGINT20
Ya
FOREIGN KEY ke tabel daerah kolom id_daerah
id_daerah_asal
BIGINT20
Tidak
FOREIGN KEY ke tabel daerah kolom id_daerah
id_daerah_tujuan
BIGINT20
Tidak
FOREIGN KEY ke tabel daerah kolom id_daerah
Rute VARCHAR255
Tidak Rute angkutan
Jarak DOUBLE
Tidak Jarak yang ditempuh dari daerah asal ke
daerah tujuan
Tabel 3.15 Penjelasan tabel login Field
Tipe Data Null
Keterangan
username VARCHAR20
Tidak PRIMARY KEY. Username pengguna password
VARCHAR100 Tidak Password pengguna
Tabel 3.16 Penjelasan tabel solusi Field
Tipe Data Null
Keterangan
id_solusi BIGINT20
Tidak PRIMARY KEY. AUTO INCREMENT. Pengenal record graf.
id_angkutan_1 BIGINT20
Tidak FOREIGN KEY ke tabel angkutan kolom id_angkutan
id_angkutan_2 BIGINT20
Ya FOREIGN KEY ke tabel angkutan
kolom id_angkutan id_daerah_transit BIGINT20
Ya FOREIGN KEY ke tabel daerah kolom
id_daerah
Universitas Sumatera Utara
Tabel 3.16 Penjelasan tabel solusi Lanjutan
id_daerah_asal BIGINT20
Tidak FOREIGN KEY ke tabel daerah kolom id_daerah
id_daerah_tujuan BIGINT20 Tidak FOREIGN KEY ke tabel daerah kolom
id_daerah Rute
VARCHAR255 Tidak Rute angkutan Jarak
DOUBLE Tidak Jarak yang ditempuh dari daerah asal ke
daerah tujuan
3.2.2.2 Perancangan Antarmuka
Perancangan antarmuka merupakan tahap penting, sebab di sini pengguna akan melakukan interaksi dengan aplikasi. Antarmuka yang akan dibangun harus sederhana
namun cukup menarik dalam arti tidak berlebihan sehingga mudah dipahami dan dipelajari pengguna.
Rancangan antara muka dibagi menjadi dua bagian, yaitu rancangan aplikasi mobile dan rancangan aplikasi server.
A. Rancangan Antarmuka Aplikasi Mobile
Berikut ini adalah rancangan antarmuka pada aplikasi mobile.
1. Halaman input daerah asal
Halaman input daerah asal akan alangsung ditampilkan jika pengguna membuka aplikasi ini. Pada halaman ini pengguna dapat langsung memilih daerah asal langsung dari list
yang disediakan. Pengguna juga dapat melakukan pencarian terlebih dahulu dengan memilih menu cari. Rancangan halaman input daerah asal dapat dilihat pada Gambar 3.16
Universitas Sumatera Utara
Gambar 3.16 Rancangan halaman input daerah asal
2. Halaman input daerah tujuan
Setelah menentukan daerah asal, selanjutnya pengguna harus menentukan daerah tujuan. Caranya sama seperti pada proses menentukan daerah asal. Rancangan halaman input
daerah asal dapat dilihat pada Gambar 3.17
Gambar 3.17 Rancangan halaman daerah tujuan
Universitas Sumatera Utara
3. Halaman hasil
Setelah menentukan daerah asal dan tujuan, untuk menampilkan hasil maka pengguna harus menekan tombol lanjut. Aplikasi akan menampilkan halaman hasil yang
menunjukkan solusi angkutan kota yang sesuai. Rancangan halaman hasil dapat dilihat pada Gambar 3.18
Gambar 3.18 Rancangan halaman hasil
B. Rancangan Antarmuka Aplikasi Server
Berikut ini adalah rancangan antarmuka untuk aplikasi server
1. Halaman Login
Pada aplikasi server, pengguna harus melakukan login terlebih dahulu. Begitu pengguna membuka aplikasi, maka halaman yang ditampilkan adalah halaman login. Halaman login
terdiri dari dua field dan satu tombol , yaitu field Username, Password dan tombol login. Jika data yang dimasukkan salah, maka aplikasi akan menampilkan pesan error.
Rancangan halaman hasil dapat dilihat pada Gambar 3.19
Universitas Sumatera Utara
Gambar 3.19 Rancangan halaman Login
2. Halaman Import Data
Pada halaman ini, pengguna dapat memasukkan data dengan cara mengimpor dari file .csv yaitu file yang dihasilkan oleh Ms. Excel. Data yang dimasukkan berupa daftar
daerah, jarak dan trayek. Data yang diimpor akan dimasukkan ke dalam database.
Gambar 3.20 Rancangan halaman Import Data
Universitas Sumatera Utara
3. Halaman Kelola Daerah
Pada halaman ini pengguna dapat menambahkan daerah baru, menghapus daerah dan mengubah daerah. Dibagian kanan ditampilkan peta yang berasal dari Google Maps.
Dengan bantuan peta ini, pengguna dapat meletakkan posisi daerah yang ada ke dalam peta dengan simbol titik.
Gambar 3.21 Rancangan halaman Kelola Daerah
4. Halaman Kelola Jarak
Pada halaman ini pengguna dapat mengelola jarak antar daerah. Data daerah ditampilkan dalam bentuk matriks n x n. Rancangan halaman kelola jarak dapat dilihat pada Gambar
3.22 berikut
Universitas Sumatera Utara
Gambar 3.22 Rancangan halaman Kelola Jarak
5. Halaman Kelola Angkutan
Pada halaman ini pengguna dapat menambahkan angkutan baru, menghapus angkutan dan mengubah angkutan.
Gambar 3.23 Rancangan halaman Kelola Angkutan
Universitas Sumatera Utara
6. Halaman Kelola Trayek
Pada halaman ini pengguna dapat menambahkan trayek baru dan menghapus trayek. Untuk membuat trayek baru, pengguna cukup memilih titik-titi yang terdapat pada peta.
Gambar 3.24 Rancangan halaman Kelola Trayek
7. Halaman Buat Solusi
Pada halaman ini pengguna dapat memilih dua menu, yaitu menu Buat Solusi autosubmit dan menu Buat Solusi. Perbedaannya adalah, pada Buat Solusi autosubmit
solusi akan dicari dan disimpan ke database secara otomatis. Aplikasi akan mencari semua kemungkinan solusi dari data yang ada. Pada Buat Solusi, pada dasarnya sama
saja, perbedaannya untuk mendapatkan solusi selanjutnya pengguna harus terus menerus memilih menu buat solusi selanjutnya. Rancangan halaman kelola jarak dapat dilihat pada
Gambar 3.25 berikut.
Universitas Sumatera Utara
Gambar 3.25 Rancangan halaman Buat Solusi
8. Halaman Lihat Solusi
Pada halaman ini akan ditampilkan solusi yang telah diperoleh
Gambar 3.26 Rancangan halaman Lihat Solusi
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi
