BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN Pada bagian ini penulis akan menganalisis kebutuhan-kebutuhan dalam membuat aplikasi ini, karena dengan melakukan analisis akan membuat lebih terarah dan jelas alur aplikasinya. Setelah semua kebutuhan selesai dianalisis, maka penulis akan melanjutkan ke tahap perancangan aplikasi. 3.1 ANALISIS PERMASALAHAN DAN KEBUTUHAN Analisis Permasalahan Prototipe Perancangan dan Implementasi Komponen Antarmuka Pemrograman Visual Sebagai Pendukung Aplikasi Penghasil Kuis Otomatis (Afrizal Putrawan, 2013), adalah bagaimana merancang dan membangun aplikasi menggunakan penulisan kode program dengan menggunakan piranti kontrol seperti mouse. Permasalahan yang terjadi adalah bagaimana user akan sangat sulit menggunakan aplikasi yang masih menggunakan teknik programming. Aplikasi yang ada sebelumnya adalah belum memudahkan user dalam membuat soal karena banyak aturan-aturan dari aplikasi ini misalnya membuat aturan kode program yang tentunya sangat menyulitkan user untuk membuatnya. Selain itu antarmuka yang disajikan tidak sepenuhnya dipahami oleh user. Penelitian tersebut juga tidak menampilkan jenis-jenis soal yang akan dibuat. Dan tidak adanya fasilitas untuk memudahkan pengguna dalam memasukkan soal yang tidak mengandung unsur pemrograman. 26

2 Analisis Solusi Dalam kasus permasalahan di atas, analisis solusi yang akan penulis sampaikan adalah sebagai berikut: 1. Menambahkan tampilan web browser sebagai user interface yang berfungsi untuk melakukan konversi soal ke dalam bentuk soal berbasis HTML 2. Soal yang telah dibuat dengan menggunakan aplikasi pengolah kata dapat langsung disalin untuk menghasilkan soal kuis otomatis. 3. Memudahkan user melakukan edit soal dan jawaban setelah soal di konversi. 4. Dapat memilih jenis-jenis soal yang akan dibuat. 5. Dapat memasukkan gambar pada soal yang ingin dibuat. 6. Mudah di ekspor ke dalam format aplikasi penghasil kuis otomatis. Dengan menerapkan solusi tersebut, penulis akan membuat aplikasi yang lebih mudah dan efisien dengan tampilan user interface agar membantu user membuat soal-soal kuis tanpa harus menulis kode program dari penelitian terdahulu. 3.2 ANALISIS KEBUTUHAN Perangkat keras atau hardware yang digunakan untuk membantu penelitian ini adalah satu set komputer dengan spesifikasi: 1. Processor : Intel Processor Pentium(R) Dual-core 2.79GHz 2. Memory : 2048 MB 3. Hardisk Drive (HDD) : 250 GB 4. Video Graphic Adapter (VGA) : ATI Radeon HD 4600 series 1768 MB

3 28 5. Monitor : Benq LCD 16,5 6. Keyboard : Logitech 7. Mouse : Logitech Sedangkan perangkat lunak atau software yang digunakan untuk membantu penelitian ini adalah: 1. Sistem Operasi Micrososft Windows 7 Professional 2. Visual Basic Microsoft Word 3.3 TAHAP PEMBUATAN APLIKASI Konsep Konsep atau cara kerja Aplikasi Penghasil Kuis Otomatis ini adalah melakukan konversi soal ke dalam bentuk soal berbasis HTML, dimana soal tersbut akan muncul pada halaman web yang ada dalam aplikasi ini, kemudian user dapat menyertakan gambar atau mengedit soal maupun jawaban yang akan ditampilkan. User juga dapat merubah soal-soal tersebut melalui aplikasi ini. Selain edit soal maupun jawaban, user dapat memasukkan gambar di dalamnya. Serta mengubah ukuran gambar tersebut sesuai keinginan user. Setelah soal maupun jawaban diedit dan menentukan jawaban yang benar, selanjutnya user melakukan ekspor soal yang nantinya akan di ekspor ke dalam bentuk format file.

