Download Code: PHP and SQLite3 Source Code for Earnings and Expense Tracker App

Projects Inventory

8 months ago

Download Code PHP and SQLite3 Source Code for Earnings and Expense Tracker App

Earnings and Expense Tracker Application: PHP and SQLite3 Project

This simple PHP project is called the Earnings and Expense Tracker Application

. It is a web-based tool that allows multiple users to manage and track their earnings and expenses. The application is primarily built using PHP and SQLite3, and it features an easy-to-use interface created with the Bootstrap v5 framework.

How the Earnings and Expense Tracker App Works

The app is designed to provide users with a platform to manage their finances. Here’s how it works:

Registration and Approval: Users can register for an account, but they must be approved by the site management before gaining access. Once approved, they can fully access the app’s features.
Starting Balance: Users can set their starting balance when they begin using the app.
Managing Earnings and Expenses: The app allows users to manage and track both their earnings and expenses with CRUD functionalities (Create, Read, Update, Delete). The app also lets users filter records based on dates.
Home Page: On the home page, users can view a summary of their total earnings, expenses, and balance. Each user can only see and manage their own data.

Features and Functionalities

Administrator Features:

Login Form
Home Page
User Management (approve or reject users)
Update User Status and Type
Logout

User Features:

Login Form
Registration Form
Home Page with Financial Overview (Total Earnings, Total Expenses, Current Balance)
Earnings Management (Add, List, Filter, Update, Delete Earnings)
Expenses Management (Add, List, Filter, Update, Delete Expenses)
Wallet Management
Logout

Technologies Used

The app was developed using the following technologies:

XAMPP
VS Code Editor
PHP
SQLite3
HTML
CSS
JavaScript
jQuery
Ajax
Google Icons
Bootstrap v5 Framework

How to Run the App

Requirements:

Install a local web server like XAMPP or WAMP.
Download the source code (provided in a zip file).

Installation/Setup:

Open the php.ini file in XAMPP/WAMP and uncomment the SQLite3 extension, then save the file.

Start Apache in XAMPP/WAMP.
Extract the downloaded zip file.
For XAMPP, move the extracted folder to the htdocs directory; for WAMP, place it in the www directory.
Open the app in your browser by going to: http://localhost/php-sqlite-expense-tracker/.

Default Admin Access:

Username: admin
Password: sourcecodester&123

Conclusion

This Earnings and Expense Tracker App built with PHP and SQLite3 will help you track and manage your earnings and expenses. The app provides an intuitive interface and essential features for both administrators and users. You can download and modify the source code for your own use.

We hope this project proves useful for your current and future web development needs!

index PHP

