├── HTML:Php
    ├── fonts
    │   ├── eternal.ttf
    │   ├── goodtimesrg.ttf
    │   └── Poppins-Medium.ttf
    ├── approved_transaction_page.html
    ├── index.php
    ├── funduser.php
    ├── styles
    │   ├── index.css
    │   ├── logs.css
    │   ├── dashboard.css
    │   ├── newuser.css
    │   ├── funduser.css
    │   └── users.css
    ├── students
    │   ├── index.css
    │   └── index.php
    ├── logs.php
    ├── newuser.php
    ├── users.php
    └── dashboard.php
├── Php:DB
    ├── process_logout.php
    ├── db_conn.php
    ├── confirm_payment_script.php
    ├── process_frontend_transaction.php
    ├── create_user.php
    ├── process_login.php
    ├── process_payment.php
    └── database
    │   └── nfc_payment.sql
├── README.md
└── read_card_and_send_to_db
    └── read_card_and_send_to_db.ino


/HTML:Php/fonts/eternal.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rishi-Sudhakar/nfcpay/HEAD/HTML:Php/fonts/eternal.ttf


--------------------------------------------------------------------------------
/HTML:Php/fonts/goodtimesrg.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rishi-Sudhakar/nfcpay/HEAD/HTML:Php/fonts/goodtimesrg.ttf


--------------------------------------------------------------------------------
/HTML:Php/fonts/Poppins-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rishi-Sudhakar/nfcpay/HEAD/HTML:Php/fonts/Poppins-Medium.ttf


--------------------------------------------------------------------------------
/Php:DB/process_logout.php:
--------------------------------------------------------------------------------
1 | <?php
2 | session_start();
3 | 
4 | session_destroy();
5 | 
6 | header("Location: ../Frontend/index.php");
7 | ?>


--------------------------------------------------------------------------------
/Php:DB/db_conn.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     //set configuration to the database
 3 |     $host = "localhost";
 4 |     $user = "root";
 5 |     $password = "";
 6 |     $db_name = "nfc_payment";
 7 |     
 8 |     //start connection to the database
 9 |     $conn = new mysqli($host, $user, $password, $db_name);
10 |     
11 |     if($conn->connect_error){
12 |         die("Connection failed: ". $conn->connect_error);
13 |     }
14 | ?>


--------------------------------------------------------------------------------
/Php:DB/confirm_payment_script.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include "./db_conn.php";
 3 | 
 4 | 
 5 | // Check for a record
 6 | $result = mysqli_query($conn, "SELECT * from payment where reads_card=0 ORDER BY `payment`.`payment_id` DESC LIMIT 1");
 7 | $row = $result->fetch_assoc();
 8 | 
 9 | if (!$row) {
10 |   // Record was found
11 |   $response = array("status" => "success", "message" => "Payment successful");
12 | }
13 | 
14 | // Return the response as JSON
15 | echo json_encode($response);
16 | 
17 | ?>


--------------------------------------------------------------------------------
/Php:DB/process_frontend_transaction.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | include "./db_conn.php";
 3 | 
 4 | if($_SERVER['REQUEST_METHOD'] == "POST"){
 5 |     $amount = $_POST['amount']; //get the amount from the form
 6 |     $transaction_id = time();
 7 |     $reads_card = 0; //card read is false here
 8 | 
 9 |     mysqli_query($conn, "INSERT into payment (transaction_id, amount, reads_card) VALUES ('$transaction_id', '$amount', '0')");
10 | 
11 |     header("Location: ../Frontend/approved_transaction_page.html");
12 | }
13 | ?>


--------------------------------------------------------------------------------
/Php:DB/create_user.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | include "./db_conn.php";
 3 | 
 4 | if(isset($_POST)){
 5 |     $matric_number= $_POST['matric_number'];
 6 |     $name= $_POST['name'];
 7 |     $card_id= $_POST['card_id'];
 8 |     $amount = $_POST['amount'];
 9 |     $password = $_POST['password'];
10 |     
11 |     mysqli_query($conn, "INSERT into students_data (matric_number, name, card_number, balance, password) VALUES ('$matric_number', '$name', '$card_id', '$amount', '$password' )");
12 | 
13 |     header("Location: ../Frontend/users.php");
14 | }
15 | ?>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NFC Payment App
 2 | 
 3 | An NFC-based payment application using HTML, PHP, and Arduino.
 4 | 
 5 | ## Features
 6 | 
 7 | - NFC Tag Scanning
 8 | - Secure Payment Processing
 9 | - Simple Web Interface
10 | 
11 | ## Installation
12 | 
13 | ### Requirements
14 | 
15 | - Arduino with NFC Shield
16 | - PHP Server (e.g., XAMPP)
17 | - MySQL Database
18 | 
19 | ### Setup Steps
20 | 
21 | 1. **Clone the Repository:**
22 |    ```bash
23 |    git clone https://github.com/Rishi-Sudhakar/nfcpay.git
24 |    ```
25 | 2. **Upload Arduino Code:**
26 | 
27 | Use the provided Arduino code in the arduino directory.
28 | 3. **Setup PHP Server:**
29 | 
30 | Place project files in htdocs (XAMPP).
31 | Start Apache server.
32 | 
33 | 4. **Database Setup:**
34 | 
35 | Import database.sql into MySQL.
36 | 


--------------------------------------------------------------------------------
/HTML:Php/approved_transaction_page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 		<title>Transaction status</title>
 8 | 	</head>
 9 | 	<body>
10 | 		<h1>Kindly swipe your card at the reader to confirm payment</h1>
11 | 		<p>
12 | 			If payment is successful, you will be redirected back to the payment page
13 | 		</p>
14 | 
15 | 		<script>
16 | 			function sendRequest() {
17 | 				fetch("../backend/confirm_payment_script.php")
18 | 					.then((response) => response.json())
19 | 					.then((data) => {
20 | 						if (data.status === "success") {
21 | 							alert(data.message);
22 | 							window.location.replace("./funduser.php");
23 | 						}
24 | 					})
25 | 					.catch((error) => console.error(error));
26 | 			}
27 | 			setInterval(sendRequest, 5000);
28 | 		</script>
29 | 	</body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Php:DB/process_login.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | include "./db_conn.php";
 3 | 
 4 | // Check if the form has been submitted
 5 | if (isset($_POST) && isset($_POST['password'])) {
 6 |   // Get the form data
 7 |   $username = $_POST['username'];
 8 |   $password = $_POST['password'];
 9 | 
10 |   // Check the credentials against the database
11 |   $result = mysqli_query($conn, "SELECT * FROM students_data WHERE matric_number = '$username'");
12 |   if(mysqli_num_rows($result)==1){
13 |         $rec=mysqli_fetch_assoc($result);
14 |         $dbpword=$rec['password'];
15 |         if($password === $dbpword){
16 |             session_start();
17 |             $_SESSION['username']=$rec['matric_number'];
18 |             $_SESSION['logged_in'] = true;
19 |             if($rec['name'] == "admin"){
20 |                 header("Location: ../Frontend/dashboard.php");
21 |             }else{
22 |                 header("Location: ../Frontend/students");
23 |             }
24 |         } else{
25 |             header("location: ../Frontend/index.php?err=Invalid Login Details!!");
26 |             echo "Invalid login detail";
27 |             die();
28 |         } 
29 |     }else{
30 |         header("location: ../Frontend/index.php?err=User does not exist!!");
31 |         die();
32 |     }
33 | }
34 | 
35 | ?>


--------------------------------------------------------------------------------
/HTML:Php/index.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | session_start();
 3 | ?>
 4 | 
 5 | <!DOCTYPE html>
 6 | <html lang="en">
 7 | 
 8 | <head>
 9 |     <meta charset="UTF-8" />
10 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12 |     <title>NFC Pay | Login Page</title>
13 |     <link rel="stylesheet" href="./styles/index.css" />
14 |     <script src="https://kit.fontawesome.com/bef2386e82.js" crossorigin="anonymous"></script>
15 | </head>
16 | 
17 | <body>
18 |     <div class="content">
19 |         <p class="logo">NFC Pay</p>
20 |         <div class="form-box">
21 |             <h1>Login Here!</h1>
22 |             <p style="color: red; text-align:center;">
23 |                 <?php 
24 | 				if(isset($_GET['err'])) echo $_GET['err']; 
25 | 			?></p>
26 |             <form action="../backend/process_login.php" method="POST">
27 |                 <div class="input-box">
28 |                     <div class="inputs">
29 |                         <i class="fa-regular fa-user"></i>
30 |                         <input type="text" name="username" placeholder="Username" />
31 |                     </div>
32 |                 </div>
33 |                 <div class="input-box">
34 |                     <div class="inputs">
35 |                         <i class="fa-solid fa-unlock"></i>
36 |                         <input type="password" name="password" placeholder="Password" id="input" />
37 |                         <span class="eye" onclick="myFunction()">
38 |                             <i id="hide1" class="fa fa-eye"></i>
39 |                             <i id="hide2" class="fa fa-eye-slash"></i>
40 |                         </span>
41 |                     </div>
42 |                 </div>
43 |                 <button type="submit" class="login-btn">Login</button>
44 |             </form>
45 |         </div>
46 |     </div>
47 | 
48 |     <script type="text/javascript">
49 |     function myFunction() {
50 |         var x = document.getElementById("input");
51 |         var y = document.getElementById("hide1");
52 |         var z = document.getElementById("hide2");
53 | 
54 |         if (x.type === "password") {
55 |             x.type = "text";
56 |             y.style.display = "block";
57 |             z.style.display = "none";
58 |         } else {
59 |             x.type = "password";
60 |             y.style.display = "none";
61 |             z.style.display = "block";
62 |         }
63 |     }
64 |     </script>
65 | </body>
66 | 
67 | </html>


--------------------------------------------------------------------------------
/HTML:Php/funduser.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | session_start();
 3 | if(isset($_SESSION['username'])){
 4 |     $user = $_SESSION['username'];
 5 | ?>
 6 | 
 7 | <!DOCTYPE html>
 8 | <html lang="en">
 9 | 
10 | <head>
11 |     <meta charset="UTF-8" />
12 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
13 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
14 |     <title>NFC Pay | Fund User</title>
15 |     <link rel="stylesheet" href="./styles/funduser.css" />
16 |     <script src="https://kit.fontawesome.com/bef2386e82.js" crossorigin="anonymous"></script>
17 | </head>
18 | 
19 | <body>
20 |     <div class="header">
21 |         <div class="side-nav">
22 |             <a href="#" class="logo">NFC Pay</a>
23 |             <ul class="nav-links">
24 |                 <li>
25 |                     <a href="dashboard.php"><i class="fa-solid fa-gauge"></i>
26 |                         <p>Dashboard</p>
27 |                     </a>
28 |                 </li>
29 |                 <li>
30 |                     <a href="funduser.php"><i class="fa-solid fa-money-bill-transfer"></i>
31 |                         <p>Make Payment</p>
32 |                     </a>
33 |                 </li>
34 |                 <li>
35 |                     <a href="users.php"><i class="fa-solid fa-users"></i>
36 |                         <p>User Management</p>
37 |                     </a>
38 |                 </li>
39 |                 <li>
40 |                     <a href="logs.php"><i class="fa-solid fa-book"></i>
41 |                         <p>Logs</p>
42 |                     </a>
43 |                 </li>
44 |                 <div class="logout">
45 |                     <a href="../backend/process_logout.php">
46 |                         <p>Log-Out</p>
47 |                         <i class="fa-solid fa-arrow-right-from-bracket"></i>
48 |                     </a>
49 |                 </div>
50 |             </ul>
51 |         </div>
52 |         <div class="main">
53 |             <div class="head">
54 |                 <h1>Payment</h1>
55 |             </div>
56 |             <form action="../backend/process_frontend_transaction.php" method="POST">
57 |                 <div class="form-box">
58 |                     <h1>Make payment here!</h1>
59 |                     <p>Debit / Credit Amount</p>
60 |                     <div class="input-box">
61 |                         <div class="inputs">
62 |                             <input type="number" name="amount" placeholder="Enter amount" />
63 |                         </div>
64 |                     </div>
65 |                     <button type="submit" class="login-btn">Fund User</button>
66 |                 </div>
67 |             </form>
68 |         </div>
69 |     </div>
70 |     <script src="users.js"></script>
71 | </body>
72 | 
73 | </html>
74 | 
75 | <?php 
76 | }else{
77 | 	header("location: ./index.php");
78 | } 
79 | ?>


