Rich Internet Application Tur Kampus Tiga Dimensi Institut Pertanian Bogor

(1)

RICH INTERNET APPLICATION

TUR KAMPUS TIGA DIMENSI

INSTITUT PERTANIAN BOGOR

RILAN MUHAMMAD FIQRI

DEPARTEMEN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

(2)

RICH INTERNET APPLICATION

TUR KAMPUS TIGA DIMENSI

RILAN MUHAMMAD FIQRI

DEPARTEMEN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

BOGOR

2012

Skripsi

sebagai salah satu syarat untuk memperoleh gelar

SarjanaKomputer pada

(3)

ABSTRACT

FIQRI, RILAN MUHAMMAD. Rich Internet Application Campus Tour 3D of Bogor Agricultural University. Under supervision of FIRMAN ARDIANSYAH.

Problem of location information has became a general thing that happens in every place, especially in locations that are spacious and have lots of room. Problems posed related to the ease of new visitors in exploring the place for the first time. This problem can be solved by the application of information which represents a place and a more interactive visualization. RIA Rich Internet Application (RIA) is a suitable technology to create interactive applications in terms of information or visualization. RIA is divided into two categories based on the framework: a framework based on JavaScript / AJAX and framework based on plug-ins.

This study presents the application of RIA IPB web based campus tour. This application uses framework based on plug-ins. Application interface is designed to resemble a map. The application displays a 3D map of IPB to the user and displays information of important places in IPB. In addition, this application can trace the path in the map to give the impression of exploration for user. The pathway is formed by the Bezier curve equation in the XY fields, XZ fields, ZY fields. The formed lines can be manipulated based on the X, Y, and Z coordinates.

(4)

Judul Skripsi : Rich Internet Application Tur Kampus Tiga Dimensi Institut Pertanian Bogor Nama : Rilan Muhammad Fiqri

NRP : G64070033

Menyetujui: Pembimbing

Firman Ardiansyah, S.Kom., M.Si. NIP. 19790522 200501 1 003

Mengetahui:

Ketua Departemen Ilmu Komputer

Dr. Ir. Agus Buono, M.Si., M.Kom. NIP. 19660702 199302 1 001

(5)

PRAKATA

Puji dan syukur penulis panjatkan ke hadirat Allah Subhanahu wa Ta’ala atas segala rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir dengan judul Rich Internet Application Tur Kampus Tiga Dimensi Institut Pertanian Bogor. Penelitian ini dilaksanakan mulai Maret 2011 sampai dengan April 2012, bertempat di Departemen Ilmu Komputer Institut Pertanian Bogor. Penulis juga menyampaikan terima kasih kepada pihak-pihak yang telah membantu dalam penyelesaian tugas akhir ini antara lain:

1 Ibunda Nuri Rofiah, Ayahanda Asep Suparlan, serta adikku Rofan dan Firda yang telah mengisi kehidupan sehari-hari dengan nasehat dan kasih sayang.

2 Bapak Firman Ardiansyah, S.Kom., M.Si. selaku pembimbing yang selalu memberikan ide, semangat dan solusi kepada penulis selama pengerjaan penelitian ini.

3 Bapak Sony Hartono Wijaya, S.Kom., M.Kom. dan Bapak Endang Purnama Giri, S.Kom., M.Kom. yang telah bersedia untuk menjadi penguji.

4 Dean, Wisnugroho, Vai, Musthafa, Gamma, Rommy, Aco, Yanta, Ridwan, Otri, Paw, Sayed, Kaka dan semua anggota SIGAP yang lainnya serta seluruh penghuni Pondok AA yang selalu memberikan semangat dan kecerian .

5 Auzi, Rifki, Agung, Wiwiek, dan Bintang sebagai rekan seperjuangan satu bimbingan.

6 Fani Valerina yang senantiasa setia menemani, memberikan doa, dukungan, dan segala keperluan kepada penulis selama pengerjaan penelitian ini.

7 Rekan-rekan Ilkomerz 44 atas segala kebersamaan, bantuan, dan motivasi, dan kenangan indah yang telah mengisi kehidupan kampus ini. Semoga ketika kelak kita bertemu lagi, masing-masing dari kita telah memeroleh kesuksesannya masing-masing-masing-masing.

Penulis menyadari bahwa masih terdapat kekurangan dalam penulisan skripsi ini. Semoga skripsi ini bermanfaat, menginspirasi dan dapat dikembangkan demi kemajuan teknologi.

Bogor, Juli 2012

(6)

RIWAYAT HIDUP

Rilan Muhammad Fiqri dilahirkan di Bandung pada tanggal 15 Januari 1990 dari pasangan Ibu Nuri Rofiah dan Ayah Asep Suparlan. Pada tahun 2007, penulis lulus dari Sekolah Menengah Atas PGRI 1 Bekasi dan diterima menjadi mahasiswa di Institut Pertanian Bogor (IPB) melalui jalur Undangan Seleksi Masuk IPB. Penulis menjadi mahasiswa di Departemen Ilmu Komputer, Fakultas Matematika dan Ilmu Pengetahuan Alam.

(7)

v

DAFTAR ISI

Halaman

DAFTAR GAMBAR ... vi

DAFTAR LAMPIRAN... vi

PENDAHULUAN Latar Belakang ... 1

Tujuan Penelitian ... 1

Ruang Lingkup Penelitian ... 1

TINJAUAN PUSTAKA Rich Internet Application ... 1

Objek Tiga Dimensi (3D) ... 2

Papervision3D ... 2

Kurva Bezier ... 2

Extensible Markup Language (XML) ... 3

Collada ... 3

Sistem Informasi Geografis (SIG) ... 3

Metode Pengujian ... 3

METODE PENELITIAN Analisis Kebutuhan ... 4

Implementasi ... 4

Pengujian ... 4

Lingkungan Implementasi ... 4

HASIL DAN PEMBAHASAN Analisis Kebutuhan ... 4

Desain Aplikasi ... 5

Implementasi Aplikasi ... 6

Pengujian Aplikasi ... 9

KESIMPULAN DAN SARAN Kesimpulan ... 10

Saran ... 10

DAFTAR PUSTAKA ... 11

(8)

vi

DAFTAR GAMBAR

Halaman

1 RIA yang dikembangkan oleh Adobe, Sun, dan Microsoft... 2

2 Struktur objek 3D. ... 2

3 Contoh kurva Bezier... 3

4 Diagram metode penelitian ... 4

5 Denah kampus IPB Dramaga. ... 5

6 Denah kampus IPB Dramaga dijadikan dasar pemodelan. ... 5

7 Pemodelan objek 3D dengan poligon ... 5

8 Tampilan rancangan antarmuka peta 3D. ... 6

9 Tampilan rancangan antarmuka informasi gedung. ... 6

10 Taginstance_geometry pada dokumen dae. ... 6

11 Pemberian id node dan name node ... 6

12 Objek 3D peta IPB hasil Papervision3D... 6

13 Penambahan efek cahaya pada baris program... 7

14 Material gambar atap... 7

15 Elemen library_materials pada dokumen collada. ... 7

16 Penambahan kelas efek bayangan, FlatShadeMaterial (a), GouraudMaterial (b), dan PhongMaterial (c) ... 7

17 Hasil penggunaan efek bayangan,FlatShadeMaterial (a), GouraudMaterial (b), dan PhongMaterial (c) ... 8

18 Penambahan efek pencahayaan pada objek 3D ... 8

19 Contoh kurva quadratic Bezier ... 8

20 Kurva Bezier yang ditambahkan titik pengontrol, satu titik pengontrol (a), dan dua titik pengontrol (b) ... 8

21 Jalur berdasarkan bidang XY (a), bidang XZ (b), dan bidang ZY (c) ... 9

DAFTAR LAMPIRAN

Halaman 1 Kebutuhan fungsional aplikasi. ... 13

2 Use case diagram untuk pengguna ... 14

3 Class diagram aplikasi ... 15

4 Antarmuka aplikasi ... 16

5 Gambar penelusuran jalur aplikasi peta 3D ... 17

6 Pengujian white box aplikasi ... 19

7 Pengujian black box aplikasi ... 23

(9)

PENDAHULUAN

Latar Belakang

Manusia hidup di dalam ruangan atau tempat dan beradaptasi sesuai dengan kebutuhannya. Hal ini mengisyaratkan bahwa dalam membangun suatu aplikasi komputer untuk membantu manusia, kebutuhan manusia sebisa mungkin didekati. Aplikasi komputer tentunya membutuhkan interaksi antara manusia dan komputer yang difokuskan pada cara penyajian informasi dan cara pengguna menyatakan instruksi untuk memperoleh informasi yang diinginkan. Aplikasi komputer tersebut dibuat agar pengguna dapat berinteraksi dengan efektif dan efisien.