4 Perancangan Sistem Sebagaimana aplikasi pada umumnya, desain form merupakan salah satu hal yang harus diperhatikan oleh seorang pembuat aplikasi agar user yang akan menggunakan aplikasi tersebut tidak kesulitan untuk memahami cara menggunakannya. Dan gambar di bawah ini merupakan desain form aplikasi/sistem dalam penelitian ini sebelum dijalankan Use Case Diagram Use Case Diagram adalah gambar yang memperlihatkan hubungan antara actor dengan use case yang bertujuan untuk memperlihatkan interaksi mereka dalam suatu sistem agar lebih mempermudah dalam menganalisa suatu sistem. Merujuk pada flowchart pengembangan antar muka aplikasi penghasil kuis otomatis yang sudah digambarkan sebelumnya maka dapat dibuat use case diagram seperti gambar di bawah ini Perancangan Use Diagram Aplikasi Konversi Soal Edit Soal dan Pilihan Jawaban User Ekspor Soal Gambar 3.1 Use Case Konversi Soal

5 30 Tabel 3.1 Skenario Use Case Konversi Soal Nama Use Case Aktor Deskripsi singkat Skenario Konversi Soal User pembuat soal User melakukan copy/paste soal lalu menekan tombol buat soal 1. User copy/paste soal ke dalam text box 2. Tekan tombol soal 3. Soal akan di konversi ke dalam halaman web Tabel 3.2 Skenario Use Case Edit Soal dan Pilihan Jawaban Nama Use Case Aktor Deskripsi singkat Skenario Edit Soal dan Pilihan Jawaban User pembuat soal User dapat mengubah soal sesuai yang diinginkan 1. User menekan tombol edit 2. Mengetikkan soal yang akan diedit Tabel 3.3 Skenario Use Case Ekspor Soal Nama Use Case Aktor Deskripsi singkat Skenario Ekspor soal User pembuat soal Soal akan diekspor dalam bentuk file User menekan tombol ekspor ke format aplikasi kuis otomatis

6 Activity Diagram Activity Diagram adalah teknik untuk mendeskripsikan logika prosedural, proses bisnis, dan aliran kerja. Activity diagram mempunyai peran seperti halnya flowchart, akan tetapi perbedaannya dengan flowchart adalah activity diagram mendukung perancangan terstruktur sedangkan flowchart tidak bisa (Munawar, 2005:109). Activity Diagram biasanya digunakan untuk menjelaskan bagaimana alur aktivitas suatu sistem bekerja, dengan activity diagram akan mempermudah dalam proses pembuatan aplikasi perangkat lunak. Adapun activity diagram dari penjabaran masing-masing use case diagram di atas dapat dijelaskan pada activity diagram di bawah ini Perancangan Diagram Activity untuk Konversi Soal Gambar 3.2 Diagram Activity Konversi Soal

7 32 Untuk menggunakan sistem ini, user harus menyiapkan soal yang akan di konversi, lalu user membuka aplikasi konversi penghasil kuis otomatis, setelah itu program dijalankan, maka sistem akan menampilkan form utama dimana soal itu akan di konversi, setelah soal telah disiapkan, copy dan paste soal yang telah dibuat ke halaman text box yang ada dalam form aplikasi, setelah itu tekan tombol buat soal untuk konversi ke dalam soal berbasis HTML, soal tersebut akan melakukan looping dan replace sebelum tampil dalam halaman web. Setelah itu sistem akan melakukan konversi ke dalam bentuk HTML. Soal yang telah di konversi tersebut akan muncul pada halaman web yang ada dalam form aplikasi, yang didalamnya terdapat soal-soal, pilihan jawaban, tombol edit soal, checkbox untuk menentukan pilihan jawaban, radiobutton untuk memilih jenis soal essay. Berikut adalah flowchart dan contoh hasil penjelasan algoritma dari tampilan awal saat copy/paste soal: 1. Flowchart dan Contoh Penjelasan Algoritma Text Soal (txtsoal.text) Gambar 3.3 Flowchart Text Soal

8 Soal... a....pilihan Jawaban... b....pilihan Jawaban... c....pilihan Jawaban... d....pilihan Jawaban... e....pilihan Jawaban Soal... a....pilihan Jawaban... b....pilihan Jawaban... c....pilihan Jawaban... d....pilihan Jawaban... e....pilihan Jawaban... Gambar 3.4 Contoh Penjelasan Algoritma Text Soal Pada gambar di atas adalah contoh flowchart dan contoh penjelasan algoritma pembuatan soal multiple choice atau teks soal yang akan di konversi ke dalam halaman web. Pertama user melakukan copy/paste soal tersebut pada text box yang selanjutnya sistem akan melakukan konversi dan akan melakukan looping serta replace soal. Berikut adalah algoritma dan contoh penjelasan algoritma replace soal:

