26
Perancangan Aplikasi Pencarian Bengkel dengan Menggunakan Framework Laravel dan Google Maps API Berbasis Algoritma Euclidean Distance Artikel Ilmiah Peneliti: Granika Nur Andini (672015015) Yeremia Alfa Susetyo, M.Cs. Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Salatiga Januari 2019

Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

  • Upload
    others

  • View
    9

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

Perancangan Aplikasi Pencarian Bengkel dengan

Menggunakan Framework Laravel dan Google Maps API

Berbasis Algoritma Euclidean Distance

Artikel Ilmiah

Peneliti:

Granika Nur Andini (672015015)

Yeremia Alfa Susetyo, M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Januari 2019

Page 2: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

Perancangan Aplikasi Pencarian Bengkel dengan

Menggunakan Framework Laravel dan Google Maps API

Berbasis Algoritma Euclidean Distance

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi

Untuk memperoleh Gelar Sarjana Komputer

Peneliti:

Granika Nur Andini (672015015)

Yeremia Alfa Susetyo, M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Januari 2019

Page 3: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user
Page 4: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user
Page 5: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user
Page 6: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user
Page 7: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user
Page 8: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

Pernyataan

Artikel Ilmiah berikut ini :

Judul : Perancangan Aplikasi Pencarian Bengkel dengan

Menggunakan Framework Laravel dan Google Maps API

Berbasis Algoritma Euclidean Distance

Pembimbing : Yeremia Alfa Susetyo, M.Cs.

adalah benar hasil karya saya :

Nama : Granika Nur Andini

NIM : 672015015

Saya menyatakan tidak mengambil sebagian atau seluruhnya dari hasil karya orang

lain kecuali sebagaimana yang tertulis pada daftar pustaka.

Pernyataan ini dibuat dengan sebenar-benarnya sesuai dengan ketentuan yang berlaku

dalam penulisan karya ilmiah.

Salatiga, 2 Desember 2018

Granika Nur Andini

Page 9: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

1

Perancangan Aplikasi Pencarian Bengkel dengan

Menggunakan Framework Laravel dan Google Maps API

Berbasis Algoritma Euclidean Distance

Granika Nur Andini 1, Yeremia Alfa Susetyo

2

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50771, Indonesia

Email : [email protected], [email protected]

2

Abstract

Motorbikes and cars are the means of transportation which are mostly used by the

people of Indonesia. It isn’t impossible that motorist has problems regarding his vehicle while on the trip, so information about the existence of the nearest machine shop is very

necessary. By using Google Maps API technology and Laravel's framework, this research

was carried out to design a nearby information search machine shop system in Salatiga. The

distance of each workshop is calculated using the Euclidean Distance algorithm. The Euclidean Distance algorithm works by calculating two points based on Phytagoras theorem.

This research produces an information system that is able to detect the presence of the

nearest workshop and display the route from the location of the user to the location of the machine shop.

Keywords : Machine Shop, Laravel, Google Maps API, Euclidean Distance

Abstrak

Sepeda motor dan mobil merupakan sarana transportasi yang mayoritas digunakan oleh masyarakat Indonesia. Tidak menutup kemungkinan bahwa pengendara kendaraan

bermotor mengalami masalah mengenai kendaraannya ketika sedang berada di perjalanan,

sehingga informasi mengenai keberadaan bengkel terdekat sangat diperlukan. Dengan menggunakan teknologi Google Maps API dan kerangka kerja Laravel, penelitian ini

dilaksanakan untuk merancang sebuat sistem informasi pencarian bengkel terdekat di kota

Salatiga. Jarak setiap bengkel dihitung menggunakan Algoritma Euclidean Distance.

Algoritma Euclidean Distance bekerja dengan melakukan perhitungan dua buah titik berdasarkan pada teorema Phytagoras. Penelitian ini menghasilkan suatu sistem informasi

