Design Document

punyabujet (personal finanace web app) ver 1.0

by Afdhal Yaned

2021
 Design Document Punyabujet - Personal Finance Web App

2021-08-03 doc version 1.0 dokumen inisial

Daftar Isi
Daftar Isi 1

Intro 3

Fitur Sistem 3
Register 3
Login 3
Transaction 3
Category 3
Account (Wallet) 3
Budget 3
Report 4
Collaborator 4
Logout 4

Workflow 4
Register, Login, Logout 4
Mengatur Transaksi 5
Mengatur Kategori 6
Mengatur Dompet 7
Mengatur Bujet 9
Mengatur kolaborator 10

Sitemap 10

Wireframe 12
Register dan Login 12
Mengatur Transaksi 13
Mengatur Kategori 13
Mengatur Dompet 14
Mengatur Bujet 14
Mengatur kolaborator 14

Interface 15
Typography 15
Color 15

Mockup 15

1
 Design Document Punyabujet - Personal Finance Web App

Register dan Login 15

Mengatur Transaksi 16
Mengatur Kategori 16
Mengatur Dompet 16
Mengatur Bujet 17
Mengatur kolaborator 17

Struktur Database 17
Users 17
Teams 18
Transactions 18
Categories 18
Category_sub 19
Wallets 19

Relasi Database 20
User dan Team 20
Team dan Categories 20
Team dan Wallet 20
Wallet dan Transaction 20
Transaction dan Category_sub 21
Category_sub dan Categories 21

Development 21
Platform 21
Bahasa Pemrograman 21
Framework 21
Database Management System 21

Closing 21

Contact 22

2
 Design Document Punyabujet - Personal Finance Web App

1. Intro
Punyabujet adalah opensource personal finance web app yang dibuat berbasis php.
Aplikasi ini membantu mengelola keuangan keluarga yang bisa dikelola bersama
sama.

Berawal dari masalah adanya kebutuhan untuk mengelola keuangan bersama

dengan keluarga.

2. Fitur Sistem
2.1. Register
Untuk register user harus memasukkan data berupa nama, email, dan
password.

2.2. Login
Untuk login, user butuh email dan password. Pada versi ini belum ada fitur
lupa passwordnya. Session dibuat selama mungkin agar user tidak harus
login terus menerus.

2.3. Transaction
User bisa lihat, buat, hapus, dan ubah transaksi. Saat melihat list transaksi,
data yang ditampilkan adalah tanggal, nama transaksi, kategori, dan account
(wallet).

2.4. Category
Kategori ada fitur untuk memetakan transaksi. Sistem memiliki kategori
default saat user baru membuat akun. Tapi user dapat mengatur kategorinya
sendiri untuk disesuaikan dengan kebutuhan.

2.5. Account (Wallet)

Account atau wallet adalah fitur untuk melihat dimana uang user berada.
Apakah cash di dompet, atau di bank. User bisa membuat, melihat,
mengubah, atau menghapus account(wallet).

2.6. Budget
Budget adalah fitur dimana user bisa mengatur alokasi biaya untuk setiap
kategori. User dapat menambah dan mengubah budget untuk setiap akunnya.

3
 Design Document Punyabujet - Personal Finance Web App

2.7. Report
Report adalah fitur dimana user bisa melihat resume dari transaksi selama
sebulan.

2.8. Collaborator
Collaborator adalah fitur dimana user bisa menambahkan akun lainnya untuk
melakukan pengelolaan keuangan. Kedepannya user bisa menambahkan
privilege dari kolaborator. Tapi saat ini user bisa mengakses semua fitur yang
dimiliki user.
Untuk menambahkan kolaborator, user bisa memasukkan email akun yang
ingin diundang.

2.9. Logout
Ini juga fitur basic. Jika user logout, maka user harus login kembali untuk
masuk.

3. Workflow
3.1. Register, Login, Logout

Register, login, dan logout adalah fitur dasar dari sistem autentikasi.

4
 Design Document Punyabujet - Personal Finance Web App