9 34 2. Flowchart dan Contoh Penjelasan Algoritma Replace Nomor Soal Gambar 3.5 Flowchart Replace Nomor Soal

10 35 ***...Soal... a....pilihan Jawaban... b....pilihan Jawaban... c....pilihan Jawaban... d....pilihan Jawaban... e....pilihan Jawaban... ***...Soal... a....pilihan Jawaban... b....pilihan Jawaban... c....pilihan Jawaban... d....pilihan Jawaban... e....pilihan Jawaban... Gambar 3.6 Contoh Penjelasan Algoritma Replace Nomor Soal Gambar di atas menunjukkan flowchart dan contoh penjelasan algoritma dari replace nomor soal. Pertama sistem akan mendeklarasikan a = 1. Setelah itu sistem akan menambah baris baru sebelum text soal yang akan dilanjutkan pengambilan keputusan oleh sistem yang akan melakukan replace text soal. Proses replace yaitu dengan menambah baris baru dan mengganti nomor soal dengan tanda ***. Lalu terakhir sistem akan melakukan looping sesuai urutan nomor soal dan seterusnya. Setelah itu sistem akan melakukan split text soal ke dalam array. Berikut adalah flowchart dan algoritmanya:

11 36 3. Flowchart dan Contoh Penjelasan Algoritma Split Text Soal ke dalam Array Gambar 3.7 Flowchart Split Text Soal Ke Dalam Array

12 37...Soal... a....pilihan Jawaban... txt(0) b....pilihan Jawaban... c....pilihan Jawaban... d....pilihan Jawaban......Soal... a....pilihan Jawaban... txt(1) b....pilihan Jawaban... c....pilihan Jawaban... d....pilihan Jawaban... Gambar 3.8 Contoh Penjelasan Algoritma Split Text Soal Dengan Array Gambar di atas menunjukkan flowchart dan contoh penjelasan algoritma dari split text soal dari masing-masing soal. Split soal akan dilakukan setelah replace nomor soal. Pertama sistem akan memisahkan txtsoal ke dalam array dengan karakter pemisah ***. Setelah itu sistem akan melakukan sistem for i = 1 to Ubound (txt) dan selanjutnya akan mengurutkan a = 1. Lalu sistem akan mengambil keputusan dari masing-masing pilihan jawaban dengan mereplace huruf dari masing-masing pilihan jawaban dengan *** dan pindah baris baru. Lalu sistem akan mengulang dari banyaknya pilihan jawaban. Berikut contoh algoritma dari split text soal setelah direplace:...soal... ***...Pilihan Jawaban... txt(0) ***...Pilihan Jawaban... ***...Pilihan Jawaban... ***...Pilihan Jawaban......Soal... ***...Pilihan Jawaban... txt(1) ***...Pilihan Jawaban... ***...Pilihan Jawaban... ***...Pilihan Jawaban... Gambar 3.9 Contoh Penjelasan Algoritma Replace Pilihan Jawaban

13 38 4. Flowchart dan Contoh Penjelasan Algoritma Replace Nomor Soal Essay, Benar/Salah dan Deskripsi Gambar 3.10 Flowchart Replace Nomor Soal Essay

14 39 ***...Soal... TRUE FALSE ESSAY DESCRIPTION...Halaman Menjawab Soal... Gambar 3.11 Contoh Penjelasan Algoritma Replace Nomor Soal Essay, Benar/Salah dan Deskripsi Gambar di atas menunjukkan flowchart dan contoh penjelasan algoritma replace nomor tipe dari soal essay, benar/salah dan deskripsi. Prosesnya hampir sama dengan replace nomor soal. Pertama sistem akan mendeklarasikan a = 1. Setelah itu sistem akan menambah baris baru sebelum txtsoal yang akan dilanjutkan pengambilan keputusan oleh sistem yang akan melakukan replace textsoal. Proses replace yaitu dengan menambah baris baru dan mengganti nomor soal dengan tanda ***. Lalu terakhir sistem akan melakukan looping sesuai urutan nomor soal dan seterusnya.

