penerapan haversine formula
TRANSCRIPT
6
PENERAPAN HAVERSINE FORMULA
DALAM PERANCANGAN APLIKASI PENCARIAN LOKASI
JASA INTERNET MARKETING
Anggraeni Ridwan
Fakultas Teknologi Informasi, Universitas Gunadarma
JL. Margonda Raya 100 Depok 16424
Penerapan Haversine Formula dalam Perancangan Aplikasi Pencarian Lokasi Jasa
Internet Marketing
Abstrak
Berkembangnya teknologi internet di Indonesia dan ditambah banyaknya pengguna internet yang mengakses dari smartphone menjadikan pemasaran online menjadi populer di Indonesia. Internet marketing dipandang oleh para pebisnis online sebagai alat pemasaran yang sangat efektif dalam menjangkau konsumen yang lebih luas dan hemat biaya daripada pemasaran secara konvensional. Agar sebuah aplikasi internet marketing menjadi lebih efisien maka perlu ada aplikasi yang dapat menampilkan beberapa jasa internet marketing sesuai dengan lokasi terdekat antara pengguna jasa dan penyedia jasa, serta bisa menampilkan biaya yang sesuai dengan kemampuan finansial user. Salah satu metode yang dapat digunakan untuk tujuan tersebut ada metode Haversine. Dengan menggunakan metode Haversine, aplikasi mampu menampilkan lokasi terdekat antara pengguna jasa dengan penyedia jasa. Kata Kunci : Internet Marketing, Haversine Formula, aplikasi web, jasa
PENDAHULUAN
Asosiasi Penyelenggara Jaringan Internet Indonesia (APJII) sepanjang
tahun 2016 menemukan bahwa 132,7 juta orang Indonesia telah terhubung ke
internet. Banyaknya pengguna internet ini memberikan peluang bagi penyedia
jasa khususnya dibidang internet marketing untuk membantu para pemilik usaha
yang bisnisnya belum dipasarkan melalui internet. Pemasaran melalui internet
memiliki jangkauan yang lebih luas dibanding pemasaran konvensional. Aplikasi
layanan internet marketing yang sudah ada dirasa masih memiliki kekurangan,
7
seperti fiverr. Fiverr merupakan sebuah aplikasi freelance dibidang internet
marketing. Pada aplikasi tersebut tidak menampilkan lokasi terdekat antara
pengguna jasa dengan pemilik jasa, selain itu juga pada kategori jasa SEO di
kolom review pengguna yang sudah menggunakan jasanya tidak diberikan kolom
untuk mengupload gambar sehingga tidak dapat menampilkan hasilnya hanya
berupa rating. Aplikasi lain yang sejenis yaitu Freelancer juga memiliki
kekurangan yang sama ditambah pengguna diharuskan daftar terlebih dahulu
sebelum menggunakan aplikasi tersebut. Agar lebih efisien maka perlu ada
aplikasi yang dapat menampilkan beberapa jasa internet marketing sesuai dengan
lokasi terdekat antara pengguna jasa dan penyedia jasa, serta bisa menampilkan
biaya yang sesuai dengan kemampuan finansial user. Salah satu metode yang
dapat digunakan untuk tujuan tersebut ada metode Haversine.
PEMBAHASAN
Internet Marketing
Internet marketing adalah bentuk usaha dari sebuah perusahaan dalam
memasarkan produknya maupun jasanya dan juga membangun hubungan yang
lebih dekat dengan customer melalui media internet.
Bentuk pemasaran internet ini memiliki cakupan yang sangat luas yang
merupakan situs publik dalam jaringan komputer yang sangat besar dari seluruh
negara di dunia. Masing-masing jaringan komputer memiliki tipe yang berbeda
serta dari berbagai belahan negara di dunia menyatu ke dalam satu wadah
informasi yang sangat besar sekali (INTERNET).
Internet marketing ini merupakan aplikasi dan penerapan dari teknologi
internet dan teknologi-teknologi digital yang terkait dengan tujuan-tujuan
peningkatan pemasaran. Teknologi-teknologi tersebut seperti provider internet,
media internet, kabel-kabel jaringan internet, satelit, hardware, software, yang
semuanya sangat menunjang percepatan internet marketing. (Chaffey et al, 2000)
Pengertian Internet Marketing menurut Mohammed, Fisher, &Jaworski,
2003, pp. 4-5 Internet Marketing adalah proses membangun serta menjaga
hubungan baik dengan pelanggan melalui aktivitas interaksi secara online guna
8
memfasilitasi dan menjembatani pertukaran informasi, ide-ide, produk maupun
layanan yang dapat meningkatkan kepuasan pelanggan maupun penyedia produk
dan jasa (memuaskan tujuan dari kedua belah pihak).
Keuntungan utama dari internet marketing adalah mampu mengurangi dan
menekan pengeluaran biaya sertia memperluas jangkauan pelanggan. Biaya
melaui internet-marketing umumnya lebih murah/rendah dari pada platform
pemasaran lainnya seperti face-to-face atau perantara penjual / distributor. Selain
itu, internet marketing memperbesar peluang perusahaan untuk menjangkau
pelanggan yang tidak dapat ditemui karena keterbatasan waktu dan lokasional dari
saluran distribusi yang ada.
Google Maps
Google Maps adalah pemetaan layanan web aplikasi dan teknologi yang
disediakan oleh Google, gratis (untuk penggunaan non-komersial). Kekuatan
layanan berbasis peta sudah banyak diantaranya situs Google Maps, Google Ride
Finder dan peta yang tertanam pada situs web. Pada sistem yang berbasis web
peta digital yang dapat digunakan adalah Google Map. Google map dapat diakses
dengan browser di perangkat komputer maupun mobile. Google Map memiliki
fitur Geolocation yang dapat digunakan untuk mengetahui lokasi yang ditandai
berdasarkan lattitude dan longitude (Ryan Herwan Dwi Putra, Herry Sujiani,
Novi, 2016).
Latitude dan Longitude
Latitude atau garis lintang adalah garis yang melintang di antara kutub utara
dan kutub selatan, yang menghubungkan antara sisi timur dan barat bagian bumi.
Garis ini memiliki posisi membentangi bumi, sama halnya seperti garis equator
(khatulistiwa).
Longitude atau garis bujur adalah garis membujur yang menghubungkan
antara sisi utara dan sisi selatan bumi (kutub). Kombinasi antara garis lintang dan
garis bujur akan membentuk suatu koordinat lokasi di permukaan bumi dengan
sumbu x sebagai garis lintang dan sumbu y sebagai garis bujur dalam koordinat
kartesius.
9
Metode Haversine
Sebuah metode untuk mengetahui jarak antar dua titik dengan
memperhitungkan bahwa bumi bukanlah sebuah bidang datar namun adalah
sebuah bidang yang memilki derajat kelengkungan merupakan metode Haversine
Formula. Metode Haversine Formula menghitung jarak antara 2 titik dengan
berdasarkan panjang garis lurus antara 2 titik pada garis bujur dan lintang. Bebera
Rumus Haversine adalah persamaan yang penting pada navigasi,
memberikan jarak lingkaran besar antara dua titik pada permukaan bola (Bumi)
berdasarkan bujur dan lintang. Penggunaan rumus ini mengasumsikan
pengabaiaan efek elipsoidal, cukup akurat untuk sebagian besar perhitungan, juga
pengabaian ketinggian bukit dan kedalaman lembah di permukaan bumi.
Rumus Haversine:
Keterangan:
φ adalah latitude, λ adalah longitude, R is radius bumi (radius = 6,371 km)
Pengenalan Unified Modelling Language (UML)
Unified Modeling Language (UML) adalah sebuah bahasa pemodelan untuk
menspesifikasikan, memvisualisasikan, membangun dan mendokumentasi objek-
objek dari sistem software untuk urusan pemodelan dan sistem non-
software.UML merupakan sistem arsitektur yang bekerja dalam Object Oriented
Analisis and Desain (OOAD).
Sebuah sistem dalam UML digambarkan sebagai kumpulan objek diskrit
yang saling berinteraksi untuk mencapai suatu tujuan yang berguna bagi
pengguna. Dalam struktur yang statis, UML mendefinisikan objek-objek penting
yang terdapat dalam system dan implementasinya, dan menggambarkan interaksi
antara objek-objek tersebut. Sedangkan dalam kelakuan yang dinamis, UML
10
mendefinisikan sejarah suatu objek dan dan komunikasi antar objek tersebut untuk
mencapai suatu tujuan.
Tujuan UML
Tujuan UML diantaranya untuk :
• Memberikan model yang siap dipakai, bahasa pemodelan visual yang
ekspresif untuk mengembangkan dan saling menukar model dengan
mudah dan dimengerti secara umum.
• Memberikan bahasa pemodelan yang bebas dari berbagai bahasa
pemrograman dan proses rekayasa.
• Menyatukan praktek-praktek terbaik yang terdapat dalam pemodelan.
Use Case Diagram
Sebelum memahami use-case, terlebih dahulu perlu diketahui gambaran
tentang gambaran dari skenario. Skenario adalah langkah yang menggambarkan
interaksi antara user dan sistem.
Use-case merupakan serangkaian skenario-skenario yang terikat bersama-
sama oleh suatu tujuan yang sama dari pengguna. Use-case menggambarkan pola
perilaku software aplikasi, termasuk didalamnya urutan interaksi antara aktor
dengan aplikasi tersebut. Use-case digunakan untuk menunjukkan hubungan atara
aktor yang direpresentasikan dengan symbol orang yang dihubungkan dengan
symbol orang yang dihubungkan dengan garis yang menunjukkan hubungan
komunikasi. Setiap use-case harus diberi nama yang menyatakan apa hal yang
dicapai dari hasil interaksinya dengan aktor. Nama use-case boleh terdiri dari
beberapa kata dan tidak boleh ada use-case yang memiliki nama yang sama.
Activity Diagram
Activity diagram memodekan alur kerja sebuah proses bisnis dan urutan
aktivitas dalam suatu proses. Diagram ini sangat mirip dengan sebuah flowchart
karena kita dapat memodelkan sebuah alur kerja dari suatu aktivitas lainny atau
dari satu aktivitas ke dalam keadaan sesaat (state).
Analisis Kebutuhan
11
Analisis sistem dilakukan untuk mengidentifikasi dan mengevaluasi
permasalahan, kesempatan, serta hambatan yang akan terjadi bila aplikasi dibuat
agar dapat diperbaiki jika suatu saat bertemu dengan suatu permasalahan. Pada
tahap ini dilakukan pengumpulan kebutuhan yang diperlukan dalam proses
pembuatan aplikasi terbagi menjadi lima yaitu kebutuhan pengguna, penyedia
jasa, admin perangkat keras dan perangkat lunak.
Analisis Kebutuhan Pengguna
Kebutuhan pengguna ini berupa :
1. Informasi mengenai penyedia jasa yang berada di sekitar pengguna.
2. Biaya yang harus dibayar.
Analisis Kebutuhan Penyedia Jasa
Kebutuhan penyedia jasa pada sistem ini berupa :
1. Mengkonfirmasi pesanan yang masuk.
2. Mengedit profile, detail jasa dan lokasi.
3. Biaya.
Analisis Kebutuhan Admin
Kebutuhan admin pada sistem ini berupa :
1. Mendata seluruh pengguna jasa dan penyedia jasa.
2. Melakukan kontrol penuh terhadap aplikasi secara keseluruhan.
Analisis Kebutuhan Perangkat Keras
Perangkat keras yang digunakan sebagai wadah untuk bagi berbagai
perangkat lunak yang dibutuhkan untuk membuat aplikasi. Selain itu, perangkat
keras juga digunakan untuk menguji coba sistem. Tabel mengenai spesifikasi
minimal dari perangkat keras yang digunakan dalam membuat aplikasi ini dapat
dilihat pada tabel 3.1.
12
Tabel 1. Kebutuhan Perangkat Keras
Perangkat Keras Keterangan
Laptop ASUS A456U Processor Intel Core i5 CPU @ 2.50-
2.60 GHz
Kapasitas RAM 8.00 GB
Harddisk 1 TB
NVIDIA GEFORCE 940MX
Tabel 1 menjelaskan tentang kebutuhan perangkat aplikasi yang
dibutuhkan adalah Laptop ASUS A456U dengan Processor Intel Core i5 CPU @
2.50-2.60 GHz, kapasitas RAM 8.00 GB, Harddisk sebesar 1 TB dan kartu grafis
NVIDIA GEFORCE 940MX.
Analisis Kebutuhan Perangkat Lunak
Perangkat lunak digunakan untuk membuat sistem mulai dari perancangan,
pengodingan, serta pengujian. Terdapat berbagai jenis perangkat lunak yang
digunakan dalam pembuatan aplikasi seperti sistem operasi, bahasa pemrograman,
web browser, design dan lembar kerja untuk penulisan. Tabel mengenai minimal
spesifikasi perangkat lunak yang digunakan dapat dilihat pada tabel 2.
Tabel 2 Kebutuhan Perangkat Lunak
Perangkat Lunak Keterangan
Sistem Operasi
Bahasa pemrograman yang digunakan
Web Browser
Perancangan
Lembar Kerja Penulisan
Windows 7
CSS, PHP, HTML
Google Chrome
UML
Microsoft Office 2007
Tabel 2 menjelaskan tentang kebutuhan perangkat aplikasi yang
dibutuhkan adalah sistem operasi Windows 7 dan untuk bahasa pemrograman
menggunakan Java, PHP dan HTML. Web browser menggunakan Google
Chrome karena chrome bekerja lebih cepat dibandingkan web browser lainnya.
Untuk perancangan aplikasi menggunakan UML dan untuk lembar kerja
penulisan menggunakan Microsoft Office 2007.
13
Perancangan Aplikasi
Pada tahap perancangan ini akan dimulai dengan membahas mengenai
perancangan sistem aplikasi menggunakan Unified Modelling Language (UML)
rancangan basis data dan rancangan tampilan.
Metode Haversine
Perancangan metode haversine dimulai ketika pengguna melakukan input
alamat kemudian dilakukan perhitungan menggunakan rumus haversine
berdasarkan data alamat (Latitude, Longitude) dan menampilkan jarak lokasi-
lokasi antara pengguna jasa dengan penyedia jasa. Berikut contohnya.
Jun adalah pengguna jasa yang memiliki alamat di Jl. Cendana 3 No.10,
Jakasampurna, Bekasi Bar., Kota Bks, Jawa Barat 17145, Indonesia data alamat
ini dikonversi ke dalam latitude dan longitude menjadi -6.2487156, 106.970.
Ghedman adalah penyedia jasa yang memiliki alamat Jalan Raya Bekasi, Ujung
Menteng, Cakung, Kota Jakarta Timur, Daerah Khusus Ibukota Jakarta 13960,
Indonesia dikonversi ke dalam latitude dan longitude menjadi -6.1826294,
106.9476.
Kedua data diatas dimasukan ke dalam rumus haversine pada sintak
MYSQL:
Jarak = 6371 * ACOS( SIN( RADIANS( lat ) ) * SIN( RADIANS( $lat ) )
+ COS( RADIANS( lng - $lng ) ) * COS( RADIANS( lat ) ) * COS( RADIANS(
$lat)
Jarak = 6371 * ACOS( SIN( RADIANS(-6.1826294) ) * SIN(
RADIANS(-6.2487156) ) + COS( RADIANS(106.9476- 106.970) ) * COS(
RADIANS(-6.1826294) ) * COS( RADIANS(-6.2487156)
Maka didapatkan hasil jarak antara alamat pengguna jasa dengan penyedia
jasa yaitu 7.78 km.
Perancangan UML
Berikut ini dijelaskan mengenai pembuatan diagram-diagram UML yang
terdiri dari use case diagram dan activity diagram. Dimana masing-masing
diagram tersebut menggambarkan secara garis besar mengenai sistem pada
aplikasi ini.
14
Rancangan Use Case Diagram
Perancangan diagram ini menggambarkan suatu fungsionalitas sebuah
sistem yang ditekankan pada apa yang dibuat oleh sistem. Dalam diagram ini
terdapat 3 actor yaitu admin, pengguna dan penyedia jasa. Masing-masing actor
memiliki interaksi yang berbeda terhadap sistem.
Untuk diagram usecase admin bisa dilihat di gambar 2.
Gambar 2 Rancangan Use Case Diagram Admin
Pada gambar 2 menjelaskan admin diminta untuk login ke dalam
sistem, lalu akan ditampilkan halaman home yang didalamnya terdapat menu
kelola pengguna, kelola penyedia jasa, kelola kategori, data pesanan, profile, editt
password dan logout. Pada menu kelola penyedia jasa dan kelola pengguna jasa,
admin bisa melakukan ubah data, hapus data dan melihat detail profil penyedia
jasa maupun pengguna jasa. Pada menu kelola kategori, admin bisa melakukan
penambahan kategori dan menghapus kategori. Pada menu data transaksi, admin
bisa melihat detail transaksi dan konfirmasi data pesanan yang masuk. Pada menu
15
kelola artikel, admin bisa menghapus artikel dan melihat artikel. Pada menu
ulasan, admin bisa menghapus ulasan yang sudah dimasukkan oleh pengguna jasa.
Untuk diagram usecase pengguna bisa dilihat digambar 3
Gambar 3 Rancangan Use Case Diagram Pengguna
Pada gambar 3 menjelaskan pada halaman beranda pengguna dapat
memilih ke menu artikel, daftar, tentang kami, dan masuk. Pengguna tidak bisa
melakukan pencarian jasa jika belum terdaftar atau belum masuk ke aplikasi.
Setelah pengguna melakukan login atau ke menu masuk muncul link ke menu cari
jasa, data pembelian, profil, ubah password dan keluar. Pada menu data pembelian
pengguna bisa melihat invoice dan menambahkan bukti pembayaran agar
diverifikasi oleh penyedia jasa.
Untuk diagram usecase penyedia jasa bisa dilihat digambar 4
16
Gambar 4 Rancangan Use Case Diagram Penyedia Jasa
Pada gambar 4 menjelaskan penyedia jasa diminta untuk melakukan
login terlebih dahulu. Kemudian setelah login, akan ditampilkan halaman beranda
yang didalamnya terdapat link ke menu artikel, data pesanan, profil, ubah
password, dan keluar. Pada menu artikel, penyedia jasa bisa melakukan
penambahan artikel, mengubah artikel yang sudah dibuat dan menghapus artikel.
Pada menu data pesanan, penyedia jasa bisa melakukan konfirmasi pesanan yang
masuk dan melihat detail pesanan. Pada menu profil, penyedia jasa bisa
melakukan penambahan foto profil dan mengubah profil. Pada menu keluar,
penyedia jasa otomatis akan keluar dari halaman dashboard penyedia jasa.
Rancangan Activity Diagram
Rancangan ini merupakan diagram yang berisi berbagai alur aktifitas
yang digunakan dalam sistem. Pada diagram ini dimulai dari start state yang
merupakan penanda awal dimulainya dan dibentuknya suatu objek. Kemudian
setelah start state, akan menampilkan halaman login. Login dibagi menjadi 3 yaitu
admin, pengguna dan penyedia jasa yang memiliki fungsi berbeda. Menggunakan
17
fork dan join untuk menjukan arah aliran activity diagram. Kemudian diakhiri
dengan end state yang berfungsi untuk mengakhiri objek.
Untuk rancangan activity diagram admin bisa dilihat pada gambar 5.
Admin Database Web
Login
Data Sesuai ? Halaman Utama
Pilih Menu Kelola Pengguna Jasa ?
T
Y
Kelola Pengguna Jasa
Detail Ubah Hapus
T
T
T
T
Y Simpan Perubahan
Kelola Penyedia Jasa
Detail Ubah Hapus
Y Simpan Perubahan
Kelola Kategori
HapusTambah
Simpan PerubahanY
Kelola Artikel
HapusDetail
Simpan PerubahanY
Data Transaksi
Detail Konfirmasi
YSimpan Perubahan
T
Pengaturan Password
Simpan PerubahanY
T
Gambar 5 Rancangan Activity Diagram Admin
Pada gambar 5 rancangan activity diagram admin, akan ditampilkan
halaman login. Lalu admin diminta untuk memasukan nama dan password, jika
nama dan password sesuai dengan yang ada didatabase maka akan ditampilkan
halaman beranda. Lalu admin diminta untuk memilih menu yang ada seperti
18
kelola penyedia jasa, pengguna jasa, kelola kategori, kelola artikel, data transaksi,
ubah password dan keluar.
Untuk rancangan activity diagram pengguna jasa terdapat pada gambar 6.
Pengguna Database Web
Artikel ?
Mengambil Data Artikel
Tentang Kami
Daftar ? Mengisi DataSimpan Data
Masuk Data Sesuai ?Beranda
Pilih Menu Cari Jasa ?
Pencarian Jasa
SimpanData Pembelian
Lihat Invoice Upload Pembayaran
Simpan Ubah Password
Y
T
Y
T
Y
T
T
Y
Y
T
Y
T
Y
T
Gambar 6 Rancangan Activity Diagram Pengguna Jasa
Pada gambar 6 rancangan activity diagram pengguna jasa, akan
ditampilkan halaman artikel. Lalu akan muncul menu untuk ke halaman tentang
kami, daftar, dan masuk. Jika pengguna belum memiliki akun bisa untuk
19
melakukan pendaftaran. Jika pengguna sudah memiliki akun bisa untuk ke menu
masuk atau login. Setelah menu masuk, pengguna dapat mencari penyedia jasa,
pengguna juga dapat melihat data pembelian, mengubah password dan keluar.
Untuk rancangan activity diagram penyedia jasa terdapat pada gambar 7.
Penyedia Jasa Database Web
Login Data Sesuai ?Beranda
Pilih Menu Artikel ?
Simpan
Artikel
Tambah Ubah Hapus
Data Pesanan
Detail KonfirmasiSimpan
Profil
Tambah Foto Ubah ProfillSimpan
Simpan Ubah Password
T
Y
T
T
T
T
Y
Y
Y
Y
Gambar 7 Rancangan Activity Diagram Penyedia Jasa
Pada gambar 7 rancangan activity diagram penyedia jasa, akan
ditampilkan halaman login. Lalu akan diminta untuk memasukan nama dan
password. Jika data sesuai makan akan masuk ke beranda, jika tidak akan kembali
ke login. Pada menu beranda penyedia jasa diminta untuk memilih menu yang ada
seperti artikel, data pesanan, profil, ubah password dan keluar. jika user memilih
20
menu artikel maka akan tampil menu artikel yang didalamnya penyedia jasa bisa
melakukan penambahan artikel, pengubahan dan penghapus artikel yang sudah
dibuat. Jika penyedia memilih menu data pesanan maka akan menampilkan detail
pesanan yang masuk dan dapat mengkonfirmasi pesanan. Jika penyedia jasa ke
menu profil, bisa melakukan tambah foto profil dan ubah data profil.
Perancangan Tampilan Aplikasi
Tahap perancangan tampilan aplikasi dibuat untuk menggambarkan
tampilan ditiap halaman yang dibuat di aplikasi. Hal ini diperlukan untuk
dokumentasi dan juga sebagai alat komunikasi dengan user.
Perancangan Halaman Admin
Perancangan halaman ini bertujuan untuk menjelaskan tentang pembuatan
rancangan tampilan halaman admin pada aplikasi ini. Pada pernacangan ini
terdapat rancangan tampilan login, beranda, kelola penyedia jasa, kelola
pengguna, edit profile penyedia jasa, data transaksi dan kelola kategori.
Perancangan Tampilan Login Admin
Detail perancangan tampilan login untuk admin dapat dilihat pada
gambar 9.
Gambar 9 Perancangan Tampilan Login Admin
21
Pada gambar 9 perancangan tampilan login admin berfungsi sebagai
halaman awal untuk melindungi database dari akses pengguna yang tidak berhak
selain admin. Pada tampilan login memiliki 2 textfields dan 1 button. Textfields
digunakan untuk mengisi nama dan password, button login digunakan untuk
mengecek apakah nama dan password ada di database atau tidak. Jika nama dan
password ada di database maka akan masuk ke halaman home. Jika tidak maka
muncul peringatan nama atau password salah.
Perancangan Tampilan Beranda
Detail perancangan tampilan beranda untuk admin dapat dilihat pada
gambar 10.
Gambar 10 Perancangan Tampilan Beranda Admin
Pada gambar 10 perancangan tampilan beranda admin berfungsi sebagai
menu awal untuk mengelola penyedia jasa, pengguna jasa, kelola kategori, kelola
artikel, ulasan, data transaksi, ubah password dan keluar. Pada tampilan beranda
memiliki 8 text link. Text link digunakan untuk membuat link ke menu lain,
Perancangan Tampilan Kelola Penyedia Jasa
22
Detail perancangan tampilan kelola penyedia jasa dapat dilihat pada
gambar 11.
Gambar 11 Perancangan Tampilan Kelola Penyedia Jasa
Pada gambar 3.11 perancangan tampilan kelola penyedia jasa berfungsi
sebagai melihat detail profil data penyedia jasa dan melakukan pengaturan seperti
menghapus, dan mengubah data. Pada tampilan ini memiliki 6 text dan 3 text link.
Text digunakan untuk menampilkan id, nama penyedia jasa, email, password.
Text link digunakan untuk melakukan perubahan data baik mengubah maupun
menghapus data Text link ubah digunakan untuk melakukan perubahan data
penyedia jasa, text link hapus digunakan untuk menghapus data profil penyedia
jasa dan text link detail untuk melihat data yang lebih lengkap dari profil penyedia
jasa.
Perancangan Tampilan Kelola Pengguna Jasa
Detail perancangan tampilan kelola pengguna terlihat pada gambar 12.
23
Gambar 12 Perancangan Tampilan Kelola Pengguna Jasa
Pada gambar 12 perancangan tampilan kelola pengguna jasa berfungsi
sebagai melihat detail profil data pengguna jasa dan melakukan pengaturan seperti
menghapus, dan merubah data. Pada tampilan ini memiliki 6 text dan 3 text link.
Text digunakan untuk menampilkan id, nama pengguna jasa, foto, email,
password dan alamat. Text link digunakan untuk melakukan perubahan data baik
mengubah maupun menghapus data. Text link ubah digunakan untuk melakukan
perubahan data pengguna jasa, text link hapus digunakan untuk menghapus data
pengguna jasa dan text link detail untuk melihat data yang lebih lengkap dari
profil pengguna jasa.
Perancangan Tampilan Ubah Profil Penyedia Jasa
Detail perancangan tampilan ubah profil penyedia jasa dapat dilihat
pada gambar 13.
24
Gambar 13 Perancangan Tampilan Ubah Profil Penyedia Jasa
Pada gambar 13 perancangan tampilan ubah profil penyedia jasa
berfungsi untuk merubah data penyedia jasa seperti nama, email, password, dan
alamat. Pada tampilan ini memiliki 1 textarea, 4 textfields dan 4 button. Textarea
digunakan untuk memasukkan alamat. Setelah itu klik button Cari Alamat untuk
mendapatkan detail alamat. Kemudian button Copy Alamat untuk memasukan
data alamat yang sudah didapat ke dalam textfields alamat. Textfields digunakan
untuk mengisi data yang tersedia. Button ubah untuk menyimpan hasil perubahan
dan button kembali untuk kembali ke halaman sebelumnya.
Perancangan Tampilan Data Transaksi
Detail perancangan tampilan data transaksi terlihat pada gambar 14.
25
Gambar 14 Perancangan Tampilan Data Transaksi
Pada gambar 14 perancangan tampilan data transaksi berfungsi untuk
menampilkan semua transaksi yang dilakukan oleh pengguna jasa. Pada tampilan
ini memiliki 6 text dan 2 text link. Text digunakan untuk menampilkan detail
pesanan seperti id invoice, tanggal pesan, nama pemesan, nama penyedia jasa,
pesanan, dan opsi.. Text link konfirmasi digunakan untuk melakukan konfirmasi
pesanan yang masuk jika pengguna sudah memasukan bukti pembayaran. Text
link detail digunakan untuk menampilkan detail pesanan lebih lengkap termasuk
harga, total, dan alamat.
Perancangan Tampilan Kelola Ketegori
Detail perancangan tampilan kelola kategori terlihat pada gambar 15.
26
Gambar 15 Perancangan Tampilan Kelola Kategori
Pada gambar 15 perancangan tampilan kelola kategori berfungsi untuk
mengelola data kategori seperti menambah, dan menghapus kategori. Pada
tampilan ini memiliki 4 text dan 2 text link. Text digunakan untuk menampilkan
data kategori. Text link digunakan untuk menghapus atau menambah kategori.
Perancangan Halaman Pengguna Jasa
Perancangan halaman ini bertujuan untuk menjelaskan tentang pembuatan
rancangan tampilan halaman pengguna jasa pada aplikasi ini. Pada perancangan
ini terdapat rancangan tampilan login, beranda, profil, cari jasa, data pembelian,
ubah profil dan ubah password.
Perancangan Tampilan Login Pengguna
Detail perancangan tampilan login untuk pengguna dapat dilihat pada
gambar 16.
27
Gambar 16 Perancangan Tampilan Login Pengguna
Pada gambar 16 perancangan tampilan login pengguna berfungsi
sebagai halaman awal untuk melindungi database untuk pengguna jasa. Pada
tampilan login memiliki 2 textfields, 1 button dan 1 text link. Textfields
digunakan untuk mengisi nama dan password, button login digunakan untuk
mengecek apakah nama dan password ada di database atau tidak. Text link
digunakan untuk berpindah ke halaman register.
Perancangan Tampilan Home Pengguna
Detail perancangan home untuk pengguna terlihat pada gambar 17.
Gambar 17 Perancangan Tampilan Home Pengguna
28
Pada gambar 17 perancangan tampilan home pengguna berfungsi
sebagai menu awal untuk mengelola profile, data pesanan, artikel, mencari
penyedia jasa dan logout. Pada tampilan home memiliki 6 Text link. Text link
digunakan untuk membuat link ke menu lain,
Perancangan Tampilan Cari Jasa
Detail perancangan tampilan cari jasa dapat dilihat pada gambar 18.
Gambar 18 Perancangan Tampilan Cari Jasa
Pada gambar 18 perancangan tampilan cari jasa berfungsi mencari jasa
sesuai dengan kebutuhan biaya dan lokasi terdekat dengan pengguna.. Pada
tampilan pencarian memiliki 3 textfields dan 2 button. Textfields digunakan
mengisi jasa apa yang akan dicari dan biaya yang dimiliki pengguna. Button cari
untuk melakukan pencarian jasa dan button kembali untuk berpindah ke halaman
sebelumnya.
Perancangan Tampilan Data Pembelian
Detail perancangan tampilan data pembelian untuk pengguna dapat
dilihat pada gambar 19.
29
Gambar 19 Perancangan Tampilan Data Pembelian
Pada gambar 19 perancangan tampilan data pembelian berfungsi untuk
menampilkan semua transaksi yang dilakukan oleh pengguna jasa. Pada tampilan
ini memiliki 5 text dan 2 button. Text digunakan untuk menampilkan data
pembelian seperti nama penyedia jasa, tanggal pesan, pembelian, dan opsi. Button
lihat invoice digunakan untuk menampilkan detail pesanan yang lebih lengkap
dan button upload bukti pembayaran untuk mengupload bukti pembayaran.
Perancangan Tampilan Ubah Profil
Detail perancangan tampilan ubah profil pengguna dapat dilihat pada
gambar 20.
30
Gambar 20 Perancangan Tampilan Ubah Profil
Pada gambar 20 perancangan tampilan ubah profil pengguna berfungsi
untuk merubah data pengguna jasa seperti nama, email, password, dan alamat.
Pada tampilan ini memiliki 1 textarea, 4 textfields dan 4 button. Textarea
digunakan untuk memasukkan alamat. Button cari alamat untuk mendapatkan
detail alamat. Button Copy Alamat untuk memasukan data alamat yang sudah
didapat ke dalam textfields alamat. Textfields digunakan untuk mengisi data yang
tersedia. Button ubah untuk menyimpan hasil perubahan dan button kembali
untuk kembali ke halaman sebelumnya.
Perancangan Halaman Penyedia Jasa
Perancangan halaman ini bertujuan untuk menjelaskan tentang pembuatan
rancangan tampilan halaman untuk peyedia jasa. Pada perancangan ini terdapat
rancangan tampilan login, data pesanan, profile dan artikel.
31
Perancangan Tampilan Login Penyedia Jasa
Detail perancangan tampilan login untuk penyedia jasa dapat dilihat
pada gambar 22.
Gambar 22 Perancangan Tampilan Login Penyedia Jasa
Pada gambar 22 perancangan tampilan login penyedia jasa berfungsi
sebagai halaman awal untuk melindungi database untuk penyedia jasa. Pada
tampilan login memiliki 2 textfields dan 1 button. Textfields digunakan untuk
mengisi nama dan password, button login digunakan untuk mengecek apakah
nama dan password ada di database atau tidak.
Perancangan Basis Data
Aplikasi ini menggunakan database mysql dengan nama database
gofreelance. Adapun tabel yang akan dibuat yaitu tabel admin, tabel member,
tabel artikel, tabel invoice, dan tabel kategori. Sebagai contoh perancangan tabel
dibuat perancangan tabel admin, tabel member dan tabel kategori.
Rancangan Tabel Admin
Detail rancangan tabel admin dapat dilihat pada tabel 3.
Tabel 3 Tabel Admin
Field Tipe Panjang Keterangan
Id_admin int 3 Primary Key
nama Varchar 20
email Varchar 20
password Varchar 20
32
Pada tabel 3 tabel admin menjelaskan kolom id_admin menggunakan
tipe data integer dengan panjang karakter 3 dan diberikan keterangan primary key.
Kolom nama menggunakan tipe data varchar dengan panjang karakter 20. Kolom
email menggunakan tipe data varchar dengan panjang karakter 20. Kolom
password menggunakan tipe data varchar dengan panjang karakter 20.
Rancangan Tabel Member
Detail rancangan tabel member dapat dilihat pada tabel 4.
Tabel 4 Tabel Member
Field Tipe Panjang Keterangan
Id int 3 Primary Key
nama Varchar 20
email Varchar 30
password Varchar 20
alamat text
lat Varchar 30
lng Varchar 30
foto Varchar 30
Pada tabel 4 tabel member menjelaskan kolom id menggunakan tipe
data integer dengan panjang karakter 3 dan diberikan keterangan primary key.
Kolom nama menggunakan tipe data varchar dengan panjang karakter 20. Kolom
email menggunakan tipe data varchar dengan panjang karakter 30. Kolom
password menggunakan tipe data varchar dengan panjang karakter 20. Kolom
alamat menggunakan tipe text. Kolom lat menggunakan tipe data varchar dengan
panjang karakter 30. Kolom lng menggunakan tipe data varchar dengan panjang
karakter 30. Kolom foto menggunakan tipe data varchar dengan panjang karakter
20.
Rancangan Tabel Kategori
Detail rancangan tabel kategori dapat dilihat pada tabel 5.
33
Tabel 5 Tabel Kategori
Field Tipe Panjang Keterangan
Id_kategori int 3 Primary Key
kategori Varchar 20
Info_kategori Varchar 80
Pada tabel 5 tabel kategori menjelaskan kolom id_kategori
menggunakan tipe data integer dengan panjang karakter 3 dan diberikan
keterangan primary key. Kolom kategori menggunakan tipe data varchar dengan
panjang karakter 20. Kolom info_kategori menggunakan tipe data varchar dengan
panjang karakter 80.
3.1. Kesimpulan
Pencarian lokasi suatu jasa Internet Marketing dapat dibantu dengan
menggunakan sebuah aplikasi pencarian. Salah satu metode yang dapat
digunakan adalah Metode Haversine.
Perancangan aplikasi pencarian lokasi suatu jasa internet marketing ini
menggunakan metode Unifed Modeling Language (UML). Diagram yang
digunakan adalah use case diagram, activity diagram, dan class diagram. User
atau pengguna yang terlibat pada sistem ini yaitu, admin, penyedia jasa dan
pengguna jasa.
Daftar Pustaka
1. Agustina, Nova., Slamet Risnanto, dan Irwin Supriadi, Pengembangan
Aplikasi Location Based Service Untuk Informasi dan Pencarian Lokasi
Pariwisata di Kota Cimahi, Jurnal Ilmiah Teknologi Informasi Terapan,
Volume III No.1, Tahun 2016.
2. Danang Nur Rahaman, dan Andi Iwan Nur Hidayat, Rancang Bangun
Aplikasi Location Based Service Untuk Pencarian Rute Terdekat Bengkel
Resmi Honda Pada Wilayah Surabaya, Jurnal Manajemen Informatika,
Volume 5 Nomor 2 Tahun 2016.
34
3. Eko Budiyanto, Sistem Informasi Geografis dengan Quantum GIS, Andi
Publisher, Yogyakarta, 2016.
4. R.H. Sianipar, Pemrograman Database Menggunakan MySQL, Andi Offset,
Yogyakarta, 2016.
5. Ryan Herwan Dwi Putra, Herry Sujiani, Novi Safriadi, Penerapan Metode
Haversine Formula Pada Sistem Informasi Geografis Pengukuran Luas
Tanah, Jurnal Sistem dan Teknologi Informasi (JUSTIN) Vol. 1, No. 1, 2015.
6. Slameto, Agus Andika, Penerapan Location Based Services Untuk
Pembuatan Aplikasi Pencarian Tempat Tambal Ban, Jurnal Ilmiah DASI,
Vol 16 No 4, tahun 2015.
7. Wardana, Aplikasi Website Profesional dengan PHP dan jQuery, Elex
Media Komputindo, 2016.