Fetch Records Between Two Date Using Ajax, PHP and MySql


In this post I will explain how to fetch data or records between two dates using Ajax,  PHP and mySql. This topic is very important part of any web developer point of view. 

Fetch Records Between Two Date Using Ajax, PHP and MySql

Fetching data between two dates are widely used in various industry like various e-commerce site and portals and many more. In this post I am using Ajax, PHP and mySql to fetch data or records between two dates.

This post contains followings files:
  • config.php
  • employee_add.php
  • employee_insert.php
  • employee_search.php
  • search_result.php

Follow these steps to fetch data or records between two dates

Step 1.   Crate a database , and give database name like tutorials

Note:- If you facing any problem to create database see my previous post like How to Insert Data in Database using PHP and mySql

Step 2.   Create a table under tutorials database and give table name like employee. This table having five fields like emp_id, emp_name, emp_gender, emp_email, emp_mobile, emp_address, emp_join_date so table structure shown below

Fetch Records Between Two Date Using Ajax, PHP and MySql









Note:- If you facing any problem to create table under that database see my previous post like How to Insert Data in Database using PHP and mySql

Step 3.   Crate config.php file, code shown below

<?php

$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "tutorials"; 

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
   die("Connection failed: " . $conn->connect_error);

?>

Step 4.   Crate employee_add.php file, code shown below

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Add Employee Records</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
  <form action="employee_insert.php" method="post">
  <h2 align="center">Add Employees Record using PHP and MySQL</h2><hr /><br />
  <table align="center" border="1">
    <tbody>
    <tr>
      <td>Name</td>
      <td><input name="name" placeholder="Name" type="text" required></td>
    <tr>
      <td>Gender</td>
      <td>
      <input name="gender" type="radio" value="male" checked="">Male
      <input name="gender" type="radio" value="female">Female
      </td>
    </tr>
    <tr>
      <td>Email Id.</td>
      <td><input name="email" id="email" placeholder="Email Id."  type="text" required></td>
      </tr>
    <tr>
      <td>Mobile No.</td>
      <td><input name="mobile" id="mobile" placeholder="Mobile No." type="text" maxlength="10" required></td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><textarea name="address" placeholder="Address" rows="5" required></textarea></td>
    </tr>
    <tr>
      <td>Joining Date</td>
      <td><input name="joindate" id="joindate" type="text" required placeholder="Select Date"></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" name="submit" value="Submit"></td>
    </tr>
    </tbody>
  </table>
</form>
</body>
</html>
<script>  
  $(document).ready(function(){  
   $.datepicker.setDefaults({  
        dateFormat: 'yy-mm-dd'   
   });  
   $(function(){  
      $("#joindate").datepicker();    
   });    
  });  
</script>

Step 5.   Create employee_insert.php file, code shown below

<?php
include_once('config.php');

$name    = $_POST['name'];
$gender  = $_POST['gender'];
$email    = $_POST['email'];
$mobile   = $_POST['mobile'];
$address  = $_POST['address'];
$joindate  = $_POST['joindate'];

$data = "insert into employee (emp_name, emp_gender, emp_email, emp_mobile, emp_address, emp_join_date) values ('$name', '$gender', '$email', '$mobile', '$address', '$joindate')";
$result = mysqli_query($conn, $data);

if(isset($result))
{
    echo "Record Add Successfully...";
}
else
{
    echo "Employee Entry not Inserted";
}
?>

<!DOCTYPE html>
<html>
<head>
<title>View Employees Record</title>
</head>
<body>
<form action="employee_search.php">
<br/>
  <input type="submit" name="view" value="View Employees Record">
</form>
</body>
</html>

Step 6.   Create employee_search.php file code shown below