15 Perancangan Diagram Activity untuk Edit Soal User System Memasukkan Gambar Klik edit soal dan pilihan jawaban Menampilkan halaman edit soal dan jawaban Menentukan Jawaban Benar Menampilkan file directory Menulis soal yang ingin diedit Memilih Gambar Merubah tampilan Gambar diupload Gambar 3.12 Diagram Activity Edit Soal dan Pilihan Jawaban Untuk menggunakan sistem ini, pastikan soal telah di konversi ke dalam soal berbasis HTML. Setelah di konversi, user dapat melakukan edit soal dan pilihan jawaban. Pertama user menekan tombol edit soal pada halaman web. Setelah itu, sistem akan menampilkan halaman untuk melakukan edit soal. Setelah

16 41 itu user dapat mengganti atau edit soal dan pilihan jawaban yang diinginkan. Setelah selesai, sistem akan menampilkan hasil yang telah diedit tersebut ke dalam halaman web. Dan yang terakhir user menentukan jawaban yang benar dengan menchecklist check box pada pilihan jawaban. Untuk menggunakan sistem ini, pertama user klik masukkan gambar pada soal-soal yang telah di konversi. Setelah itu sistem akan masuk atau menampilkan file directory dimana user ingin memilih gambar yang ingin dimasukkan. Setelah user memilih gambar yang ingin dimasukkan, sistem langsung menampilkan gambar yang telah dipilih ke dalam halaman web. Jika gambar tersebut terlalu besar, user dapat mengubah ukuran gambarnya dengan menekan tombol +/- yang ada di samping tombol masukkan gambar. Selain itu user juga dapat menentukan jawaban yang benar dan memilih tipe soal yang diinginkan misalnya essay, benar/salah dan deskripsi. Berikut adalah flowchart edit soal: Gambar 3.13 Flowchart Edit Soal dan Pilihan Jawaban

17 42 Gambar di atas menunjukkan flowchart dari edit soal dan edit pilihan jawaban. Saat soal ditampilkan ke dalam format HTML, terdapat tombol edit dari masing-masing soal dan pilihan jawaban. Setelah user menekan tombol edit, sistem akan menampilkan halaman editing dimana user akan melakukan edit. Selain tampilan edit soal dan jawaban terdapat juga tombol memasukkan gambar jika user ingin memasukkan gambar yang diinginkan. Berikut flowchart dari memasukkan gambar: Gambar 3.14 Flowchart Memasukkan Gambar Gambar di atas menunjukkan flowchart untuk memasukkan gambar. Pertama user menekan tombol masukkan gambar lalu sistem akan masuk ke dalam file directory dimana gambar disimpan. Setelah user memilih gambar yang akan dimasukkan, sistem akan menampilkan lokasi dimana letak gambar tersebut disimpan. Setelah gambar berhasil dimasukkan user dapat menentukan ukuran

18 43 gambar dengan menekan tombol + untuk memperbesar gambar dan menekan tombol untuk memperkecil gambar Perancangan Diagram Activity untuk Ekspor Soal Gambar 3.15 Diagram Activity Ekspor Soal Untuk menggunakan sistem ini, soal yang telah dibuat pastikan harus selesai. Setelah user menghasilkan soal kuis pada format HTML, selanjutnya user akan mengekspor soal ke dalam bentuk format aplikasi kuis otomatis. Pertama user cukup menekan tombol ekspor ke format aplikasi kuis otomatis lalu sistem akan mengubah soal tersebut ke dalam bentuk kuis otomatis. Berikut flowchart dari ekspor soal:

19 Gambar 3.16 Flowchart Ekspor Soal 44

20 45 Gambar di atas menunjukkan flowchart untuk ekspor soal. Pertama user menekan tombol ekspor ke format aplikasi penghasil kuis otomatis. Setelah itu aplikasi akan mengubah atau mengekspor soal-soal ke dalam format aplikasi penghasil kuis otomatis Perancangan Diagram Activity Keseluruhan Aplikasi User System Gambar 3.17 Diagram Activity Keseluruhan Aplikasi