Suatu tempat yang luas dan memiliki banyak ruangan sering menimbulkan masalah yang berkaitan dengan kemudahan pengunjung baru dalam menjelajahi tempat untuk pertama kali. Tidak semua orang bisa memberikan informasi sesuai dengan yang diharapkan oleh pengunjung baru. Hal ini bahkan terjadi pada orang yang telah lama tinggal di tempat tersebut yang seharusnya mengetahui informasi tentang tempat itu.

Sebuah denah atau peta kecil sangat bermanfaat dalam pencarian suatu tempat, terutama pada tempat dengan wilayah yang luas. Salah satu contohnya ialah Institut Pertanian Bogor (IPB) Dramaga. Area IPB Dramaga yang luas terkadang dapat menyulitkan seseorang dalam mencari suatu lokasi atau gedung-gedung penting di IPB Dramaga. IPB memiliki denah sebagai petunjuk letak suatu tempat yang telah disajikan dalam website peta virtual IPB Dramaga. Website campus tour IPB Dramaga menggunakan peta virtual konvensional berbentuk dua dimensi dan menggunakan legenda yang dibedakan berdasarkan warna pada peta. Akan tetapi, denah tersebut belum bisa memenuhi keinginan pengunjung baru untuk mengetahui suatu tempat, baik dari segi visualisasi maupun akses yang dilewati. Jika dibandingkan dengan peta virtualtiga dimensi (3D), pengunjung baru bisa lebih mengetahui bentuk dan lokasi tempat tersebut. Peta 3D dapat memberikan pengalaman dan visualisasi yang lebih baik kepada pengguna.

Riajelita (2004) telah membuat pemetaan denah kampus IPB Dramaga menggunakan

MapServer berbasis web, kemudian Nasution (2007) telah membangun sebuah sistem informasi geografis ruangan kampus IPB Dramaga. Aplikasi tersebut menyajikan

beberapa tempat penting di IPB Dramaga. Aplikasi yang telah dibangun masih belum menunjang informasi secara visual untuk pengunjung yang baru pertama kali datang ke IPB. Selain itu, kampus IPB Dramaga saat ini masih dalam tahap melakukan renovasi dan pembangunan gedung-gedung baru. Hal tersebut menyebabkan beberapa lokasi di IPB Dramaga dipindahkan.

Dari masalah yang telah disebutkan dikembangkan aplikasi yang dapat merepresentasikan informasi tempat dan visualisasi yang lebih sesuai dengan kondisi tempat dalam kampus IPB. Aplikasi yang demikian dapat memberikan pengalaman virtual dan kesan yang lebih kuat bagi pengguna serta kemudahan dalam mengakses informasi. Dengan demikian aplikasi ini diharapkan dapat memenuhi kebutuhan pengunjung akan informasi tata ruang dan tata letak gedung di IPB Dramaga. Teknologi berbasis web dengan framework Rich Internet Application (RIA) merupakan teknologi yang cocok digunakan pada aplikasi untuk kebutuhan visualisasi dan informasi.

Tujuan Penelitian

Tujuan penelitian ini ialah mengem-bangkan aplikasi Campus Tour 3D IPB berbasis web dengan framework RIA untuk mempermudah pengguna dalam memperoleh informasi lokasi di IPB Dramaga.

Ruang Lingkup Penelitian

Penelitian ini dilakukan untuk wilayah kampus IPB Dramaga. Lokasi yang akan digunakan dalam pengembangan aplikasi ialah lokasi-lokasi penting di kampus IPB Dramaga yang terletak di ruang terbuka. Pada penelitian ini, pembentukan peta tiga dimensi didasarkan pada denah rancang bangun IPB Dramaga. Pemodelan peta tiga dimensi mengabaikan level dan kontur lahan di IPB. Aplikasi yang akan dibuat dikhususkan berbasis web.

TINJAUAN PUSTAKA

Rich Internet Application

(10)

menyerupai aplikasi berbasis desktop

(Gwardak 2007).

Interaktif, responsif, dan kaya dengan konten merupakan tiga karakteristik umum RIA. Dengan bantuan RIA, aplikasi web dapat memberikan umpan balik lebih cepat karena web tidak harus menampilkan ulang halaman web. Terlebih lagi, RIA sering mengandung animasi dan konten media. Semua aspek ini biasanya memberikan pengalaman yang lebih baik kepada pengguna (Zetie 2005).

Kerangka RIA terbagi menjadi dua kategori: framework berbasis JavaScript atau

AJAX dan framework berbasis plug-in.

Framework berbasis JavaScript atau AJAX

berbasis browser sehingga lebih ringan, sebaliknya framework berbasis plug-in lebih berat karena harus mengunduh dan memasang perangkat yang bersangkutan (Valdes 2009). RIA menyajikan antarmuka visual yang cantik dan interaktif. Sifatnya yang tidak bergantung pada suatu sistem operasi menjadikan RIA bisa menjangkau pengguna komputer lebih banyak (Valdes 2008). Salah satu contoh aplikasi yang dikembangkan dengan

framework RIA berbasis plug-in ialah TweetDeck. Aplikasi tersebut dikembangkan masing-masing oleh Flex dari Adobe, JavaFX dari Sun, dan Silverlight dari Microsoft. Contoh aplikasi RIA dari ketiga pengembang tersebut dapat dilihat pada Gambar 1.

Gambar 1 RIA yang dikembangkan oleh Adobe, Sun, dan Microsoft.

Objek Tiga Dimensi (3D)

Objek 3D terdiri atas titik-titik (vertex) yang saling dihubungkan untuk membentuk kerangka (frame) yang diselimuti oleh

surface. Surface merupakan objek 2D berupa poligon. Struktur objek 3D dapat dilihat pada Gambar 2.

Bentuk interaktif obyek 3D yang berkualitas tinggi membutuhkan sistem pemrosesan grafis yang cukup dengan memperhitungkan hal-hal berikut (Nugroho 2004):

 Tampilan perspektif dari berbagai sudut pandang.

 Pencahayaan, bayangan, dan tekstur.  Translasi dan rotasi gambar 3D pada

resolusi tinggi.

Gambar 2 Struktur objek 3D.

Papervision3D

Papervision3D adalah open source engine

yang membawa 3D ke Flash Player. Papervision3D berbentuk library yang ditulis dalam ActionScript 3.0 yang mudah digunakan dan memungkinkan pengembang untuk membuat 3D pada Flash. Aplikasi yang menggunakan Papervision3D dapat dipasang di web atau dibuat sebagai aplikasi AIR yang dapat diinstal.

Pada dasarnya, Papervision3D terdiri atas satu set folder dengan struktur tertentu. Folder yang terdiri atas kelas modifikasi ActionScript yang memberikan arsitektur well-laid-out, memungkinkan pembuatan konten 3D di Flash. Set folder dimasukkan ke dalam proyek ActionScript, dan diakses dengan cara yang sama seperti mengakses API Flash atau kelas yang mungkin ditulis sendiri. Kelas analog seperti MovieClip, Sprite, dan Button serta tampilan kelas objek ada di dalam library

Papervision3D disebut DisplayObject3D dengan variabel tersendiri, metode, dan properti. Oleh karena itu, setelah menginstalasi set folder, program dapat mengakses variabel DisplayObject3D, metode, dan sifat dalam kelas tersendiri seperti DisplayObject (Winder & Tondeur 2009).

Kurva Bezier

(11)

menggunakan empat titik kontrol, dua di antaranya adalah titik awal dan titik akhir P0

serta P3, dan dua titik lainnya yaitu P1 serta P2

yang mendekati titik kurva. Posisi titik tersebut berfungsi untuk mengontrol kurva.

Convex hull atau poligon kontrol dibentuk oleh titik kontrol kurva yang dapat dilihat pada Gambar 3a dan Gambar 3b (Verth & Bishop 2004).

Gambar 3 Contoh kurva Bezier.

Secara umum kurva Bezier didefinisikan oleh fungsi

Q(u)= ni=0PiJn,i (u) (1)

himpunan �_� adalah titik kontrol, dan

Jn,i(u) = n_i ui (1-u)n-i (2)

n i =

n!

i!n-i! (3)

Extensible Markup Language (XML)

XML adalah standar dokumen markup dari

World Wide Web Consortium (W3C). XML mendefinisikan sintaks umum yang digunakan untuk melakukan markup data dengan tag

sederhana dan mudah terbaca oleh manusia. XML adalah format dokumen paling portabel dan fleksibel yang didesain semenjak ASCII

