Pemodelan Sistem - Perancangan Aplikas - ANALISIS DAN PERANCANGAN SISTEM

ANALISIS DAN PERANCANGAN SISTEM

3.2 Perancangan Aplikas

3.2.1 Pemodelan Sistem

Pada tahapan ini dibuat model pengembangan dari sketsa tampilan dan isi aplikasi. Fungsi dari diagram pohon adalah sebagai gambaran hierarki isi pada aplikasi. Adapun model pengembangan pada Perancangan Aplikasi Pngajaran Berbantuan Komputer untuk mata pelajaran seni budaya dan keterampilan, dapat dilihat pada Gambar 3.1

Gambar 3.1 Model Pengembangan Aplikasi Pengajaran SBK

Model pengembangan aplikasi pengajaran Seni Budaya dan Keterampilan (SBK) terdiri atas:

1. Materi, yang berisikan materi warna dan nada, dimana pada materi warna dibahas tentang warna dasar (primer) dan warna campuran (sekunder/tersier)

Model pengembangan aplikasi pengajaran SBK

Materi Simulasi Latihan

Nada

Warna Warna Nada

dasar campuran _Pemilihan

warna

Mewarnai

Memainkan musik

2. Simulasi, yang berisikan simulasi warna dan nada, dimana pada simulasi warna, user dapat memilih salah satu warna yang telah disediakan kemudian dapat mewarnai gambar yang telah disediakan. Pada simulasi nada, aplikasi ini menyediakan fitur sebuah alat musik, yaitu pianika agar user dapat memainkan contoh musik yang dilengkapi not balok dan angka yang telah disediakan.

3. Latihan, pada bagian ini, user dapat mengukur kemampuannya mengenai warna dan nada yang telah dipelajari sebelumnya, karena pada aplikasi ini disediakan soal-soal yang berhubungan dengan warna dan nada.

4. Profil, yang berisikan profil dari penulis penelitian ini.

3.2.2 Flowchart (Diagram Alir)

Flowchart (Bagan Alir Program) adalah suatu bagan yang menggambarkan arus logika dari data yang akan diproses dalam suatu program dari awal sampai akhir. Flowchart berguna bagi pemrogram (programmer) aplikasi untuk mempersiapkan program yang rumit. Simbol-simbol Flowchart dapat dilihat pada Tabel 3.1

Tabel 3.1 Simbol-simbol Flowchart

Simbol Nama Fungsi

Terminator (Terminal)

Menunjukkan awal dan akhir program

Preparation (Persiapan)

Memberikan nilai awal pada suatu variabel atau counter Garis Alir Menunjukkan arah aliran

program

Proses Proses perhitungan dan proses pengolahan data Keputusan Operasi perbandingan logika

Input/Ouput Data

Proses input output data, parameter dan informasi Proses

Terdefinisi

Proses yang detilnya

dijelaskan terpisah, misalnya dalam bentuk subroutine.

Penghubung

Penghubung bagian-bagian

Flowchart yang berada pada

satu halaman. Penghubung

Halaman

Penghubung bagian-bagian

Flowchart yang berada pada

halaman berbeda. Struktur Case Memproses sebuah blok

statemen pada salah satu kondisi case yang terpenuhi.

Pada Gambar 3.2 ditampilkan Flowchart untuk Aplikasi pengajaran berbantuan komputer untuk mata pelajaran seni budaya dan keterampilan.

start Layar halaman utama Pilih tombol materi Pilih Tombol simulasi? Pilih tombol latihan? Pilih tombol profil? Pilih tombol keluar? Pilih tombol warna Layar materi Pilih tombol nada Layar materi nada Layar materi warna Pilih tombol warna Layar simulasi Pilih tombol nada Layar simulasi nada

Latihan() Coba lagi?

Layar profil End kembali? Kembali? Kembali? ya ya ya ya ya ya ya ya ya ya tidak tidak tidak tidak tidak tidak tidak tidak tidak ya tidak tidak ya tidak tidak ya simulasi warna() Keluar Aplikasi

Gambar 3.2 Flowchart Aplikasi Pengajaran SBK

Flowchart tersebut menjelaskan pada saat aplikasi dijalankan akan masuk masuk pada layar halaman utama. Pada halaman utama, apabila user memilih tombol materi, maka akan masuk ke layar materi. Pada layar materi, apabila user ingin memilih tombol nada, maka akan masuk ke layar materi nada, namun apabila user tidak ingin memilih tombol nada dan user ingin memilih tombol warna, maka akan masuk ke layar materi warna. Jika user tidak ingin memilih kedua tombol tersebut, maka user dapat kembali ke halaman utama atau tetap pada layar materi. Pada halaman utama, apabila user tidak ingin memilih tombol materi, maka apakah user ingin memilih tombol simulasi? jika ya maka user akan masuk ke layar simulasi. Pada

