Simple Date Range Search Using PHP/Ajax

golgari318 · 2025-02-27T06:17:11+0000

In this tutorial we will try to create a search function based on the two date range using Ajax. Ajax is a client-side script that communicates to server without the need for a complete page refresh. By using ajax It let's your website more interactive to the user. Most of the function in facebook uses ajax, that's why it is very convenient to use. Now that we know how about ajax, let's start coding.

Creating the database
In creating a database we just need a program to make a database worked (wamp, xamp, etc..). After opening your web server create a database and name it "db_search". Then click SQL and copy/paste the code below and run the sql query

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Mar 07, 2017 at 06:12 AM
-- Server version: 10.1.16-MariaDB
-- PHP Version: 5.6.24
SET

SQL_MODE =

"NO_

AUTO_

VALUE_

ON_

ZERO"

;
SET

time_zone =

"+00:00"

;
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */

;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */

;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */

;
/*!40101 SET NAMES utf8mb4 */

;
--
-- Database: `db_search`
--
-- --------------------------------------------------------
--
-- Table structure for table `book`
--
CREATE

TABLE

`book`

(
`book_

id`

int

(

11

)

NOT

NULL

,
`ISBN`

varchar

(

20

)

NOT

NULL

,
`title`

varchar

(

100

)

NOT

NULL

,
`author`

varchar

(

50

)

NOT

NULL

,
`date_

published`

date

NOT

NULL
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

latin1;
--
-- Dumping data for table `book`
--
INSERT

INTO

`book`

(

`book_

id`

,

`ISBN`

,

`title`

,

`author`

,

`date_

published`

)

VALUES
(

1

,

'978-1-891830-71-6'

,

'AEIOU or Any Easy Intimacy '

,

'Jeffrey Brown'

,

'2017-03-08'

)

,
(

2

,

'978-1-60309-2395'

,

'American Elf 1999'

,

'James Kochalka'

,

'2017-03-17'

)

,
(

3

,

'978-1-891830-37-2'

,

'The Barefoot Serpent (softcover)'

,

' Scott Morse'

,

'2017-04-04'

)

,
(

4

,

'978-1-891830-40-2'

,

'Beach Safari'

,

'Mawil'

,

'2017-03-17'

)

,
(

5

,

'978-1-891830-56-3'

,

'Bighead'

,

'Jeffrey Brown'

,

'2017-04-01'

)

;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `book`
--
ALTER

TABLE

`book`
ADD

PRIMARY KEY

(

`book_

id`

)

;
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `book`
--
ALTER

TABLE

`book`
MODIFY

`book_

id`

int

(

11

)

NOT

NULL

AUTO_INCREMENT

,

AUTO_INCREMENT

=

6

;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */

;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */

;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */

;

Creating the form
To create a form open any kind of text editor that your computer already installed(notepad, notepad++, etc..) or if there's not I highly recommended to install a text editor. After that copy/paste the given code below and then name it "index.php".

<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
<link rel = "stylesheet" type = "text/css" href = "css/jquery-ui.css"/>
<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
</head>
<body>
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<a href = "https://sourcecodester.com" class = "navbar-brand">Sourcecodester</a>
</div>
</nav>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well">
<h3 class = "text-primary">Simple Date Range Search Using PHP & Ajax</h3>
<hr style = "border-top:1px dotted #000;"/>
<div class = "form-inline">
<label>Date:</label>
<input type = "text" class = "form-control" placeholder = "Start" id = "date1"/>
<label>To</label>
<input type = "text" class = "form-control" placeholder = "End" id = "date2"/>
<button type = "button" class = "btn btn-primary" id = "btn_search"><span class = "glyphicon glyphicon-search"></span></button> <button type = "button" id = "reset" class = "btn btn-success"><span class = "glyphicon glyphicon-refresh"><span></button>
</div>
<br /><br />
<div class = "table-responsive">
<table class = "table table-bordered alert-warning">
<thead>
<tr>
<th style = "width:25%;">ISBN</th>
<th style = "width:30%;">Title</th>
<th>Author</th>
<th style = "width:20%;">Date Published</th>
</tr>
</thead>
<tbody id = "load_data">
<?php
$conn

=

new

mysqli(

"localhost"

,

"root"

,

""

,

"db_search"

)

;
if

(

!

$conn

)

{
die

(

"Fatal Error: Connection Error!"

)

;
}
$q_book

=

$conn

->

query

(

"SELECT * FROM `book` ORDER BY `title` ASC"

)

or die

(

mysqli_error

(

)

)

;
while

(

$f_book

=

$q_book

->

fetch_array

(

)

)

{
?>
<tr>
<td><?php

echo

$f_book

[

'ISBN'

]

?>

</td>
<td><?php

echo

$f_book

[

'title'

]

?>

</td>
<td><?php

echo

$f_book

[

'author'

]

?>

</td>
<td><?php

echo

date

(

"m/d/Y"

,

strtotime

(

$f_book

[

'date_published'

]

)

)

?>

</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script src = "js/jquery-3.1.1.js"></script>
<script src = "js/jquery-ui.js"></script>
<script src = "js/ajax.js"></script>
</html>

Creating a ajax response query
We will create a query that will call back the request of an ajax from the server to display the exact value of an input. To do that copy/paste the given code below then name it "get_data.php".

<?php
$date1

=

date

(

"Y-m-d"

,

strtotime

(

$_POST

[

'date1'

]

)

)

;
$date2

=

date

(

"Y-m-d"

,

strtotime

(

$_POST

[

'date2'

]

)

)

;
$conn

=

new

mysqli(

"localhost"

,

"root"

,

""

,

"db_search"

)

;
if

(

!

$conn

)

{
die

(

"Fatal Error: Connection Error!"

)

;
}
$q_book

=

$conn

->

query

(

"SELECT * FROM `book` WHERE `date_published` BETWEEN '$date1

' AND '$date2

' ORDER BY `title` ASC"

)

or die

(

mysqli_error

(

)

)

;
$v_book

=

$q_book

->

num_rows

;
if

(

$v_book

>

0

)

{
while

(

$f_book

=

$q_book

->

fetch_array

(

)

)

{
?>
<tr>
<td><?php

echo

$f_book

[

'ISBN'

]

?>

</td>
<td><?php

echo

$f_book

[

'title'

]

?>

</td>
<td><?php

echo

$f_book

[

'author'

]

?>

</td>
<td><?php

echo

date

(

"m/d/Y"

,

strtotime

(

$f_book

[

'date_published'

]

)

)

?>

</td>
</tr>
<?php
}
}

else

{
echo

'
<tr>
<td colspan = "4"><center>Record Not Found</center></td>
</tr>
'

;
}
?>

Creating the ajax script
We will now then create the ajax that make the simple application fully works. By adding the ajax script it will make an application more interactive to the user because it prevent the web page by refreshing that makes it looks real time updater. To do that copy/paste the given code below and name it "ajax.js"

$(

document)

.ready

(

function

(

)

{
$(

'#date1'

)

.datepicker

(

)

;
$(

'#date2'

)

.datepicker

(

)

;
$(

'#btn_search'

)

.on

(

'click'

,

function

(

)

{
if

(

$(

'#date1'

)

.val

(

)

==

""

||

$(

'#date2'

)

.val

(

)

==

""

)

{
alert(

"Please enter something on the text field"

)

;
}

else

{
$date1 =

$(

'#date1'

)

.val

(

)

;
$date2 =

$(

'#date2'

)

.val

(

)

;
$(

'#load_data'

)

.empty

(

)

;
$loader =

$(

'<tr ><td colspan = "4"><center>Searching....</center></td></tr>'

)

;
$loader.appendTo

(

'#load_data'

)

;
setTimeout(

function

(

)

{
$loader.remove

(

)

;
$.ajax

(

{
url:

'get_data.php'

,
type:

'POST'

,
data:

{
date1:

$date1,
date2:

$date2
}

,
success:

function

(

res)

{
$(

'#load_data'

)

.html

(

res)

;
}
}

)

;
}

,

3000

)

;
}
}

)

;
$(

'#reset'

)

.on

(

'click'

,

function

(

)

{
location.reload

(

)

;
}

)

;
}

)

;

There you have it we created a simple date range search by using ajax/PHP. I hope that you learn something on this tutorial. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Download

You must upgrade your account or reply in the thread to view hidden text.

Simple Date Range Search Using PHP/Ajax

More options

golgari318

452,292

323,341

323,350