8 membuat antarmuka
form dinamis untuk memasukkan
input bagi pengguna.
1.1. Menu Home
Menu home merupakan menu utama pada
sistem. Ini merupakan bagian terdepan dari sistem sebelum pengguna dapat menggunakan
sistem. Menu home hanya terdiri atas
sambutan kepada pengguna, pengenalan tentang sistem, dan tujuan sistem.
1.2. Menu Tutorial
Menu tutorial dibagi menjadi tiga tab
antara lain tab input, tab tampilan, dan tab
penjelasan. Hal ini untuk memudahkan pengguna
dalam mempelajari
bangun geometri yang diinginkannya secara fokus.
Tab input ditujukan untuk memasukkan input kepada sistem agar menampilkan
bangun yang
diinginkan berdasarkan
parameter yang dimasukkan. Pada tab input
terdapat form pengisian input yang dapat
berubah-ubah secara otomatis dinamis khususnya pada
form input ukuran. Isi form disesuaikan dengan jenis atau nama bangun
yang dipilih. Form ini dibuat dengan
menggunakan Javascript karena bahasa ini berjalan pada komputer
client sehingga prosesnya cepat tanpa membutuhkan koneksi
ke web server untuk me-load atau me-refresh
halaman web. Saat pengguna mengubah input
nama bangun, form di bawahnya akan turut
berubah secara
otomatis menyesuaikan
dengan nama bangun yang dipilih. Setelah pengguna mengisi
form selanjutnya meng-klik tombol lihat untuk menampilkan visualisasi,
perhitungan, dan materi pembahasannya. Selain itu juga pada
tab input terdapat pendeteksi peramban web dan
VRML plug-in yang dipakai oleh komputer pengguna.
Pendeteksi ini dibuat dengan menggunakan Javascript.
Tujuan utamanya
untuk mengetahui apakah peramban web tersebut
sudah terpasang VRML plug-in atau belum.
Jika belum maka sistem akan memberi tahu pengguna dan menunjukkan
link akses untuk mengunduh perangkat lunak
VRML plug-in di situs aslinya. Karena tanpa adanya
VRML plug-in pada peramban web, sistem tidak akan
berjalan dengan semestinya. Tampilan tab
input dapat dilihat pada Lampiran 9. Tab yang kedua yaitu tab tampilan yang
isinya berupa frame berukuran besar yang
menampilkan visualisasi
model bangun
geometri. Tab ini dikhususkan hanya untuk
melakukan pengamatan terhadap bentuk dari bangun.
Input yang dimasukkan pada form input diproses berdasarkan parameternya
dengan menggunakan
PHP sehingga
menghasilkan file yang mengandung kode-
kode VRML kemudian isi file tersebut
diterjemahkan oleh VRML plug-in menjadi
visualisasi model bangun geometri yang sesuai dengan
input. Tampilannya seperti yang ditunjukkan pada Lampiran 10.
a
b Gambar 10
Panel navigasi examine: a
Navigasi pada
Cortona3D Viewer, b Navigasi pada
Cosmo Player. VRML
Browser sudah
menyediakan fasilitas
panel navigasi
objek untuk
melakukan pengamatan
terhadap objek,
namun untuk sistem ini hanya panel examine
yang diaktifkan karena untuk mengamati bentuk atau seluruh sisi pada suatu objek
geometri hanya
membutuhkan kontrol
navigasi untuk memutar, menggeser, dan memperbesar
zoom tampilan. Tampilan panel navigasi dapat dilihat pada Gambar 10.
Pada objek geometri juga diberikan sensor bola
Sphere Sensor agar objek dapat diputar dengan
mouse berdasarkan arah gerak mouse ketika objek diklik dan digeser.
Latar belakang
background pada
visualisasi diberi warna putih agar warna latar dengan objeknya terlihat kontras sehingga
memudahkan pengguna dalam mengamati objeknya.
Selain itu sudut pandang view point dari
pengguna diatur sedemikian rupa agar objek dapat terlihat seluruhnya pada layar. Caranya
dengan menjauhkan jarak antara objek dengan pengguna ketika ukuran objek besar begitu
juga sebaliknya jika objek berukuran kecil maka jarak antara pengguna dengan objek
menjadi lebih dekat dari jarak normal
default sehingga objek tidak terlihat terlalu kecil dan menyesuaikan dengan ukuran layar
atau frame.
Setelah dilakukan beberapa kali percobaan dengan menampilkan objek dengan berbagai
variasi ukuran pada layar tampilan didapatkan sebuah persamaan atau rumus koordinat posisi
sudut pandang x,y,z yang ideal untuk
9 menampilkan bangun agar terlihat utuh
seluruhnya dengan jelas saat bangun pertama kali ditampilkan pada layar visualisasi.
Persamaan dari nilai x, y, z masing-masing adalah:
; {
; Keterangan:
x,y,z = koordinat posisi sudut pandang; y
o
= ukuran tinggi vertikal bangun; P
sumbu
= ukuran sumbu terpanjang bangun; Skripnya dapat dilihat pada Gambar 11.
Gambar 11 Skrip untuk mengatur tampilan
VRML dalam sistem. Tab terakhir yaitu tab penjelasan. Pada tab
ini terdapat
rumus, perhitungan,
dan pengertian dari bangun geometri yang di-
input sebelumnya pada
form input dinamis. Tab ini dikhususkan untuk mempelajari rumus, cara
perhitungan, serta pengertian dari bangun yang dimaksud. Beberapa rumus dan notasi
perhitungan dibuat dengan menggunakan bahasa MathML. Hal ini agar notasi rumus
terlihat lebih baik. MathML merupakan bahasa yang digunakan untuk menampilkan
notasi matematika pada halaman web. Pada tab penjelasan juga ditampilkan pembahasan
mengenai pengertian dan ciri-ciri bangun disertai dengan gambar bangunnya seperti
yang terlihat pada Lampiran 11.
Saat pertama kali pengguna membuka menu tutorial yang ditampilkan hanyalah
tab input,
sedangkan tab
yang lainnya
disembunyikan. Ini karena pengguna belum memasukkan
input ke dalam sistem sehingga sistem tidak menampilkan bangun geometri
yang diinginkan.
1.3. Menu Quiz