Ketika user melakukan register, user harus memasukkan email dan username
yang belum terdaftar. Jika user mendaftarkan email yang sudah terdaftar
maka proses registrasi akan gagal dan user akan diminta kembali untuk
memasukkan username dan email yang baru.

Jika email belum pernah terdaftar maka sistem akan membuatkan akun baru
dan user akan diarahkan langsung ke halaman dashboard dengan status
sudah login.

Ketika user melakukan login, user harus memasukkan email dan password.
Jika email dan password telah sesuai maka user diarahkan ke halaman
dashboard. Jika username dan password tidak sesuai maka user akan
kembali di arahkan ke halaman login dengan pesan “email dan password
salah”

Ketika sesi sedang berlangsung, user dapat melakukan logout dengan

melakukan klik tombol “logout” pada menu.

3.2. Mengatur Transaksi

Mencatat transaksi keuangan adalah salah satu fitur utama dari sistem
punyabujet. Dari diagram alur diatas, bisa terlihat kalau proses untuk
melakukan pencatatan transaksi cukup mudah.

Untuk membuat transaksi baru, alur yang dilakukan user adalah sebagai
berikut:
● List transaksi sudah terdapat pada halaman dashboard

5
 Design Document Punyabujet - Personal Finance Web App

● Klik tombol tambah transaksi

● Input data transaksi
● Klik tombol simpan

Untuk menghapus transaksi, alur yang dapat dilakukan user adalah sebagai
berikut:
● Klik transaksi yang ingin dihapus
● klik tombol delete
● klik ok untuk konfirmasi penghapusan
● redirect ke halaman dashboard

Untuk mengubah data transaksi, alur yang dapat dilakukan user adalah
sebagai berikut:
● Klik transaksi yang ingin diubah
● Input data transaksi yang baru
● Klik tombol simpan

3.3. Mengatur Kategori

Dari diagram alur diatas dapat terlihat bahwa proses pengaturan kategori
sangat mudah.

Untuk membuat kategori baru, alur yang dilakukan user adalah sebagai
berikut:
● Mulai dari halaman dashboard

6
 Design Document Punyabujet - Personal Finance Web App

● Klik ke menu kategori untuk masuk ke halaman kategori

● Klik tombol tambah transaksi
● Mengisi data kategori yang ingin ditambahkan
● Klik tombol simpan

Untuk menghapus kategori, alur yang dilakukan user adalah sebagai berikut:
● Mulai dari halaman kategori
● Klik item kategori yang ingin dihapus
● Klik tombol hapus
● User akan diarahkan ke halaman konfirmasi penghapusan
● Jika user ingin menghapus maka klik tombol ok
● Jika user ingin membatalkan maka klik tombol cancel

Untuk memperbaharui kategori, alur yang bisa dilakukan user adalah sebagai
berikut:
● Mulai dari halaman kategori
● Klik item kategori yang ingin perbaharui
● Input data kategori yang akan di perbaharui
● Klik tombol simpan

3.4. Mengatur Dompet

Fitur dompet ini sebenarnya mirip dengan kategori. Fitur wallet ini juga
memiliki relasi dengan fitur transaksi. Oleh karena itu jika wallet dihapus
maka transaksi yang ada di wallet tersebut juga hilang.

7
 Design Document Punyabujet - Personal Finance Web App

Untuk membuat dompet baru, alur yang dilakukan user adalah sebagai
berikut:
● Mulai dari halaman dashboard
● Klik ke menu wallet untuk masuk ke halaman wallet
● Klik tombol tambah wallet
● Mengisi nama wallet yang ingin ditambahkan
● Klik tombol simpan

Untuk menghapus wallet, alur yang dilakukan user adalah sebagai berikut:
● Mulai dari halaman wallet
● Klik item wallet yang ingin dihapus
● Klik tombol hapus
● User akan diarahkan ke halaman konfirmasi penghapusan
● Jika user ingin menghapus maka klik tombol ok
● Jika user ingin membatalkan maka klik tombol cancel

