BAB 4 PERANCANGAN Perancangan Algoritma Algoritma shortest path (Haversine formula)

BAB 4 PERANCANGAN

4.1. Perancangan Algoritma 4.1.1 Algoritma shortest path (Haversine formula) Algoritma shortest path akan menghasilkan persamaan penting dalam sistem navigasi, nantinya haversine formula akan menghasilkan jarak terpendek antara dua titik, misalnya pada pola yang diambil dari garis bujur (longtitude) dan garis lintang (latitude). Rumus Haversine : x = (lon2-lon1) * cos ((lat1+lat2)/2); y= (lat2-lat1) d= sqrt(x*x+y*y)*R

Keterangan: x = Longitude (Lintang) y= Lattitude ( Bujur) d= Jarak R= Radius Bumi =6371 km 1 derajat= 0.0174532925 radian

Sampel perhitungan haversine formula Lokasi 1: lon1= 119.800801, lat1= -0.790175 Lokasi 2: lon2= 119.8428 , lat2= -0.8989

lat1 = -0.790175 * 0.0174532925 radian = -0.013791155 radian lon1= 119.800801 * 0.0174532925 radian = 2.090918422 radian lat2 = -0.8989 * 0.0174532925 radian = -0.01569 radian lon2= 119.8428 * 0.0174532925 radian= 2.091651 radian x = (lon2-lon1) * cos ((lat1+lat2)/2) = (2.091651-2.090918422) * cos ((-0.013791155 + -0.01569)/2)

16 http://digilib.mercubuana.ac.id/

= 0.0007329412 y = (lat2-lat1) = (-0.01569- (-0.013791155)) = -0.001897609 d = sqrt (x*x + y*y) * R =sqrt((0.0007329412*0.0007329412)+(

-

0.001897609*0.001897609))*6371 = (0,0003600919916881+0,00005372027661792)*6371 =sqrt (0,00031381216830602) * 6371 = 1,999297324 km 4.2. Perancangan aplikasi Dalam perancangan database akan menggunakan XAMPP yang didalamnya terdiri dari : a. Apache sebagai web server. b. MySQL sebagai pengolah database. c. PhpMyAdmin sebagai database operator. 1.

Struktur Database.

1.1

Tabel Makanan Tabel 4. 1 Struktur tabel makanan

No

Nama

Type

Value Keterangan

1

Id

Integer

12

2

Nama_makanan

Varchar

30

3

Gambar

LongBlob

4

Lat

Double

5

Lng

Double

PK


1.2

Tabel Pembeli Tabel 4. 2 Struktur Tabel pembeli

No

Name

Type

Value

Keterangan

1

Id

Integer

12

PK

2

Nama

Varchar

30

3

Username

Varchar

30

4

Password

Varchar

30

5

Email

Varchar

50

1.3

Tabel admin Tabel 4. 3 Struktur Admin

No

Name

Type

Value

Keterangan

1

Id

Id

12

PK

2

Nama_admin

Varchar

30

3

Username

Varchar

30

4

Handphone

Id

12

5

Alamat

Varchar

50

1.4

Tabel makanan pedagang kaki lima Tabel 4. 4 Struktur pedagang pedagang kaki lima

No Name

Type

Value

Keterangan

1

Id

Integer

20

PK

2

Nama_pedagang Varchar

25

3

Alamat

Varchar

100

4

Handphone

Varchar

12


4.3. Tahap desain Pada tahap ini peneliti membauat perancangan sistem yang akan diusulkan. Perancangan tersebut meliputi merancang tampilan user, merancang database untuk sistem tersebut agar manajemen file menjadi teratur, dan kemudian merancang melakukan pengkodingan dari aplikasi yang akan dibuat.

4.3.1 Use Case Diagram Use case diagram menggambarkan apa yang dilakukan oleh sistem dan tidak menggambarkan bagaimana sistem melakukannya. Komponen use case diagram terdiri dari : aktor, use case dan relasi. Aktor adalah pemain sedangkan use case adalah apa yang akan dilakukan serta relasi adalah penunjuknya. Use case diagram merupakan suatu diagram untuk memodelkan aspek perilaku sistem. Pada tahap ini terdapat dua bagian dari use case diagram. Pada perancangan aplikasi ini yaitu dari sisi user admin dan sisi user pembeli.

