PROYEK AKHIR

PEMBUATAN WEB TUTORIAL PENGENALAN
BAHASA JAWA UNTUK ANAK SEKOLAH DASAR
(DESAIN GLOBAL DAN PEMROGRAMAN WEB)
Larasati Prawadika
NRP.7203.030.003
Dosen Pembimbing:
Tri Budi Santoso, MT
NÌP.
Ìr. Nonot Harsono, MT
NÌP. 131 964 535
JURUSAN TELEKOMUNIKASI
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
SURABAYA 2006
ii
PLMBUA1AN WLB 1U1ORIAL PLNGLNALAN
BAHASA JAWA UN1UK ANAK SLKOLAH DASAR
(DLSAIN GLOBAL DAN PLMROGRAMAN WLB)
Oleh:
LARASATI PRAWADIKA
7203.030.003
Proyek Akhir ini Diajukan Sebagai Salah Satu Syarat
Untuk Memperoleh Gelar Ahli Madya (A.Md.)
di
Politeknik Elektronika Negeri Surabaya
Institut Teknologi Sepuluh Nopember Surabaya
Disetujui oleh
Tim Penguji Proyek Akhir: Dosen Pembimbing:
1. Drs. MiItahul Huda. MT 1. Tri Budi Santoso. MT
NIP. 132 055 257 NIP. 132 128 464
2. Sritrusta Sukaridhoto. ST 2. Ir. Nonot Harsono. MT
NIP. 132 300 372 NIP. 131 964 535
3. M. Zen S. Hadi. ST
NIP. 132 303 871
Mengetahui:
Ketua 1urusan Telekomunikasi
Drs. MiItahul Huda. MT
NIP. 132 055 257
iii
ABSTRAK
Di propinsi Jawa Tengah dan Jawa Timur. pelaiaran
Bahasa Daerah. dalam hal ini Bahasa Jawa. pada umumnya bukan
sebuah mata pelaiaran Iavorit bagi para murid di sekolah. Oleh
karena itu. pada Proyek Akhir ini kami mencoba membuat sebuah
web tutorial untuk mengenalkan perbendaharaan kata dalam
bahasa Jawa untuk anak Sekolah Dasar yang diambil dari
buku ¨Pepak Basa Jawa¨ yang sesuai dengan kurikulum SD.
Diharapkan web tutorial ini dapat menarik minat anak untuk
mempelaiari Bahasa Jawa.
Dalam Proyek Akhir ini dibuat tampilan web yang
dilengkapi dengan animasi untuk membuat web ini meniadi lebih
menarik. sehingga anak meniadi berminat mempelaiarinya.
Animasi-animasi ini. baik berupa gambar maupun text dibuat
dengan menggunakan perangkat lunak Macromedia Flash MX.
dan dalam sistem navigasinya dibuat sederhana agar mudah dalam
pengaksesannya. Pada Proyek Akhir ini disediakan menu yang
berisi kategori-kategori perbendaharaan kata agar lebih terperinci.
contohnya seperti Nama Hewan & Anaknya (Jenenge Kewan &
Anake). Kata Krama Inggil (Tembung Krama Inggil). Peribahasa
(Paribasan-Bebasan-Saloka). dan masih banyak lagi.
Untuk mengetahui seberapa iauh si anak (atau pengguna)
mengenal kata dalam Bahasa Jawa dan mengerti letak
penggunaannya. dalam Proyek ini disediakan iuga sebuah latihan
atau kuis dengan pilihan ganda yang menggunakan bahasa
pemrograman PHP. Di akhir kuis ini diberikan nilai dari soal-soal
yang sudah teriawab dan diberikan iuga iawaban yang benar
sebagai review.

Kata Kunci : Bahasa Jawa. Macromedia Flash. web tutorial.
iv
ABSTRACT
As we know. in Middle and East Java. a Javanese language
subiect is the least Iavourite subiect Ior the students at school. That
is why we are making a web based tutorial to introduce the
vocabulary in Javanese language to Elementary School students
which is taken Irom the 'Pepak Basa Jawa¨ book. which is suitable
Ior the local curriculum. With this tutorial hopeIully could bring
students interest to higher level in studying Javanese language.
For this Final Proiect. the web layout is made with
animations to make it more interesting. hopeIully the students will
have more interest to study it. This animations. in the shape oI
moving pictures or text. are made using Macromedia Flash MX
soItware. And a simple navigation system is made to make it easier
to access. That is why we provide a menu in this Proiect which
include the vocabulary categories. such as Names oI Animal and
Their Babies (Jenenge Kewan & Anake). Krama Inggil words
(Tembung Krama Inggil). Proverb (Paribasan-Bebasan-Saloka).
and much more.
To know how Iar the student recognize the words in
Javanese language and also know how to use it in a sentence. in
this Proiect we also provide a quiz with multiple choice which is
made using PHP programming language. And at the end oI the
quiz. a score and the answers are given as a review.
Keywords : Javanese language. Macromedia Flash. tutorial
website.
v
KATA PENGANTAR
Puii syukur penulis paniatkan kehadirat Allah SWT yang telah
melimpahkan rahmat serta hidayah-NYA. penulis dapat menyelesaikan
penyususunan dan pembuatan laporan dari Tugas Akhir dengan iudul:
PEMBUATAN WEB TUTORIAL PENGENALAN
BAHASA 1AWA UNTUK ANAK SEKOLAH DASAR
(DESAIA CLOBAL DAA PEMROCRAMAA WEB)
Tugas Akhir ini merupakan salah satu kegiatan yang berkaitan
dengan kurikulum perkuliahan dengan beban sebesar duabelas SKS (12
iam mata kuliah). yang harus dipenuhi sebagai persyaratan guna
menyelesaikan studi di Politeknik Elektronika Negeri Surabaya Jurusan
Teknik Telekomunikasi.
Untuk memahami penyusunan dari Tugas Akhir ini hendaknya
pembaca terlebih dahulu mengerti latar belakang dan batasan masalah
yang dibahas agar mengetahui hal-hal apa saia yang akan dibahas dalam
buku ini.
Dalam menyelesaikan Tugas Akhir ini. penulis selesaikan
berdasarkan dari teori-teori yang telah penulis peroleh dalam perkuliahan.
membaca literatur. dan bimbingan dari dosen pembimbing serta
pihak-pihak yang telah banyak memberikan semangat dan bantuan.
Penulis menyadari sepenuhnya bahwa masih banyak
kekurangan yang dimiliki sehingga menyebabkan kurang sempurnanya
laporan Tugas Akhir ini. Untuk itulah penulis minta maaI serta
mengharapkan saran beserta kritik yang membangun demi kesempurnaan
laporan dari Tugas Akhir ini. Semoga buku laporan Tugas Akhir yang
penulis buat ini dapat memberikan manIaat bagi pengembangan ilmu
pengetahuan dan bagi semua pihak pada umumnya serta bagi penulis
sendiri pada khususnya.
Surabaya. Juli 2006
Penulis
vi
UCAPAN TERIMA KASIH
Alhamdulillah kami paniatkan kehadirat Allah SWT. atas
limpahan rahmat dan hidayah-Nya. sehingga penulis dapat
menyelesaikan Proyek Akhir ini tepat pada waktunya dengan segala
kelebihan dan kekurangannya. Penulis sadar dalam terwuiudnya Proyek
Akhir ini tak lepas dari bantuan. bimbingan dan dukungan dari berbagai
pihak. Oleh karena itu. dengan segala kerendahan hati. penulis
mengucapkan terima kasih kepada :
1. Ayah. Ibu dan adikku tercinta yang telah memberi restu. nasehat.
dorongan semangat dan banyak do`a untuk penulis meskipun
terpisah ribuan mil iauhnya. ¨I miss u ..`
2. Bapak Dr.Ir. Titon Dutono selaku Direktur PENS-ITS.
3. Bapak Drs. MiItahul Huda. MT selaku Kepala Jurusan Teknik
Telekomunikasi.
4. Bapak Tri Budi Santoso. ST. MT selaku Dosen Pembimbing I
yang telah banyak meluangkan waktu guna membantu
terselesaikannya Proyek Akhir ini.
5. Bapak Ir. Nonot Harsono. MT selaku Dosen Pembimbing II yang
telah banyak memberikan masukan dalam penyelesaian Proyek
Akhir penulis.
6. Tim Dosen Penguii Proyek Akhir yang telah banyak memberikan
saran dan kritik yang bersiIat membangun guna penyempurnaan
Proyek Akhir.
7. Seluruh Bapak dan Ibu Dosen yang telah membimbing penulis
selama tiga tahun dalam mengikuti perkuliahan di PENS-ITS.
8. Mas Viphi sebagai orang yang paling banyak memberikan support
dan pengorbanan yang begitu berharga bagi penulis.
9. Mas Zaenal dan Mas Indra yang telah banyak membantu penulis
dalam pembuatan program kuis.
10. Mas Catur ¨PakDhe¨ yang telah berbaik hati dalam
menyumbangkan suara serta banyak menyita waktu guna
membantu penulis.
11. Geng `Teletubbies` serta teman-teman 3TA ¨COMTA¨ yang
banyak sekali memberikan support. bantuan serta sering sekali
berbagi suka duka bersama. ¨Thanks for evervthing
guvs .... '''Honestlv ..`
12. And oI course ... Partner PA-ku. Iva. yang sudah work hard
together. serta setia berbagi dalam suka dan duka. bahagia dan
sengsara. dan segala-galanya. ¨Thanx ewe.... vaaah'''¨ ``
vii
DAFTAR ISI
HALAMAN JUDUL ......................................................................... i
LEMBAR PENGESAHAN .............................................................. ii
ABSTRAK ...................................................................................... iii
ABSTRACT .................................................................................... iv
KATA PENGANTAR ...................................................................... v
UCAPAN TERIMA KASIH............................................................ vi
DAFTAR ISI .................................................................................. vii
DAFTAR GAMBAR ....................................................................... x
DAFTAR TABEL .......................................................................... xii