layar simulasi, apabila user ingin memilih tombol nada, maka akan masuk ke layar simulasi nada, namun apabila user tidak ingin memilih tombol nada dan user ingin memilih tombol warna, maka akan masuk ke layar simulasi warna. Jika user tidak ingin memilih kedua tombol tersebut, maka user dapat kembali ke halaman utama atau tetap pada layar simulasi. Pada halaman utama, apabila user tidak ingin memilih tombol materi ataupun tombol simulasi, maka apakah user ingin memilih tombol latihan? jika ya maka user akan masuk ke layar latihan. Pada layar latihan ini, user dapat menjawab pertanyaan-pertanyaan yg disediakan, yg akan dijelaskan pada flowchart selanjutnya. Setelah user menyelesaikan latihan, apakah user ingin mencoba latihan lagi? Jika ya, maka akan kembali ke layar latihan, jika tidak maka akan kembali ke halaman utama. Pada halaman utama, apabila user tidak ingin memilih tombol materi, simulasi ataupun tombol latihan, maka apakah user ingin memilih tombol profil? Jika ya, maka akan masuk ke layar profil penulis. Pada layar ini, apakah user ingin kembali ke halaman utama? jika ya, maka akan kembali ke halaman utama, jika tidak maka akan tetap pada layar profil. Pada halaman utama, apabila user tidak ingin memilih tombol materi, simulasi, latihan ataupun tombol profil, maka apakah user ingin memilih tombol keluar? Jika ya, maka keluar aplikasi, jika tidak maka tetap pada halaman utama.

Pada prosedur simulasi warna akan didefinisikan pada Gambar 3.3 Start Warna, pil_warna Pil_warna = warna? mewarnai end ya tidak Pemilihan warna Pilih warna? ya tidak Hasil gambar

Gambar 3.3 Flowchart pada Simulasi Warna

Keterangan:

warna : Variabel untuk menyatakan warna yang disediakan

pil_warna : Variabel untuk menyatakan pilihan warna yang telah dipilih hasil gambar : Variabel untuk menyatakan hasil gambar yang telah diwarnai

Flowchart tersebut menjelaskan prosedur untuk simulasi warna. Pada saat masuk ke layar simulasi warna, maka akan didefinisikan variabel warna dan pilihan warna. Pada halaman tersebut, apakah user ingin memilih warna? Jika ya, maka akan dilakukan pemilihan warna, jika tidak maka terlihat hasil gambar yang telah ada. Setelah melakukan pemilihan warna, apakah warna yang dipilih telah sesuai dengan warna yang disediakan? Jika ya maka user dapat mewarnai, jika tidak lakukan pemilihan lagi. Setelah mewarnai, maka akan terlihat hasil gambar tersebut.

Pada prosedur latihan akan didefinisikan pada Gambar 3.4

Start

Soal, Pilihan Nilai

soal= 1

End

Soal [ ] = Random Soal ( )

Pilihan = Jawab Pilihan = True? Nilai = Nilai + 10 Soal = Soal + i soal ≤ 10? ya tidak ya tidak Keluar Aplikasi

Gambar 3.4 Flowchart pada Menu Latihan

Keterangan:

Soal : Variabel untuk menyatakan soal

Pilihan : Variabel untuk menyatakan pilihan jawaban pengguna Nilai : Variabel untuk menyatakan skor yang diperoleh pengguna

Flowchart tersebut menjelaskan prosedur untuk latihan. Pada saat masuk ke layar latihan, maka akan didefinisikan variabel soal, pilihan dan nilai. Kemudian variabel soal diisi dengan 1. Pada halaman tersebut, akan diperiksa apakah jumlah soal lebih kecil sama dengan 10? Jika ya maka soal akan diacak, yang akan dijelaskan pada flowchart selanjutnya. Setelah melakukan pengacakan maka user dapat memilih salah satu jawaban yang disediakan. Apabila jawaban yang dipilih benar, maka variabel nilai akan ditambahkan 10 dan kemudian variabel soal akan ditambah 1, jika jawaban salah, maka variabel soal akan langsung ditambah 1 tanpa menambahkan variabel nilai. Kemudian kembali dilakukan pengecekan terhadap variabel soal. Proses tersebut akan terus berlanjut hingga variabel soal lebih besar dari 10.

start I, bank_soal[], sudah[], belum, item, hasil[], belum i=0 i<10? Belum=0 i=i+1 Belum=0? Item=random(jumlah) Sudah[item]=0? Belum=1 Sudah[item]=1 Hasil[i]=bank_soal [item]+1 end tidak tidak ya tidak ya ya Prosedur Berakhir

Gambar 3.5 Flowchart Random Soal

Keterangan:

bank_soal[] : Variabel untuk menyatakan banyak soal yang tersedia.

