aplikasi peta wisata kuliner solo berbasis …/aplikasi... · rasulullah muhammad saw beserta...

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

i

APLIKASI PETA WISATA KULINER SOLO

BERBASIS MULTIMEDIA FLASH

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Teknik Informatika

Oleh :

HANUNG INDRA CAHYANA

M3108101

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

SURAKARTA

2012


commit to user

ii

HALAMAN PERSETUJUAN



Disusun Oleh :


NIM. M3108101

Tugas Akhir ini telah disetujui untuk dipertahankan

Di hadapan dewan penguji

pada tanggal _______________

Pembimbing Utama

Muhammad A. Safiie, S.Si.

NIDN. 0603118103


commit to user

iii

HALAMAN PENGESAHAN



Disusun Oleh :


NIM. M3108101

Dibimbing Oleh:

Muhammad A. Safiie, S.Si.

NIDN. 0603118103

Tugas Akhir ini telah diterima dan disahkan

oleh dewan penguji Tugas Akhir Program Diploma III Teknik Informatika

pada hari ____________tanggal _______________

Dewan Penguji 1. Penguji 1 Muh. A. Safiie, S.Si ( )

NIDN. 0603118103 2. Penguji 2 Agus Purbayu,S.Si ( )

NIDN. 0629088001 3. Penguji 3 Sahirul Alim Tri Bawono, S.Kom ( )

Disahkan oleh

Dekan Fakultas MIPA UNS Ir. Ari Handono Ramelan, M.Sc(Hons), Ph.D NIP. 19610223 198601 1 001

Ketua Program Diploma III Teknik Informatika FMIPA UNS Drs. YS. Palgunadi, M.Sc NIP. 19560407 198303 1 004


commit to user

iv

ABSTRACT

The Application of Solo Culinary Site Map Based on Flash Multimedia.

Hanung Indra Cahyana. NIM M3108101. Informatics Engineering Diploma

Program. Mathematics and Natural Sciences Faculty. UNS.2012

Map is used as a tool to find plans or locations. It can also be used to find

a culinary site. With the map application, travelers are able to search for plans or

locations of the existing culinary site in the certain region.

The Application of Solo Culinary Site Map was made based on Flash

Multimedia. It was created by using Adobe Flash, and Actionscript programming

language and XML. Flash was a software application for making animation used

on the web. While XML was a markup language that is very similar to HTML

which is designed to carry data, not to display the data.

It has been made The Application of Solo Culinary Site Map based on

Flash Multimedia which can be used to help the tourists who want to find as well

as to familiarize with the food and its location in the Solo city. In the application,

was facilitated the display screen of the map, the navigation menu, zoom button,

search menu, and Solo’s menu list that can be used by the tourists.

Keywords: Application, Map, Plan, Culinary, Flash, Actionscript, XML

--


commit to user

v

ABSTRAK

Aplikasi Peta Wisata Kuliner Solo Berbasis Multimedia Flash. Hanung Indra

Cahyana. NIM M3108101. Program Diploma III Fakultas Matematika dan Ilmu

Pengetahuan Alam Universitas Sebelas Maret. 2012

Peta digunakan sebagai alat bantu mencari denah atau lokasi. Peta juga

dapat digunakan untuk mencari lokasi wisata kuliner. Dengan adanya aplikasi

peta dapat digunakan oleh wisatawan untuk mencari denah ataupun lokasi wisata

kuliner yang ada disuatu daerah.

Aplikasi Peta Wisata Kuliner Solo Berbasis Multimedia Flash. dibuat

dengan menggunakan Adobe Flash, dan menggunakan bahasa pemograman

Actionscript dan XML. Flash adalah perangkat lunak aplikasi untuk pembuatan

animasi yang digunakan pada web. Sedangkan, XML adalah sebuah markup

language yang sangat mirip dengan HTML yang didesain untuk membawa data,

tidak untuk menampilkan data.

Telah dibuat Aplikasi Peta Wisata Kuliner Solo Berbasis Multimedia

Flash. yang dapat digunakan untuk membantu wisatawan yang akan mencari

lokasi kuliner dan mengenal makanan-makanan yang ada di kota Solo. Pada

aplikasi yang telah dibuat terdapat layar screen dari peta, kemudian menu

navigasi, tombol zoom, menu search, dan menu list wisata kuliner Solo yang

dapat digunakan oleh wisatawan dalam pengoperasian aplikasi ini.

Kata kunci : Aplikasi, Peta, Denah, Kuliner, Flash, Actionscript, XML


commit to user

vi

MOTTO

H I D U P ™U N T U K ™ME N G H I D U P I ™

HARAPAN: Adalah tujuan yang ingin kita capai dalam waktu tertentu di masa depan. KEPUTUSAN: Adalah langkah2 konkret kita untuk mencapai tujuan tersebut.

Jadikanlah sabar dan sholat sebagai penolongmu dan sesungguhnya yang demikian itu sungguh berat kecuali orang yang beriman (yaitu) orang-orang yang

meyakini bahwa mereka akan kembali kepada-Nya.

(Q.S Al Baqarah : 6-8)

“If we stop trying, that means we are no better than a coward”

(Hanung Indra Cahyana)


commit to user

vii

PERSEMBAHAN

Tugas Akhir ini penulis persembahkan untuk semua orang yang telah

member semangat kepada penulis dalam menyelesaikan laporan Tugas Akhir ini

kepada :

khususnya kepada keluarga, penulis yang sangat dicintai,neesa dan teman-teman

TI.B 2008 : Sidig, Bang Cholis, Ryan (Bhuled), Dito,Brian, Kebo

(Dhimas), Bocun (Septian), Pakdhe (Toto), Wahyonx (Wahyu),

Asyhar, Agil, Sulis, Ave, Deka (Ardhito), Zusril, Risang, Deny,

Angga, Danang, dan teman-teman lain yang belum disebutkan

namanya.”


commit to user

viii

KATA PENGANTAR

Assalamualaikum Wr. Wb

