05 BAB 3 - thesis.binus.ac.idthesis.binus.ac.id/doc/bab3/2011-1-00330-if 3.pdf · dalam aplikasi ini antara lain dialog, video klip, soal-soal latihan, latihan pelafalan, daftar tata

37

BAB 3

ANALISIS DAN PERANCANGAN

3.1 Gambaran Umum Sistem yang Sedang Berjalan

Pada saat penulisan ini dibuat, murid kelas 8 SMP Kristen Yusuf tercatat

sebanyak 114 siswa yang terbagi menjadi 3 kelas, dengan 1 guru sebagai tenaga

pengajar Bahasa Jepang.

Sistem pengajaran bahasa Jepang yang sedang berjalan di Sekolah Kristen

Yusuf pada saat ini adalah materi pelajaran diberikan berdasarkan text book selama

2x40 menit per minggu. Materi yang diberikan dibant u dengan kart u-kartu sebagai

alat bant u unt uk pengenalan huruf-huruf hiragana Jepang. Unt uk kelas 8, pelajaran

belum mencakup mendengarkan (listening), jadi hanya terdiri dari pengenalan huruf

hiragana serta penggunaan tatabahasa (grammar) dasar Bahasa Jepang. Selain

metode-metode pengajaran yang telah disebutkan sebelumnya, penyampaian materi

bahasa Jepang dikelas terkadang dilakukan melalui games menghafal dan menebak

kosakata. Latihan atau pekerjaan rumah diberikan berdasarkan kedalaman materi

pada bab yang bersangkutan atau berdasarkan tingkat pengertian yang dicapai oleh

para siswa. Pada awal semester, siswa diberikan project yang bertujuan untuk

menambah daya tangkap serta ketertarikan siswa terhadap materi bahasa. Project

yang diberikan berupa menggambar peta kepulauan atau negara Jepang, kerajinan

melipat Jepang (origami), atau menyanyikan lagu berbahasa Jepang.

Kesulitan yang dihadapi para pelajar kelas 8 dalam bahasa Jepang adalah

kurangnya minat pembelajaran bahasa karena hanya berdasarkan textbook saja, serta

siswa mengalami kesulitan dalam menghafal kosakata dan huruf hiragana. Fasilitas

38

penunjang pem belajaran yang terdapat pada Sekolah Kristen Yusuf antara lain:

beberapa ruang kelas berproyektor, ruang multimedia, ruang komputer dan

perpustakaan.

3.2 Perbandingan Perangkat Ajar Sejenis

3.2.1 Tell Me More Japanese – Beginner & Advanced

Tell Me More Japanese merupakan salah sat u seri dari software

pembelajaran bahasa Tell Me More Series yang dikembangkan oleh Auralog

(bahasa-bahasa lainnya adalah Bahasa Mandarin, Bahasa Belanda, Bahasa

Perancis, Bahasa Jerman, Bahasa Inggris, Bahasa Italia, dan Bahasa Spanyol.

Masing-masing dijual secara terpisah). Bahasa pengantar yang digunakan

pada aplikasi ini adalah Bahasa Inggris. Adapun menu-menu yang terdapat

dalam aplikasi ini antara lain dialog, video klip, soal-soal latihan, latihan

pelafalan, daftar tata bahasa dan kosa kata, serta laporan hasil pem belajaran.

Tell Me More Japanese terbagi menjadi dua tingkatan atau level yakni :

Beginner (Pem ula) dan Advanced (Mahir). Setiap tingkatan terdiri atas enam

Lesson (pelajaran).

39

Main Menu dari aplikasi ini berupa gam bar-gam bar yang menunjukan

menu-menu yang disediakan yakni : Rak baju (untuk memilih pelajaran),

buku (untuk referensi daftar tata bahasa), orang dengan scene taker (untuk

masuk ke menu dialog), buku tulis (untuk menu soal-soal latihan), mikrofon

(untuk menu latihan pelafalan), bola dunia (unt uk menu link external, bila

terhubung ke internet), piala / trophy (untuk menu laporan hasil

pembelajaran), synthesizer (menu opsi pengaturan), tanda tanya (menu help)

dan pintu (keluar dari aplikasi/quit).

Pada setiap pelajaran, pengguna dapat memilih salah satu menu

sekunder berikut (icon bagian bawah gambar 3.2, kiri ke kanan):

Gambar 3. 2 Menu latihan pelafalan

1) Main menu.

Gambar 3. 1 Menu Utama Tell Me More Japanese

40

Tombol untuk kembali ke menu utama.

2) Video.

Memainkan video (bila ada) disertai dengan teks/script yang berisikan

hiragana, katakana dan kanji.

3) Pronunciation index.

Pengguna dapat merekam suara pelafalannya dan membandingkannya

dengan grafik suara model (lih. gambar 3.2).

4) Dialogue.

Pengguna dapat mendengar percakapan dalam Bahasa Jepang dan disertai

dengan huruf Jepang serta cara baca (romanji).

Gambar 3. 3 Menu Dialogue

5) Exercise.

41

Pengguna dapat menguji tingkat pemahaman mengenai pelajaran dengan

menggunakan latihan-latihan yang tersedia. Bentuk-bentuk latihan antara

lain: menjodohkan, teka-teki silang, puzzle, hang man, dll.

6) Reference .

Merupakan daftar referensi seluruh tata bahasa dan kosa kata yang

digunakan pada aplikasi ini.

7) Translation.

Menampilkan terjemahan dialog, dan kosa kata pada pelajaranyang

sedang dipilih.

8) Lesson report.

Menampilkan laporan hasil latihan, nilai yang didapat, jumlah jawaban

yang benar dan salah.

Gambar 3.4 Salah satu bentuk soal latihan(menjodohkan)

42

9) Option.

Merupakan opsi pengat uran atau setting, misalnya mengat ur volume

suara, dll.

10) Help

3.2.2 Japaneseclass.jp

Japaneseclass.jp adalah sebuah sit us web unt uk mempelajari

kosakata serta huruf kanji Bahasa Jepang. Pengguna diharuskan melakukan

pendaftaran terlebih dahulu agar dapat menggunakan menu-menu pada situs

ini. Konsep website ini adalah pem belajaran seperti sedang memainkan

game RPG, dimana pengguna dapat memperoleh poin experience apabila

menjawab pertanyaan mengenai kosakata dengan benar pada menu Practice

dan Chapter Text. Poin exp tersebut digunakan untuk menentukan level dan

ranking.

Pada user statistic data yang dapat dilihat antara lain :

1. Username serta data pengguna

2. Tingkatan level pengguna pada saat ini

3. Urutan ranking pengguna diantara sem ua member

4. Jumlah poin exp sampai saat ini

5. Chapter Text yang dapat dipelajari

6. Tabel statistik pengguna dalam menghafalkan kosakata baru

43

Gambar 3.5 Tampilan menu User Statistics

Menu-menu yang terdapat pada sit us ini antara lain:

1. Lesson

Terbagi menjadi empat bagian yakni Kanji, Hiragana & Katakana,

Vocabulary dan Grammar, sehingga pengguna dapat memilih pelajaran

sesuai dengan kebut uhannya.

Gambar 3. 6 Tampilan menu Lesson

44

2. Practice

Pada menu Practice, apabila pengguna dapat menjawab pertanyaan

dengan benar maka pengguna akan mendapat tambahan exp. Sebaliknya

apabila pengguna salah menjawab maka akan mendapat pengurangan exp.

Pengguna dapat mejawab dengan memilih salah satu opsi yang

disediakan atau dengan mengetikan huruf hiragana pada textbox yang

tersedia.

Gambar 3. 7 Tampilan menu Practice

3. Note

Pengguna dapat membuat posting-an yang dapat dibaca oleh semua

member.

4. Photo.

Pengguna dapat men-tag kosa kata pada gam bar dan dapat meng-upload

gam bar tersebut pada situs web.

45

5. Video

Pada menu ini pengguna dapat melatih kemampuan mendengar (listening)

dengan menggunakan video berbahasa Jepang yang telah disediakan.

6. Rank

Pengguna dapat melihat urutan ranking sem ua member dari peringkat

pertama sampai peringkat terakhir.

7. Group

Pengguna dapat melihat grup-grup apa saja yang ada, dan dapat

bergabung dalam grup tersebut.

8. Buletin

Pengguna dapat melihat bulletin-buletin yang dibuat oleh pengguna lain.

3.2.3 Japanesepod101.com

Japanesepod101.com merupakan sit us web pembelajaran Bahasa

Jepang yang menitikberatkan pada kemampuan mendengarkan(listening) dan

berbicara (speaking). Materi yang diajarkan dikemas dalam bentuk dialog

dengan format mp3 yang dapat di-download atau diputar secara online oleh

pengguna serta script dialog dalam format pdf.

Tingkatan atau level yang tersedia antara lain Introduction, Absolute

Beginner, Beginner, Intermediate, dan Advanced. Setiap tingkatan tersebut

terbagi lagi menjadi beberapa season, yang tiap season-nya terdiri antara 25

sampai 100 pelajaran.

Pada saat user memilih pelajaran, link unt uk memainkan atau

mendownload file mp3 (dialog) serta file pdf (script dialog beserta

46

penjelasan tata bahasa) akan muncul. Selain itu juga terdapat link unt uk

menuju soal-soal latihan. Pada bagian bawah materi pengguna dapat

menuliskan comment dan membahas materi pelajaran tersebut dengan

pengguna lainnya ataupun dengan host pelajaran tersebut.

Gambar 3.8 Tampilan daftar pelajaran dalam satu season

47

Gambar 3.9 Tampilan satu pelajaran

48

Gambar 3.10 Tampilan file pdf (transkrip dialog)

49

Tabel 3. 1 Tabel perbandingan aplikasi perangkat ajar

Tell Me More Japanese Japaneseclass.jp Japanesepod101.com Tingkatan Materi

Hanya menyediakan dua tingkatan (Beginner dan Advanced)

Menyediakan beragam tingkatan mulai dari Beginner sampai dengan Advance

