BAB III KONSEP DAN PERANCANGAN

BAB III KONSEP DAN PERANCANGAN

3.1

Konsep Konsep perancangan bangun aplikasi modul pembelajaran Bahasa Inggris

untuk anak kelas IX SMP ini adalah dengan menggabungkan teks, gambar, animasi dan suara yang nantinya akan diimplementasikan kedalam bentuk movie atau scene. Aplikasi ini memuat modul materi pelajaran Bahasa Inggris IX SMP, di mana materi tersebut disusun sesuai dengan menggunakan Buku Sekolah Elektronik. Konsep rancang bangun aplikasi modul pembelajaran Bahasa Inggris kelas IX ini merupakan media alternatif dari salah satu alat peraga untuk belajar. Penulis mengintegrasikan gambar, animasi dan suara agar menjadi aplikasi yang menarik bagi pengguna. Deskripsi konsep aplikasi ini adalah sebagai berikut : • Judul

: Aplikasi modul pembelajaran Bahasa Inggris kelas IX SMP

• Pengguna : Dikhususkan untuk siswa kelas IX SMP • Gambar

: Menggunakan berkas berformat JPEG yang dibuat oleh penulis

• Suara

: Menggunakan berkas berformat MP3 yang dibuat menggunakan Audacity Portable

• Animasi : Animasi teks, gambar dan tombol dibuat oleh penulis

Dari konsep yang ada, penulis akan membuat aplikasi tersebut sehingga dapat digunakan oleh pelajar kelas IX SMP.

3.2 Analisis Sistem Dalam tahap merancang bangun aplikasi modul pembelajaran Bahasa Inggris untuk kelas IX SMP, tahap-tahap yang harus dilakukan adalah tahap analisis, kemudian dilanjutkan dengan tahap perancangan aplikasi tersebut. Pada

27

28

tahap pertama penulis menganalisa kebutuhan dasar yang ada pada sistem yang akan dibuat, yang biasa dilakukan adalah mempresentasikan suatu masalah, sehingga data tersebut dapat diketahui spesifikasi kebutuhannya. Berikut penjelasannya: •

Input :

Gerakan pada mouse

•

Proses :

Sistem merespon apa yang dilakukan oleh user,

contohnya jika dklik button materi, akan menampilkan menu materi •

Output :

Hasil apa yang dilakukan oleh user, contohnya

score pada hasil mengerjakan latihan. 3.3 Analisis Kebutuhan

Dalam melakukan penelitian, dibutuhkan beberapa komponen

yang

mendukung terhadap keberhasilan peneliltian ini yaitu : 1. Perangkat lunak (software) a. Sistem operasi Windows 7 b. Software Adobe Flash CS3 c. Software Adobe Photoshop CS3 d. Software Adobe Illustrator CS3 e. Software AudacityPortable 2.

Perangkat keras (hardware) a.

3.4

Leptop Pribadi

Perancangan Pada tahap ini dilakukan perancangan terhadap aplikasi yang akan dibuat

berupa perancangan struktur navigasi, Storyboard, Use case diagram, Activity Diagram, dan Sequence Diagram.

29

3.4.1

Perancangan Struktur Navigasi Struktur navigasi yang digunakan adalah navigasi hierarkis. Merupakan

suatu struktur yang mengandalkan percabangan untuk menampilkan data atau gambar pada layer dengan kriteria tertentu. Tampilan pada menu utama disebut master page (halaman utama satu), halaman tersebut mempunyai halaman percabangan yang disebut slave page (halaman pendukung) dan jika dipilih akan menjadi halaman kedua, begitu seterusnya. Gambar 3.1 merupakan struktur navigasi dari rancang bangun aplikasi modul pembelajaran Bahasa Inggris kelas IX SMP.

Gambar 3.1 Peta Navigasi Aplikasi Modul Pembelajaran Bahasa Inggris Kelas IX SMP

30

3.4.2

Perancangan Storyboard

Storyboard merupakan deskripsi masing-masing tampilan atau scene suatu kejadian dari movie yang akan dimainkan. Dengan mencantumkan semua objek serta komponen-komponen aplikasi yang akan dibuat. Satu kolom storyboard mewakili satu tampilan dilayar monitor.

English Lessons For Third Grade Junior High School

Entry

Gambar 3.2 intro Nama scene : Intro Link

: Menu Utama

Keterangan : Menampilkan halaman pembuka aplikasi

Animasi awan Menu Unit 1

Unit 4

Unit 2

Unit 5

Keluar

Gambar

Unit 3 Animasi anak dan kupukupu Game

Latihan

Ujian

listening

Gambar 3.3 menu utama Nama scene : Menu Kelas IX Link

: unit 1, 2, 3, 4, 5, TTS, latihan, ujian, listening profil dan

Keterangan : Menampilkan pilihan menu yang diinginkan.

awal

31

Kembali Judul Unit 1 Animasi awan

Gambar Gunung

Contoh Materi

Materi

Gambar 3.4 materi unit 1 Nama scene : Unit 1 Link

: frame 37, 38, dan menu

