BAB 4. PERANCANGAN SISTEM Setelah melakukan proses analisa sistem maka akan dilakukan proses perancangan sistem yang diharapkan sesuai dengan yang kebutuhan pengguna yang dianalisa.perancangan sistem ini menggunakan bahasa Unified Modeling Language sebagai bahasa pemodelan. Perancangan aplikasi ini mennggunakan software utama sebagai berikut: 1. Eclipse sebagai alat bantu utama pembuatan aplikasi ujian soal bahasa Inggris dan Matematika berbasis android level taman kanak kanak Sekolah Kidea Kartini 2. Visio Professional 2013 sebagai alat bantu untuk mengolah UML 4.1 PERANCANGAN ALGORITMA Algoritma yang digunakan dalam aplikasi ini adalah algoritma First In First Out (FIFO) karena ketika user hanya dapat menjawab pertanyaan secara berurutan untuk dapat menuju ke halaman yang lainnya. Gambar 4-1 algoritma First in First Out 4-1
4.2 PERANCANGAN SISTEM Untuk memudahkan pembuatan aplikasi ujian soal bahasa inggris dan matematika berbasis android level taman kanak kanak Sekolah Kidea Kartini, maka akan dibuat model menggunakan Unified Model Language (UML). Dengan menggunakan UML, akan dibuat diagram use case,activity,class. Diagram diagram ini akan membantu melihat interaksi yang terjadi di aplikasi. Dan dapat membantu melihat suatu permasalahan yang kompleks menjadi lebih sederhana. 4.2.1 Use case Diagram Diagram ini menggambarkan interaksi antar aktor atau pengguna dengan sistem atau aplikasi. Use case diagram untuk aplikasi ujian soal bahasa Inggris dan matematika berbasis android Sekolah Kidea Kartini dapat dilihat dari gambar berikut: user Gambar 4-2 Diagram Use case Berikut adalah keterangan mengenai use case diagram diatas : Tabel 4-1 keterangan Use Case Diagram 4-2
Nama Use case Keterangan Language Math About Pada use case ini, aplikasi akan menampilkan pertanyaan yang berkaitan dengan Language Pada use case ini, aplikasi akan menampilkan pertanyaan yang berkaitan dengan Math Pada use case ini, aplikasi akan menampilkan tentang penulis, Universitas Mercu Buana, 2016 4.2.2 Activity Diagram Activity diagram menggambarkan berbagai alur aktivitas dalam suatu sistem yang sedang berlangsung. Activity diagram dapat membantu menjelaskan diagram use case dengan lebih mendalam sehingga mempermudah proses pembuatan aplikasi. Berikut merupakan Activity diagram yang menjelaskan interaksi antara pengguna atau aktor dengan aplikasi latihan soal bahasa Inggris dan Matematika berbasis android Sekolah Kidea Kartini. Aktivitas dimulai ketika pengguna membuka aplikasi akan muncul tampilan splash screen. Lalu setelah itu akan keluar tampilan menu utama. Menu utama berisi pilihan yang dapat dipilih oleh pengguna atau aktor. 4-3
1. Activity Diagram Menu Language Gambar 4-3 Activity Diagram Menu Language Keterangan : Aktivitas diawali oleh pengguna membuka aplikasi lalu memilih menu language, maka akan menuju ke tampilan pertanyaan-pertanyaan yang sesuai dengan menu language dipilih. Jika tidak maka akan tetap berada di tampilan menu utama. Jika memilih salah satu menu maka pengguna harus menjawab seluruh pertanyaan yang disediakan hingga selesai keseluruhan soalnya. Kemudian user akan melihat hasil dari pertanyaan yang dijawab. 4-4
2. Activity Diagram Menu Math Gambar 4-4 Activity Diagram Menu Math Keterangan: Aktivitas diawali oleh pengguna membuka aplikasi lalu memilih menu math, maka akan menuju ke tampilan pertanyaan-pertanyaan yang sesuai dengan menu language dipilih. Jika tidak maka akan tetap berada di tampilan menu utama. Jika memilih salah satu menu maka pengguna harus menjawab seluruh pertanyaan yang disediakan hingga selesai keseluruhan soalnya. Kemudian user akan melihat hasil dari pertanyaan yang dijawab. 4-5
3. Activity Diagram About Gambar 4-5 Activity Diagram Menu About Keterangan : Aktivitas diawali saat pengguna, membuka aplikasi lalu memilih menu About. Lalu sistem akan menampilkan informasi yang ada di menu About dan aktivitas akan berakhir 4.2.3 Sequence Diagram Sequence diagram digunakan untuk menunjukkan bagaimana perilaku pada sebuah scenario. Diagram ini menunjukkan interaksi antar class pada setiap usecase. 4-6
1. Sequence Diagram menu Language Gambar 4-6 Sequence Diagram Menu Language Deskripsi sequence diagram Menu Language a. Pengguna masuk ke menu utama b. Pengguna memilih menu Language c. Pengguna menjawab soal lalu mengklik tombol check untuk memeriksa jawaban d. Pengguna dapat memilih Try again atau menu e. Jika pengguna memilih Try again maka pengguna akan kembali ke soal Language f. Jika memilih menu maka pengguna akan kembali ke menu utam 4-7
2. Sequence Diagram menu Math Gambar 4-7 Sequence Diagram Menu Math Deskripsi sequence diagram Menu Math g. Pengguna masuk ke menu utama h. Pengguna memilih menu Math i. Pengguna menjawab soal lalu mengklik tombol check untuk memeriksa jawaban j. Pengguna dapat memilih Try again atau menu k. Jika pengguna memilih Try again maka pengguna akan kembali ke soal Math l. Jika memilih menu maka pengguna akan kembali ke menu utama 4-8
3. Sequence Diagram menu About Gambar 4-8 Sequence Diagram Menu About Deskripsi sequence diagram Menu About a. Pengguna masuk ke menu utama b. Pengguna memilih menu About c. Pengguna dapat kembali ke menu utama 4.3 DESAIN ANTARMUKA ( DESIGN INTERFACE) Halaman utama Berikut adalah tampilan menu utama aplikasi latihan soal bahasa Inggris dan matematika berbasis android Sekolah TK Kidea Kartini. Pada tampilan menu utama ini akan ada beberapa menu yang memiliki fungsi sebagai berikut: a. Language : akan menampilkan pertanyaan dengan tema Language b. Math : akan menampilkan pertanyaan dengan tema matematika c. About: akan menampilkan tampilan berupa keterangan mengenai penulis dan waktu pembuatan 4-9
1. Halaman Utama Halaman Utama Gambar 4-9 Rancangan Halaman Utama Keterangan : ini adalah halaman utama. Untuk melanjutkan ke menu utama user hanya perlu mengetuk pada layar atau menunggu 2. Halaman Menu Utama Gambar 4-10 Rancangan Halaman Menu Utama 4-10
Keterangan : pada halaman ini terdapat pilihan menu Language, Math, dan About. Pengguna dapat memilih salah satu untuk melanjutkan ke aktivitas selanjutnya. 3. Halaman Language Gambar 4-11 Rancangan Halaman Menu Language Keterangan : ketika menu ini dipilih akan muncul beberapa soal dan pengguna dapat memilih menjawab dari pertanyaan yang tersedia. 4. Halaman Math Gambar 4-12 Rancangan Halaman Menu Math 4-11
Keterangan : ketika menu ini dipilih akan muncul beberapa soal dan pengguna dapat memilih menjawab dari pertanyaan yang tersedia. 5. Halaman About Gambar 4-13 Rancangan Halaman Menu About Keterangan : pada halaman ini akan berisi tentang nama penulis, Universitas Mercubuana 2016 6. Halaman Hasil Gambar 4-14 Rancangan Halaman Menu Hasil dari Check 4-12
Keterangan : Pada halaman ini akan berisi hasil dari jawaban pengguna, jika jawaban benar akan mendapat nilai 1. lalu akan ada kunci jawaban dari pertanyaan tersebut. Lalu ada pilihan try again untuk memulai dari awal pertanyaan. Dan Menu jika ingin kembali ke menu utama. Contoh format jawaban 1-(benar)=A,(nilai=1) 4-13
3-14