1.

Use case diagram admin

Gambar 4. 1 Use case diagram admin


a. Skenario Use Case diagram admin Berdasarkan use case diagram yang telah dibuat pada gambar 4.1, maka perlu dibuat skenario use case yang menjelaskan lebih rinci jalan dari masing-masing aktor pedagang  Skenario use case admin Use Case ini menjelaskan proses yang harus dilakukan seorang admin ketika akan menambahkan daftar makanan yang akan dijual. admin harus login terlebih dahulu sebelum bisa melihat halaman administrator. Di halaman ini admin bisa melihat jumlah pedagang, jumpah view serta bisa juga mencari makanan dengan cara mengetikkan nama makanan. Admin bisa menambahkan pedagang makanan dengan cara mengisi field pada form tambah pedagang makanan. Setelah semua field terisi admin, untuk menyelesaikan proses tambah pedagang makanan, admin diharuskan menekan button tambah. Admin juga bisa mengedit, mengupdate dan menghapus data pedagang makanan pada database. Skenario use case admin dapat dilihat pada tabel 4.5 Tabel 4. 5 Skenario use case diagram admin Nama

Keterangan

Use case

Use case diagram admin

Aktor

admin

Precondition

admin mengetik data makanan

PostCondition admin berhasil mengisi form tambah makanan Description

admin mengetik form tambah makanan untuk dapat mengisi detail pedagang. Admin juga bisa melihat jumlah pedagang, jumlah view serta bisa mengedit, mengupdate dan menghapus data pedagang makanan


2. Use case diagram pedagang dan pembeli

Gambar 4. 2 Use case diagram pedagang dan pembeli

1. Skenario Use Case diagram pedagang dan pembeli Berdasarkan use case diagram yang telah dibuat pada gambar 4.2, maka perlu dibuat skenario use case yang menjelaskan lebih rinci jalan dari masing-masing aktor pedagang  Skenario use case pedagang Use Case ini menjelaskan proses yang harus dilakukan seorang pedagang ketika akan menambahkan daftar makanan yang akan dijual. Pedagang harus login terlebih dahulu sebelum bisa menambahkan daftar makanan yang akan dijual. Pedagang harus mengisi nama makanan, alamat, handphone, gambar serta harus mengaktifkan gps untuk bisa mendapatkan garis lintang dan garis bujur lokasi. Pedagang juga bisa melihat menu tentang, lokasi pedagang, cari pedagang, tambah lokasi dan pedagang terdekat. Skenario use case pedagang dapat dilihat pada tabel 4.6


Tabel 4. 6 Skenario use case pedagang Nama

Keterangan

Use case

Use case pedagang dan pembeli

Aktor

Pedagang

Precondition

Pedagang mengetik data makanan

PostCondition Pedagang berhasil mengisi form tambah makanan Description

Pedagang mengetik form tambah makanan untuk dapat mengisi detail pedagang. Pedagang juga bisa langsung memilih button tentang, profile, lokasi pedagang, cari pedagang, dan pedagang terdekat.



Skenario Use case pembeli Use Case ini menjelaskan proses yang harus dilakukan seorang pembeli ketika akan melihat menu tentang, profile, lokasi pedagang, cari pedagang serta pedagang terdekat. Pedagang harus login atau lewati sebelum bisa melihat menu tentang, lokasi pedagang,cari pedagang, tambah lokasi dan pedagang terdekat. Skenario use case pembeli dapat dilihat pada tabel 4.7 Tabel 4. 7 Skenario use case pembeli Nama

Keterangan

Use case

Use case pedagang dan pembeli

Aktor

Pembeli

Precondition

Pembeli mengetik form login dan register serta menekan

button

tentang,

profile,

lokasi

pedagang,cari pedagang, pedagang terdekat PostCondition Pembeli berhasil mengisi form login dan register serta berhasil menekan button tentang, profile,


lokasi pedagang, cari pedagang, pedagang terdekat. Description

Pembeli harus mengetik form login dan register serta harus menekan button tentang,

profile,

lokasi pedagang, cari pedagang, pedagang terdekat.

 Skenario use case login Use case ini menjelaskan proses yang terjadi untuk masuk sistem. Aktor dalam use case ini pembeli atau pencari makanan dan penjual. Aktor harus memasukkan username dan password terlebih dahulu. Apabila username dan passsword sesuai maka aktor berhasil login. Skenario use case login dapat dilihat pada tabel 4.8 Tabel 4. 8 Skenario use case login Nama