<?php 
require_once('auth.php');
require_once('DBConnection.php');
$page = $_GET['page'] ?? 'home';
$title = ucwords(str_replace("_", " ", $page));
$_SESSION['formToken']['expense-form'] = password_hash(uniqid(), PASSWORD_DEFAULT);
$_SESSION['formToken']['earning-form'] = password_hash(uniqid(), PASSWORD_DEFAULT);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= ucwords($title) ?> | Expense and Earnings Tracker App</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/custom.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
</head>
<body>
    <main>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
        <div class="container">
            <a class="navbar-brand" href="./">
            Expense and Earnings Tracker App
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <?php if($_SESSION['type'] == 1): ?>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'users')? 'active' : '' ?>" aria-current="page" href="./?page=users">Users</a>
                    </li>
                    <?php else: ?>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'expenses')? 'active' : '' ?>" aria-current="page" href="./?page=expenses">Expenses</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'earnings')? 'active' : '' ?>" aria-current="page" href="./?page=earnings">Earnings</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo ($page == 'wallet')? 'active' : '' ?>" aria-current="page" href="./?page=wallet">Wallet</a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle bg-transparent  text-light border-0" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Hello <?php echo $_SESSION['fullname'] ?>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item" href="./LoginRegistration.php?a=logout">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-md py-3" id="page-container">
        <div class="my-4">
            <?php if(isset($_SESSION['message']['success'])): ?>
                <div class="alert alert-success py-3 rounded-0">
                    <?= $_SESSION['message']['success'] ?>
                </div>
                <?php unset($_SESSION['message']['success']) ?>
            <?php endif; ?>
            <?php if(isset($_SESSION['message']['error'])): ?>
                <div class="alert alert-danger py-3 rounded-0">
                    <?= $_SESSION['message']['error'] ?>
                </div>
                <?php unset($_SESSION['message']['error']) ?>
            <?php endif; ?>
            <?php include($page.".php");  ?>
        </div>
    </div>

    <div class="modal fade" id="expenseModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0">
            <div class="modal-content">
            <div class="modal-header rounded-0">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body rounded-0">
                <div class="container-fluid">
                    <form action="" id="expense-form">
                        <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['expense-form'] ?>">
                        <input type="hidden" name="expense_id" value="">
                        <div class="mb-3">
                            <label for="name">Name</label>
                            <input type="text" class="form-control rounded-0" id="name" name="name" required="required">
                        </div>
                        <div class="mb-3">
                            <label for="amount">Amount</label>
                            <input type="number" step="any" min="0" class="form-control rounded-0 text-end" id="amount" name="amount" required="required" value="0">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary rounded-0" form="expense-form">Save</button>
                <button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="earningModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0">
            <div class="modal-content">
            <div class="modal-header rounded-0">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body rounded-0">
                <div class="container-fluid">
                    <form action="" id="earning-form">
                        <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['earning-form'] ?>">
                        <input type="hidden" name="earning_id" value="">
                        <div class="mb-3">
                            <label for="name">Name</label>
                            <input type="text" class="form-control rounded-0" id="name" name="name" required="required">
                        </div>
                        <div class="mb-3">
                            <label for="amount">Amount</label>
                            <input type="number" step="any" min="0" class="form-control rounded-0 text-end" id="amount" name="amount" required="required" value="0">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary rounded-0" form="earning-form">Save</button>
                <button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $('#expense-form').submit(function(e){
                e.preventDefault();
                $('.pop_msg').remove()
                var _this = $(this)
                var _el = $('<div>')
                    _el.addClass('pop_msg')
                start_loader()
                $.ajax({
                    url:'./Master.php?a=save_expense',
                    method:'POST',
                    data:$(this).serialize(),
                    dataType:'JSON',
                    error:err=>{
                        console.log(err)
                        _el.addClass('alert alert-danger')
                        _el.text("An error occurred.")
                        _this.prepend(_el)
                        _el.show('slow')
                    },
                    success:function(resp){
                        if(resp.status == 'success'){
                            _el.addClass('alert alert-success')
                            location.reload();
                        }else{
                            _el.addClass('alert alert-danger')
                        }
                        _el.text(resp.msg)
                        _el.hide()
                        _this.prepend(_el)
                        _el.show('slow')
                        end_loader()
                    }
                })
            })
            $('#earning-form').submit(function(e){
                e.preventDefault();
                $('.pop_msg').remove()
                var _this = $(this)
                var _el = $('<div>')
                    _el.addClass('pop_msg')
                start_loader()
                $.ajax({
                    url:'./Master.php?a=save_earning',
                    method:'POST',
                    data:$(this).serialize(),
                    dataType:'JSON',
                    error:err=>{
                        console.log(err)
                        _el.addClass('alert alert-danger')
                        _el.text("An error occurred.")
                        _this.prepend(_el)
                        _el.show('slow')
                    },
                    success:function(resp){
                        if(resp.status == 'success'){
                            _el.addClass('alert alert-success')
                            location.reload();
                        }else{
                            _el.addClass('alert alert-danger')
                        }
                        _el.text(resp.msg)
                        _el.hide()
                        _this.prepend(_el)
                        _el.show('slow')
                        end_loader()
                    }
                })
            })
        })
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

<?php

require_once('auth.php');

require_once('DBConnection.php');

$page = $_GET['page'] ?? 'home';

$title = ucwords(str_replace("_", " ", $page));

$_SESSION['formToken']['expense-form'] = password_hash(uniqid(), PASSWORD_DEFAULT);

$_SESSION['formToken']['earning-form'] = password_hash(uniqid(), PASSWORD_DEFAULT);

<!DOCTYPE html>

<head>

<title><?= ucwords($title) ?> | Expense and Earnings Tracker App</title>

