PEMANFAATAN GOOGLE MAP API PADA APLIKASI PENCARIAN LOKASI DEPARTMENT STORE BERBASIS WEB Tri Suci Wulan Dari1, Muhammad Zarlis2, Sajadin Sembiring3 Jurusan Teknik Informatika Sekolah Tinggi Teknik Harapan Medan Jl. HM Jhoni No 70 Medan, Indonesia 2 Universitas Sumatera Utara 1
[email protected],
[email protected],
[email protected]. 1,3
ABSTRACT Search of a location is one of the most widely discussed problem today. Many department stores are spread across the city of Medan are not comparable with information about its location. Therefore we need a department store location search application, especially in cities where the terrain in the city there are many department stores. In order to facilitate the public in finding and reaching of a location from the department store, location the search process can be done by utilizing the technology of fire google map that has been equipped vitur navigation directions and distances are shown by the map. This system can visualize the line from the origin to the department store and has a functioning navigation directions find the shortest path calculation is contained within (kilometers) from the place of origin of the department store. Keywords: Google Maps API, GIS, location department store
ABSTRAK Pencarian suatu lokasi merupakan satu masalah yang paling banyak dibahas saat ini. Banyaknya department store yang tersebar di kota Medan tidak sebanding dengan informasi tentang lokasinya. Oleh sebab itu dibutuhkan suatu aplikasi pencarian lokasi department store khususnya di kota medan yang mana di kota tersebut terdapat banyak sekali department store. Agar mempermudah masyarakat dalam mencari dan menjangkau suatu lokasi dari department store, proses pencarian lokasi dapat dilakukan dengan memanfaatkan tekhnologi dari google map api yang telah dilengkapi vitur navigasi arah dan jarak yang ditampilkan oleh peta. Sistem ini dapat memvisualisasikan jalur dari tempat asal ke department store dan dilengkapi navigasi arah yang berfungsi mencari jalur terpendek yang terdapat perhitungan jarak ( kilometer ) dari tempat asal department store. Kata Kunci : Google Maps API, GIS,lokasi department store
1. Pendahuluan Pemanfaatan teknologi informasi yang saat ini berkembang pesat, merupakan sebuah strategi yang tepat dalam rangka memperkenalkan dan mempromosikan beberapa department store di kota Medan. Department store merupakan salah satu jenis toko pengecer (ritel) yang menyediakan variasi produk belanja dan produk-produk khusus secara luas, termasuk pakaian, kosmetik, peralatan rumah tangga, alat-alat rumah tangga dan mebel [1]. Selama ini, ketika membicarakan dan menunjukkan suatu lokasi dimana sebuah Department Store tersebut berada, sering kali keterangan yang didapatkan hanyalah terbatas pada nama jalan dan arah atau ciri-ciri kawasannya. Sedangkan kejelasan lokasi dimana Department Store tersebut berada tidak terpetakan dengan baik. Hal tersebut tentunya masih kurang efektif apabila informasi yang ingin diketahui masyarakat adalah persebaran lokasi-
lokasi department store atau informasi tentang department store itu sendiri. Oleh Karena itu, diperlukan aplikasi pencarian lokasi yang dapat menyelesaikan permasalahaan tersebut. Sistem informasi geografis berbasis web dapat mempermudah masyarakat dalam mencari dan menjangkau suatu lokasi department store. Sistem Informasi Geografis (SIG) atau yang biasa dikenal dengan Geographic Information System (GIS) adalah sebuah alat bantu manajemen informasi yang berkaitan erat dengan sistem pemetaan dan analisis terhadap segala sesuatu serta berbagai peristiwa yang terjadi di muka bumi [2]. Definisi SIG selalu berkembang, bertambah dan bervariasi. Hal ini telihat dari banyaknya definisi SIG yang telah beredar. Selain itu, SIG juga merupakan suatu kajian ilmu dan teknologi yang relatif baru, digunakan oleh berbagai bidang disiplin ilmu, dan berkembang dengan cepat [2].
Peta yang digunakan dalam aplikasi ini menggunakan peta dari Google Maps Api (Aplication Programming Interface). Google maps merupakan revolusi tampilan peta di halaman web, yang memungkinkan pengguna men-drag bagian peta untuk bernavigasi, serta memberikan interaktivitas yang tinggi kepada penggunanya [3]. Google maps dapat diakses pada halaman browser dengan alamat http://maps.google.com. Google Maps memiliki beberapa versi tampilan fisik, yaitu Map, Satellite yang ditunjukkan pada Gambar 1 dan Terrain [4]. Sedangkan Google Map API merupakan aplikasi interface yang dapat diakses lewat javascript agar Google Map dapat ditampilkan pada halaman web yang akan dibangun [5]. Pengetahuan yang diperlukan untuk mengembangkan sebuah Google Maps API adalah tentang HTML dan JavaScript, sedangkan peta sudah disediakan oleh Google [5].
Gambar 2 Context Diagram
Gambar 1 Tampilan Sattelite Google Maps
Context diagram menggambarkan hubungan antara entitas-entitas yang terdapat diluar sistem dengan sistem dan masukan serta keluaran dari sistem. Dalam sistem informasi ini, terdapat 3 entitas yaitu : a. User atau pengunjung
2.
Metode Penelitian
Untuk membangun suatu aplikasi yang sempurna, tahap berikutnya adalah tahap membangun alur aplikasi yang bertujuan untuk mengetahui batasan dari aplikasi yang dibangun sehingga dapat menghasilkan sebuah sistem aplikasi yang dapat berjalan secara optimal dan mudah untuk di implementasikan. Data flow diagram adalah sebuah teknik grafis yang menggambarkan aliran informasi dan transformasi yang diaplikasikan pada saat bergerak dari input menjadi output [6]. Perancangan sistem menggambarkan proses-proses yang ada pada sistem. Dari proses tersebut dapat diketahui kesatuan luar sistem, data masukan dan data keluaran, gambar 2 berikut ini merupakan context diagram alur sistem yang telah dibangun.
User (pengunjung) adalah siapa saja yang dapat mengakses website ini. Pada saat membuka halaman utama user dapat mengakses dan mendapatkan informasi, seperti: Menu about, halaman menu ini berisi seluruh informasi tentang department store yang ada di kota Medan. Menu Fashionology, halaman ini berisi pengetahuan tentang beberapa artikel-artikel yang membahas informasi seputar fashion dan juga tata cara mendekor ruangan atau rumah. Menu Kontak (contact us), halaman ini berisi identitas dari pembuat sistem Menu Lokasi (route map) merupakan menu yang berisi tampilan dari peta/map kota Medan. Disini pengunjung dapat memilih lokasi awal keberangkatan dan tujuan, kemudian akan muncul informasi berupa lokasi yang akan dituju secara geografis.
b. Admin Admin adalah user yang memiliki hak akses penuh atas sistem ini yang dapat melakukan update data dan manajemen data. Dan juga mempunyai akses untuk menambah, menghapus, dan merubah data.
Gambar 3 merupakan rancangan flowchart aplikasi secara keseluruhan, flowchart ini menjelaskan bagaimana sistem tersebut bekerja, mulai dari proses kerja halaman site home, kemudian pilih menu pencarian yang terdapat pada halaman route map dan pilihan tampilan halaman pandukung lainnya yang berisi informasi seputar department store dan fashionology.
c. Google Maps API Google Maps Api adalah tool atau library dari Google untuk menampilkan peta digital di website, penggunaan Google Maps di website dapat melalui pemrograman. 3.
Perancangan Sistem
Perancangan flowchart ini menggambarkan uraian tahap awal sampai tahap pengeksekusian dari tombol-tombol yang ada pada Aplikasi Pencarian lokasi Departement Store. Flowchart adalah bagan (chart) yang menunjukkan alir (flow) di dalam program atau prosedur sistem secara logika [7]. Inti pembuatan flowchart ini adalah penggambaran urutan langkah-langkah pengerjaan dari suatu algoritma. Untuk lebih jelasnya dapat dilihat pada Gambar 3 berikut ini:
Pada saat user mengklik menu route map maka akan berpindah pada halaman tambahan. Pada halaman tambahan ini dapat diketahui dimana saja lokasi department store di kota Medan dan rute perjalanan yang dapat dilalui, dimana sebelumnya user telah menginputkan perjalanan awal keberangkatan menuju department store yang diinginkan. Tetapi jika sebaliknya, maka user dapat melihat tampilan halaman pendukung lainnya seperti about us yang berisi informasi dan gambar seputar departmnet store, fashionology yang berisi informasi seputar fashion dan contact us yang berisi informasi alamat lengkap dari department store di kota Medan.
4.
Hasil dan Pembahasan
a.
Tampilan Awal Aplikasi
Tampilan awal aplikasi adalah menu tampilan utama ketika aplikasi dijalankan. Berikut gambar tampilannya:
Gambar 4 Tampilan Awal Aplikasi Pada gambar 4 analisa yang akan dilakukan adalah dari sisi tampilan Maps. Untuk proses analisa akan dilakukan proses pengecekan pada beberapa hal antara lain : a. Login Admin b. Input Data Peta c. Menampilkan marker lokasi department store pada peta d. Rute Perjalanan Gambar 3 Perancangan Flowchart Aplikasi
Pada aplikasi terdapat 2 user yang berbeda diantaranya adalah administrator dan user. Dimana diantara keduanya memiliki akses pada aplikasi
yang berbeda, untuk administrator dibutuhkan pengujian untuk login ke aplikasi terlebih dahulu, tapi tidak untuk pengguna atau pengunjung. Pengujian Login Admin Sebelum masuk ke halaman administrator perlu dilakukan proses login terlebih dahulu. Disini administrator memasukkan username dan password melalui form login. Berikut gambar 5 tampilan pengujian login:
Gambar 8 Tampilan Awal Peta
Gambar 5 Login Admin Dengan melakukan Pengujian login ini, admin dapat menginput dan merubah data-data yang dibutuhkan untuk pengembangan informasinya melalui halaman administrator. Admin adalah user yang memiliki hak akses penuh atas sistem ini yang dapat melakukan update dan manajemen data.
Gambar 8 merupakan antarmuka yang berisi peta Google Map API daerah kota Medan. Pada halaman ini disediakan menu “Bahasa” dimana terdapat beberapa pilihan bahasa seperti bahasa Inggris, Perancis, Jerman, Jepang dan Spanyol yang dapat dipilih sesuai dengan keinginan kita. Pada tampilan peta juga disediakan tombol untuk perbesar dan perkecil tampilan peta. Peta dapat ditampilkan dalam mode peta Map, Satellite atau Terrain. Untuk memudahkan proses pencarian dari suatu lokasi department store, maka user dapat menginputkan lokasi awal yang berisi data dari beberapa lokasi yang strategis di kota Medan, seperti Bandara Polonia, Merdeka Walk dan lain-lain. Kemudian input lokasi tujuan department store. Pengujian pencarian rute ini dapat diisi dengan manual, seperti yang terlihat dalam Gambar 9 untuk lokasi awal „Dari‟ dan lokasi tujuan „ke‟ pada Gambar 10 berikut ini:
Gambar 6 Tampilan Menu Input Data lokasi Kemudian pada gambar 6 merupakan input data lokasi department store yang bertujuan untuk menyimpan data lokasi department store didalam database dengan posisi latitude dan longitudenya. Hasil dari inputan data lokasi department store dapat dilihat pada gambar 7 berikut ini:
Gambar 9 Lokasi Awal
Gambar 7 Tampilan semua Data Lokasi
Gambar 10 Lokasi Tujuan department store kota Medan Gambar 12 Menu About Setelah lokasi awal dan tujuan dipilih, pengguna dapat langsung mengklik Cari Rute pada peta yang ada yang kemudian akan muncul marker dari titik awal dan titik tujuan seperti pada gambar 11 yang merupakan gambar dimana titik awal dan tujuan dari rute telah ditetapkan dan kemudian diberi marker warna merah sebagai pembeda dari titik marker yang berwarna hijau yang menandakan lokasi-lokasi yang dapat dilalui untuk menuju department store. Adapun tampilannya dapat dilihat pada Gambar 3.8 berikut ini:
Gambar 11 Tampilan Hasil Pencarian Lokasi department store dikota Medan Dari tampilan diatas terdapat banyak titik marker yang menandakan lokasi department store yang ada di kota Medan, untuk mengetahui informasi lebih lengkap pengguna hanya perlu memilih marker yang ada dipeta dan mengkliknya. Tapi jika pengguna ingin memperoleh informasi lebih lengkap seputar department store yang dituju maka pengguna dapat memilih menu about pada aplikasi web ini sehingga akan tampil data department store seperti dibawah ini :
b.
Analisa
Dari hasil pengujian yang telah dilakukan dapat di analisa bahwa aplikasi pencarian lokasi department store berbasis web ini tidak hanya dapat menampilkan informasi, tetapi juga penggunaan peta sebagai informasi letak geografis dari lokasi department store yang ada di kota Medan. Peta yang digunakan dalam aplikasi ini menggunakan peta dari google map API, dimana google map adalah aplikasi web GIS yang memiliki data geospatial yang mengandung rujukan geografi secara langsung seperti latitude (garis lintang) dan longitude (garis bujur). Pada tampilan peta di Gambar 4.6 telah dilengkapi dengan citra sattelite yang dapat menampilkan gambar muka bumi diseluruh lokasi di dunia, khususnya kota Medan yang diambil dari satelit atau pesawat udara. dan juga dapat menampilkan seluruh lokasi department store yang ada di kota Medan. Karena proses pemetaan rute menggunakan fitur layanan dari google map maka aplikasi harus terhubung dengan internet dengan koneksi yang cepat sehingga proses geocoding dari google map dapat ditampilkan dengan optimal.
3.
Kesimpulan
Berdasarkan hasil pengujian dan analisa yang telah dibahas pada bab sebelumnya maka dapat disimpulkan bahwa: 1. Telah berhasil dibangun sebuah aplikasi pemanfaatan Google Map Api pada aplikasi pencarian lokasi department store di kota Medan berbasis Web
2. Penempatan posisi marker untuk lokasi-lokasi department store ditentukan berdasarkan titik koordinat latitude dan longitude. 3. Aplikasi ini dapat menyajikan informasi tentang rute-rute perjalanan yang dari inputan lokasi awal dan tujuan department store yang telah dipilih
4.
DAFTAR PUSTAKA
[1] Lamb, Hair dan McDaniel. 2001. Pemasaran. Jakarta: PT.Salemba Emban Raya. [2] Prahasta, Eddy., 2002. Konsep-Konsep Dasar Sistem Informasi Geografis. C.V Informatika, Bandung [3] Svennerberg Gabriel. 2010. Beginning Google Maps API 3, Apress. United States of America [4] Zaki, Ali. 2010. Keliling Dunia dengan Google Earth + Google Maps. Penerbit Andi, Yogyakarta [5] Hidra,Wira,Buana. 2011, Aplikasi SIG Sebagai Media Informasi Lokasi Wisata Dan Kuliner Di Yogyakarta Menggunakan Php , Mysql, Dan Google Map, Yogyakarta [6] Pressman, R.S. 1997. Software Engineering:
A Practitioner‟s Approach. The McGrawHill Companies. Inc. [7] Jogiyanto, H.M. 2004. Analisa dan Perancangan Sistem. Penerbit ANDI: Yogyakarta
