BAB III ANALISA DAN PERANCANGAN

(1)

BAB III

ANALISA DAN PERANCANGAN

3.1. Analisa Kondisi Yang Ada

Berdasarkan latar belakang masalah dan perumusan masalah yang dapat diketahui pada bab sebelumnya untuk merancang suatu sistem aplikasi yang baik diperlukan beberapa persiapan seperti menentukan kebutuhan dari aplikasi yang akan dibuat agar sistem dapat beroperasi sesuai dengan keinginan. Dan kebutuhan awal adalah membuat perancangan aplikasi kunci dasar gitar secara interaktif dan komunikatif.

Saat ini memang banyak sekali buku-buku untuk mempelajari kunci-kunci dasar gitar secara jelas pada umumnya. Akan tetapi, pada tingkatan pemula yang masih awam dalam mengetahui kunci-kunci dasar gitar sehingga tidak memberikan suasana pembelajaran yang interaktif dan komunikatif dalam menyampaikan materi kunci-kunci dasar gitar yang cukup rumit tersebut.

Pada penyampaian materi yang kurang interaktif yang dilakukan oleh guru atau pembimbing dapat mempengaruhi tingkat pemahaman seseorang, juga penyampaian materi yang kurang komunikatif dan menarik pun dapat menimbulkan rasa jenuh bagi para pemula dalam mempelajari kunci-kunci dasar gitar tersebut. Dan dalam hal ini, masih sedikit pembimbing yang mampu memberi penjelasan yang menarik bagi anak-anak.

Adapun yang penulis perhatikan pada aplikasi kunci-kunci dasar gitar sebelumnya adalah :

1. Tampilan yang kurang interaktif.

2. Tidak adanya pemberian contoh suara kunci gitar apa yang di petik untuk tersebut.

3. Tidak adanya contoh latihan atau evaluasi hasil pembelajaran yang dapat menguji pemahaman siswa terhadap materi yang sudah diberikan.

(2)

3.2. Rancangan Aplikasi Kunci-kunci Dasar Gitar Multimedia

Dalam merancang aplikasi kunci-kunci dasar gitar multimedia ini, penulis menggunakan tool Macromedia Flash CS4, dan sebelum membangun aplikasi kunci-kunci dasar gitar multimedia ini penulis mempersiapkan data multimedia yang berupa teks, gambar dan audio. Berikut ini merupakan tahapan dalam mempersiapkan data multimedia :

1. Teks dan Gambar

Penulis mempersiapkan data multimedia dalam bentuk teks dan gambar untuk mendukung aplikasi yang akan dibuat. Untuk mengolah itu semua penulis menggunakan tool Adobe Photoshop CS4 dan menyimpannya dalam bentuk format JPEG.

2. Audio

Penulis juga mempersiapkan data multimedia dalm bentuk audio untuk mendukung aplikasi yang akan dibuat. Untuk membuat format audio penulis melakukan perekaman dengan menggunakan kamera digital yang dapat merekam suara, pengisian suara dilakukan oleh seorang gitari yang udah handal dalam memainkan senar-senar gitar. Untuk mendapatkan hasil rekaman suara yang baik, penulis melakukan editing dengan menggunakan tool Adobe Audition 1.5 dan menyimpan data audio dalam bentuk MP3.

3.3. Rancangan Sistem yang diusulkan (Pemodelan)

Penulis menggunakan UML dalam merancang aplikasi tajwid multimedia. Penggunaan UML dipilih karena bahasa pemrograman berbasis objek. Adapun langkah-langkah yang dilakukan dalam merancang sistem menggunakan UML adalah :

1. Membuat use case diagram. 2. Membuat activity diagram. 3. Membuat sequence diagram.

(3)

4. Membuat class diagram

3.3.1. Use Case Diagram Aplikasi Kunci Dasar Gitar Multimedia.

1. Use Case Diagram Aplikasi Kunci Dasar Gitar Multimedia

Gambar 3.1. Usecase Diagram Aplikasi Kunci Dasar Gitar Multimedia

