Perancangan Aplikasi Informasi Hotel dan Kuliner

Di Kota Salatiga Berbasis Android Menggunakan JSON

Artikel Ilmiah

Diajukan kepada

Fakultas Teknologi Informasi untuk

Memperoleh Gelar Sarjana Komputer

Peneliti :

Steven Jodie Kurniahu (672011119)

Evangs Mailoa, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Desember 2014

1

Perancangan Aplikasi Informasi Hotel dan Kuliner

Di Kota SalatigaBerbasis Android Menggunakan JSON

1) Steven Jodie Kurnia, 2) Evangs Mailoa

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1)stevenjodie7@gmail.com, 2)evangs.mailoa@staff.uksw.edu

Abstract

Salatiga is one of the tourist destinations of nature, history and education, which is

located in Central Java, Indonesia. The related information about lodging and culinary

still very limited and not easily accessible that makes tourists are hesistant to come visit

Salatiga.The government still seeking to provide an efficient and effective information to

promote the area of tourism. In order to help the government to overcome the existing

problems, the author create mobile applications on Android platform using JSON as

connector from mobile application to database on webserver.This research produce a

Tripmate Salatiga v.1 infromation application based on mobile and has location based

service and facebook share as addition. This application provide an information of hotel

and culinary place on Salatiga with interactive and responsive display for user.

Keywords: Tripmate Salatiga, Hotel, Restaurant, Database, Server, Mobile Application,

JSON, Location Based Service, Facebook Share.

Abstrak

Salatiga merupakan salah satu kota tujuan wisata alam, sejarah, dan pendidikan, yang

berada di Jawa Tengah, Indonesia. Informasi terkait penginapan dan tempat

kuliner/makan masih sangat terbatas dan belum dapat diakses dengan mudah sehingga

para wisatawan terkadang ragu untuk mengunjungi Salatiga. Pemerintah kota sedang

mengupayakan untuk menyediakan layanan informasi yang efisien dan efektif, sehingga

nantinya mampu mengangkat pariwisata daerah. Aplikasi mobile pada platform Android

menggunakan JSON sebagai penghubung aplikasi mobile dengan database pada

webserver, dibuat untuk mengatasi permasalahan yang ada. Penelitian ini

menghasilkan aplikasi TripMate Salatiga v.1 yang merupakan aplikasi sistem informasi

berbasis mobile dan memiliki location based service serta facebook share sebagai fungsi

tambahan. Aplikasi ini menyediakan informasi penginapan/hotel dan tempat kuliner di

Salatiga dalam tampilan yang interaktif dan responsif kepada pengguna.

Kata Kunci: TripMate Salatiga, Hotel, Restoran, Database, Server Mobile Application,

JSON, Location Based Service, Facebook Share. 1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika, Universitas Kristen

Satya Wacana Salatiga

2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga

2

1. Pendahuluan

Salatiga adalah sebuah kota kecil yang terletak di provinsi Jawa Tengah.

Kota ini berbatasan dengan Kabupaten Semarang. Salatiga terletak 49 km sebelah

selatan Kota Semarang dan 52 km sebelah utara Kota Surakarta. Kota ini juga

terletak di lereng timur Gunung Merbabu. Kota Salatiga terletak di dataran tinggi

yang memiliki udara yang sejuk sehingga kota ini sering menjadi kota tujuan

wisata alam sekaligus tempat peristirahatan. Selain wisata alam, Salatiga juga

menjadi pusat pembelajaran sejarah. Kota ini sudah berdiri jauh sebelum

Indonesia merdeka. Pada saat penjajahan Belanda, Salatiga dijadikan sebagai

tempat peristirahatan para kepala/pimpinan VOC. Hal ini juga yang menyebabkan

banyak sekali bangunan tua peninggalan Belanda di Salatiga yang sampai saat ini

tetap dipelihara dan dijadikan tujuan wisata sejarah. Selain sebagai tujuan wisata

alam dan sejarah, Salatiga juga menjadi kota tujuan pendidikan. Terdapat

beberapa sekolah dan perguruan tinggi di Salatiga yang diminati sebagai tempat

tujuan menimba ilmu. Begitu beragamnya siswa dan mahasiswa dari berbagai

pelosok Indonesia yang belajar di kota ini menyebabkan muncul semboyan

“Salatiga adalah Indonesia mini”.

Sebagai salah satu kota tujuan wisata, informasi-informasi terpercaya