yang mampu mendeteksi keberadaan bengkel terdekat serta menampilkan rute dari

keberadaan lokasi pengguna menuju ke lokasi bengkel berada.

Kata Kunci : Bengkel, Laravel, Google Maps API, Euclidean Distance

1 Mahasiswa Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Kristen

Satya Wacana Salatiga. 2 Staff Pengajar Fakultas Teknologi Infomasi Universitas Kristen Satya Wacana Salatiga.

Page 10: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

1

1. Pendahuluan

Kendaraan bermotor jenis sepeda motor dan mobil mengalami

pertumbuhan yang sangat pesat. Berdasarkan data yang peneliti peroleh dari

Badan Pusat Statistik tahun 2016 mengenai Perkembangan Jumlah Kendaraan

Bermotor Menurut Jenis, jumlah sepeda motor di Indonesia mencapai angka

105.150.082 unit, sedangkan untuk jumlah mobil mencapai 14.580.666 unit

dan terus berkembang hingga saat ini [1].

Tabel 1. Jumlah Kendaraan Bermotor Jenis Sepeda Motor dari Tahun 2013 s.d. 2016

Jumlah Kendaraan Bermotor (unit)

Jenis Kendaraan 2013 2014 2015 2016

Motor 84.732.652 92.976.240 98.881.267 105.150.082

Mobil 11.484.514 12.599.038 13.480.973 14.580.666

Penggunaan sepeda motor dan mobil sebagai sarana transportasi

memiliki beberapa resiko, salah satu diantaranya yang sering terjadi adalah

kebocoran ban. Pada umumnya ketika terjadi kebocoran ban, pengendara

mendorong motornya untuk mencari lokasi tambal ban terdekat dan bertanya

kepada masyarakat sekitar jika memungkinkan. Hal ini tentu mempersulit

pengendara terutama bagi mereka yang tidak mengetahui lokasi tambal ban

terdekat, apalagi dengan kondisi harus berangkat kerja atau pergi ke kampus

secepatnya [2]. Oleh karena itu, bagi pengendara sepeda motor akan sangat

memerlukan alat yang dapat digunakan dalam keadaan darurat mencari

bengkel terdekat dan memutuskan untuk memanggil montir atau tetap berjalan

menuju bengkel terdekat.

Dalam penelitian ini, dirancang suatu sistem untuk mencari bengkel

terdekat. Data yang dibutuhkan dalam penelitian ini meliputi titik koordinat

bengkel serta alamat bengkel. Dengan mengunakan sampel bengkel yang ada

di kota Salatiga, dapat diperoleh data bengkel sebanyak 21 bengkel mobil dan

motor. Data bengkel yang diperoleh berada pada titik koordinat (-7.295339,

110.476288) hingga titik koordinat (-7.34738, 110.50997).

Selain menentukan lokasi bengkel, mencari bengkel terdekat juga

menjadi suatu permasalahan baru. Untuk melakukan pencarian terhadap

bengkel terdekat. Aplikasi yang dikembangkan menggunakan framework

Laravel versi 5.6. Tujuan menggunakan framework Laravel yaitu

memudahkan pembangunan aplikasi berbasis PHP, serta proses registrasi dan

autentikasi menjadi lebih mudah. Selain itu, Laravel juga memiliki system

templating blade yang memudahkan para pengembangnya untuk membuat

layout aplikasi.

Page 11: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

2

Penggunaan Algoritma Euclidean Distance juga diterapkan pada

perhitungan jarak antar dua titik koordinat. Algoritma Euclidean Distance

bekerja dengan melakukan perhitungan dua buah titik berdasarkan pada

teorema Phytagoras [3]. Data yang peneliti peroleh berupa titik koordinat

awal dan titik koordinat tujuan dapat diolah menggunakan Algoritma

Euclidean Distance dan menghasilkan jarak dengan satuan kilometer (km).

Berdasarkan data yang peneliti peroleh, Algoritma Euclidean Distance adalah

