Pembuatan Virtual Reality Tour dengan Metode Gambar Panorama untuk

Kampus Fakultas Teknik Universitas Hasanuddin

TUGAS AKHIR

Disusun dalam rangka memenuhi salah satu persyaratan

Untuk menyelesaikan Program Studi Strata-1 Teknik Informatika
Departemen Teknik Informatika
Universitas Hasanuddin
Makassar

Disusun Oleh :

AGUNG ADYTIO
D421 12 266

DEPARTEMEN TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS HASANUDDIN
MAKASSAR
2017
 LEMBAR PENGESAHAN

PEMBUATAN VIRTUAL REALITY TOUR DENGAN METODE GAMBAR

PANORAMA UNTUK KAMPUS FAKULTAS TEKNIK UNIVERSITAS

HASANUDDIN

Disusun Oleh :

AGUNG ADYTIO D421 12 266

Tugas Akhir ini telah dipertahankan pada Sidang Ujian Sarjana tanggal 22
November 2017 diterima dan disahkan sebagai salah satu syarat memperoleh
gelar Sarjana Teknik (ST.) pada Program Studi S1 Teknik Informatika
Departemen Teknik Informatika Fakultas Teknik Universitas Hasanuddin.

Makassar, 27 November 2017

Disetujui oleh
Pembimbing I, Pembimbing II,

Dr. Eng. Muhammad Niswar, ST., M.IT. Dr. Amil Ahmad Ilham, ST., M.IT.
NIP. 19730922 199903 1 001 NIP. 19731010 199802 1 001

Diterima dan disahkan oleh

Ketua Departemen Teknik Informatika

Dr. Amil Ahmad Ilham, ST., M.IT.

NIP. 19731010 199802 1 001

II
 ABSTRAK

Pembuatan virtual reality tour dengan metode gambar panorama untuk

kampus Fakultas Teknik dan Kampus Tamalanrea Universitas Hasanuddin ini
berfungsi sebagai media informasi kampus yang ditampilkan dalam bentuk gambar
panorama 360 derajat. Metode Penelitian yang digunakan pada penelitian ini adalah
metodologi Multimedia Development Life Cycle (MDLC) yang merupakan metode
paling sesuai dengan menekankan 6 tahap pengembangan yaitu konsep, desain,
pengumpulan data, pemasangan, pengujian, dan distribusi. Kebutuhan pembuatan
virtual tour ini adalah perangkat keras berupa kamera, lensa, panoramic gimbal,
tripod dan laptop serta perangkat lunak seperti photoshop, panoweaver, xampp dan
code editor. Pengumpulan data website virtual tour ini menampilkan 19 gambar
wilayah kampus Fakultas Teknik dan 30 gambar wilayah Kampus Tamalanrea.
Hasil pengujian didapatkan dari sepuluh responden dengan menyatakan semua
fungsi sistem bekerja dengan baik dan didistribusi ke server unhas.ac.id serta dapat
diakses melalui aplikasi peta kampus.

Kata Kunci – Website, Virtual tour, Panorama 360, MDLC.

III
 KATA PENGANTAR

Assalamu Alaikum Warahmatullahi Wabarakatuh

Puji syukur penulis ucapkan kehadirat Allah SWT atas limpahan rahmat dan

hidayahnya sehingga penulis dapat menyelesaikan Skripsi ini dengan judul

“Pembuatan Virtual Reality Tour dengan Metode Gambar Panorama untuk

Kampus Fakultas Teknik Universitas Hasanuddin.”

Penulis menyadari bahwa Skripsi ini masih jauh dari kesempurnaan, mungkin

masih banyak kekurangan atau kelemahan baik dari segi penyusunan maupun dari

pandangan pengetahuan, oleh karena itu penulis mengharapkan adanya saran,

pendapat atau kritik yang bersifat kontruktif dari semua pihak demi kesempurnaan

penulisan Skripsi.

Selama proses penyelesaian Skripsi ini banyak kesulitan dan hambatan yang

penulis hadapi, namun atas bantuan bimbingan dan kerja sama dari semua pihak

yang terlibat didalamnya sehinggah hambatan dan kesulitan tersebut dapat teratasi

dengan baik. Untuk ini perkenankanlah penulis dengan segala hormat dan

kerendahan hati mengucapkan terima kasih dan penghargaan yang sebesar-

besarnya kepada:

1. Allah SWT, atas segala rahmat dan pertolongan-Nya yang tak terkira dalam

hidup kami. Ketika semua upaya telah dilakukan dan tiada hasil, Hanya

Engkaulah satu-satunya yang dapat membantu.

IV
2. Kedua Orang Tua, atas segala doa, pengorbanan, kasih sayang, dan

didikannya serta segala jasanya.

3. Bapak Dr. Amil Ahmad Ilham S.T., M.IT. sebagai Ketua Program Studi

Teknik Informatika Fakultas Teknik Universitas Hasanuddin.

4. Bapak Dr.Eng.Muhammad Niswar, ST, M.IT dan Bapak Dr. Amil

Ahmad Ilham S.T., M.IT. selaku Pembimbing I dan Pembimbing II atas

kesabarannya memberikan bimbingan, bantuan dan arahan selama penulisan

Tugas Akhir ini.

5. Bapak Adnan, S.T, M.T, Ph.D., Ibu Dr.Eng Intan Sari Areni, ST., MT.,

Ibu Novi Nur RA Mokobombang, S.T.,Ms.TM., dan Bapak A. Ais

Prayogi Alimuddin, S.T., M.Eng. selaku tim penguji, yang memberikan

banyak masukan dan saran dalam membangun Tugas Akhir ini.

6. M. Taufiqurrahman S.T., Ahmad Irfandi, dan Sri Reskiana Nurman

yang selalu setia menjadi tentor selama pembuatan aplikasi dan skripsi ini.

7. Teman seperjuangan Teknik Informatika angkatan 2012, Universitas

Hasanuddin terima kasih atas kebersamaan dan dukungannya selama ini

yang menjadi keluarga kedua di kampus.

8. Segenap dosen dan staf Jurusan Elektro dan Prodi Informatika

Fakultas Teknik Universitas Hasanuddin yang telah banyak membantu

selama ini di kampus.

V
 9. Tawwa Media dan Upana Studio, yang telah bersedia memfasilitasi segala

kebutuhan penulis selama pembuatan Tugas Akhir ini.

Dan semua pihak yang telah membantu penyelesaian Skripsi ini. Semoga

Allah SWT senantiasa memudahkan setiap langkah-langkah kita menuju kebaikan

dan selalu menganugerahkan kasih sayang-Nya untuk kita semua. Amin.

Gowa, 15 November 2017

Penyusun

VI
 DAFTAR ISI

LEMBAR PENGESAHAN .................................................................................. ii

ABSTRAK ............................................................................................................ iii
KATA PENGANTAR .......................................................................................... iv
DAFTAR ISI ........................................................................................................ vii
DAFTAR GAMBAR ............................................................................................ xi
DAFTAR TABEL................................................................................................ xv
BAB I PENDAHULUAN ..................................................................................... 1
1.1. Latar Belakang .......................................................................................... 1
1.2. Rumusan Masalah ..................................................................................... 2
1.3. Batasan Masalah ....................................................................................... 3
1.4. Tujuan Penelitian ...................................................................................... 4
1.5. Manfaat Penelitian .................................................................................... 4
1.6. Sistematika Penulisan ............................................................................... 5
BAB II TINJAUAN PUSTAKA .......................................................................... 7
2.1. Multimedia Development Life Cycle (MDLC) ....................................... 7
2.2 Multimedia ............................................................................................... 10
2.1.1 Definisi Multimedia ....................................................................... 10
2.1.2 Elemen Multimedia ....................................................................... 11
2.1.3 Aplikasi Multimedia...................................................................... 18
2.3. Aplikasi ..................................................................................................... 21
2.3.1. Definisi Aplikasi ............................................................................ 21
2.3.2. Pengertian Aplikasi Web............................................................... 22
2.3.3. Keunggulan dan Kekurangan Aplikasi Web .............................. 22
2.4. Definisi Informasi .................................................................................... 23
2.4.1. Siklus Informasi ............................................................................ 25
2.4.2. Jenis-Jenis Informasi .................................................................... 26
2.4.3. Ciri-Ciri Informasi Yang Berkualitas ......................................... 27
2.4.4. Manfaat Informasi ........................................................................ 28
2.5. Virtual Reality........................................................................................... 28

VII
 2.5.1. Sejarah perkembangan Virtual Reality ....................................... 29
2.5.2. Virtual Reality Immersion ............................................................. 30
2.5.3. Virtual Reality Interactivity ........................................................... 31
2.5.4. Virtual Reality Photography .......................................................... 31
2.6. Virtual tour ............................................................................................... 33
2.6.1. Pengertian Gambar Panorama .................................................... 33
2.6.2. Mengambil Gambar Panorama ................................................... 35
2.6.3. Overlap Gambar Panorama ......................................................... 37
2.7. Interaksi Manusia dan Komputer ......................................................... 38
2.8. Perangkat Lunak yang Digunakan ........................................................ 39
2.8.1. HTML............................................................................................. 39
2.8.2. CSS ................................................................................................. 41
2.8.2.1. Pengertian CSS .......................................................................... 41
2.8.2.2. Style Sheets ................................................................................. 42
2.8.2.3. Aturan Penulisan Pada CSS ..................................................... 43
2.8.3. MySql ............................................................................................. 44
2.8.3.1. Pengertian MySql ...................................................................... 44
2.8.3.2. Type Data MySql ....................................................................... 46
2.8.4. PHP ................................................................................................. 47
2.8.4.1. Pengertian PHP ......................................................................... 47
2.8.4.2. Syntax Pada PHP ....................................................................... 49
2.8.4.3. Variabel PHP ............................................................................. 50
2.8.4.4. String Pada PHP ........................................................................ 52
2.8.4.5. Tipe Data Pada PHP ................................................................. 53
2.8.4.6. Kelebihan Dan Kekurangan PHP ............................................ 54
2.8.5. Javascript ........................................................................................ 56
2.8.5.1. Pengertian Javacript ................................................................. 56
2.8.5.2. Tipe Data Javascript .................................................................. 57
2.8.5.3. Variabel Javascript .................................................................... 58
2.8.5.4. Jenis – Jenis Operator Pada Javascript ................................... 59
BAB III METODOLOGI PENELITIAN ........................................................ 63

VIII
 3.1. Tahap Penelitian ...................................................................................... 63
3.2. Konsep (Concept) ..................................................................................... 66
3.2.1. Waktu ............................................................................................. 66
3.2.2. Lokasi ............................................................................................. 66
3.2.3. Analisis Kebutuhan Gambar Panorama 360 .............................. 67
3.2.4. Analisis Kebutuhan Sistem .......................................................... 69
3.3. Tahap Perancangan Desain .................................................................... 70
3.3.1. Design Prosedural ......................................................................... 70
3.3.1.1. Flowchart Website Virtual tour ........................................... 70
3.3.1.2. Activity Diagram ................................................................... 74
3.3.1.3. Usecase Diagram .................................................................. 76
3.3.2. Design Interface ......................................................................... 77
3.3.2.1. Desain Interface Sidebar Lokasi......................................... 77
3.3.2.2. Desain Interface Hotspot...................................................... 78
3.3.2.3. Desain Interface Show in Panorama Aplikasi Peta Kampus
............................................................................................... 79
3.3.2.4. Desain Interface Admin login ............................................. 80
3.3.2.5. Desain Interface Dasboard Admin ...................................... 81
3.4. Pengumpulan Data (Material Collecting) ............................................. 82
3.4.1. Menentukan Titik Pengambilan Gambar................................... 82
3.4.2. Pengambilan Gambar ................................................................... 84
3.5. Assembly .................................................................................................. 86
3.5.1. Stitching ......................................................................................... 86
3.5.2. Photo Editing ................................................................................. 88
3.5.3. Konversi ke Spherical Panorama ................................................. 91
3.5.4. Kompresi Gambar ........................................................................ 93
3.5.5. Coding ............................................................................................ 95
3.6. Testing .................................................................................................... 100
3.7. Distribution ............................................................................................ 102
BAB IV HASIL DAN PEMBAHASAN........................................................... 103
4.1 Gambaran Umum Aplikasi .................................................................. 103

IX
 4.2 Implementasi Desain ............................................................................. 103
4.2.1 Tampilan Awal Website .............................................................. 103
4.2.2 Tampilan Website Virtual tour (Sidebar) .................................. 104
4.2.3 Tampilan Website Virtual tour (Hotspot) ................................... 105
4.2.4 Tampilan Fitur Website Virtual tour .......................................... 107
4.2.4.1 Fitur Zoom In ........................................................................... 107
4.2.4.2 Fitur Zoom Out........................................................................ 108
4.2.4.3 Fitur Full Screen ...................................................................... 108
4.2.5 Tampilan Show in Panorama Aplikasi Peta Kampus .............. 108
4.2.6 Tampilan Login Admin .............................................................. 110
4.2.7 Tampilan Beranda Admin .......................................................... 110
4.2.8 Tampilan Menu Scene ................................................................ 111
4.2.9 Tampilan Menu Hotspot ............................................................. 113
4.2.10 Tampilan Menu Settings............................................................. 115
4.3 Hasil Pengumpulan Data ...................................................................... 116
4.4 Pengujian................................................................................................ 118
4.4.1 Pengujian Fungsi Halaman User ............................................... 120
4.4.2 Pengujian Fungsi Halaman Admin ........................................... 122
4.5 Distribusi ................................................................................................ 123
BAB V KESIMPULAN DAN SARAN ............................................................ 124
5.1. Kesimpulan ............................................................................................ 124
5.2. Saran ....................................................................................................... 124
DAFTAR PUSTAKA ........................................................................................ 125
LAMPIRAN ....................................................................................................... 127

X
 DAFTAR GAMBAR

Halaman

Gambar 2.1. Multimedia Development Life Cycle ......................................... 9

Gambar 2.2. Siklus Informasi ......................................................................... 26

Gambar 2.3. Contoh Gambar Virtual Reality Photography ........................... 32

Gambar 2.4. Perbandingan ukuran sensor pada kamera ................................. 35

Gambar 2.5. Overlapping gambar yang sama pada gambar yang lain .......... 38

Gambar 2.6. Struktur penulisan CSS .............................................................. 44

Gambar 3.1. Diagram Alur Penelitian ............................................................ 64

Gambar 3.2. Flowchart pembuatan virtual tour ............................................ 65

Gambar 3.3. Hasil dari kalkulator sudut pandang untuk mengetahui sudut

pandang ............................................................................................................ 69

Gambar 3.4. Flowchart Akses Internet .......................................................... 71

Gambar 3.5. Flowchart gambar panorama saat ditampilan virtual tour........ 72

Gambar 3.6. Flowchart Flowchart pilih lokasi pada virtual tour .................. 73

Gambar 3.7. Flowchart Fitur Tampilkan dalam 360 aplikasi peta kampus

Unhas................................................................................................................ 75

Gambar 3.8. Flowchart admin virtual tour .................................................... 75

Gambar 3.9. Activity Diagram User ............................................................... 76

Gambar 3.10. Activity Diagram Admin.......................................................... 77

Gambar 3.11. Usecase diagram website virtual tour...................................... 78

Gambar 3.12. Desain interface virtual tour dengan daftar lokasi .................. 79

XI
Gambar 3.13. Virtual tour dengan fitur hotspot ............................................. 80

Gambar 3.14. Fitur Tampilkan dalam gambar panorama 360 ....................... 81

Gambar 3.15. Desain tampilan login admin ................................................... 82

Gambar 3.16. Rancangan desain tampilan dashboard admin ......................... 82

Gambar 3.17. Ilustrasi penentuan titik pengambilan gambar panorama

berdasarkan hotspot.......................................................................................... 84

Gambar 3.18. Rangkain peralatan untuk pengambilan gambar panorama .... 85

Gambar 3.19. Hasil Pengambilan Gambar untuk panorama 360 yang

berlokasi di Rusunawa Fakultas Teknik Unhas ............................................... 86

Gambar 3.20. Proses stitching gambar panorama menggunakan aplikasi

Panoweaver versi 9.0 ...................................................................................... 88

Gambar 3.21. Hasil stitching gambar panorama pada aplikasi Panoweaver

versi 9.0 ........................................................................................................... 88

Gambar 3.22. Output gambar panorama dalam tipe Cube Panorama .......... 89

Gambar 3.23. Gambar Panorama saat dibuka di Adobe Photoshop ............. 90

Gambar 3.24. Tampilan detail bagian gambar panorama yang akan diedit .. 90

Gambar 3.25. Proses editing gambar panorama menggunakan tools ........... 91

Gambar 3.26. Hasil editing pada gambar panorama 360 untuk lokasi

Rusunawa ........................................................................................................ 91

Gambar 3.27. Perbandingan gambar sebelum dan sesudah editing menggunakan

aplikasi Adobe Photoshop CC ........................................................................ 92

Gambar 3.28. Proses konversi cubic panorama ke jenis spherical panorama

dengan software Panoweaver 9.0 .................................................................... 93

XII
Gambar 3.29. Hasil proses konversi gambar dari jenis cubic panorama ke

spherical panorama ......................................................................................... 94

Gambar 3.30. Hasil gambar panorana Rusunawa dalam bentuk Spherical

Panorama ........................................................................................................ 94

Gambar 3.31. Ukuran awal gambar panorama Rusunawa sebelum

dikompresi ....................................................................................................... 95

Gambar 3.32. Ukuran gambar panorama yang akan dikompresi .................. 96

Gambar 3.33. Perbandingan ukuran gambar sebelum dan sesudah

dikompresi ....................................................................................................... 97

Gambar. 3.34. Potongan kode plugin Pannellum yang berfungsi mengubah

gambar panorama 2D menjadi bentuk 3D ...................................................... 98

Gambar 3.35. Potongan kode Pannelum yang disertai fungsi tombol

hotspot ............................................................................................................. 100

Gambar 4.1. Tampilan awal website virtual tour ........................................... 106

Gambar 4.2. Sidebar Lokasi pada website virtual tour .................................. 107

Gambar 4.3. Tampilan ketika pointer berada di atas tombol hotspot ............. 107

Gambar 4.4. Tampilan virtual tour saat memuat scene berikutnya................ 108

Gambar 4.5. Tampilan virtual tour saat diperbesar ........................................ 109

Gambar 4.6. Tampilan virtual tour saat diperkecil ........................................ 110

Gambar 4.7. Tampilan virtual tour saat layar penuh. ..................................... 111

Gambar 4.8. Tampilan tombol Show in Panorama ........................................ 111

Gambar 4.9. Tampilan halaman login admin ................................................. 113

Gambar 4.10. Tampilan halaman beranda admin ........................................... 113

XIII
Gambar 4.11. Tampilan umum pada menu scene .......................................... 115

Gambar 4.12. Tampilan halaman edit scene................................................... 115

Gambar 4.13. Tampilan halaman awal menu hotspot .................................... 117

Gambar. 4.14. Tampilan menu edit hotspot ................................................... 117

Gambar. 4.15. Tampilan menu setting ........................................................... 118

XIV
 DAFTAR TABEL

Halaman

Tabel 2.1. Sejarah Perkembangan VR ............................................................. 30

Tabel 2.2. Perbandingan lebar sudut pandang lensa berdasarkan ukuran
sensor................................................................................................................ 37
Tabel 2.3. Tabel Aritmatika Javascript ........................................................... 60
Tabel 2.4. Tabel operator assigment................................................................ 61
Tabel 2.5. Tabel operator pembanding ............................................................ 61
Tabel 2.6. Tabel operator logika...................................................................... 61
Tabel 3.1. Daftar lokasi gambar panorama ..................................................... 66
Tabel 3.2. Tabel pengujian yang akan diuji ke user ........................................ 102
Tabel 3.3. Tabel pengujian yang akan dilakukan pada halaman admin
virtual tour ....................................................................................................... 102
Tabel 4.1. Daftar Lokasi beserta jumlah foto dan ukuran gambar
sebelum dan sesudah konversi ......................................................................... 119
Tabel 4.2. Tabel pengujian pada halaman user ............................................... 122
Tabel 4.3. Perbandingan kecepatan internet masing-masing responden ......... 122
Tabel 4.4. Tabel Pengujian pada halaman admin ............................................ 123

XV
 BAB I
PENDAHULUAN

1.1. Latar Belakang

Teknologi yang semakin berkembang pesat menunjukkan semakin tingginya

kebutuhan masyarakat umum dalam melihat informasi yang berkaitan dengan

kampus menggunakan fasilitas internet. Maka dari itu sarana penyediaan informasi

dalam bentuk media online menjadi hal yang perlu disiapkan oleh pihak kampus

agar dapat memenuhi kebutuhan mereka.

Mahasiswa yang diterima di berbagai jurusan di Universitas Hasanuddin

perlu ditunjang dengan adanya fasilitas informasi yang memadai terutama tentang

informasi wilayah kampus baik fakultas, jurusan dan program studi. Bagi calon

mahasiswa yang lokasinya berada di luar wilayah Fakultas Teknik tentu

memanfaatkan media online untuk mencari informasi tentang Fakultas Teknik

Universitas Hasanuddin dan Kampus Tamalanrea, daripada melihat langsung,

tentunya hal ini dapat menghemat waktu dan biaya pengeluaran. Mahasiswa yang

dinyatakan diterima di kampus Fakultas Teknik saat ini masih kekurangan media

