4.2 Peracangan Sistem
Perancangan sistem dilakukan dengan tujuan untuk memberikan gambaran tentang bagaimana proses bisnis yang terdapat pada sistem dan tampilan antar
muka dari sistem yang akan dibangun.
4.2.1 Perancangan Proses Perancangan proses menggambarkan proses yang akan dibangun pada
sistem yang akan dibuat. Pemodelan yang digunakan untuk perancangan sistem ini adalah Unified Modeling Language UML. Beberapa diagram yang
digunakan antara lain adalah :
1. Use Case Diagram
Use case merupakan gambaran skenario dari interaksi antar pengguna dengan sistem. Sebuah diagram use case menggambarkan hubungan antara
actor dan kegiatan yang dapat dilakukannya terhadap aplikasi. Use case diagram dalam aplikasi pembelajaran perawatan gigi “Senyum Ceria” dapat
dilihat pada gambar 4.1 berikut.
Gambar 4.1 Use Case Diagram Pengguna
2. Activity Diagram
Pada UML Unified Modeling Language, activity diagram digunakan untuk menggambarkan proses bisnis dan urutan aktivitas dalam sebuah
proses. Activity diagram dibuat berdasarkan sebuah atau beberapa use case yang terdapat pada use case diagram.
a. Activity diagram untuk melihat informasi cara merawat gigi
Activity diagram ini merupakan proses aktivitas yang dilakukan oleh pengguna untuk melihat informasi tantang tata cara perawatan gigi.
Langkah-langkahnya adalah pengguna terlebih dahulu masuk ke beranda, pada beranda terdapat berbagai pilihan menu utama, kemudian
pilih menu perawatan gigi, maka akan ditampilkan daftar nama perawatan gigi. Untuk melihat detailnya pengguna dapat melakukan klik
pada daftar nama perawatan gigi yang bersangkutan. Activity
diagramnya dapat dilihat pada gambar 4.2 berikut.
Gambar 4.2 Activity Diagram Perawatan Gigi
b. Activity diagram untuk melihat informasi struktur dan fungsi gigi Activity diagram ini merupakan proses aktivitas yang dilakukan oleh
pengguna untuk melihat informasi struktur dan fungsi gigi. Langkah- langkahnya adalah pengguna terlebih dahulu masuk ke beranda, pada
beranda terdapat berbagai pilihan menu utama, kemudian pilih menu struktur dan fungsi gigi, maka akan ditampilkan daftar struktur dan
fungsi gigi. Untuk melihat detailnya pengguna dapat melakukan klik pada daftar struktur dan fungsi gigi. Activity
diagramnya dapat dilihat pada gambar 4.3 berikut.
Gambar 4.3 Activity Diagram Struktur dan Fungsi Gigi
c. Activity diagram untuk melihat informasi tips gigi sehat Activity diagram ini merupakan proses aktivitas yang dilakukan oleh
pengguna untuk melihat informasi tips-tips untuk menjaga kesehatan
gigi. Langkah-langkahnya adalah pengguna terlebih dahulu masuk ke beranda, pada beranda terdapat berbagai pilihan menu utama, kemudian
pilih menu tips gigi sehat, maka akan ditampilkan daftar tips gigi sehat. Untuk melihat detailnya pengguna dapat mengklik salah satu daftar tips
gigi sehat yang bersangkutan. Activity
diagramnya dapat dilihat pada gambar 4.4 berikut
Gambar 4.4 Activity DiagramTips Gigi Sehat
d. Activity diagram untuk mengatur reminder Activity diagram ini merupakan proses aktivitas yang dilakukan oleh
pengguna untuk melakukan pengaturan reminder agar pada waktu-waktu rutin sikat gigi dan check up gigi muncul notifikasi pada smartphone
pengguna. Langkah-langkahnya adalah pengguna terlebih dahulu masuk ke beranda, pada beranda terdapat berbagai pilihan menu utama,
kemudian pilih menu pengingat gigi sehat, maka akan muncul daftar
pengaturan jadwal sikat gigi pagi, sikat gigi malam dan chek up gigi. Untuk dapat menampilkan notofikasi, pengguna terlebih dahulu harus
melakukan pengaturan waktu sikat gigi maupun check up gigi. Maka pada waktu yang telah ditentukan tersebut akan muncul notifikasi.
Activity diagramnya dapat dilihat pada gambar 4.5 berikut
Gambar 4.5 Activity Diagram Pengingat Gigi Sehat
e. Activity diagram untuk melihat video Activity diagram ini merupakan proses aktivitas yang dilakukan oleh
pengguna untuk melihat fitur video yang disediakan oleh aplikasi. Langkah-langkahnya adalah pengguna terlebih dahulu masuk ke
beranda, pada beranda terdapat berbagai pilihan menu utama, kemudian
pilih menu video. Maka akan muncul tampilan video. Activity diagramnya dapat dilihat pada gambar 4.6 berikut.
Gambar 4.6 Activity Diagram Video
f. Activity diagram untuk melihat menu bantuan Activity diagram ini merupakan proses aktivitas yang dilakukan oleh
pengguna untuk melihat informasi bantuan. Langkah-langkahnya adalah pengguna terlebih dahulu masuk ke beranda, pilih icon bantuan
. Setelah
pengguna memilih icon tersebut, maka akan muncul halaman bantuan yang berisi tentang panduan penggunaan aplikasi. Activity
diagramnya dapat dilihat pada gambar 4.7 berikut.
Gambar 4.7 Activity Diagram Bantuan
g. Activity diagram untuk melihat menu tentang Activity diagram ini merupakan proses aktivitas yang dilakukan oleh
pengguna untuk melihat informasi Tentang Langkah-langkahnya adalah pengguna terlebih dahulu masuk ke beranda, pilih icon tentang. Setelah
pengguna memilih sub menu tersebut, maka akan muncul halaman Tentang yang berisi tentang informasi aplikasi tersebut. Activity
diagramnya dapat dilihat pada gambar 4.8 berikut.
Gambar 4.8 Activity Diagram Tentang
h. Activity diagram untuk keluar dari aplikasi Activity diagram ini merupakan proses aktivitas yang dilakukan oleh
pengguna untuk keluar dari aplikasi. Langkah-langkahnya adalah pengguna terlebih dahulu masuk ke beranda, pilih menu keluar. Setelah
memilih menu keluar maka akan muncul dialog box dengan dua pilihan button yang berisikan “Ya” dan “Tidak”. Jika user mengklik button “Ya”
maka pengguna akan keluar dari aplikasi, jika buttton “Tidak” yang di klik maka pengguna akan kembali ke beranda. Activity diagramnya dapat
dilihat pada gambar 4.9 dibawah ini
Gambar 4.9 Activity Diagram Keluar
4.2.2 Navigasi Menu
Kategori