Algoritma yang paling sesuai dan praktis dalam penggunaannya.

Data yang dihasilkan berupa daftar nama bengkel, alamat bengkel,

nomor telepon bengkel, serta rute menuju bengkel tujuan terpilih berdasarkan

jarak tempuh udara terdekat. Aplikasi ini menampilkan perbandingan jarak

antara satu bengkel dengan bengkel yang lain dengan begitu, pengguna akan

dengan mudah menemukan bengkel terdekat.

2. Kajian Pustaka

Penelitian yang berhubungan dengan pencarian lokasi terdekat sudah

dilakukan oleh beberapa peneliti. Penelitian yang berjudul Sistem Informasi

Posisi Kereta Api Menggunakan GPS. Kecelakaan kereta api sangat

merugikan bagi perusahaan pengelola kereta api, masyarakat dan negara. Hal

ini menjadi landasan penelitian ini dilaksanakan. Penelitian ini memanfaatkan

teknologi GPS dan SMS Gateway. GPS berfungsi untuk mendapatkan lokasi

kereta api sedangkan teknologi SMS Gateway digunakan sebagai media

pengiriman informasi letak dari kereta api. Dengan adanya informasi posisi

kereta api maka kecelakaan antar kereta api dapat berkurang [4].

Pada penelitian yang berjudul Perancangan Aplikasi Pencarian

Layanan Kesehatan Berbasis HTML 5 Geolocation. Sulitnya mencari layanan

kesehatan yang tersedia di suatu daerah merupakan permasalahan yang

melatarbelakangi penelitian ini. Penelitian ini melakukan perbandingan

terhadap metode Haversine dan Euclidean distance untuk melakukan

pengukuran jarak antara dua titik koordinat. Dalam penelitian ini juga

menggunakan teknologi Geolocation untuk mendapatkan titik koordinat awal

dan menyajikan data rute berupa peta penunjuk jalan [3].

Page 12: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

3

Dengan adanya perbedaan penelitian yang telah dilakukan

sebelumnya, peneliti melakukan suatu penelitian yang baru dengan merancang

suatu aplikasi berbasis web yang memudahkan pengendara kendaraan

bermotor yang memiliki masalah kerusakan kendaraan yang sedang

digunakan untuk menemukan bengkel terdekat di kota Salatiga. Dengan

adanya aplikasi ini diharapkan dapat membantu permasalahan yang sering

dihadapi oleh pengguna kendaraan bermotor khususnya pengguna sepeda

motor dan mobil di kota Salatiga. Untuk menggunakan aplikasi ini, pengguna

tidak perlu melakukan instalasi pada perangkat yang digunakan.

Penelitian ini menggunakan Framework PHP Laravel dan

menggunakan teknologi Google Maps API untuk membantu mencari posisi

pengguna dan menemukan rute ke bengkel tujuan. Manfaat yang diperoleh

dari aplikasi tersebut adalah pengguna dapat menemukan bengkel yang sesuai

dan pengguna tidak perlu melakukan instalasi pada perangkat yang dipakai

sehingga tidak membutuhkan kapasitas pada perangkat pengguna.

Konsep Model, View, dan Controller (MVC)

Model-View-Controller (MVC) adalah sebuah konsep yang

diperkenalkan oleh penemu Smalltalk (Trygve Reenskaug) untuk

mengenkapsulasi data bersama dengan pemrosesan (model), mengisolasi dari

proses manipulasi (controller) dan tampilan (view) untuk direpresentasikan

pada sebuah user interface Definisi teknis dari arsitektur MVC dibagi menjadi

tiga lapisan [5].

Gambar 1 menunjukkan struktur dari konsep MVC. Model merupakan

struktur data. Secara spesifik class model akan mengandung fungsi kode yang

akan membantu dalam segala proses yang berhubungan dengan database

seperti memasukkan, mengedit mendapatkan dan menghapus data dalam

