perancangan aplikasi informasi hotel dan kuliner di kota...
TRANSCRIPT
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)[email protected], 2)[email protected]
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”.