Menyediakan beragam tingkatan, mulai dari Absolute Beginner sampai dengan Advanced

Konsistensi

Konsistensi urutan tindakan cukup baik. Namun konsistensi beberapa tampilan layout masih kurang .

Konsistensi tampilan atau layout sudah baik . Konsistensi tindakan yang dilakukan sudah cukup baik.

Konsistensi tampilan atau layout sudah baik . Konsistensi tindakan yang dilakukan sudah cukup baik.

Kemudahan Navigasi

Bagi pengguna pertama mungkin akan mengalami kesulitan dikarenakan tidak tersedianya guide unt uk menuntun pengguna (dari mana harus memulai, icon untuk menu apasaja, dsb.)

Tersedia narasi-narasi bagi pengguna pertama kali.

Tersedia menu ‘Getting Started’ yang dapat membantu pengguna untuk menent ukan jenis pelajaran yang dapat dipilih berdasarkan tingkatan atau berdasarkan kebut uhan pengguna (misalnya, kebut uhan bisnis, traveling, dsb.)

Tantangan Aktivitas

Adanya soal-soal latihan dalam bent uk permainan, misalnya hangman, teka-teki silang, dll

Pembelajaran dengan menggunakan sistem rangking berdasarkan jumlah poin exp yang diperoleh dari menjawab pertanyaan

Variasi aktivitas latihan tidak terlalu banyak.

3.3 Analisa Kebutuhan Pengguna

3.3.1 Wawancara

Metode wawancara ini dilakukan dengan mewawancarai guru Bahasa

Jepang Sekolah Kristen Yusuf, Ibu Sri. Wawancara ini bertujuan unt uk

mengetahui hal-hal mengenai Kegiatan Belajar Mengajar (KBM) Bahasa

50

Jepang yang sedang berlangsung. Dari hasil wawancara diketahui bahwa

siswa-siswa kelas 8 SMP baru m ulai mempelajari hiragana, sehingga masih

memerlukan romanji sebagai bant uan dalam membaca. Selain it u, para

siswa juga mengalami kesulitan dalam mempelajari tata bahasa, dikarenakan

penyajian materi pembelajaran yang kurang menarik, hanya berdasarkan

buku teks saja. Fasilitas yang tersedia di sekolah antara lain beberapa ruang

kelas yang berproyektor, ruang m ultimedia dan ruang komputer.

3.3.2 Analisa Kuisioner

Berikut ini merupakan data hasil kuisioner yang dilakukan terhadap

108 siswa kelas 8 SMP Kristen Yusuf:

Gambar 3. 11 Grafik jawaban pertanyaan No.1

Dari grafik pertanyaan nomor 1, dapat diketahui bahwa sebagian

besar siswa SMP 8 Kristen Yusuf memiliki komputer di rumah.

90%

10%

1. Apakah Anda mempunyai komputer di rumah?

Ya Tidak

51

Gambar 3.12 Grafik jawaban pertanyaan No.2

Dari grafik pertanyaan nomor 2 tersebut, dapat dilihat bahwa

sebagian besar siswa SMP 8 mengalami kendala dalam mempelajari tata

bahasa (Grammar) Jepang. Sebagian lainnya menganggap bahwa kegiatan

menghafal kosakata berbahasa Jepang menyulitkan mereka. Sebagian kecil

yang tersisa menjawab kegiatan lainnya yang menyulitkan mereka dalam

mempelajari bahasa Jepang, misalnya membaca, mendengarkan, dll.


65%

24%

11%

2.Bagian manakah yang lebih sulit untuk dipelajari dalam pelajaran Bahasa Jepang?

Tata Bahasa (Grammar)

Kosakata (Vocabulary)

Lainnya

53%39%

8%

3. Saya dapat menggunakan fungsi dasar komputer dengan baik.

Sangat Setuju

Setuju

Ragu‐ragu

Tidak Setuju

Sangat Tidak Setuju

52


Dari grafik pertanyaan nomor 3 dan 4 tersebut, dapat

disimpulkan bahwa sebagian besar siswa SMP 8 telah dapat menggunakan

fungsi-fungsi dasar komputer (misalnya: membuka file, menyimpan data,

dll.) dengan baik, nam un para siswa tersebut sebagian besar masih asing

dengan penggunaan perangkat ajar dalam membantu pem belajaran.


12%

29%

36%

14%

9%

4. Saya sering menggunakan aplikasi perangkat ajar lainnya (misalnya: CD tutorial, CD soal, dll.)

Sangat Setuju

Setuju

Ragu‐ragu

Tidak Setuju

Sangat Tidak Setuju

10%

26%

50%

13%

1%

5. Saya dapat membaca hiragana dan katakana dengan baik

Sangat setuju

Setuju

Ragu‐ragu

Tidak Setuju

Sangat Tidak Setuju

53


Dari grafik pertanyaan nomor 5 dan 6, dapat disimpulkan bahwa

sebagian besar siswa SMP 8 Kristen Yusuf masih ragu terhadap kemampuan

mereka dalam membaca hiragana dan katakana, serta tidak dapat melakukan

input tulisan Jepang.


5%4%

31%

42%

18%

6. Saya dapat mengetik/menginput hiragana dan katakana pada komputer

Sangat Setuju

Setuju

Ragu‐ragu

Tidak Setuju

Sangat Tidak Setuju

44%

36%

12%

6%

2%

7. Saya menginginkan adanya suara sebagai contoh pelafalan atau cara baca

Sangat Setuju

Setuju

Ragu‐ragu

Tidak Setuju

Sangat Tidak Setuju

54

Berdasarkan data yang telah diperoleh dari wawancara dan kuisioner,

dapat diketahui bahwa mayoritas siswa kelas 8 SMP Kristen Yusuf:

a) mengalami kesulitan dalam mempelajari Tata Bahasa (Grammar), huruf

hiragana dan katakana.

b) sudah merupakan pengguna kategori computer literacy, namun masih

belum familiar dengan perangkat ajar.

c) tidak dapat melakukan input huruf Jepang pada komputer.

d) menginginkan adanya audio sebagai salah sat u media unt uk membantu

pembelajaran.

3.3.3 Usulan Pemenuhan Kebutuhan

Berdasarkan hasil analisa kuisioner di atas, beberapa usulan

pemenuhan kebutuhan yang dapat dijadikan pertimbangan dalam

merancangan dan membuat aplikasi perangkat ajar ini antara lain:

a) menyediakan tabel hiragana dan katakana

b) menyajikan materi tata bahasa seinformatif mungkin

c) menyediakan latihan tata bahasa yang memadai

d) menggunakan sim bol-simbol um um dalam aplikasi, misalnya untuk

menu keluar menggunakan tanda silang dan terletak di kanan atas, dsb.

e) menyediakan informasi/petunjuk penggunaan perangkat ajar

f) apabila input dalam huruf Jepang diperlukan, sebaiknya disediakan soft

keyboard.

g) menyediakan audio sebagai pendamping materi

55

3.4 Perancangan

3.4.1 Hirarki Menu

Gambar 3.18 Hirarki menu perangkat ajar

56

Pada saat aplikasi dimulai, menu login akan ditampilkan terlebih

dahulu. Jika pengguna belum terdaftar dalam database, pengguna dapat

memilih menu pendaftaran Pengguna dapat memilih menu “Lupa Password”

untuk mengetahui password pengguna. Apabila login berhasil dilakukan

maka halaman menu awal akan ditampilkan, jika login gagal maka pengguna

akan tetap berada di halaman login.

Pada menu awal, pengguna dapat memilih kegiatan yang diinginkan

antara lain:

1. Memilih materi

Setelah memilih menu “Pilih Materi’, pengguna akan masuk ke halaman

dimana terdapat tombol-tombol untuk memilih bab yang akan dipelajari.

Setiap bab terbagi menjadi 3 kategori pembelajaran yakni: tata bahasa,

kosakata, dan latihan.

2. Menggunakan FlashCard

Pada menu ini, pengguna dapat berlatih mengingat kosakata yang ada,

selain itu pengguna juga dapat melakukan penam bahan kosakata,

penghapusan dan pengubahan kosakata..

3. Melihat tabel huruf kana.

Pada menu ini, pengguna dapat berlatih menghafalkan huruf-huruf

hiragana maupun katakana.

57

3.4.2 Use Case Diagram

Gambar 3.19 Use Case Diagram

Pada use case diagram diatas digambarkan hal – hal yang dapat dilakukan oleh

pengguna (murid atau guru).

58

3.4.3 Class Diagram

Gambar 3. 202 Class diagram

Gambar di atas menunjukkan class diagram aplikasi perangkat ajar bahasa

jepang

59

3.4.5 Sequence Diagram

Gambar 3.21 Sequence diagram ap likasi

60

Gambar 3.22 Sequence Diagram – Menu Login

Tabel 3. 1 Sequence Diagram Spesification – Menu Login

Pelaku : Pengguna Deskripsi : Cara Login awal Tujuan : Agar dapat masuk ke “Menu Awal” Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1. Pengguna menjalankan aplikasi

2.Aplikasi akan menampilkan “Menu Login”. Terdapat tombol ‘Daftar’, ‘Lupa Password’, ‘Masuk’

3.Pengguna memilih ‘Daftar’, ‘Lupa Password’, atau ‘Masuk’

4a.Jika pengguna memilih ‘Daftar’, maka aplikasi akan menampilkan “Menu Pendaftaran” 4b.Jika pengguna memilih ‘Lupa Password’, maka aplikasi akan menampilkan “Menu Recovery Password” 4c. Jika pengguna memilih ‘Masuk’, maka aplikasi akan melakukan pemeriksaan database. Bila data yang dimasukkan tepat, maka aplikasi akan menampilkan “Menu Awal”. Jika data tidak tepat maka aplikasi akan tetap berada pada “Menu Login”.

61

Gambar 3. 23 Sequence Diagram – Menu Pendaftaran

Tabel 3. 3 Sequence Diagram Specification – Menu Pendaftaran