sebuah database. View merupakan informasi yang disampaikan ke pengguna.

Sebuah view biasanya berupa halaman web, sebuah view juga bisa berupa

sebuah fragmen halaman seperti header dan footer. View juga bisa berupa

halaman RSS atau jenis halaman web yang lain. Controller merupakan sebuah

perantara antara Model, View dan semua sumber yang dibutuhkan untuk

memproses permintaan HTTP dalam membuat halaman web [6].

Page 13: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

4

Gambar 1 Ilustrasi MVC

Laravel Laravel adalah sebuah framework web berbasis PHP yang open-source

dan tidak berbayar, diciptakan oleh Taylor Otwell dan diperuntukkan untuk

pengembangan aplikasi web yang menggunakan pola MVC. Struktrur pola

MVC pada laravel sedikit berbeda pada struktur pola MVC pada umumnya.

Di laravel terdapat routing yang menjembatani antara request dari user dan

controller. Jadi controller tidak langsung menerima request tersebut [7].

Di Laravel ada banyak fungsi yang digunakan untuk berinteraksi

dengan database seperti mengambil semua baris, mengambil baris dengan

kata kunci utama, menggunakan klausul untuk menyaring baris, melakukan

sisipan, melakukan update, dan lain-lain. Sehingga kebutuhan dalam

membangun suatu sistem berbasis web dapat dilakukan dengan mudah. Awal

maret 2015, Laravel telah menjadi salah satu kerangka kerja PHP paling

populer, bersama-sama dengan Symfony2, Nette, CodeIgniter dan Yii2 [8].

Euclidean Distance

Euclidean distance adalah perhitungan jarak dari 2 buah titik dalam

Euclidean space. Euclidean space diperkenalkan oleh Euclid, seorang

matematikawan dari Yunani sekitar tahun 300 B.C.E. untuk mempelajari

hubungan antara sudut dan jarak. Euclidean ini berkaitan dengan Teorema

Phytagoras dan biasanya diterapkan pada 1, 2 dan 3 dimensi. Tapi juga

sederhana jika diterapkan pada dimensi yang lebih tinggi [9].

Page 14: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

5

Persamaan (1) merupakan persamaan untuk menghitung Euclidean

√ (1)

dimana:

d : jarak

x1 : latitude titik awal

x2 : latitude titik tujuan

y1 : longitude titik awal

y2 : longitude titik tujuan

Hasil perhitungan jarak menggunakan persamaan 1 masih dalam

satuan decimal degree, sehingga untuk menyesuaikannya perlu dikalikan

dengan 111,319 km (1 derajat bumi = 69 mil ~= 111, 319 km) [10].

3. Metode Penelitian

Metode suatu penelitian biasanya berisikan tentang urutan-urutan

suatu proses perencanaan sampai dengan pengimplementasian perangkat

lunak. Penelitian ini mengimplementasikan rancangan yang sudah dibuat

menjadi sebuah sistem informasi. Penulis melakukan metode untuk

pengembangan sistem. Berikut bagan urutan perencanaan pembangunan

aplikasi pencarian bengkel.

Page 15: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

6

Gambar 2. Metode Penelitian

Setiap tahapan penelitian dapat dilihat pada Gambar 2. Berikut ini

adalah penjelasan dari setiap tahapan:

Pada tahap identifikasi masalah peneliti melakukan analisis mengenai

permasalahan kerusakan transportasi yang dialami oleh pemilik maupun

pengendara kendaraan bermotor. Serta bagaimana cara untuk mengatasi

permasalahan yang ada. Pada tahapan pengumpulan data, peneliti

mengumpulkan data primer dari bengkel-bengkel di kota Salatiga. Data

primer bengkel diperoleh dengan cara pendistribusian formulir yang harus

diisi oleh pemilik atau karyawan bengkel. Peneliti telah memperoleh data

bengkel dengan jenis kendaraan motor sebanyak sembilan bengkel dari titik