informasi yang terbaru terutama dalam media online, membuat mahasiswa

menerima materi namun informasi yang diangkat terbatas pada pemberitaan

kampus. Akibatnya, mahasiswa belum bisa mengetahui gambaran umum tentang

wilayah kampus yang akan ditempatinya terutama dalam hal media gambar.

Gambar adalah media informasi paling diminati di dunia yang serba digital

ini sebab media gambar saat ini merupakan adalah sarana informasi yang paling

1
terpercaya dalam menyampaikan informasi yang bersifat nyata. Perkembangan

media informasi gambar yang berkembang yang ada saat ini salah satunya adalah

gambar panorama 360. Virtual tour adalah media yang menyediakan wadah untuk

pengguna dapat melihat suatu tempat secara nyata melalui sebuah gambar

panorama yang dapat dilihat 360 derajat tanpa batas dan tidak terpotong. Jadi

virtual tour seolah-olah pengguna berada di suatu tempat yang meningkatkan daya

tangkap visualnya. Virtual tour dasarnya dibuat dengan menggabungkan seni

fotografi dalam pembuatan gambar dan disiplin ilmu teknik informatika untuk

pembuatan websitenya.

Berdasarkan permasalahan di atas, peneliti bermaksud melakukan penelititan

dan membangun sebuah website virtual tour dengan metode gambar panorama

sebagai media informasi wilayah Fakultas Teknik Universitas Hasanuddin. Website

virtual tour ini akan menampilkan informasi mengenai lokasi-lokasi lingkungan

Kampus Fakultas Teknik dan Kampus Tamalanrea Universitas Hasanuddin yang

berguna untuk masyarakat umum.

1.2. Rumusan Masalah

Berdasarkan latar belakang tersebut di atas maka dapat dirumuskan masalah

sebagai berikut:

1. Bagaimana membangun website virtual tour untuk sebagai media informasi

untuk lebih mengenal kampus Fakultas Teknik dan Kampus Tamalanrea

Universitas Hasanuddin?

2
 2. Bagaimana menambahkan fitur dari aplikasi Peta Kampus Universitas

Hasanuddin yang terhubung langsung ke website virtual tour Kampus

Fakultas Teknik Gowa dan Kampus Tamalanrea Universitas Hasanuddin?

1.3. Batasan Masalah

Agar dalam pengerjaan sistem ini dapat terarah, maka masalah-masalah yang

diteliti dibatasi pada :

1. Website virtual tour ini adalah website yang kelak diperuntukkan dan dikelola

oleh Pihak Fakultas Teknik Universitas Hasanuddin

2. Website virtual tour ini akan digunakan oleh masyarakat umum dan bersifat

website publik namun tetap bersifat dinamis untuk keperluan penambahan

data dan lokasi.

3. Pembuatan foto panorama untuk website virtual tour Fakultas Teknik

Universitas Hasanuddin ini memanfaatkan peralatan fotografi seperti Kamera

Profesional DSLR Canon EOS 60D dan Lensa Lebar (Ultra-Wide) Canon

Ef-S 10-18mm, panoramic gimbal head, dan tripod serta aplikasi pendukung

seperti Panoweaver, dan Photoshop.

4. Bahasa pemrograman yang digunakan dalam pembuatan website ini adalah

HTML, CSS, PHP, dan Java Script.

5. Metode yang digunakan untuk pembuatan website ini adalah Research and

Develompent (RnD) dengan model perancangan Multimedia Development

Life Cycle.

3
1.4. Tujuan Penelitian

Adapun Tujuan akhir dari penelitian ini adalah :

1. Membangun website virtual tour Fakultas Teknik Gowa dan Kampus

Tamalanrea Universitas Hasanuddin sebagai media informasi kampus

berbasis gambar panorama 360.

2. Menambahkan fitur dari aplikasi peta kampus Universitas Hasanuddin

yang dapat terhubung ke aplikasi website virtual tour.

1.5. Manfaat Penelitian

Hasil penelitian ini diharapkan daat bermanfaat bagi semua pihak,

diantaranya sebagai berikut:

1. Bagi Peneliti

Website ini dapat menjadi sumbangan dari hasil studi kepada institusi

terkhususnya Fakultas Teknik Universitas Hasanuddin serta sebagai dasar

untuk pembelajar untuk penelitian selanjutnya.

2. Bagi Institusi

a. Sebagai wadah dalam menyampaikan informasi kampus yang

interaktif dalam bentuk gambar panorama 360 derajat .

b. Menjadi sarana promosi kampus dengan memanfaatkan teknologi

multimedia masa kini yang menampilkan potensi gedung Fakultas

Teknik Universitas Hasanuddin.

4
 3. Bagi Pengguna

a. Memudahkan calon mahasiswa, dan mahasiswa, serta masyarakat luas

untuk mengetahui informasi wilayah Fakultas Teknik dan Kampus

Tamalanrea Universitas Hasanuddin.

b. Memberikan fasilitas informasi wilayah kampus melalui website

virtual tour berbantuan gambar sehingga akses wilayah kampus lebih

mudah dan berkesan nyata.

1.6. Sistematika Penulisan

Untuk memberikan gambaran singkat mengenai isi tulisan secara

keseluruhan, maka akan diuraikan beberapa tahapan dari penulisan secara

sistematis, yaitu:

BAB I PENDAHULUAN

Bab ini menguraikan secara umum mengenai hal yang menyangkut latar

belakang, rumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian,

dan sistematika penulisan.

BAB II TINJAUAN PUSTAKA

Bab ini berisi teori-teori tentang hal-hal yang berhubungan dengan Website

virtual tour Kampus Universias Hasanuddin.

BAB III METODOLOGI PENELITIAN

Bab ini berisi tentang metode perancangan sistem Website virtual tour

Kampus Universias Hasanuddin.

5
BAB IV HASIL DAN PEMBAHASAN

Bab ini berisi tentang pengujian pada Website virtual tour Kampus

Universitas Hasanuddin.

BAB V KESIMPULAN DAN SARAN

Bab ini berisi tentang kesimpulan dan saran yang dikumpulkan dari hasil yang

telah diperoleh.

6
 BAB II
TINJAUAN PUSTAKA

2.1. Multimedia Development Life Cycle (MDLC)

Berbagai model, metode, media serta hal-hal lain yang baru muncul dan

dipergunakan dalam pembelajaran yang semakin berkembang. Perkembangan

multimedia juga termasuk digunakan dalam pembelajaran. Penggunaan multimedia

dalam pembelajaran dapat menggantikan metode pembelajaran secara

konvensional menjadi lebih menarik.

Penggunaan dan perpaduan gambar, video dan suara dalam multimedia

banyak menarik maupun menggugah minat belajar peserta didik atau siswa.

Multimedia juga mampu memudahkan penyampaian materi-materi tertentu kepada

siswa dibandingkan dengan cara penyampaian materi lainnya. Namun untuk

membuat penggunaan dan materi multimedia yang tepat pada pembelajaran perlu

pengembangan khusus, mengingat untuk produksi multimedia diperlukan

pengetahuan dan keterampilan dalam menyusun dan membangun materi berbasis

multimedia yang baik.

Pengembangan multimedia agar dapat dimasukkan dalam pembelajaran harus

melalui tahapan-tahapan yang terancang dengan baik dan runtut agar produk

multimedia yang dihasilkan memiliki kualitas yang baik dan tepat digunakan dalam

pembelajaran.

7
 Pengembangan multimedia dapat dilakukan dengan metode Multimedia

Development Life Cycle (MDLC) yang terdiri dari 6 tahap. Tahapan pengembangan

dalam Multimedia Development Life Cycle (MDLC) ini yaitu:

1. Concept (Konsep). Merumuskan dasar-dasar dari proyek multimedia yang

akan dibuat dan dikembangkan. Terutama pada tujuan dan jenis proyek yang

akan dibuat.

2. Design (Desain / Rancangan). Tahap dimana pembuat atau pengembang

proyek multimedia menjabarkan secara rinci apa yang akan dilakukan dan

bagaimana proyek multimedia tersebut akan dibuat. Pembuatan naskah

ataupun navigasi serta proses desain lain harus secara lengkap dilakukan.

Pada tahap ini akan harus mengetahui bagaimana hasil akhir dari proyek yang

akan dikerjakan.

3. Obtaining Content Material (Pengumpulan Materi). Merupakan proses untuk

pengumpulan segala sesuatu yang dibutuhkan dalam proyek. Mengenai

materi yang akan disampaikan, kemudian file-file multimedia seperti audio,

video, dan gambar yang akan dimasukkan dalam penyajian proyek

multimedia tersebut.

4. Assembly (Penyusunan dan Pembuatan). Waktunya proyek multimedia

diproduksi. Materi-materi serta file-file multimedia yang sudah didapat

kemudian dirangkai dan disusun sesuai desain. Pada proses ini sangat

dibutuhkan kemampuan dari ahli agar mendapatkan hasil yang baik.

5. Testing (Uji Coba). Setelah hasil dari proyek multimedia jadi, perlu dilakukan

uji coba. Uji coba dilakukan dengan menerapkan hasil dari proyek

8
 multimedia tersebut pada pembelajaran secara minor. Hal ini dimaksudkan

agar apa yang telah dibuat sebelumnya memang tepat sebelum dapat

diterapkan dalam pembelajaran secara massal.

6. Distribution (Menyebar Luaskan). Tahap penggandaan dan penyebaran hasil

kepada pengguna. Multimedia perlu dikemas dengan baik sesuai dengan

media penyebar luasannya, apakah melalui CD/DVD, download ataupun

media yang lain.

Gambar 2.1. Multimedia Development Life Cycle

Selain menggunakan metode Multimedia Development Life Cycle (MDLC),

terdapat juga metode pengembangan multimedia untuk pembelajaran lain. Vaughan

dalam Sutopo (2012) mengidentifikasi bahwa juga terdapat 6 tahap yang sesuai

untuk pengembangan multimedia yaitu:

1. Analisis. Dalam tahap ini dilakukan identifikasi perkiraan kebutuhan yang

dihasilkan dari penelitian awal. Disamping itu dilakukan analisis mengenai

teknologi, macam multimedia, dan media yang digunakan.

9
 2. Pretesting. Dalam tahap ini, diidentifikasi kebutuhan skill untuk

pengembangan model, membuat outline konten, serta membuat prototype

pada kertas.

3. Prototype Development. Dalam tahap ini dilakukan pembuatan screen mock-

up atau desain visual tampilan, peta konten, interface, dan script atau cerita.

4. Alpha Development. Dalam tahap ini dilakukan pembuatan storyboard,

ilustrasi, audio, video, serta pemecahan masalah teknis yang dapat

menghambat pengembangan model.

5. Beta Development. Dalam tahap ini dilakukan pembuatan dokumen manual

dan kemasan, master file, serta pemberitahuan kepada media.

6. Delivery. Dalam tahap ini dilakukan penyiapan pendukung teknis, peluncuran

produk, penggandaan produk, dan penyelesaian pembayaran kepada semua

pihak.

2.2 Multimedia

2.1.1 Definisi Multimedia

Multimedia bisa diartikan sebagai pemanfaatan komputer untuk membuat

dan menggabungkan teks, grafik, audio, gambar gerak (video dan animasi)

dengan menggabungkan link dan tool yang memungkinkan pemakai melakukan

navigasi dan berinteraksi dengan aplikasi tersebut [Firdaus, 2012]. Definisi

tersebut mendefinisikan empat elemen yang harus ada pada multimedia.

Keempat komponen tersebut adalah:

10
1. Harus ada sebuah komputer untuk mengatur apa yang akan dilihat, didengar

dan diinteraksikan.

2. Harus ada yang menghubungkan dengan informasi.

3. Harus ada alat navigasi yang membantu untuk informasi tersebut.

4. Karena multimedia bukan hanya menyaksikan, maka harus ada cara untuk

memperoleh, memproses dan berkomunikasi dengan informasi dan ide.

Multimedia muncul sebagai sebuah kemampuan dasar yang sangat

penting pada abad ke-21, bahkan multimedia mengubah cara membaca itu

sendiri. Multimedia mendobrak batasan dari teks dan menyajikannya lengkap

dengan suara, musik, gambar, dan video. Multimedia terbukti efektif

berdasarkan penelitian oleh Computer Technology Research (CTR). CTR

menyatakan manusia menyerap 20% apa yang mereka lihat, 30% apa yang

mereka dengar dan 50% apa yang mereka mereka lihat dan dengar, dan 80% apa

yang mereka lihat, dengar, dan lakukan pada saat itu. Maka dari itu, multimedia

juga akan membantu menyebarkan informasi kepada jutaan orang yang bahkan

tidak memiliki komputer.

2.1.2 Elemen Multimedia

Ada lima elemen multimedia yang dijelaskan Hofsetter pada bukunya

Multimedia Literacy, yaitu:

1. Teks

Walaupun tidak mustahil untuk menciptakan multimedia tanpa teks,

tetapi kebanyakan sistem multimedia menggunakan teks karena teks

11
adalah cara efektif untuk mengomunikasikan ide-ide dan menyediakan

instruksi bagi user. Adapun teks digolongkan menjadi:

a. Printed text

Teks biasa yang muncul di kertas biasanya digunakan untuk

dokumentasi dari multimedia. Agar multimedia dapat membaca

printed text, maka harus diubah dahulu menjadi teks komputer

dengan aplikasi word processor atau memindai teks tersebut.

b. Scanned text

Sebuah scanner mengubah printed text menjadi sebuah bentuk

yang bisa dibaca mesin dan mengubahnya kembali menjadi scanned

text. Penggunaan scanner biasanya dilakukan untuk menghemat

waktu dan tenaga dibanding mengetik langsung ke dalam komputer.

c. Electronic text

Electronic text adalah bentuk yang dapat dibaca oleh mesin,

yang bisa di-input menggunakan aplikasi word processor.

Electronic text sekarang digunakan secara luas baik untuk

pembuatan buku, majalah, dan koran.

d. Hypertext

Hypertext adalah salah satu komponen dari multimedia yang

membuat multimedia menjadi interaktif. Jika sebuah hypertext

diklik maka aplikasi akan menampilkan informasi. Maka dari itu,

sebuah hypertext dapat menjadi objek yang berupa hubungan ke

objek lain.

12
2. Grafik

Multimedia dapat mengubah gambar menjadi objek atau link.

Terkadang grafik juga muncul sebagai latar belakang dari teks. Selain

itu, gambar juga bisa berupa ikon yang digabung dengan teks,

menampilkan pilihan, atau gambar bisa ditampilkan secara full-screen

sebagai ganti dari teks, dengan bagian dari gambar sebagai objek atau

link untuk menampilkan event-event atau objak-objek lain. Ada

beberapa bentuk dari grafik yaitu:

a. Bitmap

Bitmap adalah gambar yang disimpan sebagai sebuah set dari

pixel-pixel yang berhubungan dengan layar komputer. Untuk

menampilkan gambar, komputer menempatkan setiap titik pada layar

dan warna sesuai pada bitmap.

b. Vector images

Vector images disimpan sebagai sebuah set dari operasi

matematika atau algoritma yang mendefinisikan kurva, garis, dan

bentuk dalam sebuah gambar. Untuk gambar yang tidak memiliki

banyak perubahan warna, vector images lebih efektif dibandingkan

bitmap. Vector images memiliki dua kelebihan dibandingkan bitmap.

Pertama vector image bisa diperkecil atau diperbesar lebih sempurna

tanpa mengurangi kualitas gambar. Kedua, karena vector image

memiliki ukuran file yang lebih kecil, maka lebih mudah diunduh

menggunakan internet.

13
 c. Clip art

Untuk menghemat waktu dalam pembuatan aplikasi multimedia,

dapat menggunakan sebuah library yang berisi clip art. Ada beberapa

kategori dari clip art termasuk foto, ikon, animasi, latar belakang dan

button.

d. Digitized pictures

Digitized pictures adalah gambar yang didapatkan dari sebuah

frame dari rekaman kamera, VCR, VCD, atau live video lain yang di-

capture dan dapat digunakan pada aplikasi multimedia.

e. Hyperpictures

Hyperpictures adalah sebuah gambar dimana bagian-bagiannya

dapat digunakan sebagai objek sebagai pemicu objek lain atau event-

event pada aplikasi multimedia.

3. Suara

Ada 4 tipe dari suara yang dapat dan biasa dipakai pada aplikasi

multimedia yaitu:

a. Waveform audio

Waveform audio didapat dari hasil perekaman dari apa yang

didengar. Setiap suara memiliki waveform yang menggambarkan

frekuensi, amplitudo, dan harmoni. Aplikasi waveform audio digitizers

menangkap suara dengan mengambil contoh waveform ribuan kali per

detik dan menyimpannya ke dalam harddisk berupa file ber-extension

wav (.wav).

14
b. MIDI

MIDI adalah singkatan dari Musical Instrument Digital Interface

yang menyediakan sebuah cara yang efisien untuk merekam musik.

MIDI tidak merekam waveform dari suara yang mana membutuhkan

ruang harddisk yang besar, tetapi merekam performance information

yang dibutuhkan oleh komputer untuk memainkan musik. File MIDI

disimpan pada harddisk dengan extension mid (.mid).

c. Audio CD

Audio CD dapat menampung sampai 75 menit suara berkualitas

tinggi. Rata-rata sampling-nya bisa mencapai 44.100 sampel per detik

yang cukup cepat untuk merekam semua suara yang terdengar oleh

manusia. Suara yang direkam bisa berupa bisikan lembut sampai

teriakan keras. Adressing yang digunakan CD-ROM mendukung

komputer multimedia untuk mengakses secara acak sebuah lagu dari

CD dengan akurasi 1/75 detik.

d. MP3

MP3 singkatan dari MPEG audio layer 3. MP3 adalah format file

audio yang menggunakan codec audio MPEG untuk mengkompres dan

mendekompres suara yang direkam. MP3 dapat mengkompres sebuah

track CD menjadi file yang lebih kecil dan membutuhkan bandwidth

yang lebih kecil jika ditransfer melalui internet tanpa perlu

mengkhawatirkan kualitas hasilnya.

15
4. Video

Video adalah suatu media yang menyertakan gambar dengan suara

dalam berbagai bentuk dan dapat menyajikan sesuatu mendekati seperti

kenyataannya. Menonton dan mendengar adalah suatu proses yang alami

bagi pemahaman kita terhadap dunia dan kita pun menjadi nyaman dengan

media ini.

Berikut ini adalah jenis-jenis dari video:

a. Live Video

Live video merupakan video yang disiarkan secara langsung dan

disajikan sebagai objek real-time dalam aplikasi multimedia.

b. Videotape

Videotape merupakan media video yang paling banyak

digunakan, namun videotape bersifat linier, yaitu informasi yang

disimpan dalam urutan serial dan untuk mengaksesnya dibutuhkan

waktu sekitar tiga menit untuk memajukan ataupun memutar balik pada

bagian yang diinginkan.

c. Digital Video

Digital video adalah media penyimpanan video yang paling

menjanjikan dan menarik, dimana dapat disimpan dalam file di

harddisk, CD-ROM, atau DVD-ROM. Digital video ini dapat disalurkan

melalui jaringan komputer tanpa harus menggunakan videotape dan

videodisc player.

16
 d. DVD

DVD merupakan singkatan dari Digital Versatil Disc. DVD

menggunakan MPEG-2 untuk memperkecil ukuran file menjadi disc

berukuran 4,7 inci.

e. Hypervideo

Hypervideo adalah video yang digunakan sebagai pemicu objek

multimedia.

5. Animasi

Animasi adalah penggunaan komputer untuk menciptakan

pergerakan pada layar. Dengan arti lain, animasi ialah serangkaian gambar

yang diletakkan pada posisi yang berbeda dan ketika dijalankan dengan

cepat akan menciptakan suatu efek gerak. Berikut ini adalah empat jenis

dari animasi:

a. Frame Animation

Animasi yang membuat objek-objek bergerak dengan cara

menampilkan beberapa gambar, disebut frame, walaupun objek-objek

tersebut berada pada letak yang berbeda dalam satu layar.

b. Vector Animation

Vector adalah garis yang mempunyai awal, arah dan panjang.

Vector animation membuat objek bergerak variasi melalui 3 parameter

vector yang membuat suatu objek.

17
 c. Computational Animation

Dalam computational animation, Anda dapat menggerakkan

objek melintasi layar dengan mengubah posisi koordinat x dan y.

d. Morphing

Morphing merupakan perubahan dari bentuk ke bentuk lain

dengan menampilkan sekumpulan frame sehingga tercipta pergerakan

perubahan bentuk tersebut ke bentuk lain.

2.1.3 Aplikasi Multimedia

Dengan semakin berkembangnya teknologi multimedia pada awal 1990,

maka multimedia mulai merambah dan berpengaruh pada beberapa bidang dan

sekarang multimedia menjadi sangat penting dalam komunikasi. Adapun

bidang-bidang yang dipengaruhi oleh teknologi multimedia yaitu:

1. Pendidikan

Sudah tidak diragukan lagi bahwa pendidikan adalah salah satu bidang

yang amat dipengaruhi oleh multimedia. Selama beberapa dekade

pengembangan Computer Aided Learning (CAL) dengan bidang pendidikan

dihambat oleh terbatasnya objek yang dipelajari karena adanya batasan dari

text based system. Perkembangan multimedia dan pengintegrasian suara,

video dan animasi memberikan sebuah media baru sehingga para CAL

desainer dapat menciptakan sebuah lingkungan baru yang lebih luas dalam