--------------------------------------------------------------------------------
/HTML:Php/styles/index.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "poppins";
  3 | 	src: url(../fonts/Poppins-Medium.ttf);
  4 | }
  5 | @font-face {
  6 | 	font-family: "eternal";
  7 | 	src: url(../fonts/eternal.ttf);
  8 | }
  9 | @font-face {
 10 | 	font-family: "goodtimes";
 11 | 	src: url(../fonts/goodtimesrg.ttf);
 12 | }
 13 | 
 14 | * {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	font-family: "poppins", sans-serif;
 18 | 	scroll-behavior: smooth;
 19 | }
 20 | 
 21 | body {
 22 | 	background-color: #04051c;
 23 | 	background: linear-gradient(
 24 | 		to top,
 25 | 		#2c9c41,
 26 | 		#134f84,
 27 | 		#10286e,
 28 | 		#09163d,
 29 | 		#04051c
 30 | 	);
 31 | 	background-size: cover;
 32 | 	background-position: center;
 33 | 	display: flex;
 34 | 	justify-content: center;
 35 | 	align-items: center;
 36 | 	height: 100vh;
 37 | }
 38 | 
 39 | .logo {
 40 | 	display: block;
 41 | 	font-family: "goodtimes";
 42 | 	text-decoration: none;
 43 | 	color: rgba(44, 156, 65, 0.8);
 44 | 	padding-bottom: 20px;
 45 | }
 46 | 
 47 | .logo:hover {
 48 | 	color: rgba(44, 156, 65, 1);
 49 | 	transition: all 0.4s ease-in;
 50 | 	transition: all 0.4s ease-in-out;
 51 | }
 52 | 
 53 | .form-box {
 54 | 	width: 500px;
 55 | 	background-color: rgba(44, 156, 65, 0.2);
 56 | 	margin: 0 auto;
 57 | 	padding: 50px;
 58 | 	color: white;
 59 | 	border-radius: 10px;
 60 | }
 61 | 
 62 | .form-box:hover {
 63 | 	background-color: rgba(44, 156, 65, 0.3);
 64 | 	box-shadow: #09163d;
 65 | 	transition: all 0.4s ease-in;
 66 | 	transition: all 0.4s ease-in-out;
 67 | }
 68 | 
 69 | .form-box h1 {
 70 | 	text-align: center;
 71 | 	margin-bottom: 20px;
 72 | }
 73 | 
 74 | .input-box {
 75 | 	margin: 31px auto;
 76 | 	width: 80%;
 77 | 	border-radius: 50px;
 78 | 	padding: 10px 0 5px 0;
 79 | }
 80 | 
 81 | .inputs {
 82 | 	width: 90%;
 83 | 	border: none;
 84 | 	outline: none;
 85 | 	background: rgba(9, 22, 61, 0.7);
 86 | 	border-radius: 50px;
 87 | 	color: #fff;
 88 | 	padding: 10px 20px;
 89 | 	display: flex;
 90 | 	justify-content: left;
 91 | 	align-items: center;
 92 | }
 93 | 
 94 | .inputs:focus {
 95 | 	width: 90%;
 96 | 	border: none;
 97 | 	outline: none;
 98 | 	background: rgba(9, 22, 61, 0.7);
 99 | 	border-radius: 50px;
100 | 	color: #fff;
101 | }
102 | 
103 | .inputs i {
104 | 	opacity: 70%;
105 | 	padding-right: 20px;
106 | }
107 | 
108 | .input-box input {
109 | 	width: 90%;
110 | 	border: none;
111 | 	outline: none;
112 | 	background: transparent;
113 | 	color: #fff;
114 | }
115 | 
116 | .input-box .inputs:hover {
117 | 	background: #09163d;
118 | 	transition: all 0.4s ease-in;
119 | 	transition: all 0.4s ease-in-out;
120 | }
121 | 
122 | ::placeholder {
123 | 	color: #fff;
124 | }
125 | 
126 | #hide1 {
127 | 	display: none;
128 | }
129 | 
130 | a {
131 | 	text-decoration: none;
132 | }
133 | 
134 | .login-btn {
135 | 	margin: 10px auto;
136 | 	width: 25%;
137 | 	display: block;
138 | 	outline: none;
139 | 	padding: 5px 0;
140 | 	border: none;
141 | 	cursor: pointer;
142 | 	background: rgba(44, 156, 65, 0.6);
143 | 	color: #fff;
144 | 	box-shadow: 0 0 1.5px 0 #fff;
145 | 	border-radius: 50px;
146 | }
147 | 
148 | .login-btn:hover {
149 | 	background: rgba(44, 156, 65, 1);
150 | 	color: #04051c;
151 | 	box-shadow: 0 0 5px 0 #10286e;
152 | 	transition: all 0.4s ease-in;
153 | 	transition: all 0.4s ease-in-out;
154 | }
155 | 


--------------------------------------------------------------------------------
/HTML:Php/students/index.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "poppins";
  3 | 	src: url(fonts/Poppins-Medium.ttf);
  4 | }
  5 | @font-face {
  6 | 	font-family: "eternal";
  7 | 	src: url(fonts/eternal.ttf);
  8 | }
  9 | @font-face {
 10 | 	font-family: "goodtimes";
 11 | 	src: url(fonts/goodtimesrg.ttf);
 12 | }
 13 | 
 14 | * {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	box-sizing: border-box;
 18 | 	font-family: "poppins", sans-serif;
 19 | }
 20 | 
 21 | body {
 22 | 	overflow-x: hidden;
 23 | 	width: 100%;
 24 | 	padding: 0;
 25 | 	margin: 0;
 26 | }
 27 | 
 28 | .logo {
 29 | 	display: block;
 30 | 	font-family: "goodtimes";
 31 | 	text-decoration: none;
 32 | 	font-size: 22px;
 33 | 	color: #09163d;
 34 | }
 35 | 
 36 | a {
 37 | 	display: flex;
 38 | 	align-items: center;
 39 | 	text-decoration: none;
 40 | 	color: aliceblue;
 41 | 	padding: 0;
 42 | }
 43 | 
 44 | .main {
 45 | 	margin: 0 auto;
 46 | }
 47 | 
 48 | .main .head {
 49 | 	background: rgba(168, 241, 182, 0.7);
 50 | 	display: flex;
 51 | 	justify-content: space-between;
 52 | 	align-items: center;
 53 | 	padding: 10px 5px;
 54 | 	color: #04051c;
 55 | 	border-bottom: 1px solid #04051c;
 56 | }
 57 | 
 58 | .main .head div {
 59 | 	display: flex;
 60 | }
 61 | 
 62 | .head p {
 63 | 	font-size: 1.3rem;
 64 | 	color: #10286e;
 65 | }
 66 | 
 67 | .head .user_id {
 68 | 	margin-left: 10px;
 69 | 	color: #04051c;
 70 | }
 71 | 
 72 | .amount_container {
 73 | 	width: 100%;
 74 | 	display: flex;
 75 | 	justify-content: space-around;
 76 | 	align-items: center;
 77 | 	background: linear-gradient(to top, #10286e, #09163d, #04051c);
 78 | }
 79 | .amount_container h1 {
 80 | 	display: flex;
 81 | 	justify-content: space-between;
 82 | 	align-items: center;
 83 | 	text-align: center;
 84 | 	max-width: 100%;
 85 | 	margin-top: 10px;
 86 | 	margin-bottom: 10px;
 87 | 	color: rgba(168, 241, 182, 1);
 88 | }
 89 | 
 90 | .amount_container h1 a {
 91 | 	margin-left: 8px;
 92 | 	color: #fff;
 93 | }
 94 | 
 95 | .logtable {
 96 | 	margin: 10px auto;
 97 | 	padding: 20px 0;
 98 | }
 99 | 
100 | table {
101 | 	border-collapse: collapse;
102 | 	max-width: fit-content;
103 | 	margin: 0 auto;
104 | 	height: auto;
105 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
106 | 	border-radius: 10px;
107 | }
108 | 
109 | tr {
110 | 	transform: all 0.4s ease-in;
111 | }
112 | 
113 | th,
114 | td {
115 | 	padding: 12px;
116 | 	text-align: left;
117 | 	border-bottom: 1px solid rgba(168, 241, 182, 0.7);
118 | }
119 | 
120 | #header {
121 | 	background: linear-gradient(to top, #10286e, #09163d, #04051c);
122 | 	color: aliceblue;
123 | }
124 | 
125 | #header:hover {
126 | 	transform: scale(1);
127 | 	box-shadow: 1px 1px 6px rgba(9, 22, 61, 0.7);
128 | }
129 | 
130 | tr:hover {
131 | 	transform: scale(1.015);
132 | 	transition: 0.4s ease-in;
133 | 	cursor: pointer;
134 | 	background: aliceblue;
135 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
136 | }
137 | 
138 | @media screen and (max-width: 890px) {
139 | 	.logo {
140 | 		font-size: 18px;
141 | 	}
142 | 	.head p {
143 | 		margin: 10px auto;
144 | 		font-size: 1.1rem;
145 | 	}
146 | 	.amount_container h1 {
147 | 		font-size: 1.5rem;
148 | 	}
149 | }
150 | 
151 | @media screen and (max-width: 600px) {
152 | 	.logo {
153 | 		margin-left: 0;
154 | 		padding-left: 10px;
155 | 		font-size: 14px;
156 | 	}
157 | 	.head p {
158 | 		margin: 7px auto;
159 | 		font-size: 0.95rem;
160 | 	}
161 | 	.amount_container h1 {
162 | 		font-size: 1rem;
163 | 	}
164 | 
165 | 	tr {
166 | 		font-size: 8px;
167 | 	}
168 | 	th {
169 | 		font-weight: 500;
170 | 	}
171 | }
172 | 


--------------------------------------------------------------------------------
/HTML:Php/styles/logs.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "poppins";
  3 | 	src: url(../fonts/Poppins-Medium.ttf);
  4 | }
  5 | @font-face {
  6 | 	font-family: "eternal";
  7 | 	src: url(../fonts/eternal.ttf);
  8 | }
  9 | @font-face {
 10 | 	font-family: "goodtimes";
 11 | 	src: url(../fonts/goodtimesrg.ttf);
 12 | }
 13 | 
 14 | * {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	box-sizing: border-box;
 18 | 	font-family: "poppins", sans-serif;
 19 | }
 20 | 
 21 | body {
 22 | 	overflow-x: hidden;
 23 | }
 24 | 
 25 | .header {
 26 | 	width: 100%;
 27 | 	height: 100vh;
 28 | 	display: flex;
 29 | 	position: relative;
 30 | }
 31 | 
 32 | .logo {
 33 | 	display: block;
 34 | 	font-family: "goodtimes";
 35 | 	text-decoration: none;
 36 | 	font-size: 22px;
 37 | 	color: rgba(168, 241, 182, 0.7);
 38 | 	margin-top: 0;
 39 | 	padding-top: 5px;
 40 | }
 41 | 
 42 | a {
 43 | 	display: flex;
 44 | 	align-items: center;
 45 | 	text-decoration: none;
 46 | 	color: aliceblue;
 47 | 	padding: 20px 15px;
 48 | }
 49 | 
 50 | .side-nav {
 51 | 	width: 250px;
 52 | 	height: 100%;
 53 | 	background: linear-gradient(to top, #2c9c41, #10286e, #09163d, #04051c);
 54 | 	position: fixed;
 55 | 	top: 0;
 56 | 	left: 0;
 57 | 	padding: 20px 15px;
 58 | }
 59 | 
 60 | .nav-links {
 61 | 	padding-top: 15px;
 62 | 	list-style: none;
 63 | 	position: relative;
 64 | }
 65 | 
 66 | .nav-links li {
 67 | 	padding: 10px 0;
 68 | }
 69 | 
 70 | .nav-links li:hover {
 71 | 	background: rgba(44, 156, 65, 0.3);
 72 | 	border-radius: 5px;
 73 | 	box-shadow: 0 5px 10px rgba(44, 156, 65, 0.3);
 74 | 	transition: all 0.6s ease-in;
 75 | 	transition: all 0.6s ease-in-out;
 76 | 	color: aliceblue;
 77 | 	font-size: 16.3px;
 78 | }
 79 | 
 80 | .nav-links li a {
 81 | 	display: flex;
 82 | 	align-items: center;
 83 | 	color: aliceblue;
 84 | 	padding: 10px 12px;
 85 | }
 86 | 
 87 | .nav-links li a i {
 88 | 	font-size: 18px;
 89 | 	margin-right: 20px;
 90 | }
 91 | 
 92 | .logout {
 93 | 	display: flex;
 94 | 	justify-content: center;
 95 | 	align-items: center;
 96 | 	margin-top: 50%;
 97 | 	border-top: 1px solid #fff;
 98 | }
 99 | 
100 | .logout a {
101 | 	font-size: 14px;
102 | }
103 | 
104 | .logout a:hover {
105 | 	color: #04051c;
106 | 	transition: all 0.4s ease-in;
107 | 	transition: all 0.4s ease-in-out;
108 | }
109 | 
110 | .logout a p {
111 | 	padding: 0 10px;
112 | }
113 | 
114 | .main {
115 | 	width: 100%;
116 | 	margin-left: 220px;
117 | }
118 | 
119 | .main .head {
120 | 	padding: 20px 15px;
121 | 	background: rgba(168, 241, 182, 0.7);
122 | 	color: #04051c;
123 | 	border-bottom: 1px solid #04051c;
124 | }
125 | 
126 | .main .head h1 {
127 | 	padding-left: 25px;
128 | }
129 | 
130 | .head h1 {
131 | 	font-size: 18px;
132 | }
133 | 
134 | .logtable {
135 | 	padding: 30px 50px;
136 | }
137 | 
138 | table {
139 | 	border-collapse: collapse;
140 | 	white-space: nowrap;
141 | 	width: 100%;
142 | 	height: auto;
143 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
144 | 	border-radius: 10px;
145 | }
146 | 
147 | tr {
148 | 	transform: all 0.4s ease-in;
149 | }
150 | 
151 | th,
152 | td {
153 | 	padding: 12px;
154 | 	text-align: left;
155 | 	border-bottom: 1px solid rgba(168, 241, 182, 0.7);
156 | }
157 | 
158 | #header {
159 | 	background: linear-gradient(to top, #10286e, #09163d, #04051c);
160 | 	color: aliceblue;
161 | }
162 | 
163 | #header:hover {
164 | 	transform: scale(1);
165 | 	box-shadow: 1px 1px 6px rgba(9, 22, 61, 0.7);
166 | }
167 | 
168 | tr:hover {
169 | 	transform: scale(1.015);
170 | 	transition: 0.4s ease-in;
171 | 	cursor: pointer;
172 | 	background: aliceblue;
173 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
174 | }
175 | 


