BAB IV PERANCANGAN SISTEM 4.1 Use Case Diagram Use Case Diagram merupakan gambaran secara singkat fungsi-fungsi sistem yang akan diterapkan serta cara menggunakan sistem pada aplikasi ini. Pengguna aplikasi ini adalah admin dan konsumen. Berikut gambaran singkat tentang rancangan aplikasi ini. Daftar Akun Login Input database Aplikasi Admin Konsumen Konfirmasi pemesanan Gambar 5. Use Case Diagram 25
26 4.2 Activity Diagram Activity Diagram adalah gambaran dari aliran aktifitas sistem yang akan dirancang dari awal sampai akhir. Pada perancangan sistem ini terdapat 2 elemen yang terlibat, yaitu Admin dan Konsumen. Admin bertugas meng-input data ke dalam aplikasi dan meng-update apliksi serta melayani konsumen yang melakukan proses transaksi pisang. Sedangkan konsumen bertugas sebagai pengguna aplikasi untuk bertransaksi pisang. Berikut gambaran sistem informasi manajemen yang akan dirancang.
27 Sistem Informasi Manajemen Kampung Cau Padjadjaran Admin Sistem Konsumen Login Verifikasi Email yang Valid dan Password Daftar Akun Verifikasi berhasil Verifikasi gagal Verifikasi Email yang Valid dan Password Login Masukan Akun Login berhasil Username dan Password salah Login gagal Beranda Masuk ke Firebase Input Data Profil KCP Tas Database Firebase Masukan Data Order Konfirmasi Melalui Email Email Konsumen Menerima Pembayaran Melakukan Pembayaran Selesai Gambar 6. Activity Diagram Sistem Informasi Manajemen Kampung Cau Padjadjaran
28 4.3 Entity Relationship Diagram (ERD) Entity Relationship Diagram adalah model yang menjelaskan tentang hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. Dalam ERD memiliki komponen penyusun, yaitu entitas dan atribut. Berikut Entity Relationship Diagram Aplikasi My Banana. Surat No Rekening Waktu Pembayaran Barang Dikirim Verifikasi dan Transaksi Bukti Memberikan via Email Email Password Email Password User Memiliki Beranda Database Admin Foto KCP Profil KCP Memiliki Tas Hasil Order Nama Nama KCP Jumlah Pengertian KCP Visi KCP Misi KCP Motto KCP Foto Nama Harga Karakteristik Memiliki Turunan Order Nama Pemesan Alamat Pemesan No Hp Pemesan Email Pemesan Gambar 7. Entity Relationship Diagram Aplikasi My Banana Berdasarkan diagram diatas, entitas merupakan komponen yang disusun oleh berbagai atribut. Atribut merupakan komponen-komponen kecil/komponen pendukung agar terbentuknya suatu entitas yang memiliki hubungan relasi dengan entitas lainnya. Entitas dapat digambarkan dengan simbol persegi panjang, atribut digambarkan dengan simbol ellips, sedangkan relasi digambarkan dengan simbol belah ketupat (Sutanta, 2011).
29 4.4 Model Perancangan Antar Muka (User Interface) Perancangan sistem informasi dan manajemen dibuat untuk KCP yaitu perancangan awal antar muka (user interface). Perancangan ini sebagai gambaran perancangan sistem yang akan dibangun pada aplikasi. Proses pembuatan model perancangan ini menggunakan Adobe XD. 1. Tampilan Login Gambar 8. Tampilan Login Tampilan ini menjelaskan perancangan tampilan login pada aplikasi My Banana. perancangan ini merupakan tampilan pertama yang ditujukan untuk konsumen sebelum masuk ke tampilan isi/utama dari aplikasi tersebut. Konsumen harus memiliki username dan password yang valid agar dapat mengakses aplikasi dengan lancar.
30 2. Tampilan Sign Up Gambar 9. Tampilan Sign Up Tampilan ini menjelaskan untuk konsumen diwajibkan memiliki akun yang bertujuan untuk mempermudah penggunaan aplikasi serta transaksi pisang di KCP. 3. Tampilan Home Aplikasi Gambar 10. Tampilan Home Aplikasi Tampilan ini menjelaskan tampilan aplikasi setelah berhasil pada laman login serta tampilan home yang berisi profil singkat tentang KCP, Jenis Pisang, dan Pisang.
31 4. Tampilan Jenis Pisang Gambar 11. Tampilan Jenis Pisang Tampilan ini menjelaskan ketika konsumen memilih jenis pisang yang ingin diakses, maka aplikasi menampilkan seperti gambar diatas. Tampilan ini berisi nama pisang, karakteristik pisang, produk turunan pisang, harga pisang ter-update, dan kapasitas pisang yang tersedia di aplikasi. Tampilan ini berguna untuk mempermudah konsumen dalam memilih pisang yang akan dibeli. 5. Tampilan Pisang Gambar 12. Tampilan Pisang
32 Tampilan ini menjelaskan tentang pemesanan pisang melalui aplikasi. Pada laman ini berisi tentang data diri konsumen yang bertujuan untuk memudahkan admin/pihak KCP untuk memproses transaksi pembelian pisang. 6. Tampilan Info Pembayaran Gambar 13. Tampilan Info Pembayaran Tampilan ini menjelaskan tentang data pemesan dan pisang yang dipesan, nomor rekening a/n Kampung Cau Padjadjaran, waktu pembayaran bertujuan agar transaksi penjualan dan pembelian pisang segera di proses.