text file. XML menyediakan format standar untuk dokumen komputer yang cukup fleksibel untuk bermacam-macam domain seperti website, pertukaran data elektronik, vektor grafis, dan lain-lain (Harold & Means 2004).

Collada

Collada (Collaborative Design Activity) adalah skema open standar XML untuk membuat sebuah objek 3D yang dapat dikembangkan secara interaktif. Collada dikembangkan oleh Khoronos Group dan dapat digunakan secara gratis (Asyadiq

2009). Dokumen Collada menggambarkan aset digital dalam bentuk XML yang biasanya diidentifikasi dengan ekstensi *.dae (digital asset exchange).

Sistem Informasi Geografis (SIG)

SIG adalah suatu sistem informasi berbasis komputer yang digunakan untuk menyimpan, mengambil, mencari, menganalisis, dan menampilkan (secara spasial) informasi geografis. Dalam pembuatan SIG, diperlukan data geografis, yaitu suatu himpunan entitas yang memiliki sebuah lokasi. SIG menggunakan informasi wilayah tersebut untuk membuat keputusan (Budiyanto 2002).

Metode Pengujian

Terdapat dua kelas dasar dari pengujian perangkat lunak (Williams 2006), yaitu:

a Black Box Testing

Black box testing merupakan strategi

testing yang hanya memerhatikan faktor fungsionalitas dan spesifikasi perangkat lunak. Berbeda dengan white box, black box testing

tidak membutuhkan pengetahuan mengenai alur internal (internal path), struktur, atau implementasi dari software under test (SUT).

Pendekatan pengujian ini memfokuskan pada kebutuhan fungsional dari sistem. Black box testing ditujukan untuk mengabaikan struktur kontrol dan lebih terfokus terhadap domain informasi.

b White Box Testing

White box testing merupakan strategi pengujian yang diterapkan pada mekanisme internal suatu sistem atau komponen. Strategi ini digunakan untuk melihat mekanisme internal dari suatu produk perangkat lunak, khususnya untuk mengamati struktur dan logika kode-kode program yang ditulis. Pendekatan yang digunakan ialah struktur kontrol dari desain prosedural.

Basis path testing merupakan suatu metode yang digunakan dalam teknik white box testing. Metode basis path ini sangat bermanfaat bagi seorang penguji perangkat lunak dalam menentukan:

 Ukuran kompleksitas logika dari suatu struktur program, prosedur, dan fungsi.  Nilai kompleksitas untuk menentukan

(12)

Metode basis path testing ini memerlukan masukan berupa source code atau algoritme dari suatu perangkat lunak.

METODE PENELITIAN

Penelitian ini dilakukan dalam beberapa tahap. Tahap-tahap tersebut diselesaikan dengan metode penelitian yang dapat dilihat pada Gambar 4. Metode yang digunakan terdiri atas tahap analisis kebutuhan, desain, implementasi, dan pengujian.

Analisis Kebutuhan

Pada tahap awal, dilakukan analisis yang menghasilkan kebutuhan aplikasi berupa spesifikasi perangkat lunak, spesifikasi perangkat keras, kebutuhan fungsional aplikasi, dan data yang dibutuhkan dalam proses pengembangan aplikasi.

Gambar 4 Diagram metode penelitian.

Desain Aplikasi

Setelah tahap analisis dilakukan desain aplikasi. Desain dalam pembuatan aplikasi ini adalah pemodelan 3D denah kampus IPB, desain kebutuhan fungsional aplikasi, dan desain antarmuka aplikasi.

Implementasi

Pada tahap ini dilakukan implementasi pembuatan aplikasi berbasis web. Implementasi yang dilakukan meliputi

visualisasi objek 3D, implementasi antarmuka aplikasi, dan pembuatan fungsi penelusuran jalur.

Pengujian

Penelitian ini menggunakan metode pengujian white box dan black box. Pengujian yang dilakukan secara black box meliputi seluruh hasil keluaran dari fungsi-fungsi yang disediakan aplikasi. Pengujian yang dilakukan secara white box meliputi fungsi visualisasi model peta 3D dan fungsi pembentukan jalur.

Lingkungan Implementasi

Spesifikasi beberapa perangkat keras dan perangkat lunak yang digunakan dalam penelitian ini yaitu:

1 Perangkat keras:

 processor Phenom X4 (Quad Core),  RAM 4GB,

 VGA HIS Radeon HD 6790 1GB, dan  kamera DSLR Canon 1000D.

2 Perangkat lunak:  FlashDevelop,  Flash Player 9,  Google SkecthUp 8,  Notepad++,

 Adobe Flash Builder 4,  Papervision3D, dan  Mozilla Firefox.

HASIL DAN PEMBAHASAN

Analisis Kebutuhan

Aplikasi RIA yang akan dibangun menggunakan framework berbasis plug-in

yang berjalan pada web browser dengan perangkat Flash Player. Hal ini dilakukan karena Papervision3D bekerja pada

framework berbasis plug-in untuk menampilkan visualisasi 3D.

Perangkat lunak yang dibutuhkan dalam pemodelan 3D berfokus pada perancangan bangunan. SkecthUp merupakan modeller

yang dapat memenuhi kebutuhan tersebut. Model objek 3D yang telah diolah ditampilkan oleh Papervision3D agar menjadi lebih interaktif.

(13)

berbasis tiga dimensi. Perangkat keras yang dibutuhkan harus memiliki spesifikasi minimal processor yang mendukung teknologi

dual core dengan RAM minimal 1 GB dan VGA dengan memori minimal 512 MB. Hal ini disebabkan pemodelan objek 3D membutuhkan tenaga yang lebih untuk menggunakan resource komputer.

Tahap analisis kebutuhan fungsional aplikasi membahas fungsi-fungsi yang diperlukan dalam pembangunan aplikasi. Fungsi yang dibutuhkan dalam aplikasi ini berupa fungsi visualisasi peta 3D, fungsi menampilkan informasi, fungsi menampilkan foto, fungsi eksplorasi peta, dan fungsi penelusuran jalur. Fungsi-fungsi pada aplikasi akan disajikan dalam bentuk kode dengan format CampusTour3D-xxx (Lampiran 1).

Data yang digunakan dalam penelitian ini berupa denah rancang bangun atau master plan IPB Dramaga. Data ini digunakan untuk merancang peta 3D IPB. Data situs-situs penting IPB yang diperoleh dari aplikasi

website campus tour IPB digunakan untuk visualisasi informasi.

Desain Aplikasi

Pemodelan 3D denah IPB perlu memerhatikan efisiensi ukuran dan menggunakan poligon yang sederhana. Hal ini dilakukan agar proses pembacaan model 3D pada program menjadi tidak terlalu berat.

Untuk membuat model 3D yang ukuran dan bentuknya sesuai, dibutuhkan denah rancang bangun sebuah lokasi. Penelitian ini menggunakan denah kampus IPB Dramaga sehingga pemodelan 3D bangunan IPB mendekati bentuk bangunan sesungguhnya. Denah kampus IPB Dramaga dapat dilihat pada Gambar 5.

Pada tahap pemodelan, denah kampus IPB Dramaga diletakkan pada sebuah plane dan dibuat objek-objek gedung sesuai dengan cetakan denah. Peletakan denah sebagai plane

dapat dilihat pada Gambar 6. Objek dimodelkan dengan poligon dan vertex

sederhana tanpa mengurangi kesesuaian bentuk gedung yang sebenarnya. Pada Gambar 7, ditunjukkan pemodelan objek gedung yang disesuaikan dari bentuk denah.

Pemodelan fungsional aplikasi dapat dilihat pada use case diagram yang merupakan gambaran dari fungsionalitas yang dapat dilakukan oleh pengguna pada aplikasi.

Use case diagram untuk pengguna dapat

dilihat pada Lampiran 2. Setelah dibuat use case diagram, dirancang pula class diagram

untukmenggambarkan struktur dan deskripsi

class, package, dan object beserta hubungan satu sama lain yang dapat dilihat pada Lampiran 3.

Gambar 5 Denah kampus IPB Dramaga.

Gambar 6 Denah kampus IPB Dramaga dijadikan dasar pemodelan.

Gambar 7 Pemodelan objek 3D dengan poligon.

(14)

Gambar 8 Tampilan rancangan antarmuka peta 3D.

Gambar 9 Tampilan rancangan antarmuka informasi gedung.

Implementasi Aplikasi

Implementasi yang dilakukan ialah visualisasi model 3D yang telah dibuat pada tahap desain. Model 3D tersebut diekspor ke bentuk XML agar bisa diproses oleh Papervision3D. Bentuk XML yang didukung Papervision3D harus berjenis Collada dengan ekstensi *.dae. Terdapat beberapa bagian elemen dae yang ditunjukkan dari nama tag -nya.