pembuatannya. Hal ini juga memberikan tingkat interaksi yang lebih besar

pada CAL bahwa multimedia bukan hanya meliputi semua pembelajaran yang

18
diberikan oleh CAL yang lama, tapi juga memberikan kontrol yang lebih besar

pada pembelajar dalam hal akses ke materi pembelajaran dan memberikan

interaksi yang lebih dengan materi pembelajaran. Seiring berkembangnya

teknologi world wide web dan web based multimedia, maka berkembang pula

e-learning. Beberapa institusi pendidikan menawarkan kuliah melalui web.

Dan dengan perkembangan tekhnologi web yang semakin maju, maka e-

learning akan semakin berkembang di masa depan.

2. Pelatihan

Sebuah penelitian oleh departemen pertahanan Amerika Serikat

menyatakan bahwa pelatihan menggunakan sistem multimedia memberikan

peningkatan sebesar 40% dibandingkan pelatihan biasa, dengan tingkat

ingatan 30% lebih besar dan waktu pembelajaran yang 30% lebih sedikit.

Pelatihan dengan multimedia sistem menunjukkan peningkatan ingatan,

pengurangan biasa dan waktu. Sekarang banyak perusahaan besar yang

menggunakan struktur jaringan atau intranets (internal internets) mendesain

dan membuat paket-paket latihan untuk staf mereka (dengan pendekatan e-

learning). E-training memiliki keuntungan, yaitu dengan membiarkan

karyawan untuk memilih materi pelatihan sesuai dengan kehendak mereka.

Lebih lanjut, pelatihan multimedia bisa menggunakan video, audio dan

animasi untuk memperkaya ruang lingkup pembelajaran. Pelatihan

menggunakan alat-alat rumit dapat disimulasikan dan user dapat mudah

menguasai penggunaan alat hanya dengan simulasi.

19
3. Informasi penjualan

Dalam beberapa area, dapat ditemukan kios multimedia yang

dilengkapi dengan hardware yang mengintegrasikan video, audio, dan grafik

dengan sebuah touch screen yang biasa digunakan oleh pendatang yang

menginginkan informasi. Di Amerika Serikat, informasi mengenai pelayanan

negara ditampilkan dalam sebuah sistem multimedia dengan menggunakan

touch screen yang interaktif. Contoh lain dari kios multimedia adalah kios

informasi yang terdapat pada museum-museum, tempat wisata, bandara, atau

bahkan pusat perbelanjaan.

4. Penyampaian berita, penyiaran dan periklanan

Penyiaran dan periklanan adalah satu bidang multimedia interaktif.

Peningkatan untuk agensi penyiaran dan periklanan mulai menuju pada media

interaktif. Peluncuran televisi interaktif dan bahkan peningkatan kemampuan

dari web TV dan web casting untuk menyiarkan informasi telah menjadi salah

satu peningkatan besar pada bidang penyiaran. Sekarang, jika browsing

menggunakan internet, dapat ditemukan ribuan koran dalam ratusan bahasa.

Multimedia interaktif juga dapat memperkayanya dengan menambah laporan

langsung dan video klip, dan menawarkan user pada sebuah aplikasi

pencarian agar user dapat lebih mudah mencari berita yang diinginkan.

Bahkan kantor-kantor berita sudah mulai mengeluarkan biaya untuk

membiayai pembuatan website pemberi informasi yang bisa menampilkan

informasi kapan saja.

20
 5. Aplikasi bisnis dan komersial

Dengan digunakannya aplikasi multimedia interaktif, pasar dunia

berubah dan memanfaatkan teknologi yang ada untuk menawarkan bisnis.

Bahkan, industri perbankan yang merupakan bidang bisnis paling konservatif

sudah mulai menggunakan teknologi multimedia sebagai suatu alat yang

potensial untuk mencari pasar baru. Imbas utama dari multimedia adalah

pecahnya ikatan ruang dan waktu dari pasar. Setiap perusahaan dan pembeli

bisa kapan saja bertemu dan berkomunikasi satu sama lain. Teknologi

mengubah paradigma bisnis dan pemasaran. Paradigma one-to-many dimana

perusahaan menawarkan produk pada banyak konsumen berubah menjadi

sebuah model paradigma many-to-many dengan memberikan kebebasan pada

konsumen untuk memilih dan berkomunikasi.

2.3. Aplikasi

2.3.1. Definisi Aplikasi

Aplikasi adalah penggunaan dalam suatu komputer, instruksi (instruction)

atau pernyataan (statement) yang disusun sedemikian rupa sehingga komputer

dapat memproses input menjadi output.[Jogiyanto.(1999)]

Beberapa aplikasi yang digabung bersama menjadi suatu paket disebut

sebagai suatu paket atau application suite. Aplikasi-aplikasi dalam suatu paket

biasanya memiliki antarmuka pengguna yang memiliki kesamaan sehingga

memudahkan pengguna untuk mempelajari dan menggunakan tiap aplikasi.

21
2.3.2. Pengertian Aplikasi Web

Aplikasi web merupakan sebuah aplikasi yang mengunakan teknologi

browser untuk menjalankan aplikasi dan diakses melalui jaringan komputer.

Aplikasi web juga merupakan sebuah program yang disimpan di server dan

dikirim melalui internet dan diakses melalui antarmuka browser. Dari pengertian

di atas dapat disimpulkan aplikasi web merupakan aplikasi yang diakses

mengunakan web browser melalui jaringan internet atau intranet. Aplikasi web

juga merupakan suatu perangkat lunak komputer yang dikodekan dalam bahasa

pemrograman yang mendukung perangkat lunak berbasis web seperti HTML,

Javascript, CSS, Ruby, Python, Php, Java dan bahasa pemrograman lainnya.

[Hidayatullah,P dan Kawistara,J.H.(2014)].

2.3.3. Keunggulan dan Kekurangan Aplikasi Web

Keunggulan dan kekurangan dari aplikasi website menurut

[Hidayatullah,P dan Kawistara,J.H.(2014)]

Keunggulan:

▪ Kita dapat menjalankan aplikasi berbasis web dimanapun kapanpun tanpa

harus melakukan penginstalan.

▪ Terkait dengan isu lisensi (hak cipta), kita tidak memerlukan lisensi ketika

menggunakan web-based application, sebab lisensi telah menjadi

tanggung jawab dari web penyedia aplikasi.

22
 ▪ Dapat dijalankan disistem operasi manapun. Tidak peduli apakah kita

menggunakan linux, windows, aplikasi berbasis web dapat dijalankan

asalkan kita memiliki browser dan akses internet.

▪ Dapat diakses lewat banyak media seperti: komputer, handheld dan

handphone yang sudah sesuai dengan standard WAP.

▪ Tidak perlu spesifikasi komputer yang tinggi untuk menggunakan aplikasi

berbasis web ini, sebab di beberapa kasus, sebagian besar proses dilakukan

di web server penyedia aplikasi berbasis web ini.

Kekurangan:

▪ Dibutuhkan koneksi intranet dan internet yang handal dan stabil, hal ini

bertujuan agar pada saat aplikasi dijalankan akan berjalan dengan baik dan

lancar.

▪ Dibutuhkan sistem keamanan yang baik dikarenakan aplikasi dijalankan

secara terpusat, sehingga apabila server di pusat down maka sistem

aplikasi tidak bisa berjalan.

2.4. Definisi Informasi

Istilah informasi sering kita soroti dalam lingkup teknologi, seperti istilah

teknologi informasi yang umum kita ketahui. Namun informasi memiliki

pengertian yang sangat luas bukan hanya ada dalam teknologi. Meskipun

kenyataannya tidak bisa kita pungkiri bahwa informasi ini memiliki kaitan erat

dengan teknologi, karena dengan perkembangan teknologi itu sendiri informasi

23
juga berkembang dengan pesat, karena itu tepatlah bahwa perkembangan teknologi

dan informasi ini membentuk sebuah era yaitu “Era Informasi”.[Jogiyanto.(1999)]

Informasi adalah hasil dari pengolahan data dalam suatu bentuk yang lebih

berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu kejadian-

kejadian (event) yang nyata (fact) yang digunakan untuk pengambilan

keputusan.[Jogiyanto.(1999)]

Secara etimologi, kata informasi ini berasal dari kata bahasa Perancis kuno

informacion (tahun 1387) mengambil istilah dari bahasa Latin yaitu informationem

yang berarti “konsep, ide atau garis besar,”. Informasi ini merupakan kata benda

dari informare yang berarti aktivitas. Aktivitas dalam “pengetahuan yang

dikomunikasikan”, informasi bisa menjadi fungsi penting dalam membantu

mengurangi rasa cemas pada seseorang. Menurut pendapat Jogiyanto bahwa

semakin banyak memiliki informasi dapat memengaruhi atau menambah

pengetahuan terhadap seseorang dan dengan pengetahuan tersebut bisa

menimbulkan kesadaran yang akhirnya seseorang itu akan berperilaku sesuai

dengan pengetahuan yang dimilikinya.[Jogiyanto.(1999)]

Informasi bisa dikatakan sebagai pengetahuan yang didapatkan dari belajar,

pengalaman atau instruksi. Namun, istilah ini masih memiliki banyak arti

tergantung pada konteksnya. Dalam beberapa pengetahuan tentang suatu peristiwa

tertentu yang telah dikumpulkan ataupun dari sebuah berita dapat juga dikatakan

sebagai informasi. Lain halnya dalam ilmu komputer, informasi adalah data yang

disimpan, diproses atau ditransmisikan. Para ahli meneliti konsep informasi

24
tersebut sebagai pengetahuan yang didapatkan dari pembelajaran, pengalaman

maupun instruksi.

Dari pengertian lainnya informasi adalah data yang telah diberi makna.

Misalnya, dokumen berupa spreadsheet (Ms.Excel) biasa digunakan untuk

membuat informasi dari data yang ada di dalamnya. Laporan laba rugi dan neraca

merupakan salah satu bentuk informasi, sedangkan angka yang terdapat di

dalamnya adalah data yang telah diproses sehingga bisa digunakan oleh siapa saja

yang membutuhkannya dan pada akhirnya sifat informasi ini adalah bisa menambah

pengetahuan atau wawasan terhadap seseorang.

Sumber informasi adalah data. Data itu berupa fakta kenyataan yang

menggambarkan suatu kejadian-kejadian dan kesatuan nyata. Yang kemudian data

tersebut diolah melalui suatu metode untuk menghasilkan informasi, kemudian

penerima menerima informasi tersebut, membuat suatu keputusan dan melakukan

tindakan, yang kemudian menghasilkan suatu tindakan yang lain yang akan

menimbulkan sejumlah data kembali. Data tersebut akan ditangkap sabagai input,

diproses kembali lewat suatu model dan seterusnya membentuk suatu siklus.[Al

Fatta, Hanif (2008)]

2.4.1. Siklus Informasi

Data merupakan bentuk yang masih mentah yang belum bercerita banyak,

sehingga perlu diolah lebih lanjut menjadi suatu model untuk dihasilkan

informasi. Data yang diolah untuk menghasilkan informasi menggunakan suatu

model proses tertentu.

25
 Data yang diolah melalui suatu model menjadi informasi, penerima

kemudian menerima informasi tersebut, melakukan keputusan berdasarkan

informasi tersebut dan melakukan tindakan, yang berarti menghasilkan suatu

tindakan yang lain yang akan membuat sejumlah data kembali. Data tersebut

akan ditangkap kembali sebagai input, diproses kembali melalui suatu model dan

seterusnya yang merupakan suatu siklus.[Jogiyanto.(1995)]

Gambar 2.2. Siklus Informasi

2.4.2. Jenis-Jenis Informasi

a. Informasi berdasarkan fungsi dan kegunaan, adalah informasi

berdasarkan materi dan kegunaan informasi. Informasi jenis ini antara

lain adalah: [Hartono.(2009)]

1. Informasi yang menambah pengetahuan, misalnya: peristiwa-

peristiwa, pendidikan, kegiatan selebritis.

26
 2. Informasi yang mengajari pembaca (informasi edukatif), misalnya

makalah yang berisi tentang cara beternak itik, artikel tentang cara

membina persahabatan, dan lain-lain.

b. Informasi berdasarkan format penyajian, adalah informasi yang

berdasarkan bentuk penyajian. Informasi jenis ini, antara lain berupa

tulisan teks, karikatur, foto ataupun lukisan abstrak.

c. Informasi berdasarkan lokasi peristiwa, adalah informasi berdasarkan

lokasi peristiwa berlangsung, yaitu informasi dari dalam negeri dan

informasi dari luar negeri.

d. Informasi berdasarkan bidang kehidupan adalah informasi berdasarkan

bidang-bidang kehidupan yang ada, misalnya pendidikan, olahraga,

musik, sastra, budaya, dan iptek.

e. Berdasar penyampaian:

▪ Informasi yang disediakan secara berkala

▪ Informasi yang disediakan secara tiba-tiba

▪ Informasi yang disediakan setiap saat

▪ Informasi yang dikecualikan

▪ Informasi yang diperoleh berdasarkan permintaan

2.4.3. Ciri-Ciri Informasi Yang Berkualitas

1. Informasi harus relevan, yang artinya informasi tersebut mempunyai

manfaat oleh pemakainya.

27
 2. Informasi harus akurat, yang artinya informasi harus bebas dari kesalahan-

kesalahan dan harus jelas mencerminkan maksudnya.

3. Tepat pada waktunya, yang artinya informasi yang diterima tidak boleh

terlambat.

4. Konsisten, yang artinya informasi yang diterima sesuai dengan datanya

tidak mengalami perubahan yang tidak benar.

2.4.4. Manfaat Informasi

1. Meningkatkan pengetahuan atau kemampuan pengguna,

2. Mengurangi ketidakpastian dalam proses pengambilan keputusan,

3. Menggambarkan keadaan sesuatu hal atau peristiwa yang terjadi.

2.5. Virtual Reality

Istilah Virtual Reality banyak digunakan orang dengan berbagai pengertian.

Beberapa orang menganggap VR adalah suatu kumpulan teknologi tertentu, seperti

HMD (Head Mounted Display), Glove Input Device dan audio. Beberapa orang

lainnya memperluas istilah VR dnegan memasukkan buku-buku, film atau fantasi

dan imajinasi. Di antara semua definisi VR yang ada intinya adalah suatu cara bagi

manusia untuk memvisualisasi, memanipulasi dan berinteraksi dengan komputer

dan data yang rumit (complex). VR dapat dikatakan sebagai suatu teknologi yang

memperbolehkan pengguna untuk berinteraksi dengan lingkungan yang

disimulasikan dengan komputer, baik itu lingkungan sebenarnya ataupun fiksi.

28
 2.5.1. Sejarah perkembangan Virtual Reality

Konsep Virtual Reality telah ada sejak beberapa dekade yang lalu,

walaupun baru disadari oleh publik pada awal 90-an. Pada pertengahan 1950,

Morton Heilig seorang cinematographer memimpikan sebuah teater yang

mampu merangsang indera penonton agar dapat mengikuti cerita dengan lebih

efisien. Dia membuat konsol pada 1960 yang bernama Sensorama yang di

dalamnya terdapat layar stereoscope, kipas, penebar bau, stereo speaker dan

kursi gerak. Dia juga membuat layar televisi yang bisa dipakaikan ke kepala.

Pada kasus ini pengguna merupakan penonton yang pasif. Pada 1961, teknisi

Philco Corporation mengembangkan Head Mounted Display (HMD) pertama,

dinamakan Headsight. Headsight dilengkapi dengan tampilan video dan sistem

pelacak. Dibuat untuk digunakan pada situasi yang berbahaya. Pada 1965,

seorang ahli komputer bernama Ivan Sutherland memimpikan sesuatu yang

disebutnya “Ultimate Display”. Menggunakan tampilan ini seseorang bisa

melihat ke dalam dunia virtual yang muncul seperti dunia asli. Visi inilah yang

mendorong perkembangan virtual reality sampai saat ini. Salah satu

perkembangan yang paling mempengaruhi dari dunia Virtual Reality adalah

flight simulator. Berikut adalah tabel tentang sejarah perkembangan Virtual

Reality:

Person(s)
Year Accomplishment Why it was important
Responsible
1965 Ivan Sutherland Ultimate Display The beginnings of VR
Dan Sandin, Interaction through body
1977 The first dataglove
Richard Sayre movement

29
 and Thomas
Defanti
Bonnie MacBird The first computer-
1982 Tron
(Writer) generated movie
1983 Myron Krueger Videospace First virtual environtment
William Gibson
1984 Neuromancer The term ‘Cyberspace’
(His Assistant)
Michael Piller Star Trek-The Next The Holodeck, idea of
1987
(Writer) Generation immersive VR
Stephen King A look at the possible
1992 Lawnmower Man
(OfficialWebsite) negative side of VR
Virtual Reality Modeling
1995 Silicon Graphics VRML 1.0
Language
Virtual Reality movie
Larry and Andy
1999 The Matrix grosses $750M
Wachowski
worldwide
References used forthis timeline
Tabel 2.1. Sejarah Perkembangan VR

2.5.2. Virtual Reality Immersion

Dalam lingkungan Virtual Reality, seorang pengguna akan mengalami

immersion, atau suatu perasaan berada dalam dunia virtual dan menjadi bagian

dari dunia tersebut.

Dengan kata lain VR yang efektif membuat pengguna menjadi tidak sadar

akan keadaan asli di sekelilingnya dan fokus akan keberadaannya di dunia

virtual tersebut. Untuk membuat immersion yang efektif, seorang pengguna

harus dapat menjelajahi apapun yang muncul dalam lingkungan virtual dan

dapat mengganti pandangan perspektif yang seamless. Jadi pengguna dapat

melihat dari berbagai sudut pandang berdasarkan posisi pengguna saat melihat.

30
2.5.3. Virtual Reality Interactivity

Immersion pada lingkungan virtual adalah suatu hal yang penting, tetapi

agar pengguna dapat merasa benar-benar ikut serta di dalamnya harus ada

elemen interaksi. Pada awalnya, aplikasi virtual menghasilkan penonton yang

pasif. Hal ini dikarenakan kurangnya interaksi dari pengguna. Interaktifitas

tergantung banyak faktor. Steuer menyarankan tiga faktor, yaitu:

a. Speed, kecepatan dari aksi pengguna yang tergabung dalam model

komputer dan direfleksikan dalam suatu cara yang dimengerti pengguna.

b. Range, berapa banyak kemungkinan hasil yang muncul dari aksi

pengguna.

c. Mapping, kemampuan sistem menghasilkan kejadian alami (natural

result) dalam merespon aksi pengguna.

Navigasi pada lingkungan virtual merupakan salah satu interaksi. Jika

pengguna dapat mengatur gerakannya sendiri, hal itu bisa disebut sebagai

pengalaman yang interaktif. Kebanyakan lingkungan virtual memasukkan

bentuk interaksi lain, karena pengguna mudah bosan setelah melakukan

eksplorasi. Marry Whitton, seorang ahli komputer, mengatakan interaksi yang

didesain dengan buruk dapat mengurangi immersion secara drastis.

2.5.4. Virtual Reality Photography

VR photography atau virtual reality photography, adalah suatu teknik

untuk dapat melihat secara interaktif foto panorama yang memiliki sudut

pandang lebar. Sebuah VR Photograph secara umum adalah suatu tampilan foto

31
lebar yang mencakup sudut pandang 360 derajat dan dapat mencakup seluruh

spherical view.

VR photography merupakan sebuah teknik menangkap dan membuat

pemandangan lengkap dalam sebuah tampilan foto, yang dapat dilihat ketika

diputar dari suatu titik pusat. Umumnya dibuat dengan menyambungkan banyak

foto yang diambil dalam multi-row 360 degree rotation; gambar yang dihasilkan

dapat diberikan efek menggunakan komputer, atau gabungan dari foto dunia asli

dan objek yang dibuat komputer. Hasil akhirnya sering disebut dengan VR

Panorama, dapat dilihat menggunakan aplikasi antarmuka yang interaktif (dapat

berputar secara horizontal dan vertikal, seakan-akan berada di dalam

pemandangan dunia asli). Proses penggabungan semua foto biasa disebut dengan

stitching. Tipe gambar panorama ada beberapa jenis seperti equirectangular,

cube map, silinder dan little planet.

Gambar 2.3. Contoh Gambar Virtual Reality Photography

32
2.6. Virtual tour

Virtual tour adalah sebuah simulasi dari suatu lingkungan nyata, biasanya

terdiri dari kumpulan foto-foto panorama, kumpulan gambar yang terhubung oleh

hyperlink, ataupun video, atau virtual model dari lokasi yang sebenarnya, serta

dapat menggunakan unsur-unsur multimedia lainnya seperti efek suara, musik,

narasi, dan tulisan [Handjojo, 2013].

Istilah “virtual tour” sering digunakan untuk menggambarkan berbagai video

dan media berbasis fotografi. Kata “panorama” mengindikasikan sebuah

pandangan yang tidak terputus, karena panorama bisa berupa sekumpulan foto

memanjang ataupun hasil pengambilan video yang kameranya berputar/bergeser.

Tetapi istilah “virtual tour” paling sering diasosiasikan dengan virtual tour yang

diciptakan dengan foto yang tidak bergerak. Virtual tour dibuat dari sebuah foto

yang diambil dari sebuah titik pivot. Kamera dan lensa dirotasi berdasarkan apa

yang disebut sebagai “nodal point” (suatu titik yang tepat berada pada bagian

belakang lensa dimana cahaya berkumpul).

