PERANCANGAN SISTEM
3.1 Data Flow Diagram
Pada tahap perancangan sistem ini akan dirancang suatu sistem dalam suatu bagan yang menunjukkan prosedur-prosedur dari sistem tersebut. Alat yang digunakan untuk merancang sistem ada bermacam-macam, diantaranya adalah DFD (Data Flow Diagram).
DFD adalah suatu diagram yang menggunakan notasi-notasi untuk menggambarkan arus dari data sistem, yang penggunaannya sangat membantu untuk memahami sistem secara logika, terstruktur dan jelas. DFD merupakan alat bantu dalam mengGambarkan atau menjelaskan sistem yang sedang berjalan logis.
DFD terdiri dari diagram konteks dan diagram rinci. Diagram konteks merupakan diagram yang menggambarkan hubungan antarsistem dengan entitas di luar sistem, merupakan sistem secara keseluruhan. Diagram rinci menggambarkan sistem sebagai jaringan kerja antara fungsi yang berhubungan satu dengan yang lain dengan aliran penyimpanan data, model ini hanya memodelkan sistem dari sudut pandang fungsi.
Pada perancangan aplikasi pengajaran berbantuan komputer pelajaran bahasa Inggr is materi Gerund, diagram konteksnya dapat dilihat pada Gambar 3.1 berikut ini.
Pilihan Menu
Hasil Pilihan
Gambar 3.1 Diagram Konteks
Diagram rinci dari aplikasi multimedia pembelajaran bahasa Inggris dengan materi Gerund terdiri dari dua level yaitu level 1 dan level 2. Diagram rinci level 1 dan level 2 untuk aplikasi multimedia pembelajaran bahasa Inggris dengan materi Gerund dapat dilihat pada Gambar 3.2 dan Gambar 3.3.
USER Aplikasi Multimedia Pembelajaran Bahasa Inggris Dengan Materi Gerund
P.2 Menu Home P.4 Menu Link P.5 Menu Materi P.7 Menu Evaluasi P.1 Menu Utama Pengguna Pilihan Menu Pilihan Menu Pilihan Menu Pilihan Menu Pilihan Menu Hasil Pilihan Hasil Pilihan Hasil Pilihan Hasil Pilihan Hasil Pilihan P.3 Menu Profil Pilihan Menu Hasil Pilihan P.6 Menu Latihan Hasil Pilihan
P.5 Menu Materi P.5.1 Menu Pengertian P.5.2 Menu Penggunaan P.5.3 MenuJenis Gerund P.5.4 Menu Perbandingan Pengguna Pilihan Menu Pilihan Menu Pilihan Menu Pilihan Menu Pilihan Menu Pengertian Gerund Penggunaan Gerund Jenis Gerund Perbandingan Gerund
Gambar 3.3 Diagram Level 2 untuk Menu Materi
DFD memiliki beberapa fungsi dalam mengembangkan suatu sistem, di antaranya adalah:
1. DFD membantu para analis sistem meringkas informasi tentang sistem, mengetahui hubungan antar subsistem, membantu perkembangan aplikasi secara efektif.
2. DFD berfungsi sebagai alat komunikasi yang baik antara pemakai dan analis sistem.
3.2Flowchart
Flowchart adalah gambaran dalam bentuk diagram alir dari algoritma dalam suatu program yang menyatakan arah alur program dalam menyelesaikan suatu masalah. Flowchart dari program aplikasi multimedia pembelajaran bahasa Inggris dengan materi Gerund dapat dilihat pada Gambar 3.4.
Start Menu Utama Home Profil Link Materi Latihan Evaluasi Exit Case
Home Profil Materi Latihan Evaluasi
Home Profil Pengertian Penggunaan Jenis Gerund Perbandingan Soal-soal Latihan Stop Case
Pengertian Penggunaan Jenis Gerund Perbandingan Link
Link
Exit
Soal-soal Evaluasi
3.3Storyboard
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. Dengan demikian, biasanya storyboard cukup banyak hingga berlembar-lembar. Fungsi dari storyboard antara lain:
a. Memperjelas flowchart.
b. Pedoman bagi animator, programmer, dan narrator. c. Sebagai dokumen tertulis.
d. Bahan pembuatan buku manual.
Adapun storyboard dari rancangan aplikasi multimedia pembelajaran materi gerund dalam bahasa Inggris yang akan dibangun dapat dilihat pada tabel 3.2 sebagai berikut.
Tabel 3.2 Storyboard Perancangan Aplikasi Multimedia Pembelajaran Materi Gerund dalam Bahasa Inggris
No Rancangan Visual Audio
1 Menu Intro. Lihat pada Gambar 3.5 Rancangan Tampilan Menu Intro
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Teks : (hitam, bagian tengah)
Perancangan Aplikasi Multimedia Pembelajaran Materi Gerund dalam Bahasa Inggris
Animasi :
1) Logo USU beserta keterangan logonya secara serentak muncul dari tampilan ukuran kecil ke tampilan ukuran normalnya pada bagian tengah.
2) Teks muncul teratur per karakter.
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio 3) Persegi panjang berwarna hijau transparan
bergerak dari kiri ke kanan.
Tombol navigasi :
1) Tombol “Menu” untuk masuk ke tampilan menu utama.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri bawah
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
No Rancangan Visual Audio 5) Tombol “Exit” untuk keluar dari
aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
2 Menu Utama. Lihat pada Gambar 3.6 Rancangan Tampilan Menu Utama
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas). Sub Menu Utama : (bagian kiri) 1) Tombol Materi
2) Tombol Latihan 3) Tombol Evaluasi
Teks : (pada bagian tengah) Pilihlah menu yang tersedia.
1) Klik pada Materi untuk melihat pembahasan dari materi Gerund. Setiap Pembahasan mempunyai beberapa topik dan memiliki persyaratan tertentu.
2) Klik pada Latihan untuk memulai latihan.
3) Klik pada Evaluasi untuk memulai evaluasi
Tombol navigasi :
1) Tombol “Menu” untuk masuk ke tampilan menu utama.
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio Warna : Hitam
2) Tombol “Materi” untuk masuk ke tampilan materi yang berisikan pembahasan tentang materi Gerund. Setiap pembahasan mempunyai beberapa topik tentang Gerund.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
3) Tombol “Latihan” untuk masuk ke tampilan latihan untuk memulai latihan tentang Gerund.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
4) Tombol “Evaluasi” untuk masuk ke tampilan evaluasi untuk memulai evaluasi tentang Gerund.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
No Rancangan Visual Audio 5) Tombol “Home” untuk masuk atau
kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
6) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
7) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
8) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
Animasi:
1) Persegi panjang berwarna hijau transparan bergerak dari kiri ke kanan. 2) Kotak kecil bergerak dari atas ke bawah
bagian kiri.
3) Lingkaran kecil berwarna putih berputar searah jarum jam.
No Rancangan Visual Audio 3 Menu Materi: Lihat pada Gambar 3.8 Rancangan Tampilan Menu Materi
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Sub Materi : (bagian kiri)
Tombol Pengertian (klik untuk ke halaman Pengertian Gerund).
Tombol Penggunaan (klik untuk ke halaman Penggunaan Gerund).
Tombol Jenis Gerund (klik untuk ke halaman Jenis Gerund).
Tombol Perbandingan (klik untuk ke halaman Perbandingan).
Tombol Navigasi:
1) Tombol Submenu “Pengertian” Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
2) Tombol Submenu “Penggunaan” Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio 3) Tombol Submenu “Jenis Gerund”
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
4) Tombol Submenu “Perbandingan” Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
5) Tombol “Menu” untuk kembali ke tampilan menu utama.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
6) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Intro. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
No Rancangan Visual Audio 7) Tombol “Profil” untuk masuk ke
tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
8) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
9) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
Animasi:
Persegi panjang berwarna hijau
1) transparan bergerak dari kiri ke kanan. 2) Kotak kecil bergerak dari atas ke bawah
bagian kiri.
3) Lingkaran kecil berwarna putih berputar searah jarum jam. berjalan dari kanan ke kiri.
No Rancangan Visual Audio 4 Menu Materi 1: Pengertian Lihat pada Gambar 3.9 Rancangan Tampilan Penyampaian Isi Materi
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Judul Materi : Pengertian Tombol Navigasi:
1) Tombol “Materi” untuk kembali ke tampilan materi.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio 5) Tombol “Exit” untuk keluar dari
aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
Animasi:
Teks Isi Materi Pengertian muncul per karakter. 5 Menu Materi 2: Penggunaan. Lihat pada Gambar 3.9 Rancangan Tampilan Penyampaian Isi Materi
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Judul Materi : Penggunaan
Tombol Navigasi:
1) Tombol “Materi” untuk kembali ke tampilan materi.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio 3) Tombol “Profil” untuk masuk ke
tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
5) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
6 Menu Materi 3: Jenis Gerund. Lihat pada Gambar 3.9 Rancangan Tampilan Penyampaian Isi Materi
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Judul Materi : Jenis Gerund
Tombol Navigasi:
1) Tombol “Materi” untuk kembali ke tampilan materi.
Bentuk : Persegi panjang berwarna Orange- Putih Warna : Hitam Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio Posisi : Bagian kiri tengah
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
5) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
No Rancangan Visual Audio 7 Menu Materi 4: Perbandingan. Lihat pada Gambar 3.9 Rancangan Tampilan Penyampaian Isi Materi
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Judul Materi : Perbandingan
Tombol Navigasi:
1) Tombol “Materi” untuk kembali ke tampilan materi.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri tengah
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio 5) Tombol “Exit” untuk keluar dari
aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
8 Menu Latihan: Lihat pada Gambar 3.10 Rancangan Tampilan Menu Latihan
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Teks : (hitam)
(setelah dipilih jawaban pada soal, kemudian akan muncul pesan teks : “Anda Benar” jika benar dan “Anda salah” jika jawaban salah dan pembahasan soal akan muncul jika jawaban benar, berlaku untuk semua soal)
Tombol navigasi :
1) Tombol “Materi” untuk kembali ke tampilan materi.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam Posisi : Bagian kiri
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama.
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
5) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
6) Tombol sebelumnya (panah kiri, klik untuk ke soal sebelumnya).
Bentuk : Abu-abu, bulat Posisi : Bagian kiri bawah
7) Tombol berikutnya (panah kanan, klik untuk ke soal berikutnya).
Bentuk : Abu-abu, bulat Posisi : Bagian kiri bawah
No Rancangan Visual Audio 9 Menu Evaluasi: Lihat pada Gambar 3.11 Rancangan Tampilan Menu Evaluasi
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Teks : (hitam)
(Bagian tengah di dalam sebuah persegi) Masukkan Nama Anda minimal 20 Karakter (hitam)
Gambar :
(kotak persegi panjang berwarna hijau - putih, untuk mengisi nama berada tepat di bawah teks)
Tombol navigasi :
1) Tombol “Menu” untuk kembali ke tampilan menu utama.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam Posisi : Bagian kiri
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Profil” untuk masuk ke tampilan Profil.
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
5) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
6) Tombol “Lanjut” untuk memulai latihan. Bentuk : Bujur sangkar berwarna hijau - putih
Posisi : Bagian tengah
7) Tombol “Tidak”.
Bentuk : Bujur sangkar berwarna hijau – putih, teks hitam
No Rancangan Visual Audio 10 Menu Home: Lihat pada Gambar 3.5 Rancangan Tampilan Menu Intro
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Teks : (hitam, bagian tengah)
Perancangan Aplikasi Multimedia Pembelajaran Materi Gerund dalam Bahasa Inggris
Animasi :
1) Logo USU beserta keterangan logonya secara serentak muncul dari tampilan ukuran kecil ke tampilan ukuran normalnya pada bagian tengah.
2) Teks muncul teratur per karakter.
3) Persegi panjang berwarna hijau transparan bergerak dari kiri ke kanan.
Tombol navigasi :
1) Tombol “Menu” untuk masuk ke tampilan menu utama.
Bentuk : Persegi panjang berwarna Orange- Putih
Warna : Hitam
Posisi : Bagian kiri bawah
2) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama.
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
5) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas
11 Menu Profil: Lihat pada Gambar 3.7 Rancangan Tampilan Menu Profil
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Teks : (hitam, bagian tengah)
Animasi :
1) Logo USU beserta keterangan logonya secara serentak muncul dari tampilan
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio 2) ukuran kecil ke tampilan ukuran
normalnya pada bagian tengah. 3) Teks muncul teratur per karakter.
Tombol navigasi:
1) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
2) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
4) Tombol “Exit” untuk keluar dari aplikasi.
Bentuk : Bujur sangkar berwarna Merah
No Rancangan Visual Audio 12 Menu Link: Lihat pada Gambar 3.12 Rancangan Tampilan Menu Link
Judul : Gerund (warna hitam di bagian atas).
Gambar : Logo USU (kiri atas).
Teks : (hitam, bagian tengah) Animasi :
1) Logo USU beserta keterangan logonya secara serentak muncul dari tampilan ukuran kecil ke tampilan ukuran normalnya pada bagian tengah.
Tombol navigasi:
1) Tombol “Home” untuk masuk atau kembali pada tampilan Halaman Utama. Bentuk : Oval berwarna
Hijau- Putih Posisi : Bagian kanan atas
2) Tombol “Profil” untuk masuk ke tampilan Profil.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
3) Tombol “Link” untuk masuk ke tampilan Link.
Bentuk : Oval berwarna Hijau- Putih Posisi : Bagian kanan atas
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Audio 4) Tombol “Exit” untuk keluar dari
aplikasi.
Bentuk : Bujur sangkar berwarna Merah
Posisi : Bagian kanan atas