Untuk memperbaharui wallet, alur yang bisa dilakukan user adalah sebagai
berikut:
● Mulai dari halaman wallet
● Klik item wallet yang ingin perbaharui
● Input data wallet yang akan di perbaharui
● Klik tombol simpan

8
 Design Document Punyabujet - Personal Finance Web App

3.5. Mengatur Bujet

Fitur bujet ini agak unik karena fitur ini merupakan ekstensi dari fitur bujet.
Artinya untuk menambahkan bujet, user harus memilih kategori terlebih
dahulu.

Untuk menambahkan bujet, alur yang dilakukan adalah sebagai berikut:

● Mulai dari halaman dashboard
● Klik ke menu bujet untuk masuk ke halaman bujet
● list bujet sudah terisi berdasarkan kategori yang sudah diberikan.
● User bisa mengisi bujet dari suatu kategori dengan melakukan klik
pada suatu kategori yang ingin diisi bujetnya.
● User mengisi nominal bujet
● Klik tombol save
● Sistem akan otomatis mengkalkulasi antara anggaran pendapatan
dan pengeluaran apakah defisit atau surplus.

Jika bujet pengeluaran lebih besar dari pendapatan, user bisa mengatur
kembali nominal bujet dari suatu kategori dengan melakukan langkah sebagai
berikut:
● Mulai dari halaman bujet
● Klik item kategori yang bujetnya ingin perbaharui
● Input nominal bujet
● Klik tombol simpan

9
 Design Document Punyabujet - Personal Finance Web App

3.6. Mengatur kolaborator

Fitur kolaborator adalah salah satu fitur yang membedakan sistem

punyabujet dengan sistem yang sudah ada.

User dapat mengundang pangan atau keluarganya untuk dapat mengelola

keuangan bersama.

Untuk dapat mengundang kolaborator, alur yang dilakukan user adalah

sebagai berikut:
● Mulai dari halaman dashboard
● Klik menu kolaborator
● input email kolaborator
● klik save

User dapat menutup akses dari kolaborator tersebut dengan alur sebagai
berikut:
● Mulai dari halaman kolaborator
● klik tombol remove pada kolaborator yang ingin dihapus
● Konfirmasi dengan klik tombol ok

4. Sitemap
Dari flow yang sudah dibuat, sudah mulai terlihat kerangka dari website yang akan
dibuat. Berikut adalah rancangan sitemap dari sistem punyabujet.

10
 Design Document Punyabujet - Personal Finance Web App

Berdasarkan fiturnya, sistem punyabujet terdiri dari 5 menu utama yaitu transaksi,
bujet, wallet, kategori, profil. Dari 5 menu utama tersebut dibutuhkan 33 halaman
untuk memenuhi semua skenario yang ada didalam sistem.

Fitur transaksi diletakkan pada halaman dashboard. Hal ini dilakukan karena
transaksi adalah fitur yang paling sering digunakan user. Kemudahan user untuk
melakukan input transaksi adalah prioritas utama dari sistem yang akan dibuat. Dari
fitur transaksi ini terdapat 4 halaman untuk mendukung fungsi buat transaksi, edit
transaksi, lihat detil transaksi, dan hapus transaksi.
Pengaturan bujet adalah fitur yang paling sering digunakan kedua setelah fitur
pencatatan transaksi. Asumsinya pengaturan bujet dilakukan secara berkala
berdasarkan laporan dari data transaksi. Dari fitur pengaturan bujet ini terdapat 2
halaman untuk mendukung fungsinya yaitu list bujet dan edit nominal bujet. Tidak
banyak halaman yang dibutuhkan untuk mengelola bujet karena data list bujet
diambil dari kategori transaksi.

Pengelolaan wallet adalah fitur yang secara aktif digunakan user ketika mau mulai
menggunakan sistem pertama kali. Pada fitur ini user mencatat seluruh akun yang
digunakan untuk menyimpan uang dan melakukan pembayaran. Terdapat 4 halaman
untuk mendukung fungsi pengelolaan bujet yaitu list wallet, buat wallet baru, ubah
data wallet, dan hapus wallet.

