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.