Keterangan : Halaman ini menampilkan pilihan materi unit 1

Kembali

Judul Unit 1 Animasi awan

Papan Materi

Contoh Materi

Materi

Gambar 3.5 isi materi unit 1 Nama Scene : Unit 1 Link


Keterangan : Menampilkan pilihan materi unit 1

32

Kembali

Judul Unit 1 Animasi awan

Papan Contoh Materi

Contoh Materi

Materi

Gambar 3.6 contoh materi unit 1 Nama Scene : Unit 1 Link


Keterangan : Menampilkan pilihan contoh materi unit 1

Gambar matahari

Materi

Contoh Materi

Bukit dan Pohon

Ke mba li

Judul Unit 2

Animasi mobil

Gambar 3.7 materi unit 2

Nama Scene : Unit 2 Link



33

Gambar matahari

Materi

Contoh Materi

Papan Materi

Ke mb ali

Judul Unit 2 Animasi mobil

Gambar 3.8 isi materi unit 2




Gambar matahari

Materi

Contoh Materi

Papan Contoh Materi

Ke mb ali

Judul Unit 2 Animasi mobil

Gambar 3.9 contoh materi unit 2



Keterangan Menampilkan pilihan contoh materi unit 2

34

Kembali

Animasi awan

Judul Unit 3

Rumah dan Pagar

Contoh Materi

Materi

Gambar 3.10 materi unit 3 Nama Scene : Unit 3 Link



Kembali

Animasi awan

Judul Unit 3

Papan Materi

Contoh Materi

Materi





35

Kembali

Animasi awan

Judul Unit 3

Papan Contoh Materi

Contoh Materi

Materi

Gambar 3.12 contoh materi unit 3 Nama Scene : Unit 3 Link



Kembali Judul Unit 4 Pantai dan Animasi Ombak

Contoh Materi

Materi





36

Kembali Judul Unit 4 Papan Materi

Contoh Materi

Materi





Kembali Judul Unit 4 Papan Contoh Materi

Materi

Contoh Materi





37

Judul Unit 5

Kembali

Contoh Materi

Materi

Animasi Mobil Truk

Laut

Laut





Judul Unit 5

Kembali

Contoh Materi

Materi

Papan Materi





38

Judul Unit 5

Kembali

Contoh Materi

Materi

Papan Contoh Materi





Unit 3

Unit 1

Unit 2

Unit 4

Unit 5

Kembali

Gambar 3.19 halaman utama latihan - latihan

Nama Scene : Menu Latihan Link

: lat1, lat2, lat3, lat4, lat5, dan menu

Keterangan : Menampilkan halaman latihan

39

Soal

a

b

c

d Lanjut

Gambar 3.20 latihan 1 Nama Scene : Latihan 1 Link

: frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13

Keterangan : Menampilkan soal latihan unit 1, di mana pengguna dapat memlihi jawaban yang dianggap benar

Soal

a

b

c

d Lanjut

Gambar 3.21 latihan 2

Nama Scene : Latihan 2 Link

: frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13


40

Soal

a

b

c

d Lanjut



: frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13


Soal

a

b

c

d Lanjut



: frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13


41

Soal

a

b

c

d Lanjut



: frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13


Tulisan “Final Exam”

Gambar Buku

Start

Gambar 3.25 halaman utama ujian Nama Scene : Menu Ujian Link

: ujian

Keterangan : Menampilkan teks dan gambar beserta tombol start

42

Soal

a

b

c

d Lanjut

Gambar 3.26 ujian

Nama Scene : Ujian Link Keterangan

: frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,16 : Menampilkan soal ujian dari unit 1 sampai 5, di mana

pengguna dapat memilih jawaban yang dianggap benar

Kata Sambutan dan Nama Game

Start Kembali

Gambar 3.27 halaman utama game

Nama Scene : Menu Game Link

: TTS dan menu

Keterangan : Menampilkan tombol start yang menuju kehalaman TTS

43

Kembali

Kolom-kolom teka-teki silang

Teks pertanyaan-pertanyaan

Gambar 3.28 Tampilan game teka-teki silang Nama Scene : Game crossword puzzle Link

: menu

Keterangan : Menampilkan permainan tts

3.4.3

Perancangan Use Case Diagram Use case diagram menggambarkan fungsionalitas yang diharapkan dari

sebuah sistem. Skenario dari use case merupakan rangkaian langkah-langkah yang menjabarkan sebuah interaksi antara seorang pengguna dengan sebuah sistem. Gambar 3.29 merupakan use case diagram dari aplikasi yang akan dibuat. Aplikasi

Memilih unit Latihan

<<extended>>

Memilih Materi

<<extended>> Memilih contoh materi

ujian

Pengguna

listening

Game

Gambar 3.29 Use Case Diagram Aplikasi Modul Pembelajaran Bahasa Inggris IX SMP

44

Pada aplikasi ini dapat diidentifikasi bahwa aktor utama adalah user (pengguna). Dari identifikasi aktor tersebut, maka akan didapatkan suatu use case diagram dan beberapa skenario yang memperlihatkan interaksi-interaksi use case dengan aktor. Tabel 3.1 dan Tabel 3.2 merupakan deskripsi use case yang telah digambarkan pada gambar 3.29.