--------------------------------------------------------------------------------
/HTML:Php/students/index.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | session_start();
 3 | if(isset($_SESSION['username'])){
 4 |     $logged_in_user = $_SESSION['username'];
 5 |     include "../../backend/db_conn.php";
 6 |     $fetch_user_balance = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM students_data where matric_number='$logged_in_user'"));
 7 |     ?>
 8 | 
 9 | <!DOCTYPE html>
10 | <html lang="en">
11 | 
12 | <head>
13 |     <meta charset="UTF-8" />
14 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
15 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16 |     <title>User Profile</title>
17 |     <link rel="stylesheet" href="./index.css" />
18 | </head>
19 | 
20 | <body>
21 |     <div class="main">
22 |         <div class="head">
23 |             <a href="#" class="logo">Caleb Food Service</a>
24 |             <div>
25 |                 <p>User: <?php echo $logged_in_user; ?></p>
26 |                 <a href="../../backend/process_logout.php" style="margin-left: 5px;">
27 |                     <button
28 |                         style="background-color: red;color: white; padding: 5px 20px; border-radius: 5px; border: none; font-weight: bold; cursor: pointer;">
29 |                         Logout
30 |                     </button>
31 |                 </a>
32 |             </div>
33 |         </div>
34 |         <div class="amount_container">
35 |             <h1>Account Balance:
36 |                 <a href="#">
37 |                     #<?php echo $fetch_user_balance['balance']; ?>
38 |                 </a>
39 |             </h1>
40 |         </div>
41 |         <div class="logtable">
42 |             <table>
43 |                 <tr id="header">
44 |                     <th>No</th>
45 |                     <th>Name</th>
46 |                     <th>Transaction Type</th>
47 |                     <th>Previous Balance</th>
48 |                     <th>Amount</th>
49 |                     <th>Current Balance</th>
50 |                     <th>Time of event</th>
51 |                 </tr>
52 | 
53 |                 <?php
54 |                 $fetch_logs = mysqli_query($conn, "SELECT t1.log_id, t1.card_number, t2.name, t2.matric_number, t1.transaction_type, t1.amount, t1.previous_balance, t1.balance, t1.time FROM `logs`as t1 LEFT JOIN students_data as t2 on t1.card_number = t2.card_number WHERE matric_number='$logged_in_user'");
55 | 
56 |                 $sn = 1;
57 |                 while($res = mysqli_fetch_assoc($fetch_logs)){
58 |                 ?>
59 |                 <tr>
60 |                     <td><?php echo $sn; ?></td>
61 |                     <td><?php echo $res['name']; ?></td>
62 |                     <td><?php echo ($res['transaction_type'] == '0') ? "Credit" : "Debit" ; ?></td>
63 |                     <td><?php echo $res['previous_balance']; ?></td>
64 |                     <td><?php echo $res['amount']; ?></td>
65 |                     <td><?php echo $res['balance']; ?></td>
66 |                     <td><?php echo $res['time']; ?></td>
67 |                 </tr>
68 |                 <?php $sn ++; } ?>
69 |             </table>
70 | 
71 |             <!-- <div style="display: flex; justify-content: center; margin-top: 20px; ">
72 |                 <button
73 |                     style="background-color: red; padding: 5px 20px; border-radius: 5px; border: none; font-size: 120%;">
74 |                     <a href="../../backend/process_logout.php" style="font-weight: bold;">Logout</a>
75 |                 </button>
76 |             </div> -->
77 |         </div>
78 |     </div>
79 | </body>
80 | 
81 | </html>
82 | 
83 | <?php 
84 | }else{
85 | 	header("location: ./index.php");
86 | } 
87 | ?>


--------------------------------------------------------------------------------
/HTML:Php/logs.php:
--------------------------------------------------------------------------------
  1 | <?php 
  2 | session_start();
  3 | 
  4 | if(isset($_SESSION['username'])){
  5 |     $user = $_SESSION['username'];
  6 | ?>
  7 | 
  8 | <!DOCTYPE html>
  9 | <html lang="en">
 10 | 
 11 | <head>
 12 |     <meta charset="UTF-8" />
 13 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 15 |     <title>NFC Pay | Logs</title>
 16 |     <link rel="stylesheet" href="./styles/logs.css" />
 17 |     <script src="https://kit.fontawesome.com/bef2386e82.js" crossorigin="anonymous"></script>
 18 | </head>
 19 | 
 20 | <body>
 21 |     <div class="header">
 22 |         <div class="side-nav">
 23 |             <a href="#" class="logo">NFC Pay</a>
 24 |             <ul class="nav-links">
 25 |                 <li>
 26 |                     <a href="dashboard.php"><i class="fa-solid fa-gauge"></i>
 27 |                         <p>Dashboard</p>
 28 |                     </a>
 29 |                 </li>
 30 |                 <li>
 31 |                     <a href="funduser.php"><i class="fa-solid fa-money-bill-transfer"></i>
 32 |                         <p>Make Payment</p>
 33 |                     </a>
 34 |                 </li>
 35 |                 <li>
 36 |                     <a href="users.php"><i class="fa-solid fa-users"></i>
 37 |                         <p>User Management</p>
 38 |                     </a>
 39 |                 </li>
 40 |                 <li>
 41 |                     <a href="logs.php"><i class="fa-solid fa-book"></i>
 42 |                         <p>Logs</p>
 43 |                     </a>
 44 |                 </li>
 45 |                 <div class="logout">
 46 |                     <a href="../backend/process_logout.php">
 47 |                         <p>Log-Out</p>
 48 |                         <i class="fa-solid fa-arrow-right-from-bracket"></i>
 49 |                     </a>
 50 |                 </div>
 51 |             </ul>
 52 |         </div>
 53 |         <div class="main">
 54 |             <div class="head">
 55 |                 <h1>Logs</h1>
 56 |             </div>
 57 |             <div class="logtable">
 58 |                 <table>
 59 |                     <tr id="header">
 60 |                         <th>S/N</th>
 61 |                         <th>Student Name</th>
 62 |                         <th>Matric Number</th>
 63 |                         <th>Card Number</th>
 64 |                         <th>Transaction Type</th>
 65 |                         <th>Previous Balance</th>
 66 |                         <th>Amount</th>
 67 |                         <th>Current Balance</th>
 68 |                         <th>Time of event</th>
 69 |                     </tr>
 70 | 
 71 |                     <?php
 72 | 					include "../backend/db_conn.php";
 73 | 					$fetch_logs = mysqli_query($conn, "SELECT t1.log_id, t1.card_number, t2.name, t2.matric_number, t1.transaction_type, t1.amount, t1.previous_balance, t1.balance, t1.time FROM `logs`as t1 LEFT JOIN students_data as t2 on t1.card_number = t2.card_number;");
 74 | 	
 75 | 					$sn = 1;
 76 | 					while($res = mysqli_fetch_assoc($fetch_logs)){
 77 | 					?>
 78 |                     <tr>
 79 |                         <td><?php echo $sn; ?></td>
 80 |                         <td><?php echo $res['name']; ?></td>
 81 |                         <td><?php echo $res['matric_number']; ?></td>
 82 |                         <td><?php echo $res['card_number']; ?></td>
 83 |                         <td><?php echo ($res['transaction_type'] == '0') ? "Credit" : "Debit" ; ?></td>
 84 |                         <td><?php echo $res['previous_balance']; ?></td>
 85 |                         <td><?php echo $res['amount']; ?></td>
 86 |                         <td><?php echo $res['balance']; ?></td>
 87 |                         <td><?php echo $res['time']; ?></td>
 88 |                     </tr>
 89 |                     <?php $sn ++; } ?>
 90 |                 </table>
 91 |             </div>
 92 |         </div>
 93 |     </div>
 94 | </body>
 95 | 
 96 | </html>
 97 | 
 98 | <?php 
 99 | }else{
100 | 	header("location: ./index.php");
101 | } 
102 | ?>


