BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Sistem Dalam merancang sebuah sistem yang akan dirancang secara umum, ada beberapa tahap awal yang harus dilakukan sebelum perancangan sistem yaitu menganalisa sitem. Dari analisa sistem dapat diketahui gambaran dari sistem yang sedang berjalan, baik kelebihan dan kekurangan sistem tersebut. Dalam tahap ini penulis menganalisa kebutuhan sistem yang akan digunakan untuk membuat aplikasi. Dimana penulis membuat aplikasi modul pembelajaran pohon ekspresi untuk para pelajar khususnya mahasiswa yang mengambil mata kuliah struktur data. Aplikasi ini ditujukan untuk memberikan kemudahan dalam pembelajarannya. Pembahasan-pembahasan yang terdapat pada aplikasi ini adalah pembentukan pohon ekspresi dan contoh-contoh soal (kuis) Definisi Analisa Sistem Analisa sistem dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh kedalam bagian-bagian komponenya dengan maksud untuk mengidentifikasikan dan mengevaluasi permsalahan-permasalahan, kesempatankesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya (Jogiyanto, 2001:129). Pada pembuatan aplikasi ini penulis mempunyai acuan dari pelajaran struktur data modul pohon ekspresi, dimana penulis memasuki 3 tahapan input, proses, output yang merupakan sistem kerja dari aplikasi tersebut. 34