Puji dan syukur penulis panjatkan ke hadirat ALLAH SWT, karena berkat

rahmat dan karunia-NYA, penulis dapat menyelesaikan laporan Tugas Akhir ini.

Shalawat dan salam semoga selalu tercurah kepada manusia paling sempurna,

Rasulullah Muhammad SAW beserta keluarga suci kenabiannya.

Laporan ini ditulis untuk memenehui syarat kelulusan Kurikulum Tingkat

Diploma III Jurusan Teknik Informatika Unisversitas Sebelas Maret Surakarta.

Dalam pengerjaan laporan tugas akhir ini sejak awal hingga akhir, penulis

telah mendapat banyak bantuan dan dukungan dari berbagai pihak yang sudah

sepantasnya penulis mengucapkan rasa terima kasih yang sedalam-dalamnya

kepada :

1. Allah SWT yang selalu memberikan kekuatan untuk menyelesaikan

laporan Tugas Akhir ini.

2. Kedua orang tua, kakak, dan adik penulis serta segenap keluarga yang

penulis cintai yang telah memberikan doa dan dukungannya.

3. Bapak Y.S. Palgunadi, M.Si selaku Ketua Program Studi DIII Ilmu

Komputer Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas

Sebelas Maret Surakarta.

4. Muhammad A. Safiie, S.Si. selaku pembimbing TA yang selalu

memberikan kritik, saran, dan masukan yang bersifat membangun

sehingga penulis dapat menyelesaikan laporan ini dengan baik.

5. Sahabat-sahabatku serta semua rekan Mahasiswa Teknik Informatika

2008 yang telah banyak memberikan semangat dalam penyusunan

laporan ini.

6. Semua pihak yang telah banyak membantu penulis dalam menyelesaikan

laporan TA yang tidak bisa disebutkan satu persatu.


commit to user

ix

Penulis menyadari bahwa dalam penulisan laporan ini masih ada

kekurangan. Oleh karena itu, penulis mengaharapkan saran dan krtitik

membangun dari pembaca demi kesempurnaan laporan ini. Semoga laporan ini

bermanfaat bagi penulis khususnya dan bagi pembaca umumnya.

Wassalamulaikum Wr. Wb

Surakarta, Pebruari 2012

Hanung Indra Cahyana


commit to user

x

DAFTAR ISI

HALAMAN JUDUL ........................................................................................ i

HALAMAN PERSETUJUAN ......................................................................... ii

HALAMAN PENGESAHAN .......................................................................... iii

ABSTRACT ..................................................................................................... iv

ABSTRAK ....................................................................................................... v

HALAMAN MOTTO ...................................................................................... vi

HALAMAN PERSEMBAHAN ....................................................................... vii

KATA PENGANTAR ...................................................................................... viii

DAFTAR ISI .................................................................................................... x

DAFTAR GAMBAR ................................................................................... xiii

DAFTAR TABEL ........................................................................................ xiv

BAB I PENDAHULUAN ............................................................................... 1

1.1 Latar Belakang ....................................................................................... 1

1.2 Rumusan Masalah .................................................................................. 2

1.3 Batasan Masalah ..................................................................................... 2

1.4 Manfaat Tugas Akhir ............................................................................. 2

1.5 Sistematika Penulisan ............................................................................. 2


commit to user

xi

BAB II LANDASAN TEORI ........................................................................ 4

2.1 Kuliner............... ..................................................................................... 4

2.2 Multimedia ............................................................................................. 4

2.2.1 Pengertian Multimedia .................................................................. 4

2.2.2 Unsur Multimedia ......................................................................... 5

2.3 Flash ....................................................................................................... 7

2.4 Flash Player............................................................................................. 8

2.5 XML........................................................................................................ 9

2.5.1 Pengertian XML............................................................................. 9

2.5.2 Struktur Penulisan XML................................................................ 10

BAB III DESAIN DAN PERANCANGAN .................................................. 11

3.1 Analisa Kebutuhan Software Dan Hardware ......................................... 11

3.1.1 Analisa Kebutuhan Software.......................................................... 11

3.1.2 Analisa Kebutuhan Hardware........................................................ 12

3.2 Skenario.............................................................................................. 13

3.3 Langkah Pengembangan Aplikasi Peta Kuliner Solo............................. 12

3.3.1 Perancangan Konsep Aplikasi Peta Kuliner Solo ........................ 12

3.3.2 Pembuatan Aplikasi Peta Kuliner Solo ........................................ 13

3.3.3 Pengujian Aplikasi Peta Kuliner Solo .......................................... 13

3.3.4 Perbaikan Aplikasi Peta Kuliner Solo .......................................... 13


commit to user

xii

3.3.5 Finishing ....................................................................................... 13

3.4 Rancangan Aplikasi ................................................................................ 14

3.4.1 Sitemap ......................................................................................... 14

3.4.2 Rancangan Tampilan .................................................................... 14

BAB IV IMPLEMENTASI.............................................................................. 20

4.1 Pembuatan Aplikasi .............................................................................. 20

4.2 Hasil Pengujian Aplikasi ...................................................................... 20

BAB V PENUTUP .......................................................................................... 32

5.1 Kesimpulan...................................................................................... 32

5.2 Saran................................................................................................. 32

DAFTAR PUSTAKA ...................................................................................... 33


commit to user

xiii

DAFTAR GAMBAR

Gambar 3.1. Sitemap.......................................................................................... 16

Gambar 3.2. Halaman Utama Peta Wisata Kuliner Solo.................................... 17

Gambar 3.3. Rancangan Peta Utama Wisata Kuliner Solo................................ 18

Gambar 3.4. Rancangan Menu Navigasi............................................................ 18

Gambar 3.5. Rancangan Tombol Zoom.............................................................. 19

Gambar 3.6. Rancangan Menu Search............................................................... 20

Gambar 3.7. Rancangan Menu List Wisata Kuliner Solo................................... 21

Gambar 4.1. Halaman Utama Peta..................................................................... 25

Gambar 4.2. Screen Peta Wisata Kuliner kota Solo........................................... 26

