BAB III KONSEP DAN PERANCANGAN

Transkripsi

1 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

2 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. Leptop Pribadi 3.4 Perancangan Pada tahap ini dilakukan perancangan terhadap aplikasi yang akan dibuat berupa perancangan struktur navigasi, Storyboard, Use case diagram, Activity Diagram, dan Sequence Diagram.

3 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

4 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 Keluar Unit 1 Unit 2 Unit 4 Unit 5 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 awal Keterangan : Menampilkan pilihan menu yang diinginkan.

5 31 Judul Unit 1 Animasi awan Gambar Gunung Gambar 3.4 materi unit 1 Nama scene : Unit 1 Link : frame 37, 38, dan menu Keterangan : Halaman ini menampilkan pilihan materi unit 1 Judul Unit 1 Animasi awan Papan Gambar 3.5 isi materi unit 1 Nama Scene : Unit 1 Link : frame 37, 38, dan menu Keterangan : Menampilkan pilihan materi unit 1

6 32 Judul Unit 1 Animasi awan Papan Gambar 3.6 contoh materi unit 1 Nama Scene : Unit 1 Link : frame 37, 38, dan menu Keterangan : Menampilkan pilihan contoh materi unit 1 Gambar matahari Ke mba li Bukit dan Pohon Judul Unit 2 Animasi mobil Gambar 3.7 materi unit 2 Nama Scene : Unit 2 Link : frame 26, 27, dan menu Keterangan : Halaman ini menampilkan pilihan materi unit 2

7 33 Gambar matahari Ke mb ali Papan Judul Unit 2 Animasi mobil Gambar 3.8 isi materi unit 2 Nama Scene : Unit 2 Link : frame 26, 27, dan menu Keterangan : Menampilkan pilihan materi unit 2 Gambar matahari Ke mb ali Papan Judul Unit 2 Animasi mobil Gambar 3.9 contoh materi unit 2 Nama Scene : Unit 2 Link : frame 26, 27, dan menu Keterangan Menampilkan pilihan contoh materi unit 2

8 34 Animasi awan Judul Unit 3 Rumah dan Pagar Gambar 3.10 materi unit 3 Nama Scene : Unit 3 Link : frame 21, 22, dan menu Keterangan : Halaman ini menampilkan pilihan materi unit 3 Animasi awan Judul Unit 3 Papan Gambar 3.11 isi materi unit 3 Nama Scene : Unit 3 Link : frame 21, 22, dan menu Keterangan : Menampilkan pilihan materi unit 3

9 35 Animasi awan Judul Unit 3 Papan Gambar 3.12 contoh materi unit 3 Nama Scene : Unit 3 Link : frame 21, 22, dan menu Keterangan : Menampilkan pilihan contoh materi unit 3 Judul Unit 4 Pantai dan Animasi Ombak Gambar 3.13 materi unit 4 Nama Scene : Unit 4 Link : frame 33, 34, dan menu Keterangan : Halaman ini menampilkan pilihan materi unit 4

10 36 Judul Unit 4 Papan Gambar 3.14 isi materi unit 4 Nama Scene : Unit 4 Link : frame 33, 34, dan menu Keterangan : Menampilkan pilihan materi unit 4 Judul Unit 4 Papan Gambar 3.15 contoh materi unit 4 Nama Scene : Unit 4 Link : frame 33, 34, dan menu Keterangan : Menampilkan pilihan contoh materi unit 4

11 37 Judul Unit 5 Laut Animasi Mobil Truk Laut Gambar 3.16 materi unit 5 Nama Scene : Unit 5 Link : frame 21, 22, dan menu Keterangan : Halaman ini menampilkan pilihan materi unit 5 Judul Unit 5 Papan Gambar 3.17 isi materi unit 5 Nama Scene : Unit 5 Link : frame 21, 22, dan menu Keterangan : Menampilkan pilihan materi unit 5

12 38 Judul Unit 5 Papan Gambar 3.18 contoh materi unit 5 Nama Scene : Unit 5 Link : frame 21, 22, dan menu Keterangan : Menampilkan pilihan contoh materi unit 5 Unit 1 Unit 3 Unit 2 Unit 5 Unit 4 Gambar 3.19 halaman utama latihan - latihan Nama Scene : Menu Latihan Link : lat1, lat2, lat3, lat4, lat5, dan menu Keterangan : Menampilkan halaman latihan

13 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 Keterangan : Menampilkan soal latihan unit 2, di mana pengguna dapat memlihi jawaban yang dianggap benar

14 40 Soal a b c d Lanjut Gambar 3.22 latihan 3 Nama Scene : Latihan 3 Link : frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13 Keterangan : Menampilkan soal latihan unit 3, di mana pengguna dapat memlihi jawaban yang dianggap benar Soal a b c d Lanjut Gambar 3.23 latihan 4 Nama Scene : Latihan 4 Link : frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13 Keterangan : Menampilkan soal latihan unit 4, di mana pengguna dapat memlihi jawaban yang dianggap benar

15 41 Soal a b c d Lanjut Gambar 3.24 latihan 5 Nama Scene : Latihan 5 Link : frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13 Keterangan : Menampilkan soal latihan unit 5, di mana pengguna dapat memlihi jawaban yang dianggap benar 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

16 42 Soal a b c d Lanjut Gambar 3.26 ujian Nama Scene : Ujian Link : frame 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,16 Keterangan : Menampilkan soal ujian dari unit 1 sampai 5, di mana pengguna dapat memilih jawaban yang dianggap benar Kata Sambutan dan Nama Game Start Gambar 3.27 halaman utama game Nama Scene : Menu Game Link : TTS dan menu Keterangan : Menampilkan tombol start yang menuju kehalaman TTS

17 43 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 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>> <<extended>> Memilih Memilih contoh materi ujian Pengguna listening Game Gambar 3.29 Use Case Diagram Aplikasi Modul Pembelajaran Bahasa Inggris IX SMP

18 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 Tabel 3.1 Spesifikasi naratif Use Case 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

19 45 Tabel 3.2 Spesifikasi naratif Use Case latihan unit 1 sampai unit 5 Nama Use Case Latihan Unit 1 sampai unit 5 Aktor Siswa kelas IX (Pengguna) 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 1. Pengguna menerima halaman latihan Kondisi akhir 1. Pengguna mengisi jawaban pada soal latihan Tabel 3.3 Spesifikasi naratif Use Case Ujian Akhir Nama Use Case Aktor Deskripsi Skenario Kondisi awal Kondisi akhir Ujian Akhir Siswa kelas IX (Pengguna) Pengguna dapat menguji kemampuan dengan mengerjakan soal gabungan ujian semester satu dan dua. 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 1. Pengguna menerima halaman ujian akhir 1. Pengguna mengisi jawaban pada soal ujian akhir semester satu dan semester dua

20 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 dan Latihan

21 Gambar 3.31 Activity Diagram Ujian 47

22 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.

23 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 dan latihan

24 50 Gambar 3.34 Sequence Diagram Ujian Akhir Gambar 3.35 Sequence Diagram Game

25 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.