sudah[] : Variabel untuk menandakan soal yang telah dipilih, diinisialisasikan dengan angka 0 dan 1.

hasil[] : Variabel untuk menyatakan soal yang dipilih

i : Integer

Flowchart tersebut menjelaskan prosedur untuk random soal yang disediakan. Pada saat masuk ke prosedur random, maka akan didefinisikan variabel bank_soal[], sudah[] dan hasil[] yang berbentuk array, dan variabel i dan belum yang berbentuk integer. Kemudian akan dilakukan pengecekan apakah i lebih kecil dari 10? Jika tidak maka prosedur berakhir, jika iya maka variabel belum akan diisi dengan 0. Kemudian akan dilakukan lagi pengecekan apakah belum = 0? Jika tidak maka nilai i akan ditambah 1 dan kembali melakukan pengecekan apakah i lebih kecil dari 10. Namun jika belum = 0 maka variabel item adalah hasil random dari jumlah soal yang disediakan. Kemudian akan dilakukan pengecekan apakah nilai array sudah[item] = 0? Jika iya maka akan kembali melakukan pengecekan apakah i lebih kecil dari 10. Namun jika nilai suda h[item] = 0, maka variabel belum dan sudah[item] diisi dengan nilai 1 dan hasil[i] diisi dengan bank_soal[item]+1. Kemudian kembali lagi dilakukan pengecekan apakah belum = 0. Proses ini akan terus berulang hingga nilai i lebih besar atau sama dengan 10.

3.2.3 Storyboard

Storyboard merupakan uraian yang berisi visual dan audio penjelasan dari masing- masing alur dalam flowchart. Satu kolom dalam storyboard mewakili satu tampilan di layar monitor.

Tabel 3.2 Storyboard Aplikasi Pengajaran Berbantuan Komputer Untuk Mata Pelajaran SBK

No Nama Layar

Aktifitas (Proses) Sound

effect 1. Halaman

Utama

• Teks berwarna biru berada di tengah bagian atas stage dengan bacaan

“selamat dating….

Mari kita belajar warna dan nada”

• Tombol menu materi: berupa teks berwarna putih

Musik latar terdengar apabila dijalankan

dengan background bertekstur kayu berwarna cokelat. Klik tombol materi untuk melihat isi materi.

• Tombol menu simulasi: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol materi untuk melihat isi materi.

• Tombol menu latihan: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol latihan untuk melihat isi latihan.

• Tombol menu materi: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol profil untuk melihat isi profil.

• Pilihan musik: berupa empat buah tombol dengan warna yang berbeda untuk memainkan musik sesuai dengan yang judul lagu yang tertulis dan disertai dengan satu buah tombol stop untuk menghentikan lagu yang dimainkan

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi:

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri.

2. Halaman materi

• Teks berwarna merah berada di tengah bagian atas stage dengan bacaan

“ayo pilih materinya”

• Tombol warna: berupa teks berwarna hijau dengan gambar 5 cipratan cat dengan warna yang berbeda. Apabila kursor diarahkan ke atas tombol maka akan ada animasi cipratan cat. Klik untuk masuk ke halaman isi materi warna.

• Tombol nada: berupa teks berwarna biru dengan gambar gitar dan 3 buah not balok. Apabila kursor diarahkan ke atas tombol nada maka akan ada animasi not balok tersebut bergerak-gerak. Klik untuk masuk ke halaman isi materi nada.

• Tombol tutup: berupa gambar silang (X) dengan background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama.

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan.

•Musik latar terdengar apabila dijalankan • Suara burung saat masuk halaman materi

• Kupu-kupu bergerak dari arah kanan menuju ke kiri • Burung terbang dari arah kiri bawah menuju ke

kanan atas, bergerak seolah-olah menarik kertas yang menjadi background halaman materi. Animasi ini muncul saat awal masuk ke halaman materi. 3. Halaman

isi materi warna

• Tombol navigasi berbentuk panah berwarna hijau ke arah kiri. Klik untuk kembali ke halaman materi.

• Tombol tutup: berupa gambar silang (X) dengan background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama.

• Tombol navigasi berbentuk panah berwarna hitam berlatar belakang lingkaran berwarna hijau ke arah kanan. Klik untuk kembali ke halaman materi selanjutnya.

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri

Musik latar terdengar apabila dijalankan

4. Halaman isi materi nada

• Tombol navigasi berbentuk panah berwarna hijau ke arah kiri. Klik untuk kembali ke halaman materi.

• Tombol tutup: berupa gambar silang (X) dengan background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama.

• Tombol navigasi berbentuk panah berwarna hitam berlatar belakang lingkaran berwarna hijau ke arah kanan. Klik untuk kembali ke halaman materi selanjutnya.

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri 5. Halaman