Gambar 4.3. Menu Navigasi............................................................................... 27

Gambar 4.4. Tombol Zoom................................................................................. 27

Gambar 4.5. Menu Search.................................................................................. 27

Gambar 4.6. Menu List....................................................................................... 28

Gambar 4.7. Halaman Utama Peta..................................................................... 29

Gambar 4.8. Screen Peta..................................................................................... 30

Gambar 4.9. Keterangan Tempat Makan............................................................ 31

Gambar 4.10. Detail Menu................................................................................. 32

Gambar 4.11. Cara Penggunaan Menu Navigasi................................................ 33

Gambar 4.12. Cara Penggunaan Tombol Zoom................................................. 34


commit to user

xiv

Gambar 4.13. Cara penggunaan Menu Search................................................... 35

Gambar 4.14. Cara Penggunaan Menu List........................................................ 36

DAFTAR TABEL

Tabel 3.1. Skenario.......................................................................................... 14


commit to user

1

BAB 1

PENDAHULUAN

1.1. Latar Belakang

Saat sekarang ini menjamurnya tempat-tempat wisata kuliner di

kota Solo memudahkan bagi para pecinta kuliner untuk menikmati

makanan-makanan khas dari kota Solo maupun masakan dari luar kota

Solo. Di kota Solo terdapat berbagai macam -masakan, contohnya

masakan tradisional, masakan jawa, ataupun masakan jepang. Akan

tetapi karena letak geografis kota Solo yang sangat luas, maka tidak

mungkin wisatawan lokal ataupun wisata asing dapat menghafal semua

lokasi dari tempat-tempat wisata kuliner yang ada di kota Solo. Apalagi

dengan banyaknya makanan-makanan di kota Solo yang belum diketahui

oleh para wisatawan, akan membingungkan seperti apakah makanan

tersebut. Dengan demikian maka permasalahan yang dihadapi oleh

wisarawan saat ini adalah mengenai lokasi tempat-tempat wisata kuliner

yang ada di kota Solo dan informasi mengenai makan-makanannya.

Dengan adanya permasalahan diatas maka diperlukan suatu alat

yang dapat membantu para wisatawan untuk memudahkan mencari lokasi

kuliner dan mengenal makanan-makanan di Solo. Dan salah satu alat yang

dapat digunakan sebagai petunjuk lokasi tempat kuliner di kota Solo dan

beserta informasi mengenai makanan-makanannya adalah Aplikasi Peta

Kuliner Solo Berbasis Multimedia Flash.

Pada Aplikasi Peta Kuliner Solo Berbasis Multimedia Flash akan

terdapat screen peta lokasi dan menu list kuliner di kota Solo. Selain itu

akan ada keterangan dari makanan yang ada di lokasi kuliner tersebut.

Selain itu untuk memudahkan pencarian akan ditambahkan menu search,

sehingga wisatawan yang akan menggunakannya tidak perlu bersusah

payah untuk mencari lokasi kuliner yang diingnkan. Semoga dengan


commit to user

2

adanya Aplikasi Peta Kuliner Solo Berbasis Multimedia Flash dapat

membantu wisatawan yang akan mencari lokasi kuliner dan mengenal

makanan-makanan yang ada di kota Solo.

1.2. Rumusan Masalah

“Bagaimana merancang dan membuat Aplikasi Peta Kuliner Solo

Berbasis Multimedia Flash untuk digunakan oleh warga solo dan juga

wisatawan dari luar Solo ?”.

1.3. Batasan Masalah

Pada pembuatan tugas akhir ini, penulis membatasi permasalahan

yang akan dibahas yaitu membuat Aplikasi Peta Kuliner Solo Berbasis

Multimedia Flash, yang memiliki fasilitas untuk wisatawan untuk mencari

lokasi kuliner di Solo.

1.4. Manfaat Tugas Akhir

Dengan disusunnya tugas akhir ini diharapkan didapatkan beberapa

manfaat. Adapun manfaat tersebut adalah dengan aplikasi peta kuliner solo

dapat membantu para wisatawan untuk menggenal makanan-makanan di

Solo dan memudahkan mencarari tempat lokasinya.

1.5. Sistematika Penulisan

Sitematika penulisan dalam laporan tugas akhir ini adalah sebagai

berikut:

I. BAB I PENDAHULUAN

Berisi uraian yang menjelaskan latar belakang, rumusan masalah, tujuan,

manfaat, batasan masalah, dan metodologi pengerjaan Tugas Akhir ini.

II. BAB II LANDASAN TEORI

Berisi penjelasan mengenai dasar teori yang melandasi pengerjaan Tugas

Akhir ini.


commit to user

3

III. BAB III DESAIN DAN PERANCANGAN

Berisi uraian tahap analisa dan aplikasi peta kuliner solo yang akan

menjadi hasil keluaran dari penulisan tugas akhir ini.

IV. BAB IV IMPLEMENTASI DAN ANALISA

Berisi implementasi dari rancangan yang dibuat dan analisanya.

V. BAB V PENUTUP

Berisi uraian tentang kesimpulan dan saran yang penulis ambil dari

penulisan tugas akhir ini.


commit to user

4

BAB II

LANDASAN TEORI

Teori yang mendasari atau manjadi landasan dari pelaksanaan dan

pengerjaan tugas akhir ini diambil dari beberapa sumber termasuk juga dalam hal

ini penerapan kemampuan dan pengetahuan penulis baik yang telah diperoleh

selama duduk dibangku perkuliahan ataupun pengetahuan umum lainnya.

Dengan mengetahui arti dan istilah-istilah yang digunakan akan lebih

mudah dalam memecahkan masalah yang penulis jumpai saat mengerjakan tugas

akhir. Adapun landasan teoti yang mendasari tugas akhir ini adalah :

2.1. Kuliner

Menurut Anonim (2011), pengertian kuliner adalah hasil olahan yang

berupa masakan. Masakan tersebut berupa lauk-pauk, makanan (penganan) dan