2. Use Case Spesification

Setiap use case harus dideskripsikan dalam dokumen untuk

mendefinisikan apa yang harus dilakukan sistem ketika actor mengaktifkan use case.Fungsionalitas sistem yang telah digambarkan dengan use case diagram pada Gambar 3.1. akan dijelaskan secara lebih jelas pada bagian use case specification sebagai berikut:

(4)

Tabel 3.1. Actor Dalam Aplikasi Kunci Dasar Gitar Multimedia

Nama Deskripsi Tanggung jawab

User -Melihat pembelajaran kunci dasar gitar serta mengetahui suara petikan senar dari contoh yang diberikan

-Melihat serta mengevaluasi hasil pembelajaran dengan diberikan latihan

-Melihat contoh video kunci gitar

Mempelajari dan memahami kunci minor dan major

Tabel 3.2. Use Case Masuk Aplikasi Kunci Dasar Gitar Multimedia Nama Masuk aplikasi kunci dasar gitar multimedia

Actor User

Description Sistem akan merespon user (pengguna ) yang ingin mengakses aplikasi kunci dasar gitar. User

Tabel 3.3. Use Case Melihat Pendahuluan Nama Pendahuluan

Actor User

Description User akan melihat tampilan awal dari aplikasi kunci dasar gitar multimedia dan akan diperkenalkan dengan tujuan pembelajaran dan membedakan kunci-kunci minor dan major

Tabel 3.4. Use Case Pembelajaran Kunci Dasar Gitar Nama Pembelajaran kunci dasar gitar

Actor User

(5)

Tabel 3.4. Use Case Melihat Contoh Video Kunci Dasar Gitar Nama Melihat video kunci dasar gitar

Actor User

Description User akan melihat contoh video kunci-kunci dasar gitar

Tabel 3.5. Use Case Latihan Soal-Soal Evaluasi Nama Latihan

Actor User

Description User akan mendapatkan latihanyang sudah di siapkan

3.3.2. Activity Diagram Aplikasi Kunci Dasar Gitar Multimedia

1. Activity Diagram melihat pendahuluan

(6)

2. Activity Diagram pembelajaran kunci dasar gitar

Gambar 3.3. Activity Diagram Pilih Menu Materi 3. Activity Diagram melihat contoh video kunci dasar gitar

(7)

4. Activity Diagram latihan soal-soal evaluasi

(8)

4.3.3. Sequence Diagram Aplikasi Kunci Dasar Gitar Multimedia

Gambar 3.6. Sequence Diagram Aplikasi kunci Dasar Gitar

Sequence pada gambar 3.6 menunjukkan proses untuk melihat materi pembelajaran dasar-dasar kunci gitar, yang dilakukan oleh user. Pertama user masuk aplikasi. Sistem akan menampilkan menu yang dimaksud, user dapat melihat pendahuluan, kemudian dapat memilih materi yang akan dipelajari.

(9)

Tabel 3.7. Penjelasan Sequence Diagram Aplikasi Kunci Dasar Gitar Sequence

name:

Aplikasi Kunci Dasar Gitar Multimedia

Actor: User

Basic flow Actor Action System Action

Step 1 Masuk aplikasi kunci Dasar Gitar

Step 2 Melihat Pendahuluan.

Step 4 Memilih materi yang ingin dipelajari

Step 6 User dapat pendahuluan dan materi pembelajaran pada interface.

Step 3 Menampilkan Pendahuluan yang berisi pengertian, dan sejarah tentang gitar

Step 5 Menampilkan Materi yang dipilh oleh user

(10)

2. Sequence Diagram Bagian-bagian Gitar

Gambar 3.7. Sequence Diagram Bagian-bagian Gitar

Sequence pada gambar 3.7 menunjukkan proses untuk melihat atau mengetahui bagian-bagian pada gitar yang dilakukan oleh user. Pertama user memilih bagian-bagian gitar. Sistem akan menampilkan menu yang dimaksud, user dapat melihat nama dan pengertian dari bagian-bagian yang ada pada gitar

