BAB IV ANALISIS DAN PERANCANGAN SISTEM

27 4.1 Analisis Sistem

Sistem yang akan dibangun adalah sebuah mobile application yang dapat berjalan di sistem operasi Android. Aplikasi ini menyediakan edukasi tentang pengenalan struktur dan fungsi gigi, tata cara perawatan kesehatan gigi meliputi cara menyikat gigi, waktu yang tepat untuk pemeriksaan gigi dan tips-tips untuk menjaga kesehatan gigi.

Analisa sistem yang dapat diterapkan untuk mengidentifikasi aplikasi ini adalah analisis analisis kebutuhan fungsional, dan analisis kebutuhan non fungsional.

4.1.2 Analisis Kebutuhan Fungsional

Analisis kebutuhan fungsional dari sistem yang akan dikembangkan adalah sebagai berikut :

1. Aplikasi menyediakan fitur reminder sebagai pengingat sikat gigi pagi,

malam, dan jadwal check-up gigi.

2. Menampilkan informasi tentang tata cara perawatan gigi yang benar,

struktur dan fungsi gigi serta tips untuk menjaga kesehatan gigi dalam bentuk teks dan video.

3. Menyediakan informasi tentang aplikasi dan panduan penggunaan

aplikasi.

4.1.3 Analisis Kebutuhan Non Fungsional

Kebutuhan non-fungsional yang mendukung pembuatan sistem aplikasi ini antara lain adalah :

1. Sistem dapat menampilkan video.

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.

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.

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 penggunauntuk 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 penggunaakan kembali ke beranda. Activity diagramnya dapat dilihat pada gambar 4.9 dibawah ini

Gambar 4.9 Activity Diagram Keluar 4.2.2 Navigasi Menu

Navigasi menu ini berfungsi untuk menjelaskan bagaimana alur menu pada sistem ini dibuat. Dalam aplikasi pembelajaran perawatan gigi ini terdapat 8 bah menu yang terdiri dari menu perawatan gigi, menu struktur dan fungsi gigi, menu pengingat gigi sehat, menu tips gigi sehat, menu video, menu keluar, menu bantuan, dan menu tentang.

Gambar 4.10 Navigasi Menu Aplikasi “Senyum Ceria” 4.2.3 Perancangan Antar Muka (User Interface)

Antar muka (User interface) merupakan penghubung antara aplikasi dengan pengguna (user). Antar muka dirancang sedemikian rupa sehingga dapat dengan mudah dimengerti oleh pengguna yang menggunakan aplikasi ini. Antar muka splashscreen adalah tampilan yang pertama kali muncul saat pengguna menjalankan aplikasi. Pada halaman splashscreen terdapat text nama aplikasi, logo aplikasi dan juga progress bar. Rancangan tampilan halaman splashscreen dapat dilihat pada gambar 4.11 berikut

Gambar 4.11 Rancangan Halaman SplashScreen

Setelah halaman splashcreen, tampilan berikutnya adalah halaman menu utama. Pada halaman ini terdapat 8 menu, meliputi menu perawatan gigi, menu struktur dan fungsi gigi, menu pengingat gigi sehat, menu tips gigi sehat, menu video, menu keluar, menu bantuan dan menu tentang. Untuk rancangan halaman menu utama dapat dilihat pada gambar 4.12 berikut

Gambar 4.12 Rancangan Halaman Menu Utama

Pada menu perawatan gigi, struktur dan fungsi gigi, dan tips gigi sehat, yang ditampilkan adalah daftar nama dari masing-masing informasi yang akan ditampilkan. Untuk melihat detail informasi, pengguna dapat mengklik salah satu daftar nama yang bersangkutan. Untuk rancangan halamannya dapat dilihat pada gambar berikut

Gambar 4.13 Rancangan Halaman Perawatan Gigi

Gambar 4.15 Rancangan Halaman Tips Gigi Sehat

Dari 3 menu yaitu perawatan gigi, struktur dan fungsi gigi, dan tips gigi sehat, apabila salah satu daftar nama diklik maka akan ditampilkan halaman detail informasi. Halaman detail informasi berisi gambar dan text isi informasi. Untuk rancangan halaman detail informasi dapat dilihat pada gambar berikut.