Berapa tempat virtual tour yang paling terkenal adalah museum, daerah-

daerah parawisata, universitas, real estate, tempat bersejarah, taman dan daerah

penangkaran serta tempat-tempat umum seperti hotel dan motel.

2.6.1. Pengertian Gambar Panorama

Gambar panorama adalah beberapa gambar/foto dan digabungkan

bersama-sama dengan menggunakan media digital untuk mendapatkan

gambar/foto yang jauh lebih besar dan luas dengan skala atau ukuran serta detail

yang tidak bisa dilakukan oleh pemotretan standar [tipsfotografi.net, 2012]

33
 Panorama dibuat mengguanakan perangkat dasar fotografi yaitu kamera,

lensa, dan tripod ditambah dengan gimbal head agar tidak terjadi paralaks.

Gambar panorama merupakan tingkat lanjut dari fotografi dasar sebab

membutuhkan pengetahuan tentang segitiga eksposur dan metering gambar.

Gambar panorama terbagi menjadi berbagai tipe:

- Wide angle panorama adalah foto yang terlihat seperti foto wide angle

yang memiliki cakupan kurang dari 180 derajat baik berbetuk vertikal

maupun horisontal. Wide angle panorama biasanya nampak seperti

gambar biasa hanya memiliki perbedaan ukuran karena merupakan

gabungan dari beberapa gambar.

- 180 derajat panorama adalah foto panorama yang memiliki cakupan 180

derajat mulai dari kiri sampai kanan. Gambar ini terlihat lebih lebar atau

lebih luar daripada gambar pada umumnya.

- 360 derajat panorama adalah gambar yang memiliki cakupan 360 derajat

yang membuat gambari ini tampak sangat lebar karena semua sudut

digabungkan menjadi satu gambar.

Memotret panorama, perlu memperhatikan beberapa hal seperti :

- Menggunakan tripod yang dilengkapi dengan gimbal head agar

menghasilkan gambar yang bebas getar dan lebih tajam

- Memperhatikan kondisi pencahayaan

- Memperhatikan kondisi angin, seperti angin kencang atau awan yang

bergerak dapat mempengaruhi hasil foto

34
 - Memperhatikan subjek yang bergerak, semakin banyak subjek yang

bergerak semakin banyak gambar yang diambil

- Menjaga eksposur tidak berubah untuk hasil gambar yang konsisten

2.6.2. Mengambil Gambar Panorama

Memotret gambar panorama menggunakan cara yang berbeda

dibandingkan dengan memotret pada umumnya walaupun sama-sama

menggunakan kamera dan lensa. Jika pada pada pengambilan gambar yang

umum cukup dengan mengukur segitiga eksposur yang baik dan pas, maka

dalam mengambil gambar panorama membutuhkan sedikit perhitungan

matematis yang dihitung berdasarkan peralatan yang digunakan. Kamera

memiliki ukuran sensor yang berbeda dihitung dengan besarnya ukuran sensor,

dan lensa memiliki luas pandang yang berbeda dihitung dari lebar fokalnya

(focal lenght).

Gambar 2.4. Perbandingan ukuran sensor pada kamera

35
 Kamera di era digital sudah menggunakan sensor digital dan tidak lagi

menggunakan roll film untuk menangkap gambar. Kelebihan dari sensor digital

ini adalah tidak ada batasan dalam mengambil gambar dan lebih hemat biaya

produksi. Kini bahkan smartphone sudah tersedia kamera yang sangat canggih

untuk menangkap gambar. Ukuran besar sensor kamera dalam membuat gambar

panorama memiliki pengaruh terhadap lebar lensa yang digunakan, contohnya

sebuah kamera berukuran sensor full frame dengan lensa 15 mm memiliki sudut

pandang yang sama dengan kamera bersensor APS-C dengan lensa 10 mm.

Tabel 2.2. Perbandingan lebar sudut pandang lensa berdasarkan ukuran sensor

36
 Hal ini karena semakin besar sensor maka semakin lebar cakupan sudut

pandangnya. Dan untuk membuat gambar panorama maka dibutuhkan kamera

dengan lensa yang memiliki sudut pandang yang sangat lebar. Perbandingan

sudut pandang lensa dapat dilihat pada tabel 2.2.

Jadi ketika menggunakan kamera dan lensa yang memiliki lebar sudut

pandang 90 derajat artinya untuk membuat 1 buah gambar panorama 360 derajat

membutuhkan sebanyak minimal 5 gambar dengan menghitung overlapping

masing-masing gambar.

2.6.3. Overlap Gambar Panorama

Gambar panorama dibuat dengan menjahit gambar yang satu dengan yang

lainnya. Ini disebut dengan proses stitching. Proses stitching membutuhkan

bantuan perangkat lunak untuk pengerjaannya. Stitching bekerja dengan

menjahit bagian gambar ke bagian gambar yang sama. Hal ini disebut dengan

overlapping.

Gambar 2.5. Overlapping mengambil gambar yang sama pada gambar yang lain

37
 Proses stitching sangat rentan terhadap error jika terdapat kesalahan saat

pengambilan gambar, maka diperlukan perhitungan lensa dan kamera yang

benar agar dapat terjadi proses overlapping. Penjelasan overlapping dapat dilihat

pada gambar 2.5.

Overlapping yang baik adalah dengan mengambil 20-30% bagian gambar

untuk mendapatkan bagian gambar yang tajam dan agar tidak terjadi proses

error saat stitching.

2.7. Interaksi Manusia dan Komputer

Interaksi manusia dan komputer (IMK) adalah desain yang harus menghasilkan

kesesuaian antara pengguna, mesin dan pelayanan yang dibutuhkan untuk mencapai

kinerja tertentu baik dalam kualitas dan optimalitas dari layanan. Menentukan apa

yang membuat desain IMK tertentu baik sebagian besar tergantung pada subjektif

dan konteksnya. Teknologi yang tersedia juga bisa mempengaruhi bagaimana

berbagai jenis IMK dirancang untuk tujuan yang sama. Salah satu contoh adalah

menggunakan perintah, menu, graphic user interface (GUI), atau realitas virtual

untuk mengakses fungsi-fungsi komputer yang diberikan. Pada bagian berikutnya,

gambaran yang lebih rinci tentang metode yang ada dan perangkat yang digunakan

untuk berinteraksi dengan komputer dan menyajikan kemajuan terbaru di lapangan

[Karray, 2008].

Interaksi Manusia dan Komputer merupakan subyek yang menggunakan teori

dan metode yang relevan dari banyak bidang ilmu, meliputi ilmu-ilmu fisik dan

sosialnya, juga teknik dan seni. Konstribusi yang penting dalam IMK berasal dari

38
ilmu komputer dan psikologi. Kontribusi lanjutan berasal dari matematika, seni

grafik, sosiologi dan intelejensi buatan [Agushinta, 2010].

2.8. Perangkat Lunak yang Digunakan

2.8.1. HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup

yang digunakan untuk membuat sebuah halaman web dan menampilkan

berbagai informasi di dalam sebuah browser internet. Bermula dari sebuah

bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan

yang disebut dengan SGML (Standard Generalized Markup Language), HTML

adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman

web. HTML saat ini merupakan standar internet yang didefinisikan dan

dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

[Hidayatullah,P dan Kawistara,J.H.(2014)]

HTML berupa kode-kode tag yang menginstruksikan browser untuk

menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang

merupakan file HTML dapat dibuka dengan menggunakan web browser seperti

Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali

oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki

kemampuan browser.

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam

dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau

lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks

39
ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya

dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk

mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan

diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. [Fajar

Junaedi EP.(2005)].

Secara garis besar, terdapat 4 jenis elemen dari HTML:

▪ Structural, tanda yang menentukan level atau tingkatan dari sebuah

teks (contoh, <h1>Golf</h1> akan memerintahkan browser untuk

menampilkan “Golf” sebagai teks tebal besar yang menunjukkan

sebagai Heading 1,

▪ Presentational, tanda yang menentukan tampilan dari sebuah teks

tidak peduli dengan level dari teks tersebut (contoh,

<b>boldface</b>akan menampilkan bold. Tanda presentational saat

ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan

untuk mengatur tampilan teks,

▪ Hypertext, tanda yang menunjukkan pranala ke bagian dari dokumen

tersebut atau pranala ke dokumen lain (contoh, <a

href="http://www.unhas.ac.id/">Unhas</a> akan menampilkan

Unhas sebagai sebuah hyperlink ke URL tertentu),

▪ Elemen widget yang membuat objek-objek lain seperti tombol

(<tombol>), list (<li>) dan garis horizontal (<hr>).

40
2.8.2. CSS

2.8.2.1. Pengertian CSS

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (Style

sheet language) yang mengontrol format tampilan sebuah halaman web yang

ditulis dengan menggunakan penanda markup laguage. Biasanya CSS

digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi

sekarang CSS bisa diaplikasikan untuk segala dokumen XML, termasuk SVG

dan XUL bahkan android.[Hidayatullah,P dan Kawistara,J.H.(2014)]

CSS dibuat untuk memisahkan konten utama dengan tampilan

dokumen yang meliputi layout, colour dan font. Pemisahan ini dapat

meningkatkan daya akses konten pada web, menyediakan lebih banyak

fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari

sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah

formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari

konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam

berbagai Style dengan menggunakan metode pembawaan yang berbeda pula,

seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik

konten web bisa menentukan link yang menghubungkan konten dengan file

CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen

dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman

ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web

41
diantaranya adalah warna, ukuran dan formatting. Dengan adanya CSS,

konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk

melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web,

sehingga akan memudahkan dalam membuat halaman web yang banyak, yang

pada akhirnya dapat memangkas waktu pembuatan web. [Hardjono,

Dhewiberta,(2006)]

2.8.2.2. Style Sheets

Style Sheets merupakan feature yang sangat penting dalam membuat

Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam

membuat web, akan tetapi penggunaan Style Sheets merupakan kelebihan

tersendiri.

Suatu Style sheet merupakan tempat dimana Anda mengontrol dan

memanage Style-Style yang ada. Style sheet mendeskripsikan bagaimana

tampilan dokumen HTML di layar. Anda juga bisa menyebutnya sebagai

template dari dokumen HTML yang menggunakannya.

Anda juga bisa membuat efek-efek spesial di web Anda dengan

menggunakan Style sheet. Sebagai contoh Anda bisa membuat Style sheet

yang mendefinisikan Style untuk <H1> dengan Style bold dan italic dan

berwarna biru. Atau pada tag <P> yang akan ditampilkan dengan warna

kuning dan menggunakan font verdana dan masih banyak lagi yang bisa Anda

lakukan dengan Style sheet.

Secara teoritis Anda bisa menggunakan Style sheet technology dengan

HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS)

42
technology yang support pada hampir semua web Browser. Karena CSS telah

distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di

web browser. Ada dua cara untuk mengubah Style dari web page Anda yaitu

dengan mengubah inline Style atau menulis script untuk mengubah Style

Anda.

Style sheet dapat dapat diembedded ke dokumen HTML. Atau disebut

embedded Style sheet. Style sheet juga bisa dibuat sebagai external file dan di

link ke document HTML. Style role bisa dikenakan pada bagian tertentu dari

web page. Sebagai contoh Anda bisa menentukan paragraf tertentu

ditampilkan dengan Style bold dan italic sementara yang lain tetap seperti

biasa.

Style Sheets terdiri dari dua bagian:

1. Selector: Bagian pertama sebelum tanda “{}” disebut selector

2. Declaration: Terdiri dari property dan nilainya.

2.8.2.3. Aturan Penulisan Pada CSS

Aturan penulisan CSS berisi set intruksi yang memerintahkan browser

untuk mengikuti aturan dan mengubah tampilan elemen XHTML

berdasarkan pada nilai-nilai yang diberikan. Struktur penulisan CSS dapat

dilihat pada gambar 2.6.

43
 Gambar 2.6. Struktur penulisan CSS

Begitupun dengan aturan penulisan pada CSS terbagi menjadi 3 yaitu:

- Inline Styles: CSS dideklarasikan sebagai atribut pada elemen. Tidak

dibangun sebagai aturan, dan tidak ada selector. Properti dan nilainya melekat

langsung pada elemen.

- Embedded Style Sheets: Aturan CSS ditanamkan dalam elemen head dari

dokumen. Aturan tersebut hanya berlaku pada dokumen di mana

dideklarasikan.

- External Style Sheets : Menempatkan aturan CSS secara terpisah, Style

sheet external terhubung dengan dokumen melalui elemen head. File Style

sheet text disimpan menggunakan ekstensi .css.

2.8.3. MySql

2.8.3.1. Pengertian MySql

MySQL adalah sebuah perangkat lunak sistem manajemen basis data

SQL (DBMS) yang multithread, dan multi-user. MySQL adalah

implementasi dari sistem manajemen basis data relasional (RDBMS).

44
MySQL dibuah oleh TcX dan telah dipercaya mengelola sistem dengan 40

buah database berisi 10.000 tabel dan 500 di antaranya memiliki 7 juta

baris.[Sianipar,R.H(2015)]

MySQL AB merupakan perusahaan komersial Swedia yang

mensponsori dan yang memiliki MySQL. Pendiri MySQL AB adalah dua

orang Swedia yang bernama David Axmark, Allan Larsson dan satu orang

Finlandia bernama Michael “Monty”. Setiap pengguna MySQL dapat

menggunakannya secara bebas yang didistribusikan gratis di bawah lisensi

GPL (General Public License) namun tidak boleh menjadikan produk turunan

yang bersifat komersial.[Sianipar,R.H(2015)]

Pada saat ini MySQL merupakan database server yang sangat terkenal

di dunia, semua itu tak lain karena bahasa dasar yang digunakan untuk

mengakses database yaitu SQL. SQL (Structured Query Language) pertama

kali diterapkan pada sebuah proyek riset pada laboratorium riset San Jose,

IBM yang bernama sistem R. Kemudian SQL juga dikembangan oleh Oracle,

Informix dan Sybase. Dengan menggunakan SQL, proses pengaksesan

database lebih user-friendly dibandingan dengan yang lain, misalnya dBase

atau Clipper karena mereka masih menggunakan perintah-perintah

pemrograman murni. SQL dapat digunakan secara berdiri sendiri maupun di

lekatkan pada bahasa pemograman seperti C, dan

Delphi.[Sianipar,R.H(2015)].

45
2.8.3.2. Type Data MySql

Setelah mengetahui apa itu MySQL, mari kita lihat macam-macam tipe

data dalam MySQL. Secara umum tipe data MySQL ada empat, yaitu

numerik, string, date, & kelompok himpunan.

- Tipe Numerik

Tipe data numerik digunakan untuk menyimpan data numeric (angka).

1. Tinyint: digunakan untuk menyimpan data bilangan bulat positif dan

negatif.

2. Smallint: digunakan untuk menyimpan data bilangan bulat positif

dan negatif.

3. Medium int: digunakan untuk menyimpan data bilangan bulat positif

dan negatif.

4. Int: digunakan untuk menyimpan data bilangan bulat positif dan

negatif.

5. Bigint: digunakan untuk menyimpan data bilangan bulat positif dan

negatif.

6. Float: digunakan untuk menyimpan data bilangan pecahan positif

dan negatif presisi tunggal.

7. Double: digunakan untuk menyimpan data bilangan pecahan positif

dan negatif presisi ganda.

8. Real: merupakan sinonim dari DOUBLE.

9. Decimal: digunakan untuk menyimpan data bilangan pecahan positif

dan negatif.

46
 10.Numeric: merupakan sinonim dari DECIMAL.

- Tipe Date dan Time

Tipe data date dan time digunakan untuk menyimpan data tanggal dan

waktu.

1. Date: digunakan untuk menyimpan data tanggal.

2. Time: digunakan untuk menyimpan data waktu.

3. Date Time: digunakan untuk menyimpan data tanggal dan waktu.

4. Year: digunakan untuk menyimpan data tahun dari tanggal.

- Tipe String (Text)

Tipe data string digunakan untuk menyimpan data string (text).

1. Char: digunakan untuk menyimpan data string ukuran tetap.

2. Varchar: digunakan untuk menyimpan data string ukuran dinamis.

3. Tinytext: digunakan untuk menyimpan data text.

4. Text: digunakan untuk menyimpan data text.

5. Mediumtext: digunakan untuk menyimpan data text.

6. Longtext: digunakan untuk menyimpan data text.

2.8.4. PHP

2.8.4.1. Pengertian PHP

PHP pertama kali ditemukan tahun 1995 oleh seorang Software

Developer bernama Rasmus Lerdrof. PHP (Personal Home Page) atau saat

ini dikenal dengan singkatan Hypertext Preprocessor, hadir sebagai usaha

untuk membuat halaman website lebih dinamis. Hal inilah yang membedakan

PHP dengan HTML. HTML merupakan bahasa statis yang apabila kita ingin

47
mengubah konten/isinya maka yang harus dilakukan pertama kali adalah

membuka file-nya terlebih dahulu, kemudian menambahkan isi ke dalam file

tersebut. [Sianipar,R.H(2015)].

PHP adalah bahasa pemrograman script server-side yang didesain

untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai

bahasa pemrograman umum. PHP dikembangkan pada tahun 1995 oleh

Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group.

PHP disebut bahasa pemrograman server-side karena PHP diproses

pada komputer server. Hal ini berbeda dibandingkan dengan bahasa

pemrograman client-side seperti Javascript yang diproses pada web browser

(client).

Pada awalnya PHP merupakan singkatan dari Personal Home Page.

Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi.

Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa

pemrograman web yang powerful dan tidak hanya digunakan untuk membuat

halaman web sederhana, tetapi juga website populer yang digunakan oleh

jutaan orang seperti wikipedia, wordpress, joomla, dll.

PHP dapat digunakan dengan gratis dan bersifat Open source. PHP

dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU

General Public License (GPL) yang biasa digunakan untuk proyek Open

source.[K. Abdul.(2005).]

Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa

pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya

48
menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS)

ini dikenal dengan website statis, dimana konten dan halaman web bersifat

tetap. Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan

PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung

situasi. Website dinamis juga bisa menyimpan data ke dalam database,

membuat halaman yang berubah-ubah sesuai input dari user, memproses

form, dll.

Untuk pembuatan web, kode PHP biasanya disisipkan ke dalam

dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting

Language atau bahasa pemrograman script. [Fajar Junaedi EP.(2005)]

2.8.4.2. Syntax Pada PHP

Sebuah script PHP selalu dimulai dengan blok. <?php dan diakhiri

dengan ?>. Sebuah PHP scripting blok dapat ditempatkan di manapun dalam

dokumen. Pada server dengan dukungan steno diaktifkan, Anda dapat

memulai blok scripting dengan <? dan diakhiri dengan >?. Sebuah file PHP

biasanya berisi tag HTML, seperti sebuah file HTML, dan beberapa kode

PHP scripting.

Adapun syntax yang harus kita perhatikan dalam php yaitu:

• AND : Record yang dieksekusi operator AND. Akan berjalan jika

kedua persyaratan mempunyai atau bernilai true (dipenuhi)

• OR : Record yang dieksekusi operator OR akan berjalan jika salah satu

persyaratan bernilai true ( tidak harus keduanya)

49
 • OR dan AND

• ORDER BY : Dipakai untuk menurunkan record di database secara

defult record akan diurutkan secara abjad, tetapi bisa juga diurutkan

dari bawah ke atas.

2.8.4.3. Variabel PHP

Dalam pemrograman, variabel adalah suatu lokasi penyimpanan (di

dalam memori komputer) yang berisikan nilai atau informasi yang nilainya

tidak diketahui maupun telah diketahui (wikipedia).

Dalam definisi bebasnya, variabel adalah kode program yang

digunakan untuk menampung nilai tertentu. Nilai yang disimpan di dalam

variabel selanjutnya dapat dipindahkan ke dalam database, atau ditampilkan

kembali ke pengguna. Nilai dari variabel dapat di isi dengan informasi yang

diinginkan dan dapat diubah nilainya pada saat kode program sedang

berjalan. Sebuah variabel memiliki nama yang digunakan untuk mengakses

nilai dari variabel itu. Jika Anda memiliki pengetahuan dasar tentang bahasa

pemograman, tentunya tidak asing dengan istilah variabel.

Sama seperti variabel dalam bahasa pemograman lainnya, variabel

dalam PHP digunakan untuk menampung nilai inputan dari user, atau nilai

yang kita definisikan sendiri. Namun PHP memiliki beberapa aturan tentang

cara penggunaan dan penulisan variabel.

• Penulisan variabel harus diawali dengan tanda $: Variabel di dalam

PHP harus diawali dengan dollar sign atau tanda dollar ($). Setelah

50
 tanda $, sebuah variabel PHP harus diikuti dengan karakter pertama

berupa huruf atau underscore (_), kemudian untuk karakter kedua dan

seterusnya bisa menggunakan huruf, angka atau underscore (_).

Dengan aturan tersebut, variabel di dalam PHP tidak bisa diawali

dengan angka.

• Variabel dalam PHP bersifat case sensitif: PHP membedakan variabel

yang ditulis dengan huruf besar dan kecil (bersifat case sensitif),

sehingga $belajar tidak sama dengan $Belajar dan $BELAJAR,

ketiganya akan dianggap sebagai variabel yang berbeda.

• Cara Memberikan Nilai kepada Variabel: Sama seperti sebagian besar

bahasa pemograman lainnya, untuk memberikan nilai kepada sebuah