(11)

Tabel 3.8. Penjelasan Sequence Diagram Bagian Gitar

Sequence name:

Bagian-bagian Gitar

Actor: User

Step 1 Pilih Bagian Gitar

Step 3 Memilih salah satu dari bagian gitar yang ingin

diketahui

Step 5 User dapat melihat penjelasan tentang salah satu bagian gitar yang kita inginkan.

Step 2 Menampilkan Bagian gitar.

Step 4 Menampilkan salah satu bagian gitar.

(12)

3. Sequence Diagram Kunci Dasar

Gambar 3.8. Sequence Diagram kunci Dasar

Sequence pada gambar 3.8 menunjukkan proses untuk melihat kunci dasar gitar yang dilakukan oleh user. Pertama user memilih kunci dasar gitar. Sistem akan menampilkan menu yang dimaksud, user dapat melihat kunci dasar A,E,C,F,G,D,B

(13)

Tabel 3.9. Penjelasan Sequence Diagram Kunci Dasar Gitar

Kunci-Kunci Dasar Gitar

Actor: User

Step 1 Melihat semua kunci dasar pada gitar.

Step 3 Memilih salah satu kunci dasar gitar

Step 5 User dapat melihat penjelasan dan mendengar nada suara kunci dasar yang sudah kita pilih.

Step 2 Menampilkan semua kunci dasar gitar. Step 4 Menampilkan kunci dasar gitar yang kita pilih.

(14)

4. Sequence Diagram Kunci Minor

Gambar 3.9. Sequence Diagram Kunci Minor

Sequence pada gambar 3.9 menunjukkan proses untuk melihat kunci minor yang dilakukan oleh user. Pertama user memilih kunci minor. Sistem akan menampilkan menu yang dimaksud, user dapat melihat kunci A minor, E minor, D minor, G minor, C minor, F minor dan B minor.

(15)

Tabel 3.10. Penjelasan Sequence Diagram Kunci Minor

Kunci Minor

Actor: User

Step 1 Melihat semua kunci minor.

Step 3 Memilih salah satu kunci minor.

Step 5 User dapat melihat penjelasan dan mendengar nada suara dari kunci minor yang sudah di pilih user.

Step 2 Menampilkan semua kunci minor.

Step 4 Menampilkan kunci minor yang sudah di pilih.

(16)

5. Sequence Diagram Setem Senar

Gambar 3.10. Sequence Diagram Setem Senar

Sequence pada gambar 3.10 menunjukkan proses untuk menyetem senar yang dilakukan oleh user. Pertama user memilih setem senar. Sistem akan menampilkan menu yang dimaksud.

(17)

Tabel 3.11. Penjelasan Sequence Diagram Setem Senar Sequence

name:

Setem Senar

Actor: User

Step 1 Pilih setem senar.

Step 3 Memilih senar berapa yang ingin kita setem.

Step 5 User dapat mendengar nada suara senar yang sebelum dan sesudah d setem

Step 2 Menampilkan semua senar gitar yang ingin di setem

Step 4 Menampilkan senar yang sudah user pilih

6. Sequence Diagram Video

(18)

Tabel 3.11. Penjelasan Sequence Diagram Video Sequence

name:

Video

Actor: User

Step 1 Pilih Video.

Step 3 Memilih Video

Step 5 User dapat melihat video

Step 2 Menampilkan Video Step 4 Menampilkan Video yang sudah user pilih

7. Sequence Diagram Latihan Soal-Soal Evaluasi

(19)

Sequence pada gambar 3.12 menunjukkan proses untuk melihat latihan evaluasi yang dilakukan oleh user. Pertama user memilih latihan evaluasi. Sistem akan menampilkan menu yang dimaksud, user dapat mengerjakan soal-soal evaluasi.

Tabel 3.13. Penjelasan Sequence Diagram Latihan Soal-soal Evaluasi Sequence