terkait penginapan/hotel dan tempat kuliner/makan masih sangat terbatas dan sulit

untuk diakses. Informasi-informasi terkait penginapan dan tempat kuliner di

Salatiga yang berada di internet tidaklah lengkap dan tidak dapat dipercayai

kebenarannya. Pemerintah kota Salatiga melalui Kesbangpol (Badan Kesatuan

Bangsa dan Politik), mempunyai data lengkap tentang hotel dan tempat kuliner

yang ada di kota Salatiga yang disimpan pada bagian Cipkataru (Cipta Karya dan

Tata Ruang). Data-data ini tidak disediakan secara online sehingga belum dapat

diakses oleh para wisatawan. Dibutuhkan sebuah aplikasi sistem informasi agar

memudahkan wisatawan mengakses data-data tersebut. Adanya aplikasi sistem

informasi ini diharapkan mampu membantu memajukan pariwisata daerah.

Teknologi dapat dimanfaatkan sebagai alat untuk mencari informasi,

terutama menggunakan telepon genggam (mobile). Kemajuan teknologi pada

bidang mobile banyak sekali memberikan keuntungan dan kemudahan dalam

penghematan waktu. Universitas Ryeson pernah melakukan penelitian terhadap

para mahasiswa dan mendapati lebih dari 50% responden mengatakan bahwa

mereka mengakses layanan perpustakaan melalui handphone karena menghemat

waktu [1].

Android adalah mobile platform yang bebas untuk di develop. Tidak ada

lisensi atau biaya royalti untuk pengembangan aplikasi pada platform Android.

Android memberikan kesempatan pengembang untuk melakukan pengembangan

sesuai dengan yang diharapkannya. Sistem operasi yang mendasari Android

dilisensikan dibawah GNU. Android juga didistribusikan dibawah lisensi Apache

3

Software (ASL/Apache2), yang memungkinkan untuk distribusi kedua dan

seterusnya [2].

Protokol JSON (JavaScript Object Notation) dipilih sebagai penghubung

aplikasi mobile dikarenakan kemampuannya untuk melakukan pertukaran data

yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan

dan dibuat (generate) oleh komputer [3]. Kelebihan dari JSON adalah memiliki

ukuran file data yang kecil, memiliki kecepatan transfer dan parsing data yang

cepat dan lebih menghemat bandwidth, dapat menggunakan tipe data dengan

menggunakan javascript tanpa membutuhkan library tambahan, memiliki format

penulisan yang sederhana dan mudah dimengerti oleh pengguna C, C++, C# dan

Java. [4]

Mengatasi masalah yang ada, dilakukan penelitian berupa penerapan

teknologi untuk memudahkan penyediaan informasi terkait tempat penginapan

dan tempat kuliner di Salatiga. Penelitian ini menghasilkan aplikasi TripMate

Salatiga v.1 yang interaktif dan responsif bagi pengguna. Protokol yang

digunakan untuk menghubungkan TripMate Salatiga dengan database webserver

adalah JSON. Protokol ini dipilih agar aplikasi dapat menampilkan informasi

dengan kecepatan maksimum supaya tercapai tujuan interaktif dan responsif bagi

pengguna, sehingga memudahkan pengguna aplikasi mendapatkan informasi

tentang penginapan dan tempat kuliner di kota Salatiga.

2. Kajian Pustaka

Penelitian sebelumnya dengan judul “Perancangan Antarmuka Layanan

Informasi Wisata dan Kuliner di DIY Berbasis Web dan Mobile Web”

menghasilkan perancangan aplikasi untuk wisata kuliner di Yogyakarta berbasis

web dan Mobile Web. Pengguna dapat mengakses aplikasi dan melihat informasi

Wisata dan Kuliner di Yogyakarta. Penelitian yang dilakukan sebelumnya pada

aplikasi informasi wisata kuliner memanfaatkan teknologi dari HTML sebagai

bahasa pemrograman dalam pembuatan aplikasi yang berjalan [5].

Persamaan dengan penelitian yang dilakukan saat ini adalah sama-sama

membuat aplikasi yang bertujuan untuk menampilkan informasi, sementara

perbedaan dengan penelitian yang dilakukan saat ini adalah metode dan bahasa

pemrograman yang digunakan untuk membangun aplikasi. Penelitian saat ini

menggunakan bahasa pemrograman Java-Eclipse dan JSON (web service) yang

