web bhs jawa

PROYEK AKHIR

PEMBUATAN WEB TUTORIAL PENGENALAN BAHASA JAWA UNTUK ANAK SEKOLAH DASAR(DESAIN GLOBAL DAN PEMROGRAMAN WEB)

Larasati PrawadikaNRP.7203.030.003

Dosen Pembimbing:

Tri Budi Santoso, MTNIP. 132 128 464

Ir. Nonot Harsono, MTNIP. 131 964 535

JURUSAN TELEKOMUNIKASIPOLITEKNIK ELEKTRONIKA NEGERI SURABAYA

SURABAYA 2006

ii


Oleh:

LARASATI PRAWADIKA7203.030.003

Proyek Akhir ini Diajukan Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Ahli Madya (A.Md.)

diPoliteknik Elektronika Negeri Surabaya

Institut Teknologi Sepuluh Nopember Surabaya

Disetujui oleh

Tim Penguji Proyek Akhir: Dosen Pembimbing:

1. Drs. Miftahul Huda, MT 1. Tri Budi Santoso, MTNIP. 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 Jurusan Telekomunikasi

Drs. Miftahul Huda, MTNIP. 132 055 257

iii

ABSTRAK

Di propinsi Jawa Tengah dan Jawa Timur, pelajaran Bahasa Daerah, dalam hal ini Bahasa Jawa, pada umumnya bukan sebuah mata pelajaran favorit 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 mempelajari Bahasa Jawa.

Dalam Proyek Akhir ini dibuat tampilan web yang dilengkapi dengan animasi untuk membuat web ini menjadi lebih menarik, sehingga anak menjadi berminat mempelajarinya. 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 jauh si anak (atau pengguna) mengenal kata dalam Bahasa Jawa dan mengerti letak penggunaannya, dalam Proyek ini disediakan juga sebuah latihan atau kuis dengan pilihan ganda yang menggunakan bahasa pemrograman PHP. Di akhir kuis ini diberikan nilai dari soal-soal yang sudah terjawab dan diberikan juga jawaban yang benarsebagai review.

Kata Kunci : Bahasa Jawa, Macromedia Flash, web tutorial.

iv

ABSTRACT

As we know, in Middle and East Java, a Javanese language subject is the least favourite subject for the students at school. That is why we are making a web based tutorial to introduce the vocabulary in Javanese language to Elementary School studentswhich is taken from the “Pepak Basa Jawa” book, which is suitable for the local curriculum. With this tutorial hopefully could bring students interest to higher level in studying Javanese language.

For this Final Project, the web layout is made with animations to make it more interesting, hopefully the students will have more interest to study it. This animations, in the shape of moving pictures or text, are made using Macromedia Flash MX software. And a simple navigation system is made to make it easier to access. That is why we provide a menu in this Project which include the vocabulary categories, such as Names of Animal and Their Babies (Jenenge Kewan & Anake), Krama Inggil words (Tembung Krama Inggil), Proverb (Paribasan-Bebasan-Saloka), and much more.

To know how far the student recognize the words in Javanese language and also know how to use it in a sentence, in this Project we also provide a quiz with multiple choice which is made using PHP programming language. And at the end of the quiz, a score and the answers are given as a review.

Keywords : Javanese language, Macromedia Flash, tutorial website.

v

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT yang telah melimpahkan rahmat serta hidayah-NYA, penulis dapat menyelesaikan penyususunan dan pembuatan laporan dari Tugas Akhir dengan judul:


Tugas Akhir ini merupakan salah satu kegiatan yang berkaitan dengan kurikulum perkuliahan dengan beban sebesar duabelas SKS (12 jam 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 saja 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 maaf 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 manfaat 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 panjatkan 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 terwujudnya Proyek Akhir ini tak lepas dari bantuan, bimbingan dan dukungan dari berbagaipihak. 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 jauhnya. ”I miss u ..”

2. Bapak Dr.Ir. Titon Dutono selaku Direktur PENS-ITS.3. Bapak Drs. Miftahul 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 Penguji Proyek Akhir yang telah banyak memberikan saran dan kritik yang bersifat 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 everything guys .... !!!Honestly ..”

12.And of 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.... yaaah!!!” ^_^

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 Tujuan .......................................................................... 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 Kerja Page Flip v2.13 .................................. 41

4.4 Pembuatan Kategori ................................................... 46

4.5 Pembuatan Kuis ......................................................... 48

4.6 Pengujian 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 frame ...................................................... 7

Gambar 2.2 Gambar dari keyframe dan blank keyframe ................ 7

Gambar 2.3 Contoh animasi frame ................................................. 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 frame ............................. 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 flip – original ..................................... 23

Gambar 3.6 Tampilan halaman terdepan (cover) .......................... 23

Gambar 3.7 Tampilan halaman penunjuk 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 kerja 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 Wavesurfer 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 pageflip .................................... 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 flip 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 jawabannya ..................... 49

xii

DAFTAR TABEL

Tabel 1. Tabel hasil pengujian sistem 1 ......................................... 51

Tabel 2. Tabel hasil pengujian sistem 2 ......................................... 55

1

B A B 1PENDAHULUAN

1.1. Latar BelakangPelajaran bahasa daerah, dalam hal ini adalah bahasa Jawa, hanya

diberikan sewaktu kita menginjak 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 bumimanapun.

Semakin lama ketertarikan orang untuk mempelajari Bahasa Jawa semakin menurun. Hal ini seperti yang dikatakan oleh kebanyakan para murid bahwa pelajaran Bahasa Daerah bukanlah merupakan salah satu ”bidang studi favorit”. Pada dasarnya, dalam mengerjakan Proyek Akhir ini, selain untuk memperkenalkan perbendaharaan kata yang terdapat dalam Bahasa Jawa, kita juga dapat menambah wawasan mengenai dunia maya 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 menunjukkan bahwa masih ada penerus bangsa yang memiliki keinginan untuk belajar 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 tujuan yang mulia, karena ”Kebudayaan daerah merupakan bagian dari kebudayaan nasional” [ ]12

1.2. TujuanAdapun tujuan 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 memperjelas wacana para pembacanya. Adapun tujuan lainnya yaitu untuk memperkenalkan internet kepada generasi muda kita.

1.3. PermasalahanPermasalahan 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 pembelajaran Bahasa Jawa merupakan salah satu kendala yang harus dihadapi.

1.4. Batasan MasalahDalam 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 juga diberikan sebuah latihan (kuis) dengan 2 pilihan level dan pilihan ganda menggunakan software Dreamweaver MX.Perbendaharaan kata yang ada pada web dan pertanyaan-pertanyaan pada kuis diambil dari buku Pepak Basa Jawa. Pada menu digunakan modul pageflip yang merupakan modul flash open source yang siap pakai, ActionScript dan pembuatan unsur-unsur pageflip tidak dibahas dan dibatasi hanya dalam penambahan halaman dan beberapa penyesuaian pageflip yang sesuai dengan konsep dan tujuan Proyek Akhir.

1.5 MetodologiDalam penyelesaian Proyek Akhir ini terdapat beberapa prosedur

yang telah dilakukan, yaitu :1. Studi literature

Pada tahapan ini, penulis mencari tahu serta mempelajari segala bentuk literatur yang berhubungan dengan Proyek Akhir ini, seperti halnya pembuatan animasi dan pembuatan kuis, karena disini penulis akan memilih output-an yang atraktif, sehingga dapat menarik minat masyarakat terutama anak-anak Sekolah Dasar.

2. Pengumpulan dataData yang dikumpulkan oleh penulis adalah berupa data gambar yang tidak nyata (kartun), perbendaharaan kata dalam Bahasa Jawa, data suara yaitu suara hewan (jika 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. DesainPada tahap ini penulis mulai memasuki dunia software-nya, dimana penulis juga mulai melakukan desain global untuk tampilan menu book-nya dan begitu juga desain tampilan untuk masing-masing kategorinya. Selain itu penulis juga mulai membuat database pertanyaan-pertanyaan untuk kuis serta jawaban-jawabannya.

4. Pembuatan dan Analisa SistemSemua prosedur yang telah dilakukan dikombinasikan menjadi satu, yang kemudian dilakukan pembuatan sistem secara keseluruhan dan menganalisanya serta dilakukan pengujian atas sistem tersebut, melalui pengoperasian web tutorial dari awal hingga proses berakhir untuk melihat apakah system berjalan seperti yang diharapkan.

5. Pembuatan LaporanPada tahap ini ketika semua proses sudah berhasil dibuat serta dijalankan, maka penulis mulai menyusun dan menyelesaikan pembuatan buku Proyek Akhir ini.

1.6 Sistematika PembahasanAdapun sistematika studi pembahasan dari Proyek Akhir ini

direncanakan sebagai berikut :

BAB 1 PENDAHULUANPada bab Pendahuluan ini akan menguraikan mengenai latar belakang, tujuan, permasalahan serta batasan masalah yang akan ditangani, metodologi, dan sistematika pembahasan.

BAB 2 DASAR TEORI Dalam menyelesaikan Proyek Akhir yang berjudul ”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 pengerjaannnya.

4

BAB 3 PERENCANAAN SISTEMDalam bab ini akan dijelaskan tentang perancangan sistem yang dibuat. Disini penulis akan menjelaskan beberapa tahap yang harus dilalui ketika proses awal pembuatan sistem, sepertipengumpulan data yang berupa gambar, suara, kumpulan soal dan jawaban, desain untuk tampilan page-nya, hingga pengolahan objek-objek tersebut untuk mendapatkan hasil akhir yang diharapkan.

BAB 4 PEMBUATAN DAN ANALISA SISTEMPada bab ini sistem mulai direalisasikan, disini akan dijelaskan tentang pembuatan sistem dari proses awal hingga akhir. Dalam proses pembuatan ini juga dilakukan analisa untuk mengetahui apakah kinerja dari setiap bagian sistem yang telah dibuat dapat berjalan dengan baik sehigga output yang ada sudah sesuai seperti yang diharapkan oleh penulis.

BAB 5 PENUTUPSetelah 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 juga akan memberikan beberapa saran yang membangun.

DAFTAR PUSTAKADaftar Pustaka adalah mengenai kumpulan dari beberapa referensi yang penulis gunakan sebagai acuan yang dapat mendukung terselesaikannya pembuatan Proyek Akhir ini, baik dalam aplikasinya maupun secara teori.

5

B A B 2TEORI DASAR

2.1 UMUMPada bab ini akan diberikan teori dasar yang melandasi permasa-

lahan dan penyelesaiannya yang diangkat dalam proyek akhir ini. Teoridasar yang diberikan meliputi: Macromedia Flash, yang akan menerangkan tentang fasilitas-fasilitas yang dimiliki Macromedia Flash serta macam-macam cara animasi menggunakan Flash MX. Dan juga akan diberikan sedikit pengenalan tentang Macromedia Fireworks MX, Macromedia Dreamweaver MX, dan PHP.

2.2 MACROMEDIA FLASH MXMacromedia 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 objek grafis yang bergerak dari besar menjadi kecil, dari terang menjadi tampak lebih redup, dari bentuk satu menjadi bentuk yang lain, dan masih banyak lagi yang lain. Adapun animasi-animasi objek grafis tersebut dapat dikerjakan dengan menggunakan Macromedia Flash MX. Flash MX juga mengenalkan bagaimana membuat movie clip, animasi frame, animasi tween motion, serta perintah action-nya.

Flash MX mempunyai banyak fasilitas yang sangat berdaya guna, tetapi mudah digunakan seperti membuat interface / form menggunakan komponen dengan drag and drop saja, efek-efek spesial animasi timeline yang sudah built-in, behavior yang juga sudah siap pakai untuk menambahkan interaktifitas 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 grafik, teks, animasi dan aplikasi untuk situs web. Pada Movie Flash juga bisa memasukkan unsur interaktif dalam movie-nya dengan bahasa pemrograman ActionScript, untuk memudahkan user berinteraksi dengan mouse dan keyboard, mengontrol

6

movie, memindahkan objek-objek, memasukkan informasi melalui form, dan begitu juga dengan operasi-operasi yang lainnya.

Adapun beberapa kemampuan Flash lainnya adalah sebagai berikut:� Dapat membuat tombol interaktif dengan sebuah movie atau

objek 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 form, presentasi

multimedia, game, kuis interaktif, simulasi / visualisasi� Dapat membuat situs web, aplikasi web, pengaturan halaman

web� Dapat dikonversi dan di-publish ke dalam beberapa tipe

seperti .swf, .html, .gif, .jpg, .png, .exe, .mov.

2.2.1 Istilah-istilah Umum dalam Program Flasha. PropertiesSuatu cabang perintah dari suatu perintah yang lain.

b. AnimasiSebuah gerakan objek maupun teks yang diatur sedemikian rupa sehingga kelihatan menarik.

c. ActionScriptSuatu perintah yang diletakkan pada suatu frame atau objek sehingga frame atau objek tersebut akan menjadi interaktif.

d. Movie ClipSuatu animasi yang dapat digabungkan dengan animasi atau objek yang lain.

e. FrameSuatu bagian dari layer yang digunakan untuk mengatur pembuatan animasi.

7

FrameGambar 2.1 Gambar dari frame

f.TimelineBagian dari program Macromedia Flash MX yang digunakan untuk menampung layer. Berikut ini adalah tampilan dari timeline.

g. MaskingSuatu perintah yang digunakan untuk menghilangkan sebuah isi dari suatu layer dan isi layer tersebut akan tampak saat movie dijalankan.

h. LayerSebuah nama tempat yang digunakan untuk menampung satu gerakan objek sehingga jika ingin membuat gerakan lebih dari satu objek sebaiknya diletakkan pada layer tersendiri.

i. KeyframeSuatu tanda yang digunakan untuk membatasi suatu gerakan animasi.

Blank Keyframe Keyframe Gambar 2.2 Gambar dari keyframe dan blank keyframe

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 objek-objek dari masing-masing layer.

8

Frame dapat diumpamakan seperti film. Film merupakan kumpulan gambar yang dimainkan secara berurutan dengan kecepatan tertentu sehingga gambar tersebut terlihat bergerak. Misalnya di Frame 1 terdapat objek di sebelah kiri layar dan di Frame 10 terdapat objek di sebelah kanan layar, maka ketika kumpulan frame tersebut digerakkan secara berurutan akan terlihat seolah-olah objek tersebut bergerak dari kiri ke kanan layar. Keyframe merupakan frame yang berisi objek. Ada perintah Insert Keyframe yang artinya apabila di frame 1 sudah terdapat objek lingkaran, kemudian kita masukkan keyframe di Frame 10, maka di Frame 10 pun terdapat objek lingkaran yang sama dengan frame 1. Keyframe dilambangkan dengan titik bulat hitam pada frame Blank Keyframe artinya kita mempersiapkan frame kosong untuk diisi objek baru. Apabila kita menggambar objek maka Blank Keyframe berubah menjadi Keyframe karena frame tersebut sudah berisi objek. Blank Keyframe dilambangkan dengan titik bulat putih pada frame. Action Frame, artinya terdapat ActionScript pada frame tersebut. Action Frame dilambangkan dengan huruf “a” di frame.

2.2.3 Animasi Dalam Flash Adapun beberapa animasi yang dipakai dalam pembuatan proyek akhir ini, diantaranya adalah :

a. Animasi dengan FrameAnimasi frame adalah animasi yang dibuat dengan menggunakan frame. Frame adalah suatu bagian dari Layer yang digunakan untuk mengatur pembuatan animasi. Metode yang dipakai adalah secara manual, dimana kita diharuskan membuat setiap objek yang berbeda pada setiap frame untuk menghasilkan animasi. Meskipun animasi yang dihasilkan terlihat lebih bagus dan halus daripada animasi metode tween, akan tetapi jarang digunakan karena pembuatan animasinya memerlukan ketelitian dan ukuran file animasi pun lebih besar. Pada contoh dibawah ini, Anda akan belajar bagaimana cara membuat animasi frame dengan memainkan warna huruf.

9

Animasi Frame

Gambar 2.3 Contoh animasi frame

b. Animasi Create Motion TweenAnimasi Create Motion Tween adalah animasi yang digunakan untuk menggerakkan objek berdasarkan batas suatu keyframe tertentu. Metode ini paling sering digunakan karena paling mudah dan cepat. Kita hanya perlu membuat atau menentukan objek di frame awal dan objek di frame akhir, kemudian secara otomatis Flash akan membuat frame diantara frame awal dan frame 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 TweenAnimasi Shape Tween adalah animasi yang digunakan untuk mengubah satu bentuk ke bentuk yang lain. Shape Tween juga disebut dengan efek morph. Berikut ini contoh animasi yang dibuat menggunakan Shape Tween.

Animasi Shape Gambar 2.5 Contoh animasi shape tween

d. Properti MaskProperti Mask digunakan untuk menyembunyikan atau menutupi suatu objek dengan objek lain. Objek yang menutupi terlihat transparan dan menyatu dengan objek yang ditutupi sehingga hanya objek yang ditutupi yang dapat dilihat. Berikut ini adalah contoh animasi yang dibuat menggunakan properti Mask.

MaskingGambar 2.6 Tampilan saat layer di-masking

11

2.2.4 Aplikasi ActionScript di Flasha. Script di FrameScript yang diletakkan di frame disebut frame-script. Untuk

meletakkan script di frame caranya yaitu :1. Tentukan frame berapa yang ingin diberi script. Peletakkan

harus di keyframe. Kalau di frame tersebut belum ada keyframe, 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 frame

Pastikan informasi lokasi di Panel Action menunjukkan tulisan “Frame” untuk menghindari kesalahan lebih lanjut. Setelah selesai mengetik script, tutup Panel Action, Anda akan menemukan tanda “a” di frame (keyframe) yang telah diletakkan script. Suatu waktu jika ingin mengubah script tersebut, klik tanda “a” di frame (keyframe) dan tekan tombol, (titik hitam). Layer tidak ada hubungannya dengan script.

b. Script di ButtonScript yang diletakkan di button disebut button-script. Untuk

meletakkan script di tombol caranya :1. Pastikan tombol yang dimaksud sudah terpilih (di-klik).

Perhatikan juga informasi 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 ButtonScript di tombol harus ada pemicunya. Kalau di frame hanya

mempunyai satu pemicu, di tombol memiliki banyak event, antara lain :� press : kejadian saat tombol mouse ditekan� release : kejadian saat tombol mouse ditekan dan kemudian

dilepas� rollOver : kejadian saat kursor mouse masuk dalam area objek

tombol. Pada saat ini tombol mouse belum ditekan� roolOut : kejadian saat kursor mouse masuk kemudian keluar

dari area objek tombol. Pada saat ini tombol mouse belum ditekan

b.2 Penulisan script di ButtonUntuk mengetik script di tombol, Anda harus tahu action atau

perintah apa saja yang akan dimasukkan. Secara umum bentuk script pada button adalah sebagai berikut.

on (nama_event) {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 NavigasiFungsi stop(); digunakan untuk menghentikan movie flash pada

frame yang diberi script ini.

13

Fungsi play(); digunakan untuk menjalankan movie flash pada frame yang diberi script ini.Syntax dalam Flash ActionScript merupakan case sensitif jadi terdapat perbedaan antara huruf kapital dan huruf kecil.

d. KomentarScript 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 frame tertentu gotoAndStop(10);

� Cara ke-2 :/* Perintah untuk pergi ke frame tertentu dan kemudian tetap dijalankan*/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 MovieclipAda banyak event yang terdapat di movie clip, tetapi hanya dua event

saja yang sering digunakan, yaitu :� load : kejadian saat movie clip pertama kali muncul di stage� enterFrame : kejadian saat movie clip masih berada di dalam

stage

2.3 MACROMEDIA FIREWORKS MXFireworks MX adalah salah satu software untuk membuat desain

grafis yang atraktif. Software ini merupakan program aplikasi untuk membuat, mengedit dan mengoptimalkan tatanan desain grafis web. Dalam Fireworks juga menyediakan berbagai tombol perintah untuk

14

membangun web. Anda dapat membuat dan mengedit grafik, memberi efek, serta memotong image untuk mengurangi ukuran file. Setelah halaman web di-edit, Anda dapat mengekspornya ke format JPEG, GIF atau format lain yang kompatibel.

2.3.1 Mengenal ToolbarToolbar 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 PanelBagian Panel berisi berbagai panel yang terbagi menjadi enam, yaitu

Select, Bitmap, Vektor, Colors dan View.

� Select Tool (Tombol Pemilih>Select tool berisi tombol-tombol perintah untuk memilih objek. Objek 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 objek bitmap, seperti membuat objek 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 objek vektor. Manipulasi yang dapat dilakukan antara lain membuat garis atau kurva, mengedit garis atau kurva, membuat tulisan dan memotong garis pada bidang kerja. Contoh dari tombol Vectorantara lain Rectangle, Ellipse dan Text.

� Color Tool (Tombol Warna)Tombol Color digunakan untuk mengubah warna objek. Fungsi utama dari tombol Color adalah untuk mengatur warna stroke dan fill pada objek 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 kerja, umumnya digunakan untuk mengatur bidang kerja atau halaman web yang besar. Contoh dari tombol View antara lain Standard Screen Mode, Hand, dan Zoom.

2.4 MACROMEDIA DREAMWEAVER MX2.4.1 Fasilitas dalam Dreamweaver MX

Macromedia Dreamweaver MX adalah program aplikasi profesional 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 fitur seperti HTML, CSS, JavaScript Reference dan JavaScript Debugger. Selain ini program aplikasi ini juga memungkinkan pengeditan JavaScript, XML dan dokumen teks lainnya secara langsung, yaitu dengan menggunakan fasilitas Code Editors.

Program aplikasi ini juga 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 interface standar yang lebih konsisten dengan produk athor Web Macromedia lainnya.

� Panel-panelnya ditempelkan pada jendela kerja sehingga memudahkan user bekerja.

� 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 fitur-fitur 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 petunjuk tentang code sesuai item yang dipilih user.

� Memberikan fitur-fitur untuk Web Developer yang di dalamnya termasuk ColdFusion MX Support, ASP.NET Support, PHP Support, Web Services Introspections.

2.2 PHP2.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 PHPBanyak 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 juga dapat disisipkan dalam script HTML. Ekstensi dari script PHP menggunakan .php dan bukan .html meskipun di dalamnya juga ada script HTML.

17

2.5.3 Variabel dan Tipe DataPenulisan variabel dalam PHP diawali dengan karakter ‘$’, kemudian

diikuti dengan huruf sebagai karakter pertama, dan setelah itu bisa dilanjutkan dengan kombinasi huruf dan angka. Variabel pada PHP bersifat case sensitif dan tidak boleh mengandung spasi maupun tanda baca di dalamnya. Akan tetapi untuk penulisan nama fungsi tidak diperlukan persamaan huruf besar dan kecil, sehingga nama fungsiphpinfo() dapat juga ditulis seperti PhpInfo().Tipe data yang dapat diolah menggunakan PHP, antara lain:▪ Boolean▪ Integer▪ Floating Point▪ String▪ Array▪ Object

18

----------- halaman ini sengaja dikosongkan

19

B A B 3PERENCANAAN 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 pilihankategori tersendiri, bukan berdasarkan pengelompokannya.

3.2 Perencanaan Layout MenuLayout pada menu dibuat dengan menggunakan sistem page flip.

Sistem dasar diambil dari Dynamic Pageflip v2.13 yang dibuat oleh Macc/iparigrafika yang merupakan open source yang dapat di download secara gratis dari internet. Dengan menggunakan page flip ini penulis cukup membuat tampilan per page yang akan ditampilkan dalam page flip, bisa berupa .swf maupun .jpg, dan kemudian page-page ini dimasukkan ke dalam page flip dengan mengedit kode yang telah disediakan. Page flip ini bekerja 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 flip – 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 penunjuk penggunaan

Ket: adalah gambar button

Gambar 3.8 Tampilan button – kategori

25

Tampilan untuk pilihan seluruh kategori sama seperti pada Gambar3.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 foto dan nama penulis (profile penulis).

Gambar 3.9 Tampilan pilihan kuis

Gambar 3.10 Tampilan halaman akhir

26

3.3 Perencanaan KategoriUntuk mengetahui apa saja 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 (lafalnya). Pada awal pengaksesan kategori ini disediakan beberapa gambar binatang dan pilihan button untuk page selanjutnya maupun button untuk kembali ke ‘menu’. Saat sebuah gambar binatang di klik akan keluar sebuah page baru yang berisi gambar binatang itu sendiri. Disini juga disediakan popup yang berisi keterangan-keterangan seperti yang sudah dijelaskan pada Gambar 3.11disertai dengan pengucapannya. Pada page ini juga diberikan button untuk kembali ke page sebelumnya yaitu yang berisi beberapa gambar binatang.

27

Sistem kerja pada kategori Buah seperti pada Gambar 3.12 hampir sama dengan sistem kerja kategori Hewan, yaitu penulis juga menyediakan pilihan berupa gambar dan suara (pengucapan). Pada awal pengaksesannya akan disediakan button untuk kembali ke menu dan button untuk melanjutkan ke page berikutnya. Pada Gambar 3.13, yaitu mengenai kategori Pohon yang akan

menguraikan nama pohon tersebut beserta jenisnya. 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 juga memberikan button untuk kembali ke menu utama atau ke halaman berikutnya (jika ada). Sistem seperti ini juga 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 KuisKuis ini merupakan fasilitas ekstra dalam sistem yang berguna untuk

melatih seberapa jauh anak bisa menggunakan kata dalam sebuah kalimat. Gambaran sistem kerja untuk kuis ini adalah sebagai berikut.

Gambar 3.20 Gambaran sistem kerja dari kuis

32

3.5 Proses Keseluruhan Pembuatan SistemBerikut 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 dijelaskan oleh penulis pada Bab 1 tentang Latar Belakang. Kemudian untuk membuat suatu sistem juga dibutuhkan sebuah sketsa sistem yang akan dibuat, penulis telah menjabarkannya pada Bab 3, yaitu tentang perencanaan sistem. Setelah ide dan desain sudah ada selanjutnya 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 sengaja dikosongkan

35

B A B 4PEMBUATAN DAN ANALISA SISTEM

Dalam pembuatan sistem dilakukan beberapa tahap seperti yang akan dijelaskan berikut ini.

4.1 Perangkat Lunak yang DigunakanDalam 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

Professional 2004 versi 7.0.1 yang merupakan program dasar dari keseluruhan Proyek Akhir. Untuk menjalankan 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 pengerjaan Proyek Akhir ini, terutama dalam membuat animasi. Tetapi kelemahannya adalah pada saat file Flash (.fla) dibuka di Macromedia Flash MX yang beda versi (lebih tinggi atau lebih rendah) terkadang file Flash ini tidak dapat dibuka. Selain Macromedia Flash MX, untuk mendukung Proyek Akhir ini

penulis juga menggunakan Macromedia Fireworks MX untuk pembuatan dan pengeditan gambar maupun background, serta digunakan juga program Tcl Wavesurfer 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 Data4.2.1 Pengambilan dan Pengolahan GambarData-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 dijadikan 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 symbol terlebih dahulu menjadi sebuah movie clip agar animasi yang diberikan dapat berjalan. Apabila gambar tersebut masih berupa bitmap atau graphic maka animasi yang diberikan tidak dapat bekerja, hasilnya akan tetap menjadi sebuah gambar diam. Setelah masuk dalam timeline movie clip, gambar tersebut harus di convert lagi menjadi sebuah graphic, apabila masih dalam bentuk bitmap maka sekali lagi animasi tidak dapat bekerja. Shortcut untuk meng-convert suatu objek adalah cukup tekan F8.

Gambar 4.3 Kotak dialog ‘Convert to Symbol’

37

4.2.2 Perekaman SuaraPada tahap perekaman suara ini perangkat lunak yang digunakan

adalah Tcl Wavesurfer 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 Wavesurfer karena file suara lebih mudah di edit dari noise maupun dipotong ke size yang kita inginkan. Dengan program ini suara yang ada juga dapat di ubah-ubah sampling ratenya, jadi suara tersebut dapat menjadi lebih tinggi maupun rendah. Tipe file yang tersimpan dari program ini berupa .wav.

Gambar 4.4 Tcl Wavesurfer 1.7.6

Untuk perekaman suara, penulis merekam pengucapan tiap kata yang dibutuhkan dalam sistem. Dalam satu kategori dibuat satu file yang berisi banyak rekaman, sehingga file ini nantinya harus dipotong untuk masing-masing kata dan disimpan menjadi single file. Berikut ini merupakan contoh pemotongan file suara:

Gambar 4.5 Sinyal suara yang akan dipotong

38

Gambar 4.6 Sinyal suara yang sudah dipotong

4.2.3 Pembuatan DatabaseDalam proses ini dibuat sebuah database menggunakan MySQL

dengan bantuan MySQL-Front dalam pembentukan database dan pemasukkan datanya. Database ini berisi pertanyaan-pertanyaan dan jawaban-jawaban yang akan diberikan dalam kuis. Terdapat 150 pertanyaan yang tersedia dalam database, dan untuk tiap pertanyaan disediakan 4 pilihan jawaban.

Gambar 4.7 Tampilan database menggunakan MySQL-Front

39

Pemilihan tipe data pada database juga perlu disesuaikan dengan perkiraan record yang akan dipakai. Dalam hal ini penulis menggunakan type INT 6 digit untuk field id_pertanyaan dalam tabel pertanyaan.Tabel pertanyaan mempunyai field id_pertanyaan, pertanyaan, dan

level. Sedangkan tabel jawaban mempunyai field id_jawaban, pertanyaan_id, jawaban, dan jawab_val. Untuk field id_pertanyaan dan id_jawaban harus mempunyai nilai yang berbeda karena mereka merupakan primary key dan bersifat unique. Field level digunakan untuk membedakan pertanyaan yang sesuai dengan levelnya. Dan field jawab_val digunakan untuk menandai jawaban mana yang benar dari 4 pilihan jawaban, nilai ‘1’ berarti benar dan nilai ‘0’ berarti salah. Dalam tabel jawaban terdapat bagian dari tabel pertanyaan yaitu field pertanyaan_id yang nantinya digunakan untuk menggabungkan pertanyaan dengan jawaban yang sesuai.

4.3 Pembuatan Menu

Gambar 4.8 Menu menggunakan pageflip

40

Tampilan pada menu dibuat dengan menggunakan konsep page flip. Sistem dasar diambil dari pageflip_v213 yang dibuat oleh Macc/iparigrafika. Kemudian page flip ini di-edit sesuai dengan yang diharapkan seperti pada Gambar 4.8..Page flip 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 menuju 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 file yang besar maupun ketelitian yang lebih seperti pada animasi frame-by-frame. 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 field untuk button, yaitu up, over, down, dan hit, sehingga kita dapat dengan mudah memasukkan animasi atau action apa saja yang ingin ditampilkan sesuai dengan fieldnya. 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 juga disediakan penambahan suara. Cara penggunaannya cukup mudah, kita hanya meng-export file suara ke dalam library kemudian pilih di field mana kita akan menaruh suara, lalu pilih suara yang ada dalam library 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 pageflip 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 menjadi satu dan dimasukkan dalam folder ‘pages’ pada modul pageflip yang sudah tersedia. Kemudian dalam modul juga disediakan file pages.xml dimana kita dapat mengedit kode untuk menambahkan page-page yang ingin ditampilkan dalam pageflip. Page yang akan dipanggil oleh pages.xml harus berada pada folder ‘pages’, jika tidak maka pageflip tidak akan muncul dan terus dalam loading state.

4.3.1 Cara Kerja Page Flip v2.13Berikut akan dijelaskan cara kerja dari page flip versi 2.13 yaitu

dalam proses loading dan flipping pages. Gambar 4.11 menunjukkan layer dan frame-frame yang ada pada timeline page flip. Dapat dilihat pada layer actions terdapat tanda α di atas blank keyframe, hal ini menunjukkan bahwa pada frame-frame tersebut terdapat actionScript untuk selanjutnya dapat dieksekusi.

42

Gambar 4.11 Timeline dari page flip v2.13

Dalam frame 1 terjadi proses dimana preloader ditampilkan secara visual dan source untuk halaman-halaman yang akan ditampilkan mulai diload yaitu dari file pages.xml, file ini juga berhubungan dengan folder pages yang berisi file-file halaman yang sudah jadi. Saat preloader sudah mencapai 100% maka preloader akan menghilang dan akan langsung menuju frame inisialisasi (frame 5: initialize). Berikut adalah kode actionScript yang ada pada frame 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 frame 5, file import_xml.as dimasukkan ke dalam sistem atau diload. File ini akan menyiapkan tempat dan bentuk untuk halaman-halaman yang ada pada file pages.xml, seperti tinggi dan lebar halaman, hard cover, transparansi, maupun page order-nya. Pada frame ini halaman-halaman belum ditampilkan karena nilai pages._visible = 0. Berikut adalah actionScript pada frame 5.

pages._visible = 0;#include "import_xml.as"stop();

43

Setelah frame 5 maka timeline akan menuju ke frame 6 dan seterusnya dimana fungsi-fungsi pembentukan halaman, perhitungan preloader, pendeteksian pointer mouse, serta perhitungan untuk proses flipping dimulai (start). Pada frame 6, kondisi untuk halaman pada page flip ditentukan kemudian proses pembentukan halaman page flip dilakukan yaitu dengan membentuk halaman dari file pages.xml kedalam movie clip yang kemudian akan disusun sesuai dengan urutannya. Disini juga 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 frame 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 flip. Disini semua fungsi-fungsi penting untuk pengaksesan page flip dilakukan. Awalnya dilakukan pengesetan untuk panjang halaman, daerah penekanan untuk flipping, kecepatan flipping, serta variabel-variabel yang akan digunakan dalam fungsi-fungsi yang akan dibentuk selanjutnya. Fungsi-fungsi tersebut antara lain adalah sebagai berikut; fungsi reset() yaitu untuk menginisalisasi halaman-halaman, fungsi untuk menginisialisasi mouse click handler atau pendeteksian pointer mouse yaitu untuk memberikan perhitungan dan kondisi yang terjadi apabila mouse berada di suatu area untuk autoflip maupun preflip, fungsi hittest() yaitu untuk menentukan arah flipping dari sebuah halaman, serta fungsi oef() yang memberikan kondisi saat terjadi preflip, autoflip, flipping maupun tearing. Untuk kondisi flipping normal yaitu pada halaman yang bukan hard cover maka dalam perhitungannya digunakan fungsi calc(x,y), sedangkan untuk flipping halaman yang hard cover maka digunakan

45

fungsi scalc(obj,x). ActionScript untuk frame 7 ini akan ditunjukkan pada Lampiran A.Pada frame 8 diberikan beberapa fungsi untuk mengeset ukuran

masking tiap halaman, mengaktifkan 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, fungsi oef() akan langsung dijalankan untuk mengontrol flipping dari halaman-halaman page flip. Berikut adalah actionScript pada frame 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 frame 9, page flip yang sudah jadi dengan semua fungsi yang sudah dieksekusi akan ditampilkan (kondisi pages._visible = 1), kemudian page flip pun siap digunakan. Berikut adalah actionScript pada frame 9.

pages._visible = 1;stop();

Jadi proses kerja page flip secara umum yaitu sebagai berikut. Pertama, dilakukan pengesetan preloader dan loading semua halaman yang akan dimasukkan pada page flip. Kemudian dilakukan pembentukan halaman dan eksekusi fungsi-fungsi untuk flipping tiap halaman serta pendeteksian mouse pointer. Terakhir, saat semua kode sudah dieksekusi dan sampai pada frame 9 maka page flip yang sudah jadi akan ditampilkan dan siap digunakan atau diakses.

46

4.4 Pembuatan KategoriTampilan untuk tiap kategori dibuat dengan menggunakan animasi

dan warna-warna yang cerah, hal ini guna menarik minat dari anak untuk mempelajarinya. 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 bekerja 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 jika button ini di-klik maka akan keluar suara pengucapannya atau lafalnya. Pada kategori ini diberikan tombol “MENU” untuk kembali ke menu utama yaitu page flip. Karena isi dari kategori ini sedikit maka hanya diperlukan satu halaman, tetapi untuk kategori lainnya yang mempunyai lebih banyak data akan dilanjutkan ke halaman berikutnya, dimana akan diberikan tombol untuk me-link ke halaman yang berikutnya maupun ke halaman selanjutnya. 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 fungsi 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 menjadi button. Apabila button di klik dua kali maka akan keluar field-field seperti pada Gambar 4.13 yaitu up, over, down, dan hit.

Gambar 4.13 Field yang tersedia pada button

Pada ‘Up’ akan berisi objek yang akan muncul pertama kali. ‘Over’ adalah field untuk mengeset apa yang akan terjadi 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 file suara sehingga saat button diklik maka akan keluar pelafalan dari kata pada button tersebut. Kemudian ‘Hit’ adalah tempat untuk memberikan area penekanan (area untuk klik) pada button, cukup membuat sebuah shape di atas objek yang menjadi 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 juga digunakan sistem yang

hampir sama dengan sistem yang digunakan pada kategori ‘Ambune Apa’ ini. Karena isi dari tiap kategori banyak yang berupa teks maka fungsi button banyak digunakan dalam pembuatannya. Dan juga karena diperlukan pelafalan dari kata yang ada maka fungsi button merupakan fungsi yang sesuai dengan fitur-fitur yang akan diberikan pada animasi teks ini.

48

4.5 Pembuatan KuisKuis diakses melalui menu, yang kemudian jika di-klik akan menuju

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 dijawab. Nilai maksimal yang di dapat adalah 100, dan bersamaan dengan keluarnya nilai yang diberikan, akan ditampilkan pula jawaban-jawaban yang benar (kunci jawaban) dari kuis tersebut. Gambar berikut ini akan menunjukkan 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 menjawab pertanyaan serta diberikan juga kunci jawabannya sebagai review.

Gambar 4.14 Tampilan kuis dengan pilihan ganda

49

Gambar 4.15 Tampilan nilai dan kunci jawabannya

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 jawaban, 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 pengerjaannya. 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 inidiberikan fungsi sebagai berikut.if(mysql_connect($host,$username,$password)){

if(mysql_select_db($database)){echo "connection success";}

else{echo "connection to database failed”;}

}else{

50

echo "connection to host failed”;}

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 informasi 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 file koneksi database harus dimasukkan dengan contoh syntax sebagai berikut.include("dbConnect.php");

Untuk fungsi random dalam pertanyaan digunakan syntax sebagai berikut.

$sql="select * from pertanyaan";$query=mysql_query($sql);$jumlah=mysql_num_rows($query);srand((float) microtime() * 10000000);do{

$hslRandom=rand(1,$jumlah);$sql = "select * from pertanyaan where level=".$level;$result = mysql_query($sql);

}while(!mysql_num_rows($result));

Sedangkan untuk mengambil jawaban dari database yang sesuai dengan pertanyaannya digunakan syntax query sebagai berikut.$query="select* from jawaban where

id_jawaban='".$_POST[$pilih[$i]]."'";

Serta untuk perhitungan nilainya digunakan fungsi dan rumus sebagai berikut.$result=mysql_query($query); if(mysql_num_rows($result)){

$content=mysql_fetch_array($result);$nilai+=$content["jawab_val"]*1/count($pilih)*100;}

51

Program untuk kuis secara lengkap dapat dilihat pada Lampiran Byang terdiri dari program koneksi PHP dengan database MySQL, program untuk menampilkan pertanyaan secara random, serta program untuk menampilkan nilai dan kunci jawaban.

4.6 Pengujian SistemUntuk mengetahui apakah sistem berjalan dengan benar dan sesuai

dengan yang diharapkan oleh penulis maka dilakukan sebuah pengujian sistem. Pengujian 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 menjadi 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 pengujian sistem dari cara pengujian yang

pertama yaitu pengecekan link pada sistem.

KondisiKeterangan Berhasil GagalIndex � Menu V -Menu � Kat. Jenenge Kewan&AnakeMenu � Kat. Jenenge Kewan&Anake

VV

-

Menu � Kat. Jenenge GodhongMenu � Kat. Jenenge Godhong

VV

-

Menu � Kat. Jenenge WitMenu � Kat. Jenenge Wit

VV

-

Menu � Kat. Jenenge PanggonanMenu � Kat. Jenenge Panggonan

VV

-

Menu � Kat. Jenenge PenggaweanMenu � Kat. Jenenge Penggawean

VV

-

Menu � Kat. Jenenge Satriya lan KesatriyaneMenu � Kat. Jenenge Satriya lan Kesatriyane

VV

-

Menu � Kat. Jenenge BocahMenu � Kat. Jenenge Bocah

VV

-

52

Menu � Kat. Tegese BangetMenu � Kat. Tegese Banget

VV

-

Menu � Kat. Prenahe SadulurMenu � Kat. Prenahe Sadulur

VV

-

Menu � Kat. Ambune Apa Menu � Kat. Ambune Apa

VV

-

Menu � Kat. Rasane Apa Menu � Kat. Rasane Apa

VV

-

Menu � Kat. Tembung WilanganMenu � Kat. Tembung Wilangan

VV

-

Menu � Kat. Tembung Garba (Sandi)Menu � Kat. Tembung Garba (Sandi)

VV

-

Menu � Kat. Tumrape ApaMenu � Kat. Tumrape Apa

VV

-

Menu � Kat. Cacade AwakMenu � Kat. Cacade Awak

VV

-

Menu � Kat. Tembung Krama InggilMenu � Kat. Tembung Krama Inggil

VV

-

Menu � Kat. Paribasan-Bebasan-SalokaMenu � Kat. Paribasan-Bebasan-Saloka

VV

-

Menu � Kat. PanyandraMenu � Kat. Panyandra

VV

-

Menu � Kat. PepindhanMenu � Kat. Pepindhan

VV

-

Menu � Kat. Tembung-tembungMenu � Kat. Tembung-tembung

VV

-

Menu � Kat. Tembung SarojaMenu � Kat. Tembung Saroja

VV

-

Menu � Kat. Tembung Kosok BalenMenu � Kat. Tembung Kosok Balen

VV

-

Menu � Kat. Tembung KawiMenu � Kat. Tembung Kawi

VV

-

Menu � Kat. PurwakanthiMenu � Kat. Purwakanthi

VV

-

Menu � Kat. ParikanMenu � Kat. Parikan

VV

-

Menu � Kat. Tembung Camboran V -

53

Menu � Kat. Tembung Camboran VMenu � Kat. CangkrimanMenu � Kat. Cangkriman

VV

-

Menu � Kat. ParamasastraMenu � Kat. Paramasastra

VV

-

Menu � Kat. Aksara Jawa Menu � Kat. Aksara Jawa

VV

-

Menu � Kat. Gamelan JawaMenu � Kat. Gamelan Jawa

VV

-

Menu � Gladhen (pilihan tingkat)Menu � Gladhen (pilihan tingkat)

VV

-

Pilihan tingkat � pertanyaanPilihan tingkat � pertanyaan

VV

-

Pertanyaan � nilaiPilihan tingkat � nilai

VV

-

Tabel 1. Tabel hasil pengujian sistem 1

Dari tabel diatas dapat diketahui bahwa link-link yang diberikan pada button-button yang ada dalam sistem dapat menuju ke target yang sesuai dengan yang diset, sehingga sistem dapat diakses dengan benar tanpa menimbulkan error dalam me-link-nya.Untuk pengujian 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 formal tetapi cukup pada yang non-formal asalkan media yang digunakan untuk mendemokan web tutorial ini tersedia dan dengan spesifikasi yang dapat mensupport jalannya sistem dengan baik sehingga responden juga dapat mengakses dengan mudah dan menikmati jalannya sistem yang didemokan ini tanpa adanya error maupun waktu yang terbuang karena minimnya spesifikasi 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 JAWA

Berilah tanda V pada kolom penilaian yang sesuai dengan kamu. Adapun keterangan penilaiannya adalah sebagai berikut :1 : kurang 2 : cukup3 : baik4 : baik sekali

PenilaianNo 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 jadi tertarik pelajaran Bahasa Daerah ?

55

Dari kuisioner di atas didapatkan hasil pengujian sebagai berikut.

PenilaianNo Pertanyaan1 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 jadi tertarik pelajaran Bahasa Daerah ?

- 40% 40% 20%

Tabel 2. Tabel hasil pengujian sistem 2

Dapat dilihat dari tabel bahwa untuk pertanyaan pertama, dari data yang ada ternyata 60% dari jumlah 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 selanjutnya adalah ”Apakah menurut kamu tampilannya menarik?”, ternyata persentase dari jumlah 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 pelajaran Bahasa

56

Jawa, sedangkan yang lainnya sudah lebih memiliki ketertarikan untuk mempelajarinya. Hal seperti ini dapat terjadi karena beberapa faktor, misalnya saja faktor waktu. Pada saat mendemokan web tutorial ini, ketika sebuah halaman sudah berhasil di-akses, dengan segera penulis beralih ke halaman selanjutnya guna mempersingkat waktu. Hal ini terjadi karena banyaknya materi (kategori) yang akan ditunjukkan. Seandainya saja responden memiliki waktu yang jauh lebih banyak untuk memainkan web tutorial ini, penulis yakin bahwa responden-responden tersebut akan lebih tertarik untuk mempelajarinya.

57

B A B 5PENUTUP

5.1 KESIMPULAN1. Animasi dengan menggunakan ‘button’ lebih mudah dan menarik karena fitur-fitur pendukung yang tersedia.

2. Animasi ‘motion tween’ lebih mudah digunakan dan file 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 jawa yang sesuai pada sebuah kalimat.

6. Hasil survey menunjukkan bahwa web tutorial ini sangat menyenangkan (60% responden), mudah digunakan (60% responden), dan tampilannya sangat menarik (70% responden).

5.2 SARAN1. Untuk membuat objek yang dapat bergerak, objek tersebut harus

diconvert terlebih dahulu ke movie clip, agar dapat dibuatanimasi-animasi yang diinginkan.

2. Pengelompokan layer animasi per objek atau jenis dilakukan dengan tujuan untuk mempermudah pembuatan animasi.

3. Perhatikan penulisan actionScript pada objek atau frame yaitubesar dan kecilnya huruf karena merupakan case sensitif.

4. Proyek Akhir yang dibuat oleh penulis dapat digunakan sebagai bahan pembelajaran, khususnya dalam mata pelajaran Bahasa Daerah.

5. Proyek Akhir yang dibuat penulis dapat dikembangkan lebih beragam lagi mengenai ragam animasi, isi, serta pemrograman web yang lebih efektif.

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 Pembelajaran 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 Kerja 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. Sukardjo, Drs. Sudjatmoko 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, “Visual Quick Start Guide: Macromedia Flash MX for Windows and Macintosh”, Peachpit Press, USA, 2002.

15. Wijaya, 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.PI/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 = "MEDIUM";

}}

}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 = "HIGH"; 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 degreepageN._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.PI/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.PI/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);placeImg(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 placeImg(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 = 0aamp = 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 configuration for database connection@param$host$database$username$password

*/if(ereg("dbConnect.php",$_SERVER['PHP_SELF'])) exit();$host="localhost";$database="quiz";$username="root";$password="";if(mysql_connect($host,$username,$password)){

if(mysql_select_db($database)){//success connection

}else{echo "<script>alert(\"Connect to $database

failed !\")</script>";echo "<noscript>Connect to $database

failed !</noscript>";}

}else{echo "<script>alert(\"Connect to $host failed !\")</script>";echo "<noscript>Connect to $host failed</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 href="Quiz/styles.css" rel="stylesheet" type="text/css"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><?$level=(int)$_GET["level"];if($level<0 || $level>2)

$level=1;?><title>Gladhen___<? $level ?></title></head>

<body background="images/bg2.jpg"><?

include("dbConnect.php");

//$arrID[11];$val = "false";$k = 1;

for($i=1;$i<=$level*10;$i++){$arrID[$i] = 0;

}

echo "<form name='soal' method='post' action='nilai.php'> \n";echo "<center><marquee behavior='alternate' width='500'><font face='Yarnell' color='#990000'size='10'>Gladhen___$level</font></marquee></center><br><hr color='#0066FF' size='8' width='98%' noshade><br>";echo " <font face='arial' color='blue' size='3'>Pitakon-pitakon ing ngisor iki wangsulana kanthi milih jawaban kang bener!</font><br><br>";

$sql="select * from pertanyaan";

80

$query=mysql_query($sql);$jumlah=mysql_num_rows($query);srand((float) microtime() * 10000000);do{

$hslRandom=rand(1,$jumlah);$sql = "select * from pertanyaan where level=".$level;$result = mysql_query($sql);


$arrID[1]=$hslRandom;$sql="select * from pertanyaan where id_pertanyaan = '" .

$hslRandom."'";$result = mysql_query($sql);$content = mysql_fetch_array($result);echo " <font face='arial'> ". "1.". " ".

$content["pertanyaan"]."</font><br> \n ";$pertanyaan_id=$content["id_pertanyaan"];$sql="select * from jawaban where

pertanyaan_id='".$content["id_pertanyaan"]."'";$result=mysql_query($sql);while($content=mysql_fetch_array($result)){

echo " <font face='arial'><input type='radio' name='".$pertanyaan_id."' value='".$content["id_jawaban"]."'> ".$content["jawaban"]."</font><br> \n ";

}echo "<br>";

for($i=2; $i<=$level*10; $i++){

do {do{

$hslRandom = rand(1,$jumlah);}while(in_array($hslRandom,$arrID,true));

$sql = "select * from pertanyaan where id_pertanyaan = '" . $hslRandom."' and level=".$level;

81

$result = mysql_query($sql);$content=mysql_fetch_array($result);$question=$content["pertanyaan"];


$arrID[$i]=$hslRandom;

//$content = mysql_fetch_array($result);echo " <font face='arial'> ". $i. ".". " ". $question."</font><br> \n ";$pertanyaan_id=$content["id_pertanyaan"];$sql="select * from jawaban where pertanyaan_id='".$content["id_pertanyaan"]."'";$result=mysql_query($sql);while($content=mysql_fetch_array($result)){

echo " <font face='arial'><input type='radio' name='".$pertanyaan_id."' value='".$content["id_jawaban"]."'> ".$content["jawaban"]."</font><br> \n ";

}echo "<br>";

}

for($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 <input type=\"submit\" name=\"Submit\" value=\"Sampun ...\"></div>";

echo "</form>\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 href="styles.css" rel="stylesheet" type="text/css"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body background="images/bg1.jpg"><?

include("dbConnect.php");$nilai=0;$pilih=split(",",$_POST["tanya"]);for($i=0;$i<count($pilih);$i++){

$query="select * from jawaban where id_jawaban='".$_POST[$pilih[$i]]."'";$result=mysql_query($query);if(mysql_num_rows($result)){$content=mysql_fetch_array($result);$nilai+=$content["jawab_val"]*1/count($pilih)*100;}

}echo "<center><h1><font face='verdana' color='lightgreen'

size='24'>Nilai:</font></h1></center>";echo "<center><b><font face='verdana' color='blue' size='44'

>$nilai</font></b></center>";echo "<br>";echo " <u><font face='verdana' color='blue'

size='6'>Kunci jawaban</font></u>";echo "<br><br>";

for($i=0;$i<count($pilih);$i++){$query="select * from pertanyaan where id_pertanyaan='".$pilih[$i]."'";$result=mysql_query($query);

83

if(mysql_num_rows($result)){$content=mysql_fetch_array($result);echo " ";echo $i+1 ."<b><font face='arial'>. ".$content["pertanyaan"]."</font></b><br>";

$query="select * from jawaban where pertanyaan_id='".$content["id_pertanyaan"]." ' and jawab_val='1'";$result=mysql_query($query);if(mysql_num_rows($result)){

$content=mysql_fetch_array($result);echo " <b><font

face='arial' color='#990066'>jawaban :</font></b> " ."<b><font

face='arial'>" .$content["jawaban"]."</font></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 your day with a smile. And when you are doing something, do your very best and never give up. Keep smiling, be happy, and be yourself!”. Penulis gemar membaca buku-buku non-fiksi, mempunyai kepribadian yang rendah hati dan selalu bersemangat, serta seseorang yang suka menolong siapa saja 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 PrawadikaTTL : 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 : [email protected]

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

web bhs jawa

Documents

Transcript of web bhs jawa