</head>

<body>

<main>

Expense and Earnings Tracker App

</a>

</button>

<?php if($_SESSION['type'] == 1): ?>

<a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>

</li>

<a class="nav-link <?php echo ($page == 'users')? 'active' : '' ?>" aria-current="page" href="./?page=users">Users</a>

</li>

<?php else: ?>

<a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>

</li>

<a class="nav-link <?php echo ($page == 'expenses')? 'active' : '' ?>" aria-current="page" href="./?page=expenses">Expenses</a>

</li>

<a class="nav-link <?php echo ($page == 'earnings')? 'active' : '' ?>" aria-current="page" href="./?page=earnings">Earnings</a>

</li>

<a class="nav-link <?php echo ($page == 'wallet')? 'active' : '' ?>" aria-current="page" href="./?page=wallet">Wallet</a>

</li>

<?php endif; ?>

</ul>

</div>

Hello <?php echo $_SESSION['fullname'] ?>

</button>

<li><a class="dropdown-item" href="./LoginRegistration.php?a=logout">Logout</a></li>

</ul>

</div>

</nav>

<?php if(isset($_SESSION['message']['success'])): ?>

<?= $_SESSION['message']['success'] ?>

</div>

<?php unset($_SESSION['message']['success']) ?>

<?php endif; ?>

<?php if(isset($_SESSION['message']['error'])): ?>

<?= $_SESSION['message']['error'] ?>

</div>

<?php unset($_SESSION['message']['error']) ?>

<?php endif; ?>

<?php include($page.".php"); ?>

</div>

</div>

</div>

<label for="amount">Amount</label>

</div>

</form>

</div>

<button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>

</div>

</div>

</div>

<label for="amount">Amount</label>

</div>

</form>

</div>

<button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button>

</div>