berfungsi untuk menghubungkan aplikasi mobile dan aplikasi web dengan

database pada server, sementara pada penelitian sebelumnya menggunakan

bahasa pemrograman HTML dan HTML5.

Penelitian lain yang dijadikan pembanding adalah yang berjudul “M-

Library Berbasis Android Menggunakan Protokol JSON (Studi Kasus : FT-

Umrah)”. Penelitian tersebut menghasilkan aplikasi M-Library menggunakan

4

protokol JSON. Persamaan dengan penelitian saat ini adalah sama-sama

dijalankan pada platform Android dan menggunakan protokol JSON sebagai

penghubung aplikasi mobile dan web dengan database pada server [6].

Perbedaannya, penelitian sebelumnya diterapkan pada aplikasi perpustakaan

sedangkan penelitian ini mencoba menerapkan pada aplikasi informasi

penginapan dan tempat kuliner.

Dari kedua penelitian sebelumnya, dilakukan percobaan membangun

aplikasi informasi TripMate Salatiga menggunakan HTML5 dan protokol JSON.

Setelah dibandingkan, didapati bahwa protokol JSON jauh lebih mudah untuk

diimplementasikan dibandingkan HTML5 karena memiliki struktur bahasa yang

mirip dengan Java, sehingga JSON dipilih untuk dijadikan protokol penghubung

aplikasi dengan database.

Android

Android adalah mobile platform yang bebas untuk di develop. Tidak ada lisensi

atau biaya royalti untuk pengembangan aplikasi pada platform Android. Android

memberikan kesempatan pengembang untuk melakukan pengembangan sesuai

dengan yang diharapkannya. Sistem operasi yang mendasari Android dilisensikan

dibawah GNU. Android juga didistribusikan dibawah lisensi Apache Software

(ASL/Apache2), yang memungkinkan untuk distribusi kedua dan seterusnya [2].

Android SDK adalah tools API (Application Programming Interface) yang

diperlukan untuk mulai mengembangakan aplikasi pada platform Android

menggunakan bahasa pemrograman java [2].

Eclipse

Eclipse merupakan Bahasa tingkat tinggi pemrograman yang menggabungkan dari

beberapa bahasa pemrograman lainnya, seperti C, C++, Java, PHP, juga Ruby

sehingga programmer baru yang menggunakannya tidak akan merasa asing dan

lebih mudah memahami [7].

MySQL dan PhpMyAdmin

MySQL adalah salah satu jenis database server yang sangat terkenal karena

menggunakan Structure Query Language (SQL) sebagai dasar untuk mengakses

basis datanya. Selain itu, MySQL bersifat free pada berbagai platform (kecuali

pada Windows, yang bersifat shareware). MySQL termasuk jenis Relational

Database Management System (RDBMS). Sebuah basis data mengandung satu

atau sejumlah tabel, tabel terdiri atas sejumlah baris dan setiap baris mengandung

satu atau beberapa kolom [8].

5

JSON (Java Script Object Notation)

JSON (JavaScript Object Notation) adalah format pertukaran data (lightweight

data-interchange format), mudah dibaca dan ditulis, serta mudah diterjemahkan

dan di-generate. Format ini dibuat berdasarkan bagian dari Bahasa Pemrograman

JavaScript, Standar ECMA-262. JSON merupakan format teks yang tidak

bergantung pada bahasa pemrograman apapun karena menggunakan gaya bahasa

yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java,

JavaScript, dan Perl [2].

JSON memiliki ukuran yang lebih kecil dibandingkan dengan XML

(ukuran XML lebih besar karena overhead dan nametag), memiliki kecepatan

transfer dan parsing data yang lebih cepat, memiliki format penulisan yang lebih

sederhana dibandingkan XML. [6]

Penggunaan JSON sebagai webservice untuk melakukan pertukaran data

ke database webserver memiliki kecepatan transfer yang lebih cepat

dibandingkan dengan XML dikarenakan file JSON memiliki ukuran lebih kecil

daripada file XML. Keunggulan dari JSON tersebut dikarenakan XML

membutuhkan overhead dan namatag yang membuat file XML menjadi besar dan

lambat untuk di proses [9]. Selain itu JSON memiliki format susunan yang lebih

mudah dimengerti, bahkan untuk pemula. Contoh perbandingan dari penulisan

format JSON dan XML didalam database dapat dilihat pada Kode Program 1 dan

Kode Program 2.

Kode Program 1. Format JSON

