Date Range Search by using JQuery Datepicker with Ajax PHP [w/ subs]



00:00:00 – hello friends in this video we are going
00:00:01 – to discuss how to make PHP script for
00:00:05 – search mysql data between to date
00:00:08 – without page refresh by using ski
00:00:10 – datepicker with PHP and ajax
00:00:14 – in this video we will search data from
00:00:16 – mysql database based on dates between
00:00:20 – two given date range and when we will
00:00:22 – click on filter button then we'll send
00:00:25 – requests to Ajax method by ajax method
00:00:28 – will send requests to PHP script and
00:00:31 – then after PHP script search data from
00:00:34 – database based on to given dates and
00:00:37 – sent back to Ajax method and we can so
00:00:39 – filter data on web page without page
00:00:42 – refresh
00:00:44 – here we have used query date picker for
00:00:46 – choose the dates for the search options
00:00:48 – and based on this two dates we will use
00:00:51 – this two dates into database query with
00:00:53 – between closed and we will filter data
00:00:55 – based on to date range
00:01:05 – this is our testing database and then
00:01:07 – this
00:01:08 – we have wine order table with colin like
00:01:10 – quarter red order customer name order
00:01:12 – item order value and order date in this
00:01:16 – table we have already inserted some data
00:01:18 – we will first display data on web page
00:01:21 – and we will put to date filter for
00:01:23 – finding border between to date
00:01:26 – this is our index thought PHP page on
00:01:29 – this page we have used query JavaScript
00:01:32 – framework for using square e on this
00:01:34 – page we have also use bootstrap CSS
00:01:37 – framework for using square e datepicker
00:01:41 – on this page we have to put this two-cd
00:01:43 – and link on our page first link is
00:01:46 – fridge query user interface javascript
00:01:49 – linked by using this link we can use
00:01:52 – query user interface interactions
00:01:54 – effects widgets in our page and second
00:01:57 – is the link help used to provide CSS the
00:02:00 – query interface javascript library
00:02:05 – first we have defined to text box so for
00:02:08 – this we have right input type is equal
00:02:10 – to text with attribute name is equal to
00:02:13 – from day it is equal to from date
00:02:23 – for second text box we have a game
00:02:26 – input type is equal to text with
00:02:28 – attribute name is equal to date and it
00:02:31 – is equal to two date
00:02:37 – then after we have defined one button
00:02:40 – for execute query code so for the suite
00:02:43 – of right input type is equal to button
00:02:45 – with attribute name is equal to filter
00:02:47 – it is equal to filter in value is equal
00:02:50 – to filter
00:02:58 – after defining HTML element now we want
00:03:02 – to display order data on we page so for
00:03:05 – this first we have make database
00:03:07 – connection so for this we have right
00:03:09 – dollar connect variable is equal to miss
00:03:11 – click connect function with for argument
00:03:14 – host is equal to local lost username is
00:03:17 – equal to root password is equal to blank
00:03:19 – and database name is equal to testing
00:03:25 – after me
00:03:26 – database connection we have right dollar
00:03:28 – query variable is equal to select star
00:03:31 – from table order ordered by order it in
00:03:33 – descending order
00:03:35 – this will fetch order data from mortar
00:03:37 – table
00:03:39 – now we want to execute this query so for
00:03:42 – this we have right resolve variable is
00:03:44 – equal to miss clay query function with
00:03:46 – two argument in first argument we have
00:03:49 – right database connections thing dollar
00:03:52 – connect variable and then second we have
00:03:54 – right dollar query variable in which we
00:03:56 – have stores select query this function
00:03:59 – will execute query and store result in
00:04:02 – this result variable
00:04:04 – after this we want to print order data
00:04:06 – in HTML table so for this we have to
00:04:09 – find one division tagged with attributed
00:04:12 – is equal to order table and between this
00:04:14 – division tag we have defined one table
00:04:17 – with five table heading tag with tax
00:04:20 – like it
00:04:21 – customer name item value and order date
00:04:28 – now we want to print order table data
00:04:30 – into this HTML table so for this we have
00:04:34 – right while loop with open and close
00:04:36 – bracket and between this bracket we have
00:04:38 – right dollar row variable is equal to
00:04:41 – mystically fatter a function with my
00:04:43 – argument like dollar resolve variable
00:04:46 – this will convert query result data to
00:04:49 – associative array in store into the
00:04:51 – staller row variable
00:04:53 – after this we want to print data and
00:04:56 – table data so for this we have rights
00:04:58 – open and close tablerow tag in between
00:05:01 – this time we have right five table data
00:05:03 – tag and in first table data tag we have
00:05:06 – print order it table column in second
00:05:09 – table data tag we have print order
00:05:11 – customer name table column data and
00:05:14 – third table data tag we have print order
00:05:17 – item column table data and fourth column
00:05:19 – we have print order value table column
00:05:22 – data and in last table data tag we have
00:05:24 – prints ordered a table column data this
00:05:27 – will print all order data into this HTML
00:05:30 – table now we have show up but in browser
00:05:40 – friends we can see that to text box with
00:05:43 – one filter button below we can see the
00:05:46 – order data in HTML table from this to
00:05:49 – text box we can select from date and to
00:05:52 – date from query date picker for putting
00:05:55 – query date picker and this to text box
00:05:58 – for this we have goldich query code part
00:06:01 – and execute query function on this to
00:06:04 – text box so for on this page first we
00:06:08 – have right dollar anonymous function and
00:06:10 – between this function first we have
00:06:12 – right dollar with selector from date
00:06:14 – thought datepicker method here from data
00:06:17 – is Diego from date xbox and this date
00:06:19 – picker method will act of age queried a
00:06:22 – picture on this text box
00:06:26 – four sho text box under to date xbox so
00:06:30 – for this we have right dollar with
00:06:31 – today's selector with a picture method
00:06:34 – here to data is the aid of two day text
00:06:36 – box and it will activate squarey
00:06:38 – datepicker plugin on this text box so
00:06:42 – for this first we have checks queried a
00:06:44 – pic you're working or not friends we
00:06:47 – have seen that when we have click on
00:06:49 – text box then at that x query date
00:06:52 – picker has been appear on the screen and
00:06:54 – we can select eight but when we have
00:06:57 – click on date it display date and text
00:06:59 – box and date month year format but we
00:07:02 – want to get date in your month date
00:07:04 – format so for this we have go to index
00:07:07 – dot PHP page query cold and here we have
00:07:10 – right dollar Dog datepicker dot set
00:07:12 – defaults method and this method we have
00:07:15 – to write dateformat argument set to your
00:07:18 – dashboard dash date format this way we
00:07:21 – have set the date format now let us
00:07:23 – check it working or not friends when we
00:07:27 – have refreshed the page and click on
00:07:29 – text box denge query date picker has
00:07:31 – appear on screen and when we have click
00:07:34 – on date then it has returned date and
00:07:36 – year month date format that means it is
00:07:38 – working now we have proceeded for filter
00:07:41 – or data here data must be filter based
00:07:44 – on this to date and when we have clicked
00:07:47 – on this filter button then data must be
00:07:49 – filter and we can sewn on this page
00:07:51 – without page refresh
00:07:54 – so for this on this page we have right
00:07:56 – dollar with selector filter witches and
00:07:59 – it'll filter button with click event
00:08:01 – with anonymous function when we have
00:08:03 – click on filter button then this code
00:08:06 – will execute
00:08:08 – in this function first we want to get
00:08:11 – the value of two tax box so for this we
00:08:14 – have right variable from data is equal
00:08:16 – to dollar with selector from date with
00:08:18 – value method here from data is Diego
00:08:21 – from date xbox and by using value method
00:08:24 – we can get the value of this tax box and
00:08:27 – store into this from date variable
00:08:30 – then after we have right to date
00:08:32 – variable is equal to dollar with
00:08:34 – selector to date with value method here
00:08:37 – to date is an eighth of today text box
00:08:40 – and by using value method we can get the
00:08:42 – value of this tax box and store into
00:08:45 – this to date variable
00:08:49 – now we have write a statement with
00:08:51 – conditions like from day variable not
00:08:53 – equal to blank and to date variable is
00:08:56 – not equal to blank this condition will
00:08:59 – check if both variable has some value
00:09:01 – then it will execute if block of code
00:09:05 – but suppose both or one of the variable
00:09:08 – has no value then it will execute else
00:09:10 – block and in this block we want to print
00:09:13 – alert message like please select eight
00:09:17 – but suppose both variable whose value
00:09:20 – then it will execute if block of code
00:09:23 – and in this block first we have right
00:09:25 – ajax method and in this method first we
00:09:27 – have set URL argument to filter dog PHP
00:09:31 – page it will send requests to this page
00:09:34 – after this we have said method to post
00:09:37 – it will set request method to post
00:09:42 – then after we want to define which day
00:09:45 – that we want to send the server so for
00:09:47 – this we have right data with open and
00:09:49 – close bracket and between bracket we
00:09:51 – have defined from date and two day data
00:09:54 – it will send us data to the server
00:09:58 – lastly we have ride success callback
00:10:01 – function if requests and succeeds then
00:10:03 – this function will be called this
00:10:05 – function will receive data from the
00:10:07 – server and store into this function data
00:10:10 – argument now we want display this data
00:10:13 – under order table which is an eighth of
00:10:15 – division and much we have display or
00:10:18 – data so for this we have right dollar
00:10:20 – with selector order table with HTML
00:10:23 – method and this method we have right
00:10:25 – data this will print which data it has
00:10:27 – received from server it will display on
00:10:30 – to this division tag
00:10:35 – now we have moved
00:10:36 – to filter dot PHP page so on this page
00:10:40 – first we have right of statement with
00:10:42 – conditions like set function with
00:10:44 – arguments like dollar post from date
00:10:46 – variable comma dollar post to date
00:10:49 – variable this condition will check if
00:10:51 – both variable has been set then it will
00:10:54 – execute if block of code
00:10:57 – so under this block first we have make
00:10:59 – database connection and after making
00:11:02 – database connection we have to find one
00:11:04 – out what variable is equal to blank
00:11:07 – value and this variable we will store
00:11:09 – which state that we have filter from
00:11:11 – from order table we will store that data
00:11:13 – in HTML table format under this variable
00:11:17 – after this we have right query variable
00:11:20 – is equal to select start from table or
00:11:23 – where order date between dollar post
00:11:25 – from date variable and dollar post to
00:11:27 – date variable this query will select or
00:11:31 – data from this to date range
00:11:40 – now we want to execute this query so for
00:11:44 – this we have right dollar resolve
00:11:46 – variable is equal to miss clay query
00:11:48 – function with two argument in first
00:11:51 – argument we have right database
00:11:52 – connection string which is dollar
00:11:54 – connect variable and then second
00:11:56 – argument we have right query which we
00:11:58 – have store into this query variable
00:12:00 – after this we have right dollar output
00:12:03 – variable with string concatenation
00:12:05 – operator and in this we have store table
00:12:08 – with 5 heading tag like head customer
00:12:11 – named item value and ordered a
00:12:17 – then after we want
00:12:19 – two-count number of rows in query result
00:12:22 – so for this we have right of statement
00:12:24 – with conditions like Miss clean Ambrose
00:12:26 – function with one argument like dollar
00:12:28 – result variable greater than 0 this
00:12:31 – condition will query result has more
00:12:33 – than 0 rows that will execute if block
00:12:36 – code so in this block we want to print
00:12:39 – filter data under HTML table so for this
00:12:43 – we have right while loop open and close
00:12:45 – bracket and between bracket we have
00:12:47 – right dollar row variable is equal to
00:12:50 – mystically patcher a function with my
00:12:52 – argument like dollar resolve variable
00:12:55 – here this function will convert resolved
00:12:58 – variable data to associative array and
00:13:00 – store into this dollar row variable now
00:13:04 – we want to store data in HTML table and
00:13:07 – output variable so for this we have
00:13:10 – right dollar output variable with string
00:13:13 – concatenation operator with open and
00:13:15 – close table row and between this tag we
00:13:18 – have right five table data tag and in
00:13:20 – first table data tag we have print order
00:13:23 – it table column in second table data tag
00:13:26 – we have print order customer name table
00:13:29 – column data in third table data tag we
00:13:32 – have print order item column table data
00:13:34 – and fourth column we have print order
00:13:36 – value table column data and in last
00:13:39 – table data tag we have prints ordered a
00:13:41 – table column data this will print all
00:13:44 – order data into this HTML table
00:13:48 – but suppose there is ZERO roll under
00:13:51 – query result then it will else block of
00:13:53 – code and under this block of code we
00:13:55 – have right dollar output variable with
00:13:58 – string concatenation operator and under
00:14:01 – text we have right open and close
00:14:03 – tablerow tag in between this tag we have
00:14:06 – right table data tag with a tribute
00:14:08 – colspan is equal to five attacks like no
00:14:11 – order found
00:14:13 – now we want to send all out what
00:14:15 – variable data to Ajax function so for
00:14:18 – this we have right tackle statement with
00:14:20 – dollar output variable this will send
00:14:23 – all output variable data to the Ajax
00:14:26 – success function and it will display
00:14:28 – that data on web page without page
00:14:31 – refresh now or code is ready so we have
00:14:34 – saved this code at checkout button
00:14:36 – browser
00:14:49 – friends we can see that when we have
00:14:52 – click on filter button then and fill
00:14:54 – their order data based on from date and
00:14:56 – to date without page refresh here we
00:14:59 – have make a simple PHP script which has
00:15:02 – been called by Ajax function suppose we
00:15:05 – have not select both or any one of the
00:15:08 – day then it will not filter ordered data
00:15:10 – and return back alert message but
00:15:13 – suppose we have select both date them
00:15:16 – and fill their order data between from
00:15:18 – date and to date when we have click on
00:15:21 – filter button then it has been execute
00:15:23 – query code and much we love make ajax
00:15:25 – request and it said requested to PHP
00:15:28 – script and PHP script work on service
00:15:31 – side and its search data from ordered
00:15:34 – table based on which state we have
00:15:35 – selected query date picker then after
00:15:39 – PHP script sent back data to Ajax method
00:15:42 – in HTML table format and loge query we
00:15:45 – have this play which date that we have
00:15:47 – received from service side in HTML
00:15:50 – format we have this play on wii page
00:15:52 – without page refresh event so friends if
00:15:56 – you liked this video tutorial please
00:15:58 – share this video with your friends or
00:16:00 – you can also share this video on social
00:16:02 – media also friends you want to get more
00:16:06 – update of my video so friends you can
00:16:09 – subscribe my youtube channel friends you
00:16:12 – can also like my facebook page also wore
00:16:15 – you can also follow webs listen


Video Url:
http://youtu.be/AqliKAafGfc

(Visited 24 times, 20 visits today)

Comments

comments