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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
Nama Use case
Keterangan Pada use case ini , aplikasi akan
Language
menampilkan
pertanyaan
yang
berkaitan dengan Language Pada use case ini , aplikasi akan
Math
menampilkan
pertanyaan
yang
berkaitan dengan Math Pada use case ini , aplikasi akan
About
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
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 http://digilib.mercubuana.ac.id/
3-14 http://digilib.mercubuana.ac.id/