Kode Program 2. Format XML

Potongan kode program di atas membuktikan bahwa JSON memiliki

format penulisan database yang lebih ringkas dan mudah dimengerti daripada

penulisan XML. Perbedaan yang paling penting adalah ukuran penulisan dan

jumlah text pada JSON lebih kecil dan sedikit dibandingkan dengan XML,

sehingga JSON memiliki kecepatan transfer dan parsing yang lebih cepat dari

XML.

1. <tempat>

2. <hotel>

3. <ID>1</ID>

4. <nama>Wahid</nama>

5. <alamat>Jl.Sudirman</alamat>

6. <harga>300000</harga>

7. <rating>4.7</rating>

8. </hotel>

9. </tempat>

1. {"hotel":

2. [{"ID":"1",

3. "nama":"Wahid",

4. "alamat":"Jl.Sudirman",

5. "harga":"300000",

6. "rating":"4.7"

7. }]

8. }

6

JSON juga mudah untuk dipahami karena JSON menggunakan format

penulisan yang hampir mirip seperti Bahasa pemrograman Java dan C. Tabel

perbandingan antara fungsi operasi di JSON dan Java dapat dilihat pada Tabel 1.

Tabel 1. Perbandingan Fungsi JSON dan Java

JSON Java

createObject(objectName) createJavaType(typeName)

addChildObject() setSimpleValue()

setPairValue(name,value) setFieldValue(name, value)

getNextPair() getFieldValue()

returnObject() returnType()

Tabel 1 menampilkan bahwa fungsi operasi yang digunakan di JSON tidak

berbeda jauh dengan fungsi-fungsi pada Java. Kemiripan dengan bahasa

pemrograman Java membuat JSON lebih mudah dipahami oleh programmer atau

developer yang menguasai bahasa pemrograman Java.

Kecepatan transfer dan parsing data pada JSON terbukti lebih cepat dari

XML setelah dilakukan eksperimen untuk mengecek peforma pengiriman data

dari JSON dan XML. Percobaan dilakukan pada PC dengan 1.73 Intel Core Duo

CPU, RAM 2GB, dengan Windows XP Professional SP3 sebagai OS-nya. Java

Virtual Machine yang digunakan adalah JDK 1.6.0 dan Apache Tomcat 5.5.

Eksperimen dilakukan dengan menghitung waktu yang dibutuhkan untuk

melakukan transfer data sebesar 12kb [10]. Perbandingan waktu yang dibutuhkan

JSON dan XML dapat dilihat pada Gambar 1.

Gambar 1. Kecepatan Transfer JSON dan XML

3. Tahapan Penelitian

Penelitian ini dilakukan melalui lima tahapan penelitian, yaitu: 1). Analisis

kebutuhan dan pengumpulan data yang diperlukan. 2). Perancangan Sistem.

3). Perancangan aplikasi / program. 4). Implementasi dan pengujian sistem, serta

7

analisis hasil pengujian. 5). Penulisan laporan hasil penelitian. Tahapan – tahapan

yang dilakukan dalam penelitian ini ditampilkan pada Gambar 2.

Gambar 2. Tahapan Penelitian

Berdasarkan bagan pada Gambar 2, dapat dijelaskan bahwa tahapan dari

penelitian yang dilakukan adalah sebagai berikut: 1) Tahap Pertama: Analisis

kebutuhan dan pengumpulan data. Pada tahap ini dilakukan analisa kebutuhan

aplikasi dalam proses pembuatannya dan melakukan pengumpulan data-data

tempat penginapan dan kuliner, yang ada pada Dinas Cipta Karya dan Tata Ruang

Kota Salatiga; 2) Tahap Kedua: Melakukan perancangan sistem proses dengan

menggunakan UML seperti usecase diagram, activity diagram, sequence

diagram, dan class diagram. Serta menentukan arsitektur yang akan digunakan,

merancang database dan membuat tampilan (interface) aplikasi; 3) Tahap Ketiga:

Perancangan aplikasi, yaitu mulai merancang dan membangun aplikasi

berdasarkan hasil dari analisis kebutuhan dan pengumpulan data yang telah

dilakukan; 4) Tahap Keempat: Implementasi dan pengujian sistem, melakukan

proses pengujian sistem untuk mengetahui apakah aplikasi yang telah dibuat

sudah memenuhi kebutuhan dari client atau belum, jika belum maka aplikasi