variabel, PHP menggunakan tanda sama dengan (=). Operator ‘sama

dengan’ ini dikenal dengan istilah Assignment Operators.

• Variabel dalam PHP tidak memerlukan deklarasi terlebih dahulu: Jika

Anda pernah mempelajari bahasa pemograman desktop seperti Pascal,

C, C++, dan Visual basic, di dalam bahasa pemograman tersebut,

sebuah variabel harus dideklarasikan terlebih dahulu sebelum

digunakan.

• Variabel dalam PHP tidak bertipe: Dalam kelompok bahasa

pemograman, PHP termasuk Loosely Type Language, yaitu jenis

bahasa pemograman yang variabelnya tidak terikat pada sebuah tipe

tertentu. Hal ini berbeda jika dibandingkan dengan bahasa pemograman

desktop seperti Pascal atau C, dimana jika Anda membuat sebuah

51
 variabel bertipe integer, maka variabel itu hanya bisa menampung nilai

angka, dan Anda tidak akan bisa mengisinya dengan huruf.

• Variabel Sistem PHP (Predefined Variables): Predefined Variables

atau terjemahan bebasnya Variabel Sistem PHP, adalah beberapa

variabel yang telah didefenisikan secara sistem oleh PHP, dan kita

sebaiknya tidak membuat variabel dengan nama yang sama.

2.8.4.4. String Pada PHP

Pemrograman PHP merupakan pemrograman yang kaya dengan fungsi

built in (Fungsi Standar). Pada kali ini saya akan membahas tentang fungsi

string dalam PHP. Fungsi string merupakan fungsi yang digunakan untuk

mengolah karakter maupun kata dalam pemrograman php. Secara lebih

spesifik, fungsi string dalam php dibagi dalam beberapa kategori:

• Fungsi strlen() merupakan fungsi bawaan dalam php yang digunakan

untuk mendapatkan nilai panjang / jumlah karakter suatu string,

dimana jumlah karakter yang akan dihitung dalam bentuk string.

• Fungsi strstr() merupakan fungsi yang digunakan untuk mengambil

sebagian string dari suatu posisi sub-string yang dicari. Jika posisi

sub-string ditemukan maka mulai posisi tersebut sampai akhir string

merupakan hasilnya.

• Fungsi stristr() sebenarnya sama dengan strstr() hanya saja pada

fungsi strstr sifatnya case sensitive (huruf kecil dan besar dibedakan)

sedangkan pada fungsi stristr() tidak.

52
 • Fungsi substr() adalah fungsi yang mengambil string berdasarkan

indeks / nomor posisi huruf dalam string sepanjang yang diinginkan.

Indeks dimulai dari nomor 0 untuk posisi paling awal/kiri. Jika

panjang string tidak disertakan, maka panjang akan diambil dari posisi

huruf sampai akhir string.

• Fungsi str_replace() adalah fungsi bawaan dalam php yang memiliki

fungsi untuk mengganti isi sub string lama dengan suatu substring

baru yang lain pada sebuah string.

• Fungsi strtolower() adalah fungsi yang digunakan untuk mengubah

ukurun huruf string menjadi kecil semua. Sedangkan strtoupper

adalah kebalikannya.

• Fungsi trim() adalah fungsi yang digunakan untuk membuang spasi

yang ada pada sebelum (paling kiri) dan sesudah (paling kanan) dari

suatu string. Fungsi ltrim() hanya membuang spasi sebelum (paling

kiri) dari string, sedangkan rtrim() membuang spasi sesudah (paling

kanan) dari string.

• Fungsi ucfirst() adalah fungsi yang digunakan untuk mengubah huruf

pertama kali dari string menjadi huruf besar (kapital).

2.8.4.5. Tipe Data Pada PHP

PHP memiliki 8 tipe data dasar yaitu boolean, integer, float (floating-

point), string, array, object, resource dan NULL. Tipe data ini yang akan

digunakan untuk mendefinisikan variabel. Penulisan untuk mendefinisikan

53
variabel digunakan tanda ($). Biasanya tipe variable pada php tidak

ditentukan oleh programmer, namun ditentukan berdasarkan untuk apa

variable itu digunakan saat program dijalankan. Artinya, ketika

mendefinisikan sebuah variabel, programmer tidak perlu menuliskan tipe

datanya. Berikut tipe data pada PHP:

- Tipe Data Boolean, bernilai true atau false.

- Tipe Data Integer, tipe ini merupakan tipe bilangan bulat.

- Tipe Data Float, tipe ini merupakan tipe bilangan real.

- Tipe Data String, string merupakan kumpulan karakter.

- Tipe Data Array, array adalah sebuah data yang mengandung satu atau

lebih data, dan dapat diindex berdasarkan numerik maupun string.

2.8.4.6. Kelebihan Dan Kekurangan PHP

Adapun kelebihan dan kekurangan PHP :

- Kelebihan PHP

Banyak sekali kelebihan yang dimiliki PHP dibandingkan dengan

bahasa pemrograman yang lain, diantaranya :

• Bisa membuat web menjadi Dinamis.

• PHP bersifat Open source yang berarti dapat digunakan oleh siapa saja

secara gratis.

• Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem

Operasi karena PHP berjalan secara Web Base yag artinya semua

54
 Sistem Operasi bahkan HP yang mempunyai Web Browser dapat

menggunakan program PHP.

• Aplikasi PHP lebih cepat dibandingkan dengan ASP maupun Java.

• Mendukung banyak paket Database seperti MySQL, Oracle,

PostgrSQL, dan lain-lain.

• Bahasa pemrograman PHP tidak memerlukan Kompilasi / Compile

dalam penggunaannya.

• Banyak Web Server yang mendukung PHP seperti Apache, Lighttpd,

IIS dan lain-lain.

• Pengembangan Aplikasi PHP mudah karena banyak Dokumentasi,

Refrensi & Developer yang membantu dalam pengembangannya.

• Banyak bertebaran Aplikasi & Program PHP yang Gratis & Siap pakai

seperti WordPress, PrestaShop, dan lain-lain.

- Kekurangan PHP

Selain kelebihan PHP, PHP juga mempunyai kekurangan. Namun

masalah kekurangannya sangat sedikit. Diantaranya:

• PHP Tidak mengenal Package.

• Jika tidak di encoding, maka kode PHP dabat dibaca semua orang

& untuk meng encodingnya dibutuhkan tool dari Zend yang mahal

sekali biayanya.

• PHP memiliki kelemahan keamanan. Jadi Programmer harus jeli &

berhati-hati dalam melakukan pemrograman & Konfigurasi PHP.

55
2.8.5. Javascript

2.8.5.1. Pengertian Javacript

Javascript adalah sekumpulan perintah khusus yang digunakan untuk

membuat sebuah halaman web yang lebih responsif dan interaktif. Javascript

merupakan bahasa script yang dicantumkan pada sebuah halaman web dan

dijalankan pada penjelajah web (web browser). Javascript terutama terkenal

karena penggunaannya dihalaman web yang memberikan kemampuan

tambahan pada HTML dengan mengizinkan pengeksekusian perintah di sisi

user (penjelajah web), bukan disisi server web. [Sianipar,R.H(20015)]

Javascript bergantung kepada penjelajah web yang memanggil

halaman web yang berisi script-script dari javascript yang terselip di dalam

dokumen HTML. Script Javascript yang dimasukkan di dalam file HTML

harus dimasukkan di antara tag <script> dan </script>. Javascript tidak

memerlukan kompilator atau program khusus untuk menjalankannya karena

Javascript sendiri sudah termasuk di dalam penjelajah web tersebut.

Secara fungsional, javascript digunakan untuk menyediakan akses

script pada objek yang dibenamkan (embedded). Script ini dapat membuka

halaman pop up, melakukan validasi pada form sebelum data dikirimkan ke

server, mengubah kursor ketika melewati objek tertentu, berkomunikasi

dengan server, dan banyak yang lainnya.

Ada beberapa hal yang harus diperhatikan dalam penggunaan

Javascript, diantaranya Javascript bersifat "case sensitive", yang artinya

Javascript membedakan huruf besar dan huruf kecil. Hal ini sama dengan

56
bahasa pemrograman C++ dimana huruf "A" tidak sama dengan huruf "a".

Sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak

boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil

semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf

kecil semua).

Walaupun memiliki nama serupa, Javascript hanya sedikit

berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya

adalah penggunaan sintaks C. Perbedaan mendasar antara keduanya adalah

bahwa pemrograman Java dapat berjalan pada mesin virtual (video game,

tablet) dan penjelajah web (Mozilla Firefox, Opera, Google Chrome, Safari,

Internet Explorer) sedangkan Javascript hanya dapat berjalan pada

penjelajah web saja. Java merupakan bahasa pemrograman berorientasi objek

murni sedangkan Javascript digunakan secara prosedural. Java

dikembangkan oleh Sun Microsistem sedangkan Javascript dikembangkan

oleh Netscape Inc.

2.8.5.2. Tipe Data Javascript

Tidak seperti bahasa pemrograman lainnya, javascript tidak memiliki

tipe data secara explisit. Hal ini dapat dilihat dari beberapa contoh variabel di

atas. Anda mendeklarasikan variabel tapi tidak menentukan tipenya.

Meskipun javascript tidak memiliki tipe data secara explisit. javascript

mempunyai tipe data implisit. Terdapat empat macam tipe data implisit yang

dimiliki oleh javascript yaitu:

57
 - Tipe Numerik : Pada dasarnya javascript hanya mengenal dua macam

tipe numerik, yaitu bilangan bulat (integer) dan bilangan

pecahan(real/float).Untuk bilangan bulat, kita dapat merepresentasikan

dengan basis desimal, oktal atau heksadesimal.

- Tipe String : Untuk mendeklarasikan tipe string dapat dilakukan

dengan cara menuliskan string diantara tanda petik tunggal (’) atau

tanda petik ganda (”)

- Tipe Boolean : Tipe boolean hanya mempunyai nilai True atau False.

Tipe ini biasanya digunakan untuk mengecek suatu kondisi atau

keadaan.

- Tipe Null : Tipe Null digunakan untuk merepresentasikan variabel

yang tidak diberi nilai awal (inisialisasi).

2.8.5.3. Variabel Javascript

Dalam bahasa pemograman, variabel adalah ‘penampung’ sebuah nilai.

Tergantung dengan ‘nilai’ dari variabel tersebut, sebuah variabel di dalam

javascript dapat bertipe Angka (Number), String, Boolean, atau yang lainnya.

Tidak seperti bahasa pemograman desktop seperti C++ dan Visual

basic, di dalam javascript kita tidak perlu mendeklarasikan jenis tipe data.

Seluruh variabel di dalam javascript dapat berisi nilai apapun (tipe data

apapun), dan dapat diubah menjadi tipe lain sepanjang program. Jenis

pemograman seperti ini dikenal juga dengan Typless Programming

Language.

58
 Salah satu bahasa pemograman yang juga berjenis Typless

Programming Language adalah PHP. Aturan penamaan variabel program

javascript yakni sama dengan aturan pembuatan identifier:

- Karakter pertama harus diawali dengan huruf, underscore (_) atau tanda

dollar ($)

- Karakter kedua dan seterusnya bisa ditambahkan dengan huruf, angka,

underscore (_) atau tanda dollar ($).

Walaupun kita tidak perlu menyebutkan jenis tipe data dari suatu

variabel, namun kita tetap harus mendeklarasikan variabel di dalam

javascript. Cara membuat variabel di dalam javascript di bedakan menjadi

dua, yakni dengan menggunakan keyword var, dan tanpa var.

Pembuatan variabel tanpa menggunakan keyword var memang lebih

cepat, akan tetapi tidak disarankan. Walaupun variabel yang dideklarasikan

tanpa keyword var akan tetap berfungsi sebagaimana mestinya seperti

variabel dengan var, namun javascript ‘menyimpan’ variabel tersebut dengan

cara yang berbeda. Salah satu perbedaannya adalah tentang variabel scope

(yang akan kita bahas setelah ini). Sedapat mungkin kita selalu membuat

variabel menggunakan keyword var.

2.8.5.4. Jenis – Jenis Operator Pada Javascript

Operator adalah karakter khusus yang berupa simbol atau tanda yang

digunakan untuk mengoprasikan (memproses) dua operand atau lebih untuk

59
mendapatkan hasil. Sama seperti pada bahasa pemograman lain ada tiga jenis

operator pada javascript yaitu aritmetika, assigment dan pembanding.

- Operator Aritmetika digunakan untuk menghitung operasi

matematika, seperti matematika operator aritmetika pada javascript

terdapat penjumlahan, pengurangan, pembagian, Dll. Lihat tabel di

bawah:

Tabel 2.3. Tabel aritmatika javascript

- Operator Assigment di gunakan untuk memberi nilai pada suatu

varibel dengan tanda sama dengan ( = ), penulisan operator assigment

memudahkan kita mempersingkat script contoh :

Tabel 2.4. Tabel operator assigment

60
 - Operator Pembanding pembanding digunakan untuk

membandingkan suatu nilai variabel.

Tabel 2.5. Tabel operator pembanding

- Operator Logika

Tabel 2.6. Tabel operator logika

2.8.6. Xampp

Menurut Yogajiwanjaya (2014), XAMPP adalah software web server

apache yang di dalamnya tertanam server MySQL yang didukung dengan

bahasa pemrograman PHP untuk membuat website yang dinamis. XAMPP

sendiri mendukung dua sistem operasi yaitu windows dan Linux.

61
 Untuk linux dalam proses penginstalannya menggunakan command line

sedangkan untuk windows dalam proses penginstalannya menggunakan

interface grafis sehingga lebih mudah dalam penggunaaan XAMPP di Windows

di banding dengan linux.

Adapun fungsi XAMPP menurut Yogajiwanjaya ialah sebagai aplikasi

untuk membangun aplikasi website dinamis di localhost atau yang belum

terkoneksi dengan internet. Selain itu, XAMPP terdiri atas program Apache

HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan

bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari

X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini

tersedia dalam GNU General Public License dan bebas, merupakan web server

yang mudah digunakan yang dapat melayani tampilan halaman web yang

dinamis. [Yogajiwanjaya.(2014)]

62
 BAB III

METODOLOGI PENELITIAN

3.1. Tahap Penelitian

Untuk menghasilkan hasil penelitian yang sesuai dengan tujuan penelitian,

perlu dilakukan perencanaan dengan baik melalui tahapan penelitian. Adapun

tahapan pada penelitian ini sebagaimana ditunjukkan pada gambar berikut:

Mulai

Studi Literatur

Perancangan Aplikasi

Desain Penelitian

Pengumpulan Data

Pembuatan Aplikasi

Pengujian Sistem

Pembuat Laporan

Selesai

Gambar 3.1. Diagram Alur Penelitian

63
Tahapan secara garis besar dijelaskan sebagai berikut :

a. Studi literatur dan analisa penelitian terkait metode pembuatan website

virtual tour Fakultas Teknik Universitas Hasanuddin. Pada studi literatur

dilakukan pencarian penelitian dan referensi terkait tentang pembuatan

gambar dan aplikasi virtual tour serupa.

b. Dalam penelitian ini metode yang digunakan adalah Multimedia

Development Life Cycle (MDLC), dimana metode ini memiliki 6 tahapan

yaitu concept, design, material collecting, assembly, testing dan

distribution.

c. Perancangan website virtual tour Fakultas Teknik Universitas Hasanuddin

adalah merupakan inti dari penelitian secara keseluruhan. Tahapan-

tahapan dalam perancangan website virtual tour Fakultas Teknik

Universitas Hasanuddin disesuaikan dengan literatur yang ada dengan

beberapa penyesuaian-penyesuaian sesuai rancangan usulan.

d. Pengumpulan data adalah proses dimana data-data yang berkaitan dengan

pembuatan gambar panorama untuk website virtual tour Fakultas Teknik

dan Kampus Tamalanrea Universitas Hasanuddin.

e. Pembuatan program / coding sebagai bentuk implementasi website virtual

tour Fakultas Teknik Universitas Hasanuddin secara komputerisasi.

Dalam tahap ini, coding akan dilakukan dengan menggunakan bahasa

pemrograman Javascript didukung dengan bahasa pemrograman lainnya

seperti HTML, PHP, CSS sebagai bahasa pemrograman untuk pembuatan

aplikasi berbasis web

64
 f. Pengujian sistem sebagai evaluasi dari implementasi program apakah

perangkat lunak yang dihasilkan sesuai dengan rancangan dengan bantuan

responden, diperlukan untuk mengecek kesesuaian program dengan

rancangan website virtual tour Fakultas Teknik Universitas Hasanuddin.

g. Pembuatan laporan. Setelah melewati semua tahapan, proses akhir adalah

menuliskan laporan penelitian menyeluruh sebagai bahan publikasi dan

penyusunan naskah tugas akhir.

Pembuatan website virtual tour berbasis gambar panorama 360 dibuat dalam

model flowchart seperti pada gambar 3.2 yang menggambarkan proses dan

tahapan-tahapan yang akan dilaksanakan.

Gambar 3.2. Flowchart pembuatan virtual tour.

65
3.2. Konsep (Concept)

Tahap konsep adalah tahapan awal dalam perancangan menggunakan Metode

MDLC. Dalam tahapan ini ada beberapa tahap yang diperhatikan yaitu :

• Menentukan waktu pengambilan gambar.

• Menentukan lokasi pengambilan gambar.

• Menentukan kebutuhan pembuatan gambar panorama

3.2.1. Waktu

Dalam pembuatan gambar panorama yang dilakukan di wilayah Kampus

Fakultas Teknik dan Kampus Tamalanrea, aktifitas kampus dilakukan pada pagi

hari hingga sore hari, maka gambar panorama yang akan dibuat dengan

menampilkan kondisi saat pagi, siang, atau sore hari adalah kondisi yang paling

ideal untuk lokasi tersebut.

3.2.2. Lokasi

Lokasi pengambilan gambar panorama adalah masing-masing gedung

Kampus Fakultas Teknik yang sudah jadi, tampak depan fakultas, dan gedung

Kampus Tamalanrea Universitas Hasanuddin, Makassar. Dari hasil survei

lapangan, adapun lokasi/titik yang akan diambil di wilayah Kampus Fakultas

Teknik dan Kampus Tamalanrea yang dapat dilihat pada tabel di bawah ini.

Terdapat 19 titik/lokasi yang akan diambil pada wilayah Kampus Fakultas

Teknik dan 30 lokasi pada wilayah Kampus Tamalanrea Universitas

Hasanuddin.

66
 No Fakultas Teknik Kampus Tamalanrea
1 Main Bridge Masjid Kampus
2 CSA Library UPT KKN
3 CSA Theater Library Pusat Kegiatan Mahasiswa
4 CSA Computer Lab. LP2M
5 CSA Show Case Gedung Rektorat
6 COT Main Fakultas MIPA
7 COT Base Fakultas Farmasi
8 COT Meeting Room Fakultas Pertanian
9 COT Dean Hall Fakultas Kedokteran
10 JK Signature Fakultas Kedokteran Gigi
11 Outdoor Theater Fakultas Hukum
12 Rusunawa Fakultas Teknik Fakultas Ilmu Budaya
13 Classroom Building Fakultas Ekonomi
14 Classroom Fakultas Ilmu Sosial & Ilmu Politik
15 Architecture Building Fakultas Peternakan
16 Architecture Studio Fakultas Ilmu Kelautan dan Perikanan
17 Civil Building Fakultas Kehutanan
18 Civil Material and Struct. Lab. Fakultas Kesehatan Masyarakat
19 Navigasi Auditorium Prof. Amiruddin
20 Pasca Sarjana
21 Baruga
22 Bundaran Unhas
23 Perpustakaan Depan
24 Perpustakaan 1
25 Perpustakaan 2
26 Perpustakaan 3
27 PTIK
28 Pusat Kegiatan Penelitian
29 Pusat Bahasa
30 Wisma Unhas

Tabel 3.1. Daftar lokasi gambar panorama

3.2.3. Analisis Kebutuhan Gambar Panorama 360

Komponen yang dibutuhkan untuk mengimplementasikan rancangan

simulasi sebagai berikut:

• Hardware atau perangkat keras yang dibutuhkan untuk menggabungkan

yang telah dibuat adalah PC/Laptop sedangkan perangkat keras yang

digunakan untuk mengumpulkan data adalah

67
 ➢ Kamera DSLR, yaitu kamera merek Canon tipe EOS 60D dengan

Ukuran sensor APS-C (23 mm x 15 mm).

➢ Lensa, dimana user menggunakan lensa ultra wide Canon tipe EF-S

dengan focal length 10 mm,

➢ Panoramic Gimbal head

➢ Tripod, merek tripod yang digunakan adalah merek Yunteng

profesional.

Dari peralatan yang ada maka untuk membuat gambar panorama dapat

dihitung menggunakan kalkulator sudut pandang dari digitalfotografie.com

untuk membuat gambar panorama.

Gambar 3.3. Hasil dari kalkulator sudut pandang untuk mengetehui sudut

pandang

Hasil perhitugan ini dari kalkulator ini menyebutkan bahwa dari peralatan

yang ada, bahwa lebar sudut pengambilan gambar yang baik (dengan

menghitung proses overlapping) adalah 69,74 derajat untuk vertical dan 49,94

68
derajat untuk horisontal. Pengambilan gambar akan dilakukan secara horisontal

maka dibutuhkan minimal pengambilan 8 gambar keliling, 4 gambar menghadap

45 derajat kebawah dan 4 gambar menghadap 45 derajat ke atas, sehingga total

dibutuhkan minimal 16 gambar untuk membuat satu gambar dengan sudut

pandang 360 derajat.

• Software atau perangkat lunak yang dibutuhkan untuk

mengimplementasikan rancangan yang telah dibuat adalah sistem operasi

Windows dan aplikasi pengolah data seperti :

➢ Adobe Photoshop versi Creative Cloud 2017 yang merupakan versi

terbaru saat ini.

➢ Panoweaver versi 9.0

3.2.4. Analisis Kebutuhan Sistem

Komponen yang dibutuhkan untuk mengimplementasikan rancangan

simulasi sebagai berikut :

• Hardware atau perangkat keras yang dibutuhkan untuk

mengimplementasikan rancangan yang telah dibuat adalah laptop / PC.

Penulis menggunakan laptop Acer V3-471G dengan spesifikasi prosesor

Intel Core i5-3210 dan RAM 8 Gb.

• Software atau perangkat lunak yang dibutuhkan untuk

mengimplementasikan rancangan yang telah dibuat sistem operasi

Windows 10 Pro, Xampp versi 3.2.2, dan aplikasi browser Google

Chrome, Mozila Firefox dan Safari, serta code editor Sublime build 3160.

69
3.3. Tahap Perancangan Desain

Pada tahapan ini dibuat spesifikasi website secara rinci dalam perancangan

sebuah website. Pembuatan desain rancangan aplikasi bagi menjadi dua yaitu :

3.3.1. Design Prosedural

Perancangan desain aplikasi virtual tour tidak luput menggunakan desain

prosedural untuk menentukan urutan atau alur dalam mengakses setiap setiap

fungsi yang ada dalam aplikasi ini.

3.3.1.1. Flowchart Website Virtual tour

a) Flowchart akses website virtual tour

Gambar 3.4. Flowchart Akses Internet

Pengguna dalam mengakses virtual tour Kampus Fakultas Teknik

Universitas Hasanuddin dapat diketahui pada flowchart pada gambar 3.4.

70
Dengan adanya flowchart, menjadi rangkaian mekanisme untuk

menggunakan website virtual tour Fakultas Teknik Universitas Hasanuddin.

b) Flowchart gambar panorama website virtual tour

Flowchart yang digunakan mengakses gambar di website halaman

virtual tour dijelaskan pada flowchart pada gambar 3.5. Gambar panorama

pada halaman tour telah bergabung dengan aplikasi website.

Gambar 3.5. Flowchart gambar panorama saat ditampilan virtual tour.

c) Flowchart lokasi virtual tour

Flowchart lokasi virtual tour pada gambar 3.6 dipakai saat pengguna

mengakses website virtual tour lalu mengakses salah satu lokasi di halaman

71
virtual tour. Lokasi yang berdekatan salah satu contohnya pada jembatan

utama Fakultas Teknik dengan gedung Center of Technology, begitu dengan

gedung Center of Technology berdekatan dengan gedung perpustakaan.

Gambar 3.6. Flowchart pilih lokasi pada virtual tour

d) Flowchart Show in Panorama aplikasi peta kampus

Flowchart ini membahas tentang penambahan fitur aplikasi peta

kampus Universitas Hasanuddin. Fitur yang dimaksud adalah ketika user

mengakses halaman peta kampus dan memilih salah satu lokasi pada peta,

maka pada sidebar deskripsi ditambahkan tombol yang berfungsi

72
menghubungkan kemudian menampilkan gambar panorama sesuai dengan

lokasi yang dipilih user. Alur proses fitur ini dapat dilihat flowchart pada

gambar 3.7.

Gambar 3.7. Fitur Tampilkan dalam 360 aplikasi peta kampus Unhas

e) Flowchart admin website virtual tour

Pada gambar menunjukkan alur aktifitas yang terjadi pada admin

website virtual tour Fakultas Teknik Universitas Hasanuddin. Admin

memiliki akses untuk mengubah data-data yang ada di website virtual tour

seperti mengubah data disetiap scene dan mengubah serta membuat data

hotspot baru jika diperlukan.

73
 Gambar 3.8. Flowchart admin virtual tour

3.3.1.2. Activity Diagram

a) Activity Diagram User

berfungsi menampilkan aktifitas yang terjadi ketika user mengakses

halaman website dan bagaimana sistem merespon permintaan user. Aktifitas

74
user dan sistem ditampilkan dalam bentuk diagram, lebih jelas dapat dilihat

pada gambar 3.9.

Gambar 3.9. Activity diagram user

b) Activity Diagram Admin

berfungsi menampilkan aktifitas yang terjadi ketika user

mengakses halaman website dan bagaimana sistem merespon permintaan

75
user. Aktifitas admin dan sistem ditampilkan dalam bentuk diagram, lebih

jelas dapat dilihat pada gambar 3.10.

Gambar 3.10. Activity diagram admin

3.3.1.3. Usecase Diagram

Gambar usecase di bawah menampilan perbedaan batasan penggunaan

antara user dan admin. Terlihat jelas bahwa admin memiliki banyak

wewenang dalam melakukan kegiatan di website virtual tour.

76
 Gambar 3.11. Usecase diagram website virtual tour

3.3.2. Design Interface

Perancangan website virtual tour membutuhkan rancangan muka untuk

user interface tampilan website yang akan dibuat. Perancangan dilakukan

dengan membuat ilustrasi atau yang biasa disebut dengan mockup. Mockup

mempermudah perancang untuk mengetahui seperti apa model tampilan yang

akan dibuat, sehingga elemen-elemen pada website dapat diketahui secara

rinci dan jelas.

3.3.2.1. Desain Interface Sidebar Lokasi

Untuk mempermudah user memilih lokasi saat mengakses website

virtual tour, diperlukan navigasi yang menampilkan daftar lokasi sehingga

user dapat langsung menuju ke lokasi yang diinginkan tanpa harus melalui

77
hotspot. Hal ini juga dapat membantu user untuk menghemat waktu saat

melakukan tour.

Gambar 3.12. Desain interface virtual tour dengan daftar lokasi

3.3.2.2. Desain Interface Hotspot

Seperti halnya dengan tour didunia nyata, dimana user dapat berpindah

dari lokasi yang satu ke lokasi selanjutnnya, maka virtual tour juga harus

membuat user merasakan pengalaman tour yang mirip dengan dunia nyata,

namun keterbatasa sebuah virtual tour yang berbasis gambar panorama maka

diperlukan fitur yang disebut dengan hotspot. Fitur hotspot inilah yang kelak

berfungsi mengganti lokasi pada virtual tour yang seolah menuju ke lokasi

yang ingin dituju user saat mengakses website virtual tour.

78
 Gambar 3.13. Virtual tour dengan fitur hotspot

3.3.2.3. Desain Interface Show in Panorama Aplikasi Peta Kampus

Salah satu contoh aplikasi yang sangat berguna dalam memberikan

informasi mengenai wilayah kampus adalah Aplikasi peta Kampus

Universitas. Aplikasi ini menampilkan informasi berupa peta wilayah kampus

yang dilengkapi dengan berbagai fitur seperti deskripsi fakultas, sejarah

fakultas bahkan dengan bantuan petunjuk jalan untuk user. Namun Aplikasi

ini masih fiturnya masih dapat dimaksimalkan dengan memberikan gambar

panorama 360 agar selain mengetahui titik lokasi, user juga dapat melihat

keadaan sekitar dengan tambahan fitur tersebut. Fitur ini nantinya akan

diletakkan pada sidebar deskripsi yang muncul saat memilih lokasi pada

aplikasi Peta Kampus Universitas Hasanuddin. Untuk lebih jelasnya dapat

dilihat pada gambar 3.14.

79
 Gambar 3.14. Fitur Tampilkan dalam gambar panorama 360

3.3.2.4. Desain Interface Admin login

Perancangan website virtuar tour kampus Fakultas Teknik Universitas

Hasanuddin dibuat dengan model yang dinamis, berbeda dengan virtual tour

pada umumnya yang bermodel statis sehingga disediakan halaman admin

untuk mempermudah pengubahan data/konten website virtual tour. Seperti

halaman admin pada umumnya, pada gambar 3.15. menunjukkan flowchart

admin website virtual tour harus disediakan halaman login yang untuk admin

yang dilengkapi dengan keamanan berupa akses terbatas, hanya admin yang

memiliki username dan password saja yang boleh mengakses halaman admin.

Perancangan desain tampilan halaman login admin website virtual tour

Fakultas Teknik Universitas Hasanuddin dapat dilihat pada gambar di bawah

ini.

80
 Gambar 3.15. Desain tampilan login admin

3.3.2.5. Desain Interface Dasboard Admin

Perancangan halaman dashboard admin website virtual tour harus

dibuat sesuai dengan pembahasan flowchart dan usecase untuk admin,

berkaitan dengan hal-hal apa saja yang ditampilkan dashboard admin virtual

tour.

Gambar 3.16. Rancangan desain tampilan dashboard admin

81
 Aplikasi website virtual tour pada umumnya memilik dua elemen

utama yaitu scene dan hotspot. Untuk lebih jelasnya mengenail perancangan

desain tampilan dashoard admin dapat dilihat pada gambar 3.16.

3.4. Pengumpulan Data (Material Collecting)

Material collecting adalah tahapan pengumpulan materi/bahan, yang dalam

hal ini pembuatan website virtual tour Fakultas Teknik Universitas Hasanuddin

menggunakan gambar sebagai materi utamanya. Gambar diambil dari beberapa

lokasi yang ini dimasukkan kedalam website virtual tour. Adapun pertimbangan

mengenai lokasi yang akan dimasukkan kedalam virtual tour, perlu memperhatikan

kapasitas server karena mengingat ukuran data gambar panorama tiap gambar yang

sangat besar maka pertimbangannya yaitu berupa lokasi yang ingin dimasukkan

kedalam virtual haruslah gedung/lingkungan/tempat yang penting atau yang

memiliki nilai informasi untuk user.

3.4.1. Menentukan Titik Pengambilan Gambar

Sebelum pengambilan gambar panorama, hal pertama yang harus

dilakukan adalah menentukan titik pengambilan gambar. Penentuan ini

mempengaruhi sudut pandang gambar panorama yang akan dibuat. Penentuan

titik pengambilan untuk gambar panorama dapat dipengaruhi oleh beberapa

faktor seperti :

- lokasinya harus memiliki nilai informasi dari semua sudut, seperti

tampak depan, samping, dan belakang. Gambar sebisa mungkin di ambil

82
 dari titik tengah lokasi, contoh kasusnya adalah suatu ruangan, maka titik

pengambilannya adalah ditengah ruangan tersebut.

- Tersedia titik untuk membuat hotspot. Idealnya sebuah virtual tour

adalah kumpulan gambar panorama yang terhubung ke gambar

panorama lainnya, maka harus ada titik yang kelak akan digunakan

untuk memasang hotspot.

Gambar 3.17. Ilustrasi penentuan titik pengambilan gambar panorama

berdasarkan hotspot

Pada gambar 3.17 dapat dilihat contoh kasus alasan pengambilan gambar

“Main Bridge” pada titik merah tersebut adalah lokasinya yang dapat mengakses

banyak lokasi disekitarnya seperti Gedung Center of Technology, CSA Library,

83
JK Signature, dan beberapa lokasi lainnya. Pertimbangan tersebut mendasari

titik pengambilan gambar pada lokasi lainnya.

3.4.2. Pengambilan Gambar

Pengambilan gambar dilakukan di lokasi yang ingin dimasukkan kedalam

website virtual tour dengan menggunakan perangkat yang telah disiapkan.

Perangkat yang terdiri dari kamera, lensa, panoramic head, dan tripod dirangkai

untuk pengambilan gambar 360 derajat. Pada gambar 3.18. menampilkan

bagaimana rangkaian peralatan tersebut.

Gambar 3.18. Rangkaian Peralatan untuk pengambilan gambar panorama

Contoh pengambilan gambar berlokasi pada Rusunawa Kampus Fakultas

Teknik Univesitas Hasanuddin. Pengambilan dimulai dengan mengambil

84
 sekelilingnya berputar searah maupun melawan arah dari jarum jam dari lokasi

tersebut. Gambar yang berhasil diambil yaitu sebanyak 22 gambar dengan

- 12 foto secara horisontal ,

- Sudut 45 derajat ketas sebanyak 4 gambar,

- Sudut 45 derajat kebawah sebanyak 4 gambar,

- 1 gambar 90 derajat menghadap ke atas untuk langit, dan

- 1 gambar 90 derajat menghadap ke bawah untuk tanah/dataran

Dengan menggunakan peralatan yang penulis gunakan sebenarnya cukup

mengambil 8-10 gambar horisontal, namun jumlah foto tersebut

mempertimbangkan banyaknya garis yang pada lokasi tersebut, objek (seperti

manusia atau kendaraan) yang bergerak sehingga jumlah foto yang diambil

menjadi 12 gambar. Hal ini pula yang mempengaruhi jumlah gambar pada lokasi

lainnya. Pada gambar 3.19 menampilkan hasil gambar yang diambil untuk

pembuatan gambar panorama 360 untuk lokasi Rusunawa Fakultas Teknik

Unhas.

Gambar 3.19. Hasil pengambilan gambar untuk panorama 360 yang berlokasi di

Rusunawa Fakultas Teknik Unhas

85
3.5. Assembly

Tahap assembly (pembuatan) adalah tahap dimana semua objek atau bahan

multimedia yaitu gambar panorama yang telah diambil untuk virtual tour dibuat.

Gambar - gambar yang telah diambil lalu di-stitch menggunakan software bantu

seperti Panoweaver dan Adobe Photoshop. Setelah kumpulan gambar tiap lokasi

telah menjadi gambar panorama 360 yang sesuai dengan kebutuhan suatu website

virtual tour, maka berlanjut ke pembuatan website virtual tour untuk Fakultas

Teknik Universitas Hasanuddin. Pembuatan website didasarkan pada flowchart,

activity diagram, dan use case diagram. Semua objek atau material dibuat dan

digabungkan menjadi satu website yang utuh. Dalam tahapan ini digunakan

beberapa perangkat lunak seperti Xampp, dan aplikasi browser serta code editor.

3.5.1. Stitching

Stitching adalah proses penyatuan gambar-gambar yang telah diambil

kemudian diubah menjadi gambar panorama 360 derajat. Proses stitching ini

dilakukan menggunakan perangkat lunak bantu yaitu Panoweaver versi 9.0 yang

paling terbaru untuk pengolahan gambar berukuran lebih dari 15 megapiksel.

Proses Stitching menggabungkan gambar seperti terjahit sesuai dengan titik

yang sama dengan pada gambar berikutnya. Dapat dilihat pada gambar 3.20.

Tipe gambar panorama yang akan dibuat adalah cube panorama. Cube

panorama adalah gambar panorama yang membentuk pola seperti kubus, terdiri

dari 6 gambar kotak yang mengibaratkan sisi-sisi pada kubus. Kelebihan dari

panorama jenis yaitu lebih mudah untuk melakukan perbaikan gambar (editing)

86
terutama untuk gambar bagian sisi bawah. Hasil stitching pada aplikasi

panoweaver dapat dilihat pada gambar 3.21.

Gambar 3.20. Proses stitching gambar panorama menggunakan aplikasi

Panoweaver versi 9.0

Gambar 3.21. Hasil Stitching gambar panorama Rusunawa pada aplikasi

Panoweaver 9.0

87
 Setelah proses stiching berhasil maka gambar panorama di export ke

manjadi format ekstensi foto yang didukung oleh semua perangkat lunak

pengolah gambar yaitu Join Photographic Group (.jpg)

Gambar 3.22. Output gambar panorama dalam tipe cube panorama

Pada gambar 3.22 bisa dilihat jejak tripod kamera yang akan dihilangkan

dan ditambal menggunakan software pengolah gambar Photoshop.

3.5.2. Photo Editing

Seperti diketahui gambar yang telah di-stitching masih meninggalkan jejak

tripod, maka bagian tersebut mesti dihilangkan dan ditambal sesuai dengan

permukaan tripod berdiri. Editing atau perbaikan adalah proses yang mesti

dilakukan untuk menyelesaikan permasalah tersebut menggunakan software

pengolah gambar. Software pengolah gambar yang digunakan adalah software

Adobe Photoshop versi Creative Cloud 2017 (CC). Alasan penggunaan Adobe

Photoshop adalah perangkat lunak jenis ini dilengkapi dengan berbagai tool

canggih yang dapat melakukan pengolahan gambar dari berbagai kebutuhan.

88
 Gambar 3.23. Gambar panorama saat dibuka di Adobe Photoshop

Gambar 3.24. Tampilan detail bagian gambar panorama yang akan diedit

Gambar panorama yang diedit menggunakan Clone Stamp Tool dan

Healing Brush Tool pada Adobe Photoshop berguna untuk memperbaiki

kesalahan dan menghilangkan/mengganti spot pada gambar.

89
 Gambar 3.25. Proses editing gambar panorama menggunakan tools

Pengeditan gambar panorama dikerjakan dengan ketelitian untuk

menghasilkan gambar yang nyata seperti kondisi tanah/dataran sekitar lokasi

tersebut. Pengerjaan untuk mengedit satu foto membutuhkan waktu sekitar 6

hingga 12 jam pengerjaan untuk hasil terbaik.

Gambar 3.26. Hasil editing pada gambar panorama 360 untuk lokasi Rusunawa

Sebelum Edit

90
 Sesudah Edit

Gambar 3.27. Perbandingan gambar sebelum dan sesudah editing

menggunakan aplikasi Adobe Photoshop CC

3.5.3. Konversi ke Spherical Panorama

Gambar panorama yang kita kelola saat ini diketahui berjenis cube

panorama. Panorama jenis ini bukanlah jenis panorama yang didukung oleh

Plugin Javascript Pannellum yang akan digunakan untuk pembuatan website

virtual tour Kampus Fakultas Teknik, maka solusinya adalah dengan mengubah

jenis panorama tersebut menjadi jenis panorama yang mendukung yaitu

Spherical Panorama. Software Panoweaver 9.0 dapat mengubah cube

panorama ke spherical maupun sebaliknya.

Pembuatan gambar panorama saat proses stitching dapat langsung diubah

ke jenis spherical panorama namun kekurangan gambar panorama jenis ini

adalah sulitnya menambal bagian bawah panorama karena mengubah gambar

jadi cekung pada garis pola permukaan seperti yang anda lihat pada gambar 3.29.

sehingga sulit untuk melakukan proses editing, berbeda dengan jenis cube

panorama yang menampil sesuai dengan garis pola sebenarnya.

91
Gambar 3.28. Proses konversi cube panorama ke jenis spherical panorama

dengan software Panoweaver 9.0

Pada gambar 3.30 adalah jenis panorama untuk lokasi Rusunawa Kampus

Fakultas Teknik Universitas Hasanuddin dalam bentuk spherical panorama.

Gambar 3.29. Hasil proses konversi gambar dari jenis cube panorama ke

spherical panorama

92
 Gambar 3.30. Hasil gambar panorana Rusunawa dalam bentuk Spherical

Panorama

3.5.4. Kompresi Gambar

Gambar panorama yang dibuat dari beberapa gabungan foto, contohnya

lokasi Rusunawa Fakultas Teknik Unhas yang diambil dengan 22 gambar yang

masing-masing berukuran 18 megapixel yang artinya gambar panorama yang

dihasilkan sangat besar, maka gambar panorama tersebut perlu dikompresi agar

menghemat ruang di-server dan mempercepat proses memuat gambar saat

terpasang pada aplikasi virtual tour.

Kompresi gambar ini dilakukan menggunakan Adobe Photoshop dengan

menurunkan resolusi gambarnya dan tapi tetap menggunakan kerapatan piksel

yang tinggi sebanyak 300 ppi. Alasan menggunakan Adobe Photoshop untuk

kompresi gambar panorama adalah karena optimasi kualitas gambar selalu

dilakukan secara default saat gambar disimpan.

93
Gambar 3.31. Ukuran awal gambar panorama Rusunawa sebelum dikompresi.

Output gambar panorama yang dihasilkan perangkat lunak panoweaver

masih terlalu besar bagi server jika mempertimbangkan kenyamanan pengguna

ketika mengakses virtual tour. Gambar Panorama yang dihasilkan berukuran

6434 x 3217 pixel dengan memori sebesar 21,5 megabyte.

Gambar panorama akan dikompresi ke ukuran 5000 x 2500 piksel karena

ukuran tersebut adalah ukuran paling ideal untuk tetap menghasilkan gambar

tajam untuk website virtual tour.

Gambar 3.31. Ukuran gambar panorama yang akan dikompresi.

94
 Setelah kompresi, ukuran data gambar kini 1,91 megabyte yang artinya

sepuluh kali lebih kecil dan tidak memberatkan server dan loading saat diakses

di website.

Ukuran gambar yang dikompresi mungkin berbeda-beda setiap gambarnya

karena faktor data yang terdapat pada gambar berbeda-beda juga seperti jumlah

warna tidak sama setiap gambarnya, warna putih dan hitam tidak memakan

banyak memori dibandingkan dengan warna merah, biru, dan hijau.

Gambar 3.32. Perbandingan ukuran gambar sebelum dan sesudah dikompresi

3.5.5. Coding

Virtual tour Kampus Fakultas Teknik Unhas akan dibuat dalam bentuk

website. Pembuatan website diperlukan proses koding dalam pembuatannya,