Keterangan

Use case

Login

Aktor

Pembeli atau pedagang

Precondition

Masukkan username dan password

Postcondition

Aktor berhasil masuk ke sistem

Description

Aktor harus login terlebih dahulu agar bisa masuk ke sistem

 Skenario use case registrasi Use case ini menjelaskan proses yang terjadi untuk mengisi data pengguna. Aktor dalam use case ini mengisi data pengguna. Apabila data pengguna berhasil dimasukkan maka data berhasil dimasukan. Skenario use case registrasi dapat dilihat pada Tabel 4.9


Tabel 4. 9 Use case registrasi Nama

Keterangan

Usecase

Registrasi

Aktor

User

Precondition

Pembeli atau pencari makanan dan penjual

Postconditiion

Masukkan data pengguna

Deskription

Aktor harus registrasi dulu sebelum memulai aplikasi

 Skenario logout Use case ini menjelaskan proses yang terjadi untuk keluar sistem. Aktor dalam use case ini akan keluar dari sistem. Aktor harus memilih button keluar maka aktor berhasil keluar. Skenario use case keluar dapat dilihat pada Tabel 4.10 Tabel 4. 10 Use case logout Nama

Keterangan

Use case

Logout

Aktor

Pembeli atau pencari makanan dan penjual

Precondition

Memilih button logout

Postcondition

Aktor berhasil keluar sistem

Description

Aktor harus memilih button logout dalulu sebelum keluar dari sistem.

 Skenario pencarian Use case ini menjelaskan proses yang terjadi untuk mencari pedagang makanan. Pembeli mengisi nama makanan. Apabila nama makanan berhasil ditemukan maka akan tampil nama makanan. Skenario use case pencarian dapat dilihat pada tabel 4.11


Tabel 4. 11 Use case pencarian Nama

Keterangan

Aktor

Pembeli atau pencari makanan

Use case

Pencarian

Precondition

Memasukkan nama makanan

Postcondition

Aktor berhasil mendapatkan nama makanan yang dicari

Description

Pembeli harus memasukkan nama makanan untuk

mendapatkan

pencarian

ingin

dilakukan

 Skenario use case detail penjual Use case ini menjelaskan proses yang terjadi untuk melihat detail penjual. Pembeli memilih button nama makanan. Apabila button nama makanan sudah dipilih maka detail makanan dapat dilihat. Skenario use case detail makanan dapat dilihat pada tabel 4.12 Tabel 4. 12 Use case detail penjual Nama

Keterangan

Use case

Detail penjual

Aktor

Pembeli atau pencari makanan

Precondition

Pembeli harus memilih button nama makanan

Postcondition

Pembeli berhasil melihat detail makanan

Description

Pembeli harus memilih button nama makanan untuk dapat melihat detail makanan

 Skenario tentang Use case ini menjelaskan proses yang terjadi untuk melihat info atau tentang aplikasi. Pembeli melilih button tentang pada menu. Apabila button menu sudah dipilih maka akan tampil dua button


(versi dan syarat ketentuan). Skenario use case tentang dapat dilihat pada tabel 4.13 Tabel 4. 13 Skenario Use case detail tentang Nama

Keterangan

Use case

Tentang

Aktor

Pembeli

Precondition

Pembeli harus memilih button cari pkl

Postcondition

Pembeli berhasil melihat makanan yang divcari

Description

Pembeli harus memilih button cari pkl agar dapat melihat daftar makanan dan juga bisa mengetikkan nama makanan yang dicari

 Skenario use case lokasi (dalam peta) Use case ini menjelaskan proses yang terjadi untuk mencari lokasi pedagang didalam peta. Pembeli memilih button lokasi pedagang. Apabila berhasil maka akan tampil lokasi pedagang (dalam maps). Skenario use case lokasi (dalam peta) dapat dlihat pada gambar 4.14 Tabel 4. 14 Skenario Use case lokasi (dalam peta) Nama

Keterangan

Use case

Lokasi

Aktor

Pembeli

Precondition

Pembeli memilih button lokasi

Postcondtion

Pembeli berhasil melihat lokasi pedagang