akan diperbaiki kembali; 5) Tahap Kelima: Penulisan laporan hasil penelitian,

yaitu mendokumentasikan setiap proses yang telah dilakukan selama penelitian ke

dalam bentuk laporan tertulis berupa jurnal.

Pada tahapan perancangan sistem dan perangkat lunak untuk

menggambarkan prosedur dan proses kerja dari sistem aplikasi yang dibangun.

Proses perancangan sistem dalam penelitian ini menggunakan UML (Unified

Modeling Language) dengan beberapa proses yang akan dijelaskan sebagai

berikut: Pada use case diagram, terdapat dua aktor utama yang berada didalam

sistem ini, yaitu user dan admin. Dalam use case diagram tersebut digambarkan

semua fungsi yang dapat dilakukan oleh masing-masing actor. Aktor User

memiliki fungsi untuk mendaftar sebagai member, view informasi tempat,view

letak lokasi tempat,view harga, share, insert review, melihat lokasi hotel, melihat

8

lokasi restoran dan share pada situs jejaring sosial facebook. Sementara aktor

Admin memiliki fungsi untuk mengelola data hotel, mengelola data rumah makan,

mengelola data user, dan fungsi yang berhubungan dengan user adalah fungsi

untuk view informasi hotel serta view informasi rumah makan. Gambar dari use

case diagram dapat dilihat pada Gambar 3.

Gambar 3. Use Case Diagram

Activity diagram memberikan visualisasi mengenai aliran tindakan dalam

sistem yang dibuat, percabangan tindakan yang terjadi, bagaimana tindakan awal

dari sistem dan bagaimana tindakan akhir yang terjadi pada sistem. Dalam

aktivitas proses yang terjadi pada aplikasi ini melibatkan user, admin dan

database. Proses Activity DiagramUser diawali dengan melakukan signup terlebih

dahulu jika belum memiliki ID. Saat proses signup, data dimasukkan kedalam

database tb_user. Jika sudah punya ID, user dapat langsung menuju ke halaman

login. Setelah login, user akan menuju ke menu utama. User dapat memilih menu

Hotel dan Rumah Makan, setelah memilih maka User akan mendapatkan

informasi dari apa yang dipilih sebelumnya (informasi yang didapat berupa nama,

lokasi, harga, share,rating, komentar). User dapat melihat letak lokasi yang

dihubungkan ke Google Map dan memberikan review. Gambar dari activity

diagram user dapat dilihat pada Gambar 4.

Mengelola Data Hotel

Mengelola Data Rumah Makan

Insert Data Rumah Makan Delete Data Rumah MakanUpdate Data Rumah Makan

Insert Data Hotel

Update Data Hotel

Delete Data Hotel

View Informasi Hotel

View Informasi Rumah Makan

Insert Review Rumah Makan

Insert Review Hotel

Mendaftar Member

Insert Data User

Delete Data User

Update Data User

View Data User

Mengelola Data User

Admin

Melihat Lokasi Rumah Makan

Melihat Lokasi Hotel

User

Share Status di Facebook

<<extend>>

<<extend>><<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<include>><<extend>>

<<extend>>

9

Gambar 4.Activity Diagram User

Sequence Diagram berfungsi untuk menggambarkan interaksi antara

setiap komponen baik didalam maupun disekitar sistem secara berurutan.

Sequence diagram menunjukkan urutan dari sebuah aksi dan memberikan

response untuk menghasilkan output tertentu. Gambar 5 menampilkan salah satu

contoh sequence diagram untuk insert.

Gambar 5. Sequence Diagram Insert

Class diagram merupakan diagram yang digunakan untuk menampilkan

beberapa class yang ada di dalam suatu sistem yang sedang dikembangkan.Class

diagram dibagi menjadi dua bagian yaitu: Database dan Sistem.Class

diagramDatabase memberikan gambaran mengenai informasi dari database

beserta tabel didalamnya dan relasi yang terjadi.Class Diagram Database pada

aplikasi ini dapat dilihat pada Gambar 6.

Sign Up

Punya ID?

Tidak

Login

Ya

Memberikan

Review

Input Data User

Menu Utama

Menu Rumah

Makan

Menu Hotel

Menampilkan

Informasi

Halaman

Review

Menampilkan

Review

Memasukkan

Data ke tb_user

Mengambil

Data Hotel

MengambiI Data

Makanan

Memasukkan

Data Review

DATABASESISTEM MOBILEUSER