Pengelolaan Kategori adalah fitur juga aktif digunakan ketika user mau mulai
menggunakan sistem pertama kali. Pada fitur ini user dapat mengkategorikan bujet
dan transaksi sesuai dengan metode yang digunakan. Pengelolaan kategori ini lebih
rumit karena terdapat sub kategori yang menjadi children dari kategori. Terdapat 4

11
 Design Document Punyabujet - Personal Finance Web App

halaman untuk mendukung fungsi pengelolaan kategori yaitu list kategori, detil
kategori, edit kategori, dan hapus kategori.

5. Wireframe
Desain tampilan dari punyabujet dibuat khusus untuk web browser dengan layout
mobile only. Sistem ini ditujukan untuk diakses lebih banyak melalui mobile, oleh
karena itu desain tampilannya fix berupa tampilan mobile dan tidak dipersiapkan
untuk tampilan desktop. Apabila dibuka di desktop, maka layout yang terlihat akan
tetap berupa tampilan mobile.

Web app dari punyabujet ini rencananya akan di develop menggunakan framework
bootstrap. Oleh karena itu layout dan tampilan dari Web App Punyabujet juga dibuat
semirip mungkin dengan library yang ada di bootstrap sehingga akan memudahkan
proses development.

5.1. Register dan Login

Halaman login hanya berisi form untuk login yaitu email dan password. Jika
user belum memiliki akun, user dapat klik link daftar dan akan masuk pada ke
halaman pendaftaran.

Pada halaman pendaftaran user dapat melakukan pendaftaran dengan

memasukkan data email, username, dan password dua kali. User dapat
kembali ke halaman login dengan melakukan klik pada link login.

12
 Design Document Punyabujet - Personal Finance Web App

5.2. Mengatur Transaksi

Data yang ditampilkan pada menu list transaksi adalah tanggal, detil
transaksi, nominal, kategori, dan wallet. Elemen yang digunakan untuk
memisahkan satu transaksi dengan transaksi lain adalah garis. Elemen garis
dipilih agar space yang dibutuhkan untuk memisahkan antar record tidak
terlalu besar.

5.3. Mengatur Kategori

Pada menu kategori, list kategori digabungkan dengan fungsi report transaksi
berdasarkan kategori. Jadi di setiap kategori terdapat nominal yang
menjelaskan total transaksi dari suatu kategori. Font untuk list kategori dibuat
lebih kecil agar dapat memuat lebih banyak data. Struktur layout dari list
kategori terinspirasi dari format laporan keuangan perusahaan. Dimana
children kategori dibuat agak menjorok kedalam.

13
 Design Document Punyabujet - Personal Finance Web App

5.4. Mengatur Dompet

List dompet hanya memuat data nama dompet dan nominal saldo di dompet
tersebut. User dapat menambahkan dompet baru dan mengubah nama dari
dompet yang sudah ada.

5.5. Mengatur Bujet

Bujet adalah fitur dimana user membuat proyeksi keuangannya dalam satu
bulan. Data yang ditampilkan pada list bujet adalah kategori transaksi,
nominal bujet, serta progress bar dari total transaksi yang ada pada kategori
tersebut. Jika transaksi pada suatu kategori melebihi bujet yang sudah di set,
maka progress akan penuh dan user dapat menyadari bahwa transaksi pada
suatu kategori sudah over bujet.

5.6. Mengatur kolaborator

14
 Design Document Punyabujet - Personal Finance Web App

Halaman kolaborator dapat diakses dari menu pada sidebar. Di halaman

kolaborator terdapat form dimana user bisa dapat melakukan input email dari
user yang ingin diundang sebagai kolaborator.

6. Interface
6.1. Typography
Sejujurnya Typography pada design Web App Punyabujet tidak terlalu
dipikirikan. Oleh karena itu font yang digunakan adalah font generik yaitu
Segoe UI.

6.2. Color