minuman. Karena setiap daerah memiliki citarasa tersendiri, maka tak heran jika

setiap daerah juga memiliki tradisi kuliner yang berbeda-beda.

2.2. Multimedia

2.2.1. Pengertian Multimedia

Menurut Hofstetter (2001), Multimedia adalah pemanfaatan

komputer untuk membuat dan menggabungkan teks, grafik, suara,

gambar bergerak (video dan animasi) dengan menggabungkan link

dan tool yang memungkinkan pemakai melakukan navigasi,

berinteraksi, berkreasi dan berkomunikasi.

Dalam definisi ini terkandung empat komponen penting

multimedia.

1. Pertama, harus ada komputer yang mengkoordinasi apa yang

dilihat dan didengar yang berinteraksi dengan kita.


commit to user

5

2. Kedua, harus ada link yang menghubungkan kita dengan informasi.

3. Ketiga, harus ada alat navigasi yang memandu kita, menjelajah

jaringan informasi yang saling terhubung.

4. Keempat, multimedia menyediakan tempat kepada kita untuk

mengumpulkan, memproses dan mengkomunikasikan informasi

dan ide kita sendiri.

Jika salah satu komponen tidak ada, maka bukan

multimedia dalam arti luas namanya. Misalnya jika tidak

ada komputer untuk berinteraksi maka itu namanya media

campuran, bukan multimedia. Jika tidak ada link yang

menghadirkan sebuah struktur dan dimensi, maka namanya

rak buku, bukan multimedia. Kalau tidak ada navigasi

yang memungkinkan kita memilih jalannya suatu

tindakan maka itu namanya film, bukan multimedia.

Demikian juga jika kita tidak mempunyai ruang untuk

berkreasi dan menyumbangkan ide sendiri, maka

namanya televisi, bukan multimedia. Dari definisi diatas,

maka multimedia ada yang online (internet) dan

multimedia yang offline (tradisional).

2.2.2. Unsur Multimedia

1. Animasi

Menurut Hasanuddin dan Noviyanto (2002), Animasi

merupakan gerakan-gerakan objek yang disusun sehingga menarik

pehatian orang yang melihatnya. Cara kerja animasi tergantung

pada penggaturan frame di timeline

Flash membagi animasi dalam dua kategori, yaitu:

a. Shape adalah animasi berupa perubahaan bentuk dari keadaan

awal, menuju keadaan akhir yang ditentukan.


commit to user

6

b. Motion adalah animasi pada flash yang berupa gerakan suatu obyek

tanpa mengalami perubahan bentuk.

2. Teks

Menurut Suyanto (2003), Teks adalah elemen paling awal

dan sederhana dalam multimedia, yang biasanya mengacu pada

kata, kalimat dan alinea. Sebagian besar multimedia menggunakan

teks karena teks sangat efektif untuk menyampaikan ide dan

panduan kepada pengguna. Teks merupakan bentuk data

multimedia yang paling mudah disimpan dan dikenali, serta file

teks merupakan struktur yang sederhana.

Menurut Hidayatulloh (2011), dalam flash terdapat 3 tipe

dari teks, yaitu:

a. Static Text yaitu tulisan yang bersifat statis sehingga tidak dapat

diubah saat aplikasi dijalankan.

b. Dynamic Text yaitu tulisan yang bersifat dinamis sehingga bisa

diedit atau diubah pada saat aplikasi dijalankan.

c. Input Text yaitu teks yang dapat diinputkan oleh user saat aplikasi

dijalankan.

3. Gambar

Menurut Suyanto (2003), Gambar merupakan tampilan

diam atau tidak bergerak. Gambar juga merupakan salah satu

komponen penting dalam multimedia karena dapat meringkas dan

menyajikan data kompleks serta mampu menyampaikan seribu

kata. Gambar dalam publikasi multimedia lebih menarik perhatian

dan dapat mengurangi kebosanan dibandingkan dengan teks sebab

manusia selalu berorientasi terhadap visual.


commit to user

7

4. Suara

Menurut Hasanuddin dan Noviyanto (2002), Animasi dapat

dibuat lebih menarik apabila dilengkapi dengan suara yang sesuai,

karena suara yang mendukung gerakan animasi dapat

membangkitkan perasaan tertentu. Penambahan suara akan

memperbesar ukuran file. Oleh karena itu suara yang dimasukan

sebaiknya berupa format yang berkapasitas kecil seperti mp3 dan

wav.

5. Actionscript

Menurut Hasanuddin dan Noviyanto (2002), dalam

membanguan interaktifitas digunakan perintah maupun program

yang disebut actionscript. Secara umum actionscript pada flash

hampir sama dengan bahasa pemrograman javascript. Dalam

membuat suatau interaktifitas, harus memahami tiga komponen

penting dalam actionscript, yaitu:

a. Event adalah merupakan peristiwa yang terjadi untuk memicu

sebuah aksi pada sebuah objek.

b. Action adalah merupakan aksi atau kerja yang dikenakan,

diberikan pada suatu objek.

c. Target adalah merupakan objek yang dikenai oleh aksi.

2.3. Flash

Menurut Sutopo (2008), flash adalah perangkat lunak aplikasi untuk

pembuatan animasi yang digunakan pada web. Flash mampu melengkapi situs

web dengan beberapa macam animasi, suara, animasi interaktif dan lain-lain.

Gambar hasil dari Flash dapat diubah ke dalam format lain untuk digunakan pada

pembuatan desain web yang tidak langsung mengadaptasi Flash.

Dengan pemrograman actionscript dapat dibuat animasi dan visualisasi

yang berhubungan dengan penyajian informasi, seperti kuis, puzzle dan aplikasi


commit to user

8

interaktif lain yang memerlukan pemrograman dengan baik. Actionscript adalah

bahasa pemrograman visual berorientasi objek yang mempunyai struktur, sintaks

dan tata bahasa mirip dengan bahasa pemrograman C++.

Fungsi-fungsi dasar yang dapat dilakukan oleh ActionScript adalah