Setiap poligon yang membentuk sebuah objek 3D merepresentasikan sebuah elemen geometry dengan nama tag instance_geometry. Contoh elemen geometry

dengan nama tag instance_geometry dapat dilihat pada Gambar 10.

Elemen geometry yang saling berhubungan disatukan menjadi satu elemen dan diberi tag

dengan nama node. Beberapa elemen node

yang saling berhubungan diberi id node dan

name node pada tag-nya sesuai dengan nama bangunan yang dimodelkan. Sebagai contoh, instance_geometry pertama diberi nama “REKTORAT”, yang kedua diberi nama“LSI”, dan seterusnya. Contoh pemberian id node dan name node dapat dilihat pada Gambar 11.

Gambar 10 Taginstance_geometry pada dokumen dae.

Gambar 11 Pemberian id node dan name node.

Elemen instance_geometry yang termasuk situs-situs penting di IPB diberi tag node, sedangkan elemen instance_geometry yang bersifat umum dan penunjang seperti jalur, mata angin, dan danau tidak diberikan tag node.

Dokumen Collada yang berbentuk XML akan diterjemahkan oleh Papervision3D menjadi bentuk objek 3D. Hasil dari terjemahan tersebut akan ditampilkan dalam bentuk objek 3D berbasis Adobe Flash. Tampilan dari objek yang diterjemahkan oleh Papervision3D dapat dilihat pada Gambar 12.

Gambar 12 Objek 3D peta IPB hasil Papervision3D.

(15)

pencahayaan. Untuk memperbaiki hasil visualisasi tersebut, perlu ditambahkan efek pencahayaan dan bayangan pada bagian dinding dan atap objek. Pada objek tersebut, ditambahkan turunan kelas PointLight3D dari Papervision3D di baris program. Kelas tesebut digunakan untuk menambahkan efek cahaya dan pengaktifan kelas bayangan. Penambahan efek cahaya di baris program dapat dilihat pada Gambar 13.

Gambar 13 Penambahan efek cahaya pada baris program.

Library Papervision3D memiliki beberapa kelas untuk memunculkan efek bayangan, antara lain FlatShadeMaterial, Gouraud-Material, dan PhongMaterial. Kelas ini berfungsi untuk memanipulasi dan memberi efek bayangan pada material objek 3D.

Dokumen Collada memiliki elemen

library_materials yang menyusun material objek 3D yang telah dibangun. Material yang tersusun dapat berupa warna, tekstur, dan gambar. Contoh material yang digunakan pada objek 3D dapat berupa file gambar berukuran kecil dengan ekstensi *.png atau *.jpg yang dapat dilihat pada Gambar 14.

Gambar 14 Material gambar atap.

Setiap material yang terpasang memiliki id

dan name pada elemen tag material miliknya. Material yang diketahui id miliknya dapat dimanipulasi. Gambar 15 adalah contoh id dan

name pada tag material.

Manipulasi material dilakukan dengan menambahkan kelas efek bayangan di baris program. Kelas-kelas tersebut diuji satu per satu untuk memberikan bayangan pada material yang dimiliki objek 3D. Kelas efek bayangan yang diujikan antara lain FlatShadeMaterial, GouraudMaterial, dan PhongMaterial. Kelas-kelas tersebut meng-gunakan dua jenis warna untuk membuat efek bayangan. Penambahan efek bayangan di baris program dapat dilihat pada Gambar 16.

Hasil dari kelas-kelas yang telah diujikan dapat dilihat pada Gambar 17. Hasil tersebut menunjukan kelas GouraudMaterial lebih baik

dalam pemberian efek bayangan pada model objek 3D. Dengan demikian dalam aplikasi ini objek 3D menggunakan GouraudMaterial sebagai efek bayangan.

Gambar 15 Elemen library_materials pada dokumen collada.

(a)

(b)

(c)

Gambar 16 Penambahan kelas efek bayangan, FlatShadeMaterial (a),

GouraudMaterial (b), dan PhongMaterial (c).

Kelas GouraudMaterial digunakan untuk memberikan kesan bayangan dengan menggunakan dua warna sebagai shading material terhadap objek. Hasilnya ialah objek yang memiliki warna berbeda di setiap poligon dan memiliki gradasi warna yang menciptakan efek bayangan.

Setelah menggunakan efek pencahayaan dan bayangan, tampilan objek 3D akan lebih terlihat lebih realistis. Gambar 12 adalah hasil terjemahan Papervision3D sebelum diberi efek pencahayaan, sedangkan Gambar 18 adalah objek 3D yang telah diberi efek pencahayaan.

Peta dengan visualisasi 3D dapat dilihat dari koordinat X, Y, dan Z. Setelah hasil visualisasi 3D, aplikasi dilanjutkan dengan pembentukan jalur. Jalur yang dibentuk dapat ditelusuri sehingga memberi kesan menjelajah pada pengguna.

(16)

pengguna untuk mencari lokasi pada peta 3D. Bentuk tampilan antarmuka aplikasi dapat dilihat pada Lampiran 4.

(a)

(b)

(c)

Gambar 17 Hasil penggunaan efek bayangan, FlatShadeMaterial (a),

GouraudMaterial (b), dan PhongMaterial (c).

Gambar 18 Penambahan efek pencahayaan pada objek 3D.

Pembentukan jalur dibentuk dari persamaan kurva quadratic Bezier. Kurva

quadratic Bezier membentuk kurva dengan tiga titik pengontrol. Titik tersebut menghubungkan titik awal (P0) sampai ke titik akhir (P2) dan dikontrol dengan titik Bezier (P1). Contoh kurva quadratic Bezier dapat dilihat pada Gambar 19. Setiap kurva hasil persamaan kurva quadratic Bezier disusun menjadi jalur yang dapat dimanipulasi koordinatnya berdasarkan sumbu X, Y, Z.

Gambar 19 Contoh kurva quadratic Bezier.

Setiap kurva yang dibentuk oleh persamaan kurva quadratic Bezier saling dihubungkan menjadi satu bentuk jalur yang utuh. Penambahan titik Bezier pada kurva akan menjadi titik pengontrol baru dan membentuk kurva quadratic Bezier baru. Titik pengontrol pada kurva tersebut dijadikan titik koordinat untuk pembentukan jalur. Contoh kurva Bezier dengan penambahan titik pengontrol dapat dilihat pada Gambar 20.

(a)

(b)

Gambar 20 Kurva Bezier yang ditambahkan titik pengontrol, satu titik pengontrol (a), dua titik pengontrol (b).

(17)

dua kurva Bezier, yaitu (P0-Q1) dan (Q1-P2) dengan dua titik pengontrol (O1) dan (O2).

Pembentukan jalur disusun dengan 12 titik Bezier. Dua titik sebagai titik awal dan titik akhir, sedangkan sepuluh titik lainnya menjadi titik pengontrol. Setiap titik memiliki nilai koordinat X,Y, dan Z untuk membentuk kesesuaian kurva dengan jalur pada peta 3D.

Berdasarkan sudut pandangnya, bentuk jalur pada aplikasi ini dibagi menjadi tiga bagian bidang koordinat, yaitu bidang XY, bidang XZ, dan bidang ZY. Contoh jalur yang dibentuk berdasarkan bidang koordinat masing-masing pada Gambar 21.

Penelusuran jalur diperoleh dari hasil pembentukan jalur. Pada peta 3D, penelusuran jalur dilakukan dengan kamera yang bergerak dari sudut pandang pengguna mengikuti kurva yang dibentuk sesuai dengan jalur pada peta 3D. Bidang koordinat XY, XZ, dan ZY menggunakan lingkaran berwarna hijau sebagai penanda kamera yang mengikuti bentuk jalur. Kecepatan penelusuran jalur ditentukan dari banyaknya titik yang membentuk kurva. Semakin banyak titik yang membentuk kurva, kecepatan penelusuran semakin lambat.

Pengujian Aplikasi

Setelah aplikasi dibangun, dilakukan pengujian fungsi. Fungsi penelusuran jalur diujikan dengan pembentukan jalur. Jalur dapat dibentuk dengan menekan dan menggeser titik koordinat pada bidang XY, XZ, atau ZY. Aplikasi dapat menelusuri jalur yang telah dibentuk sehingga memberikan kesan menjelajahi denah kampus IPB Dramaga. Gambar penelusuran jalur aplikasi peta 3D dapat dilihat pada Lampiran 5.

Fungsi-fungsi yang diuji secara white box