Pelaku : Pengguna Deskripsi : Cara pendaftaran pengguna baru Tujuan : Agar dapat menggunakan aplikasi dan masuk ke “Menu Awal” Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih tombol ‘Daftar’

2. Aplikasi akan menampilkan “Menu Pendaftaran”.

3.Pengguna memasukkan data-data yang dibutuhkan seperti username, password, memilih pertanyaan pengembalian password, dan mengisi jawaban pertanyaan tersebut.

4a.Jika data yang dimasukkan pengguna benar / valid, maka aplikasi akan menampilkan “Menu Awal” 4b.Jika data yang dimasukkan pengguna salah/ tidak valid/ tidak lengkap, maka aplikasi akan tetap berada pada halaman pendaftaran dan menampilkan alert

62

Gambar 3.24 Sequence Diagram – Menu Recovery Password

Tabel 3.4 Sequence Diagram Specification – Menu Recovery Password

Pelaku : Pengguna Deskripsi : Cara meminta recovery password Tujuan : Agar dapat mengetahui password suat u username Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih tombol ‘Lupa password’

2. Aplikasi akan menampilkan “Menu Recovery Password”

3.Pengguna memasukkan username.

4.Aplikasi akan menampilkan pertanyaan sesuai dengan pertanyaan yang dipilih oleh pengguna pada saat pendaftaran

5. Pengguna memasukkan jawaban sesuai dengan jawaban yang dimasukkan pada saat pendaftaran

6a. Aplikasi akan memeriksa persamaan jawaban yang dimasukkan dengan jawaban pada database. Apabila hasil yang didapat adalah sama/ serupa, aplikasi akan menampilkan password pengguna 6a. Aplikasi akan memeriksa persamaan jawaban yang dimasukkan dengan jawaban pada database. Apabila hasil yang didapat adalah sama/ serupa, aplikasi akan menampilkan alert

63

Tabel 3. 25 Sequence Diagram – Menu Awal

Tabel 3. 5 Sequence Diagram Spesification – Menu Awal

Pelaku : Pengguna Deskripsi : Cara masuk menu utama Tujuan : Agar dapat masuk ke “Menu Pilih Materi”, “Menu FlashCard” atau

“Menu Tabel Kana” Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna masuk di “Menu Awal”

2.Aplikasi akan menampilkan tombol ‘Pilih Materi’, ‘Gunakan FlashCard’ dan ‘Lihat Tabel Kana’.

3.Pengguna memilih ‘Pilih Materi’, ‘Gunakan FlashCard’ dan ‘Lihat Tabel Kana’.

4a.Jika pengguna memilih ‘Pilih Materi’, maka aplikasi akan menampilkan “Menu Pilih Materi” 4b.Jika pengguna memilih ‘Gunakan FlashCard’, aplikasi akan menampilkan “Menu FlashCard” 4c.Jika pengguna memilih ‘Lihat Tabel Kana’, aplikasi akan menampilkan “Menu Tabel Kana”

64

Gambar 3.26 Sequence Diagram – Menu Pilih Materi

Tabel 3.6 Sequence Diagram Spesification – Menu Pilih Materi

Pelaku : Pengguna Deskripsi : Cara memilih mata pelajaran per bab Tujuan : Agar dapat masuk ke “Menu Materi”, “Menu Kosakata” atau “Menu

Latihan” Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna masuk di “Menu Pilih Materi”

2.Aplikasi akan menampilkan tombol ‘Materi’, ‘Kosakata’ dan ‘Latihan’.

3.Pengguna memilih ‘Materi’, ‘Kosakata’ atau ‘Latihan’.

4a.Jika pengguna memilih ‘Materi’, maka aplikasi akan menampilkan “Menu Materi” sesuai dengan bab yang dipilih. 4b.Jika pengguna memilih ‘Kosakata’, aplikasi akan menampilkan “Menu Kosakata” sesuai dengan bab yang dipilih. 4c.Jika pengguna memilih ‘Latihan’, aplikasi akan menampilkan “Menu Latihan” sesuai dengan bab yang dipilih.

65

Gambar 3. 27 Sequence Diagram – Menu Latihan

Tabel 3. 27Sequence Diagram Specification – Menu Latihan

Pelaku : Pengguna Deskripsi : Cara menggunakan menu latihan Tujuan : Agar dapat menggunakan menu latihan Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih tombol ‘Latihan’

2. Aplikasi akan menampilkan “Menu Latihan” 3.Aplikasi memeriksa id bab atau materi saat ini, kemudian menampilkan latihan pada database yang memiliki id yang sama dengan id materi saat ini

4. Pengguna memasukkan jawaban

5. Aplikasi akan memeriksa jawaban

6. Aplikasi akan menampilkan pop-up sesuai dengan hasil jawaban yang dipilih

7. Pengguna menutup pop-up 8. Aplikasi menut up pop-up, menampilkan soal selanjutnya

66

Gambar 3.28 Sequence Diagram – Menu FlashCard

Tabel 3. 8 Sequence Diagram Spesification – Menu FlashCard

Pelaku : Pengguna Deskripsi : Cara menggunakan flashcard Tujuan : Agar dapat memulai FlashCard dan melihat daftar FlashCard Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih “Menu FlashCard”

2.Aplikasi akan menampilkan tombol ‘Mulai FlashCard’, ‘Daftar FlashCard’.

3.Pengguna memilih ‘Mulai FlashCard’ atau ‘Daftar FlashCard’

4a.Jika pengguna memilih ‘Mulai FlashCard’, maka aplikasi akan menampilkan “Menu Setting View FlashCard” 4b.Jika pengguna memilih ‘Daftar FlashCard’, aplikasi akan menampilkan “Menu Daftar FlashCard”

67

Gambar 3. 29 Sequence Diagram – Menu Mulai FlashCard

Tabel 3. 9 Sequence Diagram Specification – Menu Mulai FlashCard

Pelaku : Pengguna Deskripsi : Cara menggunakan menu Mulai FlashCard Tujuan : Agar dapat menggunakan flashcard Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih tombol ‘MulaiFC’

2. Aplikasi akan menampilkan “Menu MulaiFlashCard”

3. Pengguna melakukan pengaturan terhadap FlashCard, seperti kata dari bab berapa serta jumlah kata yang ingin di-review

4.Aplikasi memeriksa id bab atau materi yang dipilih oleh pengguna, kem udian menampilkan kata pada database yang memiliki id yang sama dengan id materi yang dipilih

5. Pengguna memasukkan jawaban

6. Aplikasi akan memeriksa jawaban 7. Aplikasi akan menampilkan pop-up sesuai dengan hasil jawaban yang dipilih

8. Pengguna menutup pop-up 9. Aplikasi menut up pop-up, menampilkan flashcard selanjutnya

68

Gambar 3 30 Sequence Diagram – Menu Daftar FlashCard

Tabel 3. 10 Sequence Diagram Spesification – Menu Daftar FlashCard

Pelaku : Pengguna Deskripsi : Cara menambah, mengubah atau menghapus FlashCard Tujuan : Agar dapat menambah, mengubah dan menghapus FlashCard Bidang khas suatu event

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih “Menu Daftar FlashCard”

2.Aplikasi akan menampilkan tombol ‘Tambah FlashCard’, ‘Ubah FlashCard’dan ‘Hapus FlashCard’.

3.Pengguna memilih ‘Tambah FlashCard’ , ‘Ubah FlashCard’atau ‘Hapus FlashCard’.

4a.Jika pengguna memilih ‘Tambah FlashCard’, maka aplikasi akan menampilkan “Menu Tambah FlashCard”. Bila data-data yang dimasukkan lengkap, maka aplikasi akan menginput FlashCard baru ke dalam database. 4b.Jika pengguna memilih ‘Ubah FlashCard’, aplikasi akan menampilkan “Menu Edit FlashCard”. 4c.Jika pengguna memilih ‘Hapus FlashCard’, aplikasi akan menghapus FlashCard yang telah dipilih oleh pengguna dari database.

69

Gambar 3. 31 Sequence Diagram – Menu Tambah FlashCard

Tabel 3.11 Sequence Diagram Specification – Menu Tambah FlashCard

Pelaku : Pengguna Deskripsi : Cara menggunakan menu Tambah FlashCard Tujuan : Agar dapat menambah flashcard baru Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih tombol ‘TambahFC’

2. Aplikasi akan menampilkan “Menu Tambah FlashCard”

3. Pengguna memasukkan data-data, seperti kategori bab, huruf hiragana, bacaan, serta arti kata

4a.Apabila data yang dimasukkan lengkap, maka aplikasi akan memeriksa id bab atau materi yang dipilih oleh pengguna, kemudian memasukkan kata ke dalam database dan mengeluarkan pop-up berhasil tambah flashcard 4b. Apabila data tidak lengkap, maka aplikasi akan menampilkan alert pada “Menu Tambah FlashCard”

5. Pengguna menutup pop-up 6. Aplikasi menut up pop-up, menampilkan “Menu Tambah FlashCard”

70

Gambar 3. 32 Sequence Diagram – Menu Ubah FlashCard

Tabel 3. 12 Sequence Diagram Specification – Menu Ubah FlashCard

Pelaku : Pengguna Deskripsi : Cara menggunakan menu Ubah FlashCard Tujuan : Agar dapat mengubah flashcard Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih tombol ‘Edit’pada kata yang ingin dirubah

2. Aplikasi akan menampilkan “Menu Ubah FlashCard”. Aplikasi akan membaca data yang dipilih dari data base dan menampilkan attribute kata tersebut

3. Pengguna melakukanperubahan data-data, seperti kategori bab, huruf hiragana, bacaan, serta arti kata

4a.Apabila data yang dimasukkan lengkap, maka aplikasi akan memperbaharui kata ke dalam database dan mengeluarkan pop-up berhasil ubah flashcard 4b. Apabila data tidak lengkap, maka aplikasi akan menampilkan alert pada “Menu Ubah FlashCard”

5. Pengguna menutu p pop-up

6. Aplikasi menut up pop-up, menampilkan”Menu Daftar FlashCard”

71

Gambar 3.33 Sequence Diagram – Menu Lihat Tabel Kana

