Show Transaction Between Two Date Range PHP Project


transaction table

CREATE TABLE `transaction` (
  `id` int(11) NOT NULL,
  `name` varchar(25) NOT NULL,
  `amount` float(10,2) NOT NULL DEFAULT '0.00',
  `date_time` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

index.php

<?php
  include_once 'database.php';
  $result = mysqli_query($conn,"SELECT * from transaction;");
  ?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="date-js/jquery-ui.js"></script>
  <script src="date-js/jquery-ui1.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true });
    $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
  } );
  </script>
  <script>
  $( function() {
    $( "#datepicker1" ).datepicker({ changeMonth: true, changeYear: true });
    $( "#datepicker1" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
  } );
  </script>
</head>
<body>
<div class="w3-orange w3-padding-64" style="width:50%;margin: 0 auto;padding: 10px 0;">
	<div class="w3-conatiner w3-center">
	<form method="post" action="show-transction.php">
	
				<div class="w3-row-padding">
					<div class="w3-third">

						<select class="w3-select w3-border" name="name">
							<option value="" disabled selected>Choose name</option>
							<?php
							$i=0;
							while($row = mysqli_fetch_array($result)) {
							?>
							<option value="<?php echo $row["name"];?>"><?php echo $row["name"];?></option>
							<?php
								$i++;
							   }
							?>
						</select>
						
					</div>
					<div class="w3-third">
					<P align="center"><input type="text" class="w3-input w3-border" id="datepicker" name="from_date" placeholder="From date" style="width:70%"></p>	
					</div>
					<div class="w3-third">
					
					<P align="center"><input type="text" class="w3-input w3-border" id="datepicker1" name="to_date" placeholder="To date" style="width:70%"></p>
					</div>
					</div>
					<P align="center"> <input type="submit" class="w3-btn w3-brown w3-round" name="save" value="Submit"></p>
	
	</form>
</div>
</body>
</html>

show-transction.php

<?php
include_once 'database.php';
if(isset($_POST['save']))
  {
        $name= $_POST['name'];
		$from_date = $_POST['from_date'];
		$to_date = $_POST['to_date'];
		$result= mysqli_query($conn,"SELECT * from transction where date_time between '$from_date' and '$to_date' AND name='$name';");
		$result1 = mysqli_query($conn,"SELECT SUM(amount) as total_amount from transction where date_time between '$from_date' and '$to_date' and name='$name';");
  }
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>My data</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
             
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
		<th>Date & Time </th>
        <th>Amount</th>
		
      </tr>
    </thead>
    <tbody>
      <?php
$i=0;
while($row = mysqli_fetch_array($result)) {
?>
    <tr>
	    <td><?php echo $row["id"] ; ?></td>
        <td><?php echo $row["name"] ; ?></td>
		<td><?php echo $row["date_time"] ; ?></td>
        <td><?php echo $row["amount"] ; ?></td>
    </tr>
<?php $i++; } ?> </tbody> </table> <?php $j=0; while($row1 = mysqli_fetch_array($result1)) { ?> <h3 align="right">Total Amount : <?php echo $row1["total_amount"] ; ?></h3> <?php $j++; } ?> </div>
</body>
</html>