koordinat (-7.302558,110.486358) sampai dengan titik koordinat (-7.344417,

110.50997). Sedangkan data bengkel dengan jenis kendaraan mobil, peneliti

telah memperoleh sebanyak sebelas bengkel dari titik koordinat (-7.295339,

110.476288) sampai dengan titik koordinat (-7.34738, 110.500147).

Page 16: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

7

Pada tahap desain dan perancangan sistem, peneliti melakukan

perancangan menggunakan diagram UML (Unified Modelling Language)

yang terdiri atas Use Case Diagram, Activity Diagram, serta Class Diagram.

Selain menggunakan UML, peneliti juga merancangkan desain database yang

akan digunakan untuk menyimpan data-data yang digunakan pada sistem serta

menentukan relasi antar tabel yang ada.

Use Case Diagram berfungsi untuk mendeskripsikan fungsi yang

dijalankan dalam sistem secara umum dilihat dari sudut pandang pengguna

serta menjelaskan siapa saja aktor yang berperan dalam sistem.

Gambar 3. Use Case Diagram

Pada Gambar 3 merupakan gambar Use Case Diagram. Diagram

tersebut menjelaskan bahwa terdapat dua jenis aktor yang berperan dalam

sistem yaitu admin dan user.

Page 17: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

8

Gambar 4. Activity Diagram

Gambar 4 menunjukkan activity diagram. Activitty diagram

mendeskripsikan tentang user mampu melakukan pencarian bengkel. Saat

pertama kali membuka halaman aplikasi, sistem akan dengan otomatis

mendeteksi lokasi user. Jika lokasi tidak ditemukan maka akan kembali ke

langkah awal. Jika lokasi ditemukan maka akan muncul daftar bengkel.

Kemudian user dapat memanfaatkan fitur filter untuk memperoleh radius dan

ketersediaan bengkel. Kemudian untuk menampilkan rute dari lokasi user,

user dapat memilih secara langsung bengkel pilihan.

Page 18: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

9

Gambar 5. Class Diagram

Class diagram ditunjukkan pada Gambar 5. Diagram ini menunjukkan

struktur obyek, class package, dan relasi setiap obyek yang ada. Pada aplikasi

yang menerapkan MVC maka pada class diagram juga harus terbagi menjadi

tiga bagian, yaitu View, Controller, dan Model. Pada tahap implementasi,

peneliti melakukan kegiatan penulisan kode program sesuai dengan

perancangan yang sudah peneliti susun. Dalam penulisannya, dilakukan

berdasarkan kerangka kerja Laravel. Pada tahap pengujian dan analisis,

peneliti melakukan pengujian atas aplikasi yang telah dibangun dan

melakukan analisis dengan cara pembandingan hasil perhitungan jarak

aplikasi dengan hasil perhitungan jarak pada Google Maps.

Page 19: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

10

4. Hasil dan Pembahasan

Terdapat dua aktor yang berperan dalam aplikasi pencarian bengkel,

yaitu admin dan user. Admin dapat melakukan pengelolaan data mengenai

data bengkel dan jadwal operasi setiap bengkel melalui backpack page.

Backpack adalah package untuk membuat panel admin yang dapat

dikostumisasi. Pertama-tama admin perlu melakukan login untuk dapat

melakukan pengolahan data.

Gambar 6. Halaman Login sebagai Admin

Dari data primer yang telah diperoleh, admin dapat melakukan proses

input data bengkel pada halaman data bengkel. Data yang sudah diinputkan ke

dalam sistem seperti yang ditunjukkan pada Gambar 7.

Gambar 7. Halaman Pengelolaan Data oleh Admin

Page 20: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

11

Pada kerangka kerja Laravel, dapat menggunakan konsep Model,

View, dan Controller. Setiap komponen tersebut saling berkaitan dan tidak

dapat dipisahkan. MVC digunakan untuk memisahkan data access dan