Description

Pembeli harus menekan button lokasi agar dapat melihat lokasi pedagang didalam peta


 Skenario use case lokasi terdekat Use case ini menjelaskan proses yang terjadi untuk melihat lokasi terdekat. Pembeli memilih button lokasi terdekat. Apabila button lokasi terdekat sudah dipilih, maka akan tampil nama makanan, gambar dan jarak antara pembeli dan penjual. Skenario use case lokasi terdekat dapat dilihat pada tabel 4.15 Tabel 4. 15 Skenario use case lokasi terdekat Nama

Keterangan

Use case

Lokasi terdekat

Aktor

Pembeli

Precondtion

Pembeli harus memilih button lokasi terdekat

Postcondition

Pembeli berjasil melihat lokasi makanan berdasarkan lokasi terdekat

Description

Pembeli harus memilih button lokasi terdekat agar dapat melihat nama makanan yang terdekat

4.3.2 Activity Diagram Activity diagram menjelaskan alur kerja dan urutan dari aktivitas dari suatu proses.


a. Activity diagram login admin

Gambar 4. 3 Aktivity diagram login admin  Skenario aktivity diagram login admin Admin membuka aplikasi, sistem akan menampilkan form login. Kemudian mengisi form login. Setelah form login diisi, admin menekan tombol login. Jika berhasil memasukkan username dan password yang benar maka sistem akan menampilkan form menu tambah makanan dan jika tidak berhasil maka sistem akan menampilkan pesan username atau password salan, admin harus mengulang dalam pengisian username dan password yang benar. b. Activity diagram login pedagang

Gambar 4. 4 Activity diagram login pedagang


 Skenario aktivity diagram login admin Pedagang

menekan

tombol

tambah,

sistem

akan

menampilkan form login. Kemudian mengisi form login. Setelah form login diisi, pedagang menekan tombol login. Jika berhasil memasukkan username dan password yang benar maka sistem akan menampilkan form menu tambah makanan dan jika tidak berhasil maka sistem akan menampilkan pesan username atau password salan, pedagang harus mengulang dalam pengisian username dan password yang benar. c. Activity diagram logout

Gambar 4. 5 Aktivity diagram logout  Skenario aktivity diagram logout Pedagang menekan button logout maka sistem akan langsung keluar dari aplikasi.


d. Activity diagram registrasi

Gambar 4. 6 Aktivity diagram registrasi  Skenario aktivity diagram registrasi Pedagang

menekan

button

registrasi.

Sistem

akan

menampilkan form registrasi. Pedagang mengisi form registrasi. Setelah itu pedagang mengisi form registrasi. Setelah semua form registrasi terisi maka pedagang harus menekan button simpan. Setelah itu sistem akan memproses data, jika berhasil maka akan tampil notifikasi register berhasil sedangkan jika tidak berhasil maka sistem akan menampilkan notifikasi registrasi tidak berhasil dan pedagang harus mengisi ulang form register. e. Activity diagram pedagang terdekat

Gambar 4. 7 Aktivity diagram pedagang terdekat


 Skenario aktivity diagram pedagang terdekat Pembeli menekan button pedagang terdekat, sistem akan menampilkan gambar makanan, nama makanan dan jarak. f. Activity diagram cari pedagang

Gambar 4. 8 Aktivity diagram cari pedagang  Skenario aktivity diagram cari pedagang Pembeli menekan button cari pkl atau cari pedagang. Sistem akan menampilkan menu cari pedagang. Pembeli memasukkan nama makanan yang ingin dicari. Jika berhasil maka akan tampil nama makanan yang dicari sedangkan jika tidak berhasil maka akan ada pesan makanan yang anda cari tidak ada. g. Activity diagram profile

Gambar 4. 9 Aktivity diagram profile


 Skenario aktivity diagram profile Pedagang memilih menu profile maka sistem akan menampilkan profil pedagang.

h. Activity diagram lokasi (lokasi dalam peta)