: Admin : MerubahDataHotel : UpdateData() : tb_hotel

1: MenambahDataHotel( )

2: getData

3: OpenDb

4: InsertData()

5: CloseDb

6: ReturnDone()

7: ReturnDone()

10

Gambar 6. Class Diagram Database

Class Diagram Sistem memberikan gambaran mengenai class yang berada

didalam sistem, attribute, operasi atau fungsi yang digunakan dan hubungan relasi

yang terjadi diantara class. Class Diagram Sistem dapat dilihat pada Gambar 7.

Gambar 7. Class Diagram Sistem

Pada tahapan arsitektur aplikasi, sistem yang dibangun dapat

menggunakan Facebook service dan memanfaatkan teknologi JSON Web Service

sebagai sarana penghubung pengambilan data dari aplikasi mobile ke database

11

dan pengaksesan location based service. Arsitektur dari aplikasi ini dapat dilihat

pada Gambar 8.

Gambar 8. Arsitektur Sistem

Arsitektur sistem yang dibangun memiliki 6 (enam) komponen, yaitu

Mobile Phone, Internet, Web Service JSON, Facebook Service, Location Based

Service dan Database Server. Pengguna mobile phone harus terhubung dengan

internet terlebih dahulu untuk dapat menjalankan aplikasi TripMate Salatiga.

Pengguna mobile phone dapat menggunakan Facebook service untuk melakukan

share status pada halaman facebook pengguna. Pengguna juga dapat mengakses

lokasi dari dan menuju hotel atau tempat kuliner berdasarkan data dari database

server dengan menggunakan Location Based Service. Dalam proses pengambilan

dan pengiriman dari setiap data harus melalui webservice JSON.

4. Hasil dan Pembahasan

User dapat menggunakan aplikasi ini untuk melakukan pendaftaran ke

dalam aplikasi, melihat informasi dari hotel dan tempat kuliner yang berada di

Salatiga, melihat lokasi tempat, melakukan share media sosial, memberikan

komentar, melihat komentar dari user lain, mencari tempat dengan kata kunci

tertentu.

Aplikasi TripMate Salatiga v.1 dilengkapi dengan fitur location based

service (LBS) agar pengguna dapat dengan mudah mencari hotel atau tempat

kuliner yang ingin dituju dengan panduan peta yang ditampilkan. Aplikasi

TripMate Salatiga v.1 juga dilengkapi dengan fitur share ke media sosial agar

12

pengguna dapat dengan mudah berbagi informasi terkait hotel dan tempat kuliner

kepada teman-temannya yang terhubung lewat media sosial facebook.

Penambahan fitur-fitur tersebut untuk memenuhi tujuan awal penelitian

agar aplikasi TripMate Salatiga yang dibuat mampu menyediakan informasi

kepada pengguna secara informatif dan responsive, sehingga memudahkan

pengguna dalam menggunakan aplikasi ini.

Aplikasi mobile yang digunakan oleh user ini memiliki 7 interface yaitu

:interface login, signup, verification, menu utama, list, detail, map, share, dan

interface review.

User yang berhasil melakukan login, akan diarahkan pada interface menu

utama. Interface tersebut menyediakan tampilan yang berisi tiga menu utama,

yaitu: hotel, restaurant, about. Menu hotel berfungsi untuk melihat daftar hotel

yang terdapat di Salatiga, sementara menu restaurant berfungsi untuk melihat

daftar restoran, dan menu about berfungsi untuk melihat keterangan dari aplikasi.

Selain kedua fungsi itu, juga terdapat fungsi searchyang dapat mencari hotel /

restoran dengan memasukkan kata kunci. Gambar dari Interface Menu Utama

dapat dilihat pada Gambar 9.

Gambar 9 Interface Menu Utama

InterfaceList, yaitu interface yang berisi list data dari hotel / restoran, yang

dilengkapi juga dengan tombol search. Gambar Interface List dapat dilihat pada

Gambar 10.

13

Gambar 10 Interface List

Proses pengambilan data-data restoran pada Interface List diawali dengan

memanggil fungsi dengan menggunakan JSON untuk mengambil data yang

terdapat didalam database lalu menampungya kedalam Arraydan di encode oleh

JSON. Kode Program 3 merupakan potongan kode program pada PHP yang

dijalankan oleh JSON untuk melakukan proses pengambilan data.

Kode Program 3 Kode Select List

Kode baris ke 1-10 digunakan untuk menampung data yang diambil dari