business logic dari data presentation dan user interaction.

Di dalam Model Databengkel.php, berisikan deklarasi nama tabel yang

akan dioperasikan dalam aplikasi. Tabel databengkel merupakan tabel utama

di dalam aplikasi. Kemudian terdapat deklarasi nama atribut dari tabel

databengkel yang diidentifikasi dapat diisikan oleh admin, sehingga data

bengkel yang ada dapat diinputkan ke dalam aplikasi.

Kode Program 1. Model untuk penyajian databengkel

1. <?php

2. namespace App\Models;

3. use Illuminate\Database\Eloquent\Model;

4. use Backpack\CRUD\CrudTrait;

5. class Databengkel extends Model

6. {

7. use CrudTrait;

8. protected $table = 'databengkel';

9. protected $fillable = ['nama_bengkel', 'alamat', 'no_telp',

10. 'latitude', 'longitude', 'is_motor', 'is_mobil']; 11. }

Ketika user melakukan permintaan pencarian bengkel, secara otomatis

sistem akan mendeteksi lokasi keberadaan user dengan menggunakan

Geolocation. Kemudian user dapat memilih bengkel yang tersedia maupun

yang tidak. Serta user dapat melihat rute dengan memanfaatkan Google Maps

API.

Gambar 8. Halaman Awal

Page 21: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

12

Kode Program 2 adalah kode program untuk mengaktifkan

Geolocation kemudian mendapatkan titik koordinat user. Pada mulanya,

program akan melakukan pengecekan terhadap navigator geolocation pada

web browser yang digunakan oleh pengguna, apabila web browser yang

digunakan oleh pengguna mendukung layanan geolokasi, maka program akan

menampilkan posisi, serta mengambil data berupa latitude dan longitude dari

posisi dimana pengguna sedang berada. Data ini nanti yang akan digunakan

untuk melakukan proses perhitungan pada tahap selanjutnya.

Kode Program 2. Kode Program untuk Mengaktifkan Geolocation