Gambar 4. 10 Aktivity diagram lokasi (dalam peta)

 Skenario aktivity diagram lokasi (dalam peta). Pembeli menekan button lokasi. Sistem akan menampilkan maps atau peta lokasi pedagang. Jika pembeli ingin melihat detail lokasi pedagang didalam peta maka pembeli harus menekan salah satu lokasi dan sistem akan menampilkan detail dari lokasi pedagang yang dipilih. i. Activity diagram tambah


 Skenario aktivity diagram tambah Pedagang memilih button tambah. Sistem akan menampilkan form login. Pedagang mengisi username dan password, jika berhasil maka sistem akan menampilkan form tambah pedagang makanan. Pedagang mengisi form tambah pedagang makanan kaki lima. Setelah semua form terisi makan pedagang harus menekan button tambah. Sistem akan melakukan otentifikasi. Jika pedagang makanan berhasil ditambahkan maka akan ada pesan berhasil ditambahkan sedangkan jika tidak berhasil ditambahkan maka akan ada pesan pedagang makanan tidak berhasil ditambahkan. 4.3.3 Seguence Diagram Sequence diagram menjelaskan interaksi objek yang dibuat dalam suatu urutan waktu. Diagram sequenca memperlihatkan tahap demi tahap


apa yang akan terjadi untuk menghasilkan sesuatu daidalam use case. Berikut ini gambar Sequence diagram aplikasi pencarian makanan kaki lima.

Gambar 4. 11 Sequence diagram pedagang

Gambar 4. 12 Sequence diagram pembeli


Gambar 4. 13 Sequence diagram admin

4.3.4 Class Diagram Class diagram menggambarkan struktur dan deskripsi class, package dan objek beserta hubungan satu sama lain seperti containment, pewarisan, asosiasi, dan lain-lain. Berikut ini gambar Class diagram aplikasi pencarian makanan kaki lima.

Gambar 4. 14 Class diagram


4.4. Perancangan interface Dalam pembangunannya, aplikasi ini akan menggunakan bahasa pemrograman java dan PHP serta menggunakan media koding android studio dan notepad. 1. Interface halaman admin