Gambar 4.16 Rancangan Halaman Detail Informasi Perawatan Gigi

Gambar 4.18 Rancangan Halaman Detail Informasi Tips Gigi Sehat Pada menu pengingat gigi sehat, yang ditampilkan adalah 3 daftar pengaturan sikat gigi maupun check up gigi. Pada masing-masing daftar tersebut terdapat icon, editText untuk melakukan pengaturan waktu, dan toggleButton untuk mengaktifkan ataupun me-nonaktifkan pengingat. Rancangan antar muka halaman Pengingat gigi sehat dapat dilihat pada gambar 4.19 berikut

Gambar 4.19 Rancangan Halaman Pengingat Gigi Sehat

Pada menu video yang akan ditampilkan adalah sebuah video pembelajaran gigi. Video ini dapat ditampilkan dengan orientasi portrait maupun landscape. Rancangan halaman video dapat dilihat pada gambar 4.20 berikut.

Gambar 4.20 Rancangan Halaman Video

Pada menu keluar, yang akan ditampilkan ketika user mengklik menu tersebut adalah dialog box peringatan yang meminta pengguna untuk memilih apakah benar-benar akan keluar aplikasi atau tidak. Jika pengguna memilih “Ya” maka aplikasi akan keluar, dan jika pengguna memilih tidak aplikasi akan kembali ke menu utama. Rancangan dialog box keluar dapat dilihat pada gambar 4.21 berikut

Pada menu tentang, yang akan ditampilkan adalah dialog box yang berisi tentang informasi aplikasi. Pada dialog box tersebut terdapat logo aplikasi, tahun pembuatan aplikasi, nama pembuat aplikasi, dan nama pembuat video yang terdapat pada fitur aplikasi. Rancangan dialog box tentang dapat dilihat pada gambar 4.22 berikut

Gambar 4.22 Rancangan Halaman Dialog Box Tentang

Pada menu bantuan, yang akan ditampilkan adalah halaman bantuan yang berisi tentang cara penggunaan aplikasi. Pada halaman ini terdapat tampilan icon bantuan, icon masing-masing tombol menu pada aplikasi, dan text detail informasi penggunaan menu pada aplikasi. Rancangan halaman bantuan dapat dilihat pada gambar 4.23 berikut.

Gambar 4.23 Rancangan Halaman Bantuan

4.2.4 Perancangan Simbol

Perancangan simbol digunakan untuk memberikan gambaran tentang berbagai macam bentuk simbol yang mewakili masing-masing fungsi menu pada aplikasi. Rancangan simbol yang terdapat pada aplikasi dapat dilihat pada tabel dibawah ini.

No Simbol Keterangan

1 Simbol perawatan gigi yang

mewakili menu Perawatan Gigi.

Tabel 4.1 Perancangan Simbol (lanjutan)

2 Simbol struktur dan fungsi

gigi yang mewakili menu Struktur Fungsi Gigi.

3 Simbol pengingat gigi sehat

yang mewakili menu

Pengingat Gigi Sehat.

4 Simbol tips gigi sehat yang

mewakili menu Tips Gigi Sehat.

5 Simbol video yang mewakili

menu Video.

6 Simbol keluar yang

mewakili menu Keluar.

7 Simbol bantuan yang

mewakili menu Bantuan.

8 Simbol tentang yang

mewakili menu Tentang.

4.2.5 Perancangan Video

Video yang terdapat dalam aplikasi dirancang dan dibangun oleh Maya Angela, mahasiswi Fakultas Kedokteran Gigi UGM. Video ini disusun menggunakan teknologi VideoScribe.

4.2.6 Perancangan Audio Narasi

Audio narasi yang terdapat pada aplikasi, dirancang dan dibangun oleh penulis. Audio narasi ini disisipkan pada halaman detail informasi periksa gigi, sikat gigi, struktur gigi, fungsi gigi, tips memilih sikat gigi, tips memilih pasta gigi, tips makanan yang baik untuk gigi, tips makanan yang tidak baik untuk gigi, dan halaman tips waktu yang tepat untuk sikat gigi.

