Bill Tracking System

This web application built with Spring Boot enables users to register for a service. The signup page presents a form for the user to fill out with their username, name, surname, email, and password. Upon submission of the form, the application stores the new user in the database and then shows a list of all users on the expenses page. The expenses page shows a dropdown list of users and allows the user to select a specific user and view their expenses. The add expense page shows a list of all users and takes inputs about expense such as expense name, amount, date etc and store expense to the database. It also has a delete button for each expense, allowing the user to remove the expense from the database.

Screens

Register Screen

Accessible from:http://localhost:8080/adduser

Screenshot 2023-09-23 at 15 10 53

The form for signing up includes fields for the user to enter their username, name, surname, email, and password. When the user submits the form, it is sent to the server as a POST request to the URL "/signup".

The "adduser" method in the controller receives the form data as an instance of the "User" class, which is annotated with "@ModelAttribute". This means that the form data should be mapped to the fields of the "User" object. The method then calls the "signup" method of the "userServiceImpl" object to store the new user in the MySQL database.

Finally, the method returns the "expenses" view, which is a Thymeleaf template that displays the list of expenses.

Login Screen

Accessible from:http://localhost:8080/ Screenshot 2023-09-23 at 15 11 20

The HTML template has a form that allows the user to enter their username and password. When the form is submitted, it makes a POST request to the "/login" endpoint with the form data as the request body. The form data is bound to a "User" object and passed as an argument to the login method in the controller.

The login method in the controller uses the provided username and password to try to log the user in. It first checks if the given username exists in the database then if it exists it gets the user by the username and checks if the passwords are matched. If the login is successful, it returns the "expenses" page. If the login is not successful, it redirects the user back to the login page by returning "redirect:/".

Expenses Screen

Screenshot 2023-09-23 at 15 11 41

The web page shows a list of users and enables the user to choose one of them to view their expenses. Screenshot 2023-09-23 at 15 11 49

The selected user's expenses are displayed in a table. The user can also add new expenses or delete existing ones from this page. The Java code has two controllers, one for displaying the expenses page and one for handling requests to select a user and display their expenses. The "expense" method of the first controller is responsible for displaying the expenses page, which includes a form for selecting a user and a table for displaying their expenses. The "selectUser" method of the second controller is responsible for handling requests to select a user and display their expenses. It does this by retrieving the list of all

users and the expenses for the selected user, and adding them to the model to be displayed on the expenses page.

Add Expense Screen

Screenshot 2023-09-23 at 15 11 57

An HTML file provides a form that allows a user to input information about a new expense, such as the name, amount, date, and description. When the user submits the form, the data is sent to the server as a POST request and sent to the "/addexpense" URL. The associated Java code then takes this request and creates a new Expense object using the form data, saving it to the database using the expenseServiceImpl.addExpense() method. If the expense is added successfully, the user is redirected to the "expenses" page. If the addition is unsuccessful, the user is returned to the page for adding an expense.

Project Demonstration

First let’s sign up for Bill Tracking application. Screenshot 2023-09-23 at 15 12 07

As it can be seen It successfully writes to the database. Screenshot 2023-09-23 at 15 12 15

After user information is written to the database, it redirects to the expenses page. Screenshot 2023-09-23 at 15 12 23 Screenshot 2023-09-23 at 15 12 35

Login panel also redirects to the expenses page after successful authentication.

Let’s add an expense by clicking the “Add Expense” button. Screenshot 2023-09-23 at 15 12 42 Screenshot 2023-09-23 at 15 12 49 Screenshot 2023-09-23 at 15 13 00

As it can be seen, it successfully writes into the database. Screenshot 2023-09-23 at 15 13 09

Also it is possible to delete expenses from the expense list. Screenshot 2023-09-23 at 15 13 17 Screenshot 2023-09-23 at 15 13 28

When we check the database, It can be seen that the operation is successful.