Gambar 4. 15Perancangan interface admin Halaman admin merupakan halaman yang dapat diakses oleh admin saja. Pada halaman ini terdapat detail dari jumlah pedagang, jumlah view dan cari pedagang dengan cara mengetikkan nama makanan yang ingin dicari. Di halaman ini juga terdapat form untuk input data pedagang makanan. Seorang admin harus mengisi field yang tersedia ( nama makanan, nama pedagang, alamat, garis lintang, garis bujur serta memilih gambar. Proses akhir dari penambahan pedagang ini adalah admin harus menekan button tambah untuk menyimpan data pedagang kedalam database. Admin juga bisa mengedit pedagang, mengupdate pedagang serta menghapus pedagang dari database.


2. Interface halaman side

Gambar 4. 16 Interface menu side

Halaman menu utama samping merupakan halaman untuk pedagang dapat menambahkan makanan, melihat profile dan keluar dari aplikasi. Jika pedagang ingin menambahkan makanan maka diharuskan untuk login terlebih dahulu sebelum bisa mengisi form tambah makanan. Sedangkan jika ingin melihat profile maka pedagang diharuskan untuk menekan button profile terlebh dahulu dan jika sudah login maka pedagang bisa langsung melihat menu profile dan jika belum maka untuk dapat melihat profile pedagang diharuskan untuk login terlebih dahulu 3. Interface halaman menu utama


Gambar 4. 17 interface halaman utama

Halaman utama merupakan halaman yang dapat diakses semua user. Di halaman ini terdapat informasi button menu apa saja yang tersedia seperti tentang, view map,cari pkl dan makanan terdekat. jika user ingin melihat tentang, view map, cari pkl dan makanan terdekat maka user harus menekan button ketika akan menuju halaman yang akan dituju. 4. Interface tentang

Gambar 4. 18 interface tentang. Halaman tentang merupakan halaman yang dapat diakses semua user. Di halaman ini terdapat 2 button yaitu syarat dan versi. Untuk menuju halaman syarat user harus menekan button syarat untuk dapat melihat syarat dan ketentuan penggunaan aplikasi sedangkan untuk dapat melihat versi dari aplikasi, user diharuskan menekan button versi, maka akan


muncul message box versi dari aplikasi. Sedangkan jika ingin kembali ke menu sebelumnya, user tinggal menekan button ok. 5. Interface syarat dan ketentuan

1. 2. 3. 4.

..................... .................... .................... ....................

Gambar 4. 19 interface syarat dan ketentuan

Halaman tentang merupakan halaman yang yang berisi informasi apa saja mengenai aplikasi seperti syarat dan ketentuan serta versi aplikasi. Untuk menuju ke halaman syarat dan ketentuan, user harus menekan button tentang pada menu utama. Setelan berhasil, user dapat melihat halaman selanjutnya yang terdapat 2 button syarat dan ketentuan serta versi. Setelah itu tekan button syarat dan ketentuan pada menu tentang. Setelah berhasil, user dapat melihat syarat dan ketentuan apa saja yang ada dalam aplikasi. Sedangkan untuk menuju halaman versi, user harus menekan button tentang pada menu utama. Setelah berhasil, user dapat melihat halaman tentang yang terdapat 2 button syarat dan ketentuan serta versi. Setelah itu tekan button versi pada menu tentang. Setelah berhasil, user dapat melihat versi dari aplikasi


6. Interface tambah makanan

Gambar 4. 20 Interface tambah makanan Halaman tambah makanan merupakan halaman yang berisi untuk menambah daftar makananUntuk menuju halaman tersebut, user harus menekan button tambah pada menu home. Setelah berhasil, user akan melihat form tambah makanan yang harus diisi oleh penjual.

7. Interface login

Gambar 4. 21 Interface login Halaman login digunakan untuk mengakses detail user. Halaman login terdapat 2 edit text yang digunakan untuk mengisi username dan password, terdapat pula 1 button login yang digunakan untuk mengakses detail user. Serta 1 text view yang digunakan untuk


menuju halaman registrasi. Jika ingin melihat detail user diharuskan untuk mengisi username dan password serta menekan button login. Jika berhasil, maka detail user akan terlihat. Sedangkan jika belum mempunyai akun, makan diharuskan untuk registrasi terlebih dahulu.

8. Interface register

Gambar 4. 22 Interface register Halaman register digunakan untuk mengisi detail pengguna. Di halaman ini terdapat 4 edit text yang berisi nama, username, password, dan email. Satu button yang register serta satu buah text view.Apabila user ingin melakukan registrasi maka diharuskan untuk mengisi form registrasi yang tersedia seperti nama, username, password dan email. Setelah semua form terisi, maka diharuskan menekan button register. Jika berhasil, akan terdapat pesan register sukses. Apabila sudah berhasil melakukan registrasi dan ingin melihat detail user maka diharuskan untuk menekan text view sudah register, Silahkan login disini.


9. Interface detail user

Gambar 4. 23 Interface detail user. Halaman detail user digunakan untuk menampilkan informasi pengguna. Di halaman ini terdapat 3 text view yang digunakan untuk mengambil informasi nama, username dan email dari database serta terdapat button kembali yang digunakan untuk kembali ke menu utama. 10. Interface lokasi pkl

Gambar 4. 24 Interface lokasi pkl


Halaman ini digunakan untuk menampilkan keberadaan pedagang kaki lima. Pada halaman ini jika user menekan lokasi pedagang yang muncul maka akan ditampilkan nama pedagang, nama makanan beserta lokasinya.

11. Interface cari pedagang makanan

Gambar 4. 25 Interface Cari pkl

Halaman ini digunakan untuk melakukan pencarian pedagang. User bisa memilih untuk menekan button ( Gorengan, Mie ayam, Nasi goreng, Pecel lele, Bakso atau Ayam bakar). Setelah button dipilih maka akan tampil daftar nama ayam bakar serta terdapat tombol pencarian dengan cara mengisi tombol pencarian dengan menu apa yang akan dicari.


12. Interface makanan terdekat

Gambar 4. 26 interface makanan terdekat

Halaman ini digunakan untuk melihat daftar makana terdekat. User bisa menekan button makanan terdekat. Setelah button dipilih maka akan tampil daftar nama makanan, gambar dan jarak

13. Interface detail pedagang

Gambar 4. 27 interface detail pedagang


Halaman ini digunakan untuk melihat detail pedagang. User bisa memilih button pedagang terdekat. Jika berhasil maka akan tampil nama makanan yang dicari dan tinggal tekan pada makanan yang sudah tampil. Jika berhasil maka detail pedagang akan ditemukan.


BAB 4 PERANCANGAN Perancangan Algoritma Algoritma shortest path (Haversine formula)

Recommend Documents