BAB 1 PENDAHULUAN .............................................................. 1
1.1 Latar Belakang ............................................................. 1
1.2 Tuiuan .......................................................................... 1
1.3 Permasalahan ............................................................... 2
1.4 Batasan Masalah ........................................................... 2
1.5 Metodologi ................................................................... 2
1.6 Sistematika Pembahasan .............................................. 3
BAB 2 TEORI DASAR .................................................................. 5
2.1 Umum ........................................................................... 5
2.2 Macromedia Flash MX ................................................ 5
2.2.1 Istilah-istilah Umum dalam Program Flash ........... 6
2.2.2 Mengenal Timeline dan Frame .............................. 7
2.2.3 Animasi Dalam Flash ............................................. 8
2.2.4 Aplikasi ActionScript di Flash ............................. 11
2.3 Macromedia Fireworks MX ....................................... 13
viii
2.3.1 Mengenal Toolbar ............................................... 14
2.3.2 Mengenal Panel ................................................... 14
2.4 Macromedia Dreamweaver MX ................................. 15
2.4.1 Fasilitas dalam Dreamweaver MX ...................... 15
2.5 PHP ............................................................................ 16
2.5.1 Pengenalan PHP .................................................. 16
2.5.2 Tag dalam PHP .................................................... 16
2.5.3 Variabel dan Tipe Data ........................................ 17
BAB 3 PERENCANAAN SISTEM ............................................. 19
3.1 Desain Global Sistem ................................................. 19
3.2 Perencanaan Layout Menu ......................................... 22
3.3 Perencanaan Kategori ................................................. 26
. 3.4 Perencanaan Kuis ....................................................... 31
3.5 Proses Keseluruhan Pembuatan Sistem ...................... 32
BAB 4 PEMBUATAN DAN ANALISA SISTEM ...................... 35
4.1 Perangkat Lunak yang Digunakan ............................. 35
4.2 Pengumpulan Data ..................................................... 35
4.2.1 Pengambilan dan Pengolahan Gambar ................ 35
4.2.2 Perekaman Suara ................................................. 37
4.2.3 Pembuatan Database ............................................ 38
4.3 Pembuatan Menu ........................................................ 39
4.3.1 Cara Keria Page Flip v2.13 .................................. 41
4.4 Pembuatan Kategori ................................................... 46
4.5 Pembuatan Kuis ......................................................... 48
4.6 Penguiian Sistem ........................................................ 51
BAB 5 PENUTUP ........................................................................ 57
5.1 Kesimpulan ................................................................ 57
ix
5.2 Saran .......................................................................... 57
DAFTAR PUSTAKA ..................................................................... 59
LAMPIRAN ................................................................................... 61
RIWAYAT HIDUP PENULIS ....................................................... 85
x
DAFTAR GAMBAR
Gambar 2.1 Gambar dari Irame ...................................................... 7
Gambar 2.2 Gambar dari keyIrame dan blank keyIrame ................ 7
Gambar 2.3 Contoh animasi Irame ................................................. 9
Gambar 2.4 Tampilan animasi motion tween ................................. 9
Gambar 2.5 Contoh animasi shape tween ..................................... 10
Gambar 2.6 Tampilan saat layer di-masking ................................ 10
Gambar 2.7 Gambar untuk panel action Irame ............................. 11
Gambar 2.8 Contoh untuk panel action button .............................. 12
Gambar 3.1 Blok diagram sistem - Hewan. Buah dan Pohon ....... 19
Gambar 3.2 Blok diagram sistem - Jenis Kata .............................. 20
Gambar 3.3 Blok diagram sistem - Sastra. Apa dan
Perumpamaan ............................................................ 21
Gambar 3.4 Blok diagram sistem - Nama Sebutan dan
Kebudayaan Jawa ...................................................... 22
Gambar 3.5 Dynamic page Ilip original ..................................... 23
Gambar 3.6 Tampilan halaman terdepan (cover) .......................... 23
Gambar 3.7 Tampilan halaman penuniuk penggunaan ................. 24
Gambar 3.8 Tampilan button kategori ....................................... 24
Gambar 3.9 Tampilan pilihan kuis ................................................ 25
Gambar 3.10 Tampilan halaman akhir .......................................... 25
Gambar 3.11 Kategori Hewan ...................................................... 26
Gambar 3.12 Kategori Buah ......................................................... 27
Gambar 3.13 Kategori Pohon ....................................................... 27
Gambar 3.14 Kelompok Jenis Kata .............................................. 28
Gambar 3.15 Kelompok Sastra ..................................................... 29
xi
Gambar 3.16 Kelompok Apa?? ..................................................... 30
Gambar 3.17 Kelompok Perumpamaan ........................................ 30
Gambar 3.18 Kelompok Nama Sebutan ........................................ 30
Gambar 3.19 Kelompok Kebudayaan Jawa .................................. 31
Gambar 3.20 Gambaran sistem keria dari kuis ............................. 31
Gambar 3.21 Proses pembuatan sistem secara global (a) ............. 32
Gambar 3.22 Proses pembuatan sistem secara global (b) ............. 33
Gambar 4.1 Bebek awal ................................................................. 36
Gambar 4.2 Bebek akhir ............................................................... 36
Gambar 4.3 Kotak dialog Convert to Symbol` ............................ 36
Gambar 4.4 Tcl WavesurIer 1.7.6 ................................................. 37
Gambar 4.5 Sinyal suara yang akan dipotong ............................... 37
Gambar 4.6 Sinyal suara yang sudah dipotong ............................. 38
Gambar 4.7 Tampilan database menggunakan MySQL-Front ..... 38
Gambar 4.8 Menu menggunakan pageIlip .................................... 39
Gambar 4.9 Keterangan yang keluar saat mouse berada
diatas sebuah button .................................................. 40
Gambar 4.10 Kotak dialog Properties dengan Sound ................... 41
Gambar 4.11 Timeline dari page Ilip v2.13 ................................. 42
Gambar 4.12 Layout kategori Ambune Apa ................................. 46
Gambar 4.13 Field yang tersedia pada button ............................... 47
Gambar 4.14 Tampilan kuis dengan pilihan ganda ....................... 48
Gambar 4.15 Tampilan nilai dan kunci iawabannya ..................... 49
xii
DAFTAR TABEL
Tabel 1. Tabel hasil penguiian sistem 1 ......................................... 51
Tabel 2. Tabel hasil penguiian sistem 2 ......................................... 55
1
B A B 1
PENDAHULUAN
1.1. Latar Belakang
Pelaiaran bahasa daerah. dalam hal ini adalah bahasa Jawa. hanya
diberikan sewaktu kita menginiak bangku Sekolah Dasar (SD) serta
Sekolah Menengah Pertama (SMP). Seperti halnya sekarang ini.
penggunaan Bahasa Jawa semakin teralihkan akibat adanya arus
globalisasi. Kzrena apabila seseorang ingin mengikuti perkembangan
zaman. maka sebaiknya orang tersebut harus dapat beradaptasi dengan
segala sesuatunya. termasuk dengan penggunaan bahasa sebagai alat
komunikasi dengan semua negara-negara yang berada di belahan bumi
manapun.
Semakin lama ketertarikan orang untuk mempelaiari Bahasa Jawa
semakin menurun. Hal ini seperti yang dikatakan oleh kebanyakan para
murid bahwa pelaiaran Bahasa Daerah bukanlah merupakan salah
satu ¨bidang studi Iavorit¨. Pada dasarnya. dalam mengeriakan Proyek
Akhir ini. selain untuk memperkenalkan perbendaharaan kata yang
terdapat dalam Bahasa Jawa. kita iuga dapat menambah wawasan
mengenai dunia mava yaitu internet. Karena pada pembuatan proyek
akhir ini. penulis mencoba mempresentasikannya melalui sebuah web
tutorial sehingga dapat diakses oleh siapapun melalui internet.
Dalam pembuatan proyek akhir ini. penulis ingin menuniukkan
bahwa masih ada penerus bangsa yang memiliki keinginan untuk belaiar
lebih banyak lagi mengenai Bahasa Jawa. dimana merupakan bahasa
daerah bagi penduduk di Pulau Jawa. yang sebagian besar bertempat
tinggal di Propinsi Jawa Tengah dan Jawa Timur. Melestarikan serta
mengembangkan kebudayaan daerah adalah sebuah tuiuan yang mulia.
karena ¨Kebudavaan daerah merupakan bagian dari kebudavaan
nasional`
12
1.2. Tujuan
Adapun tuiuan pembuatan web tutorial ini adalah untuk
memperkenalkan perbendaharaan kata yang terdapat dalam bahasa Jawa.
sekaligus membantu memberikan kemudahan kepada anak SD. karena
pada tutorial ini akan dilengkapi dengan pengucapan serta animasi agar
2
dapat memperielas wacana para pembacanya. Adapun tuiuan lainnya
yaitu untuk memperkenalkan internet kepada generasi muda kita.
1.3. Permasalahan
Permasalahan yang akan ditangani adalah bagaimana membuat
sebuah web tutorial pengenalan Bahasa Jawa untuk anak Sekolah Dasar
yang menarik. Dan seperti yang dapat kita lihat minimnya tool
pembelaiaran Bahasa Jawa merupakan salah satu kendala yang harus
dihadapi.
1.4. Batasan Masalah
Dalam pembuatan ¨Proyek Akhir¨ ini dibuat tampilan web yang
dilengkapi dengan animasi menggunakan perangkat lunak Macromedia
Flash MX dan didukung dengan Macromedia Fireworks MX. Dalam web
tutorial ini iuga diberikan sebuah latihan (kuis) dengan 2 pilihan level dan
pilihan ganda menggunakan soItware Dreamweaver MX.
Perbendaharaan kata yang ada pada web dan pertanyaan-pertanyaan pada
kuis diambil dari buku Pepak Basa Jawa. Pada menu digunakan modul
pageIlip yang merupakan modul Ilash open source yang siap pakai.
ActionScript dan pembuatan unsur-unsur pageIlip tidak dibahas dan
dibatasi hanya dalam penambahan halaman dan beberapa penyesuaian
pageIlip yang sesuai dengan konsep dan tuiuan Proyek Akhir.
1.5 Metodologi
Dalam penyelesaian Proyek Akhir ini terdapat beberapa prosedur
yang telah dilakukan. yaitu :
1. Studi literature
Pada tahapan ini. penulis mencari tahu serta mempelaiari segala
bentuk literatur yang berhubungan dengan Proyek Akhir ini.
seperti halnya pembuatan animasi dan pembuatan kuis. karena
disini penulis akan memilih output-an yang atraktiI. sehingga
dapat menarik minat masyarakat terutama anak-anak Sekolah
Dasar.
2. Pengumpulan data
Data yang dikumpulkan oleh penulis adalah berupa data gambar
yang tidak nyata (kartun). perbendaharaan kata dalam Bahasa
Jawa. data suara yaitu suara hewan (iika ada) dan pengucapan
3
tiap kata dalam Bahasa Jawa yang diperlukan. serta kumpulan
soal-soal yang sesuai untuk bab latihan/kuis. Semua data yang
ada digunakan untuk membuat web lebih menarik dan
berwawasan.
3. Desain
Pada tahap ini penulis mulai memasuki dunia software-nva.
dimana penulis iuga mulai melakukan desain global untuk
tampilan menu book-nya dan begitu iuga desain tampilan untuk
masing-masing kategorinya. Selain itu penulis iuga mulai
membuat database pertanyaan-pertanyaan untuk kuis serta
iawaban-iawabannya.
4. Pembuatan dan Analisa Sistem
Semua prosedur yang telah dilakukan dikombinasikan meniadi
satu. yang kemudian dilakukan pembuatan sistem secara
keseluruhan dan menganalisanya serta dilakukan penguiian atas
sistem tersebut. melalui pengoperasian web tutorial dari awal
hingga proses berakhir untuk melihat apakah system berialan
seperti yang diharapkan.
5. Pembuatan Laporan
Pada tahap ini ketika semua proses sudah berhasil dibuat serta
diialankan. maka penulis mulai menyusun dan menyelesaikan
pembuatan buku Proyek Akhir ini.
1.6 Sistematika Pembahasan
Adapun sistematika studi pembahasan dari Proyek Akhir ini
direncanakan sebagai berikut :
BAB 1 PENDAHULUAN
Pada bab Pendahuluan ini akan menguraikan mengenai latar
belakang. tuiuan. permasalahan serta batasan masalah yang akan
ditangani. metodologi. dan sistematika pembahasan.
BAB 2 DASAR TEORI
Dalam menyelesaikan Proyek Akhir yang beriudul ¨Pembuatan
Web Tutorial Pengenalan Bahasa Jawa Untuk Anak Sekolah
Dasar (Desain Global dan Pemrograman Web)¨. pada bab ini
penulis akan memberikan teori-teori dasar yang digunakan
untuk mendukung kesempurnaan dalam tahap pengeriaannnya.
4
BAB 3 PERENCANAAN SISTEM
Dalam bab ini akan diielaskan tentang perancangan sistem yang
dibuat. Disini penulis akan menielaskan beberapa tahap yang
harus dilalui ketika proses awal pembuatan sistem. seperti
pengumpulan data yang berupa gambar. suara. kumpulan soal
dan iawaban. desain untuk tampilan page-nya. hingga
pengolahan obiek-obiek tersebut untuk mendapatkan hasil akhir
yang diharapkan.
BAB 4 PEMBUATAN DAN ANALISA SISTEM
Pada bab ini sistem mulai direalisasikan. disini akan diielaskan
tentang pembuatan sistem dari proses awal hingga akhir. Dalam
proses pembuatan ini iuga dilakukan analisa untuk mengetahui
apakah kineria dari setiap bagian sistem yang telah dibuat dapat
berialan dengan baik sehigga output yang ada sudah sesuai
seperti yang diharapkan oleh penulis.
BAB 5 PENUTUP
Setelah dilakukan proses pembuatan dan analisa sistem. maka
penulis akan memberikan beberapa kesimpulan dari seluruh
proses pembuatan sistem. Selain itu. guna penyempurnaan dari
pembuatan proyek akhir ini. penulis iuga akan memberikan
beberapa saran yang membangun.
DAFTAR PUSTAKA
DaItar Pustaka adalah mengenai kumpulan dari beberapa
reIerensi yang penulis gunakan sebagai acuan yang dapat
mendukung terselesaikannya pembuatan Proyek Akhir ini. baik
dalam aplikasinya maupun secara teori.
5
B A B 2
TEORI DASAR
2.1 UMUM
Pada bab ini akan diberikan teori dasar yang melandasi permasa-
lahan dan penyelesaiannya yang diangkat dalam proyek akhir ini. Teori
dasar yang diberikan meliputi: Macromedia Flash. yang akan
menerangkan tentang Iasilitas-Iasilitas yang dimiliki Macromedia Flash
serta macam-macam cara animasi menggunakan Flash MX. Dan iuga
akan diberikan sedikit pengenalan tentang Macromedia Fireworks MX.
Macromedia Dreamweaver MX. dan PHP.
2.2 MACROMEDIA FLASH MX
Macromedia Flash MX merupakan salah satu program yang
digunakan untuk mendesain tampilan web seperti yang banyak digunakan
saat ini. Saat membuka situs atau halaman internet tertentu. biasanya
terdapat animasi obiek graIis yang bergerak dari besar meniadi kecil. dari
terang meniadi tampak lebih redup. dari bentuk satu meniadi bentuk yang
lain. dan masih banyak lagi yang lain. Adapun animasi-animasi obiek
graIis tersebut dapat dikeriakan dengan menggunakan Macromedia Flash
MX. Flash MX iuga mengenalkan bagaimana membuat movie clip.
animasi frame. animasi tween motion. serta perintah action-nva.
Flash MX mempunyai banyak Iasilitas yang sangat berdaya guna.
tetapi mudah digunakan seperti membuat interIace / Iorm menggunakan
komponen dengan drag and drop saia. eIek-eIek spesial animasi timeline
yang sudah built-in. behavior yang iuga sudah siap pakai untuk
menambahkan interaktiIitas pada animasi tanpa perlu menuliskan kode
pemrograman. dan masih banyak lagi yang lainnya
Flash MX adalah program yang fleksibel untuk membuat animasi.
sehingga banyak para Desainer yang memakainya. Para Desainer tersebut
sering menggabungkan Macromedia Flash dengan Macromedia
Dreamwever. Frontpage. Adobe Photoshop. CorelDraw. dan lain-lain.
untuk mendapatkan desain yang menarik.
Movie Flash terdiri dari graIik. teks. animasi dan aplikasi untuk situs
web. Pada Movie Flash iuga bisa memasukkan unsur interaktiI dalam
movie-nya dengan bahasa pemrograman ActionScript. untuk
memudahkan user berinteraksi dengan mouse dan kevboard. mengontrol
6
movie. memindahkan obiek-obiek. memasukkan inIormasi melalui Iorm.
dan begitu iuga dengan operasi-operasi yang lainnya.
Adapun beberapa kemampuan Flash lainnya adalah sebagai berikut:
Dapat membuat tombol interaktiI dengan sebuah movie atau
obiek yang lain
Dapat membuat perubahan transparansi warna dalam movie
Dapat membuat perubahan animasi dari satu bentuk ke bentuk
yang lain
Dapat membuat gerakan animasi dengan mengikuti alur yang
telah ditetapkan
Dapat membuat animasi logo. animasi Iorm. presentasi
multimedia. game. kuis interaktiI. simulasi / visualisasi
Dapat membuat situs web. aplikasi web. pengaturan halaman
web
Dapat dikonversi dan di-publish ke dalam beberapa tipe
seperti .swI. .html. .giI. .ipg. .png. .exe. .mov.
2.2.1 Istilah-istilah Umum dalam Program Flash
a. Properties
Suatu cabang perintah dari suatu perintah yang lain.
b. Animasi
Sebuah gerakan obiek maupun teks yang diatur sedemikian rupa
sehingga kelihatan menarik.
c. ActionScript
Suatu perintah yang diletakkan pada suatu Irame atau obiek sehingga
Irame atau obiek tersebut akan meniadi interaktiI.
d. Movie Clip
Suatu animasi yang dapat digabungkan dengan animasi atau obiek
yang lain.
e. Frame
Suatu bagian dari layer yang digunakan untuk mengatur pembuatan
animasi.
7
Frame
Gambar 2.1 Gambar dari Irame
f.Timeline
Bagian dari program Macromedia Flash MX yang digunakan untuk
menampung layer. Berikut ini adalah tampilan dari timeline.
g. Masking
Suatu perintah yang digunakan untuk menghilangkan sebuah isi dari
suatu layer dan isi layer tersebut akan tampak saat movie diialankan.
h. Layer
Sebuah nama tempat yang digunakan untuk menampung satu gerakan
obiek sehingga iika ingin membuat gerakan lebih dari satu obiek
sebaiknya diletakkan pada layer tersendiri.
i. Keyframe
Suatu tanda yang digunakan untuk membatasi suatu gerakan animasi.
Blank Keyframe
Keyframe
Gambar 2.2 Gambar dari keyIrame dan blank keyIrame
2.2.2 Mengenal Timeline dan Frame
Timeline terdiri atas Layer dan Frame. Fungsi utamanya adalah
sebagai tempat pengaturan timing atau waktu animasi dan penggabungan
obiek-obiek dari masing-masing layer.
8
Frame dapat diumpamakan seperti Iilm. Film merupakan
kumpulan gambar yang dimainkan secara berurutan dengan kecepatan
tertentu sehingga gambar tersebut terlihat bergerak. Misalnya di Frame 1
terdapat obiek di sebelah kiri layar dan di Frame 10 terdapat obiek di
sebelah kanan layar. maka ketika kumpulan Irame tersebut digerakkan
secara berurutan akan terlihat seolah-olah obiek tersebut bergerak dari
kiri ke kanan layar.
Keyframe merupakan Irame yang berisi obiek. Ada perintah Insert
KeyIrame yang artinya apabila di Irame 1 sudah terdapat obiek lingkaran.
kemudian kita masukkan keyIrame di Frame 10. maka di Frame 10 pun
terdapat obiek lingkaran yang sama dengan Irame 1. KeyIrame
dilambangkan dengan titik bulat hitam pada Irame
Blank Keyframe artinya kita mempersiapkan Irame kosong untuk
diisi obiek baru. Apabila kita menggambar obiek maka Blank KeyIrame
berubah meniadi KeyIrame karena Irame tersebut sudah berisi obiek.
Blank KeyIrame dilambangkan dengan titik bulat putih pada Irame.
Action Frame. artinya terdapat ActionScript pada Irame tersebut.
Action Frame dilambangkan dengan huruI 'a¨ di Irame.
2.2.3 Animasi Dalam Flash
Adapun beberapa animasi yang dipakai dalam pembuatan proyek
akhir ini. diantaranya adalah :
a. Animasi dengan Frame
Animasi Irame adalah animasi yang dibuat dengan menggunakan
Irame. Frame adalah suatu bagian dari Layer yang digunakan untuk
mengatur pembuatan animasi. Metode yang dipakai adalah secara
manual. dimana kita diharuskan membuat setiap obiek yang berbeda
pada setiap Irame untuk menghasilkan animasi. Meskipun animasi
yang dihasilkan terlihat lebih bagus dan halus daripada animasi metode
tween. akan tetapi iarang digunakan karena pembuatan animasinya
memerlukan ketelitian dan ukuran Iile animasi pun lebih besar. Pada
contoh dibawah ini. Anda akan belaiar bagaimana cara membuat
animasi Irame dengan memainkan warna huruI.
9
Animasi Frame
Gambar 2.3 Contoh animasi Irame
b. Animasi Create Motion Tween
Animasi Create Motion Tween adalah animasi yang digunakan untuk
menggerakkan obiek berdasarkan batas suatu keyIrame tertentu.
Metode ini paling sering digunakan karena paling mudah dan cepat.
Kita hanya perlu membuat atau menentukan obiek di Irame awal dan
obiek di Irame akhir. kemudian secara otomatis Flash akan membuat
Irame diantara Irame awal dan Irame akhir. sehingga terbentuklah
animasi. Berikut ini contoh animasi yang dibuat dengan menggunakan
Create Motion Tween.
Animasi Motion Tween
Gambar 2.4 Tampilan animasi motion tween
10
c. Animasi Shape Tween
Animasi Shape Tween adalah animasi yang digunakan untuk
mengubah satu bentuk ke bentuk yang lain. Shape Tween iuga disebut
dengan efek morph. Berikut ini contoh animasi yang dibuat
menggunakan Shape Tween.
Animasi Shape
Gambar 2.5 Contoh animasi shape tween
d. Properti Mask
Properti Mask digunakan untuk menyembunyikan atau menutupi suatu
obiek dengan obiek lain. Obiek yang menutupi terlihat transparan dan
menyatu dengan obiek yang ditutupi sehingga hanya obiek yang
ditutupi yang dapat dilihat. Berikut ini adalah contoh animasi yang
dibuat menggunakan properti Mask.
Masking
Gambar 2.6 Tampilan saat layer di-masking
11
2.2.4 Aplikasi ActionScript di Flash
a. Script di Frame
Script yang diletakkan di Irame disebut frame-script. Untuk
meletakkan script di Irame caranya yaitu :
1. Tentukan Irame berapa yang ingin diberi script. Peletakkan
harus di keyIrame. Kalau di Irame tersebut belum ada keyIrame.
Anda harus membuatnya dulu dengan menekan tombol F6
(Insert Keyframe).
2. Setelah itu baru tekan tombol F9 untuk menampilkan Panel
Action.
Gambar 2.7 Gambar untuk panel action Irame
Pastikan inIormasi lokasi di Panel Action menuniukkan tulisan
'Frame¨ untuk menghindari kesalahan lebih laniut. Setelah selesai
mengetik script. tutup Panel Action. Anda akan menemukan tanda 'a¨ di
Irame (keyIrame) yang telah diletakkan script. Suatu waktu iika ingin
mengubah script tersebut. klik tanda 'a¨ di Irame (keyIrame) dan tekan
tombol. (titik hitam). Layer tidak ada hubungannya dengan script.
b. Script di Button
Script yang diletakkan di button disebut button-script. Untuk
meletakkan script di tombol caranya :
1. Pastikan tombol yang dimaksud sudah terpilih (di-klik).
Perhatikan iuga inIormasi yang terdapat pada gambar dibawah.
di Property Inspector apakah benar tombol tersebut yang
dimaksud.
2. Setelah semuanya dipastikan. tekan F9 untuk menampilkan
Panel Action.
12
Gambar 2.8 Contoh untuk panel action button
b.1 Event di Button
Script di tombol harus ada pemicunya. Kalau di Irame hanya
mempunyai satu pemicu. di tombol memiliki banyak event. antara lain :
press : keiadian saat tombol mouse ditekan
release : keiadian saat tombol mouse ditekan dan kemudian
dilepas
rollOver : keiadian saat kursor mouse masuk dalam area obiek
tombol. Pada saat ini tombol mouse belum ditekan
roolOut : keiadian saat kursor mouse masuk kemudian keluar
dari area obiek tombol. Pada saat ini tombol mouse belum
ditekan
b.2 Penulisan script di Button
Untuk mengetik script di tombol. Anda harus tahu action atau
perintah apa saia yang akan dimasukkan. Secara umum bentuk script pada
button adalah sebagai berikut.
on (namaevent) ¦
perintah atau handler
}
Pada Flash MX diberikan automatic popup yang berisi pilihan event
saat kita menulis script sehingga dapat menyingkat waktu penulisan.
c. Fungsi-Fungsi Navigasi
Fungsi stop(); digunakan untuk menghentikan movie Ilash pada
Irame yang diberi script ini.
13
Fungsi play(); digunakan untuk menialankan movie Ilash pada Irame yang
diberi script ini.
Syntax dalam Flash ActionScript merupakan case sensitif iadi terdapat
perbedaan antara huruI kapital dan huruI kecil.
d. Komentar
Script merupakan bahasa komputer yang sulit dibaca untuk mereka
yang masih pemula. Oleh karena itu. kita bisa memberinya komentar di
tengah-tengah perintah.
Cara ke-1 :
// Perintah untuk berhenti pada Irame tertentu
gotoAndStop(10);
Cara ke-2 :
/*
Perintah untuk pergi ke Irame tertentu dan kemudian tetap
diialankan
*/
gotoAndPlay(10);
Cara ke-1 dengan tanda ¨//¨ untuk memberi komentar perbaris. Cara
ke-2 yang dimulai dengan tanda ¨/*¨ dan diakhiri tanda ¨*/¨ untuk
memberi komentar lebih dari satu baris. Tulisan komentar akan berwarna
abu-abu.
e. Event di Movieclip
Ada banyak event yang terdapat di movie clip. tetapi hanya dua event
saia yang sering digunakan. yaitu :
load : keiadian saat movie clip pertama kali muncul di stage
enterFrame : keiadian saat movie clip masih berada di dalam
stage
2.3 MACROMEDIA FIREWORKS MX
Fireworks MX adalah salah satu soItware untuk membuat desain
graIis yang atraktiI. SoItware ini merupakan program aplikasi untuk
membuat. mengedit dan mengoptimalkan tatanan desain graIis web.
Dalam Fireworks iuga menyediakan berbagai tombol perintah untuk
14
membangun web. Anda dapat membuat dan mengedit graIik. memberi
eIek. serta memotong image untuk mengurangi ukuran Iile. Setelah
halaman web di-edit. Anda dapat mengekspornya ke Iormat JPEG. GIF
atau Iormat lain yang kompatibel.
2.3.1 Mengenal Toolbar
Toolbar merupakan baris perintah yang berisi tombol-tombol
perintah yang sering digunakan di dalam pengeditan. Toolbar dapat
ditampilkan maupun disembunyikan dengan perintah Window
Toolbar dan kemudian pilih nama toolbar.
2.3.2 Mengenal Panel
Bagian Panel berisi berbagai panel yang terbagi meniadi enam. yaitu
Select. Bitmap. Vektor. Colors dan View.
Select Tool (Tombol Pemilih>
Select tool berisi tombol-tombol perintah untuk memilih obiek.
Obiek dapat digerakkan. diubah skala-nya. diputar atau dipotong
dengan tool ini. Contoh dari tombol Select antara lain Pointer. Scale.
dan Crop.
Bitmap Tool (Tombol Bitmap)
Tombol Bitmap digunakan untuk memanipulasi obiek bitmap.
seperti membuat obiek bimap. melakukan pengeditan. dan memberi
warna. Contoh dari tombol Bitmap antara lain Magic Wand. Brush.
Eraser dan Paint Bucket.
Vector Tool (Tombol Vektor)
Tombol Vektor digunakan untuk melakukan pengeditan pada obiek
vektor. Manipulasi yang dapat dilakukan antara lain membuat garis
atau kurva. mengedit garis atau kurva. membuat tulisan dan
memotong garis pada bidang keria. Contoh dari tombol Vector
antara lain Rectangle. Ellipse dan Text.
Color Tool (Tombol Warna)
Tombol Color digunakan untuk mengubah warna obiek. Fungsi
utama dari tombol Color adalah untuk mengatur warna stroke dan Iill
pada obiek gambar. Contoh dari tombol Color antara lain Stroke
Colors Option. Fill Colors Option. dan No Stroke or Fill.
15
View Tool (Tombol View)
Tombol View digunakan untuk mengatur ukuran tampilan pada
bidang keria. umumnya digunakan untuk mengatur bidang keria atau
halaman web yang besar. Contoh dari tombol View antara lain
Standard Screen Mode. Hand. dan Zoom.
2.4 MACROMEDIA DREAMWEAVER MX
2.4.1 Fasilitas dalam Dreamweaver MX
Macromedia Dreamweaver MX adalah program aplikasi
proIesional untuk mengedit HTML secara visual dan mengelola Website
serta pages. Karena tampil secara visual. program aplikasi Macromedia
Dreamweaver MX mudah untuk dioperasikan. Program ini menyediakan
banyak perangkat yang dapat meningkatkan kemampuan user di dalam
membuat Web.
Program aplikasi Dreamweaver MX menyertakan banyak perangkat
yang berkaitan dengan pengkodean dan Iitur seperti HTML. CSS.
JavaScript ReIerence dan JavaScript Debugger. Selain ini program
aplikasi ini iuga memungkinkan pengeditan JavaScript. XML dan
dokumen teks lainnya secara langsung. yaitu dengan menggunakan
Iasilitas Code Editors.
Program aplikasi ini iuga dapat mengimpor image atau movie yang
dibuat dengan program aplikasi lainnya. seperti Macromedia Flash
maupun Macromedia Fireworks.
Adapun beberapa kemampuan Dreamweaver MX lainnya adalah
sebagai berikut:
Mempunyai tampilan interIace standar yang lebih konsisten
dengan produk athor Web Macromedia lainnya.
Panel-panelnya ditempelkan pada iendela keria sehingga
memudahkan user bekeria.
Fasilitas yang terdapat dalam kotak dialog New Document dapat
memungkinkan user untuk memilih layout halaman maupun
code yang akan digunakan. seperti Framesets. CSS Style Sheets.
Template Page. dll.
Fasilitas Code View menyediakan Iitur-Iitur seperti autoediting.
live syntax coloring untuk HTML dan JavaScript. toolbar
dengan code yang lebih terorientasi.
16
Pada saat melakukan peng-code-an. menu pop-up akan muncul
memberikan petuniuk tentang code sesuai item yang dipilih
user.
Memberikan Iitur-Iitur untuk Web Developer yang di dalamnya
termasuk ColdFusion MX Support. ASP.NET Support. PHP
Support. Web Services Introspections.
2.2 PHP
2.5.1 Pengenalan PHP
PHP merupakan akronim dari 'PHP : Hypertext Presprocessor¨.
PHP merupakan bahasa script yang biasa digunakan untuk web
development yang dapat diselipkan dalam bahasa script HTML. Berbeda
dengan script-script lainnya seperti JavaScript atau VB script. PHP
dieksekusi di lingkungan server. sedangkan client hanya menerima hasil
dari script yang telah dieksekusi tanpa bisa mengetahui kode yang
digunakan.
2.5.2 Tag dalam PHP
Banyak cara untuk menyisipkan PHP dalam script HTML. antara
lain:
Cara 1
·?php
....
?~
Cara 2
·?
....
?~
Cara 3
·script language÷¨php¨~
....
·/script~
Tag yang lebih umum dan banyak digunakan adalah Cara 3. script
PHP harus dituliskan diantara tag ini. Sehingga script PHP selain dapat
berdiri sendiri iuga dapat disisipkan dalam script HTML. Ekstensi dari
script PHP menggunakan .php dan bukan .html meskipun di dalamnya
iuga ada script HTML.
17
2.5.3 Variabel dan Tipe Data
Penulisan variabel dalam PHP diawali dengan karakter $`. kemudian
diikuti dengan huruI sebagai karakter pertama. dan setelah itu bisa
dilaniutkan dengan kombinasi huruI dan angka. Variabel pada PHP
bersiIat case sensitif dan tidak boleh mengandung spasi maupun tanda
baca di dalamnya. Akan tetapi untuk penulisan nama Iungsi tidak
diperlukan persamaan huruI besar dan kecil. sehingga nama Iungsi
phpinfo() dapat iuga ditulis seperti PhpInfo().
Tipe data yang dapat diolah menggunakan PHP. antara lain:
Boolean
Integer
Floating Point
String
Array
Obiect
18
----------- halaman ini sengaia dikosongkan
19
B A B 3
PERENCANAAN SISTEM
3.1 Desain Global Sistem
Gambar 3.1 Blok diagram sistem - Hewan. Buah dan Pohon
20
Gambar 3.2 Blok diagram sistem - Jenis Kata
21
Gambar 3.3 Blok diagram sistem - Sastra. Apa dan Perumpamaan
22
Gambar 3.4 Blok diagram sistem - Nama Sebutan dan Kebudayaan Jawa
Gambar blok-blok diagram dari sistem diatas menerangkan
pengelompokan dari kategori-kategori yang diambil dari Pepak Basa
Jawa`. Sedangkan yang akan ditampilkan pada menu adalah pilihan
kategori tersendiri. bukan berdasarkan pengelompokannya.
3.2 Perencanaan Layout Menu
Layout pada menu dibuat dengan menggunakan sistem page flip.
Sistem dasar diambil dari Dvnamic Pageflip v2.13 yang dibuat oleh
Macc/iparigraIika yang merupakan open source yang dapat di download
secara gratis dari internet. Dengan menggunakan page Ilip ini penulis
cukup membuat tampilan per page yang akan ditampilkan dalam page Ilip.
bisa berupa .swI maupun .ipg. dan kemudian page-page ini dimasukkan
ke dalam page Ilip dengan mengedit kode yang telah disediakan. Page Ilip
ini bekeria dengan sistem XML sehingga lebih mudah bagi kita untuk
mengedit content yang ingin ditampilkan.Gambar 3.5 berikut ini
merupakan tampilan original dari page flip versi 213.
23
Gambar 3.5 Dynamic page Ilip original
Berikut ini adalah rancangan layout dari menu yang akan penulis buat dengan
menggunakan sistem page flip.
Gambar 3.6 Tampilan halaman terdepan (cover)
24
Gambar 3.7 Tampilan halaman penuniuk penggunaan
Ket: adalah gambar button
Gambar 3.8 Tampilan button kategori
25
Tampilan untuk pilihan seluruh kategori sama seperti pada Gambar
3.8. sedangkan berikut ini yaitu Gambar 3.9 adalah tampilan page yang
berisi beberapa kategori dan button untuk kuis. Dan Gambar 3.10
merupakan tampilan pada halaman akhir yang berisi Ioto dan nama
penulis (proIile penulis).
Gambar 3.9 Tampilan pilihan kuis
Gambar 3.10 Tampilan halaman akhir
26
3.3 Perencanaan Kategori
Untuk mengetahui apa saia yang ada dalam tiap kategori maka berikut
ini akan digambarkan secara umum berdasarkan pengelompokannya.
Gambar 3.11 Kategori Hewan
Pada Gambar 3.11. untuk kategori Hewan. penulis menyiapkan dua
pilihan yaitu gambar dan pengucapan (laIalnya). Pada awal pengaksesan
kategori ini disediakan beberapa gambar binatang dan pilihan button
untuk page selaniutnya maupun button untuk kembali ke menu`. Saat
sebuah gambar binatang di klik akan keluar sebuah page baru yang berisi
gambar binatang itu sendiri. Disini iuga disediakan popup yang berisi
keterangan-keterangan seperti yang sudah diielaskan pada Gambar
3.11disertai dengan pengucapannya. Pada page ini iuga diberikan button
untuk kembali ke page sebelumnya yaitu yang berisi beberapa gambar
binatang.
27
Sistem keria pada kategori Buah seperti pada Gambar 3.12 hampir
sama dengan sistem keria kategori Hewan. yaitu penulis iuga
menyediakan pilihan berupa gambar dan suara (pengucapan). Pada awal
pengaksesannya akan disediakan button untuk kembali ke menu dan
button untuk melaniutkan ke page berikutnya.
Pada Gambar 3.13. yaitu mengenai kategori Pohon yang akan
menguraikan nama pohon tersebut beserta ienisnya. Disini. penulis akan
memberikan keterangan seperti pada blok diagram dan pilihan button
seperti pada kategori sebelumnya.
Gambar 3.12 Kategori Buah
Gambar 3.13 Kategori Pohon
28
Gambar 3.14 Kelompok Jenis Kata
29
Pada Gambar 3.14 yaitu kelompok dari beberapa kategori Jenis Kata
yang terdapat dalam Pepak Bahasa Jawa. seperti Bilangan. Krama Inggil.
Entar. Sinonim. Antonim. dan seterusnya seperti yang telah dicantumkan
dalam blok diagram. Saat memasuki menu. kategori akan berdiri sendiri
sebagai button. Apabila kita mengklik salah satu dari kategori tersebut.
maka penulis akan menyediakan pilihan berupa suara (pengucapan)
disertai dengan keterangan yang terdapat pada Pepak Basa Jawa. Setelah
itu. penulis iuga memberikan button untuk kembali ke menu utama atau
ke halaman berikutnya (iika ada).
Sistem seperti ini iuga berlaku pada Kelompok Sastra pada Gambar
3.15. Kelompok Apa ?? pada Gambar 3.16. Kelompok Perumpamaan
Gambar 3.17. Kelompok Nama Sebutan Gambar 3.18 dan Kelompok
Kebudayaan Budaya pada Gambar 3.19.
Gambar 3.15 Kelompok Sastra
30
Gambar 3.16 Kelompok Apa??
Gambar 3.17 Kelompok Perumpamaan
Gambar 3.18 Kelompok Nama Sebutan
31
Gambar 3.19 Kelompok Kebudayaan Jawa
3.4 Perencanaan Kuis
Kuis ini merupakan Iasilitas ekstra dalam sistem yang berguna untuk
melatih seberapa iauh anak bisa menggunakan kata dalam sebuah kalimat.
Gambaran sistem keria untuk kuis ini adalah sebagai berikut.
Gambar 3.20 Gambaran sistem keria dari kuis
32
3.5 Proses Keseluruhan Pembuatan Sistem
Berikut ini adalah gambaran keseluruhan proses dalam pembuatan
sistem. Seperti yang kita ketahui. sebelum suatu sistem dibuat pasti
sebelumnya ada sebuah ide yang melatar belakangi untuk membuat
sistem tersebut. hal ini telah diielaskan oleh penulis pada Bab 1 tentang
Latar Belakang. Kemudian untuk membuat suatu sistem iuga dibutuhkan
sebuah sketsa sistem yang akan dibuat. penulis telah meniabarkannya
pada Bab 3. yaitu tentang perencanaan sistem. Setelah ide dan desain
sudah ada selaniutnya proses realisasi bisa dilakukan. Dibawah ini adalah
blok proses pembuatan sistem secara global.
Gambar 3.21 Proses pembuatan sistem secara global (a)
33
Gambar 3.22 Proses pembuatan sistem secara global (b)
34
----------- halaman ini sengaia dikosongkan
35
B A B 4
PEMBUATAN DAN ANALISA SISTEM
Dalam pembuatan sistem dilakukan beberapa tahap seperti yang akan
diielaskan berikut ini.
4.1 Perangkat Lunak yang Digunakan
Dalam pembuatan Proyek Akhir ini penulis menggunakan
produk-produk program aplikasi Macromedia karena Macromedia
menyediakan program-program aplikasi yang cukup lengkap serta antar
program aplikasi yang disediakan dapat berkorelasi.
Untuk Proyek Akhir ini digunakan Macromedia Flash MX
ProIessional 2004 versi 7.0.1 yang merupakan program dasar dari
keseluruhan Proyek Akhir. Untuk menialankan hasil program Flash MX
ini dibutuhkan Macromedia Flash Player 7 yang sudah terinstal secara
otomatis ketika kita menginstal Macromedia Flash MX Pro 2004. Penulis
memilih menggunakan program ini karena Macromedia Flash MX
mempunyai banyak kelebihan-kelebihan yang mendukung pengeriaan
Proyek Akhir ini. terutama dalam membuat animasi. Tetapi
kelemahannya adalah pada saat Iile Flash (.Ila) dibuka di Macromedia
Flash MX yang beda versi (lebih tinggi atau lebih rendah) terkadang Iile
Flash ini tidak dapat dibuka.
Selain Macromedia Flash MX. untuk mendukung Proyek Akhir ini
penulis iuga menggunakan Macromedia Fireworks MX untuk pembuatan
dan pengeditan gambar maupun background. serta digunakan iuga
program Tcl WavesurIer untuk perekaman dan pengeditan suara yang
akan digunakan dalam sistem ini. Kemudian untuk pembuatan kuis.
penulis menggunakan Macromedia Dreamweaver MX dengan gabungan
bahasa pemrograman PHP dan database MySQL. karena Dreamweaver
MX merupakan web developer yang dinamis dan mensupport
pemrograman dengan PHP & MySQL.
4.2 Pengumpulan Data
4.2.1 Pengambilan dan Pengolahan Gambar
Data-data gambar diambil dengan cara searching di internet dan
mendownloadnya. Ada banyak gambar yang tersedia di internet yang
dapat kita gunakan secara gratis. penulis memilih gambar-gambar yang
tidak nyata atau kartun karena memiliki bentuk yang lebih
36
bermacam-macam dan beraneka warna sehingga terlihat lebih menarik.
Gambar-gambar ini sebagian besar di edit kembali sesuai dengan yang
diharapkan dengan menggunakan Macromedia Fireworks MX. dan
kemudian di import ke dalam Macromedia Flash MX untuk diiadikan
gambar yang beranimasi atau bergerak.
Contoh gambar yang sudah di edit dan diberi animasi :
Gambar 4.1 Bebek awal Gambar 4.2 Bebek akhir
Saat ingin membuat suatu animasi. suatu gambar harus di convert to
svmbol terlebih dahulu meniadi sebuah movie clip agar animasi yang
diberikan dapat berialan. Apabila gambar tersebut masih berupa bitmap
atau graphic maka animasi yang diberikan tidak dapat bekeria. hasilnya
akan tetap meniadi sebuah gambar diam. Setelah masuk dalam timeline
movie clip. gambar tersebut harus di convert lagi meniadi sebuah graphic.
apabila masih dalam bentuk bitmap maka sekali lagi animasi tidak dapat
bekeria. Shortcut untuk meng-convert suatu obiek adalah cukup tekan F8.
Gambar 4.3 Kotak dialog Convert to Symbol`
37
4.2.2 Perekaman Suara
Pada tahap perekaman suara ini perangkat lunak yang digunakan
adalah Tcl WavesurIer 1.7.6. Dengan program ini kita dapat merekam
suara maupun mengeditnya. Program lain yang dapat digunakan adalah
Sound Recorder. tetapi penulis lebih memilih untuk menggunakan Tcl
WavesurIer karena Iile suara lebih mudah di edit dari noise maupun
dipotong ke size yang kita inginkan. Dengan program ini suara yang ada
iuga dapat di ubah-ubah sampling ratenya. iadi suara tersebut dapat
meniadi lebih tinggi maupun rendah. Tipe Iile yang tersimpan dari
program ini berupa .wav.
Gambar 4.4 Tcl WavesurIer 1.7.6
Untuk perekaman suara. penulis merekam pengucapan tiap kata yang
dibutuhkan dalam sistem. Dalam satu kategori dibuat satu Iile yang berisi
banyak rekaman. sehingga Iile ini nantinya harus dipotong untuk
masing-masing kata dan disimpan meniadi single file.
Berikut ini merupakan contoh pemotongan Iile suara:
Gambar 4.5 Sinyal suara yang akan dipotong
38
Gambar 4.6 Sinyal suara yang sudah dipotong
4.2.3 Pembuatan Database
Dalam proses ini dibuat sebuah database menggunakan MySQL
dengan bantuan MySQL-Front dalam pembentukan database dan
pemasukkan datanya. Database ini berisi pertanyaan-pertanyaan dan
iawaban-iawaban yang akan diberikan dalam kuis. Terdapat 150
pertanyaan yang tersedia dalam database. dan untuk tiap pertanyaan
disediakan 4 pilihan iawaban.
Gambar 4.7 Tampilan database menggunakan MySQL-Front
39
Pemilihan tipe data pada database iuga perlu disesuaikan dengan
perkiraan record yang akan dipakai. Dalam hal ini penulis menggunakan
type INT 6 digit untuk Iield idpertanyaan dalam tabel pertanyaan.
Tabel pertanyaan mempunyai Iield idpertanyaan. pertanyaan. dan
level. Sedangkan tabel iawaban mempunyai Iield idiawaban.
pertanyaanid. iawaban. dan iawabval. Untuk Iield idpertanyaan dan
idiawaban harus mempunyai nilai yang berbeda karena mereka
merupakan primary key dan bersiIat unique. Field level digunakan untuk
membedakan pertanyaan yang sesuai dengan levelnya. Dan Iield
iawabval digunakan untuk menandai iawaban mana yang benar dari 4
pilihan iawaban. nilai 1` berarti benar dan nilai 0` berarti salah. Dalam
tabel iawaban terdapat bagian dari tabel pertanyaan yaitu Iield
pertanyaanid yang nantinya digunakan untuk menggabungkan
pertanyaan dengan iawaban yang sesuai.
4.3 Pembuatan Menu
Gambar 4.8 Menu menggunakan pageIlip
40
Tampilan pada menu dibuat dengan menggunakan konsep page flip.
Sistem dasar diambil dari pageIlipv213 yang dibuat oleh
Macc/iparigraIika. Kemudian page Ilip ini di-edit sesuai dengan yang
diharapkan seperti pada Gambar 4.8..
Page Ilip yang telah di-edit. pada menunya akan disediakan
pilihan-pilihan kategori berupa button-button yang mewakili
kategori-kategori tersebut. Pada setiap button terdapat keterangan
mengenai isi dari kategorinya. yang akan muncul ketika pointer mouse
diletakkan diatas button tersebut. dapat dilihat pada Gambar 4.9. Untuk
menuiu ke sebuah kategori cukup meng-klik button yang berupa sebuah
gambar yang mewakili setiap kategorinya.
Gambar 4.9 Keterangan yang keluar saat mouse berada diatas sebuah button
Dalam pembuatan menu ini banyak digunakan animasi tween dan
button. Animasi tween lebih mudah digunakan dan tidak memerlukan Iile
yang besar maupun ketelitian yang lebih seperti pada animasi
Irame-by-Irame. Dalam menu ini animasi tween yang digunakan adalah
motion tween karena proses pembuatannya cukup mudah dengan hasil
41
yang menarik. Pada Flash MX ini. telah disediakan 4 Iield untuk button.
yaitu up. over. down. dan hit. sehingga kita dapat dengan mudah
memasukkan animasi atau action apa saia yang ingin ditampilkan sesuai
dengan Iieldnya. Up adalah saat button muncul pertama kali. over adalah
saat button dilewati oleh mouse pointer. down adalah saat button ditekan
oleh mouse pointer. dan hit adalah tempat untuk menentukan area
penekanan pada button. Dalam button ini iuga disediakan penambahan
suara. Cara penggunaannya cukup mudah. kita hanya meng-export Iile
suara ke dalam librarv kemudian pilih di Iield mana kita akan menaruh
suara. lalu pilih suara yang ada dalam librarv pada kotak dialog
Properties Sound. seperti pada Gambar 4.10 berikut ini.
Gambar 4.10 Kotak dialog Properties dengan Sound
Dalam pembuatan menu dengan modul pageIlip ini pertama kali yang
dilakukan adalah membuat page-nya. setiap page harus berpasangan
karena dibutuhkan page depan dan belakang. Setelah semua page siap
digunakan kemudian dikumpulkan meniadi satu dan dimasukkan dalam
Iolder pages` pada modul pageIlip yang sudah tersedia. Kemudian dalam
modul iuga disediakan Iile pages.xml dimana kita dapat mengedit kode
untuk menambahkan page-page yang ingin ditampilkan dalam pageIlip.
Page yang akan dipanggil oleh pages.xml harus berada pada Iolder
pages`. iika tidak maka pageIlip tidak akan muncul dan terus dalam
loading state.
4.3.1 Cara Kerja Page Flip v2.13
Berikut akan diielaskan cara keria dari page Ilip versi 2.13 yaitu
dalam proses loading dan flipping pages. Gambar 4.11 menuniukkan
layer dan Irame-Irame yang ada pada timeline page Ilip. Dapat dilihat
pada layer actions terdapat tanda di atas blank keyIrame. hal ini
menuniukkan bahwa pada Irame-Irame tersebut terdapat actionScript
untuk selaniutnya dapat dieksekusi.
42
Gambar 4.11 Timeline dari page Ilip v2.13
Dalam Irame 1 teriadi proses dimana preloader ditampilkan secara
visual dan source untuk halaman-halaman yang akan ditampilkan mulai
diload yaitu dari Iile pages.xml. Iile ini iuga berhubungan dengan Iolder
pages yang berisi Iile-Iile halaman yang sudah iadi. Saat preloader sudah
mencapai 100° maka preloader akan menghilang dan akan langsung
menuiu Irame inisialisasi (Irame 5: initialize). Berikut adalah kode
actionScript yang ada pada Irame 1.
stop();
_quality = "BEST";
Stage.scaleMode = "noScale";
onEnterFrame = function() {
LB = getBytesLoaded();
TB = getBytesTotal();
PC = (LB/TB)*100;
loaderbar.setbar(PC);
if(TB>4 && PC == 100) {
delete onEnterFrame;
gotoAndPlay("initialize")
}
}
if(_level0.xmlFile==undefined) {
_level0.xmlFile = "xml/pages.xml";
}
Pada Irame 5. Iile importxml.as dimasukkan ke dalam sistem atau
diload. File ini akan menyiapkan tempat dan bentuk untuk
halaman-halaman yang ada pada Iile pages.xml. seperti tinggi dan lebar
halaman. hard cover. transparansi. maupun page order-nya. Pada Irame
ini halaman-halaman belum ditampilkan karena nilai pages.visible ÷ 0.
Berikut adalah actionScript pada Irame 5.
pages._visible = 0;
#include "import_xml.as"
stop();
43
Setelah Irame 5 maka timeline akan menuiu ke Irame 6 dan seterusnya
dimana Iungsi-Iungsi pembentukan halaman. perhitungan preloader.
pendeteksian pointer mouse. serta perhitungan untuk proses Ilipping
dimulai (start). Pada Irame 6. kondisi untuk halaman pada page Ilip
ditentukan kemudian proses pembentukan halaman page Ilip dilakukan
yaitu dengan membentuk halaman dari Iile pages.xml kedalam movie clip
yang kemudian akan disusun sesuai dengan urutannya. Disini iuga
dilakukan pembentukan untuk halaman yang hard cover baik bagian
depan maupun belakang. serta perhitungan untuk preloader yang akan
me-load halaman-halaman yang ada dalam sistem. Berikut adalah
actionScript pada Irame 6.
pageClips = new Array();
pageClips[1] = pages.p1.page.pf.ph.pic;
pageClips[2] = pages.flip.p2.page.pf.ph.pic;
pageClips[3] = pages.flip.p3.page.pf.ph.pic;
pageClips[4] = pages.p4.page.pf.ph.pic;
if(transparency) {
pageClips[0] = pages.p0.page.pf.ph.pic;
pageClips[5] = pages.p5.page.pf.ph.pic;
}
var init = (transparency)? 0 : 1;
for(var i=init;i<pageClips.length;i++) {
for(var j=0;j<pageOrder.length;j++) {
var p = pageClips[i].createEmptyMovieClip("p"+(j+1),j);
p._x = j*pw;
p.loadMovie(pageOrder[j]);
}
}
var tm = pages.flip.hfliph.attachMovie("sph","sp2",0);
tm.ph.pic.pic._x = -pw/2;
tm.ph.pic.mask._x = -pw/2;
tm.ph.pic.pic._y = -ph/2;
tm.ph.pic.mask._y = -ph/2;
for(var j=0;j<pageOrder.length;j++) {
var p = tm.ph.pic.pic.createEmptyMovieClip("p"+(j+1),j);
p._x = j*pw;
p.loadMovie(pageOrder[j]);
}
var tm = pages.flip.hfliph.attachMovie("sph","sp3",1);
tm.ph.pic.pic._x = -pw/2;
tm.ph.pic.mask._x = -pw/2;
tm.ph.pic.pic._y = -ph/2;
tm.ph.pic.mask._y = -ph/2;
for(var j=0;j<pageOrder.length;j++) {
var p = tm.ph.pic.pic.createEmptyMovieClip("p"+(j+1),j);
44
p._x = j*pw;
p.loadMovie(pageOrder[j]);
}
onEnterFrame = function() {
var isLoaded = 1;
var loadedCount = 0;
var init = (transparency)? 0 : 1;
for(var k=init;k<pageClips.length;k++) {
for(m=0;m<pageOrder.length;m++) {
var p = eval(pageClips[k]+".p"+(m+1));
if(p.getBytesLoaded() == p.getBytesTotal() &&
p.getBytesTotal()>100) {
isLoaded*=1;
loadedCount++;
} else {
isLoaded*=0;
}
}
}
if(isLoaded) {
play();
delete onEnterFrame;
}
loadedText.text = Math.floor(loadedCount/pageClips.length)+" of
"+pageOrder.length+" pages loaded";
}
stop();
Frame 7 berisi kode-kode dasar dalam pembentukan page Ilip. Disini
semua Iungsi-Iungsi penting untuk pengaksesan page Ilip dilakukan.
Awalnya dilakukan pengesetan untuk paniang halaman. daerah
penekanan untuk Ilipping. kecepatan Ilipping. serta variabel-variabel
yang akan digunakan dalam Iungsi-Iungsi yang akan dibentuk
selaniutnya. Fungsi-Iungsi tersebut antara lain adalah sebagai berikut;
Iungsi reset() yaitu untuk menginisalisasi halaman-halaman. Iungsi untuk
menginisialisasi mouse click handler atau pendeteksian pointer mouse
yaitu untuk memberikan perhitungan dan kondisi yang teriadi apabila
mouse berada di suatu area untuk autoIlip maupun preIlip. Iungsi hittest()
yaitu untuk menentukan arah Ilipping dari sebuah halaman. serta Iungsi
oeI() yang memberikan kondisi saat teriadi preIlip. autoIlip. Ilipping
maupun tearing. Untuk kondisi Ilipping normal yaitu pada halaman yang
bukan hard cover maka dalam perhitungannya digunakan Iungsi calc(x.y).
sedangkan untuk Ilipping halaman yang hard cover maka digunakan
45
Iungsi scalc(obi.x). ActionScript untuk Irame 7 ini akan dituniukkan pada
Lampiran A.
Pada Irame 8 diberikan beberapa Iungsi untuk mengeset ukuran
masking tiap halaman. mengaktiIkan pendeteksian mouse
(Mouse.addListener(mousecontroll)) yang harus direset setiap kali
dilakukan loading. serta removeML() yang akan mereset mouse listener
tersebut. Dan saat enter frame atau pertama kali masuk. Iungsi oeI() akan
langsung diialankan untuk mengontrol Ilipping dari halaman-halaman
page Ilip. Berikut adalah actionScript pada Irame 8.
loader.removeMovieClip();
var init = (transparency)? 0 : 1;
for(var i=init;i<pageClips.length;i++) {
pageClips[i]._parent.mask._width = pw;
pageClips[i]._parent.mask._height = ph;
}
pages.flip.hfliph.sp2.ph.pic.mask._width = pw;
pages.flip.hfliph.sp2.ph.pic.mask._height = ph;
pages.flip.hfliph.sp3.ph.pic.mask._width = pw;
pages.flip.hfliph.sp3.ph.pic.mask._height = ph;
Mouse.addListener(mousecontroll);
onEnterFrame = oef;
resetPages();
reset();
function removeML() {
Mouse.removeListener(mousecontroll);
}
Sedangkan pada Irame 9. page Ilip yang sudah iadi dengan semua
Iungsi yang sudah dieksekusi akan ditampilkan (kondisi pages.visible ÷
1). kemudian page Ilip pun siap digunakan. Berikut adalah actionScript
pada Irame 9.
pages._visible = 1;
stop();
Jadi proses keria page Ilip secara umum yaitu sebagai berikut.
Pertama. dilakukan pengesetan preloader dan loading semua halaman
yang akan dimasukkan pada page Ilip. Kemudian dilakukan pembentukan
halaman dan eksekusi Iungsi-Iungsi untuk Ilipping tiap halaman serta
pendeteksian mouse pointer. Terakhir. saat semua kode sudah dieksekusi
dan sampai pada Irame 9 maka page Ilip yang sudah iadi akan
ditampilkan dan siap digunakan atau diakses.
46
4.4 Pembuatan Kategori
Tampilan untuk tiap kategori dibuat dengan menggunakan animasi
dan warna-warna yang cerah. hal ini guna menarik minat dari anak untuk
mempelaiarinya. Isi dari tiap kategori disesuaikan dengan
perbendaharaan kata yang sesuai dengan nama dari kategori tersebut.
Perbendaharaan kata yang ada diambil dari buku Pepak Basa Jawa yang
sesuai dengan kurikulum SD. Pada beberapa kategori akan diberikan
pengucapan untuk tiap kata yang dianggap penting. Contoh tampilan dari
sebuah ketegori dapat dilihat pada Gambar 4.12.
Kategori Ambune Apa` ini bekeria sebagai berikut. saat mouse
pointer berada di atas sebuah button yang berisi kata (seperti 'sedhep¨).
maka akan keluar sebuah keterangan yang sesuai dengan kata tersebut.
kemudian iika button ini di-klik maka akan keluar suara pengucapannya
atau laIalnya. Pada kategori ini diberikan tombol 'MENU¨ untuk kembali
ke menu utama yaitu page Ilip. Karena isi dari kategori ini sedikit maka
hanya diperlukan satu halaman. tetapi untuk kategori lainnya yang
mempunyai lebih banyak data akan dilaniutkan ke halaman berikutnya.
dimana akan diberikan tombol untuk me-link ke halaman yang berikutnya
maupun ke halaman selaniutnya. Sedangkan tombol 'MENU¨ akan
berada pada tiap halaman untuk mempermudah penggunaan.
Gambar 4.12 Layout kategori Ambune Apa
47
Untuk membuat sebuah animasi seperti pada kata sedhep` dalam
contoh kategori diatas digunakan Iungsi button. Pertama dibuat sebuah
shape yang akan digunakan sebagai background dari teks. kemudian teks
dapat dituliskan serta di group. setelah itu mixed group ini di convert to
symbol meniadi button. Apabila button di klik dua kali maka akan keluar
Iield-Iield seperti pada Gambar 4.13 yaitu up. over. down. dan hit.
Gambar 4.13 Field yang tersedia pada button
Pada Up` akan berisi obiek yang akan muncul pertama kali. Over`
adalah Iield untuk mengeset apa yang akan teriadi saat mouse berada di
atas button. disini diberikan keterangan dari kata sedhep` sehingga saat
mouse berada di atas button maka akan muncul keterangannya. Lalu pada
Down` diberikan Iile suara sehingga saat button diklik maka akan keluar
pelaIalan dari kata pada button tersebut. Kemudian Hit` adalah tempat
untuk memberikan area penekanan (area untuk klik) pada button. cukup
membuat sebuah shape di atas obiek yang meniadi button dengan ukuran
yang sesuai dengan yang diharapkan.
Tombol MENU`. yaitu tombol untuk mengakses kembali ke menu.
dibuat dengan menggunakan pill button` yang tersedia pada
library-buttons` kategori component buttons` pada Flash MX. Button
ini disertai dengan properties yang mudah digunakan dalam mengganti
warna button dan tulisan. sehinga cukup di set sesuai dengan yang
dikehendaki.
Untuk kategori-kategori yang lainnya iuga digunakan sistem yang
hampir sama dengan sistem yang digunakan pada kategori Ambune Apa`
ini. Karena isi dari tiap kategori banyak yang berupa teks maka Iungsi
button banyak digunakan dalam pembuatannya. Dan iuga karena
diperlukan pelaIalan dari kata yang ada maka Iungsi button merupakan
Iungsi yang sesuai dengan Iitur-Iitur yang akan diberikan pada animasi
teks ini.
48
4.5 Pembuatan Kuis
Kuis diakses melalui menu. yang kemudian iika di-klik akan menuiu
ke sebuah window dengan dua pilihan level. Kuis ini menggunakan
sistem random sehingga tiap kali mengakses kuis dengan level yang sama.
pertanyaan yang ada bisa bervariasi. Setelah level yang dipilih akan
diberikan pertanyaan dengan pilihan ganda. Pada level satu akan
diberikan 10 pertanyaan dari 60 pertanyaan yang tersedia di database.
sedangkan pada level 2 akan diberikan 20 pertanyaan dari 90 pertanyaan
yang tersedia di database.
Di akhir kuis akan diberikan score atau nilai dari pertanyaan yang
sudah diiawab. Nilai maksimal yang di dapat adalah 100. dan bersamaan
dengan keluarnya nilai yang diberikan. akan ditampilkan pula
iawaban-iawaban yang benar (kunci iawaban) dari kuis tersebut. Gambar
berikut ini akan menuniukkan tampilan yang akan keluar di kuis.
Gambar 4.14 merupakan gambar tampilan untuk soal-soal dengan
pilihan ganda. dan Gambar 4.15 merupakan gambar tampilan untuk nilai
yang diberikan setelah meniawab pertanyaan serta diberikan iuga kunci
iawabannya sebagai review.
Gambar 4.14 Tampilan kuis dengan pilihan ganda
49
Gambar 4.15 Tampilan nilai dan kunci iawabannya
Dalam pembuatan kuis ini penulis menggunakan perangkat lunak
Macromedia Dreamweaver dengan menggunakan script HTML yang
dikombinasikan dengan script PHP. Penulis menggunakan script PHP
karena untuk merealisasikan kuis ini dibutuhkan adanya database
pertanyaan dan iawaban. dan dengan script PHP database dapat
ditampilkan ke dalam web dengan mudah. Untuk pembuatan database
penulis menggunakan Database: MySQL dan untuk pengeditan tabel dan
pengisian data penulis menggunakan program client MySQL-Front agar
lebih praktis dalam proses pengeriaannya. Untuk mengeksekusi program
PHP maupun koneksi database ke PHP dibutuhkan sebuah web server.
disini penulis menggunakan web server Apache. Sebelumnya penulis
harus membuat program koneksi ke database MySQL. untuk mengetahui
apakah PHP dapat terkoneksi dengan database tersebut dalam program ini
diberikan Iungsi sebagai berikut.
iI(mysqlconnect($host.$username.$password))¦
iI(mysqlselectdb($database))¦
echo "connection success";}
else¦
echo "connection to database Iailed¨;}
}else¦
50
echo "connection to host Iailed¨;}
Untuk koneksi ke database diperlukan host. username. password. dan
database yang akan digunakan. variabel-variabel ini harus di deklarasikan
terlebih dahulu dan harus sesuai dengan inIormasi yang dipakai pada
database.
Setelah koneksi berhasil. penulis mulai membuat sebuah program
untuk menampilkan pertanyaan dan sebuah program untuk menampilkan
nilai. disini query-query MySQL harus disisipkan untuk dapat
menampilkan isi dari database. serta pada tiap awal program Iile koneksi
database harus dimasukkan dengan contoh syntax sebagai berikut.
include("dbConnect.php");
Untuk Iungsi random dalam pertanyaan digunakan syntax sebagai
berikut.
$sql÷"select * Irom pertanyaan";
$query÷mysqlquery($sql);
$iumlah÷mysqlnumrows($query);
srand((Iloat) microtime() * 10000000);
do¦
$hslRandom÷rand(1.$iumlah);
$sql ÷ "select * Irom pertanyaan where level÷".$level;
$result ÷ mysqlquery($sql);
}while(!mysqlnumrows($result));
Sedangkan untuk mengambil iawaban dari database yang sesuai
dengan pertanyaannya digunakan syntax query sebagai berikut.
$query÷"select* Irom iawaban where
idiawaban÷'".$POST|$pilih|$i||."'";
Serta untuk perhitungan nilainya digunakan Iungsi dan rumus sebagai
berikut.
$result÷mysqlquery($query);
iI(mysqlnumrows($result))¦
$content÷mysqlIetcharray($result);
$nilai¹÷$content|"iawabval"|*1/count($pilih)*100;
}
51
Program untuk kuis secara lengkap dapat dilihat pada Lampiran B
yang terdiri dari program koneksi PHP dengan database MySQL.
program untuk menampilkan pertanyaan secara random. serta program
untuk menampilkan nilai dan kunci iawaban.
4.6 Pengujian Sistem
Untuk mengetahui apakah sistem berialan dengan benar dan sesuai
dengan yang diharapkan oleh penulis maka dilakukan sebuah penguiian
sistem. Penguiian sistem ini dilakukan dengan 2 cara. pertama yaitu
dengan mengecek link-link yang ada pada menu dan
kategori-kategorinya. apakah semua button me-link dengan benar sesuai
dengan targetnya. kedua yaitu dengan melakukan survey. dalam hal ini
dilakukan sebuah demo dari web tutorial ini kepada beberapa anak
Sekolah Dasar. kemudian mereka akan diberikan sebuah kuisioner untuk
diisi yang akan meniadi tolak ukur apakah Web Tutorial Pengenalan
Bahasa Jawa ini sudah dapat diterima (minimal disukai) oleh anak-anak
Sekolah Dasar atau masih ada kekurangannya.
Berikut adalah tabel hasil penguiian sistem dari cara penguiian yang
pertama yaitu pengecekan link pada sistem.
Kondisi
Keterangan
Berhasil Gagal
Index Menu V -
Menu Kat. Jenenge Kewan&Anake
Menu Kat. Jenenge Kewan&Anake
V
V
-
Menu Kat. Jenenge Godhong
Menu Kat. Jenenge Godhong
V
V
-
Menu Kat. Jenenge Wit
Menu Kat. Jenenge Wit
V
V
-
Menu Kat. Jenenge Panggonan
Menu Kat. Jenenge Panggonan
V
V
-
Menu Kat. Jenenge Penggawean
Menu Kat. Jenenge Penggawean
V
V
-
Menu Kat. Jenenge Satriva lan Kesatrivane
Menu Kat. Jenenge Satriva lan Kesatrivane
V
V
-
Menu Kat. Jenenge Bocah
Menu Kat. Jenenge Bocah
V
V
-
52
Menu Kat. Tegese Banget
Menu Kat. Tegese Banget
V
V
-
Menu Kat. Prenahe Sadulur
Menu Kat. Prenahe Sadulur
V
V
-
Menu Kat. Ambune Apa
Menu Kat. Ambune Apa
V
V
-
Menu Kat. Rasane Apa
Menu Kat. Rasane Apa
V
V
-
Menu Kat. Tembung Wilangan
Menu Kat. Tembung Wilangan
V
V
-
Menu Kat. Tembung Garba (Sandi)
Menu Kat. Tembung Garba (Sandi)
V
V
-
Menu Kat. Tumrape Apa
Menu Kat. Tumrape Apa
V
V
-
Menu Kat. Cacade Awak
Menu Kat. Cacade Awak
V
V
-
Menu Kat. Tembung Krama Inggil
Menu Kat. Tembung Krama Inggil
V
V
-
Menu Kat. Paribasan-Bebasan-Saloka
Menu Kat. Paribasan-Bebasan-Saloka
V
V
-
Menu Kat. Panvandra
Menu Kat. Panvandra
V
V
-
Menu Kat. Pepindhan
Menu Kat. Pepindhan
V
V
-
Menu Kat. Tembung-tembung
Menu Kat. Tembung-tembung
V
V
-
Menu Kat. Tembung Saroia
Menu Kat. Tembung Saroia
V
V
-
Menu Kat. Tembung Kosok Balen
Menu Kat. Tembung Kosok Balen
V
V
-
Menu Kat. Tembung Kawi
Menu Kat. Tembung Kawi
V
V
-
Menu Kat. Purwakanthi
Menu Kat. Purwakanthi
V
V
-
Menu Kat. Parikan
Menu Kat. Parikan
V
V
-
Menu Kat. Tembung Camboran V -
53
Menu Kat. Tembung Camboran V
Menu Kat. Cangkriman
Menu Kat. Cangkriman
V
V
-
Menu Kat. Paramasastra
Menu Kat. Paramasastra
V
V
-
Menu Kat. Aksara Jawa
Menu Kat. Aksara Jawa
V
V
-
Menu Kat. Gamelan Jawa
Menu Kat. Gamelan Jawa
V
V
-
Menu Gladhen (pilihan tingkat)
Menu Gladhen (pilihan tingkat)
V
V
-
Pilihan tingkat pertanyaan
Pilihan tingkat pertanyaan
V
V
-
Pertanyaan nilai
Pilihan tingkat nilai
V
V
-
Tabel 1. Tabel hasil penguiian sistem 1
Dari tabel diatas dapat diketahui bahwa link-link yang diberikan pada
button-button yang ada dalam sistem dapat menuiu ke target yang sesuai
dengan yang diset. sehingga sistem dapat diakses dengan benar tanpa
menimbulkan error dalam me-link-nya.
Untuk penguiian sistem dengan cara yang ke-2 yaitu dengan
memberikan kuisioner kepada beberapa anak Sekolah Dasar dilakukan
dengan mengambil data dari 10 anak Sekolah Dasar dengan range usia
9-12 tahun dan terdiri dari 4 laki-laki serta 6 perempuan. Demo dilakukan
tidak pada sekolah Iormal tetapi cukup pada yang non-Iormal asalkan
media yang digunakan untuk mendemokan web tutorial ini tersedia dan
dengan spesiIikasi yang dapat mensupport ialannya sistem dengan baik
sehingga responden iuga dapat mengakses dengan mudah dan menikmati
ialannya sistem yang didemokan ini tanpa adanya error maupun waktu
yang terbuang karena minimnya spesiIikasi sistem support dari media
yang tersedia. Adapun bentuk dari kuisioner yang diberikan kepada
responden adalah seperti pada halaman berikut ini. Dimana responden
cukup memberikan centang pada nilai yang dianggap sesuai pada kolom
yang tersedia.
54
KUISIONER WEB TUTORIAL
PENGENALAN BAHASA 1AWA
Berilah tanda V pada kolom penilaian yang sesuai dengan kamu.
Adapun keterangan penilaiannya adalah sebagai berikut :
1 : kurang
2 : cukup
3 : baik
4 : baik sekali
Penilaian
No Pertanyaan
1 2 3 4
1.
Apakah menurut kamu tutorial
ini menyenangkan ?
2.
Apakah menurut kamu tutorial
ini mudah dimengerti?
3.
Apakah menurut kamu
tampilannya menarik ?
4.
Apakah menurut kamu tutorial
ini mudah digunakan ?
5.
Apakah setelah menggunakan
tutorial ini. kamu iadi tertarik
pelaiaran Bahasa Daerah ?
55
Dari kuisioner di atas didapatkan hasil penguiian sebagai berikut.
Penilaian
No Pertanyaan
1 2 3 4
1.
Apakah menurut kamu tutorial
ini menyenangkan ?
- - 40° 60°
2.
Apakah menurut kamu tutorial
ini mudah dimengerti?
- 20° 50° 30°
3.
Apakah menurut kamu
tampilannya menarik ?
- - 30° 70°
4.
Apakah menurut kamu tutorial
ini mudah digunakan ?
- - 60° 40°
5.
Apakah setelah menggunakan
tutorial ini. kamu iadi tertarik
pelaiaran Bahasa Daerah ?
- 40° 40° 20°
Tabel 2. Tabel hasil penguiian sistem 2
Dapat dilihat dari tabel bahwa untuk pertanyaan pertama. dari data
yang ada ternyata 60° dari iumlah responden yang turut berpartisipasi.
menyatakan bahwa tutorial ini sangat menyenangkan. dengan
memeberikan nilai 4 (baik sekali). Sedangkan pada pertanyaan kedua.
penulis memperoleh nilai 3 (baik) dari 50° responden. dan dapat
diartikan bahwa web tutorial ini mudah dimengerti. Pertanyaan
selaniutnya adalah ¨Apakah menurut kamu tampilannya menarik?¨.
ternyata persentase dari iumlah responden yang ada ialah 70°
memberikan nilai ¨baik sekali¨ atas pertanyaan tersebut. Hal ini berarti
responden sangat tertarik sekali dengan tampilan yang dibuat penulis.
Pertanyaan ke-4 yaitu ¨Apakah menurut kamu tutorial ini mudah
digunakan?¨. dan hasilnya adalah 60° responden memberikan
nilai ¨baik¨. sedangkan sisanya adalah ¨baik sekali¨. Hal ini dapat
diartikan bahwa responden masih belum menemukan kesulitan yang
berarti dalam menggunakan web tutorial ini. Sedangkan untuk pertanyaan
yang terakhir yaitu dari data yang ada diperoleh bahwa 40° responden
memberikan nilai ¨cukup¨. 40° berikutnya menilai ¨baik¨. dan sisanya
memberikan nilai ¨baik sekali¨.
Adapun kemungkinan yang terdapat pada pertanyaan ke-5 ialah
beberapa responden merasa masih kurang tertarik akan pelaiaran Bahasa
56
Jawa. sedangkan yang lainnya sudah lebih memiliki ketertarikan untuk
mempelaiarinya. Hal seperti ini dapat teriadi karena beberapa Iaktor.
misalnya saia Iaktor waktu. Pada saat mendemokan web tutorial ini.
ketika sebuah halaman sudah berhasil di-akses. dengan segera penulis
beralih ke halaman selaniutnya guna mempersingkat waktu. Hal ini
teriadi karena banyaknya materi (kategori) yang akan dituniukkan.
Seandainya saia responden memiliki waktu yang iauh lebih banyak untuk
memainkan web tutorial ini. penulis yakin bahwa responden-responden
tersebut akan lebih tertarik untuk mempelaiarinya.
57
B A B 5
PENUTUP
5.1 KESIMPULAN
1. Animasi dengan menggunakan button` lebih mudah dan menarik
karena Iitur-Iitur pendukung yang tersedia.
2. Animasi motion tween` lebih mudah digunakan dan Iile yang
dibutuhkan tidak terlalu besar.
3. Untuk koneksi PHP dengan database MySQL dibutuhkan sebuah
web server. untuk sistem ini digunakan Apache.
4. Jumlah animasi yang terlalu banyak akan mempengaruhi waktu
loading. hal ini tergantung dari processor masing-masing PC.
5. Kuis dengan nilai akhir diberikan untuk mengetahui kemampuan
pengguna sistem dalam menggunakan kata bahasa iawa yang
sesuai pada sebuah kalimat.
6. Hasil survey menuniukkan bahwa web tutorial ini sangat
menyenangkan (60° responden). mudah digunakan (60°
responden). dan tampilannya sangat menarik (70° responden).
5.2 SARAN
1. Untuk membuat obiek yang dapat bergerak. obiek tersebut harus
diconvert terlebih dahulu ke movie clip. agar dapat dibuat
animasi-animasi yang diinginkan.
2. Pengelompokan layer animasi per obiek atau ienis dilakukan
dengan tuiuan untuk mempermudah pembuatan animasi.
3. Perhatikan penulisan actionScript pada obiek atau Irame yaitu
besar dan kecilnya huruI karena merupakan case sensitif.
4. Proyek Akhir yang dibuat oleh penulis dapat digunakan sebagai
bahan pembelaiaran. khususnya dalam mata pelaiaran Bahasa
Daerah.
5. Proyek Akhir yang dibuat penulis dapat dikembangkan lebih
beragam lagi mengenai ragam animasi. isi. serta pemrograman
web yang lebih eIektiI.
59
DAFTAR PUSTAKA
1. Abikusno. 'Pepak Basa Jawa`. Penerbit Express Surabaya.
Surabaya. 1996.
2. Baba. 'Animasi Kartun dengan Flash MX`. PT. Elex Media
Komputindo. Jakarta. 2003.
3. Hadi. Moch. Zen S. `Modul Pembelaiaran Praktikum Bengkel
Internet`. PENS-ITS. Surabaya. 2005.
4. Hakim. Lukmanul. 'Cara Ampuh Menguasai Macromedia Flash
MX 2004`. PT. Elex Media Komputindo. Jakarta. 2004.
5. Herlambang. Ferry. ' Trik Explorasi Dreamweaver MX`. PT. Elex
Media Komputindo. Jakarta. 2005.
6. Kelompok Keria Pengawas Sekolah (KKPS). `Program Semester`.
Dinas Pendidikan Kota Surabaya. Surabaya. 2006.
7. Komputer. Wahana. 'Membuat Website Interaktif dengan
Macromedia Dreamweaver MX`. PT. Elex Media Komputindo.
Jakarta. 2002. 2004.
8. MADCOMS. 'Mahir dalam 7 hari. Macromedia Fireworks MX
2004`. ANDI. Yogyakarta. 2005.
9. MADCOMS. `Seri Aplikasi Macromedia Flash MX 2004.
Membuat Animasi Movie Clip dengan Actions Script'. ANDI.
Yogyakarta. 2004.
10. Reinhardt. Robert. and Lott. Joey. 'Flash MX 2004 ActionScript
Bible`. Wiley Publishing. Inc. Indianapolis. Indiana. Canada. 2004.
11. Salim. Ali. 'Trik Membuat Animasi Teks dengan Macromedia
Flash MX 2004`. PT. Elex Media Komputindo. Jakarta. 2005.
12. Sukardio. Drs. Sudiatmoko H. 'Horison Pengetahuan Sosial`.
Yudhistira. Jakarta. 2004.
13. Sukendro. Drs. Tresno. Drs. Santoso. dan Riyadi. Drs. Imam.
'TUTUR BASA kanggo kelas 2 SD 6 SD`. Yudhistira. Bogor.
1994.
14. Ulrich. Katherine. 'Jisual Quick Start Guide. Macromedia Flash
MX for Windows and Macintosh`. Peachpit Press. USA. 2002.
15. Wiiaya. Didik. 'Tip & Trik Macromedia Flash 5.0 dengan
ActionScript`. PT. Elex Media Komputindo. Jakarta. 2002.
16. Zeembry. '123 Tip dan Trik ActionScript Flash MX 2004`. PT.
Elex Media Komputindo. Jakarta. 2005.
61
LAMPIRAN A
ActionScript pada Page Flip v2.13 frame 7
page=0;
maxpage=pageOrder.length;
clickarea = 0.25*pw;
afa = 0.2*pw;
gs = 2;
ps = 5;
es = 3;
if(pageOrder.length>1) {
canflip = true;
} else {
canflip = false;
}
//do not change these values:
---------------------------------------------------------------------------------------
------------------------------
_global.mcnt = 0;
gpage = 0;
gflip = false;
gdir = 0;
gskip = false;
gtarget = 0;
aflip = false;
flip = false;
flipOff = false;
flipOK = false;
hflip = false;
rotz = - 30;
preflip = false;
ctear = false;
tear = false;
teard = 0;
tlimit = 80;
removedPages = new Array();
mpx = 0, mpy = 0;
sx = sy = 0;
62
x = 0;
y = 0;
ax = 0;
ay = 0;
acnt = 0;
aadd = 0;
aamp = 0;
AM = Math.PÌ/180;
function reset() {
pages.p0.page._x = -pw;
pages.p0._x = 0;
pages.p1.page._x = -pw;
pages.p1._x = 0;
pages.flip.p2.page._x = -pw;
pages.flip.p2._x = pw;
pages.flip.p3.page._x = -pw;
pages.flip.p3._x = 0;
pages.p4.page._x = -pw;
pages.p4._x = pw;
pages.p5.page._x = -pw;
pages.p5._x = pw;
pages.pgrad._visible = pages.mask._visible =
pages.flip._visible = false;
pages.flip.p3mask._width = pages.pgmask._width = pw*2;
pages.center._height = pages.flip.p3mask._height =
pages.pgmask._height = ph;
pages.flip.fmask.page.pf._width = pw;
pages.center._width = 6;
pages.flip.fmask.page.pf._height = ph;
pages.mask._height = pages.pgrad._height =
pages.flip.p3shadow._height = pages.flip.flipgrad._height
= 2*Math.sqrt(ph*ph+pw*pw);
pageNumber = new Array();
for(i=0;i<=(maxpage+1);i++) pageNumber[i] = i;
}
mousecontroll = new Object();
mousecontroll.onMouseDown = function() {
63
if(flip && !aflip) {// && !preflip) {
flipOK = false;
if(sx<0 && pages._xmouse>0) flipOK = true;
if(sx>0 && pages._xmouse<0) flipOK = true;
flipOff = true;
flip = false;
} else if((flipOff || aflip || !canflip) && !preflip) {
trace("donothing");
} else {
var oox = ox;
var ooy = oy;
var osx = sx;
var osy = sy;
var hit = hittest();
if(hit) {
anim._visible = false;
flip = true;
flipOff = false;
tear = false;
ox = sx = hit*pw;
if(preflip) {
aflip = preflip = false;
ox = oox, oy = ooy;
sx = osx, sy = osy;
}
pages.flip.setMask(pages.mask);
mpx = pages._xmouse, mpy =
pages._ymouse;
//_quality = "MEDÌUM";
}
}
}
mousecontroll.onMouseUp = function() {
if(flip && !tear) {
if((Math.abs(pages._xmouse)>(pw-afa) &&
Math.abs(pages._ymouse)>(ph/2-afa) &&
Math.abs(pages._xmouse-mpx)<afa) || preflip) {
flip = false;
preflip = false;
64
autoflip();
} else if(!preflip) {
preflip = false;
flipOK = false;
if(sx<0 && pages._xmouse>0) flipOK =
true;
if(sx>0 && pages._xmouse<0) flipOK =
true;
flipOff = true;
flip = false;
}
}
}
function hittest() {
var x=pages._xmouse;
var y=pages._ymouse;
var pmh = ph/2;
if(y<=pmh && y>=-pmh && x<=pw && x>=-pw) {
var r = Math.sqrt(x*x+y*y);
var a = Math.asin(y/r);
var y = Math.tan(a)*pw;
if(y>0 && y>ph/2) y = ph/2;
if(y<0 && y<-ph/2) y = - ph/2;
oy = sy = y;
r0 = Math.sqrt((sy+ph/2)*(sy+ph/2)+pw*pw);
r1 = Math.sqrt((ph/2-sy)*(ph/2-sy)+pw*pw);
pageN = eval("pages.flip.p2.page");
pageO = eval("pages.flip.p3");
offs = -pw;
pages.flip.fmask._x = pw;
if(x<-(pw-clickarea) && page>0) {
pages.flip.p3._x = 0;
hflip = checkCover(page,-1);
setPages(page-2,page-1,page,page+1);
ctear = pageCanTear[page-1];
return -1;
}
if(x>(pw-clickarea) && page<maxpage) {
65
pages.flip.p3._x = pw;
hflip = checkCover(page,1);
setPages(page,page+2,page+1,page+3);
ctear = pageCanTear[page+2];
return 1;
}
} else return 0;
}
function checkCover(p,dir) {
if(hcover) {
if(dir>0) {
if(p==(maxpage-2) || p==0) return true;
} else {
if(p==maxpage || p==2) return true;
}
}
return false;
}
function corner() {
var x = Math.abs(pages._xmouse);
var y = Math.abs(pages._ymouse);
if(x>(pw-afa) && x<pw && y>(ph/2-afa) && y<(ph/2)) {
return true;
}
return false;
}
function oef() {
_global.mcnt++;
if(!flip && corner()) {
preflip = true;
if(!autoflip()) preflip = false;
}
if(preflip && !corner()) {
preflip = false;
flip = false;
flipOK = false;
flipOff = true;
66
}
getm();
if(aflip && !preflip) {
y = (ay += (sy-ay)/(gflip? gs: ps ));
acnt += aadd;
ax -= aadd;
if(Math.abs(acnt)>pw) {
flipOK = true;
flipOff = true;
flip = false;
aflip = false;
}
}
if(flip) {
if(tear) {
x = tox;
y = (toy += teard);
teard *= 1.2;
if(Math.abs(teard)>1200) {
flipOff = true;
flip = false;
}
} else {
x = (ox += (x-ox)/(gflip? gs: ps ));
y = (oy += (y-oy)/(gflip? gs: ps ));
}
calc(x,y);
}
if(flipOff) {
if(flipOK || tear) {
x = (ox += (-sx-ox)/(gflip? gs: es ));
y = (oy += (sy-oy)/(gflip? gs: es ));
calc(x,y);
if(x/-sx > 0.99 || tear) {
flip = false;
flipOK = flipOff = false;
pages.pgrad._visible =
pages.flip._visible = false;
//_quality = "BEST";
67
if(tear) {
removePage((sx<0)?
page: page+1);
page += (sx<0)? -2: 0;
} else {
page += (sx<0)? -2: 2;
}
if(gskip) page = gtarget;
setPages(page,0,0,page+1);
tear = false;
if(gpage>0 && !gskip) {
gpage--;
autoflip();
} else gflip = gskip = false;
}
} else {
x = (ox += (sx-ox)/3);
y = (oy += (sy-oy)/3);
calc(x,y);
if(x/sx > 0.99) {
flip = false;
flipOff = false;
aflip = false;
pages.pgrad._visible =
pages.flip._visible = false;
//_quality = "HÌGH";
setPages(page,0,0,page+1); .
}
}
}
}
function calc(x,y) {
if(hflip) {
var xp = (sx<0)? -x: x;
if(xp>0) {
sp2._visible = false;
sp3._visible = true;
scalc(sp3,x);
68
} else {
sp3._visible = false;
sp2._visible = true;
scalc(sp2,x);
}
pages.flip.setMask(null);
pages.flip._visible = true;
pages.flip.fgrad._visible = false;
pages.flip.p2._visible = pages.flip.p3._visible =
false;
return;
} else pages.flip.fgrad._visible = true;
var rr0 = Math.sqrt((y+ph/2)*(y+ph/2)+x*x);
var rr1 = Math.sqrt((ph/2-y)*(ph/2-y)+x*x);
if((rr0>r0 || rr1>r1) && !tear) {
if(y<sy) {
var a = Math.asin((ph/2-y)/rr1);
y = (ph/2-Math.sin(a)*r1);
x = (x<0)? -Math.cos(a)*r1:
Math.cos(a)*r1;
if(y>sy) {
if((sx*x)>0) y = sy, x = sx;
else y = sy, x = -sx;
}
if((rr1-r1)>tlimit && ctear) {
teard = -5;
tear = true;
tox = ox = x;
toy = oy = y;
}
} else {
var a = Math.asin((y+ph/2)/rr0);
y = Math.sin(a)*r0-ph/2;
x = (x<0)? -Math.cos(a)*r0:
Math.cos(a)*r0;
if(y<sy) {
if((sx*x)>0) y = sy, x = sx;
else y = sy, x = -sx;
69
}
if((rr0-r0)>tlimit && ctear) {
teard = 5;
tear = true;
tox = ox = x;
toy = oy = y;
}
}
}
if((sx<0 && (x-sx)<10) || (sx>0 && (sx-x)<10)) {
if(sx<0) x = -pw+10;
if(sx>0) x = pw-10;
}
pages.flip._visible = true;
pages.flip.p3shadow._visible = pages.pgrad._visible
= !tear;
pages.flip.p2._visible = pages.flip.p3._visible = true;
var vx = x-sx;
var vy = y-sy;
var a1 = vy/vx;
var a2 = -vy/vx;
cx = sx+(vx/2);
cy = sy+(vy/2);
var r = Math.sqrt((sx-x)*(sx-x)+(sy-y)*(sy-y));
var a = Math.asin((sy-y)/r);
if(sx<0) a = -a;
ad = a/AM; //in degree
pageN._rotation = ad*2;
r = Math.sqrt((sx-x)*(sx-x)+(sy-y)*(sy-y));
rl = (pw*2);
if(sx>0) {
pages.mask._xscale = 100;
nx = cx-Math.tan(a)*(ph/2-cy);
ny = ph/2;
if(nx>pw) {
nx = pw;
ny = cy+Math.tan(Math.PÌ/2+a)*(pw-cx);
}
pageN.pf._x = -(pw-nx);
70
pages.flip.fgrad._xscale = (r/rl/2)*pw;
pages.pgrad._xscale = -(r/rl/2)*pw;
pages.flip.p3shadow._xscale = (r/rl/2)*pw;
} else {
pages.mask._xscale = -100;
nx = cx-Math.tan(a)*(ph/2-cy);
ny = ph/2;
if(nx<-pw) {
nx = -pw;
ny = cy+Math.tan(Math.PÌ/2+a)*(-pw-cx);
}
pageN.pf._x = -(pw-(pw+nx));
pages.flip.fgrad._xscale = -(r/rl/2)*pw;
pages.pgrad._xscale = (r/rl/2)*pw;
pages.flip.p3shadow._xscale = -(r/rl/2)*pw;
}
pages.mask._x = cx;
pages.mask._y = cy;
pages.mask._rotation = ad;
pageN.pf._y = -ny;
pageN._x = nx+offs;
pageN._y = ny;
pages.flip.fgrad._x = cx;
pages.flip.fgrad._y = cy;
pages.flip.fgrad._rotation = ad;
pages.flip.fgrad._alpha = (r>(rl-50))? 100-(r-(rl-50))*2: 100;
pages.flip.p3shadow._x = cx;
pages.flip.p3shadow._y = cy;
pages.flip.p3shadow._rotation = ad;
pages.flip.p3shadow._alpha = (r>(rl-50))?
100-(r-(rl-50))*2: 100;
pages.pgrad._x = cx;
pages.pgrad._y = cy;
pages.pgrad._rotation = ad+180;
pages.pgrad._alpha = (r>(rl-100))? 100-(r-(rl-100)): 100;
pages.flip.fmask.page._x = pageN._x;
pages.flip.fmask.page._y = pageN._y;
pages.flip.fmask.page.pf._x = pageN.pf._x;
pages.flip.fmask.page.pf._y = pageN.pf._y;
71
pages.flip.fmask.page._rotation = pageN._rotation;
}
function scalc(obj,x) {
if(x<-pw) x=-pw;
if(x>pw) x=pw;
var a = Math.asin( x/pw );
var rot = a/AM/2;
var xs = 100;
var ss = 100*Math.sin( rotz*AM );
x = x/2;
var y = Math.cos(a)*(pw/2)*(ss/100);
placeÌmg(obj, rot, ss, x, y)
pages.pgrad._visible = pages.flip._visible = true;
pages.pgrad._xscale = x;
pages.pgrad._alpha = pages.flip.p3shadow._alpha = 100;
pages.flip.p3shadow._xscale = -x;
pages.flip.p3shadow._x = 0;
pages.flip.p3shadow._y = 0;
pages.flip.p3shadow._rotation = 0;
pages.pgrad._x = 0;
pages.pgrad._y = 0;
pages.pgrad._rotation = 0;
}
function placeÌmg(j, rot, ss, x, y) {
var m = Math.tan( rot*AM );
var f = Math.SQRT2/Math.sqrt(m*m+1);
var phxs = 100*m;
var phRot = -rot;;
var xs = 100*f;
var ys = 100*f;
j.ph.pic._rotation = 45;
j.ph.pic._xscale = (phxs<0)? - xs: xs;
j.ph.pic._yscale = ys*(100/ss);
j.ph._rotation = phRot;
j.ph._xscale = phxs;
j._yscale = ss;
j._x = x;
72
j._y = y;
j._visible = true;
}
function setPages(p1,p2,p3,p4) {
p0 = p1-2;
p5 = p4+2;
if(p0<0) p0=0;
if(p5>maxpage) p5=0;
if(p1<0) p1=0;
if(p2<0) p2=0;
if(p3<0) p3=0;
if(p4<0) p4=0;
trace("setpages ->("+p0+") "+p1+","+p2+","+p3+","+p4+"
("+p5+")");
if(transparency) {
pages.p0.page.pf.ph.pic._x = -(p0-1)*pw;
pages.p0.page.pf.ph._y = -ph/2;
}
pages.p1.page.pf.ph.pic._x = -(p1-1)*pw;
pages.p1.page.pf.ph._y = -ph/2;
if(hflip) {
pages.flip.hfliph.sp2._visible = 1;
pages.flip.hfliph.sp3._visible = 1;
sp2 = eval("pages.flip.hfliph.sp2");
sp2.ph.pic.pic._x = -(p2-1)*pw - pw/2;
sp3 = eval("pages.flip.hfliph.sp3");
sp3.ph.pic.pic._x = -(p3-1)*pw - pw/2;
} else {
pages.flip.hfliph.sp2._visible = 0;
pages.flip.hfliph.sp3._visible = 0;
sp2 = eval("pages.flip.p2.page.pf.ph.pic");
pages.flip.p2.page.pf.ph.pic._x = -(p2-1)*pw;
pages.flip.p2.page.pf.ph._y = -ph/2;
sp3 = eval("pages.flip.p3.page.pf.ph.pic");
pages.flip.p3.page.pf.ph.pic._x = -(p3-1)*pw;
pages.flip.p3.page.pf.ph._y = -ph/2;
73
}
pages.p4.page.pf.ph.pic._x = -(p4-1)*pw;
pages.p4.page.pf.ph._y = -ph/2;
if(transparency) {
pages.p5.page.pf.ph.pic._x = -(p5-1)*pw;
pages.p5.page.pf.ph._y = -ph/2;
}
}
function resetPages() {
setPages(page,0,0,page+1);
}
function autoflip() {
if(!aflip && !flip && !flipOff && canflip) {
acnt = 0
aamp = Math.random()*(ph/2)-(ph/4);
var x= gflip? (gdir*pw)/2: ((pages._xmouse<0)?
-pw/2: pw/2);
//var y= Math.random()*ph-(ph/2);
var y = Math.random()*(ph/2)-(ph/4);
var pmh = ph/2;
var r = Math.sqrt(x*x+y*y);
var a = Math.asin(y/r);
var yy = Math.tan(a)*pw;
if(y>0 && y>ph/2) y = ph/2;
if(y<0 && y<-ph/2) y = - ph/2;
oy = sy = yy;
ax = (pages._xmouse<0)? -pw/2: pw/2;
var l = ((ph/2)-y);
ay = y+((Math.random()*2*l)-l)/2;
//trace("autoflip from "+ax+","+ay);
offs = -pw;
var hit = 0;
if(x<0 && page>0) {
pages.flip.p3._x = 0;
hflip = (hcover && gskip)? gtarget==0:
checkCover(page,-1);
if(!(preflip && hflip)) {
74
if(gskip)
setPages(gtarget,gtarget+1,page,page+1);
else
setPages(page-2,page-1,page,page+1);
}
hit = -1;
}
if(x>0 && page<maxpage) {
pages.flip.p3._x = pw;
hflip = (hcover && gskip)?
gtarget==maxpage:
checkCover(page,1);
if(!(preflip && hflip)) {
if(gskip)
setPages(page,gtarget,page+1,gtarget+1);
else
setPages(page,page+2,page+1,page+3);
}
hit = 1;
}
if(hflip && preflip) {
hit = 0;
preflip = false;
return false;
}
if(hit) {
anim._visible = false;
flip = true;
flipOff = false;
ox = sx = hit*pw;
pages.flip.setMask(pages.mask);
aadd = hit*(pw/(gflip? 5:10 ));
aflip = true;
pages.flip.fmask._x = pw;
if(preflip) {
oy = sy = (pages._ymouse<0)?
-(ph/2): (ph/2);
}
r0 =
75
Math.sqrt((sy+ph/2)*(sy+ph/2)+pw*pw);
r1 =
Math.sqrt((ph/2-sy)*(ph/2-sy)+pw*pw);
pageN = eval("pages.flip.p2.page");
pageO = eval("pages.flip.p3");
oef();
return true;
}
} else return false;
}
function getm() {
if(aflip && !preflip) {
x = ax;
y = ay;
} else {
x = pages._xmouse;
y = pages._ymouse;
}
}
function gotoPage(i,skip) {
i = getPN(i);
gskip = (skip==undefined)? false: skip;
if(i<0) return false;
var p = int(page/2);
var d = int(i/2);
if(p!=d && canflip && !gflip) {
if(p<d) {
gdir = 1;
gpage = d-p-1;
} else {
gdir = -1
gpage = p-d-1;
}
gflip = true;
if(gskip) gtarget = d*2, gpage = 0;
autoflip();
} else gskip = false;
76
}
function getPN(i) {
var find = false;
for(j=1;j<=maxpage;j++) {
if(i==pageNumber[j]) {
i=j;
find = true;
break;
}
}
if(find) return i;
else return -1;
}
function removePage(i) {
trace("remove page "+i);
i = (Math.floor((i-1)/2)*2)+1;
removedPages.push(pageNumber[i], pageNumber[i+1]);
var init = (transparency)? 0 : 1;
for(var k=init;k<pageClips.length;k++) {
for(var m=i;m<=pageOrder.length;m++) {
p = eval(pageClips[k]+".p"+m);
if(m==i || m==i+1) p.removeMovieClip();
else p._x += -pw*2;
}
}
for(var k=i;k<=pageOrder.length;k++) {
var p2 =
eval("pages.flip.hfliph.sp2.ph.pic.pic.p"+k);
var p3 =
eval("pages.flip.hfliph.sp3.ph.pic.pic.p"+k);
if(k==i || k==i+1) p2.removeMovieClip(),
p3.removeMovieClip;
else p2._x += -pw*2, p3._x += -pw*2;
}
for(j=(i+2);j<=(maxPage+1);j++) {
pageOrder[j-2]=pageOrder[j];
pageCanTear[j-2]=pageCanTear[j];
pageNumber[j-2]=pageNumber[j];
77
}
trace("removed pages "+i+","+(i+1));
trace(removedPages.join(", "));
maxPage -= 2;
}
78
LAMPIRAN B
Program koneksi PHP dengan MySQL
·?
/*
this conIiguration Ior database connection
(param
$host
$database
$username
$password
*/
iI(ereg("dbConnect.php".$SERVER|'PHPSELF'|)) exit();
$host÷"localhost";
$database÷"quiz";
$username÷"root";
$password÷"";
iI(mysqlconnect($host.$username.$password))¦
iI(mysqlselectdb($database))¦
//success connection
}else¦
echo "·script~alert(\"Connect to $database
Iailed !\")·/script~";
echo "·noscript~Connect to $database
Iailed !·/noscript~";
}
}else¦
echo "·script~alert(\"Connect to $host Iailed !\")·/script~";
echo "·noscript~Connect to $host Iailed·/noscript~";
}
?~
79
Program menampilkan pertanyaan secara random
·!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"~
·html~
·head~
·link hreI÷"Quiz/styles.css" rel÷"stylesheet" type÷"text/css"~
·meta http-equiv÷"Content-Type" content÷"text/html;
charset÷iso-8859-1"~
·?
$level÷(int)$GET|"level"|;
iI($level·0 '' $level~2)
$level÷1;
?~
·title~Gladhen·? $level ?~·/title~
·/head~
·body background÷"images/bg2.ipg"~
·?
include("dbConnect.php");
//$arrID|11|;
$val ÷ "Ialse";
$k ÷ 1;
Ior($i÷1;$i·÷$level*10;$i¹¹)¦
$arrID|$i| ÷ 0;
}
echo "·Iorm name÷'soal' method÷'post' action÷'nilai.php'~ \n";
echo "·center~·marquee behavior÷'alternate'
width÷'500'~·Iont Iace÷'Yarnell' color÷'#990000'
size÷'10'~Gladhen$level·/Iont~·/marquee~·/center~·br~
·hr color÷'#0066FF' size÷'8' width÷'98°' noshade~·br~";
echo "&nbsp; &nbsp; ·Iont Iace÷'arial' color÷'blue'
size÷'3'~Pitakon-pitakon ing ngisor iki wangsulana kanthi milih
iawaban kang bener!·/Iont~·br~·br~";
$sql÷"select * Irom pertanyaan";
80
$query÷mysqlquery($sql);
$iumlah÷mysqlnumrows($query);
srand((Iloat) microtime() * 10000000);
do¦
$hslRandom÷rand(1.$iumlah);
$sql ÷ "select * Irom pertanyaan where level÷".$level;
$result ÷ mysqlquery($sql);
}while(!mysqlnumrows($result));
$arrID|1|÷$hslRandom;
$sql÷"select * Irom pertanyaan where idpertanyaan ÷ '" .
$hslRandom."'";
$result ÷ mysqlquery($sql);
$content ÷ mysqlIetcharray($result);
echo " &nbsp; &nbsp; ·Iont Iace÷'arial'~ ". "1.". " ".
$content|"pertanyaan"|."·/Iont~·br~ \n ";
$pertanyaanid÷$content|"idpertanyaan"|;
$sql÷"select * Irom iawaban where
pertanyaanid÷'".$content|"idpertanyaan"|."'";
$result÷mysqlquery($sql);
while($content÷mysqlIetcharray($result))¦
echo "&nbsp; &nbsp; &nbsp; &nbsp; ·Iont
Iace÷'arial'~·input type÷'radio' name÷'".$pertanyaanid."'
value÷'".$content|"idiawaban"|."'~
".$content|"iawaban"|."·/Iont~·br~ \n ";
}
echo "·br~";
Ior($i÷2; $i·÷$level*10; $i¹¹)
¦
do ¦
do¦
$hslRandom ÷ rand(1.$iumlah);
}while(inarray($hslRandom.$arrID.true));
$sql ÷ "select * Irom pertanyaan where
idpertanyaan ÷ '" . $hslRandom."' and
level÷".$level;
81
$result ÷ mysqlquery($sql);
$content÷mysqlIetcharray($result);
$question÷$content|"pertanyaan"|;
}while(!mysqlnumrows($result));
$arrID|$i|÷$hslRandom;
//$content ÷ mysqlIetcharray($result);
echo " &nbsp; &nbsp; ·Iont Iace÷'arial'~ ". $i. ".". " ".
$question."·/Iont~·br~ \n ";
$pertanyaanid÷$content|"idpertanyaan"|;
$sql÷"select * Irom iawaban where
pertanyaanid÷'".$content|"idpertanyaan"|."'";
$result÷mysqlquery($sql);
while($content÷mysqlIetcharray($result))¦
echo "&nbsp; &nbsp; &nbsp; &nbsp; ·Iont
Iace÷'arial'~·input type÷'radio'
name÷'".$pertanyaanid."'
value÷'".$content|"idiawaban"|."'~
".$content|"iawaban"|."·/Iont~·br~ \n ";
}
echo "·br~";
}
Ior($y÷1;$y·÷$level*10;$y¹¹)
$tanya.÷$arrID|$y|.".";
$tanya÷substr($tanya.0.strlen($tanya)-1);
echo "·input type÷'hidden' value÷'".$tanya."' name÷'tanya'~
\n";
echo "·div align÷'center'~ ·input type÷\"button\"
name÷\"cancel\" value÷\"Mbalik .... \"
onClick÷\"window.location÷('index.php')\"~ &nbsp;
&nbsp ·input type÷\"submit\" name÷\"Submit\"
value÷\"Sampun ...\"~·/div~";
echo "·/Iorm~\n ";
?~
·/body~
·/html~
82
Program menampilkan nilai dan kunci jawaban
·!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"~
·html~
·head~
·title~Nilai!·/title~
·link hreI÷"styles.css" rel÷"stylesheet" type÷"text/css"~
·meta http-equiv÷"Content-Type" content÷"text/html;
charset÷iso-8859-1"~
·/head~
·body background÷"images/bg1.ipg"~
·?
include("dbConnect.php");
$nilai÷0;
$pilih÷split(".".$POST|"tanya"|);
Ior($i÷0;$i·count($pilih);$i¹¹)¦
$query÷"select * Irom iawaban where
idiawaban÷'".$POST|$pilih|$i||."'";
$result÷mysqlquery($query);
iI(mysqlnumrows($result))¦
$content÷mysqlIetcharray($result);
$nilai¹÷$content|"iawabval"|*1/count($pilih)*100;
}
}
echo "·center~·h1~·Iont Iace÷'verdana' color÷'lightgreen'
size÷'24'~Nilai:·/Iont~·/h1~·/center~";
echo "·center~·b~·Iont Iace÷'verdana' color÷'blue' size÷'44'
~$nilai·/Iont~·/b~·/center~";
echo "·br~";
echo "&nbsp; &nbsp; ·u~·Iont Iace÷'verdana' color÷'blue'
size÷'6'~Kunci iawaban·/Iont~·/u~";
echo "·br~·br~";
Ior($i÷0;$i·count($pilih);$i¹¹)¦
$query÷"select * Irom pertanyaan where
idpertanyaan÷'".$pilih|$i|."'";
$result÷mysqlquery($query);
83
iI(mysqlnumrows($result))¦
$content÷mysqlIetcharray($result);
echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ";
echo $i¹1 ."·b~·Iont Iace÷'arial'~.
".$content|"pertanyaan"|."·/Iont~·/b~·br~";
$query÷"select * Irom iawaban where
pertanyaanid÷'".$content|"idpertanyaan"|." ' and
iawabval÷'1'";
$result÷mysqlquery($query);
iI(mysqlnumrows($result))¦
$content÷mysqlIetcharray($result);
echo "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ·b~·Iont
Iace÷'arial' color÷'#990066'~iawaban :·/Iont~·/b~
" ."·b~·Iont
Iace÷'arial'~" .$content|"iawaban"|."·/Iont~·/b~·br~·br~";
}
}
}
echo "·div align÷'center'~ ·input type÷\"button\"
name÷\"cancel\" value÷\"Milih tingkat .. \"
onClick÷\"window.location÷('index.php')\"~·/div~";
?~
·/body~
·/html~
85
RIWAYAT HIDUP PENULIS
Penulis dilahirkan di Surabaya dari pasangan Wisnoe Widodo dan
Elizabeth Anggraeni Amalo. Penulis merupakan anak pertama dari
dua bersaudara. Penulis mempunyai motto hidup : `Start vour dav
with a smile. And when vou are doing something. do vour verv best
and never give up. Keep smiling. be happv. and be vourself'`. Penulis
gemar membaca buku-buku non-Iiksi. mempunyai kepribadian yang
rendah hati dan selalu bersemangat. serta seseorang yang suka
menolong siapa saia yang membutuhkan.
Riwayat Pendidikan :
SDN Semolowaru 4 Surabaya
SLTP Muhammadiyah 5 Surabaya
Hillcrest High School New Zealand
PENS ITS Tehnik Telekomunikasi
Pelatihan yang pernah diikuti :
Oracle Intro to SQL
Oracle Fundamental 1
Cisco Router
Applied Electronics
Seminar MUGI Antivirus dan Spyware
Robot ¨Line Tracers¨ Tingkat Dasar
Nama : Larasati Prawadika
TTL : Surabaya. 25 Februari 1986
Alamat : Jl. Semolowaru Elok Y-6
Surabaya
No. Telp: 031 5994836 / 08563327016
Hobi : Reading non-fiction books.
learn new things.and
smiling'' ´´
E-mail : iclaras(yahoo.com
86
Pengalaman Organisasi :
Panitia Robot Contest 2003
Anggota OC IPT 2004
Anggota FORKOM 2004
Anggota MUGI PENS-ITS
Panitia Study Excursie 2005 Tehnik Telekomunikasi
Debater in the 6th National Polytechnic English Debate
Contest

Sign up to vote on this title
UsefulNot useful