sebagai berikut :

a. Animasi

Script dapat membantu dalam pembuatan animasi yang kompleks.

b. Navigasi

Secara default navigasi bergerak satu demi satu frame, tetapi

dengan ActionScript dapat dibuat navigasi yang bisa mengakses ke

sembarang frame sesuai keinginan user.

c. Memperoleh data

ActionScript dapat berinteraksi dengan server sehingga kita dapat

meng-update informasi ke user.

d. Grafik

ActionScript dapat menguah ukuran sebuah grafik, sudut rotasi,

warna movie clip, dan dapat menduplikasi dan menghapus item di dalam

screen.

e. Environment

ActionScript dapat mengambil nilai waktu dari sistem yang

digunakan untuk user.

f. Musik

ActionScript dapat mengontrol balance dan volume.

2.4. Flash Player

Menurut Prianto Hidayatulloh (2011), flash player merupakan software

untuk melihat animasi dan movie dengan mengunakan komputer. Flash player

digunakan sebagai player untuk menjalankan file-file yang berekstension swf

(shock wave flash). Apabila meginginkan software macromedia flash versi apa

saja maka akan disertai flash player di dalamnya.


commit to user

9

2.5. XML (eXtensible Markup Language)

2.5.1. Pengertian XML

Menurut Sandi Hariadi (2010), XML adalah sebuah markup

language yang sangat mirip dengan HTML. XML didesain untuk

membawa data, tidak untuk menampilkan data. Tag XML tidaklah

terdefenisi. Jadi, tag-tagnya dibuat berdasarkan kebutuhan

pembuatnya.

Menurut Unisri (2011) pada modul Pengantar XML,

Bahasa markup adalah sekumpulan aturan-aturan yang

mendefinisikan suatu sintaks yang digunakan untuk menjelaskan,

dan mendeskripsikan teks atau data dalam sebuah dokumen

melalui penggunaan tag. Bahasa markup lain yang populer seperti

HTML, menggambarkan kepada browser web tentang bagaimana

menampilkan format teks, data, dan grafik ke layar komputer

ketika sedang mengunjungi sebuah situs web. XML adalah sebuah

bahasa markup yang digunakan untuk mengolah meta data

(informasi tentang data) yang menggambarkan struktur dan

maksud/tujuan data yang terdapat dalam dokumen XML, namun

bukan menggambarkan format tampilan data tersebut. XML

adalah sebuah standar sederhana yang digunakan untuk

medeskrippsikan data teks dengan cara self-describing (deskripsi

diri). XML juga dapat digunakan untuk mendefinisikan domain

tertentu lainnya, seperti musik, matematika, keuangan dan lain-lain

yang menggunakan bahasa markup terstruktur.


commit to user

10

2.5.2. Struktur Penulisan XML

Berikut ini adalah contoh sebuah struktur dokumen XML :

Baris pertama pada dokumen XML di atas adalah deklarasi

standar header yang mendefinisikan versi XML dan karakter

encoding yang digunakan dalam dokumen XML. Dalam dokumen

ini, XML mengacu pada versi 1.0 dan menggunakan standar

encoding karakter set ISO-8859-1 (Latin-1/West European).

Baris selanjutnya menggambarkan elemen induk (root)

dokumen “<email>..</email>”, sebagaimana kita menyebut bahwa

“Dokumen ini adalah sebuah Email”. Kemudian baris ke 3-6

menggambarkan elemen anak (child) dari elemen induk dokumen.

Tag pada dokumen XML bersifat case sensitif di mana tag

pembuka dan tag penutup harus ekivalen. Seperti contoh tag

pembuka “<email>” harus ditutup dengan tag “</email>”.

Berikut ini adalah contoh penulisan dokumen XML yang

benar:

“<email>….</email>”

“<EMAIL>….</EMAIL>”

“<Email>….</Email>”


commit to user

11

BAB III

DESAIN DAN PERANCANGAN

3.1. Analisa Kebutuhan Software dan Hardware

Dalam pembuatan Aplikasi Peta Kuliner Solo ini membutuhkan

software atau perangkat lunak dan hardware atau perangkat keras. Adapun

software dan hardware yang digunakan adalah sebagai berikut :

3.1.1. Analisa Kebutuhan Software

Software adalah perangkat lunak yang digunakan untuk

merancang dan membuat aplikasi ini. Adapun software yang

digunakan antara lain :

a. Adobe Flash CS2

Adobe Flash CS2 digunakan untuk membuat gambar vektor

maupun animasi gambar tersebut. Berkas yang dihasilkan dari

perangkat aplikasi ini berformat .swf. Flash menggunakan bahasa

pemograman bernama Actionscript.

b. Adobe Photoshop CS2

Adobe Photoshop CS2 digunakan sebagai aplikasi

pengolahan gambar, dan dapat juga digunakan untuk mengubah

tampilan objek, misalnya teks atau tulisan.

c. Corel Draw X4

Corel Draw X4 digunakan untuk pengolahan gambar

vektor. Keunggulan dari corel draw adalah dapat digunakan untuk

menciptakan simbol atau logo, terutama gambar logo 2 dimensi.


commit to user

12

3.1.2. Analisa Kebutuhan Hardware

Adapun hardware yang digunakan ini untuk merancang

dan membuat Aplikasi Peta Kuliner Solo adalah sebuah PC dengan

spesifikasi :

Processor : Intel (R) Core(TM)2 Duo CPU T5870 @ 2.00GHz

Memory : 1 GB

VGA : 1 GB

Harddisk : 160 GB


commit to user

13

3.2. Skenario

Skenario Keterangan

PetaGallery

Zoom Search

Data List

Pada halaman utama terdapat peta,

galery, data lsit, search, zoom,

seacrch, dan navigasi.

PetaGallery

ZoomSearch

Data List

Penggunaan tombol zoom. Jika yang

dipilih adalah zoom in, maka gambar

pada peta akan bertambah besar, dan

jika memilih zoom out, maka peta

akan menjadi kecil.

