BAB III

DESAIN SISTEM

3.1. Unified Modeling Language (UML)

3.1.1. Use Case

Gambar 3.1. Use Case Diagram Aplikasi Donor Darah

Use case menggambarkan berbagai aktifitas yang dilakukan sistem

dari sudut pandang pengamatan luar atau interaksi antara aktor dan sistem.
Aktor- aktor yang terlibat dalam use case diagram sistem aplikasi donor
darah ada 3, yaitu masyarakat, member PMI dan petugas PMI. Tiap aktor
memiliki interaksi masing-masing terhadap sistem, seperti masyarakat dapat
mencari pendonor, memeriksa ketersediaan stok darah dan melakukan
registrasi akun. Member PMI dapat mengisi formulir, menentukan jadwal
donor darah, mencari pendonor dan memeriksa ketersediaan stok darah.
Petugas PMI dapat mengelola data stok darah, mengelola data member PMI
dan mengelola data petugas. Untuk masuk ke dalam sistem, member PMI
dan petugas PMI harus melakukan login terlebih dahulu agar dapat
mengakses fitur yang terdapat pada aplikasi donor darah.
3.1.2. Class Diagram

Gambar 3.2. Class DiagramAplikasi Donor Darah

3.1.3. Activity Diagram

Gambar 3.3. Activity Diagram Petugas PMI Terhadap Sistem

Pada gambar 3.3 di atas merupakan activity diagram dari petugas PMI
terhadap sistem. Petugas PMI dapat melakukan login, kemudian sistem
akan memvalidasi username dan password, jika benar sistem akan
menampilkan menu mengelola data stok darah, data member PMI, dan data
petugas, jika salah maka akan kembali ke login. Setelah itu petugas PMI
dapat melakukan aktivitas kelola data sesuai yang ditampilkan oleh sistem.
 Gambar 3.4. Activity Diagram Masyarakat dan Member PMI Terhadap
Sistem

Pada gambar 3.4 di atas merupakan activity diagram dari masyarakat

dan member PMI terhadap sistem. Masyarakat dapat mencari pendonor
darah dan memeriksa ketersedian stok darah serta dapat melakukan
registrasi akun untuk mendaftar menjadi member PMI. Member PMI dapat
melakukan login, kemudian sistem akan memvalidasi username dan
password, jika benar sistem akan menampilkan menu formulir, pendonor,
dan stok darah, jika salah maka akan kembali ke login. Setelah itu member
PMI dapat melakukan aktivitas sesuai yang ditampilkan oleh sistem yaitu
mancari pendonor, memeriksa ketersedian stok darah, dan juga melengkapi
 formulir. Setelah itu sistem menampilkan menu jadwal donor darah,
sehingga member PMI dapat menentukan jadwal donor darah. Sistem akan
mengirimkan notifikasi dan member PMI menerima notifikasi tersebut.

3.2. Data Flow Diagram (DFD)

3.2.1. DFD Level 0

Gambar 3.5. Data Flow Diagram Level 0 Aplikasi Donor Darah

3.2.2. DFD Level 1

Gambar 3.6. Data Flow Diagram Level 1 Aplikasi Donor Darah

3.2.3. DFD Level 2

Gambar 3.7. DFD Level 2 Proses Kelola data Petugas PMI.

 Gambar 3.8. DFD Level 2 Proses Kelola data stok darah.

3.2.4. Entity Relationship Diagram (ERD)

Gambar 3.9. ERD Aplikasi Donor Darah

Entity Realitionship Diagram menjelaskan hubungan-hubungan antar

data-data dalam basis data berdasarkan objek-objek dasar data yang memiliki
hubungan yang dihubungkan oleh suatu relasi. Pada ERD Aplikasi Donor
Darah terdapat 4 entitas, yaitu member, jadwal, petugas dan stok darah.
Dari ke 4 entitas tersebut hanya entitas jadwal dan member yang memiliki
relasi, dimana 1 member memiliki 1 jadwal.
3.3. User Interface
3.3.1. Template

(a) (b)
Gambar 3.10. Template (a) Menu Utama dan (b)Side Bar Sebelum Login

(a) (b)
Gambar 3.11. Template (a) Side Bar Setelah Login dan (b) Ganti Password
Gambar 3.12. Template Edit Profil
 (a) (b)
Gambar 3.13. Template (a) Login dan (b) Registrasi

(a) (b)
Gambar 3.14. Template (a) Donor dan (b) Stok Darah
 (a) (b)
Gambar 3.15. Template (a) Cari Pendonor dan (b) Detail Pendonor

3.3.2. Storyboard