2 Perancangan Pada tahap proses perancangan ini, terutama dalam pembuatan aplikasi modul pembelajaran pohon ekspresi, penulis melakukan perancangan aplikasi yang terdiri dari perancangan peta navigasi dan perancangan use case diagram, perancangan activity diagram, perancangan sequence diagram, perancangan class diagram Perancangan Struktur Navigasi Peta navigasi ini mempermudah dalam perancangan aplikasi yang akan dibuat untuk menentukan lokasi pada setiap halaman yang ada di dalam aplikasi. Dapat dilihat pada gambar 3.1 merupakan peta navigasi dari aplikasi modul pembelajaran pohon ekspresi. ` Flash Login Menu Simulasi Kuis Input Kuis Keluar Teori Input Daftar Soal Input Lihat Gambar 3.1 Peta Navigasi Perancangan Use Case Diagram Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem. Skenario dari use case merupakan rangkaian langkah-langkah yang menjabarkan sebuah interaksi antara seorang pengguna dengan sebuah sistem. Gambar 3.2 merupakan use case dari aplikasi yang akan di buat.

3 36 Aplikasi Modul Pembelajaran Pohon Ekspresi Input Ekspresi Lihat Pohon Ekspresi Lihat Teori Lihat Simulasi Traversal Simulasi Pohon Ekspresi Evaluasi Hasil Operasi Membuat Soal <include> <include> Login Admin Input Kuis User <include> Kuis Pohon Ekspresi Melihat Nilai Melihat Soal Mengerjakan Soal Gambar 3.2 Use Case Diagram Aplikasi Pohon Ekspresi Dari Gambar 3.2 aplikasi memiliki dua actor yaitu admin dan user umum. Didalam aplikasi ini admin bisa masuk kedalam sistem secara keseluruhan, sedangkan user umum tidak bisa masuk kedalam sistem secara keseluruhan dimana salah satunya adalah bagin input kuis. Didalam aplikasi ini pengguna dapat melihat teori-teori yang berkaitan dengan ekspresi aritmatika. Untuk lebih memahami ekspresi aritmatika, pengguna dapat menuliskan sebuah ekspresi aritmatika dan dapat melihat proses pengerjaan ekspresi tersebut dengan

4 37 penggambaran pohon biner (binary tree). Pengguna juga dapat melihat langkahlangkah pembacaan pohon biner dengan simulasi traversal dengan metode In Oreder, Pre Order dan Post Order. Skenario dari use case pada gambar 3.7 adalah sebagai berikut : a. Modul Login Tabel 3.1 Modul Login Actor Pengguna Purpose Melihat Form Login, Input username dan password. Overview Sebelum masuk ke menu utama, user atau admin masuk di form login untuk memasukan user dan password Type Primary Typical Course Events : No Actor Action System Response 1 Pengguna memilih file Sistem akan menampilkan Form Ekspresi Aritmatika.exe Login 2 Pengguna Memasukan Sistem akan memvalidasi user dan User dan Password password, apabila memasukan user admin maka akan masuk ke menu admin dan apabila memasukan user umum maka akan masuk ke menu umum. b. Lihat Teori Tabel 3.2 Lihat Teori Actor Pengguna Purpose Melihat Teori Ekspresi Aritmatika, Polish Notation, Pohon Ekspresi dan Proses Traversal Overview Pengguna memilih menu teori yang ditampilkan aplikasi

5 38 untuk melihat teori tersebut Type Optional Typical Course Events : No Actor Action System Response 1 Pengguna memilih menu Teori Ekspresi Aritmatika Sistem akan menampilkan Teori Ekspresi Aritmatika c. Input Pohon Ekspresi Tabel 3.3 Input Pohon Ekspresi Actor Pengguna Purpose Memasukan Ekspresi Aritmatika tipe Infix, Prefix atau postfix Overview Pengguna memasukan Ekspresi Aritmatika disimulasikan langkah-langkah pengerjaanya Type Primary Typical Course Events : No Actor Action System Response 1 Pengguna memilih menu Input Ekspresi Aritmatika Sistem akan menampilkan Form untuk input Ekspresi AAritmatika dengan menampilkan tipe ekspresi Infix, Prefix dan Suffix (Postfix) 2 Pengguna Memilih Sistem akan menampilkan daftar memilih menu tipe ekspresi ekspresi berdasarkan tipe ekspresi yang dipilih 3 Pengguna menuliskan Sistem akan memvalidasi ekspresi Ekspresi Aritmatika atau aritmatika dan menampilkan memilih dari daftar contoh ekspresi pesanerror jika terdapat kesalahan ekspresi

6 39 4 Pengguna menekan tombol Simulasikan Sistem akan menampilkan langkahlangkah pengerjaan ekspresi d. Lihat Pohon Ekspresi Tabel 3.4 Lihat Pohon Ekspresi Actor Pengguna Purpose Menampilkan langkah-langkah pengejaan ekspresi dalam bentuk pohon ekspresi Overview Pengguna dapat melihat pohon-pohon ekspresi untuk setiap langkah dalam pengerjaan ekspresi aritmatika Type Primary Typical Course Events : No Actor Action System Response 1 Pengguna memilih menu Sistem akan menampilkan Form Pohon Ekspresi penggambaran pohon ekspresi untuk setiap langkah pengerjaan ekspresi. Bila pengguna belum memasukan Ekspresi Aritmatika dan menekan tombol Simulasikan maka system akan menampilkan pesan Ekspresi Aritmatika Masih Kosong 2 Pengguna menekan tombol Sistem akan menampilkan pohon Next ekspresi untuk langkah-langkah selanjutnya

7 40 3 Pengguna menekan tomblo Prev. Sistem akan menampilkan pohon ekspresi untuk langkah pengerjaan sebelumnya e. Lihat Simulasi Traversal Tabel 3.5 Lihat Simulasi Traversal Actor Pengguna Purpose Menampilkan langkah-langkah pembacaan pohon ekspresi dengan metode Preorder, Inorder dan PostOrder Overview Pengguna dapat melihat simulasi pembacaan pohon ekspresi untuk metode Preorder, Inorder dan PostOrder Type Primary Typical Course Events : No Actor Action System Response 1 Pengguna memilih menu Sistem akan menampilkan Form Simulasi Traversal Simulasi Traversal dengan menggambarkan pohon ekspresi secara utuh 2 Pengguna menekan tombol Sistem akan mensimulasikan PreOrder langkah pembacaan tree dengan membedakan warna node yang sedang dibaca dengan metode PreOrder

8 41 3 Pengguna menekan tombol InOrder 4 Pengguna menekan tombol PostOrder Sistem akan mensimulasikan langkah pembacaan tree dengan membedakan warna node yang sedang dibaca dengan metode InOrder Sistem akan mensimulasikan langkah pembacaan tree dengan membedakan warna node yang sedang dibaca dengan metode PostOrder f. Evaluasi Hasil Operasi Tabel 3.6 Evaluasi Hasil Operasi Actor Pengguna Purpose Menampilkan Evaluasi Hasil operasi ekspresi aritmatika Overview Pengguna dapat melihat evaluasi hasil operasi dengan memasukan nilai pada variabel-variabel yang ada dalam ekspresi Type Primary

9 42 Typical Course Events : No Actor Action System Response 1 Pengguna memilih menu Sistem akan menampilkan Form Evaluasi Hasil Operasi evaluasi hasil operasi dengan menampilkan variabel-varaibel untuk dihitung didalam ekspresi 2 Pengguna memasukan nilai Sistem akan menerima nilai varaibel-varaibel varaibel-varaibel untuk dihitung didalam ekspresi 3 Pengguna menekan tombol Evaluasi Sistem akan menampilkan langkahlangkah pengerjaan ekspresi beserta hasil perhitungannya g. Melihat Soal Tabel 3.7 Melihat Soal Actor Pengguna Purpose Menampilkan soal-soal mengenai Pohon Ekspresi Overview Pengguna dapat melihat soal-soal dengan masuk ke menu kuis Type Primary Typical Course Events : No Actor Action System Response 1 Pengguna memilih menu Kuis / Soal Sistem akan menampilkan Form Kuis yang siap untuk di kerjakan 2 Pengguna mengerjakan Sistem akan memvalidasi jawaban soal yang sudah di isi dan akan menampilkan nilai

10 43 h. Membuat Soal Tabel 3.8 Membuat Soal Actor Pengguna Purpose Menampilkan Form Soal Overview Admin dapat membuat soal dan jawaban yang akan di publish ke user termasuk input, update dan delete soal. Type Primary Typical Course Events : No Actor Action System Response 1 Admin memilih menu Sistem akan menampilkan Form Input Kuis Input Soal dan Lihat Soal 2 Pengguna membuat soal Sistem akan memasukan soal dan jawaban kedalam database i. Mengerjakan Soal Tabel 3.9 Mengerjakan Soal Actor Pengguna Purpose Menampilkan Form Soal yang akan dikerjakan Overview User dapat mengerjakan soal-soal yang ada di sistem Type Primary Typical Course Events : No Actor Action System Response 1 User memilih menu Kuis Sistem akan menampilkan Form Soal 2 Pengguna mengerjakan Sistem akan memvalidasi setiap soal soal yang dikerjakan

11 44 j. Melihat Nilai Tabel 3.10 Melihat Nilai Actor Pengguna Purpose Menampilkan Form Nilai, setelah user mengerjakan soal Overview User dapat melihat nilai Type Primary Typical Course Events : No Actor Action System Response 1 User memilih menu Kuis Sistem akan menampilkan Form Nilai Perancangan Activity Diagram Diagram aktifitas menggambarkan berbagai aliran aktifitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana suatu aktifitas berakhir Activity Diagram Use Case Lihat Teori Admin / User Sistem Menampilkan Tombol Teori Memilih Tombol Teori Menampilkan Teori - Teori Gambar 3.3 Activity Diagram Lihat Teori

12 45 Tabel 3.11 Activity Diagram Lihat Teori Nama Activity Diagram Lihat Teori Deskripsi Mulai (Start) User memilih tombol teori dan sistem akan menampilkan teori-teori pohon ekspresi Activity Diagram Use Case Input Ekspresi Aritmatika Admin / User Sistem Inputan Ekspresi Input Ekspresi Infix Tipe Ekspresi [Yes] Prefix [No] Suffix Display Pesan Error Tombol Proses Display Sub Ekspresi Gambar 3.4 Activity Diagram Input Ekspresi Aritmatika

13 46 Tabel 3.12 Activity Diagram Input Ekspresi Aritmatika Nama Activity Diagram Input Ekspresi Aritmatika Deskripsi Mulai (Start) User memasukan Ekspresi Aritmatika dan memilih tipe ekspresi (infix, prefix atau postfix) maka sistem akan menampilkan sub ekspresi Activity Diagram Use Case Lihat Pohon Ekspresi Admin / User Sistem Validasi Pohon Ekspresi [Yes] Valid [No] Gambar Pohon Display Error Gambar 3.5 Activity Diagram Lihat Pohon Ekspresi

14 47 Tabel 3.13 Activity Diagram Lihat Pohon Ekspresi Nama Activity Diagram Lihat Pohon Ekspresi Deskripsi Mulai (Start) Setelah user memasukan ekspresi aritmatika, sistem akan memvalidasi apakah ekspresi aritmatika yang di input sudah sesuai atau belum, apabila sesuai maka sistem akan menampikan gambar pohon dan apabila tidak sistem akan menampilkan pesan error Activity Diagram Use Case Lihat Simulasi Traversal Admin / User Sistem Validasi Pohon Ekspresi Pre Order [Yes] Valid [No] In Order Gambar Pohon Display Error Post Order [Yes] Traversal [No] Simulasi Post Order Simulasi In Order Simulasi Pre Order Gambar 3.6 Activity Diagram Lihat Simulasi Traversal

15 48 Tabel 3.14 Activity Diagram Lihat Simulasi Traversal Nama Activity Diagram Lihat Simulasi Traversal Deskripsi Mulai (Start) Setelah user memasukan ekspresi aritmatika, sistem akan memvalidasi apakah ekspresi aritmatika yang di input sudah sesuai atau belum, apabila sesuai maka sistem akan menampikan gambar pohon dan apabila tidak sistem akan menampilkan pesan error. Setelah gambar pohon muncul sistem menampilkan juga tombol simulasi traversal (preorder, inorder dan postorder) dan user mimilih tombol preorder, inorder dan postorder maka sistem akan menampilkan simulasi preorder, inorder dan postorder Activity Diagram Use Case Evaluasi Hasil Operasi Admin / User Sistem Validasi Pohon Ekspresi [Yes] Valid [No] Evaluasi Hasil Operasi Display Error Gambar 3.7 Activity Diagram Evaluasi Hasil Operasi

16 49 Tabel 3.15 Activity Diagram Evaluasi Hasil Operasi Nama Activity Diagram Evaluasi Hasil Operasi Deskripsi Mulai (Start) Setelah sistem memvalidasi pohon ekspresi sistem juga akan menampilkan evaluasi hasil operasi untuk memasukan nilai variabel Activity Diagram Use Case Kuis Gambar 3.8 Activity Diagram Kuis User dan Admin

17 50 Tabel 3.16 Activity Diagram Kuis User dan Admin Nama Activity Diagram Kuis User dan Admin Deskripsi Mulai (Start) Sistem akan menampilkan halaman home user dan user memilih soal untuk menampilkan halaman yang dipilih. Sistem akan menampilkan halaman home admin dan admin memilih soal untuk menampilkan halaman yang dipilih termasuk input, update dan delete soal Activity Diagram Use Case Membuat Kuis Admin Sistem Memilih Link Buat Soal Menampilkan Format Pembuatan Soal Mengisi Data untuk Soal Create [No] [Yes] Menyimpan Data Kedalam DB Gambar 3.9 Activity Diagram Membuat Kuis

18 51 Tabel 3.17 Activity Diagram Membuat Kuis Nama Activity Diagram Membuat Kuis Deskripsi Mulai (Start) Admin memilih link buat soal untuk menampilkan format pembuatan soal dan mengisi soal-soal untuk di simpan ke dalam database Activity Diagram Use Case Mengerjakan Kuis Admin User Sistem Memilih Link Kuis Menampilkan Soal Memilih Soal Tampilkan Aksi Mengerjakan Soal Menampilkan Nilai Gambar 3.10 Activity Diagram Mengerjakan Kuis

19 52 Tabel 3.18 Activity Diagram Mengerjakan Kuis Nama Activity Diagram Mengerjakan Kuis Deskripsi Mulai (Start) User memilih link soal untuk menampilkan soal dan menjawab soal-soal yang ada setelah selesai sistem akan menapilkan nilai Perncangan Sequence Diagram Layar Login Cek Login Menu Utama Admin / User 1 : User ID, Password () 1.1 : User ID, Password () 1.2 : Validasi login () Pesan Jika Tdk Valid () True/False Validasi () Pesan Jika Valid () 2 : Membaca Menu Utama Gambar 3.11 Sequence Diagram login

20 53 Tabel 3.19 Deskripsi Sequence Diagram Login Nama Sequence Login Aktor Admin/User Skenario User masuk kedalam sebuah aplikasi lalu masuk meminta login setelah itu user memasukan username dan password untuk login dan masuk kedalam form menu utama. Apabila salah memasukan password maka akan kembali ke menu login.

21 54 Layar Simulasi Pohon Ekspresi Gambar Pohon Ekspresi Traversal Hasil Operasi Admin / User 1. Open Menu Simulasi Pesan Tdk Valid () 2. Display Pohon ekspresi 2.1 Input Ekspresi Aritmatika () Validasi Ekspresi Aritmatika () 3. Display Sub Pohon ekspresi 3.1 Menggambarkan Pohon ekspresi 3.2 Fungsi Navigasi () 3.3 Proses Traversal () Preorder () Inorder () Postorder 3.4 Evaluasi Hasil Operasi () Input Nilai Var () Evaluasi Hasil 2.2 Simpan Ekspresi Aritmatika () Display Simpan File 2.3 Buka Ekspresi Aritmatika () Display Open File 2.4 Proses Penggambaran () 2.5 Keluar () Gambar 3.12 Sequence Diagram Pohon Ekspresi

22 55 Tabel 3.20 Deskripsi Sequence Diagram Pohon Ekspresi Nama Sequence Pohon Ekspresi Aktor Admin/User Skenario User masuk ke sebuah menu modul simulasi, dan sistem akan menampilkan form pohon ekspresi, user menginput ekspresi aritmatika dan sistem akan memvalidasi ekspresi aritmatika, apa bila sudah sesuai maka sistem akan menggambarkan pohon ekspresi, dan user memilih navigasi untuk proses traversal.

23 56 Login Cek Login Input Soal Lihat Soal Admin 1. User_id, Password () 1.1 User_id, Password () 1.2 Validasi Login () T/F Validasi () Pesan Jika Tdk Valid () Pesan Jika Valid () 2. Membuka Menu input Soal 2.1 Menampilkan Format Soal 2.2 Input Soal 2.3 Menampilkan Soal 3. Membuka Menu Lihat Soal 3.1 Menampilkan Soal Edit Soal Menampilkan Format Edit Soal Delete Soal Menampilkan Pesan Delete Gambar 3.13 Sequence Diagram kuis-admin

24 57 Tabel 3.21 Deskripsi Sequence Diagram Kuis-Admin Nama Sequence Kuis-Admin Aktor Admin Skenario Admin masuk ke menu kuis-admin untuk bisa melihat soal, update soal serta menghapus soal sesuai yang diinginkan admin agar bisa di lihat user dan dikerjakan user untuk mengisi soal-soal. Login Cek Login Quiz Daftar User 1. User_id, Password () 1.1 User_id, Password () 1.2 Validasi Login () T/F Validasi () Pesan Jika Tdk Valid () Pesan Jika Valid () 2. Membuka Menu Quiz 2.1 Menampilkan Soal 2.2 Mengerjakan Soal 2.3 Menampilkan Nilai 3. Daftar User 3.1 Pesan Daftar Berhasil Gambar 3.14 Sequence Diagram kuis-user

25 58 Tabel 3.19 Deskripsi Sequence Diagram Kuis-User Nama Sequence Aktor Skenario Kuis-User User User masuk ke menu kuis-user untuk bisa melihat soal dan mengerjakan soal dan sistem akan menampilkan nilai pada user Perancangan Class Diagram Admin -Id_admin -Nama_admin -Username -Password +Input_Soal() +Lihat_Soal() Tabel_User -Id_User -Nama_User -Gambar_User -Username -Password +Mendaftar() +Menjawab() Tabel_Nilai -Id_Nilai -Id_User -Benar -Salah -Kosong -Point -Tanggal +menampilkan_nilai() Tabel_Soal -Id_Soal -Pertanyaan -Pilihan_a -Pilihan_b -Pilihan_c -Pilihan_d -Jawaban -Publish -Tipe +Menampilkan_Soal() Gambar 3.15 Class Diagram Kuis Perancangan Antar Muka Pada tahap perancangan antar muka ini, penulis mendesainantarmuka untuk aplikasiyang akan dibuat dan menunjukan antara letak tombol yang satu dengan tombol yang lainnya untuk dapat memulai suatu proses pembelajaran pohon ekspresi.

26 59 1. Rancangan Tampilan Login Tampilan login adalah tampilan kedua setelah loading flash sebelum memasuki menu utama dari aplikasi ini. Tampilan login biasanya menampilan user id dan password. Untuk masuk ke menu utama maka pengguna harus memasukan data user id dan password, apabila user id dan password yang dimasukan adalah user admin maka akan masuk ke seluruh menu pada aplikasi ini, tapi jika pengguna memasukan user id dan password dengan level user biasa, maka tidak bisa mengakses menu utama secara keseluruhan User Id Password OK Cancel Gambar 3.16 Tampilan Login 2. Rancangan Tampilan Menu Utama Tampilan menu utama adalah tampilan yang menampilkan seluruh menu pada aplikasi ini setelah memasukan data user id dan password yang benar sesuai dengan kewenangannya. Menu Gambar 3.17 Tampilan Menu Utama

27 60 3. Rancangan Tampilan Pohon Ekspresi Tampilan pohon ekspresi adalah tampilan untuk menampilkan pohon ekspresi dengan memasukan ekspresi aritmatika dengan metode Infix, Prefix atau Postfix serta bisa dengan membuka file yang sudah di simpan sebelumnya. Input Ekspresi Polish Notasion Buka File Simpan File Proses Ekspresi Keluar Gambar 3.18 Tampilan Rancangan Pohon Ekspresi 4. Rancangan Tampilan Kuis Tampilan kuis adalah tampilan untuk menampilkan semua soal yang berhubungan dengan pohon ekspresi dan menampilkan nilai setelah menjawab semua soal yang ada. No Soal A Pilihan A C Pilihan A B Pilihan B D Pilihan B Proses Gambar 3.19 Tampilan Kuis

28 61 5. Rancangan Tampilan Input Soal Tampilan input soal adalah tampilan untuk menginput soal-soal yang berkaitan dengan aplikasi ini, dan tampilan input soal ini hanya bisa diakses dengan user admin. No Soal A Pilihan A C Pilihan A B Pilihan B D Pilihan B Jawaban Proses Gambar 3.20 Tampilan Input Soal 6. Rancangan Tampilan Lihat Soal Tampilan lihat soal adalah tampilan untuk melihat semua soal-soal yang ada dalam aplikasi ini, dan tampilan lihat soal ini hanya bisa diakses dengan user admin dan user tersebut bisa merubah dan menghapus soalsoal yang ada. No Soal A Pilihan A C Pilihan A B Pilihan B D Pilihan B Edit Delete Gambar 3.21 Tampilan Lihat Soal