Tabel 3. 13 Sequence Diagram Spesification – Menu Tabel Kana

Pelaku : Pengguna Deskripsi : Cara melihat tabel hiragana atau katakana Tujuan : Agar dapat melihat tabel hiragana atau katakana Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi 1.Pengguna memilih “Menu Lihat Tabel Kana”

2.Aplikasi akan menampilkan tombol ‘Hiragana’, dan ‘Katakana’.

3.Pengguna memilih ‘Hiragana’, atau ‘Katakana’.

4a.Jika pengguna memilih ‘Hiragana’, maka aplikasi akan menampilkan “Menu Hiragana”.. 4b.Jika pengguna memilih ‘Katakana’, maka aplikasi akan menampilkan “Menu Katakana”.

72

Gambar 3.34 Sequence Diagram – Menu Konfirmasi Keluar

Tabel 3. 14 Sequence Diagram – Menu Konfirmasi Keluar

Pelaku : Pengguna Deskripsi : Cara keluar dari aplikasi Tujuan : Agar dapat melakukan proses keluar Bidang khas suatu event :

Kegiatan Pelaku Respon Aplikasi Pengguna masuk di “Menu Konfirmasi Keluar”

Aplikasi akan menampilkan pop-up konfirmasi. Terdapat dua buah tombol ‘Ya’ dan ‘Tidak’.

Pengguna memilih ‘Ya’ atau ‘Tidak’

Jika pengguna memilih tombol ‘Ya’ maka aplikasi akan berhenti. Jika pengguna memilih tombol ‘Tidak’ maka pop-up akan tertutup dan apilkasi akan menampilkan layar posisi saat pengguna berada terakhir kali..

73

3.4.6 State Transision Diagram

Gambar 3.35 State Transition diagram

74

3.4.7 Entity Relationship Diagram

Gambar 3. 36 Entity Relationship Diagram

Tabel 3. 15 Keterangan “Tabel Pengguna”

Nama Field Tipe Data

Ukuran Field

Keterangan

IdPengguna String 3 Primary Key, indexed, tidak dapat diduplikasi

NamaPengguna String 20 Nama yang digunakan oleh pengguna PassPengguna String 10 Password pengguna IDpertanyaan String 2 Angka kode pertanyaan untuk

Recovery Password JwbnPengguna String 50 Jawaban unt uk Recovery Password Tabel 3. 16 Keterangan “Tabel FlashCard”


Ukuran Field

Keterangan

IdFlashC String 5 Primary Key IdPengguna String 3 Foreign Key IdKosakata String 3 Foreign Key

Kana_FC String 50 Huruf Kana Jepang Romanji_FC String 50 Huruf alfabetis Arti_FC String 100 Arti kata dalam bahasa Indonesia

Tabel 3. 17 Keterangan “Tabel Kosakata”


Ukuran Field

Keterangan

IdKosakata String 3 Primary Key, array pertama sebagai kode bab, dua array terakhir sebagai kode nomor kosakata per bab.

Kana String 50 Huruf Kana Jepang

75

Romanji String 50 Huruf Alfabetis Arti String 100 Menyimpan arti kosakata dalam

bahasa Indonesia Suara String 100 Menyimpan alamat/lokasi file suara Tabel 3. 18 Keterangan “Tabel RQuestion”


Ukuran Field

Keterangan

IdPertanyaan String 2 Primary Key, kode pertanyaan Recovery Password

StringTanya String 50 Jawaban pengguna

Tabel 3. 19 Keterangan “Tabel Latihan”


Ukuran Field

Keterangan

IdLatihan String 3 Primary Key, array pertama sebagai kode bab, dua array terakhir sebagai kode soal.

Soal String 100 Soal latihan JawabanBenar String 50 Kunci jawaban JawabanAlt1 String 50 Pilihan jawaban yang salah JawabanAlt2 String 50 Pilihan jawaban yang salah Gambar String 100 URL lokasi gambar

76

3.5 Storyboard

3.5.1 Menu Login

Tabel 3.20 Tabel Storyboard “Menu Login”

Multimedia Storyboard Project: Perangkat Ajar Bahasa Jepang Berbasis Multimedia unt uk Kelas 8 SMP Kristen Yusuf

Date:

Screen: 1 of 22 Screen ID: 1

Screen Description: Pada bounding box putih akan ditampilkan text box unt uk memasukkan nama dan password pengguna dan tiga buah tombol “Masuk”, “Lupa password”, “Daftar disini”. Terdapat area animasi di sebelah area login. Pada bounding box abu-abu terdapat tombol “Keluar” dan tombol “ Suara”. Link From Screen ID: 2, 3, 19 Link to Screen ID: 2, 3, 4, 19 Color Scheme: abu-abu, putih

Text Attributes: architek

Still Images: background.jpeg

77

Audio: BGM.mp3

Video:-

Animation: opening_animation

Tabel 3.21 Tabel keterangan gambar rancangan layar “Menu Login”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Text “Nama” 4 Text Text “Password” 5 Tombol Untuk masuk ke Menu Awal 6 Text Text “Belum terdaftar?” 7 Check box Untuk menginput nama pengguna 8 Check box Untuk menginput password pengguna 9 Tombol Untuk mengatur mode keluaran suara (On / Off) 10 Tombol Untuk masuk ke menu pendaftaran 11 Tombol Tombol untuk masuk ke “Menu Recovery Password’ 12 Animasi Animasi pembuka

Spesifikasi proses “Menu Login”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA Tombol ‘Masuk’ ditekan MAKA JIKA user_tb = NULL MAKA Alert = ‘Nama harus diisi’ AKHIR JIKA JIKA pass_tb = NULL MAKA Alert = ‘Password harus diisi’ AKHIR JIKA Baca database DIMANA NamaPengguna = user_tb JIKA NamaPengguna tidak ditemukan MAKA Alert = ‘Nama belum terdaftar’ LAINNYA JIKA PassPengguna != pass_tb MAKA Alert = ‘password salah’ AKHIR JIKA Masuk ke “Menu Awal”

78

AKHIR JIKA JIKA Tombol ‘ Lupa Password’ ditekan MAKA Masuk ke “Menu Recovery Password” AKHIR JIKA JIKA Tombol ‘Daftar di sini’ ditekan MAKA Masuk ke “Menu Pendaftaran” AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA

JIKA FlagSuara = 1 MAKA FlagSuara = 0 Matikan Musik AKHIR JIKA JIKA FlagSuara = 0 MAKA FlagSuara = 1 Mainkan Musik AKHIR JIKA

AKHIR JIKA JIKA Tombol ‘Keluar’ ditekan MAKA Masuk ke “Menu Konfirmasi Keluar” AKHIR JIKA

Selesai

79

3.5.2 Menu Pendaftaran

Tabel 3.22 Tabel Storyboard “Menu Pendaftaran”


Date:


Screen Description: Pada bounding box putih akan ditampilkan text box unt uk memasukkan nama, password, dan konfirmasi password, pertanyaan drop down dan text box untuk memasukkan jawaban pengguna serta tombol “Daftar” dan “Kembali” . Pertanyaan dropdown disediakan agar pengguna dapat memilih pertanyaan untuk recovery password. Terdapat area animasi di sebelah area pendaftaran. Pada bounding box abu-abu terdapat tombol “Keluar” dan tombol “ Suara”. Link From Screen ID: 1, 19 Link to Screen ID: 1, 4, 19 Color Scheme: Abu-abu, putih

Text Attributes: Architek


80

Audio: BGM.mp3

Video: -


Tabel 3.23 Tabel keterangan gambar rancangan layar “Menu Pendaftaran”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Text “Nama” 4 Text Text “Password” 5 Text Text “Konfirmasi Password” 6 Drop down Drop down pertanyaan recovery password 7 Text box Untuk menginput jawaban pengguna 8 Tombol Untuk kem bali ke Menu Login 9 Tombol Untuk mengatur mode keluaran suara (On / Off) 10 Text box Untuk menginput nama pengguna 11 Text box Untuk menginput password pengguna 12 Tombol Untuk melakukan pendaftaran ke database dan masuk ke

Menu Awal bila pendaftaran berhasil. 13 Text box Untuk memasukkan konfirmasi password pengguna 14 Animasi Animasi pembuka

Spesifikasi proses “Menu Pendaftaran”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA Tombol ‘Kembali’ ditekan MAKA Masuk ke “Menu Login” AKHIR JIKA JIKA Tombol ‘Daftar’ ditekan MAKA JIKA nama_tb = NULL MAKA Alert = “Nama harus diisi” AKHIR JIKA JIKA pass_tb = NULL MAKA Alert = “Password harus diisi” AKHIR JIKA

81

JIKA konfPass_tb = NULL MAKA Alert = “Konfirmasi pasword harus diisi” AKHIR JIKA JIKA pass_tb != konfPass_tb MAKA Alert = “Password dan konfirmasi password harus samai” AKHIR JIKA JIKA jawaban_tb = NULL MAKA Alert = “Jawaban pertanyaan pengembalian password harus diisi” AKHIR JIKA TULIS database DIMANA

NamaPengguna = nama_tb, PassPengguna = pass_tb IDQuestion = ID_drop JwbnPengguna = jawaban_tb AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



Selesai

82

3.5.3 Menu Recovery Password

Tabel 3.24 Tabel Storyboard “Menu Recovery Password”


Date:


Screen Description: Pada bounding box putih akan ditampilkan text box untuk memasukkan nama, dan jawaban pertanyaan yang dipilih.. Password pengguna akan ditampilkan pada textbox. Terdapat tombol “Kembali”. Pada bounding box abu-abu terdapat tombol “Keluar” dan tombol “ Suara”.

Link From Screen ID: 1, 19 Link to Screen ID: 1, 19 Color Scheme: Abu-abu, putih



Audio: BGM.mp3

83

Video: -