PetaGallery

ZoomSearchList Kuliner

Ad em Aye mDapur SoloTum peng Solo

Apabila button data list, diklik akan

muncul list lokasi kuliner Solo.

Kemudian pilih tempat kuliner pada

list, maka target akan menuju ke

tempat kuliner tersebut.

Tabel 3.1. Skenario


commit to user

14

3.3. Langkah Pengembangan Aplikasi Peta Kuliner Solo

Dalam langkah dan pengembangan aplikasi ini dilakukan dengan

beberapa tahap, yaitu dimulai dari perancangan konsep aplikasi peta,

pembuatan aplikasi peta, pengujian aplikasi peta, perbaikan aplikasi peta,

dan proses finishing. Adapun penjelasan dari tahap-tahap tersebut adalah :

3.3.1. Perancangan Konsep Aplikasi Peta Kuliner Solo

Perancangan konsep aplikasi adalah langkah awal dari

pembuatan aplikasi ini. Perancangan ini meliputi pembuatan

sitemap dan desain tampilan dari aplikasi yang akan dibuat, serta

pembuatan urutan dari layer peta.

Urutan dari layer peta tersebut adalah background,

kemudian screen peta, navigasi, menu list, tombol zoom, serta

yang terakhir menu search

3.3.2. Pembuatan Aplikasi Peta Kuliner Solo

Setelah tahap perancangan telah dilakukan, maka tahap

berikutnya adalah tahap pembuatan aplikasi. Untuk membuat

desain dan objek-objek yang dibutuhkan pada aplikasi peta

digunakan software Adobe Photoshop CS3 dan Corel Draw X4,

sedangkan untuk animasi pada peta digunakan Adobe Flash CS3.

Pada background langsung dibuat menggunakan Adobe

Flash CS3, latar belakang pada peta ini menggunakan warna abu-

abu.

Peta dibuat dengan cara menempelkan peta Solo pada

frame Adobe Flash CS3, kemudian ditambah dengan aksen jalan

raya dan simbol rumah makan yang sebelumnya telah dibuat

menggunakan Adobe Photoshop CS3.

Navigasi dibuat menggunakan Adobe Photoshop CS3,

kemudian untuk menjalankannya digunakan ActionScript pada

Flash.


commit to user

15

Menu list dibuat menggunakan Adobe Flash CS3 kemudian

ditambah dengan ActionScript sebagai script untuk menjalankan

perintah pada list.

Search dibuat menggunakan Photoshop CS3 untuk

tampilannya dan script XML untuk pencariannya.

3.3.3. Pengujian Aplikasi Peta Kuliner Solo

Tahap pengujian digunakan sebagai bahan evaluasi

terhadap kekurangan dari aplikasi peta. Pengujian dilakukan

dengan cara menjalankan langsung aplikasi peta yang telah dibuat,

dan apabila masih terdapat kekurangan, maka tahap selanjutnya

adalah perbaikan.

3.3.4. Perbaikan Aplikasi Peta Kuliner Solo

Pada tahap perbaikan, kekurangan dari aplikasi diperbaiki

sesuai dengan koreksi dari tahap pengujian yang selanjutnya juga

diuji kembali.

3.3.5. Finishing

Jika semua tahap telah dijalankan, maka tahap selanjutnya

adalah tahap finishing. Pada tahap ini produk yang sudah melawati

tahap pengujian dan tahap perbaikan siap untuk digunakan.


commit to user

16

3.4. Rancangan Aplikasi

3.4.1. Sitemap

Sitemap pada peta wisata kuliner solo dapat digambarkan sebagai

berikut :

Gambar 3.1. Sitemap


commit to user

17

3.4.2. Rancangan Tampilan

Rancangan halaman utama peta wisata kuliner Solo adalah sebagai

berikut:

Search

List SoloWisata Kuliner

PetaWisata Kuliner

Gambar 3.2. Halaman Utama Peta Wisata Kuliner Solo

Tampilan Halaman utama peta wisata kuliner Solo terdiri dari

screen / peta wisata kuliner, tombol zoom in dan zoom out, menu navigasi,

menu search, dan menu list atau daftar wisata kuliner yang ada di kota

Solo. Bagian – bagian dapat dijelaskan sebagai berikut :


commit to user

18

a. Screen / Peta Utama Wisata Kuliner Solo.

PetaWisata Kuliner

Gambar 3.3. Rancangan Peta Utama Wisata Kuliner Solo

Pada screen ini terdapat peta kota Solo beserta denah-

denahnya, dan juga terdapat simbol lokasi tempat kuliner di kota

Solo.

b. Menu Navigasi

Gambar 3.4. Rancangan Menu Navigasi

Menu navigasi terdapat pada sudut kanan bawah peta.

Menu navigasi ini digunakan untuk menggerakkan kursor peta

kearah kanan, kiri, atas, ataupun kearah bawah.

Script yang digunakan adalah :

1) Script kanan: on (press) { {


commit to user

19

_root.maps._x = _root.maps._x - 40; }

2) Script kiri: on (press) { { _root.maps._x = _root.maps._x + 20; }

3) Script atas:

