model website galeri maket lanmark dunia 3 dimensi … · 2019. 10. 30. · dan pengujian blackbox...
TRANSCRIPT
![Page 1: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/1.jpg)
KREA-TIF: JURNAL TEKNIK INFORMATIKA http://ejournal.uika-bogor.ac.id/krea-tif p-ISSN: 2338-2910, e-ISSN: Vol. 5, No. 2, Oktober 2017, pp. 97-108 DOI : 10.32832/kreatif.v5i2.2204
Model Website Galeri Maket Lanmark Dunia 3
Dimensi Menggunakan Collada View
Fitrah, Satrya Fajar K*, M. Islam Al-Fatih Sitanggang, M. Givi Elgivia
Program Studi Teknik Informatika, Universitas Ibn Khaldun, Indonesia
*e-mail koresponden: [email protected]
Abstrak
Website galeri landmark dunia dapat disajikan secara menyeluruh dengan menerapkan
penyajian objek 3 dimensi. Pemikiran ini didasari ulasan penelitian teknologi tampilan 3
dimensi pada website dengan menerapkan teknologi Collada sebagai teknologi penampil
objek 3 dimensi yang diharapkan dapat memenuhi kepuasan dan ketertarikan pengunjung
dalam pemantauan objek website galeri landmark dunia. Metode yang telah digunakan
meliputi analisis kebutuhan fungsional, proses bisnis sistem yang diajukan, perancangan-
perancangan seperti; Data Flow Diagram (DFD) level 0, Data Flow Diagram (DFD) level 1,
Entity Relationship Diagram (ERD), skema database serta perancangan antarmuka website
dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada
memproses file obj dengan ukuran beragam. Proses penampilan 3 dimensi landmark dunia
berjalan dengan baik, kecuali pada file obj berukuran lebih dari 2 mega byte mengalami
stuck saat proses pembacaan file.
Kata Kunci: Galeri maket, Landmark dunia, Landmark 3 dimensi, Collada view
Abstract
The world landmark gallery website can be presented thoroughly by applying the
presentation of 3-dimensional objects. This thinking is based on research reviews of 3
dimensional display technology on the website by applying Collada technology as a 3
dimensional object viewer technology that is expected to meet the satisfaction and interest of
visitors in monitoring the object of the world landmark gallery website. The methods used
include functional requirements analysis, proposed business process systems, designs such
as; Data Flow Diagram (DFD) level 0, Data Flow Diagram (DFD) level 1, Entity
Relationship Diagram (ERD), database schema and website interface design and blackbox
testing on each key function and 3-dimensional viewer process. Collada processes the obj file
with various sizes. The process of 3-dimensional world landmark appearance goes well,
except on the obj file sized more than 2 mega byte will experience stuck during the process of
reading the file.
Keywords: World landmark gallery, 3-dimensional objects, Collada view
PENDAHULUAN
Pada umumnya, website-website galeri disajikan dalam visual grafis 2 dimensi (Raster)
contohnya pada website http://www.listchallenges .com/150-most-famous-landmarks-in-the-
![Page 2: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/2.jpg)
98 ◼ KREA-TIF: JURNAL TEKNIK INFORMATIKA
Fitrah Satrya Fajar K
world. Penyajian 2D tersebut menyebabkan penyampaian informasi item galeri terkesan kaku
dan tidak kongkrit, terutama untuk galeri yang berkaitan dengan arsitektur, lansekap, dan
perumahan. Agar galeri tersebut dapat dilihat secara mendetail dan komprehensip, maka
diperlukan tampilan yang dinamis dalam website, yakni disajikan dalam maket 3 dimensi
(3D). Maket adalah bentuk tiruan tentang sesuatu dalam bentuk kecil.[1] Maket juga
merupakan bentuk tiruan (gedung, kapal, pesawat terbang, dan lain sebagainya) dalam bentuk
tiga dimensi dan skala kecil, biasanya dibuat dari kayu, kertas, tanah liat, dan sebagainya.[2]
Berbeda dengan 2 dimensi yang memperlihatkan sumbu X dan sumbu Y objek, 3
dimensi (3D) merupakan sekumpulan 3 titik dengan dimensi berbeda yaitu X,Y dan Z yang
membentuk luasan-luasan yang digabungkan menjadi satu kesauan. Tidak hanya karena
penambahan dimensi dari dua menjadi tiga, tetapi lebih utama adalah cara menampilkan suatu
realita dari objek yang sebenarnya ke layar tampilan.[3]
Collada (Collaborative Design Activity) dirancang dan di kembangkan oleh Kronos
Group. Collada merupakan standar terbuka, Format ini mendefinisikan skema XML yang
memungkinkanpresentasi data 3D. Collada juga merupakan standar terbuka (royalty free).
Berdasarkan pada teknologi XML standar, penggunaan format ini telah banyak diadopsi
seperrti Google Earth, web 3D engines seperti Paper vision 3D, Google O3D dan Google 3D
warehouse. Format dari Collada view bertujuan menyajikan model 3D yang kompleks dengan
memungkinkan komunikasi antara alat (tools) dan aplikasi serta beradaptasi dengan platform
yang berbeda-beda. Format Collada sangat kompatibel dengan Google earth dan didukung
dalam banyak aplikasi web seperti iklan online, game komputer, dunia maya (virtual reality),
jejaring sosial (social media), sistem informasi groegrafis (GIS) dan lainnya. File format
Collada sendiri adalah (.dae). Collada cocok untuk web koten 3D interaktif atau aplikasi bisnis
yang membutuhkan transfer data 3D secara real time.[4]
Oleh karena itu, diperlukan sebuah sistem website baru beserta database yang
merupakan kumpulan terstruktur catatan atau data yang disimpan dalam sistem komputer dan
diatur sedemikian rupa sehingga dapat dengan cepat dicari dan informasi dapat diambil dengan
cepat. Sendangkan MySQL merupakan untuk sistem manajemen database[5] yang diharapkan
dapat membuat galeri-galeri ditampilkan lebih dinamis, yakni dengan membuat rancangan
website maket landmark 3 dimensi dunia dengan menggunakan Collada view.
METODE PENELITIAN
Metode penelitian yang digunakan pada penelitian ini adalah metode waterfall. Menurut
Pressman, metode air terjun atau juga yang sering disebut metode waterfall sering dinamakan
siklus hidup klasik (classic life cycle), dimana hal ini menggambarkan pendekatan yang
sistematis dan juga berurutan pada pengembangan perangkat lunak, dimulai dengan
spesifikasi kebutuhan pengguna lalu berlanjut melalui tahapan-tahapan perencanaan
(planning), permodelan (modeling), konstruksi (construction), serta penyerahan sistem ke
para pelanggan/pengguna (deployment), yang diakhiri dengan dukungan pada perangkat lunak
lengkap yang dihasilkan.[6] Oleh karena itu, penelitian ini menggunakan tahap seperti berikut:
a. Analisis Kebutuhan
Guna memperoleh hasil analisis sistem, maka dilakukan analisis kebutuhan fungsional
dan analisis pada sistem yang digambarkan pada diagram alir (Flowchart) yaitu merupakan
gambar atau bagan yang menggambarkan atau mempresentasikan suatu algoritma atau
prosedur untuk menyelesaikan masalah. Gambaran ini dinyatakan dengan simbol. Dengan
demikian setiap simbol menggambarkan proses tertentu. Sedangkan hubungan antar proses
digambarkan dengan garis penghubung.[7]
Flowchart juga merupakan langkah awal pembuatan program. Dengan adanya
flowchart urutan poses kegiatan menjadi lebih jelas. Jika ada penambahan proses maka dapat
![Page 3: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/3.jpg)
KREA-TIF: JURNAL TEKNIK INFORMATIKA ◼ 99
Model Website Galeri Maket Lanmark Dunia 3 Dimensi Menggunakan Collada View
dilakukan lebih mudah. Setelah flowchart selesai disusun, selanjutnya pemrogram
(programmer) menerjemahkannya ke bentuk program dengan bahasa pemrograman
b. Perancangan Sistem
Pada tahap ini dilakukan proses peracangan melalui bahasa PHP (Hypertext Preprocessor)
yaitu salah satu bahasa pemrograman web development pertama yang menjadi open source
dari awal. Mereka juga menjelaskan bahwa PHP dimulai sebagai proyek yang dipimpin dan
dirancang oleh Mr Rasmus Lerdorf. Pada tahun 1995 bulan juni, ia merilis versi 1.0 dari
Personal Home Page Tools (nama item aslinya).[8] Perancangan Data Flow Diagram (DFD)
yaitu penyajian grafis sebuah sistem dengan empat simbol untuk mengilustrasikan bagaimana
data mengalir melalui proses-proses yang saling berhubung.[9] Pada penelitian ini terdapat
Data Flow Diagram (DFD) level 0, Data Flow Diagram (DFD) level 1.
Perancangan Entity Relationship Diagram (ERD) yaitu gambar atau diagram yang
menunjukkan informasi dibuat, disimpan, dan digunakan dalam sistem bisnis.[10]
Pada tahap perancangan sistem ini juga akan menjelaskan perancangan database dan tabel
database yang digunakan dalam membangun sistem serta perancangan script Collada.
c. Implementasi
Tahap ini adalah tahap proses implementasi kode program dengan menggunakan bahasa
pemrograman berbasis web. Pada proses inilah penerjemahan desain kedalam bahasa
komputer dilakukan, serta proses implementasi penampil 3 dimensi Collada pada program.
d. Pengujian
Tahap ini adalah tahap untuk menguji sistem pada website yang dikembangkan. Metode
pengujian dilakukan dengan menggunakan metode blackbox untuk pengujian fungsi dari
setiap menu dan proses sistem penampil 3 dimensi Collada yang dibuat.
HASIL DAN PEMBAHASAN
a. Analisis Kebutuhan
Analisis kebutuhan Analisis kebutuhan dilakukan untuk mendefinisikan kebutuhan-
kebutuhan sistem, meliputi:
1) Analisis Kebutuhan Fungsional
Kebutuhan fungsional sistem mendefinisikan hal-hal yang dibutuhkan oleh sistem yang
akan dibangun, antara lain:
a) Kemampuan untuk melakukan input, edit, dan hapus data item .
b) Kemampuan untuk memfasilitasi proses dalam menampilkan item secara 3 dimensi.
2) Analisis Proses Sistem Diajukan
Proses bisnis sistem yang diajukan untuk web galeri landmark dengan sistem yang
menyajikan objek dengan 3 dimensi yang ditanam teknologi Collada., dapat dilihat pada
Gambar 1 berikut.
![Page 4: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/4.jpg)
100 ◼ KREA-TIF: JURNAL TEKNIK INFORMATIKA
Fitrah Satrya Fajar K
PROSES BISNIS SISEM YANG DIAJUKAN
Web Galeri Maket 3 DimensiPengunjung Admin
Mengisi kolom
pencarian
Mencari iem dengan keyword yang sesuai
Menampilkananitem yg di cari
Database
Mencari item lagi?
ya
Mulai
Login
Mengelola (Inpit/edit/
delete) data
Mengelola data lagi ?
end
tidak
Tampilkan dalam 3 dimensi?
ya
Menampilkan item 3 dimensi
Collada proses
tidak
ya
Berhasil verifikasi login
tidak
ya
Beri saran?
tidak
ya
tidak
Gambar 1. Proses Sistem Yang Diajukan
b. Perancangan Sistem
Perancangan pada sistem ini dapat dilihat dari rancangan diagram-diagram berikut:
1) Perancangan Data Flow Diagram (DFD)
Data Flow Diagram (DFD) merupakan suatu gambaran grafis dari suatu sistem yang
menggunakan sejumlah bentuk-bentuk atau simbol-simbol terhadap data yang mengalir
dengan proses yang saling berkaitan. Data Flow Diagram pada web ini dijabarkan sebagai
berikut.
a) Data Flow Diagram (DFD) Level 0
DFD Level 0 disebut juga dengan diagram konteks. Karena diagram ini merupakan
penjabaran aliran data antara para pelaku dengan sistem secara garis besar. DFD level 0 pada
web dapat dilihat pada Gambar 2 berikut.
![Page 5: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/5.jpg)
KREA-TIF: JURNAL TEKNIK INFORMATIKA ◼ 101
Model Website Galeri Maket Lanmark Dunia 3 Dimensi Menggunakan Collada View
Website
Galeri Maket
3 dimensi
Hasil pencarian item
Nama item
Gambar item
Kategori item
Deskripsi item
Bentuk 3 dimensi item
Pencarian item
Saran
Admin
Pengunjung
Username
Password
Nama admin
Email admin
Nama item
Gambar item
Kategori item
Deskripsi item
Penampil collada
File .OBJ
Mesin pencari item
Pencarian itemUsername
Password
Izin login
Nama admin
Email admin
Hasil pecarian item
Item tercari
Nama item
Gambar item
Kategori item
Deskripsi item
tampilan 3 dimensi item
Saran
Gambar 2. Data Flow Diagram (DFD) Level 0
b) Data Flow Diagram (DFD) Level 1
Data Flow Diagram (DFD) level 1 dibuat lebih detail dibandingkan dengan Data Flow
Diagram level 0. DFD level 1 bisa dilihat dari Gambar 3 berikut.
Item tercari
Saran
Nama item
Gambar item
Kategori item
Deskripsi item
Nama item
Gambar item
Kategori item
Deskripsi item
File
.OB
J
Perm
inta
an 3
dim
ensi
item
Nama item
Gambar item
Deskripsi item
Kategori item
Nama item
Gambar item
Deskripsi item
Kategori item
Nama admin
Email admin
Username
Password
Nama admin
Email admin
1
Manajemen
login
Admin
2
Mnajemen
Admin
Nama admin
Email admin
Username
Password
Admin
Izin
logi
n
Nama admin
Email admin
Username
Password
3
Manajemen
item
Item
Nama item
Gambar item
Deskripsi item
Kategori
Kategori item
File .OBJ
Nama item
Gambar item
Deskripsi item
Kategori item
4
Manajemen
penampil
item 3
dimensi
Permintaan 3 dimensi item
File .OBJ
Pena
mpi
l 3 d
imen
si c
olla
da
Tam
pila
n 3
dim
ensi
item
Pengunjung
5
Manajemen
pencarian
item
Nam
a ite
m
Nama item
Gambar item
Kategori item
Deskripsi item
Pencarian
Item tercari
Item tercari
Nama item
Gambar item
Kategori item
Deskripsi item
Nam
a ite
m
Tam
pila
n 3
dim
ensi
item
6
Manajemen
Saran
(hubungi
kami)
Saran
Saran Saran
Saran
Perm
inta
ain
3 di
men
si it
em
Nama item
Gambar item
Kategori item
Deskripsi item
Gambar 3 . Data Flow Diagram (DFD) Level 1
2) Perancangan Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) dibuat untuk memodelkan struktur data dan hubungan
antar data pada database web galeri maket 3D. Secara konsep, ERD web galeri maket 3D
![Page 6: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/6.jpg)
102 ◼ KREA-TIF: JURNAL TEKNIK INFORMATIKA
Fitrah Satrya Fajar K
dapat dilihat pada Gambar 4 berikut.
Admin
Password
User_name*
Mengelola
item Pencarian itemmemiliki
Kode_item* Nama_item
1 1
Mengelola
m
tanggal
Nama_admin
Kode_item** Kode_pencarian*
kategori
saran
Kode_kategori* Nama_kategori
memiliki
1
m
MengelolaKode_saran*
Email_pengunjung
tanggal
Kode_kategori**
Email_admin
Nama_pengunjung
Gambar 4. Entity Relationship Diagram (ERD) Konseptual
3) Perancangan Database
Data-data yang diperlukan dalam sistem rancangan database memerlukan tabel
database seperti tabel database admin, dimana field username pada admin menjadi primary
key. Selengkapnya dapat di lihat pada Tabel 1.
Tabel 1. Tabel Database Admin
Field Tipe Keterangan
User_name* Varchar (50) Primary key
Password Varchar (50)
Nama_admin Varchar (100)
Email Varchar (50)
Selain tabel database admin, diperlukan juga tabel database item, dimana terdapat field
Kode_item yang menjadi primary key, dan field Kode_kategori sebagai foreign key yang
terelasi. Selengkapnya dapat dilihat pada Tabel 2.
Tabel 2. Tabel Database Item
Field Tipe Keterangan
Kode_item* Varchar (3) Primary key
Kode_kategori** Varchar (3) Foreign key
Nama_item Varchar (50)
Deskripsi Varchar (150)
Tabel database pencarian dibutuhkan untuk menyimpan data pencarian yang akan
menjadi acuan pada item terpopuler atau paling banyak dicari pengunjung. Tabel database
pencarian memiliki field Kode_pencarian sebagai primary key dan field Kode_item sebagai
foreign key terelasi. Selengkapnya dapat dilihat pada Tabel 3.
![Page 7: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/7.jpg)
KREA-TIF: JURNAL TEKNIK INFORMATIKA ◼ 103
Model Website Galeri Maket Lanmark Dunia 3 Dimensi Menggunakan Collada View
Tabel 3. Tabel Database Pencarian
Field Tipe Keterangan
Kode_pencarian* Varchar (10) Primary key
Kode_item** Varchar (3) Foreign key
Tanggal Date
Tabel database kategori dibutuhkan untuk menyimpan dan menentukan kategori pada
item sehingga pengunjung dapat mencari item dengan lebih mudah. Tabel database kategori
memiliki field Kode_kategori sebagai primary key. Selengkapnya dapat dilihat pada Tabel 4
berikut.
Tabel 4. Tabel Database Kategori
Field Tipe Keterangan
Kode_kategori* Varchar (3) Primary key
Nama_kategori Varchar (15)
Tabel database saran dibutuhkan untuk menyimpan saran-saran yang diajukan dari
pengunjung, seterusnya menjadi laporan saran untuk pihak admin. Tabel database saran
memiliki Field Kode_saran sebagai primary key. Selengkapnnya dapat dilihat pada Tabel 5
berikut.
Tabel 5. Tabel Database Saran
Field Tipe Keterangan
Kode_saran* Varchar (3) Primary key
Nama_pengunjung Varchar (15)
Email Varchar (50)
Tanggal Date
Subjek Varchar (100)
4) Perancangan Scipt Collada
Script Collada yang akan ditampilkan berikut adalah script Collada pada file utma Collada
yaitu pada file Collada.php. dan penanaman kode pemanggil Collada pada script website
pada file tengah.php galeri maket 3 dimensi.
Script Collada pada Collada.php pada perancangan sistem ini adalah sebagai berikut.
<?php
err or _r eporti ng( 0);
$denah = $_GET[ denah];
$obj = $_GET[' obj' ];
?>
<canvas i d="canvas" ></ canvas>
<scri pt >
var canvas = docu ment. getEl ement ByI d(' canvas' );
var engi ne = new BABYL ON. Engi ne( canvas, true);
var get Obj = '<?php echo $obj ; ?>' + ' . obj' ;
var cr eat eScene = f uncti on () {
BABYL ON. OBJFi l eLoader . OPTI MI ZE_WI TH_UV = true;
var scene = new BABYL ON. Scene( engi ne);
new BABYL ON. He mi sphericLi ght("li ght 1", new BABYLON. Vect or 3( 0, 1, 0), scene) ;
var cam = new BABYL ON. Ar cRot at eCa mer a(" Ar cRot at eCamer a", 0, 15, 15,
BABYL ON. Vect or 3. Zer o(), scene);
ca m. set Posi tion( new BABYL ON. Vect or3( 2000, 200, 15));
ca m. att achContr ol (canvas, f al se);
var mat eri al = new BABYLON. St andar dMat eri al (" mat eri al ", scene);
var l oader = new BABYL ON. Asset s Manager(scene);
![Page 8: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/8.jpg)
104 ◼ KREA-TIF: JURNAL TEKNIK INFORMATIKA
Fitrah Satrya Fajar K
var mount = loader. add MeshTask(" mount ", "", "asset/mount ai n/", get Obj );
mount. onSuccess = functi on (t ask) {t ask.l oaded Meshes[ 0]. posi ti on = new
BABYL ON. Vect or 3( 0, 50, -10);}
l oader.l oad();
ret ur n scene; };
var sc = cr eateScene();
engi ne.r unRender Loop(f uncti on(){
sc.r ender();});
</ scri pt >
Script Collada yang telah disiapkan akan ditanamkan ke dalam script website tepatnya
pada file tengah.php melalui sebuah kode pemanggil. Kode pemanggil Collada ini berupa
pemanggilan terhadap file .obj berdasarkan nama dari item. Kode pemanggil tersebut dapat
dilihat sebagai berikut:
<a hr ef =' mod_3d/ obj _3d. php?obj =$r[ nama_pr oduk]' titl e=' $r[ nama_pr oduk]' cl ass=' ' >
<i mg sr c=' i mages/t ombol 3D. png' / ></ a></ di v>
</ di v>
Kode tersebut menunjukan pemanggilan penampil 3 dimensi Collada dengan file ekstensi
Obj yang telah tersedia pada database berdasarkan nama file yang sama dengan nama item
melalui aktivitas klik pada gambar tombol “Lihat 3 Dimensi” yang tertera pada halaman
website.
c. Implementasi
Barikut ini adalah cuplikan-cuplikan dari implementasi sistem berupa tampilan-tampilan
halaman yang telah dirancang, baik tampilan pada halaman website dan juga tampilan pada
halaman admin.
1) Halaman Utama
Pada halaman utama (home), selain terdapat tampilan statis juga terdapat daftar item
dengan susunan berbanjar maksimal 3 secara berurutan berdasarkan item berbaru dan sesuai
jumlah item tersedia dengan tombol Lihat 3 Dimensi dengan tombol selengkapnya pada tiap
item untuk melihat item secara 3 dimensi dan deskripsi item. Tampilan halaman utama secara
keseluruhan dapat dilihat pada Gambar 5.
Gambar 5. Tampilan Halaman Utama
2) Halaman Profil
Pada halaman profil, selain terdapat tampilan stais juga terdapat penjabaran dari profil
website galeri maket landmark 3 dimensi ini. Tampilan halaman profil secara keseluruhan
dapat dilihat pada Gambar 6.
![Page 9: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/9.jpg)
KREA-TIF: JURNAL TEKNIK INFORMATIKA ◼ 105
Model Website Galeri Maket Lanmark Dunia 3 Dimensi Menggunakan Collada View
Gambar 6. Tampilan Hamalan Profil Website
3) Halaman Semua Item
Pada halaman semua item, selain terdapat tampilan statis juga terdapat daftar item dengan
susunan berbanjar maksimal 3 secara berurutan berdasarkan item berbaru dan sesuai jumlah
item tersedia dengan tombol Lihat 3 Dimensi dengan tombol selengkapnya pada tiap item
untuk melihat item secara 3 dimensi dan deskripsi item. Halaman ini sama seperti halaman
utama (Home) Tampilan halaman semua item secara keseluruhan dapat dilihat pada Gambar
7.
Gambar 7. Tampilan Halaman Semua Item
4) Halaman Hubungi Kami
Pada halaman hubungi kami, selain terdapat tampilan statis juga terdapat tampilan formulir
hubungi kami (administrator) untuk pengunjung. Tampilan halaman hubungi kami secara
keseluruhan dapat dilihat pada Gambar 4.9 berikut.
![Page 10: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/10.jpg)
106 ◼ KREA-TIF: JURNAL TEKNIK INFORMATIKA
Fitrah Satrya Fajar K
Gambar 8. Tampilan Halaman Hubungi Kami
5) Tampilan Item 3 Dimensi
Tampilan munculan 3 dimensi ini hanya terdapat gambar item 3 dimensi setelah
pengunjung melakukan klik pada tmbol Lihat 3 Dimensi suatu item pada website galeri maket
landmark 3 dimensi ini. Cuplikan tampilan 3 dimensi item dapat dilihat pada Gambar 9.
Gambar 9. Tampilan Item 3 Dimensi
6) Tampilan Login Administrator
Halaman admin merupakan bagian halaman yang mengatur item (item) dan beberapa
bagian lain terhadap website. Admin membutuhkan login terlebih dahulu untuk masuk ke
halaman halaman admin. Berikut cuplikan login dapat dilihat pada Gambar 10 berikut.
![Page 11: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/11.jpg)
KREA-TIF: JURNAL TEKNIK INFORMATIKA ◼ 107
Model Website Galeri Maket Lanmark Dunia 3 Dimensi Menggunakan Collada View
Gambar 10. Tampilan Login Administrator
d. Pengujian
Pengujian merupakan pengukuran aplikasi yang telah dibuat dijalankan menggunakan
web browser, pengujian dilakukan untuk mengetahui kekurangan aplikasi yang telah dibuat,
sehingga dapat melakukan perbaikan sesuai yang dibutuhkan. Pengujian ini juga dilakukan
untuk mengetahui apakah aplikasi berjalan sudah sesuai tujuan. Pengujian pada sistem
dilakukan dengan pengujian yang disebut Pengujian Blackbox. Secara umum seluruh item
pengujian di Halaman Website dan Administrator berhasil dengan baik.
Pengujian Blackbox Pada Penampil Collada
Pengujian blackbox terhadap sistem pada penampil item 3 dimensi Collada dilakukan
dengan mencoba file Obj sebagai file yang diproses secara bervariasi, baik ukuran maupun
hasil convert dari file 3 dimensi ekstensi lain. Pengujian blackbox ditunjukan pada 3 kriteria
pengujian yaitu sebagai berikut.
a) Pengujian file Obj berukuran dibawah 2 mega byte
Deskripsi Uji: Menguji penambahan dan proses penampilan 3 dimensi item dengan file
.obj dibawah 2 MB.
Skenario: Admin telah meletakkan file ekstensi .obj pada direktori
‘mod_3D/asset/mountain’ lalu menambah item dengan nama yang sama dengan file .obj
dam memilih tombol Lihat 3 Dimensi pada halaman website.
Output Harapan: File 3 dimensi muncul sesuai nama item
Hasil: OK
b) Pengujian file Obj berukuran diatas 2 mega byte
Deskripsi Uji: Menguji penambahan dan proses penampilan 3 dimensi item dengan file
.obj diatas 2 MB.
Skenario: Admin telah meletakkan file ekstensi .obj pada direktori
‘mod_3D/asset/mountain’ lalu menambah item dengan nama yang sama dengan file .obj
dam memilih tombol Lihat 3 Dimensi pada halaman website.
Output Harapan: File 3 dimensi muncul sesuai nama item
Hasil: Gagal/Pembacaan file Obj error/stuck dan objek tidak tampil
c) Pengujian file Obj hasil konversi ekstensi lain
Deskripsi Uji: Menguji penambahan dan proses penampilan 3 dimensi item dengan file
![Page 12: Model Website Galeri Maket Lanmark Dunia 3 Dimensi … · 2019. 10. 30. · dan pengujian blackbox pada tiap fungsi tombol dan proses penampil 3 dimensi. Collada memproses file obj](https://reader033.vdocument.in/reader033/viewer/2022060818/60977b7f3133c456456e8b5d/html5/thumbnails/12.jpg)
108 ◼ KREA-TIF: JURNAL TEKNIK INFORMATIKA
Fitrah Satrya Fajar K
.obj hasil konversi file berekstensi 3 dimensi lain.
Skenario: Admin telah meletakkan file ekstensi .obj pada direktori
‘mod_3D/asset/mountain’ lalu menambah item dengan nama yang sama dengan file .obj
dam memilih tombol Lihat 3 Dimensi pada halaman website.
Output Harapan: File 3 dimensi sempurna dan muncul sesuai nama item
Hasil: Gagal/ File 3 dimensi dan muncul sesuai nama item tetapi tidak sempurna.
KESIMPULAN
Berdasarkan hasil dan bahasan tersebut, dapat disimpulkan bahwa Collada sebagai
penampil objek 3 dimensi berhasil diterapkan pada website galeri landmark dunia dan dapat
dijadikan sebagai acuan penampil objek 3 dimensi pada website galeri serupa. Setelah
melakukan pengujian blackbox untuk mengetahui sistem yang dibuat sudah sesuai atau tidak
dengan rancangan, penampil Collada berjalan dengan baik dalam memproses file ekstensi
obj, akan tetapi terdapat kendala yaitu ukuran file .obj yang diproses lebih dari 2 mega byte
akan mengalami crash/stuck saat loading tampilan 3 dimensi serta apabila file .obj yang akan
diproses merupakan hasil convert dari file ekstensi lain, maka tampilan objek 3 dimensi
menjadi tidak sempurna.
DAFTAR PUSTAKA
[1] Amran. 1997. Kamus Lengkap Bahasa Indonesia. Pustaka Setia, Jakarta.106.
[2] KBBI [Kamus Besar Bahasa Indonesia]. 2017. Arti Kata Maket [Internet]. [diakses 2017
April 20]. Tersedia pada: http://www.kbbi.web.id/maket.
[3] Simarmata J. 2007. Grafika Komputer. Andi, Yogyakarta.
[4] Barnes M, Finch E. 2008. Digital Asset Schema Relase: 1.5.0 Sony Computer
Entertainment Inc. Collada. Technical Report.9-10.
[5] Nixon R. 2009. Learning PHP, MySQL, and JavaScript, O’Reilly Media, Inc. 1005
Graveinstein Highway North, California.299.
[6] Pressman R. 2005. Rekayasa Perangkat Lunak. Pendekatan Praktisi. Andi,
Yogyakarta.45-65.
[7] Sismoro H. 2005. Pengantar Logika Informatika. Algoritma dan Pemrograman
Komputer. Andi, Yogyakarta.33.
[8] Peter M, Mladen G, Brian D. Pro PHP Programing. 2010. Apress. Xvii.
[9] Raymond M, George, Schell. 2007. Sistem Informasi Manajemen Terjemahan (10).
Penerbit Salemba.214.
[10] Al-Fatta H. 2007. Analisis dan Perancangan Sistem Informasi. Andi, Yogyakarta.121-
122.