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

Transkripsi

1 BAB 4 PERANCANGAN 4.1. Perancangan Algoritma 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= radian Sampel perhitungan haversine formula Lokasi 1: lon1= , lat1= Lokasi 2: lon2= , lat2= lat1 = * radian = radian lon1= * radian = radian lat2 = * radian = radian lon2= * radian= radian x = (lon2-lon1) * cos ((lat1+lat2)/2) = ( ) * cos (( )/2) 16

2 = y = (lat2-lat1) = ( ( )) = d = sqrt (x*x + y*y) * R =sqrt(( * )+( * ))*6371 = (0, , )*6371 =sqrt (0, ) * 6371 = 1, 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 PK 2 Nama_makanan Varchar 30 3 Gambar LongBlob 4 Lat Double 5 Lng Double 17

3 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 Varchar 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 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 Handphone Varchar 12 18

4 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 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 19

5 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 Use case Aktor Precondition PostCondition Description Keterangan Use case diagram admin admin admin mengetik data makanan admin berhasil mengisi form tambah makanan 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 20

6 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

7 Tabel 4. 6 Skenario use case pedagang Nama Use case Aktor Precondition PostCondition Description Keterangan Use case pedagang dan pembeli Pedagang Pedagang mengetik data makanan Pedagang berhasil mengisi form tambah makanan 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 Use case Aktor Precondition PostCondition Keterangan Use case pedagang dan pembeli Pembeli Pembeli mengetik form login dan register serta menekan button tentang, profile, lokasi pedagang,cari pedagang, pedagang terdekat Pembeli berhasil mengisi form login dan register serta berhasil menekan button tentang, profile, 22

8 lokasi terdekat. pedagang, cari pedagang, pedagang 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 Use case Aktor Precondition Postcondition Description Keterangan Login Pembeli atau pedagang Masukkan username dan password Aktor berhasil masuk ke sistem 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

9 Tabel 4. 9 Use case registrasi Nama Usecase Aktor Precondition Postconditiion Deskription Keterangan Registrasi User Pembeli atau pencari makanan dan penjual Masukkan data pengguna 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 Use case logout Nama Use case Aktor Precondition Postcondition Description Keterangan Logout Pembeli atau pencari makanan dan penjual Memilih button logout Aktor berhasil keluar sistem 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

10 Tabel Use case pencarian Nama Aktor Use case Precondition Postcondition Description Keterangan Pembeli atau pencari makanan Pencarian Memasukkan nama makanan Aktor berhasil mendapatkan nama makanan yang dicari 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 Use case detail penjual Nama Use case Aktor Precondition Postcondition Description Keterangan Detail penjual Pembeli atau pencari makanan Pembeli harus memilih button nama makanan Pembeli berhasil melihat detail makanan 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 25

11 (versi dan syarat ketentuan). Skenario use case tentang dapat dilihat pada tabel 4.13 Tabel Skenario Use case detail tentang Nama Use case Aktor Precondition Postcondition Description Keterangan Tentang Pembeli Pembeli harus memilih button cari pkl Pembeli berhasil melihat makanan yang divcari 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 Skenario Use case lokasi (dalam peta) Nama Use case Aktor Precondition Postcondtion Description Keterangan Lokasi Pembeli Pembeli memilih button lokasi Pembeli berhasil melihat lokasi pedagang Pembeli harus menekan button lokasi agar dapat melihat lokasi pedagang didalam peta 26

12 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 Skenario use case lokasi terdekat Nama Use case Aktor Precondtion Postcondition Description Keterangan Lokasi terdekat Pembeli Pembeli harus memilih button lokasi terdekat Pembeli berjasil melihat lokasi makanan berdasarkan lokasi terdekat Pembeli harus memilih button lokasi terdekat agar dapat melihat nama makanan yang terdekat Activity Diagram Activity diagram menjelaskan alur kerja dan urutan dari aktivitas dari suatu proses. 27

13 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 28

14 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. 29

15 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 30

16 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 31

17 Skenario aktivity diagram profile Pedagang memilih menu profile maka sistem akan menampilkan profil pedagang. h. Activity diagram lokasi (lokasi dalam peta) Gambar 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 32

18 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 Seguence Diagram Sequence diagram menjelaskan interaksi objek yang dibuat dalam suatu urutan waktu. Diagram sequenca memperlihatkan tahap demi tahap 33

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

20 Gambar Sequence diagram admin 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 Class diagram 35

21 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. 36

22 2. Interface halaman side Gambar 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 37

23 Gambar 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 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 38

24 muncul message box versi dari aplikasi. Sedangkan jika ingin kembali ke menu sebelumnya, user tinggal menekan button ok. 5. Interface syarat dan ketentuan Gambar 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 39

25 6. Interface tambah makanan Gambar 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 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 40

26 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 Interface register Halaman register digunakan untuk mengisi detail pengguna. Di halaman ini terdapat 4 edit text yang berisi nama, username, password, dan . 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 . 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. 41

27 9. Interface detail user Gambar 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 dari database serta terdapat button kembali yang digunakan untuk kembali ke menu utama. 10. Interface lokasi pkl Gambar Interface lokasi pkl 42

28 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 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. 43

29 12. Interface makanan terdekat Gambar 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 interface detail pedagang 44

30 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. 45