on (press) { { _root.maps._y = _root.maps._y + 20; }

4) Script bawah; on (press) { { _root.maps._y = _root.maps._y - 20; }

c. Tombol Zoom

Gambar 3.5. Rancangan Tombol Zoom

Tombol zoom terdapat pada sudut kanan atas peta. Tombol

zoom terdiri atas zoom in yaitu digunakan untuk memperbesar peta,

dan zoom out untuk mengecilkan peta.

Script yang digunakan untuk tombol zoom adalah :

on (press) { if (zoom_txt < 400) { _root.maps._xscale = _root.maps._xscale * 1.100000; _root.maps._yscale = _root.maps._yscale * 1.100000;


commit to user

20

_root.maps._x = (_root.maps._x - 330.500000) * 1.100000 + 299.500000; _root.maps._y = (_root.maps._y - 399.500000) * 1.100000 + 399.500000; zoom_txt = int(zoom_txt + 10); } Skrip tombol zom out: on (release) { if (zoom_txt != 400) { _root.maps._xscale = _root.maps._xscale / 1.100000; _root.maps._yscale = _root.maps._yscale / 1.100000; _root.maps._x = (_root.maps._x - 260.500000) / 1.100000 + 299.500000; _root.maps._y = (_root.maps._y - 399.500000) / 1.100000 + 399.500000; zoom_txt = int(zoom_txt - 10); }

d. Menu Search

Search

Gambar 3.6. Rancangan Menu Search

Menu ini digunakan untuk mencari denah atau lokasi dari

tempat makan yang ada di kota Solo.

Script search adalah sebagai berikut :

Frem 1: caritxt.onKeyDown = function(){ if (Key.getCode() == Key.ENTER){ _root.lokasi(this.text); } Frem 2: _root.zm = "in"; startDrag(lens, true); stop(); Key.addListener(caritxt);


commit to user

21

Frem 3: _root.zm = "out"; startDrag(lens, true); stop(); frem 4: _root.maps._width = 1367.5; _root.maps._height = 1035.5; _root.maps._x = 418.9; _root.maps._y = 276.8; stop(); frem 5: stop(); frem 10; var ls:mx.controls.List; ls.removeAll(); for(var j:Number=0 ; j<_root.lst.length; j++){ ls.addItem(_root.lst[j].val); }

e. Menu List Wisata Kuliner Solo

List SoloWisata Kuliner

Gambar 3.7. Rancangan Menu List Wisata Kuliner Solo


commit to user

22

Menu list ini terdapat dibagian kiri peta. Pada menu ini

terdapat list atau daftar dari wisata kuliner yang ada di kota Solo.

f. Load data XML stop(); kuliner = new XML(); kuliner.ignoreWhite = true; kuliner.onLoad = loadXML; kuliner.load("kuliner.xml"); function loadXML(loaded) { if(loaded) { combo.removeAll(); var Root = kuliner.firstChild; var menu = Root.childNodes[0].childNodes; txtmenu.text = "Menu " + Root.childNodes[0].attributes.nama; for(var i = 0; i < menu.length; i++) { var menu2 = menu[i].attributes.nama; combo.addItem({label:menu2}); } setDetail(0); }

g. Menampilkan Data Warung stop(); kuliner = new XML(); kuliner.ignoreWhite = true; kuliner.onLoad = loadXML; kuliner.load("kuliner.xml"); function loadXML(loaded) { if(loaded) {


commit to user

23

var Root = kuliner.firstChild; var menu = Root.childNodes[0].childNodes; txtmenu.text = "Menu " + Root.childNodes[0].attributes.nama; for(var i = 0; i < menu.length; i++) { var menu2 = menu[i].attributes.nama; combo.addItem({label:menu2}); } setDetail(0); } else { trace("file gagal di Load."); } } function setDetail(a) { loadMovie( kuliner.firstChild.childNodes[0].childNodes[a].childNodes[0].firstChild.nodeValue,mc_image); txtharga.text = kuliner.firstChild.childNodes[0].childNodes[a].childNodes[1].firstChild.nodeValue; txtdeskripsi.text = kuliner.firstChild.childNodes[0].childNodes[a].childNodes[2].firstChild.nodeValue; } ListenerCombo = new Object(); ListenerCombo.change = function(event) { setDetail(combo.selectedIndex); } combo.addEventListener("change",ListenerCombo);

commit to user

24

h. Membawa Data Warung <?xml version = "1.0" encoding = "UTF-8"?> <kuliner>  <warung nama = "Adem Ayem" x="-156.400000" y="-643"> <menu nama ="Nasi Gudeg"> <image>image/Gudeg1.jpg</image> <harga>Rp. 17.000,-</harga> <deskripsi> Gudeg adalah masakan khas Yogyakarta, terbuat dari nangka yang diolah secara tradisional. Biasanya disajikan beserta opor ayam, telur rebus, dan sambal pedas krecek. </deskripsi> </menu> <menu nama = "Nasi Liwet"> <image>image/nasi liwet.jpg</image> <harga>Rp. 11.500,-</harga> <deskripsi> Nasi liwet adalah nasi gurih yang mirip nasi uduk, yang disajikan dengan sayur labu siam, suwiran ayam dan areh (semacam bubur gurih dari kelapa). </deskripsi> </menu> <menu nama = "Nasi Timlo"> <image>image/timlo.jpg</image> <harga>Rp. 13.500,-</harga> <deskripsi> Timlo merupakan nasi berkuah yang dibuat dari nasi yang diseduh dengan kuah kaldu dan ditaburi dengan suwiran ayam, serta telur rebus. </deskripsi> </menu> </warung> </kuliner>


commit to user

25

BAB IV

IMPLEMENTASI

4.1. Pembuatan Aplikasi

Aplikasi multimedia ini merupakan aplikasi peta wisata untuk

memudahkan mencari denah atau tempat-tempat makan di kota Solo.

Aplikasi peta ini dikemas secara menarik dengan tampilan user-friendly

sehingga pengguna applikasi peta ini dapat dengan mudah menggunakannya

untuk mencari tempat wisata kuliner di kota Solo.

4.2. Hasil Pengujian Aplikasi

4.2.1. Tampilan Halaman Utama

Gambar 4.1. Halaman Utama Peta

Halaman utama merupakan tampilan keseluruhan dari

aplikasi peta wisata kuliner Kota Solo yang terdiri atas screen

tempat menampilkan denah dari peta Kota Solo, tombol zoom in


commit to user

26

dan zoom out, menu navigasi, menu search, dan menu list atau

daftar wisata kuliner yang ada di kota Solo.

Bagian-bagian dari aplikasi peta wisata dalah terdiri dari

screen peta, menu navigasi, tombol zoom, menu search, dan menu

list tempat makan yang ada di kota Solo. Bagian-bagian tersebut

dapat dijelaskan berikut ini :

a. Screen Peta

Gambar 4.2. Screen Peta Wisata Kuliner kota Solo

Gambar 4.2. merupakan tampilan screen dari denah wisata

kuliner kota Solo. Pada screen ini terdapat peta kota Solo beserta

denah-denahnya, dan juga terdapat simbol lokasi tempat kuliner di

kota Solo.


commit to user

27

b. Menu Navigasi

Gambar 4.3. Menu Navigasi

Menu navigasi ini digunakan untuk menggerakkan kursor

pada peta kearah kanan, kiri, atas, ataupun kearah bawah.

c. Tombol Zoom

Gambar 4.4. Tombol Zoom

Tombol zoom terdiri atas zoom in yaitu digunakan untuk

memperbesar peta, dan zoom out untuk mengecilkan peta.

d. Menu Search

Gambar 4.5. Menu Search

Menu search digunakan untuk mencari denah atau lokasi

dari tempat makan yang ada di kota Solo.


commit to user

28

e. Menu list

Gambar 4.6. Menu List

Pada menu ini terdapat list atau daftar dari wisata kuliner

yang ada di kota Solo. Pada menu terdapat beberapa terdapat

beberapa masakan yaitu masakan daerah, masakan jawa, masakan

jepang, dan masakan cina.


commit to user

29

4.2.2. Pengoperasian Aplikasi

Gambar 4.7. Halaman Utama Peta

Gambar 4.7. merupakan tampilan keseluruhan dari aplikasi peta

wisata kuliner Kota Solo yang terdiri atas screen tempat menampilkan

denah dari peta Kota Solo, tombol zoom in dan zoom out, menu navigasi,

menu search, dan menu list atau daftar wisata kuliner yang ada di kota

Solo.

Berikut ini akan dijelaskan cara penggunaan peta, yaitu screen

peta, cara penggunaan menu navigasi, cara penggunaan tombol zoom, cara

penggunaan menu search, dan cara penggunaan menu list.


commit to user

30

a. Screen Peta

Gambar 4.8. Screen Peta

Tampilan screen dari denah wisata kuliner kota Solo terdiri

dari peta kota Solo beserta denah-denahnya, dan juga terdapat

simbol lokasi tempat kuliner di kota Solo.


commit to user

31

Gambar 4.9. Keterangan Tempat Makan

Untuk melihat keterangan dari tempat makan yang akan

dituju, dengan cara meng-klik simbol kuning pada screen atau

denah yang terdapat pada peta. Pada keterangan ini terdapat

gambar dari tempat makan yang telah dipilih, dan juga tombol

Detail untuk melihat detail dari menu masakan yang ada di tempat

makan tersebut.


commit to user

32

Gambar 4.10. Detail Menu

Gambar 4.10 merupakan tampilan dari detail menu

makanan. Disini terdapat menu textbox yang digunakan untuk

memilih menu apa saja yang ada di tempat makan yang telah

dipilih. Dengan memilih menu makanan yang ada pada textbox,

maka akan tertera gambar dan keterangan dari makanan yang

dipilih serta harga dari makanan tersebut.


commit to user

33

b. Cara Penggunaan Menu Navigasi

Gambar 4.11. Cara Penggunaan Menu Navigasi

Untuk menggerakkan kursor pada peta dapat dengan cara

mengarahkan mouse-pointer ke arah yang akan dituju pada peta,

selain itu dapat juga menggunakan menu navigasi yang terletak

pada sudut kanan bawah pada peta aplikasi. Menu navigasi

digunakan untuk mengerakkan kursor pada kearah atas, bawah, kiri

maupun ke kanan.


commit to user

34

c. Cara Penggunaan Tombol Zoom

Gambar 4.12. Cara Penggunaan Tombol Zoom

Untuk memperbesar peta dapat menggunakan tombol zoom

in yang terdapat pada sudut kanan atas screen peta. Dan jika akan

memperkecil peta, gunakan tombol zoom out peta.


commit to user

35

d. Cara Penggunaan Menu Search

Gambar 4.13. Cara penggunaan Menu Search

Menu search digunakan untuk mencari tempat makan yang

ada di kota Solo. Cara menggunakan menu ini adalah dengan cara

mengetikkan keyword atau kata kunci pada textfield, kemudian

tekan tombol search, maka hasil dari pencarian akan tampil.

Setelah itu klik salah satu tempat yang ada pada hasil pencarian,

maka pada screen peta akan menuju pada denah lokasi tempat

makan yang telah dipilih pada hasil pencarian.


commit to user

36

e. Cara Penggunaan Menu List

Gambar 4.14. Cara Penggunaan Menu List

Pada menu list terdapat daftar dari tempat makan yang ada

di kota Solo. Tempat makan tersebut terdiri dari masakan daerah,

masakan jawa, masakan jepang, dan masakan cina. Cara mengganti

list dari masakan tersebut adalah dengan cara menekan tombol

next, maka dengan otomatis akan menuju ke masakan berikutnya.

Kemudian pilih tempat makan yang ada pada list, maka denah dari

tempat makan itu tampil pada screen peta.


commit to user

37

BAB V

PENUTUP

5.1 Kesimpulan

Aplikasi Peta Kuliner Solo Berbasis Multimedia Flash telah

berhasil dibuat dengan menggunakan bahasa pemograman Actionscript

dan XML. Aplikasi ini digunakan untuk membantu wisatawan yang akan

mencari lokasi kuliner dan mengenal makanan-makanan yang ada di kota

Solo.

5.2 Saran

Saran yang dapat disampaikan pada penulisan tugas akhir ini

adalah pada Aplikasi Peta Kuliner Solo Berbasis Multimedia Flash dalam

pengeditan dan penambahan lokasi kuliner pada list lokasi kuliner masih

secara manual pada Adobe Flash, sehingga apabila ada pengembangan

aplikasi ini dikemudian hari, dapat menambahkan menu XML tersendiri

untuk mengedit lokasi pada peta.

aplikasi peta wisata kuliner solo berbasis …/aplikasi... · rasulullah muhammad saw beserta...

Documents