103
Halaman utama siswa adalah halaman yang akan muncul ketika siswa pertama kali membuka sistem Pembelajaran Kebudayaan Indonesia ini.
Pada halaman ini terdapat menu Materi, Evaluasi, dan Nilai untuk siswa. Pada halaman utama siswa ada menu kecil “Login” di bagian kanan atas
untuk masuk ke halaman guru dan juga pada halaman ini terdapat tanggal dan waktu serta tampilan gambar animasi budaya Indonesia
serta penjelasan tentang sistem ini dan kebudayaan Indonesia.
Gambar 4.1 Halaman Utama Siswa
4.3.2 Halaman Materi
Halaman Materi ini akan muncul ketika siswa menekan menu materi. Pada halaman ini akan ditampilkan gambar peta Indonesia, judul
104
materi berdasarkan data materi yang akan muncul ketika siswa mengklik materi provinsi, rumah adat, pakaian adat, tarian daerah, dan
lagu daerah yang berada di bagian bawah gambar peta Indonesia.
Gambar 4.2 Halaman Materi Siswa
4.3.2.1 Halaman Daftar Materi Provinsi
Halaman Daftar Materi Provinsi ini ada di dalam halaman menu Materi. Halaman Daftar Materi Provinsi ini akan muncul ketika siswa
menekan menu “Provinsi” dan akan ditampilkan tabel daftar data provinsi.
105
Gambar 4.3 Halaman Daftar Materi Provinsi Berikut ini potongan listing program bagian menampilkan data dan
gambar dalam tabel.
try { album.selectTable;
int rowCount = 0; while album.fetch {
rowCount++;
tr td headers=nama
= PhotoAlbumBean.escapeHtmlStringalbum.getNama td if album.getKeterangan= null {
out.print td headers=\location\ + PhotoAlbumBean.escapeHtmlStringalbum.getKeterangan +
td ;
106
} else { out.print td headers=\location\nbsp;td ;
} td headers=image
a href=HalamanPhotoAlbumEntryViewerSiswa.jsp?id== album.getId if album.getThumb.getContentLength 0 {
img src=PhotoAlbumMediaViewer.jsp?media=thumbid== album.getId height== album.getThumb.getHeight
width== album.getThumb.getWidth alt== PhotoAlbumBean.escapeHtmlStringalbum.getNama
border=1atdtr
Berikut method basis data yang digunakan untuk menampilkan gambar secara thumbnail
image.processCopy maxScale=50,50, thumb ;
4.3.2.2 Halaman Tampilan Penuh Gambar Provinsi
Halaman ini akan muncul ketika siswa menekan gambar peta yang ada dalam tabel daftar materi provinsi.
107
Gambar 4.4 Halaman Tampilan Penuh Gambar Provinsi
Berikut ini potongan listing program bagian melihat gambar secara penuh.
if album.getImage.getMimeType.startsWithimage {
out.print img src=\PakaianAlbumMediaViewer.jsp + ?media=image +
id= + album.getId + \ ; if album.getImage.getHeight 0
album.getImage.getWidth 0 {
out.printheight=\+album.getImage.getHeight + \ ; out.printwidth=\ + album.getImage.getWidth + \ ;
} out.print alt=\ +
PakaianAlbumBean.escapeHtmlStringalbum.getNamapak+\ ; out.print border=\1\ ;
} else
{ non-image data... out.print A HREF=\PakaianAlbumMediaViewer.jsp +
?media=imageid= + id + \ + View non-Image Media +
album.getImage.getMimeType + A ; }
108
4.3.2.3 Halaman Daftar Materi Rumah Adat
Halaman Daftar Materi Rumah Adat ini ada di dalam halaman menu Materi. Halaman Daftar Materi Rumah Adat ini akan muncul
ketika siswa menekan menu “Rumah Adat” dan akan ditampilkan tabel daftar data rumah adat.
Gambar 4.5 Halaman Daftar Materi Rumah Adat
4.3.2.4 Halaman Tampilan Penuh Gambar Rumah Adat
Halaman ini akan muncul ketika siswa menekan gambar rumah adat yang ada dalam tabel daftar materi rumah adat.
109
Gambar 4.6 Halaman Tampilan Penuh Gambar Rumah Adat 4.3.2.5 Halaman Daftar Materi Pakaian Adat
Halaman Daftar Materi Pakaian Adat ini ada di dalam halaman menu Materi. Halaman Daftar Materi Pakaian Adat ini akan muncul
ketika siswa menekan menu “Pakaian Adat” dan akan ditampilkan tabel daftar data pakaian adat.
Gambar 4.7 Halaman Daftar Materi Pakaian Adat
110
4.3.2.6 Halaman Tampilan Penuh Gambar Pakaian Adat
Halaman ini akan muncul ketika siswa menekan gambar pakaian adat yang ada dalam tabel daftar materi pakaian adat.
Gambar 4.8 Halaman Tampilan Penuh Gambar Pakaian Adat
4.3.2.7 Halaman Daftar Materi Tarian Daerah
Halaman Daftar Materi Tarian Daerah ini ada di dalam halaman menu Materi. Halaman Daftar Materi Tarian Daerah ini akan
muncul ketika siswa menekan menu “Tarian Daerah” dan akan ditampilkan tabel daftar data tarian daerah.
Gambar 4.9 Halaman Daftar Materi Tarian Daerah
111
4.3.2.8 Halaman Tampilan Pemutar Video Tarian Daerah
Halaman ini akan muncul ketika siswa menekan link “video” yang ada dalam tabel daftar materi tarian daerah dan otomatis akan
memutar video tersebut. Pada halaman ini ditampilkan layar untuk menampilkan video, tombol playpause video, durasi video,
pengatur suara, dan perbesar layar video.
Gambar 4.10 Halaman Tampilan Pemutar Video Tarian Daerah
Berikut ini potongan listing program bagian melihat video.
tr td scope=col valign=topbVideo:btd
td scope=col video
112
width==album.getVideo.getWidth height==album.getVideo.getHeight
controls autoplay
source src=TarianAlbumMediaViewer.jsp?id==album.getId
type==album.getVideo.getMimeType Your browser does not support video tag. Use lastest Firfox or Chrome
video td
tr
4.3.2.9 Halaman Daftar Materi Lagu Daerah
Halaman Daftar Materi Lagu Daerah ini ada di dalam halaman menu Materi. Halaman Daftar Materi Lagu Daerah ini akan muncul
ketika siswa menekan menu “Lagu Daerah” dan akan ditampilkan tabel daftar data lagu daerah.
Gambar 4.11 Halaman Daftar Materi Lagu Daerah
113
4.3.2.10 Halaman Tampilan Pemutar Audio Lagu Daerah
Halaman ini akan muncul ketika siswa menekan link “audio” yang ada dalam tabel daftar materi lagu daerah dan otomatis akan
memutar audio tersebut. Pada halaman ini ditampilkan tombol playpause audio, durasi audio, dan pengatur suara.
Gambar 4.12 Halaman Tampilan Pemutar Audio Lagu Daerah Berikut ini potongan listing program bagian memutar audio.
tr td scope=col valign=topbAudio:btd
td scope=col audio
controls autoplay
source src=LaguAlbumMediaViewer.jsp?id==album.getId
type==album.getAudio.getMimeType Your browser does not support audio tag. Use lastest Firfox or Chrome
audio
114
td tr
4.3.3 Halaman Evaluasi Siswa 4.3.3.1 Halaman Login Siswa