<?php 
include_once('config.php');

 $data = "select * from employee order by emp_id asc";  
 $result = mysqli_query($conn, $data);  
 ?>  
 <!DOCTYPE html>  
 <html>  
  <head>  
   <title>Fetch Data Between Two Dates Using Ajax, PHP and MySql</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  </head>
  <body>  
    <br /><br />
    <h2 align="center">Fetch Data Between Two Dates Using Ajax, PHP and MySql</h2><hr /><br />
    <table border="0" align="center">
      <tbody>
        <tr>
          <td>
            <input type="text" name="fdate" id="fdate" placeholder="From Date" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="tdate" id="tdate" placeholder="To Date" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" name="search" id="search" value="SEARCH" />
          </td>
        </tr>
      </tbody>
    </table> 
    <br />
    <table border="1" align="center" id="search_table">  
      <tr>  
         <th width="5%">Id</th>  
         <th width="30%">Name</th>  
         <th width="10%">Gender</th>  
         <th width="25%">Email</th>  
         <th width="15%">Mobile No</th>
         <th width="15%">Join Date</th>  
      </tr>  
     <?php  
     while($row = mysqli_fetch_array($result))  
     {  
     ?>  
      <tr>  
         <td><?php echo $row["emp_id"]; ?></td>  
         <td><?php echo $row["emp_name"]; ?></td>  
         <td><?php echo $row["emp_gender"]; ?></td>  
         <td><?php echo $row["emp_email"]; ?></td>  
         <td><?php echo $row["emp_mobile"]; ?></td>
         <td><?php echo $row["emp_join_date"]; ?></td>
      </tr>  
     <?php  
     }  
     ?>  
     </table> 
  </body>  
 </html>  
 <script>  
  $(document).ready(function(){  
   $.datepicker.setDefaults({  
        dateFormat: 'yy-mm-dd'   
   });  
   $(function(){  
      $("#fdate").datepicker();  
      $("#tdate").datepicker();  
   });  
   $('#search').click(function(){  
      var fdate = $('#fdate').val();  
      var tdate = $('#tdate').val();  
        if(fdate != '' && tdate != '')  
        {  
         $.ajax({  
              url:"search_result.php",  
              method:"POST",  
              data:{fdate:fdate, tdate:tdate},  
              success:function(data)  
              {  
                $('#search_table').html(data);  
              }  
         });  
        }  
        else  
        {  
          alert("Please Select Date");  
        }  
   });  
  });  
 </script>

Step 7.   Create search_result.php file code shown below

<?php  
include_once('config.php');

 if(isset($_POST["fdate"], $_POST["tdate"]))  
 {  
  $results = '';  
  $data = "select * from employee where emp_join_date between '".$_POST["fdate"]."' and '".$_POST["tdate"]."'  
  ";  
  $result = mysqli_query($conn, $data);  
  $results .= '  
   <table border="1" align="center">  
     <tr>  
         <th width="5%">ID</th>  
         <th width="30%">Name</th>  
         <th width="10%">Gender</th>  
         <th width="25%">Email</th>  
         <th width="15%">Mobile</th>
         <th width="15%">Join Date</th> 
     </tr>  
  ';  
  if(mysqli_num_rows($result) > 0)  
  {  
   while($row = mysqli_fetch_array($result))  
   {  
    $results .= '  
     <tr>  
        <td>'. $row["emp_id"] .'</td>  
        <td>'. $row["emp_name"] .'</td>  
        <td>'. $row["emp_gender"] .'</td>  
        <td>'. $row["emp_email"] .'</td>  
        <td>'. $row["emp_mobile"] .'</td>
        <td>'. $row["emp_join_date"] .'</td>  
       </tr>  
    ';  
   }  
  }  
  else  
  {  
   $results .= '  
    <tr>  
         <td colspan="6">No Records Found</td>  
    </tr>  
   ';  
  }  
  $results .= '</table>';  
  echo $results;  
 }  
 ?>

Step 8.   Now go to browser and type localhost/tutorials/employee_add.php (here tutorilals is the root folder) and run screen shown below


Fetch Records Between Two Date Using Ajax, PHP and MySql

Step 9.   Now fill up values in required fields then click submit button screen shown below


Fetch Records Between Two Date Using Ajax, PHP and MySql

Step 10.   Click  View Employee Record button, screen shown below


Fetch Records Between Two Date Using Ajax, PHP and MySql

Step 11.   Now select the date  in required fields in which date you want to search the records of employee then click Search button, search result will display screen shown below


Fetch Records Between Two Date Using Ajax, PHP and MySql




                         I hope, it helped you to understand, how to fetch records between two date using Ajax, PHP and mySql.......Thanks

About MSK TUTORIAL

Hi...I am Md Sahjad Karim and I am Engineering Graduate (B.E in Computer Science and Engineering) working as a Web Developer and write Blog Articles. http://www.msktutorial.com/ was launched on july 2016 to provide free online hints, tips, guides and tutorials related to technology(PHP, CodeIgniter, WordPress, Blogger etc). My primary goal is to provide the good, quality and easily to understand the articles to readers around the world.
    Blogger Comment
    Facebook Comment

4 comments:

shruti said...

Thanks for sharing such informative post keep updating.
Snap on our tags to know more about us.
Web Design company in Hubli | web designing in Hubli | SEO company in Hubli

Sujitkumar said...

Nice info about Php it’s reallyhelpful…. If it possible share some more tutorials……….

Unknown said...

Good information
href=”https://indglobal.in/”>website design in bangalore
href=”https://indglobal.in/”>ecommerce website design in bangalore
href=”https://indglobal.in/”>mobile app development

Unknown said...

It just needed a few edits. But it was functioning as needed. Thank you so much sir! Bless you!

Post a Comment

Thanks For Visiting Blog...