Tabel 3.25 Tabel keterangan gambar rancangan layar “Menu Recovery Password”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Text “Nama” 4 Drop down Drop down untuk pertanyaan recovery password 5 Text box Untuk menginput jawaban pertanyaan recovery password 6 Tombol Tombol untuk meminta password 7 Tombol Untuk kem bali ke Menu Login 8 Text box Menampilkan password pengguna (disabled) 9 Tombol Untuk mengatur mode keluaran suara (On / Off) 10 Text box Untuk menginput nama pengguna 11 Animasi Animasi pembuka

Spesifikasi proses “Menu Recovery Password”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA Tombol ‘Kembali’ ditekan MAKA Masuk ke “Menu Login” AKHIR JIKA JIKA Tombol ‘Password’ ditekan MAKA JIKA nama_tb = NULL MAKA Alert = “Nama harus diisi” AKHIR JIKA Baca database Tampilkan StringTanya DIMANA IDQuestion = IDpertanyaan JIKA jawab_tb = NULL MAKA Alert = “Jawaban harus diisi” AKHIR JIKA Baca database JIKA JwbnPengguna!= jawab_tb MAKA Alert = “Jawaban salah” AKHIR JIKA

84

JIKA JwbnPengguna = jawab_tb MAKA Pass_tb = PassPengguna AKHIR JIKA Alert = “Konfirmasi password harus diisi” AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



Selesai

85

3.5.4 Menu Awal

Tabel 3.26 Tabel Storyboard “Menu Awal”


Date:


Screen Description: Pada bounding box putih akan ditampilkan judul aplikasi dan tiga buah tombol menu. Pengguna dapat memilih menu yang diinginkan. Pada saat pengguna melakukan rollover pada salah satu tombol yang tersedia, pada area bagian bawah tombol akan ditampilkan keterangan mengenai pilihan menu tersebut. Pada bounding box abu-abu terdapat tombol “Keluar” dan tombol “ Suara”. Link From Screen ID: 1, 2, 19 Link to Screen ID: 5, 11, 17,19 Color Scheme: Abu-abu, putih.


Still Images: background.jpg

Audio: BGM.mp3

86

Video:-

Animation: -

Tabel 3.27 Keterangan gambar rancangan layar “Menu Awal”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul aplikasi dan petunjuk untuk memilih tombol 4 Tombol Untuk menuju ke “Menu Materi” 5 Tombol Untuk menuju ke “Menu FlashCard” 6 Tombol Untuk menuju ke “Menu Tabel Kana” 7 Text area Menampilkan keterangan sesuai dengan tombol yang di-

rollover 8 Tombol Untuk mengatur mode keluaran suara (On / Off) Spesifikasi proses “Menu Awal”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol “Pilih Materi” ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol “FlashCard” ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol “Tabel Kana” ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



Selesai

87

3.5.5 Menu Pilih Materi

Tabel 3.28 Tabel Storyboard “Menu Pilih Materi”


Date:


Screen Description: Pada bounding box putih akan ditampilkan judul menu dan tombol-tombol bab materi. Pengguna dapat memilih salah satu tombol yang tersedia untuk menuju bab pelajaran yang diinginkan. Ketika pengguna melakukan rollover pada tombol bab yang dipilih, pada area bagian bawah tombol akan ditampilkan keterangan mengenai materi yang akan dibahas pada bab tersebut. Pada bounding box abu-abu terdapat tombol “Keluar”, tombol “Pilih Materi”,”Gunakan FlashCard”, “Lihat Tabel Kana” serta tombol “ Suara”. Link From Screen ID: 4,5,6,7,8,11,12,13,14,17,18,19

Link to Screen ID: 5, 6, 11, 17, 19

Color Scheme: Abu-abu, putih.

Text Attributes: Architek 12 pt

88

Tabel 3.29 Keterangan gambar rancangan layar “Menu Pilih Materi”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul menu 4 Tombol Untuk menuju ke “Menu Tata Bahasa” bab yang dipilih 5 Tombol Untuk menuju ke “Menu Pilih Materi” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Tabel Kana” 8 Text area Menampilkan keterangan sesuai dengan tombol bab yang

di-rollover 9 Tombol Untuk mengatur mode keluaran suara (On / Off)

Spesifikasi proses “Menu Pilih Materi”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Bab 4’ ditekan MAKA Tampilkan layar “Menu Materi” materi = 4 AKHIR JIKA JIKA tombol ‘Bab 5’ ditekan MAKA Tampilkan layar “Menu Materi” materi = 5


Audio: BGM.mp3

Video: -

Animation: -

89

AKHIR JIKA JIKA tombol ‘Bab 6’ ditekan MAKA Tampilkan layar “Menu Materi” materi = 6 AKHIR JIKA JIKA tombol ‘Bab 7’ ditekan MAKA Tampilkan layar “Menu Materi” materi = 7 AKHIR JIKA JIKA tombol ‘Bab 8’ ditekan MAKA Tampilkan layar “Menu Materi” materi = 8 AKHIR JIKA JIKA tombol ‘Bab 9’ ditekan MAKA Tampilkan layar “Menu Materi” materi = 9 AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



Selesai

90

3.5.6 Menu Materi

Tabel 3.30 Tabel Storyboard “Menu Materi”

Style Guide Project: Perangkat Ajar Bahasa Jepang

Berbasis Multimedia unt uk Kelas 8 SMP Kristen Yusuf

Date:

Color Scheme: Abu-abu, putih, biru



Audio: BGM.mp3

Video:-

Animation: animasi per bab

Multimedia Storyboard Screen: 6 of 22 Screen ID: 6

91

Screen Description: Pada bounding box putih akan ditampilkan judul bab, isi pelajaran tata bahasa, serta tombol “Prev” dan “Next” untuk menuju halaman atau segmen tata bahasa lainnya. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”,“ Gunakan FlashCard”, “Lihat Tabel Kana”, “Materi”, “Kosakata”, “Latihan” serta tombol “Suara”. Link From Screen ID: 5, 6,7, 8,19 Link to Screen ID: 5, 6, 7, 8, 11, 17,

19

Tabel 3.31 Keterangan gambar rancangan layar “Menu Materi”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul bab yang dipilih 4 Text area Menampilkan pelajaran tata bahasa pada bab ini 5 Tombol Untuk menuju ke “Menu Pilih Materi” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Tabel Kana” 8 Tombol Untuk menuju ke “Menu Materi” 9 Tombol Untuk menuju ke “Menu Kosakata”

10 Tombol Untuk menuju ke “Menu Latihan” 11 Tombol Untuk mengatur mode keluaran suara (On / Off) 12 Scroll bar Terdapat scroll bar apabila materi terlalu panjang pada

satu halaman atau segmen 13 Tombol Untuk menuju segmen materi sebelumnya 14 Tombol Untuk menuju segmen materi selanjutnya.

Spesifikasi proses “Menu Materi”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA

92

Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Materi’ ditekan MAKA Tampilkan layar saat ini AKHIR JIKA JIKA tombol ‘Kosakata’ ditekan MAKA Tampilkan layar “Menu Kosakata” Kode_bab = materi AKHIR JIKA JIKA tombol ‘Latihan’ ditekan MAKA Tampilkan layar “Menu Latihan” Kode_bab = materi AKHIR JIKA JIKA tombol ‘Prev’ ditekan MAKA Tampilkan layar segmen sebelumnya AKHIR JIKA JIKA tombol ‘Next’ ditekan MAKA Tampilkan layar segmen selanjutnya AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



Selesai

93

3.5.7 Menu Kosakata

Tabel 3.32 Tabel Storyboard “Menu Kosakata”



Date:




Audio: BGM.mp3

Video:-

Animation:-


94

Screen Description: Pada bounding box putih akan ditampilkan judul bab, daftar kosakata, tombol untuk melakukan penambahan kosakata pada FlashCard dan tombol untuk membatalkan semua check box yang telah dipilih. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”,”Lihat Tabel Kana”, “Materi”, “Kosakata”, “Latihan” serta tombol “Suara”. Link From Screen ID: 6,7,8, 19 Link to Screen ID: 5,6,7,8,11,16,17,19

Tabel 3.33 Keterangan gambar rancangan layar “Menu Kosakata”

Spesifikasi proses “Menu Kosakata”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul bab yang dipilih 4 Text area Menampilkan daftar kosakata pada bab ini 5 Tombol Untuk menuju ke “Menu Pilih Materi” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Tabel Kana” 8 Tombol Untuk menuju ke “Menu Materi” 9 Tombol Untuk menuju ke “Menu Kosakata”

10 Tombol Untuk menuju ke “Menu Latihan” 11 Tombol Untuk mengatur mode keluaran suara (On / Off) 12 Check box Untuk menandai pilihan 13 Text Menampilkan kosakata dalam huruf Jepang 14 Tombol Menambahkan kosakata yang telah dipilih pada FlashCard 15 Text Menampilkan bacaan kosakata (huruf alphabet) 16 Tombol Mengosongkan semua check box yang telah dipilih 17 Text Menampilkan arti kosakata dalam Bahasa Indonesia 18 Tombol Memainkan suara kosakata 19 Scroll bar Terdapat scroll bar apabila kosakata terlalu panjang pada

satu halaman atau segmen

95

Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Materi’ ditekan MAKA Tampilkan layar “Menu Materi” AKHIR JIKA JIKA tombol ‘Kosakata’ ditekan MAKA Tampilkan layar saat ini AKHIR JIKA JIKA tombol ‘Latihan’ ditekan MAKA Tampilkan layar “Menu Latihan” Kode_bab = materi AKHIR JIKA JIKA tombol “Tambahkan ke FlashCard” ditekan MAKA Tambahkan semua kosakata yang dipilih ke dalam database FlashCard

DENGAN idPengguna = idPengguna_SaatIni AKHIR JIKA JIKA tombol “Kosongkan Pilihan” ditekan MAKA

Kosongkan semua check box AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA


AKHIR JIKA JIKA Tombol ‘Keluar’ ditekan MAKA Masuk ke “Menu Konfirmasi Keluar”

AKHIR JIKA Selesai

96

3.5.8 Menu Latihan

Tabel 3.34 Tabel Storyboard “Menu Latihan”



Date:

Color Scheme: Abu-abu, putih



Audio: BGM.mp3

Video: -

Animation: -


97

Screen Description: Pada bounding box putih akan ditampilkan judul bab, soal-soal latihan, tombol untuk memeriksa jawaban. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”, “Lihat Tabel Kana”, “Materi”, “Kosakata”, “Latihan” serta tombol “Suara”. Link From Screen ID: 6,7,8,9,10,19 Link to Screen ID: 5,6,7,8,9,10,11,17,19

Tabel 3.35 Keterangan gambar rancangan layar “Menu Latihan”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul bab yang dipilih 4 Text area Menampilkan soal-soal latihan pada bab ini 5 Tombol Untuk menuju ke “Menu Pilih Materi” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Tabel Kana” 8 Tombol Untuk menuju ke “Menu Materi” 9 Tombol Untuk menuju ke “Menu Kosakata”

10 Tombol Untuk menuju ke “Menu Latihan” 11 Tombol Untuk mengatur mode keluaran suara (On / Off) 12 Tombol Untuk mengumpulkan / memeriksa jawaban

Spesifikasi proses “Menu Latihan”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Materi’ ditekan MAKA Tampilkan layar “Menu Materi” AKHIR JIKA JIKA tombol ‘Kosakata’ ditekan MAKA

98

Tampilkan layar “Menu Kosakata” Kode_bab = materi AKHIR JIKA JIKA tombol ‘Latihan’ ditekan MAKA Tampilkan layar saat ini AKHIR JIKA JIKA tombol ‘Kumpulkan Jawaban’ ditekan MAKA Periksa jawaban pada database Tampilkan pop‐up AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

99

3.5.9 Menu Pop-up Latihan

Tabel 3.36 Tabel Storyboard “Menu Pop Up Latihan”



Date:




Audio: -

Video: -

Animation: -


100

Screen Description: Layar pada menu latihan di disable ditandai dengan transparency yang berkurang. Muncul Pop-up menu sesuai dengan jawaban pengguna (benar atau salah). Terdapat tombol lanjut unt uk kembali mengerjakan soal. Link From Screen ID: 8 Link to Screen ID: 8

Tabel 3.37 Keterangan gambar rancangan layar “Menu Pop‐up Latihan”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol unt uk menuju ke “Menu Konfirmasi Keluar”

(disabled) 3 Text Judul bab yang dipilih(disabled) 4 Text area Menampilkan soal-soal latihan pada bab ini(disabled) 5 Tombol Untuk menuju ke “Menu Pilih Materi” (disabled) 6 Tombol Untuk menuju ke “Menu FlashCard” (disabled) 7 Tombol Untuk menuju ke “Menu Tabel Kana” (disabled) 8 Tombol Untuk menuju ke “Menu Materi” (disabled) 9 Tombol Untuk menuju ke “Menu Kosakata” (disabled)

10 Tombol Untuk menuju ke “Menu Latihan” (disabled) 11 Tombol Untuk mengatur mode keluaran suara (On / Off)

(disabled) 12 Tombol Untuk mengumpulkan / memeriksa jawaban (disabled) 13 Gambar &

Teks Feedback atas jawaban pengguna

14 Tombol Untuk menutup jendela pop up dan kembali mengerjakan soal.

Spesifikasi proses “Menu Pop-up Latihan”

Mulai JIKA Tombol ‘ Lanjut’ ditekan MAKA Tutup jendela pop‐up

AKHIR JIKA Selesai

101

3.5.10 Menu Pop-up Hasil Latihan

Tabel 3,38 Tabel Storyboard “Menu Hasil Latihan”



Date:




Audio: -

Video: -

Animation: -


102

Screen Description: Layar pada menu latihan di disable ditandai dengan transparency yang berkurang. Muncul Pop-up menu sesuai dengan jawaban pengguna (benar atau salah). Terdapat tombol lanjut unt uk kembali mengerjakan soal. Link From Screen ID: 8 Link to Screen ID: 8

Tabel 3.39 Keterangan gambar rancangan layar “Menu Hasil Latihan”

Spesifikasi proses “Menu Pop-up Hasil Latihan”

Mulai JIKA Tombol ‘Coba Lagi’ ditekan MAKA

Tutup jendela pop‐up Masuk ke “Menu Latihan”

AKHIR JIKA JIKA Tombol ‘Pilih Materi’ ditekan MAKA

Tutup jendela pop‐up Masuk ke “Menu Pilih Materi”

AKHIR JIKA Selesai

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol unt uk menuju ke “Menu Konfirmasi Keluar”

(disabled) 3 Text Judul bab yang dipilih(disabled) 4 Text area Menampilkan soal-soal latihan pada bab ini(disabled) 5 Tombol Untuk menuju ke “Menu Pilih Materi” (disabled) 6 Tombol Untuk menuju ke “Menu FlashCard” (disabled) 7 Tombol Untuk menuju ke “Menu Tabel Kana” (disabled) 8 Tombol Untuk menuju ke “Menu Materi” (disabled) 9 Tombol Untuk menuju ke “Menu Kosakata” (disabled)

10 Tombol Untuk menuju ke “Menu Latihan” (disabled) 11 Tombol Untuk mengatur mode keluaran suara (On / Off)

(disabled) 12 Tombol Untuk mengumpulkan / memeriksa jawaban (disabled) 13 Gambar &

Teks Feedback atas jawaban pengguna

14 Tombol Untuk menutup jendela pop up dan kembali mengerjakan soal.

15 Tombol Untuk menuju ke “Menu Pilih Materi”

103

3.5.11 Menu FlashCard

Tabel 3.40 Tabel Storyboard “Menu FlashCard”

Multimedia Storyboard Project: Perangkat Ajar Bahasa Jepang Berbasis Multimedia unt uk Kelas 8

SMP Kristen Yusuf

Date:


Screen Description:

Pada bounding box putih akan ditampilkan judul menu dan dua buah tombol menu. Pengguna dapat memilih menu yang diinginkan. Pada saat pengguna melakukan rollover pada salah satu tombol yang tersedia, pada area bagian bawah tombol akan ditampilkan keterangan mengenai pilihan menu tersebut. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlasCard”, “Lihat Tabel Kana” dan tombol “ Suara”.

Link From Screen ID: 4,5,6,7,8,11,12,13,14,17,18,19

Link to Screen ID: 5,11,12,14,17, 19




104

Audio:BGM.mp3

Video:-

Animation:-

Tabel 3.41 Keterangan gambar rancangan layar “Menu FlashCard”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul Menu 4 Tombol Untuk menuju ke “Menu Mulai FlashCard” 5 Tombol Untuk menuju ke “Menu Daftar FlashCard” 6 Text area Menampilkan keterangan sesuai dengan tombol yang di-

rollover 7 Tombol Untuk mengatur mode keluaran suara (On / Off) 8 Tombol Untuk menuju ke “Menu Pilih Materi” 9 Tombol Untuk menuju ke “Menu FlashCard” 10 Tombol Untuk menuju ke “Menu Tabel Kana”

Spesifikasi proses “Menu FlashCard”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Daftar FlashCard’ ditekan MAKA Tampilkan layar “Menu Daftar FlashCard” AKHIR JIKA JIKA tombol ‘Mulai FlashCard’ ditekan MAKA Tampilkan layar “Menu Mulai FlashCard” AKHIR JIKA

105

JIKA Tombol ‘Suara’ ditekan MAKA JIKA FlagSuara = 1 MAKA FlagSuara = 0 Matikan Musik AKHIR JIKA JIKA FlagSuara = 0 MAKA FlagSuara = 1 Mainkan Musik AKHIR JIKA


AKHIR JIKA Selesai

106

3.5.12 Menu Mulai FlashCard

Tabel 3.42 Tabel Storyboard “Menu Mulai FlashCard”

Multimedia Storyboard Project: Perangkat Ajar Bahasa Jepang Berbasis Multimedia unt uk Kelas

8 SMP Kristen Yusuf

Date:

Screen: 12 of 22 Screen ID:12

Screen Description: Pada bounding box putih akan ditampilkan judul menu, drop down menu,

numeric stepper, dan tombol ‘Mulai’. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”,

“Gunakan FlashCard”, “Lihat Tabel Kana”dan tombol “ Suara”. Link From Screen ID:11, 19 Link to Screen ID:5,11,13,17,19 Color Scheme: Abu-abu, putih



107

Audio:BGM.mp3

Video:-

Animation:-

Tabel 3.43 Tabel keterangan gambar rancangan layar “Menu Mulai FlashCard”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul menu yang dipilih 4 Drop down Menampilkan pilihan bab-bab yang ada 5 Numeric

stepper Untuk menentukan jumlah kata yang ingin di review

6 Tombol Untuk menuju ke “Menu FlashCarding” 7 Tombol Untuk menuju ke “Menu Pilih Materi” 8 Tombol Untuk menuju ke “Menu FlashCard” 9 Tombol Untuk menuju ke “Menu Tabel Kana” 10 Tombol Untuk mengatur mode keluaran suara (On / Off)

Spesifikasi proses “Menu Mulai FlashCard”

Mulai JIKA FlagSuara = 1 MAKA

Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Mulai’ ditekan MAKA

MateriFC = idMateri_drop JmlhKata = jmlh_ns

AKHIR JIKA

108

JIKA Tombol ‘Suara’ ditekan MAKA JIKA FlagSuara = 1 MAKA FlagSuara = 0 Matikan Musik AKHIR JIKA JIKA FlagSuara = 0 MAKA FlagSuara = 1 Mainkan Musik AKHIR JIKA


AKHIR JIKA Selesai

109

3.5.13 Menu FlashCarding

Tabel 3.44 Tabel Storyboard “Menu FlashCarding”

Multimedia Storyboard Project: Perangkat Ajar Bahasa Jepang Berbasis Multimedia unt uk Kelas

8 SMP Kristen Yusuf

Date:


Screen Description: Pada bounding box putih akan ditampilkan judul menu, text area, text input, dan

dua buah tombol. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”,