$(function(){

$('#expense-form').submit(function(e){

e.preventDefault();

$('.pop_msg').remove()

var _this = $(this)

var _el = $('<div>')

_el.addClass('pop_msg')

start_loader()

$.ajax({

url:'./Master.php?a=save_expense',

method:'POST',

data:$(this).serialize(),

dataType:'JSON',

error:err=>{

console.log(err)

_el.addClass('alert alert-danger')

_el.text("An error occurred.")

_this.prepend(_el)

_el.show('slow')

success:function(resp){

if(resp.status == 'success'){

_el.addClass('alert alert-success')

location.reload();

}else{

_el.addClass('alert alert-danger')

}

_el.text(resp.msg)

_el.hide()

_this.prepend(_el)

_el.show('slow')

end_loader()

}

})

$('#earning-form').submit(function(e){

e.preventDefault();

$('.pop_msg').remove()

var _this = $(this)

var _el = $('<div>')

_el.addClass('pop_msg')

start_loader()

$.ajax({

url:'./Master.php?a=save_earning',

method:'POST',

data:$(this).serialize(),

dataType:'JSON',

error:err=>{

console.log(err)

_el.addClass('alert alert-danger')

_el.text("An error occurred.")

_this.prepend(_el)

_el.show('slow')

success:function(resp){

if(resp.status == 'success'){

_el.addClass('alert alert-success')

location.reload();

}else{

_el.addClass('alert alert-danger')

}

_el.text(resp.msg)

_el.hide()

_this.prepend(_el)

_el.show('slow')

end_loader()

}

})

</script>

</body>

</html>

login PHP

<?php
//require/load the authentication file script
require_once('auth.php');
require_once('DBConnection.php');
$page = isset($_GET['page']) ? $_GET['page'] : 'home';
// Generate Login Form Token
$_SESSION['formToken']['login'] = password_hash(uniqid(),PASSWORD_DEFAULT);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGIN | Expense and Earnings Tracker App</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/custom.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
</head>
<body class="bg-dark bg-gradient">
   <div class="h-100 d-flex jsutify-content-center align-items-center">
       <div class='w-100'>
        <h3 class="py-5 text-center text-light">Expense and Earnings Tracker App</h3>
        <div class="card my-3 col-md-4 offset-md-4">
            <div class="card-body">
                <!-- Login Form Wrapper -->
                <form action="" id="login-form">
                    <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['login'] ?>">
                    <center><small>Please enter your credentials.</small></center>
                    <div class="mb-3">
                        <label for="username" class="control-label">Username</label>
                        <input type="text" id="username" autofocus name="username" class="form-control rounded-0" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="control-label">Password</label>
                        <input type="password" id="password" name="password" class="form-control rounded-0" required>
                    </div>
                    <div class="mb-3 d-flex w-100 justify-content-between  align-items-end">
                        <a href="registration.php">Does not have an Account? Signup Here</a>
                        <button class="btn btn-sm btn-primary rounded-0 my-1">Login</button>
                    </div>
                </form>
                <!-- Login Form Wrapper -->
            </div>
        </div>
       </div>
   </div>
</body>
<script>
    $(function(){
        $('#login-form').submit(function(e){
            e.preventDefault();
            $('.pop_msg').remove()
            var _this = $(this)
            var _el = $('<div>')
                _el.addClass('pop_msg')
            _this.find('button').attr('disabled',true)
            _this.find('button[type="submit"]').text('Loging in...')
            $.ajax({
                url:'./LoginRegistration.php?a=login',
                method:'POST',
                data:$(this).serialize(),
                dataType:'JSON',
                error:err=>{
                    console.log(err)
                    _el.addClass('alert alert-danger')
                    _el.text("An error occurred.")
                    _this.prepend(_el)
                    _el.show('slow')
                    _this.find('button').attr('disabled',false)
                    _this.find('button[type="submit"]').text('Save')
                },
                success:function(resp){
                    if(resp.status == 'success'){
                        _el.addClass('alert alert-success')
                        setTimeout(() => {
                            location.replace('./');
                        }, 2000);
                    }else{
                        _el.addClass('alert alert-danger')
                    }
                    _el.text(resp.msg)

                    _el.hide()
                    _this.prepend(_el)
                    _el.show('slow')
                    _this.find('button').attr('disabled',false)
                    _this.find('button[type="submit"]').text('Save')
                }
            })
        })
    })
</script>
</html>

<?php

//require/load the authentication file script

require_once('auth.php');

require_once('DBConnection.php');

$page = isset($_GET['page']) ? $_GET['page'] : 'home';

// Generate Login Form Token

$_SESSION['formToken']['login'] = password_hash(uniqid(),PASSWORD_DEFAULT);

<!DOCTYPE html>

<head>

<title>LOGIN | Expense and Earnings Tracker App</title>

</head>

<h3 class="py-5 text-center text-light">Expense and Earnings Tracker App</h3>

<center><small>Please enter your credentials.</small></center>

<label for="username" class="control-label">Username</label>

</div>

<label for="password" class="control-label">Password</label>

</div>

<a href="registration.php">Does not have an Account? Signup Here</a>

<button class="btn btn-sm btn-primary rounded-0 my-1">Login</button>

</div>

</form>

</div>

</body>

$(function(){

$('#login-form').submit(function(e){

e.preventDefault();

$('.pop_msg').remove()

var _this = $(this)

var _el = $('<div>')

_el.addClass('pop_msg')

_this.find('button').attr('disabled',true)

_this.find('button[type="submit"]').text('Loging in...')

$.ajax({

url:'./LoginRegistration.php?a=login',

method:'POST',

data:$(this).serialize(),

dataType:'JSON',

error:err=>{

console.log(err)

_el.addClass('alert alert-danger')

_el.text("An error occurred.")

_this.prepend(_el)

_el.show('slow')

_this.find('button').attr('disabled',false)

_this.find('button[type="submit"]').text('Save')

success:function(resp){

if(resp.status == 'success'){

_el.addClass('alert alert-success')

setTimeout(() => {

location.replace('./');

}, 2000);

}else{

_el.addClass('alert alert-danger')

}

_el.text(resp.msg)

_el.hide()

_this.prepend(_el)

_el.show('slow')

_this.find('button').attr('disabled',false)

_this.find('button[type="submit"]').text('Save')

}

})

</script>

</html>

How the Earnings and Expense Tracker App Works

Features and Functionalities

Technologies Used

How to Run the App

Conclusion

index PHP

login PHP

Related Posts: