Pengembangan kiosk informasi interaktif berbasis 3 dimensi di nict hrd center

PENGEMBANGAN KIOSK INFORMASI INTERAKTIF

BERBASIS 3 DIMENSI DI NICT HRD CENTER

Dyah Astari Widyaningsih

106091002923

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UIN SYARIF HIDAYATULLAH

JAKARTA

PENGEMBANGAN KIOSK INFORMASI INTERAKTIF

BERBASIS 3 DIMENSI DI NICT HRD CENTER

Skripsi

Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta

Oleh

Dyah Astari Widyaningsih 106091002923

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UIN SYARIF HIDAYATULLAH

JAKARTA

PENGEMBA}IGAN KIOSK INT'ORMASI

INTERAKTIF

BERBASIS

3

DIMENSI DI NICT HRD CENTER

Skripsi

Diajukan Kepada Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Untuk Memenuhi Syarat-syarat Meraih Gelar Sarjana Komputer

Oleh

Dyah Astari r#idyaningsih

106091002923

Menyetujui,

Pembimbing

II

Mengetahui,

Ketua Program Studi Teknik Informatika

Pembimbing

I

NrP. 19691025 1988 t2

I

001 NrP. 19710522 2006 04 I 002

PENGESAHAN

UJIAN

Skripsi yang _{berjudul "Pengembangan} Kiosk Informasi Interaktif Berbasis 3

Dimensi

di

NICT

IIRD

CENTER". Telah

diuji

dan dinyatakan lulus dalam sidang munaqosyah Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tanggallTJuni 2011. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar sarjana skata satu (Sl) program studi Teknik Informatika.

Jakarta, Juni 2011

Menyetujui,

Penguji I

,^JJ.L\atJ.--:-Feri Fahrlanto. M.Sc Ria lfari Gusmita. M.Kom NIP. 198208t7 2009 t2 2 002

Pembimbing

II

Mengetahui,

Ketua Prodi Teknik Informatika NrP. 19800829

20tt

01

I

002

Pembimbing

I

NIP. 19691025 1988 12 1 001 .19710522 2006 04 1 002

ains dan Teknologi dayatullah Jakarta

P.19710522 2006 04

I

002

PERNYATAAN

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR-BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA MANAPUN

Jakarta, Juni 2011

ABSTRAK

Dyah Astari Widyaningsih-106091002923, Pengembangan Kiosk Informasi Interaktif Berbasis 3 Dimensi di NICT HRD CENTER, dibimbing oleh Bapak Dr. Eko Syamsuddin M. Eng.dan Bapak Yusuf Durrachman M.Sc., MIT. Pemerintah Republik Korea dan Pemerintah Indonesia mengadakan kerjasama pengembangan Sumber Daya Manusia di bidang Teknologi Informasi Komunikasi (TIK). Maka dilaksanakan Pembangunan Proyek National ICT Human Resource Development (NICT HRD). Pengelolaan Proyek NICT HRD, adalah kerja sama antara Departemen Komunikasi dan Informasi bersama dengan Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta. Tujuan NICT HRD atau biasa disebut PUSTIKNAS (Pusat Teknologi Informasi dan Komunikasi Nasional) adalah sebagai pusat pelatihan teknologi informasi yang dibangun oleh pemerintah guna menjawab tantangan globalisasi maupun kesenjangan digital. Gedung NICT HRD memiliki banyak ruangan, sehingga dalam hal penginformasian tata letak ruangan membutuhkan media yang menunjang, begitu pula dalam penginformasian jadwal pelatihan. Media yang tepat untuk menunjang penyampaian informasi tersebut adalah kiosk informasi, karena memiliki kapasitas yang cukup besar sesuai dengan hardisk didalamnya dan kiosk informasi adalah perkembangan teknologi informasi yang baru. Pembuatan kiosk informasi ini menggunakan metode pengumpulan data dan pengembangan sistem. Metode pengumpulan data terdiri dari studi pustaka, wawancara, observasi dan kuesioner. Sedangkan metode pengembangan sistem menggunakan Siklus Hidup Pengembangan Sistem Interactive Multimedia System Design and Development

(IMSDD) yang mempunyai 4 tahapan, diantaranya adalah System Requirement, Design Consideration, Implementation dan Evaluation. Berdasarkan hasil evaluasi, skiosk informasi membantu dalam penginformasian jadwal pelatihan dan informasi tata letak ruangan. Kiosk informasi NICT HRD ini masih memerlukan peningkatan dan perkembangan yang lebih baik , yakni agar bisa meng-upload

data dengan file type doc, xls, docx, xlsx, dan pergantian bahasa secara otomatis agar memudahkan adminsaat memasukkan data berita.

Kata kunci: kiosk informasi, IMSDD, multimedia, virtual reality, 3 dimensi. Jumlah Halaman : V Bab + 194 Halaman + xxvi Halaman + 153 Gambar + 28 Tabel + Daftar Pustaka + Lampiran.

KATA PENGANTAR

مﺳﺒ

ï·²

ﺮﻠا

ï± 

رﻠا نﻣﺤ

ï± 

مﯾﺤ

Puji syukur penulis panjatkan ke hadirat Allah SWT, atas berkat dan kasih karunia-Nya sehingga penulis dapat menyelesaikan skripsi dengan judul “Pengembangan Kiosk Informasi Interaktif Berbasis 3 Dimensi di NICT HRD CENTER ”.

Penulisan skripsi ini merupakan salah satu syarat untuk menyelesaikan Studi Strata 1 guna memperoleh gelar Sarjana Komputer pada Jurusan Teknik Informatika Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta.

Penulis menyadari bahwa tersusunnya skripsi ini bukan hanya atas kemampuan dan usaha penulis semata, namun juga berkat bantuan berbagai pihak, oleh karena itu penulis mengucapkan terima kasih yang sedalam-dalamnya kepada yang terhormat :

1. Bapak DR. Syopiansyah Jaya Putra, M. Sis selaku Dekan Fakultas Sains dan Teknologi UIN Syarif Hidayatulah Jakarta.

2. Bapak Yusuf Durrachman, M.Sc , MIT selaku Ketua Program Studi Teknik Informatika dan Ibu Viva Arifin, M.MSi selaku Sekretaris Program Studi Teknik Informatika.

yang telah meluangkan waktu, memberikan arahan dan nasehat dalam menyelesaikan skripsi ini.

4. Bapak M. Yusuf, S.Kom yang telah memberikan arahan mengenai desain yang baik dan benar.

5. Seluruh Dosen Teknik Informatika yang tidak dapat penulis sebutkan satu persatu yang telah memberikan ilmu selama penulis menyelesaikan studi. 6. Seluruh Staff Jurusan TI/SI dan staff Akademik FST yang telah membantu

penulis dalam masa perkuliahan.

7. Bapak Hasan Nursheka dan Ibu Ummy selaku perwakilan dari NICT HRD CENTER yang telah meluangkan waktunya untuk wawancara dan memberikan informasi tentang NICT HRD CENTER

8. Kedua Orang Tuaku, yang selalu mendukung dalam hal moril maupun materil.

9. Dan semua teman-teman satu angkatan 2006 jurusan Teknik Informatika Fakultas Sains dan Teknologi. Khususnya untuk Icheberliyanti, Arif Kunto, dan Indra Pribadi.

Penulis menyadari bahwa makalah ini masih jauh dari kesempurnaan baik bentuk, isi maupun teknik penyajian. Oleh sebab itu, kritikan yang bersifat membangun dari berbagai pihak, penulis terima dengan tangan terbuka serta sangat diharapkankan. Semoga skripsi ini dapat bermanfaat.

Jakarta, Juni 2011

Lembar Persembahan

Ku persembahkan Tugas Akhir ku ini yang mungkin bukan yang terakhir kepada:

Ibuku (Sumiarsih) dan Ayahku (Damardi) yang tercinta dan ku banggakan. Yang tiada henti mendoakan aku, terutama di 1/3 malam tahajudmu, yang tiada jenuh berkorban demiku, memberikan motivasi, semangat, dukungan moril/materi dan tiada henti dan sudah pasti

selalu mencintaiku dan menyayangiku walau dalam amarahmu.

Adik-adikku (Agustian DC. dan M. Fariz D.) yang tersayang walau selalu menguji kesabaranku, terima kasih sudah mau membantu pekerjaan rumah dan selalu menjadi motivasi untuk menjadikanku contoh, walau aku belum bisa menjadi contoh buat kalian,

semoga kalian bisa jadi lebih baik dariku dan menjadi kebanggaan keluarga.

My Soulmate (Syahrizal) Terimakasih atas rasa sayang, perhatian, kesabaran dan tiada henti memotivasiku untuk

terus berusaha untuk masa depan, yang mungkin akan menyatu dengan masa depanmu.. Special thank’s for your VGA & RAM. It’s really help me to finished my final assignment.

The couple of love (Ariyanti Saputri & Dinal Agara Cipta)

Terima kasih buat kalian yang tak pernah bosan sudah meluangkan akhir pekan kalian dan siap dihubungi untuk mengajari, membantu dan memotivasiku dalam penyelesain tugas akhir.

My Friends (Lulu M, Dimas SD, Kartika ISP, Angga S, Ariyanti S) Yang selalu membantu, menemani, semoga tidak bosan mendukung dan menyemangatiku dalam menyelesaikan tugas akhir ini. Semoga hubungan ini tidak hanya sampai kita wisuda.

Zakiyah, thank’s for java script (tiny_mce). It’s really help me to completed my application.

Imam Mudzakir yang telah memberikan referensi tempat studi kasus, walau singkat namun ini berarti bagi penulis.

Boleh jadi kamu membenci sesuatu, padahal ia amat baik bagimu, dan boleh jadi (pula) kamu menyukai sesuatu, padahal ia amat buruk bagimu; Allah mengetahui, sedang kamu tidak

mengetahui. (QS. Al-Baqarah, 2: 216)

Waktu begitu tak bersahabat ketika ku tau bahwa tugas akhir ini, ku selesaikan 1 tahun, tak pernah kurencanakan sebelumnya, tapi mungkin ini rencana-Nya. Aku tak pernah tau apa

yang terjadi sebelum aku mejalaninya dan aku tak akan pernah dapat sebelum aku mengusahakannya. Kemudahan & Hambatan semua itu menyatu dan menjadikanku yakin,

DAFTAR ISI

Halaman

HALAMAN SAMPUL ... i

HALAMAN JUDUL ... ii

LEMBAR PENGESAHAN PEMBIMBING ... iii

LEMBAR PENGESAHAN UJIAN ... iv

LEMBAR PERNYATAAN ... v

ABSTRAK ... vi

KATA PENGANTAR ... vii

LEMBAR PERSEMBAHAN ... ix

DAFTAR ISI ... x

DAFTAR TABEL ... xvi

DAFTAR GAMBAR ... xviii

DAFTAR LAMPIRAN ... xxvi

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 3

1.3 Batasan Masalah ... 3

1.4 Tujuan dan Manfaat Penelitian ... 4

1.5 Metodologi Penelitian ... 5

1.5.1 Metode Pengumpulan Data ... 5

1.6 Sistematika Penulisan ... 7

BAB II LANDASAN TEORI ... 9

2.1 Perngembangan ... 9

2.2 Kiosk informasi ... 9

2.2.1 Sejarah Kiosk Touch Screen ...9

2.2.2 Pengertian Kiosk Informasi ...10

2.2.3 Pedoman Mengenai Kiosk ... 11

2.2.4 Tujuan dan Manfaat Kiosk Informasi ... 12

2.2.5 Jenis-jenis Kiosk ... 14

2.3 Informasi ... 16

2.4 Interaktif ... 16

2.5 3 Dimensi ...17

2.6 Virtual Reality ...17

2.6.1 Manfaat dan Tujuan Virtual Reality ... 17

2.7 Deteksi Tumbukan (Collision Detection) ... 18

2.8 Multimedia ... 24

2.8.1 Pengertian Multimedia ... 24

2.8.2 Komponen-komponen Multimedia ... 25

2.9 Siklus Hidup Pengembangan Sistem (IMSDD) ... 31

2.9.1 Analisis Kebutuhan Sistem (System Requirement).. 32

2.9.2 Pertimbangan Desain (Design Consideration) ... 32

2.9.4 Evaluasi ... 34

2.10 Rekayasa Piranti Lunak ... 34

2.10.1 Definisi Piranti Lunak ... 34

2.10.2 Karakteristik Piranti Lunak ... 35

2.10.3 Aplikasi Piranti Lunak ... 36

2.10.4 Definisi Rekayasa Piranti Lunak ... 38

2.11 Interaksi Manusia dan Komputer ... 39

2.12 STD (State Transition Diagram) ... 41

2.13 Flowchart ...43

2.14 Sistem Basis Data ... 44

2.14.1Pemodelan Data ... 45

2.14.2 Entity Relationship Diagram ...45

2.15 Authoring Tools ...47

2.15.1 Macromedia Flash 8 ... 48

2.15.2 Macromedia Director 11.5 ... 50

2.15.3 3D Studio Max 8 ... 52

2.15.4 Archicad 10 ... 55

2.16 Script Program ... 57

2.16.1 ActionScript 2.0 ... 57

2.16.2 Lingo ... 57

BAB III METODOLOGI PENELITIAN ... 64

3.1 Metode Pengumpulan Data ... 64

3.1.1. Studi Pustaka ... 64

3.1.2. Wawancara ... 64

3.1.3. Observasi ... 65

3.1.4. Kuesioner ... 65

3.2 Metode Pengembangan Sistem ... 66

3.2.1. Tahap Kebutuhan Sistem (System Requirements) ... 68

3.2.1.1. Mendefinisikan Sistem ... 68

3.2.1.2. Kebutuhan dan Profil Pengguna ... 68

3.2.1.3. Pertimbangan Perangkat Keras dan Perangkat Lunak ... 69

3.2.1.4. Pertimbangan Penyebaran Sistem ... 69

3.2.2. Tahap Perancangan (Design Consideration) ... 69

3.2.2.1. Design Metaphor ...70

3.2.2.2. Tipe Informasi ... 70

3.2.2.3. Struktur Navigasi ... 70

3.2.2.4. Masalah Integrasi dan Persiapan Media ... 70

3.2.3.Tahap Implementasi (Implementation) ... 71

3.2.3.1. Prototyping ...71

3.2.3.2. Beta Testing ...71

3.2.4.Tahap Evaluasi (Evaluation) ... 71

3.3.1. Bahan ... 72

3.3.2. Peralatan ... 72

BAB IV HASIL DAN PEMBAHASAN ... 74

4.1 Gambaran Umum Perusahaan ... 74

4.1.1 NICT HRD CENTER ... 74

4.1.2 Tujuan dan Sasaran Proyek NICT HRD CENTER ..75

4.1.3 Fasilitas NICT HRD CENTER ... 76

4.1.4 Sistem Yang Berjalan ... 78

4.2 Analisis dan Hasil Pengumpulan Data ... 78

4.2.1 Studi Pustaka ... 78

4.2.2 Observasi ... 79

4.2.3 Wawancara ... 80

4.2.4 Kuesioner ... 80

4.3 Kebutuhan Sistem ... 91

4.3.1 Mendefinisikan Sistem ... 92

4.3.2 Kebutuhan dan Profil Pengguna ... 93

4.3.3 Pertimbangan Perangkat Keras dan Perangkat Lunak ... 93

4.3.3 Kebutuhan Fungsionalitas ... 95

4.3.4 Pertimbangan Penyebaran Sistem ... 95

4.4 Perancangan ... 97

[image:14.595.118.526.79.476.2]

4.4.2 Tipe Informasi ... 98

4.4.3 Struktur Navigasi ... 99

4.4.4 Persiapan dan Integrasi Media ... 102

4.4.5 Perancangan Flowchart ...106

4.4.6 Perancangan Database ...122

4.4.6.1 Perancangan ERD ... 122

4.4.6.2 Spesifikasi Basis Data ... 126

4.4.8 Perancangan STD (State Transition Diagram) ... 131

4.4.9 Perancangan Layar ... 135

4.5 Implementasi ... 152

4.5.1 Prototyping ... 152

4.5.2 Beta Testing ...181

4.5 Evaluasi ... 185

BAB V KESIMPULAN DAN SARAN ... 195

5.1 Kesimpulan ... 195

5.2 Saran ... 196

DAFTAR TABEL

Halaman

Tabel 2.1 Simbol-simbol Flowchart ...43

Tabel 4.1 Hasil kuesioner awal No. 1... 81

Tabel 4.2 Hasil kuesioner awal No. 2 ... 82

Tabel 4.3 Hasil kuesioner awal No. 3 ... 83

Tabel 4.4 Hasil kuesioner awal No. 4 ... 84

Tabel 4.5 Hasil kuesioner awal No. 5.1 ... 85

Tabel 4.6 Hasil kuesioner awal No. 5.2 ... 86

Tabel 4.7 Hasil kuesioner awal No. 5.3 ... 86

Tabel 4.8 Hasil kuesioner awal No. 5.4 ... 87

Tabel 4.9 Hasil kuesioner awal No. 6 ... 88

Tabel 4.10 Hasil kuesioner awal No. 7 ... 89

Tabel 4.11 Hasil kuesioner awal No. 8 ... 90

Tabel 4.12 Hasil kuesioner awal No. 9 ... 91

Tabel 4.13 Tipe Informasi ... 98

Tabel 4.14 Kontrol Navigasi ... 103

Tabel 4.15 Button-button lainnya ... 104

Tabel 4.16 Matrik Relasi ……… 122

Tabel 4.17 Pemetaan Atribut………... 125

Tabel 4.18 Login ... 127

Tabel 4.19 Lokasi ... 127

[image:17.595.112.524.81.471.2]

Tabel 4.21 Pelatihan ………... 128

Tabel 4.22 peserta_latihan... 129

Tabel 4.23 Jadwal ... 129

Tabel 4.24 Peserta ... 130

Tabel 4.25 Pelatihan ... 130

Tabel 4.26 Beta Testing Kiosk Informasi FrontEnd ... 181

DAFTAR GAMBAR

Halaman

Gambar 2.1 Vector representation………... 19

Gambar 2.2 Planenormal………. 20

Gambar 2.3 Sphere - plane collision ……… 23

Gambar 2.4 Siklus IMSDD ... 34

Gambar 2.5 Notasi State ... 42

Gambar 2.6 Transition State ... 42

Gambar 2.7 Notasi Condition & Action ... 42

Gambar 2.8 Lembar Kerja Macromedia Flash ... 49

Gambar 2.9 Lembar Kerja Adobe Director 11.5 ... 51

Gambar 2.10 Lembar Kerja 3D Max ... 53

Gambar 2.11 Lembar Kerja Archicad 10 ... 55

Gambar 2.12 Tampilan Layar Index Kiosk Senayan City ... 59

Gambar 2.13 Tampilan Layar Produk Aplikasi Front End pada Kiosk Informasi PT Pembangunan Jaya Ancol ... 60

Gambar 2.14 Tampilan Layar Main Menu pada Kiosk Informasi Aneka Infokom Tekindo ... 61

Gambar 2.15 Tampilan Layar Home pada Kiosk Informasi Walikota Jakarta Selatan ... 62

Gambar 2.16 Tampilan Masuk Galeri Seni Budaya Betawi ...63

Gambar 3.1 Siklus IMSDD ... 67

Gambar 4.2 Diagram hasil kuesioner No. 1 ... 81

Gambar 4.3 Diagram hasil kuesioner No. 2 ... 82

Gambar 4.4 Diagram hasil kuesioner No. 3 ...83

Gambar 4.5 Diagram hasil kuesioner No. 4 ... 84

Gambar 4.6 Diagram hasil kuesioner No. 5.1 ... 85

Gambar 4.7 Diagram hasil kuesioner No. 5.2 ... 86

Gambar 4.8 Diagram hasil kuesioner No. 5.3 ... 87

Gambar 4.9 Diagram hasil kuesioner No. 5.4 ... 87

Gambar 4.10 Diagram hasil kuesioner No. 6 ... 88

Gambar 4.11 Diagram hasil kuesioner No. 7 ... 89

Gambar 4.12 Diagram hasil kuesioner No. 8 ... 90

Gambar 4.13 Diagram hasil kuesioner No. 9 ... 91

Gambar 4.14 Tampilan interface Kiosk Informasi Senayan City ... 98

Gambar 4.15 Perancangan Struktur Navigasi FrontEnd ... 99

Gambar 4.16 Perancangan Struktur Navigasi ApliakasiBackEnd ...100

Gambar 4.17 Contoh gambar hasil dari searchingdan downloaddi internet yang digunakan sebagai navigasi ...102

Gambar 4.18 PerancanganFlowchartHalaman ... 106

Gambar 4.19 PerancanganFlowchartMenu Tentang Kami ... 107

Gambar 4.20 PerancanganFlowchartMenu Tur 3 Dimensi ... 107

Gambar 4.21 PerancanganFlowchartMenu Denah ... 108

Gambar 4.22 Perancangan FlowchartMenu Jadwal ... 109

Gambar 4.24 Perancangan FlowchartMenu Cari ... 110

Gambar 4.25 Perancangan FlowchartMenu Berita ... 111

Gambar 4.26 Perancangan FlowchartMenu Bantuan ... 111

Gambar 4.27 Perancangan FlowchartMenu Admin ... 112

Gambar 4.28 Flowcharthalaman Denah Basemen ... 113

Gambar 4.29 Flowcharthalaman Denah Lantai 1 ... 113

Gambar 4.30 Flowcharthalaman Denah Lantai 2 ... 113

Gambar 4.31 Flowcharthalaman Denah Lantai 3 ... 114

Gambar 4.32 Flowcharthalaman Denah Lantai 4 ... 114

Gambar 4.33 Perancangan FlowchartMenu Data Utama ... 114

Gambar 4.34 Perancangan FlowchartMenu Data Olahan ... 115

Gambar 4.35 Perancangan FlowchartSubmenu Ruang ... 116

Gambar 4.36 Perancangan FlowchartSubmenu Pengajar ... 117

Gambar 4.37 Perancangan FlowchartSubmenu Pelatihan ... 118

Gambar 4.38 Perancangan FlowchartSubmenu Peserta ... 119

Gambar 4.39 Perancangan FlowchartSubmenu Berita ...120

Gambar 4.40 Perancangan FlowchartSubmenu Jadwal ... 121

Gambar 4.41 Perancangan Entity Relationship DiagramSementara …… 122

Gambar 4.42 Perancangan Entity Relationship Diagramdengan Primary key………. 123

Gambar 4.44 Perancangan Entity Relationship Diagramdengan

Primary key dan entitas baru ………..…. 123

Gambar 4.45 Perancangan Entity Relationship Diagram………126

Gambar 4.46 Perancangan STD Halaman Utama ... 131

Gambar 4.47 Perancangan STD Halaman Tentang Kami ... 131

Gambar 4.48 Perancangan STD Halaman Tur 3 Dimensi ... 132

Gambar 4.49 Perancangan STD Halaman Denah ... 132

Gambar 4.50 Perancangan STD Halaman Jadwal ... 133

Gambar 4.51 Perancangan STD Halaman Fasilitas ... 133

Gambar 4.52 Perancangan STD Halaman Cari ... 134

Gambar 4.53 Perancangan STD Halaman Berita ... 134

Gambar 4.54 Perancangan STD Halaman Bantuan ... 134

Gambar 4.55 Perancangan STD HalamanAdmin ... 135

Gambar 4.56 Perancangan Halaman Utama Layar FrontEnd ... 135

Gambar 4.57 Perancangan Halaman Tentang Kami ... 136

Gambar 4.58 Perancangan Halaman Tur 3 Dimensi ... 136

Gambar 4.59 Perancangan Halaman Denah ... 137

Gambar 4.60 Perancangan Halaman Submenu Denah ... 137

Gambar 4.61 Perancangan Halaman Submenu Denah ... 138

Gambar 4.62 Perancangan Halaman Jadwal ... 138

Gambar 4.63 Perancangan Halaman Fasilitas ... 139

Gambar 4.64 Perancangan Halaman Cari ... 139

[image:22.595.112.527.82.477.2]

Gambar 4.88 BackgroundHalaman Utama Kiosk Informasi

NICT HRD CENTER ... 153 Gambar 4.89 PembuatanInterfaceHalaman Utama Kiosk Informasi

NICT HRD CENTER ... 153 Gambar 4.90 Denah Ruang Main Building ...154 Gambar 4.91 Pembuatan Denah Ruang Main Building ...155 Gambar 4.92 Pembuatan Denah Ruang Main Buildingpada

Macromedia Flash ... 155 Gambar 4.93 Pengkodean Interface... 156 Gambar 4.94 Pembuatan InterfaceTur 3 Dimensi ... 156 Gambar 4.95 Hasil Scan BluePrint AS BUILT DRAWING ... 157 Gambar 4.96 Pembuatan bangunan 3 dimensi dengan ArchiCAD 10 ... 158 Gambar.4.97 Pemodelan 3 dimensi dengan 3ds Max 8 ... 159 Gambar 4.98 Pembuatan Virtual Reality dengan Adobe Director 11.5 ... 160 Gambar 4.99 Pembuatan animasi 3 dimensi dengan 3ds Max 8 ... 164 Gambar 4.100 Menyatukan tiap Scene animasi 3 dimensi pada

Ulead Video Studio 11 ... 165 Gambar 4.101 Halaman Utama Kiosk Informasi NICT HRD CENTER .... 166 Gambar 4.102 Halaman Menu Tentang Kami Kiosk Informasi

NICT HRD CENTER ... 166 Gambar 4.103 Halaman Menu Tur 3 Dimensi Kiosk Informasi

Gambar 4.104 Halaman Menu Denah Kiosk Informasi NICT HRD

CENTER ... 167 Gambar 4.105 Halaman Menu Jadwal Kiosk Informasi NICT HRD

CENTER ... 168 Gambar 4.106 Halaman Menu Fasilitas Kiosk Informasi NICT HRD

CENTER ... 169 Gambar 4.107 Halaman Menu Cari Kiosk Informasi NICT HRD

CENTER ... 169 Gambar 4.108 Halaman Menu Berita Kiosk Informasi NICT HRD

CENTER ... 170 Gambar 4.109 Halaman Menu Bantuan Kiosk Informasi NICT HRD

[image:24.595.110.520.89.732.2]

Gambar 4.121 Halaman InputData Berita ... 176 Gambar 4.122 Halaman Lihat Data Berita ... 177 Gambar 4.123 Halaman Sub menu Data Olahan ... 177 Gambar 4.124 Halaman InputData Jadwal... 178 Gambar 4.125 Halaman Lihat Data Jadwal ... 178 Gambar 4.126Interfacepada Halaman Tentang Kami ... 186 Gambar 4.127Interfacepada Halaman Fasilitas ... 186 Gambar 4.128Interfacepada Halaman Denah pada submenu

Denah lantai 1 ... 187 Gambar 4.129 Keterangan “Data Tersimpan” Pada Input Data Pengajar ... 188 Gambar 4.130 Keterangan “ Maaf, ID Pengajar Telah Terpakai”

saat input data pengajar, karena menginput ID yang

telah terpakai ... 188 Gambar 4.131 Simulasi proses tindakan pada suatu menu untuk

ke menu lain tanpa proses yang rumit ... 189 Gambar 4.132 Tampilan form pencarian jadwal ... 191 Gambar 4.133 Tampilan hasil pencarian ... 191 Gambar 4.134 Menu denah dengan pilihan submenu menggunakan

DAFTAR LAMPIRAN

Halaman

Lampiran 1. Surat Permohonan Penelitian ... L1 – 1

Lampiran 2. Surat Pernyataan Diterima ... L2 – 1

Lampiran 3. Surat Keterangan Telah Melakukan Penelitian ...L3 - 1

Lampiran 4. SK Dosen Pembimbing ...L4 - 1

Lampiran 5. Hasil Wawancara. ...L5 - 1

Lampiran 6. Kuisioner Tahap Awal ...L6 - 1

Lampiran 7. Kuisioner Evaluasi dan Hasilnya ...L7 - 1

ABSTRAK

Dyah Astari Widyaningsih-106091002923, Pengembangan Kiosk Informasi Interaktif Berbasis 3 Dimensi di NICT HRD CENTER, dibimbing oleh Bapak Dr. Eko Syamsuddin M. Eng.dan Bapak Yusuf Durrachman M.Sc., MIT.

Pemerintah Republik Korea dan Pemerintah Indonesia mengadakan kerjasama pengembangan Sumber Daya Manusia di bidang Teknologi Informasi Komunikasi (TIK). Maka dilaksanakan Pembangunan Proyek National ICT Human Resource Development

(NICT HRD). Pengelolaan Proyek NICT HRD, adalah kerja sama antara Departemen Komunikasi dan Informasi bersama dengan Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta. Tujuan NICT HRD atau biasa disebut PUSTIKNAS (Pusat Teknologi Informasi dan Komunikasi Nasional) adalah sebagai pusat pelatihan teknologi informasi yang dibangun oleh pemerintah guna menjawab tantangan globalisasi maupun kesenjangan digital. Gedung NICT HRD memiliki banyak ruangan, sehingga dalam hal penginformasian tata letak ruangan membutuhkan media yang menunjang, begitu pula dalam penginformasian jadwal pelatihan. Media yang tepat untuk menunjang penyampaian informasi tersebut adalah kiosk informasi, karena memiliki kapasitas yang cukup besar sesuai dengan hardisk

didalamnya dan kiosk informasi adalah perkembangan teknologi informasi yang baru. Pembuatan kiosk informasi ini menggunakan metode pengumpulan data dan pengembangan sistem. Metode pengumpulan data terdiri dari studi pustaka, wawancara, observasi dan kuesioner. Sedangkan metode pengembangan sistem menggunakan Siklus Hidup Pengembangan Sistem Interactive Multimedia System Design and Development (IMSDD) yang mempunyai 4 tahapan, diantaranya adalah System Requirement, Design Consideration, Implementation dan Evaluation. Berdasarkan hasil evaluasi, skiosk informasi membantu dalam penginformasian jadwal pelatihan dan informasi tata letak ruangan. Kiosk informasi NICT HRD ini masih memerlukan peningkatan dan perkembangan yang lebih baik , yakni agar bisa meng-upload data dengan file type doc, xls, docx, xlsx, dan pergantian bahasa secara otomatis agar memudahkan adminsaat memasukkan data berita.

Kata kunci: kiosk informasi, IMSDD, multimedia, virtual reality, 3 dimensi.

Jumlah Halaman : V Bab + 194 Halaman + xxvi Halaman + 153 Gambar + 28 Tabel + Daftar Pustaka + Lampiran.

DAFTAR ISI

Halaman HALAMAN SAMPUL ... i HALAMAN JUDUL ... ii LEMBAR PENGESAHAN PEMBIMBING ... iii LEMBAR PENGESAHAN UJIAN ... iv LEMBAR PERNYATAAN ... v ABSTRAK ... vi KATA PENGANTAR ... vii LEMBAR PERSEMBAHAN ... ix DAFTAR ISI ... x DAFTAR TABEL ... xvi DAFTAR GAMBAR ... xviii DAFTAR LAMPIRAN ... xxvi

1.6 Sistematika Penulisan ... 7

BAB III METODOLOGI PENELITIAN ... 64 3.1 Metode Pengumpulan Data ... 64 3.1.1. Studi Pustaka ... 64 3.1.2. Wawancara ... 64 3.1.3. Observasi ... 65 3.1.4. Kuesioner ... 65 3.2 Metode Pengembangan Sistem ... 66 3.2.1. Tahap Kebutuhan Sistem (System Requirements) ... 68 3.2.1.1. Mendefinisikan Sistem ... 68 3.2.1.2. Kebutuhan dan Profil Pengguna ... 68 3.2.1.3. Pertimbangan Perangkat Keras dan

3.3.1. Bahan ... 72 3.3.2. Peralatan ... 72

BAB IV HASIL DAN PEMBAHASAN ... 74 4.1 Gambaran Umum Perusahaan ... 74 4.1.1 NICT HRD CENTER ... 74 4.1.2 Tujuan dan Sasaran Proyek NICT HRD CENTER ..75 4.1.3 Fasilitas NICT HRD CENTER ... 76 4.1.4 Sistem Yang Berjalan ... 78 4.2 Analisis dan Hasil Pengumpulan Data ... 78 4.2.1 Studi Pustaka ... 78 4.2.2 Observasi ... 79 4.2.3 Wawancara ... 80 4.2.4 Kuesioner ... 80 4.3 Kebutuhan Sistem ... 91 4.3.1 Mendefinisikan Sistem ... 92 4.3.2 Kebutuhan dan Profil Pengguna ... 93 4.3.3 Pertimbangan Perangkat Keras dan

[image:32.595.118.526.79.476.2]

4.4.2 Tipe Informasi ... 98 4.4.3 Struktur Navigasi ... 99 4.4.4 Persiapan dan Integrasi Media ... 102 4.4.5 Perancangan Flowchart ...106 4.4.6 Perancangan Database ...122 4.4.6.1 Perancangan ERD ... 122 4.4.6.2 Spesifikasi Basis Data ... 126 4.4.8 Perancangan STD (State Transition Diagram) ... 131 4.4.9 Perancangan Layar ... 135 4.5 Implementasi ... 152 4.5.1 Prototyping ... 152 4.5.2 Beta Testing ...181 4.5 Evaluasi ... 185

DAFTAR GAMBAR

[image:34.595.115.524.80.491.2]

Halaman Gambar 2.1 Vector representation………... 19

Gambar 2.2 Planenormal………. 20

Gambar 2.3 Sphere - plane collision ……… 23 Gambar 2.4 Siklus IMSDD ... 34 Gambar 2.5 Notasi State ... 42 Gambar 2.6 Transition State ... 42 Gambar 2.7 Notasi Condition & Action ... 42 Gambar 2.8 Lembar Kerja Macromedia Flash ... 49 Gambar 2.9 Lembar Kerja Adobe Director 11.5 ... 51 Gambar 2.10 Lembar Kerja 3D Max ... 53 Gambar 2.11 Lembar Kerja Archicad 10 ... 55 Gambar 2.12 Tampilan Layar Index Kiosk Senayan City ... 59 Gambar 2.13 Tampilan Layar Produk Aplikasi Front End

pada Kiosk Informasi PT Pembangunan Jaya Ancol ... 60 Gambar 2.14 Tampilan Layar Main Menu pada Kiosk Informasi

Aneka Infokom Tekindo ... 61 Gambar 2.15 Tampilan Layar Home pada Kiosk Informasi

[image:35.595.112.523.87.533.2]

Gambar 4.2 Diagram hasil kuesioner No. 1 ... 81 Gambar 4.3 Diagram hasil kuesioner No. 2 ... 82 Gambar 4.4 Diagram hasil kuesioner No. 3 ...83 Gambar 4.5 Diagram hasil kuesioner No. 4 ... 84 Gambar 4.6 Diagram hasil kuesioner No. 5.1 ... 85 Gambar 4.7 Diagram hasil kuesioner No. 5.2 ... 86 Gambar 4.8 Diagram hasil kuesioner No. 5.3 ... 87 Gambar 4.9 Diagram hasil kuesioner No. 5.4 ... 87 Gambar 4.10 Diagram hasil kuesioner No. 6 ... 88 Gambar 4.11 Diagram hasil kuesioner No. 7 ... 89 Gambar 4.12 Diagram hasil kuesioner No. 8 ... 90 Gambar 4.13 Diagram hasil kuesioner No. 9 ... 91 Gambar 4.14 Tampilan interface Kiosk Informasi Senayan City ... 98 Gambar 4.15 Perancangan Struktur Navigasi FrontEnd ... 99 Gambar 4.16 Perancangan Struktur Navigasi ApliakasiBackEnd ...100 Gambar 4.17 Contoh gambar hasil dari searchingdan downloaddi internet

[image:36.595.114.526.82.467.2]

Gambar 4.24 Perancangan FlowchartMenu Cari ... 110 Gambar 4.25 Perancangan FlowchartMenu Berita ... 111 Gambar 4.26 Perancangan FlowchartMenu Bantuan ... 111 Gambar 4.27 Perancangan FlowchartMenu Admin ... 112 Gambar 4.28 Flowcharthalaman Denah Basemen ... 113 Gambar 4.29 Flowcharthalaman Denah Lantai 1 ... 113 Gambar 4.30 Flowcharthalaman Denah Lantai 2 ... 113 Gambar 4.31 Flowcharthalaman Denah Lantai 3 ... 114 Gambar 4.32 Flowcharthalaman Denah Lantai 4 ... 114 Gambar 4.33 Perancangan FlowchartMenu Data Utama ... 114 Gambar 4.34 Perancangan FlowchartMenu Data Olahan ... 115 Gambar 4.35 Perancangan FlowchartSubmenu Ruang ... 116 Gambar 4.36 Perancangan FlowchartSubmenu Pengajar ... 117 Gambar 4.37 Perancangan FlowchartSubmenu Pelatihan ... 118 Gambar 4.38 Perancangan FlowchartSubmenu Peserta ... 119 Gambar 4.39 Perancangan FlowchartSubmenu Berita ...120 Gambar 4.40 Perancangan FlowchartSubmenu Jadwal ... 121 Gambar 4.41 Perancangan Entity Relationship DiagramSementara …… 122 Gambar 4.42 Perancangan Entity Relationship Diagramdengan Primary

key………. 123

Gambar 4.43 Perancangan Entity Relationship Diagramdengan

[image:37.595.112.527.83.476.2]

Gambar 4.44 Perancangan Entity Relationship Diagramdengan

Primary key dan entitas baru ………..…. 123

[image:38.595.112.527.82.477.2]

[image:39.595.114.526.87.467.2]

Gambar 4.88 BackgroundHalaman Utama Kiosk Informasi

NICT HRD CENTER ... 153 Gambar 4.89 PembuatanInterfaceHalaman Utama Kiosk Informasi

NICT HRD CENTER ... 153 Gambar 4.90 Denah Ruang Main Building ...154 Gambar 4.91 Pembuatan Denah Ruang Main Building ...155 Gambar 4.92 Pembuatan Denah Ruang Main Building pada

Macromedia Flash ... 155 Gambar 4.93 Pengkodean Interface... 156 Gambar 4.94 Pembuatan InterfaceTur 3 Dimensi ... 156 Gambar 4.95 Hasil Scan BluePrint AS BUILT DRAWING ... 157 Gambar 4.96 Pembuatan bangunan 3 dimensi dengan ArchiCAD 10 ... 158 Gambar.4.97 Pemodelan 3 dimensi dengan 3ds Max 8 ... 159 Gambar 4.98 Pembuatan Virtual Reality dengan Adobe Director 11.5 ... 160 Gambar 4.99 Pembuatan animasi 3 dimensi dengan 3ds Max 8 ... 164 Gambar 4.100 Menyatukan tiap Scene animasi 3 dimensi pada

Ulead Video Studio 11 ... 165 Gambar 4.101 Halaman Utama Kiosk Informasi NICT HRD CENTER .... 166 Gambar 4.102 Halaman Menu Tentang Kami Kiosk Informasi

NICT HRD CENTER ... 166 Gambar 4.103 Halaman Menu Tur 3 Dimensi Kiosk Informasi

Gambar 4.104 Halaman Menu Denah Kiosk Informasi NICT HRD

CENTER ... 167 Gambar 4.105 Halaman Menu Jadwal Kiosk Informasi NICT HRD

CENTER ... 168 Gambar 4.106 Halaman Menu Fasilitas Kiosk Informasi NICT HRD

CENTER ... 169 Gambar 4.107 Halaman Menu Cari Kiosk Informasi NICT HRD

CENTER ... 169 Gambar 4.108 Halaman Menu Berita Kiosk Informasi NICT HRD

CENTER ... 170 Gambar 4.109 Halaman Menu Bantuan Kiosk Informasi NICT HRD

[image:40.595.110.520.90.728.2]

[image:41.595.114.522.79.459.2]

Gambar 4.121 Halaman InputData Berita ... 176 Gambar 4.122 Halaman Lihat Data Berita ... 177 Gambar 4.123 Halaman Sub menu Data Olahan ... 177 Gambar 4.124 Halaman InputData Jadwal... 178 Gambar 4.125 Halaman Lihat Data Jadwal ... 178 Gambar 4.126Interfacepada Halaman Tentang Kami ... 186 Gambar 4.127Interfacepada Halaman Fasilitas ... 186 Gambar 4.128Interfacepada Halaman Denah pada submenu

Denah lantai 1 ... 187 Gambar 4.129 Keterangan “Data Tersimpan” Pada Input Data Pengajar ... 188 Gambar 4.130 Keterangan “ Maaf, ID Pengajar Telah Terpakai”

saat input data pengajar, karena menginput ID yang

telah terpakai ... 188 Gambar 4.131 Simulasi proses tindakan pada suatu menu untuk

ke menu lain tanpa proses yang rumit ... 189 Gambar 4.132 Tampilan form pencarian jadwal ... 191 Gambar 4.133 Tampilan hasil pencarian ... 191 Gambar 4.134 Menu denah dengan pilihan submenu menggunakan

DAFTAR LAMPIRAN

Halaman

Lampiran 1. Surat Permohonan Penelitian ... L1 – 1

Lampiran 2. Surat Pernyataan Diterima ... L2 – 1

Lampiran 3. Surat Keterangan Telah Melakukan Penelitian ...L3 - 1

Lampiran 4. SK Dosen Pembimbing ...L4 - 1

Lampiran 5. Hasil Wawancara. ...L5 - 1

Lampiran 6. Kuisioner Tahap Awal ...L6 - 1

Lampiran 7. Kuisioner Evaluasi dan Hasilnya ...L7 - 1

DAFTAR TABEL

[image:43.595.115.521.81.710.2] [image:43.595.112.509.108.755.2]

Halaman Tabel 2.1 Simbol-simbol Flowchart ...43 Tabel 4.1 Hasil kuesioner awal No. 1... 81 Tabel 4.2 Hasil kuesioner awal No. 2 ... 82 Tabel 4.3 Hasil kuesioner awal No. 3 ... 83 Tabel 4.4 Hasil kuesioner awal No. 4 ... 84 Tabel 4.5 Hasil kuesioner awal No. 5.1 ... 85 Tabel 4.6 Hasil kuesioner awal No. 5.2 ... 86 Tabel 4.7 Hasil kuesioner awal No. 5.3 ... 86 Tabel 4.8 Hasil kuesioner awal No. 5.4 ... 87 Tabel 4.9 Hasil kuesioner awal No. 6 ... 88 Tabel 4.10 Hasil kuesioner awal No. 7 ... 89 Tabel 4.11 Hasil kuesioner awal No. 8 ... 90 Tabel 4.12 Hasil kuesioner awal No. 9 ... 91 Tabel 4.13 Tipe Informasi ... 98 Tabel 4.14 Kontrol Navigasi ... 103 Tabel 4.15 Button-button lainnya ... 104

Tabel 4.16 Matrik Relasi ……… 122

Tabel 4.17 Pemetaan Atribut………... 125

[image:44.595.112.524.81.471.2]

DAFTAR PUSTAKA

Administrator. 2007. Apakah Multimedia Kiosk?. [Online] Tersedia:

http://www.touchme-mediasolution.com/FAQ2.html. [12 Juni 2010, 20:28 WIB] Administrator. 2009. Sejarah Kiosk Informasi Touch Screen. [Online] Tersedia:

http://www.trukiosk.net/articles/sejarah-kiosk.html.[12 Juni 2010, 20:19 WIB] Administrator. 2010. Information Kiosk Systems. [Online] Tersedia:

http://www.touchscreens.com/products-kiosk.html. [17 Juni 2010, 15:28 WIB] Anharku. 2009. Flowchart. [Online] Tersedia:

http://ilmukomputer.org/wp-content/uploads/2009/06/anharku-flowchart.pdf.[15 Juni 2010, 23:46 WIB] Chandra, Handi. 2007. 7 jam belajar Interaktif ArchiCAD 10 Untuk Orang Awam.

Maxikom.

Chandra.2005. Lingo director MX 2004 untuk Orang Awam. Maxikom. Palembang. Dastbaz, Mohammad. 2003. Designing Interactive Multimedia Systems, International

Edition. The McGraw-Hill. Singapore

Ericson, C. 2005. Real-time collision detection. Elsevier.

Hakim, Lukmanul.2004. Cara Ampuh Menguasai Macromedia Flash MX 2004. PT. Elex Media Komputindo Kelompok Gramedia. Jakarta.

Hofstetter, Fred.2001.Multimedia Literacy, Third edition. McGraw-Hill, Inc. New Jounghyoun, Gerard. 2005. Designing Virtual Reality Systems: The Structured

Approach. Springer :London

Koetaradja. 2009. Mengenal Jenis Kiosk. [Online] Tersedia:

198

Long, L. Dan Long,N.2000.Computers, 7thEdition.Prentice Hall, Upper. Saddle River. Pressman, R.S. 2002. Rekayasa Perangkat Lunak Pendekatan Praktisi. Yogyakarta:

Penerbit Andi.

Ramadhan,A. M, Taufik dan Panji B.Y.2005. 36 Jam Belajar Komputer 3D studio Max 7. Elex media Komputindo. Jakarta.

Sastra M., Suparno.2007. Simulasi Komputer Grafis Arsitektur. Penerbit andi. Yogyakarta.

Senjaya, Rudi. 2008. Persfektif Penerapan Penelitian Dan Pengembangan (Litbang)

Dalam Penyelenggaraan Pemerintahan Daerah. [Online] Tersedia:

http://bapedakabtasik.wordpress.com/2008/05/05/persfektif-penerapan-

penelitian-dan-pengembangan-litbang-dalam-penyelenggaraan-pemerintahan-daerah/. [5 Juni 2011, 23:29 WIB]

Shneiderman, Ben. 1998. Designing The User Interface, Third Edition. Addin Wesley Longman Inc, USA.

Simarmata, J. & Paryudi, I. 2006. Basis Data. Penerbit Andi. Yogyakarta.

Suyanto, M.2003. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing.

Penerbit Andi. Yogyakarta

Vaughan, Tay.2004. Multimedia : Making it Work. 6th Edition. The McGraw-Hill. Singapura.

Whitten, J.L., Bentley, L.D. and Dittman, K.C. 2004. System Analysis and Design Method , 6th Edition. Mc Graw Hill, Inc. New York

r'

F H FA}R'{' H lV,gE]