21 Sequence Diagram Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk user, display dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu. Diawali dari apa men-trigger (pencetus) aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan. Sequence diagram biasanya dibuat setelah activity diagram selesai dibuat, sequence bisa digunakan untuk menentukan urutan alur proses dari masingmasing use case dalam pembuatan aplikasi perangkat lunak Perancangan Sequence Diagram Keseluruhan Aplikasi Gambar 3.18 Sequence Diagram Keseluruhan Aplikasi

22 47 Yang harus dilakukan user jika ingin menggunakan sistem ini adalah pertama, user harus input soal yang telah dibuat ke dalam text box yang ada dalam form aplikasi, lalu user menekan tombol buat soal, agar soal dapat di konversi ke dalam halaman web atau soal berbasis HTML, lalu soal-soal tersebut akan di split oleh sistem ke dalam List yang ada dalam form aplikasi. Kemudian user dapat melakukan edit soal atau pilihan jawaban dengan menekan tombol edit dan memilih jawaban yang benar dengan men-checklist checkbox yang ada dalam form. Selain itu juga dapat menekan tombol masukkan gambar serta dapat mengubah ukuran gambar yang diinginkan. Setalah soal selesai, user dapat mengeksport hasil konversi tersebut ke dalam bentuk file. 3.4 PERANCANGAN ANTARMUKA Perancangan antarmuka merupakan hal yang terpenting dalam aplikasi ini, karena keberhasilan aplikasi ini ditentukan bagaimana aplikasi menampilkan tahapan dalam membuat kode program. Interaksi pengguna dengan aplikasi dilakukan melalui sebuah antarmuka. Antarmuka dirancang dengan sederhana agar pengguna mudah menggunakan aplikasi dan menimbulkan kesan user friendly sehingga pengguna dapat tertarik belajar pemrograman melalui antarmuka secara grafis. Adapun perancangan antarmuka yang dirancang yaitu: 1. Tampilan Utama Aplikasi Tampilan ini berisi halaman web, halaman untuk membuat soal dan pilihan jawaban, serta tombol-tombol seperti buat soal dan eksport ke format aplikasi kuis otomatis. Antarmuka pada awal aplikasi menggunakan kontrol tertentu di Visual Basic 6.0. Tampilan untuk web browser disini berfungsi untuk meng-konversi soal dan pilihan jawaban yang telah dibuat user. Konversi akan berjalan setelah user menekan tombol buat soal. Dan yang terakhir user dapat menekan tombol eksport ke format aplikasi kuis otomatis.

23 48 Gambar 3.19 Tampilan Utama Aplikasi 2. Tampilan Konversi Soal Tampilan ini berisi text box, halaman web dan tombol buat soal. Masing-masing tampilan mempunyai fungsi yaitu text box berfungsi untuk halaman membuat soal, halaman web berfungsi untuk menampilkan soal yang telah di konversi dan tombol buat soal berfungsi untuk perintah agar dapat di konversi ke dalam soal berbasis HTML.

24 49 Gambar 3.20 Tampilan Untuk Melakukan Konversi Soal 3. Tampilan Soal Setelah Konversi Tampilan ini ada pada halaman web setelah soal di konversi berbasis HTML. Antarmuka yang ada pada halaman web tersebut yaitu tombol buat soal, tombol memasukkan gambar, check box untuk menentukan jawaban yang benar, dan radio button untuk memilih tipe soal essay, benar/salah dan deskripsi.

25 50 Gambar 3.21 Tampilan Setelah Soal Dikonversi Gambar 3.22 Tampilan Memilih Tipe Soal 4. Tampilan Edit Soal dan Pilihan Jawaban Tampilan ini adalah halaman untuk melakukan edit soal beserta pilihan jawaban. User terlebih dahulu menekan tombol edit pada masingmasing soal dan masing-masing pilihan jawaban.

26 51 Gambar 3.23 Tampilan Halaman Edit Soal dan Pilihan Jawaban 5. Tampilan Setelah Memasukkan Gambar Setelah user menekan tombol memasukkan gambar, aplikasi akan masuk ke dalam file directory dimana gambar akan dimasukkan. Setelah user memilih gambar, aplikasi akan menampilkan pemberitahuan dimana lokasi gambar yang telah dipilih user. Gambar 3.24 Tampilan Setelah Memasukkan Gambar