Pada masing-masing halaman tersebut, disediakan 3 tombol media player yang masing-masing berfungsi untuk memainkan audio narasi, menjeda audio narasi, dan menghentikan audio narasi.

Proses perekaman suara dan pengeditan background music dibantu dengan software Audacity.

44

Gambar 4.19 Rancangan Halaman Pengingat Gigi Sehat

Pada menu video yang akan ditampilkan adalah sebuah video pembelajaran gigi. Video ini dapat ditampilkan dengan orientasi portrait maupun landscape. Rancangan halaman video dapat dilihat pada gambar 4.20 berikut.

Gambar 4.20 Rancangan Halaman Video

Pada menu keluar, yang akan ditampilkan ketika user mengklik menu tersebut adalah dialog box peringatan yang meminta pengguna untuk memilih apakah benar-benar akan keluar aplikasi atau tidak. Jika pengguna memilih “Ya” maka aplikasi akan keluar, dan jika pengguna memilih tidak aplikasi akan kembali ke menu utama. Rancangan dialog box keluar dapat dilihat pada gambar 4.21 berikut

46

Pada menu tentang, yang akan ditampilkan adalah dialog box yang berisi tentang informasi aplikasi. Pada dialog box tersebut terdapat logo aplikasi, tahun pembuatan aplikasi, nama pembuat aplikasi, dan nama pembuat video yang terdapat pada fitur aplikasi. Rancangan dialog box tentang dapat dilihat pada gambar 4.22 berikut

Gambar 4.22 Rancangan Halaman Dialog Box Tentang

Pada menu bantuan, yang akan ditampilkan adalah halaman bantuan yang berisi tentang cara penggunaan aplikasi. Pada halaman ini terdapat tampilan icon bantuan, icon masing-masing tombol menu pada aplikasi, dan text detail informasi penggunaan menu pada aplikasi. Rancangan halaman bantuan dapat dilihat pada gambar 4.23 berikut.

Gambar 4.23 Rancangan Halaman Bantuan

4.2.4 Perancangan Simbol

Perancangan simbol digunakan untuk memberikan gambaran tentang berbagai macam bentuk simbol yang mewakili masing-masing fungsi menu pada aplikasi. Rancangan simbol yang terdapat pada aplikasi dapat dilihat pada tabel dibawah ini.

No Simbol Keterangan

1 Simbol perawatan gigi yang

mewakili menu Perawatan Gigi.

48

Tabel 4.1 Perancangan Simbol (lanjutan)

2 Simbol struktur dan fungsi

gigi yang mewakili menu Struktur Fungsi Gigi.

3 Simbol pengingat gigi sehat

yang mewakili menu Pengingat Gigi Sehat.

4 Simbol tips gigi sehat yang

mewakili menu Tips Gigi Sehat.

5 Simbol video yang mewakili

menu Video.

6 Simbol keluar yang

mewakili menu Keluar.

7 Simbol bantuan yang

mewakili menu Bantuan.

8 Simbol tentang yang

mewakili menu Tentang.

4.2.5 Perancangan Video

Video yang terdapat dalam aplikasi dirancang dan dibangun oleh Maya Angela, mahasiswi Fakultas Kedokteran Gigi UGM. Video ini disusun menggunakan teknologi VideoScribe.

4.2.6 Perancangan Audio Narasi

Audio narasi yang terdapat pada aplikasi, dirancang dan dibangun oleh penulis. Audio narasi ini disisipkan pada halaman detail informasi periksa gigi, sikat gigi, struktur gigi, fungsi gigi, tips memilih sikat gigi, tips memilih pasta gigi, tips makanan yang baik untuk gigi, tips makanan yang tidak baik untuk gigi, dan halaman tips waktu yang tepat untuk sikat gigi.

Pada masing-masing halaman tersebut, disediakan 3 tombol media player yang masing-masing berfungsi untuk memainkan audio narasi, menjeda audio narasi, dan menghentikan audio narasi.

Proses perekaman suara dan pengeditan background music dibantu dengan software Audacity.