--------------------------------------------------------------------------------
/HTML:Php/styles/dashboard.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "poppins";
  3 | 	src: url(../fonts/Poppins-Medium.ttf);
  4 | }
  5 | @font-face {
  6 | 	font-family: "eternal";
  7 | 	src: url(../fonts/eternal.ttf);
  8 | }
  9 | @font-face {
 10 | 	font-family: "goodtimes";
 11 | 	src: url(../fonts/goodtimesrg.ttf);
 12 | }
 13 | 
 14 | * {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	box-sizing: border-box;
 18 | 	font-family: "poppins", sans-serif;
 19 | }
 20 | 
 21 | body {
 22 | 	overflow-x: hidden;
 23 | }
 24 | 
 25 | .header {
 26 | 	width: 100%;
 27 | 	height: 100vh;
 28 | 	display: flex;
 29 | 	position: relative;
 30 | }
 31 | 
 32 | .logo {
 33 | 	display: block;
 34 | 	font-family: "goodtimes";
 35 | 	text-decoration: none;
 36 | 	font-size: 22px;
 37 | 	color: rgba(168, 241, 182, 0.7);
 38 | 	margin-top: 0;
 39 | 	padding-top: 5px;
 40 | }
 41 | 
 42 | a {
 43 | 	display: flex;
 44 | 	align-items: center;
 45 | 	text-decoration: none;
 46 | 	color: aliceblue;
 47 | 	padding: 20px 15px;
 48 | }
 49 | 
 50 | .side-nav {
 51 | 	width: 250px;
 52 | 	height: 100%;
 53 | 	background: linear-gradient(to top, #2c9c41, #10286e, #09163d, #04051c);
 54 | 	position: fixed;
 55 | 	top: 0;
 56 | 	left: 0;
 57 | 	padding: 20px 15px;
 58 | }
 59 | 
 60 | .nav-links {
 61 | 	padding-top: 15px;
 62 | 	list-style: none;
 63 | 	position: relative;
 64 | }
 65 | 
 66 | .nav-links li {
 67 | 	padding: 10px 0;
 68 | }
 69 | 
 70 | .nav-links li:hover {
 71 | 	background: rgba(44, 156, 65, 0.3);
 72 | 	border-radius: 5px;
 73 | 	box-shadow: 0 5px 10px rgba(44, 156, 65, 0.3);
 74 | 	transition: all 0.6s ease-in;
 75 | 	transition: all 0.6s ease-in-out;
 76 | 	color: aliceblue;
 77 | 	font-size: 16.3px;
 78 | }
 79 | 
 80 | .nav-links li a {
 81 | 	display: flex;
 82 | 	align-items: center;
 83 | 	color: aliceblue;
 84 | 	padding: 10px 12px;
 85 | }
 86 | 
 87 | .nav-links li a i {
 88 | 	font-size: 18px;
 89 | 	margin-right: 20px;
 90 | }
 91 | 
 92 | .logout {
 93 | 	display: flex;
 94 | 	justify-content: center;
 95 | 	align-items: center;
 96 | 	margin-top: 50%;
 97 | 	border-top: 1px solid #fff;
 98 | }
 99 | 
100 | .logout a {
101 | 	font-size: 14px;
102 | }
103 | 
104 | .logout a:hover {
105 | 	color: #04051c;
106 | 	transition: all 0.4s ease-in;
107 | 	transition: all 0.4s ease-in-out;
108 | }
109 | 
110 | .logout a p {
111 | 	padding: 0 10px;
112 | }
113 | 
114 | .main {
115 | 	width: 100%;
116 | 	margin-left: 250px;
117 | }
118 | 
119 | .main .head {
120 | 	padding: 20px 15px;
121 | 	background: rgba(168, 241, 182, 0.7);
122 | 	color: #04051c;
123 | }
124 | 
125 | .head h1 {
126 | 	font-size: 18px;
127 | }
128 | 
129 | .main .content h1 {
130 | 	font-size: 14px;
131 | 	margin: 15px 15px 5px 15px;
132 | }
133 | 
134 | .cards_wrapper {
135 | 	display: grid;
136 | 	grid-template-columns: 1fr 1fr 1fr 1fr;
137 | 	grid-template-rows: 1fr;
138 | }
139 | 
140 | .cards_wrapper a {
141 | 	padding: 0;
142 | 	margin-bottom: 15px;
143 | 	padding-top: 10px;
144 | }
145 | 
146 | .card {
147 | 	margin: 10px 15px;
148 | 	height: 100px;
149 | 	width: 200px;
150 | 	border-radius: 5px;
151 | 	display: flex;
152 | 	flex-direction: column;
153 | 	justify-content: center;
154 | 	color: #fff;
155 | 	background: linear-gradient(to top, #54a864, #95b99b);
156 | 	transition: 0.3s ease-in;
157 | }
158 | 
159 | .card h2 {
160 | 	text-align: center;
161 | 	display: flex;
162 | 	justify-content: center;
163 | 	align-items: center;
164 | 	font-family: "poppins";
165 | 	color: #04051c;
166 | 	font-size: 16px;
167 | 	padding: 0 2px;
168 | }
169 | 
170 | .card h2 i {
171 | 	font-size: 2rem;
172 | 	padding-right: 20px;
173 | 	color: aliceblue;
174 | }
175 | 
176 | .card p {
177 | 	text-align: center;
178 | 	margin-top: 10px;
179 | 	font-size: 16px;
180 | }
181 | 
182 | .card:hover {
183 | 	transform: scale(1.08);
184 | 	transition: 0.3s ease-in;
185 | 	cursor: pointer;
186 | }
187 | 
188 | .chartlay {
189 | 	display: grid;
190 | 	grid-template-columns: 1fr 1fr;
191 | 	grid-row: 1fr;
192 | 	margin: 0;
193 | 	padding: 0;
194 | }
195 | 
196 | .charts {
197 | 	padding-top: 0;
198 | 	margin: 0;
199 | 	width: 400px;
200 | 	height: 300px;
201 | }
202 | 
203 | .stats h1 {
204 | 	border-top: 1px solid #04051c;
205 | 	padding: 25px 0;
206 | }
207 | 


--------------------------------------------------------------------------------
/HTML:Php/newuser.php:
--------------------------------------------------------------------------------
  1 | <?php 
  2 | session_start();
  3 | if(isset($_SESSION['username'])){
  4 |     $user = $_SESSION['username'];
  5 | ?>
  6 | 
  7 | <!DOCTYPE html>
  8 | <html lang="en">
  9 | 
 10 | <head>
 11 |     <meta charset="UTF-8" />
 12 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 13 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 14 |     <title>NFC Pay | Create New User</title>
 15 |     <link rel="stylesheet" href="./styles/newuser.css" />
 16 |     <script src="https://kit.fontawesome.com/bef2386e82.js" crossorigin="anonymous"></script>
 17 | </head>
 18 | 
 19 | <body>
 20 |     <div class="header">
 21 |         <div class="side-nav">
 22 |             <a href="#" class="logo">NFC Pay</a>
 23 |             <ul class="nav-links">
 24 |                 <li>
 25 |                     <a href="dashboard.php"><i class="fa-solid fa-gauge"></i>
 26 |                         <p>Dashboard</p>
 27 |                     </a>
 28 |                 </li>
 29 |                 <li>
 30 |                     <a href="funduser.php"><i class="fa-solid fa-money-bill-transfer"></i>
 31 |                         <p>Make Payment</p>
 32 |                     </a>
 33 |                 </li>
 34 |                 <li>
 35 |                     <a href="users.php"><i class="fa-solid fa-users"></i>
 36 |                         <p>User Management</p>
 37 |                     </a>
 38 |                 </li>
 39 |                 <li>
 40 |                     <a href="logs.php"><i class="fa-solid fa-book"></i>
 41 |                         <p>Logs</p>
 42 |                     </a>
 43 |                 </li>
 44 |                 <div class="logout">
 45 |                     <a href="../backend/process_logout.php">
 46 |                         <p>Log-Out</p>
 47 |                         <i class="fa-solid fa-arrow-right-from-bracket"></i>
 48 |                     </a>
 49 |                 </div>
 50 |             </ul>
 51 |         </div>
 52 |         <div class="main">
 53 |             <div class="head">
 54 |                 <h1>Create New User</h1>
 55 |             </div>
 56 |             <form action="../backend/create_user.php" method="POST">
 57 |                 <div class="form-box">
 58 |                     <h1>Enter User Details</h1>
 59 |                     <p>Matric Number</p>
 60 |                     <div class="input-box">
 61 |                         <div class="inputs">
 62 |                             <input type="text" placeholder="Enter Student Matric Number" name="matric_number" />
 63 |                         </div>
 64 |                     </div>
 65 |                     <p>Students Name</p>
 66 |                     <div class="input-box">
 67 |                         <div class="inputs">
 68 |                             <input type="text" placeholder="Enter Student Full Name" name="name" />
 69 |                         </div>
 70 |                     </div>
 71 |                     <p>Card ID</p>
 72 |                     <div class="input-box">
 73 |                         <div class="inputs">
 74 |                             <input type="text" name="card_id" placeholder="Enter Student card id" />
 75 |                         </div>
 76 |                     </div>
 77 |                     <p>Starting Amount</p>
 78 |                     <div class="input-box">
 79 |                         <div class="inputs">
 80 |                             <input type="number" name="amount" placeholder="Enter Amount Paid" class="number" />
 81 |                         </div>
 82 |                     </div>
 83 | 
 84 |                     <p>Password</p>
 85 |                     <div class="input-box">
 86 |                         <div class="inputs">
 87 |                             <input type="text" name="password" placeholder="Enter password" class="number" />
 88 |                         </div>
 89 |                     </div>
 90 | 
 91 |                     <button type="submit" class="login-btn">Create User</button>
 92 |                 </div>
 93 |             </form>
 94 |         </div>
 95 |     </div>
 96 | </body>
 97 | 
 98 | </html>
 99 | 
100 | <?php 
101 | }else{
102 | 	header("location: ./index.php");
103 | } 
104 | ?>


--------------------------------------------------------------------------------
/Php:DB/process_payment.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     //include the file with the database connection
 3 |     include "./db_conn.php";
 4 |     
 5 |     //this must be the same api key with the one in the arduino
 6 |     $api_key = "somade_daniel";
 7 | 
 8 |     //check if the api key declared up is the same with the one from microcontroller
 9 |     if($api_key == strval($_GET["apikey"])){
10 |         //check is method of recieving data is GET
11 |         if($_SERVER["REQUEST_METHOD"] == "GET"){
12 |             //get all the readings from the microcontroller
13 |             $card_number = sanitizeInput($_GET["card_number"]);
14 |             $payment_type = sanitizeInput($_GET["paymentType"]);
15 |             // $amount_to_pay = 400; //statically put the amount for testing, will be corrected later
16 |     
17 |             //check the database for the record of the owner of the card
18 |             $fetch_sql = "SELECT * FROM students_data where card_number='$card_number'";
19 |             $fetch_res = mysqli_query($conn, $fetch_sql);
20 | 
21 |             if(mysqli_num_rows($fetch_res) > 0){
22 |                 while($card = mysqli_fetch_assoc($fetch_res)){
23 |                     $card_balance = $card['balance'];
24 |                     $card_new_balance= $card_balance;
25 |                     
26 |                     $check_transation = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * from payment where reads_card=0 ORDER BY `payment`.`payment_id` DESC LIMIT 1"));
27 |                     if(!is_null($check_transation)){
28 |                         
29 |                         $amount_to_pay = $check_transation['amount'];
30 |                         $transaction_id = $check_transation['transaction_id'];
31 |                         
32 |                         if($payment_type == "debit"){
33 |                             if($card_balance < $amount_to_pay){
34 |                                 echo "Insufficient fund, balance = #".$card_new_balance;
35 |                             }else{
36 |                                 $card_new_balance = $card_balance - $amount_to_pay;
37 |                                 updateBalance($conn, $card_number, $amount_to_pay, $card_balance, $card_new_balance, "Payment is successful", "1", $transaction_id );
38 |                             }
39 |                         }else{
40 |                             $card_new_balance = $card_balance + $amount_to_pay;
41 |                             updateBalance($conn, $card_number, $amount_to_pay, $card_balance, $card_new_balance, "Account credidted", "0", $transaction_id );
42 |                         }
43 |                     }else{
44 |                         echo "No amount stated";
45 |                     }
46 |                 }
47 |             }else{
48 |                 echo "Card not registered";
49 |             }
50 |             
51 |             $conn->close();
52 |         } else{
53 |             echo "Invalid method of sending data";
54 |         }
55 |     }else{
56 |         echo "Incorrect Api Key which = ".strval($_GET["apikey"]);
57 |     }
58 |     
59 |     
60 |     //this function is used to do a little sanitizing of user input
61 |     function sanitizeInput($input){
62 |        return htmlspecialchars(stripslashes(trim($input)));
63 |         
64 |     }
65 | 
66 |     function updateBalance($dbConn, $cardNumber, $amount, $previousBalance, $currentBalance, $returnMessage, $transactionType, $transactionId){
67 |         //update database with new balance
68 |         $update_sql = "UPDATE students_data SET balance='$currentBalance' where card_number='$cardNumber'";
69 |         $log_update = "INSERT into logs (card_number, transaction_type, amount, previous_balance, balance) VALUEs ('$cardNumber', '$transactionType','$amount', '$previousBalance', '$currentBalance')";
70 |         $transaction_update = "UPDATE payment SET reads_card=1 where transaction_id='$transactionId'";
71 | 
72 |         //check if updating of balance worked
73 |         if($dbConn->query($update_sql) === TRUE && $dbConn->query($log_update) === TRUE && $dbConn->query($transaction_update)){
74 |             echo $returnMessage.", new balance= #".$currentBalance;
75 |         }else{
76 |             echo "Error: ". $update_sql . "<br>" . $dbConn->error;
77 |         }
78 |     }
79 | ?>


--------------------------------------------------------------------------------
/HTML:Php/users.php:
--------------------------------------------------------------------------------
  1 | <?php 
  2 | session_start();
  3 | if(isset($_SESSION['username'])){
  4 |     $user = $_SESSION['username'];
  5 | ?>
  6 | <!DOCTYPE html>
  7 | <html lang="en">
  8 | 
  9 | <head>
 10 |     <meta charset="UTF-8" />
 11 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 12 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 13 |     <title>NFC Pay | User Management</title>
 14 |     <link rel="stylesheet" href="./styles/users.css" />
 15 |     <script src="https://kit.fontawesome.com/bef2386e82.js" crossorigin="anonymous"></script>
 16 | </head>
 17 | 
 18 | <body>
 19 |     <div class="header">
 20 |         <div class="side-nav">
 21 |             <a href="#" class="logo">NFC Pay</a>
 22 |             <ul class="nav-links">
 23 |                 <li>
 24 |                     <a href="dashboard.php"><i class="fa-solid fa-gauge"></i>
 25 |                         <p>Dashboard</p>
 26 |                     </a>
 27 |                 </li>
 28 |                 <li>
 29 |                     <a href="funduser.php"><i class="fa-solid fa-money-bill-transfer"></i>
 30 |                         <p>Make Payment</p>
 31 |                     </a>
 32 |                 </li>
 33 |                 <li>
 34 |                     <a href="users.php"><i class="fa-solid fa-users"></i>
 35 |                         <p>User Management</p>
 36 |                     </a>
 37 |                 </li>
 38 |                 <li>
 39 |                     <a href="logs.php"><i class="fa-solid fa-book"></i>
 40 |                         <p>Logs</p>
 41 |                     </a>
 42 |                 </li>
 43 |                 <div class="logout">
 44 |                     <a href="../backend/process_logout.php">
 45 |                         <p>Log-Out</p>
 46 |                         <i class="fa-solid fa-arrow-right-from-bracket"></i>
 47 |                     </a>
 48 |                 </div>
 49 |             </ul>
 50 |         </div>
 51 |         <div class="main">
 52 |             <div class="head">
 53 |                 <h1>Users Management</h1>
 54 |                 <a href="newuser.php">
 55 |                     <p>Create New User</p>
 56 |                     <i class="fa-solid fa-user-plus"></i>
 57 |                 </a>
 58 |                 <!-- <form action="" method="get" class="searchbar">
 59 |                     <input type="text" placeholder="User ID" name="usersearch" id="search" />
 60 |                     <button type="submit" onclick="openpage()">
 61 |                         <i class="fa-solid fa-magnifying-glass"></i>
 62 |                     </button>
 63 |                 </form> -->
 64 |             </div>
 65 |             <div class="logtable">
 66 |                 <table>
 67 |                     <tr id="header">
 68 |                         <th>S/N</th>
 69 |                         <th>Student Name</th>
 70 |                         <th>Matric Number</th>
 71 |                         <th>Card Number</th>
 72 |                         <th>Available Balance</th>
 73 |                         <th>Date Created</th>
 74 |                     </tr>
 75 | 
 76 |                     <?php
 77 | 					include "../backend/db_conn.php";
 78 |     				$fetch_users = mysqli_query($conn, "SELECT * FROM students_data where matric_number != 'Admin'");
 79 | 					
 80 | 					$sn = 1;
 81 | 					while($res = mysqli_fetch_assoc($fetch_users)){
 82 | 						echo "
 83 | 						<tr>
 84 | 							<td>$sn</td>
 85 | 							<td>".$res['name']."</td>
 86 | 							<td>".$res['matric_number']."</td>
 87 | 							<td>".$res['card_number']."</td>
 88 | 							<td>".$res['balance']."</td>
 89 | 							<td>".$res['date_created']."</td>
 90 | 						</tr>
 91 | 						";
 92 | 						
 93 | 						$sn ++;
 94 | 					}
 95 | 					?>
 96 | 
 97 |                     <!-- <tr class="user_details">
 98 |                         <td id="serial_number">1</td>
 99 |                         <td id="user_name">Eseoghene Paul Eziemefe</td>
100 |                         <td id="user_id">20/7717</td>
101 |                         <td id="signal">
102 |                             <label class="switch">
103 |                                 <input type="checkbox" />
104 |                                 <span class="slider"></span>
105 |                                 <span class="slider2"></span>
106 |                             </label>
107 |                         </td>
108 |                         <td id="total_amount">60000</td>
109 |                     </tr> -->
110 |                 </table>
111 |             </div>
112 |         </div>
113 |     </div>
114 |     <script type="text/javascript">
115 |     const userdata = document.querySelector("[userdata]");
116 | 
117 |     function openpage() {
118 |         if (x !== y) {}
119 |     }
120 |     </script>
121 | </body>
122 | 
123 | </html>
124 | 
125 | <?php 
126 | }else{
127 | 	header("location: ./index.php");
128 | } 
129 | ?>


--------------------------------------------------------------------------------
/Php:DB/database/nfc_payment.sql:
--------------------------------------------------------------------------------
  1 | -- phpMyAdmin SQL Dump
  2 | -- version 5.2.0
  3 | -- https://www.phpmyadmin.net/
  4 | --
  5 | -- Host: 127.0.0.1
  6 | -- Generation Time: Jan 09, 2023 at 10:24 PM
  7 | -- Server version: 10.4.24-MariaDB
  8 | -- PHP Version: 8.1.6
  9 | 
 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 11 | START TRANSACTION;
 12 | SET time_zone = "+00:00";
 13 | 
 14 | 
 15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
 16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
 17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
 18 | /*!40101 SET NAMES utf8mb4 */;
 19 | 
 20 | --
 21 | -- Database: `nfc_payment`
 22 | --
 23 | 
 24 | -- --------------------------------------------------------
 25 | 
 26 | --
 27 | -- Table structure for table `logs`
 28 | --
 29 | 
 30 | CREATE TABLE `logs` (
 31 |   `log_id` int(11) NOT NULL,
 32 |   `card_number` varchar(15) NOT NULL,
 33 |   `transaction_type` int(2) NOT NULL,
 34 |   `amount` int(11) NOT NULL,
 35 |   `previous_balance` int(11) NOT NULL,
 36 |   `balance` int(11) NOT NULL,
 37 |   `time` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
 38 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 39 | 
 40 | --
 41 | -- Dumping data for table `logs`
 42 | --
 43 | 
 44 | INSERT INTO `logs` (`log_id`, `card_number`, `transaction_type`, `amount`, `previous_balance`, `balance`, `time`) VALUES
 45 | (1, '71FCD126', 0, 3000, 2000, 5000, '2022-12-27 15:32:55'),
 46 | (2, 'C2B1B421', 0, 2000, 10500, 12500, '2022-12-27 15:54:16'),
 47 | (3, 'C2B1B421', 0, 5000, 12500, 17500, '2022-12-27 16:04:45'),
 48 | (4, 'C2B1B421', 0, 2500, 17500, 20000, '2022-12-29 19:22:32'),
 49 | (5, 'C2B1B421', 0, 5000, 20000, 25000, '2022-12-30 20:32:50'),
 50 | (6, 'C2B1B421', 0, 2000, 25000, 27000, '2023-01-06 11:58:49');
 51 | 
 52 | -- --------------------------------------------------------
 53 | 
 54 | --
 55 | -- Table structure for table `payment`
 56 | --
 57 | 
 58 | CREATE TABLE `payment` (
 59 |   `payment_id` int(11) NOT NULL,
 60 |   `transaction_id` int(11) NOT NULL,
 61 |   `amount` int(11) NOT NULL,
 62 |   `reads_card` tinyint(1) NOT NULL,
 63 |   `timestamp` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
 64 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 65 | 
 66 | --
 67 | -- Dumping data for table `payment`
 68 | --
 69 | 
 70 | INSERT INTO `payment` (`payment_id`, `transaction_id`, `amount`, `reads_card`, `timestamp`) VALUES
 71 | (1, 1672155155, 3000, 1, '2022-12-27 15:32:55'),
 72 | (2, 1672156442, 2000, 1, '2022-12-27 15:54:16'),
 73 | (3, 1672157061, 5000, 1, '2022-12-27 16:04:45'),
 74 | (4, 1672341723, 2500, 1, '2022-12-29 19:22:32'),
 75 | (5, 1672432360, 5000, 1, '2022-12-30 20:32:50'),
 76 | (6, 1673006318, 2000, 1, '2023-01-06 11:58:49');
 77 | 
 78 | -- --------------------------------------------------------
 79 | 
 80 | --
 81 | -- Table structure for table `students_data`
 82 | --
 83 | 
 84 | CREATE TABLE `students_data` (
 85 |   `student_id` int(11) NOT NULL,
 86 |   `matric_number` varchar(8) NOT NULL,
 87 |   `name` varchar(50) NOT NULL,
 88 |   `card_number` varchar(20) NOT NULL,
 89 |   `balance` int(5) NOT NULL,
 90 |   `password` varchar(200) NOT NULL,
 91 |   `date_created` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
 92 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 93 | 
 94 | --
 95 | -- Dumping data for table `students_data`
 96 | --
 97 | 
 98 | INSERT INTO `students_data` (`student_id`, `matric_number`, `name`, `card_number`, `balance`, `password`, `date_created`) VALUES
 99 | (1, '21/8874', 'Somade Daniel ', 'C2B1B421', 27000, 'somade', '2023-01-06 11:58:49'),
100 | (2, 'admin', 'admin', '', 23, 'admin', '2022-12-31 01:42:39'),
101 | (4, '21/8714', 'Salami Kehinde', '71FCD126', 5000, 'salami', '2022-12-27 15:32:55'),
102 | (5, '21/93734', 'Shifatu Usman', '36698JLJSD', 0, 'usman', '2022-12-29 18:23:03');
103 | 
104 | --
105 | -- Indexes for dumped tables
106 | --
107 | 
108 | --
109 | -- Indexes for table `logs`
110 | --
111 | ALTER TABLE `logs`
112 |   ADD PRIMARY KEY (`log_id`);
113 | 
114 | --
115 | -- Indexes for table `payment`
116 | --
117 | ALTER TABLE `payment`
118 |   ADD PRIMARY KEY (`payment_id`);
119 | 
120 | --
121 | -- Indexes for table `students_data`
122 | --
123 | ALTER TABLE `students_data`
124 |   ADD PRIMARY KEY (`student_id`),
125 |   ADD UNIQUE KEY `card_number` (`card_number`);
126 | 
127 | --
128 | -- AUTO_INCREMENT for dumped tables
129 | --
130 | 
131 | --
132 | -- AUTO_INCREMENT for table `logs`
133 | --
134 | ALTER TABLE `logs`
135 |   MODIFY `log_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
136 | 
137 | --
138 | -- AUTO_INCREMENT for table `payment`
139 | --
140 | ALTER TABLE `payment`
141 |   MODIFY `payment_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
142 | 
143 | --
144 | -- AUTO_INCREMENT for table `students_data`
145 | --
146 | ALTER TABLE `students_data`
147 |   MODIFY `student_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
148 | COMMIT;
149 | 
150 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
151 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
152 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
153 | 


--------------------------------------------------------------------------------
/HTML:Php/styles/newuser.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "poppins";
  3 | 	src: url(../fonts/Poppins-Medium.ttf);
  4 | }
  5 | @font-face {
  6 | 	font-family: "eternal";
  7 | 	src: url(../fonts/eternal.ttf);
  8 | }
  9 | @font-face {
 10 | 	font-family: "goodtimes";
 11 | 	src: url(../fonts/goodtimesrg.ttf);
 12 | }
 13 | 
 14 | * {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	box-sizing: border-box;
 18 | 	font-family: "poppins", sans-serif;
 19 | }
 20 | 
 21 | body {
 22 | 	overflow-x: hidden;
 23 | }
 24 | 
 25 | .header {
 26 | 	width: 100%;
 27 | 	height: 100vh;
 28 | 	display: flex;
 29 | 	position: relative;
 30 | }
 31 | 
 32 | .logo {
 33 | 	display: block;
 34 | 	font-family: "goodtimes";
 35 | 	text-decoration: none;
 36 | 	font-size: 22px;
 37 | 	color: rgba(168, 241, 182, 0.7);
 38 | 	margin-top: 0;
 39 | 	padding-top: 5px;
 40 | }
 41 | 
 42 | a {
 43 | 	display: flex;
 44 | 	align-items: center;
 45 | 	text-decoration: none;
 46 | 	color: aliceblue;
 47 | 	padding: 20px 15px;
 48 | }
 49 | 
 50 | .side-nav {
 51 | 	width: 250px;
 52 | 	height: 100%;
 53 | 	background: linear-gradient(to top, #2c9c41, #10286e, #09163d, #04051c);
 54 | 	position: fixed;
 55 | 	top: 0;
 56 | 	left: 0;
 57 | 	padding: 20px 15px;
 58 | }
 59 | 
 60 | .nav-links {
 61 | 	padding-top: 15px;
 62 | 	list-style: none;
 63 | 	position: relative;
 64 | }
 65 | 
 66 | .nav-links li {
 67 | 	padding: 10px 0;
 68 | }
 69 | 
 70 | .nav-links li:hover {
 71 | 	background: rgba(44, 156, 65, 0.3);
 72 | 	border-radius: 5px;
 73 | 	box-shadow: 0 5px 10px rgba(44, 156, 65, 0.3);
 74 | 	transition: all 0.6s ease-in;
 75 | 	transition: all 0.6s ease-in-out;
 76 | 	color: aliceblue;
 77 | 	font-size: 16.3px;
 78 | }
 79 | 
 80 | .nav-links li a {
 81 | 	display: flex;
 82 | 	align-items: center;
 83 | 	color: aliceblue;
 84 | 	padding: 10px 12px;
 85 | }
 86 | 
 87 | .nav-links li a i {
 88 | 	font-size: 18px;
 89 | 	margin-right: 20px;
 90 | }
 91 | 
 92 | .logout {
 93 | 	display: flex;
 94 | 	justify-content: center;
 95 | 	align-items: center;
 96 | 	margin-top: 50%;
 97 | 	border-top: 1px solid #fff;
 98 | }
 99 | 
100 | .logout a {
101 | 	font-size: 14px;
102 | }
103 | 
104 | .logout a:hover {
105 | 	color: #04051c;
106 | 	transition: all 0.4s ease-in;
107 | 	transition: all 0.4s ease-in-out;
108 | }
109 | 
110 | .logout a p {
111 | 	padding: 0 10px;
112 | }
113 | 
114 | .main {
115 | 	width: 100%;
116 | 	margin-left: 250px;
117 | }
118 | 
119 | .main .head {
120 | 	display: flex;
121 | 	align-items: center;
122 | 	padding: 10px 15px;
123 | 	background: rgba(168, 241, 182, 0.7);
124 | 	color: #04051c;
125 | 	border-bottom: 1px solid #04051c;
126 | }
127 | 
128 | .head h1 {
129 | 	font-size: 18px;
130 | }
131 | 
132 | .form-box {
133 | 	width: 70%;
134 | 	background: aliceblue;
135 | 	margin: 3% auto 4% auto;
136 | 	color: #04051c;
137 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
138 | 	border-radius: 10px;
139 | 	align-items: center;
140 | 	padding-bottom: 10px;
141 | }
142 | 
143 | .form-box:hover {
144 | 	background: #fff;
145 | 	box-shadow: rgba(44, 156, 65, 0.3);
146 | 	transition: all 0.4s ease-in;
147 | 	transition: all 0.4s ease-in-out;
148 | }
149 | 
150 | .form-box h1 {
151 | 	background: linear-gradient(to top, #10286e, #09163d, #04051c);
152 | 	text-align: center;
153 | 	color: #fff;
154 | 	padding: 14px;
155 | 	font-size: 1rem;
156 | 	margin-bottom: 10px;
157 | }
158 | 
159 | .form-box p {
160 | 	margin-left: 14%;
161 | 	font-weight: 500;
162 | 	font-size: 1.11rem;
163 | }
164 | 
165 | .input-box {
166 | 	color: #10286e;
167 | 	display: flex;
168 | 	align-items: center;
169 | 	justify-content: center;
170 | 	margin: 0 auto 20px auto;
171 | 	width: 80%;
172 | 	border-radius: 50px;
173 | 	padding: 5px 0 5px 0;
174 | }
175 | 
176 | .inputs {
177 | 	width: 90%;
178 | 	border: none;
179 | 	outline: none;
180 | 	background: rgba(9, 22, 61, 0.95);
181 | 	border-radius: 50px;
182 | 	color: #fff;
183 | 	padding: 5px 20px;
184 | 	display: flex;
185 | 	justify-content: left;
186 | 	align-items: center;
187 | }
188 | 
189 | .inputs:focus {
190 | 	width: 90%;
191 | 	border: none;
192 | 	outline: none;
193 | 	background: rgba(9, 22, 61, 0.95);
194 | 	border-radius: 50px;
195 | 	color: aliceblue;
196 | }
197 | 
198 | .inputs i {
199 | 	opacity: 70%;
200 | 	padding-right: 20px;
201 | }
202 | 
203 | .input-box input {
204 | 	width: 90%;
205 | 	border: none;
206 | 	outline: none;
207 | 	background: transparent;
208 | 	color: aliceblue;
209 | 	font-size: 1rem;
210 | }
211 | 
212 | .input-box .inputs:hover {
213 | 	color: #fff;
214 | 	background: rgba(9, 22, 61, 1);
215 | 	transition: all 0.4s ease-in;
216 | 	transition: all 0.4s ease-in-out;
217 | }
218 | 
219 | ::placeholder {
220 | 	color: #fff;
221 | }
222 | 
223 | a {
224 | 	text-decoration: none;
225 | }
226 | 
227 | .login-btn {
228 | 	margin: 0 auto 10px auto;
229 | 	width: 25%;
230 | 	display: block;
231 | 	outline: none;
232 | 	padding: 5px;
233 | 	border: none;
234 | 	cursor: pointer;
235 | 	background: rgba(44, 156, 65, 0.9);
236 | 	color: #fff;
237 | 	box-shadow: 0 0 1.5px 0 #fff;
238 | 	border-radius: 50px;
239 | }
240 | 
241 | .login-btn:hover {
242 | 	background: rgba(44, 156, 65, 1);
243 | 	color: #04051c;
244 | 	box-shadow: 0 0 5px 0 #10286e;
245 | 	transition: all 0.4s ease-in;
246 | 	transition: all 0.4s ease-in-out;
247 | }
248 | 


--------------------------------------------------------------------------------
/HTML:Php/styles/funduser.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "poppins";
  3 | 	src: url(../fonts/Poppins-Medium.ttf);
  4 | }
  5 | @font-face {
  6 | 	font-family: "eternal";
  7 | 	src: url(../fonts/eternal.ttf);
  8 | }
  9 | @font-face {
 10 | 	font-family: "goodtimes";
 11 | 	src: url(../fonts/goodtimesrg.ttf);
 12 | }
 13 | 
 14 | * {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	box-sizing: border-box;
 18 | 	font-family: "poppins", sans-serif;
 19 | }
 20 | 
 21 | body {
 22 | 	overflow-x: hidden;
 23 | }
 24 | 
 25 | .header {
 26 | 	width: 100%;
 27 | 	height: 100vh;
 28 | 	display: flex;
 29 | 	position: relative;
 30 | }
 31 | 
 32 | .logo {
 33 | 	display: block;
 34 | 	font-family: "goodtimes";
 35 | 	text-decoration: none;
 36 | 	font-size: 22px;
 37 | 	color: rgba(168, 241, 182, 0.7);
 38 | 	margin-top: 0;
 39 | 	padding-top: 5px;
 40 | }
 41 | 
 42 | a {
 43 | 	display: flex;
 44 | 	align-items: center;
 45 | 	text-decoration: none;
 46 | 	color: aliceblue;
 47 | 	padding: 20px 15px;
 48 | }
 49 | 
 50 | .side-nav {
 51 | 	width: 250px;
 52 | 	height: 100%;
 53 | 	background: linear-gradient(to top, #2c9c41, #10286e, #09163d, #04051c);
 54 | 	position: fixed;
 55 | 	top: 0;
 56 | 	left: 0;
 57 | 	padding: 20px 15px;
 58 | }
 59 | 
 60 | .nav-links {
 61 | 	padding-top: 15px;
 62 | 	list-style: none;
 63 | 	position: relative;
 64 | }
 65 | 
 66 | .nav-links li {
 67 | 	padding: 10px 0;
 68 | }
 69 | 
 70 | .nav-links li:hover {
 71 | 	background: rgba(44, 156, 65, 0.3);
 72 | 	border-radius: 5px;
 73 | 	box-shadow: 0 5px 10px rgba(44, 156, 65, 0.3);
 74 | 	transition: all 0.6s ease-in;
 75 | 	transition: all 0.6s ease-in-out;
 76 | 	color: aliceblue;
 77 | 	font-size: 16.3px;
 78 | }
 79 | 
 80 | .nav-links li a {
 81 | 	display: flex;
 82 | 	align-items: center;
 83 | 	color: aliceblue;
 84 | 	padding: 10px 12px;
 85 | }
 86 | 
 87 | .nav-links li a i {
 88 | 	font-size: 18px;
 89 | 	margin-right: 20px;
 90 | }
 91 | 
 92 | .logout {
 93 | 	display: flex;
 94 | 	justify-content: center;
 95 | 	align-items: center;
 96 | 	margin-top: 50%;
 97 | 	border-top: 1px solid #fff;
 98 | }
 99 | 
100 | .logout a {
101 | 	font-size: 14px;
102 | }
103 | 
104 | .logout a:hover {
105 | 	color: #04051c;
106 | 	transition: all 0.4s ease-in;
107 | 	transition: all 0.4s ease-in-out;
108 | }
109 | 
110 | .logout a p {
111 | 	padding: 0 10px;
112 | }
113 | 
114 | .main {
115 | 	width: 100%;
116 | 	margin-left: 250px;
117 | }
118 | 
119 | .main .head {
120 | 	display: flex;
121 | 	align-items: center;
122 | 	padding: 20px 15px;
123 | 	background: rgba(168, 241, 182, 0.7);
124 | 	color: #04051c;
125 | 	border-bottom: 1px solid #04051c;
126 | }
127 | 
128 | .head h1 {
129 | 	font-size: 18px;
130 | }
131 | 
132 | .form-box {
133 | 	width: 70%;
134 | 	background: aliceblue;
135 | 	margin: 3.5% auto 4% auto;
136 | 	color: #04051c;
137 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
138 | 	border-radius: 10px;
139 | 	align-items: center;
140 | 	padding-bottom: 10px;
141 | }
142 | 
143 | .form-box:hover {
144 | 	background: #fff;
145 | 	box-shadow: rgba(44, 156, 65, 0.3);
146 | 	transition: all 0.4s ease-in;
147 | 	transition: all 0.4s ease-in-out;
148 | }
149 | 
150 | .form-box h1 {
151 | 	background: linear-gradient(to top, #10286e, #09163d, #04051c);
152 | 	text-align: center;
153 | 	color: #fff;
154 | 	padding: 14px;
155 | 	font-size: 1.5rem;
156 | 	margin-bottom: 30px;
157 | }
158 | 
159 | .form-box p {
160 | 	margin-top: 10px;
161 | 	margin-left: 14%;
162 | 	font-weight: 500;
163 | 	font-size: 1.11rem;
164 | }
165 | 
166 | .input-box {
167 | 	color: #10286e;
168 | 	display: flex;
169 | 	align-items: center;
170 | 	justify-content: center;
171 | 	margin: 0 auto 30px auto;
172 | 	width: 80%;
173 | 	border-radius: 50px;
174 | 	padding: 10px 0 5px 0;
175 | }
176 | 
177 | .inputs {
178 | 	width: 90%;
179 | 	border: none;
180 | 	outline: none;
181 | 	background: rgba(9, 22, 61, 0.95);
182 | 	border-radius: 50px;
183 | 	color: #fff;
184 | 	padding: 10px 20px;
185 | 	display: flex;
186 | 	justify-content: left;
187 | 	align-items: center;
188 | }
189 | 
190 | .inputs:focus {
191 | 	width: 90%;
192 | 	border: none;
193 | 	outline: none;
194 | 	background: rgba(9, 22, 61, 0.95);
195 | 	border-radius: 50px;
196 | 	color: aliceblue;
197 | }
198 | 
199 | .inputs i {
200 | 	opacity: 70%;
201 | 	padding-right: 20px;
202 | }
203 | 
204 | .input-box input {
205 | 	width: 90%;
206 | 	border: none;
207 | 	outline: none;
208 | 	background: transparent;
209 | 	color: aliceblue;
210 | 	font-size: 1rem;
211 | }
212 | 
213 | .input-box .inputs:hover {
214 | 	color: #fff;
215 | 	background: rgba(9, 22, 61, 1);
216 | 	transition: all 0.4s ease-in;
217 | 	transition: all 0.4s ease-in-out;
218 | }
219 | 
220 | ::placeholder {
221 | 	color: #fff;
222 | }
223 | 
224 | a {
225 | 	text-decoration: none;
226 | }
227 | 
228 | .login-btn {
229 | 	margin: 0 auto 10px auto;
230 | 	width: 25%;
231 | 	display: block;
232 | 	outline: none;
233 | 	padding: 5px 0;
234 | 	border: none;
235 | 	cursor: pointer;
236 | 	background: rgba(44, 156, 65, 0.9);
237 | 	color: #fff;
238 | 	box-shadow: 0 0 1.5px 0 #fff;
239 | 	border-radius: 50px;
240 | }
241 | 
242 | .login-btn:hover {
243 | 	background: rgba(44, 156, 65, 1);
244 | 	color: #04051c;
245 | 	box-shadow: 0 0 5px 0 #10286e;
246 | 	transition: all 0.4s ease-in;
247 | 	transition: all 0.4s ease-in-out;
248 | }
249 | 


--------------------------------------------------------------------------------
/read_card_and_send_to_db/read_card_and_send_to_db.ino:
--------------------------------------------------------------------------------
  1 | 
  2 | #include <ESP8266WebServer.h>
  3 | #include <ESP8266HTTPClient.h>
  4 | 
  5 | //Include the library for the RFID Reader
  6 | #include <SPI.h>
  7 | #include <MFRC522.h>
  8 | 
  9 | //define the pin numbers
 10 | #define SS_PIN 2 //--> SDA / SS is connected to pinout D4
 11 | #define RST_PIN 5  //--> RST is connected to pinout D3
 12 | 
 13 | #define ON_Board_LED 2  //--> Defining an On Board LED, used for indicators when the process of connecting to a wifi router
 14 | #define Buzzer 16 // D0 pin for the buzzer
 15 | 
 16 | MFRC522 mfrc522(SS_PIN, RST_PIN);  //--> Create MFRC522 instance.
 17 | 
 18 | int readsuccess;
 19 | byte readcard[4];
 20 | char str[32] = "";
 21 | String StrUID;
 22 | 
 23 | //-----SSID and Password of the access point you want to create from the system-------//
 24 | const char* ssid = "Credit Account";
 25 | const char* password = "0987654321";
 26 | 
 27 | //set the endpoint that data will be dropped
 28 | const String paymentType = "credit";  //change to debit for debitting account
 29 | const String apikey = "somade_daniel";
 30 | const String servername = "http://192.168.4.2/nfc_payment/backend/process_payment.php";
 31 | 
 32 | //add api key and payement type to the endpoint
 33 | const String serverApi = servername + "?apikey=" + String(apikey) + "&paymentType=" + String(paymentType);
 34 | 
 35 | ESP8266WebServer server(80);  //--> Server on port 80
 36 | 
 37 | void setup() {
 38 |   Serial.begin(115200); //--> Initialize serial communications with the PC
 39 |   
 40 |   SPI.begin();      //--> Init SPI bus
 41 |   
 42 |   mfrc522.PCD_Init(); //--> Init MFRC522 card
 43 | 
 44 |   delay(500);
 45 |   
 46 |   pinMode(ON_Board_LED, OUTPUT);
 47 |   pinMode(Buzzer, OUTPUT);
 48 |   digitalWrite(ON_Board_LED, HIGH); //--> Turn off Led On Board
 49 |   digitalWrite(Buzzer, LOW);
 50 | 
 51 | //create the access point
 52 |   WiFi.softAP(ssid, password);
 53 |   Serial.print("Access Point: ");
 54 |   Serial.print(ssid); Serial.println(" ...");
 55 |   Serial.print("IP address:\t");
 56 |   Serial.println(WiFi.softAPIP()); 
 57 |   server.begin();
 58 |   Serial.println("HTTP server started");
 59 | 
 60 |   Serial.println("");
 61 |   Serial.println("Please tag a card or keychain to see the UID !");
 62 |   Serial.println("");
 63 | }
 64 | 
 65 | void loop() {
 66 |   readsuccess = getid();
 67 | 
 68 |   if (readsuccess) {
 69 |     String UIDresultSend, postData;
 70 |      
 71 |     //when it reads a card, on the led and buzzer
 72 |     digitalWrite(ON_Board_LED, LOW);
 73 |     digitalWrite(Buzzer, HIGH);
 74 |     
 75 |     //get the card number and print it on the screen
 76 |     UIDresultSend = StrUID;  
 77 |     Serial.println(UIDresultSend); 
 78 | 
 79 |     //concantenate readings with endpoint to send data
 80 |     String request = serverApi + "&card_number=" + String(UIDresultSend);
 81 |     Serial.print("Request: "); Serial.print(request);
 82 |     Serial.println("");
 83 | 
 84 |     //Declare object of class HTTPClient
 85 |     WiFiClient client;
 86 |     HTTPClient http;    
 87 |     http.begin(client,request.c_str());  //Specify request destination
 88 | 
 89 |     int httpResponseCode = http.GET();   //Send the request
 90 | 
 91 |    //off the buzzer and led after 0.5sec, its here so that the microcontroller can send request immediately
 92 |     delay(500);
 93 |     digitalWrite(ON_Board_LED, HIGH);
 94 |     digitalWrite(Buzzer, LOW);
 95 |       
 96 |     if(httpResponseCode > 1){
 97 |       //diplay response of request from server 
 98 |       String payload = http.getString();
 99 |       Serial.println(payload);
100 |     }else{
101 |       //display error code is request is not sent
102 |       Serial.print("Error code: "); Serial.print(httpResponseCode);
103 |     }
104 | 
105 |     http.end();  //Close connection
106 | 
107 |     //on the buzzer and led for 0.2second after getting response from backend
108 |     digitalWrite(ON_Board_LED, LOW);
109 |     digitalWrite(Buzzer, HIGH);
110 |     delay(200);
111 |     digitalWrite(ON_Board_LED, HIGH);
112 |     digitalWrite(Buzzer, LOW);
113 | 
114 |     //add a new line
115 |     Serial.println("");
116 |   }
117 | }
118 | 
119 | //----------------Procedure for reading and obtaining a UID from a card or keychain----------//
120 | int getid() {
121 |   if (!mfrc522.PICC_IsNewCardPresent()) {
122 |     return 0;
123 |   }
124 |   if (!mfrc522.PICC_ReadCardSerial()) {
125 |     return 0;
126 |   }
127 | 
128 |   Serial.print("THE UID OF THE SCANNED CARD IS : ");
129 | 
130 |   for (int i = 0; i < 4; i++) {
131 |     readcard[i] = mfrc522.uid.uidByte[i]; //storing the UID of the tag in readcard
132 |     array_to_string(readcard, 4, str);
133 |     StrUID = str;
134 |   }
135 |   mfrc522.PICC_HaltA();
136 |   return 1;
137 | }
138 | 
139 | //----Procedure to change the result of reading an array UID into a string----------//
140 | void array_to_string(byte array[], unsigned int len, char buffer[]) {
141 |   for (unsigned int i = 0; i < len; i++)
142 |   {
143 |     byte nib1 = (array[i] >> 4) & 0x0F;
144 |     byte nib2 = (array[i] >> 0) & 0x0F;
145 |     buffer[i * 2 + 0] = nib1  < 0xA ? '0' + nib1  : 'A' + nib1  - 0xA;
146 |     buffer[i * 2 + 1] = nib2  < 0xA ? '0' + nib2  : 'A' + nib2  - 0xA;
147 |   }
148 |   buffer[len * 2] = '\0';
149 | }
150 | 


--------------------------------------------------------------------------------
/HTML:Php/styles/users.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: "poppins";
  3 | 	src: url(../fonts/Poppins-Medium.ttf);
  4 | }
  5 | @font-face {
  6 | 	font-family: "eternal";
  7 | 	src: url(../fonts/eternal.ttf);
  8 | }
  9 | @font-face {
 10 | 	font-family: "goodtimes";
 11 | 	src: url(../fonts/goodtimesrg.ttf);
 12 | }
 13 | 
 14 | * {
 15 | 	margin: 0;
 16 | 	padding: 0;
 17 | 	box-sizing: border-box;
 18 | 	font-family: "poppins", sans-serif;
 19 | }
 20 | 
 21 | body {
 22 | 	overflow-x: hidden;
 23 | }
 24 | 
 25 | .header {
 26 | 	width: 100%;
 27 | 	height: 100vh;
 28 | 	display: flex;
 29 | 	position: relative;
 30 | }
 31 | 
 32 | .logo {
 33 | 	display: block;
 34 | 	font-family: "goodtimes";
 35 | 	text-decoration: none;
 36 | 	font-size: 22px;
 37 | 	color: rgba(168, 241, 182, 0.7);
 38 | 	margin-top: 0;
 39 | 	padding-top: 5px;
 40 | }
 41 | 
 42 | a {
 43 | 	display: flex;
 44 | 	align-items: center;
 45 | 	text-decoration: none;
 46 | 	color: aliceblue;
 47 | 	padding: 20px 15px;
 48 | }
 49 | 
 50 | .side-nav {
 51 | 	width: 250px;
 52 | 	height: 100%;
 53 | 	background: linear-gradient(to top, #2c9c41, #10286e, #09163d, #04051c);
 54 | 	position: fixed;
 55 | 	top: 0;
 56 | 	left: 0;
 57 | 	padding: 20px 15px;
 58 | }
 59 | 
 60 | .nav-links {
 61 | 	padding-top: 15px;
 62 | 	list-style: none;
 63 | 	position: relative;
 64 | }
 65 | 
 66 | .nav-links li {
 67 | 	padding: 10px 0;
 68 | }
 69 | 
 70 | .nav-links li:hover {
 71 | 	background: rgba(44, 156, 65, 0.3);
 72 | 	border-radius: 5px;
 73 | 	box-shadow: 0 5px 10px rgba(44, 156, 65, 0.3);
 74 | 	transition: all 0.6s ease-in;
 75 | 	transition: all 0.6s ease-in-out;
 76 | 	color: aliceblue;
 77 | 	font-size: 16.3px;
 78 | }
 79 | 
 80 | .nav-links li a {
 81 | 	display: flex;
 82 | 	align-items: center;
 83 | 	color: aliceblue;
 84 | 	padding: 10px 12px;
 85 | }
 86 | 
 87 | .nav-links li a i {
 88 | 	font-size: 18px;
 89 | 	margin-right: 20px;
 90 | }
 91 | 
 92 | .logout {
 93 | 	display: flex;
 94 | 	justify-content: center;
 95 | 	align-items: center;
 96 | 	margin-top: 50%;
 97 | 	border-top: 1px solid #fff;
 98 | }
 99 | 
100 | .logout a {
101 | 	font-size: 14px;
102 | }
103 | 
104 | .logout a:hover {
105 | 	color: #04051c;
106 | 	transition: all 0.4s ease-in;
107 | 	transition: all 0.4s ease-in-out;
108 | }
109 | 
110 | .logout a p {
111 | 	padding: 0 10px;
112 | }
113 | 
114 | .main {
115 | 	width: 100%;
116 | 	margin-left: 250px;
117 | }
118 | 
119 | .main .head {
120 | 	display: flex;
121 | 	align-items: center;
122 | 	justify-content: space-between;
123 | 	padding: 15px 15px 15px 50px;
124 | 	background: rgba(168, 241, 182, 0.7);
125 | 	color: #04051c;
126 | 	border-bottom: 1px solid #04051c;
127 | }
128 | 
129 | .head h1 {
130 | 	transform: translateX(-35px);
131 | 	font-size: 18px;
132 | }
133 | 
134 | .head a {
135 | 	background-color: rgba(9, 22, 61, 0.92);
136 | 	max-width: 200px;
137 | 	width: 100%;
138 | 	padding: 3px;
139 | 	color: aliceblue;
140 | 	display: flex;
141 | 	align-items: center;
142 | 	justify-content: space-around;
143 | 	border-radius: 60px;
144 | 	font-size: 0.92rem;
145 | }
146 | 
147 | .head a:hover {
148 | 	background-color: rgba(9, 22, 61, 1);
149 | 	color: #fff;
150 | 	transition: linear 0.4s;
151 | }
152 | 
153 | .searchbar {
154 | 	width: 100%;
155 | 	max-width: 400px;
156 | 	background: rgba(9, 22, 61, 0.92);
157 | 	display: flex;
158 | 	align-items: center;
159 | 	border-radius: 60px;
160 | 	padding: 5px;
161 | }
162 | 
163 | .searchbar input {
164 | 	background: transparent;
165 | 	border: none;
166 | 	color: rgba(255, 255, 255, 1);
167 | 	flex: 1;
168 | 	outline: none;
169 | 	padding: 0 20px;
170 | }
171 | 
172 | input::placeholder {
173 | 	color: rgba(255, 255, 255, 1);
174 | }
175 | 
176 | .searchbar button {
177 | 	border: none;
178 | 	border-radius: 50%;
179 | 	width: 20px;
180 | 	height: 20px;
181 | 	background: none;
182 | 	color: #fff;
183 | 	margin-right: 20px;
184 | 	cursor: pointer;
185 | }
186 | 
187 | .logtable {
188 | 	padding: 30px 50px;
189 | }
190 | 
191 | table {
192 | 	border-collapse: collapse;
193 | 	width: 100%;
194 | 	height: auto;
195 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
196 | 	border-radius: 10px;
197 | }
198 | 
199 | tr {
200 | 	transform: all 0.4s ease-in;
201 | }
202 | 
203 | th,
204 | td {
205 | 	padding: 12px;
206 | 	text-align: left;
207 | 	border-bottom: 1px solid rgba(168, 241, 182, 0.7);
208 | }
209 | 
210 | #header {
211 | 	background: linear-gradient(to top, #10286e, #09163d, #04051c);
212 | 	color: aliceblue;
213 | }
214 | 
215 | #header:hover {
216 | 	transform: scale(1);
217 | 	box-shadow: 1px 1px 6px rgba(9, 22, 61, 0.7);
218 | }
219 | 
220 | tr:hover {
221 | 	transform: scale(1.015);
222 | 	transition: 0.4s ease-in;
223 | 	cursor: pointer;
224 | 	background: aliceblue;
225 | 	box-shadow: 2px 2px 12px rgba(9, 22, 61, 0.7);
226 | }
227 | 
228 | .switch {
229 | 	display: flex;
230 | 	align-items: center;
231 | 	width: 50px;
232 | 	height: 20px;
233 | }
234 | 
235 | input[type="checkbox"] {
236 | 	appearance: none;
237 | }
238 | 
239 | .slider {
240 | 	display: block;
241 | 	cursor: pointer;
242 | 	width: 50px;
243 | 	height: 25px;
244 | 	transition: 0.4s;
245 | 	border-radius: 20px;
246 | 	background-color: #10286e;
247 | 	overflow: hidden;
248 | 	transition: ease-in 0.5s;
249 | 	transition: ease-out 0.5%;
250 | }
251 | 
252 | .slider2 {
253 | 	display: none;
254 | 	cursor: pointer;
255 | 	width: 50px;
256 | 	height: 25px;
257 | 	transition: 0.4s;
258 | 	border-radius: 20px;
259 | 	background-color: rgb(105, 210, 126);
260 | 	overflow: hidden;
261 | 	transition: ease-in 0.5s;
262 | }
263 | 
264 | input[type="checkbox"]:checked ~ .slider {
265 | 	display: none;
266 | 	transition: ease-out 0.5s;
267 | }
268 | input[type="checkbox"]:checked ~ .slider2 {
269 | 	display: block;
270 | 	transition: ease-in 0.5s;
271 | }
272 | 
273 | .slider::before {
274 | 	display: flex;
275 | 	justify-content: center;
276 | 	align-items: center;
277 | 	margin-top: 6.8%;
278 | 	margin-left: 7%;
279 | 	content: "";
280 | 	background: rgb(255, 255, 255);
281 | 	width: 18px;
282 | 	height: 18px;
283 | 	border-radius: 50%;
284 | 	transition: 0.5s;
285 | }
286 | 
287 | input[type="checkbox"]:checked ~ .slider::before {
288 | 	transform: translateX(-50px);
289 | }
290 | 
291 | .slider2::before {
292 | 	display: flex;
293 | 	justify-content: center;
294 | 	align-items: center;
295 | 	margin-top: 6.8%;
296 | 	margin-left: 55%;
297 | 	content: "";
298 | 	background: #10286e;
299 | 	width: 20px;
300 | 	height: 20px;
301 | 	border-radius: 50%;
302 | 	transition: 0.5s;
303 | }
304 | 
305 | input[type="checkbox"]:checked ~ .slider2::before {
306 | 	transform: translateX(0px);
307 | }
308 | 


--------------------------------------------------------------------------------
/HTML:Php/dashboard.php:
--------------------------------------------------------------------------------
  1 | <?php 
  2 | session_start();
  3 | if(isset($_SESSION['username'])){
  4 |     $user = $_SESSION['username'];
  5 | 
  6 | 	include "../backend/db_conn.php";
  7 | 	$fetch_total_users = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) AS total FROM students_data where matric_number!='Admin'"));
  8 | 	$fetch_total_transactions = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) AS total FROM logs"));
  9 | 	$fetch_total_credit = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) AS total FROM logs where transaction_type='0'"));
 10 | 	$fetch_total_debit = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) AS total FROM logs where transaction_type='1'"));
 11 | ?>
 12 | 
 13 | <!DOCTYPE html>
 14 | <html lang="en">
 15 | 
 16 | <head>
 17 |     <meta charset="UTF-8" />
 18 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 19 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 20 |     <title>NFC Pay | Dashboard</title>
 21 |     <link rel="stylesheet" href="./styles/dashboard.css" />
 22 |     <script src="https://kit.fontawesome.com/bef2386e82.js" crossorigin="anonymous"></script>
 23 |     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 24 |     <script type="text/javascript">
 25 |     google.charts.load("current", {
 26 |         packages: ["corechart"]
 27 |     });
 28 |     google.charts.setOnLoadCallback(drawChart);
 29 | 
 30 |     function drawChart() {
 31 |         var data = google.visualization.arrayToDataTable([
 32 |             ["Task", "Users", {
 33 |                 role: "style"
 34 |             }],
 35 |             ["Active Users", 3950, "#134f84"],
 36 |             ["Inactive Users", 1410, "#2c9c41"],
 37 |         ]);
 38 | 
 39 |         var options = {
 40 |             title: "Users",
 41 |             width: 600,
 42 |             height: 400,
 43 |             bar: {
 44 |                 groupWidth: "95%"
 45 |             },
 46 |         };
 47 | 
 48 |         var chart = new google.visualization.PieChart(
 49 |             document.getElementById("piechart")
 50 |         );
 51 | 
 52 |         chart.draw(data, options);
 53 |     }
 54 |     </script>
 55 |     <script type="text/javascript">
 56 |     google.charts.load("current", {
 57 |         packages: ["corechart"]
 58 |     });
 59 |     google.charts.setOnLoadCallback(drawChart);
 60 | 
 61 |     function drawChart() {
 62 |         var data = google.visualization.arrayToDataTable([
 63 |             ["Days", "Purchases", {
 64 |                 role: "style"
 65 |             }],
 66 |             ["Week 1", 3654, "#2c9c41"],
 67 |             ["Week 2", 2234, "#134f84"],
 68 |             ["Week 3", 5342, "#10286e"],
 69 |             ["Week 4", 1234, "color: #e5e4e2"],
 70 |         ]);
 71 | 
 72 |         var view = new google.visualization.DataView(data);
 73 |         view.setColumns([
 74 |             0,
 75 |             1,
 76 |             {
 77 |                 calc: "stringify",
 78 |                 sourceColumn: 1,
 79 |                 type: "string",
 80 |                 role: "annotation",
 81 |             },
 82 |             2,
 83 |         ]);
 84 | 
 85 |         var options = {
 86 |             title: "Purchases This Month",
 87 |             width: 600,
 88 |             height: 400,
 89 |             bar: {
 90 |                 groupWidth: "95%"
 91 |             },
 92 |             legend: {
 93 |                 position: "none"
 94 |             },
 95 |         };
 96 |         var chart = new google.visualization.BarChart(
 97 |             document.getElementById("barchart_values")
 98 |         );
 99 |         chart.draw(view, options);
100 |     }
101 |     </script>
102 | </head>
103 | 
104 | <body>
105 |     <div class="header">
106 |         <div class="side-nav">
107 |             <a href="#" class="logo">NFC Pay</a>
108 |             <ul class="nav-links">
109 |                 <li>
110 |                     <a href="dashboard.php"><i class="fa-solid fa-gauge"></i>
111 |                         <p>Dashboard</p>
112 |                     </a>
113 |                 </li>
114 |                 <li>
115 |                     <a href="funduser.php"><i class="fa-solid fa-money-bill-transfer"></i>
116 |                         <p>Make Payment</p>
117 |                     </a>
118 |                 </li>
119 |                 <li>
120 |                     <a href="users.php"><i class="fa-solid fa-users"></i>
121 |                         <p>User Management</p>
122 |                     </a>
123 |                 </li>
124 |                 <li>
125 |                     <a href="logs.php"><i class="fa-solid fa-book"></i>
126 |                         <p>Logs</p>
127 |                     </a>
128 |                 </li>
129 |                 <div class="logout">
130 |                     <a href="../backend/process_logout.php">
131 |                         <p>Log-Out</p>
132 |                         <i class="fa-solid fa-arrow-right-from-bracket"></i>
133 |                     </a>
134 |                 </div>
135 |             </ul>
136 |         </div>
137 |         <div class="main">
138 |             <div class="head">
139 |                 <h1>Dashboard</h1>
140 |             </div>
141 |             <div class="content">
142 |                 <h1>Overview</h1>
143 |                 <div class="cards_wrapper">
144 |                     <a href="users.php">
145 |                         <div class="card">
146 |                             <h2><i class="fa-solid fa-users-viewfinder"></i>Total Users</h2>
147 |                             <p class="users" id="users"><?php echo $fetch_total_users['total']; ?></p>
148 |                         </div>
149 |                     </a>
150 |                     <a href="logs.php">
151 |                         <div class="card">
152 |                             <h2><i class="fa-solid fa-address-book"></i>Transactions</h2>
153 |                             <p class="newLogs" id="newLogs"><?php echo $fetch_total_transactions['total']; ?></p>
154 |                         </div>
155 |                     </a>
156 |                     <a href="newuser.php">
157 |                         <div class="card">
158 |                             <h2><i class="fa-solid fa-user-clock"></i>Total Credits</h2>
159 |                             <p class="newUsers" id="newUsers"><?php echo $fetch_total_credit['total']; ?></p>
160 |                         </div>
161 |                     </a>
162 |                     <a href="newuser.php">
163 |                         <div class="card">
164 |                             <h2><i class="fa-solid fa-user-clock"></i>Total Debits</h2>
165 |                             <p class="newUsers" id="newUsers"><?php echo $fetch_total_debit['total']; ?></p>
166 |                         </div>
167 |                     </a>
168 |                     <!-- <a href="users.php">
169 |                         <div class="card">
170 |                             <h2><i class="fa-solid fa-users-gear"></i>Active Users</h2>
171 |                             <p class="activeUsers" id="activeUsers">3950</p>
172 |                         </div>
173 |                     </a>
174 |                     <a href="newuser.php">
175 |                         <div class="card">
176 |                             <h2><i class="fa-solid fa-user-clock"></i>New Users</h2>
177 |                             <p class="newUsers" id="newUsers">102</p>
178 |                         </div>
179 |                     </a>
180 |                     <a href="logs.php">
181 |                         <div class="card">
182 |                             <h2><i class="fa-solid fa-address-book"></i>New Logs</h2>
183 |                             <p class="newLogs" id="newLogs">567</p>
184 |                         </div>
185 |                     </a> -->
186 |                 </div>
187 | 
188 |                 <!-- This is used for the charts -->
189 |                 <!-- 
190 | 				<div class="stats">
191 |                     <h1>Stats</h1>
192 |                 </div>
193 | 
194 |                 <div class="chartlay">
195 |                     <div id="barchart_values" class="charts"></div>
196 |                     <div id="piechart" class="charts"></div>
197 |                 </div> -->
198 |             </div>
199 |         </div>
200 |     </div>
201 | </body>
202 | 
203 | </html>
204 | 
205 | <?php 
206 | }else{
207 | 	header("location: ./index.php");
208 | } 
209 | ?>


--------------------------------------------------------------------------------