name:

Latihan soal-soal evaluasi

Actor: User

Step 1 Pilih latihan evaluasi.

Step 3 Mengerjakan latihan evaluasi

Step 2 Menampilkan evaluasi

(20)

Tabel 3.14. Tabel Storyboard 1. Home.

Arahan Program

- Tampilan pertama terdapat sejarah gitar.

- Terdapat tombol/botton diatas dan dibawah buku digital yang dibuat,yaitu:

a. “Bab 1” maka frame akan berubah menjadi halaman yang berisi materi bab 1.

b. “Bab 2” maka frame akan berubah menjadi halaman yang berisi materi bab 2.

c. “Bab 3” maka frame akan berubah menjadi halaman yang berisi materi bab 3.

d. “Bab 4” maka frame akan berubah menjadi halaman yang berisi materi bab 4.

e. “Evaluasi” maka frame akan berubah menjadi halaman yang berisi materi evaluasi.

f. “GO” maka halaman akan berubah sesuai dengan halaman yang dituju.

g. “Previous dan Next” maka halaman akan kembali atau lanjut ke halaman selanjutnya.

Teks -

Audio Hanya menggunakan musik ring.

Isi Materi

- Bagian-bagian Gitar - Pengenalan Kunci Dasar - Pengenalan kunci Minor - Menyetem Senar

Previous -

(21)

2. Bagian-bagian Gitar.

Arahan program Tampilan yang muncul akan menampilkan gambar sebuah gitar dan nama-nama bagiannya beserta fungsinya.

Teks Bagian-bagian adalah susunan atau satu kesatuan yang saling berhubungan dan membuat terbentuknya sebuah gitar.

Audio -

Isi Materi

Previous Dapat kembali ke halaman sebelumnya. Next Dapat lanjut ke halaman berikutnya.

3. Pengenalan Kunci Dasar.

Arahan Program Tampilan yang muncul akan menampilkan kunci dasar gitar yang jika di klik akan berubah sesuai dengan yang diinginkan.

Teks Kunci dasar adalah nada yang terdapat pada alat musik gitar, nada dassar yang terdapat di alat musik gitar adalah A,E,F,G,C,D,B.

Isi Materi

Previous Dapat kembali ke halaman sebelumnya. Next Dapat lanjut ke halaman berikutnya.

(22)

4. Pengenalan Kunci Minor.

Arahan Program Tampilan yang muncul akan menampilkan kunci-kunci minor pada gitar.

Teks Kunci minorjuga termasuk nada yang terdapat pada alat musik gitar, nada dassar yang terdapat di alat musik gitar adalah Am,Em,Fm,Gm,Cm,Dm,Bm.

Isi Materi

- Kunci Dasar

- Pengenalan Bagian-bagian Gitar - Pengenalan kunci Minor

- Menyetem Senar

Previous Dapat kembali ke halaman sebelumnya. Next Dapat lanjut ke halaman berikutnya

5. Menyetem Senar.

Arahan Program Tampilan yang muncul akan menampilkan video untuk menyetam gitar.

Teks Setem senar dilakukan agar suara atau irama yang dikeluarkan oleh gesekan senar pada gitar tidak fals. Audio Mengeluarkan suara setem senar.

Isi Materi

- Kunci Dasar

- Menyetem Senar

Previous -

(23)

6. Evaluasi.

Arahan Program Tampilan yang muncul adalah soal-soal atau pertanyaan seputar dari bab 1 sampai bab 4.

Teks

Evaluasi berguna untuk mengetahui tingkat pengetahuan selama pembelajaran. Kita dapat mengetahui sudah seberapa jauh pengetahuan tentang gitar.

Isi Materi - Kunci Dasar

- Menyetem Senar

Prevous -

Next -

7. Tombol “GO”.

Arahan program Tampilan yang akan muncul tergantung oleh keinginan user.

Teks

Tombol ini berguna untuk melompat ke halaman selanjutnya,tidak harus berurutan. Sesuai dengan angka yang dimasukan kedalam kolom tombol tersebut.

