BAB III ANALISA DAN PERANCANGAN
Sistem e-learning yang menggunakan modul aplikasi moodle telah digunakan oleh Universitas Mercu Buana sejak tahun 2008. Dengan diterapkannya sistem e-learning ini, materi kuliah tidak lagi disampaikan dalam tatap muka antara dosen dan mahasiswa secara penuh, melainkan dengan metode penyampaian materi perkuliahan secara online. Dengan metode ini semua dosen dan mahasiswa yang terlibat harus terhubung dengan internet untuk dapat mengakses sistem e-learning untuk “menghadiri” proses perkuliahan. Dalam proses e-learning, dosen-dosen berkewajiban untuk memberikan materi perkuliahan dan juga ujian yang biasa disebut dengan quiz untuk mahasiswa-mahasiswanya. Untuk membuat quiz, moodle telah menyediakan fasilitas atau menu yang bisa digunakan oleh dosen-dosen secara online dengan cara mengetik semua soal-soal dan jawaban-jawaban di form-form yang sudah disediakan didalamnya. Selain itu, moodle juga menyediakan fasilitas upload file yang berisi soal-soal beserta jawaban-jawabannya dalam berbagai format. Salah satu formatnya adalah format GIFT. Untuk membuat file dengan format GIFT ini, dosen-dosen harus memiliki pengetahuan tentang tata cara penulisan yang sudah standar sesuai dengan format GIFT. Pada dasarnya aplikasi ini dibangun untuk membantu dosen-dosen dalam membuat soal-soal berikut jawaban-jawaban dengan format GIFT berikut fasilitas Upload file gambar sehingga memudahkan dosen-dosen untuk membuat soal dengan attachment gambar kapanpun dan dimanapun tanpa harus selalu terhubung dengan internet. Dalam bab ini penulis akan menceritakan tentang analisa program, mulai dari identifikasi input hingga output. Juga perancangan aplikasi yang menggambarkan tentang pemodelan DFD, Flowchart dan perancangan User Interface dari aplikasi ini. Berdasarkan uraian sebelumnya, maka struktur penulisan di bab ini dimulai dari pembahasan tentang analisa input, proses hingga output. Kemudian dilanjutkan dengan perancangan tampilan aplikasi. Selanjutnya dilanjutkan
30
31
dengan diagram aliran data tentang bagaimana aplikasi ini berjalan dan desain antar muka dari aplikasi ini.
3.1
IDENTIFIKASI KEBUTUHAN INPUT DAN OUTPUT
3.1.1
Identifikasi Input Dalam aplikasi pembuatan soal pilihan ganda ini memanfaatkan input dari
perangkat keras external, berupa mouse dan keyboard. Aplikasi ini diperuntukkan kepada dosen-dosen yang telah memiliki user account di sistem e-learning Universitas Mercu Buana. Sesaat setelah aplikasi dijalankan user akan langsung dihadapkan pada form input dengan isian berupa: 1. Jenis pertanyaan (Multiple Choice, True/False atau Matching), 2. Uraian pertanyaan, 3. Uraian jawaban (8 jawaban), 4. Persentase bobot nilai dari masing-masing jawaban, 5. Pilihan untuk menentukan bahwa jawaban itu benar atau salah, 6. Uraian pesan notifikasi untuk jawaban yang dipilih, 7. Fasilitas untuk menyisipkan jawaban di antara uraian pertanyaan, 8. Fasilitas untuk menyisipkan gambar di antara uraian pertanyaan, 9. Fasilitas penghitungan persentase bobot nilai dari masing-masing jawaban secara otomatis, 10. Fasilitas manipulasi data soal (buat soal baru, hapus soal dan simpan soal), 11. Fasilitas import file yang berisi soal-soal yang pernah dibuat, 12. Fasilitas export soal yang sudah dibuat ke dalam file dengan format GIFT, 13. Fasilitas upload file gambar yang akan disisipkan dengan terlebih dahulu memverifikasi masukan username dan password yang terdaftar di sistem e-learning, dan 14. Fasilitas verifikasi dan pemroses file hasil upload di sistem e-learning.
32
3.1.2
Analisa Kebutuhan dan Sistem yang Diharapkan Aplikasi pembuatan soal pilihan ganda ini dapat menghasilkan output
berupa file soal-soal e-learning dalam format GIFT sehingga dapat dibaca oleh sistem e-learning Universitas Mercu Buana. Selain itu aplikasi ini juga dapat menyimpan dan membuka file yang berisi soal-soal yang sudah pernah dibuat sebelumnya.
3.2
PERANCANGAN APLIKASI Perancangan untuk aplikasi pembuatan soal pilihan ganda ini meliputi
perancangan dengan pemodelan DFD, flowchart dan perancangan User Interface.
3.2.1
Pemodelan DFD DFD untuk aplikasi pembuatan soal pilihan ganda ini dibagi menjadi 2,
yaitu DFD level 0 dan DFD level 1. 1. DFD Level 0
User (Dosen)
Form Soal dan Jawaban
A File GIFT
Membuat Soal dan Jawaban
B File Gambar
File Soal
Gambar 3.1 DFD Level 0
Upload File Gambar
Sistem e‐Learning
33
2. DFD Level 1 Form Soal dan Jawaban
A.2
A.1
Konversi Soal dan Jawaban
Rekam Soal dan Jawaban
Data Soal dan Jawaban
A.4 Data Soal dan Jawaban
File GIFT
A.3 Simpan Soal dan Jawaban
File Soal
Data File
Gambar 3.2 DFD Level 1 Proses A
Buka dan Baca Data File
34 File Gambar
B.3 Baca Data HTTP Response
Status Hasil Upload
B.1 Konversi Gambar Ke Binary
Data HTTP Response
Data Binary Gambar
Data HTTP Response Sistem e‐Learning
B.2 Buat Data HTTP Request
Data HTTP Request
Data HTTP Request
Gambar 3.3 DFD Level 1 Proses B 3.2.2
Flowchart
1. Membuat soal baru START
Simpan Soal Terlebih Dahulu?
Y
Simpan Soal
Kosongkan Semua Textbox
END
Gambar 3.4 Flowchart proses membuat soal baru
35
2. Perancangan form soal Multiple Choice START
Tampilkan Textbox Jawaban, Textbox Persentase dan Checkbox Jawaban Benar/Salah Dari 1 s/d 4, Tampilkan tombol Sisipkan Jawaban, Tombol Sisipkan Gambar, Tombol Hitung Persen dan Tombol Navigasi Antar‐Jawaban dan Sembunyikan Checkbox Soal Benar/Salah dan Textbox Jawaban Matching Dari 1 s/d 4
END
Gambar 3.5 Flowchart form soal Multiple Choice 3. Perancangan form soal True/False
START
Sembunyikan Textbox Jawaban, Textbox Persentase, Checkbox Jawaban Benar/Salah dan Textbox Jawaban Matching Dari 1 s/d 4, Sembunyikan tombol Sisipkan Jawaban, Tombol Sisipkan Gambar, Tombol Hitung Persen dan Tombol Navigasi Antar‐Jawaban dan Tampilkan Checkbox Soal Benar/Salah
END
Gambar 3.6 Flowchart form soal True/False
36
4. Perancangan form soal Matching
START
Sembunyikan Textbox Jawaban, Textbox Persentase, Checkbox Jawaban Benar/Salah Dari 1 s/d 4 dan Checkbox Soal Benar/Salah, Sembunyikan tombol Sisipkan Jawaban, Tombol Sisipkan Gambar, Tombol Hitung Persen dan Tombol Navigasi Antar‐Jawaban dan Tampilkan Textbox Jawaban Matching dari 1 s/d 4
END
Gambar 3.7 Flowchart form soal Matching 5. Menyisipkan jawaban ke dalam soal
START
Cari Posisi Cursor Terakhir Di Textbox Pertanyaan Tambahkan Kode Sisipan Jawaban Setelah Cursor
END
Gambar 3.8 Flowchart menyisipkan jawaban ke dalam soal
37
6. Menyisipkan gambar ke dalam soal
START
Direktori Gambar
Buat Direktori Gambar
Ada
Pilih File Gambar Y Copy File Gambar Ke Direktori Gambar
Cari Posisi Cursor Terakhir Di Textbox Pertanyaan Tambahkan Kode Sisipan Gambar Setelah Cursor
END
Gambar 3.9 Flowchart menyisipkan gambar ke dalam soal
38
7. Menghitung persentase jawaban
START
I = 0, J = 0 Benar = 0
I ≤ 7
N END
Jawaban Ke‐ I Kosong?
Y
I = 0
I < J J = J + 1
N
I = I + 1 I = I + 1 Jawaban Ke‐ I Benar? Y Benar = Benar + 1
Jawaban Ke‐ I Benar? Y Persen = 100 / Benar
Persen = 0 – (100 / (J – Benar))
Gambar 3.10 Flowchart menghitung persentase jawaban
39
8. Memasukkan pesan yang akan ditampilkan jika jawaban dipilih
START
Tombol Ditekan = F1 Y Masukkan Isi Pesan
Isi Pesan Kosong? N Hapus Data Isi Pesan
Simpan/Update Data Isi Pesan
END
Gambar 3.11 Flowchart memasukkan pesan
40
9. Navigasi antar-jawaban
START
Tombol Halaman 1 s/d 4 Ditekan
Tombol Halaman 5 s/d 8 Ditekan
Y
Y Tampilkan Box Jawaban 5 s/d 8
Tampilkan Box Jawaban 1 s/d 4
END
Gambar 3.12 Flowchart navigasi antar-jawaban 10. Menyimpan soal dan jawaban
START
Simpan/Update Soal dan Jenis Soal Ke Dalam File
I = 0
I≤7 Y END
I = I + 1 Simpan/Update Jawaban Ke‐ I Ke Dalam File
Gambar 3.13 Flowchart menyimpan soal dan jawaban
41
11. Menghapus soal dan jawaban START
Hapus Soal dan Jenis Soal Dari Dalam File
I = 0
I≤7 Y Navigasi Soal
I = I + 1
END
Hapus Jawaban Ke‐ I Dari Dalam File
Gambar 3.14 Flowchart menghapus soal dan jawaban 12. Membuka file yang berisi soal-soal yang pernah dibuat START
Pilih File
Nama File Kosong? N Navigasi Soal
END
Gambar 3.15 Flowchart membuka file
42
13. Export soal-soal ke dalam file dengan format GIFT
START
OK? Y
Ada Gambar? Y
Upload Gambar? Y Upload
I = 0
I < N Soal Y END
I = I + 1 Tulis A Ke File J = 0
A = Soal + Jawaban
J < N Jawaban Y J = J + 1 Jawaban = Jawaban + Jawaban J
Gambar 3.16 Flowchart export soal ke dalam file GIFT
43
14. Navigasi antar-soal
START I = Soal Ke‐ A = Ambil Data Soal Ke‐I Dari File B = Ambil Jumlah Total Soal Dari File Print “Soal Ke‐I Dari B” Isi textbox Soal = A J = 0
J ≤ 7
END
Y J = J + 1 C = Ambil Data Jawaban Ke‐J Dari File D = Ambil Data Bobot Jawaban Ke‐J Dari File E = Ambil Data Pesan Jawaban Ke‐J Dari File Isi textbox Jawaban Ke‐J = C Isi textbox Bobot Ke‐J = D Isi tooltip textbox Jawaban Ke‐J = E
Gambar 3.17 Flowchart navigasi antar-soal
44
15. Upload file gambar
START
Connection .Open? Y Connection.Close
END
A = Extract URL Halaman Web Upload Berhasil A.Host Kosong? N B = Convert File Gambar Ke Binary C = “POST” + A.URI + A.Query + “Host: ” + A.Host + “Content‐Type: multipart/form‐data, boundary= ” + B + Content‐Length: “ + PanjangKarakter(B) A.Port = 0
Host Kosong
Upload Gagal
Y D = OK? Y Load Complete?
D = Connection.GetData Ambil Response Dari Web Server
Proses Request Oleh Web Server
Y A.Port = 80
Connection.SendData(C) Connection.Open
Connection.Remote Port = A.Port Connection.Remote Host = A.Host Connection.Protocol = sckTCPProtocol
Gambar 3.18 Flowchart upload file gambar
45
3.2.3 Peerancangan n User Interf rface Perancangan User Interfa face dari apllikasi ini diibagi menjaadi 3 (tiga), yaitu form untuuk pengisiann soal multtiple choice, form untu uk pengisiaan soal truee/false dan form untuk penggisian soal matching. m A Adapun con ntoh perancaangannya adalah a sebagai beerikut: 1. Fo orm pengisiaan soal multiple choicee
G Gambar 3.19 Form penngisian soal multiple chhoice
46
2. Fo orm pengisiaan soal truee/false
Gambar 3.20 3 Form pengisian sooal true/falsse
47
3. Fo orm pengisiaan soal matcching
Gambar 3.21 3 Form pengisian sooal matchinng
