Upload
vodang
View
225
Download
0
Embed Size (px)
Citation preview
2
1. Pendahuluan
Kebutuhan makanan merupakan suatu tindakan yang dilakukan oleh
manusia untuk menolak kelaparan dan melangsungkan hidupnya [1]. Tindakan
pemenuhan kebutuhan makanan dapat dilakukan dengan berbagai cara, salah
satunya yaitu dengan jalan melakukan pemesanan atau membeli makanan yang
disediakan oleh restoran.
Restoran merupakan suatu tempat atau bangunan yang diorganisasi secara
komersial yang menyelenggarakan pelayanan yang baik kepada semua tamunya
baik berupa makan dan minum [2].
Teknologi mobile saat ini mampu mengakses internet dan menggunakan
aplikasi yang bertujuan khusus. Salah satunya adalah aplikasi informasi geografis
atau aplikasi Mobile Map. Teknologi Mobile Map merupakan teknologi mobile
yang menggunakan media telepon genggam sebagai sarana untuk menampilkan
informasi geografis suatu wilayah [3].
Perancangan dan pembuatan aplikasi mobile map ini bertujuan untuk
mencari, memilih, serta menampilkan informasi lokasi dan informasi seputar
restoran yang berada di Salatiga. Untuk merancang dan membuat aplikasi mobile
map ini, digunakan metode prototyping sebagai metode perancangan sistem,
Flowchart Diagram, perancangan proses aplikasi dan perancangan interface
aplikasi.
Penerapan teknologi Flash Lite pada aplikasi mobile map bertujuan untuk
merepresentasikan informasi lokasi restoran dan informasi restoran pada
perangkat bergerak dengan visualisasi yang lebih dinamis dan menarik. Untuk
mendukung pembangunan aplikasi mobile map berbasis multimedia ini,
digunakan bahasa pemrograman Action Script, PHP, web server WampServer dan
database MySQL. Aplikasi mobile map berbasis multimedia ini kemudian
diimplementasikan pada perangkat bergerak menggunakan ponsel Nokia E63.
2. Tinjauan Pustaka
Penelitian terdahulu yang pernah dilakukan adalah penggunaan
SVG(Scalabeable Vector Graphic) dan XML(Extended Markup Language)
sebagai media penyimpanan informasi pada aplikasi mobile map. Teknologi yang
digunakan pada aplikasi mobile map ini adalah J2ME yang dirasakan memiliki
keunggulan dalam penerapannya pada perangkat yang lebih kecil dibanding
perangkat desktop. Aplikasi ini mengutamakan penggunaan SVG sebagai gambar
vektor dan XML sebagai media penyimpanan data, sehingga cocok digunakan
dalam membangun aplikasi peta khusus untuk perangkat mobile [4].
Pada penelilitan ini teknologi yang digunakan pada aplikasi mobile map ini
adalah Flash Lite yang dirasakan memiliki keunggulan menonjolkan sifat
interaktif yang dimiliki mobile phone dibandingkan dengan J2ME yang lebih sulit
dalam membangun sebuah aplikasi yang interaktif [5]. Teknologi Flash Lite tidak
membutuhkan coding yang banyak seperti J2ME sehingga pengembang aplikasi
yang menggunakan Flash Lite tidak harus mengetahui tentang pemrograman
3
berorientasi objek. Bahasa scripting yang digunakan dalam Flash Lite adalah
Action Script. Dalam penelitian ini keunggulan Flash Lite yang digunakan dalam
pengembangan aplikasi mobile map ini adalah Action Script Extensions,
Navigation dan Key Events, Network Access dan Connectivity, Scalable
Rendering Engine, Dynamic XML Data, dan lain sebagainya.
Action Script
Flash Lite sendiri disediakan Action Script dan Action Script Extensions
sebagai bahasa pemrograman yang digunakan dalam pengembangan aplikasi
perangkat bergerak sehingga mendukung peningkatan kemampuan aplikasi pada
perangkat bergerak dimana seperti diketahui bahwa perangkat bergerak memiliki
banyak kelemahan dibandingkan perangkat desktop. Penggunaan Action Script
Extensions memperbolehkan pengaksesan terhadap fitur-fitur device yang spesifik
seperti level dari baterai, kekuatan sinyal, juga memungkinkan pengiriman SMS
dan panggilan [3]. Sedangkan penggunaan Action Script digunakan untuk
mengerjakan tugas fungsional seperti perhitungan, perulangan, pengobjekan dan
dimana proses kegiatan atau event seperti tombol, memungkinkan interaktifitas
dinamis dalam aplikasi sehingga aplikasi dapat digunakan dan dijalankan dengan
baik. Pada penelitian ini penerapan action script dilakukan dengan menggunakan
kelas LoadVars. LoadVars memperbolehkan pengiriman variabel sebagai objek
ke suatu alamat yang telah ditentukan dan mengambil sejumlah variabel dari
alamat yang ditentukan menjadi objek. LoadVars juga memperbolehkan
pengiriman variabel yang lebih spesifik daripada semua variabel lainnya dimana
dapat membuat aplikasi menjadi lebih efisien. LoadVars menggunakan beberapa
metode antara lain Load(), Send(), SendAndLoad() yang digunakan untuk
berkomunikasi dengan server [5]. Dalam penelitian ini metode yang digunakan
adalah metode SendAndLoad karena dirasakan paling efisien dan dianjurkan
dalam penerapan pemrosesan data dan hubungan antara client-server.
Aplikasi mobile map ini menggunakan metode SendAndLoad yang
disediakan oleh Flash Action Script. Metode SendAndLoad sangat berguna dalam
pemrosesan data dari client ke server, karena Flash Lite tidak berinteraksi secara
langsung dengan server [5]. Tugas dari Flash Lite yang berada disisi pengguna
atau client adalah melakukan permintaan dengan cara mengirimkan sejumlah
variabel untuk diproses pada sisi server atau hanya melakukan request. Hasil yang
diberikan berupa string atau teks dalam hal ini data yang akan disimpan pada
XML sebagai media penyimpanan sementara. Data tersebut digunakan sebagai
informasi yang dibutuhkan oleh aplikasi untuk ditampilkan ke pengguna. String
atau teks tersebut dihasilkan oleh server tetapi tidak terjadi pertukaran secara
langsung antara perintah server dengan Flash. Dengan metode SendAndLoad,
Flash mengirimkan string ke sebuah halaman dinamis seperti PHP atau ASP yang
memiliki sejumlah perintah untuk berinteraksi dengan server sehingga
menghasilkan suatu halaman baru yang dinamis. Dari halaman inilah diperoleh
string yang merupakan data yang dikirim kembali ke Flash dalam hal ini aplikasi.
4
Dynamic XML Data
Penggunaan kelas XML yang disediakan oleh Action Script merupakan hal
terpenting pada aplikasi mobile map ini karena membuat aplikasi mobile map ini
menjadi lebih dinamis dalam penyajian data atau yang dikenal dengan Dynamic
XML Data[5]. Flash Lite mendukung Eksternal XML data yakni seperti
mendukung loading dan parsing dari data XML dalam konten yang dibuat dengan
teknologi Adobe Flash menggunakan XML yang sama sebagai metode
penanganan Flash Player. Salah satu keunggulan utama penggunaan XML adalah
untuk menyimpan informasi ini dalam cara hirarkis. Oleh karena itu, dokumen
XML dapat dijelaskan sebagai suatu struktur pohon. Untuk menggambarkan
hubungan yang terdapat pada struktur pohon maka pohon terdiri dari Node Akar
(Root), Node Orangtua (ParentNodes), dan Node Anak (ChildNodes) [6].
Kelas XML memiliki kemampuan sama halnya dengan kelas LoadVars
yakni dalam pengambilan dan pengiriman data sebagai objek. Beberapa properti
dari kelas XML Flash Lite yang digunakan dalam penelitian ini yakni childNodes,
firstChild, dan NodeValue. ChildNodes merupakan array dari anak objek (Node
Anak) dari suatu XML yang ditentukan. Setiap elemen pada array merupakan
referensi untuk XML objek yakni menampilkan anak Node. FirstChild merupakan
bagian dari Node Orang Tua (ParentNodes) sedangkan NodeValue menyatakan
nilai dari Node yang berada pada setiap element dari Node Anak (ChildNodes)[5].
Penggunaan data eksternal XML pada aplikasi ini bertujuan untuk
menyajikan data restoran yang lebih dinamis baik berupa data lokasi, menu, dan
lain sebagiannya. Proses penyajian data dimulai dengan mengambil NodeValue
dari suatu XML yang terlebih dahulu terisi oleh sejumlah tag XML yang mewakili
parentNode, ChildNode dan NodeValue. Nilai dari NodeValue kemudian
dimasukkan pada array dimana proses ini diulang secara berkala sampai dengan
nilai NodeValue terakhir. Data yang telah tersimpan pada array kemudian
ditampilkan sebagai data yang diperlukan oleh pengguna. Data tersebut
ditampilkan atau diwakili oleh sebuah movieClip namun penggunaan properti
movieClip dari setiap data yang tersimpan pada array adalah berbeda sehingga
setiap data memiliki identitasnya masing-masing.
XML sendiri dibuat untuk menghubungkan interoperabilitas antar software
dari platform yang berbeda[7]. Untuk mengakses informasi dalam format XML
ini, digunakan tool yang bernama web service dalam penelitian ini menggunakan
WampServer 1.7.2. Hal ini dapat dilihat pada gambar berikut.
5
Gambar 1 Hubungan antara Teknologi Flash, XML dan Database [7]
Pada Gambar 1, hubungan antara beberapa teknologi yang digunakan
dalam penelitian ini. Teknologi Flash dalam hal ini Flash Lite bertindak sebagai
bagian yang mempersiapkan tampilan berupa Peta, Data Object dalam hal ini
restoran, dan beberapa Layanan seperti Informasi Akusisi dan Komunikasi
sebagai layanan yang diperlukan dalam layanan teknologi mobile map.
Kemampuan Flash Lite menggunakan komponen Graphic, MovieClip, Button,
dan Text sebagai bagian visual untuk membuat suatu pemetaan serta didukung
dengan Dynamic Data Processing, Device Capabilities, Network, dan Action
Script mampu menciptakan aplikasi yang mampu berinteraksi dengan komponen
perangkat bergerak ponsel sehingga mampu memproses dan menyajikan data
yang dibutuhkan oleh pengguna. Hal ini menjelaskan bahwa Flash Lite dapat
membentuk suatu aplikasi pemetaan yang diadaptasikan ke dalam perangkat
bergerak pada penelitian ini menggunakan ponsel bertipe Nokia E63 sehingga
menjadi aplikasi mobile map berbasis teknologi Flash Lite. Aplikasi mobile map
berbasis teknologi Flash Lite ini kemudian berinteraksi dengan Web Server untuk
melakukan pemrosesan data dari server ke user. Koneksi jaringan sangat
dibutuhkan dalam interaksi ini, sehingga memungkinkan Web Server memeriksa
data yang diperlukan ke Local File Server maupun Database Server kemudian
mengirimkan kembali hasil pencarian data tersebut dalam bentuk String. String
tersebut kemudian dimasukkan pada suatu file XML dimana data yang terdapat
file XML eksternal tersebut akan dipanggil dan diproses oleh Flash Lite untuk
ditampilkan kepada user.
Multimedia
Multimedia merupakan kombinasi teks, seni, suara, gambar, animasi, dan
video yang disampaikan dengan komputer atau dimanipulasi secara digital dan
dapat disampaikan dan/atau dikontrol secara interaktif [8].
6
Gambar 2 Elemen Multimedia [9]
Multimedia terbentuk dari 6 elemen utama [10] yaitu : Teks merupakan
dasar dari pengolahan kata dan informasi berbasis multimedia. Dalam
kenyataannya multimedia menyajikan informasi kepada audiens dengan cepat,
karena tidak diperlukan membaca secara rinci dan teliti. Grafik merupakan
representasi objek yang berbentuk dua dimensi atau tiga dimensi yang digunakan
untuk memperjelas penyampaian informasi. Penyajian audio atau suara
merupakan cara lain untuk lebih memperjelas pengertian suatu informasi. Video
merupakan elemen multimedia paling kompleks karena penyampaian infomasi
yang lebih komunikatif dibandingkan gambar biasa. Animasi merupakan
pembentukan gerakan dari berbagai media atau objek yang divariasikan dengan
gerakan transisi, efek-efek, serta suara yang selaras dengan gerakan animasi
tersebut. Interaktif Link merupakan penggunaan objek yang menyebabkan
program melakukan perintah tertentu. Interaktif Link dibutuhkan untuk
menggabungkan beberapa elemen multimedia sehingga menjadi informasi yang
terpadu.
3. Metode Perancangan Sistem
Metode perancangan sistem yang digunakan pada aplikasi ini adalah
system prototyping. Prototyping adalah proses yang digunakan untuk membantu
pengembang perangkat lunak dalam membentuk model dari perangkat lunak yang
akan dibuat. Metode ini dipilih karena prototype yang dibuat dapat digunakan
untuk mengelola kembali kebutuhan dari perangkat lunak yang akan
dikembangkan, sehingga pengembangan perangkat lunak tidak harus merancang
lagi semua dari awal.
Gambar 3 Metode Perancangan Sistem Prototyping (Sommerville, 2000)
7
Prototyping model dimulai dengan pengumpulan kebutuhan sistem dalam
hal ini penulis melakukan studi kepustakaan mengenai hal-hal yang berhubungan
dengan teknologi Flash Lite dan Mobile Map, kebutuhan user terhadap restoran
yang berada di Salatiga menurut Dishubkombudpar, DPPKAD dan Persatuan
Hotel dan Restoran Indonesia (PHRI), data peta Salatiga, daftar restoran dan
informasi restoran yang berada di Salatiga serta perangkat lunak dan keras yang
digunakan untuk pengembangan aplikasi, kemudian dilanjutkan dengan
perancangan aplikasi, dilanjutkan dengan pembuatan aplikasi, dan evaluasi
prototyping sebagai langkah akhir dari bahasa protoryping model.
Dalam penelitian ini digunakan Flowchart adalah bagan yang
menggambarkan aliran dokumen dalam suatu sistem informasi. Flowchart
menggambarkan diagram dengan simbol-simbol grafis yang menyatakan aliran
proses yang menampilkan langkah-langkah yang disimbolkan dalam bentuk
kotak, beserta urutannya dengan menghubungkan masing masing langkah tersebut
menggunakan tanda panah [11].
Aplikasi mobile map ini dibuat untuk dua user dengan hak akses yang
berbeda-beda yakni Pengguna dan Operator. Kebutuhan user Pengguna adalah
mencari dan melihat lokasi serta informasi restoran yang berada di Salatiga.
Informasi restoran terdiri dari informasi umum restoran, menu restoran, fasilitas
dan event yang diselenggarakan oleh restoran. Kebutuhan user Operator adalah
melakukan pengelolaan dan pemeliharaan informasi kepada pengguna aplikasi
mobile map pencarian restoran Salatiga.
Flowchart Pengguna
Flowchart Pengguna menjelaskan beberapa alur proses yang terjadi pada
penggunaan sistem aplikasi dari sisi Pengguna. Flowchart Pengguna dapat dibagi
menjadi beberapa proses alur yaitu :
1. Flowchart Login
Flowchart Login pada aplikasi Pengguna ditunjukkan pada Gambar 4.
Mulai
Menampilkan
Halaman Login
Input
Username
dan
password
Selesai
Valid ?
Menampilkan
Tampilan Menu
Utama Program
Ya
Tidak
Gambar 4 Flowchart Login
8
Pada Gambar 4, Pengguna akan berhadapan dengan tampilan Login
sebagai halaman yang pertama kali ditampilkan saat aplikasi dijalankan. Pada
proses ini, pengguna harus menginputkan username dan password yang benar.
Bila Pengguna belum memiliki akun untuk mengakses program lebih lanjut, maka
Pengguna harus mengisi form pendaftaran pada tampilan Daftar Akun Baru. Input
pendaftaran akan disimpan ke dalam database. Pengguna yang memasukan
username dan password yang benar akan masuk pada bagian program selanjutnya
yaitu Menu Utama.
2. Flowchart Menu Peta
Flowchart Menu Peta pada aplikasi Pengguna dapat ditunjukkan pada
Gambar 5. Start
Memilih
Menu Peta
Menampilkan Peta
Operasi
Interaksi
Operasi
Menu Tidak Tidak
Geser Peta
Ya
Ya
Tidak
Cari JalanYa
Ya
Input Teks
Menampilkan
Daftar Jalan
Pilih Jalan
Cari Restoran
Tidak
Input Teks
Menampilkan
Daftar Restoran
Pilih
Restoran
Ya
Mengubah
Tampilan
Peta
Tidak
Menampilkan
Informasi Restoran
Ya
Finish
Operasi Objek
Tidak
Menggeser
Peta
Zoom In/
Out Peta
Gambar 5 Flowchart Menu Peta
Pada Gambar 5, Pengguna akan berhadapan dengan tampilan Peta setelah
memilih pilihan Peta pada menu Utama. Program akan menampilkan peta Salatiga
dan objek restoran pada koordinat tertentu pada peta. Operasi penggunaan peta
terbagi menjadi 3 bagian yaitu Operasi Interaksi, Operasi Objek, dan Operasi
Menu. Operasi Interaksi berkaitan dengan penggunaan peta seperti pembesaran
atau pengecilan peta dan penggeseran peta. Operasi Objek berkaitan dengan
penggunaan objek restoran secara langsung. Bila pengguna memilih suatu
9
restoran yang berada pada peta, maka pengguna dapat melihat informasi dari
restoran tersebut pada tampilan yang menampilkan informasi restoran. Operasi
Menu berkaitan dengan pencarian jalan, pencarian restoran dan pengaturan
tampilan peta. Bila Pengguna melakukan pencarian restoran, maka hasil pencarian
akan ditampilkan dalam bentuk daftar kemudian pengguna akan memilih restoran
yang ingin diinginkan. Bila Pengguna melakukan pencarian jalan, maka hasil
pencarian berupa lokasi dimana jalan dicari berada pada peta.
3. Flowchart Pencarian
Flowchart Pencarian pada aplikasi Pengguna ditunjukkan pada Gambar 6.
Start
Finish
Input Teks
Pencarian
Menampilkan Tampilan Pencarian
Memilih Menu
Pencarian
Ditemukan ?
Tidak
Memeriksa Teks
Pencarian
Menampilkan
Daftar Hasil
Pencarian
Menampilkan
Informasi Objek
Memilih Objek
Hasil
PencarianMencari Lagi ? Tidak
Ya
Ya
Gambar 6 Flowchart Pencarian
Pada Gambar 6, tampilan Pencarian akan ditampilkan setelah Pengguna
memilih Menu Pencarian. Pengguna menginputkan teks yang dicari. Program
akan memeriksa karakter atau string dari teks yang diinputkan oleh Pengguna,
kemudian mencocokannya dengan data yang tersimpan pada database. Bila tidak
ditemukan, maka program akan menampilkan pesan bahwa data yang dicari tidak
ditemukan sehingga pengguna harus melakukan pencarian kembali. Bila data
yang dicari ditemukan, maka program akan menampilkan daftar hasil pencarian
kepada Pengguna. Bila Pengguna ingin melakukan pencarian lagi maka pengguna
kembali menginputkan teks untuk melakukan pencarian. Bila tidak, Pengguna
memilih objek dari hasil pencarian tersebut kemudian program akan menampilkan
informasi dari objek terpilih.
10
4. Flowchart Informasi Restoran
Flowchart Informasi Restoran pada aplikasi Pengguna ditunjukkan pada
Gambar 7.
Start
Menampilkan Daftar
Restoran
Memilih Menu
Informasi
Memilih
Restoran
Menampilkan Tampilan
Informasi Restoran
Pilih Menu
Restoran
Pilih Informasi
Restoran
Pilih Fasilitas
RestoranTidak Tidak
Menampilkan
Menu Restoran
Menampilkan
Informasi Umum
Restoran
Menampilkan
Daftar Fasilitas
Restoran
YaYaYa
Pilih Menu
Restoran
Lihat Informasi
Lagi ?
Menampilkan
Informasi Menu
Lihat Menu Lagi
?
Ya
FinishTidak
Tidak
Pilih
Fasilitas
Restoran
Menampilkan
Informasi Fasilitas
Lihat Fasilitas
Lagi ?
Tidak
Ya
Ya
Gambar 7 Flowchart Informasi Restoran
Pada Gambar 7, tampilan Informasi Restoran akan ditampilkan bila
Pengguna memilih Menu Informasi. Daftar restoran akan ditampilkan kepada
Pengguna untuk dipilih. Informasi dari restoran berupa Menu, Informasi Umum
Restoran, dan Fasilitas Restoran. Menu Restoran berkaitan dengan makanan dan
minuman yang disediakan oleh restoran. Data menu tersimpan pada database.
Daftar menu akan ditampilkan kepada Pengguna untuk dipilih. Informasi dari
Menu terpilih berupa nama, harga, gambar, dan deskripsi singkat mengenai menu.
Fasilitas Restoran berkaitan dengan fasilitas yang tersedia di suatu restoran. Data
fasilitas tersimpan pada database yang akan ditampilkan dalam bentuk daftar
fasilitas. Pengguna akan memilih fasilitas yang diinginkan. Informasi Restoran
berkaitan dengan informasi umum mengenai restoran. Data informasi umum
restoran tersimpan pada database yang akan ditampilkan pada tampilan informasi
umum restoran. Informasi umum restoran berupa nama, alamat, nomor telepon,
jenis, dan deskripsi singkat dari restoran terpilih. Bila Pengguna ingin melihat
11
informasi restoran lainnya, maka Pengguna harus kembali memilih restoran yang
diinginkan.
Flowchart Operator
Flowchart Operator menjelaskan beberapa alur proses yang terjadi pada
penggunaan sistem aplikasi dari sisi Operator. Flowchart Operator dapat
dijelaskan pada Gambar 8.
Start
Menampilkan
Menu Utama
Input Username dan
Password Admin
Valid ?
Periksa Akun Operator
ya
Tidak
Edit Akun ? Edit Jalan ? Edit Restoran ? Edit Menu ? Edit Fasilitas ?Edit Event ?
Menampilkan
Tampilan Akun
Menampilkan
Tampilan Jalan
Menampilkan
Tampilan Restoran
Menampilkan
Tampilan Event
Menampilkan
Tampilan Menu
Menampilkan
Tampilan Fasilitas
Tidak Tidak Tidak Tidak Tidak
YaYaYaYaYaYa
Manipulasi Data
Menyimpan
Data
Edit Data Lagi ?
Ya
Finish
Tidak
Gambar 8 Flowchart Operator
Pada Gambar 8, tampilan Menu Utama aplikasi mobile map Operator akan
ditampilkan bila Operator memasukan username dan password yang valid. Bila
tidak valid, maka Operator tidak diizinkan melanjutkan ke bagian program
berikutnya. Pada tampilan Menu Utama program tersedia pilihan untuk
melakukan manipulasi. Operator dapat memanipulasi data jalan, restoran, menu,
fasilitas, event, dan akun operator. Setiap manipulasi terdiri dari proses peng-
input-an, peng-update-an, dan penghapusan data. Data yang telah dimanipulasi
disimpan ke dalam database. Bila Operator ingin melakukan manipulasi data lagi,
maka Operator dapat memilih menu manipulasi kembali. Bila tidak maka proses
manipulasi berakhir.
12
ERD (Entity Relationship Diagram)
Entity Relationship Diagram merupakan diagram yang menjelaskan
hubungan antara tabel atau entitas yang ada pada Basis Data Relasional. Entity
Relationship Diagram digunakan untuk mengkonstruksikan model data
konseptual, memodelkan struktur data dan hubungan antar data dan
mengimplementasikan basis data secara logika maupun secara fisik dengan
Database Management system. Entity Relationship Diagram dapat membantu
dalam menjawab persoalan tentang data yang diperlukan dan bagaimana data
tersebut saling berhubungan Relasi antar tabel dari database sistem ini dapat
digambarkan dalam Gambar 9.
Resto
PK id_resto
nama_resto
telepon_resto
info_resto
kor_x_kecil_resto
kor_y_kecil_resto
kor_x_besar_resto
kor_y_besar_resto
keterangan_alamat
rating
foto_restoran
FK1 id_jalan_salatiga
FK2 id_fasilitas
FK3 id_kategori
admin_mob_resto
PK id_admin_resto
admin_nama
admin_pass
admin_email
daftar_member
PK id_list_member
nama_member
email_member
pass_member
foto_member
event_resto
PK id_event
nama_event
informasi_event
tanggal_event
FK1 id_resto
fasilitasresto
PK id_fasilitas
nama_fasilitas
informasi_fasilitas
jalansalatiga
PK id_jalan_salatiga
nama_jalan_salatiga
kor_x_jalan
kor_y_jalan
jenisresto
PK id_kategori
nama_jenis_resto
ket_jenis_resto
member
FK1 id_list_member
komentar_member
tanggal_komentar
makanan
PK id_makanan
nama_makanan
harga_makanan
info_makanan
foto_makanan
FK1 id_resto
minuman
PK id_minuman
nama_minuman
harga_minuman
info_minuman
FK1 id_resto
foto_minuman
Gambar 9 Entity Relationship Diagram
Pada Gambar 9 menunjukkan hubungan antara entitas yang berbeda
dimana hanya terdapat satu Operator (admin) sistem di dalam aplikasi mobile map
restoran ini. Operator dapat mengatur data n restoran, n jalan, n jenis restoran, n
makanan, n minuman, n event, dan n fasilitas. Relasi yang terjadi antara lain, 1
restoran dapat memiliki n makanan, n fasilitas, atau n minuman. Restoran hanya
dapat memiliki 1 jalan dan jenis restoran. Namun 1 Jalan atau 1 Jenis Restoran
dapat dimiliki oleh n restoran.
13
Hasil dan Pembahasan
Aplikasi mobile map restoran ini dibangun dengan menggunakan bahasa
pemrograman Action Script 2.0. Berikut ini adalah spesifikasi dari pembuatan
sistem mobile map restoran, yakni: Sistem Operasi Windows XP Profesional SP 2,
Adobe Flash CS4 Professional dengan bahasa pemrograman Action Script, Web
Server yang digunakan WampServer 1.7.2 dan basis data yang digunakan adalah
MySQL version 5.0. Standar ukuran dimensi layar ponsel yang ideal dalam
penggunaan aplikasi mobile map pencarian restoran secara normal pada perangkat
bergerak adalah ponsel dengan resolusi 320 x 240 pixel atau lebih. Sistem ini
dibuat secara terpisah antara operator dan pengguna.
Sistem Operator
Implementasi ini berupa tampilan halaman Menu utama dari sistem
Operator. Tampilan ini memiliki beberapa button yang berfungsi untuk
menampilkan halaman pengeditan data sesuai dengan bagian data yang ingin
diproses.
Gambar 10 Tampilan Menu Utama Operator
Pada Gambar 10, gambar tampilan Menu Utama menampilkan beberapa
button yang mewakili setiap halaman pengeditan data. Proses manipulasi atau
pengeditan data berupa proses penginputan data baru, pembaharuan dan
penghapusan data yang berada pada database. Data yang dapat dimanipulasi
antara lain data Restoran, Menu, Event, Fasilitas dan Akun Operator atau admin.
Pembaharuan atau peng-update-an data restoran dapat ditunjukkan pada
Gambar 11.
14
Gambar 11 Tampilan Peng-update-an Data Restoran
Pada Gambar 11, gambar tampilan Peng-update-an Data Restoran
menampilkan beberapa Input Teks yang mewakili informasi dalam bentuk teks.
Pada tampilan ini terdapat button yang memiliki fungsi yang berbeda-beda.
Button Update berfungsi untuk mengirimkan variabel-variabel dari setiap Input
Text yang telah terisi ke suatu halaman dinamis kemudian disimpan atau
diperbaharui ke dalam database. Proses pengiriman data dapat terlihat pada Kode
Program 1.
Kode Program 1 Perintah Pengiriman data menggunakan SendAndLoad()
1. ...
2. var UpdateNewResto:LoadVars = new LoadVars();
3. UpdateNewResto.IdResto = DataRestoran[0];
4. UpdateNewResto.NamaResto = DataRestoran[1];
5. UpdateNewResto.TeleponResto = DataRestoran[2];
6. UpdateNewResto.AlamatResto = DataRestoran[3];
7. UpdateNewResto.KeteranganAlamatResto = DataRestoran[4];
8. UpdateNewResto.TipeResto = DataRestoran[5];
9. UpdateNewResto.InfoResto = DataRestoran[6];
10. UpdateNewResto.LokasiX = DataRestoran[7];
11. UpdateNewResto.LokasiY = DataRestoran[8];
12. UpdateNewResto.RestoX = DataRestoran[9];
13. UpdateNewResto.RestoY = DataRestoran[10];
14. UpdateNewResto.Rating = DataRestoran[11];
15. UpdateNewResto.NamaRestoLama = DataRestoran[12];
16. UpdateNewResto.sendAndLoad("http://"+_root.LocalHost+"/XML/Admin_R
estoUpdate.php",UpdateNewResto,"post");
17. ...
15
Pada Kode Program 1, baris 3-15 merupakan sejumlah variabel yang akan
dikirimkan ke halaman dinamis Admin_RestoUpdate.php. Pengiriman data
menggunakan metode sendAndLoad() yang merupakan metode yang dimiliki oleh
Kelas LoadVars. Metode SendAndLoad() yang digunakan untuk berkomunikasi
dengan server. Metode sendAndLoad() memperbolehkan pengiriman variabel
yang lebih spesifik daripada semua variabel lainnya dimana dapat membuat
aplikasi menjadi lebih efisien. Variabel yang dikirimkan berupa IdResto,
NamaResto, TeleponResto, AlamatResto, KeteranganAlamat, TipeResto,
InfoResto, LokasiX, LokasiY, RestoX, RestoY, Rating dan NamaRestoLama
yang nilai dari masing-masing variabel berasal dari Input Text yang berada pada
tampilan Peng-update-an Restoran.
Sistem Pengguna
Bila Pengguna berhasil melakukan Login, maka user langsung menuju ke
tampilan berikutnya yaitu tampilan menu utama aplikasi.
Gambar 12 Tampilan Halaman Menu Utama
Gambar 12 menunjukkan bahwa halaman menu utama akses Pengguna
yang menyediakan beberapa menu pilihan bagi user dalam menggunakan aplikasi
mobile map restoran ini. Pada tampilan ini terdapat beberapa menu seperti Peta,
Restoran, Favorite dan Pencarian. Bila Pengguna memilih menu Peta, maka
Pengguna akan masuk pada halaman Peta yang ditunjukkan pada Gambar 13.
Gambar 13 Tampilan Penggunaan Peta
16
Pada Gambar 13 menjelaskan tampilan Peta sebagai sarana pencarian dan
pemilihan restoran yang terdapat pada peta kota Salatiga. Pada tampilan ini
restoran yang tersimpan pada database akan ditampilkan pada peta berupa movie
clip. Setiap movie clip mewakili 1 restoran yang memiliki koordinat sehingga
dapat ditampilkan pada peta. Perintah menampilkan Restoran dapat ditunjukkan
pada Kode Program 2.
Kode Program 2 Menampilkan Restoran
Kode Program 2 dapat baris 2 dijelaskan bahwa beberapa movie clip yang
akan mewakili sebuah restoran terbuat dari suatu movie clip dari library yakni
“RestoIcon” dengan property “_x” dan “_y” yang berfungsi sebagai koordinat
setiap restoran pada peta. “_root.PetaOffline” merupakan movieClip yang
berfungsi sebagai Peta. RestoIcon akan terletak pada PetaOffline. Pada baris 3
sampai 4 setiap nama restoran akan tersimpan ke dalam memori.
Selain penggunaan peta, pencarian restoran merupakan bagian terpenting
dari aplikasi ini. Tampilan Pencarian dapat ditunjukkan pada Gambar 14.
Gambar 14 Tampilan Search Restoran
Gambar 14 merupakan tampilan pencarian terhadap restoran yang berada
di Salatiga. Tampilan ini memiliki satu InputText dan satu Button untuk
melakukan pencarian berdasarkan nama restoran yang tersimpan pada database.
Perintah yang digunakan untuk melakukan pencarian string ditunjukkan pada
Kode Program 3.
1 ...
2 _root.PetaOffline.attachMovie("RestoIcon","RestoIcon"+i,i,{_x:KorRest
oX1[i], _y:KorRestoY1[i]});
3 _root.PetaOffline["RestoIcon"+i].title = NamaResto[i];
4 _root.PetaOffline["RestoIcon"+i].Resto.Nama = NamaResto[i];
5 ...
17
Kode Program 3 Penerapan Wider Case pada Pencarian Restoran
Kode Program 3 menunjukkan proses pencarian yang akan dikerjakan oleh
halaman dinamis PHP dimana penginputan karakter dibutuhkan untuk
melakukan pencarian terhadap nama restoran. Karakter tersebut mewakili nama
restoran dimana karakter-karakter (string) tersebut akan dikirimkan sebagai
variabel untuk diperiksa oleh server pada database. Pencarian yang dilakukan
menggunakan metode wider case yakni pencarian string yang dilakukan dengan
cara mencocokkan string yang berada pada sebuah kalimat atau kata yang
tersimpan pada database[11]. Penerapan metode wider case terlihat pada sintak
SQL pada baris 5 berupa penulisan sintak “ like „%$NamaResto%‟ ” yang
menggunakan variable $NamaResto untuk mencari nama restoran. String yang
terkandung bisa terdapat pada bagian depan kata, bagian tengah kata maupun
bagian belakang kata sehingga menghasilkan hasil pencarian yang dicari.
Bila pencarian berhasil, maka informasi restoran akan ditampilkan.
Tampilan informasi umum restoran ditunjukkan pada Gambar 15.
1 require 'HapusXML.php';
2 require 'MysqlConnection.php';
3
4 $NamaResto = $_POST['CariNamaResto'];
5 $SearchResto = "Select * from resto where nama_resto like
'%$NamaResto%'";
6 $sql = mysql_query($SearchResto) or die ("Database Unreachable");
7 $sqlRow = mysql_affected_rows();
8 while($dataresto = mysql_fetch_array($sql)) {
9 $NamaResto = $dataresto['nama_resto'];
10 $XKorResto = $dataresto['kor_x_kecil_resto'];
11 $YKorResto = $dataresto['kor_y_kecil_resto'];
12 if($sqlRow>1) {
13 echo"&Resto=banyak";
14 $fpResto = fopen("KordinatRestoran.xml", "a+");
15 $fwResto = fwrite($fpResto, "<menu>
16 <NamaResto>".$NamaResto."</NamaResto>
17 <kordinatRestoX1>".$XKorResto."</kordinatRestoX1>
18 <kordinatRestoY1>".$YKorResto."</kordinatRestoY1></menu>\n");
19 fclose($fpResto);}
20 else if($sqlRow == 1) {
21 echo"&Resto=tunggal";echo"&NamaResto=$NamaResto";
22 echo"&KorXResto=$XKorResto";echo"&KorYResto=$YKorResto";
23 }else {
24 echo"&Resto=TidakAda";echo 'tidak ada yang dicari';
25 }}
26 mysql_close();
18
Gambar 15 Tampilan Search Restoran
Pengujian Beta
Pengujian beta dilakukan di lingkungan Pengguna tanpa kehadiran pihak
pembangun aplikasi. Kuisioner pengujian beta merupakan media yang digunakan
pengguna aplikasi mobile map pencarian restoran kota Salatiga untuk memberikan
penilaian terhadap aplikasi yang dibangun.
Kuisioner terdiri dari 5 pertanyaan menggunakan skala likert yaitu skala
dari 1 sampai 5 dengan Pertanyaan Beta Testing (PBT) adalah sebagai berikut :
1. Apakah Anda tertarik dengan Aplikasi Mobile Map Pencarian Restoran
Kota Salatiga berbasis Multimedia ini?
2. Apakah tampilan atau interface Aplikasi Mobile Map Pencarian Restoran
Kota Salatiga berbasis Multimedia ini mudah dimengerti?
3. Apakah Aplikasi Mobile Map Pencarian Restoran Kota Salatiga berbasis
Multimedia ini dapat menyajikan informasi restoran yang dibutuhkan oleh
Anda selaku Pengguna?
4. Apakah Aplikasi Mobile Map Pencarian Restoran Kota Salatiga berbasis
Multimedia ini mudah digunakan?
5. Apakah fitur-fitur dari Aplikasi Mobile Map Pencarian Restoran Kota
Salatiga berbasis Multimedia ini membantu anda dalam melakukan
eksplorasi dan pencarian lokasi sebuah restoran?
Hasil pengujian beta menggunakan media kuisioner dari 10 responden
adalah sebagai berikut :
Tabel 1 Hasil Pengujian Beta Testing
No Pertanyaan Responden Total
Sangat Tertarik Cukup Kurang Tidak
1 PBT 1 2 5 3 0 0 10
2 PBT 2 1 7 2 0 0 10
3 PBT 3 1 6 3 0 0 10
19
4 PBT 4 6 4 0 0 0 10
5 PBT 5 2 3 5 0 0 10
Total 12 25 13 0 0 50
Pada Tabel 1, hasil PBT 1 dapat disimpulkan bahwa sebanyak 2 responden
atau 20% mengatakan sangat tertarik, 5 responden atau 50% mengatakan tertarik,
dan 3 responden atau 30% mengatakan cukup tertarik menggunakan aplikasi
mobile map pencarian restoran. Sehingga ketertarikan pengguna menggunakan
aplikasi mobile map pencarian restoran adalah baik.
Hasil PBT 2 menjelaskan bahwa sebanyak 1 responden atau 10%
mengatakan sangat mudah, 7 responden atau 70% mengatakan mudah, dan 2
responden atau 20% mengatakan cukup mudah mengerti cara penggunaan aplikasi
mobile map pencarian restoran. Sehingga dapat disimpulkan bahwa keseluruhan
interface aplikasi mobile map pencarian restoran mudah dimengerti.
Hasil PBT 3 menjelaskan bahwa sebanyak 1 responden atau 10%
mengatakan sangat setuju, 6 responden atau 60% mengatakan setuju, dan 3
responden atau 30% mengatakan cukup setuju bahwa aplikasi mobile map
pencarian restoran dapat menyajikan informasi yang dibutuhkan pengguna.
Sehingga dapat disimpulkan bahwa keseluruhan aplikasi mobile map pencarian
restoran sudah dapat menyajikan informasi yang dibutuhkan oleh pengguna.
Hasil PBT 4 menjelaskan bahwa sebanyak 6 responden atau 60%
mengatakan sangat mudah dan 4 responden atau 40% mengatakan mudah
menggunakan aplikasi mobile map pencarian restoran. Sehingga dapat
disimpulkan bahwa keseluruhan aplikasi mobile map pencarian restoran mudah
untuk digunakan.
Hasil PBT 5 menjelaskan bahwa dengan menggunakan aplikasi mobile
map pencarian restoran sebanyak 2 responden atau 20% mengatakan sangat
membantu, 3 responden atau 30% mengatakan membantu, dan 5 responden atau
50% mengatakan cukup membantu dalam melakukan eksplorasi dan pencarian
lokasi sebuah restoran. Sehingga dapat disimpulkan bahwa keseluruhan aplikasi
mobile map pencarian restoran membantu dalam melakukan eksplorasi dan
pencarian lokasi sebuah restoran.
Berdasarkan hasil perhitungan dari pengujian beta pada Tabel 1, dapat
disimpulkan bahwa pembangunan aplikasi mobile map berbasis multimedia
menggunakan teknologi Flash Lite telah sesuai dengan tujuan dan rumusan
masalah yaitu aplikasi mobile map pencarian restoran berbasis multimedia dapat
menginformasikan lokasi dan informasi restoran yang berada di kota Salatiga
pada perangkat bergerak bagi pengguna.
20
4. Simpulan
Berdasarkan pembahasan dan hasil penelitian, dapat diambil kesimpulan
bahwa penggunaan teknologi Flash Lite 2.1 dengan bahasa pemrograman Action
Script, PHP, XML, web server dan database MySQL dapat membangun suatu
aplikasi mobile map berbasis multimedia yang bertujuan untuk mencari dan
memilih restoran yang berada di daerah Salatiga.
Aplikasi mobile map berbasis multimedia ini dapat diterapkan pada
perangkat bergerak Nokia E63 atau perangkat bergerak yang terinstalasi dengan
teknologi Flash Lite 2.1. Penggunaan layanan mobile network pada ponsel
memungkinkan aplikasi berhubungan dengan server sehingga dapat memberikan
informasi lokasi dan informasi seputar restoran yang berada di daerah Salatiga
kepada pengguna.
5. Daftar Pustaka
[1] Kurnia, Aulia, 2010, Teori Konsumsi Dalam Ekonomi Mikro 160 : 16,
Malang: Universitas Islam Negeri Maulana Malik Ibrahim Malang.
[2] Marsum, 2002, Restoran dan Segala Permasalahannya, Yogyakarta :
Penerbit Andi.
[3] U'ju, Yeremia Eskawono, 2009, Representasi Informasi Lokasi Objek
Wisata berbasis Mobile Map (Studi Kasus Objek Wisata Tana Toraja),
Salatiga : FTI UKSW. 95: hal 3-4.
[4] Dewi, Yunita Kusuma, 2009, Perancangan Aplikasi Mobile map
Menggunakan SVG dan XML sebagai Media Penyimpanan Informasi,
Salatiga : FTI UKSW.
[5] Adobe, 2007, Flash Lite 2.X Actionscript Language Reference, United
State : Adobe Systems Incorporated.
[6] Unknowned, 20, XML Dom Node Tree, www.w3schools.com, Diakses
tanggal 8 Desember 2011.
[7] Ase, 2011, XML Extensible Markup Language, www.w3schools.com,
Diakses tanggal 8 Desember 2011.
[8] Vaughan, T. 2004. Multimedia:Making It Work. New York: McGraw-Hill
Companies.
[9] Binarto, Iwan, 2010, Multimedia Digital - Dasar Teori dan
Pengembangannya, Yogyakarta : Penerbit Andi.
[10] Sutopo, Ariesto Hadi, 2003, Multimedia Interaktif dengan Flash, Yogyakarta :
Graha Ilmu. [11] Bodnar G.H dan Hopwood W.S, Accounting Information. Systems 6th
Edition, 1995, Prentice Hall International.