audio -

Isi Materi

- Kunci Dasar

- Menyetem Senar

Previos -

(24)

8. Tombol Previous Dan Next.

Arahan Program Tampilan yang muncul dapat kembali atau lanjut ke halaman berikutnya sesuai tombol yang di klik.

Teks Tombol ini berguna unuk lanjut atau kembali ke halaman yang diinginkan.

Audio -

Isi Materi - Kunci Dasar

- Menyetem Senar

Previous -

Next -

a. Rancangan Layar User Interface

Setelah melakukan analisa terhadap kebutuhan yang ada. Penulis akan memulai untuk merancang aplikasi multimedia yang akan dibangun.

Secara umum penulis akan merancang aplikasi ini dengan harapan sebagai berikut :

1. Aplikasi dirancang dengan tampilan yang menarik agar dapat menambah daya tarik masyarakat umum khususnya tang awam dalam bermain gitar dan ingin mempelajarinya.

2. Memberikan contoh nada suara petikan senar agar mengetahui kunci apa yang sedang di bunyikan.

3. Merancang aplikasi yang memiliki menu user friendly sehingga mudah dipelajari .

Aplikasi dirancang memiliki sebuah jendela “Menu Aplikasi Utama”, memiliki simbol-simbol yang menampilkan jendela baru untuk memulai mempelajari kunci dasar pada gitar, latihan soal-soal evaluasi, serta info untuk mengetahui kegunaan simbol-simbol yang ada pada aplikasi.

(25)

1. Rancangan Layar Pendahuluan

Gambar 3.24. Rancangan Layar Pendahuluan Sejarah Gitar

Gambar penemu gitar Daftar isi

(26)

2. Rancangan Layar Menu Utama

Gambar 3.25. Rancangan Layar Menu Utama Isi Pilihan

Bagian Gitar Kunci Dasar _{Kunci minor} _{Setem Senar}

(27)

3. Rancangan Layar Bagian Gitar

Gambar 3.26. Rancangan Layar Bagian Gitar Bagian Gitar

Gambar bagian Gitar

(28)

4. Rancangan Layar Kunci Dasar

Gambar 3.27. Rancangan Layar Kunci Dasar Kunci Dasar C A Evaluasi Home G E D B F

(29)

5. Rancangan Layar Kunci Minor

Gambar 3.28. Rancangan Layar Kunci Minor Kunci Minor C Minor A Minor Evaluasi Home G Minor E Minor F Minor D Minor B Minor

(30)

6. Rancangan Layar Setem Senar

Gambar 3.29. Rancangan Layar Setem Senar Stem senar

Video steam gitar

(31)

7. Rancangan Layar Latihan Soal-Soal Evaluasi

Gambar 3.32. Rancangan Layar Latihan Soal-Soal Evaluasi

1. pendahuluan merupakan halaman awal untuk masuk ke aplikasi kunci dasar gitar multimedia. Halaman ini memperlihatkan pengertian dan sejarah gitar.

2. Menu utama merupakan inti dari aplikasi kunci dasar gitar multimedia, aplikasi ini berisi bagian gitar, kunci dasar, kunci minor, steam senaryang akan dipelajari.

3. Bagian gitar adalah bagian dari menu aplikasi kunci dasar gitar, bagian ini berisi materi nama bagian dan fungsi pada gitar.

4. Kunci Dasar berisikan kunci-kunci gitar sepert; A, E, D, G, C, F, B. Kunci-Kunci dasar Gitar

Soal-Soal A. ... B. ... C. ... D. ... Evaluasi Home Jawaban Anda...

(32)

5. Kunci Minor berisikan kunci-kunci gitar minor seperti; A minor, E minor, D minor, G minor, C minor, F minor, B minor.

6. Steam Senar berisikan video cara menyetem senar gitar.

7. Menu evaluasi berisi soal-soal evaluasi untuk menguji pemahaman siswa terhadap materi.