simulasi

• Teks berwarna merah berada di tengah bagian atas stage dengan bacaan

“ayo pilih simulasinya”

• Tombol warna: berupa teks berwarna hijau dengan

•Musik latar terdengar apabila dijalankan

kuas, cat dan tempatnya. Apabila kursor diarahkan ke atas tombol maka akan ada animasi sebuah kuas yang bergerak seolah-olah melukis.

• Tombol nada: berupa teks berwarna biru dengan gambar pianika dan 3 buah not balok. Apabila kursor diarahkan ke atas tombol nada maka akan ada animasi not balok tersebut bergerak-gerak.

• Tombol tutup: berupa gambar silang (X) dengan background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri • Pesawat terbang dari arah kiri menuju ke kanan

bergerak seolah-olah menarik kertas yang menjadi background halaman simulasi. Animasi ini muncul saat awal masuk ke halaman simulasi.

•Suara pesawat terbang saat masuk halaman simulasi

6. Halaman simulasi warna

• Tombol dengan gambar cipratan cat dengan 8 warna yang berbeda yang berlatar tekstur kayu berwarna coklat. Klik salah satu gambar cipratan cat tersebut untuk memilih warna yang diinginkan.

• Gambar kartun berwana hitam putih merupakan target yang akan diwarnai

• Tombol tutup: berupa gambar silang (X) dengan background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri

Musik latar terdengar apabila dijalankan 7. Halaman simulasi nada

• Gambar alat sebuah alat musik, yaitu pianika. Klik tiap tuts pianika tersebut untuk mendengarkan nadanya

• Gambar contoh lagu yang dilengkapi dengan not balok.

Musik latar terdengar apabila dijalankan

• Tombol navigasi berwarna bitu berbentuk panah ke arah kiri dan kanan. Klik untuk memilih contoh lagu sebelumnya dan selanjutnya.

• Tombol tutup: berupa gambar silang (X) dengan background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri 8. Halaman

latihan

• Teks berwarna biru dengan bacaan “masukkan nama anda”

• Kotak isi teks: kotak yang harus diisi dengan sebuah nama untuk memulai latihan

• Tombol OK: tombol dengan tulisan OK berwarna biru. Klik untuk memulai latihan

• Tombol tutup: berupa gambar silang (X) dengan

• Musik latar terdengar apabila dijalankan • Suara katrol saat masuk

background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri • Orang berjalan dari kanan kemudian menarik tali

yang dikaitkan ke sebuah katrol dan seolah-olah menarik kertas yang menjadi background halaman latihan. Animasi ini muncul saat awal masuk ke halaman latihan.

halaman materi

9. Halaman latihan(1)

• Pertanyaan: teks berwarna hitam dengan model soal random. soal yang disajikan hanya 10 soal.

• Tombol pilihan A: tombol berwarna biru dengan Teks berwarna putih huruf A. Klik apabila menurut Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.

Musik latar terdengar apabila dijalankan

• Tombol pilihan B: tombol berwarna biru dengan Teks berwarna putih huruf B. Klik apabila menurut Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.

• Tombol pilihan C: tombol berwarna biru dengan Teks berwarna putih huruf C. Klik apabila menurut Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri 10. Halaman

latihan(2)

• Teks berwarna biru dengan bacaan “jumlah soal benar” dan diikuti angka di sebelahnya yang menunjukkan jumlah soal yang benar.

• Teks berwarna biru dengan bacaan “jumlah soal salah” dan diikuti angka di sebelahnya yang menunjukkan jumlah soal yang salah.

Musik latar terdengar apabila dijalankan

• Teks berwarna hijau dengan bacaan “nilai” dan diikuti angka di sebelahnya yang menunjukkan nilai yang diperoleh.

• Teks berwarna merah yang berisi pesan yang sesuai dengan hasil yang telah diperoleh.

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

• Burung terbang dari arah kiri menuju ke kanan. • Kupu-kupu bergerak dari arah kanan menuju ke kiri 11. Halaman

profil

• Teks berwarna merah dengan bacaan “data diri” • Teks berwarna biru dengan bacaan

NAMA : DENIS AFRIAWANTO ALAMAT : JALAN MERAK NO 21 E SEI SKAMBING B T.T.L : LANGSA, 15 JUNI 1988 No. HP : 085275296423 EMAIL : •Musik latar terdengar apabila dijalankan •Suara monyet saat masuk

• Teks berwarna hitam dengan bacaan created by: denis afriawanto

S1-Ilmu Komputer USU

• Tombol tutup: berupa gambar silang (X) dengan background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama.

• Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.

Animasi

Dalam dokumen Perancangan Aplikasi Pengajaran Berbantuan Komputer Untuk Mata Pelajaran Seni Budaya Dan Keterampilan (Halaman 40-61)