SCHOOL OF COMPUTER SCIENCE AND IT
DEPARTMENT OF CS & IT
BCA PROGRAMME
SUBJECT NAME : WEB TECHNOLOGY
SUBJECT CODE : 22BCA6C02
SEMESTER : 6th
ACTIVITY-2
DAILY EXPENSE TRACKER
Date of Submission:
Submitted by:
SYED ARSALAN – 22BCAR0503
MD SAFWAN SHARIEFF – 22BCAR0075
1
CERTIFICATE
This is to certify that Syed arsalan, MD Safwan sharieff satisfactorily completed
activity-2 prescribed by JAIN (Deemed to be University) for the 6th Semester degree
course in the year 2024-2025.
Problem
Implementation
S. No. Student Statement Demo & Viva Total Marks
USN No. Name & Result
(Abstract)
5 Marks 5 Marks 5 Marks 15 Marks
1. Syed arsalan 22BCAR0503
2. Md Safwan 22BCAR0075
sharieff
3.
4.
5.
Signature of the staff member
2
INDEX
S.no Topic Page No
List of Figures 4
Abstract 5
1 Introduction 6-7
2 Analysis 8-9
3 System Design 10-11
4 Implementation 12-20
5 Result 21-27
6 Conclusion 28
7 References 29
4
Table of Figures
S.no Titles Page No
1 FLOWCHART 10
2 ER DIAGRAM 11
3 LOGIN PAGE 21
4 DASHBOARD PAGE 22
5 EXPENSE PAGE 23
6 MANAGE EXPENSE 24
7 EXPENSE REPORT 25
8 PROFILE 26
9 CHANGE PASSWORD 27
5
Abstract
Managing personal expenses effectively is crucial for financial stability, but
traditional methods like handwritten records and spreadsheets are inefficient
and prone to errors. The Daily Expense Tracker is a web-based solution
designed to simplify expense management by allowing users to log, categorize,
and analyze their financial transactions. Built using HTML, CSS, JavaScript,
Bootstrap, PHP, and MySQL, the system provides a secure and user-friendly
platform for tracking expenses efficiently.
Key Features:
Secure User Authentication – Ensures only authorized users can access their
financial records.
Expense Logging & Categorization – Users can add, edit, and delete expense
entries based on categories.
Report Generation – Provides daily, monthly, and yearly insights into spending
habits.
User Profile Management – Allows users to update their details and change
passwords for security.
Responsive & Interactive Interface – Built using Bootstrap for seamless user
experience across devices.
This project serves as a practical financial management tool, offering
structured tracking, report generation, and secure data storage. Future
improvements may include mobile app integration, AI-driven financial
insights, and cloud backup solutions to further enhance usability and
efficiency.
Introduction
Managing personal finances is an essential aspect of everyday life. Many
people struggle with keeping track of their expenses, which often leads to
overspending and financial mismanagement. Traditional methods such as
maintaining a physical ledger, using spreadsheets, or relying on memory are
time-consuming and prone to errors. To address these challenges, we have
developed a Daily Expense Tracker, a web-based application that allows users
to record, categorize, and analyze their expenses efficiently.
The Daily Expense Tracker is designed to simplify financial management by
providing a structured way to log expenses and generate reports. With an
easy-to-use interface, users can enter their daily transactions, manage past
expenses, and review spending patterns over different time frames (daily,
monthly, and yearly). The system ensures data security by implementing a
login feature, allowing only registered users to access their financial records.
This project is built using HTML, CSS, JavaScript, Bootstrap, PHP, and
MySQL, ensuring a dynamic and responsive web application.
The system allows users to:
* Register and log in securely
* Add and categorize expenses
* View and manage past expenses
* Generate detailed expense reports
* Update profile information
* Change passwords for security
This report details the analysis, design, implementation, and results of the
Daily Expense Tracker system. The study begins with an analysis of existing
financial tracking methods, identifying their limitations, and proposing an
improved system. It then covers the technical aspects, including data flow
diagrams, ER diagrams, sample codes, and screenshots to showcase the
system's functionalities.
With the growing importance of digital solutions for personal finance
management, this system aims to offer an efficient, user-friendly, and secure
platform for tracking expenses. The following chapters provide an in-depth
exploration of the system’s features, implementation process, and results.
Analysis
Existing System
In the past, individuals relied on manual methods such as maintaining
handwritten records in diaries, ledgers, or notebooks to track expenses.
Others used digital alternatives like Excel spreadsheets or note-taking
applications. While these methods serve basic financial tracking needs, they
come with significant limitations:
Prone to Errors: Manual calculations can result in mistakes.
Time-Consuming: Entering and updating data takes time.
Lack of Automation: No automatic expense categorization or insights.
No Security Features: Financial data is vulnerable to unauthorized access.
Some people use mobile apps like Google Sheets or banking apps that track
expenses based on transactions. However, these solutions often require
manual entry, lack customization, or have
privacy concerns.
Proposed System
To overcome these limitations, we propose a web-based Daily Expense
Tracker, which provides an efficient, organized, and user-friendly method of
tracking expenses. The system includes:
Automated Expense Tracking: Users can log expenses with relevant details
such as amount, category, and date.
Report Generation: Generates daily, monthly, and yearly reports for financial
insights.
1. Security: Users must log in to access their records, ensuring privacy.
2. User-Friendly Interface: Simple navigation for adding and managing
expenses.
3. Cloud Storage: Data is stored securely in a MySQL database, preventing
loss.
Software Used
* Frontend: HTML, CSS, JavaScript, Bootstrap (for styling and responsiveness)
* Backend: PHP (to handle user interactions and database queries)
* Database: MySQL (to store and retrieve expense records)
Problem Statement
Tracking daily expenses is a crucial but often neglected task. Many
individuals struggle with managing their finances effectively due to lack of a
structured system. The Daily Expense Tracker aims to resolve this issue by
providing an automated, secure, and user-friendly platform to record,
manage, and analyze financial transactions, helping users gain better control
over their expenses.
Design
Data Flow Diagram (DFD)
The Data Flow Diagram (DFD) represents how data moves within the system.
The key components include:
1. User Input: The user logs in and adds expenses.
2. Processing: The system processes the data and updates the database.
3. Database Storage: MySQL stores expense details securely.
4. Report Generation: The system fetches relevant expense data for
reports.
Figure 1.1
Entity-Relationship (ER) Diagram
The ER diagram defines the database structure and relationships between
entities. The main entities include:
1. Users: Stores user details (ID, name, email, password).
2. Expenses: Stores transaction details (ID, amount, category, date, user
ID).
Figure 1.2
Implementation
SAMPLE CODE -
<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
if (strlen($_SESSION['detsuid']==0)) {
header('location:logout.php');
} else{
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daily Expense Tracker || Datewise Expense Report</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!--Custom Font-->
<link
href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,
500,500i,600,600i,700,700i" rel="stylesheet">
</head>
<body>
<?php include_once('includes/header.php');?>
<?php include_once('includes/sidebar.php');?>
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><a href="#">
<em class="fa fa-home"></em>
</a></li>
<li class="active">Datewise Expense Report</li>
</ol>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Datewise Expense Report</div>
<div class="panel-body">
<div class="col-md-12">
<?php
$fdate=$_POST['fromdate'];
$tdate=$_POST['todate'];
$rtype=$_POST['requesttype'];
?>
<h5 align="center" style="color:blue">Datewise Expense Report from <?php
echo $fdate?> to <?php echo $tdate?></h5>
<hr />
<table id="datatable" class="table table-bordered dt-
responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width:
100%;">
<thead>
<tr>
<tr>
<th>S.NO</th>
<th>Date</th>
<th>Expense Amount</th>
</tr>
</tr>
</thead>
<?php
$userid=$_SESSION['detsuid'];
$ret=mysqli_query($con,"SELECT ExpenseDate,SUM(ExpenseCost) as
totaldaily FROM `tblexpense` where (ExpenseDate BETWEEN '$fdate' and
'$tdate') && (UserId='$userid') group by ExpenseDate");
$cnt=1;
while ($row=mysqli_fetch_array($ret))
<tr>
<td><?php echo $cnt;?></td>
<td><?php echo $row['ExpenseDate'];?></td>
<td><?php echo $ttlsl=$row['totaldaily'];?></td>
</tr>
<?php
$totalsexp+=$ttlsl;
$cnt=$cnt+1;
}?>
<tr>
<th colspan="2" style="text-align:center">Grand Total</th>
<td><?php echo $totalsexp;?></td>
</tr>
</table>
</div>
</div>
</div><!-- /.panel-->
</div><!-- /.col-->
<?php include_once('includes/footer.php');?>
</div><!-- /.row -->
</div><!--/.main-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chart.min.js"></script>
<script src="js/chart-data.js"></script>
<script src="js/easypiechart.js"></script>
<script src="js/easypiechart-data.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
<?php } ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daily Expense Tracker - Dashboard</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Custom Font -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,7
00" rel="stylesheet">
</head>
<body>
<?php include_once('includes/header.php'); ?>
<?php include_once('includes/sidebar.php'); ?>
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><a href="#"><em class="fa fa-home"></em></a></li>
<li class="active">Dashboard</li>
</ol>
</div>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<?php
$userid = $_SESSION['detsuid'];
$tdate = date('Y-m-d');
$query = mysqli_query($con, "SELECT SUM(ExpenseCost) AS
todaysexpense FROM tblexpense WHERE ExpenseDate='$tdate' AND
UserId='$userid'");
$result = mysqli_fetch_array($query);
$sum_today_expense = $result['todaysexpense'];
?>
<h4>Today's Expense</h4>
<div class="easypiechart" id="easypiechart-blue" data-
percent="<?php echo $sum_today_expense ?: 0; ?>">
<span class="percent"><?php echo $sum_today_expense ?:
0; ?></span>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<?php
$ydate = date('Y-m-d', strtotime("-1 days"));
$query1 = mysqli_query($con, "SELECT SUM(ExpenseCost) AS
yesterdayexpense FROM tblexpense WHERE ExpenseDate='$ydate' AND
UserId='$userid'");
$result1 = mysqli_fetch_array($query1);
$sum_yesterday_expense = $result1['yesterdayexpense'];
?>
<h4>Yesterday's Expense</h4>
<div class="easypiechart" id="easypiechart-orange" data-
percent="<?php echo $sum_yesterday_expense ?: 0; ?>">
<span class="percent"><?php echo
$sum_yesterday_expense ?: 0; ?></span>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<?php
$pastdate = date("Y-m-d", strtotime("-1 week"));
$crrntdte = date("Y-m-d");
$query2 = mysqli_query($con, "SELECT SUM(ExpenseCost) AS
weeklyexpense FROM tblexpense WHERE ExpenseDate BETWEEN '$pastdate'
AND '$crrntdte' AND UserId='$userid'");
$result2 = mysqli_fetch_array($query2);
$sum_weekly_expense = $result2['weeklyexpense'];
?>
<h4>Last 7 Days' Expense</h4>
<div class="easypiechart" id="easypiechart-teal" data-
percent="<?php echo $sum_weekly_expense ?: 0; ?>">
<span class="percent"><?php echo $sum_weekly_expense ?:
0; ?></span>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<?php
$monthdate = date("Y-m-d", strtotime("-1 month"));
$query3 = mysqli_query($con, "SELECT SUM(ExpenseCost) AS
monthlyexpense FROM tblexpense WHERE ExpenseDate BETWEEN
'$monthdate' AND '$crrntdte' AND UserId='$userid'");
$result3 = mysqli_fetch_array($query3);
$sum_monthly_expense = $result3['monthlyexpense'];
?>
<h4>Last 30 Days' Expenses</h4>
<div class="easypiechart" id="easypiechart-red" data-
percent="<?php echo $sum_monthly_expense ?: 0; ?>">
<span class="percent"><?php echo $sum_monthly_expense
?: 0; ?></span>
</div>
</div>
</div>
</div>
</div>
<!-- Yearly and Total Expenses -->
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<?php
$cyear = date("Y");
$query4 = mysqli_query($con, "SELECT SUM(ExpenseCost) AS
yearlyexpense FROM tblexpense WHERE YEAR(ExpenseDate)='$cyear' AND
UserId='$userid'");
$result4 = mysqli_fetch_array($query4);
$sum_yearly_expense = $result4['yearlyexpense'];
?>
<h4>Current Year Expenses</h4>
<div class="easypiechart" id="easypiechart-red" data-
percent="<?php echo $sum_yearly_expense ?: 0; ?>">
<span class="percent"><?php echo $sum_yearly_expense ?:
0; ?></span>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body easypiechart-panel">
<?php
$query5 = mysqli_query($con, "SELECT SUM(ExpenseCost) AS
totalexpense FROM tblexpense WHERE UserId='$userid'");
$result5 = mysqli_fetch_array($query5);
$sum_total_expense = $result5['totalexpense'];
?>
<h4>Total Expenses</h4>
<div class="easypiechart" id="easypiechart-green" data-
percent="<?php echo $sum_total_expense ?: 0; ?>">
<span class="percent"><?php echo $sum_total_expense ?:
0; ?></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Results
Login Page - The login page verifies user credentials before granting access.
Users must enter their email and password, which are validated against the
database. Incorrect credentials result in an error message. This ensures
secure access to financial records.
Figure 2.1
Dashboard
The dashboard provides an overview of total expenses, categorized spending,
and quick navigation options for adding expenses and generating reports. It
serves as the central hub for users.
Figure 2.2
Expense - Add Expenses
Users can log daily expenses by entering the amount, category, and date. The
system then stores the data securely in the database for future reference.
Figure 2.3
Manage Expense
This section allows users to edit or delete past transactions. Expense records
are displayed in a tabular format, making it easy to manage them.
Figure 2.4
Expense Report - Daily / Monthly / Yearly
Users can generate reports for analyzing spending trends over different time
periods. This helps in budgeting and financial planning.
Figure 2.5
Profile
Users can update personal details, including name and contact information.
This ensures accurate record-keeping.
Figure 2.6
Change Password
For security, users can update their passwords. The system verifies the old
password before allowing changes, preventing unauthorized modifications.
Figure 2.7
Conclusion
The Daily Expense Tracker successfully provides an efficient, secure, and
automated way for users to manage their expenses. By allowing users to
track, categorize, and analyze their spending, the system helps in better
financial decision-making. The web-based solution eliminates the need for
manual record-keeping, reducing errors and improving efficiency in personal
finance management.
Future enhancements could include:
1. AI-Based Insights: Automated spending analysis and budgeting
recommendations.
2. Mobile App Integration: Expanding access to smartphones.
3. Cloud Backup: Ensuring data security and accessibility.
4. Multi-Currency Support: Allowing users to track expenses in different
currencies for better international usability.
5. Bill Reminders & Notifications: Alerting users about upcoming bills
and due payments.
6. Graphical Data Representation: Interactive charts and graphs to
visually analyze spending trends.
7. Voice Input Feature: Enabling users to add expenses through voice
commands for convenience.
With the increasing reliance on digital financial tools, this project serves as a
foundation for a more comprehensive and intelligent expense management
system. By incorporating future enhancements, the Daily Expense Tracker
can evolve into a robust financial assistant that helps users achieve better
money management, savings, and financial discipline.
References
1. W3Schools – HTML, CSS, JavaScript, and PHP Tutorials:
https://www.w3schools.com
2. PHP Documentation – Server-side scripting and database interaction:
https://www.php.net/docs.php
3. MySQL Official Documentation – Database concepts and SQL queries:
https://dev.mysql.com/doc/
4. XAMPP – Local server environment for PHP & MySQL:
https://www.apachefriends.org
5. Bootstrap Framework – Frontend styling and responsiveness:
https://getbootstrap.com
6. Stack Overflow – Troubleshooting and coding solutions:
https://stackoverflow.com