Tabel 3.1 Spesifikasi naratif Use Case Materi

Nama Use Case

Belajar Bahasa Inggris unit 1 sampai unit 5

Aktor

Siswa kelas IX (Pengguna)

Deskripsi

Pengguna

dapat

mempelajari materi pelajaran Bahasa

Inggris kelas IX SMP yaitu how do you do it?, really?, what is it like?, could you..? serta long, long time ago, there was. Pengguna juga dapat mengerjakan soal latihan yang tersedia. Skenario

1. Pengguna memilih unit 1 sampai unit 5 2. Sistem masuk ke halaman unit 1 sampai unit 5 3. Pengguna memilih materi dan contoh materi 4. Sistem masuk ke halaman materi dan contoh materi

Kondisi awal

1. Pengguna menerima halaman unit 1 sampai unit 5 ini terdiri dari materi mengenai unit 1 sampai unit 5 beserta dengan contohnya 2. Pengguna menerima unit 1 sampai unit 5

Kondisi akhir

1. Pengguna mempelajari materi unit 1 sampai unit 5

45

Tabel 3.2 Spesifikasi naratif Use Case latihan unit 1 sampai unit 5

Nama Use Case

Latihan Unit 1 sampai unit 5

Aktor


Deskripsi

Pengguna dapat menguji kemampuan dengan mengerjakan soal latihan dari unit 1 sampai unit 5.

Skenario

1. Pengguna masuk ke halaman latihan 2. Sistem masuk ke menu latihan 3. Pengguna menjawab soal 4. Sistem mengecek jawaban dan mengeluarkan hasil

Kondisi awal Kondisi akhir

1. Pengguna menerima halaman latihan 1. Pengguna mengisi jawaban pada soal latihan

Tabel 3.3 Spesifikasi naratif Use Case Ujian Akhir

Nama Use Case

Ujian Akhir

Aktor


Deskripsi

Pengguna dapat menguji kemampuan dengan mengerjakan soal gabungan ujian semester satu dan dua.

Skenario

1. Pengguna masuk ke halaman ujian akhir 2. Sistem masuk ke menu ujian akhir 3. Pengguna menjawab soal 4. Sistem mengecek jawaban dan mengeluarkan hasil

Kondisi awal

1. Pengguna menerima halaman ujian akhir

Kondisi akhir

1. Pengguna mengisi jawaban pada soal ujian akhir semester satu dan semester dua

46

3.4.4

Perancangan Activity Diagram

Diagram aktifitas menggambarkan berbagai aliran aktifitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana suatu aktifitas berakhir. Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Gambar 3.30 dan 3.31 adalah activity diagram dari aplikasi yang akan dibuat.

Gambar 3.30 Activity Diagram Materi dan Latihan

47

Gambar 3.31 Activity Diagram Ujian

48

Gambar 3.32 Activity Diagram Game

Pada Gambar 3.30 aktifitas dimulai ketika pengguna memilih menu kelas

IX, kemudian sistem akan menampilkan halaman tersebut. Selanjutnya pengguna akan memilih 5 pokok materi yang ingin dipelajari. Kemudian sistem menampilkan halaman dari materi yang telah dipilih. Selanjutnya pengguna belajar Bahasa Inggris sesuai yang dipilih. Pada Gambar 3.31 dapat dijelaskan bahwa aktifitas dimulai ketika pengguna memilih menu ujian akhir. Selanjutnya sistem akan menampilkan halaman ujian akhir. Aktifitas berikutnya pengguna memilih mulai dan sistem akan menampilkan soal, lalu pengguna dapat menjawab sesuai jawaban yang dianggap benar. Setelah itu sistem akan mengecek jawaban, apabila jabawan benar maka akan memperoleh nilai +1 jika salah memperoleh niai 0. Lalu sistem akan mengecek banyak soal, apabila sudah menjawab 15 soal maka sistem akan menampilkan halaman nilai.

49

3.4.5

Perancangan Sequence Diagram

Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu. Gambar 3.33 dan 3.34 merupakan Sequence diagram dari aplikasi yang akan dibuat .

Gambar 3.33 Sequence Diagram Materi dan latihan

50

Gambar 3.34 Sequence Diagram Ujian Akhir

Gambar 3.35 Sequence Diagram Game

51

Pada Gambar 3.33 dan 3.34 menggambarkan skenario dan langkahlangkah yang dilakukan oleh pengguna dalam menjalankan aplikasi. Pada Gambar 3.33 pertama pengguna masuk ke halaman menu kelas IX, kemudian pengguna memilih menu materi sesuai materi yang ingin dipelajari, kemudian sistem akan menampilkan halaman yang dipilih. Gambar 3.34 terlihat pengguna memilih ujian akhir lalu menjawab soal-soal yang ada dan kemudian sistem mengecek jawaban serta menampilkan nilai yang diperoleh.

BAB III KONSEP DAN PERANCANGAN

Recommend Documents