“Gunakan FlashCard”, “Lihat Tabel Kana”dan tombol “ Suara”. Link From Screen ID:12,19 Link to Screen ID:5,11,17, 19 Color Scheme: Abu-abu, putih



Audio:BGM.mp3

110

Video:-

Animation:-

Tabel 3.45 Tabel keterangan gambar rancangan layar “Menu FlashCarding”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul menu yang dipilih 4 Text Area Mengeluarkan kosakata dalam tulisan hiragana 5 Tombol Untuk menuju ke “Menu Pilih Materi” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Tabel Kana” 8 Tombol Untuk mengeluarkan pet unjuk 9 Text Area Area dimana petunjuk keluar 10 Text box Tempat pengguna melakukan input jawaban 11 Tombol Untuk mengatur mode keluaran suara (On / Off) 12 Tombol Untuk melakukan tindakan pass/ lewat 13 Text Area Menampilkan kesempatan pengguna untuk menjawab

Spesifikasi proses “Menu FlashCarding”

Mulai Baca database

JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Petunjuk’ ditekan MAKA

petunjuk = Arti DIMANA IdFlashC = IdSaatIni AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA

111



AKHIR JIKA Selesai

112

3.5.14 Menu Daftar FlashCard

Tabel 3.46 Tabel Storyboard “Menu Daftar FlashCard”

Multimedia Storyboard Project: Perangkat Ajar Bahasa Jepang


Date:


Screen Description: Pada bounding box putih akan ditampilkan judul dan tiga buah tombol menu. Pengguna dapat memilih menu yang diinginkan. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”, “Lihat Tabel Kana” dan tombol “ Suara”.

Link From Screen ID: 11,19 Link to Screen ID: 5,11,12,15,16,17, 19




Audio:-

113

Video:-

Animation:-

Tabel 3.47 Keterangan gambar rancangan layar “Menu Daftar FlashCard”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul menu yang dipilih 4 Text area Menampilkan daftar kosakata 5 Tombol Untuk menuju ke “Menu Pilih Materi” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Tabel Kana” 8 Check box Untuk menandai pilihan 9 Text Menampilkan kosakata dalam huruf Jepang 10 Tombol Menambahkan kosakata baru 11 Text Menampilkan bacaan kosakata (huruf alphabet) 12 Tombol Memulai review FlashCard 13 Tombol Untuk menghapus kosakata yang telah dipilih 14 Text Menampilkan arti kosakata dalam Bahasa Indonesia 15 Scroll bar Terdapat scroll bar apabila daftar kosakata terlalu panjang

pada satu halaman 16 Tombol Untuk mengatur mode keluaran suara (On / Off) 17 Tombol Untuk mengubah kosakata

Spesifikasi proses “Menu Daftar FlashCard”

Mulai Baca database Tampilkan Kosakata DIMANA IdPengguna = IdPenggunaSaatIni

JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA

114

Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Tambah FlashCard Baru’ ditekan MAKA

Tampilkan Layar “Menu Tambah FlashCard” AKHIR JIKA JIKA tombol ‘Mulai FlashCard’ ditekan MAKA Tampilkan layar “Menu Mulai FlashCard” AKHIR JIKA JIKA tombol ‘Kosongkan semua’ ditekan MAKA Mengosongkan semua check box AKHIR JIKA JIKA tombol ‘Ubah’ ditekan MAKA

Tampilkan layar “Menu Ubah FlashCard” AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

115

3.5.15 Menu Ubah FlashCard

Tabel 3.48 Tabel Storyboard “Menu Ubah FlashCard”



Date:


Screen Description: Pada bounding box putih akan ditampilkan judul menu, tiga text input, dan dua buah tombol menu. Pengguna dapat memilih menu yang diinginkan. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”, “Lihat Tabel Kana”dan tombol “ Suara”.

Link From Screen ID: 14,19 Link to Screen ID: 5,11,12,17,19 Color Scheme: Abu-abu, putih



Audio:-

116

Video:-

Animation:-

Tabel 3.49 Tabel keterangan gambar rancangan layar “Menu Ubah FlashCard”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul menu yang dipilih 4 Textbox Untuk memasukkan kosakata Jepang 5 Textbox Untuk memasukkan pelafalan kosakata Jepang 6 Textbox Untuk memasukkan arti kosakata Jepang 7 Text area Softkeyboard untuk menginput huruf hiragana 8 Tombol Untuk menuju ke “Menu Pilih Materi” 9 Tombol Untuk menuju ke “Menu FlashCard” 10 Tombol Untuk menuju ke “Menu Tabel Kana” 11 Tombol Untuk mengatur mode keluaran suara (On / Off) 12 Tombol Untuk menambah kosakata baru ke dalam database 13 Tombol Mengosongkan semua textbox 14 Tombol Untuk menuju ke “Menu FlashCarding” 15 Drop down Untuk menamplkan pilihan kategorii bab yang ada

Spesifikasi proses “Menu Ubah FlashCard”

Mulai Baca Database DIMANA IdFlashCard = IdKataDipilih kana_tb = Kana_FC romanji_tb = Romanji_FC Arti_tb=Arti_FC IdBab_drop = string pertama IdFlashCard JIKA FlagSuara = 1 MAKA

Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana”

117

AKHIR JIKA JIKA tombol ‘Simpan FlashCard’ ditekan MAKA

JIKA kana_tb = NULL MAKA Alert = “Masukkan huruf kana” AKHIR JIKA JIKA romanji_tb = NULL MAKA Alert = “Masukkan huruf romanji” AKHIR JIKA JIKA arti_tb = NULL MAKA Alert = “Masukkan arti kata” AKHIR JIKA Tulis ke database DIMANA IdPengguna = IdPenggunaSaatIni Kana_FC = kana_tb Romanji_FC = romanji_tb Arti_FC = arti_tb

AKHIR JIKA JIKA tombol ‘Kosongkan semua’ ditekan MAKA Mengosongkan semua text box AKHIR JIKA JIKA tombol ‘Mulai FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCarding” AKHIR JIKA JIKA tombol ‘Kosongkan semua’ ditekan MAKA Mengosongkan semua check box AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

118

3.5.16 Menu Tambah FlashCard

Tabel 3.50 Tabel Storyboard “Menu Tambah FlashCard”



Date:


Screen Description: Pada bounding box putih akan ditampilkan judul menu, tiga text input, dan dua buah tombol menu. Pengguna dapat memilih menu yang diinginkan. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”, “Lihat Tabel Kana”dan tombol “ Suara”.

Link From Screen ID: 7,14,19 Link to Screen ID: 5,11,12,16,17,19 Color Scheme: Abu-abu, putih



Audio:-

119

Video:-

Animation:-

Tabel 3.51 Tabel keterangan gambar rancangan layar “Menu Tambah FlashCard”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul menu yang dipilih 4 Textbox Untuk memasukkan kosakata Jepang 5 Textbox Untuk memasukkan pelafalan kosakata Jepang 6 Textbox Untuk memasukkan arti kosakata Jepang 7 Text area Softkeyboard untuk menginput huruf hiragana 8 Tombol Untuk menuju ke “Menu Pilih Materi” 9 Tombol Untuk menuju ke “Menu FlashCard” 10 Tombol Untuk menuju ke “Menu Tabel Kana” 11 Tombol Untuk mengatur mode keluaran suara (On / Off) 12 Tombol Untuk menambah kosakata baru ke dalam database 13 Tombol Mengosongkan semua textbox 14 Tombol Untuk menuju ke “Menu FlashCarding”

Spesifikasi proses “Menu Tambah FlashCard”


Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Tambah FlashCard Baru’ ditekan MAKA

JIKA kana_tb = NULL MAKA Alert = “Masukkan huruf kana” AKHIR JIKA JIKA romanji_tb = NULL MAKA

120

Alert = “Masukkan huruf romanji” AKHIR JIKA JIKA arti_tb = NULL MAKA Alert = “Masukkan arti kata” AKHIR JIKA Tulis ke database DIMANA IdPengguna = IdPenggunaSaatIni Kana_FC = kana_tb Romanji_FC = romanji_tb Arti_FC = arti_tb

AKHIR JIKA JIKA tombol ‘Kosongkan semua’ ditekan MAKA Mengosongkan semua text box AKHIR JIKA JIKA tombol ‘Mulai FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCarding” AKHIR JIKA JIKA tombol ‘Kosongkan semua’ ditekan MAKA Mengosongkan semua check box AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

121

3.5.17 Menu Tabel Kana

Tabel 3.52 Tabel Storyboard “Menu Tabel Kana”

Multimedia Storyboard Project: Perangkat Ajar Bahasa Jepang Berbasis Multimedia unt uk Kelas 8

SMP Kristen Yusuf

Date:


Screen Description: Pada bounding box putih akan ditampilkan judul menu dan dua buah tombol

menu. Pengguna dapat memilih menu yang diinginkan. Pada saat pengguna melakukan rollover pada salah sat u tombol yang tersedia, pada area bagian bawah tombol akan ditampilkan keterangan mengenai pilihan menu tersebut. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “Gunakan FlashCard”, “Lihat Tabel Kana”dan tombol “ Suara”. Link From Screen ID: 4,5,6,7,8,11,12,14,15,16,17,19

Link to Screen ID: 5,11,17,18,19



Still Images:background.jpeg

122

Audio:-

Video:-

Animation:-

Tabel 3.53 Keterangan gambar rancangan layar “Menu tabel Kana”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Keluar” 3 Text Judul Menu 4 Tombol Untuk menuju ke “Menu Tabel Hiragana” 5 Tombol Untuk menuju ke “Menu Tabel Katakana” 6 Text area Menampilkan keterangan sesuai dengan tombol yang di-

rollover 7 Tombol Untuk mengatur mode keluaran suara (On / Off) 8 Tombol Untuk menuju ke “Menu Pilih Materi” 9 Tombol Untuk menuju ke “Menu FlashCard” 10 Tombol Untuk menuju ke “Menu Tabel Kana”

Spesifikasi proses “Menu Tabel Kana”


Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA

JIKA tombol “Hiragana” ditekan MAKA Tampilkan layar “Menu Hiragana” AKHIR JIKA JIKA tombol “Katakana” ditekan MAKA Tampilkan layar “Menu Katakana”

123

AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

124

3.5.18 Menu Hiragana dan Katakana

Tabel 3.54 Tabel Storyboard “Menu Hiragana” dan “Menu Katakana”



Date:




Audio:audio per huruf kana

Video:-

Animation:-


125

Screen Description: Pada bounding box putih akan ditampilkan judul menu dan text area yang akan

menampilkan tabel sesuai dengan menu Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”, “Lihat Tabel Kana”, “Tabel Lain”dan tombol “ Suara”. Link From Screen ID: 17,18,19 Link to Screen ID: 5,11,17,19

Tabel 3.55 Keterangan gambar rancangan layar “Menu Hiragana/ Katakana”

Spesifikasi proses “Menu Hiragana” dan “Menu Katakana”


Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA

JIKA tombol ‘Hiragana’ ditekan MAKA Tampilkan layar “Menu Hiragana” AKHIR JIKA JIKA tombol ‘Katakana’ ditekan MAKA Tampilkan layar “Menu Katakana” AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Keluar” 3 Text Judul Menu 4 Text Area Untuk menampilkan tabel sesuai dengan menu yang

dipilih 5 Tombol Untuk menuju ke “Menu Pilih Materi” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Tabel Kana” 8 Tombol Untuk merubah tabel 9 Tombol Untuk mengatur mode keluaran suara (On / Off)

126

3.5.19 Pop-up Keluar

Tabel 3.56 Tabel Storyboard “Pop‐up Keluar”

Multimedia Storyboard Project: Perangkat Ajar Bahasa

Jepang Berbasis Multimedia untuk Kelas 8 SMP Kristen Yusuf

Date:


Screen Description: Pada layar m uncul pop-up unt uk mengkonfirmasi pengguna yang akan keluar dari aplikasi. Link From Screen ID: 1,2,3,4,5,6,7, 8,11, 12, 13,14, 15,16,17,18, 20,21,22

Link to Screen ID: ,2,3,4,5,6,7,8,11,12, 13,14, 15,16,17,18,20,21,22

Color Scheme:Abu-abu, putih



Audio:-

Video:-

Animation:-

127

Tabel 3.57 Keterangan gambar rancangan layar “Pop‐up Keluar”

No Kategori Penjelasan 1 Tombol Tombol untuk keluar dari aplikasi 2 Tombol Tombol untuk menutup jendela pop-up

Spesifikasi proses “Pop-up Keluar”

Mulai JIKA tombol ‘Tidak’ ditekan MAKA Tutup jendela pop‐up AKHIR JIKA

JIKA tombol ‘Ya’ ditekan MAKA Keluar dari aplikasi AKHIR JIKA

Selesai

128

3.5.20 Menu Awal Guru

Tabel 3.58 Tabel Storyboard “Menu Awal Guru”


Date:


Screen Description: Pada bounding box putih akan ditampilkan judul aplikasi dan empat buah tombol menu. Pengguna dapat memilih menu yang diinginkan. Pada bounding box abu-abu terdapat tombol “Keluar” dan tombol “ Suara”. Link From Screen ID: 1, 2, 19 Link to Screen ID: 5, 11, 17,19, 21 Color Scheme: Abu-abu, putih.



Audio: BGM.mp3

Video:-

129

Animation: -

Tabel 3.59 Keterangan gambar rancangan layar “Menu Awal Guru”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul aplikasi 4 Tombol Untuk menuju ke “Menu Materi” 5 Tombol Untuk menuju ke “Menu Tabel Kana” 6 Tombol Untuk menuju ke “Menu FlashCard” 7 Tombol Untuk menuju ke “Menu Daftar Soal Latihan” 8 Tombol Untuk mengatur mode keluaran suara (On / Off) Spesifikasi proses “Menu Awal”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol “Pilih Materi” ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol “FlashCard” ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol “Tabel Kana” ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol “Edit Soal” ditekan MAKA Tampilkan layar “Menu Daftar Soal Latihan” AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



Selesai

130

3.5.21 Menu Daftar Soal Latihan

Tabel 3.60 Tabel Storyboard “Menu Daftar Soal Latihan”



Date:




Audio: BGM.mp3

Video:-

Animation:-


131

Screen Description: Pada bounding box putih akan ditampilkan judul bab, daftar soal, tombol untuk melakukan penambahan soal serta tombol untuk menghapus soal bila check box dipilih. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”,”Lihat Tabel Kana”, “Edit Soal” serta tombol “ Suara”. Link From Screen ID: 19, 20 Link to Screen ID: 19, 22

Tabel 3.61 Keterangan gambar rancangan layar “Menu Daftar Soal Latihan”

Spesifikasi proses “Menu Kosakata”

Mulai JIKA FlagSuara = 1 MAKA Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Drop down Menu Drop down unt uk memilih bab pelajaran 4 Text Judul bab yang dipilih 5 Tombol Menampilkan daftar soal pada bab yang dipilih 6 Tombol Untuk menuju ke “Menu Pilih Materi” 7 Tombol Untuk menuju ke “Menu FlashCard” 8 Tombol Untuk menuju ke “Menu Tabel Kana” 9 Tombol Untuk menuju ke “Menu Daftar Soal Latihan”

10 Scroll bar Terdapat scroll bar apabila kosakata terlalu panjang pada satu halaman atau segmen

11 Tombol Untuk mengatur mode keluaran suara (On / Off) 12 Check box Untuk menandai pilihan 13 Tombol Untuk menuju ke “Menu Membuat Soal Latihan” 14 Tombol Untuk menghapus soal yang telah dipilih 15 Tombol Untuk mengubah soal yang telah dipilih

132

JIKA tombol ‘Edit Soal’ ditekan MAKA Tampilkan layar saat ini AKHIR JIKA JIKA tombol ‘Tambah Soal’ ditekan MAKA Tampilkan layar “Menu Membuat Soal Latihan” AKHIR JIKA JIKA tombol ‘Ubah’ ditekan MAKA Tampilkan layar “Menu Mengubah Soal Latihan” AKHIR JIKA JIKA tombol ‘Hapus Soal’ ditekan MAKA Hapus soal tercentang dari database AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

133

3.5.22 Menu Membuat Soal/ Menu Mengubah Soal

Tabel 3.62 Tabel Storyboard “Menu Membuat Soal”/ “Menu Mengubah Soal”



Date:


Screen Description: Pada bounding box putih akan ditampilkan judul menu, drop down menu, empat text input, dan dua buah tombol menu. Pengguna dapat memilih menu yang diinginkan. Pada bounding box abu-abu terdapat tombol “Keluar”, “Pilih Materi”, “ Gunakan FlashCard”,”Lihat Tabel Kana”, “Edit Soal” serta tombol “ Suara”

Link From Screen ID: 10, 21 Link to Screen ID: 19,21 Color Scheme: Abu-abu, putih



Audio:-

134

Video:-

Animation:-

Tabel 3.63 Tabel keterangan gambar rancangan layar “Menu Tambah Soal”

No Kategori Penjelasan 1 Gambar Gambar latar belakang pada layar tersebut 2 Tombol Tombol untuk menuju ke “Menu Konfirmasi Keluar” 3 Text Judul menu yang dipilih 4 Drop down Drop down menu untuk memilih bab latihan 5 Textbox Untuk memasukkan soal 6 Textbox Untuk memasukkan jawaban benar 7 Textbox Untuk memasukkan jawaban alt1 8 Textbox Untuk memasukkan jawaban alt2 9 Text area Untuk memasukkan url gambar 10 Tombol Untuk mengatur mode keluaran suara (On / Off) 11 Tombol Untuk menambah soal baru ke dalam database 12 Tombol Untuk melakukan pencarian (browse) gam bar 13 Tombol Untuk menuju ke “Menu Pilih Materi” 14 Tombol Untuk menuju ke “Menu FlashCard” 15 Tombol Untuk menuju ke “Menu Tabel Kana” 16 Tombol Untuk menuju ke “Menu Daftar Soal Latihan”

Spesifikasi proses “Menu Membuat Soal”


Mainkan musik AKHIR JIKA JIKA FlagSuara = 0 MAKA Matikan musik AKHIR JIKA JIKA tombol ‘Simpan Soal’ ditekan MAKA

JIKA soal_tb = NULL MAKA Alert = “Masukkan soal” AKHIR JIKA JIKA jwbBenar_tb = NULL MAKA Alert = “Jawaban Benar tidak boleh kosong” AKHIR JIKA JIKA jwbAlt1_tb = NULL MAKA Alert = “Jawaban Salah 1 tidak boleh kosong” AKHIR JIKA JIKA jwbAlt2_tb = NULL MAKA Alert = “Jawaban Salah 2 tidak boleh kosong”

135

AKHIR JIKA Tulis ke database DIMANA SoalLatihan = soal_tb JawabanBenar = jwbBenar_tb JawabanAlt1 = jwbAlt1_tb JawabanAlt2 = jwbAlt2_tb Gambar = gambar_tb

AKHIR JIKA JIKA tombol ‘Pilih Materi’ ditekan MAKA Tampilkan layar “Menu Pilih Materi” AKHIR JIKA JIKA tombol ‘Gunakan FlashCard’ ditekan MAKA Tampilkan layar “Menu FlashCard” AKHIR JIKA JIKA tombol ‘Lihat Tabel Kana’ ditekan MAKA Tampilkan layar “Menu Tabel Kana” AKHIR JIKA JIKA tombol ‘Edit Soal’ ditekan MAKA Tampilkan layar saat ini AKHIR JIKA JIKA Tombol ‘Suara’ ditekan MAKA



AKHIR JIKA Selesai

Documents

05 BAB 3 - thesis.binus.ac.idthesis.binus.ac.id/doc/bab3/2011-1-00330-if 3.pdf · dalam aplikasi ini antara lain dialog, video klip, soal-soal latihan, latihan pelafalan, daftar tata