menggunakan bahasa pemrograman yang mendukung pembuatan website yaitu

95
HTML, CSS, Javascript, PHP dan SQL. Koding akan mengubah gambar

panorama yang awalnya dua dimensi menjadi tiga dimensi menggunakan plugin

javascript dari Pannellum.js.

Gambar. 3.34. Potongan kode plugin Pannellum yang berfungsi mengubah

gambar panorama 2D menjadi bentuk 3D

Pada tabel potongan kode di atas, plugin javascript dan css Pannellum

harus diload terlebih dahulu. Sebuah gambar panorama pada virtual tour disebut

dengan “scene”. Fungsi scene tersebut berisi informasi yang mengatur informasi

dan data yang berkaitan dengan lokasi tersebut. Pada plugin Pannellum, setiap

fungsi scene berisi data untuk setiap lokasinya seperti :

- Jenis data; diisi dengan “scene” yang artinya ingin membuat suatu scene,

96
- Scene id adalah identitas scene yang hanya akan dibaca oleh database

tetapi tidak tampil pada website virtual tour. Scene ID merupakan elemen

penting sebab menjadi index tiap lokasi, sehingga scene id berbeda judul

scene walaupun bisa terdapat kesamaan penulisan,

- Title adalah judul atau nama lokasi pada gambar panorama

- HFOV; merupakan singkatan dari Horizontal Field of View yang berarti

ruang pandang. Ruang Pandang memiliki pengaruh terhadap luas pandang

yangn akan tampil pada website virtual tour. Informasi yang tersimpan

pada data hfov memiliki nilai dari 0 hingga 360 atau 0 ke -360 dalam

satuan derajat.

- Yaw; adalah nilai awal yaw ketika gambar panorama 360. Penjelasan

sederhananya nilai yaw adalah sumbu x dan gerakan yaw sama seperti saat

manusia menggelengkan kepala kekanan atau kekiri.

- Pitch; adalah nilai awal sumbu pitch ketika gambar panorama 360

ditampilkan. Penjelas sederhananya adalah nilai sumbu y sama seperti saat

manusia mengangguk keatas atau kebawah.

- Type; adalah jenis gambar panorama 360 atau biasa disebut model gambar

panorama. Model gambar panorama yang saat ini ada dunia yaitu

equirectangular/spherical, cube, cylinder, dan little planet. Namun jenis

panorama yang paling umum digunakan adalah equirectangular atau

spherical.

- Panorama; adalah lokasi penyimpanan gambar panorama di direktori atau

server.

97
 Sebuah gambar panorama pada virtual tour umumnya memiliki hotspot.

Hotspot adalah sebuah tombol yang berada dikoordinat tertentu pada gambar

panoroma dan memiliki fungsi sebagai penghubung dengan gambar panorama

lainnya. Pannelum.js sudah didukung menambahkan hotspot pada gambar

panorama sehingga tidak membutuhkan pluggin tambahan.

Gambar 3.35. Potongan kode Pannelum yang disertai fungsi tombol hotspot.

Fungsi hotspot ditambahkan di bawah fungsi gambar panorama yang ingin

ditambahkan hotspot. Fungsi hotspot juga memiliki data yang mirip dengan

98
fungsi panorama seperti yaw dan pitch namun data tersebut memiliki tugas yang

berbeda.

Data yang terdapat pada fungsi hotspot yaitu hotspot, pitch, yaw, type

hotspot, text, dan scene id. Penjelasanya mengenai data yang terdapat pada

fungsi tersebut adalah sebagai berikut :

- Hotspot, yang artinya kita ingin membuat suatu hotspot pada fungsi

tersebut.

- Pitch, penjelasan mengenai pitch sudah dijelaskan dipembahasan

sebelumnya, tetapi pitch memiliki tugas berbeda yaitu sebagai penentu

titik lokasi tombol hotspot berada berdasarkan sumbu y

- Yaw, sama seperti halnya dengan pitch, yaw pada hotspot juga berfungsi

sebagai penentu titik lokasi tombol hotspot berdasarkan sumbu X

- Type, fungsi hotspot memiliki dua fungsi yaitu sebagai penampil

informasi berupa deskripsi atau sebagai penghubung antara scene. Disini

diisi dengan “scene” yang artinya kita ingin mnghubungkan dengan

sebuah scene.

- Text adalah tulisan yang muncul ketika pointer diarahkan ke tombol

hotspot (hover). Tulisan ini biasanya berisi tentang nama lokasi yang ingin

dituju.

- Scene Id adalah scene yang ingin dihubungkan dengan scene yang sedang

aktif atau singkatnya sebagai target scene.

99
 Jumlah hotspot yang dibuat dalam suatu scene bergantung dari berapa

banyak lokasi yang ingin dibuat. Tetapi perlu diingat bahwa syarat utama

membuat hotspot adalah lokasi tersebut harus memiliki scene id.

3.6. Testing

Tahap ini disebut juga sebagai tahap pengujian dimana pengujian dilakukan

oleh pembuat atau lingkungan pembuatnya sendiri.

Pengujian sistem yang digunakan pada website virtual tour Fakultas Teknik

Unversitas Hasanuddin ini yaitu metode blackbox. Black box testing adalah

pengujian yang dilakukan hanya mengamati hasil eksekusi melalui data uji dan

memeriksa fungsional dari perangkat lunak. Metode ini berfokus pada persyaratan

fungsional perangkat lunak. Pengujian menggunakan metode ini memungkinkan

perekayasa perangkat lunak mendapatkan serangkaian input sepenuhya. Alasan

pengembang menggunakan metode ini karena metode blackbox memiliki beberapa

kelebihan yaitu:

• Blackbox testing dapat menguji keseluruhan fungsionalitas perangkat lunak.

• Blackbox testing dapat memilih subset test yang secara efektif dan efisien

dapat menemukan cacat.

Pengujian dilakukan pada website virtual tour dan halaman admin virtual

tour. Khusus untuk website virtual tour, pengujian dilakukan oleh beberapa

responden menggunakan perangkat masing-masing dan koneksi internet masing

untuk menguji fungsional sistem dengan menggunakan kuesioner.

100
 No Fungsi
1 Halaman website virtual tour dapat diakses.
Website menampilkan gambar panorama “Main
2
Bridge” ketika pertama kali dibuka.
3 Gambar panorama bergerak saat di-drag
Website berhasil menampilkan tombol panah
4
berserta keterangan lokasi
Lokasi dapat berganti dengan menekan tombol
5
Panah (hotspot)
6 Daftar lokasi disisi kiri berhasil ditampilkan.
Gambar berganti sesuai dengan pilihan pada
7
daftar lokasi.
8 Tombol tombol zoom in bekerja sesuai fungsi.
9 Tombol tombol zoom out bekerja sesuai fungsi.
10 Tombol tombol full screen bekerja sesuai fungsi.
Mengakses website virtual tour melalui aplikasi
11
peta kampus
Tabel 3.2. Tabel pengujian yang akan diuji ke user

No Fungsi
1 Mengakses halaman admin
2 Login halaman admin virtual tour
Menampilkan daftar scene pada menu
3
scene
4 Menambah scene
5 Mengedit scene
6 Menghapus scene
7 Mengunggah gambar
Menampilkan daftar hotspot pada menu
8
hotspot
9 Menambah hotspot
10 Mengedit Hotspot
11 Menghapus Hotspot
12 Mengatur fungsi first scene
13 Mengatur fungsi autoload
14 Mengatur fungsi scene fade duration

Tabel 3.3. Tabel pengujian yang akan dilakukan pada halaman admin

virtual tour

101
3.7. Distribution

Dalam tahapan ini, aplikasi yang selesai diuji dan dinyatakan baik sesuai

dengan tujuan pembuatan, akan didistribusikan ke domain Kampus Universitas

Hasanuddin yaitu www.unhas.ac.id yang berada pada sub domain aplikasi peta

kampus dan virtual tour.

102
 BAB IV

HASIL DAN PEMBAHASAN

4.1 Gambaran Umum Aplikasi

Aplikasi website virtual tour Fakultas Teknik Hasanuddin ini dibuat untuk

kampus Fakultas Teknik yang berada di Gowa dan Kampus Universitas

Hasanuddin yang berada di Tamalanrea. Berbeda dengan website virtual tour pada

umumnya, website virtual tour untuk Fakultas Teknik ini dibuat dengan model yang

dinamis sehingga mempunyai halaman admin yang berfungsi mengedit database

apabila terjadi perubahan data atau penambahan konten pada website virtual tour

berupa data scene dan hotspot. Contohnya seperti gambar panorama yang ingin

diperbaharui dan mengganti yang sudah ada dilakukan melalui menu “Scene”,

ataupun membuat scene baru dan menambahkan hotspot baru.

4.2 Implementasi Desain

Perancangan Desain yang telah dibuat sebelumnya menjadi patokan untuk

diimplementasikan kedalam website virtual tour. Komponen dan tata letak pada

hasil implementasi website virtual tour dibuat semirip mungkin dengan model

perancangan.

4.2.1 Tampilan Awal Website

Tampilan awal website adalah tampilan yang paling pertama kali muncul

ketika user mengakses halaman webite virtual tour untuk Fakultas Teknik.

103
 Gambar 4.1. Tampilan awal website virtual tour

Pada Tampilan awal website dimulai dengan memuat scene “main bridge”

yaitu menampilkan lokasi jembatan untuk pejalan kaki pada Fakultas Teknik

Universitas Hasanuddin yang berlokasi di Kampus Gowa.

4.2.2 Tampilan Website Virtual tour (Sidebar)

Sidebar lokasi letaknya berada pasa sisi kiri website, berfungsi sebagai

daftar lokasi yang terdapat website virtual tour. Pada sidebar virtual tour

terdapat setiap nama lokasi yang dapat di-klik kemudian melakukan aksi yaitu

menampilkan gambar panorama 360 sesuai dengan lokasi dipilih user. Lokasi

yang aktif ditandai dengan warna latar hijau pada nama lokasi, bisa dilihat pada

gambar 4.2 lokasi “Main Bridge” adalah lokasi yang aktif, dan saat user memilih

suatu lokasi melalui tombol hotspot maka otomatis lokasi yang aktif juga akan

ikut berganti.

104
 Ketika user meng-klik Tombol “Universitas Hasanuddin” pada sidebar

maka akan mengembalikan ke tampilan awal website.

Gambar 4.2. Sidebar Lokasi pada website virtual tour

4.2.3 Tampilan Website Virtual tour (Hotspot)

Tombol hotspot adalah tombol yang ditandai dengan betuk seperti arah

panah berfungsi mengganti scene sesuai lokasi yang sebenarnya pada gambar

panorama 360. Tombol ini, ketika pointer berada di atas tombol hotspot (hover)

maka akan menampilkan nama lokasi tujuan jika memilih lokasi tersebut.

105
 Gambar 4.3. Tampilan ketika pointer berada di atas tombol hotspot

Gambar 4.4. Tampilan virtual tour saat memuat scene berikutnya

Ketika user meng-klik tombol hotspot, maka tombol hotspot akan

melakukan perintah yaitu mengganti scene saat ini dengan scene yang sesuai

106
dengan tujuan yang diinginkan user. Dapat dilihat pada gambar 4.4 adalah proses

yang terjadi saat user meng-klik tombol hotspot.

4.2.4 Tampilan Fitur Website Virtual tour

Selain kedua fitur di atas, website virtual tour Fakultas Teknik Univesitas

Hasanuddin memiliki fitur tambahan berupa tombol zoom in, zoom out, dan full

screen yang diletakkan pada sudut kiri atas frame gambar panorama 360.

4.2.4.1 Fitur Zoom In

Fitur ini memiliki fungsi yaitu user dapat memperbesar tampilan dan

memperdekat sudut pandang gambar panorama cukup dengan meng-klik

tombol “ + ”. Pada gambar 4.5 menampilkan hasil yang terjadi ketika user

memperbesar gambar panorama 360.

Gambar 4.5. Tampilan virtual tour saat diperbesar

107
 4.2.4.2 Fitur Zoom Out

Fitur ini memiliki fungsi yaitu user dapat memperbesar tampilan dan

memperjauh sudut pandang gambar panorama cukup dengan meng-klik

tombol “ - ”. Pada gambar 4.6 menampilkan hasil yang terjadi ketika user

memperbesar gambar panorama 360.

Gambar 4.6. Tampilan virtual tour saat diperkecil

4.2.4.3 Fitur Full Screen

Fitur ini berfungsi untuk mengubah tampilan website virtual tour

menjadi layar penuh (full screen). Tombol fitur letak tepat di bawah tombol

zoom out dan ketika di-klik gambar panorama 360 akan memenuhi frame

sehingga luas pandang menjadi lebih banyak tidak terganggu oleh sidebar.

4.2.5 Tampilan Show in Panorama Aplikasi Peta Kampus

Fitur ini tambahan pada Aplikasi Peta Kampus Universitas Hasanuddin

dimana memiliki keterkaitan dengan website virtual tour.

108
 Gambar 4.7. Tampilan virtual tour saat layar penuh.

Terdapat beberapa lokasi yang sama pada aplikasi peta kampus dan virtual

tour sehingga dapat dimanfaatkan dengan memberi fitur tambahan berupa Show

in Panorama.

Gambar 4.8. Tampilan tombol Show in Panorama

Fitur Show Panorama dapat ketahui ketersediannya dengan melihat

tombol “tampilkan dalam 360” pada sidebar deskripsi aplikasi peta kampus saat

109
user memilih suatu lokasi. Jika pada suatu lokasi tidak muncul tombol tersebut

artinya lokasi tersebut tidak memiliki gambar panorama 360.

4.2.6 Tampilan Login Admin

Membuat halaman admin diperlukan keamanan agar tidak mudah diakses

oleh sembarang orang dan melakukan pengubahan data tanpa sepengetahuan

admin. Maka dengan itu untuk bisa masuk ke dalam dashboard admin, hanya

bisa dilakukan oleh pihak yang memiliki akses melalui username dan password.

Gambar tampilan halaman login admin bisa dilihat pada gambar 4.9.

4.2.7 Tampilan Beranda Admin

Ketika admin berhasil login kedalam halaman admin website virtual tour,

admin kini memliki akses penuh terahadap konten yang tampil dihalaman

website virtual tour. Pada tampilan beranda admin, terdapat 4 menu Beranda,

Scene, Hotspot dan Settings. Tampilan beranda menampilkan jumlah scene dan

jumlah hotspot yang terdapat pada website virtual tour.

Gambar 4.9. Tampilan halaman login admin

110
 Gambar 4.10. Tampilan halaman beranda admin

4.2.8 Tampilan Menu Scene

Saat admin memilih menu “Scene” pada halaman admin, admin dapat

melakukan perintah seperti menambah scene, mengubah scene, mengganti

gambar, dan menghapus scene. Tampilan umum pada menu scene menampilkan

konten berupa nomor urutan scene, scene ID, judul scene, tipe gambar

panorama, dan tindakan yang penjelasannya pada poin-poin di bawah ini :

• Nomor urutan scene, berfungsi menampilkan urutan tiap scene yang ada

dalam web. Nomor urutan ini sesuai dengan lokasi yang mucul pada

sidebar lokasi.

• Scene ID, adalah identitas scene yang hanya akan dibaca oleh database

tetapi tidak tampil pada website virtual tour.

• Judul Scene, adalah text yang hanya muncul pada sidebar lokasi website

virtual tour. Judul scene boleh memiliki spasi sebab terdapat lokasi yang

memiliki kata lebih dari 1.

111
 • Type, adalah jenis gambar panorama 360 yang tersimpan di server,

ataupun biasa disebut model gambar panorama.

• Tindakan, atau action adalah menu tambahan yang memiliki 3 tombol aksi

sepert view, edit, dan delete. View berfungsi menampilakan data scene,

edit untuk mengubah data scene, dan delete untuk menghapus scene.

Scene yang dibuat memiliki data yang mampung informasi seperti scene

ID, title, hfov, pitch, yaw, tipe, urutan, form upload gambar, dan thumbnail:

• Form upload gambar, berfungsi untuk mengganti gambar yang ada pada

scene saat ini dengan cara diupload.

• Thumbnail gambar adalah preview gambar panorama yang saat ini ada

pada scene yang ingin diedit. Dengan adanya thumbnail ini tentu sangat

berguna bagi admin

Gambar 4.11. Tampilan umum pada menu scene

112
 Gambar 4.12. Tampilan halaman edit scene.

Kecuali menghapus scene, konten pada menu form scene saat admin ingin

menambah dan mengedit scene semuanya sama saja.

4.2.9 Tampilan Menu Hotspot

Saat admin memilih menu “hotspot”, admin dapat melakukan perintah

seperti menambah hotspot, mengubah hotspot, dan menghapus hotspot.

Tampilan umum pada menu hotspot menampilkan konten berupa nomor urutan

hotspot, main scene, scene id, dan text yang penjelasannya dapat lebih

dimengerti pada poin-poin di bawah:

• Nomor urutan hotspot, berfungsi menampilkan nomor urutan pada daftar

menu hotspot. Nomor urutan ini tidak muncul pada website virtual tour.

• Main scene, merupakan scene dimana hotspot tersebut berada.

• Scene id, merupakan scene yang menjadi target pada hotspot yang dibuat

pada main scene.

113
 • Text, berfungsi sebagai judul yang muncul ketika pointer mendatangi

tombol hotspot yang dibuat.

• Tindakan, atau action adalah menu tambahan yang memiliki 3 tombol aksi

sepert view, edit, dan delete. View berfungsi menampilakan data hotspot,

edit untuk mengubah data hotspot, dan delete untuk menghapus hotspot.

Hotspot yang dibuat memiliki data yang mampung informasi seperti main

scene, scene id, pitch, yaw. Penjelasan tiap data yang terdapat pada scene

dijelaskan pada point berikut :

• Main Scene adalah scene utama yang akan dibuatkan sebuah hotspot.

• Scene ID adalah scene yang akan menjadi target hotspot.

• Title adalah teks yang akan muncul pada tombol hotspot.

• Yaw adalah nilai yaw awal yaw ketika gambar panorama 360.

• Pitch adalah nilai picht awal sumbu pitch ketika gambar panorama 360

ditampilkan.

Gambar 4.13. Tampilan halaman awal menu hotspot

114
 Gambar. 4.14. Tampilan menu edit hotspot

4.2.10 Tampilan Menu Settings

Pada menu settings terdapat kolom edit berupa first scene, author,

autoload, Scene fade duration. Penjelasan mengenai elemen-elemen tersebut

yaitu:

• First scene adalah scene yang pertama kali ketika user mengakses

halaman website virtual tour. Admin dapat mengganti scene awal

dengan memilih scene yang telah ada.

• Author adalah fungsi yang menampilkan judul penggagas dalam

website virtual tour. Dalam hal ini default author-nya adalah

“Universitas Hasanuddin” .

• Autoload adalah fitur yang berfungsi memuat gambar secara otomotis

saat user mengakses halaman website virtual tour.

115
 • Scene Fade Duration adalah durasi transisi yang terjadi saat user

berganti dari scene yang satu ke scene yang lainnya. Satuan nilai

durasi transisi scene ini adalah milidetik.

Gambar. 4.15. Tampilan menu setting

4.3 Hasil Pengumpulan Data

Pembuatan website virtual tour Fakultas Teknik Universitas Hasanuddin

menggunakan gambar panorama 360 sebagai materi utamanya dan diambil dari

beberapa lokasi yang ini dimasukkan kedalam website virtual tour. Pertimbangan

yang terjadi setelah meninjau mengenai lokasi yang akan dimasukkan kedalam

virtual tour, dan ukuran data gambar panorama tiap gambar yang sangat besar

maka lokasi yang ingin dimasukkan kedalam virtual tour berupa

gedung/lingkungan/tempat yang penting atau yang memiliki nilai informasi untuk

user. Hasil pengumpulan data dari lokasi yang ingin dimasukkan kedalam website

virtual tour Kampus Fakultas Teknik dapat dilihat pada tabel di bawah ini.

116
 Ukuran File Ukuran File