database webserver kedalam sebuah array. Kode baris ke 13 berfungsi untuk

melakukan parsing data-data yang sudah ditampung di Array tersebut kedalam

format JSON.

Data yang diambil dari database webserver akan ditampilkan ke dalam

layout pada Eclipse. Data yang dikirim oleh JSON akan tampil apabila dilakukan

proses parsing terlebih dahulu. Kode Program 4 merupakan potongan kode

1. $response["tampilan"] = array();

2. while ($row = mysql_fetch_array($result)){

3. $tampilan = array();

4. $tampilan["id"] = $row["id"];

5. $tampilan["nama"] = $row["nama"];

6. $tampilan["gambar"] =

base64_encode($row["gambar"]);

7. $tampilan["totalRating"] = "".$row["totalRating"];

8. $tampilan["totalKomen"] = $row["totalKomen"];

9. $tampilan["posisi"] = $row["posisi"];

10. array_push($response["tampilan"], $tampilan);

11. } 12. 13. echo json_encode($response);

14

program pada Eclipse yang dijalankan untuk mengambil data dari JSON dan

melakukan parsing.

Kode Program 4Kode Parsing JSON

Kode baris ke 1-2 berfungsi untuk melakukan parsing data dari format

JSON agar dapat dibaca dan dimasukkan kedalam Bahasa pemrograman Java.

Baris ke 3-12 berfungsi untuk mengambil data dari hasil parsing format JSON

yang dikirimkan dari database webserver.

Dengan memilih hotel / restoran yang terdapat dalam list, maka aplikasi

akan menampilkan Interface Detail, yang berisi detail informasi seperti: nama,

gambar, alamat, telepon, harga, share, rating, grafik rating dan list komentar dari

hotel / restoran yang telah dipilih. Gambar dari Interface Detail dapat dilihat pada

Gambar 11 dan Gambar 12.

Gambar 11 Interface Detail 1

Gambar 12 Interface Detail 2

1. JSONParser jsonParser = new JSONParser();

2. JSONObject json =

jsonParser.makeHttpRequest("http://stevenjodie.esy.es/SelectListTampilan.

php", "POST", param);

3. JSONArray jsonArray = json.getJSONArray("tampilan");

4. for (int i = 0; i<jsonArray.length(); i++){

5. JSONObject c = jsonArray.getJSONObject(i);

6. item_details = new GetterSetterTampilan();

7. item_details.setId(c.optInt("id"));

8. item_details.setPosisi(c.optInt("posisi"));

9. item_details.setNama(c.optString("nama"));

10. byte[] bt =

Base64.decode(c.optString("gambar").getBytes(), 0);

11. item_details.setGambar(BitmapFactory.decodeByteArray(bt,

0, bt.length));

12. item_details.setTotalKomen(c.optInt("totalKomen"));

13. }

15

Aplikasi TripMate Salatiga juga dilengkapi dengan fasilitas Location

Based Service untuk menampilkan letak lokasi dari tempat User saat ini dan

lokasi dari tempat tujuan yang disambungkan kedalam Google Map. Dengan

menggunakan fungsi dari location based service, maka pengguna akan dapat

melihat letak secara detail dari tempat tujuan mereka yang ditunjukkan dengan

menggunakan marker berwarna merah, dan juga dapat melihat posisi pengguna

saat ini yang ditunjukkan dengan menggunakan marker berwarna biru. Gambar

Location Based Service dapat dilihat pada Gambar 13.

Gambar 13. Location Based Service

Potongan kode program untuk menampilkan Location Based Service dapat

dilihat pada Kode Program 5.

Kode Program 5 Location Based Service

Kode baris ke 1 berfungsi untuk membuat marker berdasarkan letak dari

tempat tujuan (ditentukan oleh longitude dan latitude). Kode baris ke 2 berfungsi

untuk mengganti warna marker dari tempat tujuan. Kode baris ke 4-5 untuk

melakukan pengaturan zoomdan animasi pada kamera.

1. MarkerOptions marker = new MarkerOptions().position(new LatLng(latitude,

longitude)).title("");

2. marker.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory

.HUE_RED));

3. googleMap.addMarker(marker);

4. CameraPosition cameraPosition = new CameraPosition.Builder().target(new

LatLng(latitude,longitude)).zoom(15).build();

5. googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosit

ion));

16

Aplikasi ini juga memanfaatkan kemampuan media sosial dan dapat