N

A

G.EMA

uP{xvERSgThS {sn

AI\{

NEGtrR.{ ({J{N) S VA["d{ ET Fg T& AYAT'U{, T, AE{ .TAKART'A

F'AKULX]AS SATNS &AN TN,KNOg-OGI

Jl. Ir. H. Juanda No. 95 Ciputat 15412 Indonesia

Teip.:(62-21) 7 493 606,1 493 547 F ax.I.62_21) 7 4933 1 5

Dyah Astri Widyaningsih

106091 002923

Teknik Informatika / VIII (Delapan)

2009t20t0

s-1

Jl. _{Raya Ciracas RT.003/05 No.40}

Jakarta Timur 1374A

azt-95182781

a.n.Dekan,

Email :uinjkt@cabi.net.id

Jakafia,'29 April2010

rangka penyelesaian _tugas

g Akademik Nomor

Larnpiran Hal

:

Un.0liF9lTLlA\larsi

l2}n

:

Izin Penelitian di Gedung NICT - HRD Kepada Yth.

Pejabat Pemtruat _{Kornitmen proyek NICT - HRD} Di

.T'empat

Assalcunualaikum t{tt.. Wb

Dengan irormat karni sampaikan bahwa dalam mahasiswa kami berikut ini :

sklipsi

Nama

NIM

Jurusan/Seinestet' Tahun Akademik

Plograrn

Alamat

Telp

bermaksud ureialiukan peneiitian dengan judul _{: Perancangan Aplikasi Klosk Interaktif}

Berbasis 3D (studi l{astis : Gedung NrcT), di instansi yurri eupuvlbu pimpin.

oleh karena itu kami mohon kesecliaan Bapak/Ibu untuk mener-ima mahasiswa

karni dan memberikan infonnasi secukupnya.

Derr:ikiau atas pelhatian cian _{kesediaan Bapai</Ibu kami ucapkan teri*a kasih.}

Wa s s al anul' al oiku m Wr. Ltrh

'' D.r,',Ag,_ris' Salim,M, S i

KEMENTERIAN KOMUNIKASI DAN INFORMATIKA

BADAN PENELITIAN DAN PENGEMBANGAN

SDM

BALAT PELATTHAN

DAN

RISET

TIK (BPRTIK)

KOMINFO _{Jl. Kertamukti No. 3 Ciputat, Tangerang 15412Telpon/Faks Q21-7491801174700968}

SURAT KETERANGAN

Yang bertandatangandi bawah ini, menerangkan bahwa:

Nama

NIM

Fakultas/Pro gram Studi

: Dyah Astari Widyaningsih :106091002923

: Sains dan Teknologi/Teknik Informatika

Telah selesai melaksanakan kegiatan penelitian

di

Balai Pelatihan dan Riset Teknologi Informasi dan Komunikasi (BPRTIK) dalam rangka penyelesaian tugas skripsi.

Kegiatan penelitian tersebut telah dilaksanakan selama 13 (tiga belas) bulan, terhitung sejak bulan April 2010 sampai dengan bulan Mei 2011.

Demikian surat keterangan ini dibuat untuk memenuhi persyaratan akademik.

Jakarta,22 Juni20Tl

u4"

: Muh Hasan Nurshekha : Staf BPRTIK

6ffi

t

fi-it _"ov .:"".1'7,

x di:,.p'',

;,r,r

a $"iifl. ,,;,r*

P&tffi

DEPARTEMEN

AGAMA

UNIVERSITAS

ISLAM NEGERI

(UIN)

SYARIF

HIDAYATULLAH JAKARTA

F'AKULTAS SAINS DAN TEKNOLOGI

Jl. Ir. H. Juanda No. 95 Ciputat 15412 Indonesia

Telp:(62-21) 7 493606,7 493547 F ax.:(62-21) 7 4933 | 5

Email :uinjkt@cabi.net.id

Website : http:/www.fst.uinjkt.ac.id

Nomor : Un..0 liF9lT

L.O}fryz(lr}

Lamp :1(SatuBerkas)

Hal

:Bimbingan Skripsi

KepadaYlh Sdr

1. Eko Syamsuddin. H, Dr, M.Sc

2. Yusuf Durachman, MIT

Dosen Pembimbing Skripsi

Assalamu'alaikum Wr. Wb.

Dengan

ini

diharapkan kesediaan Saudara untuk menjadi pembimbing IlIU

(Materi/Teknis)* penulisan skripsi mahasiswa :

Nama

: Dyah Astari Widyaningsih

NIM

:106091002923 Program Studi : Teknik Informatika

Judul Skripsi :"Perancangan Aplikasi Kios Interaktif Berbasis 3 Dimensi (Studi Kasus:Margo City Depok)"

Judul tersebut telah disetujui oleh program studi yang bersangkutan pada tanggal

22 April2010 dengan outline, abstraksi dan daftar pustaka terlainpir. Bimbingan skripsi

ini diharapkan selesai dalam waktu 6 (enam) bulan setelah dikenakannya surat penunjukan pembimbing skripsi ini.

Apabila terjadi perubahan terkait dengan skripsi tersebut selama proses

pembimbingan _{, harap} segera melaporkan kepada program studi yang bersangkutan

Demikian atas kesediaan saudara kami ucapkan terima kasih.

Wassalamu'alaikum Wr. Wb.

1003v

Tembusan :

1. Dekan (sebagai laporan)

2. Ketua Program Studi

3. Mahasiswa yang bersangkutan * coret yang tidak perlu

Jakarta, 10 Mei 2010

a.n.Dekan,

203

Waktu : 12 Juli 2010

Nama Responden : Hasan Nursheka

Jabatan : Staf Project Management Unit

Tempat : NICT HRD CENTER, Jln. Kertamukti Cireundeu, Ciputat

Pertanyaan :

1. Apa tujuan dibangunnya NICT HRD CENTER?

2. Menurut Bapak, media apa yang dibutuhkan untuk menyampaikan informasi kepada para pengunjung NICT HRD CENTER?

3. Apakah pada kiosk informasi yang ada di NICT HRD sudah ada sistem yang berjalan?

4. Informasi apa saja yang dibutuhkan para pengunjung, saat berada di NICT HRD CENTER?

Jawaban:

1. Tujuannya dibangun NICT HRD CENTER adalah Meningkatkan kualitas sarana dan prasarana pengembangan sumber daya manusia teknologi informasi dan komunikasi serta meningkatkan kesejahteraan dan pemberdayaan masyarakat penggunaan teknologi informasi dan komunikasi.

204

yang akan diinformasikan sehingga membutuhkan media yang mempunyai kapasitas penyimpanan cukup banyak dan dapat diperbaharui, maka sudah pantaslah pemakaian kiosk informasi pada NICT HRD CENTER.

3. Kiosk informasi yang ada pada NICT HRD CENTER saat ini memang belum ada aplikasinya. Namun sudah ada perencanaan mengenai hal tersebut.

205

KUESIONER

Kuesioner ini bertujuan untuk memperoleh data dalam penulisan skripsi dengan judul “Perancangan Kiosk Informasi Interaktif Berbasis 3 Dimensi (Studi Kasus: NICT-HRD)” Atas Kesediaan Bapak/Ibu/Saudara/i untuk mengisi kuesioner ini, saya ucapkan Terima Kasih.

Kuesioner No. :

Petunjuk : Berilah tanda silang (X) pada jawaban yang Anda Pilih dan Lengkapilah data dibawah ini!

Identitas Responden

1. Nama : (boleh tidak diisi)

2. Alamat: (boleh tidak diisi)

3. Jenis Kelamin:

a. Pria b. Wanita 4. Usia:

a. ≤ 18 tahun b. 19 – 25 tahun c. 26 – 35 tahun d. 36 – 45 tahun e. ≥46 tahun 5. Jenis Pekerjaan:

a. Pelajar – Mahasiswa b. Dosen/Guru

c. Pegawai Negeri Non Dosen/Non Guru d. Pegawai Swasta Non Dosen/Non Guru e. Lainnya ... .

6. Pernahkah Anda menggunakan Kiosk Informasi ?

a. Ya b. Tidak

*Jika “Ya” lanjut ke no. 7 & 8, Selanjutnya. Jika “Tidak” lanjut ke lampiran ke-2.

7. Dimana Anda menggunakan Kiosk Informasi ?

206

Petunjuk : Berilah tanda silang (X) pada jawaban yang Anda Pilih

1. Saat ini perkembangan teknologi cukup cepat, begitu pula kebutuhan akan informasi yang kita butuhkan semakin banyak dan menginginkan mendapatknya dengan mudah.

Sehingga jenis media informasi seperti apa yang anda inginkan jika anda berada di suatu tempat umum?

a. Map Directory: biasanya berupa informasi peta suatu lokasi beserta keterangannya.

b. Papan Informasi: media informasi secara sederhana yang ditaruh di sebuah papan.

c. Kiosk Informasi: media informasi yang disajikan secara komputerisasi

2. Apakah Anda mengetahui NICT-HRD dan pernah datang kesana?

a. Tahu tapi tidak pernah datang b. Tidak Tahu dan tidak pernah datang c. Tahu dan pernah datang.

*Jika jawaban “C” lanjut ke no. 3 Jika jawaban “A atau B” langsung lanjut ke no. 4.

3. Jika Anda Pernah mengunjungi NICT-HRD, Berapa kali Anda mengunjungi NICT-HRD ?

a. Sekali b. 2-5 kali c. > 5 kali

4. NICT-HRD sebagai pusat pelatihan teknologi informasi yang dibangun oleh pemerintah guna menjawab tantangan globalisasi maupun kesenjangan digital (digital divide) yang terjadi di

207

Sehingga menurut Anda, media informasi seperti apa yang dibutuhkan di dalam Gedung NICT-HRD?

a. Map Directory b. Papan Informasi c. Kiosk Informasi

5. Dengan penjelasan No. 4 diatas, kita mengetahui bahwa NICT-HRD adalah difungsikan sebagai wadah pelatihan untuk memajukan teknologi informasi. Sehingga informasi yang ada didalam NICT-HRD pun harus memenuhi kebutuhan teknologi informasi saat ini. Sehingga menurut Anda, apa yang Anda butuhkan jika Anda berada di NICT-HRD atau sebagai Peserta Pelatihan di NICT-HRD ?

 Letak Ruangan

a. Sangat dibutuhkan b. Dibutuhkan c. Kurang dibutuhkan d. Tidak dibutuhkan  Fungsi Ruangan

a. Sangat dibutuhkan b. Dibutuhkan c. Kurang dibutuhkan d. Tidak dibutuhkan  Jadwal Pelatihan

a. Sangat dibutuhkan b. Dibutuhkan c. Kurang dibutuhkan d. Tidak dibutuhkan  Fasilitas Umum

a. Sangat dibutuhkan b. Dibutuhkan c. Kurang dibutuhkan d. Tidak dibutuhkan 6. Adakah informasi lain yang Anda butuhkan selain informasi diatas, jika ada informasi lain,

informasi apa yang anda butuhkan ... .

7. Jika informasi dalam NICT-HRD tersedia dalam bentuk Kiosk Informasi, bagaimana bentuk informasi yang baik menurut Anda?

*Urutkanlah yang menurut Anda lebih diutamakan!

a. Mudah digunakan c. Memiliki penampilan yang menarik b. Ada sistem pencarian yang cepat dan mudah d. Memiliki informasi lengkap

1. (...) 2. (...) 3. (...) 4. (...)

8. Apakah Virtual Reality diperlukan dalam menyajikan informasi dalam Kiosk Informasi ?

a. Sangat Perlu b. Perlu c. Biasa saja d. Tidak Perlu

9. Apakah menurut Anda Kiosk Informasi di NICT-HRD diperlukan ?

a. Sangat Perlu b. Perlu c. Biasa saja d. Tidak Perlu

208

KUESIONER EVALUASI

Perancangan Kiosk Informasi Interaktif Berbasis 3 Dimensi (Studi Kasus: NICT HRD)

Untuk Kebutuhan Skripsi Pada Universitas Islam Negeri Syarif Hidayatullah Jakarta

Petunjuk : Berilah tanda silang (X) pada jawaban yang Anda Pilih dan Lengkapilah data dibawah ini!

Identitas Responden

1. Nama : (boleh tidak diisi)

2. Alamat: (boleh tidak diisi)

3. Jenis Kelamin:

a. Pria b. Wanita 4. Usia:

a. ≤ 18 tahun b. 19 – 25 tahun c. 26 – 35 tahun d. 36 – 45 tahun e. ≥46 tahun 5. Jenis Pekerjaan:

a. Pelajar – Mahasiswa b. Dosen/Guru

c. Pegawai Negeri Non Dosen/Non Guru d. Pegawai Swasta Non Dosen/Non Guru e. Lainnya ... .

Berilah tanda silang (x) pada jawaban yang disediakan!

1. Bagaimana pendapat Anda tentang Kiosk Informasi Interaktif Berbasis 3 Dimensi ini? a. Sangat menarik c. Kurang menarik

b. Cukup menarik d. Tidak menarik 2. Apa yang membuat Anda tertarik pada aplikasi ini?

a. Animasi

b. Tur 3 Dimensi(Virtual Tour)

c. Interfaceaplikasi

209

3. Apakah tampilan menu dari Kiosk Informasi ini bersifat menarik? a. Sangat menarik c. Kurang menarik

b. Cukup menarik d. Tidak menarik

4. Apakah tulisan dan gambar yang terdapat pada Kiosk Informasi terlihat jelas? a. Sangat jelas c. Kurang jelas

b. Cukup jelas d. Sangat tidak jelas 5. Apakah aplikasi ini mudah digunakan (User Friendly)?

a. Sangat mudah c. Cukup sulit b. Cukup mudah d. Sangat sulit

6. Apakah informasi yang disediakan oleh aplikasi ini sudah jelas? a. Sangat jelas c. Kurang jelas

b. Cukup jelas d. Sangat tidak jelas

7. Apakah aplikasi ini dapat membantu peserta pelatihan dan pengunjung dalam ruangan yang terdapat di dalam Main Building NICT-HRD?

a. Sangat membantu c. Kurang membantu

b. Cukup membantu d. Tidak membantu

8. Untuk pengembangan berikutnya, manakah yang menurut Anda perlu diperbaiki atau ditambahkan dalam Kiosk Informasi ini?

a. Penambahan efek animasi c. Penambahan 3D

b. Penambahan audio d. Penambahan video

Jakarta, ...2011

210

HASIL KUESIONER EVALUASI

Lokasi Penyebaran : NICT HRD CENTER Hari, Tanggal : Kamis, 26 Mei 2011

1. Bagaimana pendapat Anda tentang Kiosk Informasi Interaktif Berbasis 3 Dimensi ini?

Jawaban Jumlah

(orang)

Persentase (%)

a. Sangat menarik 17 57%

b. Cukup menarik 13 43%

c. Kurang menarik 0 0%

d. Tidak menarik 0 0%

TOTAL Responden 30 100%

2. Apa yang membuat Anda tertarik pada aplikasi ini?

Jawaban Jumlah

(orang)

Persentase (%)

a. Animasi 10 33,3%

b. Tur 3 Dimensi

(Virtual Tour) 15 50%

c. Interfaceaplikasi 2 6,7%

d. Sistem pencarian

Jadwal Pelatihan 3 10%

TOTAL Responden 30 100%

3. Apakah tampilan menu dari Kiosk Informasi ini bersifat menarik?

Jawaban Jumlah

(orang)

Persentase (%)

a. Sangat menarik 15 50%

b. Cukup menarik 14 46,7%

c. Kurang menarik 0 0%

d. Tidak menarik 1 33,3%

TOTAL Responden 30 100%

57% 43%

0% 0%

Diagram No. 1

Sangat Menarik Cukup Menarik 38% 57% 2% 3%

Diagram No. 2

Animasi

Tur 3 Dimensi (Virtual Reality)

Interface aplikasi

Sistem pencarian jadwal pelatihan

Diagram No. 3

Sangat Menarik

Cukup Menarik

Kurang Menarik

Tidak Menarik

211

4. Apakah tulisan dan gambar yang terdapat pada Kiosk Informasi terlihat jelas?

Jawaban Jumlah

(orang)

Persentase (%)

a. Sangat jelas 12 40%

b. Cukup jelas 16 53,3%

c. Kurang jelas 2 6,7%

d. Sangat tidak jelas 0 0%

TOTAL Responden 30 100%

5. Apakah aplikasi ini mudah digunakan (User

Friendly)?

Jawaban Jumlah

(orang)

Persentase (%)

a. Sangat mudah 16 53,3%

b. Cukup mudah 14 46,7%

c. Cukup sulit 0 0%

d. Sangat sullit 0 0%

TOTAL Responden 30 100%

6. Apakah informasi yang disediakan oleh aplikasi ini sudah jelas?

Jawaban Jumlah

(orang)

Persentase (%)

a. Sangat jelas 14 46,7%

b. Cukup jelas 16 53,3%

c. Kurang jelas 0 0%

d. Sangat tidak jelas 0 0%

TOTAL Responden 30 100%

40%

53% 7% 0%

Diagram No. 4

Sangat jelas

Cukup jelas

Kurang jelas

Sangat tidak jelas

53% 47%

0%_0%

Diagram No. 5

Sangat Mudah Cukup Mudah Cukup Sulit Sangat Sulit 47% 53% 0% 0%

Diagram No. 6

Sangat jelas

Cukup jelas

212

7. Apakah aplikasi ini dapat membantu peserta pelatihan dan pengunjung dalam ruangan yang terdapat di dalam Main Building NICT-HRD?

Jawaban Jumlah

(orang)

Persentase (%)

a. Sangat membantu 17 56,7%

b. Cukup membantu 13 43,3%

c. Kurang membantu 0 0%

d. Tidak membantu 0 0%

TOTAL Responden 30 100%

8. Untuk pengembangan berikutnya, manakah yang menurut Anda perlu diperbaiki atau ditambahkan dalam Kiosk Informasi ini?

Jawaban Jumlah

(orang)

Persentase (%)

a. Penambahan efek

animasi 7 23,3%

b. Penambahan audio 5 16,7%

c. Penambahan 3D 10 33,3%

d. Penambahan video 8 26,7%

TOTAL Responden 30 100%

57% 43%

0% 0%

Diagram No. 7

Sangat membantu Cukup membantu Kurang membantu 23% 17% 33% 27%

Diagram No. 8

Penambahan efek animasi

Penambaha audio

213

Action Script 2.0 Pada Interface Frame 1

fscommand ("FullScreen", true);

this.createEmptyMovieClip("my_snd",10 );

var soundloop:Sound = new Sound(my_snd);

soundloop.attachSound("Sound_Loop"); soundloop.start(0,999);

Frame 3

StoredActions.gotoAndPlay("Play");

Frame 34, Frame 74, Frame 124

stop(); Frame 68 loadMovie(StoredActions.cMenu+".swf", Holder); Frame 80 unloadMovie(Holder); Frame 125 gotoAndPlay("Section");

Button Bahasa Indonesia

on (rollOver) {

indo.gotoAndPlay("Over");

if (StoredActions.soundb == 1) { StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

indo.gotoAndPlay("Out");

}

on (release) {

indo.gotoAndPlay("Hit"); getURL("index.php", "");}

Button Bahasa Inggris

on (rollOver) {

StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

eng.gotoAndPlay("Out"); }

on (release) {

eng.gotoAndPlay("Hit");

getURL("index_en.php", ""); }

Button Tentang Kami

on (rollOver) {

Menu1.gotoAndPlay("Over");

if (StoredActions.soundb == 1) { StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

Menu1.gotoAndPlay("Out"); }

on (release) {

Menu1.gotoAndPlay("Hit"); play();

StoredActions.cMenu = 1; }

Button Tur 3 Dimensi

on (rollOver) {

Menu2.gotoAndPlay("Over");

if (StoredActions.soundb == 1) { StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

Menu2.gotoAndPlay("Out"); }

on (release) {

Menu2.gotoAndPlay("Hit"); {

getURL("index.php?module=ALL", ""); }

}

Button Denah

on (rollOver) {

214

StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

Menu3.gotoAndPlay("Out"); }

on (release) {

Menu3.gotoAndPlay("Hit"); play();

StoredActions.cMenu = 2; }

Button Jadwal

on (rollOver) {

Menu4.gotoAndPlay("Over");

if (StoredActions.soundb == 1) { StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

Menu4.gotoAndPlay("Out"); }

on (release) {

Menu4.gotoAndPlay("Hit"); { getURL("index.php?module=jadwal", ""); } } Button Fasilitas

on (rollOver) {

Menu5.gotoAndPlay("Over");

if (StoredActions.soundb == 1) { StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

Menu5.gotoAndPlay("Out"); }

on (release) {

Menu5.gotoAndPlay("Hit"); play();

StoredActions.cMenu = 3; }

Button Cari

on (rollOver) {

Menu6.gotoAndPlay("Over");

if (StoredActions.soundb == 1) {

} }

on (rollOut) {

Menu6.gotoAndPlay("Out"); }

on (release) {

Menu6.gotoAndPlay("Hit"); { getURL("index.php?module=cari", ""); } } Button Berita

on (rollOver) {

Menu7.gotoAndPlay("Over");

if (StoredActions.soundb == 1) { StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

Menu7.gotoAndPlay("Out"); }

on (release) {

Menu7.gotoAndPlay("Hit"); { getURL("index.php?module=info", ""); } } Button Bantuan

on (rollOver) {

Menu8.gotoAndPlay("Over");

if (StoredActions.soundb == 1) { StoredActions.SFX_H2.gotoAndPlay("Pl ay");

} }

on (rollOut) {

Menu8.gotoAndPlay("Out"); }

on (release) {

Menu8.gotoAndPlay("Hit"); play();

StoredActions.cMenu = 4; }

Button Admin

on (rollOver) {

Menu9.gotoAndPlay("Over");

215

on (rollOut) {

Menu9.gotoAndPlay("Out"); }

on (release) {

Menu9.gotoAndPlay("Hit"); {

getURL("admin/index.php", ""); }

}

Lingo Pada Virtual Tour (Tur 3 Dimensi)

Script stop

on exitFrame me go the frame

end

Scriptbergerak ke depan

on mousewithin me

sprite(1).camera.translate (0,0,-1) updatestage

end

Scriptbergerak ke belakang

on mousewithin me

sprite(1).camera.translate (0,0,1) updatestage

end

Scriptbergerak ke kanan

on mousewithin me

sprite(1).camera.rotate(0,-2,0) updatestage

end

Scriptbergerak ke kiri

on mousewithin me

sprite(1).camera.rotate(0,2,0) updatestage

end

Script menu galeri

on mouseUp me go 1

end

Scriptmenu basement

on mouseUp me go 6

end

Script menu lantai 1

on mouseUp me go 11

Script menu lantai 2

on mouseUp me go 16

end

Script menu lantai 3

on mouseUp me go 21

end

Script menu lantai 4

on mouseUp me go 26

216

Script Virtual Reality

-- reference to the 3D member, 3D sprite, sprite's camera property p3Dmember, pSprite, pCamera

-- reference to the sphere used to surround the camera -- (will be used for collision detection)

property pCameraSphere

-- indicates if the user is pressing the arrow keys

-- by TRUE or FALSE value relating to a down or up position. property pUpArrow, pDownArrow, pLeftArrow, pRightArrow -- indicates if the user is pressing the left mouse button -- or the right mouse button (Win) or is holding the control -- key while pressing the mouse down (Mac)

property pMouseDown, pRightMouseDown, door on beginSprite me

-- initiate properties

pSprite = sprite(me.spriteNum) p3Dmember = pSprite.member p3Dmember.resetWorld() pCamera = pSprite.camera

pUpArrow = FALSE pDownArrow = FALSE pLeftArrow = FALSE pRightArrow = FALSE pMouseDown = FALSE

pRightMouseDown = FALSE

-- create the camera's bounding sphere

camSphereRes = p3Dmember.newModelResource("camSphereRes",#sphere) camSphereRes.radius = 5

pCameraSphere = p3Dmember.newModel("cameraSphere",camSphereRes)

-- make the sphere a child of the camera, using #preserveParent -- so the sphere will move with the camera (the parent)

pCamera.addChild(pCameraSphere,#preserveParent)

-- register the member for regular timeMS events in order to respond to -- user input and resolve camera collisions

-- i.e. after specified time segments activate the controlCamera handler p3Dmember.registerForEvent(#timeMS,#controlCamera,me,2000,50,0)

door = p3DMember.model("Box04") -- the ghost door door.visibility = #none

end on keyDown

-- update the key property based on which key is pressed case the keycode of

217

end case end

on keyUp

pLeftArrow = FALSE pRightArrow = FALSE pUpArrow = FALSE pDownArrow = FALSE end

on mouseDown

-- update the mouse down property pMouseDown = TRUE

end

on mouseUp

-- update the mouse up property pMouseDown = FALSE

end

on rightMouseDown

-- update the right mouse down property pRightMouseDown = TRUE

end

on rightMouseUp

-- update the right mouse up property pRightMouseDown = FALSE

end

on controlCamera me

-- control the left/right/forward/backward and rotation of the camera

-- if the left arrow key is pressed then move the camera left if pLeftArrow then pCamera.rotate(0,2,0)

-- if the right arrow key is pressed then move the camera right if pRightArrow then pCamera.rotate(0,-2,0)

-- if the up arrow key is pressed then move the camera forward if pUpArrow then pCamera.translate(0,0,-1)

-- if the down arrow key is pressed then move the camera backward if pDownArrow then pCamera.translate(0,0,1)

-- if the left mouse is down then rotate the camera clockwise if pMouseDown then pCamera.rotate(0,-1,0)

218

Script Lingo(Deteksi Tumbukan)

collisionList = p3Dmember.modelsUnderRay(pCamera.worldPosition,\ -pCamera.transform.xAxis,#detailed)

if (collisionList.count) then

me.checkForCollision(collisionList[1]) end if

collisionList = p3Dmember.modelsUnderRay(pCamera.worldPosition,\ pCamera.transform.xAxis,#detailed)

if (collisionList.count) then

me.checkForCollision(collisionList[1]) end if

collisionList = p3Dmember.modelsUnderRay(pCamera.worldPosition,\ -pCamera.transform.zAxis,#detailed)

if (collisionList.count) then

me.checkForCollision(collisionList[1]) end if

collisionList = p3Dmember.modelsUnderRay(pCamera.worldPosition,\ pCamera.transform.zAxis,#detailed)

if (collisionList.count) then

me.checkForCollision(collisionList[1]) end if

end

on checkForCollision me, thisData

-- grab the #distance value from the collisionList dist = thisData.distance

-- if distance is smaller than bounding radius resolve collision if (dist < pCameraSphere.resource.radius) then

-- get distance of penetration

diff = pCameraSphere.resource.radius - dist

-- calculate vector perpendicular to the wall's surface -- to move the camera (using the #isectNormal property) tVector = thisData.isectNormal * diff

-- move the camera in order to resolve the collision pCamera.translate(tVector,#world)

end if

219

Source Code Index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>.:: NICT HRD ::.</title>

<link href="style.css" rel="stylesheet" type="text/css" />> <link rel="shortcut icon" href="images/logo.png"/>

<script type="text/javascript">

var GB_ROOT_DIR = "./admin/config/greybox/"; </script> <script type="text/javascript" src="admin/config/greybox/AJS.js"></script> <script type="text/javascript" src="admin/config/greybox/AJS_fx.js"></script> <script type="text/javascript" src="admin/config/greybox/gb_scripts.js"></script>

<link href="admin/config/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

<script>

function addTransparentWmode( ) {

var objects = document.getElementsByTagName( 'OBJECT' ); for(var i=0; i<objects.length; i++) {

var params = objects[i].getElementsByTagName( 'PARAM' ); var wmodeparam = null;

for(var j=0; j<params.length; j++) {

if ( params[j].getAttribute( 'NAME' ) == 'wmode' ) { wmodeparam = params[j];

break; }

}

//add wmode param if not found if (wmodeparam == null) {

wmodeparam = objects[i].ownerDocument.createElement('PARAM'); wmodeparam.setAttribute( 'name', 'wmode' );

objects[i].appendChild( wmodeparam ); } else {

}

wmodeparam.setAttribute('value', 'transparent'); //showhide

objects[i].style.display = 'none'; objects[i].style.display = 'block'; }

var embeds = document.getElementsByTagName( 'EMBED' ); for(var k=0; k<embeds.length; k++) {

embeds[k].setAttribute( 'wmode', 'transparent' ); embeds[k].style.display = 'none';

embeds[k].style.display = 'block'; }

}

220

<body>

<div id="content"> <?

//['module'] == nama methodn tergantung method get yg di cantumkan pada link yg ada flash

if($_GET['module']=="jadwal") { ?><div id="bottom_body"><? include"module/jadwal.php"; ?></div><? } else if($_GET['module']=="cari") {?><div id="bottom_body"><? include"module/vkeyboard/index.html"; ?></div><? } else if($_GET['module']=="info") {?><div id="bottom_body"><? include"Module/info.php"; ?></div><? } else if($_GET['module']=="cariJadwal") {?><div id="bottom_body"><? include"Module/cariJadwal.php"; ?></div><? } else if($_GET['module']=="info") {?><div id="bottom_body"><? include"Module/info.php"; ?></div><? } else if($_GET['module']=="ALL") {?><div id="bottom_body"><? include"Module/virtual.php"; ?></div><? } else { ?> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c ab#version=7,0,19,0" width="1024" height="768">

<param name="movie" value="interface.swf" /> <param name="quality" value="high" />

<embed src="interface.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash" width="1024" height="768"></embed> </object>

<?

}

221

Source Code menampilkanVirtual Reality

<OBJECT classid="clsid:233C1507-6A77-46A4-9443-F871F945D258"

codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab #version=11,5,7,609"

ID=VR WIDTH=1024 HEIGHT=768 VIEWASTEXT> <param name=src value="3D_progbar.dcr"> <param name=sw1 value="VR.dcr">

<param name=swStretchStyle value=fill>

<param name=swRemote value="swSaveEnabled='true' swVolume='true' swRestart='true' swPausePlay='true' swFastForward='true'

swContextMenu='true'">

<param name=PlayerVersion value=11.5>

<PARAM NAME=bgColor VALUE=#99CCFF> <EMBED SRC="3D_progbar.dcr" sw1="VR.dcr" bgColor=#99CCFF WIDTH=1024 HEIGHT=768

swRemote="swSaveEnabled='true' swVolume='true' swRestart='true' swPausePlay='true' swFastForward='true' swContextMenu='true' swLiveConnect='true'" swStretchStyle=fill

TYPE="application/x-director" PlayerVersion=11.5

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/">