1. if (navigator.geolocation) {

2. navigator.geolocation.getCurrentPosition(showPosition);

3. } else { alert("Geolocation is not supported by this

4. browser.");}

5. function showPosition(position) {

6. lat = position.coords.latitude;

7. long = position.coords.longitude;

8. akurasi = position.coords.accuracy;}

Kode Program 3 merupakan kode untuk melakukan filter terhadap

bengkel yang tersedia. Disini peneliti juga menggunakan library Mapper yang

akan membantu menampilkan posisi pengguna pada peta berdasarkan data

yang telah diperoleh dari kode program 2. Pada langkah ini, peneliti

mengambil data nama bengkel, alamat, nomor telepon serta jarak yang akan

dihitung menggunakan Algoritma Euclidean Distance.

Kode Program 3. Kode Program Controller Penyaringan Pencarian dengan Jenis

Kendaraan Motor

1. Mapper::map($latitude, $longitude, ['zoom' => 10,

2. 'markers' => ['title' => 'Lokasi Saya', 'animation' =>

3. 'DROP']]);

4. $databengkel = DB::table('databengkel')->select(DB::raw("

5. id, nama_bengkel, alamat, no_telp,

6. SQRT(POW(($latitude - latitude ), 2) +

7. POW(($longitude - longitude), 2)) * 111.319 AS

8. distance"))

9. ->where('is_motor', 1)

10. ->orderBy('distance', 'asc') 11. ->having('distance', "<=", $radius)->get(); 12. return view('result', array('databengkel' => 13. $databengkel, 'kendaraan' => $kendaraan, 'latitude' => 14. $latitude, 'longitude' => $longitude, 'map'));

Kode program 4 berfungsi untuk menampilkan rute dari titik awal

pengguna hingga ke titik dimana bengkel berada.

Page 22: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

13

Kode Program 4. Fungsi untuk Melakukan Routing

1. $origin = json_decode(

2. GoogleMaps::load('geocoding')

3. ->setParamByKey('latlng', $latitude.','.$longitude)

4. ->get()

5. );

6. $destination = json_decode(

7. GoogleMaps::load('placeautocomplete')

8. ->setParam(['input' =>$bengkel->nama_bengkel .

9. 'Salatiga'])

10. ->get() 11. ); 12. Mapper::map($latitude, $longitude, ['eventBeforeLoad' => 13. 'addRoute(map_0);']); 14. $route = GoogleMaps::load('directions') 15. ->setParam([ 16. 'origin' => $origin->results[0]->formatted_address, 17. 'destination' => $destination->predictions[0] 18. >description, 19. 'travelmode' => 'WALKING' 20. ]) 21. ->get(); 22. return view('result2') 23. ->with('origin', $origin->results[0]->formatted_address) 24. ->with('destination', $destination->predictions[0] 25. >description) 26. ->with('route', $route);

Kode Program 4 menunjukkan deklarasi function SearchRoute().

Untuk mendapatkan data bengkel, program melakukan request untuk

mendapatkan id bengkel, latitude, serta longitude. Program berfungsi untuk

mendapatkan data bengkel sesuai dengan id bengkel yang telah didapatkan

melalui proses request. Serta dilakukan penentuan titik awal dan titik tujuan

oleh sistem. Untuk menampilkan peta, peneliti memanfaatkan bantuan class

Mapper untuk menampilkan data hasil routing kedua titik koordinat yang

ditampung dalam variabel route. Hasil dari proses routing ditampilkan pada

view yang ditunjukkan pada Gambar 9.

Page 23: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

14

Gambar 9. Rute Menuju Bengkel Terpilih

Pengujian dilakukan secara langsung di dalam wilayah Perpustakaan

Daerah Kota Salatiga, atau tepatnya di titik (-7.3269512, 110.500523399999)

pada pukul 13.00 WIB. Gambar 9 dan Tabel 2 merupakan hasil pencarian

bengkel yang tersedia.

Gambar 9. Hasil Pencarian Bengkel dalam Tampilan Mobile Browser

dengan Jenis Kendaraan Motor dalam Radius 2 Kilometer

Page 24: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

15

Berikut ini merupakan sampel perhitungan jarak menggunakan metode

Euclidean Distance dari titik koordinat awal (lokasi: Kawasan Perpustakaan

Daerah) sampai ke titik koordinat tujuan.

Lokasi: Sayangan Motor

Lokasi: Yamaha Donny’s Motor

Lokasi: Win Jaya Motor

Lokasi: Qlap Motor

Dengan menggunakan persamaan yang sama, maka dapat

menghasilkan data yang dicantumkan pada Tabel 2.

Tabel 2. Hasil Pencarian Bengkel dengan Jenis Kendaraan Motor dalam

Radius 2 Kilometer dan Perbandingan dengan Perhitungan Google Maps

Nama Bengkel Euclidean Distance

(satuan km)

Google Maps

(satuan km)

Sayangan Motor 0.6822810001085 0.67945

Yamaha Donny’s Motor 0.72098242706632 0.72193

Win Jaya Motor 0.82946424535378 0.82685

Qlap Motor 0.90939124889424 0.90175

Bengkel Motor Merdeka Baru 1.0465026046737 1.11

Ponsa Motor Salatiga 1.3945151358068 1.39

Bengkel Motor Penantian Panjang 1.740030739451 1.74

Page 25: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

16

Dari hasil pengujian yang telah dilakukan, perhitungan Algoritma

Euclidean Distance menunjukkan bahwa Algoritma Euclidean Distance

memiliki sebuah kekurangan. Perhitungan yang dihasilkan kurang akurat

apabila dibandingkan dengan perhitungan menggunakan fitur ukur jarak pada

Google Maps. Namun perhitungan menggunakan algoritma Euclidean

Distance ini sudah mendekati akurat dan dapat dijadikan acuan saat pengguna

melakukan pencarian.

5. Kesimpulan

Berdasarkan pengujian dalam pengukuran jarak terpendek

menggunakan algoritma Euclidean Distance, dapat disimpulkan bahwa jarak

yang dihasilkan kurang akurat jika dibandingkan dengan perhitungan

menggunakan fitur “ukur jarak” pada Google Maps . Namun dilihat dari data

yang dihasilkan, hasil perhitungan sudah mendekati akurat. Dengan

memanfaatkan Class Mapper juga sangat membantu dalam penyajian data

berupa peta untuk memudahkan user dalam melihat posisi dirinya berada dan

posisi dimana bengkel tujuan yang dipilih. Aplikasi yang dirancang

menyajikan informasi data bengkel sesuai dengan penyaringan data yang

ditentukan oleh pengguna.

Penelitian ini dapat dikembangkan lagi dengan menghitung panjang

jalan serta persimpangan jalan. Selain itu dapat mempertimbangkan tinggi

rendahnya daratan dengan melihat kontur daratan.

6. Daftar Pustaka

[1] Badan Pusat Statistik. (2016). Perkembangan Jumlah Kendaraan

Bermotor Menurut Jenis.

https://www.bps.go.id/linkTableDinamis/view/id/1133. Diakses pada

tanggal 17 Juli 2018.

[2] Irawan, S., & Putra, G., H. (2016). Aplikasi Pencarian Tambal Ban

Motor Terdekat Berbasis Android (Studi Kasus Tambal Ban di Kota

Batam). Jurnal Teknomatika. Vol 9, no. 1, hlm 14.

[3] Widodo, B. P., & Purnomo, H., D. (2016). Perancangan dan

Implementasi Aplikasi Pencarian Layanan Kesehatan Menggunakan

HTML 5 Geolocation. Jurnal Sistem Komputer 2016. Vol 6, no. 1,

hlm 47.

[4] Briantoro, H. dkk. (2011). Sistem Informasi Posisi Kereta Api

Menggunakan GPS. http://repo.pens.ac.id/1260/. Diakses tanggal 7

Desember 2018.

[5] Simanjuntak, P. & Kasnady, A. (2016). Analisis Model View

Controller (MVC) pada Bahasa PHP. Jurnal ISD. Vol 2, no. 2, hlm 58.

Page 26: Perancangan Aplikasi Pencarian Bengkel dengan ......mampu melakukan pencarian bengkel. Saat pertama kali membuka halaman aplikasi, sistem akan dengan otomatis mendeteksi lokasi user

17

[6] Prabowo, D. (2015). Website E-Commerce Menggunakan Model View

Controller (MVC) dengan Framework Codeigniter. Jurnal Ilmiah

DASI. Vol 16, no. 1, hlm 24

[7] Yudanto, A., Tolle, H., & Brata, A. (2017). Rancang Bangun Aplikasi

Sistem Informasi Manajemen Laboratorium Biomedik Fakultas

Kedokteran Universitas Brawijaya. Jurnal Pengembangan Teknologi

Informasi Dan Ilmu Komputer, 1(8), 628-634. Diambil dari http://j-

ptiik.ub.ac.id/index.php/j-ptiik/article/view/182

[8] Sahrul, F. dkk. (2016). Implementasi Sistem Informasi Akademik

Berbasis Web Menggunakan Framework Laravel. Jurnal

TRANSFORMASI. Vol 12, no. 1, hlm 46.

[9] Setiawan dkk. (2018). Menghitung Rute Terpendek Menggunakan

Algoritma A* dengan Fungsi Euclidean Distance. Jurnal SENTIKA

2018. Hlm. 72.

[10] Rubin A. Geo (proximity) Search with MySQL 2006.

http://www.arubin.org/files/geo_search.pdf. Diakses tanggal 17 Juli

2018.