hanya fungsi penting dalam aplikasi, yaitu fungsi visualisasi 3D dan penelusuran jalur. Hasil pengujian white box pada fungsi visualisasi 3D menghasilkan visualisasi objek 3D yang dapat menampilkan informasi. Baris program yang memiliki kesalahan tidak dapat menampilkan visualisasi objek 3D. Fungsi penelusuran jalur yang diujikan secara white box menghasilkan pergerakan kamera yang bergerak mengikuti bentuk jalur. Baris program yang memiliki kesalahan menghasilkan kamera yang tidak dapat bergerak menelusuri jalur yang dibentuk.

Fungsi yang diujikan secara black box

ialah seluruh fungsi yang disediakan aplikasi

dengan hasil output yang sesuai. Pengujian

black box dilakukan oleh pengguna sebanyak 12 orang yang terdiri atas 2 mahasiswa TPB IPB, 6 mahasiswa IPB dari berbagai fakultas, dan 4 orang alumni IPB. Bentuk pengujian

white box dan black box beserta hasilnya dapat dilihat pada Lampian 6 dan Lampiran 7.

(a)

(b)

(c)

Gambar 21 Jalur berdasarkan bidang XY (a), bidang XZ (b), dan

bidang ZY (c).

(18)

situs-situs penting di IPB Dramaga. Kesesuaian peta 3D dengan peta 2D diujikan menggunakan kuesioner. Kuesioner disebar kepada 10 responden. Responden terdiri atas 3 mahasiswa baru IPB (TPB), 5 mahasiswa IPB dari berbagai jurusan dan fakultas yang berbeda, dan 2 alumni IPB. Hasil kuesioner pada Lampiran 8 dapat dilihat pada Tabel 1.

Tabel 1 Hasil Kuesioner

Pertanyaan Jumlah A

Jumlah B

Jumlah C

No. 1 10 0 0

No. 2 6 0 4

No. 3 9 0 1

No. 4 4 0 6

No. 5 10 0 0

No. 6 3 2 5

No. 7 5 0 5

No. 8 10 0 0

No. 9 10 0 0

Total(%) 74,4% 2,2% 23,4%

Keterangan: A = Memuaskan B = Tidak memuaskan C = Cukup memuaskan

Pada pertanyaan pertama dari kuesioner evaluasi, mengenai tampilan aplikasi yang berbentuk peta 3D IPB, 100% responden memberikan nilai memuaskan. Hal tersebut disebabkan seluruh responden sudah mengetahui bentuk umum denah IPB. Pertanyaan kedua menjelaskan tentang peta 3D yang ditampilkan aplikasi sesuai dengan denah IPB yang sebenarnya. Responden menjawab bahwa 60% dari peta 3D yang ditampilkan aplikasi sesuai. Responden menganggap kesesuaian peta 3D dari bentuk objek bangunannya, namun terdapat kekurangan di bagian warna dan tekstur objek sehingga koresponden sedikit sulit untuk mengenali objek 3D. Pertanyaan ketiga menjelaskan aplikasi dapat membantu pengguna mencari dan mengenali lokasi-lokasi penting di IPB. Hal ini disebabkan koresponden dapat langsung mencari lokasi yang divisualisasikan dengan objek 3D. Pertanyaan keempat menjelaskan kemudahan mencari lokasi-lokasi di IPB dengan peta 3D dibandingkan dengan peta 2D. Sebanyak 60% koresponden menjawab cukup memuaskan. Hal ini disebabkan pengguna harus memeriksa satu persatu bangunan pada peta 3D. Pertanyaan kelima menjelaskan tentang penggunaan peta 3D lebih baik dibandingkan peta 2D. Koresponden menilai peta 3D lebih

baik dalam hal visualisasi karena akan tampak lebih realistis. Pertanyaan keenam menjelaskan pelatihan untuk menggunakan aplikasi ini. Responden menilai perlu diberikan latihan atau petunjuk secara jelas dalam menggunakan aplikasi peta 3D. Pertanyaan kedelapan menjelaskan tentang kesesuaian peta 3D dengan peta 2D. Seluruh responden menilai peta 3D pada aplikasi sesuai dengan bentuk peta 2D. Pertanyaan kesembilan menjelaskan tentang nilai keseluruhan aplikasi yang telah dibuat. Responden menilai aplikasi ini memuaskan.

KESIMPULAN DAN SARAN

Kesimpulan

Penelitian ini menghasilkan aplikasi RIA peta 3D IPB Dramaga berbasis Adobe Flash. Visualisasi peta berbentuk 3D disesuaikan dengan denah rancang bangun IPB. Pemilihan material dan efek pencahayaan yang tepat dapat memvisualisasikan objek 3D yang lebih baik. Antarmuka aplikasi dirancang menyerupai bentuk peta sehingga dapat digunakan untuk mencari informasi gedung dan menjelajah kampus IPB Dramaga secara interaktif.

Peta 3D dapat ditambahkan model objek 3D baru. Objek tersebut ditambahkan pada dokumen pemodelan objek 3D sebelumnya yang menggunakan denah rancang bangun yang sama. Model objek 3D yang telah ditambah objek baru diekspor ke bentuk Collada dan diberikan tag node dengan id dan

name yang sesuai dari bentuk objek tersebut.

Saran

Pada pemodelan objek 3D dapat digunakan material baking texture yang menggabungkan bayangan, pencahayaan, refleksi, atau seluruh objek 3D ke dalam suatu gambar. Penggunaan

baking texture dapat meningkatkan tingkat realistisitas objek tanpa menambah beban kerja program.

Untuk penelitian selanjutnya, dapat dikembangkan aplikasi RIA dengan

(19)

DAFTAR PUSTAKA

Asyadiq H. 2009. Model pembuatan peta virtual interaktif dengan visualisasi tiga dimensi berbasis RIA (Rich Internet Application) studi kasus Universitas Pendidikan Indonesia [skripsi]. Bandung: Departemen Ilmu Komputer, Universitas Pendidikan Indonesia.

Budiyanto E. 2002. Sistem Informasi Geografis Menggunakan Arc View GIS. Yogyakarta: Andi.

Gwardak L. 2007. Exploring Usability Guidelines for Rich Internet Applications. Lund: Department of Informatics, Lund University.

Harold ER, Means WS. 2004. XML in a Nutshell. Sebastopool: O’Reilly.