Referensi warna collor pallete diambil dari adobe color. Ada 5 jenis warna
yang digunakan untuk tampilan aplikasi Punyabujet. Warna hitam #0D0D0D
adalah warna yang dijadikan untuk warna primer. Warna Biru #26488C
adalah warna sekunder. Warna kuning #F2B705 adalah warna untuk link dan
ornamen yang melambangkan cost. Warna Hijau #1ED960 adalah warna
yang digunakan untuk tombol. dan terakhir warna biru #056CF2 adalah
warna untuk ornamen income.

7. Mockup
7.1. Register dan Login

15
 Design Document Punyabujet - Personal Finance Web App

7.2. Mengatur Transaksi

7.3. Mengatur Kategori

7.4. Mengatur Dompet

16
 Design Document Punyabujet - Personal Finance Web App

7.5. Mengatur Bujet

7.6. Mengatur kolaborator

8. Struktur Database
8.1. Users

Attributes Type

id bigint(20)

username string(255)

email string(255)

password string(255)

team_id bigint(20)

created_at timestamp

updated_at timestamp

17
 Design Document Punyabujet - Personal Finance Web App

8.2. Teams

Attributes Type

id bigint(20)

name string(255)

owner_id bigint(20)

created_at timestamp

updated_at timestamp

8.3. Transactions

Attributes Type

id bigint(20)

team_id bigint(20)

date date

detail string(255)

ammount unsignbiginteger

category_id bigint(20)

wallet_id bigint(20)

created_at timestamp

updated_at timestamp

8.4. Categories

Attributes Type

id bigint(20)

team_id bigint(20)

name string(255)

type integer

18
 Design Document Punyabujet - Personal Finance Web App

created_at timestamp

updated_at timestamp

8.5. Category_sub

Attributes Type

id bigint(20)

category_id bigint(20)

name string(255)

budget bigint(20)

created_at timestamp

updated_at timestamp

8.6. Wallets

Attributes Type

id bigint(20)

name string(255)

team_id bigint(20)

created_at timestamp

updated_at timestamp

19
 Design Document Punyabujet - Personal Finance Web App

9. Relasi Database

9.1. User dan Team

User harus tergabung dalam satu tim. Satu tim bisa terdiri dari beberapa user.
Team harus memiliki satu user yang bertugas sebagai owner.

9.2. Team dan Categories

Setiap categories harus memiliki satu team. Setiap team bisa memiliki banyak
categories atau bisa juga tidak memiliki categories sama sekali.

9.3. Team dan Wallet

Setiap wallet harus memiliki satu team. Setiap team bisa memiliki banyak
wallet atau bisa juga tidak memiliki wallet sama sekali.

9.4. Wallet dan Transaction

Setiap stransaksi harus memiliki satu wallet. Setiap wallet bisa memiliki
banyak transaksi atau tidak memiliki transaksi sama sekali.

20
 Design Document Punyabujet - Personal Finance Web App

9.5. Transaction dan Category_sub

Setiap transaksi harus memiliki satu category_sub. Setiap category_sub bisa
memiliki banyak transaksi atau juga bisa tidak memiliki transaksi sama sekali.

9.6. Category_sub dan Categories

Setiap category_sub harus memiliki categories. Setiap categories bisa
memiliki banyak category_sub atau tidak memiliki category_sub sama sekali.

10. Development
10.1. Platform
Web

10.2. Bahasa Pemrograman

PHP 7.3
Javascript

10.3. Framework
Laravel 8.4
Bootstrap 5.0

10.4. Database Management System

MariaDB - MariaDB adalah sistem manajemen basis data relasional MySQL
yang dikembangkan oleh komunitas dan didukung secara komersial,
dimaksudkan untuk tetap menjadi perangkat lunak sumber terbuka dan gratis
di bawah Lisensi Publik Umum GNU.

11. Closing
11.1. Demo
Untuk mencoba sistem punyabujet bisa langsung diaksesi melalui url berikut.
https://punyabujet.com/login
11.2. Source Code
Source dapat diakses melalui URL berikut.
https://github.com/Afdhalyaned/punyabujet

21
 Design Document Punyabujet - Personal Finance Web App

12. Contact
Jika ada saran, kritik, masukan bisa menguhungi developer di
punyabujet@gmail.com
Instagram: @punyabujet

22