melakukan share status ke Facebook untuk melakukan post mengenai tempat yang

dikunjunginya. Dengan menggunakan fungsi share facebook maka hal tersebut

akan meningkatkan tingkat promosi pada hotel / restoran karena akan

dipublikasikan oleh orang-orang di dalam media social mereka masing-masing.

Gambar Facebok Share Status dapat dilihat pada Gambar 14 dan Gambar 15.

.

Gambar 14. Facebook Share Status 1 Gambar 15. Facebook Share Status 2

Kode Program 6 Facebook Share Status

1. private void postStatusUpdate() {

2. if (canPresentShareDialog) {

3.

4. FacebookDialog shareDialog = createShareDialogBuilderForLink().build();

5. uiHelper.trackPendingDialogCall(shareDialog.present());

6. } else if (user != null && hasPublishPermission()) {

7. final String message =

getString(R.string.status_update,user.getFirstName(), (new

Date().toString()));

8.

9. Request request =

Request.newStatusUpdateRequest(Session.getActiveSession(), message,

place, tags, new Request.Callback() {

10.

11. @Override

12. public void onCompleted(Response response) {

13. showPublishResult(message, response.getGraphObject(),

response.getError());

14. }

17

Kode baris ke 2-8 berfungsi untuk memunculkan share dialog yang

dipanggil dari facebook SDK. Kode baris ke 9 berfungsi untuk melakukan

Request untuk melakukan update status. Kode baris ke 12-14 berfungsi untuk

memunculkan hasil dari status yang di update.

Aplikasi Tripmate melakukan penyimpanan database pada webserver

yang membuat aplikasi ini dapat diakses secara online. Dengan menggunakan

JSON sebagai penghubung pertukaran data dari mobile ke webserver membuat

akses online menjadi bertambah cepat dan menghemat bandwidth. Aplikasi ini

merupakan aplikasi yang interaktif dan informatif, dengan menyediakan berbagai

informasi seperti letak tempat tujuan dengan Location Based Service, nomer

telepon, harga, share media sosial dan sistem rating.

5. Simpulan

TripMate Salatiga v.1 merupakan aplikasi mobile yang menyediakan

informasi hotel dan tempat kuliner di kota Salatiga bagi pengguna. Aplikasi ini

menyediakan informasi bagi pengguna secara informatif karena dilengkapi

location based service juga share lewat media social. Aplikasi ini juga

menyediakan informasi bagi pengguna secara responsif karena dapat diakses

dengan HP jenis apapun asalkan menggunakan Android. Pemanfaatan teknologi

JSON sebagai penghubung antara mobile phone dan webserver berjalan baik dan

memiliki kecepatan transfer yang cepat.

18

6. Pustaka

[1] Mayank Trivedi, Vishnu Suthar. 2011. “A plan Of M-library For Smt.

Hansa Metha Library:Astudy”. Volume 1 No. 3.International Journal of

Information and Communication Technology Research.

[2] Nazaruddin Safaat. 2012. “Pemrograman Aplikasi Mobile, Smartphone,

Dasar”. Jakarta : Gunadarma.

[3] Hardianto R, 2014. “Perangkat Lunak Informasi Wisata di Bandung dan

Sekitarnya Berbasis Android”. Volume 1, No. 1, Jurnal LPKIA.

[4] Saternos Casimir. 2014. “Client-Server Web Apps with JavaScript and

Java”. O’Reilly.

[5] Rizki Aditya, Widyawan, Sunarfri Bimo. 2013. “Perancangan Antarmuka

Layanan Informasi Wisata Kuliner di DIY Berbasis Web dan Mobile

Web”.

[6] Daeng Zainuddin, Nikentari Nerfita, Kurniawan Hendra. 2013. “M-

Library Berbasis Android Menggunakan Protokol JSON (Studi Kasus:FT-

UMRAH)”.

[7] Lee Wei-Meng. 2012. “Beginning Android 4 Application Development”.

Jakarta. Balai Pustaka.

[8] Edi Susanto. 2008. “Introducing MySQL & Visual Basic”. Connection

Strings.

[9] Syed A. Ahson, Ilyas Mohammad. 2012. “Mobile Web 2.0: Developing

and Delivering Services to Mobile Devices”. Taylor and Francis Group.

[10] Dunlu Peng, Lidong Cao, Wenjie Xu. 2012. “Using JSON for Data

Exchanging in Web Service Applications”.