Nasution RH. 2007. SIG (Sistem Informasi Goegrafis) ruangan kampus IPB Dramaga [skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor.

Nugroho WA. 2004. Pengembangan sistem virtual room navigator dengan visualisasi 3D[skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor.

Riajelita L. 2004. Pemetaan berbasis web

dengan menggunakan MapServer dan

PhpMapScript [skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor.

Valdes R. 2008. Market Scope for Ajax Technology and RIA Platforms. Stampford: Gartner.

Valdes R. 2009. Key Issues in Rich Internet Application Platforms and User Experience. Stampford: Gartner.

Verth JM van, Bishop LM. 2004. Essential Mathematics for Games and Interactive Applications: A Programmer’s Guide. California: Morgan Kaufmann.

Williams L. 2006. A (Partial) Introduction to Software Engineering Practices and Methods.

http://www.cs.umd.edu/~mvz/cmsc435-s09/pdf/Williams-draft-book.pdf. Ed ke-5. [12 Juli 2012].

Winder J, Tondeur P. 2009. Papervision3D Essentials. Birmingham: Packt Publ.

(20)

(21)

Lampiran 1 Kebutuhan fungsional aplikasi

Kode Fungsi

CampusTour3D-001 Fungsi untuk menampilkan objek 3D dari collada menjadi objek _{visual berbentuk peta 3D.}

CampusTour3D-002 Fungsi untuk memungkinkan pengguna mengeksplorasi peta 3D _IPB.

CampusTour3D-003 Fungsi untuk menampilkan keterangan dari lokasi di IPB pada _{peta 3D.}

CampusTour3D-004 Fungsi untuk menampilkan foto dari lokasi di IPB pada peta 3D.

CampusTour3D-005 Fungsi untuk menampilkan legenda peta pada aplikasi.

CampusTour3D-006 Fungsi untuk mengubah titik Bezier pembentuk jalur pada bidang _{XY, XZ, dan ZY.}

CampusTour3D-007 Fungsi untuk menambah titik Bezier pembentuk jalur pada bidang _{XY, XZ, dan ZY.}

CampusTour3D-008 Fungsi untuk mengurangi titik Bezier pembentuk jalur pada _{bidang XY, XZ, dan ZY.}

CampusTour3D-009 Fungsi untuk menelusuri jalur yang terbentuk dan divisualisasikan _{pada peta 3D.}

CampusTour3D-010 Fungsi untuk menghentikan penelusuran jalur pada peta 3D dan _{mengembalikan posisi kamera ke titik awal.}

(22)

Lampiran 2 Use case diagram untuk pengguna

Pengguna

Melihat peta 3D IPB

Eksplorasi peta 3D IPB

Melihat keterangan lokasi

IPB

Melihat foto lokasi IPB

Melihat legenda peta IPB

Mengubah titik Bezier pada jalur

Menambah titik Bezier pada jalur

Mengurangi titik Bezier pada jalur

Menelusuri jalur peta 3D

Memberhentikan penelusuran jalur

(23)

Lampiran 3 Class diagram aplikasi

FotoPanel

panel : Sprite pic : Picture

+FotoPanel() +initData(String) #redraw() -closeMouseClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int) SiteTest

materialAsset : Class cameraPitch : Num cameraYaw : Num isOrbiting : Boolean previousMouseX : Num previousMouseY : Num light : PointLight3D dae :DAE objList :Array tooltip : ImageToolTip legenda:Legenda daeName : String idList :Array

pointPoint : DraggablePoint bezierControlPoint : DraggableControlPoint viewXY : Viewport viewXZ : Viewport viewZY : Viewport p1 : Object p2 : Object selectedPoint : Num controlPoints : Array curvePoints : Array targetTravel : Boolean

+SiteTest()

+getControlPoint(Num) +redrawViewpoets() +addControlPoint (Num, Num, Num, Num) +removeControlPoint(Num) +setSelectedPoint(Num) +removeCurrentPoint() +stopTravel() +startTravel() -init3D() -renderTick(Event) -mouseWheelHandler (MouseEvent) -onMouseDown(MouseEvent) -onMouseUp(MouseEvent) -onMouseMove(MouseEvent) #loadDataComplete(Event) #obj3d_MouseOver(MouseEvent) #obj3d_MouseOut(MouseEvent) #obj3d_Click(MouseEvent)

_width : Int _height : Int closeSprite : Sprite picClose : Loader menuFoto : Sprite panelFoto : Sprite panelKeterangan : Sprite picKeterangan : Picture lblKeterangan : TextField fotoPanel : FotoPanel currentId : String

InfoPanel +InfoPanel() -loadDataComplete(Event) #imgClick(Event) +initData(String, String) #redraw() #menuFotoClick (MouseEevent) #menuKeteranganClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int) ImageToolTip

_width : Int _height : Int pic : Picture lbl : TextField

+ImageToolTip +redraw() +initData (String, String) -closeMouseClick (MouseEvent) +getWidth() +setWidth(int) +getHight() +setHeight(int) Viewport

ball : TravelBall controlPoints : Array curvePoints : Array sizeW : Num sizeY : Num viewType : String d1 :String d2 :String p1 :DraggablePoint p2 :DraggablePoint +Viewport() +setSize(Num, Num) +addControlPoint (Num) +removeControlPoint (Num) +redraw() +redrawPath() +drawCurvePoints (Num, Num) +drawLinePoints (Num, Num) +pennerPointOnCurve (Object, Object, Object) +stopTravel() +startTravel (Array, Num, Num)

DraggablePoint

isBezier : Boolean point :MovieClip +DraggablePoint() -startToDrag (MouseEvent) -stopToDrag (MouseEvent) -mouseMove (MouseEvent) DraggableControlPoint control :MovieClip +DraggableControlPoint() Picture

mode : Int clickable :Boolean tag : String

+Picture() +redraw() +getImage() +setImage() +isClickable() Legenda _width :Int _height :Int menuLegenda : Sprite

+Legenda() +drawLineBangun() Help

mcHelp :MovieClip picHelp :Loader ketHelp : Spirte PicKetHelp :Loader

+Help()

(24)

Lampiran 4 Antarmuka aplikasi

1 Gambar antarmuka utama aplikasi

(25)

Lampiran 5 Gambar penelusuran jalur aplikasi peta 3D

1 Gambar penelusuran jalur peta 3D pada titik pertama(posisi titik hijau).

(26)

Lanjutan

3 Gambar penelusuran jalur peta 3D pada titik keempat(posisi titik hijau).

(27)

Lampiran 6 Pengujian white box aplikasi

1 Tabel Pengujian white box fungsi visualisasi model peta 3D

Flow Graph Source Code

protected function loadDataComplete (event : Event) : void

(1) logError (“sini”)

setting : String = loaderData.data

lines : Array = setting.split

(“\n”)

(2) IF lines.length > 1

(3) daeName = trims( lines[0] )

(4) FOR i=1 < lines.length

(5) idList.push( trim( lines[i] ))

(6) next i

(7) init3D()

(8) gotoError

(9) END IF

Base path :

1 1 – 2 – 3 – 4 – 5 – 6 – 4 – 5 – 6 – …. – 7 – 9

2 1 – 2 – 3 – 4 – 5 – 6 – 7 – 9

(28)

Lanjutan

2 Tabel pengujian white box visualisasi model peta 3D

Flow Graph Source Code

protected function map_LoadCompleteHandler (event : FileLoadEvent):void

(1) PointLight3d()

(2) gouraudMaterial = new GouraudMaterial

(3) dae.replaceMaterialByName

(gouraudMaterial,”ID106”)

dae.replaceMaterialByName

(gouraudMaterial,”ID114”) dae.replaceMaterialByName

(gouraudMaterial,”ID4”) dae.replaceMaterialByName

(gouraudMaterial,”ID122”) dae.scale = 6

scene.addChild(dae)

(4) FOR i=0 < idList.length

(5) IF data.length > 1

(6) obj = DisplayObject3D

obj = dae.getChildByName(data[0],true)

(7) IF obj is DisplayObject3D

(8) viewport : ViewportLayer

viewport =

viewport.containerSprite.getChildLaye r (obj, true, true)

viewport.addEventListener (MouseEvent.MOUSE_OVER, obj3d_MouseOver)

viewport.addEventListener (MouseEvent.MOUSE_OUT, obj3d_MouseOut)

viewport.addEventListener (MouseEvent.MOUSE_CLICK, obj3d_Click)

(9) gotoError

(10) END IF

(11) gotoError

(12) END IF

(13) Next i

Base Path :

1 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 10 – 12 – 13 – 4 – 5 – 6 – 7 – 8 – 10 – 12 – 13 – …

2 1 – 2 – 3 – 4 – 5 – 6 – 7 – 9 – 10 – 12 – 13 – 4 – 5 – 6 – 7 – 9 – 10 – 12 – 13 – …

3 1 – 2 – 3 – 4 – 5 – 11 – 12 – 13 – 4 – 5 – 11 – 12 – 13 – …

(29)

Lanjutan

3 Tabel pengujian white box pembentukan jalur

public function redrawPath():void

(1) IF true p1

(2) return p1

(3) gotoError

(4) END IF

(5) FOR i=0 < curvePoints.length

(6) removeChild(curvePoints[i])

curvePoints[i] = null

(7) Next i

(8) curvePoints = []

g : Graphics = graphics startX : Number = p1.x startY : Number = p1.y endX : Number

endY : Number

thisPoint : MovieClip nextPoint : MovieClip

g.lineStyle (2, 0x000000, 0.8) gmoveTo(startX, startY)

(9) FOR i=0 <

controlPoints.length-1

(10) g.curveTo (thisPoint.x,

thisPoint.y, endX, endY) draw (startX, startY, thisPoint.x, thisPoint.y, endX, endY)

(11) Next i

(12) IF controlPoints.length > 0

(13) lastPoint : movieClip =

controlPoints[ControlPoints. length – 1]

g.curveTo (lastPoint.x, lastPoint.y, p2.x, p2.y) drawCurvePoints (startX, startY, lastPoint.x, lastPoint.y, p2.x, p2.y)

(14) ELSE

g.lineTo (p2.x, p2.y) drawLinePoints (startX,

startY, p2.x, p2.y)

(15) END IF

(16) g.moveTo (p1.x, p1.y)

(17) FOR i=0 <

controlPoints.length

(18) thisPoint = controlPoints[i]

(30)

Lanjutan

(19) Next i

(20) g.lineTo (p2.x, p2.y)

setChildrenIndex (p1, numChildren -1) setChildrenIndex (p2,

numChildren -1)

(21) FOR i=0 <

controlPoints.length

(22) setChildIndex

(controlPoints[i],

numChildren -1)

(23) Next i

(24) stopTravel()

Base Path :

1 1 – 2 – 4 – 5 – 6 – 7 – 5 – 6 – 7 – … – 8 – 9 – 10 – 11 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24

2 1 – 2 – 3 – 5 – 6 – 7 – 5 – 6 – 7 –… – 8 – 9 – 10 – 11 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24

3 1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 9 – 10 – 11 – … – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24

4 1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – … – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24

5 1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 12 – 14 – 15 – 16 – 17 – 18 – 19 – 17 – 18 – 19 – … – 20 – 21 – 22 – 23 – 21 – 22 – 23 – 24

6 1 – 2 – 4 – 5 – 6 – 7 – 8 – 9 – 10 – 11 – 12 – 13 – 15 – 16 – 17 – 18 – 19 – 20 – 21 – 22 – 23 –

21 – 22 – 23 –… – 24

(31)

Lampiran 7 Pengujian black box aplikasi

Kode Deskripsi Uji Kondisi Awal Skenario Uji Hasil yang Diharapkan Hasil Uji Campus Tour3D -001 Menampilkan visualisai peta 3D

Halaman utama aplikasi Melihat tampilan peta 3D

Tampilan peta 3D OK

Campus Tour3D -002 Mengeksplorasi peta 3D Halaman utama aplikasi Klik dan geser, scroll up dan

scroll down

Rotasi peta 3D dan

zoom in / zoom out OK

Campus Tour3D -003

Menampilkan keterangan lokasi pada peta 3D

Halaman utama aplikasi

Klik objek 3D pada peta

Tampilan halaman

informasi lokasi OK

Menampilkan foto lokasi pada peta 3D

Halaman informasi lokasi

Klik tombol

menu ”Foto” Tampilan halaman foto lokasi OK

Menampilkan legenda peta 3D

Halaman utama aplikasi Melihat tampilan legenda Tampilan legenda

di halaman utama OK

Mengubah titik Bezier sesuai bidang koordinat XY, XZ, dan ZY Halaman utama aplikasi Klik dan geser titik Bezier pada salah satu bidang koordinat Titik Bezier berubah posisi pada bidang koordinat XY, XZ, dan ZY

OK

Menambah titik Bezier sesuai bidang koordinat XY, XZ, dan ZY Halaman utama aplikasi Klik tombol menu ”+ Titik Bezier” Titik Bezier bertambah pada bidang koordinat XY, XZ, dan ZY

OK

Mengurangi titik Bezier sesuai bidang koordinat XY, XZ, dan ZY Halaman utama aplikasi Klik tombol menu ”- Titik Bezier” Titik Bezier berkurang pada bidang koordinat XY, XZ, dan ZY

OK Campus Tour3D -009 Menelusuri jalur yang terbentuk dengan kamera divisualisasikan pada peta 3D

Halaman utama aplikasi Klik tombol menu ”Telusuri Jalur” Kamera bergerak mengikuti jalur yang terbentuk OK Campus Tour3D -010 Menghentikan kamera yang menelusuri jalur Halaman utama aplikasi Klik tombol menu ”Stop / Eksplorasi” Kamera berhenti dan kembali ke posisi semula OK Campus Tour3D -011 Memberikan petunjuk kepada pengguna Halaman utama aplikasi Mouse over lambang tanda tanya Tampilan informasi

(32)

Lampiran 8 Kuesioner evaluasi kesesuaian peta 3D dengan peta 2D

Nama :

Tanggal Lahir :

Pekerjaan :

Pendidikan :

Jenis Kelamin :

Kuesioner ini dibuat untuk mendapatkan informasi dari implementasi aplikasi Campus Tour 3D IPB. Terima kasih Anda telah turut berpartisipasi dalam pengisian kuesioner ini. Silahkan memilih satu jawaban Anda dari setiap pertanyaan di bawah ini

:

Berikan tanda lingkaran (O) untuk jawaban yang menurut anda paling tepat.

1. Apakah tampilan aplikasi ini berbentuk peta 3D IPB? a. Iya

b. Tidak c. Cukup

2. Apakah aplikasi peta 3D yang ditampilkan sesuai dengan denah IPB? a. Iya

b. Tidak c. Cukup

3. Apakah aplikasi peta 3D ini dapat membantu anda mengenali lokasi-lokasi seperti Fakultas, Asrama, dan berbagai Fasilitas di IPB?

a. Iya b. Tidak c. Cukup

4. Apakah anda mudah mencari lokasi-lokasi penting di IPB dengan aplikasi peta 3D ini? a. Iya

b. Tidak c. Cukup

5. Apakah penggunaan peta 3D ini lebih baik dari penggunaan peta 2D? a. Iya

b. Tidak c. Cukup

6. Apakah anda perlu latihan menggunakan aplikasi ini? a. Iya

b. Tidak c. Cukup

7. Setelah menggunakan aplikasi ini apakah anda dapat mengetahui denah IPB? a. Iya

b. Tidak c. Cukup

8. Apakah visualisasi objek peta 3D IPB sesuai dengan peta 2D IPB? a. Iya

(33)

Lanjutan

9. Pendapat anda tentang nilai keseluruhan aplikasi ini?

a. Baik b. Buruk c. Cukup

(34)

ABSTRACT

FIQRI, RILAN MUHAMMAD. Rich Internet Application Campus Tour 3D of Bogor Agricultural University. Under supervision of FIRMAN ARDIANSYAH.

Problem of location information has became a general thing that happens in every place, especially in locations that are spacious and have lots of room. Problems posed related to the ease of new visitors in exploring the place for the first time. This problem can be solved by the application of information which represents a place and a more interactive visualization. RIA Rich Internet Application (RIA) is a suitable technology to create interactive applications in terms of information or visualization. RIA is divided into two categories based on the framework: a framework based on JavaScript / AJAX and framework based on plug-ins.

This study presents the application of RIA IPB web based campus tour. This application uses framework based on plug-ins. Application interface is designed to resemble a map. The application displays a 3D map of IPB to the user and displays information of important places in IPB. In addition, this application can trace the path in the map to give the impression of exploration for user. The pathway is formed by the Bezier curve equation in the XY fields, XZ fields, ZY fields. The formed lines can be manipulated based on the X, Y, and Z coordinates.

(35)

PENDAHULUAN

Latar Belakang

Manusia hidup di dalam ruangan atau tempat dan beradaptasi sesuai dengan kebutuhannya. Hal ini mengisyaratkan bahwa dalam membangun suatu aplikasi komputer untuk membantu manusia, kebutuhan manusia sebisa mungkin didekati. Aplikasi komputer tentunya membutuhkan interaksi antara manusia dan komputer yang difokuskan pada cara penyajian informasi dan cara pengguna menyatakan instruksi untuk memperoleh informasi yang diinginkan. Aplikasi komputer tersebut dibuat agar pengguna dapat berinteraksi dengan efektif dan efisien.

Suatu tempat yang luas dan memiliki banyak ruangan sering menimbulkan masalah yang berkaitan dengan kemudahan pengunjung baru dalam menjelajahi tempat untuk pertama kali. Tidak semua orang bisa memberikan informasi sesuai dengan yang diharapkan oleh pengunjung baru. Hal ini bahkan terjadi pada orang yang telah lama tinggal di tempat tersebut yang seharusnya mengetahui informasi tentang tempat itu.

Sebuah denah atau peta kecil sangat bermanfaat dalam pencarian suatu tempat, terutama pada tempat dengan wilayah yang luas. Salah satu contohnya ialah Institut Pertanian Bogor (IPB) Dramaga. Area IPB Dramaga yang luas terkadang dapat menyulitkan seseorang dalam mencari suatu lokasi atau gedung-gedung penting di IPB Dramaga. IPB memiliki denah sebagai petunjuk letak suatu tempat yang telah disajikan dalam website peta virtual IPB Dramaga. Website campus tour IPB Dramaga menggunakan peta virtual konvensional berbentuk dua dimensi dan menggunakan legenda yang dibedakan berdasarkan warna pada peta. Akan tetapi, denah tersebut belum bisa memenuhi keinginan pengunjung baru untuk mengetahui suatu tempat, baik dari segi visualisasi maupun akses yang dilewati. Jika dibandingkan dengan peta virtualtiga dimensi (3D), pengunjung baru bisa lebih mengetahui bentuk dan lokasi tempat tersebut. Peta 3D dapat memberikan pengalaman dan visualisasi yang lebih baik kepada pengguna.

Riajelita (2004) telah membuat pemetaan denah kampus IPB Dramaga menggunakan

MapServer berbasis web, kemudian Nasution (2007) telah membangun sebuah sistem informasi geografis ruangan kampus IPB Dramaga. Aplikasi tersebut menyajikan

beberapa tempat penting di IPB Dramaga. Aplikasi yang telah dibangun masih belum menunjang informasi secara visual untuk pengunjung yang baru pertama kali datang ke IPB. Selain itu, kampus IPB Dramaga saat ini masih dalam tahap melakukan renovasi dan pembangunan gedung-gedung baru. Hal tersebut menyebabkan beberapa lokasi di IPB Dramaga dipindahkan.

Dari masalah yang telah disebutkan dikembangkan aplikasi yang dapat merepresentasikan informasi tempat dan visualisasi yang lebih sesuai dengan kondisi tempat dalam kampus IPB. Aplikasi yang demikian dapat memberikan pengalaman virtual dan kesan yang lebih kuat bagi pengguna serta kemudahan dalam mengakses informasi. Dengan demikian aplikasi ini diharapkan dapat memenuhi kebutuhan pengunjung akan informasi tata ruang dan tata letak gedung di IPB Dramaga. Teknologi berbasis web dengan framework Rich Internet Application (RIA) merupakan teknologi yang cocok digunakan pada aplikasi untuk kebutuhan visualisasi dan informasi.

Tujuan Penelitian

Tujuan penelitian ini ialah mengem-bangkan aplikasi Campus Tour 3D IPB berbasis web dengan framework RIA untuk mempermudah pengguna dalam memperoleh informasi lokasi di IPB Dramaga.

Ruang Lingkup Penelitian

Penelitian ini dilakukan untuk wilayah kampus IPB Dramaga. Lokasi yang akan digunakan dalam pengembangan aplikasi ialah lokasi-lokasi penting di kampus IPB Dramaga yang terletak di ruang terbuka. Pada penelitian ini, pembentukan peta tiga dimensi didasarkan pada denah rancang bangun IPB Dramaga. Pemodelan peta tiga dimensi mengabaikan level dan kontur lahan di IPB. Aplikasi yang akan dibuat dikhususkan berbasis web.

TINJAUAN PUSTAKA

Rich Internet Application

(36)

menyerupai aplikasi berbasis desktop

(Gwardak 2007).

Interaktif, responsif, dan kaya dengan konten merupakan tiga karakteristik umum RIA. Dengan bantuan RIA, aplikasi web dapat memberikan umpan balik lebih cepat karena web tidak harus menampilkan ulang halaman web. Terlebih lagi, RIA sering mengandung animasi dan konten media. Semua aspek ini biasanya memberikan pengalaman yang lebih baik kepada pengguna (Zetie 2005).

Kerangka RIA terbagi menjadi dua kategori: framework berbasis JavaScript atau

AJAX dan framework berbasis plug-in.

Framework berbasis JavaScript atau AJAX

berbasis browser sehingga lebih ringan, sebaliknya framework berbasis plug-in lebih berat karena harus mengunduh dan memasang perangkat yang bersangkutan (Valdes 2009). RIA menyajikan antarmuka visual yang cantik dan interaktif. Sifatnya yang tidak bergantung pada suatu sistem operasi menjadikan RIA bisa menjangkau pengguna komputer lebih banyak (Valdes 2008). Salah satu contoh aplikasi yang dikembangkan dengan

framework RIA berbasis plug-in ialah TweetDeck. Aplikasi tersebut dikembangkan masing-masing oleh Flex dari Adobe, JavaFX dari Sun, dan Silverlight dari Microsoft. Contoh aplikasi RIA dari ketiga pengembang tersebut dapat dilihat pada Gambar 1.

Gambar 1 RIA yang dikembangkan oleh Adobe, Sun, dan Microsoft.

Objek Tiga Dimensi (3D)

Objek 3D terdiri atas titik-titik (vertex) yang saling dihubungkan untuk membentuk kerangka (frame) yang diselimuti oleh

[image:36.595.334.507.166.279.2]

surface. Surface merupakan objek 2D berupa poligon. Struktur objek 3D dapat dilihat pada Gambar 2.

Bentuk interaktif obyek 3D yang berkualitas tinggi membutuhkan sistem pemrosesan grafis yang cukup dengan memperhitungkan hal-hal berikut (Nugroho 2004):

 Tampilan perspektif dari berbagai sudut pandang.

 Pencahayaan, bayangan, dan tekstur.  Translasi dan rotasi gambar 3D pada

resolusi tinggi.

Gambar 2 Struktur objek 3D.

Papervision3D

Papervision3D adalah open source engine

yang membawa 3D ke Flash Player. Papervision3D berbentuk library yang ditulis dalam ActionScript 3.0 yang mudah digunakan dan memungkinkan pengembang untuk membuat 3D pada Flash. Aplikasi yang menggunakan Papervision3D dapat dipasang di web atau dibuat sebagai aplikasi AIR yang dapat diinstal.

Pada dasarnya, Papervision3D terdiri atas satu set folder dengan struktur tertentu. Folder yang terdiri atas kelas modifikasi ActionScript yang memberikan arsitektur well-laid-out, memungkinkan pembuatan konten 3D di Flash. Set folder dimasukkan ke dalam proyek ActionScript, dan diakses dengan cara yang sama seperti mengakses API Flash atau kelas yang mungkin ditulis sendiri. Kelas analog seperti MovieClip, Sprite, dan Button serta tampilan kelas objek ada di dalam library

Papervision3D disebut DisplayObject3D dengan variabel tersendiri, metode, dan properti. Oleh karena itu, setelah menginstalasi set folder, program dapat mengakses variabel DisplayObject3D, metode, dan sifat dalam kelas tersendiri seperti DisplayObject (Winder & Tondeur 2009).

Kurva Bezier

(37)

menggunakan empat titik kontrol, dua di antaranya adalah titik awal dan titik akhir P0

serta P3, dan dua titik lainnya yaitu P1 serta P2

yang mendekati titik kurva. Posisi titik tersebut berfungsi untuk mengontrol kurva.

[image:37.595.110.286.198.489.2]

Convex hull atau poligon kontrol dibentuk oleh titik kontrol kurva yang dapat dilihat pada Gambar 3a dan Gambar 3b (Verth & Bishop 2004).

Gambar 3 Contoh kurva Bezier.

Secara umum kurva Bezier didefinisikan oleh fungsi

Q(u)= ni=0PiJn,i (u) (1)

himpunan �_� adalah titik kontrol, dan

Jn,i(u) = n_i ui (1-u)n-i (2)

n i =

n!

i!n-i! (3)

Extensible Markup Language (XML)

XML adalah standar dokumen markup dari

World Wide Web Consortium (W3C). XML mendefinisikan sintaks umum yang digunakan untuk melakukan markup data dengan tag

sederhana dan mudah terbaca oleh manusia. XML adalah format dokumen paling portabel dan fleksibel yang didesain semenjak ASCII

text file. XML menyediakan format standar untuk dokumen komputer yang cukup fleksibel untuk bermacam-macam domain seperti website, pertukaran data elektronik, vektor grafis, dan lain-lain (Harold & Means 2004).

Collada

Collada (Collaborative Design Activity) adalah skema open standar XML untuk membuat sebuah objek 3D yang dapat dikembangkan secara interaktif. Collada dikembangkan oleh Khoronos Group dan dapat digunakan secara gratis (Asyadiq

2009). Dokumen Collada menggambarkan aset digital dalam bentuk XML yang biasanya diidentifikasi dengan ekstensi *.dae (digital asset exchange).

Sistem Informasi Geografis (SIG)

SIG adalah suatu sistem informasi berbasis komputer yang digunakan untuk menyimpan, mengambil, mencari, menganalisis, dan menampilkan (secara spasial) informasi geografis. Dalam pembuatan SIG, diperlukan data geografis, yaitu suatu himpunan entitas yang memiliki sebuah lokasi. SIG menggunakan informasi wilayah tersebut untuk membuat keputusan (Budiyanto 2002).

Metode Pengujian

Terdapat dua kelas dasar dari pengujian perangkat lunak (Williams 2006), yaitu:

a Black Box Testing

Black box testing merupakan strategi

testing yang hanya memerhatikan faktor fungsionalitas dan spesifikasi perangkat lunak. Berbeda dengan white box, black box testing

tidak membutuhkan pengetahuan mengenai alur internal (internal path), struktur, atau implementasi dari software under test (SUT).

Pendekatan pengujian ini memfokuskan pada kebutuhan fungsional dari sistem. Black box testing ditujukan untuk mengabaikan struktur kontrol dan lebih terfokus terhadap domain informasi.

b White Box Testing

White box testing merupakan strategi pengujian yang diterapkan pada mekanisme internal suatu sistem atau komponen. Strategi ini digunakan untuk melihat mekanisme internal dari suatu produk perangkat lunak, khususnya untuk mengamati struktur dan logika kode-kode program yang ditulis. Pendekatan yang digunakan ialah struktur kontrol dari desain prosedural.

Basis path testing merupakan suatu metode yang digunakan dalam teknik white box testing. Metode basis path ini sangat bermanfaat bagi seorang penguji perangkat lunak dalam menentukan:

 Ukuran kompleksitas logika dari suatu struktur program, prosedur, dan fungsi.  Nilai kompleksitas untuk menentukan

(38)