running a single page with dynamic variable as query - php

Question

I am developing a page that sum a summary of report. By default it only shows today. I am using this:
include $koneksi
$date ='current_date';
$query1 = mysqli_query($koneksi,"SELECT * from daftar where tanggal=subdate($date, 1)");
$result=mysqli_num_rows($query1);
And here is my HTML
<div class="count blue"><?php echo $result." people(s)"?></div>
And it works, the result of query is what I expected.
Now I need to change the value of $date variable with datepicker.
<div class='input-group date' id='myDatepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I want it so that every time I click on datepicker the variable $date will change and the page will reload (same page but different query result ) by itself.

Answer 1

If you want the data to displayed in the same page, better you can use Angular. Here, just to show the flow I have used angularJs but the support for angularJs has been stopped so use Angular or reactJs as per your need (search more about it)
Use html to construct a form and using angularJs http.post(), post your form data to php
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function(){
var date_input=$('input[name="inpDate"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
});
</script>
<form ng-submit="submit()">
<label>Date</label>
<input class="form-control" ng-model="inpDate" id="date" name="inpDate" placeholder="YYYY-MM-DD" type="text" required="required"/>
</form>
And write a separate angularJs file as below. On submit this will send date to the php file and get the response.
$scope.submit = function(){
var date1=$scope.inpDate;
$http.get('http://localhost/report/urfile.php?inpdate='+date1).success(function(shiftdata) {
$scope.dbValue = shiftdata;
console.log(JSON.stringify(shiftdata) );
});
}
after this modify your php will to receive the data and send a response accordingly.
Now the data is URL you can get it in ph like below.
urfile.php
$date = $_GET['inpdate'];