11
4.7 State Transition Diagram
Pada aplikasi Web Tata Ruang Gedung Fakultas Sains Dan Teknologi UIN Syarif Hidayatullah Jakarta ini terdiri dari 12 STD yang
dapat dilihat pada Lampiran 4.
4.8 Rancangan Layar
Web
Pada aplikasi Web Tata Ruang Gedung Fakultas Sains Dan Teknologi UIN Syarif Hidayatullah Jakarta ini terdiri dari 12 rancangan
layar web, tampilannya rancangan halaman utama dapat dilihat pada gambar berikut ini. Untuk rancangan layar web selanjutnya dapat dilihat
pada Lampiran 5.
Gambar 4.5. Rancangan Tampilan Halaman Utama Aplikasi Proyeksi Tata Ruang
Berbasis Web Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah
Jakarta
4.9 Pengumpulan Bahan
Pengumpulan bahan-bahan untuk memenuhi kebutuhan materi aplikasi dilakukan dengan beberapa proses:
1. Melakukan wawancara kepada pihak Tata Usaha Fakultas Sains dan
Teknologi untuk mendapatkan informasi.
utama profil
proyeksi galeri
credit
judul aplikasi
Logo UIN
gambar
footer
12 2.
Melakukan pengisian kuesioner untuk mendapatkan informasi perlu atau tidaknya dibuat sebuah aplikasi visualisasi denah gedung.
3. Pengambilan foto-foto bagian-bagian gedung Fakultas Sains dan
Teknologi untuk dijadikan salah satu elemen multimedia. 4.
Mendapatkan denah gedung dari pihak akademik Fakultas Sains dan teknologi.
Gambar 4.6. Denah awal yang diterima dari pihak fakultas
4.10 Pembuatan Assembly
Pada proses ini akan dijelaskan bagaimana pemanfaatan proyeksi ortogonal pada gedung sebagai media informasi tata letak ruangan pada
gedung laboratorium terpadu beserta spesifikasi dari perangkat lunak dan perangkat keras yang digunakan oleh penulis dalam pengembangan
13 aplikasi Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung
Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, adalah:
4.10.1 Spesifikasi perangkat keras yang digunakan dalam
pengembangan
Untuk mengembangkan aplikasi ini, penulis menggunakan spesifikasi perangkat keras sebagai berikut:
1. AMD Turion 64 X2, 1.9 GHz yang berfungsi sebagai proses
kinerja sistem komputer di dalam pengembangan program maupun perangkat lunak.
2. Memori 4 GB berfungsi untuk mempercepat proses pengolahan
gambar, render, publish dan export hasil. Dan secara umum, penyediaan memori yang berukuran besar sebgai tempat
penyimpanan sementara dan mempercepat penggunaan perangkat lunak yang digunakan untuk mengembangkan
aplikasi. 3.
Kartu Video Graphic Adapter 1028, berfungsi untuk menampilkan gambarvideo yang diproses atau dihasilkan
komputer. 4.
Hard disk 120 GB berfungsi untuk menyediakan ruang bagi aplikasi beserta perangkat lunak, dan menyediakan tempat
penyimpanan untuk keperluan program. 5.
Sound Card, digunakan untuk memproses audio dari perangkat lunak dan mengeluarkannya melalui perangkat keras speaker.
14 6.
Mouse, pointing device yang digunakan untuk mengatur posisi kursor di layar. Dengan cara menggeser mouse di bidang datar.
Setelah cursor menempati posisi tertentu di layar yang diinginkan, maka tombol yang ada pada mouse ditekan untuk
berbagai keperluan, tergantung dari program yang digunakan, misalnya untuk memilih suatu pilihan dilayar.
7. Keyboard, berfungsi sebagai alat input langsung. Input
dimasukkan dengan cara mengetikkan lewat penekanan tombol yang ada pada keyboard.
8. Speaker Aktif, berfungsi untuk keluaran audio pada aplikasi.
9. Monitor 14”, berfungsi sebagai media penampil interface antar
muka atau penghubung penulis dan pengguna dengan kompuer sehingga tampilan aplikasi bisa terlihat.
4.10.2 Spesifikasi perangkat lunak yang digunakan dalam
pengembangan
Untuk mengembangkan aplikasi ini, penulis menggunakan spesifikasi perangkat lunak sebagai berikut:
1. Autodesk 3Ds Max 2009 untuk membuat gambar bangunan
dalam bentuk 3 dimensi. 2.
Adobe Flash CS4, untuk membuat aplikasi dalam bentuk flash. 3.
Adobe Photoshop CS4, untuk proses edit gambar. 4.
Adobe Dreamweaver CS4, untuk proses membuat aplikasi website.
15 Setelah spesifikasi pengembangan dapat dipenuhi, tahap
selanjutnya adalah pengembangan program ini ke tahap pembuatannya menggunakan perangkat lunak yang telah
disiapkan. Beberapa tahapan penting selama pengembangan aplikasi akan dibahas dibawah ini.
4.10.3 Proses pembuatan aplikasi
Pertama-tama penulis melakukan digitasi dari peta yang telah didapat dari pihak fakultas.
Gambar 4.7. Denah awal yang diterima dari pihak fakultas sebelum proses
digitasi
16
Gambar 4.8. Denah setelah proses digitasi
Membuat model 3 dimensi menggunakan software Autodesk 3ds Max 2009. Dalam aplikasi ini penulis menggunakan proyeksi
ortogonal untuk menampilkan preview dari gambar.
Gambar 4.9. Preview menggunakan proyeksi perspektif kiri dan preview
menggunakan proyeksi ortogonal kanan
Diawali dengan membuat lantai untuk alas bangunan. Caranya dengan membuat object plane pada bidang dan dibuat sesuai
ukuran.
17
Gambar 4.10. Objek plan yang digunakan sebagai lantai
Kemudian membuat dinding dan pilar bangunan dengan membuat objek box. Objek ini kemudian diberi warna kuning gading.
Gambar 4.11. Objek box yang akan digunakan sebagai dinding
18
Gambar 4.12. Objek box yang akan digunakan sebagai tiangpilar
Dilanjutkan dengan membuat detil material untuk balkon bangunan
Gambar 4.13. Objek box yang telah diberi motif bata untuk dijadikan
detil balkon.
19
Gambar 4.14. Objek box dan silinder yang akan dijadikan detil balkon
Selanjutnya membuat material pintu dan jendela yang akan dipasang pada bangunan. Kemudian diberi warna hitam dan coklat.
Gambar 4.15. Objek pintu
20
Gambar 4.16. Objek jendela
Lalu seluruh material digabungkan menjadi kesatuan, dimulai dengan memasang pilar, kemudian dinding dan membolongi
dinding untuk menempatkan pintu dan jendela, selanjutnya diberi detil untuk balkon.
Gambar 4.17. Tiang-tiang dipasang pada lantai
21
Gambar 4.18. Dinding dipasang dan dilubangi
Gambar 4.19. Pintu dan jendela serta balkon dipasang pada dinding
Gambar 4.20. Hasil gedung telah jadi
22 Kemudian file 3 dimensi tersebut dirender dalam bentuk file
berekstensi .jpeg. kemudian hasil render yang diambil menggunakan viewport ortogonal tersebut diimport ke Adobe
Flash CS3. Selanjutnya dengan menggunakan Adobe Flash CS3 dibuat suatu animasi dengan gambar dan button untuk
menerangkan gambar denah tersebut.
Gambar 4.21. Proses editing flash menggunakan Adobe Flash CS3
Adobe Photoshop CS3 digunakan sebagai pengolah gambar yang yang nantinya akan dimasukkan kedalam halaman web. Dengan
software ini penulis mengedit gambar yang akan dijadikan banner website. Penulis juga meresize foto-foto yang akan dimasukkan ke
halaman galeri menggunakan Adobe Photoshop CS3 ini.
23
Gambar 4.22. Proses editing gambar menggunakan Adobe Photoshop CS4
Setelah bahan isi website telah siap, kemudian menggunakan Adobe Dreamweaver CS3, penulis mengolah gambar, flash dan
informasi teks dalam bentuk sebuah website.
Gambar 4.23. Proses editing web menggunakan Adobe Dreamweaver
CS4
24
4.11 Pengujian testing
Pada tahap ini penulis melakukan pengujian testing terhadap aplikasi yang telah dibuat. Sebagai standar pengetesan aplikasi, dilakukan
pengetesan secara modular untuk memastikan apakah hasilnya seperti yang diinginkan dan aplikasi dapat berjalan dengan baik ketika dijalankan
dengan spesifikasi minimum dari komputer pengguna. Berikut ini adalah spesifikasi minimum yang digunakan untuk pengetesan aplikasi, yaitu:
1. Spesifikasi Perangkat Keras User
a. Processor AMD Athlon XP 2.6 GHz
b. Hard disk 80 GB
c. DDR RAM 512 MB
d. Graphic Card NVIDIA nForce2 64 MB
e. Monitor 14 inchi
f. Soundcard
g. Mouse
h. Keyboard
2. Spesifikasi Perangkat Lunak User
a. Sistem operasi Windows XP Professional Service Pack 2
b. Web browser Mozilla Firefox 3.0.3
c. Adobe Flash Player 10 Plugin
Penulis melakukan pengujian menggunakan sambungan intenet rumahan di rumah penulis. Hasil pengujian menunjukkan aplikasi dapat berjalan
25 dan ditampilkan dengan baik. Tampilan Hasil Pengujian dapat dilihat pada
lampiran.
4.12 Cara Pengoperasian Aplikasi
Dalam mengoperasikan aplikasi ini tidak memerlukan proses instalasi, cukup mengakses alamat website aplikasi berada maka aplikasi
dapat tampil dan berjalan dengan sendirinya apabila browser pengguna internet telah terpasang plugin flash player. Secara otomatis tampilan
utama akan berada pada menu “Utama” dan kemudian setelah itu pengguna dapat klik menu yang mana saja sesuai dengan kebutuhan.
4.13 Penjelasan Tampilan Aplikasi
Kategori