Jumlah
No. Lokasi Sebelum Setelah
Gambar
Kompresi (KB) Kompresi (KB)
Jembatan Pejalan Kaki (Main
1 16 19.531 1.231
Bridge)
2 CSA Library 24 15.321 3.987
3 CSA Theater Library 20 18.154 8.645
4 CSA Library Showcase 24 14.765 5.652
5 CSA Computer Laboratory 26 11.985 1.601
Center of Technology (CoT)
6 26 18.570 3.868
Building
7 CoT Ground Floor 22 9.766 4.075
8 CoT Meeting Room 28 16.243 6.662
9 CoT Dean Hall 26 11.873 3.778
10 Theater Outdoor 19 13.221 5.046
11 Jusuf Kalla’s Signature 17 15.893 7.484
12 Connecting Point 16 11.354 6.750
13 Class Room Building 22 17.112 3.908
14 Class Room 29 13.835 4.489
15 Architecture Building 28 20.789 2.875
16 Architecture Studio Design 24 17.665 3.605
`17 Civil Building 28 18.323 2.325
18 Structure & Material Laboratory 26 13.846 4.490
19 Rusunawa Fakultas Teknik 22 21.500 1.911
20 Masjid Kampus 20 10.863 8.682
21 UPT KKN 26 21.246 5.247
22 LP2M 20 23.985 5.809
23 Bundaran Tamalanrea 20 23.152 5.872
24 Pusat Kegiatan Mahasiswa 22 18.754 5.995
25 Gedung Rektorat 22 19,534 6.587
26 Perpustakaan Pusat 1 26 15.465 5.672
27 Perpustakaan Pusat 2 30 13.724 7.133
28 Perpustakaan Pusat 3 31 17.838 7.305
29 Perpustakaan Pusat 3 27 15.613 4.303
30 Fakultas MIPA 21 37.536 5.026
31 Fakultas Farmasi 26 13.875 5.603
32 Fakultas Pertanian 24 21.158 3.353
33 Fakultas Peternakan 22 18.851 4.119
34 Fakultas Kehutanan 28 30.584 4.334
35 Fakultas Ilmu Sosial & Ilmu Politik 22 11.428 3.515
36 Fakultas Kesehatan Masyarakat 26 28.374 9.498
37 Fakultas Kedokteran 20 30,621 4.551
38 Fakultas Kedokteran Gigi 24 34.368 4.171
39 Fakultas Ilmu Kelautan & Perikanan 26 13.532 5.561
40 Fakultas Ekonomi 28 9.083 5.139
41 Fakultas Hukum 24 21.597 2.590

117
 42 Fakultas Ilmu Budaya 24 22.041 5.340
43 Gedung Pasca Sarjana 24 24.375 6.804
44 Auditorium Prof. Amiruddin 22 25,835 6.860
45 Baruga A.P Pettarani 26 22.634 5.564
46 Pusat Bahasa 23 30.124 3.653
47 Wisma Unhas 22 11.396 3.741
Pusat Teknologi Informasi dan
48 20 31.244 7.419
Komunikasi
49 Pusat Kegiatan Penelitian 24 33.546 9.217
Tabel 4.1. Daftar Lokasi beserta jumlah foto dan ukuran gambar sebelum dan
sesudah konversi

4.4 Pengujian

Pengujian sistem yang digunakan pada website virtual tour Fakultas Teknik

Unversitas Hasanuddin ini yaitu metode blackbox.

Sebelum diuji ke responden. Virtual tour terlebih dahulu diuji

menggunakan perangkat yang digunakan penulis menggunakan berbagai jenis

browser seperti chrome, mozilla, dan safari. Gambar di bawah adalah tampilan

virtual tour saat dijalankan di berbagai browser.

Gambar 4.16. Tampilan virtual tour saat dijalankan menggunakan browser

Google Chrome.

118
 Gambar 4.17. Tampilan virtual tour saat dijalankan menggunakan browser

Mozilla Firefox.

Gambar 4.18. Tampilan virtual tour saat dijalankan menggunakan browser Safari

Pengujian pada halaman user dilakukan dengan memberikan kuesioner

kepada responden dan diwajibkan memberikan jawaban dari hasil pengujian yang

119
mereka lakukan menggunakan perangkat masing-masing. Kuesioner dibuat

menggunakan formulir google sebab lebih mudah untuk dibagi dibandingkan

dengan kuesioner konvensional.

4.4.1 Pengujian Fungsi Halaman User

Responden menjawab pertanyaan melalui formulir pengujian dengan

mengisi identitas dan spesifikasi perangkat mereka serta kecepatan internet

untuk digunakan sebagian penentuan persyaratan kebutuhan sistem (system

requirement) dari data tersebut. Total responden yang menguji fungsional sistem

virtual tour adalah sebanyak sepuluh orang. Dari data yang didapatkan dari

pertanyaan yang diajukan kepada responden kemudian dihitung persentase

keberhasilan sistem bekerja. Dari 10 user yang diajukan 11 pertanyaan yang

hasil pengujiannya pada user dapat dilihat pada tabel di bawah ini.

No Fungsi Persetase Hasil Keterangan

Halaman website virtual tour dapat 10/10
1 100% 
diakses. Berhasil
Website menampilkan gambar
10/10
2 panorama “Main Bridge” ketika 100% 
Berhasil
pertama kali dibuka.
Gambar panorama bergerak saat 10/10
3 100% 
di-drag. Berhasil
Website berhasil menampilkan
10/10
4 tombol panah berserta keterangan 100% 
Berhasil
lokasi
Lokasi dapat berganti dengan 10/10
5 100% 
menekan tombol Panah (hotspot) Berhasil
Daftar lokasi disisi kiri berhasil 10/10
6 100% 
ditampilkan. Berhasil
Gambar berganti sesuai dengan 10/10
7 100% 
pilihan pada daftar lokasi. Berhasil

120
 Tombol tombol zoom in bekerja 10/10
8 100% 
sesuai fungsi. Berhasil
Tombol tombol zoom out bekerja 10/10
9 100% 
sesuai fungsi. Berhasil
Tombol tombol full screen bekerja 10/10
10 100% 
sesuai fungsi. Berhasil
Mengakses website virtual tour 10/10
11 100% 
melalui aplikasi peta kampus Berhasil
Tabel 4.2. Tabel pengujian pada halaman user

Responden juga dimintai pertanyaan spesifikasi perangkat dan kecepatan

internet yang akan digunakan. Untuk mengukur durasi memuat gambar, scene

yang digunakan adalah CSA Library dengan ukuran gambar 4 Megabyte atau 32

Megabit. Data yang terkumpul melalui responden dapat di lihat pada tabel

dibawah ini.

Durasi
Kecepatan
Memuat
No Responden Internet
Gambar
(Mb)
(detik)
1 Responden 1 7,79 4,4
2 Responden 2 5,75 7
3 Responden 3 8,89 4
4 Responden 4 9,55 4,4
5 Responden 5 7,59 5,56
6 Responden 6 9,09 7
7 Responden 7 8,14 7,2
8 Responden 8 6,37 6
9 Responden 9 1,14 30
10 Responden 10 5,61 6

Tabel 4.3. Perbandingan kecepatan internet masing-masing responden

121
 Dari data tabel di atas bahwa durasi memuat gambar hasilnya berbeda-

beda. Spefisikasi perangkat tidak memiliki pengaruh karena virtual tour yang

berbasis gambar panorama tidak terlalu membebani perangkat. Maka untuk

kebutuhan sistem untuk website virtual tour hanya membutuhkan koneksi

internet yang cepat karena kecepatan internet sangat mempengaruhi durasi

dalam memuat gambar. Hasil pengumpulan data dari responden didapatkan

bahwa kecepatan internet yang direkomendasikan untuk mengakses virtual tour

adalah 6,99 atau 7 Mbps.

4.4.2 Pengujian Fungsi Halaman Admin

Hasil pengujian fungsi pada halaman admin dapat dilihat pada tabel di

bawah ini.

No Fungsi Hasil Keterangan

1 Mengakses halaman admin  Berhasil
2 Login halaman admin virtual tour  Berhasil
Menampilkan daftar scene pada
3  Berhasil
menu scene
4 Menambah scene  Berhasil
5 Mengedit scene  Berhasil
6 Menghapus scene  Berhasil
7 Mengunggah gambar  Berhasil
Menampilkan daftar hotspot pada
8  Berhasil
menu hotspot
9 Menambah hotspot  Berhasil
10 Mengedit Hotspot  Berhasil
11 Menghapus Hotspot  Berhasil
12 Mengatur fungsi first scene  Berhasil
13 Mengatur fungsi autoload  Berhasil
Mengatur fungsi scene fade
14  Berhasil
duration
Tabel 4.3. Tabel pengujian pada admin

122
4.5 Distribusi

Setelah melalui tahap pengujian dan memastikan semua fungsi berjalan

dengan semestinya maka aplikasi dianggap layak untuk didistribusikan. Proses

distribusi dalam hal ini adalah mengunggah aplikasi website tersebut ke server.

Website virtual tour akan diunggah ke server “unhas.ac.id” dimana aplikasi peta

kampus juga berada pada server yang sama.

Hasil distribusi website virtuar tour kini dapat dilihat pada lama

www.unhas.ac.id/petakampus/virtualtour yang berada pada sub domain aplikasi

peta kampus.

Gambar 4.19. Virtual tour saat diakses melalui situs resmi kampus Universitas

Hasanuddin

123
 BAB V

KESIMPULAN DAN SARAN

5.1. Kesimpulan

Adapun kesimpulan dari penelitian ini adalah :

1. Website virtual tour sebagai media informasi Kampus Fakultas Teknik dan

Kampus Tamalanrea Universitas Hasanuddin berbasis gambar panorama 360

2. Website virtual tour menggunakan gambar panorama 360 sebagai materi

utamanya yang diambil dari 19 lokasi di wilayah Kampus Fakultas Teknik

dan 30 lokasi di Kampus Tamalanrea, sehingga total 49 gambar panorama

360.

3. Aplikasi peta kampus Universitas Hasanuddin kini ditambahkan fitur yang

langsung terhubung melalui tombol ke website virtual tour melalui sidebar

deskripsi lokasi aplikasi peta kampus.

5.2. Saran

Bisa dikatakan website ini jauh dari kata sempurna terutama dari jumlah

lokasi yang ditampilkan, dikarenakan pertimbangan ukuran data yang terlalu besar,

juga terkhusus untuk Fakultas Teknik Gowa masih terdapat banyak lokasi yang

masih dalam tahap konstruksi. Diharapkan, kedepannya gambar dan data dapat

dilengkapi melalui halaman admin ketika semua bangunan yang masih dalam tahap

konstruksi telah selesai dibangun serta perbaikan. Juga tampilan website saat

diakses melalui smartphone dapat ditingkatkan agar lebih responsif.

124
 DAFTAR PUSTAKA

Agushinta, D. 2010. Mengenal Interaksi Manusia dan Komputer. Naskah Publikasi

Psikologi Universitas Gunadarma.

Al Fatta, Hanif (2008), Analisis dan Perancangan Sistem Informasi.Yogyakarta:

Andi Offset

Fajar Junaedi EP.(2005). Panduan Lengkap Pemrograman HTML. Yogyakarta :

Anindaya

Firdaus, S. 2012. Perancangan Aplikasi Multimedia Interaktif. Jurnal Algoritma

Sekolah Tinggi Teknologi Garut, 1(9) 1-10.

Hardjono, Dhewiberta,(2006).Menguasai Pemrograman Web dengan PHP 5.

Semarang : Wahana Komputer.

Hartono.(2009).Sistem Teknologi Informasi.Yogyakarta:Andi Offset

Hidayatullah,P dan Kawistara,J.H.(2014).Program Web.Bandung:Informatika

Bandung.

Jugiyanto.(1999).Sistem Informasi Berbasis Komputer.Yogyakarta:BPFE

K. Abdul.(2009)Mastering Ajax dan PHP. Yogyakarta: Penerbit Andi.

125
Karray, F. 2008. Human-Computer Interraction: Overview on State of the Art.

Journal Smart Senseing and Intelligent Systems, 1(1) 137-159.

Peranginangin, Kasiman,(2006) Aplikasi WEB dengan PHP dan MySQL.

Yogyakarta : Andi

Sianipar,R.H.(2015). Pemrograman Javascript Teori dan Implementasi.

Bandung.Informatika Bandung.

Sutopo, Ariesto Hadi. 2012. Teknologi Informasi dan Komunikasi dalam

Pendidikan. Yogyakarta: Graha Ilmu

Tipsfotografi.net.(2012). Memulai Fotografi Panorama. Diakses pada 14

September 2017. http://tipsfotografi.net/tips-saat-memotret-fotografi-

panorama.

Yogajiwanjaya.(2014). Pengertian Dan Kegunaan XAMPP. Diakses Pada 29 Juli

2017. http://www.pusatdesainweb.com/2014/06/29/pengetian-dan-

kegunaan-xampp/.

126
LAMPIRAN

127
Lampiran 1. Landing.php

<!DOCTYPE html>
<html lang="en">

<?php
if(!empty($_GET['scene'])){
$ini = $_GET['scene'];
}else{
$ini = $scene_id;
}
?>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Tour</title>
<link rel="stylesheet" type="text/css"
href="<?=base_url('templates/')?>assets/css/pannellum.css"/>
<script>
var siteURL = "<?=site_url()?>";
var currentSceneId = "<?=$ini?>";
</script>
<script type="text/javascript" src="<?=base_url('templates/')?>assets/js/jquery.js"></script>
<script type="text/javascript" src="<?=base_url('templates/')?>assets/pannellum.js"></script>
<!-- <script type="text/javascript" src="assets/js/data.js"></script>
-->
<style>
#panorama {
width: 1350px;
height: 660px;
}

</style>

<!-- Bootstrap Core CSS -->

<link href="<?=base_url('templates/')?>bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->

<link href="<?=base_url('templates/')?>bootstrap/css/simple-sidebar.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.container-fluid {
padding-right: 0px;

128
 padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>

<body>
<div id="wrapper" class="toggled">

<!-- Sidebar -->

<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="<?=site_url()?>">Universitas Hasanuddin</a>
</li>
<?php foreach ($scenes as $sidebar) { ?>
<li>
<a id="<?=$sidebar->scene_id?>" class="<?=($ini == $sidebar->scene_id ?
"active" : "")?>" href="<?=site_url().'?scene='.$sidebar->scene_id?>"><?=$sidebar->title?></a>
</li>
<?php } ?>
</ul>
</div>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->

<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"default": {
"firstScene": "<?=$scene_id?>", //mestinya mulai dari mainbrigde
"author": "<?=$setting->author?>",
"autoLoad": <?=($setting->autoload == 1 ? 'true' : 'false')?>,
"sceneFadeDuration": <?=$setting->scene_fade_duration?>
},
"scenes": {
<?php foreach ($scenes as $scene) { ?>
"<?=$scene->scene_id?>": {
"title": "<?=$scene->title?>",
"hfov": <?=$scene->hfov?>,
"pitch": <?=$scene->pitch?>,
"yaw": <?=$scene->yaw?>,
"type": "<?=$scene->type?>",
"panorama": "<?=base_url('templates/')?>assets/img/<?=$scene-
>panorama?>",
"hotspots": [
<?php
$hotspots = $this->db->where('main_scene', $scene->scene_id)-
>get('hotspots')->result();
foreach ($hotspots as $hotspot) {

129
 ?>
{
"pitch": <?=$hotspot->pitch?>,
"yaw": <?=$hotspot->yaw?>,
"type": "<?=$hotspot->type?>",
"text": "<?=$hotspot->text?>",
"sceneId": "<?=$hotspot->scene_id?>"
},
<?php } ?>
{}
]
},
<?php } ?>
"":{}
}
});
</script>
<!-- <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle
Menu</a> -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

<!-- Bootstrap Core JavaScript -->

<script src="<?=base_url('templates/')?>bootstrap/js/bootstrap.min.js"></script>

<!-- Menu Toggle Script -->

<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>

</body>
</html>

Lampiran 2. Crud.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Crud extends CI_Model {
public function ca($t){return $this->db->get($t)->num_rows();} // count all
public function ga($t){return $this->db->get($t)->result();} // get all
public function gao($t,$o){return $this->db->order_by($o)->get($t)->result();} // get all order
public function gl($t,$l,$f){return $this->db->limit($l,$f)->get($t)->result();} // get limit
public function glo($t,$l,$f,$o){return $this->db->limit($l,$f)->order_by($o)->get($t)-
>result();} // get limit order
public function cw($t,$w){return $this->db->where($w)->get($t)->num_rows();} // count
where
public function gw($t,$w){return $this->db->where($w)->get($t)->result();} // geet where

130
 public function gwo($t,$w,$o){return $this->db->where($w)->order_by($o)->get($t)-
>result();} // get where order
public function gwl($t,$w,$l,$f){return $this->db->where($w)->limit($l,$f)->get($t)-
>result();} // get where limit
public function gwlo($t,$w,$l,$f,$o){return $this->db->where($w)->limit($l,$f)-
>order_by($o)->get($t)->result();} // get where limit order
public function gd($t,$w){return $this->db->where($w)->get($t)->row();} // get detail
public function gda($t,$w){return $this->db->where($w)->get($t)->row_array();} // get detail
array
public function i($t,$d){$this->db->insert($t,$d);} // insert
public function u($t,$d,$w){$this->db->where($w)->update($t,$d);} // update
public function d($t,$w){$this->db->where($w)->delete($t);} // delete
public function q($q){return $this->db->query($q);} // query
public function qa($q){return $this->db->query($q)->num_rows();} // query count
public function qo($q){return $this->db->query($q)->result();} // query result
}

Lampiran 3. Home.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends Public_Controller {

public function index() {

$scenes = $this->crud->gao('scenes', 'urutan ASC');
$setting = $this->crud->gd('setting', array('id' => '1'));
$view = array( 'scenes' => $scenes,
'setting' => $setting
);

if ($this->input->get('scene') != null) $view['scene_id'] = $this->input-

>get('scene');
else $view['scene_id'] = $view['setting']->first_scene;

$this->load->view('landing', $view);
}
}

131
Lampiran 4. Edit.php
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-body">
<?php echo form_open(admin_url('hotspots/edit/'.$hotspot->id))?>
<div class="col-md-6">
<div class="form-group">

<label>Main Scene</label> <span>(Tidak boleh ada spasi)</span>

<select name="main_scene" class="form-control">

<?php foreach ($main_scene as $data) { ?>
<option value="<?php echo $data->scene_id?>"<?php echo set_select('main_scene',
$data->scene_id, $data->scene_id === $hotspot->main_scene)?>><?php echo $data-
>scene_id?></option>
<?php } ?>
</select>
<?php echo form_error('main_scene')?>
</div>
<div class="form-group">
<label>Scene ID</label> <span>(Tidak boleh ada spasi)</span>
<select name="scene_id" class="form-control">

<?php foreach ($main_scene as $data2) { ?>

<option value="<?php echo $data2->scene_id?>"<?php echo set_select('scene_id',

$data2->scene_id, $data2->scene_id === $hotspot->scene_id)?>><?php echo $data2-
>scene_id?></option>
<?php } ?>
</select>
<?php echo form_error('scene_id')?>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Pitch</label> <span>(Angka desimal menggunakan titik. <b>Min = -360</b>, <b>max
= 360</b>)</span>
<input type="text" name="pitch" class="form-control" placeholder="Pitch" value="<?php echo
set_value('pitch', $hotspot->pitch)?>" onkeypress="return (event.charCode >= 48 && event.charCode <=
57) || event.charCode == 45 || event.charCode == 46" required />

<?php echo form_error('pitch')?>

</div>
<div class="form-group">

<label>Yaw</label> <span>(Angka desimal menggunakan titik. <b>Min = -360</b>, <b>max

= 360</b>)</span>
<input type="text" name="yaw" class="form-control" placeholder="Yaw" value="<?php echo
set_value('yaw', $hotspot->yaw)?>" onkeypress="return (event.charCode >= 48 && event.charCode <=
57) || event.charCode == 45 || event.charCode == 46" required />
<?php echo form_error('yaw')?>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Text</label>

132
 <input type="text" name="text" class="form-control" placeholder="Text" value="<?php echo
set_value('text', $hotspot->text)?>" required />
<?php echo form_error('text')?>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success" value="Submit" />
<a href="<?php echo admin_url('hotspots')?>" class="btn btn-default">Batal</a>
</div>
</div>
<?php echo
form_close()?>
</div>
</div>
</div> <!-- /.col -->
</div> <!-- /.row -->
</section> <!-- /.content -->

Lampiran 3. Tambah.php
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-body">
<?php echo form_open(admin_url('hotspots/tambah'))?>
<div class="col-md-6">
<div class="form-group">
<label>Main Scene</label>
<span>(Tidak boleh ada spasi)</span>
<select name="main_scene" class="form-control">
<?php foreach ($main_scene as $data) { ?>
<option value="<?php echo $data->scene_id?>"
<?php echo set_select('main_scene', $data->scene_id)?>><?php echo $data-
>scene_id?></option> <?php } ?>
</select>
<?php echo form_error('main_scene')?>
</div>
<div class="form-group">
<label>Scene ID</label> <span>(Tidak boleh ada spasi)</span>
<select name="scene_id" class="form-control">
<?php foreach ($main_scene as $data2) { ?>
<option value="<?php echo $data2->scene_id?>"<?php echo
set_select('scene_id', $data2->scene_id)?>><?php echo $data2->scene_id?></option>
<?php } ?>
</select>
<?php echo form_error('scene_id')?>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Pitch</label>
<span>(Angka desimal menggunakan titik. <b>Min = -360</b>, <b>max = 360</b>)</span>
<input type="text" name="pitch" class="form-control" placeholder="Pitch" value="<?php echo
set_value('pitch')?>" onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 45 || event.charCode == 46" required />

133
 <?php echo form_error('pitch')?>
</div>
<div class="form-group">
<label>Yaw</label>
<span>(Angka desimal menggunakan titik. <b>Min = -360</b>, <b>max =
360</b>)</span>
<input type="text" name="yaw" class="form-control" placeholder="Yaw"
value="<?php echo set_value('yaw')?>" onkeypress="return (event.charCode >= 48 && event.charCode
<= 57) || event.charCode == 45 || event.charCode == 46" required />
<?php echo form_error('yaw')?>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Text</label>
<input type="text" name="text" class="form-control" placeholder="Text"
value="<?php echo set_value('text')?>" required />
<?php echo form_error('text')?>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success" value="Submit" />
<a href="<?php echo admin_url('hotspots')?>" class="btn btn-default">Batal</a>
</div>
</div>
<?php echo form_close()?>
</div>
</div>
</div> <!-- /.col -->
</div> <!-- /.row -->
</section> <!-- /.content -->

134
135
136
137
138
139
140
141
142
143
144
145