~ 1 ~  

PORTFOLIOThis project plans to put our spending in an order in framework of a program. We create categories 

and wallets to categorize our spending. I am going to mention to all parts of our program end explain 

all of their futures with this brief description and I’ll support my description with screenshots. 

1‐MainPage:This page is our first welcome page, that’s main page of project.  

 

As you can see on the screenshot in main page of our application there are “Hello” which related link 

to our main page, “Login” which is being used for user and admin login; and “Register” which creates 

a new user. Let’s briefly describe these fields 

a) Login:This field is being used for either admin user and normal user. On main page everything is in 

common with admin user and normal users. But as we will see later, some fields will be changed for 

these two categorizes of admin user and normal user. 

 

As I showed in the picture, we are logging as admin user. After this step we will be welcomed with 

another interface which belongs to only admin user.  

~ 2 ~  

 

After a successful login into system the screen above will welcome us. Now a different interface and 

different fields welcome us.  As you see in this picture there are two different fields: Logout sie and 

Admin Panel. The “Logout” field does the same task for admin user and normal users. But the admin 

panel belongs to only admin user. Now let’s briefly mention to the Admin Panel. After clicking on 

“Admin Panel” field the screen which showed below will welcome us: 

 

In this screen we can see all users that registered to our application. In “Login” field you can see 

users’ names and in “Zablokowany” field status of users is being shown. Admin user can block any 

user s/he wants. For instance 

~ 3 ~  

 

As you see the admin user has blocked me, of course that I’ll see the admin anyhow and I’ll ask 

account about blocking me  But the admin should not scare about this because he still has a 

chance to unblock me through pressing on “unblock”.  

 

Fortunately the admin pressed on “unblock” and now I’ve connection on this application. We’ve 

solved our problem with admin  

 

 

~ 4 ~  

b) Register:After describing admin login, now we are going to create a new user. This user will have normal user 

privileges, that’s new user will have no the same privileges with admin user. 

 

Required Fields (Obligatory) 

Login: This field represents new user’s user name 

Password: This field represents new user’s password 

Retype Password: the same field with password field. If you will type here a different entry from 

password field you’ll get an error that the values placed in both of these fields don’t match and it will 

force you to put the same values in both of these fields. If not you’ll not be able to create a new user 

Email: This field represents new users e‐mail 

Repeat Email: this field is the same with email field and as I mentioned on password and Retype 

password fields both of these fields do the same tasks. That’s if you leave one field blank or type a 

different entry you’ll get an error and it is impossible to create a new user without correcting it. 

 

~ 5 ~  

 

 

 

Not Required Fields (Optional): I’ll briefly mention to these fields by only describing that what do they mean Name:  new user’s name 

Surname: new user’s surname 

Plec: new user’s gender 

Date of Birth: new user’s date of birth 

City: new user’s city 

Street: new user’s street 

Zip Code: new user’s address zip code 

 

 Look at the picture above to see how to create a new user. 

~ 6 ~  

 

      After registration and creating new user you’ll get an  e‐mail that inform you that with that e‐mail 

address a user account has been created in application and you will be redirected to the new user 

welcome page that verify that new user account creation has successfully done. 

E‐mail : 

 

  

 

Verify Screen: 

 

After registration process we can now login to the application as a new user. 

 

 

 

 

 

~ 7 ~  

2)NormalUserLoginandNormalUserScreen 

a) NormalUserLogin: 

 

As I mentioned before, this screen is in common with admin user and normal user because there is 

no any user logged in yet. After this step our application will be categorized into two categories 

which consist of screens for admin user and screens for normal users. After logging in to application 

as a normal user, the screen below will welcome us 

 

 

~ 8 ~  

As you see in a normal user’s interface, there are two different values: Categories and Wallets. Now 

we are going to focus on both of these fields. Because after this step our aim is not administrate the 

application but using application. As a normal user we will use this application in order to put in an 

order our spending. Let’s describe both of these fields with their details 

b) Categories:

 

In this screen you can see all created categories. We can either add a new category and delete an 

existing category in this screen. 

To create a new category, just fill up the field under Add Category and press on “Add Category” field. 

After pressing on the add category button you will see that new category has been added to the 

your categorise list 

To delete a new category, just click on “Delete category” which represent the category that you 

want to delete.  

 

As you s

Add cate

c) Now we

now we 

see after we 

egory button

Wallets:e are about m

are ready to

type into tha

n, it has been

mention to m

o present ou

at field a new

n listed in Yo

most sore poi

r spending to

~ 9 ~

w category w

our Categorie

int of our ap

o the applica

which named

es List 

plication. Af

ation to keep

d as “Clubs” a

ter creating 

p our spendin

and after clic

user and cat

ng record. 

 

cking on 

tegories 

 

~ 10 ~  

As you in above screenshot there is no any wallet in our application. We are going to create a new 

wallet.  

To create a new wallet just click on “Add” link 

 

After you’ve clicked on the “Add” link you’ll be welcomed by the screen above. You can define under 

which category you want to drive your processes. For instance, I’ve chosen “Dom” category and 

under this category I’ve created a wallet which named as “sth” and I’ve added a short description of 

wallet. After filling up all fields by clicking “Create” button you’ll be created your wallet. 

 

 

Now we

wallets j

existing 

wallet. If

arrange.

link you’

 

Actions:

on this f

values a

radiobut

values th

format, 

 

e’ve either cr

just click on 

wallet you c

f you want t

. For instanc

’ll be redirec

:  

field by choo

nd you desc

tton by click

hat you’ve ty

then you can

reated a new

“Add” link an

can use “Rem

o arrange an

e, there is on

cted to the sc

osing any rad

ribe that how

ing on “gene

yped into ap

n use “Gene

w wallet and 

nd repeat th

move Wallet”

n existing wa

ne wallet wh

creen which 

iobutton am

w to show va

erate chart” t

plication. If y

rate PDF” bu

~ 11 ~added it to o

he same prev

” link. By clic

allet just click

hich named a

showed belo

mong position

alues on the 

the applicati

you want to 

utton. 

our wallet lis

vious process

king this link

k the wallet’s

as “sth” in ou

ow: 

ns and days y

application.

ion will gene

generate th

t. If you wan

ses. Or if you

k you’ll be re

s name whic

ur wallet list.

you describe

 After you ch

erate a chart 

e output of y

nt to add mo

u want to de

emoved an ex

h you want t

. By clicking o

e spending c

hoose any 

for your spe

your spendin

ore 

lete an 

xisting 

to 

on “sth” 

 

hart’s 

ending 

ng in pdf 

~ 12 ~  

 

New Position: 

Category: it is the category name that you’ve choses it just one step previous  

Description: you can briefly describe your spending 

Value: this field represents amount of your spending 

Date:  you can select date from calendar 

After you fill up all fields by clicking on “Add Position” you’ll be added a new position to your 

application 

 

Details: as you see after you click on “Add Position” button, your new position is being added to the 

positions list. And in this list you can see “Details” and “Remove Position”. By clicking on “Remove 

Position” you’ll be deleted the related position. But after you clicking on the “Details” link you will be 

welcomed by the screen below: 

  

 

 

 

 

 

 

 

 

 

 

 

~ 13 ~  

As I mentioned before, if we want to generate a chart we would click on “Generate chart”, after 

clicking on generate chart, the application will generate a chart of our spending as shown below: 

 There was “generate pdf” link also after clicking on that link, the application will generate a pdf file 

which involves this chart. You can also save it to your own computer.